/* Finora — modern fintech look.
   One column, phone-first, bottom tab bar with a central add button.
   Tokens first; every colour below comes from them so light/dark and the
   accent presets (set by js/theme.js) restyle everything at once. */

/* ================= tokens ================= */
:root{
  --bg:#F4F5F8; --surface:#FFFFFF; --sunk:#F1F2F6; --track:#ECEEF3; --line:#E6E8EF;
  --ink:#0F1222; --muted:#5E6478; --faint:#8A90A2;
  --accent:#0B4FC0; --on-accent:#FFFFFF;
  --good:#0B7A55; --good-soft:#E3F3EE;
  --warn:#8A5A00; --warn-soft:#FFF4D6; --warn-bar:#C98A0B;
  --bad:#B4450B; --bad-soft:#FDEBDD; --bad-bar:#E0620F;
  --inc:var(--accent); --exp:#F4A261;
  --accent-soft:color-mix(in srgb,var(--accent) 10%,var(--surface));
  --accent-ink:var(--accent);
  --shadow:0 1px 2px rgba(15,18,34,.04),0 4px 16px rgba(15,18,34,.04);
  --shadow-lg:0 12px 40px rgba(15,18,34,.18);
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:24px;
  --f-body:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-display:var(--f-body);
  --f-mono:var(--f-body);
  --f-code:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tabbar-h:72px;
  color-scheme:light;
}
:root[data-accent="teal"]{--accent:#0B6E6E}
:root[data-accent="indigo"]{--accent:#4B3FE4}
:root[data-accent="rust"]{--accent:#B4380F}
:root[data-accent="plum"]{--accent:#7A2E8E}
:root[data-accent="graphite"]{--accent:#2B3245}

/* dark: same structure, lifted accents so text on dark passes contrast */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E1117; --surface:#171B24; --sunk:#1E2330; --track:#262C3A; --line:#2A3141;
  --ink:#EEF0F6; --muted:#A1A8BA; --faint:#7D8497;
  --accent:#78A6F7; --on-accent:#0E1117;
  --good:#5CC8A0; --good-soft:#163428; --warn:#E8B85A; --warn-soft:#3A2E14; --warn-bar:#E8B85A;
  --bad:#F29A6B; --bad-soft:#3D2418; --bad-bar:#F08A4B; --exp:#E8925A;
  --accent-soft:color-mix(in srgb,var(--accent) 18%,var(--surface));
  --shadow:none; --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  color-scheme:dark}
  :root:not([data-theme="light"])[data-accent="teal"]{--accent:#4FC2BA}
  :root:not([data-theme="light"])[data-accent="indigo"]{--accent:#8F88F2}
  :root:not([data-theme="light"])[data-accent="rust"]{--accent:#F08A5D}
  :root:not([data-theme="light"])[data-accent="plum"]{--accent:#C994DB}
  :root:not([data-theme="light"])[data-accent="graphite"]{--accent:#AEB7CF}
}
:root[data-theme="dark"]{
  --bg:#0E1117; --surface:#171B24; --sunk:#1E2330; --track:#262C3A; --line:#2A3141;
  --ink:#EEF0F6; --muted:#A1A8BA; --faint:#7D8497;
  --accent:#78A6F7; --on-accent:#0E1117;
  --good:#5CC8A0; --good-soft:#163428; --warn:#E8B85A; --warn-soft:#3A2E14; --warn-bar:#E8B85A;
  --bad:#F29A6B; --bad-soft:#3D2418; --bad-bar:#F08A4B; --exp:#E8925A;
  --accent-soft:color-mix(in srgb,var(--accent) 18%,var(--surface));
  --shadow:none; --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  color-scheme:dark}
:root[data-theme="dark"][data-accent="teal"]{--accent:#4FC2BA}
:root[data-theme="dark"][data-accent="indigo"]{--accent:#8F88F2}
:root[data-theme="dark"][data-accent="rust"]{--accent:#F08A5D}
:root[data-theme="dark"][data-accent="plum"]{--accent:#C994DB}
:root[data-theme="dark"][data-accent="graphite"]{--accent:#AEB7CF}

/* ================= base ================= */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;
  overscroll-behavior-y:none;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:1.15rem;font-weight:800}
h2{font-size:1.06rem;font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num,.mono{font-variant-numeric:tabular-nums}
.label{font-size:.78rem;color:var(--muted);font-weight:600}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.pos{color:var(--good)} .neg{color:var(--bad)}
.snote{font-size:.84rem;color:var(--muted);margin:0;line-height:1.45}
.hint{font-size:.82rem;color:var(--accent-ink);margin:0}
.err{color:var(--bad);font-size:.86rem;margin:0}
.empty{color:var(--muted);font-size:.9rem;padding:10px 0;margin:0}
.loading{color:var(--muted)}

/* ================= shell ================= */
.wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px;
  padding:0 max(16px,env(safe-area-inset-right,0px)) calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
[data-sec]:not(.on){display:none!important}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:25;background:var(--bg);
  margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:12px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.avatar{width:44px;height:44px;border-radius:50%;border:0;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.avatar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand{display:flex;flex-direction:column;gap:0;min-width:0;flex:1 1 0}
.brand h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{border:0;background:none;padding:0;font:inherit;font-size:.8rem;color:var(--muted);text-align:left;display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-height:20px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.status[data-state="saved"]::before{background:var(--good)}
.status[data-state="saving"]::before,.status[data-state="loading"]::before{background:var(--accent);animation:pulse 1s ease-in-out infinite alternate}
.status[data-state="offline"]::before{background:var(--warn-bar)}
.status[data-state="error"]::before{background:var(--bad-bar)}
@keyframes pulse{from{opacity:.35}to{opacity:1}}
.month{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--surface);flex:none}
.month button{border:0;background:none;width:36px;height:40px;border-radius:999px;font-size:1.15rem;color:var(--muted);display:grid;place-items:center}
.month button:hover:not(:disabled){background:var(--sunk);color:var(--ink)}
.month button:disabled{opacity:.35;cursor:default}
.month span{text-align:center;font-weight:700;font-size:.84rem;white-space:nowrap}
@media (max-width:400px){.top h1{font-size:1rem}}
select.space,.pick.space{flex:1 1 100%;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;min-height:40px;font-weight:600}

/* page titles for non-home tabs */
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.pagehead h2{font-size:1.6rem;font-weight:800;letter-spacing:-.02em}

/* ================= components ================= */
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:999px;padding:8px 16px;min-height:44px;font-weight:600;font-size:.92rem;text-decoration:none}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.small{min-height:36px;padding:6px 14px;font-size:.86rem}
.btn.wide{width:100%;min-height:50px}
.btn.dangerbtn{border-color:var(--bad);color:var(--bad)}
.btn.dangerbtn:hover{background:var(--bad);color:var(--surface)}
.linkbtn{border:0;background:none;color:var(--accent-ink);font-size:.9rem;font-weight:600;padding:8px;align-self:center}
.iconbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink);flex:none}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* cards */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0;box-shadow:var(--shadow)}
.ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ph .meta{color:var(--muted);font-size:.85rem}

/* segmented control (also used by entry type, filters, plan sub-tabs) */
.seg,.subtabs{display:flex;gap:4px;background:var(--track);border-radius:var(--r);padding:4px;min-height:44px}
.seg button,.subtabs button{flex:1;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);font-weight:600;font-size:.9rem;padding:6px 10px}
.seg button[aria-pressed="true"],.seg button[aria-checked="true"],.subtabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(15,18,34,.12)}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;min-height:36px;font-size:.86rem;font-weight:600;color:var(--muted)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* fields */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field input,.field select,.field .pick,.txtools input,.qarow input,.askrow input,form.inline input,.amtrow input{
  width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:10px 14px;min-height:48px;min-width:0}
.field input:focus,.field select:focus,.field .pick:focus-visible,.txtools input:focus,.qarow input:focus,.askrow input:focus,form.inline input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.amtrow{display:flex;gap:8px;align-items:stretch}
.amtrow input{flex:1 1 auto}
.amtrow select,.amtrow .pick{flex:0 0 auto;width:auto;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:0 10px;min-height:48px}
.toggle{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--ink);cursor:pointer;min-height:40px}
.toggle input{accent-color:var(--accent);width:20px;height:20px;flex:none}
.fxnote{font-size:.8rem;color:var(--muted)}
.fxnote input{width:90px;border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:var(--surface)}

/* status chips */
.chip{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.chip.ok{background:var(--good-soft);color:var(--good)}
.chip.watch{background:var(--warn-soft);color:var(--warn)}
.chip.over{background:var(--bad-soft);color:var(--bad)}
.chip.none{background:var(--sunk);color:var(--muted)}

/* progress bars */
.bar,.gbar,.rrow .rbar,.strack{position:relative;height:8px;border-radius:999px;background:var(--track)}
.bar i,.gbar i,.rrow .rbar i,.strack i{position:absolute;inset:0 auto 0 0;display:block;border-radius:999px;background:var(--accent);max-width:100%}
.bar i.watch{background:var(--warn-bar)} .bar i.over{background:var(--bad-bar)}
.bar b,.strack b{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.35;border-radius:1px}
.gbar{height:10px;overflow:hidden}
.gbar i{position:static;height:100%;background:var(--good)}
@media (prefers-reduced-motion:no-preference){.bar i,.gbar i{transition:width .35s ease}}
.legend{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.legend b{display:inline-block;width:2px;height:12px;background:var(--ink);opacity:.35}
.keys{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.keys span{display:flex;align-items:center;gap:6px}
.keys i{width:10px;height:10px;border-radius:3px;display:inline-block}
.keys i.dash{background:none;border-top:2px dashed var(--good);height:0;width:14px;border-radius:0}

/* icon tiles: colour comes from a tone, the tile background is a tint of it */
.ico{--c:#3B4256;width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 13%,var(--surface));color:var(--c)}
.ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:32px;height:32px;border-radius:10px}.ico.sm svg{width:16px;height:16px}
.ico.xs{width:28px;height:28px;border-radius:50%}.ico.xs svg{width:15px;height:15px}
.ico[data-tone="accent"]{--c:var(--accent)}.ico[data-tone="indigo"]{--c:#4B3FE4}.ico[data-tone="green"]{--c:#17703F}.ico[data-tone="blue"]{--c:#1F4FB8}
.ico[data-tone="orange"]{--c:#A8470B}.ico[data-tone="amber"]{--c:#8A5A00}.ico[data-tone="teal"]{--c:#0B6B6B}
.ico[data-tone="pink"]{--c:#A3204F}.ico[data-tone="purple"]{--c:#7A2EA8}.ico[data-tone="plum"]{--c:#8E2E76}.ico[data-tone="slate"]{--c:#3B4256}
:root[data-theme="dark"] .ico{--c:#B9C0D4}
:root[data-theme="dark"] .ico[data-tone="indigo"]{--c:#A9A3FF}:root[data-theme="dark"] .ico[data-tone="green"]{--c:#6FD39A}
:root[data-theme="dark"] .ico[data-tone="blue"]{--c:#82AEFF}:root[data-theme="dark"] .ico[data-tone="orange"]{--c:#FFA772}
:root[data-theme="dark"] .ico[data-tone="amber"]{--c:#F2C462}:root[data-theme="dark"] .ico[data-tone="teal"]{--c:#5FD0C8}
:root[data-theme="dark"] .ico[data-tone="pink"]{--c:#FF8FB5}:root[data-theme="dark"] .ico[data-tone="purple"]{--c:#CFA0F5}
:root[data-theme="dark"] .ico[data-tone="plum"]{--c:#E79AD3}:root[data-theme="dark"] .ico[data-tone="slate"]{--c:#B9C0D4}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ico{--c:#B9C0D4}
  :root:not([data-theme="light"]) .ico[data-tone="indigo"]{--c:#A9A3FF}:root:not([data-theme="light"]) .ico[data-tone="green"]{--c:#6FD39A}
  :root:not([data-theme="light"]) .ico[data-tone="blue"]{--c:#82AEFF}:root:not([data-theme="light"]) .ico[data-tone="orange"]{--c:#FFA772}
  :root:not([data-theme="light"]) .ico[data-tone="amber"]{--c:#F2C462}:root:not([data-theme="light"]) .ico[data-tone="teal"]{--c:#5FD0C8}
  :root:not([data-theme="light"]) .ico[data-tone="pink"]{--c:#FF8FB5}:root:not([data-theme="light"]) .ico[data-tone="purple"]{--c:#CFA0F5}
  :root:not([data-theme="light"]) .ico[data-tone="plum"]{--c:#E79AD3}:root:not([data-theme="light"]) .ico[data-tone="slate"]{--c:#B9C0D4}
}
.ico.solid{background:var(--c);color:var(--surface)}

/* section headings above lists (Accounts, Upcoming bills…) */
.sechead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:-6px}
.sechead h2{font-size:1.06rem}
.sechead .more,.linkish{border:0;background:none;padding:6px 0;font-weight:700;font-size:.9rem;color:var(--accent-ink);cursor:pointer}
.sechead .meta{font-size:.85rem;color:var(--muted)}

/* ================= home ================= */
.banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 16px;border-radius:var(--r-lg);background:var(--warn-soft);color:var(--ink)}
.banner p{margin:0;flex:1 1 260px;font-size:.9rem}

/* hero: the accent card */
.hero{background:var(--accent);color:var(--on-accent);border-radius:var(--r-xl);padding:22px;display:flex;flex-direction:column;gap:18px}
.herotop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hero .lead{display:flex;flex-direction:column;gap:6px;min-width:0}
.hero .label{color:inherit;opacity:.85;font-weight:500;font-size:.84rem}
.hero .big{font-weight:800;font-size:clamp(2rem,9vw,2.5rem);line-height:1.05;letter-spacing:-.025em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hero .eye{width:40px;height:40px;border-radius:12px;border:0;flex:none;display:grid;place-items:center;color:inherit;background:color-mix(in srgb,var(--on-accent) 16%,transparent)}
.hero .eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero .eye[aria-pressed="true"]{background:var(--on-accent);color:var(--accent)}
.safepill{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--r-lg);background:color-mix(in srgb,var(--on-accent) 14%,transparent)}
.safepill>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.safepill .label{font-size:.78rem;opacity:1}
.safepill .pv{font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.hero .chip{background:var(--on-accent);color:var(--accent);font-size:.74rem}
.inout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.inout>div{display:flex;flex-direction:column;gap:2px}
.inout .label{font-size:.78rem}
.inout span:last-child{font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* hide balances */
body.masked .sens{filter:blur(9px);user-select:none}
@media (prefers-reduced-motion:no-preference){.sens{transition:filter .2s}}

/* quick actions */
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.quick button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--ink);padding:4px 0}
.quick .ico{width:56px;height:56px;border-radius:18px;background:var(--surface);border:1px solid var(--line);color:var(--accent-ink);box-shadow:var(--shadow)}
.quick .ico svg{width:22px;height:22px}
.quick button:active .ico{transform:scale(.95)}

/* account strip */
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:max(16px,env(safe-area-inset-left,0px));margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:2px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.acc{flex:0 0 150px;scroll-snap-align:start;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:10px;color:var(--ink);box-shadow:var(--shadow);min-height:118px}
.acc .an{font-size:.82rem;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:auto}
.acc .av{font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.acc .av.debt{color:var(--bad)}
.acc.add{border-style:dashed;box-shadow:none;background:transparent;justify-content:space-between}
.acc.add .an{color:var(--accent-ink);font-weight:700;white-space:normal}

/* budget card */
.budgetcard{gap:12px}
.bar.big{height:10px}
.bar.mini{height:5px;width:140px;max-width:100%}
.bline{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;color:var(--muted)}
.bline strong{color:var(--ink)}
.topcats{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.tc{display:flex;align-items:center;gap:12px}
.tcm{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.tct{display:flex;justify-content:space-between;gap:8px;font-size:.86rem;font-weight:600}
.tct span:last-child{color:var(--muted)}
.tct span.neg{color:var(--bad)}
.budgetcard .linkish{align-self:flex-start}

/* safe to spend this month */
.monthcard{gap:12px}
.safebig{display:flex;flex-direction:column;gap:2px}
.safebig .big{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--accent-ink)}
.safebig .big.neg{color:var(--bad)}
.safebig .perday{font-size:.88rem;color:var(--muted)}
.minis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.minis div{background:var(--sunk);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.minis dt{font-size:.76rem;color:var(--muted);font-weight:600}
.minis dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.monthcard .fc{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.86rem;color:var(--muted);line-height:1.45}
.listcard{padding:6px 16px}
/* on dark, a deep tint of the accent reads calmer than a full-strength block */
:root[data-theme="dark"] .hero{background:color-mix(in srgb,var(--accent) 24%,var(--surface));color:var(--ink)}
:root[data-theme="dark"] .hero .chip,:root[data-theme="dark"] .hero .eye[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero{background:color-mix(in srgb,var(--accent) 24%,var(--surface));color:var(--ink)}
  :root:not([data-theme="light"]) .hero .chip,:root:not([data-theme="light"]) .hero .eye[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
}

/* headline figures */
.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fig{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0;box-shadow:var(--shadow)}
.fig .v{font-size:1.25rem;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fig .n{font-size:.78rem;color:var(--muted);line-height:1.35}

/* alerts */
.alerts-panel{gap:10px}
.alerts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.alerts li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 12px;align-items:start;padding:12px 14px;border-radius:var(--r);background:var(--sunk)}
.alerts .dot{width:10px;height:10px;border-radius:50%;margin-top:6px;grid-row:1 / 3}
.alerts .dot.bad{background:var(--bad-bar)} .alerts .dot.warn{background:var(--warn-bar)} .alerts .dot.good{background:var(--good)} .alerts .dot.info{background:var(--accent)}
.alerts strong{font-size:.92rem}
.alerts p{margin:0;font-size:.84rem;color:var(--muted);grid-column:2}
.alerts .dis{border:0;background:none;color:var(--muted);font-size:1rem;line-height:1;padding:8px 10px;grid-row:1 / 3;grid-column:3;border-radius:8px}
.alerts .dis:hover{color:var(--ink);background:var(--track)}

/* bills */
.bills{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bills li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"d n a" "d s b";gap:2px 12px;padding:12px 0;border-top:1px solid var(--line);align-items:center}
.bills li:first-child{border-top:0}
.bills li.empty{display:block}
.bills .dbadge{grid-area:d;width:44px;height:44px;border-radius:12px;background:var(--sunk);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.bills .dbadge small{font-size:.62rem;font-weight:700;color:var(--muted);text-transform:uppercase}
.bills .dbadge b{font-size:1rem;font-weight:800}
.bills .bn{grid-area:n}.bills .ba{grid-area:a}.bills .bs{grid-area:s}.bills .bact{grid-area:b}
.bills .bn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.bills .ba{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.bills .bs{display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.bills .bact{justify-self:end}
.sumline{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.86rem;color:var(--muted);padding-top:12px;border-top:1px solid var(--line)}
.sumline .num{color:var(--ink);font-weight:700}

/* entries list */
.recur{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 14px;border-radius:var(--r);background:var(--accent-soft)}
.recur p{margin:0;flex:1 1 220px;font-size:.9rem}
.txtools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.txtools input{flex:1 1 100%}
.tx{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tx li{display:grid;grid-template-columns:40px minmax(0,1fr) auto 36px;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.tx li:first-child{border-top:0}
.tx li.empty{display:block;border:0}
.tx .w{min-width:0;cursor:pointer;border-radius:8px}
.tx .w div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.tx .w:hover div{color:var(--accent-ink)}
.tx .w small{color:var(--muted);font-size:.8rem}
.tx .w .rp{font-size:.7rem;font-weight:700;color:var(--accent-ink);margin-left:6px}
.tx li.sel .w div{color:var(--accent-ink)}
.tx .a{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tx .a.in{color:var(--good)}
.tx .a.tr{color:var(--muted)}
.tx .x{border:0;background:none;color:var(--faint);border-radius:10px;height:40px;width:40px;font-size:.95rem}
.tx .x:hover{background:var(--bad-soft);color:var(--bad)}
.tx .x.confirm{background:var(--bad);color:var(--surface);font-size:.72rem;font-weight:700;width:auto;padding:0 8px}
.tx .w small .by,.tx .w small .orig{color:var(--muted)}

/* ================= accounts ================= */
.pagehead .btn{flex:none}
.nw{display:flex;flex-direction:column;gap:2px}
.nwbig{font-weight:800;font-size:2rem;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nwbig.neg{color:var(--bad)}
.nwsub{color:var(--muted);font-size:.86rem}
/* selected account card: coloured by the account's tone */
.acard{--c:var(--accent);border-radius:var(--r-xl);padding:20px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  background:var(--c);color:#fff}
.acard[data-tone="indigo"]{--c:var(--accent)}.acard[data-tone="teal"]{--c:#0B6E6E}.acard[data-tone="slate"]{--c:#2B3245}
.acard[data-tone="orange"]{--c:#8A3510}.acard[data-tone="blue"]{--c:#1F3F8A}
:root[data-theme="dark"] .acard{background:color-mix(in srgb,var(--c) 42%,#0E1117)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .acard{background:color-mix(in srgb,var(--c) 42%,#0E1117)}}
.actop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.acname{display:flex;flex-direction:column;gap:2px;min-width:0}
.acname strong{font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acard .label{color:inherit;opacity:.85}
.acico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.16);flex:none}
.acico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.acbal{display:flex;flex-direction:column;gap:2px}
.acv{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.acbal input{width:100%;max-width:240px;font-size:1.5rem;font-weight:800;border:0;border-radius:12px;padding:8px 12px;background:#fff;color:#0F1222}
.acfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.82rem}
.acrm{border:1px solid rgba(255,255,255,.5);background:transparent;color:inherit;border-radius:999px;padding:6px 12px;font-size:.78rem;font-weight:600;flex:none}
.acts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.acts3 .btn{border-radius:var(--r);min-height:48px;font-size:.86rem;padding:6px 8px}
.acts3 svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.acts3 .btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.agroups{display:flex;flex-direction:column;gap:18px}
.agroup{display:flex;flex-direction:column;gap:14px}
.agroup .sechead h2{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.agroup .sechead .meta{font-weight:700;color:var(--ink)}
.arows{list-style:none;margin:0;padding:4px 6px;gap:0}
.arow{width:100%;display:flex;align-items:center;gap:12px;padding:12px 10px;border:0;border-radius:var(--r);background:transparent;color:var(--ink);text-align:left}
.arow[aria-pressed="true"]{background:var(--sunk)}
.arow:hover{background:var(--sunk)}
.amid{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.amid .an{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amid .am{font-size:.78rem;color:var(--muted)}
.arow .av{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.arow .av.debt{color:var(--bad)}
.emptycard{align-items:flex-start}
.accts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.accts li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:12px 0;border-top:1px solid var(--line);align-items:center}
.accts li:first-child{border-top:0}
.accts .an{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.accts .ab{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;border:0;background:none;padding:6px 0;min-height:40px;color:var(--ink)}
.accts .ab.debt{color:var(--bad)}
.accts .ab:hover{color:var(--accent-ink)}
.accts input{width:120px;border:1px solid var(--accent);border-radius:10px;padding:6px 8px;background:var(--surface);text-align:right}
.accts .am{grid-column:1 / -1;display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.accts .am button{margin-left:auto;border:0;background:none;color:var(--muted);font-size:.8rem;padding:8px 0}
.accts .am button:hover{color:var(--bad)}
form.acct,form.newgoal{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
form.acct .full,form.newgoal .full{grid-column:1 / -1}

/* ================= plan ================= */
/* envelopes */
.env{display:flex;flex-direction:column}
.erow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"i n a" "i b b" "i l l";gap:6px 12px;padding:14px 0;border-top:1px solid var(--line);align-items:center}
.erow:first-child{border-top:0;padding-top:0}
.erow>.ico{grid-area:i;align-self:start}
.erow .ename{grid-area:n}.erow .eamt{grid-area:a;text-align:right}.erow .bar{grid-area:b}.erow .left{grid-area:l}
.erow .chip{font-size:.66rem;padding:2px 7px}
.zbbar{margin-bottom:6px}
/* goals with progress rings */
.goal{display:grid!important;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"r h" "r m" "a a";gap:4px 14px;align-items:center}
.goal .ring{grid-area:r}.goal .gh{grid-area:h}.goal .gmeta{grid-area:m;flex-direction:column;align-items:flex-start;gap:2px}.goal .gact{grid-area:a;padding-top:8px}
.goal .gh .pct{display:none}
.ring{position:relative;width:64px;height:64px}
.ring svg{width:64px;height:64px;display:block}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:.85rem;font-weight:800}
.ename{display:flex;align-items:center;gap:8px;min-width:0;font-weight:600;flex-wrap:wrap}
.ename span.t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eamt{font-variant-numeric:tabular-nums;font-size:.9rem;white-space:nowrap}
.eamt .of{color:var(--muted)}
.eamt button.bud{border:0;background:none;padding:6px 0;color:var(--accent-ink);font-weight:700;font-family:inherit}
.eamt input{width:110px;border:1px solid var(--accent);border-radius:10px;padding:6px 8px;background:var(--surface);text-align:right}
.left{font-size:.8rem;color:var(--muted)}
.left .ro{color:var(--accent-ink)}
.custom-x{border:0;background:none;color:var(--muted);font-size:.78rem;padding:6px}
.custom-x:hover{color:var(--bad)}
#catForm{padding-top:14px;border-top:1px solid var(--line)}
/* zero-based */
.zb{display:flex;flex-direction:column}
.zb div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:.92rem}
.zb div:first-child{border-top:0;padding-top:0}
.zb .num{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
.zb .tot{border-top:0;margin-top:6px;padding:12px 14px;border-radius:var(--r);background:var(--sunk);font-weight:700;align-items:center}
.zb .tot .num{font-size:1.3rem;font-weight:800}
.zb .tot .num.pos{color:var(--accent-ink)} .zb .tot .num.neg{color:var(--bad)}
/* 50/30/20 */
.split{display:flex;flex-direction:column;gap:12px}
.srow{display:grid;grid-template-columns:72px minmax(0,1fr) 96px;gap:10px;align-items:center;font-size:.88rem}
.srow .sl{font-weight:700}
.srow .sv{text-align:right;font-variant-numeric:tabular-nums;font-size:.84rem}
.strack{height:12px}
/* goals */
.goal{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-top:1px solid var(--line)}
.goal:first-of-type{border-top:0;padding-top:0}
.gh{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.gh strong{font-size:1.02rem;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gh .pct{font-weight:700;font-size:.9rem;color:var(--good)}
.gmeta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:.82rem;color:var(--muted)}
.gmeta .num{color:var(--ink);font-weight:600}
.gact{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.gact input{flex:1 1 100px;min-height:40px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px}
.gact .rm{margin-left:auto;border:0;background:none;color:var(--muted);font-size:.82rem;padding:8px 0}
.gact .rm:hover{color:var(--bad)}
/* future */
.fut-lead{margin:0;font-size:.95rem}
.fut-lead strong{font-size:1.25rem;font-weight:800}
.whatif{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.slider{display:flex;flex-direction:column;gap:4px;font-size:.88rem}
.slider strong{color:var(--accent-ink)}
.slider input{width:100%;accent-color:var(--accent);height:32px}
.buyrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* debt plan */
.dctl{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.dctl .field{flex:1 1 140px}
.dcomp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dcard{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.dcard.sel{border-color:var(--accent);background:var(--accent-soft)}
.dcard .dt{font-weight:700;font-size:.88rem}
.dcard .dv{font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--muted)}
.dcard .dv strong{color:var(--ink);font-weight:700}
.dorder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;counter-reset:d}
.dorder li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;padding:10px 0;border-top:1px solid var(--line);align-items:center;font-size:.9rem;counter-increment:d}
.dorder li:first-child{border-top:0}
.dorder li::before{content:counter(d);width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:.78rem;font-weight:700}
.dorder .dn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dorder .dd{font-size:.82rem;color:var(--muted);text-align:right}

/* ================= insights ================= */
/* chart palette: ranked categories, distinct in hue and lightness */
:root{--d1:var(--accent);--d2:#9A93F4;--d3:#D9590B;--d4:#F4A261;--d5:#0B7A6E;--d6:#5FA8D3;--d7:#A3204F;--d8:#A3ABBD}
:root[data-theme="dark"]{--d2:#5B54C8;--d3:#F08A4B;--d4:#F2C462;--d5:#4FC2BA;--d6:#82AEFF;--d7:#FF8FB5;--d8:#6B7388}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--d2:#5B54C8;--d3:#F08A4B;--d4:#F2C462;--d5:#4FC2BA;--d6:#82AEFF;--d7:#FF8FB5;--d8:#6B7388}}
.periods button{font-size:.82rem;padding:6px 4px}
.custrange{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rangelbl{margin:-6px 0 -4px;font-size:.88rem;color:var(--muted);font-weight:600}
.donutwrap{display:grid;grid-template-columns:1fr;gap:14px;justify-items:center}
.donutwrap .report{width:100%}
@media (min-width:560px){.donutwrap{grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:start;justify-items:stretch}}
.donut{position:relative;width:180px;height:180px}
.donut svg{width:180px;height:180px;display:block}
.donut .dseg{transition:opacity .2s}
.donut .dseg.dim{opacity:.25}
.dmid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 30px;line-height:1.2}
.dmid span{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dmid strong{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.report{display:flex;flex-direction:column;gap:2px;min-width:0}
.lrow{display:grid;grid-template-columns:10px minmax(0,1fr) auto;grid-template-areas:"d n p" "d t v";gap:0 8px;align-items:center;border:0;background:none;border-radius:10px;padding:6px 8px;margin:0 -8px;text-align:left;color:var(--ink)}
.lrow:hover,.lrow[aria-pressed="true"]{background:var(--sunk)}
.lrow i{grid-area:d;width:10px;height:10px;border-radius:3px;align-self:start;margin-top:5px}
.lrow .ln{grid-area:n;font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .lp{grid-area:p;font-weight:800;font-size:.86rem;font-variant-numeric:tabular-nums;text-align:right}
.lrow .lt{grid-area:t;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .lt.up{color:var(--bad)} .lrow .lt.down{color:var(--good)}
.lrow .lv{grid-area:v;font-size:.76rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.drill{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.drill h3{font-size:.95rem}
.drill .tx li{grid-template-columns:32px minmax(0,1fr) auto}
.trendsum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.trendsum div{background:var(--sunk);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.trendsum span{font-size:.76rem;color:var(--muted);font-weight:600}
.trendsum strong{font-size:.98rem;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aipanel{background:linear-gradient(0deg,var(--surface),var(--surface)) padding-box;border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.aipanel h2{display:flex;align-items:center;gap:8px}
.aipanel h2 svg{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.exps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.exp{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink);min-height:84px;justify-content:center;text-align:center}
.exp strong{font-size:1rem}
.exp span{font-size:.72rem;color:var(--muted);line-height:1.3}
.exp:hover{border-color:var(--accent)}
.pagehead .btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.report{display:flex;flex-direction:column}
.rrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 10px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.rrow:first-child{border-top:0;padding-top:0}
.rrow .rn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:.92rem}
.rrow .rv{font-variant-numeric:tabular-nums;font-size:.88rem;text-align:right;font-weight:600}
.rrow .rbar{grid-column:1 / -1;height:6px;overflow:hidden}
.chart{width:100%;overflow-x:auto}
.chart svg{display:block;width:100%;height:auto}
.chart text{font-family:var(--f-body);font-size:10px;fill:var(--muted)}
.chart .grid line{stroke:var(--line);stroke-width:1}
.review{white-space:pre-wrap;font-size:.95rem;line-height:1.6;background:var(--sunk);border-radius:var(--r);padding:14px 16px}
.review.thinking{color:var(--muted);font-style:italic}
.gate{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:12px 14px;border-radius:var(--r);background:var(--accent-soft);font-size:.9rem}
.gate p{margin:0;flex:1 1 220px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 14px;font-size:.84rem;color:var(--ink);text-align:left}
.chips button:hover{border-color:var(--accent);color:var(--accent-ink)}
.chat{display:flex;flex-direction:column;gap:8px}
.chat:empty{display:none}
.msg{max-width:88%;padding:10px 14px;border-radius:18px;white-space:pre-wrap;font-size:.92rem;line-height:1.55}
.msg.me{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:6px}
.msg.ai{align-self:flex-start;background:var(--sunk);border-bottom-left-radius:6px}
.msg.ai.thinking{color:var(--muted);font-style:italic}
.askrow{display:flex;gap:8px}
.askrow input{flex:1}
#reviewPanel .gact{gap:8px}

/* ================= first-run setup ================= */
#setup{background:var(--bg)}
#setup .ovcard{box-shadow:none;background:transparent;max-width:440px;gap:16px}
.sustep{display:flex;gap:6px}
.sustep i{flex:1;height:5px;border-radius:999px;background:var(--track)}
.sustep i.on{background:var(--accent)}
#setup h2{font-size:1.6rem;letter-spacing:-.02em}
#setup .wsub{margin:-8px 0 0;color:var(--muted)}
.supage{display:flex;flex-direction:column;gap:14px}
.supage .opt{font-weight:500;color:var(--faint)}
.suopts{display:flex;flex-direction:column;gap:10px}
.suopt{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);cursor:pointer}
.suopt:has(input:checked){border:2px solid var(--accent);padding:13px 15px;background:var(--accent-soft)}
.suopt input{accent-color:var(--accent);width:20px;height:20px;margin-top:2px;flex:none}
.suopt span{display:flex;flex-direction:column;gap:2px}
.suopt small{color:var(--muted);font-size:.84rem;line-height:1.4}
.suacts{display:flex;gap:8px;margin-top:4px}
.suacts .btn{min-height:52px;flex:1}
.suacts .btn.primary{flex:2}
.setupnudge{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;background:var(--accent-soft);border-color:transparent}
.setupnudge div{display:flex;flex-direction:column;gap:2px;font-size:.86rem}
.setupnudge span{color:var(--muted)}

/* ================= tab bar + add button ================= */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;
  padding:6px max(6px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(6px,env(safe-area-inset-left,0px))}
.tabbar>*{max-width:120px;justify-self:center;width:100%}
.tabbar button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;min-height:58px;color:var(--muted);font-size:.7rem;font-weight:600;border-radius:12px}
.tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabbar button[aria-current="page"]{color:var(--accent-ink);font-weight:700}
.tabbar .fab{display:grid;place-items:center;width:56px;height:56px;min-height:0;margin:-20px auto 0;border-radius:20px;background:var(--accent);color:var(--on-accent);
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 40%,transparent);padding:0}
.tabbar .fab svg{width:26px;height:26px;stroke-width:2.4}
.tabbar .fab:active{transform:scale(.95)}
@media (min-width:700px){.tabbar{padding-left:calc(50% - 320px);padding-right:calc(50% - 320px)}}

/* ================= entry bottom sheet ================= */
.scrim{position:fixed;inset:0;z-index:45;background:rgba(10,12,20,.5)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:90vh;overflow-y:auto;overscroll-behavior:contain;
  max-width:640px;margin:0 auto;border-radius:var(--r-xl) var(--r-xl) 0 0;border:0;box-shadow:var(--shadow-lg);
  padding:10px max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));
  transform:translateY(105%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s}
.sheet::before{content:"";align-self:center;width:40px;height:5px;border-radius:3px;background:var(--line);flex:none}
.sheet.open{transform:none;visibility:visible;transition:transform .28s ease}
@media (prefers-reduced-motion:reduce){.sheet,.sheet.open{transition:none}}
.sheet .ph{align-items:center}
.sheet .ph h2{font-size:1.15rem}
.qa{display:flex;flex-direction:column;gap:8px}
.qarow{display:flex;gap:8px;flex-wrap:wrap}
.qarow input{flex:1 1 100%;border-color:var(--accent)}
.qarow .btn{flex:1 1 auto}
.btn.cam{cursor:pointer}
.qahint{margin:0;font-size:.82rem;color:var(--muted)}
.qahint.busy{color:var(--accent-ink)} .qahint.bad{color:var(--bad)}
.qaprev{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:var(--r);background:var(--accent-soft)}
.qitem{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"n a e x" "m a e x";gap:0 8px;align-items:center;font-size:.9rem;padding:4px 0}
.qitem .qn{grid-area:n;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.qitem .qm{grid-area:m;font-size:.78rem;color:var(--muted)}
.qitem .qa2{grid-area:a;font-weight:700;font-variant-numeric:tabular-nums}
.qitem .qa2.in{color:var(--good)}
.qitem button{border:0;background:none;color:var(--muted);font-size:.82rem;padding:10px 6px}
.qitem button.qe{grid-area:e;font-weight:600} .qitem button.qx{grid-area:x}
.qitem button:hover{color:var(--accent-ink)}
.qaprev .qfoot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--line)}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.78rem;font-weight:600}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.shead{display:grid;grid-template-columns:44px minmax(0,1fr) repeat(3,44px);align-items:center;gap:6px}
.shead h2{grid-column:2}
#qaToggle[aria-expanded="true"],#smsBtn[aria-expanded="true"]{background:var(--accent)!important;color:var(--on-accent)!important}
.sheet{gap:12px;max-height:94vh}
.sheet form.entry{gap:12px}
.shead h2{text-align:center;font-size:1.06rem}
.shead .iconbtn{background:var(--sunk);border:0}
.scanbtn{cursor:pointer;color:var(--accent-ink)!important;background:var(--accent-soft)!important}
.qarow{position:relative;display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.qarow input{flex:1;padding-left:42px;border-color:var(--line);min-height:46px}
.qaspark{position:absolute;left:14px;width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;pointer-events:none}
.qarow .btn{flex:none}
form.entry{display:grid;grid-template-columns:1fr;gap:14px}
.amtbox{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0}
.amtbox .label{font-size:.8rem}
.amtline{display:flex;align-items:baseline;justify-content:center;gap:8px;max-width:100%}
.amtline select,.amtline .pick{border:0;background:var(--sunk);border-radius:999px;padding:6px 10px;font-weight:700;font-size:.9rem!important;color:var(--muted)}
.amtline input{border:0;background:transparent;text-align:center;font-size:2.5rem!important;line-height:1.1;font-weight:800;letter-spacing:-.03em;width:7ch;max-width:62vw;padding:0;font-variant-numeric:tabular-nums;color:var(--ink);caret-color:var(--accent)}
@supports (field-sizing:content){.amtline input{field-sizing:content;width:auto;min-width:1.2ch;text-align:left}}
.amtbox{padding:0}
.sheet .seg{min-height:40px}
.amtline input:focus{outline:none}
.amtline input::placeholder{color:var(--faint)}
#entryPanel[data-type="income"] .amtline input{color:var(--good)}
.fxnote{text-align:center}
.catchips{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:2px 20px 4px;scrollbar-width:none}
.catchips::-webkit-scrollbar{display:none}
.cchip{flex:none;display:flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 6px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:.88rem;color:var(--ink)}
.cchip[aria-checked="true"]{border:2px solid var(--accent);background:var(--accent-soft);padding:0 13px 0 5px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.optchip{display:flex;align-items:center;gap:6px;height:42px;padding:0 4px 0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:.84rem;font-weight:600;color:var(--muted);cursor:pointer;max-width:100%}
.optchip select,.optchip .pick,.optchip input[type="date"]{border:0;background:transparent;font-weight:700;color:var(--ink);font-size:.88rem!important;padding:6px 8px 6px 0;min-width:0;max-width:170px}
.optchip.rep{padding:0 12px;color:var(--ink)}
.optchip.rep input{width:18px;height:18px;accent-color:var(--accent)}
.optchip.rep:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
form.entry .note input{min-height:46px}
.amtpad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.amtpad .key{height:48px;border:0;border-radius:14px;background:var(--sunk);font-size:1.4rem;font-weight:600;color:var(--ink);display:grid;place-items:center;font-variant-numeric:tabular-nums}
.amtpad .key:active{background:var(--track)}
.amtpad .key svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
/* short phones: the keypad stays pinned above the Add button and the fields scroll above it */
@media (max-height:760px){
  form.entry .amtpad{position:sticky;bottom:calc(46px - env(safe-area-inset-bottom,0px));z-index:2;background:var(--surface);padding-top:8px;gap:6px}
  .amtpad .key{height:42px}
}
@media (pointer:fine){.amtpad{display:none}}
form.entry .acts{display:flex;gap:8px;position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));background:var(--surface);padding:8px 0 4px}
form.entry .acts .go{flex:1;min-height:54px;font-size:1rem;border-radius:16px}
form.entry .acts .btn{min-height:54px;border-radius:16px}
form.entry.editing{outline:0}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom,0px));z-index:120;
  background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:999px;font-size:.9rem;font-weight:600;box-shadow:var(--shadow-lg);max-width:calc(100% - 32px)}
.toast.act{display:flex;width:max-content;align-items:center;gap:14px;padding:8px 8px 8px 18px}
.toast button{background:none;border:0;color:var(--accent);font:inherit;font-weight:700;padding:8px 12px;border-radius:999px;cursor:pointer}
.toast button:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.foot{display:none}

/* ================= overlays (settings, sign-in, import, lock) ================= */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(10,12,20,.55);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;
  padding:max(20px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.ovcard{background:var(--surface);color:var(--ink);border-radius:var(--r-xl);width:100%;max-width:460px;padding:22px 20px;display:flex;flex-direction:column;gap:14px;margin:auto 0;box-shadow:var(--shadow-lg)}
.ovcard.wide-card{max-width:620px}
/* entry details */
.edcard{gap:16px}
.edhead{display:flex;align-items:center;gap:12px}
.edhead .edt{flex:1;min-width:0}
.edhead h2{font-size:1.15rem;overflow-wrap:anywhere}
.edhead small{color:var(--muted);font-size:.85rem}
.edhead .iconbtn{width:40px;height:40px;background:var(--sunk);border:0}
.edhead .iconbtn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#edEdit{color:var(--accent-ink,var(--accent))}
.edamt{margin:0;line-height:1.1;font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.edamt.in{color:var(--good)}
.edlist{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;padding:14px 16px;background:var(--sunk);border-radius:var(--r)}
.edlist dt{color:var(--muted);font-size:.88rem}
.edlist dd{margin:0;font-weight:600;font-size:.92rem;text-align:right;overflow-wrap:anywhere}
#bills li.tap{cursor:pointer}
.smsbox{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.smsbox textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);color:var(--ink);font:inherit;font-size:.9rem;resize:vertical;min-height:84px}
.smsbox textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.smsbtns{display:flex;gap:8px;justify-content:flex-end}
.qacct{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted);margin-top:4px}
.qacct .pick,.qacct select{flex:1;min-width:0;font-size:.85rem}
.acchk{display:block;font-size:.8rem;opacity:.85;margin-top:4px}
.acchk.stale{font-weight:700;opacity:1}
.am.stale{color:var(--warn)}
.hhinvite{display:flex;gap:8px;margin-top:10px}
.refcode{font-size:1.8rem;font-weight:800;letter-spacing:.18em;text-align:center;padding:16px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent-ink);font-variant-numeric:tabular-nums;user-select:all}
.hhinvite input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);color:var(--ink);font:inherit}
.hhinvite input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.ovhead{display:flex;justify-content:space-between;align-items:center;gap:10px;position:sticky;top:-22px;background:var(--surface);padding:8px 0;z-index:1}
.ovcard h2{font-size:1.35rem;font-weight:800}
.ovcard h3{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
#settings{background:var(--bg);padding:0}
#settings .ovcard{max-width:640px;min-height:100%;border-radius:0;box-shadow:none;background:var(--bg);padding:16px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px));margin:0}
#settings .ovhead{background:var(--bg);top:0;padding:max(12px,env(safe-area-inset-top,0px)) 0 12px}
#settings .sgroup{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;gap:12px;box-shadow:var(--shadow)}
#settings .sgroup.danger{border-color:var(--bad-soft)}
#welcome{background:var(--bg)}
#welcome .ovcard{box-shadow:none;background:transparent}
.auth{text-align:center}
.auth .logo img{border-radius:18px}
.auth .wsub{margin:0;color:var(--muted)}
.oauth{display:flex;flex-direction:column;gap:8px}
.btn.social{min-height:50px;font-weight:700}
.btn.social.apple{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.authseg{align-self:stretch;width:100%}
.authseg button{font-size:.84rem;padding:8px 4px}
.authform{display:flex;flex-direction:column;gap:12px;text-align:left}
.okmsg{margin:0;color:var(--good);font-size:.9rem}
.guest{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.legal{margin:0;font-size:.78rem;color:var(--muted);text-align:center}
.sgroup{display:flex;flex-direction:column;gap:10px}
.srow{display:flex;justify-content:space-between;gap:10px;margin:0;font-size:.9rem;flex-wrap:wrap}
.srow span:first-child{color:var(--muted)}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sgroup .btnrow .btn{flex:0 1 auto}
.cfbtns{margin-top:16px}.cfbtns .btn{flex:1 1 0}
#cfYes{background:var(--bad);color:var(--surface)}
#acctSignedIn,#acctGuest{display:flex;flex-direction:column;gap:12px}
form.inline{display:flex;gap:8px;flex:1 1 240px}
form.inline input{flex:1}
#hhActions{flex-direction:column;align-items:stretch}
#hhActions form.inline{flex:0 0 auto;width:100%}
#hhActions form.inline .btn{flex:0 0 auto;min-width:84px}
.hh{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:12px 14px;border-radius:var(--r);background:var(--sunk);align-items:center}
.hh strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hh .hm{grid-column:1 / -1;font-size:.82rem;color:var(--muted)}
.hh .code{font-family:var(--f-code);font-size:1rem;letter-spacing:.15em;background:var(--surface);padding:2px 8px;border-radius:6px}
.hh .hbtns{grid-column:1 / -1;display:flex;gap:6px;flex-wrap:wrap}
#hhList{display:flex;flex-direction:column;gap:8px}
.danger h3{color:var(--bad)}
.pinset{display:grid;grid-template-columns:1fr;gap:10px}
/* appearance */
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.swatches button{width:44px;height:44px;border-radius:50%;border:3px solid var(--surface);padding:0;outline:2px solid transparent;outline-offset:0}
.swatches button[aria-checked="true"]{outline-color:var(--ink)}
.swatches [data-accent-opt="finora"]{background:#0B4FC0} .swatches [data-accent-opt="indigo"]{background:#4B3FE4}
.swatches [data-accent-opt="teal"]{background:#0B6E6E} .swatches [data-accent-opt="rust"]{background:#B4380F}
.swatches [data-accent-opt="plum"]{background:#7A2E8E} .swatches [data-accent-opt="graphite"]{background:#2B3245}
/* rules (now in settings) */
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rules li{display:flex;align-items:center;gap:8px;font-size:.88rem;flex-wrap:wrap;padding:10px 12px;border-radius:var(--r-sm);background:var(--sunk)}
.rules li.empty{background:none;padding:4px 0}
.rules .rbolt{width:16px;height:16px;fill:none;stroke:var(--accent-ink);stroke-width:2;stroke-linejoin:round;flex:none}
.rules .rw{flex:1 1 140px;min-width:0}
.rules strong{font-weight:700}
.rulehead{margin:6px 0 -4px;font-size:.8rem;font-weight:700;color:var(--accent-ink)}
form.rule .full{grid-column:1 / -1}
/* category icon + colour pickers */
.iconpick,.tonepick{display:flex;flex-wrap:wrap;gap:6px}
.iconpick button,.tonepick button{border:2px solid transparent;background:none;border-radius:12px;padding:2px;line-height:0}
.iconpick button[aria-checked="true"],.tonepick button[aria-checked="true"]{border-color:var(--accent)}
/* recurring manager */
.recl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.recl li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"i m a" "i b b";gap:4px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.recl li:first-child{border-top:0}
.recl li.empty,.recl li.rsum{display:block;font-size:.86rem;color:var(--muted)}
.recl li.rsum{font-weight:700;color:var(--ink)}
.recl .ico{grid-area:i;align-self:start}
.rmid{grid-area:m;display:flex;flex-direction:column;gap:2px;min-width:0}
.rmid strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmid span{font-size:.78rem;color:var(--muted)}
.recl .ra{grid-area:a;font-weight:700;font-variant-numeric:tabular-nums}
.racts{grid-area:b;display:flex;gap:8px}
.scanbtn.pulse{animation:pulse2 1s ease-in-out 4 alternate}
@keyframes pulse2{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}to{box-shadow:0 0 0 8px transparent}}
.scanbtn.busy{opacity:.6;pointer-events:none}
.rules code{font-family:var(--f-code);background:var(--surface);padding:1px 6px;border-radius:4px;font-size:.82rem}
.rules .rx{margin-left:auto;border:0;background:none;color:var(--muted);font-size:.82rem;padding:6px}
.rules .rx:hover{color:var(--bad)}
form.rule{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
form.rule .btn{grid-column:1 / -1}
/* import */
.mapgrid{display:grid;grid-template-columns:1fr;gap:10px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);max-height:300px;overflow-y:auto}
.itable{border-collapse:collapse;width:100%;font-size:.82rem}
.itable th,.itable td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.itable th{position:sticky;top:0;background:var(--sunk);font-weight:700}
.itable td.n{text-align:right;font-variant-numeric:tabular-nums}
.itable tr.dup td{color:var(--muted);text-decoration:line-through}
.itable select,.itable .pick{font-size:.8rem;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:2px 4px}
/* phones: each statement row becomes a small card (description and amount, then date and category) */
@media (max-width:560px){
  .itable,.itable tbody{display:block}
  .itable tr:first-child{display:none}
  .itable tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ds n" "d c";gap:2px 10px;padding:10px 12px;border-bottom:1px solid var(--line)}
  .itable td{border:0;padding:0;white-space:normal}
  .itable td.ds{grid-area:ds;font-weight:600;overflow-wrap:anywhere}
  .itable td.n{grid-area:n}
  .itable td.d{grid-area:d;color:var(--muted);align-self:center}
  .itable td.c{grid-area:c;justify-self:end}
  .itable td.c .pick{max-width:170px}
}
/* lock */
.overlay.lock{background:var(--bg);align-items:center}
.lockbox{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;max-width:320px;width:100%}
.lockbox img{border-radius:16px}
.pindots{display:flex;gap:14px;min-height:16px}
.pindots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink)}
.pindots i.on{background:var(--ink)}
.keypad{display:grid;grid-template-columns:repeat(3,72px);gap:14px}
.keypad button{width:72px;height:72px;border-radius:50%;border:0;background:var(--surface);font-size:1.6rem;font-weight:600;color:var(--ink);box-shadow:var(--shadow)}
.keypad button:active{background:var(--track)}
.keypad button.ghost{background:none;box-shadow:none;font-size:1rem}

/* phones: stop iOS zooming into fields */
@media (max-width:760px){input,select,textarea,.pick{font-size:16px!important}}
@media (min-width:520px){.mapgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.pinset{grid-template-columns:1fr 1fr}.pinset .btnrow{grid-column:1 / -1}}

/* ================= settings menu ================= */
.smenu{display:flex;flex-direction:column;gap:8px}
.smenu[hidden],.stabpanel[hidden]{display:none}
.smhead{margin:10px 4px 0}
.slist{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.slist.flat{border:0;box-shadow:none;background:transparent;margin:0 -4px}
.sitem{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:12px 14px;border:0;background:transparent;color:var(--ink);text-align:left;text-decoration:none;font:inherit;cursor:pointer}
.sitem+.sitem{border-top:1px solid var(--line)}
.sitem:hover{background:var(--sunk)}
.sitem:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;background:var(--accent-soft);color:var(--accent)}
.sico.profav{width:44px;height:44px;border-radius:50%;font-weight:800;font-size:1.15rem}
.stxt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.stxt strong{font-size:1rem;font-weight:700}
.stxt small{color:var(--muted);font-size:.85rem;overflow-wrap:anywhere}
.schev{color:var(--faint);display:grid}
.sback{margin-right:-2px}
#settings .ovhead h2{flex:1}
.stabpanel{display:flex;flex-direction:column;gap:14px}
.prof{display:flex;align-items:center;gap:14px}
.profav{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:1.3rem}
.profmeta{display:flex;flex-direction:column;min-width:0}
.profmeta strong{font-size:1.1rem}
.profmeta span{color:var(--muted);font-size:.88rem;overflow-wrap:anywhere}
.tips{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:.92rem}
.tips strong{color:var(--ink)}

/* ================= create-your-own categories ================= */
.cchip.addcat{border-style:dashed;color:var(--accent);padding:0 14px}
.newcat{margin-top:8px}
.catchips.wrapchips{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
.catchips.wrapchips .cchip{padding:0 14px}
.env .empty{margin:0;color:var(--muted);font-size:.92rem}

/* ================= profile ================= */
.profhero{display:flex;align-items:center;gap:16px}
.profav.big{width:72px;height:72px;font-size:1.8rem}
.profav,.sico.profav{overflow:hidden}
.profav img,.sico.profav img{width:100%;height:100%;object-fit:cover;display:block}
.avatar{position:relative;overflow:hidden}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar.hasphoto svg{visibility:hidden}
#profForm .btn.primary{align-self:flex-start}

/* ================= settings polish ================= */
#settings .ovhead{display:grid;grid-template-columns:44px 1fr 44px;align-items:center}
#settings .ovhead h2{text-align:center;font-size:1.15rem}
.sspacer{width:44px}
/* on/off switches: text on the left, switch on the right */
.toggle.sw{justify-content:space-between;gap:14px;min-height:56px}
.toggle.sw .ttxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.toggle.sw .ttxt strong{font-size:1rem;font-weight:700}
.toggle.sw .ttxt small{color:var(--muted);font-size:.85rem}
.toggle.sw input{appearance:none;-webkit-appearance:none;width:50px;height:30px;border-radius:999px;background:var(--track);border:1px solid var(--line);position:relative;cursor:pointer;transition:background .15s;margin:0}
.toggle.sw input::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.toggle.sw input:checked{background:var(--accent);border-color:var(--accent)}
.toggle.sw input:checked::after{transform:translateX(20px);background:#fff}
.toggle.sw input:disabled{opacity:.45;cursor:not-allowed}
.toggle.sw input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.toggle.sw input,.toggle.sw input::after{transition:none}}
/* status badge */
.badge{font-size:.82rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--track);color:var(--muted)}
.badge.ok{background:var(--good-soft,color-mix(in srgb,var(--good) 16%,var(--surface)));color:var(--good)}
.badge.warn{background:color-mix(in srgb,var(--warn) 16%,var(--surface));color:var(--warn)}
.badge.bad{background:var(--bad-soft,color-mix(in srgb,var(--bad) 16%,var(--surface)));color:var(--bad)}
/* list rows inside a settings card */
.sgroup .slist.flat .sitem{padding-left:4px;padding-right:4px;min-height:60px}
.sitem.danger strong,.sitem.danger .sico{color:var(--bad)}
.sitem.danger .sico{background:color-mix(in srgb,var(--bad) 12%,var(--surface))}
label.sitem{cursor:pointer}
.smenu .legal{margin-top:12px}

/* need / want switch on each envelope */
.kindbtn{border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:.76rem;font-weight:700;border-radius:999px;padding:0 10px;min-height:32px}
.kindbtn.need{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,var(--line))}
.custom-x{min-height:36px;padding:6px 10px}

/* ================= plan tabs + goal length ================= */
#planTabs button{padding:6px 4px;font-size:.86rem;white-space:nowrap}
#planTabs button[aria-selected="true"]{background:var(--accent);color:var(--on-accent);box-shadow:none}
.glen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#gHint{margin:6px 0 0}
.goaledit{display:grid;grid-template-columns:1fr;gap:12px}
.goaledit .btnrow{margin-top:2px}

/* password rules tick as you type */
.pwrules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--muted)}
.pwrules li::before{content:"○";display:inline-block;width:1.4em;color:var(--faint)}
.pwrules li.met{color:var(--good)}
.pwrules li.met::before{content:"✓";color:var(--good)}
#passForm .btn.primary{align-self:flex-start}

/* ================= in-app picker (replaces Android's drop-down list) ================= */
select.picked{display:none!important}
.pick{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer;width:100%;min-width:0}
.pick .pv{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pick svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.pick[hidden]{display:none}
.pick:disabled{opacity:.5;cursor:not-allowed}
.amtrow .pick,.optchip .pick,.amtline .pick{width:auto}
.picksheet{position:fixed;inset:0;z-index:110;display:flex;align-items:flex-end;justify-content:center}
.picksheet[hidden]{display:none}
.pickdim{position:absolute;inset:0;background:rgba(10,12,20,.5)}
.pickpanel{position:relative;width:100%;max-width:520px;max-height:min(75vh,620px);display:flex;flex-direction:column;background:var(--surface);color:var(--ink);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:10px 16px max(16px,env(safe-area-inset-bottom,0px));box-shadow:var(--shadow-lg)}
@media (min-width:640px){.picksheet{align-items:center}.pickpanel{border-radius:var(--r-xl)}}
.pickgrab{width:36px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 10px}
.pickhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.pickhead h2{font-size:1.1rem;font-weight:800;margin:0}
.pickx{width:40px;height:40px;border-radius:50%;border:0;background:var(--sunk);display:grid;place-items:center;color:var(--ink);flex:none}
.pickx svg,.picksearch svg,.pickopt svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.picksearch{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r);padding:0 12px;min-height:46px;margin-bottom:8px;color:var(--muted)}
.picksearch[hidden]{display:none}
.picksearch input{border:0;background:transparent;flex:1;min-width:0;height:44px;outline:none;color:var(--ink)}
.picklist{overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px}
.pickopt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:50px;padding:10px 12px;border:0;background:transparent;border-radius:var(--r-sm);text-align:left;font-size:1rem;color:var(--ink);cursor:pointer}
.pickopt[hidden]{display:none}
.pickopt:hover{background:var(--sunk)}
.pickopt:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pickopt[aria-selected="true"]{background:var(--accent-soft);color:var(--accent);font-weight:700}
.pickopt:disabled{opacity:.45}
.pickempty{color:var(--muted);text-align:center;margin:14px 0}
html.picking body{overflow:hidden}

.diag{margin:0;font-size:.75rem;color:var(--faint);overflow-wrap:anywhere}

/* opened from the web page's Log in / Sign up: the logo instead of the app until sign-in shows
   (revealed anyway after 6s in case something fails) */
html.authboot body{background:var(--bg) url(/icons/icon-192.png) center/88px no-repeat}
html.authboot .wrap{visibility:hidden;animation:authreveal 0s 6s forwards}
@keyframes authreveal{to{visibility:visible}}