/**
 * Auth pages (Login, Register, etc.) - Moving starfield background matching homepage
 */
.auth-page-body {
    margin: 0;
    min-height: 100vh;
}

.auth-page-wrapper {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background: radial-gradient(ellipse at top, #793ef1 0%, #5a2db8 30%, #3d1f7a 60%, #2a154f 100%);
}

.auth-page-content {
    position: relative;
    z-index: 2;
}

/* Moving starfield - full viewport */
.auth-star-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Star layers: same structure as homepage - 1px/2px/3px elements with box-shadow stars */
#auth-stars1,
#auth-stars2,
#auth-stars3 {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    border-radius: 2px;
}

#auth-stars1 {
    width: 1px;
    height: 1px;
    box-shadow: 100px 150px #fff, 250px 400px #fff, 400px 80px #fff, 550px 320px #fff, 700px 200px #fff, 850px 450px #fff, 50px 300px #fff, 300px 500px #fff, 600px 100px #fff, 150px 250px #fff, 350px 50px #fff, 500px 380px #fff, 750px 280px #fff, 900px 120px #fff, 200px 350px #fff, 450px 180px #fff, 650px 420px #fff, 80px 480px #fff, 380px 220px #fff, 580px 360px #fff, 780px 50px #fff, 920px 290px #fff, 120px 90px #fff, 280px 440px #fff, 480px 140px #fff, 680px 310px #fff, 880px 190px #fff, 180px 520px #fff, 420px 260px #fff, 620px 70px #fff, 820px 390px #fff, 950px 160px #fff, 1100px 300px #fff, 1250px 450px #fff, 1400px 100px #fff, 1550px 250px #fff, 1700px 400px #fff, 1850px 80px #fff, 1050px 180px #fff, 1300px 330px #fff, 1650px 220px #fff, 1150px 500px #fff, 1450px 60px #fff, 1750px 360px #fff, 1350px 410px #fff, 1600px 140px #fff, 1900px 270px #fff;
    animation: authAnimStar 60s linear infinite;
}

#auth-stars1::after {
    content: " ";
    position: absolute;
    top: 2000px;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 100px 150px #fff, 250px 400px #fff, 400px 80px #fff, 550px 320px #fff, 700px 200px #fff, 850px 450px #fff, 50px 300px #fff, 300px 500px #fff, 600px 100px #fff, 150px 250px #fff, 350px 50px #fff, 500px 380px #fff, 750px 280px #fff, 900px 120px #fff, 200px 350px #fff, 450px 180px #fff, 650px 420px #fff, 80px 480px #fff, 380px 220px #fff, 580px 360px #fff, 780px 50px #fff, 920px 290px #fff, 120px 90px #fff, 280px 440px #fff, 480px 140px #fff, 680px 310px #fff, 880px 190px #fff, 180px 520px #fff, 420px 260px #fff, 620px 70px #fff, 820px 390px #fff, 950px 160px #fff, 1100px 300px #fff, 1250px 450px #fff, 1400px 100px #fff, 1550px 250px #fff, 1700px 400px #fff, 1850px 80px #fff, 1050px 180px #fff, 1300px 330px #fff, 1650px 220px #fff, 1150px 500px #fff, 1450px 60px #fff, 1750px 360px #fff, 1350px 410px #fff, 1600px 140px #fff, 1900px 270px #fff;
}

#auth-stars2 {
    width: 2px;
    height: 2px;
    box-shadow: 180px 220px #fff, 320px 80px #fff, 520px 340px #fff, 720px 160px #fff, 120px 380px #fff, 420px 120px #fff, 620px 460px #fff, 880px 240px #fff, 80px 180px #fff, 280px 420px #fff, 480px 60px #fff, 680px 300px #fff, 920px 140px #fff, 200px 320px #fff, 380px 200px #fff, 580px 440px #fff, 780px 100px #fff, 150px 260px #fff, 350px 480px #fff, 550px 40px #fff, 750px 280px #fff, 950px 360px #fff, 250px 140px #fff, 450px 380px #fff, 650px 80px #fff, 850px 320px #fff, 1050px 200px #fff, 1150px 400px #fff, 1350px 60px #fff, 1550px 240px #fff, 1750px 380px #fff, 1950px 120px #fff;
    animation: authAnimStar 100s linear infinite;
}

#auth-stars2::after {
    content: " ";
    position: absolute;
    top: 2000px;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 180px 220px #fff, 320px 80px #fff, 520px 340px #fff, 720px 160px #fff, 120px 380px #fff, 420px 120px #fff, 620px 460px #fff, 880px 240px #fff, 80px 180px #fff, 280px 420px #fff, 480px 60px #fff, 680px 300px #fff, 920px 140px #fff, 200px 320px #fff, 380px 200px #fff, 580px 440px #fff, 780px 100px #fff, 150px 260px #fff, 350px 480px #fff, 550px 40px #fff, 750px 280px #fff, 950px 360px #fff, 250px 140px #fff, 450px 380px #fff, 650px 80px #fff, 850px 320px #fff, 1050px 200px #fff, 1150px 400px #fff, 1350px 60px #fff, 1550px 240px #fff, 1750px 380px #fff, 1950px 120px #fff;
}

