/* PlayerIQ – login-layout.css */
.login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 380px; padding: 2rem; box-shadow: inset 0 1px 0 var(--surface-hi), var(--shadow-lg); animation: pp-pop .35s cubic-bezier(.2,.8,.3,1.1) both; }
.login-header { text-align: center; margin-bottom: 1.75rem; }
.login-logo-img { width: 140px; height: auto; margin-bottom: .75rem; object-fit: contain; }
@media (max-width: 768px) { .login-logo-img { width: 90px; } }
@media (max-width: 480px) { .login-logo-img { width: 70px; } }
.login-tagline { font-size: .85rem; color: var(--text-muted); margin-top: .35rem; }

/* Team logo on login */
.login-team-logo { max-height: 60px; width: auto; margin-top: .75rem; }

/* Login header refresh */
.login-header   { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
/* Hela märket med tagline — inlinad SVG, bläcket i currentColor (se
   utils.inline_svg). Bredden styr, inte höjden: ordmärket är 3,4 ggr så brett
   som högt och ska stanna innanför kortet. */
.login-logo { display: block; width: min(15rem, 72%); height: auto;
  color: var(--text); }
@media (max-width: 480px) { .login-logo { width: 12rem; } }
.login-team-logo { max-height: 72px; width: auto; margin-top: 0; }