:root {
  --bg: #f5f4f0; --surface: #ffffff; --surface2: #f0ede8;
  --border: #e2ddd7; --border2: #ccc8c2;
  --ink: #1a1816; --ink2: #4a4642; --ink3: #7a7470;
  --green: #1a7a4a; --green-bg: #edf7f1;
  --blue: #1a4a8a; --blue-bg: #edf2fa;
  --red: #a2331f; --red-bg: #faeeed;
  --amber: #7a5a10; --amber-bg: #fdf7e8;
  --bar: #1a4a8a; --bar-soft: rgba(26,74,138,0.14); --bar-prev: #c3cedf;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; background: var(--bg); color: var(--ink); font-size: 14px; }
button, input, select { font: inherit; }

.header { background: var(--ink); color: #f5f4f0; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.header-left { display: flex; align-items: center; gap: 16px; }
.logo { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 700; }
.hd-divider { width: 1px; height: 16px; background: rgba(245,244,240,0.25); }
.hd-title { font-size: 13px; color: rgba(245,244,240,0.7); }
.hd-right { display: flex; gap: 10px; align-items: center; }
.hd-pill { font-family: var(--mono); font-size: 11px; padding: 4px 10px; border-radius: 3px; border: 1px solid rgba(245,244,240,0.25); color: rgba(245,244,240,0.8); }
.hd-btn { font-family: var(--mono); font-size: 11px; padding: 4px 12px; border-radius: 3px; border: 1px solid rgba(245,244,240,0.45); background: transparent; color: #f5f4f0; cursor: pointer; }
.hd-btn:hover { background: rgba(245,244,240,0.1); }

.stale { background: var(--amber-bg); color: var(--amber); border-bottom: 1px solid #ecd9a5; padding: 8px 32px; font-size: 13px; }

.controls { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 32px; display: flex; gap: 12px 24px; align-items: center; flex-wrap: wrap; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.presets button { border: 1px solid var(--border2); background: var(--surface); color: var(--ink2); border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.presets button:hover { border-color: var(--ink3); }
.presets button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.custom { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink2); }
.custom input[type=date] { border: 1px solid var(--border2); border-radius: 4px; padding: 4px 6px; font-size: 12px; background: var(--surface); }
.toggle { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.range-summary { font-size: 12px; color: var(--ink3); margin-left: auto; }

.main { padding: 24px 32px 48px; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.loading { color: var(--ink3); }
.section-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.section-h h2 { font-family: 'Syne', sans-serif; font-size: 17px; margin: 0; }
.section-h .desc { font-size: 12px; color: var(--ink3); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.card h3 { font-size: 14px; margin: 0 0 4px; }
.card .sub { font-size: 12px; color: var(--ink3); margin-bottom: 12px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi .label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink2); }
.kpi .value { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.kpi .line { font-size: 12px; color: var(--ink3); font-family: var(--mono); }
.delta { font-family: var(--mono); font-size: 12px; font-weight: 500; padding: 1px 6px; border-radius: 3px; }
.delta.up { color: var(--green); background: var(--green-bg); }
.delta.down { color: var(--red); background: var(--red-bg); }
.delta.flat { color: var(--ink2); background: var(--surface2); }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: right; font-size: 11px; font-weight: 600; color: var(--ink3); letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--surface2); font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; font-family: 'IBM Plex Sans', sans-serif; }
td.l, th.l { text-align: left; }
tr.total td { font-weight: 600; border-top: 1px solid var(--border2); }
tr.muted td { color: var(--ink3); }
.table-wrap { overflow-x: auto; }
th.sortable { cursor: pointer; } th.sortable:hover { color: var(--ink); }
.pill { font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border-radius: 3px; }
.pill.high { background: var(--green-bg); color: var(--green); }
.pill.med { background: var(--amber-bg); color: var(--amber); }
.pill.low { background: var(--red-bg); color: var(--red); }
.pill.vol { background: var(--surface2); color: var(--ink3); }
.tag { font-size: 10px; font-family: var(--mono); color: var(--ink3); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; margin-left: 4px; }

/* Bars */
.hbar { display: grid; grid-template-columns: 180px 1fr 70px; gap: 10px; align-items: center; margin: 5px 0; font-size: 12.5px; }
.hbar .track { height: 10px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--bar); border-radius: 0 4px 4px 0; }
.hbar .n { font-family: var(--mono); text-align: right; color: var(--ink2); }
.hbar.zero { opacity: 0.45; }
.cellbar { display: inline-block; vertical-align: middle; height: 6px; background: var(--bar-soft); border-radius: 0 3px 3px 0; margin-right: 6px; }

/* Trend chart */
.chart-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.chart-top select { border: 1px solid var(--border2); border-radius: 4px; padding: 4px 6px; background: var(--surface); font-size: 12px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
svg.trend { width: 100%; height: 240px; display: block; }
svg.trend .grid line { stroke: var(--border); stroke-width: 1; }
svg.trend text { font-family: var(--mono); font-size: 10px; fill: var(--ink3); }
svg.trend rect.b { fill: var(--bar); }
svg.trend rect.p { fill: var(--bar-prev); }
svg.trend g.col:hover rect.b { fill: #0f3060; }
svg.trend rect.hit { fill: transparent; }

.tooltip { position: fixed; z-index: 20; pointer-events: none; background: var(--ink); color: #fff; font-size: 12px; padding: 7px 9px; border-radius: 5px; line-height: 1.5; max-width: 260px; }
.tooltip b { font-family: var(--mono); font-weight: 500; }

/* Notes */
.note { font-size: 12px; line-height: 1.55; color: var(--ink2); background: var(--surface2); border-radius: 5px; padding: 9px 11px; margin-top: 12px; }
.note.warn { background: var(--amber-bg); color: var(--amber); }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
.tabs button { border: 1px solid var(--border2); background: var(--surface); border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.tabs input { margin-left: auto; border: 1px solid var(--border2); border-radius: 4px; padding: 4px 8px; font-size: 12px; min-width: 200px; }

.footer { max-width: 1400px; margin: 0 auto; padding: 0 32px 40px; font-size: 12px; color: var(--ink3); line-height: 1.6; }
.footer details { margin-top: 10px; }
.footer a { color: var(--ink2); }

@media (max-width: 720px) {
  .header, .controls, .main, .footer { padding-left: 16px; padding-right: 16px; }
  .grid2 { grid-template-columns: 1fr; }
  .hbar { grid-template-columns: 120px 1fr 56px; }
  .range-summary { margin-left: 0; }
  .controls { position: static; }
}