:root{
  --bg:#0a0c0f;
  --bg2:#11151a;
  --panel:rgba(255,255,255,.055);
  --panel-strong:rgba(255,255,255,.085);
  --stroke:rgba(255,255,255,.09);
  --text:#f6f7f8;
  --muted:#9ba6b2;
  --muted2:#6f7a85;
  --accent:#b8f7d4;
  --accent-2:#8ee7bd;
  --accent-dark:#16392b;
  --danger:#ff8d95;
  --warning:#f6d36b;
  --shadow:0 24px 60px rgba(0,0,0,.35);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:radial-gradient(circle at 15% -10%,#1c2924 0,transparent 30%),radial-gradient(circle at 90% 10%,#19232d 0,transparent 35%),var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,Segoe UI,sans-serif;min-height:100%;}
body{overflow-x:hidden}
button,input,select,textarea{font:inherit}
button{border:0}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#app{min-height:100dvh}
.shell{min-height:100dvh;max-width:560px;margin:0 auto;position:relative;padding:calc(20px + var(--safe-top)) 18px calc(104px + var(--safe-bottom));}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:38px;height:38px;border-radius:13px;background:linear-gradient(145deg,var(--accent),#7fdcb1);display:grid;place-items:center;color:#092217;font-weight:900;letter-spacing:-.05em;box-shadow:0 8px 30px rgba(142,231,189,.18)}
.brand-name{font-weight:800;letter-spacing:.16em;font-size:12px}
.brand-sub{color:var(--muted);font-size:11px;margin-top:2px}
.icon-btn{width:42px;height:42px;border-radius:14px;background:var(--panel);color:var(--text);display:grid;place-items:center;border:1px solid var(--stroke)}
.greeting{margin:6px 0 18px}
.kicker{font-size:12px;color:var(--accent-2);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}
h1{font-size:34px;line-height:1.02;letter-spacing:-.045em;margin-bottom:8px}
h2{font-size:22px;letter-spacing:-.03em;margin-bottom:8px}
h3{font-size:17px;letter-spacing:-.02em;margin-bottom:6px}
.muted{color:var(--muted)}
.small{font-size:12px}
.section{margin-top:26px}
.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:12px}
.section-title{font-size:16px;font-weight:800;letter-spacing:-.02em}
.section-link{font-size:12px;color:var(--accent-2);background:none;padding:0}
.card{background:linear-gradient(180deg,rgba(255,255,255,.072),rgba(255,255,255,.038));border:1px solid var(--stroke);border-radius:var(--radius-lg);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.hero{position:relative;overflow:hidden;padding:22px;background:linear-gradient(145deg,rgba(184,247,212,.16),rgba(255,255,255,.055) 46%,rgba(255,255,255,.035));min-height:198px}
.hero:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(184,247,212,.23),transparent 68%);right:-80px;top:-95px;pointer-events:none}
.hero-top{display:flex;justify-content:space-between;gap:14px;position:relative}
.hero-title{font-size:24px;line-height:1.05;font-weight:850;letter-spacing:-.04em;max-width:260px}
.hero-meta{margin-top:8px;color:#c8d0d6;font-size:13px}
.hero-badge{padding:8px 10px;border-radius:999px;background:rgba(184,247,212,.12);color:var(--accent);font-size:11px;font-weight:700;height:max-content;border:1px solid rgba(184,247,212,.17)}
.hero-actions{display:flex;gap:10px;margin-top:26px;position:relative}
.btn{min-height:48px;padding:0 17px;border-radius:15px;font-weight:800;letter-spacing:-.01em;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--accent),#8fe4bd);color:#082218;box-shadow:0 12px 32px rgba(143,228,189,.16)}
.btn-secondary{background:rgba(255,255,255,.07);color:var(--text);border:1px solid var(--stroke)}
.btn-ghost{background:none;color:var(--muted);padding-inline:8px}
.btn-danger{background:rgba(255,141,149,.12);color:#ffc1c5;border:1px solid rgba(255,141,149,.17)}
.btn:disabled{opacity:.38;cursor:not-allowed}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat-card{padding:16px}
.stat-value{font-size:25px;font-weight:850;letter-spacing:-.04em}
.stat-label{margin-top:3px;color:var(--muted);font-size:12px}
.program-list{display:grid;gap:10px}
.program-card{padding:15px 16px;display:flex;align-items:center;gap:13px;cursor:pointer}
.program-icon{width:46px;height:46px;border-radius:16px;background:rgba(184,247,212,.10);color:var(--accent);display:grid;place-items:center;font-weight:900}
.program-body{min-width:0;flex:1}
.program-name{font-weight:800;font-size:15px}
.program-meta{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{color:var(--muted2);font-size:22px}
.nav{position:fixed;z-index:40;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,560px);padding:10px 14px calc(10px + var(--safe-bottom));background:linear-gradient(180deg,rgba(10,12,15,0),rgba(10,12,15,.86) 20%,rgba(10,12,15,.97) 45%);backdrop-filter:blur(20px)}
.nav-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:7px;border-radius:22px;background:rgba(20,24,29,.86);border:1px solid var(--stroke);box-shadow:var(--shadow)}
.nav-btn{height:56px;border-radius:16px;background:transparent;color:var(--muted2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:10px;font-weight:700}
.nav-btn svg{width:20px;height:20px}
.nav-btn.active{background:rgba(255,255,255,.075);color:var(--text)}
.nav-btn.active svg{color:var(--accent)}
.search{display:flex;gap:10px;align-items:center;padding:0 14px;height:48px;border-radius:16px;background:var(--panel);border:1px solid var(--stroke)}
.search input{flex:1;background:none;border:0;color:var(--text);min-width:0;font-size:14px}
.search input::placeholder{color:var(--muted2)}
.chips{display:flex;gap:8px;overflow:auto;padding:12px 0 2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;padding:9px 12px;border-radius:999px;background:var(--panel);color:var(--muted);border:1px solid var(--stroke);font-size:12px;font-weight:700}
.chip.active{background:rgba(184,247,212,.13);color:var(--accent);border-color:rgba(184,247,212,.16)}
.exercise-list{display:grid;gap:10px;margin-top:14px}
.exercise-card{padding:16px;display:flex;gap:13px;align-items:center}
.exercise-thumb{width:54px;height:54px;border-radius:17px;background:linear-gradient(145deg,rgba(184,247,212,.12),rgba(255,255,255,.04));display:grid;place-items:center;color:var(--accent);font-weight:900;overflow:hidden;flex:none;border:1px solid var(--stroke)}
.exercise-thumb img{width:100%;height:100%;object-fit:cover}
.exercise-main{flex:1;min-width:0}
.exercise-name{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exercise-meta{font-size:12px;color:var(--muted);margin-top:4px}
.exercise-value{font-size:12px;color:#d5dce1;margin-top:5px}
.fab{position:fixed;right:max(22px,calc((100vw - 560px)/2 + 22px));bottom:calc(94px + var(--safe-bottom));width:58px;height:58px;border-radius:20px;background:linear-gradient(135deg,var(--accent),#8ee7bd);color:#082218;font-size:30px;font-weight:500;box-shadow:0 18px 45px rgba(142,231,189,.22);z-index:30}
.empty{padding:32px 22px;text-align:center}
.empty-icon{width:62px;height:62px;margin:0 auto 14px;border-radius:21px;background:var(--panel);display:grid;place-items:center;color:var(--accent);font-size:26px}
.empty p{color:var(--muted);font-size:13px;line-height:1.5}
.list-row{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--stroke)}
.list-row:last-child{border-bottom:0}
.row-icon{width:38px;height:38px;border-radius:13px;background:var(--panel);display:grid;place-items:center;color:var(--accent);flex:none}
.row-body{flex:1;min-width:0}
.row-title{font-size:14px;font-weight:750}
.row-sub{font-size:12px;color:var(--muted);margin-top:3px}
.badge{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;background:rgba(184,247,212,.11);color:var(--accent);font-size:10px;font-weight:800}
.warning-badge{background:rgba(246,211,107,.10);color:var(--warning)}
.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(10px);display:flex;align-items:flex-end;justify-content:center;z-index:100;padding-top:40px}
.modal{width:min(100%,560px);max-height:94dvh;overflow:auto;background:linear-gradient(180deg,#171b20,#0f1216 58%);border:1px solid rgba(255,255,255,.11);border-radius:30px 30px 0 0;box-shadow:0 -24px 70px rgba(0,0,0,.4);padding:16px 18px calc(24px + var(--safe-bottom))}
.modal-handle{width:42px;height:5px;border-radius:99px;background:#3e444b;margin:2px auto 18px}
.modal-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:18px}
.modal-title{font-size:23px;font-weight:850;letter-spacing:-.035em}
.modal-close{width:40px;height:40px;border-radius:14px;background:var(--panel);color:var(--text);font-size:22px}
.form-grid{display:grid;gap:13px}
.field label{display:block;font-size:11px;color:var(--muted);font-weight:700;margin:0 0 7px 2px;letter-spacing:.02em}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--stroke);background:rgba(255,255,255,.055);color:var(--text);border-radius:15px;padding:13px 14px;min-height:48px}
.field textarea{resize:vertical;min-height:92px}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-radius:15px;background:var(--panel);border:1px solid var(--stroke)}
.switch{position:relative;width:48px;height:28px;border-radius:999px;background:#2e343a}
.switch.on{background:var(--accent-dark)}
.switch:after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}
.switch.on:after{left:23px;background:var(--accent)}
.form-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:18px}
.photo-drop{padding:18px;border-radius:18px;border:1px dashed rgba(184,247,212,.23);background:rgba(184,247,212,.055);text-align:center;color:var(--muted);font-size:12px}
.photo-drop strong{color:var(--text)}
.workout{min-height:100dvh;max-width:560px;margin:0 auto;padding:calc(18px + var(--safe-top)) 18px calc(34px + var(--safe-bottom));background:radial-gradient(circle at 50% -10%,#183329 0,transparent 31%),var(--bg)}
.workout-top{display:flex;justify-content:space-between;align-items:center;gap:14px}
.workout-progress{height:5px;background:#20262c;border-radius:99px;overflow:hidden;margin:18px 0 22px}
.workout-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#70dca8);border-radius:inherit;transition:.3s}
.exercise-focus{padding:20px}
.focus-label{font-size:11px;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.focus-title{font-size:29px;font-weight:900;letter-spacing:-.045em;line-height:1.03;margin-top:7px}
.focus-sub{color:var(--muted);font-size:13px;margin-top:8px}
.setting-strip{display:flex;gap:8px;overflow:auto;padding:14px 0 2px;scrollbar-width:none}
.setting-chip{min-width:max-content;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid var(--stroke)}
.setting-chip b{display:block;font-size:15px}
.setting-chip span{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.last-box{margin-top:15px;padding:13px 14px;border-radius:16px;background:rgba(184,247,212,.07);border:1px solid rgba(184,247,212,.11);font-size:12px;color:#d8e8df}
.set-list{display:grid;gap:10px;margin-top:14px}
.set-row{display:grid;grid-template-columns:44px 1fr 48px;align-items:center;gap:10px;padding:12px;border-radius:17px;background:rgba(255,255,255,.045);border:1px solid var(--stroke)}
.set-row.done{background:rgba(184,247,212,.075);border-color:rgba(184,247,212,.13)}
.set-num{width:38px;height:38px;border-radius:13px;background:rgba(255,255,255,.06);display:grid;place-items:center;font-weight:850;color:var(--muted)}
.set-row.done .set-num{color:#072319;background:var(--accent)}
.set-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stepper{display:inline-grid;grid-template-columns:34px minmax(58px,auto) 34px;align-items:center;border:1px solid var(--stroke);border-radius:13px;overflow:hidden;background:rgba(255,255,255,.035)}
.stepper button{height:36px;background:transparent;color:var(--muted);font-size:18px}
.stepper strong{font-size:13px;text-align:center;padding:0 4px}
.done-btn{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.07);color:var(--muted);font-size:20px;border:1px solid var(--stroke)}
.set-row.done .done-btn{background:rgba(184,247,212,.14);color:var(--accent)}
.workout-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.workout-actions .btn{min-height:46px;font-size:12px}
.primary-next{width:100%;margin-top:12px;min-height:58px;border-radius:18px}
.timer-pill{position:fixed;z-index:120;left:50%;transform:translateX(-50%);bottom:calc(20px + var(--safe-bottom));background:#1a211e;border:1px solid rgba(184,247,212,.19);box-shadow:var(--shadow);border-radius:999px;padding:10px 14px 10px 16px;display:flex;gap:13px;align-items:center;min-width:210px}
.timer-time{font-size:18px;font-weight:850;color:var(--accent)}
.timer-text{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.timer-close{margin-left:auto;background:rgba(255,255,255,.06);color:var(--text);width:30px;height:30px;border-radius:50%}
.report{padding:8px 0 28px}
.report-sheet{background:#f7f6f2;color:#111418;border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.report-brand{font-weight:900;letter-spacing:.15em;font-size:12px}
.report-head{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #d8d9d6;padding-bottom:18px;margin-bottom:18px}
.report h2{font-size:26px;margin:5px 0 0}
.report-muted{color:#66706f;font-size:12px}
.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0}
.report-stat{border:1px solid #dedfdb;border-radius:14px;padding:12px}
.report-stat b{display:block;font-size:20px}
.report-stat span{font-size:10px;color:#66706f}
.report-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:12px}
.report-table th,.report-table td{text-align:left;padding:9px 6px;border-bottom:1px solid #e1e2df;vertical-align:top}
.report-table th{color:#66706f;font-size:9px;text-transform:uppercase;letter-spacing:.06em}
.spark{width:100%;height:42px;display:block}
.progress-card{padding:16px}
.trend-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--stroke)}
.trend-row:last-child{border-bottom:0}
.trend-main{flex:1;min-width:0}
.trend-value{font-size:15px;font-weight:850}
.question{padding:13px 14px;border-radius:15px;background:rgba(246,211,107,.07);border:1px solid rgba(246,211,107,.13);font-size:12px;color:#ece0b3;margin-top:10px}
.inline-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.toast{position:fixed;z-index:300;left:50%;bottom:calc(96px + var(--safe-bottom));transform:translate(-50%,16px);opacity:0;pointer-events:none;background:#f3f5f4;color:#111418;border-radius:14px;padding:11px 14px;font-size:12px;font-weight:750;box-shadow:0 14px 40px rgba(0,0,0,.35);transition:.25s;max-width:calc(100vw - 36px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.source-image{width:100%;border-radius:18px;border:1px solid var(--stroke);margin-top:12px}
.note-box{padding:14px;border-radius:16px;background:var(--panel);border:1px solid var(--stroke);font-size:12px;line-height:1.5;color:#d6dce1}
hr.sep{border:0;border-top:1px solid var(--stroke);margin:18px 0}
@media(min-width:700px){body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.035),transparent 45%);pointer-events:none}.shell,.workout{border-left:1px solid rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.04)}}
@media print{
  body{background:#fff!important;color:#111!important}
  .shell,.nav,.modal-head,.report-actions,.toast{display:none!important}
  .modal-wrap{position:static!important;display:block!important;background:#fff!important;padding:0!important}
  .modal{position:static!important;max-height:none!important;overflow:visible!important;border:0!important;background:#fff!important;padding:0!important;box-shadow:none!important}
  .report{display:block!important}
  .report-sheet{box-shadow:none!important;border-radius:0!important;padding:0!important}
  @page{size:A4;margin:14mm}
}

/* MOTION v2 · premium visual system + free workout flow */
:root{
  --glass:rgba(20,25,30,.72);
  --glass-strong:rgba(27,33,39,.90);
}
.card{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.topbar{margin-bottom:24px}
.greeting{margin-top:12px;margin-bottom:22px}
.greeting h1{font-size:36px}
.section{margin-top:30px}
.hero{border-color:rgba(255,255,255,.105);box-shadow:0 22px 55px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06)}
.program-card,.exercise-card{transition:transform .16s ease,border-color .16s ease,background .16s ease}
.program-card:active,.exercise-card:active{transform:scale(.985);border-color:rgba(184,247,212,.18)}

.exercise-glyph{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;flex:none;border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 30px rgba(0,0,0,.14)}
.exercise-glyph.large{width:72px;height:72px;border-radius:23px}
.exercise-glyph.focus{width:62px;height:62px;border-radius:20px}
.exercise-glyph.mini{width:38px;height:38px;border-radius:13px;box-shadow:none}
.exercise-glyph.tone-mint{color:#b8f7d4;background:linear-gradient(145deg,rgba(184,247,212,.15),rgba(184,247,212,.045));border-color:rgba(184,247,212,.14)}
.exercise-glyph.tone-blue{color:#9ed4ff;background:linear-gradient(145deg,rgba(107,185,255,.16),rgba(107,185,255,.045));border-color:rgba(107,185,255,.15)}
.exercise-glyph.tone-violet{color:#c7b5ff;background:linear-gradient(145deg,rgba(155,126,255,.17),rgba(155,126,255,.045));border-color:rgba(155,126,255,.15)}
.exercise-glyph.tone-amber{color:#ffd890;background:linear-gradient(145deg,rgba(255,190,84,.17),rgba(255,190,84,.045));border-color:rgba(255,190,84,.15)}
.exercise-glyph.tone-rose{color:#ffb2c0;background:linear-gradient(145deg,rgba(255,112,142,.16),rgba(255,112,142,.045));border-color:rgba(255,112,142,.14)}
.exercise-glyph.tone-cyan{color:#94ebeb;background:linear-gradient(145deg,rgba(75,211,211,.16),rgba(75,211,211,.045));border-color:rgba(75,211,211,.14)}
.exercise-card{padding:14px 15px;gap:14px}
.exercise-card .exercise-glyph{width:52px;height:52px}
.visual-label{color:var(--muted2)}
.detail-visual{display:flex;align-items:center;gap:15px;margin:0 0 18px;padding:16px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.028));border:1px solid var(--stroke)}
.detail-visual-title{font-size:15px;font-weight:850;letter-spacing:-.02em}
.detail-visual-sub{font-size:12px;color:var(--muted);margin-top:4px}

.workout{background:radial-gradient(circle at 50% -12%,rgba(45,94,73,.43) 0,transparent 31%),radial-gradient(circle at 100% 15%,rgba(41,56,78,.28),transparent 32%),var(--bg);padding-left:16px;padding-right:16px}
.workout-top{position:sticky;top:0;z-index:20;padding-top:2px;background:linear-gradient(180deg,rgba(10,12,15,.98),rgba(10,12,15,.82) 72%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.workout-progress{margin:16px 0 9px;height:4px;background:rgba(255,255,255,.075)}
.workout-summary{display:flex;gap:13px;align-items:center;color:var(--muted);font-size:11px;margin:0 2px 18px}
.workout-summary span{display:flex;align-items:center;gap:4px}
.workout-summary b{color:var(--text);font-size:12px}
.workout-picker-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 2px 10px}
.workout-picker-title{font-size:15px;font-weight:850;letter-spacing:-.02em}
.workout-picker-sub{font-size:11px;color:var(--muted);margin-top:3px}
.free-badge{font-size:9px;letter-spacing:.13em;font-weight:900;color:var(--accent);border:1px solid rgba(184,247,212,.15);background:rgba(184,247,212,.07);border-radius:999px;padding:6px 8px}
.workout-picker{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 -16px 16px;padding:0 16px 3px}
.workout-picker::-webkit-scrollbar{display:none}
.workout-pick{min-width:218px;max-width:250px;padding:10px 11px;display:flex;align-items:center;gap:10px;text-align:left;color:var(--text);background:rgba(255,255,255,.045);border:1px solid var(--stroke);border-radius:18px;scroll-snap-align:start;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.workout-pick.current{background:linear-gradient(145deg,rgba(184,247,212,.11),rgba(255,255,255,.045));border-color:rgba(184,247,212,.19);box-shadow:0 12px 35px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04)}
.workout-pick.done{opacity:.72}
.workout-pick.skipped{opacity:.48}
.workout-pick span{min-width:0;flex:1}
.workout-pick b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workout-pick small{display:block;margin-top:3px;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workout-pick i{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:rgba(184,247,212,.12);color:var(--accent);font-style:normal}
.exercise-focus{padding:18px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.038));box-shadow:0 24px 65px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.045)}
.focus-hero{display:flex;align-items:flex-start;gap:14px}
.focus-hero>div:last-child{min-width:0;flex:1}
.focus-label{font-size:9px;letter-spacing:.13em;margin-top:2px}
.focus-title{font-size:25px;line-height:1.07;margin-top:5px}
.focus-sub{margin-top:7px}
.setting-strip{padding-top:15px}
.setting-chip{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.075)}
.last-box{border-radius:17px;padding:12px 13px}
.set-list{gap:9px;margin-top:16px}
.set-row{border-radius:18px;background:rgba(255,255,255,.037);padding:10px}
.set-row.done{background:rgba(184,247,212,.066)}
.stepper{background:rgba(0,0,0,.12)}
.workout-actions{margin-top:14px}
.workout-foot-actions{display:flex;justify-content:space-between;gap:10px;margin-top:4px}
.workout-foot-actions .btn{font-size:11px;flex:1}
.primary-next{margin-top:11px;box-shadow:0 14px 34px rgba(143,228,189,.13)}

@media(max-width:390px){
  .shell{padding-left:15px;padding-right:15px}
  .workout{padding-left:14px;padding-right:14px}
  .workout-picker{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .workout-pick{min-width:205px}
  .focus-title{font-size:23px}
  .set-row{grid-template-columns:38px 1fr 44px;gap:7px}
  .set-num{width:34px;height:34px}
  .stepper{grid-template-columns:31px minmax(52px,auto) 31px}
}
.media-details{margin-top:10px;border:1px solid var(--stroke);border-radius:16px;background:var(--panel);overflow:hidden}
.media-details summary{list-style:none;display:flex;align-items:center;gap:8px;padding:13px 14px;color:var(--muted);font-size:12px;font-weight:750;cursor:pointer}
.media-details summary::-webkit-details-marker{display:none}
.media-details[open] summary{color:var(--text);border-bottom:1px solid var(--stroke)}
.media-details .source-image{margin:0;border:0;border-radius:0;display:block}

/* MOTION v2.2 · workout exit controls + treadmill interval coach */
.discard-workout{width:100%;margin-top:10px;min-height:46px;background:rgba(255,141,149,.08);border-color:rgba(255,141,149,.14)}
.finish-secondary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.danger-icon{color:#ffb4ba;border-color:rgba(255,141,149,.16);background:rgba(255,141,149,.07)}
.field-help{font-size:10px;color:var(--muted2);margin-top:7px;line-height:1.45}
.interval-plan{margin-top:14px;border:1px solid var(--stroke);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.025)}
.interval-plan-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:11px 12px;border-bottom:1px solid var(--stroke)}
.interval-plan-row:last-child{border-bottom:0}
.interval-plan-row>span{display:grid;place-items:center;width:24px;height:24px;border-radius:9px;background:rgba(255,255,255,.05);color:var(--muted);font-size:10px;font-weight:850}
.interval-plan-row div{min-width:0}.interval-plan-row b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.interval-plan-row small{display:block;font-size:9px;color:var(--muted);margin-top:2px}
.interval-plan-row strong{font-size:11px}.interval-plan-row em{font-size:10px;font-style:normal;color:var(--muted);min-width:30px;text-align:right}
.interval-plan.compact{max-height:190px;overflow:auto}.interval-plan.compact .interval-plan-row{padding:9px 10px}
.cardio-box{margin-top:16px;padding:17px;border-radius:22px;background:linear-gradient(145deg,rgba(66,201,210,.10),rgba(255,255,255,.035));border:1px solid rgba(111,221,224,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.cardio-box.active{padding:18px}.cardio-kicker{font-size:9px;font-weight:900;letter-spacing:.14em;color:#9fe8e8}.cardio-title{font-size:20px;font-weight:900;letter-spacing:-.03em;margin-top:4px}.cardio-main{width:100%;margin-top:14px;min-height:52px}
.cardio-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.cardio-total{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.cardio-time{font-size:58px;line-height:1;font-weight:900;letter-spacing:-.055em;margin:24px 0 18px;font-variant-numeric:tabular-nums}
.cardio-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cardio-metrics>div{padding:13px;border-radius:16px;background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.06)}.cardio-metrics b{display:block;font-size:24px;letter-spacing:-.03em}.cardio-metrics span{display:block;font-size:9px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.08em}
.cardio-progress{height:5px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin:16px 0 11px}.cardio-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8ddfdc,#b8f7d4);transition:width .4s linear}.cardio-next{font-size:11px;color:var(--muted);line-height:1.45}.cardio-next strong{color:var(--text)}
.cardio-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
@media(max-width:390px){.cardio-time{font-size:52px}.interval-plan-row{grid-template-columns:22px minmax(0,1fr) auto auto;gap:7px}.interval-plan-row strong{font-size:10px}}


/* MOTION v2.5 · iPhone viewport stability */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  position:relative;
}
#app{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
.shell,
.workout{
  width:100%;
  max-width:560px;
  min-width:0;
  overflow-x:hidden;
}
.shell > *,
.workout > *,
.section,
.card,
.hero,
.program-list,
.exercise-list,
.progress-card,
.report,
.report-sheet,
.form-grid,
.field,
.field-pair,
.modal-head,
.detail-visual,
.exercise-focus,
.cardio-box{
  min-width:0;
  max-width:100%;
}
img,
video,
canvas{
  max-width:100%;
  height:auto;
}
svg{
  max-width:100%;
}
button,
input,
select,
textarea{
  min-width:0;
  max-width:100%;
}
.hero-top,
.hero-actions,
.section-head,
.workout-top,
.workout-picker-head,
.focus-hero,
.cardio-head,
.list-row,
.program-card,
.exercise-card,
.trend-row,
.detail-visual{
  min-width:0;
}
.hero-title,
.program-name,
.exercise-name,
.row-title,
.row-sub,
.detail-visual-title,
.detail-visual-sub,
.focus-title,
.focus-sub,
.note-box,
.question{
  overflow-wrap:anywhere;
}
.nav{
  width:100%;
  max-width:560px;
  overflow:hidden;
}
.nav-inner,
.nav-btn{
  min-width:0;
}
.fab{
  right:max(18px,calc((100vw - 560px)/2 + 18px));
}
.modal-wrap{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
.modal{
  width:100%;
  max-width:560px;
  min-width:0;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.chips,
.setting-strip,
.workout-picker{
  max-width:100%;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.workout-picker{
  width:calc(100% + 32px);
  max-width:none;
}
.set-row{
  min-width:0;
  max-width:100%;
}
.set-controls{
  min-width:0;
  max-width:100%;
}
.stepper{
  max-width:100%;
}
.interval-plan,
.interval-plan-row{
  min-width:0;
  max-width:100%;
}
.interval-plan-row > *{
  min-width:0;
}
.report-sheet{
  overflow:hidden;
}
.report-table{
  table-layout:fixed;
  max-width:100%;
}
.report-table th,
.report-table td{
  overflow-wrap:anywhere;
  word-break:break-word;
}
@media(max-width:430px){
  .shell{
    padding-left:max(14px,env(safe-area-inset-left,0px));
    padding-right:max(14px,env(safe-area-inset-right,0px));
  }
  .workout{
    padding-left:max(12px,env(safe-area-inset-left,0px));
    padding-right:max(12px,env(safe-area-inset-right,0px));
  }
  .workout-picker{
    width:calc(100% + 24px);
    margin-left:-12px;
    margin-right:-12px;
    padding-left:12px;
    padding-right:12px;
  }
  .hero{
    padding:18px;
  }
  .hero-top{
    flex-wrap:wrap;
  }
  .hero-title{
    max-width:100%;
  }
  .hero-badge{
    max-width:100%;
    white-space:normal;
  }
  .hero-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .hero-actions .btn{
    width:100%;
    min-width:0;
    padding-left:12px;
    padding-right:12px;
  }
  .field-pair{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .form-actions,
  .finish-secondary,
  .workout-actions,
  .cardio-actions{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .set-row{
    grid-template-columns:34px minmax(0,1fr) 42px;
    gap:6px;
    padding:9px;
  }
  .set-controls{
    gap:6px;
  }
  .stepper{
    grid-template-columns:28px minmax(46px,1fr) 28px;
  }
  .stepper strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .report-sheet{
    padding:18px 14px;
  }
  .report-head{
    flex-direction:column;
    gap:8px;
  }
  .report-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .report-stat{
    padding:10px 8px;
  }
  .report-stat b{
    font-size:17px;
  }
  .interval-plan-row{
    grid-template-columns:22px minmax(0,1fr) auto;
  }
  .interval-plan-row em{
    display:none;
  }
}
@media(max-width:350px){
  .grid-2,
  .field-pair,
  .form-actions,
  .finish-secondary,
  .workout-actions,
  .cardio-actions{
    grid-template-columns:1fr;
  }
  .hero-actions{
    grid-template-columns:1fr;
  }
  .report-grid{
    grid-template-columns:1fr;
  }
}


/* MOTION v2.9 · device number + safe native animations */
.exercise-name-row{display:flex;align-items:center;gap:8px;min-width:0}
.exercise-name-row .exercise-name{min-width:0;flex:1}
.device-number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:24px;padding:4px 8px;border-radius:999px;background:rgba(184,247,212,.12);border:1px solid rgba(184,247,212,.2);color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.04em;white-space:nowrap}
.device-number.large{margin-top:8px;min-height:31px;padding:6px 11px;font-size:12px;background:rgba(184,247,212,.16);box-shadow:0 8px 24px rgba(142,231,189,.08)}
.focus-hero .device-number.large{display:flex;width:max-content}

.safe-motion{margin:12px 0 14px;padding:12px 14px 10px;border-radius:19px;background:linear-gradient(145deg,rgba(184,247,212,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.075);overflow:hidden;color:var(--accent)}
.safe-motion-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:4px}
.safe-motion-head strong{font-size:12px;color:var(--text)}
.safe-motion-head span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.safe-motion svg{display:block;width:100%;height:96px;overflow:visible}
.safe-motion-note{font-size:9px;color:var(--muted);line-height:1.35;margin-top:1px}
.safe-motion .sm-floor,.safe-motion .sm-body,.safe-motion .sm-bar,.safe-motion .sm-machine,.safe-motion .sm-belt,.safe-motion .sm-line,.safe-motion .sm-ring{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.safe-motion .sm-floor{opacity:.24}
.safe-motion .sm-machine,.safe-motion .sm-ghost{stroke:rgba(255,255,255,.28);fill:none;stroke-width:3.5}
.safe-motion .sm-head{fill:currentColor}
.safe-motion .sm-ball{fill:none;stroke:currentColor;stroke-width:3}
.safe-motion .sm-rotate{stroke-dasharray:12 8;animation:smRotate 2.3s linear infinite;transform-origin:80px 60px}
.safe-motion .sm-reverse{animation-direction:reverse}
.safe-motion .sm-reach{animation:smReach 2.1s ease-in-out infinite;transform-origin:72px 58px}
.safe-motion .sm-sway{animation:smSway 2.3s ease-in-out infinite;transform-origin:80px 70px}
.safe-motion .sm-leg-extension{animation:smLegExtension 1.9s ease-in-out infinite;transform-origin:92px 70px}
.safe-motion .sm-leg-curl{animation:smLegCurl 1.9s ease-in-out infinite;transform-origin:96px 58px}
.safe-motion .sm-leg-press{animation:smLegPress 2s ease-in-out infinite;transform-origin:82px 72px}
.safe-motion .sm-thrust{animation:smThrust 2s ease-in-out infinite;transform-origin:86px 67px}
.safe-motion .sm-step{animation:smStep 2s ease-in-out infinite;transform-origin:88px 94px}
.safe-motion .sm-lat{animation:smLat 2s ease-in-out infinite;transform-origin:80px 70px}
.safe-motion .sm-chest{animation:smChest 1.8s ease-in-out infinite;transform-origin:64px 63px}
.safe-motion .sm-biceps{animation:smBiceps 1.8s ease-in-out infinite;transform-origin:80px 54px}
.safe-motion .sm-dead-arm{animation:smDeadArm 2.4s ease-in-out infinite;transform-origin:76px 74px}
.safe-motion .sm-dead-leg{animation:smDeadLeg 2.4s ease-in-out infinite;transform-origin:54px 84px}
.safe-motion .sm-bird-arm{animation:smBirdArm 2.4s ease-in-out infinite;transform-origin:76px 62px}
.safe-motion .sm-bird-leg{animation:smBirdLeg 2.4s ease-in-out infinite;transform-origin:94px 68px}
.safe-motion .sm-plank{animation:smPlank 2.4s ease-in-out infinite;transform-origin:88px 76px}
.safe-motion .sm-side{animation:smSide 2.4s ease-in-out infinite;transform-origin:88px 82px}
.safe-motion .sm-belt{stroke-dasharray:11 7;animation:smBelt 1.05s linear infinite}
.safe-motion .sm-run{animation:smRun 1.2s ease-in-out infinite;transform-origin:97px 58px}

@keyframes smRotate{to{stroke-dashoffset:-40}}
@keyframes smReach{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
@keyframes smSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
@keyframes smLegExtension{0%,100%{transform:rotate(0)}50%{transform:rotate(-42deg)}}
@keyframes smLegCurl{0%,100%{transform:rotate(0)}50%{transform:rotate(-52deg)}}
@keyframes smLegPress{0%,100%{transform:scaleX(.82)}50%{transform:scaleX(1)}}
@keyframes smThrust{0%,100%{transform:translateY(6px) rotate(4deg)}50%{transform:translateY(-5px) rotate(-4deg)}}
@keyframes smStep{0%,100%{transform:translateY(5px)}50%{transform:translateY(-11px) translateX(8px)}}
@keyframes smLat{0%,100%{transform:translateY(-7px) scaleY(1.08)}50%{transform:translateY(7px) scaleY(.9)}}
@keyframes smChest{0%,100%{transform:scaleX(.72)}50%{transform:scaleX(1.08)}}
@keyframes smBiceps{0%,100%{transform:rotate(0)}50%{transform:rotate(-28deg)}}
@keyframes smDeadArm{0%,100%{transform:rotate(0)}50%{transform:rotate(-18deg)}}
@keyframes smDeadLeg{0%,100%{transform:rotate(0)}50%{transform:rotate(18deg)}}
@keyframes smBirdArm{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@keyframes smBirdLeg{0%,100%{transform:rotate(0)}50%{transform:rotate(10deg)}}
@keyframes smPlank{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes smSide{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg) translateY(-3px)}}
@keyframes smBelt{to{stroke-dashoffset:-18}}
@keyframes smRun{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}}

@media(max-width:430px){
  .exercise-name-row{gap:6px}
  .device-number{font-size:9.5px;padding:4px 7px}
  .safe-motion svg{height:88px}
}
@media(prefers-reduced-motion:reduce){
  .safe-motion *{animation:none!important}
}


/* MOTION v3.0.2 · Safari-safe on-demand guide */
.motion-guide-toggle{margin:12px 0 14px;border:1px solid rgba(184,247,212,.13);border-radius:18px;background:rgba(255,255,255,.025);overflow:hidden}
.motion-guide-toggle>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:54px;padding:11px 13px;cursor:pointer;user-select:none}
.motion-guide-toggle>summary::-webkit-details-marker{display:none}
.motion-guide-icon{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:rgba(184,247,212,.11);border:1px solid rgba(184,247,212,.15);color:var(--accent);flex:0 0 auto}
.motion-guide-copy{display:grid;gap:1px;min-width:0;flex:1}
.motion-guide-copy strong{font-size:13px}
.motion-guide-copy small{font-size:10px;color:var(--muted)}
.motion-guide-chevron{font-size:23px;color:var(--muted2);transition:transform .18s ease}
.motion-guide-toggle[open] .motion-guide-chevron{transform:rotate(90deg)}
.motion-guide-open{display:none}
.motion-guide-toggle[open] .motion-guide-open{display:inline}
.motion-guide-toggle[open] .motion-guide-closed{display:none}
.motion-guide-content{padding:0 12px 12px;border-top:1px solid var(--stroke)}
.motion-guide-content .safe-motion{margin:12px 0 10px;border-radius:16px}
.motion-guide-content .safe-motion svg{height:138px}
.motion-guide-flow{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:7px;margin:2px 0 8px;padding:8px 10px;border-radius:12px;background:rgba(184,247,212,.055);border:1px solid rgba(184,247,212,.09)}
.motion-guide-flow span{font-size:8.5px;font-weight:900;letter-spacing:.09em;color:var(--muted)}
.motion-guide-flow b{text-align:center;color:var(--accent);font-size:13px}
.motion-guide-cue{padding:10px 11px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.065);font-size:11px;line-height:1.45;color:#d8dee3}
@media(max-width:430px){
  .motion-guide-content{padding:0 10px 10px}
  .motion-guide-content .safe-motion svg{height:126px}
  .motion-guide-flow{gap:5px;padding:8px}
  .motion-guide-flow span{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .motion-guide-toggle *{animation:none!important;transition:none!important}
}