@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Variables ─────────────────────────────────────────────────────── */
:root {
  --bg:      #080808;
  --surface: #0f0f0f;
  --card:    #131313;
  --card2:   #181818;
  --border:  #222222;
  --bdr2:    #2e2e2e;
  --muted:   #4a4a4a;
  --light:   #7a7a7a;
  --soft:    #b0b0b0;
  --white:   #f0f0f0;
  --green:   #22c55e;
  --red:     #ef4444;
  --yellow:  #f59e0b;
  --blue:    #3b82f6;
  --sw: 228px;
  --th: 52px;
  --r: 6px; --rl: 10px; --rx: 14px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; font-size:14px }
a { color:inherit; text-decoration:none }
img { max-width:100% }
input,select,textarea,button { font-family:inherit; font-size:inherit }

/* ── Lucide Icons ──────────────────────────────────────────────────── */
[data-lucide] { width:15px; height:15px; stroke-width:1.75; flex-shrink:0 }
.icon-sm [data-lucide] { width:13px; height:13px }
.icon-md [data-lucide] { width:16px; height:16px }
.icon-lg [data-lucide] { width:20px; height:20px }
.icon-xl [data-lucide] { width:24px; height:24px }

/* ── Auth ──────────────────────────────────────────────────────────── */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); position:relative; overflow:hidden }
#auth-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.auth-box {
  position:relative; z-index:1;
  background:var(--card); border:1px solid var(--border); border-radius:var(--rx);
  padding:36px 40px; width:100%; max-width:420px
}
.auth-box::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:60%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent) }
.auth-logo { text-align:center; margin-bottom:28px }
.auth-logo .brand { font-size:21px; font-weight:900; letter-spacing:-1px }
.auth-logo .sub { font-size:10px; color:var(--muted); letter-spacing:2.5px; text-transform:uppercase; margin-top:3px }
.auth-title { font-size:16px; font-weight:800; letter-spacing:-.3px; margin-bottom:2px }
.auth-desc { font-size:12.5px; color:var(--muted); margin-bottom:20px }

/* ── Layout ────────────────────────────────────────────────────────── */
.layout { display:flex; min-height:100vh }

/* ═══════════════════════════════════════════
   SIDEBAR — redesigned
═══════════════════════════════════════════ */
.sidebar {
  width:var(--sw); flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--border);
  position:fixed; top:0; left:0; height:100vh;
  display:flex; flex-direction:column;
  z-index:200; overflow-y:auto;
  transition:transform .22s cubic-bezier(.4,0,.2,1)
}
.sidebar::-webkit-scrollbar { width:0 }

/* Logo */
.sb-logo {
  height:var(--th); padding:0 16px;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--border); flex-shrink:0
}
.sb-logo-mark {
  width:28px; height:28px; border-radius:7px;
  background:var(--white); display:flex; align-items:center; justify-content:center;
  flex-shrink:0
}
.sb-logo-mark [data-lucide] { width:16px; height:16px; color:var(--bg); stroke-width:2.5 }
.sb-logo .name { font-size:15px; font-weight:800; letter-spacing:-.5px }
.sb-logo .name span { color:var(--muted) }

/* Nav */
.sb-nav { padding:8px 6px; flex:1 }

.sb-section-label {
  font-size:9.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; color:var(--muted);
  padding:12px 9px 5px; display:flex; align-items:center; gap:5px
}

.nav-a {
  display:flex; align-items:center; gap:9px;
  padding:7px 9px; border-radius:var(--r);
  font-size:12.5px; font-weight:500; color:var(--light);
  cursor:pointer; transition:background .1s,color .1s;
  margin-bottom:2px; position:relative; white-space:nowrap;
  text-decoration:none
}
.nav-a:hover { background:rgba(255,255,255,.05); color:var(--soft) }
.nav-a.on {
  background:rgba(255,255,255,.07); color:var(--white); font-weight:600
}
.nav-a.on::before {
  content:''; position:absolute; left:0; top:50%;
  transform:translateY(-50%); width:2px; height:16px;
  background:var(--white); border-radius:0 2px 2px 0
}
.nav-a [data-lucide] { opacity:.5; transition:opacity .1s }
.nav-a:hover [data-lucide], .nav-a.on [data-lucide] { opacity:1 }
.nav-badge {
  margin-left:auto; background:var(--white); color:var(--bg);
  font-size:9px; font-weight:800; padding:1px 5px;
  border-radius:99px; min-width:16px; text-align:center
}

