:root{--ground:#f2f6f8;--surface:#fff;--surface-soft:#f7fafc;--ink:#14222b;--muted:#5a6b76;--line:#d6e0e6;--line-soft:#edf2f5;--pine:#1a6a92;--pine-deep:#135273;--pine-tint:#e3eef4;--pine-2:#4a95b8;--pine-3:#80c8c8;--copper:#b4531f;--copper-2:#c9733f;--copper-3:#d98e5f;--copper-4:#e7ac84;--copper-5:#f1c9ac;--danger:#a3261e;--radius-block:14px;--radius-field:10px;--radius-btn:8px;--font:"Readex Pro", system-ui, sans-serif}*{box-sizing:border-box}html,body{background:var(--ground);color:var(--ink);font-family:var(--font);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;margin:0;font-size:15px;line-height:1.6}a{color:var(--pine)}a:hover{color:var(--pine-deep)}h1,h2,h3{margin:0;font-weight:600;line-height:1.3}h1{font-size:30px}h2{font-size:18px}p{margin:0}:focus-visible{outline:3px solid var(--pine-3);outline-offset:2px}.num{direction:ltr;unicode-bidi:isolate;display:inline-block}.pine{color:var(--pine)}.copper{color:var(--copper)}.muted{color:var(--muted)}.strong{color:var(--ink);font-weight:600}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{flex-direction:column;min-height:100vh;display:flex}.container{width:100%;max-width:1240px;margin:0 auto;padding:40px 32px 72px}.stack{flex-direction:column;gap:44px;display:flex}.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-block)}.block-pad{padding:28px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;display:grid}.split{flex-wrap:wrap;align-items:flex-start;gap:40px;display:flex}.split-aside{flex:340px;max-width:420px}.split-main{flex:999 520px;min-width:0}.row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.row-between{justify-content:space-between}.header{background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:20px;padding:16px 40px;display:flex}.brand{color:var(--ink);align-items:center;gap:12px;font-size:18px;font-weight:600;text-decoration:none;display:flex}.brand-logo{object-fit:contain;width:40px;height:40px}.brand-word{width:auto;height:22px}.brand-sub{color:var(--muted);border-inline-start:1px solid var(--line);padding-inline-start:10px;font-size:14px;font-weight:500;line-height:1}.login-logo{align-self:center;width:auto;height:120px;margin-bottom:8px}.nav{flex-wrap:wrap;gap:4px;margin-inline-start:20px;display:flex}.nav a{border-radius:var(--radius-btn);color:var(--ink);padding:10px 16px;text-decoration:none}.nav a.active{background:var(--pine-tint);color:var(--pine);font-weight:600}.header-user{align-items:center;gap:12px;margin-inline-start:auto;display:flex}.burger{display:none}.btn{border:1px solid var(--line);border-radius:var(--radius-btn);background:var(--surface);height:44px;color:var(--ink);font:inherit;cursor:pointer;white-space:nowrap;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:15px;text-decoration:none;display:inline-flex}.btn:hover{border-color:var(--muted)}.btn-primary{background:var(--pine);border-color:var(--pine);color:#fff;font-weight:500}.btn-primary:hover{background:var(--pine-deep);border-color:var(--pine-deep)}.btn-danger{color:var(--danger)}.btn-sm{height:38px;padding:0 14px;font-size:14px}.btn-block{width:100%;height:48px;font-size:16px;font-weight:600}.btn:disabled{opacity:.55;cursor:default}.icon-btn{border-radius:var(--radius-btn);width:36px;height:36px;color:var(--muted);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;display:inline-flex}.icon-btn:hover{background:var(--line-soft);color:var(--ink)}.seg{border:1px solid var(--line);background:var(--surface);border-radius:10px;gap:2px;padding:3px;display:flex}.seg button{white-space:nowrap;height:38px;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:7px;flex:1 1 0;padding:0 16px;font-size:14px}.seg button[aria-pressed=true]{background:var(--ink);color:#fff;font-weight:500}.seg-kind button{height:44px;font-size:15px}.seg-kind button[aria-pressed=true].is-expense{background:var(--copper)}.seg-kind button[aria-pressed=true].is-income{background:var(--pine)}.field{flex-direction:column;gap:8px;display:flex}.field label,.field .label{color:var(--muted);font-size:14px}.input,.select,.textarea{border:1px solid var(--line);border-radius:var(--radius-field);background:var(--surface);width:100%;height:48px;font:inherit;color:var(--ink);padding:0 14px;font-size:15px}.textarea{resize:vertical;height:auto;padding:12px 14px}.input.ltr{text-align:left;direction:ltr}.amount-box{border:1px solid var(--line);border-radius:var(--radius-field);background:var(--surface-soft);align-items:center;height:64px;padding:0 16px;display:flex}.amount-box input{min-width:0;font:inherit;text-align:left;color:var(--ink);direction:ltr;background:0 0;border:0;outline:none;flex:1 1 0;font-size:32px;font-weight:600}.amount-box input.is-expense{color:var(--copper)}.amount-box input.is-income{color:var(--pine)}.amount-box span{color:var(--muted);font-size:16px}.form{flex-direction:column;gap:20px;display:flex}.form-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.error{border-radius:var(--radius-field);color:var(--danger);background:#fbe9e7;padding:12px 14px;font-size:14px}.success{border-radius:var(--radius-field);background:var(--pine-tint);color:var(--pine);padding:12px 14px;font-size:14px}.swatches{gap:10px;display:flex}.swatch{cursor:pointer;border:0;border-radius:50%;width:36px;height:36px}.swatch[aria-checked=true]{box-shadow:inset 0 0 0 3px var(--ink)}.hero{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;display:flex}.hero-label{color:var(--muted);font-size:16px}.hero-number{align-items:baseline;gap:12px;display:flex}.hero-number .num{letter-spacing:-3px;color:var(--pine);font-size:96px;font-weight:600;line-height:1}.hero-number .unit{color:var(--muted);font-size:22px;font-weight:500}.hero-sub{color:var(--muted);font-size:15px}.ribbon{border-radius:12px;gap:3px;height:60px;display:flex;overflow:hidden}.ribbon-seg{white-space:nowrap;align-items:center;min-width:0;padding:0 14px;font-size:14px;font-weight:500;display:flex;overflow:hidden}.ribbon-rest{background:var(--pine);color:#fff;flex:1 1 0;justify-content:center;align-items:center;font-size:15px;font-weight:600;display:flex}.ribbon-empty{background:var(--line-soft);color:var(--muted);flex:1 1 0;justify-content:center;align-items:center;font-size:14px;display:flex}.legend{color:var(--muted);flex-wrap:wrap;gap:8px 28px;font-size:14px;display:flex}.legend span{align-items:center;gap:8px;display:inline-flex}.dot{border-radius:3px;flex:none;width:10px;height:10px}.dot-round{border-radius:50%;flex:none;width:8px;height:8px}.list{margin:0;padding:0;list-style:none}.list li{border-bottom:1px solid var(--line-soft);align-items:center;gap:14px;padding:12px 0;display:flex}.list li:last-child{border-bottom:0}.bar{background:var(--line-soft);border-radius:4px;flex:1 1 0;height:8px;overflow:hidden}.bar>span{height:100%;display:block}.list-card{margin:0;padding:0 20px;list-style:none}.list-card li{border-bottom:1px solid var(--line-soft);align-items:center;gap:16px;padding:14px 0;display:flex}.list-card li:last-child{border-bottom:0}.list-card .title{flex-direction:column;flex:1 1 0;gap:2px;min-width:0;display:flex}.list-card .meta{color:var(--muted);font-size:13px}.big-dot{border-radius:4px;flex:none;width:14px;height:14px}.table-wrap{contain:paint;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-block);position:relative;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:640px}th{text-align:right;border-bottom:1px solid var(--line);color:var(--muted);padding:14px 20px;font-size:13px;font-weight:500}td{border-bottom:1px solid var(--line-soft);vertical-align:middle;padding:13px 20px}tr:last-child td{border-bottom:0}th.amount,td.amount{text-align:left;white-space:nowrap;font-weight:600}td.actions{text-align:left;white-space:nowrap;padding:8px 12px}.chip{align-items:center;gap:8px;display:inline-flex}.totals{color:var(--muted);flex-wrap:wrap;gap:28px;padding:16px 20px;font-size:14px;display:flex}.chart{width:100%;height:auto;display:block}.login{flex-wrap:wrap;min-height:100vh;display:flex}.login-panel{background:var(--pine);color:#fff;flex-direction:column;flex:420px;justify-content:space-between;gap:40px;padding:56px;display:flex}.login-panel .brand{color:#fff}.login-panel .brand img{object-fit:contain;width:44px;height:44px}.login-panel p{color:#cfe3ee;max-width:440px;font-size:18px;line-height:1.9}.login-form-wrap{flex:420px;justify-content:center;align-items:center;padding:56px 32px;display:flex}.login-form{width:100%;max-width:400px}.mini-ribbon{border-radius:7px;gap:3px;max-width:440px;height:14px;display:flex;overflow:hidden}dialog{border:1px solid var(--line);border-radius:var(--radius-block);width:min(420px,100vw - 32px);color:var(--ink);font-family:var(--font);padding:28px}dialog::backdrop{background:#14222b66}.menu{position:relative}.menu-list{inset-inline-end:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-field);z-index:10;flex-direction:column;min-width:200px;padding:6px;display:flex;position:absolute;top:calc(100% + 6px)}.menu-list button{text-align:start;font:inherit;cursor:pointer;color:var(--ink);background:0 0;border:0;border-radius:7px;padding:10px 12px}.menu-list button:hover{background:var(--line-soft)}.empty{text-align:center;color:var(--muted);padding:28px 20px}@media (width<=900px){.grid-2{grid-template-columns:1fr;gap:28px}}@media (width<=767px){.container{padding:28px 16px 110px}.stack{gap:28px}.header{gap:12px;padding:14px 16px}.burger{margin-inline-start:auto;display:inline-flex}.nav{flex-direction:column;flex-basis:100%;gap:2px;margin:0;display:none}.nav.open{display:flex}.header-user{border-top:1px solid var(--line-soft);flex-basis:100%;margin:0;padding-top:10px;display:none}.header-user.open{display:flex}.hero-number .num{letter-spacing:-2px;font-size:56px}.hero .seg{width:100%}.seg button{padding:0 10px;font-size:13px}.ribbon{height:44px}.ribbon-seg{padding:0 8px;font-size:12px}.block-pad{padding:18px}.form-row{grid-template-columns:1fr}.split-aside{max-width:none}}@media (prefers-reduced-motion:no-preference){.btn,.nav a,.seg button{transition:background-color .15s,border-color .15s}}:root{--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.34, 1.4, .64, 1);--dur-fast:.15s;--dur:.3s;--dur-slow:.65s}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes grow-x{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes rise-y{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes pop{0%{opacity:0;transform:scale(.96)translateY(6px)}to{opacity:1;transform:none}}@keyframes toast-in{0%{opacity:0;transform:translateY(16px)scale(.97)}to{opacity:1;transform:none}}.page-enter{animation:fade-up var(--dur-slow) var(--ease-out) both}.page-enter>:nth-child(2){animation:fade-up var(--dur-slow) var(--ease-out) both;animation-delay:80ms}.page-enter>:nth-child(3){animation:fade-up var(--dur-slow) var(--ease-out) both;animation-delay:.16s}.page-enter>:nth-child(n+4){animation:fade-up var(--dur-slow) var(--ease-out) both;animation-delay:.24s}.ribbon-seg,.ribbon-rest,.ribbon-empty{transform-origin:100%;animation:grow-x var(--dur-slow) var(--ease-out) both;animation-delay:calc(.12s + var(--i,0) * 70ms)}.bar>span{transform-origin:100%;animation:grow-x var(--dur-slow) var(--ease-out) both;animation-delay:calc(.15s + var(--i,0) * 50ms)}.chart rect{transform-box:fill-box;transform-origin:bottom;animation:rise-y var(--dur-slow) var(--ease-out) both;animation-delay:calc(.1s + var(--i,0) * 35ms)}.list li,tbody tr{animation:fade-up .38s var(--ease-out) both;animation-delay:calc(var(--i,0) * 30ms)}.legend span{animation:fade-in var(--dur) ease-out both;animation-delay:calc(.3s + var(--i,0) * 60ms)}.btn,.icon-btn,.swatch,.seg button,.nav a{transition:background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease}.btn:active,.icon-btn:active,.seg button:active{transform:scale(.97)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px #1a6a928c}.btn-primary:active{box-shadow:none;transform:scale(.97)}.swatch:hover{transform:scale(1.1)}.input,.select,.textarea,.amount-box{transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease}.input:focus,.select:focus,.textarea:focus,.amount-box:focus-within{border-color:var(--pine);outline:none;box-shadow:0 0 0 3px #1a6a9226}.list-card li,.block{transition:border-color var(--dur-fast) ease}.list-card li:hover{background:var(--surface-soft)}tbody tr{transition:background-color var(--dur-fast) ease}tbody tr:hover td{background:var(--surface-soft)}.seg{isolation:isolate;position:relative}.seg-pill{top:3px;bottom:3px;width:calc((100% - 6px - (var(--n) - 1) * 2px) / var(--n));background:var(--ink);transform:translateX(calc(var(--x) * (-100% - 2px)));transition:transform var(--dur) var(--ease-spring), background-color var(--dur-fast) ease;z-index:-1;border-radius:7px;position:absolute;inset-inline-start:3px}.seg-pill.is-expense{background:var(--copper)}.seg-pill.is-income{background:var(--pine)}.seg button[aria-pressed=true],.seg-kind button[aria-pressed=true].is-expense,.seg-kind button[aria-pressed=true].is-income{background:0 0}dialog[open]{animation:pop var(--dur) var(--ease-out) both}dialog[open]::backdrop{animation:fade-in var(--dur) ease-out both}.toast{bottom:24px;z-index:20;background:var(--ink);color:#fff;animation:toast-in var(--dur) var(--ease-spring) both;border-radius:12px;align-items:center;gap:10px;padding:12px 16px;font-size:14px;display:inline-flex;position:fixed;inset-inline-end:24px;box-shadow:0 12px 30px -12px #14222b99}.toast.leaving{animation:toast-in var(--dur-fast) ease-in reverse both}.toast .check{background:var(--pine);border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;display:inline-flex}.hero-number .num{transition:color var(--dur) ease}.amount-box input{transition:color var(--dur-fast) ease}@media (width<=767px){.toast{inset-inline:16px;justify-content:center;bottom:84px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-delay:0s!important}}.fab-wrap{display:none}@media (width<=767px){.fab-wrap{z-index:30;display:block;position:fixed;bottom:20px;right:16px}.fab-plus{z-index:2;background:var(--pine);color:#fff;cursor:pointer;width:52px;height:52px;transition:transform var(--dur) var(--ease-spring), background-color var(--dur-fast) ease;animation:pop .5s var(--ease-spring) both;border:0;border-radius:50%;justify-content:center;align-items:center;animation-delay:.3s;display:inline-flex;position:relative;box-shadow:0 10px 24px -10px #1a6a92a6}.fab-plus:active{transform:scale(.94)}.fab-wrap.open .fab-plus{background:var(--ink);transform:rotate(45deg)}.fab-backdrop{animation:fade-in var(--dur-fast) ease-out both;z-index:0;background:#14222b1f;border:0;position:fixed;inset:0}.fab-menu{z-index:1;pointer-events:none;flex-direction:column;align-items:flex-start;gap:8px;display:flex;position:absolute;bottom:64px;right:0}.fab-wrap.open .fab-menu{pointer-events:auto}.fab-item{-webkit-backdrop-filter:blur(14px)saturate(1.4);backdrop-filter:blur(14px)saturate(1.4);height:48px;color:var(--ink);white-space:nowrap;opacity:0;transform-origin:100% 100%;transition:opacity var(--dur-fast) ease, transform var(--dur) var(--ease-spring);background:#ffffffb8;border:1px solid #fffc;border-radius:24px;align-items:center;gap:12px;padding:0 18px 0 14px;font-size:15px;font-weight:600;text-decoration:none;transition-delay:0s;display:inline-flex;transform:translateY(14px)scale(.85);box-shadow:0 10px 30px -14px #14222b73}.fab-wrap.open .fab-item{opacity:1;transition-delay:calc(var(--i,0) * 45ms);transform:none}.fab-item:active{transform:scale(.96)}.fab-item-icon{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;display:inline-flex}.fab-item.is-income .fab-item-icon{background:var(--pine)}.fab-item.is-expense .fab-item-icon{background:var(--copper)}.toast{bottom:88px;inset-inline:16px 84px}}.split-aside,.split-main,.form,.field,.field>*,.amount-box,.block{min-width:0}.amount-box input{width:0}.input,.select,.textarea{max-width:100%}@media (width<=767px){.input,.select,.textarea,.search-input,.amount-box input.small{font-size:16px}.search-label{flex:100%}.search-input{width:100%!important;font-size:16px!important}}