/* Shared visual shell for every trainer. Individual task layouts remain independent. */
:root {
    --theme-bg: #0f172a;
    --theme-card: #1e293b;
    --theme-panel: #0b1220;
    --theme-control: #334155;
    --theme-line: #475569;
    --theme-ink: #f8fafc;
    --theme-muted: #94a3b8;
    --theme-accent: #38bdf8;
    --theme-accent-light: #7dd3fc;
    --theme-art: none;
    --theme-art-opacity: 0;
    --theme-blend: multiply;
}

html[data-theme="seoul"] { --theme-bg: #f1eaf2; --theme-card: #3c3042; --theme-panel: #302435; --theme-control: #57465e; --theme-line: #8d728c; --theme-ink: #fff8fd; --theme-muted: #d4c5d2; --theme-accent: #b65b91; --theme-accent-light: #e29bc2; --theme-art: url('assets/seoul-study-desk.png'); --theme-art-opacity: .22; }
html[data-theme="dota"] { --theme-bg: #151518; --theme-card: #242227; --theme-panel: #171518; --theme-control: #3c3030; --theme-line: #62403a; --theme-ink: #f0e9dc; --theme-muted: #b9afa3; --theme-accent: #d14e32; --theme-accent-light: #f07843; --theme-art: url('assets/ember-map.png'); --theme-art-opacity: .58; --theme-blend: screen; }
html[data-theme="boeing"] { --theme-bg: #eaf3f7; --theme-card: #123e5a; --theme-panel: #0b3048; --theme-control: #1d587a; --theme-line: #4f86a1; --theme-ink: #f3fbff; --theme-muted: #b9d4e3; --theme-accent: #18a0e0; --theme-accent-light: #88d1f2; --theme-art: url('assets/aviation-blueprint.png'); --theme-art-opacity: .45; }
html[data-theme="cs2"] { --theme-bg: #e7e0d5; --theme-card: #3d3730; --theme-panel: #2c2925; --theme-control: #544b42; --theme-line: #8d7d6b; --theme-ink: #faf7f0; --theme-muted: #d7cbbc; --theme-accent: #e87524; --theme-accent-light: #f6aa65; --theme-art: url('assets/tactical-map.png'); --theme-art-opacity: .38; }
html[data-theme="nhl"] { --theme-bg: #edf6fa; --theme-card: #153e5d; --theme-panel: #102f48; --theme-control: #285b7d; --theme-line: #6090ae; --theme-ink: #f7fcff; --theme-muted: #c4dbe9; --theme-accent: #e6555d; --theme-accent-light: #f29aa0; --theme-art: url('assets/ice-rink.png'); --theme-art-opacity: .48; }

html[data-theme]:not([data-theme="classic"]) body {
    background-color: var(--theme-bg) !important;
    background-image: var(--theme-pattern, none) !important;
    color: var(--theme-ink);
}

html[data-theme]:not([data-theme="classic"]) body::before {
    content: '';
    position: fixed;
    z-index: -1;
    right: 0;
    top: 0;
    width: min(70vw, 1120px);
    height: min(74vw, 940px);
    background: var(--theme-art) right top / cover no-repeat;
    opacity: var(--theme-art-opacity);
    mix-blend-mode: var(--theme-blend);
    pointer-events: none;
}

html[data-theme]:not([data-theme="classic"]) .glass,
html[data-theme]:not([data-theme="classic"]) .card,
html[data-theme]:not([data-theme="classic"]) .panel,
html[data-theme]:not([data-theme="classic"]) .content-card,
html[data-theme]:not([data-theme="classic"]) [class*="bg-slate-800"],
html[data-theme]:not([data-theme="classic"]) [class*="bg-gray-800"] { background-color: var(--theme-card) !important; border-color: var(--theme-line) !important; }

html[data-theme]:not([data-theme="classic"]) [class*="bg-slate-900"],
html[data-theme]:not([data-theme="classic"]) [class*="bg-gray-900"] { background-color: var(--theme-panel) !important; border-color: var(--theme-line) !important; }

html[data-theme]:not([data-theme="classic"]) [class*="bg-slate-700"],
html[data-theme]:not([data-theme="classic"]) [class*="bg-gray-700"] { background-color: var(--theme-control) !important; }

html[data-theme]:not([data-theme="classic"]) [class*="border-slate-"],
html[data-theme]:not([data-theme="classic"]) [class*="border-gray-"] { border-color: var(--theme-line) !important; }

html[data-theme]:not([data-theme="classic"]) .text-sky-400,
html[data-theme]:not([data-theme="classic"]) .text-blue-400,
html[data-theme]:not([data-theme="classic"]) .text-cyan-400,
html[data-theme]:not([data-theme="classic"]) .accent-text { color: var(--theme-accent) !important; }

html[data-theme]:not([data-theme="classic"]) .bg-blue-600,
html[data-theme]:not([data-theme="classic"]) .bg-sky-500,
html[data-theme]:not([data-theme="classic"]) .accent-bg { background-color: var(--theme-accent) !important; }

html[data-theme]:not([data-theme="classic"]) .tab-btn.active,
html[data-theme]:not([data-theme="classic"]) .mode-btn.active { background-color: var(--theme-accent) !important; border-color: var(--theme-accent-light) !important; }

.theme-switcher { position: fixed; top: 16px; right: 16px; z-index: 9998; }
.theme-switcher summary { list-style: none; cursor: pointer; color: #fff; background: rgba(15, 23, 42, .92); border: 1px solid rgba(148, 163, 184, .5); border-radius: 999px; padding: 9px 13px; font: 800 .68rem/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.theme-switcher summary::-webkit-details-marker { display: none; }
.theme-switcher summary::after { content: ' +'; color: var(--theme-accent); }
.theme-switcher[open] summary::after { content: ' −'; }
.theme-switcher-menu { position: absolute; top: calc(100% + 7px); right: 0; width: 220px; padding: 7px; background: #17212d; border: 1px solid #475569; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.theme-switcher-menu button { width: 100%; border: 0; padding: 10px; background: transparent; color: #e2e8f0; cursor: pointer; border-radius: 7px; font: 700 .8rem/1.2 system-ui, sans-serif; text-align: left; }
.theme-switcher-menu button:hover, .theme-switcher-menu button.is-active { background: rgba(255,255,255,.09); color: #fff; }

.site-home-link { position: fixed; top: 16px; left: 16px; z-index: 9998; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid rgba(148, 163, 184, .55); border-radius: 999px; background: rgba(15, 23, 42, .92); box-shadow: 0 5px 18px rgba(0,0,0,.16); color: #fff !important; text-decoration: none !important; font: 800 .76rem/1 system-ui, sans-serif; letter-spacing: .02em; transition: transform .16s ease, background .16s ease; }
.site-home-link:hover { transform: translateY(-1px); background: var(--theme-accent, #2563eb); border-color: var(--theme-accent, #2563eb); }
.site-home-link span:first-child { color: var(--theme-accent-light, #7dd3fc); font-size: 1rem; line-height: .8; }
.site-home-link:hover span:first-child { color: #fff; }

@media (max-width: 640px) {
    .theme-switcher { top: 12px; right: 12px; }
    .theme-switcher summary { padding: 8px 11px; }
    .site-home-link { top: 12px; left: 12px; padding: 8px 11px; font-size: .72rem; }
}