/* ============================================================
   MyWorkoutAI — Design System
   Aesthetic: molten / industrial. Near-black canvas, forged
   orange + ember gradient accents, condensed display type.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Sora:wght@400;500;600;700&display=swap');

:root{
  /* LIGHT THEME */
  --bg:        #f6f6f8;   /* page background (soft off-white) */
  --bg-2:      #ededf0;   /* alt section background */
  --panel:     #ffffff;   /* cards / panels */
  --panel-2:   #f1f1f4;   /* inner surfaces, track fills */
  --line:      #e3e3ea;   /* borders */
  --text:      #18181d;   /* primary text (near-black) */
  --muted:     #65656f;   /* secondary text */
  --ember:     #ff5a1f;   /* brand accent (kept) */
  --ember-2:   #ff8a3d;
  --gold:      #d98a0c;   /* darkened for contrast on light */
  --good:      #15a34a;   /* darkened green for light */
  --radius:    16px;
  --shadow:    0 18px 45px -22px rgba(20,20,35,.18);
  --font-disp: 'Bebas Neue', sans-serif;
  --font-body: 'Sora', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* glow / texture backdrop */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(700px 500px at 80% -10%, rgba(255,90,31,.09), transparent 60%),
    radial-gradient(600px 600px at 0% 100%, rgba(255,194,75,.06), transparent 60%);
}

.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---- typography ------------------------------------------ */
h1,h2,h3{font-family:var(--font-disp);font-weight:400;letter-spacing:.02em;line-height:1}
h1{font-size:clamp(2.8rem,7vw,5.6rem)}
h2{font-size:clamp(2rem,4.5vw,3.4rem)}
h3{font-size:1.4rem;letter-spacing:.03em}
.eyebrow{
  font-family:var(--font-body);font-weight:700;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ember);
}
.grad{
  background:linear-gradient(100deg,var(--ember),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- nav ------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(255,255,255,.78);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{font-family:var(--font-disp);font-size:1.7rem;letter-spacing:.04em;display:flex;gap:8px;align-items:center}
.logo span{color:var(--ember)}
.nav-links{display:flex;gap:3px;align-items:center}
.nav-links .nav-link{font-size:.92rem;color:var(--muted);padding:8px 13px;border-radius:10px;
  transition:background .18s,color .18s}
.nav-links .nav-link:hover{color:var(--text);background:var(--panel-2)}
.nav-links .nav-link.active{color:var(--ember);background:rgba(255,90,31,.10);font-weight:600}
.nav-sep{width:1px;height:24px;background:var(--line);margin:0 10px}
.nav-auth{display:flex;align-items:center;gap:10px}
.nav-user{display:flex;align-items:center;gap:8px;padding:4px 13px 4px 4px;border-radius:99px;
  border:1px solid var(--line);transition:border-color .18s}
.nav-user:hover{border-color:var(--ember)}
.nav-ava{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--font-disp);font-size:1rem;color:#1a0c00;
  background:linear-gradient(135deg,var(--ember),var(--gold))}
img.nav-ava{object-fit:cover}
.nav-uname{font-size:.85rem;color:var(--text);font-weight:600}
/* profile avatar (settings + admin chip) */
img.admin-ava{object-fit:cover}
.avatar-lg{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;display:grid;
  place-items:center;font-family:var(--font-disp);font-size:2rem}
.avatar-ph{color:#fff;background:linear-gradient(135deg,var(--ember),var(--gold))}
.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:1.6rem;cursor:pointer}

/* ---- buttons --------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  padding:13px 24px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .15s, box-shadow .2s;
}
.btn-primary{
  background:linear-gradient(100deg,var(--ember),var(--ember-2));
  color:#1a0c00;box-shadow:0 12px 30px -10px rgba(255,90,31,.6);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(255,90,31,.75)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ember);color:var(--ember)}
.btn-block{width:100%;justify-content:center}

/* ---- hero ------------------------------------------------ */
.hero{padding:90px 0 70px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.hero h1{margin:18px 0}
.hero p.lead{font-size:1.12rem;color:var(--muted);max-width:520px;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;margin-top:42px}
.hero-stats div b{font-family:var(--font-disp);font-size:2rem;display:block;color:var(--text)}
.hero-stats div span{font-size:.8rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

.hero-card{
  background:linear-gradient(160deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:24px;padding:28px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.hero-card::after{
  content:"";position:absolute;top:-60px;right:-60px;width:200px;height:200px;
  background:radial-gradient(circle,var(--ember),transparent 70%);opacity:.35;
}
.transform-row{display:flex;gap:14px;margin:18px 0}
.transform-row .tcard{flex:1;background:var(--bg);border:1px solid var(--line);
  border-radius:14px;padding:16px;text-align:center}
.transform-row .tcard .num{font-family:var(--font-disp);font-size:2.2rem}
.bar{height:10px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ember),var(--gold))}

/* ---- sections -------------------------------------------- */
section{padding:84px 0}
.section-head{text-align:center;max-width:640px;margin:0 auto 54px}
.section-head p{color:var(--muted);margin-top:14px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;transition:transform .2s,border-color .2s;
}
.card:hover{transform:translateY(-4px);border-color:rgba(255,90,31,.45)}
.card .ic{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  font-size:1.4rem;background:rgba(255,90,31,.12);margin-bottom:16px;
}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:.94rem}

/* ---- testimonials ---------------------------------------- */
.quote{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.quote p{font-size:1rem;margin-bottom:18px}
.quote .who{display:flex;align-items:center;gap:12px}
.quote .av{width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--ember),var(--gold));display:grid;place-items:center;
  font-family:var(--font-disp);color:#1a0c00;font-size:1.1rem}
.quote .who b{display:block;font-size:.92rem}
.quote .who span{font-size:.8rem;color:var(--muted)}

/* ---- pricing --------------------------------------------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:34px 28px;display:flex;flex-direction:column;position:relative;
}
.price.feat{border-color:var(--ember);background:linear-gradient(170deg,rgba(255,90,31,.1),var(--panel))}
.price .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(100deg,var(--ember),var(--gold));color:#1a0c00;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;padding:6px 16px;border-radius:99px;text-transform:uppercase}
.price h3{font-size:1.3rem}
.price .amt{font-family:var(--font-disp);font-size:3.4rem;margin:12px 0 4px}
.price .amt small{font-family:var(--font-body);font-size:.9rem;color:var(--muted)}
.price ul{list-style:none;margin:22px 0;flex:1}
.price li{padding:9px 0;font-size:.93rem;color:var(--muted);border-bottom:1px solid var(--line)}
.price li::before{content:"✓";color:var(--good);font-weight:700;margin-right:10px}

/* ---- forms / auth ---------------------------------------- */
.auth-shell{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:40px 20px}
.auth-box{width:100%;max-width:430px;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:38px;box-shadow:var(--shadow)}
.auth-box h2{margin-bottom:6px}
.auth-box .sub{color:var(--muted);font-size:.9rem;margin-bottom:26px}
label{display:block;font-size:.82rem;color:var(--muted);margin:14px 0 6px;letter-spacing:.04em}
input,select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:13px 14px;font-family:var(--font-body);font-size:.95rem;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ember)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.alert{padding:12px 16px;border-radius:10px;font-size:.9rem;margin-bottom:18px}
.alert-err{background:rgba(255,90,31,.12);border:1px solid rgba(255,90,31,.4);color:var(--ember-2)}
.alert-ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.35);color:var(--good)}
.muted-link{font-size:.88rem;color:var(--muted);text-align:center;display:block;margin-top:18px}
.muted-link a{color:var(--ember)}

/* ---- dashboard ------------------------------------------- */
.dash{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 70px)}
.side{background:var(--bg-2);border-right:1px solid var(--line);padding:26px 18px}
.side a{display:flex;gap:11px;align-items:center;padding:11px 14px;border-radius:10px;
  color:var(--muted);font-size:.92rem;margin-bottom:4px;transition:.18s}
.side a:hover,.side a.active{background:var(--panel);color:var(--text)}
.main{padding:34px}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:28px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.kpi .lbl{font-size:.78rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.kpi .val{font-family:var(--font-disp);font-size:2.6rem;margin-top:6px}
.kpi .val small{font-family:var(--font-body);font-size:.85rem;color:var(--muted)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:22px}
.panel h3{margin-bottom:18px;letter-spacing:.04em}

.ex-item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.ex-item:last-child{border:0}
.ex-item .meta{font-size:.85rem;color:var(--muted)}
.pill{font-size:.74rem;padding:5px 11px;border-radius:99px;background:var(--panel-2);color:var(--muted)}
.pill.pro{background:linear-gradient(100deg,var(--ember),var(--gold));color:#1a0c00;font-weight:700}

.badge-grid{display:flex;flex-wrap:wrap;gap:12px}
.badge{background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:14px;text-align:center;width:104px}
.badge .em{font-size:1.7rem}
.badge.locked{opacity:.32;filter:grayscale(1)}
.badge small{display:block;margin-top:6px;font-size:.74rem;color:var(--muted)}

/* ---- locked / upsell ------------------------------------- */
.locked-wall{text-align:center;padding:60px 30px;border:1px dashed var(--line);
  border-radius:var(--radius);background:var(--panel)}
.locked-wall .lk{font-size:2.6rem;margin-bottom:14px}

/* ---- footer ---------------------------------------------- */
footer{border-top:1px solid var(--line);padding:46px 0;color:var(--muted);font-size:.88rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
footer a{color:var(--muted)}footer a:hover{color:var(--ember)}

/* ---- animations ------------------------------------------ */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.reveal{animation:rise .7s both}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}

/* ---- trial banner ---------------------------------------- */
.trial-banner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(255,90,31,.16),rgba(255,194,75,.08));
  border:1px solid rgba(255,90,31,.4);border-radius:var(--radius);
  padding:26px 30px;margin:0 0 38px;
}
.trial-banner h3{font-size:1.5rem;margin:4px 0 6px}
.trial-banner p{color:var(--muted);max-width:520px}
.btn-lg{padding:15px 30px;font-size:1rem}

/* ---- free tools ------------------------------------------ */
.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.tool-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;transition:border-color .2s,transform .2s;
}
.tool-card:hover{border-color:rgba(255,90,31,.45);transform:translateY(-3px)}
.tool-card h3{font-size:1.4rem}
.tool-sub{color:var(--muted);font-size:.9rem;margin:4px 0 16px}
.tool-card label{display:block;font-size:.82rem;color:var(--muted);margin:10px 0 0}
.tool-card input,.tool-card select{
  width:100%;margin-top:5px;padding:11px 13px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:10px;color:var(--text);font-family:inherit
}
.tool-card .btn{margin-top:18px}
.tool-out{margin-top:14px;padding:16px;border-radius:12px;background:var(--bg-2);
  border:1px dashed var(--line);color:var(--muted);font-size:.95rem;display:none}
