/* ════════════════════════════════════════════════════════════════════
   SESSION TESTS — ВИЗУАЛЬНАЯ ГЛУБИНА ТЕМ (перенос из ВЕРСИЯ_1)
   Подключается ПОСЛЕ redesign.css на всех страницах.

   Уровни декора (ничего не перекрывает клики):
     • body::before / ::after — CRT-виньетка, скан-линии, блобы, зерно,
       прожекторы+дождь noir (pointer-events:none)
     • #matrix-bg         — фикс-слой z:-1 (рисует scripts/app.js)
     • #abstract-canvas   — фикс-слой z:1, фигуры sh-1..sh-15
     • .card::before/::after — тайтлбар / скан-линия / цветная полоса

   Все эффекты глушатся в performance-mode. Цвета — через CSS-переменные.
   Идентификаторы 10 тем и каркас setTheme/setThemeGroup не тронуты.
   ════════════════════════════════════════════════════════════════════ */

/* ── 0. Курсоры ───────────────────────────────────────────────────── */
body[data-theme="terminal"],
body[data-theme="neon-t"],
body[data-theme="amber"],
body[data-theme="arthouse"],
body[data-theme="newyear"],
body[data-theme="gay"] { cursor: crosshair; }

/* ════════════════════════════════════════════════════════════════════
   1. CYBERPUNK 2077 — CRT / скан-линии / терминальные панели
   ════════════════════════════════════════════════════════════════════ */

/* CRT-виньетка */
body[data-theme="terminal"]::before,
body[data-theme="neon-t"]::before,
body[data-theme="amber"]::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .6) 100%);
    pointer-events: none;
    z-index: 9990;
}

/* Скан-линии */
body[data-theme="terminal"]::after,
body[data-theme="neon-t"]::after,
body[data-theme="amber"]::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent, transparent 2px,
        rgba(0, 0, 0, .08) 2px, rgba(0, 0, 0, .08) 4px
    );
    pointer-events: none;
    z-index: 9991;
    animation: scanlineShift 8s linear infinite;
}
@keyframes scanlineShift {
    0%   { background-position: 0 0; }
    100% { background-position: 0 100px; }
}

/* Терминальная карточка: тайтлбар + боот + скан-линия */
body[data-theme="terminal"] .card,
body[data-theme="neon-t"] .card,
body[data-theme="amber"] .card {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 4px;
    box-shadow:
        0 0 0 1px var(--t-border),
        0 0 40px var(--green-glow),
        0 0 80px color-mix(in srgb, var(--green) 5%, transparent),
        inset 0 0 40px rgba(0, 0, 0, .3);
    animation: bootSequence .4s steps(1) both;
}
body[data-theme="terminal"] .card-inner,
body[data-theme="neon-t"] .card-inner,
body[data-theme="amber"] .card-inner { padding: 40px; }

@keyframes bootSequence {
    0%   { opacity: 0; clip-path: inset(50% 0); }
    50%  { opacity: 1; clip-path: inset(0% 0); }
    100% { opacity: 1; clip-path: none; }
}

body[data-theme="terminal"] .card::before,
body[data-theme="neon-t"] .card::before,
body[data-theme="amber"] .card::before {
    content: '● ● ●  root@quiz:~  [SYSTEM ACTIVE]  ─────────────────────────────';
    display: block;
    background: #0a1a0a;
    color: var(--t-muted);
    padding: 10px 16px;
    font-size: 12px;
    font-family: 'Share Tech Mono', monospace;
    border-bottom: 1px solid var(--t-border);
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
}

body[data-theme="terminal"] .card::after,
body[data-theme="neon-t"] .card::after,
body[data-theme="amber"] .card::after {
    content: '';
    position: absolute;
    top: 37px; left: 0;
    width: 100%; height: 1px;
    background: var(--green);
    opacity: .3;
    animation: scanLine 4s linear infinite;
}
@keyframes scanLine {
    0%   { top: 37px; opacity: .5; }
    100% { top: 100%; opacity: 0; }
}

/* Моноширинная типографика оболочки */
body[data-theme="terminal"] .st-section-title,
body[data-theme="neon-t"] .st-section-title,
body[data-theme="amber"] .st-section-title,
body[data-theme="terminal"] .st-hero-kicker,
body[data-theme="neon-t"] .st-hero-kicker,
body[data-theme="amber"] .st-hero-kicker,
body[data-theme="terminal"] .st-quiz-testname,
body[data-theme="neon-t"] .st-quiz-testname,
body[data-theme="amber"] .st-quiz-testname,
body[data-theme="terminal"] .st-logo-text,
body[data-theme="neon-t"] .st-logo-text,
body[data-theme="amber"] .st-logo-text {
    font-family: var(--font-mono);
    letter-spacing: 1.5px;
}
body[data-theme="terminal"] .st-section-title,
body[data-theme="neon-t"] .st-section-title,
body[data-theme="amber"] .st-section-title { font-size: 12px; }
body[data-theme="terminal"] .st-hero-title,
body[data-theme="neon-t"] .st-hero-title,
body[data-theme="amber"] .st-hero-title {
    font-family: var(--font-mono);
    font-weight: 700;
}

