.forgot-password-page {

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:24px;

    box-sizing:border-box;

}


.forgot-password-card {

    width:100%;

    max-width:480px;

    padding:42px;

    box-sizing:border-box;

    text-align:center;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    backdrop-filter:blur(18px);

}


.forgot-password-icon {

    width:64px;

    height:64px;

    margin:0 auto 24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(138,123,182,.15);

    border:1px solid rgba(176,168,192,.2);

    font-size:28px;

}


.forgot-password-card h1 {

    margin:0 0 14px;

    color:var(--text);

    font-size:30px;

}


.forgot-password-description {

    margin:0 0 28px;

    color:var(--text-secondary);

    line-height:1.6;

    font-size:15px;

}


.forgot-password-fields {

    display:flex;

    flex-direction:column;

    gap:14px;

}


.forgot-password-fields input {

    width:100%;

    box-sizing:border-box;

    padding:13px 16px;

    border-radius:14px;

    border:1px solid var(--border);

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

    color:var(--text);

    outline:none;

    font-size:15px;

    transition:var(--transition);

}


.forgot-password-fields input:focus {

    border-color:var(--purple);

    box-shadow:
        0 0 0 3px rgba(138,123,182,.12);

}


.forgot-primary-button {

    width:100%;

    padding:13px 22px;

    border:none;

    border-radius:14px;

    background:var(--purple);

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}


.forgot-primary-button:hover {

    background:#9b8bc9;

    transform:translateY(-2px);

    box-shadow:
        0 8px 24px rgba(138,123,182,.25);

}


.forgot-primary-button:active {

    transform:translateY(0);

}


.forgot-primary-button:disabled {

    opacity:.65;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}


.forgot-email-message {

    margin:4px 0;

    color:var(--light-purple);

    font-size:14px;

    line-height:1.5;

}


.forgot-result {

    min-height:22px;

    margin:4px 0 0;

    color:#e05252;

    font-size:14px;

}


.loading-dots {

    display:inline-flex;

    align-items:center;

    gap:5px;

}


.loading-dots span {

    width:6px;

    height:6px;

    border-radius:50%;

    background:currentColor;

    animation:forgotDots 1.2s ease-in-out infinite;

}


.loading-dots span:nth-child(2) {

    animation-delay:.15s;

}


.loading-dots span:nth-child(3) {

    animation-delay:.3s;

}


@keyframes forgotDots {

    0%,
    60%,
    100% {

        transform:translateY(0);

        opacity:.45;

    }

    30% {

        transform:translateY(-6px);

        opacity:1;

    }

}


@media (max-width:600px) {

    .forgot-password-page {

        padding:16px;

    }


    .forgot-password-card {

        padding:32px 22px;

        border-radius:20px;

    }


    .forgot-password-card h1 {

        font-size:25px;

    }

}