:root {
    --bg-gradient: radial-gradient(ellipse at bottom, #0a1f35 0%, #050c14 100%);
    --text-color: #ddeeff;
    --text-muted: rgba(180, 210, 240, 0.6);
    --card-bg: rgba(0, 160, 200, 0.05);
    --card-border: rgba(0, 180, 220, 0.15);
    --card-hover-bg: rgba(0, 180, 220, 0.1);
    --accent: #00b4d8;
    --accent-dim: rgba(0, 180, 216, 0.2);
    --particle-color: rgba(0, 140, 180, 0.8);
    --step-bg: rgba(0, 160, 200, 0.08);
}

body[data-theme='light'] {
    --bg-gradient: #d8eef6;
    --text-color: #0a2540;
    --text-muted: rgba(10, 37, 64, 0.5);
    --card-bg: rgba(255, 255, 255, 0.55);
    --card-border: rgba(0, 100, 160, 0.15);
    --card-hover-bg: rgba(255, 255, 255, 0.8);
    --accent: #0077b6;
    --accent-dim: rgba(0, 119, 182, 0.12);
    --particle-color: rgba(0, 100, 150, 0.5);
    --step-bg: rgba(0, 100, 160, 0.07);
}

body[data-theme='dark'] {
    --bg-gradient: radial-gradient(ellipse at bottom, #0a1f35 0%, #050c14 100%);
    --text-color: #ddeeff;
    --text-muted: rgba(180, 210, 240, 0.6);
    --card-bg: rgba(0, 160, 200, 0.05);
    --card-border: rgba(0, 180, 220, 0.15);
    --card-hover-bg: rgba(0, 180, 220, 0.1);
    --accent: #00b4d8;
    --accent-dim: rgba(0, 180, 216, 0.2);
    --particle-color: rgba(0, 140, 180, 0.8);
    --step-bg: rgba(0, 160, 200, 0.08);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg-gradient: #d8eef6;
        --text-color: #0a2540;
        --text-muted: rgba(10, 37, 64, 0.5);
        --card-bg: rgba(255, 255, 255, 0.55);
        --card-border: rgba(0, 100, 160, 0.15);
        --card-hover-bg: rgba(255, 255, 255, 0.8);
        --accent: #0077b6;
        --accent-dim: rgba(0, 119, 182, 0.12);
        --particle-color: rgba(0, 100, 150, 0.5);
        --step-bg: rgba(0, 100, 160, 0.07);
    }
}

*, *::before, *::after {
    box-sizing: border-box;
}

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

#background-canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

.main-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 40px 20px;
    box-sizing: border-box;
}