.auth-body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--color-background, #f5f8f9);
  color: var(--color-text, #18323a);
}
.auth-shell { width: min(100% - 36px, 560px); padding: 40px 0; }
.auth-card {
  background: var(--color-surface, #fff);
  border: 1px solid #c9d8de;
  border-radius: 18px;
  padding: clamp(24px, 5vw, 44px);
  box-shadow: 0 18px 48px rgb(6 26 34 / 10%);
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.auth-brand span:last-child { display: grid; }
.auth-brand small { letter-spacing: .12em; }
.auth-status { min-height: 52px; margin: 20px 0; padding: 12px 14px; border-radius: 10px; background: #eaf7f8; }
.auth-status[data-state="error"] { background: #fff0f0; }
.auth-controls { display: flex; justify-content: flex-end; margin-top: 18px; }
.auth-help { margin-top: 24px; font-size: .92rem; }
@media (prefers-color-scheme: dark) {
  .auth-body { background: #061a22; color: #fff; }
  .auth-card { background: #0b2228; border-color: #60727a; }
  .auth-status { background: #13343c; }
  .auth-status[data-state="error"] { background: #4a2024; }
}
@media (max-width: 390px) { .auth-shell { width: min(100% - 28px, 354px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

.auth-signout-floating {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1000;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #60727a;
  border-radius: 10px;
  background: #0b2228;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.auth-signout-floating:focus-visible { outline: 4px solid #00b7c7; outline-offset: 2px; }