:root{color-scheme:dark;--bg:#111615;--card:#1b2220;--line:#36433b;--text:#f3f5ef;--muted:#afbbb1;--green:#d3f58a;--danger:#f4ad9c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit}
button,a,input{touch-action:manipulation}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:wait}
a{color:inherit;text-decoration:none}
.shell{max-width:680px;margin:auto;padding:0 12px calc(80px + env(safe-area-inset-bottom,0px))}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:24px 0 16px}
.brand{display:flex;gap:11px;align-items:center;font-size:26px;font-weight:750;line-height:1}
.brand-mark{background:var(--green);color:#1b2815;width:40px;height:43px;border-radius:13px;display:grid;place-items:center;font-size:29px;font-weight:900}
.brand-sub{display:block;font-size:12px;font-weight:500;letter-spacing:1.5px;color:var(--muted);margin-top:7px}
.stage-label{font-size:12px;letter-spacing:1.2px;color:#b8bd9c;border-top:1px solid var(--line);padding-top:12px;margin-bottom:23px}
h1{font-size:34px;line-height:1.12;letter-spacing:-1.2px;margin:8px 0 16px;font-weight:720}
h2{font-size:21px;line-height:1.25;margin:0 0 12px}
h3{font-size:17px;line-height:1.25;margin:0}
.muted{color:var(--muted)}
.small{font-size:12px}
.hero-sub{max-width:300px;color:var(--muted);margin:0 0 14px}
.card,.exercise-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.featured{background:var(--card);border-color:#4a5f39}
.primary,.secondary,.danger{display:block;width:100%;border:0;border-radius:14px;padding:10px 12px;font-weight:650;min-height:44px}
.primary{background:var(--green);color:#1c2b13}
.secondary{background:#2a342e;color:var(--text);margin-top:10px}
.danger{background:transparent;color:var(--danger);font-size:13px}
.text-button{color:var(--green);border:0;background:none;padding:9px 0;font-size:13px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stats{display:flex;gap:24px;margin:18px 0}
.stat strong{display:block;font-size:26px;font-weight:650}
.stat span{color:var(--muted);font-size:12px}
.section-title{display:flex;justify-content:space-between;align-items:center;margin:27px 0 13px}
.section-title h2{font-size:18px;margin:0}
.date-input,label>input,textarea,select{background:#141a17;border:1px solid var(--line);border-radius:11px;padding:12px;color:var(--text);max-width:100%;width:100%}
label{display:block;font-size:12px;color:var(--muted)}
label>input,textarea{margin-top:4px}
textarea{resize:vertical;min-height:85px}
.form-gap{margin-top:10px}
.bottom-nav{position:fixed;z-index:4;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,680px);display:flex;justify-content:space-around;background:#17201b;border-top:1px solid var(--line);padding:4px 8px max(8px,env(safe-area-inset-bottom,0px))}
.bottom-nav button{border:0;background:none;color:var(--muted);font-size:12px;padding:2px 20px;min-height:55px}
.bottom-nav button.active{color:var(--green)}
.nav-icon{display:block;font-size:25px;line-height:30px}
.save-state{font-size:12px;color:var(--green);min-height:20px;margin:10px 0}
.exercise-card{padding:17px;margin-bottom:16px}
.exercise-heading{display:flex;align-items:flex-start;gap:12px}
.exercise-heading>div{flex:1;min-width:0}
.exercise-group{color:var(--green);font-size:12px;letter-spacing:.9px;text-transform:uppercase;margin-bottom:6px}
.exercise-heading h2{font-size:17px;line-height:1.3;margin-bottom:8px}
.exercise-done{appearance:none;width:28px;height:28px;min-width:28px;border:1.5px solid #64715e;border-radius:9px;margin:3px 0 0;display:grid;place-content:center}
.exercise-done:checked{background:var(--green);border-color:var(--green)}
.exercise-done:checked:after{content:'✓';color:#182412;font-size:21px}
.exercise-card.completed{border-color:#78955f;background:#30452b}
.exercise-card.completed>summary.exercise-summary{color:#bdc5b8}
.exercise-card.completed .exercise-group{color:#b2bda9}
.set-head,.set-row{display:grid;grid-template-columns:44px minmax(44px,1fr) minmax(44px,1fr) 44px 44px;gap:4px;align-items:center}
.set-head{color:var(--muted);font-size:12px;letter-spacing:.6px;padding:13px 0 7px}
.set-row{margin-bottom:6px}
.set-row input[type=number]{width:100%;min-width:0;background:#111915;border:1px solid #344336;border-radius:9px;padding:10px 5px;text-align:center;font-size:17px;font-weight:600;color:var(--text)}
.set-row select{padding:9px 3px;font-size:12px;height:44px;color:var(--muted)}
input[type=checkbox]{accent-color:var(--green)}
.set-row input[type=checkbox]{width:20px;height:20px;margin:0}
.remove-set{border:0;background:none;color:#8d9b8d;font-size:20px;padding:0;min-height:34px}
.target-hint{font-size:12px;color:var(--muted);margin-bottom:9px}
.set-row.done input[type=number]{border-color:#526440;color:var(--green)}
.exercise-footer{display:flex;justify-content:space-between}
details{color:var(--muted);font-size:12px;line-height:1.6}
summary{cursor:pointer;padding:10px 0;color:#b9c9ab}
details .prose{margin-top:7px}
.prose{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.65}
.history-item{display:flex;align-items:center;gap:14px;width:100%;padding:16px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:var(--text)}
.date-tile{width:46px;min-width:46px;text-align:center;color:var(--green)}
.date-tile strong{display:block;font-size:23px;line-height:1.2}
.date-tile span{font-size:12px;color:var(--muted)}
.history-item .info{flex:1}
.history-item .info strong{font-size:13px;display:block;margin-bottom:5px}
.history-item .chevron{color:#7b8a7a}
.month-title{color:var(--muted);font-size:12px;letter-spacing:1px;text-transform:uppercase;margin:25px 0 4px}
.record-exercise{padding:14px 0;border-bottom:1px solid var(--line)}
.record-exercise strong{font-size:14px}
.record-sets{font-size:13px;color:var(--muted);margin-top:8px}
.back{background:none;border:0;color:var(--muted);padding:0 0 15px;font-size:13px}
.progress-track{height:4px;background:#2e392e;border-radius:5px;overflow:hidden;margin:16px 0}
.progress-track progress{width:100%;height:4px;display:block;accent-color:var(--green)}
.loading{padding:40px 10px;color:var(--muted);text-align:center}
.error{color:var(--danger)}
#toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#354133;color:var(--text);padding:14px 20px;border-radius:15px;z-index:10;width:max-content;max-width:90%;font-size:13px}
dialog{color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:16px;width:min(90%,480px);max-height:85vh;padding:24px}
dialog::backdrop{background:#000a}
dialog h2{margin-bottom:15px}
.chart{width:100%;height:175px;margin:20px 0}
.chart polyline{fill:none;stroke:var(--green);stroke-width:3}
.chart circle{fill:var(--green)}
.chart line{stroke:var(--line);stroke-width:1}
.chart text{fill:var(--muted);font-size:12px}
.empty{color:var(--muted);text-align:center;padding:30px 10px}
.plan-title{font-size:28px}
.login-card{margin-top:45px}
.login-card input{width:100%}
.job-indicator{border:1px solid #526440;color:var(--green);border-radius:14px;padding:14px;font-size:12px;margin:12px 0}
@media(min-width:560px){.shell{padding:0 30px 110px}
.exercise-card{padding:24px}
.set-head,.set-row{grid-template-columns:60px minmax(44px,1fr) minmax(44px,1fr) 48px 44px;gap:12px}
h1{font-size:42px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}
}


html { scroll-padding-top: 56px; scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom,0px)); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
::selection { background: var(--green); color: #1c2b13; }
input, textarea { caret-color: var(--green); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
[hidden] { display: none !important; }
.topbar { gap: 12px; padding: max(8px,env(safe-area-inset-top,0px)) 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.brand { font-size: 20px; line-height: 1.1; min-height: 44px; gap: 8px; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; font-size: 22px; }
.brand-sub { font-size: 12px; letter-spacing: 0; margin-top: 2px; }
.stage-label { max-width: 150px; border: 0; padding: 0; margin: 0; font-size: 12px; letter-spacing: 0; text-align: right; color: var(--muted); }
h1,h2,h3 { overflow-wrap: anywhere; text-wrap: balance; }
h1 { font-size: 22px; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 8px; }
h2 { font-size: 18px; line-height: 1.3; }
p { margin: 0 0 10px; }
.small { font-size: 13px; }
.hero-sub { font-size: 14px; max-width: 52ch; }
.page-meta { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.plan-meta { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.plan-meta .ready { color: var(--green); }
.primary,.secondary,.danger { min-height: 44px; border-radius: 10px; text-align: center; font-size: 15px; line-height: 24px; }
.danger { margin-top: 12px; font-size: 14px; }
.text-button { min-height: 44px; font-size: 14px; padding: 8px 4px; }
.stats { justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin: 14px 0; }
.stat strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; }
.section-title { gap: 12px; margin: 16px 0 4px; }
.section-title h2 { font-size: 18px; }
label { font-size: 14px; }
label>input,textarea,select { font-size: 16px; border-color: #647568; min-height: 44px; padding: 8px 10px; }
textarea { min-height: 72px; }
input[type=date] { min-width: 0; }
.bottom-nav { display: grid; grid-template-columns: repeat(3,1fr); z-index: 5; }
.bottom-nav button { padding: 3px 6px; min-height: 44px; border-radius: 8px; }
.bottom-nav button.active { background: #273526; }
.nav-icon { width: 18px; height: 18px; margin: 0 auto 2px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.workout-status { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 6px 0; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.workout-status .row { font-size: 13px; flex-wrap: wrap; gap: 6px 12px; }
.save-state { font-size: 12px; margin: 0; min-height: 18px; }
.workout-status .error { flex-basis: 100%; }
#workout-count { font-variant-numeric: tabular-nums; }
.exercise-card { padding: 12px; margin-bottom: 10px; }
.exercise-heading { margin-bottom: 6px; align-items: center; }
.exercise-heading h2 { font-size: 19px; text-wrap: pretty; }
.exercise-group { color: var(--muted); font-size: 12px; letter-spacing: 0; text-transform: none; margin-bottom: 4px; }
.exercise-done,.set-row input[type=checkbox] { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 44px; height: 44px; min-width: 44px; margin: 0; border: 1px solid #71806f; border-radius: 10px; display: grid; place-content: center; background: transparent; cursor: pointer; }
.exercise-done:checked:after,.set-row input[type=checkbox]:checked:after { content: ''; width: 8px; height: 14px; border: solid #1c2b13; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.exercise-done:checked,.set-row input[type=checkbox]:checked { background: var(--green); border-color: var(--green); }
.set-head { text-align: center; letter-spacing: 0; padding: 4px 0; }
.set-row input[type=number] { height: 44px; padding: 6px 2px; font-size: 17px; font-variant-numeric: tabular-nums; border-color: #647568; appearance: textfield; -moz-appearance: textfield; }
.set-row input[type=number]::-webkit-inner-spin-button,.set-row input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.set-row select { height: 44px; padding: 6px 1px; font-size: 13px; color: var(--text); border-color: #647568; }
.set-row.warmup input[type=number] { font-weight: 450; }
.remove-set { width: 44px; height: 44px; padding: 10px; border-radius: 10px; color: var(--muted); }
.remove-set svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.remove-set { position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y pinch-zoom; }
.remove-set.holding { color: var(--green); background: #273526; }
.remove-set.holding::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: var(--green); transform: scaleX(0); transform-origin: left; animation: delete-hold var(--delete-hold-duration,800ms) linear forwards; }
@keyframes delete-hold { to { transform: scaleX(1); } }
@media(prefers-reduced-motion:reduce) { .remove-set.holding::after { transform: scaleX(1); } }
#delete-set-description { white-space: pre-line; overflow-wrap: anywhere; font-size: 16px; }
.delete-set-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.delete-set-actions .secondary { margin-top: 0; }
#delete-set-confirm { min-height: 44px; border: 1px solid var(--danger); border-radius: 10px; padding: 10px 12px; color: var(--danger); background: transparent; font-size: 15px; font-weight: 650; }
.target-hint { line-height: 1.5; margin: 8px 0 4px; }
.exercise-footer { gap: 12px; }
.exercise-footer .text-button { padding: 8px 0; }
details { font-size: 14px; }
summary { min-height: 44px; padding: 10px 0; color: var(--text); }
details.card { padding-top: 4px; padding-bottom: 4px; }
.prose { font-size: 14px; line-height: 1.7; max-width: 70ch; }
.history-item { gap: 12px; padding: 12px 0; min-height: 72px; }
.date-tile { width: 44px; min-width: 44px; color: var(--text); font-variant-numeric: tabular-nums; }
.date-tile strong { font-size: 22px; }
.history-item .info { min-width: 0; }
.history-item .info strong { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.history-item .chevron { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; flex-shrink: 0; }
.month-title { font-size: 14px; letter-spacing: 0; text-transform: none; margin: 20px 0 0; }
.record-exercise { padding: 12px 0; }
.record-exercise:first-child { padding-top: 0; }
.record-exercise:last-child { border: 0; padding-bottom: 0; }
.record-exercise strong { font-size: 16px; line-height: 1.4; display: block; }
.record-sets { font-size: 15px; font-variant-numeric: tabular-nums; }
.back { display: inline-flex; align-items: center; gap: 8px; padding: 0; margin-bottom: 8px; min-height: 44px; font-size: 14px; }
.back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.progress-track { height: 5px; margin: 6px 0 0; }
.progress-track progress { appearance: none; width: 100%; height: 5px; border: 0; background: var(--line); }
.progress-track progress::-webkit-progress-bar { background: var(--line); }
.progress-track progress::-webkit-progress-value { background: var(--green); }
.progress-track progress::-moz-progress-bar { background: var(--green); }
#toast { bottom: calc(72px + env(safe-area-inset-bottom,0px)); font-size: 14px; border: 1px solid #77866c; border-radius: 12px; box-shadow: 0 8px 24px #0005; }
dialog { width: min(calc(100% - 24px),480px); max-height: 85dvh; padding: 16px; }
.chart { display: block; height: auto; margin: 16px 0; overflow: visible; }
.chart polyline { stroke-width: 2.5; stroke-linejoin: round; }
.chart circle { stroke: var(--card); stroke-width: 2; }
.chart text { font-size: 13px; font-variant-numeric: tabular-nums; }
.chart-value { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 12px; }
.chart-value span { font-size: 14px; font-weight: 400; color: var(--muted); }
.empty { padding: 24px 0; font-size: 14px; text-align: left; }
.plan-title { font-size: 22px; line-height: 1.25; }
.job-indicator { background: #23301e; border-color: #738650; padding: 12px; font-size: 14px; }
@media(hover:hover) {
 .primary:hover { background: #e2fbb0; }
 .secondary:hover,.bottom-nav button:hover,.remove-set:hover { background: #354139; }
 .text-button:hover,.back:hover { text-decoration: underline; text-underline-offset: 4px; }
 .history-item:hover { background: #1b2220; }
 summary:hover { color: var(--green); }
}
button:active,a.primary:active { opacity: .8; }
@media(min-width:560px) { .exercise-card { padding: 24px; } .shell { padding-bottom: calc(116px + env(safe-area-inset-bottom,0px)); } }
@media(max-width:359px) { .shell { padding-left: 12px; padding-right: 12px; } .exercise-card { padding: 12px; } .set-head,.set-row { gap: 4px; } .card { padding: 16px; } .stage-label { max-width: 120px; } }
@media(prefers-reduced-motion:no-preference) { button,a,input { transition: background-color 160ms ease-out,border-color 160ms ease-out; } }

.exercise-card>summary.exercise-summary{display:flex;align-items:center;gap:10px;list-style:none;min-height:44px;padding:0;color:var(--text)}
.exercise-summary::-webkit-details-marker{display:none}
.exercise-title{flex:1;min-width:0}
.exercise-summary h2{font-size:16px;line-height:1.35;margin:0 0 4px;text-wrap:pretty}
.exercise-summary .exercise-group{display:block;margin:0}
.exercise-chevron{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7}
.exercise-card[open]>.exercise-summary .exercise-chevron{transform:rotate(180deg)}
.exercise-body{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:var(--text)}
.exercise-controls{display:flex;justify-content:space-between;gap:12px;margin:0 0 6px}

.rir-row { grid-column: 1 / -1; display: grid; grid-template-columns: 48px repeat(5, minmax(0, 1fr)); gap: 4px; align-items: center; margin: 0; }
.rir-label { font-size: 12px; line-height: 1.25; color: var(--muted); }
.rir-label b { display: block; color: #b9c9ab; font-weight: 500; }
.rir-chip { min-width: 0; height: 44px; padding: 0; border: 1px solid #4b5a4c; border-radius: 8px; background: transparent; color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.rir-chip.active { background: var(--green); border-color: var(--green); color: #1c2b13; font-weight: 600; }
@media(max-width:359px) { .rir-row { gap: 4px; grid-template-columns: 48px repeat(5, minmax(0, 1fr)); } }