#auth-stars3 {
    width: 3px;
    height: 3px;
    box-shadow: 200px 100px rgba(255,255,255,0.9), 400px 300px rgba(255,255,255,0.9), 600px 50px rgba(255,255,255,0.9), 800px 250px rgba(255,255,255,0.9), 100px 400px rgba(255,255,255,0.9), 300px 150px rgba(255,255,255,0.9), 500px 350px rgba(255,255,255,0.9), 700px 200px rgba(255,255,255,0.9), 900px 450px rgba(255,255,255,0.9), 1100px 90px rgba(255,255,255,0.9), 1300px 320px rgba(255,255,255,0.9), 1500px 260px rgba(255,255,255,0.9), 1700px 380px rgba(255,255,255,0.9), 1900px 180px rgba(255,255,255,0.9), 1200px 60px rgba(255,255,255,0.9), 1400px 240px rgba(255,255,255,0.9), 1600px 420px rgba(255,255,255,0.9), 1800px 120px rgba(255,255,255,0.9);
    animation: authAnimStar 140s linear infinite;
}

#auth-stars3::after {
    content: " ";
    position: absolute;
    top: 2000px;
    left: 0;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 200px 100px rgba(255,255,255,0.9), 400px 300px rgba(255,255,255,0.9), 600px 50px rgba(255,255,255,0.9), 800px 250px rgba(255,255,255,0.9), 100px 400px rgba(255,255,255,0.9), 300px 150px rgba(255,255,255,0.9), 500px 350px rgba(255,255,255,0.9), 700px 200px rgba(255,255,255,0.9), 900px 450px rgba(255,255,255,0.9), 1100px 90px rgba(255,255,255,0.9), 1300px 320px rgba(255,255,255,0.9), 1500px 260px rgba(255,255,255,0.9), 1700px 380px rgba(255,255,255,0.9), 1900px 180px rgba(255,255,255,0.9), 1200px 60px rgba(255,255,255,0.9), 1400px 240px rgba(255,255,255,0.9), 1600px 420px rgba(255,255,255,0.9), 1800px 120px rgba(255,255,255,0.9);
}

@keyframes authAnimStar {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-2000px);
    }
}

/* Ensure sign page sits above background and remove old static background */
.auth-page-wrapper .sign-page::before {
    display: none;
}

.auth-page-wrapper .sign-page {
    background: transparent;
}

.auth-page-wrapper .sign-box .box {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Dark mode support for auth page */
body.dark-mode .auth-page-wrapper {
    background: radial-gradient(ellipse at top, #3d1f7a 0%, #2a154f 40%, #1a0d33 70%, #0f0819 100%);
}

body.dark-mode .auth-page-wrapper .sign-box .box {
    background-color: rgba(26, 31, 46, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e4e4e7;
}

body.dark-mode .auth-page-wrapper .sign-page .text-muted {
    color: #a1a1aa !important;
}

body.dark-mode .auth-page-wrapper .sign-page a {
    color: #9d6fff;
}

body.dark-mode .auth-page-wrapper .sign-with .sign-with-divider span {
    background-color: #1a1f2e;
}

/* Dark mode: login box text stays light */
body.dark-mode .auth-page-wrapper .sign-box .box .form-label,
body.dark-mode .auth-page-wrapper .sign-box .box h3,
body.dark-mode .auth-page-wrapper .sign-box .box .form-check-label {
    color: #e4e4e7 !important;
}

body.dark-mode .auth-page-wrapper .sign-box .box .text-muted {
    color: #a1a1aa !important;
}

body.dark-mode .auth-page-wrapper .sign-box .box a:not(.btn) {
    color: #9d6fff;
}

body.dark-mode .auth-page-wrapper .sign-box .box input.form-control {
    color: #e4e4e7;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Auth page theme toggle (top right) */
.auth-theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background 0.2s, color 0.2s;
}

.auth-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.auth-theme-toggle .fa-sun {
    display: none;
}

.auth-theme-toggle .fa-moon {
    display: inline;
}

body.dark-mode .auth-theme-toggle .fa-sun {
    display: inline;
}

body.dark-mode .auth-theme-toggle .fa-moon {
    display: none;
}

/* Login box (white card): ensure all text is visible and correctly placed */
.auth-page-wrapper .sign-box .box {
    color: #212121;
}

.auth-page-wrapper .sign-box .box .form-label,
.auth-page-wrapper .sign-box .box h3,
.auth-page-wrapper .sign-box .box .form-check-label {
    color: #212121 !important;
    font-weight: 600;
}

.auth-page-wrapper .sign-box .box h3 {
    font-weight: 700;
}

.auth-page-wrapper .sign-box .box .text-muted {
    color: #52525b !important;
}

.auth-page-wrapper .sign-box .box a:not(.btn) {
    color: #ea580c;
}

.auth-page-wrapper .sign-box .box a:not(.btn):hover {
    color: #c2410c;
}

.auth-page-wrapper .sign-box .box input.form-control {
    color: #212121;
    background-color: #fff;
    border-color: #d4d4d8;
}

.auth-page-wrapper .sign-box .box .input-group {
    border-color: #d4d4d8;
}

body.dark-mode .auth-page-wrapper .sign-box h3 {
    color: #e4e4e7;
}

/* Auth pages: mobile-friendly */
@media (max-width: 575.98px) {
    .auth-page-wrapper .sign-page {
        padding: 12px;
    }
    .auth-page-wrapper .sign-box .box {
        padding: 20px 16px;
    }
    .auth-theme-toggle {
        top: 0.75rem;
        right: 0.75rem;
        width: 44px;
        height: 44px;
    }
    .auth-page-wrapper .sign-box .box input.form-control {
        font-size: 16px !important;
    }
}