/* Original training workspace; layout informed by public app patterns, no vendor assets. */
:root { --bg:#f4f5f7; --accent:#087ef5; --line:#e4e7ee; --shadow-card:0 3px 14px #17213c05; --radius-m:18px; }
:root[data-theme="dark"] { --bg:#101216; --bg-2:#1b1e25; --bg-3:#282d37; --line:#303642; --accent:#58a6ff; }
body { padding-bottom:120px; }
.topbar { background:var(--bg); border:none; }
.topbar-inner { max-width:1120px; padding:25px 28px 12px; }
.brand { display:flex; gap:12px; align-items:center; color:var(--text); }
.brand-mark { background:var(--accent); color:white; width:42px; height:44px; border-radius:13px 13px 13px 4px; display:grid; place-items:center; font-weight:900; font-size:25px; }
.logo { font-size:25px; letter-spacing:1px; }
.brand-sub { font-size:9px; letter-spacing:1.8px; color:var(--muted); }
.today { background:none; border:0; padding:0; }
.utility-nav { max-width:1120px; margin:auto; display:flex; gap:12px; align-items:center; justify-content:flex-end; padding:0 28px 10px; color:var(--muted); font-size:11px; }
.utility-nav .btn { min-height:28px; padding:5px 10px; }
.workspace-banner { max-width:1120px; margin:0 auto 14px; padding:6px 28px 16px; display:flex; align-items:center; gap:22px; border-bottom:1px solid var(--line); font-size:12px; }
.workspace-banner>span { flex:1; color:var(--muted); letter-spacing:1px; }
.workspace-banner a { color:var(--muted); white-space:nowrap; }
.workspace-banner a:hover { color:var(--accent); }
.view { max-width:1120px; padding:0 28px 20px; }
.app-dock { position:fixed; z-index:45; bottom:16px; left:50%; transform:translateX(-50%); width:420px; max-width:calc(100% - 24px); margin:0; padding:9px 10px; border-radius:23px; background:var(--bg-2); box-shadow:0 8px 50px #00000016; border:1px solid var(--line); gap:6px; }
.app-dock .tab { display:flex; flex-direction:column; gap:4px; align-items:center; font-size:11px; min-width:0; border-radius:14px; padding:6px; background:none; box-shadow:none; }
.app-dock .tab>span { font-size:22px; line-height:24px; }
.app-dock .tab.active { color:var(--accent); background:var(--accent-soft); }
.app-dock .dock-train { background:var(--accent); color:#fff; margin:-16px 4px 0; border-radius:18px; min-height:61px; }
.app-dock .dock-train.active { color:white; background:var(--accent); box-shadow:0 5px 18px #087ef544; }
.timer-bar { bottom:105px; left:50%; transform:translateX(-50%); width:740px; max-width:calc(100% - 24px); border:1px solid var(--line); border-radius:22px; box-shadow:0 6px 32px #0002; }
.timer-inner { padding:12px 18px; }
.page-intro { display:flex; justify-content:space-between; gap:20px; align-items:center; margin:20px 0 26px; }
.page-intro h2 { font-size:27px; margin-bottom:8px; font-weight:750; letter-spacing:-.6px; }
.eyebrow { color:var(--accent); letter-spacing:2px; font-size:10px; font-weight:700; display:block; margin-bottom:10px; }
.page-intro p { color:var(--muted); font-size:13px; line-height:1.7; }
.studio-section-title { font-size:17px; margin:22px 0 15px; display:flex; align-items:center; gap:9px; }
.studio-section-title::before { content:''; display:inline-block; background:var(--accent); width:4px; height:18px; border-radius:3px; }
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.plan-card { background:var(--bg-2); border:1px solid var(--line); border-radius:19px; overflow:hidden; display:flex; flex-direction:column; }
.plan-cover { min-height:154px; padding:22px; position:relative; background:#e4eefe; color:#154275; overflow:hidden; }
.plan-cover::after { content:''; position:absolute; border:22px solid #087ef518; height:140px; width:140px; right:-42px; top:-32px; border-radius:50%; }
.plan-card:nth-child(3n+2) .plan-cover { background:#e6eee9; color:#2b513d; }
.plan-card:nth-child(3n+2) .plan-cover::after { border-color:#2b513d14; border-radius:34px; transform:rotate(30deg); }
.plan-card:nth-child(3n) .plan-cover { background:#ede9f5; color:#584373; }
.plan-number { display:block; font-size:10px; letter-spacing:2px; margin-bottom:24px; opacity:.7; }
.plan-cover h3 { font-size:23px; font-weight:750; line-height:1.3; max-width:88%; position:relative; z-index:1; }
.plan-info { padding:18px 20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.plan-meta { display:flex; gap:15px; font-size:12px; color:var(--muted); }
.plan-summary { color:var(--muted); font-size:12px; line-height:1.7; min-height:40px; }
.plan-actions { display:flex; gap:6px; margin-top:auto; }
.plan-actions .btn { flex:1; padding:9px 12px; min-height:37px; font-size:12px; white-space:nowrap; }
.plan-actions .link-button { padding:6px; font-size:12px; color:var(--muted); }
.plan-empty { border:1px dashed var(--line); border-radius:19px; display:grid; place-items:center; min-height:275px; padding:28px; text-align:center; color:var(--muted); gap:8px; }
.plan-empty b { font-size:17px; color:var(--text); }
.info-note { padding:15px 18px; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; font-size:12px; color:var(--muted); line-height:1.8; margin:18px 0; }
.info-note strong { color:var(--text); }
.exercise-browser { display:grid; grid-template-columns:110px 1fr; gap:20px; }
.muscle-rail { display:flex; flex-direction:column; gap:4px; }
.muscle-rail button { padding:13px 14px; font-size:14px; text-align:left; border-radius:10px; color:var(--muted); }
.muscle-rail button.active { color:var(--accent); background:var(--accent-soft); border-left:3px solid var(--accent); font-weight:700; }
.ex-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.ex-card { border:1px solid var(--line); padding:0 0 14px; overflow:hidden; border-radius:17px; box-shadow:none; }
.motion-art { min-height:105px; display:flex; align-items:center; justify-content:center; color:var(--accent); background:var(--bg-4); margin-bottom:12px; }
.motion-art svg { width:66px; height:66px; stroke-width:1.3; }
.ex-card .name,.ex-card .meta { padding:0 14px; }
.ex-card .name { font-size:14px; min-height:20px; }
.ex-card .meta { font-size:11px; margin-top:5px; line-height:1.6; }
.ex-card .ex-del { position:static; padding:9px 14px 0; font-size:11px; display:block; }
.plan-item-editor { display:grid; grid-template-columns:minmax(110px,2fr) repeat(4,minmax(48px,1fr)) 30px; gap:6px; align-items:center; margin:8px 0; }
.plan-item-editor input,.plan-item-editor select { padding:10px 6px; font-size:13px; min-width:0; }
.editor-labels { color:var(--muted); font-size:10px; }
.planned-strip { display:flex; gap:8px; overflow:auto; padding:5px 0 16px; }
.planned-strip button { flex-shrink:0; border:1px solid var(--line); background:var(--bg-2); border-radius:13px; padding:12px 15px; text-align:left; font-size:13px; }
.planned-strip button.active { border-color:var(--accent); background:var(--accent-soft); }
.planned-strip small { display:block; color:var(--muted); padding-top:4px; }
.record-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.session-title { font-size:19px; font-weight:700; margin-bottom:12px; }
.watch-layout { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.watch-diagram { border-radius:50%; background:#0d111b; color:white; width:255px; height:255px; margin:20px auto; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; box-shadow:0 0 0 12px #212833,0 0 0 14px #606a78; }
.watch-diagram b { font-size:36px; }
.watch-diagram span { font-size:12px; color:#bbc5d7; }
.watch-diagram em { border-radius:16px; padding:12px 34px; background:#087ef5; font-style:normal; font-size:15px; }
.device-row { display:flex; align-items:center; justify-content:space-between; padding:15px 0; border-bottom:1px solid var(--line); gap:10px; font-size:13px; }
.token-reveal { word-break:break-all; background:var(--bg-3); padding:16px; border-radius:12px; margin:14px 0; font-size:12px; }
.body-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.body-value { font-size:29px; font-weight:750; margin:12px 0; }
.timeline-row { display:flex; gap:20px; align-items:center; justify-content:space-between; font-size:13px; border-bottom:1px solid var(--line); padding:14px 0; }
@media(min-width:1000px) { .app-dock { left:calc(50% - 560px + 20px); bottom:auto; top:190px; transform:none; width:150px; max-width:none; border:0; background:transparent; box-shadow:none; display:flex; flex-direction:column; gap:8px; padding:0; }.app-dock .tab { flex-direction:row; text-align:left; justify-content:flex-start; padding:14px 18px; font-size:14px; gap:13px; }.app-dock .dock-train { margin:16px 0; min-height:50px; }.view { padding-left:210px; }.timer-bar { left:calc(50% + 80px); bottom:25px; max-width:800px; width:calc(100% - 290px); }.workspace-banner { padding-left:210px; } }
@media(max-width:760px) { .topbar-inner { padding:17px 18px 8px; }.view { padding:0 18px 20px; }.today { max-width:130px; font-size:10px; }.utility-nav { padding-right:18px; }.workspace-banner { padding:0 18px 14px; gap:15px; overflow:auto; }.workspace-banner>span { display:none; }.page-intro { margin:16px 0 20px; }.page-intro h2 { font-size:24px; }.page-intro .btn { padding:10px 15px; font-size:12px; }.plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.plan-cover { padding:18px; min-height:137px; }.plan-cover h3 { font-size:20px; }.plan-info { padding:14px; }.plan-meta { gap:7px; font-size:10px; }.plan-summary { font-size:11px; }.plan-actions .btn { font-size:11px; padding:8px 6px; }.brand-sub { font-size:8px; letter-spacing:1px; white-space:nowrap; }.page-intro>.btn { flex-shrink:0; white-space:nowrap; }.exercise-browser { grid-template-columns:65px 1fr; gap:10px; }.muscle-rail button { padding:12px 8px; font-size:12px; }.ex-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.motion-art { min-height:96px; }.ex-card .name { padding:0 10px; font-size:12px; }.ex-card .meta { padding:0 10px; }.watch-layout,.record-columns { grid-template-columns:1fr; }.body-grid { gap:9px; }.body-value { font-size:24px; }.plan-item-editor { grid-template-columns:minmax(88px,2fr) repeat(4,minmax(36px,1fr)) 22px; gap:4px; }.plan-item-editor input,.plan-item-editor select { font-size:11px; }.timer-actions { flex-wrap:wrap; max-width:145px; }.timer-actions .btn.sm { padding:8px; }.timer-ring { display:none; }.timer-info .t-time { font-size:26px; }.plan-empty { min-height:250px; } }
.record-exercise { background:var(--bg-2); border:1px solid var(--line); border-radius:17px; padding:18px; margin:15px 0; }
.record-ex-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; }.record-ex-head h3 { font-size:16px; margin-bottom:4px; }
.row-table-head,.training-row { display:grid; grid-template-columns:30px minmax(58px,1fr) minmax(58px,1fr) 43px 28px; gap:10px; align-items:center; }
.row-table-head { font-size:11px; color:var(--muted); padding:8px 0; text-align:center; }
.training-row { padding:8px 0; border-bottom:1px solid var(--line); }.training-row:last-child { border-bottom:0; }.training-row input { min-width:0; padding:10px; text-align:center; font-weight:650; background:var(--bg-3); border:1px solid transparent; }.training-row input:focus { border-color:var(--accent); }.training-row.completed { background:var(--accent-soft); border-radius:10px; }.row-index { color:var(--muted); font-size:13px; text-align:center; }.row-check { color:var(--muted); font-size:23px; border:1px solid var(--line); border-radius:12px; height:42px; }.completed .row-check { color:white; background:var(--accent); }.row-more { font-size:24px; color:var(--muted); }.quick-record { margin-top:20px; }.quick-record>.link-button { color:var(--muted); font-size:12px; padding:8px; }.multi-ex-list { max-height:50vh; overflow:auto; margin:15px 0; }.multi-ex-option { display:flex; align-items:center; gap:13px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }.multi-ex-option input { width:20px; height:20px; accent-color:var(--accent); }.multi-ex-option small { display:block; color:var(--muted); margin-top:4px; font-size:11px; }
@media(max-width:450px) { .record-exercise { padding:13px; }.row-table-head,.training-row { gap:7px; grid-template-columns:24px minmax(50px,1fr) minmax(50px,1fr) 38px 23px; }.training-row input { padding:10px 5px; font-size:14px; }.record-ex-head h3 { font-size:14px; } }
.load-input { display:flex; align-items:center; gap:4px; min-width:0; }.load-input input { width:100%; }.load-input small { font-size:10px; color:var(--muted); }.row-metrics-summary { padding:3px 0 6px 30px; font-size:11px; }.mode-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.modal details { margin:14px 0; }.modal summary { font-size:13px; color:var(--muted); margin-bottom:10px; cursor:pointer; }.modal input[type="checkbox"] { width:18px; height:18px; accent-color:var(--accent); }
.catalog-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.catalog-filters select { width:100%; margin-top:7px; padding:10px 8px; font-size:12px; }.motion-art { width:100%; }.ex-card>.name { text-align:left; display:block; }.catalog-filters label { min-width:0; }
.group-clock-bar { position:fixed; z-index:70; bottom:104px; left:50%; transform:translateX(-50%); width:740px; max-width:calc(100% - 24px); padding:15px 18px; background:var(--bg-2); border:1px solid var(--accent); border-radius:18px; box-shadow:0 8px 35px #0003; }.group-clock-inner { display:flex; justify-content:space-between; gap:12px; align-items:center; }.clock-digits { font-size:34px; display:block; font-variant-numeric:tabular-nums; }.group-clock-inner small { display:block; font-size:11px; }.group-clock-inner>.row { max-width:330px; }.group-clock-bar[hidden] { display:none; } @media(max-width:500px){.group-clock-inner>.row{max-width:180px;}.group-clock-inner .btn{font-size:11px;padding:8px;}.clock-digits{font-size:29px;}}
.routine-toolbar { margin:0 0 16px; }.routine-toolbar select { min-width:110px; padding:8px; font-size:12px; }.routine-actions { gap:12px; border-top:1px solid var(--line); padding-top:9px; }.routine-actions button { font-size:11px; color:var(--muted); }.routine-target-item { padding:12px 0; border-bottom:1px solid var(--line); }.routine-target-item textarea { margin-top:8px; font-variant-numeric:tabular-nums; }.target-labels { margin-top:8px; font-size:11px; }.plan-card[hidden] { display:none; }
[hidden] { display:none!important; }.conflict-payload { white-space:pre-wrap; word-break:break-word; padding:12px; background:var(--bg-3); border-radius:10px; font-size:12px; margin:14px 0; }
.superset-wrap { margin:26px 0 12px; }.plan-ex-btn { border:1px solid var(--line); background:var(--bg-3); border-radius:10px; padding:9px 12px; font-size:14px; font-weight:650; max-width:100%; text-align:left; }.ex-guidance { border-top:1px solid var(--line); margin-top:14px; }.superset-block { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-m); padding:14px; margin-bottom:14px; }.superset-round { border-top:1px solid var(--line); padding:10px 0 4px; margin-top:8px; }.superset-round.completed { background:var(--accent-soft); border-radius:12px; padding:10px; }.superset-member { display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-size:13px; }.superset-set { font-weight:650; }.superset-round .round-check { width:42px; height:42px; font-size:22px; border-radius:12px; border:1px solid var(--line); color:var(--muted); background:none; }.superset-round.completed .round-check { background:var(--accent); color:#fff; border-color:var(--accent); }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }