:root{ --bg:#111;--surface:#1a1a1a;--surface2:#222;--border:#2e2e2e; --orange:#ff6a00;--orange2:#ff9900;--orange-dim:#7a3200;--orange-glow:rgba(255,106,0,0.15); --text:#f5e6d0;--text-dim:#8a7a6a;--text-muted:#3a3028; --diamond:#4dd9e8;--dg:rgba(77,217,232,0.2); --danger:#e74c3c;--success:#2ecc71;--r:8px; }
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;min-height:100vh; overflow-x:hidden;}
body::before { content:''; position:fixed; inset:0; background-image:linear-gradient(rgba(255,106,0,0.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,106,0,0.04) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; z-index:0; animation: gridDriftX 60s ease-in-out infinite alternate, gridDriftY 43s ease-in-out infinite alternate; }
@keyframes gridDriftX { 0% { background-position-x: 0px; } 100% { background-position-x: 1024px; } }
@keyframes gridDriftY { 0% { background-position-y: 0px; } 100% { background-position-y: 1024px; } }

.auth-gate{position:fixed;inset:0;background:var(--bg);z-index:500; display:flex;align-items:center;justify-content:center;padding:20px;}
.auth-box{background:var(--surface);border:1px solid var(--border);border-radius:14px; padding:40px 32px;width:100%;max-width:380px;text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.8),0 0 40px var(--orange-glow);}
.auth-icon{font-size:2.8rem;margin-bottom:12px;}
.auth-title{font-family:'Press Start 2P',monospace;font-size:0.72rem;color:var(--orange); margin-bottom:8px;text-shadow:0 0 10px var(--orange);}
.auth-sub{font-size:0.85rem;color:var(--text-dim);margin-bottom:20px;font-weight:600;}
.auth-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--r); padding:12px 14px;color:var(--text);font-family:'Nunito',sans-serif;font-size:1rem; outline:none;transition:border-color 0.15s;margin-bottom:10px;box-sizing:border-box;}
.auth-input:focus{border-color:var(--orange);}
.auth-btn-row{display:flex;gap:10px;margin-top:5px;}
.auth-btn{flex:1;padding:13px;background:linear-gradient(135deg,var(--orange),var(--orange2)); border:none;border-radius:var(--r);font-family:'Press Start 2P',monospace; font-size:0.56rem;color:#000;cursor:pointer;transition:box-shadow 0.15s;}
.auth-btn:hover{box-shadow:0 0 22px rgba(255,106,0,0.5);}
.auth-btn.sec{background:transparent;border:1px solid var(--border);color:var(--text);}
.auth-btn.sec:hover{border-color:var(--orange);box-shadow:none;}
.setup-err{color:var(--danger);font-size:0.8rem;font-weight:700;margin-top:10px;min-height:16px;}

.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center; justify-content:space-between;padding:11px 20px; background:rgba(17,17,17,0.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}
.mc-title{font-family:'Press Start 2P',monospace;font-size:0.6rem;color:var(--orange);text-shadow:0 0 10px var(--orange);}
.mc-sub{font-size:0.73rem;color:var(--text-dim);margin-top:2px;font-weight:700;}
.topbar-right{display:flex;align-items:center;gap:12px;}
.user-pill{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:6px 12px;font-size:0.8rem;font-weight:700;color:var(--text-dim); display:flex; align-items:center; gap:6px;}
.topbar-link{background:transparent;border:1px solid var(--border);border-radius:var(--r); padding:7px 12px;color:var(--text-dim);font-size:0.78rem;font-weight:700; cursor:pointer;transition:0.15s;text-decoration:none;font-family:'Nunito',sans-serif;white-space:nowrap;}
.topbar-link:hover{border-color:var(--orange);color:var(--orange);}
.bell-btn{position:relative;cursor:pointer;font-size:1.3rem;text-decoration:none;}
.bell-badge{position:absolute;top:-5px;right:-8px;background:var(--danger);color:#fff;font-size:0.5rem;font-family:'Press Start 2P',monospace;padding:3px 5px;border-radius:10px;display:none;}

.fab { position:fixed; bottom:30px; right:30px; width:65px; height:65px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--orange2)); border:none; box-shadow:0 4px 20px rgba(255,106,0,0.5); color:#000; font-size:2.5rem; font-weight:400; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform 0.15s, box-shadow 0.15s; z-index:90; }
.fab:hover { transform:scale(1.08); box-shadow:0 6px 25px rgba(255,106,0,0.7); }

.shop-modal { position:fixed; inset:0; background:var(--bg); z-index:100; display:none; flex-direction:column; }
.shop-modal.open { display:flex; }
.shop-header { padding:15px 22px; background:var(--surface2); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.layout{position:relative;flex:1;overflow-y:auto;display:flex;max-width:1200px;margin:0 auto;padding:18px;gap:18px;width:100%;}
.sidebar{width:175px;flex-shrink:0;}
.main{flex:1;min-width:0;}
.sidebar-title{font-family:'Press Start 2P',monospace;font-size:0.44rem;color:var(--text-dim); text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--border);}
.cat-btn{display:block;width:100%;text-align:left;background:transparent;border:none; border-radius:var(--r);border-left:3px solid transparent;padding:8px 11px;color:var(--text-dim); font-family:'Nunito',sans-serif;font-weight:700;font-size:0.86rem;cursor:pointer; transition:all 0.1s;margin-bottom:3px;}
.cat-btn:hover,.cat-btn.active{background:var(--orange-glow);color:var(--orange);}
.cat-btn.active{border-left-color:var(--orange);}
.search-input{width:100%;background:var(--surface);border:1px solid var(--border); border-radius:var(--r);padding:10px 13px;color:var(--text);font-family:'Nunito',sans-serif; font-size:0.92rem;font-weight:600;outline:none;transition:border-color 0.15s; margin-bottom:14px;display:block;}
.search-input:focus{border-color:var(--orange);}

.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:9px;}
.item-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:18px 12px;cursor:pointer;transition:border-color 0.15s,transform 0.1s,box-shadow 0.15s; display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;}
.item-card:hover:not(.blocked){border-color:var(--orange-dim);transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.4),0 0 12px var(--orange-glow);}
.item-card.in-cart{border-color:var(--orange);}
.item-card.in-cart::after{content:'✓';position:absolute;top:5px;right:7px;color:var(--success);font-weight:800;}
.item-card.blocked{opacity:0.4;cursor:not-allowed;}
.item-name{font-size:0.85rem;font-weight:800;text-align:center;color:var(--text);line-height:1.2;}
.item-price{display:flex;align-items:center;gap:4px;font-family:'Press Start 2P',monospace;font-size:0.5rem;color:var(--diamond);}
.add-btn{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:5px; padding:6px 0;color:var(--text-dim);font-family:'Nunito',sans-serif;font-size:0.8rem;font-weight:700; cursor:pointer;transition:all 0.1s;margin-top:5px;}
.add-btn:hover{background:var(--orange-glow);color:var(--orange);border-color:var(--orange-dim);}

