/* V18 login redesign — presentation only. Authentication IDs and behavior stay unchanged. */

#auth-screen.auth-screen {
  min-height: 100dvh !important;
  padding: clamp(18px, 3vw, 46px) !important;
  background:
    linear-gradient(120deg, rgba(225, 250, 255, .9), rgba(255, 244, 214, .82)),
    url('../assets/bg-login.png') center / cover fixed !important;
}

#auth-screen.auth-screen::before {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 8% 16%, rgba(255, 209, 67, .42), transparent 22%),
    radial-gradient(circle at 91% 14%, rgba(41, 196, 255, .36), transparent 25%),
    radial-gradient(circle at 86% 88%, rgba(255, 98, 145, .28), transparent 23%) !important;
  content: '' !important;
}

#auth-screen .auth-card.auth-experience {
  position: relative !important;
  z-index: 1 !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(430px, .82fr) !important;
  width: min(1360px, 100%) !important;
  min-height: min(790px, calc(100dvh - 64px)) !important;
  border: 3px solid rgba(255, 255, 255, .94) !important;
  border-radius: 38px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 30px 80px rgba(24, 64, 112, .24), 0 8px 22px rgba(43, 94, 152, .12) !important;
}

#auth-screen .auth-showcase {
  position: relative !important;
  isolation: isolate !important;
  padding: clamp(34px, 4vw, 60px) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 84% 13%, rgba(255, 231, 91, .58), transparent 23%),
    radial-gradient(circle at 10% 82%, rgba(65, 229, 198, .42), transparent 30%),
    linear-gradient(145deg, #3157e7 0%, #6d45e9 53%, #0ca6c9 100%) !important;
}

#auth-screen .auth-showcase::before {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  opacity: .18 !important;
  background: url('../assets/bg-login.png') center / cover !important;
  content: '' !important;
}

#auth-screen .auth-showcase::after {
  right: -110px !important;
  bottom: -115px !important;
  z-index: -1 !important;
  width: 390px !important;
  height: 390px !important;
  border: 75px solid rgba(255, 255, 255, .1) !important;
}

#auth-screen .auth-showcase-top {
  align-items: flex-start !important;
}

#auth-screen .auth-logo-wrap {
  position: relative !important;
  width: clamp(250px, 24vw, 340px) !important;
  min-height: 150px !important;
  padding: 10px 22px !important;
  border: 2px solid rgba(255, 255, 255, .75) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 18px 40px rgba(19, 38, 114, .3), inset 0 0 0 5px rgba(76, 211, 255, .1) !important;
  transform: rotate(-1.5deg) !important;
}

#auth-screen .auth-logo-wrap::after {
  position: absolute !important;
  right: -12px !important;
  bottom: -12px !important;
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border: 4px solid #fff !important;
  border-radius: 50% !important;
  background: #ffd54a !important;
  box-shadow: 0 8px 18px rgba(38, 57, 130, .28) !important;
  content: '★' !important;
  color: #7049e8 !important;
  font-size: 23px !important;
}

#auth-screen .auth-brand-logo {
  width: 100% !important;
  max-width: none !important;
  height: 132px !important;
  max-height: none !important;
  object-fit: contain !important;
  filter: saturate(1.18) contrast(1.04) !important;
}

#auth-screen .auth-season-badge {
  padding: 11px 16px !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  background: rgba(19, 40, 131, .28) !important;
  box-shadow: 0 8px 20px rgba(22, 35, 108, .15) !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  backdrop-filter: blur(10px) !important;
}

#auth-screen .auth-hero-copy {
  margin: auto 0 34px !important;
}

#auth-screen .auth-kicker {
  display: inline-flex !important;
  padding: 8px 12px !important;
  color: #233aa8 !important;
  border-radius: 999px !important;
  background: #74f0dc !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}

#auth-screen .auth-hero-copy h1 {
  margin: 18px 0 16px !important;
  color: #fff !important;
  font-size: clamp(48px, 4.3vw, 72px) !important;
  font-weight: 950 !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  text-shadow: 0 5px 0 rgba(31, 54, 154, .28), 0 14px 30px rgba(20, 35, 112, .25) !important;
}

#auth-screen .auth-hero-copy h1 span {
  color: #ffe567 !important;
  text-shadow: 0 4px 0 rgba(169, 91, 33, .22) !important;
}

#auth-screen .auth-hero-copy p {
  max-width: 650px !important;
  color: rgba(255, 255, 255, .94) !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  line-height: 1.65 !important;
}

#auth-screen .auth-feature-grid {
  gap: 14px !important;
  margin-bottom: 30px !important;
}

#auth-screen .auth-feature-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 92px !important;
  padding: 16px !important;
  border: 1px solid rgba(255, 255, 255, .4) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .15) !important;
  box-shadow: 0 10px 24px rgba(20, 38, 112, .13) !important;
}

#auth-screen .auth-feature-icon {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .93) !important;
  box-shadow: 0 7px 16px rgba(24, 43, 119, .18) !important;
  font-size: 24px !important;
}

#auth-screen .auth-feature-card strong {
  margin-bottom: 4px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

#auth-screen .auth-feature-card small {
  color: rgba(255, 255, 255, .82) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#auth-screen .online-pulse {
  color: rgba(255, 255, 255, .9) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

