/* Wally design system. Pure white / pure black surfaces, blue brand, coral for spending. Tokens first, components after. */
:root{
  --font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --outer:#dcdee4;--app:#ffffff;--card:#f5f5f7;--raised:#ffffff;--line:#e8e8ed;--chip:#ebebf0;--fill:#e2e2e9;--zebra:#fafafb;
  --ink:#111114;--mut:#667;--faint:#8a8a96;
  --blue:#1b2f6b;--coral:#f4511e;--amber:#f59e0b;--red:#ef4444;--green:#17a35f;
  --pos-t:#12803a;--neg-t:#d1291f;--ok-bg:#e9f7f0;--bad-bg:#fdecec;--warn-bg:#fff4e0;
  --accent-t:var(--blue);--on-accent:#ffffff;--btn2:#111114;--btn2-t:#ffffff;--nav:#ffffff;--tip:#111114;--tip-t:#b9b9c4;--ring:#1b2f6b;
  --gd-bg:#f5f5f7;--gd-fg:#111114;--gd-track:#e0e0e8;--gd-btn:#ffffff;--gd-line:#e6e6ec;--gd-knob-shadow:0 1px 3px rgba(0,0,0,.3);
  --r:24px;--ease:cubic-bezier(.16,1,.3,1);
  /* category palette: stable colors, none of them neon */
  --c-nightlife:#8b5cf6;--c-food:#ff6b3d;--c-groceries:#14b8a6;--c-transport:#2f5bff;--c-subscriptions:#ec4899;--c-education:#f59e0b;
  --c-shopping:#6366f1;--c-housing:#0ea5e9;--c-zelle:#2f5bff;--c-income:#17a35f;--c-other:#8a8a96;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --outer:#050506;--app:#000000;--card:#111113;--raised:#1b1b1f;--line:#222227;--chip:#1d1d22;--fill:#2b2b32;--zebra:#0c0c0e;
  --ink:#f5f5f7;--mut:#a0a0ac;--faint:#7c7c88;
  --blue:#8fa6e8;--coral:#ff8159;--amber:#fbbf24;--red:#ff6161;--green:#3ad48a;
  --pos-t:#4be08f;--neg-t:#ff7b72;--ok-bg:#0e2a1c;--bad-bg:#2c1414;--warn-bg:#2b2110;
  --on-accent:#08133d;--btn2:#f5f5f7;--btn2-t:#111114;--nav:#151518;--tip:#2b2b32;--tip-t:#b3b3be;--ring:#8fa6e8;
  --gd-bg:#1c1c21;--gd-fg:#ffffff;--gd-track:rgba(255,255,255,.16);--gd-btn:rgba(255,255,255,.14);--gd-line:rgba(255,255,255,.14);--gd-knob-shadow:none;
  --c-nightlife:#a78bfa;--c-food:#ff8159;--c-groceries:#2dd4bf;--c-transport:#5b84ff;--c-subscriptions:#f472b6;--c-education:#fbbf24;
  --c-shopping:#818cf8;--c-housing:#38bdf8;--c-zelle:#5b84ff;--c-income:#3ad48a;--c-other:#7c7c88;
}
:root[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box;margin:0}
html{background:var(--outer);-webkit-text-size-adjust:100%;scroll-padding-bottom:140px}
body{font:15px/1.45 var(--font);color:var(--ink);background:var(--app);max-width:440px;margin:0 auto;min-height:100vh;padding:0 16px 150px;position:relative;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;scrollbar-color:var(--fill) transparent}
@media(min-width:520px){body{margin:24px auto;min-height:calc(100vh - 48px);border-radius:40px;box-shadow:0 30px 80px rgba(10,10,30,.25);border:1px solid var(--line)}}
::selection{background:color-mix(in srgb,var(--blue) 28%,var(--app));color:var(--ink)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{cursor:default}
a{color:inherit}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:12px}
h1,h2,h3{font-weight:inherit;font-size:inherit}
small{font-size:.6em;font-weight:500;color:var(--faint)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--app);min-height:44px;display:flex;align-items:center;padding:0 18px;border-radius:99px;z-index:50;transition:top .15s}
.skip:focus{top:12px}
.sk{color:var(--mut);text-align:center;padding:60px 0}
.neg{color:var(--neg-t)}.pos{color:var(--pos-t)}

