/* ══════════════════════════════════════════════════════
   文章站（blog / ai-news）样式 —— 2026-09-24 起**并入本站统一 UI**
   ══════════════════════════════════════════════════════
   改版前这套是外部导入的成品包，自成一派：深蓝底 #080c18 + 青色主色
   #00d4ff + Inter / Space Grotesk 网络字体 + 17px/1.78 的疏排。跟主站
   (#0d1117 + #58a6ff + 系统字体 + 15px/1.55) 一眼能看出是两个站。

   三处根因，逐个说明为什么这么改：

   ① **页眉两边不一样，是"变量取不到值"而不是样式没写。**
      assets/header.css 是全站共用的页眉样式（主站 + blog + ai-news 同一份），
      它读 --border / --border-strong / --purple / --text / --text-dim —— 这五个
      原来只在 assets/style.css 的 :root 里定义，而 blog 页面根本不加载那个文件。
      于是页眉在文章站上一直按"变量为空"的默认态渲染：langsw 没有底色和边框、
      logo 被本文件旧版的 .brand span{font-size:13px} 压成小字。
      修法：本文件的 :root 原样补上主站那一整套同名同值 token。

   ② **别名层。** 192 个静态页的 markup 吃的是本文旧版的名字（--panel / --ink /
      --line / --r …），改名字要动 192 个 HTML。所以保留旧名，但全部指向主站
      token；组件值一律改用 token，不再散落硬编码色。

   ③ **密度对齐主站。** 正文 17px/1.78 -> 15px/1.55，长文（.lang）走主站
      readme/intro 的正文尺度 14.5px/1.7；标题外边距、卡片内边距、章节间距
      全部按 2026-09-24 主站那轮密度改版的同一把尺子收。
   ══════════════════════════════════════════════════════ */
:root {
  /* ── 主站统一样式 token：名字与值与 assets/style.css 的 :root 逐条一致。
        不要在这边单独调色 —— 全站只有一个真相源，要改两边一起改。 ── */
  /* 2026-09-26 浅色「护眼纸」主题（与 assets/style.css 同值，见那里注释）。 */
  --bg: #F6F2E8;
  --bg-2: #EBE5D2;
  --bg-elev: #FCFAF1;
  --bg-elev2: #FFFFFF;
  --bg-elev3: #F1ECDF;
  --border: #E0D9C5;
  --border-strong: #C7BFA8;
  --text: #2A2926;
  --text-dim: #5E574B;
  --text-muted: #706855;
  --accent: #1F5F9E;
  --accent-2: #35638F;
  --accent-glow: rgba(31, 95, 158, 0.12);
  --purple: #6B4FA0;
  --purple-glow: rgba(107, 79, 160, 0.12);
  --success: #2D7A4E;
  --warn: #A47108;
  --danger: #A93226;
  --link: #1F5F9E;
  --code-bg: #EFE9D6;

  /* ── 文章包旧别名（markup 依赖，勿改名） ── */
  --bg2: var(--bg-2);
  --panel: var(--bg-elev);
  --panel2: var(--bg-elev2);
  --ink: var(--text);
  --ink2: var(--text-dim);
  --ink3: var(--text-muted);
  --accent2: var(--purple);
  --amber: var(--warn);
  --green: var(--success);
  --red: var(--danger);
  --line: var(--border);
  --line2: var(--border-strong);
  --r: 12px;
  --rs: 8px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: var(--sans);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

/* 深色主题保留：data-theme="dark" 时切回旧色，跟主站 assets/style.css 同语义。 */
[data-theme="dark"] {
  --bg: #0d1117;
  --bg-2: #010409;
  --bg-elev: #161b22;
  --bg-elev2: #1f262e;
  --bg-elev3: #2a313c;
  --border: #30363d;
  --border-strong: #444c56;
  --text: #e6edf3;
  --text-dim: #8b949e;
  --text-muted: #6e7681;
  --accent: #58a6ff;
  --accent-2: #79c0ff;
  --accent-glow: rgba(88, 166, 255, .15);
  --purple: #bc8cff;
  --purple-glow: rgba(188, 140, 255, .15);
  --success: #3fb950;
  --warn: #d29922;
  --danger: #f85149;
  --link: #2f81f7;
  --code-bg: #161b22;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--link); text-decoration: none }
a:hover { text-decoration: underline }
img { display: block; max-width: 100% }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }

/* ── 语言切换 ── */
html[data-lang="zh"] .lang-en { display: none }
html[data-lang="en"] .lang-zh { display: none }

/* ── 页眉品牌位 ──
   页眉本体由 assets/header.css 提供（全站共用），本文件只补主站 assets/style.css
   里那条基础 .brand 规则 —— 文章站不加载主站样式表，缺了它品牌行会退化成裸 flex。
   注意：这里**不能**再写 .brand span{font-size:…} 之类，那会打到 logo 的内层
   span（.logo-hbd）上，把 20px 的 logo 压成 13px（2026-09-24 修掉的老毛病）。 */
.brand { display: flex; align-items: baseline; gap: 12px }

/* ── 布局：与主站 .container 同一把尺子（max-width 1280 含 24px 内边距） ── */
.wrap { width: min(1232px, 100% - 48px); margin-inline: auto }
main { padding: 24px 0 48px }
.narrow { max-width: 760px }

/* ── 面包屑 ── */
.crumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--text-dim); margin-bottom: 12px }
.crumb a { color: var(--text-dim) }
.crumb a:hover { color: var(--accent) }
.crumb i { font-style: normal; opacity: .5 }

