/* Auth redesign */
.auth-page {
  min-height: 100vh !important;
  display: grid !important;
  place-items: center !important;
  padding: 22px !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(124,58,237,.14), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(255,79,139,.13), transparent 26%),
    linear-gradient(180deg, #fbf8ff 0%, #fff9fb 52%, #f8fbff 100%) !important;
}

.auth-card {
  width: min(100%, 410px) !important;
  padding: 26px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid #eceef4 !important;
  box-shadow: 0 18px 54px rgba(35, 23, 74, .12) !important;
  overflow: hidden;
}

.auth-card h1 {
  margin: 0 0 7px !important;
  font-size: 25px !important;
  letter-spacing: -.04em !important;
  color: #171827 !important;
}

.auth-card .sub {
  margin: 0 0 16px !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  line-height: 1.55 !important;
}

.auth-card input {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  margin-top: 10px !important;
  padding: 9px 12px !important;
  border-radius: 13px !important;
  border: 1px solid #dfe3ec !important;
  background: #fff !important;
  font-size: 14px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.03) !important;
}

.auth-card input:focus {
  outline: none !important;
  border-color: rgba(124,58,237,.65) !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,.10) !important;
}

.auth-card button {
  width: auto !important;
  min-width: 96px !important;
  min-height: 34px !important;
  margin-top: 12px !important;
  padding: 7px 11px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #7c3aed, #ff4f8b) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 28px rgba(124,58,237,.18) !important;
}

.auth-card #btnPasswordLogin,
.auth-card #btnSmsLogin,
.auth-card #btnRegister {
  width: 100% !important;
  margin-top: 14px !important;
}

.auth-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  margin: 14px 0 4px !important;
  padding: 3px !important;
  gap: 6px !important;
  border-radius: 14px !important;
  background: #f6f7fb !important;
  border: 1px solid #eef0f5 !important;
}

.auth-tab {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 8px 8px !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #6b7280 !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

.auth-tab.active {
  background: #fff !important;
  color: #7c3aed !important;
  box-shadow: 0 8px 20px rgba(35,23,74,.08) !important;
}

.sms-login-row {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 104px !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 10px !important;
}

.sms-login-row input {
  margin-top: 0 !important;
}

.sms-login-row button {
  width: 104px !important;
  min-width: 104px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

.auth-msg {
  min-height: 20px !important;
  margin: 12px 0 0 !important;
  color: #e11d48 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.auth-link {
  margin: 8px 0 0 !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  text-align: center !important;
}

.auth-link a {
  color: #7c3aed !important;
  font-weight: 900 !important;
}

/* Right-side floating contact QR */
.contact-qr-float-wrap {
  position: fixed !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  top: 50% !important;
  z-index: 6000 !important;
  transform: translateY(-50%) !important;
  font-family: inherit !important;
}

.contact-qr-float-btn {
  width: 62px !important;
  min-width: 62px !important;
  min-height: 148px !important;
  margin: 0 !important;
  padding: 12px 8px !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 26% 12%, rgba(255,255,255,.62), transparent 22%),
    linear-gradient(180deg, #ff5f95 0%, #d946ef 48%, #7c3aed 100%) !important;
  color: #fff !important;
  box-shadow: 0 22px 48px rgba(124,58,237,.28), 0 8px 18px rgba(236,72,153,.22) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: visible !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.contact-qr-float-btn::after {
  content: "" !important;
  position: absolute !important;
  inset: -7px !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(255,79,139,.25), rgba(124,58,237,.24)) !important;
  filter: blur(9px) !important;
  animation: contactQrGlow 2.8s ease-in-out infinite !important;
}

.contact-qr-float-btn:hover,
.contact-qr-float-wrap.open .contact-qr-float-btn {
  transform: translateX(-2px) !important;
  filter: saturate(1.06) !important;
  box-shadow: 0 26px 58px rgba(124,58,237,.34), 0 10px 24px rgba(236,72,153,.26) !important;
}

.contact-qr-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.95) !important;
  color: #7c3aed !important;
  font-size: 18px !important;
  line-height: 1 !important;
  box-shadow: inset 0 0 0 1px rgba(124,58,237,.08), 0 10px 18px rgba(76,29,149,.14) !important;
}