/* Экран теста: QUERY-блок, кнопки-команды, штампы времени */
body[data-theme="terminal"] .question,
body[data-theme="neon-t"] .question,
body[data-theme="amber"] .question {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid var(--t-border);
    background: var(--green-faint);
    position: relative;
    animation: questionFade .3s ease-out;
}
body[data-theme="terminal"] .question::before,
body[data-theme="neon-t"] .question::before,
body[data-theme="amber"] .question::before {
    content: 'QUERY';
    position: absolute;
    top: -10px; left: 12px;
    background: var(--t-surface);
    color: var(--t-muted);
    font-size: 10px;
    padding: 0 8px;
    letter-spacing: 3px;
    font-family: var(--font-mono);
    display: block;
}
body[data-theme="terminal"] .question::after { display: none; }
body[data-theme="terminal"] .question h2 {
    color: var(--amber);
    text-transform: uppercase;
    font-family: var(--font-mono);
    letter-spacing: 2px;
}
body[data-theme="terminal"] .question h2::before { content: '// '; color: var(--t-muted); }
body[data-theme="terminal"] .question p { font-family: var(--font-mono); }

body[data-theme="terminal"] .answers button,
body[data-theme="neon-t"] .answers button,
body[data-theme="amber"] .answers button,
body[data-theme="terminal"] .controls button,
body[data-theme="neon-t"] .controls button,
body[data-theme="amber"] .controls button,
body[data-theme="terminal"] #timer,
body[data-theme="neon-t"] #timer,
body[data-theme="amber"] #timer,
body[data-theme="terminal"] .st-quiz-timer,
body[data-theme="neon-t"] .st-quiz-timer,
body[data-theme="amber"] .st-quiz-timer {
    font-family: var(--font-mono);
}

body[data-theme="terminal"] .answers button,
body[data-theme="neon-t"] .answers button,
body[data-theme="amber"] .answers button {
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    color: var(--green);
    text-align: left;
    letter-spacing: .5px;
}
body[data-theme="terminal"] .answers button::before,
body[data-theme="neon-t"] .answers button::before,
body[data-theme="amber"] .answers button::before { content: '  $ '; color: var(--t-muted); }
body[data-theme="terminal"] .answers button:hover:not(:disabled),
body[data-theme="neon-t"] .answers button:hover:not(:disabled),
body[data-theme="amber"] .answers button:hover:not(:disabled) {
    background: var(--green-faint);
    border-left-color: var(--green);
    color: #fff;
    text-shadow: 0 0 8px var(--green);
}
body[data-theme="terminal"] .answers button:hover:not(:disabled)::before,
body[data-theme="neon-t"] .answers button:hover:not(:disabled)::before,
body[data-theme="amber"] .answers button:hover:not(:disabled)::before { content: '  > '; color: var(--green); }

body[data-theme="terminal"] .answers button.correct,
body[data-theme="neon-t"] .answers button.correct,
body[data-theme="amber"] .answers button.correct {
    background: rgba(0, 255, 65, .08) !important;
    border-left-color: var(--green) !important;
    color: var(--green) !important;
}
body[data-theme="terminal"] .answers button.correct::before,
body[data-theme="neon-t"] .answers button.correct::before,
body[data-theme="amber"] .answers button.correct::before { content: '  ✓ ' !important; color: var(--green) !important; }
body[data-theme="terminal"] .answers button.wrong,
body[data-theme="neon-t"] .answers button.wrong,
body[data-theme="amber"] .answers button.wrong {
    background: rgba(255, 49, 49, .08) !important;
    border-left-color: var(--red) !important;
    color: var(--red) !important;
    animation: errFlash .5s ease-out !important;
}
body[data-theme="terminal"] .answers button.wrong::before,
body[data-theme="neon-t"] .answers button.wrong::before,
body[data-theme="amber"] .answers button.wrong::before { content: '  ✗ ' !important; color: var(--red) !important; }
@keyframes errFlash {
    0%, 100% { opacity: 1; }
    25%      { opacity: .3; }
    50%      { opacity: 1; }
    75%      { opacity: .3; }
}

body[data-theme="terminal"] .controls button,
body[data-theme="neon-t"] .controls button,
body[data-theme="amber"] .controls button {
    background: transparent;
    border: 1px solid var(--t-border);
    border-radius: 0;
    color: var(--green);
}
body[data-theme="terminal"] .controls button:hover:not(:disabled),
body[data-theme="neon-t"] .controls button:hover:not(:disabled),
body[data-theme="amber"] .controls button:hover:not(:disabled) {
    background: var(--green-faint);
    border-color: var(--green);
    box-shadow: 0 0 12px var(--green-glow);
}

/* ════════════════════════════════════════════════════════════════════
   2. ART-HOUSE — блобы / бумажное зерно / стеклянная карточка
   ════════════════════════════════════════════════════════════════════ */

