/* ==========================================================================
   工程制图仿真工具 · 编辑器样式
   颜色、字号、间距、圆角、阴影与动效全部来自 tokens.css。
   画布始终铺浅色纸面（--paper）；深色主题只作用于界面外壳。
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-accent), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, output, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, canvas:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-line); }
::selection { background: var(--accent-soft-2); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-caret { width: 14px; height: 14px; margin-left: -2px; opacity: .6; transition: transform var(--dur) var(--ease); }
[aria-expanded="true"] > .icon-caret { transform: rotate(180deg); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--text); color: var(--surface); transform: translateY(-160%); transition: transform var(--dur) var(--ease); }
.skip-link:focus { transform: translateY(0); }

kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin: 0 1px; padding: 0 4px;
  border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--text-2);
  font: 600 var(--fs-2xs)/1 var(--font-mono); vertical-align: 1px;
}

/* ---------- 通用按钮 ---------- */

.tool-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--ctl-h); padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.tool-button:hover:not(:disabled) { border-color: var(--accent-line); color: var(--accent-ink); background: var(--surface); }
.tool-button:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.tool-button:disabled { opacity: .4; cursor: default; box-shadow: none; }
a.tool-button { text-decoration: none; }
.icon-button { width: var(--ctl-h); padding: 0; }
.tool-button.primary { border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 92%, white), var(--accent-fill)); color: var(--text-on-accent); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent-fill) 70%, transparent), var(--highlight-inset); }
.tool-button.primary:hover:not(:disabled) { color: var(--text-on-accent); border-color: transparent; background: var(--accent-fill-hover); }
.tool-button.danger:hover:not(:disabled) { border-color: var(--danger-line); color: var(--danger); }
.tool-button[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }

.case-library-button { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.case-library-button:hover:not(:disabled) { background: var(--accent-soft-2); }
#replayButton[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--surface); }

/* 分段控件：视图布局、工作平面、案例筛选共用 */
.segmented { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-3); }
.segmented > button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px;
  border: 1px solid transparent; border-radius: calc(var(--r-md) - 3px);
  background: transparent; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.segmented > button .icon { width: 16px; height: 16px; }
.segmented > button:hover { color: var(--text); }
.segmented > button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1), 0 0 0 1px var(--border); }
.segmented-sm > button { min-height: 26px; padding: 0 9px; }

/* 开关按钮：带状态圆点 */
.view-toggle {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.view-toggle:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.view-toggle[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.view-toggle .icon { width: 16px; height: 16px; }
.view-toggle-dot { position: relative; width: 22px; height: 12px; flex: 0 0 22px; border-radius: var(--r-pill); background: var(--border-strong); transition: background var(--dur) var(--ease); }
.view-toggle-dot::after { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-knob); content: ""; transition: transform var(--dur) var(--ease-spring); }
.view-toggle[aria-pressed="true"] .view-toggle-dot { background: var(--accent); }
.view-toggle[aria-pressed="true"] .view-toggle-dot::after { transform: translateX(10px); }

.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 34px; min-height: 30px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip .icon { width: 15px; height: 15px; }
.chip:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.chip[aria-pressed="true"] { border-color: var(--h); background: var(--h-soft); color: var(--h-ink); }

/* ---------- 顶栏 ---------- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(14px, 2.2vw, 32px);
  border-bottom: 1px solid var(--border);
  background: var(--glass); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
}
.topbar-start { flex: 1 1 auto; display: flex; align-items: center; gap: 18px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.brand-text > * { overflow: hidden; text-overflow: ellipsis; }
.brand strong { font-size: var(--fs-md); font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.brand small { margin-top: 2px; color: var(--text-3); font-size: var(--fs-2xs); letter-spacing: .06em; white-space: nowrap; }
.brand-symbol { position: relative; width: 32px; height: 30px; flex: 0 0 32px; }
.brand-symbol i { position: absolute; width: 21px; height: 14px; border: 2px solid; border-radius: var(--r-2xs); }
.brand-symbol i:nth-child(1) { top: 0; left: 0; border-color: var(--v); background: var(--v-soft); transform: skewY(-28deg); }
.brand-symbol i:nth-child(2) { top: 14px; left: 0; border-color: var(--h); background: var(--h-soft); transform: skewY(28deg); }
.brand-symbol i:nth-child(3) { top: 7px; left: 10px; border-color: var(--w); background: var(--w-soft); transform: skewY(28deg); }

.topbar-actions { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.action-cluster { display: flex; align-items: center; gap: 6px; }
.action-cluster + .action-cluster { padding-left: 10px; border-left: 1px solid var(--divider); }

.command-trigger {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--ctl-h); min-width: 168px; padding: 0 6px 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-3); font-size: var(--fs-xs); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.command-trigger:hover { border-color: var(--accent-line); color: var(--text-2); background: var(--surface); }
.command-trigger-text { flex: 1; text-align: left; }
.command-trigger kbd { width: auto; padding: 0 6px; }

.save-status { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-2xs); white-space: nowrap; }
.save-status::before { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); content: ""; }

/* ---------- 下拉菜单 ---------- */

.menu { position: relative; display: inline-flex; }
.menu-button[aria-expanded="true"], .lock-menu-button[aria-expanded="true"] { border-color: var(--accent-line); color: var(--accent-ink); }
.menu-pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 200px;
  display: flex; flex-direction: column; gap: 1px; padding: 6px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-3);
  transform-origin: top left;
  animation: pop-in var(--dur) var(--ease-out);
}
.menu-pop[hidden] { display: none; }
.menu-heading { padding: 6px 10px 4px; color: var(--text-4); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; }
.menu-item {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2);
  font-size: var(--fs-sm); text-align: left; white-space: nowrap; cursor: pointer;
}
.menu-item .icon { width: 16px; height: 16px; color: var(--text-3); }
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
.menu-item:hover:not(:disabled) .icon { color: var(--accent-ink); }
.menu-item:disabled { color: var(--text-4); cursor: default; }
.menu-item.danger { color: var(--danger); }
.menu-item.danger .icon { color: var(--danger); }
.menu-item.danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); }
.menu-separator { height: 1px; margin: 4px 6px; background: var(--divider); }

@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ---------- 工作区 ---------- */

.workspace { height: calc(100vh - 60px); display: grid; grid-template-rows: minmax(500px, 1fr) auto auto; gap: 12px; padding: 14px clamp(14px, 2.2vw, 32px) 12px; }
/* 高度保持确定值（画布 height:100% 才不会回退到位图尺寸）；作图区至少 500px，矮屏时底部卡片溢出到下方、页面滚动，而不是把画布压扁 */
.workspace.dock-hidden { grid-template-rows: minmax(500px, 1fr) auto; }
.workspace.dock-hidden .dock { display: none; }
.mobile-view-tabs { display: none; }
.view-grid { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(0, var(--left-panel, 58fr)) 12px minmax(0, var(--right-panel, 42fr)); gap: 0; }
.view-grid.focus-3d, .view-grid.focus-2d { grid-template-columns: minmax(0, 1fr); }
.view-grid.focus-3d .panel-2d, .view-grid.focus-2d .panel-3d, .view-grid.focus-3d .view-divider, .view-grid.focus-2d .view-divider { display: none; }
.view-divider { position: relative; z-index: 3; cursor: col-resize; touch-action: none; }
.view-divider::after { position: absolute; top: 50%; left: 4px; width: 4px; height: 48px; border-radius: var(--r-xs); background: var(--border-strong); content: ""; transform: translateY(-50%); transition: background var(--dur) var(--ease), height var(--dur) var(--ease-spring); }
.view-divider:hover::after, .view-divider.is-dragging::after { height: 96px; background: var(--accent); }

.view-panel {
  min-width: 0; min-height: 0; display: grid;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden; box-shadow: var(--shadow-2);
}
.panel-3d { display: flex; flex-direction: column; container-type: inline-size; container-name: panel3d; }   /* 截平面条等可选行出现 / 隐藏时，画布自动占满剩余高度 */
.panel-2d { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }

.panel-header { min-height: 54px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 14px; border-bottom: 1px solid var(--divider); background: var(--surface); }
.panel-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.panel-number {
  display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: var(--r-sm); background: linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2));
  color: var(--accent-ink); font: 800 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .02em;
}
.panel-2d .panel-number { background: linear-gradient(135deg, var(--v-soft), var(--w-soft)); color: var(--v-ink); }
.panel-header h2 { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.panel-header p { margin: 3px 0 0; color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }

/* 三面投影直线的三个独立开关：按下时用该投影面自己的颜色 */
.proj-group { display: inline-flex; align-items: center; gap: 3px; padding: 3px 3px 3px 9px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
/* 展开投影箱：播放按钮 + 滑块 + 百分比（与投影开关同一行，不遮挡画布） */
.unfold-group { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.unfold-play { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px 0 6px; border: 1px solid transparent; border-radius: var(--r-xs); background: transparent; color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.unfold-play .icon { width: 14px; height: 14px; }
.unfold-play:hover { background: var(--surface); color: var(--accent-ink); }
.unfold-play[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.unfold-group input[type="range"] { width: 84px; --range-color: var(--accent); }
.unfold-group output { min-width: 3.2em; color: var(--text-3); font: 600 var(--fs-2xs)/1 var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.panel-3d.is-unfolded .canvas-wrap canvas { cursor: default; }
.proj-caption { margin-right: 3px; color: var(--text-3); font-size: var(--fs-2xs); font-weight: 600; }
.proj-toggle { min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--r-xs); background: transparent; color: var(--text-4); font: 800 var(--fs-xs)/1 var(--font-mono); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.proj-toggle:hover:not([aria-pressed="true"]) { color: var(--text-2); background: var(--surface); }
.proj-toggle.v[aria-pressed="true"] { border-color: var(--v); background: var(--v-soft); color: var(--v-ink); }
.proj-toggle.h[aria-pressed="true"] { border-color: var(--h); background: var(--h-soft); color: var(--h-ink); }
.proj-toggle.w[aria-pressed="true"] { border-color: var(--w); background: var(--w-soft); color: var(--w-ink); }

/* ---------- 工作平面控制条 ---------- */

.plane-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 8px 14px; border-bottom: 1px solid var(--divider); background: var(--surface-2); }
.plane-group { display: flex; align-items: center; gap: 8px; }
.plane-caption { color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.plane-chip { min-height: 26px; }
.plane-chip.h[aria-pressed="true"] { background: var(--h-soft); color: var(--h-ink); box-shadow: 0 0 0 1px var(--h); }
.plane-chip.v[aria-pressed="true"] { background: var(--v-soft); color: var(--v-ink); box-shadow: 0 0 0 1px var(--v); }
.plane-chip.w[aria-pressed="true"] { background: var(--w-soft); color: var(--w-ink); box-shadow: 0 0 0 1px var(--w); }
.plane-equation { padding: 5px 9px; border-radius: var(--r-sm); background: var(--h-soft); color: var(--h-ink); font: 600 var(--fs-xs)/1.2 var(--font-mono); white-space: nowrap; }
.plane-level { flex: 1 1 220px; min-width: 190px; }
.plane-level label { color: var(--text-3); font: 600 var(--fs-xs)/1 var(--font-mono); white-space: nowrap; }
.plane-level input[type="number"] { width: 56px; min-height: 28px; padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: 600 var(--fs-xs)/1 var(--font-mono); text-align: center; }
.plane-toggles { gap: 6px; }

/* 范围滑块：统一轨道与拇指 */
input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 80px; height: 22px; margin: 0; background: transparent; cursor: pointer; --range-color: var(--h); }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--range-color), var(--range-color)) 0 / var(--fill, 0%) 100% no-repeat, var(--border); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: var(--r-xs); background: var(--border); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: var(--r-xs); background: var(--range-color); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 2px solid var(--range-color); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--dur-fast) var(--ease); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--range-color); border-radius: 50%; background: var(--surface); }
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.18); }
input[type="range"]:focus-visible { box-shadow: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.plane-level input[type="range"] { --range-color: var(--h); }

/* ---------- 截平面条（载入截交线案例时出现）---------- */

.cut-bar {
  position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 8px 14px 8px 17px;
  border-bottom: 1px solid var(--section-line);
  background: linear-gradient(90deg, var(--section-soft), var(--surface) 85%);
  color: var(--section-ink); font-size: var(--fs-xs);
  animation: slide-down var(--dur-slow) var(--ease-out);
}
.cut-bar::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--section); content: ""; }
.cut-bar[hidden] { display: none; }
.cut-caption { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cut-caption .icon { width: 17px; height: 17px; color: var(--section); }
.cut-caption b { color: var(--section); font-size: var(--fs-sm); }
.cut-caption > span { padding: 2px 7px; border-radius: var(--r-pill); background: var(--section-soft); box-shadow: inset 0 0 0 1px var(--section-line); font-weight: 600; }
.cut-field { flex: 1 1 170px; min-width: 150px; display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.cut-field input[type="range"] { --range-color: var(--section); }
.cut-field output { min-width: 38px; padding: 3px 6px; border-radius: var(--r-xs); background: var(--surface); box-shadow: inset 0 0 0 1px var(--section-line); color: var(--section-ink); font: 700 var(--fs-xs)/1.2 var(--font-mono); text-align: center; }
.cut-info { padding: 4px 9px; border-radius: var(--r-pill); background: var(--section-fill); color: var(--text-on-accent); font-weight: 700; white-space: nowrap; }
.cut-info:empty { display: none; }
.cut-bar .chip { min-height: 28px; }

/* 组合体条：三行——名称与截平面清单 / 参数滑块 / 分步求解 */
.compound-bar { flex-direction: column; align-items: stretch; gap: 8px; }
.compound-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.compound-planes { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.compound-plane { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--section-line); color: var(--section-ink); font-weight: 600; white-space: nowrap; }
.compound-plane b { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: var(--r-pill); background: var(--section-fill); color: var(--text-on-accent); font: 700 var(--fs-2xs)/1 var(--font-mono); }
.compound-row .cut-info { margin-left: auto; }
.compound-params { flex: 1 1 320px; display: flex; flex-wrap: wrap; gap: 6px 16px; min-width: 0; }
.compound-params .cut-field { flex: 1 1 200px; }
/* 参数滑块行可收起：图上手柄是主要的调节方式，滑块是无障碍的备用入口 */
.compound-params-toggle { gap: 2px; }
.compound-params-toggle .icon { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.compound-params-toggle[aria-expanded="false"] .icon { transform: rotate(-90deg); }
.compound-bar.params-collapsed .compound-params-row { display: none; }
.compound-steps-caption { color: var(--section-ink); font-weight: 700; white-space: nowrap; }
/* ---------- 作图时间线（ed-core ui/timeline）：组合体分步求解与作图回放共用 ---------- */
.timeline { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.timeline-bar { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.timeline-track { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--r-sm); background: var(--surface-3); }
.timeline-track.is-dense { padding: 0 6px; background: transparent; }
.timeline-chapter { position: relative; height: 26px; padding: 0 10px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.timeline-chapter:hover { color: var(--text); }
.timeline-chapter.is-done { color: var(--text-2); }
.timeline-chapter.is-done::after { position: absolute; right: 10px; bottom: 3px; left: 10px; height: 2px; border-radius: var(--r-2xs); background: var(--section-line); content: ""; }
.timeline-chapter[aria-selected="true"] { background: var(--surface); color: var(--section-ink); box-shadow: var(--shadow-1), 0 0 0 1px var(--section-line); }
.timeline-chapter:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.timeline-nav { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); cursor: pointer; }
.timeline-nav .icon { width: 15px; height: 15px; }
.timeline-nav:hover:not(:disabled) { border-color: var(--section-line); color: var(--section-ink); }
.timeline-nav:disabled { opacity: .4; cursor: default; }
.timeline-nav[aria-pressed="true"] { border-color: var(--section-line); background: var(--section-soft); color: var(--section-ink); }
.timeline-range { width: clamp(120px, 22vw, 280px); --range-color: var(--section); }
.timeline-caption { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.timeline-count { margin-right: 8px; color: var(--section-ink); font: 700 var(--fs-2xs)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.timeline-label { margin-right: 6px; color: var(--text); font-weight: 700; }
.compound-timeline { flex: 1 1 0; min-width: 0; }
/* 说明文字不参与面板的最小宽度计算：一句长说明不会把整条组合体栏撑宽，放不下时省略 */
.compound-timeline .timeline-caption { flex: 1 1 0; width: 0; }
@media (max-width: 1180px) { .compound-timeline .timeline-caption { display: none; } }
@media (max-width: 520px) {
  .compound-timeline .timeline-track { max-width: calc(100vw - 150px); overflow-x: auto; scrollbar-width: none; }
  .timeline-chapter { flex: none; }
}
/* 回放条是深色浮层：时间线用反色表面令牌 */
.replay-timeline { display: flex; min-width: 0; }
.replay-bar .timeline-track { background: var(--inverse-line); }
.replay-bar .timeline-chapter { color: var(--inverse-muted); }
.replay-bar .timeline-chapter.is-done { color: var(--inverse-text); }
.replay-bar .timeline-chapter[aria-selected="true"] { background: var(--inverse-accent); color: var(--inverse-strong); box-shadow: 0 0 0 1px var(--inverse-accent-line); }
.replay-bar .timeline-nav { border-color: var(--inverse-line-strong); background: transparent; color: var(--inverse-text); }
.replay-bar .timeline-nav:hover:not(:disabled) { background: var(--inverse-hover); color: var(--inverse-strong); border-color: var(--inverse-line-strong); }
.replay-bar .timeline-nav[aria-pressed="true"] { border-color: var(--inverse-accent-line); background: var(--inverse-accent); color: var(--inverse-strong); }
.replay-bar .timeline-range { --range-color: var(--inverse-accent-ink); }
.replay-bar .timeline-caption { max-width: 420px; color: var(--inverse-text); }
.replay-bar .timeline-count { color: var(--inverse-accent-ink); }
.replay-bar .timeline-label { color: var(--inverse-strong); }

@keyframes slide-down { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- 画布 ---------- */

.canvas-wrap { position: relative; min-height: 0; overflow: hidden; background: var(--paper); }
.panel-3d .canvas-wrap { container-type: size; container-name: space; background: radial-gradient(ellipse at 50% 40%, var(--paper), var(--paper-2)); }
.panel-2d .canvas-wrap { background: var(--paper); }
.canvas-wrap canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
/* 2D 静态图面由 SVG 显示，尺寸由脚本按画布像素写入；上层透明画布只画悬停与候选，并接收全部指针事件 */
/* 图上手柄：44px 触控区、可聚焦；可见部分只是一个小圆点，不遮挡图面 */
.canvas-handles { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.canvas-handle { position: absolute; display: grid; width: 44px; height: 44px; margin: -22px 0 0 -22px; place-items: center; border-radius: 50%; outline: none; pointer-events: auto; touch-action: none; cursor: grab; }
.canvas-handle[hidden] { display: none; }
.canvas-handle.axis-x { cursor: ew-resize; }
.canvas-handle.axis-y, .canvas-handle.axis-z { cursor: ns-resize; }
.canvas-handle::before { width: 14px; height: 14px; border: 2px solid var(--draw-section); border-radius: 50%; background: var(--float-field); box-shadow: var(--float-shadow); content: ""; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.canvas-handle.kind-cut-alpha::before { border-radius: var(--r-2xs); transform: rotate(45deg); }
.canvas-handle:hover::before, .canvas-handle:focus-visible::before, .canvas-handle.is-dragging::before { background: var(--draw-section); transform: scale(1.3); }
.canvas-handle.kind-cut-alpha:hover::before, .canvas-handle.kind-cut-alpha:focus-visible::before, .canvas-handle.kind-cut-alpha.is-dragging::before { transform: rotate(45deg) scale(1.3); }
.canvas-handle:focus-visible { box-shadow: var(--focus-ring); }
.canvas-handle.is-dragging { cursor: grabbing; }
.handle-tip { position: absolute; bottom: 40px; left: 50%; padding: 2px 7px; border-radius: var(--r-xs); background: var(--inverse-bg); color: var(--inverse-strong); font: 600 var(--fs-2xs)/1.5 var(--font-mono); white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity var(--dur-fast) var(--ease); }
.canvas-handle:hover .handle-tip, .canvas-handle:focus-visible .handle-tip, .canvas-handle.is-dragging .handle-tip { opacity: 1; }
.flat-svg { position: absolute; left: 0; top: 0; z-index: 0; display: block; overflow: hidden; pointer-events: none; user-select: none; }

/* 画布上的浮层统一使用浅色玻璃（float-* 令牌固定为浅色：画布本身是浅色纸面，深色主题也保持浅色浮层以保证对比） */
.canvas-float { border: 1px solid var(--float-border); background: var(--float-bg); box-shadow: var(--float-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.canvas-corner {
  position: absolute; z-index: 2; left: 12px; bottom: 10px;
  display: flex; align-items: center; gap: 8px; padding: 5px 9px;
  border-radius: var(--r-sm); background: var(--float-bg-soft); color: var(--float-muted);
  font-size: var(--fs-2xs); pointer-events: none;
}
.canvas-corner i { width: 1px; height: 11px; background: var(--float-rule); }
.canvas-corner .mono { color: var(--float-text); font-weight: 600; }

.flat-guide {
  position: absolute; z-index: 2; top: 12px; left: 12px; max-width: min(440px, calc(100% - 24px)); padding: 9px 12px;
  border: 1px solid var(--float-border); border-radius: var(--r-md);
  background: var(--float-bg); box-shadow: var(--float-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--float-text); font-size: var(--fs-xs); line-height: 1.55; pointer-events: none;
}
.flat-guide { display: flex; align-items: flex-start; gap: 8px; max-width: min(440px, calc(100% - 110px)); }
.flat-guide[hidden] { display: none; }
.flat-guide-step { flex: 0 0 auto; padding: 2px 8px; border-radius: var(--r-pill); background: var(--float-note-bg); color: var(--float-note-ink); font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; }

/* 画布上的按钮：固定浅色，避免深色主题下对比不足 */
.canvas-wrap .view-toggle { border-color: var(--float-border); background: var(--float-bg); color: var(--float-muted); box-shadow: var(--float-shadow); }
.canvas-wrap .view-toggle:hover { border-color: var(--float-accent-line); color: var(--float-accent-ink); }
.canvas-wrap .view-toggle[aria-pressed="true"] { border-color: var(--float-accent-line); background: var(--float-accent-soft); color: var(--float-accent-ink); }
.canvas-wrap .view-toggle-dot { background: var(--float-dot); }
.canvas-wrap .view-toggle[aria-pressed="true"] .view-toggle-dot { background: var(--float-accent); }
.canvas-wrap .view-toggle-dot::after { background: var(--float-field); }
.flat-guide-toggle { position: absolute; z-index: 3; top: 12px; right: 12px; }
.flat-reset { position: absolute; z-index: 3; top: 52px; right: 12px; font-variant-numeric: tabular-nums; }
.flat-reset[hidden] { display: none; }

/* 3D 卡片较窄时，工作平面条压缩成一行：省去重复的平面方程与标题 */
@container panel3d (max-width: 920px) {
  .plane-equation, .plane-caption { display: none; }
  .plane-bar { gap: 6px 10px; }
  .plane-level { flex: 1 1 150px; min-width: 150px; }
  .plane-toggles .view-toggle { padding: 0 8px; gap: 6px; }
}

/* ---------- 3D 左侧工具栏：作图工具 · 当前步骤 · 视图控件 ----------
   停靠在画布左侧而不是浮在画布上，3D 视图不再被遮挡；使用界面令牌，随深浅主题变化 */

.space-body { position: relative; flex: 1 1 0; min-height: 0; display: flex; }
.space-body > .canvas-wrap { flex: 1 1 0; min-width: 0; }
.space-sidebar {
  --sb-w: 190px;
  flex: 0 0 var(--sb-w); width: var(--sb-w); min-height: 0;
  display: flex; flex-direction: column; gap: 10px; padding: 10px;
  border-right: 1px solid var(--divider); background: var(--surface-2);
  container-type: size; container-name: sidebar;
}

.tool-rail { flex: none; display: flex; flex-direction: column; gap: 6px; }
.tool-rail .tool-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.tool-rail .tool-group + .tool-group { padding-top: 6px; border-top: 1px solid var(--divider); }
.tool-rail .lock-group { display: block; }
.tool-chip {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; min-height: 46px; padding: 5px 1px;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--text-2); font-size: var(--fs-2xs); font-weight: 600; line-height: 1; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.tool-chip .icon { width: 20px; height: 20px; stroke-width: 1.7; }
.tool-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-chip kbd { position: absolute; top: 2px; right: 2px; min-width: 0; height: 13px; padding: 0 2px; border: 0; background: transparent; color: var(--text-4); font-size: 10px; }
.tool-chip:hover { background: var(--surface-hover); color: var(--text); }
.tool-chip:active { transform: scale(.95); }
.tool-chip[aria-pressed="true"] { background: var(--accent-fill); color: var(--text-on-accent); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent-fill) 80%, transparent); }
.tool-chip[aria-pressed="true"] kbd { color: color-mix(in srgb, var(--text-on-accent) 75%, transparent); }

.lock-menu-button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 34px; padding: 0 10px; background: var(--surface); }
.lock-menu-button .icon { width: 17px; height: 17px; }
.lock-menu-button .tool-label::before { content: "方向锁："; color: var(--text-3); font-weight: 500; }
.lock-menu-button[data-tone="h"] { border-color: var(--h); background: var(--h-soft); color: var(--h-ink); }
.lock-menu-button[data-tone="v"] { border-color: var(--v); background: var(--v-soft); color: var(--v-ink); }
.lock-menu-button[data-tone="w"] { border-color: var(--w); background: var(--w-soft); color: var(--w-ink); }
/* 方向锁菜单由脚本按按钮位置以视口定位弹出（见 app.js 的 placeLockMenu），不会被面板裁切 */
.tool-rail .lock-menu { position: fixed; min-width: 180px; transform-origin: top left; }
.lock-menu .lock-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 32px; border-color: transparent; background: transparent; text-align: left; }
.lock-menu .lock-chip:hover { background: var(--surface-hover); }
.lock-chip[aria-pressed="true"] { border-color: var(--border-strong); background: var(--surface-3); color: var(--text); }
.lock-chip.h[aria-pressed="true"] { border-color: var(--h); background: var(--h-soft); color: var(--h-ink); }
.lock-chip.v[aria-pressed="true"] { border-color: var(--v); background: var(--v-soft); color: var(--v-ink); }
.lock-chip.w[aria-pressed="true"] { border-color: var(--w); background: var(--w-soft); color: var(--w-ink); }

/* 当前步骤：占据工具栏中部的剩余高度，内容过长时在卡片内滚动 */
.canvas-status {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  color: var(--text-2); font-size: var(--fs-xs); line-height: 1.6;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.status-step { align-self: flex-start; padding: 2px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-2xs); font-weight: 700; }
.status-prompt { color: var(--text); }
.status-note { color: var(--warn-ink); }
.status-note:empty { display: none; }

/* 视图控件：缩放、复位、隐藏控件 */
.canvas-navigation { flex: none; display: flex; flex-direction: column; gap: 4px; }
.nav-row { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.canvas-nav-button { display: grid; place-items: center; flex: 1 1 0; min-width: 0; height: 28px; padding: 0 4px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font: 600 var(--fs-xs)/1 var(--font-mono); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.canvas-nav-button .icon { width: 16px; height: 16px; }
.canvas-nav-button:hover { background: var(--accent-soft); color: var(--accent-ink); }
.canvas-nav-reset { flex: 1.4 1 0; }
.space-navigation .chrome-toggle { justify-content: center; width: 100%; min-height: 32px; }

/* 工具栏高度不足时：工具只显示图标，「隐藏控件」并入缩放一行 */
@container sidebar (max-height: 470px) {
  .tool-chip { min-height: 34px; }
  .tool-rail .tool-group:not(.lock-group) .tool-label { display: none; }
  .canvas-navigation { flex-direction: row; }
  .space-navigation .chrome-toggle { flex: none; width: 36px; padding: 0; }
  .space-navigation .chrome-toggle .toggle-text { display: none; }
}
/* 3D 卡片较窄时：工具栏收窄，只显示图标 */
@container panel3d (max-width: 760px) {
  .space-sidebar { --sb-w: 152px; padding: 8px; }
  .tool-rail .tool-group:not(.lock-group) .tool-label { display: none; }
  .tool-chip { min-height: 34px; }
  .lock-menu-button .tool-label::before { content: none; }
  .canvas-navigation { flex-direction: column; }
  .space-navigation .chrome-toggle { width: 100%; padding: 0 8px; }
  .space-navigation .chrome-toggle .toggle-text { display: inline; }
  .canvas-nav-button { padding: 0 2px; }
}
@container space (max-width: 460px) {
  .canvas-corner { display: none; }
}

/* ---------- 3D 卡片一键隐藏控件（演示模式共用同一套规则）---------- */

.panel-3d.chrome-hidden .panel-actions,
.panel-3d.chrome-hidden .tool-bar,
.panel-3d.chrome-hidden .plane-bar,
.panel-3d.chrome-hidden .panel-footer,
.panel-3d.chrome-hidden .canvas-status,
.panel-3d.chrome-hidden .coord-form,
.panel-3d.chrome-hidden .canvas-corner,
.panel-3d.chrome-hidden .cut-bar,
.panel-3d.chrome-hidden .space-navigation > :not(.chrome-toggle) { display: none; }
/* 隐藏控件时工具栏收起，只留一个「显示控件」按钮浮在画布左上角 */
.panel-3d.chrome-hidden .space-sidebar { position: absolute; z-index: 5; top: 12px; left: 12px; width: auto; height: auto; padding: 0; border: 0; background: transparent; container-type: normal; }
.panel-3d.chrome-hidden .space-navigation .chrome-toggle { width: auto; padding: 0 12px; box-shadow: var(--shadow-2); }
.panel-3d.chrome-hidden .space-navigation .chrome-toggle .toggle-text { display: inline; }
.panel-3d.chrome-hidden .chrome-toggle .icon { display: none; }

.coord-form {
  position: absolute; z-index: 3; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px;
  border: 1px solid var(--float-border); border-radius: var(--r-md); background: var(--float-bg); box-shadow: var(--float-shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.coord-form:focus-within { border-color: var(--float-accent-line); box-shadow: var(--float-shadow), var(--float-accent-ring); }
.coord-form label { color: var(--float-muted); font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; }
.coord-form input { width: min(230px, 34vw); min-height: 28px; padding: 4px 8px; border: 1px solid var(--float-field-border); border-radius: var(--r-sm); background: var(--float-field); color: var(--float-ink); font: 500 var(--fs-xs)/1 var(--font-mono); }
.coord-form input::placeholder { color: var(--float-faint); }
.coord-form input:focus { border-color: var(--float-accent); outline: none; box-shadow: none; }
.coord-form button { display: grid; place-items: center; width: 30px; height: 28px; padding: 0; border: 0; border-radius: var(--r-sm); background: var(--float-accent); color: var(--text-on-accent); cursor: pointer; }
.coord-form button .icon { width: 15px; height: 15px; }
.coord-form button:hover { background: var(--float-accent-hover); }

/* ---------- 作图回放条 ---------- */

.replay-bar {
  position: absolute; z-index: 8; left: 50%; bottom: 56px; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 24px); padding: 6px;
  border: 1px solid var(--inverse-line); border-radius: var(--r-lg);
  background: var(--inverse-bg-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--inverse-shadow); color: var(--inverse-strong);
  transform: translateX(-50%);
  animation: rise-in var(--dur-slow) var(--ease-out);
}
.replay-bar[hidden] { display: none; }
.replay-button { display: inline-flex; align-items: center; gap: 6px; min-width: 34px; min-height: 32px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--inverse-text); font-size: var(--fs-xs); line-height: 1; white-space: nowrap; cursor: pointer; }
.replay-button .icon { width: 16px; height: 16px; }
.replay-button:hover:not(:disabled) { background: var(--inverse-hover); color: var(--inverse-strong); }
.replay-button:disabled { opacity: .35; cursor: default; }
.replay-play[aria-pressed="true"] { border-color: var(--inverse-accent-line); background: var(--inverse-accent); color: var(--inverse-strong); }
.replay-exit { margin-left: 4px; border-color: var(--inverse-press); }
.replay-caption { min-width: 200px; max-width: 440px; padding: 0 10px; overflow: hidden; color: var(--inverse-strong); font-size: var(--fs-sm); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.replay-caption b { color: var(--inverse-accent-ink); font-variant-numeric: tabular-nums; }
body.replaying :is(.tool-bar, .plane-bar, .coord-form, .dock, #undoButton, #redoButton, .topbar .menu, #caseLibraryButton) { opacity: .42; }
/* 回放时作图步骤引导与当前工具无关，由回放条上的步骤说明代替 */
body.replaying :is(.canvas-status, .flat-guide) { display: none; }

@keyframes rise-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- 演示模式 ---------- */

body.presenting :is(.topbar, .dock, .coordinate-note, .mobile-view-tabs, .space-sidebar) { display: none !important; }
body.presenting .workspace { height: 100vh; min-height: 0; grid-template-rows: minmax(0, 1fr); padding: 10px; }
body.presenting .panel-3d :is(.panel-actions, .tool-bar, .plane-bar, .panel-footer, .canvas-status, .coord-form, .canvas-corner) { display: none; }
/* 截平面条是演示控件：演示模式下即使 3D 控件被隐藏也保留 */
body.presenting .panel-3d.chrome-hidden .cut-bar:not([hidden]) { display: flex; }
body.presenting .panel-2d { grid-template-rows: auto minmax(0, 1fr); }
body.presenting .panel-2d :is(.panel-actions, .panel-footer, .flat-guide, .flat-guide-toggle) { display: none; }
body.presenting .panel-header { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
body.presenting .panel-header h2 { font-size: var(--fs-xl); }
body.presenting .cut-bar { font-size: var(--fs-sm); }
body.presenting .replay-bar { bottom: 18px; }
.exit-present { position: fixed; z-index: 60; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--inverse-line-strong); border-radius: var(--r-md); background: var(--inverse-bg-glass); color: var(--inverse-strong); font-size: var(--fs-sm); cursor: pointer; box-shadow: var(--shadow-2); backdrop-filter: blur(10px); }
.exit-present:hover { background: var(--inverse-bg-hover); }
.exit-present kbd { border-color: var(--inverse-line-strong); background: transparent; color: var(--inverse-text); }
.exit-present[hidden] { display: none; }

.name-editor { position: absolute; z-index: 5; width: 66px; padding: 5px 6px; border: 1px solid var(--float-accent); border-radius: var(--r-sm); background: var(--float-field); color: var(--float-ink); font-size: var(--fs-sm); font-weight: 700; text-align: center; text-transform: uppercase; box-shadow: var(--float-accent-ring), var(--float-shadow); }

.panel-footer { min-height: 38px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 7px 14px; border-top: 1px solid var(--divider); background: var(--surface); color: var(--text-3); font-size: var(--fs-2xs); }
.panel-footer b { color: var(--text-2); font-weight: 700; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.footer-help { margin-left: auto; color: var(--text-4); }
.footer-rule { padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-3); }
.swatch { display: inline-block; width: 16px; border-top: 3px solid; border-radius: var(--r-2xs); }
.swatch.purple { border-color: var(--accent); }
.swatch.amber { border-color: var(--h); }
.dot-legend { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.dot-legend.solid { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rule-chip { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: var(--r-xs); background: var(--v); color: var(--text-on-accent); font: 800 var(--fs-2xs)/1 var(--font-mono); }
.rule-chip.h { background: var(--h); }
.rule-chip.w { background: var(--w); }

/* ---------- 底部清单 ---------- */

.dock {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.2fr); gap: 18px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-1);
}
.dock-tabs { display: none; }
.dock-column { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dock-column + .dock-column { padding-left: 16px; border-left: 1px solid var(--divider); }
.dock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dock-head h3 { margin: 0; font-size: var(--fs-md); font-weight: 700; }
.dock-count { color: var(--text-3); font-size: var(--fs-2xs); }
.dock-count b { color: var(--accent); font: 700 var(--fs-sm)/1 var(--font-mono); }
.dock-list { margin: 0; padding: 0; list-style: none; max-height: 140px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.dock-list li { display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 8px; padding: 3px 4px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.dock-list li:hover { background: var(--surface-hover); }
.dock-list li.active { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); }
.dock-list li.tail { box-shadow: inset 0 0 0 1px var(--h); }
/* 全局联动：视图里悬停的点 / 直线，在清单中同步点亮（与画布上的选中色一致） */
.dock-list li.linked, .relation-list li.relation-item.linked { background: var(--danger-soft); box-shadow: inset 3px 0 0 var(--danger); }
.dock-list li.linked .name-cell, .dock-list li.linked .segment-cell { color: var(--danger); font-weight: 800; }
.dock-list li.empty { display: block; padding: 8px 4px; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.65; cursor: default; }
.dock-list li.empty:hover { background: none; }
.name-cell { width: 100%; padding: 4px; border: 1px solid transparent; border-radius: var(--r-xs); background: var(--surface-3); color: var(--text); font: 800 var(--fs-xs)/1 var(--font-mono); text-align: center; text-transform: uppercase; }
.name-cell:hover { border-color: var(--border-strong); background: var(--surface); }
.coord-cell { color: var(--text-3); font: 500 var(--fs-xs)/1.3 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segment-cell { color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; }
#segmentList li:not(.empty) { grid-template-columns: 78px 1fr 24px; }
.dock-list li.broken .coord-cell { color: var(--danger); }
.coord-edit { width: 100%; padding: 4px; border: 1px solid transparent; border-radius: var(--r-xs); background: transparent; }
.coord-edit:hover { border-color: var(--border-strong); background: var(--surface); }
.coord-edit:focus { border-color: var(--accent); background: var(--surface); color: var(--text); outline: none; box-shadow: none; }
.def-cell { width: 100%; padding: 4px; border: 1px dashed var(--accent-line); border-radius: var(--r-xs); background: var(--accent-soft); color: var(--accent-ink); text-align: left; cursor: pointer; }
.def-cell:hover { border-color: var(--accent); }
.relation-list li.relation-item { display: block; padding: 5px 8px 5px 10px; border-left: 3px solid var(--border-strong); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.45; }
.relation-item.relation-parallel { border-left-color: var(--v); }
.relation-item.relation-intersect { border-left-color: var(--h); }
.relation-item.relation-skew { border-left-color: var(--danger); }
.relation-item.relation-on { border-left-color: var(--accent); }
.inspector:empty { display: none; }
.inspector { padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--divider); font-size: var(--fs-xs); line-height: 1.6; }
.inspector p { margin: 0; }
/* 检查器：标题 + 分组键值行 + 投影特性；可联动的行悬停时点亮 */
.insp-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; }
.insp-title { margin: 0; color: var(--text); font-size: var(--fs-md); font-weight: 800; }
.insp-sub { color: var(--text-3); font: 600 var(--fs-xs)/1.4 var(--font-mono); }
.inspector[data-kind="empty"] .insp-head { display: none; }
.insp-section + .insp-section { margin-top: 8px; }
.insp-section-title { margin: 0 0 3px; color: var(--text-3); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; }
.insp-grid { display: grid; gap: 1px; margin: 0; }
.insp-row { display: grid; grid-template-columns: minmax(84px, 42%) 1fr; align-items: center; gap: 8px; min-height: 24px; padding: 2px 6px; border-radius: var(--r-xs); }
.insp-row.is-linkable { cursor: default; }
.insp-row.is-linkable:hover, .insp-row.is-linkable:focus-visible, .insp-row.linked { background: var(--danger-soft); outline: none; }
.insp-row.is-linkable:focus-visible { box-shadow: var(--focus-ring); }
.insp-key { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin: 0; color: var(--text-2); font-size: var(--fs-xs); }
.insp-value { min-width: 0; margin: 0; color: var(--text); font: 500 var(--fs-xs)/1.4 var(--font-mono); overflow-wrap: anywhere; }
.insp-row.is-ok .insp-value { color: var(--ok); font-weight: 700; }
.insp-row.is-warn .insp-value { color: var(--danger); }
.insp-row.is-muted .insp-value { color: var(--text-3); }
.insp-face { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: var(--r-xs); color: var(--text-on-accent); font: 800 10px/1 var(--font-mono); }
.insp-face.v { background: var(--draw-v); }
.insp-face.h { background: var(--draw-h); }
.insp-face.w { background: var(--draw-w); }
.insp-edit { width: 100%; min-height: 24px; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface); color: var(--text); font: 500 var(--fs-xs)/1 var(--font-mono); }
.insp-edit:focus { border-color: var(--accent); outline: none; box-shadow: var(--focus-ring); }
.inspector .insp-rule { margin: 8px 0 0; padding: 6px 8px; border-left: 3px solid var(--accent-line); border-radius: 0 var(--r-xs) var(--r-xs) 0; background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-xs); line-height: 1.55; }
.dock-subhead { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 0 0; }
/* 检查器列与其他列同高：检查器在列内滚动，下方保留两三行关系，底部卡片不再把画布挤矮 */
.dock-relations { max-height: 176px; min-height: 0; gap: 6px; }
.dock-relations .inspector { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.dock-relations .relation-list { flex: 1 1 auto; min-height: 0; max-height: none; }
/* 选中对象时检查器占满这一列（它已列出该对象的全部关系）；未选中时显示用法提示与全部关系 */
.dock-relations[data-selection="true"] .dock-subhead, .dock-relations[data-selection="true"] .relation-list { display: none; }
.dock-relations[data-selection="false"] .inspector { flex: none; }
.dock-subhead h4 { margin: 0; color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; }
.row-delete { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: var(--r-xs); background: none; color: var(--text-4); font-size: var(--fs-2xs); cursor: pointer; }
.row-delete:hover { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }

.dock-help { gap: 8px; }
.status-message { margin: 0; min-height: 18px; color: var(--accent-ink); font-size: var(--fs-xs); line-height: 1.55; }
.dock-help-hint { margin: 0; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.9; }
.dock-help-button { align-self: flex-start; min-height: 30px; font-size: var(--fs-xs); }
.dock-help-button .icon { width: 16px; height: 16px; }

.coordinate-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 4px; color: var(--text-3); font-size: var(--fs-2xs); }
.coordinate-note > span:first-child { color: var(--text-2); font-weight: 700; letter-spacing: .06em; }
.coordinate-note i { width: 14px; height: 1px; background: var(--border-strong); }
.coordinate-note b { color: var(--text-2); font-weight: 600; }
.coordinate-result { margin-left: auto; color: var(--accent-ink); font-weight: 700; }

/* ---------- 对话框（案例库、帮助）---------- */

.sheet-dialog {
  padding: 0; border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-3);
}
.sheet-dialog[open] { animation: dialog-in var(--dur-slow) var(--ease-out); }
.sheet-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade-in var(--dur) var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }

.case-library { width: min(1120px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px)); max-height: none; }
.case-library[open] { display: flex; flex-direction: column; }
.case-library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 26px 16px; }
.case-kicker { display: block; margin-bottom: 6px; color: var(--accent); font: 800 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .16em; }
.case-library h2 { margin: 0; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: .01em; }
.case-library-head p { max-width: 640px; margin: 8px 0 0; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.65; }
.case-head-side { display: flex; align-items: center; gap: 14px; }
.case-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-3); cursor: pointer; transition: all var(--dur-fast) var(--ease); }
.case-close:hover { border-color: var(--accent-line); color: var(--accent-ink); transform: rotate(90deg); }
.case-progress { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }
.case-progress:empty { display: none; }
.progress-ring { --p: 0; width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--surface-3) 0); display: grid; place-items: center; }
.progress-ring::after { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); content: ""; }
.case-progress b { color: var(--text); font-family: var(--font-mono); }

.case-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 0 26px 14px; border-bottom: 1px solid var(--divider); }
.case-search { flex: 1 1 280px; max-width: 460px; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-3); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.case-search:focus-within { border-color: var(--accent-line); box-shadow: var(--focus-ring); background: var(--surface); }
.case-search input { flex: 1; min-width: 0; height: 36px; border: 0; outline: none; background: transparent; color: var(--text); font-size: var(--fs-sm); }
.case-search input:focus-visible { box-shadow: none; }

