:root {
  --auth-bg: #0a0e0c;
  --auth-surface: #101612;
  --auth-line: #273129;
  --auth-copy: #aab8ad;
  --auth-green: #72d39a;
  --auth-green-hover: #8de0ad;
}

.authPage,
.accountPage {
  background: var(--auth-bg);
}

.authPage .nav,
.accountPage .nav {
  background: rgba(10, 14, 12, 0.88);
  border-color: var(--auth-line);
  backdrop-filter: blur(16px);
}

.authPage .brand,
.accountPage .brand {
  font-weight: 750;
}

.authPage .authLayout {
  display: grid;
  grid-template-columns: minmax(0, 480px);
  place-content: center;
  min-height: calc(100vh - 73px);
  padding-block: clamp(56px, 9vh, 96px);
}

.authPage main {
  padding-inline: 0;
}

.authSage {
  width: 56px;
  height: auto;
}

.authPage .auth {
  width: 100%;
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid var(--auth-line);
  border-radius: 8px;
  background: rgba(16, 22, 18, 0.94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.authPage .authHeader {
  display: grid;
  gap: 16px;
  margin-bottom: 26px;
}

.authPage h1 {
  margin-bottom: 6px;
  font-size: clamp(28px, 4vw, 34px);
}

.authPage input,
.accountPage input {
  border-color: var(--auth-line);
  background: #0c120e;
}

.authPage input:hover,
.accountPage input:hover {
  border-color: #3a493d;
}

.authPage input:focus,
.accountPage input:focus {
  border-color: var(--auth-green);
  box-shadow: 0 0 0 3px rgba(114, 211, 154, 0.14);
}

.authPage .btn,
.accountPage #auth-panel .btn {
  background: var(--auth-green);
  color: #07110a;
  box-shadow: none;
}

.authPage .btn:hover,
.accountPage #auth-panel .btn:hover {
  background: var(--auth-green-hover);
}

.authPage .btn:active,
.accountPage #auth-panel .btn:active {
  transform: translateY(1px);
}

.authPage .btn.secondary,
.accountPage #auth-panel .btn.secondary,
.accountPage #auth-panel .btn.ghost,
.accountPage #auth-panel .intentOauthActions .btn:not(.recommended) {
  border: 1px solid var(--auth-line);
  background: transparent;
  color: #edf3ee;
}

.authPage .btn.secondary:hover,
.accountPage #auth-panel .btn.secondary:hover,
.accountPage #auth-panel .btn.ghost:hover {
  border-color: #465448;
  background: #151d17;
}

.authPage .recoveryNote {
  border-color: var(--auth-green);
  background: #111b14;
}

.accountPage .layout {
  grid-template-columns: minmax(0, 600px);
}

.accountPage .intro {
  padding-top: 12px;
}

.accountPage .intro h1 {
  margin-bottom: 8px;
  font-size: clamp(32px, 4vw, 40px);
}

.accountPage .intro p {
  max-width: 44ch;
  margin: 0;
  font-size: 16px;
}

.accountPage #auth-panel {
  margin-top: 4px;
  padding: clamp(22px, 4vw, 32px);
  border-color: var(--auth-line);
  background: rgba(16, 22, 18, 0.94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.accountPage #auth-panel label {
  color: #c8d3ca;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
}

.accountPage #auth-panel .intentEmailStatus {
  margin-bottom: 0;
}

.accountPage #auth-panel > .authFallback {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--auth-line);
}

.accountPage #intent-primary.btn.secondary {
  border: 1px solid var(--auth-line);
  background: transparent;
  color: #edf3ee;
}

.accountPage #intent-primary.btn.secondary:hover {
  border-color: #465448;
  background: #151d17;
}

.accountPage.keyRecoveryMode #account-more-options {
  display: none;
}

.accountPage.ossContributorMode .setupPath {
  display: none;
}

.accountPage.ossContributorMode #auth-panel {
  margin-top: 12px;
}

.accountPage.ossContributorMode #oauth-status {
  color: #aebbb0;
}

.accountPage.keyRecoveryMode #auth-panel {
  padding-block: clamp(26px, 4vw, 34px);
}

.accountPage.keyRecoveryMode #account-intent-title {
  font-size: 18px;
}

.accountPage.keyRecoveryMode #account-intent-copy {
  max-width: 46ch;
}

.accountPage.recoveryEmailMode #intent-oauth-actions,
.accountPage.recoveryEmailMode #intent-auth-divider,
.accountPage.recoveryEmailMode #intent-oauth-more,
.accountPage.recoveryOauthMode #intent-email-form,
.accountPage.recoveryOauthMode #intent-email-status,
.accountPage.recoveryOauthMode #intent-auth-divider,
.accountPage.recoveryOauthMode #intent-oauth-more {
  display: none;
}

.accountPage.recoveryEmailMode .intentEmailStart {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.accountPage.recoveryEmailMode .intentEmailStart .btn {
  width: 100%;
  min-height: 48px;
}

@media (max-width: 820px) {
  .authPage .authLayout {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: 42px 72px;
  }

  .authPage .auth {
    width: min(100%, 480px);
    justify-self: center;
  }
}

@media (max-width: 560px) {
  .authPage .authLayout {
    padding-top: 30px;
  }

  .authPage .auth {
    padding: 24px 20px;
  }

  .accountPage main {
    padding-top: 36px;
  }

  .accountPage .intentEmailStart .btn {
    width: 100%;
  }
}