/* U-Wallet design (2026-10-30). Built on the Pinusy v2 layout, re-designed with the U-Wallet brand:
   Deep Teal #004C43 (trust), Mint Green #16B99A (growth), Soft Mint #A2F0D2, Warm Gold #EBCB83 (value),
   Off White #F7FAF8, Charcoal Green #172B28. Type: Inter (Latin + numbers) and IBM Plex Sans Arabic.
   Layout: phone = top bar + one screen + floating tab bar and a round "+"; tablet = centred column;
   desktop (≥980px) = side rail + two-column grid.
   Contrast: ink/surface 14:1, muted/surface 5.6:1, white on deep teal 10:1; dark: mint on bg 8:1.
   Mint and gold are fills on light surfaces; text uses --mint-ink / --gold-ink. */

:root{
  color-scheme:light;
  --brand:#004C43; --brand-2:#00594E; --brand-3:#003A33; --mint:#16B99A; --mint-soft:#A2F0D2; --gold:#EBCB83; --charcoal:#172B28;
  --bg:#F7FAF8; --surface:#FFFFFF; --soft:#EEF5F2; --ink:#172B28; --muted:#526C66; --line:#E0EAE5;
  --accent:#004C43; --on-accent:#FFFFFF; --accent-soft:#E2F5EE; --teal:#16B99A;
  --mint-ink:#0B7D68; --gold-ink:#8A6A1F;
  --good:#0E8A5F; --warn:#B45309; --bad:#C2281D;
  --hero:linear-gradient(150deg,#006656 0%,#004C43 55%,#003A33 100%);
  --c-food:#F08A24; --c-coffee:#A0643A; --c-shop:#8B5CF6; --c-move:#3B82F6; --c-home:#0F7A69; --c-family:#0EA5B7;
  --c-fun:#EC4899; --c-furn:#B7791F; --c-care:#16B99A; --c-save:#C99A3B; --c-work:#2563EB; --c-other:#6B7C78;
  --sh:0 1px 2px rgba(10,40,35,.04),0 8px 24px -14px rgba(10,40,35,.18);
  --sh-up:0 -8px 30px rgba(0,26,22,.14);
  --r:20px; --r-sm:14px;
  --f-body:"Inter","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-disp:"Inter","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tab-h:68px; --ease:cubic-bezier(.2,.8,.2,1);
  --glass:color-mix(in srgb,var(--surface) 78%,transparent);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#08130F; --surface:#0F1F1B; --soft:#162A25; --ink:#E8F3EF; --muted:#98B2AB; --line:#1F3631;
  --accent:#16B99A; --on-accent:#022019; --accent-soft:#0E3A31; --teal:#2FD1AF;
  --mint-ink:#4FD9B9; --gold-ink:#EBCB83;
  --good:#4CC48A; --warn:#F5A524; --bad:#FF7A6E;
  --hero:linear-gradient(150deg,#00705F 0%,#004C43 55%,#00342E 100%);
  --c-food:#F6A04D; --c-coffee:#C98B5E; --c-shop:#A78BFA; --c-move:#60A5FA; --c-home:#2FB59C; --c-family:#38C6D6;
  --c-fun:#F472B6; --c-furn:#D69E2E; --c-care:#2FD1AF; --c-save:#EBCB83; --c-work:#7AA7F7; --c-other:#9AAEA9;
  --sh:0 1px 2px rgba(0,0,0,.3),0 12px 30px -18px rgba(0,0,0,.7); --sh-up:0 -10px 30px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#08130F; --surface:#0F1F1B; --soft:#162A25; --ink:#E8F3EF; --muted:#98B2AB; --line:#1F3631;
  --accent:#16B99A; --on-accent:#022019; --accent-soft:#0E3A31; --teal:#2FD1AF;
  --mint-ink:#4FD9B9; --gold-ink:#EBCB83;
  --good:#4CC48A; --warn:#F5A524; --bad:#FF7A6E;
  --hero:linear-gradient(150deg,#00705F 0%,#004C43 55%,#00342E 100%);
  --c-food:#F6A04D; --c-coffee:#C98B5E; --c-shop:#A78BFA; --c-move:#60A5FA; --c-home:#2FB59C; --c-family:#38C6D6;
  --c-fun:#F472B6; --c-furn:#D69E2E; --c-care:#2FD1AF; --c-save:#EBCB83; --c-work:#7AA7F7; --c-other:#9AAEA9;
  --sh:0 1px 2px rgba(0,0,0,.3),0 12px 30px -18px rgba(0,0,0,.7); --sh-up:0 -10px 30px rgba(0,0,0,.5);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* text follows the phone's text-size setting (iOS Dynamic Type via -apple-system-body; 100% elsewhere) */
html{font-size:100%}
@supports (font:-apple-system-body){ html{font:-apple-system-body} }
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
[dir=rtl] svg.dir{transform:scaleX(-1)}
.num,.amt{font-family:var(--f-disp);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.cs{display:inline-block;height:.78em;width:auto;vertical-align:-.04em;fill:currentColor;stroke:none;overflow:visible}
.cs-aed{height:.72em}
[hidden]{display:none!important}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px;border-radius:10px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}

/* ───────── Buttons + fields ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:14px;border:1px solid transparent;font-weight:600;transition:transform .12s var(--ease),filter .2s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn.primary:disabled{opacity:.4;box-shadow:none;cursor:default}
.btn.ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn.danger{background:none;border-color:color-mix(in srgb,var(--bad) 40%,transparent);color:var(--bad)}
.btn.sm{min-height:38px;padding:0 14px;font-size:.92rem;border-radius:12px}
.btn.lg{min-height:54px;padding:0 26px;font-size:1.02rem;border-radius:16px}
.btn.wide{width:100%}
.btn svg{width:20px;height:20px}
.link{border:0;background:none;color:var(--accent);font-weight:600;padding:4px 0}
.chip-btn{min-height:38px;min-width:42px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:600}
.icon-btn{position:relative;width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink)}
.bdg{position:absolute;top:-3px;inset-inline-end:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#E5484D;color:#fff;font-size:11px;font-weight:600;line-height:19px;text-align:center;border:2px solid var(--bg)}
.in{width:100%;min-height:48px;border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:10px 14px;font-size:16px}
.in:focus{outline:none;border-color:var(--accent)}
select.in{appearance:none;background-image:none}
.fl{display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--muted);font-weight:500}
.fl .in{color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:flex;background:var(--soft);border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:none;border-radius:11px;min-height:38px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.switch{position:relative;flex:none;width:52px;height:32px;border-radius:999px;border:0;background:var(--line);transition:background .2s}
.switch i{position:absolute;top:3px;inset-inline-start:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:inset-inline-start .2s var(--ease)}
.switch[aria-checked="true"]{background:#16B99A}
.switch[aria-checked="true"] i{inset-inline-start:23px}

/* ───────── Shell ───────── */
.app{min-height:100vh}
.rail{display:none}
.bar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));
  background:var(--glass);backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7);border-bottom:1px solid transparent;transition:border-color .2s}