/* User footer */
.sb-foot { padding:6px; border-top:1px solid var(--border); flex-shrink:0 }
.sb-user {
  display:flex; align-items:center; gap:9px;
  padding:8px 9px; border-radius:var(--r);
  cursor:pointer; transition:background .1s
}
.sb-user:hover { background:rgba(255,255,255,.05) }
.sb-avatar {
  width:28px; height:28px; border-radius:8px;
  background:var(--bdr2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; flex-shrink:0; text-transform:uppercase
}
.sb-uname { font-size:12px; font-weight:600; line-height:1.25 }
.sb-urole { font-size:10px; color:var(--muted) }

/* ── Main ──────────────────────────────────────────────────────────── */
.main { margin-left:var(--sw); flex:1; display:flex; flex-direction:column; min-height:100vh }

.topbar {
  height:var(--th); background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; position:sticky; top:0; z-index:100; flex-shrink:0
}
.topbar-l { display:flex; align-items:center; gap:8px }
.topbar-r { display:flex; align-items:center; gap:5px }
.page-h { font-size:13.5px; font-weight:700; letter-spacing:-.2px }

.ham {
  display:none; width:27px; height:27px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:var(--r); align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0
}
.ham [data-lucide] { width:14px; height:14px }

.top-btn {
  height:27px; padding:0 10px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:var(--r); font-size:12px; font-weight:600; color:var(--light);
  cursor:pointer; transition:all .1s; display:flex; align-items:center; gap:5px;
  white-space:nowrap
}
.top-btn:hover { border-color:var(--bdr2); color:var(--white); background:rgba(255,255,255,.06) }
.top-btn [data-lucide] { width:12px; height:12px; opacity:.6 }

.content { padding:18px 20px; flex:1 }

/* ── Forms ─────────────────────────────────────────────────────────── */
.fg { margin-bottom:12px }
.frow { display:grid; gap:10px }
.c2 { grid-template-columns:1fr 1fr }
.c3 { grid-template-columns:1fr 1fr 1fr }
label {
  display:block; font-size:10px; font-weight:700; color:var(--light);
  margin-bottom:5px; text-transform:uppercase; letter-spacing:.5px
}
label .req { color:var(--white) }
.fi {
  width:100%; background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:var(--r); padding:8px 10px; color:var(--white); font-size:13px;
  outline:none; transition:border-color .1s,background .1s; appearance:none
}
.fi:focus { border-color:var(--bdr2); background:rgba(255,255,255,.05) }
.fi::placeholder { color:var(--muted) }
select.fi {
  cursor:pointer; padding-right:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%234a4a4a' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center
}
textarea.fi { resize:vertical; min-height:80px; line-height:1.55 }
input[type=range].fi { padding:0; height:3px; background:var(--border); border-radius:99px; cursor:pointer; border:none; background-image:none }
input[type=range].fi::-webkit-slider-thumb { appearance:none; width:13px; height:13px; background:var(--white); border-radius:50%; cursor:pointer }
.fhint { font-size:11px; color:var(--muted); margin-top:3px }
.flabel-row { display:flex; align-items:flex-start; gap:7px; cursor:pointer; font-size:13px; color:var(--light) }
.flabel-row input[type=checkbox] { width:13px; height:13px; accent-color:var(--white); flex-shrink:0; margin-top:2px }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 14px; border-radius:var(--r); font-size:12.5px; font-weight:600;
  cursor:pointer; border:none; transition:opacity .12s,transform .08s;
  white-space:nowrap; font-family:inherit; letter-spacing:-.1px
}
.btn [data-lucide] { width:13px; height:13px; flex-shrink:0 }
.btn:hover { opacity:.82; transform:translateY(-1px) }
.btn:active { transform:scale(.97) }
.btn:disabled { opacity:.25; cursor:not-allowed; pointer-events:none }
.btn-w  { background:var(--white); color:#080808 }
.btn-d  { background:rgba(255,255,255,.06); color:var(--white); border:1px solid var(--border) }
.btn-d:hover { border-color:var(--bdr2); opacity:1; background:rgba(255,255,255,.09) }
.btn-g  { background:transparent; color:var(--light); border:1px solid var(--border) }
.btn-g:hover { color:var(--white); border-color:var(--bdr2); opacity:1; background:rgba(255,255,255,.03) }
.btn-r  { background:rgba(239,68,68,.08);  color:var(--red);   border:1px solid rgba(239,68,68,.15) }
.btn-gr { background:rgba(34,197,94,.08);  color:var(--green); border:1px solid rgba(34,197,94,.15) }
.btn-bl { background:rgba(59,130,246,.08); color:var(--blue);  border:1px solid rgba(59,130,246,.15) }
.btn-sm { padding:4px 9px; font-size:11px; border-radius:5px }
.btn-lg { padding:10px 20px; font-size:14px; border-radius:var(--rl) }
.btn-xl { padding:12px 24px; font-size:15px; border-radius:var(--rl) }
.btn-full { width:100% }

/* ── Cards ──────────────────────────────────────────────────────────── */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--rl); padding:16px }
.card-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:8px; flex-wrap:wrap }
.card-title { font-size:13px; font-weight:700; letter-spacing:-.15px }
.card-sub { font-size:11px; color:var(--muted); margin-top:1px }

