:root{
  --bg:#eef2ec; --surface:#ffffff; --surface-2:#e2e8dd; --line:#c9d2c2;
  --ink:#1c2620; --ink-muted:#55645a;
  --primary:#2e6b47; --primary-ink:#ffffff;
  --water:#1f6f8b; --steel:#7c8a82;
  --warn:#8a5b17; --warn-bg:#f3e1c4;
  --danger:#8f3434; --danger-bg:#f3d9d9;
  --ok-bg:#dcead9;
  --series-revenue:#2a78d6; --series-expense:#eb6834;
  --status-good:#0ca30c; --status-critical:#d03b3b;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){    --bg:#141b16; --surface:#1c2620; --surface-2:#233029; --line:#37453b;
    --ink:#e8ede5; --ink-muted:#a7b5a9;
    --primary:#5fae7c; --primary-ink:#0f1a12;
    --water:#5bb6d6; --steel:#8ea295;
    --warn:#e3b567; --warn-bg:#3d3117;
    --danger:#e08a8a; --danger-bg:#3d2222;
    --ok-bg:#1f3324;
    --series-revenue:#3987e5; --series-expense:#d95926;
    --status-good:#0ca30c; --status-critical:#e66767;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#141b16; --surface:#1c2620; --surface-2:#233029; --line:#37453b;
  --ink:#e8ede5; --ink-muted:#a7b5a9;
  --primary:#5fae7c; --primary-ink:#0f1a12;
  --water:#5bb6d6; --steel:#8ea295;
  --warn:#e3b567; --warn-bg:#3d3117;
  --danger:#e08a8a; --danger-bg:#3d2222;
  --ok-bg:#1f3324;
  --series-revenue:#3987e5; --series-expense:#d95926;
  --status-good:#0ca30c; --status-critical:#e66767;
  color-scheme: dark;
}
*{box-sizing:border-box;}
html,body{margin:0; background:var(--bg); color:var(--ink); font-family:'Work Sans',system-ui,sans-serif;}
body{padding-bottom:64px;}
h1,h2,h3{font-family:'Big Shoulders Display',system-ui,sans-serif; text-transform:uppercase; letter-spacing:.02em; margin:0;}
.mono{font-family:'Space Mono',monospace; font-variant-numeric:tabular-nums;}
a{color:var(--water);}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}

.topbar{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:10;}
.topbar .brand{font-family:'Big Shoulders Display',sans-serif; font-size:20px; color:var(--primary); text-transform:uppercase;}
.topbar .user{font-size:13px; color:var(--ink-muted); display:flex; align-items:center; gap:10px;}
.topbar .user button{background:none; border:1px solid var(--line); border-radius:7px; padding:4px 10px; color:var(--ink); font-size:12px;}

.tabs{display:flex; gap:4px; overflow-x:auto; padding:8px 12px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:53px; z-index:9;}
.tabs a{flex:0 0 auto; padding:7px 12px; border-radius:8px; font-size:13px; color:var(--ink-muted); text-decoration:none; white-space:nowrap;}
.tabs a.active{background:var(--primary); color:var(--primary-ink); font-weight:600;}

main{max-width:960px; margin:0 auto; padding:16px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px;}
.btn{background:var(--primary); color:var(--primary-ink); border:none; border-radius:8px; padding:9px 16px; font-size:14px; font-weight:600;}
.btn.secondary{background:transparent; color:var(--primary); border:1px solid var(--primary);}
.btn.small{padding:6px 11px; font-size:13px;}
.btn:disabled{opacity:.5;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.form-grid .full{grid-column:1/-1;}
.form-grid label{font-size:12px; color:var(--ink-muted); display:block; margin-bottom:3px;}
.form-grid input,.form-grid select,.form-grid textarea{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font-size:14px;}
@media (max-width:520px){ .form-grid{grid-template-columns:1fr;} }

.tag{font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:999px; background:var(--surface-2); color:var(--ink-muted); white-space:nowrap;}
.status-pill{font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap;}
.status-ok{background:var(--ok-bg); color:var(--primary);}
.status-warn{background:var(--warn-bg); color:var(--warn);}
.status-alert{background:var(--danger-bg); color:var(--danger);}
.meter-row{display:flex; gap:10px;}
.meter{flex:1; background:var(--surface-2); border-radius:10px; padding:8px 10px;}
.meter .k{font-size:11px; color:var(--ink-muted); text-transform:uppercase;}
.meter .v{font-family:'Space Mono',monospace; font-size:18px;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th,td{text-align:left; padding:7px 8px; border-bottom:1px solid var(--line);}
th{color:var(--ink-muted); font-weight:600; font-size:11.5px; text-transform:uppercase;}

.msg{font-size:13px; padding:8px 10px; border-radius:8px; margin-top:8px;}
.msg.err{background:var(--danger-bg); color:var(--danger);}
.msg.ok2{ background:var(--ok-bg); color:var(--primary);}
.empty-state{background:var(--surface); border:1px dashed var(--line); border-radius:14px; padding:30px 18px; text-align:center; color:var(--ink-muted);}

.auth-wrap{max-width:380px; margin:60px auto; padding:0 16px;}
.auth-wrap .card{padding:22px;}

.legend{display:flex; gap:16px; font-size:12px; color:var(--ink-muted); margin:8px 0;}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.legend i{width:10px; height:10px; border-radius:3px; display:inline-block;}
.bar-chart{display:flex; align-items:flex-end; gap:14px; height:160px; padding:10px 4px 0; border-bottom:1px solid var(--line);}
.bar-group{display:flex; flex-direction:column; align-items:center; gap:6px; flex:1;}
.bar-pair{display:flex; align-items:flex-end; gap:3px; height:130px;}
.bar{width:14px; border-radius:4px 4px 2px 2px;}
.bar.revenue{background:var(--series-revenue);}
.bar.expense{background:var(--series-expense);}
.bar-label{font-size:10.5px; color:var(--ink-muted);}
[hidden]{display:none!important;}