/* Dark technical auth/subscription gate refresh. IDs and auth flow stay unchanged. */
#authGatePage,
#subscriptionGate,
.sub-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 70% 55% at 50% 10%, rgba(255, 255, 255, 0.035), transparent 62%),
    radial-gradient(ellipse 42% 36% at 58% 42%, rgba(92, 136, 176, 0.08), transparent 70%),
    radial-gradient(ellipse 70% 65% at 50% 54%, transparent 0%, rgba(0, 0, 0, 0.68) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.048) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.048) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    #050505 !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 64px 64px, 64px 64px, 20px 20px, 20px 20px, 100% 100% !important;
}

#authGatePage {
  padding: 24px;
  overflow-y: auto;
}

#authGatePage .gate-card,
.sub-gate-inner,
.sub-gate-card {
  width: min(100%, 520px);
  max-width: 520px !important;
  text-align: center;
  padding: 0 !important;
}

#subscriptionGate > div,
.sub-gate-wrap {
  width: 100% !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
}

#subscriptionGate > div > div {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  text-align: center !important;
}

#authGatePage .gate-brand,
.sub-gate-brand,
#subscriptionGate > div > div > div:first-of-type {
  font-size: clamp(42px, 10vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 0.96 !important;
  color: #fff !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: 0 !important;
}

#authGatePage .gate-sub,
.sub-gate-sub,
#subscriptionGate > div > div > div:nth-of-type(2) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: rgba(250, 250, 250, 0.32) !important;
  margin-bottom: 1.5rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

#authGatePage .gate-box,
.sub-gate-box,
#subscriptionGate > div > div > div:nth-of-type(3) {
  background:
    radial-gradient(circle at 50% 0%, rgba(92, 136, 176, 0.16), transparent 48%),
    rgba(8, 8, 9, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 8px !important;
  padding: 2.25rem !important;
  margin-bottom: 1rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#authGatePage .gate-icon,
.sub-gate-icon,
#subscriptionGate > div > div > div:nth-of-type(3) > div:first-of-type {
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 1.5rem !important;
  background: rgba(92, 136, 176, 0.12) !important;
  border: 1px solid rgba(92, 136, 176, 0.26) !important;
  border-radius: 8px !important;
  color: #9fc4e6 !important;
}

#authGatePage .gate-icon svg,
.sub-gate-icon svg,
#subscriptionGate > div > div > div:nth-of-type(3) > div:first-of-type svg {
  stroke: currentColor !important;
}

#authGatePage .gate-title,
.sub-gate-title,
#subscriptionGate h2 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: 0 !important;
}

#authGatePage .gate-desc,
.sub-gate-desc,
#subscriptionGate p:not(#gateUserInfo) {
  color: rgba(250, 250, 250, 0.62) !important;
  line-height: 1.65 !important;
  margin-bottom: 1.5rem !important;
  font-size: 0.95rem !important;
}

#authGatePage .gate-signin,
.sub-gate-cta,
#subscriptionGate a[href*="/billing/plans"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  min-height: 52px;
  padding: 0 2rem !important;
  background: #fff !important;
  color: #050505 !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

#authGatePage .gate-signin:hover,
.sub-gate-cta:hover,
#subscriptionGate a[href*="/billing/plans"]:hover {
  opacity: 1 !important;
  background: rgba(250, 250, 250, 0.88) !important;
  transform: translateY(-1px);
}

#authGatePage .gate-plans,
.sub-gate-manage,
.sub-gate-userinfo,
#subscriptionGate a[href*="/billing"]:not([href*="/plans"]),
#gateUserInfo {
  color: rgba(250, 250, 250, 0.46) !important;
}

#authGatePage .gate-plans:hover,
.sub-gate-manage:hover,
#subscriptionGate a[href*="/billing"]:not([href*="/plans"]):hover {
  color: rgba(250, 250, 250, 0.72) !important;
}

[data-theme="light"] #authGatePage,
[data-theme="light"] #subscriptionGate,
[data-theme="light"] .sub-gate-overlay {
  background:
    radial-gradient(ellipse 70% 55% at 50% 10%, rgba(0, 0, 0, 0.035), transparent 62%),
    radial-gradient(ellipse 42% 36% at 58% 42%, rgba(74, 114, 143, 0.08), transparent 70%),
    radial-gradient(ellipse 70% 65% at 50% 54%, transparent 0%, rgba(255, 255, 255, 0.74) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.018) 1px, transparent 1px),
    #fafafa !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 64px 64px, 64px 64px, 20px 20px, 20px 20px, 100% 100% !important;
}

[data-theme="light"] #authGatePage .gate-brand,
[data-theme="light"] .sub-gate-brand,
[data-theme="light"] #subscriptionGate > div > div > div:first-of-type,
[data-theme="light"] #authGatePage .gate-title,
[data-theme="light"] .sub-gate-title,
[data-theme="light"] #subscriptionGate h2 {
  color: #18181b !important;
}

[data-theme="light"] #authGatePage .gate-sub,
[data-theme="light"] .sub-gate-sub,
[data-theme="light"] #subscriptionGate > div > div > div:nth-of-type(2) {
  color: #a1a1aa !important;
}

[data-theme="light"] #authGatePage .gate-box,
[data-theme="light"] .sub-gate-box,
[data-theme="light"] #subscriptionGate > div > div > div:nth-of-type(3) {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] #authGatePage .gate-desc,
[data-theme="light"] .sub-gate-desc,
[data-theme="light"] #subscriptionGate p:not(#gateUserInfo) {
  color: #52525b !important;
}

[data-theme="light"] #authGatePage .gate-signin,
[data-theme="light"] .sub-gate-cta,
[data-theme="light"] #subscriptionGate a[href*="/billing/plans"] {
  background: #18181b !important;
  color: #fff !important;
}

[data-theme="light"] #authGatePage .gate-signin:hover,
[data-theme="light"] .sub-gate-cta:hover,
[data-theme="light"] #subscriptionGate a[href*="/billing/plans"]:hover {
  background: #3f3f46 !important;
}

[data-theme="light"] #authGatePage .gate-plans,
[data-theme="light"] .sub-gate-manage,
[data-theme="light"] .sub-gate-userinfo,
[data-theme="light"] #subscriptionGate a[href*="/billing"]:not([href*="/plans"]),
[data-theme="light"] #gateUserInfo {
  color: #71717a !important;
}

@media (max-width: 520px) {
  #authGatePage {
    align-items: flex-start;
    padding: 92px 20px 20px;
  }

  #authGatePage .gate-box,
  .sub-gate-box {
    padding: 1.75rem !important;
  }

  #authGatePage .gate-signin,
  .sub-gate-cta {
    width: 100%;
  }
}