/* Stats row */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; margin-bottom:16px }
.stat-cell { background:var(--card); padding:15px 17px; transition:background .1s }
.stat-cell:hover { background:var(--card2) }
.stat-v { font-size:24px; font-weight:900; letter-spacing:-1.2px; line-height:1; margin-bottom:3px }
.stat-l { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:2px; font-weight:700 }
.stat-d { font-size:11px; margin-top:4px }

/* ── Table ──────────────────────────────────────────────────────────── */
.tw { overflow-x:auto }
table { width:100%; border-collapse:collapse }
thead th { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); padding:7px 11px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap }
tbody tr { border-bottom:1px solid rgba(34,34,34,.5); transition:background .07s }
tbody tr:last-child { border-bottom:none }
tbody tr:hover { background:rgba(255,255,255,.014) }
tbody td { padding:9px 11px; font-size:12.5px; color:var(--light); vertical-align:middle }
.td-w { color:var(--white); font-weight:600 }
.td-m { font-family:monospace; font-size:11px }
.td-r { text-align:right }
.td-c { text-align:center }

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:2px 7px; border-radius:99px; font-size:10px; font-weight:700; letter-spacing:.2px }
.badge-g { background:rgba(34,197,94,.1);  color:var(--green);  border:1px solid rgba(34,197,94,.18) }
.badge-r { background:rgba(239,68,68,.1);  color:var(--red);    border:1px solid rgba(239,68,68,.18) }
.badge-y { background:rgba(245,158,11,.1); color:var(--yellow); border:1px solid rgba(245,158,11,.18) }
.badge-b { background:rgba(59,130,246,.1); color:var(--blue);   border:1px solid rgba(59,130,246,.18) }
.badge-m { background:rgba(255,255,255,.04); color:var(--light); border:1px solid var(--border) }

/* ── Flash ──────────────────────────────────────────────────────────── */
.flash { padding:9px 12px; border-radius:var(--r); font-size:13px; margin-bottom:10px; display:flex; align-items:flex-start; gap:8px }
.flash [data-lucide] { width:14px; height:14px; flex-shrink:0; margin-top:2px }
.f-ok   { background:rgba(34,197,94,.06);  border:1px solid rgba(34,197,94,.12);  color:#86efac }
.f-err  { background:rgba(239,68,68,.06);  border:1px solid rgba(239,68,68,.12);  color:#fca5a5 }
.f-warn { background:rgba(245,158,11,.06); border:1px solid rgba(245,158,11,.12); color:#fde68a }
.f-info { background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--light) }

/* ── Modals ─────────────────────────────────────────────────────────── */
.modal-over { position:fixed; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(4px); z-index:800; display:none; align-items:flex-start; justify-content:center; padding:60px 16px 16px; overflow-y:auto }
.modal-over.open { display:flex }
.modal { background:var(--card); border:1px solid var(--border); border-radius:var(--rx); padding:20px; width:100%; max-width:480px; animation:modal-in .15s ease; flex-shrink:0; align-self:flex-start }
.modal-lg { max-width:700px }
.modal-xl { max-width:900px }
@keyframes modal-in { from { opacity:0; transform:translateY(-10px) } to { opacity:1; transform:none } }
.modal-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.modal-title { font-size:14px; font-weight:800; letter-spacing:-.2px }
.modal-x { width:24px; height:24px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:6px; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .1s; line-height:1 }
.modal-x [data-lucide] { width:13px; height:13px }
.modal-x:hover { color:var(--white); border-color:var(--bdr2) }
.modal-ft { display:flex; gap:7px; justify-content:flex-end; margin-top:16px; border-top:1px solid var(--border); padding-top:14px }

/* ── Pool gaming ────────────────────────────────────────────────────── */
.pool { background:var(--card); border:1px solid var(--border); border-radius:var(--rx); overflow:hidden; margin-bottom:12px }
.pool-head { padding:13px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px }
.pool-name { font-size:14px; font-weight:900; letter-spacing:-.3px }
.pool-meta { font-size:11px; color:var(--muted); margin-top:1px }
.pool-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border) }
.pm { background:var(--card); padding:12px 14px }
.pm-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); display:flex; justify-content:space-between; margin-bottom:6px }
.pm-val { font-size:18px; font-weight:900; letter-spacing:-.5px; margin-bottom:6px }
.pm-val span { font-size:11px; color:var(--muted); font-weight:400; margin-left:2px }
.pb { height:2px; background:var(--border); border-radius:99px; overflow:hidden }
.pb-fill { height:100%; background:var(--white); border-radius:99px; transition:width .5s }
.pb-fill.warn { background:var(--yellow) }
.pb-fill.full { background:var(--red) }

