/* V4 uses the real commercial-session component. Old overlay skin disabled. */

/* DREAMFLOW_LOGIN_V5_VIDEO_BACKGROUND_START
   Video background version.
   Uses the uploaded MP4 as the full-screen login background.
   Keeps the current V4/V4.4 DOM and functionality intact.
*/

/* Full-screen video shell */
.commercial-auth-shell--v4 {
  position: relative !important;
  overflow: hidden !important;
}

.commercial-auth-shell--v4.commercial-auth-shell--v5-video::before,
.commercial-auth-shell--v4.commercial-auth-shell--v5-video::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
}

/* soft cinematic tint above the video */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video::before {
  z-index: 0 !important;
  background:
    radial-gradient(circle at 24% 44%, rgba(120, 92, 255, .10), transparent 28%),
    radial-gradient(circle at 70% 20%, rgba(82, 130, 255, .08), transparent 24%),
    linear-gradient(180deg, rgba(2, 8, 24, .20) 0%, rgba(2, 7, 22, .34) 100%) !important;
}

/* slight edge vignette to keep text readable while preserving the scene */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video::after {
  z-index: 0 !important;
  background:
    radial-gradient(circle at center, rgba(0,0,0,0) 48%, rgba(2,6,18,.10) 72%, rgba(2,6,18,.28) 100%) !important;
}

.commercial-auth-video-bg-v5 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: #050916 !important;
  filter: saturate(1.04) brightness(.94) contrast(1.02) !important;
}

/* shut down earlier overlap-hiding pseudo layers from V4.2/V4.3/V4.4 */
.commercial-auth-card--v4::before,
.commercial-auth-card--v4::after,
.commercial-auth-shell--v4:has(.commercial-auth-card--v4.is-login)::after {
  display: none !important;
  content: none !important;
}

/* center the card and make it feel like a true glass panel over video */
.commercial-auth-card--v4 {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 3.2vh !important;
  width: min(700px, 86vw) !important;
  z-index: 2 !important;
  isolation: auto !important;

  background:
    radial-gradient(circle at 18% 42%, rgba(155, 190, 255, .05), transparent 18%),
    linear-gradient(90deg,
      rgba(7, 22, 60, .21) 0%,
      rgba(6, 20, 56, .24) 10%,
      rgba(6, 18, 52, .28) 30%,
      rgba(5, 17, 48, .32) 100%) !important;
  backdrop-filter: blur(11px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(11px) saturate(118%) !important;
  border: 1px solid rgba(173, 195, 255, .56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 28px rgba(108, 122, 255, .08),
    0 0 16px rgba(97, 161, 255, .26),
    0 0 42px rgba(88, 66, 225, .12),
    0 18px 48px rgba(0, 0, 22, .14) !important;
}

.commercial-auth-card--v4.is-login { 
  height: 92vh !important; 
}

.commercial-auth-card--v4.is-register {
  height: 92vh !important;
}

/* subtle top sheen like glass */
.commercial-auth-card--v4 .commercial-auth-v4-scroll {
  position: relative !important;
  z-index: 1 !important;
}

.commercial-auth-card--v4 .commercial-auth-v4-scroll::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 86px !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)) !important;
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
}

