/* Gymplan — rustig, licht, foto's als product-shots op een koelgrijze tegel */
:root{
  --bg:#F3F4F6;
  --card:#FFFFFF;
  --ink:#0E1116;
  --ink2:#5B6370;
  --ink3:#9AA1AC;
  --line:#E6E8EC;
  --fill:#EEF0F3;
  --photo:#E5E8ED;
  --accent:#2B59FF;
  --accent-ink:#FFFFFF;
  --accent-soft:#E9EEFF;
  --good:#12A150;
  --good-soft:#E3F5EA;
  --match:#F08A24;
  --scrim:rgba(14,17,22,.42);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.06);
  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --r-lg:24px; --r-md:16px; --r-sm:12px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B0D10; --card:#15181E; --ink:#F2F4F7; --ink2:#A2A9B4; --ink3:#69717E;
    --line:#252A32; --fill:#1E232A; --photo:#E5E8ED;
    --accent:#4F72FF; --accent-ink:#FFFFFF; --accent-soft:#1A2347;
    --good:#22B864; --good-soft:#12291C; --match:#F59A3D;
    --scrim:rgba(0,0,0,.6); --shadow:none;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

.app{max-width:560px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 18px) 20px calc(env(safe-area-inset-bottom,0px) + 104px);
  display:flex;flex-direction:column;gap:28px}
.app.no-tabs{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 120px)}

/* typografie */
.date{font-size:13px;font-weight:600;color:var(--ink2)}
.h-xl{font-size:32px;line-height:1.1;font-weight:800}
.h-lg{font-size:26px;line-height:1.15;font-weight:800}
.h-md{font-size:19px;line-height:1.25;font-weight:700}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--ink2)}
.small{font-size:13px}
.sec{display:flex;flex-direction:column;gap:12px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline}
.sec-title{font-size:17px;font-weight:700;letter-spacing:-.01em}

/* kaarten */
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow)}
@media (prefers-color-scheme:dark){.card{border:1px solid var(--line)}}

/* weekbalk */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:12px 8px}
.wd{display:flex;flex-direction:column;align-items:center;gap:6px}
.wd-l{font-size:12px;font-weight:600;color:var(--ink3)}
.wd-n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;color:var(--ink)}
.wd.is-today .wd-n{background:var(--ink);color:var(--card)}
.wd.is-done .wd-n{background:var(--good);color:#fff}
.wd-dot{width:5px;height:5px;border-radius:50%;background:transparent}
.wd.is-plan .wd-dot{background:var(--accent)}
.wd.is-match .wd-dot{background:var(--match)}
.wd.is-done .wd-dot{background:var(--good)}
.legend{display:flex;gap:16px;justify-content:center;font-size:12px;color:var(--ink2);padding-bottom:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:6px;height:6px;border-radius:50%;display:inline-block}

/* hero */
.hero{overflow:hidden}
.hero-media{background:var(--photo);aspect-ratio:16/10;position:relative}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-badge{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#0E1116;font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px}
.hero-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px}
.hero-actions{display:grid;grid-template-columns:1fr auto;gap:10px}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--fill);color:var(--ink2);font-size:13px;font-weight:600;padding:6px 11px;border-radius:999px}
.chip svg.i{width:15px;height:15px}

/* knoppen */
.btn{height:52px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:700;padding:0 20px;
  transition:transform .12s ease,opacity .12s}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.soft{background:var(--fill);color:var(--ink)}
.btn.good{background:var(--good);color:#fff}
.btn.danger{background:var(--fill);color:#E5484D}
.btn.block{width:100%}
.btn[disabled]{opacity:.45}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--fill);color:var(--ink)}
.text-btn{font-weight:700;color:var(--accent);padding:8px 4px}

/* lijsten */
.list{list-style:none;margin:0;padding:6px 0}
.row{display:flex;align-items:center;gap:14px;padding:10px 16px;width:100%;text-align:left}
.list li{position:relative}
.list li + li::before{content:"";position:absolute;top:0;left:86px;right:0;border-top:1px solid var(--line)}
.row-main{flex:1;min-width:0}
.row-title{font-weight:700;font-size:16px;line-height:1.3}
.row-sub{font-size:13px;color:var(--ink2);margin-top:1px}
.row .chev{color:var(--ink3)}
.thumb{width:56px;height:56px;border-radius:14px;background:var(--photo);object-fit:cover;flex:none}
.thumb-icon{width:56px;height:56px;border-radius:14px;flex:none;display:grid;place-items:center}
.pill{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--fill);color:var(--ink2);white-space:nowrap}
.pill.done{background:var(--good-soft);color:var(--good)}
.pill.today{background:var(--accent-soft);color:var(--accent)}
.pill.match{background:color-mix(in srgb,var(--match) 16%,transparent);color:var(--match)}

