:root{
  --bg:#070a0f; --panel:#0c1119; --panel2:#111826; --line:#1c2634; --edge:#243040;
  --ink:#dbe4ef; --dim:#7d8a9c; --faint:#4b5768;
  --green:#35d07f; --amber:#f5c542; --red:#ff5360; --blue:#5aa9ff; --grey:#5a6676;
  --mono:ui-monospace,'SF Mono','JetBrains Mono','Cascadia Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--mono); font-size:13px; line-height:1.45;
  padding:0 0 60px;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px; background-position:-1px -1px;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* header + nav */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0 12px;flex-wrap:wrap}
.brand{font-size:17px;font-weight:700;letter-spacing:3px}
.brand .sub{display:block;font-size:10px;letter-spacing:2px;color:var(--dim);font-weight:400;margin-top:3px}
.nav{display:inline-flex;border:1px solid var(--edge);border-radius:8px;overflow:hidden}
.nav a{color:var(--dim);padding:8px 16px;font-size:12px;letter-spacing:1px;border-right:1px solid var(--edge)}
.nav a:last-child{border-right:0}
.nav a.on{background:var(--panel2);color:var(--ink)}
.nav a:hover{text-decoration:none;color:var(--ink)}
.updated{font-size:11px;color:var(--dim);text-align:right}
.updated b{color:var(--ink)}

/* modules */
.mod{background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:14px;position:relative;overflow:hidden}
.mod::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),transparent 60%);opacity:.55}
.mod.green::before{background:linear-gradient(90deg,var(--green),transparent 60%)}
.mod.red::before{background:linear-gradient(90deg,var(--red),transparent 60%)}
.mod.amber::before{background:linear-gradient(90deg,var(--amber),transparent 60%)}
.mod.grey::before{background:linear-gradient(90deg,var(--grey),transparent 60%)}
.mod-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;
  letter-spacing:1.5px;color:var(--dim);text-transform:uppercase;margin-bottom:10px}
.mod-h .ts{font-size:10px;color:var(--faint);text-transform:none;letter-spacing:.5px}

/* hero dials */
.hero{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 16px}
@media(max-width:820px){.hero{grid-template-columns:1fr}}
.dial .big{font-size:34px;font-weight:700;letter-spacing:-.5px;line-height:1.05}
.dial .band{display:inline-block;font-size:11px;letter-spacing:1.5px;padding:2px 9px;border-radius:5px;margin-left:8px;vertical-align:middle}
.dial .copy{font-size:12.5px;color:var(--dim);margin-top:9px;min-height:34px}
.dial.green .big,.b-green{color:var(--green)} .dial.red .big,.b-red{color:var(--red)}
.dial.amber .big,.b-amber{color:var(--amber)} .dial.blue .big,.b-blue{color:var(--blue)}
.dial.grey .big,.b-grey{color:var(--grey)}
.band.green{background:rgba(53,208,127,.14);color:var(--green)}
.band.amber{background:rgba(245,197,66,.15);color:var(--amber)}
.band.red{background:rgba(255,83,96,.15);color:var(--red)}
.band.grey{background:rgba(90,102,118,.18);color:var(--dim)}
.arrow{font-size:20px;vertical-align:middle;margin-left:6px}
.arrow.up{color:var(--red)} .arrow.down{color:var(--green)} .arrow.flat{color:var(--dim)}
.flag{display:inline-block;font-size:10px;letter-spacing:1px;color:#160a0c;background:var(--amber);
  padding:2px 7px;border-radius:4px;margin-top:8px}

/* alerts */
.alerts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
@media(max-width:820px){.alerts{grid-template-columns:1fr}}
.alert{border:1px solid var(--edge);border-left-width:3px;border-radius:8px;padding:10px 12px;background:var(--panel)}
.alert.green{border-left-color:var(--green)} .alert.amber{border-left-color:var(--amber)}
.alert.red{border-left-color:var(--red)} .alert.blue{border-left-color:var(--blue)}
.alert.off{opacity:.4}
.alert .t{font-size:12.5px;font-weight:700;letter-spacing:.5px}
.alert .m{font-size:12px;color:var(--dim);margin-top:3px}
.alert .st{font-size:9px;letter-spacing:1px;float:right;color:var(--faint)}

