/* ==========================================================================
   DJB 联脑 · Night Signal 组件层（.ng-*）
   --------------------------------------------------------------------------
   设计源：design/prototypes/product-suite-v1/site/index.html（公共站 8 页设计样）
   颜色口径：design/15-DJB-Aurora-Signal-配色修订-v1.md §1.1
   动效口径：ops/uta/DESIGN-DUAL-THEME-2026-11-01.md §4（M1–M13）
   规格：reports/DESIGN-FIDELITY-2026-11-03/00-SPEC.md §2/§3

   约束
   - 只加不改：不重定义 portal.css / pages.css 已有类，全部新前缀 .ng-*。
   - 双主题同构：默认（Night）/ [data-theme="day"] / prefers-color-scheme: light 三块
     只换颜色与光晕强度，结构、间距、动效完全一致。
   - 尺度：设计样是缩小示意图（正文 9–13px），此层按 §2 放大到生产尺度（正文 14px）。
   - 载入顺序：排在 theme.css 之后（token 已就绪），本文件只消费 token，不定义 token。
   ========================================================================== */

:root {
  --ng-wrap: 1180px;
  --ng-hero: clamp(34px, 4.2vw, 52px);
  --ng-h1: 30px;
  --ng-h2: 21px;
  --ng-h3: 16px;
  --ng-body: 14px;
  --ng-small: 12.5px;
  --ng-mono: 11.5px;
  --ng-r: 12px;
  --ng-r-sm: 8px;
  --ng-gap: 14px;
  --ng-pad: 18px;
  --ng-section: 56px;
  /* 卡片面：夜色下是低透明度白，日间是纯 surface */
  --ng-card-bg: linear-gradient(150deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  --ng-card-bg-solid: var(--surface-2);
  --ng-code-bg: #04100e;
  --ng-code-ink: #a9e8d3;
  --ng-code-line: rgba(143, 217, 190, .16);
}
html:root[data-theme="day"] {
  --ng-card-bg: linear-gradient(150deg, #ffffff, var(--surface-2));
  --ng-card-bg-solid: #ffffff;
  --ng-code-bg: #171029;
  --ng-code-ink: #d9cff8;
  --ng-code-line: rgba(185, 162, 255, .22);
}
@media (prefers-color-scheme: light) {
  html:root:not([data-theme]):not([data-surface="public"]) {
    --ng-card-bg: linear-gradient(150deg, #ffffff, var(--surface-2));
    --ng-card-bg-solid: #ffffff;
    --ng-code-bg: #171029;
    --ng-code-ink: #d9cff8;
    --ng-code-line: rgba(185, 162, 255, .22);
  }
}

/* 公共站一律夜色（拍板 R1）：浅色系统 + 未显式选主题时也保持夜赛博 */
html:root[data-surface="public"]:not([data-theme]) {
  color-scheme: dark;
  --bg: #0a0915;
  --bg-2: #111020;
  --surface: #151327;
  --surface-2: #1d1933;
  --surface-3: #241f3d;
  --ink: #f1edfb;
  --ink-2: #d3cce8;
  --muted: #a49bc0;
  --line: rgba(198, 183, 255, .12);
  --line-2: rgba(198, 183, 255, .22);
  --line-3: rgba(198, 183, 255, .50);
  --mint: #8fd9be;
  --mint-2: #b4ead6;
  --mint-3: rgba(143, 217, 190, .14);
  /* 实心主操作底在夜色下用亮玉绿，配深字（对比 ≈ 10:1）；不用浅色底配白字 */
  --mint-strong: #8fd9be;
  --mint-strong-hover: #a5e4cc;
  --mint-strong-active: #7dcdb0;
  --mint-text: #a9e8d3;
  --mint-hover: #a5e4cc;
  --btn-ink: #08221b;
  --on-mint: #08221b;
  --on-accent: #08221b;
  --lime: #c6dd9b;
  --cyan: #7fcbe8;
  --cyan-text: #a5ddf1;
  --violet: #b9a2ff;
  --violet-2: #d4c7ff;
  --violet-3: rgba(185, 162, 255, .14);
  --violet-text: #cdbdff;
  --pink: #f4a6d7;
  --pink-2: #f9c9e4;
  --pink-3: rgba(244, 166, 215, .13);
  --pink-text: #f8c4e2;
  --amber: #f0c56b;
  --amber-text: #f7dca6;
  --red: #ff9b93;
  --red-text: #ffc4bf;
  --red-3: rgba(255, 155, 147, .14);
  --glow: rgba(143, 217, 190, .30);
  --glow-2: rgba(185, 162, 255, .28);
  --glow-3: rgba(244, 166, 215, .22);
  --grid-line: rgba(185, 162, 255, .08);
  --ambient-1: rgba(185, 162, 255, .20);
  --ambient-2: rgba(244, 166, 215, .15);
  --ambient-3: rgba(143, 217, 190, .12);
  --selection: rgba(244, 166, 215, .30);
  --brand-grad: linear-gradient(120deg, #8fd9be 0%, #b9a2ff 58%, #f4a6d7 100%);
  --accent-grad: linear-gradient(90deg, #8fd9be, #b9a2ff 55%, #f4a6d7);
  --shadow: 0 1px 0 rgba(198, 183, 255, .06), 0 18px 48px rgba(0, 0, 0, .48);
  --ng-card-bg: linear-gradient(150deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  --ng-card-bg-solid: #1d1933;
  --ng-code-bg: #04100e;
  --ng-code-ink: #a9e8d3;
  --ng-code-line: rgba(143, 217, 190, .16);
}

/* 1. 页壳 ---------------------------------------------------------------- */
.ng-wrap {
  width: 100%;
  max-width: var(--ng-wrap);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
}
.ng-section { padding-block: 0; margin-block: 0 var(--ng-section); }
.ng-section:last-child { margin-bottom: 0; }

.ng-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.ng-sec-head h2 { font-size: var(--ng-h2); letter-spacing: -.025em; color: var(--ink); }
.ng-sec-head p {
  font-family: var(--mono, ui-monospace);
  font-size: var(--ng-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* 2. Hero ---------------------------------------------------------------- */
.ng-hero { padding-block: clamp(28px, 4vw, 52px) 8px; }
.ng-hero-inner { display: grid; gap: 18px; max-width: 900px; }
.ng-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono, ui-monospace);
  font-size: var(--ng-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet-text);
}
.ng-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 9px var(--glow-3);
}
.ng-hero h1 {
  font-size: var(--ng-hero);
  line-height: 1.06;
  letter-spacing: -.045em;
  color: var(--ink);
  font-weight: 640;
}
.ng-hero h1 em {
  font-style: normal;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ng-hero .ng-lead {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 62ch;
}
.ng-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ng-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ng-stats span {
  display: block;
  font-family: var(--mono, ui-monospace);
  font-size: var(--ng-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ng-stats b {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* 3. 卡片网格 ------------------------------------------------------------ */
.ng-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ng-gap);
}
.ng-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ng-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ng-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 168px;
  padding: var(--ng-pad);
  border: 1px solid var(--line);
  border-radius: var(--ng-r);
  background: var(--ng-card-bg);
  color: var(--ink-2);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.ng-card:hover,
.ng-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--violet-2);
  box-shadow: 0 14px 34px var(--glow-2);
}
.ng-card .ng-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ng-card h3 { font-size: var(--ng-h3); color: var(--ink); letter-spacing: -.01em; }
.ng-card .ng-sub {
  font-family: var(--mono, ui-monospace);
  font-size: var(--ng-small);
  color: var(--muted);
}
.ng-card p { font-size: var(--ng-body); line-height: 1.65; color: var(--ink-2); flex: 1; }
.ng-card .ng-num {
  font-family: var(--mono, ui-monospace);
  font-size: 26px;
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1.1;
}
.ng-card .ng-num small {
  font-size: var(--ng-small);
  color: var(--muted);
  letter-spacing: 0;
  font-weight: 400;
}
.ng-card .ng-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-family: var(--mono, ui-monospace);
  font-size: var(--ng-mono);
  letter-spacing: .06em;
  color: var(--muted);
}
.ng-card.is-link:hover .ng-foot { color: var(--violet-text); }
.ng-panel { min-height: 0; }
.ng-panel > h2 { font-size: var(--ng-h3); color: var(--ink); margin-bottom: 6px; }
.ng-panel > p { flex: 0 0 auto; }
.ng-note { margin-top: 10px; font-size: var(--ng-small); line-height: 1.7; color: var(--muted); }
.ng-inline-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ng-status-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono, ui-monospace); font-size: var(--ng-mono);
  font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.ng-kpi { display: flex; flex-direction: column; gap: 6px; }
.ng-kpi .ng-kpi-label {
  font-family: var(--mono, ui-monospace); font-size: var(--ng-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.ng-kpi .ng-kpi-value {
  font-size: 24px; line-height: 1.2; letter-spacing: -.03em;
  color: var(--ink); font-weight: 600; word-break: break-all;
}
.ng-kpi .ng-kpi-value code { font-family: var(--mono, ui-monospace); font-size: 15px; }
.ng-copy-list { margin: 0; padding-left: 1.1em; display: grid; gap: 7px; font-size: var(--ng-body); line-height: 1.7; color: var(--ink-2); }
.ng-copy-list li::marker { color: var(--violet); }

/* 4. 表格 ---------------------------------------------------------------- */
.ng-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--ng-r-sm); }
.ng-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--ng-card-bg-solid);
}
.ng-table th {
  text-align: left;
  padding: 10px 12px;
  font-family: var(--mono, ui-monospace);
  font-size: var(--ng-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ng-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: top;
}
.ng-table tbody tr:last-child td { border-bottom: 0; }
.ng-table tbody tr { transition: background-color 160ms ease; }
.ng-table tbody tr:hover { background: var(--violet-3); }
.ng-table .ng-mono { font-family: var(--mono, ui-monospace); font-size: 12.5px; color: var(--ink); }

/* 5. 提示条 -------------------------------------------------------------- */
.ng-callout {
  position: relative;
  padding: 14px 16px 14px 18px;
  border: 1px solid rgba(185, 162, 255, .26);
  border-radius: var(--ng-r-sm);
  background: var(--violet-3);
  color: var(--ink-2);
  font-size: var(--ng-body);
  line-height: 1.7;
}
.ng-callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--violet);
}
.ng-callout b { color: var(--ink); }
.ng-callout.is-warn {
  border-color: rgba(240, 197, 107, .3);
  background: color-mix(in oklab, var(--amber) 12%, transparent);
}
.ng-callout.is-warn::before { background: var(--amber); }
.ng-callout.is-pink { border-color: rgba(244, 166, 215, .28); background: var(--pink-3); }
.ng-callout.is-pink::before { background: var(--pink); }

