/* ==========================================================================
   明史资料平台 · 样式表
   与 daixuan.cloud 主站共享设计语言：同一套 data-theme 变量、毛玻璃质感与渐变强调色。
   站点主题键与主站一致（dx_theme / data-theme），因此两处切换互相同步。
   ========================================================================== */

:root {
  --bg-primary: #0a0e17;
  --bg-secondary: #111827;
  --bg-tertiary: #1f2937;
  --bg-card: rgba(17, 24, 39, 0.75);
  --bg-card-hover: rgba(31, 41, 55, 0.85);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(129, 140, 248, 0.42);

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #8494ab;

  --accent-primary: #818cf8;
  --accent-secondary: #8b5cf6;
  --accent-3: #22d3ee;
  --accent-gradient: linear-gradient(135deg, #818cf8 0%, #7c83f5 28%, #a855f7 62%, #ec4899 100%);
  /* 亮渐变上用深色字：白字在 #a855f7 停靠点只有 3.96:1，深字 4.78:1 */
  --on-accent: #0b1020;
  --accent-glow: rgba(99, 102, 241, 0.25);
  --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --card-shadow-hover: 0 24px 48px -16px rgba(0, 0, 0, 0.55), 0 0 24px -6px var(--accent-glow);
  --hairline: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.55), rgba(236, 72, 153, 0.4), transparent);
  --nav-bg: rgba(10, 14, 23, 0.82);
  --glass-blur: blur(16px) saturate(150%);

  /* 主题线索用的语义色 */
  --c-indigo: #818cf8;
  --c-teal: #2dd4bf;
  --c-amber: #fbbf24;
  --c-violet: #a78bfa;
  --c-rose: #fb7185;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "HarmonyOS Sans SC", "MiSans", Roboto, "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-serif: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", SimSun, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --container-max: 1180px;
}

[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-tertiary: #e2e8f0;
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-card-hover: rgba(255, 255, 255, 0.99);
  --border-color: rgba(0, 0, 0, 0.09);
  --border-hover: rgba(79, 70, 229, 0.45);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #5d6d84;

  --accent-primary: #4f46e5;
  --accent-secondary: #7c3aed;
  --accent-3: #0891b2;
  --accent-gradient: linear-gradient(135deg, #585bea 0%, #7c3aed 50%, #db2777 100%);
  /* 深渐变上用白字：首停靠点由 #6366f1 压深到 #585bea，4.47 → 5.12 */
  --on-accent: #ffffff;
  --accent-glow: rgba(79, 70, 229, 0.18);
  --card-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.10);
  --card-shadow-hover: 0 24px 48px -16px rgba(15, 23, 42, 0.16), 0 0 24px -8px var(--accent-glow);
  --hairline: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.45), rgba(219, 39, 119, 0.32), transparent);
  --nav-bg: rgba(248, 250, 252, 0.88);

  --c-indigo: #4f46e5;
  --c-teal: #0d9488;
  --c-amber: #b45309;
  --c-violet: #7c3aed;
  --c-rose: #be123c;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(99, 102, 241, 0.16), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(236, 72, 153, 0.10), transparent 60%),
    radial-gradient(800px 620px at 50% 108%, rgba(34, 211, 238, 0.09), transparent 62%);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(99, 102, 241, 0.11), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(219, 39, 119, 0.07), transparent 60%),
    radial-gradient(800px 620px at 50% 108%, rgba(8, 145, 178, 0.07), transparent 62%);
}

a { color: var(--accent-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { position: relative; z-index: 1; max-width: var(--container-max); margin: 0 auto; padding: 0 22px; }

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border-color);
}
.topbar-inner {
  max-width: var(--container-max); margin: 0 auto; padding: 10px 22px;
  display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand .seal {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--accent-gradient);
  color: var(--on-accent); font-family: var(--font-serif); font-size: 19px; font-weight: 700;
  box-shadow: 0 4px 14px -4px var(--accent-glow);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text b { font-size: 0.98rem; letter-spacing: 0.02em; }
.brand-text span { font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.16em; text-transform: uppercase; }

.tabs { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 0; background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 0.86rem; padding: 8px 12px; border-radius: var(--radius-full);
  cursor: pointer; white-space: nowrap; transition: var(--transition);
}
.tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.tab.active { color: var(--on-accent); background: var(--accent-gradient); box-shadow: 0 6px 18px -8px var(--accent-glow); }
[data-theme="light"] .tab.active { color: var(--on-accent); }

.icon-btn {
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary);
  width: 36px; height: 36px; border-radius: var(--radius-full); cursor: pointer;
  display: grid; place-items: center; font-size: 15px; flex-shrink: 0; transition: var(--transition);
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }

/* ---------------- 通用 ---------------- */
.view { display: none; padding: 40px 0 90px; }
.view.active { display: block; animation: fade .45s cubic-bezier(.16,1,.3,1); }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.sec-head { margin: 0 0 26px; }
.sec-head h2 {
  font-family: var(--font-serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin: 0 0 8px; letter-spacing: 0.02em; font-weight: 700;
}
.sec-head p { margin: 0; color: var(--text-secondary); font-size: 0.94rem; max-width: 68ch; }
.sec-head .rule { height: 1px; background: var(--hairline); margin-top: 18px; border: 0; }

.card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 22px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--card-shadow); transition: var(--transition);
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: var(--radius-full);
  font-size: 0.74rem; letter-spacing: 0.04em;
  border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-secondary);
}
.chip.accent { color: var(--accent-primary); border-color: var(--border-hover); }
.chip.key { color: var(--c-rose); border-color: rgba(251, 113, 133, .35); }

.empty { color: var(--text-muted); font-size: .9rem; padding: 26px 0; text-align: center; }

/* ---------------- 总览 ---------------- */
.hero { padding: 26px 0 8px; }
.hero .eyebrow {
  font-size: 0.74rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent-primary); margin-bottom: 14px;
}
.hero h1 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(2.1rem, 6.4vw, 3.5rem); line-height: 1.18; margin: 0 0 16px;
  letter-spacing: 0.01em;
}
.hero h1 em {
  font-style: normal;
  background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .lede { font-size: 1.02rem; color: var(--text-secondary); max-width: 66ch; margin: 0 0 22px; }
.hero .lede b { color: var(--text-primary); font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 26px 0 34px; }
.stat { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px 18px; }
.stat .n { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 700; line-height: 1.1; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat .k { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; letter-spacing: 0.05em; }

.book-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 16px; }
.book-card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; text-align: left; }
.book-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); border-color: var(--border-hover); }
.book-card .vol { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--text-muted); text-transform: uppercase; }
.book-card h3 { font-family: var(--font-serif); font-size: 1.12rem; margin: 0; line-height: 1.4; }
.book-card .meta { font-size: 0.8rem; color: var(--text-muted); }
.book-card p { margin: 0; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; }
.book-card .angle { font-size: 0.8rem; color: var(--accent-primary); }

.notice {
  border-left: 3px solid var(--accent-primary);
  background: var(--bg-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 18px; font-size: 0.86rem; color: var(--text-secondary); line-height: 1.75;
}
.notice b { color: var(--text-primary); }

/* ---------------- 世系 ---------------- */
.house-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.pill {
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary);
  padding: 7px 16px; border-radius: var(--radius-full); cursor: pointer; font: inherit; font-size: 0.84rem;
  transition: var(--transition);
}
.pill:hover { border-color: var(--border-hover); color: var(--text-primary); }
.pill.active { background: var(--accent-gradient); color: var(--on-accent); border-color: transparent; }

/* 在位时间轴（V9 重做）：由「无标签圆点条」改为「有标签的在位甘特图」。
   每帝一行 = 左标签列 + 中轨道（按 1368—1683 定位的条）+ 右年数列。
   三条列宽用 CSS 变量统一，刻度行与数据行共用同一套网格，轴与条才对得齐。 */
.reign {
  display: block;
  margin: 4px 0 26px; --rg-lab: 132px; --rg-val: 74px;
}
.reign-plot { position: relative; display: flex; flex-direction: column; gap: 1px; }
/* 竖网格线层：只铺轨道列，压在数据行之下 */
.reign-grid {
  position: absolute; z-index: 0; pointer-events: none;
  left: calc(var(--rg-lab) + 10px); right: calc(var(--rg-val) + 10px);
  top: 0; bottom: 0;
}
.reign-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid-line); }
.reign-row {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--rg-lab) 1fr var(--rg-val);
  align-items: center; gap: 10px;
  border: 0; background: none; font: inherit; color: inherit;
  padding: 2px 0; text-align: left; cursor: pointer; border-radius: 6px;
}
.reign-row:hover { background: var(--bg-tertiary); }
.reign-lab {
  display: flex; align-items: baseline; gap: 6px; justify-content: flex-end;
  min-width: 0; font-size: .82rem; line-height: 1.3; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden;
}
.reign-lab b { flex-shrink: 0; font-family: var(--font-serif); font-size: .92rem; color: var(--text-primary); font-weight: 700; }
/* 「明郑」那一行的名讳是「郑成功 · 郑经 · 郑克塽」，必须能省略，否则会把庙号挤出可视区 */
.reign-lab .rg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* ⚠️ 轨道必须是半透明的：底下那层竖网格线要透上来。
     原先用实心 --bg-tertiary，网格线被整条盖住，等于白画。 */
.reign-track {
  position: relative; height: 13px; border-radius: var(--radius-full);
  background: var(--rg-rail); overflow: hidden;
}
.reign-track i {
  position: absolute; top: 0; bottom: 0; min-width: 3px;
  border-radius: var(--radius-full); display: block;
  transition: width .5s cubic-bezier(.16,1,.3,1), filter .2s;
}
.reign-row:hover .reign-track i, .reign-row.on .reign-track i { filter: brightness(1.2) saturate(1.12); }
.reign-row.on .reign-track i { box-shadow: 0 0 0 2px var(--accent-glow); }
/* 右列两行：年号 + 在位年数。
   年号原先写在条内，实测只有 28px 宽、字号 10px —— 截图里根本认不出，
   挪到列里反而每个都读得到，也不受条宽影响。 */
.reign-val {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25;
  font-size: .74rem; color: var(--text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; text-align: right;
}
.reign-val em { font-style: normal; font-size: .7rem; color: var(--text-secondary); }
.reign-row.on .reign-val, .reign-row.on .reign-val em { color: var(--text-primary); }
/* 刻度行：与数据行同一网格，只是轨道里放的是年份文字而非条 */
.reign-axis { cursor: default; }
.reign-axis:hover { background: none; }
.reign-axis .reign-track { background: none; overflow: visible; height: 16px; }
/* 刻度文字由下方的 .reign-grid 竖线接续到图底，不再另画短刻度 */
.reign-tick {
  position: absolute; top: 0; font-size: .68rem; color: var(--text-muted);
  transform: translateX(-50%); font-variant-numeric: tabular-nums;
}
.reign-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 0; padding-left: calc(var(--rg-lab) + 10px); }
.reign-legend span { font-size: .72rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.reign-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.reign-empty { color: var(--text-muted); font-size: .88rem; padding: 18px 0; }

.emp-list { display: grid; gap: 10px; }
.emp {
  border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--radius-md);
  overflow: hidden; transition: var(--transition);
}
.emp:hover { border-color: var(--border-hover); }
.emp.open { border-color: var(--border-hover); box-shadow: var(--card-shadow-hover); }
.emp-row {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 18px; cursor: pointer; width: 100%; text-align: left;
  background: transparent; border: 0; color: inherit; font: inherit;
}
.emp-no {
  font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700; text-align: center;
  color: var(--accent-primary); line-height: 1;
}
.emp-main b { font-family: var(--font-serif); font-size: 1.06rem; font-weight: 700; }
.emp-main b .temple { color: var(--text-muted); font-size: .84rem; font-weight: 400; margin-right: 8px; }
.emp-main .sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.emp-span { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.emp-body { padding: 0 18px 18px 84px; }
.emp-body .one { font-size: 0.92rem; color: var(--text-secondary); margin: 0 0 14px; line-height: 1.75; }
.emp-body h3 { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; font-weight: 600; }
.emp-body ul { margin: 0 0 14px; padding-left: 18px; font-size: 0.86rem; color: var(--text-secondary); }
.emp-body li { margin: 3px 0; }
.emp-refs { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- 年表 ---------------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chrono { position: relative; padding-left: 30px; }
.chrono::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--border-color); }
.ce { position: relative; padding: 0 0 22px; }
.ce::before {
  content: ""; position: absolute; left: -30px; top: 8px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--bg-primary); border: 2px solid var(--text-muted);
}
.ce.key::before { border-color: var(--c-rose); background: var(--c-rose); box-shadow: 0 0 0 4px rgba(251,113,133,.16); }
.ce .y { font-family: var(--font-mono); font-size: 0.86rem; color: var(--accent-primary); font-weight: 600; }
.ce .y .era { color: var(--text-muted); margin-left: 8px; font-size: .74rem; }
.ce h3 { font-family: var(--font-serif); font-size: 1.02rem; margin: 3px 0 4px; }
.ce p { margin: 0; font-size: 0.87rem; color: var(--text-secondary); }

