/* Duit 0.2 — iOS-grade UI: theme override, large titles, card sheets, context menus. */
:root{
  color-scheme:light;
  --bg:#f2f3f7;--card:#ffffff;--card-2:#f2f3f7;--sheet:#f2f2f7;--group:#ffffff;--text:#0b1220;--muted:#6b7280;--faint:#9ca3af;--line:rgba(60,60,67,.14);
  --accent:#2563eb;--accent-2:#4f46e5;--accent-soft:#e8efff;
  --green:#16a34a;--green-soft:#e7f7ee;--red:#e5484d;--red-soft:#fdecec;--amber:#d97706;--amber-soft:#fdf3e2;--blue-soft:#e8f0fe;
  --hero:linear-gradient(140deg,#2b6cff 0%,#2457e6 45%,#4338ca 100%);
  --shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(15,23,42,.06);
  --menu:rgba(250,250,252,.82);--seg-bg:rgba(118,118,128,.12);--seg-on:#ffffff;
  --radius:20px;
  --spring:cubic-bezier(.32,.72,0,1);
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  color-scheme:dark;
  --bg:#000000;--card:#16181d;--card-2:#22252c;--sheet:#1c1c1e;--group:#2c2c2e;--text:#f5f5f7;--muted:#a1a1aa;--faint:#71717a;--line:rgba(84,84,88,.5);
  --accent:#5b8cff;--accent-2:#7c74ff;--accent-soft:#1c2645;
  --green:#34d27a;--green-soft:#11281c;--red:#ff6b6f;--red-soft:#331719;--amber:#f5a524;--amber-soft:#2e2412;--blue-soft:#18233d;
  --hero:linear-gradient(140deg,#2a5bea 0%,#2342b8 50%,#3a2fa3 100%);
  --shadow:0 0 0 1px rgba(255,255,255,.04);--menu:rgba(44,44,46,.82);--seg-bg:rgba(118,118,128,.24);--seg-on:#636366;
}}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#000000;--card:#16181d;--card-2:#22252c;--sheet:#1c1c1e;--group:#2c2c2e;--text:#f5f5f7;--muted:#a1a1aa;--faint:#71717a;--line:rgba(84,84,88,.5);
  --accent:#5b8cff;--accent-2:#7c74ff;--accent-soft:#1c2645;
  --green:#34d27a;--green-soft:#11281c;--red:#ff6b6f;--red-soft:#331719;--amber:#f5a524;--amber-soft:#2e2412;--blue-soft:#18233d;
  --hero:linear-gradient(140deg,#2a5bea 0%,#2342b8 50%,#3a2fa3 100%);
  --shadow:0 0 0 1px rgba(255,255,255,.04);--menu:rgba(44,44,46,.82);--seg-bg:rgba(118,118,128,.24);--seg-on:#636366;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);transition:background .35s}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.45 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh;overscroll-behavior-y:none;transition:background .35s,color .35s}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
svg{display:block}.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- splash & login ---------- */
#splash{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--hero);color:#fff;transition:opacity .45s ease,transform .6s var(--spring)}
#splash.gone{opacity:0;transform:scale(1.04);pointer-events:none}
.splash-mark,.logo-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;border:2px solid rgba(255,255,255,.9);font:700 30px var(--display);color:#fff;animation:pop .7s var(--bounce) both}
.splash-name{font:700 22px var(--display);letter-spacing:.06em;animation:rise .7s .08s var(--spring) both}
.logo-mark{background:var(--hero);border:0;box-shadow:var(--shadow)}
#login{min-height:100vh;display:grid;place-items:center;padding:24px}
#login form{width:min(360px,100%);background:var(--card);border-radius:24px;padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
#login h1{margin:8px 0 6px;font:700 28px var(--display)}#login label{font-size:13px;color:var(--muted)}
#login input{min-height:48px;padding:10px 14px;border:0;border-radius:13px;background:var(--card-2);font-size:16px;outline:0}
#login-error{margin:0;color:var(--red);font-size:13px}

/* ---------- stage (scales back under sheets) ---------- */
.stage{min-height:100vh;background:var(--bg);transform-origin:var(--origin,50% 0);transition:transform .5s var(--spring),filter .5s var(--spring)}

/* ---------- header with iOS large title ---------- */
.app-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:flex-end;height:calc(var(--safe-t) + 48px);padding:var(--safe-t) 10px 0;background:transparent;transition:background .25s,box-shadow .25s}
.app-header.scrolled{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 .5px 0 var(--line)}
.nav-title{position:absolute;left:50%;bottom:13px;transform:translateX(-50%) translateY(6px);font:600 17px var(--display);opacity:0;transition:opacity .25s,transform .35s var(--spring);pointer-events:none}
.app-header.scrolled .nav-title{opacity:1;transform:translateX(-50%)}
.header-actions{display:flex;gap:0}
.icon-button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--accent);transition:background .2s,transform .2s var(--spring)}
.icon-button:active{transform:scale(.88);background:var(--card-2)}
#refresh-button.spinning svg{animation:spin .8s linear infinite}
.app{max-width:560px;margin:-6px auto 0;padding:0 16px calc(110px + var(--safe-b))}
.large-title{margin:0 0 14px;font:700 33px/1.1 var(--display);letter-spacing:-.6px;transition:opacity .2s}
.app-header.scrolled+.app .large-title{opacity:0}
#app-error{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;margin-bottom:12px;border-radius:14px;background:var(--red-soft);color:var(--red);font-size:13px}
#app-error button{border:0;background:transparent;color:var(--accent);font-weight:600}
.screen{display:flex;flex-direction:column;gap:14px}
.screen.enter>*{animation:rise .55s var(--spring) both}
.screen.enter>*:nth-child(2){animation-delay:.04s}.screen.enter>*:nth-child(3){animation-delay:.08s}.screen.enter>*:nth-child(4){animation-delay:.12s}
.screen.enter>*:nth-child(5){animation-delay:.16s}.screen.enter>*:nth-child(6){animation-delay:.2s}.screen.enter>*:nth-child(n+7){animation-delay:.24s}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-radius:26px;padding:18px 18px 16px;background:var(--hero);color:#fff;box-shadow:0 14px 34px rgba(37,87,230,.26)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.hero::before{width:220px;height:220px;right:-70px;top:-90px}.hero::after{width:160px;height:160px;left:-60px;bottom:-80px}
.hero>*{position:relative}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hero-eyebrow{font:600 11px var(--font);letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.mode-pill{display:flex;align-items:center;gap:6px;padding:6px 10px;border:0;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font:600 11px var(--font);transition:background .25s,transform .2s var(--spring)}
.mode-pill:active{transform:scale(.95)}.mode-pill:disabled{opacity:.45}
.mode-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);transition:background .25s,box-shadow .25s}
.mode-pill[aria-checked=true]{background:#fff;color:#1d4ed8}.mode-pill[aria-checked=true] .mode-dot{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.hero-amount{margin:8px 0 2px;font:700 34px/1.1 var(--display);letter-spacing:-.8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-amount-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 2px}
.hero-amount-row .hero-amount{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hero-delta{display:inline-flex;align-items:center;gap:3px;flex-shrink:0;padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.16);font:600 12px var(--font);white-space:nowrap}
.hero-delta:not(:has(span:not(:empty))){display:none}
.hero-delta small{opacity:.75;font-weight:500}
.hero-delta.negative{background:rgba(255,90,100,.28)}
.hero-flag{display:inline-flex;margin:8px 0 0;padding:4px 10px;border-radius:99px;background:rgba(255,80,90,.3);font:600 11.5px var(--font)}
.safe-details{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;animation:rise .45s var(--spring) both}
.safe-details>div{padding:9px 11px;border-radius:14px;background:rgba(255,255,255,.13)}
.safe-details span{display:block;font-size:10.5px;opacity:.8}.safe-details strong{display:block;margin-top:2px;font:650 15px var(--display);font-variant-numeric:tabular-nums}
.safe-details strong.negative{color:#ffd0d2}
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:16px 0 14px}
.quick-actions button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:transparent;color:#fff;font:500 11.5px var(--font);transition:transform .25s var(--spring)}
.quick-actions button:active{transform:scale(.9)}
.quick-actions span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.16)}
.quick-actions button:first-child span{background:#fff;color:#1d4ed8}
.hero-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hero-tiles>div{padding:10px 12px;border-radius:15px;background:rgba(255,255,255,.12)}
.hero-tiles small{display:flex;align-items:center;gap:4px;font-size:10.5px;opacity:.85}.hero-tiles small .icon{width:13px;height:13px}
.hero-tiles strong{display:block;margin-top:3px;font:650 15px var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- cards ---------- */
.card{display:block;width:100%;text-align:left;border:0;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);padding:16px;color:inherit;transition:transform .3s var(--spring),background .35s}
button.card:active{transform:scale(.98)}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.card-title{margin:0;flex:1;font:650 16px var(--display)}
.card-eyebrow{flex:1;font:600 11px var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.card-head>small:not(.pill){color:var(--muted);font-size:12px}
.tint-blue{background:var(--blue-soft);color:var(--accent)}.tint-green{background:var(--green-soft);color:var(--green)}.tint-red{background:var(--red-soft);color:var(--red)}.tint-amber{background:var(--amber-soft);color:var(--amber)}
.pill{padding:4px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:600 11px var(--font);white-space:nowrap}
.pill-green{background:var(--green-soft);color:var(--green)}
.budget-amount{display:block;font:700 26px/1.15 var(--display);letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--text)}
.budget-amount.big{font-size:32px}
.budget-amount.negative,.text-red{color:var(--red)!important}.text-green{color:var(--green)!important}
.budget-of{display:block;margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.progress{display:block;height:8px;margin:12px 0 10px;border-radius:99px;background:var(--card-2);overflow:hidden}
.progress span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .9s var(--spring)}
.progress span.over{background:linear-gradient(90deg,#f97316,var(--red))}
.budget-meta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}.budget-meta strong{color:var(--text);font-weight:650}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.tiles>*{display:block;padding:10px 12px;border-radius:14px;background:var(--card-2)}
.tiles small{display:block;font-size:11px;color:var(--muted)}.tiles strong{display:block;margin-top:2px;font:650 15px var(--display);font-variant-numeric:tabular-nums}

/* composition */
.comp-bar{display:flex;gap:3px;height:12px;border-radius:99px;overflow:hidden;background:var(--card-2)}
.comp-bar span{height:100%;border-radius:3px;transform-origin:left}.screen.enter .comp-bar span{animation:grow .9s var(--spring) both}
.comp-legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:12px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--muted)}
.comp-legend li{display:flex;align-items:center;gap:6px;min-width:0}.comp-legend i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.comp-legend b{margin-left:auto;color:var(--text);font-weight:600}
.comp-legend span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}
.insight{display:flex;gap:12px;align-items:center;padding:14px;border-radius:var(--radius);background:var(--green-soft)}
.insight-icon{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--green);color:#fff}.insight-icon .icon{width:17px;height:17px}
.insight p{margin:0;font-size:13.5px}

