/* 中国历史图谱 · 交互层样式
   原则：大字体、圆角、高对比、暖色，读者看得懂、点得动。 */

:root {
  --bg: #fdf6e9;
  --card: #ffffff;
  --ink: #3a2e1f;
  --muted: #8a7a5c;
  --primary: #c0392b;
  --accent: #247bc1;
  --gold: #f0c75e;
  --border: #eadfc8;
  --radius: 16px;
  /* 右侧竖排胶囊占位：19px 字 + 3px 字距 × 4 字 + 内边距 52 + 边框 3 ≈ 143px */
  --rail-w: 143px;
  --rail-gap: 12px;
  /* 左侧模块栏：展开/收缩两态宽度 */
  --sidebar-w: 104px;
  --sidebar-w-collapsed: 64px;
  /* 正文限宽：与典籍长河 web/guoxue/style.css 的 #app 完全一致，两模块共用 */
  --content-max: 1080px;
  /* 胶囊相对「可用区中心」的偏移。典籍长河在 iframe 内用的是 calc(50% - 680px)，
     这里可用区 = 视口 − 侧栏，故换成同样的写法（两模块实测间隙均为 14px）。 */
  --rail-offset: 680px;
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background-color: #fdf6e9;
  /* 宣纸纤维底纹（极淡噪点，平铺） */
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-image: var(--paper-noise);
  background-repeat: repeat;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  transition: background-color 1.2s ease;
}

/* 朝代换肤：统一米黄底 + 该朝代表性纹样（按出土文物形状重画的极淡水印）+ 宣纸噪点 */
/* 默认（全部）：云水纹，极淡 */
body:not([data-era]) {
  background-color: #fdf6e9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%238a7a5c' stroke-width='0.9' opacity='0.3'%3E%3Cpath d='M20 30 Q35 20 50 30 T80 30'/%3E%3Cpath d='M10 60 Q25 50 40 60 T70 60'/%3E%3Ccircle cx='35' cy='35' r='3'/%3E%3Ccircle cx='65' cy='65' r='3'/%3E%3C/g%3E%3C/svg%3E"), var(--paper-noise);
}
/* 隋·忍冬卷草纹：敦煌壁画/隋瓷，对生叶瓣外翻卷 */
body[data-era="sui"] {
  background-color: #fdf6e9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%238a7a5c' stroke-width='0.9' opacity='0.22'%3E%3Cpath d='M60 20 Q50 40 60 60 Q70 80 60 100'/%3E%3Cpath d='M60 20 Q70 40 60 60 Q50 80 60 100'/%3E%3Cellipse cx='60' cy='60' rx='14' ry='6'/%3E%3Cellipse cx='42' cy='40' rx='5' ry='10' transform='rotate(-30 42 40)'/%3E%3Cellipse cx='78' cy='40' rx='5' ry='10' transform='rotate(30 78 40)'/%3E%3C/g%3E%3C/svg%3E"), var(--paper-noise);
}
/* 唐·宝相花：阿斯塔那墓出土锦，多层瓣放射+卷草底 */
body[data-era="tang"] {
  background-color: #fdf6e9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='%238a7a5c' stroke-width='0.9' opacity='0.22'%3E%3Ccircle cx='65' cy='65' r='8'/%3E%3Cpath d='M65 30 Q55 50 65 65 Q75 50 65 30'/%3E%3Cpath d='M65 100 Q55 80 65 65 Q75 80 65 100'/%3E%3Cpath d='M30 65 Q50 55 65 65 Q50 75 30 65'/%3E%3Cpath d='M100 65 Q80 55 65 65 Q80 75 100 65'/%3E%3Cpath d='M40 40 Q50 55 65 65 Q55 50 40 40'/%3E%3Cpath d='M90 90 Q80 75 65 65 Q75 80 90 90'/%3E%3Cpath d='M90 40 Q75 50 65 65 Q80 55 90 40'/%3E%3Cpath d='M40 90 Q55 80 65 65 Q50 75 40 90'/%3E%3Ccircle cx='65' cy='65' r='32' stroke-dasharray='2 4'/%3E%3C/g%3E%3C/svg%3E"), var(--paper-noise);
}
/* 五代·卷草流云 */
body[data-era="wudai"] {
  background-color: #fdf6e9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80' viewBox='0 0 110 80'%3E%3Cg fill='none' stroke='%238a7a5c' stroke-width='0.9' opacity='0.22'%3E%3Cpath d='M10 40 Q25 20 40 40 T70 40 T100 40'/%3E%3Ccircle cx='40' cy='40' r='5'/%3E%3Ccircle cx='70' cy='40' r='4'/%3E%3Cpath d='M20 60 Q35 50 50 60'/%3E%3C/g%3E%3C/svg%3E"), var(--paper-noise);
}
/* 宋·方胜纹：宋锦连环菱形 */
body[data-era="song"] {
  background-color: #fdf6e9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%238a7a5c' stroke-width='0.9' opacity='0.22'%3E%3Crect x='18' y='18' width='34' height='34' transform='rotate(45 35 35)'/%3E%3Crect x='48' y='48' width='34' height='34' transform='rotate(45 65 65)'/%3E%3Ccircle cx='35' cy='35' r='4'/%3E%3Ccircle cx='65' cy='65' r='4'/%3E%3C/g%3E%3C/svg%3E"), var(--paper-noise);
}
/* 元·满池娇：元青花盘莲荷+水草 */
body[data-era="yuan"] {
  background-color: #fdf6e9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%238a7a5c' stroke-width='0.9' opacity='0.22'%3E%3Cellipse cx='40' cy='45' rx='12' ry='8'/%3E%3Cpath d='M40 30 L40 45 M32 35 L40 42 M48 35 L40 42'/%3E%3Cellipse cx='80' cy='80' rx='14' ry='9'/%3E%3Cpath d='M80 68 L80 80 M72 72 L80 78 M88 72 L80 78'/%3E%3Cpath d='M60 20 Q58 35 62 50'/%3E%3Cpath d='M20 80 Q35 75 50 82'/%3E%3C/g%3E%3C/svg%3E"), var(--paper-noise);
}
/* 明·缠枝莲：卷枝串联花朵 */
body[data-era="ming"] {
  background-color: #fdf6e9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='%238a7a5c' stroke-width='0.9' opacity='0.2'%3E%3Ccircle cx='35' cy='35' r='10'/%3E%3Cpath d='M35 35 Q65 35 65 65 Q65 95 95 95'/%3E%3Ccircle cx='65' cy='65' r='6'/%3E%3Ccircle cx='95' cy='95' r='10'/%3E%3Cpath d='M35 35 Q20 55 35 75 Q50 95 65 95'/%3E%3C/g%3E%3C/svg%3E"), var(--paper-noise);
}
/* 清·团寿纹：圆形寿字骨架 */
body[data-era="qing"] {
  background-color: #fdf6e9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cg fill='none' stroke='%238a7a5c' stroke-width='0.9' opacity='0.22'%3E%3Ccircle cx='55' cy='55' r='28'/%3E%3Cpath d='M55 35 L55 75 M35 55 L75 55'/%3E%3Cpath d='M42 42 L68 68 M68 42 L42 68'/%3E%3Ccircle cx='55' cy='55' r='6'/%3E%3C/g%3E%3C/svg%3E"), var(--paper-noise);
}

