style.css

/* NEC 新能源开发者社区 — GitHub Dark × McKinsey Blue 视觉系统 v3

   分层结构（物理顺序即层叠优先级，新增规则请放入对应分区）：
     ① 设计 token（:root 变量）
     ② 基础元素（force dark / 全局 / navbar / TOC / 卡片 / 排版 / 按钮 / 代码 / 表格）
     ③ 组件（首页增强 / hero / 侧边栏 / 二维码挂件 / 跑马灯 / 个人卡）
     ④ 页面级（header 布局 / 首页优化）
     ⑤ 补丁（媒体查询覆盖，置末尾）
*/

/* =========================================================
   ① 设计 token — 颜色 / 间距 / 圆角变量
   ========================================================= */
:root {
  /* Background layers - GitHub Dark */
  --bg-page: #0d1117;
  --bg-surface: #161b22;
  --bg-elevated: #21262d;
  --bg-code: #1e2530;

  /* McKinsey Blue accent system */
  --mck-primary: #0066ff;
  --mck-primary-soft: #1a5fbd;
  --mck-primary-dim: #0d3b66;
  --mck-accent: #00a9ce;

  /* Text hierarchy */
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-tertiary: #484f58;
  --text-link: #58a6ff;

  /* Borders */
  --border-default: #30363d;
  --border-subtle: #21262d;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius scale */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
}
/* =========================================================
   ② 基础元素 — force dark / 全局背景 / navbar / TOC / 卡片 /
      标题 / 段落 / 列表 / 链接 / 按钮 / 代码 / 表格 / footer / steps
   ========================================================= */
/* Force dark palette */
html{
  color-scheme: dark;
}
body{
  background-color: var(--bg-page);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.75;
}
/* Global background */
#content-wrapper,
main{
  background-color: var(--bg-page);
}
/* Content area max-width for readability */
#content-wrapper > main,
#content-wrapper > div{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
/* Navbar */
#navbar{
  background-color: rgba(13, 17, 23, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-default);
  height: 56px;
}
/* Navbar links & tabs: readable size,
clear active state */
#navbar a,
#navbar button{
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.2s;
}
#navbar a:hover,
#navbar button:hover{
  color: var(--text-primary);
}
/* Active top tab: bright text + primary underline indicator */
#navbar [aria-current],
#navbar a[data-active="true"],
#navbar a[aria-selected="true"]{
  color: var(--text-primary) !important;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--mck-primary);
}
/* Navbar primary CTA button: keep McKinsey blue pill */
#navbar a[class*="primary"],
#navbar button[class*="primary"]{
  color: #ffffff !important;
  border-radius: var(--radius-md);
  box-shadow: none;
}
/* Right-side TOC */
.toc,
[class*="toc"],
[role="complementary"]{
  background-color: transparent !important;
  border-left: 1px solid var(--border-default);
  font-size: 12px;
  line-height: 1.6;
  width: 200px;
}
/* TOC title */
.toc-title,
[class*="toc"] > div:first-child,
[role="complementary"] > div:first-child{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}
/* TOC items */
.toc a,
[class*="toc"] a,
[role="complementary"] a{
  color: var(--text-secondary);
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 2px solid var(--border-subtle);
  transition: color 0.2s, border-color 0.2s;
}
.toc a:hover,
[class*="toc"] a:hover,
[role="complementary"] a:hover{
  color: var(--text-primary);
  border-left-color: var(--text-tertiary);
}
/* Active TOC item - kill solid button look,
keep only left indicator */
.toc [aria-current],
.toc [aria-current] *,
.toc a[data-active="true"],
.toc a[data-active="true"] *,
.toc a[aria-selected="true"],
.toc a[aria-selected="true"] *,
.toc [class*="active"],
.toc [class*="active"] *,
.toc [class*="current"],
.toc [class*="current"] *,
[class*="toc"] [aria-current],
[class*="toc"] [aria-current] *,
[class*="toc"] a[data-active="true"],
[class*="toc"] a[data-active="true"] *,
[class*="toc"] a[aria-selected="true"],
[class*="toc"] a[aria-selected="true"] *,
[class*="toc"] [class*="active"],
[class*="toc"] [class*="active"] *,
[class*="toc"] [class*="current"],
[class*="toc"] [class*="current"] *,
[role="complementary"] [aria-current],
[role="complementary"] [aria-current] *,
[role="complementary"] a[data-active="true"],
[role="complementary"] a[data-active="true"] *,
[role="complementary"] a[aria-selected="true"],
[role="complementary"] a[aria-selected="true"] *,
[role="complementary"] [class*="active"],
[role="complementary"] [class*="active"] *,
[role="complementary"] [class*="current"],
[role="complementary"] [class*="current"] *{
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Active TOC link text color and left indicator */
.toc [aria-current],
.toc a[data-active="true"],
.toc a[aria-selected="true"],
.toc [class*="active"]:is(a,
span),
.toc [class*="current"]:is(a,
span),
[class*="toc"] [aria-current],
[class*="toc"] a[data-active="true"],
[class*="toc"] a[aria-selected="true"],
[class*="toc"] [class*="active"]:is(a,
span),
[class*="toc"] [class*="current"]:is(a,
span),
[role="complementary"] [aria-current],
[role="complementary"] a[data-active="true"],
[role="complementary"] a[aria-selected="true"],
[role="complementary"] [class*="active"]:is(a,
span),
[role="complementary"] [class*="current"]:is(a,
span),
span){
  color: var(--text-primary) !important;
  border-left-color: var(--mck-primary) !important;
  font-weight: 400 !important;
}

