/* ==========================================================================
   2026-10-23 · 顶栏三栏布局（全站）
   问题：原来 .header__inner 是 flex，右侧动作区宽度远大于品牌区，
        `.nav{margin:0 auto}` 只能在"剩余空间"里居中 → 菜单整体偏右、看着错位；
        右侧还堆了 登录 / 免费注册 / 找回密码 / 预约演示 四个入口，挤成一团。
   做法：改成 `1fr auto 1fr` 三栏网格（品牌左 / 菜单正中对齐容器中线 / 动作右），
        动作区只保留「登录 + 免费注册」，找回密码回到登录页，预约演示由首屏 CTA 承担。
   ========================================================================== */
@media (min-width: 861px) {
  .header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 24px;
    height: 76px;
  }
  .brand { justify-self: start; min-width: 0; }
  .nav { justify-self: center; margin: 0; flex-wrap: nowrap; }
  .header__act {
    justify-self: end;
    margin-left: 0;
    gap: 14px;
    flex-wrap: nowrap;
  }
  .header__auth-link { font-size: 13.5px; }
  .header__act .btn--sm { --bh: 36px; padding: 0 18px; }
  /* 登录 / 注册之间留一条细线，两个入口不再糊在一起 */
  .header__act .header__auth-link + .btn--primary {
    position: relative;
    margin-left: 4px;
  }
  .header__act .header__auth-link + .btn--primary::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: var(--line-2);
  }
}

@media (min-width: 861px) and (max-width: 1080px) {
  .header__inner { column-gap: 16px; }
  .nav__link { padding: 8px 10px; font-size: 13.5px; }
  .header__auth-link { font-size: 13px; }
}

/* 已登录：账号名 + 进入工作台 + 退出，同样不换行 */
@media (min-width: 861px) {
  .header__user { max-width: 150px; }
}

/* 窄屏：文字链接让位，主按钮 + 汉堡即可 */
@media (max-width: 560px) {
  .header__act .header__auth-link { display: none; }
  .header__act { gap: 10px; }
}