:root {
  --background:#0f0d18; --elevated:#161328; --foreground:#e8e8f4; --text-muted:#a0a3b8; --text-subtle:#6e7088;
  --card:#1a1829; --card-fg:#ececf6; --card-muted:#9a9db2; --card-border:#2a2840; --popover:#1e1c30;
  --primary:#6b5dc2; --primary-hover:#7d6fd4; --primary-active:#5a4db0; --primary-soft:rgba(107,93,194,.18);
  --accent:#24f0ea; --accent-fg:#071313; --accent-soft:rgba(36,240,234,.10); --accent-glow:rgba(36,240,234,.18);
  --border:#2e2c44; --border-subtle:#222036; --input:#201e32; --danger:#e85d6a; --warning:#e6b84a; --info:#6b8cff; --good:#6fcf97;
  --shadow:0 14px 38px rgba(0,0,0,.24); --radius-sm:6px; --radius:8px; --radius-lg:12px; --radius-xl:16px;
  --font:Inter,"Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"SFMono-Regular","Cascadia Code","Consolas",monospace;
}
html[data-theme="light"] {
  --background:#f7f8fc; --elevated:#fff; --foreground:#1e1d2e; --text-muted:#575a6d; --text-subtle:#8a8fa6;
  --card:#fff; --card-fg:#222132; --card-muted:#65687b; --card-border:#e0e2ec; --popover:#fff;
  --primary:#5d4ea8; --primary-hover:#6b5bb8; --primary-active:#504393; --primary-soft:rgba(93,78,168,.10);
  --accent:#14c9c4; --accent-fg:#071313; --accent-soft:rgba(20,201,196,.09); --accent-glow:rgba(20,201,196,.14);
  --border:#dfe1ea; --border-subtle:#eceef4; --input:#f2f3f8; --shadow:0 12px 30px rgba(38,37,60,.08);
}
*{box-sizing:border-box} html{background:var(--background);color:var(--foreground)} body{margin:0;min-height:100vh;background:var(--background);font-family:var(--font);color:var(--foreground);font-size:14px;line-height:1.5}
button,input,select{font:inherit} button{color:inherit}.page-shell{width:min(1500px,calc(100% - 40px));margin:0 auto;padding:88px 0 36px}.hero{display:flex;gap:36px;justify-content:space-between;align-items:flex-end;padding:30px 2px 24px}.hero-copy{max-width:820px}.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.13em;color:var(--text-muted);text-transform:uppercase;display:flex;align-items:center;gap:8px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}h1{font-size:clamp(30px,4vw,52px);line-height:1.08;letter-spacing:-.04em;margin:18px 0 12px;font-weight:680}h2,h3,p{margin-top:0}.hero p{max-width:720px;color:var(--text-muted);font-size:15px;margin-bottom:0}.hero-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-lg);box-shadow:0 1px 0 rgba(255,255,255,.02)}.compact-card{padding:12px 14px}.btn,.icon-btn,.text-btn,.tab{border:1px solid var(--border);background:var(--input);border-radius:var(--radius);min-height:38px;padding:8px 14px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s,color .15s}.btn:hover,.icon-btn:hover{border-color:var(--primary);background:var(--primary-soft)}.btn:active,.icon-btn:active{transform:translateY(1px)}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:650}.btn-primary:hover{background:var(--primary-hover)}.btn-ghost{background:transparent}.icon-btn{padding:7px 11px;min-width:38px}.text-btn{background:transparent;border:0;min-height:auto;padding:4px 6px;color:var(--text-muted)}.text-btn:hover{color:var(--accent)}.danger-text:hover{color:var(--danger)}.dataset-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:10px}.dataset-main,.dataset-actions{display:flex;align-items:center;gap:10px;min-width:0}.dataset-name{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge{display:inline-flex;align-items:center;min-height:23px;padding:2px 8px;border-radius:999px;background:var(--primary-soft);color:var(--primary-hover);font-size:11px;font-weight:650;white-space:nowrap}.badge.subtle{background:var(--input);color:var(--text-muted)}.badge.accent{background:var(--accent-soft);color:var(--accent)}.badge.good{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}.filter-bar{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr)) auto;gap:10px;align-items:end;margin-bottom:10px}.filter-bar label,.field-label{display:flex;flex-direction:column;gap:5px;color:var(--text-subtle);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.filter-bar select,.filter-bar input,.control,.goal-input{width:100%;height:36px;border-radius:var(--radius);border:1px solid var(--border);background:var(--input);color:var(--foreground);padding:0 10px;outline:none}.filter-bar select:focus,.filter-bar input:focus,.control:focus,.goal-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.tabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:16px;padding:5px}.tab{white-space:nowrap;background:transparent;border-color:transparent;min-height:36px;color:var(--text-muted);padding:7px 13px}.tab:hover{color:var(--foreground);background:var(--input)}.tab.active{color:#fff;background:var(--primary);border-color:var(--primary)}.tab-panel{display:none}.tab-panel.active{display:block}.metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.metric-card{padding:16px;min-height:118px;display:flex;flex-direction:column;justify-content:space-between}.metric-label{color:var(--text-muted);font-size:12px}.metric-value{font:670 clamp(23px,2.2vw,34px)/1 var(--mono);letter-spacing:-.04em;color:var(--card-fg);margin:10px 0 7px}.metric-note{color:var(--text-subtle);font-size:11px}.metric-accent .metric-value{color:var(--accent)}.metric-primary .metric-value{color:var(--primary-hover)}.grid-2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.7fr);gap:10px;margin-top:10px}.grid-equal{grid-template-columns:repeat(2,minmax(0,1fr))}.panel-card{padding:18px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.panel-head h2,.panel-head h3{margin:0;font-size:15px;letter-spacing:-.01em}.panel-sub{color:var(--text-muted);font-size:12px;margin-top:4px}.panel-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.segmented{display:inline-flex;background:var(--input);border:1px solid var(--border);padding:3px;border-radius:9px}.segmented button{border:0;background:transparent;color:var(--text-muted);border-radius:6px;padding:5px 9px;font-size:11px;cursor:pointer}.segmented button.active{background:var(--primary);color:#fff}.chart-box{position:relative;min-height:290px;width:100%;overflow:hidden}.chart-box.small{min-height:220px}.chart-svg{display:block;width:100%;height:auto;min-height:220px;overflow:visible}.chart-grid{stroke:var(--border-subtle);stroke-width:1}.chart-axis{fill:var(--text-subtle);font:10px var(--mono)}.chart-line{fill:none;stroke:var(--primary-hover);stroke-width:2.2;vector-effect:non-scaling-stroke}.chart-line-accent{stroke:var(--accent)}.chart-area{fill:var(--primary-soft)}.chart-dot{fill:var(--card);stroke:var(--primary-hover);stroke-width:2}.chart-dot:hover{fill:var(--accent);stroke:var(--accent)}.chart-ref{fill:none;stroke:var(--text-subtle);stroke-width:1.2;stroke-dasharray:5 5}.chart-tooltip{position:absolute;pointer-events:none;background:var(--popover);border:1px solid var(--border);box-shadow:var(--shadow);padding:7px 9px;border-radius:7px;font-size:11px;color:var(--foreground);z-index:20;transform:translate(-50%,-115%);white-space:nowrap}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;border:1px dashed var(--border);border-radius:var(--radius-lg);color:var(--text-muted);text-align:center;padding:24px}.empty strong{color:var(--foreground);font-size:15px;margin-bottom:5px}.table-wrap{overflow:auto;border:1px solid var(--border-subtle);border-radius:var(--radius)}table{width:100%;border-collapse:collapse;min-width:680px}th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border-subtle);font-size:12px}th{position:sticky;top:0;background:var(--elevated);z-index:1;color:var(--text-subtle);font-size:10px;text-transform:uppercase;letter-spacing:.05em}tbody tr{cursor:pointer}tbody tr:hover{background:var(--primary-soft)}tbody tr:last-child td{border-bottom:0}.mono{font-family:var(--mono)}.time-cell{font:650 13px var(--mono)}.muted{color:var(--text-muted)}.subtle{color:var(--text-subtle)}.good{color:var(--good)}.bad{color:var(--danger)}.warn{color:var(--warning)}.accent{color:var(--accent)}.primary{color:var(--primary-hover)}.progress{height:7px;background:var(--input);border-radius:999px;overflow:hidden}.progress>i{display:block;height:100%;background:var(--primary);border-radius:inherit}.progress.accent>i{background:var(--accent)}.split-stack{--segA:#6a58c4;--segB:#13a3a0;display:flex;height:38px;border-radius:8px;overflow:hidden;background:var(--input);border:1px solid var(--border);margin:12px 0 18px}.split-seg{position:relative;display:flex;align-items:center;justify-content:center;min-width:38px;border-right:1px solid rgba(255,255,255,.16);font:650 10px var(--mono);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
/* 步骤条带配色（2026-09-24）：紫/青奇偶交替——相邻步骤恒为不同色相、色差大；
   观察阶段仅用半透明黑罩（.split-rec）叠出深浅差，与正式操作保持同一色相、色差可控。
   奇偶规则天然覆盖任意段数（CFOP 详情最多 7 段），不再依赖 nth-child(1..4)。 */
.split-seg:nth-child(odd){background:var(--segA)}
.split-seg:nth-child(even){background:var(--segB)}
.split-seg:last-child{border-right:0}.split-rec{position:absolute;left:0;top:0;bottom:0;background:rgba(0,0,0,.24);pointer-events:none}.split-label{position:relative;z-index:2}.insight-list{display:grid;gap:8px}.insight-row{display:grid;grid-template-columns:110px 1fr 90px 72px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border-subtle)}.insight-row:last-child{border-bottom:0}.weak-card{border-color:color-mix(in srgb,var(--warning) 42%,var(--card-border));background:linear-gradient(180deg,color-mix(in srgb,var(--warning) 5%,var(--card)),var(--card))}.weak-title{display:flex;gap:8px;align-items:center;color:var(--warning);font-weight:650}.callout{padding:12px 14px;border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:var(--radius);background:var(--input);color:var(--text-muted);font-size:12px}.callout.accent-callout{border-left-color:var(--accent)}.case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}.case-card{padding:13px;cursor:default}.case-card:hover{border-color:var(--primary)}.case-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.case-name{font-weight:650}.case-time{font:650 22px var(--mono);margin:12px 0 7px}.case-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;color:var(--text-muted);font-size:11px}.solve-list{display:grid;gap:8px}.solve-row-card{padding:12px 14px;display:grid;grid-template-columns:90px minmax(120px,1fr) repeat(4,minmax(70px,.5fr)) auto;gap:12px;align-items:center;cursor:pointer}.solve-row-card:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary-soft) 45%,var(--card))}.solve-time{font:680 20px var(--mono)}.solve-date{color:var(--text-muted);font-size:11px}.mini-label{display:block;color:var(--text-subtle);font-size:9px;text-transform:uppercase;letter-spacing:.04em}.modal-backdrop{position:fixed;inset:0;background:rgba(5,4,12,.72);backdrop-filter:blur(5px);z-index:9999;display:grid;place-items:center;padding:20px}.modal-backdrop[hidden]{display:none}.modal{width:min(920px,100%);max-height:min(86vh,880px);overflow:auto;padding:20px;box-shadow:var(--shadow)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal-head h2{margin:0;font-size:18px}.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.detail-item{background:var(--input);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:10px}.detail-item strong{display:block;font:650 17px var(--mono);margin-top:4px}.page-footer{display:flex;justify-content:space-between;gap:20px;color:var(--text-subtle);font-size:11px;padding:24px 4px 0}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);padding:10px 14px;border-radius:8px;background:var(--popover);border:1px solid var(--border);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;z-index:10000}.toast.show{opacity:1;transform:translate(-50%,0)}.inline-form{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.inline-form label{min-width:150px}.kpi-bar{display:flex;gap:20px;flex-wrap:wrap}.kpi-inline{display:flex;gap:6px;align-items:baseline}.kpi-inline strong{font:650 16px var(--mono)}.legend{display:flex;gap:12px;flex-wrap:wrap;color:var(--text-muted);font-size:10px}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:8px;height:8px;border-radius:50%;background:var(--primary)}.legend i.accent-dot{background:var(--accent)}.legend i.muted-dot{background:var(--text-subtle)}
@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(3,1fr)}.grid-2,.filter-bar{grid-template-columns:repeat(3,1fr)}.filter-reset{align-self:end}.solve-row-card{grid-template-columns:90px 1fr repeat(2,70px) 32px}.solve-row-card .optional-col{display:none}}
@media(max-width:720px){.page-shell{width:min(100% - 22px,1500px);padding-top:72px}.hero{align-items:flex-start;flex-direction:column;padding-top:18px}.hero-actions{width:100%;justify-content:flex-start}.dataset-strip{align-items:flex-start;flex-direction:column}.dataset-actions{align-self:flex-end}.filter-bar{grid-template-columns:1fr 1fr}.metric-grid{grid-template-columns:1fr 1fr}.grid-equal{grid-template-columns:1fr}.panel-card{padding:14px}.panel-head{flex-direction:column}.insight-row{grid-template-columns:85px 1fr 70px}.insight-row>:nth-child(4){display:none}.solve-row-card{grid-template-columns:76px 1fr 32px}.solve-row-card .data-col{display:none}.detail-grid{grid-template-columns:1fr 1fr}.page-footer{flex-direction:column}.tabs{margin-left:-2px;margin-right:-2px}}
@media(max-width:430px){.metric-grid{grid-template-columns:1fr 1fr}.metric-card{min-height:104px;padding:13px}.metric-value{font-size:23px}.filter-bar{grid-template-columns:1fr}.hero h1{font-size:32px}.split-seg{font-size:9px}.case-grid{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr 1fr}}