.page-insights {
  margin: 0.75rem 0 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
}

.page-insights-meta {
  margin-bottom: 0.45rem;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

.page-insights-summary,
.page-insights-hint {
  margin: 0;
  color: var(--text-secondary);
}

.page-insights-hint {
  margin-top: 0.45rem;
  color: var(--text-tertiary);
  font-size: 0.92rem;
}
/* Cards (Mintlify uses lowercase .card class) */
.mint-card,
[class*="Card"],
[class*="card"]{
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: none;
  transition: border-color 0.2s, transform 0.2s;
}
.mint-card:hover,
[class*="Card"]:hover,
[class*="card"]:hover{
  border-color: var(--mck-primary);
  transform: translateY(-1px);
}
/* Card icons - outline style,
McKinsey blue */
[class*="Card"] svg,
[class*="Card"] [class*="icon"]{
  width: 32px;
  height: 32px;
  color: var(--mck-primary);
  stroke-width: 1.5;
  margin-bottom: var(--space-3);
}
/* Card titles */
[class*="Card"] h3,
[class*="Card"] [class*="title"]{
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
/* Card headings rendered as h2/h3 must not inherit global heading styles */
[class*="Card"] h2,
[class*="card"] h2{
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: var(--space-1);
}
/* Card descriptions */
[class*="Card"] p,
[class*="Card"] [class*="description"]{
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6{
  color: var(--text-primary);
  line-height: 1.3;
}

h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

h2 {
  font-size: 20px;
  font-weight: 600;
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-default);
}

h3 {
  font-size: 16px;
  font-weight: 600;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
/* Paragraphs */
p{
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: var(--space-4);
  max-width: 640px;
}
/* Lists */
li{
  color: var(--text-secondary);
  font-size: 15px;
  padding: 3px 0;
}
li strong{
  color: var(--text-primary);
  font-weight: 500;
}
/* Links */
a{
  color: var(--text-link);
}
a:hover{
  color: var(--mck-accent);
}
/* Keyboard focus: visible outline for accessibility */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--text-link);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Buttons */
button,
a.button{
  border-radius: var(--radius-md);
}
button[class*="primary"],
a[class*="primary"]{
  background-color: var(--mck-primary);
  color: #ffffff;
  border: none;
  font-weight: 600;
}
/* Code blocks */
pre{
  background-color: var(--bg-code);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
}
/* Inline code / command pills */
:not(pre) > code{
  background-color: var(--bg-elevated);
  color: var(--text-link);
  padding: 3px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  font-size: 12px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
}
/* Tables */
table{
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 13px;
}
th{
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
}
td{
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-3) var(--space-4);
}
/* Footer */
footer{
  background-color: var(--bg-page);
  border-top: 1px solid var(--border-default);
}
/* Steps component */
.mint-step-icon{
  background-color: var(--mck-primary);
  color: #ffffff;
}
/* Status / success accents */
.mint-status-success{
  color: #3fb950;
}
/* Selection highlight */
::selection{
  background-color: rgba(0, 102, 255, 0.25);
  color: var(--text-primary);
}
/* Hide empty TOC */
.toc:empty,
[class*="toc"]:empty{
  display: none;
}

/* =========================================================
   ③ 组件 — 首页增强 / hero / 侧边栏修复 / 分享二维码挂件 /
      跑马灯 / GitHub 风格个人卡
   ========================================================= */
/* =========================================================
   Homepage enhancements
   ========================================================= */

/* Hero stats badges: centered,
surface background,
subtle border */
.hero-stats{
  margin-top: 24px;
  margin-bottom: 8px;
}
.hero-stats [class*="Card"],
.hero-stats [class*="card"]{
  align-items: center;
  text-align: center;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  padding: 20px 16px;
}
.hero-stats [class*="Card"] h2,
.hero-stats [class*="card"] h2,
.hero-stats [class*="Card"] [class*="title"],
.hero-stats [class*="card"] [class*="title"]{
  font-size: 28px;
  font-weight: 700;
  color: var(--mck-primary);
  border-bottom: none;
  margin: 0 0 4px;
  padding-bottom: 0;
  max-width: none;
}
.hero-stats [class*="Card"] p,
.hero-stats [class*="card"] p{
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
}
/* Button group spacing */
.mint-button-group,
[class*="ButtonGroup"]{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0 8px;
}
/* Primary button: McKinsey blue */
button[class*="primary"],
a[class*="primary"]{
  background-color: var(--mck-primary);
  color: #ffffff;
  border: 1px solid var(--mck-primary);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-md);
}
button[class*="primary"]:hover,
a[class*="primary"]:hover{
  background-color: var(--mck-primary-soft);
  border-color: var(--mck-primary-soft);
}
/* Secondary button: outlined */
button[class*="secondary"],
a[class*="secondary"]{
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--radius-md);
}
button[class*="secondary"]:hover,
a[class*="secondary"]:hover{
  border-color: var(--mck-primary);
  color: var(--mck-primary);
}
/* Card hover lift and border glow */
[class*="Card"],
[class*="card"]{
  border: 1px solid var(--border-default);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
[class*="Card"]:hover,
[class*="card"]:hover{
  border-color: var(--mck-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.08);
}
/* Inline links inside cards should remain readable */
[class*="Card"] a{
  color: var(--text-link);
}
/* Reduce right TOC noise on homepage by making items more compact */
.toc a,
[class*="toc"] a{
  font-size: 12px;
  padding: 3px 0 3px 10px;
}
/* Homepage section spacing */
#content-wrapper h2{
  margin-top: 48px;
}
#content-wrapper h2:first-of-type{
  margin-top: 32px;
}
/* =========================================================
   GSAP-style homepage hero
   ========================================================= */

