/* ============================
   CORE LAYOUT & RESET
   ============================ */
/* Montserrat is loaded once from auth.html. */

:root {
  --bg: #0a0f1a;
  --text: #F6FAFF;
  --muted: #C7D0DC;
  --primary: #64E9EE;
  --primary-ink: #03151A;
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

html.tm-home {
  margin: 0;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  background: #02040a;
  overflow: hidden;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
  text-decoration: none;
}

.brand__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.brand__name {
  font-weight: 800;
  letter-spacing: 0.24px;
  white-space: nowrap;
  font-size: 1.3rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 700;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  transition:
    transform 0.2s ease,
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-1px);
    color: var(--primary);
  }
}

#tm_loader_overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 28%, rgba(100, 233, 238, 0.12), transparent 34%),
    rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: all;
}

#tm_loader_overlay.show {
  display: flex;
}

#tm_loader_overlay .loader-spinner {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: #64E9EE;
  border-right-color: rgba(100,233,238,0.55);
  box-shadow:
    0 0 0 1px rgba(100,233,238,0.10),
    0 0 28px rgba(100,233,238,0.22);
  animation: tm-loader-spin 0.82s linear infinite;
}

#tm_loader_overlay .loader-copy {
  display: grid;
  gap: 4px;
  text-align: center;
}

#tm_loader_overlay .loader-copy h3 {
  margin: 0;
  color: #F6FAFF;
  font-size: 1rem;
  font-weight: 800;
}

#tm_loader_overlay .loader-copy p {
  margin: 0;
  color: rgba(199,208,220,0.86);
  font-size: 0.88rem;
  font-weight: 600;
}

@keyframes tm-loader-spin {
  to { transform: rotate(360deg); }
}

*, *::before, *::after {
  box-sizing: border-box;
}

body.tm-dark {
  margin: 0;
  padding: 0;
  background: #02040a;
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  color: #fff;
  position: relative;
}

#tm-bg-canvas { 
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; 
}

.split-layout { 
  display: flex; 
  width: 100%; 
  height: 100vh;
  height: 100dvh;
  min-height: 100vh; 
  min-height: 100dvh;
  position: relative; 
  z-index: 1; 
  align-items: center; 
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}


/* ============================
   THE UNIFIED CARD
   ============================ */
.unified-card {
  display: flex;
  width: 100%;
  max-width: 1100px;
  min-height: 720px; /* Default height for desktop */
  
  background: rgba(13, 20, 35, 0.85);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(100, 233, 238, 0.3);
  border-radius: 40px;
  box-shadow: 0 0 40px rgba(100, 233, 238, 0.15);
  animation: cardEntrance 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  position: relative;
  overflow: hidden; 
  opacity: 0; 
  transform: scale(0.95);
}

@keyframes cardEntrance { to { opacity: 1; transform: scale(1); } }

.unified-card::after {
  content: ''; position: absolute; left: 50%; top: 10%; bottom: 10%; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.1), transparent);
}

/* ============================
   LEFT SIDE (VISUAL / CHAT UI)
   ============================ */
.auth-visual-side {
  width: 50%; flex: 0 0 50%;
  position: relative; 
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  perspective: 1000px;
  opacity: 0; animation: slideInLeft 1s ease-out 0.2s forwards;
}

.chat-interface-wrapper { 
  position: relative; z-index: 10; width: 340px; height: 600px; 
  transition: transform 0.3s ease-out; margin: 0 auto; 
}

.chat-phone-body { 
  width: 100%; height: 100%; 
  background: rgba(0, 0, 0, 0.4); 
  border: 1px solid rgba(255,255,255,0.1); 
  border-radius: 40px; 
  box-shadow: 0 20px 50px rgba(0,0,0,0.5); 
  display: flex; flex-direction: column; overflow: hidden; position: relative; 
}