.cart-btn{position:relative;background:var(--orange);border:none;border-radius:var(--r); padding:9px 15px;font-family:'Press Start 2P',monospace;font-size:0.5rem; color:#000;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;}
.cart-btn:hover{transform:scale(1.05);box-shadow:0 0 18px rgba(255,106,0,0.5);}
.cart-count{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff; width:18px;height:18px;border-radius:50%;font-family:'Press Start 2P',monospace; font-size:0.38rem;display:flex;align-items:center;justify-content:center;}

.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:150; opacity:0;pointer-events:none;transition:opacity 0.25s;backdrop-filter:blur(3px);}
.drawer-overlay.open{opacity:1;pointer-events:all;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:390px;max-width:100vw; background:var(--surface);border-left:1px solid var(--border);z-index:151; display:flex;flex-direction:column;transform:translateX(100%); transition:transform 0.28s cubic-bezier(.4,0,.2,1);}
.drawer-overlay.open .drawer{transform:translateX(0);}
.drawer-head{padding:15px 18px;background:var(--surface2);border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;}
.drawer-title{font-family:'Press Start 2P',monospace;font-size:0.55rem;color:var(--orange);}
.drawer-close{background:transparent;border:none;color:var(--text-dim);font-size:1.3rem;cursor:pointer;}
.drawer-items{flex:1;overflow-y:auto;padding:13px;}
.cart-item{display:flex;align-items:center;gap:9px;background:var(--surface2); border:1px solid var(--border);border-radius:var(--r);padding:10px;margin-bottom:8px;}
.ci-info{flex:1;}
.ci-name{font-size:0.86rem;font-weight:800;}
.ci-price{font-family:'Press Start 2P',monospace;font-size:0.44rem;color:var(--diamond);margin-top:2px;}
.cart-qty{display:flex;align-items:center;gap:5px;}
.qb{width:24px;height:24px;background:var(--surface);border:1px solid var(--border); border-radius:5px;color:var(--text);cursor:pointer;font-size:0.95rem; display:flex;align-items:center;justify-content:center;}
.qb:hover{border-color:var(--orange);}
.qn{font-family:'Press Start 2P',monospace;font-size:0.5rem;width:22px;text-align:center;}
.cr{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;}
.cr:hover{color:var(--danger);}
.drawer-footer{padding:13px;border-top:1px solid var(--border);background:var(--surface2);}
.cart-total{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;font-weight:800;}
.total-d{display:flex;align-items:center;gap:5px;color:var(--diamond);font-family:'Press Start 2P',monospace;font-size:0.56rem;}
.checkout-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--orange),var(--orange2)); border:none;border-radius:var(--r);font-family:'Press Start 2P',monospace; font-size:0.55rem;color:#000;cursor:pointer;}
.checkout-btn:hover{box-shadow:0 0 22px rgba(255,106,0,0.5);transform:scale(1.01);}
.checkout-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;}

