/* ============================================================
   JSON Diff Hub — "Diff Spectrum" 暗色双色调
   设计隐喻：对比 = 两种颜色。左（Original）钴蓝，右（Modified）珊瑚橙，
   两侧固定装饰栏呼应双栏工具。字体 Syne / Schibsted Grotesk / JetBrains Mono。
   ============================================================ */

:root {
  --bg: #0b0d15;
  --bg-raised: #10131d;
  --surface: #141826;
  --surface-2: #1a1f30;
  --line: #232941;
  --line-strong: #303854;
  --ink: #eceef6;
  --muted: #9aa1b8;
  --faint: #676f8a;

  --left: #5b8cff;          /* Original · JSON A */
  --left-dark: #7ba3ff;
  --left-soft: rgba(91, 140, 255, .13);
  --right: #ff8a5c;         /* Modified · JSON B */
  --right-dark: #ffa57e;
  --right-soft: rgba(255, 138, 92, .13);

  --added: #3ecf8e;
  --added-bg: rgba(62, 207, 142, .12);
  --removed: #f0566a;
  --removed-bg: rgba(240, 86, 106, .12);
  --changed: #e8b64c;
  --changed-bg: rgba(232, 182, 76, .13);

  --radius: 16px;
  --radius-sm: 10px;
  --max-width: 1120px;
  --rail-width: 46px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 18px rgba(0, 0, 0, .25);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .4);
  --mono: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, Menlo, monospace;
  --sans: "Schibsted Grotesk", "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  --display: "Syne", var(--sans);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(900px 540px at 6% 0%, rgba(91, 140, 255, .13), transparent 58%),
    radial-gradient(900px 540px at 94% 0%, rgba(255, 138, 92, .11), transparent 58%),
    linear-gradient(rgba(255, 255, 255, .017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .017) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  background-attachment: fixed;
}