/* ── 徽标 / 页头 ── */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px }
.badge {
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--accent-glow); color: var(--accent-2); border: 1px solid rgba(88, 166, 255, .28);
}
.badge.dim { background: rgba(255, 255, 255, .05); color: var(--text-dim); border-color: var(--border-strong) }
h1 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.25; font-weight: 700; letter-spacing: -.4px }
/* 2026-09-24 Bing 收录优化：文章页双 h1 合并后的单一 h1（双语 span 沿用全局 data-lang 显隐），
   以及 /blog/、/ai-news/ 列表页新增的 h1。两种模式各只显示一种语言，尺寸继承 h1 本体 */
.article-title-merged { margin: 14px 0 12px }
.listing-h1 { margin: 4px 0 14px }
.standfirst { font-size: 15px; color: var(--text-dim); margin-top: 10px; line-height: 1.6 }
.pmeta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: 12.5px; color: var(--text-muted) }
.pmeta .av {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--purple)); color: #0d1117; font-weight: 800; font-size: 11px;
}
.pmeta .dot { opacity: .4 }

/* ── 主图 ── */
.hero { margin: 16px 0 4px; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--bg-elev) }
.hero img { width: 100%; aspect-ratio: 1200/630; object-fit: cover }

/* ── 目录 ── */
.toc {
  margin: 18px 0; padding: 14px 16px;
  background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--rs);
}
.toc-h { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 9px }
.toc ol { list-style: none; display: grid; gap: 5px }
.toc a { display: flex; gap: 8px; font-size: 13.5px; color: var(--text-dim); line-height: 1.5 }
.toc a:hover { color: var(--accent); text-decoration: none }
.toc a span { font-family: var(--mono); font-size: 12px; color: var(--accent); flex: 0 0 auto; padding-top: 1px }

/* ── 正文：尺度对齐主站 .readme-body / .intro-body（14.5px / 1.7） ── */
.lang { max-width: 760px; font-size: 14.5px; line-height: 1.7 }
h2 {
  font-size: clamp(19px, 2.1vw, 24px); line-height: 1.3; font-weight: 700;
  margin: 26px 0 10px; padding-top: 4px; scroll-margin-top: 80px; display: flex; gap: 10px; align-items: baseline;
}
h2 .hn {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent);
  border: 1px solid rgba(88, 166, 255, .3); background: var(--accent-glow);
  padding: 1px 6px; border-radius: 4px; flex: 0 0 auto; line-height: 1.6;
}
h3 { font-size: 16px; font-weight: 700; margin: 20px 0 8px }
h4 { font-size: 14.5px; font-weight: 700; margin: 16px 0 6px }
p { margin: 0 0 .8em; color: var(--text) }
p strong, li strong { color: var(--text); font-weight: 600 }
ul, ol { margin: 0 0 .8em; padding-left: 20px; color: var(--text) }
li { margin: 3px 0 }
li::marker { color: var(--accent) }
hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0 }
blockquote {
  margin: 14px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--purple);
  color: var(--text-dim);
}
code { font-family: var(--mono); font-size: .88em; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; color: var(--accent-2); border: 1px solid var(--border) }
pre { margin: 14px 0; padding: 12px 14px; overflow-x: auto; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--rs) }
pre code { background: none; padding: 0; color: var(--text); border: 0 }

