:root{
  --f-display:"Bricolage Grotesque","Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --shell:560px;

  --bg:#E7ECEA; --surface:#FBFCFB; --sunk:#DBE3E0; --hover:#F0F4F2;
  --edge:#BFCBC7; --ink:#15232A; --ink-2:#43545A; --ink-3:#66787D;
  --line:#D0DAD7; --line-strong:#A6B5B1; --ink-edge:#000000;
  --focus:#2463C7; --miss:#B4533E;

  --sang:#C9821A; --sang-soft:#F4E2C3; --on-sang:#1D1404; --sang-edge:#9A6210;
  --chieu:#2B7A70; --chieu-soft:#D0E7E2; --on-chieu:#FFFFFF; --chieu-edge:#1D5A52;
  --toi:#4A56A0; --toi-soft:#DDE0F3; --on-toi:#FFFFFF; --toi-edge:#343E7D;
  --walk:#3A8752; --walk-soft:#D3EBD9; --on-walk:#FFFFFF; --walk-edge:#28643B;
  --push:#C4463A; --push-soft:#F5D8D3; --on-push:#FFFFFF; --push-edge:#943126;
  --pull:#6B4FB2; --pull-soft:#E3DBF5; --on-pull:#FFFFFF; --pull-edge:#4D378A;

  --flame:#EC5B1E; --gold:#C98E0C; --gold-soft:#F6E7BC; --gold-edge:#8F6405; --on-gold:#1D1404; --steel:#4F7585;
  --fl0o:#B5C1BD; --fl0i:#DBE3E0; --fl1o:#F29A1F; --fl1i:#FFD66B;
  --fl2o:#EC5B1E; --fl2i:#FFB23E; --fl3o:#D8284F; --fl3i:#FF8A3D;
  --fl4o:#3A6BFF; --fl4i:#A7D3FF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C1315; --surface:#152023; --sunk:#213035; --hover:#1A2629;
    --edge:#060B0D; --ink:#E6EDEB; --ink-2:#AAB7B4; --ink-3:#7D8C89;
    --line:#26343A; --line-strong:#3D4E53; --ink-edge:#8E9C99; --focus:#7FAEFF; --miss:#E08468;
    --sang:#EEAA42; --sang-soft:#3A2C14; --on-sang:#1D1404; --sang-edge:#A8741F;
    --chieu:#4DB3A4; --chieu-soft:#15332F; --on-chieu:#06201C; --chieu-edge:#2D7C71;
    --toi:#8E98E8; --toi-soft:#232846; --on-toi:#0E1233; --toi-edge:#5A64B5;
    --walk:#5DBB7A; --walk-soft:#173323; --on-walk:#062312; --walk-edge:#3A8453;
    --push:#F0735F; --push-soft:#3A1F1B; --on-push:#2A0B06; --push-edge:#B04A3A;
    --pull:#A58BEB; --pull-soft:#2A2344; --on-pull:#1A0F33; --pull-edge:#7458C0;
    --flame:#FF7A33; --gold:#F0BE3C; --gold-soft:#3A3014; --gold-edge:#A8821F; --on-gold:#1D1404; --steel:#86A9B8;
    --fl0o:#3D4E53; --fl0i:#26343A;
  }
}
:root[data-theme="dark"]{
  --bg:#0C1315; --surface:#152023; --sunk:#213035; --hover:#1A2629;
  --edge:#060B0D; --ink:#E6EDEB; --ink-2:#AAB7B4; --ink-3:#7D8C89;
  --line:#26343A; --line-strong:#3D4E53; --ink-edge:#8E9C99; --focus:#7FAEFF; --miss:#E08468;
  --sang:#EEAA42; --sang-soft:#3A2C14; --on-sang:#1D1404; --sang-edge:#A8741F;
  --chieu:#4DB3A4; --chieu-soft:#15332F; --on-chieu:#06201C; --chieu-edge:#2D7C71;
  --toi:#8E98E8; --toi-soft:#232846; --on-toi:#0E1233; --toi-edge:#5A64B5;
  --walk:#5DBB7A; --walk-soft:#173323; --on-walk:#062312; --walk-edge:#3A8453;
  --push:#F0735F; --push-soft:#3A1F1B; --on-push:#2A0B06; --push-edge:#B04A3A;
  --pull:#A58BEB; --pull-soft:#2A2344; --on-pull:#1A0F33; --pull-edge:#7458C0;
  --flame:#FF7A33; --gold:#F0BE3C; --gold-soft:#3A3014; --gold-edge:#A8821F; --on-gold:#1D1404; --steel:#86A9B8;
  --fl0o:#3D4E53; --fl0i:#26343A;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button,label,summary{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.chk-ic{width:15px;height:15px;fill:none;stroke:var(--on);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ── Khung app ── */
.shell{max-width:var(--shell);margin:0 auto;min-height:100dvh;background:var(--bg)}
@media (min-width:600px){.shell{border-inline:1px solid var(--line)}}
.content{padding:6px 16px calc(100px + env(safe-area-inset-bottom));display:grid;gap:0}
.content > section{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.content > section > *{min-width:0}

.appbar{position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top);background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.appbar-in{display:flex;align-items:center;gap:10px;padding:8px 16px;min-height:60px}
.lvhex{position:relative;width:42px;height:46px;flex:none;display:grid;place-items:center;border:0;background:none;padding:0}
.lvhex svg{position:absolute;inset:0;width:100%;height:100%}
.lvhex b{position:relative;font:820 17px/1 var(--f-display);font-variant-numeric:tabular-nums}
.appbar-xp{flex:1;min-width:0;display:grid;gap:5px}
.appbar-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rank{font:720 15px/1.1 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar-row .meta{font-size:11px;white-space:nowrap}
.xpbar{height:10px;border-radius:6px;background:var(--sunk);overflow:hidden}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sang),var(--chieu) 55%,var(--toi));border-radius:6px;transition:width .6s cubic-bezier(.3,.7,.2,1)}
.pill{display:inline-flex;align-items:center;gap:3px;height:38px;padding:0 10px 0 7px;border-radius:19px;background:var(--surface);border:1.5px solid var(--line);flex:none}
.pill b{font:800 17px/1 var(--f-display);font-variant-numeric:tabular-nums}
.pill .flame{width:24px;height:24px}
.shield-pill{color:var(--line-strong)}
.shield-pill .ic{width:20px;height:20px}
.shield-pill b{color:var(--ink)}
.shield-pill.on{color:var(--steel)}
.shield-pill.on .ic{fill:color-mix(in srgb,var(--steel) 25%,transparent)}

