/* ============================================================
   遇见数学 · 初中数学动态演示
   复刻 liziwuli 三栏深色界面 · 暗金高级灰主题
   ============================================================ */

:root{
  --bg:        #0c0c0e;
  --bg-2:      #121214;
  --panel:     #18181b;
  --panel-2:   #1f1f23;
  --border:    #2a2722;
  --border-2:  #3a342a;
  --gold:      #c9a227;
  --gold-2:    #e8c66b;
  --gold-soft: rgba(201,162,39,.14);
  --gold-glow: rgba(201,162,39,.35);
  --text:      #ece9e1;
  --text-dim:  #9b958a;
  --text-faint:#6b665d;
  --good:      #6fcf97;

  --sidebar-w: 300px;
  --topbar-h:  56px;
  --serif: 'Songti SC', 'STSong', 'Source Han Serif SC', 'Noto Serif CJK SC', 'SimSun', serif;
  --sans:  -apple-system, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
svg.ic{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ---------------- 顶栏 ---------------- */
.topbar{
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border-bottom:1px solid var(--border);
  position:relative; z-index:30;
}
.topbar-left{ display:flex; align-items:center; gap:12px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  font-family:var(--serif); font-weight:900; font-size:22px; color:var(--gold);
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--border-2); border-radius:9px;
  background:radial-gradient(circle at 30% 25%, var(--gold-soft), transparent 70%);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-title{ font-family:var(--serif); font-weight:700; font-size:17px; color:var(--text); letter-spacing:.5px; }
.brand-sub{ font-size:11px; color:var(--text-faint); letter-spacing:2px; }
.topbar-right{ display:flex; align-items:center; gap:10px; }
.status-pill{
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--text-dim);
  padding:4px 10px; border:1px solid var(--border); border-radius:20px; background:var(--panel);
}
.status-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--good); }
.version{ font-size:11px; color:var(--text-faint); font-family:var(--serif); }
.icon-btn{
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--panel); color:var(--text-dim);
  border:1px solid var(--border); border-radius:8px; cursor:pointer; transition:.16s;
}
.icon-btn:hover{ color:var(--gold-2); border-color:var(--border-2); box-shadow:0 0 12px var(--gold-soft); }

/* ---------------- 布局 ---------------- */
.layout{ display:flex; height:calc(100% - var(--topbar-h)); }

/* ---------------- 左侧目录 ---------------- */
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--bg-2);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  transition:margin-left .25s ease;
  overflow:hidden;
}
.sidebar.collapsed{ margin-left:calc(-1 * var(--sidebar-w)); }
.sidebar-head{
  padding:14px 16px 10px; border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; gap:3px; justify-content:center;
  /* min-height 由当前 iframe 演示上报的题目区高度决定（见 app.js），使左右分隔线对齐 */
}
.sidebar-title{ font-family:var(--serif); font-weight:700; font-size:14px; color:var(--gold-2); }
.sidebar-hint{ font-size:11px; color:var(--text-faint); }
.catalog{ flex:1; overflow-y:auto; padding:8px 0 12px; }
.catalog::-webkit-scrollbar{ width:8px; }
.catalog::-webkit-scrollbar-thumb{ background:var(--border-2); border-radius:8px; }
.sidebar-foot{ padding:10px 16px; font-size:11px; color:var(--text-faint); border-top:1px solid var(--border); }

.grade{
  font-family:var(--serif); font-weight:700; font-size:13px; color:var(--gold);
  padding:12px 16px 6px; letter-spacing:.5px;
}
.chapter-shell{ margin:0 8px 4px; }
.chapter-head{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px; cursor:pointer; user-select:none;
  color:var(--text); transition:.15s;
}
.chapter-head:hover{ background:var(--panel); }
.chapter-head .chev{ width:14px; height:14px; transition:transform .2s; color:var(--text-dim); }
.chapter-shell.open .chapter-head .chev{ transform:rotate(90deg); }
.chapter-name{ font-size:13px; font-weight:500; }
.modlist{ display:none; padding:2px 0 8px 22px; }
.chapter-shell.open .modlist{ display:block; }
.module{
  display:flex; align-items:center; gap:9px;
  padding:6px 10px; margin:2px 0; border-radius:7px; cursor:pointer;
  color:var(--text-dim); transition:.15s; border:1px solid transparent;
}
.module:hover{ background:var(--panel); color:var(--text); }
.module.active{ background:var(--gold-soft); color:var(--gold-2); border-color:var(--border-2); }
.module-dot{
  flex:0 0 22px; height:22px; display:grid; place-items:center;
  font-size:11px; font-family:var(--serif); color:var(--text-faint);
  background:var(--panel-2); border-radius:50%; border:1px solid var(--border);
}
.module.active .module-dot{ color:#1a1408; background:var(--gold); border-color:var(--gold); }
.module-name{ font-size:13px; }
.module.is-demo .module-name{ color:var(--gold-2); }

/* ---------------- 主区域 ---------------- */
.main{ flex:1; position:relative; overflow:hidden; background:var(--bg); }
.stage{ position:absolute; inset:0; overflow:auto; }

/* iframe 嵌入的演示页（如二次函数）：绝对定位铺满 .demo-stage，
   避免 grid place-items:center 下 height:100% 解析塌缩成默认高度 */
.demo-frame{
  position:absolute; inset:0;
  width:100%; height:100%; border:0; display:block; background:var(--bg);
}

/* 占位卡片 */
.placeholder{
  max-width:520px; margin:8vh auto 0; padding:34px 36px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--border); border-radius:16px;
  text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.ph-no{ font-family:var(--serif); font-size:13px; color:var(--gold); letter-spacing:2px; }
.ph-title{ font-family:var(--serif); font-weight:700; font-size:26px; color:var(--text); margin:8px 0 4px; }
.ph-unit{ font-size:12px; color:var(--text-faint); margin-bottom:16px; }
.ph-brief{ font-size:14px; line-height:1.8; color:var(--text-dim); margin-bottom:20px; }
.ph-tag{
  display:inline-block; font-size:12px; color:var(--gold-2);
  padding:7px 16px; border:1px dashed var(--border-2); border-radius:20px;
  background:var(--gold-soft);
}

/* ---------------- 加载遮罩 ---------------- */
.loading{
  position:absolute; inset:0; z-index:40;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 45%, var(--panel), var(--bg) 75%);
  transition:opacity .35s;
}
.loading.hide{ opacity:0; pointer-events:none; }
.loading-card{ text-align:center; }
.loading-icon{ font-family:var(--serif); font-size:46px; color:var(--gold); text-shadow:0 0 24px var(--gold-glow); }
.loading-heading{ font-family:var(--serif); font-weight:700; font-size:22px; margin-top:6px; letter-spacing:3px; }
.loading-phase{ font-size:12px; color:var(--text-dim); margin:14px 0 8px; min-height:16px; }
.loading-track{ width:220px; height:4px; background:var(--panel-2); border-radius:4px; overflow:hidden; margin:0 auto; }
.loading-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-2)); transition:width .2s; box-shadow:0 0 10px var(--gold-glow); }
.loading-title{ font-size:11px; color:var(--text-faint); margin-top:12px; letter-spacing:2px; }

/* ============================================================
   序号1 · 正方体展开图 演示区（cube.js 注入）
   ============================================================ */
.demo{ height:100%; display:flex; flex-direction:column; }
.demo-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--bg-2), transparent);
}
.demo-title{ font-family:var(--serif); font-weight:700; font-size:16px; color:var(--gold-2); margin-right:auto; }
.demo-title small{ display:block; font-family:var(--sans); font-weight:400; font-size:11px; color:var(--text-faint); letter-spacing:1px; margin-top:2px; }
.ctrl{
  font-family:var(--sans); font-size:12.5px; color:var(--text-dim);
  padding:7px 13px; border:1px solid var(--border); border-radius:9px;
  background:var(--panel); cursor:pointer; transition:.16s; user-select:none;
}
.ctrl:hover{ color:var(--gold-2); border-color:var(--border-2); box-shadow:0 0 12px var(--gold-soft); }
.ctrl.on{ color:#1a1408; background:var(--gold); border-color:var(--gold); font-weight:600; }

.demo-body{ flex:1; display:flex; min-height:0; }
.demo-stage{
  flex:1; position:relative; overflow:hidden;
  display:grid; place-items:center;
  background:
    radial-gradient(700px 420px at 50% 40%, var(--gold-soft), transparent 65%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.02) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.02) 39px 40px);
}
#view3d{ width:100%; height:100%; display:block; cursor:grab; touch-action:none; }
#view3d:active{ cursor:grabbing; }
.stage-status{
  position:absolute; left:14px; bottom:12px;
  font-size:11px; color:var(--text-faint); font-family:var(--sans);
  background:rgba(12,12,14,.6); padding:4px 10px; border-radius:8px;
}
.stage-hint{
  position:absolute; right:14px; bottom:12px;
  font-size:11px; color:var(--text-faint);
  background:rgba(12,12,14,.6); padding:4px 10px; border-radius:8px;
}