/* ---------------- 对照 ---------------- */
.cmp-list { display: grid; gap: 14px; }
.cmp { border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; }
.cmp-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px; cursor: pointer; width: 100%; background: transparent; border: 0; color: inherit; font: inherit; text-align: left;
}
.cmp-head h3 { font-family: var(--font-serif); font-size: 1.08rem; margin: 0; flex: 1; min-width: 180px; }
.cmp-head .yr { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); }
.cmp-body { padding: 0 20px 20px; display: none; }
.cmp.open .cmp-body { display: block; }
.cmp-views { display: grid; gap: 12px; margin-bottom: 16px; }
.cmp-view { border-left: 2px solid var(--border-hover); padding-left: 14px; }
.cmp-view .src { font-size: 0.76rem; color: var(--accent-primary); letter-spacing: 0.06em; margin-bottom: 4px; font-weight: 600; }
.cmp-view p { margin: 0; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.75; }
.cmp-take { background: var(--bg-secondary); border-radius: var(--radius-md); padding: 13px 16px; font-size: 0.88rem; color: var(--text-primary); line-height: 1.75; }
.cmp-take b { color: var(--accent-primary); }

/* ---------------- 索引 ---------------- */
.idx-layout { display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: start; }
.idx-side { position: sticky; top: 78px; display: grid; gap: 6px; }
.idx-book {
  border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--radius-md);
  padding: 12px 14px; cursor: pointer; text-align: left; font: inherit; color: var(--text-secondary);
  transition: var(--transition);
}
.idx-book:hover { border-color: var(--border-hover); color: var(--text-primary); }
.idx-book.active { border-color: var(--border-hover); color: var(--text-primary); background: var(--bg-card-hover); }
.idx-book b { display: block; font-size: 0.9rem; font-family: var(--font-serif); }
.idx-book span { font-size: 0.74rem; color: var(--text-muted); }

.idx-panel h3 { font-family: var(--font-serif); font-size: 1.3rem; margin: 0 0 4px; }
.idx-panel .blurb { color: var(--text-secondary); font-size: 0.88rem; margin: 0 0 6px; }
.idx-panel .meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 18px; }
.idx-ch { border-top: 1px solid var(--border-color); padding: 12px 0; }
.idx-ch:first-of-type { border-top: 0; }
.idx-ch-head { display: flex; align-items: baseline; gap: 10px; cursor: pointer; width: 100%; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; padding: 0; }
.idx-ch-head .t { font-family: var(--font-serif); font-size: 0.98rem; font-weight: 600; flex: 1; }
.idx-ch-head .pg { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); }
.idx-ch-head .caret { color: var(--text-muted); font-size: 0.7rem; transition: var(--transition); }
.idx-ch.open .idx-ch-head .caret { transform: rotate(90deg); }
.idx-subs { display: none; margin: 8px 0 2px; padding-left: 14px; border-left: 1px solid var(--border-color); }
.idx-ch.open .idx-subs { display: block; }
.idx-sub { display: flex; gap: 10px; font-size: 0.84rem; color: var(--text-secondary); padding: 2px 0; }
.idx-sub .pg { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); min-width: 34px; }

/* ---------------- 词条 ---------------- */
.gloss-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.search {
  flex: 1; min-width: 210px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--radius-full);
  padding: 8px 16px;
}
.search input { flex: 1; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 0.9rem; outline: none; }
.search input::placeholder { color: var(--text-muted); }
.search .ico { color: var(--text-muted); font-size: 0.9rem; }

.gloss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.gi { border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--radius-md); padding: 15px 17px; transition: var(--transition); }
.gi:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.gi .top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.gi .top b { font-family: var(--font-serif); font-size: 1rem; }
.gi .top .e { font-size: 0.74rem; color: var(--text-muted); font-family: var(--font-mono); }
.gi p { margin: 0 0 9px; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7; }
.gi .refs { display: flex; gap: 6px; flex-wrap: wrap; }
.gi .refs span { font-size: 0.7rem; color: var(--text-muted); border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: 1px 9px; }
mark { background: rgba(129, 140, 248, .28); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ---------------- 主题线索 ---------------- */
.theme-grid { display: grid; gap: 14px; }
.thm { border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--radius-lg); padding: 20px; border-top: 3px solid var(--tc, var(--accent-primary)); }
.thm h3 { font-family: var(--font-serif); font-size: 1.12rem; margin: 0 0 6px; }
.thm .q { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 14px; font-style: italic; }
.thm ol { margin: 0 0 14px; padding-left: 20px; }
.thm li { font-size: 0.86rem; color: var(--text-secondary); margin: 5px 0; }
.thm li b { color: var(--text-primary); font-weight: 600; }
.thm .note { font-size: 0.84rem; color: var(--text-muted); border-top: 1px dashed var(--border-color); padding-top: 11px; line-height: 1.75; }

/* ---------------- 阅读器 ---------------- */
.drop {
  border: 2px dashed var(--border-color); border-radius: var(--radius-lg);
  padding: 46px 24px; text-align: center; cursor: pointer; transition: var(--transition);
  background: var(--bg-card);
}
.drop:hover, .drop.over { border-color: var(--accent-primary); background: var(--bg-card-hover); }
.drop .big { font-size: 2rem; margin-bottom: 10px; }
.drop b { display: block; font-family: var(--font-serif); font-size: 1.1rem; margin-bottom: 6px; }
.drop span { font-size: 0.85rem; color: var(--text-muted); }
.reader-stage { margin-top: 18px; display: none; }
.reader-stage.on { display: block; }
.reader-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.reader-bar .name { font-size: 0.86rem; color: var(--text-secondary); flex: 1; min-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-frame { width: 100%; height: 68vh; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); }
.reader-text {
  height: 68vh; overflow: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-secondary); padding: 26px 30px; font-family: var(--font-serif);
  font-size: 1.02rem; line-height: 2.05; white-space: pre-wrap; word-break: break-word;
}

/* ---------------- 页脚 ---------------- */
.foot { border-top: 1px solid var(--border-color); padding: 28px 0 46px; margin-top: 20px; }
.foot .inner { max-width: var(--container-max); margin: 0 auto; padding: 0 22px; font-size: 0.8rem; color: var(--text-muted); line-height: 1.85; }
.foot a { color: var(--text-secondary); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 860px) {
  .idx-layout { grid-template-columns: 1fr; }
  .idx-side { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; }
  .emp-body { padding-left: 18px; }
  .tabs { gap: 0; }
  .tab { padding: 8px 10px; font-size: 0.8rem; }
  .brand-text { display: none; }
}
@media (max-width: 560px) {
  .emp-row { grid-template-columns: 40px 1fr; }
  .emp-span { grid-column: 2; }
  .reign { --rg-lab: 88px; --rg-val: 44px; }
  .reign-lab b { font-size: .84rem; }
  .reign-lab .rg-name { display: none; }
  .reign-val em { display: none; }   /* 46px 放不下「正统 / 天顺」，窄屏只留年数 */
  .hero { padding-top: 8px; }
  .reader-text { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   V2 精修层 · 新增栏目（年号纪年 / 舆图政区 / 数据一览 / 争议考辨 / 皇族世系图）
   以追加方式引入，不改动上方既有层，便于回滚。
   ========================================================================== */

.sub-h {
  font-family: var(--font-serif); font-size: 1.14rem; margin: 34px 0 6px;
  letter-spacing: 0.02em; font-weight: 700;
}
.sub-h:first-of-type { margin-top: 6px; }
.sub-p { margin: 0 0 16px; color: var(--text-secondary); font-size: 0.88rem; max-width: 70ch; }

/* ---------------- 通用：说明条目 ---------------- */
.rel-notes { display: grid; gap: 12px; }
.rel {
  border: 1px solid var(--border-color); background: var(--bg-card);
  border-radius: var(--radius-md); padding: 16px 18px;
  border-left: 3px solid var(--accent-primary);
}
.rel h3 { font-family: var(--font-serif); font-size: 0.98rem; margin: 0 0 6px; }
.rel p { margin: 0; font-size: 0.86rem; color: var(--text-secondary); line-height: 1.8; }

/* ---------------- 帝王世系：新增字段 ---------------- */
.emp-body ul.compact { margin-bottom: 14px; }
.emp-body ul.compact li { font-size: 0.83rem; line-height: 1.7; }
.emp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.emp-reading {
  background: var(--bg-secondary); border-radius: var(--radius-md);
  padding: 12px 15px; font-size: 0.86rem; color: var(--text-primary); line-height: 1.8;
  margin: 0 0 14px;
}
.emp-reading b { color: var(--accent-primary); }

/* ---------------- 皇族世系图 ---------------- */
.tree-sec { margin-bottom: 34px; }
.tree-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.tree-head h3 { font-family: var(--font-serif); font-size: 1.2rem; margin: 0; }
.tree-note { margin: 0 0 18px; font-size: 0.84rem; color: var(--text-muted); max-width: 72ch; }

.tree { padding-left: 4px; }
.tnode { position: relative; }
.tn-kids { margin-left: 17px; padding-left: 17px; border-left: 1px solid var(--border-color); }
.tn-kids > .tnode { margin-top: 8px; }
.tn-kids > .tnode::before {
  content: ""; position: absolute; left: -17px; top: 21px; width: 14px; height: 1px;
  background: var(--border-color);
}
.tn-box {
  border: 1px solid var(--border-color); background: var(--bg-card);
  border-radius: var(--radius-md); padding: 11px 14px; transition: var(--transition);
}
.tnode.reign > .tn-box { border-color: var(--border-hover); box-shadow: 0 4px 16px -10px var(--accent-glow); }
.tnode.nonreign > .tn-box { background: var(--bg-secondary); border-style: dashed; }
.tn-box:hover { border-color: var(--border-hover); }
.tn-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.tn-title {
  font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.08em;
  border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: 1px 8px;
}
.tn-name { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; }
.tnode.reign > .tn-box .tn-name { color: var(--text-primary); }
.tn-era { font-size: 0.76rem; color: var(--accent-primary); }
.tn-span { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); margin-left: auto; }
.tn-note { margin: 5px 0 0; font-size: 0.81rem; color: var(--text-secondary); line-height: 1.7; }

/* ---------------- 年号纪年：换算器 ---------------- */
.converter { padding: 22px 24px; }
.converter h3 { font-family: var(--font-serif); font-size: 1.08rem; margin: 0 0 4px; }
.converter .hint { margin: 0 0 16px; font-size: 0.83rem; color: var(--text-muted); }
.gz-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.gz-input { flex: 0 1 190px; }
.gz-input input { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.06em; }
.gz-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.pill.tiny { padding: 4px 11px; font-size: 0.76rem; font-family: var(--font-mono); }
.gz-out { margin-top: 18px; }
.gz-hint { font-size: 0.86rem; color: var(--text-muted); }
.gz-main { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.gz-big { display: flex; align-items: baseline; gap: 12px; }
.gz-y { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; color: var(--text-primary); }
.gz-gz {
  font-family: var(--font-serif); font-size: 1.7rem; font-weight: 700;
  background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gz-era { display: flex; gap: 10px; flex-wrap: wrap; }
.gz-hit {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border-color); background: var(--bg-secondary);
  border-radius: var(--radius-md); padding: 8px 14px;
}
.gz-hit b { font-family: var(--font-serif); font-size: 0.95rem; }
.gz-hit span { font-size: 0.74rem; color: var(--text-muted); }
.gz-hit.muted b { color: var(--text-muted); font-weight: 400; }
.gz-formula {
  margin: 14px 0 0; font-size: 0.78rem; color: var(--text-muted);
  font-family: var(--font-mono); line-height: 1.9; word-break: break-word;
}

/* ---------------- 年号表 ---------------- */
.era-table { display: grid; gap: 0; }
.era-row {
  display: grid; grid-template-columns: 132px minmax(150px, 1fr) 118px; gap: 14px;
  align-items: start; padding: 14px 0; border-top: 1px solid var(--border-color);
}
.era-row:first-child { border-top: 0; }
.era-name { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.era-name b { font-family: var(--font-serif); font-size: 1.16rem; letter-spacing: 0.04em; }
.era-house { font-size: 0.7rem; color: var(--text-muted); border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: 0 8px; }
.era-emp { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.6; }
.era-span { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-primary); text-align: right; }
.era-span .era-n { color: var(--text-muted); font-size: 0.74rem; }
.era-note { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.8; }
.era-row.rival .era-name b { font-size: 1.04rem; }

/* ---------------- 舆图政区 ---------------- */
.prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 12px; }
.prov { border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--radius-md); padding: 15px 17px; transition: var(--transition); }
.prov:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.prov-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.prov-head b { font-family: var(--font-serif); font-size: 1.04rem; }
.prov-head .chip { font-size: 0.7rem; }
.prov-area { margin: 0 0 4px; font-size: 0.83rem; color: var(--accent-primary); }
.prov-since { margin: 0 0 8px; font-size: 0.74rem; color: var(--text-muted); }
.prov-note { margin: 0; font-size: 0.84rem; color: var(--text-secondary); line-height: 1.75; }

