body { background: var(--bg-inset); min-height: 100vh; font-family: var(--font-sans); }
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 54px); padding: 16px; }
/* width fixo estourava em telas <=360px (bem comuns) sem nenhuma margem de
   sobra -- max-width com um teto continua com a mesma cara em desktop, mas
   encolhe pra caber com folga em qualquer celular. */
.card { width: 360px; max-width: 100%; border: 1px solid var(--border); box-shadow: none; }
/* No dark (padrão), o logo já tem contraste suficiente direto no card —
   só embrulha numa caixa da cor de destaque no light, onde o logo branco
   precisa de um fundo escuro/colorido pra não sumir no card branco. */
.login-logo-wrap { padding: 10px 18px; border-radius: 8px; display: inline-flex; }
[data-theme="light"] .login-logo-wrap { background: var(--accent); }