/* 互动组件样式（类名统一 wg- 前缀） */
.wg { font-family: var(--sans, sans-serif); font-size: 14px; line-height: 1.5; color: #1f2430; padding: 12px 14px 14px; }
.wg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.wg-title { font-weight: 700; color: #0b336e; font-size: 15px; }
.wg-hint { color: #6a7385; font-size: 12.5px; }
.wg-board { width: 100%; border: 1px solid #e3e7ee; border-radius: 4px; background: #fff; }
.wg-board .JXGtext { font-family: var(--sans, sans-serif); }
.wg-controls { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 10px 0 4px; }
.wg-slider { display: flex; align-items: center; gap: 8px; flex: 1 1 230px; min-width: 0; }
.wg-sl-name { white-space: nowrap; color: #0b336e; font-weight: 600; }
.wg-slider input[type=range] { flex: 1; min-width: 80px; accent-color: #0b336e; }
.wg-sl-val { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; color: #333; }
.wg-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid #cbd8ea; border-radius: 16px; overflow: hidden; }
.wg-seg button { font: inherit; font-size: 13px; border: 0; background: #edf3fa; color: #0b336e; padding: 3px 12px; cursor: pointer; }
.wg-seg button + button { border-left: 1px solid #cbd8ea; }
.wg-seg button.on { background: #0b336e; color: #fff; }
.wg-btn { font: inherit; font-size: 13px; border: 1px solid #cbd8ea; background: #fff; color: #0b336e; border-radius: 16px;
  padding: 3px 14px; cursor: pointer; }
.wg-btn:hover { background: #edf3fa; }
.wg-btn.primary { background: #0b336e; color: #fff; border-color: #0b336e; }
.wg-readout { background: #f4f6f9; border-radius: 4px; padding: 8px 12px; margin-top: 8px; overflow-x: auto; }
.wg-readout .katex { font-size: 1.05em; }
.wg-readout .row { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
.wg-good { color: #2e8b57; font-weight: 700; }
.wg-bad { color: #c8412f; font-weight: 700; }
.wg-gold { background: #fdf3dc; box-shadow: inset 3px 0 0 #e3a535; }
.wg-table { border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: 8px; font-size: 13px; }
.wg-table th, .wg-table td { border: 1px solid #d3d9e3; padding: 3px 10px; text-align: center; }
.wg-table th { background: #edf3fa; color: #0b336e; font-weight: 600; }
.wg-table td.pick, .wg-table th.pick { background: #fdf3dc; }
.wg-table .clickable { cursor: pointer; }
.wg-table .clickable:hover { background: #fbf5e8; }
.wg-scroll { overflow-x: auto; }
.wg-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wg-panel { min-width: 0; }
.wg-panel .wg-board { aspect-ratio: 1 / 1; }
.wg-panel-t { font-weight: 700; color: #0b336e; font-size: 13px; margin-bottom: 3px; }
.wg-panel-r { font-size: 12px; color: #444; margin-top: 3px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.wg-light { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 8px; border-radius: 16px; background: #fff;
  border: 1px solid #d3d9e3; font-weight: 600; }
.wg-light i { width: 12px; height: 12px; border-radius: 50%; background: #c9cfd9; display: inline-block; }
.wg-light.on { border-color: #9fd0b4; color: #2e8b57; }
.wg-light.on i { background: #2e8b57; box-shadow: 0 0 0 3px rgba(46,139,87,.18); }
.wg-legend { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; font-size: 13px; }
.wg-legend i { width: 14px; height: 10px; display: inline-block; border-radius: 2px; }
/* 表格点选：对 / 错 */
.wg-table td.ok { background: #e3f3ea; color: #2e8b57; font-weight: 700; }
.wg-table td.bad { background: #fbe6e2; color: #c8412f; }
/* 链条图（吹气球） */
.wg-chain-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.wg-chain-ball { flex: 0 1 230px; min-width: 170px; margin: 0 auto; }
.wg-chain { flex: 1 1 300px; min-width: 0; }
.wg-chain-line { display: flex; flex-direction: column; align-items: flex-start; }
.wg-chain-box { border: 2px solid #2f6db5; border-radius: 8px; padding: 5px 14px; color: #0b336e; font-weight: 600; background: #fff; white-space: nowrap; min-width: 92px; text-align: center; }
/* 竖直箭头：线在左，放大率写在右边 */
.wg-chain-arrow { position: relative; height: 46px; margin-left: 46px; padding-left: 16px; display: flex; align-items: center; }
.wg-chain-arrow::after { content: ""; position: absolute; left: -1.5px; top: 3px; bottom: 9px; border-left: 3px solid #c47a1b; }
.wg-chain-arrow::before { content: ""; position: absolute; left: -7px; bottom: 0; border: 7px solid transparent; border-top: 10px solid #c47a1b; border-bottom: 0; }
.wg-chain-arrow span { color: #c47a1b; font-size: 13px; }
.wg-chain-total { margin-top: 10px; overflow-x: auto; color: #0b336e; }
@media (max-width: 560px) {
  .wg { padding: 10px 10px 12px; }
  .wg-slider { flex-basis: 100%; }
  .wg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}