/* Copiado (só leitura) de Dashboard-Dropshipping/web/src/styles/features/auth.css para manter o visual igual ao fdjm. */
/* --------------------------------------------------------------- login -- */
.login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--bg) url('/static/art/login-bg.webp') center / cover no-repeat;
}
:root[data-theme='light'] .login { background-image: linear-gradient(color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 88%, transparent)), url('/static/art/login-bg.webp'); }
.login-box {
  width: 100%; max-width: 390px; text-align: center; padding: 32px 30px 30px;
  background: var(--glass); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--border-strong); border-radius: 22px; box-shadow: var(--shadow-pop);
}
.login-box img { width: 54px; height: 54px; border-radius: 14px; }
.login-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-top: 14px; }
.login-sub { font-size: 12.5px; color: var(--text-muted); margin-bottom: 22px; }
.login-box form { display: flex; flex-direction: column; gap: 9px; text-align: left; }
.input {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 11px; font-size: 13.5px;
  color: var(--text); width: 100%;
}
.input:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 1px; border-color: var(--brand); }
.login-box .btn { justify-content: center; text-align: center; padding: 9px 12px; }

.alert {
  border-radius: var(--radius-sm); padding: 9px 11px;
  font-size: 12.5px; border: 1px solid;
}
.alert-error { background: var(--alert-error-bg); border-color: var(--alert-error-line); color: var(--alert-error-fg); }
.alert-warn { background: var(--alert-warn-bg); border-color: var(--alert-warn-line); color: var(--alert-warn-fg); }

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius);
}
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }