:root{
  --bg:#0a0c10; --panel:#0d1117; --card:#10161d; --border:#1b2633;
  --accent:#D17A00; --accent2:#00ff9d; --text:#c9d1d9; --muted:#6b7a8d;
  --pos:#00ff9d; --neg:#ff5252;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Abel,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{background:
  radial-gradient(1200px 600px at 85% -10%,rgba(209,122,0,.06),transparent 60%),
  radial-gradient(900px 500px at -10% 110%,rgba(0,255,157,.035),transparent 60%);
  min-height:100vh}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:1.4rem 1.2rem 4rem}

/* header */
.phead{padding:1.2rem 0 1.6rem;border-bottom:1px solid var(--border);margin-bottom:1.6rem}
.back{color:var(--muted);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase}
.back:hover{color:var(--accent)}
.phead h1{font-size:2.6rem;letter-spacing:.04em;margin:.5rem 0 .2rem;font-weight:400}
.sub{color:var(--text);opacity:.8;margin:.1rem 0;font-size:1.05rem}
.period{color:var(--muted);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin:.5rem 0 0}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:1.8rem}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:6px;
  padding:.9rem 1rem;box-shadow:0 8px 24px -14px rgba(0,0,0,.6)}
.kpi-v{font-size:1.7rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.kpi-l{color:var(--muted);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-top:.25rem}

/* blocks */
.block{background:var(--panel);border:1px solid var(--border);border-radius:6px;
  padding:1.1rem 1.2rem 1.3rem;margin-bottom:1.1rem}
.block h2{font-size:.86rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  font-weight:400;margin:0 0 1rem;border-left:3px solid var(--accent);padding-left:.6rem}
.h2sub{opacity:.6;letter-spacing:.1em}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.scroll{overflow-x:auto}

/* charts */
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--border);stroke-width:1;opacity:.5}
.chart .zero{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.chart .ylab{fill:var(--muted);font-size:11px;text-anchor:end}
.chart .xlab{fill:var(--muted);font-size:11px;text-anchor:middle}

/* metric tables */
.metrics{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.metrics th{text-align:left;color:var(--muted);font-weight:400;font-size:.9rem;
  padding:.42rem .5rem;border-bottom:1px solid var(--border)}
.metrics td{text-align:right;padding:.42rem .5rem;border-bottom:1px solid var(--border);font-size:.98rem}
.metrics.roll td,.metrics.dd td{text-align:center}
.metrics.roll thead th,.metrics.dd thead th{text-align:center;text-transform:uppercase;
  font-size:.74rem;letter-spacing:.12em}
.metrics.dd td:first-child{text-align:left}

/* heatmaps */
.heat{border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.8rem}
.heat th{color:var(--muted);font-weight:400;padding:.3rem .45rem;font-size:.74rem;
  letter-spacing:.06em;text-transform:uppercase}
.heat tbody th{text-align:right;padding-right:.7rem}
.hm{padding:.34rem .5rem;text-align:center;border:1px solid var(--bg);
  border-radius:3px;min-width:48px;color:#0a0c10;font-weight:400}
.hm.empty{background:var(--panel)!important}
.hm.yr{color:#0a0c10}

.daily{border-collapse:separate;border-spacing:1px;margin-bottom:.4rem}
.dyear-h{color:var(--muted);font-size:.78rem;letter-spacing:.14em;margin:.6rem 0 .3rem}
.dc{width:12px;height:12px;padding:0;border-radius:2px;position:relative}
.dc.empty{background:var(--panel)!important}
.dc .t{display:none;position:absolute;z-index:5;bottom:14px;left:50%;transform:translateX(-50%);
  white-space:nowrap;background:#000;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px}
.dc:hover .t{display:block}
.dlbl{color:var(--muted);font-size:.7rem;text-align:right;padding-right:.4rem}
.dnum{color:var(--muted);font-size:.6rem;text-align:center}

/* values */
.pos{color:var(--pos)} .neg{color:var(--neg)} .accent{color:var(--accent)}

/* footer */
.foot{margin-top:2rem;color:var(--muted);font-size:.8rem;line-height:1.5}
.foot .mark{letter-spacing:.3em;margin-top:1rem;opacity:.6}

/* landing */
.land{max-width:980px;margin:0 auto;padding:5vh 1.2rem 4rem;text-align:center}
.land-top{color:var(--muted);letter-spacing:.4em;font-size:1rem;text-transform:uppercase}
.land-title{font-size:3.4rem;letter-spacing:.18em;margin:.4rem 0 .3rem;font-weight:400}
.land-sub{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:.84rem;margin-bottom:2.6rem}
.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;text-align:left}
.scard{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:1.4rem 1.3rem;
  transition:border-color .16s,transform .16s,box-shadow .16s}
.scard:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 16px 36px -18px rgba(0,0,0,.7)}
.scard-name{font-size:1.5rem;letter-spacing:.06em;margin-bottom:.4rem}
.scard-desc{color:var(--muted);font-size:.86rem;line-height:1.45;min-height:3.4em}
.scard-stats{display:flex;flex-direction:column;gap:.25rem;margin:1rem 0 .8rem;
  font-size:.92rem;font-variant-numeric:tabular-nums}
.scard-stats b{font-size:1.05rem}
.scard-period{color:var(--muted);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  border-top:1px solid var(--border);padding-top:.7rem}
.land-foot{text-align:center}

@media(max-width:820px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .cols,.scards{grid-template-columns:1fr}
  .phead h1{font-size:2rem}
}