:root {
  --bg:#0d0f12; --panel:#181c22; --panel2:#232832; --text:#fff;
  --muted:#aeb6c2; --border:#3a424e; --bright:#fff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
.shell{max-width:720px;margin:0 auto;min-height:100vh;padding:22px 16px 50px}
.topbar,.mini-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar{margin-bottom:26px}
.mini-nav{font-size:16px;font-weight:900;color:var(--muted);margin-bottom:18px}
.mini-nav a,.text-link{color:#fff;text-decoration:none;font-weight:900}
.eyebrow,.section-label,.label{font-size:17px;letter-spacing:.08em;font-weight:900;color:var(--muted)}
h1{margin:6px 0 0;font-size:clamp(42px,10vw,64px);line-height:.98}
.exercise-title{margin-bottom:22px}
.stack{display:grid;gap:14px}
.workout-card,.history-card,.recent-card,.status-card{width:100%;border:2px solid var(--border);background:var(--panel);color:#fff;border-radius:24px}
.workout-card{min-height:140px;padding:24px;display:flex;align-items:center;justify-content:space-between;text-align:left;font-size:32px;font-weight:950}
.workout-card strong{font-size:20px}
.recent-card{padding:20px;margin-bottom:28px;display:grid;gap:7px}
.recent-card strong{font-size:30px}.recent-card span{font-size:20px;color:var(--muted)}
.status-card{padding:20px;display:grid;grid-template-columns:1.25fr .75fr;gap:16px}
.status-card .right{text-align:right}
.big-readout{font-size:50px;font-weight:950;margin-top:5px}.big-readout span{font-size:27px;color:var(--muted)}
.big-readout.small{font-size:30px}
.last-lines{margin-top:7px;font-size:27px;line-height:1.25}.last-lines strong{font-size:32px}
.muted{font-size:19px;color:var(--muted);margin-top:4px}
.unit-note{margin:12px 2px 0;color:var(--muted);font-size:17px}
.today-sets{display:grid;gap:8px;margin:16px 0}
.set-pill{background:var(--panel2);border:2px solid var(--border);border-radius:18px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;font-size:20px}
.set-pill strong{font-size:27px}
.section-label{margin:26px 0 11px}
.button-grid{display:grid;gap:10px}
.weight-grid{grid-template-columns:repeat(3,1fr)}
.reps-grid{grid-template-columns:repeat(5,1fr)}
.choice{min-height:82px;border-radius:19px;border:3px solid var(--border);background:var(--panel);color:#fff;font-size:31px;font-weight:950}
.choice.suggested{border-color:#fff}.choice.selected{background:#fff;color:#000;border-color:#fff}
.save-button,.repeat-button,.secondary-button,.finish-button,.undo-button{width:100%;border-radius:22px;font-weight:950}
.save-button{min-height:94px;margin-top:24px;border:0;background:#fff;color:#000;font-size:31px}
.repeat-button{min-height:102px;border:3px solid #fff;background:var(--panel2);color:#fff;font-size:21px}.repeat-button strong{font-size:36px}
.secondary-button,.finish-button{min-height:88px;margin-top:22px;border:2px solid var(--border);background:var(--panel2);color:#fff;font-size:27px;text-decoration:none;display:flex;align-items:center;justify-content:center}
.finish-button{border-color:#fff}
.undo-button{min-height:58px;margin-top:12px;border:0;background:transparent;color:var(--muted);font-size:18px}
.timer-card{position:sticky;top:10px;z-index:5;margin:14px 0;padding:13px 16px;background:#fff;color:#000;border-radius:20px;display:flex;align-items:center;justify-content:space-between;font-weight:900}
.timer-card strong{font-size:36px}.timer-card button{border:0;background:#000;color:#fff;border-radius:12px;padding:11px 15px;font-weight:900}
.hidden{display:none}
.history-card{padding:20px;display:grid;gap:7px;font-size:19px}.history-card strong{font-size:28px}
@media(max-width:420px){
  .shell{padding-left:12px;padding-right:12px}
  .choice{min-height:76px;font-size:28px}
  .reps-grid{grid-template-columns:repeat(5,1fr)}
}

.resume-card{width:100%;border:3px solid #fff;background:var(--panel2);color:#fff;border-radius:24px;padding:20px;margin-bottom:18px;display:grid;gap:8px}
.resume-card strong{font-size:32px}.resume-card span{font-size:20px;color:var(--muted)}
.resume-card a{margin-top:7px;color:#fff;font-size:25px;font-weight:950;text-decoration:none}
.detail-link{color:#fff;font-size:17px;font-weight:900;margin-top:5px}
.history-link{text-decoration:none;color:inherit}
.history-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.history-card b{font-size:16px;margin-top:5px}
.active-badge{display:inline-block;border:2px solid #fff;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:950;letter-spacing:.04em}
.summary-meta{display:flex;justify-content:space-between;align-items:center;margin:24px 0;font-size:20px;color:var(--muted)}
.exercise-summary-stack{display:grid;gap:16px}
.exercise-summary{background:var(--panel);border:2px solid var(--border);border-radius:24px;padding:20px}
.exercise-summary h2{font-size:32px;margin:6px 0 10px}
.summary-sets{display:grid;gap:8px;margin-top:12px}
.summary-sets div{display:flex;justify-content:space-between;align-items:center;background:var(--panel2);border-radius:15px;padding:12px 14px}
.summary-sets span{color:var(--muted);font-weight:900}.summary-sets strong{font-size:27px}

/* =========================================================
   V4 PHONE WORKOUT LAYOUT
   Goal: exercise + history + weight + reps + SAVE in viewport
   ========================================================= */

@media (max-width: 600px) {

  /* Use substantially more of the phone's width */
  .shell {
    padding: 12px 12px 40px;
  }

  /* Compact navigation */
  .mini-nav {
    margin-bottom: 8px;
    font-size: 15px;
  }

  /* Still enormous, but don't spend half a screen on the title */
  .exercise-title {
    font-size: clamp(42px, 12vw, 58px);
    line-height: .94;
    margin: 8px 0 12px;
  }

  /* Compress the Last Time / Today card */
  .status-card {
    padding: 13px 16px;
    border-radius: 21px;
    gap: 10px;
  }

  .label {
    font-size: 15px;
  }

  .last-lines {
    margin-top: 3px;
    font-size: 22px;
    line-height: 1.12;
  }

  .last-lines strong {
    font-size: 27px;
  }

  .big-readout {
    font-size: 42px;
    margin-top: 1px;
    line-height: 1;
  }

  .big-readout span {
    font-size: 23px;
  }

  .muted {
    font-size: 16px;
    margin-top: 2px;
  }

  .unit-note {
    margin: 5px 2px 0;
    font-size: 14px;
  }

  /* Current sets shouldn't consume a giant vertical block */
  .today-sets {
    display: flex;
    gap: 6px;
    margin: 7px 0;
    overflow-x: auto;
  }

  .set-pill {
    flex: 0 0 auto;
    min-width: 115px;
    padding: 7px 10px;
    border-radius: 13px;
    font-size: 13px;
  }

  .set-pill strong {
    font-size: 18px;
    margin-left: 8px;
  }

  /* AGAIN remains useful, but compact */
  .repeat-button {
    min-height: 58px;
    border-radius: 16px;
    font-size: 15px;
    margin-top: 5px;
  }

  .repeat-button strong {
    font-size: 24px;
  }

  /* Labels sit close to controls */
  .section-label {
    margin: 12px 0 6px;
    font-size: 15px;
  }

  /* Five weights across instead of 3 + 2 */
  .weight-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  /* Five reps across; second row only for 11–14 */
  .reps-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  /* Large finger target but dramatically less vertical space */
  .choice {
    min-height: 62px;
    border-radius: 16px;
    border-width: 2px;
    font-size: 26px;
  }

  /* Selection should be impossible to miss */
  .choice.selected {
    background: #fff;
    color: #000;
    border-color: #fff;
  }

  .choice.suggested:not(.selected) {
    border-color: #fff;
  }

  /* The critical control: get this into the first viewport */
  .save-button {
    min-height: 76px;
    margin-top: 12px;
    border-radius: 19px;
    font-size: 29px;
  }

  /* Everything below here is intentionally secondary */
  .undo-button {
    min-height: 48px;
    margin-top: 5px;
    font-size: 15px;
  }

  .secondary-button,
  .finish-button {
    min-height: 74px;
    margin-top: 12px;
    font-size: 23px;
  }

  /* Timer stays very visible without consuming much screen */
  .timer-card {
    top: 5px;
    margin: 7px 0;
    padding: 8px 12px;
    border-radius: 15px;
  }

  .timer-card strong {
    font-size: 29px;
  }

  .timer-card button {
    padding: 8px 12px;
  }
}

/* V4 set-number clarification */
@media (max-width: 600px) {
  .set-readout .set-word {
    font-size: 16px;
    letter-spacing: .06em;
    color: var(--muted);
    vertical-align: middle;
  }
}