/* Four complete appearances on the approved structure. */
:root {
  --primary-bg:#b9d2ff; --primary-fg:#081225; --primary-hover:#d4e3ff;
  --button-glow:#6a9cff18; --glass-hover:#ffffff13; --brand-filter:none;
}
body[data-theme=black] {
  color-scheme:dark; --bg:#000; --surface:#0c0c0c; --surface-2:#191919;
  --text:#f2f2f2; --muted:#929292; --line:#ffffff16;
  --accent:#e4e4e4; --blue:#dedede; --mint:#bdbdbd;
  --primary-bg:#eeeeee; --primary-fg:#101010; --primary-hover:#fff;
  --button-glow:#ffffff0b; --brand-filter:grayscale(1);
}
body[data-theme=blue] {
  --bg:#071122; --surface:#0b1a30; --surface-2:#142a46;
  --text:#eef5ff; --muted:#97acc9; --line:#89b2e923;
  --accent:#97c2ff; --blue:#789eff; --primary-bg:#9fc6ff;
  --primary-fg:#06182f; --primary-hover:#c7dfff; --button-glow:#4e91ff25;
}
body[data-theme=light] {
  color-scheme:light; --bg:#fff; --surface:#f7f7f8; --surface-2:#ededf0;
  --text:#181a20; --muted:#626671; --line:#181a201c;
  --accent:#354f87; --blue:#354f87; --mint:#36634f;
  --primary-bg:#1c1e25; --primary-fg:#fff; --primary-hover:#343741;
  --button-glow:#0000000b; --glass-hover:#00000008;
}
.button.primary {background:var(--primary-bg);color:var(--primary-fg);box-shadow:0 4px 28px var(--button-glow);position:relative;overflow:hidden;isolation:isolate}
.button.primary:hover {background:var(--primary-hover);box-shadow:0 5px 32px var(--button-glow)}
.button.primary::after {content:'';position:absolute;inset:-30% -70%;background:linear-gradient(110deg,transparent 42%,#ffffff2d 50%,transparent 58%);transform:translateX(-55%);pointer-events:none;transition:transform .8s ease}
.button.primary:hover::after {transform:translateX(55%)}
.button.glass:hover {background:var(--glass-hover)}
.brand img {filter:var(--brand-filter)}
body[data-theme=black] .home-stage {background:radial-gradient(ellipse at 76% 56%,#ffffff07,transparent 48%)}
body[data-theme=black] .home-copy h1>span {color:#d8d8d8}
body[data-theme=black] .home-copy h2 {color:#b8b8b8}
body[data-theme=black] .stage-floor {background:radial-gradient(ellipse,#ffffff07,transparent 65%);box-shadow:none;border-color:#ffffff09}
body[data-theme=black] .stage-floor::before,body[data-theme=black] .stage-floor::after {border-color:#ffffff07}
body[data-theme=black] .scene-fallback {filter:drop-shadow(0 18px 32px #ffffff08)}
body[data-theme=light] .home-stage {background:radial-gradient(ellipse at 77% 56%,#eef0f5,transparent 57%)}
body[data-theme=light] .home-copy h1>span {color:#697789}
body[data-theme=light] .home-copy h2 {color:#535b68}
body[data-theme=light] .stage-floor {border-color:#1c233418;box-shadow:none;background:radial-gradient(ellipse,#222c4012,transparent 68%)}
body[data-theme=light] .stage-floor::before,body[data-theme=light] .stage-floor::after {border-color:#1c23340e}
body[data-theme=light] .button.glass {background:#00000004;border-color:var(--line)}
body[data-theme=light] .cinema-copy .button.glass,body[data-theme=light] .detail-intro .button.glass {background:#ffffff16;color:#fff;border-color:#ffffff45}
body[data-theme=light] .cinema-copy .button.primary,body[data-theme=light] .detail-intro .button.primary {background:#fff;color:#161a23}
body[data-theme=light] .stage-caption {color:#68717f}
body[data-theme=light] .top-nav .nav-link.selected::after {box-shadow:none}
body[data-theme=light] .status-pill {background:#36634f0a}
body[data-theme=light] dialog {border-color:var(--line);box-shadow:0 25px 120px #0003}
body[data-theme=light] dialog::backdrop {background:#12172352}
body[data-theme=light] #prototype-label {background:#f3f3f6;color:var(--muted);border-color:var(--line);box-shadow:none}
body[data-theme=light] #prototype-label>button {color:var(--text);border-color:var(--line)}
body[data-theme=light] input.switch {background:#00000012;border-color:#00000019}
body[data-theme=light] input.switch::before {background:#fff;box-shadow:0 1px 3px #0003}
body[data-theme=light] input.switch:checked {background:#334d79;border-color:#334d79}
body[data-theme=light] input.switch:checked::before {background:#fff}
body[data-theme=light] .file-preview-image {background:#eff0f3}
/* Settings previews deliberately retain their destination colors in every theme. */
.theme-picker {grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
.theme-option {display:grid;text-align:left;gap:3px;padding:0 0 6px;border-radius:9px;min-width:0}
.theme-option>strong {font-size:12px;font-weight:650;color:var(--text);padding:0 2px}
.theme-option>small {font-size:10px;line-height:1.5;color:var(--muted);padding:0 2px}
.theme-sample {height:82px;overflow:hidden;margin-bottom:6px;border:1px solid #ffffff22;box-shadow:inset 0 0 0 3px var(--surface);border-radius:9px;background:#080b11;color:#b9d2ff;transition:border-color .2s,transform .2s;position:relative}
.theme-option:hover .theme-sample {transform:translateY(-2px)}
.theme-option.active .theme-sample {border-color:var(--accent)}
.theme-sample.black {background:#000;color:#e8e8e8}
.theme-sample.blue {background:#0b1b35;color:#a2c8ff}
.theme-sample.light {background:#fff;color:#262a34;border-color:#00000020}
.theme-sample::after {inset:14px 13px auto;height:1px;border-radius:0;background:currentColor;opacity:.16}
.theme-sample i {position:absolute;left:13px;top:29px;width:45%;height:5px;border-radius:2px;background:currentColor;opacity:.8;box-shadow:0 10px 0 -1px currentColor}
.theme-sample b {position:absolute;left:13px;bottom:13px;width:33px;height:9px;border-radius:2px;background:currentColor}
.theme-sample em {position:absolute;right:16px;top:30px;width:28px;height:28px;background:linear-gradient(135deg,currentColor,transparent);border:1px solid currentColor;border-radius:7px;transform:rotate(-15deg);opacity:.65}
@media(max-width:600px){.theme-picker{gap:14px 12px}.theme-sample{height:72px}.theme-option>small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.button.primary::after{display:none}}
.reduced-motion .button.primary::after{display:none}