:root {
  --bg-main: #0F172A; --bg-card: #1E293B; --primary: #00E5FF; --secondary: #6366F1; --accent: #22C55E;
  --text-main: #F1F5F9; --text-muted: #94A3B8; --border: #334155; --surface:#020617;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:'Poppins',sans-serif;background:radial-gradient(circle at top right, rgba(99,102,241,.18), transparent 20%), radial-gradient(circle at bottom left, rgba(0,229,255,.10), transparent 20%), var(--bg-main);color:var(--text-main)}
a{text-decoration:none;color:inherit} h1,h2,h3,h4,p{margin:0}
.app-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,#020617,#0B1220);border-right:1px solid var(--border);padding:24px 18px;position:sticky;top:0;height:100vh;overflow-y: auto}
.sidebar-brand{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.sidebar-logo,.sidebar-logo-img{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--secondary));color:white;font-weight:800;box-shadow:0 0 18px rgba(0,229,255,.35)}
.sidebar-logo-img{object-fit:cover}.sidebar-sub{font-size:12px;color:var(--text-muted);margin-top:4px;text-transform:capitalize}
.sidebar-nav{display:flex;flex-direction:column;gap:8px}
.sidebar-nav a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;color:var(--text-muted);transition:.25s;border:1px solid transparent}
.sidebar-nav a i{font-size:18px}.sidebar-nav a:hover,.sidebar-nav a.active{background:rgba(255,255,255,.04);color:var(--text-main);border-color:var(--border);box-shadow:0 0 20px rgba(99,102,241,.12)}
.main-panel{min-width:0}.navbar{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;background:#020617;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.public-navbar{padding:15px 30px}.glow{text-shadow:0 0 10px var(--primary)}.top-user{display:flex;align-items:center;gap:12px}.notify-btn{border:none;background:rgba(255,255,255,.05);color:var(--text-main);width:38px;height:38px;border-radius:10px;cursor:pointer;border:1px solid var(--border)}
.live-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}.user-pill{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--border)}.top-links{display:flex;gap:16px;color:var(--text-muted)}
.container{padding:24px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.card,.product-card{background:rgba(30,41,59,.9);padding:20px;border-radius:18px;border:1px solid var(--border);transition:.3s;backdrop-filter:blur(10px)}
.card:hover,.product-card:hover{transform:translateY(-4px);box-shadow:0 0 15px rgba(0,229,255,.22)}
.kpi-block{background:linear-gradient(180deg,rgba(30,41,59,.96),rgba(15,23,42,.96));border:1px solid var(--border);border-radius:18px;padding:20px;position:relative;overflow:hidden}
.kpi-block:before{content:'';position:absolute;right:-20px;top:-20px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,var(--primary),transparent 70%);opacity:.15}
.kpi-label{font-size:13px;color:var(--text-muted);margin-bottom:8px}.kpi-value{font-size:30px;font-weight:800}.kpi-sub{font-size:12px;color:var(--primary);margin-top:8px}
.product-card{text-align:center}.product-image{height:140px;border-radius:14px;background:linear-gradient(135deg,rgba(0,229,255,.16),rgba(99,102,241,.16));display:grid;place-items:center;font-size:40px;margin-bottom:14px;border:1px solid var(--border)}.price{font-size:20px;font-weight:700;color:var(--primary);margin-top:8px}
.btn-primary,.btn-secondary,.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;padding:11px 18px;border-radius:10px;cursor:pointer;font-weight:700;transition:.3s}
.btn-primary{background:linear-gradient(45deg,#00E5FF,#6366F1);color:white}.btn-primary:hover{box-shadow:0 0 10px #00E5FF}
.btn-secondary{background:var(--accent);color:white}.btn-secondary:hover{background:#16A34A}
.btn-outline{background:transparent;color:var(--text-main);border:1px solid var(--border)}
.text-muted{color:var(--text-muted)} input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#0B1220;color:var(--text-main);font-family:inherit}.form-group{margin-bottom:14px}label{display:block;font-size:13px;color:var(--text-muted);margin-bottom:8px}
table{width:100%;border-collapse:collapse;margin-top:12px} table th,table td{padding:12px;border-bottom:1px solid var(--border);text-align:left} table th{color:var(--primary);font-size:13px} table tr:hover{background:rgba(255,255,255,.04)}
.status{padding:5px 10px;border-radius:6px;font-size:12px;font-weight:700;color:white;display:inline-block}.pending{background:orange}.process{background:#2563eb}.shipped{background:#7c3aed}.done{background:#16a34a}
.chip{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;display:inline-block;border:1px solid var(--border);color:var(--text-main)}.chip-green{background:rgba(34,197,94,.12);color:#86efac}.chip-orange{background:rgba(245,158,11,.12);color:#fdba74}.chip-red{background:rgba(239,68,68,.12);color:#fca5a5}.chip-blue{background:rgba(59,130,246,.12);color:#93c5fd}
.order-feed,.leaderboard-list,.notification-stack{display:flex;flex-direction:column;gap:12px}.feed-item,.leader-item{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--border)}.rank{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--secondary),var(--primary));font-weight:800}
.heatmap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.heat-cell{padding:16px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(0,229,255,.08))}
.notification{padding:12px 14px;border-radius:14px;background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.18)} .small{font-size:12px;color:var(--text-muted)}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(520px,100%);background:rgba(30,41,59,.96);border:1px solid var(--border);border-radius:24px;padding:28px;box-shadow:0 0 25px rgba(0,229,255,.12)} code,.codebox{background:#020617;border:1px solid var(--border);padding:12px;border-radius:12px;color:#cbd5e1;display:block;white-space:pre-wrap;overflow:auto}
.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.filter-row{display:flex;gap:10px;flex-wrap:wrap}.full{width:100%}.center{text-align:center}
.toast-host{position:fixed;right:18px;top:86px;display:flex;flex-direction:column;gap:10px;z-index:99}.live-toast{padding:12px 14px;border-radius:14px;background:rgba(2,6,23,.96);border:1px solid rgba(0,229,255,.26);box-shadow:0 0 15px rgba(0,229,255,.18);max-width:360px}
@media (max-width:1200px){.kpi-grid,.grid-4,.grid-3,.grid-2,.heatmap-grid{grid-template-columns:1fr 1fr}.app-shell{grid-template-columns:88px 1fr}.sidebar-brand strong,.sidebar-sub,.sidebar-nav a span{display:none}.sidebar{padding:18px 12px}.sidebar-nav a{justify-content:center}}
@media (max-width:780px){.grid,.kpi-grid,.grid-4,.grid-3,.grid-2,.heatmap-grid{grid-template-columns:1fr}.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.navbar{padding:16px}.container{padding:16px}}
.table-wrapper{width: 100%;overflow-x: auto;}
.perm-table{min-width: 1200px;border-collapse: collapse;}
.perm-table th,.perm-table td{padding: 8px;text-align: center;white-space: nowrap;}