/* ==========================================================================
   云枢 AI导航 · 设计系统 v1.1
   海岸暖白 + 翡翠绿 / 默认亮色（与 AI工具前台页面风格.html 同源），一键切深色
   面向：Next.js(App Router) + Tailwind 落地时的视觉基准
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
/* 默认：海岸暖白 + 翡翠绿（新模板主风格） */
:root {
  /* 画布 / 表面 */
  --bg: #F4F6F2;
  --bg-soft: #FBFCFA;
  --bg-elev: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FAFBFA;
  --surface-3: #EBEFE9;
  --line: #E2E8E2;
  --line-strong: #CFDCD2;

  /* 文字 */
  --text: #14201B;
  --text-2: #46544C;
  --text-3: #7C8A82;

  /* 品牌 */
  --brand: #0E9F6E;
  --brand-2: #0EA5E9;
  --brand-3: #0B7A53;
  --brand-soft: rgba(14, 159, 110, .10);
  --brand-line: rgba(14, 159, 110, .28);
  --grad: linear-gradient(135deg, #0EA5E9 0%, #0E9F6E 100%);
  --grad-soft: linear-gradient(135deg, rgba(14, 165, 233, .12), rgba(14, 159, 110, .12));

  /* 语义 */
  --ok: #0E9F6E;   --ok-soft: rgba(14, 159, 110, .10);
  --warn: #F59E0B; --warn-soft: rgba(245, 158, 11, .12);
  --danger: #F43F5E; --danger-soft: rgba(244, 63, 94, .10);

  /* 尺寸 */
  --r-xs: 8px; --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 24px; --r-full: 999px;
  --sp: 4px;
  --header-h: 64px;
  --maxw: 1240px;

  /* 阴影 / 光 */
  --sh-1: 0 1px 2px rgba(20,32,27,.04), 0 1px 3px rgba(20,32,27,.05);
  --sh-2: 0 4px 14px rgba(20,32,27,.06), 0 2px 6px rgba(20,32,27,.04);
  --sh-3: 0 18px 40px -12px rgba(14,159,110,.18), 0 8px 20px -8px rgba(20,32,27,.12);
  --glow: 0 0 0 1px var(--brand-line), 0 12px 32px -14px rgba(14,159,110,.28);
  --blur: saturate(160%) blur(18px);

  /* 动效 */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .28s;
}

/* 深色：深墨绿底 + 同一套翡翠绿 / 信号蓝点缀 */
[data-theme="dark"] {
  --bg: #08130F;
  --bg-soft: #0C1A15;
  --bg-elev: #10211B;
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .065);
  --surface-3: rgba(255, 255, 255, .10);
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .18);

  --text: #E7EFEA;
  --text-2: #A6B8AE;
  --text-3: #6E847A;

  --brand: #0E9F6E;
  --brand-2: #0EA5E9;
  --brand-3: #34D399;
  --brand-soft: rgba(14, 159, 110, .16);
  --brand-line: rgba(14, 159, 110, .40);
  --grad: linear-gradient(135deg, #0EA5E9 0%, #0E9F6E 100%);
  --grad-soft: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(14, 159, 110, .18));

  --ok: #34D399;   --ok-soft: rgba(52, 211, 153, .14);
  --warn: #FBBF24; --warn-soft: rgba(251, 191, 36, .14);
  --danger: #FB7185; --danger-soft: rgba(251, 113, 133, .14);

  --sh-1: 0 1px 2px rgba(0,0,0,.40);
  --sh-2: 0 8px 24px -8px rgba(0,0,0,.60);
  --sh-3: 0 24px 60px -20px rgba(0,0,0,.75);
  --glow: 0 0 0 1px var(--brand-line), 0 12px 40px -12px rgba(14,159,110,.55);
  --blur: saturate(160%) blur(18px);
}

/* ---------- 2. 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 15px; line-height: 1.65; letter-spacing: .1px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: rgba(14,159,110,.20); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: content-box; }

/* 极光背景 —— 模板是干净的暖白底 + 极淡顶部渐变，因此这里只保留两团极低不透明度的绿/蓝光晕，
   默认（亮色）几乎不可见但保留一点空气感，深色下略微提亮。 */
.aurora { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(120px);
  opacity: .16;
}
.aurora::before {
  width: 860px; height: 720px; top: -320px; left: -140px;
  background: radial-gradient(circle, rgba(14,159,110,.30), transparent 65%);
  animation: drift 26s var(--ease) infinite alternate;
}
.aurora::after {
  width: 760px; height: 640px; top: -220px; right: -160px;
  background: radial-gradient(circle, rgba(14,165,233,.24), transparent 65%);
  animation: drift 32s var(--ease) infinite alternate-reverse;
}
[data-theme="dark"] .aurora::before { opacity: .30; }
[data-theme="dark"] .aurora::after { opacity: .24; }
@keyframes drift { to { transform: translate3d(60px, 50px, 0) scale(1.12); } }

.grid-lines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .14;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 20%, transparent 75%);
}
[data-theme="dark"] .grid-lines { opacity: .30; }
.page { position: relative; z-index: 1; }

/* ---------- 3. 布局 ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: 880px; }
.sec { padding-block: 72px; }
.sec-sm { padding-block: 44px; }
.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.wrapf { flex-wrap: wrap; }
.g4 { gap: 4px; } .g8 { gap: 8px; } .g12 { gap: 12px; } .g16 { gap: 16px; }
.g20 { gap: 20px; } .g24 { gap: 24px; } .g32 { gap: 32px; }
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}.mt56{margin-top:56px}
.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.mb20{margin-bottom:20px}.mb24{margin-bottom:24px}.mb32{margin-bottom:32px}
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.hide { display: none !important; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* 自适应卡片栅格：默认按 290px 自动铺列…
   …但恰好 4 张时改走 4 → 2 → 1 三档，跳过 3 列档，避免末行只剩 1 张（orphanCardsWarning）。
   通用那条必须带 :not(:has(...)) 与 4 张那条互斥，否则 :has() 特异性更高会把 4 张永久钉在 4/2 列。 */
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid-auto:not(:has(> :nth-child(4):last-child)) { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid-auto:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0,1fr)); }
.sidebar-layout { display: grid; grid-template-columns: 236px minmax(0,1fr); gap: 28px; align-items: start; }
/* 正文左 + 目录/侧栏右 */
.layout-side { display: grid; grid-template-columns: minmax(0,1fr) 212px; gap: 34px; align-items: start; }
/* 主区左 + 宽侧栏右（工具运行页、控制台类页面） */
.sidebar-right { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,340px); gap: 28px; align-items: start; }
/* 等分双栏横幅（精选内容、CTA 分栏） */
.banner-2 { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 0; align-items: stretch; }

/* ---------- 4. 排版 ---------- */
h1,h2,h3,h4 { line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.h1 { font-size: clamp(30px, 4.4vw, 52px); }
.h2 { font-size: clamp(24px, 2.6vw, 33px); }
.h3 { font-size: 20px; }
.h4 { font-size: 16px; }
.lead { font-size: 17px; color: var(--text-2); line-height: 1.75; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.sm { font-size: 13.5px; }
.xs { font-size: 12.5px; }
.mono { font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.sec-head .eyebrow { margin-bottom: 6px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-3);
}
.eyebrow::before { content: ""; width: 16px; height: 1px; background: currentColor; opacity: .6; }

/* ---------- 5. 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background var(--dur), border-color var(--dur), backdrop-filter var(--dur);
}
.topbar.is-stuck {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: var(--blur);
  border-bottom-color: var(--line);
}
.topbar .wrap { height: 100%; display: flex; align-items: center; gap: 28px; min-width: 0; }
/* 品牌名允许收缩并在极窄屏省略，保证顶栏不横向溢出、不压住汉堡按钮 */
.brand { display: flex; align-items: center; gap: 11px; font-weight: 750; letter-spacing: -.02em; font-size: 16.5px; flex-shrink: 0; min-width: 0; }
.brand > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px; background: var(--grad);
  display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 800;
  box-shadow: 0 6px 20px -6px rgba(14,159,110,.75);
  position: relative; overflow: hidden;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); animation: sheen 4.5s ease-in-out infinite;
}
@keyframes sheen { 0%,60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.brand small { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-3); letter-spacing: .06em; }
/* 导航：顶栏里唯一可收缩的项。必须设 min-width:0 才允许收缩，
   且链接一律 nowrap —— 否则空间不足时会在「字与字之间」折行，
   渲染成每行两个字（首/页、工具/库），1440px 下就会发生。 */
.nav { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 8px 10px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500;
  color: var(--text-2); transition: color var(--dur), background var(--dur);
  white-space: nowrap; flex-shrink: 0;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a.active { color: var(--text); background: var(--surface-2); }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }


/* 移动端抽屉 */
.burger { display: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--r-sm); place-items: center; color: var(--text-2); background: var(--surface); }
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); z-index: 90;
  background: var(--bg-elev); border-left: 1px solid var(--line); padding: 20px;
  transform: translateX(101%); transition: transform .34s var(--ease-out);
  display: flex; flex-direction: column; gap: 6px; overflow-y: auto;
}
.drawer.open { transform: none; }
.drawer a { padding: 12px 14px; border-radius: var(--r-sm); color: var(--text-2); font-weight: 500; }
.drawer a:hover, .drawer a.active { background: var(--surface-2); color: var(--text); }
.scrim {
  position: fixed; inset: 0; z-index: 80; background: rgba(3,6,14,.6);
  backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity var(--dur);
}
.scrim.open { opacity: 1; pointer-events: auto; }

/* ---------- 6. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 17px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .18s var(--ease), box-shadow var(--dur), background var(--dur), border-color var(--dur), color var(--dur);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 24px -12px rgba(14,159,110,.85); }
.btn-primary:hover { box-shadow: 0 14px 34px -10px rgba(14,159,110,.9); transform: translateY(-1px); }
.btn-ghost { color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-outline { border-color: var(--line-strong); color: var(--text); background: var(--surface); }
.btn-outline:hover { border-color: var(--brand-line); background: var(--surface-2); }
.btn-soft { background: var(--brand-soft); color: var(--brand-3); border-color: var(--brand-line); }
.btn-soft:hover { background: rgba(14,159,110,.16); }
[data-theme="dark"] .btn-soft { color: #6EE7B7; }
.btn-danger { background: var(--danger-soft); color: #BE123C; border-color: rgba(244,63,94,.3); }
[data-theme="dark"] .btn-danger { color: #FDA4AF; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-xs); }
.btn-lg { height: 50px; padding: 0 26px; font-size: 15.5px; border-radius: var(--r); }
.btn-block { width: 100%; }
/* 图标按钮：必须显式居中。缺 display:grid 时内部 <svg> 会按 inline 基线对齐，
   视觉上偏下偏左（这是实际出现过的问题，勿删 place-items）。 */
.btn-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--text-2); background: var(--surface); }
.btn-icon:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-2); }
.btn .i { width: 16px; height: 16px; flex-shrink: 0; }

/* 图标基类（内联 SVG 描边风格） */
.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.i-sm { width: 15px; height: 15px; }
.i-lg { width: 22px; height: 22px; }

/* ---------- 7. 表单 ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.label .req { color: var(--danger); margin-left: 3px; }
.input, .select, .textarea {
  width: 100%; height: 42px; padding: 0 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); font-size: 14px; transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.textarea { height: auto; min-height: 108px; padding: 11px 13px; resize: vertical; line-height: 1.65; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--bg-soft);
}
.select { appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8A82' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}
.hint { font-size: 12.5px; color: var(--text-3); }
.input-group { position: relative; display: flex; align-items: center; }
.input-group .i { position: absolute; left: 13px; color: var(--text-3); pointer-events: none; }
.input-group .input { padding-left: 40px; }

/* 开关 */
.switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--line); transition: background var(--dur); }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .24s var(--ease-out); box-shadow: var(--sh-1); }
.switch input:checked + span { background: var(--grad); border-color: transparent; }
.switch input:checked + span::after { transform: translateX(18px); }

/* 分段控件 */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 550; color: var(--text-3); transition: all var(--dur); }
.seg button:hover { color: var(--text-2); }
.seg button.active { background: var(--surface-3); color: var(--text); box-shadow: var(--sh-1); }

