:root {
    /* Темная тема (по умолчанию) */
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --bg-quaternary: #222222;
    --bg-hover: #2a2a2a;

    --border-primary: #222222;
    --border-secondary: #2a2a2a;
    --border-hover: #3a3a3a;

    --text-primary: #e5e5e5;
    --text-secondary: #cccccc;
    --text-muted: #888888;
    --text-hover: #ffffff;

    --accent-blue: #2563eb;
    --accent-blue-hover: #1d4ed8;
    --accent-blue-light: rgba(37, 99, 235, 0.1);

    --accent-green: #22c55e;
    --accent-green-light: rgba(34, 197, 94, 0.1);

    --accent-red: #ef4444;
    --accent-red-light: rgba(239, 68, 68, 0.1);

    --accent-yellow: #fbbf24;
    --accent-yellow-light: rgba(251, 191, 36, 0.1);

    --shadow-color: rgba(0, 0, 0, 0.4);
    --overlay-bg: rgba(0, 0, 0, 0.7);

    --color-on-accent: #0a0a0a;
}

/* Светлая тема */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e8e8e8;
    --bg-quaternary: #d8d8d8;
    --bg-hover: #d0d0d0;

    --border-primary: #e0e0e0;
    --border-secondary: #d0d0d0;
    --border-hover: #c0c0c0;

    --text-primary: #1a1a1a;
    --text-secondary: #333333;
    --text-muted: #666666;
    --text-hover: #000000;

    --accent-blue: #2563eb;
    --accent-blue-hover: #1d4ed8;
    --accent-blue-light: rgba(37, 99, 235, 0.15);

    --accent-green: #16a34a;
    --accent-green-light: rgba(22, 163, 74, 0.15);

    --accent-red: #dc2626;
    --accent-red-light: rgba(220, 38, 38, 0.15);

    --accent-yellow: #d97706;
    --accent-yellow-light: rgba(217, 119, 6, 0.15);

    --shadow-color: rgba(0, 0, 0, 0.1);
    --overlay-bg: rgba(0, 0, 0, 0.5);

    --color-on-accent: #ffffff;
}

/* Полуночная тема */
[data-theme="midnight"] {
    --bg-primary: #1a1f2e;
    --bg-secondary: #141927;
    --bg-tertiary: #242d42;
    --bg-quaternary: #2d3854;
    --bg-hover: #3a4d6f;

    --border-primary: #2e3f5f;
    --border-secondary: #3a4d6f;
    --border-hover: #4a5d7f;

    --text-primary: #f5f5f5;
    --text-secondary: #d4dae8;
    --text-muted: #8b95ab;
    --text-hover: #ffffff;

    --accent-blue: #3b82f6;
    --accent-blue-hover: #2563eb;
    --accent-blue-light: rgba(59, 130, 246, 0.15);

    --accent-green: #10b981;
    --accent-green-light: rgba(16, 185, 129, 0.15);

    --accent-red: #ef4444;
    --accent-red-light: rgba(239, 68, 68, 0.15);

    --accent-yellow: #f59e0b;
    --accent-yellow-light: rgba(245, 158, 11, 0.15);

    --shadow-color: rgba(21, 47, 89, 0.5);
    --overlay-bg: rgba(10, 20, 40, 0.8);

    --color-on-accent: #1a1f2e;
}

/* ======================================== */
/*     Тема 'Звёздная Ночь' (Финальная)     */
/*  (Лучший дизайн + правильная реализация) */
/* ======================================== */