/* 6. 终端代码块 ---------------------------------------------------------- */
.ng-code {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--ng-code-line);
  border-radius: var(--ng-r-sm);
  background: var(--ng-code-bg);
  color: var(--ng-code-ink);
  font-family: var(--mono, ui-monospace);
  font-size: 12.5px;
  line-height: 1.75;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.ng-code code { font: inherit; color: inherit; background: none; padding: 0; }

/* 7. 状态行 -------------------------------------------------------------- */
.ng-status-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--ng-r-sm); overflow: hidden; }
.ng-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: var(--ng-body);
  background: var(--ng-card-bg-solid);
}
.ng-status:last-child { border-bottom: 0; }
.ng-status > span:first-child { color: var(--ink-2); }
.ng-status b {
  font-family: var(--mono, ui-monospace);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ng-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}
.ng-dot.ok, .ng-dot[data-kind="ok"] { background: var(--mint-2); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint) 16%, transparent); animation: djb-pulse 2s ease-in-out infinite; }
.ng-dot.wait { background: var(--amber); }
.ng-dot.fail { background: var(--red); }
.ng-dot.unknown { background: var(--muted); }
.ng-dot[data-kind="ok"] { background: var(--mint-2); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint) 16%, transparent); animation: djb-pulse 2s ease-in-out infinite; }
.ng-dot[data-kind="bad"] { background: var(--red); }
.ng-dot[data-kind="unknown"] { background: var(--muted); }
.ng-dot[data-kind="wait"] { background: var(--amber); }

