/* figure-lab.20261012.css — 「图形推理 · 立体图形」模块样式
   只使用应用已有的设计 token（--blue / --ink / --line / --soft / --surface / --muted / --ease）。 */

.fl-page { --fl-accent: var(--blue); }
.fl-page .section-toolbar { align-items: flex-end; }

/* ---------- 分段控件 ---------- */
.fl-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--soft); }
.fl-seg button {
  height: 32px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent;
  color: var(--muted); font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.fl-seg button:hover { color: var(--ink); }
.fl-seg button.active { background: var(--surface); color: var(--blue); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.fl-seg-wrap { flex-wrap: wrap; justify-content: flex-start; }
.fl-seg-tabs { flex: none; }

/* ---------- 卡片与栅格 ---------- */
.fl-grid { display: grid; gap: 18px; margin-top: 20px; }
.fl-grid-explore, .fl-grid-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fl-card {
  min-width: 0; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); box-shadow: 0 1px 0 rgba(0, 0, 0, .015);
}
.fl-card-wide { grid-column: 1 / -1; }
.fl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.fl-card-head h2 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.fl-card-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.fl-card-head-sub { margin-top: 16px; }
.fl-hint { color: var(--muted); font-size: 12px; }
.fl-inline { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- 按钮 ---------- */
.fl-btn {
  height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink); font-size: 13px; cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.fl-btn:hover { border-color: #cfd4dc; }
.fl-btn:active { transform: scale(.98); }
.fl-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.fl-btn[disabled] { opacity: .45; cursor: not-allowed; }
.fl-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; cursor: pointer; }

/* ---------- 展开图 / 立体图 SVG ---------- */
.fl-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; }
.fl-svg-net { max-width: 380px; margin: 0 auto; }
.fl-svg-cube { max-width: 300px; margin: 0 auto; }
.fl-svg-face { max-width: 132px; margin: 0 auto; }
.fl-svg-fold { max-width: 430px; margin: 0 auto; cursor: grab; touch-action: none; }
.fl-svg-solid { max-width: 430px; margin: 0 auto; cursor: grab; touch-action: none; }
.fl-svg-flat { max-width: 280px; margin: 0 auto; }
.is-dragging, .is-dragging .fl-svg { cursor: grabbing; }
.fl-glyph { fill: var(--ink); stroke: none; }
.fl-net-cell { cursor: pointer; }
.fl-net-cell rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; transition: fill .2s var(--ease), stroke .2s var(--ease); }
.fl-net-cell:hover rect { stroke: var(--blue); }
.fl-net-cell.is-on rect { fill: #f0f6ff; stroke: #b9d4f5; }
.fl-net-cell.is-on .fl-glyph { fill: var(--blue); }
.fl-net-cell.is-focus rect { fill: #fff7e8; stroke: var(--orange); stroke-width: 2.5; }
.fl-face polygon { fill: #f4f6fa; stroke: #c9ced8; stroke-width: 1.3; }
.fl-3d-face polygon { fill: rgba(244, 246, 250, .96); stroke: #c9ced8; stroke-width: 1.3; }
.fl-3d-face.is-back polygon { fill: rgba(244, 246, 250, .35); stroke-dasharray: 4 4; }
.fl-3d-face.is-focus polygon { fill: #fff3e0; stroke: var(--orange); stroke-width: 2.2; }
.fl-solid-face { fill: #d7e2f2; stroke: none; }
.fl-solid-face.is-front { fill: #c9d8ee; }
.fl-solid-edge { stroke: #7c8794; stroke-width: 1.3; }
.fl-solid-edge.is-behind { stroke: #c3c9d2; stroke-dasharray: 3 3; }
.fl-solid-line { fill: none; stroke: #6b7480; stroke-width: 1.4; }
.fl-solid-line.is-thin { stroke: #b3bac5; stroke-width: 1; }
.fl-cut-plane { fill: rgba(10, 132, 255, .1); stroke: var(--blue); stroke-width: 1.2; stroke-dasharray: 6 5; }
.fl-section-poly { fill: rgba(255, 149, 0, .38); stroke: #d97a00; stroke-width: 2; }
.fl-flat-poly { fill: rgba(255, 149, 0, .3); stroke: #d97a00; stroke-width: 2; }
.fl-svg-hint { fill: var(--muted); font-size: 11px; }
.fl-svg-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 24px 0; }

/* ---------- 折叠进度 / 切面控制 ---------- */
.fl-slider-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 62px; align-items: center; gap: 12px; margin-top: 10px; color: var(--muted); font-size: 12.5px; }
.fl-slider-row input[type="range"] { width: 100%; accent-color: var(--blue); height: 26px; cursor: ew-resize; }
.fl-slider-row b { color: var(--ink); font-weight: 600; font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.fl-plane { padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.fl-plane .fl-slider-row:first-child { margin-top: 0; }
.fl-plane-quick { margin-top: 12px; flex-wrap: wrap; }
.fl-viewbox { user-select: none; -webkit-user-select: none; }
.fl-netpick { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.fl-netpick label { font-weight: 600; color: var(--ink); }
.fl-netpick select {
  height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); font-size: 13px; cursor: pointer;
}
.fl-netpick select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.fl-views { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: flex-start; }
.fl-foldsolid { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.fl-foldsolid label { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.fl-tetra-face { fill: #dbe4f2; stroke: #7c8794; stroke-width: 1.1; }
.fl-prism-face { fill: #dbe4f2; stroke: #7c8794; stroke-width: 1.1; }
.fl-face.is-front .fl-prism-face { fill: #cfdcf0; }
.fl-face.is-back .fl-prism-face { fill: #eef2f8; stroke: #c3c9d2; }
.fl-svg-prism-opt { max-width: 150px; margin: 0 auto; }
.fl-svg-prism, .fl-svg-net.is-prism { max-width: 300px; margin: 0 auto; }
.fl-face.is-front .fl-tetra-face { fill: #cfdcf0; }
.fl-face.is-back .fl-tetra-face { fill: #eef2f8; stroke: #c3c9d2; }
.fl-svg-tetra-opt { max-width: 150px; margin: 0 auto; }
.fl-svg-tetra, .fl-svg-net.is-tetra { max-width: 260px; margin: 0 auto; }
.fl-view-item { margin: 0; text-align: center; }
.fl-view-item figcaption { margin-top: 2px; color: var(--muted); font-size: 12px; }

/* ---------- 相对面列表 ---------- */
.fl-pair { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid #f0f0f2; font-size: 13px; flex-wrap: wrap; }
.fl-pair:last-of-type { border-bottom: 0; }
.fl-pair small { color: var(--muted); font-size: 12px; }
.fl-pair-rel { color: var(--muted); font-size: 12px; }
.fl-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.fl-focus-note { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--soft); font-size: 13px; }
.fl-note { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; }

/* ---------- 练习 ---------- */
.fl-practice { margin-top: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fl-practice-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fl-score { color: var(--muted); font-size: 12px; }
.fl-stem { margin: 16px 0 14px; font-size: 14.5px; line-height: 1.75; }
.fl-qgrid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start; }
.fl-qstem-svg { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.fl-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fl-options-text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fl-opt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface);
  cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.fl-opt:hover { border-color: #b9d4f5; }
.fl-opt:active { transform: scale(.99); }
.fl-opt.is-picked { border-color: var(--blue); background: #f4f9ff; }
.fl-opt.is-right { border-color: var(--green); background: #f1faf5; }
.fl-opt.is-wrong { border-color: var(--red); background: #fdf3f3; }
.fl-opt-label {
  position: absolute; top: 8px; left: 10px; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 600;
}
.fl-opt.is-picked .fl-opt-label { background: var(--blue); color: #fff; }
.fl-opt.is-right .fl-opt-label { background: var(--green); color: #fff; }
.fl-opt.is-wrong .fl-opt-label { background: var(--red); color: #fff; }
.fl-opt-copy { font-size: 14px; line-height: 1.6; text-align: center; }
.fl-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }

/* ---------- 解析 ---------- */
.fl-explain { margin-top: 18px; padding: 16px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--soft); }
.fl-explain.is-ok { border-color: #bfe3d0; background: #f3fbf7; }
.fl-explain.is-bad { border-color: #f0caca; background: #fdf6f6; }
.fl-explain-head { font-size: 14px; font-weight: 650; margin-bottom: 10px; }
.fl-explain.is-ok .fl-explain-head { color: #1d7a51; }
.fl-explain.is-bad .fl-explain-head { color: #a63a3a; }
.fl-explain-block { margin-top: 12px; }
.fl-explain-block h3 { margin: 0 0 6px; font-size: 13px; font-weight: 650; color: var(--ink); }
.fl-explain-block ul { margin: 0; padding-left: 18px; }
.fl-explain-block li { font-size: 13px; line-height: 1.8; color: #3c3c43; }
.fl-explain-block p { margin: 0; font-size: 13px; line-height: 1.8; color: #3c3c43; }

/* ---------- 结论清单 ---------- */
.fl-facts { margin: 0; padding-left: 18px; }
.fl-facts li { font-size: 13px; line-height: 1.75; color: #3c3c43; margin-bottom: 8px; }
.fl-facts li b { color: var(--ink); margin-right: 6px; }
.fl-facts li span { color: var(--muted); }
.fl-facts.is-impossible li b { color: var(--red); }
.fl-facts.is-evidence { list-style: none; padding-left: 0; margin: 0; }
.fl-facts.is-evidence li { padding: 7px 0; border-bottom: 1px solid #f0f0f2; }
.fl-facts.is-evidence li:last-child { border-bottom: 0; }

/* ---------- 截面结果 ---------- */
.fl-viewpair { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 18px; align-items: center; }
.fl-viewbox { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); min-width: 0; }
.fl-viewbox-title { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.fl-viewbox-flat { display: flex; flex-direction: column; }
.fl-shape-result { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: var(--soft); }
.fl-shape-label { color: var(--muted); font-size: 12px; margin-right: 10px; }
.fl-shape-name { font-size: 20px; color: var(--blue); letter-spacing: -.01em; }
.fl-empty h2 { margin: 0 0 8px; font-size: 15px; }

/* ---------- 深色主题 ---------- */
[data-theme="dark"] .fl-card,
[data-theme="dark"] .fl-practice,
[data-theme="dark"] .fl-opt { background: #17171a; border-color: #2c2c30; }
[data-theme="dark"] .fl-seg { background: #232327; }
[data-theme="dark"] .fl-seg button.active { background: #2f2f34; }
[data-theme="dark"] .fl-glyph { fill: #f2f2f5; }
[data-theme="dark"] .fl-face polygon,
[data-theme="dark"] .fl-3d-face polygon { fill: rgba(48, 48, 54, .96); stroke: #4a4a52; }
[data-theme="dark"] .fl-net-cell rect { fill: #1d1d21; stroke: #34343a; }
[data-theme="dark"] .fl-viewbox,
[data-theme="dark"] .fl-qstem-svg,
[data-theme="dark"] .fl-flat-poly { background: #1d1d21; }
[data-theme="dark"] .fl-explain-block li,
[data-theme="dark"] .fl-explain-block p,
[data-theme="dark"] .fl-facts li { color: #d7d7dc; }
[data-theme="dark"] .fl-explain.is-ok { background: #14261d; }
[data-theme="dark"] .fl-explain.is-bad { background: #2a1a1a; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .fl-grid-explore, .fl-grid-section { grid-template-columns: minmax(0, 1fr); }
  .fl-qgrid { grid-template-columns: minmax(0, 1fr); }
  .fl-viewpair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .fl-card { padding: 16px 14px; }
  .fl-practice { padding: 16px 14px; }
  .fl-options, .fl-options-text { grid-template-columns: minmax(0, 1fr); }
  .fl-section-toolbar { align-items: flex-start; }
  /* 页签占满一行；立体/切法这类多按钮组改成换行，避免文字被压扁 */
  .fl-seg-tabs { width: 100%; overflow-x: auto; }
  .fl-seg-tabs button { flex: 1; }
  .fl-slider-row { grid-template-columns: 82px minmax(0, 1fr) 56px; }
  .fl-plane-quick .fl-btn { flex: 1 1 46%; }
  .fl-seg-wrap { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; }
  .fl-seg-wrap button { flex: 1 1 46%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .fl-page .section-toolbar { display: block; }
  .fl-page .section-toolbar .fl-seg-tabs { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-btn, .fl-opt, .fl-seg button, .fl-net-cell rect { transition: none; }
}

.fl-flat-label { fill: var(--muted); font-size: 10px; text-anchor: middle; dominant-baseline: middle; font-variant-numeric: tabular-nums; }

/* 凹形（组合）立体的截面可以断成多块：真实形状面板里的块数提示 */
.fl-flat-hint{fill:var(--fl-muted,#8a8f98);font-size:11px}