.auth-dialog {
  width: min(520px, calc(100vw - 32px));
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 24px;
  padding: 0;
  background: #0b1424;
  color: #e5edf8;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .45);
}
.auth-dialog::backdrop { background: rgba(2, 6, 23, .72); backdrop-filter: blur(6px); }
.auth-shell { padding: 28px; display: grid; gap: 20px; }
.auth-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.auth-head h3 { margin: 4px 0 8px; font-size: 1.45rem; }
.auth-head p { margin: 0; color: #a9b8cc; line-height: 1.5; }
.auth-close { border: 0; background: transparent; color: inherit; font-size: 1.7rem; cursor: pointer; }
.auth-form { display: grid; gap: 14px; }
.auth-field { display: grid; gap: 7px; }
.auth-field label { font-size: .82rem; font-weight: 700; color: #c8d4e4; }
.auth-field input { width: 100%; box-sizing: border-box; border: 1px solid rgba(148, 163, 184, .24); border-radius: 12px; background: #0f1a2c; color: #f8fafc; padding: 12px 14px; font: inherit; }
.auth-field input:focus { outline: 2px solid rgba(96, 165, 250, .5); outline-offset: 1px; }
.auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: #7f90a8; font-size: .78rem; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; background: rgba(148, 163, 184, .18); }
.auth-google { width: 100%; }
.auth-error { margin: 0; border: 1px solid rgba(248, 113, 113, .35); border-radius: 12px; background: rgba(127, 29, 29, .18); color: #fecaca; padding: 10px 12px; font-size: .85rem; }
.auth-mode-toggle { border: 0; background: transparent; color: #93c5fd; cursor: pointer; font: inherit; font-weight: 700; padding: 0; }
.auth-footer { display: flex; justify-content: center; }
.auth-chip { white-space: nowrap; }
#signOutButton { margin-left: 8px; }
html[data-theme="light"] .auth-dialog { background: #ffffff; color: #172033; border-color: #d8e0ea; }
html[data-theme="light"] .auth-head p { color: #5d6b7d; }
html[data-theme="light"] .auth-field label { color: #344054; }
html[data-theme="light"] .auth-field input { background: #f8fafc; color: #172033; border-color: #cfd8e3; }
[hidden] { display: none !important; }
@media (max-width: 720px) { .auth-shell { padding: 22px; } }