:root{
  --bg:#f2f5f8; --card:#ffffff; --ink:#16232e; --ink-soft:#4b5b6a; --ink-faint:#8a97a3;
  --rule:#e6ebef; --primary:#1c2b3a; --accent:#2f6fb3;
  --danger:#c0392b; --danger-bg:#fdecea;
  --warn:#b8720a; --warn-bg:#fdf3e0;
  --ok:#1e8449; --ok-bg:#e9f7ef;
  --shadow: 0 1px 2px rgba(20,30,40,.06), 0 1px 8px rgba(20,30,40,.05);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.login-card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:32px 28px;max-width:360px;width:100%;}
.login-card h1{font-size:1.3rem;margin:0 0 4px;}
.login-card .sub{color:var(--ink-faint);font-size:.9rem;margin:0 0 20px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:.8rem;color:var(--ink-soft);margin-bottom:4px;}
.field input{width:100%;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;font-size:1rem;}
button.primary{width:100%;padding:12px;border:none;border-radius:10px;background:var(--primary);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;margin-top:6px;}
#login-error{color:var(--danger);font-size:.85rem;margin-top:10px;display:none;}

#app{display:none;max-width:760px;margin:0 auto;padding-bottom:90px;}
header.topbar{position:sticky;top:0;z-index:5;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;}
header.topbar h1{font-size:1.05rem;margin:0;display:flex;align-items:center;gap:8px;font-weight:600;}
header.topbar img{width:22px;height:22px;}
header.topbar button{background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:8px;padding:7px 12px;font-size:.82rem;cursor:pointer;}

nav.tabs{display:flex;gap:6px;padding:12px 16px 0;position:sticky;top:52px;background:var(--bg);z-index:4;}
nav.tabs button{flex:1;padding:9px 6px;border:none;border-radius:10px;background:var(--card);color:var(--ink-soft);font-size:.85rem;font-weight:600;cursor:pointer;box-shadow:var(--shadow);}
nav.tabs button.active{background:var(--primary);color:#fff;}

main{padding:14px 16px 0;}
.view{display:none;}
.view.active{display:block;}

.hero{background:linear-gradient(135deg,#1c2b3a,#2f4d63);color:#fff;border-radius:16px;padding:22px 20px;margin-bottom:14px;box-shadow:var(--shadow);}
.hero .label{font-size:.78rem;opacity:.75;text-transform:uppercase;letter-spacing:.03em;}
.hero .value{font-size:2.3rem;font-weight:700;margin:4px 0 6px;}
.hero .value.neg{color:#ffb4a8;}
.hero .value.pos{color:#a9f0c4;}
.hero .note{font-size:.82rem;opacity:.85;line-height:1.4;}

.kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.kpi{background:var(--card);border-radius:14px;padding:14px;box-shadow:var(--shadow);}
.kpi .label{font-size:.72rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px;}
.kpi .value{font-size:1.35rem;font-weight:700;}
.kpi .value.debt{color:var(--danger);}
.kpi .value.save{color:var(--ok);}
.kpi .sub{font-size:.75rem;color:var(--ink-faint);margin-top:2px;}

.card-panel{background:var(--card);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow);}
.card-panel h3{margin:0 0 12px;font-size:.95rem;}
.card-panel h3 .cnt{color:var(--ink-faint);font-weight:400;font-size:.82rem;}

.alert{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:10px;margin-bottom:8px;font-size:.86rem;line-height:1.4;}
.alert:last-child{margin-bottom:0;}
.alert.red{background:var(--danger-bg);color:var(--danger);}
.alert.amber{background:var(--warn-bg);color:var(--warn);}
.alert.green{background:var(--ok-bg);color:var(--ok);}
.alert .dot{width:8px;height:8px;border-radius:50%;background:currentColor;margin-top:5px;flex-shrink:0;}
.alert b{display:block;color:var(--ink);}
.alert .sub{color:inherit;opacity:.85;}
.empty{color:var(--ink-faint);font-size:.85rem;padding:6px 0;}

.debt-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule);gap:10px;}
.debt-row:last-child{border-bottom:none;}
.debt-row .name{font-weight:600;font-size:.92rem;}
.debt-row .bank{font-size:.74rem;color:var(--ink-faint);}
.debt-row .right{text-align:right;}
.debt-row .amt{font-weight:700;color:var(--danger);font-size:.98rem;}
.debt-row .due{font-size:.74rem;margin-top:2px;}
.due.chip{display:inline-block;padding:2px 8px;border-radius:20px;font-weight:600;}
.due.chip.red{background:var(--danger-bg);color:var(--danger);}
.due.chip.amber{background:var(--warn-bg);color:var(--warn);}
.due.chip.green{background:var(--ok-bg);color:var(--ok);}
.due.chip.gray{background:#eef1f3;color:var(--ink-faint);}

.acct-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--rule);}
.acct-row:last-child{border-bottom:none;}
.acct-row .name{font-size:.9rem;}
.acct-row .bank{font-size:.72rem;color:var(--ink-faint);}
.acct-row .amt{font-weight:700;color:var(--ok);}
.acct-total{display:flex;justify-content:space-between;padding-top:10px;margin-top:4px;border-top:2px solid var(--rule);font-weight:700;}

.bar-row{margin-bottom:10px;}
.bar-row:last-child{margin-bottom:0;}
.bar-row .top{display:flex;justify-content:space-between;font-size:.83rem;margin-bottom:4px;}
.bar-row .top .cat{font-weight:600;}
.bar-track{height:8px;background:var(--rule);border-radius:6px;overflow:hidden;}
.bar-fill{height:100%;background:var(--accent);border-radius:6px;}

.month-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.month-row .lbl{width:52px;font-size:.78rem;color:var(--ink-faint);}
.month-row .bars{flex:1;display:flex;gap:2px;height:16px;border-radius:4px;overflow:hidden;background:var(--rule);}
.month-row .in{background:var(--ok);}
.month-row .out{background:var(--danger);}
.month-row .figs{width:132px;text-align:right;font-size:.76rem;color:var(--ink-faint);}
.legend{display:flex;gap:16px;font-size:.76rem;color:var(--ink-faint);margin-top:8px;}
.legend span{display:inline-flex;align-items:center;gap:5px;}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;}

