/* 一次関数マスター：小学校アプリと同じ明るいポップ／パステル。
   計算の配置・状態・ドラッグは元のまま使う。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) {
  --work-positive-ink: #195434;
  --work-positive-bg: #ddf5b8;
  --work-positive-border: #478329;
  --work-negative-ink: #912c20;
  --work-negative-bg: #ffe0d2;
  --work-negative-border: #c34b32;
  --work-zero-ink: #125980;
  --work-zero-bg: #a6e6ff;
  --work-zero-border: #176c9a;
  --work-card-radius: 12px;
  --work-card-shadow: 3px 4px 0 #8bb2c9;
  --work-card-hover-shadow: 3px 5px 0 #789eb4;
  --work-button-radius: 7px;
  --work-choice-bg: #fff;
  --work-choice-hover: #caedff;
  --work-choice-border: #456b83;
}
html[data-math-look="pastel"] {
  --work-positive-ink: #195d40;
  --work-positive-bg: #dcf8e9;
  --work-positive-border: #4b9b75;
  --work-negative-ink: #a83056;
  --work-negative-bg: #ffe2ed;
  --work-negative-border: #cc668a;
  --work-zero-bg: #d2f6ff;
  --work-zero-border: #72b2c8;
  --work-card-radius: 20px;
  --work-card-shadow: 0 4px 0 #c4a4d8, inset 0 2px #fff;
  --work-card-hover-shadow: 0 5px 0 #b591cc, inset 0 2px #fff;
  --work-button-radius: 12px;
  --work-choice-bg: linear-gradient(180deg, #fff, #faf2ff);
  --work-choice-hover: #f4ddf5;
  --work-choice-border: #c8a7df;
}

/* ポップは濃い輪郭と青の帯、パステルは白い輪郭と丸いカード。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .question-box {
  color: var(--look-ink); background: var(--look-surface);
  border: 3px solid var(--look-ink); border-top: 8px solid #149dd7; border-radius: 13px;
  text-shadow: none; box-shadow: 5px 5px 0 var(--look-shadow);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.answer-box, .steps-box) {
  color: var(--look-ink); background: #e4f4fc;
  border: 3px solid var(--look-ink); border-radius: 13px;
  box-shadow: 5px 5px 0 var(--look-shadow);
}
/* 問題枠の6pxの影と、その下の背景が見える間隔を保つ。 */
html[data-math-look="pastel"] .question-box {
  z-index: 1; margin-bottom: 12px !important;
}
html[data-math-look="pastel"] .question-box {
  background: linear-gradient(145deg, #fff, #fff4fb);
  border: 3px solid #fff; border-radius: 28px;
  box-shadow: 0 6px 0 #b399d2, 0 10px 25px #75559b20;
}
html[data-math-look="pastel"] :is(.answer-box, .steps-box) {
  background: linear-gradient(145deg, #fff2fb, #f5eeff);
  border: 3px solid #fff; border-radius: 28px;
  box-shadow: 0 7px 0 #b399d2, 0 12px 22px #75559b24;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-chip {
  color: var(--look-ink); background: #c6ef42; border: 2px solid #fff;
  border-radius: var(--work-button-radius); box-shadow: 2px 2px 0 #15364f;
}
html[data-math-look="pop"] .mode-chip { box-shadow: none; }
html[data-math-look="pastel"] .mode-chip {
  color: #734127; background: #ffe68a; box-shadow: 0 2px 0 #bf8647;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.hint, .panel-title, .panel-hints p) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hint-bar {
  color: var(--look-warm); background: var(--look-surface); border-color: transparent;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hint-bar.active {
  color: var(--look-warm); background: var(--look-warm-soft); border-color: #c39a42; 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(.btn-undo, #btn-forward) {
  color: var(--look-ink); background: #a6e6ff; border: 2px solid #fff;
  border-radius: var(--work-button-radius); box-shadow: 2px 2px 0 #789eb4;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #btn-forward { background: #ffce77; }
html[data-math-look="pop"] :is(.btn-undo, #btn-forward) { box-shadow: 2px 2px 0 #071e2d; }
html[data-math-look="pop"] :is(.btn-undo, #btn-forward):active:not(:disabled) {
  transform: translate(1px, 1px); box-shadow: 1px 1px 0 #071e2d;
}
html[data-math-look="pastel"] :is(.btn-undo, #btn-forward) {
  color: #275c7e; background: #d2f6ff; box-shadow: 0 3px 0 #a2b8d7;
}
html[data-math-look="pastel"] #btn-forward { color: #714717; background: #ffe68a; box-shadow: 0 3px 0 #b89545; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.btn-undo, #btn-forward):hover:not(:disabled) {
  color: var(--look-ink); background: var(--look-surface); border-color: var(--look-accent);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.btn-undo, #btn-forward):disabled { box-shadow: none; }