/* 小学校アプリとそろえたポップ・パステルの入力・解説・完了画面。
   開閉、無効状態、スクロール、ドラッグ位置、計算処理は元の指定を使う。 */
html:is([data-math-look="pop"], [data-math-look="simple"]) {
  --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;
}
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(#ffe88d, #ffc763); --tool-primary-ink: #6c3c23;
  --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;
}
/* 押せる補助ボタンは、各テーマの側面色で立体的に表示する。 */
html:is([data-math-look="pop"], [data-math-look="simple"]) {
  --tool-control-shadow: 2px 2px 0 #071e2d;
  --tool-control-pressed-shadow: 1px 1px 0 #071e2d;
}
html[data-math-look="pastel"] {
  --tool-control-shadow: 0 3px 0 #86b8d3;
  --tool-control-pressed-shadow: 0 1px 0 #86b8d3;
}
html[data-math-look="pastel"] .btn-answer {
  --tool-control-shadow: 0 3px 0 #b89545;
  --tool-control-pressed-shadow: 0 1px 0 #b89545;
}
html[data-math-look="elegant"] {
  --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;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.btn-answer, .btn-direct-answer) {
  color: var(--tool-special-ink); background: var(--tool-special); border: 2px solid #fff;
  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(.btn-answer, .btn-direct-answer):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"]) :is(.btn-answer, .btn-direct-answer):disabled { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .btn-answer { 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(.btn-answer:hover, .btn-direct-answer:hover, .btn-direct-answer.active) {
  color: var(--look-ink); background: var(--look-soft); border-color: var(--look-accent);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-reveal {
  color: var(--look-warm); background: var(--look-warm-soft);
  border: 2px solid var(--look-border); border-radius: var(--tool-key-radius); 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"]) .auto-calc-toggle-wrap {
  color: var(--look-ink); background: var(--look-surface); border: 2px solid var(--tool-frame);
  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"]) .auto-calc-toggle-wrap .slider { background: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .auto-calc-toggle-wrap input:checked + .slider { background: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .auto-calc-toggle-wrap input:focus-visible + .slider { 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"]) .tenkey-content {
  color: var(--look-ink); background: var(--tool-panel);
  border: 3px 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"]) .sign-modal-draggable { border-radius: var(--tool-radius) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sign-modal-handle { background: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-title { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-title-sub { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tenkey-cancel-btn, .tenkey-cancel-btn:hover, .sign-modal-close-btn) { color: var(--look-muted) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-expr-display { color: var(--look-ink); background: var(--tool-paper); border-radius: var(--tool-key-radius); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #tenkey-input {
  color: var(--look-ink); background: var(--tool-display); border: 2px solid var(--look-border);
  border-radius: var(--tool-key-radius); box-shadow: inset 0 3px 0 var(--look-soft);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-input-wrap.success #tenkey-input {
  color: var(--look-success); background: var(--look-success-soft); border-color: var(--look-success); box-shadow: 0 0 0 2px var(--look-success-soft);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-input-wrap.error #tenkey-input {
  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"]) :is(.tenkey-fraction-sign, .tenkey-fraction-box.active) { 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-btn {
  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"]) .tenkey-btn:hover { color: var(--look-ink); background: var(--look-soft); border-color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-btn.action-btn { color: var(--tool-action-ink); background: var(--tool-action); border-color: var(--tool-key-frame); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .tenkey-btn:is(.sign-btn, .soinsu-key, .fraction-btn) { 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"]) .tenkey-btn.confirm-btn { color: var(--tool-primary-ink); background: var(--tool-primary); border-color: var(--tool-key-frame); }