/* 其他三大板块专属背板纹样（统一米黄底，与主站同源） */
/* 思想源流：汉画像砖卷云纹（S形螺旋云，张掖汉砖实物） */
body[data-module="guoxue"] {
  background-color: #fdf6e9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='100' viewBox='0 0 130 100'%3E%3Cg fill='none' stroke='%238a7a5c' stroke-width='0.9' opacity='0.2'%3E%3Cpath d='M15 50 Q35 20 55 50 T95 50 T125 50'/%3E%3Ccircle cx='35' cy='50' r='6'/%3E%3Ccircle cx='75' cy='50' r='6'/%3E%3Cpath d='M15 50 Q10 65 20 75'/%3E%3C/g%3E%3C/svg%3E"), var(--paper-noise);
}
/* 诗词鉴赏：宋画梅枝+月轮（疏影横斜，宋元水墨小品常见） */
body[data-module="shici"] {
  background-color: #fdf6e9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%238a7a5c' stroke-width='0.9' opacity='0.2'%3E%3Ccircle cx='115' cy='35' r='20'/%3E%3Cpath d='M25 130 Q55 90 80 65 Q95 50 105 35'/%3E%3Ccircle cx='50' cy='100' r='5'/%3E%3Ccircle cx='72' cy='75' r='4'/%3E%3Ccircle cx='88' cy='55' r='4'/%3E%3C/g%3E%3C/svg%3E"), var(--paper-noise);
}
/* 格物致知：宋《宣和博古图》鼎纹（双耳三足青铜鼎线描） */
body[data-module="gewu"] {
  background-color: #fdf6e9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cg fill='none' stroke='%238a7a5c' stroke-width='0.9' opacity='0.2'%3E%3Cpath d='M35 35 L35 25 M75 35 L75 25'/%3E%3Cpath d='M30 35 L30 55 Q30 65 55 65 Q80 65 80 55 L80 35'/%3E%3Cline x1='30' y1='48' x2='80' y2='48'/%3E%3Cpath d='M40 65 L38 80 M55 65 L55 82 M70 65 L72 80'/%3E%3C/g%3E%3C/svg%3E"), var(--paper-noise);
}

/* 动态墨雾：两团极淡墨色缓慢漂移，浮于底纹之上、内容之下 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(90, 110, 130, 0.10), transparent 70%),
    radial-gradient(34% 28% at 82% 78%, rgba(150, 120, 80, 0.09), transparent 70%);
  animation: mist-drift 46s ease-in-out infinite alternate;
}
@keyframes mist-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .8; }
  to   { transform: translate3d(2%, 2%, 0) scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* 外层 #app 只负责承载侧栏与两个模块区，不限宽。 */
#app { max-width: none; margin: 0; padding: 0; }

/* 模块正文容器：与典籍长河 web/guoxue/style.css 的 #app 逐值相同（限宽 1080 居中 + 同内边距）。
   两模块共用同一套数学，正文宽度与位置必然一致。 */
.module-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 12px 16px 40px;
}
/* 可用区（视口 − 侧栏）放不下「正文 + 胶囊」时，给正文右侧留出胶囊沟槽。
   断点 1467 = 侧栏 104 + 1364（1080 正文 − 左内边距 16 + 胶囊 142 + 右侧余量 16 + 沟槽 170 − 60 余量）。 */