/* Trainer workspace */
.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;position:sticky;top:58px;z-index:40;backdrop-filter:blur(16px);background:color-mix(in srgb,var(--card) 91%,transparent)}
.mode-switch{display:flex;gap:3px;padding:3px;border:1px solid var(--border);background:var(--input);border-radius:10px}.mode-switch-btn{min-width:92px;height:34px;padding:0 18px;border:0;border-radius:7px;background:transparent;color:var(--text-muted);font-weight:650;cursor:pointer}.mode-switch-btn.active{background:var(--primary);color:#fff}.workspace-meta,.analysis-data-meta,.analysis-actions{display:flex;align-items:center;gap:10px;min-width:0}.cloud-state{font-size:11px;color:var(--text-muted)}.workspace-panel{display:none}.workspace-panel.active{display:block}
.trainer-toolbar{display:flex;align-items:end;gap:12px;margin-bottom:10px;flex-wrap:wrap}.tool-group{display:flex;align-items:center;gap:10px}.device-tool{margin-right:auto}.tool-status{font-size:11px;color:var(--text-muted);white-space:nowrap}.device-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;background:rgba(255,255,255,.55)}#connectCubeBtn.connected .device-dot{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.toolbar-field{display:flex;flex-direction:column;gap:5px;color:var(--text-subtle);font-size:10px;font-weight:650;text-transform:uppercase;letter-spacing:.04em}.toolbar-field select,.toolbar-field input{height:36px;border:1px solid var(--border);border-radius:var(--radius);background:var(--input);color:var(--foreground);padding:0 10px;outline:none}.toolbar-field select:focus,.toolbar-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.session-field input{width:170px}.toolbar-check{height:36px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--input);color:var(--text-muted);font-size:12px}.toolbar-check input{accent-color:var(--primary)}
.trainer-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,.65fr);gap:10px}.timer-card{min-height:510px;padding:24px;display:flex;flex-direction:column}.scramble-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-kicker{font:650 10px var(--mono);letter-spacing:.12em;color:var(--text-subtle)}.scramble-text{font:620 clamp(17px,2vw,25px)/1.55 var(--mono);letter-spacing:.02em;text-align:center;padding:16px 8px 4px;color:var(--foreground);min-height:94px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px 0}.scramble-meta{text-align:center;min-height:20px;font-size:11px;color:var(--text-subtle);margin-top:2px}.timer-stage{flex:1;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-block:1px solid var(--border-subtle);margin:12px 0 18px}.timer-status{font-size:12px;color:var(--text-muted);font-weight:620}.timer-value{font:700 clamp(74px,10vw,148px)/.95 var(--mono);letter-spacing:-.075em;margin:18px 0 15px;font-variant-numeric:tabular-nums}.timer-stage[data-state="ready"] .timer-value,.timer-stage[data-state="inspection"] .timer-value{color:var(--accent)}.timer-stage[data-state="running"] .timer-value{color:var(--foreground)}.timer-sub{font-size:12px;color:var(--text-subtle)}.timer-actions{display:flex;justify-content:center;gap:9px}.ready-btn{min-width:160px}.keyboard-hint{text-align:center;color:var(--text-subtle);font-size:10px;margin-top:12px}.keyboard-hint kbd{font:10px var(--mono);border:1px solid var(--border);background:var(--input);border-radius:5px;padding:2px 6px;box-shadow:inset 0 -1px 0 var(--border)}
.trainer-side{display:grid;grid-template-rows:1fr auto;gap:10px}.live-card,.session-card,.recent-card{padding:18px}.compact-head{margin-bottom:12px}.live-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.live-metrics>div,.session-metrics>div{border:1px solid var(--border-subtle);background:var(--input);border-radius:var(--radius);padding:10px}.live-metrics span,.session-metrics span{display:block;color:var(--text-subtle);font-size:9px;text-transform:uppercase;letter-spacing:.04em}.live-metrics strong,.session-metrics strong{display:block;font:650 20px var(--mono);margin-top:5px}.move-stream{display:flex;align-content:flex-start;gap:5px;flex-wrap:wrap;min-height:142px;margin-top:10px;padding:12px;border:1px solid var(--border-subtle);border-radius:var(--radius);background:var(--background);overflow:auto}.move-chip{display:inline-flex;align-items:center;justify-content:center;height:28px;min-width:32px;padding:0 7px;border-radius:6px;background:var(--input);border:1px solid var(--border);font:650 12px var(--mono)}.move-chip.latest{border-color:var(--accent);color:var(--accent)}.session-metrics{display:grid;grid-template-columns:1fr 1fr;gap:7px}.session-metrics .muted{grid-column:1/-1;padding:20px 4px}
.recent-card{margin-top:10px}.training-solve-list{display:grid}.training-solve-row{display:grid;grid-template-columns:150px minmax(140px,1fr) minmax(150px,.7fr) auto;gap:14px;align-items:center;padding:11px 4px;border-top:1px solid var(--border-subtle);cursor:pointer}.training-solve-row:first-child{border-top:0}.training-solve-row:hover{background:color-mix(in srgb,var(--primary-soft) 35%,transparent)}.training-solve-row>div>strong,.training-solve-row>div>span{display:block}.training-solve-row>div>span{color:var(--text-muted);font-size:10px;margin-top:2px}.recent-stats{display:flex!important;gap:13px;flex-direction:row!important}.recent-stats span{margin:0!important}.recent-actions{display:flex;gap:5px}.recent-actions button{height:28px;padding:0 8px;border:1px solid var(--border);border-radius:6px;background:var(--input);color:var(--text-muted);font-size:10px;cursor:pointer}.recent-actions button:hover{border-color:var(--primary);color:var(--foreground)}
.analysis-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:10px}.analysis-data-meta strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
@media(max-width:980px){.trainer-grid{grid-template-columns:1fr}.trainer-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}.training-solve-row{grid-template-columns:125px 1fr auto}.recent-stats{display:none!important}.workspace-head{top:52px}}
@media(max-width:720px){.workspace-head{top:50px}.workspace-meta .cloud-state{display:none}.mode-switch-btn{min-width:76px;padding:0 13px}.trainer-toolbar{align-items:stretch}.device-tool{width:100%;margin-right:0;justify-content:space-between}.toolbar-field{flex:1}.session-field{flex:2}.session-field input{width:100%}.toolbar-check{align-self:flex-end}.timer-card{min-height:430px;padding:17px}.timer-stage{min-height:230px}.timer-value{font-size:clamp(64px,21vw,100px)}.trainer-side{grid-template-columns:1fr}.training-solve-row{grid-template-columns:92px minmax(0,1fr);gap:10px}.recent-actions{grid-column:1/-1;justify-content:flex-end}.analysis-top{align-items:flex-start;flex-direction:column}.analysis-actions{align-self:flex-end}}
@media(max-width:430px){.trainer-toolbar{gap:8px}.toolbar-check{width:100%;justify-content:center}.scramble-text{font-size:16px;min-height:100px}.timer-card{padding:14px}.timer-value{font-size:62px}.live-metrics strong{font-size:17px}.workspace-head{margin-inline:-1px}.recent-card{padding:14px}}

