/* kit.css —— 第六步（H10 ③）新增的交互件样式。既有 8 个 css 有 sha256 红线，一个字节不动，新样式只进这里与 account.css。 */

/* 手风琴：长段说明收起来，点开才展开 */
.acc { border: 1px solid var(--line); border-radius: var(--r-12); overflow: hidden; }
.acc-i { border-bottom: 1px solid var(--line-2); }
.acc-i:last-child { border-bottom: 0; }
.acc-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; font-size: var(--fs); text-align: left; background: none; border: 0; cursor: pointer; transition: background var(--t); }
.acc-h:hover { background: var(--bg-2); }
.acc-h .acc-t { flex: 1; }
.acc-h .acc-car { color: var(--ink-24); transition: transform var(--t); font-size: 15px; line-height: 1; }
.acc-i.is-open .acc-car { transform: rotate(90deg); }
.acc-b { padding: 0 16px 16px 42px; font-size: var(--fs); line-height: 22px; color: var(--ink-60); }
.acc-b.is-flush { padding-left: 16px; }

/* 步进器：一条流程按步点，点哪步看哪步 */
.stepper { display: flex; border: 1px solid var(--line); border-radius: var(--r-12); overflow: hidden; }
.stepper > button { flex: 1; min-width: 0; padding: 14px 12px; border: 0; border-right: 1px solid var(--line-2); background: none; text-align: left; cursor: pointer; transition: background var(--t); }
.stepper > button:last-child { border-right: 0; }
.stepper > button:hover { background: var(--bg-2); }
.stepper > button.is-on { background: var(--brand-bg); }
.stepper .st-n { width: 20px; height: 20px; border-radius: var(--r-6, 6px); background: var(--ink-06); color: var(--ink-60); font-size: 11.5px; display: grid; place-items: center; margin-bottom: 6px; }
.stepper > button.is-on .st-n { background: var(--brand); color: #fff; }
.stepper .st-l { font-size: var(--fs-12); line-height: 18px; color: var(--ink-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper > button.is-on .st-l { color: var(--ink); font-weight: 600; }

/* 可勾清单：自查项点一下打勾，带进度 */
.chklist { border: 1px solid var(--line); border-radius: var(--r-12); overflow: hidden; }
.chk { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line-2); background: none; text-align: left; cursor: pointer; transition: background var(--t); }
.chk:last-child { border-bottom: 0; }
.chk:hover { background: var(--bg-2); }
.chk .chk-b { width: 18px; height: 18px; border: 1.5px solid var(--ink-24); border-radius: 5px; flex: none; display: grid; place-items: center; color: transparent; font-size: 11px; }
.chk.is-done .chk-b { background: var(--green); border-color: var(--green); color: #fff; }
.chk.is-done .chk-t { color: var(--ink-40); text-decoration: line-through; }
.chk .chk-t { font-weight: 600; font-size: var(--fs); width: 170px; flex: none; }
.chk .chk-d { font-size: var(--fs-12); color: var(--ink-60); line-height: 1.5; }
/* 说明文字换行时，勾选框与标题要跟**第一行**对齐，而不是跟两行的中点对齐 ——
   原来 .chk 是 align-items:center，一行长一行短的两项看着就没对齐。 */
.chk .chk-b, .chk .chk-t { margin-top: 1px; }
.chk .chk-t { line-height: 1.5; }

/* 页头一行：标题 + 右侧动作 */
.hd-row { display: flex; align-items: center; gap: 12px; }
.hd-row .hd-sp { flex: 1; }

/* 选择卡：两个方案并排，选中一张，对比表跟着高亮 */
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

td.is-picked, th.is-picked { background: var(--brand-bg); font-weight: 600; }

/* 工具详情「返回」页签：逐行列，不再把 markdown 片段塞进代码块（M4） */
.tl-returns { margin: 0; padding: 0 0 0 18px; font-size: var(--fs); line-height: 24px; color: var(--ink-80); }
.tl-returns li { margin: 2px 0; }

/* 品牌标识（H27）：顶栏与登录页原来是 CSS 画的方块 + 一个字母 C。
   规则本该写在 shell.css / account.css，但 shell.css 是 8 个受 sha256 基线保护的文件之一，
   所以统一放这里，两处一起管。 */
.topbar-logo .logo-img { display: block; width: 36px; height: 24px; object-fit: contain; }
.lg-brand .lg-img { display: block; width: 48px; height: 32px; object-fit: contain; }
/* logo 是透明底的深色线稿：暗色模式下线条会糊进背景，提一点亮度让它浮起来 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar-logo .logo-img,
  :root:not([data-theme="light"]) .lg-brand .lg-img { filter: brightness(1.35); }
}
:root[data-theme="dark"] .topbar-logo .logo-img,
:root[data-theme="dark"] .lg-brand .lg-img { filter: brightness(1.35); }

/* 账号下拉里「管理后台」那条：和上面三条不是一个层级，给一条分隔线（H37 ②）。
   `.env-pop` 是 shell.css 里的，受 sha256 基线保护，所以补写在这里。 */
.env-pop button.is-sep { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }

/* 时序图（流程与句柄页）：泳道 + 消息箭头 + 备注条，纯 SVG，不引库 */
.seq { border: 1px solid var(--line); border-radius: var(--r-12); background: var(--bg); overflow-x: auto; }
.seq svg { display: block; }

.seq .lane-h { font-size: 12px; font-weight: 600; fill: var(--ink); }

.seq .msg { font-size: 11.5px; fill: var(--ink-80); }
.seq .msg.ret { fill: var(--ink-60); }
.seq .arrow { stroke: rgba(20, 21, 28, .55); stroke-width: 1.2; fill: none; }
.seq .arrow.ret { stroke-dasharray: 4 3; }
.seq .note-b { fill: var(--bg-2); stroke: var(--line); }
.seq .note-t { font-size: 11px; fill: var(--ink-60); }

/* 节点链：一条流程的节点横排；可选虚框、hub 代劳蓝、不可逆红 */
.chain { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.bp { border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--r-12); padding: 14px 16px; background: var(--bg); }

/* 出参分组表（工具详情「返回」页签）与枚举表 */
.ret-g { margin-bottom: 14px; }
.ret-g:last-child { margin-bottom: 0; }
.ret-g-t { font-family: var(--mono); font-size: var(--fs-12); color: var(--ink-60); margin-bottom: 6px; }
.ret-g-t b { color: var(--ink); }

.tbl .md p { margin: 0; }
.tbl .md p + p { margin-top: 4px; }

/* 视图切换（灰底滑块）：与筛选胶囊（描边）分开 —— 一个换表、一个筛表，长得一样就分不出（H35）。
   规则本该在 console-a.css，那是 8 个受 sha256 基线保护的文件之一，所以放这里。 */
.sw { display: inline-flex; align-items: center; height: 36px; padding: 3px; gap: 2px;
      border-radius: var(--r-pill); background: var(--bg-3); }
.sw button { height: 30px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none;
             color: var(--ink-60); font-size: var(--fs); font-weight: 500; cursor: pointer; display: inline-flex;
             align-items: center; gap: 6px; transition: background var(--t), color var(--t); }
.sw button.is-on { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-seg); }
.sw .count { background: var(--ink-06); color: var(--ink-60); }
.sw button.is-on .count { background: var(--ink); color: #fff; }

/* ═════════ H36 · 后台版面（`.cs` = console surface）═════════
   用户原话：「管理后台全部页面内容排布太密集，并且不美观」。逐条查下来，密集不是错觉，
   是三处叠加出来的，而且都落在**基线那 8 个受 sha256 保护的 css 里改不动**，所以统一在这里覆盖：

     ① `.tbl td` 是 `padding: 0 16px` + `height: 54px` —— **上下零内边距**。单行内容时 54px 撑着还好，
        一旦某个格子折成三行（回调白名单那种长 URL、多标签的 caps），三行就从格子上边顶到下边，
        行与行之间没有一丝喘息。密集的主因是这个，不是字号。
     ② 行分隔线是 `--line-2`，和折行内容的行距混在一起，扫下去分不出「这是下一行」还是「上一行的第二句」。
     ③ 各页 section 之间只有 16–24px，而表格本身已经很重，重物之间没有间距就糊成一片。

   本节只改后台两区（`#/console/*`、`#/account/*`）。对外页不动 —— 那边是卡片流，没有这个问题。 */

/* ① 表格：给上下内边距、放开固定行高、内容顶部对齐（折行时第一行与其他列对齐，不是三行的中点） */
.cs .tbl td { padding: 15px 18px; height: auto; line-height: 1.6; vertical-align: top; }
.cs .tbl th { height: 42px; padding: 0 18px; }
.cs .tbl tbody tr:hover td { background: var(--ink-04); }
/* ② 行分隔线加重一档，折行内容才切得开 */
.cs .tbl td { border-bottom-color: var(--line); }
.cs .tbl tbody tr:last-child td { border-bottom: 0; }

.cs .tbl .row.gap-4.wrap { gap: 6px; }

/* ③ 版面节奏：页头与正文之间、重物与重物之间 */
.cs.page { padding-top: 36px; }
.cs .page-hd { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line-2); align-items: flex-start; }
.cs .page-sub { margin-top: 6px; line-height: 22px; max-width: 760px; }
.cs .section-title { font-size: var(--fs-16); letter-spacing: .01em; }
.cs .panel { padding: 24px 26px; }
.cs .mt-32 { margin-top: 40px; }
.cs .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 表格上方的一句话（筛选说明 / 前置条件）：靠着表格顶太近就像表头的一部分 */
.cs .tbl-wrap { margin-top: 2px; }

/* ═════════ H39 · 顶栏只放搜索，导航只有侧栏一套 ═════════
   上一版顶栏是四个阶段 tab。代价是多了一层状态：页内跳转会把顶栏与侧栏一起带走
   （实测：在「选哪条路」页点页内的「MCP 接口集」，顶栏跳回「能力」、侧栏高亮到「任务接口」，
   正文却还是「选哪条路」）。一套导航就不会打架，顶栏腾出来的位置给搜索。 */

/* 全局搜索：一个框搜接口 / 错误码 / 句柄 / 页面 */
.gs { position: relative; width: 268px; }
.gs-in { width: 100%; height: 34px; padding: 0 36px 0 32px; border: 1px solid var(--line); border-radius: var(--r-pill);
         background: var(--bg-2); font-size: 13px; color: var(--ink); outline: none; transition: border-color var(--t), background var(--t); }
.gs-in:focus { border-color: var(--brand); background: var(--bg); }
.gs-ic { position: absolute; left: 11px; top: 8px; color: var(--ink-40); font-size: 14px; pointer-events: none; }
.gs-k { position: absolute; right: 9px; top: 8px; font-size: 10.5px; color: var(--ink-40); background: var(--bg-3); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); }
.gs-pop { position: absolute; top: 40px; right: 0; width: 460px; max-height: min(66vh, 520px); overflow: auto; z-index: 40;
          background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-12); box-shadow: var(--shadow-pop); padding: 6px; }