.case-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.case-nav { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; border-right: 1px solid var(--divider); overflow-y: auto; }
.case-nav button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.case-nav button:hover { background: var(--surface-hover); }
.case-nav button[aria-current="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.case-nav .nav-count { min-width: 22px; padding: 2px 6px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-3); font: 600 var(--fs-2xs)/1.2 var(--font-mono); text-align: center; }
.case-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 14px; padding: 18px 22px 26px; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.case-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 10px 0 0; color: var(--text); font-size: var(--fs-md); font-weight: 800; scroll-margin-top: 12px; }
.case-group:first-child { margin-top: 0; }
.case-group small { color: var(--text-4); font-size: var(--fs-2xs); font-weight: 600; }
.case-group::after { flex: 1; height: 1px; background: var(--divider); content: ""; }
.case-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); text-align: left; cursor: pointer; overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.case-card:hover, .case-card:focus-visible { border-color: var(--accent-line); box-shadow: var(--shadow-2); transform: translateY(-3px); outline: none; }
.case-card:focus-visible { box-shadow: var(--shadow-2), var(--focus-ring); }
.case-thumb { position: relative; display: block; aspect-ratio: 16 / 10; background: linear-gradient(180deg, var(--paper), var(--paper-2)); border-bottom: 1px solid var(--divider); }
.case-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.case-card:hover .case-thumb svg { transform: scale(1.03); }
.case-thumb svg { transition: transform var(--dur-slow) var(--ease-out); }
.case-card-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.case-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.case-card-kind { padding: 3px 7px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-2xs); font-weight: 700; }
.case-card.is-exercise .case-card-kind { background: var(--h-soft); color: var(--h-ink); }
.case-level { display: inline-flex; gap: 3px; margin-left: auto; }
.case-level i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.case-level i.on { background: var(--accent); }
.case-card-title { display: block; margin: 2px 0 0; color: var(--text); font-size: var(--fs-md); font-weight: 700; }
.case-card-desc { display: block; margin: 0; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.6; }
.case-card .case-action { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 6px; color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 700; }
.case-card .case-action .icon { width: 14px; height: 14px; transition: transform var(--dur) var(--ease-out); }
.case-card:hover .case-action .icon { transform: translateX(3px); }
.case-done { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 5px; border-radius: var(--r-pill); background: var(--ok); color: var(--text-on-accent); font-size: var(--fs-2xs); font-weight: 700; box-shadow: var(--shadow-1); }
.case-done .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.case-recent { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--inverse-badge); color: var(--inverse-strong); font-size: var(--fs-2xs); font-weight: 700; }
.case-empty { grid-column: 1 / -1; padding: 48px 0; color: var(--text-3); text-align: center; }
.case-library-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 26px 18px; border-top: 1px solid var(--divider); color: var(--text-3); font-size: var(--fs-xs); line-height: 1.6; }