.garr-list { display: grid; gap: 10px; }
.garr {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  border: 1px solid var(--border-color); background: var(--bg-card);
  border-radius: var(--radius-md); padding: 14px 18px; transition: var(--transition);
}
.garr:hover { border-color: var(--border-hover); }
.garr-no {
  font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; text-align: center;
  color: var(--accent-primary); line-height: 1.2;
}
.garr-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.garr-head b { font-family: var(--font-serif); font-size: 1rem; }
.garr-seat { font-size: 0.78rem; color: var(--text-muted); }
.garr-span { font-size: 0.76rem; color: var(--accent-primary); margin: 3px 0 6px; font-family: var(--font-mono); }
.garr p { margin: 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.75; }

.place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.place { border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--radius-md); padding: 14px 16px; transition: var(--transition); }
.place:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.place-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.place-head b { font-family: var(--font-serif); font-size: 0.98rem; }
.place-head .chip { font-size: 0.68rem; margin-left: auto; }
.place p { margin: 0; font-size: 0.83rem; color: var(--text-secondary); line-height: 1.75; }

.terr { display: grid; gap: 0; }
.terr-row { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border-color); }
.terr-row:first-child { border-top: 0; }
.terr-stage { font-family: var(--font-serif); font-size: 0.92rem; color: var(--accent-primary); }
.terr-row p { margin: 0; font-size: 0.86rem; color: var(--text-secondary); line-height: 1.8; }

/* ---------------- 数据一览 ---------------- */
.legend { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.legend-item { display: flex; align-items: center; gap: 9px; font-size: 0.8rem; color: var(--text-muted); }
.conf {
  font-size: 0.7rem; letter-spacing: 0.06em; border-radius: var(--radius-full);
  padding: 2px 10px; border: 1px solid var(--border-color); white-space: nowrap;
}
.conf.ok { color: var(--c-teal); border-color: rgba(45, 212, 191, 0.35); background: rgba(45, 212, 191, 0.08); }
.conf.mid { color: var(--c-amber); border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08); }
.conf.low { color: var(--c-rose); border-color: rgba(251, 113, 133, 0.35); background: rgba(251, 113, 133, 0.08); }
[data-theme="light"] .conf.ok { background: rgba(13, 148, 136, 0.07); }
[data-theme="light"] .conf.mid { background: rgba(180, 83, 9, 0.07); }
[data-theme="light"] .conf.low { background: rgba(190, 18, 60, 0.07); }

.num-groups { display: grid; gap: 30px; }
.num-group-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; flex-wrap: wrap; }
.num-group-head h3 { font-family: var(--font-serif); font-size: 1.16rem; margin: 0; }
.num-group-head .chip { margin-left: auto; }
.num-ico {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--accent-gradient); color: var(--on-accent); font-family: var(--font-serif);
  font-size: 0.94rem; font-weight: 700;
}
.num-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 12px; }
.num-item { border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--radius-md); padding: 15px 17px; transition: var(--transition); }
.num-item:hover { border-color: var(--border-hover); }
.num-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.num-label { font-size: 0.83rem; color: var(--text-secondary); line-height: 1.5; flex: 1; }
.num-value {
  font-family: var(--font-serif); font-size: 1.34rem; font-weight: 700; line-height: 1.3;
  background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.num-unit { font-family: var(--font-sans); font-size: 0.76rem; font-weight: 400; margin-left: 6px; -webkit-text-fill-color: var(--text-muted); color: var(--text-muted); }
.num-note { margin: 8px 0 0; font-size: 0.81rem; color: var(--text-muted); line-height: 1.75; }

/* ---------------- 争议考辨 ---------------- */
.deb-list { display: grid; gap: 12px; }
.deb { border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; }
.deb.open { border-color: var(--border-hover); box-shadow: var(--card-shadow-hover); }
.deb-head {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px;
  cursor: pointer; width: 100%; background: transparent; border: 0; color: inherit; font: inherit; text-align: left;
}
.deb-tag {
  flex-shrink: 0; font-size: 0.72rem; letter-spacing: 0.06em; padding: 3px 11px;
  border-radius: var(--radius-full); border: 1px solid var(--border-hover);
  color: var(--accent-primary); background: var(--bg-tertiary); margin-top: 2px;
}
.deb-t { flex: 1; min-width: 0; }
.deb-t h3 { font-family: var(--font-serif); font-size: 1.06rem; margin: 0 0 4px; }
.deb-q { margin: 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7; }
.deb-head .caret { color: var(--text-muted); font-size: 0.8rem; transition: var(--transition); margin-top: 4px; }
.deb.open .deb-head .caret { transform: rotate(180deg); }
.deb-body { padding: 0 20px 20px; display: none; }
.deb.open .deb-body { display: block; }
.deb-sides { display: grid; gap: 10px; margin-bottom: 14px; }
.deb-side { border-left: 2px solid var(--border-hover); padding-left: 14px; }
.deb-side-name { font-size: 0.78rem; color: var(--accent-primary); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 3px; }
.deb-side p { margin: 0; font-size: 0.86rem; color: var(--text-secondary); line-height: 1.78; }
.deb-status { background: var(--bg-secondary); border-radius: var(--radius-md); padding: 13px 16px; font-size: 0.87rem; line-height: 1.8; margin-bottom: 12px; }
.deb-status b { color: var(--accent-primary); }
.deb-refs { display: flex; gap: 7px; flex-wrap: wrap; }

/* ---------------- 年表：分类与出处 ---------------- */
.ce .y { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-tag {
  font-size: 0.68rem; letter-spacing: 0.05em; border-radius: var(--radius-full);
  padding: 0 9px; border: 1px solid var(--border-color); color: var(--text-muted);
}
.cat-tag[data-cat="政治"] { color: var(--c-indigo); border-color: rgba(129, 140, 248, 0.35); }
.cat-tag[data-cat="军事"] { color: var(--c-rose); border-color: rgba(251, 113, 133, 0.35); }
.cat-tag[data-cat="经济"] { color: var(--c-amber); border-color: rgba(251, 191, 36, 0.35); }
.cat-tag[data-cat="文化"] { color: var(--c-violet); border-color: rgba(167, 139, 250, 0.35); }
.cat-tag[data-cat="对外"] { color: var(--c-teal); border-color: rgba(45, 212, 191, 0.35); }
.ce-refs { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.ce-refs span { font-size: 0.7rem; color: var(--text-muted); border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: 1px 9px; }
.pill.cat { font-size: 0.79rem; padding: 5px 13px; }

/* ---------------- 响应式（V2） ---------------- */
@media (max-width: 860px) {
  .era-row { grid-template-columns: 106px 1fr; }
  .era-span { grid-column: 2; text-align: left; }
  .terr-row { grid-template-columns: 1fr; gap: 4px; }
  .tn-span { margin-left: 0; }
  .gz-main { gap: 14px; }
}
@media (max-width: 560px) {
  .era-row { grid-template-columns: 1fr; gap: 6px; }
  .era-span { grid-column: 1; }
  .tn-kids { margin-left: 9px; padding-left: 12px; }
  .tn-kids > .tnode::before { left: -12px; width: 9px; }
  .garr { grid-template-columns: 30px 1fr; gap: 10px; padding: 13px 14px; }
  .converter { padding: 18px; }
  .deb-head { padding: 14px 16px; gap: 10px; }
  .deb-body { padding: 0 16px 16px; }
}

/* 总览统计：8 张卡在 1180px 容器内单行排布 */
.stats { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
@media (max-width: 620px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* 标签栏横向滚动渐隐提示（窄屏） */
.tabs.more-right { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%); }
.tabs.more-left { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 100%); }
.tabs.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); }

/* ==========================================================================
   V3 精修层 · 增补书目（万历十五年 / 明史讲义）与延伸书目
   同样以追加方式引入。
   ========================================================================== */

/* 章节索引：章节提示与无页码模式 */
.idx-note {
  margin: 6px 0 0 22px; font-size: 0.82rem; color: var(--text-muted);
  line-height: 1.7; padding-left: 10px; border-left: 2px solid var(--border-color);
}
.idx-sub-n { display: block; font-style: normal; font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.idx-book span { white-space: nowrap; }

/* 延伸书目 */
.conf.tool { color: var(--c-violet); border-color: rgba(167, 139, 250, 0.38); background: rgba(167, 139, 250, 0.08); }
.conf.src { color: var(--c-indigo); border-color: rgba(129, 140, 248, 0.38); background: rgba(129, 140, 248, 0.08); }
[data-theme="light"] .conf.tool { background: rgba(124, 58, 237, 0.07); }
[data-theme="light"] .conf.src { background: rgba(79, 70, 229, 0.07); }

.bib-groups { display: grid; gap: 30px; }
.bib-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.bib {
  border: 1px solid var(--border-color); background: var(--bg-card);
  border-radius: var(--radius-md); padding: 16px 18px; transition: var(--transition);
  display: flex; flex-direction: column;
}
.bib:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.bib-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.bib-t { font-family: var(--font-serif); font-size: 1.02rem; }
.bib-idx { font-size: 0.68rem; margin-left: auto; }
.bib-meta {
  font-size: 0.74rem; color: var(--text-muted); margin-bottom: 9px;
  line-height: 1.6; word-break: break-word;
}
.bib-d { margin: 0 0 9px; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.75; }
.bib-use {
  margin: auto 0 0; padding-top: 9px; border-top: 1px dashed var(--border-color);
  font-size: 0.82rem; color: var(--text-muted); line-height: 1.75;
}
.bib-use b { color: var(--accent-primary); }

/* 总览统计：9 张卡在 1180px 容器内单行排布 */
.stats { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
@media (max-width: 620px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   V4 精修层 · 按需渲染配套 / 全站检索 / 路由高亮 / 阅读辅助 / 打印
   同样以追加方式引入，不改动上方既有层，便于回滚。
   ========================================================================== */

/* 1) [hidden] 必须压过任何 display 声明（.bib 等用了 flex） */
[hidden] { display: none !important; }

/* 2) 帝王条目改为真正折叠：正文默认不占位，展开才显示 */
.emp-body { display: none; }
.emp.open .emp-body { display: block; }
.emp-row { position: relative; }
.emp-row::after {
  content: "▾"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 0.72rem; color: var(--text-muted); transition: var(--transition); pointer-events: none;
}
.emp.open .emp-row::after { transform: translateY(-50%) rotate(180deg); }
@media (max-width: 560px) { .emp-row::after { display: none; } }

/* 3) 定位锚点：给 sticky 顶栏留出空间 */
.emp, .ce, .cmp, .gi, .deb, .thm, .prov, .garr, .place, .terr-row,
.era-row, .bib, .rel, .idx-ch, .idx-sub { scroll-margin-top: 84px; }

/* 4) 检索跳转后的闪烁高亮 */
@keyframes flashRing {
  0%   { box-shadow: 0 0 0 0 rgba(129,140,248,0); background: var(--bg-card); }
  18%  { box-shadow: 0 0 0 4px var(--accent-glow); background: var(--bg-card-hover); }
  100% { box-shadow: 0 0 0 0 rgba(129,140,248,0); background: var(--bg-card); }
}
.flash { animation: flashRing 2.2s cubic-bezier(.16,1,.3,1); border-color: var(--border-hover) !important; }

/* 5) 无障碍：屏幕阅读器专用文本 + 跳转链接 */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 300;
  transform: translateY(-160%); transition: transform .2s ease;
  background: var(--accent-gradient); color: var(--on-accent); font-size: 0.86rem; font-weight: 600;
  padding: 10px 18px; border-radius: var(--radius-full); box-shadow: var(--card-shadow);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* 6) 焦点可见性（键盘用户） */
.tab:focus-visible, .pill:focus-visible, .icon-btn:focus-visible, .emp-row:focus-visible,
.cmp-head:focus-visible, .deb-head:focus-visible, .idx-ch-head:focus-visible,
.pal-item:focus-visible, .drop:focus-visible, #toTop:focus-visible, .book-card:focus-visible,
.idx-book:focus-visible, .pal-chip:focus-visible {
  outline: 2px solid var(--accent-primary); outline-offset: 2px;
}
main:focus { outline: none; }

/* 7) 阅读进度条 */
.readbar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  background: var(--accent-gradient); transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform; pointer-events: none;
}

/* 8) 回到顶部 */
.totop {
  position: fixed; right: 22px; bottom: 24px; z-index: 90;
  width: 42px; height: 42px; border-radius: var(--radius-full);
  border: 1px solid var(--border-hover); background: var(--bg-card);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text-primary); font-size: 16px; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--card-shadow); transition: var(--transition);
}
.totop:hover { transform: translateY(-3px); border-color: var(--accent-primary); }