/* 1. Гармоничная цветовая палитра */
[data-theme="stellar"] {
    --bg-primary: transparent;
    --bg-secondary: rgba(26, 26, 51, 0.75);
    --bg-tertiary: rgba(38, 38, 77, 0.8);
    --bg-quaternary: rgba(51, 51, 102, 0.85);
    --bg-hover: rgba(77, 77, 128, 0.8);
    --border-primary: rgba(51, 51, 102, 0.9);
    --border-secondary: rgba(77, 77, 128, 0.9);
    --border-hover: #8f8fb9;
    --text-primary: #f0f2ff;
    --text-secondary: #c0c8ff;
    --text-muted: #8a93c4;
    --text-hover: #ffffff;
    --accent-blue: #5fa8ff;
    --accent-blue-hover: #8fc8ff;
    --accent-blue-light: rgba(95, 168, 255, 0.15);
    --accent-green: #33ff99;
    --accent-green-light: rgba(51, 255, 153, 0.1);
    --accent-red: #ff4d88;
    --accent-red-light: rgba(255, 77, 136, 0.1);
    --accent-yellow: #f5d76e;
    --accent-yellow-light: rgba(245, 215, 110, 0.1);
    --shadow-color: rgba(95, 168, 255, 0.3);
    --overlay-bg: rgba(13, 13, 26, 0.9);

    --color-on-accent: #0c0c1e;
}

/* 2. Техническая база: фон внутри <main> */
html[data-theme="stellar"] {
    background-color: #0c0c1e;
}
html[data-theme="stellar"] body {
    background-color: transparent;
}

html[data-theme="stellar"] main {
    position: relative;
    overflow: hidden;
    background-color: #0c0c1e; /* Фоновый цвет на случай, если туманность не прогрузится */
    /* Добавляем фоновую туманность. Она будет статичной, звёзды будут двигаться поверх неё */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(76, 0, 130, 0.3), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0, 77, 128, 0.3), transparent 40%);
}

[data-theme="stellar"] .field-select {
    background-color: rgba(26, 26, 51, 0.95);
    color: #f0f2ff;
    border-color: rgba(77, 77, 128, 0.9);
}

[data-theme="stellar"] .field-select option {
    background-color: #1a1a33;
    color: #f0f2ff;
}

/* 3. ВОЗВРАЩАЕМ КРАСИВЫЕ ЗВЁЗДЫ */

/* Слои 1 и 2 на псевдо-элементах <main> */
html[data-theme="stellar"] main::before,
html[data-theme="stellar"] main::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background-repeat: repeat;
    z-index: 0;
}

