:root{
  --stage:#0a0a0e;
  --panel:#15151c;
  --panel-2:#1c1c25;
  --panel-3:#24242f;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --text:#f3f3f6;
  --text-dim:#9797a3;
  --text-faint:#5f5f6b;
  --signal:#ff3b5c;
  --signal-dim: rgba(255,59,92,0.16);
  --gold:#ffc542;
  --gold-dim: rgba(255,197,66,0.14);
  --diamond:#5ce1e6;
  --diamond-dim: rgba(92,225,230,0.14);
  --danger:#ff5c5c;
  --success:#7ed957;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
  --font-display:'Bricolage Grotesque', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

/* Light theme - toggled via <html data-theme="light">, persisted in localStorage.
   Same variable names, different values - every component built against the
   --var tokens above switches automatically, nothing else needs to change. */
[data-theme="light"]{
  --stage:#f5f5f7;
  --panel:#ffffff;
  --panel-2:#f0f0f3;
  --panel-3:#e8e8ec;
  --line: rgba(0,0,0,0.08);
  --line-strong: rgba(0,0,0,0.14);
  --text:#16161d;
  --text-dim:#666672;
  --text-faint:#9d9da8;
  --signal:#ff3b5c;
  --signal-dim: rgba(255,59,92,0.10);
  --gold:#c98a00;
  --gold-dim: rgba(201,138,0,0.10);
  --diamond:#0891a3;
  --diamond-dim: rgba(8,145,163,0.10);
  --danger:#e0393f;
  --success:#3aa15c;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background: var(--stage);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font-family:inherit; }
button{ cursor:pointer; }
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius:4px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ============ SHELL / NAV ============ */
.page-shell{ max-width:1400px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }

.topnav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background: rgba(10,10,14,0.85); backdrop-filter: blur(10px); z-index:30;
}
.brand{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-0.01em; }
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 3px var(--signal-dim); }
.nav-links{ display:none; align-items:center; gap:22px; font-size:14px; color:var(--text-dim); }
.nav-links a:hover{ color:var(--text); }
@media (min-width:760px){ .nav-links{ display:flex; } }
.nav-right{ display:flex; align-items:center; gap:12px; }
.wallet-chip{
  display:flex; align-items:center; gap:6px;
  background:var(--panel-2); border:1px solid var(--line);
  padding:6px 10px; border-radius:999px; font-family:var(--font-mono); font-size:12px; color:var(--gold);
}
.icon-btn{ background:none; border:none; color:var(--text-dim); display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; }
.icon-btn:hover{ background: var(--panel-2); color:var(--text); }
.avatar-btn{ width:32px; height:32px; border-radius:50%; background: linear-gradient(135deg, var(--signal), var(--gold)); border:none; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:12px; color:#1a0a0d; }

.btn{
  font-size:13px; font-weight:600; padding:9px 16px; border-radius:999px; border:none;
  background:var(--panel-2); color:var(--text); border:1px solid var(--line-strong);
}
.btn:hover{ border-color: var(--text-dim); }
.btn-primary{ background:var(--signal); color:#fff; border:none; }
.btn-primary:hover{ background:#ff5372; }
.btn-block{ width:100%; }
.btn-ghost{ background:none; border:1px solid var(--line-strong); color:var(--text-dim); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

/* ============ MAIN CONTENT ============ */
.container{ padding: 20px; flex:1; }
.section-title{ font-family:var(--font-display); font-size:20px; font-weight:600; margin-bottom:14px; }
.tabs{ display:flex; gap:8px; margin-bottom:18px; overflow-x:auto; padding-bottom:2px; }
.tab-pill{
  font-size:13px; padding:7px 14px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--line-strong); color:var(--text-dim); background:none; flex-shrink:0;
}
.tab-pill.active{ background:var(--text); color:var(--stage); border-color:var(--text); }

/* live stream grid */
.stream-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width:640px){ .stream-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:900px){ .stream-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width:1200px){ .stream-grid{ grid-template-columns:repeat(5, minmax(0,1fr)); } }

.stream-card{
  position:relative; aspect-ratio:0.72; border-radius:var(--radius-md); overflow:hidden;
  background: var(--panel); border:1px solid var(--line); display:block;
}
.stream-card .bg{ position:absolute; inset:0; opacity:0.4; }
.stream-card .live-tag{
  position:absolute; top:8px; left:8px; font-size:10px; font-weight:600; font-family:var(--font-mono);
  background:var(--signal); color:#fff; padding:2px 7px; border-radius:5px;
}
.stream-card .meta{ position:absolute; bottom:8px; left:8px; right:8px; }
.stream-card .host{ font-size:12px; font-weight:600; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stream-card .views{ font-size:11px; color:var(--text-dim); display:flex; align-items:center; gap:4px; font-family:var(--font-mono); }
.stream-card:hover{ border-color: var(--line-strong); }
.empty-state{ text-align:center; padding:60px 20px; color:var(--text-dim); }
.empty-state .big{ font-family:var(--font-display); font-size:18px; color:var(--text); margin-bottom:6px; }

/* ============ FORMS / AUTH ============ */
.auth-wrap{ max-width:380px; margin: 60px auto; padding: 0 20px; }
.auth-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 24px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; height:42px; border-radius:var(--radius-sm); border:1px solid var(--line-strong);
  background:var(--panel-2); color:var(--text); padding:0 14px; font-size:14px; outline:none;
}
.field textarea{ height:auto; padding:10px 14px; min-height:80px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--signal); }
.form-error{ background:var(--signal-dim); color:var(--danger); font-size:12px; padding:8px 12px; border-radius:var(--radius-sm); margin-bottom:14px; display:none; }
.form-error.show{ display:block; }
.form-success{ background: rgba(126,217,87,0.12); color:var(--success); font-size:12px; padding:8px 12px; border-radius:var(--radius-sm); margin-bottom:14px; display:none; }
.form-success.show{ display:block; }
.auth-switch{ text-align:center; font-size:13px; color:var(--text-dim); margin-top:16px; }
.auth-switch a{ color:var(--signal); font-weight:600; }

/* ============ CARDS / WALLET ============ */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; }
.balance-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.balance-box{ background:var(--panel-2); border-radius:var(--radius-md); padding:16px; text-align:center; }
.balance-box .num{ font-family:var(--font-mono); font-size:22px; font-weight:600; margin:6px 0 2px; }
.balance-box.coins .num{ color:var(--gold); }
.balance-box.diamonds .num{ color:var(--diamond); }
.balance-box .label{ font-size:12px; color:var(--text-dim); }

