:root{
  --bg:#090d16;
  --surface:#151c29;
  --surface-hi:#1b2434;
  --surface-low:#101722;
  --field:#111926;
  --text:#f3f6fb;
  --muted:#8b98ad;
  --line:rgba(255,255,255,.08);
  --blue:#4eaaff;
  --purple:#785cff;
  --green:#47d18d;
  --shadow-out:14px 16px 32px rgba(0,0,0,.42),-8px -8px 22px rgba(255,255,255,.025);
  --shadow-in:inset 6px 7px 14px rgba(0,0,0,.38),inset -5px -5px 11px rgba(255,255,255,.025);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at 12% 0%,rgba(78,170,255,.09),transparent 24%),
    radial-gradient(circle at 88% 0%,rgba(120,92,255,.08),transparent 28%),
    linear-gradient(145deg,#0c111b,#070a11 72%);
  color:var(--text);
}
body{min-height:100vh}
button,input,select{font:inherit}
button,a{cursor:pointer}
a{text-decoration:none}

.app-shell{
  width:min(1220px,calc(100% - 52px));
  margin:0 auto;
  padding:24px 0 42px;
}
.screen{min-height:calc(100vh - 92px)}
.hidden{display:none!important}

/* Header */
.section-head{padding:0 2px 18px}
.section-kicker{
  display:block;
  margin-bottom:7px;
  color:#7dbbff;
  font-size:10px;
  font-weight:950;
  letter-spacing:.19em;
  text-transform:uppercase;
}
h1,h2,h3{margin:0}
h1{
  font-size:clamp(30px,2.8vw,42px);
  line-height:1.04;
  letter-spacing:-.045em;
}
h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.045em}
.subhead{margin:8px 0 0;color:var(--muted);line-height:1.45}

