/* =========================================================
       字体设置
    ========================================================== */
    :root{
      --font-mono: "JetBrains Mono","IBM Plex Mono","Source Code Pro",
                   "Cascadia Code",Consolas,Menlo,"Liberation Mono",
                   "DejaVu Sans Mono","Courier New",monospace;
    }

    /* =========================================================
       浅色主题颜色
    ========================================================== */
    :root{
      /* ---- CPP ---- */
      --brand-cpp-blue: #133f83;
      --brand-cpp-blue-weak: #f3faff;
      --brand-hover-purple: #ab80d3;

      /* ---- 基础色 ---- */
      --color-bg: #ffffff;               
      --color-ink: #111;             
      --color-ink-muted: #0b1220cc;       
      --color-card: #ffffff;              
      --color-border: #d8d8d8;           
      --elevation: 0 6px 24px rgba(0,0,0,.08); 

      /* ---- 交互 ---- */
      --color-ring: #1c7cc285;            
      --color-divider: #4675a1;           
      --color-search-hit-bg: #6b0f1a;     
      --color-search-hit-fg: #6b0f1a;     

      /* ---- 首页 ---- */
      --color-hero-title: #111;
      --color-hero-subtitle: #111;

      /* ---- 高亮---- */
      --color-accent: #8a2d2d;
      --color-accent-strong: #ff7a00;    
      --title-weight: 700;
    }

    /* =========================================================
       深色主题颜色（覆盖）
    ========================================================== */
    html.theme-dark{
      --color-bg: #1a0b2e;
      --color-ink: #e5e5e5;
      --color-ink-muted: #b0b8c0;
      --color-card: #2a2a2a;
      --color-border: #3a3a3a;
      --elevation: 0 10px 30px rgba(0,0,0,.45);

      --color-ring: #60a5fa80;
      --color-divider: #6999D3;

      --color-search-hit-bg: #6b0f1a;
      --color-search-hit-fg: #6b0f1a;

      --color-hero-title: #fff;
      --color-hero-subtitle: #fff;
    }

    @media (prefers-color-scheme: dark) {
      :root:not(.js-theme-locked) {
      }
    }

    /* =========================================================
       基础元素
    ========================================================== */
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-mono);
      line-height: 1.55;
      background: var(--color-bg);
      color: var(--color-ink);
      font-variant-ligatures: none;        
      font-variant-numeric: tabular-nums;  
      transition: background .35s ease, color .35s ease;
    }
    a, .nav-link, .dropdown-item { color: var(--color-ink); }
    a:hover, .nav-link:hover, .dropdown-item:hover {
      color: var(--color-ink);
      background-color: rgba(255,255,255,.15);
    }
    :focus-visible{
      outline:3px solid var(--color-ring);
      outline-offset:2px;
      border-radius:8px;
    }

    /* =========================================================
       导航栏
    ========================================================== */
    .navbar {
      background: var(--brand-cpp-blue) !important;
      border-bottom: none;
    }
    .navbar.navbar-dark .navbar-brand,
    .navbar.navbar-dark .nav-link { color:#fff !important; }
    .navbar .dropdown-menu { background: var(--color-card); border:1px solid var(--color-border); }
    .navbar .dropdown-item { color: #222; }
    .navbar .dropdown-item:hover { background-color: rgba(0,0,0,.06); color: #111; }
    .navbar-brand img { height: 48px; width:auto; display:block; } 

    .navbar .nav-link:hover,
    .navbar .dropdown-item:hover,
    .navbar .bi-github:hover,
    #openSearch:hover {
      color: #ab80d3 !important;  
      background-color: transparent !important;
    }

    .navbar .nav-link i:hover,
    #openSearch i:hover {
    color: #ab80d3 !important;
    background-color: transparent !important;
    }


    /* =========================================================
       首页
    ========================================================== */
    .hero {
      padding: 80px 20px;
      background: var(--color-bg);
    }
    .hero.cpp-bg{
      position:relative; overflow:hidden;
      background:
        var(--color-bg),
        radial-gradient(transparent 60%, rgba(255,255,255,0.08)),
        repeating-linear-gradient(60deg, rgba(255,255,255,0.10) 0 16px, transparent 16px 32px);
      background-blend-mode: normal;
    }
    html.theme-dark .hero.cpp-bg{
      background:
        var(--color-bg),
        radial-gradient(transparent 55%, rgba(255,255,255,0.03)),
        repeating-linear-gradient(60deg, rgba(255,255,255,0.04) 0 16px, transparent 16px 32px);
    }
    .hero.cpp-bg:after{
      content:"<  >   {  }   ::   *   template  ";
      position:absolute; left:50%; transform:translateX(-50%);
      bottom:-8px; font-size:13rem; letter-spacing:.2rem; opacity:.06;
      white-space:nowrap; pointer-events:none; color:#fff;
      filter:contrast(0) brightness(2);
    }

    .hero-title {
      font-size: 2rem;
      font-weight: var(--title-weight);
      line-height: 1.3;
      color: var(--color-hero-title);
      font-family: var(--font-mono);
      text-align: left;  /
    }

    .hero-subtitle {
      font-size: 1.05rem;
      color: var(--color-hero-subtitle) !important;
      margin-top: 1rem;
      text-align: left;  /* 左对齐 */
    }

    /* 纯色标题 */
    .cpp-gradient{
      background: none !important;
      -webkit-background-clip: initial !important;
      background-clip: initial !important;
      color: var(--color-hero-title) !important;
      mix-blend-mode: normal !important;
    }

    /* HARMON与Y加下划线 */
    .accent-y{
      position: relative;
      font-weight: 800;
      color: inherit;
    }
    .accent-y::after{
      content:"";
      position:absolute;
      left:0; right:0;
      bottom:-.12em;
      height:1px;
      background: currentColor;
      opacity:.45;
      transform: scaleX(.25);
      transform-origin: left;
      transition: transform .22s ease, opacity .22s ease .05s;
    }
    .hero-title:hover .accent-y::after{
      transform: scaleX(1);
      opacity:.6;
    }
    @media (prefers-reduced-motion: reduce){
      .accent-y::after{ transition: none; transform: scaleX(1); }
    }

    .hero-subtitle {
      font-size: 1.05rem;
      color: var(--color-hero-subtitle) !important;
      margin-top: 1rem;
    }

    /* 首屏示意图加载后由模糊到清晰 */
    .model-image {
      max-width: 100%;
      height: auto;
      filter: blur(10px);
      opacity: 0.3;
      transition: filter 1.2s ease, opacity 1.2s ease;
      margin: 0 auto;
      border-radius: 6px;
      display: block;
    }
    .model-image.loaded {
      filter: blur(0);
      opacity: 1;
    }

    /* ---- Hero image switch ---- */
    .hero-image-switch{
      position: relative;
    }

    .hero-image-switch .model-image{
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      max-width: 100%;

      opacity: 0;
      transition: opacity 1.2s ease;
    }

    /* 占位高度，防止跳动 */
    .hero-image-switch::before{
      content:"";
      display:block;
      padding-top: 65%; /* 根据图片比例微调，如 60%~70% */
    }

    .hero-image-switch .model-image.active{
      opacity: 1;
      position: absolute;
    }


    /* ---- Hero Metrics (minimal, clean) ---- */
    .hero-metric{
      padding: 6px 0;
    }

    .hero-metric span{
      display:block;
      font-weight: 800;
      font-size: .95rem;
      letter-spacing: .35px;
      color: var(--color-hero-title);
    }

    .hero-metric small{
      display:block;
      margin-top: 2px;
      font-size: .78rem;
      letter-spacing: .45px;
      color: var(--color-ink-muted);
    }

    /* =========================================================
       快速入口
    ========================================================== */
    .features{
      padding: 36px 0 28px;
      background: var(--color-bg);
      color: var(--color-ink);
      border-top: 1px solid rgba(255,255,255,.25);
    }
    html.theme-dark .features{ border-top:1px solid var(--color-border); }

    .feature-item{ display:flex; gap:33px; align-items:flex-start; }
    .feature-icon{ flex:0 0 auto; font-size: 2rem; color: var(--color-ink); }
    .feature-title{ margin: 0 0 .15rem 0; font-weight: 800; color: var(--color-ink); }
    .feature-text{ margin: 0 0 .25rem 0; color: var(--color-ink-muted); }
    .feature-link{ font-weight: 600; text-decoration: none; }
    .feature-link:hover{ text-decoration: underline; }

    #quick-links{ font-size: .95rem; }
    #quick-links .feature-title{ font-size: 1.05rem; }
    #quick-links .feature-text{  font-size: .95rem; }
    #quick-links .feature-link{  font-size: 1rem; }
    #quick-links .feature-icon{  font-size: 1.6rem; }

    .cpp-divider{
      position: relative;
      border: 0;
      height: 2px;
      max-width: 1300px;
      margin: 32px auto;
      overflow: hidden;

      /* 底层：C++ 渐变线 */
      background: linear-gradient(
        90deg,
        rgba(0,89,156,0) 0%,
        #00599C 25%,
        #1F6FEB 50%,
        #00599C 75%,
        rgba(0,89,156,0) 100%
      );
    }

    /* 电子流光：窄亮带 + 轻微辉光 + 扫过后停顿 */
    .cpp-divider::after{
      content:"";
      position:absolute;
      top: -2px;

      /* 👇 起点直接放在中右区域 */
      left: 45%;

      width: 18%;          /* 稍微再窄一点，更像电子束 */
      height: 6px;

      background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.25) 35%,
        rgba(31,111,235,.95) 50%,   /* 用高光蓝，更“谐波” */
        rgba(255,255,255,.25) 65%,
        rgba(255,255,255,0) 100%
      );

      opacity: .52;
      filter: blur(.35px);
      mix-blend-mode: screen;
      pointer-events: none;

      animation: cppBeamWave 4.6s cubic-bezier(.25,.9,.35,1) infinite;
    }

    /* 扫一下 → 停顿 → 再扫 */
    @keyframes cppBeam{
      0%   { transform: translateX(0);      opacity: 0;   }
      6%   { opacity: .55; }               /* 点亮 */
      55%  { transform: translateX(155%);  opacity: .55; }/* 快速扫过 */
      70%  { opacity: 0; }                 /* 关灯 */
      100% { transform: translateX(155%);  opacity: 0; }  /* 停顿保持 */
    }

    /* 深色模式：稍弱，避免刺眼 */
    html.theme-dark .cpp-divider::after{
      opacity: .42;
    }

    /* 减少动画：尊重系统设置 */
    @media (prefers-reduced-motion: reduce){
      .cpp-divider::after{ animation: none; opacity: 0; }
    }


    /* =========================================================
       About 区
    ========================================================== */
    .about-container{ max-width: 1680px; margin: 0 auto; }
    .about .card-like{ background: transparent !important; border: 0 !important; box-shadow: none !important; }

    /* 下拉，默认收起 */
    .wp-panel{
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transform: translateY(-6px);
      transition: max-height .45s ease, opacity .35s ease, transform .45s ease;
      will-change: max-height, opacity, transform;

      max-width: 820px;        /* 不再铺满 */
      margin: 12px auto 0;     /* 整体居中 */
      padding-top: 8px;
    }

    .wp-panel::before{
      content:"";
      display:block;
      width: 48px;
      height: 1px;
      background: var(--color-border);
      opacity: .5;
      margin: 0 auto 10px;
    }

    .about:hover .wp-panel, .about.expanded .wp-panel{
      max-height: 360px;
      opacity: 1;
      transform: translateY(0);
    }
    .wp-list{
      margin: 0; padding: 0; list-style: none;
      display: grid; grid-template-columns: 1fr; gap: 8px;
    }
    .wp-item a{
      display: flex; align-items: center; gap: .5rem;
      text-decoration: none;
      padding: .5rem .6rem; border-radius: 10px;
      border: 1px solid var(--color-border);
      background: var(--color-card);
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    }
    .wp-item a:hover{
      transform: translateY(-2px);
      box-shadow: var(--elevation);
      border-color: rgba(0,0,0,.08);
    }
    .wp-item .tag{
      font-size: .8rem; padding: .1rem .45rem; border-radius: 999px;
      border: 1px solid var(--color-border); background: transparent; color: var(--color-ink-muted);
    }

    /* =========================================================
       赞助商 Logo 墙
    ========================================================== */
    .sponsors {
      padding: 60px 20px;
      background: var(--color-bg);
      color: var(--color-ink);
      border-top:1px solid rgba(255,255,255,.25);
      border-bottom:1px solid rgba(255,255,255,.25);
      transition: background .35s ease, color .35s ease, border-color .35s ease;
    }
    html.theme-dark .sponsors{
      border-top:1px solid var(--color-border);
      border-bottom:1px solid var(--color-border);
    }
    .section-title {
      font-weight: 800; margin-bottom: 20px;
      color: var(--color-ink); letter-spacing: 0;
      font-family: var(--font-mono);
    }
    .sponsor-logo-cell {
      height: 110px; display: flex; align-items: center; justify-content: center;
      padding: 8px 12px; transition: transform .2s ease;
      -webkit-tap-highlight-color: transparent; text-decoration: none;
    }
    .sponsor-logo-cell:hover{ transform: translateY(-2px); }
    .sponsor-logo {
      max-height: 64px; max-width: 160px; width: auto; height: auto; object-fit: contain;
      filter: grayscale(100%) opacity(.9) drop-shadow(0 1px 3px rgba(0,0,0,.15));
      transition: transform .2s ease, filter .2s ease;
      background:#fff; border-radius:8px; padding:6px;   /* 白底卡片，避免深色背景下 LOGO 失真 */
    }
    .sponsor-logo:hover {
      transform: scale(1.05);
      filter: grayscale(0%) opacity(1) drop-shadow(0 2px 6px rgba(0,0,0,.25));
    }


    /* =========================================================
       联系区
    ========================================================== */
    .contact-section{ padding: 56px 20px; background: var(--color-bg); }

    .cpp-comment{ opacity:.45; margin-right:.35em; font-weight:400; }

    .contact-card{
      height: 100%;
      border-radius: 12px;
      padding: 18px;
      background: transparent;
      outline: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 10px 26px rgba(0,0,0,.08);
    }

    html.theme-dark .contact-card{
      outline-color: rgba(255,255,255,.12);
      box-shadow: 0 14px 34px rgba(0,0,0,.35);
    }

    .contact-card .form-control,
    .contact-card .form-select{
      border-radius: 10px;
      border: 1px solid var(--color-border);
      background: transparent;
      color: var(--color-ink);
    }

    html.theme-dark .contact-card .form-control,
    html.theme-dark .contact-card .form-select{
      border-color: rgba(255,255,255,.14);
    }

    .contact-card .form-control::placeholder{
      color: rgba(0,0,0,.42);
    }
    html.theme-dark .contact-card .form-control::placeholder{
      color: rgba(255,255,255,.38);
    }

    .contact-send{
      border-radius: 12px;
      font-weight: 650;
      letter-spacing: .2px;
    }

    .map-mini-wrap{
      border-radius: 12px;
      overflow: hidden;
      outline: 1px solid rgba(0,0,0,.06);
    }
    html.theme-dark .map-mini-wrap{ outline-color: rgba(255,255,255,.10); }

    .contact-map{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding-top: 12px;
    }

    /* 地图只包自己 */
    .contact-map .map-mini-wrap{
      margin-bottom: 8px;
    }

    .map-mini-wrap{
      width: 260px;        /* 👈 控制正方形大小：240–300 都好看 */
      height: 260px;
      margin: 0 auto;

      border-radius: 12px;
      overflow: hidden;

      outline: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 6px 18px rgba(0,0,0,.10);
    }

    .map-mini-wrap iframe{
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    .contact-card.contact-map{
      height: auto !important;    /* 不撑满列 */
    }

    /* =========================================================
       页脚
    ========================================================== */
    footer.bg-light{
      background: var(--color-bg) !important; color: var(--color-ink);
      border-top:0px solid var(--color-border);
      font-family: var(--font-mono);
    }

    /* =========================================================
       头部：主题切换 + 站内搜索
    ========================================================== */
    .header-tools{ display:flex; align-items:center; gap:.75rem; margin-left:.5rem; }

    /* 主题切换，滑块 */
    .theme-switch{
      position:relative; width:44px; height:24px; background:#cbd5e1;
      border-radius:999px; cursor:pointer; transition:background .2s ease;
      border:1px solid rgba(255,255,255,.6);
    }
    .theme-switch::after{
      content:""; position:absolute; top:50%; left:3px; transform:translateY(-50%);
      width:18px; height:18px; border-radius:50%; background:#fff; transition:left .2s ease;
      box-shadow:0 1px 2px rgba(0,0,0,.15);
    }
    html.theme-dark .theme-switch{ background:#334155; border-color: var(--color-border); }
    html.theme-dark .theme-switch::after{ left:23px; }

    /* 搜索面板 */
    .search-btn{
      width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
      border-radius:8px; border:1px solid rgba(255,255,255,.6); background:transparent;
      color:#fff; cursor:pointer; font-family: var(--font-mono);
    }
    .search-btn:hover{ background:rgba(255,255,255,.15); }
    .search-btn i{
      font-size: 1.15rem;
      line-height: 1;
      display: block;
    }

    .search-btn:hover,
    .search-btn:focus,
    .search-btn:focus-visible{
      color: var(--brand-hover-purple) !important;
      outline: none;
    }

    .search-panel{
      position:fixed; top:12px; right:12px; z-index:1050;
      background:var(--color-card); border:1px solid var(--color-border); border-radius:12px;
      box-shadow: var(--elevation);
      padding:.6rem; display:none; gap:.5rem; align-items:center;
      transition: background .35s ease, color .35s ease, border-color .35s ease;
      font-family: var(--font-mono);
    }
    .search-panel.show{ display:flex; }
    .search-panel input{
      width:220px; border:1px solid var(--color-border); background:transparent; color: var(--color-ink);
      border-radius:8px; padding:.35rem .55rem; outline: none; font-family: var(--font-mono);
    }
    .search-panel .sp-btn{
      border:1px solid var(--color-border); background:var(--color-card); color: var(--color-ink);
      padding:.35rem .6rem; border-radius:8px; cursor:pointer; font-family: var(--font-mono);
    }
    .search-panel .sp-count{ color: var(--color-ink-muted); font-size:.9rem; min-width:60px; text-align:center; }

    .search-hit{ background: var(--color-search-hit-bg); color: var(--color-search-hit-fg); padding: 0 .15em; border-radius:.2em; }
    .search-hit.active{ outline:2px solid var(--color-accent-strong); outline-offset:2px; }

    #openSearch.search-btn{
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 !important;
    margin:0;
    line-height:1 !important;

    border-radius:8px;
    border:1px solid rgba(255,255,255,.6);
    background:transparent;

    color:#fff;
    cursor:pointer;

    /* ✅ 关键：不要用 mono 字体影响 icon */
    font: inherit;

    /* ✅ 关键：抹平浏览器默认 button 外观差异 */
    appearance:none;
    -webkit-appearance:none;
  }

  #openSearch.search-btn i{
    font-size: 1.15rem;
    line-height: 1;
    display:block;
    pointer-events:none;
  }

  #openSearch.search-btn:hover,
  #openSearch.search-btn:focus,
  #openSearch.search-btn:focus-visible{
    background:rgba(255,255,255,.15);
    color: var(--brand-hover-purple) !important;
    outline:none;
  }

    .container {
      max-width: 1600px;   /* 页面横宽 */
    }

    :root{
    --font-mono: "JetBrains Mono","IBM Plex Mono","Source Code Pro",
                "Cascadia Code",Consolas,Menlo,"Liberation Mono",
                "DejaVu Sans Mono","Courier New",monospace;
  }

  /* 浅色主题颜色 */
  :root{
    --brand-cpp-blue: #133f83;
    --brand-cpp-blue-weak: #f3faff;

    --color-bg: #ffffff;
    --color-ink: #111;
    --color-ink-muted: #0b1220cc;
    --color-card: #ffffff;
    --color-border: #d8d8d8;
    --elevation: 0 6px 24px rgba(0,0,0,.08);

    --color-ring: #1c7cc285;
    --color-divider: #4675a1;
    --color-search-hit-bg: #fff3b0;
    --color-search-hit-fg: #111;

    --color-hero-title: #111;
    --color-hero-subtitle: #111;

    --color-accent: #8a2d2d;
    --color-accent-strong: #ff7a00;
    --title-weight: 700;
  }

  /* 深色主题覆盖 */
  html.theme-dark{
    --color-bg: #1a0b2e;
    --color-ink: #e5e5e5;
    --color-ink-muted: #b0b8c0;
    --color-card: #2a2a2a;
    --color-border: #3a3a3a;
    --elevation: 0 10px 30px rgba(0,0,0,.45);

    --color-ring: #60a5fa80;
    --color-divider: #6999D3;

    --color-search-hit-bg: #3b2f0a;
    --color-search-hit-fg: #fde68a;

    --color-hero-title: #fff;
    --color-hero-subtitle: #fff;
  }

  body{
    font-family: var(--font-mono);
    line-height: 1.55;
    background: var(--color-bg);
    color: var(--color-ink);
    font-variant-ligatures: none;
    font-variant-numeric: tabular-nums;
    transition: background .35s ease, color .35s ease;

    /* 预留 bottom-nav 不挡内容 */
    padding-bottom: 110px;
  }

  /* ✅ 修正：about-container 选择器 */
  .about-container{ max-width: 1680px; margin: 0 auto; }

  /* ❌ 删除：不要让 footer fixed
  footer { position: fixed; ... } 这一段删掉
  */

  /* =======================
    Bottom nav
  ======================= */
  .bottom-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 1060;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .bottom-nav.show{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .bottom-nav-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-radius: 14px;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid rgba(0,0,0,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }
  html.theme-dark .bottom-nav-inner{
    background: rgba(20,20,20,.72);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }

  .bottom-nav-left{
    font-size: 13px;
    line-height: 1.35;
    color: rgba(0,0,0,.72);
    max-width: 64%;
  }
  html.theme-dark .bottom-nav-left{ color: rgba(255,255,255,.75); }

  .bottom-nav-left a{
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .bottom-nav-right{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  .bottom-links{
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .bottom-link{
    font-size: 13px;
    color: rgba(0,0,0,.78);
    text-decoration: none;
    white-space: nowrap;
  }
  html.theme-dark .bottom-link{ color: rgba(255,255,255,.78); }

  .bottom-link:hover{
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .bottom-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    text-decoration: none;
    color: rgba(0,0,0,.85);
    border: 1px solid rgba(0,0,0,.08);
  }
  html.theme-dark .bottom-icon{
    color: rgba(255,255,255,.85);
    border-color: rgba(255,255,255,.12);
  }

  @media (max-width: 768px){
    .bottom-nav-inner{ flex-direction: column; align-items: flex-start; }
    .bottom-nav-left{ max-width: 100%; }
    .bottom-links{ flex-wrap: wrap; gap: 10px 14px; }
  }

  /* =======================
   Bottom nav hover = 紫色（同 navbar）
   ======================= */

  .bottom-nav a:hover,
  .bottom-nav .bottom-link:hover,
  .bottom-nav .bottom-icon:hover,
  .bottom-nav .dropdown-toggle:hover {
    color: var(--brand-hover-purple) !important;
  }

  .bottom-nav .dropdown-item:hover{
    color: var(--brand-hover-purple) !important;
    background-color: transparent;
  }


  /* =======================
   Hero CTA: GitHub (no border, tool icon, bounce hover)
   ======================= */
  .hero-btn-github{
    background: rgba(17, 17, 17, 0.06);  /* 浅灰贴合整体 */
    color: var(--color-ink);
    border: 0 !important;                /* 无边框 */
    box-shadow: none !important;
    border-radius: 12px;
    font-weight: 650;
    letter-spacing: .2px;

    display: inline-flex;
    align-items: center;
    gap: .35rem;

    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
    will-change: transform;
  }

  .hero-btn-github i{
    font-size: 1.05em;
    opacity: .95;
  }

  /* hover：轻微“跳一下” + 阴影提示选中，不变紫色 */
  .hero-btn-github:hover{
    background: rgba(17, 17, 17, 0.09);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
  }

  /* active：按下回弹 */
  .hero-btn-github:active{
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(0,0,0,.10);
  }

  /* 深色模式：用亮一点的灰 */
  html.theme-dark .hero-btn-github{
    background: rgba(255,255,255,.10);
    color: var(--color-ink);
  }

  html.theme-dark .hero-btn-github:hover{
    background: rgba(255,255,255,.16);
    box-shadow: 0 12px 26px rgba(0,0,0,.35);
  }

  /* 尊重减少动画设置 */
  @media (prefers-reduced-motion: reduce){
    .hero-btn-github{ transition: none; }
    .hero-btn-github:hover{ transform: none; }
  }


  /* 收紧 Hero 下方空隙 */
  .hero{
    padding-bottom: 36px; /* 原来是 80px 统一 padding，这里把底部缩小 */
  }

  /* 收紧 Quick-links 上方空隙 */
  .features{
    padding-top: 18px;    /* 原来 36px */
  }

  #quick-links{
    margin-top: -36px;   /* 往上贴一点 */
    padding-top:-36px;   /* 同时保持内部呼吸感 */
  }

  .cpp-angle{
    color: var(--color-ink);   /* 纯黑（自动跟随深浅主题） */
    font-weight: 700;
    opacity: .85;
    margin: 0 .35em;
    font-size: .9em;
  }

  .search-panel-min{
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, calc(100vw - 24px));
  height: 42px;
  padding: 0 10px;
  border-radius: 12px;

  display: none;
  align-items: center;
  gap: 10px;

  /* 透明/半透明效果 */
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  z-index: 3000;
}

/* 深色主题下稍微更亮一点 */
html.theme-dark .search-panel-min{
  background: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}

.search-panel-min.show{
  display: flex;
}

.search-panel-min .bi-search{
  font-size: 1.05rem;
  color: rgba(255,255,255,.95);
}

.search-panel-min input{
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font: inherit;
  line-height: 1;
}

.search-panel-min input::placeholder{
  color: rgba(255,255,255,.75);
}

.search-cancel{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.85);
  font: inherit;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.search-cancel:hover,
.search-cancel:focus,
.search-cancel:focus-visible{
  color: var(--brand-hover-purple);
  outline: none;
}

.search-hit{
  background: var(--color-search-hit-bg) !important;
  color: var(--color-search-hit-fg) !important;
}