select#month-select, select#acct-filter{width:100%;padding:9px 10px;border:1px solid var(--rule);border-radius:10px;font-size:.88rem;background:#fff;margin-bottom:12px;}
table.ledger{width:100%;border-collapse:collapse;font-size:.84rem;}
table.ledger th{text-align:left;color:var(--ink-faint);font-weight:600;font-size:.72rem;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid var(--rule);}
table.ledger td{padding:8px 4px;border-bottom:1px solid var(--rule);vertical-align:top;}
table.ledger td.num{text-align:right;white-space:nowrap;font-weight:600;}
table.ledger td.num.exp{color:var(--danger);}
table.ledger td.num.inc{color:var(--ok);}
table.ledger .desc-cat{font-size:.72rem;color:var(--ink-faint);}
table.ledger .desc-card{font-size:.72rem;color:var(--ink-faint);}

.section-note{font-size:.78rem;color:var(--ink-faint);margin-top:8px;line-height:1.4;}
footer.note{text-align:center;color:var(--ink-faint);font-size:.72rem;padding:16px;}

#chat-fab{position:fixed;bottom:20px;right:20px;background:var(--primary);color:#fff;border:none;border-radius:24px;padding:12px 18px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.2);cursor:pointer;z-index:10;}
.chat-panel{position:fixed;bottom:0;right:0;left:0;max-width:400px;margin-left:auto;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.15);display:flex;flex-direction:column;height:70vh;z-index:11;}
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--primary);color:#fff;border-radius:16px 16px 0 0;font-weight:600;font-size:.9rem;}
.chat-header button{background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;line-height:1;}
.chat-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;}
.chat-msg{max-width:85%;padding:9px 12px;border-radius:12px;font-size:.86rem;line-height:1.4;}
.chat-msg-bot{background:#eef1f3;align-self:flex-start;}
.chat-msg-user{background:var(--accent);color:#fff;align-self:flex-end;}
.chat-msg-error{background:var(--danger-bg);color:var(--danger);align-self:flex-start;}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--rule);}
.chat-form input{flex:1;padding:9px 12px;border:1px solid var(--rule);border-radius:20px;font-size:.88rem;}
.chat-form button{background:var(--primary);color:#fff;border:none;border-radius:20px;padding:9px 16px;font-size:.86rem;cursor:pointer;}

@media (min-width:500px){ .kpi-row{grid-template-columns:1fr 1fr 1fr;} }