/* tip-kaart */
.tip{display:flex;gap:14px;align-items:center;padding:16px 18px}
.tip-icon{width:44px;height:44px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.tip p{font-size:14px;color:var(--ink2)}
.tip strong{display:block;color:var(--ink);font-size:15px}

.notice{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.notice-row{display:flex;gap:12px;align-items:flex-start}
.notice p{font-size:14px;color:var(--ink2)}
.notice strong{color:var(--ink)}

/* bovenbalk */
.bar{position:sticky;top:0;z-index:20;margin:calc(-1 * (env(safe-area-inset-top,0px) + 18px)) -20px 0;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;
  display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}
.bar-title{text-align:center;font-weight:700;font-size:16px;opacity:0;transition:opacity .2s}
.bar.scrolled .bar-title{opacity:1}
.bar.scrolled{border-bottom:1px solid var(--line)}

/* workout-detail */
.wk-head{display:flex;flex-direction:column;gap:10px}
.info{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--ink)}
.info svg.i{color:var(--accent);margin-top:1px}
.info p{font-size:14px}
.group{display:flex;flex-direction:column;gap:8px}
.group-head{display:flex;align-items:baseline;gap:8px;padding:0 4px}
.group-label{font-weight:800;font-size:15px}
.group-meta{font-size:13px;color:var(--ink2)}
details.fold{padding:0}
details.fold summary{list-style:none;display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer}
details.fold summary::-webkit-details-marker{display:none}
details.fold[open] summary .chev{transform:rotate(90deg)}
details.fold .chev{transition:transform .2s;color:var(--ink3)}
.fold-body{padding:0 18px 18px}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:10px}
.steps li{counter-increment:s;display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:15px}
.steps li::before{content:counter(s);width:26px;height:26px;border-radius:50%;background:var(--fill);color:var(--ink2);font-size:13px;font-weight:700;display:grid;place-items:center}
.cta{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:14px 20px calc(env(safe-area-inset-bottom,0px) + 14px);
  background:linear-gradient(to top,var(--bg) 70%,transparent)}
.cta-inner{max-width:520px;margin:0 auto}

/* live training */
.live-bar{position:sticky;top:0;z-index:20;margin:calc(-1 * (env(safe-area-inset-top,0px) + 18px)) -20px 0;padding:calc(env(safe-area-inset-top,0px) + 8px) 16px 0;
  background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}
