/* 学習の処理と配置は維持し、配色のみを各デザインへ合わせる。 */
.appearance-switch { margin: 0 auto 24px; }
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"]) :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="elegant"], [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"]) .mode-chip { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-text,.q-instruction,.solved-text,.kai-handle,.teiri-sheet) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.word-placeholder,.kai-placeholder,.kai-note,.work-footer) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.assumption-line,.condition-title,.cong-symbol,.feedback,.input-guide,.hint-title,.hint-circle,.total-ways-diagonal-note,.proof-variant-label,.answer-inline.bare,.ans-note,.kai-note.show) { color: var(--look-warm); text-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.answer-btn,.btn-answer,.btn-answer-input,.ai-explain-btn,.teiri-shape-btn,.teiri-slide-toggle,#teiri-back-btn,#teiri-forward-btn,.highlight-btn) { color: var(--tool-special-ink); background: var(--tool-special); border: 2px solid var(--tool-key-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(#answer-toggle,#btn-answer,#step-forward-btn,#proof-forward-btn,#teiri-forward-btn,#teiri-reset-btn) { color: var(--tool-answer-ink); background: var(--tool-answer); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.answer-btn,.btn-answer,.btn-answer-input,.ai-explain-btn,.teiri-shape-btn,.teiri-slide-toggle,#teiri-back-btn,#teiri-forward-btn,.highlight-btn):active:not(:disabled) { 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"]) :is(.answer-btn,.btn-answer,.btn-answer-input,.ai-explain-btn,.teiri-shape-btn,.teiri-slide-toggle,#teiri-back-btn,#teiri-forward-btn,.highlight-btn):disabled { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.key-btn,.word-btn,.choice-btn,.numpad button,.kai-numpad button) { 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(.key-btn,.word-btn,.choice-btn,.numpad button,.kai-numpad button):hover:not(:disabled) { filter: brightness(1.04); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.key-btn,.word-btn,.choice-btn,.numpad button,.kai-numpad button):active:not(:disabled) { box-shadow: inset 0 2px 3px #0002; transform: translateY(2px); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.key-btn.utility,.word-btn.utility,.numpad .clear-btn,.numpad .back-btn,.kai-numpad .kai-back) { color: var(--tool-action-ink); background: var(--tool-action); }
html[data-math-look="elegant"] :is(.key-btn.utility,.word-btn.utility,.numpad .clear-btn,.numpad .back-btn,.kai-numpad .kai-back) { 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(.key-btn.submit,.word-btn.submit,#simplify-btn) { color: var(--tool-primary-ink); background: var(--tool-primary); border: 2px solid var(--tool-key-frame); 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(.tri-input,.word-answer,.property-sentence,.property-blank,:where(#proof-lines),.proof-input,.proof-fill,.answer-inline,.kai-display,.kai-slot,.fraction-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"]) :is(.word-pill,.step-pill,.total-ways-note) { color: var(--look-warm); background: var(--look-warm-soft); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.slot.active,.property-blank.active,.proof-fill.active,.fraction-slot.active,.kai-slot.active,.highlight-btn.active) { color: var(--tool-answer-ink); background: var(--tool-answer); border-color: var(--look-accent); box-shadow: 0 0 0 2px var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.choice-btn.correct,.ok-badge,.kai-display.correct) { 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(.proof-line.done,.solved-answer,.solved-answer .katex) { color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .proof-line.active { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.choice-btn.wrong,.tri-input.wrong,.slot.wrong,.proof-fill.active.wrong,.kai-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"]) #kai-overlay { 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(.fraction-bar,.kai-bar) { background: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .kai-numpad .kai-frac-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"]) .kai-numpad .kai-frac-key .katex { color: inherit; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.bug-modal,.portrait-lock-card) { color: var(--look-ink); background: var(--look-surface); border: 2px solid var(--look-border); box-shadow: var(--tool-dialog-shadow); }
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"]) .portrait-lock { color: var(--look-ink); background: var(--look-bg); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.bug-modal h3,.portrait-lock-title,.portrait-lock-app-title strong) { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.portrait-lock-text,.portrait-lock-app-title,.portrait-lock-continue span) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .portrait-lock-continue { color: var(--tool-primary-ink); background: var(--tool-primary); border: 2px solid var(--tool-key-frame); }
@media(max-width:600px){
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .nav-row > button { min-width:0 !important; width:auto !important; flex:1; }
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#hint-container,.oj-explain,.oj-kaisetsu) :is([fill="#fff"],[fill="#ffffff"],[fill="#e2e8f0"],[fill="#f8fafc"]) { fill: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#hint-container,.oj-explain,.oj-kaisetsu) :is([fill="#fbbf24"],[fill="#fde68a"],[fill="#ffd700"],[fill="#facc15"]) { fill: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#hint-container,.oj-explain,.oj-kaisetsu) :is([fill="#f472b6"],[fill="#f9a8d4"]) { fill: #b23d79; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#hint-container,.oj-explain,.oj-kaisetsu) [fill^="rgba(255,255,255"] { fill: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#hint-container,.oj-explain,.oj-kaisetsu) :is([stroke="#fff"],[stroke="#ffffff"],[stroke="#e2e8f0"],[stroke="#f8fafc"]) { stroke: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#hint-container,.oj-explain,.oj-kaisetsu) :is([stroke="#fbbf24"],[stroke="#fde68a"],[stroke="#ffd700"],[stroke="#facc15"]) { stroke: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#hint-container,.oj-explain,.oj-kaisetsu) :is([stroke="#f472b6"],[stroke="#f9a8d4"]) { stroke: #b23d79; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#hint-container,.oj-explain,.oj-kaisetsu) [stroke^="rgba(255,255,255"] { stroke: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#hint-container,.oj-explain,.oj-kaisetsu) :is([style*="color: #fff"],[style*="color:#fff"],[style*="color: rgba(255"],[style*="color:rgba(255"]) { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#hint-container,.oj-explain,.oj-kaisetsu) :is([style*="#fbbf24"],[style*="#ffd700"],[style*="251, 191, 36"],[style*="255, 215, 0"]) { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hint-table :is(th,td.label-cell) { color: var(--look-muted); border-color: var(--look-border) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hint-table td.grid-cell { color: var(--look-ink); border-color: var(--look-border) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hint-table td.grid-cell.match { background: var(--look-warm-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hint-circle { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .total-ways-number { color: var(--tool-answer-ink); background: var(--tool-answer); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .total-ways-sticky { color: var(--tool-answer-ink); background: var(--tool-answer); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.solved-title,.solved-label) { color:var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #hint-container [fill="#bae6fd"] { fill:var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #highlight-toggle-btn.active { color:var(--tool-answer-ink); background:var(--tool-answer); box-shadow:inset 0 2px 5px #25324b45; }

@media(max-width:600px){
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .question-box { padding-top:60px; }
}