: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%);
}

/* 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; /* На всякий случай отключаем и анимацию */
}