/* 移項マスター固有の表示。式・移項・ドラッグ位置と入力処理は既存のまま。 */
.appearance-switch { margin: 0 0 20px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-btn.active { outline: 2px solid var(--look-accent); outline-offset: 3px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-sub-btn { color: var(--tool-answer-ink); background: var(--tool-answer); border-color: var(--look-border); box-shadow: var(--tool-control-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .auto-calc-toggle { color: var(--look-ink); background: transparent; border: 0; box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .auto-calc-track { background: var(--look-border); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .auto-calc-toggle input:checked + .auto-calc-track { background: var(--look-accent); border-color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .auto-calc-knob { background: #fff; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-text, .equals-sign, .history-box, .paren-bracket, .manual-merge-expr, .direct-answer-display, .result-entry) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .equals-sign.crossing { color: var(--look-danger); text-shadow: 0 0 12px var(--look-danger-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.drag-hint, .history-title, .floating-manual-close, .direct-frac-placeholder) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.manual-calc-prompt, .floating-manual-title, .hirei-tap-hint, .bunshou-instruction, .bunshou-hint-title, .bunshou-hint-diag-cap, .result-entry-hint, .direct-frac-placeholder.active) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.op-corner-btn, .bunshou-hint-btn, .hint-fill-btn, .btn-purple) { color: var(--tool-special-ink); background: var(--tool-special); border: 2px solid var(--tool-frame); border-radius: var(--tool-key-radius); box-shadow: var(--tool-control-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.op-corner-btn, .bunshou-hint-btn, .hint-fill-btn, .btn-purple):hover:not(:disabled) { color: var(--look-ink); background: var(--look-accent-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.op-corner-btn, .bunshou-hint-btn, .hint-fill-btn, .btn-purple):active:not(:disabled) { transform: translateY(1px); box-shadow: var(--tool-control-pressed-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .op-corner-btn:disabled { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.term-card, .frac-block) { color: var(--work-zero-ink); background: var(--work-zero-bg); border: 2px solid var(--work-zero-border); border-radius: var(--work-card-radius); box-shadow: var(--work-card-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .var-term { color: var(--letter-ink); background: var(--letter-bg); border-color: var(--letter-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.const-term, .const-term-pos, .const-term-neg) { color: var(--number-ink); background: var(--number-bg); border-color: var(--number-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .term-card.paren-coef-card { outline-color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .term-card:not(.ghost):hover { box-shadow: var(--work-card-hover-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-side.drop-ready { border-color: var(--look-warm) !important; background: var(--look-warm-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-side.reorder-ready { border-color: var(--look-success) !important; background: var(--look-success-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .merge-pill-wrap { outline-color: var(--look-accent); box-shadow: 0 0 0 5px var(--look-accent-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .result-fraction-line { border-color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.floating-manual-panel, .direct-answer-calc, .result-answer-calc) { color: var(--look-ink); background: var(--tool-panel); border: 2px solid var(--tool-frame); border-radius: var(--tool-radius); box-shadow: var(--tool-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.manual-calc-display, .floating-manual-body .manual-calc-display, .direct-answer-display, .result-slot) { color: var(--look-ink); background: var(--tool-display); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .result-slot.active { color: var(--look-warm); background: var(--look-warm-soft); border-color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.manual-calc-display.wrong, .result-slot.wrong, .direct-answer-display.wrong) { color: var(--look-danger); background: var(--look-danger-soft); border-color: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .result-slot.completed { color: var(--look-success); background: var(--look-success-soft); border-color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.manual-key, .floating-manual-body .manual-key) { color: var(--look-ink); background: var(--tool-key); border: 2px solid var(--tool-key-frame); border-radius: var(--tool-key-radius); box-shadow: var(--tool-key-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.manual-key.sign-key, .manual-key.back-key, .manual-key.result-fraction-tall-key, .manual-key.result-fraction-wide-key) { color: var(--tool-special-ink); background: var(--tool-special); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .manual-key.clear-key { color: var(--tool-action-ink); background: var(--tool-action); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .manual-key.var-key { color: var(--look-success); background: var(--look-success-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .manual-key:active { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.bunshou-hint-table th, .bunshou-hint-table td) { color: var(--look-ink); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.bunshou-hint-table th, .bunshou-hint-table .rowhead) { background: var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-hint-table .mvar { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-hint-inline { color: var(--look-ink); border-color: var(--look-border); }
/* 文章題のヒント（過不足の線分図）は暗い背景用の明るい字（薄灰・黄・桃・薄緑）を style 属性で直書きしている。
   明るい見た目では白い紙にとけて読めないので、その見た目の「字・見出し・たりない・余る」の色に置きかえる（2026-09-25）。
   ※ 縦スマホの幅合わせが style を書き直すと #e2e8f0 が rgb(226, 232, 240) の形に変わるので、両方の書き方で拾う。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-hint-inline :is([style*="#e2e8f0"], [style*="226, 232, 240"]) { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-hint-inline :is([style*="#fbbf24"], [style*="#ffd54a"], [style*="#fde68a"], [style*="251, 191, 36"], [style*="255, 213, 74"], [style*="253, 230, 138"]) { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-hint-inline :is([style*="#fca5a5"], [style*="252, 165, 165"]) { color: var(--look-danger) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-hint-inline :is([style*="#6ee7b7"], [style*="110, 231, 183"]) { color: var(--look-success) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-hint-inline :is([style*="rgba(255,255,255,0.45)"], [style*="255, 255, 255, 0.45"]) { border-left-color: var(--look-border) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-hint-inline :is([style*="rgba(255,255,255,0.14)"], [style*="255, 255, 255, 0.14"]) { background: var(--look-soft) !important; border-color: var(--look-border) !important; }
/* 等式変形2の「両辺チェンジ」の案内（黄色の直書き）も同じく見出し色に */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #divSection :is([style*="#fbbf24"], [style*="251, 191, 36"]) { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-hirei-template .bh-box { color: var(--look-ink); background: var(--look-surface); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-hirei-template .bh-box.active { border-color: var(--look-warm); box-shadow: 0 0 0 2px var(--look-warm-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-hirei-template .bh-sep { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-hirei-template.done .bh-box { color: var(--look-success); border-color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bunshou-hirei-template.wrong .bh-box.active { color: var(--look-danger); background: var(--look-danger-soft); border-color: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.solved-card, .challenge-intro-overlay > div) button { color: var(--tool-special-ink); background: var(--tool-special); border-color: var(--tool-frame); }
html:is([data-math-look="pop"], [data-math-look="simple"]) { --letter-ink: #125980; --letter-bg: #a6e6ff; --letter-border: #176c9a; --number-ink: #195434; --number-bg: #ddf5b8; --number-border: #478329; }
html[data-math-look="pastel"] { --letter-ink: #51419b; --letter-bg: #e5deff; --letter-border: #8d78c7; --number-ink: #195d40; --number-bg: #dcf8e9; --number-border: #4b9b75; }
html[data-math-look="elegant"] {
 --letter-ink: var(--work-positive-ink); --letter-bg: var(--work-positive-bg); --letter-border: var(--work-positive-border);
 --number-ink: var(--work-zero-ink); --number-bg: var(--work-zero-bg); --number-border: var(--work-zero-border);
}
html[data-math-look="elegant"] :is(.const-term, .const-term-pos, .const-term-neg) { --term-metal-edge: #7b899d; }
html[data-math-look="elegant"] .paren-coef-card { color: var(--work-negative-ink); background: var(--work-negative-bg); border-color: var(--work-negative-border); --term-metal-edge: #9e694c; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) :is(#btn-prev, #btn-next, #btn-restart-top) { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) #btn-restart-top { background: var(--look-surface) !important; border: 2px solid var(--look-border) !important; box-shadow: 0 3px 0 var(--look-shadow) !important; }
@media (max-width: 600px) {
 .appearance-switch { gap: 7px; margin-bottom: 15px; }
 html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .nav-btns { width: 100%; gap: 6px; }
 html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .nav-btns > button { flex: 1; width: auto !important; min-width: 0 !important; padding-inline: 4px !important; font-size: 11px !important; }
}
/* 途中式・分数ブロック・移動中の係数にも同じ読みやすい色を使う。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .step { color: var(--look-ink); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .step.current { color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .frac-block {
  color: var(--letter-ink) !important; background: var(--letter-bg) !important; box-shadow: var(--work-card-shadow) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) [data-paren-fly] { color: var(--look-ink) !important; text-shadow: none !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .notif { color: var(--look-ink); background: var(--look-surface); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .op-swap-btn:active:not(:disabled) { transform: translate(-50%, 1px); }
@media (max-width: 600px) {
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-btn-ikou { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-sub-btn { position: static; transform: none; padding: 2px 7px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .q-instruction { top: 50px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .question-box { padding-top: 78px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .op-panel { padding-top: 80px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .op-swap-btn { top: 42px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .op-corner-right { gap: 4px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .op-corner-right button { padding: 5px 6px; font-size: 10px; white-space: nowrap; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .auto-calc-toggle { gap: 4px; font-size: 10px; }
}

/* 両辺をわる数の玉。飛行中・入力待ちの両方に適用し、位置と大きさは保持する。 */
html[data-math-look="pop"] .divisor-orb {
  color: #15364f !important;
  background: radial-gradient(circle at 28% 22%, #e4f9ff, #8ddfff 48%, #35a8dd) !important;
  box-shadow: inset 0 0 0 3px #15364f, inset 0 5px 0 #ffffff88, 3px 4px 0 #15364f, 0 8px 16px #15364f26 !important;
}
html[data-math-look="pastel"] .divisor-orb {
  color: #583179 !important;
  background: radial-gradient(circle at 28% 22%, #fff8ff, #efd9ff 48%, #d3afea) !important;
  box-shadow: inset 0 0 0 3px #fff, inset 0 5px 0 #ffffffaa, 0 4px 0 #b399d2, 0 8px 18px #75559b26 !important;
}
html[data-math-look="elegant"] .divisor-orb {
  color: #493516 !important;
  background: linear-gradient(135deg, #b99246, #fff1c2 27%, #ead091 49%, #fff5cf 67%, #c5a05b) !important;
  box-shadow: inset 0 0 0 2px #a27c35, inset 0 0 0 5px #fff4d288, inset 0 0 0 6px #a27c3555, 0 4px 0 #a18447, 0 8px 18px #4b35162b !important;
}

/* 明るいデザインで白地に白になっていた所（2026-09-25の指摘「比例式の操作枠の約分ボタンが白地に白」＋一斉点検）。
   約分ボタン4つ・その中の丸と斜線・比例式の「：」「＝」・移項の符号エフェクト・上から降る「×k」の札・
   シンプルの「わる数の玉」。暗い「いつもの」は変えない */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hirei-op-btn:not(.cross) {
  color: var(--tool-special-ink); background: var(--tool-special); border: 2px solid var(--tool-frame);
  border-radius: var(--tool-key-radius); box-shadow: var(--tool-control-shadow);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hirei-op-btn:not(.cross):hover:not(:disabled) { color: var(--look-ink); background: var(--look-accent-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hpm.sl::after { color: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hirei-sep { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ikoufx-sign { color: var(--look-danger); text-shadow: 0 1px 3px rgba(0,0,0,0.25); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ikoufx-ring { border-color: var(--look-danger); box-shadow: 0 0 12px 1px var(--look-danger-soft); }
/* 上から降る「×k」の札（JSが色を直接書いているので !important） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) body > div:is([style*="color: #ffd700"], [style*="color: #fbbf24"], [style*="color: #ff2a85"], [style*="color: rgb(255, 215, 0)"], [style*="color: rgb(251, 191, 36)"], [style*="color: rgb(255, 42, 133)"]) { color: var(--look-danger) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important; }
html[data-math-look="simple"] .divisor-orb {
  color: #28323a !important;
  background: radial-gradient(circle at 28% 22%, #ffffff, #e5eef3 48%, #adbfcb) !important;
  box-shadow: inset 0 0 0 2px #365e79, 0 2px 0 #dfe3e6, 0 6px 12px #28323a1a !important;
}
html[data-math-look="elegant"] .hpm.sl::after { color: #f2c94c; }   /* エレガントは約分ボタンの地が濃紺なので、斜線は明るい金 */