/* Centered hero section on homepage */
.hero-gsap{
  text-align: center;
  padding: 24px 24px 12px;
}
.hero-gsap .hero-tagline{
  display: block;
  text-align: center;
  color: var(--mck-accent);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.hero-gsap .hero-tagline::before,
html.dark .hero-gsap .hero-tagline::before {
  content: "{ ";
  color: var(--mck-primary);
}
.hero-gsap .hero-tagline::after{
  content: " }";
  color: var(--mck-primary);
}
.hero-gsap h1{
  font-size: clamp(40px, 8vw, 96px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--text-primary);
  margin: 0 auto 16px;
  max-width: 900px;
}
.hero-gsap .hero-subtitle{
  font-size: 18px;
  color: #adbac7;
  max-width: 640px;
  margin: 0 auto 20px;
  line-height: 1.6;
}
/* Hero CTA: larger primary button */
.hero-cta{
  justify-content: center;
  margin: 4px 0 16px;
}
.hero-cta button,
.hero-cta a{
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
}
/* Make hero banner blend with dark background */
.hero-banner-img{
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 24px;
  border-radius: var(--radius-xl);
}
/* =========================================================
   Sidebar real DOM fixes (Mintlify renders #sidebar divs,
not <aside class="sidebar"> — selectors above are legacy)
   ========================================================= */

/* Sidebar container */
#sidebar{
  background-color: var(--bg-page);
  border-right: 1px solid var(--border-default);
}
/* Sidebar links: readable size and color */
#navigation-items a{
  font-size: 13px;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  transition: background-color 0.2s, color 0.2s;
}
#navigation-items a:hover{
  color: var(--text-primary);
  background-color: var(--bg-elevated);
}
/* Active sidebar item: kill the solid primary pill,
keep a left indicator */
#navigation-items a[class*="bg-primary"],
#navigation-items a[class*="text-primary"]{
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  text-shadow: none !important;
  border-radius: var(--radius-md) !important;
  border-left: 2px solid var(--mck-primary) !important;
}
/* Active sidebar item hover: stay neutral */
#navigation-items a[class*="bg-primary"]:hover{
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}
/* =========================================================
   Floating share QR widget
   ========================================================= */