/* 9) 顶栏：检索按钮 + 右侧操作区 */
.topbar-act { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.search-btn { width: auto; padding: 0 12px; gap: 7px; grid-auto-flow: column; font-size: 0.82rem; }
.search-btn .sb-txt { letter-spacing: 0.02em; }
.sb-kbd {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em;
  border: 1px solid var(--border-color); border-radius: 5px; padding: 1px 5px;
  color: var(--text-muted); background: var(--bg-secondary);
}
@media (max-width: 900px) { .search-btn .sb-kbd { display: none; } }
@media (max-width: 700px) { .search-btn { width: 36px; padding: 0; } .search-btn .sb-txt { display: none; } }

/* 10) 全站检索（命令面板） */
body.pal-open { overflow: hidden; }
.palette { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center; align-items: flex-start; }
.palette-mask {
  position: absolute; inset: 0; background: rgba(2, 6, 16, 0.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
[data-theme="light"] .palette-mask { background: rgba(15, 23, 42, 0.34); }
.palette-box {
  position: relative; z-index: 1; width: min(680px, calc(100vw - 32px));
  margin-top: 9vh; border: 1px solid var(--border-hover); border-radius: var(--radius-lg);
  background: var(--bg-secondary); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
  overflow: hidden; display: flex; flex-direction: column;
  animation: palIn .26s cubic-bezier(.16,1,.3,1);
}
@keyframes palIn { from { opacity: 0; transform: translateY(-12px) scale(.985); } to { opacity: 1; transform: none; } }
.palette-in {
  display: flex; align-items: center; gap: 11px; padding: 15px 18px;
  border-bottom: 1px solid var(--border-color);
}
.palette-in .ico { color: var(--accent-primary); font-size: 1.05rem; }
.palette-in input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--text-primary); font: inherit; font-size: 1rem; padding: 2px 0;
}
.palette-in input::placeholder { color: var(--text-muted); }
.pal-kbd, .palette-foot kbd {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em;
  border: 1px solid var(--border-color); border-radius: 5px; padding: 2px 6px;
  color: var(--text-muted); background: var(--bg-tertiary);
}
.palette-body { max-height: min(54vh, 460px); overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
.pal-hint-t { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--text-muted); padding: 10px 12px 8px; text-transform: uppercase; }
.pal-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 14px; }
.pal-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary);
  font: inherit; font-size: 0.83rem; padding: 7px 13px; border-radius: var(--radius-full); transition: var(--transition);
}
.pal-chip span { font-size: 0.68rem; color: var(--accent-primary); letter-spacing: 0.06em; }
.pal-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
.pal-empty { padding: 34px 18px; text-align: center; color: var(--text-muted); font-size: 0.87rem; line-height: 1.8; }

.pal-item {
  display: grid; grid-template-columns: 46px 1fr 20px; gap: 12px; align-items: start;
  width: 100%; text-align: left; cursor: pointer; border: 0; font: inherit;
  background: transparent; color: inherit; padding: 11px 13px; border-radius: var(--radius-md);
  transition: background .16s ease;
}
.pal-item.on { background: var(--bg-tertiary); }
.pal-type {
  font-size: 0.68rem; letter-spacing: 0.06em; text-align: center; line-height: 1.5;
  border-radius: var(--radius-full); padding: 2px 0; border: 1px solid var(--border-color);
  color: var(--text-muted); margin-top: 1px;
}
.pal-type.t-emp { color: var(--c-indigo); border-color: rgba(129,140,248,.4); }
.pal-type.t-chr { color: var(--c-rose);   border-color: rgba(251,113,133,.4); }
.pal-type.t-glo { color: var(--c-amber);  border-color: rgba(251,191,36,.4); }
.pal-type.t-cmp { color: var(--c-teal);   border-color: rgba(45,212,191,.4); }
.pal-type.t-deb { color: var(--c-rose);   border-color: rgba(251,113,133,.4); }
.pal-type.t-era { color: var(--c-violet); border-color: rgba(167,139,250,.4); }
.pal-type.t-geo { color: var(--c-teal);   border-color: rgba(45,212,191,.4); }
.pal-type.t-thm { color: var(--c-violet); border-color: rgba(167,139,250,.4); }
.pal-type.t-bib { color: var(--c-indigo); border-color: rgba(129,140,248,.4); }
.pal-type.t-idx { color: var(--text-secondary); }
.pal-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pal-title { font-family: var(--font-serif); font-size: 0.97rem; font-weight: 700; }
.pal-sub { font-size: 0.75rem; color: var(--accent-primary); }
.pal-snip {
  font-size: 0.79rem; color: var(--text-muted); line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pal-item mark { background: rgba(129,140,248,.24); color: var(--text-primary); border-radius: 3px; padding: 0 1px; }
[data-theme="light"] .pal-item mark { background: rgba(79,70,229,.16); }
.pal-go { color: var(--text-muted); font-size: 0.78rem; opacity: 0; transition: var(--transition); margin-top: 3px; }
.pal-item.on .pal-go { opacity: 1; }
.palette-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 18px; border-top: 1px solid var(--border-color);
  font-size: 0.74rem; color: var(--text-muted);
}
.palette-foot span { display: inline-flex; align-items: center; gap: 4px; }
.palette-count { margin-left: auto; }

@media (max-width: 620px) {
  .palette-box { margin-top: 0; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; border: 0; }
  .palette-body { max-height: none; flex: 1; }
  .pal-item { grid-template-columns: 42px 1fr; }
  .pal-go { display: none; }
}