/* Слой 1 (самый медленный): Далёкие, маленькие звёзды */
html[data-theme="stellar"] main::before {
    background-image: radial-gradient(1px 1px at 20px 30px, #eee, transparent),
                      radial-gradient(1px 1px at 80px 70px, #fff, transparent),
                      radial-gradient(1.5px 1.5px at 150px 120px, #eee, transparent);
    background-size: 250px 250px;
    animation: move-stars-transform 200s linear infinite;
}

/* Слой 2 (средняя скорость): Средние звёзды */
html[data-theme="stellar"] main::after {
    background-image: radial-gradient(1.5px 1.5px at 50px 80px, #fff, transparent),
                      radial-gradient(2px 2px at 120px 190px, #ddd, transparent),
                      radial-gradient(1.5px 1.5px at 200px 40px, #fff, transparent);
    background-size: 200px 200px;
    animation: move-stars-transform 150s linear infinite;
}

/*
 * Слой 3 (самый быстрый): Близкие звёзды.
 * Мы используем псевдо-элемент на .page, так как main уже занят.
 * Это гарантирует, что звёзды будут НАД туманностью, но ПОД контентом.
 */
html[data-theme="stellar"] .page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background-repeat: repeat;
    z-index: -1; /* Помещаем за контент внутри .page */
    background-image: radial-gradient(2px 2px at 10px 200px, #fff, transparent),
                      radial-gradient(2.5px 2.5px at 100px 100px, #fff, transparent),
                      radial-gradient(2px 2px at 180px 150px, #ddd, transparent);
    background-size: 300px 300px;
    animation: move-stars-transform 100s linear infinite;
}

/* Убедимся, что .page может содержать позиционированный псевдо-элемент */
html[data-theme="stellar"] .page {
    position: relative;
    z-index: 1; /* Контент должен быть выше звёзд */
}


/* 4. Анимация (одна для всех, самая производительная) */
@keyframes move-stars-transform {
    from { transform: translateY(0px); }
    to   { transform: translateY(-2000px); }
}

html[data-theme="stellar"] main.admin-container {
    background-image: none; /* Убираем фоновую туманность */
}

html[data-theme="stellar"] main.admin-container::before,
html[data-theme="stellar"] main.admin-container::after,
html[data-theme="stellar"] main.admin-container .admin-content::before {
    display: none; /* Полностью убираем все три слоя звёзд */
    animation: none; /* На всякий случай отключаем и анимацию */
}

/* ======================================== */
/*      Тема 'Снежная Ночь' v3 (Snow)       */
/*   Мягкое зимнее небо + яркие снежинки    */
/* ======================================== */

/* 1. Палитра — зимний вечер, светлый текст */
[data-theme="snow"] {
    --bg-primary: transparent;
    --bg-secondary: rgba(35, 55, 100, 0.72);
    --bg-tertiary: rgba(45, 70, 125, 0.78);
    --bg-quaternary: rgba(58, 88, 150, 0.84);
    --bg-hover: rgba(70, 105, 170, 0.78);

    --border-primary: rgba(80, 120, 200, 0.55);
    --border-secondary: rgba(100, 148, 220, 0.62);
    --border-hover: rgba(140, 190, 250, 0.85);

    --text-primary: #eef3ff;
    --text-secondary: #c8d8f5;
    --text-muted: #8aabdc;
    --text-hover: #ffffff;

    --accent-blue: #5ba3f5;
    --accent-blue-hover: #82beff;
    --accent-blue-light: rgba(91, 163, 245, 0.18);

    --accent-green: #4dd8a0;
    --accent-green-light: rgba(77, 216, 160, 0.14);

    --accent-red: #f06080;
    --accent-red-light: rgba(240, 96, 128, 0.14);

    --accent-yellow: #f5d06e;
    --accent-yellow-light: rgba(245, 208, 110, 0.14);

    --shadow-color: rgba(50, 100, 220, 0.30);
    --overlay-bg: rgba(15, 25, 60, 0.88);

    --color-on-accent: #ffffff;
}

/* 2. Фон — зимнее небо на закате, мягко-синее */
html[data-theme="snow"] {
    background-color: #1e3560;
}
html[data-theme="snow"] body {
    background-color: transparent;
}

html[data-theme="snow"] main {
    position: relative;
    overflow: hidden;
    background-color: #1e3560;
    background-image:
        radial-gradient(ellipse at 20% 15%, rgba(120, 80, 200, 0.22), transparent 45%),
        radial-gradient(ellipse at 85% 75%, rgba(40, 100, 200, 0.28), transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(80, 140, 230, 0.18), transparent 45%),
        radial-gradient(ellipse at 50% 0%,  rgba(200, 225, 255, 0.10), transparent 40%);
}

/* 3. СНЕЖИНКИ — три слоя, крупные и яркие */

/* Слой 1 (медленный): мелкие далёкие снежинки */
html[data-theme="snow"] main::before {
    content: "";
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 300%;
    background-repeat: repeat;
    z-index: 9998;
    pointer-events: none;

    background-image:
        radial-gradient(circle 2px   at 20px  50px,  rgba(255,255,255,0.95), transparent 100%),
        radial-gradient(circle 1.5px at 75px  140px, rgba(220,240,255,0.90), transparent 100%),
        radial-gradient(circle 2px   at 140px 80px,  rgba(255,255,255,0.85), transparent 100%),
        radial-gradient(circle 1.5px at 195px 200px, rgba(200,230,255,0.90), transparent 100%),
        radial-gradient(circle 2px   at 55px  230px, rgba(255,255,255,0.95), transparent 100%),
        radial-gradient(circle 2px   at 110px 170px, rgba(230,245,255,0.85), transparent 100%),
        radial-gradient(circle 1.5px at 170px 30px,  rgba(255,255,255,0.90), transparent 100%),
        radial-gradient(circle 2px   at 230px 120px, rgba(210,235,255,0.85), transparent 100%),
        radial-gradient(circle 1.5px at 10px  160px, rgba(255,255,255,0.80), transparent 100%),
        radial-gradient(circle 2px   at 240px 70px,  rgba(255,255,255,0.90), transparent 100%);
    background-size: 260px 260px;
    animation: snow-fall-slow 22s linear infinite;
}

/* Слой 2 (средний): средние снежинки */
html[data-theme="snow"] main::after {
    content: "";
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 300%;
    background-repeat: repeat;
    z-index: 9999;
    pointer-events: none;

    background-image:
        radial-gradient(circle 3px   at 30px  90px,  rgba(255,255,255,1.0),  transparent 100%),
        radial-gradient(circle 2.5px at 120px 50px,  rgba(240,250,255,0.95), transparent 100%),
        radial-gradient(circle 3px   at 80px  190px, rgba(255,255,255,0.95), transparent 100%),
        radial-gradient(circle 2.5px at 180px 130px, rgba(220,242,255,0.90), transparent 100%),
        radial-gradient(circle 3px   at 50px  150px, rgba(255,255,255,1.0),  transparent 100%),
        radial-gradient(circle 2.5px at 210px 200px, rgba(255,255,255,0.90), transparent 100%),
        radial-gradient(circle 3px   at 155px 70px,  rgba(235,248,255,0.95), transparent 100%);
    background-size: 240px 240px;
    animation: snow-fall-mid 15s linear infinite;
}

/* Слой 3 (быстрый): крупные ближние снежинки */
html[data-theme="snow"] .page::before {
    content: "";
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 300%;
    background-repeat: repeat;
    z-index: 10000;
    pointer-events: none;

    background-image:
        radial-gradient(circle 4px   at 40px  120px, rgba(255,255,255,1.0),  transparent 100%),
        radial-gradient(circle 3.5px at 130px 60px,  rgba(255,255,255,0.95), transparent 100%),
        radial-gradient(circle 4px   at 210px 180px, rgba(240,250,255,1.0),  transparent 100%),
        radial-gradient(circle 3.5px at 80px  250px, rgba(255,255,255,0.95), transparent 100%),
        radial-gradient(circle 4px   at 170px 100px, rgba(255,255,255,1.0),  transparent 100%),
        radial-gradient(circle 3.5px at 280px 50px,  rgba(230,245,255,0.95), transparent 100%);
    background-size: 320px 320px;
    animation: snow-fall-fast 10s linear infinite;
}

html[data-theme="snow"] .page {
    position: relative;
    z-index: 1;
}

/* 4. Анимации — снег падает вниз с лёгким сносом */
@keyframes snow-fall-slow {
    from { transform: translateY(0px)    translateX(0px);  }
    to   { transform: translateY(2200px) translateX(40px); }
}

@keyframes snow-fall-mid {
    from { transform: translateY(0px)    translateX(0px);   }
    to   { transform: translateY(2200px) translateX(-25px); }
}

@keyframes snow-fall-fast {
    from { transform: translateY(0px)    translateX(0px);  }
    to   { transform: translateY(2200px) translateX(20px); }
}

/* 5. Select / Option */
[data-theme="snow"] .field-select {
    background-color: rgba(25, 45, 90, 0.97);
    color: #eef3ff;
    border-color: rgba(100, 148, 220, 0.75);
}

[data-theme="snow"] .field-select option {
    background-color: #1a2e5a;
    color: #eef3ff;
}

/* 6. Отключаем на admin-страницах */
html[data-theme="snow"] main.admin-container {
    background-image: none;
}

html[data-theme="snow"] main.admin-container::before,
html[data-theme="snow"] main.admin-container::after,
html[data-theme="snow"] main.admin-container .admin-content::before {
    display: none;
    animation: none;
}