/* ══════════ FUNDO ANIMADO ══════════ */
#auth {
    min-width: 100%;
    min-height: 100svh;
    margin: 0px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #f8fafc 100%);
}

#auth::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(0, 159, 56, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(255, 209, 17, 0.1) 0%, transparent 45%),
        radial-gradient(ellipse at 60% 80%, rgba(0, 100, 227, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 70%, rgba(255, 209, 17, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 60%, rgba(0, 159, 56, 0.05) 0%, transparent 45%);
    animation: floatGradient 20s ease-in-out infinite;
    filter: blur(60px);
    z-index: 0;
}

@keyframes floatGradient {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(2%, 3%) rotate(1deg);
    }
    50% {
        transform: translate(-1%, 2%) rotate(-1deg);
    }
    75% {
        transform: translate(3%, -2%) rotate(0.5deg);
    }
}

/* ══════════ CONTAINER PRINCIPAL ══════════ */
#auth-container {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.04),
        0 12px 48px rgba(0, 0, 0, 0.06);
    border: 2px solid transparent;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)),
        linear-gradient(135deg, var(--cor1), var(--cor2), var(--cor3));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    width: 90%;
    max-width: 520px;
    position: relative;
    z-index: 1;
    padding: 40px 60px;
}


#form-login, #form-registro, #form-recuperacao, #recuperacao-container {
    display: none;

    &.ativo {
        display: flex;
        animation: fadeSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ══════════ RESPOSTA DO FORM ══════════ */
#form-resposta {
    text-align: center;
    padding: 10px 16px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}


#mensagem:empty, #form-mensagem:empty {
    display: none;
}

/* ══════════ LOGO ══════════ */
#logo {
    width: 300px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

/* ══════════ DECORAÇÕES SUTIS ══════════ */
#auth-container::before {
    display: none;
}