/* Auth pages use the shared Vizasound gradient shell. */

body.site-gradient-shell.register-page,
body.site-gradient-shell.login-page,
body.site-gradient-shell.forgot-password-page {
  color: #f7f7fb;
}

body.site-gradient-shell.register-page .site,
body.site-gradient-shell.login-page .site,
body.site-gradient-shell.forgot-password-page .site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

/* The redesign body already reserves room for its fixed navigation. Keep the
   auth wrapper within the remaining canvas so the shared footer stays visible
   on short forms instead of being pushed below an extra viewport height. */
body.viza-redesign.site-gradient-shell.register-page .site,
body.viza-redesign.site-gradient-shell.login-page .site,
body.viza-redesign.site-gradient-shell.forgot-password-page .site {
  min-height: calc(100dvh - var(--header-height-mobile) - var(--vz-mobile-nav) - var(--vz-mobile-page-end));
}

@media (min-width: 960px) {
  body.viza-redesign.site-gradient-shell.register-page .site,
  body.viza-redesign.site-gradient-shell.login-page .site,
  body.viza-redesign.site-gradient-shell.forgot-password-page .site {
    min-height: calc(100dvh - var(--header-height-desktop));
  }
}

body.site-gradient-shell.register-page main.container,
body.site-gradient-shell.login-page main.container,
body.site-gradient-shell.forgot-password-page main.container {
  flex: 1 0 auto;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 32px clamp(16px, 4vw, 32px) 28px;
}

body.site-gradient-shell.register-page .auth-title,
body.site-gradient-shell.login-page .auth-title,
body.site-gradient-shell.forgot-password-page .auth-title {
  margin: 0 0 1.1rem;
  width: 100%;
  text-align: center;
  font-size: clamp(1.55rem, 3.2vw, 2rem);
  font-weight: 820;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, .96);
}

body.site-gradient-shell.register-page .auth-incentive,
body.site-gradient-shell.login-page .auth-incentive {
  margin: -0.72rem 0 1rem;
  text-align: center;
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.35;
  color: rgba(255, 255, 255, .88);
}

body.site-gradient-shell.register-page .registration-email-confirmation {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(167, 139, 250, .72);
  border-radius: 14px;
  background: rgba(91, 33, 182, .22);
  box-shadow: 0 12px 30px rgba(49, 18, 106, .24);
  color: rgba(255, 255, 255, .96);
  text-align: center;
}

body.site-gradient-shell.register-page .registration-email-confirmation p {
  margin: 0;
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Focused auth presentation. The shared header and footer remain untouched;
 * this only replaces the former nested provider/email cards with one clear
 * authentication surface. */
body.site-gradient-shell.register-page .auth-page-intro,
body.site-gradient-shell.login-page .auth-page-intro {
  margin: 0 0 1.35rem;
  text-align: center;
}

body.site-gradient-shell.register-page .auth-page-intro .auth-title,
body.site-gradient-shell.login-page .auth-page-intro .auth-title {
  margin: 0;
  font-size: clamp(1.8rem, 3.5vw, 2.35rem);
}

body.site-gradient-shell.register-page .auth-subtitle,
body.site-gradient-shell.login-page .auth-subtitle {
  margin: .45rem 0 0;
  color: rgba(224, 230, 251, .78);
  font-size: 1rem;
  font-weight: 550;
  line-height: 1.4;
}

body.site-gradient-shell.register-page .auth-card,
body.site-gradient-shell.login-page .auth-card {
  width: 100%;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(139, 92, 246, .36);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(27, 32, 52, .94), rgba(14, 18, 32, .96));
  box-shadow: 0 22px 56px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .05);
}

body.site-gradient-shell.register-page .auth-card .sso-buttons,
body.site-gradient-shell.login-page .auth-card .sso-buttons { gap: 10px; }

body.site-gradient-shell.register-page .auth-card .sso-button,
body.site-gradient-shell.login-page .auth-card .sso-button {
  min-height: 52px;
  border-radius: 12px;
  font-size: 1rem;
}

body.site-gradient-shell.register-page .auth-card .sso-button.google-btn.auth-cta-button,
body.site-gradient-shell.login-page .auth-card .sso-button.google-btn.auth-cta-button {
  border: 1px solid #747775;
  background: #fff;
  color: #1f1f1f;
  box-shadow: none;
}

body.site-gradient-shell.register-page .auth-card .sso-button.apple-btn.auth-cta-button,
body.site-gradient-shell.login-page .auth-card .sso-button.apple-btn.auth-cta-button {
  border: 1px solid rgba(255, 255, 255, .42);
  background: #050506;
  color: #fff;
  box-shadow: none;
}

