:root{
  --bg:#eceef5;
  --blob1:#76d1c4; --blob2:#a99bff; --blob3:#ffb58e; --blob4:#86c2ff;
  --blob-op:.55;
  --glass:rgba(255,255,255,.56);
  --glass-strong:rgba(255,255,255,.80);
  --glass-edge:rgba(255,255,255,.72);
  --glass-hi:rgba(255,255,255,.95);
  --ink:#141522; --ink-2:#3b3e50; --muted:#686c80;
  --line:rgba(20,21,34,.08); --line-2:rgba(20,21,34,.15);
  --fill:rgba(20,21,34,.05); --fill-2:rgba(20,21,34,.09);
  --accent:#3563f0; --accent-2:#2447c7; --accent-soft:rgba(53,99,240,.12); --on-accent:#ffffff;
  --good:#16834a; --good-soft:rgba(22,131,74,.12);
  --warn:#a26500; --warn-soft:rgba(162,101,0,.12);
  --over:#cf222e; --over-soft:rgba(207,34,46,.10);
  --c-fixed:#5a6ee0; --c-living:#139770; --c-life:#9657cf; --c-beauty:#d5588a; --c-save:#c4820f;
  --shadow:0 12px 32px -14px rgba(30,35,80,.28);
  --shadow-lg:0 24px 60px -18px rgba(30,35,80,.38);
  --scrim:rgba(18,20,40,.28);
  --toast-link:#a9bfff;
  --sheet:rgba(248,249,253,.94);
  --r-lg:26px; --r:20px; --r-sm:14px;
  --blur:blur(26px) saturate(180%);
  --font:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --tabbar-h:66px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#07080d;
    --blob1:#127a70; --blob2:#4b3bb5; --blob3:#9a4a2c; --blob4:#1d4f9c;
    --blob-op:.62;
    --glass:rgba(30,32,46,.52);
    --glass-strong:rgba(22,24,36,.82);
    --glass-edge:rgba(255,255,255,.09);
    --glass-hi:rgba(255,255,255,.12);
    --ink:#f2f3f8; --ink-2:#c4c7d6; --muted:#8e92a8;
    --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
    --fill:rgba(255,255,255,.06); --fill-2:rgba(255,255,255,.11);
    --accent:#7196ff; --accent-2:#94b0ff; --accent-soft:rgba(113,150,255,.18); --on-accent:#0a1233;
    --good:#43d087; --good-soft:rgba(67,208,135,.15);
    --warn:#f2b74c; --warn-soft:rgba(242,183,76,.15);
    --over:#ff6f6f; --over-soft:rgba(255,111,111,.15);
    --c-fixed:#8c9bff; --c-living:#45d3a5; --c-life:#c396f0; --c-beauty:#f592b9; --c-save:#f0b750;
    --shadow:0 12px 32px -14px rgba(0,0,0,.8);
    --shadow-lg:0 24px 60px -18px rgba(0,0,0,.9);
    --scrim:rgba(0,0,0,.5);
    --toast-link:#2447c7;
    --sheet:rgba(20,22,32,.94);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#07080d;
  --blob1:#127a70; --blob2:#4b3bb5; --blob3:#9a4a2c; --blob4:#1d4f9c;
  --blob-op:.62;
  --glass:rgba(30,32,46,.52);
  --glass-strong:rgba(22,24,36,.82);
  --glass-edge:rgba(255,255,255,.09);
  --glass-hi:rgba(255,255,255,.12);
  --ink:#f2f3f8; --ink-2:#c4c7d6; --muted:#8e92a8;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --fill:rgba(255,255,255,.06); --fill-2:rgba(255,255,255,.11);
  --accent:#7196ff; --accent-2:#94b0ff; --accent-soft:rgba(113,150,255,.18); --on-accent:#0a1233;
  --good:#43d087; --good-soft:rgba(67,208,135,.15);
  --warn:#f2b74c; --warn-soft:rgba(242,183,76,.15);
  --over:#ff6f6f; --over-soft:rgba(255,111,111,.15);
  --c-fixed:#8c9bff; --c-living:#45d3a5; --c-life:#c396f0; --c-beauty:#f592b9; --c-save:#f0b750;
  --shadow:0 12px 32px -14px rgba(0,0,0,.8);
  --shadow-lg:0 24px 60px -18px rgba(0,0,0,.9);
  --scrim:rgba(0,0,0,.5);
  --toast-link:#2447c7;
  --sheet:rgba(20,22,32,.94);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{min-height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-.02em}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0}
