/* ==========================================================================
   有解 AI · Base & Components  (base.css)
   依赖 tokens.css（必须先引入）。本文件只引用令牌，不出现裸色值。
   适用范围：屏幕（产品 UI / 预览）与 PDF 页面（配合 print.css）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding-left: 1.2em; }
ul.plain, ol.plain { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
a.link { color: var(--primary-strong); text-decoration: underline; text-decoration-color: var(--primary-line); text-underline-offset: .18em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; border-spacing: 0; }
hr { border: 0; height: 1px; background: var(--line); margin: 0; }
::selection { background: var(--primary-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; }

/* --------------------------------------------------------------------------
   1. Typography
   -------------------------------------------------------------------------- */
h1, .h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); font-weight: var(--fw-black); letter-spacing: var(--ls-display); text-wrap: balance; }
h2, .h2 { font-size: var(--fs-3xl); line-height: var(--lh-snug); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); text-wrap: balance; }
h3, .h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug); font-weight: var(--fw-black); letter-spacing: -.01em; }
h4, .h4 { font-size: var(--fs-xl); line-height: var(--lh-normal); font-weight: var(--fw-bold); }
h5, .h5 { font-size: var(--fs-lg); line-height: var(--lh-normal); font-weight: var(--fw-bold); }
p + p { margin-top: var(--space-3); }
small, .small { font-size: var(--fs-md); line-height: 1.6; }
.muted { color: var(--text-2); }
.lede { font-size: var(--fs-lg); line-height: var(--lh-loose); color: var(--text-2); font-weight: var(--fw-medium); text-wrap: pretty; }
.eyebrow { color: var(--primary-strong); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: var(--fw-black); letter-spacing: var(--ls-display); }
.mono, .num, code, kbd, samp { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.005em; }
code { padding: .08em .45em; border-radius: 6px; background: var(--code-bg); font-size: .9em; }
pre { margin: 0; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--code-bg); font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.7; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
pre code { padding: 0; background: none; font-size: inherit; }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--glass-border); background: var(--glass-strong); font-size: var(--fs-sm); color: var(--text-2); }
.text-gradient { background: linear-gradient(92deg, var(--text) 0%, var(--text) 35%, var(--primary) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .08em; }
.accent { color: var(--primary); font-style: normal; }  /* 标题里点亮的尾词；PDF 内渐变标题退化后靠它保留「文字→青」的收尾 */
.text-gradient-aurora { background: linear-gradient(120deg, var(--aurora-2), var(--aurora-1)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .08em; }
.wrap-any { overflow-wrap: anywhere; }
.tabular { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.center { text-align: center; }

/* 带勾选图标的列表 */
.list-check { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.list-check li { display: flex; align-items: flex-start; gap: var(--space-2); }
.list-check li .icon { color: var(--ok-text); margin-top: .28em; width: 1em; height: 1em; }
.list-check.primary li .icon { color: var(--primary-strong); }

/* --------------------------------------------------------------------------
   2. Icons（Lucide 风格 24 网格线性图标，内联 SVG；禁止 emoji）
   -------------------------------------------------------------------------- */
.icon { width: var(--icon-size); height: var(--icon-size); stroke: currentColor; fill: none; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; stroke-width: 1.5; }
.icon-box { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-strong); border: 1px solid var(--primary-line); flex: none; }
.icon-box.sm { width: 28px; height: 28px; border-radius: 8px; }
.icon-box.sm .icon { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   3. Brand（标志锁定：内联 <svg><use href="#logo-mark"> 或 <img src="logo.svg">）
   -------------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text); }
.brand .mark { width: 40px; height: 40px; flex: none; }
.brand .mark .cell { fill: var(--text-3); opacity: .55; }
.brand .mark .cell-hot { fill: var(--primary); opacity: 1; }
.brand .name { display: flex; flex-direction: column; line-height: 1.1; }
.brand .name b { font-size: var(--fs-lg); font-weight: var(--fw-black); letter-spacing: -.01em; }
.brand .name span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); letter-spacing: .12em; margin-top: 3px; }
.brand.sm .mark { width: 28px; height: 28px; }
.brand.sm .name b { font-size: var(--fs-base); }
.brand.sm .name span { font-size: 9px; }
.brand.lg .mark { width: 56px; height: 56px; }
.brand.lg .name b { font-size: var(--fs-2xl); }
.brand.lg .name span { font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   4. Glass 玻璃卡片（顶部高光线；屏幕上 backdrop-filter，print.css 内退化）
   -------------------------------------------------------------------------- */
.glass {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.glass::before {
  content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; pointer-events: none; opacity: .9;
  background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
}
.glass-strong { background: var(--glass-strong); }
.glass.hoverable:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.glass.pad { padding: var(--space-6); }
.glass.pad-sm { padding: var(--space-4); }
.glass.tint { background: linear-gradient(160deg, var(--primary-soft), transparent 55%), var(--glass); }
.glass.flat { box-shadow: none; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 44px; padding: 0 22px; border-radius: var(--radius-pill);
  font-weight: var(--fw-bold); font-size: 14px; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn:active { transform: translateY(0) scale(.99); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-primary { background: linear-gradient(135deg, var(--primary-strong), var(--primary-deep)); color: var(--on-primary); box-shadow: var(--shadow-primary); }
.btn-primary:hover { transform: translateY(-1px); filter: saturate(1.1) brightness(1.06); }
.btn-secondary { background: var(--glass-strong); border-color: var(--glass-border); color: var(--text); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.btn-secondary:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--primary-strong); }
.btn-ghost:hover { background: var(--primary-soft); }
.btn-danger { background: var(--danger-soft); border-color: var(--danger-text); color: var(--danger-text); }
.btn-danger:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; }
.btn-xs { height: 28px; padding: 0 12px; font-size: 12px; gap: 6px; }
.btn .icon { width: 16px; height: 16px; }
.btn-group { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------------
   6. Badges / Chips / Tags
   -------------------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); border: 1px solid transparent; white-space: nowrap; line-height: 1; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-ok { background: var(--ok-soft); color: var(--ok-text); }
.badge-warn { background: var(--warn-soft); color: var(--warn-text); }
.badge-danger { background: var(--danger-soft); color: var(--danger-text); }
.badge-info { background: var(--info-soft); color: var(--info-text); }
.badge-neutral { background: var(--surface-2); color: var(--text-2); border-color: var(--glass-border); }
.badge.no-dot::before { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--glass-strong); border: 1px solid var(--glass-border); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); white-space: nowrap; line-height: 1; transition: border-color var(--dur) var(--ease); }
.chip:hover { border-color: var(--line-strong); }
.chip .num { color: var(--primary-strong); font-size: var(--fs-sm); }
.chip .icon { width: 14px; height: 14px; }
.chip.active { background: var(--primary-soft); border-color: var(--primary-line); }
.chip-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.tag-idx { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--primary-soft); border: 1px solid var(--primary-line); color: var(--primary-strong); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); flex: none; }