.demo-side{
  flex:0 0 280px; overflow-y:auto;
  padding:14px 16px; border-left:1px solid var(--border);
  background:var(--bg-2);
  /* 隐藏滚动条外观，滚轮/触摸板仍可滚动 */
  scrollbar-width:none; -ms-overflow-style:none;
}
.demo-side::-webkit-scrollbar{ width:0; height:0; }
.side-hd{ font-family:var(--serif); font-weight:700; font-size:13px; color:var(--gold-2); margin:14px 0 8px; }
.side-hd:first-child{ margin-top:0; }
.net-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.net-btn{
  aspect-ratio:1; display:grid; place-items:center;
  font-size:13px; color:var(--text-dim);
  background:var(--panel); border:1px solid var(--border); border-radius:7px; cursor:pointer; transition:.14s;
}
.net-btn:hover{ color:var(--gold-2); border-color:var(--border-2); }
.net-btn.on{ color:#1a1408; background:var(--gold); border-color:var(--gold); font-weight:700; }

.slider-row{ display:flex; align-items:center; gap:10px; margin:10px 0; }
.slider-label{ font-family:var(--serif); font-size:13px; color:var(--gold-2); width:14px; }
.slider-row input[type=range]{ flex:1; accent-color:var(--gold); }
.slider-val{ font-size:12px; color:var(--text-dim); width:48px; text-align:right; font-variant-numeric:tabular-nums; }
.slider-note{ font-size:11px; color:var(--text-faint); line-height:1.6; margin-top:4px; }

.legend{ font-size:12px; color:var(--text-dim); line-height:1.9; }
.legend .sw{ display:inline-block; width:11px; height:11px; border-radius:3px; margin:0 4px 0 10px; vertical-align:-1px; }

.con-row{ display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12px; color:var(--text-dim); }
.con-row.con-hidden{ opacity:.32; }
.con-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex:0 0 auto; }
.con-nm{ font-family:var(--serif); color:var(--text); min-width:42px; }
.con-ex{ color:var(--text-faint); }

/* 绝对值演示：右侧控制面板补充样式 */
.side-ctrls{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 12px; }
.side-ctrls .ctrl{
  flex:1 1 auto; text-align:center;
  color:var(--gold-2); background:var(--gold-soft);
  border-color:var(--border-2); font-weight:600;
}
.side-ctrls .ctrl:hover{ color:#1a1408; background:var(--gold); border-color:var(--gold); box-shadow:0 0 12px var(--gold-glow); }
.side-ctrls .ctrl.on{ color:#1a1408; background:var(--gold); border-color:var(--gold); font-weight:700; }

/* 普通白模式下：浅蓝字+极淡蓝底在白底上对比太弱，改为实心蓝按钮 */
[data-theme="white"] .side-ctrls .ctrl{
  color:#fff; background:var(--gold); border-color:var(--gold); font-weight:700;
}
[data-theme="white"] .side-ctrls .ctrl:hover,
[data-theme="white"] .side-ctrls .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 12px var(--gold-glow);
}

.q-box{
  font-size:12px; line-height:1.8; color:var(--text-dim);
  background:var(--gold-soft); border-left:3px solid var(--border-2);
  padding:8px 10px; border-radius:0 8px 8px 0; margin-bottom:2px;
}
.side-fig{
  display:block; width:100%; height:auto;
  border:1px solid var(--border); border-radius:10px; margin:2px 0 10px;
  background:var(--panel);
}
.concl{
  font-size:12px; line-height:1.85; color:var(--text-dim);
  background:var(--gold-soft); border-left:3px solid var(--gold);
  padding:8px 10px; border-radius:0 8px 8px 0;
}
.concl b{ color:var(--gold-2); }
.concl.good{ color:var(--good); border-left-color:var(--good); background:rgba(111,207,151,.12); }
.concl.good b{ color:var(--good); }

/* 二次函数45°角问题 / 矩形周长最值：右侧面板补充样式 */
.rp-data{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin:2px 0 8px; }
.rp-data .item{ background:var(--panel-2); border:1px solid var(--border-2); border-radius:8px; padding:7px 10px; }
.rp-data .k{ font-size:11px; color:var(--text-faint); }
.rp-data .v{ font-size:16px; font-weight:700; color:var(--gold-2); font-family:Consolas,"Microsoft YaHei",monospace; }
.rp-data .v.hot{ color:var(--good); }
.q45-legend{ display:flex; flex-wrap:wrap; gap:5px 14px; font-size:12px; color:var(--text-dim); padding:2px 2px 4px; }
.q45-legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; border:1px solid rgba(0,0,0,.18); }
.q45-step{ font-size:13px; font-weight:700; color:var(--gold-2); line-height:1.7; margin:2px 0 6px; overflow-wrap:anywhere; }
.q45-text{ font-size:13px; color:var(--text-dim); line-height:1.85; overflow-wrap:anywhere; }
.q45-hint{ font-size:12px; color:var(--text-faint); line-height:1.75; margin-top:10px; padding-top:8px; border-top:1px dashed var(--border-2); overflow-wrap:anywhere; }
.readout{
  font-family:Consolas, "Microsoft YaHei", monospace; font-size:12.5px; line-height:1.7;
  color:var(--text-dim); background:var(--panel); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px; margin:4px 0 6px; overflow-wrap:anywhere;
}
.readout .yellow{ color:var(--gold-2); font-weight:700; }
.readout .blue{ color:var(--gold-2); font-weight:700; }
.readout .pink{ color:var(--gold); font-weight:700; }

/* 绝对值100项：解题步骤卡片（金色主题） */
.steps{ display:flex; flex-direction:column; gap:8px; margin:2px 0 6px; }
.step-card{
  background:var(--panel); border:1px solid var(--border);
  border-left:4px solid var(--border); border-radius:8px;
  padding:9px 11px; opacity:.6; cursor:pointer;
  transition:opacity .3s, border-color .3s, background .3s;
}
.step-card:hover{ opacity:.85; border-color:var(--border-2); }
.step-card.active{
  opacity:1; border-left-color:var(--gold);
  background:linear-gradient(90deg, var(--gold-soft), rgba(0,0,0,0) 62%), var(--panel);
}
.step-head{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:6px; flex:0 0 auto;
  font-size:11px; font-weight:700; color:var(--text-faint);
  background:var(--panel-2); border:1px solid var(--border);
}
.step-card.active .step-num{ color:#1a1408; background:var(--gold); border-color:var(--gold); }
.step-title{ font-size:12.5px; font-weight:700; color:var(--text-dim); }
.step-card.active .step-title{ color:var(--gold-2); }
.step-body{ font-size:11.5px; line-height:1.75; color:var(--text-faint); overflow-wrap:anywhere; }
.step-body b{ color:var(--gold-2); }
.ctrl.disabled{ opacity:.32; pointer-events:none; }

/* ---------------- 配色弹出层 ---------------- */
#paletteBtn{ position:relative; }
#paletteBtn::after{
  content:""; position:absolute; right:5px; bottom:5px;
  width:8px; height:8px; border-radius:50%;
  background:var(--cur, var(--gold));
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.palette-pop{
  position:fixed; top:calc(var(--topbar-h) + 8px); right:12px; z-index:60;
  min-width:172px; padding:8px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--border-2); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none;
  transition:opacity .18s, transform .18s;
}
.palette-pop.show{ opacity:1; transform:none; pointer-events:auto; }
.palette-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:10px; cursor:pointer;
  color:var(--text-dim); transition:background .14s, color .14s;
}
.palette-item:hover{ background:var(--bg-2); color:var(--text); }
.palette-item.on{ background:var(--gold-soft); color:var(--gold-2); }
.palette-swatch{
  width:18px; height:18px; border-radius:6px; flex:0 0 auto;
  border:1px solid var(--border-2);
}
.palette-name{ font-size:13px; font-family:var(--sans); }

/* ---------------- 响应式 ---------------- */
@media (max-width:760px){
  :root{ --sidebar-w:260px; }
  .brand-sub{ display:none; }
  .demo-side{ flex-basis:200px; }
}

/* ============================================================
   二次函数中动轴定区间问题（dync.js 注入）
   ============================================================ */
.dync .demo-title{ margin-right:0; }
.dync-q{
  flex:1; margin-left:14px; padding-left:12px;
  border-left:3px solid var(--border-2);
  font-size:13px; line-height:1.5; color:var(--text-dim); overflow:hidden;
}
.dync-status{
  font-size:11.5px; color:var(--good);
  border:1px solid var(--border); border-radius:20px;
  padding:4px 12px; white-space:nowrap;
}
.dync-status.paused{ color:var(--text-dim); }

.dync-step{ font-family:var(--serif); font-weight:700; font-size:14px; color:var(--gold-2); margin:4px 0 8px; }
.dync-step b, .dync-text b{ color:var(--gold-2); }
.dync-text{ font-size:13px; line-height:1.85; color:var(--text-dim); }