/* 8. FAQ / details ------------------------------------------------------- */
.ng-faq { border: 1px solid var(--line); border-radius: var(--ng-r-sm); overflow: hidden; background: var(--ng-card-bg-solid); }
.ng-faq details { border-bottom: 1px solid var(--line); }
.ng-faq details:last-child { border-bottom: 0; }
.ng-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  font-size: var(--ng-body);
  color: var(--ink);
}
.ng-faq summary::-webkit-details-marker { display: none; }
.ng-faq summary::after {
  content: "▾";
  color: var(--violet);
  transition: transform 180ms ease;
  font-size: 12px;
}
.ng-faq details[open] summary::after { transform: rotate(180deg); }
.ng-faq p { padding: 0 15px 14px; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }

/* 9. 下载卡 -------------------------------------------------------------- */
.ng-dl {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--ng-pad);
  border: 1px solid var(--line);
  border-radius: var(--ng-r);
  background: var(--ng-card-bg);
  transition: border-color 180ms ease, transform 180ms ease;
}
.ng-dl:hover { border-color: var(--violet-2); transform: translateY(-2px); }
.ng-dl-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--violet-3);
  color: var(--violet-text);
  font-family: var(--mono, ui-monospace);
  font-size: var(--ng-mono);
  letter-spacing: .06em;
}
.ng-dl .ng-dl-body { flex: 1; min-width: 0; }
.ng-dl b { display: block; font-size: var(--ng-h3); color: var(--ink); }
.ng-dl span { display: block; margin-top: 3px; font-size: var(--ng-small); color: var(--muted); }