.shortcut-help { width: min(860px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); }
.help-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 26px 6px; }
.help-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); text-align: left; text-decoration: none; cursor: pointer; transition: all var(--dur) var(--ease); }
.help-card:hover { border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-2px); }
.help-card .icon { width: 22px; height: 22px; color: var(--accent); }
.help-card b { display: block; font-size: var(--fs-sm); }
.help-card small { display: block; margin-top: 2px; color: var(--text-3); font-size: var(--fs-2xs); }
.shortcut-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; padding: 18px 26px 26px; }
.shortcut-groups h3 { margin: 0 0 10px; color: var(--text); font-size: var(--fs-md); font-weight: 700; }
.shortcut-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.shortcut-list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-xs); line-height: 1.5; }
.shortcut-list li:nth-child(odd) { background: var(--surface-2); }
.shortcut-list .keys { flex: 0 0 104px; display: inline-flex; gap: 2px; }

/* ---------- 命令面板 ---------- */

.command-palette {
  width: min(640px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 120px)); margin: 12vh auto auto; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--glass-strong); color: var(--text);
  box-shadow: var(--shadow-3); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); overflow: hidden;
}
.command-palette[open] { display: flex; flex-direction: column; animation: dialog-in var(--dur) var(--ease-out); }
.command-palette::backdrop { background: var(--scrim); animation: fade-in var(--dur) var(--ease); }
.command-search { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--divider); color: var(--text-3); }
.command-search .icon { width: 20px; height: 20px; }
.command-search input { flex: 1; min-width: 0; height: 32px; border: 0; outline: none; background: transparent; color: var(--text); font-size: var(--fs-lg); }
.command-search input:focus-visible { box-shadow: none; }
.command-list { flex: 1; margin: 0; padding: 8px; list-style: none; overflow-y: auto; scrollbar-width: thin; }
.command-group { padding: 10px 10px 4px; color: var(--text-4); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; }
.command-item { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px; border-radius: var(--r-md); color: var(--text-2); font-size: var(--fs-sm); cursor: pointer; }
.command-item .icon { width: 18px; height: 18px; color: var(--text-3); }
.command-item .command-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-item .command-hint { color: var(--text-4); font-size: var(--fs-2xs); white-space: nowrap; }
.command-item mark { background: none; color: var(--accent-ink); font-weight: 800; }
.command-item[aria-selected="true"] { background: var(--accent-soft); color: var(--text); }
.command-item[aria-selected="true"] .icon { color: var(--accent); }
.command-item[aria-disabled="true"] { opacity: .45; }
.command-empty { padding: 28px 12px; color: var(--text-3); text-align: center; }
.command-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--divider); color: var(--text-4); font-size: var(--fs-2xs); }