.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--shell);z-index:30;display:grid;grid-template-columns:repeat(5,1fr);padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-top:1px solid var(--line)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;padding:4px 0 2px;min-height:52px;color:var(--ink-3);font:500 11px/1.1 var(--f-body)}
.tab .ic{width:54px;height:30px;padding:4px 16px;border-radius:15px;transition:background .2s}
.tab[aria-current="page"]{color:var(--ink);font-weight:650}
.tab[aria-current="page"] .ic{background:var(--sunk);stroke-width:2.3}
.tab-dot{position:absolute;top:4px;left:calc(50% + 12px);width:9px;height:9px;border-radius:50%;background:var(--miss);border:2px solid var(--surface)}

/* ── Chữ ── */
.eyebrow{font:500 11px/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.meta{font:400 12px/1.45 var(--f-mono);color:var(--ink-3)}
.large-title{font:800 34px/1.05 var(--f-display);letter-spacing:-.025em;font-stretch:80%;font-variation-settings:"wdth" 80}
.large-title span{color:var(--ink-3);font-weight:520}
.sub{font-size:15px;color:var(--ink-2)}
.caption{font-size:13px;color:var(--ink-3);line-height:1.5}
.caption.top{margin-top:-8px}
.hint{font-size:12.5px;color:var(--ink-3)}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.sec-head h2{font:740 20px/1.15 var(--f-display);letter-spacing:-.01em}
.sec-head.big{margin-top:18px}
.sec-head.big h2{font-size:23px}
.sub-head{font:600 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.page-head{padding-top:14px;display:grid;gap:2px}
.stack{display:grid;gap:14px}
.card{background:var(--surface);border:2px solid var(--line);border-radius:20px;box-shadow:0 3px 0 var(--edge)}
.pad{padding:16px}
.good{color:var(--walk);font-weight:650}
.empty-row{padding:14px 16px;color:var(--ink-3);font-size:14px}

/* ── Nút ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font-weight:600;font-size:14.5px;padding:10px 16px;border-radius:13px;border:2px solid var(--line-strong);background:var(--surface);color:var(--ink);white-space:nowrap}
.btn:active:not(:disabled){background:var(--sunk)}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.ghost:active:not(:disabled){background:var(--sunk)}
.btn.small{min-height:36px;padding:6px 12px;font-size:13.5px;border-radius:11px}
.btn.danger{color:var(--miss)}
.btn.armed{background:var(--miss)!important;border-color:var(--miss)!important;color:#fff!important}
.btn.wide,.btn3d.wide{width:100%}
.grow{flex:1}
.btn3d{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border:0;border-radius:15px;padding:12px 18px;background:var(--c,var(--ink));color:var(--on,var(--bg));font:700 16px/1.15 var(--f-body);box-shadow:0 4px 0 var(--ce,var(--ink-edge));transition:transform .08s,box-shadow .08s;margin-bottom:4px;white-space:nowrap}
.btn3d:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--ce,var(--ink-edge))}
.btn3d:disabled{opacity:.5;cursor:default}
.btn3d.quiet{background:var(--cs,var(--sunk));color:var(--ink);box-shadow:0 4px 0 var(--line-strong)}
.btn3d.gold{--c:var(--gold);--ce:var(--gold-edge);--on:var(--on-gold)}
.btn3d .ic{width:20px;height:20px}
.btn3d.armed{background:var(--miss);box-shadow:0 4px 0 #7a2c1f;color:#fff}
.xp-tag{font:600 12px/1 var(--f-mono);padding:4px 6px;border-radius:6px;background:rgba(255,255,255,.24)}
.icon-btn{width:44px;height:44px;border-radius:14px;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink);box-shadow:0 2px 0 var(--edge)}
.icon-btn:disabled{opacity:.35;cursor:default}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nav-cluster{display:flex;align-items:center;gap:6px}

/* ── Ngọn lửa ── */
.flame{width:24px;height:24px;flex:none;overflow:visible}
.flame .fo{fill:var(--fo)}
.flame .fi{fill:var(--fi)}
.flame.t0{--fo:var(--fl0o);--fi:var(--fl0i)}
.flame.t1{--fo:var(--fl1o);--fi:var(--fl1i)}
.flame.t2{--fo:var(--fl2o);--fi:var(--fl2i)}
.flame.t3{--fo:var(--fl3o);--fi:var(--fl3i)}
.flame.t4{--fo:var(--fl4o);--fi:var(--fl4i)}
.flame.dim{filter:grayscale(.85);opacity:.55}
.flame.tiny{width:12px;height:12px}
@media (prefers-reduced-motion: no-preference){
  .flame:not(.t0):not(.dim) .fi{transform-origin:12px 20px;animation:flick 1.8s ease-in-out infinite}
}
@keyframes flick{0%,100%{transform:scale(1)}50%{transform:scale(1.08,.94)}}

/* ── Hôm nay ── */
.day-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding-top:14px}
.day-head-text{min-width:0}
.meter{padding:14px 16px 16px;display:grid;gap:12px}
.meter-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.meter-count{font:500 14px/1 var(--f-mono);color:var(--ink-3)}
.meter-count b{font:820 30px/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.meter-text{font-size:14px;color:var(--ink-2);line-height:1.35}
.meter-text b{color:var(--ink)}
.meter-xp{font:500 12px/1 var(--f-mono);color:var(--ink-3);text-align:right}
.meter-xp b{display:block;font:800 19px/1.1 var(--f-display);color:var(--ink)}
.mult{display:inline-block;margin-top:3px;padding:2px 5px;border-radius:5px;background:var(--gold-soft);color:var(--ink);font-weight:600}
.meter-bar{position:relative;height:14px;border-radius:8px;background:var(--sunk);margin-right:12px}
.meter-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--fl1o),var(--flame));transition:width .5s cubic-bezier(.3,.7,.2,1)}
.meter-mark,.meter-end{position:absolute;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:var(--surface);border:2px solid var(--line);display:grid;place-items:center}
.meter-mark{left:50%}
.meter-end{left:100%;color:var(--line-strong)}
.meter-mark .flame{width:17px;height:17px}
.meter-end .ic{width:15px;height:15px}
.meter-mark.on{border-color:var(--flame)}
.meter-end.on{border-color:var(--gold);background:var(--gold);color:var(--surface)}
.meter-end.on .ic{fill:currentColor}

