:root{--bg: #0f1117;--surface: #171a23;--surface-2: #1f2330;--border: #2a2f3d;--text: #e6e8ee;--text-dim: #9aa1b1;--primary: #6366f1;--primary-soft: #6366f133;--green: #34d399;--red: #f87171;--amber: #fbbf24;--radius: 14px;--shadow: 0 4px 20px rgba(0, 0, 0, .25)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}button{font-family:inherit;cursor:pointer}input,select{font-family:inherit;font-size:16px}.app{max-width:1080px;margin:0 auto;padding:0 20px 60px}.topbar{display:flex;align-items:center;gap:12px;padding:20px 0 16px}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:-.02em}.brand .logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#8b5cf6);display:grid;place-items:center;color:#fff;font-size:16px}.brand small{color:var(--text-dim);font-weight:500;font-size:12px}.spacer{flex:1}.monthbar{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px}.monthbar button{background:transparent;border:none;color:var(--text);width:30px;height:30px;border-radius:999px;font-size:16px}.monthbar button:hover{background:var(--surface-2)}.monthbar .label{min-width:130px;text-align:center;font-weight:600;font-size:14px}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:8px 0 22px;overflow-x:auto}.tabs button{background:transparent;border:none;color:var(--text-dim);padding:12px 16px;font-size:14px;font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}.tabs button.active{color:var(--text);border-bottom-color:var(--primary)}.tabs button:hover{color:var(--text)}.tab-ico{display:none}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.card h3{margin:0 0 14px;font-size:15px;font-weight:700}.grid{display:grid;gap:16px}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-2{grid-template-columns:repeat(2,1fr)}@media (max-width: 760px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.stat .label{color:var(--text-dim);font-size:13px;font-weight:600}.stat .value{font-size:26px;font-weight:800;margin-top:6px;letter-spacing:-.02em}.stat .sub{color:var(--text-dim);font-size:12px;margin-top:4px}.value.green{color:var(--green)}.value.red{color:var(--red)}.value.amber{color:var(--amber)}.budget-row{padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px}.budget-row:last-child{margin-bottom:0}.budget-row.total{margin-top:14px;background:linear-gradient(135deg,var(--primary-soft),var(--surface-2));border:1px solid var(--primary);box-shadow:0 4px 18px #6366f12e}.budget-row.total .name{font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}.budget-row.total .right{font-weight:800;font-size:16px}.budget-row.total .right .of{color:var(--text-dim);font-weight:500;font-size:13px}.budget-row.total .bar{background:#ffffff14;height:10px}.budget-row.total .csub{font-size:13px;font-weight:600}.budget-row .top{display:flex;align-items:center;gap:10px;margin-bottom:8px}.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.budget-row .name{font-weight:600;font-size:14px}.budget-row .nums{margin-left:auto;font-size:13px;color:var(--text-dim)}.budget-row .nums b{color:var(--text)}.bar{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden}.bar>span{display:block;height:100%;border-radius:999px;transition:width .3s ease}.remaining{font-size:13px;margin-top:6px}.remaining.over{color:var(--red);font-weight:600}.remaining.ok{color:var(--green)}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:12px;color:var(--text-dim);font-weight:600}.input,select.input{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 12px;outline:none;width:100%}.input:focus,select.input:focus{border-color:var(--primary)}.btn{background:var(--primary);color:#fff;border:none;border-radius:10px;padding:10px 16px;font-weight:600;font-size:14px}.btn:hover{filter:brightness(1.08)}.btn.ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}.btn.danger{background:transparent;color:var(--red);border:1px solid transparent;padding:6px 8px}.btn.danger:hover{background:#f8717122}.btn.sm{padding:6px 12px;font-size:13px}.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.row>.field{flex:1;min-width:120px}.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px}.seg button{background:transparent;border:none;color:var(--text-dim);padding:8px 16px;border-radius:8px;font-weight:600;font-size:13px}.seg button.active{background:var(--primary);color:#fff}.seg button.active.expense{background:var(--red)}.seg button.active.income{background:var(--green);color:#06281d}.txn{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.txn:last-child{border-bottom:none}.txn .meta{display:flex;flex-direction:column;gap:2px;min-width:0}.txn .meta .title{font-weight:600;font-size:14px}.txn .meta .sub{color:var(--text-dim);font-size:12px}.txn .amt{margin-left:auto;font-weight:700;font-size:15px;white-space:nowrap}.txn .amt.income{color:var(--green)}.txn .amt.expense{color:var(--text)}.txn .date{width:52px;text-align:center;flex-shrink:0;color:var(--text-dim);font-size:12px;font-weight:600}.pill{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim)}.empty{text-align:center;color:var(--text-dim);padding:40px 20px;font-size:14px}.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);font-weight:700;margin:24px 0 10px}.list-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}.list-item:last-child{border-bottom:none}.muted{color:var(--text-dim)}.right{margin-left:auto}.nowrap{white-space:nowrap}.reconcile{display:flex;justify-content:space-between;padding:8px 0;font-size:14px}.reconcile.total{border-top:1px solid var(--border);margin-top:6px;padding-top:12px;font-weight:700}.hint{font-size:12px;color:var(--text-dim);margin-top:8px;line-height:1.5}.tip-popup{position:fixed;left:12px;right:12px;bottom:72px;z-index:50;max-width:472px;margin:0 auto;display:flex;gap:10px;align-items:center;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--primary) 45%,transparent);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);font-size:12.5px;line-height:1.5;color:var(--text-dim);animation:tip-rise .25s ease}.tip-popup .tip-ico{flex-shrink:0;font-size:16px}.tip-popup .tip-text{flex:1}.tip-popup .btn.sm{flex-shrink:0}@keyframes tip-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:100%;max-width:380px;box-shadow:var(--shadow)}.auth-msg{font-size:13px;padding:10px 12px;border-radius:10px;line-height:1.4}.auth-msg.err{background:#f8717122;color:var(--red);border:1px solid #f8717155}.auth-msg.ok{background:#34d39922;color:var(--green);border:1px solid #34d39955}.auth-msg.warn{background:#fbbf2422;color:var(--amber);border:1px solid #fbbf2455}.centered{min-height:100vh;display:grid;place-items:center}.budget-row.clickable{cursor:pointer;transition:background .15s}.budget-row.clickable:hover{background:var(--surface-2)}.budget-row .chev{color:var(--text-dim);font-size:18px;flex-shrink:0;transition:transform .2s ease}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px;z-index:50}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:540px;max-height:88vh;overflow-y:auto;padding:20px}.modal-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}.modal-head .right{margin-left:auto}.mini-stat{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px}.mini-stat .label{color:var(--text-dim);font-size:11px;font-weight:600}.mini-stat .value{font-size:17px;font-weight:700;margin-top:2px}.mini-stat .value.green{color:var(--green)}.mini-stat .value.red{color:var(--red)}.facts{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--text-dim);margin-bottom:4px}.facts b{color:var(--text)}.trend{display:flex;align-items:flex-end;gap:8px;height:90px;margin-bottom:4px}.trend-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}.trend-bars{flex:1;width:100%;position:relative;display:flex;align-items:flex-end;justify-content:center}.trend-budget{position:absolute;bottom:0;width:70%;border:1px dashed var(--border);border-bottom:none;border-radius:4px 4px 0 0}.trend-spent{width:60%;border-radius:4px 4px 0 0;min-height:2px;position:relative;z-index:1}.trend-label{font-size:10px;color:var(--text-dim);margin-top:6px}code{background:var(--surface-2);padding:1px 5px;border-radius:5px;font-size:.92em}@media (max-width: 640px){.app{padding:0 14px;padding-bottom:calc(72px + env(safe-area-inset-bottom))}.topbar{position:sticky;top:0;z-index:30;flex-wrap:wrap;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 0 12px;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px)}.brand{font-size:17px}.brand small{font-size:11px}.brand div{min-width:0}.brand small{display:block;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar .btn.sm{padding:8px 12px}.monthbar{order:3;width:100%;justify-content:space-between}.monthbar .label{flex:1}.monthbar button{width:36px;height:36px}.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;border-top:1px solid var(--border);border-bottom:none;overflow:visible;background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-bottom:env(safe-area-inset-bottom)}.tabs button{flex:1;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 4px;border-bottom:none;font-size:11px;font-weight:600}.tabs button.active{border-bottom:none;color:var(--primary)}.tab-ico{display:block;font-size:21px;line-height:1;filter:grayscale(.4);opacity:.7}.tabs button.active .tab-ico{filter:none;opacity:1}.btn{padding:12px 16px}.input,select.input{padding:12px 14px}.modal{padding:16px;border-radius:18px 18px 0 0}}.has-bottom-nav{padding-bottom:calc(76px + env(safe-area-inset-bottom))}.summary .summary-top{display:flex;align-items:baseline;justify-content:space-between}.summary .summary-spent{font-size:24px;font-weight:800;letter-spacing:-.02em}.summary .summary-of{font-size:12px;color:var(--text-dim);margin-top:2px}.summary .summary-left{font-size:13px;font-weight:700}.summary .bar{margin-top:12px}.hero{text-align:left}.hero-label{font-size:11px;font-weight:700;color:var(--text-dim);letter-spacing:.04em}.hero-value{font-size:30px;font-weight:800;letter-spacing:-.02em;margin-top:4px}.hero-sub{font-size:12px;color:var(--text-dim);margin-top:4px}.csub{font-size:12px;color:var(--text-dim);margin-top:6px}.csub .green{color:var(--green)}.csub .red{color:var(--red)}.add-link{background:none;border:none;color:var(--primary);font-weight:700;font-size:14px;padding:10px 2px;cursor:pointer}.due-row{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:8px}.due-row .meta{min-width:0;flex:1}.due-row .title{font-weight:700;font-size:14px}.due-row .sub{font-size:12px;color:var(--text-dim)}.acct-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}.acct-name{flex:1;background:transparent;border:none;color:var(--text);font-size:14px;font-weight:600;padding:6px 2px}.acct-name:focus{outline:none;border-bottom:1px solid var(--primary)}.acct-bal{max-width:130px;text-align:right}.sheet{background:var(--surface);border:1px solid var(--border);border-radius:18px 18px 0 0;box-shadow:var(--shadow);width:100%;max-width:540px;padding:22px 20px 24px;align-self:flex-end;max-height:92vh;overflow-y:auto}.modal-overlay{align-items:flex-end}@media (min-width:560px){.modal-overlay{align-items:center}.sheet{border-radius:18px;padding:24px}}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.sheet-head h3{margin:0;font-size:17px}.label{font-size:11px;font-weight:700;color:var(--text-dim);display:block;margin:16px 0 8px;letter-spacing:.04em}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600}.chip.on{background:var(--primary);border-color:var(--primary);color:#fff}.chip.new{color:var(--primary);border-color:var(--primary);background:transparent}.input.amount{font-size:22px;font-weight:800}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:14px;margin-top:16px}.toggle-row span{display:flex;flex-direction:column}.toggle-row small{color:var(--text-dim);font-size:11px;margin-top:2px}.toggle-row input{width:20px;height:20px}.btn.block{width:100%;margin-top:18px;padding:14px}.btn.ghost.block{width:100%}textarea.input{font-size:15px;line-height:1.5;font-family:inherit;min-height:88px}.stars{display:flex;gap:6px}.stars .star{background:none;border:none;padding:2px;font-size:26px;line-height:1;color:var(--border);transition:color .12s,transform .12s}.stars .star.on{color:var(--amber)}.stars .star:active{transform:scale(.9)}.feedback-thanks{display:flex;align-items:center;gap:12px}.feedback-thanks .fb-check{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--primary-soft);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800}.feedback-thanks div{display:flex;flex-direction:column}.feedback-thanks small{color:var(--text-dim);font-size:12px;margin-top:2px}.feedback-thanks .btn{margin-left:auto}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;height:60px;display:flex;align-items:center;justify-content:space-around;background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{background:none;border:none;color:var(--text-dim);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;flex:1}.bottom-nav button svg{width:22px;height:22px;display:block}.bottom-nav button.active{color:var(--primary)}.bottom-nav .add-fab{flex:0 0 auto;width:52px;height:52px;border-radius:50%;margin-top:-24px;background:linear-gradient(135deg,var(--primary),#8b5cf6);color:#fff;display:grid;place-items:center;padding:0;box-shadow:0 6px 16px #6366f180}.bottom-nav .add-fab svg{width:24px;height:24px;display:block}.ov-header{background:linear-gradient(160deg,#1b1f4d,var(--surface));border:1px solid var(--border);border-radius:var(--radius);padding:16px 16px 15px}.ov-rule{height:1px;background:#ffffff1a;margin:12px 0 4px}.ov-line{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:13px;color:#cfd2dc}.ov-line .v{font-weight:700;color:#fff}.ov-line .v.green{color:var(--green)}.ov-trio{display:flex;gap:8px;margin-top:14px}.ov-stat{flex:1;background:#ffffff10;border:1px solid #ffffff14;border-radius:10px;padding:8px 10px}.ov-stat .l{font-size:10px;color:#aeb2c4;font-weight:700}.ov-stat .v{font-size:14px;font-weight:800;margin-top:3px;color:#fff}.ov-stat .v.green{color:var(--green)}.ov-stat .v.amber{color:var(--amber)}.ov-stat .v.red{color:var(--red)}.budget-row .chev{font-size:18px;color:var(--text-dim);flex-shrink:0}.cat-txns{margin-top:8px;border-left:2px solid var(--border);padding-left:10px}.cat-txn{display:flex;align-items:center;gap:8px;padding:6px 0}.cat-txn .d{font-size:11px;color:var(--text-dim);width:46px;flex-shrink:0}.cat-txn .nt{font-size:13px;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cat-txn .am{font-size:13px;color:var(--text);font-weight:600;white-space:nowrap}.cat-txn-empty{font-size:12px;color:var(--text-dim);padding:6px 0}.cat-txn .txn-del{padding:2px 6px;font-size:12px;flex-shrink:0}.txn-edit{background:none;border:none;color:var(--text-dim);padding:2px;cursor:pointer;flex-shrink:0;display:grid;place-items:center;border-radius:4px;transition:color .15s}.txn-edit:hover{color:var(--primary)}.bud-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.bud-row:last-of-type{border-bottom:none}.bud-name{flex:1;text-align:left;background:none;border:none;color:var(--text);font-size:15px;font-weight:600;padding:0;min-width:0}.bud-input{display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 12px}.bud-input:focus-within{border-color:var(--primary)}.bud-input .cur{color:var(--text-dim);font-size:14px}.bud-input input{background:transparent;border:none;outline:none;color:var(--text);font-size:15px;font-weight:700;width:96px;text-align:right}.bud-name-input{flex:1;min-width:0;background:transparent;border:none;border-bottom:1px solid transparent;color:var(--text);font-size:15px;font-weight:600;padding:4px 0}.bud-name-input:focus{outline:none;border-bottom-color:var(--primary)}.inc-card{background:linear-gradient(160deg,#34d39914,var(--surface));border:1px solid #34d39933;border-radius:var(--radius);padding:13px 14px;margin-bottom:8px}.inc-top{display:flex;align-items:center;gap:9px}.inc-badge{width:22px;height:22px;border-radius:7px;background:#34d39922;color:var(--green);display:grid;place-items:center;font-size:13px;font-weight:800;flex-shrink:0}.inc-name{font-weight:700;font-size:14px;color:var(--text)}.inc-card .chev{color:var(--text-dim);font-size:18px;flex-shrink:0}.inc-amt{margin-left:auto;font-weight:800;font-size:16px;color:var(--green)}.inc-card .cat-txns{border-left-color:#34d39955}.inc-card .cat-txn .am.inc{color:var(--green)}.dialog-overlay{z-index:60;align-items:center!important}.dialog-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 32px #00000073;width:100%;max-width:380px;padding:24px;animation:dialog-pop .18s ease-out}@keyframes dialog-pop{0%{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.dialog-title{margin:0 0 18px;font-size:15px;font-weight:600;line-height:1.5;color:var(--text)}.dialog-input{margin-bottom:18px}.dialog-actions{display:flex;gap:10px;justify-content:flex-end}.dialog-btn{min-width:80px;padding:10px 18px;font-size:14px}.dialog-danger{background:var(--red);border-color:var(--red)}.dialog-danger:hover{filter:brightness(1.1)}