.live-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding-bottom:10px}
.live-name{display:block;text-align:center;font-weight:700;font-size:15px}
.live-time{display:block;text-align:center;font-size:13px;color:var(--ink2);font-weight:600}
.progress{height:3px;background:var(--line);margin:0 -16px}
.progress i{display:block;height:100%;background:var(--good);width:0;transition:width .3s ease}
.lx{padding:16px;display:flex;flex-direction:column;gap:12px}
.lx-head{display:flex;align-items:center;gap:12px}
.lx-head .thumb{width:52px;height:52px;border-radius:13px}
.lx-title{flex:1;min-width:0}
.lx-title h3{font-size:17px;font-weight:700;line-height:1.25}
.lx-title p{font-size:13px;color:var(--ink2)}
.hint{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600;color:var(--good);background:var(--good-soft);padding:8px 12px;border-radius:var(--r-sm)}
.hint svg.i{width:16px;height:16px}
.sets{display:flex;flex-direction:column;gap:4px}
.set{display:grid;align-items:center;gap:8px;padding:4px 6px;border-radius:var(--r-sm);transition:background .2s}
.sets-h span:nth-child(n+3){text-align:center}
.sets-h{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);padding:0 6px}
.set.done{background:var(--good-soft)}
.cols-weight,.cols-carry{grid-template-columns:28px minmax(0,1fr) 68px 68px 44px}
.cols-reps{grid-template-columns:28px minmax(0,1fr) 84px 44px}
.cols-time,.cols-minutes{grid-template-columns:28px minmax(0,1fr) 72px 44px 44px}
.cols-check{grid-template-columns:28px minmax(0,1fr) 44px}
.lx .fold summary,.app > details.fold summary{padding:14px 16px}
.set-n{font-weight:700;color:var(--ink2);text-align:center}
.set-prev{font-size:13px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set input{width:100%;height:42px;border:0;border-radius:10px;background:var(--fill);text-align:center;font-size:16px;font-weight:700;color:var(--ink);padding:0 4px;-moz-appearance:textfield}
.set input::placeholder{color:var(--ink3);font-weight:600}
.set input::-webkit-outer-spin-button,.set input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.set.done input{background:transparent}
.check{width:44px;height:42px;border-radius:12px;background:var(--fill);color:var(--ink3);display:grid;place-items:center;transition:background .15s,color .15s,transform .12s}
.check:active{transform:scale(.92)}
.check[aria-pressed="true"]{background:var(--good);color:#fff}
.done-wrap{display:flex;flex-direction:column;gap:12px}

.play{width:44px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.play svg.i{fill:currentColor;stroke:none;width:18px;height:18px}
.set.pr .set-n{color:var(--match)}
.set.pr .set-n svg.i{width:18px;height:18px;margin:0 auto}
.note{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:var(--r-sm);background:var(--fill);color:var(--ink3)}
.note svg.i{width:16px;height:16px}
.note input{flex:1;min-width:0;height:100%;border:0;background:transparent;font-size:16px;color:var(--ink);padding:0}
.note input::placeholder{color:var(--ink3)}
.note input:focus{outline:none}
.note:focus-within{box-shadow:0 0 0 2px var(--accent)}

/* weekring */
.week-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px 0}
.ring{width:52px;height:52px;flex:none}
.ring circle{fill:none;stroke-width:5}
.ring-bg{stroke:var(--fill)}
.ring-fg{stroke:var(--good);stroke-linecap:round;transition:stroke-dasharray .4s ease}
.ring text{font-family:var(--font);font-size:12px;font-weight:800;fill:var(--ink)}

/* lichaam + grafiekjes */
.body{padding:18px;display:flex;flex-direction:column;gap:14px}
.body-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.body-big{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:4px}
.body-big span{font-size:16px;font-weight:700;color:var(--ink2)}
.body-side{text-align:right}
.good{color:var(--good);font-weight:700}
.body-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.body-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--ink2);min-width:0}
.body-form input,.time-row input{height:46px;border:0;border-radius:12px;background:var(--fill);font-size:16px;font-weight:700;color:var(--ink);padding:0 12px;width:100%;min-width:0}
.body-form .btn{height:46px;padding:0 16px}
.spark{width:100%;height:84px;display:block}
.spark-line{stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.spark-area{fill:var(--accent-soft);stroke:none}
.spark-axis{display:flex;justify-content:space-between;font-size:11px;font-weight:600;color:var(--ink3);margin-top:-2px}
.time-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600}
.time-row input{width:130px;text-align:center}