.tool-out.on{display:block;border-style:solid;border-color:rgba(255,90,31,.4);color:var(--text)}
.tool-out.warn{display:block;border-style:dashed;border-color:rgba(255,90,31,.45);color:var(--ember-2)}
.tool-out b{color:var(--gold);font-size:1.15rem}
.tool-out .res{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tool-out .res-num{font-family:var(--font-disp);font-size:2.3rem;line-height:1;color:var(--ember)}
.tool-out .res-unit{color:var(--muted);font-size:.9rem}
.tool-out .res-tag{margin-left:auto;align-self:center;font-size:.74rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:rgba(255,90,31,.12);color:var(--ember)}
.tool-out .res-sub{color:var(--muted);font-size:.88rem;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line)}
.tool-cta{
  text-align:center;margin-top:40px;padding:40px 26px;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(255,90,31,.14),var(--panel));
  border:1px solid rgba(255,90,31,.35)
}
.tool-cta h3{font-size:1.7rem;margin-bottom:8px}
.tool-cta p{color:var(--muted);margin-bottom:20px}

/* ---- transformation gallery ------------------------------ */
.xform{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;transition:border-color .2s,transform .2s
}
.xform:hover{border-color:rgba(255,90,31,.45);transform:translateY(-3px)}
.xform-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.xform-top .av{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-disp);font-size:1.3rem;color:#1a0c00;
  background:linear-gradient(135deg,var(--ember),var(--gold))
}
.xform-top b{display:block}
.xform-top span{font-size:.8rem;color:var(--muted)}
.xform-stat{display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-top:1px solid var(--line);font-size:.92rem}
.xform-stat span{color:var(--muted)}
.xform-stat b i{color:var(--ember);font-style:normal;margin:0 4px}
.xform-bar{height:8px;background:var(--bg-2);border-radius:99px;overflow:hidden;margin:16px 0 6px}
.xform-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ember),var(--gold))}
.xform small{color:var(--muted);font-size:.78rem}

/* ---- workout player -------------------------------------- */
.player-head{text-align:center;margin-bottom:8px}
.player-head .back{color:var(--muted);font-size:.85rem;display:inline-block;margin-bottom:14px}
.player-head .back:hover{color:var(--ember)}
.player-head h2{font-size:2.2rem;margin:6px 0 4px}
.timer-wrap{position:relative;width:300px;height:300px;margin:18px auto 6px;--ring:var(--ember)}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--line);stroke-width:9}
.ring-fg{fill:none;stroke:var(--ring);stroke-width:12;stroke-linecap:round;
  transition:stroke-dashoffset 1s linear, stroke .35s;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--ring) 45%, transparent))}
.timer-wrap[data-phase=work]  {--ring:var(--ember)}
.timer-wrap[data-phase=rest]  {--ring:#1f9bb3}
.timer-wrap[data-phase=ready] {--ring:var(--gold)}
.timer-wrap[data-phase=warmup]{--ring:#15a34a}
.timer-wrap[data-phase=done]  {--ring:#15a34a}
.timer-wrap.ending{--ring:#e23b3b}
.timer-wrap.ending #bigTime{color:#e23b3b;animation:tpulse .9s ease-in-out infinite}
@keyframes tpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
.timer-center{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
#bigTime{font-family:var(--font-disp);font-size:3.9rem;line-height:1;color:var(--text);
  font-variant-numeric:tabular-nums;transition:color .2s}
.timer-center .ex-name{font-family:var(--font-disp);font-size:1.4rem;color:var(--ring);
  letter-spacing:.08em;margin-top:6px;transition:color .35s}
.timer-center .set-info{color:var(--muted);font-size:.9rem;margin-top:4px}
.player-ctrls{display:flex;gap:14px;justify-content:center;align-items:center;margin:18px 0}
.player-ctrls .btn-lg{min-width:200px}
.player-ctrls2{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.kbd-hint{color:var(--muted);font-size:.74rem;width:100%;text-align:center;margin-top:2px}
.player-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.btn-sm{padding:9px 16px;font-size:.82rem}
.ex-check{font-size:1.1rem;color:var(--muted);min-width:22px;text-align:center}
#exList .ex-item.on{background:rgba(255,90,31,.1);border-color:rgba(255,90,31,.4);
  border-radius:10px;padding-left:12px;padding-right:12px}
#exList .ex-item.on .ex-check{color:var(--ember)}
.cues-panel{max-width:520px;margin:18px auto 4px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.cues-head{display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cues-head #cuesTitle{font-family:var(--font-disp);font-size:1.25rem;
  letter-spacing:.04em;color:var(--ember)}
.cues-vid{font-size:.8rem;color:var(--muted);white-space:nowrap}
.cues-vid:hover{color:var(--ember)}
.cues-panel ol{margin:0;padding-left:0;list-style:none;counter-reset:cue}
.cues-panel li{counter-increment:cue;position:relative;padding:8px 0 8px 38px;
  color:var(--text);font-size:.95rem;line-height:1.45;border-top:1px solid var(--line)}
.cues-panel li:first-child{border-top:0}
.cues-panel li::before{content:counter(cue);position:absolute;left:0;top:7px;
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-disp);font-size:.95rem;color:#1a0c00;
  background:linear-gradient(135deg,var(--ember),var(--gold))}
.cues-safe{margin:10px 0 0;color:var(--muted);font-size:.74rem;font-style:italic}
/* ---- session progress bar ---- */
.session-prog{max-width:560px;margin:6px auto 14px}
.sp-track{height:8px;background:var(--panel-2);border-radius:99px;overflow:hidden;
  border:1px solid var(--line)}
.sp-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--ember),var(--gold));
  border-radius:99px;transition:width .6s ease}
.sp-meta{display:flex;justify-content:space-between;gap:10px;margin-top:8px;
  color:var(--muted);font-size:.78rem;letter-spacing:.04em}
.sp-meta b{color:var(--text);font-family:var(--font-disp);font-size:1.05rem;
  letter-spacing:.04em;font-weight:400;margin-right:2px}

/* ---- set dots (per-set tracker) ---- */
.set-dots{display:flex;justify-content:center;gap:8px;margin:6px 0 14px;min-height:32px}
.set-dots .dot{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-disp);font-size:.95rem;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--line);transition:.25s
}
.set-dots .dot.active{background:linear-gradient(135deg,var(--ember),var(--gold));
  color:#1a0c00;border-color:transparent;
  box-shadow:0 0 0 4px rgba(255,90,31,.18);animation:pulseDot 1.4s infinite}
.set-dots .dot.resting{background:rgba(52,211,153,.18);border-color:rgba(52,211,153,.45);color:var(--good)}
.set-dots .dot.done{background:rgba(255,90,31,.12);border-color:rgba(255,90,31,.45);color:var(--ember)}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 4px rgba(255,90,31,.18)}
  50%{box-shadow:0 0 0 10px rgba(255,90,31,0)}
}

/* ---- live coach panel ---- */
.coach-panel{max-width:560px;margin:8px auto 4px;background:linear-gradient(160deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:18px;padding:20px 22px;position:relative;overflow:hidden}
.coach-panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--ember),var(--gold))}
.coach-panel.rest-mode::before{background:linear-gradient(180deg,#34d399,#3dd6e7)}
.coach-panel.warmup-mode::before{background:linear-gradient(180deg,#ffc24b,var(--ember))}
.coach-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.coach-tag{font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.18em;
  background:linear-gradient(100deg,var(--ember),var(--gold));color:#1a0c00;
  padding:4px 10px;border-radius:99px;text-transform:uppercase}
.coach-panel.rest-mode .coach-tag{background:linear-gradient(100deg,#34d399,#3dd6e7);color:#0d2a25}
.coach-panel.warmup-mode .coach-tag{background:linear-gradient(100deg,#ffc24b,var(--ember));color:#3a1d00}
.coach-step{font-size:.78rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.cues-vid{font-size:.8rem;color:var(--muted);margin-left:auto;white-space:nowrap}
.cues-vid:hover{color:var(--ember)}
.coach-now{
  font-family:var(--font-body);font-size:1.1rem;font-weight:600;line-height:1.45;
  color:var(--text);min-height:50px;
  animation:cueIn .35s ease both;
}
@keyframes cueIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.coach-tempo{font-size:.82rem;color:var(--muted);margin-top:6px;letter-spacing:.02em}
.coach-progress{height:4px;background:var(--bg-2);border-radius:99px;margin:14px 0 16px;overflow:hidden}
.coach-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--ember),var(--gold));
  border-radius:99px;transition:width 1s linear}
.coach-panel.rest-mode .coach-progress-bar{background:linear-gradient(90deg,#34d399,#3dd6e7)}
.coach-list{margin:8px 0 0;padding-left:0;list-style:none;counter-reset:cue}
.coach-list li{counter-increment:cue;position:relative;padding:10px 0 10px 40px;
  color:var(--muted);font-size:.92rem;line-height:1.45;border-top:1px solid var(--line);
  transition:.25s}
.coach-list li:first-child{border-top:0}
.coach-list li::before{content:counter(cue);position:absolute;left:0;top:9px;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-disp);font-size:.95rem;color:var(--muted);
  background:var(--bg-2);border:1px solid var(--line);transition:.25s}
.coach-list li.cue-active{color:var(--text);font-weight:600}
.coach-list li.cue-active::before{
  background:linear-gradient(135deg,var(--ember),var(--gold));color:#1a0c00;
  border-color:transparent;box-shadow:0 0 0 4px rgba(255,90,31,.18)}
.coach-list li.cue-done{color:var(--muted);opacity:.7}
.coach-list li.cue-done::before{background:rgba(255,90,31,.12);color:var(--ember);
  border-color:rgba(255,90,31,.35)}
.cues-safe{margin:14px 0 0;color:var(--muted);font-size:.72rem;font-style:italic;
  border-top:1px solid var(--line);padding-top:10px}

/* ---- breathing overlay (rest phase) ---- */
.breath-overlay{position:absolute;inset:0;border-radius:50%;display:none;
  align-items:center;justify-content:center;pointer-events:none;flex-direction:column}
.breath-overlay.on{display:flex}
.breath-bubble{
  width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(52,211,153,.45),rgba(52,211,153,.05) 70%);
  border:2px solid rgba(52,211,153,.6);
  transition:transform 3.6s ease-in-out, background 3.6s;
}
.breath-overlay.inhale .breath-bubble{transform:scale(1.8)}
.breath-overlay.exhale .breath-bubble{transform:scale(0.9)}
.breath-text{position:absolute;top:62%;font-family:var(--font-disp);font-size:1.1rem;
  letter-spacing:.18em;color:var(--good)}

/* ---- toast (motivational popups) ---- */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%, 30px);
  background:linear-gradient(100deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);color:var(--text);
  padding:13px 22px;border-radius:99px;font-weight:600;font-size:.92rem;
  box-shadow:0 20px 40px -18px rgba(20,20,35,.25);
  opacity:0;pointer-events:none;transition:.35s;z-index:120;
  max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.good{border-color:rgba(52,211,153,.5);box-shadow:0 16px 40px -12px rgba(52,211,153,.35)}
.toast.hot{border-color:rgba(255,90,31,.6);box-shadow:0 16px 40px -12px rgba(255,90,31,.45);
  background:linear-gradient(100deg,rgba(255,90,31,.18),var(--panel-2));color:var(--ember-2)}

.stream-panel{max-width:520px;margin:14px auto 0;background:var(--panel);
  border:1px solid rgba(255,90,31,.35);border-radius:14px;overflow:hidden}
.stream-head{display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;font-size:.85rem;color:var(--text);border-bottom:1px solid var(--line)}
.stream-x{background:none;border:0;color:var(--muted);font-size:1rem;cursor:pointer}
.stream-x:hover{color:var(--ember)}
.stream-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.stream-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.stream-note{padding:10px 16px;margin:0;color:var(--muted);font-size:.76rem}

/* ---- hero with photo ------------------------------------- */
.hero-photo{position:relative;overflow:hidden}
.hero-photo .hero-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.hero-photo .wrap{position:relative;z-index:1}

/* ---- gym gallery ----------------------------------------- */
.gallery-sec{padding-top:10px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}
.gallery figure{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--panel-2)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.05) contrast(1.03);transition:transform .5s}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  font-family:var(--font-disp);font-size:1.1rem;letter-spacing:.05em;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.78))}
.gallery .g-tall{grid-row:span 2}
.gallery .g-wide{grid-column:span 2}
.gallery .img-fallback{background:
  linear-gradient(135deg,rgba(255,90,31,.25),rgba(255,194,75,.12)),var(--panel-2)}