/* ---------- 提示气泡 ---------- */

.tooltip {
  position: fixed; z-index: 90; top: 0; left: 0; max-width: 300px; padding: 9px 11px;
  border-radius: var(--r-md); background: var(--inverse-bg); color: var(--inverse-text); box-shadow: var(--inverse-shadow);
  font-size: var(--fs-xs); line-height: 1.55; pointer-events: none;
  opacity: 0; transform: translateY(3px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.tooltip[hidden] { display: none; }
.tooltip.show { opacity: 1; transform: none; }
.tooltip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; color: var(--inverse-strong); }
.tooltip-head kbd { border-color: var(--inverse-line-strong); background: var(--inverse-line); color: var(--inverse-strong); }
.tooltip-desc { margin-top: 3px; color: var(--inverse-muted); }
.tooltip-desc:empty { display: none; }

/* ---------- 轻提示 ---------- */

.toast-region { position: fixed; z-index: 80; left: 50%; bottom: 24px; display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.toast {
  border: 1px solid var(--inverse-line);
  display: flex; align-items: center; gap: 10px; min-height: 42px; max-width: min(560px, calc(100vw - 32px)); padding: 6px 8px 6px 14px;
  border-radius: var(--r-md); background: var(--inverse-bg); color: var(--inverse-text); box-shadow: var(--inverse-shadow);
  font-size: var(--fs-sm); pointer-events: auto;
  animation: toast-in var(--dur-slow) var(--ease-spring);
}
.toast.leaving { animation: toast-out var(--dur) var(--ease) forwards; }
.toast-icon { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--inverse-hover); }
.toast-icon .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.toast.ok .toast-icon { background: var(--ok); }
.toast.warn .toast-icon { background: var(--warn); }
.toast.danger .toast-icon { background: var(--danger); }
.toast-text { flex: 1; min-width: 0; line-height: 1.45; }
.toast-action { min-height: 30px; padding: 0 12px; border: 1px solid var(--inverse-line-strong); border-radius: var(--r-sm); background: var(--inverse-line); color: var(--inverse-strong); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.toast-action:hover { background: var(--inverse-press); }
.toast-close { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--inverse-faint); cursor: pointer; }
.toast-close:hover { color: var(--inverse-strong); background: var(--inverse-hover); }
.toast-close .icon { width: 14px; height: 14px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---------- 新手引导 ---------- */

.tour-spot {
  position: fixed; z-index: 85; border-radius: var(--r-lg); pointer-events: none;
  box-shadow: 0 0 0 4px var(--accent), 0 0 0 9999px var(--spotlight-scrim);
  transition: top var(--dur-slow) var(--ease-out), left var(--dur-slow) var(--ease-out), width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out);
}
.tour-card {
  position: fixed; z-index: 86; width: min(340px, calc(100vw - 32px)); padding: 18px 18px 14px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-3);
  transition: top var(--dur-slow) var(--ease-out), left var(--dur-slow) var(--ease-out);
  animation: dialog-in var(--dur-slow) var(--ease-out);
}
.tour-step { color: var(--accent); font: 800 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .12em; }
.tour-card h3 { margin: 8px 0 6px; font-size: var(--fs-lg); }
.tour-card p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.65; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); transition: all var(--dur) var(--ease); }
.tour-dots i.on { width: 18px; border-radius: var(--r-2xs); background: var(--accent); }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.tour-actions .tool-button { min-height: 32px; }
.tour-skip { border: 0; background: none; color: var(--text-3); font-size: var(--fs-xs); cursor: pointer; }
.tour-skip:hover { color: var(--text); }

