body {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 15%, rgba(37, 99, 235, .18), transparent 28%),
        radial-gradient(circle at 85% 85%, rgba(59, 130, 246, .14), transparent 28%),
        linear-gradient(145deg, #050b16, #07111f, #0b1728);
}

body::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);

    background-size: 60px 60px;

    opacity: .18;

    animation: gridMove 35s linear infinite;

    pointer-events: none;
}

body::after {
    content: "";
    position: absolute;

    width: 900px;
    height: 900px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(37, 99, 235, .18) 0%,
            rgba(37, 99, 235, .05) 45%,
            transparent 70%);

    animation: ambientLight 18s ease-in-out infinite;

    pointer-events: none;
}

.campusLogin__header {

    position: relative;

    z-index: 2;

    margin-bottom: 35px;

    animation: fade .9s;

}

.campusLogin__header::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: rgba(37, 99, 235, .18);

    filter: blur(70px);

    z-index: -1;

}

.campusLogin__logo {

    width: 230px;

    animation: logoFloat 8s ease-in-out infinite;

}

.campusLogin {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

    position: relative;

    z-index: 2;

}

.campusLogin__card {

    width: 100%;
    max-width: 430px;

    padding: 45px;

    background: rgba(12, 20, 38, .72);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 24px;

    backdrop-filter: blur(22px);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .45),
        inset 0 1px rgba(255, 255, 255, .06);

    animation: fadeUp .8s;

}

.campusLogin__title {

    text-align: center;

    font-size: 2rem;

    margin-bottom: 10px;

}

.campusLogin__subtitle {

    text-align: center;

    color: var(--color-text-secondary);

    line-height: 1.6;

    margin-bottom: 35px;

}

.campusLogin__form {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.campusLogin__group {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px 18px;

    border-radius: 14px;

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .05);

    transition: .3s;

}

.campusLogin__group:hover {

    border-color: rgba(59, 130, 246, .45);

}

.campusLogin__group:focus-within {

    border-color: var(--color-primary);

    box-shadow: 0 0 0 4px rgba(37, 99, 235, .16);

}

.campusLogin__group i {

    width: 18px;

    color: #7eb3ff;

}

.campusLogin__group input {

    flex: 1;

}

.campusLogin__group input::placeholder {

    color: #9ca3af;

}

.campusLogin__button {

    margin-top: 8px;

    padding: 16px;

    border-radius: 14px;

    background: linear-gradient(135deg, #2563eb, #1d4ed8);

    color: #fff;

    font-weight: 700;

    font-size: 1rem;

    transition: .3s;

    box-shadow: 0 10px 25px rgba(37, 99, 235, .35);

}

.campusLogin__button:hover {

    transform: translateY(-3px);

    box-shadow: 0 15px 35px rgba(37, 99, 235, .45);

}

.campusLogin__message {

    min-height: 24px;

    margin-top: 18px;

    text-align: center;

    color: var(--color-error);

    font-size: .95rem;

}

.campusLogin__forgot {

    display: block;

    margin-top: 20px;

    text-align: center;

    color: var(--color-text-secondary);

    transition: .3s;

}

.campusLogin__forgot:hover {

    color: white;

}

@keyframes ambientLight {

    0% {

        transform: translate(-120px, -80px);

    }

    50% {

        transform: translate(100px, 60px);

    }

    100% {

        transform: translate(-120px, -80px);

    }

}

@keyframes gridMove {

    from {

        transform: translateY(0);

    }

    to {

        transform: translateY(60px);

    }

}

@keyframes logoFloat {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-6px);

    }

    100% {

        transform: translateY(0px);

    }

}


@media(max-width:768px) {

    .campusLogin__logo {

        width: 190px;

    }

    .campusLogin__card {

        padding: 35px 25px;

    }

}

@media(max-width:480px) {

    .campusLogin__title {

        font-size: 1.7rem;

    }

    .campusLogin__subtitle {

        font-size: .95rem;

    }

}