/* 10. 验证框 ------------------------------------------------------------- */
.ng-verify {
  max-width: 680px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--ng-r);
  background: var(--ng-card-bg);
}
.ng-verify .field { margin-top: 12px; }
.ng-verify label { color: var(--ink-2); font-size: var(--ng-small); font-weight: 600; }
.ng-verify .input {
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--line-3);
  border-radius: var(--ng-r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
}
.ng-verify .input:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.ng-result {
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(143, 217, 190, .3);
  border-radius: var(--ng-r-sm);
  background: var(--mint-3);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.7;
  animation: djb-reveal-up 420ms cubic-bezier(.22, .61, .36, 1) both;
}

/* 11. 两栏 --------------------------------------------------------------- */
.ng-two { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--ng-gap); align-items: start; }

/* 12. 动效与响应式 ------------------------------------------------------- */
.ng-reveal { animation: djb-reveal-up 520ms cubic-bezier(.22, .61, .36, 1) both; }
.ng-reveal-2 { animation-delay: 60ms; }
.ng-reveal-3 { animation-delay: 120ms; }
.ng-reveal-4 { animation-delay: 180ms; }
/* 网格内卡片入场：与 hero 同一曲线，按列错峰 60ms（M9 模块 reveal-up） */
.ng-grid > .ng-card,
.ng-grid > .ng-kpi,
.ng-grid > .ng-dl { animation: djb-reveal-up 520ms cubic-bezier(.22, .61, .36, 1) both; }
.ng-grid > :nth-child(1) { animation-delay: 40ms; }
.ng-grid > :nth-child(2) { animation-delay: 100ms; }
.ng-grid > :nth-child(3) { animation-delay: 160ms; }
.ng-grid > :nth-child(4) { animation-delay: 220ms; }
.ng-grid > :nth-child(5) { animation-delay: 280ms; }
.ng-grid > :nth-child(6) { animation-delay: 340ms; }
/* 内容块入场（长页的非网格区块）：与卡片同一曲线，稍晚 80ms */
.ng-section > .ng-card,
.ng-section > .ng-two,
.ng-section > .ng-verify,
.ng-section > .ng-table-wrap,
.ng-verify,
.ng-code,
.ng-callout,
.ng-faq { animation: djb-reveal-up 520ms cubic-bezier(.22, .61, .36, 1) both; animation-delay: 80ms; }

@media (max-width: 1000px) {
  .ng-grid, .ng-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ng-two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --ng-h1: 26px; --ng-section: 40px; --ng-pad: 15px; }
  .ng-grid, .ng-grid-2, .ng-grid-4 { grid-template-columns: 1fr; }
  .ng-hero h1 { font-size: 30px; }
  .ng-hero .ng-lead { font-size: 14px; }
  .ng-stats { gap: 18px; }
  .ng-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ng-card, .ng-dl { transition: none; }
  .ng-grid > .ng-card, .ng-grid > .ng-kpi, .ng-grid > .ng-dl,
  .ng-section > .ng-card, .ng-section > .ng-two, .ng-section > .ng-verify,
  .ng-section > .ng-table-wrap, .ng-verify, .ng-code, .ng-callout, .ng-faq { animation: none; }
  .ng-card:hover, .ng-card:focus-visible, .ng-dl:hover { transform: none; }
  .ng-reveal, .ng-result { animation: none; }
  .ng-dot.ok { animation: none; }
  .ng-faq summary::after { transition: none; }
}

/* 公共站顶栏：主题按钮在夜色下必须是玻璃胶囊，不能被 pages.css 的实心按钮规则涂白 */
body.portal.public .theme-toggle {
  background: rgba(255, 255, 255, .06);
  border-color: var(--line-2);
  color: var(--ink-2);
}
body.portal.public .theme-toggle:hover { background: rgba(255, 255, 255, .1); color: var(--ink); }