/* 结论区：符合题意=绿，不符=红，其余=金（基类 .concl 默认金） */
.concl.good{ background:var(--gold-soft); border-left-color:var(--good); color:var(--text); }
.concl.good b{ color:var(--good); }
.concl.bad{ background:rgba(255,107,107,.10); border-left-color:#ff6b6b; }
.concl.bad b{ color:#ff8a80; }

.dync-badge{
  display:none; margin-top:10px;
  font-size:13px; font-weight:700; color:#052e16;
  background:linear-gradient(135deg,#69f0ae,#34d399);
  padding:8px 14px; border-radius:999px; align-self:flex-start;
  box-shadow:0 0 22px rgba(105,240,174,.35);
}
.dync-badge.show{ display:inline-block; }

/* ============================================================
   二次函数参数与区间自定义（quadparam.js 注入）
   ============================================================ */
.quadparam .demo-title{ margin-right:0; }
.quadparam .demo-side{ flex:0 0 300px; }
.qp-eq-badge{
  margin-left:14px; padding:5px 12px; border-radius:8px;
  border:1px solid var(--border-2); background:var(--gold-soft);
  color:var(--gold-2); font-family:Consolas, monospace; font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52%;
}
.qp-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block;
}
.qp-panel{ display:flex; flex-direction:column; gap:6px; }
.qp-sec-h{
  font-family:var(--serif); font-weight:700; font-size:12.5px; color:var(--gold-2);
  margin:8px 0 2px; padding-bottom:4px; border-bottom:1px solid var(--border);
}
.qp-sec-h:first-child{ margin-top:0; }
.qp-field{ display:flex; align-items:center; gap:8px; margin:3px 0; }
.qp-field label{ flex:0 0 72px; font-size:12.5px; color:var(--text-dim); white-space:nowrap; }
.qp-field input{
  flex:1; width:0; min-width:0;
  background:var(--panel); border:1px solid var(--border); border-radius:7px;
  color:var(--text); padding:6px 9px; font-size:13px; font-family:inherit;
  text-align:right; transition:border-color .15s, box-shadow .15s;
}
.qp-field input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft); }
.qp-field input.input-invalid{ border-color:#e2483a; box-shadow:0 0 0 2px rgba(226,72,58,.22); }
.qp-error{
  display:none; color:#ff8a80; font-size:12px; line-height:1.5; margin:2px 0;
  padding-left:2px;
}
.qp-error.show{ display:block; }
.qp-btn{
  margin:6px 0 2px; width:100%; padding:8px 10px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border); background:var(--panel); color:var(--text-dim);
  font-size:12.5px; font-family:inherit; transition:.15s;
}
.qp-btn:hover{ color:var(--gold-2); border-color:var(--border-2); box-shadow:0 0 12px var(--gold-soft); }
.qp-data{ display:flex; flex-direction:column; gap:6px; }
.qp-row{ display:flex; gap:8px; font-size:12.5px; line-height:1.5; }
.qp-k{ flex:0 0 76px; color:var(--text-faint); }
.qp-v{ flex:1; min-width:0; color:var(--text); word-break:break-word; }
.qp-v.hl{ color:var(--gold-2); font-weight:600; }
@media (max-width:760px){
  .quadparam .demo-side{ flex-basis:240px; }
}

/* ============================================================
   数轴的认识（数轴实验室）：右侧面板
   ============================================================ */
.na-side{ flex:0 0 292px; }
.na-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.na-field{ display:grid; gap:4px; min-width:0; }
.na-field > span{ font-size:11px; color:var(--text-faint); letter-spacing:.02em; }
.na-field > span b{ color:var(--gold-2); font-weight:700; }
.na-full{ margin-top:8px; }
.na-input{
  width:100%; min-width:0; height:32px; padding:0 8px;
  font-family:var(--sans); font-size:12.5px; color:var(--text);
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.na-input:focus{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft); }
select.na-input{ padding:0 6px; }
input[type="range"].na-input{ height:auto; padding:0; border:0; background:transparent; accent-color:var(--gold); }
.na-color{
  width:100%; height:32px; padding:3px;
  border:1px solid var(--border); border-radius:8px; background:var(--panel); cursor:pointer;
}
.na-checks{ display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; margin-top:9px; }
.na-checks label{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-dim); cursor:pointer; }
.na-checks input{ width:13px; height:13px; margin:0; accent-color:var(--gold); }
.na-add{ display:grid; grid-template-columns:minmax(0,1fr) 40px auto; gap:6px; align-items:center; }
.na-add-btn{ padding:0 11px; height:32px; display:flex; align-items:center; justify-content:center; }
.na-tip{ font-size:11px; color:var(--text-faint); line-height:1.65; margin-top:7px; }
.na-count{ font-family:var(--sans); font-weight:400; font-size:11px; color:var(--text-faint); margin-left:4px; }
.na-list{ display:grid; gap:6px; }
.na-item{
  display:grid; grid-template-columns:14px minmax(0,1fr) 24px 24px;
  align-items:center; gap:5px; padding:4px 5px;
  border:1px solid var(--border); border-radius:8px; background:var(--panel);
}
.na-item.on{ border-color:var(--gold); background:var(--gold-soft); }
.na-item .dot{ width:10px; height:10px; border-radius:50%; justify-self:center; box-shadow:0 0 0 2px var(--panel); }
.na-item .nm{
  min-width:0; padding:3px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border:0; background:transparent; color:var(--text);
  font-family:var(--sans); font-size:12px; text-align:left; cursor:pointer;
}
.na-item.on .nm{ color:var(--gold-2); font-weight:600; }
.na-ib{
  width:24px; height:24px; display:grid; place-items:center;
  border:1px solid transparent; border-radius:6px; background:transparent;
  color:var(--text-faint); font-size:12px; cursor:pointer; transition:.14s;
}
.na-ib:hover{ color:var(--gold-2); border-color:var(--border-2); background:var(--bg-2); }
.na-edit{ display:grid; gap:8px; margin-top:9px; padding-top:9px; border-top:1px dashed var(--border); }
.na-danger{
  width:100%; padding:7px 10px; text-align:center;
  color:#ff8a80; border-color:rgba(255,138,128,.35); background:rgba(255,138,128,.08);
}
.na-danger:hover{ color:#ffb3ab; border-color:rgba(255,138,128,.6); box-shadow:none; }
.na-dist{
  margin-top:9px; padding:7px 9px; border-radius:8px;
  font-size:12px; line-height:1.5; color:var(--gold-2);
  background:var(--gold-soft); border:1px solid var(--border);
}
.na-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
.na-row .ctrl{ text-align:center; }
.na-row .ctrl:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.na-msg{ margin-top:9px; font-size:11.5px; line-height:1.65; color:var(--text-dim); }
[data-theme="white"] .na-danger{ color:#c0392b; border-color:rgba(192,57,43,.35); background:rgba(192,57,43,.06); }
@media (max-width:900px){
  .na-side{ flex:0 0 250px; }
  .na-checks{ grid-template-columns:1fr; }
}

/* ============================================================
   二次函数与直线 y = t 的关系（js/linet.js 注入）
   ============================================================ */
.linet .demo-side{ flex:0 0 300px; }
/* 分类讨论：整行按钮 */
.side-ctrls.col{ flex-direction:column; gap:6px; }
.side-ctrls.col .ctrl{
  flex:1 1 auto; width:100%; text-align:left;
  padding:7px 11px; font-size:12.5px; line-height:1.5; letter-spacing:.2px;
}
.linet .q45-step{ font-size:12.5px; }
.linet .q45-text{ font-size:12.5px; }
.linet .q45-legend span{ display:inline-flex; align-items:center; }
/* 白主题下分类讨论：未选中=淡蓝描边，选中=实心深蓝+外圈，避免全是实心蓝分不清 */
[data-theme="white"] .linet .side-ctrls.col .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.07);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .linet .side-ctrls.col .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .linet .side-ctrls.col .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}
@media (max-width:900px){
  .linet .demo-side{ flex-basis:250px; }
}

/* ============================================================
   二次函数中定轴动区间问题（js/dynaxis.js 注入）
   ============================================================ */
.dynaxis .demo-side{ flex:0 0 300px; }
.dynaxis .q45-step{ font-size:12.5px; line-height:1.7; }
.dynaxis .q45-text{ font-size:12.5px; line-height:1.9; }
.dynaxis .q45-text b{ color:var(--gold-2); }
.dynaxis .q45-legend span{ display:inline-flex; align-items:center; }
.dynaxis .rp-data{ margin:0 0 8px; }
.dynaxis .rp-data .v{ font-size:13.5px; }
.dynaxis .concl{ margin-top:0; }
.dynaxis .concl b{ font-family:Consolas,"Microsoft YaHei",monospace; }
/* 分类讨论选中态：提高特异性并关闭过渡，确保「当前情形」一定高亮 */
.linet .side-ctrls.col .ctrl.on,
.dynaxis .side-ctrls.col .ctrl.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold);
  font-weight:700; box-shadow:0 0 0 2px var(--gold-glow); transition:none;
}
[data-theme="white"] .dynaxis .side-ctrls.col .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.07);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .dynaxis .side-ctrls.col .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .dynaxis .side-ctrls.col .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}
@media (max-width:900px){
  .dynaxis .demo-side{ flex-basis:250px; }
}