.slice-list { display:flex; flex-direction:column; gap:6px; margin-top:9px }
.slice { background:var(--card); border:1px solid var(--border); border-radius:var(--rl); padding:11px 13px; display:flex; align-items:center; gap:10px; cursor:pointer; transition:border-color .1s,background .1s }
.slice:hover { border-color:var(--bdr2); background:var(--card2) }
.slice-ico { width:32px; height:32px; border-radius:var(--r); background:rgba(255,255,255,.04); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.slice-ico [data-lucide] { width:16px; height:16px; opacity:.7 }
.slice-info { flex:1; min-width:0 }
.slice-name { font-size:13px; font-weight:700 }
.slice-addr { font-size:10.5px; color:var(--muted); font-family:monospace; margin-top:1px }
.slice-tags { display:flex; gap:4px; margin-top:5px; flex-wrap:wrap }
.stag { font-size:10px; font-weight:600; color:var(--light); background:rgba(255,255,255,.04); border:1px solid var(--border); padding:1px 6px; border-radius:4px }
.slice-end { display:flex; align-items:center; gap:7px; flex-shrink:0 }
.slice-cta { font-size:11px; color:var(--muted); font-weight:600 }

/* ── Panel gaming ───────────────────────────────────────────────────── */
.panel-nav { height:38px; background:var(--surface); border:1px solid var(--border); border-radius:var(--rl); display:flex; align-items:center; padding:0 4px; gap:1px; overflow-x:auto; margin-bottom:12px; flex-shrink:0 }
.panel-nav::-webkit-scrollbar { height:0 }
.ptab { height:26px; padding:0 10px; background:transparent; border:none; border-radius:5px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; cursor:pointer; white-space:nowrap; transition:all .1s; font-family:inherit; flex-shrink:0; display:flex; align-items:center; gap:5px }
.ptab [data-lucide] { width:12px; height:12px }
.ptab:hover { background:rgba(255,255,255,.05); color:var(--white) }
.ptab.on { background:rgba(255,255,255,.07); color:var(--white); border:1px solid var(--border) }
.pw-row { margin-left:auto; display:flex; gap:3px; flex-shrink:0 }

/* Console */
.con { background:#090909; border:1px solid var(--border); border-radius:var(--rl); overflow:hidden }
.con-bar { height:29px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 10px; gap:5px }
.cdot { width:8px; height:8px; border-radius:50% }
.con-out { height:400px; overflow-y:auto; padding:9px 11px; font-family:'Courier New',Consolas,monospace; font-size:11.5px; line-height:1.65; color:#ccc }
.con-out::-webkit-scrollbar { width:3px }
.con-out::-webkit-scrollbar-thumb { background:var(--border) }
.cline { white-space:pre-wrap; word-break:break-all; display:block }
.cl-i { color:#ccc } .cl-w { color:#fde68a } .cl-e { color:#fca5a5 } .cl-s { color:#93c5fd; opacity:.65 } .cl-o { color:#86efac }
.con-in { border-top:1px solid var(--border); display:flex; align-items:center; background:var(--surface) }
.c-pr { padding:0 8px; color:var(--muted); font-family:monospace; font-size:12px; user-select:none }
.c-txt { flex:1; background:transparent; border:none; padding:8px 0; color:var(--white); font-size:12px; font-family:'Courier New',monospace; outline:none }
.c-btn { padding:0 9px; height:100%; background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:13px; transition:color .1s }
.c-btn:hover { color:var(--white) }

/* File manager */
.fm { background:var(--card); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden }
.fm-bar { height:35px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:6px; padding:0 9px }
.fm-crumb { flex:1; font-size:11px; color:var(--muted); font-family:monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fm-crumb a { cursor:pointer; transition:color .1s }
.fm-crumb a:hover { color:var(--white) }
.fmr { display:flex; align-items:center; gap:8px; padding:7px 9px; border-bottom:1px solid rgba(34,34,34,.4); cursor:pointer; transition:background .07s }
.fmr:hover { background:rgba(255,255,255,.018) }
.fmr:last-child { border-bottom:none }
.fmr-ic { width:14px; text-align:center; font-size:11px; opacity:.4; flex-shrink:0 }
.fmr-name { flex:1; font-size:12.5px; font-weight:500; color:var(--light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fmr:hover .fmr-name { color:var(--white) }
.fmr-sz { font-size:11px; color:var(--muted); min-width:52px; text-align:right; flex-shrink:0 }
.fmr-dt { font-size:11px; color:var(--muted); min-width:82px; text-align:right; flex-shrink:0 }
.fmr-acts { display:flex; gap:2px; opacity:0; transition:opacity .1s; flex-shrink:0 }
.fmr:hover .fmr-acts { opacity:1 }

/* Stat pills */
.spill { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:5px; font-size:11px; font-weight:600; color:var(--muted) }
.spill b { color:var(--white); font-variant-numeric:tabular-nums }

/* MC version cards */
.mc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:5px }
.mc-card { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--r); padding:9px 11px; cursor:pointer; transition:all .1s }
.mc-card:hover { border-color:var(--bdr2) }
.mc-card.sel { border-color:var(--white); background:rgba(255,255,255,.06) }
.mc-ver { font-size:12.5px; font-weight:800 }
.mc-type { font-size:10px; color:var(--muted); margin-top:2px }

/* Info list */
.ilist { list-style:none }
.iitem { display:flex; align-items:flex-start; padding:7px 0; border-bottom:1px solid rgba(34,34,34,.5) }
.iitem:last-child { border-bottom:none }
.ikey { width:115px; flex-shrink:0; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); padding-top:1px }
.ival { font-size:13px; color:var(--white); flex:1 }

.danger-card { border-color:rgba(239,68,68,.15) !important }
.danger-title { color:var(--red) !important }

/* Products */
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:11px }
.prod-card { background:var(--card); border:1px solid var(--border); border-radius:var(--rx); padding:20px; cursor:pointer; transition:border-color .12s,transform .12s; position:relative; display:flex; flex-direction:column }
.prod-card:hover { border-color:var(--bdr2); transform:translateY(-2px) }
.prod-card.featured { border-color:rgba(255,255,255,.1) }
.prod-badge { position:absolute; top:12px; right:12px; background:var(--white); color:var(--bg); font-size:9px; font-weight:800; padding:2px 7px; border-radius:99px; letter-spacing:.5px }
.prod-icon { width:38px; height:38px; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:12px }
.prod-icon [data-lucide] { width:18px; height:18px }
.prod-name { font-size:15px; font-weight:900; letter-spacing:-.3px; margin-bottom:3px }
.prod-desc { font-size:12px; color:var(--muted); margin-bottom:12px; line-height:1.5; flex:1 }
.prod-price { font-size:22px; font-weight:900; letter-spacing:-1px }
.prod-price span { font-size:12px; color:var(--muted); font-weight:400 }
.prod-feats { list-style:none; margin:11px 0; display:flex; flex-direction:column; gap:5px }
.prod-feats li { font-size:12px; color:var(--light); display:flex; align-items:center; gap:6px }
.prod-feats li [data-lucide] { width:12px; height:12px; color:var(--green); flex-shrink:0 }

/* Ticket reply */
.reply { padding:12px; border-radius:var(--r); margin-bottom:10px }
.reply-client { background:rgba(255,255,255,.03); border:1px solid var(--border) }
.reply-staff { background:rgba(59,130,246,.05); border:1px solid rgba(59,130,246,.12) }
.reply-hd { display:flex; align-items:center; gap:8px; margin-bottom:7px }
.reply-author { font-size:12px; font-weight:700 }
.reply-date { font-size:11px; color:var(--muted) }
.reply-body { font-size:13px; color:var(--light); line-height:1.65; white-space:pre-wrap }

/* Misc */
.sep { border:none; border-top:1px solid var(--border); margin:14px 0 }
.empty { text-align:center; padding:42px 18px }
.empty-ic { width:40px; height:40px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px }
.empty-ic [data-lucide] { width:18px; height:18px; opacity:.4 }
.empty-t { font-size:13.5px; font-weight:700; margin-bottom:3px }
.empty-s { font-size:12.5px; color:var(--muted) }

.spinner { width:13px; height:13px; border:2px solid rgba(255,255,255,.1); border-top-color:var(--white); border-radius:50%; animation:sp .5s linear infinite; display:inline-block; vertical-align:middle }
@keyframes sp { to { transform:rotate(360deg) } }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px }
.text-muted { color:var(--muted) }
.text-red   { color:var(--red) }
.text-green { color:var(--green) }
.mono { font-family:monospace }
.fw-7 { font-weight:700 }
.fw-9 { font-weight:900 }

::-webkit-scrollbar { width:4px; height:4px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media(max-width:900px) {
  .sidebar { transform:translateX(-100%) }
  .sidebar.open { transform:translateX(0) }
  .main { margin-left:0 }
  .ham { display:flex }
  .content { padding:13px 14px }
  .c2,.c3,.grid-2,.grid-3 { grid-template-columns:1fr }
  .stats-grid { grid-template-columns:1fr 1fr }
  .pool-metrics { grid-template-columns:1fr }
  .prod-grid { grid-template-columns:1fr }
}
@media(max-width:500px) {
  .stats-grid { grid-template-columns:1fr }
  .auth-box { padding:22px 16px }
}
#mob-over { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:190 }