/* 章节标签：<div class="sec-tag"><span class="idx">01</span>章节名<span class="dot"></span>EN LABEL</div> */
.sec-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-2); }
.sec-tag .idx { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--primary-soft); border: 1px solid var(--primary-line); color: var(--primary-strong); font-size: var(--fs-sm); letter-spacing: 0; }
.sec-tag .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }

/* --------------------------------------------------------------------------
   7. KPI（大数字 青→靛蓝 渐变；数字等宽）
   -------------------------------------------------------------------------- */
.kpi { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; }
.kpi .big { font-family: var(--font-mono); font-size: var(--fs-4xl); line-height: 1; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: linear-gradient(120deg, var(--aurora-2), var(--aurora-1)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: 4px; }
.kpi .big sup, .kpi .big .unit { font-size: .5em; vertical-align: top; letter-spacing: 0; }
.kpi .cap { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text); line-height: var(--lh-normal); }
.kpi .sub { font-size: var(--fs-md); color: var(--text-2); line-height: 1.5; }
.kpi .tick { height: 1px; width: 40px; background: var(--primary); opacity: .8; margin-top: auto; }
.kpi.compact { padding: var(--space-4); gap: var(--space-1); }
.kpi.compact .big { font-size: var(--fs-3xl); }
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.kpi-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   8. 对比表 table.cmp（.hi 高亮列）
   -------------------------------------------------------------------------- */