.gallery .img-fallback img{display:none}

/* ---- how to use ------------------------------------------ */
.howto-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.howto-step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;position:relative}
.howto-step .n{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  font-family:var(--font-disp);font-size:1.4rem;color:#1a0c00;margin-bottom:14px;
  background:linear-gradient(135deg,var(--ember),var(--gold))}
.howto-step h3{font-size:1.2rem;margin-bottom:6px}
.howto-step p{color:var(--muted);font-size:.9rem}

/* ---- FAQ accordion --------------------------------------- */
.faq-item{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;
  background:var(--panel);overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 20px;background:none;border:0;color:var(--text);font-family:inherit;
  font-size:1rem;font-weight:600;text-align:left;cursor:pointer}
.faq-q i{font-style:normal;font-size:1.4rem;color:var(--ember);transition:transform .25s;flex:none}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:320px}
.faq-a p{padding:0 20px 20px;color:var(--muted);font-size:.93rem;line-height:1.6}

/* ============================================================
   ANIMATED SVG TRAINER — actual motion per exercise type.
   100% self-contained. No external assets.
   ============================================================ */
.ex-anim{display:block;width:100%;height:auto;max-height:300px}
.ex-anim .ex-floor{stroke:rgba(255,90,31,.35);stroke-width:2;stroke-dasharray:4 6}
.ex-anim .ex-head{fill:url(#exGlowsquat);fill:#ff8a3d}
.ex-anim .ex-head{fill:#ff8a3d}
.ex-anim .ex-torso,.ex-anim .ex-arm,.ex-anim .ex-leg{
  stroke:#ff5a1f;stroke-width:6;stroke-linecap:round;fill:none}
.ex-anim .ex-hand,.ex-anim .ex-foot{fill:#ffc24b}
.ex-anim .ex-figure{transform-origin:100px 170px;transform-box:fill-box}
.ex-anim .ex-equip{opacity:0;transition:opacity .3s}
.ex-anim .ex-bar,.ex-anim .ex-db,.ex-anim .ex-rope{
  fill:#9a9aa6;stroke:#9a9aa6;stroke-width:2}
.ex-anim .ex-motion .ml{stroke:rgba(255,194,75,.6);stroke-width:3;
  stroke-linecap:round;opacity:0}

/* per-limb transform origins so they pivot correctly */
.ex-anim .ex-arm-l,.ex-anim .ex-arm-r{transform-origin:100px 78px;transform-box:fill-box}
.ex-anim .ex-leg-l{transform-origin:100px 115px;transform-box:fill-box}
.ex-anim .ex-leg-r{transform-origin:100px 115px;transform-box:fill-box}
.ex-anim .ex-hand-l{transform-origin:78px 105px;transform-box:fill-box}
.ex-anim .ex-hand-r{transform-origin:122px 105px;transform-box:fill-box}
.ex-anim .ex-foot-l{transform-origin:85px 170px;transform-box:fill-box}
.ex-anim .ex-foot-r{transform-origin:115px 170px;transform-box:fill-box}
.ex-anim .ex-torso{transform-origin:100px 88px;transform-box:fill-box}
.ex-anim .ex-head{transform-origin:100px 50px;transform-box:fill-box}

/* ---- SQUAT: whole figure dips down, knees bend ---- */
@keyframes anim-squat-body{
  0%,100%{transform:translateY(0) scaleY(1)}
  50%{transform:translateY(28px) scaleY(.85)}
}
@keyframes anim-squat-leg-l{
  0%,100%{transform:rotate(0deg) translateX(0)}
  50%{transform:rotate(-12deg) translateX(-6px)}
}
@keyframes anim-squat-leg-r{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(12deg) translateX(6px)}
}
@keyframes anim-squat-arms{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(-40deg)}
}
.ex-anim-squat .ex-figure{animation:anim-squat-body 1.8s ease-in-out infinite}
.ex-anim-squat .ex-leg-l{animation:anim-squat-leg-l 1.8s ease-in-out infinite}
.ex-anim-squat .ex-leg-r{animation:anim-squat-leg-r 1.8s ease-in-out infinite}
.ex-anim-squat .ex-arm-l,.ex-anim-squat .ex-arm-r{animation:anim-squat-arms 1.8s ease-in-out infinite}

/* ---- LUNGE: alternating leg step forward ---- */
@keyframes anim-lunge-body{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(18px)}
}
@keyframes anim-lunge-leg-l{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(-25deg) translateX(-10px)}
}
@keyframes anim-lunge-leg-r{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(20deg) translateX(8px)}
}
.ex-anim-lunge .ex-figure{animation:anim-lunge-body 2s ease-in-out infinite}
.ex-anim-lunge .ex-leg-l{animation:anim-lunge-leg-l 2s ease-in-out infinite}
.ex-anim-lunge .ex-leg-r{animation:anim-lunge-leg-r 2s ease-in-out infinite}

/* ---- DEADLIFT: hinge at hips (torso tilts forward) ---- */
@keyframes anim-deadlift-torso{
  0%,100%{transform:rotate(0deg) translateY(0)}
  50%{transform:rotate(45deg) translateY(8px)}
}
@keyframes anim-deadlift-arms{
  0%,100%{transform:rotate(0deg) translateY(0)}
  50%{transform:rotate(70deg) translateY(20px)}
}
.ex-anim-deadlift .ex-torso{animation:anim-deadlift-torso 2s ease-in-out infinite}
.ex-anim-deadlift .ex-arm-l,
.ex-anim-deadlift .ex-arm-r{animation:anim-deadlift-arms 2s ease-in-out infinite}
.ex-anim-deadlift .ex-bar{opacity:1}
.ex-anim-deadlift .ex-equip{opacity:1}

/* ---- BRIDGE / GLUTE: lying down, hips up & down ---- */
@keyframes anim-bridge{
  0%,100%{transform:translateY(0) rotate(70deg)}
  50%{transform:translateY(-20px) rotate(70deg)}
}
.ex-anim-bridge .ex-figure{animation:anim-bridge 1.6s ease-in-out infinite;
  transform-origin:100px 140px}

/* ---- PUSH-UP / BENCH PRESS: torso translates down/up ---- */
@keyframes anim-push-body{
  0%,100%{transform:translateY(0) rotate(90deg)}
  50%{transform:translateY(14px) rotate(90deg)}
}
@keyframes anim-push-arms{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(.6)}
}
.ex-anim-push .ex-figure{animation:anim-push-body 1.1s ease-in-out infinite;
  transform-origin:100px 130px}
.ex-anim-push .ex-arm-l,.ex-anim-push .ex-arm-r{animation:anim-push-arms 1.1s ease-in-out infinite}

/* ---- SHOULDER PRESS / PIKE: arms up overhead ---- */
@keyframes anim-press-arm-l{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(-130deg) translateY(-8px)}
}
@keyframes anim-press-arm-r{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(130deg) translateY(-8px)}
}
.ex-anim-press .ex-arm-l{animation:anim-press-arm-l 1.4s ease-in-out infinite}
.ex-anim-press .ex-arm-r{animation:anim-press-arm-r 1.4s ease-in-out infinite}
.ex-anim-press .ex-db{opacity:1}
.ex-anim-press .ex-equip{opacity:1}

/* ---- PULL-UP / ROW: arms pulling down ---- */
@keyframes anim-pull-body{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
@keyframes anim-pull-arm-l{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(50deg) translateY(-12px)}
}
@keyframes anim-pull-arm-r{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(-50deg) translateY(-12px)}
}
.ex-anim-pull .ex-figure{animation:anim-pull-body 1.6s ease-in-out infinite}
.ex-anim-pull .ex-arm-l{animation:anim-pull-arm-l 1.6s ease-in-out infinite}
.ex-anim-pull .ex-arm-r{animation:anim-pull-arm-r 1.6s ease-in-out infinite}

/* ---- BICEP CURL: forearms up & down ---- */
@keyframes anim-curl-arm-l{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(-90deg) translate(6px,-12px)}
}
@keyframes anim-curl-arm-r{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(90deg) translate(-6px,-12px)}
}
.ex-anim-curl .ex-arm-l{animation:anim-curl-arm-l 1.2s ease-in-out infinite}
.ex-anim-curl .ex-arm-r{animation:anim-curl-arm-r 1.2s ease-in-out infinite}
.ex-anim-curl .ex-db{opacity:1}
.ex-anim-curl .ex-equip{opacity:1}

/* ---- PLANK: subtle breathing pulse ---- */
@keyframes anim-plank{
  0%,100%{transform:rotate(90deg) scale(1)}
  50%{transform:rotate(90deg) scale(.985)}
}
.ex-anim-plank .ex-figure{animation:anim-plank 2.6s ease-in-out infinite;
  transform-origin:100px 130px}

