:root {
  --bg: #090b10;
  --panel: rgba(20, 24, 33, .82);
  --panel2: #11151d;
  --text: #f6f7fb;
  --muted: #8d96a8;
  --border: rgba(255,255,255,.08);
  --accent: #8b7cff;
  --accent2: #50e3c2;
  --shadow: 0 24px 70px rgba(0,0,0,.35);
}
[data-theme="light"] {
  --bg: #f4f1e9;
  --panel: rgba(255,253,248,.88);
  --panel2: #fffdf8;
  --text: #17181c;
  --muted: #6c6d73;
  --border: rgba(25,25,25,.09);
  --accent: #6556d9;
  --accent2: #159f82;
  --shadow: 0 24px 60px rgba(60,48,25,.12);
}
* { box-sizing: border-box; }
body {
  margin:0; min-height:100vh; color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(139,124,255,.13), transparent 32rem),
    radial-gradient(circle at 90% 15%, rgba(80,227,194,.09), transparent 30rem),
    var(--bg);
}
.shell { width:min(1500px, 94vw); margin:auto; padding:30px 0 80px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:28px; }
.eyebrow { color:var(--accent2); font-size:11px; font-weight:800; letter-spacing:.16em; }
h1 { font-size:clamp(34px,5vw,62px); line-height:1; margin:8px 0 10px; letter-spacing:-.055em; }
h2 { margin:0; font-size:21px; letter-spacing:-.025em; }
p, small { color:var(--muted); }
.status { color:var(--muted); font-size:13px; }
.theme {
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  padding:12px 16px; border-radius:14px; cursor:pointer; box-shadow:var(--shadow);
}
.hero-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px; margin-bottom:16px; }
.hero-card, .panel, .asset-card {
  background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow);
  backdrop-filter: blur(18px); border-radius:24px;
}
.hero-card { padding:24px; min-height:135px; display:flex; flex-direction:column; justify-content:space-between; }
.hero-card span { color:var(--muted); font-size:13px; }
.hero-card strong { font-size:36px; letter-spacing:-.04em; }
.panel { padding:22px; margin-bottom:16px; }
.panel-head, .section-title { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:12px; }
.panel-head p, .section-title p { margin:6px 0 0; font-size:13px; }
.chart { min-height:330px; }
.chips { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.chip { border:1px solid var(--border); background:var(--panel2); color:var(--text); border-radius:999px; padding:7px 11px; font-size:12px; cursor:pointer; }
.chip.off { opacity:.35; text-decoration:line-through; }
.asset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.asset-card { padding:20px; }
.asset-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.asset-symbol { font-size:25px; font-weight:850; }
.asset-name { color:var(--muted); font-size:12px; }
.asset-value { font-size:22px; font-weight:800; text-align:right; }
.asset-balance { color:var(--muted); font-size:12px; margin-top:3px; text-align:right; }
.asset-chart { min-height:250px; }
.error { color:#ff7f96; font-size:12px; padding:8px 0; }
@media(max-width:900px) {
  .hero-grid { grid-template-columns:1fr; }
  .asset-grid { grid-template-columns:1fr; }
  .panel-head { flex-direction:column; }
  .chips { justify-content:flex-start; }
}
