/* ── AUTH LAYOUT (login / register) — card căn giữa, dải màu trên đầu ── */
.auth-wrap {
  min-height: calc(100vh - var(--nav-h));
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); padding: 48px 16px;
}

.auth-card {
  width: 100%; max-width: 460px;
  background: var(--bg-alt); border: 1px solid var(--border-soft);
  border-top: 5px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 40px;
}

.auth-logo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--ink); margin-bottom: 28px;
}
.auth-logo span { color: var(--accent); }

.auth-form-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 4px; text-align: center; }
.auth-form-sub { font-size: 14px; color: var(--ink-3); margin-bottom: 28px; text-align: center; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.social-login { display: flex; gap: 10px; margin-bottom: 24px; }
.social-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer;
  background: var(--bg-alt); transition: var(--t);
}
.social-btn:hover { border-color: var(--ink); background: var(--surface); }

@media (max-width: 480px) { .auth-card { padding: 28px 20px; } }

/* ── QUÊN MẬT KHẨU / ĐẶT LẠI MẬT KHẨU ───── */
.forgot-wrap { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; justify-content: center; padding: 48px 16px; background: var(--surface); }
.forgot-card {
  width: 100%; max-width: 440px;
  background: var(--bg-alt); border: 1px solid var(--border-soft);
  border-top: 5px solid var(--accent);
  border-radius: var(--r-lg); padding: 40px; box-shadow: var(--shadow-md);
}
.step-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 28px; }
.step-dot-item { width: 8px; height: 8px; border-radius: 99px; background: var(--border); transition: all .3s var(--ease-out); }
.step-dot-item.active { width: 24px; background: var(--accent); }
.otp-inputs { display: flex; gap: 8px; }
.otp-input { flex: 1; height: 52px; text-align: center; font-size: 22px; font-weight: 700; font-family: var(--font-display); border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--bg-alt); color: var(--ink); transition: var(--t); }
.otp-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.1); outline: none; }