/* TGFX website styles - based on Figma design */

/* ==================== Import Google Fonts ==================== */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;500;600&family=Inter:wght@400;500;600&family=Roboto:wght@300;400;500;600&display=swap');

/* ==================== Variable definitions ==================== */
:root {
  --tgfx-primary: #0066FF;
  --tgfx-primary-light: #3385FF;
  --tgfx-primary-hover: #0052CC;
  --tgfx-dark: #00173A;
  --tgfx-white: #ffffff;
  --tgfx-black: #000000;
  --tgfx-gray: #666666;
  --tgfx-gray-light: #999999;
  --tgfx-light-bg: #F8FAFF;
  --tgfx-max-width: 1440px;
  --tgfx-content-width: 1320px;
  /*Static assets base URL configuration*/
  /*For production: use CDN URL 'https://pag.qq.com/tgfx'*/
  /*For local development: use empty string '..' to load from localhost root*/
  --static-base-url:'https://pag.qq.com/tgfx';
}

/* ==================== Docs page style fixes ==================== */
/* Remove gray line below navbar on all pages */
body .navPusher .mainContainer .wrapper .post .postHeader:before {
  height: 0px !important;
  margin-top: 0px !important;
  display: none !important;
  content: none !important;
  border: none !important;
}

.docsContainer .wrapper .post .postHeader {
  border-bottom: none !important;
  margin-bottom: 0px !important;
  box-shadow: none !important;
}

.docsContainer .wrapper .post .postHeader hr {
  display: none !important;
}

/* Remove line below docs title */
body .navPusher .mainContainer .wrapper .post article hr:first-of-type {
  display: none !important;
}

.docsContainer article hr:first-of-type {
  display: none !important;
}

