/* PC chrome overrides for Figma 45557:22204 / 45278:18690.
   Loaded from page templates so it can beat header.css without editing that file. */
@media (min-width: 769px) {
  html body.pc-content-page,
  html body.desktop-search-page,
  html body.person-center-page {
    --pc-accent: var(--color-brand-primary);
    --color-primary-500: var(--color-brand-primary);
    --color-primary-alpha-10: rgba(var(--color-brand-primary-rgb), 0.12);
  }

  html body .site-header {
    --color-primary-500: var(--color-brand-primary);
    --color-primary-alpha-10: rgba(var(--color-brand-primary-rgb), 0.12);
    background: #0e1012;
    border-bottom-color: #ffffff1a;
  }

  html body .site-header__logo-wrap:focus-visible {
    box-shadow: 0 3px 0 var(--color-brand-primary);
  }

  html body .site-header__desktop-nav {
    --pc-header-nav-width: 393.20513916015625px;
    gap: 32px;
    width: var(--pc-header-nav-width);
    justify-content: space-between;
  }

  html body .site-header__desktop-nav-item {
    color: #ffffff8c;
    font-size: 18px;
    line-height: 24px;
  }

  html body .site-header__desktop-nav { height: 34px; }
  html body .site-header__desktop-nav-item { height: 24px; font-weight: 400; }
  html body a.site-header__desktop-nav-item:hover,
  html body a.site-header__desktop-nav-item:focus-visible,
  html body .site-header__desktop-nav-item.is-active { color: #00caf7; }
  html body .site-header__desktop-nav-item.is-active { height: 34px; }
  html body .site-header__desktop-nav-item.is-active::after {
    top: 32px; bottom: auto; left: 0; width: 100%; height: 2px;
    border-radius: 0; background: #00caf7; transform: none;
  }

  html body .site-header .site-header__search {
    flex: 1 1 219px;
    width: 219px;
    min-width: 0;
    min-height: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px 18px;
    background: #ffffff0d;
    border: 0;
    box-shadow: inset 0 0 0 1px #00000008;
    gap: 10px;
  }

  html body .site-header .site-header__search-input { color: #fff; font-size: 14px; line-height: 20px; font-weight: 400; }
  html body .site-header .site-header__search-input::placeholder { color: #ffffff59; }

  html body .site-header .site-header__right {
    gap: 16px;
    flex: 1;
    margin-left: 48px;
  }

  html body .site-header__desktop-download {
    width: 96px;
    flex-basis: 96px;
    box-sizing: border-box;
    height: 24px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-accent-cyan);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    gap: 8px;
  }

  html body .site-header__desktop-download:hover,
  html body .site-header__desktop-download:focus-visible {
    color: var(--color-accent-cyan);
  }

  html body .site-header__download-icon {
    filter: none;
  }

  html body .site-header__desktop-coins {
    min-width: 83px;
    height: 36px;
    padding: 4px 12px;
    border: 1px solid var(--color-accent-cyan);
    border-radius: 100px;
    background: #defaff;
    color: #694923;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
  }

  html body .site-header__desktop-member {
    min-width: 116px;
    height: 36px;
    padding: 4px 12px;
    gap: 4px;
    border-radius: 100px;
    background: linear-gradient(162.76deg, #ffe580 0%, #facc15 100%);
    color: #694923;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
  }
  html body .site-header:not(.has-account) .site-header__desktop-coins,
  html body .site-header:not(.has-account) .site-header__desktop-member { display: none; }
  html body .site-header:not(.has-account) .site-header__search { margin-right: 32px; }
  html body .site-header:not(.has-account) .site-header__logo-wrap { flex-basis: 85.12820434570312px; width: 85.12820434570312px; }
  html body .site-header:not(.has-account) .site-header__logo { width: 85.12820434570312px; }
  html body .site-header:not(.has-account) .site-header__desktop-nav { --pc-header-nav-width: 392.8717956542969px; }
  html body .site-header .site-header__user { display: flex; width: 120px; height: 36px; padding: 4px 20px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 8px; background: #00caf7; color: #292929; }
  html body .site-header .site-header__avatar { display: none; width: 48px; height: 48px; }
  html body .site-header .site-header__guest-label { display: block; color: #292929; font: 400 16px/22px "PingFang SC", sans-serif; white-space: nowrap; }
  html body .site-header.has-account .site-header__user { width: 48px; height: 48px; padding: 0; border-radius: 50%; background: none; }
  html body .site-header.has-account .site-header__avatar { display: block; }
  html body .site-header.has-account .site-header__guest-label { display: none; }

}

@media (min-width: 1251px) {
  /* Preserve the four-item source spacing when activities are disabled.
     The source labels occupy 180px; backend labels keep their natural width. */
  html body .site-header__desktop-nav:not(:has([data-page-tab-key="activity"])) {
    width: auto;
    justify-content: flex-start;
    gap: calc((var(--pc-header-nav-width) - 180px) / 3);
  }
}

@media (min-width: 769px) and (max-width: 1250px) {
  html body .site-header__desktop-nav { gap: 28px; width: auto; }
  html body .site-header:not(.has-account) .site-header__desktop-nav { width: auto; }
  html body .site-header:not(.has-account) .site-header__search { margin-right: 0; }
  html body .site-header .site-header__search { width: 190px; }
  html body .site-header__desktop-download span { display: none; }
  html body .site-header__desktop-download { width: 24px; flex-basis: 24px; }
  html body .site-header__desktop-member { min-width: 108px; padding-inline: 9px; }
}

@media (min-width: 769px) and (max-width: 940px) {
  html body .site-header__desktop-coins { display: none; }
  html body .site-header__desktop-nav { gap: 20px; }
}

/* Search page 45785:269563 — shared chrome and page spacing. */
@media (min-width: 769px) {
  html body.desktop-search-page,
  html body.desktop-search-page .desktop-search-main {
    background: var(--site-background, #010406);
  }

  html body.desktop-search-page .desktop-search-field {
    height: 44px;
    padding: 0 13px;
    border: 1px solid #ffffff1a;
    background: #ffffff1a;
  }

  html body.desktop-search-page .desktop-search-field input:-webkit-autofill,
  html body.desktop-search-page .desktop-search-field input:-webkit-autofill:hover,
  html body.desktop-search-page .desktop-search-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1a1b1e inset;
  }

  html body.desktop-search-page .desktop-search-form button[type="submit"] {
    width: 96px;
    height: 44px;
    padding: 11px 32px;
    border-radius: 999px;
    color: #292929;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
  }

  html body.desktop-search-page .desktop-search-hot h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
  }

  html body.desktop-search-page .desktop-search-hot__tags {
    min-height: 36px;
    gap: 12px;
  }

  html body.desktop-search-page .desktop-search-hot__tags a {
    flex: 0 0 100px;
    width: 100px;
    height: 36px;
    padding: 8px 24px;
    border-radius: 6px;
    background: #ffffff0d;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
  }

  html body.desktop-search-page .desktop-search-hot__tags a:hover,
  html body.desktop-search-page .desktop-search-hot__tags a.is-active {
    background: rgba(0, 202, 247, 0.1490196078);
    color: var(--color-accent-cyan);
  }

  html body.desktop-search-page .desktop-search-tabs a {
    color: #ffffff8c;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
  }

  html body.desktop-search-page .desktop-search-tabs a.is-active {
    color: #fff;
    font-weight: 600;
  }

  html body.desktop-search-page .desktop-search-tabs a.is-active::after {
    width: 16px;
    height: 3px;
    border-radius: var(--site-radius, 12px);
    background: var(--color-accent-cyan);
  }

  html body.desktop-search-page .desktop-search-result-count {
    color: #ffffff8c;
  }

  html body.desktop-search-page .desktop-search-result-count strong {
    color: var(--color-accent-cyan);
  }
}

/* Person center 45829:14850. Its page stylesheet owns the cyan controls. */
@media (min-width: 769px) {
  html body.person-center-page {
    background: var(--site-background, #010406);
  }

  html body.person-center-page .desktop-profile-user .mobile-profile-stats:focus-visible,
  html body.person-center-page .mobile-profile-empty button:focus-visible,
  html body.person-center-page .mobile-profile-library button:focus-visible,
  html body.person-center-page .mobile-profile-card__action:focus-visible {
    outline-color: var(--color-accent-cyan);
  }

  html body.person-center-page .mobile-profile-library__filters button {
    background: #ffffff1a;
    color: #ffffff8c;
  }

  html body.person-center-page .mobile-profile-card__action:hover {
    border-color: rgba(var(--color-brand-primary-rgb), 0.62);
  }
}