:root{
  --bg:#121212; --surface:#1C1C1C; --surface2:#242424;
  --ink:#F5F3EF; --muted:#9A968D; --primary:#FF5A1F; --line:#2D2D2D; --done:#4ADE80;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:'Manrope', sans-serif; background:var(--bg); color:var(--ink);
  -webkit-tap-highlight-color: transparent;
}
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }

.screen{
  display:none; flex-direction:column; min-height:100vh;
  padding-bottom: env(safe-area-inset-bottom);
}
.screen.active{ display:flex; }

.center-msg{ flex:1; display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:600; padding:20px; text-align:center; }

.top{ padding:0 20px; flex-shrink:0; display:flex; flex-direction:column; gap:4px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; }
.eyebrow{ font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.02em; }
.h1{ margin:2px 0 0 0; font-size:24px; font-weight:800; line-height:1.2; }
.muted{ color:var(--muted); }

.pillrow{ margin:16px 20px 0 20px; flex-shrink:0; display:flex; gap:8px; }
.pill{ background:var(--surface); border-radius:12px; padding:10px 14px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; }

.scroll{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }

.ex-card{ background:var(--surface); border-radius:16px; padding:12px; display:flex; align-items:center; gap:12px; }
.ex-thumb{ width:48px; height:48px; border-radius:12px; overflow:hidden; flex-shrink:0; background:var(--surface2); display:flex; align-items:center; justify-content:center; }
.ex-thumb img{ width:100%; height:100%; object-fit:cover; }
.ex-name{ font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ex-sets{ font-size:13px; color:var(--muted); font-weight:600; margin-top:2px; }
.tag{ font-size:12px; font-weight:700; color:#FF5A1F; background:rgba(255,90,31,0.14); border-radius:999px; padding:5px 10px; flex-shrink:0; display:inline-block; }

.jump-card{ cursor:pointer; font-family:inherit; }
.jump-card.current{ box-shadow:0 0 0 2px var(--primary) inset; }

.sticky-cta{ flex-shrink:0; padding:14px 20px calc(22px + env(safe-area-inset-bottom)) 20px; background:linear-gradient(180deg, rgba(18,18,18,0) 0%, var(--bg) 40%); }
.btn-primary{ width:100%; display:block; background:var(--primary); color:#16140F; font-size:16px; font-weight:800; text-align:center; padding:16px; border-radius:16px; border:none; }
.btn-primary:disabled{ opacity:.5; }
.btn-secondary{ width:100%; display:block; background:var(--surface2); color:var(--ink); font-size:15px; font-weight:800; text-align:center; padding:16px; border-radius:16px; border:none; }
.alt-btn{ width:100%; background:var(--surface); border:none; border-radius:16px; padding:14px 16px; font-size:14px; font-weight:700; color:var(--ink); text-align:center; }

.icon-btn{ width:32px; height:32px; border-radius:16px; background:var(--surface2); border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.ex-image{ margin:16px 20px 0 20px; border-radius:20px; overflow:hidden; height:200px; flex-shrink:0; background:var(--surface); display:flex; align-items:center; justify-content:center; }
.ex-image img{ width:100%; height:100%; object-fit:cover; }

.tracker{ background:var(--surface); border-radius:20px; padding:20px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.tracker-label{ font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.04em; text-align:center; }
.tracker-big{ font-size:52px; font-weight:800; line-height:1; }
.tracker-big .unit{ font-size:20px; color:var(--muted); font-weight:700; }
.rest-big{ font-size:56px; font-weight:800; color:#FF5A1F; line-height:1; }
.rest-big .unit{ font-size:22px; color:var(--muted); font-weight:700; }
.set-dots{ display:flex; gap:6px; }
.set-dot{ width:9px; height:9px; border-radius:5px; background:var(--line); }
.set-dot.filled{ background:var(--primary); }
.skip-link{ margin-top:6px; background:none; border:none; color:var(--muted); font-size:14px; font-weight:700; text-decoration:underline; }

.tech-toggle{ width:100%; background:var(--surface); border:none; border-radius:16px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; color:var(--ink); }
.tech-body{ background:var(--surface); border-radius:0 0 16px 16px; margin-top:-2px; padding:0 16px 16px 16px; font-size:14px; line-height:1.55; color:var(--muted); }
.video-link{ display:block; background:var(--surface); border-radius:16px; padding:14px 16px; font-size:14px; font-weight:700; text-decoration:none; color:var(--ink); }

.done-center{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:0 20px; }
.check-circle{ width:88px; height:88px; border-radius:44px; background:rgba(74,222,128,0.14); display:flex; align-items:center; justify-content:center; }
.stat-card{ flex:1; background:var(--surface); border-radius:16px; padding:16px 10px; }
.stat-num{ font-size:24px; font-weight:800; }
.stat-label{ font-size:12px; color:var(--muted); font-weight:600; margin-top:2px; }