.detail-form { max-width: 860px; }
.detail-form label { display: grid; gap: 7px; margin-bottom: 18px; color: var(--ink); font-weight: 600; }
.detail-form .subtle { font-weight: 400; }
.hidden { display: none !important; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.segmented { display: inline-flex; gap: 4px; padding: 4px; margin: 8px 0 24px; background: var(--green-2); border-radius: 8px; }
.segmented label { display: block; margin: 0; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.segmented label:has(input:checked) { background: var(--green); color: white; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.textarea { resize: vertical; min-height: 78px; }
.field-note { align-self: center; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.file-field input[type="file"] { padding: 10px 0; }
.file-name { color: var(--muted); font-size: .9rem; font-weight: 400; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.duplicate-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.duplicate-list li { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: .85rem; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.account-actions .btn { font-size: .8rem; padding: 7px 10px; }
.balance-mode { display: grid; gap: 10px; margin: 4px 0 18px; color: var(--ink); }
.balance-mode label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; gap: 0; } .form-actions { flex-direction: column-reverse; } .form-actions .btn { width: 100%; } }
.category-list { display: grid; }
.category-group { border-bottom: 1px solid var(--line); padding: 4px 0; }
.category-group:last-child { border-bottom: 0; }
.category-row, .subcategory-row { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; background: none; border: 0; padding: 11px 8px; border-radius: 9px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.category-row:hover, .subcategory-row:hover { background: var(--surface-2); }
.category-row { font-weight: 700; font-size: 14px; }
.category-total, .subcategory-total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.subcategory-list { display: grid; }
.subcategory-row { padding-left: 8px; font-size: 13px; color: var(--muted); }
.subcategory-row .subcategory-name { padding-left: 26px; }
.subcategory-row .subcategory-name::before { content: '↳'; margin-right: 8px; color: var(--faint); }
.modal-tx-list { max-height: 60vh; overflow-y: auto; margin-top: 4px; }
:root{--bg:#f5f6f3;--surface:#fff;--surface-2:#eef1ed;--line:#dfe5de;--ink:#18231f;--muted:#718078;--faint:#98a59e;--green:#0d6b56;--green-2:#dff3eb;--orange:#b6532f;--orange-2:#fbe9e2;--blue:#377a9e;--shadow:0 10px 30px rgba(26,49,40,.06);--radius:16px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px "DM Sans",system-ui,sans-serif}button,input,select,textarea{font:inherit}button,a{tap-highlight-color:transparent}.app-shell{display:flex;min-height:100vh}.sidebar{width:246px;background:#102b24;color:#dcebe5;padding:26px 16px;display:flex;flex-direction:column;flex-shrink:0}.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-weight:700;font-size:17px;letter-spacing:-.02em;padding:0 11px 32px}.brand small{display:block;color:#91afa3;font-weight:400;font-size:11px;letter-spacing:0;margin-top:2px}.brand-mark{width:34px;height:34px;border-radius:11px;background:#dff3eb;color:var(--green);display:grid;place-items:center;font-weight:700;font-size:19px}.side-nav{display:grid;gap:5px}.side-nav a{color:#99b4a9;text-decoration:none;padding:12px 13px;border-radius:11px;display:flex;gap:12px;align-items:center;font-size:13px}.side-nav a:first-letter{font-size:18px}.side-nav a.active,.side-nav a:hover{background:#1d4b3e;color:#fff}.sidebar-foot{margin-top:auto;color:#91afa3;font-size:11px;display:flex;align-items:center;gap:8px;padding:12px}.status-dot{width:7px;height:7px;border-radius:50%;background:#53bd91}.main{min-width:0;flex:1}.topbar{height:93px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(20px,4vw,54px);border-bottom:1px solid var(--line);background:rgba(245,246,243,.92)}.eyebrow{font-size:10px;letter-spacing:.13em;color:var(--muted);margin:0 0 5px;font-weight:700}.topbar h1{font-size:26px;letter-spacing:-.04em;margin:0}.top-actions{display:flex;align-items:center;gap:15px}.sync-pill{color:var(--green);background:var(--green-2);padding:7px 11px;border-radius:30px;font-size:11px;font-weight:600}.avatar{border:0;background:#d9e4de;color:var(--green);width:35px;height:35px;border-radius:50%;font-size:11px;font-weight:700;cursor:pointer}.mobile-menu{display:none;border:0;background:transparent;font-size:21px;margin-right:12px}.content{max-width:1220px;margin:0 auto;padding:32px clamp(20px,4vw,54px) 70px}.grid{display:grid;gap:18px}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:21px;box-shadow:var(--shadow)}.hero-card{background:#12392f;color:#fff;border:0;min-height:190px;display:flex;flex-direction:column;justify-content:space-between}.hero-card .label,.hero-card .muted{color:#9fc5b7}.hero-card .amount{font-size:40px;color:#fff}.label{font-size:12px;color:var(--muted);margin:0 0 9px}.amount{font:600 26px "IBM Plex Mono",monospace;letter-spacing:-.04em}.amount.small{font-size:17px}.amount.positive{color:var(--green)}.amount.negative{color:var(--orange)}.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.card-head h2,.section-title{font-size:16px;margin:0;letter-spacing:-.02em}.subtle{font-size:12px;color:var(--muted)}.link{color:var(--green);text-decoration:none;font-weight:600;font-size:12px}.account-card{padding:15px 17px}.account-card .account-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.account-name{font-weight:600}.account-type{font-size:11px;color:var(--muted);margin-top:3px}.account-icon{width:34px;height:34px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;color:var(--green);font-weight:700}.mini-chart{height:45px;display:flex;align-items:end;gap:5px}.mini-chart i{display:block;flex:1;background:#b9e1d1;border-radius:4px 4px 1px 1px}.action-row{display:flex;gap:10px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:11px 15px;border-radius:10px;cursor:pointer;font-weight:600;font-size:13px}.btn:hover{border-color:#aac8bb}.btn.primary{background:var(--green);color:#fff;border-color:var(--green)}.btn.ghost{background:var(--surface-2);border-color:transparent}.btn.danger{color:var(--orange)}.section{margin-top:28px}.transaction-list{display:grid}.transaction-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--line)}.transaction-row:first-child{border-top:0}.tx-main{display:flex;align-items:center;gap:12px;min-width:0}.tx-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);font-size:16px;flex-shrink:0}.tx-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tx-meta{font-size:11px;color:var(--muted);margin-top:3px}.tx-amount{text-align:right;font:600 14px "IBM Plex Mono",monospace;white-space:nowrap}.tx-amount.expense{color:var(--orange)}.tx-amount.income{color:var(--green)}.stat-strip{display:flex;gap:30px;flex-wrap:wrap}.stat-strip .label{margin-bottom:5px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:650px}.table th{text-align:left;color:var(--muted);font-size:11px;font-weight:600;padding:11px 10px;border-bottom:1px solid var(--line)}.table td{padding:14px 10px;border-bottom:1px solid var(--line);font-size:13px}.table td:last-child,.table th:last-child{text-align:right}.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}.input,.select,.textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:11px 12px;color:var(--ink);outline:none}.input:focus,.select:focus,.textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-2)}.filters .input,.filters .select{width:auto;min-width:150px}.field{display:grid;gap:6px;margin-bottom:14px}.field label{font-size:12px;color:var(--muted);font-weight:600}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 14px}.form-grid .wide{grid-column:1/-1}.quick-layout{max-width:650px;margin:0 auto}.quick-amount{text-align:center;font:600 47px "IBM Plex Mono",monospace;letter-spacing:-.06em;margin:12px 0 3px;min-height:62px}.quick-meta{text-align:center;color:var(--muted);margin:0 0 25px;font-size:12px}.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.chip{border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:12px 8px;text-align:center;cursor:pointer;font-size:12px}.chip.selected{background:var(--green-2);border-color:#65b398;color:var(--green);font-weight:700}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:20px 0}.key{border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:17px 0;font-size:19px;cursor:pointer}.key:active{background:var(--surface-2)}.save-btn{width:100%;font-size:14px;padding:14px}.hint{text-align:center;color:var(--faint);font-size:11px}.empty{text-align:center;color:var(--muted);padding:35px 15px}.banner{padding:12px 14px;border-radius:10px;background:var(--green-2);color:var(--green);font-size:12px;margin-bottom:18px}.banner.warn{background:#fff1d8;color:#8b5a0b}.tabs{display:flex;gap:5px;background:var(--surface-2);padding:4px;border-radius:11px;width:max-content}.tab{border:0;background:transparent;border-radius:8px;padding:8px 14px;color:var(--muted);cursor:pointer;font-size:12px}.tab.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #ccd6d0}.bar-list{display:grid;gap:15px}.bar-item{display:grid;gap:6px}.bar-label{display:flex;justify-content:space-between;font-size:12px}.bar-label span:last-child{font:500 12px "IBM Plex Mono",monospace}.bar-track{height:8px;background:var(--surface-2);border-radius:9px;overflow:hidden}.bar-track i{display:block;height:100%;border-radius:9px;background:var(--green)}.toast-region{position:fixed;right:25px;top:20px;z-index:5}.toast{background:#18352d;color:#fff;border-radius:10px;padding:12px 16px;box-shadow:var(--shadow);font-size:12px;margin-bottom:8px}.toast.error{background:#8f3f25}.bottom-nav{display:none}.modal-backdrop{position:fixed;inset:0;background:rgba(11,28,22,.4);display:grid;place-items:center;padding:20px;z-index:10}.modal{background:var(--surface);border-radius:18px;width:min(560px,100%);max-height:90vh;overflow:auto;padding:24px}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-head h2{margin:0;font-size:19px}.close{border:0;background:var(--surface-2);border-radius:50%;width:30px;height:30px;cursor:pointer}
@media(max-width:900px){.sidebar{width:205px}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.app-shell{display:block}.sidebar{position:fixed;z-index:8;inset:0 auto 0 0;width:250px;transform:translateX(-105%);transition:transform .2s;box-shadow:15px 0 35px #102b2440}.sidebar.open{transform:translateX(0)}.mobile-menu{display:block}.topbar{height:76px;padding:0 18px}.topbar h1{font-size:21px}.eyebrow{font-size:9px}.top-actions .sync-pill{display:none}.content{padding:22px 16px 95px}.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.grid-4 .account-card{grid-column:auto}.hero-card{min-height:170px}.amount{font-size:23px}.hero-card .amount{font-size:34px}.bottom-nav{position:fixed;display:flex;z-index:7;bottom:0;left:0;right:0;height:70px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);justify-content:space-around;align-items:center}.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--muted);font-size:19px;min-width:45px}.bottom-nav a span{font-size:10px}.bottom-nav a.active{color:var(--green)}.bottom-nav .bottom-add{width:48px;height:48px;border-radius:50%;background:var(--green);color:#fff;font-size:29px;line-height:45px}.chips{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.card{padding:17px}.table-wrap{margin:0 -4px}.toast-region{right:16px;left:16px;top:12px}}