/* ---------- base ---------- */
  html, body {
    background: #FAF9F6;
    color: #0e0e10;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  [x-cloak] { display: none !important; }

  /* ---------- top nav ---------- */
  /* Resting (page top) — fully transparent so the hero illustration runs
     to the very top of the page uninterrupted (was a 72% frosted band that
     visibly cut the sky). The rgba(…, 0) form (not `transparent`) keeps the
     same color channels as the scrolled state so the 220ms background
     transition interpolates alpha only, with no hue flash; likewise
     blur(0)/saturate(100%) are spelled out instead of `none` so
     backdrop-filter interpolates smoothly into the scrolled glass rather
     than snapping at the first scroll tick. */
  .top-nav {
    background: rgba(250, 249, 246, 0);
    backdrop-filter: blur(0px) saturate(100%);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    border-bottom: 1px solid transparent;
    transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease, backdrop-filter 220ms ease, -webkit-backdrop-filter 220ms ease;
  }
  /* Scrolled state — strong glass + crisper hairline + a deeper soft
     shadow so the nav clearly floats over content once anything can
     actually slide beneath it. */
  .top-nav.is-scrolled {
    background: rgba(250, 249, 246, 0.94);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom-color: rgba(14, 14, 16, 0.1);
    box-shadow:
      0 1px 0 rgba(14, 14, 16, 0.04),
      0 8px 24px -10px rgba(14, 14, 16, 0.14);
  }
  /* Vertical hairline between brand and nav links — gives the left cluster
     a clear "logo | links" reading order instead of two adjacent fragments. */
  .nav-divider {
    width: 1px;
    height: 22px;
    background: rgba(14, 14, 16, 0.12);
    flex-shrink: 0;
  }
  .nav-link {
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #38383d;
    letter-spacing: -0.1px;
    transition: color 120ms ease;
  }
  .nav-link:hover { color: #0e0e10; }
  .nav-link.is-active { color: #0e0e10; }

  .brand-logo {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: cover;
    /* Logo PNG is a square black-background island icon. We crop it to a
       circle — LinkedIn-avatar style — so it reads as a clean brand badge. */
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* Nav CTA — local variant of btn-primary with a hover micro-interaction:
     the leading "+" fades out and an arrow slides in from the right, mirroring
     the editorial "Read →" hover used on the floating cards. */
  .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: #0e0e10;
    border-radius: 999px;
    padding: 8px 15px;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid rgba(14,14,16,0.16);
    cursor: pointer;
    overflow: hidden;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .nav-cta:hover {
    background: rgba(10,135,247,0.08);
    border-color: rgba(10,135,247,0.45);
    color: #0969da;
  }
  .nav-cta-plus,
  .nav-cta-arrow {
    transition: opacity 160ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), margin 160ms ease;
  }
  .nav-cta-arrow {
    opacity: 0;
    margin-left: -16px;
    transform: translateX(-4px);
  }
  .nav-cta:hover .nav-cta-plus {
    opacity: 0;
    transform: translateX(-6px);
    margin-right: -16px;
  }
  .nav-cta:hover .nav-cta-arrow {
    opacity: 1;
    transform: translateX(0);
    margin-left: 0;
  }

  /* Phones: keep every utility visible, but tighten the cluster so the brand,
     微信 / GitHub / 简历 / theme and 登岛 / avatar all fit in one row. */
  @media (max-width: 520px) {
    .top-nav > div { height: 60px; padding-left: 12px; padding-right: 12px; gap: 8px; }
    .top-nav .brand-logo { width: 32px; height: 32px; }
    .top-nav .nav-actions { gap: 3px; flex: 0 0 auto; min-width: 0; }
    .top-nav .nav-wechat,
    .top-nav .nav-wechat + .nav-icon-btn { display: inline-flex; }
    .top-nav .nav-icon-btn { width: 30px; height: 30px; }
    .top-nav .nav-account { width: 30px; height: 30px; }
    .top-nav .nav-login {
      min-width: 46px;
      justify-content: center;
      padding: 7px 10px;
      font-size: 12.5px;
    }
    .top-nav .nav-icon-btn[data-tip]::after { display: none; }
    /* 窄屏：Agent 模式收成机器人图标圆点，省出横向空间给整排 utility。 */
    .top-nav .nav-agent {
      gap: 0;
      width: 30px;
      height: 30px;
      padding: 0;
      justify-content: center;
    }
    .top-nav .nav-agent .nav-agent-label { display: none; }
  }

  @media (max-width: 360px) {
    .top-nav > div { padding-left: 10px; padding-right: 10px; gap: 6px; }
    .top-nav .brand-logo { width: 30px; height: 30px; }
    .top-nav .nav-actions { gap: 1px; }
    .top-nav .nav-icon-btn,
    .top-nav .nav-account { width: 28px; height: 28px; }
    .top-nav .nav-login { min-width: 42px; padding: 6px 8px; }
    .top-nav .nav-agent { width: 28px; height: 28px; }
  }

  /* Icon-only nav button — used for the theme toggle sitting to the left of
     the "发布岗位" CTA. Circular hit target, transparent until hover, so it
     reads as a quiet utility next to the prominent primary pill. */
  .nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: #38383d;
    background: transparent;
    transition: color 160ms ease, background 160ms ease, transform 160ms ease;
  }
  .nav-icon-btn:hover {
    color: #0e0e10;
    background: rgba(14, 14, 16, 0.06);
    transform: translateY(-1px);
  }

  /* Agent 模式入口 —— 顶栏最右侧（头像/登岛之后）的机器人图标 + 文字，
     无底框、透明背景，与右簇其余图标控件同样的轻量观感。点击进 /agent。 */
  .nav-agent {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: #38383d;
    border-radius: 999px;
    padding: 6px 4px;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: color 150ms ease, transform 150ms ease;
  }
  .nav-agent:hover {
    color: #0e0e10;
    transform: translateY(-1px);
  }
  .nav-agent svg { flex-shrink: 0; color: #1c1c1f; }
  .nav-agent:hover svg { color: #0e0e10; }
  /* Instant hover tooltip for nav controls (data-tip="…") — explains what
     each control does, without the ~1s delay / unstyled look of native title.
     Shared by icon buttons and the 登岛 / Agent模式 pills. */
  .nav-icon-btn[data-tip],
  .nav-login[data-tip],
  .nav-agent[data-tip] { position: relative; }
  .nav-icon-btn[data-tip]::after,
  .nav-login[data-tip]::after,
  .nav-agent[data-tip]::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    white-space: nowrap;
    background: #1f2430; color: #fff;
    font-size: 12px; line-height: 1.4; padding: 5px 9px; border-radius: 7px;
    box-shadow: 0 6px 18px rgba(14, 14, 16, 0.18);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 140ms ease; z-index: 60;
  }
  /* Agent模式 pill 贴着视口右缘，气泡改右对齐防止溢出。 */
  .nav-agent[data-tip]::after { left: auto; right: 0; transform: none; }
  .nav-icon-btn[data-tip]:hover::after,
  .nav-icon-btn[data-tip]:focus-visible::after,
  .nav-login[data-tip]:hover::after,
  .nav-login[data-tip]:focus-visible::after,
  .nav-agent[data-tip]:hover::after,
  .nav-agent[data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
  /* Optical centering for the crescent moon (dark-mode glyph): its visual
     mass sits ~0.7px lower-left of the geometric center, so the box-centered
     icon still reads as slightly low. Nudge it up-and-right so it looks
     vertically centered. The sun glyph is radially symmetric — no fix. */
  .nav-mode-moon { transform: translate(0.7px, -0.7px); }

  /* 微信社群二维码弹层 + GitHub 入口。弹层桌面端 hover 即出（纯 CSS）；
     click 切换 .is-open（Alpine / 各页内联脚本驱动），移动端唯一触发方式。 */
  .nav-wechat { position: relative; display: inline-flex; }
  .nav-wechat-pop {
    position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: 184px; padding: 12px;
    background: #fff; border: 1px solid rgba(14, 14, 16, 0.08);
    border-radius: 14px; box-shadow: 0 14px 36px rgba(14, 14, 16, 0.18);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
    pointer-events: none;
  }
  .nav-wechat-pop::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
  .nav-wechat:hover .nav-wechat-pop,
  .nav-wechat:focus-within .nav-wechat-pop,
  .nav-wechat.is-open .nav-wechat-pop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .nav-wechat-pop img { display: block; width: 160px; height: 160px; object-fit: contain; border-radius: 8px; }
  .nav-wechat-cap { font-size: 12px; line-height: 1.5; color: #5a5a62; text-align: center; }
  .nav-wechat-cap strong { display: block; font-weight: 600; color: #0e0e10; margin-bottom: 2px; }
  html.dark .nav-wechat-pop { background: #11192b; border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); }
  html.dark .nav-wechat-cap { color: #9a9aa6; }
  html.dark .nav-wechat-cap strong { color: #ececf1; }