@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:wght@400;600&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f0f11;--bg2:#17171a;--bg3:#1e1e23;--bg4:#252530;
  --border:#2e2e38;--border2:#3a3a48;
  --text:#e8e8f0;--text2:#9090a8;--text3:#5a5a72;
  --accent:#7c6af7;--accent2:#a594ff;
  --green:#3fcf8e;--red:#f06c6c;--amber:#f5a623;--blue:#5ba4f5;
  --teal:#2dd4bf;--pink:#f06292;--purple:#9090f8;
  --radius:8px;--radius2:12px;
  --font-mono:'DM Mono',monospace;
  --font-display:'Playfair Display',serif;
}
body{background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:13px;min-height:100vh}
#app{display:flex;flex-direction:column;height:100vh}
#login-screen{display:none;align-items:center;justify-content:center;height:100vh;background:var(--bg)}
#login-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:36px 32px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:14px}
#login-box h1{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--accent2);text-align:center}
.login-sub{color:var(--text3);font-size:11px;text-align:center;margin-top:-8px}
#login-error{color:var(--red);font-size:11px;min-height:14px;text-align:center}
#site-footer{text-align:center;padding:12px;color:var(--text3);font-size:11px;border-top:1px solid var(--border);flex-shrink:0}
#site-footer a{color:var(--text2);text-decoration:none}
#site-footer a:hover{color:var(--text)}
#header{background:var(--bg2);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;gap:16px;flex-shrink:0;flex-wrap:wrap}
#header h1{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--accent2);letter-spacing:-0.3px}
#header .subtitle{color:var(--text3);font-size:11px}
#db-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text3);margin-left:12px}
#db-dot{width:6px;height:6px;border-radius:50%;background:var(--text3);flex-shrink:0;transition:background .3s}
#db-dot.connected{background:var(--green)}
#db-dot.error{background:var(--red)}
#nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav-btn{background:none;border:none;color:var(--text2);padding:6px 14px;border-radius:var(--radius);cursor:pointer;font-family:var(--font-mono);font-size:12px;transition:all .15s;position:relative}
.nav-btn:hover{background:var(--bg3);color:var(--text)}
.nav-btn.active{background:var(--accent);color:#fff}
.nav-badge{position:absolute;top:2px;right:4px;background:var(--red);color:#fff;border-radius:8px;font-size:9px;padding:1px 5px;min-width:16px;text-align:center}
#main{flex:1;overflow:hidden;display:flex;flex-direction:column}
.view{display:none;flex:1;overflow:hidden;flex-direction:column}
.view.active{display:flex}
.view-header{padding:16px 20px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap}
.view-title{font-family:var(--font-display);font-size:16px;color:var(--text);flex-shrink:0}
.view-body{flex:1;overflow-y:auto;padding:20px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius);border:none;cursor:pointer;font-family:var(--font-mono);font-size:12px;font-weight:500;transition:all .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2)}
.btn-ghost{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--border2)}
.btn-danger{background:transparent;color:var(--red);border:1px solid var(--red)}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-sm{padding:4px 10px;font-size:11px}
.btn-xs{padding:2px 8px;font-size:11px}
input,select,textarea{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:7px 10px;font-family:var(--font-mono);font-size:12px;outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
select option{background:var(--bg3)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;padding:8px 12px;color:var(--text3);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;background:var(--bg);z-index:1}
td{padding:7px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:hover td{background:var(--bg3)}
.amount-pos{color:var(--green)}
.amount-neg{color:var(--red)}
.amount-cc{color:var(--amber);opacity:.7}
.cat-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;white-space:nowrap}
.cat-Household{background:#1a2a1a;color:var(--green)}
.cat-Personal{background:#1a1a2a;color:var(--purple)}
.cat-Kasondra{background:#2a1a2a;color:var(--pink)}
.cat-Reimbursable{background:#2a1e10;color:var(--amber)}
.cat-Business-Medic{background:#10202a;color:var(--blue)}
.cat-Business-Photo{background:#1a2028;color:var(--teal)}
.cat-Income{background:#0d2010;color:var(--green)}
.cat-CC-Payment{background:#2a1a1a;color:var(--red);opacity:.8}
.cat-Uncategorized{background:#222;color:var(--text3)}
.stats-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:14px 18px;min-width:140px;flex:1}
.stat-label{color:var(--text3);font-size:11px;margin-bottom:4px}
.stat-value{font-size:18px;font-weight:500;font-family:var(--font-display)}
.stat-sub{color:var(--text3);font-size:11px;margin-top:2px}
.upload-zone{border:2px dashed var(--border2);border-radius:var(--radius2);padding:40px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg2)}
.upload-zone:hover,.upload-zone.drag{border-color:var(--accent);background:var(--bg3)}
.upload-zone-icon{font-size:32px;margin-bottom:12px;opacity:.4}
.upload-zone h3{font-family:var(--font-display);font-size:16px;color:var(--text);margin-bottom:6px}
.upload-zone p{color:var(--text2);font-size:12px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius2);padding:24px;min-width:320px;max-width:580px;width:100%;max-height:85vh;overflow-y:auto}
.modal h3{font-family:var(--font-display);font-size:16px;margin-bottom:16px}
.modal-footer{margin-top:20px;display:flex;gap:8px;justify-content:flex-end}
.form-row{margin-bottom:14px}
.form-label{color:var(--text2);font-size:11px;margin-bottom:5px;display:block}
.form-row input,.form-row select,.form-row textarea{width:100%}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.inv-unpaid{color:var(--red)}
.inv-partial{color:var(--amber)}
.inv-paid{color:var(--green)}
.inv-year-section{margin-bottom:24px}
.inv-year-header{display:flex;align-items:center;padding:10px 16px;background:var(--bg3);border-radius:var(--radius) var(--radius) 0 0;border:1px solid var(--border);border-bottom:none;font-size:14px;font-weight:500}
.inv-year-section .table-wrap{border-radius:0 0 var(--radius) var(--radius)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:8px 0}
.progress-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:4px}
.progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s}
#toast{position:fixed;bottom:24px;right:24px;background:var(--bg4);border:1px solid var(--border2);border-radius:var(--radius);padding:10px 16px;font-size:12px;z-index:200;opacity:0;transform:translateY(8px);transition:all .2s;pointer-events:none}
#toast.show{opacity:1;transform:translateY(0)}
.import-list{margin-top:16px}
.import-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--radius);background:var(--bg3);margin-bottom:6px;font-size:12px}
.import-row .idate{color:var(--text3);width:90px;flex-shrink:0}
.import-row .idesc{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.import-row .iamt{width:90px;text-align:right;flex-shrink:0}
.section-title{font-family:var(--font-display);font-size:14px;color:var(--text2);margin-bottom:12px;margin-top:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.empty-state{text-align:center;padding:60px 20px;color:var(--text3)}
.empty-state h3{font-family:var(--font-display);font-size:18px;color:var(--text2);margin-bottom:8px}
.loading{text-align:center;padding:40px;color:var(--text3);font-size:12px}
.bank-pill{display:inline-flex;align-items:center;padding:3px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:20px;font-size:11px;color:var(--text2);margin:2px}
.bank-pill.detected{border-color:var(--accent);color:var(--accent2)}
.import-meta{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius2);padding:16px;margin-top:16px}
.import-meta-title{color:var(--text2);font-size:11px;margin-bottom:12px;font-weight:500}
.qe-row{display:flex;align-items:center;border-bottom:1px solid var(--border);transition:background .1s;cursor:default}
.qe-row:hover{background:var(--bg2)}
.qe-row:focus{background:var(--bg3);outline:2px solid var(--accent);outline-offset:-2px}
.qe-row.qe-done{opacity:.4}
.qe-date{color:var(--text3);font-size:11px;padding:9px 12px;width:96px;flex-shrink:0}
.qe-desc{flex:1;padding:9px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.qe-amt{padding:9px 12px;width:100px;text-align:right;flex-shrink:0;font-size:12px}
.qe-acct{color:var(--text3);font-size:11px;padding:9px 8px;width:130px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qe-cat{padding:4px 8px;width:190px;flex-shrink:0}
.qe-cat select{width:100%;padding:5px 8px;font-size:12px;border-radius:var(--radius);background:var(--bg4);border:1px solid var(--border2)}
.qe-cat select:focus{border-color:var(--accent);outline:none}
.qe-status{width:28px;text-align:center;flex-shrink:0;font-size:13px}
.qe-note{flex-shrink:0;width:220px;padding:4px 8px}
.qe-note-text{color:var(--text3);font-size:11px;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;padding:5px 4px}
.qe-note-text.has-note{color:var(--text2);font-style:normal}
.qe-note input{width:100%;padding:5px 8px;font-size:12px;border-radius:var(--radius);background:var(--bg4);border:1px solid var(--accent);color:var(--text)}
.qe-note input:focus{outline:none}
.qe-hint{background:var(--bg2);border-bottom:1px solid var(--border);padding:8px 16px;font-size:11px;color:var(--text3);display:flex;gap:20px;flex-shrink:0}
.qe-key{background:var(--bg3);border:1px solid var(--border2);border-radius:4px;padding:1px 6px;font-size:10px;color:var(--text2)}
.tx-row{cursor:pointer}
.tx-row.tx-open td{background:var(--bg3)}
.tx-detail-row td{background:var(--bg3);padding:12px 16px 16px 32px;border-bottom:2px solid var(--border2)}
.tx-detail-row.hidden{display:none}
.tx-detail-grid{display:flex;flex-wrap:wrap;gap:6px 24px;margin-bottom:10px}
.tx-detail-field{font-size:11px}
.tx-detail-label{color:var(--text3);margin-right:4px}
.tx-detail-value{color:var(--text2)}
.tx-note-area{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.tx-note-display{color:var(--text2);font-size:12px;font-style:italic;flex:1;cursor:text}
.tx-note-display.empty{color:var(--text3)}
.tx-note-input{flex:1;font-size:12px;padding:5px 8px}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.monthly-section{margin-bottom:28px}
.monthly-month-header{font-family:var(--font-display);font-size:15px;color:var(--text);padding:8px 0 6px;border-bottom:1px solid var(--border2);margin-bottom:8px;display:flex;align-items:center;gap:10px}
.monthly-row{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--border);padding:8px 4px;transition:background .1s}
.monthly-row:hover{background:var(--bg2)}
.monthly-acct{flex:1;font-size:12px;font-weight:500;padding:0 12px}
.monthly-bank{color:var(--text3);font-size:11px;width:110px;flex-shrink:0}
.monthly-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;width:110px;justify-content:center;flex-shrink:0}
.monthly-pill.done{background:#1a2a1a;color:var(--green)}
.monthly-pill.pending{background:#222;color:var(--text3)}
.monthly-check{display:flex;align-items:center;gap:6px;width:120px;justify-content:center;cursor:pointer;font-size:11px;flex-shrink:0}
.monthly-check input{cursor:pointer;width:14px;height:14px;accent-color:var(--green)}
.monthly-link{color:var(--accent2);font-size:11px;padding:0 16px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.monthly-link:hover{text-decoration:underline}
.monthly-txcount{color:var(--text3);font-size:11px;width:80px;text-align:right;flex-shrink:0;padding-right:12px}