.inner { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
a { color: var(--left-dark); }

/* ============================================================
   两侧装饰栏（桌面 ≥1260px 显示）
   ============================================================ */
.side-rail {
  position: fixed; top: 0; bottom: 0; width: var(--rail-width); z-index: 60;
  display: none; flex-direction: column; align-items: center;
  justify-content: space-between; padding: 96px 0 44px;
  pointer-events: none;
}
@media (min-width: 1260px) { .side-rail { display: flex; } }
.rail-left  { left: 0;  border-right: 1px solid rgba(91, 140, 255, .18);
  background: linear-gradient(180deg, rgba(91,140,255,.07), transparent 30%, transparent 70%, rgba(91,140,255,.07)); }
.rail-right { right: 0; border-left: 1px solid rgba(255, 138, 92, .18);
  background: linear-gradient(180deg, rgba(255,138,92,.07), transparent 30%, transparent 70%, rgba(255,138,92,.07)); }
.rail-glyph { font-family: var(--mono); font-size: 1.15rem; font-weight: 600; opacity: .55; }
.rail-left .rail-glyph { color: var(--left); }
.rail-right .rail-glyph { color: var(--right); }
.rail-text {
  writing-mode: vertical-rl; letter-spacing: .42em; text-transform: uppercase;
  font-size: .64rem; font-weight: 600; user-select: none;
}
.rail-left .rail-text { color: rgba(123, 163, 255, .55); }
.rail-right .rail-text { color: rgba(255, 165, 126, .55); transform: rotate(180deg); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  background: rgba(11, 13, 21, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.site-header .inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.05rem; letter-spacing: -.3px; font-family: var(--display); }
.logo .logo-img { width: 38px; height: 38px; border-radius: 10px; display: block; }
.logo .logo-name { color: var(--ink); }
.logo .logo-dot { background: linear-gradient(90deg, var(--left), var(--right)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.nav-links { list-style: none; display: flex; gap: 26px; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: 52px 0 10px; text-align: center; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--left-dark); background: var(--left-soft);
  border: 1px solid rgba(91, 140, 255, .28); border-radius: 999px;
  padding: 5px 15px; margin-bottom: 20px;
}
.hero .eyebrow::before, .hero .eyebrow::after { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.hero .eyebrow::before { background: var(--left); }
.hero .eyebrow::after { background: var(--right); }
.hero h1 {
  font-family: var(--sans); font-size: 2.35rem; font-weight: 700;
  letter-spacing: -.3px; line-height: 1.25; margin-bottom: 14px; color: var(--ink);
}
.hero h1 .duo {
  background: linear-gradient(92deg, var(--left) 10%, var(--right) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { color: var(--muted); font-size: 1.02rem; max-width: 660px; margin: 0 auto; }

/* ============================================================
   工具卡片（双栏对比器）
   ============================================================ */
.tool-section { padding: 30px 0 8px; }
.diff-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.diff-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
}
.window-dots { display: flex; gap: 7px; flex-shrink: 0; }
.window-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.window-dots i:nth-child(1) { background: #ff5f57; }
.window-dots i:nth-child(2) { background: #febc2e; }
.window-dots i:nth-child(3) { background: #28c840; }
.editor-tab {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .76rem; color: var(--faint);
  padding: 3px 12px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line);
}
.editor-badge {
  margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px;
}
.editor-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(90deg, var(--left), var(--right)); }

/* Toolbar */
.diff-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 13px 18px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.015);
}
.toolbar-divider { width: 1px; height: 26px; background: var(--line); margin: 0 6px; }
.btn {
  font-family: var(--sans); font-size: .83rem; font-weight: 600; padding: 8px 16px; border-radius: 9px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.btn:hover { border-color: var(--left); color: var(--left-dark); }
.btn-primary {
  background: linear-gradient(92deg, var(--left), #8a6cf0 55%, var(--right));
  border: none; color: #fff; box-shadow: 0 4px 18px rgba(91, 140, 255, .3);
}
.btn-primary:hover { filter: brightness(1.12); color: #fff; box-shadow: 0 4px 24px rgba(255, 138, 92, .35); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.btn-danger:hover { color: var(--removed); border-color: var(--removed); }
.smart-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--muted); font-weight: 500; cursor: pointer; user-select: none;
}
.smart-toggle input { accent-color: var(--left); width: 15px; height: 15px; cursor: pointer; }

/* 双栏编辑区 */
.diff-body { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.diff-pane { display: flex; flex-direction: column; min-width: 0; }
.diff-pane + .diff-pane { border-left: 1px solid var(--line); }
.pane-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px; background: var(--bg-raised); border-bottom: 1px solid var(--line);
}
.pane-title { font-size: .71rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.pane-a .pane-title { color: var(--left-dark); }
.pane-b .pane-title { color: var(--right-dark); }
.pane-title::before { content: ""; width: 8px; height: 8px; border-radius: 3px; }
.pane-a .pane-title::before { background: var(--left); }
.pane-b .pane-title::before { background: var(--right); }
.pane-meta { font-size: .7rem; color: var(--faint); font-family: var(--mono); }
.code-input {
  width: 100%; min-height: 360px; padding: 16px 18px;
  border: none; outline: none; resize: vertical;
  font-family: var(--mono); font-size: .8rem; line-height: 1.75;
  background: var(--bg-raised); color: #d6dcf0; tab-size: 2;
  transition: background .15s;
}
.code-input:focus { background: #0e1119; }
.code-input::placeholder { color: #4b5470; }

/* VS 徽章（双栏中缝） */
.vs-badge {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  z-index: 5; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: .82rem;
  color: var(--muted); box-shadow: var(--shadow-sm), 0 0 0 6px rgba(11, 13, 21, .85);
}
.vs-badge span {
  background: linear-gradient(92deg, var(--left), var(--right));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 状态栏 */
.status-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-top: 1px solid var(--line);
  font-size: .82rem; background: var(--bg-raised);
}
.status-icon { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.status-text { flex: 1; color: var(--muted); }
.status-stats { color: var(--faint); font-family: var(--mono); font-size: .74rem; }
.status-bar.success .status-icon { background: var(--added); }
.status-bar.success .status-text { color: var(--added); }
.status-bar.error .status-icon { background: var(--removed); }
.status-bar.error .status-text { color: var(--removed); }
.status-bar.info .status-icon { background: var(--changed); }
.status-bar.info .status-text { color: var(--changed); }

/* ============================================================
   结果区
   ============================================================ */
.result-section { padding: 26px 0 8px; }
.result-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.result-empty { padding: 40px 24px; text-align: center; color: var(--faint); font-size: .9rem; }
.result-empty .big-sym { font-family: var(--mono); font-size: 1.7rem; margin-bottom: 10px; letter-spacing: 6px; }
.result-empty .big-sym b { color: var(--left); font-weight: 600; }
.result-empty .big-sym i { color: var(--right); font-style: normal; font-weight: 600; }

.result-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.result-title { font-family: var(--display); font-size: .95rem; font-weight: 700; letter-spacing: -.2px; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .74rem; font-weight: 600;
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--muted); background: var(--surface-2);
}
.chip.added   { color: var(--added);   border-color: rgba(62,207,142,.35);   background: var(--added-bg); }
.chip.removed { color: var(--removed); border-color: rgba(240,86,106,.35);  background: var(--removed-bg); }
.chip.changed { color: var(--changed); border-color: rgba(232,182,76,.35);  background: var(--changed-bg); }
.chip.identical { color: var(--added); border-color: rgba(62,207,142,.35); background: var(--added-bg); }
.result-actions { margin-left: auto; display: flex; gap: 8px; }

/* 结果 tabs */
.result-tabs { display: flex; gap: 4px; padding: 10px 18px 0; background: var(--bg-raised); border-bottom: 1px solid var(--line); }
.rtab {
  font-family: var(--sans); font-size: .82rem; font-weight: 600; padding: 8px 16px 10px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s;
}
.rtab:hover { color: var(--ink); }
.rtab.active { color: var(--left-dark); border-bottom-color: var(--left); }
.rtab .cnt { font-family: var(--mono); font-size: .68rem; color: var(--faint); margin-left: 5px; }
.rtab.active .cnt { color: var(--left); }
.rpanel { display: none; }
.rpanel.active { display: block; }

/* 路径级变更列表 */
.change-list { max-height: 460px; overflow: auto; }
.change-row {
  display: grid; grid-template-columns: 84px 1fr; gap: 14px;
  padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: .8rem;
  align-items: baseline;
}
.change-row:last-child { border-bottom: none; }
.change-row:hover { background: rgba(255,255,255,.02); }
.change-type {
  font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-align: center; padding: 2px 0; border-radius: 6px; align-self: center;
}
.change-type.added   { color: var(--added);   background: var(--added-bg); }
.change-type.removed { color: var(--removed); background: var(--removed-bg); }
.change-type.changed { color: var(--changed); background: var(--changed-bg); }
.change-path { font-family: var(--mono); color: var(--ink); font-size: .76rem; word-break: break-all; }
.change-vals { margin-top: 3px; font-family: var(--mono); font-size: .74rem; color: var(--muted); word-break: break-all; line-height: 1.6; }
.change-vals .val-old { color: var(--removed); }
.change-vals .val-new { color: var(--added); }
.change-vals .arrow { color: var(--faint); padding: 0 4px; }
.change-vals .note { color: var(--changed); }

/* 行级统一 diff */
.unified-view { max-height: 520px; overflow: auto; font-family: var(--mono); font-size: .76rem; }
.diff-line { display: grid; grid-template-columns: 44px 44px 22px 1fr; padding: 0; line-height: 1.65; }
.diff-line .ln { color: var(--faint); text-align: right; padding-right: 8px; user-select: none; font-size: .68rem; }
.diff-line .ln.empty { visibility: hidden; }
.diff-line .sign { text-align: center; font-weight: 700; user-select: none; }
.diff-line .txt { padding-right: 14px; white-space: pre-wrap; word-break: break-all; color: #c3cade; }
.diff-line.del { background: var(--removed-bg); }
.diff-line.del .sign, .diff-line.del .txt { color: var(--removed); }
.diff-line.add { background: var(--added-bg); }
.diff-line.add .sign, .diff-line.add .txt { color: var(--added); }
.diff-line.ctx .txt { color: #8891a8; }
.tok-key { color: #8ab4ff; }
.tok-str { color: #7ddca0; }
.tok-num { color: #ffb86b; }
.tok-bool { color: #d9a5ff; }
.diff-line.del .tok-key { color: #ff92a1; }
.diff-line.del .tok-str { color: #ff92a1; }
.diff-line.del .tok-num { color: #ffb1bd; }
.diff-line.add .tok-key { color: #7ce3ae; }
.diff-line.add .tok-str { color: #7ce3ae; }
.diff-line.add .tok-num { color: #a7f0c8; }
.diff-truncated { padding: 10px 18px; font-size: .74rem; color: var(--changed); font-family: var(--mono); border-top: 1px solid var(--line); }

/* ============================================================
   特色卡片
   ============================================================ */
.features { padding: 40px 0 10px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 24px 22px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.feature::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--left), var(--right)); opacity: .6; }
.feature .f-icon {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 15px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 1.05rem; font-weight: 700;
  color: var(--left-dark); background: var(--left-soft); border: 1px solid rgba(91,140,255,.25);
}
.feature:nth-child(2) .f-icon { color: var(--changed); background: var(--changed-bg); border-color: rgba(232,182,76,.25); }
.feature:nth-child(3) .f-icon { color: var(--right-dark); background: var(--right-soft); border-color: rgba(255,138,92,.25); }
.feature h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -.2px; font-family: var(--display); }
.feature p { font-size: .85rem; color: var(--muted); line-height: 1.65; }

/* ============================================================
   内容区（说明 + FAQ）
   ============================================================ */
.content-section { padding: 38px 0; }
.content-section .inner { max-width: 800px; }
.content-section h2 { font-family: var(--display); font-size: 1.45rem; font-weight: 700; letter-spacing: -.5px; margin: 36px 0 14px; color: var(--ink); }
.content-section h2:first-child { margin-top: 0; }
.content-section h3 { font-size: 1.05rem; font-weight: 600; margin: 24px 0 8px; color: var(--ink); }
.content-section p { font-size: .95rem; color: var(--muted); margin-bottom: 14px; }
.content-section ul, .content-section ol { margin: 0 0 16px 22px; color: var(--muted); font-size: .93rem; }
.content-section li { margin-bottom: 8px; }
.content-section code { font-family: var(--mono); background: var(--surface-2); color: var(--right-dark); padding: 2px 7px; border-radius: 5px; font-size: .85em; }
.content-section strong { color: var(--ink); }

/* 首页 FAQ 折叠 */
.faq-block details {
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px;
  background: var(--surface); overflow: hidden; transition: border-color .2s;
}
.faq-block details[open] { border-color: rgba(91,140,255,.4); }
.faq-block summary {
  padding: 16px 20px; font-weight: 600; font-size: .95rem; cursor: pointer;
  list-style: none; color: var(--ink); display: flex; align-items: center; gap: 12px;
}
.faq-block summary::-webkit-details-marker { display: none; }
.faq-block summary::before {
  content: '+'; color: var(--left-dark); font-weight: 700; font-size: 1.15rem;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--left-soft); border-radius: 7px; flex-shrink: 0;
}
.faq-block details[open] summary::before { content: '\2212'; background: var(--left); color: #fff; }
.faq-block details p { padding: 2px 20px 18px 54px; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.75; }

/* ============================================================
   文章列表（白色卡片 — CMS 强制规范）
   ============================================================ */
.article-list { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.article-list a {
  display: block; padding: 16px 20px;
  border: 1px solid #e0e0e0; border-radius: 8px; background: #ffffff;
  text-decoration: none; transition: border-color .2s, box-shadow .2s; color: #1a1a1a;
}
.article-list a:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, .15); }
.article-list .article-title { font-weight: 600; font-size: .95rem; color: #1a1a1a; margin-bottom: 6px; line-height: 1.4; }
.article-list a:hover .article-title { color: #2563eb; }
.article-list .article-desc { font-size: .82rem; color: #666; line-height: 1.5; }
.view-all { margin-top: 18px; text-align: center; }
.view-all a {
  display: inline-block; padding: 10px 22px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none;
  font-size: .88rem; font-weight: 600; transition: all .15s;
}
.view-all a:hover { border-color: var(--left); color: var(--left-dark); }

/* ============================================================
   文章详情页（亮色阅读区 — CMS 强制规范）
   ============================================================ */
.article-content { padding: 56px 0; background: #f5f6f8; }
.article-content .inner { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.article-content article {
  background: #ffffff; border-radius: 16px;
  padding: 56px 64px; box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
  color: #333;
}
.article-content h1 {
  font-family: var(--sans); font-size: 2.1rem; font-weight: 700;
  color: #111; margin-bottom: 16px; line-height: 1.3; letter-spacing: -.01em;
  text-transform: capitalize;
}
.article-content h2 {
  font-family: var(--sans); font-size: 1.45rem; font-weight: 700;
  color: #111; margin: 46px 0 18px; line-height: 1.35; letter-spacing: -.01em;
  padding-bottom: 12px; border-bottom: 2px solid #f0f2f5;
}
.article-content h3 { font-family: var(--sans); font-size: 1.15rem; font-weight: 700; color: #1a1a1a; margin: 32px 0 14px; line-height: 1.4; }
.article-content p { margin-bottom: 20px; color: #333; line-height: 1.9; font-size: 1.06rem; overflow-wrap: break-word; }
.article-content article > p:first-of-type { font-size: 1.13rem; color: #2b2b2b; }
.article-content li { margin-bottom: 12px; color: #333; line-height: 1.85; font-size: 1.06rem; }
.article-content ul li::marker { color: #2563eb; }
.article-content strong { color: #111; font-weight: 700; }
.article-content code { font-family: var(--mono); background: #f0f2f5; color: #d6336c; padding: 2px 7px; border-radius: 4px; font-size: .88em; }
.article-content blockquote {
  border-left: 4px solid #2563eb; padding: 18px 24px; margin: 28px 0;
  background: #f8f9fb; border-radius: 0 8px 8px 0; color: #555; font-size: 1rem; line-height: 1.8;
}
.article-content blockquote p { margin-bottom: 0; }
.article-content .article-meta {
  font-size: .85rem; color: #8890a0; margin-bottom: 36px;
  padding-bottom: 22px; border-bottom: 1px solid #eceff3;
}
.article-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 24px;
  font-size: .88rem; color: #666; text-decoration: none; font-weight: 500;
}
.article-back:hover { color: #2563eb; }
.article-back::before { content: '\2190'; font-size: 1.1rem; }

/* 文章页 FAQ（CMS 注入） */
.faq-section { margin-top: 48px; padding-top: 32px; border-top: 2px solid #eee; }
.faq-section .faq details {
  border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 10px;
  background: #fafbfc; overflow: hidden; transition: all .2s;
}
.faq-section .faq details[open] { border-color: #2563eb; box-shadow: 0 2px 8px rgba(37, 99, 235, .08); }
.faq-section .faq summary {
  padding: 16px 20px; font-weight: 600; font-size: .95rem; cursor: pointer;
  list-style: none; color: #222; display: flex; align-items: center; gap: 10px;
}
.faq-section .faq summary::-webkit-details-marker { display: none; }
.faq-section .faq summary::before {
  content: '+'; color: #2563eb; font-weight: 700; font-size: 1.2rem;
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(37, 99, 235, .1); border-radius: 6px; flex-shrink: 0;
}
.faq-section .faq details[open] summary::before { content: '\2212'; background: #2563eb; color: #fff; }
.faq-section .faq details p { padding: 0 20px 18px 50px; margin: 0; color: #555; font-size: .92rem; line-height: 1.75; }

/* 相关文章（CMS 注入） */
.related-articles { margin-top: 48px; padding-top: 32px; border-top: 2px solid #e5e7eb; }
.related-articles h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; letter-spacing: -.3px; color: #111; }
.related-articles ul { list-style: none; display: grid; gap: 10px; }
.related-articles a {
  display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 16px 20px; color: #374151; text-decoration: none; font-size: .95rem; font-weight: 500;
  transition: all .2s; line-height: 1.5;
}
.related-articles a:hover { border-color: #2563eb; color: #2563eb; }

/* ============================================================
   合规页
   ============================================================ */
.page-content { padding: 56px 0 40px; }
.page-content .inner { max-width: 800px; }
.page-article {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 44px 48px; box-shadow: var(--shadow-sm);
}
.page-article h1 { font-family: var(--display); font-size: 1.9rem; font-weight: 800; letter-spacing: -.5px; margin-bottom: 22px; color: var(--ink); }
.page-article h2 { font-size: 1.25rem; font-weight: 700; margin: 30px 0 12px; color: var(--ink); }
.page-article p { font-size: .95rem; color: var(--muted); margin-bottom: 14px; }
.page-article ul { margin: 0 0 16px 22px; color: var(--muted); font-size: .93rem; }
.page-article li { margin-bottom: 8px; }
.page-article a { color: var(--left-dark); }

/* ============================================================
   Footer / Cookie
   ============================================================ */
.site-footer { margin-top: 30px; border-top: 1px solid var(--line); background: var(--bg-raised); }
.site-footer .inner { padding: 36px 24px; text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; margin-bottom: 18px; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: .86rem; font-weight: 500; transition: color .15s; }
.footer-links a:hover { color: var(--ink); }
.footer-brand { font-family: var(--display); font-weight: 700; color: var(--ink); }
.copyright { font-size: .78rem; color: var(--faint); }

.cookie-banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 200;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 16px 20px; box-shadow: var(--shadow-md);
  display: none; max-width: 640px; margin: 0 auto;
}
.cookie-banner.show { display: block; animation: rise .35s ease; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.cookie-content { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cookie-content p { flex: 1; min-width: 240px; font-size: .82rem; color: var(--muted); margin: 0; }
.cookie-content a { color: var(--left-dark); }
.cookie-buttons { display: flex; gap: 8px; }
.cookie-buttons button {
  font-family: var(--sans); font-size: .8rem; font-weight: 600; padding: 8px 18px;
  border-radius: 8px; cursor: pointer; border: 1px solid var(--line-strong);
  background: transparent; color: var(--muted); transition: all .15s;
}
.cookie-buttons #cookie-accept {
  background: linear-gradient(92deg, var(--left), var(--right));
  border: none; color: #fff;
}
.cookie-buttons button:hover { filter: brightness(1.15); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 900px) {
  .diff-body { grid-template-columns: 1fr; }
  .diff-pane + .diff-pane { border-left: none; border-top: 1px solid var(--line); }
  .code-input { min-height: 240px; }
  .vs-badge { display: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .smart-toggle { margin-left: 0; }
}
@media (max-width: 768px) {
  .hero h1 { font-size: 1.75rem; }
  .hero { padding: 36px 0 6px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: .84rem; }
  .article-content article { padding: 32px 24px; border-radius: 12px; }
  .article-content h1 { font-size: 1.6rem; }
  .article-content h2 { font-size: 1.25rem; margin: 34px 0 14px; }
  .article-content h3 { font-size: 1.08rem; margin: 26px 0 12px; }
  .article-content p, .article-content li { font-size: 1rem; }
  .article-content article > p:first-of-type { font-size: 1.06rem; }
  .faq-section .faq details p { padding-left: 20px; }
  .page-article { padding: 30px 24px; }
  .page-article h1 { font-size: 1.5rem; }
  .change-row { grid-template-columns: 72px 1fr; gap: 10px; padding: 10px 14px; }
  .diff-line { grid-template-columns: 36px 36px 20px 1fr; }
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; }
}