/* PC 主导航基线：以首页为唯一视觉基准。 */
@media (min-width: 769px) {
  .nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, .88) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .22) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
    backdrop-filter: blur(18px) !important;
  }

  .nav .container.nav-inner {
    width: min(1280px, calc(100vw - 48px)) !important;
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: 260px minmax(420px, 1fr) 300px !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 14px 0 !important;
    font-family: var(--site-font-family) !important;
  }

  .nav .logo {
    width: 260px !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  .nav .logo-mark {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  .nav .logo-copy strong {
    display: block !important;
    color: var(--text-1) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
  }
  .nav .logo-copy span {
    display: block !important;
    color: var(--text-3) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 17px !important;
    letter-spacing: 0 !important;
  }

  .nav .nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    min-width: 0 !important;
  }

  .nav .nav-menu a {
    position: relative !important;
    height: auto !important;
    padding: 8px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-2) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    font-family: var(--site-font-family) !important;
    font-synthesis: none !important;
    white-space: nowrap !important;
  }

  .nav .nav-menu a.active,
  .nav .nav-menu a:hover { color: var(--primary) !important; }
  .nav .nav-menu a.active { font-weight: 400 !important; }

  .nav .nav-menu a.active::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -8px !important;
    width: auto !important;
    height: 2px !important;
    transform: none !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #00aceb, #6fd4f4) !important;
    box-shadow: 0 0 14px rgba(0,172,235,.42) !important;
  }

  .nav .nav-note {
    width: 300px !important;
    justify-self: end !important;
    color: var(--text-3) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 实用工具页此前采用了独立的胶囊导航；在 PC 端改为首页导航。 */
  body[data-page="tools"] .tools-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, .88) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .22) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
    backdrop-filter: blur(18px) !important;
  }

  body[data-page="tools"] .tools-nav-inner {
    width: min(1280px, calc(100vw - 48px)) !important;
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: 260px minmax(420px, 1fr) 300px !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 14px 0 !important;
    font-family: var(--site-font-family) !important;
  }

  body[data-page="tools"] .tools-logo { width: 260px !important; gap: 12px !important; }
  body[data-page="tools"] .tools-logo-mark { width: 42px !important; height: 42px !important; flex-basis: 42px !important; border-radius: 12px !important; }
  body[data-page="tools"] .tools-logo .logo-copy { display: block !important; min-width: 0 !important; }
  body[data-page="tools"] .tools-logo .logo-copy strong {
    display: block !important;
    color: var(--text-1) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
  }
  body[data-page="tools"] .tools-logo .logo-copy > span {
    display: block !important;
    color: var(--text-3) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 17px !important;
    letter-spacing: 0 !important;
  }
  body[data-page="tools"] .tools-nav-menu { display: flex !important; align-items: center !important; justify-content: center !important; gap: 24px !important; }
  body[data-page="tools"] .tools-nav-menu a { position: relative !important; padding: 8px 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--text-2) !important; font-family: var(--site-font-family) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; letter-spacing: 0 !important; font-synthesis: none !important; }
  body[data-page="tools"] .tools-nav-menu a:hover,
  body[data-page="tools"] .tools-nav-menu a.active { color: var(--primary) !important; background: transparent !important; }
  body[data-page="tools"] .tools-nav-menu a.active { font-weight: 400 !important; }
  body[data-page="tools"] .tools-nav-menu a.active::after { content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -8px !important; height: 2px !important; border-radius: 999px !important; background: linear-gradient(90deg, #00aceb, #6fd4f4) !important; box-shadow: 0 0 14px rgba(0,172,235,.42) !important; }
  body[data-page="tools"] .tools-nav-note { width: 300px !important; color: var(--text-3) !important; font-size: 12px !important; font-weight: 400 !important; text-align: right !important; }

  /* “我的”工作台也使用同样的首行导航尺寸与文字层级。 */
  .account-workspace-view .account-nav {
    border-bottom: 1px solid rgba(148, 163, 184, .22) !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
    backdrop-filter: blur(18px) !important;
  }

  .account-workspace-view .account-nav-inner {
    width: min(1280px, calc(100vw - 48px)) !important;
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: 260px minmax(420px, 1fr) 300px !important;
    align-items: center !important;
    gap: 20px !important;
  }

  .account-workspace-view .account-brand { width: 260px !important; gap: 12px !important; }
  .account-workspace-view .account-brand img { width: 42px !important; height: 42px !important; border-radius: 12px !important; }
  .account-workspace-view .account-brand strong { font-size: 16px !important; }
  .account-workspace-view .account-brand span { font-size: 12px !important; }
  .account-workspace-view .account-page-links { display: flex !important; align-items: center !important; justify-content: center !important; gap: 24px !important; overflow: visible !important; }
  .account-workspace-view .account-page-links a { position: relative !important; padding: 8px 0 !important; color: var(--text-2) !important; font-family: var(--site-font-family) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; letter-spacing: 0 !important; font-synthesis: none !important; }
  .account-workspace-view .account-page-links a.active,
  .account-workspace-view .account-page-links a:hover { color: var(--primary) !important; }
  .account-workspace-view .account-page-links a.active { font-weight: 400 !important; border-bottom: 0 !important; }
  .account-workspace-view .account-page-links a.active::after { content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -8px !important; height: 2px !important; border-radius: 999px !important; background: linear-gradient(90deg, #00aceb, #6fd4f4) !important; box-shadow: 0 0 14px rgba(0,172,235,.42) !important; }
  .account-workspace-view .account-back { justify-self: end !important; color: var(--text-3) !important; font-size: 12px !important; font-weight: 400 !important; }
}

/* 中窄桌面仍属于 PC 布局，但不能沿用宽屏的三列固定宽度。 */
@media (min-width: 769px) and (max-width: 1180px) {
  .nav .container.nav-inner,
  body[data-page="tools"] .tools-nav-inner,
  .account-workspace-view .account-nav-inner {
    width: calc(100% - 32px) !important;
    grid-template-columns: minmax(188px, 220px) minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .nav .logo,
  body[data-page="tools"] .tools-logo,
  .account-workspace-view .account-brand {
    width: auto !important;
  }

  .nav .nav-menu,
  body[data-page="tools"] .tools-nav-menu,
  .account-workspace-view .account-page-links {
    justify-content: flex-end !important;
    gap: 10px !important;
  }

  .nav .nav-menu a,
  body[data-page="tools"] .tools-nav-menu a,
  .account-workspace-view .account-page-links a {
    font-size: 12px !important;
  }

  .nav .nav-note,
  body[data-page="tools"] .tools-nav-note,
  .account-workspace-view .account-back {
    display: none !important;
  }
}

/* PC 前台统一画布：以手机端确认的冷调蓝色渐变为基准，保留桌面端的
   留白与阅读密度。不使用分散光斑，避免不同页面产生不连续的底色。 */
@media (min-width: 769px) {
  html:has(body[data-page]),
  html:has(body.account-workspace-view) {
    background: #d6f0fa !important;
  }

  body[data-page="home"],
  body[data-page="products"],
  body[data-page="tools"],
  body[data-page="publish"],
  body[data-page="knowledge"],
  body[data-page="forum"],
  body[data-page="demand"],
  body.account-workspace-view {
    background: linear-gradient(160deg, #a8dcfb 0%, #d6f0fa 30%, #e8f3ff 55%, #f0fafd 100%) fixed !important;
    background-repeat: no-repeat !important;
  }

  body[data-page="home"]::before,
  body[data-page="products"]::before,
  body[data-page="tools"]::before,
  body[data-page="publish"]::before,
  body[data-page="knowledge"]::before,
  body[data-page="forum"]::before,
  body[data-page="demand"]::before,
  body.account-workspace-view::before {
    display: none !important;
  }

  .nav,
  body[data-page="tools"] .tools-nav,
  .account-workspace-view .account-nav {
    background: rgba(241, 248, 255, .78) !important;
    border-bottom-color: rgba(137, 190, 231, .42) !important;
    box-shadow: 0 10px 30px rgba(40, 104, 156, .10), inset 0 1px 0 rgba(255,255,255,.72) !important;
    backdrop-filter: blur(20px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.16) !important;
  }

  /* 单个高亮层在导航项目之间平滑移动。文字尺寸和字重固定，因此不会
     因选中状态造成挤压、换行或导航整体跳动。 */
  .nav .nav-menu,
  body[data-page="tools"] .tools-nav-menu,
  .account-workspace-view .account-page-links {
    position: relative !important;
    isolation: isolate;
    gap: 8px !important;
  }

  .nav .desktop-nav-indicator,
  body[data-page="tools"] .desktop-nav-indicator,
  .account-workspace-view .desktop-nav-indicator {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 1px solid rgba(124, 191, 241, .38);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(218,239,255,.84));
    box-shadow: 0 7px 18px rgba(59, 130, 198, .12), inset 0 1px 0 rgba(255,255,255,.78);
    pointer-events: none;
    transition:
      transform .24s cubic-bezier(.22, 1, .36, 1),
      width .24s cubic-bezier(.22, 1, .36, 1),
      height .24s cubic-bezier(.22, 1, .36, 1),
      opacity .16s ease;
  }

  .nav .nav-menu a,
  body[data-page="tools"] .tools-nav-menu a,
  .account-workspace-view .account-page-links a {
    position: relative !important;
    z-index: 1;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    background: transparent !important;
    transition: color .18s ease, transform .12s ease !important;
  }

  .nav .nav-menu a.active,
  body[data-page="tools"] .tools-nav-menu a.active,
  .account-workspace-view .account-page-links a.active {
    color: #00628a !important;
    font-weight: 400 !important;
    /* 指示器脚本异步加载或页面切换尚未完成时，选中项本身也保留气泡外观，
       避免导航在路由切换期间短暂退化为普通文字。脚本就绪后会继续负责
       在项目之间平滑移动同样的高亮层。 */
    background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(218,239,255,.84)) !important;
    border: 1px solid rgba(124, 191, 241, .38) !important;
    box-shadow: 0 7px 18px rgba(59, 130, 198, .12), inset 0 1px 0 rgba(255,255,255,.78) !important;
  }

  .nav .nav-menu a.active::after,
  body[data-page="tools"] .tools-nav-menu a.active::after,
  .account-workspace-view .account-page-links a.active::after {
    display: none !important;
  }

  .nav .nav-menu a:active,
  body[data-page="tools"] .tools-nav-menu a:active,
  .account-workspace-view .account-page-links a:active {
    transform: scale(.97);
  }

  .nav .nav-menu a:focus-visible,
  body[data-page="tools"] .tools-nav-menu a:focus-visible,
  .account-workspace-view .account-page-links a:focus-visible {
    outline: 2px solid rgba(33, 116, 223, .48);
    outline-offset: 2px;
  }

  body.desktop-nav-transitioning .nav-menu,
  body.desktop-nav-transitioning .tools-nav-menu,
  body.desktop-nav-transitioning .account-page-links {
    pointer-events: none;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .nav .nav-menu,
  body[data-page="tools"] .tools-nav-menu,
  .account-workspace-view .account-page-links {
    gap: 4px !important;
  }

  .nav .nav-menu a,
  body[data-page="tools"] .tools-nav-menu a,
  .account-workspace-view .account-page-links a {
    padding-inline: 7px !important;
  }
}