/* Градиентные блобы */
body[data-theme="arthouse"]::before,
body[data-theme="newyear"]::before,
body[data-theme="gay"]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 420px 260px at 88%  8%,  rgba(27, 77, 160, .10)  0%, transparent 70%),
        radial-gradient(ellipse 340px 200px at 8%  88%, rgba(214, 62, 42, .09)  0%, transparent 65%),
        radial-gradient(ellipse 500px 180px at 50% 98%, rgba(232, 160, 32, .08) 0%, transparent 60%),
        radial-gradient(ellipse 280px 280px at 4%  12%, rgba(139, 63, 176, .08) 0%, transparent 70%),
        radial-gradient(ellipse 200px 320px at 96% 52%, rgba(29, 128, 128, .07) 0%, transparent 65%);
    animation: bgPulse 22s ease-in-out infinite alternate;
}
@keyframes bgPulse {
    0%   { filter: hue-rotate(0deg)  brightness(1);    transform: scale(1); }
    100% { filter: hue-rotate(18deg) brightness(1.04); transform: scale(1.03) translateY(-12px); }
}

/* Ледяные блобы — WINTER */
body[data-theme="newyear"]::before {
    background:
        radial-gradient(ellipse 420px 260px at 88% 8%,  rgba(94, 234, 245, .16)  0%, transparent 70%),
        radial-gradient(ellipse 340px 200px at 8%  88%, rgba(52, 211, 153, .12)  0%, transparent 65%),
        radial-gradient(ellipse 500px 180px at 50% 98%, rgba(125, 211, 252, .10) 0%, transparent 60%),
        radial-gradient(ellipse 280px 280px at 4%  12%, rgba(56, 189, 248, .12)  0%, transparent 70%),
        radial-gradient(ellipse 200px 320px at 96% 52%, rgba(96, 165, 250, .10)  0%, transparent 65%);
}

/* Радужные блобы — GAY EDITION */
body[data-theme="gay"]::before {
    background:
        radial-gradient(ellipse 420px 260px at 88% 8%,  rgba(255, 26, 107, .16) 0%, transparent 70%),
        radial-gradient(ellipse 340px 200px at 8%  88%, rgba(0, 207, 255, .14)  0%, transparent 65%),
        radial-gradient(ellipse 500px 180px at 50% 98%, rgba(255, 214, 0, .12)  0%, transparent 60%),
        radial-gradient(ellipse 280px 280px at 4%  12%, rgba(0, 255, 153, .13)  0%, transparent 70%),
        radial-gradient(ellipse 200px 320px at 96% 52%, rgba(207, 0, 255, .13)  0%, transparent 65%);
}

/* Верхние полосы карточек по темам: WINTER — морозная, GAY — радуга */
body[data-theme="newyear"] .card::before {
    background: linear-gradient(90deg, #bae6fd 0%, #5EEAF5 35%, #34D399 70%, #7dd3fc 100%);
}
body[data-theme="gay"] .card::before {
    background: linear-gradient(90deg, #FF1A6B, #FF6B00, #FFD600, #00FF99, #00CFFF, #CF00FF);
    background-size: 300% 100%;
}

/* Бумажное зерно */
body[data-theme="arthouse"]::after,
body[data-theme="newyear"]::after,
body[data-theme="gay"]::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
}

/* Abstract SVG-канвас */
#abstract-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    display: none;
}
body[data-theme="arthouse"] #abstract-canvas,
body[data-theme="newyear"] #abstract-canvas,
body[data-theme="gay"] #abstract-canvas { display: block; }

.sh { transform-box: fill-box; transform-origin: center; }
.sh-1  { animation: orbitCW  38s linear infinite; }
.sh-2  { animation: orbitCCW 28s linear infinite; }
.sh-3  { animation: floatY   14s ease-in-out infinite alternate; }
.sh-4  { animation: wobble   10s ease-in-out infinite alternate; }
.sh-5  { animation: pulseS    7s ease-in-out infinite; }
.sh-6  { animation: floatX   18s ease-in-out infinite alternate; }
.sh-7  { animation: spinSlow 55s linear infinite reverse; }
.sh-8  { animation: wobble   12s ease-in-out infinite alternate-reverse; }
.sh-9  { animation: floatY   20s ease-in-out infinite; }
.sh-10 { animation: pulseS    9s ease-in-out infinite reverse; }
.sh-11 { animation: orbitCW  46s linear infinite; }
.sh-12 { animation: floatX   15s ease-in-out infinite alternate; }
.sh-13 { animation: spinSlow 30s linear infinite; }
.sh-14 { animation: floatY   11s ease-in-out infinite alternate-reverse; }
.sh-15 { animation: wobble   16s ease-in-out infinite; }

/* Фигуры перенимают палитру темы (--p1..--p8): arthouse / winter / gay */
.sh-1,  .sh-9  { fill: var(--p1); }
.sh-2,  .sh-10 { fill: var(--p2); }
.sh-3,  .sh-11 { fill: var(--p3); }
.sh-4,  .sh-12 { fill: var(--p5); stroke: var(--p5); }
.sh-5,  .sh-13 { fill: var(--p4); }
.sh-6          { fill: var(--p6); }
.sh-7,  .sh-14 { fill: var(--p7); }
.sh-8,  .sh-15 { fill: var(--p8); }