/* ============================================================
   序号 4 · 正方体截面（七上 1.3 截一个几何体）
   ============================================================ */
.cubecut .demo-side{ flex:0 0 300px; }
/* 控制区四个按钮排成 2×2，避免出现「三个 + 一个」的错位 */
.cubecut .side-ctrls:not(.col){ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cubecut .side-ctrls:not(.col) .ctrl{ padding:7px 8px; }
.cubecut .side-ctrls .ctrl:disabled{ opacity:.38; cursor:not-allowed; }
.cubecut .q45-step{ font-size:12.5px; line-height:1.7; }
.cubecut .q45-text{ font-size:12.5px; line-height:1.9; }
.cubecut .q45-legend span{ display:inline-flex; align-items:center; }
.cubecut .rp-data{ margin:0 0 8px; }
.cubecut .rp-data .v{ font-size:14px; }
.cubecut .concl{ margin-top:0; }
/* 分类讨论选中态（与 linet / dynaxis 一致，提升特异性防被基础样式覆盖） */
.cubecut .side-ctrls.col .ctrl.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold);
  font-weight:700; box-shadow:0 0 0 2px var(--gold-glow); transition:none;
}
[data-theme="white"] .cubecut .side-ctrls.col .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.07);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .cubecut .side-ctrls.col .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .cubecut .side-ctrls.col .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}
@media (max-width:900px){
  .cubecut .demo-side{ flex-basis:250px; }
}

/* ============================================================
   将军饮马之三角形周长最小值（七下 5.3 · js/pmn.js 注入）
   ============================================================ */
.pmn .demo-side{ flex:0 0 300px; }
/* 控制按钮 2 列，避免「三 + 一」错位 */
.pmn .side-ctrls:not(.col){ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pmn .side-ctrls:not(.col) .ctrl{ padding:7px 8px; }
.pmn .side-ctrls:not(.col) .ctrl:last-child{ grid-column:1 / -1; }
.pmn .side-ctrls .ctrl:disabled{ opacity:.38; cursor:not-allowed; }
/* 白主题下禁用态用浅灰蓝，避免"浅蓝底 + 半透明蓝字"看不清 */
[data-theme="white"] .pmn .side-ctrls .ctrl:disabled{
  color:#8fa0b8; background:#eef2f8; border-color:#d9e2f2;
  box-shadow:none; opacity:1;
}
/* 推导步骤：2 列紧凑网格 */
.pmn .side-ctrls.steps{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:2px 0 10px; }
.pmn .side-ctrls.steps .ctrl{
  padding:7px 8px; font-size:12px; text-align:center; letter-spacing:.2px;
  transition:none;
}
.pmn .q45-step{ font-size:12.5px; line-height:1.7; }
.pmn .q45-text{ font-size:12.5px; line-height:1.9; }
.pmn .q45-text b{ color:var(--gold-2); }
.pmn .q45-legend span{ display:inline-flex; align-items:center; }
.pmn .q45-legend i{ border-radius:50%; }
.pmn .rp-data{ margin:0 0 8px; }
.pmn .rp-data .v{ font-size:13.5px; }
.pmn .concl{ margin-top:0; }
.pmn .concl b{ font-family:Consolas,"Microsoft YaHei",monospace; }
/* 步骤选中态：提高特异性 + 关闭过渡，确保「当前步骤」一定高亮 */
.pmn .side-ctrls.steps .ctrl.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold);
  font-weight:700; box-shadow:0 0 0 2px var(--gold-glow); transition:none;
}
[data-theme="white"] .pmn .side-ctrls.steps .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.07);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .pmn .side-ctrls.steps .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .pmn .side-ctrls.steps .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}
@media (max-width:900px){
  .pmn .demo-side{ flex-basis:250px; }
}

/* ============================================================
   将军饮马之四边形周长最小值（七下 5.3 · js/pqmn.js 注入）
   ============================================================ */
.pqmn .demo-side{ flex:0 0 300px; }
.pqmn .side-ctrls:not(.col){ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pqmn .side-ctrls:not(.col) .ctrl{ padding:7px 8px; }
.pqmn .side-ctrls:not(.col) .ctrl:last-child{ grid-column:1 / -1; }
.pqmn .side-ctrls .ctrl:disabled{ opacity:.38; cursor:not-allowed; }
[data-theme="white"] .pqmn .side-ctrls .ctrl:disabled{
  color:#8fa0b8; background:#eef2f8; border-color:#d9e2f2;
  box-shadow:none; opacity:1;
}
.pqmn .side-ctrls.steps{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:2px 0 10px; }
.pqmn .side-ctrls.steps .ctrl{
  padding:7px 8px; font-size:12px; text-align:center; letter-spacing:.2px;
  transition:none;
}
.pqmn .q45-step{ font-size:12.5px; line-height:1.7; }
.pqmn .q45-text{ font-size:12.5px; line-height:1.9; }
.pqmn .q45-text b{ color:var(--gold-2); }
.pqmn .q45-legend span{ display:inline-flex; align-items:center; }
.pqmn .q45-legend i{ border-radius:50%; }
.pqmn .rp-data{ margin:0 0 8px; }
.pqmn .rp-data .v{ font-size:13.5px; }
.pqmn .concl{ margin-top:0; }
.pqmn .concl b{ font-family:Consolas,"Microsoft YaHei",monospace; }

/* 分类讨论 · 对称配对辨析 */
.pqmn-cases{ display:flex; flex-direction:column; gap:6px; margin:2px 0 10px; }
.pqmn-case{
  display:flex; gap:7px; align-items:flex-start;
  padding:7px 9px; border-radius:8px;
  font-size:11.5px; line-height:1.65;
  background:rgba(74,222,128,.07);
  border:1px solid rgba(74,222,128,.26);
  color:var(--text-2, var(--text));
}
.pqmn-case .sign{
  flex:0 0 auto; font-size:12px; font-weight:700; line-height:1.5;
  color:#4ade80;
}
.pqmn-case .bd{ flex:1 1 auto; min-width:0; }
.pqmn-case .bd b{ display:block; color:var(--gold-2); font-weight:700; margin-bottom:1px; }
.pqmn-case.bad{
  background:rgba(248,113,113,.08);
  border-color:rgba(248,113,113,.28);
}
.pqmn-case.bad .sign{ color:#f87171; }
.pqmn-case.bad .bd b{ color:#fb923c; }
[data-theme="white"] .pqmn-case{
  background:rgba(21,128,61,.05); border-color:rgba(21,128,61,.22); color:#334155;
}
[data-theme="white"] .pqmn-case .sign{ color:#15803d; }
[data-theme="white"] .pqmn-case.bad{
  background:rgba(220,38,38,.05); border-color:rgba(220,38,38,.20);
}
[data-theme="white"] .pqmn-case.bad .sign{ color:#dc2626; }
[data-theme="white"] .pqmn-case.bad .bd b{ color:#b91c1c; }

.pqmn .side-ctrls.steps .ctrl.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold);
  font-weight:700; box-shadow:0 0 0 2px var(--gold-glow); transition:none;
}
[data-theme="white"] .pqmn .side-ctrls.steps .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.07);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .pqmn .side-ctrls.steps .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .pqmn .side-ctrls.steps .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}
@media (max-width:900px){
  .pqmn .demo-side{ flex-basis:250px; }
}

/* ============================================================
   手拉手模型（八下 1.1 · js/hand.js 注入）
   ============================================================ */
.hand .demo-side{ flex:0 0 300px; }
.hand .side-ctrls:not(.col){ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hand .side-ctrls:not(.col) .ctrl{ padding:7px 8px; }
.hand .side-ctrls .ctrl:disabled{ opacity:.38; cursor:not-allowed; }
[data-theme="white"] .hand .side-ctrls .ctrl:disabled{
  color:#8fa0b8; background:#eef2f8; border-color:#d9e2f2;
  box-shadow:none; opacity:1;
}
/* 情形切换：三个按钮，最后一个占满整行 */
.hand .hand-scenes{ margin:2px 0 12px; }
.hand .hand-scenes .ctrl{ font-size:12px; text-align:center; letter-spacing:.2px; transition:none; }
.hand .hand-scenes .ctrl:last-child{ grid-column:1 / -1; }
.hand .side-ctrls.steps{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:2px 0 10px; }
.hand .side-ctrls.steps .ctrl{
  padding:7px 8px; font-size:12px; text-align:center; letter-spacing:.2px;
  transition:none;
}
.hand .side-ctrls.steps .ctrl:last-child{ grid-column:1 / -1; }
.hand .q45-step{ font-size:12.5px; line-height:1.7; }
.hand .q45-text{ font-size:12.5px; line-height:1.9; }
.hand .q45-text b{ color:var(--gold-2); }
.hand .q45-legend span{ display:inline-flex; align-items:center; }
.hand .q45-legend i{ border-radius:2px; }
.hand .rp-data{ margin:0 0 8px; }
.hand .rp-data .v{ font-size:13.5px; }
.hand .concl{ margin-top:0; }
.hand .concl b{ font-family:Consolas,"Microsoft YaHei",monospace; }

/* 分类讨论：三种“证夹角相等”的情形，当前场景高亮 */
.hand-cases{ display:flex; flex-direction:column; gap:6px; margin:2px 0 10px; }
.hand-case{
  padding:7px 10px; border-radius:8px;
  font-size:11.5px; line-height:1.65;
  background:var(--panel-2); border:1px solid var(--border-2);
  color:var(--text-dim); opacity:.62;
  transition:none;
}
.hand-case b{ display:block; color:var(--text-dim); font-weight:700; margin-bottom:1px; }
.hand-case.on{
  opacity:1; background:var(--gold-soft);
  border-color:var(--gold); box-shadow:0 0 0 1px var(--gold-glow) inset;
  color:var(--text);
}
.hand-case.on b{ color:var(--gold-2); }
.hand-case.bad{
  background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.28); opacity:1;
}
.hand-case.bad b{ color:#fb923c; }
[data-theme="white"] .hand-case{ background:#f6f8fc; border-color:#dde4f0; color:#5b6478; opacity:.72; }
[data-theme="white"] .hand-case b{ color:#5b6478; }
[data-theme="white"] .hand-case.on{
  background:rgba(47,111,237,.08); border-color:#2f6fed; color:#1f2430; opacity:1;
  box-shadow:0 0 0 1px rgba(47,111,237,.28) inset;
}
[data-theme="white"] .hand-case.on b{ color:#1d4fd0; }
[data-theme="white"] .hand-case.bad{ background:rgba(220,38,38,.05); border-color:rgba(220,38,38,.22); color:#7f1d1d; opacity:1; }
[data-theme="white"] .hand-case.bad b{ color:#b91c1c; }

.hand .side-ctrls.steps .ctrl.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold);
  font-weight:700; box-shadow:0 0 0 2px var(--gold-glow); transition:none;
}
[data-theme="white"] .hand .side-ctrls.steps .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.07);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .hand .side-ctrls.steps .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .hand .side-ctrls.steps .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}
@media (max-width:900px){
  .hand .demo-side{ flex-basis:250px; }
}

/* ============================================================
   反比例函数求 K 值（九上 6.3 · js/kvalue.js 注入）
   ============================================================ */
.kvalue .demo-side{ flex:0 0 300px; }
.kvalue .side-ctrls:not(.col){ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.kvalue .side-ctrls:not(.col) .ctrl{ padding:7px 8px; }
.kvalue .side-ctrls .ctrl:disabled{ opacity:.38; cursor:not-allowed; }
[data-theme="white"] .kvalue .side-ctrls .ctrl:disabled{
  color:#8fa0b8; background:#eef2f8; border-color:#d9e2f2;
  box-shadow:none; opacity:1;
}
.kvalue .side-ctrls.steps{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:2px 0 10px; }
.kvalue .side-ctrls.steps .ctrl{
  padding:7px 8px; font-size:12px; text-align:center; letter-spacing:.2px;
  transition:none;
}
.kvalue .side-ctrls.steps .ctrl:last-child{ grid-column:1 / -1; }
.kvalue .q45-step{ font-size:12.5px; line-height:1.7; }
.kvalue .q45-text{ font-size:12.5px; line-height:1.9; }
.kvalue .q45-text b{ color:var(--gold-2); }
.kvalue .q45-legend span{ display:inline-flex; align-items:center; }
.kvalue .rp-data{ margin:0 0 8px; }
.kvalue .rp-data .v{ font-size:13.5px; }
.kvalue .concl{ margin-top:0; }

.kvalue .side-ctrls.steps .ctrl.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold);
  font-weight:700; box-shadow:0 0 0 2px var(--gold-glow); transition:none;
}
[data-theme="white"] .kvalue .side-ctrls.steps .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.07);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .kvalue .side-ctrls.steps .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .kvalue .side-ctrls.steps .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}

/* 分类讨论卡片 */
.kval-cases{ display:flex; flex-direction:column; gap:6px; margin:2px 0 10px; }
.kval-case{
  padding:7px 10px; border-radius:8px;
  font-size:11.5px; line-height:1.65;
  background:var(--panel-2); border:1px solid var(--border-2);
  color:var(--text-dim);
}
.kval-case .ct{ display:block; color:var(--gold-2); font-weight:700; margin-bottom:2px; }
.kval-case b{ color:var(--gold-2); font-weight:700; }
.kval-case.bad{ background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.28); }
.kval-case.bad .ct{ color:#fb923c; }
.kval-case.bad b{ color:#fdba74; }
[data-theme="white"] .kval-case{ background:#f6f8fc; border-color:#dde4f0; color:#5b6478; }
[data-theme="white"] .kval-case .ct{ color:#1d4fd0; }
[data-theme="white"] .kval-case b{ color:#1d4fd0; }
[data-theme="white"] .kval-case.bad{ background:rgba(220,38,38,.05); border-color:rgba(220,38,38,.22); color:#7f1d1d; }
[data-theme="white"] .kval-case.bad .ct{ color:#b91c1c; }
[data-theme="white"] .kval-case.bad b{ color:#b91c1c; }

@media (max-width:900px){
  .kvalue .demo-side{ flex-basis:250px; }
}

/* ============================================================
   二次函数中直角三角形存在性问题（九下 2.x · js/rtq.js 注入）
   ============================================================ */
.rtq .demo-side{ flex:0 0 300px; }
.rtq .side-ctrls:not(.col){ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rtq .side-ctrls:not(.col) .ctrl{ padding:7px 8px; }
.rtq .side-ctrls .ctrl:disabled{ opacity:.38; cursor:not-allowed; }
[data-theme="white"] .rtq .side-ctrls .ctrl:disabled{
  color:#8fa0b8; background:#eef2f8; border-color:#d9e2f2;
  box-shadow:none; opacity:1;
}
.rtq .side-ctrls.steps{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:2px 0 10px; }
.rtq .side-ctrls.steps .ctrl{
  padding:7px 8px; font-size:12px; text-align:center; letter-spacing:.2px;
  transition:none;
}
.rtq .side-ctrls.steps .ctrl:last-child{ grid-column:1 / -1; }
.rtq .side-ctrls.steps .ctrl.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold);
  font-weight:700; box-shadow:0 0 0 2px var(--gold-glow); transition:none;
}
[data-theme="white"] .rtq .side-ctrls.steps .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.07);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .rtq .side-ctrls.steps .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .rtq .side-ctrls.steps .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}
.rtq .rp-data{ margin:0 0 8px; }
.rtq .rp-data .v{ font-size:13.5px; }
.rtq .concl{ margin-top:0; }
.rtq .q45-text b{ color:var(--gold-2); }
.rtq .q45-text sub{ font-size:.78em; }

@media (max-width:900px){
  .rtq .demo-side{ flex-basis:250px; }
}

/* ============================================================
   将军饮马之三动点问题（七下 5.3 · js/jjmm.js 注入）
   ============================================================ */
.jjmm .demo-side{ flex:0 0 300px; }
.jjmm .side-ctrls:not(.col){ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.jjmm .side-ctrls:not(.col) .ctrl{ padding:7px 8px; }
.jjmm .side-ctrls:not(.col):not(.steps) .ctrl:last-child{ grid-column:1 / -1; }
.jjmm .side-ctrls .ctrl:disabled{ opacity:.38; cursor:not-allowed; }
[data-theme="white"] .jjmm .side-ctrls .ctrl:disabled{
  color:#8fa0b8; background:#eef2f8; border-color:#d9e2f2;
  box-shadow:none; opacity:1;
}
.jjmm .side-ctrls.steps{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:2px 0 10px; }
.jjmm .side-ctrls.steps .ctrl{
  padding:7px 8px; font-size:12px; text-align:center; letter-spacing:.2px;
  transition:none;
}
.jjmm .side-ctrls.steps .ctrl.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold);
  font-weight:700; box-shadow:0 0 0 2px var(--gold-glow); transition:none;
}
[data-theme="white"] .jjmm .side-ctrls.steps .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.07);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .jjmm .side-ctrls.steps .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .jjmm .side-ctrls.steps .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}
.jjmm .rp-data{ margin:0 0 8px; }
.jjmm .rp-data .v{ font-size:13.5px; }
.jjmm .concl{ margin-top:0; }
.jjmm .q45-step{ font-size:12.5px; line-height:1.7; }
.jjmm .q45-text{ font-size:12.5px; line-height:1.9; }
.jjmm .q45-text b{ color:var(--gold-2); }

/* 分类讨论 · 三动点怎么处理 */
.jjmm-cases{ display:flex; flex-direction:column; gap:6px; margin:2px 0 10px; }
.jjmm-case{
  display:flex; gap:7px; align-items:flex-start;
  padding:7px 9px; border-radius:8px;
  font-size:11.5px; line-height:1.65;
  background:rgba(74,222,128,.07);
  border:1px solid rgba(74,222,128,.26);
  color:var(--text-2, var(--text));
}
.jjmm-case .sign{
  flex:0 0 auto; font-size:12px; font-weight:700; line-height:1.5;
  color:#4ade80;
}
.jjmm-case .bd{ flex:1 1 auto; min-width:0; }
.jjmm-case .bd .ct{ display:block; color:var(--gold-2); font-weight:700; margin-bottom:1px; }
.jjmm-case .bd b{ color:var(--gold-2); font-weight:700; }
.jjmm-case.bad{
  background:rgba(248,113,113,.08);
  border-color:rgba(248,113,113,.28);
}
.jjmm-case.bad .sign{ color:#f87171; }
.jjmm-case.bad .bd b{ color:#fb923c; }
[data-theme="white"] .jjmm-case{
  background:rgba(21,128,61,.05); border-color:rgba(21,128,61,.22); color:#334155;
}
[data-theme="white"] .jjmm-case .sign{ color:#15803d; }
[data-theme="white"] .jjmm-case.bad{
  background:rgba(220,38,38,.05); border-color:rgba(220,38,38,.20);
}
[data-theme="white"] .jjmm-case.bad .sign{ color:#dc2626; }
[data-theme="white"] .jjmm-case.bad .bd b,
[data-theme="white"] .jjmm-case.bad .bd .ct{ color:#b91c1c; }

@media (max-width:900px){
  .jjmm .demo-side{ flex-basis:250px; }
}

/* ============================================================
   角平分线 · 截长补短模型（八下 1.4 · js/jieccd.js 注入）
   ============================================================ */
.jieccd .demo-side{ flex:0 0 300px; }
.jieccd .side-ctrls:not(.col){ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.jieccd .side-ctrls:not(.col) .ctrl{ padding:7px 8px; }
.jieccd .side-ctrls:not(.col):not(.steps) .ctrl:last-child{ grid-column:1 / -1; }
.jieccd .side-ctrls .ctrl:disabled{ opacity:.38; cursor:not-allowed; }
[data-theme="white"] .jieccd .side-ctrls .ctrl:disabled{
  color:#8fa0b8; background:#eef2f8; border-color:#d9e2f2;
  box-shadow:none; opacity:1;
}
.jieccd .side-ctrls.steps{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:2px 0 10px; }
.jieccd .side-ctrls.steps .ctrl{
  padding:7px 6px; font-size:11.5px; text-align:center; letter-spacing:.1px;
  transition:none;
}
.jieccd .side-ctrls.steps .ctrl:last-child{ grid-column:1 / -1; }
.jieccd .side-ctrls.steps .ctrl.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold);
  font-weight:700; box-shadow:0 0 0 2px var(--gold-glow); transition:none;
}
[data-theme="white"] .jieccd .side-ctrls.steps .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.07);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .jieccd .side-ctrls.steps .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .jieccd .side-ctrls.steps .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}
.jieccd .rp-data{ margin:0 0 8px; }
.jieccd .rp-data .v{ font-size:13.5px; }
.jieccd .concl{ margin-top:0; }
.jieccd .q45-step{ font-size:12.5px; line-height:1.7; }
.jieccd .q45-text{ font-size:12.5px; line-height:1.92; }
.jieccd .q45-text b{ color:var(--gold-2); }

/* 分类讨论 · 截长还是补短 */
.jdc-cases{ display:flex; flex-direction:column; gap:6px; margin:2px 0 10px; }
.jdc-case{
  display:flex; gap:7px; align-items:flex-start;
  padding:7px 9px; border-radius:8px;
  font-size:11.5px; line-height:1.68;
  background:rgba(74,222,128,.07);
  border:1px solid rgba(74,222,128,.26);
  color:var(--text-2, var(--text));
}
.jdc-case .sign{
  flex:0 0 auto; font-size:12px; font-weight:700; line-height:1.5;
  color:#4ade80;
}
.jdc-case .bd{ flex:1 1 auto; min-width:0; }
.jdc-case .bd .ct{ display:block; color:var(--gold-2); font-weight:700; margin-bottom:1px; }
.jdc-case .bd b{ color:var(--gold-2); font-weight:700; }
.jdc-case .bd i{ font-style:italic; }
.jdc-case.bad{
  background:rgba(248,113,113,.08);
  border-color:rgba(248,113,113,.28);
}
.jdc-case.bad .sign{ color:#f87171; }
.jdc-case.bad .bd .ct{ color:#fb923c; }
.jdc-case.bad .bd b{ color:#fdba74; }
[data-theme="white"] .jdc-case{
  background:rgba(21,128,61,.05); border-color:rgba(21,128,61,.22); color:#334155;
}
[data-theme="white"] .jdc-case .sign{ color:#15803d; }
[data-theme="white"] .jdc-case.bad{
  background:rgba(220,38,38,.05); border-color:rgba(220,38,38,.20);
}
[data-theme="white"] .jdc-case.bad .sign{ color:#dc2626; }
[data-theme="white"] .jdc-case.bad .bd .ct,
[data-theme="white"] .jdc-case.bad .bd b{ color:#b91c1c; }

@media (max-width:1150px){
  .jieccd .demo-side{ flex:0 0 262px; }
}
@media (max-width:900px){
  .jieccd .demo-side{ flex-basis:250px; }
}

/* ============================================================
   角平分线 + 平行线 · 截长补短经典例题（八下 1.4 · js/jplx.js 注入）
   ============================================================ */
.jplx .demo-side{ flex:0 0 300px; }
.jplx .side-ctrls:not(.col){ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.jplx .side-ctrls:not(.col) .ctrl{ padding:7px 8px; }
.jplx .side-ctrls .ctrl.wide{ grid-column:1 / -1; }
.jplx .side-ctrls .ctrl:disabled{ opacity:.38; cursor:not-allowed; }
[data-theme="white"] .jplx .side-ctrls .ctrl:disabled{
  color:#8fa0b8; background:#eef2f8; border-color:#d9e2f2;
  box-shadow:none; opacity:1;
}
.jplx .side-ctrls.steps{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:2px 0 10px; }
.jplx .side-ctrls.steps .ctrl{
  padding:7px 4px; font-size:11px; text-align:center; letter-spacing:0;
  transition:none;
}
.jplx .side-ctrls.steps .ctrl:last-child{ grid-column:1 / -1; }
.jplx .side-ctrls.steps .ctrl.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold);
  font-weight:700; box-shadow:0 0 0 2px var(--gold-glow); transition:none;
}
[data-theme="white"] .jplx .side-ctrls.steps .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.07);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .jplx .side-ctrls.steps .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .jplx .side-ctrls.steps .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}
.jplx .rp-data{ margin:0 0 8px; }
.jplx .rp-data .v{ font-size:13.5px; }
.jplx .concl{ margin-top:0; }
.jplx .q45-step{ font-size:12.5px; line-height:1.7; }
.jplx .q45-text{ font-size:12.5px; line-height:1.92; }
.jplx .q45-text b{ color:var(--gold-2); }

/* 方法切换：白主题下避免两个按钮都是蓝实底、分不出选中态 */
[data-theme="white"] .jplx .side-ctrls.mode2 .ctrl{
  background:#ffffff; color:#1d4fd0; border-color:#c9d6f5; box-shadow:none;
}
[data-theme="white"] .jplx .side-ctrls.mode2 .ctrl:hover{
  background:#2f6fed; color:#fff; border-color:#2f6fed;
}
[data-theme="white"] .jplx .side-ctrls.mode2 .ctrl.on{
  background:#1d4fd0; color:#fff; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}

@media (max-width:1150px){
  .jplx .demo-side{ flex:0 0 268px; }
  .jplx .side-ctrls.steps .ctrl{ font-size:10.5px; }
}
@media (max-width:900px){
  .jplx .demo-side{ flex-basis:250px; }
}

/* ============================================================
   二次函数同底等高求面积（九下 2.x · js/tdgd.js 注入）
   ============================================================ */
.tdgd .demo-side{ flex:0 0 304px; }
.tdgd .side-ctrls:not(.col){ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tdgd .side-ctrls:not(.col) .ctrl{ padding:7px 8px; }
.tdgd .side-ctrls .ctrl.wide{ grid-column:1 / -1; }
.tdgd .side-ctrls .ctrl:disabled{ opacity:.38; cursor:not-allowed; }
[data-theme="white"] .tdgd .side-ctrls .ctrl:disabled{
  color:#8fa0b8; background:#eef2f8; border-color:#d9e2f2;
  box-shadow:none; opacity:1;
}
.tdgd .side-ctrls.steps{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:2px 0 10px; }
.tdgd .side-ctrls.steps .ctrl{
  padding:7px 4px; font-size:11px; text-align:center; letter-spacing:0;
  transition:none;
}
.tdgd .side-ctrls.steps .ctrl.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold);
  font-weight:700; box-shadow:0 0 0 2px var(--gold-glow); transition:none;
}
[data-theme="white"] .tdgd .side-ctrls.steps .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.07);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .tdgd .side-ctrls.steps .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .tdgd .side-ctrls.steps .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}
.tdgd .rp-data{ margin:0 0 8px; }
.tdgd .rp-data .v{ font-size:13.5px; }
.tdgd .concl{ margin-top:0; }
.tdgd .q45-step{ font-size:12.5px; line-height:1.7; }
.tdgd .q45-text{ font-size:12.5px; line-height:1.92; }
.tdgd .q45-text b{ color:var(--gold-2); }

/* D 的位置分类：白主题下避免两个按钮都是蓝实底、分不出选中态 */
[data-theme="white"] .tdgd .side-ctrls.mode2 .ctrl{
  background:#ffffff; color:#1d4fd0; border-color:#c9d6f5; box-shadow:none;
}
[data-theme="white"] .tdgd .side-ctrls.mode2 .ctrl:hover{
  background:#2f6fed; color:#fff; border-color:#2f6fed;
}
[data-theme="white"] .tdgd .side-ctrls.mode2 .ctrl.on{
  background:#1d4fd0; color:#fff; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}

@media (max-width:1150px){
  .tdgd .demo-side{ flex:0 0 268px; }
  .tdgd .side-ctrls.steps .ctrl{ font-size:10.5px; }
}
@media (max-width:900px){
  .tdgd .demo-side{ flex-basis:250px; }
}

/* ============================================================
   铅锤法求三角形面积（九下 2.x · js/qcf.js 注入）
   ============================================================ */
.qcf .demo-side{ flex:0 0 304px; }
.qcf .side-ctrls:not(.col){ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.qcf .side-ctrls:not(.col) .ctrl{ padding:7px 8px; }
.qcf .side-ctrls .ctrl.wide{ grid-column:1 / -1; }
.qcf .side-ctrls .ctrl:disabled{ opacity:.38; cursor:not-allowed; }
[data-theme="white"] .qcf .side-ctrls .ctrl:disabled{
  color:#8fa0b8; background:#eef2f8; border-color:#d9e2f2;
  box-shadow:none; opacity:1;
}
.qcf .side-ctrls.steps{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:2px 0 10px; }
.qcf .side-ctrls.steps .ctrl{
  padding:7px 4px; font-size:11px; text-align:center; letter-spacing:0;
  transition:none;
}
.qcf .side-ctrls.steps .ctrl.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold);
  font-weight:700; box-shadow:0 0 0 2px var(--gold-glow); transition:none;
}
[data-theme="white"] .qcf .side-ctrls.steps .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.07);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .qcf .side-ctrls.steps .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .qcf .side-ctrls.steps .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}
.qcf .rp-data{ margin:0 0 8px; }
.qcf .rp-data .v{ font-size:13.5px; }
.qcf .concl{ margin-top:0; }
.qcf .q45-step{ font-size:12.5px; line-height:1.7; }
.qcf .q45-text{ font-size:12.5px; line-height:1.92; }
.qcf .q45-text b{ color:var(--gold-2); }

@media (max-width:1150px){
  .qcf .demo-side{ flex:0 0 268px; }
  .qcf .side-ctrls.steps .ctrl{ font-size:10.5px; }
}
@media (max-width:900px){
  .qcf .demo-side{ flex-basis:250px; }
}

/* ============================================================
   隐圆与相似三角形（九下 3.x · js/yyxs.js 注入）
   ============================================================ */
.yyxs .demo-side{ flex:0 0 304px; }
.yyxs .side-ctrls:not(.col){ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.yyxs .side-ctrls:not(.col) .ctrl{ padding:7px 8px; }
.yyxs .side-ctrls .ctrl.wide{ grid-column:1 / -1; }
.yyxs .side-ctrls .ctrl:disabled{ opacity:.38; cursor:not-allowed; }
[data-theme="white"] .yyxs .side-ctrls .ctrl:disabled{
  color:#8fa0b8; background:#eef2f8; border-color:#d9e2f2;
  box-shadow:none; opacity:1;
}
.yyxs .side-ctrls.steps{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:2px 0 10px; }
.yyxs .side-ctrls.steps .ctrl{
  padding:7px 4px; font-size:11px; text-align:center; letter-spacing:0;
  transition:none;
}
.yyxs .side-ctrls.steps .ctrl.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold);
  font-weight:700; box-shadow:0 0 0 2px var(--gold-glow); transition:none;
}
[data-theme="white"] .yyxs .side-ctrls.steps .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.07);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .yyxs .side-ctrls.steps .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .yyxs .side-ctrls.steps .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.28);
}
.yyxs .rp-data{ margin:0 0 8px; }
.yyxs .rp-data .v{ font-size:13.5px; }
.yyxs .concl{ margin-top:0; }
.yyxs .q45-step{ font-size:12.5px; line-height:1.7; }
.yyxs .q45-text{ font-size:12.5px; line-height:1.92; }
.yyxs .q45-text b{ color:var(--gold-2); }

@media (max-width:1150px){
  .yyxs .demo-side{ flex:0 0 268px; }
  .yyxs .side-ctrls.steps .ctrl{ font-size:10.5px; }
}
@media (max-width:900px){
  .yyxs .demo-side{ flex-basis:250px; }
}

/* ============================================================
   自由搭建正方体（七上 · 1.4 从三个方向看物体）
   右栏：步骤 / 搭建 / 视角 / 预设 / 纠错 / 显示 / 状态 / 三视图 / 解题 / 分类讨论
   ============================================================ */
.cb .demo-side{ flex:0 0 312px; }
.cb .cb-grp{ margin:0 0 10px; }
.cb .cb-lb{
  display:block; font-size:10.5px; letter-spacing:.4px;
  color:var(--text-faint); margin:0 0 4px 2px; font-weight:400;
}
.cb .cb-grid{ display:grid; gap:5px; }
.cb .cb-grid.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cb .cb-grid.c3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cb .cb-grid.c4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.cb .cb-grid .ctrl{
  padding:4px 2px; font-size:11.5px; line-height:1.4;
  text-align:center; white-space:nowrap; letter-spacing:0;
}
.cb .cb-grid .ctrl.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold); font-weight:700;
}
.cb .cb-grid .ctrl:disabled{ opacity:.45; cursor:not-allowed; }
.cb .cb-grid .ctrl.danger{ color:#ff8a80; border-color:rgba(255,107,107,.42); }
.cb .cb-grid .ctrl.danger:hover{ background:rgba(255,107,107,.12); color:#ff9e95; }

.cb .cb-views{
  background:var(--panel-2); border:1px solid var(--border);
  border-radius:8px; padding:6px 8px 2px; margin:0 0 5px;
}
.cb .cb-views svg{ width:100%; height:auto; display:block; }
.cb .cb-vleg{
  font-size:10.5px; color:var(--text-faint); line-height:1.55;
  margin:0 0 10px; padding-left:2px;
}

.cb .q45-step{ font-size:12.5px; line-height:1.7; }
.cb .q45-text{ font-size:12.5px; line-height:1.9; }
.cb .q45-text b{ color:var(--gold-2); }
.cb .q45-legend{ font-size:11.5px; gap:4px 12px; }
.cb .q45-hint{ font-size:11.5px; line-height:1.8; }
.cb .jdc-case{ font-size:12px; }

/* 普通白主题：按钮改蓝框白底，选中态实心蓝，禁用态深灰可辨 */
[data-theme="white"] .cb .cb-grid .ctrl{
  color:#1d4fd0; background:rgba(47,111,237,.06);
  border-color:#c9d6f5; font-weight:600;
}
[data-theme="white"] .cb .cb-grid .ctrl:hover{
  color:#fff; background:#2f6fed; border-color:#2f6fed; box-shadow:none;
}
[data-theme="white"] .cb .cb-grid .ctrl.on{
  color:#fff; background:#1d4fd0; border-color:#1d4fd0;
  box-shadow:0 0 0 2px rgba(47,111,237,.26);
}
[data-theme="white"] .cb .cb-grid .ctrl:disabled{
  opacity:1; color:#94a0b0; background:#f4f6f9; border-color:#e3e8f0;
}
[data-theme="white"] .cb .cb-grid .ctrl.danger{
  color:#b3261e; border-color:#e8b4b0; background:#fff7f6;
}
[data-theme="white"] .cb .cb-views{ background:#f7f9fc; border-color:#dde3ee; }
[data-theme="white"] .cb .q45-text b{ color:#b3261e; }

@media (max-width:1150px){
  .cb .demo-side{ flex:0 0 274px; }
  .cb .cb-grid .ctrl{ font-size:10.5px; padding:4px 1px; }
  .cb .cb-grid.c4{ gap:4px; }
}
@media (max-width:900px){
  .cb .demo-side{ flex-basis:254px; }
}

/* ============================================================
   账号：顶栏入口 + 未开通时的拦截卡片
   ============================================================ */
.user-chip{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 13px; border-radius:999px;
  border:1px solid var(--border-2);
  color:var(--text-dim);
  text-decoration:none;
  font-size:12.5px;
  white-space:nowrap;
  max-width:220px; overflow:hidden; text-overflow:ellipsis;
  transition:color .16s, border-color .16s, background .16s;
}
.user-chip:hover{ color:var(--text); border-color:var(--gold); }
.user-chip.on{
  color:#1a1408; background:var(--gold); border-color:var(--gold); font-weight:600;
}
.buy-chip{ border-color:var(--gold); color:var(--gold-2); }
.buy-chip:hover{ background:var(--gold-soft); }

[data-theme="white"] .user-chip{ color:#3d4a5f; border-color:#d3dae5; background:#fff; }
[data-theme="white"] .user-chip:hover{ color:#1d4fd0; border-color:#9db8ea; }
[data-theme="white"] .user-chip.on{ color:#fff; background:#1d4fd0; border-color:#1d4fd0; }

.lock-wrap{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.lock-card{
  width:100%; max-width:420px;
  text-align:center;
  border:1px solid var(--border-2);
  border-radius:16px;
  background:var(--panel);
  padding:30px 26px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.lock-ico{
  width:52px;height:52px;margin:0 auto 14px;
  border-radius:14px; display:grid; place-items:center;
  background:var(--gold-soft); color:var(--gold);
  font-family:var(--serif); font-size:24px;
  border:1px solid var(--border-2);
}
.lock-card h3{
  font-size:16px; font-weight:500; margin:0 0 8px; color:var(--text);
}
.lock-card p{
  font-size:13px; line-height:1.85; color:var(--text-dim); margin:0 0 18px;
}
.lock-card p.hint{
  font-size:12px; color:var(--text-faint); margin:16px 0 0;
}
.lock-card p b{ color:var(--text); font-weight:600; }
.lock-actions{ display:flex; flex-direction:column; gap:9px; }
.lock-btn{
  display:block; padding:11px 16px; border-radius:10px;
  text-decoration:none; font-size:14px;
  border:1px solid var(--gold);
  color:#1a1408; background:var(--gold); font-weight:700;
  transition:filter .16s;
}
.lock-btn:hover{ filter:brightness(1.06); }
.lock-btn.ghost{
  background:transparent; border-color:var(--border-2);
  color:var(--text-dim); font-weight:400;
}
.lock-btn.ghost:hover{ color:var(--text); border-color:var(--gold); }

[data-theme="white"] .lock-btn.ghost{ color:#4a5566; border-color:#d3dae5; }
[data-theme="white"] .lock-btn{ background:#1d4fd0; border-color:#1d4fd0; color:#fff; }

/* ============================================================
   试看（非会员每天 N 个模型 × M 分钟）
   ============================================================ */

/* 倒计时角标：fixed 定位，不受演示区重绘影响；pointer-events:none 不挡操作 */
.trial-badge{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:flex; align-items:center; gap:7px;
  padding:7px 13px 7px 11px; border-radius:999px;
  background:rgba(20,20,22,.9); border:1px solid var(--border-2);
  color:var(--text-dim); font-size:12px; line-height:1;
  font-family:var(--sans);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  pointer-events:none; letter-spacing:.02em;
}
.trial-badge .tb-dot{
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  animation:tbPulse 1.8s ease-in-out infinite;
}
.trial-badge b{
  color:var(--gold); font-weight:600; margin-left:1px;
  font-variant-numeric:tabular-nums;
}
.trial-badge.warn{ border-color:#d99a33; }
.trial-badge.warn b{ color:#e8a13a; }
.trial-badge.warn .tb-dot{ background:#e8a13a; animation-duration:.9s; }
@keyframes tbPulse{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }

/* 结束遮罩：盖在演示区上，iframe 留着不销毁 */
.trial-end{
  position:absolute; inset:0; z-index:30;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(10,10,12,.74);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:teIn .22s ease-out;
}
.trial-end .lock-card{ background:var(--bg-2); }
@keyframes teIn{ from{ opacity:0 } to{ opacity:1 } }

[data-theme="white"] .trial-end{ background:rgba(246,248,251,.86); }
[data-theme="white"] .trial-badge{
  background:rgba(255,255,255,.95); border-color:#d3dae5; color:#4a5566;
}
[data-theme="white"] .trial-badge b{ color:#9a6b12; }
[data-theme="white"] .trial-badge .tb-dot{ background:#c08a1e; }

@media (max-width:700px){
  .trial-badge{ right:10px; bottom:10px; font-size:11px; padding:6px 11px; }
}

/* ============================================================
   费马点模型（八下 第一章 · js/fermat.js 注入）
   ============================================================ */

/* 右侧面板里的根号 / 分数（通用，任何模型都能用） */
.fsqrt{ display:inline-flex; align-items:stretch; vertical-align:-.06em; }
.fsqrt svg{ width:.54em; flex:0 0 auto; display:block; }
.fsqrt .rv{
  border-top:1px solid currentColor;
  padding:1px 2px 0 1px; line-height:1.1;
}
.ffrac{
  display:inline-flex; flex-direction:column; align-items:center;
  vertical-align:middle; margin:0 2px; line-height:1.1; font-size:.95em;
}
.ffrac>span{ display:block; padding:0 3px; }
.ffrac>span:first-child{ border-bottom:1px solid currentColor; padding-bottom:1px; }

.fermat .demo-side{ flex:0 0 320px; }
.fermat .demo-side .q45-step{ font-size:12.5px; line-height:1.7; }
.fermat .demo-side .q45-text{ font-size:12.5px; line-height:1.9; }
.fermat .demo-side .concl{ font-size:12px; line-height:1.8; }
.fermat .demo-side .concl b{ color:var(--gold-2); }

/* 控制按钮 / 步骤按钮：两列紧凑排布 */
.fermat .ft-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:7px;
  margin:4px 0 12px;
}
.fermat .ft-grid .ctrl{
  padding:7px 6px; font-size:12px; line-height:1.3;
  white-space:nowrap; letter-spacing:0;
}
.fermat .ft-grid .ctrl:disabled{ opacity:.4; cursor:not-allowed; }
.fermat .ft-grid .ctrl:disabled:hover{
  color:var(--text-dim); background:var(--panel); border-color:var(--border); box-shadow:none;
}
.fermat .demo-side .rp-data{ gap:7px 10px; }
.fermat .demo-side .rp-data .v{ font-size:14px; }

[data-theme="white"] .fermat .ft-grid .ctrl{
  background:#ffffff; border-color:#cbd5e1; color:#33405a;
}
[data-theme="white"] .fermat .ft-grid .ctrl:hover{
  background:#eff4ff; border-color:#2f6fed; color:#1d4fd0; box-shadow:none;
}
[data-theme="white"] .fermat .ft-grid .ctrl.on{
  background:#2f6fed; border-color:#2f6fed; color:#ffffff;
}
[data-theme="white"] .fermat .ft-grid .ctrl:disabled{
  background:#eef2f8; border-color:#dde4f0; color:#9aa8bd;
}

@media (max-width:1240px){
  .fermat .demo-side{ flex:0 0 292px; }
  .fermat .ft-grid .ctrl{ font-size:11px; padding:6px 4px; }
}
@media (max-width:980px){
  .fermat .demo-side{ flex-basis:262px; }
  .fermat .demo-side .q45-text,
  .fermat .demo-side .q45-step{ font-size:12px; }
}

/* ============================================================
   立体图形的分类（七上 1.1 · js/solid.js 注入）
   ============================================================ */
.solid .demo-side{ flex:0 0 320px; }

/* 分类导航：两列 */
.solid .sd-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:7px;
  margin:4px 0 10px;
}
.solid .sd-grid .ctrl{ padding:7px 6px; font-size:12px; letter-spacing:0; }

/* 当前分类 */
.sd-now{
  font-family:var(--serif); font-weight:700; font-size:15px;
  color:var(--text); margin:2px 0 6px;
}
.sd-now.hot{ color:var(--gold-2); }

.solid .sd-data{ grid-template-columns:1fr 1fr; gap:7px 9px; margin-top:8px; }
.solid .sd-data .v{ font-size:13px; font-family:var(--sans); }
.solid .sd-data .item.wide{ grid-column:1 / -1; }
.solid .sd-data .v.sm{ font-size:12px; font-weight:600; line-height:1.62; color:var(--text); }

/* 结构速记表 */
.sd-table{
  width:100%; border-collapse:collapse; margin:2px 0 2px;
  font-size:12px; color:var(--text-dim);
}
.sd-table th{
  font-weight:700; font-size:11px; color:var(--text-faint);
  text-align:left; padding:5px 6px; border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.sd-table td{ padding:5px 6px; border-bottom:1px dashed var(--border); }
.sd-table td.k{ color:var(--gold-2); font-weight:700; white-space:nowrap; }
.sd-table tr:last-child td{ border-bottom:0; }

.solid .q45-legend i{ border-radius:3px; }
.solid .kval-case{ font-size:12.5px; line-height:1.82; }

@media (max-width:1240px){
  .solid .demo-side{ flex:0 0 292px; }
  .solid .sd-grid .ctrl{ font-size:11px; padding:6px 4px; }
  .sd-table{ font-size:11.5px; }
}
@media (max-width:980px){
  .solid .demo-side{ flex-basis:262px; }
  .solid .kval-case{ font-size:12px; }
  .solid .sd-data .v{ font-size:12px; }
}