:root {
  --bg: #070b10;
  --panel: #0e151c;
  --ink: #e8eef4;
  --muted: #8a97a6;
  --line: rgba(232, 238, 244, 0.1);
  --hype: #3dffb0;
  --purr: #ffb454;
  --spread: #7eb6ff;
  --down: #ff6b7a;
  --up: #3dffb0;
  --font: "DM Sans", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  --font-m: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 500px at 15% -5%, rgba(61,255,176,.1), transparent 55%),
    radial-gradient(800px 420px at 90% 0%, rgba(255,180,84,.08), transparent 50%),
    linear-gradient(180deg, #05080c, var(--bg) 40%, #05070a);
}
.hero, main, .foot { position: relative; z-index: 1; }

.hero {
  padding: clamp(1.75rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  margin: 0 0 .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
}
.brand {
  margin: 0;
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(1.85rem, 5.5vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.brand .vs {
  color: var(--muted);
  font-weight: 500;
  font-size: .7em;
  margin: 0 .15em;
}
.lede {
  margin: .75rem 0 0;
  font-size: clamp(.95rem, 2vw, 1.05rem);
  font-weight: 400;
  color: #b6c3d0;
  letter-spacing: 0;
}
.links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.links a {
  color: var(--bg);
  background: var(--ink);
  text-decoration: none;
  padding: .5rem .85rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
}
.links a:last-child { background: var(--purr); color: #1a1205; }
.asof { margin: .9rem 0 0; font-size: .78rem; color: var(--muted); }

main { padding: 1.25rem clamp(1rem, 4vw, 3rem) 2.5rem; display: grid; gap: 1rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.stat .label {
  margin: 0;
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .04em;
}
.stat .price {
  margin: .4rem 0 0;
  font-family: var(--font-m);
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.stat .chg { margin: .35rem 0 0; font-size: .84rem; font-weight: 500; }
.stat.hype .price { color: var(--hype); }
.stat.purr .price { color: var(--purr); }
.stat.spread .price { color: var(--spread); }
.up { color: var(--up); }
.down { color: var(--down); }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.1rem;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.panel-head h2 {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.tf-bar .panel-head { margin-bottom: .85rem; }
.tf-groups {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1.25rem;
  align-items: center;
}
.tf-group {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.tf-label {
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
  min-width: 2rem;
}
.tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.tabs button {
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 500;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  padding: .35rem .7rem;
  cursor: pointer;
}
.tabs button.active {
  color: var(--bg);
  background: var(--ink);
  border-color: transparent;
}

.chart { height: 340px; }
.chart.sm { height: 240px; }
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
th, td {
  text-align: left;
  padding: .72rem .4rem;
  border-bottom: 1px solid var(--line);
}
th {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
}
td:not(:first-child) {
  font-family: var(--font-m);
  font-variant-numeric: tabular-nums;
}

.panel-sub {
  margin: 0;
  font-size: .78rem;
  color: var(--muted);
  font-weight: 400;
}
.vol-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
  margin-bottom: .85rem;
}
.vol-stat {
  background: rgba(0,0,0,.22);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .9rem 1rem;
}
.vol-stat .label {
  margin: 0;
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
}
.vol-stat .price {
  margin: .4rem 0 0;
  font-family: var(--font-m);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  font-weight: 600;
  line-height: 1.2;
}
.vol-stat .chg {
  margin: .35rem 0 0;
  font-size: .8rem;
  color: #b6c3d0;
}
.vol-stat.hype .price { color: var(--hype); }
.vol-stat.purr .price { color: var(--purr); }
.vol-stat.spread .price { color: var(--spread); }

.vol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.vol-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .9rem 1rem;
  background: rgba(0,0,0,.2);
}
.vol-card .label {
  margin: 0;
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
}
.vol-card .vals {
  margin: .45rem 0 0;
  font-family: var(--font-m);
  font-size: 1.2rem;
  font-weight: 600;
}
.vol-card .sep { color: var(--muted); font-weight: 500; font-size: .85rem; }
.vol-card .verdict {
  margin: .5rem 0 0;
  font-size: .84rem;
  color: #b6c3d0;
  line-height: 1.45;
}

.note {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.55;
}
.note code {
  font-family: var(--font-m);
  font-size: .86em;
  color: #b8c7d4;
}
.foot {
  padding: 1rem clamp(1rem, 4vw, 3rem) 2rem;
  font-size: .75rem;
  color: var(--muted);
}

@media (max-width: 860px) {
  .stats, .grid2, .vol-grid, .vol-compare { grid-template-columns: 1fr; }
  .chart { height: 280px; }
}