/* ════════════════════════════════════════════════════════════════
   包租公 · 共享顶部导航 nav.css — 全站唯一来源
   引用页：intro.html（首页）/ learn.html + 全部知识库文章页（经 learn.css 同级 link）
            / calc.html（计算器）。app(index.html) 不引本文件（自带底部 nav）。
   规则：任何 <nav> 的样式只在这里改，不要再往各页内联 / learn.css 里复制一份。
   依赖各页 :root 已定义的 token：--bg --text --muted --line --line-2 --accent --accent-2。
   ════════════════════════════════════════════════════════════════ */

/* 预留滚动条槽 —— 有/无滚动条的页面之间视口同宽，导航不左右跳 */
html { scrollbar-gutter: stable; }

nav {
  position: sticky; top: 0; z-index: 100;
  padding: 18px max(24px, 5vw);
  /* 琉璃 2.0：真玻璃 chrome（对角高光 + tint + 折光），/ds-beta 为准 */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 45%, rgba(255,255,255,0) 70%),
    rgba(8,10,18,0.55);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border-bottom: 1px solid transparent;
  display: flex; justify-content: space-between; align-items: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  /* 显式锁定字体 —— 各页 body 字体即便不同，导航文字宽度也一致（不漂移） */
  font-family: -apple-system, "SF Pro Text", "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
}
nav.scrolled {
  border-bottom-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 28px -12px rgba(1,3,9,0.55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  nav { background: rgba(8,10,18,0.97); }
}
@media (prefers-reduced-transparency: reduce) {
  nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(8,10,18,0.97); }
}

nav .logo {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text); text-decoration: none;
  display: flex; align-items: center; gap: 8px;
}
nav .logo .glyph {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
}
nav .logo .glyph svg { width: 100%; height: 100%; display: block; }

nav .nav-center { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
nav .navlink { font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color 0.15s; white-space: nowrap; }
nav .navlink:hover { color: var(--accent); }

nav .right { display: flex; align-items: center; gap: 14px; }

/* 语言三段 · 分段药丸 + 选中段金渐变浮起（参考款，与 app 头一致）
   注：--accent-light 仅 app 定义，落地页未定义 → var() 回退到纯 --accent（实色金，仍带浮起感） */
nav .lang-pills { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; height: 32px; padding: 3px; background: rgba(3,5,12,0.34); box-shadow: inset 0 1.5px 4px rgba(0,0,0,0.25); }
nav .lang-pills button {
  background: transparent; border: none; padding: 0 10px;
  font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer;
  font-family: inherit; letter-spacing: 0.02em; min-width: 32px;
  height: 26px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
}
nav .lang-pills button:hover { color: var(--text); }
nav .lang-pills button.active {
  background: linear-gradient(180deg, var(--accent-light, var(--accent)), var(--accent));
  color: #1A1407; font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.45);
}

nav .calc-link {
  font-size: 13px; font-weight: 500; color: var(--accent);
  border: 1px solid rgba(232,188,114,0.32); padding: 7px 13px; border-radius: 999px;
  background: rgba(232,188,114,0.08);
  text-decoration: none; transition: background 0.15s, color 0.15s, transform 0.15s;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; line-height: 1;
}
nav .calc-link:hover { background: rgba(232,188,114,0.15); transform: translateY(-1px); }
nav .calc-link .calc-text { display: inline-block; }

/* 琉璃 2.0：进入应用 = 实金胶囊（一屏唯一的「确定」） */
nav .cta {
  font-size: 13px; font-weight: 600; color: #211402;
  background: linear-gradient(160deg, #F4D292 -12%, #E6B86A 40%, #C08F3D 118%);
  padding: 8px 16px; border-radius: 999px; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 4px 14px -5px rgba(214,166,86,0.45);
  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
}
nav .cta:hover {
  filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 8px 20px -6px rgba(214,166,86,0.58);
}

/* ≤880px：三行栅格（① logo + CTA  ② 语言条 + Demo  ③ 内容导航跨满栏） */
@media (max-width: 880px) {
  nav {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px; row-gap: 10px;
    padding: 12px 18px; align-items: center;
  }
  nav .lang-pills button { padding: 0 8px; min-width: 28px; }
  nav .logo { grid-column: 1; grid-row: 1; min-width: 0; }
  nav .right { display: contents; }
  nav .right .cta { grid-column: 2; grid-row: 1; justify-self: end; }
  nav .right .lang-pills { grid-column: 1; grid-row: 2; justify-self: start; }
  nav .right .calc-link { grid-column: 2; grid-row: 2; justify-self: end; }
  nav .nav-center { grid-column: 1 / -1; grid-row: 3; gap: 16px 18px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 9px; }
}