:root {
  --ink: #19283f;
  --ink-soft: #50627b;
  --muted: #8290a3;
  --paper: #eef1f4;
  --surface: #fbfcfd;
  --line: #d3dce5;
  --v: #317bb5;
  --h: #bd7a1d;
  --w: #2c8970;
  --purple: #7455d2;
  --amber: #c9841d;
  --danger: #ce4e64;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); }
button, input, output { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, canvas:focus-visible { outline: 3px solid rgba(116,85,210,.32); outline-offset: 2px; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 8px 11px; border-radius: 5px; background: var(--ink); color: white; transform: translateY(-150%); transition: transform .18s; }
.skip-link:focus { transform: translateY(0); }

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

.topbar { position: relative; z-index: 20; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(14px, 3vw, 46px); border-bottom: 1px solid var(--line); background: rgba(251,252,253,.94); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand > span:last-child, .brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: .04em; }
.brand small { margin-top: 2px; color: #64748b; font-size: 9px; letter-spacing: .1em; }
.brand-symbol { position: relative; width: 32px; height: 30px; flex: 0 0 32px; }
.brand-symbol i { position: absolute; width: 21px; height: 14px; border: 2px solid; }
.brand-symbol i:nth-child(1) { top: 0; left: 0; border-color: var(--v); background: #dcecf8; transform: skewY(-28deg); }
.brand-symbol i:nth-child(2) { top: 14px; left: 0; border-color: var(--h); background: #f7e2b6; transform: skewY(28deg); }
.brand-symbol i:nth-child(3) { top: 7px; left: 10px; border-color: var(--w); background: #cbe9df; transform: skewY(28deg); }

.topbar-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.tool-button { min-height: 32px; padding: 7px 11px; border: 1px solid #cbd5e1; border-radius: 6px; background: white; color: #42556c; font-size: 11px; line-height: 1; cursor: pointer; white-space: nowrap; }
.tool-button:hover:not(:disabled) { border-color: #bdb1e9; color: var(--purple); }
.tool-button:disabled { opacity: .38; cursor: default; }
a.tool-button { display: inline-flex; align-items: center; text-decoration: none; }
.tool-button.primary { border-color: var(--ink); background: var(--ink); color: white; }
.tool-button.primary span { margin-left: 3px; color: #bdb1e9; font-size: 13px; vertical-align: -1px; }
.tool-button.primary:hover:not(:disabled) { color: white; border-color: var(--ink); }
.tool-button.danger:hover:not(:disabled) { border-color: #e6adb8; color: var(--danger); }
.case-library-button { border-color: #c8bced; background: #f6f3ff; color: #5b42b4; font-weight: 700; }
.case-library-button:hover:not(:disabled) { border-color: #ad9ce4; background: #eeeafd; color: #4f369f; }
.tool-button[aria-pressed="true"] { border-color: #c8bced; background: #f6f3ff; color: #5b42b4; }
.tool-button[aria-pressed="true"]:hover:not(:disabled) { border-color: #bdb1e9; color: #5b42b4; }
.tool-separator { width: 1px; height: 16px; background: #d6dde6; }
.view-mode-group { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #d5dde6; border-radius: 7px; background: #f8fafc; }
.view-mode-label { padding: 0 4px 0 2px; color: #64748b; font-size: 10px; }
.view-mode-button { min-height: 26px; padding: 5px 7px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #64748b; font-size: 10px; cursor: pointer; }
.view-mode-button:hover { color: var(--purple); }
.view-mode-button[aria-pressed="true"] { border-color: #c8bced; background: #f6f3ff; color: #5b42b4; font-weight: 700; }
.save-status { color: #64748b; font-size: 10px; white-space: nowrap; }
.help-button { min-width: 32px; padding-right: 0; padding-left: 0; font-weight: 800; }

/* 下拉菜单（顶栏「文件」、3D「方向」）：展开 / 收起用 aria-expanded + hidden */
.menu { position: relative; display: inline-flex; }
.menu-caret { margin-left: 2px; color: #8290a3; font-size: 9px; }
.menu-button[aria-expanded="true"], .lock-menu-button[aria-expanded="true"] { border-color: #bdb1e9; color: var(--purple); }
.menu-pop { position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; min-width: 176px; display: flex; flex-direction: column; gap: 1px; padding: 5px; border: 1px solid #d2dbe4; border-radius: 8px; background: white; box-shadow: 0 14px 32px rgba(29,43,63,.16); }
.menu-pop[hidden] { display: none; }
.menu-item { min-height: 30px; padding: 7px 10px; border: 0; border-radius: 5px; background: transparent; color: #33455e; font-size: 11px; text-align: left; white-space: nowrap; cursor: pointer; }
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: #f1effa; color: #4f369f; outline: none; }
.menu-item:disabled { color: #aab3bf; cursor: default; }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover:not(:disabled) { background: #fdeef1; color: var(--danger); }
.menu-separator { height: 1px; margin: 3px 4px; background: #e4e9ef; }

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

.workspace { height: calc(100vh - 68px); display: grid; grid-template-rows: minmax(500px, 1fr) auto auto; gap: 10px; padding: 12px clamp(14px, 3vw, 46px) 10px; }
/* 高度保持确定值（画布 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 { min-height: 0; display: grid; grid-template-columns: minmax(0, var(--left-panel, 58fr)) 10px 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: 20%; bottom: 20%; left: 4px; width: 2px; border-radius: 2px; background: #d7dee8; content: ""; transition: background .16s, transform .16s; }
.view-divider:hover::after, .view-divider.is-dragging::after { background: var(--purple); transform: scaleY(1.08); }
.view-panel { min-width: 0; min-height: 0; display: grid; border: 1px solid #d2dbe4; border-radius: 11px; background: var(--surface); overflow: hidden; box-shadow: 0 10px 27px rgba(39,56,77,.08); }
.panel-3d { display: flex; flex-direction: column; }   /* 截平面条等可选行出现 / 隐藏时，画布自动占满剩余高度 */
.panel-3d > .canvas-wrap { flex: 1 1 0; }
.panel-2d { grid-template-rows: auto minmax(0, 1fr) auto; }

.panel-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #dfe5eb; background: rgba(255,255,255,.82); }
.panel-header > div { display: flex; align-items: center; gap: 9px; }
.panel-number { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid #ccd5df; border-radius: 5px; color: var(--purple); font-size: 11px; font-weight: 800; }
.panel-header h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 17px; font-weight: 500; }
.panel-header p { margin: 4px 0 0; color: #64748b; font-size: 10px; }
.panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.view-toggle { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid #d5dde6; border-radius: 6px; background: var(--surface); color: #526078; font-size: 10px; line-height: 1; cursor: pointer; white-space: nowrap; }
.view-toggle:hover { border-color: #bdb1e9; color: var(--purple); }
.view-toggle[aria-pressed="true"] { border-color: #c8bced; background: #f6f3ff; color: #5b42b4; }
.view-toggle-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #b6c0cc; }
.view-toggle[aria-pressed="true"] .view-toggle-dot { background: var(--purple); box-shadow: 0 0 0 3px #e9e4fb; }

/* 三面投影直线的三个独立开关：按下时用该投影面自己的颜色 */
.proj-group { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px 3px 7px; border: 1px solid #d5dde6; border-radius: 6px; background: var(--surface); }
.proj-caption { color: #77839a; font-size: 8px; letter-spacing: .07em; }
.proj-toggle { min-width: 21px; padding: 4px 5px; border: 1px solid #d9e1e9; border-radius: 5px; background: white; color: #97a2b0; font-size: 9px; font-weight: 800; line-height: 1; cursor: pointer; }
.proj-toggle:hover:not([aria-pressed="true"]) { border-color: #bdb1e9; color: var(--purple); }
.proj-toggle.v[aria-pressed="true"] { border-color: var(--v); background: #e3effa; color: #24618f; }
.proj-toggle.h[aria-pressed="true"] { border-color: var(--h); background: #fbf0da; color: #a66d16; }
.proj-toggle.w[aria-pressed="true"] { border-color: var(--w); background: #dff0eb; color: #226e5a; }

/* ---------- 作图工具条 ---------- */

.tool-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 8px; padding: 7px 14px; border-bottom: 1px solid #e5eaef; background: white; }
.tool-group { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.tool-bar > .tool-group + .tool-group { padding-left: 8px; border-left: 1px solid #e5eaef; }
.tool-chip { min-height: 30px; display: inline-flex; align-items: center; gap: 3px; padding: 5px 7px; border: 1px solid #d5dde6; border-radius: 6px; background: white; color: #42556c; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; }
.tool-chip kbd { min-width: 14px; margin: 0; padding: 1px 3px; border-bottom-width: 1px; color: #8290a3; font-size: 8px; }
.tool-chip:hover { border-color: #bdb1e9; color: var(--purple); }
.tool-chip.command { color: #253b59; }
.tool-chip[aria-pressed="true"] { border-color: var(--purple); background: #f1edff; color: #4f369f; box-shadow: inset 0 0 0 1px #d9d0f7; }
.tool-chip[aria-pressed="true"] kbd { border-color: #c8bced; background: white; color: #5b42b4; }
.lock-chip { min-width: 0; padding: 6px 7px; font-weight: 600; }
.lock-chip[aria-pressed="true"] { border-color: #aab6c5; background: #eef2f6; color: #33455e; }
.lock-chip.h[aria-pressed="true"], .plane-chip.h[aria-pressed="true"] { border-color: var(--h); background: #fbf0da; color: #8a5b12; }
.lock-chip.v[aria-pressed="true"], .plane-chip.v[aria-pressed="true"] { border-color: var(--v); background: #e3effa; color: #24618f; }
.lock-chip.w[aria-pressed="true"], .plane-chip.w[aria-pressed="true"] { border-color: var(--w); background: #dff0eb; color: #226e5a; }
/* 方向锁收进下拉：按钮本身随当前锁定方向着色 */
.lock-menu-button { display: inline-flex; align-items: center; gap: 1px; padding-right: 7px; padding-left: 7px; font-weight: 600; white-space: nowrap; }
.lock-menu-button[data-tone="free"] { color: #526078; }
.lock-menu-button[data-tone="h"] { border-color: var(--h); background: #fbf0da; color: #8a5b12; }
.lock-menu-button[data-tone="v"] { border-color: var(--v); background: #e3effa; color: #24618f; }
.lock-menu-button[data-tone="w"] { border-color: var(--w); background: #dff0eb; color: #226e5a; }
.lock-menu { right: 0; left: auto; min-width: 132px; }   /* 按钮在工具条最右：向左展开，不被面板的圆角裁切 */
.lock-menu .lock-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; }
.lock-menu .lock-chip kbd { margin: 0; font-size: 8px; }

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

.plane-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 14px; padding: 7px 14px; border-bottom: 1px solid #e5eaef; background: #f6f8fa; }

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

.cut-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 6px 14px; border-bottom: 1px solid #f1d6c8; background: #fff6f1; color: #7a3a16; font-size: 10px; }
.cut-bar[hidden] { display: none; }
.cut-caption { white-space: nowrap; }
.cut-caption b { color: #d9480f; font-size: 11px; }
.cut-field { flex: 1 1 150px; min-width: 140px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cut-field input[type="range"] { flex: 1 1 auto; min-width: 70px; accent-color: #d9480f; }
.cut-field output { min-width: 30px; color: #7a3a16; font-family: "JetBrains Mono", Menlo, monospace; font-weight: 700; text-align: right; }
.cut-info { color: #9a4a1c; font-weight: 700; white-space: nowrap; }
.cut-bar .chip { min-height: 26px; padding: 4px 9px; }
.plane-group { display: flex; align-items: center; gap: 5px; }
.plane-caption { color: #64748b; font-size: 10px; letter-spacing: .05em; }
.chip { min-width: 34px; min-height: 30px; padding: 6px 9px; border: 1px solid #d5dde6; border-radius: 6px; background: white; color: #526078; font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer; }
.chip:hover { border-color: #bdb1e9; color: var(--purple); }
.chip[aria-pressed="true"] { border-color: var(--amber); background: #fdf3e2; color: #8a5b12; }
.plane-equation { margin-left: 3px; padding: 6px 8px; border-radius: 5px; background: #fdf3e2; color: #8a5b12; font-family: "JetBrains Mono", Menlo, monospace; font-size: 10px; }
.plane-level { flex: 1 1 190px; min-width: 160px; }
.plane-level label { color: #64748b; font-size: 10px; white-space: nowrap; }
.plane-level input[type="range"] { flex: 1 1 auto; min-width: 90px; accent-color: var(--amber); }
.plane-level input[type="number"] { width: 56px; min-height: 30px; padding: 5px 6px; border: 1px solid #d5dde6; border-radius: 5px; background: white; color: #42556c; font-family: "JetBrains Mono", Menlo, monospace; font-size: 10px; text-align: center; }

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

.canvas-wrap { min-height: 0; position: relative; background-color: #f8fafb; }
/* 3D 侧不再铺背景网格：13 万个虚拟格点自己就是空间参照，铺网格会互相干扰 */
.panel-3d .canvas-wrap { background-color: #fdfefe; }
/* 桌面端画布跟随网格行高，不设最小高度，避免矮屏时画布溢出压住页脚；移动端在媒体查询里单独给最小高度 */
.canvas-wrap { overflow: hidden; }
.canvas-wrap canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; touch-action: none; }
.panel-3d .canvas-wrap canvas { cursor: crosshair; }
.panel-2d .canvas-wrap { background: var(--surface); }
.panel-2d .canvas-wrap canvas { cursor: crosshair; }
.canvas-corner { position: absolute; z-index: 2; left: 12px; bottom: 10px; display: flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 5px; background: rgba(255,255,255,.82); color: #7d8896; font-size: 7px; letter-spacing: .05em; }
.canvas-corner i { width: 1px; height: 10px; background: #cfd6df; }
.canvas-corner .mono { color: #4d5a6d; font-family: "JetBrains Mono", Menlo, monospace; font-size: 8px; }
.canvas-status, .flat-guide { position: absolute; z-index: 2; top: 12px; left: 12px; max-width: min(430px, calc(100% - 24px)); padding: 8px 10px; border: 1px solid rgba(190, 199, 211, .9); border-radius: 6px; background: rgba(255,255,255,.92); box-shadow: 0 5px 14px rgba(39,56,77,.10); color: #42556c; font-size: 11px; line-height: 1.45; pointer-events: none; }
.canvas-status { display: flex; flex-direction: column; gap: 3px; }
.status-step { align-self: flex-start; padding: 2px 5px; border-radius: 4px; background: #f1edff; color: #5b42b4; font-size: 10px; font-weight: 700; }
.status-prompt { color: #33455e; }
.status-note { color: #8a5b12; font-size: 10px; }
.status-note:empty { display: none; }
.flat-guide { display: flex; align-items: flex-start; gap: 8px; }
.flat-guide[hidden] { display: none; }
.flat-guide-step { flex: 0 0 auto; padding: 2px 5px; border-radius: 4px; background: #fdf3e2; color: #8a5b12; font-size: 10px; font-weight: 700; white-space: nowrap; }
.flat-guide-toggle { position: absolute; z-index: 3; top: 12px; right: 12px; }
.canvas-navigation { position: absolute; z-index: 3; top: 12px; right: 12px; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid rgba(190, 199, 211, .9); border-radius: 7px; background: rgba(255,255,255,.92); box-shadow: 0 5px 14px rgba(39,56,77,.10); }
.canvas-nav-button { min-width: 28px; min-height: 28px; padding: 4px 7px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #42556c; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; }
.canvas-nav-button:hover { background: #f1effa; color: #5b42b4; }
.canvas-nav-reset { min-width: 40px; font-size: 10px; }
.nav-separator { width: 1px; height: 18px; margin: 0 2px; background: #d6dde6; }
.space-navigation .chrome-toggle { min-height: 28px; border-color: transparent; background: transparent; }
.space-navigation .chrome-toggle[aria-pressed="true"] { border-color: #c8bced; background: #f6f3ff; }
.flat-reset { position: absolute; z-index: 3; top: 50px; right: 12px; font-variant-numeric: tabular-nums; box-shadow: 0 5px 14px rgba(39,56,77,.10); }
.flat-reset[hidden] { display: none; }

/* 3D 卡片按宽度自适应：面板变窄时，导航挪到右下角输入框上方，给左上角的步骤引导让出宽度 */
.panel-3d .canvas-wrap { container-type: inline-size; }
.panel-3d .canvas-status { max-width: min(430px, calc(100% - 300px)); }
@container (max-width: 640px) {
  .panel-3d .canvas-status { max-width: calc(100% - 24px); }
  .space-navigation { top: auto; bottom: 50px; }
}

/* ---------- 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-navigation { top: 12px; bottom: auto; }
.coord-form { position: absolute; z-index: 3; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 4px; padding: 3px 3px 3px 8px; border: 1px solid rgba(190, 199, 211, .9); border-radius: 6px; background: rgba(255,255,255,.94); box-shadow: 0 5px 14px rgba(39,56,77,.10); }
.coord-form label { color: #64748b; font-size: 10px; white-space: nowrap; }
.coord-form input { width: min(210px, 34vw); min-height: 26px; padding: 4px 6px; border: 1px solid #d5dde6; border-radius: 4px; background: white; color: var(--ink); font-family: "JetBrains Mono", Menlo, monospace; font-size: 11px; }
.coord-form input::placeholder { color: #a4aebb; }
.coord-form input:focus { border-color: var(--purple); outline: none; box-shadow: 0 0 0 3px #e9e4fb; }
.coord-form button { min-width: 26px; min-height: 26px; padding: 0; border: 1px solid #d5dde6; border-radius: 4px; background: #f8fafc; color: #42556c; font-size: 12px; cursor: pointer; }
.coord-form button:hover { border-color: #bdb1e9; color: var(--purple); }
/* ---------- 作图回放条 ---------- */

.view-grid { position: relative; }
.replay-bar { position: absolute; z-index: 8; left: 50%; bottom: 52px; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 24px); padding: 5px; border-radius: 10px; background: rgba(25,40,63,.94); box-shadow: 0 12px 30px rgba(25,40,63,.28); color: white; transform: translateX(-50%); }
.replay-bar[hidden] { display: none; }
.replay-button { min-width: 32px; min-height: 30px; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #dfe6ef; font-size: 12px; line-height: 1; white-space: nowrap; cursor: pointer; }
.replay-button:hover:not(:disabled) { background: rgba(255,255,255,.12); color: white; }
.replay-button:disabled { opacity: .35; cursor: default; }
.replay-play[aria-pressed="true"] { border-color: rgba(189,177,233,.6); background: rgba(116,85,210,.35); color: white; }
.replay-exit { margin-left: 4px; border-color: rgba(255,255,255,.2); font-size: 11px; }
.replay-caption { min-width: 180px; max-width: 420px; padding: 0 8px; overflow: hidden; color: white; font-size: 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.replay-caption b { color: #cfc4f5; 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; }
#replayButton[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: white; }

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

body.presenting :is(.topbar, .dock, .coordinate-note, .mobile-view-tabs, .space-navigation) { 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: 46px; padding-top: 6px; padding-bottom: 6px; }
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: 34px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; background: rgba(25,40,63,.86); color: white; font-size: 12px; cursor: pointer; box-shadow: 0 8px 22px rgba(25,40,63,.22); }
.exit-present:hover { background: var(--ink); }
.exit-present kbd { border-color: rgba(255,255,255,.3); background: transparent; color: #dfe6ef; }
.exit-present[hidden] { display: none; }

.name-editor { position: absolute; z-index: 5; width: 62px; padding: 4px 6px; border: 1px solid var(--purple); border-radius: 5px; background: white; color: var(--ink); font-size: 11px; font-weight: 700; text-align: center; text-transform: uppercase; box-shadow: 0 4px 12px rgba(39,56,77,.18); }

.panel-footer { min-height: 38px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 6px 14px; border-top: 1px solid #dfe5eb; color: #64748b; font-size: 10px; }
.panel-footer b { color: #526078; font-weight: 700; }
.swatch { display: inline-block; width: 16px; border-top: 3px solid; }
.swatch.purple { border-color: var(--purple); }
.swatch.amber { border-color: var(--amber); }
.dot-legend { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4a5a70; }
.dot-legend.virtual { opacity: .3; }
.dot-legend.hovered { opacity: .6; background: var(--purple); }
.dot-legend.solid { opacity: 1; background: var(--purple); }
.footer-separator { width: 1px; height: 12px; margin: 0 1px; background: #d6dde6; }
.rule-chip { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; background: var(--v); color: white; font-size: 8px; font-weight: 800; }
.rule-chip.h { margin-left: 2px; background: var(--h); }
.rule-chip.w { margin-left: 2px; 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: 16px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.93); box-shadow: 0 7px 19px rgba(41,57,78,.06); }
.dock-column { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dock-column + .dock-column { padding-left: 14px; border-left: 1px solid #e4e9ef; }
.dock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dock-head h3 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 15px; font-weight: 500; }
.dock-count { color: #64748b; font-size: 10px; }
.dock-count b { color: var(--purple); font-size: 12px; }
.dock-list { margin: 0; padding: 0; list-style: none; max-height: 132px; overflow-y: auto; }
.dock-list li { display: grid; grid-template-columns: 46px 1fr 22px; align-items: center; gap: 7px; padding: 3px 4px; border-radius: 5px; cursor: pointer; }
.dock-list li:hover { background: #f3f5f8; }
.dock-list li.active { background: #fdeef1; box-shadow: inset 0 0 0 1px #f0c3cc; }
.dock-list li.tail { box-shadow: inset 0 0 0 1px #ecc38a; }
.dock-list li.empty { display: block; padding: 7px 4px; color: #64748b; font-size: 10px; line-height: 1.6; cursor: default; }
.dock-list li.empty:hover { background: none; }
.name-cell { width: 100%; padding: 3px 4px; border: 1px solid transparent; border-radius: 4px; background: #f0f2f6; color: var(--ink); font-size: 10px; font-weight: 800; text-align: center; text-transform: uppercase; }
.name-cell:hover { border-color: #cdd5e0; background: white; }
.coord-cell { color: #64748b; font-family: "JetBrains Mono", Menlo, monospace; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segment-cell { color: #42556c; font-size: 11px; font-weight: 700; }
.dock-list li { grid-template-columns: 46px 1fr 22px; }
#segmentList li:not(.empty) { grid-template-columns: 74px 1fr 22px; }
.dock-list li.broken .coord-cell { color: var(--danger); }
.coord-edit { width: 100%; padding: 3px 4px; border: 1px solid transparent; border-radius: 4px; background: transparent; }
.coord-edit:hover { border-color: #cdd5e0; background: white; }
.coord-edit:focus { border-color: var(--purple); background: white; color: var(--ink); outline: none; }
.def-cell { width: 100%; padding: 3px 4px; border: 1px dashed #d9d0f7; border-radius: 4px; background: #f8f6ff; color: #5b42b4; text-align: left; cursor: pointer; }
.def-cell:hover { border-color: var(--purple); }
.relation-list li.relation-item { display: block; padding: 4px 6px 4px 9px; border-left: 3px solid #cbd5e1; border-radius: 0 5px 5px 0; color: #42556c; font-size: 11px; line-height: 1.4; }
.relation-item.relation-parallel { border-left-color: var(--v); }
.relation-item.relation-intersect { border-left-color: var(--amber); }
.relation-item.relation-skew { border-left-color: var(--danger); }
.relation-item.relation-on { border-left-color: var(--purple); }
.inspector:empty { display: none; }
.inspector { padding: 7px 9px; border-radius: 6px; background: #f6f8fa; font-size: 10px; line-height: 1.55; }
.inspector p { margin: 0; }
.inspector-title { color: var(--ink); font-size: 11px; font-weight: 700; }
.inspector-line { color: #42556c; font-family: "JetBrains Mono", Menlo, monospace; }
.inspector-rule { margin-top: 2px !important; color: #5b42b4; }
.inspector-hint { color: #64748b; }
.row-delete { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; color: #a4aebb; font-size: 9px; cursor: pointer; }
.row-delete:hover { border-color: #e6adb8; background: #fdeef1; color: var(--danger); }

.dock-help { gap: 7px; }
.status-message { margin: 0; min-height: 17px; color: #5b42b4; font-size: 10px; line-height: 1.5; }
.shortcut-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.shortcut-list li { color: #64748b; font-size: 10px; line-height: 1.5; }
.dock-help-hint { margin: 0; color: #64748b; font-size: 10px; line-height: 1.8; }
.dock-help-button { align-self: flex-start; }
.dock-help-button kbd { margin: 0 0 0 4px; }

.shortcut-help { width: min(760px, calc(100vw - 32px)); }
.shortcut-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; padding: 18px 24px 24px; }
.shortcut-groups h3 { margin: 0 0 9px; color: #253b59; font-family: Georgia, "Songti SC", serif; font-size: 15px; font-weight: 500; }
.shortcut-help .shortcut-list { grid-template-columns: 1fr; gap: 7px; }
.shortcut-help .shortcut-list li { color: #42556c; font-size: 12px; }
kbd { display: inline-block; min-width: 18px; margin-right: 2px; padding: 2px 4px; border: 1px solid #d6dde6; border-bottom-width: 2px; border-radius: 3px; background: #f7f9fb; color: #42556c; font-family: "JetBrains Mono", Menlo, monospace; font-size: 9px; text-align: center; }

.coordinate-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #8893a2; font-size: 7px; }
.coordinate-note > span:first-child { color: #6c7b90; font-weight: 700; letter-spacing: .09em; }
.coordinate-note i { width: 14px; height: 1px; background: #cbd3dd; }
.coordinate-note b { color: #647287; font-weight: 700; }
.coordinate-result { margin-left: auto; color: var(--purple); font-weight: 700; }

/* ---------- 自学案例库 ---------- */

.case-library { width: min(880px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 32px)); padding: 0; border: 1px solid #cbd5e1; border-radius: 14px; background: #fbfcfd; color: var(--ink); box-shadow: 0 24px 68px rgba(29, 43, 63, .28); }
.case-library::backdrop { background: rgba(25, 40, 63, .38); backdrop-filter: blur(2px); }
.case-library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid #dfe5eb; }
.case-kicker { display: block; margin-bottom: 5px; color: var(--purple); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.case-library h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 23px; font-weight: 500; }
.case-library-head p { max-width: 620px; margin: 7px 0 0; color: #64748b; font-size: 12px; line-height: 1.6; }
.case-close { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #d5dde6; border-radius: 6px; background: white; color: #64748b; font-size: 21px; line-height: 1; cursor: pointer; }
.case-close:hover { border-color: #c8bced; color: var(--purple); }
.case-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 17px 24px; }
.case-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 8px 0 0; color: #5b42b4; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.case-group:first-child { margin-top: 0; }
.case-group::after { flex: 1; height: 1px; background: #e4e9ef; content: ""; }
.case-card { min-height: 136px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 15px; border: 1px solid #d9e1e9; border-radius: 9px; background: white; text-align: left; cursor: pointer; transition: border-color .16s, box-shadow .16s, transform .16s; }
.case-card:hover, .case-card:focus-visible { border-color: #bdb1e9; box-shadow: 0 8px 19px rgba(85, 66, 180, .12); transform: translateY(-1px); outline: none; }
.case-card-kind { padding: 3px 6px; border-radius: 4px; background: #eeeafd; color: #5b42b4; font-size: 9px; font-weight: 800; letter-spacing: .05em; }
.case-card h3 { margin: 1px 0 0; color: #253b59; font-family: Georgia, "Songti SC", serif; font-size: 17px; font-weight: 500; }
.case-card p { margin: 0; color: #64748b; font-size: 11px; line-height: 1.55; }
.case-card .case-action { margin-top: auto; color: #5b42b4; font-size: 10px; font-weight: 800; }
.case-library-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 24px 17px; border-top: 1px solid #e3e8ee; color: #64748b; font-size: 11px; line-height: 1.5; }

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

@media (max-width: 1050px) {
  .brand small { display: none; }
  .plane-bar, .tool-bar { gap: 6px 8px; }
  .save-status { display: none; }
}
@media (max-width: 860px) {
  .topbar { height: auto; min-height: 0; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px; }
  .topbar-actions { justify-content: flex-start; }
  .tool-separator { display: none; }
  .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: 6px; }
  .mobile-view-tab { min-height: 38px; border: 1px solid #d5dde6; border-radius: 7px; background: var(--surface); color: #526078; font-size: 12px; font-weight: 700; cursor: pointer; }
  .mobile-view-tab[aria-selected="true"] { border-color: #c8bced; background: #f6f3ff; color: #5b42b4; }
  .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% 才有依据（否则会回退到位图尺寸） */
  .panel-3d > .canvas-wrap { flex: 0 0 auto; height: clamp(350px, 62vh, 560px); }
  .dock { grid-template-columns: 1fr; }
  .dock-column + .dock-column { padding-left: 0; border-left: 0; padding-top: 9px; border-top: 1px solid #e4e9ef; }
  .dock-list { max-height: 150px; }
  .coordinate-result { width: 100%; margin-left: 0; }
}
@media (max-width: 520px) {
  .topbar { padding: 10px 12px; }
  .workspace { padding: 10px 12px 18px; }
  .panel-header { flex-wrap: wrap; }
  .panel-header h2 { font-size: 14px; }
  .plane-level { flex-basis: 100%; }
  .tool-bar, .plane-bar { padding: 7px 10px; }
  .coord-form { left: 12px; bottom: 40px; }
  .coord-form input { width: 100%; flex: 1 1 auto; }
  .view-panel { min-height: 430px; }
  .canvas-wrap canvas { min-height: 310px; }
  .panel-3d > .canvas-wrap { height: clamp(310px, 58vh, 520px); }
  .shortcut-groups { grid-template-columns: 1fr; padding: 13px 16px 18px; }
  .case-library { width: calc(100vw - 20px); }
  .space-navigation { bottom: 82px; }
  .replay-bar { left: 8px; right: 8px; bottom: 12px; flex-wrap: wrap; justify-content: center; transform: none; }
  .replay-caption { order: -1; width: 100%; min-width: 0; max-width: none; padding: 3px 4px; }
  .case-library-head, .case-library-foot { padding-right: 16px; padding-left: 16px; }
  .case-list { grid-template-columns: 1fr; padding: 13px 16px; }
  .case-library-foot { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }