/* ============================================================
   山河纪 · 学科共用件的样式（子栏目 3D 画布 + 「用一句话调参」控件）
   ------------------------------------------------------------
   单独一份、并在 math/style.css 之后引入，原因有两个：
     1) 这两个控件是三科共用的，塞进任何**某一科**的 style.css 都会造成
        「数学改一行、物理化学跟着变」的隐性耦合；
     2) 颜色一律走全站变量（--accent / --line / --cardF …），
        多套主题与深色模式下必须跟着一起变 —— 写死颜色的画布在深色主题里
        就是一块突兀的白斑。
   ★ 画布本身由 JS 用 getComputedStyle 读变量后画进去（canvas 里没法用 var()），
     所以这里只管容器与控件，不管画布内部的描边填色。
   ============================================================ */

/* ---------- 3D 画布容器 ---------- */
.s3d-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--cardF, var(--panel));
  overflow: hidden;
}
canvas.s3d {
  display: block;
  max-width: 100%;
  touch-action: none;
  user-select: none;
}
.s3d-hint {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 11px;
  color: var(--tx2);
  pointer-events: none;
  letter-spacing: .2px;
}
.s3d-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.s3d-tools .m-stat-line { flex: 1 1 100%; margin-top: 0; }

/* ---------- 「用一句话调参」 ---------- */
.sai { margin: 10px 0 2px; }
.sai-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sai-in { flex: 1 1 260px; min-width: 180px; }
.sai-go { flex: 0 0 auto; }
.sai .m-stat-line { margin-top: 8px; }
.sai-dim { color: var(--tx2); }
.sai-warn { color: var(--red, #d9534f); }
.sai-raw {
  display: block;
  margin: 6px 0 4px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px dashed var(--line);
  background: var(--panel);
  color: var(--tx2);
  font-size: 12px;
  word-break: break-all;
}
.sai-presets, .sai-ex {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.sai-pt { font-size: 12px; color: var(--tx2); margin-right: 2px; }
.sai-exb {
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--tx2);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.sai-exb:hover { color: var(--accent); border-color: var(--accent); }
.m-btn.sm { padding: 3px 10px; font-size: 12px; }

/* 窄屏：输入框与按钮各占整行，避免「按这句话调」被挤成两个字换行 */
@media (max-width: 560px) {
  .sai-row { flex-direction: column; align-items: stretch; }
  .sai-in, .sai-go { flex: 1 1 auto; width: 100%; }
}