@media (max-width: 1467px) {
  .module-inner { padding-right: calc(16px + var(--rail-w) + var(--rail-gap)); }
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 4px 6px 10px;
}
/* 右上角 LLM 配置（已迁移到历史侦探页卡片，保留 btn 通用样式备用） */
.llm-btn { margin-left: 6px; }
/* AI 回答/点评展示 */
.llm-answer { white-space: pre-wrap; line-height: 1.7; }
.create-actions { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.create-ai-result { margin-top: 10px; }

/* ---- 历史侦探页 · AI老师配置（可折叠 + 模型 combobox） ---- */
.detective-ai { margin-top: 16px; }
.detective-ai-card {
  background: var(--card); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.ai-config-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.ai-field {
  display: block; font-size: 14px; font-weight: 600; color: #5c5140;
  flex: 1 1 240px; margin-bottom: 8px;
}
.ai-field input {
  width: 100%; margin-top: 5px; border: 2px solid var(--border);
  border-radius: 8px; padding: 9px 11px; font-size: 15px; font-family: inherit;
  background: #fff; font-weight: 400; box-sizing: border-box;
}
.ai-field-model { flex: 2 1 340px; }
.ai-field-btns { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.ai-save-msg { font-size: 13px; }

/* 折叠面板：标题行 + chevron */
.ai-config-card { padding: 0; overflow: hidden; }
.ai-config-toggle {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 15px 20px; background: none; border: none; cursor: pointer;
  text-align: left; font-family: inherit;
}
.ai-config-toggle:hover { background: #fbf3e0; }
.ai-config-toggle-title { font-size: 18px; font-weight: 800; color: #8a4b1f; }
.ai-config-toggle-sub { font-size: 13px; color: var(--muted); flex: 1; }
.ai-config-chevron { font-size: 18px; color: #8a4b1f; transition: transform .25s ease; }
.ai-config-toggle.open .ai-config-chevron { transform: rotate(180deg); }
.ai-config-body { padding: 6px 20px 18px; }
.ai-config-body.collapsed { display: none; }

/* 模型 combobox：输入框 + 拉取按钮 + 下拉按钮 + 浮层菜单 */
.model-combo { position: relative; margin-top: 5px; display: flex; gap: 6px; align-items: stretch; }
.model-combo > input {
  flex: 1; min-width: 0; margin-top: 0; border: 2px solid var(--border);
  border-radius: 8px; padding: 9px 11px; font-size: 15px; font-family: inherit; background: #fff;
}
.ai-config-card input::placeholder { color: #c9b092; font-size: 12px; opacity: 1; letter-spacing: .2px; }
.model-icon-btn {
  flex: 0 0 auto; width: 42px; border: 2px solid var(--border); background: #fbf3e0;
  border-radius: 8px; font-size: 16px; cursor: pointer; color: #8a4b1f;
  display: flex; align-items: center; justify-content: center;
}
.model-icon-btn:hover { background: #f5e6c4; }
.model-icon-btn.spinning { animation: dsh-spin 0.9s linear infinite; }
@keyframes dsh-spin { to { transform: rotate(360deg); } }
.model-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 2px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.15); overflow: hidden;
}
.model-search {
  width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid var(--border);
  padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none;
}
.model-options { max-height: 240px; overflow-y: auto; }
.model-option {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 9px 12px; font-size: 14px; font-family: inherit; cursor: pointer; color: #333;
}
.model-option:hover { background: #fbf3e0; }
.model-empty { padding: 12px; color: var(--muted); font-size: 13px; }

/* ---- 历史侦探页 · AI 史老师问答面板 ---- */
.detective-ask { margin-bottom: 16px; }
.detective-ask-card {
  background: var(--card); border: 2px solid var(--gold);
  border-radius: var(--radius); padding: 16px 20px;
}
.ask-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ask-head-title { font-size: 18px; font-weight: 800; color: #8a4b1f; }
.ask-head-sub { font-size: 13px; color: var(--muted); }
.ask-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ask-chip {
  border: 1.5px solid #e0b96a; background: #fbf3e0; color: #8a4b1f;
  border-radius: 999px; padding: 7px 14px; font-size: 14px; font-family: inherit; cursor: pointer;
}
.ask-chip:hover { background: #f5e6c4; }
.ask-result .ask-answer-q { font-weight: 700; margin-bottom: 6px; }
.ask-result .llm-answer { line-height: 1.75; }
.ask-loading { color: #8a7a5c; }
.ask-error { line-height: 1.7; }

/* 侦探页「上一案 / 下一案」导航 */
.detective-nav { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.detective-count { font-size: 14px; color: var(--muted); font-weight: 600; }
.brand { display: none; }
/* 右侧导航胶囊：碑刻质感——墨底鎏金边，激活为朱印红（独立浮层，不占内容编排空间） */
.tabs {
  display: flex; flex-direction: column; gap: 10px;
  position: fixed; top: 50%; transform: translateY(-50%);
  /* 与 .module-inner 同一套数学。典籍长河在 iframe 内用的是 calc(50% - 680px)，
     它的 50% 是 iframe 宽（= 视口 − 侧栏）的一半；这里可用区 = 100vw − 侧栏，
     故减掉侧栏宽度，得到与之完全等价的结果（实测两模块间隙均为 14px）。 */
  right: max(16px, calc((100vw - var(--sidebar-w)) / 2 - var(--rail-offset)));
  z-index: 50;
}
body.sidebar-collapsed .tabs {
  right: max(16px, calc((100vw - var(--sidebar-w-collapsed)) / 2 - var(--rail-offset)));
}
/* 窄窗口：胶囊贴窗口右缘，正文由 .module-inner 的 padding-right 让位 */
@media (max-width: 1467px) {
  .tabs,
  body.sidebar-collapsed .tabs { right: 16px; }
}
.tabs .tab {
  position: relative;
  white-space: nowrap;
  font-family: inherit;
  font-size: 19px; font-weight: 700; letter-spacing: 3px;
  padding: 15px 24px 15px 28px;
  color: #6b5836;
  background:
    linear-gradient(180deg, #fbf3df 0%, #f3e6c8 100%);
  border: 1.5px solid #b99a55;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.75),
    inset 0 0 14px rgba(185,154,85,.28),
    0 3px 8px rgba(90,66,30,.16);
  transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* 未选中：淡墨字，悬停时鎏金提亮 */
.tabs .tab:hover {
  color: #8a1c1c;
  background: linear-gradient(180deg, #fdf8ea 0%, #f6ead0 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.85),
    inset 0 0 16px rgba(185,154,85,.36),
    0 5px 12px rgba(90,66,30,.22);
  transform: translateY(-1px);
}
/* 选中：朱印红（印章感）＋ 顶部鎏金高光 */
.tabs .tab.active {
  color: #fff5e8;
  background:
    linear-gradient(180deg, #a8352a 0%, #8c2318 100%);
  border-color: #6d1a11;
  box-shadow:
    inset 0 1px 0 rgba(255,214,150,.55),
    inset 0 -2px 6px rgba(0,0,0,.28),
    0 5px 14px rgba(120,32,20,.32);
  transform: none;
}
/* 左侧竖线：未选中为鎏金细线，选中为亮金（像简牍编联） */
.tabs .tab::before {
  content: ""; position: absolute; left: 9px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 26px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(185,154,85,.35), #b99a55);
  transition: background .2s ease, box-shadow .2s ease;
}
.tabs .tab.active::before {
  background: linear-gradient(180deg, #f7d774, #d9a441);
  box-shadow: 0 0 6px rgba(247,215,116,.7);
}

.dynasty-switch {
  display: flex; gap: 0; padding: 0;
  background: #efe6d0; border-radius: 6px;
  border: 1px solid #c9b88a;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.dynasty-btn {
  flex: 1 1 0;
  border: none; background: transparent; cursor: pointer;
  font-size: clamp(12px, 1.1vw, 16px); font-weight: 700; color: #6b5432;
  padding: 8px 4px; border-radius: 0;
  transition: all .2s ease;
  border-right: 1px solid #d9c9a3;
  text-align: center;
  white-space: nowrap;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
}
.dynasty-btn[data-d="all"] { flex: 0.6 1 0; }
/* 年号行 */
.dynasty-btn .dyn-top { display: block; }
.dynasty-btn .dyn-year {
  font-size: 12px; font-weight: 700; opacity: .7; margin-left: 3px;
}
/* 帝数行：仅当前选中朝代显示，居中年号下方 */
.dynasty-btn .dyn-sub {
  display: block; height: 15px; line-height: 15px;
  font-size: 12px; font-weight: 600; color: #8a6d3b; opacity: .85;
}
.dynasty-btn.active .dyn-sub { color: #f0c75e; opacity: 1; }
.dynasty-btn:last-child { border-right: none; }
.dynasty-btn:hover { background: #e5d7b8; color: #3d2f1a; }
.dynasty-btn.active {
  background: #2c3e50; color: #f5e6c8;
  box-shadow: inset 0 -3px 0 #c9a96a;
}
.tab {
  border: 2px solid var(--border); background: var(--card);
  color: var(--ink); font-size: 16px; font-weight: 600;
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  transition: all .15s;
}
.tab:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.08); }
.tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---- 「支持」按钮与弹出卡片 ----
   入口统一放在左侧模块栏底部（三个板块共用），外观与 hover 交互保持原样。
   注意：侧栏是 position:fixed 且 z-index:1000，子元素用 fixed 会相对侧栏自身定位，
   正好就是我们要的「贴在侧栏下方」；卡片仍用 fixed 相对视口，因此要在 x 轴偏移到侧栏右侧之外。 */
.support-btn {
  /* 不再是右上角固定：改为侧栏内的常规流，靠 .mega-support 贴到底部 */
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--gold); background: #fff8e6;
  color: #8a6d2f; font-size: 15px; font-weight: 700;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  transition: all .15s;
}
.support-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(201,169,106,.35); }
.support-icon { font-size: 16px; color: #d4a017; }

/* 侧栏底部的入口容器：固定占侧栏宽，贴底居中 */
.mega-support {
  margin-top: auto; padding: 6px 8px 0;
  display: flex; flex-direction: column; align-items: center;
}
.mega-support:last-child { padding-bottom: 10px; }
/* 侧栏收缩态：按钮变窄只留图标，避免挤压 */
body.sidebar-collapsed .mega-support { padding: 6px 0 0; align-self: stretch; width: 100%; }
body.sidebar-collapsed .mega-support:last-child { padding-bottom: 8px; }
body.sidebar-collapsed .support-btn > span:not(.support-icon) { display: none; }

/* 两个胶囊（AI 配置 / 支持）：同宽、同高、圆角矩形、间距 5px。
   侧栏只有 104px 宽，固定宽度保证两枚胶囊视觉对齐，不受文字长度影响。 */
.mega-support .support-btn {
  white-space: nowrap;
  font-size: 13px;
  width: 88px;
  height: 32px;
  padding: 0 6px;
  justify-content: center;
  border-radius: 6px;          /* 圆角矩形，非胶囊 */
  letter-spacing: -0.3px;
}
.mega-support .support-icon { font-size: 14px; }
.mega-support + .mega-support { margin-top: 5px; padding-top: 0; }
body.sidebar-collapsed .mega-support + .mega-support { margin-top: 5px; padding-top: 0; }
body.sidebar-collapsed .mega-support .support-btn { width: 100%; height: 40px; padding: 0; }

/* 侧栏胶囊的弹出卡片：从按钮右侧展开，落在侧栏右缘之外，不遮挡正文。
   「支持」卡片内容短，贴视口底部；「AI 配置」有表单，改为紧贴按钮上方展开，
   避免出现在页面最底部而与按钮脱节。 */
.support-pop {
  position: fixed; z-index: 999;
  left: calc(var(--sidebar-w) + 12px); bottom: 12px;
  width: 320px; background: #2b2620; color: #f0e4cc;
  border: 1px solid #5a4d38; border-radius: 14px;
  padding: 18px 20px 20px;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  animation: support-pop-in .18s ease-out;
}
body.sidebar-collapsed .support-pop { left: calc(var(--sidebar-w-collapsed) + 12px); }
/* AI 配置与模块管理的卡片：以各自的按钮容器为锚点定位。
   不用 bottom 相对视口的固定值——侧栏里胶囊一多一少，那个值就会漂移
   （模块管理曾因写死 bottom:186px 而与按钮错位）。
   .mega-support 设 position:relative 后，卡片 absolute 相对本容器定位，
   永远紧贴自己的按钮；容器在侧栏内的实际位置由布局决定，不受影响。 */
.mega-support { position: relative; }
#ai-sidebar-pop,
#modules-pop {
  position: absolute;
  left: calc(100% + 12px);    /* 按钮右侧，落在侧栏之外 */
  bottom: calc(100% + 10px);  /* 贴按钮上沿，向上展开 */
  right: auto; top: auto;
  margin: 0;
}
#ai-sidebar-pop {
  z-index: 999;
  width: 420px;
  max-height: min(560px, calc(100vh - 120px));
  overflow-y: auto;
}
#modules-pop {
  /* 层级高于 AI 卡片：两者同时打开时，「模块管理」压在上层，不会被遮住按钮 */
  z-index: 1002;
  width: 300px;
}
body.sidebar-collapsed #ai-sidebar-pop,
body.sidebar-collapsed #modules-pop { left: calc(100% + 12px); }

/* 卡片风格与侧栏暖色体系一致，不再沿用侦探页的深色卡片 */
#ai-sidebar-pop, #modules-pop {
  background: #fdf6e9; color: var(--ink);
  border: 1px solid #c9b88a; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(90,66,30,.22);
  padding: 14px 16px 16px;
}
#ai-sidebar-pop .support-pop-head { color: #8a4b1f; font-size: 16px; margin-bottom: 8px; }
#ai-sidebar-pop .support-pop-star { font-size: 17px; }
#ai-sidebar-pop .support-pop-close { color: #8a7a5c; }
#ai-sidebar-pop .support-pop-close:hover { color: #8a1c1c; }
#ai-sidebar-pop .support-pop-text {
  margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: #5c5140;
  background: #fbf3e0; border-radius: 8px; padding: 8px 10px;
}
#ai-sidebar-pop .detective-ai-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px;
}
#ai-sidebar-pop .ai-field { color: #5a4a2a; font-size: 13px; }
#ai-sidebar-pop .ai-field input {
  border: 1.5px solid var(--border); border-radius: 8px; background: #fffdf7;
  padding: 7px 10px; font-size: 14px;
}
#ai-sidebar-pop .ai-field input:focus { outline: none; border-color: var(--gold); }
#ai-sidebar-pop .model-icon-btn { background: #fbf3e0; border-color: var(--border); color: #8a4b1f; }
#ai-sidebar-pop .model-icon-btn:hover { background: #f5e6c4; }
#ai-sidebar-pop .model-menu { background: #fffdf7; border-color: var(--border); }
#ai-sidebar-pop .model-search { border-bottom-color: var(--border); }
#ai-sidebar-pop .model-option:hover { background: #fbf3e0; }
#ai-sidebar-pop .create-save { background: var(--primary); }
#ai-sidebar-pop .create-save:hover { background: #a82828; }
#ai-sidebar-pop .ai-save-msg { color: #8a7a5c; }

/* 模块管理的定位与配色已在上面与 AI 卡片合并声明（均以各自按钮容器为锚点） */
#modules-pop .support-pop-head { color: #8a4b1f; font-size: 16px; margin-bottom: 8px; }
#modules-pop .support-pop-star { font-size: 17px; }
#modules-pop .support-pop-close { color: #8a7a5c; }
#modules-pop .support-pop-close:hover { color: #8a1c1c; }
#modules-pop .support-pop-text {
  margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: #5c5140;
  background: #fbf3e0; border-radius: 8px; padding: 8px 10px;
}
.modules-list { display: flex; flex-direction: column; gap: 6px; }
.modules-item {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.modules-item:hover { border-color: var(--gold); background: #fffdf7; }
.modules-item input { flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer; }
.modules-item-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.modules-item-sub { font-size: 12px; color: var(--muted); margin-left: auto; }
.modules-reset {
  margin-top: 12px; width: 100%;
  background: transparent; color: #8a6d2f;
  border: 1.5px solid #c9b88a; border-radius: 8px;
  font-size: 13px; font-weight: 700; padding: 8px 0;
  font-family: inherit; cursor: pointer; transition: all .15s;
}
.modules-reset:hover { background: #fbf3e0; border-color: var(--gold); color: #8a4b1f; }
/* 卡片顶部用三角指向左侧按钮，取代原来的向下展开 */
@keyframes support-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.support-pop-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; margin-bottom: 10px;
}
.support-pop-star { font-size: 18px; }
.support-pop-close {
  margin-left: auto; background: none; border: none;
  color: #b0a48a; font-size: 14px; cursor: pointer; padding: 4px;
}
.support-pop-close:hover { color: #fff; }
.support-pop-text {
  margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: #d8ccb2;
}
.support-pop-gh {
  display: block; text-align: center; text-decoration: none;
  border: 1.5px solid #c9a96a; border-radius: 999px;
  color: #f0d98a; font-size: 15px; font-weight: 700;
  padding: 11px 0; transition: all .15s;
}
.support-pop-gh:hover { background: rgba(201,169,106,.18); border-color: #e8c86a; color: #ffe9a8; }

.page-title { font-size: 24px; margin: 18px 0 2px; text-align: center; }
.page-sub { color: var(--muted); margin: 2px 0 18px; font-size: 15px; text-align: center; }
.hidden { display: none !important; }

/* ---- 时间线 ---- */
.timeline-wrap {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 6px 0 6px;
}
.timeline-scroll {
  flex: 1; display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: #a8352a #f0e6d2;
  padding-bottom: 4px;
}
.timeline-scroll::-webkit-scrollbar { height: 6px; }
.timeline-scroll::-webkit-scrollbar-thumb { background: #a8352a; border-radius: 3px; }
.timeline-scroll::-webkit-scrollbar-track { background: #f0e6d2; }
.timeline-arrow { display: none; }
.emp-card {
  flex: 0 0 168px; scroll-snap-align: start;
  background: var(--card); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 14px 12px;
  cursor: pointer; text-align: center; position: relative;
  transition: transform .15s, box-shadow .15s;
}
.emp-card:not(:last-child)::after {
  content: "➜"; position: absolute; right: -9px; top: 50%;
  transform: translateY(-50%); color: var(--primary); font-size: 16px;
  font-weight: 700; z-index: 2; background: #fff;
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.emp-card:hover { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(0,0,0,.10); }
.emp-card.active { background: #c0392b; border-color: #c0392b; }
.emp-card.active .name, .emp-card.active .era, .emp-card.active .reign { color: #fff; }
.emp-card.active::after { background: #c0392b; color: #fff; }
.emp-portrait {
  width: 84px; height: 84px; margin: 0 auto 8px;
  border-radius: 50%; background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; user-select: none;
  object-fit: cover; /* 图片时圆形裁剪 */
}
/* 头像淡入：先出文字与金色圆占位，图片到了再柔和浮现，不抢文字 */
.emp-card img.emp-portrait, .detail-portrait { opacity: 0; transition: opacity .35s ease; }
.emp-card img.emp-portrait.loaded, .detail-portrait.loaded { opacity: 1; }
.emp-card .name { font-size: 18px; font-weight: 700; }
.emp-card .era { color: var(--muted); font-size: 14px; }
.emp-card .reign { color: var(--muted); font-size: 13px; }

/* ---- 皇帝详情 ---- */
.emperor-detail {
  background: var(--card); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 22px; margin-top: 6px;
}
.detail-head { display: flex; gap: 22px; align-items: flex-start; flex-wrap: nowrap; }
.detail-portrait {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--gold); display: flex; align-items: center; justify-content: center;
  font-size: 46px; flex: 0 0 auto;
  object-fit: cover; /* 图片时圆形裁剪 */
}
.detail-head .meta { flex: 1 1 auto; min-width: 0; }
.detail-head .meta h3 { margin: 0 0 6px; font-size: 26px; }
.detail-head .meta .intro { color: var(--ink); font-size: 16px; margin: 4px 0 8px; }
.detail-head .meta .tags { color: var(--muted); font-size: 14px; margin-top: 6px; line-height: 1.8; word-break: break-word; }
/* 年号/在位/关键人物的值：加粗变棕，与字段名的灰色区分开 */
.detail-head .meta .tags .tag-val { color: #8a4b1f; font-weight: 700; }
.entry-grid { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.entry-chip {
  border: none; border-radius: 999px; padding: 9px 18px;
  font-size: 15px; font-weight: 700; cursor: pointer; color: #fff;
  opacity: 1; transition: opacity .15s;
}
.entry-chip.dim { opacity: .45; }
.entry-chip.dim:hover { opacity: .7; }
.entry-chip.active { box-shadow: 0 0 0 3px rgba(192, 57, 43, .25); }
.chip-facts { background: var(--gold); color: var(--ink); }
.chip-open { background: var(--primary); }
.chip-make { background: var(--accent); }
.entry-block { margin-top: 6px; }

.detail-panel { border-top: 2px dashed var(--border); padding-top: 16px; margin-top: 6px; }
.detail-panel h4 { margin: 0 0 10px; font-size: 18px; }
/* ---- 生平时间线：与诗词鉴赏时间线样式统一 ---- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 4px; bottom: 4px;
  width: 3px; background: var(--gold); border-radius: 2px;
}
.tl-item { display: flex; gap: 6px; padding: 0 0 14px 34px; position: relative; align-items: baseline; }
.tl-item::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--primary); border: 3px solid var(--bg);
}
.tl-year {
  flex: 0 0 auto; font-weight: 800; color: var(--primary);
  font-size: 15px; white-space: nowrap; line-height: 1.4;
  min-width: 0; padding-right: 2px; text-align: right;
}
.tl-body { flex: 1 1 auto; min-width: 0; }
.tl-event { font-weight: 700; font-size: 16.5px; color: var(--ink); line-height: 1.5; }
.tl-note { color: #5c5140; font-size: 14.5px; line-height: 1.75; margin-top: 2px; }
.tl-works { font-size: 13px; color: #8a6d2f; margin-top: 3px; font-style: italic; }
.tl-item.tl-highlight {
  background: linear-gradient(90deg, rgba(212,175,55,.18), rgba(212,175,55,.03));
  border-radius: 6px;
  padding: 8px 10px 8px 34px;
  margin: 4px 0;
}
.tl-item.tl-highlight .tl-body { padding-left: 10px; }
.tl-item.tl-highlight .tl-event { color: var(--primary); }

.fact-list, .open-list, .make-list { padding-left: 20px; }
.fact-list li, .open-list li, .make-list li { margin-bottom: 10px; }
.open-list .q { font-weight: 700; }
.open-list .ctx { color: var(--muted); font-size: 14px; }
.viewpoints { margin-top: 6px; padding: 10px 12px; background: #fbf3e0; border-radius: 10px; font-size: 15px; }
.viewpoints p { margin: 4px 0; }

/* ---- 案件卡 ---- */
.case-tabs {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center;
  margin: 8px 0 20px; padding-bottom: 4px;
}
.case-tab {
  position: relative;
  border: 2.5px solid #b99a55;
  background: linear-gradient(180deg, #fbf3df 0%, #f3e6c8 100%);
  border-radius: 3px;
  padding: 9px 20px;
  font-size: 15px; font-weight: 700; letter-spacing: 2px;
  color: #6b5836;
  cursor: pointer; font-family: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 0 0 10px rgba(185,154,85,.22),
    0 2px 6px rgba(90,66,30,.14);
  transition: all .2s ease;
}
.case-tab:hover {
  color: #8a1c1c;
  background: linear-gradient(180deg, #fdf8ea 0%, #f6ead0 100%);
  border-color: #8a1c1c;
  transform: translateY(-1px);
}
.case-tab.active {
  color: #fff5e8;
  background: linear-gradient(180deg, #a82828 0%, #8a1c1c 100%);
  border-color: #d4a84a;
  box-shadow:
    inset 0 0 0 1px rgba(255,220,160,.35),
    inset 0 0 12px rgba(0,0,0,.18),
    0 3px 8px rgba(138,28,28,.3);
}
.case-tab-n {
  display: inline-block; margin-left: 6px;
  background: rgba(0, 0, 0, 0.12); border-radius: 3px;
  padding: 1px 8px; font-size: 14px; font-weight: 700; letter-spacing: 0;
}
.case-tab.active .case-tab-n { background: rgba(255, 255, 255, 0.22); }
.cases-list { display: flex; flex-direction: column; gap: 18px; }
.case-category { display: flex; flex-direction: column; gap: 14px; }
.case-cat-title {
  margin: 0 0 6px; font-size: 22px; color: var(--primary);
  border-left: 6px solid var(--gold); padding-left: 12px;
}
.case-cat-note { margin: -2px 0 12px 18px; color: var(--muted); font-size: 14px; }
.case-card {
  background: var(--card); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 18px 22px;
}
/* 案件卡头部：标题与年代居中 */
.case-head {
  display: flex; align-items: baseline; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.case-title { font-size: 21px; font-weight: 800; color: #8a4b1f; }
.case-date { font-size: 14px; color: var(--muted); }
.case-summary {
  margin: 8px 0 12px; padding: 10px 14px;
  background: #fbf3e0; border-radius: 10px; font-size: 15px;
}
/* 段落模块化：标题与内容圈在同一背景块内 */
.case-section {
  margin-top: 12px;
  background: #fbf6ea;
  border: 1px solid #ece0c6;
  border-left: 5px solid var(--gold);
  border-radius: 12px;
  padding: 12px 16px 14px;
}
.case-section > b {
  display: inline-block; color: #8a4b1f; font-size: 15px;
  background: #f3e2c0; border-radius: 8px; padding: 2px 12px; margin-bottom: 6px;
  font-weight: 800;
}
.case-section > p { margin: 4px 0 0; font-size: 15px; color: #4d4234; line-height: 1.75; }
/* 关键人物：2×2 网格排布（放在模块化段落内） */
.case-people {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-top: 6px;
}
@media (max-width: 640px) { .case-people { grid-template-columns: 1fr; } }
.case-person {
  background: #fff; border: 1px solid #ece0c6; border-radius: 10px;
  padding: 8px 12px; font-size: 15px;
  display: flex; flex-direction: column; gap: 3px;
}
.case-person-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.case-person-role {
  font-size: 12px; color: var(--accent);
  background: #eaf3fb; border-radius: 999px; padding: 1px 8px;
}
.case-person-note { color: #5c5140; font-size: 14px; }
.case-question { margin-top: 8px; }
.case-question .q {
  font-weight: 700; color: #8a4b1f; background: #f3e2c0;
  border-radius: 8px; padding: 8px 12px; margin-bottom: 6px;
}
.case-question .ctx { color: var(--muted); font-size: 14px; padding: 0 2px; }
.case-question .viewpoints {
  background: #fff; border: 1px solid #ece0c6; border-radius: 10px;
  padding: 8px 12px; margin-top: 6px;
}
.case-question .viewpoints p { margin: 3px 0; font-size: 14px; color: #4d4234; }
.case-src { margin-top: 14px; font-size: 12px; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 8px; }

/* ---- 路线详情 ---- */
.route-panel { margin: 10px 0 0; }
.route-detail {
  margin: 10px 0 0; padding: 14px 18px;
  background: var(--card); border: 2px solid var(--border);
  border-radius: var(--radius);
}
.route-detail-head {
  display: flex; align-items: baseline; gap: 10px;
  border-left: 5px solid; padding-left: 10px; margin-bottom: 8px;
}
.route-detail-name { font-size: 18px; font-weight: 800; color: #8a4b1f; }
.route-detail-year { font-size: 13px; color: var(--muted); }
.route-detail-desc { font-size: 15px; color: #4d4234; margin-bottom: 8px; }
.route-detail-path {
  font-size: 15px; background: #fbf3e0; border-radius: 10px;
  padding: 8px 12px; margin-bottom: 10px;
}
.route-detail-path b { color: var(--primary); }
.route-detail-stops { margin: 0; padding-left: 22px; font-size: 14px; color: #5c5140; }
.route-detail-stops li { margin-bottom: 6px; }
.route-detail-stops b { color: #3a2e1f; }

/* ---- 地图（Leaflet）---- */
.map-wrap {
  position: relative;
  background: #eaf0e4;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
#map-leaf {
  width: 100%;
  height: 540px;
  display: block;
}
.map-unavailable {
  padding: 80px 20px; text-align: center; color: var(--muted); font-size: 16px;
}
/* 底图瓦片加载失败提示（历史图层仍可用） */
.map-tile-warn {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  z-index: 450; max-width: 90%;
  background: rgba(255, 248, 236, 0.95); border: 2px solid var(--gold);
  border-radius: 10px; padding: 8px 14px; font-size: 13px; color: #8a4b1f;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}
/* 历史图层文字标签：浅色底板，避免被瓦片淹没 */
.map-label-inner {
  background: rgba(255, 252, 240, 0.8);
  border: 1px solid rgba(150, 120, 60, 0.3);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  color: #7a4a22;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* 行政区划区块名：弱化，不抢城市/邻国标签 */
.map-label-region .map-label-inner {
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 10px;
  font-weight: 600;
  color: rgba(90, 60, 20, 0.55);
}
/* 城市点：圆点 + 名字 */
.map-place-inner {
  display: flex; align-items: center; gap: 3px;
  background: rgba(255, 255, 255, 0.9);
  border: 1.2px solid;
  border-radius: 999px;
  padding: 0 6px 0 2px;
  font-size: 10px;
  font-weight: 700;
  color: #3a2e1f;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}
.map-place-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.map-place-modern { font-size: 9px; color: #8a7a5c; font-weight: 400; }
/* 事件点：古地名标记（⚑ 红色圆点 + 古地名 + 今地名） */
.map-event-inner {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid #c0392b;
  border-radius: 999px;
  padding: 1px 8px 1px 2px;
  font-size: 12px;
  font-weight: 700;
  color: #3a2e1f;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}
.map-event-icon {
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #c0392b; color: #fff; font-size: 10px;
  flex: 0 0 auto;
}
.map-event-name { font-weight: 700; }
.map-event-modern { font-size: 9px; color: #8a7a5c; font-weight: 400; }
/* 聚合角标：同地点多个事件的数量 */
.map-event-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #c0392b; color: #fff;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  margin-left: 2px;
}
/* 聚合弹窗：同地点事件列表 */
.popup-event-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.popup-event-row {
  text-align: left; border: 1.5px solid var(--border); background: #fff;
  border-radius: 10px; padding: 8px 12px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 2px; transition: all .12s;
}
.popup-event-row b { color: var(--primary); font-size: 14px; }
.popup-event-row .popup-event-summ { color: #5c5140; font-size: 12px; }
.popup-event-row:hover { border-color: var(--primary); background: #fdecea; }
/* 该朝事件汇总面板：古地名 chips */
.evt-summary-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.evt-summary-chip {
  border: 1.5px solid var(--border); background: #fff;
  border-radius: 999px; padding: 5px 12px;
  font-size: 13px; cursor: pointer; font-family: inherit; color: #3a2e1f;
  transition: all .12s;
}
.evt-summary-chip b { color: var(--primary); margin-right: 4px; }
.evt-summary-chip .evt-summary-name { color: var(--muted); font-size: 12px; margin-left: 4px; }
.evt-summary-chip:hover { border-color: var(--primary); background: #fdecea; transform: translateY(-1px); }
.evt-summary-chip.on { background: #c0392b; border-color: #c0392b; color: #fff; }
.evt-summary-chip.on b { color: #ffd9d9; }
.evt-summary-chip.on .evt-summary-name { color: #ffd9d9; }
/* 「展示更多 / 收起」：事件多时默认只显示前 12 条，其余折在这里
   （「全部」视图下七朝合计 141 条，全平铺会把地图挤出视口） */
.evt-summary-more { margin-top: 10px; text-align: center; }
.evt-more-btn {
  border: 1.5px dashed var(--border); background: transparent;
  border-radius: 999px; padding: 5px 16px;
  font-size: 13px; font-family: inherit; color: var(--primary);
  cursor: var(--cur-pointer); transition: all .12s;
}
.evt-more-btn:hover { border-style: solid; background: #fdf3e8; }
/* 城市/事件标记可点击（配合全局 --cur-pointer） */
.leaflet-marker-icon { cursor: var(--cur-pointer); }
/* Leaflet 默认控件配色与站点圆点跟随主题 */
.leaflet-container { font-family: inherit; }
.leaflet-popup-content { font-size: 14px; line-height: 1.6; color: #3a2e1f; }
.leaflet-popup-content h4 { margin: 0 0 6px; font-size: 16px; color: var(--primary); }
.leaflet-popup-content p { margin: 0; font-size: 14px; color: #5c5140; }
.leaflet-tooltip { font-size: 12px; color: #3a2e1f; }
/* 路线起/终点常显地名标签：白底圆角，字色与图例一致（起=绿，终=深红） */
.route-pt-tip {
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid #2e7d32;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #2e7d32;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.route-pt-tip::before { display: none; }
/* 终点标签在下（direction: bottom）→ 深红，与图例"路线终点"一致 */
.leaflet-tooltip-bottom.route-pt-tip {
  border-color: #a0251c;
  color: #a0251c;
}

.map-popup {
  position: absolute; top: 16px; left: 16px; z-index: 500;
  max-width: 300px; background: #fff; border: 2px solid var(--border);
  border-radius: 12px; padding: 14px 16px; box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.map-popup h4 { margin: 0 0 6px; font-size: 18px; color: var(--primary); }
.map-popup p { margin: 0; font-size: 15px; color: #5c5140; }
.map-popup .close { position: absolute; top: 6px; right: 10px; border: none; background: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.map-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; color: #5c5140; }
.map-legend-float {
  position: absolute; top: 12px; right: 12px; z-index: 800;
  background: rgba(255, 252, 240, 0.92);
  border: 1px solid rgba(150, 120, 60, 0.35);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 0;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item .note { color: var(--muted); }
/* 事件古地名图例：与地图上的事件胶囊同款（⚑ 红点 + 红边白底胶囊） */
.legend-item .event-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: #fff; border: 1.5px solid #c0392b;
  border-radius: 999px; padding: 0 6px 0 1px;
  font-size: 10px; font-weight: 700; color: #3a2e1f;
  line-height: 14px;
}
.legend-item .event-badge i {
  width: 10px; height: 10px; border-radius: 50%;
  background: #c0392b; display: inline-flex;
  align-items: center; justify-content: center;
  color: #fff; font-size: 7px; font-style: normal;
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.dot-capital { background: #c0392b; }
.dot-city { background: #247bc1; }
.dot-site { background: #f0a500; }
.dot-overseas { background: #8e44ad; }
.dot-event { background: #c0392b; }
.dot-route-start { background: #2e7d32; }
.dot-route-end { background: #a0251c; }

/* 事件点闪烁动画（点"该朝事件"时触发） */
@keyframes map-flash-kf {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.8); opacity: 0.5; }
}
.map-flash { animation: map-flash-kf 0.9s ease-in-out 2; transform-origin: center; }

.route-toggle { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.route-btn {
  border: 2px solid var(--border); background: var(--card);
  padding: 7px 14px; border-radius: 999px; font-size: 14px; cursor: pointer; font-weight: 600;
}
.route-btn.on { color: #fff; border-color: transparent; }

/* ---- 历史侦探 ---- */
.detective-week, .detective-clues, .detective-create {
  background: var(--card); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
}
.detective-week h3 { margin: 0 0 8px; font-size: 20px; }
.detective-week .quest { font-size: 18px; font-weight: 700; }
.detective-week .open-question {
  margin-top: 10px; padding: 10px 14px; border-radius: 8px;
  background: #eef4fb; border: 1px dashed #9db8d6;
  font-size: 13.5px; line-height: 1.7; color: #44607d;
}
.detective-week .open-question .open-tag { font-weight: 700; color: #2f5d8a; margin-right: 6px; }
.detective-week .open-question .open-q { font-weight: 600; color: #33475e; }
.detective-week .open-question .open-views { display: block; margin-top: 4px; color: #6b8299; font-size: 12.5px; }
.detective-clues h4, .detective-create h4 { margin: 0 0 8px; font-size: 17px; }
.clue-card {
  border-left: 4px solid var(--gold); background: #fbf3e0;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; font-size: 15px;
}
.clue-card .clue-title { font-weight: 700; }
.clue-card .clue-src { color: var(--muted); font-size: 13px; }
.ask-box { border-top: 2px dashed var(--gold); margin-top: 14px; padding-top: 12px; }
.ask-title { font-weight: 700; margin-bottom: 6px; }
.ask-row { display: flex; gap: 8px; }
.ask-row input { flex: 1; border: 2px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 15px; font-family: inherit; }
.ask-hint { color: var(--muted); font-size: 14px; margin-top: 6px; }
.ask-hit { background: #fbf3e0; border-radius: 8px; padding: 8px 12px; margin-top: 8px; font-size: 14px; }
.create-box {
  border: 2px dashed var(--gold); border-radius: 12px; padding: 14px;
  text-align: center; color: var(--muted);
}
.create-box input, .create-box textarea {
  width: 100%; border: 2px solid var(--border); border-radius: 10px;
  padding: 10px; font-size: 15px; font-family: inherit; margin-top: 8px;
}
.create-box textarea { min-height: 90px; resize: vertical; }
.create-save {
  margin-top: 10px; background: var(--primary); color: #fff; border: none;
  padding: 9px 22px; border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.create-saved { color: #2e7d32; font-weight: 700; margin-top: 8px; }

/* ---- 史论工坊 ---- */
.ws { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: #fffdf7; }
.ws-tabs { display: flex; gap: 10px; border-bottom: 2px solid var(--border); padding-bottom: 10px; margin-bottom: 14px; }
.ws-tab {
  border: 1px solid var(--gold); background: #fff; color: #8a6d3b;
  padding: 8px 20px; border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.ws-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.ws-pane.hidden { display: none; }
.ws-hint { font-size: 14px; color: var(--muted); background: #fbf3e0; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.ws-field { display: block; margin-bottom: 12px; }
.ws-label { display: block; font-size: 14px; font-weight: 700; color: #5a4a2a; margin-bottom: 5px; }
.ws-input {
  width: 100%; border: 2px solid var(--border); border-radius: 10px;
  padding: 10px; font-size: 15px; font-family: inherit; min-height: 64px; resize: vertical; line-height: 1.5;
}
.ws-input:focus { outline: none; border-color: var(--gold); }
.ws-result { margin-top: 10px; }

/* ---- 史论工坊 · 选择题卡片 ---- */
.qq { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; background: #fffdf7; }
.qq-q { font-size: 15.5px; font-weight: 700; color: #4a3a1c; margin-bottom: 10px; line-height: 1.5; }
.qq-opts { display: flex; flex-direction: column; gap: 8px; }
.qq-opt {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  border: 2px solid var(--border); background: #fff; border-radius: 10px;
  padding: 9px 12px; font-size: 15px; line-height: 1.45; cursor: pointer; transition: all .15s;
}
.qq-opt:hover { border-color: var(--gold); background: #fdf7e8; }
.qq-letter {
  flex: none; width: 24px; height: 24px; border-radius: 50%; line-height: 24px; text-align: center;
  background: #efe6d0; color: #6a5a38; font-weight: 700; font-size: 13.5px; margin-top: 1px;
}
.qq-text { flex: 1; }
.qq-opt.picked { border-color: var(--gold); background: #f7e9c6; box-shadow: 0 0 0 1px var(--gold); }
.qq-opt.picked .qq-letter { background: var(--gold); color: #fff; }
.qq-opt.correct { border-color: #3f8f5a; background: #e8f5ec; }
.qq-opt.correct .qq-letter { background: #3f8f5a; color: #fff; }
.qq-opt.wrong { border-color: #c0473f; background: #fbeae8; }
.qq-opt.wrong .qq-letter { background: #c0473f; color: #fff; }
.qq-opt:disabled { cursor: default; }
.qq-explain { margin-top: 10px; border-radius: 8px; padding: 8px 11px; font-size: 14px; line-height: 1.55; }
.qq-explain.ok { background: #e8f5ec; color: #2c6b42; }
.qq-explain.bad { background: #fbeae8; color: #96352e; }
.qq-open { margin-top: 8px; font-size: 13px; color: var(--muted); }
.quiz-progress, .quiz-score { font-size: 14.5px; font-weight: 700; color: #5a4a2a; margin-bottom: 8px; }
.quiz-score { font-size: 16px; color: #96352e; }
.quiz-gen-msg { margin-top: 8px; }

/* ---- 争议话题作答 ---- */
.debate-item { list-style: none; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; background: #fffdf7; }
.deb-input {
  width: 100%; border: 2px solid var(--border); border-radius: 10px;
  padding: 10px; font-size: 15px; font-family: inherit; min-height: 80px; resize: vertical; margin-top: 10px; line-height: 1.5;
}
.deb-input:focus { outline: none; border-color: var(--gold); }
.deb-result { margin-top: 8px; }

.footer { margin-top: 32px; text-align: center; color: var(--muted); font-size: 13px; word-break: break-word; padding: 0 8px; }

/* ---- 朝代时间线 ---- */
.era-strip {
  flex: 1; display: flex; gap: 6px; overflow-x: auto;
  padding: 8px 0 12px; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: #a8352a #f0e6d2;
  border-bottom: 2px dashed var(--border);
}
.era-strip::-webkit-scrollbar { height: 6px; }
.era-strip::-webkit-scrollbar-thumb { background: #a8352a; border-radius: 3px; }
.era-strip::-webkit-scrollbar-track { background: #f0e6d2; }
.era-btn {
  flex: 0 0 auto; border: 2px solid var(--border); background: var(--card);
  border-radius: 10px; padding: 8px 14px; cursor: pointer; font-size: 15px;
  font-family: inherit; text-align: center; line-height: 1.3; position: relative;
}
.era-btn:not(:last-child)::after {
  content: "➜"; position: absolute; right: -10px; top: 50%;
  transform: translateY(-50%); color: var(--primary); font-size: 12px;
  font-weight: 700; z-index: 2; background: #fff;
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.era-btn .era-name { font-weight: 700; color: var(--primary); display: block; font-size: 15px; }
.era-btn .era-years { font-size: 12px; color: var(--muted); }
.era-btn.active { background: var(--primary); border-color: var(--primary); }
.era-btn.active .era-name, .era-btn.active .era-years { color: #fff; }

.era-info {
  background: #fbf3e0; border: 2px solid var(--gold); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 12px; font-size: 14px;
}
.era-info h4 { margin: 0 0 6px; font-size: 16px; color: var(--primary); }
.era-info .era-row { margin: 3px 0; }
.era-info .era-row b { color: var(--ink); }
.era-info .era-events { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--gold); }
.era-info .era-event-chip {
  display: inline-block; background: #fff; border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 10px; margin: 2px 4px 2px 0; font-size: 12px;
  cursor: pointer;
}
.era-info .era-event-chip:hover { background: var(--primary); color: #fff; }
.era-info .era-event-chip.active { background: #c0392b; color: #fff; border-color: #c0392b; }

/* ===== 自定义光标：浅蓝色灵动大箭头 ===== */
:root {
  /* 默认箭头：浅蓝填充 + 白色描边 + 淡蓝外发光，尖端在 (3,2) */
  --cur-default: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M4 3 L4 23 L10 18 L14.5 27 L17.5 25.5 L13.5 17 L21 17 Z' fill='%237cc4f5' fill-opacity='0.35' transform='translate(1.4,1.4)'/><path d='M4 3 L4 23 L10 18 L14.5 27 L17.5 25.5 L13.5 17 L21 17 Z' fill='%235bb4f0' stroke='%23ffffff' stroke-width='2.6' stroke-linejoin='round'/><path d='M6.5 6 L6.5 18' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' opacity='0.55'/></svg>") 3 2, auto;
  /* 可点击态：箭头略大、末端带一颗暖黄光点，表示"点这里" */
  --cur-pointer: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'><path d='M4 3 L4 26 L11 20.5 L16 30 L19.5 28 L15 19.5 L23.5 19.5 Z' fill='%233a9be0' fill-opacity='0.3' transform='translate(1.6,1.6)'/><path d='M4 3 L4 26 L11 20.5 L16 30 L19.5 28 L15 19.5 L23.5 19.5 Z' fill='%233a9be0' stroke='%23ffffff' stroke-width='2.8' stroke-linejoin='round'/><circle cx='8' cy='7' r='2.6' fill='%23ffd166' stroke='%23ffffff' stroke-width='1'/></svg>") 3 2, pointer;
  /* 可拖拽态：小手 */
  --cur-grab: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path d='M9 13 V6.5 a1.8 1.8 0 0 1 3.6 0 V12 V5.5 a1.8 1.8 0 0 1 3.6 0 V12 V6.8 a1.8 1.8 0 0 1 3.6 0 V13.5 c0 4.5-1.8 9-5.5 10.5 c-2.6 1.1-5.6.2-7.6-2.2 c-1.2-1.5-2.5-3.6-2.5-5.3 V9 a1.8 1.8 0 0 1 3.6 0 V13 Z' fill='%235bb4f0' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/></svg>") 10 8, grab;
}
html, body { cursor: var(--cur-default); }
a, button, [role='button'], .tab, .timeline-arrow, .era-chip, .place, .route-btn, .entry-chip,
.case-card, .clickable, label, select, .era-event-chip, .map-popup .close, .create-save, .ask-btn,
.map-event, .map-route, .portrait-card, .person-node {
  cursor: var(--cur-pointer) !important;
}
input, textarea { cursor: text; }
.timeline-arrow:disabled { cursor: not-allowed !important; }
/* 时间线头像/年号行可拖拽 */
.drag-hover, .dragging { cursor: var(--cur-grab) !important; }
/* 十国甘特图 */
.shiguo-gantt { margin: 18px 0 8px; background: #f5ead2; border: 1px solid #d9c08c; border-radius: 14px; padding: 18px 20px; }
.shiguo-gantt h3 { margin: 0 0 4px; font-size: 18px; color: #6b4a1f; }
.shiguo-gantt .gantt-sub { margin: 0 0 14px; font-size: 13px; color: #8a6d3b; }
.gantt-axis { position: relative; height: 26px; margin-left: 130px; border-bottom: 2px solid #c9a96a; }
.gantt-axis .tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; color: #8a6d3b; }
.gantt-row { display: flex; align-items: center; height: 44px; margin: 4px 0; }
.gantt-label { width: 130px; font-size: 13px; color: #5a4020; padding-right: 10px; text-align: right; flex: 0 0 auto; line-height: 1.2; }
.gantt-label b { display: block; font-size: 14px; color: #4a3020; }
.gantt-label .gantt-label-years { font-size: 11px; color: #8a6d3b; font-weight: 600; }
.gantt-track { position: relative; flex: 1; height: 26px; }
.gantt-king {
  position: absolute; top: 0; height: 26px; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; cursor: pointer; white-space: nowrap;
  transition: transform .15s; overflow: hidden;
}
/* 极窄任期（如一年）最小可见宽度，不改变坐标位置，仅保证肉眼可见 */
.gantt-king { min-width: 14px; }
.gantt-king:hover { transform: scaleY(1.3); z-index: 3; }
.gantt-king .gantt-king-name { font-weight: 700; line-height: 1; font-size: 10px; }
.gantt-king.song { background: linear-gradient(180deg, #c8553d, #b04836); }
.gantt-king.song.alt { background: linear-gradient(180deg, #d97a63, #c05d48); }
.gantt-king.tang-internal { background: linear-gradient(180deg, #6b8e6b, #57795a); }
.gantt-king.tang-internal.alt { background: linear-gradient(180deg, #86a886, #6f916f); }
.gantt-note { margin-top: 10px; font-size: 12px; color: #8a6d3b; }
.gantt-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: #5a4020; }
.gantt-legend .sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }

/* ===== 左侧大模块切换栏：占位于正文左侧，正文整体右移（不做纯浮层，避免正文贴边） ===== */
/* 宽度由 --sidebar-w / --sidebar-w-collapsed 控制，两态之间有过渡。
   正文不因侧栏收缩而跳动：.mega-area 的 margin-left 与侧栏同宽。 */
.mega-sidebar {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, rgba(245,234,208,.88) 0%, rgba(239,226,196,.88) 100%);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0 16px; z-index: 1000;
  border-right: 1px solid #c9b080;
  box-shadow: 2px 0 12px rgba(0,0,0,.12);
  transition: width .24s ease;
}
/* 收缩态：只留图标条 */
body.sidebar-collapsed .mega-sidebar { width: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .mega-name,
body.sidebar-collapsed .mega-sub { display: none; }
body.sidebar-collapsed .mega-btn { width: 100%; padding: 12px 2px; }
body.sidebar-collapsed .mega-logo { width: 100%; margin-bottom: 14px; padding: 2px 4px; }

/* 收缩/展开按钮：位于侧栏顶部 */
.mega-collapse-btn {
  flex: 0 0 auto;
  width: 80px; height: 34px; margin-bottom: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(168,53,42,.08); border: 1.5px solid rgba(168,53,42,.3);
  border-radius: 6px; color: #8a4b2a; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 700;
  transition: all .18s ease;
}
.mega-collapse-btn:hover { background: rgba(168,53,42,.15); color: #a8352a; border-color: rgba(168,53,42,.5); }
.mega-collapse-btn .caret {
  font-size: 11px; line-height: 1;
  transition: transform .24s ease;
}
/* 卷收：古篆笔意——楷起笔收、略带金石刻痕感 */
.mega-collapse-btn .label {
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "STSong", "SimSun", serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 3px;
  color: #a8352a;
  text-shadow:
    0 0 0.5px #7a2418,
    1px 1px 0 rgba(122,36,24,.35),
    -1px 0 0 rgba(255,240,215,.5),
    0 2px 3px rgba(122,36,24,.25);
}
/* 收缩时箭头朝右（提示"展开"） */
body.sidebar-collapsed .mega-collapse-btn .caret { transform: scaleX(-1); }
/* 收缩态按钮变窄，只留箭头 */
body.sidebar-collapsed .mega-collapse-btn { width: 44px; }
body.sidebar-collapsed .mega-collapse-btn .label { display: none; }
.mega-logo {
  width: 88px; margin: 0 auto 2px; padding: 0;
}
.mega-logo img { width: 100%; display: block; }
.mega-btn {
  width: 88px; padding: 14px 6px 12px; margin-bottom: 12px;
  background: linear-gradient(180deg, #fbf3e0 0%, #f0e2c4 100%);
  border: 1.5px solid rgba(107,90,58,.35); border-radius: 8px;
  color: #6b5a3a; cursor: pointer; text-align: center;
  transition: all .2s; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 3px rgba(107,90,58,.12),
    0 2px 5px rgba(80,55,20,.18);
}
.mega-btn:hover {
  background: linear-gradient(180deg, #fff7e8 0%, #f5e8cc 100%);
  border-color: rgba(168,53,42,.4);
  color: #a8352a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -2px 3px rgba(107,90,58,.1),
    0 3px 8px rgba(138,80,20,.28);
}
.mega-btn.active {
  background: linear-gradient(180deg, #b83f30 0%, #8c2318 60%, #7a1c12 100%);
  border-color: #e0b55a; color: #fff5e8;
  box-shadow:
    inset 0 1px 0 rgba(255,220,160,.55),
    inset 0 -3px 6px rgba(80,15,10,.4),
    inset 0 0 0 1px rgba(255,210,130,.15),
    0 5px 14px rgba(138,28,28,.5),
    0 2px 4px rgba(0,0,0,.25);
  transform: translateY(-1px);
}
.mega-btn.active .mega-name {
  text-shadow: 0 1px 2px rgba(60,10,5,.6);
}
.mega-icon {
  display: flex; align-items: center; justify-content: center;
  color: currentColor;
  margin-bottom: 2px;
}
.mega-btn.active .mega-icon { color: #ffe9a8; }
.mega-name {
  font-size: 15px; font-weight: 700; letter-spacing: 3px;
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
}
.mega-sub {
  font-size: 10px; opacity: .65; letter-spacing: 1px;
}
/* 模块区：整体让开侧栏宽度（侧栏收缩时同步变窄，正文随之平移而不是被裁切）。
   内部 .module-inner 负责正文限宽居中——两个模块用同一个类，宽度与位置必然一致。 */
.mega-area {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  transition: margin-left .24s ease;
}
body.sidebar-collapsed .mega-area { margin-left: var(--sidebar-w-collapsed); }
.guoxue-frame { width: 100%; height: 100vh; border: 0; display: block; }

/* ===== 全局加载动画（居中遮罩，慢网时显示） ===== */
#global-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(253, 246, 233, .88);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  pointer-events: none;
}
#global-loader.show {
  opacity: 1; visibility: visible;
  pointer-events: all;
}
.gl-spinner {
  width: 56px; height: 56px; position: relative;
}
.gl-spinner::before,
.gl-spinner::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}
.gl-spinner::before {
  border-top-color: #a8352a;
  border-right-color: #a8352a;
  animation: gl-spin 1s linear infinite;
}
.gl-spinner::after {
  inset: 8px;
  border-bottom-color: #c9a96a;
  border-left-color: #c9a96a;
  animation: gl-spin-rev 1.4s linear infinite;
}
@keyframes gl-spin { to { transform: rotate(360deg); } }
@keyframes gl-spin-rev { to { transform: rotate(-360deg); } }
.gl-text {
  margin-top: 18px;
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: 15px; font-weight: 600; letter-spacing: 4px;
  color: #6b5432;
}
.gl-dots::after {
  content: "";
  animation: gl-dots 1.5s steps(4, end) infinite;
}
@keyframes gl-dots {
  0% { content: ""; }
  25% { content: "·"; }
  50% { content: "··"; }
  75% { content: "···"; }
}