:root{--navy:#1a1a2e;--navy-soft:#242440;--gold:#c9a84c;--cream:#f3efe4;--sage:#6b8f71;--rust:#b5502f;--line:rgba(243,239,228,.1)}
*{box-sizing:border-box}
[v-cloak]{display:none}
body{margin:0;background:var(--navy);color:var(--cream);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:auto;padding:40px 28px 80px}
header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;border-bottom:1px solid var(--line);padding-bottom:26px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px}.comb{width:34px;height:34px;flex:none}
h1,h2,.section-title{font-family:Fraunces,Georgia,serif}h1{font-size:28px;font-weight:600;margin:0}.sub,.section-note,.hint{font-size:13px;color:rgba(243,239,228,.55);margin-top:4px}
.header-actions{display:flex;align-items:center;gap:16px}.updated{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--gold);text-align:right}
.signed-in{font-size:12px;color:rgba(243,239,228,.65)}.logout-form{margin:0}.logout-form button{white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:40px}.kpi,.card,.loading-card{background:var(--navy-soft);border:1px solid var(--line);border-radius:4px}
.kpi{padding:20px;position:relative;overflow:hidden}.kpi:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--gold)}.kpi.expense:before{background:var(--rust)}.kpi.net:before{background:var(--sage)}
.kpi-label,label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(243,239,228,.5)}.kpi-value{font:600 24px "IBM Plex Mono",monospace;margin-top:8px}.kpi-delta{font:12px "IBM Plex Mono",monospace;margin-top:6px}.up,.good{color:var(--sage)}.down,.bad{color:var(--rust)}.flat{color:rgba(243,239,228,.4)}
.card{padding:26px;margin-bottom:40px}.chart-card{padding-bottom:10px}.section-title{font-size:18px;font-weight:600;margin:0 0 4px}.section-note{margin:0 0 18px}.chart-scroll{overflow-x:auto}.chart-scroll svg{width:100%;height:auto;min-width:720px;display:block}.grid-line{stroke:rgba(243,239,228,.07)}.axis-y,.axis-x{fill:rgba(243,239,228,.5);font:11px "IBM Plex Mono",monospace}.bar-income{fill:var(--gold)}.bar-expense{fill:var(--rust)}.net-line{fill:none;stroke:var(--sage);stroke-width:2;stroke-dasharray:4 3}.net-point{fill:var(--sage);stroke:var(--navy);stroke-width:1.5}
.legend{display:flex;gap:22px;margin-top:14px;padding:14px 0;border-top:1px solid var(--line);flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(243,239,228,.7)}.swatch{width:10px;height:10px;border-radius:2px}.swatch.gold{background:var(--gold)}.swatch.rust{background:var(--rust)}.swatch.sage{background:var(--sage)}
.spend-row{display:grid;grid-template-columns:210px 1fr 110px;align-items:center;gap:12px;padding:7px 0}.spend-name{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spend-track{height:10px;background:rgba(243,239,228,.06);border-radius:3px;overflow:hidden}.spend-fill{height:100%;background:var(--rust)}.spend-val,.num{font-family:"IBM Plex Mono",monospace;text-align:right}
.table-group{margin:28px 0}.table-group-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;border-left:3px solid;padding-left:10px;margin-bottom:10px}.table-group-title.income{color:var(--gold);border-color:var(--gold)}.table-group-title.expense{color:var(--rust);border-color:var(--rust)}
table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:rgba(243,239,228,.5);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:500;padding:0 10px 12px;border-bottom:1px solid var(--line)}td{padding:11px 10px;border-bottom:1px solid var(--line)}.total-row td{font-weight:600;border-top:1px solid var(--line)}.responsive-table{overflow-x:auto}
.delta-pill,.status-pill{display:inline-block;padding:3px 8px;border-radius:20px;font:11px "IBM Plex Mono",monospace}.delta-pill.up,.status-pill.ready{background:rgba(107,143,113,.16);color:var(--sage)}.delta-pill.down,.status-pill.duplicate_in_file,.status-pill.already_imported{background:rgba(181,80,47,.16);color:#d88970}
input,select{width:100%;background:var(--navy);border:1px solid var(--line);color:var(--cream);padding:10px 11px;border-radius:3px;font:13px "IBM Plex Mono",monospace}input:focus,select:focus{outline:none;border-color:var(--gold)}label{display:block;margin-bottom:6px}.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.transaction-grid .wide{grid-column:span 2}
button{background:var(--gold);color:var(--navy);border:0;padding:11px 20px;border-radius:3px;font:600 13px Inter,sans-serif;cursor:pointer}button:hover{filter:brightness(1.08)}button:disabled{opacity:.55;cursor:not-allowed}button.ghost{background:transparent;color:rgba(243,239,228,.75);border:1px solid var(--line)}button.compact{padding:8px 12px}.inline-status{font-size:12px;color:var(--gold);margin-left:12px}.empty,.loading-card{text-align:center;padding:30px;color:rgba(243,239,228,.4)}
.alert{padding:12px 14px;border-radius:4px;margin:12px 0;font-size:13px}.alert.error{background:rgba(181,80,47,.15);border:1px solid rgba(181,80,47,.4);color:#efa38d}
.modal-backdrop{position:fixed;inset:0;background:rgba(4,4,14,.78);display:grid;place-items:center;padding:24px;z-index:10}.modal{width:min(1050px,100%);max-height:90vh;overflow:auto;background:var(--navy-soft);border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.45);padding:24px;border-radius:6px}.modal-header{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:16px}.modal h2{font-size:23px;margin:0}.modal p{margin:5px 0}.icon-button{font-size:28px;background:transparent;color:var(--cream);padding:0 8px}.upload-panel{border:1px dashed rgba(201,168,76,.45);padding:28px;margin-top:20px}.upload-panel input{margin-bottom:12px}.upload-panel a{color:var(--gold);display:inline-block;margin:8px 0 20px}.import-summary{display:flex;gap:24px;flex-wrap:wrap;margin:20px 0;font:13px "IBM Plex Mono",monospace}.preview-table{max-height:430px}.preview-table thead{position:sticky;top:0;background:var(--navy-soft)}.muted{opacity:.55}.error-list{background:rgba(181,80,47,.08);color:#efa38d;font-size:12px;padding:10px;max-height:100px;overflow:auto}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
@media(max-width:800px){.wrap{padding:22px 16px 60px}.kpis{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr 1fr}.transaction-grid .wide{grid-column:span 2}.spend-row{grid-template-columns:140px 1fr 95px}.header-actions{width:100%;justify-content:space-between}}
@media(max-width:480px){h1{font-size:22px}.kpi-value{font-size:18px}.card{padding:18px 15px}.form-grid{grid-template-columns:1fr}.transaction-grid .wide{grid-column:span 1}.spend-row{grid-template-columns:1fr 80px}.spend-track{grid-row:2;grid-column:1/3}.modal-backdrop{padding:8px}.modal{padding:16px}.modal-actions{flex-direction:column-reverse}.modal-actions button{width:100%}}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,rgba(201,168,76,.1),transparent 42%),var(--navy)}
.auth-card{width:min(430px,100%);background:var(--navy-soft);border:1px solid var(--line);border-radius:6px;padding:36px;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.auth-card h1{margin:10px 0 6px}.auth-mark{font:600 12px "IBM Plex Mono",monospace;letter-spacing:.14em;color:var(--gold)}
.auth-field{margin:18px 0}.auth-card button{width:100%;margin-top:8px}.password-hint{font-size:12px;line-height:1.5;color:rgba(243,239,228,.55)}
.alert.success{background:rgba(107,143,113,.15);border:1px solid rgba(107,143,113,.4);color:#a8c7ad}.settings-modal{width:min(680px,100%)}.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}.settings-form .wide{grid-column:1/-1}.checkbox-row{display:flex;align-items:center;gap:10px}.checkbox-row input{width:auto}.settings-form .hint{margin:0;color:rgba(243,239,228,.55)}
@media(max-width:600px){.settings-form{grid-template-columns:1fr}}