/* Темы оформления (apps/core/themes.py). Базовые светлая и тёмная — в main.css; здесь праздничные темы
   (атрибуты <html data-theme data-mode data-fx>): свои цвета, анимированный фон, стеклянные карточки,
   градиентные заголовки и кнопки. Плюс окно выбора темы и «волна» при её смене. */

/* ---------- Цвета тем ---------- */
:root { --card-solid: var(--card); }

/* Базовые темы — фирменные цвета брендбука, к ним добавлены живой фон и стекло. */
:root[data-theme="light"] {
  --page: #F5F8FF; --bg: #EAF2FF;
  --card: rgba(255, 255, 255, .76); --card-solid: #FFFFFF; --card-alt: rgba(240, 246, 255, .85);
  --border: rgba(0, 102, 255, .12);
  --header-bg: rgba(245, 248, 255, .72);
  --hero-grad: linear-gradient(135deg, rgba(255, 255, 255, .85) 0%, rgba(236, 244, 255, .7) 60%, rgba(217, 231, 255, .6) 100%);
  --primary-grad: linear-gradient(120deg, #0066FF 0%, #0050EA 55%, #3B47E0 100%);
  --heading-grad: linear-gradient(100deg, #0B1F4D 0%, #0047E6 55%, #2F86FF 100%);
  --orb-1: rgba(58, 141, 255, .42); --orb-2: rgba(0, 102, 255, .26); --orb-3: rgba(125, 211, 252, .40); --orb-4: rgba(129, 140, 248, .22);
  --spot: rgba(0, 102, 255, .55);
  --fx-bg: linear-gradient(180deg, #EEF4FF, #F7FAFF 55%, #F5F8FF);
}
:root[data-theme="dark"] {
  --page: #070D1A; --bg: #08112A;
  --card: rgba(18, 28, 48, .62); --card-solid: #111B2E; --card-alt: rgba(28, 42, 70, .6);
  --border: rgba(106, 170, 255, .13);
  --header-bg: rgba(7, 13, 26, .66); --footer-bg: #040810;
  --hero-grad: linear-gradient(135deg, rgba(20, 34, 62, .72) 0%, rgba(16, 28, 56, .6) 60%, rgba(30, 30, 80, .5) 100%);
  --primary-grad: linear-gradient(120deg, #2A6FF0 0%, #1F5FFF 50%, #4338CA 100%);
  --heading-grad: linear-gradient(100deg, #FFFFFF 0%, #B9D4FF 45%, #6AAAFF 100%);
  --orb-1: rgba(29, 78, 216, .45); --orb-2: rgba(61, 139, 255, .22); --orb-3: rgba(67, 56, 202, .32); --orb-4: rgba(14, 165, 233, .16);
  --spot: rgba(106, 170, 255, .6);
  --fx-bg: linear-gradient(180deg, #050A16, #081127 55%, #070D1A);
}

:root[data-theme="dawn"] {
  --primary: #D62F5F; --primary-dark: #B5214E; --primary-soft: #FFE4EC; --primary-glow: rgba(214, 47, 95, .32);
  --graphite: #5A4458; --text: #2A1B2E; --muted: #75606F;
  --bg: #FFE9E1; --page: #FFF6F2; --surface: #FFD9CC;
  --card: rgba(255, 255, 255, .74); --card-solid: #FFFFFF; --card-alt: rgba(255, 236, 230, .8);
  --border: rgba(214, 47, 95, .14);
  --header-bg: rgba(255, 246, 242, .72); --footer-bg: #2A1B2E;
  --hero-grad: linear-gradient(135deg, rgba(255, 255, 255, .82) 0%, rgba(255, 238, 232, .7) 55%, rgba(246, 226, 255, .6) 100%);
  --logo-a: #E0405F; --logo-b: #B5308F; --logo-c: #7C3AED;
  --primary-grad: linear-gradient(120deg, #D62F5F 0%, #B5308F 55%, #7C3AED 100%);
  --heading-grad: linear-gradient(100deg, #F0643F 0%, #D62F5F 45%, #7C3AED 100%);
  --shadow: 0 6px 28px rgba(184, 48, 96, .10); --shadow-lg: 0 16px 48px rgba(184, 48, 96, .16);
  --shadow-hover: 0 12px 36px rgba(214, 47, 95, .22);
  --fx-bg:
    radial-gradient(38% 48% at 12% 18%, rgba(255, 138, 92, .55), transparent 70%),
    radial-gradient(42% 52% at 88% 12%, rgba(232, 62, 140, .38), transparent 70%),
    radial-gradient(50% 60% at 72% 92%, rgba(139, 92, 246, .32), transparent 70%),
    radial-gradient(40% 40% at 25% 85%, rgba(255, 196, 120, .40), transparent 70%),
    linear-gradient(180deg, #FFF1EA, #FFF6F2);
}

:root[data-theme="lagoon"] {
  --primary: #0B7A8A; --primary-dark: #065F6C; --primary-soft: #D9F2F4; --primary-glow: rgba(11, 122, 138, .30);
  --graphite: #355560; --text: #0F2A33; --muted: #4E6A73;
  --bg: #DDF7F4; --page: #F1FBFB; --surface: #C5EEF0;
  --card: rgba(255, 255, 255, .72); --card-solid: #FFFFFF; --card-alt: rgba(228, 246, 248, .82);
  --border: rgba(11, 122, 138, .15);
  --header-bg: rgba(241, 251, 251, .72); --footer-bg: #0F2A33;
  --hero-grad: linear-gradient(135deg, rgba(255, 255, 255, .82) 0%, rgba(226, 248, 246, .7) 55%, rgba(224, 232, 255, .6) 100%);
  --logo-a: #0B8A8F; --logo-b: #0369A1; --logo-c: #4F46E5;
  --primary-grad: linear-gradient(120deg, #0B7A8A 0%, #0369A1 55%, #4F46E5 100%);
  --heading-grad: linear-gradient(100deg, #0E9F94 0%, #0284C7 50%, #4F46E5 100%);
  --shadow: 0 6px 28px rgba(8, 92, 110, .10); --shadow-lg: 0 16px 48px rgba(8, 92, 110, .16);
  --shadow-hover: 0 12px 36px rgba(11, 122, 138, .22);
  --fx-bg:
    radial-gradient(40% 50% at 10% 15%, rgba(18, 194, 176, .45), transparent 70%),
    radial-gradient(45% 55% at 90% 20%, rgba(14, 165, 233, .38), transparent 70%),
    radial-gradient(50% 60% at 65% 95%, rgba(99, 102, 241, .28), transparent 70%),
    radial-gradient(35% 40% at 30% 80%, rgba(110, 231, 210, .35), transparent 70%),
    linear-gradient(180deg, #E9FAF8, #F1FBFB);
}

:root[data-theme="aurora"] {
  --primary: #3BE8B0; --primary-dark: #7AF5CF; --primary-soft: rgba(59, 232, 176, .13); --primary-glow: rgba(59, 232, 176, .38);
  --on-primary: #03140F;
  --graphite: #B4C3DA; --text: #E6F1FF; --muted: #8FA3C0;
  --bg: #07122A; --page: #050B1A; --surface: #0E2240;
  --card: rgba(13, 24, 48, .62); --card-solid: #0D1830; --card-alt: rgba(22, 38, 70, .62);
  --border: rgba(94, 242, 194, .14);
  --header-bg: rgba(5, 11, 26, .62); --footer-bg: #030714;
  --hero-grad: linear-gradient(135deg, rgba(14, 30, 60, .7) 0%, rgba(10, 40, 60, .55) 55%, rgba(40, 24, 80, .5) 100%);
  --logo-a: #5EF2C2; --logo-b: #4CC9FF; --logo-c: #A78BFA;
  --primary-grad: linear-gradient(120deg, #3BE8B0 0%, #4CC9FF 55%, #A78BFA 100%);
  --heading-grad: linear-gradient(100deg, #5EF2C2 0%, #4CC9FF 50%, #C4B5FD 100%);
  --shadow: 0 6px 28px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
  --shadow-hover: 0 12px 40px rgba(59, 232, 176, .22);
  --fx-bg:
    radial-gradient(60% 35% at 30% 30%, rgba(20, 241, 161, .30), transparent 70%),
    radial-gradient(45% 30% at 70% 22%, rgba(56, 189, 248, .24), transparent 70%),
    radial-gradient(50% 40% at 85% 55%, rgba(124, 58, 237, .30), transparent 70%),
    radial-gradient(70% 40% at 20% 75%, rgba(20, 241, 161, .12), transparent 70%),
    linear-gradient(180deg, #040A18, #071430 60%, #050B1A);
}

:root[data-theme="neon"] {
  --primary: #FF3CAC; --primary-dark: #FF6EC4; --primary-soft: rgba(255, 60, 172, .14); --primary-glow: rgba(255, 60, 172, .45);
  --on-primary: #1A0016;
  --graphite: #CDBFE6; --text: #F5ECFF; --muted: #A99BC4;
  --bg: #120A22; --page: #0A0612; --surface: #24104A;
  --card: rgba(22, 10, 40, .66); --card-solid: #160A28; --card-alt: rgba(38, 18, 64, .62);
  --border: rgba(255, 60, 172, .20);
  --header-bg: rgba(10, 6, 18, .66); --footer-bg: #06030C;
  --hero-grad: linear-gradient(135deg, rgba(40, 12, 60, .7) 0%, rgba(24, 10, 48, .6) 55%, rgba(8, 30, 52, .55) 100%);
  --logo-a: #FF3CAC; --logo-b: #B44CFF; --logo-c: #2DE2FF;
  --primary-grad: linear-gradient(120deg, #FF3CAC 0%, #B44CFF 55%, #2DE2FF 100%);
  --heading-grad: linear-gradient(100deg, #FF3CAC 0%, #C77DFF 50%, #2DE2FF 100%);
  --shadow: 0 6px 28px rgba(0, 0, 0, .5); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);
  --shadow-hover: 0 0 0 1px rgba(255, 60, 172, .35), 0 12px 40px rgba(255, 60, 172, .30);
  --fx-bg:
    radial-gradient(45% 45% at 12% 10%, rgba(255, 43, 214, .32), transparent 70%),
    radial-gradient(45% 45% at 92% 30%, rgba(0, 229, 255, .22), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(180, 76, 255, .30), transparent 70%),
    linear-gradient(180deg, #0A0612, #120826 70%, #1A0A30);
}

:root[data-theme="pearl"] {
  --primary: #5046E5; --primary-dark: #3F35C9; --primary-soft: #ECEAFE; --primary-glow: rgba(80, 70, 229, .26);
  --graphite: #4A4A5E; --text: #23232E; --muted: #6A6A80;
  --bg: #F1EFFA; --page: #F8F7FC; --surface: #E7E4F7;
  --card: rgba(255, 255, 255, .7); --card-solid: #FFFFFF; --card-alt: rgba(244, 242, 252, .82);
  --border: rgba(80, 70, 229, .12);
  --header-bg: rgba(248, 247, 252, .7); --footer-bg: #1E1D2B;
  --hero-grad: linear-gradient(135deg, rgba(255, 255, 255, .84) 0%, rgba(246, 241, 255, .66) 50%, rgba(234, 248, 245, .6) 100%);
  --logo-a: #6D5DF5; --logo-b: #5046E5; --logo-c: #3B6FD8;
  --primary-grad: linear-gradient(120deg, #5046E5 0%, #7048E8 50%, #3B6FD8 100%);
  --heading-grad: linear-gradient(100deg, #3B2FC9 0%, #7048E8 40%, #2E7FC8 75%, #1E9A8C 100%);
  --shadow: 0 6px 30px rgba(60, 50, 140, .08); --shadow-lg: 0 18px 50px rgba(60, 50, 140, .13);
  --shadow-hover: 0 14px 40px rgba(80, 70, 229, .18);
  --orb-1: rgba(196, 181, 253, .55); --orb-2: rgba(153, 246, 228, .45); --orb-3: rgba(251, 207, 232, .55); --orb-4: rgba(186, 230, 253, .5);
  --spot: rgba(112, 72, 232, .5);
  --fx-bg: linear-gradient(180deg, #F6F4FD, #FAF9FD 60%, #F6F8FC);
}

:root[data-theme="ocean"] {
  --primary: #2DD4BF; --primary-dark: #5EEAD4; --primary-soft: rgba(45, 212, 191, .13); --primary-glow: rgba(45, 212, 191, .36);
  --on-primary: #032019;
  --graphite: #A7C4CF; --text: #E2F3F7; --muted: #86A6B3;
  --bg: #031722; --page: #021018; --surface: #08303F;
  --card: rgba(4, 28, 40, .6); --card-solid: #06202C; --card-alt: rgba(10, 44, 60, .6);
  --border: rgba(94, 234, 212, .14);
  --header-bg: rgba(2, 16, 24, .64); --footer-bg: #010A10;
  --hero-grad: linear-gradient(135deg, rgba(6, 40, 56, .72) 0%, rgba(4, 30, 46, .6) 55%, rgba(12, 30, 70, .5) 100%);
  --logo-a: #5EEAD4; --logo-b: #22D3EE; --logo-c: #60A5FA;
  --primary-grad: linear-gradient(120deg, #2DD4BF 0%, #22D3EE 50%, #60A5FA 100%);
  --heading-grad: linear-gradient(100deg, #CCFBF1 0%, #5EEAD4 35%, #22D3EE 65%, #93C5FD 100%);
  --shadow: 0 6px 28px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
  --shadow-hover: 0 12px 40px rgba(34, 211, 238, .2);
  --orb-1: rgba(14, 116, 144, .55); --orb-2: rgba(34, 211, 238, .16); --orb-3: rgba(30, 58, 138, .5); --orb-4: rgba(45, 212, 191, .14);
  --spot: rgba(94, 234, 212, .6);
  --fx-bg: linear-gradient(180deg, #01121B, #031B28 50%, #021018);
}

/* Световые пятна живого фона для остальных тем (у каждой — свои, под палитру). */
:root[data-theme="dawn"] { --orb-1: rgba(255, 138, 92, .42); --orb-2: rgba(232, 62, 140, .26); --orb-3: rgba(139, 92, 246, .24); --orb-4: rgba(255, 196, 120, .36); --spot: rgba(214, 47, 95, .5); }
:root[data-theme="lagoon"] { --orb-1: rgba(18, 194, 176, .38); --orb-2: rgba(14, 165, 233, .3); --orb-3: rgba(99, 102, 241, .2); --orb-4: rgba(110, 231, 210, .34); --spot: rgba(11, 122, 138, .55); }
:root[data-theme="aurora"] { --orb-1: rgba(20, 241, 161, .2); --orb-2: rgba(56, 189, 248, .18); --orb-3: rgba(124, 58, 237, .24); --orb-4: rgba(20, 241, 161, .1); --spot: rgba(59, 232, 176, .6); }
:root[data-theme="neon"] { --orb-1: rgba(255, 43, 214, .26); --orb-2: rgba(0, 229, 255, .16); --orb-3: rgba(180, 76, 255, .24); --orb-4: rgba(255, 60, 172, .12); --spot: rgba(255, 60, 172, .65); }
:root[data-theme="obsidian"] { --orb-1: rgba(229, 184, 92, .2); --orb-2: rgba(184, 134, 43, .14); --orb-3: rgba(246, 226, 122, .08); --orb-4: rgba(229, 184, 92, .1); --spot: rgba(229, 184, 92, .55); }

:root[data-theme="obsidian"] {
  --primary: #E5B85C; --primary-dark: #F2CF82; --primary-soft: rgba(229, 184, 92, .12); --primary-glow: rgba(229, 184, 92, .32);
  --on-primary: #1A1203;
  --graphite: #CFC6B4; --text: #F3EEE4; --muted: #A39C8E;
  --bg: #121114; --page: #0B0B0D; --surface: #24201A;
  --card: rgba(24, 22, 20, .72); --card-solid: #18161A; --card-alt: rgba(36, 32, 28, .72);
  --border: rgba(229, 184, 92, .16);
  --header-bg: rgba(11, 11, 13, .7); --footer-bg: #060607;
  --hero-grad: linear-gradient(135deg, rgba(34, 30, 26, .78) 0%, rgba(22, 20, 20, .7) 55%, rgba(48, 38, 20, .6) 100%);
  --logo-a: #F6E27A; --logo-b: #E5B85C; --logo-c: #B8862B;
  --primary-grad: linear-gradient(120deg, #F6E27A 0%, #E5B85C 50%, #B8862B 100%);
  --heading-grad: linear-gradient(100deg, #FFF1B8 0%, #F6E27A 25%, #E5B85C 60%, #C9973A 100%);
  --shadow: 0 6px 28px rgba(0, 0, 0, .5); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);
  --shadow-hover: 0 0 0 1px rgba(229, 184, 92, .3), 0 12px 40px rgba(229, 184, 92, .18);
  --fx-bg:
    radial-gradient(45% 40% at 85% 8%, rgba(229, 184, 92, .26), transparent 70%),
    radial-gradient(40% 40% at 10% 90%, rgba(184, 134, 43, .18), transparent 70%),
    radial-gradient(30% 30% at 40% 40%, rgba(246, 226, 122, .06), transparent 70%),
    linear-gradient(160deg, #16151A, #0B0B0D 60%);
}

:root[data-theme="winter"] {
  --primary: #FF4D6A; --primary-dark: #FF7A90; --primary-soft: rgba(255, 77, 106, .14); --primary-glow: rgba(255, 77, 106, .4);
  --on-primary: #FFFFFF;
  --graphite: #C3D0E6; --text: #EEF4FF; --muted: #93A4C2;
  --bg: #08152B; --page: #06101F; --surface: #102446;
  --card: rgba(10, 22, 44, .66); --card-solid: #0C1A33; --card-alt: rgba(20, 38, 70, .62);
  --border: rgba(255, 209, 102, .16);
  --header-bg: rgba(6, 16, 31, .7); --footer-bg: #030912;
  --hero-grad: linear-gradient(135deg, rgba(16, 34, 66, .74) 0%, rgba(12, 28, 56, .62) 55%, rgba(60, 16, 34, .5) 100%);
  --logo-a: #FF5A72; --logo-b: #E5243B; --logo-c: #8E0F2C;
  --primary-grad: linear-gradient(120deg, #C8102E 0%, #E5243B 55%, #FF6A3D 100%);
  --heading-grad: linear-gradient(100deg, #FFFFFF 0%, #FFE8A8 35%, #FFD166 60%, #FF6B81 100%);
  --shadow: 0 6px 28px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
  --shadow-hover: 0 0 0 1px rgba(255, 209, 102, .3), 0 12px 40px rgba(255, 77, 106, .22);
  --orb-1: rgba(56, 120, 255, .2); --orb-2: rgba(255, 77, 106, .12); --orb-3: rgba(74, 222, 128, .1); --orb-4: rgba(255, 209, 102, .1);
  --spot: rgba(255, 209, 102, .6);
  --fx-bg:
    radial-gradient(70% 30% at 50% 108%, rgba(220, 235, 255, .2), transparent 70%),
    radial-gradient(60% 40% at 15% 20%, rgba(40, 90, 200, .22), transparent 70%),
    linear-gradient(180deg, #030A16 0%, #081833 55%, #0E2445 100%);
}

/* Тропический дождь: ночные джунгли, изумруд и электрический голубой. */
:root[data-theme="rain"] {
  --primary: #34D399; --primary-dark: #6EE7B7; --primary-soft: rgba(52, 211, 153, .13); --primary-glow: rgba(52, 211, 153, .36);
  --on-primary: #02130D;
  --graphite: #B5CEC6; --text: #E6F7F1; --muted: #8AA8A0;
  --bg: #05171A; --page: #03110D; --surface: #0B2A24;
  --card: rgba(6, 26, 22, .66); --card-solid: #081F1A; --card-alt: rgba(14, 42, 36, .62);
  --border: rgba(110, 231, 183, .14);
  --header-bg: rgba(3, 17, 13, .72); --footer-bg: #010806;
  --hero-grad: linear-gradient(135deg, rgba(10, 40, 34, .74) 0%, rgba(6, 30, 28, .62) 55%, rgba(20, 30, 60, .5) 100%);
  --logo-a: #34D399; --logo-b: #22D3EE; --logo-c: #818CF8;
  --primary-grad: linear-gradient(120deg, #10B981 0%, #22D3EE 55%, #818CF8 100%);
  --heading-grad: linear-gradient(100deg, #ECFFF7 0%, #6EE7B7 35%, #67E8F9 65%, #C7D2FE 100%);
  --shadow: 0 6px 28px rgba(0, 0, 0, .5); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);
  --shadow-hover: 0 0 0 1px rgba(103, 232, 249, .3), 0 12px 40px rgba(34, 211, 238, .2);
  --orb-1: rgba(16, 185, 129, .2); --orb-2: rgba(34, 211, 238, .12); --orb-3: rgba(6, 95, 70, .35); --orb-4: rgba(129, 140, 248, .1);
  --spot: rgba(103, 232, 249, .6);
  --fx-bg:
    radial-gradient(80% 45% at 50% 0%, rgba(60, 90, 120, .35), transparent 70%),
    radial-gradient(70% 30% at 50% 105%, rgba(110, 200, 170, .12), transparent 70%),
    linear-gradient(180deg, #071A20 0%, #052019 50%, #03110D 100%);
}

/* Графит: матовый тёмно-серый, мятный акцент, без анимации частиц. */
:root[data-theme="graphite"] {
  --primary: #34D399; --primary-dark: #6EE7B7; --primary-soft: rgba(52, 211, 153, .12); --primary-glow: rgba(52, 211, 153, .3);
  --on-primary: #05261A;
  --graphite: #C7CDD4; --text: #EEF1F4; --muted: #9AA3AD;
  --bg: #16181B; --page: #121416; --surface: #23262B;
  --card: rgba(32, 35, 40, .78); --card-solid: #1D2024; --card-alt: rgba(42, 46, 52, .7);
  --border: rgba(203, 213, 225, .1);
  --header-bg: rgba(18, 20, 22, .74); --footer-bg: #0B0C0E;
  --hero-grad: linear-gradient(135deg, rgba(40, 44, 50, .78) 0%, rgba(30, 33, 38, .7) 55%, rgba(24, 48, 40, .55) 100%);
  --logo-a: #A7F3D0; --logo-b: #34D399; --logo-c: #10B981;
  --primary-grad: linear-gradient(120deg, #6EE7B7 0%, #34D399 50%, #10B981 100%);
  --heading-grad: linear-gradient(100deg, #FFFFFF 0%, #D1FAE5 40%, #6EE7B7 100%);
  --shadow: 0 6px 28px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
  --shadow-hover: 0 0 0 1px rgba(52, 211, 153, .25), 0 12px 36px rgba(0, 0, 0, .5);
  --orb-1: rgba(52, 211, 153, .12); --orb-2: rgba(148, 163, 184, .1); --orb-3: rgba(16, 185, 129, .08); --orb-4: rgba(203, 213, 225, .06);
  --spot: rgba(110, 231, 183, .45);
  --fx-bg:
    radial-gradient(45% 40% at 88% 6%, rgba(52, 211, 153, .14), transparent 70%),
    radial-gradient(50% 45% at 8% 96%, rgba(148, 163, 184, .1), transparent 70%),
    linear-gradient(170deg, #1B1E22 0%, #141619 55%, #101214 100%);
}

/* Лаванда: сиреневое поле в дымке, мягкие световые пятна. */
:root[data-theme="lavender"] {
  --primary: #7C3AED; --primary-dark: #6D28D9; --primary-soft: #EDE4FF; --primary-glow: rgba(124, 58, 237, .28);
  --graphite: #574B6E; --text: #251C38; --muted: #6F6585;
  --bg: #F3EEFF; --page: #FAF7FF; --surface: #E6DCFF;
  --card: rgba(255, 255, 255, .76); --card-solid: #FFFFFF; --card-alt: rgba(243, 237, 255, .85);
  --border: rgba(124, 58, 237, .13);
  --header-bg: rgba(250, 247, 255, .74); --footer-bg: #251C38;
  --hero-grad: linear-gradient(135deg, rgba(255, 255, 255, .86) 0%, rgba(243, 236, 255, .74) 55%, rgba(252, 231, 243, .62) 100%);
  --logo-a: #C084FC; --logo-b: #8B5CF6; --logo-c: #6D28D9;
  --primary-grad: linear-gradient(120deg, #A855F7 0%, #8B5CF6 50%, #6D28D9 100%);
  --heading-grad: linear-gradient(100deg, #C084FC 0%, #8B5CF6 45%, #5B21B6 100%);
  --shadow: 0 6px 28px rgba(91, 33, 182, .09); --shadow-lg: 0 16px 48px rgba(91, 33, 182, .15);
  --shadow-hover: 0 12px 36px rgba(124, 58, 237, .2);
  --orb-1: rgba(192, 132, 252, .34); --orb-2: rgba(139, 92, 246, .22); --orb-3: rgba(244, 114, 182, .18); --orb-4: rgba(196, 181, 253, .4);
  --spot: rgba(139, 92, 246, .5);
  --fx-bg:
    radial-gradient(40% 46% at 14% 16%, rgba(216, 180, 254, .6), transparent 70%),
    radial-gradient(44% 50% at 88% 14%, rgba(251, 207, 232, .5), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(167, 139, 250, .38), transparent 70%),
    linear-gradient(180deg, #F7F2FF, #FAF7FF);
}

/* Горы: утреннее небо, снежные вершины в дымке (сцена — app.js). */
:root[data-theme="mountains"] {
  --primary: #0B6BCB; --primary-dark: #0A5AAB; --primary-soft: #DCEBFB; --primary-glow: rgba(11, 107, 203, .28);
  --graphite: #3F5368; --text: #142233; --muted: #5A6B7E;
  --bg: #E3EEF9; --page: #F2F7FC; --surface: #CFE0F2;
  --card: rgba(255, 255, 255, .78); --card-solid: #FFFFFF; --card-alt: rgba(236, 244, 252, .86);
  --border: rgba(11, 107, 203, .13);
  --header-bg: rgba(242, 247, 252, .74); --footer-bg: #142233;
  --hero-grad: linear-gradient(135deg, rgba(255, 255, 255, .86) 0%, rgba(232, 242, 252, .74) 55%, rgba(220, 236, 250, .62) 100%);
  --logo-a: #38BDF8; --logo-b: #0EA5E9; --logo-c: #2563EB;
  --primary-grad: linear-gradient(120deg, #0EA5E9 0%, #0B6BCB 50%, #2563EB 100%);
  --heading-grad: linear-gradient(100deg, #0F3B66 0%, #0B6BCB 50%, #38BDF8 100%);
  --shadow: 0 6px 28px rgba(15, 59, 102, .1); --shadow-lg: 0 16px 48px rgba(15, 59, 102, .16);
  --shadow-hover: 0 12px 36px rgba(11, 107, 203, .2);
  --orb-1: rgba(186, 230, 253, .3); --orb-2: rgba(255, 237, 196, .3); --orb-3: rgba(191, 219, 254, .3); --orb-4: rgba(224, 242, 254, .3);
  --spot: rgba(14, 165, 233, .45);
  --fx-bg: linear-gradient(180deg, #B9D6F2 0%, #DCEBF9 45%, #F2F7FC 100%);
}

/* Весна: голубое утро, сакура, розовый и сиреневый. */
:root[data-theme="spring"] {
  --primary: #DB2777; --primary-dark: #BE185D; --primary-soft: #FCE7F3; --primary-glow: rgba(219, 39, 119, .3);
  --graphite: #5B4660; --text: #2B1A2F; --muted: #786477;
  --bg: #FDEFF4; --page: #FFF7FA; --surface: #FBD5E5;
  --card: rgba(255, 255, 255, .74); --card-solid: #FFFFFF; --card-alt: rgba(253, 236, 244, .82);
  --border: rgba(219, 39, 119, .14);
  --header-bg: rgba(255, 247, 250, .74); --footer-bg: #2B1A2F;
  --hero-grad: linear-gradient(135deg, rgba(255, 255, 255, .84) 0%, rgba(253, 236, 244, .72) 55%, rgba(224, 236, 255, .62) 100%);
  --logo-a: #EC4899; --logo-b: #C026D3; --logo-c: #8B5CF6;
  --primary-grad: linear-gradient(120deg, #EC4899 0%, #D946EF 55%, #8B5CF6 100%);
  --heading-grad: linear-gradient(100deg, #F472B6 0%, #DB2777 45%, #8B5CF6 100%);
  --shadow: 0 6px 28px rgba(190, 24, 93, .1); --shadow-lg: 0 16px 48px rgba(190, 24, 93, .16);
  --shadow-hover: 0 12px 36px rgba(219, 39, 119, .22);
  --orb-1: rgba(249, 168, 212, .35); --orb-2: rgba(196, 181, 253, .3); --orb-3: rgba(191, 219, 254, .4); --orb-4: rgba(254, 240, 138, .3);
  --spot: rgba(244, 114, 182, .5);
  --fx-bg:
    radial-gradient(30% 34% at 86% 10%, rgba(255, 244, 196, .9), transparent 70%),
    radial-gradient(50% 50% at 10% 90%, rgba(251, 207, 232, .7), transparent 70%),
    linear-gradient(180deg, #D7E9FF 0%, #F3E8FF 45%, #FFF1F6 100%);
}

/* Лето: закат над морем — солнце у горизонта, малиновое небо, тёмная вода. */
:root[data-theme="summer"] {
  --primary: #FF8A4C; --primary-dark: #FFB078; --primary-soft: rgba(255, 138, 76, .14); --primary-glow: rgba(255, 138, 76, .38);
  --on-primary: #2A0E05;
  --graphite: #F0C9C0; --text: #FFF1EA; --muted: #D2A8A6;
  --bg: #1A0F2C; --page: #120A20; --surface: #2E1A44;
  --card: rgba(34, 18, 52, .66); --card-solid: #1F1131; --card-alt: rgba(56, 28, 72, .6);
  --border: rgba(255, 170, 120, .18);
  --header-bg: rgba(22, 11, 38, .72); --footer-bg: #0A0514;
  --hero-grad: linear-gradient(135deg, rgba(60, 24, 70, .72) 0%, rgba(40, 18, 56, .62) 55%, rgba(120, 50, 60, .5) 100%);
  --logo-a: #FFC46B; --logo-b: #FF6B6B; --logo-c: #C850C0;
  --primary-grad: linear-gradient(120deg, #FFB347 0%, #FF6B6B 50%, #C850C0 100%);
  --heading-grad: linear-gradient(100deg, #FFF3D6 0%, #FFC46B 35%, #FF8A6B 65%, #E879F9 100%);
  --shadow: 0 6px 28px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
  --shadow-hover: 0 0 0 1px rgba(255, 196, 107, .3), 0 12px 40px rgba(255, 107, 107, .22);
  --orb-1: rgba(255, 138, 76, .18); --orb-2: rgba(200, 80, 192, .14); --orb-3: rgba(255, 196, 107, .1); --orb-4: rgba(80, 120, 220, .1);
  --spot: rgba(255, 196, 107, .6);
  --fx-bg:
    radial-gradient(60% 26% at 70% 58%, rgba(255, 170, 90, .5), transparent 70%),
    linear-gradient(180deg, #1C0C3A 0%, #6B2266 30%, #D2557A 48%, #FF9A5C 58%, #142A58 60%, #081430 100%);
}

/* Осень: золотой день, клёны, янтарь и багрянец. */
:root[data-theme="autumn"] {
  --primary: #C2410C; --primary-dark: #9A3412; --primary-soft: #FFEDD5; --primary-glow: rgba(194, 65, 12, .3);
  --graphite: #5C4632; --text: #2E1C0E; --muted: #7A6450;
  --bg: #FFF1DE; --page: #FFF8EE; --surface: #FFE0B8;
  --card: rgba(255, 252, 246, .76); --card-solid: #FFFFFF; --card-alt: rgba(255, 240, 220, .82);
  --border: rgba(194, 65, 12, .15);
  --header-bg: rgba(255, 248, 238, .74); --footer-bg: #2E1C0E;
  --hero-grad: linear-gradient(135deg, rgba(255, 255, 255, .82) 0%, rgba(255, 238, 214, .72) 55%, rgba(255, 220, 190, .62) 100%);
  --logo-a: #F59E0B; --logo-b: #EA580C; --logo-c: #B91C1C;
  --primary-grad: linear-gradient(120deg, #F59E0B 0%, #EA580C 50%, #B91C1C 100%);
  --heading-grad: linear-gradient(100deg, #D97706 0%, #EA580C 45%, #B91C1C 100%);
  --shadow: 0 6px 28px rgba(154, 52, 18, .1); --shadow-lg: 0 16px 48px rgba(154, 52, 18, .16);
  --shadow-hover: 0 12px 36px rgba(194, 65, 12, .22);
  --orb-1: rgba(251, 191, 36, .35); --orb-2: rgba(234, 88, 12, .22); --orb-3: rgba(254, 215, 170, .45); --orb-4: rgba(185, 28, 28, .14);
  --spot: rgba(245, 158, 11, .5);
  --fx-bg:
    radial-gradient(34% 40% at 84% 8%, rgba(255, 236, 180, .95), transparent 70%),
    radial-gradient(60% 50% at 10% 100%, rgba(234, 88, 12, .22), transparent 70%),
    linear-gradient(180deg, #FFEBC9 0%, #FFE0B2 50%, #FFD39A 100%);
}

/* Ночной город: синяя ночь над рекой, огни окон, фиолетово-розовый неон и золото. */
:root[data-theme="city"] {
  --primary: #8B9CFF; --primary-dark: #B4BFFF; --primary-soft: rgba(139, 156, 255, .14); --primary-glow: rgba(139, 156, 255, .38);
  --on-primary: #070A1F;
  --graphite: #C3C8E8; --text: #EEF0FF; --muted: #9AA0C8;
  --bg: #070A1C; --page: #04060F; --surface: #121736;
  --card: rgba(10, 14, 36, .68); --card-solid: #0B0F28; --card-alt: rgba(22, 28, 64, .62);
  --border: rgba(160, 170, 255, .16);
  --header-bg: rgba(5, 7, 20, .74); --footer-bg: #02030A;
  --hero-grad: linear-gradient(135deg, rgba(20, 24, 64, .74) 0%, rgba(14, 16, 44, .64) 55%, rgba(60, 20, 70, .5) 100%);
  --logo-a: #7C9BFF; --logo-b: #C084FC; --logo-c: #FFB86B;
  --primary-grad: linear-gradient(120deg, #4F7BFF 0%, #A855F7 50%, #FF6FB5 100%);
  --heading-grad: linear-gradient(100deg, #F5F3FF 0%, #C4B5FD 35%, #F9A8D4 65%, #FCD34D 100%);
  --shadow: 0 6px 28px rgba(0, 0, 0, .5); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);
  --shadow-hover: 0 0 0 1px rgba(196, 181, 253, .3), 0 12px 40px rgba(168, 85, 247, .22);
  --orb-1: rgba(79, 123, 255, .16); --orb-2: rgba(255, 111, 181, .1); --orb-3: rgba(168, 85, 247, .12); --orb-4: rgba(255, 184, 107, .08);
  --spot: rgba(196, 181, 253, .6);
  --fx-bg:
    radial-gradient(70% 18% at 50% 62%, rgba(255, 150, 110, .28), transparent 70%),
    radial-gradient(90% 35% at 65% 58%, rgba(150, 90, 255, .22), transparent 70%),
    linear-gradient(180deg, #02030B 0%, #080C26 35%, #18164A 62%, #04060F 100%);
}

/* Космос (тариф «Элит»): глубокий фиолетово-синий космос, туманности, галактика, планета с кольцом (анимация — app.js).
   Акцент — «звёздная плазма»: бирюза → фиолет → розовый; карточки — тёмное стекло со светлой кромкой. */
:root[data-theme="cosmos"] {
  --primary: #9B8CFF; --primary-dark: #C2B8FF; --primary-soft: rgba(155, 140, 255, .14); --primary-glow: rgba(155, 140, 255, .42);
  --on-primary: #06031A;
  --graphite: #CBC6EE; --text: #F2EFFF; --muted: #A6A1CE;
  --bg: #06041A; --page: #030211; --surface: #151030;
  --card: rgba(11, 8, 30, .62); --card-solid: #0D0A25; --card-alt: rgba(26, 20, 62, .58);
  --border: rgba(175, 160, 255, .17);
  --header-bg: rgba(4, 3, 16, .7); --footer-bg: #020108;
  --hero-grad: linear-gradient(135deg, rgba(18, 14, 52, .72) 0%, rgba(10, 8, 34, .6) 55%, rgba(70, 16, 72, .46) 100%);
  --logo-a: #5EEAD4; --logo-b: #9B8CFF; --logo-c: #F472B6;
  --primary-grad: linear-gradient(120deg, #22D3EE 0%, #8B5CF6 50%, #EC4899 100%);
  --heading-grad: linear-gradient(100deg, #E6FBFF 0%, #A5F3FC 25%, #C4B5FD 55%, #F9A8D4 85%);
  --shadow: 0 6px 28px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(200, 190, 255, .06);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .65);
  --shadow-hover: 0 0 0 1px rgba(165, 243, 252, .28), 0 12px 44px rgba(139, 92, 246, .3);
  --orb-1: rgba(110, 60, 255, .14); --orb-2: rgba(236, 72, 153, .08); --orb-3: rgba(34, 211, 238, .08); --orb-4: rgba(155, 140, 255, .06);
  --spot: rgba(165, 243, 252, .55);
  --fx-bg:
    radial-gradient(70% 55% at 80% 18%, rgba(96, 40, 190, .34), transparent 70%),
    radial-gradient(65% 55% at 12% 88%, rgba(16, 110, 160, .22), transparent 70%),
    radial-gradient(50% 40% at 40% 55%, rgba(150, 30, 120, .12), transparent 70%),
    radial-gradient(130% 100% at 50% 45%, #0A0728 0%, #050318 55%, #020110 100%);
}

/* Карбон: чёрное плетение углеволокна с глянцем, алые полосы, золото. */
:root[data-theme="carbon"] {
  --primary: #E8B84A; --primary-dark: #F3D27A; --primary-soft: rgba(232, 184, 74, .12); --primary-glow: rgba(232, 184, 74, .34);
  --on-primary: #140D00;
  --graphite: #D6CFC2; --text: #F5F1E8; --muted: #A49D90;
  --bg: #0E0E10; --page: #0A0A0B; --surface: #1E1C1A;
  --card: rgba(14, 14, 16, .8); --card-solid: #121214; --card-alt: rgba(30, 30, 34, .78);
  --border: rgba(232, 184, 74, .18);
  --header-bg: rgba(8, 8, 9, .8); --footer-bg: #050505;
  --hero-grad: linear-gradient(135deg, rgba(22, 22, 24, .86) 0%, rgba(16, 16, 18, .8) 55%, rgba(60, 8, 16, .6) 100%);
  --logo-a: #FFE7A3; --logo-b: #E8B84A; --logo-c: #E0122F;
  --primary-grad: linear-gradient(120deg, #FFE7A3 0%, #E8B84A 35%, #B8872B 70%, #F3D27A 100%);
  --heading-grad: linear-gradient(100deg, #FFF4D0 0%, #F3D27A 30%, #E8B84A 60%, #FF3B4E 100%);
  --shadow: 0 8px 30px rgba(0, 0, 0, .6); --shadow-lg: 0 18px 50px rgba(0, 0, 0, .7);
  --shadow-hover: 0 0 0 1px rgba(255, 30, 60, .45), 0 14px 44px rgba(255, 30, 60, .26);
  --orb-1: rgba(220, 20, 50, .22); --orb-2: rgba(232, 184, 74, .12); --orb-3: rgba(170, 10, 30, .2); --orb-4: rgba(232, 184, 74, .08);
  --spot: rgba(255, 40, 70, .8);
  --fx-bg:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 40%, rgba(0, 0, 0, .78) 100%),
    linear-gradient(160deg, transparent 0 46.9%, rgba(255, 30, 60, .55) 47%, rgba(255, 30, 60, .55) 47.12%, transparent 47.22%),
    linear-gradient(160deg, transparent 0 48.3%, rgba(255, 30, 60, .28) 48.4%, rgba(255, 30, 60, .28) 48.46%, transparent 48.56%),
    linear-gradient(20deg, transparent 0 81.9%, rgba(232, 184, 74, .3) 82%, transparent 82.08%),
    linear-gradient(27deg, #101010 3px, transparent 3px) 0 3px / 12px 12px,
    linear-gradient(207deg, #101010 3px, transparent 3px) 6px 0 / 12px 12px,
    linear-gradient(27deg, #2E2E2E 3px, transparent 3px) 0 6px / 12px 12px,
    linear-gradient(207deg, #2E2E2E 3px, transparent 3px) 6px 3px / 12px 12px,
    linear-gradient(90deg, #1A1A1A 6px, transparent 6px) 0 0 / 12px 12px,
    linear-gradient(#1C1C1C 25%, #191919 25%, #191919 50%, transparent 50%, transparent 75%, #232323 75%, #232323) 0 0 / 12px 12px,
    #121212;
}

/* ---------- Живой фон. Три слоя за страницей, все неподвижны для прокрутки (position: fixed):
   body::before — основа темы (--fx-bg), .fx-scene — световые пятна, каждое плывёт по своей траектории
   с разной скоростью (картина не повторяется), body::after — фактура темы (зерно, сетка, звёзды, блики).
   Двигается только transform и opacity — браузер не перерисовывает страницу. ---------- */
:root[data-fx] body { background: var(--page); }
:root[data-fx] body::before,
:root[data-fx] body::after { content: ''; position: fixed; z-index: -1; pointer-events: none; }
:root[data-fx] body::before { inset: 0; background: var(--fx-bg); }

.fx-scene { display: none; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
:root[data-fx] .fx-scene { display: block; }
.fx-scene i {
  position: absolute; display: block; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle at 50% 50%, var(--o) 0, transparent 64%);
  animation: var(--a) ease-in-out infinite alternate;
}
.fx-scene i:nth-child(1) { --o: var(--orb-1); --a: orb-1 47s; width: 70vmax; height: 70vmax; left: -22vmax; top: -30vmax; }
.fx-scene i:nth-child(2) { --o: var(--orb-2); --a: orb-2 59s; width: 58vmax; height: 58vmax; right: -24vmax; top: -12vmax; }
.fx-scene i:nth-child(3) { --o: var(--orb-3); --a: orb-3 53s; width: 64vmax; height: 64vmax; left: 6vmax; bottom: -38vmax; }
.fx-scene i:nth-child(4) { --o: var(--orb-4); --a: orb-4 67s; width: 46vmax; height: 46vmax; right: -8vmax; bottom: -20vmax; }
@keyframes orb-1 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(18vmax, 10vmax, 0) scale(1.12); } 100% { transform: translate3d(8vmax, 22vmax, 0) scale(.94); } }
@keyframes orb-2 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-16vmax, 14vmax, 0) scale(.9); } 100% { transform: translate3d(-6vmax, 26vmax, 0) scale(1.1); } }
@keyframes orb-3 { 0% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(14vmax, -16vmax, 0) scale(.92); } 100% { transform: translate3d(28vmax, -6vmax, 0) scale(1.08); } }
@keyframes orb-4 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-20vmax, -10vmax, 0) scale(1.15); } 100% { transform: translate3d(-34vmax, 4vmax, 0) scale(.96); } }

/* Базовая светлая: тонкая точечная сетка, тающая к краям. */
:root[data-theme="light"] body::after {
  opacity: 1; background-image: radial-gradient(rgba(0, 71, 230, .16) 1px, transparent 1.4px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0, #000 20%, transparent 75%);
}
/* Базовая тёмная: редкая звёздная пыль медленно мерцает. */
:root[data-theme="dark"] body::after {
  opacity: .6;
  background-image:
    radial-gradient(1.2px 1.2px at 9% 18%, rgba(220, 234, 255, .9), transparent 60%),
    radial-gradient(1px 1px at 41% 9%, rgba(185, 212, 255, .8), transparent 60%),
    radial-gradient(1.4px 1.4px at 77% 31%, rgba(220, 234, 255, .9), transparent 60%),
    radial-gradient(1px 1px at 23% 67%, rgba(185, 212, 255, .7), transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 82%, rgba(220, 234, 255, .8), transparent 60%),
    radial-gradient(1px 1px at 91% 74%, rgba(185, 212, 255, .7), transparent 60%);
  background-size: 520px 520px;
  animation: fx-twinkle 9s ease-in-out infinite alternate;
}
/* Жемчуг: перламутровый перелив — огромный мягкий конический градиент очень медленно вращается. */
:root[data-theme="pearl"] body::after {
  inset: -60%; opacity: .5; will-change: transform;
  background: conic-gradient(from 0deg at 50% 50%, rgba(221, 214, 254, .7), rgba(204, 251, 241, .6), rgba(254, 215, 226, .6),
                             rgba(219, 234, 254, .7), rgba(253, 230, 255, .6), rgba(221, 214, 254, .7));
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 60%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 60%);
  animation: fx-spin 140s linear infinite;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }
/* Океан: лучи света сквозь толщу воды покачиваются и гаснут к глубине. */
:root[data-theme="ocean"] body::after {
  inset: -10% -30% 0; opacity: 1; transform-origin: 50% 0; will-change: transform;
  background: repeating-linear-gradient(100deg, transparent 0 7vw, rgba(94, 234, 212, .07) 7vw 10vw,
                                        transparent 10vw 15vw, rgba(125, 211, 252, .05) 15vw 16.5vw, transparent 16.5vw 24vw);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .5) 35%, transparent 75%);
  mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .5) 35%, transparent 75%);
  animation: fx-rays 21s ease-in-out infinite alternate;
}
@keyframes fx-rays {
  0%   { transform: translateX(-2%) skewX(-8deg); opacity: .75; }
  50%  { transform: translateX(3%) skewX(4deg); opacity: 1; }
  100% { transform: translateX(-1%) skewX(-3deg); opacity: .8; }
}
/* Зерно поверх градиента — фон не выглядит «пластиковым». Через :where — нулевая специфичность,
   поэтому собственные текстуры тем (выше и ниже) всегда побеждают. */
:where(:root[data-fx]) body::after {
  inset: 0; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:where(:root[data-fx][data-mode="dark"]) body::after { opacity: .09; }

/* Северное сияние: «занавес» колышется медленнее и шире. */
:root[data-theme="aurora"] body::before { inset: -15%; will-change: transform; animation: fx-aurora 22s ease-in-out infinite alternate; }
@keyframes fx-aurora {
  0%   { transform: translate3d(-3%, 0, 0) skewX(-6deg) scale(1.05); }
  50%  { transform: translate3d(4%, -3%, 0) skewX(5deg) scale(1.12); }
  100% { transform: translate3d(-2%, 2%, 0) skewX(-2deg) scale(1.04); }
}

/* Неон: светящаяся сетка-горизонт внизу экрана вместо зерна. */
:root[data-theme="neon"] body::after {
  inset: auto -50% -10% -50%; height: 55vh; opacity: .5;
  background-image:
    linear-gradient(rgba(255, 60, 172, .55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 226, 255, .45) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(420px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: fx-grid 6s linear infinite;
}
@keyframes fx-grid { to { background-position: 0 64px, 0 0; } }

/* Обсидиан: золотая пыль мерцает. */
:root[data-theme="obsidian"] body::after {
  opacity: .55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(246, 226, 122, .9), transparent 60%),
    radial-gradient(1px 1px at 68% 14%, rgba(246, 226, 122, .8), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 62%, rgba(229, 184, 92, .9), transparent 60%),
    radial-gradient(1px 1px at 32% 78%, rgba(246, 226, 122, .7), transparent 60%),
    radial-gradient(1px 1px at 52% 44%, rgba(229, 184, 92, .7), transparent 60%);
  background-size: 420px 420px;
  animation: fx-twinkle 7s ease-in-out infinite alternate;
}
@keyframes fx-twinkle { from { opacity: .25; } to { opacity: .7; } }

/* Частицы (static/js/app.js): между световыми пятнами и страницей. */
.fx-canvas { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.fx-canvas[hidden] { display: none; }

/* Новогодняя: луна с ореолом и далёкие звёзды. */
:root[data-theme="winter"] body::after {
  inset: 0; opacity: 1;
  background:
    radial-gradient(circle at 86% 16%, #FFF8E6 0, #FFF1CF 2.4vmin, rgba(255, 236, 190, .35) 2.6vmin, rgba(255, 236, 190, .08) 9vmin, transparent 16vmin),
    radial-gradient(1px 1px at 12% 24%, rgba(255, 255, 255, .8), transparent 60%) 0 0 / 380px 380px,
    radial-gradient(1.2px 1.2px at 58% 12%, rgba(255, 255, 255, .7), transparent 60%) 0 0 / 380px 380px,
    radial-gradient(1px 1px at 76% 58%, rgba(255, 255, 255, .6), transparent 60%) 0 0 / 380px 380px;
}

/* Тропический дождь: низкий туман у земли. */
:root[data-theme="rain"] body::after {
  inset: auto 0 0 0; height: 45vh; opacity: 1;
  background: linear-gradient(to top, rgba(140, 210, 190, .1), transparent);
}

/* Карбон: по плетению медленно проходит глянцевый блик. */
:root[data-theme="carbon"] body::after {
  inset: -50%; opacity: 1; will-change: transform;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .035) 46%, rgba(255, 255, 255, .085) 50%,
                              rgba(255, 255, 255, .035) 54%, transparent 60%);
  animation: fx-sheen 14s ease-in-out infinite;
}
@media (max-width: 720px) {  /* на телефоне луна попадала бы за текст карточек */
  :root[data-theme="winter"] body::after { background-size: 0 0, 380px 380px, 380px 380px, 380px 380px; }
}
@keyframes fx-sheen { 0% { transform: translateX(-35%); } 55%, 100% { transform: translateX(35%); } }

/* ---------- Стекло: карточки полупрозрачные и размывают фон под собой ---------- */
:root[data-fx] .card,
:root[data-fx] .hero,
:root[data-fx] .lead-card,
:root[data-fx] .panel__side {
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
/* Большой блок главной — почти прозрачный: живой фон темы виден сквозь него. Подложка темы (--hero-grad) —
   в ::before с малой непрозрачностью (у каждой темы своя --hero-veil), размытие лёгкое. */
:root[data-fx] .hero {
  isolation: isolate; background: none;
  -webkit-backdrop-filter: blur(3px) saturate(115%); backdrop-filter: blur(3px) saturate(115%);
}
:root[data-fx] .hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hero-grad); opacity: var(--hero-veil, .3);
}
:root[data-fx] .card, :root[data-fx] .lead-card { border-color: var(--border); }
:root[data-fx][data-mode="dark"] .card,
:root[data-fx][data-mode="dark"] .lead-card { box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .05); }
/* Всплывающее — непрозрачное, иначе текст под ним мешает читать. */
:root[data-fx] .confirm-modal__card,
:root[data-fx] .gigi-notice__card,
:root[data-fx] .suggest__list,
:root[data-fx] .toast,
:root[data-fx] .panel__side { background: var(--card-solid); }
:root[data-fx] .lead-card--open { background: linear-gradient(var(--card-solid), var(--card-solid)) padding-box, linear-gradient(135deg, #FF8A00, #FF3D77 50%, #7C3AED) border-box; }
:root[data-fx] .lead-card--open.is-responded { background: linear-gradient(var(--card-solid), var(--card-solid)) padding-box, linear-gradient(135deg, var(--success), #22C3A6) border-box; }
@media (max-width: 1100px) { :root[data-fx] .nav { background: var(--card-solid); } }

/* ---------- Заголовки и главные кнопки — переливом цветов темы ---------- */
:root[data-fx] main h1,
:root[data-fx] .section__head h2 {
  background: var(--heading-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Вложенные подписи («БД №2», «Tested», счётчики) — своим цветом; .accent остаётся в переливе. */
:root[data-fx] main h1 *:not(.accent), :root[data-fx] .section__head h2 *:not(.accent) { -webkit-text-fill-color: currentColor; }

:root[data-fx] .btn--primary:not(:disabled):not(.is-disabled) {
  background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%), var(--primary-grad);
  background-size: 250% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat;
  border: 0; color: var(--on-primary);
  transition: transform .18s var(--ease), box-shadow .25s, background-position .7s var(--ease);
}
:root[data-fx] .btn--primary:not(:disabled):not(.is-disabled):hover {
  background-position: -30% 0, 0 0; color: var(--on-primary);
  box-shadow: 0 10px 30px var(--primary-glow), 0 0 0 4px var(--primary-soft);
}
:root[data-fx][data-mode="dark"] .btn--primary:not(:disabled):not(.is-disabled):hover {
  box-shadow: 0 0 24px var(--primary-glow), 0 10px 30px var(--primary-glow);
}
:root[data-fx] .card--hover:hover,
:root[data-fx] .lead-card:hover { box-shadow: var(--shadow-hover); }

/* Подсветка от курсора (только мышь): край карточки светится там, где курсор, внутри — едва заметное сияние.
   Координаты --mx/--my и класс .is-lit ставит static/js/app.js. */
:root[data-fx] .card, :root[data-fx] .lead-card { position: relative; }
/* Счётчик «Уже найдено лидов» (.found) — свой фон-градиент и свой блик в ::after, ему отдельная подсветка ниже. */
:root[data-fx] .card:not(.found)::after, :root[data-fx] .lead-card::after {
  content: ''; position: absolute; inset: -1px; z-index: 1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--ease);
}
:root[data-fx] .card:not(.found).is-lit::after, :root[data-fx] .lead-card.is-lit::after { opacity: 1; }
/* Сияние внутри — только у карточек с обычным фоном: у открытой заявки и счётчика фон свой, его не затираем. */
:root[data-fx] .card:not(.found):not(.status-card--open).is-lit,
:root[data-fx] .lead-card:not(.lead-card--open).is-lit {
  background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
                                    color-mix(in srgb, var(--spot) 9%, transparent), transparent 65%);
}
/* Счётчик: светлое пятно за курсором поверх его градиента и чуть сильнее свечение вокруг. */
:root[data-fx] .card.found { transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
:root[data-fx] .card.found.is-lit {
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .2), transparent 60%),
              linear-gradient(135deg, var(--logo-a) 0%, var(--logo-b) 55%, var(--logo-c) 100%);
  box-shadow: 0 18px 50px var(--primary-glow), 0 0 0 1px rgba(255, 255, 255, .18) inset;
}
:root[data-theme="carbon"] .card:not(.found):not(.is-lit), :root[data-theme="carbon"] .lead-card:not(.is-lit) {
  background-image: linear-gradient(90deg, transparent 8%, rgba(255, 30, 60, .9) 50%, transparent 92%);
  background-size: 100% 1px; background-position: 0 0; background-repeat: no-repeat;
}
:root[data-theme="carbon"] .card, :root[data-theme="carbon"] .lead-card {
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(232, 184, 74, .05);
}
:root[data-theme="carbon"] .header { box-shadow: 0 1px 0 rgba(255, 30, 60, .45), 0 2px 18px rgba(255, 30, 60, .12); }
:root[data-theme="carbon"] .btn--primary:not(:disabled):not(.is-disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 16px rgba(232, 184, 74, .25); }
:root[data-theme="carbon"] .btn--secondary { border-color: rgba(232, 184, 74, .45); }
:root[data-theme="carbon"] .nav a.is-active, :root[data-theme="carbon"] .pill-tabs a.is-active,
:root[data-theme="carbon"] .stats__tab.is-active { background: var(--primary-grad); color: var(--on-primary); }
:root[data-theme="winter"] .card:not(.found), :root[data-theme="winter"] .lead-card {
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .08);
}
:root[data-theme="neon"] .nav a.is-active,
:root[data-theme="neon"] .tabs .is-active { text-shadow: 0 0 12px var(--primary-glow); }
/* ---------- Логотип в цветах темы ----------
   Базовые светлая и тёмная — фирменный синий (#0066FF, блик белый). Праздничные темы: знак «G» и слово «Гига» —
   перелив цветов темы (--logo-a/b/c), блик — свой светлый оттенок, в тёмном подвале — светлый акцент (--mark-foot). */
:root[data-fx] .logo__word-a { color: #0066FF; }
:root[data-fx][data-mode="dark"] .logo__word-a { color: #3D8BFF; }
:root[data-fx] .footer .logo__word-a { color: #6AAAFF; }

:root[data-theme="dawn"], :root[data-theme="lagoon"], :root[data-theme="pearl"], :root[data-theme="aurora"],
:root[data-theme="neon"], :root[data-theme="ocean"], :root[data-theme="obsidian"], :root[data-theme="winter"],
:root[data-theme="carbon"], :root[data-theme="rain"], :root[data-theme="city"],
:root[data-theme="spring"], :root[data-theme="summer"], :root[data-theme="autumn"],
:root[data-theme="graphite"], :root[data-theme="lavender"], :root[data-theme="mountains"], :root[data-theme="cosmos"] {
  --mark-a: var(--logo-a); --mark-b: var(--logo-b); --mark-c: var(--logo-c);
}
:root[data-theme="dawn"]     { --mark-shine: #FFE3EC; --mark-shine-core: #FFF1F5; --mark-foot: #FF8FA8; }
:root[data-theme="lagoon"]   { --mark-shine: #DDF8FF; --mark-shine-core: #F0FCFF; --mark-foot: #5EEAD4; }
:root[data-theme="pearl"]    { --mark-shine: #F3EEFF; --mark-shine-core: #FBF9FF; --mark-foot: #A5B4FC; }
:root[data-theme="aurora"]   { --mark-shine: #D9FFF1; --mark-shine-core: #F0FFF9; --mark-foot: #5EF2C2; }
:root[data-theme="neon"]     { --mark-shine: #FFD6F3; --mark-shine-core: #FFF0FA; --mark-foot: #FF6EC4; }
:root[data-theme="ocean"]    { --mark-shine: #CFFCF6; --mark-shine-core: #ECFFFC; --mark-foot: #5EEAD4; }
:root[data-theme="obsidian"] { --mark-shine: #FFF3C8; --mark-shine-core: #FFFBEA; --mark-foot: #F6E27A; }
:root[data-theme="winter"]   { --mark-shine: #FFF4D6; --mark-shine-core: #FFFFFF; --mark-foot: #FFD166;
                               --mark-a: #FF4D6A; --mark-b: #FFD166; --mark-c: #4ADE80; }  /* знак «G» — красный, золото, ёлка */
:root[data-theme="carbon"]   { --mark-shine: #FFF4D0; --mark-shine-core: #FFFFFF; --mark-foot: #F3D27A; }
:root[data-theme="rain"]     { --mark-shine: #D9FFF1; --mark-shine-core: #F0FFFA; --mark-foot: #6EE7B7; }
:root[data-theme="city"]     { --mark-shine: #E9E3FF; --mark-shine-core: #FFFFFF; --mark-foot: #A5B4FC; }
:root[data-theme="spring"]   { --mark-shine: #FFE4F1; --mark-shine-core: #FFF5FA; --mark-foot: #F9A8D4; }
:root[data-theme="summer"]   { --mark-shine: #FFE8C2; --mark-shine-core: #FFFFFF; --mark-foot: #FFC46B; }
:root[data-theme="autumn"]   { --mark-shine: #FFE7BF; --mark-shine-core: #FFF7E8; --mark-foot: #FDBA74; }
:root[data-theme="graphite"] { --mark-shine: #D1FAE5; --mark-shine-core: #F0FDF8; --mark-foot: #6EE7B7; }
:root[data-theme="lavender"] { --mark-shine: #F3E8FF; --mark-shine-core: #FCF8FF; --mark-foot: #C4B5FD; }
:root[data-theme="mountains"] { --mark-shine: #E0F2FE; --mark-shine-core: #F5FBFF; --mark-foot: #7DD3FC; }
:root[data-theme="cosmos"]   { --mark-shine: #E6FBFF; --mark-shine-core: #FFFFFF; --mark-foot: #A5F3FC; }

:root[data-theme="dawn"] .header .logo__word-a, :root[data-theme="lagoon"] .header .logo__word-a,
:root[data-theme="pearl"] .header .logo__word-a, :root[data-theme="aurora"] .header .logo__word-a,
:root[data-theme="neon"] .header .logo__word-a, :root[data-theme="ocean"] .header .logo__word-a,
:root[data-theme="obsidian"] .header .logo__word-a, :root[data-theme="winter"] .header .logo__word-a,
:root[data-theme="carbon"] .header .logo__word-a, :root[data-theme="rain"] .header .logo__word-a,
:root[data-theme="city"] .header .logo__word-a, :root[data-theme="spring"] .header .logo__word-a,
:root[data-theme="summer"] .header .logo__word-a, :root[data-theme="autumn"] .header .logo__word-a,
:root[data-theme="graphite"] .header .logo__word-a, :root[data-theme="lavender"] .header .logo__word-a,
:root[data-theme="mountains"] .header .logo__word-a, :root[data-theme="cosmos"] .header .logo__word-a {
  background: linear-gradient(100deg, var(--mark-a) 0%, var(--mark-b) 55%, var(--mark-c) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme] .footer .logo__word-a { color: var(--mark-foot, #6AAAFF); }

/* ---------- Переключатель анимации фона (templates/partials/fx_toggle.html) — только у тем с частицами ---------- */
.fx-toggle { display: none; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; flex: none; }
:root[data-anim] .fx-toggle { display: inline-flex; }
.fx-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 999px; }
.fx-toggle__track {
  position: relative; display: block; width: 52px; height: 30px; border-radius: 999px;
  background: var(--primary-grad); border: 1px solid var(--border);
  box-shadow: 0 0 16px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: background .3s, box-shadow .3s;
}
.fx-toggle__knob {
  position: absolute; top: 3px; left: 25px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; line-height: 1; color: var(--primary-dark);
  background: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  transition: left .3s var(--ease), color .3s, background .3s, transform .3s var(--ease);
}
.fx-toggle[aria-checked="true"] .fx-toggle__knob { animation: fx-knob 2.4s ease-in-out infinite; }
@keyframes fx-knob { 50% { transform: rotate(180deg) scale(1.08); } }
.fx-toggle[aria-checked="false"] .fx-toggle__track { background: var(--card-alt); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
.fx-toggle[aria-checked="false"] .fx-toggle__knob { left: 3px; color: var(--muted); background: var(--card-solid); animation: none; }
.fx-toggle:hover .fx-toggle__track { box-shadow: 0 0 22px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, .35); }
.header.is-tiny .fx-toggle__track { width: 44px; height: 26px; }
.header.is-tiny .fx-toggle__knob { width: 18px; height: 18px; top: 3px; left: 21px; font-size: 10px; }
.header.is-tiny .fx-toggle[aria-checked="false"] .fx-toggle__knob { left: 3px; }

/* Анимация выключена: фон и световые пятна замирают, частицы — неподвижный кадр (app.js). */
:root[data-anim-off] body::before, :root[data-anim-off] body::after, :root[data-anim-off] .fx-scene i { animation-play-state: paused; }

/* ---------- Выбор темы (templates/partials/theme_picker.html) ---------- */
.theme-picker { position: relative; }
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: 520px;
  max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain;
  padding: 14px; border-radius: var(--radius-lg);
  background: var(--card-solid); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  animation: theme-menu-in .22s var(--ease);
}
@keyframes theme-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.theme-menu__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; margin: 2px 4px 12px; }
.theme-menu__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .theme-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.theme-swatch {
  display: grid; gap: 2px; padding: 6px 6px 8px; text-align: left; cursor: pointer;
  font: inherit; color: var(--text); background: var(--card-alt);
  border: 2px solid transparent; border-radius: 14px;
  transition: transform .15s var(--ease), border-color .15s, box-shadow .15s;
}
.theme-swatch:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.theme-swatch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.theme-swatch[aria-checked="true"] { border-color: var(--primary); }
.theme-swatch__preview {
  position: relative; display: block; height: 62px; margin-bottom: 4px; overflow: hidden;
  border-radius: 10px; background: var(--sw-bg); box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .18);
}
.theme-swatch__card {
  position: absolute; left: 10px; top: 10px; width: 58%; height: 42px; padding: 8px; display: grid; gap: 5px; align-content: start;
  border-radius: 7px; background: var(--sw-card); box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.theme-swatch__card i { display: block; height: 4px; border-radius: 4px; background: currentColor; opacity: .18; }
.theme-swatch__card i:first-child { width: 70%; height: 5px; background: var(--sw-accent); opacity: 1; }
.theme-swatch__card i:last-child { width: 45%; }
.theme-swatch__pill { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 14px; border-radius: 999px; background: var(--sw-accent); }
.theme-swatch__spark { position: absolute; right: 9px; top: 5px; font-size: 13px; color: #fff; text-shadow: 0 0 6px rgba(255, 255, 255, .9); }
.theme-swatch__name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.theme-swatch__mode { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.theme-swatch__mode svg { width: 12px; height: 12px; }
/* Закрытая тема: приглушённая миниатюра с замком, подпись — почему закрыта и цена аренды. */
.theme-swatch.is-locked .theme-swatch__preview > :not(.theme-swatch__lock) { opacity: .55; }
.theme-swatch.is-locked .theme-swatch__preview { filter: saturate(.7); }
.theme-swatch__lock {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: rgba(10, 14, 24, .62); border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.theme-swatch__lock svg { width: 16px; height: 16px; }
.theme-swatch { min-width: 0; white-space: normal; }
.theme-swatch__hint { font-size: 12px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.theme-swatch__rent { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text); }
.theme-swatch-box { display: grid; gap: 6px; align-content: start; min-width: 0; }
.theme-swatch__extend { width: 100%; white-space: normal; }
.theme-swatch__rent .gigi__coin { width: 14px; height: 14px; font-size: 9px; }
/* Выбор языка (templates/partials/language_picker.html) — то же окно, список вместо миниатюр. */
.lang-picker__btn { width: auto; padding: 0 10px; gap: 6px; display: inline-flex; align-items: center; font: inherit; font-size: 13px; font-weight: 700; }
.lang-picker__btn svg { width: 18px; height: 18px; }
.lang-menu { width: 300px; }
.lang-menu__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.lang-menu__item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px; cursor: pointer;
  font: inherit; font-size: 14px; text-align: left; color: var(--text); background: none;
  border: 1px solid transparent; border-radius: var(--radius-sm); transition: background .15s, border-color .15s;
}
.lang-menu__item small { font-size: 11px; font-weight: 700; color: var(--muted); }
.lang-menu__item:hover { background: var(--primary-soft); }
.lang-menu__item:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.lang-menu__item.is-active { border-color: var(--primary); font-weight: 600; }
.lang-menu__note { margin: 10px 4px 0; }
@media (max-width: 1440px) {
  .lang-picker__btn span { display: none; }
  .lang-picker__btn { width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 720px) {
  .theme-menu { position: fixed; left: 16px; right: 16px; top: 76px; width: auto; max-height: calc(100vh - 92px); overflow-y: auto; }
}
/* Узкие телефоны (360–400): шапка с логотипом, языком, темой, «Войти» и меню должна влезть в одну строку. */
@media (max-width: 400px) {
  .header__actions .icon-btn, .lang-picker__btn { width: 36px; height: 36px; }
  .header__actions { gap: 4px; }
  .header__actions .btn--sm { padding-left: 10px; padding-right: 10px; }
}

/* Кнопка «Войти» у гостя: на компьютере — словом, на телефоне — значком в сетке. */
.header__login svg { display: none; }

/* Телефон: слева логотип, справа сетка 3×2 одинаковых кнопок — настройки, Gigi, рубли / вход или выход, меню.
   У гостя Gigi и рублей нет — ячейки пустые.
   :root в селекторах — чтобы перебить шаги сжатия шапки (.header.is-tiny …) из main.css. */
@media (max-width: 720px) {
  .header__inner { height: 84px; }
  .nav, .header.is-burger .nav { inset: 84px 0 auto 0; }
  .theme-menu { top: 92px; max-height: calc(100vh - 108px); }
  :root .header .header__actions {
    display: grid; grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(2, 36px);
    grid-template-areas: "set gigi rub" ". auth menu"; gap: 4px; margin-left: auto;
  }
  .header__actions .settings-btn { grid-area: set; }
  .header__actions .gigi-chip { grid-area: gigi; }
  .header__actions .rub-chip { grid-area: rub; }
  .header__actions .header__auth { grid-area: auth; }
  :root .header .header__actions .menu-toggle { grid-area: menu; display: inline-grid; }
  :root .header .header__actions .icon-btn, :root .header .lang-picker__btn,
  :root .header .header__login, :root .header .gigi-chip {
    width: 36px; height: 36px; padding: 0; gap: 0; justify-content: center;
  }
  .header__login span { display: none; }
  .header__login svg { display: block; }
  /* Gigi: монета, под ней баланс мелко. */
  :root .header .gigi-chip { flex-direction: column; font-size: 10px; line-height: 1.1; overflow: hidden; }
  .header .gigi-chip .gigi__coin, .header .rub-chip .rub__coin { width: 16px; height: 16px; font-size: 10px; }
  :root .header .gigi-chip.is-long { font-size: 8px; letter-spacing: -.02em; }  /* от 100 000 — целиком, мельче */
  /* Гость: Gigi и рублей нет — одна строка «настройки · войти · меню» без пустых ячеек, шапка обычной высоты. */
  :root .header--guest .header__actions { grid-template-rows: 36px; grid-template-areas: "set auth menu"; }
  .header--guest .header__inner { height: 68px; }
  .header--guest .nav, .header--guest.is-burger .nav { inset: 68px 0 auto 0; }
  .header--guest .theme-menu { top: 76px; max-height: calc(100vh - 92px); }
}

/* ---------- Страницы «Настройки» и «Магазин» (templates/core/settings.html, shop.html) ---------- */
.settings-btn.is-active { border-color: var(--primary); color: var(--primary); }
.settings-section { margin-bottom: 16px; }
.settings-section h2 { margin: 0; font-size: 22px; }
.settings-section__head { flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.settings-section:has(.fx-toggle) .settings-section__head { margin-bottom: 0; }
.settings-section .fx-toggle { display: inline-flex; }  /* в шапке — только у живых тем, здесь всегда */
.theme-board .theme-menu__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.settings-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 12px; }
.shop-tabs { margin-top: 8px; }
.shop-tier { margin-bottom: 16px; }
.shop-tier__head { display: grid; gap: 8px; margin-bottom: 14px; }
.shop-tier__head h3 { margin: 0; font-size: 22px; }
.shop-tier__head h3 .gigi__coin { width: 24px; height: 24px; font-size: 12px; vertical-align: -3px; }
.theme-swatch__ok { color: var(--success); }
/* Темы тарифа (core/_plan_themes.html): квадратики с подписью; в «Магазине» нажатие — окно предпросмотра. */
.plan-themes { display: grid; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--border); }
.plan-themes__toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; user-select: none; }
.plan-themes__toggle::-webkit-details-marker { display: none; }
.plan-themes__toggle:hover .muted { color: var(--primary); }
/* Треугольник «▸»: у закрытого блока смотрит вправо, у открытого поворачивается вниз. */
.plan-themes__arrow { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 7px solid var(--muted); transition: transform .2s var(--ease); }
.plan-themes[open] > .plan-themes__toggle .plan-themes__arrow { transform: rotate(90deg); }
.plan-themes__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px 8px; }
.theme-mini {
  display: grid; justify-items: center; align-content: start; gap: 5px; min-width: 0; padding: 0;
  background: none; border: 0; font: inherit; color: inherit; text-align: center;
}
button.theme-mini { cursor: pointer; }
.theme-mini__thumb {
  position: relative; display: block; width: 52px; height: 52px; flex: none; overflow: hidden; border-radius: 12px;
  background: var(--sw-bg); border: 2px solid var(--border); box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .18);
  transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.theme-mini__thumb::after { content: ''; position: absolute; right: 6px; bottom: 6px; width: 18px; height: 8px; border-radius: 999px; background: var(--sw-accent); }
button.theme-mini:hover .theme-mini__thumb { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-hover); }
button.theme-mini:focus-visible { outline: none; }
button.theme-mini:focus-visible .theme-mini__thumb { outline: 2px solid var(--primary); outline-offset: 2px; }
.theme-mini__card {
  position: absolute; left: 7px; top: 9px; width: 60%; height: 24px; padding: 5px; display: grid; gap: 3px; align-content: start;
  border-radius: 5px; background: var(--sw-card); box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.theme-mini__card i { display: block; height: 3px; border-radius: 3px; background: currentColor; opacity: .2; }
.theme-mini__card i:first-child { width: 75%; background: var(--sw-accent); opacity: 1; }
.theme-mini__spark { position: absolute; right: 5px; top: 2px; font-size: 10px; color: #fff; text-shadow: 0 0 5px rgba(255, 255, 255, .9); }
.theme-mini__name { max-width: 100%; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--graphite); overflow-wrap: anywhere; }
button.theme-mini:hover .theme-mini__name { color: var(--primary); }

/* «Настроить» → тариф: выбор тем галочками-карточками. */
.plan-theme-pick { margin: 6px 0 16px; padding: 0; border: 0; min-width: 0; }
.plan-theme-pick legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.plan-theme-pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; margin-top: 10px; }
.plan-theme-pick__item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer;
  background: var(--card-alt); border: 1px solid var(--border); transition: border-color .15s, box-shadow .15s;
}
.plan-theme-pick__item:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.plan-theme-pick__item input { width: 18px; height: 18px; flex: none; accent-color: var(--primary); }
.plan-theme-pick__item .theme-mini__thumb { width: 40px; height: 40px; border-radius: 10px; }
.plan-theme-pick__item .theme-mini__card { left: 5px; top: 7px; height: 18px; padding: 4px; gap: 2px; }
.plan-theme-pick__item .theme-mini__thumb::after { width: 14px; height: 6px; right: 5px; bottom: 5px; }
.plan-theme-pick__name { font-size: 14px; font-weight: 600; line-height: 1.25; min-width: 0; }
.plan-theme-pick__quick { margin-top: 8px; gap: 4px; }

/* «Настроить» → «Темы»: строка на тему — миниатюра, цена, срок. */
.theme-offers { display: grid; gap: 4px; }
.theme-offers__head, .theme-offers__row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 100px; gap: 12px; align-items: center; }
.theme-offers__head { padding: 0 8px 4px; }
.theme-offers__row { padding: 8px; border-radius: 12px; }
.theme-offers__row:nth-child(even) { background: var(--card-alt); }
.theme-offers__theme { display: flex; align-items: center; gap: 12px; min-width: 0; }
.theme-offers__theme .theme-mini__thumb { width: 44px; height: 44px; border-radius: 10px; }
.theme-offers__row input { width: 100%; min-height: 40px; padding: 8px 12px; }
.theme-offers__errors { grid-column: 1 / -1; color: var(--danger); font-size: 13px; }
@media (max-width: 480px) {
  .theme-offers__head, .theme-offers__row { grid-template-columns: minmax(0, 1fr) 76px 64px; gap: 8px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Окно предпросмотра темы в «Магазине» (app.js previewTheme) ---------- */
.theme-preview { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: rgba(8, 15, 30, .6); backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s var(--ease); }
.theme-preview.is-open { opacity: 1; }
.has-theme-preview, .has-theme-preview body { overflow: hidden; }
.theme-preview__card {
  width: min(1100px, 100%); height: min(860px, 100%); display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 16px;
  background: var(--card-solid, var(--card)); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(.98); transition: transform .25s var(--ease);
}
.theme-preview.is-open .theme-preview__card { transform: none; }
.theme-preview__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.theme-preview__info { flex: 1 1 200px; min-width: 0; }
.theme-preview__info h2 { margin: 0; font-size: 22px; }
.theme-preview__info p { margin: 2px 0 0; }
.theme-preview__devices { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--card-alt); border: 1px solid var(--border); }
.theme-preview__devices button {
  height: 32px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--muted); background: transparent;
}
.theme-preview__devices button[aria-pressed="true"] { color: var(--on-primary); background: var(--primary); }
.theme-preview__close { flex: none; }
.theme-preview__stage {
  position: relative; min-height: 0; overflow: hidden; isolation: isolate; border-radius: 16px;
  background: var(--card-alt); box-shadow: inset 0 0 0 1px var(--border);
}
.theme-preview__stage::before {  /* размытая миниатюра темы за устройством */
  content: ''; position: absolute; inset: -40px; z-index: -1; background: var(--stage-bg, transparent);
  filter: blur(28px) saturate(1.15); opacity: .55;
}
.theme-preview__stage::after {  /* пока страница грузится */
  content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: tp-spin .8s linear infinite;
}
.theme-preview__stage.is-loaded::after { display: none; }
@keyframes tp-spin { to { transform: rotate(360deg); } }
.theme-preview__device { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; transform-origin: 0 0; }
.theme-preview__frame { display: block; flex: 1; min-height: 0; width: 100%; border: 0; background: transparent; opacity: 0; transition: opacity .35s var(--ease); }
.theme-preview__stage.is-loaded .theme-preview__frame { opacity: 1; }
.theme-preview__bar { display: none; }
/* Компьютер — окно браузера. */
.theme-preview__stage[data-device="desktop"] .theme-preview__device {
  overflow: hidden; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .1), 0 30px 80px rgba(8, 15, 30, .35);
}
.theme-preview__stage[data-device="desktop"] .theme-preview__bar {
  display: flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 18px;
  background: linear-gradient(#F6F7FA, #ECEFF4); border-bottom: 1px solid #DDE2EA;
}
.theme-preview__time, .theme-preview__icons { display: none; }
.theme-preview__bar i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.theme-preview__bar i:nth-child(2) { background: #FEBC2E; }
.theme-preview__bar i:nth-child(3) { background: #28C840; }
.theme-preview__url {
  display: flex; align-items: center; justify-content: center; width: min(460px, 50%); height: 28px; margin: 0 auto;
  border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #DDE2EA; color: #5B6475; font-size: 14px;
}
/* Телефон — корпус с вырезом-«островком» и боковыми кнопками. */
.theme-preview__stage[data-device="phone"] .theme-preview__device {
  padding: 14px; border-radius: 62px; background: linear-gradient(150deg, #3B4049, #15171B 40%, #0B0C0E);
  box-shadow: inset 0 0 0 2px #4A505A, inset 0 0 0 6px #0B0C0E, 0 40px 90px rgba(8, 15, 30, .45), 0 0 0 1px rgba(255, 255, 255, .05);
}
.theme-preview__stage[data-device="phone"] .theme-preview__frame { flex: none; border-radius: 0 0 48px 48px; background: var(--card-alt); }
.theme-preview__stage[data-device="phone"] .theme-preview__bar {
  display: flex; align-items: center; justify-content: space-between; flex: none; height: 50px; padding: 6px 30px 0 40px;
  border-radius: 48px 48px 0 0; background: var(--status-bg);
}
.theme-preview__stage[data-device="phone"] .theme-preview__bar > i,
.theme-preview__stage[data-device="phone"] .theme-preview__url { display: none; }
.theme-preview__stage[data-device="phone"] .theme-preview__time { display: block; font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.theme-preview__stage[data-device="phone"] .theme-preview__icons { display: block; width: 66px; height: 14px; }
.theme-preview__stage[data-device="phone"] .theme-preview__device::before {
  content: ''; position: absolute; top: 26px; left: 50%; width: 120px; height: 34px; margin-left: -60px; z-index: 2;
  border-radius: 20px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.theme-preview__stage[data-device="phone"] .theme-preview__device::after {
  content: ''; position: absolute; right: -4px; top: 190px; width: 4px; height: 96px; border-radius: 0 3px 3px 0;
  background: #2A2E35; box-shadow: -422px -70px 0 0 #2A2E35, -422px 40px 0 0 #2A2E35;
}
/* Телефон посетителя — страница во весь экран, без уменьшения. */
.theme-preview__stage[data-device="fit"] .theme-preview__device { position: absolute; inset: 0; }
.theme-preview__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
  .theme-preview { padding: 0; place-items: stretch; }
  .theme-preview__card {
    width: 100%; height: 100%; gap: 10px; border: 0; border-radius: 0;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }
  .theme-preview__head { flex-wrap: nowrap; }
  .theme-preview__info h2 { font-size: 19px; }
  .theme-preview__info { flex: 1 1 0; }
  .theme-preview__stage { border-radius: 18px; }
  .theme-preview__stage::before { display: none; }
  .theme-preview__actions .btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }
}
/* Страница внутри окна предпросмотра: ничего не нажимается, полос прокрутки не видно (колесо и палец листают). */
:root[data-preview] { scrollbar-width: none; }
:root[data-preview]::-webkit-scrollbar { display: none; }
:root[data-preview] a, :root[data-preview] button, :root[data-preview] input, :root[data-preview] select { cursor: default; }
@media (max-width: 720px) {
  .theme-board .theme-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-langs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Смена темы «волной» от кнопки (View Transitions; где не поддерживается — мгновенно) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-reveal .65s cubic-bezier(.4, 0, .2, 1); }
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
  to   { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0)); }
}

/* ---------- Телефоны: без размытия (дорого), карточки плотнее ---------- */
@media (max-width: 720px), (pointer: coarse) {
  :root[data-fx] .card, :root[data-fx] .hero, :root[data-fx] .lead-card, :root[data-fx] .panel__side {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  :root[data-fx] { --card: color-mix(in srgb, var(--card-solid) 92%, transparent); }
  /* Два пятна вместо четырёх и вдвое медленнее — красиво и бережёт батарею. */
  .fx-scene i:nth-child(n+3) { display: none; }
  .fx-scene i { animation-duration: 90s; }
}

/* ---------- Кто попросил систему меньше анимации — фон стоит, смена темы мгновенная ---------- */
@media (prefers-reduced-motion: reduce) {
  :root[data-fx] body::before, :root[data-fx] body::after, .fx-scene i { animation: none; }
  ::view-transition-new(root) { animation: none; }
  .theme-menu { animation: none; }
  .fx-toggle__knob { animation: none !important; }
}