.bar.edge{border-bottom-color:var(--line)}
.bar h2{font:600 1.45rem/1.2 var(--f-disp);letter-spacing:-.01em}
.bar-end{display:flex;gap:8px}
.ava-btn{border:0;background:none;padding:0;border-radius:50%}
.ava{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--hero);color:#fff;font:600 .95rem var(--f-disp);flex:none}
.ava.lg{width:64px;height:64px;font-size:1.4rem}
.period{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:4px auto 10px;width:min(100% - 32px,420px);padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh)}
.period button{width:44px;height:44px;border-radius:999px;border:0;background:none;display:grid;place-items:center;color:var(--ink)}
.period button:disabled{opacity:.3;cursor:default}
.period-l{display:flex;flex-direction:column;align-items:center;line-height:1.25;min-width:0}
.period-l b{font-weight:600;font-size:.95rem}
.period-l small{color:var(--muted);font-size:.78rem}
main{padding:0 max(16px,env(safe-area-inset-right,0px)) calc(var(--tab-h) + 40px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));max-width:1120px;margin:0 auto}
.screen{display:flex;flex-direction:column;gap:16px}
/* every stack of sections keeps its spacing on phones too (desktop turns .grid2 into two columns) */
.grid2,.grid2>.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.screen.enter{animation:enter .28s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Tab bar = navigation only (4 places). The add action is its own round button beside it (HIG: tabs navigate, they don't act). */
.tabs{position:fixed;z-index:30;inset-inline-start:max(12px,env(safe-area-inset-left,0px));inset-inline-end:calc(max(12px,env(safe-area-inset-right,0px)) + var(--tab-h) + 10px);
  bottom:calc(10px + env(safe-area-inset-bottom,0px));height:var(--tab-h);
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding:0 6px;border-radius:26px;background:var(--glass);border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
  box-shadow:0 18px 40px -16px rgba(10,40,35,.35);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:56px;border:0;background:none;border-radius:18px;color:var(--muted);font-size:.72rem;font-weight:600}
.tab svg{width:24px;height:24px}
.tab[aria-current="page"]{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.tab[aria-current="page"] svg{stroke-width:2.2}
.fab-add{position:fixed;z-index:31;inset-inline-end:max(12px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));
  width:var(--tab-h);height:var(--tab-h);border-radius:50%;border:0;background:var(--hero);color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 28px -10px rgba(0,76,67,.75),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .15s var(--ease)}
.fab-add:active{transform:scale(.94)}
.fab-add svg{width:28px;height:28px;stroke-width:2.2}
@media (min-width:600px){ .tabs{inset-inline-start:auto;inset-inline-end:auto;left:50%;transform:translateX(calc(-50% - (var(--tab-h) + 10px)/2));width:440px} .fab-add{inset-inline-end:auto;left:calc(50% + 220px - (var(--tab-h) + 10px)/2 + 10px)} [dir=rtl] .fab-add{left:auto;right:calc(50% + 220px - (var(--tab-h) + 10px)/2 + 10px)} [dir=rtl] .tabs{transform:translateX(calc(-50% + (var(--tab-h) + 10px)/2))} }

/* ───────── Cards + lists ───────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 2px 10px}
.sec-h h2{font:600 1.08rem/1.3 var(--f-disp)}
.sec-h .link{font-size:.9rem;display:inline-flex;align-items:center;gap:2px}
.sec-h .link svg{width:16px;height:16px}
.sec-h small{color:var(--muted);font-size:.85rem}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--line);width:100%;background:none;border-inline:0;border-top:0;text-align:start;color:var(--ink)}
.row:last-child{border-bottom:0}
button.row:active{background:var(--soft)}
.row-t{display:flex;flex-direction:column;min-width:0}
.row-t b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-t small{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-a{font-weight:600;text-align:end;white-space:nowrap}
.row-a small{display:block;font-weight:400;font-size:.75rem;color:var(--muted)}
.cico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--cc) 14%,transparent);color:var(--cc);flex:none}
.cico svg{width:21px;height:21px}
.day-h{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;color:var(--muted);font-weight:600;margin:14px 4px 4px}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--muted);padding:22px 10px;font-size:.94rem}
.empty svg{width:34px;height:34px;color:var(--accent)}
.hscroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{scroll-snap-align:start;flex:0 0 auto}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--soft);color:var(--muted)}
.tag.bad{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}
.tag.warn{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.tag.good{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}

/* ───────── Home: the left-to-spend card ───────── */
.greet{color:var(--muted);font-size:.95rem;margin:2px 2px -6px}
.hero{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;padding:20px;background:var(--hero);color:#fff;box-shadow:0 30px 60px -30px rgba(0,76,67,.7)}
.hero::before{content:"";position:absolute;z-index:-1;width:300px;height:300px;border-radius:50%;inset-inline-end:-120px;top:-150px;background:radial-gradient(circle,rgba(32,209,208,.5),transparent 65%)}
.hero-top{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.hero-cap{font-size:.9rem;color:rgba(255,255,255,.85)}
.hero-big{font:600 clamp(2.4rem,11vw,3.4rem)/1.1 var(--f-disp);letter-spacing:-.02em;margin:4px 0 2px;display:flex;align-items:baseline;gap:6px}
.hero-big .cs{height:.42em;opacity:.8}
.hero-big.neg{color:#FFB4AB}
.ring{position:relative;width:96px;height:96px}
.ring > svg{width:100%;height:100%;transform:rotate(-90deg)}
[dir=rtl] .ring > svg{transform:rotate(-90deg) scaleY(-1)}
.ring .tr{stroke:rgba(255,255,255,.18);stroke-width:9}
.ring .pr{stroke:url(#ringGrad);stroke-width:9;transition:stroke-dashoffset .8s var(--ease)}
.ring .pr.over{stroke:#FF8A80}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:600 1.05rem var(--f-disp)}
.ring b small{display:block;font:500 .75rem var(--f-body);opacity:.8;margin-top:-6px}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.hstat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:10px 12px;min-width:0}
.hstat small{display:block;font-size:.74rem;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hstat b{font:600 1.08rem var(--f-disp);white-space:nowrap}
.hstat b .cs{height:.62em;opacity:.8}
.pace{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:.86rem}
.pace i{width:8px;height:8px;border-radius:50%;background:#A2F0D2}
.pace.warn i{background:#FFC46B} .pace.over i{background:#FF8A80}
.hero-cta{margin-top:14px;background:#fff;color:#004C43;border:0}

.flowbar{display:flex;height:14px;border-radius:999px;overflow:hidden;gap:3px;background:var(--soft);margin:4px 0 12px}
.flowbar i{display:block;min-width:4px;transition:flex-grow .5s var(--ease)}
.flowbar i.left{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--teal) 55%,transparent) 0 5px,transparent 5px 9px)}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px 16px}
.legend div{display:grid;grid-template-columns:10px 1fr;column-gap:8px;align-items:center}
.legend i{width:10px;height:10px;border-radius:3px}
.legend span{font-size:.8rem;color:var(--muted)}
.legend b{grid-column:2;font-weight:600}

.up-card{width:168px;padding:14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh);display:flex;flex-direction:column;gap:8px;text-align:start;color:var(--ink)}
.up-card b{font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-card .amt{font-weight:600}
.goal-card{width:200px}
.gring{width:46px;height:46px;position:relative}
.gring > svg{width:100%;height:100%;transform:rotate(-90deg)}
.gring .tr{stroke:var(--soft);stroke-width:6}
.gring .pr{stroke:var(--accent);stroke-width:6}
.gring b{position:absolute;inset:0;display:grid;place-items:center;font:600 .72rem var(--f-disp)}
.add-card{border-style:dashed;align-items:center;justify-content:center;color:var(--accent);font-weight:600;box-shadow:none}

/* income card */
.inc-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.inc-line:last-of-type{border-bottom:0}
.inc-line small{color:var(--muted);font-size:.8rem;margin-inline-start:6px}
.xbtn{width:40px;height:40px;border-radius:10px;border:0;background:none;color:var(--muted);display:grid;place-items:center}
.xbtn svg{width:18px;height:18px}
.xbtn:hover{background:var(--soft);color:var(--bad)}

/* ───────── Activity ───────── */
.search{position:relative}
.search svg{position:absolute;top:50%;inset-inline-start:14px;transform:translateY(-50%);color:var(--muted);width:20px;height:20px}
.search .in{padding-inline-start:44px;border-radius:999px;background:var(--surface)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.9rem;font-weight:500;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip i{width:8px;height:8px;border-radius:50%}
.sumline{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 4px}
.sumline b{font:600 1.6rem var(--f-disp)}

/* ───────── Plan ───────── */
.plan-sum{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mini-stat{padding:14px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.mini-stat small{display:block;color:var(--muted);font-size:.8rem}
.mini-stat b{font:600 1.25rem var(--f-disp)}
.amt-in{width:110px;min-height:40px;border:1.5px solid var(--line);border-radius:12px;background:var(--soft);padding:6px 10px;text-align:end;direction:ltr;font-family:var(--f-disp);font-weight:600}
.amt-in:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.tick{width:34px;height:34px;position:relative;border-radius:50%;border:2px solid var(--line);background:none;display:grid;place-items:center;color:transparent;flex:none}
.tick svg{width:18px;height:18px;stroke-width:2.6}
.tick[aria-checked="true"]{background:var(--good);border-color:var(--good);color:#fff}
.item-row{grid-template-columns:auto 1fr auto}
.item-row.done .row-t b{text-decoration:line-through;color:var(--muted)}
.item-open{display:contents}
.grp{font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:.02em;margin:12px 2px 2px}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.stepper button{width:36px;height:38px;border:0;background:var(--soft);font-size:1.1rem;font-weight:600}
.stepper input{width:46px;border:0;text-align:center;background:var(--surface);font-family:var(--f-disp);font-weight:600;min-height:38px}
.work-row{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.work-row:last-child{border-bottom:0}
.work-row .wctl{display:flex;align-items:center;gap:8px;grid-column:1 / -1;justify-content:space-between;flex-wrap:wrap}
.trip{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:8px;align-items:center;padding:6px 0}
.trip .in{min-height:38px;padding:6px 10px;font-size:.9rem}

/* ───────── Insights ───────── */
.donut-wrap{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center}
.donut{position:relative;width:150px;height:150px}
.donut > svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 1.1rem var(--f-disp)}
.donut b small{font:500 .74rem var(--f-body);color:var(--muted)}
.bars{display:flex;align-items:flex-end;justify-content:flex-start;gap:3px;height:140px;padding-top:10px;position:relative}
.bars i{flex:1;min-width:3px;max-width:26px;border-radius:5px 5px 2px 2px;background:var(--accent);opacity:.85}
.bars i.zero{background:var(--line);height:3px!important}
.bars i.top{background:var(--c-food);opacity:1}
.bars .avg{position:absolute;left:0;right:0;border-top:1.5px dashed var(--muted);opacity:.6}
.bars-x{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:6px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmp{font:600 1.25rem var(--f-disp)}
.cmp.down{color:var(--good)} .cmp.up{color:var(--warn)}
.catbar{height:6px;border-radius:999px;background:var(--soft);overflow:hidden;margin-top:6px}
.catbar i{display:block;height:100%;border-radius:999px}

/* ───────── Account ───────── */
.prof{display:flex;align-items:center;gap:14px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:0}
.set-row .row-t b{white-space:normal}
.set-row select.in{width:auto;min-height:40px;padding:6px 12px}
.edit-row{display:grid;grid-template-columns:1fr 110px auto;gap:8px;align-items:center;padding:6px 0}
.edit-row.fx{grid-template-columns:1fr 100px 110px auto}
.edit-row .in{min-height:42px;padding:8px 12px}
.edit-row .in.a{direction:ltr;text-align:end;font-family:var(--f-disp)}
@media (max-width:520px){ .edit-row.fx{grid-template-columns:1fr 100px auto} .edit-row.fx select{grid-column:1 / -1;order:5} }
.mainbtn{border:1.5px solid var(--line);background:none;border-radius:10px;padding:4px 10px;font-size:.8rem;color:var(--muted);white-space:nowrap}
.mainbtn.on{border-color:var(--accent);color:var(--accent);font-weight:600}
.nt-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.nt-row.off{opacity:.5}
.nt-rt{display:flex;flex-direction:column;min-width:0}
.nt-rt b{font-weight:600}
.nt-rt small{color:var(--muted);font-size:.84rem;line-height:1.5}
.nt-sel{min-height:40px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);padding:6px 10px;direction:ltr}
.nt-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ───────── Sheets ───────── */
.sheet{border:0;padding:0 18px calc(18px + env(safe-area-inset-bottom,0px));margin:auto auto 0;width:100%;max-width:520px;max-height:92vh;overflow:auto;
  background:var(--surface);color:var(--ink);border-radius:28px 28px 0 0;box-shadow:var(--sh-up)}
.sheet::backdrop{background:rgba(0,26,22,.45)}
.sheet[open]{animation:up .3s var(--ease)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet.center{margin:auto;border-radius:24px;max-width:380px;padding:22px}
.grab{width:40px;height:5px;border-radius:9px;background:var(--line);margin:8px auto 6px}
.sh-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 14px}
.sh-head h2{font:600 1.25rem var(--f-disp)}
.sh-x{width:36px;height:36px;border-radius:999px;border:0;background:var(--soft);color:var(--muted);display:grid;place-items:center}
.sh-x svg{width:18px;height:18px}
.sh-sub{margin:-6px 0 14px;color:var(--muted)}
.sh-body{display:flex;flex-direction:column;gap:12px}
.sh-foot{display:flex;gap:10px;margin-top:16px}
.sh-foot .btn{flex:1}
@media (min-width:700px){ .sheet{margin:auto;border-radius:28px;padding-top:12px} .grab{display:none} }

/* quick add */
.qa-amt{display:flex;align-items:baseline;justify-content:center;gap:8px;font:600 3rem/1.1 var(--f-disp);margin:6px 0 2px;min-height:62px;direction:ltr}
.qa-amt .cs{height:.42em;color:var(--muted)}
.qa-amt.empty-a{color:var(--muted)}
.qa-left{text-align:center;color:var(--muted);font-size:.85rem;min-height:1.4em}
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 0 4px}
.cat{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:6px 2px;border-radius:14px;font-size:.72rem;color:var(--muted);font-weight:500;line-height:1.25;text-align:center}
.cat .cico{width:44px;height:44px;border-radius:15px;transition:transform .15s var(--ease)}
.cat[aria-pressed="true"]{color:var(--ink);font-weight:600}
.cat[aria-pressed="true"] .cico{background:var(--cc);color:#fff;transform:scale(1.06)}
.qa-meta{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.datechips{display:flex;gap:6px}
.datechips .chip{min-height:40px}
.datepick{position:relative;cursor:pointer;padding:0 10px}
.datepick svg{width:18px;height:18px}
.datepick input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.datepick[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.qa-meta{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:400px){ .qa-meta{grid-template-columns:1fr} }
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;direction:ltr}
.keypad button{min-height:54px;border-radius:16px;border:0;background:var(--soft);font:600 1.4rem var(--f-disp);color:var(--ink)}
.keypad button:active{background:var(--line)}
.keypad svg{width:24px;height:24px}
@media (hover:hover) and (pointer:fine){ .keypad{display:none} }

.ios-steps{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.ios-steps li{display:flex;align-items:center;gap:12px;background:var(--soft);border-radius:16px;padding:12px 14px}
.ios-steps b{width:28px;height:28px;border-radius:999px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:.9rem;flex:none}
.ios-share{width:16px;height:20px;vertical-align:-4px;stroke:#0A84FF}
.nt-list{display:flex;flex-direction:column;gap:8px}
.nt{display:flex;align-items:center;gap:12px;width:100%;text-align:start;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:12px 14px;color:var(--ink)}
.nt-ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent)}
.nt-ic svg{width:21px;height:21px}
.nt-late .nt-ic,.nt-over .nt-ic{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
.nt-salary .nt-ic{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.nt-t{display:flex;flex-direction:column;min-width:0}
.nt-t b{font-weight:600;line-height:1.45}
.nt-t small{color:var(--muted);font-size:.85rem}
.nt-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:26px 10px;color:var(--muted)}
.nt-empty svg{width:40px;height:40px;stroke:var(--accent);margin-bottom:6px}
.nt-empty b{color:var(--ink)}
.nt-set{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:14px;border:0;border-radius:16px;background:var(--soft);padding:14px 16px;font-weight:600;color:var(--ink)}
.nt-set svg{width:18px;height:18px}

.toast{position:fixed;z-index:80;left:50%;bottom:calc(var(--tab-h) + 28px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:16px;font-size:.92rem;max-width:calc(100% - 32px);box-shadow:var(--sh);transition:opacity .25s,transform .25s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ───────── Onboarding ───────── */
.onb{position:fixed;inset:0;z-index:60;background:var(--bg);overflow:auto;display:flex;justify-content:center;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px))}
.onb-box{width:100%;max-width:460px;display:flex;flex-direction:column;gap:16px}
.onb-top{display:flex;align-items:center;justify-content:space-between}
.onb-top img{width:36px}
.dots{display:flex;gap:6px}
.dots i{width:22px;height:5px;border-radius:3px;background:var(--line);transition:all .25s}
.dots i.on{background:var(--accent);width:34px}
.onb h2{font:600 1.7rem/1.3 var(--f-disp)}
.onb p.lead{color:var(--muted)}
.onb-chips{display:flex;flex-wrap:wrap;gap:8px}

/* ───────── Boot ───────── */
.boot{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .3s}
.boot img{width:64px;animation:pulse 1.4s ease-in-out infinite}
.boot span{width:120px;height:3px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.boot span::after{content:"";position:absolute;inset:0;width:40%;background:var(--accent);border-radius:3px;animation:slide 1.1s ease-in-out infinite}
.boot.out{opacity:0;pointer-events:none}
@keyframes pulse{50%{transform:scale(.92);opacity:.8}}
@keyframes slide{from{transform:translateX(-120%)}to{transform:translateX(320%)}}

/* ───────── Landing ───────── */
.landing{position:fixed;inset:0;z-index:50;overflow-y:auto;background:radial-gradient(1000px 520px at 90% -10%,color-mix(in srgb,var(--teal) 14%,transparent),transparent 60%),radial-gradient(900px 500px at 0% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),var(--bg)}
.landing>*{max-width:1100px;margin-inline:auto;padding-inline:max(20px,env(safe-area-inset-left,0px))}
.l-nav{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:14px;
  background:color-mix(in srgb,var(--bg) 75%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);max-width:none;padding-inline:max(20px,calc((100% - 1100px)/2 + 20px))}
.l-brand{display:flex;align-items:center;gap:8px}
.l-brand img{width:32px}
.l-brand b{font:600 1.25rem var(--f-disp);direction:ltr}
.l-navr{display:flex;gap:8px;align-items:center}
@media (max-width:560px){ .l-in{display:none} }
.l-hero{display:grid;gap:36px;padding-top:28px;padding-bottom:48px;align-items:center}
.l-pill{display:inline-block;font-size:.84rem;font-weight:600;color:var(--accent);background:var(--surface);border:1px solid var(--line);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.l-copy h1{margin:0 0 14px;font:600 clamp(2.2rem,7vw,3.5rem)/1.15 var(--f-disp);letter-spacing:-.02em;text-wrap:balance;margin-bottom:14px}
.l-sub{font-size:1.1rem;color:var(--muted);line-height:1.8;max-width:34em;margin-bottom:22px}
.l-ctas{display:flex;gap:10px;flex-wrap:wrap}
.l-points{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:20px 0 0;color:var(--muted);font-size:.9rem}
.l-points li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-inline-end:8px;vertical-align:1px}
.l-phone{justify-self:center;width:300px;max-width:100%;border-radius:44px;padding:12px;background:#0B1F1C;box-shadow:0 40px 80px -30px rgba(0,76,67,.6)}
.l-screen{border-radius:34px;background:var(--bg);padding:16px 12px;display:flex;flex-direction:column;gap:10px;pointer-events:none;overflow:hidden;font-size:14px}
.l-screen .hero{padding:16px;border-radius:22px}
.l-screen .hero-big{font-size:2.2rem}
.l-screen .ring{width:70px;height:70px}
.l-screen .hstat{padding:8px}
.l-screen .hstat b{font-size:.92rem}
.l-sec{padding-top:40px;padding-bottom:40px}
.l-sec>h2,.l-final h2{font:600 clamp(1.5rem,4vw,2.1rem) var(--f-disp);margin-bottom:22px}
.l-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.l-feat{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--sh)}
.l-feat h3{font:600 1.05rem var(--f-disp);margin:12px 0 6px}
.l-feat p,.l-steps p,.l-privacy p{color:var(--muted);line-height:1.75;font-size:.94rem}
.l-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.l-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.l-steps li{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px}
.l-steps b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-family:var(--f-disp)}
.l-steps h3{font:600 1.05rem var(--f-disp);margin:12px 0 6px}
.l-privacy{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px!important;margin:20px auto!important;width:calc(100% - 40px)}
.l-privacy h3{font:600 1.05rem var(--f-disp);margin:4px 0 6px}
.l-final{text-align:center;padding-top:40px;padding-bottom:56px}
.l-foot{display:flex;justify-content:space-between;padding-top:20px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
@media (min-width:900px){ .l-hero{grid-template-columns:1.15fr 1fr;padding-top:60px;padding-bottom:80px} }

/* ───────── Sign in ───────── */
.auth{position:fixed;inset:0;z-index:70;overflow:auto;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(900px 500px at 100% 0%,color-mix(in srgb,var(--teal) 14%,transparent),transparent 60%),var(--bg)}
.auth-box{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:26px 22px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:14px}
.a-back{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--muted);font-size:.9rem;padding:0}
.a-back svg{width:18px;height:18px}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.auth-brand img{width:54px}
.auth-brand .auth-name{font:600 1.6rem var(--f-disp)}
.auth-brand p{color:var(--muted);font-size:.92rem}
#aForm{display:flex;flex-direction:column;gap:12px}
.aerr{min-height:1.2em;color:var(--bad);font-size:.88rem}
.aerr.ok{color:var(--good)}
.auth-links{display:flex;justify-content:space-between}
.auth-note{font-size:.78rem;color:var(--muted);text-align:center}

/* ───────── Desktop: rail + two columns ───────── */
@media (min-width:980px){
  .app{display:grid;grid-template-columns:250px minmax(0,1fr)}
  .rail{display:flex;flex-direction:column;gap:8px;position:sticky;top:0;height:100vh;padding:22px 14px;background:var(--surface);border-inline-end:1px solid var(--line)}
  .rail-brand{display:flex;align-items:center;gap:10px;padding:0 8px 18px}
  .rail-brand img{width:36px}
  .rail-brand b{font:600 1.3rem var(--f-disp)}
  .rail-nav{display:flex;flex-direction:column;gap:4px}
  .rail-nav button{display:flex;align-items:center;gap:12px;border:0;background:none;padding:11px 14px;border-radius:14px;color:var(--muted);font-weight:600;text-align:start}
  .rail-nav button:hover{background:var(--soft);color:var(--ink)}
  .rail-nav button[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
  .rail-add{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;min-height:48px;border:0;border-radius:14px;background:var(--hero);color:#fff;font-weight:600}
  .rail-me{margin-top:auto;display:flex;align-items:center;gap:10px;border:0;background:var(--soft);padding:10px;border-radius:16px;text-align:start}
  .rail-me-t{display:flex;flex-direction:column;min-width:0}
  .rail-me-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail-me-t small{color:var(--muted);font-size:.8rem}
  .tabs,.ava-btn,.fab-add{display:none}
  .bar{padding:22px 32px 8px;grid-template-columns:1fr auto;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .bar h2{font-size:1.8rem}
  .period{margin:4px 32px 14px;margin-inline-start:32px}
  main{padding:0 32px 48px}
  .grid2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
  .grid2>.col{display:flex;flex-direction:column;gap:16px;min-width:0}
  .hero-big{font-size:3.6rem}
  .ring{width:120px;height:120px}
  .toast{bottom:28px}
}

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }
@media (prefers-reduced-transparency:reduce){ .bar,.tabs,.l-nav{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none} }
@media (prefers-contrast:more){ :root{--line:#7F9690;--muted:#2F4641} }

/* 44pt touch area for the small round controls (the visible circle stays compact) */
.tick::after,.xbtn::after{content:"";position:absolute;inset:-6px}
.xbtn{position:relative}
/* desktop: rows and cards answer the pointer */
@media (hover:hover) and (pointer:fine){
  button.row:hover,.up-card:hover,.nt:hover{background:var(--soft)}
  .chip:hover,.btn.ghost:hover{border-color:var(--accent)}
}
.toast{display:flex;align-items:center;gap:14px}
.toast.has-act{pointer-events:auto}
.toast-act{border:0;background:none;color:var(--teal);font-weight:600;padding:6px 4px;min-height:36px}
.sheet{transition:transform .25s var(--ease)}

/* ───────── frontend-design pass (2026-10-28) ─────────
   The balance card is a solid deep purple like a bank card (no gradient wash or glow); its signature is the
   salary-month strip. Cards are flat with a hairline border; only floating layers (bars, + button, sheets,
   balance card) cast a shadow. */
:root{ --card-ink:#004C43 }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --card-ink:#00453D } }
:root[data-theme="dark"]{ --card-ink:#00453D }
.hero{background:var(--card-ink)}
.hero::before{content:none}
.strip{display:flex;gap:2px;height:22px;margin-top:16px;direction:inherit}
.strip i{flex:1;min-width:2px;border-radius:3px;background:rgba(255,255,255,.13)}
.strip i.u{background:#A2F0D2}
.strip i.o{background:#FF8A80}
.strip i.t{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35);border-radius:4px}
.strip-cap{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:.78rem;color:rgba(255,255,255,.82)}
.card,.mini-stat,.up-card,.l-feat,.auth-box,.period{box-shadow:none}
.legend b .pct{font-weight:500;color:var(--muted);font-size:.78rem;margin-inline-start:4px}
.row-a small{white-space:nowrap}
.landing{background:var(--bg)}
.auth{background:var(--bg)}

/* onboarding pass: setup ends on the answer; get-started checklist on Home */
.onb-reveal{text-align:center;padding:18px 0 6px}
.onb-big{display:flex;align-items:baseline;justify-content:center;gap:8px;font:600 clamp(2.8rem,14vw,4rem)/1.1 var(--f-disp);color:var(--accent);direction:ltr;margin:6px 0}
.onb-big .cs{height:.4em;color:var(--muted)}
.start .sec-h{margin-bottom:6px}
.start-bar{height:8px;border-radius:999px;background:var(--soft);overflow:hidden;margin-bottom:6px}
.start-bar i{display:block;height:100%;background:var(--good);border-radius:999px;transition:width .5s var(--ease)}
.start-row .tick{width:28px;height:28px;display:grid;place-items:center;color:transparent}
.start-row .tick[aria-checked="true"]{background:var(--good);border-color:var(--good);color:#fff}
.start-row.done .row-t b{color:var(--muted);text-decoration:line-through}
.start-row:disabled{cursor:default;opacity:1}

/* signup pass: password eye, hints, trust line */
.pass-wrap{position:relative}
.pass-wrap .in{padding-right:52px;padding-left:14px}
.pass-eye{position:absolute;top:50%;transform:translateY(-50%);right:4px;width:44px;height:44px;border:0;background:none;color:var(--muted);display:grid;place-items:center;border-radius:12px}
.pass-eye[aria-pressed="true"]{color:var(--accent)}
.pass-eye svg{width:20px;height:20px}
.a-hint{margin:-4px 2px 0;font-size:.84rem;color:var(--muted)}
#aTrust{color:var(--good);font-weight:600}
#aTrust:empty{display:none}

/* cro pass: try-it calculator + FAQ on the landing page */
.try-card{display:grid;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px}
.try-card h2{font:600 clamp(1.4rem,4vw,1.9rem) var(--f-disp);margin-bottom:4px}
.try-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){ .try-form{grid-template-columns:1fr} }
.try-out{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px;border-radius:18px;background:var(--soft);min-height:84px;justify-content:center;text-align:center}
.try-out b{display:flex;align-items:baseline;gap:6px;font:600 2.4rem/1.1 var(--f-disp);color:var(--accent);direction:ltr}
.try-out b .cs{height:.42em;color:var(--muted)}
@media (min-width:900px){ .try-card{grid-template-columns:1fr 1fr;align-items:center} .try-card>div:first-child{grid-column:1/-1} }
.faq{display:flex;flex-direction:column;gap:8px;max-width:760px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0 16px}
.faq summary{cursor:pointer;font-weight:600;min-height:52px;display:flex;align-items:center;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-inline-start:auto;font:600 1.3rem var(--f-disp);color:var(--muted)}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--muted);padding-bottom:14px;line-height:1.75}
#lFaq>h2{font:600 clamp(1.5rem,4vw,2.1rem) var(--f-disp);margin-bottom:18px}

/* iPhone fixes (2026-10-28): Safari gives date boxes a fixed inner width, so they spilled off the screen.
   The Expense/Income switch shows the chosen side in the accent colour, and opening a sheet no longer
   draws a focus ring on its first button. */
input[type="date"].in{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%;direction:ltr;text-align:left;line-height:1.4}
html[dir="rtl"] input[type="date"].in{text-align:right}
input[type="date"].in::-webkit-date-and-time-value{text-align:inherit;margin:0;min-height:1.4em}
input[type="date"].in::-webkit-calendar-picker-indicator{opacity:.55}
.row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.row2>*,.fl,.fl>*{min-width:0}
.seg button{transition:background .15s var(--ease),color .15s var(--ease)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:none}
dialog:focus{outline:none}
.qa-amt{margin:12px 0 4px;line-height:1.25;overflow:visible}

/* bank SMS auto-log (Account) */
.sms-p{font-size:.88rem;line-height:1.7;margin-bottom:12px}
.sms-link{display:flex;gap:8px;align-items:center}
.sms-link .in{flex:1;min-width:0;font-size:.82rem;min-height:44px}
.sms-steps{margin:14px 0 4px;padding-inline-start:20px;display:flex;flex-direction:column;gap:8px;font-size:.88rem;line-height:1.7}
.sms-steps code{font-family:ui-monospace,Menlo,monospace;background:var(--soft);padding:1px 6px;border-radius:6px;direction:ltr;unicode-bidi:isolate}
.sms-try{margin-top:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.sms-try .fl{width:100%}
.sms-try textarea.in{min-height:84px;resize:vertical;line-height:1.6;font-size:.9rem}
.sms-out{font-size:.88rem;line-height:1.6;min-height:1.4em}
.sms-last{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:.86rem;line-height:1.7}
.sms-last .link{margin-inline-start:6px}
.sms-peek{display:block;margin-top:4px;color:var(--muted);font-size:.8rem;word-break:break-word}
/* 11 categories: two rows of six */
.cats{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.cat{font-size:.68rem;padding:6px 0}
.cat .cico{width:42px;height:42px}

/* quick add with the phone's own keyboard (2026-10-28): the amount is a real field; the save button
   stays visible at the bottom of the sheet, above the keyboard. Buttons don't zoom on double tap. */
button,.chip,.cat,a,label,[role="button"]{touch-action:manipulation}
.qa-amt{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 2px;min-height:68px;direction:ltr;cursor:text}
.qa-amt-in{border:0;background:none;outline:none;padding:0;margin:0;color:var(--ink);text-align:center;
  font:600 3.2rem/1.15 var(--f-disp);font-variant-numeric:tabular-nums;min-width:1.6ch;max-width:80%;caret-color:var(--accent)}
.qa-amt-in::placeholder{color:var(--muted);opacity:.6}
.qa-amt .cs{height:1.35rem;width:auto;color:var(--muted);flex:none}
.qa-amt:focus-within::after{content:"";display:none}
.qa-left{margin-bottom:4px}
.qa-save{position:sticky;bottom:0;margin:14px -18px 0;padding:10px 18px calc(4px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--surface) 75%,transparent)}
html.kb-up .qa-save{padding-bottom:6px}
html.kb-up #addSheet .grab{display:none}
.keypad{display:none}

/* ───────── setup v3 (2026-10-28): you → daily limit → bank ───────── */
.onb-box{gap:14px;padding-bottom:24px}
.onb-top{min-height:40px}
.onb .dots{display:flex;gap:6px}
.onb .dots i{width:8px;height:8px;border-radius:9px;background:var(--line);transition:width .25s var(--ease),background .25s}
.onb .dots i.done{background:color-mix(in srgb,var(--accent) 45%,var(--line))}
.onb .dots i.on{width:28px;background:var(--accent)}
.ob-back{width:40px;height:40px;border-radius:999px;border:0;background:var(--soft);color:var(--ink);display:grid;place-items:center}
.ob-back svg{width:20px;height:20px}
.ob-step{text-align:center;color:var(--muted);font-size:.85rem;margin-top:6px}
.onb h2#onbTitle{text-align:center;font-size:1.6rem}
.onb p.lead{text-align:center;font-size:.95rem;line-height:1.7}
.onb p.lead b{color:var(--ink)}
.ob-card{display:block;background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:14px}
.ob-lab{display:block;color:var(--muted);font-size:.88rem;margin:6px 2px -4px}
.ob-lab.c,.c{text-align:center}
.ob-card .ob-lab{margin:0 0 8px}
.ob-name{text-align:center;font-size:1.15rem;background:var(--soft);border-color:transparent}
.ob-row{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.ob-rt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ob-rt b{font-weight:600}
.ob-rt small{color:var(--muted);font-size:.8rem}
.ob-pick{position:relative;display:flex;align-items:center;gap:2px;color:var(--accent);flex:none}
.ob-pick select{appearance:none;-webkit-appearance:none;border:0;background:none;color:var(--accent);font:600 1.6rem var(--f-disp);padding:0 4px;text-align:center;direction:ltr;cursor:pointer}
.ob-pick svg,.ob-cur svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.ob-money{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 14px}
.ob-amt{border:0;background:none;outline:none;width:100%;text-align:center;color:var(--ink);font:600 2.6rem/1.15 var(--f-disp);direction:ltr;caret-color:var(--accent)}
.ob-amt::placeholder{color:var(--muted);opacity:.5}
.ob-cur{display:inline-flex;align-items:center;gap:2px;color:var(--muted);position:relative}
.ob-cur select{appearance:none;-webkit-appearance:none;border:0;background:none;color:var(--muted);font-size:.9rem;padding:2px 2px;cursor:pointer}
.ob-addinc{align-self:center;font-size:.85rem}
.ob-fix{display:flex;flex-direction:column;gap:8px;padding:10px}
.ob-fixrow{display:grid;grid-template-columns:minmax(0,1fr) 110px 40px;gap:8px;align-items:center}
.ob-fixrow .in{min-height:44px;background:var(--soft);border-color:transparent}
.ob-fixrow .in.a{text-align:center;direction:ltr}
.ob-fixrow .xbtn,.ob-plus{width:40px;height:40px}
.ob-plus{border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.ob-plus svg{width:20px;height:20px}
.onb-chips{justify-content:center}
.onb-chips .chip{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:600}
.ob-next{margin-top:8px}
.ob-alt{align-self:center;color:var(--muted);font-size:.9rem;padding:8px}
.ob-dial{position:relative;width:min(240px,64vw);aspect-ratio:1;margin:18px auto 6px}
.ob-ring{width:100%;height:100%}
.ob-ring circle{fill:none;stroke-width:16;stroke-linecap:round}
.ob-ring .trk{stroke:var(--soft)}
.ob-ring .val{stroke:var(--accent);transition:stroke-dashoffset .15s linear}
.ob-dial-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ob-dial-c .amt{font:600 3.2rem/1 var(--f-disp)}
.ob-dial-c small{color:var(--muted);margin-top:6px}
.ob-range{width:100%;accent-color:var(--accent);height:36px;margin:4px 0 8px}
.ob-save{color:var(--teal);font-family:var(--f-disp);font-size:1.15rem;white-space:nowrap;flex:none}
.ob-demo{background:linear-gradient(160deg,var(--card-ink),color-mix(in srgb,var(--card-ink) 70%,var(--accent)));border-radius:24px;padding:26px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:20px;color:#fff}
.ob-msg{display:flex;align-items:center;gap:10px;width:100%;background:rgba(255,255,255,.1);border-radius:16px;padding:12px 14px}
.ob-msg>span:nth-child(2){display:flex;flex-direction:column;flex:1;min-width:0}
.ob-msg small{opacity:.7;font-size:.75rem}
.ob-msg b{font-weight:600}
.ob-msg em{font-style:normal;opacity:.6;font-size:.75rem}
.ob-bub{width:30px;height:30px;border-radius:999px;background:#A2F0D2;color:#003A33;display:grid;place-items:center;flex:none}
.ob-bub svg{width:16px;height:16px}
.ob-arrow{width:22px;height:22px;stroke:#A2F0D2;fill:none;stroke-width:2}
.ob-pill{display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(92,240,238,.5);border-radius:999px;padding:8px 16px;color:#A2F0D2;font-weight:600;font-size:.9rem}
.ob-pill svg{width:18px;height:18px}
.ob-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:start;background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:16px;color:var(--ink)}
.ob-opt.hi{border-color:var(--accent);background:var(--accent-soft)}
.ob-oi{width:48px;height:48px;border-radius:999px;background:var(--soft);display:grid;place-items:center;flex:none;color:var(--accent)}
.ob-opt.hi .ob-oi{background:var(--accent);color:var(--on-accent)}
.ob-oi svg{width:22px;height:22px}
.ob-ot{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.ob-ot b{font-size:1.05rem;display:flex;align-items:center;gap:8px}
.ob-ot em{font-style:normal;font-size:.72rem;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:2px 9px;font-weight:600}
.ob-ot small{color:var(--muted);font-size:.84rem;line-height:1.5}
.ob-opt>svg{width:20px;height:20px;color:var(--muted);flex:none}
.ob-note{text-align:center;color:var(--muted);background:var(--soft);border-radius:16px;padding:14px;font-size:.9rem;line-height:1.7}
/* Home: today against the daily limit */
.lim{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.lim-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.84rem;color:rgba(255,255,255,.82)}
.lim-t b{color:#A2F0D2;font-weight:600;white-space:nowrap}
.lim.over .lim-t b{color:#FF8A80}
.lim .cs{height:.8em}
.lim>i{display:block;height:6px;border-radius:9px;background:rgba(255,255,255,.13);position:relative;overflow:hidden}
.lim>i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--p);background:#A2F0D2;border-radius:9px}
.lim.over>i::after{background:#FF8A80}
/* signed in last time: the front page stays hidden while the app opens from the saved copy */
.opt #landing{display:none!important}

/* ───────── setup v4 (2026-10-28): WalleTech's own flow — salary receipt, spending styles ───────── */
.ob2{gap:14px}
.ob2 .onb-top{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:14px}
.ob2 .onb-top img{width:34px}
.ob-prog{height:6px;border-radius:9px;background:var(--soft);overflow:hidden}
.ob-prog i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--accent),var(--teal));border-radius:9px;transition:width .35s var(--ease)}
.ob-h{font:600 1.65rem/1.3 var(--f-disp);text-align:start;margin-top:8px}
.ob2 p.lead.ob-lead{text-align:start;font-size:.95rem;line-height:1.75;margin-top:-6px}
.ob-hello{display:flex;align-items:baseline;gap:8px;font:600 1.15rem var(--f-disp);margin:4px 0}
.ob-hello input{flex:1;min-width:0;border:0;border-bottom:2px dashed var(--line);background:none;color:var(--accent);font:inherit;padding:2px 2px 4px;outline:none}
.ob-hello input:focus{border-bottom-color:var(--accent)}
.ob-hello input::placeholder{color:var(--muted);opacity:.6}
.ob-salary{background:var(--card-ink);color:#fff;border-radius:24px;padding:18px 18px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh-up)}
.ob-sl{font-size:.82rem;color:rgba(255,255,255,.72)}
.ob-sline{display:flex;align-items:baseline;gap:10px;direction:ltr;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:10px;margin-bottom:4px}
.ob-sline input{flex:1;min-width:0;border:0;background:none;outline:none;color:#fff;font:600 2.5rem/1.1 var(--f-disp);font-variant-numeric:tabular-nums;caret-color:#A2F0D2}
.ob-sline input::placeholder{color:rgba(255,255,255,.35)}
.ob-salary .ob-cur select{color:rgba(255,255,255,.85);font-weight:600;font-size:.95rem;background:rgba(255,255,255,.1);border-radius:999px;padding:6px 12px}
.ob-days{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;direction:ltr;scroll-snap-type:x proximity}
.ob-days::-webkit-scrollbar{display:none}
.ob-days button{flex:none;width:40px;height:44px;border-radius:12px;border:0;background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);font:600 1rem var(--f-disp);scroll-snap-align:center}
.ob-days button[aria-checked="true"]{background:#A2F0D2;color:#003A33}
.ob-small{align-self:flex-start;font-size:.86rem}
.ob-extra{display:flex;flex-direction:column;gap:6px}
.ob-receipt{background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:16px 16px 0;display:flex;flex-direction:column;gap:8px;position:relative}
.rc-h{font-weight:600;margin-bottom:2px}
.rc-empty{color:var(--muted);font-size:.86rem}
.rc-line{display:grid;grid-template-columns:18px minmax(0,1fr) 96px 30px;align-items:center;gap:6px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.rc-m{color:var(--muted);font-weight:600;text-align:center}
.rc-name,.rc-amt{border:0;background:none;outline:none;color:var(--ink);font-size:1rem;min-height:40px;padding:0 4px;min-width:0}
.rc-amt{text-align:end;direction:ltr;font-family:var(--f-disp);font-weight:600;font-variant-numeric:tabular-nums}
.rc-name:focus,.rc-amt:focus{background:var(--soft);border-radius:8px}
.rc-x{width:30px;height:30px;border:0;background:none;color:var(--muted);display:grid;place-items:center;border-radius:999px}
.rc-x svg{width:16px;height:16px}
.ob-sugg{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 8px}
.ob-sugg button{border:1.5px dashed var(--line);background:none;color:var(--muted);border-radius:10px;padding:7px 10px;font-size:.84rem;font-weight:500}
.ob-sugg button:active{border-color:var(--accent);color:var(--accent)}
.rc-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 -16px;padding:14px 16px;border-top:2px solid var(--ink);background:var(--soft);border-radius:0 0 20px 20px}
.rc-total span{font-weight:600}
.rc-total b{font:600 1.3rem var(--f-disp);color:var(--accent)}
.ob-styles{display:flex;flex-direction:column;gap:10px}
.ob-style{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t n" "k k";gap:6px 12px;align-items:center;text-align:start;width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:14px 16px;color:var(--ink);cursor:pointer}
.ob-style[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.st-t{grid-area:t;display:flex;flex-direction:column;gap:2px}
.st-t b{font-size:1.05rem}
.st-t small{color:var(--muted);font-size:.82rem}
.st-n{grid-area:n;display:flex;flex-direction:column;align-items:flex-end}
.st-n b{font:600 1.4rem var(--f-disp)}
.st-n small{color:var(--muted);font-size:.75rem}
.st-k{grid-area:k;font-size:.82rem;color:var(--teal);font-weight:600}
.ob-style.own{grid-template-areas:"t n"}
.ob2 .ob-step{display:flex;align-items:center;gap:6px;margin:0;grid-area:n;direction:ltr}
.ob2 .ob-step button{width:38px;height:38px;border-radius:12px;border:0;background:var(--soft);color:var(--ink);font:600 1.2rem var(--f-disp)}
.ob2 .ob-step b{min-width:3.2ch;text-align:center;font:600 1.3rem var(--f-disp)}
.ob-sum{display:grid;grid-template-columns:1fr auto;grid-template-areas:"s b" "s m";align-items:center;gap:0 10px;background:color-mix(in srgb,var(--teal) 14%,var(--surface));border-radius:18px;padding:14px 16px}
.ob-sum>span{grid-area:s;font-size:.88rem;color:var(--muted)}
.ob-sum>b{grid-area:b;font:600 1.5rem var(--f-disp);color:var(--teal);text-align:end}
.ob-sum>small{grid-area:m;font-size:.75rem;color:var(--muted);text-align:end}
.ob-icon{display:grid;place-items:center;margin-top:24px}
.ob-icon img{width:84px;height:84px;border-radius:20px;box-shadow:var(--sh-up)}
.ob-how{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0;margin:4px 0}
.ob-how li{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;font-size:.92rem;line-height:1.6}
.ob-how li b{width:28px;height:28px;border-radius:999px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none;font-family:var(--f-disp)}
.ob-how li span{flex:1}
.ob-share{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:2;flex:none}
.ob-flow{display:flex;align-items:center;justify-content:center;gap:6px;margin:30px 0 8px}
.fl-n{display:flex;flex-direction:column;align-items:center;gap:8px;width:84px;text-align:center}
.fl-n i{width:58px;height:58px;border-radius:18px;background:var(--surface);border:1.5px solid var(--line);display:grid;place-items:center;color:var(--accent)}
.fl-n i svg{width:24px;height:24px}
.fl-n.p i{background:var(--card-ink);border-color:transparent}
.fl-n i img{width:34px}
.fl-n small{font-size:.75rem;color:var(--muted);line-height:1.4}
.fl-a{flex:1;max-width:34px;height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 5px,transparent 5px 9px);margin-bottom:26px}
/* sign-in screen opened from the app icon: start free on top */
.a-start{display:flex;flex-direction:column;gap:8px;margin:4px 0 6px}
.a-start-sub{text-align:center;color:var(--muted);font-size:.84rem}
.a-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.82rem;margin-top:8px}
.a-or::before,.a-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth:has(#aStartBox:not([hidden])) #aSubmit{background:none;border:1.5px solid var(--line);color:var(--ink);box-shadow:none}
.sms-more{margin-top:12px;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px}
.sms-more summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--accent)}
.sms-more[open] summary{margin-bottom:6px}

/* ───────── layout pass (2026-10-28): every screen checked at 390px ───────── */
/* list rows that open an edit sheet: icon · name/sub · amount · chevron (Account income + fixed) */
.row:has(.row-go){grid-template-columns:auto minmax(0,1fr) auto 18px}
.row-go{display:grid;place-items:center;color:var(--muted);opacity:.7}
.row-go svg{width:16px;height:16px}
.add-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 2px 4px;border:0;background:none;color:var(--accent);font-weight:600;font-size:.95rem;text-align:start}
.add-row svg{width:40px;height:40px;padding:10px;border-radius:13px;border:1.5px dashed color-mix(in srgb,var(--accent) 45%,var(--line));box-sizing:border-box}
.chk{display:flex;align-items:center;gap:10px;font-size:.92rem;padding:4px 2px}
.chk input{width:22px;height:22px;accent-color:var(--accent);flex:none}
#formSheet .cats{grid-template-columns:repeat(5,minmax(0,1fr))}
/* Home: legend in even columns; one upcoming item fills the row */
.legend{gap:10px 12px}
.legend b{font-size:.92rem;white-space:nowrap}
.hscroll>.up-card:only-child{flex:1 1 auto;width:auto;flex-direction:row;align-items:center;gap:12px}
.hscroll>.up-card:only-child b{flex:1;min-width:0}
.hscroll>.up-card:only-child .tag{flex:none}
/* Home income: name and date stacked, amount and its action on one line */
.inc-line{padding:10px 0}
.inc-line>span:first-child{display:flex;flex-direction:column;min-width:0;font-weight:500}
.inc-line small{display:block;margin:2px 0 0}
.inc-line>span:last-child{display:flex;align-items:center;gap:8px;flex:none}
.inc-line .xbtn{width:34px;height:34px}
/* Activity: the day is already the group heading */
#s-activity .rd{display:none}
/* Plan → Work: total with currency, then price × times */
.wtot{font-weight:600;white-space:nowrap}
.wtot .cs{height:.8em}
.work-row .wctl{justify-content:flex-start;gap:10px;flex-wrap:nowrap}
.wprice{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.wprice .amt-in{width:96px}
.wprice .cs{height:.85em}
.wx{color:var(--muted);font-weight:600}
/* Insights: on phones the ring sits above its list; bars cover the whole salary month */
@media (max-width:560px){
  .donut-wrap{grid-template-columns:1fr;justify-items:center;gap:16px}
  .donut-wrap>div:last-child{width:100%}
  .donut{width:168px;height:168px}
}
.bars{justify-content:space-between}
.bars i.fut{background:var(--line);opacity:.5;height:3px!important}
/* Settings: every control on the left is the same size and style */
.set-row .chip-btn,.set-row select.in,.set-row #limIn,.set-row .btn{width:132px;min-width:132px;height:42px;min-height:42px;padding:0 10px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 .9rem var(--f-body);text-align:center;text-align-last:center;justify-content:center;box-shadow:none}
.set-row #limIn{font-family:var(--f-disp);direction:ltr}
.set-row .row-t{min-width:0}
/* month strip: today over the limit */
.strip i.to{background:#FF8A80;box-shadow:0 0 0 2px rgba(255,255,255,.45);border-radius:4px}
/* amounts in RTL forms line up with the other fields (right edge) */
html[dir="rtl"] #aiAmt,html[dir="rtl"] #eAmt,html[dir="rtl"] .fl input[inputmode="decimal"]{text-align:right}
.bars i.fut,.bars i.zero{background:var(--line);opacity:1;height:5px!important;border-radius:3px}
/* landing on phones: compact cards (icon or number beside the title), points in two even columns */
@media (max-width:560px){
  .l-points{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
  .l-feat,.l-steps li{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"i h" "i p";column-gap:14px;align-items:start;padding:16px;border-radius:18px}
  .l-feat .l-ico,.l-steps li>b{grid-area:i}
  .l-feat h3,.l-steps h3{grid-area:h;margin:2px 0 4px}
  .l-feat p,.l-steps p{grid-area:p;font-size:.9rem;line-height:1.65}
  .l-feats,.l-steps{gap:10px}
}
.try-card input{text-align:right}
html[dir="ltr"] .try-card input{text-align:left}
.l-screen .hstat small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-size:.66rem}
/* setup: other income lives inside the salary card */
.ob-extra{display:flex;flex-direction:column;gap:6px;border-top:1px solid rgba(255,255,255,.16);padding-top:10px;margin-top:4px}
.ob-xline{display:grid;grid-template-columns:minmax(0,1fr) 110px 32px;gap:8px;align-items:center}
.ob-xname,.ob-xamt{min-height:42px;border:0;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;padding:0 12px;font-size:.95rem;outline:none;min-width:0}
.ob-xamt{text-align:center;direction:ltr;font-family:var(--f-disp);font-weight:600}
.ob-xname::placeholder,.ob-xamt::placeholder{color:rgba(255,255,255,.45)}
.ob-xname:focus,.ob-xamt:focus{background:rgba(255,255,255,.14)}
.ob-xdel{width:32px;height:32px;border:0;background:none;color:rgba(255,255,255,.6);display:grid;place-items:center;border-radius:999px}
.ob-xdel svg{width:16px;height:16px}
.ob-xadd{align-self:flex-start;border:0;background:none;color:#A2F0D2;font-weight:600;font-size:.88rem;padding:4px 0}

/* ═════════════ U-Wallet brand layer (2026-10-30, unslop pass) ═════════════
   One bright moment per screen: the deep-teal balance card (and the Insights donut). Everything around it is
   quiet: off-white surfaces, hairline borders, one deep-teal accent, neutral shadows, no glows or washes.
   Signature: the salary-month day strip on the balance card (gold = today). Weights 400–600 only. */
.num,.amt,.qa-amt-in,.ob-amt,.ob-sline input,.hero-big{font-feature-settings:"tnum" 1,"cv11" 1}
:lang(en) .bar h2,:lang(en) .hero-big,:lang(en) .l-copy h1,:lang(en) .l-sec>h2,:lang(en) .onb h2,:lang(en) .ob-h{letter-spacing:-.02em}

/* wordmark: U in mint, Wallet in ink */
.wm{font:600 1.3rem/1 var(--f-disp);letter-spacing:-.01em;direction:ltr;unicode-bidi:isolate;color:var(--ink)}
.wm span{color:var(--mint-ink)}
.l-tag{display:block;font:500 .75rem/1 var(--f-body);color:var(--muted);margin-top:4px}

/* balance card: deep teal, a soft neutral shadow, no glow */
.hero{background:var(--hero);box-shadow:0 1px 2px rgba(10,25,22,.08),0 16px 32px -20px rgba(10,25,22,.4)}
.hero::before,.hero::after{content:none}
:root[data-theme="dark"] .hero{box-shadow:0 0 0 1px rgba(162,240,210,.1)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hero{box-shadow:0 0 0 1px rgba(162,240,210,.1)} }
.hstat{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1)}
.pace i{background:var(--mint-soft)}
.strip i.u{background:var(--mint-soft)}
.strip i.t{background:var(--gold);box-shadow:none}
.hero-cta{background:var(--gold);color:var(--brand-3)}
.ring .tr{stroke:rgba(255,255,255,.14)}

/* controls: one deep-teal accent; the round + is solid mint */
.btn.primary{box-shadow:none}
.fab-add{background:var(--mint);color:#00342E;box-shadow:0 8px 20px -10px rgba(10,25,22,.45)}
.rail-add{background:var(--accent);color:var(--on-accent)}
.tab[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.ava{background:var(--accent-soft);color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.datepick[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.switch[aria-checked="true"]{background:var(--mint)}
.toast-act{color:var(--mint-soft)}
.bars i{background:color-mix(in srgb,var(--mint) 55%,var(--line));opacity:1}
.bars i.top{background:var(--accent)}
.gring .pr{stroke:var(--mint)}
.l-ico{background:var(--soft);color:var(--muted)}
.l-points li::before{background:var(--mint)}
.ob-save,.st-k,.ob-sum>b{color:var(--mint-ink)}
.ob-sum{background:var(--soft)}
.ob-prog i{background:var(--accent)}
.ob-demo{background:var(--card-ink)}
.ob-days button[aria-checked="true"]{background:var(--gold);color:var(--brand-3)}
.empty svg,.nt-empty svg{color:var(--muted);stroke:var(--muted)}

/* category tiles: tinted with the category colour (brand iconography) */
.cico{border-radius:14px;background:color-mix(in srgb,var(--cc) 15%,var(--surface))}

/* landing + sign-in: plain off-white page, the phone preview carries the colour */
.landing,.auth{background:var(--bg)}
.l-phone{background:#0B1F1C;box-shadow:0 24px 48px -24px rgba(10,25,22,.45)}
.l-final{background:var(--surface);border:1px solid var(--line);border-radius:24px;margin:24px auto 40px!important;max-width:min(1060px,calc(100% - 40px))!important;padding:40px 20px!important}
.l-final p{color:var(--muted);margin:-12px 0 20px}
.l-in{border:0;background:none;color:var(--ink);font-weight:500;box-shadow:none;padding-inline:8px}
.l-in:hover{color:var(--accent)}
.auth-brand img{width:64px}
.boot img{width:72px;animation:none}
.boot span::after{background:var(--mint)}

/* ───────── every device ───────── */
/* small phones (≤360px): tighter tab bar and balance numbers */
@media (max-width:360px){ :root{--tab-h:62px} .hero{padding:16px} .hero-stats{gap:6px} .hstat{padding:8px} .hstat b{font-size:.95rem} .tab span{font-size:.66rem} }
/* tablets (600–979px): one comfortable centred column, sections side by side from 760px */
@media (min-width:600px) and (max-width:979px){
  main{max-width:820px;padding-inline:24px}
  .bar{padding-inline:24px}
  .hero{padding:24px}
  .hero-big{font-size:3.4rem}
  .ring{width:112px;height:112px}
}
@media (min-width:760px) and (max-width:979px){
  .grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
  .kpis{grid-template-columns:repeat(4,1fr)}
}
/* desktop: brand rail */
@media (min-width:980px){
  .rail{background:var(--surface)}
  .rail-brand{gap:10px}
  .rail-brand img{width:40px}
  .rail-nav button[aria-current="page"]{background:var(--accent-soft);color:var(--accent);box-shadow:inset 3px 0 0 var(--mint)}
  [dir=rtl] .rail-nav button[aria-current="page"]{box-shadow:inset -3px 0 0 var(--mint)}
  .rail-foot{margin-top:10px;font-size:.72rem;color:var(--muted);text-align:center}
}
/* wide screens: more room, same reading width */
@media (min-width:1400px){
  .app{grid-template-columns:280px minmax(0,1fr)}
  main{max-width:1240px}
  .bar,.period{max-width:1240px}
}
/* landscape phones: the tab bar doesn't eat the screen */
@media (max-height:480px) and (orientation:landscape){ :root{--tab-h:56px} .tab span{display:none} }
.l-brand>span{display:flex;flex-direction:column}
.l-brand .wm,.rail-brand .wm{font:600 1.3rem/1 var(--f-disp);letter-spacing:-.01em;direction:ltr}
.l-brand img{width:38px}
b,strong{font-weight:600}

/* ═════════════ Setup v5 (2026-10-30): one question per screen ═════════════ */
.ob-wrap{width:100%;max-width:460px;margin:0 auto;display:flex;flex-direction:column}
.ob3{gap:0;min-height:calc(100dvh - 40px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.q-prog{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.q-prog i{height:4px;border-radius:4px;background:var(--line);transition:background-color .25s var(--ease)}
.q-prog i.done{background:color-mix(in srgb,var(--accent) 40%,var(--line))}
.q-prog i.on{background:var(--accent)}
.q-body{flex:1;display:flex;flex-direction:column;gap:12px;padding-top:28px}
.q-ico{width:48px;height:48px;border-radius:16px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.q-ico svg{width:24px;height:24px}
.q-num{font-size:.8rem;color:var(--muted);font-weight:500;margin-top:8px}
.onb .ob3 h2#onbTitle.q-h{font:600 1.75rem/1.3 var(--f-disp);text-align:start;margin:0}
.q-sub{color:var(--muted);line-height:1.7;font-size:.95rem}
.q-sub b{color:var(--ink);font-weight:600}
.q-input{min-height:60px;font-size:1.25rem;border-radius:16px;margin-top:12px}
/* salary: one big figure on a line, currency beside it */
.q-amt{display:flex;align-items:center;gap:12px;margin-top:16px;padding-bottom:8px;border-bottom:2px solid var(--accent);direction:ltr}
.q-amt input{flex:1;min-width:0;border:0;background:none;outline:none;padding:0;color:var(--ink);font:600 3rem/1.2 var(--f-disp);font-variant-numeric:tabular-nums;caret-color:var(--mint)}
.q-amt input::placeholder{color:var(--muted);opacity:.45}
.q-cur select{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;min-height:44px;padding:0 14px;font:600 .95rem var(--f-body);cursor:pointer}
.q-extra{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.q-xline{display:grid;grid-template-columns:minmax(0,1fr) 112px 36px;gap:8px;align-items:center}
.q-xline .in{min-height:44px}
.q-xline .in.amt{text-align:center;direction:ltr}
.q-add{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:var(--accent);font-weight:500;padding:8px 0}
.q-add svg{width:18px;height:18px}
/* payday: a month calendar */
.q-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:12px}
.q-cal button{aspect-ratio:1;min-height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 1rem var(--f-disp);display:grid;place-items:center;transition:background-color .15s var(--ease),border-color .15s var(--ease)}
.q-cal button[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.q-hint{font-size:.88rem;color:var(--muted);background:var(--soft);border-radius:12px;padding:10px 12px}
/* commitments: tiles to pick, then a line each with its amount */
.q-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:8px}
.q-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--muted);font-size:.72rem;line-height:1.3;text-align:center;transition:background-color .15s var(--ease),border-color .15s var(--ease)}
.q-tile .cico{width:36px;height:36px;border-radius:12px}
.q-tile .cico svg{width:18px;height:18px}
.q-tile[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);font-weight:500}
.q-fixes{display:flex;flex-direction:column;gap:8px}
.q-fixes:empty{display:none}
.q-fix{display:grid;grid-template-columns:40px minmax(0,1fr) 104px 36px;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px}
.q-fname,.q-famt{min-height:40px;border:0;background:none;outline:none;color:var(--ink);font-size:.95rem;min-width:0;padding:0 6px}
.q-famt{background:var(--soft);border-radius:10px;text-align:center;direction:ltr;font-weight:600}
.q-fname:focus,.q-famt:focus{box-shadow:inset 0 0 0 1.5px var(--accent);border-radius:10px}
.q-fdel{width:36px;height:36px;border:0;background:none;color:var(--muted);display:grid;place-items:center;border-radius:10px}
.q-fdel svg{width:16px;height:16px}
.q-eq{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.2fr);align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-top:4px}
.q-eq div{display:flex;flex-direction:column;min-width:0}
.q-eq span{font-size:.72rem;color:var(--muted)}
.q-eq b{font:600 1rem var(--f-disp);white-space:nowrap}
.q-eq b .amt{font-weight:600}
.q-eq i{font-style:normal;color:var(--muted)}
.q-eq-r b{color:var(--mint-ink)}
/* daily spending: radio cards */
.ob3 .ob-style,.ob3 .ob-style.own{grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"r t n";gap:12px}
.q-radio{grid-area:r;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);transition:border-width .15s var(--ease),border-color .15s var(--ease)}
.ob-style[aria-pressed="true"] .q-radio{border:6px solid var(--accent)}
.ob3 .ob-style[aria-pressed="true"]{box-shadow:none;border-color:var(--accent)}
.q-foot{position:sticky;bottom:0;margin-top:auto;padding:16px 0 calc(4px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 75%,transparent)}
.ob3 .ob-alt{align-self:center}
/* wide screens: the wallet card fills in beside the questions */
.ob-aside{display:none}
.ob-wallet{background:var(--hero);color:#fff;border-radius:24px;padding:22px;box-shadow:0 24px 48px -28px rgba(10,25,22,.5)}
.ow-top{display:flex;align-items:center;gap:8px}
.ow-top img{width:28px}
.ob-wallet .wm{color:#fff;font-size:1.05rem}
.ob-wallet .wm span{color:var(--mint-soft)}
.ow-name{margin:20px 0 12px;font:600 1.3rem var(--f-disp)}
.ow-rows div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.12);font-size:.9rem}
.ow-rows span{color:rgba(255,255,255,.75)}
.ow-rows b{font-weight:600;white-space:nowrap}
.ow-left{margin-top:12px;background:rgba(255,255,255,.08);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.ow-left>span{font-size:.85rem;color:rgba(255,255,255,.75)}
.ow-left b{font:600 1.9rem/1.2 var(--f-disp)}
.ow-left small{font-size:.82rem;color:var(--mint-soft)}
@media (min-width:960px){
  .onb{align-items:flex-start}
  .ob-wrap{max-width:940px;flex-direction:row;gap:56px;align-items:flex-start}
  .ob-wrap>.onb-box{flex:1;max-width:480px}
  .ob-aside{display:block;flex:0 0 360px;position:sticky;top:24px;margin-top:120px}
  .ob3{min-height:auto}
}
@media (max-width:370px){ .q-tiles{grid-template-columns:repeat(4,minmax(0,1fr))} .q-fix{grid-template-columns:36px minmax(0,1fr) 88px 32px} }

/* ═════════════ App v5 (2026-10-30): the brand guide's app, not Pinusy's ═════════════ */
/* cards: white on off-white with a soft shadow, no outline (dark mode keeps a hairline) */
:root{ --card-sh:0 1px 2px rgba(10,25,22,.04),0 6px 20px -12px rgba(10,25,22,.14) }
.card,.mini-stat,.up-card{border-color:transparent;box-shadow:var(--card-sh);border-radius:18px}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .mini-stat,:root[data-theme="dark"] .up-card{border-color:var(--line);box-shadow:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .card,:root:not([data-theme="light"]) .mini-stat,:root:not([data-theme="light"]) .up-card{border-color:var(--line);box-shadow:none} }
.add-card{box-shadow:none;border-color:var(--line)}
.sec-h h2{font-weight:600;font-size:1.02rem}

/* spending by category (Home) */
.cat-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0}
.cat-row .row-t b{font-weight:500}
.cat-bar{display:block;height:5px;border-radius:4px;background:var(--soft);margin-top:6px;overflow:hidden}
.cat-bar i{display:block;height:100%;border-radius:4px}
.cat-row .row-a small{color:var(--muted)}

/* bottom bar: docked, full width, the + raised in the middle (phones and tablets) */
@media (max-width:979px){
  .tabs{inset-inline:0!important;left:0!important;right:0!important;transform:none!important;width:auto!important;bottom:0;
    height:calc(64px + env(safe-area-inset-bottom,0px));padding:0 8px env(safe-area-inset-bottom,0px);border-radius:0;
    grid-template-columns:repeat(5,minmax(0,1fr));background:var(--surface);border:0;border-top:1px solid var(--line);box-shadow:0 -6px 20px -12px rgba(10,25,22,.18);
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .tab{height:56px;border-radius:12px;font-size:.7rem;gap:4px}
  .tab[aria-current="page"]{background:none;color:var(--accent)}
  .tab[aria-current="page"] span{font-weight:600}
  .fab-add{display:none}
  .tab-add{justify-self:center;width:56px;height:56px;margin-top:-22px;border:0;border-radius:50%;padding:4px;background:var(--surface);display:grid;place-items:center}
  .tab-add span{width:100%;height:100%;border-radius:50%;background:var(--mint);color:#00342E;display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(10,25,22,.45)}
  .tab-add svg{width:24px;height:24px;stroke-width:2.2}
  .tab-add:active span{transform:scale(.94)}
  main{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:979px) and (max-height:480px) and (orientation:landscape){ .tabs{height:calc(52px + env(safe-area-inset-bottom,0px))} .tab{height:48px} }
.tab-add{display:none}
@media (max-width:979px){ .tab-add{display:grid} }

/* Home on phones: a full-width teal header (bar + month + balance) instead of a floating card */
@media (max-width:759px){
  body[data-page="home"]{--pad:max(16px,env(safe-area-inset-left,0px))}
  body[data-page="home"] .bar{background:var(--card-ink);color:#fff;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  body[data-page="home"] .bar .icon-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14);color:#fff}
  body[data-page="home"] .bar .bdg{border-color:var(--card-ink)}
  body[data-page="home"] .bar .ava{background:rgba(255,255,255,.12);color:#fff}
  body[data-page="home"] .period{width:auto;max-width:none;margin:0;padding:0 calc(var(--pad) - 4px) 4px;border:0;border-radius:0;background:var(--card-ink);color:#fff;box-shadow:none}
  body[data-page="home"] .period button{color:#fff}
  body[data-page="home"] .period-l small{color:rgba(255,255,255,.7)}
  body[data-page="home"] #s-home .hero{margin:0 calc(-1 * var(--pad));border-radius:0 0 28px 28px;background:var(--card-ink);box-shadow:none;padding:12px var(--pad) 20px}
  :root[data-theme="dark"] body[data-page="home"] #s-home .hero{box-shadow:none}
}
@media (min-width:600px) and (max-width:759px){ body[data-page="home"]{--pad:24px} }

/* add expense: the brand guide's 4-across category grid with larger tiles */
#addSheet .cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px}
#addSheet .cat{font-size:.74rem;padding:6px 2px}
#addSheet .cat .cico{width:52px;height:52px;border-radius:16px}
#addSheet .cat .cico svg{width:22px;height:22px}

/* Home on tablets and laptops: the balance card spans the full width on top, the other sections sit below it */
@media (min-width:760px){
  #s-home>.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:center;padding:28px 32px}
  #s-home>.hero>*{grid-column:1 / -1}
  #s-home>.hero>.hero-top{grid-column:1;grid-row:1}
  #s-home>.hero>.hero-stats{grid-column:2;grid-row:1;margin-top:0}
  #s-home>.hero>.pace{justify-self:start}
  #s-home>.hero .hero-big{font-size:clamp(3.4rem,5.6vw,4.6rem)}
  #s-home>.hero .ring{width:128px;height:128px}
  #s-home>.hero .hstat{padding:14px 16px}
  #s-home>.hero .hstat b{font-size:1.3rem}
}

/* ═════════════ Consistency pass (2026-10-30) ═════════════ */
/* month switcher: same width as the content under it (tablets and laptops) */
@media (min-width:600px) and (max-width:979px){ .period{width:min(100% - 48px, 772px);margin:4px auto 14px} }
@media (min-width:980px){ .period{width:min(100% - 64px, 1056px);margin:4px auto 14px} .bar{max-width:1120px;margin-inline:auto;width:100%} }
@media (min-width:1400px){ .period{width:min(100% - 64px, 1176px)} .bar{max-width:1240px} }

/* where your income goes: one line per part (dot · name · amount · share), like the category list */
.legend{grid-template-columns:1fr!important;gap:0}
.legend div{display:grid;grid-template-columns:10px minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.legend div:last-child{border-bottom:0}
.legend span{font-size:.9rem;color:var(--ink)}
.legend b{grid-column:auto;font-weight:600;white-space:nowrap;text-align:end}
.legend b .pct{display:inline-block;min-width:3.2ch}


/* get-started checklist: done steps are calm, not crossed out */
.start-row.done .row-t b{text-decoration:none;color:var(--muted);font-weight:400}

/* Plan → Fixed: the note and its link stay on one line */
#s-plan .card>p.muted .link{display:inline;padding:0;margin-inline-start:4px}
.auth-name .wm{font-size:1.6rem}
/* edit expense: same category grid as Add */
#editSheet .cats,#formSheet .cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px}
#editSheet .cat,#formSheet .cat{font-size:.74rem;padding:6px 2px}
#editSheet .cat .cico,#formSheet .cat .cico{width:52px;height:52px;border-radius:16px}
#editSheet .cat .cico svg,#formSheet .cat .cico svg{width:22px;height:22px}

/* ═════════════ Home grid (2026-10-30) ═════════════
   Phones: one column. Tablets and laptops: full-width rows (balance, coming up, checklist, goals)
   and boxes in pairs that share a row height (categories | recent, income flow | income). */
.home-grid{display:flex;flex-direction:column;gap:16px;min-width:0}
.home-grid>.card{margin:0;min-width:0}
.up-sec .row{padding:10px 0}
.up-sec .row-t small{margin-top:2px}
.goals-sec .hscroll{margin:0 -16px;padding:2px 16px 4px}
.goals-sec .up-card{box-shadow:none;background:var(--soft);border-color:transparent}
.goals-sec .add-card{background:none;border:1.5px dashed var(--line)}
@media (min-width:760px){
  .home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .home-grid>.span2{grid-column:1 / -1}
  .home-grid>.card{display:flex;flex-direction:column}
  .home-grid>.card .empty{flex:1;justify-content:center}
  /* coming up: items side by side on wide screens */
  .up-sec{display:grid!important;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));column-gap:32px}
  .up-sec>.sec-h,.up-sec>.empty{grid-column:1 / -1}
  .up-sec>.row{border-bottom:0}
}
/* balance card: amount and stats side by side only when there is room; labels never cut off */
@media (min-width:760px) and (max-width:1199px){
  #s-home>.hero{display:block}
  #s-home>.hero>.hero-stats{margin-top:16px}
}
.hstat small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}


/* ═════════════ Type: The Year of Handicrafts (2026-10-30) ═════════════
   All Arabic text uses the Year of Handicrafts family; Latin letters and figures stay in Inter
   (unicode-range keeps each face to Arabic). Roles, from the font's brand guide:
   Regular 400 body · Medium 500 labels and secondary text · SemiBold 600 section/sheet titles and buttons ·
   Bold 700 screen titles and questions · Black 900 the landing headline. */
@font-face{font-family:"UW Handicrafts";src:url("/assets/fonts/YearOfHandicrafts-Regular.otf?v=1") format("opentype");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"UW Handicrafts";src:url("/assets/fonts/YearOfHandicrafts-Medium.otf?v=1") format("opentype");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"UW Handicrafts";src:url("/assets/fonts/YearOfHandicrafts-SemiBold.otf?v=1") format("opentype");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"UW Handicrafts";src:url("/assets/fonts/YearOfHandicrafts-Bold.otf?v=1") format("opentype");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"UW Handicrafts";src:url("/assets/fonts/YearOfHandicrafts-Black.otf?v=1") format("opentype");font-weight:900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
:root{
  --f-body:"UW Handicrafts","Inter","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-disp:"Inter","UW Handicrafts","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-head:"UW Handicrafts","Inter","IBM Plex Sans Arabic",system-ui,sans-serif;
}
body{font-family:var(--f-body)}
/* Arabic keeps its natural spacing */
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(ar) .q-h{letter-spacing:0}

/* Black: the landing headline */
.l-copy h1{font:900 clamp(2.5rem,6.5vw,4rem)/1.3 var(--f-head)}
/* Bold: screen titles, setup questions, landing section titles */
.bar h2{font:700 1.65rem/1.3 var(--f-head)}
@media (min-width:980px){ .bar h2{font-size:2rem} }
.onb .ob3 h2#onbTitle.q-h{font:700 1.95rem/1.35 var(--f-head)}
.l-sec>h2,.l-final h2,#lFaq>h2,.try-card h2{font:700 clamp(1.7rem,4vw,2.4rem)/1.4 var(--f-head)}
.ob-wallet .ow-name{font:700 1.45rem/1.3 var(--f-head)}
/* SemiBold: section titles, sheet titles, card titles, buttons */
.sec-h h2{font:600 1.15rem/1.4 var(--f-head)}
.sh-head h2{font:600 1.4rem/1.35 var(--f-head)}
.l-feat h3,.l-steps h3,.l-privacy h3{font:600 1.2rem/1.45 var(--f-head)}
.btn{font-weight:600}
/* Medium: labels, navigation, captions */
.tab span{font-weight:500;font-size:.76rem}
.tab[aria-current="page"] span{font-weight:600}
.rail-nav button{font-weight:500;font-size:1rem}
.rail-nav button[aria-current="page"]{font-weight:600}
.fl,.hero-cap,.hstat small,.q-num,.legend span{font-weight:500}
/* Regular: body text — a touch larger, since this face runs small */
.l-sub{font-size:1.15rem;line-height:1.85}
.q-sub,.l-feat p,.l-steps p,.l-privacy p,.faq p{font-weight:400}

/* brand name: محفظتك in Arabic, WalleTech in English, next to the logo */
.wm-ar{display:none}
:lang(ar) .wm-en{display:none}
:lang(ar) .wm-ar{display:inline;font-family:var(--f-head);font-weight:900;letter-spacing:0;direction:rtl}
:lang(ar) .wm{font-size:1.45rem}
:lang(ar) .auth-name .wm{font-size:1.8rem}
/* the brand name stands out wherever it appears in text */
b,strong{font-weight:700}
/* logo: icon + name only, the name centred on the icon */
.l-brand,.rail-brand,.ow-top{display:flex;align-items:center;gap:10px}
.l-brand>span{display:flex;align-items:center}
.wm{line-height:1;display:inline-flex;align-items:center}
:lang(ar) .wm-ar{line-height:1;padding-top:.12em}

/* WalleTech wordmark (2026-10-31): like the logo, the name is dark and only its end is mint (Walle·Tech, محفظ·تك) */
.wm>.wm-en,.wm>.wm-ar,.ob-wallet .wm>.wm-en,.ob-wallet .wm>.wm-ar{color:inherit}

/* Header logo (2026-10-31): the full logo image (brand/logo-full.png with a little room around it, made by
   tools/make-icons.ps1). lockup-dark.png has off-white letters; it shows whenever the dark colours are on. */
.lockup{display:inline-flex;line-height:0}
.lockup img{height:64px;width:auto}
.lockup .lk-d{display:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .lockup .lk-l{display:none} :root:not([data-theme="light"]) .lockup .lk-d{display:block} }
:root[data-theme="dark"] .lockup .lk-l{display:none}
:root[data-theme="dark"] .lockup .lk-d{display:block}
.rail-brand .lockup img{height:60px}
.auth-name .lockup img{height:92px}
@media (max-width:420px){ .l-brand .lockup img{height:50px} }

/* bank SMS setup: phone screenshots under each step */
.sms-shot{display:block;width:100%;max-width:280px;height:auto;margin:10px 0 12px;border-radius:16px;border:1px solid var(--line);background:#1c1c1e}
.sms-steps #smsAddSc{margin:8px 0 6px;text-decoration:none;display:inline-flex}
/* bank SMS setup as tabs: one step and one picture at a time */
.sms-steps-tabs{margin:14px 0 4px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.sms-tabs{display:grid;grid-template-columns:repeat(4,1fr);background:var(--soft)}
.sms-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:0;background:none;color:var(--muted);font:500 .74rem/1.3 inherit;cursor:pointer;border-bottom:2px solid transparent;text-align:center}
.sms-tab b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface);border:1px solid var(--line);font:600 .78rem var(--f-num,inherit)}
.sms-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);background:var(--surface)}
.sms-tab[aria-selected="true"] b{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.sms-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sms-pane{padding:14px 16px 16px;font-size:.88rem;line-height:1.7;background:var(--surface)}
.sms-pane p{margin:0 0 8px}
.sms-pane .sms-shot{margin:8px auto 12px}
.sms-pane #smsAddSc{margin:2px 0 10px;text-decoration:none;display:inline-flex}
.sms-next{display:flex;margin-inline-start:auto}
/* Start-up gate: the dashboard shows only once sign-in is decided and the data is in (html.in, set by showApp) */
html:not(.in) #app{visibility:hidden}
.boot-msg{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:300px;padding:0 16px;text-align:center;color:var(--muted);font-size:.92rem;line-height:1.7}
.boot-msg p{margin:0}