/* Sign-in page. */

.login-page { display: grid; place-items: center; padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom)); }

.login {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
@media (min-width: 600px) {
  .login { padding: 40px 32px 32px; border-radius: var(--shape-xl-inc); background: var(--md-sys-color-surface-container); }
}

.login .field { --field-bg: var(--md-sys-color-surface); }
@media (min-width: 600px) { .login .field { --field-bg: var(--md-sys-color-surface-container); } }

.login-hero { position: relative; width: 96px; height: 96px; margin-bottom: 16px; }
.login-shape { position: absolute; inset: 0; background: var(--md-sys-color-primary-container); }
.login-shape[data-spin] { animation: spin 2.4s linear infinite; }
.login-logo { position: absolute; inset: 20px; width: 56px; height: 56px; image-rendering: pixelated; }

.login-form { width: 100%; display: flex; flex-direction: column; gap: 16px; margin-top: 24px; text-align: start; }
.login-form .btn { margin-top: 8px; }
.login-form .field-error { text-align: center; padding: 0; }