:root{
  --bg:#F9FAF4;
  --surface:#FFFFFF;
  --surface-2:#F2F4E9;
  --border:#E6EADA;
  --ink:#35381F;
  --ink-soft:#7A7D5C;
  --accent:#8A5A34;
  --accent-soft:#F0EFDE;
  --income:#4B7A42;
  --expense:#A63A2E;
  --warn:#B4842A;
  --shadow: 0 1px 2px rgba(67,41,15,0.08), 0 4px 14px rgba(67,41,15,0.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1C1C1C; --surface:#252525; --surface-2:#2D2D2D; --border:#3B3B3B;
    --ink:#ECE6DA; --ink-soft:#A39C90; --accent:#CB8B52; --accent-soft:#3B2E20;
    --income:#6FA85E; --expense:#D9695A; --warn:#D9A94E;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  --bg:#1C1C1C; --surface:#252525; --surface-2:#2D2D2D; --border:#3B3B3B;
  --ink:#ECE6DA; --ink-soft:#A39C90; --accent:#CB8B52; --accent-soft:#3B2E20;
  --income:#6FA85E; --expense:#D9695A; --warn:#D9A94E;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
}

*{box-sizing:border-box;}
body{background:var(--bg); color:var(--ink); font-family:'IBM Plex Sans', -apple-system, sans-serif; margin:0; padding:16px; padding-block:16px 48px;}
h1,h2,h3{font-family:'Manrope', sans-serif; text-wrap:balance; margin:0;}
table{font-variant-numeric: tabular-nums;}
button, input, select{font-family:inherit;}
[hidden]{display:none!important;}

.eyebrow{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); font-weight:600;}

/* login */
.login-view{min-height:80vh; display:flex; align-items:center; justify-content:center;}
.login-form{background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:28px; width:100%; max-width:320px; display:flex; flex-direction:column; gap:14px;}
.login-form h1{font-size:20px; margin-bottom:4px;}
.login-form label{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--ink-soft); font-weight:600;}
.login-form input{border:1px solid var(--border); border-radius:8px; padding:9px 10px; font-size:14px; background:var(--bg); color:var(--ink);}
.login-form button{border:0; background:var(--accent); color:#fff; font-weight:700; font-size:14px; padding:10px; border-radius:8px; cursor:pointer;}
.error-msg{color:var(--expense); font-size:12.5px; min-height:16px; margin:0;}

/* app shell */
.wrap{max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:18px;}
.app-header{display:flex; justify-content:space-between; align-items:center;}
.logout-btn{border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); font-weight:600; font-size:12.5px; padding:8px 14px; border-radius:8px; cursor:pointer;}
.logout-btn:hover{color:var(--ink);}

.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:4px;}
.kpi .label{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}
.kpi .value{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums;}
@media (max-width:560px){ .kpi-row{grid-template-columns:repeat(2,1fr);} }

.tabs{display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:2px;}
.tabs button{border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); font-weight:600; font-size:12.5px; padding:9px 16px; border-radius:9px 9px 0 0; cursor:pointer; border-bottom:0; position:relative; top:1px;}
.tabs button.active{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}

.panel{background:var(--surface); border:1px solid var(--border); border-radius:0 12px 12px 12px; box-shadow:var(--shadow); padding:16px; display:flex; flex-direction:column; gap:12px;}

.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;}
.toolbar label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--ink-soft); font-weight:600;}
.toolbar input{border:1px solid var(--border); border-radius:7px; padding:7px 9px; font-size:13px; background:var(--bg); color:var(--ink);}
.btn{border:1px solid var(--border); background:var(--surface); color:var(--ink); font-weight:600; font-size:12.5px; padding:8px 14px; border-radius:8px; cursor:pointer;}
.btn:hover{background:var(--surface-2);}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn-primary:hover{opacity:.9; background:var(--accent);}
.spacer{flex:1 1 auto;}

.add-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px;}
.add-form label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--ink-soft); font-weight:600;}
.add-form input, .add-form select{border:1px solid var(--border); border-radius:7px; padding:7px 9px; font-size:13px; background:var(--surface); color:var(--ink);}
.add-form .full{grid-column:1 / -1;}
.add-form .actions{grid-column:1 / -1; display:flex; gap:8px; justify-content:flex-end;}
.checkbox-row{display:flex; align-items:center; gap:6px; flex-direction:row!important;}

.table-scroll{overflow-x:auto;}
table.ledger{width:100%; border-collapse:collapse; font-size:13px; min-width:640px;}
table.ledger th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); font-weight:600; padding:9px 12px; border-bottom:1px solid var(--border); white-space:nowrap;}
table.ledger td{padding:9px 12px; border-bottom:1px solid var(--border); white-space:nowrap; color:var(--ink);}
table.ledger tbody tr:hover{background:var(--surface-2);}
table.ledger td.num, table.ledger th.num{text-align:right;}
.money-in{color:var(--income); font-weight:600;}
.money-out{color:var(--expense); font-weight:600;}
.hist{color:var(--ink-soft); font-size:11.5px;}
.chip{display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--border);}
.chip.ok{background:var(--accent-soft); color:var(--accent); border-color:transparent;}
.link-btn{border:0; background:transparent; color:var(--accent); font-weight:600; font-size:12px; cursor:pointer; padding:0;}

/* modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; padding:16px; z-index:10;}
.modal-content{background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:20px; width:100%; max-width:420px; display:flex; flex-direction:column; gap:12px; max-height:90vh; overflow-y:auto;}
.modal-content h3{font-size:16px;}
.modal-content label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--ink-soft); font-weight:600;}
.modal-content input{border:1px solid var(--border); border-radius:7px; padding:7px 9px; font-size:13px; background:var(--bg); color:var(--ink);}
.modal-actions{display:flex; gap:8px; justify-content:flex-end;}