.focus{padding:16px;display:grid;gap:12px;border-color:var(--c,var(--line));box-shadow:0 3px 0 var(--ce,var(--edge))}
.focus.is-empty{border-style:dashed;box-shadow:none}
.focus-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.focus-count{font:500 12px/1 var(--f-mono);color:var(--ink-3);white-space:nowrap}
.focus-count b{font:820 22px/1 var(--f-display);color:var(--ink)}
.formula{font-size:17px;line-height:1.4;color:var(--ink-2)}
.formula strong{color:var(--ink);font-weight:650}
.why{font-size:13.5px;color:var(--ink-2);padding-left:10px;border-left:3px solid var(--cs,var(--sunk))}
.focus-bar{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;height:10px}
.focus-bar i{border-radius:2px;background:var(--sunk)}
.focus-bar i.on{background:var(--c)}

.rest-day{display:flex;gap:12px;align-items:center;padding:14px 16px;color:var(--ink-2);font-size:14px}
.rest-day .ic{width:24px;height:24px;color:var(--walk)}
.rest-day b{color:var(--ink)}
.wcard,.tcard{padding:16px;display:grid;gap:12px;align-content:start}
.wcard.is-boss{border-color:var(--gold);box-shadow:0 3px 0 var(--gold)}
.wcard-head{display:flex;align-items:center;gap:12px;min-width:0}
.wcard-head > div{min-width:0;flex:1}
.wcard-head h3{font:760 20px/1.1 var(--f-display)}
.wicon{width:44px;height:44px;border-radius:14px;background:var(--c);color:var(--on);display:grid;place-items:center;box-shadow:0 3px 0 var(--ce);flex:none}
.wicon .ic{width:23px;height:23px;stroke-width:2.2}
.wicon.mini{width:32px;height:32px;border-radius:10px;box-shadow:0 2px 0 var(--ce)}
.wicon.mini .ic{width:18px;height:18px}
.wbadge{display:inline-flex;align-items:center;gap:4px;font:600 11px/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;padding:6px 9px;border-radius:8px;background:var(--cs);color:var(--ink);white-space:nowrap}
.wbadge.boss{background:var(--gold-soft)}
.wbadge .ic{width:13px;height:13px}
.wgoal{font-size:14.5px;color:var(--ink-2)}
.wgoal b{color:var(--ink)}
.note{font-size:13px;color:var(--ink-2);line-height:1.5}
.wdone{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.big{font:820 36px/1 var(--f-display);letter-spacing:-.02em;color:var(--c);font-variant-numeric:tabular-nums}
.big small{font:500 14px var(--f-mono);color:var(--ink-3);letter-spacing:0}
.wact{display:flex;gap:10px;align-items:center}
.wfoot{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap}
.wstatus b{color:var(--ink);font-family:var(--f-body)}
.boss-count{display:flex;align-items:center;gap:6px}
.boss-count .ic{width:14px;height:14px;color:var(--gold)}
.stepper{display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:15px;background:var(--bg);overflow:hidden;margin-bottom:4px;flex:none}
.step{width:44px;height:46px;border:0;background:transparent;font:600 22px/1 var(--f-body);color:var(--ink)}
.step:active{background:var(--sunk)}
.step-val{min-width:64px;text-align:center;font:800 20px/1 var(--f-display);font-variant-numeric:tabular-nums}
.step-val small{font:500 11px var(--f-mono);color:var(--ink-3)}
.bubbles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding-bottom:3px}
.bubble{aspect-ratio:1;width:100%;max-width:60px;justify-self:center;border-radius:50%;border:3px solid var(--line-strong);background:var(--surface);color:var(--ink-3);font:800 19px/1 var(--f-display);font-variant-numeric:tabular-nums;box-shadow:0 3px 0 var(--edge);display:grid;place-items:center;transition:transform .08s,box-shadow .08s,background .15s;padding:0}
.bubble:disabled{cursor:default}
.bubble.cur{border-color:var(--c);color:var(--ink);box-shadow:0 3px 0 var(--ce)}
.bubble.done{background:var(--c);border-color:var(--c);color:var(--on);box-shadow:0 3px 0 var(--ce)}
.bubble.short{background:var(--cs);color:var(--ink)}
.bubble:not(:disabled):active{transform:translateY(3px);box-shadow:0 0 0 var(--ce)}
@media (prefers-reduced-motion: no-preference){.bubble.cur{animation:pulse 1.6s ease-in-out infinite}}
@keyframes pulse{0%,100%{box-shadow:0 3px 0 var(--ce),0 0 0 0 color-mix(in srgb,var(--c) 45%,transparent)}50%{box-shadow:0 3px 0 var(--ce),0 0 0 8px color-mix(in srgb,var(--c) 0%,transparent)}}
.amrap{display:grid;gap:10px;padding:12px;border-radius:15px;background:var(--cs)}
.amrap p{font-size:14px}

.slot{overflow:hidden}
.slot-head{display:flex;align-items:center;gap:8px;padding:12px 16px 10px;border-bottom:2px solid var(--line)}
.sw{width:12px;height:12px;border-radius:3px;background:var(--c);flex:none;display:inline-block}
.slot-head h2{font:760 20px/1.1 var(--f-display)}
.range{font:400 11.5px/1 var(--f-mono);color:var(--ink-3)}
.chip-now{font:600 10.5px/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;padding:5px 7px;border-radius:7px;background:var(--cs);color:var(--ink)}
.slot-stat{margin-left:auto;font:500 11.5px/1 var(--f-mono);color:var(--ink-3);white-space:nowrap}
.chip-clear{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font:600 11px/1 var(--f-mono);padding:6px 8px;border-radius:8px;background:var(--gold-soft);color:var(--ink);white-space:nowrap}
.chip-clear .ic{width:12px;height:12px;color:var(--gold);fill:currentColor}

