/* 高校数学6アプリの入力・完了・チャレンジ・案内画面。
   色と装飾だけを切り替え、浮動位置、開閉、無効状態、数式の書体を保つ。 */
html[data-math-look="pop"] {
  --tool-frame: #15364f; --tool-radius: 13px; --tool-key-radius: 7px;
  --tool-panel: #bfe5f5; --tool-paper: #f8fdff; --tool-display: #f7ffe7;
  --tool-shadow: 5px 6px 0 #789eb4; --tool-card-shadow: 5px 6px 0 #b2cad4;
  --tool-key: #fff; --tool-key-frame: #15364f; --tool-key-shadow: 2px 3px 0 #15364f;
  --tool-special: #99dbf6; --tool-special-ink: #15364f;
  --tool-action: #ffbb69; --tool-action-ink: #15364f;
  --tool-primary: #c4ed48; --tool-primary-ink: #15364f;
  --tool-hint: #e5f5bc; --tool-hint-ink: #385514;
  --tool-answer: #ffaf43; --tool-answer-ink: #15364f;
  --tool-dialog-border: #15364f; --tool-dialog-shadow: 7px 8px 0 #b2cad4, 0 16px 35px #15364f26;
  --tool-control-shadow: 2px 3px 0 #15364f; --tool-control-pressed-shadow: 1px 1px 0 #15364f;
  --challenge-kind-1: #ffbb69; --challenge-kind-2: #d5baff; --challenge-kind-3: #76cdf5;
  --challenge-kind-4: #b8e873; --challenge-kind-5: #ffa8cb; --challenge-kind-6: #7cddd9;
  --challenge-kind-7: #ffb6a8; --challenge-kind-8: #c9bafa; --challenge-kind-ink: #15364f;
}
html[data-math-look="pastel"] {
  --tool-frame: #fff; --tool-radius: 27px; --tool-key-radius: 16px;
  --tool-panel: linear-gradient(150deg, #fff2fb, #f5ddff 75%);
  --tool-paper: linear-gradient(145deg, #fff, #fff4fb); --tool-display: #fffcf1;
  --tool-shadow: 0 7px 0 #b68bcb, 0 13px 22px #27154c26; --tool-card-shadow: 0 6px 0 #b399d2;
  --tool-key: linear-gradient(#fff, #fff0f8); --tool-key-frame: #fff; --tool-key-shadow: 0 4px 0 #d5a6d4;
  --tool-special: #c6f0ff; --tool-special-ink: #316781;
  --tool-action: #ffd1e2; --tool-action-ink: #98436b;
  --tool-primary: linear-gradient(#fff0ac, #ffe68a); --tool-primary-ink: #714717;
  --tool-hint: #f1e2ff; --tool-hint-ink: #74458d;
  --tool-answer: #ffe68a; --tool-answer-ink: #714717;
  --tool-dialog-border: #fff; --tool-dialog-shadow: 0 8px 0 #b68bcb, 0 18px 35px #75559b26;
  --tool-control-shadow: 0 3px 0 #b399d2; --tool-control-pressed-shadow: 0 1px 0 #b399d2;
  --challenge-kind-1: #fce6cf; --challenge-kind-2: #efe3f9; --challenge-kind-3: #d9edfa;
  --challenge-kind-4: #dcf4e8; --challenge-kind-5: #fae0eb; --challenge-kind-6: #d5f4f3;
  --challenge-kind-7: #fce2de; --challenge-kind-8: #eee5f8; --challenge-kind-ink: #583179;
}
html[data-math-look="elegant"] {
  --tool-frame: #c9ab67; --tool-radius: 20px; --tool-key-radius: 11px;
  --tool-panel: linear-gradient(145deg, #fffefa, #f0e6cf 76%, #fffaf0);
  --tool-paper: #fffdf7; --tool-display: #fffef9;
  --tool-shadow: inset 0 0 0 2px #fffdf3, 0 5px 0 #b7a078, 0 12px 24px #3c352326;
  --tool-card-shadow: 0 4px 0 #ddcda9;
  --tool-key: linear-gradient(#fff, #faf5e8); --tool-key-frame: #bda26e; --tool-key-shadow: 0 3px 0 #bfaa80;
  --tool-special: #25324b; --tool-special-ink: #f7e5b5;
  --tool-action: linear-gradient(135deg, #c78f6c, #ffe1cd 26%, #e3b18e 49%, #ffe9d8 67%, #c58b68);
  --tool-action-ink: #4b2417;
  --tool-primary: linear-gradient(135deg, #b99246 0%, #f9e8b7 27%, #dec17a 53%, #fff2c9 72%, #c5a05b 100%);
  --tool-primary-ink: #3d2b12; --tool-hint: #f7eedb; --tool-hint-ink: #7b591e;
  --tool-answer: var(--tool-primary); --tool-answer-ink: #3d2b12;
  --tool-dialog-border: #c9ab67; --tool-dialog-shadow: inset 0 0 0 2px #fffdf3, 0 5px 0 #b7a078, 0 12px 30px #25324b30;
  --tool-control-shadow: inset 0 1px #fff, 0 3px 0 #a8894f, 0 5px 8px #7b591e24;
  --tool-control-pressed-shadow: inset 0 1px #fff, 0 1px 0 #a8894f;
  --challenge-kind-1: linear-gradient(135deg, #735746, #483a32);
  --challenge-kind-2: linear-gradient(135deg, #675477, #44334f);
  --challenge-kind-3: linear-gradient(135deg, #4a6382, #2a3b55);
  --challenge-kind-4: linear-gradient(135deg, #426754, #254537);
  --challenge-kind-5: linear-gradient(135deg, #7c5264, #503041);
  --challenge-kind-6: linear-gradient(135deg, #456767, #294745);
  --challenge-kind-7: linear-gradient(135deg, #835e4c, #543c32);
  --challenge-kind-8: linear-gradient(135deg, #6b577a, #44334f); --challenge-kind-ink: #fff4d6;
}
html[data-math-look="simple"] {
  --tool-frame: #bbc3c9; --tool-radius: 12px; --tool-key-radius: 6px;
  --tool-panel: #f1f5f7; --tool-paper: #fff; --tool-display: #fff;
  --tool-shadow: 0 4px 14px #28323a20; --tool-card-shadow: none;
  --tool-key: #fff; --tool-key-frame: #aeb8c0; --tool-key-shadow: 0 1px 1px #28323a12;
  --tool-special: #e1edf3; --tool-special-ink: #334d60;
  --tool-action: #f2eeee; --tool-action-ink: #84474c;
  --tool-primary: #365e79; --tool-primary-ink: #fff;
  --tool-hint: #e4eef3; --tool-hint-ink: #365e79;
  --tool-answer: #365e79; --tool-answer-ink: #fff;
  --tool-dialog-border: #bbc3c9; --tool-dialog-shadow: 0 8px 28px #28323a26;
  --tool-control-shadow: 0 1px 2px #28323a12; --tool-control-pressed-shadow: inset 0 1px 2px #28323a20;
  --challenge-kind-1: #f2ebe1; --challenge-kind-2: #eeeaf2; --challenge-kind-3: #e3edf3;
  --challenge-kind-4: #e6efe9; --challenge-kind-5: #f0e8eb; --challenge-kind-6: #e3efee;
  --challenge-kind-7: #f3e8e3; --challenge-kind-8: #eae8f0; --challenge-kind-ink: #334d60;
}

/* テンキー。背景側に置く既存の absolute 配置とドラッグ座標は変更しない。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #tenkey-modal .tenkey-content {
  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(.tenkey-title, .tenkey-title.hint, .tenkey-title-sub, .suu1-tenkey-expr, .ku-tenkey-note) { color: var(--look-accent); text-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-close-btn { color: var(--look-muted); background: var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-close-btn:active { 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(.tenkey-expr-display, .tenkey-fraction-view, .tenkey-input-wrap input) {
  color: var(--look-ink); background: var(--tool-display); border: 1px solid var(--look-border); border-radius: var(--tool-key-radius);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.suu1-preview-empty, .suu1-preview-unit, .tk-slot) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tk-slot.on { color: var(--look-warm); background: var(--look-warm-soft); box-shadow: 0 0 0 2px var(--look-border) inset; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tenkey-qbox, .tenkey-fraction-sign, .tenkey-fraction-box.active) { color: var(--look-accent); border-color: var(--look-accent); text-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .suu1-preview.correct { color: var(--look-success); background: var(--look-success-soft); box-shadow: 0 0 0 2px var(--look-success) inset; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.suu1-preview.wrong, .suu1-preview.wrong .katex, .tenkey-input-wrap.error input, .tenkey-input-wrap.error .tenkey-fraction-view) {
  color: var(--look-danger); background: var(--look-danger-soft); border-color: var(--look-danger); box-shadow: 0 0 0 2px var(--look-danger-soft);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-plus-nudge { 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"]) .tenkey-plus-message { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-plus-add { color: var(--look-success); background: var(--look-success-soft); box-shadow: var(--tool-key-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-btn {
  color: var(--look-ink); background: var(--tool-key); border: 1px 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"]) .tenkey-btn:is(.k-op, .sign-btn, .frac-btn, .undo-btn) { 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"]) .tenkey-btn:is(.k-var, .var-btn, .mul-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:is(.backspace-btn, .action-btn, .tenkey-back-btn) { 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"]) .tenkey-btn:is(.confirm-btn, .suu1-key-ok) { color: var(--tool-primary-ink); background: var(--tool-primary); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-btn:hover:not(:disabled) { border-color: var(--look-accent); filter: brightness(.98); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-btn:active:not(:disabled) { box-shadow: var(--tool-control-pressed-shadow); }
html[data-math-look="pop"] .tenkey-btn { border-width: 2px; }
html[data-math-look="pastel"] .tenkey-btn { border-width: 2px; }
html[data-math-look="elegant"] .tenkey-btn:is(.backspace-btn, .action-btn, .tenkey-back-btn) { border-color: #a26b4c; box-shadow: inset 0 1px #fff0e0, 0 3px 0 #a26b4c; }

/* 完了・チャレンジ開始・記録は同じ明るい面。動的な文字の直接指定色も補正する。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.result-backdrop, .challenge-intro-overlay, .kiroku-overlay, .bug-modal-overlay, .lock-modal) { background: #26374770 !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.result-modal, .win-card, .challenge-intro-overlay > div, .kiroku-overlay > div, .bug-modal, .lock-dialog) {
  color: var(--look-ink) !important; background: var(--tool-panel) !important;
  border: 2px solid var(--tool-dialog-border) !important; border-radius: var(--tool-radius) !important; box-shadow: var(--tool-dialog-shadow) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.result-label, .result-steps, .result-hint) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .result-answer { color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.result-btn, .result-extra-btn) {
  color: var(--tool-special-ink); background: var(--tool-special); border: 1px 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"]) .result-btn.primary { color: var(--tool-primary-ink); background: var(--tool-primary); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.result-btn, .result-extra-btn):hover { filter: brightness(.98); }
/* ボタンは下の button の規則にまかせる（ここで字を --look-ink にすると、エレガントでは濃紺のボタンに濃紺の字になり「記録」「やらない」が見えなくなる。2026-09-25） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.challenge-intro-overlay, .kiroku-overlay) :not(button)[style*="color"] { color: var(--look-ink) !important; text-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.challenge-intro-overlay, .kiroku-overlay) :is([style*="#ffd700"], [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"]) :is(.challenge-intro-overlay, .kiroku-overlay) :is([style*="#7dd3fc"], [style*="125, 211, 252"]) { color: var(--look-accent) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .kiroku-overlay [style*="border-top"] { border-color: var(--look-border) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.challenge-intro-overlay, .kiroku-overlay) button,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #challenge-result-extra button {
  color: var(--tool-special-ink) !important; background: var(--tool-special) !important;
  border: 1px solid var(--tool-key-frame) !important; border-radius: var(--tool-key-radius) !important; box-shadow: var(--tool-key-shadow) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.challenge-intro-overlay .challenge-intro-start, .kiroku-overlay .kiroku-retry-btn),
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #challenge-result-extra button[style*="linear-gradient"] { color: var(--tool-primary-ink) !important; background: var(--tool-primary) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-intro-overlay .challenge-intro-kind {
  color: var(--challenge-kind-ink) !important; background: var(--challenge-kind, var(--challenge-kind-1)) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-intro-kind:nth-child(8n + 1) { --challenge-kind: var(--challenge-kind-1); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-intro-kind:nth-child(8n + 2) { --challenge-kind: var(--challenge-kind-2); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-intro-kind:nth-child(8n + 3) { --challenge-kind: var(--challenge-kind-3); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-intro-kind:nth-child(8n + 4) { --challenge-kind: var(--challenge-kind-4); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-intro-kind:nth-child(8n + 5) { --challenge-kind: var(--challenge-kind-5); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-intro-kind:nth-child(8n + 6) { --challenge-kind: var(--challenge-kind-6); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-intro-kind:nth-child(8n + 7) { --challenge-kind: var(--challenge-kind-7); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-intro-kind:nth-child(8n + 8) { --challenge-kind: var(--challenge-kind-8); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-intro-overlay .challenge-intro-start span { color: inherit !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.challenge-intro-overlay, .kiroku-overlay) button:disabled { box-shadow: none !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-bar { color: var(--tool-primary-ink); background: var(--tool-primary); border-color: 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"]) .challenge-giveup-btn { color: var(--look-ink); background: var(--tool-paper); border-color: 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"]) .challenge-giveup-btn:hover { color: var(--look-accent); background: var(--look-accent-soft); }
/* 共通 challenge-result.css の濃紺エレガントカード向け変数を、このライトカードだけ補正。 */
html[data-math-look="elegant"] body .result-modal {
  --challenge-ink: #25324b; --challenge-warm: #7b591e; --challenge-note: #6d6658; --challenge-soft: #f5eddc;
}

/* 会員案内。リンク先、表示条件、入会操作には触れない。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .lock-benefits { color: var(--look-ink); background: var(--tool-paper); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.lock-dialog-title, .lock-benefits-title, .lock-benefits-sub, .lock-price) { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.lock-dialog-genre, .lock-benefits li, .lock-dialog-copy, .lock-mini-wrap .mini-t) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.lock-dialog-lead, .lock-benefits li b, .mini-caption) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .lock-trial { 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"]) .lock-trial b { color: inherit; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .lock-btn { border-radius: var(--tool-key-radius); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .lock-btn-primary { color: var(--tool-primary-ink); background: var(--tool-primary); 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(.lock-btn-guide, .lock-btn-login) { color: var(--tool-special-ink); background: var(--tool-special); border-color: var(--tool-key-frame); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .lock-btn-close { color: var(--look-muted); }

/* 横向き案内（現在非表示の版も含む）と報告ウインドウ。 */
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"]) .portrait-lock-card { color: var(--look-ink); background: var(--tool-panel); border-color: var(--tool-frame); box-shadow: var(--tool-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.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-app-title, .portrait-lock-text, .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-special-ink); background: var(--tool-special); border-color: var(--tool-key-frame); }
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(--tool-paper); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bug-report-btn:hover { color: var(--look-ink); border-color: var(--look-accent); }
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 :is(.preview, textarea) { color: var(--look-ink); background: var(--tool-paper); 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 textarea::placeholder { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bug-modal .btn-send { color: var(--tool-primary-ink); background: var(--tool-primary); box-shadow: var(--tool-key-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bug-modal .btn-cancel { color: var(--tool-special-ink); background: var(--tool-special); border-color: var(--tool-key-frame); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#bug-capture-status, #bug-status) { color: var(--look-muted) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #bug-status:is([style*="#f87171"], [style*="248, 113, 113"]) { color: var(--look-danger) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #bug-status:is([style*="#4ade80"], [style*="74, 222, 128"]) { color: var(--look-success) !important; }

/* 手書きツールは状態の色分けを維持。ペンの黒・赤は、下の2行で natural-appearance.js の oj-light-ink フィルターをかけて見せる。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sp-hw-tray { color: var(--look-ink); background: var(--tool-paper); border-color: var(--tool-frame); box-shadow: var(--tool-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.sp-hw-main, .sp-hw-tool) { color: var(--look-ink) !important; background: var(--look-surface) !important; border-color: var(--look-border) !important; box-shadow: var(--tool-key-shadow) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) body.sp-hw-on .sp-hw-main { background: var(--look-accent-soft) !important; border-color: var(--look-accent) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sp-hw-clear::before { filter: brightness(0) saturate(100%) opacity(.8); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) button[aria-label="消しゴム（部分消し）に切り替え"]:is([style*="background: rgb(255, 255, 255)"], [style*="background: #fff"]) { background: var(--look-accent-soft) !important; border-color: var(--look-accent) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) button[aria-label="手書き色を切り替え"] { background: #fff !important; }
/* ペンの色：明るい4デザインでは 白 → 黒・金 → 赤 に見せる（描いた線のデータは白・金のまま。デザインを切りかえると色も切りかわる。2026-09-26の指示） */
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="手書き色を切り替え"] > span { filter: var(--oj-light-ink-filter); }