/* 符号の選択肢は元HTMLに直接色があるため、色と枠だけを上書きする。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sign-choice-btn {
  color: var(--tool-special-ink) !important; background: var(--tool-special) !important;
  border: 2px solid var(--tool-key-frame) !important; box-shadow: var(--tool-key-shadow) !important;
  border-radius: var(--tool-key-radius) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sign-choice-btn.sign-choice-correct {
  color: var(--look-success) !important; background: var(--look-success-soft) !important; border-color: var(--look-success) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sign-choice-btn.sign-wrong-flash {
  color: var(--look-danger) !important; background: var(--look-danger-soft) !important; border-color: var(--look-danger) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #sign-modal-label { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #sign-modal-label: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"]) .tenkey-title [style*="color"] { color: var(--look-warm) !important; }
/* 素因数分解・分配法則の入力中に作られる「？」などの直接指定色。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#tenkey-input, .tenkey-expr-display) :is([style*="color:#fff"], [style*="color: #fff"], [style*="color: rgb(255, 255, 255)"], [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"]) :is(#tenkey-input, .tenkey-expr-display) :is([style*="color:rgba(255,255,255"], [style*="color: rgba(255, 255, 255"], [style*="#94a3b8"], [style*="148, 163, 184"]) { color: var(--look-muted) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#tenkey-input, .tenkey-expr-display) :is([style*="#fbbf24"], [style*="#ffd700"], [style*="#ffd54a"], [style*="#fde047"], [style*="251, 191, 36"], [style*="255, 215, 0"], [style*="255, 213, 74"], [style*="253, 224, 71"]) { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.tenkey-input-wrap.error, .tenkey-input-wrap.success) #tenkey-input [style*="color"] { color: inherit !important; }

/* 解説の式・理由・符号図・連除法。寸法と式の書体を保つ。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.two-num-explain, .oj-explain) {
  color: var(--look-ink); background: #fffaf0;
  border: 2px solid var(--look-border); border-radius: var(--tool-radius); box-shadow: var(--tool-card-shadow);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.ai-explain-btn, .oj-explain-x) {
  color: var(--tool-hint-ink); background: var(--tool-hint); border: 2px solid var(--tool-frame);
  border-radius: var(--tool-key-radius); 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"]) :is(.ai-explain-btn:hover, .two-num-explain .oj-explain-x:hover, .oj-explain .oj-explain-x:hover) { color: var(--look-ink); background: var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.two-num-explain, .oj-explain) :is(.ai-steps, .ai-line .katex) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.two-num-explain, .oj-explain) .ai-reason { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.ai-rules, .ai-ladder) {
  color: var(--look-ink); background: var(--look-soft); border: 2px 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"]) .ai-rule { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ai-rule.now { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.ai-fig-cap, .ai-fig-ans, .ai-ladder-cap) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.ai-fig-labels span, .ai-ladder-body) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ai-mk.neg { color: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ai-mk.pos { color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ai-mk.gone::after { border-color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .ai-fig-box { border: 2px solid var(--look-border); border-radius: var(--tool-key-radius); background: var(--look-warm-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.two-num-explain, .oj-explain) :is([style*="color:#fff"], [style*="color: #fff"], [style*="color: rgb(255, 255, 255)"], [style*="color:rgba(255,255,255"], [style*="color: rgba(255, 255, 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(.two-num-explain, .oj-explain) :is([style*="#fbbf24"], [style*="#ffd700"], [style*="#ffd54a"], [style*="251, 191, 36"], [style*="255, 215, 0"], [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(.two-num-explain, .oj-explain) :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"]) :is(.two-num-explain, .oj-explain) :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"]) :is(.overlay, .challenge-intro-overlay, .kiroku-overlay) { background: #26374759 !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.win-card, .challenge-intro-overlay > div, .kiroku-overlay > div) {
  color: var(--look-ink) !important; background: var(--tool-paper) !important;
  border: 4px 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"]) .win-card :is(.win-label, .win-steps, .win-hint) { color: var(--look-muted) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .win-card :is(.win-answer, .win-answer-frac) { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .win-card .win-frac-num { border-color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .win-card [style*="border-top"] { border-top-color: var(--look-accent) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.win-card, .challenge-intro-overlay, .kiroku-overlay) [style*="color"] { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.win-card, .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(.win-card, .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"]) .win-card :is([style*="#7de8aa"], [style*="125, 232, 170"]) { color: var(--look-success) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.win-card, .challenge-intro-overlay, .kiroku-overlay) button {
  color: var(--tool-special-ink) !important; background: var(--tool-special) !important;
  border: 2px 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(.win-card, .challenge-intro-overlay, .kiroku-overlay) button:hover:not(:disabled) {
  color: var(--look-accent) !important; background: var(--look-accent-soft) !important; filter: none;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.win-card .win-btn-main, .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"]) .win-card button[style*="linear-gradient"] {
  color: var(--tool-primary-ink) !important; background: var(--tool-primary) !important; border-color: var(--tool-key-frame) !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .win-card a[style] {
  color: var(--look-success) !important; background: var(--look-success-soft) !important;
  border: 2px 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"]) .challenge-bar {
  color: var(--tool-primary-ink); background: var(--tool-primary); 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"]) .challenge-giveup-btn {
  color: var(--look-ink); background: var(--tool-paper); 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"]) .challenge-giveup-btn:hover { color: var(--look-accent); background: var(--look-accent-soft); filter: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .challenge-giveup-btn:active { box-shadow: none; }

/* 会員案内も同じ明るい面へ。リンクと入会・ログイン操作は既存のまま。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .lock-modal { background: #26374759; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .lock-dialog { color: var(--look-ink); background: var(--look-surface); }
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(--look-soft); }
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-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); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .lock-trial b { color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.lock-btn-guide, .lock-btn-primary) { 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"]) .lock-btn-login { color: var(--look-ink); background: var(--look-soft); }
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); }