.auth-header-bar,
.auth-footer-bar {
    display: none;
}

.auth-main {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding-bottom: 0;
}

.auth-container {
    --orb-size: clamp(430px, 52vw, 650px);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 1rem 2rem clamp(2rem, 8vw, 9rem);
    position: relative;
    isolation: isolate;
}

.orb-stack {
    --login-exit-dx: 0px;
    --login-exit-dy: 0px;
    width: var(--orb-size);
    aspect-ratio: 1 / 1;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 480ms cubic-bezier(0.18, 0.82, 0.22, 1), filter 620ms ease, opacity 620ms ease;
}

body.login-exit-active::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: #000;
    opacity: 0;
    transition: opacity 760ms ease;
}

body.login-exit-active .orb-stack {
    transform: translate(var(--login-exit-dx), var(--login-exit-dy)) scale(1.02);
}

body.login-exit-active .login-animated-bg {
    transition: opacity 620ms ease, filter 620ms ease;
}

body.login-exit-bloom::before {
    opacity: 1;
}

body.login-exit-bloom .orb-stack {
    transform: translate(var(--login-exit-dx), var(--login-exit-dy)) scale(3.15);
    filter: blur(42px) saturate(120%);
    opacity: 0.08;
}

body.login-exit-bloom .login-animated-bg {
    opacity: 0;
    filter: blur(24px) drop-shadow(0 0 0 rgba(31, 230, 255, 0));
}

body.login-exit-bloom .login-glow {
    opacity: 0;
    transition: opacity 520ms ease;
}

.login-glow {
    position: absolute;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    filter: blur(62px);
    opacity: 0.34;
    z-index: 0;
    pointer-events: none;
    animation: glowFloat 9s ease-in-out infinite;
}

.login-glow-left {
    background: rgba(31, 230, 255, 0.7);
    top: 14%;
    left: max(1rem, 7%);
}

.login-glow-right {
    background: rgba(64, 158, 255, 0.56);
    bottom: 10%;
    right: max(1rem, 12%);
    animation-delay: 1.8s;
}

.login-animated-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--orb-size) * 1.62);
    height: calc(var(--orb-size) * 1.62);
    z-index: 0;
    pointer-events: none;
    opacity: 0.62;
    filter: blur(0.2px) drop-shadow(0 0 14px rgba(31, 230, 255, 0.18));
    animation: orbitPulse 24s ease-in-out infinite;
}

.login-animated-bg path {
    transform-box: fill-box;
    transform-origin: center;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
    will-change: d, stroke-width, opacity;
}

.auth-card {
    --cursor-x: 50%;
    --cursor-y: 50%;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --wave-drive: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    z-index: 2;
    border-radius: 50%;
    border: 1px solid rgba(91, 221, 255, 0.045);
    background:
        radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(155, 245, 255, 0.022), rgba(24, 46, 70, 0.015) 36%, rgba(6, 13, 24, 0.034) 72%),
        linear-gradient(160deg, rgba(8, 14, 24, 0.01), rgba(5, 10, 19, 0.04));
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.14),
        0 0 28px rgba(77, 204, 255, 0.055),
        inset 0 0 28px rgba(184, 252, 255, 0.014);
    backdrop-filter: blur(6px) saturate(106%);
    -webkit-backdrop-filter: blur(6px) saturate(106%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: perspective(1350px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 180ms ease-out;
    animation: orbEnter 520ms ease-out;
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: 2.1%;
    border-radius: 50%;
    border: 1px solid rgba(117, 228, 255, 0.1);
    opacity: calc(0.2 + (var(--wave-drive) * 0.08));
    filter: blur(0.3px);
    animation: ringSpin 12s linear infinite, ringWave 6.2s ease-in-out infinite;
    pointer-events: none;
}

.auth-card::after {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(164, 252, 255, 0.03), rgba(56, 188, 255, 0.012) 30%, rgba(7, 15, 27, 0.006) 62%, rgba(4, 10, 20, 0) 76%),
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0) 44%);
    animation: coreWave 7s ease-in-out infinite;
}

.auth-card-content {
    width: min(70%, 360px);
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
}

.auth-form {
    width: 100%;
    display: grid;
    gap: 1rem;
}

.auth-form .form-group {
    margin: 0;
}

