/* Auth screens + landing page */

.auth-shell {
  min-height: calc(100vh - 62px);
  display: grid; place-items: center; padding: 40px 20px 70px;
  position: relative; overflow: hidden;
}
.auth-shell::before {
  content: ''; position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
  width: 760px; height: 520px; pointer-events: none;
  background: radial-gradient(closest-side, #7c5cff2e, transparent 72%);
  filter: blur(8px);
}
.auth-card {
  position: relative; width: 100%; max-width: 412px;
  background: linear-gradient(180deg, #ffffff08, transparent 55%), var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); padding: 30px;
  box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 24px; margin-bottom: 6px; }
.auth-sub { color: var(--text-dim); font-size: 14px; margin-bottom: 24px; }
.auth-foot { margin-top: 20px; text-align: center; font-size: 13.5px; color: var(--text-dim); }
.auth-foot a { color: var(--accent); font-weight: 550; }
.auth-foot a:hover { text-decoration: underline; }

.form-err {
  display: none; margin-bottom: 16px;
  padding: 10px 13px; border-radius: var(--radius-sm); font-size: 13.5px;
  border: 1px solid #f8717140; background: #f871711a; color: #ffc7c7;
}
.form-err.on { display: block; }
.form-ok {
  display: none; margin-bottom: 16px;
  padding: 10px 13px; border-radius: var(--radius-sm); font-size: 13.5px;
  border: 1px solid #34d39940; background: #34d3991a; color: #a7f3d0;
}
.form-ok.on { display: block; }

/* live username availability */
.uname-wrap { position: relative; }
.uname-wrap .prefix {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); font-size: 14px; pointer-events: none; font-family: var(--mono);
}
.uname-wrap input { padding-left: var(--prefix-w, 92px); }
.uname-state { margin-top: 7px; font-size: 12.5px; min-height: 17px; display: flex; align-items: center; gap: 6px; }
.uname-state.ok { color: var(--green); }
.uname-state.bad { color: var(--red); }
.uname-state.checking { color: var(--text-faint); }
.spinner {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 2px solid #ffffff26; border-top-color: var(--text-dim);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pw-meter { display: flex; gap: 4px; margin-top: 8px; }
.pw-meter span { height: 3px; flex: 1; border-radius: 99px; background: var(--panel-3); transition: background .2s; }
.pw-meter.s1 span:nth-child(1) { background: var(--red); }
.pw-meter.s2 span:nth-child(-n+2) { background: var(--amber); }
.pw-meter.s3 span:nth-child(-n+3) { background: #a3e635; }
.pw-meter.s4 span { background: var(--green); }

/* account recovery steps */
.recovery-step {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 0; border-top: 1px solid var(--line);
}
.recovery-step:first-of-type { border-top: 0; padding-top: 4px; }
.recovery-num {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; margin-top: 2px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent); font-family: var(--mono); font-size: 13px; font-weight: 700;
}
.recovery-h { font-size: 15.5px; margin-bottom: 5px; letter-spacing: -.01em; }
.recovery-list { margin: 0; padding-left: 20px; }
.recovery-list li {
  font-size: 13.5px; color: var(--text-dim); line-height: 1.6; margin-bottom: 5px;
}
.recovery-list li::marker { color: var(--text-faint); }

/* one-time code entry */
.tf-code {
  font-family: var(--mono); font-size: 22px; letter-spacing: .32em;
  text-align: center; padding: 13px 12px;
}
.tf-code::placeholder { letter-spacing: .32em; opacity: .35; }

/* backup codes handed out after enrolment */
.backup-codes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  padding: 15px; border-radius: var(--radius-sm);
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 14px; letter-spacing: .04em;
}
.backup-codes span { padding: 3px 0; text-align: center; }
.backup-codes span.used { opacity: .35; text-decoration: line-through; }

@media (max-width: 640px) {
  .auth-card { padding: 24px 20px; }
  .auth-shell { padding: 24px 15px 50px; }
}