@keyframes orbitCW   { to { transform: rotate(360deg); } }
@keyframes orbitCCW  { to { transform: rotate(-360deg); } }
@keyframes floatY    { from { transform: translateY(0); }   to { transform: translateY(-40px); } }
@keyframes floatX    { from { transform: translateX(0); }   to { transform: translateX(30px); } }
@keyframes wobble    { from { transform: rotate(-8deg) scale(1); } to { transform: rotate(12deg) scale(1.08); } }
@keyframes pulseS    { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes spinSlow  { to { transform: rotate(360deg); } }

/* Стеклянная карточка + цветная верхняя полоса */
body[data-theme="arthouse"] .card,
body[data-theme="newyear"] .card,
body[data-theme="gay"] .card {
    background: color-mix(in srgb, var(--ig-surface) 55%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1.5px solid color-mix(in srgb, var(--ig-accent) 18%, transparent);
    border-radius: 14px;
    overflow: hidden;
    animation: cardArrive 1s cubic-bezier(.16, 1, .3, 1) both;
}
body[data-theme="arthouse"] .card-inner,
body[data-theme="newyear"] .card-inner,
body[data-theme="gay"] .card-inner { padding: 44px; }

@keyframes cardArrive {
    from { opacity: 0; transform: translateY(30px) rotate(-.4deg) scale(.98); }
    to   { opacity: 1; transform: translateY(0)     rotate(0deg)   scale(1); }
}

body[data-theme="arthouse"] .card::before,
body[data-theme="newyear"] .card::before,
body[data-theme="gay"] .card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg,
        var(--p1) 0% 14%, var(--p3) 14% 28%, var(--p2) 28% 42%,
        var(--p4) 42% 56%, var(--p5) 56% 70%, var(--p6) 70% 85%,
        var(--p7) 85% 100%
    );
    background-size: 200% 100%;
    animation: barSlide 8s linear infinite;
}
body[data-theme="arthouse"] .card::after,
body[data-theme="newyear"] .card::after,
body[data-theme="gay"] .card::after { display: none; }

@keyframes barSlide {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* Экран теста: арт-хаус вопрос и ответы с цветными полосами */
body[data-theme="arthouse"] .question,
body[data-theme="newyear"] .question,
body[data-theme="gay"] .question {
    border: 1.5px solid color-mix(in srgb, var(--ig-accent) 22%, transparent);
    background: color-mix(in srgb, var(--ig-surface-raised) 65%, transparent);
    position: relative;
    overflow: hidden;
}
body[data-theme="arthouse"] .question::before,
body[data-theme="newyear"] .question::before,
body[data-theme="gay"] .question::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--p3);
}
body[data-theme="arthouse"] .answers button,
body[data-theme="newyear"] .answers button,
body[data-theme="gay"] .answers button {
    border: 1.5px solid color-mix(in srgb, var(--ig-accent) 20%, transparent);
    background-color: color-mix(in srgb, var(--ig-surface) 60%, transparent);
    color: var(--ig-text);
    font-family: var(--font-syne);
}
body[data-theme="arthouse"] .answers button:hover:not(:disabled),
body[data-theme="newyear"] .answers button:hover:not(:disabled),
body[data-theme="gay"] .answers button:hover:not(:disabled) {
    border-color: var(--ig-accent);
    background-color: var(--ig-accent-bg);
}
body[data-theme="arthouse"] .answers button.correct,
body[data-theme="newyear"] .answers button.correct,
body[data-theme="gay"] .answers button.correct {
    background-color: rgba(46, 125, 79, .14) !important;
    border-color: var(--p4) !important;
    color: var(--p4) !important;
}
body[data-theme="arthouse"] .answers button.wrong,
body[data-theme="newyear"] .answers button.wrong,
body[data-theme="gay"] .answers button.wrong {
    background-color: rgba(214, 62, 42, .12) !important;
    border-color: var(--p1) !important;
    color: var(--p1) !important;
    animation: joltWrong .45s ease-out !important;
}
@keyframes joltWrong {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-10px) rotate(-.4deg); }
    60%      { transform: translateX(8px)  rotate(.3deg); }
}

/* ════════════════════════════════════════════════════════════════════
   3. NOIR — печатная машинка / дождь / прожекторы
   ════════════════════════════════════════════════════════════════════ */

/* Прожекторы + нижняя тьма (слой ЗА контентом, текст не перекрывается) */
body[data-theme="noir"]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 520px 320px at 18% 20%, rgba(255, 230, 170, .10) 0%, transparent 65%),
        radial-gradient(ellipse 620px 360px at 82% 70%, rgba(255, 230, 170, .08) 0%, transparent 70%),
        radial-gradient(ellipse 900px 600px at 50% 130%, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .7) 75%, transparent 100%);
}

/* Дождь (светлые штрихи) */
body[data-theme="noir"]::after {
    content: '';
    position: fixed;
    inset: -20% 0 0 0;
    z-index: 2;
    pointer-events: none;
    opacity: .35;
    background-image:
        linear-gradient(115deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 55%),
        repeating-linear-gradient(100deg, rgba(255, 255, 255, .10) 0 1px, rgba(255, 255, 255, 0) 2px 7px),
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .08) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .06) 0 1px, transparent 2px);
    background-size: 100% 100%, 220px 220px, 120px 120px, 180px 180px;
    animation: noirRain 12s linear infinite;
    filter: blur(.25px);
}
@keyframes noirRain {
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 0 320px, 140px 460px, -80px 300px, 100px 380px; }
}

/* Скрываем чужие слои в noir */
body[data-theme="noir"] #matrix-bg,
body[data-theme="noir"] #abstract-canvas { display: none; }

