/* ═══ Fameshire Town Hall — Government Portal ═══
   Light professional design. All dynamic widths use element.style (not inline
   style="") because the server CSP is `style-src 'self'`.                    */

:root {
  --bg:#f4f6f9; --surface:#fff; --primary:#1e3a5f; --blue:#2563eb;
  --accent:#b45309; --text:#111827; --muted:#6b7280; --border:#e5e7eb;
  --focus:#93c5fd; --ok:#047857; --ok-bg:#ecfdf5; --err:#b91c1c;
  --err-bg:#fef2f2; --blue-bg:#eff6ff;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 4px 12px rgba(0,0,0,.08);
  --r:8px; --rl:12px;
  --mono:'SF Mono',Consolas,'Courier New',monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;line-height:1.25}
.muted{color:var(--muted)}.center{text-align:center}
.error{color:var(--err);min-height:1.2em;font-size:13px}
.hidden,.hidden-off{display:none!important}
.spread{display:flex;justify-content:space-between;align-items:center}

/* ── login gate ──────────────────────────────────────────────────────── */
.gate{min-height:100vh;display:grid;place-items:center;background:var(--bg);padding:24px}
.gate-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rl);padding:48px 40px;width:min(420px,92vw);
  text-align:center;box-shadow:var(--shadow-lg)}
.gate-card h1{font-size:22px;color:var(--primary);margin-bottom:4px}
.gate-card .subtitle{color:var(--muted);font-size:14px;margin-bottom:28px}
.gate-card input{width:100%;margin:14px 0 8px;padding:10px 14px;
  border-radius:var(--r);border:1px solid var(--border);
  background:var(--bg);color:var(--text);font:inherit;font-size:14px}
.gate-card input:focus{outline:none;border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.gate-card button{width:100%;padding:10px;border:0;border-radius:var(--r);
  background:var(--primary);color:#fff;font-weight:600;cursor:pointer;
  font:inherit;font-size:14px;transition:background .15s}
.gate-card button:hover{background:#162d4a}
.ms-btn{background:#fff!important;color:#323130!important;border:1px solid #d0d0d0!important;
  display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;
  box-shadow:0 1px 2px rgba(0,0,0,.06)}
.ms-btn:hover{background:#f3f2f1!important}
.ms-btn.hidden,.breakglass.hidden{display:none}
.breakglass{margin-top:24px;color:var(--muted);font-size:13px}
.breakglass summary{cursor:pointer}
.breakglass summary:hover{color:var(--text)}
.breakglass input{width:100%;margin:10px 0 8px;padding:8px 12px;
  border-radius:var(--r);border:1px solid var(--border);
  background:var(--bg);color:var(--text)}
.breakglass button{width:100%;padding:8px;border:0;border-radius:var(--r);
  background:var(--accent);color:#fff;font-weight:600;cursor:pointer;font:inherit}
#login-error{margin-top:12px}

/* ── topbar ──────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:50;background:var(--surface);
  border-bottom:1px solid var(--border);padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;gap:16px;flex-wrap:wrap}
.topbar .brand{display:flex;align-items:center;gap:12px;white-space:nowrap}
.topbar .brand h1{font-size:18px;color:var(--primary);font-weight:700}
.topbar .brand .sep{width:1px;height:24px;background:var(--border)}
.topbar .brand .clock{font-size:12px;color:var(--muted);font-family:var(--mono)}
.topbar .right{display:flex;align-items:center;gap:14px}
.topbar #who{font-size:12px;color:var(--muted)}

/* nav pills */
nav{display:flex;gap:4px;flex-wrap:wrap}
.tab{background:none;border:1px solid transparent;color:var(--muted);
  padding:6px 14px;border-radius:20px;cursor:pointer;font:inherit;
  font-size:13px;font-weight:500;transition:all .15s;white-space:nowrap}
.tab:hover{color:var(--text);background:var(--bg)}
.tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.tab.ghost{border:1px dashed var(--border);font-size:12px;padding:5px 12px}
.tab.ghost:hover{border-color:var(--err);color:var(--err);background:var(--err-bg)}

/* ── layout ──────────────────────────────────────────────────────────── */
.main-wrap{max-width:1200px;margin:0 auto;padding:20px 24px 40px}
.panel{display:none;animation:fadeUp .2s ease}
.panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── cards ───────────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;margin-bottom:18px}
.card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);
  position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--blue)}
.card .num{font-size:28px;font-weight:700;font-family:var(--mono);color:var(--primary)}
.card .lbl{color:var(--muted);font-size:12px;margin-top:2px;font-weight:500}

