:root {
  --bg: #f6f7f9; --card: #fff; --ink: #1c2430; --muted: #6b7684;
  --line: #e4e8ee; --accent: #3b6ef5; --accent-soft: #e8effe;
  --bar: #c9d9ff; --ok: #1f9d55; --bad: #d64545;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f141a; --card:#161d26; --ink:#e6eaf0; --muted:#95a1b0;
          --line:#242e3a; --accent:#5b86f7; --accent-soft:#1b2740; --bar:#25406e; }
}
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
       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:1rem; padding:.6rem 1.2rem;
          background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:700; font-size:1.05rem; }
.topbar nav { display:flex; align-items:center; gap:1rem; margin-left:auto; flex-wrap:wrap; }
.topbar .who { color:var(--muted); font-size:.85rem; }
.topbar .logout { color:var(--muted); }

.wrap { max-width:1080px; margin:1.4rem auto; padding:0 1.2rem; }
.foot { max-width:1080px; margin:2rem auto; padding:1rem 1.2rem; color:var(--muted);
        font-size:.8rem; border-top:1px solid var(--line); }

.card { background:var(--card); border:1px solid var(--line); border-radius:12px;
        padding:1.2rem 1.3rem; margin-bottom:1.2rem; }
.card.narrow { max-width:420px; margin:3rem auto; }
h1 { font-size:1.4rem; margin:.2rem 0 1rem; }
h2 { font-size:1rem; margin:0 0 .8rem; color:var(--muted); font-weight:600;
     text-transform:uppercase; letter-spacing:.03em; }

/* Controls */
.controls { display:flex; gap:.8rem; align-items:center; margin-bottom:1.2rem; flex-wrap:wrap; }
select, input[type=text], input[type=email], input[type=password] {
  font:inherit; padding:.5rem .6rem; border:1px solid var(--line);
  border-radius:8px; background:var(--card); color:var(--ink); }
.btn { display:inline-block; font:inherit; font-weight:600; cursor:pointer;
       padding:.5rem .9rem; border-radius:8px; border:1px solid var(--accent);
       background:var(--accent); color:#fff; }
.btn.ghost { background:transparent; color:var(--accent); }
.btn.danger { background:var(--bad); border-color:var(--bad); }
.period a { padding:.4rem .7rem; border:1px solid var(--line); border-radius:8px;
            color:var(--ink); }
.period a.active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }

/* KPI tiles */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.2rem; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; }
.kpi .label { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
.kpi .value { font-size:1.8rem; font-weight:700; margin-top:.2rem; }
.kpi .delta { font-size:.8rem; margin-top:.15rem; }
.delta.up { color:var(--ok); } .delta.down { color:var(--bad); } .delta.flat { color:var(--muted); }

/* Grid of breakdown cards */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem; }
.list { list-style:none; margin:0; padding:0; }
.list li { position:relative; display:flex; justify-content:space-between; gap:1rem;
           padding:.4rem .55rem; border-radius:6px; z-index:0; }
.list li .barfill { position:absolute; inset:0 auto 0 0; background:var(--bar);
                    border-radius:6px; z-index:-1; opacity:.55; }
.list li .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list li .num { color:var(--muted); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.tabs { display:flex; gap:.4rem; margin-bottom:.6rem; flex-wrap:wrap; }
.tabs button { font:inherit; padding:.3rem .6rem; border:1px solid var(--line);
               background:transparent; color:var(--muted); border-radius:6px; cursor:pointer; }
.tabs button.active { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.empty { color:var(--muted); padding:.6rem .55rem; }

/* Tables & forms */
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
form.stack { display:flex; flex-direction:column; gap:.8rem; }
label.field { display:flex; flex-direction:column; gap:.3rem; font-size:.9rem; color:var(--muted); }
label.field input, label.field select { color:var(--ink); }
.msg { padding:.6rem .8rem; border-radius:8px; margin-bottom:1rem; }
.msg.err { background:#fdecec; color:#a11; border:1px solid #f3c0c0; }
.msg.ok { background:#e8f7ee; color:#176a38; border:1px solid #bfe6cd; }
@media (prefers-color-scheme: dark) {
  .msg.err { background:#3a1e20; color:#f2b8b8; border-color:#5c2b2e; }
  .msg.ok { background:#16301f; color:#a7e0bd; border-color:#265138; }
}
.checks { display:flex; flex-wrap:wrap; gap:.5rem 1rem; }
.checks label { display:flex; gap:.35rem; align-items:center; color:var(--ink); font-size:.9rem; }
canvas { max-width:100%; }
.overflow { overflow-x:auto; }