/* Карточка noir */
body[data-theme="noir"] .card {
    background: #0d0d0d;
    border: 1px solid rgba(232, 225, 215, .12);
    border-radius: 2px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .05);
}
body[data-theme="noir"] .card::before {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--p1), transparent);
}
body[data-theme="noir"] .card::after { display: none; }

/* Печатная машинка — каждая важная деталь отдельно */
body[data-theme="noir"] .st-hero-title,
body[data-theme="noir"] .st-section-title,
body[data-theme="noir"] .st-quiz-testname,
body[data-theme="noir"] h1,
body[data-theme="noir"] .question h2,
body[data-theme="noir"] .question p,
body[data-theme="noir"] .menu button,
body[data-theme="noir"] .answers button,
body[data-theme="noir"] .controls button,
body[data-theme="noir"] #back,
body[data-theme="noir"] .stats,
body[data-theme="noir"] .modal-content h2,
body[data-theme="noir"] .modal-content p,
body[data-theme="noir"] .modal-content button,
body[data-theme="noir"] .tooltip-text,
body[data-theme="noir"] .info-tooltip,
body[data-theme="noir"] .score-title,
body[data-theme="noir"] .st-score-value,
body[data-theme="noir"] .st-train-card,
body[data-theme="noir"] .test-item-title,
body[data-theme="noir"] .test-item-desc,
body[data-theme="noir"] .st-btn {
    font-family: var(--font-noir);
    font-style: normal;
}
body[data-theme="noir"] .st-hero-title,
body[data-theme="noir"] .st-section-title,
body[data-theme="noir"] h1 {
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-noir);
}

/* Пейп-текстура компонентов */
body[data-theme="noir"] .question {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(232, 225, 215, .14);
}
body[data-theme="noir"] .answers button {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(232, 225, 215, .16);
    color: var(--ink-noir);
}
body[data-theme="noir"] .answers button:hover:not(:disabled) {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(232, 225, 215, .5);
}
body[data-theme="noir"] .answers button.correct {
    background: rgba(210, 180, 140, .10) !important;
    border-color: var(--p1) !important;
    color: var(--p1) !important;
}
body[data-theme="noir"] .answers button.wrong {
    background: rgba(255, 60, 60, .08) !important;
    border-color: #b3543f !important;
    color: #e0896f !important;
}

body[data-theme="noir"] .controls button,
body[data-theme="noir"] #back,
body[data-theme="noir"] .st-quiz-exit {
    background: transparent;
    border-color: rgba(232, 225, 215, .22);
    color: #ffffff;
}
body[data-theme="noir"] .controls button:hover:not(:disabled),
body[data-theme="noir"] .st-quiz-exit:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(232, 225, 215, .6);
}

body[data-theme="noir"] .info-tooltip {
    color: rgba(232, 225, 215, .6);
    border-color: rgba(232, 225, 215, .25);
    border-radius: 2px;
}
body[data-theme="noir"] .info-tooltip:hover {
    background: rgba(232, 225, 215, .08);
    border-color: var(--p1);
}
body[data-theme="noir"] .tooltip-text {
    background: #121212;
    color: var(--ink-noir);
    border: 1px solid rgba(232, 225, 215, .16);
    border-radius: 2px;
}
body[data-theme="noir"] .tooltip-text::after { border-top-color: #121212; }

body[data-theme="noir"] .score-card { border-color: rgba(232, 225, 215, .18); }
body[data-theme="noir"] .score-card:nth-child(1)::before { background: var(--p1); }
body[data-theme="noir"] .score-card:nth-child(2)::before { background: var(--p2); }
body[data-theme="noir"] .score-card:nth-child(3)::before { background: var(--p3); }
body[data-theme="noir"] .score-card:hover { background: rgba(255, 255, 255, .04); }
body[data-theme="noir"] .score-card:hover::after { opacity: .03; }
body[data-theme="noir"] .circle {
    font-family: var(--font-noir);
    color: var(--ink-noir);
}

body[data-theme="noir"] .modal { background: rgba(0, 0, 0, .85); }
body[data-theme="noir"] .modal-content {
    background: #0d0d0d;
    color: var(--ink-noir);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 2px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .05), 0 30px 80px rgba(0, 0, 0, .7);
}
body[data-theme="noir"] .modal-content p { color: rgba(232, 225, 215, .7); }
body[data-theme="noir"] .modal-content button {
    background: transparent;
    border: 1px solid var(--p1);
    color: var(--p1);
}
body[data-theme="noir"] .modal-content button:hover {
    background: var(--p1);
    color: #070707;
}

/* Оболочка noir */
body[data-theme="noir"] .st-header { border-bottom-color: rgba(232, 225, 215, .14); }
body[data-theme="noir"] .st-section-sub,
body[data-theme="noir"] .test-item-desc { color: rgba(232, 225, 215, .55); }
body[data-theme="noir"] .st-train-card,
body[data-theme="noir"] .test-item {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(232, 225, 215, .16);
    border-radius: 2px;
}
body[data-theme="noir"] .st-train-card:hover,
body[data-theme="noir"] .test-item:hover {
    border-color: rgba(232, 225, 215, .5);
    background: rgba(255, 255, 255, .04);
}
body[data-theme="noir"] .st-chip {
    border-color: rgba(232, 225, 215, .22);
    color: rgba(232, 225, 215, .7);
    border-radius: 2px;
    font-family: var(--font-noir);
}
body[data-theme="noir"] .st-chip.is-active {
    background: var(--p1);
    border-color: var(--p1);
    color: #070707;
}
body[data-theme="noir"] .st-quiz-progress-fill { background: var(--p1); }
body[data-theme="noir"] .st-quiz-progress { background: rgba(232, 225, 215, .12); }