/* Chat Elements */
.chat-header-ui { padding: 18px 25px; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; gap: 15px; background: rgba(255,255,255,0.02); }
.chat-avatar { width: 38px; height: 38px; border-radius: 50%; background: #222; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(100,233,238,0.3); }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.online-dot { width: 10px; height: 10px; background: #10b981; border-radius: 50%; position: absolute; bottom: 0; right: 0; border: 2px solid #0a0f19; }
.chat-info { display: flex; flex-direction: column; text-align: left; }
.chat-name { font-weight: 700; font-size: 0.95rem; color: #fff; }
.chat-status { font-size: 0.75rem; color: #64E9EE; font-weight: 500; }
.chat-messages-area { flex: 1; padding: 25px; display: flex; flex-direction: column; gap: 15px; justify-content: flex-end; position: relative; }
.chat-bubble { max-width: 85%; padding: 12px 18px; border-radius: 18px; font-size: 0.85rem; line-height: 1.4; opacity: 0; transform: translateY(10px); animation: msgPopIn 0.4s forwards; }
@keyframes msgPopIn { to { opacity: 1; transform: translateY(0); } }
.chat-bubble.received { align-self: flex-start; background: rgba(255,255,255,0.08); color: #e2e8f0; border: 1px solid rgba(100,233,238,0.1); }
.chat-bubble.sent { align-self: flex-end; background: linear-gradient(135deg, #64E9EE 0%, #29a3ff 100%); color: #000; font-weight: 600; box-shadow: 0 5px 15px rgba(100,233,238,0.2); }
.floating-badge { position: absolute; padding: 10px 20px; border-radius: 50px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(10px); font-weight: 700; font-size: 0.8rem; box-shadow: 0 10px 30px rgba(0,0,0,0.5); animation: floatBadge 4s ease-in-out infinite; }
.badge-1 { top: 15%; left: -20px; color: #ff4757; }
.badge-2 { bottom: 20%; right: -25px; color: #2ed573; animation-delay: 2s; }
@keyframes floatBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ============================
   RIGHT SIDE (FORM)
   ============================ */
.auth-form-side { 
  width: 50%; flex: 0 0 50%; 
  display: flex; flex-direction: column; align-items: center; justify-content: center; 
  position: relative; background: transparent; padding: 26px 40px 46px;
  gap: 12px;
  min-height: 0;
}
.mobile-header { display: none; margin-bottom: 25px; }

/* Flip Card */
.flip-wrapper {
  perspective: 2000px;
  width: 100%;
  max-width: 400px;
  height: 540px;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  margin-bottom: 8px;
}
.flip-card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.flip-card.flipped { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: transparent; border: none; box-shadow: none; padding: 10px; display: flex; flex-direction: column; justify-content: center; }
.card-face.front { transform: rotateY(0deg); z-index: 10; }
.card-face.back { transform: rotateY(180deg); z-index: 1; }
.flip-card.flipped .card-face.front { z-index: 1; pointer-events: none; }
.flip-card.flipped .card-face.back { z-index: 10; pointer-events: auto; }

/* Animations & Form Elements */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

.face-content > * { opacity: 0; animation: fadeInUp 0.6s ease-out forwards; }
.face-content .auth-header { animation-delay: 0.3s; }
.face-content form { animation-delay: 0.4s; }
.face-content .switch-area { animation-delay: 0.6s; }

.auth-header { text-align: center; margin-bottom: 25px; }

.auth-eyebrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(100, 233, 238, 0.28);
  background: rgba(100, 233, 238, 0.08);
  color: #64E9EE;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-header h1 { font-size: 2.2rem; margin: 0 0 5px; color: #fff; font-weight: 800; }
.auth-header p { color: #94a3b8; font-size: 1rem; max-width: 320px; margin: 0 auto; }

.auth-note{
  margin-top: -4px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.68);
  text-align: center;
}

form { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.input-group {
  position: relative;
  width: 100%;
}

.password-field {
  position: relative;
  width: 100%;
}

.input-group input {
  width: 100%;
  padding: 15px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(100, 233, 238, 0.2);
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
}
.input-group label { position: absolute; left: 16px; top: 25px; transform: translateY(-50%); color: #94a3b8; font-size: 0.9rem; pointer-events: none; transition: 0.3s; padding: 0 4px; background: transparent; }
.input-group input:focus + label, .input-group input:not(:placeholder-shown) + label { top: 0; font-size: 0.75rem; color: #64E9EE; background: #0b1120; font-weight: 700; }

.btn-primary {
  width: 100%;
  padding: 15px;
  border-radius: 50px;
  border: none;
  background: #64E9EE;
  color: #000;
  font-weight: 800;
  font-size: 1.1rem;
  cursor: pointer;
  margin-top: 10px;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-2px);
    background:
      linear-gradient(
        135deg,
        rgba(100,233,238,.98),
        rgba(41,163,255,.9)
      );
    color: var(--primary-ink);
  }
}

/* ============================
   PASSWORD TOGGLE ICON
   ============================ */
.password-toggle {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);

  width: 44px;
  height: 44px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  border-radius: 12px;

  color: #94a3b8;
  cursor: pointer;
  z-index: 20;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  transition:
    color 0.18s ease,
    background 0.18s ease;
}

.password-toggle:hover,
.password-toggle:active {
  color: #64E9EE;
  background: rgba(100, 233, 238, 0.08);
}

.password-toggle svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/*
  Use only the app's custom password toggle.
  Hide the browser-native password reveal/clear controls.
*/
.password-field input::-ms-reveal,
.password-field input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.password-field input[type="password"] {
  appearance: none;
  -webkit-appearance: none;
}

/* Para hindi pumatong yung text sa icon kapag mahaba ang tinype */
.input-group input[type="password"],
.input-group input[type="text"].is-password {
  padding-right: 45px !important;
}

.password-strength-hint {
  margin: 8px 2px 0;
  min-height: 18px;
  color: rgba(255,255,255,0.58);
  font-size: 0.74rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.password-strength-hint.is-weak {
  color: #ff6b7a;
}

.password-strength-hint.is-fair {
  color: #feca57;
}

.password-strength-hint.is-good {
  color: #64E9EE;
}

.password-strength-hint.is-strong {
  color: #2ed573;
}

/* ============================
   BUTTON LOADING (INLINE SPINNER)
   Used by auth + preferences submit buttons
   ============================ */
.btn-primary.tm-btn--loading { cursor: wait; opacity: 0.95; }
.btn-primary.tm-btn--loading .tm-btn__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-primary.tm-btn--loading .tm-btn__spinner {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: rgba(0, 0, 0, 0.85);
  animation: tm-spin 0.8s linear infinite;
}
@keyframes tm-spin { to { transform: rotate(360deg); } }
.actions-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: #94a3b8; }
.forgot-link { color: #64E9EE; text-decoration: none; font-weight: 600; }
.divider { text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); line-height: 0.1em; margin: 15px 0; }
.divider span { background: #0b1120; padding: 0 15px; color: #64748b; font-size: 0.8rem; }
.btn-oauth { width: 100%; padding: 12px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.15); background: #fff; color: #000; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.btn-oauth img { width: 20px; }

.switch-area { margin-top: 25px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.05); text-align: center; }
.switch-area p { display: inline; color: #94a3b8; margin-right: 8px; font-size: 0.95rem; }
.btn-switch { background: none; border: none; padding: 0; color: #64E9EE; font-weight: 800; cursor: pointer; }
.btn-switch:hover { color: #ffffff; }
.simple-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  flex: 0 0 auto;
  margin-top: 0;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
  z-index: 12;
}

/* keep the signup switch text cleanly separated from the footer on desktop */
@media screen and (min-width: 1025px) {
  .card-face.back .switch-area {
    margin-top: 12px;
    padding-top: 10px;
    position: static;
    top: auto;
  }

  .card-face.back .auth-header {
    margin-bottom: 18px;
  }

  .card-face.back form {
    gap: 14px;
  }
}


/* ============================
   MODAL STYLES
   ============================ */
dialog {
  background: #0f172a; border: 1px solid #64E9EE; color: #fff; border-radius: 20px; padding: 30px; width: 90%; max-width: 420px; box-shadow: 0 20px 50px rgba(0,0,0,0.7); margin: auto; opacity: 0; transform: scale(0.9) translateY(20px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
dialog[open] { opacity: 1; transform: scale(1) translateY(0); animation: neonPulse 3s infinite ease-in-out; }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.3s ease; }

.close-icon-btn { position: absolute; top: 15px; right: 15px; background: none; border: none; color: #64748b; cursor: pointer; padding: 5px; }
.code-input { width: 100%; background: #02040a; color: #fff; border: 1px solid #334155; border-radius: 12px; font-family: 'Montserrat', sans-serif; font-weight: 600; transition: all 0.3s; padding: 12px; font-size: 1.8rem; text-align: center; letter-spacing: 8px; margin: 15px 0; }
.code-input:focus { border-color: #64E9EE; box-shadow: 0 0 15px rgba(100, 233, 238, 0.3); outline: none; }
.modal-actions { display: flex; gap: 10px; margin-top: 25px; }
.btn-ghost { background: transparent; border: 1px solid #334155; color: #fff; padding: 12px 20px; border-radius: 50px; cursor: pointer; font-weight: 600; flex: 1; }
.verify-msg{ margin-top: 10px; font-size: 13px; line-height: 1.35; min-height: 18px; text-align: center; }
.verify-msg.is-ok{ color: #64E9EE; }
.verify-msg.is-error{ color: #ff4757; }

/* Split Modal (Forgot Password) */
dialog.split-modal {
  max-width: 720px;
  padding: 0;
  overflow: hidden;
}

.split-modal-layout {
  display: flex;
  width: 100%;
  min-height: 410px;
}

.modal-left-visual {
  width: 38%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  background:
    radial-gradient(circle at 35% 22%, rgba(100,233,238,0.14), transparent 34%),
    radial-gradient(circle at 80% 88%, rgba(41,163,255,0.14), transparent 38%),
    linear-gradient(145deg, rgba(15,23,42,0.98), rgba(22,33,53,0.98));
  border-right: 1px solid rgba(255,255,255,0.06);
}

.modal-right-form {
  width: 62%;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Forgot modal: make "code-input" behave like normal inputs when used with .full-text */
.code-input.full-text{ font-size: 1rem; letter-spacing: 0.2px; text-align: left; margin: 10px 0; padding: 14px 14px 14px 46px; }
.code-input.full-text::placeholder{ letter-spacing: 0.4px; color: rgba(255,255,255,0.55); }
.code-input.otp-field{ text-align: center; letter-spacing: 6px; padding-left: 14px; }

.modal__body.align-left{ text-align: left; }

.modal-input-wrapper{ position: relative; }
.modal-input-wrapper.with-icon .input-icon{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: 0.85; color: rgba(255,255,255,0.75); pointer-events: none; }

.column-actions{ display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.btn-text-only{ background: transparent; border: none; color: rgba(255,255,255,0.75); font-weight: 700; cursor: pointer; padding: 10px 6px; border-radius: 10px; }
.btn-text-only:hover{ color: #fff; }
.btn-text-only:disabled{ opacity: 0.5; cursor: not-allowed; }

.error-text{ margin-top: 8px; font-size: 0.85rem; color: #ff4757; white-space: pre-line; }

.forgot-hint{margin-top: 10px; font-size: 0.85rem; color: rgba(255,255,255,0.7);white-space: pre-line; }

.illustration-float {
  position: relative;
  z-index: 2;
  width: min(190px, 86%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  color: #fff;
}

.illustration-float svg {
  width: 92px;
  height: 92px;
  filter:
    drop-shadow(0 0 14px rgba(100,233,238,0.20))
    drop-shadow(0 18px 26px rgba(0,0,0,0.34));
}

.illustration-float .visual-text {
  display: grid;
  gap: 8px;
}

.illustration-float .visual-text h4 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.96);
}

.illustration-float .visual-text p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
}

.decor-circle {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.72;
  filter: blur(0.2px);
}

.decor-circle.c1 {
  width: 130px;
  height: 130px;
  left: -48px;
  top: 36px;
  background: radial-gradient(circle, rgba(100,233,238,0.16), transparent 68%);
}

.decor-circle.c2 {
  width: 150px;
  height: 150px;
  right: -72px;
  bottom: -42px;
  background: radial-gradient(circle, rgba(41,163,255,0.18), transparent 70%);
}

@keyframes neonPulse {
  0%, 100% { box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 0px rgba(100, 233, 238, 0); border-color: rgba(100, 233, 238, 0.4); }
  50% { box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 20px rgba(100, 233, 238, 0.2); border-color: rgba(100, 233, 238, 1); }
}

/* ===========================
   Inline button loading spinner
   =========================== */
.btn-primary,
button.btn-primary,
button.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tm-btn-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.tm-btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: rgba(0, 0, 0, 0.92);
  border-radius: 999px;
  display: none !important;
  animation: tm-btn-spin 0.72s linear infinite;
  flex: 0 0 auto;
}

button.is-loading .tm-btn-spinner,
.is-loading .tm-btn-spinner {
  display: inline-block !important;
}

.btn-primary.is-loading,
.btn-primary.tm-btn--loading {
  cursor: wait;
  opacity: 0.96;
  pointer-events: none;
}

.btn-text-only.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: wait;
  opacity: 0.82;
}

.btn-text-only .tm-btn-spinner {
  width: 14px;
  height: 14px;
  border-color: rgba(255, 255, 255, 0.24);
  border-top-color: #64E9EE;
}

dialog.split-modal {
  position: relative;
}

dialog.split-modal.is-forgot-busy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 42%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #64E9EE, rgba(41,163,255,0.9), transparent);
  box-shadow: 0 0 18px rgba(100,233,238,0.45);
  z-index: 20;
  animation: tm-forgot-loading-bar 1s ease-in-out infinite;
}

@keyframes tm-btn-spin {
  to { transform: rotate(360deg); }
}

@keyframes tm-forgot-loading-bar {
  0% { transform: translateX(-115%); opacity: 0.45; }
  45% { opacity: 1; }
  100% { transform: translateX(265%); opacity: 0.45; }
}


/* --- Legal (Terms / Privacy) Modal --- */
dialog.modal--legal {
  max-width: 920px;
  width: min(920px, calc(100% - 28px));
  padding: 0;
}
dialog.modal--legal .modal__body--legal {
  position: relative;
  padding: 26px 28px 20px;
}
dialog.modal--legal #legalTitle {
  margin: 10px 0 10px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}
dialog.modal--legal .legal-content {
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 14px;
  line-height: 1.55;
}
dialog.modal--legal .legal-content h4 {
  margin: 16px 0 8px;
  font-size: 0.98rem;
  font-weight: 800;
}
dialog.modal--legal .legal-content p,
dialog.modal--legal .legal-content li {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.86);
}
dialog.modal--legal .legal-content ul {
  margin: 8px 0 8px 18px;
}
dialog.modal--legal .legal-close-btn {
  margin-top: 16px;
  width: 100%;
}

/* Make legal links clean + clickable */
.terms-micro .legal-link {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #64E9EE;
}
.terms-micro .legal-link:hover { opacity: 0.9; }
/* =========================================
   PREMIUM SWEETALERT2 THEME (iTRUEMATCH)
   ========================================= */

/* Main Popup Box */
div:where(.swal2-container) div:where(.swal2-popup) {
  background: rgba(13, 20, 35, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(100, 233, 238, 0.3) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 20px rgba(100, 233, 238, 0.1) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Title */
div:where(.swal2-container) h2:where(.swal2-title) {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.5px !important;
}

/* Text / Subtitle */
div:where(.swal2-container) div:where(.swal2-html-container) {
  color: #94a3b8 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* Primary Button (Confirm) */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  background: #64E9EE !important;
  color: #000 !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  padding: 12px 32px !important;
  box-shadow: 0 5px 15px rgba(100, 233, 238, 0.2) !important;
  transition: all 0.3s ease !important;
  font-family: 'Montserrat', sans-serif !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:hover {
  background: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(100, 233, 238, 0.4) !important;
}

/* Cancel Button */
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  padding: 12px 32px !important;
  font-family: 'Montserrat', sans-serif !important;
  transition: all 0.3s ease !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #fff !important;
}

/* --- ICONS CUSTOMIZATION --- */

/* Success Icon (Neon Green) */
div:where(.swal2-icon).swal2-success {
  border-color: #00ff88 !important;
  color: #00ff88 !important;
}
div:where(.swal2-icon).swal2-success [class^=swal2-success-line] {
  background-color: #00ff88 !important;
}
div:where(.swal2-icon).swal2-success .swal2-success-ring {
  border-color: rgba(0, 255, 136, 0.3) !important;
}

/* Error Icon (Neon Red/Pink) */
div:where(.swal2-icon).swal2-error {
  border-color: #ff4757 !important;
  color: #ff4757 !important;
}
div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] {
  background-color: #ff4757 !important;
}

/* Warning Icon (Neon Yellow) */
div:where(.swal2-icon).swal2-warning {
  border-color: #feca57 !important;
  color: #feca57 !important;
}

/* Fix Focus Outlines */
div:where(.swal2-container) button:where(.swal2-styled):focus {
  box-shadow: 0 0 0 3px rgba(100, 233, 238, 0.5) !important;
}
@media (max-width: 768px){
  .auth-header h1{
    font-size: 1.9rem;
  }

  .auth-header p{
    max-width: 100%;
    font-size: 0.95rem;
  }

  .auth-note{
    font-size: 0.8rem;
  }
}
/* =========================================================================
   iTM UNIFIED AUTH SKIN (Landing Page = Source of Truth)
   Append-only overrides. auth.js stays untouched.
   ========================================================================= */

body.tm-dark{
  background: transparent;
  color: var(--text);
}

/* match style.css canvas contract */
#tm-bg-canvas{
  opacity: .95;
  transform: translateZ(0);
}

/* auth header now uses landing header classes */
.auth-site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  pointer-events: none;
  display: block;
}

.auth-site-header .nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 1rem 2.25rem;
  pointer-events: auto;
}

.auth-site-header .brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.auth-site-header .brand__logo{
  flex: 0 0 auto;
}

.auth-site-header .brand__name{
  white-space: nowrap;
}

.auth-nav-actions{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.auth-nav-actions .auth-exit-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  gap: 10px;
  white-space: nowrap;
}

.auth-nav-actions .auth-exit-btn svg{
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
  flex: 0 0 auto;
}

.auth-nav-actions .auth-exit-btn:hover{
  border-color: rgba(100,233,238,.55);
  background: rgba(100,233,238,0.10);
  color: var(--primary);
}

/* keep the auth card centered against the real viewport */
.split-layout{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(74px, 8vh, 88px) 20px clamp(18px, 3vh, 28px);
  overflow: hidden;
}

@media screen and (max-height: 700px) and (min-width: 601px) {
  .split-layout{
    padding: 82px 18px 18px;
  }
}

@media screen and (max-width: 1024px) and (min-width: 601px) {
  .split-layout{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 118px 20px 64px;
    overflow: hidden;
  }
}

/* landing-style glass panel */
.unified-card{
  background: rgba(255,255,255,0.035);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 28px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 30px rgba(100,233,238,0.12),
    inset 0 0 14px rgba(100,233,238,0.04);
  max-height: calc(100dvh - 132px);
}

.unified-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 260px at 15% 20%, rgba(100,233,238,0.10), transparent 55%),
    radial-gradient(520px 240px at 85% 80%, rgba(41,163,255,0.10), transparent 58%);
  pointer-events:none;
  z-index:0;
}
.unified-card::after{
  z-index:0;
  opacity: .9;
}
.unified-card > *{
  position: relative;
  z-index: 1;
}

/* keep left visual premium but aligned */
.chat-phone-body{
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.10);
}
.floating-badge{
  background: rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.14);
}

/* typography tone */
.auth-header p{
  color: var(--muted);
}

/* inputs: land in the same “glass + neon focus” family */
.input-group input{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
}
.input-group input:focus{
  outline:none;
  border-color: rgba(100,233,238,0.65);
  box-shadow: 0 0 0 3px rgba(100,233,238,0.12);
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label{
  background: rgba(0,0,0,0.75);
  border-radius: 8px;
  padding: 2px 6px;
}

/* divider chip */
.divider span{
  background: rgba(0,0,0,0.55);
}

/* primary buttons: match landing CTA */
.btn-primary{
  background: linear-gradient(135deg, rgba(100,233,238,.95), rgba(41,163,255,.85));
  color: var(--primary-ink);
  border: none;
}
.btn.primary.btn-primary{
  width: 100%;
  padding: 14px 24px;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.35),
    0 10px 25px rgba(100,233,238,0.18);
}
.btn.primary.btn-primary:hover{
  background: linear-gradient(135deg, rgba(100,233,238,.98), rgba(41,163,255,.9));
  color: var(--primary-ink);
  filter: brightness(1.05);
  box-shadow:
    0 22px 55px rgba(0,0,0,0.45),
    0 14px 35px rgba(100,233,238,0.26);
}
/* ghost buttons (auth uses btn--ghost in verify modal) */
.btn--ghost,
.btn-ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--text);
}
.btn--ghost:hover,
.btn-ghost:hover{
  border-color: rgba(100,233,238,0.55);
  color: var(--primary);
}

/* switches / links */
.btn-switch{ color: var(--primary); }
.btn-switch:hover{ color: #fff; }

/* footer calmer */
.simple-footer{
  color: rgba(255,255,255,0.32);
}

/* laptop / compact desktop auth containment */
@media screen and (min-width: 1025px) and (max-width: 1366px) and (min-height: 651px) {
  .unified-card{
    max-width: min(1000px, calc(100vw - 80px));
    min-height: 0;
    height: min(660px, calc(100dvh - 118px));
  }

  .chat-interface-wrapper{
    width: 320px;
    height: 540px;
    transform: scale(0.86);
  }

  .flip-wrapper{
    height: 500px;
  }

  .auth-header{
    margin-bottom: 18px;
  }

  form{
    gap: 14px;
  }

  .divider{
    margin: 12px 0;
  }

  .switch-area{
    margin-top: 16px;
    padding-top: 12px;
  }

  .simple-footer{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    margin-top: 0;
    font-size: 0.66rem;
    line-height: 1.15;
    text-align: center;
  }
}

/* compact laptop / short-height auth containment */
@media screen and (min-width: 1025px) and (max-height: 650px) {
  .auth-site-header{
    padding-top: 6px;
  }

  .auth-site-header .nav{
    padding: 0.7rem 2rem;
  }

  .unified-card{
    max-width: min(890px, calc(100vw - 88px));
    min-height: 0;
    height: min(486px, calc(100dvh - 112px));
  }

  .chat-interface-wrapper{
    width: 280px;
    height: 470px;
    transform: scale(0.74);
  }

  .auth-form-side{
    padding: 18px 36px 36px;
  }

  .flip-wrapper{
    height: 430px;
  }

  .auth-header{
    margin-bottom: 10px;
  }

  .auth-eyebrow{
    margin-bottom: 6px;
    padding: 5px 10px;
    font-size: 0.66rem;
  }

  .auth-header h1{
    font-size: 1.58rem;
    line-height: 1.08;
  }

  .auth-header p{
    font-size: 0.82rem;
    line-height: 1.36;
  }

  form{
    gap: 9px;
  }

  .input-group input{
    padding: 10px 14px;
    font-size: 0.9rem;
  }

  .input-group label{
    top: 20px;
  }

  .btn.primary.btn-primary,
  .btn-primary{
    padding: 10px 14px;
    margin-top: 4px;
    font-size: 0.92rem;
  }

  .divider{
    margin: 9px 0;
  }

  .switch-area{
    margin-top: 10px;
    padding-top: 9px;
  }

  .switch-area p{
    font-size: 0.84rem;
  }

  .simple-footer{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    margin-top: 0;
    font-size: 0.66rem;
    line-height: 1.1;
    text-align: center;
  }
}

/* tablet auth position: 1024x1366 down to 768x1024 */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .auth-site-header {
    display: block;
    z-index: 1200;
  }

  .auth-site-header .nav {
    padding: 14px 22px;
  }

  .auth-site-header .brand {
    display: inline-flex;
  }

  .auth-nav-actions {
    display: inline-flex;
  }

  .auth-visual-side {
    display: none;
  }

  .split-layout {
    padding: 96px 20px 46px;
    align-items: center;
    justify-content: center;
  }

  .unified-card {
    width: min(520px, calc(100vw - 40px));
    min-height: 0;
    height: auto;
    max-height: calc(100dvh - 142px);
    flex-direction: column;
    justify-content: center;
    padding: 30px 24px;
    margin: 0 auto;
    transform: translateY(clamp(18px, 2.4vh, 34px));
    overflow: hidden;
  }

  .unified-card::after {
    display: none;
  }

  .auth-form-side {
    width: 100%;
    flex: none;
    padding: 0;
  }

  .flip-wrapper {
    width: 100%;
    max-width: 400px;
    height: auto !important;
    min-height: 0;
    perspective: none;
  }

  .flip-card {
    height: auto;
    transform: none !important;
    transform-style: flat;
    transition: none;
  }

  .card-face,
  .card-face.front,
  .card-face.back {
    position: relative;
    inset: auto;
    transform: none;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }

  .card-face.back {
    display: none;
  }

  .flip-card.flipped .card-face.front {
    display: none;
  }

  .flip-card.flipped .card-face.back {
    display: flex;
  }

  .face-content > * {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .auth-header {
    margin-bottom: 24px;
  }

  .auth-header h1 {
    margin-bottom: 8px;
  }

  form {
    gap: 16px;
  }

  .switch-area {
    margin-top: 18px;
    padding-top: 14px;
  }

  .simple-footer {
    position: static;
    margin-top: 16px;
    text-align: center;
    width: 100%;
    line-height: 1.2;
  }
}
/* dialogs: same glass language */
dialog{
  background: rgba(13,20,35,0.92);
  border: 1px solid rgba(100,233,238,0.30);
  border-radius: 24px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.65),
    0 0 22px rgba(100,233,238,0.10);
}

/* MOBILE: viewport-contained auth card */
@media screen and (max-width: 600px){
  html,
  body.tm-dark{
    overflow: hidden !important;
    position: fixed !important;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    touch-action: auto;
  }

  .auth-site-header{
    display: block !important;
    z-index: 1200;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, rgba(2,4,10,0.74), rgba(2,4,10,0));
  }

  .auth-site-header .nav{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 10px;
  }

  .auth-site-header .brand{
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .auth-site-header .brand__logo{
    width: 26px;
    height: 26px;
    object-fit: contain;
  }

  .auth-site-header .brand__name{
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
  }

  .auth-nav-actions{
    display: none !important;
  }

  .auth-nav-actions .auth-exit-btn{
    min-width: auto;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  .auth-nav-actions .auth-exit-btn span{
    display: inline-block;
    font-size: 0;
  }

  .auth-nav-actions .auth-exit-btn span::before{
    content: "Back";
    font-size: 0.78rem;
  }

  .auth-nav-actions .auth-exit-btn svg{
    display: none;
  }

  .split-layout{
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 72px 14px 18px;
    overflow: hidden !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #tm-bg-canvas{
    opacity: 0.55;
    transform: none;
  }

  .auth-visual-side{
    display: none !important;
  }

  .unified-card{
    background:
      linear-gradient(
        155deg,
        rgba(13, 20, 35, 0.97),
        rgba(6, 11, 21, 0.98)
      ) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border:
      1px solid
      rgba(255,255,255,0.12) !important;

    box-shadow:
      0 16px 36px
      rgba(0,0,0,0.46) !important;

    animation: none !important;
    opacity: 1;
    will-change: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: min(460px, 100%);
    min-height: 0;
    max-height: calc(100dvh - 100px);

    margin: 0 auto;
    padding:
      clamp(14px, 3.6vw, 20px)
      16px !important;

    overflow: hidden;

    transform:
      translateY(
        clamp(-24px, -3vh, -10px)
      );
  }

  .unified-card::before,
  .unified-card::after{
    display: none;
  }

  .auth-form-side{
    width: 100%;
    min-height: 0;
    padding: 0;
  }

  .flip-wrapper{
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 0;
  }

  .card-face{
    padding: 0;
  }

  .face-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
  }

  .auth-header{
    margin-bottom: clamp(17px, 2.6vh, 24px);
  }

  .auth-header h1{
    font-size: clamp(1.42rem, 6.4vw, 1.72rem);
    line-height: 1.08;
    margin-bottom: 7px;
  }

  .auth-header p{
    font-size: 0.88rem;
    line-height: 1.42;
    color: rgba(255,255,255,0.78);
  }

  .auth-eyebrow{
    margin-bottom: 8px;
    padding: 5px 10px;
    font-size: 0.66rem;
  }

  form{
    gap: 11px;
  }

  .input-group input{
    font-size: 16px;
    padding: 12px 14px;
    border-radius: 15px;
  }

  .actions-row{
    font-size: 0.82rem;
  }

  .btn.primary.btn-primary,
  .btn-primary{
    padding: 12px 14px;
    font-size: 0.94rem;
    margin-top: 4px;
    border-radius: 15px;
  }

  .divider{
    margin: 10px 0;
  }

  .switch-area{
    margin-top: 14px;
    padding-top: 12px;
  }

  .switch-area p{
    font-size: 0.86rem;
  }

  .auth-note,
  .terms-micro{
    font-size: 0.76rem;
    line-height: 1.38;
  }

  .simple-footer{
    position: static !important;
    width: 100%;
    margin: 14px 0 0;
    text-align: center;
    opacity: 0.58;
    font-size: 0.68rem;
    line-height: 1.2;
    z-index: 10;
  }
}

/* Mobile keyboard-open state:
   unlock vertical scrolling and keep the focused field visible. */
@media screen and (max-width: 600px) {
  html.tm-home.tm-keyboard-open,
  html.tm-home.tm-keyboard-open body.tm-dark {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: var(--tm-auth-visual-height, 100dvh) !important;
    min-height: var(--tm-auth-visual-height, 100dvh) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
  }

  html.tm-home.tm-keyboard-open body.tm-dark {
    touch-action: pan-y;
  }

  html.tm-home.tm-keyboard-open .auth-site-header {
    position: absolute;
    padding-top: max(4px, env(safe-area-inset-top, 0px));
  }

  html.tm-home.tm-keyboard-open .auth-site-header .nav {
    padding: 7px 14px;
  }

  html.tm-home.tm-keyboard-open .split-layout {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: var(--tm-auth-visual-height, 100dvh);
    padding:
      58px
      14px
      max(18px, env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
    justify-content: center;
    overflow: visible !important;
  }

  html.tm-home.tm-keyboard-open .unified-card {
    max-height: none;
    margin: 0 auto;
    padding: 16px !important;
    justify-content: flex-start;
    overflow: visible;
    transform: none;
    animation: none;
    opacity: 1;
  }

  html.tm-home.tm-keyboard-open .face-content {
    justify-content: flex-start;
  }

  html.tm-home.tm-keyboard-open .auth-header {
    margin-bottom: 16px;
  }

  html.tm-home.tm-keyboard-open .simple-footer {
    display: none;
  }

  html.tm-home.tm-keyboard-open input,
  html.tm-home.tm-keyboard-open textarea {
    scroll-margin-top: 84px;
    scroll-margin-bottom: 28px;
  }
}

@media screen and (max-width: 600px) and (max-height: 720px) {
  .auth-header{
    margin-bottom: 16px;
  }

  .auth-header h1{
    margin-bottom: 6px;
  }

  form{
    gap: 10px;
  }
}
/* =========================================================
   AUTH — FORCE SWEETALERT2 CENTER OVERLAY (error + success)
   Fix: Swal popup showing too low/bottom instead of true center.
   ========================================================= */

div:where(.swal2-container) {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* breathing room on small screens */
  padding: 24px 16px !important;

  /* must sit above header + auth card */
  z-index: 100000 !important;
}

div:where(.swal2-container).swal2-backdrop-show,
div:where(.swal2-container).swal2-backdrop-hide,
div:where(.swal2-container).swal2-noanimation {
  background: rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

div:where(.swal2-container) div:where(.swal2-popup) {
  margin: 0 !important;              /* kill any auto offset */
  max-width: min(92vw, 560px) !important;
}

/* Optional: if any Swal gets triggered as a "toast" style,
   force it back into modal/center behavior on auth page */
body.swal2-toast-shown div:where(.swal2-container) {
  align-items: center !important;
  justify-content: center !important;
}
/* =========================================================
   AUTH MOBILE FLIP
   - animate only while switching faces
   - settle the active form outside 3D compositing
   - keep mobile inputs and controls interactive
   ========================================================= */

@media screen and (max-width: 600px) {
  .flip-wrapper {
    perspective: 1100px;
    transform: none;
  }

  .flip-card {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr);
    grid-template-areas:
      "auth-face";

    width: 100%;
    height: auto;
    min-height: 0;

    transform: rotateY(0deg);
    transform-origin: center center;

    transform-style: preserve-3d;
    -webkit-transform-style:
      preserve-3d;

    transition:
      transform 0.38s
      cubic-bezier(
        0.2,
        0.78,
        0.2,
        1
      );

    will-change: transform;
  }

  .flip-card.flipped {
    transform: rotateY(180deg);
  }

  .card-face,
  .card-face.front,
  .card-face.back {
    grid-area: auth-face;

    position: relative;
    inset: auto;

    display: flex;
    width: 100%;
    min-width: 0;

    backface-visibility: hidden;
    -webkit-backface-visibility:
      hidden;
  }

  .card-face.front {
    z-index: 2;
    transform: rotateY(0deg);
    pointer-events: auto;
  }

  .card-face.back {
    z-index: 1;
    transform: rotateY(180deg);
    pointer-events: none;
  }

  .flip-card.flipped
    .card-face.front {
    z-index: 1;
    pointer-events: none;
  }

  .flip-card.flipped
    .card-face.back {
    z-index: 2;
    pointer-events: auto;
  }

  /*
    After the animation, the visible form becomes
    a normal non-transformed form. This prevents
    mobile WebView/Safari password repaint issues.
  */
  .flip-card.tm-mobile-settled-login,
  .flip-card.tm-mobile-settled-signup {
    transform: none;
    transform-style: flat;
    -webkit-transform-style: flat;
    transition: none;
    will-change: auto;
  }

  .flip-card.tm-mobile-settled-login
    .card-face.front,
  .flip-card.tm-mobile-settled-signup
    .card-face.back {
    display: flex;
    transform: none;

    backface-visibility: visible;
    -webkit-backface-visibility:
      visible;

    pointer-events: auto;
    z-index: 2;
  }

  .flip-card.tm-mobile-settled-login
    .card-face.back,
  .flip-card.tm-mobile-settled-signup
    .card-face.front {
    display: none;
    transform: none;
    pointer-events: none;
    z-index: 1;
  }

  .face-content > * {
    animation: none;
    opacity: 1;
    transform: none;
  }

  body.tm-dark,
  .auth-form-side,
  .input-group input,
  .auth-header h1,
  .auth-header p {
    filter: none;
  }

  body.tm-dark {
    -webkit-font-smoothing:
      antialiased;

    -moz-osx-font-smoothing:
      grayscale;

    text-rendering:
      optimizeLegibility;
  }
}
/* Google button shell should be visible immediately while official GSI is loading */
.btn-oauth.is-pending,
.btn-oauth:disabled {
  opacity: 0.92;
  cursor: not-allowed;
}

.btn-oauth.is-pending {
  filter: saturate(0.96);
}
/* =========================================================
   PHASE 1 SECOND WAVE — AUTH MODAL SPACING POLISH
   Mobile reset modal must become a single centered form.
   ========================================================= */
@media (max-width: 768px) {
  dialog.modal,
  dialog.split-modal {
    width: min(94vw, 560px) !important;
    max-width: min(94vw, 560px) !important;
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    margin: auto !important;
    padding: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  dialog.split-modal {
    width: min(92vw, 430px) !important;
    max-width: min(92vw, 430px) !important;
  }

  .modal__body {
    width: 100%;
    padding: 22px 18px !important;
  }

  .modal__body h3 {
    margin: 0 0 8px !important;
    font-size: 1.22rem !important;
    line-height: 1.15 !important;
    text-align: center;
  }

  .modal__body .muted,
  .modal__body p {
    line-height: 1.45;
    text-align: center;
  }

  .modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
  }

  .modal-actions .spacer {
    display: none;
  }

  .modal-actions .btn,
  .modal-actions .btn-ghost,
  .modal-actions .btn--ghost {
    min-height: 46px;
    border-radius: 14px;
    flex: 1 1 calc(50% - 5px);
  }

  .split-modal-layout {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  .modal-left-visual {
    display: none !important;
  }

  .modal-right-form {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    padding: 24px 20px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .modal-right-form .modal__body {
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .modal__body.align-left {
    text-align: center !important;
  }

  .modal-input-wrapper {
    width: 100% !important;
    max-width: 350px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .code-input.full-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
  }

  .forgot-hint,
  .error-text {
    width: 100% !important;
    max-width: 350px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .column-actions {
    width: 100% !important;
    max-width: 350px !important;
    margin: 18px auto 0 !important;
    align-items: center !important;
  }

  .column-actions .btn,
  .column-actions .btn-primary,
  .column-actions .btn-text-only {
    width: 100% !important;
    max-width: 350px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 430px) {
  dialog.split-modal {
    width: min(94vw, 390px) !important;
    max-width: min(94vw, 390px) !important;
  }

  .modal-right-form {
    padding: 22px 18px 20px !important;
  }

  .modal-right-form .modal__body,
  .modal-input-wrapper,
  .forgot-hint,
  .error-text,
  .column-actions,
  .column-actions .btn,
  .column-actions .btn-primary,
  .column-actions .btn-text-only {
    max-width: 100% !important;
  }
}