/* ── boxes ───────────────────────────────────────────────────────────── */
.box{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:20px;margin-bottom:14px;box-shadow:var(--shadow)}
.box h2{font-size:15px;font-weight:600;color:var(--text);margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* ── tables ──────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;padding:8px 10px;color:var(--muted);font-weight:600;
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  border-bottom:2px solid var(--border);background:var(--bg)}
tbody td{padding:9px 10px;border-bottom:1px solid var(--border)}
tbody tr:hover td{background:#f9fafb}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-family:var(--mono);font-size:12px}
td code{font-family:var(--mono);font-size:12px;background:var(--blue-bg);
  padding:1px 6px;border-radius:4px}

/* ── bars ────────────────────────────────────────────────────────────── */
.bar{margin:10px 0}
.bar .row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.bar .row span:last-child{font-family:var(--mono);font-weight:600;font-size:12px}
.bar .track{height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.bar .fill{height:100%;border-radius:4px;background:var(--blue);transition:width .4s ease}

/* ── badges ──────────────────────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:11px;
  font-weight:600;letter-spacing:.02em}
.badge.open{color:var(--ok);background:var(--ok-bg)}
.badge.closed{color:var(--muted);background:#f3f4f6}
.badge.valid{color:var(--ok);background:var(--ok-bg)}
.badge.expired,.badge.rejected{color:var(--err);background:var(--err-bg)}
.badge.vetoed{color:var(--accent);background:#fffbeb}
.num.pos,td.pos{color:var(--ok)}.num.neg,td.neg{color:var(--err)}
.kind-government{color:var(--accent);font-weight:600}
.kind-police,.kind-fire,.kind-hospital{color:var(--blue)}

/* ── toolbar ─────────────────────────────────────────────────────────── */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.toolbar input{padding:8px 12px;border-radius:var(--r);border:1px solid var(--border);
  background:var(--surface);color:var(--text);font:inherit;font-size:13px}
.toolbar input:focus{outline:none;border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.toolbar button.primary{background:var(--primary);color:#fff;font-weight:600;
  border:0;border-radius:var(--r);padding:8px 16px;cursor:pointer;font:inherit;
  font-size:13px;transition:background .15s}
.toolbar button.primary:hover{background:#162d4a}

/* ── elections / bills ───────────────────────────────────────────────── */
.election{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.election h3{font-size:15px;margin-bottom:6px}

/* ── The city map (Zones tab) ─────────────────────────────────────────────
   Two layers of people on one page. The PULSE bar is the whole census in five
   segments; each RING on the map is one district, its arcs cut to the same five
   activities so a reader can compare a district with the city in the same glance.
   Colours come from ACTIVITIES in app.js, applied through the CSSOM, so the legend,
   the rings and the detail bars can never disagree.                            */
.note { font-size: 13px; margin: 0 0 12px; line-height: 1.5; }
.note code { font-family: var(--mono); font-size: 12px; background: var(--blue-bg);
  padding: 1px 5px; border-radius: 4px; }

/* ── the city pulse ─────────────────────────────────────────────────────── */
.pulse { display: flex; height: 46px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface); }
.pulse-seg { display: flex; align-items: center; justify-content: center;
  min-width: 2px; transition: width .5s ease; overflow: hidden; }
.pulse-num { font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.45); white-space: nowrap; }
.pulse-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.pulse-key { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.pulse-key-wide { flex-basis: 100%; font-size: 12px; }
.pulse-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.pulse-key-label { color: var(--text); }
.pulse-key-n { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.zone-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 16px; align-items: start; }
@media (max-width: 900px) { .zone-wrap { grid-template-columns: 1fr; } }

/* The map itself: dark so the activity arcs read, and it scales with its column. */
.zone-map { width: 100%; height: auto; display: block; background: #0b1220;
  border: 1px solid var(--border); border-radius: var(--r); }
/* The ring is what carries the information; the disc underneath only keeps a district
   findable when its ring is nearly empty. `pointer-events` on the arcs matters: a 3px
   stroke is a hard click target, so the disc is left clickable behind it. */
.zone-disc { cursor: pointer; transition: fill-opacity .15s; }
.zone-arc { cursor: pointer; pointer-events: stroke; transition: stroke-opacity .15s; }
.zone-arc:hover { stroke-width: 7; stroke-opacity: 1; }
.zone-disc:hover { fill-opacity: .28; }
.zone-live { pointer-events: none; }
.zone-label { font-family: var(--sans); font-size: 11px; fill: #cbd5e1;
  pointer-events: none; }

.zone-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.zone-legend { display: flex; flex-direction: column; gap: 2px; }
.zone-key { display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: 13px; }
.zone-key:hover { background: var(--bg); }
.zone-key.on { border-color: var(--primary); background: var(--blue-bg); }
.zone-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.zone-key-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.zone-key-n { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.zone-detail { border: 1px solid var(--border); border-radius: var(--r);
  padding: 14px; background: var(--bg); }
.zone-title { font-size: 14px; color: var(--primary); margin-bottom: 4px; }
.zone-detail .note { margin-bottom: 8px; }
.zone-stat { font-size: 13px; margin: 6px 0; }
.zone-detail .bar { margin: 8px 0; }
.zone-share { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ── the live board: the citizens that actually exist right now ──────────── */
.live-board { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.live-card { border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px 14px; background: var(--surface); cursor: pointer;
  transition: border-color .15s; }
.live-card:hover { border-color: var(--primary); }
.live-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.live-place { font-weight: 600; font-size: 13px; text-transform: capitalize; }
.live-total { margin-left: auto; font-family: var(--mono); font-size: 12px;
  color: var(--primary); font-weight: 700; }
.live-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px;
  padding: 2px 0; min-width: 0; }
.live-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto;
  align-self: center; }
.live-what { flex: 0 0 auto; color: var(--text); }
.live-count { font-family: var(--mono); font-weight: 700; flex: 0 0 auto; }
.live-who { flex: 1 1 auto; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.zone-live-list { margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--border); }
.row-on { background: var(--blue-bg); }
#zone-table tbody tr, #zone-districts tbody tr { cursor: pointer; }

/* ── the cabinet: portfolios and approval ratings (Legislature tab) ─────── */
.cabi-row { border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px;
  margin-bottom: 10px; background: var(--surface); }
.cabi-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin-bottom: 6px; }
.cabi-title { font-weight: 600; font-size: 13px; }
.cabi-holder { font-size: 13px; color: var(--primary); font-weight: 600; }
.cabi-dept { font-size: 11px; margin-left: auto; }
.cabi-row .bar { margin: 4px 0 2px; }
.cabi-why { font-size: 11px; line-height: 1.5; }

.approval-board { display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.approval-card { border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px 14px; background: var(--bg); }
.approval-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.approval-label { font-weight: 600; font-size: 13px; }
.approval-score { margin-left: auto; font-family: var(--mono); font-weight: 700;
  font-size: 14px; }
.approval-card .track { height: 8px; background: var(--border); border-radius: 4px;
  overflow: hidden; }
.approval-card .fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
.approval-why { font-size: 11px; line-height: 1.5; margin-top: 6px; }
.approval-meta { font-size: 11px; margin-top: 4px; }

/* ── footer ──────────────────────────────────────────────────────────── */
footer{margin-top:32px;padding:16px 0;font-size:12px;color:var(--muted);
  border-top:1px solid var(--border);text-align:center}

/* ── responsive ──────────────────────────────────────────────────────── */
@media(max-width:768px){
  .topbar{height:auto;padding:12px 16px;flex-direction:column;align-items:flex-start}
  .topbar .right{width:100%;justify-content:space-between}
  nav{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .main-wrap{padding:14px 16px 32px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .card .num{font-size:22px}
  .box{padding:14px}
  table{font-size:12px}
  th,td{padding:6px 8px}
  .gate-card{padding:32px 24px}
}
@media(max-width:480px){.cards{grid-template-columns:1fr}}

/* ── FAMESHIRE TV: the 24/7 WebGL news desk ────────────────────────────── */
.tv-box .tv-frame{position:relative;width:100%;aspect-ratio:16/9;background:#0b0d14;
  border-radius:10px;overflow:hidden;border:1px solid #232a3d}
.tv-frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tv-frame canvas.tv-nogl{background:
  repeating-linear-gradient(45deg,#10131c 0 14px,#0d1018 14px 28px)}
/* The transmission lamp, top-right: red and pulsing while a segment is live. */
.tv-lamp{position:absolute;top:10px;right:12px;display:flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;background:rgba(8,10,16,.72);
  border:1px solid #2a3348;font:600 11px/1 'Noto Sans',Arial,sans-serif;color:#aab4cc}
.tv-lamp-dot{width:9px;height:9px;border-radius:50%;background:#5a6478}
.tv-lamp.live{color:#ffd9d0}
.tv-lamp.live .tv-lamp-dot{background:#ff3b30;animation:tv-pulse 1.1s ease-in-out infinite}
.tv-lamp.live .tv-lamp-label{color:#ff8f85}
@keyframes tv-pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* COMIC SPEECH BUBBLES: white cloud, thick ink border, cloud bumps on top, a
 * tail aimed at the speaker's head (tail is flipped per anchor). */
.tv-bubble{position:absolute;display:none;max-width:60%;min-width:170px;padding:14px 18px 15px;
  background:#fdfdfb;border:3.5px solid #16181d;border-radius:18px;
  font:600 15.5px/1.45 'Noto Sans',Arial,sans-serif;color:#191c24;
  box-shadow:0 5px 0 rgba(0,0,0,.35);z-index:3}
/* A line too long for the top lane drops a size rather than creeping down
   onto the anchor's face (the studio reserves the lane; this keeps it honest). */
.tv-bubble.compact{font:600 13.5px/1.38 'Noto Sans',Arial,sans-serif;
  padding:11px 14px 12px;max-width:66%}
.tv-bubble.show{display:block;animation:tv-pop .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes tv-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.tv-bubble .tv-bubble-bump{position:absolute;top:-9px;width:22px;height:22px;
  background:#fdfdfb;border:3px solid #16181d;border-radius:50%}
.tv-bubble .tv-bubble-bump.b1{left:14%}
.tv-bubble .tv-bubble-bump.b2{left:42%;top:-13px;width:26px;height:26px}
.tv-bubble .tv-bubble-bump.b3{right:14%}
.tv-bubble .tv-bubble-bump.b2{border-bottom-color:transparent}
/* The tail sits under the middle of the cloud so it points at the speaker,
   whose head is directly below the bubble's bottom edge. */
.tv-bubble .tv-bubble-tail{position:absolute;bottom:-15px;left:42%;width:0;height:0;
  border:10px solid transparent;border-top:17px solid #16181d}
.tv-bubble-b .tv-bubble-tail{left:auto;right:42%}
.tv-bubble.standby{opacity:.85;border-style:dashed}
.tv-bubble .tv-bubble-name{display:block;font:700 11.5px/1.3 'Noto Sans',Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;color:#8a6d1f;margin-bottom:4px}
.tv-bubble.standby .tv-bubble-name{color:#98a0b4}
.tv-bubble-b .tv-bubble-bump{border-bottom-color:transparent}
/* The ON AIR lamp outranks a bubble: a cloud may pass under it, never over. */
.tv-lamp{z-index:5}
/* The lower third: the city's own headlines crawling under the studio. */
.tv-lower{position:absolute;left:0;right:0;bottom:0;background:rgba(10,12,20,.86);
  border-top:2px solid #e8c46a;padding:8px 14px;white-space:nowrap;overflow:hidden;
  font:600 12.5px/1.3 'Noto Sans',Arial,sans-serif;color:#dfe5f2;z-index:2}
.tv-lower span{display:inline-block;padding-left:100%;animation:tv-crawl 38s linear infinite}
@keyframes tv-crawl{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.tv-meta{position:absolute;left:12px;bottom:38px;font:500 10.5px/1.3 'Noto Sans',
  Arial,sans-serif;color:#8a94ac;z-index:2;text-shadow:0 1px 2px #000}

/* ── Fameshire TV: two-column layout + THE DIAL BOARD ──────────────────── */
.tv-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);
  gap:16px;align-items:start}
@media(max-width:1100px){.tv-grid{grid-template-columns:1fr}}
.live-badge{background:#3a1210;color:#ff8f85;border:1px solid #6b2018}
.tv-sched-box h2{display:flex;align-items:baseline;gap:8px}
.tv-dial-stats{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.tv-chip{font:600 11px/1.4 'Noto Sans',Arial,sans-serif;padding:4px 10px;
  border-radius:999px;border:1px solid #2a3348;color:#c6cede;background:#141a28}
.tv-chip.chip-gov{border-color:#3d4d75;color:#a9c0ff}
.tv-chip.chip-family{border-color:#6b5518;color:#e8c46a}
.tv-chip.chip-desk{border-color:#274a3a;color:#7fd6ac}
.tv-chip.chip-studio{border-color:#4a3060;color:#c9a6ff}
.tv-schedule{display:flex;flex-direction:column;gap:3px;max-height:520px;
  overflow-y:auto;padding-right:4px}
.tv-dial-row{display:grid;grid-template-columns:44px 86px 1fr auto;gap:8px;
  align-items:center;padding:6px 8px;border-radius:8px;background:#121724;
  border:1px solid #1d2434}
.tv-dial-row.prime{background:#161322;border-color:#2c2444}
.tv-dial-row.onair{border-color:#8a3226;background:#1d1114}
.tv-dial-time{font:700 12px/1.2 Consolas,monospace;color:#dfe5f2}
.tv-dial-badge{font:700 9.5px/1.4 'Noto Sans',Arial,sans-serif;letter-spacing:.07em;
  text-align:center;padding:3px 6px;border-radius:6px}
.tvb-family{background:#241d0c;color:#e8c46a}
.tvb-studio{background:#1b1530;color:#c9a6ff}
.tvb-desk{background:#12201a;color:#7fd6ac}
.tv-dial-badge{min-width:74px}
.tvb-twitch{background:#221032;color:#e0b0ff}
.tv-chip.chip-twitch{border-color:#5a2a7a;color:#e0b0ff}
.tv-sound-btn{margin-left:auto;font:600 10.5px/1 'Noto Sans',Arial,sans-serif;
  padding:4px 10px;border-radius:999px;border:1px solid #3a4a6a;color:#c6cede;
  background:#141a28;cursor:pointer}
.tv-sound-btn:hover{border-color:#e8c46a;color:#f2e2b8}
.tv-box h2{display:flex;align-items:center;gap:8px}
.tvb-now{background:#3a1210;color:#ff8f85;animation:tv-pulse 1.1s ease-in-out infinite}
.tv-dial-who{font:600 12px/1.35 'Noto Sans',Arial,sans-serif;color:#dfe5f2;
  grid-column:1 / 3}
.tv-dial-show{font:400 11px/1.35 'Noto Sans',Arial,sans-serif;color:#8a94ac;
  grid-column:3 / 5;text-align:right}
.tv-dial-price{font:700 12px/1.2 Consolas,monospace;color:#9fd6ac}
.tv-dial-price.zero{color:#5a6478}
.tv-dial-aired{margin-top:6px}

/* ── THE TWITCH DESK STRIP: the live chart the anchors are reading ──────── */
.tv-twitch{margin-top:10px;border:1px solid #2a2a45;border-radius:10px;
  background:linear-gradient(180deg,#171226,#12101c);padding:9px 11px}
.tv-twitch-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font:700 10.5px/1.3 'Noto Sans',Arial,sans-serif;letter-spacing:.10em;
  color:#c9a6ff;text-transform:uppercase}
.tv-twitch-rank{font:700 11.5px/1.3 'Noto Sans',Arial,sans-serif;
  letter-spacing:0;text-transform:none;color:#dfe5f2}
.tv-twitch-rank b{color:#e8c46a}
.tv-twitch-src{margin-left:auto;font:500 10px/1.3 'Noto Sans',Arial,sans-serif;
  letter-spacing:0;text-transform:none;color:#77839c}
.tv-str-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.tv-str{display:flex;flex-direction:column;gap:1px;padding:5px 9px;
  border-radius:8px;background:#1b1530;border:1px solid #33245a;max-width:230px}
.tv-str.lead{background:#241040;border-color:#5a2a7a}
.tv-str b{font:700 12px/1.2 'Noto Sans',Arial,sans-serif;color:#f2e2ff}
.tv-str i{font:600 10.5px/1.2 'Noto Sans',Arial,sans-serif;color:#e8c46a;
  font-style:normal}
.tv-str u{font:400 10px/1.3 'Noto Sans',Arial,sans-serif;color:#98a0b4;
  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-twitch-others{margin-top:6px;font:500 10.5px/1.4 'Noto Sans',Arial,sans-serif;
  color:#8a94ac}

/* -- SITE-WIDE POLISH (redesign in safe overrides) -- */
header{position:sticky;top:0;z-index:50;background:rgba(10,12,20,.88);
  backdrop-filter:blur(8px);border-bottom:1px solid #232a3d}
nav .tab{border-radius:999px;padding:6px 13px;border:1px solid transparent}
nav .tab.active{border-color:#e8c46a;background:#1c2133}
nav .tab:not(.active):hover{background:#161b2a;border-color:#2a3348}
.box{border:1px solid #1d2434;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.card{transition:transform .12s ease,border-color .12s ease}
.card:hover{transform:translateY(-2px);border-color:#2a3348}
tbody tr:hover td{background:#141a28}
button.primary{background:#e8c46a;color:#191c24;border-color:#e8c46a}
button.primary:hover{filter:brightness(1.08)}
footer{color:#6b7488}