.auth-form label {
    display: block;
    margin-bottom: 0.42rem;
    color: rgba(234, 242, 255, 0.88);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.auth-form input {
    width: 100%;
    padding: 0.86rem 0.95rem;
    border-radius: 12px;
    border: 1px solid rgba(81, 216, 255, 0.3);
    background: rgba(4, 9, 18, 0.26);
    color: var(--text-primary);
    font-size: 0.98rem;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.auth-form input::placeholder {
    color: rgba(234, 242, 255, 0.48);
}

.auth-form input:focus {
    outline: none;
    border-color: rgba(93, 225, 255, 0.98);
    background: rgba(4, 9, 18, 0.34);
    box-shadow: 0 0 0 3px rgba(81, 216, 255, 0.16), 0 10px 24px rgba(9, 20, 36, 0.32);
}

.auth-form .btn.btn-primary.btn-full {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.22rem;
    padding: 0.86rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(197, 250, 255, 0.28);
    background: linear-gradient(
        112deg,
        rgba(86, 231, 255, 0.96) 0%,
        rgba(72, 224, 251, 0.95) 18%,
        rgba(58, 211, 243, 0.94) 38%,
        rgba(43, 197, 235, 0.93) 58%,
        rgba(55, 186, 238, 0.93) 79%,
        rgba(74, 188, 248, 0.92) 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #03131c;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 30px rgba(61, 207, 255, 0.34);
    animation: none;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.auth-form .btn.btn-primary.btn-full:hover:not(:disabled) {
    background: linear-gradient(
        112deg,
        rgba(100, 237, 255, 0.98) 0%,
        rgba(84, 229, 255, 0.96) 22%,
        rgba(65, 216, 247, 0.95) 44%,
        rgba(50, 201, 239, 0.95) 66%,
        rgba(67, 196, 247, 0.95) 84%,
        rgba(86, 202, 255, 0.95) 100%
    );
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(61, 207, 255, 0.42);
    filter: saturate(1.05);
}

.auth-form .btn.btn-primary.btn-full:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 10px 24px rgba(61, 207, 255, 0.3);
}

.auth-form .btn.btn-primary.btn-full:disabled {
    cursor: wait;
    opacity: 0.84;
}

.error-message {
    margin: 0.1rem 0;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 77, 94, 0.34);
    background: rgba(255, 77, 94, 0.14);
    color: #ff7a86;
    font-size: 0.88rem;
}

@keyframes glowFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(0, -14px, 0) scale(1.06);
    }
}

@keyframes orbitPulse {
    0%,
    100% {
        opacity: 0.56;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.78;
        transform: translate(-50%, -50%) scale(1.04) rotate(5deg);
    }
}

@keyframes ringSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ringWave {
    0%,
    100% {
        border-radius: 50%;
    }
    25% {
        border-radius: 48% 52% 51% 49% / 53% 47% 52% 48%;
    }
    50% {
        border-radius: 52% 48% 47% 53% / 46% 54% 48% 52%;
    }
    75% {
        border-radius: 49% 51% 53% 47% / 51% 49% 46% 54%;
    }
}

@keyframes coreWave {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.75;
    }
    50% {
        transform: scale(1.03);
        opacity: 0.98;
    }
}

@keyframes orbEnter {
    from {
        opacity: 0;
        transform: perspective(1350px) rotateX(0deg) rotateY(0deg) translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: perspective(1350px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(0) scale(1);
    }
}

@media (max-width: 900px) {
    .auth-container {
        --orb-size: min(88vw, 560px);
        justify-content: center;
        padding: 1.5rem 1rem;
    }

    .login-animated-bg {
        width: calc(var(--orb-size) * 1.55);
        height: calc(var(--orb-size) * 1.55);
    }

    .auth-card-content {
        width: min(74%, 340px);
    }

    .login-glow {
        width: 15rem;
        height: 15rem;
    }
}

@media (max-width: 560px) {
    .auth-container {
        --orb-size: min(94vw, 430px);
        padding: 1rem 0.6rem;
    }

    .auth-card-content {
        width: min(78%, 310px);
    }

    .auth-form label {
        font-size: 0.84rem;
    }

    .auth-form input,
    .auth-form .btn.btn-primary.btn-full {
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-glow,
    .login-animated-bg,
    .auth-card::before,
    .auth-card::after,
    .auth-form .btn.btn-primary.btn-full {
        animation: none;
    }

    .auth-card {
        transition: none;
    }

    .auth-form .btn.btn-primary.btn-full {
        transition: none;
    }
}