/* chart */
.segmented{position:relative;display:flex;gap:4px;padding:3px;border-radius:11px;background:var(--seg-bg)}
.chart-card .segmented{margin-bottom:12px}
.segmented button,.segmented label{flex:1;display:flex;justify-content:center;align-items:center;gap:6px;min-height:32px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:600 13px var(--font);cursor:pointer;transition:background .25s var(--spring),color .2s,box-shadow .25s}
.segmented button[aria-pressed=true],.segmented label:has(:checked){background:var(--seg-on);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.segmented .icon{width:16px;height:16px}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.chart-card #chart-value{color:var(--accent);font-weight:600}
.plot-row{display:flex;gap:8px;height:140px}
.y-axis{width:38px;flex-shrink:0;display:flex;flex-direction:column;justify-content:space-between;text-align:right;color:var(--faint);font-size:10px;transform:translateY(-5px);height:calc(100% + 10px)}
.plot{position:relative;flex:1;min-width:0;touch-action:pan-y;cursor:crosshair}.plot>svg{width:100%;height:100%;overflow:visible}
.x-axis{display:flex;justify-content:space-between;margin:8px 0 0 46px;color:var(--faint);font-size:10.5px}

/* sections & lists */
.section{display:flex;flex-direction:column;gap:8px}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
.section-head h2{margin:0;font:700 20px var(--display);letter-spacing:-.3px}.section-head small{color:var(--muted);font-size:12.5px}
.link-button{display:flex;align-items:center;gap:2px;padding:6px 0;border:0;background:transparent;color:var(--accent);font:500 15px var(--font)}.link-button .icon{width:18px;height:18px}
.list{list-style:none;margin:0;padding:2px 0}
.list>li+li,.list>.row+.row{box-shadow:inset 0 .5px 0 var(--line)}
.row,.transaction{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:0;background:transparent;text-align:left;transition:background .2s}
.row:active,.transaction:active{background:var(--card-2)}
.tx-icon{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:12px}.tx-icon .icon{width:19px;height:19px}
.tx-main{flex:1;min-width:0}.tx-main strong{display:block;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-main small{display:block;margin-top:1px;font-size:12.5px;color:var(--muted)}
.tx-amount{font:600 15px var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}.tx-amount.income{color:var(--green)}
.empty-note{margin:0;padding:18px;text-align:center;color:var(--faint);font-size:14px}
.secondary-button{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;min-height:46px;padding:10px 14px;border:0;border-radius:14px;background:var(--card);box-shadow:var(--shadow);color:var(--accent);font:600 15px var(--font);transition:transform .25s var(--spring)}
.secondary-button:active{transform:scale(.97)}
.secondary-button.compact{min-height:44px;background:var(--card-2);box-shadow:none}.secondary-button .icon{width:18px;height:18px}
.primary-button{display:block;width:100%;min-height:50px;margin-top:6px;border:0;border-radius:15px;background:var(--accent);color:#fff;font:650 16px var(--font);transition:transform .25s var(--spring),opacity .2s}
.primary-button:active{transform:scale(.97)}.primary-button:disabled{opacity:.6}

/* anggaran */
.cat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cat-list li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--card);box-shadow:var(--shadow)}
.ring{--p:0;--c:var(--accent);position:relative;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--card-2) 0)}
.ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--card)}
.cat-main{flex:1;min-width:0}.cat-main strong{display:block;font-size:15px;font-weight:600;text-transform:capitalize}.cat-main small{color:var(--muted);font-size:12.5px}
.cat-pct{font:700 15px var(--display)}