/* layers */
.layers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:820px){.layers{grid-template-columns:1fr}}
.qrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;
  padding:7px 0;border-top:1px solid var(--line)}
.qrow:first-of-type{border-top:0}
.qrow .lbl{color:var(--ink)} .qrow .lbl .sym{color:var(--faint);font-size:10px;margin-left:6px}
.qrow .px{text-align:right;color:var(--ink)}
.qrow .chg{text-align:right;min-width:74px}
.up-txt{color:var(--red)} .dn-txt{color:var(--green)} .fl-txt{color:var(--dim)}
.lev{font-size:20px;font-weight:700}
.note{font-size:11.5px;color:var(--dim);margin-top:6px}

/* news / reddit */
.hl{padding:8px 0;border-top:1px solid var(--line)}
.hl:first-child{border-top:0}
.hl a{color:var(--ink)} .hl a:hover{color:var(--blue)}
.hl .meta{font-size:10.5px;color:var(--faint);margin-top:3px}
.bias{font-size:9px;letter-spacing:1px;padding:1px 6px;border-radius:4px;margin-right:6px}
.bias.escalation{background:rgba(255,83,96,.15);color:var(--red)}
.bias.deescalation{background:rgba(53,208,127,.14);color:var(--green)}
.bias.mixed{background:rgba(245,197,66,.15);color:var(--amber)}
.bias.neutral{background:rgba(90,102,118,.16);color:var(--dim)}
.wkey{color:var(--amber);font-size:10px}
.tilt{display:flex;gap:16px;font-size:11px;color:var(--dim);margin-bottom:8px}
.tilt b{color:var(--ink)}

/* stale */
.stale{opacity:.5}
.stale-tag{font-size:9px;letter-spacing:1px;color:#160a0c;background:var(--amber);padding:1px 6px;border-radius:4px;margin-left:6px}

/* two-column body */
.cols{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.stack>*{margin-bottom:14px} .stack>*:last-child{margin-bottom:0}

.foot{color:var(--faint);font-size:11px;margin-top:26px;border-top:1px solid var(--line);padding-top:12px;line-height:1.6}
.err{color:var(--amber);font-size:12px;padding:8px 0}

/* correction monitor (page 2) */
.summary{font-size:15px;padding:11px 14px;border-left:3px solid var(--blue);background:var(--panel2);border-radius:0 8px 8px 0;margin:6px 0 16px}
.comp{display:grid;grid-template-columns:290px 1fr;gap:16px;margin-bottom:16px;align-items:center}
@media(max-width:760px){.comp{grid-template-columns:1fr}}
.gaugewrap{text-align:center}
.gauge{width:100%;max-width:260px}
.g-score{font-size:44px;font-weight:700;text-anchor:middle;font-family:var(--mono);dominant-baseline:middle}
.g-tick{fill:#46505c;font-size:11px;font-family:var(--mono)}
.band-lbl{font-size:15px;letter-spacing:2px;font-weight:700;margin-top:2px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.tile{background:var(--panel);border:1px solid var(--edge);border-left-width:4px;border-radius:9px;padding:11px 12px}
.tile.GREEN{border-left-color:var(--green)} .tile.YELLOW{border-left-color:var(--amber)}
.tile.RED{border-left-color:var(--red)} .tile.GRAY{border-left-color:var(--grey)}
.tile .tl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);display:flex;justify-content:space-between;align-items:center;gap:6px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.dot.GREEN{background:var(--green)} .dot.YELLOW{background:var(--amber)} .dot.RED{background:var(--red)} .dot.GRAY{background:var(--grey)}
.tile .tv{font-size:20px;font-weight:700;margin:4px 0}
.tile .tf{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--faint);margin-top:4px}
.froth-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{border:1px solid var(--edge);border-radius:6px;padding:3px 8px;font-size:12px;color:var(--ink)}
.chip b{color:var(--amber)}
.sect{letter-spacing:2px;font-size:11px;color:var(--dim);margin:20px 0 10px;border-bottom:1px solid var(--line);padding-bottom:6px;text-transform:uppercase}
