:root{--bg:#f5f3ee;--surface:#fff;--ink:#1d2a24;--ink2:#4b5a52;--muted:#7a867f;--line:#e4e0d6;--brand:#1f5c45;--brand-ink:#fff;--accent:#c4673f;--bar:#2f7a5d;--bar-hover:#1f5c45;--warn-bg:#fdf3e2;--warn-ink:#7a4b0c;--err:#b3261e;--shadow:0 1px 2px rgba(0,0,0,.05)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121815;--surface:#1b231f;--ink:#e8eee9;--ink2:#b8c4bd;--muted:#87958d;--line:#2c3732;--brand:#3f9a76;--brand-ink:#08130e;--accent:#e08a62;--bar:#4fae88;--bar-hover:#7cc9a8;--warn-bg:#33270f;--warn-ink:#f2c879;--err:#ff8a80;--shadow:none}}
:root[data-theme="dark"]{--bg:#121815;--surface:#1b231f;--ink:#e8eee9;--ink2:#b8c4bd;--muted:#87958d;--line:#2c3732;--brand:#3f9a76;--brand-ink:#08130e;--accent:#e08a62;--bar:#4fae88;--bar-hover:#7cc9a8;--warn-bg:#33270f;--warn-ink:#f2c879;--err:#ff8a80;--shadow:none}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 "Plus Jakarta Sans",system-ui,sans-serif}
.hidden{display:none!important}
.btn{font:inherit;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--brand)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.ghost{background:transparent;border-color:transparent}
.btn:disabled{opacity:.55;cursor:wait}
input,select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.brand{display:flex;gap:10px;align-items:center}
.brand small{display:block;color:var(--muted);font-size:12px}
.logo{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--brand);color:var(--brand-ink);font-weight:700}
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-card{width:min(360px,100%);display:grid;gap:14px}
.login-card label{display:grid;gap:4px;font-weight:600;font-size:13px}
.error{color:var(--err);margin:0;min-height:1em}
.top{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line);padding:12px 24px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.period{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1}
.tabs{display:flex;gap:4px}
.tab{font:inherit;font-weight:600;border:0;background:none;color:var(--ink2);padding:8px 12px;border-radius:8px;cursor:pointer}
.tab.active{background:var(--bg);color:var(--ink)}
main{max-width:1280px;margin:0 auto;padding:20px 24px 60px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 12px;font-size:15px}
.empty{text-align:center;color:var(--ink2);padding:40px}
.status{color:var(--muted);font-size:13px}
.status .lock{color:var(--accent);font-weight:600}
#report{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
main>*,.grid2>*{min-width:0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi span{color:var(--ink2);font-size:13px}
.kpi b{display:block;font-size:26px;margin:2px 0;font-variant-numeric:tabular-nums}
.kpi small{color:var(--muted)}
.warn{background:var(--warn-bg);color:var(--warn-ink);border-radius:10px;padding:10px 14px;margin-bottom:8px}
.grid2{display:grid;grid-template-columns:3fr 2fr;gap:16px}
.chart{height:200px;display:flex;align-items:flex-end;gap:2px;border-bottom:1px solid var(--line);padding-top:8px}
.chart .col{flex:1;height:100%;display:flex;align-items:flex-end;cursor:default}
.chart .col i{display:block;width:100%;background:var(--bar);border-radius:4px 4px 0 0;min-height:1px}
.chart .col:hover i{background:var(--bar-hover)}
.axis{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:4px}
.hbars{display:grid;gap:6px;max-height:228px;overflow:auto}
.hbar{display:grid;grid-template-columns:minmax(0,1.3fr) 2fr auto;gap:8px;align-items:center;font-size:12px}
.hbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)}
.hbar .track{height:10px}
.hbar .track i{display:block;height:100%;background:var(--bar);border-radius:0 4px 4px 0}
.hbar b{font-variant-numeric:tabular-nums;font-weight:600}
.tablebar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:12px}
.tablebar h3{margin:0}
.tools{display:flex;flex-wrap:wrap;gap:8px}
.tablewrap{overflow:auto;max-height:70vh}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{position:sticky;top:0;background:var(--surface);color:var(--ink2);font-size:12px;font-weight:600;cursor:pointer;user-select:none}
th.sorted::after{content:" ▾"}
th.sorted.asc::after{content:" ▴"}
.num{text-align:right}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--bg)}
tfoot td{font-weight:700;border-top:2px solid var(--line)}
td small{display:block;color:var(--muted);font-size:12px}
td input{width:130px;padding:4px 8px}
td input.saved{border-color:var(--brand)}
.badge{display:inline-block;font-size:11px;padding:1px 6px;border-radius:6px;background:var(--bg);color:var(--muted);margin-left:4px}
.muted{color:var(--muted)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--surface);border-left:1px solid var(--line);z-index:10;overflow:auto;padding:16px;box-shadow:-8px 0 24px rgba(0,0,0,.12)}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.drawer-head small{display:block;color:var(--muted)}
.drawer h4{margin:16px 0 8px;font-size:13px;color:var(--ink2)}
.drawer .chart{height:120px}
.tooltip{position:fixed;z-index:20;pointer-events:none;background:var(--ink);color:var(--bg);font-size:12px;padding:6px 9px;border-radius:6px;white-space:nowrap}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.top,main{padding-left:16px;padding-right:16px}}
