/* =========================================
   LOGIN PAGE
========================================= */

.login-page {

    min-height: 100vh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 60px 40px;

    background:
        radial-gradient(
            circle at top left,
            rgba(59,130,246,0.12),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #040b1c 0%,
            #08142b 100%
        );
}

/* =========================================
   LAYOUT
========================================= */

.login-layout {

    width: 100%;

    max-width: 1400px;

    display: grid;

    grid-template-columns: 1fr 520px;

    gap: 80px;

    align-items: center;
}

/* =========================================
   HERO
========================================= */

.login-hero {

    color: white;
}

.login-logo {

    width: 110px;

    margin-bottom: 28px;
}

.login-hero h1 {

    margin: 0 0 18px;

    font-size: 64px;

    line-height: 1.05;

    font-weight: 800;
}

.login-subtext {

    max-width: 700px;

    font-size: 20px;

    line-height: 1.8;

    color: #b6c2d9;

    margin-bottom: 50px;
}

/* =========================================
   FEATURES
========================================= */

.login-features {

    display: flex;

    flex-direction: column;

    gap: 28px;
}

.login-feature {

    display: flex;

    align-items: flex-start;

    gap: 18px;
}

.login-feature-icon {

    width: 58px;
    height: 58px;

    border-radius: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        rgba(59,130,246,0.12);

    font-size: 24px;
}

.login-feature strong {

    display: block;

    font-size: 20px;

    margin-bottom: 6px;
}

.muted {

    color: #9fb0d9;

    line-height: 1.6;
}

/* =========================================
   CARD
========================================= */

.login-card {

    padding: 48px;

    border-radius: 32px;

    background:
        rgba(8,20,43,0.84);

    border:
        1px solid rgba(255,255,255,0.05);

    box-shadow:
        0 30px 60px rgba(0,0,0,0.35);

    backdrop-filter: blur(20px);
}

.login-card h2 {

    margin: 0 0 10px;

    font-size: 42px;

    font-weight: 800;
}

.login-card-subtext {

    color: #9fb0d9;

    margin-bottom: 34px;

    line-height: 1.7;
}

/* =========================================
   FORM
========================================= */

.login-form {

    display: flex;

    flex-direction: column;

    gap: 24px;
}

.input-group {

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.input-group label {

    font-weight: 700;

    color: white;
}

.modern-input {

    width: 100%;

    padding: 18px 20px;

    border-radius: 18px;

    border:
        1px solid rgba(255,255,255,0.08);

    background:
        rgba(255,255,255,0.04);

    color: white;

    font-size: 16px;

    outline: none;

    transition: 0.25s;
}

.modern-input:focus {

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

    box-shadow:
        0 0 0 4px rgba(59,130,246,0.14);
}

/* =========================================
   BUTTON
========================================= */

.login-btn {

    width: 100%;

    padding: 18px;

    border: none;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    color: white;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.25s;
}

.login-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(59,130,246,0.28);
}

/* =========================================
   LINKS
========================================= */

.login-links {

    margin-top: 28px;

    text-align: center;
}

.login-links a {

    display: block;

    margin-bottom: 14px;

    color: #4f8cff;

    font-weight: 600;
}

.forgot-link {

    color: #94a3b8 !important;

    font-size: 14px;
}

/* =========================================
   ERROR
========================================= */

.login-error {

    margin-bottom: 24px;

    padding: 16px 18px;

    border-radius: 16px;

    background:
        rgba(239,68,68,0.12);

    border:
        1px solid rgba(239,68,68,0.25);

    color: #fca5a5;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 980px) {

    .login-layout {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .login-hero {

        text-align: center;
    }

    .login-subtext {

        margin-left: auto;
        margin-right: auto;
    }

    .login-feature {

        text-align: left;
    }

    .login-card {

        padding: 34px;
    }

    .login-hero h1 {

        font-size: 48px;
    }
}

@media (max-width: 640px) {

    .login-page {

        padding: 40px 20px;
    }

    .login-card {

        padding: 28px;
    }

    .login-hero h1 {

        font-size: 38px;
    }

    .login-subtext {

        font-size: 17px;
    }
}