/* CoreFit MD — application styles
   One stylesheet, no framework. Light-first with a full dark theme. */

:root{
  --paper:#f5f1e8; --surface:#fffdf9; --surface-2:#efeade; --surface-3:#e7e1d2;
  --ink:#16211d; --ink-2:#4f5d56; --ink-3:#8b968f;
  --line:rgba(22,33,29,.11); --line-2:rgba(22,33,29,.06); --line-3:rgba(22,33,29,.2);
  --pine:#0b5d4a; --pine-2:#0f7a61; --pine-soft:#dcefe8;
  --signal:#cf4f1d; --signal-soft:#fbe6da;
  --gold:#a8761f; --gold-soft:#f7edd6;
  --shadow:0 1px 2px rgba(22,33,29,.05), 0 8px 24px -16px rgba(22,33,29,.4);
  --r:20px; --r-sm:12px;
  --f-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --f-body:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --f-mono:'Azeret Mono',ui-monospace,'SFMono-Regular',monospace;
  --timer-size:3.4rem;
}
:root[data-theme="dark"]{
    --paper:#0d1412; --surface:#15201d; --surface-2:#1b2724; --surface-3:#22302c;
    --ink:#f3efe6; --ink-2:#a9b6b0; --ink-3:#71807a;
    --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.05); --line-3:rgba(255,255,255,.2);
    --pine:#5cc8a8; --pine-2:#7ad9bc; --pine-soft:rgba(92,200,168,.14);
    --signal:#ff7a45; --signal-soft:rgba(255,122,69,.14);
    --gold:#e0b455; --gold-soft:rgba(224,180,85,.14);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -20px rgba(0,0,0,.9);
  }
html.big-text{ --timer-size:4.4rem; }
html.big-text body{ font-size:1.12rem; }

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body); color:var(--ink); background:var(--paper);
  min-height:100dvh; -webkit-tap-highlight-color:transparent;
  background-image:
    radial-gradient(1100px 520px at 50% -12%, var(--pine-soft), transparent 62%),
    radial-gradient(700px 420px at 92% 8%, var(--gold-soft), transparent 70%);
  background-repeat:no-repeat; background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit}
input{font-family:inherit;color:inherit}
svg.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}

