/* Site-wide notice: DuokaiBrowser has been upgraded to DSphere Agent Browser.
   The banner stays pinned at the top; the sticky header and section navs pin just below it.
   js/upgrade-banner.js keeps --upgrade-banner-height in sync with the real height (it wraps on phones);
   the values here are only fallbacks. */
:root {
  --upgrade-banner-height: 41px;
}

@media screen and (max-width: 767px) {
  :root {
    --upgrade-banner-height: 62px;
  }
}

html {
  scroll-padding-top: var(--upgrade-banner-height);
}

html body [role="banner"].w-nav {
  top: var(--upgrade-banner-height);
}

html body .quick-nav {
  top: calc(var(--upgrade-banner-height) + var(--quick-nav-header-height, 70px));
}

html body .ba-section-nav {
  top: calc(var(--upgrade-banner-height) + 70px);
}

.upgrade-banner {
  position: sticky;
  top: 0;
  z-index: 10060;
  padding: 10px 16px;
  background: linear-gradient(90deg, #4830e6 0%, #5145e5 50%, #563aff 100%);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.upgrade-banner__text {
  margin: 0;
}

.upgrade-banner__text,
.upgrade-banner__text strong {
  color: #fff;
}

.upgrade-banner__text strong {
  font-weight: 600;
}

.upgrade-banner__link {
  display: inline-block;
  margin-left: 12px;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.upgrade-banner__link:hover,
.upgrade-banner__link:focus-visible {
  color: #eeecff;
  text-decoration-thickness: 2px;
}

@media screen and (max-width: 479px) {
  .upgrade-banner {
    font-size: 13px;
  }

  .upgrade-banner__link {
    display: block;
    margin: 2px 0 0;
  }
}

/* Bottom variant: last element in <body>, so it sticks to the bottom of the viewport
   while scrolling and settles below the footer instead of covering it. */
.upgrade-banner--bottom {
  top: auto;
  bottom: 0;
  padding: 12px 16px;
  background: rgba(2, 6, 23, 0.94);
  box-shadow: 0 -8px 24px rgba(15, 18, 28, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.upgrade-banner--bottom .upgrade-banner__link {
  margin-left: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #5145e5;
  text-decoration: none;
}

.upgrade-banner--bottom .upgrade-banner__link:hover,
.upgrade-banner--bottom .upgrade-banner__link:focus-visible {
  color: #fff;
  background: #563aff;
}

@media screen and (max-width: 479px) {
  .upgrade-banner--bottom .upgrade-banner__link {
    display: table;
    margin: 8px auto 0;
  }
}