:root { --bg:#101418; --fg:#f5f2ea; --muted:#8b959e; --line:#232a31; --accent:#2f7d5b; --warn:#c2703d; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 -apple-system, system-ui, sans-serif;
       padding:env(safe-area-inset-top) 0 calc(64px + env(safe-area-inset-bottom)); }
h1 { font-size:1.4rem; margin:1rem 1rem .5rem; }
#setup { padding:2rem 1rem; }
.tab { padding:0 1rem 2rem; }
input[type=password] { width:100%; padding:.8rem; border-radius:10px; border:1px solid var(--line);
                       background:#161b21; color:var(--fg); }
button, .primary, .secondary { font:inherit; }
.primary, .secondary { display:block; width:100%; text-align:center; padding:.9rem; margin:.5rem 0;
                       border-radius:12px; border:1px solid var(--line); background:#161b21; color:var(--fg); }
.primary { background:var(--accent); border-color:var(--accent); font-weight:600; }
.primary[disabled] { opacity:.4; }
.hints { display:flex; gap:.4rem; margin:0 0 .8rem; flex-wrap:wrap; }
.chip { padding:.35rem .8rem; border-radius:999px; border:1px solid var(--line);
        background:transparent; color:var(--muted); }
.chip.on { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.page { padding:.6rem .8rem; border:1px solid var(--line); border-radius:10px; margin-bottom:.4rem; color:var(--muted); }
.status { color:var(--muted); font-size:.9rem; min-height:1.2em; }
#tabs { position:fixed; bottom:0; left:0; right:0; display:flex; background:#161b21;
        border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
#tabs button { flex:1; padding:1rem .5rem; background:none; border:0; color:var(--muted); }
#tabs button.active { color:var(--fg); font-weight:600; }
#review-badge { background:var(--warn); color:#fff; border-radius:999px; padding:0 .4rem; font-size:.75rem; }

:root { --accent-dim:#1f4d3a; }
h2 { font-size:.95rem; text-transform:uppercase; letter-spacing:.06em;
     color:var(--muted); margin:1.6rem 0 .6rem; }
.tiles { display:flex; gap:.6rem; flex-wrap:wrap; }
.tile { flex:1 1 45%; background:#161b21; border:1px solid var(--line);
        border-radius:14px; padding:.9rem; display:flex; flex-direction:column; gap:.2rem; }
.tile-label { color:var(--muted); font-size:.8rem; }
.tile-value { font-size:1.5rem; font-weight:650; font-variant-numeric:tabular-nums; }
.tile-sub { color:var(--muted); font-size:.78rem; }
.lines { list-style:none; margin:0; padding:0; }
.lines li { display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0;
            border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.trend { width:100%; height:132px; overflow:visible; }
.trend .axis { fill:var(--muted); font-size:9px; }
.trend .bar-label { fill:var(--fg); font-size:9px; font-weight:600; }
.depts { display:flex; flex-direction:column; gap:.5rem; }
.dept { display:grid; grid-template-columns:6.5rem 1fr 4.5rem; align-items:center; gap:.5rem; }
.dept-name { font-size:.85rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dept-bar { background:var(--line); border-radius:4px; height:10px; }
.dept-bar i { display:block; height:100%; background:var(--accent-dim); border-radius:4px; }
.dept-amt { text-align:right; font-size:.82rem; font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); }
.warn { color:var(--warn); }
.rcard { border:1px solid var(--line); border-radius:12px; padding:.7rem .8rem; margin-bottom:.5rem; background:#161b21; }
.rcard-top { display:flex; justify-content:space-between; gap:.6rem; font-weight:600; }
.tag { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.rcard.s-needs_review { border-color:var(--warn); }
.rcard.s-failed { border-color:var(--warn); }