/* =================================================================
   LOGIN.CSS - Estilos Exclusivos da Tela de Autenticação
   ================================================================= */

/* O fundo pontilhado e a centralização agora só afetam o body se ele tiver a classe "tela-login" */
body.tela-login {
    background-image: radial-gradient(circle, rgba(128, 128, 128, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Container do Form de Login */
main.login-main {
    width: 100%; 
    max-width: 400px; 
    padding: 24px; 
    position: relative; 
    z-index: 10;
    animation: fadeIn 0.4s ease-out forwards;
}

/* --- BACKGROUND GLOWS --- */
.bg-glow-container { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow-pink { position: absolute; top: -10%; left: -5%; width: 40%; height: 40%; border-radius: 50%; background-color: rgba(236, 72, 153, 0.05); filter: blur(120px); }
.glow-orange { position: absolute; top: 30%; right: -5%; width: 30%; height: 30%; border-radius: 50%; background-color: rgba(249, 115, 22, 0.05); filter: blur(100px); }

/* --- TYPOGRAPHY & HEADER --- */
.header-box { display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; }
.title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.subtitle { font-size: 14px; color: #64748b; margin-top: 4px; }
html.dark .subtitle { color: #94A3B8; }

/* --- LOGO BOX --- */
.logo-box { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-pink) 0%, var(--accent-dark-pink) 100%); box-shadow: 0 10px 30px -5px rgba(255, 46, 147, 0.5); transition: all 0.3s ease; }
html.dark .logo-box { box-shadow: 0 0 40px -10px rgba(255, 46, 147, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); }
.logo-box svg { color: white; width: 32px; height: 32px; fill: rgba(255,255,255,0.2); }

/* --- GLASS CARD --- */
.glass-card { background: var(--card-light); border: 1px solid var(--border-light); border-radius: 16px; padding: 32px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; overflow: hidden; transition: all 0.3s ease; backdrop-filter: blur(10px); }
html.dark .glass-card { background: var(--card-dark); border: 1px solid var(--border-dark); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }

/* --- INPUTS ESPECÍFICOS DO LOGIN --- */
.input-code { padding: 0 !important; text-align: center; font-size: 24px; letter-spacing: 0.5em; font-family: monospace; font-weight: 700; }