.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: var(--bg);
    background-image: radial-gradient(var(--border) 0.5px, transparent 0.5px);
    background-size: 32px 32px;
}

html[data-decor="winter"] .auth-page {
    --auth-sky: linear-gradient(35deg, #2c56a8, #3a86d4 50%, #66c4ee);
    --auth-art: url("/static/auth/decor/winter.svg");
}

html[data-decor="newyear"] .auth-page {
    --auth-sky: linear-gradient(35deg, #0d1a3f, #1c3a86 55%, #3461c4);
    --auth-art: url("/static/auth/decor/newyear.svg");
}

html[data-decor="spring"] .auth-page {
    --auth-sky: linear-gradient(35deg, #d85a92, #f094b9 50%, #ffd3e3);
    --auth-art: url("/static/auth/decor/spring.svg");
}

html[data-decor="summer"] .auth-page {
    --auth-sky: linear-gradient(35deg, #0596b8, #22c0d8 45%, #ffd36b);
    --auth-art: url("/static/auth/decor/summer.svg");
}

html[data-decor="autumn"] .auth-page {
    --auth-sky: linear-gradient(35deg, #8a3a12, #c25f1c 50%, #e8a14a);
    --auth-art: url("/static/auth/decor/autumn.svg");
}

html[data-decor="halloween"] .auth-page {
    --auth-sky: linear-gradient(35deg, #08050d, #1f1033 55%, #45195a);
    --auth-art: url("/static/auth/decor/halloween.svg");
}

html[data-decor="valentine"] .auth-page {
    --auth-sky: linear-gradient(35deg, #a8305a, #d43f76 50%, #f293b4);
    --auth-art: url("/static/auth/decor/valentine.svg");
}

html[data-decor="birthday"] .auth-page {
    --auth-sky: linear-gradient(35deg, #5f36c8, #9b57e6 50%, #ff8fc2);
    --auth-art: url("/static/auth/decor/birthday.svg");
}

html.decor .auth-page {
    --snow: #ffffff;
    --decor-ink: #160c22;
    background: var(--auth-art) center bottom / cover no-repeat, var(--auth-sky);
}

html.decor .auth-page .decor-fx {
    z-index: 0;
}

html.decor .auth-page .auth-container {
    position: relative;
}

.auth-container {
    max-width: 440px;
    width: 100%;
    text-align: center;
    z-index: 2;
    animation: authAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes authAppear {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-header {
    text-align: center;
    margin-bottom: 24px;
}

.auth-logo {
    font-size: 48px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 4px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    display: inline-block;
}

html.decor .auth-logo {
    color: #fff;
}

.auth-logo:hover {
    letter-spacing: 12px;
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px var(--accent-border));
}

.auth-form {
    padding: 32px;
    text-align: left;
}

.auth-form .form-group {
    margin-bottom: 20px;
}

.auth-form .btn {
    width: 100%;
    margin-top: 8px;
}