.contact-qr-label {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  letter-spacing: .08em !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.contact-qr-float-panel {
  position: absolute !important;
  right: 74px !important;
  top: 50% !important;
  width: 250px !important;
  padding: 12px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(236,238,244,.96) !important;
  box-shadow: 0 24px 68px rgba(35,23,74,.18) !important;
  transform: translate(12px, -50%) scale(.96) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.contact-qr-float-panel::after {
  content: "" !important;
  position: absolute !important;
  right: -7px !important;
  top: 50% !important;
  width: 14px !important;
  height: 14px !important;
  transform: translateY(-50%) rotate(45deg) !important;
  background: rgba(255,255,255,.98) !important;
  border-top: 1px solid rgba(236,238,244,.96) !important;
  border-right: 1px solid rgba(236,238,244,.96) !important;
}

.contact-qr-float-panel.open {
  opacity: 1 !important;
  transform: translate(0, -50%) scale(1) !important;
  pointer-events: auto !important;
}

.contact-qr-float-close {
  position: absolute !important;
  right: 10px !important;
  top: 10px !important;
  z-index: 2 !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f3f4f8 !important;
  color: #5f6472 !important;
  font-size: 19px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.contact-qr-card {
  padding: 16px 14px 14px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(124,58,237,.10), transparent 28%),
    linear-gradient(180deg, #fff 0%, #fbf8ff 100%) !important;
  border: 1px solid #f0ecfb !important;
  text-align: center !important;
}

.contact-qr-card strong {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 4px 32px 12px !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  color: #171827 !important;
}

.contact-qr-card strong span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c3aed, #ff4f8b) !important;
  box-shadow: 0 0 0 5px rgba(124,58,237,.10) !important;
}

.contact-qr-card img {
  display: block !important;
  width: 174px !important;
  height: 174px !important;
  object-fit: contain !important;
  margin: 0 auto 12px !important;
  padding: 8px !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid #eceef4 !important;
  box-shadow: 0 12px 26px rgba(35,23,74,.08) !important;
}

.contact-qr-card p {
  margin: 0 auto !important;
  max-width: 200px !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: #6b7280 !important;
  word-break: break-word !important;
}

@keyframes contactQrGlow {
  0%, 100% { opacity: .42; transform: scale(.98); }
  50% { opacity: .82; transform: scale(1.04); }
}

@media (max-width: 768px) {
  .contact-qr-float-wrap {
    right: max(12px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
  }

  .contact-qr-float-btn {
    width: auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 15px 0 10px !important;
    flex-direction: row !important;
    gap: 8px !important;
  }

  .contact-qr-label {
    writing-mode: horizontal-tb !important;
    letter-spacing: .02em !important;
    font-size: 12px !important;
  }

  .contact-qr-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
  }

  .contact-qr-float-panel {
    position: fixed !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    width: min(286px, calc(100vw - 24px)) !important;
    transform: translateY(10px) scale(.96) !important;
  }

  .contact-qr-float-panel.open {
    transform: translateY(0) scale(1) !important;
  }

  .contact-qr-float-panel::after {
    right: 28px !important;
    top: auto !important;
    bottom: -7px !important;
    transform: rotate(135deg) !important;
  }

  .contact-qr-card img {
    width: 158px !important;
    height: 158px !important;
  }
}

@media (max-width: 480px) {
  .auth-page {
    padding: 14px !important;
    align-items: start !important;
    padding-top: 9vh !important;
  }

  .auth-card {
    width: 100% !important;
    padding: 22px 18px !important;
    border-radius: 20px !important;
  }

  .auth-card h1 {
    font-size: 23px !important;
  }

  .sms-login-row {
    grid-template-columns: minmax(0,1fr) 96px !important;
  }

  .sms-login-row button {
    width: 96px !important;
    min-width: 96px !important;
  }
}