/* 同類項専用。項の位置・結合・分配・通分の処理と数式の書体は元のまま。 */
.appearance-switch { margin: 0 0 20px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .appearance-switch { margin: 0 0 20px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .subtitle { opacity: 1; }
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; filter: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-expr, .step-chain, .group-inner, .dist-inner, .bracket-prefix, .frac-sign, .frac-paren, .mulDiv-op, .mulDiv2-op, .mulDiv2-paren) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.game-hint, .steps-title, .tsubun-guide, .tile-action) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.bracket-symbol, .group-paren, .dist-paren, .dist-coeff, .frac-denom, .mulDiv2-side-var, .mulDiv-merge-btn) { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.group-neg, .dist-neg, .game-hint.warning) { color: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.mulDiv-bar, .mulDiv2-bar-line, .frac-bar, .frac-term-bar) { background: currentColor; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mono-tile [data-den] { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mono-tile [data-bar] { background: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.coeff-floater, .denom-floater, .denom-soul-ghost, .mulDiv-div-btn) { color: var(--look-warm); text-shadow: 0 1px var(--look-surface); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .frac-sign.tappable-sign { color: var(--look-warm) !important; text-shadow: 0 1px var(--look-surface); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .frac-denom.tappable { color: var(--tool-special-ink); background: var(--tool-special); border-color: var(--tool-key-frame); 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(.tile, .inner-tile, .ghost, .group-tile, .dist-tile) { --term-ink: var(--work-zero-ink); --term-bg: var(--work-zero-bg); --term-border: var(--work-zero-border); color: var(--term-ink); background: var(--term-bg); border: 2px solid var(--term-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"]) :is(.var-y, .mono-den) { --term-ink: var(--work-positive-ink); --term-bg: var(--work-positive-bg); --term-border: var(--work-positive-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .var-const { --term-ink: var(--work-negative-ink); --term-bg: var(--work-negative-bg); --term-border: var(--work-negative-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.group-tile, .dist-tile) { --term-ink: var(--look-accent); --term-bg: var(--look-accent-soft); --term-border: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.group-inner, .dist-inner, .group-tile .tile-action, .dist-tile .tile-action) { color: inherit; }
html[data-math-look="elegant"] :is(.var-x, .mono-num) { --term-ink: var(--work-positive-ink); --term-bg: var(--work-positive-bg); --term-border: var(--work-positive-border); --term-metal-edge: #a18447; }
html[data-math-look="elegant"] :is(.var-y, .mono-den) { --term-ink: var(--work-zero-ink); --term-bg: var(--work-zero-bg); --term-border: var(--work-zero-border); --term-metal-edge: #7b899d; }
html[data-math-look="elegant"] :is(.var-const, .group-tile, .dist-tile) { --term-ink: var(--work-negative-ink); --term-bg: var(--work-negative-bg); --term-border: var(--work-negative-border); --term-metal-edge: #9e694c; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tile, .inner-tile, .ghost):is([style*="#4c1d95"], [style*="76, 29, 149"]) { --term-ink: var(--work-zero-ink); --term-bg: var(--work-zero-bg); --term-border: var(--work-zero-border); color: var(--term-ink) !important; background: var(--term-bg) !important; }
html[data-math-look="elegant"] :is(.tile, .inner-tile, .ghost):is([style*="#4c1d95"], [style*="76, 29, 149"]) { --term-ink: var(--work-positive-ink); --term-bg: var(--work-positive-bg); --term-border: var(--work-positive-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tile, .inner-tile, .ghost):is([style*="#065f46"], [style*="6, 95, 70"], [style*="#0c4a6e"], [style*="12, 74, 110"]) { --term-ink: var(--work-positive-ink); --term-bg: var(--work-positive-bg); --term-border: var(--work-positive-border); color: var(--term-ink) !important; background: var(--term-bg) !important; }
html[data-math-look="elegant"] :is(.tile, .inner-tile, .ghost):is([style*="#065f46"], [style*="6, 95, 70"], [style*="#0c4a6e"], [style*="12, 74, 110"]) { --term-ink: var(--work-zero-ink); --term-bg: var(--work-zero-bg); --term-border: var(--work-zero-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tile, .inner-tile, .ghost):is([style*="#78350f"], [style*="120, 53, 15"]) { --term-ink: var(--work-negative-ink); --term-bg: var(--work-negative-bg); --term-border: var(--work-negative-border); color: var(--term-ink) !important; background: var(--term-bg) !important; }
html[data-math-look="elegant"] :is(.tile, .inner-tile, .ghost):is([style*="#78350f"], [style*="120, 53, 15"]) { --term-ink: var(--work-negative-ink); --term-bg: var(--work-negative-bg); --term-border: var(--work-negative-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tile, .inner-tile, .ghost)[style*="background"]:not(.drop-target, .merge-join-left, .merge-join-right, .zero-flash) { border-color: var(--term-border) !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"]) .tile.drop-target { border-color: var(--look-accent) !important; box-shadow: 0 0 0 4px var(--look-accent-soft), var(--work-card-hover-shadow) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tile, .inner-tile):is(.merge-join-left, .merge-join-right) { border-color: var(--look-warm) !important; box-shadow: 0 4px 0 var(--look-shadow) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tooltip-bubble, .game-banner-msg) { color: var(--look-warm); background: var(--look-warm-soft); border-color: var(--look-border); text-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.add-plus-btn, .mulDiv2-div-btn) { color: var(--tool-special-ink); background: var(--tool-special); border-color: var(--tool-key-frame); box-shadow: var(--tool-control-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .add-plus-popup::after { border-top-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-btn.var-btn { 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"]) .tenkey-btn.pow-btn { color: var(--tool-special-ink); background: var(--tool-special); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .direct-frac-btn .frac-key-icon { color: var(--tool-special-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #tenkey-input::placeholder { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #tenkey-input-prefix { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #tenkey-plus-overlay { background: var(--tool-panel) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-hint-msg { 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"]) .direct-answer-fraction-display { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .direct-answer-frac-active { color: var(--look-accent); background: var(--look-accent-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .direct-answer-frac-bar { background: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #tenkey-plus-btn { color: var(--tool-primary-ink) !important; background: var(--tool-primary) !important; border: 2px solid var(--tool-key-frame) !important; box-shadow: var(--tool-key-shadow) !important; }
html[data-math-look="elegant"] .tenkey-btn.action-btn { color: #62301f; background: var(--work-negative-bg); border-color: #a26b4c; box-shadow: inset 0 1px #fff0e0, 0 3px #a26b4c; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#btn-prev, #btn-restart-top, .shape-nav-next) { 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; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-expr, .game-area, .step-chain, .game-hint, .tenkey-expr-display, .answer-reveal) :is([style*="#fff"], [style*="#e2e8f0"], [style*="#ede9fe"], [style*="255, 255, 255"], [style*="226, 232, 240"], [style*="237, 233, 254"]) { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-expr, .game-area, .step-chain, .game-hint, .tenkey-expr-display, .answer-reveal) :is([style*="#ffd700"], [style*="#fbbf24"], [style*="#ffd54a"], [style*="255, 215, 0"], [style*="251, 191, 36"], [style*="255, 213, 74"]) { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-expr, .game-area, .step-chain, .game-hint, .tenkey-expr-display, .answer-reveal) :is([style*="#6ee7b7"], [style*="#86efac"], [style*="110, 231, 183"], [style*="134, 239, 172"]) { color: var(--look-success) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bug-modal { 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"]) .bug-modal h3 { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bug-modal textarea { color: var(--look-ink); background: var(--look-soft); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bug-modal .btn-cancel { color: var(--look-ink); background: var(--look-soft); border-color: var(--look-border); }
@media (max-width: 600px) {
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .top-controls { width: 100%; gap: 6px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .top-controls > 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"]) .question-meta { flex-wrap: wrap; gap: 8px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.mode-grid, .mode-grid-bottom) { gap: 10px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.mode-btn, .btn-gen-challenge) { min-width: 0; padding-inline: 4px; font-size: .82em; }
}

/* 飛ぶ分母・係数・符号にもライトテーマの濃い色を適用する。
   JSの黄色指定・発光や色アニメーションだけを上書きし、移動・拡大は保つ。 */
html:is([data-math-look="pop"], [data-math-look="simple"]) { --work-motion-ink: #164c72; }
html[data-math-look="pastel"] { --work-motion-ink: #713c8a; }
html[data-math-look="elegant"] { --work-motion-ink: #76521d; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"])
:is(.coeff-floater, .denom-floater, .denom-soul-ghost, .tsubun-temp-el, .tsubun-sign-floater, .tsubun-merged-denom, .frac-denom:not(.tappable), .frac-sign.tappable-sign) {
  color: var(--work-motion-ink) !important;
  text-shadow: none !important;
  filter: none !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .frac-denom.tappable {
  color: var(--tool-special-ink) !important;
  text-shadow: none !important;
  filter: none !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tsubun-merge-bar {
  background: var(--work-motion-ink) !important;
}

html[data-math-look="elegant"] .tenkey-btn.action-btn:hover:not(:disabled) { filter: brightness(1.06); }
html[data-math-look="elegant"] .tenkey-btn.action-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 4px #62301f33, 0 1px #a26b4c; }