.task + .task{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 16px;min-height:56px;position:relative}
.row:active{background:var(--hover)}
.chk{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.box{width:28px;height:28px;border-radius:9px;border:2px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;box-shadow:0 2px 0 var(--edge);transition:background .15s,border-color .15s,transform .1s}
.box .chk-ic{stroke-dasharray:15;stroke-dashoffset:15;transition:stroke-dashoffset .25s .05s}
.chk:checked + .box{background:var(--c);border-color:var(--c);box-shadow:0 2px 0 var(--ce)}
.chk:checked + .box .chk-ic{stroke-dashoffset:0}
.row:active .box{transform:translateY(2px);box-shadow:none}
.chk:focus-visible + .box{outline:2px solid var(--focus);outline-offset:2px}
.chk:disabled + .box{opacity:.45}
.body{display:grid;gap:2px;min-width:0}
.name{font-weight:500;font-size:15.5px;line-height:1.35;overflow-wrap:anywhere}
.chk:checked ~ .body .name{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--line-strong)}
.chk:checked ~ .body .note{display:none}
.stamp{font:500 12px/1.4 var(--f-mono);color:var(--ink-3);padding-top:4px;white-space:nowrap}
.stamp.xp-hint{color:var(--gold);font-weight:600}

details.group{overflow:hidden}
details.group summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;font:720 17px/1.2 var(--f-display);min-height:52px}
details.group summary::-webkit-details-marker{display:none}
details.group summary::after{content:"";width:9px;height:9px;border-right:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);transform:rotate(45deg);margin:-4px 4px 0 auto;transition:transform .2s}
details.group[open] summary::after{transform:rotate(-135deg);margin-top:4px}
details.group summary .meta{font-weight:400}
details.group[open] summary{border-bottom:2px solid var(--line)}

