/* Compact account access. */
body.account-page {
  background: var(--ui-bg);
}

.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 100dvh;
  padding: 40px 20px;
}

.account-entry {
  width: 100%;
  padding: 0;
  gap: 28px;
}

.account-entry > .brand {
  padding: 0;
  font-size: 28px;
}

.account-form-wrap {
  width: min(100%, 400px);
  margin: 0;
  padding: 28px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-surface);
  box-shadow: 0 16px 48px #0002;
}

.account-form-wrap .auth-tabs {
  margin: 0 0 24px;
  padding: 4px;
  border-radius: 8px;
}

.account-form-wrap .auth-tabs button {
  border-radius: 6px;
}

.account-form-wrap .field {
  margin-bottom: 18px;
}

.account-form-wrap .field input {
  height: 48px;
  border-radius: 6px;
}

.account-form-wrap .field p {
  margin-top: 6px;
}

.account-form-wrap .auth-submit {
  justify-content: center;
  min-height: 48px;
  margin-top: 4px;
  border-radius: 6px;
}

.account-form-wrap .form-notice {
  margin-bottom: 18px;
}

.account-form-wrap .account-loading {
  margin-bottom: 0;
}

.account-form-wrap #account-title:not(.sr-only) {
  margin: 0 0 8px;
  font-size: 24px;
}

.account-form-wrap .account-intro {
  margin: 0 0 24px;
  color: var(--ui-muted);
  font-size: 14px;
}

.recovery-back {
  display: block;
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--ui-muted);
}

@media (max-width: 480px) {
  .account-layout { padding: 32px 18px; }
  .account-entry { gap: 24px; }
  .account-form-wrap { padding: 22px; }
}