/* Login: substitui o fundo CSS antigo pela camada de imagem, vídeo ou YouTube. */
body.login { position: relative; isolation: isolate; background-image: none; padding: 24px 0; }
.login-background { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 70% 10%, #293849, #18151a 70%); pointer-events: none; z-index: -2; }
/* Mídias locais: cobrem a tela sem distorcer a proporção; cortes laterais são esperados. */
.login-background-media { display: block; width: 100%; height: 100%; object-fit: cover; }
/* YouTube: o iframe mantém proporção 16:9 e cobre o viewport. */
.login-background-youtube { position: absolute; inset: 0; visibility: hidden; }
.login-background-youtube.is-playing { visibility: visible; }
.login-background-youtube iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100vw, 177.778vh); height: max(100vh, 56.25vw); border: 0; }
/* Contraste: sobreposição escura entre o background e o formulário, sem bloquear cliques. */
body.login::before { content: ''; position: fixed; inset: 0; background: linear-gradient(rgba(10,8,14,.45),rgba(10,8,14,.68)); pointer-events: none; z-index: -1; }
body.login .login-card { position: relative; z-index: 1; }
/* Painel Aparência: prévia contida no cartão; os controles podem receber cliques. */
.login-background-preview { position: relative; inset: auto; z-index: 0; width: 100%; aspect-ratio: 16/9; min-height: 200px; border-radius: 10px; margin: 16px 0; pointer-events: auto; }
.login-background-preview .login-background-youtube iframe { width: 100%; height: 100%; }
/* Campos condicionais: exibe somente opções relacionadas ao tipo de fundo selecionado. */
[data-background-form] [hidden] { display: none !important; }