body.site-gradient-shell.register-page .auth-card .sso-button.google-btn span,
body.site-gradient-shell.login-page .auth-card .sso-button.google-btn span { color: #1f1f1f; }
body.site-gradient-shell.register-page .auth-card .sso-button.apple-btn span,
body.site-gradient-shell.login-page .auth-card .sso-button.apple-btn span { color: #fff; }

body.site-gradient-shell.register-page .auth-card .sso-button.apple-btn img.apple-icon-light,
body.site-gradient-shell.login-page .auth-card .sso-button.apple-btn img.apple-icon-light { filter: brightness(0) invert(1); }

body.site-gradient-shell.register-page .auth-card .sso-button.google-btn.auth-cta-button:hover,
body.site-gradient-shell.login-page .auth-card .sso-button.google-btn.auth-cta-button:hover,
body.site-gradient-shell.register-page .auth-card .sso-button.google-btn.auth-cta-button:focus-visible,
body.site-gradient-shell.login-page .auth-card .sso-button.google-btn.auth-cta-button:focus-visible {
  border-color: #747775;
  background: #f8f9fa;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}

body.site-gradient-shell.register-page .auth-card .sso-button.apple-btn.auth-cta-button:hover,
body.site-gradient-shell.login-page .auth-card .sso-button.apple-btn.auth-cta-button:hover,
body.site-gradient-shell.register-page .auth-card .sso-button.apple-btn.auth-cta-button:focus-visible,
body.site-gradient-shell.login-page .auth-card .sso-button.apple-btn.auth-cta-button:focus-visible {
  border-color: rgba(255, 255, 255, .72);
  background: #171719;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .09);
}

body.site-gradient-shell.register-page .auth-card .auth-divider,
body.site-gradient-shell.login-page .auth-card .auth-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 1.35rem 0;
  color: rgba(215, 221, 241, .72);
  font-size: .82rem;
  font-weight: 600;
}

body.site-gradient-shell.register-page .auth-card .auth-divider::before,
body.site-gradient-shell.register-page .auth-card .auth-divider::after,
body.site-gradient-shell.login-page .auth-card .auth-divider::before,
body.site-gradient-shell.login-page .auth-card .auth-divider::after {
  width: auto;
  height: 1px;
  content: '';
  background: rgba(148, 163, 184, .28);
}

body.site-gradient-shell.register-page .auth-card .auth-email-form,
body.site-gradient-shell.login-page .auth-card .auth-email-form { margin: 0; }

body.site-gradient-shell.register-page .auth-card .input,
body.site-gradient-shell.login-page .auth-card .input {
  min-height: 50px;
  margin-bottom: 1rem;
  border-color: rgba(148, 163, 184, .42);
  background: rgba(19, 27, 45, .74);
}

body.site-gradient-shell.register-page .auth-submit-button,
body.site-gradient-shell.login-page .auth-submit-button {
  display: inline-flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  margin-top: .2rem;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #6d5dfc 0%, #9c55f6 52%, #db5fc7 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 16px 34px rgba(109, 93, 252, .32);
  color: #fff;
  font-size: 1rem;
  font-weight: 780;
}

body.site-gradient-shell.register-page .auth-submit-button:hover,
body.site-gradient-shell.register-page .auth-submit-button:focus-visible,
body.site-gradient-shell.login-page .auth-submit-button:hover,
body.site-gradient-shell.login-page .auth-submit-button:focus-visible {
  background: linear-gradient(135deg, #7b6dff 0%, #aa65fb 52%, #e36dd2 100%);
  color: #fff;
  transform: translateY(-1px);
}

body.site-gradient-shell.login-page .auth-forgot-link {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: -.25rem 0 1.1rem auto;
  color: #bba7ff;
  font-size: .86rem;
  font-weight: 700;
}

body.site-gradient-shell.register-page .auth-legal-line {
  margin: 1rem 0 0;
  color: rgba(215, 221, 241, .68);
  font-size: .78rem;
  line-height: 1.45;
  text-align: center;
}

body.site-gradient-shell.register-page .auth-legal-line a {
  color: #c6b5ff;
  font-weight: 700;
}

/* Email-code confirmation is a dedicated app dialog. Constrain its copy and
 * controls so Android text scaling and the numeric keyboard cannot clip it. */
body.site-gradient-shell.register-page .swal2-popup.auth-code-modal {
  width: min(420px, calc(100vw - 28px));
  padding: 1.35rem 1.25rem 1.15rem;
  overflow: hidden;
}

body.site-gradient-shell.register-page .auth-code-modal .swal2-icon.swal2-info {
  width: 4rem;
  height: 4rem;
  margin: .15rem auto .8rem;
}

body.site-gradient-shell.register-page .auth-code-modal__content {
  width: 100%;
  margin: 0 !important;
  overflow: visible;
}

body.site-gradient-shell.register-page .auth-code-prompt__copy {
  max-width: 31ch;
  margin: 0 auto;
  overflow-wrap: break-word;
  color: rgba(229, 234, 250, .9);
  font-size: 1rem;
  line-height: 1.45;
  text-align: center;
}

body.site-gradient-shell.register-page .auth-code-prompt__input {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 52px;
  margin: 1.1rem 0 .65rem !important;
  padding: .65rem .75rem;
  border-color: rgba(148, 163, 184, .6);
  border-radius: 12px;
  background: rgba(19, 27, 45, .86);
  color: #fff;
  font-size: 16px !important;
  letter-spacing: .08em;
  text-align: center;
}

body.site-gradient-shell.register-page .auth-code-prompt__status {
  min-height: 1.2em;
  color: rgba(229, 234, 250, .76);
  font-size: .86rem;
  line-height: 1.35;
  text-align: center;
}

body.site-gradient-shell.register-page .auth-code-prompt__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem;
  margin: .25rem 0 0;
  font-size: .9rem;
}

body.site-gradient-shell.register-page .auth-code-prompt__links a {
  color: #c6b5ff;
  font-weight: 700;
}

body.site-gradient-shell.register-page .auth-code-modal__confirm {
  min-width: min(100%, 240px);
  min-height: 46px;
  margin-top: .8rem !important;
}

body.site-gradient-shell.register-page .form-wrapper,
body.site-gradient-shell.login-page .form-wrapper,
body.site-gradient-shell.forgot-password-page .form-wrapper {
  width: 100%;
  padding: 1.35rem 1.3rem 1.2rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .30);
  background: rgba(18, 21, 31, .78);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 18px 48px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.site-gradient-shell.register-page .sso-buttons,
body.site-gradient-shell.login-page .sso-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.site-gradient-shell.register-page .sso-button,
body.site-gradient-shell.login-page .sso-button {
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

body.site-gradient-shell.register-page .auth-cta-button,
body.site-gradient-shell.login-page .auth-cta-button,
body.site-gradient-shell.forgot-password-page #forgot-password-button {
  background: linear-gradient(135deg, #6d5dfc 0%, #9c55f6 52%, #db5fc7 100%);
  border-color: rgba(255, 255, 255, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 16px 34px rgba(109, 93, 252, .32);
}

body.site-gradient-shell.register-page .auth-cta-button:hover,
body.site-gradient-shell.login-page .auth-cta-button:hover,
body.site-gradient-shell.forgot-password-page #forgot-password-button:hover,
body.site-gradient-shell.register-page .auth-cta-button:focus-visible,
body.site-gradient-shell.login-page .auth-cta-button:focus-visible,
body.site-gradient-shell.forgot-password-page #forgot-password-button:focus-visible {
  background: linear-gradient(135deg, #7b6dff 0%, #aa65fb 52%, #e36dd2 100%);
  border-color: rgba(255, 255, 255, .24);
  transform: translateY(-1px);
}

body.site-gradient-shell.register-page .sso-button.auth-cta-button,
body.site-gradient-shell.login-page .sso-button.auth-cta-button {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 16px 34px rgba(28, 33, 64, .34);
}

/* Google requires its standard multicolor mark. Give it the approved light
   surface instead of reducing its recognition against the product gradient. */
body.site-gradient-shell.register-page .sso-button.google-btn.auth-cta-button,
body.site-gradient-shell.login-page .sso-button.google-btn.auth-cta-button,
body.site-gradient-shell.register-page .sso-button.apple-btn.auth-cta-button,
body.site-gradient-shell.login-page .sso-button.apple-btn.auth-cta-button {
  background: #fff;
  border: 2px solid #8b5cf6;
  color: #1f1f1f;
  box-shadow:
    0 0 0 3px rgba(139, 92, 246, .32),
    0 12px 24px rgba(0, 0, 0, .26),
    0 9px 22px rgba(109, 93, 252, .24);
}

body.site-gradient-shell.register-page .sso-button.google-btn.auth-cta-button:hover,
body.site-gradient-shell.login-page .sso-button.google-btn.auth-cta-button:hover,
body.site-gradient-shell.register-page .sso-button.google-btn.auth-cta-button:focus-visible,
body.site-gradient-shell.login-page .sso-button.google-btn.auth-cta-button:focus-visible,
body.site-gradient-shell.register-page .sso-button.apple-btn.auth-cta-button:hover,
body.site-gradient-shell.login-page .sso-button.apple-btn.auth-cta-button:hover,
body.site-gradient-shell.register-page .sso-button.apple-btn.auth-cta-button:focus-visible,
body.site-gradient-shell.login-page .sso-button.apple-btn.auth-cta-button:focus-visible {
  background: #f8f9fa;
  border-color: #7c3aed;
  transform: translateY(-2px);
  box-shadow:
    0 0 0 4px rgba(139, 92, 246, .42),
    0 14px 28px rgba(0, 0, 0, .30),
    0 10px 24px rgba(109, 93, 252, .25);
}

body.site-gradient-shell.register-page .sso-button:hover,
body.site-gradient-shell.login-page .sso-button:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
  transform: translateY(-1px);
}

body.site-gradient-shell.register-page .sso-button.auth-cta-button:hover,
body.site-gradient-shell.login-page .sso-button.auth-cta-button:hover {
  background: linear-gradient(135deg, #4f85ff 0%, #7a5bf5 58%, #9446ee 100%);
  border-color: rgba(255, 255, 255, .24);
}

body.site-gradient-shell.register-page .sso-button img,
body.site-gradient-shell.login-page .sso-button img {
  width: 28px;
  height: 28px;
  position: absolute;
  left: 16px;
  filter: none;
}

body.site-gradient-shell.register-page .sso-button.apple-btn img.apple-icon-light,
body.site-gradient-shell.login-page .sso-button.apple-btn img.apple-icon-light {
  filter: brightness(0) invert(1);
}

body.site-gradient-shell.register-page .sso-button span,
body.site-gradient-shell.login-page .sso-button span {
  font-size: .92rem;
  line-height: 1.2;
  font-weight: 650;
  text-align: left;
  color: rgba(255, 255, 255, .86);
}

body.site-gradient-shell.register-page .sso-button.google-btn span,
body.site-gradient-shell.login-page .sso-button.google-btn span,
body.site-gradient-shell.register-page .sso-button.apple-btn span,
body.site-gradient-shell.login-page .sso-button.apple-btn span {
  color: #1f1f1f;
}

body.site-gradient-shell.register-page .sso-button.apple-btn img.apple-icon-light,
body.site-gradient-shell.login-page .sso-button.apple-btn img.apple-icon-light {
  filter: none;
}

body.site-gradient-shell.register-page .or-divider,
body.site-gradient-shell.login-page .or-divider {
  margin: .8rem 0;
}

body.site-gradient-shell.register-page .auth-section-heading,
body.site-gradient-shell.login-page .auth-section-heading {
  margin: -.3rem 0 .75rem;
  text-align: center;
  font-size: .92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}

body.site-gradient-shell.register-page .auth-divider,
body.site-gradient-shell.login-page .auth-divider {
  display: flex;
  align-items: center;
  min-height: 1px;
}

body.site-gradient-shell.register-page .auth-divider[hidden],
body.site-gradient-shell.login-page .auth-divider[hidden] {
  display: none;
}

body.site-gradient-shell.register-page .auth-divider::before,
body.site-gradient-shell.login-page .auth-divider::before {
  width: 100%;
  height: 1px;
  content: '';
  background: rgba(255, 255, 255, .28);
}

body.site-gradient-shell.register-page .spacing-top,
body.site-gradient-shell.login-page .spacing-top {
  margin-top: .9rem;
}

body.site-gradient-shell.register-page .input-label,
body.site-gradient-shell.login-page .input-label,
body.site-gradient-shell.forgot-password-page .input-label {
  display: block;
  margin: 0 0 .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  color: rgba(255, 255, 255, .96);
}

body.site-gradient-shell.register-page .form-wrapper.spacing-top .input-label:first-of-type,
body.site-gradient-shell.login-page .form-wrapper.spacing-top .input-label:first-of-type {
  margin-top: 0;
}

body.site-gradient-shell.register-page .input,
body.site-gradient-shell.login-page .input,
body.site-gradient-shell.forgot-password-page .input {
  width: 100%;
  min-height: 48px;
  margin-bottom: .85rem;
  padding: .7rem .9rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .76);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.site-gradient-shell.register-page .input::placeholder,
body.site-gradient-shell.login-page .input::placeholder,
body.site-gradient-shell.forgot-password-page .input::placeholder {
  color: rgba(255, 255, 255, .38);
}

body.site-gradient-shell.register-page .input:focus,
body.site-gradient-shell.login-page .input:focus,
body.site-gradient-shell.forgot-password-page .input:focus {
  outline: none;
  border-color: rgba(169, 140, 255, .78);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .20);
}

body.site-gradient-shell.register-page .info-icon,
body.site-gradient-shell.login-page .info-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  float: none;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .66);
  line-height: 1;
  font-size: 11px;
  font-weight: 800;
  cursor: help;
}

body.site-gradient-shell.register-page .info-icon .tooltip,
body.site-gradient-shell.login-page .info-icon .tooltip {
  position: absolute;
  z-index: 40;
  top: auto;
  right: auto;
  bottom: calc(100% + 9px);
  left: 50%;
  width: min(280px, calc(100vw - 40px));
  min-width: 0;
  max-width: none;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px;
  background: #202637;
  color: rgba(255, 255, 255, .78);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .32);
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  transform: translateX(-50%);
}

