:root { color-scheme:dark; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; background:#0b1423; color:#eef4fb; --mint:#75efc3; --muted:#b0c0d2; --surface:#142237; }
* { box-sizing:border-box; }
body { margin:0; }
main { max-width:640px; margin:auto; padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); }
.workout { display:grid; grid-template-rows:28px minmax(190px,1fr) 142px minmax(34px,auto) auto; gap:6px; height:calc(100vh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height:calc(100svh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height:490px; }
.brand { display:flex; align-items:center; justify-content:space-between; padding:0 4px; }
.brand>div { display:flex; align-items:baseline; gap:8px; }
h1 { font-size:17px; letter-spacing:.02em; margin:0; font-weight:850; }
.eyebrow { font-size:9px; letter-spacing:.1em; color:var(--mint); margin:0; }
.version { font-size:9px; color:var(--muted); border:1px solid #304158; padding:4px 5px; border-radius:5px; white-space:nowrap; }
.preview { position:relative; min-height:0; background:#050b13; border:1px solid #2b3c51; border-radius:14px; overflow:hidden; }
video,canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform:scaleX(-1); }
#phase { position:absolute; top:8px; left:8px; max-width:calc(100% - 84px); padding:6px 10px; background:#0b1423e8; border:1px solid #34475a; border-radius:20px; font-size:12px; }
.exercise { position:absolute; bottom:8px; left:0; right:0; text-align:center; color:#d8e4f0; font-size:10px; text-shadow:0 1px 5px #000; pointer-events:none; }
.camera-hint { position:absolute; inset:42px 0 92px; display:flex; flex-direction:column; justify-content:center; align-items:center; color:var(--muted); text-align:center; font-size:13px; }
.camera-icon { font-size:32px; color:var(--mint); }
.camera-hint p { margin:8px 0; line-height:1.6; }
button { font:inherit; font-weight:700; min-height:44px; padding:10px 14px; border:0; border-radius:12px; cursor:pointer; color:#09261d; background:var(--mint); touch-action:manipulation; }
button:disabled { opacity:.45; cursor:default; }
.camera-open { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:14px; }
.camera-close { position:absolute; right:6px; top:2px; background:#0b1423dd; color:#d0dcec; font-size:12px; }
.dashboard { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; }
.metric { display:flex; align-items:center; justify-content:space-between; gap:4px; padding:6px 10px; background:var(--surface); border:1px solid #24354a; border-radius:12px; }
.metric h2 { font-size:11px; color:var(--muted); font-weight:500; margin:0; white-space:nowrap; }
.metric p { margin:0; line-height:1; white-space:nowrap; }
.metric strong { font-size:46px; font-weight:750; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
#count { color:var(--mint); }
#timer { font-size:36px; }
.metric span { font-size:12px; color:var(--muted); margin-left:3px; }
.repetitions { grid-column:1; grid-row:1; }
.remaining { grid-column:1; grid-row:2; }
.action-dock { grid-column:2; grid-row:1 / 3; min-width:0; }
.primary { width:100%; height:100%; font-size:clamp(20px,6vw,30px); box-shadow:0 6px 22px #0002; }
.primary span { display:block; margin-top:8px; font-size:11px; font-weight:500; }
.stop { background:#25384e; color:#fff; border:1px solid #536a82; }
.recognition { display:flex; align-items:flex-start; gap:7px; padding:2px 4px; }
.status-dot { flex:0 0 5px; height:5px; border-radius:50%; background:var(--mint); margin-top:7px; }
#status { font-size:12px; line-height:1.5; margin:0; overflow-wrap:anywhere; }
.voice-status { color:#b7c8dc; font-size:10px; line-height:1.5; margin:0; padding:0 4px; overflow-wrap:anywhere; }
.card { border:1px solid #26384d; border-radius:12px; padding:12px; margin-top:8px; background:var(--surface); }
h2 { font-size:16px; margin:0 0 8px; }
p { line-height:1.7; }
.card p,.card label,.card a { font-size:13px; }
summary { cursor:pointer; font-size:13px; font-weight:600; min-height:20px; }
.settings>summary { color:var(--muted); }
.settings section,.sub-settings { margin-top:16px; padding-top:14px; border-top:1px solid #2a3c53; }
label { display:block; margin:12px 0; }
input[type=checkbox] { width:18px; height:18px; accent-color:var(--mint); vertical-align:middle; }
input[type=number],select { width:90px; min-height:44px; font:inherit; font-size:16px; border:1px solid #536a82; border-radius:6px; padding:6px; }
input[type=range] { vertical-align:middle; min-height:44px; accent-color:var(--mint); }
.secondary { background:#25384e; color:#eef4fb; font-size:13px; }
pre { font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.note { color:var(--muted); }
a { color:var(--mint); }
[hidden] { display:none!important; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #ffda8b; outline-offset:3px; }
#countdown { position:fixed; inset:0; z-index:10; display:grid; place-items:center; pointer-events:none; font-size:clamp(60px,20vw,160px); font-weight:900; color:#fff; text-shadow:0 4px 28px #000,0 0 8px #000; font-variant-numeric:tabular-nums; }
@media (max-width:360px) { h1{font-size:15px}.eyebrow{font-size:8px}.metric{padding:6px}.metric h2{font-size:10px}.metric strong{font-size:38px}#timer{font-size:32px} }
@media (max-height:650px) { .camera-icon{display:none}.camera-hint p{margin:0}.workout{grid-template-rows:28px minmax(190px,1fr) 130px minmax(34px,auto) auto} }