/* ════════════════════════════════════════════════════════════════════
   4. BTS — персональные фильтры, шрифты, формы, движущийся hero
   ════════════════════════════════════════════════════════════════════ */

/* Скрываем чужие слои в BTS */
body[data-theme="bts-jk"] #matrix-bg,
body[data-theme="bts-jimin"] #matrix-bg,
body[data-theme="bts-jhope"] #matrix-bg,
body[data-theme="bts-jk"] #abstract-canvas,
body[data-theme="bts-jimin"] #abstract-canvas,
body[data-theme="bts-jhope"] #abstract-canvas { display: none; }

/* Атмосферные градиенты в бэкграунде */
body[data-theme="bts-jk"]::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 500px 400px at 80% 10%, rgba(201, 168, 76, .08) 0%, transparent 65%),
        radial-gradient(ellipse 400px 300px at 10% 85%, rgba(139, 26, 26, .12) 0%, transparent 60%),
        radial-gradient(ellipse 600px 200px at 50% 110%, rgba(201, 168, 76, .05) 0%, transparent 55%);
}
body[data-theme="bts-jimin"]::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 600px 500px at 75% -5%, rgba(212, 160, 200, .12) 0%, transparent 60%),
        radial-gradient(ellipse 400px 400px at 5% 90%, rgba(124, 78, 138, .10) 0%, transparent 60%),
        radial-gradient(ellipse 300px 300px at 50% 50%, rgba(212, 160, 200, .04) 0%, transparent 55%);
}
body[data-theme="bts-jhope"]::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 500px 300px at 90% 5%, rgba(255, 107, 0, .12) 0%, transparent 60%),
        radial-gradient(ellipse 400px 400px at 0% 90%, rgba(0, 212, 255, .08) 0%, transparent 60%),
        radial-gradient(ellipse 300px 200px at 50% 50%, rgba(255, 26, 107, .05) 0%, transparent 55%);
    animation: hopeFlicker 8s ease-in-out infinite alternate;
}
@keyframes hopeFlicker {
    0%   { filter: hue-rotate(0deg)  brightness(1); }
    100% { filter: hue-rotate(15deg) brightness(1.05); }
}

/* Радиусы участников */
body[data-theme="bts-jk"] .card,
body[data-theme="bts-jhope"] .card { border-radius: var(--r); }
body[data-theme="bts-jimin"] .card { border-radius: var(--r); }
body[data-theme="bts-jk"] .st-bts-hero,
body[data-theme="bts-jhope"] .st-bts-hero { border-radius: var(--r); }
body[data-theme="bts-jimin"] .st-bts-hero { border-radius: var(--r); }
body[data-theme="bts-jimin"] .modal-content,
body[data-theme="bts-jimin"] .st-modal-card { border-radius: var(--r-sm); }

/* Карточка BTS */
body[data-theme="bts-jk"] .card,
body[data-theme="bts-jimin"] .card,
body[data-theme="bts-jhope"] .card {
    background: var(--surface);
    border: 1px solid var(--border);
    animation: btsCardIn .6s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes btsCardIn {
    from { opacity: 0; transform: translateY(32px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Уголки / свечения карточки по участникам */
body[data-theme="bts-jk"] .card::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 60px; height: 60px;
    background: linear-gradient(135deg, var(--a1) 0%, transparent 55%);
    opacity: .4;
    pointer-events: none; z-index: 1;
    clip-path: none;
    display: block;
}
body[data-theme="bts-jk"] .card::after,
body[data-theme="bts-jimin"] .card::after,
body[data-theme="bts-jhope"] .card::after { display: none; }

body[data-theme="bts-jimin"] .card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--a1), var(--a3), var(--a1), transparent);
    background-size: 200% 100%;
    animation: jiminLine 4s linear infinite;
    display: block;
}
@keyframes jiminLine { 0% { background-position: 0% } 100% { background-position: 200% } }

body[data-theme="bts-jhope"] .card::before {
    content: '';
    position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
    background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3), var(--a4), var(--a1));
    background-size: 300% 100%;
    animation: hopeBar 2.5s linear infinite;
    display: block;
}
@keyframes hopeBar { 0% { background-position: 0% } 100% { background-position: 300% } }

/* Hero-баннер: плавный пан + персональные фильтры фото */
.st-bts-hero-bg {
    background-size: cover;
    background-position: center top;
    transform: scale(1.05);
    animation: heroPan 18s ease-in-out infinite alternate;
}
@keyframes heroPan {
    from { transform: scale(1.05) translateY(0); }
    to   { transform: scale(1.1) translateY(-3%); }
}
body[data-theme="bts-jk"] .st-bts-hero-bg { filter: brightness(.4) contrast(1.2) sepia(.3); }
body[data-theme="bts-jimin"] .st-bts-hero-bg { filter: brightness(.45) saturate(.8) hue-rotate(20deg); }
body[data-theme="bts-jhope"] .st-bts-hero-bg { filter: brightness(.4) saturate(1.4) contrast(1.1); }

