body { font-family: Inter, Arial, sans-serif; background:#0b1220; color:#e9eef8; margin:0; }
.page { padding:22px 28px 44px; display:grid; gap:18px; padding-bottom: calc(44px + env(safe-area-inset-bottom)); }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:18px 24px; background:#10192b; border-bottom:1px solid #24314d; gap:16px; padding-top: calc(18px + env(safe-area-inset-top)); }
.topbar-title { min-width:0; }
.topbar-title h1 { font-size: clamp(18px, 4vw, 28px); }
.icon-nav { display:flex; gap:8px; flex-wrap:nowrap; justify-content:flex-end; margin-left:auto; }
.icon-nav a { color:#eaf3ff; text-decoration:none; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #31425f; border-radius:12px; background:#0d1525; box-shadow:0 10px 18px rgba(0,0,0,.18); }
.icon-nav a span { font-size:18px; line-height:1; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.card { background:#121b2e; border:1px solid #24314d; border-radius:16px; padding:16px; }
.eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:1.4px; color:#7ea2d6; }
.inline-list { display:flex; gap:10px; flex-wrap:wrap; }
.topbar-switcher { display:flex; gap:8px; align-items:center; }
.topbar-switcher .badge { text-decoration:none; }
@media (max-width: 720px) {
  .topbar-switcher { gap:6px; }
  .topbar-switcher .badge { padding:6px 8px; font-size:12px; }
}
.program-level-list .badge { padding:8px 12px; }
.program-level-list { margin-top:10px; }
.program-weeks-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.program-weeks-grid .badge { white-space:normal; line-height:1.2; text-align:center; }
.calendar-day { display:flex; flex-direction:column; gap:4px; padding:10px; border-radius:12px; border:1px solid #31425f; background:#17253d; color:#eef4ff; text-decoration:none; min-height:58px; text-align:center; justify-content:center; }
.calendar-day span { font-weight:700; }
.calendar-day.active { background:#2d68ff; border-color:#7ea2d6; box-shadow:0 0 0 2px rgba(126,162,214,.18); }
button, .icon-nav a { transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease; }
button:hover, .icon-nav a:hover { transform: translateY(-1px); box-shadow:0 12px 22px rgba(0,0,0,.22); }
.card { box-shadow:0 12px 26px rgba(0,0,0,.14); }
.session-stats, .premium-panel, .guided-panel { border-radius:18px; }
.muted { color:#9fb3ce; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; }
label { display:grid; gap:6px; font-size:14px; color:#c8d6ed; }
input, textarea, select, button { border-radius:10px; border:1px solid #31425f; background:#0d1525; color:#eef4ff; padding:9px 12px; font:inherit; }
button { cursor:pointer; background:#2d68ff; border-color:#2d68ff; font-weight:600; }
button.secondary { background:#17253d; border-color:#3a5075; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.timer { font-size:32px; font-weight:700; letter-spacing:0.02em; }
.guided-panel { margin:14px 0 18px; padding:14px; border:1px solid #31425f; border-radius:18px; background:#0d1525; }
  .guided-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.session-badges { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.coach-badge { background: linear-gradient(135deg, rgba(45,104,255,.24), rgba(146,230,167,.18)); border-color: rgba(146,230,167,.45); color:#eaf3ff; box-shadow:0 10px 22px rgba(45,104,255,.16); }
.exercise-hero { display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:start; }
.machine-image { width:100%; max-width:220px; border-radius:18px; border:1px solid #31425f; background:#10192b; }
.coach-big { font-size:18px; font-weight:700; color:#e9eef8; }
.notice { padding:10px 12px; border:1px solid #845f0a; background:#2a210c; border-radius:12px; color:#f9d988; }
  .meal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .meal-card { min-height: 0; }
.calendar-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(82px,1fr)); gap:8px; }
.month-grid { grid-template-columns: repeat(auto-fit,minmax(52px,1fr)); }
.calendar-day { display:flex; flex-direction:column; gap:4px; padding:10px; border-radius:12px; border:1px solid #31425f; background:#17253d; color:#eef4ff; text-decoration:none; min-height:58px; }
.calendar-day.active { background:#2d68ff; border-color:#7ea2d6; box-shadow:0 0 0 2px rgba(126,162,214,.18); }
.past { opacity:.62; }
.calendar-day small { color:#c8d6ed; text-transform:uppercase; letter-spacing:.8px; font-size:10px; }
.session-stats .timer { font-size:clamp(42px, 14vw, 88px); line-height:1; }
.session-primary { font-size:clamp(26px, 6vw, 40px); line-height:1.05; }
.session-footnote { margin-top:10px; font-size:12px; text-align:left; }
.session-topline { display:grid; width:100%; gap:12px; grid-template-columns: 1.6fr 0.9fr 1.5fr; align-items:stretch; margin-top:14px; }
.stat-card { position:relative; overflow:hidden; min-width:0; }
.stat-card::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.8; }
.stat-card .eyebrow { position:relative; z-index:1; }
.stat-card .timer, .stat-card .stat-note, .stat-card .reps-meter { position:relative; z-index:1; }
.stat-reps::before { background: radial-gradient(circle at top left, rgba(45,104,255,.30), transparent 55%); }
.stat-rest::before { background: radial-gradient(circle at top left, rgba(247,183,51,.22), transparent 58%); }
.stat-time::before { background: radial-gradient(circle at top left, rgba(146,230,167,.20), transparent 58%); }
.stat-card { border:1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(18,27,46,.96), rgba(13,21,37,.96)); backdrop-filter: blur(10px); box-shadow: 0 18px 45px rgba(0,0,0,.26); }
.stat-reps { padding:18px 16px; }
.stat-rest { padding:14px 14px; }
.stat-time { padding:14px 16px; }
.stat-reps .timer { font-size: clamp(32px, 6vw, 72px); }
.stat-rest .timer { font-size: clamp(22px, 4.8vw, 46px); }
.stat-time .timer { font-size: clamp(44px, 9vw, 92px); }
.stat-note { margin-top:6px; color:#9fb3ce; font-size:12px; text-transform:uppercase; letter-spacing:.8px; }
.session-topline .card:nth-child(1) { text-align:left; }
.session-topline .card:nth-child(2) { text-align:center; }
.session-topline .card:nth-child(3) { text-align:right; }
.session-topline .card.rest-active { border-color:#f7b733; box-shadow:0 0 0 2px rgba(247,183,51,.25), 0 0 18px rgba(247,183,51,.18); }
.session-topline .card.rest-active .eyebrow { color:#ffd36b; }
.session-topline .card.rest-active .timer { color:#ffd36b; }
.premium-panel { border-color: rgba(45,104,255,.28); box-shadow: 0 28px 80px rgba(0,0,0,.38); }
.premium-stage { background: radial-gradient(circle at top, rgba(45,104,255,.10), transparent 42%), linear-gradient(180deg, rgba(12,18,32,.98), rgba(13,21,37,.98)); }
.premium-next { display:flex; flex-direction:column; gap:6px; }
.premium-done { border-color:#1b5e3b; background:#0f1f18; color:#93f0b2; }
.premium-form-grid label { background: rgba(255,255,255,.02); border-radius:12px; padding:10px; border:1px solid rgba(255,255,255,.06); }
.premium-actions button { min-width: 160px; }
.reps-meter { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-variant-numeric: tabular-nums; }
.reps-main { font-size: clamp(34px, 9vw, 64px); font-weight:800; color:#eef4ff; line-height:1; }
.reps-total { font-size:14px; color:#9fb3ce; white-space:nowrap; }
.reps-meter { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-variant-numeric: tabular-nums; }
.reps-main { font-size: clamp(34px, 9vw, 64px); font-weight:800; color:#eef4ff; line-height:1; }
.reps-total { font-size:14px; color:#9fb3ce; white-space:nowrap; }
@media (max-width: 720px) {
  .page { padding:14px 12px 30px; gap:12px; }
  .topbar { padding:12px 10px; align-items:center; }
  .topbar-title h1 { font-size: 17px; margin-bottom:0; }
  .icon-nav { gap:6px; }
  .icon-nav a { width:34px; height:34px; border-radius:10px; }
  .session-topline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap:4px; }
  .session-topline .card { text-align:center; min-width:0; padding:8px 6px; }
  .stat-reps, .stat-rest, .stat-time { padding:8px 6px; }
  .stat-reps .timer { font-size: clamp(14px, 3.9vw, 18px); }
  .stat-rest .timer { font-size: clamp(12px, 3.5vw, 16px); }
  .stat-time .timer { font-size: clamp(16px, 4.4vw, 22px); }
  .stat-card .eyebrow { font-size: 7px; line-height:1; }
  .reps-main { font-size: clamp(14px, 3.6vw, 18px); }
  .reps-total { font-size:8px; }
  .premium-actions button { padding:8px 7px; font-size:11px; }
  .guided-panel { padding:12px; }
  .exercise-hero { grid-template-columns:1fr; gap:12px; text-align:center; }
  .machine-image { max-width:100%; margin:0 auto; }
  .premium-form-grid { grid-template-columns:1fr; gap:8px; }
  .premium-form-grid label { padding:10px; text-align:left; }
  .premium-form-grid input { width:100%; min-width:0; box-sizing:border-box; }
  .premium-actions { flex-direction:row; flex-wrap:nowrap; align-items:stretch; gap:6px; }
  .premium-actions button { width:0; min-width:0; flex:1 1 0; padding:9px 8px; font-size:12px; white-space:normal; line-height:1.15; }
  .premium-actions button.secondary { background:#17253d; }
  .session-badges { justify-content:center; }
  .premium-next, .premium-done { text-align:left; }
  .session-primary { font-size: clamp(19px, 5vw, 26px); text-align:center; }
  .session-subtitle { text-align:center; }
  .coach-big { font-size:17px; }
  .notice { font-size:14px; }
  .exercise-hero h3 { font-size: 22px; line-height:1.1; text-align:center; }
  #exercise-meta { text-align:center; }
  .reps-meter { justify-content:center; flex-wrap:wrap; }
  .reps-total { white-space:normal; }
}