body.site-gradient-shell.register-page .info-icon .tooltip::after,
body.site-gradient-shell.login-page .info-icon .tooltip::after {
  content: none;
}

body.site-gradient-shell.register-page .terms-consent,
body.site-gradient-shell.login-page .terms-consent {
  display: flex;
  align-items: center;
  text-align: center;
  margin-top: .95rem;
  gap: .55rem;
}

body.site-gradient-shell.register-page .auth-terms-consent {
  justify-content: center;
  margin: .85rem auto 0;
}

body.site-gradient-shell.register-page .terms-consent.form-spacing,
body.site-gradient-shell.login-page .terms-consent.form-spacing {
  margin-top: .7rem;
  margin-bottom: .7rem;
}

body.site-gradient-shell.register-page .terms-label,
body.site-gradient-shell.login-page .terms-label {
  font-size: .9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .68);
  text-align: left;
}

body.site-gradient-shell.register-page .terms-label .terms-link,
body.site-gradient-shell.login-page .terms-label .terms-link {
  color: #bba7ff;
  font-weight: 700;
}

body.site-gradient-shell.register-page .terms-label .terms-link:hover,
body.site-gradient-shell.login-page .terms-label .terms-link:hover {
  color: #dec6ff;
}

@media (min-width: 768px) {
  body.site-gradient-shell.register-page .auth-sso-discord,
  body.site-gradient-shell.login-page .auth-sso-discord {
    display: none;
  }
}