/* ── 提示块 ── */
.bx { margin: 16px 0; padding: 13px 15px; border-radius: var(--rs); border: 1px solid var(--border-strong); background: var(--bg-elev) }
.bx-h { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 8px }
.bx-i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--bg-elev2); font-size: 11px; flex: 0 0 auto }
.bx-b > p:first-child { margin-top: 0 }
.bx-b > p:last-child { margin-bottom: 0 }
.bx-b ul { margin: 0; padding-left: 18px }
.bx-takeaways { border-left: 3px solid var(--accent); background: linear-gradient(180deg, var(--accent-glow), transparent) }
.bx-tip, .bx-trivia { border-left: 3px solid var(--warn); background: linear-gradient(180deg, rgba(210, 153, 34, .08), transparent) }
.bx-warn, .bx-myth { border-left: 3px solid var(--danger); background: linear-gradient(180deg, rgba(248, 81, 73, .08), transparent) }
.bx-info { border-left: 3px solid var(--success); background: linear-gradient(180deg, rgba(63, 185, 80, .08), transparent) }
.bx-analogy { border-left: 3px solid var(--purple); background: linear-gradient(180deg, var(--purple-glow), transparent) }
.bx-bubble, .bx-tool, .bx-demo { border-left: 3px solid var(--text-muted) }

/* ── 编号步骤 ── */
.steps { list-style: none; padding: 0; display: grid; gap: 10px; margin: 16px 0; counter-reset: s }
.steps > li { display: flex; gap: 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--rs); padding: 12px 14px }
.steps .sn {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
  background: var(--accent-glow); color: var(--accent); font-family: var(--mono); font-weight: 700; font-size: 12px;
}
.steps .sb h4 { margin: 1px 0 3px }
.steps .sb p { margin: 0; font-size: 13.5px; color: var(--text-dim) }

/* ── 流程 ── */
.flow { margin: 16px 0; padding: 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--rs) }
.flow-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 10px }
.flow-l { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.flow-l > li {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: var(--bg-elev2); border: 1px solid var(--border-strong); border-radius: 999px; font-size: 13px; color: var(--text);
}
.flow-l > li:not(:last-child)::after { content: "→"; color: var(--accent); margin-left: 5px; font-weight: 700 }
.flow-l .fn { font-family: var(--mono); font-size: 11px; color: var(--accent) }

/* ── 时间线 ── */
.timeline { list-style: none; padding: 0 0 0 18px; margin: 16px 0; border-left: 2px solid var(--border-strong) }
.timeline > li { position: relative; padding: 0 0 16px 16px }
.timeline > li::before { content: ""; position: absolute; left: -25px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow) }
.timeline .ty { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 700 }
.timeline h4 { margin: 2px 0 3px }
.timeline p { margin: 0; font-size: 13.5px; color: var(--text-dim) }

/* ── 数据卡 ── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 16px 0 }
.st { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--rs); padding: 13px }
.st-v { font-size: 24px; font-weight: 700; color: var(--accent-2); line-height: 1.1 }
.st-l { font-size: 13.5px; color: var(--text-dim); margin-top: 6px }
.st-s { font-size: 12px; color: var(--text-muted); margin-top: 6px }

/* ── 通用卡片 ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 16px 0 }
.cd { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--rs); padding: 13px; transition: border-color .15s }
.cd:hover { border-color: var(--accent) }
.cd-i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--bg-elev2); font-size: 13px; margin-bottom: 8px }
.cd-t { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--accent-2); background: var(--accent-glow); border-radius: 999px; padding: 2px 8px; margin-bottom: 7px }
.cd h4 { margin: 0 0 6px; font-size: 14px }
.cd-b { font-size: 13px; color: var(--text-dim) }
.cd-n { font-size: 13px; color: var(--text-muted); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-strong); font-style: italic }
.k-risk .cd { border-left: 3px solid var(--danger) }
.k-tool .cd { border-left: 3px solid var(--accent) }

/* ── 表格 ── */
.tw { margin: 16px 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--rs) }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 440px }
th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border) }
th { background: var(--bg-elev2); color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap }
td { color: var(--text-dim) }
tr:last-child td { border-bottom: 0 }

/* ── FAQ ── */
.faq { margin: 16px 0; display: grid; gap: 6px }
.faq details { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--rs); overflow: hidden }
.faq summary { padding: 11px 14px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; color: var(--accent); font-size: 17px; font-weight: 700; flex: 0 0 auto }
.faq details[open] summary::after { content: "–" }
.faq .fb { padding: 0 14px 13px; color: var(--text-dim); font-size: 13.5px }

/* ── 图片 ── */
figure { margin: 16px 0 }
figure img { border-radius: var(--rs); border: 1px solid var(--border) }
figcaption { font-size: 12px; color: var(--text-muted); margin-top: 7px; text-align: center }

/* ── 作者 / 相关阅读 ── */
.author { display: flex; gap: 12px; margin: 24px 0 0; padding: 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--rs) }
.author .av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--purple)); color: #0d1117; font-weight: 800 }
.author h4 { margin: 1px 0 4px }
.author p { margin: 0; font-size: 13px; color: var(--text-dim) }