.gs-g { font-size: 11px; color: var(--ink-40); padding: 8px 10px 4px; font-weight: 600; letter-spacing: .04em; }
.gs-i { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-8);
        background: none; text-align: left; cursor: pointer; }
.gs-i:hover, .gs-i.is-cur { background: var(--brand-bg); }
.gs-i code { font-size: 12.5px; font-weight: 600; color: var(--ink); flex: none; }
.gs-i span { font-size: 12px; color: var(--ink-60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-none { padding: 24px; text-align: center; color: var(--ink-40); font-size: 13px; }
@media (max-width: 1100px) { .gs { width: 190px; } .gs-pop { width: 360px; } }

/* 调试台三栏（H38）：左接口列表 / 中参数表单 / 右请求与响应。抄阿里云 OpenAPI Explorer 实测布局。 */
.dbg { display: grid; grid-template-columns: 216px minmax(0, 1fr) minmax(0, 1fr);
       border: 1px solid var(--line); border-radius: var(--r-12); overflow: hidden; background: var(--bg);
       height: calc(100vh - var(--topbar-h) - 232px); min-height: 440px; }

.fld { margin-bottom: 14px; }
.fld label { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; margin-bottom: 5px; }

.fld .fld-t { color: var(--ink-40); font-size: 11.5px; }
.fld input, .fld select, .fld textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--line);
       border-radius: var(--r-6, 6px); font-size: 12.5px; font-family: var(--mono); outline: none; background: var(--bg); color: var(--ink); }
.fld input:focus, .fld textarea:focus { border-color: var(--brand); }
.fld .is-bad { border-color: var(--red); background: var(--red-bg); }
.fld .fld-d { font-size: 11.5px; color: var(--ink-45); margin-top: 4px; line-height: 1.55; }

@media (max-width: 1100px) { .dbg { grid-template-columns: 190px minmax(0, 1fr); height: auto; }
 }
@media (max-width: 860px) { .dbg { grid-template-columns: 1fr; }
 }

/* 凭据页（H38）：推荐那一行要一眼看出来；四步链路用编号步骤，不用卡片阵 */
.tbl tr.is-rec td { background: var(--green-bg); }

/* 侧栏分组（H39）：14 项一次列全，组标题把四段隔开。
   标题要明显不是可点项 —— 小字、字重轻、上方留白，与项拉开层级。 */
.sidebar .mg { margin-top: 14px; color: var(--ink-24); font-size: 11.5px; letter-spacing: .03em; }
/* H42 ①：上面那条 `.mg { margin-top: 14px }` 原来被 `.sidebar .mg:first-child { margin-top: 2px }`
   打穿 —— 旧结构里侧栏是扁平列表、只有头一个 .mg 是首元素；现在每个 .mg 都是自己 `.ms` 的首元素，
   于是**四个组标题全被压成 2px**（实测）。删掉那条覆盖即可，组间距回到设计值 14px。
   不要再往 `.ms` 上补 margin：它会和子元素 .mg 的上边距折叠，加了也是 max(两者)，量出来还是 14。 */

/* ═══ H42 ① 侧栏：总引导 + 可折叠分组 ═══
   形态对照阿里云控制台左栏：最上面几项常驻不分组（那边是「服务总览 / 统计大盘」），
   其余按组收拢、组标题自带展开箭头。组标题从「一行说明文字」升级成按钮，
   所以要长得像可点的：hover 有底、箭头跟着开合换向。 */
.sidebar .ms:first-of-type { border-top: 1px solid var(--line-2); margin-top: 10px; padding-top: 4px; }

/* H43 ①：侧栏那条滚动条不好看（用户圈注）。只藏样式、不动滚动本身 ——
   菜单区照样能滚，收起用不到的组也能让它不必滚。 */
.sidebar-menu { scrollbar-width: none; }
.sidebar-menu::-webkit-scrollbar { width: 0; height: 0; }

/* ═══ H42 ② 暗色：整站一套覆盖 ═══
   8 个基线 css 一个字节不能动，所以暗色全部落在这里。两段：
   ① token 重定义 —— 绝大多数规则本来就只认 token，改这里就跟着翻；
   ② 收拾「写死颜色」的那几十处 —— 它们压根不认 token，必须逐条点名。 */
:root[data-theme="dark"] {
  color-scheme: dark;            /* 滚动条、原生控件跟着翻，不然暗页上挂一条白滚动条 */
  --ink: #ECEDF2;
  --ink-90: rgba(236, 237, 242, .90);
  --ink-80: rgba(236, 237, 242, .78);
  --ink-60: rgba(236, 237, 242, .58);
  --ink-40: rgba(236, 237, 242, .40);
  --ink-24: rgba(236, 237, 242, .27);
  --ink-12: rgba(236, 237, 242, .14);
  --ink-06: rgba(236, 237, 242, .08);
  --ink-04: rgba(236, 237, 242, .055);

  --brand: #6E9BFF;
  --brand-hover: #8CB0FF;
  --brand-bg: rgba(110, 155, 255, .15);
  --brand-bg-2: rgba(110, 155, 255, .26);
  --orange: #FF8A3D;
  --green: #3DD68C;
  --green-bg: rgba(61, 214, 140, .15);
  --red: #FF6B6B;
  --red-bg: rgba(255, 107, 107, .15);
  --amber: #F3A93C;
  --amber-bg: rgba(243, 169, 60, .15);

  --bg: #15161C;
  --bg-2: #1B1D25;
  --bg-3: #23252F;
  --line: #2F313B;
  --line-2: #262832;
  --line-3: #3D404C;

  --shadow-pop: 0 6px 24px rgba(0, 0, 0, .55);
  --shadow-seg: 0 1px 2px rgba(0, 0, 0, .45);
}
/* 亮色下这些是「白字压深底」，暗色下深底变成了浅底 —— 白字压浅底 = 看不见。
   统一翻成 var(--bg)（= 当前底色），深浅自动跟着主题走。 */
:root[data-theme="dark"] .btn-black,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .chip.is-on,
:root[data-theme="dark"] .tabs-pill button.is-on,
:root[data-theme="dark"] .tag-red,
:root[data-theme="dark"] .tn-login,
:root[data-theme="dark"] .toast,
:root[data-theme="dark"] .mk-bn-go,
:root[data-theme="dark"] .ca-ln,
:root[data-theme="dark"] .ca-plist a:hover .ca-rid,
:root[data-theme="dark"] .dc-verify-n,
:root[data-theme="dark"] .stepper > button.is-on .st-n,
:root[data-theme="dark"] .chk.is-done .chk-b,
:root[data-theme="dark"] .sw button.is-on .count,
:root[data-theme="dark"] .mk-q .n,
:root[data-theme="dark"] .dbg-li.is-on,
:root[data-theme="dark"] .ag-opt.is-pick.is-on,
:root[data-theme="dark"] .cd-step.is-done .n,
:root[data-theme="dark"] .lg-mark { color: var(--bg); }
/* 同理，hover 态写死的 #2A2B33 是「比黑再亮一点」，暗色里要反过来「比白再暗一点」 */
:root[data-theme="dark"] .btn-black:hover,
:root[data-theme="dark"] .tn-login:hover,
:root[data-theme="dark"] .mk-bn-go:hover { background: var(--ink-80); }
:root[data-theme="dark"] .btn-primary:hover { background: var(--brand-hover); }
/* 提示条：亮色是「浅底 + 深字」，暗色底变深了，字得跟着翻亮 */
:root[data-theme="dark"] .note-warn, :root[data-theme="dark"] .ac-confirm { color: var(--amber); }
:root[data-theme="dark"] .note-danger, :root[data-theme="dark"] .ac-error { color: var(--red); }
:root[data-theme="dark"] .note-info { color: var(--brand); }
/* 分段开关：选中那颗亮色下靠「更白」凸出来，暗色下得靠「更亮」，否则看着像凹进去 */
:root[data-theme="dark"] .seg button.is-on { background: var(--line-3); }
/* 代码块本来就是深底，暗色下和页面底色贴太近，补一道边把它框出来 */
:root[data-theme="dark"] .codeblock, :root[data-theme="dark"] .md pre { border: 1px solid var(--line); }
/* 时序图箭头写死了深墨色，暗色下要翻亮 */
:root[data-theme="dark"] .seq .arrow { stroke: var(--ink-60); }
/* logo 是深色墨稿（实测非透明像素平均亮度 51/255），压在暗底上基本看不见。
   invert + hue-rotate 是保色相的翻转：只翻明度，蓝还是蓝。 */
:root[data-theme="dark"] .logo-img { filter: invert(1) hue-rotate(180deg); }

.dc-side { position: sticky; top: 16px; display: grid; gap: 6px; }

.dc-main { border: 1px solid var(--line); border-radius: var(--r-12); padding: 20px 22px; background: var(--bg-1); }

@media (max-width: 859px) {

  .dc-side { position: static; }
  .dc-main { padding: 16px; }

}

