:root{
  --ink:#1a2e1a;--ink2:#2d4a2d;--accent:#16a34a;--accent-d:#15803d;
  --accent-glow:rgba(22,163,74,.25);--accent-light:rgba(22,163,74,.08);
  --bg:#f0faf0;--card:#ffffff;--line:#d4e8d4;--muted:#5c7a5c;
  --ok:#127a3d;--okbg:#e7f5ec;--err:#b3261e;--errbg:#fdecea;
  --radius:12px;--shadow:0 1px 3px rgba(0,0,0,.06),0 6px 20px rgba(0,0,0,.04);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.5;
  min-height:100vh;-webkit-font-smoothing:antialiased}

/* ── Topbar ────────────────────────────────────────────── */
.topbar{background:#1a2e1a;color:#fff;display:flex;align-items:center;gap:14px;
  padding:12px 22px;box-shadow:var(--shadow);position:sticky;top:0;z-index:20}
.topbar .brand{font-weight:800;font-size:15px;letter-spacing:.02em}
.topbar .brand span{color:var(--accent)}
.topbar .nav{display:flex;gap:4px;margin-left:20px}
.topbar .nav button{background:none;border:none;border-bottom:2px solid transparent;
  padding:8px 16px;margin-bottom:-2px;color:#b8d4b8;font-weight:600;font-size:13px;
  cursor:pointer;transition:.15s}
.topbar .nav button:hover{color:#fff}
.topbar .nav button.active{color:var(--accent);border-bottom-color:var(--accent)}
.topbar .ts{margin-left:auto;font-size:11px;color:#7a9a7a}

.filter-toggle{display:flex;gap:2px;background:rgba(255,255,255,.1);border-radius:8px;padding:2px;margin-left:12px}
.ftbtn{background:none;border:none;padding:6px 14px;font-size:12px;font-weight:700;color:#b8d4b8;
  border-radius:6px;cursor:pointer;transition:.15s;white-space:nowrap}
.ftbtn:hover{color:#fff}
.ftbtn.active{background:var(--accent);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}

.wrap{max-width:1200px;margin:0 auto;padding:24px 18px}

/* ── Tiles ─────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow)}
.tile-lab{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.tile-val{font-size:24px;font-weight:800;color:var(--ink);margin-top:4px;font-variant-numeric:tabular-nums}
.tile-val.accent{color:var(--accent)}
.tile-sub{font-size:12px;color:var(--muted);margin-top:2px}

/* ── Cards ─────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px;margin-bottom:22px}
.card h2{font-size:17px;font-weight:700;margin:0 0 16px;padding-bottom:10px;
  border-bottom:2px solid var(--line);display:flex;align-items:center;gap:10px}
.card h2 .count{font-size:11px;font-weight:800;color:#fff;background:var(--accent);
  padding:2px 10px;border-radius:12px}

/* ── Table ─────────────────────────────────────────────── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);padding:9px 10px;background:#f4faf4;border-bottom:1px solid var(--line)}
tbody td{padding:10px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--accent-light)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.muted{color:var(--muted);font-size:13px}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}

/* ── Bar chart ─────────────────────────────────────────── */
.chart-container{position:relative;height:280px;display:flex;align-items:flex-end;gap:4px;
  padding:20px 0 30px;border-bottom:2px solid var(--line)}
.chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.chart-bar{width:100%;max-width:36px;background:linear-gradient(180deg,var(--accent),#22c55e);
  border-radius:4px 4px 0 0;transition:height .6s cubic-bezier(.4,0,.2,1);position:relative;cursor:default}
.chart-bar:hover{filter:brightness(1.15)}
.chart-bar .tip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:4px 8px;border-radius:6px;font-size:11px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:.2s;margin-bottom:4px}
.chart-bar:hover .tip{opacity:1}
.chart-label{font-size:10px;color:var(--muted);margin-top:6px;transform:rotate(-45deg);
  transform-origin:top center;white-space:nowrap}

/* ── Horizontal bars ───────────────────────────────────── */
.hbar-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(212,232,212,.5)}
.hbar-row:last-child{border-bottom:none}
.hbar-name{width:200px;min-width:120px;font-size:13px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hbar-track{flex:1;height:28px;background:var(--accent-light);border-radius:6px;overflow:hidden;position:relative}
.hbar-fill{height:100%;background:linear-gradient(90deg,var(--accent),#22c55e);border-radius:6px;
  transition:width .8s cubic-bezier(.4,0,.2,1);min-width:2px}
.hbar-val{width:130px;text-align:right;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.hbar-count{width:50px;text-align:right;font-size:12px;color:var(--muted)}

/* ── Tabs ──────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin:0 0 16px;flex-wrap:wrap}
.tabs .tab{background:transparent;border:none;border-bottom:2px solid transparent;
  padding:10px 18px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;
  margin-bottom:-2px;transition:.15s}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab.active{color:var(--accent-d);border-bottom-color:var(--accent)}

.tabpane{display:none}
.tabpane.active{display:block}

/* ── Pill / Badge ──────────────────────────────────────── */
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.pill.v19{background:rgba(22,163,74,.12);color:var(--accent)}
.pill.v18{background:rgba(59,130,246,.12);color:#2563eb}

/* ── Loading ───────────────────────────────────────────── */
.spinner{display:inline-block;width:20px;height:20px;border:2.5px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{text-align:center;padding:60px 20px;color:var(--muted)}
.loading .spinner{width:32px;height:32px;margin-bottom:12px}

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .tiles{grid-template-columns:1fr}
  .topbar{padding:10px 14px;gap:10px;flex-wrap:wrap}
  .topbar .nav{margin-left:0;order:3;width:100%;display:flex;flex-wrap:wrap;gap:4px 0}
  .wrap{padding:16px 12px}
  .tile-val{font-size:20px}
  .hbar-name{width:100px;min-width:80px;font-size:12px}
  .hbar-val{width:90px;font-size:12px}
  .chart-container{height:200px}
  .tabs .tab{padding:8px 12px;font-size:12px}
}