/* feedback on every control */
.circle,.qb span,.acct,.tab,.row,.tile,.btn,.fab,.nav button,.lnk{transition:transform .14s var(--ease),background-color .14s,filter .14s,opacity .14s}
.btn:active,.circle:active,.qb:active span,.acct:active,.tile:active,.fab:active,.nav button:active{transform:scale(.96)}
@media(hover:hover){.btn:hover{filter:brightness(1.06)}.circle:hover,.acct:hover,.tile:hover{background:var(--chip)}.row:hover{background:var(--card)}.lnk:hover{opacity:.75}}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding:max(20px,calc(env(safe-area-inset-top) + 8px)) 0 10px}
.who{display:flex;align-items:center;gap:12px;text-align:left;border-radius:99px}
.hello{display:flex;flex-direction:column;line-height:1.2}.hello small{font-size:12px;color:var(--mut);font-weight:400}.hello b{font-size:16px;font-weight:600}
.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:600;letter-spacing:-.03em}
.logo{width:34px;height:34px;position:relative;flex:none}
.logo i{position:absolute;width:26px;height:15px;border-radius:7px;transform:skewX(-24deg)}
.logo i:first-child{background:var(--blue);top:2px;left:4px}.logo i:last-child{background:var(--coral);top:16px;left:0}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--blue),color-mix(in srgb,var(--blue) 55%,#ec4899));display:grid;place-items:center;font-weight:600;color:var(--on-accent);flex:none}
.acts{display:flex;gap:8px}
.circle{width:44px;height:44px;border-radius:50%;background:var(--card);display:grid;place-items:center;position:relative;flex:none}
.circle.dot::after,.tools .dot::after{content:"";position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--card)}

/* ---------- balance ---------- */
.bal{padding:14px 0 6px}
.lbl{display:flex;align-items:center;gap:4px;font-size:15px;color:var(--mut)}
.eye{width:44px;height:44px;margin:-10px 0 -10px -8px;border-radius:50%;display:grid;place-items:center;color:var(--mut)}
.big{font-size:44px;font-weight:600;letter-spacing:-.045em;line-height:1.08}
.big small{font-size:.5em;color:var(--faint);font-weight:500}
.big.tight{color:var(--neg-t)}
.bal .sub{font-size:14px;color:var(--mut);margin-top:6px}.bal .sub b{color:var(--ink);font-weight:600}

