@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg:#06111d;
  --panel:#0b1b2a;
  --panel-2:#0d2031;
  --line:#17364e;
  --line-strong:#20506c;
  --text:#edf7ff;
  --muted:#7f9aaf;
  --cyan:#28d8f5;
  --accent:#43ef79;
  --orange:#ff8a28;
  --red:#ff6b72;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit}
button{touch-action:manipulation}

.app-shell{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:20px 14px 16px;background:linear-gradient(180deg,#071725 0%,#07121e 100%);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:70}
.brand{display:flex;align-items:center;gap:10px;padding:4px 9px 23px;font-size:.95rem;font-weight:700;letter-spacing:-.015em}
.brand-mark{display:flex;align-items:flex-end;gap:3px;width:27px;height:27px;padding:5px 4px;border-radius:8px;background:#082c3b}
.brand-mark i{display:block;width:4px;border-radius:4px;background:linear-gradient(180deg,#34e6ff,#25d4eb)}
.brand-mark i:nth-child(1){height:9px}.brand-mark i:nth-child(2){height:16px}.brand-mark i:nth-child(3){height:12px}
.side-nav{display:flex;flex-direction:column;gap:5px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 11px;border:0;border-radius:8px;background:transparent;color:#9ab0c1;font-weight:600;font-size:.78rem;text-align:left;cursor:pointer;transition:.18s ease}
.nav-item span{width:18px;text-align:center;color:#7892a6}
.nav-item:hover,.nav-item.active{background:linear-gradient(90deg,rgba(27,165,233,.2),rgba(20,113,163,.08));color:#eaf9ff}
.nav-item.active span{color:var(--cyan)}
.side-spacer{flex:1}
.sidebar-io{position:relative;margin-bottom:16px}
.io-toggle{display:grid;grid-template-columns:22px 1fr;column-gap:7px;width:100%;padding:12px;border:1px solid #1d4058;border-radius:10px;background:#0a1926;color:#dceaf4;text-align:left;cursor:pointer}
.io-toggle>span{grid-row:1/3;color:var(--cyan);font-size:1rem}
.io-toggle b{font-size:.76rem}.io-toggle small{margin-top:2px;color:#71899b;font-size:.61rem;font-weight:500}
.io-dropdown{display:none;position:absolute;left:0;bottom:calc(100% + 8px);width:225px;overflow:hidden;border:1px solid #244a63;border-radius:11px;background:#081724;box-shadow:0 18px 45px rgba(0,0,0,.5);z-index:100}
.io-dropdown.open{display:block}.io-item{display:block;width:100%;padding:10px 12px;border:0;border-bottom:1px solid #163246;background:transparent;color:#c8d9e6;text-align:left;font-size:.76rem;cursor:pointer}.io-item:last-child{border-bottom:0}.io-item:hover{background:#0e2535;color:#68e7fa}
.side-footer{display:flex;align-items:center;gap:8px;padding:0 8px;color:#71899b;font-size:.65rem}.status-dot{width:8px;height:8px;border:1px solid #36df73;border-radius:50%;box-shadow:0 0 0 2px rgba(54,223,115,.08)}

.main-content{width:100%;max-width:1280px;margin:0 auto;padding:20px clamp(18px,2.6vw,34px) 70px}
.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-bottom:18px}
.header{display:none}.header h1{margin:0}.header-label{display:block;margin-top:1px;color:#6f8798;font-size:.57rem;font-weight:500;text-align:center}
.month-control{justify-self:start;display:flex;align-items:center;gap:8px}
.month-control>div{min-width:120px;text-align:center}
.month-control strong{display:block;font-size:1rem;letter-spacing:-.02em}
.month-control button{display:grid;place-items:center;width:30px;height:30px;border:1px solid #24465e;border-radius:50%;background:#0b1b2a;color:#9eb4c4;font-size:1.1rem;cursor:pointer}
.month-control button:hover{border-color:#2ccfea;color:#e9fbff}
.top-controls{grid-column:3;display:flex;justify-content:flex-end;gap:6px}
.ctrl-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;min-width:34px;padding:0 9px;border:1px solid #204159;border-radius:9px;background:#0a1a28;color:#9eb4c5;text-decoration:none;font-size:.7rem;font-weight:700;cursor:pointer}
.ctrl-btn:hover{border-color:#29cfe8;color:#6de9fb}.compact-theme{width:34px;padding:0}
#offlineBadge{display:none;margin-left:6px;padding:2px 5px;border:1px solid #2b4b60;border-radius:5px;color:#8ba4b6;font:600 .55rem 'DM Mono',monospace}
.notice-banner,.update-banner,.import-toast{margin-bottom:12px;padding:9px 12px;border-radius:9px;font-size:.76rem}.notice-banner{display:none;align-items:center;gap:10px;background:#0b2830;border:1px solid #24586a;color:#84eef9}.notice-banner.show{display:flex}.notice-banner span{flex:1}.install-btn{padding:7px 10px;border:0;border-radius:7px;background:var(--cyan);color:#03121b;font-weight:700}.dismiss-btn,.update-banner-close{border:0;background:transparent;color:inherit;font-size:1rem}.import-toast{display:none;background:#0a2b23;border:1px solid #24624f;color:#7af2ba;text-align:center}.update-banner{display:none;background:#10283a;border:1px solid #285a76;color:#75dcf7}.update-banner.show{display:flex}.update-banner-text{flex:1}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr);gap:12px}
.hero-card,.mix-card,.summary-card,.quick-card,.detail-card,.import-strip,.empty-state{border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(13,31,47,.99),rgba(8,23,36,.99));box-shadow:0 10px 28px rgba(0,0,0,.12)}
.balance-banner{position:relative;display:grid;grid-template-columns:1fr .9fr;min-height:218px;overflow:hidden;padding:24px 25px;background:radial-gradient(circle at 93% 15%,rgba(37,238,130,.15),transparent 34%),linear-gradient(135deg,#083148 0%,#075568 48%,#0b302c 100%)}
.balance-banner.negative{background:radial-gradient(circle at 93% 15%,rgba(255,102,91,.12),transparent 35%),linear-gradient(135deg,#3b1b2c,#40262a 52%,#14222d)}
.hero-copy{position:relative;z-index:3;align-self:stretch;display:flex;flex-direction:column}
.eyebrow{display:flex;align-items:center;gap:7px;color:#d8eef9;font-size:.86rem;font-weight:600}.info-dot{display:inline-grid;place-items:center;width:17px;height:17px;border:1px solid #5f879b;border-radius:50%;color:#a9c5d4;font:600 .58rem 'DM Mono',monospace}
.balance-amount{margin:14px 0 2px;color:#f3fbff;font:500 clamp(2.15rem,4.4vw,3.35rem) 'DM Mono',monospace;line-height:1;letter-spacing:-.045em}.hero-status{margin:7px 0 20px;color:var(--accent);font-size:.83rem}.balance-banner.negative .hero-status{color:#ff986e}
.hero-visual{position:relative;align-self:stretch;min-width:0}.mountain-chart{position:absolute;inset:10px -12px -18px 0;width:calc(100% + 12px);height:calc(100% + 8px);overflow:visible}.mountain-back{fill:rgba(2,28,42,.34)}.mountain-front{fill:rgba(2,22,34,.58)}
.balance-bar{height:7px;overflow:hidden;border-radius:999px;background:rgba(3,15,24,.55)}.balance-bar-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#4bec69,#2ae1a6);transition:width .7s var(--ease)}
.hero-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:#a7bdca;font-size:.67rem}.hero-meta strong{color:#effaff;font:600 .82rem 'DM Mono',monospace}


.mix-card{padding:18px 18px 14px}.balance-banner,.mix-card{will-change:transform;animation:ambientFloat 7.2s ease-in-out infinite}.mix-card{animation-delay:-3.6s}@keyframes ambientFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}.section-title{display:flex;align-items:center;justify-content:space-between;font-size:.83rem;font-weight:700}.mix-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:13px;align-items:center;margin-top:9px}.donut-wrap{display:flex;justify-content:center}.donut-container{position:relative;width:150px;height:150px}.donut{width:150px;height:150px;transform:rotate(-90deg)}.donut-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}.dc-pct{font:600 .98rem 'DM Mono',monospace}.dc-label{max-width:82px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#829aac;font-size:.56rem}.legend{display:flex;flex-direction:column;gap:5px;min-width:0;max-height:145px;overflow:auto;scrollbar-width:thin}.legend-item{display:flex;align-items:center;gap:6px;min-width:0;color:#a8bdcb;font-size:.66rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.legend-dot{flex:none;width:7px;height:7px;border-radius:50%}.mix-total{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:1px solid #17364e;color:#7f98aa;font-size:.62rem}.mix-total strong{color:#dfeef7;font:500 .72rem 'DM Mono',monospace}

.summary-grid{display:grid;grid-template-columns:1fr 1fr minmax(245px,.92fr);gap:12px;margin-top:12px}.summary-card,.quick-card{min-height:132px;padding:15px 16px}.summary-head{display:flex;align-items:center;justify-content:space-between}.summary-head>div{display:flex;align-items:center;gap:8px}.summary-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;font-size:.72rem}.green-bg{background:rgba(63,236,111,.14);color:#53ef7f}.orange-bg{background:rgba(255,136,40,.15);color:#ff9b43}.card-label{color:#d5e3ec;font-size:.75rem;font-weight:600}.card-value{margin-top:15px;font:500 1.5rem 'DM Mono',monospace;letter-spacing:-.03em}.green{color:#ddfff0}.orange{color:#fff0df}.summary-caption{margin-top:3px;color:#70889a;font-size:.62rem}.spark{font:600 1.2rem 'DM Mono',monospace}.spark.green{color:#4be96f}.spark.orange{color:#ff8c29}
.quick-card{display:flex;flex-direction:column}.quick-title{margin-bottom:9px;color:#68def2;font-size:.7rem;font-weight:700}.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;flex:1}.quick-card button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;padding:4px;border:0;background:transparent;color:#afc4d1;cursor:pointer}.quick-card button span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#0e3445;color:#5de8fb}.quick-card button b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.57rem;font-weight:600}

.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.detail-card{padding:16px}.detail-card>.section-title{cursor:pointer}.section-body{overflow:hidden;max-height:9999px;transition:max-height .32s ease}.section-body.collapsed{max-height:0}.section-chevron{transition:transform .22s ease}.row-wrap{position:relative;overflow:hidden;border-radius:8px}.row{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 3px;border-bottom:1px solid #153147;transition:transform .2s ease,background .15s}.row:hover{background:#0b2232}.row-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:7px;background:#0b2b25;font-size:.78rem}.row-name-wrap{flex:1;min-width:0}.row-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem}.row-freq-sub{display:block;margin-top:1px;color:#668094;font-size:.56rem}.row-amount{white-space:nowrap;font:500 .71rem 'DM Mono',monospace}.row-pct{color:#6f899b;font:500 .56rem 'DM Mono',monospace}.pct-bar{width:36px;height:3px;overflow:hidden;border-radius:999px;background:#173549}.pct-fill{height:100%;border-radius:inherit;background:var(--orange)}.pct-fill.large{background:var(--cyan)}.row-actions{display:flex;gap:1px;opacity:0;transition:opacity .15s}.row:hover .row-actions,.row:focus-within .row-actions{opacity:1}.icon-btn{width:27px;height:27px;border:0;border-radius:6px;background:transparent;color:#718b9e;cursor:pointer}.icon-btn:hover{background:#102a3d;color:#fff}.swipe-bg{position:absolute;right:0;top:0;bottom:0;width:72px;background:#d84d57;display:grid;place-items:center;opacity:0}
.total-row{display:flex;justify-content:space-between;margin-top:8px;padding:10px 3px 0;border-top:1px solid #214158;font-size:.77rem;font-weight:700}.total-row span:last-child{font:600 .8rem 'DM Mono',monospace}.list-pagination{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-height:32px;margin:9px 0 2px}.list-pagination .pagination-button{display:grid;place-items:center;inline-size:32px;block-size:32px;min-inline-size:32px;padding:0;flex:0 0 32px;border:1px solid #28516a;border-radius:50%;background:#0a1d2a;color:#8edfee;font-size:1.12rem;line-height:1;cursor:pointer}.list-pagination .pagination-button:not(:disabled):hover{border-color:#43dbf4;background:#103146;color:#e9fbff}.list-pagination .pagination-button:disabled{opacity:.32;cursor:default}.list-pagination .page-status{min-width:0;padding:0 2px;color:#7894a6;font:500 .67rem 'DM Mono',monospace;letter-spacing:.02em;white-space:nowrap;text-align:center}.btn-add{width:100%;margin-top:9px;padding:8px;border:1px dashed #29526b;border-radius:8px;background:#091a27;color:#72ddec;font-size:.7rem;font-weight:700;cursor:pointer}.btn-add:hover{border-color:#2bdcf6;background:#0c2433}
.add-form,.edit-row{display:flex;flex-direction:column;gap:8px;overflow:hidden;max-height:0;margin-top:0;padding:0;border:0 solid #2e5872;border-radius:9px;background:#091a27;opacity:0;transform:translateY(-5px);pointer-events:none;transition:max-height .3s var(--ease),opacity .2s ease,transform .3s var(--ease),padding .3s var(--ease),margin .3s var(--ease),border-width .15s}.add-form.open,.edit-row.open{max-height:360px;margin-top:8px;padding:10px;border-width:1px;opacity:1;transform:none;pointer-events:auto}.edit-fields{display:flex;gap:7px;flex-wrap:wrap}.ef{display:flex;flex-direction:column;gap:3px}.ef label{color:#718b9d;font-size:.56rem}.ef input,.ef select{min-height:36px;padding:6px 8px;border:1px solid #23445b;border-radius:7px;background:#071521;color:#eaf6fc;outline:0}.ef input:focus,.ef select:focus{border-color:#27d9f3}.ef-icon{width:54px}.ef-name{flex:1 1 120px}.ef-amount{width:100px}.ef-freq{flex:1 1 145px}.edit-actions{display:flex;justify-content:flex-end;gap:7px}.btn-save,.btn-discard{padding:7px 10px;border-radius:7px;font-size:.68rem;font-weight:700}.btn-save{border:0;background:#27d9f3;color:#04121b}.btn-discard{border:1px solid #294b61;background:transparent;color:#9bb3c3}

.import-strip{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:14px 16px}.import-strip div{display:flex;flex-direction:column;gap:2px}.import-strip strong{color:#62deef;font-size:.75rem}.import-strip span{color:#70899a;font-size:.61rem}.import-strip button{padding:8px 12px;border:1px solid #2a617d;border-radius:7px;background:#09202f;color:#6fe4f6;font-size:.68rem}.footer{margin-top:14px;color:#526e82;font-size:.61rem;text-align:center}
.empty-state{margin-bottom:12px;padding:24px;text-align:center}.empty-icon{color:#2bdaf1;font-size:1.8rem}.empty-title{margin-top:4px;font-weight:700}.empty-sub{margin:4px 0 12px;color:#718b9e;font-size:.75rem}.btn-import-big{display:inline-block;padding:8px 12px;border-radius:8px;background:#20cae7;color:#04121b;font-size:.72rem;font-weight:700;cursor:pointer}
.bottom-nav{display:none}

.import-preview-backdrop{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.65);backdrop-filter:blur(6px)}.import-preview-backdrop[hidden]{display:none}.import-preview{width:min(520px,100%);max-height:78vh;overflow:auto;padding:18px;border:1px solid #274c64;border-radius:13px;background:#0a1926;box-shadow:0 24px 70px rgba(0,0,0,.55)}.import-preview h2{margin:0 0 8px;font-size:1rem}.import-preview-summary,.import-preview-notice{color:#91a9ba;font-size:.75rem}.import-preview-details{padding-left:18px;color:#b7cad6;font-size:.7rem}.import-preview-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.import-preview-cancel,.import-preview-confirm{padding:8px 11px;border-radius:7px;font-size:.7rem;font-weight:700}.import-preview-cancel{border:1px solid #2b4c60;background:transparent;color:#a3b8c6}.import-preview-confirm{border:0;background:#28d9f3;color:#04121b}
#saveIndicator{position:fixed;right:16px;bottom:16px;z-index:250;padding:7px 10px;border:1px solid #265744;border-radius:8px;background:#0b2a22;color:#72efb7;font-size:.68rem;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s ease}#saveIndicator.show{opacity:1;transform:none}.undo-toast{position:fixed;left:50%;bottom:18px;z-index:280;display:flex;align-items:center;gap:14px;padding:9px 12px;border:1px solid #2d4e64;border-radius:9px;background:#0c1d2a;color:#d6e5ee;font-size:.72rem;opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:.2s ease}.undo-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}.undo-toast button{border:0;background:transparent;color:#5ee4f7;font-weight:700}

/* Motion */
#donutSvg circle:not(:first-child){transform-box:fill-box;transform-origin:center}#donutSvg circle.donut-segment-animate{animation:donutDraw .58s var(--ease) both}@keyframes donutDraw{from{stroke-dasharray:0 var(--donut-circumference);opacity:.35}}.pct-fill{transition:width .52s var(--ease)}.pct-fill.pct-animate{animation:pctGrow .52s var(--ease) both}@keyframes pctGrow{from{width:0!important}}.card.motion-pulse,.balance-banner.motion-pulse{animation:cardFeedback .4s var(--ease)}@keyframes cardFeedback{0%,100%{transform:scale(1)}45%{transform:scale(1.008)}}.dashboard-import-pulse .balance-banner,.dashboard-import-pulse .card,.dashboard-import-pulse .donut-container{animation:importDash .45s var(--ease) both}@keyframes importDash{from{opacity:.76;transform:translateY(4px) scale(.995)}to{opacity:1;transform:none}}
.row-wrap.motion-removing{opacity:0;transform:scale(.99);transition:max-height .22s var(--ease),opacity .17s ease,transform .22s var(--ease)}

html.light{--bg:#edf5f8;--panel:#fff;--panel-2:#f7fbfd;--line:#c9dce6;--line-strong:#aac8d7;--text:#102535;--muted:#617c8d}html.light body{background:#edf5f8;color:#102535}html.light .sidebar{background:linear-gradient(180deg,#f8fcfe,#eaf3f7);border-color:#cadde6}html.light .hero-card,html.light .mix-card,html.light .summary-card,html.light .quick-card,html.light .detail-card,html.light .import-strip,html.light .empty-state{background:#fff;box-shadow:0 8px 24px rgba(41,75,94,.07)}html.light .balance-banner{background:radial-gradient(circle at 93% 15%,rgba(37,238,130,.17),transparent 34%),linear-gradient(135deg,#d9f1f7,#bde9e7 48%,#d7f0df)}html.light .balance-amount{color:#0d2736}html.light .eyebrow,html.light .card-label{color:#244253}html.light .row:hover{background:#f2f8fb}html.light .row{border-color:#d5e4eb}html.light .list-pagination .pagination-button{border-color:#9bb8c6;background:#f5f9fb;color:#0b7189}html.light .list-pagination .pagination-button:not(:disabled):hover{border-color:#5caec3;background:#e7f4f7}html.light .list-pagination .page-status{color:#486a7b}html.light .donutSvg circle:first-child{fill:#fff}

@media(max-width:980px){
  .app-shell{grid-template-columns:76px minmax(0,1fr)}.sidebar{padding:18px 10px}.brand{justify-content:center;padding:4px 0 22px}.brand>span:last-child{display:none}.brand-mark{margin:0}.nav-item{justify-content:center;padding:10px 6px}.nav-item>span{width:auto}.nav-item{font-size:0}.nav-item>span{font-size:.9rem}.io-toggle{display:flex;align-items:center;justify-content:center;padding:10px}.io-toggle b,.io-toggle small{display:none}.side-footer span:last-child{display:none}.side-footer{justify-content:center}.hero-grid{grid-template-columns:1fr}.balance-banner{min-height:205px}.summary-grid{grid-template-columns:1fr 1fr}.quick-card{grid-column:1/-1;min-height:112px}.detail-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:700px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}.app-shell{display:block}.main-content{padding:calc(8px + env(safe-area-inset-top)) 12px 28px;max-width:none}.sidebar{display:none}
  .topbar{grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:10px;min-height:42px}.month-control{justify-self:center;gap:0}.month-control>div{min-width:auto}.month-control strong{font-size:.86rem}.month-control .header-label{display:none}.month-control button{display:none}.header{display:none}.top-controls{gap:5px}.desktop-only,.compact-theme{display:none}.ctrl-btn{height:31px;min-width:31px;padding:0 7px;border-color:transparent;background:transparent;font-size:.68rem}.ctrl-btn:hover{border-color:transparent}.notice-banner,.update-banner,.import-toast{margin-bottom:8px}
  .hero-grid{display:flex;flex-direction:column;gap:8px}.balance-banner{grid-template-columns:1fr .82fr;min-height:142px;padding:14px 14px 12px;border-radius:10px}.eyebrow{font-size:.7rem}.info-dot{width:14px;height:14px;font-size:.5rem}.balance-amount{margin:10px 0 1px;font-size:1.72rem}.hero-status{margin:5px 0 12px;font-size:.67rem}.balance-bar{height:5px}.hero-meta{margin-top:7px;font-size:.54rem}.hero-meta strong{font-size:.66rem}.mountain-chart{inset:5px -7px -10px -8px;width:calc(100% + 15px);height:calc(100% + 5px)}
  .mix-card{padding:12px 13px 10px;border-radius:10px}.section-title{font-size:.72rem}.mix-layout{grid-template-columns:116px 1fr;gap:8px;margin-top:7px}.donut-container{width:112px;height:112px}.donut{width:112px;height:112px}.dc-pct{font-size:.79rem}.dc-label{max-width:68px;font-size:.49rem}.legend{gap:4px;max-height:110px}.legend-item{gap:5px;font-size:.56rem}.legend-dot{width:6px;height:6px}.mix-total{margin-top:7px;padding-top:7px;font-size:.52rem}.mix-total strong{font-size:.6rem}
  .summary-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.summary-card{min-height:102px;padding:11px 11px;border-radius:10px}.summary-icon{width:23px;height:23px;border-radius:6px;font-size:.62rem}.card-label{font-size:.62rem}.spark{font-size:.9rem}.card-value{margin-top:11px;font-size:1.05rem}.summary-caption{font-size:.52rem}.quick-card{grid-column:1/-1;min-height:82px;padding:10px 11px;border-radius:10px}.quick-title{margin-bottom:4px;font-size:.58rem}.quick-actions{gap:4px}.quick-card button{gap:3px}.quick-card button span{width:27px;height:27px}.quick-card button b{font-size:.49rem}
  .detail-grid{grid-template-columns:1fr;gap:8px;margin-top:8px}.detail-card{padding:12px 13px;border-radius:10px;scroll-margin-top:8px}.list-pagination{justify-content:center;margin:8px 0 0}.list-pagination .pagination-button{inline-size:34px;block-size:34px;min-inline-size:34px;flex-basis:34px}.row{min-height:42px}.row-actions{opacity:1}.row-pct,.pct-bar{display:none}.btn-add{font-size:.64rem}.import-strip{margin-top:8px;padding:11px 12px;border-radius:10px}.import-strip strong{font-size:.65rem}.import-strip span{font-size:.54rem}.import-strip button{font-size:.6rem}.footer{margin-top:10px;font-size:.54rem}
  .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr 70px 1fr 1fr;height:calc(60px + env(safe-area-inset-bottom));padding:5px 8px env(safe-area-inset-bottom);border-top:1px solid #18374d;background:rgba(4,16,27,.96);backdrop-filter:blur(18px)}.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:transparent;color:#7892a6;font-size:.49rem;font-weight:600}.bottom-nav button span{font-size:.92rem}.bottom-nav button.active{color:#2edcf6}.bottom-nav .fab{align-self:start;justify-self:center;width:51px;height:51px;margin-top:-17px;border-radius:50%;background:#25b9ee;color:#fff;box-shadow:0 8px 23px rgba(33,183,235,.3);font-size:0}.bottom-nav .fab::before{content:'+';font-size:2rem;font-weight:300;line-height:1}.bottom-nav .fab span{display:none}
  #saveIndicator{bottom:74px}.undo-toast{bottom:72px}
}

@media(max-width:390px){
  .main-content{padding-left:9px;padding-right:9px}.balance-banner{grid-template-columns:1.08fr .72fr;padding:12px}.balance-amount{font-size:1.55rem}.hero-visual{margin-left:-5px}.mix-layout{grid-template-columns:104px 1fr}.donut-container,.donut{width:102px;height:102px}.card-label{font-size:.58rem}.card-value{font-size:.96rem}.bottom-nav{grid-template-columns:1fr 1fr 62px 1fr 1fr}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}