/* 模型卡里的状态：语义沿用 .pill pill-* 类（屏幕阅读器与既有断言都认这套），
   视觉上压成设计样的「点 + 短标签」胶囊，不与卡片主标题抢。 */
.ng-card .pill {
  font-size: 11px;
  line-height: 1.5;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-weight: 500;
  letter-spacing: 0;
}
.ng-card .pill-ok { color: var(--mint-text); border-color: color-mix(in oklab, var(--mint) 45%, transparent); }
.ng-card .pill-danger { color: var(--coral-text); border-color: color-mix(in oklab, var(--coral) 45%, transparent); }
.ng-card .pill.muted { color: var(--muted); }
.ng-status-inline { display: inline-flex; align-items: center; gap: 6px; }

/* 价格缺失：不当成大数字展示（那会被读成「价格是 0/免费」），降成一行灰字。 */
.ng-num.ng-missing {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

/* 窄屏顶栏：390 下「状态 · 中文 · 主题 · 控制台 · 退出」五个控件挤成一排，
   右侧按钮会被切掉边。这里只收紧，不隐藏任何功能入口。 */
@media (max-width: 640px) {
  .topbar-actions { gap: 6px; }
  .topbar-actions .theme-toggle { padding-inline: 8px; }
  .topbar-actions .theme-toggle .theme-label { display: none; }
  .topbar-actions .btn-sm { padding-inline: 9px; font-size: 12px; white-space: nowrap; }
  .topbar-actions .status-chip {
    max-width: 92px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-inline: 8px;
  }
  .topbar-actions .lang-switch { padding-inline: 6px; }
}

/* --------------------------------------------------------------------------
   英文公共站：单独视觉，不做中文顶栏的逐字镜像
   - 单行 6 个短标签（Models / Pricing / Run a node / Network / Docs / Proof）
   - 当前项用玉绿药丸，而不是中文版的下划线；英文正文更接近 SaaS 导航
   - 只作用于 data-locale="en"，中文顶栏零变化
   -------------------------------------------------------------------------- */
body.portal.public[data-locale="en"] .topbar-inner { gap: 12px; }
body.portal.public[data-locale="en"] .brand-text {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .005em;
}
body.portal.public[data-locale="en"] .brand-text small {
  margin-top: 1px;
  font-size: 9px;
  letter-spacing: .18em;
}
body.portal.public[data-locale="en"] .topbar-nav {
  justify-content: center;
  margin-inline: auto;
  gap: 2px;
}
body.portal.public[data-locale="en"] .topbar-nav .nav-group,
body.portal.public[data-locale="en"] .topbar-nav .nav-items {
  flex-wrap: nowrap;
  gap: 2px;
}
body.portal.public[data-locale="en"] .topbar-nav a {
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 12.5px;
  letter-spacing: .005em;
  white-space: nowrap;
}
body.portal.public[data-locale="en"] .topbar-nav a:hover {
  background: rgba(255, 255, 255, .055);
  color: var(--ink);
  border-bottom-color: transparent;
}
body.portal.public[data-locale="en"] .topbar-nav a[aria-current="page"] {
  background: var(--mint-3);
  background-image: none;
  border-bottom-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 30%, transparent);
  color: var(--mint-text);
  font-weight: 650;
}

/* 比中文版更早收掉主题文字，给 6 个英文标签留出单行空间（1024 仍是一行）。 */
@media (min-width: 821px) and (max-width: 1040px) {
  body.portal.public[data-locale="en"] .topbar-nav a { padding-inline: 7px; font-size: 12px; }
  body.portal.public[data-locale="en"] .theme-toggle .theme-label { display: none; }
}

/* 手机/平板窄屏：允许换行，但保持 44px 触控高度，不做横向滚动。 */
@media (max-width: 820px) {
  body.portal.public[data-locale="en"] .topbar-nav {
    justify-content: flex-start;
    margin-inline: 0;
  }
  body.portal.public[data-locale="en"] .topbar-nav .nav-group,
  body.portal.public[data-locale="en"] .topbar-nav .nav-items {
    flex-wrap: wrap;
  }
  body.portal.public[data-locale="en"] .topbar-nav a {
    min-height: var(--hit-mobile);
    padding-inline: 8px;
  }
}