:root {
    /* По умолчанию темная тема */
    --background-gradient: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    --text-color: #e0e0e0;
}

/* Светлая тема по умолчанию для браузеров с такой настройкой */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --background-gradient: #e8e8e8;
        --text-color: #333;
    }
}

/* Светлая тема по выбору пользователя */
body[data-theme='light'] {
    --background-gradient: #e8e8e8;
    --text-color: #333;
}

/* Темная тема по выбору пользователя */
body[data-theme='dark'] {
    --background-gradient: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    --text-color: #e0e0e0;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--background-gradient);
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    color: var(--text-color);
}

#background-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.main-container {
    position: relative;
    z-index: 2;
}