/* 示例对话面板的「这是编的」提示（H52，用户圈出原来那条整宽蓝底提示「排版不太对」）。
   病根：提示用的是 .note-info —— 整宽、蓝底、和正文同字号，读者第一眼看到的是免责声明而不是对话。
   改成面板自带的抬头栏：提示与对话同框（撤不掉、也不会被当成上一段的结尾），
   但灰底 + 小字 + 分隔线，视觉上退到对话后面。 */
.panel.has-exhd { padding: 0; overflow: hidden; }

.ex-chip { flex: none; padding: 1px 8px; border-radius: var(--r-pill); background: var(--brand-bg);
  color: var(--brand); font-size: 11.5px; font-weight: 600; }
.panel.has-exhd .ex-body { padding: 16px 20px 18px; }

/* ══════════ H61 四页改版（定版：下载 c / 凭据 c / 能力页 b / 任务页 b）══════════ */

/* ── 能力页 / 任务页（b · 左目录右详情）────────────────────────────── */

/* 主从骨架：左目录 + 右详情。18 个接口点来点去不用开关抽屉 */
.mdt-gh { font-size: 11px; color: var(--ink-40); padding: 9px 10px 4px; }
/* 目录一行：接口名（等宽）+ 中文名，会花钱的那几个右上角一颗红点 */
.cp-detail { padding: 16px 18px 24px; }

/* 任务页左栏的状态机**速查**：圆点 + 名字 + 一句话。
   用户圈掉的上一版是「一状态一条整宽色块」—— 两条红的连排像在报警，
   而 failed 其实是可安全重开的正常出口；这是参考信息，该退到导航栏的背景里。 */
.tk-side { margin: 0 6px 6px; border: 1px solid var(--line); border-radius: var(--r-8); background: var(--bg); overflow: hidden; }
.tk-side-i { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 10px; }
.tk-side-i + .tk-side-i { border-top: 1px solid var(--line-2); }
.tk-side-i > .dot { margin-top: 5px; }
.tk-side-n { font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
.tk-side-t { display: block; font-size: 11px; color: var(--ink-40); line-height: 1.5; }
.tk-side-t code, .tk-side-t b { font-size: 11px; }

.tk-when { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--brand); background: var(--brand-bg);
  border-radius: 0 var(--r-8) var(--r-8) 0; font-size: var(--fs-12); color: var(--ink-80); line-height: 1.7; }
/* `indeterminate` 单独摆出来：全站最贵的一条规则，塞在状态表第 7 行没人会读到 */
.tk-danger { border: 1px solid var(--red); border-left-width: 3px; border-radius: var(--r-12);
  background: var(--red-bg); padding: 14px 18px; }
.tk-danger b { font-size: var(--fs); }
.tk-danger p { margin: 8px 0 0; font-size: var(--fs-12); color: var(--ink-80); line-height: 1.8; }
.tk-danger code { font-family: var(--mono); font-size: 11.5px; }

@media (max-width: 859px) { .mdt { grid-template-columns: 1fr; }
 }

.sk-fact b { color: var(--ink); font-weight: 700; margin-right: 3px; font-variant-numeric: tabular-nums; }

/* 能干什么：三张卡平铺，不折叠 —— 折起来藏的只有一句话，点开等于没点 */
.sk-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sk-cap { display: grid; grid-template-columns: 32px 1fr; gap: 4px 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-12); background: var(--bg-1); }

/* ── H62 「这个接口做什么」：对外说明的中文块（ToolDetail 顶部） ───────────────
   外卖 18 个工具的 docstring 是英文（上游 runtime 写给 agent 看的），中文取自接口说明文档；
   英文原文没删，仍在「接口 · 原文」页签里。样式落 kit.css 不落 market.css —— 后者在
   web/design/styles-baseline.json 的 sha256 基线里（H9 ⑥）。
   正文按源文档的换行断段：那份文档一行就是一段，pre-wrap 比重排更接近作者的分段。 */
.mk-d-zh { margin: 0 0 8px; font-size: var(--fs); line-height: 24px; color: var(--ink-80); }
/* 指路句用 --ink-60 不用 --ink-40：后者亮色下只有 2.57:1，而这两句恰恰是「原文在哪 / 为什么是英文」，
   读不清等于没写。AC69 ② 的采样器只取叶子节点，这两句带 <span>/<code> 子元素，它永远采不到。 */
.mk-d-hint { margin-top: 10px; font-size: var(--fs-12); line-height: 20px; color: var(--ink-60); }
.mk-d-hint code { font-size: var(--fs-12); }
.mk-d-tbl { min-width: 420px; table-layout: auto; }
.mk-d-tbl td { color: var(--ink-80); }
.mk-d-rule { margin-top: 12px; }
.mk-d-rt { font-size: var(--fs-12); line-height: 20px; color: var(--ink-60); font-weight: 500; }
.mk-d-rule ul { margin: 4px 0 0; padding-left: 18px; list-style: disc; }   /* base.css 把全站 ul 的 list-style 清成 none 了 */
.mk-d-rule li { font-size: var(--fs); line-height: 22px; color: var(--ink-80); margin-top: 4px; }
/* H88 ⑦：任务接口原文的折叠块；箭头自己画，base.css 清掉了 list-style */
.mk-d-fold > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: var(--fs-12); line-height: 20px; color: var(--ink-60); font-weight: 500; }
.mk-d-fold > summary::-webkit-details-marker { display: none; }
.mk-d-fold > summary::before { content: '▸'; display: inline-block; transition: transform .15s; }
.mk-d-fold[open] > summary::before { transform: rotate(90deg); }
.mk-d-fold > summary:hover { color: var(--ink-80); }
.mk-d-fold > .mk-d-desc { margin-top: 8px; }

/* ── H64 能力页：目录横排在上、详情整宽在下 ─────────────────────────────────
   病根是上一版的 `.cp-mdt`：详情被关进一个 `100vh - 300px` 的内滚小窗，入参表 / 出参表 /
   句柄 / 常见问题全挤在里面滚，而同一份内容在 `/tool/:name` 整页上是舒展的。 */

/* 状态机速查挪出左栏之后宽度够了，排成多列，别在整宽版面上拉成一长条 */
.tk-side.is-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 16px; }

/* ── R15-5 请求 / 响应示例（接口调试台 · 任务调试台 · 工具详情，同一份 examples.json）──
   片签：一个工具有几份示例就几颗（search_shops 的关键词 / 浏览）。比通用 .chip 矮一档，放在表单与页签上方不抢眼。 */
.dex-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.dex-pick-k { font-size: var(--fs-12); color: var(--ink-40); }
/* 标题可能比片签宽（confirm_task 那几份在 390px 下要折两行）：高度跟内容走、允许折行 —— 写死 28px 会把第二行裁掉。 */
.chip.dex-chip { height: auto; min-height: 28px; padding: 4px 12px; font-size: var(--fs-12); line-height: 1.5;
  white-space: normal; text-align: left; }
/* 来历：哪类（文档原样 / 脱敏改写 / 按定义补写）+ 出处 + 改了什么 / 依据 / 缺席的顶层字段。 */
.dex-src { margin: 8px 0 10px; font-size: var(--fs-12); line-height: 1.6; color: var(--ink-60); }
.dex-src-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dex-src-t { color: var(--ink-40); overflow-wrap: anywhere; }
.dex-src-l { margin: 6px 0 0; padding-left: 18px; }
.dex-src-l li { margin: 2px 0; overflow-wrap: anywhere; }
.dex-src-l code { font-family: var(--mono); font-size: 11.5px; color: var(--ink-80); }
.dex-res { margin-top: 20px; }
.dex-cap { margin: 4px 0 8px; }

/* ════════════════════ H156 · 站点改版（顶栏五个区 + 每区短侧栏 + 控制台另起壳）════════════════════
   8 个基线 css 一个字节不动（H9 ⑥、H156 ⑧）：新骨架全部写在这一段，窄屏在 mobile.css 的 H156 段。
   动效只认下面这组变量（H156 ⑩，照参考录屏校准；AC-H156-6 ① 门禁扫这一段：零裸写时长、过渡属性只限
   transform / opacity / 颜色 / 阴影）。 */
:root {
  --m-fast: 120ms;            /* 悬停、按下、弹层（录屏：下拉瞬时出现） */
  --m-base: 200ms;            /* 卡片浮起、页签、正文淡入 */
  --m-slow: 360ms;            /* 抽屉（录屏：侧栏收起 / 展开实测 340–390ms） */
  --m-reveal: 480ms;          /* 滚动进场 */
  --m-stagger: 60ms;          /* 进场错峰 */
  --m-skel-delay: 150ms;      /* 取数超过这么久才露骨架 */
  --m-pulse: 1100ms;          /* 骨架呼吸 */
  --m-rotate: 2600ms;         /* hero 关键词轮换的一拍（JS 读它） */
  --m-drift: 26s;             /* 首页 hero 光斑漂移一程（H223 ⑥） */
  --m-spin: 800ms;            /* 演示卡「调用中」转圈一圈 */
  --m-blink: 1000ms;          /* 演示卡打字光标一闪 */
  --m-type: 55ms;             /* 演示卡打字，每个字（JS 读它） */
  --m-demo: 560ms;            /* 演示卡一步的节拍（JS 读它） */
  --m-hold: 2400ms;           /* 演示卡一单演完停多久（JS 读它） */
  --m-count: 1200ms;          /* 数字条从 0 滚到终值（JS 读它） */
  --ease-out: cubic-bezier(.22, 1, .36, 1);   /* 录屏里「前段大、尾巴长」的减速 */
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --zn-press: .97;
}
/* 减少动态偏好：位移与缩放归零、时长压到 0.01ms 以内（AC-H156-6 ②）。全站一刀切，旧文件里的过渡也一起停。 */
@media (prefers-reduced-motion: reduce) {
  :root { --m-fast: .01ms; --m-base: .01ms; --m-slow: .01ms; --m-reveal: .01ms; --m-stagger: 0ms; --m-pulse: .01ms; --zn-press: 1;
    --m-drift: .01ms; --m-spin: .01ms; --m-blink: .01ms; --m-type: 0ms; --m-demo: .01ms; --m-hold: .01ms; --m-count: .01ms; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1 !important; transform: none !important; }
}