/* rusttimer */
.rest{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:40;max-width:536px;margin:0 auto;
  background:#0E1116;color:#fff;border-radius:22px;padding:14px 14px 14px 18px;box-shadow:0 12px 40px rgba(0,0,0,.28);
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;transform:translateY(0);transition:transform .25s ease,opacity .25s}
.rest[hidden]{display:grid!important;transform:translateY(140%);opacity:0;pointer-events:none}
@media (prefers-color-scheme:dark){.rest{background:#232833}}
.rest-label{display:block;font-size:13px;max-width:100%;color:rgba(255,255,255,.72);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rest-time{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rest-btns{display:flex;gap:6px;grid-row:1 / span 2;grid-column:2}
.rest-btns button{height:44px;min-width:48px;padding:0 12px;border-radius:14px;background:rgba(255,255,255,.12);color:#fff;font-weight:700;font-size:14px}
.rest-btns button.go{background:#fff;color:#0E1116}
.rest-bar{grid-column:1 / -1;height:4px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:6px}
.rest-bar i{display:block;height:100%;background:#fff;width:100%}
.rest.is-next .rest-bar{display:none}
.rest.is-over{background:var(--good)}
.rest.is-timer{background:var(--accent)}
.rest.is-timer .rest-bar i{background:#fff}

/* sheet */
.sheet-wrap{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet-scrim{position:absolute;inset:0;background:var(--scrim);animation:fade .2s ease}
.sheet{position:relative;width:100%;max-width:560px;max-height:92vh;max-height:92dvh;overflow:auto;background:var(--card);border-radius:28px 28px 0 0;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px);animation:up .28s cubic-bezier(.2,.8,.2,1);overscroll-behavior:contain}
.sheet-close{position:sticky;top:14px;z-index:2;margin:14px 14px -50px auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.85);color:#0E1116;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sheet-media{background:var(--photo);aspect-ratio:4/3;margin-top:-14px}
.sheet-media img{width:100%;height:100%;object-fit:cover}
.sheet-body{padding:20px 22px 0;display:flex;flex-direction:column;gap:20px}
.sheet-body h2{font-size:24px;font-weight:800}
.sheet-sec{display:flex;flex-direction:column;gap:10px}
.sheet-sec h3{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.callout{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--fill);font-size:14px}
.callout svg.i{color:var(--accent);margin-top:1px}
.alts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.alts li{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);font-size:15px}
.alts li:first-child{border-top:0}
.alts li svg.i{color:var(--ink3);width:18px;height:18px}
.hist{display:flex;flex-direction:column;gap:6px}
.hist div{display:flex;justify-content:space-between;font-size:14px}
.dialog{padding:24px 22px 0;display:flex;flex-direction:column;gap:14px}
.dialog p{color:var(--ink2)}
.dialog .btns{display:flex;flex-direction:column;gap:8px;margin-top:6px}

/* klaar-scherm */
.done-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 0 4px}
.done-badge{width:76px;height:76px;border-radius:50%;background:var(--good);color:#fff;display:grid;place-items:center;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
.done-badge svg.i{width:38px;height:38px;stroke-width:2.6}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat{padding:14px 14px 16px;display:flex;flex-direction:column;gap:2px}
.stat b{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.stat span{font-size:12px;color:var(--ink2);font-weight:600}

/* voortgang */
.chart{padding:18px 18px 14px;display:flex;flex-direction:column;gap:14px}
.bars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;align-items:end;height:120px;position:relative}
.bars .goal{position:absolute;left:0;right:0;border-top:1px dashed var(--ink3);opacity:.6}
.bars .goal span{position:absolute;right:0;top:-18px;font-size:11px;color:var(--ink3);font-weight:600}
.bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.bar-col i{display:block;width:100%;max-width:28px;border-radius:8px 8px 4px 4px;background:var(--fill)}
.bar-col.has i{background:var(--accent)}
.bar-col.now i{background:var(--good)}
.bar-x{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;font-size:11px;color:var(--ink3);text-align:center;font-weight:600}
.empty{padding:28px 22px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.empty .tip-icon{margin-bottom:6px}
.sess summary{list-style:none}
.sess summary::-webkit-details-marker{display:none}
.sess-body{padding:0 16px 14px 86px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.sess-body div{display:flex;justify-content:space-between;gap:12px}
.sess-body span:last-child{color:var(--ink2);text-align:right}

/* tips */
.tips{display:flex;flex-direction:column;gap:10px}
.tips details.fold summary{padding:16px 18px}
.tips .fold-body{padding:0 18px 18px;display:flex;flex-direction:column;gap:12px}
.tips .fold-body p{color:var(--ink2);font-size:15px}
.bul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.bul li{font-size:15px;color:var(--ink2)}
.bul li strong{color:var(--ink)}
.timeline{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.timeline li{display:grid;grid-template-columns:18px 1fr;gap:12px;padding-bottom:16px;position:relative}
.timeline li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);margin:6px 0 0 4px}
.timeline li::after{content:"";position:absolute;left:8px;top:20px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline li:last-child{padding-bottom:0}
.timeline b{display:block;color:var(--ink)}
.timeline span{font-size:14px;color:var(--ink2)}
.machines{display:flex;flex-direction:column;gap:12px}
.machines h4{margin:0 0 6px;font-size:14px;font-weight:700}
.machines .chips .chip{background:var(--fill);color:var(--ink)}
.gauge{width:120px;height:auto;align-self:center}
.g-track{stroke:var(--fill)}
.g-keep{stroke:var(--good)}
.g-needle{stroke:var(--ink)}
.g-hub{fill:var(--ink)}
.g-text{fill:var(--ink3);font-size:11px;font-weight:700;font-family:var(--font)}

.phase-line{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:10px 12px;border-radius:var(--r-md);background:var(--fill);text-align:left}
.phase-ic{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.phase-ic svg.i{width:18px;height:18px}
.phase-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.phase-txt strong{font-size:14px;font-weight:700}
.phase-txt span{font-size:13px;color:var(--ink2)}
.phase-line .chev{color:var(--ink3);width:18px;height:18px}
.hero-actions{margin-top:14px}
.timeline li.now::before{background:var(--good)}
.timeline li:not(.now) b{color:var(--ink2)}
.timeline .pill{margin-left:6px;vertical-align:1px}

/* tabbalk */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding-bottom:env(safe-area-inset-bottom,0px);
  background:color-mix(in srgb,var(--card) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-top:1px solid var(--line)}
.tabbar[hidden]{display:none}
.tabbar-inner{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;font-size:11px;font-weight:700;color:var(--ink3)}
.tab[aria-current="page"]{color:var(--accent)}

@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}