/* ---------- 响应式 ---------- */

@media (max-width: 1560px) {
  .command-trigger { min-width: 0; }
  .command-trigger-text { display: none; }
}
@media (max-width: 1520px) {
  .site-nav { display: none; }
}
@media (max-width: 1360px) {
  .brand small { display: none; }
}
@media (max-width: 1240px) {
  .view-mode-button span { display: none; }
  .view-mode-button { padding: 0 8px; }
  .save-status { font-size: 0; gap: 0; }
}
@media (max-width: 1050px) {
  .topbar-actions { gap: 6px; }
  .action-cluster + .action-cluster { padding-left: 6px; }
  #replayButton .btn-label, #presentButton .btn-label { display: none; }
  #replayButton, #presentButton { width: var(--ctl-h); padding: 0; }
  .save-status { display: none; }
  .plane-bar { gap: 6px 10px; }
  .footer-help { display: none; }
  .dock { grid-template-columns: 1fr; gap: 10px; }
  .dock-tabs { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--surface-3); }
  .dock-tab { flex: 1; min-height: 32px; border: 0; border-radius: calc(var(--r-md) - 3px); background: transparent; color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
  .dock-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
  .dock-column + .dock-column { padding-left: 0; border-left: 0; }
  .dock:not([data-dock-tab="points"]) [data-dock-pane="points"],
  .dock:not([data-dock-tab="segments"]) [data-dock-pane="segments"],
  .dock:not([data-dock-tab="relations"]) [data-dock-pane="relations"],
  .dock:not([data-dock-tab="help"]) [data-dock-pane="help"] { display: none; }
  .case-body { grid-template-columns: 1fr; }
  .case-nav { flex-direction: row; overflow-x: auto; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--divider); }
  .case-nav button { flex: none; }
}
@media (max-width: 860px) {
  .dock-relations { max-height: 360px; }
  .dock-relations .relation-list { max-height: 120px; }
  .topbar { position: relative; flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-start; width: 100%; }
  .action-cluster + .action-cluster { padding-left: 0; border-left: 0; }
  .view-mode-group { display: none; }
  .workspace { height: auto; min-height: 0; overflow: visible; grid-template-rows: auto auto auto auto; padding-bottom: 22px; }
  .workspace.dock-hidden { grid-template-rows: auto auto auto; }
  .mobile-view-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: var(--r-md); background: var(--surface-3); }
  .mobile-view-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 0; border-radius: calc(var(--r-md) - 3px); background: transparent; color: var(--text-3); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
  .mobile-view-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
  .view-grid { grid-template-columns: 1fr; }
  .view-divider { display: none; }
  .view-grid.focus-3d .panel-2d, .view-grid.view-split[data-mobile-view="3d"] .panel-2d { display: none; }
  .view-grid.focus-2d .panel-3d, .view-grid.view-split[data-mobile-view="2d"] .panel-3d { display: none; }
  .view-panel { min-height: 470px; }
  .canvas-wrap canvas { min-height: 350px; }
  /* 移动端面板高度随内容：3D 画布区给确定高度，画布 height:100% 才有依据（否则会回退到位图尺寸） */
  .space-body { flex: 0 0 auto; }
  .panel-3d .canvas-wrap { flex: 1 1 0; height: clamp(380px, 64vh, 580px); }
  .panel-header p { display: none; }
  .coordinate-result { width: 100%; margin-left: 0; }
  .tool-button, .chip, .view-toggle { min-height: 38px; }
  .icon-button { width: 38px; }
  .help-actions { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .topbar { padding: 10px 12px; }
  .brand-text small { display: none; }
  .workspace { padding: 10px 12px 18px; }
  .panel-header { flex-wrap: wrap; }
  .panel-header h2 { font-size: var(--fs-md); }
  .plane-level { flex-basis: 100%; }
  .plane-bar { padding: 8px 10px; }
  /* 窄屏：工具轨改为顶部横向滚动条 */
  /* 窄屏：工具栏移到画布上方，工具横向滚动，步骤提示与视图控件在下面各占一行 */
  .space-body { flex-direction: column; }
  .panel-3d .canvas-wrap { flex: none; }
  .space-sidebar { --sb-w: auto; flex: none; width: auto; gap: 8px; padding: 8px; border-right: 0; border-bottom: 1px solid var(--divider); container-type: normal; }
  .tool-rail { flex-direction: row; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
  .tool-rail .tool-group { display: flex; flex: none; gap: 2px; }
  .tool-rail .tool-group + .tool-group { padding-top: 0; padding-left: 6px; border-top: 0; border-left: 1px solid var(--divider); }
  .tool-chip { width: 46px; flex: none; min-height: 46px; }
  .tool-rail .tool-group:not(.lock-group) .tool-label { display: block; }
  .lock-menu-button { width: auto; min-height: 46px; white-space: nowrap; }
  .lock-menu-button .tool-label::before { content: none; }
  .tool-rail .lock-menu { top: auto !important; bottom: 16px; left: 16px !important; right: 16px; }
  .canvas-status { flex: none; max-height: 96px; }
  .canvas-navigation { flex-direction: row; }
  .space-navigation .chrome-toggle { flex: none; width: auto; padding: 0 10px; }
  .coord-form { left: 8px; right: 8px; bottom: 8px; }
  .coord-form input { width: 100%; flex: 1 1 auto; }
  .canvas-corner { display: none; }
  .view-panel { min-height: 430px; }
  .shortcut-groups { grid-template-columns: 1fr; padding: 14px 16px 18px; }
  .case-library { width: calc(100vw - 16px); height: calc(100vh - 16px); }
  .case-library-head, .case-library-foot, .case-toolbar { padding-right: 16px; padding-left: 16px; }
  .case-progress { display: none; }
  .case-list { grid-template-columns: 1fr; padding: 14px 16px; }
  .case-library-foot { align-items: flex-start; flex-direction: column; }
  .help-actions { padding: 0 16px 6px; }
  .replay-bar { left: 8px; right: 8px; bottom: 12px; flex-wrap: wrap; justify-content: center; transform: none; animation: none; }
  .replay-caption { order: -1; width: 100%; min-width: 0; max-width: none; padding: 3px 4px; }
  .command-palette { margin-top: 8vh; }
  .shortcut-list .keys { flex-basis: 84px; }
}
/* 矮屏（如 1024×768 投影）：收起面板副标题与页脚说明，把高度留给画布；说明在帮助面板和提示气泡里仍可查看 */
@media (max-height: 820px) and (min-width: 861px) {
  .panel-header { min-height: 46px; padding-top: 6px; padding-bottom: 6px; }
  .panel-header p { display: none; }
  .panel-footer { display: none; }
  .workspace { gap: 10px; padding-top: 10px; }
  /* 矮屏：工作平面栏与组合体栏收紧；截平面清单在图上已有迹线标注，这里省去 */
  .plane-bar { padding-top: 5px; padding-bottom: 5px; }
  .cut-bar { padding-top: 5px; padding-bottom: 5px; gap: 4px 12px; }
  .compound-bar { gap: 4px; }
  .compound-planes { display: none; }
  /* 工作平面栏压成一行：定点方式开关与平面方程在命令面板和快捷键里都有 */
  .plane-toggles, .plane-equation { display: none; }
  .dock-list { max-height: 96px; }
  .dock-relations { max-height: 136px; }
  .dock { padding-top: 10px; padding-bottom: 10px; }
  .workspace { grid-template-rows: minmax(420px, 1fr) auto auto; }
  .workspace.dock-hidden { grid-template-rows: minmax(420px, 1fr) auto; }
}
/* ---------- 学习（D 期）：课程播放器 = 左侧叙事栏（约 32%）+ 右侧舞台；课程地图 ---------- */

.workspace.lesson-mode { grid-template-columns: minmax(300px, min(32%, 440px)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.workspace.lesson-mode .view-grid { grid-column: 2; grid-row: 1; }
.workspace.lesson-mode :is(.dock, .coordinate-note) { display: none; }
body.lesson-mode :is(#caseLibraryButton, #replayButton, #toggleDock, .topbar .menu) { display: none; }
body.lesson-mode #courseButton { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.lesson-panel { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; }
.lesson-panel[hidden] { display: none; }
.lesson-head { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--divider); }
.lesson-head-row { display: flex; align-items: center; gap: 8px; }
.lesson-back { min-height: var(--ctl-h-sm); padding: 0 10px 0 6px; font-size: var(--fs-xs); }
.lesson-back .icon { width: 15px; height: 15px; }
.lesson-unit { flex: 1; min-width: 0; overflow: hidden; color: var(--text-3); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.lesson-title { margin: 0; font-size: var(--fs-xl); font-weight: 800; letter-spacing: .01em; outline: none; }
.lesson-goals { color: var(--text-2); font-size: var(--fs-xs); }
.lesson-goals summary { width: max-content; color: var(--text-3); font-weight: 700; cursor: pointer; }
.lesson-goals ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.7; }
.lesson-timeline .timeline-bar { gap: 4px; }
.lesson-timeline .timeline-track { flex: 1; min-width: 0; display: flex; gap: 3px; }
.lesson-timeline .timeline-chapter { flex: 1 1 0; min-width: 0; padding: 0 4px; overflow: hidden; font-size: var(--fs-2xs); text-overflow: ellipsis; white-space: nowrap; }
.lesson-timeline .timeline-chapter:disabled { opacity: .45; cursor: not-allowed; }
.lesson-timeline :is(.timeline-caption, .timeline-nav) { display: none; }   /* 上一步 / 下一步在卡片底部 */

.lesson-step { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.lesson-card { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.lesson-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lesson-kind { padding: 3px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .04em; }
.lesson-kind.kind-construct, .lesson-kind.kind-explore { background: var(--h-soft); color: var(--h-ink); }
.lesson-kind.kind-quiz { background: var(--v-soft); color: var(--v-ink); }
.lesson-kind.kind-recap { background: var(--ok-soft); color: var(--ok); }
.lesson-step-title { flex: 1 1 100%; margin: 0; font-size: var(--fs-lg); font-weight: 800; }
.lesson-done-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; color: var(--ok); font-size: var(--fs-2xs); font-weight: 800; }
.lesson-card-head .lesson-done-badge { order: -1; margin-left: 0; }
.lesson-done-badge .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.lesson-text { margin: 0; color: var(--text); font-size: var(--fs-sm); line-height: 1.85; }
.lesson-link {
  display: inline-flex; align-items: center; min-height: 22px; margin: 0 2px; padding: 0 6px;
  border: 1px solid var(--danger-line); border-radius: var(--r-xs); background: var(--danger-soft); color: var(--danger);
  font: italic 800 var(--fs-sm)/1 var(--font-serif); vertical-align: baseline; cursor: default;
}
.lesson-link:hover, .lesson-link:focus-visible, .lesson-link.linked { border-color: var(--danger); background: var(--danger); color: var(--text-on-accent); }
.lesson-link:disabled { border-color: var(--border); background: var(--surface-2); color: var(--text-2); }

.lesson-status { display: grid; grid-template-columns: 18px 1fr; gap: 2px 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-xs); line-height: 1.7; }
.lesson-status:empty { display: none; }
.lesson-status .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--text-3); }
.lesson-status b { font-size: var(--fs-sm); }
.lesson-status span { grid-column: 2; color: var(--text-2); }
.lesson-status[data-tone="ok"] { border-color: var(--ok-line); background: var(--ok-soft); }
.lesson-status[data-tone="ok"] :is(.icon, b) { color: var(--ok); }
.lesson-status[data-tone="bad"] { border-color: var(--danger-line); background: var(--danger-soft); }
.lesson-status[data-tone="bad"] :is(.icon, b) { color: var(--danger); }
.lesson-hints { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; counter-reset: hint; }
.lesson-hint { position: relative; padding: 8px 10px 8px 34px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn-ink); font-size: var(--fs-xs); line-height: 1.7; counter-increment: hint; }
.lesson-hint::before { position: absolute; top: 8px; left: 10px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--warn); color: var(--text-on-accent); font: 800 var(--fs-2xs)/1 var(--font-mono); content: counter(hint); }
.lesson-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lesson-actions .tool-button { min-height: var(--ctl-h); }