.cmp-wrap { padding: var(--space-2); border-radius: var(--radius-md); }
table.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
table.cmp th, table.cmp td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
table.cmp thead th { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); font-weight: var(--fw-semibold); padding-top: 10px; padding-bottom: 10px; }
table.cmp tbody th { font-weight: var(--fw-black); color: var(--text); width: 16%; }
table.cmp td { color: var(--text-2); font-weight: var(--fw-medium); line-height: 1.55; }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-bottom: 0; }
table.cmp .hi { background: var(--primary-soft); color: var(--text); font-weight: var(--fw-bold); }
table.cmp thead .hi { color: var(--primary-strong); border-radius: 12px 12px 0 0; }
table.cmp tbody tr:last-child .hi { border-radius: 0 0 12px 12px; }
table.cmp .hi .icon { width: 15px; height: 15px; color: var(--primary-strong); display: inline-block; vertical-align: -3px; margin-right: 6px; }
table.cmp tbody tr:hover td:not(.hi), table.cmp tbody tr:hover th { background: var(--surface-2); }

/* 通用数据表 table.data（产品 UI / 案例数据） */
table.data { width: 100%; font-size: var(--fs-md); }
table.data th { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); font-weight: var(--fw-semibold); text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--text); font-weight: var(--fw-medium); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data .r, table.data th.r { text-align: right; }
table.data td.num, table.data td.mono { color: var(--text-2); font-size: var(--fs-sm); }
table.data.striped tbody tr:nth-child(even) { background: var(--surface-2); }

/* --------------------------------------------------------------------------
   9. Callout（信息 / 注意 / 成功 / 危险）与引文
   -------------------------------------------------------------------------- */
.callout { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); border: 1px solid var(--primary-line); background: var(--primary-soft); color: var(--text); font-size: var(--fs-md); line-height: 1.65; overflow: hidden; }
.callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
.callout .icon { color: var(--primary-strong); margin-top: .15em; }
.callout b, .callout strong { color: var(--text); font-weight: var(--fw-bold); }
.callout .title { display: block; font-weight: var(--fw-bold); margin-bottom: 2px; }
.callout-warn { border-color: var(--warn-text); background: var(--warn-soft); }
.callout-warn::before { background: var(--warn); }
.callout-warn .icon { color: var(--warn-text); }
.callout-ok { border-color: var(--ok-text); background: var(--ok-soft); }
.callout-ok::before { background: var(--ok); }
.callout-ok .icon { color: var(--ok-text); }
.callout-danger { border-color: var(--danger-text); background: var(--danger-soft); }
.callout-danger::before { background: var(--danger); }
.callout-danger .icon { color: var(--danger-text); }

.quote { position: relative; padding: var(--space-5) var(--space-6) var(--space-5) calc(var(--space-6) + 18px); font-size: var(--fs-lg); line-height: var(--lh-loose); font-weight: var(--fw-bold); letter-spacing: -.005em; color: var(--text); }
.quote::before { content: "“"; position: absolute; left: var(--space-4); top: var(--space-3); font-size: 2.6em; line-height: 1; color: var(--primary); font-family: var(--font-sans); }
.quote cite { display: block; margin-top: var(--space-3); font-style: normal; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-2); }
.quote cite::before { content: "— "; }