input,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:10px}
svg{display:block}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important; transition:none !important}}

/* ---------- ambient background ---------- */
.bg{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:var(--blob-op); will-change:transform}
.b1{width:62vmax; height:62vmax; left:-20vmax; top:-24vmax; background:var(--blob1); animation:drift1 26s ease-in-out infinite alternate}
.b2{width:54vmax; height:54vmax; right:-22vmax; top:-8vmax; background:var(--blob2); animation:drift2 30s ease-in-out infinite alternate}
.b3{width:50vmax; height:50vmax; left:10vmax; bottom:-28vmax; background:var(--blob3); animation:drift3 34s ease-in-out infinite alternate}
.b4{width:36vmax; height:36vmax; right:4vmax; bottom:-6vmax; background:var(--blob4); animation:drift1 28s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(8vmax,6vmax) scale(1.08)}}
@keyframes drift2{to{transform:translate(-7vmax,9vmax) scale(.94)}}
@keyframes drift3{to{transform:translate(6vmax,-7vmax) scale(1.05)}}

/* ---------- glass primitive ---------- */
.glass{
  position:relative;
  background:var(--glass);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow);
}
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 38%);
  mix-blend-mode:soft-light;
}

/* ---------- app shell ---------- */
.app{position:relative; z-index:1; min-height:100vh}
.side{display:none}
.main{max-width:760px; margin:0 auto; padding-inline:16px; padding-block:0 calc(var(--tabbar-h) + 44px + env(safe-area-inset-bottom,0px))}

