:root {
  --bg:#10141a; --panel:#171c24; --line:#262e3a; --ink:#e8edf4;
  --muted:#8b98ab; --accent:#f5a623; --warn:#e5484d; --good:#46a758;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.topbar { display:flex; align-items:center; gap:1.5rem; padding:.75rem 1.25rem;
  background:var(--panel); border-bottom:1px solid var(--line); }
.brand { font-weight:700; letter-spacing:.02em; }
.topbar nav { display:flex; gap:1rem; }
.topbar .who { margin-left:auto; display:flex; align-items:center; gap:.75rem;
  color:var(--muted); font-size:.9rem; }
main { max-width:72rem; margin:0 auto; padding:1.5rem 1.25rem 4rem; }
h1 { font-size:1.5rem; margin:0 0 .25rem; }
.muted { color:var(--muted); margin:0 0 1rem; }
.warn { color:var(--warn); }
table.grid { width:100%; border-collapse:collapse; font-size:.93rem; }
table.grid th { text-align:left; color:var(--muted); font-weight:600; padding:.5rem .6rem;
  border-bottom:1px solid var(--line); }
table.grid td { padding:.5rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
table.grid td.num, table.grid th.num { text-align:right; font-variant-numeric:tabular-nums; }
table.grid tr.voided td { opacity:.5; text-decoration:line-through; }
.rung { display:inline-block; background:var(--bg); border:1px solid var(--line);
  border-radius:4px; padding:.1rem .4rem; margin:0 .25rem .25rem 0; font-size:.8rem;
  font-variant-numeric:tabular-nums; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:1.25rem; margin-top:1.5rem; max-width:26rem; }
.card label { display:block; margin:.75rem 0; color:var(--muted); font-size:.85rem; }
input { width:100%; margin-top:.3rem; padding:.5rem .6rem; background:var(--bg);
  color:var(--ink); border:1px solid var(--line); border-radius:6px; font:inherit; }
button { padding:.5rem .9rem; background:var(--accent); color:#10141a; border:0;
  border-radius:6px; font:inherit; font-weight:600; cursor:pointer; }
.login { margin:4rem auto; }
.error { color:var(--warn); font-size:.9rem; }
.kpis { display:flex; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:8px; overflow:hidden; margin:1rem 0 1.5rem; flex-wrap:wrap; }
.kpi { flex:1 1 8rem; background:var(--panel); padding:.75rem 1rem;
  display:flex; flex-direction:column; gap:.15rem; }
.kpi span { color:var(--muted); font-size:.75rem; text-transform:uppercase;
  letter-spacing:.05em; }
.kpi strong { font-size:1.35rem; font-variant-numeric:tabular-nums; }
select { width:100%; margin-top:.3rem; padding:.5rem .6rem; background:var(--bg);
  color:var(--ink); border:1px solid var(--line); border-radius:6px; font:inherit; }
.daterange { display:flex; gap:.75rem; align-items:flex-end; margin:0 0 1.25rem;
  flex-wrap:wrap; }
.daterange label { color:var(--muted); font-size:.75rem; text-transform:uppercase;
  letter-spacing:.05em; }
.daterange input { width:auto; }
table.grid tfoot th { text-align:left; padding:.5rem .6rem; border-top:2px solid var(--line);
  font-variant-numeric:tabular-nums; }
table.grid tfoot th.num { text-align:right; }
.kpi em { font-style:normal; font-size:.72rem; color:var(--muted); }
.kpi em.down { color:var(--warn); }
.kpi em.up { color:var(--good); }
.section-break { margin-top:2.5rem; }
/* Daily total bar: one hue, values live in the table's ink — the bar only
   carries magnitude. Left edge sits on the baseline, data end rounded. */
table.daily td.barcell { width:22%; min-width:8rem; }
table.daily .bar { display:block; height:8px; background:var(--accent);
  border-radius:0 4px 4px 0; }