/* --------------------------------------------------------------------------
   10. Steps 三步流程（诊断 → 部署 → 陪跑）与 Timeline
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); position: relative; list-style: none; padding: 0; margin: 0; }
.steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: calc(var(--space-6) + 16px); height: 1px; background: linear-gradient(90deg, var(--primary), var(--aurora-1)); opacity: .55; }
.steps.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); position: relative; }
.step .node { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--primary-line); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--primary-strong); box-shadow: 0 0 0 6px var(--primary-soft); position: relative; z-index: 1; }
.step h4 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xl); font-weight: var(--fw-black); letter-spacing: -.01em; }
.step h4 .icon { color: var(--primary-strong); }
.step p { font-size: var(--fs-md); line-height: 1.7; color: var(--text-2); }
.step .arrow { position: absolute; right: -15px; top: calc(var(--space-6) + 9px); width: 14px; height: 14px; color: var(--primary); z-index: 1; }
.step:last-child .arrow { display: none; }

.timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 1px; background: var(--line-strong); }
.timeline li { position: relative; padding: 0 0 var(--space-5) 36px; display: flex; flex-direction: column; gap: 4px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 6px; top: .45em; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.timeline li.muted::before { border-color: var(--text-3); box-shadow: none; }
.timeline .when { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--primary-strong); letter-spacing: .06em; }
.timeline .what { font-weight: var(--fw-bold); color: var(--text); font-size: var(--fs-base); line-height: var(--lh-normal); }
.timeline .desc { font-size: var(--fs-md); color: var(--text-2); line-height: 1.6; }

/* --------------------------------------------------------------------------
   11. 架构图基元 .arch（节点 / 箭头 / 横条）
   -------------------------------------------------------------------------- */
.arch { display: flex; flex-direction: column; }
.arch-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.arch-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.arch-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.arch-row.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.arch-row.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.arch-node { padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; min-height: 64px; justify-content: center; }
.arch-node b { font-size: var(--fs-base); font-weight: var(--fw-black); line-height: var(--lh-normal); }
.arch-node span { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2); }
.arch-node .icon { color: var(--primary-strong); margin-bottom: 4px; }
.arch-node.model { align-items: center; text-align: center; padding: 12px 8px; }
.arch-node.model b { font-size: var(--fs-md); }
.arch-arrow { height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.arch-arrow .stem { width: 1px; flex: 1; background: linear-gradient(180deg, var(--line-strong), var(--primary)); }
.arch-arrow .head { width: 14px; height: 14px; color: var(--primary); margin-top: -6px; }
.arch-arrow .tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--glass-strong); border: 1px solid var(--glass-border); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); white-space: nowrap; }
.arch-arrow .tag .icon { width: 13px; height: 13px; color: var(--primary-strong); }
.arch-arrow.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.arch-arrow.tri .lane { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.arch-arrow.tri .lane .stem { width: 1px; flex: 1; background: linear-gradient(180deg, var(--line-strong), var(--primary)); }
.arch-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: 16px 22px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--primary-soft), transparent 60%), var(--glass-strong); border: 1px solid var(--primary-line); box-shadow: var(--shadow-primary); position: relative; }
.arch-bar::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent); }
.arch-bar .l { display: flex; align-items: center; gap: 12px; }
.arch-bar .l .icon { width: 22px; height: 22px; color: var(--primary-strong); }
.arch-bar b { font-size: var(--fs-lg); font-weight: var(--fw-black); line-height: 1.2; }
.arch-bar b small { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .12em; color: var(--text-2); font-weight: 500; margin-top: 3px; }
.arch-bar .caps { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.arch-bar .caps span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--glass-border); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); }
.arch-label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-2); margin-bottom: var(--space-2); }

/* --------------------------------------------------------------------------
   12. 产品窗口 Mock .window（顶栏圆点 / 侧栏 / 主区）—— 演示产品 UI 默认暗色
   -------------------------------------------------------------------------- */