.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  display:flex; align-items:center; gap:10px; padding:10px 0 8px;
}
.topbar-inner{
  flex:1; display:flex; align-items:center; gap:10px;
  padding:6px 6px 6px 12px; border-radius:999px;
  background:var(--glass-strong);
}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:17px; letter-spacing:-.02em; margin-right:auto}
.brand-mark{width:30px; height:30px; border-radius:10px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg,var(--blob1),var(--accent) 60%,var(--blob2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.brand-mark svg{width:17px; height:17px}
.monthpill{display:flex; align-items:center; gap:0; border-radius:999px; background:var(--fill); padding:2px}
.monthpill button{width:34px; height:34px; border-radius:999px; display:grid; place-items:center; color:var(--ink-2)}
.monthpill button:hover{background:var(--fill-2)}
.monthpill button svg{width:16px; height:16px}
.monthpill .mlabel{width:auto; min-width:78px; text-align:center; font-weight:700; font-size:13.5px; padding:0 2px; height:34px; border-radius:999px}
.monthpill .mlabel.away{color:var(--accent)}

/* ---------- views ---------- */
.view{animation:viewIn .35s cubic-bezier(.2,.9,.3,1) both}
@keyframes viewIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.vhead{padding:14px 4px 16px}
.vhead h1{font-size:30px; font-weight:800; line-height:1.08}
.vhead p{color:var(--muted); margin-top:5px; font-size:14px; max-width:52ch}
.stack{display:flex; flex-direction:column; gap:14px}
.card{border-radius:var(--r); padding:18px}
.card.tight{padding:6px}
.sec{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:10px 4px 2px}
.sec h2{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.sec .link{font-size:13.5px; font-weight:700; color:var(--accent); padding:4px 2px}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.num{font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* hero */
.hero{border-radius:var(--r-lg); padding:20px; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center}
.hero .k{font-size:13px; font-weight:700; color:var(--muted)}
.hero .big{font-size:clamp(34px,10vw,46px); font-weight:800; letter-spacing:-.035em; line-height:1.02; margin-top:6px}
.hero .big.over{color:var(--over)}
.hero .meta{margin-top:8px; font-size:13.5px; color:var(--ink-2)}
.ring{width:96px; height:96px; position:relative}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring .trk{stroke:var(--fill-2)}
.ring .val{stroke:var(--accent); transition:stroke-dashoffset .6s cubic-bezier(.2,.9,.3,1)}
.ring.over .val{stroke:var(--over)}
.ring .lbl{position:absolute; inset:0; display:grid; place-items:center; text-align:center; font-weight:800; font-size:18px; line-height:1}
.ring .lbl small{display:block; font-size:10.5px; font-weight:700; color:var(--muted); margin-top:3px; letter-spacing:.02em}
.hero-cta{grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap}

.minis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.mini{border-radius:var(--r-sm); padding:13px 13px 12px}
.mini .k{font-size:11.5px; font-weight:700; color:var(--muted)}
.mini .v{font-size:17px; font-weight:800; margin-top:4px; letter-spacing:-.02em}
.mini .n{font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.3}
@media (max-width:380px){ .mini .v{font-size:15px} }

.banner{border-radius:var(--r); padding:14px 16px; display:flex; align-items:center; gap:12px}
.banner .t{flex:1; font-size:14px}
.banner .t b{display:block}

/* group tiles */
.gtiles{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.gtile{border-radius:var(--r); padding:15px; text-align:left; display:flex; flex-direction:column; gap:10px; min-height:118px; transition:transform .15s ease}
.gtile:active{transform:scale(.98)}
.gtile .top{display:flex; align-items:center; gap:8px}
.dot{width:9px; height:9px; border-radius:99px; background:var(--gc,var(--accent)); flex:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--gc,var(--accent)) 22%, transparent)}
.gtile .nm{font-weight:700; font-size:14px}
.gtile .fig{font-size:18px; font-weight:800; letter-spacing:-.02em; margin-top:auto}
.gtile .fig span{font-size:12.5px; font-weight:600; color:var(--muted)}
.bar{height:6px; border-radius:99px; background:var(--fill-2); overflow:hidden}
.bar i{display:block; height:100%; width:0; border-radius:99px; background:var(--gc,var(--accent)); transition:width .5s cubic-bezier(.2,.9,.3,1)}
.bar.over i{background:var(--over)}
.bar.warn i{background:var(--warn)}
.bar.good i{background:var(--good)}

/* lists */
.list{border-radius:var(--r); overflow:hidden}
.li{display:flex; align-items:center; gap:12px; width:100%; padding:14px 16px; text-align:left; position:relative}
.li + .li::before{content:""; position:absolute; top:0; left:16px; right:0; height:1px; background:var(--line)}
button.li:hover{background:var(--fill)}
.li .ic{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none; background:var(--accent-soft); color:var(--accent)}
.li .ic svg{width:17px; height:17px}
.li .body{flex:1; min-width:0}
.li .t1{font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.li .t2{font-size:12.5px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.li .end{text-align:right; flex:none}
.li .end .a{font-weight:800; font-size:15px}
.li .end .b{font-size:12px; color:var(--muted)}
.li .chev{color:var(--muted); flex:none}
.li .chev svg{width:16px; height:16px}
.li.disabled{opacity:.62; cursor:default}
.tag{font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:99px; background:var(--fill-2); color:var(--muted)}
.tag.over{background:var(--over-soft); color:var(--over)}
.tag.warn{background:var(--warn-soft); color:var(--warn)}
.tag.good{background:var(--good-soft); color:var(--good)}
.tag.accent{background:var(--accent-soft); color:var(--accent)}

/* category rows */
.catrow{display:grid; grid-template-columns:1fr auto; gap:6px 12px; width:100%; padding:14px 16px; text-align:left; position:relative}
.catrow + .catrow::before{content:""; position:absolute; top:0; left:16px; right:0; height:1px; background:var(--line)}
.catrow:hover{background:var(--fill)}
.catrow .nm{font-weight:700; font-size:15px; display:flex; align-items:center; gap:7px; min-width:0}
.catrow .nm span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.catrow .amt{text-align:right; font-weight:800; font-size:15px; white-space:nowrap}
.catrow .amt span{font-weight:600; color:var(--muted); font-size:12.5px}
.catrow .bar{grid-column:1/-1}
.catrow .st{grid-column:1/-1; display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted)}
.catrow .st .s-over{color:var(--over); font-weight:700}
.catrow .st .s-warn{color:var(--warn); font-weight:700}
.catrow .st .s-good{color:var(--good); font-weight:700}
.catrow .st .hint{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}

.ghead{display:flex; align-items:center; gap:10px; padding:16px 16px 6px}
.ghead h3{font-size:17px; font-weight:800; flex:1}
.ghead .gt{font-size:12.5px; color:var(--muted); font-weight:600; text-align:right}
.ghint{padding:0 16px 8px; font-size:12.5px; color:var(--muted); line-height:1.45}
.gfoot{padding:6px 10px 10px}
.addbtn{display:flex; align-items:center; gap:8px; padding:10px 8px; font-weight:700; font-size:14px; color:var(--accent); border-radius:12px}
.addbtn:hover{background:var(--accent-soft)}
.addbtn svg{width:16px; height:16px}

.chips{display:flex; gap:8px; overflow-x:auto; padding:2px 4px 6px; margin:0 -16px; padding-inline:16px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:99px; font-weight:700; font-size:13.5px; color:var(--ink-2);
  background:var(--glass); border:1px solid var(--glass-edge); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.chip.on{background:var(--ink); color:var(--bg); border-color:transparent}
.chip .dot{box-shadow:none; width:8px; height:8px}

.switchrow{display:flex; align-items:center; gap:14px; padding:12px 16px; margin:0 0 4px}
.switchrow .t{flex:1; font-size:13.5px; color:var(--ink-2); line-height:1.4}
.switchrow .t b{display:block; color:var(--ink); font-size:14.5px}
.switch{position:relative; width:51px; height:31px; flex:none}
.switch input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:2}
.switch .tr{position:absolute; inset:0; border-radius:99px; background:var(--fill-2); transition:background .2s}
.switch .th{position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:99px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .25s cubic-bezier(.2,.9,.3,1)}
.switch input:checked ~ .tr{background:var(--good)}
.switch input:checked ~ .tr .th{transform:translateX(20px)}
.switch input:focus-visible ~ .tr{outline:2px solid var(--accent); outline-offset:2px}

/* goals */
.goalcard{border-radius:var(--r); padding:16px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; text-align:left; width:100%}
.goalcard .ring{width:68px; height:68px}
.goalcard .ring .val{stroke:var(--good)}
.goalcard .ring .lbl{font-size:15px}
.goalcard .gbody{display:flex; flex-direction:column; min-width:0}
.goalcard .gh{font-size:16px; font-weight:800; letter-spacing:-.02em}
.goalcard .w{font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.35}
.goalcard .f{margin-top:8px; font-weight:800; font-size:15px}
.goalcard .f span{font-weight:600; color:var(--muted); font-size:12.5px}
.goalcard .eta{font-size:12px; color:var(--ink-2); margin-top:2px}

.split{display:flex; align-items:center; gap:10px; padding:10px 0}
.split + .split{border-top:1px solid var(--line)}
.split .nm{flex:1; font-weight:700; font-size:14px; min-width:0}
.split .pc{font-size:12.5px; color:var(--muted); font-weight:700}
.split .am{font-weight:800; min-width:64px; text-align:right}
.stackbar{display:flex; height:10px; border-radius:99px; overflow:hidden; background:var(--fill-2); gap:2px}
.stackbar i{display:block; height:100%}

/* insights */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.stat{border-radius:var(--r-sm); padding:14px}
.stat .k{font-size:12px; font-weight:700; color:var(--muted)}
.stat .v{font-size:24px; font-weight:800; letter-spacing:-.03em; margin-top:4px}
.stat .n{font-size:12px; color:var(--muted); margin-top:2px; line-height:1.35}
.chart{width:100%; height:auto; overflow:visible}
.chart text{fill:var(--muted); font-family:var(--font); font-size:10.5px; font-weight:700}
.chart .now-l{fill:var(--accent)}
.chart .gridl{stroke:var(--line); stroke-width:1}
.chart .planl{stroke:var(--ink-2); stroke-width:1.25; stroke-dasharray:4 4; opacity:.6}
.chart .b{fill:var(--accent); opacity:.85; cursor:pointer; transition:opacity .15s}
.chart .b:hover{opacity:1}
.chart .b.over{fill:var(--over)}
.chart .b.empty{fill:var(--fill-2); opacity:1}
.chart .b.now{opacity:1}
.chart-tip{font-size:12.5px; color:var(--ink-2); margin-top:8px; min-height:18px}
.brk{display:flex; flex-direction:column; gap:12px}
.brk .r{display:grid; grid-template-columns:1fr auto; gap:5px 10px; align-items:center}
.brk .r .n{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px}
.brk .r .p{font-weight:800; font-size:14px}
.brk .r .p span{color:var(--muted); font-weight:600; font-size:12px; margin-left:6px}
.brk .r .bar{grid-column:1/-1}
textarea.notes{width:100%; min-height:110px; resize:vertical; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--fill); padding:12px 14px; line-height:1.5; font-size:16px}
textarea.notes:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}

/* more / notes */
details.note{border-top:1px solid var(--line)}
details.note:first-child{border-top:0}
details.note summary{list-style:none; display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; font-weight:700; font-size:14.5px}
details.note summary::-webkit-details-marker{display:none}
details.note summary .c{margin-left:auto; color:var(--muted); transition:transform .2s}
details.note summary .c svg{width:16px; height:16px}
details.note[open] summary .c{transform:rotate(90deg)}
details.note .nb{padding:0 16px 16px; color:var(--ink-2); font-size:14px; line-height:1.6; max-width:66ch}
.code{font-variant-numeric:tabular-nums; background:var(--fill-2); padding:1px 6px; border-radius:6px; font-weight:700; white-space:nowrap}
.syncline{display:flex; align-items:center; gap:10px; padding:14px 16px; font-size:13.5px; color:var(--ink-2)}
.syncline .sd{width:8px; height:8px; border-radius:99px; background:var(--good); box-shadow:0 0 0 4px var(--good-soft); flex:none}
.syncline .sd.local{background:var(--warn); box-shadow:0 0 0 4px var(--warn-soft)}
.foot{text-align:center; color:var(--muted); font-size:12px; padding:22px 0 4px}

/* ---------- buttons & fields ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 18px; border-radius:14px; font-weight:800; font-size:15px; transition:transform .12s ease, background .15s ease, opacity .15s}
.btn:active{transform:scale(.97)}
.btn svg{width:17px; height:17px}
.btn.primary{background:var(--accent); color:var(--on-accent); box-shadow:0 10px 24px -12px var(--accent)}
.btn.primary:hover{background:var(--accent-2)}
.btn.soft{background:var(--accent-soft); color:var(--accent)}
.btn.plain{background:var(--fill-2); color:var(--ink)}
.btn.danger{background:var(--over-soft); color:var(--over)}
.btn.block{width:100%}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none}
.btn.sm{min-height:36px; padding:0 13px; font-size:13.5px; border-radius:11px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:12.5px; font-weight:700; color:var(--muted)}
.input{width:100%; min-height:48px; border-radius:14px; border:1px solid var(--line-2); background:var(--fill); padding:0 14px; font-size:16px; font-weight:600}
.input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); background:var(--glass-strong)}
.input:disabled{opacity:.55}
.money{position:relative}
.money::before{content:"£"; position:absolute; left:14px; top:50%; transform:translateY(-50%); font-weight:700; color:var(--muted); pointer-events:none}
.money .input{padding-left:30px}
.money.big .input{min-height:64px; font-size:28px; font-weight:800; letter-spacing:-.02em; padding-left:40px}
.money.big::before{font-size:24px; left:16px}
.pct{position:relative}
.pct::after{content:"%"; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-weight:700; color:var(--muted); pointer-events:none}
.pct .input{padding-right:28px; text-align:right}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.quick{display:flex; gap:8px; flex-wrap:wrap}
.quick button{padding:9px 14px; border-radius:99px; background:var(--fill-2); font-weight:800; font-size:13.5px}
.quick button:active{transform:scale(.96)}

/* ---------- tab bar / sidebar ---------- */
.tabbar{
  position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); z-index:40;
  height:var(--tabbar-h); border-radius:24px; display:flex; align-items:stretch; padding:6px;
  background:var(--glass-strong); max-width:560px; margin:0 auto;
}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:18px; font-size:10.5px; font-weight:800; color:var(--muted); transition:color .2s, background .2s}
.tab svg{width:22px; height:22px}
.tab.on{color:var(--accent); background:var(--accent-soft)}
.fab{
  position:fixed; right:18px; bottom:calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom,0px)); z-index:41;
  height:54px; padding:0 20px 0 16px; border-radius:99px; display:flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--on-accent); font-weight:800; font-size:15px;
  box-shadow:0 16px 34px -12px var(--accent), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s ease, opacity .2s;
}
.fab svg{width:20px; height:20px}
.fab:active{transform:scale(.95)}
.fab[hidden]{display:none}