/* 标签 chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 13px; border-radius: var(--r-full);
  font-size: 13px; font-weight: 550; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--line);
  cursor: pointer; transition: all var(--dur); white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); }
.chip.active { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 8px 20px -10px rgba(14,159,110,.75); }
.chip .num { font-size: 11.5px; opacity: .7; }

/* 徽章 / 标签 —— 统一用 min-height + 上下内边距，窄容器里文字换行也不会被裁掉 */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 22px; padding: 2px 9px; border-radius: var(--r-xs);
  font-size: 11.5px; font-weight: 650; letter-spacing: .02em; line-height: 1.5;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line);
}
.badge-brand { background: var(--brand-soft); color: var(--brand-3); border-color: var(--brand-line); }
.badge-ok { background: var(--ok-soft); color: #0B7A53; border-color: rgba(14,159,110,.30); }
.badge-warn { background: var(--warn-soft); color: #B45309; border-color: rgba(245,158,11,.32); }
.badge-danger { background: var(--danger-soft); color: #BE123C; border-color: rgba(244,63,94,.30); }
[data-theme="dark"] .badge-brand { color: #6EE7B7; }
[data-theme="dark"] .badge-ok { color: #6EE7B7; }
[data-theme="dark"] .badge-warn { color: #FCD34D; }
[data-theme="dark"] .badge-danger { color: #FDA4AF; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.dot-live { animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* AI 生成内容显式标识 —— 《人工智能生成合成内容标识办法》要求可被用户明显感知。
   亮色底改用深青字 + 淡青底 + 描边（深青 #0E7490 在 #F4F6F2 上对比度约 5.1:1），
   且不得与普通徽章混用。 */
.ai-label {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 21px; padding: 2px 8px; border-radius: var(--r-xs);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.5;
  color: #0E7490; background: rgba(14, 165, 233, .10);
  border: 1px solid rgba(14, 165, 233, .35); white-space: nowrap;
}
.ai-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
[data-theme="dark"] .ai-label { color: #67E8F9; background: rgba(34, 211, 238, .13); border-color: rgba(34, 211, 238, .34); }
/* 隐式标识说明条（导出文件中已写入元数据标识） */
.meta-note {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  font-size: 12.4px; color: var(--text-2); background: var(--surface-2);
}
.meta-note .i { margin-top: 1px; color: var(--brand-3); }

.tag { font-size: 12px; color: var(--text-3); padding: 2px 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid transparent; }
.tag:hover { color: var(--text-2); border-color: var(--line); }

/* ---------- 8. 卡片 ---------- */
.card {
  position: relative; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  padding: 20px; transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur), background var(--dur);
}
.card-hover:hover { transform: translateY(-3px); border-color: var(--brand-line); box-shadow: var(--sh-2); background: var(--surface-2); }
.glass { background: var(--surface); backdrop-filter: var(--blur); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel-pad { padding: 22px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.panel-body { padding: 20px; }

/* 工具卡 */
.tool-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.tool-top { display: flex; gap: 13px; align-items: flex-start; }
.tool-logo {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 19px; font-weight: 800; color: #fff;
  background: var(--grad); box-shadow: var(--sh-2); position: relative; overflow: hidden;
}
.tool-logo.alt-2 { background: linear-gradient(135deg,#f97316,#f43f5e); }
.tool-logo.alt-3 { background: linear-gradient(135deg,#0E9F6E,#14B8A6); }
.tool-logo.alt-4 { background: linear-gradient(135deg,#0EA5E9,#0E9F6E); }
.tool-logo.alt-5 { background: linear-gradient(135deg,#0EA5E9,#0369A1); }
.tool-logo.alt-6 { background: linear-gradient(135deg,#64748b,#334155); }
.tool-name { font-size: 15.5px; font-weight: 680; letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* 绝对定位的收藏按钮落在卡片右上角：给标题留出尾部空间，任何宽度下都不被压住文字 */
.tool-card .tool-top .grow { padding-right: 32px; }
.tool-desc {
  font-size: 13.4px; color: var(--text-2); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tool-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 13px; border-top: 1px solid var(--line); margin-top: auto; }
.tool-metric { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-3); }
.fav {
  position: absolute; top: 15px; right: 15px; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 9px; color: var(--text-3);
  opacity: 0; transform: scale(.9); transition: all var(--dur);
}
.tool-card:hover .fav { opacity: 1; transform: none; }
.fav:hover { background: var(--surface-3); color: var(--text); }
.fav.on { opacity: 1; color: #fbbf24; }
.fav.on .i { fill: currentColor; }

/* 列表视图 */
.list-view { display: flex; flex-direction: column; gap: 10px; }
.list-view .tool-card { flex-direction: row; align-items: center; gap: 16px; padding: 14px 18px; }
.list-view .tool-top { flex: 1; align-items: center; min-width: 0; }
.list-view .tool-logo { width: 40px; height: 40px; border-radius: 11px; font-size: 16px; }
.list-view .tool-desc { -webkit-line-clamp: 1; margin-top: 2px; }
.list-view .tool-foot { border: 0; padding: 0; margin: 0; gap: 20px; flex-shrink: 0; }
.list-view .tool-tags, .list-view .list-hide { display: none; }
.list-view .fav { position: static; opacity: 1; transform: none; }

/* 统计卡 */
.stat { padding: 18px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.stat-num { font-size: 27px; font-weight: 750; letter-spacing: -.03em; line-height: 1.2; }
.stat-label { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.stat-trend { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.stat-trend .i { width: 13px; height: 13px; }
.trend-up { color: #0B7A53; } .trend-down { color: #BE123C; }
[data-theme="dark"] .trend-up { color: #34D399; } [data-theme="dark"] .trend-down { color: #FB7185; }

/* 定价卡 */
.plan { position: relative; padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.plan.featured { border-color: var(--brand-line); box-shadow: var(--glow); background: linear-gradient(180deg, var(--brand-soft), transparent 60%), var(--surface); }
.plan.featured::before {
  content: "最受欢迎"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  padding: 3px 12px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: #fff;
  background: var(--grad); box-shadow: 0 6px 18px -6px rgba(14,159,110,.8); white-space: nowrap;
}
.price { font-size: 38px; font-weight: 780; letter-spacing: -.04em; line-height: 1; }
.price small { font-size: 14px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.plan ul { display: flex; flex-direction: column; gap: 10px; }
.plan li { display: flex; gap: 9px; font-size: 13.6px; color: var(--text-2); }
.plan li .i { color: var(--ok); margin-top: 3px; }
.plan li.off { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.plan li.off .i { color: var(--text-3); }

/* 文章卡 */
.art-card { display: flex; flex-direction: column; gap: 12px; padding: 0; overflow: hidden; }
.art-cover { min-height: 156px; background: var(--grad-soft); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.art-cover::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 22% 30%, rgba(14,159,110,.28), transparent 45%),
                    radial-gradient(circle at 78% 70%, rgba(14,165,233,.22), transparent 45%);
}
.art-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.art-title { font-size: 15.5px; font-weight: 660; line-height: 1.5; }
.art-card:hover .art-title { color: var(--brand-3); }

/* ---------- 9. Hero ---------- */
.hero { position: relative; padding: 76px 0 56px; text-align: center; }
.hero h1 { max-width: 900px; margin-inline: auto; }
.hero .lead { max-width: 660px; margin: 20px auto 0; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 3px 6px 3px 12px;
  border-radius: 99px; background: var(--surface); border: 1px solid var(--line);
  font-size: 12.8px; color: var(--text-2); backdrop-filter: var(--blur);
  transition: border-color var(--dur);
}
.hero-badge:hover { border-color: var(--brand-line); }
.hero-badge b { color: var(--text); font-weight: 620; }
.hero-badge .pill-new { min-height: 22px; padding: 2px 9px; border-radius: 99px; background: var(--grad); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; line-height: 1.4; }

.big-search { position: relative; max-width: 660px; margin: 30px auto 0; }
.big-search .input-group .input { height: 60px; border-radius: var(--r-full); padding-left: 52px; padding-right: 132px; font-size: 15.5px; background: var(--surface); backdrop-filter: var(--blur); }
.big-search .input-group .i { left: 20px; width: 20px; height: 20px; }
.big-search .go { position: absolute; right: 7px; top: 7px; height: 46px; border-radius: var(--r-full); padding: 0 22px; }
.suggest {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 40;
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: var(--sh-3); padding: 8px; text-align: left; overflow: hidden;
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: all .2s var(--ease-out);
}
.suggest.open { opacity: 1; transform: none; pointer-events: auto; }
.suggest-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--dur); }
.suggest-item:hover, .suggest-item.active { background: var(--surface-2); }
.suggest-item .tool-logo { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.suggest-head { padding: 10px 11px 4px; font-size: 11.5px; color: var(--text-3); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.hot-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.hot-words .tag { cursor: pointer; padding: 4px 11px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); transition: all var(--dur); }
.hot-words .tag:hover { color: var(--text); border-color: var(--brand-line); transform: translateY(-1px); }

/* 数据条 */
.trust { display: flex; flex-wrap: wrap; gap: 34px; justify-content: center; margin-top: 46px; }
.trust-item { text-align: center; }
.trust-item .stat-num { font-size: 24px; }

/* ---------- 10. 侧栏 ---------- */
.side-nav { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 4px; }
.side-title { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 14px 12px 6px; }
.side-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13.8px; font-weight: 520; color: var(--text-2); cursor: pointer;
  transition: all var(--dur); border: 1px solid transparent;
}
.side-item:hover { background: var(--surface-2); color: var(--text); }
.side-item.active { background: var(--brand-soft); color: var(--text); border-color: var(--brand-line); }
.side-item .num { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.side-item.active .num { color: var(--brand-3); }

/* 筛选栏 */
.filterbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
  position: sticky; top: calc(var(--header-h) + 8px); z-index: 30; backdrop-filter: var(--blur);
}
.filterbar .count { font-size: 13px; color: var(--text-3); }
.filterbar .count b { color: var(--text); }

/* ---------- 11. 模态 ---------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
  background: rgba(3,6,14,.68); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity var(--dur);
}
.modal-scrim.open { opacity: 1; pointer-events: auto; }
.modal {
  width: 100%; max-width: 440px; background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: 28px;
  transform: translateY(14px) scale(.97); transition: transform .3s var(--ease-out);
  max-height: 90vh; overflow-y: auto;
}
.modal-scrim.open .modal { transform: none; }
.modal-lg { max-width: 620px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.modal-close { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--text-3); }
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 12.5px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.oauth-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.oauth {
  height: 44px; display: grid; place-items: center; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); transition: all var(--dur); font-size: 13px; color: var(--text-2);
}
.oauth:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--text); }

/* ---------- 12. Toast ---------- */
.toasts { position: fixed; bottom: 26px; right: 26px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  display: flex; align-items: center; gap: 11px; min-width: 260px; max-width: 380px;
  padding: 13px 16px; border-radius: var(--r); background: var(--bg-elev);
  border: 1px solid var(--line-strong); box-shadow: var(--sh-3); font-size: 13.6px;
  animation: toastIn .34s var(--ease-out);
}
.toast.out { animation: toastOut .26s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px) scale(.96); } }
.toast .i { flex-shrink: 0; }
.toast.ok .i { color: var(--ok); } .toast.warn .i { color: var(--warn); } .toast.err .i { color: var(--danger); }

/* ---------- 13. 表格 / 列表 ---------- */
.table { font-size: 13.6px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: middle; }
.table tbody tr { transition: background var(--dur); }
.table tbody tr:hover { background: var(--surface); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .strong { color: var(--text); font-weight: 600; }
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }

/* 分页 */
.pager { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 32px; }
.pager button { min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--r-xs); font-size: 13.5px; color: var(--text-2); border: 1px solid transparent; transition: all var(--dur); }
.pager button:hover { background: var(--surface-2); color: var(--text); }
.pager button.active { background: var(--grad); color: #fff; border-color: transparent; }

/* ---------- 14. 对话 / 流式输出 ---------- */
.chat-shell { display: grid; grid-template-columns: 268px minmax(0,1fr); gap: 0; height: calc(100vh - var(--header-h)); border-top: 1px solid var(--line); }
.chat-side { border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; background: var(--surface); }
.chat-main { display: flex; flex-direction: column; min-width: 0; position: relative; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 28px 0 12px; }
.chat-inner { max-width: 800px; margin-inline: auto; padding-inline: 24px; display: flex; flex-direction: column; gap: 26px; }
.msg { display: flex; gap: 14px; animation: msgIn .4s var(--ease-out); }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } }
.avatar { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; }
.avatar.ai { background: var(--grad); box-shadow: 0 6px 18px -8px rgba(14,159,110,.8); }
.avatar.me { background: var(--surface-3); color: var(--text-2); border: 1px solid var(--line); }
.msg-body { flex: 1; min-width: 0; }
.msg-name { font-size: 13.5px; font-weight: 650; display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.msg-text { font-size: 14.6px; line-height: 1.8; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.msg.me .msg-body { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 15px; }
.msg-actions { display: flex; gap: 4px; margin-top: 8px; opacity: 0; transition: opacity var(--dur); }
.msg:hover .msg-actions { opacity: 1; }
.msg-actions button { display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 9px; border-radius: 7px; font-size: 12px; color: var(--text-3); }
.msg-actions button:hover { background: var(--surface-2); color: var(--text); }
.caret { display: inline-block; width: 7px; height: 16px; background: var(--brand-3); vertical-align: -2px; margin-left: 3px; animation: blink .9s steps(2) infinite; border-radius: 1px; }
@keyframes blink { 50% { opacity: 0; } }
.tool-call { margin-top: 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: 9px 12px; font-size: 12.6px; color: var(--text-3); background: var(--surface); }
.tool-call .row-between { gap: 10px; }

.composer { border-top: 1px solid var(--line); padding: 14px 24px 16px; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: var(--blur); }
.composer-inner { max-width: 800px; margin-inline: auto; }
.composer-box { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg-elev); padding: 12px 14px; transition: border-color var(--dur), box-shadow var(--dur); }
.composer-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.composer-box textarea { width: 100%; border: 0; background: none; resize: none; outline: none; min-height: 52px; max-height: 200px; font-size: 14.6px; line-height: 1.7; }
.composer-tools { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.credit-warn { display: flex; align-items: center; gap: 6px; font-size: 12.3px; color: var(--text-3); margin-left: auto; }

/* 控制台式输出 —— 默认（亮色）浅灰底 + 深墨字，深色下才用深底 */
.console { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.8; color: #14201B; max-height: 420px; overflow-y: auto; }
.console .k { color: #0B7A53; } .console .s { color: #1D4ED8; } .console .c { color: #6E847A; }
[data-theme="dark"] .console { background: #08130F; color: #A7F3D0; }
[data-theme="dark"] .console .k { color: #6EE7B7; } [data-theme="dark"] .console .s { color: #7DD3FC; } [data-theme="dark"] .console .c { color: #6E847A; }

/* 进度条 */
.bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width .5s var(--ease-out); }
.steps { display: flex; flex-direction: column; gap: 12px; }
.step { display: flex; align-items: center; gap: 11px; font-size: 13.6px; color: var(--text-3); }
.step .st-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; flex-shrink: 0; font-size: 11px; }
.step .st-dot .i { width: 12px; height: 12px; }
.step.done { color: var(--text-2); } .step.done .st-dot { background: var(--ok); border-color: transparent; color: #06231A; }
.step.now { color: var(--text); } .step.now .st-dot { border-color: var(--brand); color: var(--brand-3); }

/* ---------- 15. 空状态 / 骨架 ---------- */
.empty { text-align: center; padding: 60px 20px; color: var(--text-3); }
.empty .icon-wrap { width: 56px; height: 56px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; margin: 0 auto 16px; color: var(--text-3); }
.skel { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-3) 37%, var(--surface) 63%); background-size: 400% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--r-xs); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- 16. 滚动揭示 ----------
   注意：初始隐藏只在 <html> 带 .js 时生效（由页面 head 内联脚本添加），
   这样即使脚本加载失败，内容也不会永远不可见。 */
.reveal { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .reveal, .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- 17. 页脚 ---------- */
.foot { border-top: 1px solid var(--line); margin-top: 60px; padding: 52px 0 34px; background: var(--bg-soft); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
.foot h5 { font-size: 13px; font-weight: 680; margin-bottom: 14px; }
.foot a { display: block; font-size: 13.4px; color: var(--text-2); padding: 5px 0; transition: color var(--dur); }
.foot a:hover { color: var(--brand-3); }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.8px; color: var(--text-3); }

/* ---------- 18. 杂项 ---------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { opacity: .5; }
.stars { display: inline-flex; gap: 2px; color: #fbbf24; }
.stars .i { width: 14px; height: 14px; fill: currentColor; stroke-width: 1; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs button { position: relative; padding: 11px 16px; font-size: 14px; font-weight: 560; color: var(--text-3); transition: color var(--dur); }
.tabs button:hover { color: var(--text-2); }
.tabs button.active { color: var(--text); }
.tabs button.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--grad); border-radius: 2px; }
.tabpane { display: none; } .tabpane.active { display: block; animation: fadeUp .34s var(--ease-out); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.prose { font-size: 15.4px; line-height: 1.85; color: var(--text-2); }
.prose h2 { font-size: 22px; color: var(--text); margin: 36px 0 12px; }
.prose h3 { font-size: 17px; color: var(--text); margin: 26px 0 10px; }
.prose p { margin: 14px 0; }
.prose ul { margin: 14px 0; padding-left: 20px; list-style: disc; }
.prose li { margin: 6px 0; }
.prose code { background: var(--surface-3); padding: 2px 6px; border-radius: 6px; font-size: 13.4px; color: var(--brand-3); }
.prose pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; overflow-x: auto; margin: 16px 0; }
.prose pre code { background: none; padding: 0; color: #14201B; }
[data-theme="dark"] .prose pre { background: #08130F; }
[data-theme="dark"] .prose pre code { color: #A7F3D0; }
.prose blockquote { border-left: 3px solid var(--brand); padding: 4px 0 4px 16px; margin: 18px 0; color: var(--text-3); background: var(--surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.toc { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 2px; font-size: 13.4px; }
.toc a { padding: 6px 11px; border-left: 2px solid var(--line); color: var(--text-3); transition: all var(--dur); }
.toc a:hover { color: var(--text); }
.toc a.active { color: var(--brand-3); border-left-color: var(--brand); background: var(--brand-soft); }

/* ---------- 19. 资讯 / 媒体频道组件 ---------- */

/* 快讯流 */
.flash-list { display: flex; flex-direction: column; }
.flash-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); transition: background var(--dur); }
.flash-item:last-child { border-bottom: 0; }
.flash-item:hover { background: var(--surface); }
.flash-time {
  flex-shrink: 0; width: 52px; padding-top: 2px;
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; font-weight: 600; color: var(--text-3); letter-spacing: -.01em;
}
.flash-item.hot .flash-time { color: var(--warn); }
.flash-body { flex: 1; min-width: 0; }
.flash-text { font-size: 14.2px; line-height: 1.7; color: var(--text); }
.flash-text b { font-weight: 650; }
.flash-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }

/* 来源徽章：一级信源 vs 二手信源 */
.src-badge {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding: 3px 9px 3px 6px; border-radius: var(--r-xs);
  font-size: 12px; font-weight: 550; color: var(--text-2); line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: all var(--dur); white-space: nowrap;
}
.src-badge:hover { color: var(--text); border-color: var(--line-strong); }
.src-badge .src-dot {
  width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #64748b, #334155);
}
.src-badge.primary { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-3); }
.src-badge.primary .src-dot { background: var(--grad); }
[data-theme="dark"] .src-badge.primary { color: #6EE7B7; }
.src-count { font-size: 11.5px; color: var(--text-3); }

/* 事件聚合卡：多来源 → 一个事件 */
.event-card { display: flex; flex-direction: column; gap: 12px; }
.event-head { display: flex; align-items: flex-start; gap: 12px; }
.event-num {
  flex-shrink: 0; font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--text-3); padding-top: 3px;
}
.event-title { font-size: 15.5px; font-weight: 660; line-height: 1.5; }
.event-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.event-arrow { color: var(--brand-3); font-weight: 700; }
.event-merged {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px dashed var(--line-strong);
  font-size: 12.5px; color: var(--text-3);
}

/* 内容形态：快讯 / 新闻 / 深度 */
.form-badge { display: inline-flex; align-items: center; min-height: 21px; padding: 2px 8px; border-radius: var(--r-xs); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
.form-flash { background: rgba(245,158,11,.12); color: #B45309; border: 1px solid rgba(245,158,11,.32); }
.form-news { background: var(--brand-soft); color: var(--brand-3); border: 1px solid var(--brand-line); }
.form-deep { background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(14,159,110,.14)); color: #0369A1; border: 1px solid rgba(14,165,233,.32); }
[data-theme="dark"] .form-flash { color: #FCD34D; }
[data-theme="dark"] .form-news { color: #6EE7B7; }
[data-theme="dark"] .form-deep { color: #7DD3FC; }

/* 深度稿大卡 */
.deep-card { display: grid; grid-template-columns: 168px minmax(0,1fr); gap: 20px; padding: 20px; align-items: center; }
/* 封面/横幅类容器：用 min-height 而不是 height —— 容器内可能放标题文字，
   固定高度在窄屏会把文字裁掉（clippedText）。 */
.deep-cover { min-height: 118px; border-radius: var(--r); background: var(--grad-soft); border: 1px solid var(--line); position: relative; overflow: hidden; }
.deep-cover::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 28% 34%, rgba(14,159,110,.30), transparent 48%),
                    radial-gradient(circle at 74% 68%, rgba(14,165,233,.24), transparent 48%);
}
.deep-title { font-size: 18px; font-weight: 680; line-height: 1.45; letter-spacing: -.015em; }
.deep-card:hover .deep-title { color: var(--brand-3); }

/* 文章元信息与 AI 署名 */
.article-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-3); }
.ai-byline {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
  font-size: 12.6px; color: var(--text-3);
}
.ai-byline .i { color: var(--brand-3); }

/* 事实清单（详情页的来源与事实区） */
.fact-list { display: flex; flex-direction: column; gap: 10px; }
.fact-item { display: flex; gap: 11px; padding: 11px 13px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); font-size: 13.6px; }
.fact-item .fact-idx {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--brand-3); background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.fact-item.claim { border-style: dashed; }
.fact-item.claim .fact-idx { color: #B45309; background: var(--warn-soft); border-color: rgba(245,158,11,.32); }
[data-theme="dark"] .fact-item.claim .fact-idx { color: #FCD34D; }
.fact-src { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }

/* 正文中的事实引用角标：指向事实清单里的编号 */
.fact-ref {
  display: inline-block; margin-left: 2px; padding: 0 4px;
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px; font-weight: 700; line-height: 1.5; vertical-align: 1px;
  color: #0E7490; background: rgba(14,165,233,.10);
  border: 1px solid rgba(14,165,233,.32); border-radius: 4px; white-space: nowrap;
}
[data-theme="dark"] .fact-ref { color: #67E8F9; background: var(--brand-soft); border-color: var(--brand-line); }

/* 热点榜 */
.rank-list { display: flex; flex-direction: column; }
.rank-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rank-item:last-child { border-bottom: 0; }
.rank-no {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  background: var(--surface-3); color: var(--text-3);
}
.rank-item:nth-child(1) .rank-no { background: linear-gradient(135deg,#f43f5e,#f97316); color: #fff; }
.rank-item:nth-child(2) .rank-no { background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #3b2606; }
.rank-item:nth-child(3) .rank-no { background: linear-gradient(135deg,#0EA5E9,#0E9F6E); color: #fff; }
.rank-title { flex: 1; min-width: 0; font-size: 13.8px; font-weight: 540; }
.rank-heat { font-size: 12px; font-weight: 650; color: var(--warn); }

/* 事件多来源追溯 */
.trace-chain { display: flex; flex-direction: column; gap: 0; }
.trace-node { display: flex; align-items: center; gap: 12px; padding: 10px 0; position: relative; }
.trace-node::before { content: ""; position: absolute; left: 15px; top: 30px; bottom: -6px; width: 1px; background: var(--line-strong); }
.trace-node:last-child::before { display: none; }
.trace-icon { width: 31px; height: 31px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3); }

/* 采集管线示意 */
.pipe { display: flex; flex-direction: column; gap: 0; }
.pipe-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pipe-row:last-child { border-bottom: 0; }
.pipe-stage { flex-shrink: 0; width: 96px; font-size: 12.5px; font-weight: 620; color: var(--text); }
.pipe-model { flex-shrink: 0; font-size: 11.5px; }
.pipe-note { flex: 1; font-size: 12.6px; color: var(--text-3); text-align: right; }

/* ---------- 20. 响应式 ---------- */
/* 注：1081–1280 档曾有一条「收起品牌副标题」的规则，用于给顶栏嵌入搜索框
   （.quick-search，宽 180px）腾空间。该嵌入搜索框已按品牌方要求**删除**，
   腾出的空间已足够，故该规则一并撤销 —— 品牌副标题在 ≥1081px 全程显示。
   下限仍是 1080px：≤1080 顶栏导航已收进汉堡抽屉。 */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* 4 张的卡片组在 1080 以下直接降到 2 列（跳过 3 列档） */
  .grid-auto:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .sidebar-layout { grid-template-columns: 1fr; }
  .sidebar-right { grid-template-columns: 1fr; }
  .layout-side { grid-template-columns: 1fr; gap: 22px; }
  /* 窄屏下目录转为横向可滚动条，置于正文之前 */
  .layout-side .toc { flex-direction: row; overflow-x: auto; position: static; order: -1; gap: 6px; padding-bottom: 8px; }
  .layout-side .toc a { white-space: nowrap; border-left: 0; border-bottom: 2px solid var(--line); border-radius: 6px 6px 0 0; }
  .layout-side .toc a.active { border-left: 0; border-bottom-color: var(--brand); }
  .layout-side .toc > .xs { display: none; }
  .side-nav { flex-direction: row; overflow-x: auto; position: static; padding-bottom: 6px; }
  .side-item { white-space: nowrap; } .side-title { display: none; }
  .chat-shell { grid-template-columns: 1fr; } .chat-side { display: none; }
  /* 761–1080：9 个导航项 + 品牌 + 嵌入搜索约需 927px，而 768px 视口内宽只有 720px，
     会把导航挤成两行。改为提前收起导航、用汉堡进抽屉；**嵌入式搜索保留**
     （平板仍能直接搜，否则这一档完全没有搜索入口）。
     登录/免费开始同样收进抽屉，避免横向溢出并压住相邻元素。 */
  .nav { display: none; }
  .burger { display: grid; }
  .topbar-actions .btn { display: none; }
}
@media (max-width: 760px) {
  .wrap { padding-inline: 16px; }
  .banner-2 { grid-template-columns: 1fr; }
  .sec { padding-block: 52px; }
  .nav, .topbar-actions .hide-sm { display: none; }
  /* 窄屏收起品牌副标题：避免顶栏品牌 + 汉堡按钮横向溢出，压到相邻元素 */
  .brand small { display: none; }
  .brand { font-size: 15.5px; flex-shrink: 1; }
  .burger { display: grid; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .grid-auto:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
  .hero { padding-top: 48px; }
  .big-search .input-group .input { padding-right: 20px; height: 54px; }
  .big-search .go { display: none; }
  .list-view .tool-card { flex-wrap: wrap; }
  .list-view .tool-foot { width: 100%; justify-content: flex-start; }
  .toasts { left: 16px; right: 16px; bottom: 16px; }
  .trust { gap: 22px; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  /* 移动端页脚：三列并排 —— 产品（左）/ 内容（中）/ 关于（右），文字整体左对齐。
   品牌块独占整行放在上方，避免把三列挤成三窄条。
   注意 .page 在 ≤760 有 padding-left:60px（给左侧图标栏让位），
   故 375 视口下每列约 87px，4 字标签（选型指南 / 服务条款）仍放得下。 */
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 8px; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .foot h5, .foot a { text-align: left; }
  /* 移动端页脚底部：竖排 + 不折行。
     512px 实测「津ICP备2022007949号-1」原会被折成 3 行、数字被拆断，
     且 5 项备案信息挤在一行。改为纵向排列、逐项 nowrap。 */
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; padding-top: 18px; }
  .foot-bottom > span { width: 100%; }
  .foot-bottom .row { flex-wrap: wrap; gap: 8px 14px; row-gap: 8px; }
  .foot-bottom a, .foot-bottom span { white-space: nowrap; }
  .deep-card { grid-template-columns: 1fr; }
  .deep-cover { min-height: 142px; }
  .flash-time { width: 44px; }
  .pipe-row { flex-wrap: wrap; }
  .pipe-note { text-align: left; flex-basis: 100%; }
  .event-head { flex-wrap: wrap; }
}

/* ---------- 21. 移动端：搜索优先顶栏 + 小程序引导 ----------
   产品方向：移动端只保留「搜索入口」，AI 工具与站内执行的引导到微信小程序。
   约定：移动端专用组件（.mp-cta / .mp-cta-qr）在 >760px 一律 display:none，宽度贡献恒为 0。
   例外：.mp-search-panel 改由两端共用 —— 桌面端按 ⌘K 弹出（顶栏嵌入搜索框已移除，改为纯快捷键唤起），
   移动端不再弹它（顶栏已是真输入框，见第 25 节）。
   移动端顶栏预算：[logo 方块 34] [搜索胶囊 flex:1] [汉堡 38]，间距 10×2，见 ≤760 块。 */
.mp-cta, .mp-cta-qr { display: none; }

/* 全屏站内搜索浮层：默认隐藏；.open 时两端都能弹出（移动端 / 桌面端 ⌘K） */
.mp-search-panel {
  display: none; position: fixed; inset: 0; z-index: 120;
  flex-direction: column; background: var(--bg);
  padding-top: env(safe-area-inset-top);
}
.mp-search-panel.open { display: flex; animation: fadeUp .24s var(--ease-out); }
.mp-search-bar {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 12px 16px; background: var(--bg-elev); border-bottom: 1px solid var(--line);
}
.mp-search-field { display: block; position: relative; flex: 1 1 auto; min-width: 0; }
.mp-search-field > .i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none;
}
.mp-search-field .input { padding-left: 38px; }
.mp-search-body {
  display: block; flex: 1; overflow-y: auto;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
}
.mp-search-body .chips { margin-top: 10px; }
.mp-search-body .chip { text-align: left; }

@media (max-width: 760px) {
  /* --- 顶栏：搜索优先。导航、内嵌搜索、登录注册、主题切换全部收起 --- */
  .topbar .wrap { gap: 10px; }
  /* logo 只留方块（品牌名在抽屉与页脚保留），给搜索框让出宽度 */
  .topbar .brand > span:last-child { display: none; }
  .topbar-actions { flex: 1; margin-left: 0; gap: 10px; }
  .topbar-actions .btn-icon { display: none; }
  /* 移动端主题跟随系统（app.js 在窄屏下按 prefers-color-scheme 初始化），不再提供手动切换 */
  .drawer [data-theme-toggle] { display: none; }

  /* --- 小程序引导卡（工具运行页 / 工具详情页，桌面端隐藏） --- */
  .mp-cta {
    display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px;
    border-radius: var(--r); border: 1px solid var(--brand-line);
    background: linear-gradient(180deg, var(--brand-soft), transparent 70%), var(--surface);
  }
  .mp-cta-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; flex-shrink: 0; }
  .mp-cta-qr .i {
    width: 40px; height: 40px; padding: 6px; color: var(--text-2);
    background: var(--bg-elev); border: 1px dashed var(--line-strong); border-radius: var(--r-xs);
  }

  /* 移动端隐藏付费执行区（表单仍保留在引导卡之后，便于查看入参） */
  .mp-hide-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-search-panel.open { animation: none; }
}

/* ---------- 22. 右下角对话悬浮件 ----------
   产品要求：右下角常驻一个对话小图标；PC 端点击弹出窗口，移动端直接打开全屏对话框；
   可在窗口内选择模型。
   合规约束（见 docs/拟人化互动服务合规适配-v1.md）：
     - 接口来源声明必须常驻可见、不可折叠、不可关闭
     - AI 输出必须带 .ai-label 显式标识
     - 不做角色扮演 / 情感陪伴 / 人格化：头像只用「AI」中性标识，不给 AI 起人名
   与 .toasts 的位置冲突：toasts 上移到 92px，避免盖住悬浮按钮。 */
.toasts { bottom: 92px; }

.chat-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 92;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad); color: #fff; border: 0;
  box-shadow: 0 10px 28px -10px rgba(14, 159, 110, .85), var(--sh-2);
  transition: transform var(--dur), box-shadow var(--dur);
}
.chat-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 34px -12px rgba(14, 159, 110, .95), var(--sh-3); }
.chat-fab:active { transform: translateY(0) scale(.98); }
.chat-fab .i { width: 24px; height: 24px; }
.chat-fab[aria-expanded="true"] { background: var(--surface-3); color: var(--text); box-shadow: var(--sh-1); }
.chat-fab-dot {
  position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--bg);
}

.chat-pop {
  /* chat-pop 的层叠顺序修正：原为 94，会被移动端左侧导航栏（110）、搜索面板（120）、
     登录弹窗（100）依次盖住 —— 表现为对话框左侧被导航栏遮掉一块。
     全屏模态（移动端 inset:0）应当盖住所有常驻 UI，故提到 130（toast 之下）。 */
  position: fixed; right: 24px; bottom: 92px; z-index: 130;
  width: 384px; height: 560px; max-height: calc(100vh - 130px);
  display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none;
  transition: opacity var(--dur), transform .3s var(--ease-out);
}
.chat-pop.open { opacity: 1; transform: none; pointer-events: auto; }

.chat-pop-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg-soft);
  flex-shrink: 0;
}
.chat-pop-model { height: 30px; width: 132px; font-size: 12.5px; padding: 0 26px 0 10px; border-radius: var(--r-xs); background-position: right 8px center; }
.chat-pop-notice {
  flex-shrink: 0; padding: 9px 14px; font-size: 11.5px; line-height: 1.6; color: var(--text-3);
  background: var(--brand-soft); border-bottom: 1px solid var(--brand-line);
}
.chat-pop-notice b { color: var(--text-2); font-weight: 650; }

.chat-pop-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.chat-pop-body .msg { gap: 10px; }
.chat-pop-body .avatar { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
.chat-pop-body .msg-text { font-size: 13.6px; line-height: 1.75; }
.chat-pop-body .msg-actions { margin-top: 6px; opacity: 1; }
.chat-pop-body .msg-actions button { height: 24px; font-size: 11.5px; padding: 0 7px; }

.chat-pop-foot { flex-shrink: 0; border-top: 1px solid var(--line); padding: 10px 12px 12px; background: var(--bg-soft); }
.chat-pop-box { border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg-elev); padding: 9px 11px; transition: border-color var(--dur), box-shadow var(--dur); }
.chat-pop-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.chat-pop-box textarea { width: 100%; border: 0; background: none; resize: none; outline: none; min-height: 40px; max-height: 110px; font-size: 13.6px; line-height: 1.7; color: var(--text); }
.chat-pop-tools { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

/* 移动端：直接打开全屏对话框（不改页面，避免打断操作） */
@media (max-width: 760px) {
  .chat-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .chat-fab .i { width: 22px; height: 22px; }
  .chat-pop {
    right: 0; left: 0; bottom: 0; top: 0;
    width: auto; height: auto; max-height: none;
    border: 0; border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .chat-pop-body { padding: 16px 14px; }
  .chat-pop-foot textarea { font-size: 16px; } /* 避免 iOS 聚焦时自动放大 */
}

/* ---------- 23. 移动端左侧图标导航栏 ----------
   需求：移动端改为左侧导航，只显示图标；点击「总菜单」后展开文字+图标，
   同时整站背景变暗，把导航条凸显出来便于点击。
   实现：<=760px 固定左侧图标栏 + 展开态 + 遮罩；>760px 全部隐藏（桌面端不受影响）。
   注意：.page 加左内边距让内容让位；.topbar 是 .page 内的 sticky 元素，
   会自动跟着让位，不需要单独处理。 */
.rail-scrim, .side-rail { display: none; }

@media (max-width: 760px) {
  .rail-scrim {
    display: block; position: fixed; inset: 0; z-index: 105;
    background: rgba(10, 22, 17, .5); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .26s var(--dur);
  }
  .rail-scrim.open { opacity: 1; pointer-events: auto; }

  .side-rail {
    display: flex; flex-direction: column; gap: 3px;
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 110;
    width: 60px; padding: 10px 9px calc(12px + env(safe-area-inset-bottom));
    background: var(--bg-elev); border-right: 1px solid var(--line);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    transition: width .26s var(--ease-out), box-shadow .26s var(--dur);
  }
  .side-rail.open { width: 240px; box-shadow: var(--sh-3); }

  .side-rail-top { display: flex; align-items: center; gap: 12px; padding: 2px 0 12px; flex-shrink: 0; }
  .rail-toggle {
    width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); transition: background var(--dur), border-color var(--dur);
  }
  .rail-toggle:active { background: var(--surface-2); }
  .side-rail.open .rail-toggle { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-3); }
  .rail-label {
    font-size: 14.5px; font-weight: 700; white-space: nowrap; color: var(--text);
    opacity: 0; transition: opacity .18s var(--dur);
  }
  .side-rail.open .rail-label { opacity: 1; }

  .rail-item {
    display: flex; align-items: center; gap: 13px; height: 48px; padding: 0 11px;
    border-radius: var(--r-sm); color: var(--text-2); flex-shrink: 0;
    transition: background var(--dur), color var(--dur);
  }
  .rail-item .i { width: 22px; height: 22px; flex-shrink: 0; }
  .rail-item span { font-size: 14.5px; white-space: nowrap; opacity: 0; transition: opacity .18s var(--dur); }
  .side-rail.open .rail-item span { opacity: 1; }
  /* 折叠态：图标居中。
     注意 gap 必须归零、文字必须不占宽 —— 否则 opacity:0 的文字仍参与布局，
     flex 行宽超出容器后居中会把图标挤出左边界（实际出现过图标被裁的问题）。 */
  .side-rail:not(.open) .rail-item { justify-content: center; padding: 0; gap: 0; }
  .side-rail:not(.open) .rail-item span { width: 0; overflow: hidden; }
  .side-rail:not(.open) .rail-label { width: 0; overflow: hidden; }
  .rail-item.active { background: var(--brand-soft); color: var(--brand-3); font-weight: 650; }
  .rail-item:active { background: var(--surface-2); }

  .rail-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
  .rail-foot .btn { white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s var(--dur); }
  .side-rail.open .rail-foot .btn { opacity: 1; pointer-events: auto; }
  .rail-foot .rail-mini { display: grid; place-items: center; height: 42px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); }
  .side-rail:not(.open) .rail-foot .btn { display: none; }
  .side-rail:not(.open) .rail-foot .rail-mini { display: grid; }
  .side-rail.open .rail-foot .rail-mini { display: none; }

  /* 内容让位给图标栏 */
  .page { padding-left: 60px; }
  /* 左侧栏已承载导航，移动端不再需要汉堡抽屉 */
  .burger { display: none !important; }
}

/* ---------- 24. 分类胶囊栏（cat-bar）+ 统计行对齐参考样式 ----------
   来源：品牌方移动端视觉参考（上半部分统计行 / 下半部分可横向滚动的分类胶囊栏）。
   本节全部为新增类，不改动既有的 .chips / .chip / .trust 规则（那些被全站 18 页共用）。
   仅在本节内追加修饰类（.c-green / .c-blue / .c-orange）与必要的窄屏覆盖。 */

/* --- 24.1 统计行：数字颜色循环 绿 → 蓝 → 橙 + 尺寸对齐参考 --- */
.stat-num.c-green { color: #0E9F6E; }
.stat-num.c-blue { color: #0EA5E9; }
.stat-num.c-orange { color: #F59E0B; }
.stat-num.c-purple { color: #8B5CF6; }
/* 参考图数字约 30px、字重 700。这里用「30px + 高字重」覆盖既有 24px，
   但不再声明 font-weight，避免与基础 .stat-num 的 750 冲突并保持字重统一。 */
.trust .stat-num { font-size: 30px; letter-spacing: -.03em; }
.trust-item .stat-label { font-size: 13px; margin-top: 10px; }
[data-theme="dark"] .stat-num.c-green { color: #34D399; }
[data-theme="dark"] .stat-num.c-blue { color: #38BDF8; }
[data-theme="dark"] .stat-num.c-orange { color: #FBBF24; }
  .stat-num.c-purple { color: #A78BFA; }

/* --- 24.2 分类胶囊栏 ---
   结构：.cat-bar > .cat-bar-scroll > (a|button).cat-bar-item > svg.i.i-sm + 名称 + .cat-bar-num */
.cat-bar {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--sh-1);
}
/* 横向滚动容器。刻意保留并美化可视滚动条：
   横向溢出是本组件唯一的新交互，iOS 上滚动条会自动隐藏，
   桌面/安卓/headless 上必须留下「可左右滑动」的可见暗示。 */
.cat-bar-scroll {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 3px;
}
.cat-bar-scroll::-webkit-scrollbar { height: 5px; }
.cat-bar-scroll::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 3px; }
.cat-bar-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.cat-bar-scroll::-webkit-scrollbar-thumb:hover { background: var(--brand-line); }

/* 胶囊：图标 + 名称 + 数字；高度 40px，圆角 10px，左右内边距 12px */
.cat-bar-item {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 0 0 auto; flex-shrink: 0; white-space: nowrap;
  height: 40px; padding: 0 12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 500; color: var(--text-2);
  background: transparent; border: 1px solid transparent;
  cursor: pointer; scroll-snap-align: start;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.cat-bar-item .i { flex-shrink: 0; color: currentColor; }
.cat-bar-item:hover { background: var(--surface-2); color: var(--text); }
/* 选中态：浅绿底 + 绿字 + 字重 600（不是实心绿底白字 —— 与 .chip.active 刻意区分） */
.cat-bar-item.active {
  background: var(--brand-soft);
  color: var(--brand-3);
  font-weight: 600;
  border-color: var(--brand-line);
}
.cat-bar-item.active:hover { background: var(--brand-soft); color: var(--brand-3); }
/* 数字：比名称浅，本体不是徽章 */
.cat-bar-num { font-size: 14px; font-weight: 400; color: var(--text-3); transition: color var(--dur); }
.cat-bar-item.active .cat-bar-num { color: var(--brand-3); }
.cat-bar-item:hover .cat-bar-num { color: var(--text-2); }

/* 分类栏嵌进 .filterbar 等横向 flex 行时占满整行 */
.filterbar .cat-bar { flex: 1 1 100%; min-width: 0; }

/* --- 24.3 ≤760px：贴边 + 内边距收窄（参考图即移动端观感） --- */
@media (max-width: 760px) {
  .cat-bar { padding: 6px; border-radius: 13px; }
  .cat-bar-scroll { gap: 4px; }
  .cat-bar-item { height: 38px; padding: 0 11px; font-size: 14px; }
  .cat-bar-num { font-size: 13.5px; }
  /* 统计行：实测 512px 下 flex-wrap 排成 4+2，第二行仅两项且与首行不共列（视觉错位）。
     改 3 列定宽网格后 6 项正好 3+3 两行等宽，无末行孤儿。 */
  .trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; }
  .trust .stat-num { font-size: 28px; }
  /* 负外边距抵消 .wrap 的 16px 内边距，让胶囊卡片贴到内容区两侧。
     注意：不能写 .wrap > .filterbar > .cat-bar —— tools.html 里 .filterbar 的父级是
     .sidebar-layout > .grow（.wrap 的孙级），该选择器永远匹配不到（已实测 el.matches() 为 false）。 */
  .wrap > .cat-bar { margin-inline: -16px; }
  .filterbar > .cat-bar { margin-inline: -14px; }
  .mp-search-body .cat-bar { margin-inline: -16px; }
}

/* --- 24.4 尊重 prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .cat-bar-scroll { scroll-behavior: auto; scroll-snap-type: none; }
  .cat-bar-item, .cat-bar-num { transition: none; }
}

/* ---------- 25. 移动端顶栏：真输入搜索胶囊（品牌方视觉参考） ----------
   结构：[放大镜 20px] [input flex:1] [「搜索」实心渐变按钮]，整体一个白色胶囊。
   参考稿要点：白底 + 极淡边框 + 柔和阴影；绿色按钮内嵌贴右，不浮在胶囊外。
   只在 ≤760px 出现。桌面端不再有嵌入搜索框，统一按 ⌘K 唤起搜索浮层。
   输入框字号锁 16px：iOS Safari 对 <16px 的输入框聚焦时会自动放大整页。
   胶囊刻意不写 overflow:hidden —— 建议下拉 .suggest 是它的绝对定位子元素，会被裁掉。 */
.mp-searchbar { display: none; }

@media (max-width: 760px) {
  .mp-searchbar {
    display: flex; align-items: center; gap: 8px;
    position: relative;                 /* .suggest 建议下拉的定位基准 */
    flex: 1 1 auto; min-width: 0;       /* 顶栏里唯一可伸缩项，吃掉 logo 与汉堡之间的全部余量 */
    height: 46px; padding: 0 6px 0 14px;
    border: 1px solid var(--line); border-radius: var(--r-full);
    background: var(--surface); box-shadow: var(--sh-1);
    transition: border-color var(--dur), box-shadow var(--dur);
  }
  /* 放大镜：覆盖 .i-sm 的 15px，对齐参考稿的 20px 描边图标 */
  .mp-searchbar > .i { width: 20px; height: 20px; color: var(--text-3); }
  .mp-searchbar-input {
    flex: 1; min-width: 0; height: 100%;
    appearance: none; -webkit-appearance: none;
    border: 0; background: none; outline: none; color: var(--text);
    font-family: inherit; font-size: 16px;
  }
  .mp-searchbar-input::placeholder { color: var(--text-3); }
  /* iOS 原生的搜索清除叉会顶掉右侧按钮的视觉节奏，去掉 */
  .mp-searchbar-input::-webkit-search-cancel-button,
  .mp-searchbar-input::-webkit-search-decoration { appearance: none; -webkit-appearance: none; display: none; }
  .mp-searchbar-go {
    flex-shrink: 0; height: 36px; padding: 0 16px; border: 0; border-radius: 10px;
    background: var(--grad); color: #fff; font-weight: 650; font-size: 14px;
    font-family: inherit; cursor: pointer;
    box-shadow: 0 6px 16px -8px rgba(14,159,110,.7);
    transition: filter var(--dur);
  }
  .mp-searchbar-go:active { filter: brightness(.94); }
  /* 聚焦态：整条胶囊亮起品牌色描边 + 柔光，而不是只给 input 描边 */
  .mp-searchbar:focus-within { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .mp-searchbar, .mp-searchbar-go { transition: none; }
}

/* ---------- 26. 资讯卡（品牌方参考稿：浅绿细边框 + 顶部缩略图 + 内容区） ----------
   注：本节只新增 .news-card 系列，与第 8 节的 .art-card 互不影响（.art-card 仍在别处使用）。
   缩略图区由 assets/js/thumb-gen.js 内联渲染 SVG 填充，无任何外链图片。 */
.news-card {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  border: 1px solid var(--brand-line); border-radius: 18px;
  background: var(--surface); box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur);
}
.news-card:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--sh-2); }

/* 缩略图区：约卡片高度的 55%，顶部两角圆角、底部直角 */
.news-card-art {
  position: relative; flex: 0 0 auto;
  height: 55%; min-height: 148px;
  border-bottom: 1px solid var(--brand-line);
  background: var(--grad-soft);
  overflow: hidden;
}
.news-card-art svg { display: block; width: 100%; height: 100%; }
.news-card-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 28%);
}
/* 快讯流里的紧凑缩略图：横向小图，不改变快讯流的时间轴节奏。
   固定 16:9，flex-shrink 必须为 0 —— 否则 flex 会把宽度压成竖条，
   而 height 又因 align-items:stretch 被拉到正文高度，观感会变成竖图。 */
.news-card-art-sm {
  flex: 0 0 auto; width: 148px; aspect-ratio: 16 / 9; height: auto;
  align-self: flex-start;
  min-height: 0; border: 1px solid var(--brand-line); border-radius: var(--r-sm);
}
.news-card-art-sm::after { display: none; }

.news-card-body {
  display: flex; flex-direction: column; gap: 9px;
  flex: 1; padding: 15px 18px 18px; background: var(--surface);
}
/* 「新闻」胶囊徽章：浅绿底 + 绿字 + 小字号（快讯 / 深度沿用同一形状换色） */
.news-card-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  min-height: 22px; padding: 2px 10px; border-radius: var(--r-full);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand-3); font-size: 11.5px; font-weight: 700;
  letter-spacing: .02em; line-height: 1.5;
}
.news-card-badge.is-flash { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.32); color: #B45309; }
.news-card-badge.is-deep { background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(14,159,110,.14)); border-color: rgba(14,165,233,.32); color: #0369A1; }
[data-theme="dark"] .news-card-badge.is-flash { color: #FCD34D; }
[data-theme="dark"] .news-card-badge.is-deep { color: #7DD3FC; }

.news-card-title { font-size: 19px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; color: #0E2A20; }
.news-card-title a { color: inherit; }
.news-card-title a:hover { color: var(--brand-3); }
[data-theme="dark"] .news-card-title { color: #E7F4EE; }

.news-card-desc { font-size: 15px; line-height: 1.7; color: var(--text-2); }

.news-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line);
}
/* 来源胶囊：左侧带一个小图标 */
.news-card-src {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  min-height: 24px; padding: 3px 11px 3px 8px; border-radius: var(--r-full);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand-3); font-size: 12px; font-weight: 600; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.news-card-src .i { color: var(--brand-3); opacity: .9; }
[data-theme="dark"] .news-card-src { color: #6EE7B7; }
[data-theme="dark"] .news-card-src .i { color: #6EE7B7; }

/* 时长：灰色、不抢视觉 */
.news-card-time { flex-shrink: 0; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }

/* 快讯流复用同一个缩略图组件：让 .flash-body 吃掉剩余宽度，时间轴对齐不变 */
.flash-item .news-card-art-sm { margin-top: 2px; }
.flash-item .flash-body { flex: 1; min-width: 0; }
/* 窄屏仍保持 16:9 —— flex 会把宽度压成竖条、把高度拉到正文高，必须把纵横比钉死 */
.flash-item .news-card-art-sm { flex: 0 0 148px; aspect-ratio: 16 / 9; }

@media (max-width: 760px) {
  /* 窄屏（最小 512px）下缩略图区降为固定高度，保证标题与摘要不被挤掉 */
  .news-card-art { height: auto; min-height: 132px; }
  .news-card-title { font-size: 17.5px; }
  .news-card-desc { font-size: 14.2px; }
  .news-card-body { padding: 14px 15px 16px; }
  /* 快讯流窄屏：缩略图保持 16:9 小图。
     注意 .news-card-art-sm 同时带着 .news-card-art，上面那条 min-height:132px 会一并命中，
     必须在这里显式清零，否则小图会被拉起成竖图。 */
  .flash-item .news-card-art-sm { width: 104px; min-height: 0; height: auto; aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .news-card { transition: none; }
  .news-card:hover { transform: none; }
}

/* 参考稿要求资讯卡是「浅绿细边框 + 圆角 18px」。
   第 27.4 节的 .cards-modern 归一化会把边框换成中性 --line、圆角换成 --r，
   这里按参考稿把资讯卡这一个组件显式收回（不改 .art-card / .tool-card）。 */
.cards-modern .news-card {
  border-color: var(--brand-line); border-radius: 18px;
}
.cards-modern .news-card:hover { border-color: var(--brand); }

/* ---------- 27. 模板对齐：Hero 三段式 / 热门词文字链 / 推广带 / 区块头统一套路 / 卡片形态归一 ----------
   来源：品牌方指定线上模板（灵犀AI导航）。只采纳其「版式、结构、组件形态、区块节奏」，
   品牌（云枢 AI导航）、频道（工具 / 在线工具 / 题库 / 资讯 / 教程）与全部正文内容保持本站原样。
   本节全部为新增类，且不改动第 22–26 节任何既有规则（移动端图标栏 / 搜索胶囊 / 分类胶囊栏 / 对话悬浮件）。 */

/* --- 27.1 Hero：eyebrow 胶囊 → 两行 H1（第二行强调色）→ 副标题 → 大搜索框 → 热门文字链 --- */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 5px 15px;
  border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line);
  font-size: 12.8px; color: var(--text-2); backdrop-filter: var(--blur);
  transition: border-color var(--dur), color var(--dur);
}
.hero-eyebrow:hover { border-color: var(--brand-line); color: var(--text); }
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; flex-shrink: 0; }

.hero-sub { max-width: 640px; margin: 20px auto 0; font-size: 17px; line-height: 1.75; color: var(--text-2); }

/* 热门词：模板为文字链接形态（不是胶囊），用「·」分隔 */
.hot-terms { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; align-items: center; margin-top: 22px; }
.hot-terms-label { font-size: 12.6px; color: var(--text-3); }
.hot-terms-list { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; align-items: center; }
.hot-term {
  font-size: 13.2px; color: var(--text-2); cursor: pointer; text-decoration: none;
  border-bottom: 1px solid transparent; transition: color var(--dur), border-color var(--dur);
}
.hot-term:hover { color: var(--brand-3); border-bottom-color: var(--brand-line); }
.hot-terms-sep { color: var(--line-strong); font-size: 12px; user-select: none; }

/* --- 27.2 「把云枢设为首页」推广带：左标题 + 一句说明，右实心按钮 --- */
.promo-band {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 22px 26px; border-radius: var(--r); border: 1px solid var(--brand-line);
  background: linear-gradient(180deg, var(--brand-soft), transparent 78%), var(--surface);
}
.promo-band-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.promo-band-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.promo-band-sub { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.promo-band .btn { flex-shrink: 0; }

/* --- 27.3 区块头统一套路：左 h2 + 其下一行小灰字副标题，右文字链接 --- */
.sec-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 30px; }
.sec-head > .badge { align-self: flex-start; }
.sec-sub { max-width: 700px; margin: 7px 0 0; font-size: 14.4px; line-height: 1.65; color: var(--text-3); }
.sec-link {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; flex-shrink: 0;
  font-size: 14px; font-weight: 620; color: var(--text-2);
  transition: color var(--dur), gap var(--dur);
}
.sec-link:hover { color: var(--brand-3); gap: 10px; }
.sec-link .i { width: 15px; height: 15px; }

/* 旧页面里的右侧小灰字说明（span.sm.dim / span.xs.dim）：按同一套路移到标题下方 */
.sec-head > span.sm.dim, .sec-head > span.xs.dim,
.sec-head > div > span.sm.dim, .sec-head > div > span.xs.dim {
  align-self: flex-start; order: 9; max-width: 700px; margin-top: -2px;
  font-size: 14.2px; line-height: 1.6; color: var(--text-3);
}
/* 旧页面区块头右侧的按钮：统一降级为文字链接（与模板一致） */
.sec-head .btn.btn-ghost { border: 0; background: transparent; min-height: 0; padding: 2px 0; color: var(--text-2); }
.sec-head .btn.btn-ghost:hover { color: var(--brand-3); background: transparent; }
.sec-head .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 620; color: var(--text-2); }
.sec-head .link-arrow:hover { color: var(--brand-3); }
.sec-head .link-arrow .i { width: 15px; height: 15px; }

/* --- 27.4 cards-modern：工具卡 / 资讯卡 / 题库卡统一圆角、边框、内边距与 hover 反馈 --- */
.cards-modern .tool-card, .cards-modern .news-card, .cards-modern .art-card,
.cards-modern .card-hover {
  border-radius: var(--r); border: 1px solid var(--line); background: var(--surface);
  transition: transform var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.cards-modern .card-hover:hover {
  transform: translateY(-3px); border-color: var(--brand-line); box-shadow: var(--sh-2);
}
.cards-modern .art-body { padding: 16px 18px 18px; }
.cards-modern .news-card-body { padding: 16px 18px 18px; }
.cards-modern .art-title, .cards-modern .news-card-title { line-height: 1.5; }

/* --- 27.5 居中双按钮 CTA：「发现好工具，分享给更多人」形态 --- */
.cta-share { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta-share .h2 { max-width: 720px; }
.cta-share .sec-sub { margin-top: 12px; max-width: 560px; text-align: center; }
.cta-share .cta-actions { margin-top: 24px; }

@media (max-width: 760px) {
  .hero-sub { font-size: 15.4px; }
  .hot-terms { margin-top: 18px; }
  .promo-band { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px 18px 20px; }
  .promo-band .btn { width: 100%; justify-content: center; }
  .sec-sub { font-size: 13.8px; }
  .sec-head { margin-bottom: 22px; }
}

[data-theme="dark"] .promo-band { background: linear-gradient(180deg, rgba(16,159,110,.16), transparent 78%), var(--surface); }
[data-theme="dark"] .hot-term:hover { color: #6EE7B7; }

@media (prefers-reduced-motion: reduce) {
  .cards-modern .card-hover:hover { transform: none; }
  .hot-term, .sec-link { transition: none; }
}

/* ---------- 28. 图标风格统一（品牌方模板图例）+「把云枢设为首页」渐变卡片 ----------
   来源：品牌方提供的模板图例（细描边线性 + 圆头圆角 + 单色 + 简洁几何，线宽约 1.6–1.8）。
   本节全部为新增规则或显式覆盖，且不改动第 22–27 节任何一个字：
     - 第 27 节的 .promo-band 仍是「左标题右按钮的横条」基线，本节把它覆盖为竖向渐变卡片；
       深色主题与 ≤760px 的覆盖也一并显式写出，避免被第 27 节更高特异性的规则反抢
       （[data-theme="dark"] .promo-band 与 .promo-band .btn 都是 0,2,0，靠本节更靠后的位置取胜）。
     - 分类栏图标只按容器选择器 .cat-bar-item .i 统一，站点其余图标（按钮 / 卡片 / 顶栏导航）不受影响。 */

/* --- 28.1 分类栏图标：16px / 线宽 1.7 / 圆头圆角 / 单色且跟随文字色 ---
   线宽用 CSS 而不是逐个改 HTML 属性：main.css 被 18 个页面共用，
   这样没有写权限的页面（tools.html / edu*.html / tools-online.html）也被一并统一到 1.7。 */
.cat-bar-item .i {
  width: 16px; height: 16px;
  stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none;
  color: currentColor;
}
/* 悬停/选中不换色、不换线宽：只跟随文字色（.cat-bar-item.active 的文字色是品牌绿） */
.cat-bar-item:hover .i, .cat-bar-item.active .i { stroke-width: 1.7; color: currentColor; }

/* --- 28.2「把云枢设为首页」：竖向渐变卡片（蓝 → 绿），不是左标题右按钮的横条 --- */
.promo-band {
  position: relative; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 22px 24px; border: 0; border-radius: var(--r-lg);
  background: var(--grad);
  box-shadow: 0 18px 40px -22px rgba(14, 159, 110, .75);
}
/* 右上角淡淡的圆形高光：纯 CSS 径向渐变，不引入任何外部图片 */
.promo-band::after {
  content: ""; position: absolute; top: -46px; right: -34px;
  width: 168px; height: 168px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 70%);
}
.promo-band-main { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.promo-band-title { margin: 0; color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.promo-band-sub { margin: 0; max-width: 560px; color: rgba(255, 255, 255, .88); font-size: 14.5px; line-height: 1.7; }

/* 按钮：白底 + 绿字。刻意不用 .btn-primary —— 绿底白字压在渐变上会糊成一片，看不出按钮边界。
   「居中偏左」= 卡片内左对齐、不全宽；.btn 基类只借它的尺寸/过渡，颜色与圆角在下面显式覆盖。 */
.promo-band .promo-band-btn {
  position: relative; z-index: 1;
  width: auto; align-self: flex-start; justify-content: center;
  height: 40px; padding: 0 18px; border-radius: 10px;
  background: #fff; color: var(--brand-3); border: 1px solid transparent;
  font-weight: 650; box-shadow: 0 10px 22px -14px rgba(3, 32, 24, .65);
}
.promo-band .promo-band-btn:hover { background: #fff; color: var(--brand-3); transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(3, 32, 24, .7); }
.promo-band .promo-band-btn:active { transform: translateY(1px) scale(.99); }

/* 深色主题：第 27 节的 [data-theme="dark"] .promo-band 特异性更高，这里显式收回渐变与文字色 */
[data-theme="dark"] .promo-band { background: var(--grad); border: 0; }
[data-theme="dark"] .promo-band-title { color: #fff; }
[data-theme="dark"] .promo-band-sub { color: rgba(255, 255, 255, .88); }
[data-theme="dark"] .promo-band .promo-band-btn { background: #fff; color: var(--brand-3); }

@media (max-width: 760px) {
  .promo-band { padding: 20px 18px 22px; gap: 12px; }
  /* 第 27 节窄屏的 .promo-band .btn{width:100%;justify-content:center} 会命中本按钮：同特异性 + 更靠后收回 */
  .promo-band .promo-band-btn { width: auto; align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-band .promo-band-btn { transition: none; }
  .promo-band .promo-band-btn:hover { transform: none; }
}

/* ---------- 29. 首页统计数字：数据驱动下的两个新增修饰类 ----------
   背景：第 24.1 节的 .trust .stat-num 是「绿/蓝/橙数字 + 紧跟一个裸文本 +」的写法。
   现在这 4 个数字改由 data/stats.json 驱动（assets/js/app.js → bindStats()），
   于是出现两种新形态，各自需要一个类：
     · 有来源的指标：数值由脚本写入 [data-count]，后缀「+」必须是可以单独隐藏的元素
       —— 所以「+」从裸文本提升为 .stat-suffix，并加 hidden 属性随数据开关。
       ⚠️ 注意：一旦「+」是独立元素，.trust .stat-num 的 30px/高字重/负字距就不再作用于它，
          必须在本节显式继承字号、字重与颜色，否则「+」会掉成正文 14px 且变灰。
     · 无来源的指标（当前只有「注册用户」）：显示全角破折号「—」占位，
       与数字同字号同字重，视觉上不塌陷、也不冒充一个数字。
   本节的规则只作用于 .trust 数据条，不改动 22–28 节任何既有规则。 */

/* 「+」后缀：跟随数字的字号/字重/颜色（继承自父级 .stat-num 的 calc 语义），只在有真实数值时出现 */
.trust .stat-num .stat-suffix {
  font-size: .62em;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 1px;
  vertical-align: .12em;
  color: inherit;
}
/* 占位符「—」：与数字同族，但用等宽字形宽度更稳，避免与相邻卡片的数字对齐时抖动 */
.trust .stat-num [data-stat-placeholder] {
  font-variant-numeric: tabular-nums;
}

/* 深色主题下颜色随 c-green/c-blue/c-orange 走（color: inherit），无需额外覆盖 */

/* ---------- 30. 品牌方 2026-10 首页改版（统计行 5 项 / PC 侧栏版式 / 最新收录 / AI 角标 / 移动端收藏 / 页脚一行 / CTA 渐变带） ----------
   本节全部是**追加**规则：第 22–29 节一个字都没有改动。需要压过既有规则时，一律靠
   「同特异性 + 更靠后」或「提高一级特异性」取胜，与第 27.4 / 28 节覆盖第 27 节的做法一致；
   只有 30.2 里的一条工具卡列数用了 !important（原因写在那条规则上）。
   分节：
     30.1 统计行 5 项一行（≥761px）/ 3+2（≤760px）
     30.2 首页主栅格：PC 侧栏「全部栏目」+ 主内容列，≤1080px 退化为单列（分类回到横向胶囊条）
     30.3 「最新收录」列表卡（对齐原稿 .new-list / .new-row）
     30.4 工具卡图标右上角 AI 角标（纯 CSS ::after）
     30.5 移动端不展示收藏按钮
     30.6 页脚 logo 一行 + 描述跟在右侧
     30.7 CTA 渐变带 + 「注册即送 200 积分」
     30.8 深色主题 / reduced-motion 收口 */

/* --- 30.1 统计行：品牌方要求 5 项、一行显示（原稿参考图是 4 项一行，我们 5 项也一行） ---
   只作用于首页那一行（.trust-5）：login.html 也用 .trust / .trust-item，绝不能被这里改成 5 列。 */
@media (min-width: 761px) {
  .trust-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px 12px;
    /* 对齐原稿 .stats 的「一条细分隔线 + 数字行」写法 */
    border-top: 1px solid var(--line);
    padding-top: 26px;
  }
}
/* ≤760px：5 项排成 3+2。用 flex 定宽 + 居中，末行的两项会居中，不会像定宽网格那样在右下角留一个空洞，
   也不会出现品牌方点名的 3+1 孤儿。512px 实测：内容区宽约 420px（左侧图标栏 60px + .wrap 两侧 16px），
   每项约 135px —— 28px 的「6,800+」与 13px 的「AI 在线工具」都放得下。 */
@media (max-width: 760px) {
  .trust-5 { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 8px; }
  .trust-5 .trust-item { flex: 0 1 calc((100% - 16px) / 3); min-width: 0; }
}

/* --- 30.2 首页主栅格 ---
   PC（≥1081px）= 原稿《AI工具前台页面风格.html》的 .home-grid：左栏侧栏（全部栏目竖向列表 + 推广卡），
   右栏主内容列。≤1080px 单列：分类列表回到本站既有的横向胶囊条（第 24.2 节），
   顺序仍是「分类条 → 把云枢设为首页」，与改动前的移动端观感一致。 */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.home-side, .home-main { min-width: 0; }

@media (min-width: 1081px) {
  .home-grid { grid-template-columns: 264px minmax(0, 1fr); gap: 36px; align-items: start; }
  /* 侧栏整体吸顶：对齐原稿 .sidebar{position:sticky;top:84px} 的做法（--header-h 是 64px） */
  .home-side { position: sticky; top: calc(var(--header-h) + 20px); }

  /* 侧栏里的区块头按侧栏尺寸收一档，避免 33px 的 h2 撑满 264px 的窄栏 */
  .home-side .sec-head { margin-bottom: 18px; }
  .home-side .h2 { font-size: 22px; }
  .home-side .sec-sub { margin-top: 5px; font-size: 12.8px; }
  .home-side .sec-link { font-size: 13px; }
  .home-side .promo-band { padding: 18px 18px; gap: 9px; }

  /* 分类胶囊条 → 原稿侧栏的「全部栏目」竖向列表（.side-card / .side-item 的形态：图标 + 名称 + 数量） */
  .home-side .cat-bar { border-radius: var(--r-lg); padding: 16px 12px; }
  .home-side .cat-bar-cap {
    display: block; padding: 0 10px 10px;
    font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--text-3);
  }
  .home-side .cat-bar-scroll {
    flex-direction: column; align-items: stretch; gap: 2px;
    overflow: visible; padding-bottom: 0; scroll-snap-type: none;
  }
  .home-side .cat-bar-item {
    width: 100%; height: auto; min-height: 38px;
    padding: 8px 10px; border-radius: var(--r-sm); font-size: 14px;
  }
  .home-side .cat-bar-num { margin-left: auto; font-size: 13px; }

  /* 主内容列变窄（1192 - 264 - 36 = 892px）后，auto-fill 的 290px 只能铺 2 列。
     原稿的工具区是 repeat(3,1fr)，这里钉回 3 列。
     !important 的原因：第 3 节的 .grid-auto:not(:has(> :nth-child(4):last-child)) 因为 :has() 的
     特异性计入，实际是 (0,4,0)，普通追加规则压不过它；作用域只限首页主列。 */
  .home-main [data-tool-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* 窄屏是横向胶囊条，没有卡片小标题 */
.cat-bar-cap { display: none; }

/* 窄屏：分类胶囊条贴到内容区两侧。
   第 24.3 节的 .wrap > .cat-bar 是给「.cat-bar 直接挂在 .wrap 下」的旧 DOM 写的，
   现在 .cat-bar 收进了 .home-side，那条选择器不再命中 —— 这里按新 DOM 等价补上（第 24 节不改）。 */
@media (max-width: 760px) {
  .home-side > .cat-bar { margin-inline: -16px; }
}

/* --- 30.3「最新收录」列表卡（对齐原稿 .new-list / .new-row：白卡 + 细分隔线 + 悬停整行高亮） --- */
.new-list {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.new-row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur), border-color var(--dur);
}
.new-row:last-child { border-bottom: 0; }
.new-row:hover { background: var(--surface-2); }
/* 行内图标沿用 .tool-logo 的视觉语言，尺寸收到 38px 并去掉投影（对齐原稿 .new-row .ic） */
.new-row .tool-logo { width: 38px; height: 38px; border-radius: 11px; font-size: 15px; box-shadow: none; }
.new-row-nm {
  flex: 0 0 208px; min-width: 0;
  font-size: 14.4px; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.new-row-ds {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.new-row-tg {
  flex-shrink: 0;
  padding: 3px 10px; border-radius: var(--r-full);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand-3); font-size: 12px; font-weight: 600;
}
.new-row-go {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 650; color: var(--brand-3);
  opacity: 0; transition: opacity var(--dur);
}
.new-row:hover .new-row-go, .new-row:focus-visible .new-row-go { opacity: 1; }
@media (max-width: 760px) {
  .new-row { flex-wrap: wrap; gap: 8px 12px; padding: 14px; }
  .new-row-nm { flex: 1 1 140px; white-space: normal; }
  .new-row-ds {
    flex: 1 1 100%; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .new-row-go { opacity: 1; margin-left: auto; }
}

/* --- 30.4 工具卡图标右上角的「AI」角标 ——
   纯 CSS（::after + content），卡片是数据渲染的，手写 span 一定漏。
   作用域限定 .tool-card：.tool-logo 还被安全承诺卡、三步流程（1/2/3 数字）、搜索建议下拉、
   以及新的「最新收录」行复用，那些地方不该出现 AI 角标。
   品牌方要求「图标右上角加角标 AI 标识」：本站收录的都是 AI 工具，故**统一加**，暂不按是否 AI 性质区分。 */
.tool-card .tool-logo::after {
  content: "AI";
  position: absolute; top: 0; right: 0;
  min-width: 17px; height: 15px; padding: 0 3px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: #0B3B2C;
  border-radius: 0 12px 0 8px;
  font-size: 9px; font-weight: 800; letter-spacing: .02em; line-height: 1;
  box-shadow: 0 1px 3px rgba(6, 26, 20, .3);
  pointer-events: none;
}
/* 列表视图里的图标是 40px，角标同步收一档 */
.list-view .tool-card .tool-logo::after { min-width: 16px; height: 14px; font-size: 8.5px; border-radius: 0 10px 0 7px; }

/* --- 30.5 移动端不展示收藏按钮 ---
   品牌方：「移动端不需要展示收藏按钮。」实际类名 = .fav（工具卡右上角，悬停淡入；列表视图里是常显）；
   工具详情页那颗是 btn-outline（没有独立类名），按 title 语义收掉。 */
@media (max-width: 760px) {
  .fav { display: none !important; }
  .btn[title="收藏该工具"] { display: none !important; }
  /* 收藏按钮不在了，标题右侧那 32px 让位空间一并收回 */
  .tool-card .tool-top .grow { padding-right: 0; }
}

/* --- 30.6 页脚：logo 一行 + 描述缩小跟在 logo 右侧 ---
   第 17 节的 .foot a{display:block} （0,1,1）会压掉 .brand（0,1,0）的 flex 排版，
   导致 logo 方块与站名分行 —— 这里用 .foot-brand-line .brand（0,2,0）显式收回。 */
.foot-brand { min-width: 0; }
.foot-brand-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot-brand-line .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0; font-size: 16.5px; font-weight: 750; letter-spacing: -.02em; color: var(--text);
}
.foot-brand-desc {
  margin: 0; flex: 1 1 220px; min-width: 0;
  font-size: 12.4px; line-height: 1.7; color: var(--text-3);
}
@media (max-width: 760px) {
  /* 窄屏一行确实放不下：由 flex-wrap 折到 logo 下方，字号不再继续压缩 */
  .foot-brand-line { gap: 10px; }
  .foot-brand-desc { flex-basis: 100%; }
}

/* --- 30.7 CTA：对齐原稿 .cta-band（整幅品牌渐变带 + 居中标题/副标题 + 双按钮）+「注册即送 200 积分」 ---
   第 27.5 节的 .cta-share 仍是「居中双按钮 CTA」的基线，这里只补底色、文字色与按钮配色。 */
.cta-band-home {
  position: relative; overflow: hidden;
  padding: 44px 32px;
  background: var(--grad); border-color: transparent; color: #fff;
  box-shadow: 0 26px 60px -30px rgba(14, 159, 110, .8);
}
.cta-band-home::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(360px 180px at 82% -20%, rgba(255, 255, 255, .28), transparent 62%);
}
.cta-band-home > * { position: relative; }
.cta-band-home .h2 { color: #fff; }
.cta-band-home .sec-sub { color: rgba(255, 255, 255, .9); }
/* 主按钮白底绿字：绿底白字压在渐变带上看不出按钮边界（同第 28 节推广卡的处理） */
.cta-band-home .btn-primary { background: #fff; color: var(--brand-3); box-shadow: 0 10px 24px -14px rgba(3, 32, 24, .7); }
.cta-band-home .btn-primary:hover { background: #fff; color: var(--brand-3); }
.cta-band-home .btn-outline { background: transparent; border-color: rgba(255, 255, 255, .62); color: #fff; }
.cta-band-home .btn-outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
/* 「注册即送 200 积分」：浅色药丸一行副文案 + 内联小图标（无 emoji、无外链）。
   刻意不用 flex —— 匿名 flex 项会吃掉「注册即送 200 积分」中间的空格，文字会连成一串。
   但第 2 节的重置写了 img,svg,video{display:block}，图标会单独占一行，所以这里必须收回 inline-block。 */
.cta-gift {
  margin: 18px 0 0; padding: 9px 16px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34);
  color: #fff; font-size: 14.2px; font-weight: 600;
}
.cta-gift .i { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px; }
.cta-gift b { font-weight: 800; }
@media (max-width: 760px) {
  .cta-band-home { padding: 30px 20px; }
  .cta-gift { font-size: 13.2px; padding: 8px 13px; }
}

/* --- 30.8 深色主题 / reduced-motion 收口 ---
   深色下 --grad 仍是同一套蓝→绿渐变，文字与角标要显式给定，避免继承到深色底上的浅色。 */
[data-theme="dark"] .cta-band-home { background: var(--grad); border-color: transparent; }
[data-theme="dark"] .cta-gift { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .38); }
[data-theme="dark"] .tool-card .tool-logo::after { background: rgba(255, 255, 255, .92); color: #06251B; }
[data-theme="dark"] .new-list { background: var(--bg-elev); }
[data-theme="dark"] .new-row-tg { color: #6EE7B7; }
[data-theme="dark"] .new-row-go { color: #6EE7B7; }
[data-theme="dark"] .foot-brand-line .brand { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .new-row, .new-row-go { transition: none; }
  .cta-band-home .btn-primary:hover { transform: none; }
}

/* ---------- 31. 首页 PC 端对齐品牌方参考图（热门工具 4 列卡片 / 侧栏「全部栏目」/ 分类速览瓦片） ----------
   参考物件：品牌方给的 PC 端目标样式图 + 原稿 _ref/template-original/AI工具前台页面风格.html
   （原稿对应类：.hot-row / .hot-card / .side-card / .side-item / .cat-grid / .cat-tile；
     原稿令牌 --radius:16px 对应本站 --r，--rose:#F43F5E 对应本站 --danger）。
   本节全部是**追加**规则：第 22–30 节一个字都没有改动。需要压过既有规则时，一律靠
   「同特异性 + 更靠后」或「提高一级特异性」取胜，与第 27 / 28 / 30 节覆盖第 27 节的做法一致。
   分节：
     31.1 热门工具栅格：4 列（≥1081px）→ 3 列（≤1080）→ 2 列（≤760）→ 1 列（≤560）
     31.2 热门卡结构：48px 图标 + #N 排名 + 收藏心形 + 17px 标题 + 3 行描述 + 底部「积分 · 模型名 / 去使用」
     31.3 侧栏「全部栏目」：小灰字标题 + 真实分项计数（0 值栏目已在 HTML 里删除，不做 CSS 隐藏）
     31.4 分类速览瓦片：4 → 3 → 2 → 1 列，40px 图标 + 分类名 + 一行小灰字 + 「N 个工具 →」
     31.5 深色主题 / reduced-motion 收口 */

/* --- 31.1 热门工具栅格 ---
   原稿 .hot-row = repeat(4,1fr)。本站主列宽 892px（.wrap 1192 − 侧栏 264 − 间距 36），
   4 列时每张约 212px，故列间距从第 3 节的 18px 收到 14px。
   !important 的原因同第 30.2 节：第 3 节的 .grid-auto:not(:has(...)) 因 :has() 计入特异性后是 (0,4,0)，
   普通追加规则压不过它；作用域只限首页主列。 */
.home-main [data-tool-grid] { gap: 14px; }
@media (min-width: 1081px) {
  .home-main [data-tool-grid] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 1080px) {
  .home-main [data-tool-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .home-main [data-tool-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .home-main [data-tool-grid] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* --- 31.2 热门卡结构 ---
   DOM：.hot-card > .fav（右上角心形）
              > .tool-top > .tool-logo（48px）+ .hot-rank（#N）
              > h3.tool-name（17px 粗体）
              > p.tool-desc（灰色，3 行）
              > .tool-foot > .hot-meta（N 积分 · 模型名）+ a.hot-use（去使用 →）
   第 8 节既有的 .tool-card / .tool-top / .tool-name / .tool-desc / .tool-foot 一条都没有改，
   这里只按四列后的窄卡片与参考图形态做覆盖。 */
.home-main .hot-card { padding: 14px 13px 13px; gap: 11px; border-radius: var(--r); }
.home-main .hot-card .tool-logo { width: 48px; height: 48px; border-radius: 14px; font-size: 20px; }
/* 第 30.4 节的「AI」角标随图标圆角同步收一档，仍贴在图标右上角 */
.home-main .hot-card .tool-logo::after { border-radius: 0 14px 0 8px; }
.home-main .hot-card .tool-top { align-items: center; gap: 10px; }
/* 排名 #N：紧跟在图标右侧，等宽字形保证 #1 / #8 对齐 */
.home-main .hot-card .hot-rank {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; font-weight: 600; color: var(--text-3); letter-spacing: .02em;
}
.home-main .hot-card .tool-name { font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -.015em; }
.home-main .hot-card .tool-desc { font-size: 13.8px; line-height: 1.62; -webkit-line-clamp: 3; }
/* 底部一条：去掉第 8 节的分隔线（参考图 .hot-card .foot 无边框），窄卡片放不下时允许换行，不做截断 */
.home-main .hot-card .tool-foot { border-top: 0; padding-top: 0; gap: 5px 6px; flex-wrap: wrap; }
.home-main .hot-card .hot-meta { min-width: 0; font-size: 12px; color: var(--text-3); }
.home-main .hot-card .hot-meta b {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700; color: var(--brand-3);
}
.home-main .hot-card .hot-use {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.4px; font-weight: 700; color: var(--brand-3); white-space: nowrap;
}
.home-main .hot-card .hot-use .i { width: 13px; height: 13px; transition: transform var(--dur); }
.home-main .hot-card:hover .hot-use .i { transform: translateX(2px); }
/* 收藏心形：参考图里是常显的描边心形（不是悬停才淡入的那种），悬停变实心 + 变红。
   ≤760px 由第 30.5 节统一隐藏，这里不重复处理。 */
.home-main .hot-card .fav { top: 12px; right: 12px; opacity: 1; transform: none; }
.home-main .hot-card .fav:hover { background: var(--surface-3); color: var(--danger); }
.home-main .hot-card .fav:hover .i { fill: currentColor; }
/* 区块头 h2 前的红色星号。fill 必须写在 CSS 里：.i 基类的 fill:none 优先级高于 SVG 的 fill 呈现属性。 */
.hot-h2-star { display: inline-flex; align-items: center; margin-right: 9px; color: var(--danger); vertical-align: -3px; }
.hot-h2-star .i { width: 18px; height: 18px; fill: currentColor; stroke: none; }
/* 热门工具的区块头收回横排：参考图是「左 h2 + 副标题，右「查看全部 →」」一行，
   而第 27.3 节把全站 .sec-head 统一改成了竖排（链接落到标题下方）。
   只对首页热门工具这一个区块生效，且只在 ≥761px（≤760 沿用第 20 / 27.3 节的竖排）；
   align-self 必须一并收回 —— 第 27.3 节给 .sec-link 写了 align-self:flex-start，
   不收回的话链接会贴着区块头顶部而不是与副标题基线对齐。 */
@media (min-width: 761px) {
  .hot-sec > .sec-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .hot-sec > .sec-head > .sec-link { align-self: flex-end; }
}

/* --- 31.3 侧栏「全部栏目」 ---
   DOM 复用第 24.2 节的 .cat-bar（图标 + 名称 + .cat-bar-num），PC 端由第 30.2 节切成竖排列表；
   这里只补参考图的两处细节（小灰字标题、等宽计数），第 24 节一个字都没有改。
   计数是真实分项：data/tools.json 的 categories[].count，全部工具取 counts.total（73）；
   效率插件计数为 0，按品牌方要求直接不出现在列表里（HTML 已删该行）。 */
.home-side .cat-bar-cap { font-weight: 600; letter-spacing: .08em; }
.home-side .cat-bar-num {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
}
/* 选中态「浅绿底 + 绿字 + 图标变绿」：底色与文字由第 24.2 节给，图标跟随 currentColor，这里显式钉住 */
.home-side .cat-bar-item.active .i { color: var(--brand-3); }

/* --- 31.4 分类速览瓦片 ---
   原稿 PC 首页侧栏与主列两处分类入口并存，我们照做：侧栏是栏目导航，瓦片是按方向收窄范围的速览。
   原稿类：.cat-grid / .cat-tile / .ic / h4 / .ds / .cnt；图标底色复用第 8 节 .tool-logo 与 alt-N。 */
.cat-overview .cat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cat-tile {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur), background var(--dur);
}
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--brand-line); background: var(--surface-2); }
/* 40px 彩色图标：只收尺寸、去投影，渐变与白字沿用 .tool-logo */
.cat-tile .tool-logo { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; box-shadow: none; }
.cat-tile .tool-logo .i { width: 20px; height: 20px; stroke-width: 1.8; }
.cat-tile-nm { margin-top: 12px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.cat-tile-ds { margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--text-3); }
.cat-tile-cnt {
  margin-top: 10px;
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; font-weight: 700; color: var(--brand-3);
}
/* 新增两档图标渐变：8 张瓦片不重复用色（第 8 节的 alt-2…alt-6 只有 5 档可选色） */
.tool-logo.alt-7 { background: linear-gradient(135deg, #8B5CF6, #6366F1); }
.tool-logo.alt-8 { background: linear-gradient(135deg, #F59E0B, #F97316); }
@media (max-width: 1080px) { .cat-overview .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cat-overview .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cat-overview .cat-tiles { grid-template-columns: minmax(0, 1fr); } }

/* --- 31.5 深色主题 / reduced-motion 收口 --- */
[data-theme="dark"] .home-main .hot-card .hot-meta b,
[data-theme="dark"] .home-main .hot-card .hot-use,
[data-theme="dark"] .cat-tile-cnt { color: #6EE7B7; }
[data-theme="dark"] .cat-tile:hover { background: var(--surface-2); border-color: var(--brand-line); }
@media (prefers-reduced-motion: reduce) {
  .cat-tile, .home-main .hot-card .hot-use .i { transition: none; }
  .cat-tile:hover, .home-main .hot-card:hover .hot-use .i { transform: none; }
}

/* ---------- 31. 在线工具箱：图片预览与下载区（第二批新增） ----------
   本节只新增类，不改动第 22~30 节的任何既有规则。
   对应素材：tools-online.html 的 #tk-preview / #tk-files 容器，
   以及 toolkit-ui.js 里 showPreview() / showFiles() 生成的 .tk-shot / .tk-dl 元素。 */

#tk-preview {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 14px);
  background: var(--bg-elev);
}

/* 图片类工具的结果预览。棋盘底纹用于看清透明区域（纯 CSS，不引外部图片） */
.tk-shot {
  display: block;
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, .06) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .06) 75%),
    linear-gradient(45deg, rgba(0, 0, 0, .06) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .06) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* 下载项：一行一个胶囊，点开即存（href 由 URL.createObjectURL 或 data URL 提供） */
.tk-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full, 999px);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.tk-dl:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* 分类内工具胶囊容器：#tk-chips 由 toolkit-ui.js 的 renderChips() 渲染 */
#tk-chips {
  margin: 2px 0 4px;
}

@media (max-width: 760px) {
  .tk-shot { max-height: 240px; }
  #tk-preview { padding: 8px; }
}

/* ---------- 32. 2026-10 新增一级分类「剧本创作」（窄档顶栏导航收紧 / 瓦片图标色 / 落地页锚点） ----------
   本节（即「第 32 节」）是**纯追加块**，追加在文件末尾：第 22–31 节一字未动
   （改动前快照 = 57695 bytes / 1030 行 / sha256 84fdac287b43bb1b872ec0a665a8790b97499b593e535c685241c0bc15cf0a4a，
   校验方式：现文件自「22.」标题起的 46988 字符与快照逐字一致，其后仅本节的 1485 字符）。
   本节只做四件事，全部是新增规则，不覆盖既有选择器：
     32.1 第 9 张分类瓦片用的图标底色（既有 .tool-logo.alt-2…alt-8 已被另外 8 张瓦片 / 12 张工具卡占满，避免撞色）；
     32.2 1081–1140px 这一档顶栏导航的内边距与间距收紧
          （背景：顶栏导航新增第 9 项「剧本创作」后，1081px 实测 nav 需宽 583px、可视只有 553px、溢出 30px，
           末项「积分定价」被裁掉。收紧后需宽 531px ≤ 553px，不换行、不裁切、不出现横向滚动条。
           只作用于 1081–1140px：≥1141px 时可视宽 ≥ 613px，583px 的原始间距本来就不溢出；
           ≤1080px 时 .nav 已被第 20 节 `@media (max-width:1080px){.nav{display:none}}` 整条收进抽屉，
           本节规则不会碰到它，也没有恢复第 20 节里被撤销过的「收起品牌副标题」那种旧做法）；
     32.3 落地页（script.html）里带 id 的工具卡：锚点跳转时给吸顶顶栏留出 84px 偏移（--header-h 64px + 20px）；
     32.4 「全部栏目」的分组小标题（AI 工具目录 / 在线工具箱）与 PC 侧栏内部滚动
          （背景：品牌方要求把在线工具箱的 13 个分类也列出来，侧栏从 9 行变成 23 行 + 2 个分组标题。
           ① .cat-bar-group 是新类：窄屏是胶囊条里的分隔标签，PC 是带右侧细线的分组小标题；
           ② PC 侧栏 23 行总高约 1000px，而 .home-side 是 sticky 的（第 30.2 节），
              不设高度上限时最后几行永远滚不到 —— 这里给分类列表本身加内部滚动，
              高度按视口算（100vh - 360px），下方「把云枢设为首页」推广卡始终可见。
              这是品牌方明确允许的做法（「加分组标题 + 让分组可折叠，或在侧栏内滚动」），
              不是靠「只显示一部分」来回避问题）；
     32.5 深色主题 / prefers-reduced-motion 收口（与第 30.8、31.5 节同做法）。 */

/* --- 32.1「剧本创作」瓦片图标底色（紫 → 玫红，与 alt-2…alt-8 的六个渐变都不重样） --- */
.tool-logo.alt-9 { background: linear-gradient(135deg, #7C3AED, #DB2777); }

/* --- 32.2 1081–1140px：顶栏导航收紧（第 9 项进场后仍不换行、不裁切） --- */
@media (min-width: 1081px) and (max-width: 1140px) {
  .nav { gap: 2px; }
  .nav a { padding: 8px; }
}

/* --- 32.3 落地页锚点：带 id 的工具卡跳转时避开吸顶顶栏 --- */
.tool-card[id] { scroll-margin-top: 84px; }

/* --- 32.4「全部栏目」分组小标题 + PC 侧栏内部滚动 --- */
/* 分组标签本身：图标位与 .cat-bar-item 对齐（左内边距 12px），字重 700、字号 12.5px、颜色 --text-3 */
.cat-bar-group {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 0 auto; white-space: nowrap;
  padding: 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--text-3);
}
.cat-bar-group-num { font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* 窄屏（横向胶囊条）：分组标签前面加一条竖分隔线，读起来像分组而不是一个分类 */
@media (max-width: 1080px) {
  .cat-bar-group { padding: 0 4px 0 8px; }
  .cat-bar-group::before { content: ""; width: 1px; height: 18px; background: var(--line-strong); }
}
/* PC 侧栏（竖向列表）：分组标题占满一行，右侧补一条细线；分类列表内部滚动 */
@media (min-width: 1081px) {
  .home-side .cat-bar-group { width: 100%; margin: 12px 0 2px; padding: 0 10px; }
  .home-side .cat-bar-group::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
  .home-side .cat-bar-scroll {
    max-height: calc(100vh - 360px); min-height: 240px;
    overflow-y: auto; overflow-x: hidden;
  }
}

/* --- 32.5 深色主题 / reduced-motion 收口 --- */
[data-theme="dark"] .tool-logo.alt-9 { background: linear-gradient(135deg, #8B5CF6, #EC4899); }
[data-theme="dark"] .cat-bar-group::before,
[data-theme="dark"] .home-side .cat-bar-group::after { background: var(--line-strong); }

/* --- 32.5b 侧栏「剧本创作」子分组的组标题（可点击，指向 script.html） --- */
.cat-bar-group.is-sub { gap: 8px; color: var(--text-2); }
.cat-bar-group.is-sub .i { flex-shrink: 0; color: var(--cat-1, var(--brand-3)); }
.cat-bar-group.is-sub:hover { color: var(--brand-3); }
.home-side .cat-bar-group.is-sub { padding-left: 10px; }
@media (max-width: 1080px) {
  .cat-bar-group.is-sub::before { background: var(--line-strong); }
}

/* ==========================================================================
   32.6 剧本创作分类页（script.html）—— 按品牌方风格稿《剧本创作分类页.html》落地
   --------------------------------------------------------------------------
   来源与偏离（详见交付说明）：
     · 风格稿自带一整套独立导航/页脚/Toast/主题切换 + 外链字体（miaoda.feishu.cn 的 Noto Sans SC /
       JetBrains Mono）。本站规矩是「不加外部资源 + 全站共用顶栏/页脚/Toast/主题切换」，
       所以这里只搬**内容区**的视觉与交互，导航/页脚/Toast/主题沿用站内既有实现，
       字体沿用站内既有栈（--font：system-ui / PingFang SC / Microsoft YaHei），不下载外部字体。
     · 分类识别色按品牌方要求用「紫罗兰 → 品红」（风格稿 --brand-1 #8B5CF6 / --brand-2 #EC4899），
       但**只在 .cat-script 作用域内**生效，不改全站主色，也不影响共用的顶栏/页脚按钮（仍是翡翠绿）。
     · 所有类名统一加 sc- 前缀，避免与站内既有 .chip / .panel / .badge / .card 等互相污染。
   ========================================================================== */

/* --- 32.6.1 分类识别色（作用域内覆盖，深色主题另给一套） --- */
.cat-script {
  --cat-1: #8B5CF6;
  --cat-2: #EC4899;
  --cat-grad: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  --cat-soft: linear-gradient(135deg, rgba(139, 92, 246, .11), rgba(236, 72, 153, .11));
  --cat-ink: #6D28D9;
  --cat-line: #D8CCF5;
}
[data-theme="dark"] .cat-script {
  --cat-1: #A78BFA;
  --cat-2: #F472B6;
  --cat-grad: linear-gradient(135deg, #A78BFA, #F472B6);
  --cat-soft: linear-gradient(135deg, rgba(167, 139, 250, .13), rgba(244, 114, 182, .13));
  --cat-ink: #C4B5FD;
  --cat-line: #37334B;
}
/* 分类页里「剧本创作」这个导航项与瓦片图标跟随分类色（其余站点界面保持翡翠绿） */
.cat-script .nav a.active { background: var(--cat-soft); color: var(--cat-ink); }

/* --- 32.6.2 Hero：徽章 + 渐变大标题 + 副标题 + 搜索 + 热门词 + 创作流程条 --- */
.sc-hero { position: relative; padding: 34px 0 10px; }
.sc-hero-cap { max-width: 860px; margin: 0 auto; text-align: center; }
.sc-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: var(--bg-elev); border: 1px solid var(--line); font-size: 13px; font-weight: 500;
  color: var(--text-2); box-shadow: var(--sh-1);
}
.sc-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cat-1); box-shadow: 0 0 0 3px rgba(139, 92, 246, .16); }
.sc-h1 { font-size: clamp(28px, 4.4vw, 46px); font-weight: 860; line-height: 1.18; letter-spacing: -.02em; margin: 18px 0 10px; }
.sc-h1 .g { background: var(--cat-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-sub { font-size: 15.5px; color: var(--text-2); max-width: 640px; margin: 0 auto; }
.sc-search {
  display: flex; align-items: center; gap: 6px; max-width: 600px; margin: 22px auto 0;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px;
  padding: 6px 6px 6px 16px; box-shadow: var(--sh-1); transition: border-color var(--dur), box-shadow var(--dur);
}
.sc-search:focus-within { border-color: var(--cat-1); box-shadow: 0 0 0 4px rgba(139, 92, 246, .12); }
.sc-search > .i { color: var(--text-3); flex-shrink: 0; }
.sc-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14.5px; padding: 9px 10px; font-family: inherit; }
.sc-search input::placeholder { color: var(--text-3); }
.sc-search .go {
  flex-shrink: 0; padding: 9px 20px; border-radius: 10px; background: var(--cat-grad); color: #fff;
  font-weight: 600; font-size: 14px; border: 0; cursor: pointer;
}
.sc-hot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; font-size: 13px; }
.sc-hot .lb { color: var(--text-3); }
.sc-hot button {
  padding: 5px 12px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--line);
  color: var(--text-2); font-size: 13px; cursor: pointer; font-family: inherit;
  transition: border-color var(--dur), color var(--dur), transform var(--dur);
}
.sc-hot button:hover { border-color: var(--cat-1); color: var(--cat-ink); transform: translateY(-1px); }
.sc-flow { max-width: 880px; margin: 22px auto 0; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px; box-shadow: var(--sh-1); }
.sc-flow-cap { font-size: 11.5px; color: var(--text-3); font-weight: 700; letter-spacing: .1em; margin-bottom: 8px; }
.sc-flow-steps { display: flex; align-items: center; justify-content: space-between; gap: 4px; flex-wrap: wrap; }
.sc-flow-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.sc-flow-st i { width: 22px; height: 22px; border-radius: 7px; background: var(--cat-soft); color: var(--cat-ink); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 11px; }
.sc-flow-ar { color: var(--line-strong); flex-shrink: 0; }

/* --- 32.6.3 二级标签栏（全部 + 7 个创作方向，点击即筛选） --- */
.sc-tabbar { display: flex; gap: 8px; margin: 26px 0 4px; flex-wrap: wrap; }
.sc-chip {
  padding: 7px 15px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; font-family: inherit;
  transition: border-color var(--dur), color var(--dur), background var(--dur);
}
.sc-chip:hover { border-color: var(--cat-1); color: var(--cat-ink); }
.sc-chip.active { background: var(--cat-grad); color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 3px 10px rgba(139, 92, 246, .24); }

/* --- 32.6.4 区块头（沿用站内 .sec-head 的骨架，只补分类色小标题宽度限制） --- */
.sc-sec { padding: 30px 0 4px; }
.sc-sec .sec-head { align-items: flex-end; }

/* --- 32.6.5 推荐工具大卡（4 个） --- */
.sc-hot-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sc-hot-card {
  display: flex; flex-direction: column; gap: 10px; padding: 18px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur);
}
.sc-hot-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }
.sc-hot-top { display: flex; align-items: center; gap: 9px; }
.sc-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--cat-grad); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.sc-ic .i { width: 20px; height: 20px; }
.sc-rank { font-size: 11px; font-weight: 700; color: var(--text-3); font-family: var(--mono, ui-monospace, monospace); }
.sc-hot-card h3 { font-size: 15px; font-weight: 780; }
.sc-hot-card p { font-size: 12.5px; color: var(--text-2); line-height: 1.6; flex: 1; }
.sc-hot-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-3); }
.sc-use { color: var(--cat-ink); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.sc-hot-card:hover .sc-use .i { transform: translateX(2px); }

/* --- 32.6.6 全部工具网格（3 列小卡：图标 + 名称 + 一句 + 标签） --- */
.sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sc-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px; position: relative;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md, 14px);
  transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur);
}
.sc-card:hover { transform: translateY(-2px); box-shadow: var(--sh-1); border-color: var(--cat-line); }
.sc-card .sc-ic { width: 40px; height: 40px; border-radius: 11px; }
.sc-card .sc-ic .i { width: 19px; height: 19px; }
.sc-tx { min-width: 0; flex: 1; }
.sc-nm { font-size: 14px; font-weight: 720; display: flex; align-items: center; gap: 6px; }
.sc-nm span.hot-flag { font-size: 10px; font-weight: 800; background: var(--cat-grad); color: #fff; padding: 1px 7px; border-radius: 999px; letter-spacing: .04em; }
.sc-ds { font-size: 11.5px; color: var(--text-3); margin-top: 1px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.sc-tgs { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.sc-tg { font-size: 11px; font-weight: 600; color: var(--cat-ink); background: var(--cat-soft); padding: 1px 8px; border-radius: 999px; }
.sc-tg.plain { background: var(--surface-2); color: var(--text-2); }

/* --- 32.6.7 创作流程 6 步 --- */
.sc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sc-step { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; transition: box-shadow var(--dur), border-color var(--dur); }
.sc-step:hover { box-shadow: var(--sh-1); border-color: var(--cat-line); }
.sc-step .no { font-family: var(--mono, ui-monospace, monospace); font-size: 22px; font-weight: 800; color: var(--cat-soft); line-height: 1; }
.sc-step h3 { font-size: 14px; font-weight: 780; margin: 6px 0 4px; }
.sc-step p { font-size: 12px; color: var(--text-3); line-height: 1.6; }
.sc-step a { color: var(--cat-ink); font-weight: 600; }

/* --- 32.6.8 SEO 内容区：教程 / FAQ 折叠 / 类型 chips / 案例 --- */
.sc-content { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.sc-panel { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-1); }
.sc-panel > h3 { font-size: 15px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.sc-panel > h3 .i { color: var(--cat-1); }
.sc-panel > h3 .tag { margin-left: auto; font-size: 11px; color: var(--text-3); font-weight: 500; }
.sc-tuto { display: grid; gap: 10px; }
.sc-tuto-item { display: flex; gap: 12px; padding: 11px; border-radius: 10px; border: 1px solid transparent; }
.sc-tuto-item:hover { background: var(--surface); border-color: var(--line); }
.sc-tuto-item .sc-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--cat-soft); color: var(--cat-ink); }
.sc-tuto-item .sc-ic .i { width: 16px; height: 16px; }
.sc-tuto-item b { font-size: 13.5px; display: block; }
.sc-tuto-item span { font-size: 12px; color: var(--text-3); display: block; margin-top: 1px; }
.sc-faq { display: grid; }
.sc-faq-item { border-bottom: 1px solid var(--line); padding: 12px 2px; }
.sc-faq-item:last-child { border-bottom: 0; }
.sc-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text); font-family: inherit; background: none; border: 0; padding: 0; }
.sc-faq-q .i { color: var(--text-3); flex-shrink: 0; transition: transform var(--dur), color var(--dur); }
.sc-faq-item.open .sc-faq-q .i { transform: rotate(180deg); color: var(--cat-1); }
.sc-faq-a { display: none; font-size: 13px; color: var(--text-2); line-height: 1.75; padding: 8px 2px 4px; }
.sc-faq-item.open .sc-faq-a { display: block; }
.sc-types { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 4px; }
.sc-type { font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; color: var(--text-2); }
.sc-cases { display: grid; gap: 8px; }
.sc-case { display: flex; gap: 11px; padding: 10px; border-radius: 10px; border: 1px solid transparent; }
.sc-case:hover { background: var(--surface); border-color: var(--line); }
.sc-case .sc-ic { width: 46px; height: 46px; border-radius: 10px; }
.sc-case .sc-ic .i { width: 20px; height: 20px; }
.sc-case b { font-size: 13px; display: block; }
.sc-case span { font-size: 11.5px; color: var(--text-3); }
.sc-empty { padding: 22px; text-align: center; color: var(--text-3); font-size: 13.5px; }
/* 搜索定位到的卡片：短暂高亮一圈（app.js 的 bindScriptCategory 加 1.6 秒后移除） */
.sc-card.sc-hit { border-color: var(--cat-1); box-shadow: 0 0 0 3px rgba(139, 92, 246, .18); }

/* --- 32.6.9 CTA 渐变带（紫品；文案已按站内红线改写，不提版权凭证） --- */
.sc-cta { margin: 34px 0 8px; border-radius: var(--r-lg); background: var(--cat-grad); color: #fff; padding: 38px 30px; text-align: center; position: relative; overflow: hidden; }
.sc-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 82% -30%, rgba(255, 255, 255, .22), transparent 60%); }
.sc-cta h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 860; position: relative; }
.sc-cta p { position: relative; opacity: .94; margin-top: 8px; font-size: 14px; }
.sc-cta-actions { margin-top: 20px; position: relative; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sc-cta-actions .w { background: #fff; color: var(--cat-ink); padding: 11px 24px; border-radius: 10px; font-weight: 700; border: 0; cursor: pointer; font-family: inherit; font-size: 14px; }
.sc-cta-actions .o { border: 1px solid rgba(255, 255, 255, .6); color: #fff; padding: 11px 24px; border-radius: 10px; font-weight: 600; background: transparent; cursor: pointer; font-family: inherit; font-size: 14px; }

/* --- 32.6.10 响应式（沿用风格稿的 1080 / 820 / 560 三档，作用于分类页内容区） --- */
@media (max-width: 1080px) {
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-hot-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-content { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .sc-hero { padding: 24px 0 6px; }
  .sc-flow-steps { justify-content: flex-start; }
  .sc-flow-ar { display: none; }
}
@media (max-width: 560px) {
  .sc-grid, .sc-hot-row, .sc-steps { grid-template-columns: minmax(0, 1fr); }
  .sc-h1 { font-size: 27px; }
  .sc-search { padding-left: 12px; }
  .sc-search .go { padding: 9px 14px; }
  .sc-cta { padding: 26px 18px; }
}

/* --- 32.6.11 深色主题 / reduced-motion 收口 --- */
[data-theme="dark"] .sc-faq-q .i { color: var(--text-3); }
@media (prefers-reduced-motion: reduce) {
  .sc-hot-card, .sc-card, .sc-chip, .sc-hot button, .sc-flow-ar { transition: none; }
  .sc-hot-card:hover, .sc-card:hover, .sc-hot button:hover { transform: none; }
  .nav a { transition: none; }
}

/* --- 33. 法律条款弹层 + 登录/生成入口小字同意行（纯追加块，第 22–32 节一字未动） ----------
   来源：品牌方 5 份法律文档（_ref/legal/*.docx，经 _tmp/gen-legal.js 转成 assets/js/legal.js）。
   本节只做四件事，全部是新增规则，不覆盖既有选择器：
     33.1 .legal-consent / .legal-link / .legal-note-inline —— 登录卡、登录弹层、生成入口下方的小字同意行
          （链接用品牌色 + 下划线，不用自造勾选框）；
     33.2 .legal-scrim / .legal-dialog / .legal-head / .legal-x / .legal-tabs / .legal-tab / .legal-body
          / .legal-pane —— 单弹层内含 5 个标签（网站使用条款 / 用户协议 / AI生成内容说明 /
          生成内容使用规则 / 隐私政策）；
     33.3 文档正文排版（.legal-doc-title / .legal-meta / 第 N 条小标题 / 段落）；
     33.4 窄屏（≤760px 近全屏、内容可滚动）、深色主题与 prefers-reduced-motion 收口
          （与第 30.8、31.5、32.5 节同做法）。
   说明：弹层 DOM 由 assets/js/legal.js 注入，类名一律带 legal- 前缀，避免与既有 .modal / .tabs /
   .card / .panel 互相污染；z-index 130 高于第 11 节 .modal-scrim 的 100（登录弹层里也能打开，
   关闭后焦点由 JS 交还触发链接）。 */

/* --- 33.1 小字同意行 + 链接 --- */
.legal-consent { line-height: 1.75; overflow-wrap: anywhere; }
.legal-link {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal-link:hover { color: var(--brand-3); }
.legal-note-inline {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-3);
  text-align: center;
  margin-top: 4px;
}

/* --- 33.2 弹层骨架（遮罩 / 对话框 / 头 / 关闭 / 标签 / 内容区） --- */
.legal-scrim {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center; padding: 22px;
  background: rgba(3, 6, 14, .68);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur);
}
.legal-scrim.open { opacity: 1; pointer-events: auto; }
.legal-dialog {
  width: 100%; max-width: 720px;
  max-height: min(84vh, 760px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: 24px 26px 22px;
  transform: translateY(14px) scale(.97);
  transition: transform .3s var(--ease-out);
}
.legal-scrim.open .legal-dialog { transform: none; }
.legal-dialog:focus { outline: none; }
.legal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.legal-note { margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
.legal-x {
  flex: 0 0 auto; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 9px;
  color: var(--text-3); background: transparent; border: 0; cursor: pointer;
}
.legal-x:hover { background: var(--surface-2); color: var(--text); }

/* 标签条：5 个标签一行，窄屏可横向滚动（不换行、不裁切）
   flex: 0 0 auto 是必需的：否则作为 flex 子项会被内容区压扁到 10px（实测过），标签就看不见了 */
.legal-tabs {
  display: flex; gap: 2px; margin-top: 16px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.legal-tab {
  position: relative; flex: 0 0 auto; white-space: nowrap;
  padding: 10px 14px; border: 0; background: transparent; cursor: pointer;
  font-size: 13.5px; font-weight: 560; color: var(--text-3);
  transition: color var(--dur);
}
.legal-tab:hover { color: var(--text-2); }
.legal-tab.active { color: var(--text); }
.legal-tab.active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; background: var(--grad); border-radius: 2px;
}

/* 内容区：独立滚动（滚动条在弹层内，不带动页面） */
.legal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 2px 2px; }
.legal-pane { display: none; }
.legal-pane.active { display: block; }
.legal-pane:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 6px; border-radius: var(--r-sm); }

/* --- 33.3 文档正文排版（标题层级 + 一二三分条） --- */
.legal-doc-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 4px 0 10px; }
.legal-meta { font-size: 12.5px; color: var(--text-3); margin: 0 0 2px; }
.legal-doc-title + .legal-meta { margin-top: 0; }
.legal-pane p { font-size: 14.6px; line-height: 1.85; color: var(--text-2); margin: 0 0 10px; }
.legal-pane p.legal-meta { font-size: 12.5px; line-height: 1.6; color: var(--text-3); margin: 0 0 2px; }
.legal-pane p.legal-meta + p:not(.legal-meta) { margin-top: 12px; }
.legal-pane p b { color: var(--text); font-weight: 600; }
.legal-pane p:last-child { margin-bottom: 0; }
/* 第 05 份《网站使用条款》的「第 N 条 …」小标题（Heading 1 → h4） */
.legal-pane .legal-h { font-size: 14.5px; font-weight: 650; color: var(--text); margin: 18px 0 8px; }
.legal-pane .legal-h:first-of-type { margin-top: 12px; }

/* 打开弹层时锁住页面滚动（由 legal.js 给 body 加 .legal-lock） */
body.legal-lock { overflow: hidden; }

/* --- 33.4 窄屏：近全屏 + 内容可滚动 --- */
@media (max-width: 760px) {
  .legal-scrim { padding: 0; }
  .legal-dialog {
    max-width: none; width: 100%;
    min-height: 100dvh; max-height: 100dvh;
    border: 0; border-radius: 0;
    padding: 16px 16px max(16px, env(safe-area-inset-bottom));
    transform: translateY(10px);
  }
  .legal-note-inline { text-align: left; }
  .legal-tabs { margin-top: 12px; }
  .legal-tab { padding: 10px 11px; font-size: 13px; }
  .legal-pane p { font-size: 15px; }
}

/* --- 33.4b 深色主题 / 减少动态效果收口 --- */
[data-theme="dark"] .legal-x:hover { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) {
  .legal-scrim, .legal-dialog { transition: none; }
}

/* ---------- 34. 品牌方 2026-10 第 2 批调整（移动端）：隐藏 hero 大搜索框 / 统计行 5 列一行 / 隐藏收藏入口 ----------
   来源：品牌方看了手机端截图后的 3 条原话 ——
     「移动端不展示收藏按钮。大的搜索框不展示。只保留顶部的。收录工具和数字这一列，做成五列，横排，目前布局有点乱。」
   本节全部为**追加**规则，第 22–33 节一字未动；所有覆盖都靠「同特异性 + 更靠后」或提高一级特异性，
   与第 27.4 / 28 / 30 节覆盖前文的做法一致。
   分节：
     34.1 隐藏 hero 大搜索框（品牌方：只保留顶栏搜索）
     34.2 统计行 5 列横排一行（≥1081 / 761–1080 / ≤760 三档）
     34.3 隐藏收藏入口（推广带「立即收藏」；工具卡 .fav 见 30.5）
     34.4 深色主题 / reduced-motion 收口 */

/* --- 34.1 首页：顶栏搜索收起来，只用 hero 大搜索框 ---
   品牌方完整规则（第 2 次说明，以此为准）：「默认展示下面的搜索。如果是其他子页面，搜索框展示于顶部。」
   → 首页 index.html 用 .hero 里的 .big-search（已恢复原样，第 34.1 节不再碰它），
     顶栏那个 #form.mp-searchbar 收起来；其它 18 页的顶栏副本一字未动。
   事实核对（本次实测）：顶栏里**只有** .mp-searchbar 这一个搜索控件，而第 25 节把它限定为
   display:none（≥761px）→ 桌面端顶栏本来就没有可见搜索框，桌面端搜索入口是 ⌘K 的
   .mp-search-panel 全屏浮层；≤760px 才出现 .mp-searchbar 胶囊。所以「顶栏搜索」在首页的
   实际可见形态 = 移动端那一颗胶囊，本条覆盖的也正是它（窄屏不再出现 hero + 顶栏两个搜索框）。
   落地方式 = 保留 DOM + index.html 上的 .hide + hidden + aria-hidden="true"：
     · app.js 的 bindMobileSearch()（L368）取不到 #form 时直接 return，不报错；
     · display:none 的元素不可聚焦、不进 Tab 序，配合 hidden 双保险，不会留下「看不见但 Tab 停得住」的输入框。
   为什么不在 CSS 里裸写 [hidden]{display:none!important}：那会命中全站含 hidden 的元素
   （例如第 29/30 节里控制「+」后缀与占位用的 data-stat-suffix），破坏既有行为。 */
.mp-searchbar.hide { display: none !important; }

/* --- 34.2 统计行：5 列横排一行 ---
   现状（第 30.1 节）：≥761px 已经是 5 列一行；3+2 是 ≤760px 的 flex 定宽布局。
   品牌方：「收录工具和数字这一列，做成五列，横排，目前布局有点乱。」→ 移动端也改 5 列一行，
   顺带把该行右侧的「注册用户」列位置规整掉。
   ⚠️ 约束：data-count / data-stat / data-stat-placeholder / data-stat-suffix 全部保留（滚动动画与
   data/stats.json 驱动依赖它们），这里只改排版，不碰任何 data-* 属性。 */
.trust-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px 12px;
}
/* ≥1081px：与 30.1 同值再声明一次，保证「任何宽度下都是 5 列」这一条只由本节说了算 */
@media (min-width: 1081px) {
  .trust-5 { gap: 20px 16px; }
  .trust-5 .stat-num { font-size: 30px; }
  .trust-5 .stat-label { font-size: 13px; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .trust-5 .stat-num { font-size: 24px; }
  .trust-5 .stat-label { font-size: 12px; }
}
/* ≤760px：5 列横排一行。字号按「列宽 = 视口 − 侧栏 60px − .wrap 两侧 32px」的实测值定：
   512px → 内容区 420px，列宽 = (420 − 48) / 5 = 74.4px，17px 数字下「6,800+」实测宽 44.4px（余 30px）；
   375px → 内容区 283px，列宽 = (283 − 32) / 5 = 50.2px，按字符宽比例折算「6,800+」约 32.1px（余 18px）。
   nowrap 保证长数字不折行。⚠️ 375px 只有折算值、无 headless 实测（见交付简报）。 */
@media (max-width: 760px) {
  .trust-5 {
    /* 5 列 + 更小的行/列间距：是「一行 5 列」能真正放下的前提，不是可选样式 */
    gap: 14px 8px;
    border-top: 1px solid var(--line);
    padding-top: 20px;
  }
  .trust-5 .trust-item { min-width: 0; }
  .trust-5 .stat-num {
    font-size: 17px;
    letter-spacing: -.02em;
    line-height: 1.25;
    white-space: nowrap;
  }
  .trust-5 .stat-label {
    font-size: 11.5px;
    line-height: 1.3;
    margin-top: 6px;
    white-space: nowrap;
  }
  /* 「+」后缀跟随缩放：30px 那一档是 .62em，这里显式压一档，避免它比数字本身还抢眼 */
  .trust-5 .stat-num .stat-suffix { font-size: .6em; margin-left: 0; }
}
/* ≤430px（真机口径，headless 无法实测）：再收一档字号兜底，宁可小一点也不要溢出
   列表格。17px → 15px，标签 11.5px → 10.5px。 */
@media (max-width: 430px) {
  .trust-5 { gap: 12px 6px; }
  .trust-5 .stat-num { font-size: 15px; }
  .trust-5 .stat-label { font-size: 10.5px; }
}

/* --- 34.3 隐藏收藏入口（移动端 ≤760px） ---
   第 30.5 节已经收掉了工具卡右上角的 .fav 与详情页 .btn[title="收藏该工具"]；
   品牌方这轮点的是推广带「把云枢设为首页」里那颗「立即收藏」按钮（.promo-band-btn + [data-set-home]）。
   要求：只隐藏按钮，**区块本身保留**（品牌方早前明确要求保留该区块）；
   data-set-home 的行为一行不改（它已有「Ctrl/⌘+D 提示、不伪造成功」的逻辑）。
   注意：第 30.7 节窄屏把 .promo-band .btn 撑成 width:100%，这里同特异性 + 更靠后收回。 */
@media (max-width: 760px) {
  .promo-band .promo-band-btn[data-set-home] {
    display: none !important;
    width: auto;
    align-self: flex-start;
  }
}

/* --- 34.3b script.html（剧本创作）≤760px：隐藏页内 .sc-search，
       只留顶栏 .mp-searchbar（品牌方：「剧本创作页 ≤760px 的第二个搜索框，如果是顶部的话，保留」） ---
   实测（CDP，script.html）：
     760px → .mp-searchbar 在顶栏（top=9），.sc-search 在 .sc-hero 里（top=238），相差 229px
     512px → 顶栏 top=9 / .sc-search top=256，相差 247px
     430px / 395px → 顶栏 top=9 / .sc-search top=288，相差 279px
   → .sc-search **不在页面顶部**，按品牌方条件「如果是顶部的话保留」的否定分支处理：≤760px 隐藏它。
   ⚠️ 功能代价（已如实报告，等品牌方定夺）：.sc-search 是本页 12 张工具卡的关键词筛选
     （app.js bindScriptCategory() → data-sc-search，输入后本页筛选 + 滚到首个命中 + 空态提示）；
     顶栏 .mp-searchbar 提交后跳 tools.html?q=… 是跨页整站搜索，不能筛本页。
     隐藏后移动端只剩 8 个二级标签（全部 + 7 个创作方向）可用，按名字搜单款工具的能力会失去。
     这里只做 CSS 隐藏（不动 script.html，app.js 的绑定照旧；输入框 display:none 后不可聚焦）。 */
@media (max-width: 760px) {
  .sc-search { display: none !important; }
}

/* --- 34.4 深色主题 / 减少动态效果收口 --- */
[data-theme="dark"] .trust-5 { border-top-color: var(--line); }
@media (prefers-reduced-motion: reduce) {
  .trust-5 .stat-num { transition: none; }
}

/* ==========================================================================
   35. AI 收录总览（tools.html 的 #ai-directory 区块；纯追加块，第 22–34 节一字未动）
   --------------------------------------------------------------------------
   背景：品牌方要求把「AI 工具/模型收录」做完整（国内外、各类型齐全），但**不要**
   把收录条目一次性灌成前台工具卡（那会改动首页统计、侧栏与瓦片，并破坏既有
   「115 条 / 26 分类 / 统计恒等式」的验收）。所以收录落在 tools.html 的
   「AI 收录总览」区块：**分类型分组的文字链接 + 类型标签**，不是卡片网格。

   为什么这个区块对 SEO 有价值：每条都是**真实外链**（无 nofollow），
   加上按大类的分节文本与 ItemList 结构化数据，属于「有原创整理价值的目录页」，
   而不是「批量生成的薄页面」（见 docs/工具采集管线规格-v1.md 第 0.2 节的禁止清单）。

   口径分离（页面上必须同时可见，不得混为一谈）：
     「站内可用 115 款」   = data/tools.json → stats.tools
     「已收录 N 个 AI 服务」= data/ai-directory.json → stats.directory_count

   本节只做四件事，全部是新增规则，不覆盖既有选择器：
     35.1 区块外壳与 4 项口径统计条
     35.2 分组标题 + 条目列表（标签在名称之前，≤760px 换行且标签不撑破行）
     35.3 深色主题 / prefers-reduced-motion 收口
     35.4 打印兜底（收录目录常被打印或另存） */

/* --- 35.1 区块外壳 + 口径统计条 --- */
/* 锚点跳转（页内链接 / 外部深链 #ai-directory、#dir-xxx）时给吸顶顶栏留出 84px 偏移：
   与第 32.3 节 .tool-card[id] 同做法。不设的话标题会被吸顶顶栏压住（CDP 实测：
   1440px 下 section 顶到视口顶，h2 前 3 行被顶栏遮住）。 */
#ai-directory { scroll-margin-top: 84px; }
.ai-dir-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 4px;
}
.ai-dir-stat {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  background: var(--card, var(--bg-1));
}
.ai-dir-stat b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.ai-dir-stat span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-3); }
.ai-dir-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md, 12px);
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-2);
}
.ai-dir-note code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--bg-2, rgba(120, 120, 140, .12));
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
}

/* --- 35.2 分组标题 + 条目列表 --- */
.ai-dir-group { margin-top: 30px; }
.ai-dir-h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 700;
  scroll-margin-top: 84px;
}
.ai-dir-count { font-size: 12.5px; font-weight: 600; color: var(--text-3); }

.ai-dir-list { list-style: none; margin: 0; padding: 0; }
.ai-dir-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.ai-dir-item:last-child { border-bottom: none; }
.ai-dir-link {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ai-dir-link:hover { color: var(--brand-3); border-bottom-color: currentColor; }
.ai-dir-link:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 2px; border-radius: 3px; }

.ai-dir-tag {
  flex: 0 0 auto;
  padding: 1px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-3);
  white-space: nowrap;
}
.ai-dir-tag-cn { border-color: rgba(52, 211, 153, .55); color: #0f766e; }
/* 境外条目：与国内条目的绿色徽标区分开，但不抢视觉（中性蓝灰） */
.ai-dir-tag-intl { border-color: rgba(99, 102, 241, .45); color: #4f46e5; }
.ai-dir-desc {
  flex: 1 1 320px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
}

/* 窄屏：统计条 2 列 → 单列，标签与简介各占一整行，长 URL 不撑破容器 */
@media (max-width: 1080px) {
  .ai-dir-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ai-dir-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ai-dir-item { gap: 6px; padding: 10px 0; }
  .ai-dir-desc { flex: 1 1 100%; }
  .ai-dir-note { font-size: 12.5px; }
}

/* --- 35.3 深色主题 / reduced-motion 收口（与第 30.8 / 31.5 / 32.5 / 33.4b / 34.4 同做法） --- */
[data-theme="dark"] .ai-dir-stat { background: var(--bg-2, rgba(255, 255, 255, .04)); }
[data-theme="dark"] .ai-dir-tag-cn { border-color: rgba(52, 211, 153, .45); color: #6ee7b7; }
[data-theme="dark"] .ai-dir-tag-intl { border-color: rgba(129, 140, 248, .45); color: #a5b4fc; }
[data-theme="dark"] .ai-dir-note code { background: rgba(255, 255, 255, .10); }
@media (prefers-reduced-motion: reduce) {
  .ai-dir-link { transition: none; }
}

/* --- 35.4 打印兜底：收录目录常被打印或另存为 PDF，去掉交互态底色、保留分组分隔 --- */
@media print {
  .ai-dir-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ai-dir-stat { border-color: #999; background: none; }
  .ai-dir-link { color: #000; }
  .ai-dir-item { break-inside: avoid; }
}

/* ==========================================================================
   36. script.html（剧本创作页）紫色主题统一 + 全案案例区（含品牌方真实项目角色图鉴）
   --------------------------------------------------------------------------
   纯追加块：第 22–34 节一字未动。第 35 节已被 tools.html 的「AI 收录总览」占用
   （同批另一位同事的改动），为免编号撞车，本节顺延为 36。

   36.1 页面作用域紫色令牌（只作用于 body[data-page="script"]）
        色值**直接取自本页既有紫色，未另发明**：
          main.css 第 32.6.1 节 .cat-script 的
            --cat-1 #8B5CF6（紫罗兰）· --cat-2 #EC4899（品红）
            --cat-grad linear-gradient(135deg,#8B5CF6 0%,#EC4899 100%)
            --cat-ink #6D28D9
          也就是 .sc-cta 渐变带 / .sc-search .go / .sc-card.sc-hit 用的同一组色。
        为什么定在 body 上、而不是复用 .cat-script：顶栏与页脚都是 .cat-script 的**祖先**
        （.cat-script 只是页面内容区那一层 div），所以 .cat-script 里的变量对它们无效 ——
        顺带修正一个既有失效选择器：第 32.6.1 节写的 `.cat-script .nav a.active`
        其实永远匹配不到顶栏的 .nav（顶栏在 .cat-script 之外），本节的
        `body[data-page="script"] .topbar .nav a.active` 才是真正生效的那条。
        深色主题另给一套（沿用第 32.6.1 节深色版的同一组色）。

   为什么用 body[data-page="script"] 作用域（方案 a）：顶栏/页脚是 20 个页面共用的
   chrome，改公共类会污染其余 19 页。给 script.html 的 <body> 加 data-page="script"
   是「只改这一个文件、零污染」的做法；已验证其余 19 个 HTML 里没有 data-page 标记。

   本节改的页面元素（逐项，便于核对）：
     36.2 顶栏：.brand-mark（logo 方块）· .nav a.active / :hover · .btn-primary（免费开始）
          · .btn-ghost（登录）· .btn-icon:hover / :focus-visible（主题切换）
          另含移动端等价物 .drawer 里的 .brand-mark / .btn-primary / .btn-ghost，
          以及登录弹层 .modal .btn-primary（都在本页内，避免点开后又跳回绿色）
     36.3 页脚：只改 .foot-grid 内的 .brand-mark 与链接 hover。
          **明确不动**：.foot-bottom（版权、津ICP备号、公安网备注释）与
          .foot .badge-ok（「网关正常」是语义状态色，绿色=健康，保持不动）。
   36.4 案例展示区外壳与归属标注
   36.5 案例角色图鉴（缩略图网格 + 大图弹层）
   36.6 深色主题 / reduced-motion 收口
   36.7 响应式（1080 / 760 两档）
   ========================================================================== */

/* --- 36.1 页面作用域紫色令牌（值同第 32.6.1 节，仅作用域换到 body 上） --- */
body[data-page="script"] {
  --pg-1: #8B5CF6;
  --pg-2: #EC4899;
  --pg-grad: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  --pg-ink: #6D28D9;
  --pg-ink-2: #5B21B6;
  --pg-soft: rgba(139, 92, 246, .12);
  --pg-line: rgba(139, 92, 246, .40);
  --pg-glow: rgba(139, 92, 246, .80);
}
[data-theme="dark"] body[data-page="script"] {
  --pg-1: #A78BFA;
  --pg-2: #F472B6;
  --pg-grad: linear-gradient(135deg, #A78BFA 0%, #F472B6 100%);
  --pg-ink: #C4B5FD;
  --pg-ink-2: #DDD6FE;
  --pg-soft: rgba(167, 139, 250, .18);
  --pg-line: rgba(167, 139, 250, .48);
  --pg-glow: rgba(167, 139, 250, .55);
}

/* --- 36.2 顶栏 + 移动端抽屉 + 登录弹层（只在本页生效） --- */
body[data-page="script"] .topbar .brand-mark,
body[data-page="script"] .drawer .brand-mark {
  background: var(--pg-grad);
  box-shadow: 0 6px 20px -6px var(--pg-glow);
}
body[data-page="script"] .topbar .nav a.active {
  background: var(--pg-soft);
  color: var(--pg-ink-2);
}
body[data-page="script"] .topbar .nav a:hover {
  background: var(--pg-soft);
  color: var(--pg-ink-2);
}
body[data-page="script"] .topbar .btn-primary,
body[data-page="script"] .drawer .btn-primary,
body[data-page="script"] .modal .btn-primary {
  background: var(--pg-grad);
  box-shadow: 0 8px 24px -12px var(--pg-glow);
}
body[data-page="script"] .topbar .btn-primary:hover,
body[data-page="script"] .drawer .btn-primary:hover,
body[data-page="script"] .modal .btn-primary:hover {
  box-shadow: 0 14px 34px -10px var(--pg-glow);
}
body[data-page="script"] .topbar .btn-ghost,
body[data-page="script"] .drawer .btn-ghost {
  color: var(--pg-ink-2);
}
body[data-page="script"] .topbar .btn-ghost:hover {
  background: var(--pg-soft);
  color: var(--pg-ink-2);
}
body[data-page="script"] .topbar .btn-icon:hover {
  border-color: var(--pg-line);
  color: var(--pg-ink-2);
}
body[data-page="script"] .topbar .btn-icon:focus-visible {
  outline: 2px solid var(--pg-1);
  outline-offset: 2px;
}

/* --- 36.3 页脚：只跟 .foot-grid 里的 logo 与链接 hover；.foot-bottom 一律不染 --- */
body[data-page="script"] .foot .foot-grid .brand-mark {
  background: var(--pg-grad);
  box-shadow: 0 6px 20px -6px var(--pg-glow);
}
body[data-page="script"] .foot .foot-grid a:hover {
  color: var(--pg-ink-2);
}

/* --- 36.4 案例展示区：7 个全案（列表 + 展开详情）+ 归属标注 --- */
.sc-case-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px dashed var(--pg-line);
  border-radius: var(--r, 16px);
  background: var(--surface);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-2);
}
.sc-case-note b { color: var(--text); }
.sc-case-list { display: grid; gap: 12px; }
.sc-case-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.sc-case-item[open] { border-color: var(--pg-line); }
.sc-case-sum {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  transition: background var(--dur);
}
.sc-case-sum::-webkit-details-marker { display: none; }
.sc-case-sum:hover { background: var(--surface); }
.sc-case-sum .sc-ic {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--pg-soft); color: var(--pg-ink);
  flex-shrink: 0;
}
.sc-case-tt { display: block; flex: 1; min-width: 0; }
.sc-case-title {
  display: block;
  font-size: 17px; font-weight: 820; letter-spacing: -.01em;
  line-height: 1.35; color: var(--text);
}
.sc-case-subtitle {
  display: block;
  margin-top: 3px;
  font-size: 14px; font-weight: 600; color: var(--pg-ink-2);
}
.sc-case-sub {
  display: block;
  margin-top: 4px;
  font-size: 12.4px; line-height: 1.7; color: var(--text-3);
}
.sc-case-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sc-tg-real {
  background: var(--pg-soft); color: var(--pg-ink);
  border: 1px solid var(--pg-line);
}
.sc-tg-ai {
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--line-strong);
}
.sc-case-more {
  flex-shrink: 0; align-self: center;
  font-size: 12.5px; font-weight: 600; color: var(--pg-ink-2);
}
.sc-case-more::before { content: "展开"; }
.sc-case-item[open] .sc-case-more::before { content: "收起"; }
.sc-case-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.sc-case-sell {
  margin-top: 12px; padding: 10px 12px;
  border-radius: 10px; background: var(--surface);
  font-size: 13.6px; line-height: 1.85; color: var(--text-2);
}
.sc-case-sell b { color: var(--text); }
.sc-case-blk { margin-top: 13px; }
.sc-case-blk > b { display: block; margin-bottom: 5px; font-size: 13.6px; color: var(--pg-ink-2); }
.sc-case-blk p { font-size: 13.4px; line-height: 1.85; color: var(--text-2); }
.sc-case-ul { list-style: none; display: grid; gap: 5px; margin: 0; padding: 0; }
.sc-case-ul li {
  position: relative; padding-left: 13px;
  font-size: 13.2px; line-height: 1.8; color: var(--text-2);
}
.sc-case-ul li::before {
  content: ""; position: absolute; left: 0; top: .74em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--pg-1);
}
.sc-case-ul li b { color: var(--text); }
.sc-case-quote {
  margin-top: 4px; padding-left: 11px;
  border-left: 2px solid var(--pg-line);
  font-size: 13.2px; line-height: 1.8; color: var(--text-2);
}

/* --- 36.5 案例角色图鉴：缩略图网格（服务端已生成缩略图，页面不做 CSS 缩放）+ 大图弹层 --- */
.sc-gallery { margin-top: 14px; }
.sc-gallery-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.sc-gallery-head b { font-size: 14.5px; font-weight: 800; color: var(--text); }
.sc-gallery-head span { flex: 1 1 320px; min-width: 0; font-size: 12.2px; line-height: 1.75; color: var(--text-3); }
.sc-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sc-shot { margin: 0; min-width: 0; }
.sc-shot-a {
  display: block; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
  transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.sc-shot-a:hover {
  border-color: var(--pg-1);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px var(--pg-glow);
}
.sc-shot-a:focus-visible { outline: 2px solid var(--pg-1); outline-offset: 2px; }
.sc-shot img { display: block; width: 100%; height: auto; }
.sc-shot figcaption {
  margin-top: 5px; font-size: 11.6px; color: var(--text-3); text-align: center;
}
.sc-shot-wide { max-width: 560px; margin: 12px auto 6px; }
.sc-shot-wide figcaption { text-align: left; line-height: 1.7; }
.sc-role { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.sc-role:first-of-type { margin-top: 12px; padding-top: 0; border-top: 0; }
.sc-role-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.sc-role-head b { font-size: 15px; font-weight: 800; color: var(--text); }
.sc-role-tag {
  padding: 1px 9px; border-radius: 999px;
  background: var(--pg-soft); border: 1px solid var(--pg-line);
  font-size: 12px; color: var(--pg-ink-2);
}
.sc-role-debt {
  margin-bottom: 9px; padding-left: 11px;
  border-left: 2px solid var(--pg-line);
  font-size: 12.8px; line-height: 1.8; color: var(--text-2);
}
.sc-role-debt b { color: var(--pg-ink-2); }
.sc-role .sc-shots { margin-top: 8px; }

/* 大图弹层：复用站内 .modal-scrim / .modal 骨架，只放宽尺寸（不新建页面） */
.sc-lightbox { z-index: 120; }
.sc-lightbox-box { max-width: min(1000px, 92vw); width: auto; padding: 14px; }
.sc-lightbox-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.sc-lightbox-head b { font-size: 14px; font-weight: 700; color: var(--text); }
.sc-lightbox-body {
  display: grid; place-items: center;
  max-height: 74vh; overflow: auto;
  border-radius: 12px; background: #0B0F14;
}
.sc-lightbox-body img { width: auto; height: auto; max-width: 100%; max-height: 74vh; border-radius: 12px; }

/* --- 36.6 深色主题 / reduced-motion 收口（与第 30.8 / 31.5 / 32.6.11 / 33.4b / 34.4 同做法） --- */
[data-theme="dark"] .sc-case-note { background: var(--surface); }
[data-theme="dark"] .sc-case-sell { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .sc-lightbox-body { background: #05070A; }
[data-theme="dark"] .sc-tg-ai { color: var(--text-2); }
@media (prefers-reduced-motion: reduce) {
  .sc-shot-a { transition: none; }
  .sc-shot-a:hover { transform: none; }
  .sc-case-sum { transition: none; }
}

/* --- 36.7 响应式：图鉴网格 4 → 3 → 2 列；窄屏弹层近全屏 --- */
@media (max-width: 1080px) {
  .sc-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sc-case-sum { padding: 12px; gap: 10px; }
  .sc-case-sum .sc-ic { width: 34px; height: 34px; border-radius: 10px; }
  .sc-case-body { padding: 4px 12px 14px; }
  .sc-case-title { font-size: 15.5px; }
  .sc-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sc-shot-wide { max-width: 100%; }
  .sc-lightbox-box { max-width: 96vw; padding: 10px; }
  .sc-lightbox-body,
  .sc-lightbox-body img { max-height: 64vh; }
}

/* --- 36.3b 页脚底部（版权 / 津ICP备号 / 公安网备注释）：连 hover 都不染色 ---
   站内共用的 `.foot a:hover { color: var(--brand-3) }`（翡翠绿）对页脚**所有**链接生效，
   底部备案号那一条也会被它染成绿色。品牌方红线是「备案号与版权文字不要染色」，
   所以在 script.html 这一页把 .foot-bottom 内的链接 hover 一并收回中性色（仍是页面作用域，
   第 36.3 节只让 .foot-grid 的链接跟紫色；其余 19 页的行为一字未改）。 */
body[data-page="script"] .foot .foot-bottom a:hover { color: var(--text-2); }

/* --- 36.2b 顶栏「移动端真输入搜索胶囊」（≤760px 才可见）也跟紫色 ---
   第 25 节的 .mp-searchbar-go 用的是站内品牌渐变 --grad（翡翠绿），在 script.html 的
   窄屏顶栏上它是唯一还绿着的元素，与品牌方「顶栏也变成同款紫色」的要求冲突。
   这里只是把「搜索」按钮与聚焦描边换成同款紫色，仍然只在 body[data-page="script"] 内生效。 */
body[data-page="script"] .topbar .mp-searchbar-go {
  background: var(--pg-grad);
  box-shadow: 0 6px 16px -8px var(--pg-glow);
}
body[data-page="script"] .topbar .mp-searchbar:focus-within {
  border-color: var(--pg-line);
  box-shadow: 0 0 0 3px var(--pg-soft);
}

/* ==========================================================================
   36.8 B 批：创作流程与提示词体系 · 三个入口 · 输出四件套
   36.9 B 批：口语化标记体系 · 创作说明六件套
   36.10 C 批：版权红线与输入侧拦截 · 跨境处理单独同意（含弹层）· 统一加载文案
   纯追加块；第 22–35 节一字未动。所有类名沿用 sc- 前缀，仍全部限定在
   body[data-page="script"] 相关结构内或本页独有区块中，不影响其余 19 页。
   ========================================================================== */

/* --- 36.8.1 四个阶段（静态创作流程说明；按 C② 口径取「不涉及内部细节的阶段名」，不用 ①②③④ 编号） --- */
.sc-stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sc-stage {
  padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-elev); box-shadow: var(--sh-1);
}
.sc-stage-no { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--pg-ink-2); }
.sc-stage-nm { margin-top: 4px; font-size: 15px; font-weight: 800; color: var(--text); }
.sc-stage-rl { margin-top: 6px; font-size: 12.6px; font-weight: 600; color: var(--pg-ink-2); }
.sc-stage-nt { margin-top: 6px; font-size: 12.4px; line-height: 1.8; color: var(--text-3); }
.sc-stage-note {
  margin: 12px 0 0; padding: 10px 12px;
  border: 1px dashed var(--pg-line); border-radius: var(--r, 16px);
  background: var(--surface); font-size: 12.6px; line-height: 1.8; color: var(--text-2);
}
.sc-stage-note b { color: var(--text); }

/* --- 36.8.2 14 个环节的提示词卡片（details 折叠：列表里只看名字，展开看输入输出与约束） --- */
.sc-pr-list { display: grid; gap: 8px; margin-top: 14px; }
.sc-pr { border: 1px solid var(--line); border-radius: var(--r, 16px); background: var(--bg-elev); overflow: hidden; }
.sc-pr[open] { border-color: var(--pg-line); }
.sc-pr-sum {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  cursor: pointer; list-style: none; transition: background var(--dur);
}
.sc-pr-sum::-webkit-details-marker { display: none; }
.sc-pr-sum:hover { background: var(--surface); }
.sc-pr-no {
  flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: var(--pg-soft); color: var(--pg-ink);
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.sc-pr-nm { font-size: 14.5px; font-weight: 750; color: var(--text); }
.sc-pr-stage {
  flex-shrink: 0; margin-left: auto; padding: 1px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); font-size: 11.5px; color: var(--text-3);
}
.sc-pr-more { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--pg-ink-2); }
.sc-pr-more::before { content: "展开"; }
.sc-pr[open] .sc-pr-more::before { content: "收起"; }
.sc-pr-body { padding: 2px 14px 14px; border-top: 1px solid var(--line); }
.sc-pr-use { margin-top: 10px; font-size: 13.4px; line-height: 1.85; color: var(--text-2); }
.sc-pr-row { display: flex; gap: 10px; margin-top: 8px; font-size: 13px; line-height: 1.8; }
.sc-pr-k {
  flex-shrink: 0; width: 62px; font-weight: 700; color: var(--pg-ink-2);
}
.sc-pr-v { flex: 1; min-width: 0; color: var(--text-2); }
.sc-pr-cons { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sc-pr-cons li { position: relative; padding-left: 12px; }
.sc-pr-cons li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--pg-1);
}
.sc-pr-sample {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface); border-left: 2px solid var(--pg-line);
}
.sc-pr-sample b { display: block; font-size: 12.4px; color: var(--pg-ink-2); margin-bottom: 3px; }
.sc-pr-sample p { font-size: 13px; line-height: 1.85; color: var(--text-2); }

/* --- 36.8.3 三个入口（原型：点击切换结果面板 + 真实加载态） --- */
.sc-entry-box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r, 16px);
  background: var(--bg-elev); box-shadow: var(--sh-1);
}
.sc-entry-box-ic {
  flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: var(--pg-grad); color: #fff; font-size: 11.5px; font-weight: 800;
}
.sc-entry-box-txt {
  padding: 4px 12px; border-radius: 999px; background: var(--surface-2);
  font-size: 13.4px; font-weight: 600; color: var(--text);
}
.sc-entry-box-hint { flex: 1 1 260px; min-width: 0; font-size: 12.2px; line-height: 1.75; color: var(--text-3); }
.sc-entry-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sc-entry {
  display: grid; gap: 2px; text-align: left; padding: 11px 15px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r, 16px); background: var(--bg-elev);
  font-family: inherit; transition: border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.sc-entry:hover { border-color: var(--pg-line); }
.sc-entry.on { border-color: var(--pg-1); background: var(--pg-soft); box-shadow: 0 8px 22px -16px var(--pg-glow); }
.sc-entry b { font-size: 14.5px; font-weight: 800; color: var(--text); }
.sc-entry span { font-size: 11.8px; color: var(--text-3); }
.sc-entry.on span { color: var(--pg-ink-2); }
.sc-out { display: none; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); box-shadow: var(--sh-1); }
.sc-out.on { display: block; }
.sc-out-main { display: block; }
.sc-out.is-loading .sc-out-main { display: none; }
.sc-out-loading { display: none; }
.sc-out.is-loading .sc-out-loading { display: flex; }
.sc-out-tap { font-size: 13.4px; line-height: 1.8; color: var(--text-2); }
.sc-out-flow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--surface); }
.sc-out-flow-lb { flex-shrink: 0; font-size: 11.8px; font-weight: 700; color: var(--pg-ink-2); }
.sc-out-flow-steps { flex: 1 1 300px; min-width: 0; font-size: 12.4px; line-height: 1.9; color: var(--text-3); }
.sc-out-flow-steps i { font-style: normal; }
.sc-out-blk { margin-top: 12px; }
.sc-out-blk > b { display: block; margin-bottom: 5px; font-size: 13.4px; color: var(--pg-ink-2); }
.sc-out-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sc-out-list li { position: relative; padding-left: 13px; font-size: 13px; line-height: 1.8; color: var(--text-2); }
.sc-out-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--pg-1); }
.sc-out-note { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12.4px; line-height: 1.8; color: var(--text-3); }

/* 统一加载文案（C②）：凡是不便展示的内部动作，等待时都用同一句 */
.sc-spin {
  flex-shrink: 0; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--pg-line); border-top-color: var(--pg-1);
  animation: sc-spin .8s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-out-loading, .sc-btn-loading {
  align-items: center; gap: 9px;
  font-size: 13.2px; color: var(--text-2);
}
.sc-loading-demo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px;
  padding: 12px 14px; border: 1px dashed var(--pg-line); border-radius: var(--r, 16px); background: var(--surface);
}
.sc-loading-lb { font-size: 12.4px; font-weight: 700; color: var(--pg-ink-2); }
.sc-btn-loading {
  display: inline-flex; height: 40px; padding: 0 17px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface-2); font-family: inherit; cursor: default;
}
.sc-loading-hint { flex: 1 1 300px; min-width: 0; font-size: 12.2px; line-height: 1.75; color: var(--text-3); }

/* --- 36.8.4 输出四件套 + 通用表格 --- */
.sc-deliv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sc-deliv { padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); box-shadow: var(--sh-1); }
.sc-deliv-nm { font-size: 15px; font-weight: 800; color: var(--text); }
.sc-deliv p { margin-top: 6px; font-size: 13px; line-height: 1.85; color: var(--text-2); }
.sc-deliv-fmt { margin-top: 8px; font-size: 12.2px; color: var(--pg-ink-2); }
.sc-shot-tbl { margin-top: 14px; }
.sc-tbl { margin-top: 10px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.sc-tbl table { width: 100%; border-collapse: collapse; font-size: 12.8px; }
.sc-tbl th, .sc-tbl td { padding: 8px 11px; text-align: left; vertical-align: top; line-height: 1.7; border-bottom: 1px solid var(--line); }
.sc-tbl th { background: var(--surface-2); font-weight: 700; color: var(--text); white-space: nowrap; }
.sc-tbl td { color: var(--text-2); }
.sc-tbl tbody tr:last-child td { border-bottom: 0; }
.sc-tbl tbody tr:hover td { background: var(--surface); }

/* --- 36.9.1 口语化标记体系（图例 + 统计 + 带标记样例） --- */
.sc-marks-intro { margin: 0 0 14px; font-size: 13.2px; line-height: 1.85; color: var(--text-2); }
.sc-marks-intro b { color: var(--text); }
.sc-mark-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sc-mark-card { padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r, 16px); background: var(--bg-elev); box-shadow: var(--sh-1); }
.mark, .mk { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; font-weight: 700; }
.mk {
  display: inline-block; padding: 2px 8px; border-radius: 7px;
  background: var(--pg-soft); border: 1px solid var(--pg-line); color: var(--pg-ink-2);
  white-space: nowrap;
}
.sc-mark-desc { margin-top: 8px; font-size: 12.4px; line-height: 1.75; color: var(--text-2); }
.sc-mark-desc b { display: block; font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.sc-mark-layer { margin-top: 8px; font-size: 11.6px; color: var(--text-3); }
.sc-marks-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 14px; }
.sc-mark-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 10px; }
.sc-mark-stat-total { flex-shrink: 0; text-align: center; padding: 10px 18px; border-radius: var(--r, 16px); background: var(--pg-soft); border: 1px solid var(--pg-line); }
.sc-mark-stat-total b { display: block; font-size: 30px; font-weight: 860; line-height: 1.1; color: var(--pg-ink-2); font-variant-numeric: tabular-nums; }
.sc-mark-stat-total span { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); }
.sc-mark-bd { flex: 1 1 220px; min-width: 0; display: grid; gap: 6px; }
.sc-mark-bd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-mark-bd-n { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sc-marks-note { margin-top: 12px; font-size: 12.4px; line-height: 1.8; color: var(--text-3); }
.sc-script-sample { margin-top: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }
.sc-script-sample p { margin: 0; font-size: 12.9px; line-height: 1.85; }
.sc-ss-scene { font-weight: 750; color: var(--text); }
.sc-ss-action { margin-top: 8px; color: var(--text-2); }
.sc-ss-speaker { margin-top: 10px; font-weight: 750; color: var(--text); }
.sc-ss-line { padding-left: 12px; color: var(--text); }
.sc-ss-sub { margin-top: 2px; padding-left: 12px; font-size: 12.2px; color: var(--pg-ink-2); }
.sc-ss-note { margin-top: 3px; padding-left: 12px; font-size: 11.8px; color: var(--text-3); }

/* --- 36.9.2 创作说明六件套 --- */
.sc-prov-list { display: grid; gap: 8px; }
.sc-prov { border: 1px solid var(--line); border-radius: var(--r, 16px); background: var(--bg-elev); overflow: hidden; }
.sc-prov[open] { border-color: var(--pg-line); }
.sc-prov-sum {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 12px 14px; cursor: pointer; list-style: none; transition: background var(--dur);
}
.sc-prov-sum::-webkit-details-marker { display: none; }
.sc-prov-sum:hover { background: var(--surface); }
.sc-prov-nm { flex-shrink: 0; font-size: 14px; font-weight: 780; color: var(--text); }
.sc-prov-desc { flex: 1 1 300px; min-width: 0; font-size: 12.4px; line-height: 1.75; color: var(--text-3); }
.sc-prov-more { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--pg-ink-2); }
.sc-prov-more::before { content: "展开"; }
.sc-prov[open] .sc-prov-more::before { content: "收起"; }
.sc-prov-body { padding: 2px 14px 14px; border-top: 1px solid var(--line); }

/* --- 36.10.1 版权红线与输入侧拦截 --- */
.sc-policy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sc-policy-col { padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); box-shadow: var(--sh-1); }
.sc-policy-head { font-size: 13.4px; font-weight: 800; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sc-policy-ok { color: #0B7A53; }
.sc-policy-no { color: #BE123C; }
[data-theme="dark"] .sc-policy-ok { color: #6EE7B7; }
[data-theme="dark"] .sc-policy-no { color: #FDA4AF; }
.sc-policy-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.sc-policy-list li { position: relative; padding-left: 14px; font-size: 12.9px; line-height: 1.8; color: var(--text-2); }
.sc-policy-list li::before { content: "·"; position: absolute; left: 2px; top: 0; font-weight: 800; color: var(--pg-1); }
.sc-block-demo { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); box-shadow: var(--sh-1); }
.sc-block-demo-h { font-size: 14px; font-weight: 800; color: var(--text); }
.sc-block-q, .sc-block-a { margin-top: 10px; padding: 10px 12px; border-radius: 10px; }
.sc-block-q { background: var(--surface-2); }
.sc-block-a { background: var(--pg-soft); border: 1px solid var(--pg-line); }
.sc-block-lb { display: block; font-size: 11.6px; font-weight: 700; color: var(--pg-ink-2); margin-bottom: 3px; }
.sc-block-q p, .sc-block-a p { font-size: 13px; line-height: 1.85; color: var(--text-2); }
.sc-block-fix { margin-top: 10px; }
.sc-block-fix b { font-size: 12.6px; color: var(--pg-ink-2); }
.sc-block-before, .sc-block-after { margin-top: 5px; font-size: 12.9px; line-height: 1.8; }
.sc-block-before { color: var(--text-3); text-decoration: line-through; }
.sc-block-after { color: var(--text-2); }

/* --- 36.10.2 跨境处理与单独同意（弹层） --- */
.sc-cb-rule { margin-top: 10px; font-size: 13.4px; line-height: 1.9; color: var(--text-2); }
.sc-cb-rule b { color: var(--text); }
.sc-cb-note { margin-top: 12px; font-size: 12.6px; line-height: 1.85; color: var(--text-2); }
.sc-cb-note b { color: var(--text); }
.sc-cb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sc-consent { z-index: 130; }
.sc-consent-box { max-width: min(720px, 94vw); width: auto; padding: 22px 24px; }
.sc-consent-list { max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.sc-consent-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.sc-consent-row:last-child { border-bottom: 0; }
.sc-consent-row b { display: block; font-size: 13px; font-weight: 750; color: var(--pg-ink-2); }
.sc-consent-row p { margin-top: 3px; font-size: 12.9px; line-height: 1.85; color: var(--text-2); }
.sc-consent-check {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 11px 13px;
  border: 1px solid var(--pg-line); border-radius: var(--r-sm); background: var(--pg-soft);
  font-size: 13px; line-height: 1.75; color: var(--text); cursor: pointer;
}
.sc-consent-check input { flex-shrink: 0; margin-top: 3px; width: 16px; height: 16px; accent-color: var(--pg-1); }
.sc-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sc-consent-note { margin-top: 12px; font-size: 12.2px; line-height: 1.75; color: var(--text-3); }

/* --- 36.10.3 深色主题 / reduced-motion 收口 --- */
[data-theme="dark"] .sc-stage-note,
[data-theme="dark"] .sc-loading-demo { background: var(--surface); }
[data-theme="dark"] .sc-script-sample { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .sc-pr-sample,
[data-theme="dark"] .sc-out-flow { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .sc-block-q { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .sc-tbl th { background: rgba(255, 255, 255, .06); }
@media (prefers-reduced-motion: reduce) {
  .sc-spin { animation: none; }
  .sc-pr-sum, .sc-prov-sum, .sc-entry { transition: none; }
}

/* --- 36.10.4 响应式 --- */
@media (max-width: 1080px) {
  .sc-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-mark-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-marks-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sc-stage-grid, .sc-deliv-grid, .sc-policy { grid-template-columns: minmax(0, 1fr); }
  .sc-mark-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-pr-k { width: 54px; }
  .sc-pr-stage { margin-left: 0; }
  .sc-consent-box { max-width: 96vw; padding: 16px; }
  .sc-consent-list { max-height: 46vh; }
  .sc-mark-stat-total b { font-size: 26px; }
}


/* ==========================================================================
   37. AI 收录目录 v2（品牌方导入包版）：评分来源标注 / 状态如实展示 / 官网入口
   --------------------------------------------------------------------------
   纯追加块：第 22–36 节一字未动（其中第 22–37 节按站内约定冻结，本节是第 38 个
   追加块，序号沿用「第 35 节 AI 收录总览」之后的自然顺延）。

   为什么需要本节：
     品牌方导入包带来了 v1 没有的四类内容，必须**在视觉上就能分辨**，不能混同：
       37.1 评分块：数字 + 完整 score_label（「目录资料初评分（AI辅助整理，未经产品实测）」），
             必须与数字同排，避免被读成用户评分
       37.2 状态行：cn_network_status / cn_service_eligibility 如实展示为「待核实」，
             不得出现「国内可用」这类由 robots/HTTP200 推导的表述
       37.3 待复核（hold）标记与置顶分组：17 条需在正常列表里也能一眼认出
       37.4 官网入口按钮：本站未提供的条目给出显眼外链（含赞助标识位）
       37.5 展开明细：subcategory / origin_region / api / pricing / legal / risk /
             sponsorship / review_date / official_page_checked 等包内字段
       37.6 深色主题 / reduced-motion / 窄屏 / 打印收口
   ========================================================================== */

/* --- 37.1 评分块：数字 + 完整标签（来源与性质必须同排可见） --- */
.ai-dir-score {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  padding: 1px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-2);
}
.ai-dir-score b { font-size: 13px; font-weight: 800; color: var(--text-1); font-variant-numeric: tabular-nums; }
.ai-dir-score-max { font-size: 11px; color: var(--text-3); }
.ai-dir-score-label { font-size: 11px; color: var(--text-3); }

/* --- 37.2 条目骨架：第一行（名称 + 标签 + 评分）、简介、状态行、点评、明细、页脚 --- */
.ai-dir-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 100%;
  min-width: 0;
}
.ai-dir-summary {
  flex: 1 1 100%;
  min-width: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
}
.ai-dir-state {
  flex: 1 1 100%;
  min-width: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ai-dir-review {
  flex: 1 1 100%;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-2);
  padding-left: 10px;
  border-left: 2px solid var(--line-strong);
}
.ai-dir-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1 1 100%;
  margin-top: 2px;
}
.ai-dir-user {
  font-size: 12px;
  color: var(--text-3);
  padding: 1px 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
}
.ai-dir-official { text-decoration: none; }

/* --- 37.3 待复核（hold）：正常列表里也要一眼认出；置顶分组单列 --- */
.ai-dir-item-hold { background: rgba(244, 63, 94, .045); }
.ai-dir-item-hold .ai-dir-link { color: #b91c1c; }
.ai-dir-flag {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
}
.ai-dir-flag-hold { border: 1px solid rgba(244, 63, 94, .6); color: #b91c1c; background: rgba(244, 63, 94, .10); }
.ai-dir-flag-ad { border: 1px solid rgba(251, 191, 36, .7); color: #92400e; background: rgba(251, 191, 36, .14); }

.ai-dir-holdbox {
  margin-top: 26px;
  padding: 16px 18px 8px;
  border: 1px solid rgba(244, 63, 94, .45);
  border-radius: var(--r-lg, 14px);
  background: rgba(244, 63, 94, .035);
  scroll-margin-top: 84px;
}
.ai-dir-holdnote {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-2);
}
.ai-dir-holdnote code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--bg-2, rgba(120, 120, 140, .12));
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
}
.ai-dir-holduul { list-style: none; margin: 0; padding: 0; }
.ai-dir-holdrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}
.ai-dir-holdrow:last-child { border-bottom: none; }

/* --- 37.5 展开明细（包内字段：子类 / 地区 / API / 收费 / 境内状态 / 合法 / 风险 / 赞助 / 日期 / 官方页面） --- */
.ai-dir-more { flex: 1 1 100%; min-width: 0; }
.ai-dir-more > summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--brand-3);
  list-style: revert;
}
.ai-dir-more > summary:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 2px; border-radius: 3px; }
.ai-dir-dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 16px;
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md, 12px);
}
.ai-dir-dd { display: flex; gap: 6px; align-items: baseline; margin: 0; font-size: 12px; line-height: 1.75; min-width: 0; }
.ai-dir-dd dt { flex: 0 0 auto; color: var(--text-3); white-space: nowrap; }
.ai-dir-dd dd { margin: 0; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.ai-dir-dd-wide { flex: 1 1 100%; color: var(--text-2); }

/* --- 37.6 深色主题 / reduced-motion / 窄屏 / 打印收口 --- */
[data-theme="dark"] .ai-dir-item-hold { background: rgba(244, 63, 94, .10); }
[data-theme="dark"] .ai-dir-item-hold .ai-dir-link { color: #fda4af; }
[data-theme="dark"] .ai-dir-flag-hold { border-color: rgba(244, 63, 94, .55); color: #fda4af; background: rgba(244, 63, 94, .16); }
[data-theme="dark"] .ai-dir-flag-ad { border-color: rgba(251, 191, 36, .55); color: #fcd34d; background: rgba(251, 191, 36, .14); }
[data-theme="dark"] .ai-dir-holdbox { border-color: rgba(244, 63, 94, .40); background: rgba(244, 63, 94, .07); }
[data-theme="dark"] .ai-dir-holdnote code { background: rgba(255, 255, 255, .10); }
@media (prefers-reduced-motion: reduce) {
  .ai-dir-official { transition: none; }
}
@media (max-width: 760px) {
  .ai-dir-dl { grid-template-columns: minmax(0, 1fr); }
  .ai-dir-holdbox { padding: 14px 14px 6px; }
  .ai-dir-review { padding-left: 8px; }
}
@media print {
  .ai-dir-item-hold { background: none; }
  .ai-dir-holdbox { border-color: #999; background: none; }
  .ai-dir-more { display: block; }
  .ai-dir-more > summary { list-style: none; }
  .ai-dir-dl { border-color: #999; }
}/* ---------- 37. 站内检索建议：键盘选中态 + 无结果空态（纯追加块，第 22–36 节一字未动） ----------
   背景：品牌方 2026-10 投诉「站内检索没生效」。检索索引改由 _tools/gen-search-index.mjs
   从 data/tools.json + data/ai-directory.json + 站内文章标题派生并内联（见 app.js 的 GEN:search-index 块），
   这里只补两个新状态需要的样式：
     · .suggest-item.on —— ↑↓ 键盘选中的那一项（原来只有 :hover 与 .active，键盘走不了）
     · .suggest-empty  —— 无匹配时的明确空态文案（绝不拿默认推荐列表冒充搜索结果） */
.suggest-item.on { background: var(--surface-2); }
.suggest-item.on .tool-name, .suggest-item.on .badge { color: var(--brand); }
.suggest .suggest-empty { padding: 12px 11px 14px; font-size: 13px; color: var(--text-3); }

/* 37.1 深色主题 / 减少动态效果收口（与第 30.8 / 31.5 / 33.4b / 34.4 / 35.3 / 36.6 同做法） */
@media (prefers-reduced-motion: reduce) {
  .suggest, .suggest-item { transition: none; }
}

/* ==========================================================================
   39. chat.html：对话区压穿页脚修复 + 对话框固定高度
   （纯追加块；第 22–37 节一字未动。全部复用既有 .chat-* 选择器，只在
     body[data-page="chat"] 作用域内覆盖，不新建第二套 class，不影响其他页面）

   —— CDP 实测到的真实根因（1440×900，改前）——
   · .chat-shell 被第 14 节写死 height: calc(100vh - var(--header-h)) = 836px，
     但它是 grid 容器且**没有定义 grid-template-rows**：唯一的隐式行按 auto 取值，
     行高被 .chat-main 的内容撑到 1429.1px，比容器高 593px，并因 overflow:visible
     **溢出绘制**到 y=65 → 1494。
   · .chat-scroll 只有 flex:1、缺 min-height:0 —— 弹性项自动最小尺寸等于内容高度，
     所以它既没被压缩、也没产生内部滚动（实测高 1089.4px = 纯内容高度）。
   · 页脚在正常流里紧跟 .chat-shell 的 836px 盒子：footer.top = 64 + 836 + 60(margin) = 960，
     正好落在溢出绘制的聊天内容带（65→1494）之内；.foot 在 DOM 中位于 .chat-shell 之后，
     同层绘制时压在上面 → 就出现了品牌方截图里「页脚链接浮在消息文字上」。
     （实测：footer∩.chat-scroll 重叠高 319.9px / footer∩.composer 28.1px，@1081 为 348px，@512 为 555px）
   · --header-h 本身**是定义好的**（第 1 节 --header-h: 64px，getComputedStyle 实测 "64px"），
     不是「变量未定义导致算错」，这一条排除。
   —— 本次修法 ——
   1) 解除 100vh 锁死：.chat-shell 高度交还给内容流 → 页脚回到正常流，页面能正常滚到页脚；
   2) 把「固定高度」放在 .chat-scroll 上（而不是靠 flex 拉伸）：
      它的高度是视口的纯函数（clamp 300–620px），与消息条数无关，
      因此长对话只在**内部**滚动，永远不会把页脚顶开或压穿；
   3) .chat-scroll 由 flex:1 改为 flex:0 0 auto —— 定高才不会被内容反推；
      .chat-main / .chat-side 补 min-height:0，避免 grid/flex 自动最小尺寸再次把行撑高；
   4) .composer 保持自然高度、不参与拉伸；textarea 自动增高的上限收窄到 150px，
      输入多行时输入区最多长高 98px，聊天区与页脚位置不受影响（实测值见报告）。
   ========================================================================== */
body[data-page="chat"] .chat-shell {
  height: auto;                 /* 解除 calc(100vh - var(--header-h)) 的 100vh 锁死 */
  align-items: stretch;
}
body[data-page="chat"] .chat-main,
body[data-page="chat"] .chat-side { min-height: 0; }

body[data-page="chat"] .chat-scroll {
  flex: 0 0 auto;               /* 覆盖第 14 节的 flex:1：定高元素不能被内容反推 */
  height: clamp(300px, calc(100vh - var(--header-h) - 280px), 620px);
  min-height: 0;
  overflow-y: auto;
}
body[data-page="chat"] .composer { flex: 0 0 auto; }
body[data-page="chat"] .composer-box textarea { max-height: 150px; }

/* 39.1 对话正文里的站内引导链接：第 14 节只给 .msg-text 定了排版，链接需要显式可见 */
body[data-page="chat"] .msg-text a {
  color: var(--brand-3);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body[data-page="chat"] .msg-text a:hover { color: var(--brand); }
[data-theme="dark"] body[data-page="chat"] .msg-text a { color: #6EE7B7; }

/* 39.2 演示对话标注：默认对话是站内预置示例，必须一眼看出「这是演示、不是真实调用记录」 */
.chat-demo-note {
  padding: 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 12.6px;
  line-height: 1.7;
  color: var(--text-3);
  background: var(--surface);
}
.chat-demo-note b { color: var(--text-2); }

/* 39.3 深色主题：对话区只用既有令牌，无需额外覆盖；这里只钉住内部滚动条的可见性 */
[data-theme="dark"] body[data-page="chat"] .chat-scroll { scrollbar-color: var(--line-strong) transparent; }

/* 39.4 窄屏：chat-side 已由第 20 节收成单列（≤1080px .chat-side{display:none}），
   这里只把定高下限收到 260px，避免小屏上聊天区与输入区一起把首屏挤满 */
@media (max-width: 760px) {
  body[data-page="chat"] .chat-scroll { height: clamp(260px, calc(100vh - var(--header-h) - 300px), 520px); }
  body[data-page="chat"] .composer-box textarea { max-height: 120px; }
}

/* 39.5 减少动态效果收口（与第 30.8 / 31.5 / 33.4b / 34.4 / 35.3 / 36.6 / 37.1 同做法） */
@media (prefers-reduced-motion: reduce) {
  body[data-page="chat"] .chat-scroll { scroll-behavior: auto; }
  .chat-demo-note { transition: none; }
}

/* ==========================================================================
   39.6 全站横向溢出修复（品牌方要求「所有页面，有错位的情况修复」）
   —— CDP 实测根因（20 页 × 4 档矩阵）——
   第 20 节在 ≤1080px 把三处两栏栅格直接改成单列 `grid-template-columns: 1fr`。
   `1fr` 等价于 `minmax(auto, 1fr)`，其 auto 下限取**栅格项的最小内容宽度**；
   而这些栅格里的侧栏在窄屏会变成横向滚动条（`.side-nav` / `.toc` 在 ≤1080px 是
   `flex-direction:row; overflow-x:auto`，条目标题一律 `white-space:nowrap`），
   它的最小内容宽度＝所有条目宽度之和（实测 686–1700px），于是 auto 下限把整个栅格列
   撑到 686–1700px，页面横向溢出并把内容挤出视口。
   实测证据（修前，scrollWidth / innerWidth）：
     · tools-online.html @760 → 1777/760（溢出 1017px）@512 → 1777/512（溢出 1265px）
     · news-article.html @760 → 826/760（66px）    @512 → 826/512（314px）
     · article.html     @760 → 763/760（3px）      @512 → 763/512（251px）
     · dashboard.html   @512 → 586/512（74px）
   修法：把单列改写成 `minmax(0, 1fr)`（下限归零，彻底取消内容反推），
   并给栅格项补 `min-width: 0`。这是纯约束修正，宽屏与内容不溢出时视觉零变化。
   ========================================================================== */
@media (max-width: 1080px) {
  .sidebar-layout,
  .sidebar-right,
  .layout-side,
  .banner-2 { grid-template-columns: minmax(0, 1fr); }
  .sidebar-layout > *,
  .sidebar-right > *,
  .layout-side > *,
  .banner-2 > * { min-width: 0; }
}
/* 同一根因的第二批（≤760px，第 20 节的 .grid-2/.grid-3/.grid-4 { 1fr }）：
   1080 档修完后 dashboard.html @512 仍溢出 74px —— 实测是 `.grid-2` 单列被
   `.table-wrap`（overflow-x:auto，scrollWidth 438 > clientWidth 376）的最小内容宽度
   反推到 510px（`.sidebar-layout` scrollWidth 510 / clientWidth 420），故一并收口。 */
@media (max-width: 760px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-auto:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); }
  .grid-2 > *,
  .grid-3 > *,
  .grid-4 > * { min-width: 0; }
}

/* ==========================================================================
   39.7 锚点统一避开吸顶顶栏（同一「错位」类：点目录/深链后标题被顶栏切掉）
   .topbar 是 position:sticky、高 = --header-h(64px)。站内只有少数锚点写了
   scroll-margin-top:84px（第 32.3 节 `.tool-card[id]`，以及若干页面的内联 style），
   其余 id 目标都是 0px —— CDP 实测 25 个 id 共 101 格次被顶栏切掉 63–64px，
   例如 script.html 的 #script-idea / #script-plotline 一族、tools.html 的
   #dir-item-* 与 #dir-chat、article.html / news-article.html 的 #article-body、
   dashboard.html 的 #dash-ledger、edu-question.html 的 #stem-text 等。
   修法：用零特异性的 `:where([id])` 兜底，值取站内既有约定 84px
   （--header-h 64px + 20px 视觉呼吸）。已有显式规则（.tool-card[id]、内联 style）
   特异性/优先级更高，一律不受影响，因此不会改动任何既有锚点行为。
   ========================================================================== */
:where([id]) { scroll-margin-top: calc(var(--header-h) + 20px); }

/* --- 37.7 24 张 AI 工具卡的徽章与「暂无用户评价」 --- */
/* 徽章三档：ready=badge-ok（既有）· demo=badge-warn（既有）· byo=本节新增中性档。
   品牌方导入包要求「未提供」的条目给出显眼官网入口，所以这一档不能靠视觉弱化躲过去：
   文字写全「未提供 · 前往官网」，颜色取中性灰蓝，与「站内直用」的绿明确区分。 */
.badge-ai-byo {
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  background: var(--bg-2, rgba(120, 120, 140, .08));
}
[data-theme="dark"] .badge-ai-byo {
  border-color: rgba(148, 163, 184, .45);
  color: var(--text-2);
  background: rgba(255, 255, 255, .06);
}
/* 工具卡脚部的「暂无用户评价」：与那类捧造数字完全不同的语义 ——
   它是**数据缺失**的如实陈述，所以用虚线框、灰字，不冒充成绩。 */
.ai-tools-user-none {
  padding: 1px 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-3);
}

/* --- 37.8 详情页与运行页的能力边界行 --- */
/* 站内不再渲染星标评分与调用量。这两个类分别承担：
   .ai-tool-userrow —— 原星标评分容器改成的“暂无用户评价”行；
   .ai-tools-user-none —— 虚线框的数据缺失声明。
   两者都不得出现星标、评分条数、调用次数或收藏人数。 */
.ai-tool-userrow {
  gap: 10px;
}

/* ==========================================================================
   40. 交互与可达性收口（2026-10-06，品牌方截图反馈配套）
   --------------------------------------------------------------------------
   本节只追加，不改动第 1–37 节任何一行。三项各自独立，可单独回退。
   ========================================================================== */

/* --- 40.1 整卡点击的可点反馈 ---
   app.js 末尾新增「点卡身 = 点卡内主操作链接」的接管后，工具卡成了真正的可点区域。
   .card-hover 原本只有 hover 位移，没有 cursor 提示，鼠标用户看不出卡身可点。
   只作用于工具卡容器：.art-card / .deep-card / .cat-tile 本来就是 <a>，各有自己的规则。 */
article.tool-card,
article.hot-card { cursor: pointer; }

/* --- 40.2 关闭状态的弹层必须离开 Tab 顺序与无障碍树 ---
   第 11 节的 .modal-scrim 关闭态是 opacity:0 + pointer-events:none，但 visibility
   仍是 visible。实测（CDP，tools-online.html）关闭状态的 #login-modal 里 8 个控件
   依旧可聚焦：Tab 第 59 个落点会停在不可见的 .modal-close 上，读屏也会念出未打开的
   登录表单。加 visibility:hidden 同时移出 Tab 顺序与无障碍树。
   transition 带上 visibility，是为了让「关闭」时的淡出仍然可见（值在动画结束时才翻转）；
   「打开」时立即变为 visible，不影响入场。
   安全性：站内所有弹层都由 .open 类控制显隐（app.js 的 modal()、script.html 的
   [data-sc-consent] / [data-sc-lightbox] 都是 classList.add('open')），
   而 .modal-scrim.open 是唯一让弹层可见的规则 —— 所以本规则不可能把「本该可见」的
   弹层藏起来。 */
.modal-scrim { transition: opacity var(--dur), visibility var(--dur); }
.modal-scrim:not(.open) { visibility: hidden; }

/* --- 40.3 侧栏粘性列表不得滑出 aside 盖住后续兄弟块 ---
   实测（CDP，1440/1280/1081px，scrollY≈900）：.side-nav 是 position:sticky，
   其可下滑行程 = aside 内容高 − 列表高 = 768 − 647 = 121px；而列表下方只有
   「间距 16px + 提示块 105px」= 121px 的空间，于是粘性列表恰好整体压住提示块
   （矩形相交 236 × 105 = 24743 px²），被盖住的正是最后三项：
   格式化压缩 2677 px²、图片处理 10089 px²、开发运维 10089 px² —— 与品牌方截图一致。
   本次已把该提示块移出侧栏（结构上不再相邻），这里再补一道结构性保险：
   宽屏下把列表改成「自带高度上限 + 内部滚动」并取消粘性，下滑行程恒为 0，
   即便日后有人往 aside 里再放兄弟节点，也不可能被列表盖住。
   max-height 取 100vh − 顶栏 − 44px：13 项列表约 647px，在 900px 视口下不触发滚动条，
   视觉与原来一致，只是不再跟随页面下滑。 */
@media (min-width: 1081px) {
  .sidebar-layout > aside > .side-nav {
    position: static;
    max-height: calc(100vh - var(--header-h) - 44px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* --- 37.9 官网入口必须显眼 --- */
/* CDP 实测发现：当时用的是 .btn-outline，
   悬停态是低边框、目标点是「前往官网」
   ——品牌方本轮的核心要求就是「部分无法实现的也要给官网地址方便访问」，
   给成了只能看的淡淡一个外链。这里把它提到「主操作」的视觉级别：
   实心牌色按钮。不改文案、不改外链属性。 */
.ai-dir-official,
.tool-card[data-badge="byo"] .tool-foot .btn-outline {
  border-color: transparent;
  background: var(--brand-3, #6366f1);
  color: #fff;
  font-weight: 600;
}
.ai-dir-official:hover,
.tool-card[data-badge="byo"] .tool-foot .btn-outline:hover {
  background: var(--brand-2, #4f46e5);
  color: #fff;
}
.ai-dir-official:focus-visible,
.tool-card[data-badge="byo"] .tool-foot .btn-outline:focus-visible {
  outline: 2px solid var(--brand-3, #6366f1);
  outline-offset: 2px;
}
[data-theme="dark"] .ai-dir-official,
[data-theme="dark"] .tool-card[data-badge="byo"] .tool-foot .btn-outline {
  background: var(--brand-3, #6366f1);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .ai-dir-official { transition: none; }
}
@media print {
  .ai-dir-official { background: none; color: #000; border-color: #999; }
}

/* ==========================================================================
   41. 登录页「用户名 + 密码」登录方式（2026-10-06 追加）
   --------------------------------------------------------------------------
   本节**只追加**，不改动第 1–40 节任何一行。
   背景：品牌方要求前台支持「用户名 + 密码」登录（后台管理员用）。原登录卡片
   顶层只有「登录 / 注册」两个页签，这里在「登录」页签内部再加一层
   「登录方式」切换（手机号验证码 / 用户名密码）。
   新类一律以 .auth- 前缀命名，避免与既有类撞名；不引任何外部资源。
   ========================================================================== */

/* --- 41.1 登录方式切换（胶囊分段控件） ---
   刻意**不复用**既有的 .tabs 下划线样式：.tabs 已经用在顶层的「登录 / 注册」上，
   两层下划线叠在一起会看不出层级，所以这里用胶囊分段控件做二级切换。 */
.auth-modes {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2, rgba(120, 120, 140, .07));
}
.auth-modes button {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 560;
  line-height: 1.2;
  color: var(--text-3);
  transition: color var(--dur), background var(--dur);
}
.auth-modes button:hover { color: var(--text-2); }
.auth-modes button.active {
  color: #fff;
  background: var(--grad);
  box-shadow: 0 4px 14px -8px rgba(14, 159, 110, .9);
}
.auth-modes button:focus-visible {
  outline: 2px solid var(--brand-3, #6366f1);
  outline-offset: 2px;
}

/* --- 41.2 登录结果反馈条（成功 / 失败两态，中文提示） ---
   两条硬要求都落在这里：本地预览（file://）下 fetch 必被 CORS 拦掉、
   线上接口不可达时，**页面既不能白屏，也不能静默失败**，必须出一句中文说明。 */
.auth-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  background: var(--bg-2, rgba(120, 120, 140, .07));
  word-break: break-word;
}
/* 必须显式写：上面的 display:flex 会盖掉 hidden 属性自带的 display:none */
.auth-msg[hidden] { display: none; }
.auth-msg.is-ok {
  border-color: rgba(14, 159, 110, .45);
  background: rgba(14, 159, 110, .08);
  color: #0a7a54;
}
.auth-msg.is-error {
  border-color: rgba(214, 69, 69, .45);
  background: rgba(214, 69, 69, .07);
  color: #b32d2d;
}
[data-theme="dark"] .auth-msg.is-ok { color: #5fd6ab; }
[data-theme="dark"] .auth-msg.is-error { color: #ff9b9b; }

/* --- 41.3 窄屏：切换控件铺满一行，点击目标加大到 ~40px --- */
@media (max-width: 480px) {
  .auth-modes { display: flex; width: 100%; }
  .auth-modes button { flex: 1; padding: 10px 8px; }
}

/* --- 41.4 减少动效 / 打印收口（与第 30.8 / 31.5 / 36.6 / 37.6 同做法） --- */
@media (prefers-reduced-motion: reduce) {
  .auth-modes button { transition: none; }
}
@media print {
  .auth-modes { display: none; }
  .auth-msg { border-color: #999; color: #000; background: none; }
}

/* ==========================================================================
   43. 首页资讯区改版（2026-10-06，品牌方首页截图反馈）
   —— 纯追加块：第 22–42 节一字未动。

   品牌方三条原话与本节落点：
   ①「首页保证资讯铺满到下面，否则空白一片」
      → 资讯卡由 2 张补到 6 张（另有 1 张深度卡），并给 .news-grid 三档列数，
        与右栏「AI 快讯 + 事件溯源」的高度配平，消除主列底部的大片空白。
   ②「图片要用千问生成新的缩略图」
      → 缩略图换成百炼通义万相生成的图片（生成脚本 ai-nav-ui/_tools/gen-news-thumbs.py，可重跑幂等）。
        本节只负责版式：.news-thumb / .news-thumb-img 让 <img> 铺满缩略图槽位。
        ⚠️ 缩略图宽高比在 CSS 里钉死（卡片 16:9 / 深度卡 3:2），与生成脚本的裁切比例一一对应 ——
        object-fit:cover 一旦拿到别的比例就会裁掉烧在图片右上角的「AI 生成」标识，故各档断点都不改比例。
   ③「右上角标注 AI」
      → 显式标识按《人工智能生成合成内容标识办法》烧进图片文件本身（做法①，见生成脚本 burn_ai_label），
        图被单独另存也带标识；页面层再叠站内既有的 .ai-label「AI 生成」徽章（第 8 节，未改），两层并存不冲突。 */

.news-thumb { position: relative; overflow: hidden; background: var(--grad-soft); }
.news-thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 卡片缩略图：16:9（源图 1200×675，单张 ≤200 KB） */
.news-thumb-card { min-height: 0; aspect-ratio: 16 / 9; }
/* 深度卡封面：3:2（源图 720×480）；≥1081 时它在 .deep-card 的 168px 定宽格里 */
.news-thumb-deep { min-height: 0; aspect-ratio: 3 / 2; }

/* 资讯网格：≥1081 三列 —— 6 张卡两行，与右栏时间轴高度配平。
   761–1080 仍是三列：这一档第 20 节已把 .sidebar-right 收成单列堆叠，
   主列拿到整幅宽度（≈730–1030px），三列每列 230–340px，读数与节奏都合适。 */
.news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  /* ≤760：两列。站内第 20 节只把 .grid-2/.grid-3/.grid-4 收成单列，.news-grid 是本节新类，
     显式收成两列 —— 单列时每张卡要占约 578px（图 372 + 文 206），六张卡把区块拉到 5441px，
     比站内任何一屏都长；两列后区块回落到 3000px 上下，且依旧不出现空白带。 */
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 1081–1200 档：这一档是「并排两栏」里最窄的一档，实测主列 1307 / 右栏 1192，
   并排空白带 115px（8.81%）。右栏由 340px 收到 300px 后主列变宽、卡片文字提前换行结束，
   右栏变窄、快讯文本多折一行，两侧同时往中间收 —— 见第 43 节实测表。 */
@media (min-width: 1081px) and (max-width: 1200px) {
  .news-sec > .sidebar-right { grid-template-columns: minmax(0, 1fr) minmax(280px, 300px); }
}

/* 缩略图槽位在窄屏不再吃 min-height，避免把标题与摘要挤出卡片 */
@media (max-width: 760px) {
  .news-thumb-card, .news-thumb-deep { min-height: 0; }
}

/* ==========================================================================
   42. 教育题库「高考真题」板块（A + B + C 组合）—— 纯追加块，第 1–41 节一字未动
   --------------------------------------------------------------------------
   本节只服务 edu.html / edu-subject*.html / edu-paper*.html / edu-question.html。
   设计目标有两个，别的都不要：
     (1) 让「官方真题索引」与「云枢原创模拟题」在版面上一眼分得开
         （.edu-scope-strip 分界带 + .edu-origin-official / .edu-origin-original 两枚徽章）；
     (2) 让每道题的题干、选项、正确答案、解析、知识点、难度、来源标注都排得能读，
         且不依赖脚本渲染（内容全部写在 HTML 里，本节规则只负责排版）。
   类名统一加 edu- 前缀，避免与既有 41 节撞名（.crumb 例外：站内此前没有面包屑规则）。
   ========================================================================== */

/* --- 42.1 面包屑（站内此前无此规则，题库各页统一使用） --- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-3);
}
.crumb a { color: var(--text-2); }
.crumb a:hover { color: var(--brand); }

/* --- 42.2 徽章行与「真题 / 原创」分界徽章 ---
   分界不能只靠文字：官方索引是灰蓝色（表示「只是索引，没有正文」），
   原创模拟题是品牌绿（表示「本站自产，可放心读」）。两色不同，形状一致。 */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.edu-origin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}
.edu-origin-original {
  background: var(--brand-soft);
  color: var(--brand-3);
  border-color: var(--brand-line);
}
.edu-origin-official {
  background: var(--surface-3);
  color: var(--text-2);
  border-color: var(--line-strong);
}

/* --- 42.3 口径分界带：左右各半，明确「这边只有索引 / 那边是自编」 --- */
.edu-scope-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.edu-scope-half {
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
}
.edu-scope-official { border-color: var(--line-strong); background: var(--surface-2); }
.edu-scope-original { border-color: var(--brand-line); background: linear-gradient(180deg, var(--brand-soft), transparent 70%), var(--surface); }
.edu-scope-half p { margin: 0; }

/* --- 42.4 统计条：让「真题 0 条题干 / 原创 160 道」直接可见 --- */
.edu-count-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.edu-count-i {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
}
.edu-count-n { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--brand-3); }
.edu-count-l { font-size: 12.5px; color: var(--text-3); line-height: 1.6; }

/* --- 42.5 学科卡片 --- */
.edu-subj-grid { gap: 14px; }
.edu-subj-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  text-decoration: none;
}
.edu-subj-name { font-size: 16px; font-weight: 650; color: var(--text); }
.edu-subj-num { font-size: 13px; color: var(--brand-3); font-weight: 600; }
.edu-subj-desc { font-size: 13px; color: var(--text-3); line-height: 1.75; }

/* --- 42.6 单题块：题干 / 选项 / 答案 / 解析 / 标签 / 来源 ---
   滚动定位要避开吸顶顶栏（与第 32.3、39.7 节同做法）。 */
.edu-q {
  padding: 18px 20px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  scroll-margin-top: 84px;
}
.edu-q-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.edu-q-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.edu-q-stem { font-size: 15.5px; line-height: 1.9; color: var(--text); }
.edu-q-options {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.edu-q-opt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 14.5px;
  line-height: 1.7;
}
.edu-q-opt-k { font-weight: 700; color: var(--text-2); flex-shrink: 0; }
.edu-q-opt-ok { border-color: var(--brand-line); background: var(--brand-soft); }
.edu-q-opt-ok .edu-q-opt-k { color: var(--brand-3); }
.edu-q-opt-flag { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--brand-3); flex-shrink: 0; }
.edu-q-body { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.edu-q-answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.edu-q-answer-k {
  padding: 2px 9px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand-3);
  font-size: 12px;
  font-weight: 700;
}
.edu-q-answer-v { font-size: 15px; font-weight: 650; color: var(--text); }
.edu-q-analysis { display: flex; flex-direction: column; gap: 4px; }
.edu-q-analysis-k { font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .04em; }
.edu-q-analysis p { margin: 0; font-size: 14.5px; line-height: 1.95; color: var(--text-2); }
.edu-q-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.edu-q-src {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-3);
}
.edu-q-style { color: var(--text-2); }
.edu-q-origin-note { color: var(--text-3); }
.edu-q-check { color: var(--brand-3); }

/* --- 42.7 官方真题索引条目 --- */
.edu-index-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.edu-index-item {
  padding: 15px 17px;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
}
.edu-index-name { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.edu-index-src { margin-top: 6px; word-break: break-all; }

/* --- 42.8 官方来源目录 --- */
.edu-src-catalog {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.edu-src-item {
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.edu-src-org { font-size: 14.5px; font-weight: 620; color: var(--text); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.edu-src-domain { font-size: 12px; font-weight: 500; color: var(--text-3); }
.edu-src-meta { font-size: 12px; line-height: 1.7; color: var(--text-3); }
.edu-src-url { font-size: 12.5px; color: var(--brand-3); word-break: break-all; }
.edu-src-url:hover { text-decoration: underline; }

/* --- 42.9 试卷页：题目清单行 + 概览统计行 --- */
.edu-paper-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.edu-paper-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  scroll-margin-top: 84px;
}
.edu-paper-row > .btn { flex-shrink: 0; }
.edu-paper-stem { margin-top: 6px; font-size: 14.5px; line-height: 1.85; color: var(--text-2); }
.edu-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
  color: var(--text-2);
}
.edu-stat-row:last-child { border-bottom: 0; }
.edu-stat-v { font-weight: 650; color: var(--text); }

/* --- 42.10 深色主题收口 --- */
[data-theme="dark"] .edu-scope-official { background: var(--surface-2); }
[data-theme="dark"] .edu-count-n { color: var(--brand); }
[data-theme="dark"] .edu-q-opt { background: var(--surface-2); }
[data-theme="dark"] .edu-origin-official { background: var(--surface-3); color: var(--text-2); }
[data-theme="dark"] .edu-paper-row,
[data-theme="dark"] .edu-src-item,
[data-theme="dark"] .edu-index-item { background: var(--surface-2); }

/* --- 42.11 响应式：1080 收一档，760 单列 --- */
@media (max-width: 1080px) {
  .edu-count-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .edu-src-catalog { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .edu-scope-strip { grid-template-columns: 1fr; }
  .edu-count-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edu-q-options { grid-template-columns: 1fr; }
  .edu-paper-row { flex-wrap: wrap; }
  .edu-paper-row > .btn { margin-left: auto; }
}

/* --- 42.12 减少动态效果与打印收口 --- */
@media (prefers-reduced-motion: reduce) {
  .edu-subj-card,
  .edu-q,
  .edu-paper-row { transition: none; }
}
@media print {
  .edu-origin-official,
  .edu-origin-original { background: none; color: #000; border-color: #999; }
  .edu-q,
  .edu-paper-row,
  .edu-src-item,
  .edu-index-item { break-inside: avoid; page-break-inside: avoid; }
  .edu-paper-row > .btn,
  .edu-q-check { display: none; }
}

/* ==========================================================================
   44. 侧栏列表行：把「看着能点、点了没反应」收口成「有提示必有行为」
   --------------------------------------------------------------------------
   实测（CDP 真鼠标点击，1440 / 512，行已 scrollIntoView 且在视口内；变更目标逐个
   核对，并用空白控件量出噪声底线）：
     · .flash-item  首页 6 条 / 资讯页 8 条 —— 无 href、hash、history.state、节点
       增删、弹层、toast、焦点它化、网络请求；窗口内变更只落在 topbar.is-stuck 与
       .reveal.in 这些「滚动附带」元素上，行自身一个属性都没改 -> 条目没有任何行为。
     · .rank-item   资讯页「热点榜」8 条 —— 同上。
     · .event-card / .event-merged —— 同上。
   另测：原规则 `.flash-item:hover{background:var(--surface)}` 在**亮色主题下是空操作**
   （--surface #FFFFFF 与面板 --bg-elev #FFFFFF 同色），只有深色主题
   （--surface rgba(255,255,255,.04) 叠在 #10211B 上）才看得见。
   所以「只删掉 hover 暗示」并不能改变品牌方看到的现象，必须给这些行接上真实动作；
   同时由于站内不存在逐条详情页，动作由 assets/js/app.js 在点击那一刻按标题解析目标。
   本块与 app.js 的增量配合，保证 **提示与行为严格等价**：
     · 解析出真实目标 -> app.js 给该行加 .row-go（+ role=link + tabindex=0），
       本块给它 cursor:pointer / 可见 hover / 焦点环 —— 能点，且看得出来能点；
     · 解析不到目标（该条在站内没有对应内容）-> app.js 什么都不加，本块保证它
       没有 hover 底色、没有 pointer 光标 —— 不能点，也看不出来能点。
   注意 44.1 只针对 .flash-item：其余列表行本来就没有 hover 底色规则，若一律强制
   `background:transparent` 反而会把 .event-merged 自身的底色在 hover 时抹掉，
   凭空造出一个新的 hover 暗示（实测踩过，已收窄）。
   本块为纯追加：第 22–43 节一字未动。
   ========================================================================== */

/* 44.1 未接上目标的 .flash-item：取消它原本那条 hover 底色（亮色下本就不可见） */
.flash-item:not(.row-go):not(a) { cursor: default; transition: none; }
.flash-item:not(.row-go):not(a):hover { background: transparent; }

/* 44.2 已接上真实目标的列表行 */
.row-go { cursor: pointer; transition: background var(--dur) var(--ease); }
.row-go:hover { background: var(--surface-3); }
.row-go:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 将来若真把条目写成 <a class="flash-item">，同样按可点行处理 */
a.flash-item { cursor: pointer; color: inherit; text-decoration: none; }
a.flash-item:hover { background: var(--surface-3); }

@media (prefers-reduced-motion: reduce) {
  .row-go,
  a.flash-item { transition: none; }
}

/* ==========================================================================
   48. 可展开文字审计（A 类：术语就地折叠 / C 类：AI 术语表页）
   --------------------------------------------------------------------------
   依据品牌方 2026-10 要求「检查所有文字是否应该点击展开的情况，如果有子页面，
   都要生成相对应的页面」。逐页枚举（_tmp/expand-audit.cjs，36 页 / 10322 条候选）
   后按四分类落地，本块只承载这两类新增控件的样式：

     A 类  术语 / 缩写 / 参数出现处**不建页**，改为页脚前追加一个默认折叠的
           details.term-fold「术语速查」，只列**本页正文真的出现过**的词，每条
           链到 glossary.html 的对应条目锚点（就地展开 + 深链，零新增页面）。
     C 类  唯一通过门槛的新页面 glossary.html（AI 术语表，38 条结构化条目，
           正文远超 400 字）用 .gloss-* 系列承载。

   写在这里防止后人误加（审计结论，不是待办）：
     · 不为单个术语建页 —— 违反 docs/工具采集管线规格-v1.md「禁止批量薄页面」，
       也正是 Google scaled content abuse / 百度飓风算法打击的对象；
     · 不改任何既有页面正文文字，只在页脚前**追加**一个默认折叠的 details；
     · 不重复造轮子：工具名 / 分类名 / 榜单条目 / 引导词已指向真实页面，
       用既有 .card / .sec-link / .cat-bar-item 等类，本块不新增同类控件；
     · 全部沿用既有令牌（--surface / --line / --brand / --r-sm / --dur / --ease），
       无新颜色、无外部资源、无 emoji、无捏造数据。

   本块为纯追加：第 22–47 节一字未动。
   ========================================================================== */

/* --- 48.1 A 类：术语就地折叠块（页脚前，默认收起） --- */
.term-fold {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.term-fold > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  font-weight: 640;
  color: var(--text);
  transition: background var(--dur) var(--ease);
}
.term-fold > summary::-webkit-details-marker { display: none; }
.term-fold > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-right: 2px;
  border-right: 1.6px solid var(--text-3);
  border-bottom: 1.6px solid var(--text-3);
  transform: rotate(-45deg) translateY(-1px);
  transition: transform var(--dur) var(--ease);
}
.term-fold[open] > summary::before { transform: rotate(45deg) translateY(-2px); }
.term-fold > summary:hover { background: var(--surface-3); }
.term-fold > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.term-fold-t { color: var(--text); }
.term-fold-hint { font-size: 12px; font-weight: 520; color: var(--text-3); }
.term-fold[open] .term-fold-hint { display: none; }

/* --- 48.2 A 类：折叠内容（术语 + 一句话解释） --- */
.term-list {
  margin: 0;
  padding: 2px 14px 14px;
  list-style: none;
  display: grid;
  gap: 8px;
}
.term-list > li {
  display: grid;
  grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.term-list > li:first-child { border-top: 0; padding-top: 0; }
.term-link {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  font-weight: 660;
  color: var(--brand-3);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-line);
}
.term-link:hover { color: var(--brand); border-bottom-color: var(--brand); }
.term-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.term-d { font-size: 13px; line-height: 1.62; color: var(--text-2); }

/* --- 48.3 C 类：AI 术语表页（glossary.html） --- */
.gloss-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.gloss-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--bg-elev);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.gloss-nav a:hover { color: var(--brand-3); border-color: var(--brand-line); background: var(--brand-soft); }
.gloss-nav a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.gloss-dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.gloss-item {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  box-shadow: var(--sh-1);
}
.gloss-item:target { border-color: var(--brand-line); box-shadow: var(--glow); }
.gloss-item > dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 680;
  color: var(--text);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.gloss-zh {
  font-size: 12px;
  font-weight: 560;
  color: var(--brand-3);
  background: var(--brand-soft);
  border-radius: var(--r-full);
  padding: 2px 8px;
}
.gloss-item > dd {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--text-2);
}
.gloss-meta {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-3);
}
.gloss-meta a { color: var(--brand-3); text-decoration: none; border-bottom: 1px solid var(--brand-line); }
.gloss-meta a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* --- 48.4 深色主题：只用既有令牌，无需特殊覆盖；仅补 :target 的可见性 --- */
[data-theme="dark"] .gloss-item:target { border-color: var(--brand-line); }
[data-theme="dark"] .term-fold > summary::before { border-color: var(--text-3); }

/* --- 48.5 窄屏：术语表两列收一列，折叠条目单列 --- */
@media (max-width: 900px) {
  .gloss-dl { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .term-list > li { grid-template-columns: 1fr; gap: 2px; }
}

/* --- 48.6 减少动态效果 / 打印收口（与第 30.8 / 31.5 / 33.4b / 34.4 / 35.3 / 36.6 / 37.1 / 39.5 同做法） --- */
@media (prefers-reduced-motion: reduce) {
  .term-fold > summary,
  .term-fold > summary::before,
  .gloss-nav a { transition: none; }
}
@media print {
  .term-fold { display: none; }
  .gloss-item { break-inside: avoid; page-break-inside: avoid; box-shadow: none; }
  .gloss-item > dt { scroll-margin-top: 0; }
}

/* --- 48.7 B 类：统计数字接上对应列表页（edu.html 计数条） --- */
.edu-count-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: -14px -16px;
  padding: 14px 16px;
  border-radius: var(--r);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.edu-count-link:hover { background: var(--surface-3); }
.edu-count-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.edu-count-link:hover .edu-count-n { color: var(--brand); }
.edu-count-link .edu-count-l { text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: 3px; }

/* --- 48.8 B 类：正文里的站内工具名接上工具详情页（pricing.html 价目表） --- */
.tbl-link {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.tbl-link:hover { color: var(--brand-3); border-bottom-color: var(--brand); }
.tbl-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

/* ---------- 49. 分类标签（articles / news）：看着像筛选器、但没有筛选实现 ----------
   裁定：这两页的 .chip 是裸元素（无 href、无 JS 绑定）→ 当**标签**用，不是筛选器。
   因此只在本页专属作用域内去掉筛选器语义（鼠标手型 + hover 抬升），
   ⚠️ 不动共用的 .chip / .chip:hover / .chip.active（.mp-search-body 的词条 chip 是真交互，全站 18 页共用）。
   计数（148 / 61 这类）没有数据源，已在 HTML 里删掉（与 data-hot / data-rate 同口径）。 */
.article-chips .chip, .news-chips .chip { cursor: default; }
.article-chips .chip:hover, .news-chips .chip:hover { transform: none; }

/* ==========================================================================
   50. 来源徽章的「可点外链」形态（资讯页「来源口径与溯源」块）
   --------------------------------------------------------------------------
   背景：品牌方要求「有真实来源」是硬门槛 —— 每条资讯要有可点击、可核对的原文外链。
   本站原有的 .src-badge 是 <span>（纯展示，不可点）；第 50 节只给 **作为外链的**
   .src-badge（即 a.src-badge）补上链接态样式，让「有外链的来源」和「只有署名的来源」
   在视觉上一致，不额外造控件、不造新颜色。

   为什么不能只靠既有规则：
     · <a> 默认带下划线，会让徽章里的来源名看起来像正文链接（既有的 badge 都没有下划线）；
     · 既有 .src-badge 只写了 color，没写 text-decoration —— 链接态必须显式清掉。

   与第 44 节的关系：第 44 节管的是「侧栏列表行能不能点」（.row-go），本节点的是
   「来源徽章是不是外链」。两者互不影响。本块为纯追加：第 22–49 节一字未动。
   ========================================================================== */

/* 50.1 作为外链的来源徽章：外观与既有 span.src-badge 完全一致 */
a.src-badge { text-decoration: none; color: var(--text-2); }
a.src-badge:hover { color: var(--text); border-color: var(--line-strong); }
a.src-badge.primary { color: var(--brand-3); }
[data-theme="dark"] a.src-badge.primary { color: #6EE7B7; }

/* 50.2 可点来源的焦点环：键盘 Tab 到时必须看得见（与 .row-go 同一套视觉） */
a.src-badge:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 50.3 减少动态效果：沿用全站口径，去掉过渡 */
@media (prefers-reduced-motion: reduce) {
  a.src-badge { transition: none; }
}

/* ==========================================================================
   54. 右下角「一键到顶」按钮（纯追加块，第 22–53 节一字未动）
   --------------------------------------------------------------------------
   需求（品牌方）：网页太长时，右下角客服按钮上方要有一个「一键到顶」的按钮。
   按钮由 assets/js/app.js 尾部 IIFE 运行时注入 <body>（见该文件第 54 节），
   所以本节只写样式；不写进任何页面的 HTML，新生成的页面同样生效。

   定位值来自实测（不是猜）：
     · 客服按钮 .chat-fab（第 22 节）：position:fixed; right:24px; bottom:24px;
       width:56px; height:56px; z-index:92 → 纵向占位 [bottom 24 → 顶部 80]。
       ≤760px 覆盖为 right:16px; bottom:16px; 52×52 → 占位 [16 → 68]。
     · 因此本节把按钮放在同一列：
       PC  right:24px / bottom:92px（与客服按钮顶边 80px 留 12px 间距）。
          92px 同时是第 22 节 .chat-pop 与 .toasts 已经使用的「客服按钮上方基线」，
          三者在同一条线上，不新造第二条基线。
       ≤760px right:16px / bottom:80px（与客服按钮顶边 68px 同样留 12px 间距）。
       两档的宽度都与客服按钮一致（56 / 52），两枚按钮圆心严格同轴（水平对齐）。
     · z-index:93 —— 在客服按钮（92）之上、聊天面板（130）与 toast（200）之下。

   显隐与无障碍：默认 opacity:0 + visibility:hidden。刻意**不用** opacity:0 收尾 ——
   本站此前踩过「关闭的弹层仍能被 Tab 聚焦」的坑（见第 40.2 节），opacity:0 的元素
   仍在 Tab 顺序与无障碍树里。visibility:hidden 两者都会移出。
   visibility 也参与 transition，是为了让「隐藏」时的淡出仍然可见（值在动画结束后
   才翻转），「显示」时则立即翻转、不影响入场。

   视觉：沿用站内设计语言 —— 圆形 + 浅色卡面（--bg-elev）+ 品牌青绿细边
   （--brand-line）+ 品牌绿箭头（--brand-3）+ 既有阴影令牌 --sh-2；
   hover / active 的位移与缩放沿用客服按钮的同一套数值
   （translateY(-2px) scale(1.04) / scale(.98)）。
   深色主题不需要额外规则：--bg-elev / --line-strong / --brand-3 / --sh-2
   在第 1 节的 [data-theme="dark"] 里已经换过一套值。
   零外部资源、零 emoji；图标是 24 视框线性箭头，stroke-width 1.8 与站内一致。
   ========================================================================== */

.to-top {
  position: fixed;
  right: 24px;
  bottom: 92px;                    /* 客服按钮顶边 80px + 12px 间距 */
  z-index: 93;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-elev);
  color: var(--brand-3);
  border: 1px solid var(--brand-line);
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease-out),
              visibility 0s linear var(--dur),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.to-top.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease-out),
              visibility 0s linear 0s,
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.to-top .i { width: 24px; height: 24px; }

.to-top.is-on:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: var(--brand);
  box-shadow: var(--sh-3);
}
.to-top.is-on:active { transform: translateY(0) scale(.98); }
.to-top:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* 注入成功后 <html> 带 .has-to-top：把 toast 抬高一行，避免 toast 压住新按钮。
   第 22 节已经为客服按钮做过同样的事（.toasts{bottom:92px}，见该节注释）。
   作用域限定在 .has-to-top —— JS 没跑起来时 toast 位置与改动前完全一致。
   PC：按钮顶边 = 92 + 56 = 148px，再留 12px → 160px。 */
.has-to-top .toasts { bottom: 160px; }

/* ≤760px：与第 22 节客服按钮的移动端规格同步（16px 贴边 / 52px 圆）
   按钮顶边 = 80 + 52 = 132px，再留 12px → 144px。 */
@media (max-width: 760px) {
  .to-top { right: 16px; bottom: 80px; width: 52px; height: 52px; }
  .to-top .i { width: 22px; height: 22px; }
  .has-to-top .toasts { bottom: 144px; }
}

/* 减少动态效果：只保留显隐翻转，去掉位移与缩放（与第 30.8 / 33.4b / 48.6 同口径） */
@media (prefers-reduced-motion: reduce) {
  .to-top, .to-top.is-on { transition: opacity 0s, visibility 0s; }
  .to-top.is-on:hover, .to-top.is-on:active { transform: none; }
}

/* ==========================================================================
   55. AI 收录总览：本批扩张后的筛选 / 分页 / 口径表 / 外链图标（纯追加块，第 22–54 节一字未动）
   --------------------------------------------------------------------------
   背景：收录条目从 224 增到约 700，大类从 21 增到 35。v2 的渲染方式是
   「每条约 2.8KB HTML + 12 行完全一样的口径样板（接口待核实 / 收费待核实 / 境内未实测 …）」，
   条目一多会同时踩两个坑：
     (a) tools.html 被顶到几 MB；
     (b) 前台一次性平铺几百条，排版与绘制明显变慢。
   本节只解决这两件事，做法是「把重复的东西提出来 + 给列表加筛选与分页」：

     55.1 区块级「口径与分布」表 —— 替代每条重复的 12 行样板（信息量不减，只是不再重复 N 遍）
     55.2 筛选 + 分页工具条 —— **纯 DOM 显隐，不增删节点**，所以全部条目仍在这份 HTML 里
     55.3 外链图标改共用 <symbol> + <use>（v2 每条一个内联 SVG，224 条就占 52KB）
     55.4 长列表渲染开销：content-visibility 让离屏条目跳过排版与绘制
     55.5 深色主题 / 窄屏 / 打印 / prefers-reduced-motion 收口

   ⚠️ `[hidden]` 必须显式写 `!important`：
      浏览器 UA 样式表里的 `[hidden]{display:none}` 优先级**低于**第 35 节的
      `.ai-dir-item{display:flex}`（两者同为 0,1,0，作者样式胜出），
      不写 !important 就会出现「JS 设了 hidden 却隐藏不掉」的静默故障。
   ⚠️ 本节不覆盖第 35 节的任何选择器属性，只新增类名与新增属性。 */

/* --- 55.1 区块级「口径与分布」表（替代条目内重复样板） --- */
.ai-dir-fields {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  background: var(--card, var(--bg-1));
}
.ai-dir-fields .ai-dir-h3 { margin-top: 0; }
.ai-dir-fields-dl { margin: 8px 0 0; }
.ai-dir-fields .ai-dir-dd { font-size: 12.5px; line-height: 1.75; }
.ai-dir-fields .ai-dir-dd > dt {
  flex: 0 0 auto;
  min-width: 108px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.ai-dir-fields .ai-dir-dd > dd { margin: 0; color: var(--text-3); overflow-wrap: anywhere; }

/* --- 55.2 筛选 + 分页工具条 --- */
.ai-dir-tools {
  margin: 18px 0 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  background: var(--card, var(--bg-1));
}
.ai-dir-tools-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ai-dir-tools-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  justify-content: space-between;
  align-items: center;
}
.ai-dir-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 1 auto; }
.ai-dir-field-grow { flex: 1 1 220px; }
.ai-dir-field > span { font-size: 11.5px; font-weight: 600; color: var(--text-3); letter-spacing: .02em; }
.ai-dir-field > select,
.ai-dir-field > input {
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm, 8px);
  background: var(--bg-1, #fff);
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.ai-dir-field > select:focus-visible,
.ai-dir-field > input:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 1px; }

.ai-dir-pageinfo {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ai-dir-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ai-dir-pagebtn {
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-1, transparent);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ai-dir-pagebtn:hover { border-color: var(--brand); color: var(--brand-3); }
.ai-dir-pagebtn:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 2px; }
.ai-dir-pagebtn-on {
  border-color: var(--brand);
  color: var(--text-1);
  font-weight: 700;
  background: var(--bg-2, rgba(0, 0, 0, .05));
  cursor: default;
}
.ai-dir-pagegap { color: var(--text-3); font-size: 13px; padding: 0 2px; }
.ai-dir-noscript { margin: 10px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--text-3); }

/* 分页/筛选靠 hidden 属性显隐。必须 !important，理由见本节头部注释。 */
.ai-dir-item[hidden], .ai-dir-group[hidden] { display: none !important; }

/* --- 55.3 外链图标：共用 <symbol>，条目里只放一个 <use> --- */
.ai-dir-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ai-dir-official .i { flex: 0 0 auto; }

/* --- 55.4 长列表渲染开销：离屏条目跳过排版与绘制（不支持该属性的浏览器自动忽略） --- */
.ai-dir-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 168px;
}

/* --- 55.5 深色主题 / 窄屏 / 打印 / reduced-motion --- */
[data-theme="dark"] .ai-dir-fields,
[data-theme="dark"] .ai-dir-tools { background: var(--bg-2, rgba(255, 255, 255, .04)); }
[data-theme="dark"] .ai-dir-field > select,
[data-theme="dark"] .ai-dir-field > input { background: rgba(255, 255, 255, .06); color: #e5e7eb; }
[data-theme="dark"] .ai-dir-pagebtn { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .ai-dir-pagebtn-on { background: rgba(255, 255, 255, .14); color: #f8fafc; }
[data-theme="dark"] .ai-dir-flag-page { border-color: rgba(52, 211, 153, .45); color: #6ee7b7; }

@media (max-width: 1080px) {
  .ai-dir-fields .ai-dir-dd > dt { min-width: 92px; }
}
@media (max-width: 760px) {
  .ai-dir-field { flex: 1 1 100%; }
  .ai-dir-tools-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ai-dir-fields .ai-dir-dd { flex-wrap: wrap; }
  .ai-dir-fields .ai-dir-dd > dt { min-width: 0; }
  .ai-dir-pageinfo { font-size: 12.5px; }
}

/* 打印/另存 PDF：目录常被打印，分页与筛选控件不该出现，但**内容要全**（把被 hidden 的放回来） */
@media print {
  .ai-dir-tools { display: none; }
  .ai-dir-item[hidden] { display: flex !important; }
  .ai-dir-group[hidden] { display: block !important; }
  .ai-dir-fields, .ai-dir-fields-dl { break-inside: avoid; }
  .ai-dir-pagebtn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-dir-pagebtn { transition: none; }
}
/* --- 55.6 分组级点评 + 口径表补充说明（本批第二次追加；第 22–55.5 节一字未动） ---
   v3 的点评是**分类级**文案，同组内大量重复。实测：906 条里只有 68 个不同取值，
   逐条渲染光这一项就占 210KB。做法是把「本组主流点评」提到分组标题下说一次，
   只有与本组主流值**不同**的条目才在自己的行里再写一遍 —— 信息不减，重复不再刷 906 遍。 */
.ai-dir-groupnote {
  margin: 6px 0 4px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-3);
}
.ai-dir-fields-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-3);
}
.ai-dir-fields-note code {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--bg-2, rgba(0, 0, 0, .06));
  font-size: 11.5px;
}
[data-theme="dark"] .ai-dir-fields-note code { background: rgba(255, 255, 255, .10); }

/* ===== P2-13 375px 横向溢出收口（2026-10-07） ===== */
/* 一、栅格：沿用站内既有修法（1fr → minmax(0,1fr) + 栅格项 min-width:0）。
   这些容器在既有的两批收口（第 3565/3579 行）里**没有被列进去**，
   实测它们正是 edu.html(+68px) / 词汇表等页面的驱动者。 */
@media (max-width: 1080px) {
  .edu-src-catalog { grid-template-columns: minmax(0, 1fr); }
  .edu-src-catalog > * { min-width: 0; }
  .gloss-dl { grid-template-columns: minmax(0, 1fr); }
  .gloss-dl > * { min-width: 0; }
}
@media (max-width: 760px) {
  .edu-scope-strip, .edu-q-options { grid-template-columns: minmax(0, 1fr); }
  .edu-scope-strip > *, .edu-q-options > * { min-width: 0; }
  .deep-card { grid-template-columns: minmax(0, 1fr); }
  .deep-card > * { min-width: 0; }
  .term-list > li { grid-template-columns: minmax(0, 1fr); }
  .term-list > li > * { min-width: 0; }
}

/* 二、flex 行不换行导致溢出：分页器（articles.html +8px，末页按钮 right=383）、
   面板头（chat.html +47px，.select 带内联 width:236px 撑到 410px）。
   这两处只做「允许换行 / 允许收缩」，不隐藏内容、不改变宽屏表现。 */
@media (max-width: 760px) {
  .pager { flex-wrap: wrap; }
  .panel-head { flex-wrap: wrap; }
  .panel-head > * { min-width: 0; }
  .panel-head .row { flex-wrap: wrap; min-width: 0; }
  .panel-head .select, .panel-head .seg { max-width: 100%; min-width: 0; }
  .row-between { flex-wrap: wrap; min-width: 0; }
}

/* 三、长串不断行（uuid.html +39px：.lead 里的 crypto.getRandomValues 一类不可断词；
   exif/编码类工具页的字段值同理）。只允许在**必要时**断词，正常中文/短词不受影响。 */
@media (max-width: 760px) {
  p, li, td, th, .lead, .tool-desc, .ai-dir-summary, .src-badge, .mono { overflow-wrap: anywhere; }
}

/* 四、资讯来源徽章行不换行（news.html +108px，.src-badge 溢到 right=454）。
   .src-badge 本身是 inline-flex，溢出发生在承载它们的行容器上；这里按站内实际类名收口。 */
@media (max-width: 760px) {
  .news-card-body .row, .news-card-body > div, .cell-note, .src-badges { flex-wrap: wrap; }
}

/* 五、兜底：窄屏一律不允许出现横向滚动（第二批的**结果**记录在这里）。
   第一~四批修掉了 12 页里的 8 页（articles/chat/edu/tool-run/exif-read/sql-beautify/url-encode/uuid）。
   剩下 3 页（dashboard 415 / login 434 / news 483）用第 4 版探针（不排除 transform 子树、
   「隐藏后 ≤376 且恢复后回到原值」双条件 + 3 次采样取中位）查到的实情是：
     · login：「div.page」的直接子元素**单独隐藏都不能解决** → 说明有**多个互不相干**的溢出源
       （.wrap 362 / .grid 330 / .card.plan 330 同时在 375 视口里越界），逐页追下去性价比很低。
     · news：溢出链一路指到「.flash-list」（自身只有 241 宽、right=338 **在视口内**），
       但隐藏它却能让 scrollWidth 回到 375 —— 典型的**布局相互依存**，不是一个元素的锅；
       同一页里还有 SVG 图表 g（423 宽，在 .reveal.in 里）与弹层内容。
     · dashboard：「.panel」里的 table.table（321 宽）与侧栏内容混在一起。
   → 对这三页改用**标准兜底**（不是继续猜单个元素）：
     ① .aurora/.grid-lines/.scrim/.modal-scrim/.rail-scrim 都是 position:fixed; inset:0，
        本应等于视口宽，但在移动端仿真下会被撑到文档宽，**它们不是因、是果**，钉死在 100% 即可；
     ② 给栅格/弹性容器与媒体再上一道 max-width:100% / min-width:0；
     ③ ~~html { overflow-x: clip }~~ —— **试过，不能用，已撤掉**：
        我原以为 clip 不创建滚动容器就不会影响 position:sticky，**实测证明是错的** ——
        CDP 实测（375px 下滚到 ~1200，读 .topbar 的 rect.top）：
          · 加 html{overflow-x:clip} → news.html topbar.top=-651、tools.html topbar.top=-90 = **顶栏被滚走了**
          · 同一探针把 html 换成 overflow-x:hidden → 同样坏 → **探针能分辨好坏**，不是误报
        结论：html 上任何非 visible 的 overflow 都会破坏站内吸顶顶栏（.topbar 是 position:sticky）。
        所以窄屏收口**只能从内容侧**做（下面的 max-width/min-width），不能靠 html 裁剪。 */
@media (max-width: 760px) {
  .aurora, .grid-lines, .scrim, .modal-scrim, .rail-scrim { width: 100%; max-width: 100%; }
  .page, .wrap, section.sec-sm, .flash-list, .flash-item { max-width: 100%; min-width: 0; }
  svg, img, canvas, video { max-width: 100%; }
  .modal, .chat-pop, .chat-pop-body { max-width: 100%; min-width: 0; }
  /* ⚠️ 关键补充（2026-10-07，第 8 轮实测定位）：**栅格/弹性「子项」也要 min-width:0**。
     站内第 3570–3573 行只给了「.sidebar-layout > *」等少数几个，漏了「.panel」「.panel-body」「.col」，
     于是里有内容的**最小宽度会一路反推上去**（flex/grid 子项默认 「min-width: auto」 = min-content），
     把外层撑得比视口还宽 —— 这正是 dashboard(415) 与 news(483) 的根因：
     实测「隐藏 「.sidebar-layout」 / 「.col.g24」 / 「.panel」 → scrollWidth 回到 375，
     但单独隐藏里面的 「table.table」 / 单个 「.flash-item」 没用」（因为它们是**一组**里最宽的那个在起作用）。 */
  .sidebar-layout > *, .sidebar-right > *, .layout-side > *, .col > *, .col.g24 > *,
  .grid > *, .grid-auto > *, .panel, .panel-body, .card { min-width: 0; }

  /* dashboard 的 14 天积分图表（dashboard.html 里「div data-chart style=display:flex;gap:10px」，
     内容由 app.js#bindChart 生成）：
     14 列每列一个「N日」标签，标签**最小宽度**合计 ≈415px，而容器只有 281px ——
     内联 「display:flex」 没有 wrap，内容从容器里**溢出**并把文档撑到 415（视口 375）。
     实测：隐藏这个图表容器或其父 「.panel-body」 都能让 scrollWidth 回到 375；
     但**单独隐藏任意一个柱子或标签都没用** —— 是 14 个一起在起作用。
     窄屏处置：允许列缩到 0、把「N日」标签收起来（柱子保留，每根柱子的 title 悬停数值也保留）。
     宽屏（>760）**完全不变**。 */
  [data-chart] > * { min-width: 0; }
  [data-chart] > * > span { display: none; }

  /* news 快讯流（news.html 的 .flash-list）：根因是 **.src-badge 写了 white-space: nowrap**
     （main.css 第 739 行）。徽章文字「OpenAI 官方博客」不可断行 → .flash-meta 的最小宽度很大；
     而 .flash-item 的固定部分（时间 44 + 缩略图 104 + 两个间隙 28 = 176）在 375 视口下
     只给正文列留 ~65px → 徽章整行溢出，把文档撑到 **483**。
     实测（按类名**批量**隐藏的协议）：把全部 **15 个** .src-badge 一起隐藏 → 回到 375，
     **只隐藏其中一个没用**（9 条快讯各有各的徽章，隐藏一个其余还在）。
     ⚠️ 我在第六轮加过 .src-badge { overflow-wrap: anywhere }，**完全无效** ——
     因为 white-space: nowrap 会直接禁止断行，overflow-wrap 根本轮不到起作用（这一条记下来）。
     处置：窄屏允许徽章换行；宽屏（>760）完全不变。 */
  .src-badge { white-space: normal; overflow-wrap: anywhere; }
}