/* ═══════════════════════════════════════════════
   themes.css — 10 Premium Themes для kinopchel
   ───────────────────────────────────────────────
   Современные технологии CSS:
   · @property   — типизированные анимируемые переменные
   · oklch()     — перцептивное цветовое пространство
   · color-mix() — производные цвета без дублирования
   · CSS Nesting  — вложенные правила
   · @layer       — управление каскадом
   · :is()        — группировка селекторов
   · color-scheme — встроенная поддержка светлых тем
   · logical properties — инлайновые свойства
   · View Transitions — плавная смена тем
   ═══════════════════════════════════════════════ */

/* ── Cascade Layers ─────────────────────────── */
@layer themes, switcher;

/* ── @property: типизированные переменные ──────
   Позволяет браузеру анимировать CSS-переменные!
───────────────────────────────────────────────── */
@property --theme-bg       { syntax: '<color>'; inherits: true; initial-value: #04050e; }
@property --theme-bg2      { syntax: '<color>'; inherits: true; initial-value: #080a18; }
@property --theme-bg3      { syntax: '<color>'; inherits: true; initial-value: #0c1020; }
@property --theme-accent1  { syntax: '<color>'; inherits: true; initial-value: #7744ff; }
@property --theme-accent2  { syntax: '<color>'; inherits: true; initial-value: #44aaff; }
@property --theme-accent3  { syntax: '<color>'; inherits: true; initial-value: #cc44ff; }
@property --theme-text     { syntax: '<color>'; inherits: true; initial-value: #a8b8e0; }
@property --theme-textbold { syntax: '<color>'; inherits: true; initial-value: #ccbbff; }

/* ── Плавные переходы между темами ─────────────
   Работает благодаря типам из @property выше
───────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  interpolate-size: allow-keywords;
  accent-color: var(--theme-accent1);
  scrollbar-color: var(--theme-accent1) var(--theme-bg2);
  scrollbar-width: thin;
  transition:
    --theme-bg        0.45s ease,
    --theme-bg2       0.45s ease,
    --theme-bg3       0.45s ease,
    --theme-accent1   0.45s ease,
    --theme-accent2   0.45s ease,
    --theme-accent3   0.45s ease,
    --theme-text      0.45s ease,
    --theme-textbold  0.45s ease;
}

/* ── View Transitions API ───────────────────────
   Плавный fade при смене темы через JS
───────────────────────────────────────────────── */
::view-transition-old(root) {
  animation: 280ms ease both vt-out;
}
::view-transition-new(root) {
  animation: 400ms cubic-bezier(0, 0, 0.2, 1) both vt-in;
}
@keyframes vt-out {
  to { opacity: 0; filter: blur(6px) saturate(0.3); transform: scale(0.97); }
}
@keyframes vt-in {
  from { opacity: 0; filter: blur(6px) saturate(2); transform: scale(1.03); }
}

/* ── Современные текстовые свойства ──────────── */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }


/* ════════════════════════════════════════════════
   Переменные цветовых схем
   (НЕ в @layer — иначе unlayered :root победит в каскаде)
   ════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────
   01 · NEON HORIZON (дефолт из :root в styles.css)
───────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────
   02 · CRIMSON DYNASTY — oklch() цвета
───────────────────────────────────────────────── */
[data-theme="crimson"] {
  --theme-bg:       oklch(8%  0.04 20);
  --theme-bg2:      oklch(11% 0.05 20);
  --theme-bg3:      oklch(14% 0.06 20);
  --theme-accent1:  oklch(42% 0.22 25);
  --theme-accent2:  oklch(58% 0.22 20);
  --theme-accent3:  oklch(70% 0.16 85);
  --theme-text:     oklch(78% 0.05 25);
  --theme-textbold: oklch(72% 0.12 22);
  --theme-r1: 204, 17, 34;
  --theme-r2: 255, 68, 51;
  --theme-r3: 204, 153, 0;
}

/* ─────────────────────────────────────────────────
   03 · EMERALD PROTOCOL
───────────────────────────────────────────────── */
[data-theme="emerald"] {
  --theme-bg:       oklch(8%  0.04 145);
  --theme-bg2:      oklch(11% 0.05 145);
  --theme-bg3:      oklch(14% 0.06 145);
  --theme-accent1:  oklch(70% 0.22 145);
  --theme-accent2:  oklch(82% 0.22 145);
  --theme-accent3:  oklch(58% 0.20 145);
  --theme-text:     oklch(78% 0.06 145);
  --theme-textbold: oklch(88% 0.14 145);
  --theme-r1: 0, 204, 102;
  --theme-r2: 68, 255, 136;
  --theme-r3: 0, 153, 68;
}

/* ─────────────────────────────────────────────────
   04 · SOLAR FLARE
───────────────────────────────────────────────── */
[data-theme="solar"] {
  --theme-bg:       oklch(8%  0.04 55);
  --theme-bg2:      oklch(11% 0.05 55);
  --theme-bg3:      oklch(14% 0.06 55);
  --theme-accent1:  oklch(68% 0.18 55);
  --theme-accent2:  oklch(82% 0.16 85);
  --theme-accent3:  oklch(58% 0.20 35);
  --theme-text:     oklch(82% 0.06 55);
  --theme-textbold: oklch(88% 0.14 85);
  --theme-r1: 255, 136, 0;
  --theme-r2: 255, 204, 34;
  --theme-r3: 255, 68, 0;
}

/* ─────────────────────────────────────────────────
   05 · ARCTIC AURORA
───────────────────────────────────────────────── */
[data-theme="aurora"] {
  --theme-bg:       oklch(8%  0.04 180);
  --theme-bg2:      oklch(11% 0.05 175);
  --theme-bg3:      oklch(14% 0.06 172);
  --theme-accent1:  oklch(78% 0.18 170);
  --theme-accent2:  oklch(90% 0.18 170);
  --theme-accent3:  oklch(58% 0.18 220);
  --theme-text:     oklch(80% 0.06 175);
  --theme-textbold: oklch(92% 0.14 170);
  --theme-r1: 0, 221, 170;
  --theme-r2: 0, 255, 204;
  --theme-r3: 0, 136, 204;
}

/* ─────────────────────────────────────────────────
   06 · STORM CLOUD
───────────────────────────────────────────────── */
[data-theme="storm"] {
  --theme-bg:       oklch(9%  0.03 265);
  --theme-bg2:      oklch(12% 0.04 265);
  --theme-bg3:      oklch(15% 0.05 265);
  --theme-accent1:  oklch(60% 0.18 265);
  --theme-accent2:  oklch(75% 0.14 255);
  --theme-accent3:  oklch(42% 0.18 265);
  --theme-text:     oklch(80% 0.05 265);
  --theme-textbold: oklch(92% 0.06 250);
  --theme-r1: 102, 136, 255;
  --theme-r2: 170, 204, 255;
  --theme-r3: 51, 68, 153;
}

/* ─────────────────────────────────────────────────
   07 · HOLOGRAPHIC FOIL — радужные эффекты
───────────────────────────────────────────────── */
[data-theme="holo"] {
  --theme-bg:       oklch(7%  0.01 280);
  --theme-bg2:      oklch(10% 0.02 280);
  --theme-bg3:      oklch(13% 0.02 280);
  --theme-accent1:  oklch(58% 0.24 340);
  --theme-accent2:  oklch(85% 0.18 170);
  --theme-accent3:  oklch(88% 0.18 90);
  --theme-text:     oklch(82% 0.02 280);
  --theme-textbold: oklch(100% 0 0);
  --theme-r1: 255, 68, 170;
  --theme-r2: 68, 255, 204;
  --theme-r3: 255, 204, 0;

  /* CSS Nesting: holo-специфичные правила прямо внутри темы */
  & .head::after,
  & .line::after,
  & .foot::before {
    background: linear-gradient(90deg,
      #ff0080, #ff44aa, #ffcc00, #44ffcc,
      #00aaff, #aa44ff, #ff0080);
    background-size: 300% 100%;
    animation: lineSweep 2.5s linear infinite;
  }

  & .short-but,
  & .nav-box-title,
  & .carou-title2 {
    background: linear-gradient(135deg, #ff44aa, #44ffcc, #ffcc00) !important;
    background-size: 200% 200% !important;
    animation: borderShimmer 3s ease-in-out infinite !important;
    color: #000 !important;
    text-shadow: none !important;
  }
}

/* ─────────────────────────────────────────────────
   08 · PEARL GARDEN 🌸 (СВЕТЛАЯ тема)
   color-scheme: light — браузер адаптирует UI-элементы
   color-mix() — производные цвета от акцента
───────────────────────────────────────────────── */
[data-theme="pearl"] {
  color-scheme: light;
  --theme-bg:       oklch(98% 0.01 340);
  --theme-bg2:      oklch(95% 0.02 340);
  --theme-bg3:      oklch(92% 0.03 340);
  --theme-accent1:  oklch(52% 0.16 345);
  --theme-accent2:  oklch(68% 0.14 345);
  --theme-accent3:  oklch(56% 0.14 145);
  --theme-text:     oklch(28% 0.04 345);
  --theme-textbold: oklch(38% 0.14 345);
  --theme-shadow:   oklch(0% 0 0 / 0.10);
  --theme-r1: 200, 90, 122;
  --theme-r2: 232, 138, 160;
  --theme-r3: 58, 136, 88;

  background-image:
    radial-gradient(ellipse at 20% 15%, color-mix(in oklch, var(--theme-accent1) 8%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, color-mix(in oklch, var(--theme-accent2) 7%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 55% 50%, color-mix(in oklch, var(--theme-accent3) 4%, transparent) 0%, transparent 60%);

  & .wrap {
    background-color: oklch(98% 0.01 340);
    box-shadow: 0 0 50px color-mix(in oklch, var(--theme-accent1) 12%, transparent), 0 25px 60px oklch(0% 0 0 / 0.15);
    border-left-color:  color-mix(in oklch, var(--theme-accent1) 15%, transparent);
    border-right-color: color-mix(in oklch, var(--theme-accent3) 10%, transparent);
  }
  & a { color: var(--theme-accent1); }
  & a:hover { color: var(--theme-textbold); text-shadow: 0 0 6px color-mix(in oklch, var(--theme-accent1) 40%, transparent); }
  & .head { background: linear-gradient(180deg, oklch(94% 0.02 340) 0%, oklch(98% 0.01 340) 100%); }
  & .head-line {
    background: linear-gradient(180deg, oklch(92% 0.03 340) 0%, oklch(98% 0.01 340) 100%);
    border-bottom-color: color-mix(in oklch, var(--theme-accent1) 25%, transparent);
  }
  & .line { background: linear-gradient(180deg, oklch(92% 0.03 340) 0%, oklch(88% 0.04 340) 100%) !important; }
  & .line-navi a { color: oklch(35% 0.06 345); }
  & .line-navi a:hover { color: #fff !important; text-shadow: none; }
  & .short-item {
    background: linear-gradient(160deg, oklch(97% 0.02 340), oklch(98% 0.01 340));
    border-color: color-mix(in oklch, var(--theme-accent1) 20%, transparent);
  }
  & .short-item:hover {
    border-color: color-mix(in oklch, var(--theme-accent1) 40%, transparent);
    box-shadow:
      0 16px 40px color-mix(in oklch, var(--theme-accent1) 18%, transparent),
      0 0 30px color-mix(in oklch, var(--theme-accent1) 10%, transparent);
  }
  & .short-head {
    background: linear-gradient(135deg,
      color-mix(in oklch, var(--theme-accent1) 15%, transparent),
      color-mix(in oklch, var(--theme-accent1) 5%, transparent));
    border-bottom-color: color-mix(in oklch, var(--theme-accent1) 30%, transparent);
  }
  & :is(.short-link, .short-head h3) { color: var(--theme-textbold); }
  & .nav-box {
    background: linear-gradient(180deg, oklch(92% 0.03 340), oklch(98% 0.01 340));
    border-color: color-mix(in oklch, var(--theme-accent1) 25%, transparent);
  }
  & .nav-box-title {
    background: linear-gradient(135deg,
      color-mix(in oklch, var(--theme-accent1) 20%, transparent),
      color-mix(in oklch, var(--theme-accent2) 10%, transparent));
    color: var(--theme-textbold);
    text-shadow: none;
    animation: none;
  }
  & :is(.dark-blue, .k-meta, .nav > li > a, .nav > li > span,
        .mov-fav, .tabs li, .mov-compl a, .login-title) {
    background: linear-gradient(135deg, oklch(92% 0.03 340), oklch(88% 0.04 340)) !important;
    color: oklch(35% 0.06 345) !important;
    border-bottom-color: color-mix(in oklch, var(--theme-accent1) 20%, transparent) !important;
  }
  & :is(.purple, .tabs li.current, .line-navi a:hover,
        .nav > li > a:hover, .nav > li > span:hover, .login-menu a:hover) {
    background: linear-gradient(135deg,
      var(--theme-accent1),
      color-mix(in oklch, var(--theme-accent1) 75%, black)) !important;
    color: #fff !important;
    box-shadow: 0 0 14px color-mix(in oklch, var(--theme-accent1) 40%, transparent) !important;
    animation: none !important;
  }
  & .foot {
    background: linear-gradient(180deg, oklch(88% 0.04 340), oklch(98% 0.01 340));
    border-top-color: color-mix(in oklch, var(--theme-accent1) 25%, transparent);
  }
  & .bottom-wr { background: linear-gradient(180deg, oklch(92% 0.03 340), oklch(98% 0.01 340)); }
  & .login-box {
    background: linear-gradient(180deg, oklch(95% 0.02 340), oklch(98% 0.01 340));
    border-color: color-mix(in oklch, var(--theme-accent1) 35%, transparent);
    box-shadow:
      0 0 40px color-mix(in oklch, var(--theme-accent1) 20%, transparent),
      0 20px 60px oklch(0% 0 0 / 0.15);
  }
  & ::-webkit-scrollbar-track { background: oklch(98% 0.01 340); }
  & ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
      var(--theme-accent1),
      color-mix(in oklch, var(--theme-accent1) 75%, black));
  }
  & ::selection { background: color-mix(in oklch, var(--theme-accent1) 25%, transparent); }
  & #gotop { box-shadow: 0 0 20px color-mix(in oklch, var(--theme-accent1) 40%, transparent); }
}

/* ─────────────────────────────────────────────────
   09 · GOLDEN HOUR ☀️ (СВЕТЛАЯ тема)
───────────────────────────────────────────────── */
[data-theme="golden"] {
  color-scheme: light;
  --theme-bg:       oklch(99% 0.01 85);
  --theme-bg2:      oklch(97% 0.03 85);
  --theme-bg3:      oklch(94% 0.05 80);
  --theme-accent1:  oklch(55% 0.17 55);
  --theme-accent2:  oklch(72% 0.16 75);
  --theme-accent3:  oklch(50% 0.20 35);
  --theme-text:     oklch(28% 0.05 55);
  --theme-textbold: oklch(38% 0.15 45);
  --theme-shadow:   oklch(0% 0 0 / 0.10);
  --theme-r1: 212, 112, 10;
  --theme-r2: 240, 160, 48;
  --theme-r3: 192, 68, 32;

  background-image:
    radial-gradient(ellipse at 20% 15%, color-mix(in oklch, var(--theme-accent1) 9%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, color-mix(in oklch, var(--theme-accent2) 7%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 55% 50%, color-mix(in oklch, var(--theme-accent3) 4%, transparent) 0%, transparent 60%);

  & .wrap { background-color: oklch(99% 0.01 85); box-shadow: 0 0 50px color-mix(in oklch, var(--theme-accent1) 12%, transparent), 0 25px 60px oklch(0% 0 0 / 0.12); }
  & a { color: var(--theme-accent1); }
  & a:hover { color: var(--theme-textbold); text-shadow: 0 0 6px color-mix(in oklch, var(--theme-accent1) 40%, transparent); }
  & .head { background: linear-gradient(180deg, oklch(94% 0.04 80) 0%, oklch(99% 0.01 85) 100%); }
  & .head-line { background: linear-gradient(180deg, oklch(92% 0.05 78) 0%, oklch(99% 0.01 85) 100%); }
  & .line { background: linear-gradient(180deg, oklch(92% 0.05 78) 0%, oklch(88% 0.07 76) 100%) !important; }
  & .line-navi a { color: oklch(32% 0.07 50); }
  & .line-navi a:hover { color: #fff !important; text-shadow: none; }
  & .short-item {
    background: linear-gradient(160deg, oklch(97% 0.03 80), oklch(99% 0.01 85));
    border-color: color-mix(in oklch, var(--theme-accent1) 20%, transparent);
  }
  & .short-item:hover {
    border-color: color-mix(in oklch, var(--theme-accent1) 40%, transparent);
    box-shadow:
      0 16px 40px color-mix(in oklch, var(--theme-accent1) 18%, transparent),
      0 0 30px color-mix(in oklch, var(--theme-accent2) 12%, transparent);
  }
  & .short-head {
    background: linear-gradient(135deg,
      color-mix(in oklch, var(--theme-accent1) 15%, transparent),
      color-mix(in oklch, var(--theme-accent1) 5%, transparent));
    border-bottom-color: color-mix(in oklch, var(--theme-accent1) 30%, transparent);
  }
  & :is(.short-link, .short-head h3) { color: var(--theme-textbold); }
  & .nav-box {
    background: linear-gradient(180deg, oklch(92% 0.05 78), oklch(99% 0.01 85));
    border-color: color-mix(in oklch, var(--theme-accent1) 25%, transparent);
  }
  & .nav-box-title {
    background: linear-gradient(135deg,
      color-mix(in oklch, var(--theme-accent1) 20%, transparent),
      color-mix(in oklch, var(--theme-accent2) 10%, transparent));
    color: var(--theme-textbold); text-shadow: none; animation: none;
  }
  & :is(.dark-blue, .k-meta, .nav > li > a, .nav > li > span,
        .mov-fav, .tabs li, .mov-compl a, .login-title) {
    background: linear-gradient(135deg, oklch(92% 0.05 78), oklch(88% 0.07 76)) !important;
    color: oklch(32% 0.07 50) !important;
    border-bottom-color: color-mix(in oklch, var(--theme-accent1) 20%, transparent) !important;
  }
  & :is(.purple, .tabs li.current, .line-navi a:hover,
        .nav > li > a:hover, .nav > li > span:hover, .login-menu a:hover) {
    background: linear-gradient(135deg,
      var(--theme-accent1),
      color-mix(in oklch, var(--theme-accent1) 75%, black)) !important;
    color: #fff !important;
    box-shadow: 0 0 14px color-mix(in oklch, var(--theme-accent1) 40%, transparent) !important;
    animation: none !important;
  }
  & .foot { background: linear-gradient(180deg, oklch(88% 0.07 76), oklch(99% 0.01 85)); }
  & .login-box {
    background: linear-gradient(180deg, oklch(94% 0.04 80), oklch(99% 0.01 85));
    border-color: color-mix(in oklch, var(--theme-accent1) 35%, transparent);
    box-shadow: 0 0 40px color-mix(in oklch, var(--theme-accent1) 18%, transparent), 0 20px 60px oklch(0% 0 0 / 0.12);
  }
  & ::-webkit-scrollbar-track { background: oklch(99% 0.01 85); }
  & ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--theme-accent1), color-mix(in oklch, var(--theme-accent1) 75%, black));
  }
  & ::selection { background: color-mix(in oklch, var(--theme-accent1) 25%, transparent); }
}

/* ─────────────────────────────────────────────────
   10 · GLACIER INK 🧊 (СВЕТЛАЯ тема)
───────────────────────────────────────────────── */
[data-theme="glacier"] {
  color-scheme: light;
  --theme-bg:       oklch(97% 0.01 260);
  --theme-bg2:      oklch(94% 0.02 260);
  --theme-bg3:      oklch(91% 0.04 260);
  --theme-accent1:  oklch(42% 0.22 265);
  --theme-accent2:  oklch(58% 0.20 265);
  --theme-accent3:  oklch(28% 0.22 265);
  --theme-text:     oklch(22% 0.05 265);
  --theme-textbold: oklch(18% 0.18 265);
  --theme-shadow:   oklch(0% 0 0 / 0.10);
  --theme-r1: 26, 68, 204;
  --theme-r2: 68, 119, 238;
  --theme-r3: 10, 34, 136;

  background-image:
    radial-gradient(ellipse at 20% 15%, color-mix(in oklch, var(--theme-accent1) 8%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, color-mix(in oklch, var(--theme-accent2) 6%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 55% 50%, color-mix(in oklch, var(--theme-accent3) 4%, transparent) 0%, transparent 60%);

  & .wrap { background-color: oklch(97% 0.01 260); box-shadow: 0 0 50px color-mix(in oklch, var(--theme-accent1) 10%, transparent), 0 25px 60px oklch(0% 0 0 / 0.10); }
  & a { color: var(--theme-accent1); }
  & a:hover { color: var(--theme-textbold); text-shadow: 0 0 6px color-mix(in oklch, var(--theme-accent1) 35%, transparent); }
  & .head { background: linear-gradient(180deg, oklch(90% 0.04 260) 0%, oklch(97% 0.01 260) 100%); }
  & .head-line { background: linear-gradient(180deg, oklch(87% 0.06 260) 0%, oklch(97% 0.01 260) 100%); }
  & .line { background: linear-gradient(180deg, oklch(87% 0.06 260) 0%, oklch(83% 0.08 258) 100%) !important; }
  & .line-navi a { color: oklch(20% 0.10 265); }
  & .line-navi a:hover { color: #fff !important; text-shadow: none; }
  & .short-item {
    background: linear-gradient(160deg, oklch(95% 0.02 260), oklch(97% 0.01 260));
    border-color: color-mix(in oklch, var(--theme-accent1) 18%, transparent);
  }
  & .short-item:hover {
    border-color: color-mix(in oklch, var(--theme-accent1) 38%, transparent);
    box-shadow:
      0 16px 40px color-mix(in oklch, var(--theme-accent1) 15%, transparent),
      0 0 30px color-mix(in oklch, var(--theme-accent2) 8%, transparent);
  }
  & .short-head {
    background: linear-gradient(135deg,
      color-mix(in oklch, var(--theme-accent1) 12%, transparent),
      color-mix(in oklch, var(--theme-accent1) 4%, transparent));
    border-bottom-color: color-mix(in oklch, var(--theme-accent1) 25%, transparent);
  }
  & :is(.short-link, .short-head h3) { color: var(--theme-textbold); }
  & .nav-box {
    background: linear-gradient(180deg, oklch(87% 0.06 260), oklch(97% 0.01 260));
    border-color: color-mix(in oklch, var(--theme-accent1) 22%, transparent);
  }
  & .nav-box-title {
    background: linear-gradient(135deg,
      color-mix(in oklch, var(--theme-accent1) 18%, transparent),
      color-mix(in oklch, var(--theme-accent2) 10%, transparent));
    color: var(--theme-textbold); text-shadow: none; animation: none;
  }
  & :is(.dark-blue, .k-meta, .nav > li > a, .nav > li > span,
        .mov-fav, .tabs li, .mov-compl a, .login-title) {
    background: linear-gradient(135deg, oklch(87% 0.06 260), oklch(83% 0.08 258)) !important;
    color: oklch(20% 0.10 265) !important;
    border-bottom-color: color-mix(in oklch, var(--theme-accent1) 18%, transparent) !important;
  }
  & :is(.purple, .tabs li.current, .line-navi a:hover,
        .nav > li > a:hover, .nav > li > span:hover, .login-menu a:hover) {
    background: linear-gradient(135deg,
      var(--theme-accent1),
      color-mix(in oklch, var(--theme-accent1) 75%, black)) !important;
    color: #fff !important;
    box-shadow: 0 0 14px color-mix(in oklch, var(--theme-accent1) 40%, transparent) !important;
    animation: none !important;
  }
  & .foot { background: linear-gradient(180deg, oklch(83% 0.08 258), oklch(97% 0.01 260)); }
  & .login-box {
    background: linear-gradient(180deg, oklch(91% 0.04 260), oklch(97% 0.01 260));
    border-color: color-mix(in oklch, var(--theme-accent1) 30%, transparent);
    box-shadow: 0 0 40px color-mix(in oklch, var(--theme-accent1) 15%, transparent), 0 20px 60px oklch(0% 0 0 / 0.10);
  }
  & ::-webkit-scrollbar-track { background: oklch(97% 0.01 260); }
  & ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--theme-accent1), color-mix(in oklch, var(--theme-accent1) 75%, black));
  }
  & ::selection { background: color-mix(in oklch, var(--theme-accent1) 25%, transparent); }
}

/* ════════════════════════════════════════════════
   Боковая панель — кружки цветов
   ════════════════════════════════════════════════ */

/* ── Основная панель ────────────────────────── */
#theme-switcher {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(6, 6, 16, 0.92);
  border: 1px solid rgba(var(--theme-r1), 0.35);
  border-right: none;
  border-radius: 14px 0 0 14px;
  padding: 12px 9px;
  box-shadow:
    -4px 0 30px rgba(0,0,0,0.6),
    0 0 25px rgba(var(--theme-r1), 0.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);

  /* Свёрнуто: панель уходит вправо, торчит только язычок 24px */
  &.ts-hidden {
    transform: translateY(-50%) translateX(100%);
  }
}

/* Светлые темы */
:is([data-theme="pearl"], [data-theme="golden"], [data-theme="glacier"]) #theme-switcher {
  background: rgba(255, 255, 255, 0.93);
  border-color: rgba(var(--theme-r1), 0.20);
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}

/* ── Язычок со стрелкой ─────────────────────── */
#theme-switcher-toggle {
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 54px;
  background: rgba(6, 6, 16, 0.92);
  border: 1px solid rgba(var(--theme-r1), 0.35);
  border-right: none;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: color 0.2s ease, background 0.2s ease;
  user-select: none;

  &:hover {
    color: #fff;
    background: rgba(var(--theme-r1), 0.35);
  }
}

:is([data-theme="pearl"], [data-theme="golden"], [data-theme="glacier"]) #theme-switcher-toggle {
  background: rgba(255, 255, 255, 0.93);
  color: rgba(0, 0, 0, 0.45);
  border-color: rgba(var(--theme-r1), 0.20);
}

/* ── Надпись ТЕМА ───────────────────────────── */
.ts-label {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.30);
  text-align: center;
  margin-bottom: 4px;
  display: block;
  font-family: Tahoma, sans-serif;
}

:is([data-theme="pearl"], [data-theme="golden"], [data-theme="glacier"]) .ts-label {
  color: rgba(0, 0, 0, 0.30);
}

/* ── Кнопки-кружки ──────────────────────────── */
.ts-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.12);
  margin: 2px 0;
  flex-shrink: 0;
  position: relative;
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.22s ease,
    box-shadow 0.22s ease;

  &:hover {
    transform: scale(1.28);
    border-color: rgba(255, 255, 255, 0.65);
    z-index: 1;
  }

  &:focus-visible {
    outline: 2px solid var(--theme-accent2);
    outline-offset: 3px;
  }

  /* Активная тема */
  &.ts-active {
    border-color: #fff !important;
    transform: scale(1.20);
    box-shadow:
      0 0 0 3px rgba(255,255,255,0.15),
      0 0 16px 3px currentColor;

    /* Галочка */
    &::after {
      content: '✓';
      position: absolute;
      inset: 0;
      display: grid;
      place-content: center;
      font-size: 13px;
      font-weight: 900;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    }
  }

  /* Цвета кружков — hex-градиенты для совместимости */
  &[data-theme="neon"]    { background: radial-gradient(circle at 35% 35%, #e0aaff, #9d4edd, #5a189a); color: #9d4edd; }
  &[data-theme="crimson"] { background: radial-gradient(circle at 35% 35%, #ff6b6b, #e63946, #9b1a1a); color: #e63946; }
  &[data-theme="emerald"] { background: radial-gradient(circle at 35% 35%, #b7f5c9, #2ecc71, #1a7a40); color: #2ecc71; }
  &[data-theme="solar"]   { background: radial-gradient(circle at 35% 35%, #ffe066, #ff9500, #c45e00); color: #ff9500; }
  &[data-theme="aurora"]  { background: radial-gradient(circle at 35% 35%, #a8ffec, #00d4a8, #007a60); color: #00d4a8; }
  &[data-theme="storm"]   { background: radial-gradient(circle at 35% 35%, #a8d8ff, #4895ef, #1a4a9a); color: #4895ef; }
  &[data-theme="holo"]    { background: conic-gradient(#f72585, #ffbe0b, #3a86ff, #8338ec, #06d6a0, #f72585); color: #8338ec; }
  &[data-theme="pearl"]   { background: radial-gradient(circle at 35% 35%, #ffe4ef, #ff6eb4, #c0185a); color: #ff6eb4; }
  &[data-theme="golden"]  { background: radial-gradient(circle at 35% 35%, #fff3b0, #f4c20d, #a07800); color: #f4c20d; }
  &[data-theme="glacier"] { background: radial-gradient(circle at 35% 35%, #e0f4ff, #48cae4, #0077b6); color: #48cae4; }
}

/* ── Мобильный адаптив ──────────────────────── */
@media (max-width: 470px) {
  #theme-switcher {
    top: auto;
    bottom: 60px;
    transform: none;

    &.ts-hidden { transform: translateX(100%); }
  }
  #theme-switcher-toggle {
    top: 50%;
    transform: translateY(-50%);
  }
}