/* ---------- wallet ---------- */
.wallet-total{display:flex;flex-direction:column;gap:2px;margin:-4px 0 4px}
.wallet-total small{font-size:13px;color:var(--muted)}
.wallet-total strong{font:700 34px/1.1 var(--display);letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.wallet-total span{font-size:13px;color:var(--muted)}
.deck{position:relative;height:300px;margin-top:4px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.wcard{--pos:0;position:absolute;left:0;right:0;bottom:0;height:200px;border-radius:22px;padding:12px 18px;color:#fff;overflow:hidden;
  background:var(--g,linear-gradient(135deg,#475569,#1e293b));box-shadow:0 10px 30px rgba(15,23,42,.24),inset 0 1px 0 rgba(255,255,255,.18);
  --dy:0px;transform:translate3d(0,calc(var(--pos) * -28px + var(--dy)),0) scale(calc(1 - var(--pos) * .04));transform-origin:50% 0;z-index:calc(20 - var(--pos));
  transition:transform .5s var(--spring),opacity .3s ease;will-change:transform;backface-visibility:hidden;-webkit-touch-callout:none}
.wcard[data-pos="4"]{opacity:0}
.wcard:not(.front){box-shadow:0 4px 14px rgba(15,23,42,.16),inset 0 1px 0 rgba(255,255,255,.18)}
.wcard.dragging{transition:none}
.wcard.pressing{transform:translate3d(0,var(--dy),0) scale(.97)}
.wcard.leaving{z-index:30;transform:translate3d(0,calc(var(--dy) + 150px),0) scale(.92);opacity:0;transition:transform .34s cubic-bezier(.3,.7,.4,1),opacity .26s ease}
.wcard.no-anim{transition:none!important}
.wcard.from-below{z-index:30;transform:translate3d(0,150px,0) scale(.92);opacity:0}
.wcard::after{content:"";position:absolute;width:200px;height:200px;right:-60px;bottom:-100px;border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none}
.wcard-top{display:flex;justify-content:space-between;align-items:center;min-height:26px}
.wcard-top small{font:600 12.5px var(--font);opacity:.92}
.bank-badge{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:8px;background:#fff;font:800 13px/1 var(--display);letter-spacing:-.2px;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.bank-badge img{display:block;height:16px;width:auto}
.bank-badge .icon{width:16px;height:16px;margin-right:5px}
.wcard-chip{width:36px;height:27px;margin-top:30px;border-radius:7px;background:linear-gradient(135deg,#f9d77e,#d4a640);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.wcard-bottom{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:flex-end}
.wcard-bottom small{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.wcard-bottom strong{display:block;font:700 25px var(--display);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.wcard-tag{font:600 10.5px var(--font);letter-spacing:.08em;opacity:.85}
.deck-dots{display:flex;justify-content:center;gap:5px}
.deck-dots i{width:6px;height:6px;border-radius:99px;background:var(--line);transition:width .35s var(--spring),background .3s}.deck-dots i.on{width:18px;background:var(--accent)}
.deck-detail{display:flex;flex-direction:column;gap:10px}
.deck-detail .row{padding:0}.deck-detail .warn{margin:0;padding:10px 12px;border-radius:12px;background:var(--red-soft);color:var(--red);font-size:13px}

/* card context menu */
.ctx{position:fixed;inset:0;z-index:45}
.ctx-scrim{position:absolute;inset:0;background:rgba(0,0,0,.18);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);animation:fade .3s ease both}
.ctx.closing .ctx-scrim{animation:fade-out .22s ease both}
.ctx-card{position:absolute;pointer-events:none;animation:lift .45s var(--bounce) both}
.ctx-card .wcard{position:relative;inset:auto;transform:none;filter:none;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.ctx.closing .ctx-card{animation:unlift .22s ease both}
.ctx-menu{position:absolute;width:250px;border-radius:14px;background:var(--menu);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);box-shadow:0 12px 40px rgba(0,0,0,.25);overflow:hidden;transform-origin:var(--mo,top left);animation:menu-in .4s var(--bounce) both}
.ctx.closing .ctx-menu{animation:menu-out .2s ease both}
.ctx-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;padding:0 16px;border:0;background:transparent;color:var(--text);font:400 16px var(--font)}
.ctx-menu button+button{box-shadow:inset 0 .5px 0 var(--line)}
.ctx-menu button:active{background:rgba(127,127,127,.2)}.ctx-menu .icon{width:20px;height:20px}

/* ---------- transactions ---------- */
.transactions-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px}
.transactions-summary span{display:block;font-size:12px;color:var(--muted)}.transactions-summary strong{display:block;font:650 15px var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tx-income{color:var(--green)}#tx-expense{color:var(--red)}
.search{display:flex;flex-direction:row;align-items:center;gap:8px;padding:0 12px;border-radius:12px;background:var(--card-2);color:var(--faint)}
.search .icon{width:18px;height:18px}
.search input{flex:1;min-height:40px;border:0;background:transparent;outline:0;font-size:16px;color:var(--text)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px}.chips::-webkit-scrollbar{display:none}
.chip,.chip-select{flex-shrink:0;min-height:34px;padding:0 13px;border:0;border-radius:99px;background:var(--card);box-shadow:var(--shadow);color:var(--text);font:500 13.5px var(--font);transition:transform .2s var(--spring),background .2s}
.chip-select{appearance:none;-webkit-appearance:none;width:auto;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat;outline:0}
.chip:active{transform:scale(.95)}.chip[aria-pressed=true]{background:var(--accent);color:#fff}
.chip #pending-count{display:inline-block;min-width:18px;margin-left:4px;padding:0 5px;border-radius:99px;background:var(--red-soft);color:var(--red);font-size:11px}
.transactions-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.transactions-day{display:flex;justify-content:space-between;padding:14px 4px 6px;font:600 13px var(--font);color:var(--muted)}
.transactions-list>li:not(.transactions-day){background:var(--card)}
.transactions-day+li{border-radius:16px 16px 0 0}
.transactions-list>li:not(.transactions-day):has(+.transactions-day),.transactions-list>li:not(.transactions-day):last-child{border-radius:0 0 16px 16px}
.transactions-day+li:has(+.transactions-day),.transactions-day+li:last-child{border-radius:16px}
.transactions-list>li:not(.transactions-day)+li:not(.transactions-day){box-shadow:inset 0 .5px 0 var(--line)}
.transaction-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:0;background:transparent;text-align:left}
.transaction-row .transaction-icon{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:11px;background:var(--red-soft);color:var(--red);font-weight:700}
.transaction-row.is-income .transaction-icon{background:var(--green-soft);color:var(--green)}
.transaction-description{flex:1;min-width:0}.transaction-description strong{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transaction-description small,.transaction-value small{display:block;font-size:12px;color:var(--muted)}
.transaction-value{text-align:right}.transaction-value strong{font:600 15px var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.transaction-row.is-income .transaction-value strong{color:var(--green)}
.transactions-empty{padding:24px;text-align:center;color:var(--muted);border-radius:16px;background:var(--card)}
.transactions-empty p{margin:4px 0 0;font-size:13px}
.transactions-empty button{border:0;background:transparent;color:var(--accent);font-weight:600}
.transactions-dates{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.transactions-dates label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.transactions-dates input{min-height:40px;padding:6px 10px;border:0;border-radius:11px;background:var(--card);font-size:15px}

/* ---------- modals: floating cards ---------- */
dialog.sheet{width:min(420px,calc(100vw - 24px));max-height:min(86vh,760px);margin:auto;padding:18px 18px 16px;border:0;border-radius:26px;background:var(--sheet);color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.28),0 0 0 .5px var(--line);overflow:auto;overscroll-behavior:contain}
dialog.sheet[open]{animation:modal-in .5s var(--spring) both}
dialog.sheet.closing{animation:modal-out .22s ease both}
dialog.sheet::backdrop{background:rgba(10,12,20,.32);backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);animation:fade .3s ease both}
dialog.sheet.closing::backdrop{animation:fade-out .22s ease both}
dialog form{display:flex;flex-direction:column;gap:0}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 14px}
.modal-head h2{margin:0;font:700 21px/1.2 var(--display);letter-spacing:-.3px}
.modal-sub{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.modal-eyebrow{align-self:center;font:600 12px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.close-x{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border:0;border-radius:50%;background:var(--seg-bg);color:var(--muted);transition:transform .2s var(--spring)}
.close-x .icon{width:18px;height:18px;stroke-width:2.2}.close-x:active{transform:scale(.88)}
.modal-foot{display:flex;gap:10px;align-items:center;margin-top:6px}
.modal-foot .primary-button{flex:1;margin:0;min-height:50px}
.ghost-button{display:inline-flex;justify-content:center;align-items:center;gap:6px;flex:1;min-height:50px;padding:0 14px;border:0;border-radius:15px;background:var(--seg-bg);color:var(--text);font:600 15px var(--font);transition:transform .2s var(--spring)}
.ghost-button .icon{width:18px;height:18px}.ghost-button:active{transform:scale(.97)}.ghost-button:disabled{opacity:.4}
.icon-danger{display:grid;place-items:center;width:50px;height:50px;flex-shrink:0;border:0;border-radius:15px;background:var(--red-soft);color:var(--red)}
.icon-danger .icon{width:20px;height:20px}
.group-label{margin:18px 16px 6px;font:400 13px var(--font);letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.group{margin:0 0 14px;padding:0;list-style:none;border-radius:12px;background:var(--group);overflow:hidden}
.group:not(:has(>:not([hidden]))){display:none}
.group>*+*{box-shadow:inset 0 .5px 0 var(--line)}
.field{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:0 16px;font-size:16px;color:var(--text)}
.field>span{flex-shrink:0}
.field input,.field select{flex:1;min-width:0;min-height:44px;padding:0;border:0;background:transparent;color:var(--muted);font-size:16px;text-align:right;outline:0;appearance:none;-webkit-appearance:none}
.field select{text-align-last:right;padding-right:16px;background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);background-position:calc(100% - 7px) 52%,calc(100% - 2px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.field input:focus{color:var(--text)}
.field input[type=date]{display:flex;justify-content:flex-end}
.field input::-webkit-date-and-time-value{text-align:right}
.group-row{display:block;width:100%;min-height:46px;padding:0 16px;border:0;background:transparent;text-align:left;font:400 16px var(--font);color:var(--text)}
.group-row:active{background:var(--card-2)}
.group-row.destructive{color:var(--red);text-align:center}.group-row.accent{color:var(--accent)}
.row-static{display:flex;justify-content:space-between;align-items:center;min-height:46px;padding:0 16px;font-size:16px}.row-static small{font-size:14px;color:var(--muted)}
.breakdown li{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:0 16px;font-size:15px}
.breakdown li span{text-transform:capitalize}.breakdown strong{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.amount-field{display:flex;justify-content:center;align-items:baseline;gap:6px;margin:14px 0 18px;color:var(--text)}
.amount-field span{font:600 24px var(--display);color:var(--muted)}
.amount-field input{width:auto;max-width:78%;field-sizing:content;min-width:2ch;padding:0;border:0;background:transparent;font:700 44px/1.1 var(--display);letter-spacing:-1px;text-align:center;color:var(--text);outline:0;font-variant-numeric:tabular-nums}
.amount-field input::placeholder{color:var(--faint);font-size:22px;font-weight:600;letter-spacing:0}
.entry-kind{margin:2px 0 0}
.form-msg{margin:0 4px 10px;font-size:13px;color:var(--red);text-align:center}.form-msg:empty{display:none}
fieldset{margin:0;padding:0;border:0}fieldset:disabled .field input,fieldset:disabled .field select{opacity:.8}
.theme-picker{margin:0 0 4px}.theme-picker label{min-height:58px;flex-direction:column;gap:4px;font-size:12.5px}.theme-picker .icon{width:20px;height:20px}
.account-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:4px -16px 6px;padding:2px 16px}.account-chips::-webkit-scrollbar{display:none}
.account-chips button{flex-shrink:0;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 6px;border:0;border-radius:99px;background:var(--group);color:var(--text);font:500 14px var(--font);transition:background .2s,color .2s,transform .2s var(--spring)}
.account-chips button:active{transform:scale(.95)}
.account-chips button[aria-checked=true]{background:var(--accent);color:#fff}
.account-chips i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--g);color:#fff;font:800 9px var(--display);font-style:normal}
.check-expected{display:flex;flex-direction:column;align-items:center;gap:1px;margin:14px 0 0}
.check-expected small{font-size:12.5px;color:var(--muted)}.check-expected strong{font:600 17px var(--display);font-variant-numeric:tabular-nums}
.check-diff{min-height:1.4em;margin:-8px 0 14px;text-align:center;font-weight:600;font-size:14px}.check-diff.negative{color:var(--red)}.check-diff.income{color:var(--green)}

/* ---------- tab bar & FAB ---------- */
.tab-bar{position:fixed;left:50%;bottom:0;z-index:20;transform:translateX(-50%);width:min(560px,100%);display:grid;grid-template-columns:1fr 1fr 76px 1fr 1fr;align-items:end;padding:7px 8px calc(6px + var(--safe-b));
  background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 -.5px 0 var(--line);transition:transform .45s var(--spring)}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 0;border:0;background:transparent;color:var(--faint);font:500 10.5px var(--font);transition:color .25s}
.tab .icon{width:25px;height:25px;transition:transform .35s var(--bounce)}
.tab[aria-current=page]{color:var(--accent)}
.tab:active .icon{transform:scale(.85)}
.fab{justify-self:center;align-self:center;display:grid;place-items:center;width:54px;height:54px;margin-top:-28px;border:0;border-radius:50%;background:linear-gradient(140deg,#2b6cff,#4338ca);color:#fff;box-shadow:0 10px 24px rgba(37,87,230,.38);z-index:22;transition:transform .45s var(--bounce)}
.fab .icon{width:26px;height:26px;stroke-width:2.2;transition:transform .45s var(--bounce)}
.fab:active{transform:scale(.9)}.fab[aria-expanded=true] .icon{transform:rotate(135deg)}
.fab-scrim{position:fixed;inset:0;z-index:18;background:rgba(0,0,0,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:fade .3s ease both}
.fab-scrim.closing{animation:fade-out .25s ease both}
.fab-menu{position:fixed;left:50%;bottom:calc(90px + var(--safe-b));z-index:21;transform:translateX(calc(-100% + 22px));display:flex;flex-direction:column;align-items:flex-end;gap:12px;width:max-content}
.fab-menu button{display:flex;align-items:center;justify-content:flex-end;gap:10px;align-self:flex-end;padding:0;border:0;background:transparent;animation:fab-item .45s var(--bounce) both;animation-delay:calc((4 - var(--i)) * 35ms)}
.fab-menu.closing button{animation:fab-item-out .2s ease both;animation-delay:calc(var(--i) * 20ms)}
.fab-menu span{padding:8px 13px;border-radius:12px;background:var(--menu);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow);font:500 14.5px var(--font);color:var(--text)}
.fab-menu i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.fab-menu i .icon{width:21px;height:21px}
.fab-menu button:nth-child(1){--i:0}.fab-menu button:nth-child(2){--i:1}.fab-menu button:nth-child(3){--i:2}.fab-menu button:nth-child(4){--i:3}.fab-menu button:nth-child(5){--i:4}
.fab-menu .tint-green{background:var(--green);color:#fff}.fab-menu .tint-amber{background:var(--amber);color:#fff}.fab-menu .tint-blue{background:var(--accent);color:#fff}.fab-menu .tint-red{background:var(--red);color:#fff}

/* ---------- toast (iOS-style pill from top) ---------- */
.toast{position:fixed;left:50%;top:calc(var(--safe-t) + 10px);z-index:90;transform:translate(-50%,0);max-width:calc(100vw - 32px);padding:11px 18px;border-radius:99px;background:var(--menu);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);color:var(--text);font:600 14px var(--font);box-shadow:0 10px 30px rgba(0,0,0,.18);animation:toast-in .5s var(--bounce) both}
.toast:empty{display:none}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes pop-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}
@keyframes sheet-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-out{from{transform:translateY(var(--drag,0px))}to{transform:translateY(100%)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes lift{from{transform:scale(1)}to{transform:scale(1.03)}}
@keyframes unlift{from{transform:scale(1.03)}to{transform:scale(1);opacity:.6}}
@keyframes menu-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes menu-out{to{opacity:0;transform:scale(.6)}}
@keyframes fab-item{from{opacity:0;transform:translateY(24px) scale(.6)}to{opacity:1;transform:none}}
@keyframes fab-item-out{to{opacity:0;transform:translateY(16px) scale(.8)}}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,-20px) scale(.9)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}
@media (max-width:359px){.app{padding-left:12px;padding-right:12px}.chips{margin:0 -12px;padding:2px 12px}.hero-amount{font-size:29px}.quick-actions span{width:42px;height:42px}.hero-tiles strong{font-size:13.5px}.budget-amount.big{font-size:27px}.large-title{font-size:30px}}

/* ---------- v0.3 additions ---------- */
.wallet-summary .budget-amount{margin-bottom:4px}
.summary-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;box-shadow:inset 0 .5px 0 var(--line);font-size:15px}
.summary-row span{display:flex;align-items:center;gap:8px;color:var(--muted)}.summary-row .icon{width:18px;height:18px}
.summary-row strong{font:600 15px var(--display);font-variant-numeric:tabular-nums}
/* triage banner */
.triage-banner{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-radius:var(--radius);background:var(--amber-soft);color:var(--text);text-align:left;transition:transform .25s var(--spring)}
.triage-banner:active{transform:scale(.98)}
.triage-icon{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:50%;background:var(--amber);color:#fff}.triage-icon .icon{width:20px;height:20px}
.triage-text{flex:1;min-width:0}.triage-text strong{display:block;font:650 15px var(--display)}.triage-text small{color:var(--muted);font-size:12.5px}
.triage-cta{padding:7px 13px;border-radius:99px;background:var(--amber);color:#fff;font:600 13px var(--font)}
/* transactions summary */
.tx-summary{position:relative;overflow:hidden;padding:16px 18px;border-radius:24px;background:var(--hero);color:#fff;box-shadow:0 12px 30px rgba(37,87,230,.24)}
.tx-summary-amount{display:block;margin:4px 0 10px;font:700 32px/1.1 var(--display);letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.tx-bars{display:flex;align-items:flex-end;gap:2px;height:44px;margin-bottom:12px}
.tx-bars i{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:rgba(255,255,255,.35);transition:height .6s var(--spring)}
.tx-bars i.today{background:#fff}
.tx-summary-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;opacity:.95}
.tx-summary-row strong{margin-left:4px;font-weight:650;font-variant-numeric:tabular-nums}
.tx-summary #tx-income,.tx-summary #tx-expense,.tx-summary #tx-net{color:#fff}
.dot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;vertical-align:1px}.dot-green{background:#4ade80}
.transaction-row .transaction-icon.cat{background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.transaction-row .transaction-icon .icon{width:19px;height:19px}
.transaction-row.is-pending .transaction-description small{color:var(--amber)}
.transactions-day span:last-child{font-variant-numeric:tabular-nums}
.tx-icon.cat{background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
/* transaction detail */
.tx-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin:-4px 0 14px}
.tx-hero .hero-icon{display:grid;place-items:center;width:60px;height:60px;margin-bottom:6px;border-radius:20px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.tx-hero .hero-icon .icon{width:30px;height:30px}
.tx-hero h3{margin:0;font:650 18px/1.25 var(--display);max-width:100%;overflow-wrap:anywhere}
.tx-hero .amount{font:700 34px/1.15 var(--display);letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.tx-hero .amount.income{color:var(--green)}
.tx-hero .meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px}
.tx-hero .meta span{padding:5px 10px;border-radius:99px;background:var(--seg-bg);font-size:12.5px;color:var(--muted)}
#tx-detail:not(.editing) #tx-fields,#tx-detail:not(.editing) #tx-save,#tx-detail.editing #tx-edit-toggle,#tx-detail.editing #tx-quick-cats{display:none!important}
.quick-cats{margin:0 0 14px}
.quick-cats:empty{display:none}
.quick-cats p{margin:0 0 8px;font-size:13px;color:var(--muted);text-align:center}
.cat-grid,.quick-cats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cat-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 2px 8px;border:0;border-radius:16px;background:var(--group);color:var(--text);font:500 11.5px var(--font);transition:transform .2s var(--spring),background .2s}
.cat-btn i{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);font-style:normal}
.cat-btn .icon{width:20px;height:20px}
.cat-btn span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}
.cat-btn:active{transform:scale(.92)}.cat-btn.selected{background:var(--accent);color:#fff}.cat-btn.selected i{background:rgba(255,255,255,.22);color:#fff}
.cat-btn:disabled{opacity:.5}
/* triage */
.tri-bar{height:4px;margin:-6px 0 14px;border-radius:99px;background:var(--seg-bg);overflow:hidden}.tri-bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .5s var(--spring)}
.tri-stage{position:relative;min-height:128px;margin-bottom:14px}
.tri-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:14px;border-radius:20px;background:var(--group);text-align:center;transition:transform .42s var(--spring),opacity .3s ease}
.tri-card h3{margin:0;font:650 17px/1.25 var(--display);overflow-wrap:anywhere}
.tri-card .amount{font:700 28px var(--display);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.tri-card small{color:var(--muted);font-size:12.5px}
.tri-card.out-left{transform:translateX(-110%) rotate(-6deg);opacity:0}
.tri-card.out-right{transform:translateX(110%) rotate(6deg);opacity:0}
.tri-card.in{transform:scale(.92);opacity:0}
.tri-done{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:128px;color:var(--green);font:650 16px var(--display)}
.tri-done .icon{width:44px;height:44px;stroke-width:2.4}
/* logos */
.account-chips i{overflow:hidden}.account-chips i.logo{background:#fff}.account-chips i img{width:22px;height:22px;object-fit:contain}
@keyframes modal-in{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@keyframes modal-out{to{opacity:0;transform:scale(.96)}}
.ring .icon{position:absolute;inset:0;margin:auto;z-index:1;width:18px;height:18px;color:var(--c)}
.cat-list li[data-triage]{cursor:pointer}
dialog.sheet .modal-foot{position:sticky;bottom:-16px;z-index:3;margin:6px -18px -16px;padding:10px 18px 16px;background:linear-gradient(to bottom,color-mix(in srgb,var(--sheet) 0%,transparent),var(--sheet) 22%)}

/* ---------- v0.4 PayLater ---------- */
.pl-card .card-head .bank-badge{box-shadow:none;background:transparent;padding:0}
.pl-reserve{display:block;margin-top:10px;font-size:13px;font-weight:600}
.pl-reserve:empty{display:none}.pl-reserve.ok{color:var(--green)}.pl-reserve.short{color:var(--red)}
.switch-field input{flex:0 0 auto;appearance:none;-webkit-appearance:none;width:51px;min-height:31px;height:31px;padding:0;border-radius:99px;background:var(--seg-bg);position:relative;cursor:pointer;transition:background .25s}
.switch-field input::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform .3s var(--spring)}
.switch-field input:checked{background:var(--green)}.switch-field input:checked::after{transform:translateX(20px)}
#m-pl-fields{margin-bottom:6px;animation:rise .35s var(--spring) both}.pl-mode{margin-bottom:12px}
.pl-title-row{display:flex;align-items:center;gap:8px}.pl-title-row .bank-badge{box-shadow:none;background:transparent;padding:0}
.pl-bill{margin:0 0 12px;padding:16px;border-radius:20px;background:var(--hero);color:#fff}
.pl-bill small{display:block;font-size:12.5px;opacity:.85}
.pl-bill strong.big{display:block;margin:2px 0 8px;font:700 30px var(--display);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.pl-bill ul{list-style:none;margin:8px 0 0;padding:8px 0 0;box-shadow:inset 0 .5px 0 rgba(255,255,255,.3)}
.pl-bill li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;font-size:13px}
.pl-bill li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.92}
.pl-bill li b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-actions{display:flex;gap:10px;margin-bottom:6px}.pl-actions .primary-button{flex:1;margin:0}
.pl-inline{margin:4px 0 6px;animation:rise .35s var(--spring) both}
.mode-chip{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:99px;font-size:11px;font-weight:600;vertical-align:1px}
.mode-chip.funded{background:var(--green-soft);color:var(--green)}.mode-chip.credit{background:var(--amber-soft);color:var(--amber)}
.pl-items li{padding:11px 16px}
.pl-items .pl-row{display:flex;justify-content:space-between;gap:10px;align-items:center}
.pl-items strong{font-size:15px;font-weight:600}.pl-items small{display:block;color:var(--muted);font-size:12.5px}
.pl-items .pl-amt{font:600 15px var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.pl-items .pl-ops{display:flex;gap:8px;margin-top:8px}
.pl-items .pl-ops button{flex:1;min-height:36px;border:0;border-radius:10px;background:var(--seg-bg);color:var(--text);font:600 13px var(--font)}
.pl-items .pl-ops button.danger{color:var(--red)}
.pl-items .empty-note{padding:14px}
img.splash-mark,img.logo-mark{width:76px;height:76px;padding:0;border:0;border-radius:20px;box-shadow:0 12px 30px rgba(0,0,0,.25);object-fit:cover}

/* ---------- v0.4.1 compact categories ---------- */
.cat-card{padding:6px 14px}
.cat-compact{list-style:none;margin:0;padding:0}
.cat-compact li{display:flex;align-items:center;gap:11px;padding:9px 0}
.cat-compact li+li{box-shadow:inset 0 .5px 0 var(--line)}
.cat-compact li[data-triage]{cursor:pointer}
.cat-compact i{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:10px;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.cat-compact i .icon{width:17px;height:17px}
.cc-main{flex:1;min-width:0}
.cc-top{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.cc-top strong{font-weight:600;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-top b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-bar{display:block;height:4px;margin-top:5px;border-radius:99px;background:var(--card-2);overflow:hidden}
.cc-bar span{display:block;height:100%;border-radius:99px;background:var(--c)}
.cat-compact em{width:34px;flex-shrink:0;text-align:right;font:600 12px var(--font);font-style:normal;color:var(--muted)}
.cat-more{display:block;width:100%;min-height:42px;border:0;background:transparent;color:var(--accent);font:600 14px var(--font);box-shadow:inset 0 .5px 0 var(--line)}

/* ---------- v0.5 utang & piutang ---------- */
.debt-title-row{display:flex;align-items:center;gap:10px}
.debt-dir{margin-bottom:12px}
.debt-total{margin:0 4px 10px;font:700 26px var(--display);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.debt-total small{display:block;font:400 13px var(--font);color:var(--muted);letter-spacing:0}
.debt-list li{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer}
.debt-list li:active{background:var(--card-2)}
.debt-list .empty-note{cursor:default}
.avatar{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:50%;background:color-mix(in srgb,var(--c,#6366f1) 16%,transparent);color:var(--c,#6366f1);font:700 15px var(--display)}
.debt-main{flex:1;min-width:0}.debt-main strong{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.debt-main small{display:block;font-size:12.5px;color:var(--muted)}
.debt-main small.due{color:var(--amber)}
.debt-amt{font:600 15px var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.debt-list .bar{display:block;height:4px;margin-top:6px;border-radius:99px;background:var(--card-2);overflow:hidden}.debt-list .bar span{display:block;height:100%;background:var(--green);border-radius:99px}
.debt-hero{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 0 14px;text-align:center}
.debt-hero .avatar{width:56px;height:56px;font-size:22px;margin-bottom:4px}
.debt-hero .amount{font:700 32px var(--display);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.debt-hero small{font-size:13px;color:var(--muted)}
.debt-hero .bar{display:block;width:70%;height:6px;margin-top:8px;border-radius:99px;background:var(--seg-bg);overflow:hidden}.debt-hero .bar span{display:block;height:100%;background:var(--green)}
.debt-hist li{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;font-size:14px}
.debt-hist small{display:block;color:var(--muted);font-size:12px}
.debt-hist b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.debt-actions{display:flex;gap:10px;margin:4px 0 6px}.debt-actions>*{flex:1}
.debt-pay{margin:6px 0;animation:rise .35s var(--spring) both}
.account-chips button[data-acc=""] i{background:var(--seg-bg);color:var(--muted)}
.link-hint{margin:0 4px 10px;font-size:13px;color:var(--muted);text-align:center}
#wallet-receivable-row{display:none!important}

/* ---------- v0.5.1 salary ---------- */
.salary-chip{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:7px 13px;border:0;border-radius:99px;background:var(--seg-bg);color:var(--accent);font:600 13px var(--font)}
.salary-chip .icon{width:16px;height:16px}
.salary-chip[aria-pressed=true]{background:var(--green-soft);color:var(--green)}
.hero-flag{background:rgba(255,190,60,.28)}

/* ---------- v0.5.3 debt link ---------- */
#debt-view-list .debt-dir[hidden]{display:none}
.debt-list li.off{opacity:.45}
.salary-chip.debt-hint{background:rgba(99,102,241,.14);color:#6366f1}
.debt-list .debt-what{color:var(--text);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- v0.5.4 confirmation card ---------- */
dialog.sheet.ask{width:min(340px,calc(100vw - 48px));padding:24px 18px 16px;text-align:center}
.ask-hero{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:12px}
.ask-hero[hidden]{display:none}
.ask-hero .avatar,.ask-icon{width:56px;height:56px;font-size:22px}
.ask-icon{display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.ask-icon .icon{width:26px;height:26px}
.ask-amount{font:700 30px var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ask h2{margin:0 0 14px;font:650 18px var(--font);line-height:1.3}
.ask-rows{margin:0 0 14px;border-radius:14px;background:var(--group);text-align:left;overflow:hidden}
.ask-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 14px;font-size:14px}
.ask-rows div+div{border-top:.5px solid var(--line)}
.ask-rows span{color:var(--muted);flex-shrink:0}
.ask-rows b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ask-rows em{font-style:normal;color:var(--green)}
.ask-note{margin:0 0 14px;color:var(--muted);font-size:14px}
dialog.sheet.ask .modal-foot{position:static;margin:4px 0 0;padding:0;background:none}
.primary-button.danger{background:var(--red)}
/* v0.5.5 PayLater auto-settle */
.pl-bill .link-button{color:inherit;opacity:.85;margin-top:4px;text-decoration:underline;text-underline-offset:3px}
/* v0.6.0 Kewajiban */
.kw-list{list-style:none;margin:10px 0 0;padding:0}
.kw-list li+li button{border-top:.5px solid var(--line)}
.kw-list button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;border:0;background:none;color:var(--text);font:inherit;text-align:left}
.kw-tick{flex-shrink:0;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--line)}
.kw-list .done .kw-tick{border:0;background:var(--green);color:#fff}
.kw-tick .icon{width:16px;height:16px}
.kw-main{flex:1;min-width:0;display:flex;flex-direction:column}
.kw-main strong{font-weight:600}.kw-main small{color:var(--muted);font-size:13px}
.kw-list b{font-weight:600;font-variant-numeric:tabular-nums}
.kw-list .done strong,.kw-list .done b{opacity:.55}.kw-list .done b{text-decoration:line-through}
.card-head .kw-add{width:28px;height:28px;color:var(--accent)}
.kw-list small.late,.debt-hero small.late{color:var(--red)}
.kw-next-label{margin:14px 0 0;font:600 11px var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.kw-next-label[hidden]{display:none}
.kw-next{margin-top:2px}.kw-next button{opacity:.6}
.kw-cands .kw-tick{width:24px;height:24px;color:transparent}
.kw-cands li.selected{background:var(--accent-soft)}
.kw-cands li.selected .kw-tick{border:0;background:var(--accent);color:#fff}
.kw-links li{align-items:center}.kw-links li>span{flex:1;min-width:0}
.kw-links .close-x{width:26px;height:26px;margin-left:4px}.kw-links .close-x .icon{width:14px;height:14px}
#kw-view-gap .debt-hero .amount{color:var(--amber)}
.split-rows{list-style:none;margin:0;padding:0}
.split-row{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 16px;border-bottom:.5px solid var(--line)}
.split-row input{min-width:0;min-height:42px;padding:0;border:0;background:transparent;color:var(--text);font-size:16px;outline:0;appearance:none;-webkit-appearance:none}
.split-row .sp-name{flex:1}.split-row .sp-amt{width:96px;text-align:right;font-variant-numeric:tabular-nums}
.split-row .close-x{width:26px;height:26px}.split-row .close-x .icon{width:14px;height:14px}
#split-mine{font-variant-numeric:tabular-nums}#split-mine.neg{color:var(--red)}
#m-who-group[hidden],#m-paidby-row[hidden]{display:none}
/* Kumkum: fitur yang tidak dipakai */
#pl-card,.section-head:has(#paylater-heading),.plan-card,.section:has(#planning),.section:has(#saving-heading),
#m-pl-group,#m-pl-fields,#m-who-group,#tx-loan,#tx-salary,.field:has(#kf-cat){display:none!important}
.safe-details>div:has(#safe-daily),.safe-details>div:has(#safe-planned),.tiles>span:has(#ang-daily),#ang-days,#balance-delta:empty,
.group:has(#b-day),#b-save{display:none!important}
.deck{height:236px}