/* ===== Analyzer v4 layout ===== */
:root{
  --surfaceSolid:var(--card);--line:var(--border);--ink:var(--foreground);--muted:var(--text-muted);
  --controlBorder:var(--border);--controlBg:var(--input);--controlText:var(--foreground);--controlHoverBg:var(--primary-soft);
  --primaryBg:var(--primary);--primaryText:#fff;--primaryBorder:var(--primary);--primaryHoverBg:var(--primary-hover);--red:var(--danger);--orange:var(--warning);
}
/* ⚠️ 横向别溢出，但**不要**因此把 html/body 变成滚动容器：原来这里是
   `overflow-x:hidden + overflow-y:auto`，两个都成了滚动容器 ⇒ position:sticky 找最近滚动口时
   找到的是「自己内部永远不滚的 body」，控制栏与标签栏于是**根本吸附不住**，一滚动就滑到顶栏底下、
   反压住下面的内容。overflow-x:clip 同样裁掉横向溢出，但不创建滚动容器，sticky 照常工作。 */
html,body{height:auto!important;min-height:100%;overflow-x:clip!important}
body{background:var(--background);}
.page-shell{width:min(1440px,calc(100% - 32px));margin:0 auto;padding:16px 0 42px}
.workspace-main{min-width:0}
.control-bar{position:sticky;top:calc(var(--site-nav-height,44px) + 8px);z-index:45;display:flex;align-items:center;gap:12px;min-height:58px;padding:9px 11px;margin-bottom:12px;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(16px);box-shadow:0 8px 26px rgba(0,0,0,.14)}
.device-cluster{display:flex;align-items:center;gap:9px;flex:none}.device-button{min-width:126px}.tool-status{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.mode-switch{flex:none}.mode-switch-btn{min-width:76px;height:34px;padding:0 14px}
.training-controls{display:flex;align-items:center;gap:8px;min-width:0;flex:1;justify-content:flex-end}.compact-field{gap:2px}.compact-field>span{display:none}.toolbar-field.compact-field{flex-direction:row;align-items:center;gap:7px;text-transform:none;letter-spacing:0;font-size:11px}.toolbar-field.compact-field select,.toolbar-field.compact-field input{height:34px}.session-field input{width:150px}.toolbar-check{height:34px;padding:0 9px}.auto-frame-chip{height:30px;display:inline-flex;align-items:center;padding:0 9px;border-radius:999px;border:1px solid var(--border);background:var(--input);color:var(--text-muted);font-size:10px;white-space:nowrap}.workspace-meta{margin-left:auto;flex:none}
body[data-workspace="analysis"] .training-only{display:none}.workspace-panel{display:none}.workspace-panel.active{display:block}
.trainer-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,.65fr);gap:12px;align-items:start}.timer-card{min-height:0;padding:20px}.trainer-side{display:grid;gap:12px}.live-card,.session-card,.recent-card{padding:16px}.timer-stage{min-height:250px;margin:10px 0 14px}.timer-value{font-size:clamp(70px,9vw,126px)}
.scramble-head>div{display:flex;align-items:center;gap:14px;min-width:0}.scramble-legend{display:inline-flex;align-items:center;gap:6px;color:var(--text-subtle);font-size:10px;flex-wrap:wrap}.scramble-legend i{width:6px;height:6px;border-radius:50%;display:inline-block}.scramble-legend i.pending{background:var(--scramble-pending)}.scramble-legend i.current{background:var(--scramble-current)}.scramble-legend i.done{background:var(--text-subtle)}.scramble-text{min-height:84px;padding:14px 6px 2px}
.live-card{min-height:260px}.move-stream{min-height:112px;max-height:180px}.session-card{min-height:150px}.recent-card{margin-top:12px}
.analysis-control{padding:14px;margin-bottom:10px}.analysis-headline{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--border-subtle)}.analysis-data-meta,.analysis-actions{display:flex;align-items:center;gap:9px}.filter-bar{display:grid;grid-template-columns:repeat(5,minmax(118px,1fr)) auto;gap:9px;align-items:end;margin:0}.tabs{position:sticky;top:calc(var(--site-nav-height,44px) + 78px);z-index:35;margin-bottom:12px;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(14px)}
.chart-box{overflow:visible}.table-wrap{max-width:100%;overflow:auto}.modal{max-height:86vh;overflow:auto}
@media (max-width:1120px){.control-bar{flex-wrap:wrap}.training-controls{order:3;flex-basis:100%;justify-content:flex-start;padding-top:2px}.workspace-meta{margin-left:auto}.trainer-grid{grid-template-columns:1fr}.trainer-side{grid-template-columns:1fr 1fr}.live-card{min-height:0}.filter-bar{grid-template-columns:repeat(3,minmax(130px,1fr)) auto}.tabs{top:calc(var(--site-nav-height,44px) + 118px)}}
@media (max-width:760px){.page-shell{width:min(100% - 18px,1440px);padding-top:9px}.control-bar{top:calc(var(--site-nav-height,44px) + 4px);gap:8px;padding:8px}.device-cluster{flex:1;min-width:0}.device-button{min-width:112px}.tool-status{display:none}.workspace-meta .cloud-state{display:none}.training-controls{display:grid;grid-template-columns:auto minmax(110px,1fr) auto;gap:7px}.auto-frame-chip{grid-column:1/-1;width:max-content}.toolbar-field.compact-field{min-width:0}.session-field input{width:100%}.trainer-side{grid-template-columns:1fr}.timer-card{padding:14px}.timer-stage{min-height:220px}.timer-value{font-size:clamp(62px,18vw,96px)}.scramble-head>div{align-items:flex-start;flex-direction:column;gap:4px}.analysis-headline{align-items:flex-start}.filter-bar{grid-template-columns:1fr 1fr}.filter-reset{grid-column:1/-1}.tabs{top:calc(var(--site-nav-height,44px) + 116px)}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2,.grid-equal{grid-template-columns:1fr}.training-solve-row{grid-template-columns:1fr auto;gap:8px}.training-solve-row>div:nth-child(2),.recent-stats{display:none!important}.solve-row-card{grid-template-columns:82px 1fr 60px 24px}.optional-col{display:none}.detail-grid{grid-template-columns:1fr 1fr}.insight-row{grid-template-columns:90px 1fr 64px}.insight-row>:last-child{display:none}}
@media (max-width:480px){.mode-switch-btn{min-width:64px;padding:0 10px}.training-controls{grid-template-columns:1fr 1fr}.toolbar-check{justify-content:center}.auto-frame-chip{grid-column:1/-1}.analysis-actions{gap:2px}.analysis-data-meta .badge.subtle{display:none}.filter-bar{grid-template-columns:1fr}.filter-reset{grid-column:auto}.timer-value{font-size:17vw}}