body.site-gradient-shell.register-page .terms-consent input[type="checkbox"],
body.site-gradient-shell.login-page .terms-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: #8b5cf6;
}

body.site-gradient-shell.register-page #signup-button,
body.site-gradient-shell.login-page #signin-button,
body.site-gradient-shell.forgot-password-page #forgot-password-button {
  min-height: 48px;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #6d5dfc 0%, #9c55f6 52%, #db5fc7 100%);
  color: #fff;
  font-size: .95rem;
  font-weight: 780;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 16px 34px rgba(109, 93, 252, .32);
}

body.site-gradient-shell.register-page #signup-button:hover,
body.site-gradient-shell.login-page #signin-button:hover,
body.site-gradient-shell.forgot-password-page #forgot-password-button:hover {
  background: linear-gradient(135deg, #7b6dff 0%, #aa65fb 52%, #e36dd2 100%);
  transform: translateY(-1px);
}

body.site-gradient-shell.register-page .center-block,
body.site-gradient-shell.login-page .center-block,
body.site-gradient-shell.forgot-password-page .center-block {
  display: flex;
  justify-content: center;
}

body.site-gradient-shell.register-page .cta-wrap,
body.site-gradient-shell.login-page .cta-wrap,
body.site-gradient-shell.forgot-password-page .cta-wrap {
  margin-top: 1rem;
  text-align: center;
  font-size: .92rem;
  color: rgba(255, 255, 255, .62);
}