/* keep inner controls crisp but still translucent */
.commercial-auth-identity-tabs--v4 {
  background: rgba(4, 14, 42, .54) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.commercial-auth-v4-field input {
  background: rgba(4, 14, 42, .60) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.commercial-auth-confirm--v4 {
  background: rgba(4, 14, 42, .50) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.commercial-auth-v4-utility,
.commercial-auth-v4-mode-switch {
  background: rgba(4, 14, 43, .14) !important;
}

.commercial-auth-footer-note-v4 {
  background: transparent !important;
}

/* if the component has a static background image, let the video visually dominate */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video,
.commercial-auth-shell--v4.commercial-auth-shell--v5-video * {
  backface-visibility: hidden;
}

@media (max-width: 1100px) {
  .commercial-auth-card--v4 {
    width: min(680px, 90vw) !important;
    top: 2.8vh !important;
  }
}

@media (max-height: 760px) {
  .commercial-auth-card--v4 {
    top: 2.0vh !important;
    height: 94vh !important;
  }
}
/* DREAMFLOW_LOGIN_V5_VIDEO_BACKGROUND_END */

/* DREAMFLOW_LOGIN_V5_3_STABLE_FIRST_VIDEO_START
   Stable video-layout authority.
   No JS interval, no scale animation, no competing responsive scaler.
*/

.commercial-auth-video-bg-v5 {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(1.03) brightness(.97) contrast(1.01) !important;
}

/* One single, static login geometry. The left edge lands close to the
   woman's fingertips in the supplied 16:9 video while staying visually centered. */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login {
  position: fixed !important;
  left: 56% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: min(540px, 72vw) !important;
  height: 84vh !important;
  max-width: 540px !important;
  max-height: 84vh !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  z-index: 3 !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 8% 52%, rgba(158,198,255,.055), transparent 22%),
    linear-gradient(100deg,
      rgba(7,22,60,.12) 0%,
      rgba(7,21,58,.15) 12%,
      rgba(6,20,55,.18) 38%,
      rgba(5,18,51,.21) 100%) !important;
  backdrop-filter: blur(5px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(112%) !important;
  border-color: rgba(181,203,255,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 18px rgba(113,129,255,.045),
    0 0 13px rgba(105,164,255,.18),
    0 0 30px rgba(91,69,218,.07),
    0 12px 32px rgba(0,0,20,.09) !important;
}

/* Registration stays fixed too, only slightly larger for its extra fields. */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-register {
  position: fixed !important;
  left: 56% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: min(565px, 75vw) !important;
  height: 92vh !important;
  max-width: 565px !important;
  max-height: 92vh !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  z-index: 3 !important;
  overflow: hidden !important;

  background: linear-gradient(100deg, rgba(7,22,60,.15), rgba(5,18,51,.23)) !important;
  backdrop-filter: blur(5px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(112%) !important;
}

/* Keep the compact panel readable while preserving transparency. */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video .commercial-auth-identity-tabs--v4 {
  background: rgba(4,14,42,.43) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video .commercial-auth-v4-field input {
  background: rgba(4,14,42,.46) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video .commercial-auth-confirm--v4 {
  background: rgba(4,14,42,.38) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video .commercial-auth-v4-utility,
.commercial-auth-shell--v4.commercial-auth-shell--v5-video .commercial-auth-v4-mode-switch {
  background: rgba(4,14,42,.06) !important;
}

.commercial-auth-shell--v4.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-scroll {
  padding-top: clamp(13px,1.45vh,18px) !important;
  padding-bottom: clamp(11px,1.25vh,16px) !important;
  padding-left: clamp(18px,1.55vw,25px) !important;
  padding-right: clamp(18px,1.55vw,25px) !important;
}

/* No pseudo masking layers: video is a clean standalone background. */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video .commercial-auth-card--v4::before,
.commercial-auth-shell--v4.commercial-auth-shell--v5-video .commercial-auth-card--v4::after {
  display: none !important;
  content: none !important;
}

/* Only change size at real breakpoints; there is no transform scale anywhere. */
@media (max-width: 900px) {
  .commercial-auth-shell--v4.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login {
    left: 55% !important;
    width: min(520px, 78vw) !important;
    height: 86vh !important;
    max-height: 86vh !important;
  }
  .commercial-auth-shell--v4.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-register {
    left: 55% !important;
    width: min(545px, 80vw) !important;
    height: 93vh !important;
    max-height: 93vh !important;
  }
}

@media (max-height: 720px) {
  .commercial-auth-shell--v4.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login {
    height: 90vh !important;
    max-height: 90vh !important;
  }
}
/* DREAMFLOW_LOGIN_V5_3_STABLE_FIRST_VIDEO_END */

/* DREAMFLOW_LOGIN_V5_4_ULTRA_GLASS_COMPACT_START
   Visual-only refinement for V5.3 first-video build.
   Goal: smaller card, much more transparent glass, more integrated with video.
*/

/* Smaller login card, lighter footprint */
.commercial-auth-shell--v5-video .commercial-auth-card--v4,
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login {
  width: min(560px, 64vw) !important;
  max-width: 560px !important;
  top: 3.8vh !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: 82vh !important;
  min-height: 0 !important;

  /* more transparent outer glass */
  background:
    radial-gradient(circle at 18% 42%, rgba(172, 205, 255, .04), transparent 17%),
    linear-gradient(90deg,
      rgba(8, 18, 46, .10) 0%,
      rgba(8, 20, 48, .12) 14%,
      rgba(7, 18, 42, .15) 44%,
      rgba(7, 17, 40, .18) 100%) !important;
  backdrop-filter: blur(14px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(115%) !important;

  border: 1px solid rgba(173, 195, 255, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 0 22px rgba(118, 134, 255, .04),
    0 0 12px rgba(101, 164, 255, .16),
    0 0 30px rgba(88, 66, 225, .07),
    0 12px 34px rgba(0, 0, 22, .10) !important;
}

/* Register page remains a bit taller because of more content */
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-register {
  width: min(580px, 66vw) !important;
  max-width: 580px !important;
  top: 3.2vh !important;
  height: 88vh !important;
}

/* Lighter internal panels so the whole UI melts into the video more naturally */
.commercial-auth-shell--v5-video .commercial-auth-identity-tabs--v4 {
  background: rgba(4, 14, 42, .34) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
}

.commercial-auth-shell--v5-video .commercial-auth-v4-field input {
  background: rgba(4, 14, 42, .34) !important;
  border-color: rgba(143, 175, 255, .52) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.commercial-auth-shell--v5-video .commercial-auth-confirm--v4 {
  background: rgba(4, 14, 42, .28) !important;
  border-color: rgba(143, 175, 255, .30) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.commercial-auth-shell--v5-video .commercial-auth-v4-utility,
.commercial-auth-shell--v5-video .commercial-auth-v4-mode-switch {
  background: rgba(4, 14, 43, .08) !important;
}

.commercial-auth-shell--v5-video .commercial-auth-footer-note-v4 {
  opacity: .95 !important;
  background: transparent !important;
}

/* Text/readability tweaks without making the glass heavy */
.commercial-auth-shell--v5-video .commercial-auth-card--v4,
.commercial-auth-shell--v5-video .commercial-auth-card--v4 * {
  text-shadow: 0 0 10px rgba(5, 14, 50, .22) !important;
}

.commercial-auth-shell--v5-video .commercial-auth-v4-scroll {
  padding-inline: 26px !important;
}

/* slightly smaller spacing so the card becomes visually more compact */
.commercial-auth-shell--v5-video .commercial-auth-v4-brand {
  margin-bottom: 12px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-v4-title {
  margin-bottom: 8px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-identity-tabs--v4,
.commercial-auth-shell--v5-video .commercial-auth-v4-fields,
.commercial-auth-shell--v5-video .commercial-auth-v4-utility,
.commercial-auth-shell--v5-video .commercial-auth-v4-submit,
.commercial-auth-shell--v5-video .commercial-auth-v4-mode-switch,
.commercial-auth-shell--v5-video .commercial-auth-confirm--v4,
.commercial-auth-shell--v5-video .commercial-auth-footer-note-v4 {
  margin-top: 12px !important;
}

/* mobile/short-window safety */
@media (max-width: 1200px) {
  .commercial-auth-shell--v5-video .commercial-auth-card--v4,
  .commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login {
    width: min(540px, 72vw) !important;
  }
}
@media (max-height: 760px) {
  .commercial-auth-shell--v5-video .commercial-auth-card--v4,
  .commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login {
    top: 2.4vh !important;
    height: 84vh !important;
  }
}
/* DREAMFLOW_LOGIN_V5_4_ULTRA_GLASS_COMPACT_END */

/* DREAMFLOW_LOGIN_V5_5_MINI_LOGIN_START
   Visual-only: substantially smaller LOGIN card.
   Register page and all behavior remain untouched.
*/

/* LOGIN ONLY: reduce footprint decisively, no transform scaling animation. */
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login {
  width: min(470px, 56vw) !important;
  max-width: 470px !important;
  top: 6.5vh !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: 78vh !important;
  min-height: 0 !important;

  /* keep the light transparent glass from V5.4 */
  background:
    radial-gradient(circle at 18% 42%, rgba(172,205,255,.035), transparent 17%),
    linear-gradient(90deg,
      rgba(8,18,46,.08) 0%,
      rgba(8,20,48,.10) 14%,
      rgba(7,18,42,.13) 44%,
      rgba(7,17,40,.16) 100%) !important;
  backdrop-filter: blur(12px) saturate(114%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(114%) !important;
  border-color: rgba(173,195,255,.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 0 10px rgba(101,164,255,.13),
    0 0 26px rgba(88,66,225,.05),
    0 10px 28px rgba(0,0,22,.08) !important;
}

/* Compact login internal spacing. */
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-scroll {
  padding: 16px 20px 14px !important;
}

/* Brand/logo smaller. */
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-brand {
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-brand img {
  width: 36px !important;
  height: 38px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-brand strong {
  font-size: 28px !important;
}

/* Login heading/subheading smaller. */
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-header {
  margin-bottom: 8px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-header h1 {
  font-size: 23px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-header p {
  font-size: 12px !important;
  margin-top: 3px !important;
}

/* Tabs and inputs become shallower. */
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-identity-tabs--v4 {
  height: 38px !important;
  margin-bottom: 8px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-identity-tabs--v4 button {
  font-size: 13px !important;
}

.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-fields {
  gap: 7px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-field {
  height: 40px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-field input {
  font-size: 13px !important;
  padding-left: 39px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-field-icon {
  width: 18px !important;
  height: 18px !important;
}

/* Utility row compact. */
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-utility {
  min-height: 26px !important;
  margin: 6px 0 !important;
  padding: 0 3px !important;
  font-size: 12px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-remember input {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
}

/* Login button and switch row compact. */
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-primary--v4 {
  height: 42px !important;
  margin-top: 7px !important;
  font-size: 14px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-mode-switch {
  min-height: 27px !important;
  margin: 5px 0 !important;
  font-size: 12px !important;
}

/* Confirmation block significantly tighter, but still readable. */
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-confirm--v4 {
  margin-top: 6px !important;
  padding: 9px 10px !important;
  gap: 6px !important;
  border-radius: 12px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-confirm--v4 h2 {
  font-size: 14px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-check--v4 {
  grid-template-columns: 18px minmax(0,1fr) !important;
  gap: 8px !important;
  font-size: 11px !important;
  line-height: 1.42 !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-check--v4 input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
}

/* Footer note compact and keeps inside card. */
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-footer-note-v4 {
  margin-top: 6px !important;
  font-size: 9.5px !important;
  line-height: 1.42 !important;
}

/* Short window safety: allow internal vertical scrolling instead of card growth. */
@media (max-height: 760px) {
  .commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login {
    top: 4vh !important;
    height: 82vh !important;
  }
}

/* Narrow viewport safety without making the login card large again. */
@media (max-width: 1000px) {
  .commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login {
    width: min(455px, 64vw) !important;
    max-width: 455px !important;
  }
}
/* DREAMFLOW_LOGIN_V5_5_MINI_LOGIN_END */

/* DREAMFLOW_LOGIN_V5_6_TINY_LOGIN_START
   Visual-only: make LOGIN card notably smaller again.
   Keeps video and behavior unchanged.
*/

.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login {
  width: min(420px, 50vw) !important;
  max-width: 420px !important;
  top: 7.8vh !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: 70vh !important;
  min-height: 0 !important;
  border-radius: 24px !important;

  background:
    radial-gradient(circle at 18% 42%, rgba(172,205,255,.028), transparent 17%),
    linear-gradient(90deg,
      rgba(8,18,46,.06) 0%,
      rgba(8,20,48,.08) 14%,
      rgba(7,18,42,.10) 44%,
      rgba(7,17,40,.13) 100%) !important;
  backdrop-filter: blur(10px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(112%) !important;
  border-color: rgba(173,195,255,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 8px rgba(101,164,255,.10),
    0 0 20px rgba(88,66,225,.04),
    0 8px 22px rgba(0,0,22,.06) !important;
}

.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-scroll {
  padding: 14px 18px 12px !important;
}

.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-brand {
  gap: 7px !important;
  margin-bottom: 6px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-brand img {
  width: 32px !important;
  height: 34px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-brand strong {
  font-size: 24px !important;
}

.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-header {
  margin-bottom: 6px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-header h1 {
  font-size: 19px !important;
  line-height: 1.12 !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-header p {
  font-size: 11px !important;
  margin-top: 2px !important;
  line-height: 1.25 !important;
}

.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-identity-tabs--v4 {
  height: 34px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  border-radius: 13px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-identity-tabs--v4 button {
  font-size: 12px !important;
}

.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-fields {
  gap: 6px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-field {
  height: 36px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-field input {
  font-size: 12px !important;
  padding-left: 36px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-field-icon {
  width: 16px !important;
  height: 16px !important;
}

.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-utility {
  min-height: 24px !important;
  margin: 5px 0 !important;
  padding: 0 2px !important;
  font-size: 11px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-remember input {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
}

.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-primary--v4 {
  height: 38px !important;
  margin-top: 6px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-v4-mode-switch {
  min-height: 24px !important;
  margin: 4px 0 !important;
  font-size: 11px !important;
}

.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-confirm--v4 {
  margin-top: 6px !important;
  padding: 8px 9px !important;
  gap: 5px !important;
  border-radius: 12px !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-confirm--v4 h2 {
  font-size: 13px !important;
  line-height: 1.18 !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-check--v4 {
  grid-template-columns: 16px minmax(0,1fr) !important;
  gap: 7px !important;
  font-size: 10px !important;
  line-height: 1.34 !important;
}
.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-check--v4 input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
}

.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login .commercial-auth-footer-note-v4 {
  margin-top: 5px !important;
  font-size: 9px !important;
  line-height: 1.32 !important;
}

@media (max-height: 760px) {
  .commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login {
    top: 5vh !important;
    height: 76vh !important;
  }
}
@media (max-width: 1000px) {
  .commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login {
    width: min(405px, 58vw) !important;
    max-width: 405px !important;
  }
}
/* DREAMFLOW_LOGIN_V5_6_TINY_LOGIN_END */

/* DREAMFLOW_LOGIN_V5_7_REAL_SMALL_GLASS_START
   REAL size override.
   This selector deliberately matches/exceeds the old V5.3 specificity,
   so the OUTER CARD itself finally becomes smaller.
*/

/* LOGIN: real compact geometry. */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video .commercial-auth-card--v4.is-login {
  position: fixed !important;
  left: 54.5% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;

  width: min(420px, 52vw) !important;
  max-width: 420px !important;
  min-width: 0 !important;

  height: min(610px, 70vh) !important;
  max-height: min(610px, 70vh) !important;
  min-height: 0 !important;

  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  overflow: hidden !important;

  /* Much lighter glass; video remains clearly visible through it. */
  background:
    radial-gradient(circle at 15% 40%, rgba(170,205,255,.025), transparent 18%),
    linear-gradient(100deg,
      rgba(6,18,49,.045) 0%,
      rgba(6,18,49,.060) 15%,
      rgba(5,17,46,.080) 42%,
      rgba(5,16,43,.105) 100%) !important;

  backdrop-filter: blur(6px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(108%) !important;

  border: 1px solid rgba(184,204,255,.27) !important;
  border-radius: 22px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    0 0 8px rgba(99,160,255,.08),
    0 0 18px rgba(85,67,218,.025),
    0 7px 18px rgba(0,0,20,.045) !important;
}

/* Do NOT shrink text as aggressively as V5.6. */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-v4-scroll {
  height: 100% !important;
  padding: 14px 18px 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Brand */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-v4-brand {
  gap: 8px !important;
  margin-bottom: 7px !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-v4-brand img {
  width: 34px !important;
  height: 36px !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-v4-brand strong {
  font-size: 26px !important;
}

/* Header */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-v4-header {
  margin-bottom: 7px !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-v4-header h1 {
  font-size: 21px !important;
  line-height: 1.12 !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-v4-header p {
  font-size: 11.5px !important;
  margin-top: 2px !important;
}

/* Tabs */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-identity-tabs--v4 {
  height: 36px !important;
  margin: 7px 0 8px !important;
  background: rgba(3,12,38,.24) !important;
  border-color: rgba(139,174,255,.35) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-identity-tabs--v4 button {
  font-size: 12.5px !important;
}

/* Fields */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-v4-fields {
  gap: 7px !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-v4-field {
  height: 38px !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-v4-field input {
  font-size: 12.5px !important;
  padding-left: 37px !important;
  background: rgba(3,12,38,.28) !important;
  border-color: rgba(143,176,255,.41) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-v4-field-icon {
  width: 17px !important;
  height: 17px !important;
}

/* Utility row */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-v4-utility {
  min-height: 25px !important;
  margin: 5px 0 !important;
  padding: 0 3px !important;
  font-size: 11.5px !important;
  background: transparent !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-v4-remember input {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
}

/* Main button */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-primary--v4 {
  height: 39px !important;
  margin-top: 6px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
}

/* Register switch */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-v4-mode-switch {
  min-height: 25px !important;
  margin: 4px 0 !important;
  font-size: 11.5px !important;
  background: transparent !important;
}

/* Confirmation */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-confirm--v4 {
  margin-top: 5px !important;
  padding: 8px 9px !important;
  gap: 5px !important;
  border-radius: 11px !important;
  background: rgba(3,12,38,.22) !important;
  border-color: rgba(143,176,255,.24) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-confirm--v4 h2 {
  font-size: 13.5px !important;
  line-height: 1.18 !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-check--v4 {
  grid-template-columns: 17px minmax(0,1fr) !important;
  gap: 7px !important;
  font-size: 10.8px !important;
  line-height: 1.36 !important;
}
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-check--v4 input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
}

/* Footer */
.commercial-auth-shell--v4.commercial-auth-shell--v5-video
.commercial-auth-card--v4.is-login .commercial-auth-footer-note-v4 {
  margin-top: 5px !important;
  font-size: 9.5px !important;
  line-height: 1.34 !important;
  background: transparent !important;
}

/* Override V5.3's old responsive authority too. */
@media (max-width: 900px) {
  .commercial-auth-shell--v4.commercial-auth-shell--v5-video
  .commercial-auth-card--v4.is-login {
    left: 53.5% !important;
    width: min(405px, 58vw) !important;
    max-width: 405px !important;
    height: min(590px, 72vh) !important;
    max-height: min(590px, 72vh) !important;
  }
}

@media (max-height: 720px) {
  .commercial-auth-shell--v4.commercial-auth-shell--v5-video
  .commercial-auth-card--v4.is-login {
    height: min(570px, 76vh) !important;
    max-height: min(570px, 76vh) !important;
  }
}
/* DREAMFLOW_LOGIN_V5_7_REAL_SMALL_GLASS_END */

/* DREAMFLOW_LOGIN_V5_8_LEGAL_RETURN_STABLE_START
   Position fallback for the brief moment after React recreates the auth shell
   and before the V5 video lifecycle observer attaches its class.

   IMPORTANT:
   These values match the current V5.7/V5.3 geometry.
   They do NOT resize the current cards.
*/

/* Current LOGIN geometry from V5.7. */
.commercial-auth-shell--v4:not(.commercial-auth-shell--v5-video)
.commercial-auth-card--v4.is-login {
  position: fixed !important;
  left: 54.5% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;

  width: min(420px, 52vw) !important;
  max-width: 420px !important;
  min-width: 0 !important;

  height: min(610px, 70vh) !important;
  max-height: min(610px, 70vh) !important;
  min-height: 0 !important;

  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
}

/* Current REGISTER geometry from V5.3.
   This is the state that existed BEFORE entering agreement/privacy pages. */
.commercial-auth-shell--v4:not(.commercial-auth-shell--v5-video)
.commercial-auth-card--v4.is-register {
  position: fixed !important;
  left: 56% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;

  width: min(565px, 75vw) !important;
  max-width: 565px !important;
  min-width: 0 !important;

  height: 92vh !important;
  max-height: 92vh !important;
  min-height: 0 !important;

  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
}

/* Match the existing responsive authority as well, so there is no left jump
   at Windows scaling / narrower CSS viewport sizes. */
@media (max-width: 900px) {
  .commercial-auth-shell--v4:not(.commercial-auth-shell--v5-video)
  .commercial-auth-card--v4.is-login {
    left: 53.5% !important;
    width: min(405px, 58vw) !important;
    max-width: 405px !important;
    height: min(590px, 72vh) !important;
    max-height: min(590px, 72vh) !important;
  }

  .commercial-auth-shell--v4:not(.commercial-auth-shell--v5-video)
  .commercial-auth-card--v4.is-register {
    left: 55% !important;
    width: min(545px, 80vw) !important;
    max-width: 545px !important;
    height: 93vh !important;
    max-height: 93vh !important;
  }
}
/* DREAMFLOW_LOGIN_V5_8_LEGAL_RETURN_STABLE_END */