/* Fixed bottom-right container */
.share-qr-widget{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/* QR panel: hidden until hover / focus */
.share-qr-panel{
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  text-align: center;
}
.share-qr-widget:hover .share-qr-panel,
.share-qr-widget:focus-within .share-qr-panel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.share-qr-panel img{
  display: block;
  width: 148px;
  height: 148px;
  border-radius: var(--radius-md);
  background-color: #ffffff;
}
.share-qr-tip{
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
/* Floating action button */
.share-qr-fab{
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--mck-primary);
  color: #ffffff;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.35);
  transition: background-color 0.2s ease, transform 0.2s ease;
  outline: none;
}
.share-qr-fab:hover,
.share-qr-fab:focus-visible{
  background-color: var(--mck-primary-soft);
  transform: translateY(-1px);
}
.share-qr-fab svg{
  width: 16px;
  height: 16px;
}

/* Do not print the floating widget */
@media print {.share-qr-widget{
    display: none;
  }
}
/* =========================================================
   Homepage scrolling photo marquee
   ========================================================= */

/* Outer viewport: clip the track,
rounded frame */
.photo-marquee{
  overflow: hidden;
  border-radius: var(--radius-xl);
  margin: 0.75rem 0 1.25rem;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-surface);
}
/* Sliding track: two identical photo sets side by side */
.photo-marquee .photo-marquee-track{
  display: flex;
  width: max-content;
  animation: photo-marquee-scroll 36s linear infinite;
}
/* Pause on hover so visitors can look at a photo */
.photo-marquee:hover .photo-marquee-track{
  animation-play-state: paused;
}
/* Photos: fixed height,
uniform margin-left keeps the -50% loop seamless */
.photo-marquee .photo-marquee-track img{
  display: block;
  height: 200px;
  width: auto;
  border-radius: var(--radius-lg);
  margin: 12px 0 12px 12px;
}

@keyframes photo-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {.photo-marquee .photo-marquee-track{
    animation: none;
  }
}


/* =========================================================
   GitHub-style profile card (homepage season leader contact)
   ========================================================= */

.gh-profile-card {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  max-width: 380px;
  padding: 8px 10px;
  margin: 6px 0 2px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: none;
  transition: border-color 0.2s, transform 0.2s;
}

.gh-profile-card:hover {
  border-color: var(--mck-primary);
  transform: translateY(-1px);
}

html.dark .gh-profile-card {
  background-color: var(--bg-surface);
  border-color: var(--border-default);
  box-shadow: none;
}

.gh-profile-card .gh-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #d0d7de;
  box-shadow: 0 0 0 2px rgba(31, 136, 61, 0.15);
  flex-shrink: 0;
}

html.dark .gh-profile-card .gh-avatar {
  border-color: #30363d;
}

.gh-profile-card .gh-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.gh-profile-card .gh-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #1f2328;
  margin: 0;
}

html.dark .gh-profile-card .gh-name {
  color: #e6edf3;
}

.gh-profile-card .gh-handle {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: 11px;
  color: #57606a;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark .gh-profile-card .gh-handle {
  color: #8b949e;
}

.gh-profile-card .gh-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gh-profile-card .gh-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 500;
  line-height: 15px;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid #d0d7de;
  color: #57606a;
  background-color: #f6f8fa;
}

html.dark .gh-profile-card .gh-badge {
  border-color: #30363d;
  color: #8b949e;
  background-color: #161b22;
}

.gh-profile-card .gh-badge.gh-badge-leader {
  color: #1a7f37;
  border-color: rgba(31, 136, 61, 0.4);
  background-color: rgba(31, 136, 61, 0.1);
}

html.dark .gh-profile-card .gh-badge.gh-badge-leader {
  color: #3fb950;
  border-color: rgba(63, 185, 80, 0.4);
  background-color: rgba(63, 185, 80, 0.1);
}

.gh-profile-card .gh-qr {
  flex-shrink: 0;
  text-align: center;
}

.gh-profile-card .gh-qr img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  border: 1px solid #d0d7de;
  display: block;
}

html.dark .gh-profile-card .gh-qr img {
  border-color: #30363d;
}

.gh-profile-card .gh-qr span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: #57606a;
}

html.dark .gh-profile-card .gh-qr span {
  color: #8b949e;
}

/* Join-community card + leader card side by side */
.join-leader-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.join-leader-row > [class*="card"],
.join-leader-row > [class*="Card"] {
  flex: 1 1 200px;
  margin: 0;
}

.join-leader-row .gh-profile-card {
  flex: 1 1 200px;
  max-width: none;
  margin: 0;
}
/* =========================================================
   ④ 页面级 — header 紧凑化 / 单行合并 header / 首页布局优化
   ========================================================= */
/* =========================================================
   Compact header layout (navbar 紧凑化)
   实测结构：#navbar 内含 顶行 .h-16(64px) + 标签行 .h-12(48px)
   ========================================================= */