/* ── 顶栏（顶栏 B · 胶囊页签） ── */
.zn-top { position: relative; z-index: 20; transition: box-shadow var(--m-base) var(--ease-out); }
.zn-top .topbar-logo { width: 212px; margin-right: 12px; text-decoration: none; }
.zn-sub { font-style: normal; font-weight: 500; color: var(--ink-40); font-size: var(--fs); margin-left: 2px; }
.zn-tabs { position: relative; gap: 4px; }
.zn-tabs .tn-link { position: relative; z-index: 1; padding: 0 14px; transition: color var(--m-fast) var(--ease-out), background-color var(--m-fast) var(--ease-out); }
.zn-tabs .tn-link.is-active, .zn-tabs .tn-link.is-active:hover { background: transparent; color: var(--brand); }
.zn-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--ink-90); font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: background-color var(--m-fast) var(--ease-out), border-color var(--m-fast) var(--ease-out), transform var(--m-fast) var(--ease-out); }
.zn-pill:hover { background: var(--ink-04); border-color: var(--line-3); }
.zn-pill .ic { font-size: 15px; color: var(--ink-60); }

.zn-me { position: relative; }
/* 正文滚动后：顶栏下沿一条细线 + 正文顶边渐隐（录屏第 6 条：内容滚到顶栏下方时淡出） */
.bfl.is-scrolled .zn-top { box-shadow: 0 1px 0 var(--line-2), 0 6px 16px rgba(20, 21, 28, .04); }
.bfl.is-scrolled .bfl-main { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
/* 弹层（账号下拉、搜索）：只做透明度过渡，录屏里的下拉是瞬时出现 */
.zn-pop-enter-active, .zn-pop-leave-active { transition: opacity var(--m-fast) var(--ease-out); }
.zn-pop-enter-from, .zn-pop-leave-to { opacity: 0; }

/* ── 按下回弹（录屏里没有，H156 ⑩ 加的）、键盘焦点环 ── */
.zn .btn { transition: background-color var(--m-fast) var(--ease-out), color var(--m-fast) var(--ease-out), border-color var(--m-fast) var(--ease-out), transform var(--m-fast) var(--ease-out); }
.zn .btn:active:not(:disabled), .zn-pill:active, .zn .tn-login:active, .zn .tn-icon:active { transform: scale(var(--zn-press)); }
.zn :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── 区侧栏：宽 200，文档区 240（要放章名）；首页没有侧栏 ── */
.zn-side { transition: box-shadow var(--m-base) var(--ease-out); }
.zn-side.is-wide { width: 240px; }
.zn-side.is-bare, .zn-mzones { display: none; }
.zn-side .ms:first-of-type, .zn-mzones + .ms { padding-top: 10px; }
.zn-side .mi { text-decoration: none; transition: background-color var(--m-fast) var(--ease-out), color var(--m-fast) var(--ease-out); }
.zn-badge { margin-left: auto; height: 18px; padding: 0 7px; border-radius: var(--r-pill); background: var(--red-bg); color: var(--red); font-size: 11.5px; line-height: 18px; font-weight: 500; }
.zn-row { position: relative; }
.zn-row.has-tog .mi { padding-right: 40px; }
.zn-tog { position: absolute; right: 18px; top: 4px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-40);
  display: grid; place-items: center; font-size: 14px; cursor: pointer;
  transition: background-color var(--m-fast) var(--ease-out), color var(--m-fast) var(--ease-out), transform var(--m-fast) var(--ease-out); }
.zn-tog:hover { background: var(--ink-06); color: var(--ink-90); }
.zn-tog:active { transform: scale(var(--zn-press)); }
.zn-tree { display: flex; flex-direction: column; gap: 1px; margin: 0 12px 4px; }
.zn-ch { display: block; padding: 5px 12px 5px 42px; border-radius: 10px; font-size: 13px; line-height: 20px; color: var(--ink-60);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color var(--m-fast) var(--ease-out), color var(--m-fast) var(--ease-out); }
.zn-ch:hover { background: var(--ink-04); color: var(--ink-90); }
.zn-ch.is-on { background: var(--brand-bg); color: var(--brand); font-weight: 600; }
.bfl.no-side .bfl-main { background: var(--bg); }

/* ── 调试区常驻提示条 ── */
.zn-banner { display: flex; align-items: center; gap: 8px; padding: 9px 24px; background: var(--amber-bg); color: var(--ink-80); font-size: 13px; }
.zn-banner .ic { color: var(--amber); font-size: 15px; flex: none; }

/* ── 换页：外壳不动，只有正文淡入（录屏的整页白屏 + 转圈不照做，H156 ⑩）。
   填充模式用 backwards：动画结束后不留 transform，否则正文里的抽屉 / 固定定位会以它为参照。 */
.zn .route-host { animation: zn-page-in var(--m-base) var(--ease-out) backwards; }
@keyframes zn-page-in { from { opacity: 0; transform: translateY(6px); } }

/* ── 滚动进场（录屏第 5 条）：只在 JS 认得的情况下才藏（motion.js 加 .rv），否则内容一开始就可见 ── */
.rv { opacity: 0; transform: translateY(12px);
  transition: opacity var(--m-reveal) var(--ease-out), transform var(--m-reveal) var(--ease-out);
  transition-delay: calc(var(--rv-i, 0) * var(--m-stagger)); }
.rv.rv-in { opacity: 1; transform: none; }

/* ── 骨架屏：取数超过 --m-skel-delay 才淡出来，尺寸与真内容同一档 ── */
.skel { animation: zn-skel-in var(--m-base) var(--ease-out) var(--m-skel-delay) backwards; }
@keyframes zn-skel-in { from { opacity: 0; } }
.sk { background: var(--bg-3); border-radius: 10px; animation: zn-skel-pulse var(--m-pulse) var(--ease-io) infinite alternate; }
@keyframes zn-skel-pulse { from { opacity: 1; } to { opacity: .55; } }
.skel-row { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
.skel-row.skel-top { align-items: flex-start; }
.skel-col { display: flex; flex-direction: column; gap: 10px; }
.skel-grow { flex: 1; min-width: 0; }
.sk-crumb { width: 96px; height: 14px; }
.sk-ic { width: 52px; height: 52px; border-radius: 14px; flex: none; }
.sk-h1 { width: 220px; height: 28px; margin-top: 14px; }
.sk-ln { height: 12px; margin-top: 12px; }
.sk-stats { height: 74px; border-radius: 16px; margin-top: 20px; }
.sk-tabs { height: 42px; border-radius: 10px; }
.sk-panel { width: 340px; height: 420px; border-radius: 20px; flex: none; }
.sk-col { width: 270px; height: 480px; flex: none; }
.skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 24px; }
.sk-card { height: 268px; border-radius: 20px; }

/* ── 搜索：右侧圆钮 + 弹层（⌘K） ── */
.zn-gs { width: auto; }
.zn-gs-mask { position: fixed; inset: 0; z-index: 60; background: rgba(20, 21, 28, .28); display: flex; justify-content: center; padding-top: 12vh; }
.zn-gs-box { width: min(620px, calc(100vw - 32px)); max-height: 72vh; display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-pop); overflow: hidden; }
.zn-gs-row { position: relative; padding: 12px; border-bottom: 1px solid var(--line-2); }
.zn-gs-row .gs-in { height: 42px; padding-left: 38px; padding-right: 52px; font-size: 14.5px; background: var(--bg-2);
  transition: border-color var(--m-fast) var(--ease-out), background-color var(--m-fast) var(--ease-out), box-shadow var(--m-base) var(--ease-out); }
.zn-gs-row .gs-in:focus { box-shadow: 0 0 0 4px var(--brand-bg); }
.zn-gs-row .gs-ic { left: 25px; top: 25px; }
.zn-gs-row .gs-k { right: 24px; top: 24px; }
.zn-gs-pop { position: static; width: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none; overflow: auto; flex: 1; }
.zn-gs-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; color: var(--ink-40); font-size: 13px; }
.zn-gs-sug { height: 26px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg); color: var(--ink-80); font-size: 12.5px;
  transition: border-color var(--m-fast) var(--ease-out), color var(--m-fast) var(--ease-out); }
.zn-gs-sug:hover { border-color: var(--brand); color: var(--brand); }

.zh2 { font-size: var(--fs-20); line-height: 28px; font-weight: 600; margin: 0; color: var(--ink); }
.zh3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--ink); }

/* ── 页内小件（原内联样式收进来，H156 ⑧） ── */
.zb16 { font-size: 16px; }

/* ── 能力详情的地址框：首页「三分钟接上」也用（H229 U2 起能力区自己的样式在 zone-cap.css，这里只留共用的这一件） ── */

/* ── 文档页（文档页 A · 侧栏文档树 · 正文 ≤ 760 · 页内目录 220） ── */
.dr { display: flex; align-items: flex-start; gap: 32px; padding: 28px 40px 64px 56px; max-width: 1180px; }

/* ── 宽度：桌面窄一档时右侧面板与页内目录让位（AC94：1280 / 1024 下不越过正文右缘） ── */
@media (max-width: 1279px) {

  .dr { padding-left: 40px; }
}

:root[data-theme="dark"] .zn-gs-mask { background: rgba(0, 0, 0, .5); }

/* H159：「说明书」页的三张能力卡可点（切到那个能力的页签） */
button.sk-cap { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color var(--m-base) var(--ease-out), box-shadow var(--m-base) var(--ease-out); }
button.sk-cap:hover { border-color: var(--ink-24); }
button.sk-cap.is-on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); }

