:root {
  --bg: #07110f;
  --panel: #0d1b18;
  --panel-2: #13231f;
  --line: rgba(255,255,255,.1);
  --text: #f5f7f4;
  --muted: #91a09b;
  --accent: #b8ff3d;
  --accent-dark: #182b0b;
  --amber: #ffbf47;
  --red: #ff6969;
  --radius: 24px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { min-height: 100vh; min-height: 100dvh; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shell { min-height: 100dvh; max-width: 760px; margin: 0 auto; background: var(--bg); }
.with-nav { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
.hero { padding: max(22px, env(safe-area-inset-top)) 20px 0; background: radial-gradient(circle at 85% -20%, rgba(184,255,61,.2), transparent 46%); }
.brand-row { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .18em; font-weight: 750; color: #dbe3df; }
.brand-logo { width: 34px; height: 34px; display: block; flex: 0 0 34px; border: 1px solid rgba(194,0,0,.35); border-radius: 10px; background: #000; object-fit: cover; }
.position-tag { margin-left: auto; padding: 6px 8px; border: 1px solid rgba(184,255,61,.2); border-radius: 999px; background: rgba(184,255,61,.06); color: var(--accent); font-size: 8px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.week-row { display: flex; justify-content: space-between; align-items: end; margin-top: 38px; }
.eyebrow { margin: 0 0 7px; color: var(--muted); font-size: 11px; line-height: 1.2; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(36px, 10vw, 58px); line-height: .98; letter-spacing: -.055em; margin-bottom: 0; }
h2 { font-size: 25px; letter-spacing: -.035em; margin-bottom: 0; }
.phase-pill { border: 1px solid var(--line); background: rgba(255,255,255,.055); border-radius: 999px; padding: 10px 13px; font-size: 12px; font-weight: 700; }
.phase-pill span { color: var(--accent); padding-left: 5px; }
.week-rule { max-width: 490px; margin: 15px 0 24px; color: #bcc7c2; font-size: 14px; line-height: 1.5; }
.status-strip { display: flex; justify-content: space-between; margin: 0 -20px; padding: 15px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.status-strip b { color: var(--accent); }
.content { padding: 26px 16px; }
.resume-card { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 20px; padding: 16px; border: 1px solid rgba(184,255,61,.35); border-radius: 18px; background: rgba(184,255,61,.065); text-align: left; }
.resume-card span { display: grid; gap: 5px; }
.resume-card small { color: var(--accent); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.resume-card b { font-size: 13px; }
.resume-card strong { color: var(--accent); white-space: nowrap; font-size: 12px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 4px 18px; }
.section-heading.spaced { margin-top: 34px; }
.text-button { border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 750; padding: 8px 0; }
.day-list { display: grid; gap: 10px; }
.day-card { width: 100%; display: grid; grid-template-columns: 38px 1fr 36px; align-items: center; gap: 11px; padding: 16px 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); text-align: left; cursor: pointer; }
.day-card.today { border-color: rgba(184,255,61,.45); background: linear-gradient(115deg, rgba(184,255,61,.075), transparent 55%), var(--panel); }
.day-index { color: #63716c; font-size: 11px; letter-spacing: .08em; }
.day-main { min-width: 0; display: grid; gap: 4px; }
.day-top { display: flex; gap: 8px; align-items: center; }
.day-top strong { font-size: 16px; letter-spacing: -.015em; }
.day-top em { padding: 3px 6px; border-radius: 6px; background: var(--accent); color: #111c0c; font-size: 8px; font-style: normal; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.day-focus { color: #dbe2df; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-meta { color: var(--muted); font-size: 11px; }
.day-status { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.05); color: var(--muted); font-size: 22px; }
.day-status.done { background: var(--accent-dark); color: var(--accent); font-size: 15px; }
.bottom-nav { position: fixed; z-index: 20; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 760px); display: grid; grid-template-columns: repeat(4, 1fr); padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(7,17,15,.91); backdrop-filter: blur(18px); }
.nav-item { border: 0; background: none; color: #65746f; display: grid; gap: 3px; place-items: center; font-size: 10px; font-weight: 700; }
.nav-item span { font-size: 21px; line-height: 1; }
.nav-item.active { color: var(--accent); }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: flex; align-items: end; justify-content: center; background: rgba(0,0,0,.66); backdrop-filter: blur(8px); }
.modal { position: relative; width: min(100%, 600px); max-height: 92dvh; overflow: auto; padding: 28px 20px calc(24px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-bottom: 0; border-radius: 30px 30px 0 0; background: #101e1b; box-shadow: 0 -24px 80px rgba(0,0,0,.35); }
.modal h2 { font-size: 30px; margin-bottom: 8px; }
.close-modal { position: absolute; right: 17px; top: 17px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: var(--muted); font-size: 22px; }
.muted { color: var(--muted); line-height: 1.5; }
.score-field { display: grid; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.score-field span { display: flex; justify-content: space-between; color: #d6ddda; font-size: 13px; }
.score-field b { color: var(--accent); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.primary, .secondary { min-height: 52px; border-radius: 16px; padding: 0 18px; font-weight: 800; border: 1px solid transparent; cursor: pointer; }
.primary { color: #0a140d; background: var(--accent); }
.secondary { color: var(--text); background: rgba(255,255,255,.05); border-color: var(--line); }
.full { width: 100%; margin-top: 18px; }
.result-modal { text-align: center; padding-top: 40px; }
.result-modal.green { --result: var(--accent); }
.result-modal.amber { --result: var(--amber); }
.result-modal.red { --result: var(--red); }
.result-score { width: 90px; height: 90px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; border: 7px solid color-mix(in srgb, var(--result), transparent 55%); background: color-mix(in srgb, var(--result), transparent 88%); color: var(--result); font-size: 31px; font-weight: 900; }
.result-modal .eyebrow { color: var(--result); }
.result-modal p:not(.eyebrow) { color: #c3ccc8; line-height: 1.55; }

.workout-shell { min-height: 100dvh; max-width: 760px; margin: 0 auto; padding-bottom: 36px; background: var(--bg); }
.workout-header { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 12px; padding: max(15px, env(safe-area-inset-top)) 16px 12px; text-align: center; }
.workout-header p { margin: 0 0 2px; color: var(--muted); font-size: 11px; }
.workout-header b { font-size: 13px; }
.icon-button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.055); font-size: 22px; }
.progress-track { height: 3px; background: #182622; }
.progress-track i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.live-card { margin: 18px 14px 0; padding: 22px 18px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.025), transparent), var(--panel); }
.exercise-section { display: inline-flex; padding: 5px 8px; border-radius: 7px; color: var(--accent); background: var(--accent-dark); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.live-card h1 { margin: 14px 0 24px; font-size: clamp(30px, 9vw, 48px); line-height: 1.03; }
.prescription-grid { display: grid; grid-template-columns: .7fr 1.35fr 1fr; gap: 8px; }
.prescription-grid > div { min-width: 0; padding: 13px 10px; border-radius: 14px; background: rgba(255,255,255,.04); }
.prescription-grid span, .load-advice span, .simple-target span, .cue span, .rest-next span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.prescription-grid b { display: block; overflow: hidden; color: #f7faf8; font-size: 18px; text-overflow: ellipsis; }
.prescription-grid small { color: var(--muted); font-size: 11px; }
.set-dots { display: flex; gap: 8px; margin: 18px 0; }
.set-dot { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 11px; }
.set-dot.current { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px rgba(184,255,61,.08); }
.set-dot.done { border-color: var(--accent-dark); background: var(--accent-dark); color: var(--accent); }
.load-panel { margin-top: 5px; padding: 15px; border: 1px solid rgba(184,255,61,.18); border-radius: 18px; background: rgba(184,255,61,.035); }
.load-advice { display: grid; gap: 2px; margin-bottom: 14px; }
.load-advice span { color: var(--accent); }
.load-advice b { font-size: 21px; }
.load-advice small { color: var(--muted); font-size: 11px; }
.log-inputs { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 8px; }
.log-inputs label { display: grid; gap: 6px; }
.log-inputs label span { color: var(--muted); font-size: 9px; }
.log-inputs input { width: 100%; min-width: 0; padding: 12px 8px; border: 1px solid var(--line); border-radius: 11px; background: #091411; color: var(--text); font-size: 17px; font-weight: 750; }
.simple-target { padding: 14px; border-radius: 16px; background: rgba(184,255,61,.05); }
.simple-target b { color: var(--accent); font-size: 14px; }
.cue { margin-top: 17px; padding: 15px; border-left: 2px solid var(--accent); background: rgba(255,255,255,.025); }
.cue p { margin: 0 0 6px; color: #e2e8e5; font-size: 14px; line-height: 1.45; }
.cue small { color: var(--muted); font-size: 11px; }
.complete-set { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 0 20px; }
.complete-set span { font-size: 22px; }
.skip-button { width: 100%; margin-top: 8px; padding: 10px; border: 0; background: transparent; color: var(--muted); font-size: 11px; }
.change-current { width: 100%; margin-top: 9px; padding: 12px; border: 1px solid rgba(184,255,61,.22); border-radius: 13px; background: rgba(184,255,61,.045); color: var(--accent); font-size: 11px; font-weight: 800; }
.queue { padding: 26px 18px; }
.queue-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; }
.queue-heading .eyebrow { margin-bottom: 0; }
.queue-heading > span { color: var(--muted); font-size: 10px; }
.queue-item { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 14px 6px; border-bottom: 1px solid var(--line); opacity: .58; }
.queue-item.current-exercise { margin: 5px -6px; padding: 14px 12px; border: 1px solid rgba(184,255,61,.28); border-radius: 14px; background: rgba(184,255,61,.055); opacity: 1; }
.queue-item.completed { opacity: .42; }
.queue-item.completed b { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); }
.queue-item.upcoming:first-of-type { opacity: .8; }
.queue-item > span { color: var(--accent); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.queue-item.completed > span { color: var(--muted); }
.queue-item div { display: grid; gap: 4px; }
.queue-item b { font-size: 13px; }
.queue-item small { color: var(--muted); font-size: 10px; }

.rest-overlay { position: fixed; z-index: 90; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: max(30px, env(safe-area-inset-top)) 24px max(30px, env(safe-area-inset-bottom)); background: rgba(7,17,15,.97); text-align: center; }
.rest-overlay h2 { font-size: 32px; }
.rest-ring { --progress: 360deg; width: 210px; height: 210px; margin: 20px 0 30px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, var(--bg) 66%, transparent 67%), conic-gradient(var(--accent) var(--progress), #1b2925 0); }
.rest-ring span { font-size: 54px; font-weight: 850; letter-spacing: -.06em; }
.rest-next { width: min(100%, 430px); min-height: 96px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 16px; border: 1px solid rgba(184,255,61,.24); border-radius: 18px; background: rgba(184,255,61,.045); }
.rest-next span { color: var(--accent); }
.rest-next b { font-size: 17px; }
.rest-next small { color: var(--muted); }
.rest-actions { display: grid; grid-template-columns: 70px 1fr 70px; gap: 10px; width: min(100%, 430px); margin-top: 16px; }
.rest-actions button { height: 48px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.05); font-size: 12px; font-weight: 750; }
.rest-actions button:nth-child(2) { background: var(--accent); color: #0a140d; border-color: var(--accent); }

.finish-screen { min-height: 100dvh; max-width: 600px; margin: auto; padding: max(70px, calc(env(safe-area-inset-top) + 40px)) 22px 40px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.finish-mark { width: 86px; height: 86px; display: grid; place-items: center; margin: 0 auto 24px; border-radius: 50%; background: var(--accent); color: #0a140d; font-size: 40px; font-weight: 900; }
.finish-screen h1 { margin-bottom: 12px; }
.finish-screen > p:not(.eyebrow) { color: var(--muted); }
.finish-rpe, .notes-label { display: grid; gap: 12px; margin-top: 25px; padding: 18px; border-radius: 18px; background: var(--panel); text-align: left; }
.finish-rpe span, .notes-label span { color: #d5ddda; font-size: 13px; }
.finish-rpe b { color: var(--accent); text-align: center; }
.notes-label textarea { min-height: 92px; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #091411; color: var(--text); }

.plain-header { padding: max(44px, calc(env(safe-area-inset-top) + 22px)) 20px 18px; border-bottom: 1px solid var(--line); }
.plain-header h1 { font-size: 45px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin-bottom: 35px; }
.stat-grid > div { padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.stat-grid span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.stat-grid b { font-size: 28px; }
.stat-grid small { color: var(--muted); font-size: 12px; }
.load-list, .history-list { display: grid; gap: 8px; }
.load-card, .history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.load-card div, .history-row div { min-width: 0; display: grid; gap: 4px; }
.load-card b, .history-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.load-card small, .history-row small { color: var(--muted); font-size: 9px; }
.load-card strong { color: var(--accent); white-space: nowrap; font-size: 16px; }
.history-day { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.history-row strong { color: var(--muted); font-size: 12px; }
.delete-session { flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid rgba(255,105,105,.22); border-radius: 50%; background: rgba(255,105,105,.06); color: var(--red); font-size: 18px; }
.danger-button { min-height: 52px; border: 1px solid rgba(255,105,105,.28); border-radius: 16px; padding: 0 18px; background: rgba(255,105,105,.08); color: var(--red); font-weight: 800; }
.workout-options .full + .full { margin-top: 9px; }
.empty-state { padding: 24px; border: 1px dashed var(--line); border-radius: 17px; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }

.settings-content { display: grid; gap: 11px; }
.setting-card { display: grid; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 19px; background: var(--panel); }
.setting-card > span { display: grid; gap: 5px; }
.setting-card b { font-size: 14px; }
.setting-card small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.setting-card select { width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #0a1512; color: var(--text); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 13px; background: #091411; }
.segmented button { height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 750; }
.segmented button.active { background: var(--accent); color: #0a140d; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.button-row .secondary { min-width: 0; font-size: 11px; }
.file-label { display: grid; place-items: center; text-align: center; }
.file-label input { display: none; }
.position-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.position-option { min-height: 58px; display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 13px; background: #091411; color: var(--muted); text-align: left; }
.position-option span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.045); font-size: 9px; font-weight: 850; }
.position-option b { font-size: 11px; }
.position-option.active { border-color: rgba(184,255,61,.45); background: rgba(184,255,61,.07); color: var(--text); }
.position-option.active span { background: var(--accent); color: #0a140d; }
.position-grid .position-option:last-child:nth-child(odd) { grid-column: 1 / -1; }

.club-home { min-height: 100dvh; max-width: 760px; margin: 0 auto; background: #050706; }
.club-home.with-nav { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
.club-hero { padding: max(44px, calc(env(safe-area-inset-top) + 25px)) 24px 35px; overflow: hidden; background: radial-gradient(circle at 50% 13%, rgba(185,0,0,.22), transparent 36%), linear-gradient(180deg, #080a09, #050706); text-align: center; }
.club-hero img { width: min(54vw, 245px); aspect-ratio: 1; margin-bottom: 22px; object-fit: contain; filter: drop-shadow(0 18px 45px rgba(185,0,0,.16)); }
.club-hero .eyebrow { color: #c60000; }
.club-hero h1 { max-width: 560px; margin: 0 auto 16px; color: #fff; font-size: clamp(43px, 12vw, 72px); }
.club-hero > p:not(.eyebrow) { max-width: 530px; margin: 0 auto; color: #aeb7b2; font-size: 14px; line-height: 1.6; }
.landing-content { padding: 28px 16px 44px; background: var(--bg); border-radius: 28px 28px 0 0; }
.landing-section-title { margin: 7px 4px 14px; }
.landing-section-title:not(:first-child) { margin-top: 28px; }
.landing-position-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.landing-position { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--muted); text-align: left; }
.landing-position > span { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; align-self: center; border-radius: 12px; background: rgba(255,255,255,.045); font-size: 9px; font-weight: 900; }
.landing-position b { align-self: end; color: #d9e0dd; font-size: 12px; }
.landing-position small { align-self: start; color: var(--muted); font-size: 8px; }
.landing-position.active { border-color: rgba(198,0,0,.6); background: rgba(185,0,0,.09); }
.landing-position.active > span { background: #b50000; color: #fff; }
.landing-position:last-child:nth-child(odd) { grid-column: 1 / -1; }
.landing-select { display: grid; gap: 8px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.landing-select span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.landing-select select { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #091411; color: var(--text); }
.landing-match { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: #091411; }
.landing-match button { height: 46px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; }
.landing-match button.active { background: #b50000; color: #fff; }
.landing-enter { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 28px; padding: 0 20px; }
.landing-enter span { font-size: 21px; }
.landing-note { margin: 15px 0 0; color: #6e7b76; font-size: 9px; text-align: center; text-transform: uppercase; letter-spacing: .06em; }

.preview-overlay { position: fixed; z-index: 80; inset: 0; max-width: 760px; margin: 0 auto; overflow-y: auto; padding-bottom: calc(94px + env(safe-area-inset-bottom)); background: var(--bg); }
.preview-header { position: sticky; z-index: 3; top: 0; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--line); background: rgba(7,17,15,.94); backdrop-filter: blur(18px); }
.preview-header div { text-align: center; }
.preview-header p { margin: 0 0 2px; color: var(--muted); font-size: 10px; }
.preview-header h2 { font-size: 18px; }
.preview-header > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-dark); color: var(--accent); font-size: 11px; font-weight: 850; }
.preview-summary { padding: 23px 20px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 90% 0, rgba(184,255,61,.1), transparent 45%); }
.preview-summary > p:not(.eyebrow) { margin-bottom: 16px; color: #c4cec9; font-size: 13px; line-height: 1.5; }
.preview-summary > div { display: flex; gap: 8px; }
.preview-summary > div span { padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.preview-list { padding: 24px 14px; }
.preview-exercise { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 14px 8px; border-bottom: 1px solid var(--line); }
.preview-exercise.changed { margin: 5px 0; border: 1px solid rgba(184,255,61,.2); border-radius: 14px; background: rgba(184,255,61,.035); }
.preview-number { color: #66746f; font-size: 10px; }
.preview-main { min-width: 0; display: grid; gap: 4px; }
.preview-main small { color: var(--accent); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.preview-main b { overflow: hidden; text-overflow: ellipsis; color: #e7ece9; font-size: 13px; }
.preview-main p { margin: 0; color: var(--muted); font-size: 10px; }
.preview-main em { color: var(--amber); font-size: 9px; font-style: normal; }
.preview-change { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.04); color: #c8d0cc; font-size: 9px; font-weight: 750; }
.preview-footer { position: fixed; z-index: 4; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 760px); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(7,17,15,.94); backdrop-filter: blur(18px); }
.preview-footer .primary { width: 100%; }
.swap-list { display: grid; gap: 8px; margin-top: 20px; }
.swap-option { display: grid; gap: 5px; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035); text-align: left; }
.swap-option span { color: #edf1ef; font-size: 13px; font-weight: 750; }
.swap-option small { color: var(--muted); font-size: 10px; }
.restore-button { min-height: 48px; border: 0; background: transparent; color: var(--amber); font-size: 11px; font-weight: 750; }

@media (min-width: 620px) {
  body { background: #030907; }
  .shell, .workout-shell { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .day-list { grid-template-columns: 1fr 1fr; }
  .day-card:last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  .day-card, .primary { transition: transform .15s ease, border-color .15s ease; }
  .day-card:active, .primary:active { transform: scale(.985); }
  .modal { animation: rise .25s ease-out; }
  @keyframes rise { from { transform: translateY(35px); opacity: .5; } }
}