.window { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--bg); border: 1px solid var(--glass-border); color: var(--text); font-size: 13px; line-height: 1.5; }
.window::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent); z-index: 2; pointer-events: none; }
.win-bar { height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.win-bar .dots { display: flex; gap: 7px; }
.win-bar .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; opacity: .9; }
.win-bar .dots i:nth-child(1) { background: var(--danger); }
.win-bar .dots i:nth-child(2) { background: var(--warn); }
.win-bar .dots i:nth-child(3) { background: var(--ok); }
.win-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.win-title .crumb { color: var(--text-2); }
.win-title .icon { width: 14px; height: 14px; color: var(--text-2); }
.win-bar .spacer { flex: 1; }
.win-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 320px; }
.win-body.three { grid-template-columns: 200px minmax(0, 1fr) 220px; }
.win-side { padding: 14px 10px; border-right: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; gap: 16px; }
.win-right { padding: 14px 10px; border-left: 1px solid var(--line); background: var(--bg-2); }
.win-main { display: flex; flex-direction: column; min-width: 0; padding: 16px; gap: 14px; }
.side-h { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); padding: 0 8px; margin-bottom: 6px; }
.side-h .icon { width: 13px; height: 13px; }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-list li { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--text-2); border: 1px solid transparent; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.side-list li .icon { width: 14px; height: 14px; }
.side-list li:hover { background: var(--surface-2); color: var(--text); }
.side-list li.active { background: var(--primary-soft); color: var(--text); border-color: var(--primary-line); }
.side-list li.active .icon { color: var(--primary); }
.side-list li .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-list li .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); }
.model-pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: var(--radius-pill); background: var(--primary-soft); border: 1px solid var(--primary-line); color: var(--text); font-size: 11.5px; font-weight: var(--fw-bold); }
.model-pill .icon { width: 13px; height: 13px; color: var(--primary); }
.model-pill .mode { color: var(--text-2); font-weight: var(--fw-semibold); }

