:root {
  color-scheme: dark;
  --code-pink: #FF1B4D;
  --code-red: #FF070C;
  --code-blue: #04469B;
  --code-yellow: #FFA11A;
  --code-green: #9AD62E;
  --code-cream: #F1DAAF;
  --code-pink-rgb: 255, 27, 77;
  --code-red-rgb: 255, 7, 12;
  --code-blue-rgb: 4, 70, 155;
  --code-yellow-rgb: 255, 161, 26;
  --code-green-rgb: 154, 214, 46;
  --code-cream-rgb: 241, 218, 175;
  --duo-text-cream: #EFE6D4;
  --duo-text-cream-rgb: 239, 230, 212;
  --duo-green-50: var(--code-green);
  --duo-green-100: var(--code-green);
  --duo-green-300: var(--code-green);
  --duo-green-500: var(--code-green);
  --duo-green-700: var(--code-green);
  --duo-blue-50: var(--code-blue);
  --duo-blue-100: var(--code-blue);
  --duo-blue-300: var(--code-blue);
  --duo-blue-500: var(--code-blue);
  --duo-blue-700: var(--code-blue);
  --duo-amber-50: var(--code-yellow);
  --duo-amber-100: var(--code-yellow);
  --duo-amber-300: var(--code-yellow);
  --duo-amber-500: var(--code-yellow);
  --duo-error-100: var(--code-pink);
  --duo-error-300: var(--code-pink);
  --duo-error-500: var(--code-red);
  --duo-bg-primary: #0B1518;
  --duo-bg-secondary: #101B20;
  --duo-surface-1: #1C2931;
  --duo-surface-2: #2D3F49;
  --duo-text-primary: var(--duo-text-cream);
  --duo-text-secondary: rgba(var(--duo-text-cream-rgb), 0.72);
  --bg: var(--duo-bg-primary);
  --panel: var(--duo-bg-secondary);
  --panel-dark: var(--duo-surface-1);
  --field: var(--duo-bg-primary);
  --line: rgba(166, 176, 183, 0.18);
  --line-strong: rgba(166, 176, 183, 0.28);
  --text: var(--duo-text-primary);
  --text-soft: var(--duo-text-secondary);
  --lime: var(--duo-green-500);
  --orange: var(--duo-amber-500);
  --pink: var(--code-pink);
  --blue: var(--code-blue);
  --error: var(--code-red);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  background:
    linear-gradient(180deg, rgba(var(--code-green-rgb), 0.06), transparent 180px),
    var(--bg);
}

button,
input {
  font: inherit;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.auth-panel {
  width: min(100%, 440px);
  display: grid;
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow:
    inset 0 -4px 0 rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.brand-lockup {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.brand-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--text-soft);
  font-size: 0.62rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: 0;
}

.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel-dark);
  box-shadow:
    inset 0 -4px 0 rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mode-btn,
.submit-btn {
  min-height: 48px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 0.65rem;
}

.mode-btn {
  border: 1px solid var(--line);
  color: var(--text-soft);
  background: rgba(16, 27, 32, 0.98);
  box-shadow:
    inset 0 -4px 0 rgba(11, 21, 24, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mode-btn.is-active {
  color: var(--duo-bg-primary);
  border-color: rgba(var(--code-green-rgb), 0.5);
  background: linear-gradient(90deg, var(--lime), var(--orange));
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.mode-btn:active,
.submit-btn:active {
  transform: translateY(2px);
}

form {
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 8px;
  color: var(--text-soft);
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.field input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: var(--text);
  background: var(--field);
  outline: none;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.field input:focus {
  border-color: rgba(var(--code-green-rgb), 0.68);
  box-shadow:
    0 0 0 3px rgba(var(--code-green-rgb), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.signup-only {
  display: none;
}

.is-signup .signup-only {
  display: grid;
}

.twofactor-only {
  display: none;
}

.is-twofactor .twofactor-only {
  display: grid;
}

.twofactor-setup {
  display: none;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

.is-twofactor-setup .twofactor-setup {
  display: grid;
}

.twofactor-setup p {
  margin: 0;
}

.twofactor-qr-wrap {
  justify-self: center;
  padding: 8px;
  border-radius: 12px;
  background: #f1daaf;
}

.twofactor-qr-wrap.hidden {
  display: none;
}

.twofactor-qr-wrap img {
  display: block;
  width: 164px;
  height: 164px;
}

.twofactor-key-label {
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.twofactor-setup code {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--code-cream);
  overflow-wrap: anywhere;
  letter-spacing: 0.04em;
}

.twofactor-recovery {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(var(--code-green-rgb), 0.24);
  border-radius: 14px;
  background: rgba(var(--code-green-rgb), 0.08);
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

.twofactor-recovery.hidden {
  display: none;
}

.twofactor-recovery p {
  margin: 0;
}

.twofactor-recovery pre {
  margin: 0;
  white-space: pre-wrap;
  color: var(--code-cream);
  letter-spacing: 0.08em;
}

.is-twofactor .signup-only,
.is-twofactor .mode-switch {
  display: none;
}

.invite-only {
  display: none;
}

.is-signup.invite-enabled .invite-only {
  display: grid;
}

.signup-disabled .mode-switch {
  grid-template-columns: 1fr;
}

.signup-disabled #signupModeBtn {
  display: none;
}

.twofactor-reset {
  width: 100%;
}

.twofactor-reset.hidden {
  display: none;
}

.message {
  min-height: 20px;
  margin: 0;
  color: var(--error);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.submit-btn {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--duo-bg-primary);
  background: linear-gradient(90deg, var(--lime), var(--orange));
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.submit-btn:hover {
  filter: brightness(1.03);
}

.submit-btn:disabled {
  cursor: wait;
  opacity: 0.72;
}

.auth-panel::after {
  content: "";
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--duo-blue-300), var(--lime), var(--duo-amber-300), var(--pink));
}

@media (max-width: 520px) {
  .login-shell {
    padding: 16px;
  }

  .auth-panel {
    padding: 22px;
    border-radius: 20px;
  }

  .brand-lockup {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
  }

  .brand-logo {
    width: 72px;
    height: 72px;
  }

  h1 {
    font-size: 1.45rem;
  }

  .mode-btn,
  .submit-btn {
    letter-spacing: 0;
  }
}