/* ═══════════════════════════════════════════════
   tacuens — auth.css
   Auth pages layout only (login, register,
   verify, forgot). All tokens → theme.css
═══════════════════════════════════════════════ */

/* ── Auth wrapper & card ────────────────────── */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--tc-surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--tc-border);
  border-radius: 28px;
  box-shadow: var(--tc-shadow), inset 0 1px 0 rgba(255,255,255,0.9);
  padding: 36px 28px 32px;
  animation: tc-slide-up 0.38s var(--tc-transition-bounce) both;
  position: relative;
}

/* ── Verify / success icon ──────────────────── */
.verify-icon-wrap {
  width: 80px; height: 80px;
  background: rgba(0,212,180,.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  font-size: 36px;
  color: var(--tc-accent);
}
.verify-title {
  font-size: var(--tc-text-2xl);
  font-weight: 900;
  color: var(--tc-text);
  text-align: center;
}
.verify-sub {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tc-muted);
  text-align: center;
  line-height: 1.55;
}
.verify-sub strong { color: var(--tc-text); }

/* ── Steps card (verify email) ──────────────── */
.steps-card {
  background: var(--tc-surface-solid);
  border: 1px solid rgba(255,255,255,0.88);
  border-radius: var(--tc-radius);
  overflow: hidden;
  box-shadow: var(--tc-shadow-sm);
}
.step-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(200,218,232,.28);
}
.step-row:last-child { border-bottom: none; }
.step-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--tc-accent-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}
.step-icon { font-size: 19px; color: var(--tc-muted); }
.step-text  { font-size: 13.5px; font-weight: 700; color: var(--tc-text); }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 380px) {
  .auth-card { padding: 28px 18px 24px; border-radius: 22px; }
}