:root{
  --bg:#080a0e; --panel:#0f131a; --panel2:#131925; --line:#212936;
  --text:#e9eef6; --dim:#8b97a8; --dimmer:#5d6776;
  --amber:#f0b429; --amber-dim:#8a6a1f; --red:#ff5d5d; --green:#3ecf8e; --blue:#5aa9ff;
  --mono:ui-monospace,"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(240,180,41,.09), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(90,169,255,.06), transparent 55%),
    var(--bg);
  color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px; z-index:0;
}
.wrap,main{position:relative; z-index:1}
main{max-width:1180px; margin:0 auto; padding:0 22px 72px}

.top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 26px; border-bottom:1px solid var(--line);
  background:rgba(8,10,14,.82); backdrop-filter:blur(10px);
}
.brand{font-weight:700; letter-spacing:.16em; font-size:12.5px}
.brand .slash{color:var(--amber); margin:0 8px}
.brand .dim{color:var(--dim); font-weight:500; letter-spacing:.04em; text-transform:none}
.live{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; color:var(--dim); letter-spacing:.04em}
.dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(62,207,142,.6); animation:pulse 2.2s infinite}
.dot.bad{background:var(--red); animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(62,207,142,.5)}70%{box-shadow:0 0 0 9px rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}

.hero{display:grid; grid-template-columns:1fr 300px; gap:26px; align-items:start; padding:42px 0 26px}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--dim); text-transform:uppercase}
h1{margin:10px 0 12px; font-size:clamp(28px,4.2vw,46px); line-height:1.08; letter-spacing:-.02em; font-weight:720}
.sub{color:#c3ccda; max-width:62ch; margin:0 0 14px}
.meta{display:flex; flex-wrap:wrap; gap:8px}
.meta .chip{font-family:var(--mono); font-size:11px; padding:4px 9px; border:1px solid var(--line); border-radius:999px; color:var(--dim); background:var(--panel)}

.status-card{border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:12px; padding:16px 18px; background:linear-gradient(180deg,var(--panel2),var(--panel))}
.status-card.active{border-left-color:var(--red)}
.status-card.clear{border-left-color:var(--green)}
.status-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--dimmer)}
.status-value{font-size:20px; font-weight:700; letter-spacing:.02em; margin:6px 0 6px; line-height:1.2}
.status-note{font-size:12.5px; color:var(--dim)}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:18px}
.kpi{border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--panel)}
.kpi-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dimmer)}
.kpi-value{font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin-top:6px}
.kpi-value.small{font-size:17px; font-weight:600; font-family:var(--mono)}
.kpi-note{font-size:11.5px; color:var(--dim); margin-top:2px}

.grid{display:grid; grid-template-columns:1.15fr .85fr; gap:16px; margin-bottom:16px}
.card{border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:18px 20px; margin-bottom:16px}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px}
h2{margin:0; font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:650; color:#cfd8e5}
.src{font-family:var(--mono); font-size:10.5px; color:var(--dimmer); letter-spacing:.06em}

.board h3{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin:16px 0 8px}
.board h3:first-child{margin-top:0}
table{width:100%; border-collapse:collapse; font-size:13.2px}
th{text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dimmer); font-weight:600; padding:0 10px 8px 0; border-bottom:1px solid var(--line)}
td{padding:9px 10px 9px 0; border-bottom:1px solid rgba(33,41,54,.6); vertical-align:top}
tr:last-child td{border-bottom:none}
td.mono,.mono{font-family:var(--mono); font-size:12px}
.table-wrap{overflow-x:auto}

.chip{display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; padding:2px 7px; border-radius:5px; border:1px solid; white-space:nowrap}
.chip.conf{color:var(--green); border-color:rgba(62,207,142,.35); background:rgba(62,207,142,.08)}
.chip.rep{color:var(--amber); border-color:rgba(240,180,41,.35); background:rgba(240,180,41,.08)}
.chip.unc{color:var(--dim); border-color:var(--line); background:rgba(255,255,255,.03)}
.chip.live{color:var(--red); border-color:rgba(255,93,93,.4); background:rgba(255,93,93,.1)}
.chip.ok{color:var(--green); border-color:rgba(62,207,142,.35); background:rgba(62,207,142,.08)}
.chip.warn{color:var(--amber); border-color:rgba(240,180,41,.35); background:rgba(240,180,41,.08)}

.chart-wrap{margin:6px 0 4px}
#spark{width:100%; height:150px; display:block}
.chart-meta{font-family:var(--mono); font-size:11px; color:var(--dim); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.hint{font-size:12.2px; color:var(--dim); margin:12px 0 0; max-width:80ch}

.stack{display:flex; flex-direction:column; gap:10px}
.item{border:1px solid var(--line); border-radius:10px; padding:13px 15px; background:var(--panel2)}
.item-top{display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap}
.item-title{font-weight:650; font-size:14.5px}
.item-date{font-family:var(--mono); font-size:10.5px; color:var(--dimmer); letter-spacing:.06em}
.item-body{font-size:12.8px; color:#bcc7d6; margin-top:6px}
.item-why{font-size:12.8px; color:var(--amber); margin-top:7px}
.item-src{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}
.item-src a{font-family:var(--mono); font-size:10.5px; color:var(--blue); text-decoration:none; border-bottom:1px dotted rgba(90,169,255,.4)}
.item-src a:hover{color:#9cc9ff}

a{color:var(--blue)}

.brief pre{white-space:pre-wrap; font-family:var(--mono); font-size:12.2px; line-height:1.62; color:#cfd8e5; background:#0b0f15; border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:0}
.btn{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); background:rgba(240,180,41,.08); border:1px solid rgba(240,180,41,.35); border-radius:7px; padding:7px 11px; cursor:pointer}
.btn:hover{background:rgba(240,180,41,.16)}
.btn.done{color:var(--green); border-color:rgba(62,207,142,.4); background:rgba(62,207,142,.1)}

footer{border-top:1px solid var(--line); margin-top:26px; padding-top:18px; color:var(--dim); font-size:12px}
footer p{margin:0 0 9px; max-width:95ch}
.fine{color:var(--dimmer); font-family:var(--mono); font-size:10.5px; letter-spacing:.06em}
.loading{color:var(--dim); font-family:var(--mono); font-size:12px; padding:8px 0}
.err{color:var(--red); font-family:var(--mono); font-size:11.5px}

@media (max-width:960px){
  .hero{grid-template-columns:1fr; gap:18px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  main{padding:0 14px 54px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi-value{font-size:24px}
  .top{padding:12px 14px}
  .brand .dim{display:none}
}