/* Training recommendations */
.priority-list,.training-plan{display:grid;gap:8px}.priority-row,.plan-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--border-subtle);border-radius:var(--radius);background:var(--input)}.priority-rank{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--primary-soft);color:var(--primary-hover);font:700 12px var(--mono)}.priority-row>div:nth-child(2) span{display:block;color:var(--text-muted);font-size:10px;margin-top:2px}.priority-row>div:nth-child(n+3){text-align:right}.priority-row .mini-label{display:block}.plan-item{grid-template-columns:auto 1fr;align-items:start}.plan-item p{margin:3px 0 0;color:var(--text-muted);font-size:12px}.plan-item .badge{margin-top:1px}.case-card:first-child{border-color:color-mix(in srgb,var(--accent) 35%,var(--card-border))}
@media(max-width:720px){.priority-row{grid-template-columns:auto 1fr}.priority-row>div:nth-child(n+3){text-align:left}.priority-row>div:nth-child(3),.priority-row>div:nth-child(4){padding-left:40px}.plan-item{grid-template-columns:1fr}.plan-item .badge{width:max-content}}

/* ===== 融入批次（2026-09-29）：案例 SVG 配图 / 数据体检 / AI 报告 ===== */
/* Case 卡配图：图区固定 4:3，容器不因有无图而变高，卡内文字区尺寸与无图版一致 */
.case-card.with-thumb{padding:0;overflow:hidden}
.case-thumb{display:block;width:100%;aspect-ratio:4/3;background:var(--input);border-bottom:1px solid var(--border-subtle);object-fit:contain;padding:8px}
.case-card.with-thumb .case-body{padding:11px 13px 13px}
.case-tier{display:inline-flex;align-items:center;margin-top:10px;height:22px;padding:0 9px;border-radius:999px;font-size:10px;font-weight:650;border:1px solid var(--border);color:var(--text-muted)}
.case-tier.tier-weak{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 45%,var(--border));background:color-mix(in srgb,var(--warning) 10%,transparent)}
.case-tier.tier-watch{color:var(--info);border-color:color-mix(in srgb,var(--info) 40%,var(--border));background:color-mix(in srgb,var(--info) 8%,transparent)}
.case-tier.tier-good{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,var(--border));background:color-mix(in srgb,var(--good) 8%,transparent)}
.good-text{color:var(--good)}.bad-text{color:var(--danger)}
/* 控制栏融入控件防挤压：控件不收缩、文字不竖排，放不下时整行换行（2026-09-29） */
.training-controls{flex-wrap:wrap;row-gap:6px}
.training-controls .toolbar-check,.training-controls .toolbar-field,.training-controls .auto-frame-chip{flex:none}
.training-controls .toolbar-check span{white-space:nowrap}
/* 数据体检：异常徽标 + 体检列表（记录永不删除，只标记与恢复） */
.anomaly-flag{display:inline-flex;align-items:center;height:18px;margin-left:6px;padding:0 6px;border-radius:999px;font-size:10px;font-weight:650;color:var(--warning);border:1px solid color-mix(in srgb,var(--warning) 45%,transparent);background:color-mix(in srgb,var(--warning) 10%,transparent);vertical-align:middle}
.quality-list{display:grid;gap:8px}
.quality-row{padding:12px 14px;display:grid;grid-template-columns:90px minmax(120px,1fr) minmax(150px,auto) auto;gap:12px;align-items:center}
@media(max-width:760px){.quality-row{grid-template-columns:90px minmax(0,1fr)}.quality-row>div:nth-child(n+3){grid-column:1/-1}}
/* AI 报告 */
.ai-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ai-provider-chip{height:30px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:var(--input);color:var(--text-muted);font-size:11px;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-output{padding:16px;min-height:180px}
.ai-loading{color:var(--text-muted);font-size:13px;padding:6px 0}
.ai-report h2{font-size:16px;margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border-subtle)}
.ai-report h2:first-child{margin-top:0}
.ai-report ul,.ai-report ol{margin:6px 0 10px;padding-left:22px}
.ai-report li{margin:4px 0}
.ai-report p{margin:8px 0}
.ai-report code{font:12px var(--mono);background:var(--input);border:1px solid var(--border-subtle);border-radius:5px;padding:1px 5px}
.ai-ask-row{display:flex;justify-content:flex-end;margin-top:12px}
.ai-inline{margin-top:12px;border-top:1px dashed var(--border);padding-top:10px}
.ai-inline .ai-report h2{font-size:14px;margin:10px 0 6px}
.ai-inline-error{color:var(--danger);font-size:12px}
/* AI 设置弹窗 */
.ai-settings-body{display:grid;gap:10px;min-width:min(520px,86vw);padding:4px 2px 10px}
.field-col{display:flex;flex-direction:column;gap:5px}
.field-col>span{font-size:11px;color:var(--text-subtle)}
.field-col input,.field-col select{height:34px;border:1px solid var(--border);border-radius:var(--radius);background:var(--input);color:var(--foreground);padding:0 10px;outline:none}
.field-col input:focus,.field-col select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.field-label{font-size:11px;color:var(--text-subtle)}
.ai-hint{font-style:normal;color:var(--good);font-size:10px;margin-left:6px}
.ai-hint-line{margin:2px 0 0;color:var(--text-subtle);font-size:11px;line-height:1.6}
.ai-settings-actions{display:flex;gap:9px;justify-content:flex-end}
.ai-test-result{min-height:18px;font-size:12px;color:var(--text-muted);white-space:pre-wrap}
.scramble-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.scramble-actions .text-btn[disabled]{opacity:.45;pointer-events:none}

