/* Мільйонер · стилі */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0;font:14px system-ui,sans-serif}img{max-width:100%}[hidden]{display:none!important}
/* Layout: one column on phone, two-column working grid on desktop; hero = the debt itself, everything else serves it */
:root{
  --bg:#eef2f1; --surface:#ffffff; --sunk:#f6f8f8; --ink:#13232a; --muted:#5b6b70; --line:#d7dfdd; --track:#e2e9e7;
  --accent:#1c5d66; --accent-ink:#ffffff; --xp:#b97c12; --good:#2d7a4c; --warn:#a96f12; --bad:#b0433a;
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e1618; --surface:#152024; --sunk:#111b1e; --ink:#e4edeb; --muted:#93a4a7; --line:#24343a;
  --track:#213136; --accent:#62b6b8; --accent-ink:#0e1618; --xp:#e3ad48; --good:#5fc08a; --warn:#e2a54a; --bad:#e8786c; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1618; --surface:#152024; --sunk:#111b1e; --ink:#e4edeb; --muted:#93a4a7; --line:#24343a;
  --track:#213136; --accent:#62b6b8; --accent-ink:#0e1618; --xp:#e3ad48; --good:#5fc08a; --warn:#e2a54a; --bad:#e8786c; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 104px}
.wrap{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
/* desktop: content fills 80% of the window, 10% empty on each side; phone layout untouched */
@media (min-width:1024px){
  body{padding-left:0;padding-right:0}
  .wrap{max-width:none;width:80%}
}
h1,h2{font-family:var(--f-display);font-weight:700;text-wrap:balance;margin:0}
h1{font-size:22px;letter-spacing:-.01em}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:34px;height:34px;flex:none}
h2{font-size:15px;letter-spacing:.01em}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono);font-size:12.5px}
.muted{color:var(--muted)}
.label{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* header */
.top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.lvl{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px;min-width:0}
.lvl-n{width:34px;height:34px;border-radius:50%;background:var(--xp);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:14px;flex:none}
.lvl-t{font-weight:700;font-size:13.5px}
.xpbar{height:5px;width:130px;background:var(--track);border-radius:9px;overflow:hidden;margin-top:3px}
.xpbar i{display:block;height:100%;background:var(--xp)}
.streak{font-size:12.5px;color:var(--muted);white-space:nowrap}
.streak b{color:var(--ink)}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:860px){.grid{grid-template-columns:1fr 1fr}.span2{grid-column:1/-1}}