/* ---- MOUNTAIN CLIMBERS: alternating knees ---- */
@keyframes anim-mtn-leg-l{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(-60deg) translate(-6px,-20px)}
}
@keyframes anim-mtn-leg-r{
  0%,50%{transform:rotate(0deg)}
  75%{transform:rotate(60deg) translate(6px,-20px)}
  100%{transform:rotate(0deg)}
}
.ex-anim-mountain .ex-figure{transform:rotate(80deg);transform-origin:100px 130px}
.ex-anim-mountain .ex-leg-l{animation:anim-mtn-leg-l .7s ease-in-out infinite}
.ex-anim-mountain .ex-leg-r{animation:anim-mtn-leg-r .7s ease-in-out infinite}

/* ---- CRUNCH: torso curls up ---- */
@keyframes anim-crunch{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(-30deg) translate(-6px,-4px)}
}
.ex-anim-crunch .ex-torso{animation:anim-crunch 1.3s ease-in-out infinite}
.ex-anim-crunch .ex-head{animation:anim-crunch 1.3s ease-in-out infinite}
.ex-anim-crunch .ex-figure{transform:rotate(70deg);transform-origin:100px 150px}

/* ---- LEG RAISE: legs lift ---- */
@keyframes anim-legraise{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(-70deg)}
}
.ex-anim-legraise .ex-leg-l,
.ex-anim-legraise .ex-leg-r{animation:anim-legraise 1.6s ease-in-out infinite}
.ex-anim-legraise .ex-figure{transform:rotate(70deg);transform-origin:100px 150px}

/* ---- JUMPING JACKS: arms & legs spread ---- */
@keyframes anim-jack-arm-l{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(-90deg)}
}
@keyframes anim-jack-arm-r{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(90deg)}
}
@keyframes anim-jack-leg-l{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(-25deg) translateX(-10px)}
}
@keyframes anim-jack-leg-r{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(25deg) translateX(10px)}
}
@keyframes anim-jack-body{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.ex-anim-jack .ex-figure{animation:anim-jack-body .7s ease-in-out infinite}
.ex-anim-jack .ex-arm-l{animation:anim-jack-arm-l .7s ease-in-out infinite}
.ex-anim-jack .ex-arm-r{animation:anim-jack-arm-r .7s ease-in-out infinite}
.ex-anim-jack .ex-leg-l{animation:anim-jack-leg-l .7s ease-in-out infinite}
.ex-anim-jack .ex-leg-r{animation:anim-jack-leg-r .7s ease-in-out infinite}

/* ---- BURPEE: down → plank → jump ---- */
@keyframes anim-burpee{
  0%   {transform:translateY(0) scaleY(1)}
  25%  {transform:translateY(40px) scaleY(.5)}
  50%  {transform:translateY(40px) scaleY(.5) rotate(70deg)}
  75%  {transform:translateY(0) scaleY(1)}
  90%  {transform:translateY(-20px) scaleY(1.1)}
  100% {transform:translateY(0) scaleY(1)}
}
.ex-anim-burpee .ex-figure{animation:anim-burpee 1.6s ease-in-out infinite;
  transform-origin:100px 170px}

/* ---- HIGH KNEES: alternating knees up fast ---- */
@keyframes anim-hk-leg-l{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-70deg)}
  50%{transform:rotate(0deg)}
}
@keyframes anim-hk-leg-r{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(0deg)}
  75%{transform:rotate(70deg)}
}
@keyframes anim-hk-body{
  0%,100%{transform:translateY(0)}
  25%,75%{transform:translateY(-6px)}
}
.ex-anim-highknee .ex-figure{animation:anim-hk-body .5s ease-in-out infinite}
.ex-anim-highknee .ex-leg-l{animation:anim-hk-leg-l .5s ease-in-out infinite}
.ex-anim-highknee .ex-leg-r{animation:anim-hk-leg-r .5s ease-in-out infinite}

/* ---- JUMP ROPE: bounce + arm circles ---- */
@keyframes anim-rope-body{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
@keyframes anim-rope-hand{
  0%,100%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.ex-anim-jumprope .ex-figure{animation:anim-rope-body .45s ease-in-out infinite}
.ex-anim-jumprope .ex-hand-l,
.ex-anim-jumprope .ex-hand-r{animation:anim-rope-hand .45s linear infinite}
.ex-anim-jumprope .ex-rope{opacity:1;stroke:var(--gold);stroke-width:2}
.ex-anim-jumprope .ex-equip{opacity:1}

/* ---- GENERIC: gentle whole-body bounce + motion lines ---- */
@keyframes anim-generic{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes anim-motionlines{
  0%,100%{opacity:0;transform:translateX(0)}
  50%{opacity:.8;transform:translateX(4px)}
}
.ex-anim-generic .ex-figure{animation:anim-generic 1.3s ease-in-out infinite}
.ex-anim .ex-motion .ml{animation:anim-motionlines 1.2s ease-in-out infinite}
.ex-anim .ex-motion .ml-2{animation-delay:.15s}
.ex-anim .ex-motion .ml-3{animation-delay:.05s}
.ex-anim .ex-motion .ml-4{animation-delay:.2s}

/* ---- Real trainer video stage (workout player) ---- */
.demo-stage{
  position:relative;margin:10px 0 14px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);transition:.35s;background:#000;
}
.demo-stage.demo-pulse{box-shadow:0 0 0 4px rgba(255,90,31,.25), 0 22px 50px -15px rgba(255,90,31,.45);
  transform:translateY(-2px)}
.demo-video-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.demo-poster,
.demo-iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.demo-poster{z-index:1;display:block}
.demo-iframe{z-index:2;border:0;background:transparent}
.demo-fb{display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  font-size:5rem;color:var(--ember);
  background:linear-gradient(135deg,rgba(255,90,31,.15),rgba(255,194,75,.06));z-index:3}
/* always-on animated stick-figure trainer (offline, reliable) */
.demo-anim{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,rgba(255,90,31,.10),rgba(255,255,255,0) 62%),
             linear-gradient(160deg,#ffffff,#eef0f3)}
.demo-anim svg.ex-anim{width:auto;height:92%;max-height:none}
@media(max-width:560px){.demo-anim svg.ex-anim{height:84%}}
/* real exercise photo (2-frame animated demo) */
.demo-anim .demo-photo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#fff;animation:demoFade .4s ease both}
@keyframes demoFade{from{opacity:.45}to{opacity:1}}
.demo-badge{position:absolute;top:10px;left:10px;z-index:5;
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.85);color:var(--text);padding:5px 10px;border-radius:99px;
  border:1px solid var(--line);backdrop-filter:blur(4px)}
.demo-badge-r{left:auto;right:10px;color:var(--ember);border-color:rgba(255,90,31,.4)}
.demo-sound-btn{
  position:absolute;bottom:46px;right:12px;z-index:5;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.92);color:var(--text);border:1px solid var(--line);
  padding:7px 13px;border-radius:99px;font-weight:600;font-size:.78rem;
  cursor:pointer;backdrop-filter:blur(4px);transition:.2s
}
.demo-sound-btn:hover{background:var(--ember);color:#1a0c00;border-color:transparent}
.demo-step-indicator{position:relative;z-index:5;display:flex;gap:6px;justify-content:center;
  padding:10px 0;background:rgba(0,0,0,.05)}
.dsi{width:24px;height:4px;border-radius:2px;background:var(--line);transition:.25s}
.dsi.dsi-now{background:linear-gradient(90deg,var(--ember),var(--gold));
  box-shadow:0 0 12px rgba(255,90,31,.55);width:36px}
.dsi.dsi-done{background:rgba(255,90,31,.45)}

/* ---- Video modal ---- */
.vid-modal{position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}
.vid-modal-inner{width:100%;max-width:880px;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative;
  animation:vidIn .25s ease}
@keyframes vidIn{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.vid-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.7);color:#fff;border:1px solid var(--line);font-size:1.2rem;
  cursor:pointer;z-index:2}
.vid-close:hover{background:var(--ember);color:#1a0c00}
.vid-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-cap{padding:14px 18px;margin:0;color:var(--ember);
  font-weight:600;letter-spacing:.02em;border-top:1px solid var(--line)}

/* ============================================================
   LIBRARY HERO + PRESETS — engaging gym-style landing
   ============================================================ */
.lib-hero{padding:50px 0 30px;position:relative;overflow:hidden}
.lib-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(700px 460px at 80% 30%, rgba(255,90,31,.2), transparent 60%),
    radial-gradient(600px 600px at 5% 90%, rgba(255,194,75,.1), transparent 60%);
  pointer-events:none}
.lib-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center}
.lib-hero h1{font-size:clamp(2.4rem,5.5vw,4.4rem);margin:14px 0;line-height:1.02}
.lib-hero-lead{font-size:1.08rem;color:var(--muted);max-width:520px;margin:14px 0 26px}
.lib-hero-stats{display:flex;gap:34px;margin-top:8px}
.lib-hero-stats div b{font-family:var(--font-disp);font-size:2.2rem;display:block;color:var(--text);letter-spacing:.03em}
.lib-hero-stats div span{font-size:.78rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.lib-hero-figure{position:relative}
.lib-hero-card{
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:22px;padding:18px;
  box-shadow:0 30px 70px -25px rgba(255,90,31,.45);
  position:relative;overflow:hidden;
}
.lib-hero-card::after{
  content:"";position:absolute;top:-60px;right:-60px;width:240px;height:240px;
  background:radial-gradient(circle,var(--ember),transparent 70%);opacity:.32;pointer-events:none
}
.lib-hero-anim{position:relative;z-index:1;background:radial-gradient(circle at 50% 70%,#ffffff,#eef0f3);
  border-radius:14px;padding:18px;min-height:240px;display:grid;place-items:center}
.lib-hero-anim svg{max-width:240px;width:100%}
.lib-hero-vid{position:relative;z-index:1;border-radius:14px;overflow:hidden;background:#000;
  aspect-ratio:16/9}
.lib-hero-vid img,
.lib-hero-vid iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border:0;display:block}
.lib-hero-vid iframe{z-index:2}
.lib-hero-vid img{z-index:1}
.lib-hero-card-meta{display:flex;align-items:center;gap:10px;padding:14px 6px 4px;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--ember);text-transform:uppercase;flex-wrap:wrap}
.lib-hero-now{color:var(--text);letter-spacing:.04em;text-transform:none;font-weight:500}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 0 0 rgba(255,90,31,.6);animation:pulseGo 1.4s infinite}
@keyframes pulseGo{0%{box-shadow:0 0 0 0 rgba(255,90,31,.55)}70%{box-shadow:0 0 0 12px rgba(255,90,31,0)}100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}}

/* ---- Preset workouts ---- */
.preset-sec{padding:30px 0 50px}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.preset-card{
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:18px;padding:24px 22px;
  display:block;color:var(--text);position:relative;overflow:hidden;
  transition:.25s
}
.preset-card::before{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;
  background:radial-gradient(circle,rgba(255,90,31,.28),transparent 70%);transition:.3s}
