/* Account forms share the navigation's neutral palette and small controls. */
.auth-overlay {
  padding: 24px 16px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.auth-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#authModal .auth-card {
  position: relative;
  max-width: 424px;
  max-height: calc(100dvh - 48px);
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(13, 14, 17, .82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
  scrollbar-width: thin;
  scrollbar-color: #36373c transparent;
}
#authModal .auth-close {
  position: absolute;
  top: 25px;
  right: 23px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #8a8b92;
}
#authModal .auth-close:hover { background: #ffffff06; color: #f0f0f2; }
.auth-intro { text-align: left; }
.auth-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  margin-bottom: 24px;
  color: #eeeef0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.3px;
}
.auth-brand img { width: 22px; height: 26px; object-fit: contain; }
#authModal .auth-title {
  color: #f0f0f2;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 550;
  letter-spacing: -.45px;
}
.auth-switch { margin-top: 7px; color: #8d8e96; font-size: 12px; line-height: 1.6; }
.auth-switch button {
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #d3d3d9;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-switch button:hover { color: white; }
.auth-switch-register, [data-auth-mode="register"] .auth-switch-login { display: none; }
[data-auth-mode="register"] .auth-switch-register { display: block; }
#authModal .auth-body { display: block; padding: 24px 0 0; }
#authModal .auth-form { flex-direction: column; gap: 16px; }
.auth-identity-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
.auth-identity-row > * { min-width: 0; }
#authModal .modal-form-group { gap: 6px; }
#authModal .modal-label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  color: #cbccd1;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
}
#authModal .modal-input {
  height: 43px;
  padding: 10px 12px;
  border: 1px solid #ffffff1a;
  border-radius: 7px;
  background: rgba(0, 0, 0, .16);
  color: #eeeef0;
  font-size: 14px;
  box-shadow: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
#authModal .modal-input::placeholder { color: #62646d; opacity: 1; }
#authModal .modal-input:hover { border-color: #ffffff30; }
#authModal .modal-input:focus { outline: none; border-color: #ffffff59; box-shadow: 0 0 0 2px #ffffff04; }
#authModal .modal-input[aria-invalid="true"] { border-color: #b87581; }
#authModal input:-webkit-autofill { -webkit-text-fill-color: #eeeef0; box-shadow: 0 0 0 1000px #111215 inset; caret-color: white; }
.auth-password-field { position: relative; }
#authModal .auth-password-field .modal-input { padding-right: 42px; }
.auth-password-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #797b84;
}
.auth-password-toggle:hover { color: #dddde3; }
.auth-eye-slash { display: none; }
.auth-password-toggle[aria-pressed="true"] .auth-eye-slash { display: block; }
.auth-input-hint { color: #777982; font-size: 11px; line-height: 1.5; }
.auth-username-hint { margin: 0; }
.auth-password-hint { margin-top: -10px; }
.auth-confirm-error, .auth-form-error { color: #dfa0ac; font-size: 12px; line-height: 1.6; }
.auth-confirm-error { margin-top: -8px; }
.auth-form-error:not([hidden]) { padding: 9px 11px; border: 1px solid #b8758130; border-radius: 7px; background: #b8758108; }
#authModal .auth-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  margin-top: 2px;
  padding: 10px 16px;
  border: 1px solid #eeefef;
  border-radius: 8px;
  background: #eeefef;
  color: #232525;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  box-shadow: none;
  transition: background .15s ease, transform .15s ease;
}
#authModal .auth-submit:hover:not(:disabled) { background: #fff; border-color: #fff; transform: translateY(-1px); }
#authModal .auth-submit:active:not(:disabled) { transform: translateY(0) scale(.995); }
#authModal .auth-submit:disabled { opacity: .65; }
#authModal .auth-submit:disabled::after { content: ""; width: 13px; height: 13px; border: 1.5px solid #23252540; border-top-color: #232525; border-radius: 50%; animation: auth-spin .7s linear infinite; }
.auth-legal { margin-top: -3px; text-align: left; color: #777982; font-size: 10.5px; line-height: 1.7; }
.auth-legal a { color: #a8a9b1; text-decoration: underline; text-underline-offset: 2px; }
.auth-legal a:hover { color: #eeeef0; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (max-width: 540px) {
  .auth-overlay { padding: 16px 12px; }
  #authModal .auth-card { max-height: calc(100dvh - 32px); padding: 24px; }
  #authModal .auth-close { top: 21px; right: 19px; }
  #authModal .modal-input { font-size: 16px; }
}
/* Short, quiet transitions; form controls are available immediately. */
.auth-overlay.active::before { animation: auth-backdrop-in .22s ease-out both; }
.auth-overlay.is-closing::before { animation: auth-backdrop-out .15s ease-in both; }
.auth-overlay.is-closing { pointer-events: none; }
.auth-overlay.active:not(.is-closing) .auth-form > * { animation: auth-field-in .24s ease-out both; }
.auth-overlay.active:not(.is-closing) .auth-form > :nth-child(2) { animation-delay: 20ms; }
.auth-overlay.active:not(.is-closing) .auth-form > :nth-child(3) { animation-delay: 40ms; }
.auth-overlay.active:not(.is-closing) .auth-form > :nth-child(4) { animation-delay: 60ms; }
.auth-overlay.active:not(.is-closing) .auth-form > :nth-child(5) { animation-delay: 80ms; }
.auth-overlay.active:not(.is-closing) .auth-form > :nth-child(n+6) { animation-delay: 100ms; }
.auth-form-error:not([hidden]), .auth-confirm-error:not([hidden]) { animation: auth-message-in .16s ease-out; }
.auth-switch button, .auth-legal a, .auth-password-toggle, #authModal .auth-close { transition: color .15s ease, background .15s ease; }
@keyframes auth-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes auth-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes auth-field-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-message-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #authModal * { transition: none; animation: none !important; }
}
@supports not ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  #authModal .auth-card { background: rgba(13, 14, 17, .96); }
}