:root{
  --bg:#0B0F1A; --panel:#0E1324; --panel2:#0B1222; --border:#1B2540;
  --text:#E7ECFF; --muted:#9BA7C9;
  --primary:#6C63FF; --primary-2:#574DF0; --accent:#22D3EE;
  --success:#10B981; --danger:#EF4444; --warning:#F59E0B;
  --radius:16px; --rsm:12px; --gap:14px; --shadow:0 10px 28px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0;background:linear-gradient(180deg,var(--bg),#0A1120);color:var(--text);
  font:16px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:16px}
.hero{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,#0e1630,#0d1230);margin-bottom:14px}
.hero img{width:100%;display:block}

.card-panel{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.pill{display:inline-flex;align-items:center;gap:6px;background:#0c1936;border:1px solid var(--border);
  border-radius:999px;padding:6px 10px;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:8px}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.btn{border:1px solid var(--border);border-radius:var(--rsm);
  background:linear-gradient(180deg,#0f1930,#0c1428);color:var(--text);
  padding:10px 14px;cursor:pointer;transition:transform .15s, box-shadow .15s, border-color .15s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:#2a3960}
.btn.primary{background:linear-gradient(180deg,var(--primary),var(--primary-2));border-color:transparent;color:#fff}
.btn.secondary{background:linear-gradient(180deg,#14233f,#101c33)}
.btn.danger{background:linear-gradient(180deg,#A61B1B,#8F1B1B);border-color:#8F1B1B;color:#fff}

input,select{background:#0a1222;border:1px solid var(--border);border-radius:12px;padding:10px;color:var(--text);width:100%}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
tbody tr:hover{background:rgba(255,255,255,.03)}

@media (max-width:760px){.grid.two{grid-template-columns:1fr}}