body.site-gradient-shell.register-page .cta-wrap a,
body.site-gradient-shell.login-page .cta-wrap a,
body.site-gradient-shell.forgot-password-page .cta-wrap a {
  color: #bba7ff;
  font-weight: 700;
}

body.site-gradient-shell.register-page .cta-wrap a:hover,
body.site-gradient-shell.login-page .cta-wrap a:hover,
body.site-gradient-shell.forgot-password-page .cta-wrap a:hover {
  color: #dec6ff;
}

/* The shared redesign stylesheet owns the header and footer on auth pages.
 * This file intentionally styles only auth-specific content. */
@media (min-width: 769px) {
  body.site-gradient-shell.register-page .auth-title,
  body.site-gradient-shell.login-page .auth-title {
    margin-top: 1rem;
  }
}

/* The short reset form has room to use the same vertically balanced layout as
 * Change Password; sign-in and sign-up intentionally retain their top flow. */
body.site-gradient-shell.forgot-password-page main.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* A validated confirmation token has one clear next action: password sign-in.
 * Center that reduced flow on larger screens without changing normal login or
 * the mobile layout, where keyboard space takes priority. */
@media (min-width: 768px) {
  body.site-gradient-shell.login-page.token-validated-login main.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Language selection belongs in the shared header on auth pages.  Do not
 * append a second, standalone control beneath the legal/footer content. */
body.site-gradient-shell.register-page .site-footer-language,
body.site-gradient-shell.login-page .site-footer-language,
body.site-gradient-shell.forgot-password-page .site-footer-language,
body.site-gradient-shell.change-password-shell .site-footer-language {
  display: none;
}

body.site-gradient-shell.register-page .cookie-banner,
body.site-gradient-shell.login-page .cookie-banner,
body.site-gradient-shell.forgot-password-page .cookie-banner {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(12, 16, 28, .94);
  color: rgba(255, 255, 255, .86);
}

body.site-gradient-shell.register-page .cookie-banner .anchor-light-color,
body.site-gradient-shell.login-page .cookie-banner .anchor-light-color,
body.site-gradient-shell.forgot-password-page .cookie-banner .anchor-light-color {
  color: #7ba4ff;
}

/* Keep the consent CTA on the refreshed auth pages aligned with the primary
 * Vizasound action instead of inheriting Bootstrap's legacy blue button. */
body.site-gradient-shell.register-page .cookie-banner .btn.btn-primary,
body.site-gradient-shell.login-page .cookie-banner .btn.btn-primary {
  border: 0;
  background: linear-gradient(135deg, #6d5dfc 0%, #9c55f6 52%, #db5fc7 100%);
  color: #fff;
}

body.site-gradient-shell.register-page .cookie-banner .btn.btn-primary:hover,
body.site-gradient-shell.register-page .cookie-banner .btn.btn-primary:focus-visible,
body.site-gradient-shell.login-page .cookie-banner .btn.btn-primary:hover,
body.site-gradient-shell.login-page .cookie-banner .btn.btn-primary:focus-visible {
  background: linear-gradient(135deg, #7b6dff 0%, #aa65fb 52%, #e36dd2 100%);
}

body.site-gradient-shell.login-page.telegram-flow .telegram-login-brand {
  display: flex;
  justify-content: center;
  margin: 0 0 .75rem;
}

body.site-gradient-shell.login-page.telegram-flow .telegram-login-brand img {
  width: min(180px, 42vw);
  height: auto;
  display: block;
}

body.site-gradient-shell.login-page.telegram-flow .telegram-login-consent {
  margin: 1rem auto 0;
  max-width: 24rem;
  text-align: center;
  font-size: .9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .68);
}

body.site-gradient-shell.login-page.telegram-flow .telegram-login-consent a {
  color: #7ba4ff;
  font-weight: 700;
  text-decoration: none;
}

body.site-gradient-shell.login-page.telegram-flow .telegram-login-consent a:hover,
body.site-gradient-shell.login-page.telegram-flow .telegram-login-consent a:focus-visible {
  color: #a8c2ff;
  text-decoration: underline;
}

/* Shared mobile-browser app prompt. main.js supplies the platform-appropriate
 * store destination and leaves native app WebViews untouched. */
body.auth-page .app-install-banner {
  position: fixed;
  z-index: 1150;
  top: calc(var(--header-height-mobile, 64px) + 12px);
  left: 50%;
  display: none;
  align-items: center;
  gap: 12px;
  width: min(calc(100% - 32px), 520px);
  min-height: 58px;
  padding: 10px 10px 10px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(167, 139, 250, .52);
  border-radius: 16px;
  background: rgba(18, 23, 40, .97);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .40), 0 0 0 3px rgba(139, 92, 246, .10);
  color: #f7f8ff;
}

body.auth-page .app-install-text {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

body.auth-page .app-install-text strong {
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.2;
}

body.auth-page .app-install-text span {
  color: rgba(220, 226, 247, .76);
  font-size: .72rem;
  line-height: 1.25;
}

body.auth-page .app-install-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

body.auth-page .app-install-cta {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid rgba(194, 181, 255, .76);
  border-radius: 10px;
  background: var(--vz-gradient, linear-gradient(135deg, #6d5dfc, #db5fc7));
  box-shadow: 0 7px 16px rgba(109, 93, 252, .26);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

body.auth-page .app-install-cta:hover,
body.auth-page .app-install-cta:focus-visible {
  color: #fff;
  filter: brightness(1.08);
}

body.auth-page .app-install-close {
  display: inline-grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(220, 226, 247, .78);
  cursor: pointer;
  font-size: .84rem;
}

body.auth-page .app-install-close:hover,
body.auth-page .app-install-close:focus-visible {
  background: rgba(255, 255, 255, .09);
  color: #fff;
}

body.site-gradient-shell.register-page .topbar .language-link:hover,
body.site-gradient-shell.register-page .topbar .language-link:focus-visible,
body.site-gradient-shell.login-page .topbar .language-link:hover,
body.site-gradient-shell.login-page .topbar .language-link:focus-visible,
body.site-gradient-shell.register-page .login-link:hover,
body.site-gradient-shell.register-page .login-link:focus-visible,
body.site-gradient-shell.login-page .login-link:hover,
body.site-gradient-shell.login-page .login-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .30);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .14);
}

body.site-gradient-shell.register-page .top-actions .primary-btn:hover,
body.site-gradient-shell.register-page .top-actions .primary-btn:focus-visible,
body.site-gradient-shell.login-page .top-actions .primary-btn:hover,
body.site-gradient-shell.login-page .top-actions .primary-btn:focus-visible {
  background: #f0ede6;
  color: #111216;
  border-color: rgba(0, 0, 0, .04);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .16);
}

@media (max-width: 767px) {
  body.auth-page .app-install-banner {
    top: calc(var(--header-height-mobile, 64px) + 8px);
    gap: 8px;
    min-height: 54px;
    padding: 8px 8px 8px 12px;
  }

  body.auth-page .app-install-cta {
    max-width: 142px;
    padding-inline: 9px;
  }

  /* Preserve the established compact auth canvas on phones. The richer shared
   * gradient is intentionally a desktop treatment for these pages. */
  body.site-shell.page-canvas--gradient.register-page,
  body.site-shell.page-canvas--gradient.login-page,
  body.site-shell.page-canvas--gradient.forgot-password-page,
  body.site-shell.page-canvas--gradient.change-password-shell {
    background: #08090c;
    background-image: none;
    background-attachment: scroll;
  }

  body.site-gradient-shell.register-page .topbar .language-link,
  body.site-gradient-shell.login-page .topbar .language-link,
  body.site-gradient-shell.forgot-password-page .topbar .language-link {
    display: none;
  }

  body.site-gradient-shell.register-page .top-actions,
  body.site-gradient-shell.login-page .top-actions,
  body.site-gradient-shell.forgot-password-page .top-actions {
    gap: 6px;
    min-width: 0;
  }

  body.site-gradient-shell.register-page .logo img,
  body.site-gradient-shell.login-page .logo img,
  body.site-gradient-shell.forgot-password-page .logo img {
    width: 148px;
  }

  body.site-gradient-shell.register-page .login-link,
  body.site-gradient-shell.login-page .login-link,
  body.site-gradient-shell.register-page .top-actions .primary-btn,
  body.site-gradient-shell.login-page .top-actions .primary-btn,
  body.site-gradient-shell.forgot-password-page .login-link,
  body.site-gradient-shell.forgot-password-page .top-actions .primary-btn {
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }

  body.site-gradient-shell.register-page main.container,
  body.site-gradient-shell.login-page main.container,
  body.site-gradient-shell.forgot-password-page main.container {
    /* The redesign shell already reserves the fixed header's height. */
    padding-top: 20px;
    padding-bottom: 20px;
  }

  /* The install prompt sits below the header. Reserve real document space for
     it instead of letting it cover the Sign In/Sign Up heading. */
  body.auth-page.app-install-banner-visible main.container {
    padding-top: calc(var(--header-height-mobile, 64px) + 70px);
  }

  body.site-gradient-shell.register-page .auth-title,
  body.site-gradient-shell.login-page .auth-title,
  body.site-gradient-shell.forgot-password-page .auth-title {
    font-size: 1.35rem;
    margin-bottom: .55rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-inline: 0;
  }

  body.site-gradient-shell.register-page .auth-incentive {
    margin: -0.05rem 0 0.62rem;
    font-size: .86rem;
  }

  body.site-gradient-shell.register-page .form-wrapper,
  body.site-gradient-shell.login-page .form-wrapper,
  body.site-gradient-shell.forgot-password-page .form-wrapper {
    padding: .9rem .8rem .85rem;
  }

  body.site-gradient-shell.register-page .sso-buttons,
  body.site-gradient-shell.login-page .sso-buttons {
    gap: 8px;
  }

  body.site-gradient-shell.register-page .sso-button,
  body.site-gradient-shell.login-page .sso-button {
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
  }

  body.site-gradient-shell.register-page .sso-button img,
  body.site-gradient-shell.login-page .sso-button img {
    width: 24px;
    height: 24px;
    left: 12px;
  }

  body.site-gradient-shell.register-page .sso-button span,
  body.site-gradient-shell.login-page .sso-button span {
    font-size: .88rem;
  }

  body.site-gradient-shell.forgot-password-page .center-block {
    width: 100%;
  }

}

/* New auth-card layout refinements. Kept at the end so the existing
 * ID-based legacy submit rules cannot change this card's geometry. */
body.site-gradient-shell.register-page #signup-button.auth-submit-button,
body.site-gradient-shell.login-page #signin-button.auth-submit-button {
  width: 100%;
  min-height: 50px;
  margin-top: .2rem;
  padding: 0 1.25rem;
  border-radius: 13px;
  font-size: 1rem;
}