/* ── H185 文档中心「场景」：侧栏筹备中的行、文档中心「按场景」卡、场景页（两张文档卡 + 按一单顺序的工具表） ── */
.zn-soon { display: flex; align-items: center; gap: 10px; height: 36px; margin: 0 12px 2px; padding: 9px 12px; color: var(--ink-40); font-size: var(--fs); line-height: 18px; cursor: default; }
.zn-soon .mi-icon { width: 20px; height: 20px; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.zn-soon .mi-label { flex: 1; }
.zn-soon-t { font-size: 12px; color: var(--ink-40); }

/* ── H189 账号下拉（照火山账号卡片）：头部认人 + 计费卡 + 两组三列 + 整行退出，宽 360。
   `.env-pop` 与 `.env-pop button` 在 shell.css（sha256 基线），这里用 `.env-pop.acm` 起头的更具体选择器盖掉整列布局 ── */
.env-pop.acm { width: 360px; min-width: 0; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; color: var(--ink); line-height: var(--lh); }
.acm-hd { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 16px; background: var(--brand-bg); }
.acm-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); color: var(--brand); font-size: 18px; font-weight: 600; box-shadow: 0 0 0 3px var(--bg); }
.acm-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acm-name { font-size: var(--fs-16); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acm-mail { font-size: var(--fs-12); color: var(--ink-60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acm-tier { align-self: flex-start; display: inline-flex; align-items: center; height: 22px; margin-top: 6px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-4); background: var(--bg); font-size: var(--fs-12); color: var(--ink-80); }
.env-pop.acm .acm-link { width: auto; flex: none; flex-direction: row; align-items: center; gap: 2px; padding: 0; border-radius: 0;
  background: none; color: var(--ink-60); font-size: 13px; transition: color var(--m-fast) var(--ease-out); }
.env-pop.acm .acm-link:hover { background: none; color: var(--ink); }
.acm-link .ic { font-size: 14px; }
.acm-hd .acm-link { margin-top: 2px; }
.acm-sec { padding: 16px 20px 4px; }
.acm-t { font-weight: 600; margin-bottom: 10px; }
.acm-card { padding: 14px 16px; border-radius: 10px; background: var(--bg-2); }
.acm-row { display: flex; align-items: center; justify-content: space-between; }
.env-pop.acm .acm-top { width: auto; flex-direction: row; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 500; transition: background-color var(--m-fast) var(--ease-out); }
.env-pop.acm .acm-top:hover { background: var(--brand-hover); }
.acm-amt { margin-top: 6px; font-size: 26px; line-height: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.acm-amt.is-low { color: var(--red); }
.acm-hint { margin-top: 2px; font-size: var(--fs-12); color: var(--ink-60); }
/* 12px 小字用 --red 在浅底上对比不到 4.5，取提示条的深红（`.ac-error` 同款），暗色下翻回 --red */
.acm-hint.is-low { color: #A82323; }
.acm-grp { margin: 12px 20px 0; padding: 14px 0 4px; border-top: 1px solid var(--line); }
.acm-grp .acm-t { margin-bottom: 6px; }
.acm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
.env-pop.acm .acm-mi { width: auto; height: 34px; margin: 0 -8px; padding: 0 8px; flex-direction: row; align-items: center; border-radius: var(--r-8);
  color: var(--ink-80); white-space: nowrap; transition: background-color var(--m-fast) var(--ease-out), color var(--m-fast) var(--ease-out); }
.env-pop.acm .acm-mi:hover { background: var(--ink-04); color: var(--ink); }
.acm-ft { padding: 16px 20px 20px; }
.env-pop.acm .acm-out { height: 36px; padding: 0; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-8);
  background: var(--bg); color: var(--ink-80); transition: background-color var(--m-fast) var(--ease-out); }
.env-pop.acm .acm-out:hover { background: var(--ink-04); }
:root[data-theme="dark"] .env-pop.acm .acm-top { color: var(--bg); }
:root[data-theme="dark"] .acm-hint.is-low { color: var(--red); }

/* ════════════════════ H156 段结束 ════════════════════ */

/* ════════════════════ H215 问答助手浮动入口 ════════════════════ */
.aiq { position: fixed; right: 24px; bottom: 24px; z-index: 60;
  /* H219：入口按钮与头部 logo 垫的底色。唯一一个不跟暗色翻转的值 —— logo 是黑线稿，垫深底就糊了，所以固定白底 */
  --aiq-fab-bg: #fff; }
.aiq-fab { width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 50%; background: var(--aiq-fab-bg); color: var(--ink);
  box-shadow: var(--shadow-pop); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
  transition: box-shadow var(--m-fast) var(--ease-out), transform var(--m-fast) var(--ease-out); }
.aiq-fab:hover { transform: translateY(-1px); box-shadow: 0 10px 28px var(--ink-24); }
.aiq-fab:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.aiq-fab-logo { display: block; width: 46px; height: 46px; }
.aiq-fab-i { font-size: 26px; line-height: 1; font-weight: 400; color: var(--ink); }
:root[data-theme="dark"] .aiq-fab-i { color: var(--bg); }   /* 白底上的 ×：暗色下 --ink 是浅色，换成 --bg（深） */
.aiq-panel { position: absolute; right: 0; bottom: 72px; width: 540px; max-width: calc(100vw - 32px);
  height: min(720px, 80vh); max-height: calc(100vh - 112px);
  display: flex; flex-direction: column; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-pop); overflow: hidden; }
.aiq-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.aiq-logo { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--aiq-fab-bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; }
.aiq-logo img { display: block; width: 28px; height: 28px; }
.aiq-head-t { min-width: 0; }
.aiq-title { font-weight: 600; font-size: 15px; line-height: 20px; color: var(--ink); }
.aiq-sub { font-size: var(--fs-12); line-height: 16px; color: var(--ink-60); }
.aiq-x { margin-left: auto; width: 32px; height: 32px; border: none; border-radius: var(--r-8); background: none; font-size: 22px; line-height: 1;
  color: var(--ink-80); cursor: pointer; padding: 0; transition: background-color var(--m-fast) var(--ease-out), color var(--m-fast) var(--ease-out); }
.aiq-x:hover { background: var(--ink-06); color: var(--ink); }
.aiq-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.aiq-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.aiq-empty { color: var(--ink-80); font-size: 13px; line-height: 1.6; margin: 0; }
.aiq-msg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aiq-msg.is-user { align-items: flex-end; }
.aiq-bubble { max-width: 80%; padding: 10px 14px; border-radius: var(--r-12); font-size: var(--fs); line-height: 1.65; word-break: break-word; }
.aiq-msg.is-user .aiq-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.aiq-msg.is-assistant .aiq-bubble { max-width: 100%; background: var(--ink-04); color: var(--ink); border-bottom-left-radius: 4px; }
.aiq-dots { color: var(--ink-80); letter-spacing: 2px; }
.aiq-sources { margin: 0; font-size: var(--fs-12); color: var(--ink-60); line-height: 1.6; }
.aiq-src { color: var(--brand); text-decoration: none; margin-right: 10px; }
.aiq-src:hover { text-decoration: underline; }
.aiq-input { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); align-items: flex-end; }
.aiq-input textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: var(--r-12); padding: 9px 12px; font: inherit;
  font-size: var(--fs); line-height: 1.5; min-height: 40px; max-height: 160px; overflow-y: auto; background: var(--bg); color: var(--ink); }
.aiq-input textarea:focus { outline: none; border-color: var(--brand); }
.aiq-send { flex: none; border: none; border-radius: var(--r-12); background: var(--brand); color: #fff; padding: 0 16px; height: 40px; cursor: pointer;
  font-size: var(--fs); transition: background-color var(--m-fast) var(--ease-out); }
.aiq-send:hover:not(:disabled) { background: var(--brand-hover); }
.aiq-send:disabled { opacity: .5; cursor: default; }
/* 暗色：品牌色变浅，白字压浅蓝看不清，同全站做法翻成 var(--bg) */
:root[data-theme="dark"] .aiq-msg.is-user .aiq-bubble, :root[data-theme="dark"] .aiq-send, :root[data-theme="dark"] .aiq-card-ok { color: var(--bg); }
.aiq-pop-enter-active, .aiq-pop-leave-active { transition: opacity var(--m-fast) var(--ease-out), transform var(--m-fast) var(--ease-out); }
.aiq-pop-enter-from, .aiq-pop-leave-to { opacity: 0; transform: translateY(8px); }
@media (max-width: 860px) { .aiq { right: 16px; bottom: 16px; } }
/* H219 窄屏：展开即全屏，入口按钮让位，靠头部 × / Esc 收起 */
@media (max-width: 640px) {
  .aiq-panel { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; border: none; border-radius: 0; box-shadow: none; }
  .aiq.is-open .aiq-fab { display: none; }
  .aiq-body { padding: 16px; }
  .aiq-bubble { max-width: 88%; }
}
/* H219 助手回答的 Markdown 正文（只作用在气泡里；文档页 .md 不碰） */
.aiq-md > :first-child { margin-top: 0; }
.aiq-md > :last-child { margin-bottom: 0; }
.aiq-md p { margin: 0 0 8px; }
.aiq-md h1, .aiq-md h2, .aiq-md h3, .aiq-md h4, .aiq-md h5, .aiq-md h6 { font-size: 15px; line-height: 22px; margin: 14px 0 6px; font-weight: 600; color: var(--ink); }
.aiq-md h1 { font-size: var(--fs-16); }
.aiq-md ul, .aiq-md ol { margin: 0 0 8px; padding-left: 20px; list-style: revert; }
.aiq-md li { margin: 2px 0; }
.aiq-md li > p { margin: 0; }
.aiq-md strong { font-weight: 600; }
.aiq-md code { font-family: var(--mono); font-size: 12.5px; background: var(--ink-06); border-radius: var(--r-4); padding: 1px 5px; overflow-wrap: anywhere; }
.aiq-md pre { margin: 8px 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-8); padding: 10px 12px; overflow-x: auto;
  font-size: 12.5px; line-height: 1.6; white-space: pre; }