@media (min-width:900px){
  .app{display:grid; grid-template-columns:260px 1fr; gap:0}
  .side{display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; padding:20px 14px}
  .side-inner{flex:1; border-radius:var(--r-lg); padding:16px 12px; display:flex; flex-direction:column; gap:4px}
  .side .brand{padding:4px 8px 16px; margin:0}
  .snav{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:14px; font-weight:700; font-size:14.5px; color:var(--ink-2); text-align:left; width:100%}
  .snav svg{width:20px; height:20px}
  .snav:hover{background:var(--fill)}
  .snav.on{background:var(--accent-soft); color:var(--accent)}
  .snav.soon{opacity:.55; cursor:default}
  .snav.soon .tag{margin-left:auto}
  .side .sl{font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:18px 12px 6px}
  .main{padding-block:0 60px; width:100%; max-width:820px; padding-inline:28px}
  .topbar .brand{display:none}
  .topbar-inner{justify-content:flex-end; background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding-inline:0}
  .topbar-inner::after{display:none}
  .monthpill{background:var(--glass-strong); border:1px solid var(--glass-edge); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
  .tabbar{display:none}
  .fab{right:32px; bottom:32px}
  .vhead h1{font-size:36px}
  .gtiles{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(4,1fr)}
}

/* ---------- sheet ---------- */
.scrim{position:fixed; inset:0; z-index:60; background:var(--scrim); opacity:0; transition:opacity .25s; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px)}
.scrim.show{opacity:1}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:61; max-height:92vh; display:flex; flex-direction:column;
  border-radius:28px 28px 0 0; background:var(--sheet); padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(105%); transition:transform .38s cubic-bezier(.2,.9,.25,1);
  max-width:620px; margin:0 auto;
}
.sheet.show{transform:none}
.grab{width:40px; height:5px; border-radius:99px; background:var(--line-2); margin:9px auto 2px; flex:none}
.sh-head{display:flex; align-items:center; gap:10px; padding:8px 18px 10px; flex:none}
.sh-head h2{font-size:19px; font-weight:800; flex:1; min-width:0}
.sh-head .x{width:34px; height:34px; border-radius:99px; background:var(--fill-2); display:grid; place-items:center; flex:none}
.sh-head .x svg{width:16px; height:16px}
.sh-body{overflow-y:auto; padding:4px 18px 22px; display:flex; flex-direction:column; gap:16px; overscroll-behavior:contain}
.sh-sum{display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
.sh-sum .big{font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1}
.sh-sum .sub{font-size:13px; color:var(--muted); margin-top:5px}
.divider{height:1px; background:var(--line); margin:2px 0}
.disclose{font-weight:800; font-size:14px; color:var(--ink-2); display:flex; align-items:center; gap:8px; padding:4px 0}
.disclose svg{width:15px; height:15px; transition:transform .2s}
.disclose[aria-expanded="true"] svg{transform:rotate(90deg)}
.pick{display:flex; flex-direction:column; gap:14px}
.pick h4{margin:0 0 8px; font-size:12.5px; font-weight:800; color:var(--muted); display:flex; align-items:center; gap:8px}
.pick .opts{display:flex; flex-wrap:wrap; gap:8px}
.pick .opts button{padding:10px 14px; border-radius:14px; background:var(--fill-2); font-weight:700; font-size:14px; text-align:left}
.pick .opts button:hover{background:var(--accent-soft); color:var(--accent)}
.search{position:relative}
.search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted)}
.search .input{padding-left:40px}
@media (min-width:900px){
  .sheet{top:50%; bottom:auto; left:50%; right:auto; width:min(520px,calc(100vw - 48px)); border-radius:28px; max-height:86vh;
    transform:translate(-50%,-46%) scale(.97); opacity:0; transition:transform .3s cubic-bezier(.2,.9,.25,1), opacity .2s; padding-bottom:0}
  .sheet.show{transform:translate(-50%,-50%); opacity:1}
  .grab{display:none}
  .sh-head{padding-top:18px}
}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar-h) + 88px + env(safe-area-inset-bottom,0px)); z-index:70;
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:14px; padding:12px 12px 12px 18px; border-radius:18px;
  background:var(--ink); color:var(--bg); font-weight:700; font-size:14px; box-shadow:var(--shadow-lg);
  transition:transform .3s cubic-bezier(.2,.9,.3,1), opacity .2s; width:max-content; max-width:calc(100vw - 32px);
}
.toast.show{transform:translate(-50%,0); opacity:1; pointer-events:auto}
.toast button{color:var(--toast-link); font-weight:800; padding:6px 10px; border-radius:10px}
@media (min-width:900px){ .toast{bottom:36px; left:calc(50% + 130px)} }
.empty{padding:26px 18px; text-align:center; color:var(--muted); font-size:14px}
.empty b{display:block; color:var(--ink); font-size:16px; margin-bottom:4px}