/* Exercise cards */
.exercise-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.exercise-card{
  position:relative;
  min-width:0;
  background:linear-gradient(145deg,#1a2332,#111824);
  border:1px solid var(--line);
  border-radius:22px;
  padding:14px;
  box-shadow:var(--shadow-out);
}
.exercise-card::before{
  content:"";
  position:absolute;
  top:0;
  left:18px;
  right:18px;
  height:3px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(90deg,var(--blue),var(--purple));
}
.exercise-head{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:center;
  margin:4px 0 12px;
}
.exercise-thumb{
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  display:block;
  object-fit:contain;
  border-radius:17px;
  background:#0d1521;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:var(--shadow-in);
}
.exercise-copy{min-width:0}
.exercise-index{
  display:block;
  margin-bottom:2px;
  color:#8ea0b8;
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
}
.exercise-name{
  font-size:18px;
  line-height:1.04;
  font-weight:950;
  letter-spacing:-.025em;
}
.exercise-desc{
  margin:5px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
}

/* Settings */
.controls-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.field{
  min-width:0;
  min-height:62px;
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:linear-gradient(145deg,#192233,#111824);
  box-shadow:var(--shadow-in);
}
.field-label{
  display:block;
  margin:0 0 5px;
  color:#90a0b7;
  font-size:9px;
  font-weight:900;
  letter-spacing:.03em;
}
.stepper{
  width:100%;
  display:grid;
  grid-template-columns:29px minmax(48px,1fr) 29px;
  align-items:center;
  gap:5px;
}
.step-btn{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.09);
  border-radius:9px;
  color:#edf5ff;
  background:linear-gradient(145deg,#253149,#111925);
  box-shadow:4px 5px 10px rgba(0,0,0,.28),inset 1px 1px 3px rgba(255,255,255,.035);
  font-size:18px;
  font-weight:950;
  line-height:1;
}
.step-btn:last-child{
  color:#fff;
  background:linear-gradient(145deg,#49aaff,#665cff);
  box-shadow:5px 6px 12px rgba(34,30,98,.35),inset 1px 1px 3px rgba(255,255,255,.16);
}
.step-btn:active{transform:translateY(1px);box-shadow:var(--shadow-in)}
.field input,.field select{
  width:100%;
  min-width:48px;
  height:29px;
  display:block;
  padding:0 3px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:9px;
  outline:none;
  background:#0b1320;
  color:var(--text);
  text-align:center;
  font-size:16px;
  font-weight:950;
}
.field select{text-align:left;padding:0 7px}
.field:focus-within{
  box-shadow:var(--shadow-in),0 0 0 2px rgba(78,170,255,.14);
}

/* Start */
.setup-actions{
  display:flex;
  justify-content:center;
  padding-top:16px;
}
.primary-btn{
  width:min(560px,100%);
  min-height:55px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  padding:14px 20px;
  background:linear-gradient(100deg,#3ba9ff,#715cff 72%,#8d61ff);
  color:#fff;
  font-size:17px;
  font-weight:950;
  box-shadow:9px 11px 22px rgba(0,0,0,.4),inset 2px 2px 4px rgba(255,255,255,.18),inset -3px -4px 8px rgba(30,20,95,.3);
}
.primary-btn:active{transform:translateY(2px)}
.btn-play{font-size:18px}
.btn-arrow{font-size:21px}
.support-note,.workout-hint{
  margin:7px 0 0;
  color:var(--muted);
  text-align:center;
  font-size:10px;
}

/* Workout */
.workout-screen{min-height:0}
.workout-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2px 12px;
}
.text-btn{
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:linear-gradient(145deg,#1b2534,#101722);
  color:var(--text);
  font-size:12px;
  font-weight:850;
  box-shadow:var(--shadow-out);
}
.progress-label{
  padding:8px 14px;
  border-radius:999px;
  background:#111927;
  color:#c7d3e4;
  font-size:12px;
  font-weight:950;
  box-shadow:var(--shadow-in);
}
.workout-card{
  width:min(900px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.84fr);
  gap:18px;
  align-items:center;
  padding:18px;
  background:linear-gradient(145deg,#1a2231,#0f1621);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow-out);
}
.exercise-art-wrap{display:grid;place-items:center}
.exercise-art{
  width:min(100%,430px);
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:contain;
  border-radius:21px;
  background:#0c1420;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow-in);
}
.exercise-info{text-align:center;padding-top:8px}
.phase-chip{
  display:inline-flex;
  min-width:100px;
  justify-content:center;
  padding:6px 11px;
  border-radius:999px;
  border:1px solid rgba(111,175,239,.14);
  background:#111927;
  color:#82bdff;
  font-size:9px;
  font-weight:950;
  letter-spacing:.14em;
  box-shadow:var(--shadow-in);
}
.set-label{margin:7px 0 0;color:var(--muted);font-size:12px;font-weight:750}
.timer-panel{display:flex;flex-direction:column;align-items:center}
.timer-ring{
  width:205px;
  height:205px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:2px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 24%,#1b2638,#0e1520 70%);
  border:14px solid #1a2433;
  box-shadow:inset 7px 8px 15px rgba(0,0,0,.55),inset -6px -6px 13px rgba(255,255,255,.02),8px 11px 22px rgba(0,0,0,.36);
}
.timer-value{
  font-size:65px;
  font-weight:950;
  line-height:.93;
  letter-spacing:-.065em;
}
.timer-unit{
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.workout-meta{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-bottom:12px;
}
.meta-pill{
  min-height:58px;
  padding:8px 6px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:linear-gradient(145deg,#1b2535,#111824);
  box-shadow:var(--shadow-in);
  text-align:center;
}
.meta-pill span{
  color:#7e8ca1;
  font-size:8px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.meta-pill strong{margin-top:4px;font-size:13px}
.control-row{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.secondary-btn{
  min-width:132px;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(145deg,#1d2738,#111824);
  color:#e3ebf7;
  font-size:12px;
  font-weight:850;
  box-shadow:var(--shadow-out);
}
.secondary-btn:active{box-shadow:var(--shadow-in);transform:translateY(1px)}

.center-screen{display:grid;place-items:center;align-content:center;text-align:center}
.complete-icon{
  width:88px;height:88px;
  display:grid;place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#153226,#102018);
  border:1px solid rgba(71,209,141,.2);
  color:var(--green);
  box-shadow:var(--shadow-out),var(--shadow-in);
  font-size:44px;font-weight:950;
  margin-bottom:17px;
}

.diary-fab{
  position:fixed;
  right:22px;
  bottom:20px;
  z-index:20;
  width:68px;
  height:68px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border-radius:22px;
  background:linear-gradient(145deg,#5368ff,#744fff);
  border:1px solid rgba(255,255,255,.13);
  color:#fff;
  box-shadow:10px 14px 28px rgba(0,0,0,.42),inset 2px 2px 4px rgba(255,255,255,.16),inset -3px -4px 8px rgba(35,17,106,.3);
}
.diary-fab span{font-size:22px;line-height:1}
.diary-fab em{font-style:normal;font-size:9px;font-weight:900}

/* Responsive */
@media(max-width:1080px){
  .app-shell{width:min(100% - 34px,960px)}
  .exercise-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workout-card{grid-template-columns:1fr;max-width:720px}
  .exercise-art{height:auto}
}
@media(max-width:720px){
  .app-shell{width:calc(100% - 24px);padding:16px 0 90px}
  .exercise-list{grid-template-columns:1fr;gap:12px}
  .exercise-card{padding:14px}
  .exercise-head{grid-template-columns:1fr}
  .exercise-thumb{width:100%;height:auto}
  .controls-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workout-card{padding:14px;gap:10px}
  .exercise-art{height:auto}
  .timer-ring{width:195px;height:195px}
  .workout-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:430px){
  .controls-grid{grid-template-columns:1fr}
  .stepper{grid-template-columns:34px minmax(58px,1fr) 34px}
  .step-btn{width:34px;height:34px}
  .field input,.field select{height:34px;font-size:17px}
  .diary-fab{right:14px;bottom:14px;width:62px;height:62px;border-radius:20px}
}