.aiq-md pre code { background: none; padding: 0; overflow-wrap: normal; }
.aiq-md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.aiq-md th, .aiq-md td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.aiq-md th { background: var(--bg-2); font-weight: 600; }
.aiq-md td code { white-space: nowrap; overflow-wrap: normal; }
.aiq-md a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.aiq-md blockquote { margin: 8px 0; padding: 2px 12px; border-left: 3px solid var(--line-3); color: var(--ink-60); }
.aiq-md hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.aiq-md .aiq-plain-text { white-space: pre-wrap; }
/* H216 代做配置：确认卡与无 JWT 提示（只加 .aiq-card* / .aiq-hint，接在 H215 的 .aiq-* 之后） */
.aiq-hint { margin: 0; padding: 8px 12px 0; font-size: 12px; color: var(--ink-60); }
.aiq-card { max-width: 92%; border: 1px solid var(--line); border-radius: var(--r-12); background: var(--bg); padding: 12px 14px;
  font-size: 13px; line-height: 1.55; color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.aiq-card p { margin: 0; }
.aiq-card code { font-family: var(--mono); font-size: 12px; background: var(--ink-04); border-radius: var(--r-4); padding: 1px 4px; word-break: break-all; }
.aiq-card-h { font-weight: 600; font-size: 14px; }
.aiq-card-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; margin: 2px 0; }
.aiq-card-kv dt { color: var(--ink-60); }
.aiq-card-kv dd { margin: 0; word-break: break-all; }
.aiq-card-url mark { background: var(--amber-bg); color: var(--ink); font-weight: 600; border-radius: 2px; padding: 0 1px; }
.aiq-card-old { color: var(--ink-60); }
.aiq-card-warn { color: var(--amber); }
.aiq-card-api, .aiq-card-who, .aiq-card-note { color: var(--ink-60); font-size: 12px; }
.aiq-card-err { color: var(--red); }
.aiq-card-btns { display: flex; gap: 8px; margin-top: 4px; }
.aiq-card-ok, .aiq-card-no { border-radius: var(--r-8); height: 30px; padding: 0 14px; cursor: pointer; font: inherit; font-size: 13px;
  transition: background-color var(--m-fast) var(--ease-out); }
.aiq-card-ok { border: none; background: var(--brand); color: #fff; }
.aiq-card-ok:hover { background: var(--brand-hover); }
.aiq-card-no { border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.aiq-card-no:hover { background: var(--ink-04); }
.aiq-card-res { display: flex; flex-direction: column; gap: 6px; }
.aiq-card-res .aiq-card-no { align-self: flex-start; }
.aiq-card-secret { display: flex; align-items: center; gap: 8px; }
.aiq-card-secret code { flex: 1; }
.aiq-card-secret button { border: 1px solid var(--line); background: var(--bg); color: var(--brand); border-radius: var(--r-8); height: 26px; padding: 0 10px; cursor: pointer; font-size: 12px; }

/* ════════════════════ H229 · 共用层（全站改版照 10-29 交互稿 web/design/2026-10-29-全站交互稿/）════════════════════
   本段只放六个区都要用的：token、k- 组件、外壳（顶栏 / 区侧栏 / 图标栏 / 侧栏底部入口）、AI 助手换皮。各区自己的样式进
   web/styles/zone-<区>.css（H229 ⑤）。门禁扫本段：过渡与动画引用动效变量；布局过渡只许出现在 check.mjs 的 LAYOUT_TRANSITION_ALLOW。 */
:root {
  /* 稿子的变量名原样定义（spec §2-3）。与现行同名的 --bg / --line / --ink 亮色值本来就相同；
     --brand / --shadow-pop 在现行里是别的意思（主色蓝、浅阴影），稿子的那两个改叫 --k-brand / --k-shadow-pop */
  --bg-soft: #f7f8fa; --bg-mute: #f2f2f4; --surface: #ffffff; --line-strong: #d9dae0;
  --ink-1: rgba(20, 21, 28, .9); --ink-2: rgba(20, 21, 28, .64); --ink-3: rgba(20, 21, 28, .42); --ink-4: rgba(20, 21, 28, .06);
  --primary: #2564f8; --primary-soft: #eaf0ff; --primary-line: #a9c2ff;
  --k-brand: #f0562e; --k-brand-soft: #fff0eb;
  --grad-brand: linear-gradient(100deg, #ff7a45 0%, #f0562e 52%, #d93d7a 100%);
  --grad-brand-text: linear-gradient(100deg, #ff7a45 5%, #f0562e 45%, #d93d7a 95%);
  --c-food: #ff6a00; --c-food-soft: #fff1e6; --c-errand: #12b76a; --c-errand-soft: #e8f8f0;
  --c-retail: #7a5af8; --c-retail-soft: #f1edff; --c-task: #2564f8; --c-task-soft: #eaf0ff;
  --ok: #12b76a; --warn: #e88b00; --err: #f53f3f; --err-soft: #feecec; --warn-soft: #fff5e5; --ok-soft: #e8f8f0;
  --night: #0f1218; --night-2: #171b24; --night-line: #262c38; --night-ink: #e9ecf3; --night-ink-2: rgba(233, 236, 243, .6);
  --f-sans: "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --f-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --w: 1144px; --gutter: 48px; --top: 64px; --side: 200px; --rail: 60px;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 20px; --r-2xl: 24px; --pill: 999px;
  --shadow-hover: 0 10px 28px rgba(20, 21, 28, .08); --k-shadow-pop: 0 18px 48px -12px rgba(20, 21, 28, .22);
  --e-out: cubic-bezier(.22, 1, .36, 1); --e-std: cubic-bezier(.2, .7, .2, 1); --e-layout: cubic-bezier(.22, .72, .18, 1); --e-spring: cubic-bezier(.34, 1.4, .64, 1);
  /* 动效：稿子的 --t1..--t4 = 现行四档（H229 ⑥：--m-base 200 → 240）；减少动态时跟着 --m-* 一起压到 .01ms */
  --m-base: 240ms;
  --t1: var(--m-fast); --t2: var(--m-base); --t3: var(--m-slow); --t4: var(--m-reveal);
  --topbar-h: 64px;   /* 顶栏 72 → 64（H229 ⑧）；tokens.css 是基线不动，这里覆盖 */
}
:root[data-theme="dark"] {
  --bg: #0e0f13; --bg-soft: #14151a; --bg-mute: #1b1c22; --surface: #17181e; --line: #2a2b33; --line-strong: #3a3b45;
  --ink: #eceef3; --ink-1: rgba(236, 238, 243, .92); --ink-2: rgba(236, 238, 243, .66); --ink-3: rgba(236, 238, 243, .44); --ink-4: rgba(236, 238, 243, .07);
  --primary: #6b95ff; --primary-soft: #1a2442; --primary-line: #3a5596; --k-brand: #ff7a55; --k-brand-soft: #34201a;
  --c-food-soft: #33210f; --c-errand-soft: #10291e; --c-retail-soft: #241d3d; --c-task-soft: #1a2442;
  --err-soft: #3a1818; --warn-soft: #33260e; --ok-soft: #10291e;
  --night: #08090c; --night-2: #111319; --night-line: #232733;
  --shadow-hover: 0 10px 28px rgba(0, 0, 0, .4); --k-shadow-pop: 0 18px 48px -12px rgba(0, 0, 0, .6);
}

/* ── k- 组件（稿子 proto.css 同名去前缀） ── */
.k-btn { height: 36px; padding: 0 16px; border-radius: var(--pill); border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; font: inherit; font-weight: 500; white-space: nowrap; text-decoration: none; position: relative; isolation: isolate; overflow: hidden;
  transition: background-color var(--t2), border-color var(--t2), color var(--t2), transform var(--t1); }
.k-btn:active:not([disabled]) { transform: scale(.98); }
.k-btn.dark { background: var(--ink); color: var(--bg); }
.k-btn.dark::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--grad-brand); opacity: 0; transition: opacity var(--t3); }
.k-btn.dark:hover::before, .k-btn.dark:focus-visible::before { opacity: 1; }
.k-btn.dark:hover { color: #fff; }
.k-btn .k-arr { width: 0; opacity: 0; margin-left: -6px; transform: translate(-4px, 3px);
  transition: width var(--t3) var(--e-out), opacity var(--t2), transform var(--t3) var(--e-out), margin-left var(--t3) var(--e-out); }
.k-btn.dark:hover .k-arr { width: 14px; opacity: 1; margin-left: 0; transform: none; }
.k-btn.primary { background: var(--primary); color: #fff; }
.k-btn.primary:hover { background: color-mix(in srgb, var(--primary) 88%, #000); }
.k-btn.line { background: var(--surface); border-color: var(--line); color: var(--ink-1); }
.k-btn.line:hover { background: var(--bg-mute); }
.k-btn.ghost { background: transparent; color: var(--ink-2); }
.k-btn.ghost:hover { background: var(--ink-4); color: var(--ink); }
.k-btn.danger { background: var(--surface); border-color: var(--line); color: var(--err); }
.k-btn.danger:hover { background: var(--err-soft); border-color: transparent; }
.k-btn.sm { height: 30px; padding: 0 12px; font-size: 13px; }
.k-btn.lg { height: 44px; padding: 0 22px; font-size: 15px; }
.k-btn[disabled] { opacity: .45; pointer-events: none; }
:root[data-theme="dark"] .k-btn.primary { color: var(--bg); }
.k-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--pill); font-size: 12px; background: var(--bg-mute); color: var(--ink-2); white-space: nowrap; }
.k-tag.blue { background: var(--primary-soft); color: var(--primary); }
.k-tag.green { background: var(--ok-soft); color: var(--ok); }
.k-tag.amber { background: var(--warn-soft); color: var(--warn); }
.k-tag.red { background: var(--err-soft); color: var(--err); }
.k-tag.brand { background: var(--k-brand-soft); color: var(--k-brand); }
.k-tag.food { background: var(--c-food-soft); color: var(--c-food); }
.k-tag.errand { background: var(--c-errand-soft); color: var(--c-errand); }
.k-tag.retail { background: var(--c-retail-soft); color: var(--c-retail); }
.k-tag.task { background: var(--c-task-soft); color: var(--c-task); }
.k-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.k-card.pad { padding: 20px; }
.k-lift { transition: transform var(--t2) var(--e-std), box-shadow var(--t2), border-color var(--t2); }
.k-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.k-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--pill); background: var(--bg-mute); max-width: 100%; overflow-x: auto; }
.k-seg > button, .k-seg > a { position: relative; isolation: isolate; height: 30px; padding: 0 14px; border-radius: var(--pill); border: 0; background: transparent; cursor: pointer;
  color: var(--ink-2); font: inherit; font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; transition: color var(--t2); }
.k-seg > button::before, .k-seg > a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  opacity: 0; transform: scale(.88); transition: opacity var(--t1), transform var(--t3) var(--e-spring); }
.k-seg > .on { color: var(--ink); font-weight: 500; }
.k-seg > .on::before { opacity: 1; transform: none; }
.k-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.k-tabs > button, .k-tabs > a { height: 40px; border: 0; background: none; cursor: pointer; color: var(--ink-2); position: relative; padding: 0; white-space: nowrap; font: inherit; display: inline-flex; align-items: center; text-decoration: none; }
.k-tabs > .on { color: var(--ink); font-weight: 600; }
.k-tabs > .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
.k-input { height: 38px; width: 100%; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); color: var(--ink); padding: 0 12px; font: inherit; outline: none;
  transition: border-color var(--t2), box-shadow var(--t2); }