/* ===== 录像回放（2026-10-12）=====
   参照 CubeStation / csTimer Replay 的口径：3D 魔方 + 时间轴 + 分段条 + 动作列表。
   配色沿用 Analyzer 既有令牌；阶段色与 .split-seg 的紫/青交替规则保持一致。 */
#replayModal .modal{width:min(1080px,100%);max-height:min(92vh,940px)}
.replay-modal{padding:18px 20px 16px;overflow:visible!important;display:flex;flex-direction:column;gap:12px}
.replay-headline{display:flex;flex-direction:column;gap:3px;min-width:0}
.replay-headline h2{margin:0;font-size:18px}
.replay-sub{color:var(--text-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.replay-headline-actions{display:flex;gap:8px;align-items:center}
.replay-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(268px,.72fr);gap:14px;align-items:stretch;min-height:0}
.replay-stage-wrap{position:relative;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--background);overflow:hidden;min-height:300px}
.replay-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}
.replay-stage.dragging{cursor:grabbing}
.replay-stage-hint{position:absolute;left:10px;bottom:8px;font-size:10px;color:var(--text-subtle);pointer-events:none}
.replay-side{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;min-height:0}
.replay-metrics{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.replay-metrics>div{border:1px solid var(--border-subtle);background:var(--input);border-radius:var(--radius);padding:9px 10px;min-width:0}
.replay-metrics strong{display:block;font:650 17px var(--mono);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.replay-move-box{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--background);display:flex;flex-direction:column;min-height:150px;overflow:hidden}
.replay-move-head{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;border-bottom:1px solid var(--border-subtle);font-size:11px;font-weight:650;color:var(--text-muted)}
.replay-move-scroll{flex:1;overflow:auto;padding:4px;scrollbar-width:thin}
.replay-move{display:grid;grid-template-columns:26px minmax(38px,auto) 52px 46px minmax(0,1fr);gap:7px;align-items:center;width:100%;padding:5px 7px;border:0;border-radius:6px;background:transparent;color:var(--text-muted);cursor:pointer;text-align:left;font-size:11px}
.replay-move:hover{background:var(--primary-soft);color:var(--foreground)}
.replay-move .replay-move-face{font:650 13px var(--mono);color:var(--foreground)}
.replay-move .replay-move-no{font:600 10px var(--mono);color:var(--text-subtle)}
.replay-move .replay-move-time{color:var(--text-subtle)}
.replay-move .replay-move-gap{color:var(--text-subtle);text-align:right}
.replay-move .replay-move-gap.slow{color:var(--warning)}
.replay-move .replay-move-raw{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:10px var(--mono);color:var(--text-subtle)}
.replay-move.done{opacity:.52}
.replay-move.current{background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent);opacity:1}
.replay-move.current .replay-move-face{color:var(--accent)}
.replay-move.is-rotation .replay-move-face{color:var(--info)}
.replay-move.is-slice .replay-move-face{color:var(--warning)}
.replay-timeline{display:grid;gap:6px}
.replay-track{position:relative;height:26px;border-radius:999px;background:var(--input);border:1px solid var(--border-subtle);overflow:hidden}
.replay-progress{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--primary-soft),color-mix(in srgb,var(--accent) 26%,transparent));pointer-events:none}
.replay-scrub{position:absolute;inset:0;width:100%;height:100%;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.replay-scrub::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--card);box-shadow:0 0 0 3px var(--accent-soft)}
.replay-scrub::-moz-range-thumb{width:14px;height:14px;border:2px solid var(--card);border-radius:50%;background:var(--accent)}
.replay-scrub:disabled{cursor:not-allowed;opacity:.6}
/* 阶段色沿用 .split-stack 的紫/青交替口径（那两个变量是 scoped 在 .split-stack 里的，这里重新声明一份） */
.replay-segments{--segA:#6a58c4;--segB:#13a3a0;position:relative;height:22px;border-radius:var(--radius-sm);overflow:hidden;background:var(--input);border:1px solid var(--border-subtle)}
.replay-seg{position:absolute;top:0;bottom:0;min-width:0;border:0;border-right:1px solid var(--background);background:var(--segA,var(--primary));color:#fff;font-size:9px;font-weight:650;letter-spacing:.02em;cursor:pointer;overflow:hidden;padding:0 6px;display:flex;align-items:center;justify-content:center;transition:filter .15s;white-space:nowrap}
.replay-seg:nth-child(odd){background:var(--segA)}
.replay-seg:nth-child(even){background:var(--segB)}
.replay-seg.is-sub{background:color-mix(in srgb,var(--segB) 72%,var(--input));font-size:8px}
.replay-seg:hover{filter:brightness(1.16)}
.replay-seg.active{box-shadow:inset 0 0 0 2px var(--accent);filter:brightness(1.1)}
.replay-seg-rec{position:absolute;left:0;top:0;bottom:0;background:rgba(0,0,0,.3);pointer-events:none}
/* 窄段（同一位置并存的聚合段与子段）只让文字在自身宽度内截断，绝不溢出到相邻段上 */
.replay-seg span{position:relative;z-index:1;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.replay-seg-empty{padding:4px 8px;font-size:10px}
.replay-transport{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.replay-transport-main{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.replay-transport-main .btn{min-height:34px;padding:0 11px}
.replay-play{min-width:86px;font-weight:650}
.replay-transport-side{display:flex;align-items:center;gap:12px;margin-left:auto}
.replay-clock{display:flex;align-items:baseline;gap:4px;font-size:12px}
.replay-clock strong{font:680 18px var(--mono)}
.replay-speeds{display:flex;gap:2px;padding:2px;border:1px solid var(--border);background:var(--input);border-radius:9px}
.replay-speeds button{min-height:28px;padding:0 9px;border:0;border-radius:7px;background:transparent;color:var(--text-muted);font-size:11px;font-weight:650;cursor:pointer}
.replay-speeds button.active{background:var(--primary);color:#fff}
.replay-speeds button:hover:not(.active){color:var(--foreground)}
/* 单次详情里的回放入口 */
.solve-detail-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
/* 列表行里的回放按钮：与行点击区分开，避免误触 */
.row-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.replay-entry{width:26px;height:26px;flex:none;display:grid;place-items:center;padding:0;border:1px solid var(--border);border-radius:7px;background:var(--input);color:var(--text-muted);font-size:9px;line-height:1;cursor:pointer}
.replay-entry:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
@media(max-width:900px){
  .replay-body{grid-template-columns:1fr}
  .replay-stage-wrap{min-height:260px}
  .replay-move-scroll{max-height:190px}
  .replay-transport{align-items:flex-start}
  .replay-transport-side{margin-left:0;width:100%;justify-content:space-between}
}
@media(max-width:520px){
  .replay-modal{padding:14px 13px 12px}
  .replay-metrics{grid-template-columns:1fr 1fr}
  .replay-transport-main{gap:4px}
  .replay-transport-main .btn{padding:0 9px;min-height:32px;font-size:12px}
  .replay-speeds button{padding:0 7px}
  .replay-move{grid-template-columns:22px minmax(34px,auto) 46px 40px;font-size:10px}
  .replay-move .replay-move-raw{display:none}
}