.app{width:100%;max-width:472px;margin:0 auto;padding:14px 14px calc(26px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 0}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(150deg,var(--pine),var(--pine-2));color:#fff;box-shadow:0 6px 16px -8px var(--pine)}
.brand-mark svg{width:19px;height:19px;stroke-width:2}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-text strong{font-family:var(--f-display);font-size:1.02rem;font-weight:800;letter-spacing:-.015em;line-height:1.15}
.brand-text small{font-family:var(--f-mono);font-size:.6rem;color:var(--ink-3);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.icon-btn{height:34px;min-width:34px;padding:0 8px;border-radius:11px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:transform .14s,color .18s}
.icon-btn:active{transform:scale(.94)}
.icon-btn span{font-family:var(--f-mono);font-size:.6rem;font-weight:600;letter-spacing:.06em}
.streak{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);padding:7px 10px;border-radius:999px;font-family:var(--f-mono);font-size:.64rem;
  font-weight:600;cursor:pointer;box-shadow:var(--shadow)}
.streak svg{width:13px;height:13px;stroke-width:2}
.streak b{font-size:.82rem;font-weight:700}
.streak.hot{color:var(--signal);border-color:color-mix(in srgb,var(--signal) 30%,transparent);background:var(--signal-soft)}

/* ---------- banner ---------- */
.banner{display:flex;align-items:center;gap:8px;background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
  color:var(--gold);border-radius:12px;padding:9px 12px;font-size:.74rem;font-weight:600;line-height:1.4}
.banner svg{width:15px;height:15px}

/* ---------- segmented nav ---------- */
.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.segmented button{display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;
  color:var(--ink-3);font-size:.75rem;font-weight:600;padding:9px 4px;border-radius:11px;cursor:pointer;transition:background .18s,color .18s}
.segmented button svg{width:15px;height:15px}
.segmented button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
:root[data-theme="dark"] .segmented button[aria-selected="true"]{background:var(--pine);color:#08201a}

/* ---------- views ---------- */
.view{display:none;flex-direction:column;gap:12px}
.view.active{display:flex;animation:rise .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.label{font-family:var(--f-mono);font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.label.dim{opacity:.85}
.hint{font-family:var(--f-mono);font-size:.57rem;line-height:1.75;color:var(--ink-3);letter-spacing:.02em}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-radius:24px;padding:18px;color:#f4fffb;
  background:linear-gradient(158deg,#0d6b55 0%,#0a4f3e 46%,#06382b 100%);
  box-shadow:0 22px 44px -30px rgba(6,45,34,.85)}
.hero::after{content:"";position:absolute;inset:auto -40px -70px auto;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 66%);pointer-events:none}
.hero.done{background:linear-gradient(158deg,#0a5341 0%,#083c2e 55%,#062c22 100%)}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.eyebrow{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.status-chip{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22)}
.hero-title{font-family:var(--f-display);font-size:1.7rem;line-height:1.08;font-weight:800;letter-spacing:-.025em;margin-bottom:7px}
.hero-sub{font-size:.78rem;line-height:1.5;opacity:.8;margin-bottom:16px}
.hero-resume{display:flex;gap:8px;margin-top:8px}
.hero-resume .btn{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:999px;
  font-weight:700;font-size:.9rem;padding:13px 18px;cursor:pointer;transition:transform .14s,filter .18s;text-align:center}
.btn:active{transform:scale(.975)}
.btn svg{width:17px;height:17px;stroke-width:2.2}
.btn.sm{font-size:.76rem;padding:10px 12px;border-radius:12px;font-weight:600}
.btn.sm svg{width:15px;height:15px}
.btn-primary{background:var(--pine);color:#f6fffb}
.btn-ghost{background:transparent;color:var(--pine);border:1.5px solid color-mix(in srgb,var(--pine) 40%,transparent)}
.btn-hero{background:#f7fffb;color:#08382c}
.btn-hero.secondary{background:rgba(255,255,255,.14);color:#f4fffb;border:1px solid rgba(255,255,255,.3)}
.hero-foot{display:flex;gap:14px;margin-top:14px;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.04em;opacity:.72}
.hero-foot span{display:inline-flex;align-items:center;gap:5px}
.hero-foot svg{width:12px;height:12px}

/* ---------- plan ---------- */
.plan{list-style:none;display:flex;flex-direction:column}
.plan-item{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.plan-item:last-child{border-bottom:0}
.plan-num{font-family:var(--f-mono);font-size:.62rem;font-weight:600;color:var(--ink-3);width:18px;flex-shrink:0}
.plan-body{flex:1;min-width:0}
.plan-body b{display:block;font-size:.82rem;font-weight:600;letter-spacing:-.01em}
.plan-body small{font-family:var(--f-mono);font-size:.58rem;color:var(--ink-3)}
.plan-dur{font-family:var(--f-mono);font-size:.68rem;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---------- programme ---------- */
.program-body{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.program-meta b{display:block;font-family:var(--f-display);font-size:1rem;font-weight:700;letter-spacing:-.02em}
.program-meta small{font-family:var(--f-mono);font-size:.58rem;color:var(--ink-3)}
.goal-ring{position:relative;width:46px;height:46px;flex-shrink:0}
.goal-ring svg{width:46px;height:46px;transform:rotate(-90deg)}
.goal-ring .ring-bg{fill:none;stroke:var(--surface-3);stroke-width:4}
.goal-ring .ring-fg{fill:none;stroke:var(--pine);stroke-width:4;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:113;transition:stroke-dashoffset .5s}
.goal-ring span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mono);font-size:.55rem;font-weight:600;color:var(--ink-2)}
.program-bar{height:4px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-bottom:9px}
.program-bar i{display:block;height:100%;background:var(--pine);width:0;transition:width .5s}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.stat{background:var(--surface);padding:13px 6px;text-align:center}
.stat b{display:block;font-family:var(--f-display);font-size:1.45rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{display:block;font-family:var(--f-mono);font-size:.53rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;line-height:1.35}

/* ---------- calendar ---------- */
.cal-month{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-month b{font-family:var(--f-display);font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.cal-dow{font-family:var(--f-mono);font-size:.54rem;letter-spacing:.06em;color:var(--ink-3);padding:3px 0;text-transform:uppercase}
.cal-day{aspect-ratio:1;display:grid;place-items:center;border-radius:9px;font-size:.72rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink-2)}
.cal-day.done{background:var(--pine);color:#f2fff9;font-weight:700}
.cal-day.today{box-shadow:inset 0 0 0 1.8px var(--signal);color:var(--signal);font-weight:700}
.cal-day.today.done{color:#fff}
.cal-day.pad{visibility:hidden}
.cal-day.soft{background:var(--gold-soft);color:var(--gold)}
.legend{display:flex;gap:14px;margin-top:11px;font-family:var(--f-mono);font-size:.56rem;color:var(--ink-3);letter-spacing:.04em}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.legend i.a{background:var(--pine)}
.legend i.b{box-shadow:inset 0 0 0 1.8px var(--signal)}

/* ---------- week ---------- */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;align-items:end;height:92px}
.week-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.week-bar{width:100%;border-radius:5px;background:var(--surface-3);min-height:6px;transition:height .4s cubic-bezier(.2,.7,.3,1)}
.week-bar.on{background:linear-gradient(180deg,var(--pine-2),var(--pine))}
.week-bar.today{outline:1.5px solid var(--signal);outline-offset:2px}
.week-dow{font-family:var(--f-mono);font-size:.52rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}

/* ---------- goal bars ---------- */
.goal-bars{display:flex;gap:8px}
.goal-cell{flex:1;text-align:center}
.goal-cell i{display:block;height:8px;border-radius:99px;background:var(--surface-3);margin-bottom:6px}
.goal-cell i.on{background:var(--pine)}
.goal-cell span{font-family:var(--f-mono);font-size:.52rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}

/* ---------- export grid ---------- */
.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ---------- library ---------- */
.lib{display:flex;flex-direction:column;gap:9px}
.lib-card{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:9px;box-shadow:var(--shadow);
  transition:transform .14s,border-color .18s}
.lib-card:active{transform:scale(.985)}
.lib-card.static{cursor:default}
.lib-card.static:active{transform:none}
.lib-thumb{position:relative;width:86px;height:58px;border-radius:9px;overflow:hidden;background:#0a1613;flex-shrink:0;border:1px solid var(--line)}
.lib-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lib-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 68%,rgba(0,0,0,.42));pointer-events:none}
.lib-play{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.lib-play svg{width:19px;height:19px;stroke:#fff;fill:rgba(255,255,255,.18);stroke-width:1.6}
.lib-badge{position:absolute;left:5px;bottom:5px;z-index:3;font-family:var(--f-mono);font-size:.48rem;font-weight:600;
  letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.55);padding:2px 5px;border-radius:4px}
.lib-body{flex:1;min-width:0}
.lib-body b{display:block;font-size:.82rem;font-weight:600;letter-spacing:-.01em;word-spacing:.12em}
.lib-body small{font-family:var(--f-mono);font-size:.56rem;color:var(--ink-3);line-height:1.55}
.lib-tag{display:inline-block;font-family:var(--f-mono);font-size:.48rem;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 5px;border-radius:4px;background:var(--pine-soft);color:var(--pine);margin-left:5px;vertical-align:1px}
.lib-go{color:var(--ink-3);flex-shrink:0}

/* ---------- workout stage ---------- */
.stage{position:fixed;inset:0;z-index:80;display:none;flex-direction:column;background:var(--paper);
  padding:calc(10px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain}
.stage.on{display:flex}
.stage-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;flex-shrink:0}
.phase{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.phase .dot{width:7px;height:7px;border-radius:50%;background:var(--pine);box-shadow:0 0 0 3px var(--pine-soft)}
.phase.work .dot{background:var(--signal);box-shadow:0 0 0 3px var(--signal-soft)}
.phase.rest .dot{background:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.workout-body{display:flex;flex-direction:column;flex:1;min-height:0}

.video-card{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#07100d;
  flex-shrink:0;border:1px solid var(--line)}
.video-host{position:absolute;inset:0}
.video-host iframe,.video-host>div,.video-host video{width:100%;height:100%;border:0;display:block;object-fit:cover}
.video-badge{position:absolute;left:8px;top:8px;z-index:6;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-mono);font-size:.53rem;font-weight:600;letter-spacing:.06em;color:#fff;
  background:rgba(6,16,13,.62);border:1px solid rgba(255,255,255,.18);padding:4px 7px;border-radius:6px}
.video-badge svg{width:11px;height:11px}
.video-fallback{position:absolute;inset:0;z-index:4;display:none;background:#07100d}
.video-fallback.on{display:block}
.video-fallback img,.video-fallback video{width:100%;height:100%;object-fit:contain;display:block;background:#07100d}
.demo-cap{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 9px;background:linear-gradient(180deg,transparent,rgba(4,14,11,.86) 55%);
}
.demo-cap span{font-family:var(--f-mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:#a8c6bb}
.demo-cap a{font-family:var(--f-mono);font-size:.52rem;letter-spacing:.06em;color:#9be7cd;text-decoration:none;
  border-bottom:1px solid rgba(155,231,205,.45);padding-bottom:1px;white-space:nowrap}
.demo-cap a[hidden]{display:none}

.clip-media{position:absolute;inset:0;display:none;background:#07100d}
.clip-media.on{display:block}
.clip-media img,.clip-media video{width:100%;height:100%;object-fit:contain;display:block}
.lib-mode{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.lib-mode .seg-mini{flex:0 0 62%}
.lib-mode .hint{flex:1;min-width:0}

/* credits */
.credits{display:flex;flex-direction:column;gap:9px}
.credit{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;padding:8px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}
.credit img{width:56px;height:34px;object-fit:contain;background:#0a1613;border-radius:6px}
.credit b{display:block;font-size:.78rem;font-weight:600;letter-spacing:-.01em}
.credit small{display:block;font-family:var(--f-mono);font-size:.54rem;color:var(--ink-3);line-height:1.6}
.credit a{color:var(--pine);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--pine) 40%,transparent)}
.video-noclip{position:absolute;inset:0;z-index:2;display:none;align-items:center;justify-content:center;padding:18px;
  background:linear-gradient(150deg,#0a2f26,#061c17);text-align:center}
.video-noclip.on{display:flex}
.video-noclip span{font-family:var(--f-body);font-size:.82rem;line-height:1.55;color:#d7f2e8;max-width:34ch}
.stage.audio-only .video-card{display:none}

.stage-main{display:flex;flex-direction:column;gap:11px;margin-top:14px;flex:1;min-height:0}
.timer-row{display:flex;align-items:center;gap:16px;min-height:60px}
.timer{display:flex;align-items:baseline;gap:4px;flex:0 0 auto;min-width:92px;
  font-family:var(--f-display);font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.timer span{font-size:var(--timer-size);line-height:1;display:block}
.timer small{font-family:var(--f-mono);font-size:.56rem;font-weight:600;color:var(--ink-3);letter-spacing:.1em;
  text-transform:uppercase;padding-bottom:6px}
.timer-side{flex:1;min-width:0}
.ex-count{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.ex-name{font-family:var(--f-display);font-size:1.12rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-top:2px}
.ex-next{font-family:var(--f-mono);font-size:.58rem;color:var(--ink-3);margin-top:3px;min-height:1em}

.segbar{height:4px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.segbar i{display:block;height:100%;width:0;background:var(--pine);border-radius:99px}
.stage.working .segbar i{background:var(--signal)}
.stage.resting .segbar i{background:var(--gold)}

.rail{display:flex;gap:3px;height:24px;align-items:stretch}
.rail-seg{flex-grow:1;position:relative;border-radius:4px;background:var(--surface-3);overflow:hidden}
.rail-seg.rest{opacity:.6}
.rail-seg i{position:absolute;inset:0;width:0;background:var(--pine)}
.rail-seg.work i{background:var(--signal)}
.rail-seg.rest i{background:var(--gold)}
.rail-seg.now{outline:1.5px solid var(--ink);outline-offset:1.5px}

.cue{font-size:.78rem;line-height:1.55;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  border-left:2.5px solid var(--pine);border-radius:0 10px 10px 0;padding:9px 11px}

.rep-tap{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;
  border-radius:14px;border:1.5px dashed color-mix(in srgb,var(--pine) 45%,transparent);background:var(--pine-soft);
  color:var(--pine);font-family:var(--f-display);font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform .1s}
.rep-tap:active{transform:scale(.97)}
.rep-tap svg{width:22px;height:22px}

.controls{display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;align-items:center;gap:4px;margin-top:2px}
.ctl{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;color:var(--ink-2);
  font-family:var(--f-mono);font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:6px 0}
.ctl svg{width:20px;height:20px;stroke-width:1.7}
.ctl:active{transform:scale(.94)}
.ctl-main{width:66px;height:66px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 26px -16px rgba(0,0,0,.6);transition:transform .14s;justify-self:center}
.ctl-main svg{width:26px;height:26px;stroke-width:2.1}
.ctl-main:active{transform:scale(.94)}
:root[data-theme="dark"] .ctl-main{background:var(--pine);color:#08201a}

.steps{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 12px;margin-top:2px}
.steps summary{cursor:pointer;list-style:none;padding:11px 0;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;display:flex;align-items:center;justify-content:space-between}
.steps summary::-webkit-details-marker{display:none}
.steps summary::after{content:"+";font-size:.9rem}
.steps[open] summary::after{content:"–"}
.steps ol{list-style:none;display:flex;flex-direction:column;gap:8px;padding-bottom:12px}
.steps li{display:flex;gap:9px;font-size:.75rem;line-height:1.5;color:var(--ink-2)}
.steps li b{font-family:var(--f-mono);font-size:.55rem;font-weight:600;color:var(--pine);background:var(--pine-soft);
  width:17px;height:17px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.stage-foot{margin-top:auto;padding:14px 0 2px;text-align:center;font-family:var(--f-mono);font-size:.56rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- done ---------- */
.done-view{display:none;flex-direction:column;align-items:center;text-align:center;gap:13px;padding:30px 8px;margin:auto}
.done-view.on{display:flex}
.done-ring{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--pine-soft);color:var(--pine);
  border:1.5px solid color-mix(in srgb,var(--pine) 34%,transparent);animation:pop .45s cubic-bezier(.2,.8,.3,1) both}
.done-ring svg{width:36px;height:36px;stroke-width:2.2}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.done-view h2{font-family:var(--f-display);font-size:1.45rem;font-weight:800;letter-spacing:-.03em}
.done-view p{font-size:.8rem;color:var(--ink-2);line-height:1.6;max-width:32ch}
.done-stats{display:flex;gap:22px;margin:4px 0}
.done-stats div{text-align:center}
.done-stats b{display:block;font-family:var(--f-display);font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.done-stats span{font-family:var(--f-mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- sheets & modals ---------- */
.sheet{position:fixed;inset:0;z-index:90;display:none;align-items:flex-end;justify-content:center;
  background:rgba(9,18,15,.5);backdrop-filter:blur(3px)}
.sheet.on{display:flex}
.sheet-card{width:100%;max-width:472px;background:var(--surface);border-radius:22px 22px 0 0;
  padding:16px 16px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:11px;
  animation:slideUp .28s cubic-bezier(.2,.8,.3,1) both;max-height:92dvh;overflow-y:auto}
@keyframes slideUp{from{transform:translateY(22px);opacity:.6}to{transform:none;opacity:1}}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sheet-head h3{font-family:var(--f-display);font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.sheet-head p{font-family:var(--f-mono);font-size:.56rem;color:var(--ink-3);margin-top:3px;letter-spacing:.04em}

.modal{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(9,18,15,.62);backdrop-filter:blur(4px)}
.modal.on{display:flex}
.modal-card{width:100%;max-width:400px;background:var(--surface);border-radius:20px;padding:20px;
  display:flex;flex-direction:column;gap:12px;max-height:88dvh;overflow-y:auto;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.modal-card h3{font-family:var(--f-display);font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.modal-card canvas{width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}

.trim-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.field{border:1px solid var(--line);border-radius:11px;padding:9px 10px;background:var(--surface-2)}
.field label{display:block;font-family:var(--f-mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px;font-weight:600}
.field-row{display:flex;align-items:center;gap:6px}
.field input{width:100%;min-width:0;border:0;background:transparent;font-family:var(--f-display);font-size:1.1rem;
  font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.field input.txt{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:0}
.field input:focus{outline:none}
.field .unit{font-family:var(--f-mono);font-size:.56rem;color:var(--ink-3)}
.mini{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:8px;
  font-family:var(--f-mono);font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  padding:6px 7px;cursor:pointer;white-space:nowrap}
.mini:active{transform:scale(.95)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}

.seg-mini{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:2px}
.seg-mini button{flex:1;border:0;background:transparent;color:var(--ink-3);font-family:var(--f-mono);font-size:.56rem;
  font-weight:600;letter-spacing:.05em;padding:6px 4px;border-radius:7px;cursor:pointer;text-transform:uppercase}
.seg-mini button[aria-pressed="true"]{background:var(--pine);color:#f4fffb}
.seg-mini.sm button{font-size:.55rem;padding:5px 3px}

.mods{display:flex;flex-direction:column;gap:6px}
.mods p{display:flex;gap:8px;font-size:.74rem;line-height:1.45;color:var(--ink-2)}
.mods b{font-family:var(--f-mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  flex:0 0 58px;padding-top:2px}

.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.set-row:last-of-type{border-bottom:0}
.set-row span{font-size:.82rem;font-weight:600}
.set-row small{display:block;font-family:var(--f-mono);font-size:.54rem;color:var(--ink-3);font-weight:400;margin-top:2px;letter-spacing:.02em}
.time-input{border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:7px 9px;
  font-family:var(--f-mono);font-size:.72rem;color:var(--ink)}
.vol{display:flex;align-items:center;gap:8px;flex-shrink:0}
.vol input[type=range]{width:92px;height:24px;accent-color:var(--pine);cursor:pointer}
.switch{position:relative;width:44px;height:26px;border-radius:99px;background:var(--surface-3);border:0;cursor:pointer;
  flex-shrink:0;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch[aria-checked="true"]{background:var(--pine)}
.switch[aria-checked="true"]::after{transform:translateX(18px)}

.screen-list{display:flex;flex-direction:column;gap:2px}
.screen-list label{display:flex;align-items:flex-start;gap:10px;padding:9px 2px;font-size:.8rem;line-height:1.45;
  color:var(--ink-2);cursor:pointer;border-bottom:1px solid var(--line-2)}
.screen-list label:last-child{border-bottom:0}
.screen-list input{width:18px;height:18px;accent-color:var(--pine);margin-top:1px;flex-shrink:0}

.rpe{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.rpe button{aspect-ratio:1;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;
  font-family:var(--f-mono);font-size:.66rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.rpe button[aria-pressed="true"]{background:var(--pine);color:#f4fffb;border-color:var(--pine)}
.rpe-label{font-family:var(--f-mono);font-size:.55rem;color:var(--ink-3);text-align:center;min-height:1em}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,90px);
  background:var(--ink);color:var(--paper);font-family:var(--f-mono);font-size:.64rem;font-weight:500;
  padding:10px 16px;border-radius:99px;z-index:120;pointer-events:none;transition:transform .3s cubic-bezier(.2,.8,.3,1);
  max-width:88vw;text-align:center;letter-spacing:.02em}
.toast.on{transform:translate(-50%,0)}

.footnote.build{opacity:.6;font-size:.5rem;padding-top:0}
.footnote{font-family:var(--f-mono);font-size:.54rem;color:var(--ink-3);text-align:center;line-height:1.7;
  letter-spacing:.03em;padding:2px 10px}

@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
@media (max-width:392px){#btnLang{display:none}}
@media (max-width:360px){
  :root{--timer-size:2.9rem}
  .hero-title{font-size:1.48rem}
  .ctl span{font-size:.44rem}
}
/* landscape: keep the video beside the controls */
@media (orientation:landscape) and (max-height:560px){
  .stage{padding:8px 12px}
  .workout-body{flex-direction:row;gap:14px;align-items:stretch}
  .video-card{width:46%;aspect-ratio:auto;height:auto;align-self:center}
  .stage-main{margin-top:0;justify-content:center;flex:1}
  .stage-foot{display:none}
  .steps{display:none}
}

/* author / about block in settings */
.about{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line-2)}
.about-mark{width:34px;height:34px;border-radius:10px;background:var(--pine);color:#f2fffa;display:grid;place-items:center;flex-shrink:0}
.about-mark .ic{width:18px;height:18px}
.about b{display:block;font-size:.9rem;color:var(--ink);margin-bottom:2px;word-spacing:.14em}
.about small{display:block;font-size:.72rem;color:var(--ink-3);line-height:1.5}
.about a{color:var(--pine-2);text-decoration:none}
.about a:hover{text-decoration:underline}
.footnote.author{margin-top:2px}
.footnote.author a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-3)}

/* author signature on the Today view */
.signature{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);text-decoration:none;transition:border-color .18s,transform .18s}
.signature:hover{border-color:var(--line-3)}
.signature:active{transform:scale(.995)}
.sig-mark{width:30px;height:30px;border-radius:9px;background:var(--pine);color:#f2fffa;display:grid;place-items:center;flex-shrink:0}
.sig-mark .ic{width:16px;height:16px}
.sig-text{display:flex;flex-direction:column;line-height:1.25}
.sig-text small{font-family:var(--f-mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.sig-text b{font-size:.86rem;font-weight:700;color:var(--ink);word-spacing:.16em}
.sig-handle{font-family:var(--f-mono);font-size:.68rem;color:var(--ink-3)}