:root{--navy:#183563;--blue:#2d61a7;--ink:#172033;--muted:#697386;--line:#dfe4eb;--paper:#fff;--bg:#f4f6f9;--red:#b42318;--green:#1f7a3d;--amber:#8a5c00;--shadow:0 14px 35px rgba(24,53,99,.08)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.topbar{height:70px;padding:0 clamp(16px,4vw,48px);display:flex;align-items:center;justify-content:space-between;background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--navy);color:#fff;font:700 19px Georgia,serif}
.brand strong,.brand small{display:block}.brand strong{font-size:16px}.brand small{font-size:11px;color:var(--muted);margin-top:1px}
.account{display:flex;align-items:center;gap:10px}.account span{color:var(--muted);font-size:12px}
main{width:min(1100px,calc(100% - 32px));margin:auto;padding:28px 0 64px}

.button,select,input{font:inherit}
.button{border:1px solid transparent;border-radius:9px;padding:9px 13px;cursor:pointer;font-weight:700;font-size:13px;white-space:nowrap}
.primary{background:var(--navy);color:#fff}.primary:hover{background:#254d84}
.secondary{background:#fff;color:var(--navy);border-color:#ccd4df}.secondary:hover{background:#f5f7fa}
.danger{background:#fff;color:var(--red);border-color:#f0b7b3}
.icon-button{border:0;background:#f1f3f6;width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;color:var(--navy)}

.section-tabs{display:flex;gap:6px;margin:0 0 16px;padding:5px;background:#e8edf4;border-radius:12px;width:max-content}
.section-tab{border:0;border-radius:9px;padding:10px 18px;background:transparent;color:#586276;font:750 13px/1 inherit;cursor:pointer}
.section-tab.active{background:#fff;color:var(--navy);box-shadow:0 3px 10px rgba(24,53,99,.1)}

.panel{background:var(--paper);border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden}
.panel[hidden]{display:none}
.panel-head{padding:18px 22px;display:flex;gap:16px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);flex-wrap:wrap}
h2{font:600 21px/1.2 Georgia,serif;margin:0}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.actions select{border:1px solid #ccd4df;border-radius:9px;padding:8px 10px;background:#fff}

.month-switch{display:flex;align-items:center;gap:10px}
.month-switch h2{min-width:150px;text-align:center}

.rta-banner{display:flex;justify-content:space-between;align-items:center;margin:16px 22px;padding:16px 20px;border-radius:12px;background:#eaf0fa;color:var(--navy)}
.rta-banner span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.rta-banner strong{font:700 24px Georgia,serif}
.rta-banner.negative{background:#fde6e6;color:var(--red)}
.rta-banner.zero{background:#e5f3e6;color:var(--green)}

.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:640px}
th{padding:11px 14px;background:#f7f8fa;color:#596274;font-size:10px;text-transform:uppercase;letter-spacing:.06em;text-align:left;border-bottom:1px solid var(--line)}
td{padding:10px 14px;border-bottom:1px solid #e8ebef;vertical-align:middle;font-size:13px}
tbody tr:hover{background:#fafbfd}
.num{text-align:right;font-variant-numeric:tabular-nums}
.category-row td{background:#f7f8fa;font-weight:750;color:var(--navy);padding-top:14px}
.category-row .cat-add{float:right;font-size:11px;font-weight:700;color:var(--blue);background:none;border:0;cursor:pointer}
.available-cell.positive{color:var(--green);font-weight:700}
.available-cell.negative{color:var(--red);font-weight:700}
.available-cell.zero{color:var(--muted)}
.assigned-input{width:90px;border:1px solid #ccd4df;border-radius:7px;padding:6px 8px;text-align:right;font-variant-numeric:tabular-nums}
.envelope-name{display:flex;align-items:center;gap:8px}
.envelope-rename{border:0;background:transparent;color:#a9b2bf;cursor:pointer;font-size:12px}
.envelope-rename:hover{color:var(--navy)}
.empty{text-align:center;padding:40px;color:var(--muted)}

.quick-add{display:grid;grid-template-columns:130px 1.4fr 1fr 1fr 150px 1fr auto;gap:8px;padding:16px 22px;border-bottom:1px solid var(--line);background:#fafbfd;align-items:center}
.quick-add input,.quick-add select{border:1px solid #ccd4df;border-radius:8px;padding:9px 10px;background:#fff;width:100%}
.amount-field{display:flex;gap:6px}
.amount-field input{text-align:right}
.flow-toggle{border:1px solid #ccd4df;border-radius:8px;padding:0 10px;background:#fff;font-weight:750;font-size:12px;cursor:pointer;color:var(--red);min-width:44px}
.flow-toggle[data-flow="in"]{color:var(--green)}
@media(max-width:900px){.quick-add{grid-template-columns:1fr 1fr}}

.amount-out{color:var(--red)}.amount-in{color:var(--green)}
.row-action{border:0;background:transparent;color:#7b8492;font-size:16px;cursor:pointer;padding:4px 8px;border-radius:6px}
.row-action:hover{background:#edf1f6;color:var(--navy)}

.bill-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px 22px}
@media(max-width:760px){.bill-list{grid-template-columns:1fr}}
.bill-card{padding:16px;border:1px solid var(--line);border-radius:14px;background:#fafbfd;cursor:pointer}
.bill-card:hover{border-color:#aebedb}
.bill-card h3{margin:0 0 6px;font:700 17px/1.2 Georgia,serif;color:var(--navy)}
.bill-meta{display:flex;flex-wrap:wrap;gap:7px;color:var(--muted);font-size:12px;margin-bottom:8px}
.bill-pill{display:inline-flex;border-radius:999px;padding:3px 9px;background:#eaf0fa;color:var(--navy);font-size:11px;font-weight:750}
.bill-due{font-weight:750}
.bill-card.overdue{border-color:#f0b7b3;background:#fff7f7}
.bill-card.overdue .bill-due{color:var(--red)}
.bill-card.due-soon .bill-due{color:var(--amber)}
.bill-card.upcoming .bill-due{color:var(--muted)}

dialog{width:min(560px,calc(100% - 24px));border:0;border-radius:16px;padding:0;box-shadow:0 30px 90px rgba(10,25,50,.3)}
dialog::backdrop{background:rgba(12,24,45,.55)}
dialog form{padding:22px}
.dialog-head{margin-bottom:16px}
.dialog-head h3{margin:0;font:600 19px Georgia,serif}
.dialog-note{margin:0 0 14px;color:#4d5665;font-size:13px}
dialog label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:750;color:#4d5665;margin-bottom:14px}
dialog input,dialog select{border:1px solid #ccd4df;border-radius:9px;padding:9px 11px;color:var(--ink);background:#fff}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.form-grid label{margin-bottom:0}
.form-grid .wide{grid-column:1/-1}
.checkbox-field span{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#3c4657}
.checkbox-field input{width:16px;height:16px;accent-color:var(--navy)}
.dialog-actions{display:flex;gap:9px;align-items:center}
.dialog-actions span{flex:1}

.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);background:#172033;color:#fff;padding:11px 17px;border-radius:9px;opacity:0;pointer-events:none;transition:.2s;box-shadow:var(--shadow);z-index:30}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:620px){.topbar{height:60px}main{width:min(100% - 20px,1100px);padding-top:16px}.panel-head{align-items:flex-start;flex-direction:column}.account span{display:none}}