:root{
  --primary:#00d4ff;--primary2:#00a4cc;--accent:#a855f7;--green:#00e676;--gold:#ffd700;--red:#ff4d4f;
  --bg:#080c14;--bg2:#0d1220;--bg3:#111827;--card:#141c2c;--muted:rgba(255,255,255,.58);--text:#f7fbff;
  --border:rgba(255,255,255,.08);--glow:rgba(0,212,255,.25);--sidebar:270px;
}
*{box-sizing:border-box;font-family:'Cairo',sans-serif}html,body{margin:0;height:100%;background:var(--bg);color:var(--text)}
body{display:flex;overflow:hidden;background:
radial-gradient(circle at top right, rgba(168,85,247,.08), transparent 25%),
radial-gradient(circle at top left, rgba(0,212,255,.08), transparent 25%),
var(--bg)}
.sidebar{width:var(--sidebar);background:linear-gradient(180deg,var(--bg2),#09101b);border-left:1px solid var(--border);display:flex;flex-direction:column;padding:16px 12px;gap:14px}
.brand{display:flex;gap:12px;align-items:center;padding:8px 10px}
.brand .logo{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,rgba(0,212,255,.16),rgba(168,85,247,.12));display:grid;place-items:center;border:1px solid rgba(0,212,255,.28);font-weight:900;color:var(--primary)}
.brand h1{font-size:18px;margin:0}.brand p{margin:2px 0 0;color:var(--muted);font-size:11px}
.wallet-card{background:linear-gradient(135deg,rgba(0,212,255,.12),rgba(168,85,247,.08));padding:16px;border-radius:18px;border:1px solid rgba(0,212,255,.18)}
.wallet-card .label{font-size:11px;color:var(--muted)}.wallet-card .amount{font-size:28px;font-weight:900;margin-top:4px}
.side-actions button,.primary-btn,.ghost-btn{border:0;border-radius:14px;padding:12px 14px;font-weight:800;cursor:pointer}
.primary-btn{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#001018;box-shadow:0 10px 25px var(--glow)}
.ghost-btn{background:rgba(255,255,255,.03);color:var(--text);border:1px solid var(--border)}
.nav{display:flex;flex-direction:column;gap:6px;overflow:auto}
.nav-btn{background:transparent;border:1px solid transparent;color:var(--muted);padding:12px 14px;border-radius:14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.nav-btn.active,.nav-btn:hover{background:rgba(0,212,255,.08);border-color:rgba(0,212,255,.2);color:#fff}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);background:rgba(8,12,20,.82);backdrop-filter:blur(12px)}
.topbar input{flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid var(--border);color:#fff;border-radius:14px;padding:12px 14px}
.page{padding:18px;overflow:auto}
.hero{display:grid;grid-template-columns:1.4fr .9fr;gap:16px;margin-bottom:18px}
.panel{background:linear-gradient(180deg,var(--card),#0e1524);border:1px solid var(--border);border-radius:20px;padding:18px;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.hero h2{margin:0 0 8px;font-size:22px}.hero p{margin:0;color:var(--muted);line-height:1.8}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.badge{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--border);font-size:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.product{position:relative;background:linear-gradient(180deg,#131b2c,#0d1422);border:1px solid var(--border);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:10px}
.product img{width:56px;height:56px;border-radius:16px;object-fit:cover;background:#0f1827}
.product h3{margin:0;font-size:15px}.muted{color:var(--muted)}
.price-row{display:flex;justify-content:space-between;align-items:end}.price{font-size:22px;font-weight:900;color:var(--primary)}
.meta{display:flex;gap:8px;flex-wrap:wrap}.pill{font-size:11px;border:1px solid var(--border);background:rgba(255,255,255,.03);padding:5px 8px;border-radius:999px}
.section-title{display:flex;justify-content:space-between;align-items:center;margin:20px 0 12px}.section-title h3{margin:0}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;place-items:end center;padding:0 0 20px;z-index:60}.modal-backdrop.show{display:grid}
.modal{width:min(520px,100% - 20px);background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--border);border-radius:24px;padding:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.field input,.field textarea,.field select{background:rgba(255,255,255,.04);border:1px solid var(--border);color:#fff;border-radius:14px;padding:12px 14px}.field textarea{min-height:90px;resize:vertical}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#101827;border:1px solid var(--border);padding:12px 16px;border-radius:14px;display:none;z-index:70}.toast.show{display:block}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{padding:16px;border-radius:18px;background:linear-gradient(180deg,#131b2c,#0e1523);border:1px solid var(--border)}
.stat .v{font-size:26px;font-weight:900;margin-top:6px}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px;border-bottom:1px solid var(--border);text-align:right;font-size:13px}.table th{color:var(--muted);font-weight:700}
.admin-shell{display:grid;grid-template-columns:320px 1fr;gap:16px}
@media (max-width: 980px){.sidebar{position:fixed;inset:0 auto 0 0;z-index:50;transform:translateX(100%);transition:.25s}.sidebar.open{transform:none}.hero,.admin-shell,.stats,.form-row{grid-template-columns:1fr}.topbar{padding-inline:12px}.page{padding:12px}}