textarea.k-input { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 22px; }
.k-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.k-search { position: relative; }
.k-search > .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.k-search > .k-input { padding-left: 36px; border-radius: var(--pill); }
.k-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 16px; font-size: 13.5px; margin: 0; }
.k-kv dt { color: var(--ink-3); }
.k-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.k-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); background: var(--bg-soft); color: var(--ink-2); font-size: 13px; line-height: 20px; }
.k-note.blue { background: var(--primary-soft); color: var(--ink-1); }
.k-note.amber { background: var(--warn-soft); color: var(--ink-1); }
.k-empty { text-align: center; padding: 48px 16px; color: var(--ink-3); }
.k-code { position: relative; background: var(--night); color: var(--night-ink); border-radius: var(--r-l); padding: 16px 18px; font: 12.5px/20px var(--f-mono); overflow-x: auto; white-space: pre; margin: 0; }
.k-switch { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--line-strong); border: 0; cursor: pointer; flex: 0 0 auto; transition: background-color var(--t2); }
.k-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform var(--t3) var(--e-spring); }
.k-switch.on { background: var(--primary); }
.k-switch.on::after { transform: translateX(16px); }
/* 弹窗与抽屉：进场只动透明度与位移 */
.k-mask { position: fixed; inset: 0; z-index: 100; background: rgba(10, 11, 15, .36); display: grid; place-items: center; padding: 16px; animation: k-fade var(--t2) var(--e-out); }
.k-modal { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); color: var(--ink); border-radius: var(--r-2xl); box-shadow: var(--k-shadow-pop); padding: 24px;
  animation: k-modal-in var(--t3) var(--e-out); }
.k-modal.lg { width: min(640px, 100%); }
.k-modal-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.k-modal-hd h3 { margin: 0; font-size: 16px; font-weight: 600; }
.k-modal-ft { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.k-drawer-mask { position: fixed; inset: 0; z-index: 100; background: rgba(10, 11, 15, .36); animation: k-fade var(--t2) var(--e-out); }
.k-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--surface); color: var(--ink); box-shadow: var(--k-shadow-pop);
  display: flex; flex-direction: column; animation: k-drawer-in var(--t3) var(--e-out);
  padding-top: env(safe-area-inset-top, 0px); padding-right: env(safe-area-inset-right, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.k-drawer-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.k-drawer-hd h3 { margin: 0; font-size: 16px; font-weight: 600; }
.k-drawer-bd { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.k-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink-2);
  transition: background-color var(--t2), color var(--t2); }
.k-x:hover { background: var(--ink-4); color: var(--ink); }
@keyframes k-fade { from { opacity: 0; } }
@keyframes k-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes k-drawer-in { from { transform: translateX(100%); } }
/* 锁层（H229 ⑬）：盖在静态示意内容上，内容不可点；升级入口在锁层里 */
.k-lock { position: relative; border-radius: var(--r-xl); overflow: hidden; }
.k-lock-bg { pointer-events: none; user-select: none; }
.k-lock-over { position: absolute; inset: 0; border-radius: inherit; display: grid; place-items: center; text-align: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.k-lock-in { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 360px; }
.k-lock-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 20px; }

/* ── 外壳：顶栏（稿子 .top） ── */
.zn-top { height: var(--topbar-h); gap: 0; }
.zn-top .topbar-logo { height: 26px; }
.zn-top .topbar-logo .logo-img { height: 26px; width: auto; }
.zn-tabs { gap: 2px; transition: opacity var(--t2); }
.zn-tabs .tn-link { height: 34px; line-height: 34px; color: var(--ink-2); }
.zn-tabs .tn-link:hover { color: var(--ink); }
.zn-tabs .tn-link.is-active, .zn-tabs .tn-link.is-active:hover { color: var(--ink); }
.zn-top .topbar-right { gap: 8px; transition: opacity var(--t2); }
.zn-pill { height: 30px; padding: 0 12px; font-size: 13px; background: var(--surface); border-color: var(--line); color: var(--ink-1); }
.zn-pill:hover { background: var(--bg-mute); border-color: var(--line); }
.zn .tn-icon { width: 34px; height: 34px; color: var(--ink-2); }
.zn .tn-login { height: 34px; padding: 0 14px; border-radius: var(--pill); background: var(--ink); color: var(--bg); font-weight: 600; font-size: 13.5px;
  transition: opacity var(--t1), transform var(--t1); }
