/* ============================================================
   Rumah AI — Auth pages (login / register / 2FA)
   ============================================================ */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative;
  background: var(--bg);
}
.auth-page::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px 300px at 15% 0%, rgba(109,94,252,.16), transparent 65%),
    radial-gradient(480px 260px at 90% 90%, rgba(34,211,238,.1), transparent 65%);
}
.auth-card {
  position: relative; width: 100%; max-width: 430px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: var(--shadow-lg); padding: 36px 34px;
  animation: fadeUp .4s ease;
}
.auth-card.wide { max-width: 520px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 28px; text-align: center; }
.auth-brand .brand-mark { width: 52px; height: 52px; border-radius: 15px; }
.auth-brand .brand-mark svg { width: 26px; height: 26px; }
.auth-brand h1 { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.auth-brand p { margin: 0; color: var(--text-3); font-size: 13px; }
.auth-title { text-align: center; margin-bottom: 24px; }
.auth-title h2 { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.auth-title p { margin: 0; color: var(--text-3); font-size: 13px; }
.auth-foot { text-align: center; margin-top: 22px; font-size: 13px; color: var(--text-3); }
.auth-foot a { font-weight: 600; }
.auth-sep { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.tfa-code { display: flex; gap: 8px; justify-content: center; }
.tfa-code input {
  width: 46px; height: 54px; text-align: center; font-size: 21px; font-weight: 700;
  border-radius: 11px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-family: var(--mono);
}
.tfa-code input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.auth-logo-row { display: flex; justify-content: center; gap: 26px; margin-top: 26px; color: var(--text-3); font-size: 12px; font-weight: 700; letter-spacing: .05em; opacity: .7; flex-wrap: wrap; }