.lesson-quiz { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.lesson-question { margin-bottom: 4px; padding: 0; font-size: var(--fs-md); font-weight: 800; line-height: 1.6; }
.lesson-option {
  display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-size: var(--fs-sm); line-height: 1.55; text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lesson-option:hover:not(:disabled) { border-color: var(--accent-line); background: var(--accent-soft); }
.lesson-option-key { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); font: 800 var(--fs-xs)/1 var(--font-mono); }
.lesson-option.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.lesson-option.is-correct .lesson-option-key { background: var(--ok); color: var(--text-on-accent); }
.lesson-option.is-wrong { border-color: var(--danger); background: var(--danger-soft); }
.lesson-option.is-wrong .lesson-option-key { background: var(--danger); color: var(--text-on-accent); }
.lesson-option:disabled { cursor: default; }
.lesson-option:disabled:not(.is-correct) { opacity: .6; }
.lesson-feedback { margin: 0; padding: 10px 12px; border-radius: var(--r-md); font-size: var(--fs-xs); line-height: 1.75; }
.lesson-feedback b { margin-right: 4px; }
.lesson-feedback.is-ok { background: var(--ok-soft); color: var(--text); }
.lesson-feedback.is-ok b { color: var(--ok); }
.lesson-feedback.is-bad { background: var(--danger-soft); color: var(--text); }
.lesson-feedback.is-bad b { color: var(--danger); }
.lesson-skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lesson-skills li { padding: 4px 9px; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok); font-size: var(--fs-2xs); font-weight: 800; }
.lesson-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.lesson-stats div { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.lesson-stats dt { color: var(--text-3); font-size: var(--fs-2xs); }
.lesson-stats dd { margin: 2px 0 0; font: 800 var(--fs-lg)/1.2 var(--font-mono); }
.lesson-nav { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--divider); background: var(--surface); }
.lesson-nav .tool-button { min-height: var(--ctl-h); }
.lesson-nav .primary, .lesson-nav .lesson-map:only-of-type { margin-left: auto; }
.lesson-nav .lesson-next-lesson { min-width: 0; overflow: hidden; }
.lesson-nav .lesson-next-lesson span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-nav .lesson-map + .primary { margin-left: 0; }
.lesson-nav .lesson-map { margin-left: auto; }