.zn .tn-login:hover { background: var(--ink); opacity: .88; }
.bfl.zn:not([data-zone="home"]) .zn-top { box-shadow: inset 0 -1px 0 var(--line); }
.bfl.zn.is-scrolled:not([data-zone="home"]) .zn-top { box-shadow: inset 0 -1px 0 var(--line); }
/* 首页：顶栏浮在正文上，向下滚只收导航链接 + 5 层渐进模糊；鼠标进顶栏立即恢复（稿子 bindShell） */
.zn-blur { position: absolute; inset: 0 0 -24px; opacity: 0; pointer-events: none; z-index: -1; transition: opacity var(--t2); }
.zn-blur i { position: absolute; inset: 0; }
.zn-blur i:nth-child(1) { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(0deg, transparent, #000 10%); mask-image: linear-gradient(0deg, transparent, #000 10%); }
.zn-blur i:nth-child(2) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(0deg, transparent 10%, #000 22%); mask-image: linear-gradient(0deg, transparent 10%, #000 22%); }
.zn-blur i:nth-child(3) { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(0deg, transparent 22%, #000 36%); mask-image: linear-gradient(0deg, transparent 22%, #000 36%); }
.zn-blur i:nth-child(4) { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(0deg, transparent 36%, #000 52%); mask-image: linear-gradient(0deg, transparent 36%, #000 52%); }
.zn-blur i:nth-child(5) { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); -webkit-mask-image: linear-gradient(0deg, transparent 52%, #000 70%); mask-image: linear-gradient(0deg, transparent 52%, #000 70%); }
.bfl.zn[data-zone="home"] .zn-top { position: absolute; left: 0; right: 0; top: 0; isolation: isolate; transition: background-color var(--t2); }
.bfl.zn[data-zone="home"] .bfl-main { padding-top: var(--topbar-h); }
.bfl.zn[data-zone="home"].is-scrolled .bfl-main { -webkit-mask-image: none; mask-image: none; }
.zn-top.is-hidden { background: transparent; }
.zn-top.is-hidden .zn-blur { opacity: 1; }
.zn-top.is-hidden .zn-tabs, .zn-top.is-hidden .topbar-right > :not(.zn-keep) { opacity: 0; pointer-events: none; }
.zn-top.is-hidden:hover, .zn-top.is-hidden:focus-within { background: var(--bg); }
.zn-top.is-hidden:hover .zn-blur, .zn-top.is-hidden:focus-within .zn-blur { opacity: 0; }
.zn-top.is-hidden:hover .zn-tabs, .zn-top.is-hidden:hover .topbar-right > *, .zn-top.is-hidden:focus-within .zn-tabs, .zn-top.is-hidden:focus-within .topbar-right > * { opacity: 1; pointer-events: auto; }

/* ── 外壳：区侧栏（稿子 .side）、图标栏、底部常驻入口 ── */
.zn-side { z-index: 2; padding: 12px 0 20px; transition: width var(--t4) var(--e-spring), box-shadow var(--m-base) var(--ease-out); }
.zn-side .mg { height: auto; margin: 14px 12px 6px; padding: 0 12px; font-size: 12px; line-height: 18px; color: var(--ink-3); }
.zn-side .ms:first-of-type .mg, .zn-mzones + .ms .mg { margin-top: 4px; }
.zn-side .mi { color: var(--ink-1); }
.zn-side .mi:hover { background: var(--ink-4); }
.zn-side .mi.is-active { background: var(--ink-4); color: var(--ink); }
.zn-side .mi .mi-icon { color: var(--ink-2); }
.zn-foot { flex: none; padding: 12px 12px 0; display: flex; flex-direction: column; gap: 8px; }
.zn-fk { height: 36px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; gap: 8px; padding: 0 12px;
  color: var(--ink-1); font-size: 13px; text-decoration: none; white-space: nowrap; overflow: hidden; transition: background-color var(--t2); }
.zn-fk:hover { background: var(--bg-mute); }
.zn-fk .ic { font-size: 16px; color: var(--ink-2); flex: none; }
.zn-rail-tog { position: absolute; top: 50%; right: -12px; z-index: 3; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2); font-size: 14px; transition: color var(--t1), background-color var(--t1); }
.zn-rail-tog:hover { color: var(--ink); background: var(--bg-mute); }
.zn-side.is-rail { width: var(--rail); }
.zn-side.is-rail .mg, .zn-side.is-rail .mi-label, .zn-side.is-rail .zn-badge, .zn-side.is-rail .zn-tog, .zn-side.is-rail .zn-tree, .zn-side.is-rail .zn-soon,
.zn-side.is-rail .zn-fk span { display: none; }
.zn-side.is-rail .mi { justify-content: center; padding: 0; margin: 0 10px 2px; }
.zn-side.is-rail .zn-row.has-tog .mi { padding-right: 0; }
.zn-side.is-rail .zn-foot { padding-inline: 10px; }
.zn-side.is-rail .zn-fk { justify-content: center; padding: 0; }
.zn-side.is-rail .ms + .ms { margin-top: 10px; }
/* 图标栏悬停提示：纯 CSS，文字取 data-tip（= 侧栏项名） */
.zn-side.is-rail .mi::after, .zn-side.is-rail .zn-fk::after { content: attr(data-tip); position: fixed; z-index: 130; margin-left: calc(var(--rail) - 6px); padding: 6px 10px; border-radius: 8px;
  background: #14151c; color: #fff; font-size: 12px; line-height: 18px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--t1); }
.zn-side.is-rail .mi:hover::after, .zn-side.is-rail .zn-fk:hover::after { opacity: 1; }
.zn-side .sidebar-menu { overflow-x: hidden; }

/* 窄屏（< 860）：侧栏是抽屉，不收图标栏；开关藏起来（稿子同） */
@media (max-width: 859px) {
  .zn-rail-tog { display: none; }
  .zn-side.is-rail { width: 260px; }
  .zn-side.is-rail .mg, .zn-side.is-rail .mi-label, .zn-side.is-rail .zn-fk span { display: initial; }
  .zn-side.is-rail .mi { justify-content: flex-start; padding: 9px 12px; margin: 0 12px 2px; }
  .zn-side.is-rail .mi::after, .zn-side.is-rail .zn-fk::after { display: none; }
}

/* ── AI 答疑助手换皮（H229 ⑪，承 H219：只改外观，结构与文案不动） ── */
.aiq-fab { box-shadow: 0 8px 24px rgba(20, 21, 28, .14); transition: transform var(--t2) var(--e-std), box-shadow var(--t2); }
.aiq-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20, 21, 28, .2); }
.aiq-panel { border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--k-shadow-pop); transform-origin: 100% 100%; }
.aiq-head { padding: 14px 16px; }
.aiq-sub { color: var(--ink-3); }
.aiq-x { border-radius: 50%; width: 34px; height: 34px; color: var(--ink-2); }
.aiq-x:hover { background: var(--ink-4); }
.aiq-body { padding: 16px; gap: 14px; }
.aiq-empty { color: var(--ink-2); font-size: 13.5px; line-height: 22px; }
.aiq-bubble { font-size: 13.5px; line-height: 22px; }
.aiq-msg.is-user .aiq-bubble { max-width: 82%; padding: 9px 13px; background: var(--primary); border-radius: 14px 14px 4px 14px; }
.aiq-msg.is-assistant .aiq-bubble { padding: 0; background: transparent; border-radius: 0; color: var(--ink-1); }
.aiq-sources { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--ink-3); }
.aiq-src { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; margin-right: 0; border-radius: var(--pill); background: var(--bg-mute); color: var(--ink-2);
  transition: background-color var(--t2), color var(--t2); }
.aiq-src:hover { text-decoration: none; color: var(--primary); background: var(--primary-soft); }
.aiq-card { border-radius: 14px; background: var(--bg-soft); }
.aiq-input { margin: 10px 12px 12px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 16px; transition: border-color var(--t2), box-shadow var(--t2); }
.aiq-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
/* 输入框只去掉自己的边与底，高度规则照 H219（41 起、封顶 160 后框内滚，AC-H219-3） */
.aiq-input textarea, .aiq-input textarea:focus { border-color: transparent; background: transparent; padding-left: 0; }
.aiq-send { height: 32px; padding: 0 14px; border-radius: var(--pill); background: var(--ink); color: var(--bg); }
.aiq-send:hover:not(:disabled) { background: var(--ink); opacity: .88; }
.aiq-send:disabled { opacity: .45; }

/* ── H245 顶栏四个下拉：页签下划线、右侧文字链、大菜单。时长和缓动只用动效变量，只动 transform、透明度、颜色 ── */
.zn-tabs { align-self: stretch; }
.zn-tabs .tn-link { height: 100%; line-height: var(--topbar-h); padding: 0 14px; border-radius: 0; background: transparent; gap: 6px; }
.zn-tabs .tn-link:hover { background: transparent; }
.zn-tabs .tn-link::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transition: transform var(--t2) var(--ease-out); }
.zn-tabs .tn-link::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--t2) var(--ease-out); }
.zn-tabs .tn-link.is-active::before, .zn-tabs .tn-link[data-open]::before { transform: scaleX(1); }
.zn-tabs[data-open] .tn-link.is-active:not([data-open])::before { transform: scaleX(0); }
.zn-tabs .tn-link[data-open] { color: var(--ink); }
.zn-tabs .tn-link[data-open]::after { transform: translate3d(0, 3px, 0) rotate(225deg); }
.zn-tl { height: 34px; padding: 0 8px; line-height: 34px; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color var(--t1) var(--ease-out); }
.zn-tl:hover { color: var(--ink); }
.zn-top[data-mm] { background: var(--bg); }
.zn-top[data-mm] .zn-blur { opacity: 0; }
.zn-top.is-hidden[data-mm] .zn-tabs, .zn-top.is-hidden[data-mm] .topbar-right > * { opacity: 1; pointer-events: auto; }
.zn-mm-scrim { position: fixed; inset: var(--topbar-h) 0 0; z-index: 18; background: rgba(20, 21, 28, .2); opacity: 0; pointer-events: none; transition: opacity var(--m-base) linear; }
.zn-mm-scrim.on { opacity: 1; pointer-events: auto; transition-duration: var(--m-slow); }
.zn-mm { position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 19; overflow: hidden; opacity: 0; transform: translate3d(0, -100%, 0);
  transition: transform var(--m-base) var(--ease-out), opacity var(--m-base) linear; }
/* 收完才藏：.anim 由 mega-menu.js 多留一个动画时长，藏起来之后面板里的链接才不进 Tab 顺序 */
.zn-mm:not(.open):not(.anim) { visibility: hidden; }
.zn-mm-in { max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); transform: translate3d(0, 100%, 0); transition: transform var(--m-base) var(--ease-out); }
.zn-mm.open { opacity: 1; transform: none; transition: transform var(--m-slow) var(--ease-out), opacity var(--m-base) linear; }
.zn-mm.open .zn-mm-in { transform: none; transition: transform var(--m-slow) var(--ease-out); }
.zn-mm.anim, .zn-mm.anim .zn-mm-in { will-change: transform, opacity; }
.zn-mm-body { display: grid; grid-template-columns: minmax(248px, calc(50vw - 372px)) minmax(0, 1fr); min-height: 420px; }
.zn-mm-left { display: grid; justify-content: end; padding: 24px 24px 28px 24px; background: var(--bg-soft); }
.zn-mm-rail { grid-area: 1 / 1; width: 200px; display: flex; flex-direction: column; gap: 4px; visibility: hidden; }
.zn-mm-rail.on { visibility: visible; }
.zn-mm-rail button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 42px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink-2); text-align: left; cursor: pointer; transition: color var(--t1) var(--ease-out); }
.zn-mm-rail button:hover, .zn-mm-rail button.on { color: var(--ink); }
.zn-mm-rail button.on { font-weight: 600; }
.zn-mm-rail .u { position: relative; display: inline-block; padding-bottom: 3px; white-space: nowrap; }
.zn-mm-rail .u::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--t2) var(--ease-out); }
.zn-mm-rail button.on .u::after { transform: scaleX(1); }
.zn-mm-rail button:focus-visible, .zn-mm-pane a:focus-visible, .zn-tabs .tn-link:focus-visible, .zn-tl:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }
.zn-mm-right { display: grid; padding: 28px 24px 32px 48px; min-width: 0; }
.zn-mm-pane { grid-area: 1 / 1; min-width: 0; max-width: 860px; opacity: 0; visibility: hidden; transform: translate3d(0, 6px, 0); }
.zn-mm-pane.on { opacity: 1; visibility: visible; transform: none; transition: opacity var(--m-base) linear, transform var(--m-slow) var(--ease-out); }
.zn-mm-t { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; transition: color var(--t1) linear; }
.zn-mm-t i { font-style: normal; color: var(--ink-3); transition: transform var(--t2) var(--ease-out), color var(--t1) linear; }
.zn-mm-t:hover, .zn-mm-t:hover i { color: var(--primary); }
.zn-mm-t:hover i { transform: translate3d(3px, 0, 0); }
.zn-mm-d { margin: 8px 0 0; max-width: 34em; color: var(--ink-2); }
.zn-mm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; margin-top: 22px; }
.zn-mm-cols h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.zn-mm-cols a { display: block; padding: 4px 0; color: var(--ink-2); text-decoration: none; transition: color var(--t1) linear; }
.zn-mm-cols a:hover { color: var(--primary); }
.zn-mm-st { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--pill); font-size: 11.5px; font-weight: 500; background: var(--ink-4); color: var(--ink-2); }
.zn-mm-st.test { background: var(--amber-bg); color: var(--amber); }
@media (prefers-reduced-motion: reduce) { .zn-mm, .zn-mm-in, .zn-mm.open, .zn-mm.open .zn-mm-in, .zn-mm-pane, .zn-mm-pane.on { transition-duration: .01ms; transition-delay: 0s; } .zn-mm-pane { transform: none; } }
/* ════════════════════ H229 共用层结束 ════════════════════ */