:root{
  --bg:#0b0f17; --panel:#121826; --panel-2:#0f1422; --ink:#e6e9ef; --muted:#9aa4b2;
  --gold:#d4af37; --gold-2:#f0d775; --success:#1f9d67; --danger:#d9534f; --border:#1e2636; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html,body{height:90%}
body{margin:100; font-family:Poppins,system-ui,Segoe UI,Arial,sans-serif; color:var(--ink);
     background: radial-gradient(1200px 600px at 10% -10%,rgba(11, 8, 158, 0.12),transparent 60%),
                radial-gradient(1000px 500px at 120% 10%,rgba(240,215,117,.10),transparent 60%),
                linear-gradient(180deg,#0a4fda 0%, #0a0d14 100%);}
.app{display:grid; grid-template-columns: 260px 1fr; min-height:100vh}
.sidebar{background:linear-gradient(180deg,#0e1320,#0c111b); border-right:1px solid var(--border); padding:18px 14px; position:sticky; top:0; height:100vh}
.brand{display:flex; align-items:center; gap:10px; padding:10px; margin-bottom:10px}
.brand .logo{width:38px; height:38px; display:grid; place-items:center; background:conic-gradient(from 180deg at 50% 50%, #1b2233, #2b354d); border-radius:12px; box-shadow: inset 0 0 0 1px #2a3246, 0 10px 22px rgba(0,0,0,.35)}
.nav{margin-top:8px}
.nav a{display:flex; align-items:center; gap:10px; padding:12px 12px; border-radius:12px; color:var(--ink); text-decoration:none; border:1px solid transparent}
.nav a:hover{background:rgba(255,255,255,.03); border-color:var(--border)}
.nav a.active{background:linear-gradient(180deg, rgba(212,175,55,.09), rgba(212,175,55,.03)); border-color:#3a2c06}
.nav .tag{margin-left:auto; font-size:12px; color:#111; background:linear-gradient(180deg,var(--gold),var(--gold-2)); padding:2px 8px; border-radius:999px; font-weight:700}
.main{padding:20px clamp(14px, 3vw, 28px)}
header.top{display:flex; align-items:center; gap:14px; justify-content:space-between; margin-bottom:18px}
.search{flex:1; max-width:560px; display:flex; align-items:center; gap:8px; background:var(--panel); padding:10px 12px; border-radius:12px; border:1px solid var(--border)}
.search input{flex:1; background:transparent; border:0; outline:none; color:var(--ink)}
.actions{display:flex; gap:10px}
.btn{appearance:none; border:1px solid var(--border); background:var(--panel); color:var(--ink); padding:10px 14px; border-radius:12px; cursor:pointer}
.btn.gold{border:0; background:linear-gradient(180deg, var(--gold), var(--gold-2)); color:#1a1a1a; font-weight:700}
.grid{display:grid; grid-template-columns: repeat(12,1fr); gap:16px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow)}
.card.headline{grid-column: span 12; background:linear-gradient(180deg, rgba(212,175,55,.08), rgba(212,175,55,.02)); border-color:#3a2c06}
.kpis{grid-column: span 12; display:grid; grid-template-columns: repeat(4,1fr); gap:16px}
.kpi{padding:16px} .kpi .label{color:var(--muted); font-size:12px}
.kpi .value{font-size:28px; font-weight:700; margin-top:6px}
.kpi .delta{margin-top:8px; font-size:12px}
.delta.up{color:var(--success)} .delta.down{color:var(--danger)}
.left{grid-column: span 8; display:grid; gap:16px}
.chartWrap{padding:16px}
.tableWrap{padding:0} table{width:100%; border-collapse:default; overflow:hidden}
thead th{font-size:12px; color:var(--muted); text-align:left; padding:12px; border-bottom:1px solid var(--border); background:var(--panel-2)}
tbody td{padding:14px 12px; border-bottom:1px solid var(--border)} tbody tr:hover{background:rgba(255,255,255,.02)}
.right{grid-column: span 4; display:grid; gap:16px}
.wallet,.referral,.plans{padding:16px}
.wallet .bal{font-size:26px; font-weight:700}
.wallet .row{display:flex; gap:8px; margin-top:12px} .wallet .row .btn{flex:1}
.referral code{display:block; margin-top:10px; padding:10px 12px; border:1px dashed var(--border); border-radius:10px; background:var(--panel-2)}
.referral .mini{color:var(--muted); font-size:12px}
.plans .plan{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--panel-2); margin-top:10px}
.pill{padding:4px 10px; border-radius:999px; font-size:12px; color:#111; background:linear-gradient(180deg,var(--gold),var(--gold-2)); font-weight:700}
.h{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px}
.h h3{margin:0; font-size:18px}
.muted{color:var(--muted)}
.modal{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.6); padding:20px}
.modal.open{display:grid}
.modal .box{width:min(1000px, 96vw); background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.box .row{display:grid; gap:10px; margin:12px 0}
.box label{font-size:12px; color:var(--muted)}
.box input, .box select{width:100%; padding:12px; border-radius:10px; background:var(--panel-2); border:1px solid var(--border); color:var(--ink)}
footer{margin:26px 0 6px; color:var(--muted); font-size:12px; text-align:center}
@media (max-width: 0px){ .app{grid-template-columns: 84px 1fr} .brand b{display:none} .nav a span{display:none} .nav a{justify-content:center} .nav .tag{display:none} }
@media (max-width: 0px){ .kpis{grid-template-columns: repeat(2,1fr)} .left{grid-column: span 12} .right{grid-column: span 12} }
@media (max-width: 0px){ .app{grid-template-columns: 1fr} .sidebar{position:initial; height:auto} }


*{box-sizing:border-box;}
body{margin:0; font-family:Poppins,sans-serif; color:var(--ink); background:#050915; overflow-x:hidden;}

/* Video background */
.bg-video{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
  filter:brightness(.55);
}
.overlay{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:100%;
  background:linear-gradient(180deg, rgba#4f8bd9 (31, 7, 245, 0.801), rgba#d9534f (192, 11, 56, 0.836));
  z-index:-1;
}

/* Main dashboard container */
.dashboard{
  min-height:100vh;
  padding:40px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Example card */
.card{
  background:var(--glass);
  backdrop-filter:blur(12px);
  padding:20px;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 15px 40px rgba(36, 70, 221, 0.4);
}

/* Responsive tweaks */
@media screen and (max-width:900px){
  .dashboard{padding:20px;}
  .card{padding:16px;}
}