/* 11) 打印：把当前栏目导出成一份可读讲义 */
@media print {
  .topbar, .readbar, .totop, .skip-link, .palette, .reader-stage,
  .filters, .house-switch, .gz-quick, #searchBtn, #themeBtn, .caret, .pal-go { display: none !important; }
  .view { display: block !important; padding: 0 !important; animation: none !important; }
  .view:not(.active) { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  body::before { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .emp-body, .cmp-body, .deb-body, .idx-subs { display: block !important; }
  .card, .stat, .emp, .ce, .cmp, .gi, .deb, .thm, .prov, .garr, .place,
  .num-item, .bib, .rel, .era-row, .idx-panel, .idx-side, .terr-row {
    background: #fff !important; border-color: #ccc !important; box-shadow: none !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .stat .n, .num-value, .gz-gz { -webkit-text-fill-color: #1a1a1a !important; color: #1a1a1a !important; }
  .sec-head h2, h1, h2, h3, h4 { color: #111 !important; }
  p, li, .pal-snip, .era-emp { color: #333 !important; }
  .chip, .conf, .cat-tag, .pill { border-color: #bbb !important; color: #444 !important; background: #f4f4f4 !important; }
  a { color: #1a1a1a !important; text-decoration: underline; }
  .foot { border-top: 1px solid #ccc; color: #444 !important; }
}

/* 12) 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .view.active { animation: none !important; }
}

/* 13) 长列表跳屏外渲染：让浏览器跳过视口外的卡片，显著降低整页重排成本。
   .gi / .bib / .place / .num-item 都是自包含卡片，无向外溢出的伪元素，可安全启用。
   .ce 不启用：时间轴圆点靠 ::before 定位在左边界外，paint containment 会把它裁掉。 */
.gi, .bib, .place, .num-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 150px;
}

/* 14) 年表也启用跳屏外渲染。
   原结构里圆点用 .ce::before{left:-30px} 画在 .ce 盒子之外，paint containment 会裁掉它。
   这里把 30px 缩进从 .chrono 挪到 .ce 自身，圆点改为 left:0，视觉不变但落在盒内，可安全启用。 */
.chrono { padding-left: 0; }
.ce { padding: 0 0 22px 30px; content-visibility: auto; contain-intrinsic-size: auto 112px; }
.ce::before { left: 0; }

/* 15) 把跳屏外渲染推广到其余自包含卡片（经验：启用后该栏切换耗时降一个量级）。
   .ce / .gi / .bib / .place / .num-item 已在上面启用。 */
.era-row, .thm, .cmp, .deb, .prov, .garr, .terr-row, .rel, .num-group, .bib-group, .idx-ch {
  content-visibility: auto;
  contain-intrinsic-size: auto 160px;
}
.thm, .prov, .garr { contain-intrinsic-size: auto 190px; }

/* 16) 校准 contain-intrinsic-size：按实测平均高度设定，减少滚动时的高度漂移。
   测量方式见 outputs/ming-heights.mjs（临时关闭 CV 后逐栏量 border-box 高度；
   全局 box-sizing: border-box，故实测值可直接用作 intrinsic size）。 */
.gi        { contain-intrinsic-size: auto 149px; }
.ce        { contain-intrinsic-size: auto 125px; }
.bib       { contain-intrinsic-size: auto 231px; }
.place     { contain-intrinsic-size: auto 134px; }
.num-item  { contain-intrinsic-size: auto 149px; }
.era-row   { contain-intrinsic-size: auto 116px; }
.thm       { contain-intrinsic-size: auto 300px; }
.cmp       { contain-intrinsic-size: auto 78px; }
.deb       { contain-intrinsic-size: auto 115px; }
.prov      { contain-intrinsic-size: auto 202px; }
.garr      { contain-intrinsic-size: auto 112px; }
.terr-row  { contain-intrinsic-size: auto 58px; }
.rel       { contain-intrinsic-size: auto 114px; }
.num-group { contain-intrinsic-size: auto 333px; }
.bib-group { contain-intrinsic-size: auto 658px; }
.idx-ch    { contain-intrinsic-size: auto 52px; }

/* 17) 终值校准：Chrome 把 contain-intrinsic-size 当内容盒高度，内边距与边框会另加，
   故取值 = 实测 border-box 高度 − 内边距 − 边框（见 outputs/ming-heights.mjs 的「建议值」列）。 */
.gi        { contain-intrinsic-size: auto 117px; }
.ce        { contain-intrinsic-size: auto 103px; }
.bib       { contain-intrinsic-size: auto 197px; }
.place     { contain-intrinsic-size: auto 104px; }
.num-item  { contain-intrinsic-size: auto 117px; }
.era-row   { contain-intrinsic-size: auto 87px; }
.thm       { contain-intrinsic-size: auto 256px; }
.cmp       { contain-intrinsic-size: auto 68px; }
.deb       { contain-intrinsic-size: auto 113px; }
.prov      { contain-intrinsic-size: auto 170px; }
.garr      { contain-intrinsic-size: auto 82px; }
.terr-row  { contain-intrinsic-size: auto 29px; }
.rel       { contain-intrinsic-size: auto 81px; }
.num-group { contain-intrinsic-size: auto 333px; }
.bib-group { contain-intrinsic-size: auto 658px; }
.idx-ch    { contain-intrinsic-size: auto 27px; }

/* ==========================================================================
   V5 精修层 · 官僚体系 / 思想界
   ========================================================================== */

/* 1) 官僚体系 · 体系分组 */
.bz-systems { display: grid; gap: 22px; }
.bz-sec {
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 22px 22px 8px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.bz-sec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.bz-sec-head h3 { font-family: var(--font-serif); font-size: 1.16rem; margin: 0; }
.bz-ico {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--accent-gradient);
  color: var(--on-accent); font-size: .88rem; font-weight: 700;
  font-family: var(--font-serif);
}
.bz-sec-note { margin: 0 0 14px; font-size: .88rem; color: var(--text-secondary); line-height: 1.85; }

/* 2) 层级链 */
.bz-ladder {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 18px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}
.bz-node {
  font-size: .78rem; color: var(--text-primary);
  padding: 5px 11px; border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  white-space: nowrap;
}
.bz-arrow { color: var(--accent-primary); font-size: .8rem; opacity: .8; }

/* 3) 职位卡 */
.bz-offices { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-bottom: 14px; }
.bz-office {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  padding: 16px 17px;
  content-visibility: auto;
  contain-intrinsic-size: auto 528px;
  scroll-margin-top: 84px;
}
.bz-off-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.bz-off-head b { font-family: var(--font-serif); font-size: 1.02rem; }
.bz-rank {
  font-size: .72rem; color: var(--accent-primary);
  border: 1px solid var(--border-hover);
  background: var(--accent-glow);
  padding: 2px 8px; border-radius: var(--radius-full);
  white-space: nowrap;
}
.bz-alias { font-size: .78rem; color: var(--text-muted); margin-bottom: 11px; }
.bz-field { margin-bottom: 9px; }
.bz-k {
  display: inline-block; font-size: .7rem; letter-spacing: .08em;
  color: var(--text-muted); margin-bottom: 3px;
}
.bz-field p { margin: 0; font-size: .86rem; color: var(--text-secondary); line-height: 1.8; }
.bz-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.bz-note {
  margin-top: 10px; padding: 11px 13px;
  border-left: 2px solid var(--accent-primary);
  background: var(--bg-tertiary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .82rem; color: var(--text-secondary); line-height: 1.78;
}
.bz-note b { color: var(--accent-primary); }
.bz-refs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }

/* 4) 品级总表 */
.bz-tablewrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); }
.bz-table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 560px; }
.bz-table caption { text-align: left; padding: 14px 16px 10px; font-size: .8rem; color: var(--text-muted); }
.bz-table thead th {
  text-align: left; padding: 10px 16px; font-size: .74rem; letter-spacing: .06em;
  color: var(--text-muted); border-bottom: 1px solid var(--border-color); font-weight: 600;
}
.bz-table td, .bz-table tbody th { padding: 11px 16px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.bz-table tbody tr:last-child td, .bz-table tbody tr:last-child th { border-bottom: 0; }
.bz-table tbody tr:hover { background: var(--bg-card-hover); }
.bz-rk { white-space: nowrap; font-weight: 600; color: var(--accent-primary); font-family: var(--font-serif); }
.bz-cv { color: var(--text-primary); line-height: 1.75; }
.bz-nt { color: var(--text-secondary); line-height: 1.75; }
.bz-table tbody tr { scroll-margin-top: 84px; }

/* 5) 思想界 */
.tk-schools { display: grid; gap: 22px; }
.tk-sec {
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 22px 22px 8px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.tk-sec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tk-sec-head h3 { font-family: var(--font-serif); font-size: 1.16rem; margin: 0; }
.tk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-bottom: 14px; }
.tk {
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-secondary); padding: 17px 18px;
  content-visibility: auto; contain-intrinsic-size: auto 660px;
  scroll-margin-top: 84px;
}
.tk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.tk-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tk-name b { font-family: var(--font-serif); font-size: 1.16rem; }
.tk-courtesy { font-size: .76rem; color: var(--text-muted); }
.tk-life { font-size: .76rem; color: var(--text-muted); white-space: nowrap; }
.tk-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 11px; }
.tk-title { font-size: .78rem; color: var(--text-muted); }
.tk-core {
  padding: 11px 13px; margin-bottom: 13px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-glow), transparent);
  border: 1px solid var(--border-hover);
  font-family: var(--font-serif); font-size: .93rem; line-height: 1.8;
  color: var(--text-primary);
}
.tk-thoughts { display: grid; gap: 10px; margin-bottom: 13px; }
.tk-th { border-left: 2px solid var(--border-hover); padding-left: 12px; }
.tk-th b { display: block; font-size: .86rem; color: var(--accent-primary); margin-bottom: 3px; }
.tk-th p { margin: 0; font-size: .84rem; color: var(--text-secondary); line-height: 1.8; }
.tk-field { margin-bottom: 11px; }
.tk-legacy { font-size: .83rem; color: var(--text-secondary); line-height: 1.8; padding-top: 11px; border-top: 1px dashed var(--border-color); }
.tk-legacy b { color: var(--accent-primary); }

/* 6) 思想界的常开式争议（复用 .deb 外观，但默认展开） */
.deb-head-static { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px 6px; }
.deb-body-open { padding: 6px 20px 20px; }

/* 7) 检索面板新类型配色 */
.pal-type.t-bz { color: var(--c-teal);   border-color: rgba(45, 212, 191, .4); }
.pal-type.t-tk { color: var(--c-violet); border-color: rgba(167, 139, 250, .4); }

/* 8) 窄屏 */
@media (max-width: 760px) {
  .bz-offices, .tk-list { grid-template-columns: 1fr; }
  .bz-sec, .tk-sec { padding: 18px 15px 6px; }
  .bz-ladder { padding: 10px 11px; }
  .bz-node { font-size: .74rem; padding: 4px 9px; white-space: normal; }
  /* 品级串较长（如「都指挥使正二品；都指挥同知从二品；都指挥佥事正三品」），
     窄屏下必须允许折行，否则会把整张卡片顶宽 */
  .bz-rank { white-space: normal; line-height: 1.6; }
  .tk-life { white-space: normal; }
  .deb-head-static { padding: 16px 15px 4px; }
  .deb-body-open { padding: 4px 15px 16px; }
}

/* 9) 减少动效 */
@media (prefers-reduced-motion: reduce) {
  .bz-office, .tk { transition: none; }
}

/* 10) 打印：新栏目同样白底、不断页 */@media print {
  .bz-sec, .tk-sec, .bz-office, .tk, .bz-ladder, .bz-note, .tk-core {
    background: #fff !important; border-color: #ccc !important; box-shadow: none !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .bz-tablewrap { overflow: visible !important; border: 1px solid #ccc !important; background: #fff !important; }
  .bz-table { min-width: 0 !important; }
  .bz-table td, .bz-table tbody th, .bz-table thead th { border-color: #ccc !important; }
  .bz-rk, .tk-th b, .bz-note b, .tk-legacy b { color: #1a1a1a !important; }
  .bz-node, .bz-arrow { color: #333 !important; background: #f4f4f4 !important; border-color: #bbb !important; }
  .tk-core { -webkit-text-fill-color: #1a1a1a !important; color: #1a1a1a !important; }
}

/* 11) 栏目增至 15 个：标签统一为双字，并收紧内边距，
   使 1280px 以上的宽屏无需横向滚动即可看全（窄屏仍走原有的滚动 + 渐隐遮罩）。 */
.tabs { gap: 1px; }
.tab { font-size: 0.85rem; padding: 8px 9px; letter-spacing: 0.01em; }
@media (max-width: 1279px) {
  .tab { padding: 8px 11px; }
}

/* 12) contain-intrinsic-size 的单值写法会同时约束「宽」与「高」。
   对单列纵向列表无碍，但会让被跳过元素的 min-content 被撑到该值，
   在窄屏下把父容器顶宽（新栏目 390px 下实测溢出 31–132px）。
   这里统一改为只约束高度：宽度交给容器决定。 */
.gi, .ce, .bib, .place, .num-item, .era-row, .thm, .cmp, .deb, .prov, .garr,
.terr-row, .rel, .num-group, .bib-group, .idx-ch, .bz-office, .tk {
  contain-intrinsic-width: none;
}

/* ==========================================================================
   V6 精修层 · 权力结构（方志远《明代国家权力结构及运行机制》研读索引）
   ========================================================================== */

/* 1) 书目卡 */
.pw-book {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.pw-book-main h3 { font-family: var(--font-serif); font-size: 1.18rem; margin: 0 0 7px; }
.pw-book-meta { margin: 0 0 3px; font-size: .82rem; color: var(--text-secondary); line-height: 1.7; }
.pw-book-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.pw-book-stats > div { text-align: center; min-width: 52px; }
.pw-book-stats b {
  display: block; font-family: var(--font-serif); font-size: 1.32rem;
  background: var(--accent-gradient); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
}
.pw-book-stats span { font-size: .7rem; color: var(--text-muted); }

/* 2) 全书骨架 */
.pw-parts { display: grid; gap: 20px; }
.pw-part {
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 20px 22px 12px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.pw-part-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pw-part-head h3 { font-family: var(--font-serif); font-size: 1.1rem; margin: 0; }
.pw-part-note { margin: 0 0 14px; font-size: .87rem; color: var(--text-secondary); line-height: 1.85; }
.pw-chapters { display: grid; gap: 8px; }

.pw-ch {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  scroll-margin-top: 84px;
}
.pw-ch > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 15px; cursor: pointer; list-style: none;
  font-size: .92rem;
}
.pw-ch > summary::-webkit-details-marker { display: none; }
.pw-ch > summary::before {
  content: "▸"; color: var(--accent-primary); font-size: .74rem;
  transition: transform .18s ease;
}
.pw-ch[open] > summary::before { transform: rotate(90deg); }
.pw-ch-no { font-family: var(--font-serif); color: var(--accent-primary); font-size: .86rem; }
.pw-ch-t { font-weight: 600; }
.pw-pg {
  font-size: .72rem; color: var(--text-muted);
  border: 1px solid var(--border-color); border-radius: var(--radius-full);
  padding: 1px 7px; white-space: nowrap;
}
.pw-ch-gist {
  margin: 0 15px 10px; font-size: .85rem; color: var(--text-secondary); line-height: 1.85;
  padding-left: 13px; border-left: 2px solid var(--border-hover);
}
.pw-secs { list-style: none; margin: 0 0 10px; padding: 0 15px; }
.pw-secs > li {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px dashed var(--border-color);
  font-size: .84rem; color: var(--text-secondary);
}
.pw-sec-no { color: var(--text-muted); font-size: .76rem; }
.pw-sec-t { flex: 1 1 200px; }
.pw-subs { list-style: none; margin: 6px 0 0; padding: 0 0 0 14px; flex: 1 1 100%; }
.pw-subs > li {
  display: flex; align-items: baseline; gap: 9px; justify-content: space-between;
  padding: 3px 0; font-size: .79rem; color: var(--text-muted);
}
.pw-ch-meta { padding: 0 15px 12px; font-size: .72rem; color: var(--text-muted); }
.pw-tail {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 15px; border: 1px dashed var(--border-color);
  border-radius: var(--radius-md); font-size: .85rem; color: var(--text-secondary);
}

/* 3) 主题卡 */
.pw-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.pw-theme {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  padding: 16px 17px;
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
  contain-intrinsic-width: none;
  scroll-margin-top: 84px;
}
.pw-th-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pw-th-head h3 { font-family: var(--font-serif); font-size: 1.02rem; margin: 0; }
.pw-gist { margin: 0 0 12px; font-size: .87rem; color: var(--text-secondary); line-height: 1.85; }
.pw-block { margin-bottom: 12px; }
.pw-k {
  display: flex; align-items: baseline; gap: 8px;
  font-size: .7rem; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 6px;
}
.pw-hint { letter-spacing: 0; font-size: .68rem; color: var(--text-muted); opacity: .8; }
.pw-claims { margin: 0; padding-left: 20px; }
.pw-claims li { font-size: .85rem; color: var(--text-secondary); line-height: 1.85; margin-bottom: 5px; }
.pw-claims li::marker { color: var(--accent-primary); font-size: .8rem; }

.pw-refs { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.pw-ref {
  display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-tertiary); padding: 7px 10px; cursor: pointer;
  color: inherit; font: inherit; transition: border-color .16s ease, background .16s ease;
}
.pw-ref:hover, .pw-ref:focus-visible { border-color: var(--border-hover); background: var(--bg-card); }
.pw-ref-pg {
  flex: 0 0 auto; font-size: .72rem; color: var(--accent-primary);
  border: 1px solid var(--border-hover); background: var(--accent-glow);
  border-radius: var(--radius-full); padding: 1px 7px; white-space: nowrap;
}
.pw-ref-pg i { font-style: normal; opacity: .65; }
.pw-ref-body { min-width: 0; }
.pw-ref-ch { display: block; font-size: .74rem; color: var(--text-muted); margin-bottom: 2px; }
.pw-ref-snip {
  display: block; font-size: .8rem; color: var(--text-secondary); line-height: 1.7;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pw-none { font-size: .82rem; color: var(--text-muted); }

.pw-linkrow { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-chip {
  font-size: .74rem; padding: 3px 10px; border-radius: var(--radius-full);
  border: 1px solid var(--border-hover); background: var(--accent-glow);
  color: var(--accent-primary); cursor: pointer; font-family: inherit;
}
.pw-chip:hover { background: var(--bg-tertiary); }
.pw-chip.pw-off {
  color: var(--text-muted); background: transparent;
  border-style: dashed; border-color: var(--border-color); cursor: default;
}
.pw-count { font-size: .78rem; color: var(--text-muted); margin-left: 6px; align-self: center; }

/* 4) 段落检索 */
.pw-searchbox {
  border: 1px solid var(--border-color); background: var(--bg-card);
  border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.pw-slabel { display: block; font-size: .72rem; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 7px; }
#pwSearchInput {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: .95rem;
  color: var(--text-primary); background: var(--bg-tertiary);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 11px 13px;
}
#pwSearchInput:focus { outline: none; border-color: var(--border-hover); }
.pw-smeta { margin-top: 9px; font-size: .78rem; color: var(--text-muted); line-height: 1.7; }

.pw-hits { display: grid; gap: 9px; }
.pw-hit {
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-secondary); padding: 12px 15px;
  content-visibility: auto; contain-intrinsic-size: auto 120px; contain-intrinsic-width: none;
}
.pw-hit-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.pw-hit-pg {
  font-size: .74rem; color: var(--accent-primary); cursor: pointer; font-family: inherit;
  border: 1px solid var(--border-hover); background: var(--accent-glow);
  border-radius: var(--radius-full); padding: 2px 9px;
}
.pw-hit-h { font-size: .68rem; }
.pw-hit-text { margin: 0; font-size: .85rem; color: var(--text-secondary); line-height: 1.9; }
.pw-hit-text mark { background: var(--accent-glow); color: var(--accent-primary); border-radius: 3px; padding: 0 1px; }
.pw-hit-one { border-color: var(--border-hover); }

/* 5) 命令面板类型徽标 */
.pal-type.t-pw { color: var(--c-amber); border-color: rgba(251, 191, 36, .4); }

/* 6) 窄屏 */
@media (max-width: 760px) {
  .pw-themes { grid-template-columns: 1fr; }
  .pw-book { padding: 17px 15px; }
  .pw-part { padding: 17px 15px 10px; }
  .pw-ref-snip { white-space: normal; }
  .pw-book-stats { gap: 14px; }
  .pw-ch > summary { padding: 11px 12px; }
  .pw-secs, .pw-ch-gist, .pw-ch-meta { padding-left: 12px; padding-right: 12px; }
}

/* 7) 减弱动效 */
@media (prefers-reduced-motion: reduce) {
  .pw-ch > summary::before { transition: none; }
}

/* 8) 打印 */
@media print {
  .pw-book, .pw-part, .pw-theme, .pw-hit, .pw-searchbox {
    background: #fff !important; border-color: #bbb !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    break-inside: avoid;
  }
  .pw-searchbox, .pw-hits { display: none !important; }
  .pw-ch { break-inside: avoid; }
  .pw-ch-gist, .pw-secs > li, .pw-claims li, .pw-ref-snip, .pw-hit-text { color: #333 !important; }
  .pw-ref-pg, .pw-pg, .pw-chip, .pw-hit-pg { color: #1a1a1a !important; background: #f4f4f4 !important; border-color: #bbb !important; }
  .pw-book-stats b { -webkit-text-fill-color: #1a1a1a !important; color: #1a1a1a !important; background: none !important; }
}

/* 9) 16 个栏目下的标签栏收紧（1280px 以上必须一行放下，不允许横向滚动） */
.tabs { gap: 0; }
.tab { font-size: 0.84rem; padding: 8px 8px; letter-spacing: 0.005em; }
@media (max-width: 1279px) { .tab { padding: 8px 11px; } }

/* ==========================================================================
   V7 精修层 · 图表栏（本站内容统计）+ 17 个栏目下的标签栏再收紧
   以追加方式引入，不改动上方既有层，便于回滚。
   ========================================================================== */

/* 1) 17 个栏目的标签栏：1280px 以上仍必须一行放下。
   容器 .topbar-inner 固定 1180px（内边距 22 + 品牌 198 + 操作区 168 + 两道 16 间隔），
   留给标签栏的净宽约 738px。17 个双字标签在 8px 左右内边距下是 43px×17=731px，
   只剩 7px 余量，太紧；收到 7px 后为 41px×17=697px，余量 41px。 */
.tab { padding: 8px 7px; }

/* 2) 检索结果里的「图表」与「数据」类型徽标 */
.pal-type.t-ch { color: var(--c-teal); border-color: rgba(45, 212, 191, .4); }
.pal-type.t-num { color: var(--c-amber); border-color: rgba(245, 158, 11, .4); }

/* 3) 图表栏骨架 */
.ch-group { margin-bottom: 36px; }
.ch-group-head h2 { font-size: 1.18rem; margin: 0 0 6px; }
.ch-group-head p {
  margin: 0 0 18px; color: var(--text-secondary);
  font-size: .88rem; line-height: 1.8; max-width: 78ch;
}
.ch-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 18px; align-items: start;
}
.ch-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 18px 18px 16px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: var(--transition);
}
.ch-card:hover { border-color: var(--border-hover); box-shadow: var(--card-shadow); }
.ch-card:target { border-color: var(--border-hover); box-shadow: 0 0 0 2px var(--accent-glow); }
.ch-h { font-size: 1rem; margin: 0 0 14px; font-weight: 600; }
.ch-read {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--border-color);
  font-size: .84rem; line-height: 1.8; color: var(--text-secondary);
}
.ch-read b { color: var(--text-primary); }

/* 4) 横向条形 */
.ch-bars { display: flex; flex-direction: column; gap: 5px; --ch-lab: 132px; }
.ch-bars.tight { gap: 3px; }
.ch-bars.wide { --ch-lab: 250px; }
.ch-bar { display: grid; grid-template-columns: var(--ch-lab) 1fr auto; align-items: center; gap: 10px; }
.ch-lab {
  font-size: .8rem; color: var(--text-secondary); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-bars.wide .ch-lab { text-align: left; }
.ch-track { height: 9px; background: var(--bg-tertiary); border-radius: var(--radius-full); overflow: hidden; }
.ch-track i { display: block; height: 100%; border-radius: var(--radius-full); transition: width .55s cubic-bezier(.16,1,.3,1); }
.ch-bar:hover .ch-track i { filter: brightness(1.18) saturate(1.1); }
.ch-val {
  font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap;
  display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
  min-width: 92px; color: var(--text-primary);
}
.ch-val em { font-style: normal; color: var(--text-muted); font-size: .72rem; }
.ch-val b { font-weight: 600; color: var(--accent-primary); font-size: .72rem; }
.ch-val .ch-sub { color: var(--text-muted); }

/* 5) 纵向柱状（列数 ≤6 时才用） */
.ch-col-plot { display: flex; align-items: flex-end; gap: 10px; height: 180px; }
.ch-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.ch-col-v { font-size: .76rem; line-height: 18px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ch-col i { display: block; width: 100%; max-width: 64px; border-radius: 6px 6px 0 0; transition: height .55s cubic-bezier(.16,1,.3,1); }
.ch-col:hover i { filter: brightness(1.18); }
.ch-col.peak i { box-shadow: 0 0 14px -2px var(--accent-glow); }
.ch-col-axis { display: flex; gap: 10px; margin-top: 8px; }
/* 一柱一 span，但柱子多时 JS 会抽稀（部分 span 留空）。
   留空的要能被压到 0（min-width:0），有字的要能借空位展开（overflow:visible）。
   少了 min-width:0，flex 项就按文字宽度撑开整行 —— 19 柱图在窄屏撑宽页面就是这么来的。
   首末标签贴边对齐，否则最外侧那个会溢出容器、把整页撑宽。 */
.ch-col-axis span { flex: 1 1 0; min-width: 0; text-align: center; font-size: .76rem; color: var(--text-muted); white-space: nowrap; }
.ch-col-axis span:empty { overflow: hidden; }
.ch-col-axis span:not(:empty) { overflow: visible; }
.ch-col-axis span.first { text-align: left; }
.ch-col-axis span.last { text-align: right; }
.ch-col-axis span.peak { color: var(--accent-primary); font-weight: 600; }

/* 6) 堆积横条 */
.ch-stackrows { display: flex; flex-direction: column; gap: 5px; }
.ch-stackrows.tight { gap: 3px; }
.ch-srow { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; }
.ch-strack {
  display: flex; height: 11px; min-width: 3px;
  border-radius: var(--radius-full); overflow: hidden; background: var(--bg-tertiary);
}
.ch-strack i { display: block; height: 100%; }
.ch-srow:hover .ch-strack i { filter: brightness(1.18); }
.ch-srow .ch-val { min-width: 34px; }

/* 7) 环形 + 图例 */
.ch-donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ch-donut { width: 148px; height: 148px; flex: none; }
.ch-donut path, .ch-donut circle { transition: opacity .2s; }
.ch-donut path:hover, .ch-donut circle:hover { opacity: .75; }
.ch-legend { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ch-legend-wrap { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.ch-lg { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-secondary); white-space: nowrap; }
.ch-lg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ch-lg b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ch-lg em { font-style: normal; color: var(--text-muted); font-size: .74rem; }

/* 8) 窄屏 */
@media (max-width: 720px) {
  .ch-cards { grid-template-columns: 1fr; }
  .ch-bars { --ch-lab: 86px; }
  .ch-bars.wide { --ch-lab: 132px; }
  .ch-bar { gap: 8px; }
  .ch-donut-wrap { justify-content: center; }
}
@media (max-width: 520px) {
  .ch-val b { display: none; }
  .ch-col-plot { height: 150px; }
  .ch-col-axis { gap: 4px; }
  .ch-col-axis span { font-size: .68rem; }
}

/* 9) 时间轴（甘特）：刻度行与条形行共用同一列网格，轴才不会和条错位。
      刻度用 left 百分比绝对定位，所以轴那一行的轨道必须 overflow:visible，
      而条形行的轨道要 overflow:hidden 才能把条裁进圆角。 */
.ch-gantt { display: flex; flex-direction: column; gap: 3px; --ch-lab: 132px; }
.ch-gantt.wide { --ch-lab: 250px; }
.ch-g-row { display: grid; grid-template-columns: var(--ch-lab) 1fr auto; align-items: center; gap: 10px; }
.ch-g-track {
  position: relative; height: 11px; border-radius: var(--radius-full);
  background: var(--bg-tertiary); overflow: hidden;
}
.ch-g-track i {
  position: absolute; top: 0; height: 100%; border-radius: var(--radius-full);
  transition: left .5s cubic-bezier(.16,1,.3,1), width .5s cubic-bezier(.16,1,.3,1);
}
.ch-g-row:hover .ch-g-track i { filter: brightness(1.18) saturate(1.1); }
.ch-g-row .ch-val { min-width: 62px; }
.ch-g-axis .ch-g-track { height: 17px; background: none; overflow: visible; }
.ch-g-axis .ch-g-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: .7rem; line-height: 16px; color: var(--text-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ch-g-axis .ch-g-tick::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 1px; height: 5px;
  background: var(--border-color);
}

/* 10) 热力图：行 × 列 的交叉表。格子底色是内联的 rgba，深浅随数值，
       文字颜色也由脚本按深浅切换（深底白字 / 浅底正文色），明暗两套主题下都读得出来。 */
.ch-heat { display: flex; flex-direction: column; gap: 4px; }
.ch-hm-row {
  display: grid; align-items: center; gap: 5px;
  grid-template-columns: var(--ch-hm-lab, 104px) repeat(var(--ch-hm-n, 3), minmax(0, 1fr)) 44px;
}
.ch-hm-lab {
  font-size: .78rem; color: var(--text-secondary); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-hm-col { font-size: .74rem; color: var(--text-muted); text-align: center; }
.ch-hm-tot { font-size: .74rem; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.ch-hm-cell {
  display: flex; align-items: center; justify-content: center;
  height: 26px; border-radius: 6px; background: var(--bg-tertiary);
  font-size: .76rem; font-variant-numeric: tabular-nums;
}
.ch-hm-cell.zero { color: var(--text-muted); }
.ch-hm-note { margin-top: 8px; font-size: .72rem; color: var(--text-muted); line-height: 1.7; }

/* 11) 两类新图的窄屏收缩（行标签让位给图形本身） */
@media (max-width: 720px) {
  .ch-gantt { --ch-lab: 96px; }
  .ch-heat { --ch-hm-lab: 78px !important; }
  .ch-hm-cell { height: 24px; font-size: .72rem; }
  .ch-g-axis .ch-g-tick { font-size: .66rem; }
}
@media (max-width: 520px) {
  .ch-gantt { --ch-lab: 74px; }
  .ch-g-row .ch-val { min-width: 42px; }
  .ch-hm-row { grid-template-columns: var(--ch-hm-lab, 78px) repeat(var(--ch-hm-n, 3), minmax(0, 1fr)) 34px; }
}

/* 12) 打印：图表不跨页断开 */
@media print {
  .ch-card { break-inside: avoid; background: #fff !important; border-color: #bbb !important; backdrop-filter: none !important; }
  .ch-read, .ch-lab, .ch-lg { color: #333 !important; }
  .ch-track, .ch-strack, .ch-g-track, .ch-hm-cell { background: #eee !important; }
  .ch-h { color: #111 !important; }
  .ch-hm-note { color: #444 !important; }
}

/* ==========================================================================
   V8 精修层 · 统计（计量史学）
   --------------------------------------------------------------------------
   与图表栏的关系：图表栏的卡片是「一图一读」，这里是「一卡 = 方法 + 结果 + 局限」，
   所以多了三样图表栏没有的东西：关键指标网格（.st-kv）、
   「能说／不能说」判定（.st-verdict）、以及方法标签（.st-method）。
   判定那一条是本层最重要的设计：它把「这个结论能用到什么程度」固定在每张卡里，
   不靠读者自己把握分寸。
   ========================================================================== */

/* 1) 三条铁律：进栏目先讲清样本边界 */
.st-rules { display: grid; gap: 10px; margin: 0 0 26px; }
.st-rule {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-left: 3px solid var(--c-rose); border-radius: var(--radius-sm);
  padding: 12px 15px; font-size: .87rem; line-height: 1.85; color: var(--text-secondary);
}
.st-rule b { display: block; color: var(--text-primary); font-size: .9rem; margin-bottom: 3px; }

/* 2) 分节：A 史料事实 / B 索引结构 —— 两者的统计对象不同，视觉上必须分开 */
.st-body { display: block; }
.st-sec { margin: 0 0 34px; }
.st-sec-h {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  font-size: 1.02rem; margin: 0 0 16px; padding-bottom: 9px;
  border-bottom: 1px solid var(--border-color);
}
.st-sec-h span { font-size: .8rem; font-weight: 400; color: var(--text-muted); }

/* 3) 卡片网格 */
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 18px; align-items: start; }
.st-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 18px 18px 16px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: var(--transition);
}
.st-card:hover { border-color: var(--border-hover); box-shadow: var(--card-shadow); }
.st-card:target { border-color: var(--border-hover); box-shadow: 0 0 0 2px var(--accent-glow); }

.st-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.st-no {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-variant-numeric: tabular-nums;
  background: var(--accent-glow); color: var(--accent-primary); border: 1px solid var(--border-hover);
}
.st-head h3 { font-size: .97rem; margin: 0; font-weight: 600; flex: 1 1 200px; line-height: 1.5; }
.st-method {
  flex: 0 0 auto; font-size: .68rem; letter-spacing: .04em;
  color: var(--text-muted); border: 1px solid var(--border-color);
  border-radius: var(--radius-full); padding: 2px 9px;
}

/* 4) 图形区：宽图占满整行，窄图并排 */
.st-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.st-fig { margin: 0; min-width: 0; }
.st-fig.wide { grid-column: 1 / -1; }
.st-fig figcaption { margin-top: 7px; font-size: .73rem; color: var(--text-muted); line-height: 1.7; }
.st-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* SVG 内部元素：颜色走变量，明暗两套主题都读得出来 */
.st-axis { stroke: var(--border-color); stroke-width: 1; }
.st-tick { font-size: 10px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.st-lab { font-size: 10px; fill: var(--text-secondary); }
.st-axlab { font-size: 10.5px; fill: var(--text-muted); }
.st-ref { stroke: var(--text-muted); stroke-width: 1.4; stroke-dasharray: 6 4; }
.st-fit { stroke: var(--c-rose); stroke-width: 2; opacity: .85; }
.st-norm { stroke: var(--c-rose); stroke-width: 2; stroke-dasharray: 5 3; }
.st-plotbg { fill: var(--bg-tertiary); opacity: .45; }

/* 5) 关键指标网格 */
.st-kv {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 1px; background: var(--border-color);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  overflow: hidden; margin-bottom: 14px;
}
.st-kv-i { background: var(--bg-secondary); padding: 8px 9px; display: flex; flex-direction: column; gap: 1px; }
.st-kv-k { font-size: .68rem; color: var(--text-muted); letter-spacing: .03em; }
.st-kv-v { font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.st-kv-i em { font-size: .66rem; color: var(--text-muted); font-style: normal; }

/* 6) 解读正文 */
.st-read { font-size: .85rem; line-height: 1.95; color: var(--text-secondary); }
.st-read b { color: var(--text-primary); }

/* 7) 能说 / 不能说 —— 每张卡都必须有，缺了就等于没给边界 */
.st-verdict {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-color);
  display: grid; gap: 7px;
}
.st-verdict p { margin: 0; font-size: .82rem; line-height: 1.8; color: var(--text-secondary); }
.st-verdict b {
  display: inline-block; margin-right: 7px; padding: 1px 7px;
  border-radius: var(--radius-full); font-size: .7rem; letter-spacing: .04em;
}
.st-can b { background: rgba(45, 212, 191, .14); color: var(--c-teal); border: 1px solid rgba(45, 212, 191, .35); }
.st-cannot b { background: rgba(251, 113, 133, .14); color: var(--c-rose); border: 1px solid rgba(251, 113, 133, .35); }

/* 8) 检索面板的类型徽标 */
.pal-type.t-st { color: var(--c-violet); border-color: rgba(167, 139, 250, .4); }

/* 9) 窄屏：网格降为单列，指标网格收紧 */
@media (max-width: 900px) {
  .st-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .st-card { padding: 15px 14px 13px; }
  .st-kv { grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); }
  .st-kv-v { font-size: .88rem; }
  .st-read { font-size: .82rem; }
  .st-method { font-size: .64rem; }
  .st-sec-h { font-size: .95rem; }
}

/* 10) 打印：卡片不跨页断开，虚线框在纸上会糊，换成实线 */
@media print {
  .st-card, .st-rule { break-inside: avoid; background: #fff !important; border-color: #bbb !important; backdrop-filter: none !important; }
  .st-head h3, .st-read b, .st-rule b { color: #111 !important; }
  .st-read, .st-rule, .st-verdict p { color: #333 !important; }
  .st-verdict { border-top-style: solid; }
  .st-plotbg { fill: #f2f2f2 !important; }
}

/* ==========================================================================
   V9 精修层 · 导航与结构（页内目录 / 在位时间轴 / 长列表分组）
   与 V2—V8 同为追加层，不改动上方既有规则，便于单独回滚。
   ========================================================================== */

/* 0) 在位时间轴的两条色：竖网格线 + 半透明轨道底（两个主题各一套，写死色值即可） */
:root { --grid-line: rgba(255, 255, 255, 0.10); --rg-rail: rgba(255, 255, 255, 0.045); }
[data-theme="light"] { --grid-line: rgba(0, 0, 0, 0.10); --rg-rail: rgba(0, 0, 0, 0.045); }

/* 1) 页内目录条：贴在顶栏下方，只在当前栏目结构足够复杂时出现。
     顶栏高与目录条高都由 JS 量出后写进 :root，避免两处写死不一致。 */
.view-toc {
  position: sticky; top: var(--topbar-h, 57px); z-index: 40;
  margin: 0 -22px; padding: 0 22px;
  background: var(--nav-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border-color);
}
.view-toc[hidden] { display: none; }
.vt-scroll { display: flex; align-items: center; gap: 10px; }
.vt-label {
  flex-shrink: 0; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}
.vt-items { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; padding: 7px 0; flex: 1; }
.vt-items::-webkit-scrollbar { display: none; }
.vt-item {
  flex-shrink: 0; font-size: .78rem; color: var(--text-secondary); text-decoration: none;
  padding: 5px 11px; border-radius: var(--radius-full); white-space: nowrap;
  transition: var(--transition); max-width: 16em; overflow: hidden; text-overflow: ellipsis;
}
.vt-item:hover { color: var(--text-primary); background: var(--bg-tertiary); text-decoration: none; }
.vt-item.on { color: var(--accent-primary); background: var(--bg-tertiary); font-weight: 600; }
.vt-item:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }

/* 2) 在位时间轴的响应式：中窄屏收窄标签列，并隐去条内年号（放不下就会糊成一团） */
@media (max-width: 900px) {
  .reign { --rg-lab: 108px; --rg-val: 64px; }
  .reign-lab .rg-name { max-width: 6em; }
}

/* 窄屏：三列布局在 390px 下只剩约 200px 轨道，31 年的在位被压成一个小圆点，
   8 个年份刻度也叠成一坨。改成「标签 + 数值一行、轨道占满下一行」的两行式，
   轨道宽度翻倍，条才读得出长短。 */
@media (max-width: 560px) {
  .reign { --rg-lab: 0px; --rg-val: 0px; }
  .reign-row {
    grid-template-columns: 1fr auto; grid-template-areas: "lab val" "track track";
    gap: 3px 8px; padding: 7px 0; align-items: center;
  }
  .reign-lab { grid-area: lab; justify-content: flex-start; }
  .reign-lab .rg-name { display: inline; max-width: none; }
  .reign-track { grid-area: track; height: 11px; }
  .reign-val { grid-area: val; flex-direction: row; align-items: baseline; justify-content: flex-end; gap: 7px; }
  .reign-val em { display: inline; }
  /* 轴行只留刻度：标签与数值列空着会把刻度挤到右边 */
  .reign-axis .reign-lab, .reign-axis .reign-val { display: none; }
  .reign-axis { padding: 0 0 2px; }
  .reign-axis .reign-track { height: 15px; }
  /* 首尾刻度会各自向左右溢出半个字宽，窄屏直接去掉（起止年份在标题里写着） */
  .reign-tick:first-child, .reign-tick:last-child { display: none; }
  .reign-grid { display: none; }   /* 竖线会穿过标签文字，两行式布局里不用 */
  .reign-row:hover { background: none; }
  .reign-legend { padding-left: 0; }
}
@media print {
  .view-toc { display: none !important; }
}

/* 3) 年表「分期」组头：149 条扁平事件按分期切开，供页内目录做锚点。
     左内边距与 .ce 的 30px 对齐，保持时间轴那条竖线不被截断。 */
.ce-group {
  display: flex; align-items: baseline; gap: 10px;
  margin: 30px 0 16px; padding: 0 0 9px 30px;
  border-bottom: 1px solid var(--border-color);
}
.ce-group:first-child { margin-top: 0; }
.ceg-name { font-family: var(--font-serif); font-size: 1.12rem; font-weight: 700; letter-spacing: .03em; }
.ceg-n { font-size: .74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* 4) 词条库「分类」组头：跨满整个自适应网格 */
.gi-group {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px;
  margin: 26px 0 0; padding-bottom: 9px; border-bottom: 1px solid var(--border-color);
}
.gi-group:first-child { margin-top: 0; }
.gg-name { font-family: var(--font-serif); font-size: 1.08rem; font-weight: 700; letter-spacing: .03em; }
.gg-n { font-size: .74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* 5) 被页内目录指到的标题，滚动时留出两条 sticky 的高度，避免标题被压在栏下 */
[data-toc] { scroll-margin-top: var(--sticky-h, 110px); }

/* ---------------- 引用溯源（V10）：书名简称 → 可点的章节入口 ---------------- */
a.chip-ref { text-decoration: none; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
a.chip-ref::after { content: "↗"; font-size: .82em; opacity: .5; margin-left: 3px; }
a.chip-ref:hover { color: var(--text-primary); border-color: var(--border-hover); background: var(--bg-secondary); }
a.chip-ref:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
/* 年表与词条里的引用原本是直接给 span 写样式，补上 a 版本，换成链接后外观不变 */
.ce-refs a.chip-ref, .gi .refs a.chip-ref {
  display: inline-flex; align-items: center;
  font-size: .7rem; color: var(--text-muted);
  border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: 1px 9px;
}
/* 打印时箭头无意义，且外链标记会污染纸面 */
@media print { a.chip-ref::after { content: ""; } }

/* ==================== V11 精修层 · 舆图结构示意图 ====================
   两张图都是「结构示意」，不是地理投影：不含经纬度、海岸线与国界几何，
   也不引任何在线底图。配色沿用全站令牌，深浅两主题各自给一套底色。 */

.gx-fig { margin: 4px 0 20px; }
.gx-cap { margin: 10px 0 0; font-size: .74rem; color: var(--text-muted); line-height: 1.7; }

/* ---- ① 十五政区相对方位格 ---- */
.gx-axis { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; }
.gx-axis span { font-size: .7rem; color: var(--text-muted); }
.gx-axis i { flex: 1; height: 1px; background: var(--grid-line); }

.gx-grid { display: grid; gap: 6px; }
.gx-cell {
  grid-column: var(--gc); grid-row: var(--gr);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 10px; text-align: left;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-card); color: inherit; font: inherit; cursor: pointer;
  transition: var(--transition);
}
.gx-cell b { font-family: var(--font-serif); font-size: .86rem; font-weight: 700; color: var(--text-primary); }
.gx-cell span { font-size: .68rem; color: var(--text-muted); }
.gx-cell:hover { border-color: var(--border-hover); background: var(--bg-card-hover); transform: translateY(-1px); }
.gx-cell:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* ---- ② 九边防线链 ---- */
.gx-chain { padding: 0 20px; }

/* 衔接刻度：n 段共 n+1 个端点，绝对定位在段边界上，故段间不留 gap（用边框分隔） */
.gx-ticks { position: relative; height: 26px; }
.gx-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: .7rem; color: var(--text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gx-tick.link {
  padding: 0; border: 0; border-bottom: 1px dashed currentColor; background: none;
  font: inherit; font-size: .7rem; color: var(--accent-primary); cursor: pointer;
}
.gx-tick.link:hover { color: var(--border-hover); }
.gx-tick.link:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 3px; }

.gx-bar { display: flex; --n: 8; }
.gx-seg {
  --seg: var(--border-hover);
  /* 每段固定占 100%/n，与刻度行的百分比定位用同一套坐标，
     否则 flex 的取整会让第 7 个刻度偏出 2px（实测过） */
  flex: 0 0 calc(100% / var(--n)); min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px 8px;
  border: 0; border-right: 2px solid var(--bg-primary);
  background: var(--bg-tertiary); color: var(--text-primary);
  font: inherit; cursor: pointer; transition: var(--transition);
  box-shadow: inset 0 3px 0 0 var(--seg);
}
.gx-seg:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.gx-seg:last-child { border-right: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.gx-seg b { font-family: var(--font-serif); font-size: .84rem; font-weight: 700; white-space: nowrap; }
.gx-seg-s { display: none; }
.gx-seg:hover { filter: brightness(1.12); }
.gx-seg:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
/* 只给史实上有明确特色的四镇着色（见 data-geo.js 的 tone 字段），其余留素色 */
.gx-seg.t-far { background: rgba(167, 139, 250, .16); }
.gx-seg.t-capital { background: rgba(251, 191, 36, .16); }
.gx-seg.t-hot { background: rgba(251, 113, 133, .16); }
[data-theme="light"] .gx-seg.t-far { background: rgba(139, 92, 246, .12); }
[data-theme="light"] .gx-seg.t-capital { background: rgba(217, 119, 6, .14); }
[data-theme="light"] .gx-seg.t-hot { background: rgba(225, 29, 72, .11); }

/* 链下的两个注记：京师（在宣府、蓟州之间）与固原镇（内线策应） */
.gx-pins { position: relative; height: 32px; margin-top: 4px; }
.gx-pin {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: .7rem; white-space: nowrap; color: var(--text-muted);
}
.gx-pin.link {
  padding: 1px 9px; border: 1px solid var(--border-color); border-radius: var(--radius-full);
  background: var(--bg-card); color: var(--text-secondary);
  font: inherit; font-size: .7rem; cursor: pointer;
}
.gx-pin.link:hover { border-color: var(--border-hover); color: var(--text-primary); }
.gx-pin.link:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.gx-pin::before {
  content: ""; position: absolute; left: 50%; top: -8px; width: 0; height: 8px;
  border-left: 1px dashed var(--border-hover);
}

.gx-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 0; }
.gx-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--text-muted); }
.gx-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

/* 窄屏：方位格只留政区名（6 列 × 5 行仍在，相对位置不丢）；
   防线链改成自上而下的竖列，每段自带两端的关隘，刻度行就不必再显示 */
@media (max-width: 760px) {
  .gx-cell { padding: 6px 3px; align-items: center; }
  .gx-cell b { font-size: .72rem; }
  .gx-cell span { display: none; }

  .gx-chain { padding: 0; }
  .gx-chain::before {
    content: "↓ 自西向东"; display: block; margin-bottom: 6px;
    font-size: .7rem; color: var(--text-muted);
  }
  .gx-ticks { display: none; }
  .gx-bar { flex-direction: column; gap: 3px; }
  .gx-seg {
    /* 竖排时 flex-basis 变成高度，100%/n 就错了，必须复位 */
    flex: 0 0 auto;
    align-items: flex-start; gap: 1px; padding: 8px 12px;
    border-right: 0; border-radius: var(--radius-sm);
    box-shadow: inset 3px 0 0 0 var(--seg);
  }
  .gx-seg:first-child, .gx-seg:last-child { border-radius: var(--radius-sm); }
  .gx-seg b { font-size: .9rem; }
  .gx-seg-s { display: block; font-size: .7rem; color: var(--text-muted); }

  .gx-pins { position: static; height: auto; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
  .gx-pin { position: static; transform: none; }
  .gx-pin::before { display: none; }
  .gx-pin.link { align-self: flex-start; }
}

/* 打印：示意图无交互，去掉位移与滤镜即可，图形本身保留 */
@media print {
  .gx-seg, .gx-cell, .gx-pin.link { box-shadow: none; transform: none; filter: none; }
  .gx-tick.link { color: var(--text-secondary); border-bottom: 0; }
}

/* ==========================================================================
   V12 精修层 · 年号栏「这一年」年份横切（整块可单独回滚）
   配色全部走主题变量，深浅两套自动成立；只用已有类名（.pill/.card）打底。
   ========================================================================== */
.gy { margin-top: 20px; border-top: 1px solid var(--border-color); padding-top: 18px; }
.gy[hidden] { display: none; }

.gy-head { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: baseline; justify-content: space-between; }
.gy-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gy-title b { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0.04em; }
.gy-gz { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; color: var(--accent-primary); }
.gy-addr {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted);
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: var(--radius-full); padding: 2px 9px;
}
.gy-nav { display: flex; gap: 6px; }
.gy-nav .pill[disabled] { opacity: 0.45; cursor: not-allowed; }
.gy-nav .pill[disabled]:hover { border-color: var(--border-color); color: var(--text-secondary); }

.gy-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.gy-sec {
  border: 1px solid var(--border-color); background: var(--bg-secondary);
  border-radius: var(--radius-md); padding: 12px 14px; min-width: 0;
}
.gy-k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 9px; }
.gy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.gy-li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gy-link { color: var(--accent-primary); text-decoration: none; font-size: 0.9rem; line-height: 1.5; border-bottom: 1px solid transparent; }
.gy-link:hover, .gy-link:focus-visible { border-bottom-color: currentColor; }
.gy-plain { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
.gy-sub { font-size: 0.74rem; color: var(--text-muted); line-height: 1.6; }
.gy-sub .gy-link { font-size: 0.74rem; }
.gy-mark {
  font-style: normal; margin-left: 6px; font-size: 0.66rem;
  border: 1px solid var(--border-color); border-radius: var(--radius-full);
  padding: 0 6px; color: var(--text-muted); white-space: nowrap;
}
.gy-none { margin: 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.75; }
.gy-foot { margin: 14px 0 0; font-size: 0.74rem; color: var(--text-muted); line-height: 1.85; }
.gy-foot b { font-family: var(--font-mono); color: var(--text-secondary); }

@media (max-width: 900px) { .gy-cols { grid-template-columns: 1fr; } }
@media (max-width: 420px) {
  .gy-head { flex-direction: column; align-items: flex-start; }
  .gy-title b { font-size: 1.3rem; }
  .gy-cols { gap: 10px; }
}

/* 打印：横切结果本身就是可读的文本块，去掉底色与按钮即可 */
@media print {
  .gy-nav { display: none; }
  .gy-sec { background: transparent; }
  .gy-foot { display: none; }
}