.related { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border) }
.related > h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 10px }
.rl-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px }
.rl { display: block; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--rs); transition: border-color .15s, transform .15s }
.rl:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px) }
.rl h4 { margin: 0 0 5px; font-size: 14px; color: var(--text) }
.rl-r { font-size: 12px; color: var(--text-muted) }

/* ── 页脚 ── */
footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 22px 0 32px; color: var(--text-muted); font-size: 12.5px }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between }

/* ── 列表页 ── */
.lists { display: grid; gap: 28px; margin-top: 20px }
.lists h2 { font-size: 19px; margin: 0 0 3px; display: block }
.lists .sub { color: var(--text-muted); font-size: 13px; margin-bottom: 10px }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px }
.card { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r); transition: border-color .15s, transform .15s }
.card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none }
.card h3 { margin: 0; font-size: 14.5px; color: var(--text); line-height: 1.35 }
.card p { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5 }
.card .cf { margin-top: auto; display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--text-muted) }
.card .cf .badge { font-size: 10px; padding: 2px 8px }

@media (max-width: 640px) {
  .wrap { width: min(1232px, 100% - 32px) }
  h2 { gap: 8px }
  .stats, .cards { grid-template-columns: 1fr }
}
@media print {
  .lang-en, html[data-lang] .lang-en { display: none }
  body { background: #fff; color: #111 }
}

/* --- 站点主导航（2026-09-21 并入主站页眉后已无 markup 使用，保留备查） --- */
.topnav { display: flex; gap: 18px; margin-left: auto; }
.topnav a { font-size: 14px; font-weight: 600; color: var(--text-dim); text-decoration: none; }
.topnav a:hover, .topnav a.cur { color: var(--accent); }
@media (max-width: 760px) { .topnav { display: none } }

/* --- 列表页横排卡片（2026-09-21 用户要求）--- */
.lists .grid { display: flex; flex-direction: column; gap: 6px; }
.lists .card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 3px;
  padding: 10px 12px;
}
.lists .card .badge { grid-column: 1; grid-row: 1; }
.lists .card h3 { grid-column: 2; grid-row: 1; font-size: 14px; }
.lists .card .cf { grid-column: 3; grid-row: 1; margin: 0; }
.lists .card p {
  grid-column: 2 / 4; grid-row: 2;
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 窄屏：标题独占整行。
   旧版是 grid-template-columns: 1fr auto，标题被右侧那串
   "N 分钟阅读 · 2026 年 9 月 22 日"（约 200px）挤到只剩 ~150px，
  中文标题当场折成 3 行 —— 实测 390px 下第一张卡就 150px 高。
   改成单列堆叠：标题一行、meta 一行、摘要一行，卡高降到 ~86px。 */
@media (max-width: 760px) {
  .lists .card { grid-template-columns: 1fr; padding: 10px 12px; row-gap: 2px; }
  .lists .card .badge { display: none; }
  .lists .card h3 { grid-column: 1; grid-row: 1; }
  .lists .card .cf { grid-column: 1; grid-row: 2; }
  .lists .card p { grid-column: 1; grid-row: 3; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT-MODE OVERRIDES — 文章站（blog / ai-news）
   与 assets/style.css 同样的思路：默认 :root 是浅色，下面几条覆盖
   为深色调设计的硬编码颜色，cream 上不翻车。深色态用 :not 排除。
   ═══════════════════════════════════════════════════════════════════════════ */

/* 渐变蓝紫色块上的硬编码 #0d1117 文案：浅色态下沉到 #1F5F9E 时左端只有
   ~3.7:1（FAIL），统一改成 #fff 后落在 6.5:1（AA）。深色态下渐变是亮蓝
   + 亮紫，深字仍然可读，所以保持原值不动。 */
html:not([data-theme="dark"]) .pmeta .av,
html:not([data-theme="dark"]) .author .av { color: #fff; }

/* 「分类」等带蓝色 alpha 的小徽章在 cream 上原本 0.15 太浅，提一档。 */
html:not([data-theme="dark"]) .cat,
html:not([data-theme="dark"]) .kind { background: rgba(31, 95, 158, 0.18); border-color: rgba(31, 95, 158, 0.42); }

/* .badge.dim 的 rgba(255,255,255,.05) 在 cream 上是"白上白"（等于没底），
   浅色态改成一点暖灰压暗；深色态保持原来的提亮。 */
html:not([data-theme="dark"]) .badge.dim { background: rgba(43, 41, 38, 0.06); }