:root {
  color-scheme: dark;
  --canvas: #141e21;
  --surface: #ffffff;
  --ink: #171918;
  --muted: #68716e;
  --line: #dfe4e2;
  --green: #5aa7ff;
  --green-dark: #245f9b;
  --green-soft: #edf5ff;
  --focus: #5aa7ff;
  --amber-soft: #f7f8f7;
  --red: #a63b35;
  --red-soft: #fff1ef;
}

html,
body {
  background: var(--canvas);
}

.login-shell {
  min-height: 100vh;
  padding: 48px 20px;
  background:
    radial-gradient(circle at 50% -20%, rgba(90, 167, 255, .12), transparent 38%),
    var(--canvas);
}

.login-panel {
  width: min(100%, 440px);
  padding: 36px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .3);
}

.join-panel {
  width: min(100%, 600px);
}

.brand-mark {
  width: 44px;
  height: 44px;
  margin-bottom: 28px;
}

.eyebrow {
  margin-bottom: 10px;
  color: #55706f;
  font-size: 11px;
  letter-spacing: .1em;
}

.login-panel h1 {
  margin-bottom: 14px;
  color: var(--ink);
  font-size: clamp(28px, 5vw, 36px);
  letter-spacing: -.035em;
}

.muted,
.field-hint,
.security-note {
  color: var(--muted);
}

.invite-summary {
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-color: var(--line);
  line-height: 1.65;
}

.invite-summary strong {
  color: var(--ink);
}

.form-stack {
  gap: 18px;
}

label,
legend {
  color: #333b39;
  font-size: 13px;
}

input,
select {
  height: 48px;
  border: 1px solid #c9d0cd;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

input:focus,
select:focus {
  border-color: var(--focus);
  outline: 3px solid rgba(90, 167, 255, .16);
}

fieldset {
  padding: 15px;
  border-color: var(--line);
  border-radius: 10px;
  background: #fafbfa;
}

.mfa-choice label {
  min-height: 34px;
  align-items: center;
  padding: 5px 0;
}

.mfa-choice input {
  accent-color: var(--green-dark);
}

.button {
  min-height: 48px;
  border-radius: 8px;
}

.button-primary {
  border-color: #172227;
  background: #172227;
  color: #fff;
}

.button-primary:hover {
  background: #25353b;
}

.button-secondary {
  border-color: #bfc8c5;
  background: #fff;
  color: #233b4f;
}

.totp-setup {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7f8f7;
}

.totp-setup p:not(.eyebrow) {
  color: #59615e;
}

.totp-setup img {
  border-color: #d5dcda;
  border-radius: 10px;
  background: #fff;
}

.totp-setup code {
  border-color: #d5dcda;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
}

.alert {
  border-radius: 9px;
}

.alert-error {
  border-color: #edc1bc;
  background: var(--red-soft);
  color: var(--red);
}

.security-note {
  margin-top: 24px;
  border-color: var(--line);
  font-size: 12px;
}

@media (max-width: 560px) {
  .login-shell {
    padding: 18px 12px;
  }

  .login-panel {
    padding: 27px 22px;
    border-radius: 14px;
  }
}