*{margin:0;padding:0;box-sizing:border-box}body{font-family:Plus Jakarta Sans,sans-serif;background:#f1f5f9;color:#1e293b;padding:16px;min-height:100vh}.app{max-width:1400px;margin:0 auto;display:grid;gap:20px}header{background:linear-gradient(135deg,#1e3a5f,#2d6a9f);color:#fff;border-radius:20px;padding:20px 28px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}header h1{font-size:24px;font-weight:800;letter-spacing:-.5px}header h1 i{margin-right:10px;color:#fbbf24}header .subtitle{font-size:13px;opacity:.75;font-weight:500;margin-top:2px}header .header-left{flex:1}header .header-right{display:flex;align-items:center;gap:8px}.code-badge{background:#ffffff26;padding:6px 18px;border-radius:100px;font-size:18px;font-weight:800;letter-spacing:3px;cursor:pointer;transition:background .15s;-webkit-user-select:none;user-select:none}.code-badge:hover{background:#ffffff40}.code-badge i{font-size:14px;margin-right:6px;letter-spacing:0}.qr-btn{background:#ffffff1f;border:none;color:#fff;width:34px;height:34px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;font-size:16px}.qr-btn:hover{background:#ffffff40}.leave-btn{background:#ef444433;border:none;color:#fca5a5;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;transition:all .15s;font-family:inherit;display:flex;align-items:center;gap:4px}.leave-btn:hover{background:#ef444459;color:#fff}.layout{display:grid;grid-template-columns:1fr 420px;gap:20px;align-items:start}@media(max-width:960px){.layout{grid-template-columns:1fr}}.cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.cat-btn{padding:6px 14px;border-radius:100px;border:1.5px solid #e2e8f0;background:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;color:#64748b;font-family:inherit}.cat-btn:hover{border-color:#2563eb;color:#2563eb}.cat-btn.active{background:#2563eb;color:#fff;border-color:#2563eb}.search-bar{position:relative;margin-bottom:12px}.search-bar input{width:100%;padding:10px 14px 10px 40px;border-radius:12px;border:1.5px solid #e2e8f0;background:#fff;font-size:13px;font-family:inherit;outline:none;transition:border-color .15s}.search-bar input:focus{border-color:#2563eb}.search-bar i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#94a3b8}.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:20px}.menu-card{background:#fff;border-radius:12px;border:1.5px solid #e2e8f0;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:all .12s;position:relative}.menu-card:hover{border-color:#2563eb;box-shadow:0 3px 10px #2563eb14}.menu-card .code{font-size:10px;font-weight:700;color:#94a3b8;background:#f1f5f9;padding:1px 7px;border-radius:5px;width:fit-content}.menu-card .name{font-size:12px;font-weight:600;line-height:1.35}.menu-card .price{font-size:13px;font-weight:700;color:#059669;margin-top:auto;padding-top:4px}.menu-card .ingredients{font-size:10px;color:#94a3b8}.menu-card .added-badge{position:absolute;top:-5px;right:-5px;background:#059669;color:#fff;font-size:10px;font-weight:700;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0596694d}.persons-bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:#fff;border-radius:16px;padding:12px 16px;border:1.5px solid #e2e8f0}.person-chip{padding:6px 14px;border-radius:100px;border:1.5px solid #e2e8f0;background:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;color:#475569;font-family:inherit;display:inline-flex;align-items:center;gap:6px}.person-chip:hover{border-color:#2563eb}.person-chip.active{background:#2563eb;color:#fff;border-color:#2563eb}.person-chip .p-count{background:#0000001a;font-size:10px;padding:1px 6px;border-radius:100px;font-weight:700}.person-chip.active .p-count{background:#ffffff40}.person-chip .p-del{margin-left:2px;font-size:11px;opacity:.5;cursor:pointer}.person-chip .p-del:hover{opacity:1}.add-person-btn{padding:6px 14px;border-radius:100px;border:1.5px dashed #94a3b8;background:transparent;font-size:12px;font-weight:600;cursor:pointer;color:#64748b;font-family:inherit;transition:all .12s}.add-person-btn:hover{border-color:#2563eb;color:#2563eb}.order-panel{background:#fff;border-radius:20px;border:1.5px solid #e2e8f0;padding:16px;position:sticky;top:16px;max-height:calc(100vh - 40px);display:flex;flex-direction:column}.order-panel h2{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}.order-panel h2 span{background:#2563eb;color:#fff;font-size:11px;padding:1px 8px;border-radius:100px}.order-panel .order-sub{font-size:11px;color:#94a3b8;margin-bottom:10px}.order-items{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;min-height:80px}.order-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#cbd5e1;gap:6px;padding:30px 0}.order-empty i{font-size:28px}.order-empty p{font-size:12px;font-weight:600}.order-item{background:#f8fafc;border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:8px;border:1px solid #e2e8f0;animation:slideIn .18s ease}@keyframes slideIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.order-item .oi-code{font-size:10px;font-weight:700;color:#94a3b8;min-width:24px}.order-item .oi-info{flex:1;min-width:0}.order-item .oi-name{font-size:11px;font-weight:600}.order-item .oi-qty{display:flex;align-items:center;gap:4px}.order-item .oi-qty button{width:22px;height:22px;border-radius:6px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;color:#64748b;transition:all .1s}.order-item .oi-qty button:hover{border-color:#2563eb;color:#2563eb}.order-item .oi-qty .qty-num{font-size:13px;font-weight:700;min-width:16px;text-align:center}.order-item .oi-remove{width:22px;height:22px;border-radius:6px;border:none;background:#fef2f2;color:#ef4444;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;transition:all .1s}.order-item .oi-remove:hover{background:#ef4444;color:#fff}.order-person-total{margin-top:10px;padding:8px 12px;background:#f0fdf4;border-radius:10px;display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:#059669}.group-summary{margin-top:12px;padding-top:12px;border-top:2px solid #e2e8f0}.group-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:12px}.group-row .gr-name{font-weight:600}.group-row .gr-total{font-weight:700;color:#059669}.group-total-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0 0;margin-top:4px;border-top:1px solid #e2e8f0;font-size:16px;font-weight:800;color:#059669}.group-total-row .gt-label{color:#1e293b;font-size:14px}.order-actions{display:flex;gap:6px;margin-top:10px}.order-actions button{flex:1;padding:8px;border-radius:10px;border:none;font-weight:600;font-size:12px;cursor:pointer;transition:all .12s;font-family:inherit}.btn-clear{background:#f1f5f9;color:#64748b}.btn-clear:hover{background:#e2e8f0}.btn-export{background:#2563eb;color:#fff}.btn-export:hover{background:#1d4ed8}.section-title{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin:8px 0 4px}.login-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.login-card{background:#fff;border-radius:24px;padding:36px 32px;width:380px;max-width:90vw;box-shadow:0 20px 60px #0003;animation:popIn .3s ease}@keyframes popIn{0%{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.login-card h2{font-size:22px;font-weight:800;text-align:center;margin-bottom:4px}.login-card h2 i{color:#fbbf24}.login-card .login-sub{text-align:center;font-size:13px;color:#94a3b8;margin-bottom:24px}.login-card label{font-size:12px;font-weight:600;color:#475569;display:block;margin-bottom:4px}.login-card input[type=text]{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid #e2e8f0;font-size:14px;font-family:inherit;outline:none;transition:border-color .15s;margin-bottom:16px}.login-card input[type=text]:focus{border-color:#2563eb}.login-card .btn-primary{width:100%;padding:12px;border-radius:12px;border:none;background:#2563eb;color:#fff;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;transition:background .15s}.login-card .btn-primary:hover{background:#1d4ed8}.login-card .btn-primary:disabled{opacity:.5;cursor:not-allowed}.login-card .divider{text-align:center;font-size:12px;color:#94a3b8;margin:16px 0;position:relative}.login-card .divider:before,.login-card .divider:after{content:"";position:absolute;top:50%;width:42%;height:1px;background:#e2e8f0}.login-card .divider:before{left:0}.login-card .divider:after{right:0}.login-card .join-row{display:flex;gap:8px}.login-card .join-row input{flex:1;margin-bottom:0;text-transform:uppercase;letter-spacing:4px;font-weight:700;text-align:center}.login-card .join-row button{padding:12px 20px;border-radius:12px;border:none;background:#10b981;color:#fff;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;transition:background .15s;white-space:nowrap}.login-card .join-row button:hover{background:#059669}.login-card .login-error{color:#ef4444;font-size:12px;font-weight:600;margin-bottom:12px;text-align:center}.login-card .my-name-hint{font-size:11px;color:#94a3b8;margin-top:-12px;margin-bottom:16px}.qr-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:none;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.qr-overlay.open{display:flex}.qr-card{background:#fff;border-radius:20px;padding:28px;text-align:center;animation:popIn .3s ease;box-shadow:0 20px 60px #00000040;max-width:320px}.qr-card h3{font-size:18px;font-weight:700;margin-bottom:4px}.qr-card .qr-sub{font-size:12px;color:#94a3b8;margin-bottom:16px}.qr-card .qr-close{width:100%;padding:10px;border-radius:12px;border:none;background:#f1f5f9;color:#475569;font-weight:600;font-size:13px;cursor:pointer;margin-top:16px;font-family:inherit;transition:background .15s}.qr-card .qr-close:hover{background:#e2e8f0}.qr-card #qrContainer img,.qr-card #qrContainer canvas{display:block;margin:0 auto;border-radius:4px}.qr-card .qr-url{font-size:10px;color:#94a3b8;margin-top:10px;word-break:break-all}.toast-container{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:9999;display:flex;flex-direction:column;gap:6px;pointer-events:none;align-items:center}.toast-item{padding:10px 20px;border-radius:12px;font-size:12px;font-weight:600;animation:toastIn .3s ease;box-shadow:0 4px 16px #00000026;pointer-events:auto;max-width:90vw;text-align:center;display:flex;align-items:center;gap:8px}.toast-item.toast-add{background:#059669;color:#fff}.toast-item.toast-remove{background:#ef4444;color:#fff}.toast-item.toast-update{background:#2563eb;color:#fff}.toast-item.toast-info{background:#1e293b;color:#fff}@keyframes toastIn{0%{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.toast-item.toast-exit{animation:toastOut .25s ease forwards}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.95)}}