/* ===== Clean dark UI (Chrono Spinning Wheel) ===== */
:root{
  --bg:#0b1220;         /* page background */
  --card:#0f1d2a;       /* panels */
  --edge:#16283a;       /* borders */
  --txt:#e6f1ff;        /* primary text */
  --muted:#9fb2c9;      /* secondary text */
  --dim:#7f93ad;        /* subtle text */
  --accent:#29b6f6;     /* links / accents */
  --ok:#22c55e;         /* green */
  --ok2:#3b82f6;        /* blue */
  --chip:#0c2a3f;       /* badge chips */
  --badge:#12304a;      /* small badges */
  --ring:#0ea5e9;       /* ring glow */
  --warn:#f4b400;       /* pointer color */
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--txt);
  font:14px/1.5 system-ui, Segoe UI, Roboto, Arial, sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.container{max-width:1200px; margin:0 auto; padding:24px}
.card{
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:12px;
  padding:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.grid{display:grid; gap:16px}
@media(min-width:1100px){ .grid-cols-2{ grid-template-columns: 1fr 380px; } }

/* Top bar */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px;
  border-bottom:1px solid var(--edge);
  background:rgba(15,29,42,.6);
  backdrop-filter:blur(6px);
}
.brand{font-weight:700; color:var(--accent)}
.who{display:flex; align-items:center; gap:.5rem}

/* Badges / Buttons */
.badge{
  background:var(--badge);
  border:1px solid var(--edge);
  padding:4px 8px; border-radius:999px; color:var(--muted);
}
.btn{
  background:#124266; border:1px solid #1a5f8d; color:#e6f1ff;
  border-radius:10px; padding:8px 12px; cursor:pointer;
}
.btn:hover{background:#15517a}
.btn.primary{background:#0a6abf; border-color:#1887e2}

/* Wheel */
.wheel-holder{ position:relative; display:inline-block }
#wheel{
  width:100%; max-width:640px; aspect-ratio:1;
  border-radius:16px;
  border:1px solid var(--edge);
  background:#0b1523;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}

/* Pointer (centered above the wheel, pointing DOWN) */
.pointer{
  position:absolute; left:50%; transform:translateX(-50%);
  top:-10px; width:0; height:0;
  border-left:12px solid transparent; border-right:12px solid transparent;
  border-top:18px solid var(--warn);  /* ▼ */
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}

/* Legend */
.legend h3{margin:0 0 6px 0}
.legend .meta{color:var(--dim); font-size:12px}
.legend ul{list-style:none; margin:8px 0 0 0; padding:0}
.legend li{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:8px; align-items:center; padding:6px 0;
  border-bottom:1px dashed rgba(255,255,255,.06);
}
.legend .pill{
  background:var(--chip);
  border:1px solid var(--edge);
  padding:2px 8px; border-radius:999px; color:var(--muted);
}
.legend .amt{white-space:nowrap; color:#e6f1ff}
.legend .pct{
  background:rgba(41,182,246,.08);
  border:1px solid #215b79; color:#c5e9ff;
  padding:2px 8px; border-radius:999px;
  font-variant-numeric:tabular-nums;
}

/* Tables / footer bits */
.table{width:100%; border-collapse:collapse}
.table th, .table td{padding:8px 6px; border-bottom:1px solid var(--edge); color:var(--muted)}
.footer-note{color:var(--dim); font-size:12px}

/* Small helpers */
.center{display:flex; align-items:center; justify-content:center}
.mt-2{margin-top:.5rem} .mt-3{margin-top:1rem}
.mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:1rem}