.preset-card:hover{transform:translateY(-4px);border-color:var(--ember);
  box-shadow:0 22px 50px -22px rgba(255,90,31,.55)}
.preset-card:hover::before{transform:scale(1.4);opacity:.7}
.preset-icon{font-size:2.4rem;line-height:1;margin-bottom:8px;position:relative;z-index:1}
.preset-mins{position:absolute;top:18px;right:18px;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);background:rgba(255,194,75,.1);padding:5px 10px;
  border-radius:99px;border:1px solid rgba(255,194,75,.3);z-index:1}
.preset-card h3{font-size:1.55rem;letter-spacing:.04em;margin-bottom:4px;position:relative;z-index:1}
.preset-card p{color:var(--muted);font-size:.88rem;margin-bottom:14px;position:relative;z-index:1}
.preset-ex{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;position:relative;z-index:1}
.preset-ex span{background:var(--bg-2);border:1px solid var(--line);color:var(--muted);
  font-size:.72rem;padding:4px 9px;border-radius:99px}
.preset-ex .more{color:var(--ember);border-color:rgba(255,90,31,.4)}
.preset-go{display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(100deg,var(--ember),var(--ember-2));color:#1a0c00;
  padding:9px 18px;border-radius:99px;font-weight:700;font-size:.88rem;position:relative;z-index:1;
  box-shadow:0 10px 24px -10px rgba(255,90,31,.6)}

@media(max-width:900px){
  .lib-hero-grid{grid-template-columns:1fr;gap:30px}
  .lib-hero-stats{gap:20px}
}

/* ---- library page ---- */
.lib-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:24px}
.lib-head h2{margin-top:6px}
.lib-filter input{
  background:var(--panel);border:1px solid var(--line);border-radius:99px;
  padding:11px 18px;color:var(--text);min-width:260px;font-size:.92rem
}
.lib-filter input:focus{border-color:var(--ember);outline:none}

.cat-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.chip{
  background:var(--panel);border:1px solid var(--line);color:var(--muted);
  padding:8px 14px;border-radius:99px;font-size:.85rem;font-weight:600;
  cursor:pointer;transition:.2s;font-family:inherit
}
.chip:hover{border-color:rgba(255,90,31,.5);color:var(--text)}
.chip.on{background:linear-gradient(100deg,var(--ember),var(--ember-2));color:#1a0c00;border-color:transparent}

.cart-bar{
  position:sticky;top:74px;z-index:40;display:flex;justify-content:space-between;
  align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:28px;
  backdrop-filter:blur(10px);transition:.3s
}
.cart-bar.on{border-color:rgba(255,90,31,.5);box-shadow:0 12px 30px -12px rgba(255,90,31,.35)}
.cart-info{display:flex;align-items:center;gap:14px}
.cart-count{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-disp);font-size:1.4rem;color:#1a0c00;
  background:linear-gradient(135deg,var(--ember),var(--gold))}
.cart-info b{display:block;font-size:.92rem}
.cart-info small{display:block;font-size:.78rem;margin-top:2px}
.cart-actions{display:flex;gap:10px}

.ex-group{margin-bottom:42px}
.ex-group-head{font-family:var(--font-disp);font-size:1.6rem;letter-spacing:.04em;
  color:var(--text);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.ex-card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;cursor:pointer;transition:.25s;position:relative
}
.ex-card:hover{transform:translateY(-3px);border-color:rgba(255,90,31,.5);
  box-shadow:0 16px 30px -15px rgba(255,90,31,.4)}
.ex-card.picked{border-color:var(--ember);box-shadow:0 0 0 2px rgba(255,90,31,.35)}
.ex-card.picked .ex-add{background:var(--good);color:#062919;content:'✓'}
.ex-card-vid{position:relative;aspect-ratio:16/9;background:var(--panel-2);overflow:hidden}
.ex-card-vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;transition:transform .4s, filter .3s}
.ex-card:hover .ex-card-vid img{transform:scale(1.05);filter:brightness(.55)}
.ex-card-vid .ex-play{position:absolute;inset:0;display:grid;place-items:center;
  font-size:2.6rem;color:rgba(255,255,255,.85);
  text-shadow:0 4px 14px rgba(0,0,0,.6);pointer-events:none;
  opacity:.85;transition:.3s}
.ex-card:hover .ex-card-vid .ex-play{opacity:0;transform:scale(1.2)}
.ex-card-vid .ex-fb{position:absolute;inset:0;display:grid;place-items:center;
  font-size:3rem;color:var(--ember);
  background:linear-gradient(135deg,rgba(255,90,31,.18),rgba(255,194,75,.08))}
/* broken/blocked YouTube thumbnail → show the same branded fallback */
.ex-card-vid.noimg img{display:none}
.ex-card-vid.noimg .ex-play{opacity:0}
.ex-card-vid.noimg::after{content:"🏋️";position:absolute;inset:0;display:grid;
  place-items:center;font-size:3rem;
  background:linear-gradient(135deg,rgba(255,90,31,.18),rgba(255,194,75,.08))}
.ex-hover-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;
  animation:hvIn .4s ease both;pointer-events:none}
@keyframes hvIn{from{opacity:0}to{opacity:1}}
.ex-badge{position:absolute;top:8px;left:8px;font-size:.66rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  background:rgba(0,0,0,.6);color:#fff;padding:4px 9px;border-radius:99px;
  border:1px solid rgba(255,255,255,.12)}
