/* 大問1の外枠。配置と分野・チャレンジの動作は変えず、単体アプリの5デザインに合わせる。 */
.appearance-switch { margin:18px auto 0; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) :is(.content-area,.app-frame) { background:transparent; box-shadow:none; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) :is(.src-app-label,.test-complete-title) { color:var(--look-ink); }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) :is(.src-app-btn,.test-giveup-btn,.test-close-btn) { color:var(--look-ink); background:var(--look-surface); border:1px solid var(--look-border)!important; box-shadow:0 2px 0 var(--look-shadow); }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .src-app-btn::before { background:var(--look-accent); }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) :is(.test-bar,.test-next-btn,.test-again-btn) { color:var(--look-ink); background:var(--look-accent-soft); border:1px solid var(--look-border); box-shadow:0 3px 0 var(--look-shadow); }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .test-complete-card { color:var(--look-ink); background:var(--look-surface); border:2px solid var(--look-border); box-shadow:0 8px 28px #28323a26; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .bug-report-btn { color:var(--look-muted); 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"]) body > canvas[style*="z-index: 9998"] { filter:var(--oj-light-ink-filter); }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) button[aria-label="手書き色を切り替え"] { background:#fff!important; border-color:var(--look-border)!important; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) button[aria-label="手書き色を切り替え"] > span { filter:var(--oj-light-ink-filter); }
html[data-math-look="pop"] .cat-calc { --mode-paper:#ffb65c; }
html[data-math-look="pop"] .cat-eq { --mode-paper:#73e1dd; }
html[data-math-look="pop"] .cat-func { --mode-paper:#72c9fa; }
html[data-math-look="pop"] .cat-geo { --mode-paper:#b0e66f; }
html[data-math-look="pop"] .cat-data { --mode-paper:#c4ed48; }
html[data-math-look="pop"] .cat-test { --mode-paper:#ffd24d; }
html[data-math-look="pastel"] .mode-btn { --candy-shadow:#d5a6d4; }
html[data-math-look="pastel"] .cat-calc { --candy-top:#fff7e9; --candy-bottom:#ffeace; --mode-ink:#865017; }
html[data-math-look="pastel"] .cat-eq { --candy-top:#f8efff; --candy-bottom:#f1e2ff; --mode-ink:#583179; }
html[data-math-look="pastel"] .cat-func { --candy-top:#e7f3ff; --candy-bottom:#d7eaff; --mode-ink:#345a7e; }
html[data-math-look="pastel"] .cat-geo { --candy-top:#e9fbf1; --candy-bottom:#dcf8e9; --mode-ink:#195d40; }
html[data-math-look="pastel"] .cat-data { --candy-top:#fff0f7; --candy-bottom:#ffe2ed; --mode-ink:#98436b; }
html[data-math-look="pastel"] .cat-test { --candy-top:#fff0ac; --candy-bottom:#ffe68a; --mode-ink:#714717; }
html[data-math-look="elegant"] .cat-calc { --jewel-top:#735746; --jewel-base:#483a32; }
html[data-math-look="elegant"] .cat-eq { --jewel-top:#655375; --jewel-base:#40334e; }
html[data-math-look="elegant"] .cat-func { --jewel-top:#455b7d; --jewel-base:#2b3d5b; }
html[data-math-look="elegant"] .cat-geo { --jewel-top:#426754; --jewel-base:#254537; }
html[data-math-look="elegant"] .cat-data { --jewel-top:#835463; --jewel-base:#542f3d; }
html[data-math-look="elegant"] .cat-test { color:#503812; background:var(--tool-primary); text-shadow:none; }
html[data-math-look="simple"] :is(.src-app-btn,.test-giveup-btn,.test-close-btn,.test-bar,.test-next-btn,.test-again-btn) { border-radius:8px; box-shadow:0 1px 2px #28323a12; }
html[data-math-look="simple"] .test-complete-card { border-width:1px; border-radius:12px; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="simple"]) .mode-btn.active { outline:2px solid var(--look-accent); outline-offset:2px; filter:none; }
@media(max-width:600px) {
 .appearance-switch { margin-top:14px; }
 html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) header .subtitle { margin-bottom:0; }
}