: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; } }

.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; text-decoration:none; transition:0.15s;}
.user-pill:hover{border-color:var(--orange);}
.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;}

.layout{position:relative;z-index:1;display:flex;max-width:1100px;margin:30px auto;padding:0 20px;gap:20px;align-items:flex-start;}
.sidebar{width:260px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:15px;}
.main{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:25px;}

.sidebar-title{font-family:'Press Start 2P',monospace;font-size:0.5rem;color:var(--orange);margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.shop-tab{display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--border); border-radius:5px;padding:12px;color:var(--text);font-family:'Nunito',sans-serif;font-weight:800;font-size:0.9rem;cursor:pointer; transition:all 0.15s;margin-bottom:8px;}
.shop-tab:hover{border-color:var(--orange-dim);}
.shop-tab.active{background:var(--orange-glow);border-color:var(--orange);color:var(--orange);}

.btn{padding:10px 15px;border:none;border-radius:6px;font-family:'Nunito',sans-serif;font-weight:800;font-size:0.85rem;cursor:pointer;transition:all 0.15s;}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange2));color:#000;}
.btn-primary:hover{box-shadow:0 0 15px rgba(255,106,0,0.4);transform:scale(1.02);}
.btn-danger{background:transparent;border:1px solid var(--danger);color:var(--danger);}
.btn-danger:hover{background:var(--danger);color:#fff;}
.btn-outline{background:transparent;border:1px dashed var(--orange);color:var(--orange);}
.btn-outline:hover{background:var(--orange-glow);}

.input-group{margin-bottom:20px;}
.input-group label{display:block;font-size:0.8rem;font-weight:800;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
.form-control{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:12px;color:var(--text);font-family:'Nunito',sans-serif;font-size:0.95rem;outline:none;transition:border-color 0.15s;}
.form-control:focus{border-color:var(--orange);}

.cat-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.cat-tag{background:var(--bg);border:1px solid var(--orange-dim);border-radius:20px;padding:5px 12px;font-size:0.8rem;font-weight:700;color:var(--orange);display:flex;align-items:center;gap:6px;}
.cat-tag span{cursor:pointer;color:var(--text-dim);}
.cat-tag span:hover{color:var(--danger);}

.item-row{display:grid;grid-template-columns:1fr 100px 140px auto auto;gap:10px;align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px 15px;margin-bottom:8px;}
.item-row-name{font-weight:800;font-size:0.9rem;}
.item-row input, .item-row select{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:8px;color:var(--text);font-family:inherit;width:100%;outline:none;}
.item-row input:focus, .item-row select:focus{border-color:var(--orange);}
.stock-btn{padding:8px 12px;border:1px solid;border-radius:4px;font-weight:800;font-size:0.75rem;cursor:pointer;background:transparent;width:105px;text-align:center;}
.stock-in{color:var(--success);border-color:var(--success);}
.stock-out{color:var(--danger);border-color:var(--danger);background:rgba(231,76,60,0.1);}
.del-btn{background:transparent;border:none;color:var(--text-dim);font-size:1.2rem;cursor:pointer;}
.del-btn:hover{color:var(--danger);}

.modal{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:500;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);}
.modal.open{display:flex;}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:100%;max-width:500px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.6);}
.modal-head{padding:15px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-family:'Press Start 2P',monospace;font-size:0.6rem;color:var(--orange);}
.modal-body{padding:20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;}
.cat-picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.cat-picker-btn{background:var(--surface2);border:1px solid var(--border);padding:10px;border-radius:6px;color:var(--text);cursor:pointer;text-align:left;font-weight:700;transition:0.1s;}
.cat-picker-btn:hover:not(.disabled){border-color:var(--orange);background:var(--orange-glow);}

.cat-picker-btn.selected { background:var(--orange); color:#000; border-color:var(--orange); font-weight:800; }
.cat-picker-btn.disabled { opacity:0.4; cursor:not-allowed; background:var(--bg); border-color:var(--border); }

.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; text-align:center; 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; gap: 10px; padding: 10px; }
.sidebar { width: 100%; padding: 10px; display: flex; flex-direction: column; }
#shop-tabs { display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
.shop-tab { width: auto; margin-bottom: 0; }
.main { padding: 15px 10px; }
.item-row { grid-template-columns: 1fr 1fr; gap: 10px; }
.item-row-name { grid-column: 1 / -1; font-size: 1rem; }
.stock-btn { width: 100%; }
.cat-picker-grid { grid-template-columns: 1fr; }
}
::-webkit-scrollbar{height:4px; width:5px;}::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}