/* 对话气泡 / 工具调用 / 审批卡（工作台 UI 基元） */
.msg-user { align-self: flex-end; max-width: 72%; padding: 10px 14px; border-radius: 14px 14px 5px 14px; background: linear-gradient(135deg, var(--primary-soft), transparent), var(--glass-strong); border: 1px solid var(--primary-line); font-size: 13px; line-height: 1.6; color: var(--text); }
.msg-ai { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.avatar { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary-strong), var(--primary-deep)); box-shadow: var(--shadow-primary); }
.avatar svg { width: 16px; height: 16px; }
.avatar .cell { fill: var(--on-primary); opacity: .45; }
.avatar .cell-hot { fill: var(--on-primary); opacity: 1; }
.msg-ai .body { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.65; color: var(--text); }
.msg-ai .who { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-2); }
.msg-ai .who b { color: var(--text); font-weight: var(--fw-black); }
.tool { border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; }
.tool .sum { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); }
.tool .sum .icon { width: 13px; height: 13px; color: var(--primary); }
.tool .sum .verb, .tool .sum .cmd { color: var(--text); }
.tool .sum .ok { color: var(--ok-text); }
.tool pre { border-radius: 0; border-top: 1px solid var(--line); font-size: 11px; padding: 10px 12px; color: var(--text-2); }
.tool pre b { color: var(--ok-text); font-weight: 600; }
.approval { position: relative; border-radius: 12px; border: 1px solid var(--warn-text); background: linear-gradient(180deg, var(--warn-soft), transparent 40%), var(--glass-strong); padding: 14px 16px; overflow: hidden; }
.approval::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warn); }
.approval .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.approval .top h4 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--fw-black); color: var(--text); line-height: 1.3; }
.approval .top h4 .icon { color: var(--warn-text); width: 15px; height: 15px; }
.approval .countdown { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--warn-text); height: 24px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--warn-soft); border: 1px solid var(--warn-text); white-space: nowrap; }
.approval .countdown .icon { width: 12px; height: 12px; }
.approval .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; padding: 10px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0; }
.approval .fields div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.approval .fields dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); font-family: var(--font-mono); }
.approval .fields dd { margin: 0; font-size: 12px; color: var(--text); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval .fields dd code { font-size: 11.5px; color: var(--danger-text); }
.approval .fields dd.path code { color: var(--text); }
.approval .actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.approval .actions .hint { margin-right: auto; font-size: 11px; color: var(--text-2); }

/* 网关控制台基元：指标卡 / 表格卡 */
.metric { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 5px; }
.metric .lbl { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-2); font-weight: var(--fw-bold); }
.metric .lbl .icon { width: 14px; height: 14px; }
.metric .val { font-family: var(--font-mono); font-size: 24px; font-weight: 600; letter-spacing: -.03em; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.metric .delta { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.metric .delta.up { color: var(--ok-text); }
.metric .delta.warn { color: var(--warn-text); }
.metric svg.spark { width: 100%; height: 32px; margin-top: 4px; overflow: visible; }
.metric svg.spark .ln { fill: none; stroke: var(--chart-1); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.metric svg.spark .ln.s2 { stroke: var(--chart-2); }
.metric svg.spark .ln.ok { stroke: var(--ok); }
.metric svg.spark .ln.warn { stroke: var(--warn); }
.metric svg.spark .pt { fill: var(--bg); stroke: var(--chart-1); stroke-width: 1.75; }
.table-card { overflow: hidden; }
.table-card .th { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.table-card .th h4 { font-size: 13px; font-weight: var(--fw-black); display: flex; align-items: center; gap: 9px; }
.table-card .th h4 .live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.table-card .th .tools { display: flex; gap: 6px; }

/* 空态 */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); text-align: center; color: var(--text-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
.empty .icon { width: 28px; height: 28px; color: var(--text-3); stroke-width: 1.5; }
.empty b { color: var(--text); font-weight: var(--fw-bold); }
.empty p { font-size: var(--fs-md); max-width: 36em; }

/* 输入框 / 开关（产品 UI） */
.input { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--glass-border); color: var(--text); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.input:hover { border-color: var(--line-strong); }
.input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font: inherit; color: var(--text); }
.input input::placeholder { color: var(--text-2); opacity: 1; }
.input .icon { color: var(--text-2); width: 16px; height: 16px; }
.switch { position: relative; display: inline-block; width: 40px; height: 24px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--track); border: 1px solid var(--glass-border); transition: background-color var(--dur) var(--ease); }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--on-primary); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease); }
.switch input:checked + .track { background: linear-gradient(135deg, var(--primary-strong), var(--primary-deep)); border-color: transparent; }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--primary); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   13. Layout helpers
   -------------------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.grid-2.tight, .grid-3.tight, .grid-4.tight { gap: var(--space-4); }
.grid-2.wide-left { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.grid-2.wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack.tight { gap: var(--space-2); }
.stack.loose { gap: var(--space-6); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.spacer { flex: 1; }
.divider-hairline { height: 1px; background: var(--line); border: 0; margin: var(--space-4) 0; }
.divider-hairline.strong { background: var(--line-strong); }
.divider-hairline.gradient { background: linear-gradient(90deg, var(--primary), var(--aurora-1), transparent); opacity: .7; }

/* --------------------------------------------------------------------------
   14. Orb 光斑（每页 ≤ 2 个；屏幕用 blur，print.css 内改为径向渐变）
   -------------------------------------------------------------------------- */
.orb { position: absolute; border-radius: 50%; pointer-events: none; opacity: var(--orb-opacity); filter: blur(var(--orb-blur)); will-change: transform; }
.orb-1, .orb-violet { background: radial-gradient(circle closest-side, var(--orb-1) 0%, transparent 100%); }
.orb-2, .orb-cyan { background: radial-gradient(circle closest-side, var(--orb-2) 0%, transparent 100%); }
.orb-3, .orb-teal { background: radial-gradient(circle closest-side, var(--orb-3) 0%, transparent 100%); }
.orb.dim { opacity: calc(var(--orb-opacity) * .55); }
@keyframes yj-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(24px, -18px, 0); } }
.orb-anim { animation: yj-drift 18s ease-in-out infinite; }
.has-orbs { position: relative; overflow: hidden; }
.has-orbs > :not(.orb) { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   15. 文档基元：脚注 / 目录 / 图与图注
   -------------------------------------------------------------------------- */
.footnote { display: flex; align-items: flex-start; gap: 8px; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.footnote .icon { color: var(--primary-strong); width: 14px; height: 14px; margin-top: .2em; }
.footnote .fn { font-family: var(--font-mono); color: var(--primary-strong); }
sup.fn { font-family: var(--font-mono); font-size: .7em; color: var(--primary-strong); vertical-align: super; line-height: 0; }

.toc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.toc li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-base); }
.toc li.chapter { font-weight: var(--fw-black); font-size: var(--fs-lg); padding-top: var(--space-5); border-bottom-color: var(--line-strong); }
.toc li.chapter:first-child { padding-top: 0; }
.toc li.sub { font-weight: var(--fw-medium); color: var(--text-2); padding-left: 36px; grid-template-columns: minmax(0, 1fr) auto; }
.toc .no { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--primary-strong); width: 24px; letter-spacing: .04em; }
.toc .t { position: relative; overflow: hidden; }
.toc .t::after { content: ""; position: absolute; bottom: .3em; margin-left: 8px; width: 100%; border-bottom: 1px dotted var(--line-strong); }
.toc .pg { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--text-2); font-variant-numeric: tabular-nums; }
.toc li.chapter .pg { color: var(--text); }