/* Имя участника на hero */
body[data-theme="bts-jk"] .st-bts-hero .st-hero-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(44px, 7vw, 72px);
    line-height: .85;
    letter-spacing: 4px;
    color: var(--a1);
    text-shadow: 0 0 40px rgba(201, 168, 76, .4), 0 4px 24px rgba(0, 0, 0, .8);
}
body[data-theme="bts-jimin"] .st-bts-hero .st-hero-name {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(38px, 6vw, 64px);
    line-height: .85;
    letter-spacing: 8px;
    color: var(--a1);
    text-shadow: 0 0 50px rgba(212, 160, 200, .5);
}
body[data-theme="bts-jhope"] .st-bts-hero .st-hero-name {
    font-family: 'Black Han Sans', sans-serif;
    font-size: clamp(36px, 6vw, 60px);
    line-height: .9;
    letter-spacing: -1px;
    background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(255, 107, 0, .5));
}
body[data-theme="bts-jk"] .st-bts-hero .st-hero-sub,
body[data-theme="bts-jimin"] .st-bts-hero .st-hero-sub,
body[data-theme="bts-jhope"] .st-bts-hero .st-hero-sub {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

/* Формы карточек участников */
body[data-theme="bts-jhope"] .bts-member-card {
    clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);
    border-radius: 0;
}
body[data-theme="bts-jk"] .bts-member-card { border-radius: 0; }
body[data-theme="bts-jimin"] .bts-member-card { border-radius: var(--r-sm); }

/* ════════════════════════════════════════════════════════════════════
   5. SCROLLBARS — стилизуем скроллбары под каждую тему
   ════════════════════════════════════════════════════════════════════ */