/* Remove line below homepage navbar */
body .homePageNavPusher.navPusher .docMainWrapper .mainContainer .wrapper .post .postHeader {
  margin-bottom: 0px !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body .homePageNavPusher.navPusher .docMainWrapper .mainContainer .wrapper .post .postHeader:before {
  height: 0px !important;
  margin-top: 0px !important;
  display: none !important;
  content: none !important;
  border: none !important;
}

/* Fix docs content being obscured by fixed navbar */
.docsContainer .wrapper .post {
  padding-top: 30px !important;
}

/* Fix homePageNavPusher docs content being obscured */
body .homePageNavPusher.navPusher .docMainWrapper .mainContainer {
  padding-top: 70px !important;
}

/* Hide default Docusaurus doc header on home/intro pages to avoid duplicates */
.homePageNavPusher .postHeader,
.homePageNavPusher .post article > hr:first-child,
.homePageNavPusher .post article > h1:first-child {
  display: none !important;
}

.docsContainer article {
  padding-top: 0 !important;
}

/* Ensure title container is not obscured */
.titleContainer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ==================== Docs page styles (from PAG) ==================== */
body .homePageNavPusher.navPusher .docMainWrapper {
  background: #ffffff;
}

/* PC: show .titleContainer.pc, hide .titleContainer.mobile */
body .homePageNavPusher.navPusher .docMainWrapper .titleContainer.pc {
  display: flex;
  color: #000000;
  margin-bottom: 60px;
  flex-direction: column;
  position: relative;
}

body .homePageNavPusher.navPusher .docMainWrapper .titleContainer.mobile {
  display: none;
}

body .homePageNavPusher.navPusher .docMainWrapper .titleContainer .titleContainerTitle {
  max-width: 520px;
  flex: 1;
  margin-right: 60px;
}

body .homePageNavPusher.navPusher .docMainWrapper .titleContainer .titleContainerTitle .titleContainerTitleText {
  font-size: 48px;
  margin-bottom: 40px;
  color: #24292e;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 600;
  line-height: 48px;
}

.titleContainer .titleContainerTitleContent {
  color: #24292e;
  text-align: justify;
  font-size: 16px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper {
  margin-top: 60px;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .wrapperTitle {
  text-align: center;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 32px;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .wrapperTitle img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .wrapperTitle .wrapperTitleText {
  font-size: 32px;
  font-weight: 600;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .designContainer,
body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .developerContainer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
  font-weight: 300;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .designContainer .firstItem,
body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .developerContainer .firstItem {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .designContainer .firstItem .linkItem:last-of-type,
body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .developerContainer .firstItem .linkItem:last-of-type {
  border-right: none;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .designContainer .secondItem,
body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .developerContainer .secondItem {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .designContainer .secondItem .linkItem:last-of-type,
body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .developerContainer .secondItem .linkItem:last-of-type {
  border-right: none;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .designContainer .linkItem,
body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .developerContainer .linkItem {
  flex: 1;
  text-align: left;
  display: flex;
  padding: 32px 0px 40px 32px;
  flex-direction: column;
  align-items: flex-start;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .designContainer .linkItem .linkItemTitle,
body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .developerContainer .linkItem .linkItemTitle {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  margin-bottom: 48px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  color: #24292e;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .designContainer .linkItem .linkItemTitle::after,
body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .developerContainer .linkItem .linkItemTitle::after {
  display: inline;
  content: "";
  position: absolute;
  background: #ccc;
  width: 48px;
  height: 1px;
  top: 46px;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .designContainer .linkItem a,
body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .developerContainer .linkItem a {
  display: inline-block;
  text-align: center;
  color: #0000ff;
  font-weight: 400;
  margin-bottom: 24px;
  line-height: 22px;
  position: relative;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .designContainer .linkItem br,
body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .developerContainer .linkItem br {
  display: none;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .designContainer .linkItem a:last-of-type,
body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .developerContainer .linkItem a:last-of-type {
  margin-bottom: 0;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .designContainer .linkItem:nth-child(2n+1),
body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .developerContainer .linkItem:nth-child(2n+1) {
  background: #f9fbff;
}

body .homePageNavPusher.navPusher .docMainWrapper .designWrapper .developerContainer {
  margin-bottom: 0;
}

body .homePageNavPusher.navPusher .toc section .navGroups {
  padding-top: 0;
}

/* Fix left sidebar (toc) being obscured by fixed navbar */
body .toc,
body .docsNavContainer {
  padding-top:50px !important;
}

/* ==================== Global scroll fix and zoom lock ==================== */
html, body {
  height: auto !important;
  overflow-x: auto !important; /* Allow horizontal scrollbar for overflow */
  overflow-y: auto !important;
  min-width: 1440px; /* Lock min width to 1440px */
}

.navPusher {
  padding-top: 0 !important;
  min-width: 1440px;
}

/* When window is less than 1440px, page fixed at 1440px with horizontal scrollbar */
@media (max-width: 1440px) {
  body {
    width: 1440px !important;
    overflow-x: auto !important;
  }
}

/* Navbar container */
body .fixedHeaderContainer {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 80px !important;
  min-width: 1440px !important;
  backdrop-filter: saturate(180%) blur(20px);
  background-color: hsla(0, 0%, 100%, 0.7) !important; /* Match PAG: 80% opacity */
  z-index: 1000;
  padding: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(197, 197, 197, 0.2);
}

body .fixedHeaderContainer .wrapper {
  max-width: 1440px !important;
  width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  height: 80px !important;
  display: block !important;
  position: relative !important;
  box-sizing: border-box !important;
}

body .fixedHeaderContainer .headerWrapper {
  width: 100% !important;
  height: 80px !important;
  padding: 0 !important;
  position: relative !important;
}

body .fixedHeaderContainer .headerWrapper header {
  width: 100% !important;
  height: 80px !important;
  position: relative !important;
  display: block !important;
}

/* Logo - fixed position at viewport left */
body .fixedHeaderContainer .headerWrapper header > a:first-child {
  position: fixed !important;
  left: 32px !important; /* Match right margin */
  top: 18px !important;
  z-index: 1001 !important;
  display: block !important;
}

body .fixedHeaderContainer .headerWrapper img.logo {
  width: 150.22px !important;
  height: 44px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide title */
body .headerTitleWithLogo {
  display: none !important;
}

/* Nav items container - Figma: centered in viewport */
/* Using transform for true centering; right buttons are moved outside via JS */
body .navigationWrapper {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 0 !important;
  width: auto !important;
  height: 80px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body .navigationWrapper .slidingNav {
  width: auto !important;
  margin: 0 !important;
  background: transparent !important;
  position: static !important;
}

body .navigationSlider .slidingNav ul {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  /* gap: 0 !important; */
  padding: 0 !important;
  margin: 0 !important;
  height: 80px !important;
  list-style: none !important;
}

/* Nav item styles - matching PAG: width 448px, centered */
body .nav-site.nav-site-internal {
  width: auto !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important; /* Fixed gap between nav items */
  position: static !important;
}

/* First 3 nav items (首页, 下载，文档, 案例) - inline in nav container */
body .nav-site.nav-site-internal > li:nth-child(1),
body .nav-site.nav-site-internal > li:nth-child(2),
body .nav-site.nav-site-internal > li:nth-child(3),
body .nav-site.nav-site-internal > li:nth-child(4) {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none !important;
  display: flex !important;
}

/* Right 3 buttons (CN, GitHub, Forum) - fixed position relative to viewport */
/* Original buttons in nav are hidden; new container is used */
body .nav-site.nav-site-internal > li:nth-child(5),
body .nav-site.nav-site-internal > li:nth-child(6),
body .nav-site.nav-site-internal > li:nth-child(7) {
  display: none !important; /* Hidden, replaced by .tgfx-right-buttons */
}

/* Right buttons container - fixed position matching PAG */
.tgfx-right-buttons {
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  z-index: 1002 !important;
}

.tgfx-right-buttons > li {
  position: fixed !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  background: none !important;
}

/* Language button position - matching PAG: right: 402px */
.tgfx-right-buttons > li:nth-child(1) {
  right: 290px !important;
}

/* GitHub button position - matching PAG: right: 278px */
.tgfx-right-buttons > li:nth-child(2) {
  right: 166px !important;
}

/* Forum button position - matching PAG: right: 144px */
.tgfx-right-buttons > li:nth-child(3) {
  right: 32px !important;
}

/* English version - adjust positions for longer "Discussions" text */
html[lang='en'] .tgfx-right-buttons > li:nth-child(1) {
  right: 330px !important;
}

html[lang='en'] .tgfx-right-buttons > li:nth-child(2) {
  right: 206px !important;
}

html[lang='en'] .tgfx-right-buttons > li:nth-child(3) {
  right: 32px !important;
}

/* Nav item link styles - matching PAG: padding 6px 16px, font-weight 600 */
body .nav-site.nav-site-internal > li:nth-child(1) > a,
body .nav-site.nav-site-internal > li:nth-child(2) > a,
body .nav-site.nav-site-internal > li:nth-child(3) > a,
body .nav-site.nav-site-internal > li:nth-child(4) > a {
  font-family: 'PingFangSC-Semibold', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #000000 !important;
  text-decoration: none !important;
  padding: 6px 16px !important; /* Match PAG exactly */
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  height: 40px !important;
  line-height: 40px !important;
}

/* Active nav item - blue color */
body .nav-site.nav-site-internal li:nth-child(1).siteNavItemActive > a,
body .nav-site.nav-site-internal li:nth-child(2).siteNavItemActive > a,
body .nav-site.nav-site-internal li:nth-child(3).siteNavItemActive > a,
body .nav-site.nav-site-internal li:nth-child(4).siteNavItemActive > a,
body .nav-site.nav-site-internal li:nth-child(1).active > a,
body .nav-site.nav-site-internal li:nth-child(2).active > a,
body .nav-site.nav-site-internal li:nth-child(3).active > a,
body .nav-site.nav-site-internal li:nth-child(4).active > a {
  color: #0066FF !important;
}

/* Hover effect for nav items */
body .nav-site.nav-site-internal li:nth-child(1) a:hover,
body .nav-site.nav-site-internal li:nth-child(2) a:hover,
body .nav-site.nav-site-internal li:nth-child(3) a:hover,
body .nav-site.nav-site-internal li:nth-child(4) a:hover {
  color: #0066FF !important;
  background: transparent !important;
}

/* Active underline - Figma: 30px wide, 2px high, below text */
body .nav-site.nav-site-internal li.siteNavItemActive > a::after,
body .nav-site.nav-site-internal li.active > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 30px !important;
  height: 2px !important;
  background: #0066FF !important;
  border: none !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Hover underline */
body .nav-site.nav-site-internal > li:nth-child(1) a:hover::after,
body .nav-site.nav-site-internal > li:nth-child(2) a:hover::after,
body .nav-site.nav-site-internal > li:nth-child(3) a:hover::after,
body .nav-site.nav-site-internal > li:nth-child(4) a:hover::after {
  content: '' !important;
  position: absolute !important;
  bottom: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 30px !important;
  height: 2px !important;
  background: #0066FF !important;
  border: none !important;
  display: block !important;
}

/* ===== Right button styles ===== */

/* Reset all styles for right buttons to prevent conflicts */
body .nav-site.nav-site-internal > li:nth-child(5) a,
body .nav-site.nav-site-internal > li:nth-child(6) a,
body .nav-site.nav-site-internal > li:nth-child(7) a,
.tgfx-right-buttons > li:nth-child(1) a,
.tgfx-right-buttons > li:nth-child(2) a,
.tgfx-right-buttons > li:nth-child(3) a {
  background-image: none !important;
  background-color: transparent !important;
  background: transparent !important;
  float: none !important;
  text-decoration: none !important;
  margin: 0 !important; /* Override pc.css margin-top: 23px */
  margin-top: 0 !important; /* Explicitly reset margin-top */
}

/* CN language switch button - matching PAG style */
body .nav-site.nav-site-internal > li:nth-child(5) a,
.tgfx-right-buttons > li:nth-child(1) a {
  height: 40px !important;
  color: #333333 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: 'PingFangSC-Semibold', 'Inter', sans-serif !important;
  float: left !important;
  padding: 8px 12px 8px 32px !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;
  background-position: 12.7% 50% !important;
  background-image: url('https://pag.qq.com/tgfx/img/tgfximg/lang-globe.svg') !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

body .nav-site.nav-site-internal > li:nth-child(5) a::before,
.tgfx-right-buttons > li:nth-child(1) a::before {
  display: none !important;
}

body .nav-site.nav-site-internal > li:nth-child(5) a::after,
.tgfx-right-buttons > li:nth-child(1) a::after {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: calc(50% - 3px) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 6px solid #24292e !important;
  background: none !important;
  background-image: none !important;
}

/* GitHub button - matching PAG style */
/* Star animation keyframes - icon and text scale up then back down */
@keyframes tgfx-star-icon {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes tgfx-star-text {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

body .nav-site.nav-site-internal > li:nth-child(6) a,
.tgfx-right-buttons > li:nth-child(2) a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 102px !important;
  height: 40px !important;
  padding: 0 12px !important;
  color: #333333 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border: 1px solid #CCCCCC !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  transition: box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

/* Icon using ::before */
body .nav-site.nav-site-internal > li:nth-child(6) a::before,
.tgfx-right-buttons > li:nth-child(2) a::before {
  content: '' !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  background-image: url('https://pag.qq.com/tgfx/img/tgfximg/github_top.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  flex-shrink: 0 !important;
  transition: none !important;
}

body .nav-site.nav-site-internal > li:nth-child(6) a:hover,
.tgfx-right-buttons > li:nth-child(2) a:hover {
  box-shadow: inset 0 0 4px rgba(52, 149, 252, 0.24), 0 0 4px rgba(52, 149, 252, 0.24) !important;
  border-color: rgba(0, 90, 217, 0.46) !important;
}

/* Star icon animation on hover */
body .nav-site.nav-site-internal > li:nth-child(6) a:hover::before,
.tgfx-right-buttons > li:nth-child(2) a:hover::before {
  background-image: url('https://pag.qq.com/tgfx/img/tgfximg/star.png') !important;
  animation: tgfx-star-icon 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}

body .nav-site.nav-site-internal > li:nth-child(6) a::after,
.tgfx-right-buttons > li:nth-child(2) a::after {
  display: none !important;
  content: none !important;
}

/* Forum button - matching GitHub button height (40px) */
body .nav-site.nav-site-internal > li:nth-child(7) a,
.tgfx-right-buttons > li:nth-child(3) a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 106px !important;
  height: 40px !important;
  padding: 0 12px !important;
  color: #333333 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border: 1px solid #CCCCCC !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  transition: box-shadow 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  white-space: nowrap !important; /* Prevent text wrapping */
}

/* English version - "Discussions" is longer than "论坛交流" */
html[lang='en'] body .nav-site.nav-site-internal > li:nth-child(7) a,
html[lang='en'] .tgfx-right-buttons > li:nth-child(3) a {
  width: auto !important;
  min-width: 130px !important;
  padding: 0 16px !important;
}

body .nav-site.nav-site-internal > li:nth-child(7) a::before,
.tgfx-right-buttons > li:nth-child(3) a::before {
  content: '' !important;
  display: inline-block !important;
  width: 18px !important;
  height: 16px !important;
  background-image: url('https://pag.qq.com/tgfx/img/tgfximg/forum-icon.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  flex-shrink: 0 !important;
  position: static !important;
}

body .nav-site.nav-site-internal > li:nth-child(7) a:hover,
.tgfx-right-buttons > li:nth-child(3) a:hover {
  box-shadow: inset 0 0 4px rgba(52, 149, 252, 0.24), 0 0 4px rgba(52, 149, 252, 0.24) !important;
  border-color: rgba(0, 90, 217, 0.46) !important;
}

body .nav-site.nav-site-internal > li:nth-child(7) a::after,
.tgfx-right-buttons > li:nth-child(3) a::after {
  display: none !important;
  content: none !important;
}

/* Hide language switch span and original dropdown */
body .nav-site.nav-site-internal > span {
  display: none !important;
}

body #languages-menu {
  display: none !important;
}

body #languages-dropdown {
  display: none !important;
}

/* Clear focus/hover state background */
body .navigationSlider .slidingNav ul li > a:focus,
body .navigationSlider .slidingNav ul li > a:hover,
body .navigationSlider .slidingNav ul li.siteNavItemActive > a,
body .navigationSlider .slidingNav ul li.siteNavGroupActive > a:focus {
  background-color: transparent !important;
}

/* Remove underline for non-active state (except hover) */
body .nav-site.nav-site-internal > li > a::after {
  display: none !important;
}
body .nav-site.nav-site-internal li.siteNavItemActive > a::after,
body .nav-site.nav-site-internal li.active > a::after {
  display: block !important;
}

/* ==================== Base styles ==================== */
.tgfx-container {
  width: 100%;
  min-width: 1440px;
  overflow: visible;
  background: var(--tgfx-white);
  padding-top: 80px; /* Navbar height */
}

/* Unified button styles - strictly following design node-id 1:6815, 1:6816 */
.tgfx-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 60px;
  border-radius: 30px;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
  letter-spacing: 2px;
}

.tgfx-btn-primary {
  background: var(--tgfx-primary);
  color: var(--tgfx-white) !important;
  border: none;
}

.tgfx-btn-primary:hover {
  /*background: var(--tgfx-primary-hover);*/
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
}

.tgfx-btn-outline {
  background: transparent;
  color: var(--tgfx-primary) !important;
  border: 2px solid var(--tgfx-primary);
}

.tgfx-btn-outline:hover {
  /*background: rgba(0, 102, 255, 0.05);*/
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.1);
}

/* English version - reduce letter-spacing for hero buttons */
html[lang='en'] .tgfx-btn {
  letter-spacing: 0.5px;
}

/* English version - reduce letter-spacing for download button */
html[lang='en'] .tgfx-btn-download-dark {
  letter-spacing: 0.5px;
}

/* ==================== Hero section - center image with mirrored edge extension ==================== */
/* Background image actual size: 1920x580 */
.tgfx-hero {
  position: relative;
  width: 100%;
  min-width: 1440px;
  height: 580px; /* Match image height */
  display: flex;
  z-index: 3;
  align-items: center;
  overflow: hidden;
  background: #FFFFFF;
}

/* Main background - centered, original image */
.tgfx-hero-bg-center {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px; /* Original image width */
  height: 580px; /* Original image height */
  background: url('https://pag.qq.com/tgfx/img/tgfximg/tgfx-hero-background.webp') no-repeat center top;
  background-size: 1920px 580px;
  z-index: 2;
  pointer-events: none;
}

/* Left mirrored extension - flipped horizontally */
.tgfx-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: calc(50% + 960px); /* Start from left edge of center image */
  width: 1920px;
  height: 580px;
  background: url('https://pag.qq.com/tgfx/img/tgfximg/tgfx-hero-background.webp') no-repeat right top;
  background-size: 1920px 580px;
  transform: scaleX(-1); /* Mirror horizontally */
  z-index: 1;
  pointer-events: none;
}

/* Right mirrored extension - flipped horizontally */
.tgfx-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% + 960px); /* Start from right edge of center image */
  width: 1920px;
  height: 580px;
  background: url('https://pag.qq.com/tgfx/img/tgfximg/tgfx-hero-background.webp') no-repeat left top;
  background-size: 1920px 580px;
  transform: scaleX(-1); /* Mirror horizontally */
  z-index: 1;
  pointer-events: none;
}

/* ===== Hero Content - Pixel Perfect Layout ===== */
/* Figma specs (relative to page top, 1440px width):
   - Navbar: top=0, height=80px
   - Hero: top=80px, height=600px
   - Logo text: top=156.98px, left=60px, width=263px, height=72.02px
   - Subtitle: top=281px, left=60px, width=443px
   - Buttons: top=424px, left=60px/240px, width=160px, height=60px, gap=20px
   - Big Logo: top=172px, left=721.06px, width=656.39px, height=505px
*/

.tgfx-hero-content {
  position: relative;
  width: 1440px;
  margin: 0 auto;
  padding: 0;
  display: block;
  z-index: 2;
  height: 100%;
  box-sizing: border-box;
}

/* Left content wrapper - vertically centered */
.tgfx-hero-text {
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  width: 500px; /* Increased width to prevent unwanted line breaks */
  display: flex;
  flex-direction: column;
}

html[lang='en'] .tgfx-hero-text {
  width: 550px;
}

/* Text Logo */
.tgfx-hero-logo-text {
  margin: 0;
  padding: 0;
  height: 72px;
}

.tgfx-hero-logo-text img {
  height: 72px;
  width: auto;
  display: block;
}

.tgfx-hero-subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.666;
  color: #333333;
  margin: 0;
  padding: 0;
  margin-top: 32px;
}

/* Buttons inside hero-text for unified vertical centering */
.tgfx-hero-buttons {
  display: flex;
  gap: 20px;
  margin-top: 48px;
}

/* Hero large Logo - Only vertical position adjusted to align with left text */
.tgfx-hero-visual {
  position: absolute;
  left: 721px; /* Figma: left=721.06px - DO NOT CHANGE */
  top: 125px; /* Moved up 15px from 130px */
  width: 656px; /* Figma: width=656.39px */
  height: 505px; /* Figma: height=505px */
}

.tgfx-hero-logo {
  width: 656px;
  height: 505px;
}

.tgfx-hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ==================== Features section - strictly following design ==================== */
/* Design node-id 1:6813 */
.tgfx-features {
  padding: 80px 0 120px; /* Top padding for absolute positioned tag */
  background: #FFFFFF;
  position: relative;
  min-width: 1440px;
  margin-top: -2px; /* Move up 2 pixels */
  z-index: 2; /* Higher than users section to cover USERS tag */
}

.tgfx-features-header {
  position: absolute;
  left: 32px; /* Match right margin (same as forum button right: 32px) */
  top: 0;
  z-index: 1;
}

@media (max-width: 1440px) {
  .tgfx-features-header {
    left: 32px;
  }
}

/* FEATURE tag - strictly following design node-id 1:6814 */
/* Full border gradient (top, right, bottom, left), 70px bottom-left radius */
.tgfx-features-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 246px;
  height: 73px;
  position: relative;
  color: #0066FF;
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 400;
  text-transform: uppercase;
  background: #FFFFFF;
  border-radius: 0 0 0 70px;
}

/* Gradient border - using mask technique for full border gradient */
.tgfx-features-tag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 0 0 70px;
  padding: 2px; /* Border width */
  background: linear-gradient(135deg, #00DBFF 0%, #0066FF 100%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.tgfx-features-list {
  width: 1440px;
  margin: 0 auto;
}

.tgfx-feature-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 110px; /* Reduced by 50px from 160px */
  padding: 0 60px;
  gap: 120px; /* Increased gap to match design */
}

.tgfx-feature-item:last-child {
  margin-bottom: 0;
}

.tgfx-feature-item.reverse {
  flex-direction: row-reverse;
}

/* Feature content area - contains number and text */
/* Figma: number x=0, text x=50.97, so gap=51px */
/* Using grid to make index height match text height */
.tgfx-feature-content {
  flex: 0 0 600px;
  max-width: 600px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 51px; /* Figma: 50.97px */
}

/* Number style - Using PNG images from Figma */
.tgfx-feature-index {
  height: 100%;
  display: flex;
  align-items: flex-start;
}

.tgfx-feature-index img {
  height: 100%; /* Figma: height=168px */
  width: auto;
  display: block;
}

.tgfx-feature-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Title style - Figma: Roboto 500 40px, line-height 1.171875em */
.tgfx-feature-title {
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.171875em; /* Figma: 1.171875em ≈ 47px */
  color: #000000;
  margin-bottom: 19px; /* Figma: y=68 - height=49 = 19px gap */
  margin-top: 0;
}

/* Description style - Figma: Roboto 400 16px, line-height 1.875em (30px), width 489px */
.tgfx-feature-desc {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  line-height: 1.875em; /* Figma: 1.875em = 30px */
  max-width: 489px; /* Figma: width=489px */
  margin-bottom: 0;
}

/* Feature button - positioned below text on the left */
.tgfx-feature-button {
  grid-column: 2; /* Second column, aligned with text */
  margin-top: -50px;
  display: flex;
  justify-content: flex-start;
}

.tgfx-feature-image {
  flex: 1;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tgfx-feature-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Button style - Figma: 120x48px, border-radius 30px, border 2px #0066FF */
.tgfx-btn-small {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 120px; /* Figma: width=120px */
  height: 48px; /* Figma: height=48px */
  padding: 0; /* Use fixed dimensions instead of padding */
  border: 2px solid #0066FF;
  color: #0066FF !important;
  border-radius: 30px;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
  margin-top: 24px;
  align-self: flex-start; /* Button left aligned with text */
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.tgfx-btn-small:hover {
  background: #0066FF;
  color: #FFFFFF !important;
}

.tgfx-btn-small:visited {
  color: #0066FF !important;
}

.tgfx-btn-small:visited:hover {
  color: #FFFFFF !important;
}

/* ==================== Users section ==================== */
.tgfx-users {
  padding: 80px 0;
  background: var(--tgfx-light-bg);
  min-width: 1440px;
  position: relative;
  text-align: center; /* For centering More Users button */
}

/* USERS tag - same style as FEATURE tag with gradient border */
.tgfx-users-header {
  position: absolute;
  left: 32px; /* Match right margin (same as forum button right: 32px) */
  top: -2px; /* Move up 2px */
  z-index: 1;
}

@media (max-width: 1440px) {
  .tgfx-users-header {
    left: 32px;
  }
}

/* USERS tag - same style as FEATURE tag (left-bottom corner radius) */
.tgfx-users-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 217px;
  height: 73px;
  position: relative;
  color: #0066FF;
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 400;
  text-transform: uppercase;
  background: var(--tgfx-light-bg);
  border-radius: 0 0 0 70px; /* Same as FEATURE: left-bottom corner */
}

/* Gradient border - same as FEATURE tag */
.tgfx-users-tag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 0 0 70px; /* Same as FEATURE */
  padding: 2px; /* Border width */
  background: linear-gradient(135deg, #00DBFF 0%, #0066FF 100%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.tgfx-users-title {
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  font-weight: 500;
  text-align: center;
  color: var(--tgfx-black);
  margin: 60px auto 50px;
  width: 1440px;
}

.tgfx-users-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  width: 1440px;
  margin: 0 auto 120px; /* Increased from 100px */
  padding: 0 60px;
}

.tgfx-user-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: all 0.25s ease;
  margin-top: 30px !important; 

}

.tgfx-user-item:hover {
  transform: translateY(-4px);
}

.tgfx-user-logo {
  width: 105px;
  height: 105px;
  background: var(--tgfx-white);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
}

/* First user item (PAG) - ensure shadow is visible on blue background */
.tgfx-user-item:first-child .tgfx-user-logo {
  box-shadow: 0px 6px 20px rgba(0, 102, 255, 0.25), 0px 4px 16px rgba(0, 0, 0, 0.15);
}

.tgfx-user-logo img {
  /*max-width: 150%;*/
  /*max-height: 150%;*/
  object-fit: contain;
}

.tgfx-user-name {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: var(--tgfx-black);
  font-weight: 500;
  text-align: center;
}

.tgfx-user-desc {
  display: none;
}

.tgfx-btn-more {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 13px 26px;
  border: 2px solid #0066FF;
  color: #0066FF !important;
  border-radius: 30px;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.25s ease;
  white-space: nowrap;
  background: #f7f9ff;
}

.tgfx-btn-more:hover {
  background: #0066FF;
  color: #FFFFFF !important;
}

.tgfx-btn-more:visited {
  color: #0066FF !important;
}

.tgfx-btn-more:visited:hover {
  color: #FFFFFF !important;
}

/* ==================== Users section - add bottom padding for download box overlap ==================== */
.tgfx-users {
  padding-bottom: 250px;
  position: relative;
  z-index: 1;
}

/* ==================== Download section ==================== */
.tgfx-download {
  background: var(--tgfx-dark);
  padding: 180px 0 0;
  text-align: center;
  color: var(--tgfx-white);
  position: relative;
  overflow: visible;
  min-height: 500px;
  min-width: 1440px;
  margin-top: -320px;
}

.tgfx-download-content {
  position: relative;
  z-index: 10;
  width: 1320px; /* Same width as feature section content (1440 - 60*2 padding) */
  margin: 0 auto;
  padding: 0 0 90px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.tgfx-download-box {
  width: 496px;
  height: 426px;
  margin: 30px auto 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 15px; /* Moved right by 15px */
  z-index: 10;
}

.tgfx-download-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.tgfx-download-title {
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 40px;
  color: var(--tgfx-white);
  letter-spacing: 0.5px;
}

.tgfx-download-desc {
  display: none;
}

.tgfx-download-buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
}

/* Coming Soon button style - strictly following Figma design node-id 1:172 */
.tgfx-btn-download-dark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 70px;
  padding: 23px 0;
  gap: 10px;
  background: transparent;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF;
  border-radius: 35px;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-size: 22px;
  /*font-weight: 700;*/
  line-height: 26px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
  letter-spacing: 2px;
}

.tgfx-btn-download-dark:hover {
  background: #FFFFFF !important;
  color: var(--tgfx-dark) !important;
  transform: translateY(-2px);
}

.tgfx-btn-download-dark:visited {
  color: #FFFFFF !important;
}

.tgfx-btn-download-dark:visited:hover {
  color: var(--tgfx-dark) !important;
}

/* ==================== Footer section ==================== */
.tgfx-footer {
  background: var(--tgfx-dark);
  padding: 48px 0 48px;
  height: 148px;
  position: relative;
  min-width: 1440px;
  box-sizing: border-box;
}

.tgfx-footer-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(50% - 8px); /* Move up 16px (half of 16 = 8px offset) */
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 1320px; /* Same width as divider line */
}

.tgfx-footer-divider {
  display: none;
}

/* Footer info area - single row layout */
.tgfx-footer-info {
  display: flex;
  flex-direction: column;
  font-family: 'PingFang SC', 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #cccccc;
}

/* Single row: address, copyright, tel, privacy */
.tgfx-footer-row-1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 1320px;
  font-size: 12px;
  line-height: 16px;
  color: #cccccc;
}

.tgfx-footer-row-2 {
  display: none; /* Hide second row, all in one row now */
}

.tgfx-footer-address {
  flex-shrink: 0;
  white-space: nowrap;
  color: #cccccc;
  font-size: 12px;
  font-weight: 400;
}

.tgfx-footer-copyright {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: 'PingFang SC', 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 20px;
  color: #cccccc;
  font-weight: 400;
  margin-left: 32px;
}

.tgfx-footer-tel {
  flex-shrink: 0;
  white-space: nowrap;
  color: #cccccc;
  font-size: 12px;
  font-weight: 400;
  margin-left: 32px;
}

.tgfx-footer-privacy {
  margin-left: 32px;
  color: #cccccc !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  transition: color 0.2s ease !important;
  cursor: pointer !important;
  position: relative !important;
  line-height: 20px !important;
}

.tgfx-footer-privacy::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background-color: #cccccc;
}

.tgfx-footer-privacy:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Hide Docusaurus default footer class */
footer.nav-footer {
  display: none;
}

/* But show our custom tgfx-footer */
footer.tgfx-footer {
  display: block !important;
}

/* ==================== Showcase page - Figma design ==================== */
/* Design layout (1440px):
   - 页面背景: 白色 #FFFFFF
   - 标题: "基于 TGFX 构建的产品", 48px, Roboto 400
   - 卡片: 418px × 351px (图片206px + 文字145px)
   - 间距: 第1列left:62px, 列间距:32px
   - 行间距: 64px
*/

.tgfx-showcase {
  padding: 0 0 400px; /* Bottom padding 500px for download overlap effect */
  background: #FFFFFF; /* Figma: white */
  min-width: 1440px;
  position: relative;
  z-index: 1;
}

.tgfx-showcase-title {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
  font-weight: 400;
  text-align: center;
  color: var(--tgfx-black);
  /*margin-bottom: 64px;*/
  margin: 70px 0 !important;
}

.tgfx-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 418px); /* Fixed 418px */
  column-gap: 32px; /* 32px gap */
  row-gap: 64px; /* 64px gap */
  width: 1320px; /* Content area 1320px */
  margin: 0 auto;
  padding: 0 60px;
  justify-content: center;
}

.tgfx-showcase-item {
  display: flex;
  flex-direction: column;
  width: 418px; /* Figma width */
  height: auto; /* Auto height */
  min-height: 351px; /* Min height */
  background: white; /* Card background */
  border-radius: 12px; /* Uniform radius */
  border: 1px solid rgba(0, 0, 0, 0.05); /* Border */
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08); /* Shadow */
  overflow: hidden; /* Clip child corners */
  transition: all 0.25s ease;
  text-decoration: none;
  position: relative;
  box-sizing: border-box; /* Include border in width */
}

.tgfx-showcase-item:hover {
  transform: translateY(-4px);
  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.12); /* Hover enhanced shadow */
}

/* Image area - Figma: 418x206px */
.tgfx-showcase-image {
  width: 100%; /* Fill container */
  height: auto;
  aspect-ratio: 16 / 10; /* Keep aspect ratio */
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
}

/* Tencent Maps special size: Figma 419x207px (image) / 420x352px (container) */
.tgfx-showcase-item:nth-child(4) {
  width: 420px;
  margin-left: -1px; /* Align with Figma left: 61px */
}

.tgfx-showcase-item:nth-child(4) .tgfx-showcase-image {
  height: auto;
  aspect-ratio: 16 / 10;
}

.tgfx-showcase-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* Start from top */
  display: block;
}

/* Text area - Figma: 418x145px */
/* Fixed height, all cards aligned */
.tgfx-showcase-content {
  width: 100%; /* Fill container */
  height: 192px; /* 24(padding-top) + 30(title) + 11(gap) + 116(desc 5 lines) + 11(padding-bottom) = 192px */
  padding: 24px 25px; /* Figma: left:25px, top:24px */
  background: white;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden; /* Hide overflow */
}

/* Tencent Maps special width */
.tgfx-showcase-item:nth-child(4) .tgfx-showcase-content {
  width: 419px;
}

/* Title - Figma: Roboto 700 20px, height 30px */
.tgfx-showcase-name {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 700; /* Figma: bold */
  line-height: 30px;
  color: var(--tgfx-black);
  margin: 0 0 11px 0; /* Figma: 11px gap below title */
  height: 30px;
  flex-shrink: 0;
}

/* Description - Figma: Roboto 400 16px, #363636 */
/* Increased height for more text */
.tgfx-showcase-desc {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; /* Line height 24px */
  color: #363636; /* Figma color */
  margin: 0;
  max-width: 368px; /* Figma: desc width 368px */
  height: 116px; /* Increased 20px: ~5 lines */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5; /* Increased to 5 lines */
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ==================== Responsive - locked 1440px, disabled mobile zoom ==================== */
/* Only allow horizontal scroll for full design content */
@media (max-width: 1440px) {
  body {
    width: 1440px !important;
    overflow-x: auto !important;
  }
  
  /* Hero three-part background maintains layout when shrunk */
  .tgfx-hero {
    width: 1440px !important;
  }
}

/* ==================== Custom language switch button - as navbar li element ==================== */
/* Language switch <li> container - force position and size */
body .nav-site.nav-site-internal li.tgfx-lang-li {
  position: fixed !important;
  right: 299px !important;
  top: 28px !important;
  margin-left: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  width: 56px !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

/* Language switch button - strictly following Figma design */
/* Figma: 56x25px, no border, icon+text style, top=28px (relative to nav) */
.tgfx-lang-button {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 25px !important;
  width: auto !important; /* Auto width for content */
  padding: 0 !important;
  cursor: pointer !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 16px !important; /* 16px aligned with icon */
  color: #000000 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

.tgfx-lang-button:hover {
  color: var(--tgfx-primary) !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Language switch button icon */
.tgfx-lang-button .lang-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  display: block !important;
  object-fit: contain !important;
  margin-top: 0 !important;
}

/* Language switch button text */
.tgfx-lang-button .lang-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 16px !important; /* 16px aligned with icon */
  color: #000000 !important;
  flex-shrink: 0 !important;
  display: block !important;
  height: auto !important;
  margin-top: 0 !important;
}

.tgfx-lang-button:hover .lang-text {
  color: var(--tgfx-primary) !important;
}

/* Language switch button arrow */
.tgfx-lang-button .lang-arrow {
  width: 8px !important;
  height: 8px !important;
  flex-shrink: 0 !important;
  display: block !important;
  object-fit: contain !important;
  margin-top: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Language dropdown - matching PAG style */
.tgfx-lang-dropdown,
.languageDropdown {
  position: absolute !important;
  top: 50px !important;
  left: 0 !important;
  background: #fff !important;
  border: 1px solid #cccccc !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: none !important;
  z-index: 1003 !important;
  transform: none !important;
  right: auto !important;
  min-width: auto !important;
  width: auto !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

/* English dropdown position adjustment */
html[lang=en] .tgfx-lang-dropdown,
html[lang=en] .languageDropdown {
  left: 0 !important;
  transform: none !important;
  right: auto !important;
}

.tgfx-lang-dropdown.show,
.languageDropdown.show,
#tgfx-lang-dropdown.show {
  display: block !important;
}

/* Language dropdown items - matching PAG style */
.dropdownItem,
.tgfx-lang-item {
  display: flex !important;
  align-items: center !important;
  padding: 12px !important;
  height: 48px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  box-sizing: border-box !important;
}

.dropdownItem:hover,
.tgfx-lang-item:hover {
  background: #fafafa !important;
}

.dropdownItem.active .icon,
.tgfx-lang-item.active .icon {
  display: block !important;
}

.dropdownItem .title {
  font-family: 'PingFang SC', sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-align: center !important;
  color: #24292e !important;
}

.dropdownItem .divider {
  margin: 0 8px !important;
  width: 1px !important;
  height: 100% !important;
  background: #cccccc !important;
}

.dropdownItem .content {
  font-family: 'PingFang SC', sans-serif !important;
  font-style: normal !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #24292e !important;
  width: 72px !important;
  text-align: left !important;
}

.dropdownItem .icon {
  width: 20px !important;
  height: 20px !important;
  margin-left: 8px !important;
  background-image: url('https://pag.qq.com/tgfx/img/commerce/icon_support.png') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  display: none !important;
}

.lang-icon {
  margin-right: 4px;
}

/* ==================== Hide Docusaurus original language switch ==================== */
/* These are implemented by custom JS */