.figure { display: flex; flex-direction: column; gap: var(--space-2); }
.figure .fig-body { border-radius: var(--radius-md); overflow: hidden; }
.figure .caption, .caption { display: flex; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; }
.caption .fig-no { font-family: var(--font-mono); color: var(--primary-strong); white-space: nowrap; }

/* --------------------------------------------------------------------------
   16. 图表基元（详见 charts.md；内联 SVG，颜色只用令牌）
   -------------------------------------------------------------------------- */
.chart { width: 100%; height: auto; overflow: visible; font-family: var(--font-mono); font-size: var(--fs-xs); }
.chart .grid line { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis text, .chart .label { fill: var(--chart-axis); font-family: var(--font-mono); font-size: var(--fs-xs); }
.chart .value { fill: var(--text); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; }
.chart .s1 { fill: var(--chart-1); stroke: var(--chart-1); }
.chart .s2 { fill: var(--chart-2); stroke: var(--chart-2); }
.chart .s3 { fill: var(--chart-3); stroke: var(--chart-3); }
.chart .s4 { fill: var(--chart-4); stroke: var(--chart-4); }
.chart .s5 { fill: var(--chart-5); stroke: var(--chart-5); }
.chart .muted { fill: var(--chart-muted); stroke: var(--chart-muted); }
.chart .line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .line.dashed { stroke-dasharray: 4 4; }
.chart .area { opacity: .12; stroke: none; }
.chart .dot { stroke: var(--bg); stroke-width: 2; }
.chart .track { fill: none; stroke: var(--track); }
.chart .bar { rx: 3; stroke: none; }
.legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend .s1 { background: var(--chart-1); } .legend .s2 { background: var(--chart-2); } .legend .s3 { background: var(--chart-3); } .legend .s4 { background: var(--chart-4); } .legend .s5 { background: var(--chart-5); } .legend .muted { background: var(--chart-muted); }
.legend i.dashed { background: none; border-top: 2px dashed var(--chart-muted); height: 0; border-radius: 0; }

/* 纯 CSS 条形（对比 / 进度） */
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px; align-items: center; gap: 10px; font-size: var(--fs-md); }
.bar-row .lbl { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .track { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 4px; background: var(--chart-1); }
.bar-row .fill.s2 { background: var(--chart-2); } .bar-row .fill.s3 { background: var(--chart-3); } .bar-row .fill.s4 { background: var(--chart-4); } .bar-row .fill.muted { background: var(--chart-muted); }
.bar-row .fill.gradient { background: linear-gradient(90deg, var(--aurora-2), var(--aurora-1)); }
.bar-row .val { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   17. Motion / a11y
   -------------------------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; scroll-behavior: auto !important; }
}