#auth-screen .mini-avatars span,
#auth-screen .mini-avatars b {
  width: 36px !important;
  height: 36px !important;
  font-size: 12px !important;
}

#auth-screen .auth-panel {
  padding: clamp(38px, 4vw, 62px) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(101, 224, 255, .2), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f8fbff 100%) !important;
}

#auth-screen .panel-kicker {
  color: #5b4bd8 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
}

#auth-screen .auth-panel-heading h2 {
  margin: 10px 0 !important;
  color: #172554 !important;
  font-size: clamp(34px, 3vw, 44px) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
}

#auth-screen .auth-panel-heading p {
  margin-bottom: 26px !important;
  color: #52627a !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

#auth-screen .auth-tabs {
  gap: 7px !important;
  margin-bottom: 24px !important;
  padding: 6px !important;
  border: 1px solid #dae5f6 !important;
  border-radius: 17px !important;
  background: #edf4ff !important;
}

#auth-screen .auth-tab {
  min-height: 50px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

#auth-screen .auth-tab.active {
  color: #fff !important;
  background: linear-gradient(135deg, #6448e8, #2388f2) !important;
  box-shadow: 0 9px 20px rgba(72, 74, 210, .28) !important;
}

#auth-screen .input-group {
  margin-bottom: 17px !important;
}

#auth-screen .input-group label {
  margin-bottom: 8px !important;
  color: #263653 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

#auth-screen .input-shell {
  min-height: 58px !important;
  border: 2px solid #dbe6f5 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 7px 18px rgba(41, 76, 125, .06) !important;
}

#auth-screen .input-shell:focus-within {
  border-color: #6757e8 !important;
  box-shadow: 0 0 0 5px rgba(103, 87, 232, .12), 0 9px 20px rgba(41, 76, 125, .08) !important;
}

#auth-screen .input-shell > span {
  min-width: 48px !important;
  padding-left: 16px !important;
  color: #6a5ce2 !important;
  font-size: 12px !important;
}

#auth-screen .input-shell input {
  min-height: 56px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

#auth-screen .auth-main-action {
  min-height: 60px !important;
  margin-top: 6px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 17px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff6b63 0%, #ff3f8f 100%) !important;
  box-shadow: 0 13px 24px rgba(245, 65, 118, .28), 0 5px 0 #c92e68 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

#auth-screen .auth-main-action:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 28px rgba(245, 65, 118, .34), 0 6px 0 #c92e68 !important;
}

#auth-screen .auth-main-action b {
  font-size: 25px !important;
}

#auth-screen .auth-divider {
  margin: 21px 0 !important;
  font-size: 12px !important;
}

#auth-screen .google-btn {
  min-height: 56px !important;
  border: 2px solid #dbe6f5 !important;
  border-radius: 16px !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  box-shadow: 0 7px 18px rgba(41, 76, 125, .06) !important;
}

#auth-screen .google-mark {
  width: 32px !important;
  height: 32px !important;
  font-size: 17px !important;
}

#auth-screen .auth-runtime-line,
#auth-screen .auth-message {
  font-size: 12px !important;
}

@media (max-width: 1050px) {
  #auth-screen .auth-card.auth-experience {
    grid-template-columns: minmax(0, 1fr) minmax(400px, .92fr) !important;
  }

  #auth-screen .auth-feature-grid {
    grid-template-columns: 1fr !important;
  }

  #auth-screen .auth-feature-card {
    min-height: 70px !important;
  }
}

@media (max-width: 820px) {
  #auth-screen.auth-screen {
    padding: 14px !important;
  }

  #auth-screen .auth-card.auth-experience {
    grid-template-columns: 1fr !important;
    width: min(620px, 100%) !important;
    border-radius: 28px !important;
  }

  #auth-screen .auth-showcase {
    min-height: 420px !important;
    padding: 28px !important;
  }

  #auth-screen .auth-logo-wrap {
    width: 250px !important;
    min-height: 118px !important;
  }

  #auth-screen .auth-brand-logo {
    height: 100px !important;
  }

  #auth-screen .auth-hero-copy {
    margin: 46px 0 0 !important;
  }

  #auth-screen .auth-hero-copy h1 {
    font-size: clamp(40px, 9vw, 56px) !important;
  }

  #auth-screen .auth-feature-grid,
  #auth-screen .auth-showcase-footer {
    display: none !important;
  }

  #auth-screen .auth-panel {
    padding: 34px 28px 38px !important;
  }
}

@media (max-width: 520px) {
  #auth-screen .auth-showcase {
    min-height: 350px !important;
    padding: 22px !important;
  }

  #auth-screen .auth-season-badge {
    display: none !important;
  }

  #auth-screen .auth-logo-wrap {
    width: 220px !important;
    min-height: 104px !important;
  }

  #auth-screen .auth-brand-logo {
    height: 88px !important;
  }

  #auth-screen .auth-hero-copy h1 {
    font-size: 38px !important;
  }

  #auth-screen .auth-hero-copy p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  #auth-screen .auth-panel {
    padding: 28px 20px 32px !important;
  }

  #auth-screen .auth-panel-heading h2 {
    font-size: 32px !important;
  }
}