:root{
  --bg:#EFF3EA;
  --surface:#FFFFFF;
  --surface-2:#E4EAE0;
  --ink:#20261D;
  --ink-muted:#5B6350;
  --accent:#2F5233;
  --accent-strong:#25422A;
  --accent-ink:#FFFFFF;
  --accent-soft:#DCE6D6;
  --warn:#95661E;
  --warn-soft:#F3E6C9;
  --bad:#8C3A22;
  --bad-soft:#F3DCD3;
  --good:#2F5233;
  --good-soft:#DCE6D6;
  --border:#D7DECE;
  --shadow: 0 1px 2px rgba(32,38,29,0.06), 0 8px 24px rgba(32,38,29,0.06);
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12160F; --surface:#1A2016; --surface-2:#212819; --ink:#E9EEE2; --ink-muted:#9CA68E;
    --accent:#86C685; --accent-strong:#A3D6A2; --accent-ink:#0E140C; --accent-soft:#22331F;
    --warn:#E0AF52; --warn-soft:#3A2E14; --bad:#E38468; --bad-soft:#3A1E16;
    --good:#86C685; --good-soft:#22331F; --border:#2B3324;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  --bg:#12160F; --surface:#1A2016; --surface-2:#212819; --ink:#E9EEE2; --ink-muted:#9CA68E;
  --accent:#86C685; --accent-strong:#A3D6A2; --accent-ink:#0E140C; --accent-soft:#22331F;
  --warn:#E0AF52; --warn-soft:#3A2E14; --bad:#E38468; --bad-soft:#3A1E16;
  --good:#86C685; --good-soft:#22331F; --border:#2B3324;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:var(--accent);}
button{font-family:inherit;}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;margin:0;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.muted{color:var(--ink-muted);}

.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(ellipse 900px 500px at 20% -10%, var(--accent-soft), transparent 60%), var(--bg);}
.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px 32px;box-shadow:var(--shadow);}
.login-mark{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.login-mark .leaf{width:28px;height:28px;flex:none;color:var(--accent);}
.login-mark span{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--ink);}
.login-tagline{color:var(--ink-muted);font-size:13px;margin:2px 0 28px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-muted);margin-bottom:6px;}
.field input, select.input, input.input, textarea.input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--ink);font-family:var(--font-mono);font-size:14px;}
.field input:focus, .input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:9px;border:1px solid transparent;font-weight:600;font-size:14px;cursor:pointer;font-family:var(--font-body);text-decoration:none;}
.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{background:var(--accent-strong);}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--ink);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:7px;}
.btn-block{width:100%;}
.msg{border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:16px;}
.msg-err{background:var(--bad-soft);color:var(--bad);}
.msg-ok{background:var(--good-soft);color:var(--good);}
.login-hint{margin-top:20px;font-size:12.5px;color:var(--ink-muted);text-align:center;}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:5;}
.topbar-mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;}
.topbar-mark .leaf{width:22px;height:22px;color:var(--accent);flex:none;}
.topbar-mark span{font-family:var(--font-display);font-weight:600;font-size:17px;}
.topbar-user{display:flex;align-items:center;gap:12px;}
.badge{font-family:var(--font-mono);font-size:12px;background:var(--surface-2);color:var(--ink-muted);padding:4px 9px;border-radius:100px;border:1px solid var(--border);}
main{max-width:1120px;margin:0 auto;padding:28px;}
.page-head{margin-bottom:20px;}
.page-head h1{font-size:24px;}
.page-head p{margin:4px 0 0;color:var(--ink-muted);font-size:13.5px;}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:24px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;}
.stat-card .label{font-size:11.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-muted);font-weight:600;margin-bottom:8px;}
.stat-card .value{font-family:var(--font-mono);font-size:24px;font-weight:600;}
.stat-card .sub{font-size:12.5px;color:var(--ink-muted);margin-top:4px;}
.stat-good .value{color:var(--good);}
.stat-warn .value{color:var(--warn);}
.stat-bad .value{color:var(--bad);}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;font-size:12px;font-weight:600;font-family:var(--font-mono);}
.pill-good{background:var(--good-soft);color:var(--good);}
.pill-warn{background:var(--warn-soft);color:var(--warn);}
.pill-bad{background:var(--bad-soft);color:var(--bad);}
.pill-muted{background:var(--surface-2);color:var(--ink-muted);}

.month-row{display:flex;flex-wrap:wrap;gap:6px;}
.month-chip{font-family:var(--font-mono);font-size:11px;padding:6px 8px;border-radius:8px;background:var(--surface-2);color:var(--ink-muted);border:1px solid var(--border);min-width:52px;text-align:center;}
.month-chip.paid{background:var(--good-soft);color:var(--good);border-color:transparent;}
.month-chip.pending{background:var(--bad-soft);color:var(--bad);border-color:transparent;}

.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin-bottom:20px;}
.card h2{font-size:16px;margin-bottom:14px;}
.card h2 .n{color:var(--ink-muted);font-weight:400;font-size:13px;margin-left:6px;font-family:var(--font-body);}

.cta-card{background:linear-gradient(135deg, var(--accent-soft), var(--surface));border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.cta-card h2{font-size:16px;margin-bottom:4px;}
.cta-card p{margin:0;color:var(--ink-muted);font-size:13.5px;max-width:46ch;}

.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:9px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
tr:last-child td{border-bottom:none;}
td.num, th.num{text-align:right;font-family:var(--font-mono);}
tbody tr:hover{background:var(--surface-2);}
a.row-link{color:inherit;text-decoration:none;display:block;}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
.search-input{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--ink);font-size:13.5px;}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end;}
.form-grid .field{margin-bottom:0;}

.link-btn{background:none;border:none;color:var(--accent);font-weight:600;font-size:13px;cursor:pointer;padding:0;font-family:var(--font-body);text-decoration:none;}
.link-btn:hover{text-decoration:underline;}

footer{padding:20px 28px;text-align:center;color:var(--ink-muted);font-size:12px;}

.tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--border);}
.tab{padding:9px 4px;margin-right:16px;font-size:13.5px;font-weight:600;color:var(--ink-muted);text-decoration:none;border-bottom:2px solid transparent;}
.tab.active{color:var(--accent);border-color:var(--accent);}

@media (max-width:640px){
  main{padding:18px 16px;}
  .topbar{padding:14px 16px;}
  td, th{padding:8px 7px;}
}