/* ---------- cards ---------- */
.card{background:var(--card);border-radius:var(--r);padding:18px;margin-bottom:12px}
.ch{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ct{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:600;letter-spacing:-.02em;min-width:0}
.chip{width:42px;height:42px;border-radius:14px;background:color-mix(in srgb,var(--blue) 12%,var(--raised));display:grid;place-items:center;flex:none;color:var(--blue)}
.chip svg{stroke-width:2}
.note{font-size:13px;color:var(--mut);text-align:center;padding:12px 0 2px;text-wrap:balance}
.badge{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-t);background:color-mix(in srgb,var(--blue) 12%,transparent);border-radius:99px;padding:7px 12px;white-space:nowrap}
.pcap{font-size:13px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* summary ring card */
.sumcard{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sumcard h3{font-size:20px;font-weight:600;letter-spacing:-.02em}
.sumcard p{font-size:14px;color:var(--mut);margin:6px 0 10px;text-wrap:pretty}.sumcard p b{color:var(--ink);font-weight:600}
.lnk{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:14px;color:var(--accent-t)}
.ring{position:relative;width:104px;height:104px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .rt{fill:none;stroke:var(--fill);stroke-width:11}.ring .rp{fill:none;stroke-width:11;stroke-linecap:round}
.ring .rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.ring .rc b{font-size:22px;font-weight:600;letter-spacing:-.03em}.ring .rc span{font-size:12px;color:var(--mut)}

/* accounts carousel */
.sh{display:flex;align-items:center;justify-content:space-between;margin:20px 0 4px}
.sh h2{font-size:18px;font-weight:600;letter-spacing:-.02em}
.accts{display:flex;gap:10px;overflow-x:auto;margin:6px -16px 0;padding:2px 16px 6px;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none}
.accts::-webkit-scrollbar{display:none}
.acct{flex:none;width:150px;scroll-snap-align:start;background:var(--card);border-radius:20px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:2px;min-height:132px}
.aic{width:40px;height:40px;border-radius:12px;background:var(--raised);display:grid;place-items:center;margin-bottom:10px;color:var(--ink)}
.acct b{font-size:20px;font-weight:600;letter-spacing:-.03em}
.acct .an{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .as{font-size:12px;color:var(--mut)}
.acct.add{align-items:center;justify-content:center;border:1.5px dashed var(--fill);background:none;color:var(--mut);font-weight:600;gap:8px;width:120px}
.acct.on{box-shadow:inset 0 0 0 2px var(--blue)}

/* quick actions */
.qa{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:14px 0 4px}
.qb{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--mut);padding:4px 0;border-radius:16px}
.qb span{width:52px;height:52px;border-radius:50%;background:var(--card);display:grid;place-items:center;color:var(--ink)}
.qb.spin span svg{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* tabs (underline) */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:6px 0 4px;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 0 auto;min-height:44px;padding:0 14px;font-weight:500;color:var(--mut);position:relative;white-space:nowrap}
.tab[aria-selected=true]{color:var(--ink);font-weight:600}
.tab[aria-selected=true]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2.5px;border-radius:2px;background:var(--blue)}

/* rows (transactions, bills, lists) */
.list{list-style:none;padding:0}
.dayh{font-size:12px;color:var(--mut);margin:14px 4px 2px;letter-spacing:.02em}
.trw{border-bottom:1px solid var(--line)}.trw:last-child{border-bottom:0}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;width:100%;min-height:62px;padding:8px 6px;text-align:left;border-radius:14px}
.row .nm{display:flex;align-items:center;gap:12px;min-width:0}
.row .tn{min-width:0;display:flex;flex-direction:column}
.row .t1{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t2{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .am{font-weight:600;text-align:right}
.row .am small{display:block;font-size:12px;font-weight:500;color:var(--mut)}
.ic{width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--cc,var(--blue)) 13%,var(--raised));color:var(--cc,var(--blue));display:grid;place-items:center;flex:none}
.edit{padding:2px 6px 14px}.edit label{display:block;font-size:12px;color:var(--mut);margin-bottom:6px}
select,.edit select{width:100%;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--raised);color:var(--ink);padding:0 12px;font:inherit}
.line{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.line:first-child{border-top:0}
.line .n{flex:1;min-width:0}.line .n b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.line .n span{font-size:13px;color:var(--mut)}
.line .v{font-weight:600;text-align:right}.line .v span{display:block;font-size:12px;color:var(--mut);font-weight:500}
.bar{height:6px;border-radius:6px;background:var(--fill);margin-top:7px;overflow:hidden}.bar i{display:block;height:100%;border-radius:6px;background:var(--cc,var(--blue))}
.rem{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;margin-top:2px;border-radius:99px;background:color-mix(in srgb,var(--blue) 11%,transparent);color:var(--accent-t);font-weight:600;font-size:13px}
.rem svg{width:16px;height:16px}
.due{display:inline-block;font-size:12px;font-weight:700;color:var(--accent-t);background:color-mix(in srgb,var(--blue) 12%,transparent);border-radius:99px;padding:2px 8px;margin-left:6px;vertical-align:1px}

/* insights */
.ins{display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--line);font-size:14px;text-wrap:pretty}
.ins:first-of-type{border-top:0}
.ii{flex:none;width:22px;height:22px;border-radius:50%;background:var(--chip);color:var(--accent-t);display:grid;place-items:center;font-size:12px;font-weight:700}
.ii.warn{background:var(--red);color:#fff}
.pillmsg{display:flex;align-items:center;gap:8px;font-size:14px;padding:8px 14px 8px 8px;border-radius:99px;width:fit-content;max-width:100%;background:var(--chip)}
.pillmsg .ico{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.pillmsg.ok{background:var(--ok-bg)}.pillmsg.ok .ico{background:var(--green)}.pillmsg.ok b{color:var(--pos-t)}
.pillmsg.bad{background:var(--bad-bg)}.pillmsg.bad .ico{background:var(--red)}.pillmsg.bad b{color:var(--neg-t)}

/* ---------- buttons ---------- */
.btn{height:52px;border-radius:99px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;padding:0 20px}
.btn.blue{background:var(--blue);color:var(--on-accent)}
.btn.dark{background:var(--btn2);color:var(--btn2-t)}
.btn.plain{background:var(--chip);color:var(--ink)}
.btn.full{width:100%}.btn:disabled{opacity:.65}
.link{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;color:var(--mut);font-size:14px;margin-top:4px;text-decoration:underline;text-underline-offset:3px}

/* ---------- stats ---------- */
.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 12px}
.ph h1{font-size:26px;font-weight:600;letter-spacing:-.03em}
.seg3{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border-radius:99px;padding:4px;margin-bottom:12px}
.seg3 button{min-height:44px;border-radius:99px;font-weight:600;font-size:14px;color:var(--mut)}
.seg3 button[aria-selected=true]{background:var(--raised);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.psel{position:relative;display:flex;align-items:center;flex:none}
.psel select{appearance:none;-webkit-appearance:none;width:auto;height:44px;border-radius:99px;border:0;background:var(--card);color:var(--ink);font:600 13px/1 var(--font);letter-spacing:.03em;text-transform:uppercase;padding:0 38px 0 16px;cursor:pointer}
.psel svg{position:absolute;right:13px;pointer-events:none;color:var(--mut)}
.budget{display:flex;justify-content:space-between;font-size:13px;color:var(--mut);margin-bottom:8px}.budget b{color:var(--ink)}
.bprog{height:9px;border-radius:9px;background:var(--fill);overflow:hidden}.bprog i{display:block;height:100%;border-radius:9px;background:var(--blue)}
.bprog.over i{background:var(--coral)}
.area{margin-top:6px}.area svg{display:block;width:100%;height:auto;overflow:visible}
.area text{font:500 12px var(--font);fill:var(--faint)}
.ax{stroke:var(--line);stroke-width:1}
.legendrow{display:flex;gap:18px;justify-content:center;font-size:13px;color:var(--mut);margin-top:6px;flex-wrap:wrap}
.legendrow span{display:flex;align-items:center;gap:7px}.legendrow i{width:10px;height:10px;border-radius:3px;display:block}
.mini2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.mini{background:var(--card);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:2px}
.mini .mi{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut)}
.mini .mi span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--c);border:1.5px solid var(--c)}
.mini b{font-size:21px;font-weight:600;letter-spacing:-.03em;margin-top:6px}.mini em{font-style:normal;font-size:12px;color:var(--mut)}
.pbars{position:relative;height:190px;margin-top:8px}
.pbgrid{position:absolute;inset:0 0 26px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.pbgrid i{display:block;border-top:1px solid var(--line)}
.pbcols{position:absolute;inset:0;display:flex;gap:10px}
.pb{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:12px}
.pbh{position:relative;flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.pb .col{width:100%;max-width:38px;border-radius:10px 10px 4px 4px;opacity:.5;transition:opacity .15s}
.pb.sel .col{opacity:1}
.pb .pl{font-size:12px;color:var(--mut);height:20px;display:flex;align-items:center;white-space:nowrap}.pb.sel .pl{color:var(--ink);font-weight:700}
.pb .pv{position:absolute;left:50%;transform:translateX(-50%);background:var(--tip);color:#fff;font-size:12px;font-weight:600;border-radius:10px;padding:4px 9px;white-space:nowrap}
.donut{display:flex;align-items:center;gap:16px;margin:8px 0 6px}
.donut .dsvg{position:relative;width:138px;height:138px;flex:none}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut .dc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.donut .dc b{font-size:20px;font-weight:600;letter-spacing:-.03em}.donut .dc span{font-size:12px;color:var(--mut)}
.dleg{display:flex;flex-direction:column;gap:2px;font-size:13px;flex:1;min-width:0}
.dleg span{display:flex;align-items:center;gap:8px;min-height:26px}.dleg i{width:10px;height:10px;border-radius:50%;flex:none}
.dleg em{margin-left:auto;font-style:normal;color:var(--mut)}
.chart{position:relative;margin-top:14px}
.tip{background:var(--tip);color:#fff;border-radius:16px;padding:10px 12px;min-width:170px;width:fit-content;margin:0 0 16px auto}
.tip em{font-style:normal;display:inline-block;background:#fff;color:#111114;border-radius:99px;padding:3px 10px;font-size:12px;font-weight:600;margin-bottom:6px}
.tip div{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;color:var(--tip-t);padding:2px 0}
.tip div b{color:#fff;font-weight:600}.tip div span{display:flex;align-items:center;gap:7px}.tip i{width:9px;height:9px;border-radius:50%;display:block}
.plot{position:relative;height:140px;display:flex;align-items:flex-end;gap:4px;touch-action:pan-y;cursor:pointer;border-radius:12px;user-select:none;-webkit-user-select:none}
.plot .b{flex:1;height:100%;display:flex;align-items:flex-end;pointer-events:none}
.plot .b i{display:block;width:100%;border-radius:8px;background:var(--fill);min-height:5px}
.plot .b.w i{background:color-mix(in srgb,var(--blue) 30%,var(--fill))}
.plot .b.sel i{background:var(--blue)}.plot .b.sel.nw i{background:var(--coral)}
.avgline{position:absolute;left:0;right:0;border-top:1.5px dashed var(--faint);font-size:12px;color:var(--mut);pointer-events:none}
.avgline span{position:absolute;top:-17px;left:0;background:var(--card);padding-right:6px}
.xl{margin-top:8px;display:flex;justify-content:space-between;font-size:12px;color:var(--mut)}
.hint{font-size:12px;color:var(--mut);text-align:center;margin-top:10px}

/* ---------- history ---------- */
.back{display:flex;align-items:center;gap:6px;min-height:44px;font-size:17px;font-weight:600;letter-spacing:-.02em;margin:8px 0 4px;padding-right:12px}
.search{position:relative;margin:6px 0 4px}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none}
.search input{width:100%;height:50px;border-radius:99px;border:0;background:var(--card);color:var(--ink);padding:0 18px 0 46px;font:inherit}
.search input::placeholder{color:var(--faint)}
.fchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:99px;background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--accent-t);font-weight:600;font-size:13px;margin:6px 0}

/* ---------- goals ---------- */
.tools{display:flex;gap:2px;background:var(--chip);border-radius:99px;padding:2px}
.tools button{flex:none;width:44px;height:44px;border-radius:50%;background:var(--raised);display:grid;place-items:center;position:relative}
.glist{display:grid;gap:10px;margin-top:16px}
.gdark{background:var(--gd-bg);color:var(--gd-fg);border-radius:22px;padding:18px 18px 12px}
.gh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gh h3{font-size:22px;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
.gcol,.gexp{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none}
.gcol{background:var(--raised);color:var(--ink)}.gexp{background:var(--chip);color:var(--mut)}
.gauge{position:relative;max-width:300px;margin:6px auto 0}.gauge svg{display:block;width:100%;height:auto}
.gtrack,.gprog{fill:none;stroke-width:15;stroke-linecap:round}.gtrack{stroke:var(--gd-track)}.gknob{fill:#fff;filter:drop-shadow(var(--gd-knob-shadow))}
.gc{position:absolute;left:0;right:0;top:46%;display:flex;flex-direction:column;align-items:center;text-align:center}
.gl{font-size:14px;opacity:.6}.gv{font-size:40px;font-weight:600;letter-spacing:-.04em;line-height:1.1}
.gt{font-size:15px;opacity:.75;display:flex;align-items:center;gap:6px}.gt em{font-style:normal;font-weight:600}
.gok{width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center}
.gnote{text-align:center;font-size:14px;opacity:.85;margin:2px 0 10px;text-wrap:balance}
.gquick{display:flex;justify-content:center;gap:8px;margin-bottom:6px}
.gquick button{min-height:44px;padding:0 20px;border-radius:99px;background:var(--gd-btn);font-weight:600}
.gacts{display:flex;justify-content:center;gap:4px;border-top:1px solid var(--gd-line);margin-top:8px;padding-top:4px}
.gacts button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;font-size:14px;opacity:.8}
.grow{border:1px solid var(--line);border-radius:22px;padding:14px 16px 16px;background:var(--app)}
.grh{display:flex;align-items:center;justify-content:space-between;gap:10px}.grh h3{font-size:20px;font-weight:500;letter-spacing:-.02em}
.gpr{display:flex;align-items:center;gap:10px;margin-top:2px}.gpct{font-size:14px;color:var(--mut);min-width:46px}
.gbar{flex:1;height:7px;border-radius:7px;background:color-mix(in srgb,var(--c) 16%,transparent);overflow:hidden}.gbar i{display:block;height:100%;border-radius:7px;background:var(--c)}
.gempty{text-align:center;padding:18px 8px 6px;color:var(--mut)}.gempty p{margin-bottom:6px}.gempty .btn{margin-top:14px;width:100%}

/* ---------- menu tiles ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:var(--card);border-radius:22px;padding:16px;text-align:left;display:flex;flex-direction:column;gap:12px;min-height:128px}
.tile .chip{background:var(--raised)}
.tile b{font-size:16px;font-weight:600;display:block;letter-spacing:-.01em}.tile span.s{font-size:12.5px;color:var(--mut);display:block;margin-top:2px;text-wrap:balance}

/* ---------- onboarding ---------- */
.hero{text-align:center;padding:28px 6px 8px}
.orb{width:132px;height:132px;border-radius:50%;margin:10px auto 26px;background:conic-gradient(from 210deg,var(--blue),#8b5cf6,var(--coral),var(--blue));filter:saturate(1.05);display:grid;place-items:center;box-shadow:0 20px 50px -18px var(--blue)}
.orb span{width:76%;height:76%;border-radius:50%;background:var(--app);display:grid;place-items:center}
.hero h2{font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1.1;text-wrap:balance}
.hero p{color:var(--mut);margin:12px 4px 24px;text-wrap:pretty}
.hero .btn{margin-top:10px}

/* ---------- bottom nav with center + ---------- */
.nav{position:fixed;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(408px,calc(100% - 28px));height:70px;background:var(--nav);border:1px solid var(--line);border-radius:30px;display:grid;grid-template-columns:1fr 1fr 78px 1fr 1fr;align-items:center;padding:0 8px;box-shadow:0 14px 40px -12px rgba(0,0,0,.28);z-index:20}
.nav>button{height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:500;color:var(--mut);border-radius:18px}
.nav>button[aria-current=page]{color:var(--accent-t);font-weight:600}
.nav>button[aria-current=page] svg{stroke-width:2.3}
.nav>button.fab{width:58px;height:58px;border-radius:50%;background:var(--blue);color:var(--on-accent);display:grid;place-items:center;justify-self:center;margin-top:-30px;box-shadow:0 10px 24px -6px var(--blue),0 0 0 6px var(--app)}

/* ---------- dialogs: goal form + generic sheet ---------- */
dialog{border:0;padding:0;background:var(--app);color:var(--ink);width:min(440px,100%);max-width:100%;margin:auto auto 0;border-radius:28px 28px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.35);max-height:88vh;overflow:auto}
dialog::backdrop{background:rgba(5,5,10,.55)}
dialog[open]{animation:sheet .35s var(--ease)}@keyframes sheet{from{transform:translateY(40px);opacity:0}}
#gform,#tform,#sheetbody{padding:6px 20px calc(22px + env(safe-area-inset-bottom))}
#gform,#tform{padding-top:22px}
#gform h2,#tform h2{font-size:22px;font-weight:600;letter-spacing:-.03em;margin-bottom:16px}
.shead{display:flex;align-items:center;justify-content:space-between;padding:18px 12px 8px 20px;position:sticky;top:0;background:var(--app)}
.shead h2{font-size:21px;font-weight:600;letter-spacing:-.03em}
.xbtn{width:44px;height:44px;border-radius:50%;background:var(--card);font-size:24px;line-height:1;display:grid;place-items:center}
.fld{margin-bottom:14px}.fld[hidden]{display:none}
.fld label,.kinds legend{display:block;font-size:13px;color:var(--mut);margin-bottom:6px}
.fld input,.fld select{width:100%;height:48px;border-radius:14px;border:1px solid var(--line);background:var(--raised);color:var(--ink);padding:0 14px;font:inherit}
.kinds{border:0;padding:0;margin:0 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.kinds legend{grid-column:1/-1;padding:0}
.kinds label{position:relative}.kinds input{position:absolute;opacity:0;inset:0}
.kinds span{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:14px;background:var(--chip);font-weight:600;font-size:14px;color:var(--mut)}
.kinds input:checked+span{background:var(--ink);color:var(--app)}.kinds input:focus-visible+span{outline:2px solid var(--ring);outline-offset:2px}
.gbtns{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:6px}
.tpls{display:flex;gap:8px;overflow:auto;margin:0 -2px 14px;padding:2px;scrollbar-width:none}.tpls[hidden]{display:none}
.tpls button{flex:none;min-height:44px;padding:0 16px;border-radius:99px;background:var(--chip);font-weight:600;font-size:13px}
.opts{display:grid;gap:8px;margin:6px 0 4px}
.opt{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 14px;border-radius:18px;background:var(--card);text-align:left;font-weight:500;width:100%}
.opt .s{display:block;font-size:12.5px;color:var(--mut);font-weight:400}
.opt[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--blue)}
.opt .chip{background:var(--raised)}
.privul{list-style:none;padding:0;margin:6px 0 10px}.privul li{display:flex;gap:12px;padding:10px 0;font-size:14px;border-top:1px solid var(--line)}.privul li:first-child{border-top:0}.privul svg{flex:none;color:var(--blue);margin-top:2px}
.proprice{font-size:15px;color:var(--mut);margin:6px 0 4px}.proprice b{font-size:34px;font-weight:600;letter-spacing:-.04em;color:var(--ink)}
.probul{list-style:none;padding:0;margin:6px 0 14px}.probul li{display:flex;gap:10px;padding:7px 0;font-size:14px}.probul svg{color:var(--blue);flex:none;margin-top:3px;width:16px;height:16px}
.proban{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:color-mix(in srgb,var(--blue) 9%,var(--card));border-radius:22px;padding:14px 16px;margin-bottom:12px}
.proban b{display:block;font-weight:600}.proban span.s{font-size:13px;color:var(--mut)}

.toast{position:fixed;bottom:112px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--app);padding:12px 18px;border-radius:99px;font-size:14px;z-index:60;max-width:90vw;box-shadow:0 10px 30px rgba(0,0,0,.3);animation:rise .3s var(--ease)}
@keyframes rise{from{opacity:0;transform:translate(var(--tx,0),10px)}to{opacity:1;transform:translate(var(--tx,0),0)}}
.toast{--tx:-50%}
main.enter>*{animation:rise .45s var(--ease) both}
main.enter>*:nth-child(2){animation-delay:.04s}main.enter>*:nth-child(3){animation-delay:.08s}main.enter>*:nth-child(n+4){animation-delay:.12s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}

/* ===== accent + secondary colors (Menu → Appearance). Defaults: blue accent, coral secondary. Set on <html>. ===== */
:root[data-accent="blue"]{--blue:#2f5bff;--ring:#2f5bff;--on-accent:#ffffff;--accent-t:#2f5bff}
:root[data-theme="dark"][data-accent="blue"]{--blue:#5b84ff;--ring:#5b84ff;--on-accent:#08133d;--accent-t:#5b84ff}
:root[data-accent="violet"]{--blue:#7c3aed;--ring:#7c3aed;--on-accent:#ffffff;--accent-t:#7c3aed}
:root[data-theme="dark"][data-accent="violet"]{--blue:#a78bfa;--ring:#a78bfa;--on-accent:#140a33;--accent-t:#a78bfa}
:root[data-accent="pink"]{--blue:#e11d74;--ring:#e11d74;--on-accent:#ffffff;--accent-t:#e11d74}
:root[data-theme="dark"][data-accent="pink"]{--blue:#f472b6;--ring:#f472b6;--on-accent:#3a0620;--accent-t:#f472b6}
:root[data-accent="teal"]{--blue:#0b7f74;--ring:#0b7f74;--on-accent:#ffffff;--accent-t:#0b7f74}
:root[data-theme="dark"][data-accent="teal"]{--blue:#2dd4bf;--ring:#2dd4bf;--on-accent:#032b27;--accent-t:#2dd4bf}
:root[data-accent="sky"]{--blue:#0369a1;--ring:#0369a1;--on-accent:#ffffff;--accent-t:#0369a1}
:root[data-theme="dark"][data-accent="sky"]{--blue:#38bdf8;--ring:#38bdf8;--on-accent:#04293d;--accent-t:#38bdf8}
:root[data-accent="mono"]{--blue:#111114;--ring:#111114;--on-accent:#ffffff;--accent-t:#111114}
:root[data-theme="dark"][data-accent="mono"]{--blue:#f5f5f7;--ring:#f5f5f7;--on-accent:#111114;--accent-t:#f5f5f7}
:root[data-accent="orange"]{--blue:#ea580c;--ring:#ea580c;--on-accent:#1a0a00;--accent-t:#c2410c}
:root[data-theme="dark"][data-accent="orange"]{--blue:#ff8a3d;--ring:#ff8a3d;--on-accent:#1a0a00;--accent-t:#ff8a3d}
:root[data-accent="amber"]{--blue:#c27c00;--ring:#c27c00;--on-accent:#1a1000;--accent-t:#8a5a00}
:root[data-theme="dark"][data-accent="amber"]{--blue:#fbbf24;--ring:#fbbf24;--on-accent:#1a1000;--accent-t:#fbbf24}
:root[data-sec="orange"]{--coral:#ea580c}
:root[data-theme="dark"][data-sec="orange"]{--coral:#ff8a3d}
:root[data-sec="amber"]{--coral:#c27c00}
:root[data-theme="dark"][data-sec="amber"]{--coral:#fbbf24}
:root[data-sec="pink"]{--coral:#e11d74}
:root[data-theme="dark"][data-sec="pink"]{--coral:#f472b6}
:root[data-sec="violet"]{--coral:#7c3aed}
:root[data-theme="dark"][data-sec="violet"]{--coral:#a78bfa}
:root[data-sec="teal"]{--coral:#0b7f74}
:root[data-theme="dark"][data-sec="teal"]{--coral:#2dd4bf}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.sw{width:48px;height:48px;border-radius:50%;background:var(--sw);display:grid;place-items:center;color:var(--swc,#fff);position:relative}
.sw[aria-pressed=true]{box-shadow:0 0 0 3px var(--app),0 0 0 5px var(--sw)}
.sw svg{opacity:0}.sw[aria-pressed=true] svg{opacity:1}
.sub2{font-size:13px;color:var(--mut);margin:18px 0 4px}.sub2 span{color:var(--faint)}
.sw[data-v="blue"]{--sw:#2f5bff}:root[data-theme="dark"] .sw[data-v="blue"]{--sw:#5b84ff;--swc:#111114}
.sw[data-v="violet"]{--sw:#7c3aed}:root[data-theme="dark"] .sw[data-v="violet"]{--sw:#a78bfa;--swc:#111114}
.sw[data-v="pink"]{--sw:#e11d74}:root[data-theme="dark"] .sw[data-v="pink"]{--sw:#f472b6;--swc:#111114}
.sw[data-v="teal"]{--sw:#0b7f74}:root[data-theme="dark"] .sw[data-v="teal"]{--sw:#2dd4bf;--swc:#111114}
.sw[data-v="sky"]{--sw:#0369a1}:root[data-theme="dark"] .sw[data-v="sky"]{--sw:#38bdf8;--swc:#111114}
.sw[data-v="mono"]{--sw:#111114}:root[data-theme="dark"] .sw[data-v="mono"]{--sw:#f5f5f7;--swc:#111114}
.sw[data-v="orange"]{--sw:#ea580c}:root[data-theme="dark"] .sw[data-v="orange"]{--sw:#ff8a3d;--swc:#111114}
.sw[data-v="amber"]{--sw:#c27c00}:root[data-theme="dark"] .sw[data-v="amber"]{--sw:#fbbf24;--swc:#111114}
.sw[data-s="coral"]{--sw:#ff6b3d}:root[data-theme="dark"] .sw[data-s="coral"]{--sw:#ff8159;--swc:#111114}
.sw[data-s="orange"]{--sw:#ea580c}:root[data-theme="dark"] .sw[data-s="orange"]{--sw:#ff8a3d;--swc:#111114}
.sw[data-s="amber"]{--sw:#c27c00}:root[data-theme="dark"] .sw[data-s="amber"]{--sw:#fbbf24;--swc:#111114}
.sw[data-s="pink"]{--sw:#e11d74}:root[data-theme="dark"] .sw[data-s="pink"]{--sw:#f472b6;--swc:#111114}
.sw[data-s="violet"]{--sw:#7c3aed}:root[data-theme="dark"] .sw[data-s="violet"]{--sw:#a78bfa;--swc:#111114}
.sw[data-s="teal"]{--sw:#0b7f74}:root[data-theme="dark"] .sw[data-s="teal"]{--sw:#2dd4bf;--swc:#111114}
.sw[data-v="navy"]{--sw:#1b2f6b}:root[data-theme="dark"] .sw[data-v="navy"]{--sw:#8fa6e8;--swc:#111114}

/* ===== audit fixes: notifications, forms, filters, errors ===== */
.alerts{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:10px}
.alert{display:flex;gap:12px;background:var(--card);border-radius:18px;padding:14px}
.aico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--blue) 14%,var(--raised));color:var(--accent-t)}
.alert.warn .aico{background:var(--red);color:#fff}.alert.good .aico{background:var(--green);color:#fff}
.atxt{min-width:0}.atxt p{font-size:14px;text-wrap:pretty}.atxt .rem{margin-top:4px}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:26px 8px;color:var(--mut)}
.empty b{color:var(--ink);font-size:17px;font-weight:600}.empty p{text-wrap:balance;max-width:34ch}.empty .btn{margin-top:10px}
.err{font-size:13px;color:var(--neg-t);margin-top:6px;min-height:0}.err:empty{display:none}
.fld input[aria-invalid=true],.fld select[aria-invalid=true]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.fld input[type=date]{min-height:48px}
.mnote{font-size:13px;color:var(--mut);margin:6px 2px 10px}
.acts2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn.danger{color:var(--neg-t)}
.resetrow{display:flex;justify-content:flex-end;margin-top:-2px}
.lbtn{width:100%;text-align:left;min-height:60px;border-top:0;border-radius:14px}
.list>li:not(.line)+li:not(.line){border-top:1px solid var(--line)}   /* li.line rows draw their own divider */
.line.lbtn:hover{background:var(--card)}
.chev{color:var(--faint);flex:none;display:grid;place-items:center}
.errbox{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:90px 8px}
.errbox h2{font-size:22px;font-weight:600;letter-spacing:-.03em}.errbox p{color:var(--mut);max-width:32ch;text-wrap:balance}.errbox .detail{font-size:12px;color:var(--faint)}
.errbox .chip{background:var(--bad-bg);color:var(--neg-t)}

.alertsview .alerts{margin-top:6px}.alertsview .dayh{margin-top:18px}
.circle[aria-current=page]{background:color-mix(in srgb,var(--blue) 14%,var(--card));color:var(--accent-t)}
.aico svg{width:18px;height:18px}

/* sign-in (cloud mode) */
.login{max-width:380px;margin:0 auto;padding:max(12vh,48px) 24px 24px;text-align:left}
.login h1{font-size:28px;letter-spacing:-.02em;margin:0 0 8px}.login .s{color:var(--mut);margin:0 0 24px}
.login .err{color:var(--red);min-height:20px;margin:0 0 12px;font-size:14px}