/* Navbar 不再固定 56px，包裹压缩后的内容 */
#navbar{
  height: auto;
  min-height: 0;
}
/* 顶行（logo/搜索/外链/CTA）：64px -> 56px（与 Tab 行合并后统一行高） */
#navbar [class*="h-16"]{
  height: 56px;
}
/* Tab 标签行：48px -> 56px（合并进顶行） */
#navbar [class*="h-12"]{
  height: 56px;
}
/* Tab 项：收紧间距与字号 */
.nav-tabs{
  gap: 4px 18px;
}
.nav-tabs-item{
  font-size: 13px;
}
/* 导航链接与按钮：14px -> 13px */
#navbar a,
#navbar button{
  font-size: 13px;
}
/* 搜索框：h-9(36px) -> 32px */
#navbar button[class*="h-9"]{
  height: 32px;
  border-radius: var(--radius-md);
}
/* Logo 随细条缩放（h-7 固定 28px，需显式 height 才能放大） */
#navbar img,
header img{
  max-height: 32px;
  max-width: 200px;
}
#navbar img.nav-logo{
  height: 32px;
  max-height: none;
}
/* 主 CTA：紧凑内边距 */
#navbar a[class*="primary"],
#navbar button[class*="primary"]{
  padding: 4px 12px;
  font-size: 13px;
}
/* =========================================================
   Merged single-row header (顶行 + Tab 标签行合并为一行)
   实测结构：#navbar .max-w-8xl > div 下两个子块：
   .relative（顶行） + div.h-12（Tab 行，移动端 hidden）
   ========================================================= */

/* 两子块并排 */
#navbar .max-w-8xl > div{
  display: flex;
  align-items: center;
}
/* 顶行占据剩余空间，允许搜索框弹性收缩 */
#navbar .max-w-8xl > div > .relative{
  flex: 1 1 auto;
  min-width: 0;
}
/* 去掉顶行内部的分隔底边（合并后不再需要） */
#navbar .max-w-8xl > div > .relative .h-full{
  border-bottom: none !important;
}
/* Tab 行贴右侧，与 CTA 之间细分隔线 */
#navbar [class*="h-12"]{
  flex: 0 0 auto;
  padding-left: 16px;
  padding-right: 20px;
  margin-left: 8px;
  border-left: 1px solid var(--border-subtle);
}

/* 中等宽度（lg~xl 之间）：空间不足时隐藏外链项，保留 CTA 与 Tab，避免重叠 */
@media (min-width: 1024px) and (max-width: 1279px) {#navbar li.navbar-link{
    display: none;
  }
}
/* =========================================================
   Homepage layout polish (首页布局优化)
   ========================================================= */

/* 首页隐藏左侧边栏中唯一的站点名盒子（首页 Tab 仅 index 一页，条目冗余） */
body:has(.hero-gsap) #sidebar ul.sidebar-group:has(> li:only-child){
  display: none;
}

/* 加入社区：两张卡片同高、与站点卡片视觉一致 */
.join-leader-row > [class*="card"],
.join-leader-row > [class*="Card"],
.join-leader-row .gh-profile-card {
  min-height: 92px;
}
/* CardGroup 网格容器自带 card-group 类，会被全局 [class*="card"] 规则误伤，
   导致每组卡片外多一层边框盒子——清除容器上的卡片样式 */
.card-group{
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.card-group:hover{
  border: none;
  transform: none;
}
/* =========================================================
   ⑤ 补丁 — 状态切换过渡统一 + 窄屏适配（媒体查询覆盖，
      置于末尾利用源码顺序优先）
   ========================================================= */
/* =========================================================
   P2: 状态切换过渡统一 + 窄屏适配
   ========================================================= */

/* ① 侧边栏激活左条：颜色/出现加 0.2s 过渡，与导航 hover、TOC 激活条节奏统一 */
#navigation-items a{
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* ② 窄屏（< lg）header 降级：隐藏顶部 Tab 行，避免与 logo/搜索/CTA 在一行挤压溢出；
      移动端导航由汉堡菜单接管。lg~xl 的隐藏外链项规则（见上）不受影响 */
@media (max-width: 1023px) {#navbar [class*="h-12"]{
    display: none;
  }
}

/* ③ 跑马灯触屏适配：窄屏/触屏无 hover，改为可横向滑动查看，仍保留桌面悬停暂停 */
@media (max-width: 1023px), (hover: none) {.photo-marquee{
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
.photo-marquee .photo-marquee-track{
    animation: none;   /* 关闭自动滚动，交由用户手势控制 */
  }
}