/* Neon Punch (PND dark theme) — palette from docs/DESIGN_HANDOVER.md */
:root {
  --bg: #000; --surf: #0a0a0a; --surf2: #141414; --surf3: #1e1e1e; --line: #1e1e1e;
  --text: #c4d4e4; --text2: #9aafc0; --text3: #607080;
  --accent: #b8f000; --accent-rgb: 184, 240, 0;
  --vbull: #00e87a; --bull: #36d975; --sbull: #6fcf97; --neut: #506070;
  --sbear: #e88060; --bearc: #e84040; --vbear: #ff1f5e;
  --font: "IBM Plex Sans", "Inter", -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "JetBrains Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
h2 { margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
h2 .sub { text-transform: none; letter-spacing: 0; color: var(--text3); font-weight: 400; font-size: 12px; }

.top { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; background: rgba(0,0,0,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.brand { font-weight: 700; letter-spacing: .14em; font-size: 13px; }
.brand .mark { color: #000; background: var(--accent); padding: 1px 5px; border-radius: 3px; margin-right: 2px; }
.sess { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border: 1px solid var(--surf3); border-radius: 99px; }
.sess .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neut); }
.sess.open .dot { background: var(--vbull); box-shadow: 0 0 8px var(--vbull); }
.badge { font: 600 10px var(--mono); letter-spacing: .1em; padding: 3px 7px; border-radius: 3px; }
.badge.dw { background: rgba(var(--accent-rgb), .15); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .5); }
.clock { color: var(--text2); font-size: 12px; }
.spacer { flex: 1; }
.srcs { display: flex; gap: 4px; }
.srcs span { font: 10px var(--mono); padding: 2px 6px; border-radius: 3px; background: var(--surf2); color: var(--text3); }
.srcs span.ok::before { content: "● "; color: var(--vbull); }
.srcs span.bad { color: var(--sbear); }
.srcs span.bad::before { content: "● "; color: var(--vbear); }
.asof { font-size: 11px; color: var(--text3); }
@media (max-width: 640px) {
  .top { position: static; gap: 8px; }
  .srcs { order: 9; width: 100%; flex-wrap: wrap; }
  .srcs span { font-size: 9px; padding: 1px 5px; }
  .spacer { display: none; }
}
.btn { font: 600 12px var(--font); letter-spacing: .06em; background: var(--accent); color: #000; border: 0; border-radius: 4px; padding: 7px 14px; cursor: pointer; }
.btn:disabled { opacity: .5; cursor: wait; }
.banner { margin: 12px 16px 0; padding: 9px 12px; border: 1px solid rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .07); border-radius: 6px; font-size: 13px; }

main { padding: 14px 16px 40px; max-width: 1440px; margin: 0 auto; display: grid; gap: 14px; }
.card { background: var(--surf); border: 1px solid var(--line); border-radius: 8px; padding: 14px; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

/* signal pills */
.pill { display: inline-block; font: 600 10px var(--mono); letter-spacing: .06em; padding: 2px 6px; border-radius: 3px; white-space: nowrap; color: #000; }
.pill.sm { font-size: 9px; padding: 1px 4px; }
.c-vbull { background: var(--vbull); } .c-bull { background: var(--bull); } .c-sbull { background: var(--sbull); }
.c-neut { background: var(--neut); color: #dde6ef; } .c-sbear { background: var(--sbear); }
.c-bear-c { background: var(--bearc); color: #fff; } .c-vbear { background: var(--vbear); color: #fff; }
.t-vbull { color: var(--vbull); } .t-bull { color: var(--bull); } .t-sbull { color: var(--sbull); } .t-neut { color: var(--text2); }
.t-sbear { color: var(--sbear); } .t-bear-c { color: var(--bearc); } .t-vbear { color: var(--vbear); }
.up { color: var(--bull); } .down { color: var(--bearc); }
.stale { opacity: .55; }
.stale-tag { font: 600 9px var(--mono); color: var(--sbear); border: 1px solid var(--sbear); border-radius: 3px; padding: 0 4px; margin-left: 6px; }

/* heroes */
.heroes { display: grid; grid-template-columns: 1fr 1fr 0.7fr; gap: 14px; }
@media (max-width: 1100px) { .heroes { grid-template-columns: 1fr 1fr; } .heroes .mini { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (max-width: 640px) { .heroes { grid-template-columns: 1fr; } }
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--hc, var(--neut)); }
.hero .head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hero .sym { font: 700 22px var(--mono); }
.hero .px { font: 500 22px var(--mono); }
.hero .chg { font: 13px var(--mono); }
.hero .read { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; flex-wrap: wrap; }
.hero .read .pill { font-size: 12px; padding: 3px 9px; }
.meter { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--vbear), var(--sbear) 35%, var(--neut) 50%, var(--sbull) 65%, var(--vbull)); opacity: .85; margin: 4px 0 12px; }
.meter i { position: absolute; top: -4px; width: 3px; height: 14px; background: #fff; border-radius: 2px; transform: translateX(-50%); box-shadow: 0 0 6px #fff; }
.agree { display: flex; gap: 4px; align-items: center; font-size: 11px; color: var(--text3); }
.agree b { width: 9px; height: 9px; border-radius: 50%; background: var(--surf3); display: inline-block; }
.agree b.on { background: var(--hc); box-shadow: 0 0 5px var(--hc); }
.comps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 12px; }
.comps div { background: var(--surf2); border-radius: 4px; padding: 5px 6px; font-size: 10px; color: var(--text3); }
.comps div span { display: block; font: 600 12px var(--mono); }
.ladder { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; font: 12px var(--mono); }
.ladder .k { color: var(--text3); }
.ladder .v { text-align: right; }
.ladder .d { color: var(--text3); text-align: right; min-width: 64px; }
.ladder .now { color: #000; background: var(--accent); padding: 0 4px; border-radius: 2px; font-weight: 700; }
.ladder .row-now { grid-column: 1 / -1; height: 0; border-top: 1px dashed var(--accent); margin: 3px 0; }
.adr { margin-top: 10px; font-size: 11px; color: var(--text3); }
.adr .bar { height: 4px; background: var(--surf3); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.adr .bar i { display: block; height: 100%; background: var(--accent); }
.mini .card { padding: 12px; }
.mini .row { display: flex; align-items: baseline; gap: 8px; }

/* watch */
.watch { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.watch li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 7px 9px; background: var(--surf2); border-radius: 5px; font-size: 13px; }
.watch .k { font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding-top: 2px; }
.watch .k.headline { color: var(--sbear); } .watch .k.holiday { color: var(--vbear); } .watch .k.vix { color: var(--sbull); }

/* macro */
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.mbox { background: var(--surf2); border-radius: 6px; padding: 9px 10px; }
.mbox .l { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); }
.mbox .v { font: 600 17px var(--mono); margin: 2px 0; }
.mbox .s { font-size: 11px; color: var(--text2); display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.vixscale { display: flex; gap: 2px; margin-top: 6px; }
.vixscale span { flex: 1; font: 8px var(--mono); text-align: center; padding: 2px 0; border-radius: 2px; background: var(--surf3); color: var(--text3); }
.vixscale span.on { background: var(--accent); color: #000; font-weight: 700; }

/* events */
.ev { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ev:last-child { border: 0; }
.ev .t { font: 12px var(--mono); color: var(--text2); }
.ev .t small { display: block; color: var(--text3); font-size: 10px; }
.ev .imp { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.ev .imp.High { background: var(--vbear); } .ev .imp.Medium { background: var(--sbear); } .ev .imp.hol { background: var(--accent); }
.ev .fc { font: 11px var(--mono); color: var(--text3); }
.ev .cd { font: 600 12px var(--mono); color: var(--accent); white-space: nowrap; }
.ev.past { opacity: .45; } .ev.past .cd { color: var(--text3); }
.ev.today .t { color: var(--text); }
.dayhdr { font: 600 10px var(--mono); letter-spacing: .12em; color: var(--text3); margin: 10px 0 2px; text-transform: uppercase; }

/* news */
.live { font: 700 9px var(--mono); color: #000; background: var(--vbull); padding: 1px 5px; border-radius: 3px; letter-spacing: .1em; }
.live.off { background: var(--sbear); }
.ping { margin-left: auto; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--text3); font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.chip { font: 11px var(--font); background: var(--surf2); border: 1px solid var(--surf3); color: var(--text2); padding: 3px 9px; border-radius: 99px; cursor: pointer; }
.chip.on { border-color: var(--accent); color: var(--accent); }
#top .hl { border-left: 3px solid var(--vbear); background: rgba(255,31,94,.06); }
.feed { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; }
.hl { display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
.hl .t { font: 11px var(--mono); color: var(--text3); padding-top: 2px; }
.hl .tags { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: 1px; }
.hl .tag { font: 600 9px var(--mono); padding: 0 4px; border-radius: 2px; background: var(--surf3); color: var(--text2); }
.hl.u2 .x { color: #fff; } .hl.u3 { background: rgba(var(--accent-rgb), .05); } .hl.u3 .x { color: #fff; font-weight: 600; }
.hl.new { animation: flash 2.5s ease-out; }
@keyframes flash { from { background: rgba(var(--accent-rgb), .25); } to { background: transparent; } }
.hl a { color: inherit; text-decoration: none; }

/* scoreboard */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 14px 22px; }
@media (max-width: 480px) { .board { grid-template-columns: 1fr; } }
.grp h3 { margin: 0 0 4px; font: 600 10px var(--mono); letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.grp h3 small { color: var(--text3); letter-spacing: 0; margin-left: 6px; }
.brow { display: grid; grid-template-columns: 44px minmax(0,1fr) 76px 58px 56px 54px 150px; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.brow .k { font: 700 12px var(--mono); }
.brow .n { color: var(--text3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .p, .brow .c { font: 12px var(--mono); text-align: right; }
.brow .fx { display: flex; gap: 2px; justify-content: flex-end; }
.brow svg { display: block; }
@media (max-width: 480px) {
  .brow { grid-template-columns: 44px 1fr 62px 54px 58px; }
  .brow .n, .brow .sp { display: none; }
  .brow .fx { grid-column: 2 / -1; justify-content: flex-start; }
}
footer { color: var(--text3); font-size: 11px; display: grid; gap: 3px; padding: 6px 2px; }
footer b { color: var(--text2); font-weight: 500; }