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


.login-page {

    min-height: calc(100vh - 160px);

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 60px 20px;

}



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


.login-card {

    width: 100%;

    max-width: 430px;

    background: rgba(18, 23, 42, 0.95);

    border: 1px solid #29304d;

    border-radius: 20px;

    padding: 40px;

    box-shadow:
        0 0 40px rgba(124, 58, 237, 0.15);

}




.login-card-header {

    text-align: center;

    margin-bottom: 30px;

}



.login-icon {

    width: 70px;

    height: 70px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;


    border-radius: 50%;


    background:
        linear-gradient(
            135deg,
            #6d5dfc,
            #8b5cf6
        );


    color: white;

    font-size: 32px;

    box-shadow:
        0 0 25px rgba(139,92,246,0.5);

}



.login-card h1 {

    margin: 0;

    font-size: 32px;

    color: white;

}



.login-card-header p {

    margin-top: 10px;

    color: #9ca3af;

}

.login-alert {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin: -8px 0 24px;
    padding: 13px;
    border: 1px solid rgba(255,190,75,.4);
    border-radius: 12px;
    color: #ffe0a5;
    background: rgba(255,190,75,.09);
    font-size: 13px;
}

.login-alert.danger {
    border-color: rgba(255,91,116,.48);
    color: #ffd0d7;
    background: rgba(255,91,116,.1);
}

.login-alert-icon {
    display: grid;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    color: #151b28;
    background: #ffca68;
    font-weight: 800;
}

.login-alert.danger .login-alert-icon { color: #fff; background: #ed5269; }
.login-alert strong { display: block; margin-bottom: 2px; color: inherit; }
.login-alert p { margin: 0; color: inherit; line-height: 1.45; }



/* =========================
   INPUTS
========================= */


.login-input-group {

    margin-bottom: 22px;

}



.login-input-group label {

    display: block;

    margin-bottom: 8px;

    color: #e5e7eb;

    font-size: 14px;

}



.login-input-group input {


    width: 100%;

    box-sizing: border-box;


    padding: 14px 16px;


    background: #0b1020;


    border: 1px solid #303857;


    border-radius: 12px;


    color: white;


    font-size: 15px;


    outline: none;


    transition: 0.2s;

}



.login-input-group input:focus {


    border-color: #8b5cf6;


    box-shadow:
        0 0 15px rgba(139,92,246,0.25);

}



/* =========================
   OPTIONS
========================= */


.login-options {

    display: flex;

    justify-content: space-between;

    align-items: center;


    margin-bottom: 25px;


    font-size: 14px;

}



.login-options label {

    color: #9ca3af;

}



.login-options a {

    color: #a78bfa;

    text-decoration: none;

}



.login-options a:hover {

    color: #c4b5fd;

}



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


.login-button {


    width: 100%;


    padding: 15px;


    border: none;


    border-radius: 12px;


    cursor: pointer;


    color: white;


    font-size: 16px;


    font-weight: 700;


    background:

        linear-gradient(
            135deg,
            #6d5dfc,
            #8b5cf6
        );


    box-shadow:

        0 10px 25px rgba(139,92,246,0.25);


    transition: 0.25s;

}



.login-button:hover {


    transform: translateY(-2px);


    box-shadow:

        0 15px 35px rgba(139,92,246,0.4);

}



/* =========================
   FOOTER LINK
========================= */


.login-footer {


    text-align: center;


    margin-top: 25px;


    color: #9ca3af;


}



.login-footer a {


    margin-left: 5px;


    color: #a78bfa;


    font-weight: 600;


    text-decoration: none;


}



.login-footer a:hover {


    color: #c4b5fd;


}

.login-legal-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 18px;
    color: #aab6cb;
    font-size: 12px;
    line-height: 1.5;
}

.login-legal-check input { width: 15px; height: 15px; margin-top: 2px; accent-color: #7c5cff; }
.login-legal-check a { color: #a78bfa; text-decoration: none; }
.login-legal-check a:hover { text-decoration: underline; }