/* 课程地图 */
.course-map { width: min(980px, calc(100vw - 32px)); }
.course-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 18px; padding: 4px 26px 26px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.course-continue { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; padding: 18px 20px; border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); }
.course-continue-text { min-width: 0; }
.course-kicker { color: var(--accent-ink); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; }
.course-continue h3 { margin: 4px 0 2px; font-size: var(--fs-xl); font-weight: 800; }
.course-continue p { margin: 0; color: var(--text-3); font-size: var(--fs-xs); }
.course-continue-button { min-height: 40px; padding: 0 18px; }
.course-meter { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; color: var(--text-3); font-size: var(--fs-2xs); }
.course-meter b { color: var(--text); font: 800 var(--fs-sm)/1 var(--font-mono); }
.course-meter-bar, .course-skill-bar { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.course-meter-bar::after, .course-skill-bar::after { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); border-radius: inherit; background: var(--ok); content: ""; }
.course-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; gap: 14px; }
.course-unit { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.course-unit.is-planned { border-style: dashed; background: var(--surface-2); }
.course-unit.is-planned :is(h3, p) { color: var(--text-3); }
.course-unit-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: start; }
.course-unit-no { grid-column: 1; color: var(--text-4); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .06em; }
.course-unit-title { grid-column: 1; }
.course-unit-title h3 { margin: 0; font-size: var(--fs-md); font-weight: 800; }
.course-unit-title p { margin: 2px 0 0; color: var(--text-3); font-size: var(--fs-2xs); line-height: 1.6; }
.course-unit-pct, .course-soon { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.course-unit-pct { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, var(--surface) 72%, transparent 73%), conic-gradient(var(--ok) calc(var(--pct) * 1%), var(--surface-3) 0); color: var(--text-2); font: 800 var(--fs-2xs)/1 var(--font-mono); }
.course-soon { padding: 3px 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-3); font-size: var(--fs-2xs); font-weight: 700; }
.course-lessons { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.course-lesson-button { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) 16px; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.course-lesson-button:hover { background: var(--surface-hover); }
.course-lesson-mark { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--border-strong); border-radius: 50%; color: var(--text-3); font: 800 var(--fs-2xs)/1 var(--font-mono); }
.course-lesson.is-active .course-lesson-mark { border-color: var(--accent); color: var(--accent-ink); }
.course-lesson.is-done .course-lesson-mark { border-color: var(--ok); background: var(--ok); color: var(--text-on-accent); }
.course-lesson-mark .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.course-lesson-body { display: flex; flex-direction: column; min-width: 0; }
.course-lesson-body b { overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.course-lesson-body small { color: var(--text-3); font-size: var(--fs-2xs); }
.course-lesson-go { width: 16px; height: 16px; color: var(--text-4); }
.course-mastery h3 { margin: 0 0 8px; font-size: var(--fs-md); font-weight: 800; }
.course-muted { margin: 0; color: var(--text-3); font-size: var(--fs-xs); }
.course-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.course-skill { display: grid; grid-template-columns: 7em 1fr 2.4em; align-items: center; gap: 8px; font-size: var(--fs-xs); }
.course-skill b { color: var(--text-2); font: 700 var(--fs-2xs)/1 var(--font-mono); text-align: right; }

/* 窄屏（iPad 竖放、手机）：叙事栏在上、舞台在下 */
@media (max-width: 860px) {
  .workspace.lesson-mode { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .workspace.lesson-mode .lesson-panel { grid-column: 1; grid-row: 1; max-height: none; }
  .workspace.lesson-mode .mobile-view-tabs { grid-row: 2; }
  .workspace.lesson-mode .view-grid { grid-column: 1; grid-row: 3; }
  .lesson-card { overflow: visible; }
  .course-body { padding: 4px 16px 18px; }
  .course-continue { grid-template-columns: 1fr; }
}
@media (max-height: 820px) and (min-width: 861px) {
  .lesson-head { gap: 6px; padding: 10px 12px 8px; }
  .lesson-title { font-size: var(--fs-lg); }
  .lesson-card { gap: 10px; padding: 12px 14px 14px; }
  .lesson-text { line-height: 1.75; }
}
@media (pointer: coarse) {
  .lesson-link { min-width: 32px; min-height: 32px; justify-content: center; }
  .lesson-back, .lesson-actions .tool-button, .lesson-nav .tool-button { min-height: 44px; }
  .lesson-goals summary { padding: 7px 0; }
}

/* 触屏（iPad、手机）：可点的控件至少 44px，滑块把手加大 */
@media (pointer: coarse) {
  .tool-button, .chip, .view-toggle, .unfold-play, .segmented > button, .view-mode-button, .dock-tab, .menu-item,
  .timeline-chapter, .mobile-view-tab, .plane-chip, .compound-params-toggle { min-height: 44px; }
  .proj-toggle, .timeline-nav, .icon-button, .row-delete, .replay-button, .canvas-nav-button, .tool-chip { min-width: 44px; min-height: 44px; }
  .cut-bar .chip, .brand { min-height: 44px; }
  .skip-link { min-height: 44px; }
  .dock-list li { min-height: 44px; }
  input[type="range"] { height: 44px; }
  input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; }
  input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; }
  input[type="number"], .plane-group input[type="number"], .coord-form input, .insp-edit, .name-cell, .coord-edit { min-height: 44px; }
  .coord-form button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .topbar, .dock, .coordinate-note, .space-sidebar, .coord-form, .flat-guide, .flat-guide-toggle, .toast-region { display: none !important; }
}