body.site-gradient-shell.register-page .auth-submit-button.is-loading,
body.site-gradient-shell.login-page .auth-submit-button.is-loading {
  cursor: wait;
  opacity: .86;
}

body.site-gradient-shell.register-page .auth-submit-button.is-loading::before,
body.site-gradient-shell.login-page .auth-submit-button.is-loading::before {
  width: 1rem;
  height: 1rem;
  margin-right: .6rem;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  content: '';
  animation: auth-button-spinner .7s linear infinite;
}

@keyframes auth-button-spinner {
  to { transform: rotate(360deg); }
}

@media (max-width: 767px) {
  body.site-gradient-shell.register-page main.container,
  body.site-gradient-shell.login-page main.container {
    width: min(100%, 520px);
    padding-right: 16px;
    padding-left: 16px;
  }

  body.site-gradient-shell.register-page .auth-page-intro,
  body.site-gradient-shell.login-page .auth-page-intro {
    margin-bottom: 1rem;
  }

  body.site-gradient-shell.register-page .auth-page-intro .auth-title,
  body.site-gradient-shell.login-page .auth-page-intro .auth-title {
    margin-bottom: 0;
    font-size: clamp(1.65rem, 8vw, 2rem);
  }

  body.site-gradient-shell.register-page .auth-card,
  body.site-gradient-shell.login-page .auth-card {
    padding: 1rem;
    border-radius: 16px;
  }

  body.site-gradient-shell.register-page .auth-card .sso-button,
  body.site-gradient-shell.login-page .auth-card .sso-button {
    min-height: 50px;
  }

  /* The password help icon sits near the left side of the label. Centering
     the popover on that icon sent part of the copy beyond the phone edge. */
  body.site-gradient-shell.register-page .info-icon .tooltip {
    left: -110px;
    width: min(280px, calc(100vw - 32px));
    transform: none;
  }

  /* Keep the code dialog usable when Android reduces the visual viewport for
     the numeric keyboard. The dialog becomes a compact, scrollable sheet
     rather than allowing its copy or actions to disappear behind the IME. */
  body.site-gradient-shell.register-page .swal2-container:has(.auth-code-modal) {
    align-items: flex-start;
    overflow-y: auto;
    padding: max(12px, 4dvh) 14px;
  }

  body.site-gradient-shell.register-page .swal2-popup.auth-code-modal {
    max-height: calc(100dvh - 24px);
    padding: 1.1rem 1rem 1rem;
    overflow-y: auto;
  }

  body.site-gradient-shell.register-page .auth-code-modal .swal2-icon.swal2-info {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: .55rem;
  }

  body.site-gradient-shell.register-page .auth-code-prompt__copy {
    max-width: 30ch;
    font-size: clamp(.92rem, 4vw, 1rem);
    line-height: 1.4;
  }
}

/* A completed registration stays in its waiting-for-email state. */
body.register-page .auth-card[hidden],
body.register-page .registration-email-confirmation[hidden] { display: none; }
body.register-page .registration-email-confirmation > i {
  display: block; font-size: 1.8rem; margin-bottom: .75rem; color: #b8a0ff;
}
body.register-page .registration-email-confirmation > button {
  display: block;
  width: 18rem;
  max-width: 100%;
  box-sizing: border-box;
  margin: 1rem auto 0;
  white-space: normal;
}

/* Confirmation links conceal the login form while establishing the session. */
body.login-page .auth-confirmation-loading {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(6, 9, 18, .65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: center;
}
body.login-page .auth-confirmation-loading[hidden] { display: none; }
body.login-page.auth-confirming { overflow: hidden; }
body.login-page .auth-confirmation-loading p { margin: 0; color: #f7f8ff; }
body.login-page .auth-confirmation-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid rgba(184, 160, 255, .25);
  border-top-color: #b8a0ff;
  border-radius: 50%;
  animation: auth-button-spinner .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.login-page .auth-confirmation-spinner { animation: none; }
}