.pkg-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:600px){ .pkg-grid{ grid-template-columns:1fr 1fr; } }
.pkg-card{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:14px 16px;
}
.pkg-card .coins{ font-weight:600; font-size:14px; }
.pkg-card .bonus{ font-size:11px; color:var(--gold); }
.pkg-card .price{ font-size:13px; color:var(--text-dim); font-family:var(--font-mono); }

.status-banner{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-md); background:var(--panel-2); margin-bottom:16px; font-size:13px; }
.spinner{ width:16px; height:16px; border-radius:50%; border:2px solid var(--line-strong); border-top-color:var(--signal); animation: spin 0.7s linear infinite; flex-shrink:0; }
@keyframes spin{ to{ transform: rotate(360deg); } }

table.simple{ width:100%; border-collapse:collapse; font-size:13px; }
table.simple th{ text-align:left; color:var(--text-dim); font-weight:500; padding:8px 6px; border-bottom:1px solid var(--line); }
table.simple td{ padding:10px 6px; border-bottom:1px solid var(--line); }
.badge{ font-size:10px; font-family:var(--font-mono); padding:2px 8px; border-radius:999px; }
.badge.pending{ background:var(--gold-dim); color:var(--gold); }
.badge.completed, .badge.approved, .badge.paid{ background:rgba(126,217,87,0.14); color:var(--success); }
.badge.failed, .badge.rejected{ background:var(--signal-dim); color:var(--danger); }

/* ============ PROFILE ============ */
.profile-header{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.profile-avatar{ width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg, var(--signal), var(--gold)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:22px; color:#1a0a0d; flex-shrink:0; }
.profile-stats{ display:flex; gap:20px; margin-top:6px; font-size:13px; color:var(--text-dim); }
.profile-stats b{ color:var(--text); font-family:var(--font-mono); }

.list-row{ display:flex; align-items:center; justify-content:between; gap:10px; padding:14px 4px; border-bottom:1px solid var(--line); font-size:14px; }
.list-row:last-child{ border-bottom:none; }