.ex-card-vid .ex-fav{position:absolute;bottom:8px;right:8px;z-index:4;width:34px;height:34px;border-radius:50%;
  border:0;background:rgba(0,0,0,.5);color:#fff;font-size:1.05rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:transform .12s,background .15s}
.ex-card-vid .ex-fav:hover{transform:scale(1.14)}
.ex-card-vid .ex-fav.on{background:var(--ember);color:#fff;box-shadow:0 6px 16px -6px rgba(255,90,31,.7)}
.ex-add{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-disp);font-size:1.3rem;
  color:#1a0c00;background:linear-gradient(135deg,var(--ember),var(--gold));
  transition:.2s;box-shadow:0 6px 18px -8px rgba(255,90,31,.6)}
.ex-card.picked .ex-add::before{content:'✓';font-size:1.1rem}
.ex-card.picked .ex-add{font-size:0;background:var(--good)}
.ex-card-body{padding:12px 14px}
.ex-card-body b{display:block;font-size:.94rem;line-height:1.3}
.ex-card-body small{display:block;color:var(--muted);font-size:.76rem;margin-top:3px}

@media(max-width:700px){
  .lib-filter input{min-width:0;width:100%}
  .ex-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .cart-bar{top:70px}
  .demo-sound-btn{bottom:42px;font-size:.72rem;padding:6px 10px}
}

/* ---- responsive ------------------------------------------ */
@media(max-width:900px){
  .hero-grid,.grid-3,.price-grid,.tool-grid{grid-template-columns:1fr}
  .trial-banner{flex-direction:column;align-items:flex-start}
  .timer-wrap{width:230px;height:230px}
  #bigTime{font-size:2.8rem}
  .player-ctrls{flex-wrap:wrap}.player-ctrls .btn-lg{min-width:160px}
  .coach-panel{padding:16px 18px}
  .coach-now{font-size:1rem}
  .set-dots .dot{width:26px;height:26px;font-size:.85rem}
  .breath-bubble{width:70px;height:70px}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .gallery .g-wide{grid-column:span 2}
  .gallery .g-tall{grid-row:span 1}
  .howto-steps{grid-template-columns:1fr 1fr}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .dash{grid-template-columns:1fr}
  .side{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .side a{white-space:nowrap}
  .nav-links{position:fixed;inset:70px 0 auto 0;background:var(--bg-2);flex-direction:column;
    align-items:stretch;gap:4px;padding:16px;display:none;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links .nav-link{padding:12px 14px}
  .nav-sep{display:none}
  .nav-auth{flex-direction:column;align-items:stretch;gap:8px;margin-top:10px;
    padding-top:14px;border-top:1px solid var(--line)}
  .nav-auth .btn{width:100%;justify-content:center;padding:12px 18px}
  .nav-user{justify-content:center}
  .nav-toggle{display:block}
  .form-row{grid-template-columns:1fr}
}

/* ============================================================
   HOME 2.0 — modern conversion-focused landing components
   (marquee · stat band · bento · floating badges · sticky CTA)
   ============================================================ */

/* ---- hero upgrades --------------------------------------- */
.hero-trust{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
.hero-trust .stars{color:var(--gold);font-size:1rem;letter-spacing:2px}
.hero-trust small{color:var(--muted);font-size:.82rem}
.hero-trust .av-stack{display:flex}
.hero-trust .av-stack span{
  width:30px;height:30px;border-radius:50%;margin-left:-8px;border:2px solid var(--bg);
  display:grid;place-items:center;font-family:var(--font-disp);font-size:.85rem;color:#1a0c00;
  background:linear-gradient(135deg,var(--ember),var(--gold))}
.hero-trust .av-stack span:first-child{margin-left:0}
.hero-micro{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:.82rem;color:var(--muted)}
.hero-micro .dot{width:8px;height:8px;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:livePulse 2s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

.hero-figure{position:relative}
.float-badge{
  position:absolute;z-index:3;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:14px;padding:11px 15px;
  box-shadow:0 18px 40px -20px rgba(20,20,35,.28);animation:floaty 5s ease-in-out infinite}
.float-badge .fb-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-size:1.1rem;background:rgba(255,90,31,.14)}
.float-badge b{font-family:var(--font-disp);font-size:1.15rem;letter-spacing:.03em;line-height:1}
.float-badge span{display:block;font-size:.72rem;color:var(--muted)}
.float-badge.fb-tl{top:-18px;left:-26px;animation-delay:.2s}
.float-badge.fb-br{bottom:-20px;right:-22px;animation-delay:1.2s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---- infinite marquee strip ------------------------------ */
.marquee{position:relative;overflow:hidden;padding:18px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:46px;width:max-content;animation:scrollX 28s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--font-disp);font-size:1.5rem;letter-spacing:.08em;
  color:var(--muted);display:flex;align-items:center;gap:46px;white-space:nowrap}
.marquee-track span::after{content:"●";color:var(--ember);font-size:.7rem}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- bold stats band ------------------------------------- */
.stat-band{background:
  linear-gradient(120deg,rgba(255,90,31,.12),rgba(255,194,75,.05)),var(--bg-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:54px 22px}
.stat-cell{text-align:center}
.stat-cell .num{font-family:var(--font-disp);font-size:clamp(2.6rem,5vw,3.8rem);
  line-height:1;background:linear-gradient(100deg,var(--ember),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat-cell .lbl{display:block;margin-top:8px;font-size:.8rem;color:var(--muted);
  letter-spacing:.12em;text-transform:uppercase}
.stat-cell + .stat-cell{border-left:1px solid var(--line)}

/* ---- bento feature grid ---------------------------------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);gap:16px}
.bento-cell{position:relative;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);border-radius:20px;padding:26px;
  transition:transform .25s,border-color .25s;display:flex;flex-direction:column;justify-content:flex-end}
.bento-cell:hover{transform:translateY(-4px);border-color:rgba(255,90,31,.45)}
.bento-cell .b-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  font-size:1.3rem;background:rgba(255,90,31,.12);margin-bottom:auto}
.bento-cell h3{margin:16px 0 6px;letter-spacing:.03em}
.bento-cell p{color:var(--muted);font-size:.92rem}
.bento-cell.b-feat{grid-column:span 2;grid-row:span 2;
  background:linear-gradient(165deg,rgba(255,90,31,.16),var(--panel));border-color:rgba(255,90,31,.35)}
.bento-cell.b-feat h3{font-size:2rem}
.bento-cell.b-feat::after{content:"";position:absolute;top:-50px;right:-50px;width:200px;height:200px;
  background:radial-gradient(circle,var(--ember),transparent 70%);opacity:.3;pointer-events:none}
.bento-cell.b-wide{grid-column:span 2}
.bento-tag{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember);background:rgba(255,90,31,.12);
  padding:5px 11px;border-radius:99px;margin-bottom:14px}

/* ---- sticky mobile CTA ----------------------------------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  align-items:center;justify-content:space-between;gap:14px;
  padding:12px 18px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-top:1px solid var(--line)}
.sticky-cta b{font-family:var(--font-disp);font-size:1.2rem;letter-spacing:.03em}
.sticky-cta span{display:block;font-size:.72rem;color:var(--muted)}
.sticky-cta .btn{padding:11px 20px;white-space:nowrap}

/* ---- HOME 2.0 responsive (new components only) ----------- */
@media(max-width:900px){
  .hero-figure{margin-top:18px}
  .float-badge.fb-tl{left:0;top:-14px}
  .float-badge.fb-br{right:0;bottom:-14px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento-cell.b-feat{grid-column:span 2;grid-row:span 1}
  .bento-cell.b-wide{grid-column:span 2}
  .stat-band .wrap{grid-template-columns:repeat(2,1fr);gap:30px 12px;padding:40px 22px}
  .stat-cell:nth-child(odd){border-left:0}
  .stat-cell:nth-child(3),.stat-cell:nth-child(4){border-top:1px solid var(--line);padding-top:26px}
  .sticky-cta{display:flex}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr}
  .bento-cell.b-feat,.bento-cell.b-wide{grid-column:span 1}
  .marquee-track span{font-size:1.2rem}
}

/* ============================================================
   Progress charts + workout history  (added 19 Jun 2026)
   ============================================================ */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart rect{transition:opacity .15s}
.chart rect:hover{opacity:.82}
.chart-empty{
  padding:34px 18px;text-align:center;color:var(--muted);
  border:1px dashed var(--line);border-radius:var(--radius);font-size:.9rem;
}
.chart-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.chart-head h3{margin:0}
.chart-legend{color:var(--muted);font-size:.82rem}
.chart-legend b{color:var(--ember)}

/* segmented toggle (calories / minutes) */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg button{
  background:none;border:0;color:var(--muted);cursor:pointer;
  padding:5px 14px;border-radius:999px;font:inherit;font-size:.8rem;font-weight:600;
}
.seg button.on{background:var(--ember);color:#1a0c00}

/* history rows */
.hist-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.hist-row:last-child{border-bottom:0}
.hist-date{font-weight:600;color:var(--text)}
.hist-date small{display:block;color:var(--muted);font-weight:400;font-size:.78rem}
.hist-metrics{display:flex;gap:18px;text-align:right}
.hist-metrics span{color:var(--muted);font-size:.86rem}
.hist-metrics b{color:var(--text);font-size:1.05rem;display:block}

/* ============================================================
   Dashboard shell — shared sidebar polish (added 19 Jun 2026)
   ============================================================ */
.side{position:sticky;top:70px;align-self:start;height:calc(100vh - 70px);overflow-y:auto}
.side-label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:4px 14px 12px;opacity:.7}
.side .si{width:20px;text-align:center;display:inline-block;flex:none}
.side a.active{background:rgba(255,90,31,.10);color:var(--ember);font-weight:600}
.side-logout{margin-top:8px;border-top:1px solid var(--line);
  padding-top:14px !important;color:var(--ember)}
.main{min-width:0}            /* prevent grid blowout from wide content */
@media(max-width:900px){
  .side{position:static;height:auto;overflow:visible}
  .side-label{display:none}
  .side-logout{border-top:0;margin-top:0;padding-top:11px !important}
}

/* ---- Plan editor (plan-edit.php) ---- */
.pe-day{padding:18px}
.pe-day-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.pe-day-head strong{min-width:90px}
.pe-focus{flex:1;min-width:150px;margin:0;padding:8px 12px}
.pe-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.pe-name{flex:1;min-width:130px;font-weight:600}
.pe-f{display:flex;flex-direction:column;font-size:.72rem;color:var(--muted);gap:3px;margin:0}
.pe-f input{width:64px;padding:6px 8px;margin:0;text-align:center}
.pe-f input[type=text]{width:74px}
.pe-ctrls{display:flex;gap:6px}
.pe-ic{width:36px;height:36px;border:1px solid var(--line);background:var(--panel-2);
  border-radius:8px;cursor:pointer;color:var(--text);font-size:.95rem;line-height:1;
  transition:border-color .15s,color .15s}
.pe-ic:hover:not(:disabled){border-color:var(--ember);color:var(--ember)}
.pe-ic:disabled{opacity:.45;cursor:not-allowed}
.pe-del:hover{border-color:var(--ember);color:var(--ember)}
.pe-empty{color:var(--muted);font-size:.86rem;padding:10px 0 4px}
.pe-add{margin-top:12px}
.pe-select{width:100%;max-width:320px;padding:9px 12px;margin:0}
@media(max-width:560px){
  .pe-name{flex-basis:100%}
  .pe-f input{width:56px}
}

/* ============================================================
   Admin panel — dedicated chrome (dark top bar + admin sidebar)
   ============================================================ */
.admin-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:14px;height:58px;padding:0 22px;
  background:#15151a;border-bottom:1px solid #26262e}
.admin-brand{display:flex;align-items:center;gap:6px;font-family:var(--font-disp);
  font-size:1.25rem;color:#fff;text-decoration:none;letter-spacing:.02em}
.admin-brand span{color:var(--ember)}
.admin-brand em{font-style:normal;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:var(--ember);padding:3px 7px;border-radius:6px;margin-left:8px}
.admin-top-right{display:flex;align-items:center;gap:14px}
.admin-viewsite{color:#b9b9c4;font-size:.86rem;text-decoration:none}
.admin-viewsite:hover{color:#fff}
.admin-who{display:flex;align-items:center;gap:8px;color:#e7e7ee;font-size:.88rem;font-weight:600}
.admin-ava{width:30px;height:30px;border-radius:50%;background:var(--ember);color:#fff;
  display:grid;place-items:center;font-size:.85rem;font-weight:700}
.admin-top .btn-ghost{border-color:#3a3a44;color:#e7e7ee}
.admin-top .btn-ghost:hover{border-color:var(--ember);color:var(--ember)}
.admin-burger{display:none;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer}

.admin-shell{display:grid;grid-template-columns:236px 1fr;min-height:calc(100vh - 58px)}
.admin-side{background:var(--bg-2);border-right:1px solid var(--line);padding:22px 16px;
  position:sticky;top:58px;align-self:start;height:calc(100vh - 58px);overflow-y:auto}
.admin-side-label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:0 14px 10px}
.admin-side a{display:flex;gap:11px;align-items:center;padding:11px 14px;border-radius:10px;
  color:var(--muted);text-decoration:none;font-weight:500;margin-bottom:2px}
.admin-side a:hover{background:var(--panel);color:var(--text)}
.admin-side a.active{background:rgba(255,90,31,.10);color:var(--ember);font-weight:600}
.admin-side .si{width:20px;text-align:center;display:inline-block;flex:none}
.admin-side-back{margin-top:10px;border-top:1px solid var(--line);padding-top:14px !important;color:var(--ember)}
.admin-main{padding:34px;min-width:0}

/* admin dashboard quick-action cards */
.admin-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:0 0 28px}
.admin-action{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--text);transition:border-color .15s,transform .15s}
.admin-action:hover{border-color:var(--ember);transform:translateY(-2px)}
.admin-action .ico{font-size:1.5rem;line-height:1}
.admin-action b{display:block;font-size:.96rem}
.admin-action small{color:var(--muted);font-size:.78rem}

@media(max-width:860px){
  .admin-burger{display:block;order:-1}
  .admin-who .admin-viewsite{display:none}
  .admin-shell{grid-template-columns:1fr}
  .admin-side{position:fixed;left:0;top:58px;width:236px;z-index:40;height:calc(100vh - 58px);
    transform:translateX(-105%);transition:transform .2s;box-shadow:var(--shadow)}
  .admin-side.open{transform:translateX(0)}
}

/* ---- Rich-text editor (admin/posts.php) — zero-dependency WYSIWYG ---- */
.rte{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.rte-bar{display:flex;flex-wrap:wrap;gap:4px;padding:8px;background:var(--panel-2);
  border-bottom:1px solid var(--line)}
.rte-bar button{background:var(--panel);border:1px solid var(--line);border-radius:7px;
  padding:6px 10px;font-size:.82rem;cursor:pointer;color:var(--text);line-height:1.1}
.rte-bar button:hover{border-color:var(--ember);color:var(--ember)}
.rte-bar button.on{background:var(--ember);color:#fff;border-color:var(--ember)}
.rte-sep{width:1px;background:var(--line);margin:2px 4px}
.rte-editor{min-height:300px;max-height:60vh;overflow-y:auto;padding:16px 18px;outline:none;
  line-height:1.7;font-size:.98rem;color:var(--text)}
.rte-editor:empty:before{content:attr(data-ph);color:var(--muted)}
.rte-editor h2{font-size:1.5rem;margin:.7em 0 .3em;font-family:var(--font-disp)}
.rte-editor h3{font-size:1.2rem;margin:.7em 0 .3em;font-family:var(--font-disp)}
.rte-editor p{margin:.5em 0}
.rte-editor ul,.rte-editor ol{margin:.5em 0 .5em 1.5em}
.rte-editor li{margin:.2em 0}
.rte-editor blockquote{border-left:3px solid var(--ember);margin:.7em 0;padding:.2em 0 .2em 14px;color:var(--muted)}
.rte-editor a{color:var(--ember);text-decoration:underline}
.rte-source{display:block;min-height:300px;max-height:60vh;width:100%;padding:16px 18px;border:0;
  outline:none;resize:vertical;background:var(--panel);color:var(--text);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;line-height:1.6}

/* ============================================================
   UI KIT — shared form/layout components (added 20 Jun 2026)
   Replaces scattered inline styles with reusable classes so the
   whole app looks consistent and is mobile-friendly by default.
   ============================================================ */

/* --- page wrappers (centred, comfortable reading widths) --- */
.page{padding:46px 0}
.page-narrow{max-width:620px}
.page-mid{max-width:760px}
.page-head{margin-bottom:24px}
.page-head h2,.page-head h1{margin:8px 0 4px}
/* keyword H1s placed in section/page heads keep the smaller heading size */
.page-head h1,.section-head h1{font-size:clamp(2rem,4.5vw,3.4rem)}
.page-head p{color:var(--muted)}

/* --- accessible focus ring on every control --- */
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(255,90,31,.16)}
.btn:focus-visible,.chip:focus-visible,.seg button:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(255,90,31,.35)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none !important;box-shadow:none !important}

/* --- form fields: consistent label + control spacing --- */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field > label{margin:0 0 6px}
.field-hint{display:block;color:var(--muted);font-size:.8rem;margin-top:6px;line-height:1.5}
.label-opt{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
/* two-up grid that gracefully stacks on small screens */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:540px){.field-row{grid-template-columns:1fr}}

/* checkbox / radio option grid (replaces inline label styles) */
.check-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.check{display:flex;align-items:center;gap:9px;margin:0;cursor:pointer;
  padding:10px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--text);font-size:.9rem;letter-spacing:0;
  text-transform:none;transition:border-color .15s,background .15s}
.check:hover{border-color:rgba(255,90,31,.5)}
.check input{width:auto;margin:0;accent-color:var(--ember);flex:none}
.check:has(input:checked){border-color:var(--ember);background:rgba(255,90,31,.07)}

/* --- layout utilities --- */
.cluster{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cluster.end{align-items:flex-end}
.cluster.between{justify-content:space-between}
.cluster.tight{gap:8px}
.stack-sm > * + *{margin-top:10px}
.form-actions{margin-top:22px}

/* compact inline form (e.g. log-weight, mark-done widgets) */
.inline-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}
.inline-form .field{margin-bottom:0}
.inp-num{width:100%;max-width:150px}
@media(max-width:540px){.inp-num{max-width:none}.inline-form{align-items:stretch}
  .inline-form .btn{width:100%;justify-content:center}}

/* --- progress bar (goal tracking etc.) --- */
.progress{height:9px;background:var(--bg-2);border-radius:6px;overflow:hidden}
.progress > i{display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--ember-2),var(--ember));transition:width .4s}
.progress-cap{display:flex;justify-content:space-between;font-size:.84rem;
  color:var(--muted);margin-bottom:7px}
.progress-cap b{color:var(--text)}

/* --- callout / note box (plan projection, tips) --- */
.note-box{margin-top:18px;padding:16px;background:var(--bg);
  border:1px solid var(--line);border-radius:12px}
.note-box .nb-title{color:var(--gold);font-weight:700}
.note-box p{color:var(--muted);font-size:.9rem;margin-top:6px}
.note-box .nb-fine{font-size:.78rem;font-style:italic}

/* --- panel variants --- */
.panel.danger{border-color:rgba(255,90,31,.4)}
.panel.danger h3{color:var(--ember-2)}
.panel-sub{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.btn-danger{border-color:var(--ember);color:var(--ember)}
.btn-danger:hover{background:var(--ember);color:#fff}

/* --- avatar / profile photo — circular frame + floating edit button --- */
.avatar-edit{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.avatar-frame{position:relative;width:124px;height:124px}
.avatar-img{width:124px;height:124px;border-radius:50%;object-fit:cover;display:block;
  background:var(--bg-2);box-shadow:0 0 0 1px var(--line),0 10px 24px -12px rgba(0,0,0,.25)}
span.avatar-img{display:grid;place-items:center;overflow:hidden;
  font-family:var(--font-disp);font-size:2.8rem;color:#fff;
  background:linear-gradient(135deg,var(--ember),var(--gold))}
.avatar-pen{position:absolute;right:0;bottom:4px;width:40px;height:40px;border-radius:50%;
  background:var(--ember);color:#fff;border:3px solid var(--panel);cursor:pointer;
  display:grid;place-items:center;font-size:1rem;line-height:1;
  box-shadow:0 8px 18px -6px rgba(255,90,31,.75);transition:transform .15s}
.avatar-pen:hover{transform:scale(1.1)}
.avatar-pen:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,90,31,.45)}
.avatar-rm{color:var(--muted);font-size:.84rem;cursor:pointer}
.avatar-rm:hover{color:var(--ember)}

/* --- chat / coach --- */
.chat-empty{color:var(--muted)}
.chat-row{display:flex;margin:14px 0}
.chat-row.me{justify-content:flex-end}
.bubble{max-width:80%;padding:12px 16px;border-radius:14px;font-size:.93rem;
  line-height:1.5;border:1px solid var(--line);background:var(--bg-2);color:var(--text)}
.bubble.me{background:linear-gradient(100deg,var(--ember),var(--ember-2));
  color:#1a0c00;border-color:transparent;border-bottom-right-radius:4px}
.bubble.coach{border-bottom-left-radius:4px}
.chat-form{display:flex;gap:10px;margin-top:14px}
.chat-form input{margin:0}
.chat-clear{color:var(--muted);font-size:.8rem;display:inline-block;margin-top:12px}
.chat-clear:hover{color:var(--ember)}
.fine-print{color:var(--muted);font-size:.82rem;margin-top:14px}

/* --- empty states --- */
.empty-state{text-align:center;padding:46px 24px;margin-top:22px}
.empty-state p{color:var(--muted);margin:12px 0 20px}

/* --- 404 error page --- */
.err-page{max-width:560px;text-align:center;padding:70px 20px 90px;margin:0 auto}
.err-code{font-family:var(--font-disp);font-size:clamp(5rem,18vw,9rem);line-height:1;
  background:linear-gradient(135deg,var(--ember),var(--gold));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:var(--ember)}
.err-page h1{font-size:clamp(1.6rem,5vw,2.4rem);margin:6px 0 12px}
.err-page p{color:var(--muted);font-size:1.05rem;line-height:1.6;margin-bottom:26px}
.err-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}
.err-links{color:var(--muted);font-size:.9rem}
.err-links span{font-weight:600;color:var(--text);margin-right:6px}
.err-links a{color:var(--ember)}

/* --- legal / policy pages + contact --- */
.legal{max-width:760px;padding:50px 0}
.legal-head{margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.legal-head h1{font-size:clamp(2rem,5vw,2.8rem);margin:8px 0 6px;line-height:1.15}
.legal-lead{color:var(--muted);font-size:1.08rem;line-height:1.6}
.legal-updated{color:var(--muted);font-size:.82rem;margin-top:12px;
  letter-spacing:.03em;text-transform:uppercase}
.legal-body{line-height:1.75;font-size:1.0rem;color:var(--text)}
.legal-body h2{font-family:var(--font-disp);font-size:1.45rem;margin:1.6em 0 .5em}
.legal-body h3{font-family:var(--font-disp);font-size:1.15rem;margin:1.3em 0 .4em}
.legal-body p{margin:.9em 0;color:var(--muted)}
.legal-body p strong{color:var(--text)}
.legal-body ul{margin:.9em 0 1.1em 1.3em}
.legal-body li{margin:.5em 0;color:var(--muted)}
.legal-body li strong{color:var(--text)}
.legal-body a{color:var(--ember);text-decoration:underline}
.legal-note{background:linear-gradient(120deg,rgba(255,90,31,.12),rgba(255,194,75,.06));
  border:1px solid rgba(255,90,31,.35);border-radius:12px;padding:16px 18px;margin:6px 0 8px;
  color:var(--text);line-height:1.6}
.legal-foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.9rem}
.legal-foot a{color:var(--ember)}

.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 26px}
.contact-card{display:flex;flex-direction:column;gap:4px;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;
  color:var(--text);transition:border-color .15s,transform .15s}
a.contact-card:hover{border-color:var(--ember);transform:translateY(-2px)}
.contact-card .cc-ic{font-size:1.5rem}
.contact-card b{font-size:.98rem}
.contact-card span{color:var(--muted);font-size:.86rem}
.contact-card a{color:var(--ember)}
@media(max-width:620px){.contact-grid{grid-template-columns:1fr}}

/* footer bottom bar */
.footer-bottom{margin-top:30px;border-top:1px solid var(--line);padding-top:20px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.footer-legal a{color:var(--muted)}
.footer-legal a:hover{color:var(--ember)}

/* --- blog --- */
.blog-card{display:flex;flex-direction:column}
.blog-card p{margin-top:10px;color:var(--muted)}
.blog-read{color:var(--ember);font-size:.86rem;display:inline-block;margin-top:14px;font-weight:600}
.blog-article{padding:50px 0;max-width:720px}
.blog-back{color:var(--ember);font-size:.88rem;font-weight:600}
.blog-title{font-size:clamp(2rem,5vw,3rem);margin:18px 0 6px;line-height:1.15}
.blog-meta{color:var(--muted);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.blog-lead{color:var(--muted);font-size:1.1rem;margin-top:14px;line-height:1.6}
.blog-body{margin-top:26px;line-height:1.8;font-size:1.02rem}
.blog-body h2{font-family:var(--font-disp);font-size:1.7rem;margin:1.4em 0 .4em}
.blog-body h3{font-family:var(--font-disp);font-size:1.3rem;margin:1.2em 0 .4em}
.blog-body p{margin:1em 0}
.blog-body ul,.blog-body ol{margin:1em 0 1em 1.4em}
.blog-body li{margin:.4em 0}
.blog-body a{color:var(--ember);text-decoration:underline}
.blog-body blockquote{border-left:3px solid var(--ember);margin:1.2em 0;padding:.4em 0 .4em 16px;
  color:var(--muted);font-style:italic}
.blog-body img{border-radius:12px;margin:1em 0}
.blog-cta{margin-top:44px;text-align:center}
.blog-cta .panel-sub{max-width:420px;margin:6px auto 16px}

/* --- leaderboard & challenges (community) --- */
.seg .seg-link{display:inline-block;text-decoration:none;color:var(--muted);
  padding:7px 16px;border-radius:999px;font-size:.84rem;font-weight:600;transition:color .15s}
.seg .seg-link:hover{color:var(--text)}
.seg .seg-link.on{background:var(--ember);color:#1a0c00;font-weight:700}

.lb-you{display:flex;align-items:center;gap:16px;margin-bottom:18px;padding:16px 20px;
  border-radius:14px;background:linear-gradient(120deg,rgba(255,90,31,.14),rgba(255,194,75,.07));
  border:1px solid rgba(255,90,31,.35)}
.lb-you-rank{font-family:var(--font-disp);font-size:2.2rem;line-height:1;color:var(--ember)}
.lb-you-meta{display:flex;flex-direction:column}
.lb-you-meta strong{font-size:1rem}
.lb-you-meta span{color:var(--muted);font-size:.86rem}

.lb-row{display:flex;align-items:center;gap:14px;padding:11px 22px;border-bottom:1px solid var(--line)}
.lb-row:last-child{border-bottom:0}
.lb-row.me{background:rgba(255,90,31,.07)}
.lb-rank{width:30px;text-align:center;font-size:1.2rem;flex:none}
.lb-rank .lb-num{font-family:var(--font-disp);font-size:1rem;color:var(--muted)}
.lb-ava{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;
  display:grid;place-items:center;background:var(--bg-2)}
.lb-ava-ph{color:#fff;font-weight:700;background:linear-gradient(135deg,var(--ember),var(--gold))}
.lb-name{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-tag{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:var(--ember);color:#fff;padding:2px 7px;border-radius:999px;margin-left:6px}
.lb-val{font-weight:700;color:var(--text);flex:none}
.lb-val small{color:var(--muted);font-weight:400;font-size:.78rem}
.lb-row.top .lb-name{color:var(--ember)}

.ch-card{padding:22px}
.ch-head{display:flex;gap:14px;align-items:flex-start}
.ch-ic{font-size:2rem;line-height:1;flex:none}
.ch-title{flex:1;min-width:0}
.ch-title h3{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ch-done{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--good);background:rgba(52,211,153,.12);padding:3px 9px;border-radius:999px}
.ch-join{flex:none}
.ch-prog{margin:18px 0 4px}
.ch-standings{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.ch-stand-row{display:flex;align-items:center;gap:11px;padding:7px 0}
.ch-stand-rank{width:24px;text-align:center;flex:none}
.ch-stand-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-stand-val{font-weight:600;flex:none}
.ch-stand-val small{color:var(--muted);font-weight:400;font-size:.76rem}
.ch-ended{opacity:.72}

/* dashboard community widget */
.dash-community{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.dc-rank{text-align:center;padding-right:22px;border-right:1px solid var(--line)}
.dc-rank-num{font-family:var(--font-disp);font-size:2.4rem;line-height:1;color:var(--ember)}
.dc-rank-lbl{color:var(--muted);font-size:.76rem;margin-top:4px}
.dc-ch{min-width:0}
@media(max-width:540px){
  .dash-community{grid-template-columns:1fr;gap:16px}
  .dc-rank{border-right:0;border-bottom:1px solid var(--line);padding:0 0 14px}
}

/* --- toggle switch --- */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.switch{position:relative;display:inline-block;width:50px;height:28px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--line);border-radius:999px;
  cursor:pointer;transition:background .2s}
.switch .slider:before{content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;
  background:#fff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .2s}
.switch input:checked + .slider{background:var(--ember)}
.switch input:checked + .slider:before{transform:translateX(22px)}
.switch input:focus-visible + .slider{box-shadow:0 0 0 3px rgba(255,90,31,.35)}

/* --- segmented toggle: bigger tap target + clearer active --- */
.seg button{padding:7px 16px;font-size:.84rem;transition:color .15s}
.seg button:hover:not(.on){color:var(--text)}
.seg button.on{font-weight:700}

/* ============================================================
   BLOG SYSTEM — admin editor + public article
   ============================================================ */
/* admin sub-nav tabs */
.blog-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 20px}
.blog-tab{padding:10px 16px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;
  margin-bottom:-1px;border-radius:8px 8px 0 0}
.blog-tab:hover{color:var(--text)}
.blog-tab.on{color:var(--ember);border-bottom-color:var(--ember)}

/* editor 2-column layout */
.blog-editor{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.be-main,.be-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.be-side .panel{position:sticky;top:0}
.be-h{margin:0 0 12px;font-size:1rem;border-left:3px solid var(--ember);padding-left:10px}
.be-lbl{display:block;font-weight:600;font-size:.85rem;margin:14px 0 6px;color:var(--text)}
.be-lbl:first-of-type{margin-top:0}
.req{color:var(--ember)}
.be-opt{color:var(--muted);font-weight:400;font-size:.8rem}
.be-count{float:right;color:var(--muted);font-weight:400;font-size:.78rem}
.be-inp{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);
  color:var(--text);font:inherit;font-size:.92rem}
.be-inp:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(255,90,31,.18)}
textarea.be-inp{resize:vertical}
.be-hint{color:var(--muted);font-size:.78rem;margin:6px 0 0;line-height:1.5}
.be-hint code{background:var(--bg);padding:1px 5px;border-radius:4px;border:1px solid var(--line);font-size:.74rem;word-break:break-all}
.be-feat{width:100%;border-radius:10px;border:1px solid var(--line);margin-bottom:10px;display:block}

/* markdown editor */
.md-tabs{display:flex;gap:4px;margin-bottom:0}
.md-tab{padding:7px 16px;font-weight:600;font-size:.85rem;color:var(--muted);border:1px solid var(--line);
  border-bottom:none;border-radius:8px 8px 0 0;background:var(--bg)}
.md-tab.on{color:var(--ember);background:var(--panel);border-color:var(--line)}
.md-pane{border:1px solid var(--line);border-radius:0 10px 10px 10px;padding:12px;background:var(--panel)}
.md-toolbar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.md-toolbar button{padding:6px 10px;border:1px solid var(--line);background:var(--bg);border-radius:7px;
  color:var(--text);font-size:.82rem;cursor:pointer;line-height:1}
.md-toolbar button:hover{border-color:var(--ember);color:var(--ember)}
.md-area{font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);font-size:.88rem;line-height:1.6;min-height:340px}
#pane-preview .blog-body{min-height:340px}

/* SEO score widget */
.seo-score{display:flex;align-items:center;gap:12px;margin:16px 0 8px}
.seo-score-num{font-family:var(--font-disp);font-size:1.8rem;font-weight:800;color:var(--ember)}
.seo-bar{flex:1;height:8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seo-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ember),var(--gold));transition:width .3s}
.seo-checks{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:6px}
.seo-checks li{position:relative;padding-left:24px;font-size:.82rem;color:var(--muted)}
.seo-checks li:before{content:"○";position:absolute;left:4px;color:var(--muted)}
.seo-checks li.ok{color:var(--text)}
.seo-checks li.ok:before{content:"✓";color:var(--good)}

/* Google preview */
.gpreview{margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.gp-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.gp-title{color:#1a0dab;font-size:1rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-url{color:#006621;font-size:.78rem;margin:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-desc{color:var(--muted);font-size:.8rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- public blog: cards with featured image ---- */
.blog-grid .blog-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.blog-card-img{height:170px;background-size:cover;background-position:center;background-color:var(--bg)}
.blog-card-img.noimg{display:flex;align-items:center;justify-content:center;font-size:2.6rem;
  background:linear-gradient(135deg,rgba(255,90,31,.12),rgba(255,170,60,.12))}
.blog-card-body{padding:16px 18px 18px}
.blog-card-cat{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ember);font-weight:700}
.blog-card-body h3{margin:7px 0 6px;font-size:1.08rem;line-height:1.3}

/* ---- public blog: single article ---- */
.blog-cat{display:inline-block;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ember);font-weight:700;margin-bottom:6px}
.blog-hero-img{max-width:100%;max-height:480px;width:auto;height:auto;border-radius:14px;border:1px solid var(--line);margin:6px auto 22px;display:block}
.blog-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.blog-tags .tag{font-size:.78rem;color:var(--muted);background:var(--bg);border:1px solid var(--line);
  padding:4px 10px;border-radius:999px}

@media(max-width:860px){
  .blog-editor{grid-template-columns:1fr}
  .be-side .panel{position:static}
}

/* ============================================================
   PER-EXERCISE SEO PAGE  (/exercise/<slug>)
   ============================================================ */
.ex-page{max-width:1000px;margin:0 auto;padding:30px 0 80px}
.ex-crumbs{font-size:.82rem;color:var(--muted);margin-bottom:18px}
.ex-crumbs a{color:var(--ember)}
.ex-page-grid{display:grid;grid-template-columns:360px 1fr;gap:32px;align-items:start}
.ex-demo{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.ex-demo img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.ex-demo img + img{border-top:1px solid var(--line)}
.ex-demo-svg{padding:18px;display:flex;justify-content:center}
.ex-facts{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ex-facts > div{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;font-size:.88rem;border-top:1px solid var(--line)}
.ex-facts > div:first-child{border-top:0}
.ex-fact-l{color:var(--muted)}
.ex-fact-v{font-weight:600;text-align:right}
.ex-page-main h1{font-size:clamp(1.9rem,4vw,2.8rem);margin:6px 0 16px;line-height:1.1}
.ex-copy p{margin:0 0 12px;line-height:1.75}
.ex-page-main h2{font-size:1.3rem;margin:28px 0 12px}
.ex-steps{padding-left:20px;margin:0}
.ex-steps li{margin:9px 0;line-height:1.6}
.ex-mistakes{list-style:none;padding:0;margin:0}
.ex-mistakes li{position:relative;padding-left:26px;margin:9px 0;line-height:1.6}
.ex-mistakes li:before{content:"\26A0";position:absolute;left:0;color:var(--ember)}
.ex-related{margin-top:42px;border-top:1px solid var(--line);padding-top:26px}
.ex-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ex-related-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:var(--panel);transition:border-color .15s,transform .15s}
.ex-related-card:hover{border-color:var(--ember);transform:translateY(-2px)}
.ex-related-img{height:92px;background-size:cover;background-position:center;background-color:var(--bg)}
.ex-related-img.noimg{display:flex;align-items:center;justify-content:center;font-size:1.7rem;
  background:linear-gradient(135deg,rgba(255,90,31,.12),rgba(255,170,60,.12))}
.ex-related-name{padding:10px 12px;font-size:.86rem;font-weight:600;line-height:1.3}
.ex-page .blog-cta{margin-top:34px}
/* library card -> guide link */
.ex-guide{display:inline-block;margin-top:6px;font-size:.76rem;color:var(--ember);font-weight:700}
.ex-guide:hover{text-decoration:underline}
@media(max-width:760px){ .ex-page-grid{grid-template-columns:1fr} }

/* ---- brand logo images (header / footer / admin) ---- */
.logo-img{height:38px;width:auto;display:block}
.foot-logo{height:46px}
.admin-brand{display:inline-flex;align-items:center;gap:8px}
.admin-brand-ico{width:30px;height:30px;border-radius:8px;background:#fff;padding:3px;object-fit:contain;flex:none}
@media(max-width:600px){ .logo-img{height:34px} }