.mo{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:200; display:flex;align-items:center;justify-content:center;padding:20px; opacity:0;pointer-events:none;transition:opacity 0.2s;backdrop-filter:blur(5px);}
.mo.open{opacity:1;pointer-events:all;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:12px; width:100%;max-width:450px;box-shadow:0 20px 60px rgba(0,0,0,0.8),0 0 40px var(--orange-glow); transform:scale(0.96);transition:transform 0.2s;overflow:hidden;}
.mo.open .modal{transform:scale(1);}
.mh{padding:16px 20px;background:var(--surface2);border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;}
.mt{font-family:'Press Start 2P',monospace;font-size:0.56rem;color:var(--orange);}
.mc-b{background:transparent;border:none;color:var(--text-dim);font-size:1.3rem;cursor:pointer;}
.mc-b:hover{color:var(--text);}
.mb{padding:22px;}
.fl{margin-bottom:14px;}
.fl label{display:block;font-size:0.76rem;font-weight:800;color:var(--text-dim); text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;}
.fi{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--r); padding:10px 13px;color:var(--text);font-family:'Nunito',sans-serif;font-size:0.9rem; font-weight:700;outline:none;transition:border-color 0.15s;}
.fi:focus{border-color:var(--orange);}
.fi[readonly]{color:var(--text-dim);}
.cr2{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.os{background:var(--bg);border:1px solid var(--border);border-radius:var(--r); padding:11px;margin-bottom:13px;max-height:130px;overflow-y:auto;}
.si{display:flex;align-items:center;gap:7px;margin-bottom:7px;font-size:0.84rem;}
.sq{background:var(--orange);color:#000;border-radius:4px;padding:1px 5px; font-family:'Press Start 2P',monospace;font-size:0.36rem;}
.cfm{width:100%;padding:13px;background:linear-gradient(135deg,var(--orange),var(--orange2)); border:none;border-radius:var(--r);font-family:'Press Start 2P',monospace; font-size:0.54rem;color:#000;cursor:pointer;}

.sm .modal{max-width:340px;text-align:center;}
.sb{padding:28px 22px;}
.si2{font-size:2.6rem;margin-bottom:10px;}
.stt{font-family:'Press Start 2P',monospace;font-size:0.6rem;color:var(--success);margin-bottom:8px;}
.oid{font-family:'Press Start 2P',monospace;font-size:1.6rem;color:var(--orange); margin:12px 0 8px;text-shadow:0 0 18px var(--orange);}
.sdd{font-size:0.86rem;color:var(--text-dim);line-height:1.5;}
.scc{margin-top:16px;padding:10px 24px;background:var(--surface2); border:1px solid var(--border);border-radius:var(--r);color:var(--text); font-family:'Nunito',sans-serif;font-weight:800;font-size:0.88rem;cursor:pointer;}

.order-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:16px;margin-bottom:12px;display:flex;align-items:flex-start;gap:15px; box-shadow:0 4px 10px rgba(0,0,0,0.2);}
.oid-badge{background:var(--surface2);border:1px solid var(--border);border-radius:5px; padding:7px 9px;font-family:'Press Start 2P',monospace;font-size:0.5rem; color:var(--orange);flex-shrink:0;min-width:52px;text-align:center;}
.oi{flex:1;}
.oip{font-size:0.9rem;color:var(--text);margin-bottom:8px;line-height:1.5; font-weight: 700;}
.om{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px;}
.sbadge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:0.7rem;font-weight:800;}
.sp{background:rgba(255,153,0,0.12);color:var(--orange2);border:1px solid rgba(255,153,0,0.25);}
.sa{background:rgba(77,217,232,0.1);color:var(--diamond);border:1px solid rgba(77,217,232,0.25);}
.sd{background:rgba(46,204,113,0.1);color:var(--success);border:1px solid rgba(46,204,113,0.25);}
.spad{background:rgba(255,255,255,0.1);color:var(--text-dim);border:1px solid var(--border);}
.srej{background:rgba(231,76,60,0.12);color:var(--danger);border:1px solid rgba(231,76,60,0.25);}
.empty-note{color:var(--text-muted);text-align:center;padding:40px;font-size:0.9rem;font-weight:700;}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--surface); border:1px solid var(--orange);border-radius:var(--r);padding:10px 20px; font-size:0.86rem;font-weight:700;color:var(--orange);z-index:999; opacity:0;transition:transform 0.25s,opacity 0.25s; white-space:nowrap;}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}

@media (max-width: 768px) {
.topbar { flex-direction: column; gap: 12px; padding: 15px; text-align: center; }
.topbar-right { width: 100%; justify-content: center; flex-wrap: wrap; }
.layout { flex-direction: column; padding: 10px; gap: 10px; }
.sidebar { width: 100%; display: flex; flex-direction: row; overflow-x: auto; padding: 5px 10px 15px; gap: 8px; border-bottom: 1px solid var(--border); border-right: none; background:var(--bg); margin:0 -10px; width:calc(100% + 20px); }
.sidebar-title { display: none; }
.cat-btn { width: auto; white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; padding: 8px 12px; margin-bottom: 0; }
.cat-btn.active { border-left-color: transparent; border-bottom-color: var(--orange); background:var(--orange-glow); }
.main { padding: 15px 0; }
.item-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap:10px; }
.cr2 { grid-template-columns: 1fr; }
.order-card { flex-direction: column; align-items: stretch; gap: 10px; }
.shop-header { flex-direction: column; align-items: center; gap: 15px; text-align: center; }
.fab { bottom: 20px; right: 20px; width: 55px; height: 55px; font-size: 2rem; }
}
::-webkit-scrollbar{height:4px; width:5px;}::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}