/* ── Tập luyện ── */
.week-plan{padding:12px 10px 10px;display:grid;gap:10px}
.wp-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.wp-day{display:grid;justify-items:center;align-content:start;gap:4px;padding:6px 0;border-radius:12px}
.wp-day.today{background:var(--sunk)}
.wp-name{font:600 11.5px/1 var(--f-mono);color:var(--ink-3)}
.wp-day.today .wp-name{color:var(--ink)}
.wp-ic{width:30px;height:30px;border-radius:10px;background:var(--c);color:var(--on);display:grid;place-items:center}
.wp-ic .ic{width:17px;height:17px}
.wp-rest{font:400 10.5px/30px var(--f-mono);font-style:normal;color:var(--ink-3)}
.wp-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:12.5px;color:var(--ink-2)}
.wp-legend span{display:inline-flex;align-items:center;gap:5px}
.wp-dot{width:10px;height:10px;border-radius:3px;background:var(--c)}
.tstats,.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{display:grid;gap:3px;min-width:0}
.stat .num{font:800 26px/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .num small{font:500 12px var(--f-mono);color:var(--ink-3);letter-spacing:0}
.path-label{margin-bottom:8px}
.path{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:3px;position:relative;align-items:center}
.path::before{content:"";position:absolute;left:4%;right:4%;top:50%;height:4px;border-radius:2px;background:var(--sunk);transform:translateY(-50%)}
.node{position:relative;aspect-ratio:1;max-width:30px;width:100%;justify-self:center;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);display:grid;place-items:center;font:600 9.5px/1 var(--f-mono);color:var(--ink-3)}
.node.done{background:var(--c);border-color:var(--c)}
.node.done .chk-ic{width:62%;height:62%}
.node.cur{border-color:var(--c);border-width:3px;color:var(--ink);box-shadow:0 0 0 3px var(--cs)}
.node.boss{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
.node.boss .ic{width:58%;height:58%}
.node.boss.cur{background:var(--gold);color:var(--surface);box-shadow:0 0 0 4px var(--gold-soft)}
.tnext{display:grid;gap:3px;padding:12px 14px;border-radius:15px;background:var(--cs)}
.tnext p b{font:760 18px/1.25 var(--f-display)}
.tests{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tests li{display:inline-flex;gap:6px;align-items:baseline;padding:5px 9px;border-radius:9px;background:var(--sunk);font-size:13.5px}
.tests .up{font:600 12px var(--f-mono);color:var(--walk)}
.cues{border-top:1px dashed var(--line);padding-top:10px}
.cues summary{font-weight:600;font-size:14.5px;min-height:32px;display:flex;align-items:center}
.cues ul{list-style:disc;padding-left:20px;margin-top:6px;display:grid;gap:4px;font-size:14px;color:var(--ink-2)}
.ladder{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;align-items:end;height:100px}
.lstep{display:grid;grid-template-rows:1fr auto;gap:4px;height:100%;align-items:end}
.lstep i{display:block;height:var(--h);border-radius:6px 6px 3px 3px;background:var(--sunk)}
.lstep span{font:500 10.5px/1 var(--f-mono);color:var(--ink-3);text-align:center}
.lstep.done i{background:color-mix(in srgb,var(--c) 45%,var(--sunk))}
.lstep.cur i{background:var(--c);box-shadow:0 3px 0 var(--ce)}
.lstep.cur span{color:var(--ink);font-weight:600}
.who{display:grid;gap:6px}
.who-top{display:flex;justify-content:space-between;align-items:baseline}
.who-top b{font:760 18px/1 var(--f-display)}
.who-bar{position:relative;height:12px;border-radius:7px;background:var(--sunk)}
.who-bar i{display:block;height:100%;border-radius:7px;background:var(--c)}
.who-mark{position:absolute;left:50%;top:-3px;bottom:-3px;width:3px;border-radius:2px;background:var(--ink)}
.who-lbl{display:grid;grid-template-columns:auto 1fr auto;gap:6px;font:500 10.5px/1.2 var(--f-mono);color:var(--ink-3)}
.who-lbl .mid{text-align:center}

/* ── Streak ── */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;align-items:center;padding:16px;margin-top:14px}
.hero-flame{position:relative;width:92px;height:106px;display:grid;place-items:center}
.hero-flame .flame{position:absolute;inset:0;width:100%;height:100%}
.hero-flame b{position:relative;margin-top:32px;font:840 30px/1 var(--f-display);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25);font-variant-numeric:tabular-nums}
.hero-flame.unlit .flame{filter:grayscale(.8);opacity:.5}
.hero-flame.unlit b{color:var(--ink);text-shadow:none}
.hero-body{display:grid;gap:3px;min-width:0}
.hero-stats{grid-column:1/-1;display:grid;grid-template-columns:auto auto auto minmax(0,1fr);gap:8px 18px;align-items:end;padding-top:12px;border-top:1px solid var(--line)}
.shields{display:flex;gap:4px}
.shield{color:var(--line-strong)}
.shield .ic{width:24px;height:24px}
.shield.on{color:var(--steel)}
.shield.on .ic{fill:color-mix(in srgb,var(--steel) 30%,transparent)}
.mini{display:block;height:8px;border-radius:5px;background:var(--sunk);overflow:hidden;margin-top:6px}
.mini i{display:block;height:100%;border-radius:5px;background:var(--flame)}
.sec-head + #heat{margin-top:12px}
.heat-head,.heat{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.heat-head{margin-bottom:5px;font:500 10.5px/1 var(--f-mono);color:var(--ink-3);text-align:center}
.hm{position:relative;aspect-ratio:1;border-radius:9px;background:var(--sunk);display:grid;place-items:center;max-width:100%}
.hm i{font:500 11px/1 var(--f-mono);font-style:normal;color:var(--ink-3)}
.hm.fire{background:color-mix(in srgb,var(--flame) var(--a,70%),var(--sunk))}
.hm.fire i{color:#fff;font-weight:600}
.hm.fire.perfect{box-shadow:inset 0 0 0 2px var(--gold)}
.hm.shield{background:color-mix(in srgb,var(--steel) 30%,var(--sunk))}
.hm.miss{background:transparent;box-shadow:inset 0 0 0 2px var(--line-strong)}
.hm.today{background:transparent;box-shadow:inset 0 0 0 2px var(--ink)}
.hm.today i{color:var(--ink)}
.hm.rest,.hm.none{opacity:.6}
.hm.future{background:transparent;opacity:.4}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .hm{width:14px;height:14px;aspect-ratio:auto;border-radius:4px}
.legend .mark{width:18px;height:18px;border-radius:5px}
.legend .mark .chk-ic{width:11px;height:11px}
.rule-list{display:grid;gap:14px;padding:14px 16px 16px}
.rule-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.rule-list p{font-size:14px;color:var(--ink-2)}
.rule-list b{display:block;font:720 15.5px/1.3 var(--f-display);color:var(--ink)}
.rule-ic{width:36px;height:36px;border-radius:11px;background:var(--sunk);display:grid;place-items:center;color:var(--walk)}
.rule-ic .flame{width:22px;height:22px}
.rule-ic.steel{color:var(--steel)}
.rule-ic.gold{color:var(--gold)}
.rule-ic .ic{width:20px;height:20px}

.segmented{display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border-radius:13px;background:var(--sunk)}
.segmented button{border:0;background:transparent;min-height:36px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.segmented button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 2px 0 var(--edge)}
.board{overflow:hidden}
.brow{display:grid;grid-template-columns:18px 36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px}
.brow + .brow{border-top:1px solid var(--line)}
.rank-no{font:600 12px/1 var(--f-mono);color:var(--ink-3);text-align:right}
.brow:nth-child(1) .rank-no{color:var(--gold)}
.bicon{width:36px;height:36px;border-radius:11px;background:var(--cs);color:var(--c);display:grid;place-items:center}
.bicon .ic{width:19px;height:19px}
.bname{display:grid;gap:5px;min-width:0}
.bname .name{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip{display:flex;gap:2px}
.strip.wide{gap:3px;margin-top:6px}
.sc{width:8px;height:8px;border-radius:2px;background:var(--sunk);flex:none}
.strip.wide .sc{width:auto;flex:1;height:14px;border-radius:4px}
.sc.done{background:var(--c)}
.sc.miss{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.sc.off{opacity:.45;transform:scale(.6)}
.sc.today{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.sc.pre{background:transparent}
.bcur{display:grid;grid-template-columns:auto auto;align-items:center;justify-items:end;column-gap:2px}
.bcur .flame{width:20px;height:20px}
.bcur b{font:800 20px/1 var(--f-display);font-variant-numeric:tabular-nums}
.bcur .meta{grid-column:1/-1;font-size:10px;white-space:nowrap}

.badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.badge{display:grid;gap:3px;align-content:start;padding:12px}
.badge .bhex{width:40px;height:44px;display:grid;place-items:center;color:var(--line-strong);background:var(--sunk);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);margin-bottom:4px}
.badge .bhex .ic{width:20px;height:20px}
.badge.on .bhex{background:var(--gold);color:var(--surface)}
.badge.on{border-color:var(--gold);box-shadow:0 3px 0 var(--gold)}
.badge b{font:720 14.5px/1.25 var(--f-display)}
.badge .meta{font-size:11px}
.badge .mini i{background:var(--gold)}
.got{font:600 10.5px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-top:2px}

.hcard{padding:16px;display:grid;gap:14px}
.cells{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:4px}
.cell{aspect-ratio:1;border-radius:4px;background:var(--sunk)}
.cell.done{background:var(--c)}
.hcard-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.empty-focus{display:grid;gap:12px;justify-items:start}
.queue .lock{width:34px;height:34px;border-radius:11px;background:var(--sunk);display:grid;place-items:center;color:var(--ink-3)}
.shelf{display:grid;gap:8px}
.shelf li{display:flex;align-items:center;gap:12px;padding:10px 14px}
.shelf .bhex{width:34px;height:38px;display:grid;place-items:center;background:var(--walk);color:var(--on-walk);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.shelf .bhex .ic{width:17px;height:17px}
.shelf div{display:grid}
.shelf b{font:700 14.5px/1.3 var(--f-body)}

/* ── Tuần ── */
.wg{padding:6px 0 8px;overflow:hidden}
.wg-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(7,minmax(30px,36px));align-items:center;column-gap:1px;padding:0 8px 0 14px}
.wg-head{padding-block:6px 4px;border-bottom:2px solid var(--line);margin-bottom:2px}
.wg-day{display:grid;justify-items:center;gap:1px;font:500 11px/1.1 var(--f-mono);color:var(--ink-3);padding:4px 0;border-radius:9px}
.wg-day b{font:650 11px/1 var(--f-mono);color:var(--ink-2)}
.wg-day.today{background:var(--sunk);color:var(--ink)}
.wg-nofire{display:block;width:12px;height:12px}
.wg-name{font-size:13px;line-height:1.25;padding-right:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wg-cell{display:grid;place-items:center;height:36px;border:0;background:none;padding:0;border-radius:9px}
.wg-cell:active{background:var(--sunk)}
.wg-grp{display:flex;align-items:center;gap:7px;padding:12px 14px 4px;font:600 10.5px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.mark{width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center}
.mark .chk-ic{width:13px;height:13px}
.mark.done{background:var(--c);box-shadow:0 2px 0 var(--ce)}
.mark.plan{border:2px solid var(--line-strong)}
.mark.miss{border:2px dashed var(--miss);opacity:.75}
.mark.off::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-strong)}

/* ── Cài đặt ── */
.list{overflow:hidden}
.item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px 10px 16px;min-height:56px}
.item + .item{border-top:1px solid var(--line)}
.item .sw{align-self:start;margin-top:7px}
.item-actions{display:flex;gap:0}
.item-actions .btn.small{padding:6px 9px}
.tag{justify-self:start;font:600 10px/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;padding:4px 6px;border-radius:6px;background:var(--sunk);color:var(--ink-2);margin-bottom:2px}
.tag.on{background:var(--walk);color:var(--on-walk)}
.tag.done{background:var(--gold-soft);color:var(--ink)}
.data-line{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.data-line b{color:var(--ink)}
#dataCard,#installCard{display:grid;gap:10px}
.data-actions{display:flex;gap:10px;flex-wrap:wrap}
.steps{display:grid;gap:8px;font-size:14px;color:var(--ink-2);counter-reset:s}
.steps li{padding-left:28px;position:relative}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--sunk);font:600 11px/20px var(--f-mono);text-align:center;color:var(--ink)}
.steps b{color:var(--ink)}
.settings-foot{display:flex;justify-content:center;padding-top:16px}

/* ── Bảng trượt ── */
dialog.sheet{margin:auto auto 0;width:100%;max-width:var(--shell);max-height:92dvh;border:0;border-radius:26px 26px 0 0;padding:0;background:var(--surface);color:var(--ink);box-shadow:0 -12px 40px rgba(0,0,0,.3);overflow:auto;overscroll-behavior:contain}
dialog.sheet::backdrop{background:rgba(8,16,20,.5)}
@media (prefers-reduced-motion: no-preference){
  dialog.sheet[open]{animation:sheetUp .3s cubic-bezier(.2,.9,.3,1)}
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.dlg{display:grid;gap:16px;padding:8px 18px calc(18px + env(safe-area-inset-bottom))}
.grabber{justify-self:center;width:40px;height:5px;border-radius:3px;background:var(--line-strong)}
.dlg h2{font:760 24px/1.1 var(--f-display)}
.field{display:grid;gap:7px;border:0;margin:0;padding:0;min-width:0}
.field > label,.field > legend{font:500 11px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);padding:0}
.field > legend{margin-bottom:8px}
.opt{text-transform:none;letter-spacing:0}
.input{width:100%;min-height:48px;padding:11px 14px;border:2px solid var(--line);border-radius:13px;background:var(--bg);color:var(--ink);font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips label span{display:inline-flex;align-items:center;min-height:40px;padding:8px 13px;border-radius:12px;border:2px solid var(--line);font-size:14.5px;font-weight:500;background:var(--surface)}
.chips input:checked + span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
.inline{display:flex;align-items:center;gap:10px}
.inline .input{width:90px;flex:none}
.dlg-foot{display:grid;grid-template-columns:auto 1fr;gap:10px;padding-top:4px}
.err{color:var(--miss);font-size:13px;min-height:1em}

/* ── Lên cấp, nghỉ, thông báo ── */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(8,16,20,.6);display:grid;place-items:center;padding:16px}
.lu{display:grid;justify-items:center;gap:6px;padding:26px 24px 22px;text-align:center;width:min(360px,100%)}
.lu-badge{position:relative;width:104px;height:114px;display:grid;place-items:center;margin-bottom:6px}
.lu-badge svg{position:absolute;inset:0;width:100%;height:100%}
.lu-badge b{position:relative;font:840 44px/1 var(--f-display);display:grid;place-items:center}
.lu-badge b .ic{width:40px;height:40px;color:var(--walk);stroke-width:2.2}
.lu h2{font:820 34px/1.05 var(--f-display);letter-spacing:-.02em}
.lu h2.small{font-size:22px;letter-spacing:-.01em}
.lu-rank{color:var(--ink-2);font-size:15px;margin-bottom:14px}
.lu .btn3d{width:100%}
@media (prefers-reduced-motion: no-preference){.overlay:not([hidden]) .lu{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}

.restbar{position:fixed;z-index:25;left:50%;transform:translateX(-50%);bottom:calc(78px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;width:min(528px,calc(100vw - 24px))}
.ring{width:48px;height:48px;flex:none;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--sunk);stroke-width:5}
.ring-fg{fill:none;stroke:var(--push);stroke-width:5;stroke-linecap:round;stroke-dasharray:119.38;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear}
.rest-text{display:grid;flex:1;min-width:0}
.rest-text b{font:820 24px/1.05 var(--f-display);font-variant-numeric:tabular-nums}
.restbar.go{border-color:var(--walk);box-shadow:0 3px 0 var(--walk)}
.restbar.go .rest-text b{color:var(--walk)}

.notes{position:fixed;z-index:50;top:calc(env(safe-area-inset-top) + 68px);left:50%;transform:translateX(-50%);display:grid;gap:8px;width:min(528px,calc(100vw - 24px));pointer-events:none}
.note-card{display:flex;align-items:center;gap:12px;padding:10px 14px;opacity:0;transform:translateY(-10px);transition:opacity .25s,transform .25s}
.note-card.show{opacity:1;transform:none}
.note-card.gold{border-color:var(--gold);box-shadow:0 3px 0 var(--gold)}
.note-ic{width:36px;height:36px;border-radius:11px;background:var(--sunk);display:grid;place-items:center;flex:none;color:var(--ink)}
.note-card.gold .note-ic{background:var(--gold);color:var(--surface)}
.note-ic .ic{width:20px;height:20px}
.note-ic .flame{width:24px;height:24px}
.note-body{display:grid;min-width:0}
.note-body b{font:720 15px/1.25 var(--f-display)}
.note-body span{font-size:13px;color:var(--ink-2)}

.xp-float{position:fixed;z-index:71;transform:translate(-50%,-50%);font:820 18px/1 var(--f-display);color:var(--gold);text-shadow:0 2px 0 var(--surface);pointer-events:none;white-space:nowrap}
@media (prefers-reduced-motion: no-preference){.xp-float{animation:rise 1.1s cubic-bezier(.2,.8,.3,1) forwards}}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}15%{opacity:1;transform:translate(-50%,-90%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-260%) scale(1)}}
#fx{position:fixed;inset:0;width:100vw;height:100vh;z-index:70;pointer-events:none}

/* ── Tiền ── */
.tabbar{grid-template-columns:repeat(6,1fr);padding-inline:2px}
.tab{font-size:10.5px}
.tab .ic{width:46px;padding:4px 12px}
.segmented.two{grid-template-columns:repeat(2,1fr)}
.segmented.four{grid-template-columns:repeat(4,1fr)}
.segmented button{position:relative}
.seg-badge{position:absolute;top:0;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--miss);color:#fff;font:600 10px/17px var(--f-mono);font-style:normal}
.fin-body{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.fin-body > *{min-width:0}
.pos{color:var(--walk)}
.neg{color:var(--miss)}
.fin-amt{font:700 15px/1.2 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.ent-tag{display:inline-flex;font:600 10px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:4px 6px;border-radius:6px;background:var(--cs);color:var(--ink)}
.tag.warn{background:color-mix(in srgb,var(--miss) 18%,var(--surface));color:var(--miss)}
.fin-bar{display:block;height:8px;border-radius:5px;background:var(--sunk);overflow:hidden}
.fin-bar i{display:block;height:100%;border-radius:5px;background:var(--c,var(--chieu));transition:width .5s cubic-bezier(.3,.7,.2,1)}
.fin-bar.hp i{background:var(--walk)}
.fin-bar.boss{height:16px;border-radius:9px}
.fin-bar.boss i{background:linear-gradient(90deg,var(--push),var(--flame))}

.fin-cta,.fin-fresh{display:grid;gap:12px}
.fin-cta{border-style:dashed;box-shadow:none}
.fin-acc-pick{display:grid;gap:10px}
.fin-acc-pick li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center}
.fin-acc-pick .mini-seg{grid-row:1/3;grid-column:2}
.mini-seg{display:inline-grid;grid-auto-flow:column;padding:2px;border-radius:10px;background:var(--sunk)}
.mini-seg button{border:0;background:transparent;min-height:34px;padding:0 10px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.mini-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 0 var(--edge)}
.fin-inbox{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;text-align:left;width:100%;border-color:var(--miss)}
.fin-inbox-n{min-width:42px;height:42px;padding:0 8px;border-radius:13px;background:var(--miss);color:#fff;display:grid;place-items:center;font:820 19px/1 var(--f-display)}
.fin-inbox b{font:720 16px/1.2 var(--f-display)}
.fin-hero{padding:16px;display:grid;gap:14px;border-color:var(--c);box-shadow:0 3px 0 var(--ce)}
.fin-net{display:grid;gap:4px}
.fin-net b{font:840 34px/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fin-io{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.fin-io div{display:grid;gap:3px;min-width:0}
.fin-io b{font:780 17px/1.1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-cats{padding:4px 16px 10px}
.fin-cats li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;align-items:baseline;padding:9px 0}
.fin-cats li + li{border-top:1px solid var(--line)}
.fin-cats .name{font-size:14.5px}
.fin-cats b{font:700 14.5px/1 var(--f-display);font-variant-numeric:tabular-nums}
.fin-cats .fin-bar{grid-column:1/-1;height:6px}
.fin-ic{display:grid;gap:10px;border-left-width:6px}
.fin-ic.owed{border-left-color:var(--walk)}
.fin-ic.owe{border-left-color:var(--miss)}
.fin-ic.clean{border-left-color:var(--chieu)}
.fin-ic-list button{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:baseline;border:0;background:none;padding:8px 0;text-align:left;border-top:1px solid var(--line);min-height:40px}
.fin-ic-list .name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-ic-list b{font:700 14px/1 var(--f-display)}
.fin-ic .btn{justify-self:start}
.fin-goal{display:grid;gap:7px;padding:12px 14px;text-align:left;width:100%}
.fin-goal-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-width:0}
.fin-goal-row b{font:720 16px/1.25 var(--f-display);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.fin-toolbar{display:grid;gap:10px;min-width:0}
.chip-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chip-row::-webkit-scrollbar{display:none}
.chip-btn{flex:none;min-height:36px;padding:6px 12px;border-radius:11px;border:2px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.chip-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.fin-day{overflow:hidden}
.fin-day-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 16px 8px;border-bottom:2px solid var(--line)}
.fin-day-head b{font:720 15px/1 var(--f-display)}
.fin-day li + li{border-top:1px solid var(--line)}
.fin-tx{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 16px;border:0;background:none;text-align:left}
.fin-tx:active{background:var(--hover)}
.fin-tx.todo{background:color-mix(in srgb,var(--gold-soft) 50%,transparent)}
.fin-tx .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-tx .fin-amt{padding-top:6px}
.fin-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.fin-tags .tag{margin:0}
.fin-dir{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font:700 16px/1 var(--f-body);background:var(--cs,var(--sunk));color:var(--ink);flex:none}
.fin-dir.in{background:color-mix(in srgb,var(--walk) 22%,var(--surface));color:var(--walk)}

.fin-fund{padding:16px;display:grid;gap:10px}
.fin-fund.full{border-color:var(--gold);box-shadow:0 3px 0 var(--gold)}
.fin-fund-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.fin-fund-head h3{font:760 19px/1.2 var(--f-display)}
.fin-fund .big{color:var(--ink)}
.fin-fund .fin-bar{height:12px}
.fin-plan{padding:16px;display:grid;gap:12px}
.fin-plan .num{font-size:21px}
.fin-boss{padding:16px;display:grid;gap:12px;border-color:var(--push);box-shadow:0 3px 0 var(--push-edge);--c:var(--push);--ce:var(--push-edge);--on:var(--on-push)}
.fin-hp{display:grid;gap:6px}
.fin-hp-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fin-hp-top b{font:820 24px/1 var(--f-display);font-variant-numeric:tabular-nums}

.fin-sepay{display:grid;gap:12px}
.fin-sepay a{color:var(--focus)}
.fin-acc .mini-seg{grid-column:2;grid-row:2;justify-self:start}
.fin-acc > .btn{grid-column:3;grid-row:1}
.fin-rules .rule-ic{font:760 16px/1 var(--f-display);color:var(--chieu)}

.fin-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* Ô chọn ngày, tháng của trình duyệt có bề rộng tối thiểu riêng, phải cho co theo cột */
.input[type=month],.input[type=date]{min-width:0;width:100%;max-width:100%}
@media (max-width:380px){.fin-2col{grid-template-columns:minmax(0,1fr)}}
.fin-dyn{display:grid;gap:16px}
.fin-dyn:empty{display:none}
.fin-txsum{display:grid;gap:4px;padding:12px 14px;border-radius:15px;background:var(--sunk)}
.fin-txsum .fin-amt{font-size:24px}
.fin-txsum p{font-size:14px;overflow-wrap:anywhere}
.fin-warn{font-size:13.5px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--miss) 14%,var(--surface));color:var(--ink)}
.fin-warn b{color:var(--miss)}
.fin-check{display:flex;gap:10px;align-items:center;font-size:14.5px;min-height:40px}
.fin-check input{width:20px;height:20px;accent-color:var(--ink);flex:none}
.field .chip-btn,.dlg > .chip-btn{justify-self:start}
.field .chip-row{margin-top:2px}

/* Trả nợ */
.fin-bar.thick{height:14px;border-radius:8px}
.fin-clear{gap:10px}
.fin-clear-top{display:flex;justify-content:space-between;align-items:flex-end;gap:8px 16px;flex-wrap:wrap}
.fin-clear-top > div{display:grid;gap:4px;min-width:0}
.fin-total{font:840 34px/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fin-clear-when{justify-items:end;text-align:right;margin-left:auto}
.fin-clear-when b{font:800 24px/1 var(--f-display);color:var(--walk);font-variant-numeric:tabular-nums}
.fin-warn.row{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.fin-warn.row p{margin:0;flex:1 1 220px;min-width:0}
.fin-warn .btn{flex:none}
.fin-warn.ok{background:var(--walk-soft)}
.fin-warn.ok b{color:var(--ink)}

.fin-month{padding:0 16px}
.fin-rows > li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 12px;align-items:center;padding:12px 0}
.fin-rows > li + li{border-top:1px solid var(--line)}
.fin-rows .fin-bar{grid-column:1/-1;height:8px}
.fin-rows > li.fin-mempty,.fin-month > .fin-mempty{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fin-month > .fin-mempty{padding:14px 0;border-bottom:2px solid var(--line)}
.fin-split-wrap{display:grid;gap:10px;padding:14px 0;border-bottom:2px solid var(--line)}
.fin-split{display:flex;gap:3px;height:16px}
.fin-split i{flex:0 1 0;min-width:4px;border-radius:5px;background:var(--c)}
.fin-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
.fin-legend li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:13px;color:var(--ink-2)}
.fin-legend li i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.fin-legend span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-legend b{font:700 13px/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.fin-clear-when .meta{font-size:12px}
.fin-group{display:grid;gap:14px;margin:0;padding:12px 14px 16px;border:2px solid var(--line);border-radius:16px;min-width:0}
.fin-group > legend{padding:0 6px;font:720 16px/1.2 var(--f-display);color:var(--ink)}
.fin-offer{display:grid;gap:12px;border-color:var(--gold);box-shadow:0 3px 0 var(--gold-edge)}
.fin-offer-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.fin-offer-list span{min-width:0;overflow-wrap:anywhere}
.fin-offer-list b{font:700 14px/1.3 var(--f-display);text-align:right;font-variant-numeric:tabular-nums}
.fin-code{display:grid;gap:12px}
.fin-stake{grid-column:1/-1;font-size:13.5px;line-height:1.45;color:var(--ink-2);padding:8px 10px;border-radius:10px;background:var(--gold-soft)}
.fin-stake b{color:var(--ink)}
textarea.input{min-height:84px;resize:vertical;font:500 13px/1.45 var(--f-mono);word-break:break-all}
.fin-mrow{display:grid;gap:1px;min-width:0}
.fin-mrow .name{font:700 15px/1.3 var(--f-body);overflow-wrap:anywhere}
.fin-mval{font:780 16px/1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.fin-mval small{font:500 12px var(--f-mono);color:var(--ink-3)}

.fin-lender{padding:14px 16px 4px;display:grid;gap:10px}
.fin-lender-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.fin-lender-head h3{font:760 20px/1.15 var(--f-display);overflow-wrap:anywhere}
.fin-av{width:44px;height:44px;border-radius:50%;background:var(--c);color:var(--on);display:grid;place-items:center;font:820 20px/1 var(--f-display);box-shadow:0 3px 0 var(--ce)}
.fin-lender.done .fin-av{background:var(--walk);color:var(--on-walk);box-shadow:0 3px 0 var(--walk-edge)}
.fin-lender .fin-amt{font-size:18px}
.fin-lender > .fin-bar{height:10px}
.fin-debts li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.fin-ord{width:30px;height:30px;border-radius:10px;background:var(--sunk);color:var(--ink-2);display:grid;place-items:center;font:600 13px/1 var(--f-mono)}
.fin-ord.lead{background:var(--push);color:var(--on-push);box-shadow:0 2px 0 var(--push-edge)}
.fin-ord .ic{width:16px;height:16px}
.fin-debt.done .fin-ord{background:var(--walk)}
.fin-debt.done .fin-ord .chk-ic{stroke:var(--on-walk)}
.fin-debt-main{display:grid;gap:2px;justify-items:start;min-width:0;width:100%;padding:4px 0;border:0;background:none;text-align:left}
.fin-debt-main .name{font:650 15px/1.3 var(--f-body);overflow-wrap:anywhere}
.fin-debt.done .fin-debt-main .name{color:var(--ink-3);text-decoration:line-through}
.fin-debt-main .tag{margin:3px 0 0}
.tag.ok{background:var(--walk-soft);color:var(--ink)}

.fin-start{display:grid;gap:16px}
.fin-start h2{font:780 23px/1.2 var(--f-display);margin-top:4px}
.fin-steps{display:grid;gap:14px;counter-reset:step}
.fin-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:1px 12px;counter-increment:step;font-size:14px;line-height:1.45;color:var(--ink-2)}
.fin-steps li::before{content:counter(step);grid-row:span 2;width:32px;height:32px;border-radius:50%;background:var(--sunk);color:var(--ink);display:grid;place-items:center;font:600 14px/1 var(--f-mono)}
.fin-steps b{color:var(--ink);font-weight:700}

.fin-preview{font-size:14px;padding:10px 12px;border-radius:12px;background:var(--walk-soft);color:var(--ink)}
.fin-more{border:2px solid var(--line);border-radius:15px}
.fin-more summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;min-height:48px;font-weight:600;font-size:14.5px}
.fin-more summary::-webkit-details-marker{display:none}
.fin-more summary::after{content:"";width:8px;height:8px;border-right:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.fin-more[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.fin-more-body{display:grid;gap:16px;padding:2px 14px 14px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}