/* hero */
.hero{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:700px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}
@media (min-width:1040px){.hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr)}}
@media (min-width:1400px){.hero{grid-template-columns:minmax(0,.62fr) minmax(0,1.5fr)}}
#debtCard{display:flex;flex-direction:column}
/* avatar scene: its own illustrated world, fixed palette inside the frame */
.avatar{display:flex;flex-direction:column;gap:8px}
.scene{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:320/220;max-width:100%;background:#cfc6b8}
.scene svg{display:block;width:100%;height:100%}
.scene.locked svg{filter:saturate(.5) brightness(.95)}
.lock{position:absolute;top:8px;left:8px;right:auto;max-width:calc(100% - 16px);background:rgba(15,20,24,.78);color:#fff;font-size:11.5px;font-weight:600;padding:5px 9px;border-radius:7px}
.av-name{font-family:var(--f-display);font-weight:700;font-size:16px}
#avDesc{font-size:13px;line-height:1.4}
.av-nav{display:flex;align-items:center;gap:6px}
.av-nav .arr{border:1px solid var(--line);background:var(--sunk);border-radius:8px;width:28px;height:28px;flex:none}
.dots{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;flex:1;min-width:0}
.dot{height:8px;border:0;border-radius:3px;background:var(--track);padding:0}
.dot.on{background:var(--xp)}
.dot.cur{outline:2px solid var(--ink);outline-offset:1px}
.sc-breathe{animation:scBreathe 3.2s ease-in-out infinite}
.sc-bob{animation:scBob 2.4s ease-in-out infinite}
.sc-bob2{animation:scBob 1.2s ease-in-out infinite}
.sc-blink{transform-box:fill-box;transform-origin:center;animation:scBlink 4.5s infinite}
.sc-moth{animation:scMoth 3s ease-out infinite}
.sc-glow{animation:scGlow 3s ease-in-out infinite}
.sc-rgb{animation:scRgb 4s linear infinite}
.sc-rgbs{animation:scRgbS 4s linear infinite}
.sc-sway{animation:scSway 4s ease-in-out infinite}
.sc-wave{animation:scWave 5s linear infinite}
.sc-plane{animation:scPlane 9s linear infinite}
.sc-spark{animation:scGlow 1.6s ease-in-out infinite}
.sc-fall{animation:scFall 4s linear infinite}
@keyframes scBreathe{50%{transform:translateY(-1px)}}
@keyframes scBob{50%{transform:translateY(-2px)}}
@keyframes scBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes scMoth{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(14px,-34px);opacity:0}}
@keyframes scGlow{50%{opacity:.6}}
@keyframes scRgb{0%{fill:#ff4d6d}33%{fill:#4dd2ff}66%{fill:#8cff6b}100%{fill:#ff4d6d}}
@keyframes scRgbS{0%{stroke:#ff4d6d}33%{stroke:#4dd2ff}66%{stroke:#8cff6b}100%{stroke:#ff4d6d}}
@keyframes scSway{50%{transform:rotate(3deg)}}
@keyframes scWave{to{transform:translateX(40px)}}
@keyframes scPlane{0%{transform:translate(-80px,40px)}100%{transform:translate(380px,8px)}}
@keyframes scFall{0%{transform:translateY(0)}100%{transform:translateY(250px)}}
.debt-v{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,7vw,54px);letter-spacing:-.02em;line-height:1.05}
.debt-v small{font-size:.45em;font-weight:500;color:var(--muted);margin-left:6px}
.gauge{position:relative;margin:22px 0 30px}
.gauge-track{height:14px;border-radius:9px;background:var(--track);overflow:hidden}
.gauge-fill{height:100%;background:var(--accent);border-radius:9px;transition:width .6s ease}
.tick{position:absolute;top:-4px;height:22px;border-left:2px dashed var(--muted);opacity:.55}
.tick span{position:absolute;top:24px;left:0;transform:translateX(-50%);font-size:11px;color:var(--muted);white-space:nowrap;font-family:var(--f-mono)}
.tick.hit{border-left-style:solid;border-color:var(--good);opacity:1}
.tick.hit span{color:var(--good);font-weight:700}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;border:1px solid currentColor;white-space:nowrap}
.pill.good{color:var(--good)}.pill.warn{color:var(--warn)}.pill.bad{color:var(--bad)}.pill.xp{color:var(--xp)}
.target-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.grace{margin-top:auto;border-radius:12px;padding:14px 16px;border:1.5px solid var(--bad);background:var(--sunk);display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.grace-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.grace.ok{border-color:var(--good)}
.grace .big{font-family:var(--f-display);font-weight:700;font-size:24px}
.graceWrap{margin-top:auto;padding-top:18px}
.days{font-family:var(--f-mono);font-size:13px}

/* buttons */
.btn{border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);border-radius:10px;padding:9px 14px;font-weight:700}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:default}

/* entry */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;background:transparent;padding:7px 14px;font-weight:700;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.form{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row > *{flex:1 1 140px;min-width:0}
.fld{display:flex;flex-direction:column;gap:4px}
.fld input,.fld select{border:1px solid var(--line);background:var(--sunk);border-radius:10px;padding:9px 11px;width:100%}
.amt{font-family:var(--f-display);font-size:24px!important;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--sunk);border-radius:999px;padding:5px 11px;font-size:13px}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:700}

/* bars */
.bars{display:flex;flex-direction:column;gap:11px}
.bar-h{display:flex;justify-content:space-between;gap:8px;font-size:13.5px}
.bar{height:8px;border-radius:9px;background:var(--track);overflow:hidden;margin-top:4px}
.bar i{display:block;height:100%;border-radius:9px;background:var(--good)}
.bar i.warn{background:var(--warn)}.bar i.bad{background:var(--bad)}
.over{color:var(--bad);font-weight:700}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.kpi{background:var(--sunk);border-radius:10px;padding:10px 12px;min-width:0}
.kpi b{display:block;font-family:var(--f-display);font-size:17px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.week-big{font-family:var(--f-display);font-weight:700;font-size:30px}

/* tasks */
.tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.task{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.task:first-child{border-top:0}
.task input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}
.task.done .tt{text-decoration:line-through;color:var(--muted)}
.task .due{font-size:12px;color:var(--muted);font-family:var(--f-mono)}
.task .due.late{color:var(--bad);font-weight:700}

/* tx */
.txs{display:flex;flex-direction:column}
.tx{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.tx:first-child{border-top:0}
.tx .d{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.tx .ds{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:14px}
.tx .a{text-align:right;font-weight:700;white-space:nowrap}
.tx .a.plus{color:var(--good)}
.tx .meta{grid-column:2/4;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tx select{border:1px solid var(--line);background:var(--sunk);border-radius:8px;padding:3px 6px;font-size:12.5px;max-width:100%}
.src{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.x{border:0;background:none;color:var(--muted);font-size:12px;text-decoration:underline}
.tx-man{cursor:pointer;border-radius:8px}
@media (hover:hover){.tx-man:hover .ds{text-decoration:underline}}
.txv-amt{font-family:var(--f-display);font-weight:700;font-size:32px;text-align:center;margin:4px 0 14px}
.txv-amt.plus{color:var(--good)}
.txv-row{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.txv-row span:first-child{color:var(--muted)}
.txv-row span:last-child{text-align:right;font-weight:600;min-width:0;overflow-wrap:anywhere}

/* chart */
.chart{width:100%;height:auto;display:block}
.chart .grid-l{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--muted);font-family:var(--f-mono);font-size:11px}
.chart .act{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.chart .actp{fill:var(--accent)}
.chart .tgt{fill:none;stroke:var(--xp);stroke-width:2;stroke-dasharray:5 5}
.chart .tgtp{fill:var(--surface);stroke:var(--xp);stroke-width:2}
.chart .now{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:18px;height:0;border-top:2.5px solid var(--accent);vertical-align:middle;margin-right:6px}
.legend i.t{border-top:2px dashed var(--xp)}

/* badges */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.badge{border:1px dashed var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px;color:var(--muted)}
.badge b{font-family:var(--f-display);font-size:13px}
.badge.on{border:1px solid var(--xp);color:var(--ink);background:var(--sunk)}
.badge.on b{color:var(--xp)}
.badge small{font-size:12px}

.notice{background:var(--surface);border:1px solid var(--warn);border-radius:var(--r);padding:12px 16px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;max-width:calc(100% - 32px);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1}
.mnav{display:inline-flex;gap:6px;align-items:center}
.mnav button{border:1px solid var(--line);background:var(--sunk);border-radius:8px;width:30px;height:30px}
details summary{cursor:pointer;font-weight:700;color:var(--accent)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.bgrid{display:grid;grid-template-columns:1fr;gap:10px 28px}
@media (min-width:860px){.bgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1400px){.bgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.brow{min-width:0}
.brow summary{list-style:none;cursor:pointer;color:inherit;font-weight:400}
.brow summary::-webkit-details-marker{display:none}
.brow summary .bar-h span:first-child::after{content:" ▾";color:var(--muted);font-size:11px}
.brow[open] summary .bar-h span:first-child::after{content:" ▴"}
.subs{display:flex;flex-direction:column;gap:3px;margin:8px 0 4px 12px;font-size:13px;color:var(--muted)}
.subs div{display:flex;justify-content:space-between;gap:8px}
.acc-list{display:flex;flex-direction:column;gap:8px}
.acc{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.acc:last-child{border-bottom:0;padding-bottom:0}
.acc b{font-family:var(--f-display);font-size:16px}
.cat{font-size:12.5px;color:var(--muted)}
.cat.unc{color:var(--warn);font-weight:700}
.opps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:760px){.opps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opp{background:var(--sunk);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0;border:1px solid transparent}
.opp b{font-family:var(--f-display);font-size:clamp(17px,2.4vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opp>span.muted{font-size:12px;line-height:1.35}
.opp.good b{color:var(--good)}.opp.warn b{color:var(--warn)}.opp.bad b{color:var(--bad)}
.opp:first-child{border-color:var(--line);background:var(--surface)}
.minis{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted);margin:12px 0 16px}
.minis b{color:var(--ink)}
.bleft{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;margin-top:4px}
.login{position:fixed;inset:0;z-index:30;background:var(--bg);display:grid;place-items:center;padding:24px}
.login-box{width:min(360px,100%);display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.login-box input{border:1px solid var(--line);background:var(--sunk);border-radius:10px;padding:11px 12px;font-size:16px}

/* app bar: current space + settings */
.appbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.space-chip{display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;min-width:0;font-weight:700;font-size:16px}
.space-ic{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;font-family:var(--f-display);font-size:16px;flex:none;position:relative}
.space-ic .ok{position:absolute;right:-5px;bottom:-5px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:11px;border:2px solid var(--surface)}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;flex:none;padding:0}
.icon-btn svg,.set-row svg{width:22px;height:22px}
/* settings sheet: bottom sheet on phone, centred panel on desktop */
.sheet-bg{position:fixed;inset:0;z-index:40;background:rgba(5,10,12,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--bg);width:min(560px,100%);max-height:92vh;max-height:92dvh;overflow:auto;border-radius:20px 20px 0 0;padding:10px 16px calc(24px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){.sheet-bg{align-items:center}.sheet{border-radius:20px;max-height:86vh;max-height:86dvh}}
.sheet-grip{width:44px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 8px}
.sheet-h{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.sheet-h h2{text-align:center;font-size:17px}
.sheet-h>:first-child{justify-self:start}.sheet-h>:last-child{justify-self:end}
.set-group{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:6px 0;margin-bottom:16px}
.set-group>h3{font-family:var(--f-display);font-size:16px;margin:12px 18px 4px}
.set-row{display:flex;align-items:center;gap:16px;width:100%;border:0;background:none;padding:14px 18px;text-align:left;font-size:16px;font-weight:600;color:var(--ink);position:relative}
.set-row+.set-row::before{content:"";position:absolute;top:0;left:56px;right:0;border-top:1px solid var(--line)}
.set-row .ic{color:var(--accent);display:grid;place-items:center;flex:none}
.set-row .lbl{flex:1;min-width:0}
.set-row .val{color:var(--muted);font-weight:500;font-size:14px}
.set-row .chev{color:var(--muted);font-size:20px;line-height:1}
.set-row[aria-checked="true"] .chev{color:var(--accent);font-weight:700}
.set-sec{font-size:13px;font-weight:700;color:var(--muted);margin:4px 4px 10px}
.set-note{font-size:13px;color:var(--muted);margin:0 4px 16px}
.soon{font-size:11px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--muted);white-space:nowrap}
.set-body{padding:6px 18px 16px;display:flex;flex-direction:column;gap:12px}
.seg3{display:grid;grid-template-columns:repeat(3,1fr);background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:3px}
.seg3 button{border:0;background:none;border-radius:9px;padding:8px 4px;font-weight:600;font-size:13.5px;color:var(--muted)}
.seg3 button[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.cat-row .val{color:var(--muted);font-size:13.5px;white-space:nowrap;margin-left:auto}
.seg2{display:grid;grid-template-columns:1fr 1fr;background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:3px;margin-bottom:14px}
.seg2 button{border:0;background:none;border-radius:9px;padding:9px 6px;font-weight:600;color:var(--muted)}
.seg2 button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.cat-list{display:flex;flex-direction:column}
.cat-row{display:flex;align-items:center;gap:14px;width:100%;border:0;border-bottom:1px solid var(--line);background:none;padding:10px 4px;text-align:left;font-size:16px;font-weight:600;color:var(--ink)}
.cat-row.sub{padding-left:52px;font-weight:500}
.cat-line{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.cat-line .cat-row{border-bottom:0;flex:1;min-width:0}
.cat-line.sub .cat-row{padding-left:52px;font-weight:500}
.cat-line.sub .c-ic{width:34px;height:34px}.cat-line.sub .c-ic svg{width:17px;height:17px}
.drag{border:0;background:none;color:var(--muted);font-size:22px;line-height:1;width:44px;height:44px;flex:none;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cat-grp.dragging,.cat-line.dragging{opacity:.75;background:var(--sunk);border-radius:10px}
.c-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.c-ic svg{width:20px;height:20px}
.cat-row.sub .c-ic{width:34px;height:34px}.cat-row.sub .c-ic svg{width:17px;height:17px}
.c-ic.big{width:84px;height:84px}.c-ic.big svg{width:38px;height:38px}
.ci-pick{max-height:236px;overflow:auto;padding:4px}
.acc-gh{display:flex;justify-content:space-between;gap:10px;padding:10px 18px 4px;font-size:13px;font-weight:700;color:var(--muted)}
.w-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.w-ic svg{width:20px;height:20px}
.w-ic.big{width:84px;height:84px}.w-ic.big svg{width:40px;height:40px}
.w-hero{display:flex;justify-content:center;margin:4px 0 16px}
.w-sub{display:block;font-size:12px;font-weight:500;color:var(--muted)}
.w-bal{font-weight:700;white-space:nowrap}.w-bal.neg{color:var(--bad)}
.w-pick{display:flex;flex-wrap:wrap;gap:8px}
.w-pick button{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:var(--sunk);display:grid;place-items:center;padding:0;color:var(--ink)}
.w-pick button svg{width:20px;height:20px}
.w-pick button[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.w-pick .sw{border-color:transparent}
.set-body .fld select,.set-body .fld input{border:1px solid var(--line);background:var(--sunk);border-radius:10px;padding:9px 11px;width:100%}
/* add-transaction button: bottom-right on phone, centred in the right gutter on desktop */
.fab{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;padding:0;box-shadow:0 6px 18px rgba(0,0,0,.28);z-index:20}
.fab svg{width:28px;height:28px}
@media (min-width:1024px){.fab{right:calc(5% - 29px)}}
@media (max-width:1023px){body:has(#txAddBtn:not([hidden])):has(#sheetBg[hidden]) .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
.set-body .fld input.amt{font-size:26px!important;padding:10px 12px}
.tx-warn{font-size:12.5px;color:var(--warn)}