/* Базовая геометрия. Цвета внутренних контейнеров (quiz, модалки, списки)
   подхватываются автоматически через --sb-* переменные тела. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(10, 10, 14, .5); }
::-webkit-scrollbar-thumb {
    background: var(--sb-thumb, #3a3a4a);
    border-radius: var(--sb-radius, 6px);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--sb-thumb2, var(--sb-thumb, #56566a));
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Firefox: тонкий скроллбар, цвета по теме. */
body[data-theme="neutral"]   { scrollbar-color: #3a3a4a  #101014; scrollbar-width: thin; }
body[data-theme="terminal"]  { scrollbar-color: #00b32c #030b03; scrollbar-width: thin; }
body[data-theme="neon-t"]    { scrollbar-color: #ff0080 #0a0013; scrollbar-width: thin; }
body[data-theme="amber"]     { scrollbar-color: #ffb800 #120b00; scrollbar-width: thin; }
body[data-theme="arthouse"]  { scrollbar-color: #7B6CF6 #0b0b16; scrollbar-width: thin; }
body[data-theme="newyear"]   { scrollbar-color: #5EEAF5 #071320; scrollbar-width: thin; }
body[data-theme="gay"]       { scrollbar-color: #FF2E88 #18070f; scrollbar-width: thin; }
body[data-theme="noir"]      { scrollbar-color: #E8E1D7 #0a0a0a; scrollbar-width: thin; }
body[data-theme="bts-jk"]    { scrollbar-color: #C9A84C #0d0b06; scrollbar-width: thin; }
body[data-theme="bts-jimin"] { scrollbar-color: #D4A0C8 #140b16; scrollbar-width: thin; }
body[data-theme="bts-jhope"] { scrollbar-color: #FF6B00 #140b02; scrollbar-width: thin; }

/* NEUTRAL */
body[data-theme="neutral"] { --sb-thumb: linear-gradient(#3f3f4c, #26262e); --sb-thumb2: #57576a; --sb-radius: 6px; }
html:has(body[data-theme="neutral"])::-webkit-scrollbar-track { background: #101014; }
html:has(body[data-theme="neutral"])::-webkit-scrollbar-thumb { background: linear-gradient(#3f3f4c, #26262e); border-radius: 6px; }
html:has(body[data-theme="neutral"])::-webkit-scrollbar-thumb:hover { background: #57576a; }

/* TERMINAL */
body[data-theme="terminal"] { --sb-thumb: linear-gradient(#00b32c, #008722); --sb-thumb2: #00ff41; --sb-radius: 0; }
html:has(body[data-theme="terminal"])::-webkit-scrollbar-track { background: #030b03; }
html:has(body[data-theme="terminal"])::-webkit-scrollbar-thumb { background: linear-gradient(#00b32c, #008722); border-radius: 0; }
html:has(body[data-theme="terminal"])::-webkit-scrollbar-thumb:hover { background: #00ff41; }

/* NEON-T */
body[data-theme="neon-t"] { --sb-thumb: linear-gradient(#ff0080, #b2005c); --sb-thumb2: #ff4da6; --sb-radius: 2px; }
html:has(body[data-theme="neon-t"])::-webkit-scrollbar-track { background: #0a0013; }
html:has(body[data-theme="neon-t"])::-webkit-scrollbar-thumb { background: linear-gradient(#ff0080, #b2005c); border-radius: 2px; }
html:has(body[data-theme="neon-t"])::-webkit-scrollbar-thumb:hover { background: #ff4da6; }

/* AMBER */
body[data-theme="amber"] { --sb-thumb: linear-gradient(#ffb800, #cc9200); --sb-thumb2: #ffd54a; --sb-radius: 2px; }
html:has(body[data-theme="amber"])::-webkit-scrollbar-track { background: #120b00; }
html:has(body[data-theme="amber"])::-webkit-scrollbar-thumb { background: linear-gradient(#ffb800, #cc9200); border-radius: 2px; }
html:has(body[data-theme="amber"])::-webkit-scrollbar-thumb:hover { background: #ffd54a; }

/* ARTHOUSE */
body[data-theme="arthouse"] { --sb-thumb: linear-gradient(#7B6CF6, #F472B6); --sb-thumb2: #a78bfa; --sb-radius: 6px; }
html:has(body[data-theme="arthouse"])::-webkit-scrollbar-track { background: #0b0b16; }
html:has(body[data-theme="arthouse"])::-webkit-scrollbar-thumb { background: linear-gradient(#7B6CF6, #F472B6); border-radius: 6px; }
html:has(body[data-theme="arthouse"])::-webkit-scrollbar-thumb:hover { background: #a78bfa; }

/* NEWYEAR */
body[data-theme="newyear"] { --sb-thumb: linear-gradient(#5EEAF5, #34D399); --sb-thumb2: #a5f3fc; --sb-radius: 6px; }
html:has(body[data-theme="newyear"])::-webkit-scrollbar-track { background: #071320; }
html:has(body[data-theme="newyear"])::-webkit-scrollbar-thumb { background: linear-gradient(#5EEAF5, #34D399); border-radius: 6px; }
html:has(body[data-theme="newyear"])::-webkit-scrollbar-thumb:hover { background: #a5f3fc; }

/* GAY */
body[data-theme="gay"] { --sb-thumb: linear-gradient(#FF2E88, #00CFFF); --sb-thumb2: #FF6B00; --sb-radius: 6px; }
html:has(body[data-theme="gay"])::-webkit-scrollbar-track { background: #18070f; }
html:has(body[data-theme="gay"])::-webkit-scrollbar-thumb { background: linear-gradient(#FF2E88, #00CFFF); border-radius: 6px; }
html:has(body[data-theme="gay"])::-webkit-scrollbar-thumb:hover { background: #FF6B00; }

/* NOIR */
body[data-theme="noir"] { --sb-thumb: linear-gradient(#E8E1D7, #9a9180); --sb-thumb2: #ffffff; --sb-radius: 0; }
html:has(body[data-theme="noir"])::-webkit-scrollbar-track { background: #0a0a0a; }
html:has(body[data-theme="noir"])::-webkit-scrollbar-thumb { background: linear-gradient(#E8E1D7, #9a9180); border-radius: 0; }
html:has(body[data-theme="noir"])::-webkit-scrollbar-thumb:hover { background: #ffffff; }

/* BTS-JK */
body[data-theme="bts-jk"] { --sb-thumb: linear-gradient(#C9A84C, #8B1A1A); --sb-thumb2: #E8C97A; --sb-radius: 4px; }
html:has(body[data-theme="bts-jk"])::-webkit-scrollbar-track { background: #0d0b06; }
html:has(body[data-theme="bts-jk"])::-webkit-scrollbar-thumb { background: linear-gradient(#C9A84C, #8B1A1A); border-radius: 4px; }
html:has(body[data-theme="bts-jk"])::-webkit-scrollbar-thumb:hover { background: #E8C97A; }

/* BTS-JIMIN */
body[data-theme="bts-jimin"] { --sb-thumb: linear-gradient(#D4A0C8, #7C4E8A); --sb-thumb2: #EACCDD; --sb-radius: 8px; }
html:has(body[data-theme="bts-jimin"])::-webkit-scrollbar-track { background: #140b16; }
html:has(body[data-theme="bts-jimin"])::-webkit-scrollbar-thumb { background: linear-gradient(#D4A0C8, #7C4E8A); border-radius: 8px; }
html:has(body[data-theme="bts-jimin"])::-webkit-scrollbar-thumb:hover { background: #EACCDD; }

/* BTS-JHOPE */
body[data-theme="bts-jhope"] { --sb-thumb: linear-gradient(#FF6B00, #FF1A6B); --sb-thumb2: #FFB347; --sb-radius: 4px; }
html:has(body[data-theme="bts-jhope"])::-webkit-scrollbar-track { background: #140b02; }
html:has(body[data-theme="bts-jhope"])::-webkit-scrollbar-thumb { background: linear-gradient(#FF6B00, #FF1A6B); border-radius: 4px; }
html:has(body[data-theme="bts-jhope"])::-webkit-scrollbar-thumb:hover { background: #FFB347; }

/* ════════════════════════════════════════════════════════════════════
   6. PERFORMANCE-MODE — глушим тяжёлые декоративные слои
   ════════════════════════════════════════════════════════════════════ */
body.performance-mode::before,
body.performance-mode::after { content: none !important; }

body.performance-mode #abstract-canvas,
body.performance-mode #matrix-bg { display: none !important; }

body.performance-mode .card::before,
body.performance-mode .card::after,
body.performance-mode .st-bts-hero-bg,
body.performance-mode .bts-member-card,
body.performance-mode .sh { animation: none !important; }