:root{
  --bg:#0d1017; --bg2:#11151f; --panel:#161b28; --panel2:#1b2132;
  --line:rgba(216,178,110,.18); --line2:rgba(255,255,255,.07);
  --accent:#d8b26e; --accent2:#f0d9a8; --red:#c05a4e; --jade:#5a9e8f; --blue:#6d94c4;
  --tx:#e8e2d4; --tx2:#a89f8c; --tx3:#6f6a5e;
  --bgArt:none; --bgArtOpacity:0;
  --serif:"Noto Serif SC","STZhongsong","SimSun",serif;
  --sans:"Noto Sans SC","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
/* 背景色移到 html、body 留空，是为了让下面的 body::after 插画层能被看见。
   原因在绘制次序：负 z-index 的后代画在「根元素背景之后、普通流的块背景之前」。
   body 自己若有背景，它就属于「普通流的块背景」，永远盖在 z-index:-1 的插画上；
   把底色交给 html（画到画布上），插画才浮得出来，正文又都在它上面。 */
body{background:transparent;color:var(--tx);font-family:var(--sans);font-size:1rem;line-height:1.7;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(1200px 500px at 80% -10%,rgba(var(--accentRGB),.07),transparent 60%),
             radial-gradient(900px 500px at -10% 30%,rgba(var(--jadeRGB),.05),transparent 60%),
             radial-gradient(700px 400px at 60% 110%,rgba(var(--redRGB),.05),transparent 60%)}
/* ---------- 主题背景插画（各套皮肤各一张，见 server/tools/build-bg-art.js）----------
   z-index:-1 + 底色上移到 html：见上面 body 那一行的说明。
   透明度走 --bgArtOpacity，逐主题给值——浅色主题经不起太重的线条，
   深色主题线太淡则等于没画，所以这个数不能全局一套。
   opacity 而不是把颜色调淡：整层等比缩淡，山形与水纹的相对深浅关系才不会被压平。 */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--bgArt);background-position:center;background-size:cover;
  background-repeat:no-repeat;opacity:var(--bgArtOpacity);
  transition:opacity .35s ease}
::selection{background:rgba(var(--accentRGB),.35)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

header{position:sticky;top:0;z-index:100;backdrop-filter:blur(14px);
  background:var(--hdBg);border-bottom:1px solid var(--line2)}
.hd{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:0 24px;height:66px}
/* 页头三处字号（品牌 / 导航 / 工具区）按用户要求统一放大约两号。
   ★ 只改 font-size，颜色（--logoGrad / --tx2 / --tx3）与版式一律不动。
   各断点的更小档位在 responsive.css 里，那边是本文件的后续覆盖；
   改动时两边要一起动，否则窄屏会突然比宽屏还大。 */
.logo{display:flex;align-items:baseline;gap:12px;cursor:pointer;user-select:none}
.logo .mark{font-family:var(--serif);font-size:2rem;font-weight:900;letter-spacing:6px;
  background:var(--logoGrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo .slog{font-size:0.84rem;color:var(--tx3);letter-spacing:2px}
nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
nav a{color:var(--tx2);text-decoration:none;font-size:1.0333rem;padding:7px 12px;border-radius:8px;letter-spacing:1px;transition:.25s;cursor:pointer;white-space:nowrap}
nav a:hover{color:var(--accent2);background:rgba(var(--accentRGB),.08)}
nav a.on{color:var(--accent2);background:rgba(var(--accentRGB),.12)}

main{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:34px 24px 80px}
section.page{display:none;animation:fadeUp .5s ease}
section.page.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sec-head{margin:6px 0 26px}
.sec-head .cn{font-family:var(--serif);font-size:2rem;font-weight:700;letter-spacing:3px}
.sec-head .cn::before{content:"◆";color:var(--accent);font-size:0.9333rem;margin-right:12px;vertical-align:3px}
.sec-head .en{color:var(--tx3);font-size:0.8rem;letter-spacing:3px;margin-top:2px;text-transform:uppercase}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line2);border-radius:16px;padding:22px;transition:.3s}
.card:hover{border-color:var(--line)}
/* 默认单列。⚠️ 必须写 `minmax(0,1fr)` 而不是留空：
   留空时隐式列的轨道尺寸是 `auto`，其**最小**尺寸 = 内容的 min-content，
   于是子项里只要有一段不肯折行的长内容（长 URL、`white-space:nowrap` 的串），
   轨道就被撑到比容器还宽 —— 在 320px 上实测「学习中心」整块右溢 12px。
   `minmax(0,1fr)` 把最小值钉死为 0，子项才会老实按容器宽度折行。
   各变体（.home-grid/.topic-grid/.fig-grid/.film-grid/.tb-grid/.gv-grid）
   与行内 `style="grid-template-columns:…"` 都在这条之后或特异度更高，不受影响。 */
.grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.tag{display:inline-block;font-size:0.7333rem;padding:2px 10px;border-radius:99px;border:1px solid var(--line);color:var(--accent);letter-spacing:1px}
.tag.red{color:var(--redTx);border-color:rgba(var(--redRGB),.4)}
.tag.jade{color:var(--jadeTx);border-color:rgba(var(--jadeRGB),.4)}
.tag.blue{color:var(--blueTx);border-color:rgba(var(--blueRGB),.4)}
/* ---- 用户菜单（页头下拉 + 退出登录）----
   未登录时它就是一个普通的「未登录」按钮（点了去个人中心），
   登录后才变成「头像首字 + 用户名 + ▾」并展开下拉。 */
.user-menu{position:relative;flex:0 0 auto}
.um-trigger{display:flex;align-items:center;gap:8px;padding:5px 11px 5px 6px;border-radius:99px;cursor:pointer;
  background:rgba(var(--hlRGB),.04);border:1px solid var(--line2);color:var(--tx);font-family:var(--sans);
  font-size:0.9rem;letter-spacing:1px;transition:.18s;max-width:190px}
.um-trigger:hover{border-color:rgba(var(--accentRGB),.42);background:rgba(var(--accentRGB),.07)}
.um-trigger[aria-expanded="true"]{border-color:rgba(var(--accentRGB),.5);background:rgba(var(--accentRGB),.1)}
.um-avt{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:0.9rem;font-weight:700;color:var(--onAccent);background:var(--btnGrad)}
.um-name,.um-uname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-uname{font-weight:600;color:var(--accent2)}
.um-caret{flex:0 0 auto;font-size:0.6rem;color:var(--tx3);transition:transform .2s}
.um-trigger[aria-expanded="true"] .um-caret{transform:rotate(180deg)}
.um-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:340;min-width:198px;padding:6px;
  border-radius:12px;border:1px solid var(--line);background:var(--panel);
  box-shadow:0 18px 44px rgba(var(--shRGB),.42);animation:umIn .16s ease both}
@keyframes umIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.um-hd{display:flex;flex-direction:column;gap:2px;padding:9px 11px 11px;
  border-bottom:1px solid var(--line2);margin-bottom:5px}
.um-hd b{font-family:var(--serif);font-size:1rem;color:var(--accent2);letter-spacing:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-hd span{font-size:0.7rem;color:var(--tx3);letter-spacing:1px}
.um-item{display:block;width:100%;text-align:left;padding:9px 11px;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--tx);font-size:0.8333rem;letter-spacing:1px;font-family:inherit;transition:.15s}
.um-item:hover{background:rgba(var(--accentRGB),.1);color:var(--accent2)}
.um-sep{height:1px;background:var(--line2);margin:5px 8px}
.um-item.um-danger{color:var(--red)}
.um-item.um-danger:hover{background:rgba(var(--redRGB),.12);color:var(--red)}
/* 未登录：收起头像与箭头，让它退回成一个普通按钮 */
.user-menu:not(.on) .um-avt,.user-menu:not(.on) .um-caret{display:none}
.user-menu:not(.on) .um-trigger{padding:5px 12px}
/* 长者关怀的定位是降低视觉噪声，下拉不做位移动画 */
html[data-theme="senior"] .um-panel{animation:none}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--btnGrad);color:var(--onAccent);
  border:none;border-radius:10px;padding:10px 22px;font-size:0.9333rem;font-weight:600;cursor:pointer;letter-spacing:2px;transition:.25s;font-family:var(--sans)}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
.btn.ghost:hover{background:rgba(var(--accentRGB),.08)}
.btn.sm{padding:6px 14px;font-size:0.8333rem;border-radius:8px}
/* 禁用态必须看得出来：时段聚焦里的「对准该时段 / 取消聚焦」在未选中时段时不可用，
   不表态会让用户连点几下以为坏了。 */
.btn:disabled{opacity:.45;cursor:not-allowed}
.inp{background:rgba(var(--hlRGB),.03);border:1px solid var(--line2);border-radius:10px;color:var(--tx);
  padding:10px 14px;font-size:0.9333rem;font-family:var(--sans);outline:none;transition:.2s}
.inp:focus{border-color:var(--line)}
/* `max-width:100%` + `min-width:0`：<select> 的固有宽度取**最宽的那个 option**，
   它不认父容器有多窄。学习中心「辩论赛」的辩题下拉在 300px 下算出 293px，
   直接顶出视口（选项文本是整句辩题）。给一个上限，超长的 option 由原生控件自己截断。 */
.sel{background:rgba(var(--hlRGB),.03);border:1px solid var(--line2);border-radius:10px;color:var(--tx);
  padding:8px 12px;font-size:0.8667rem;font-family:var(--sans);outline:none;cursor:pointer;
  max-width:100%;min-width:0}
.chip{padding:5px 14px;border-radius:99px;border:1px solid var(--line2);color:var(--tx2);font-size:0.8333rem;cursor:pointer;transition:.2s;user-select:none;display:inline-block}
.chip:hover{border-color:var(--line);color:var(--tx)}
.chip.on{background:rgba(var(--accentRGB),.14);border-color:var(--line);color:var(--accent2)}
.ai-badge{display:inline-flex;align-items:center;gap:5px;font-size:0.7rem;color:var(--jadeTx);border:1px solid rgba(var(--jadeRGB),.4);border-radius:99px;padding:1px 9px;letter-spacing:1px}

.hero{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);padding:74px 56px;margin-bottom:30px;
  background:linear-gradient(120deg,rgba(var(--accentRGB),.10),rgba(var(--bgRGB),.4) 55%),linear-gradient(200deg,rgba(var(--jadeRGB),.10),transparent 50%),var(--panel)}
.hero::after{content:"山 河 为 卷 · 时 间 为 轴";position:absolute;right:34px;bottom:26px;writing-mode:vertical-rl;
  font-family:var(--serif);font-size:0.8667rem;letter-spacing:10px;color:rgba(var(--accentRGB),.35);
  transition:opacity .45s ease}
/* 右侧配图出现后，这行竖排装饰文案正好压在照片上：低透明度文字叠在复杂照片上，
   看着像屏幕脏点 / 重影，而不是设计。配图在场时让它让位（淡出而非 display:none，
   免得切图时闪一下）。标记由 hero-art.js 打，不用 CSS :has()——
   「图加载失败要退回去」这件事只有 JS 知道（见 hero-art.js 的 syncMark）。 */
.hero.has-art::after{opacity:0}
.hero h1{font-family:var(--serif);font-size:3.7333rem;font-weight:900;letter-spacing:10px;
  background:var(--numGrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{margin-top:14px;font-size:1.1333rem;color:var(--tx2);letter-spacing:3px;font-family:var(--serif)}
.hero .desc{margin-top:22px;max-width:640px;color:var(--tx2);font-size:0.9667rem}
/* 六个主题入口排成两行三列（上排 历史/地理/生物，下排 数学/物理/化学）。
   用「grid 竖排两个 .acts-row + 行内 flex-wrap」而不是直接 flex-wrap：
   直接排的话窄屏会把六个混在一起折行，看不出「上排三科、下排三科」的分组。 */
.hero .acts{margin-top:30px;display:grid;gap:12px;justify-items:start}
.hero .acts-row{display:flex;gap:12px;flex-wrap:wrap}
/* 尚未开发的四科：可按但点了不跳转，靠虚线边 + 降透明度表态；
   鼠标移上去（或键盘聚焦、触屏点一下）浮出一句「请期待我们对X领域的开发」。
   ★ 提示文案走 attr(data-soon)，不能写成按钮里的 <span>：
     i18n 切语言时是整块 textContent 覆盖，塞在里面的子元素会被一起抹掉。 */
.hero .acts .soon{position:relative;opacity:.6;cursor:help;border-style:dashed}
.hero .acts .soon:hover,.hero .acts .soon:focus-visible{opacity:1;background:rgba(var(--accentRGB),.08)}
.hero .acts .soon::after{content:attr(data-soon);position:absolute;left:50%;bottom:calc(100% + 10px);
  --tx:-50%;--ty:4px;transform:translate(var(--tx),var(--ty));
  white-space:nowrap;padding:7px 12px;border-radius:9px;background:var(--panel);color:var(--tx);
  border:1px solid var(--line2);box-shadow:0 10px 24px rgba(0,0,0,.16);
  font-size:0.7667rem;font-weight:400;letter-spacing:0.5px;line-height:1.5;
  opacity:0;pointer-events:none;z-index:6;transition:opacity .18s ease,transform .18s ease}
/* 下排按钮头上就是上排按钮，气泡改到下方；隐藏态的偏移量也随之翻向 */
.hero .acts-row + .acts-row .soon::after{bottom:auto;top:calc(100% + 10px);--ty:-4px}
/* 行首按钮靠左对齐，气泡居中会伸到 hero 外被 overflow:hidden 裁掉半句 */
.hero .acts-row .soon:first-child::after{left:0;--tx:0}
.hero .acts .soon:hover::after,.hero .acts .soon:focus-visible::after,.hero .acts .soon.tip-on::after{
  opacity:1;--ty:0}
/* 文案统一抬到配图之上（配图在 DOM 里排在文案之后，宽屏是绝对定位的右侧出血图） */
.hero h1,.hero .sub,.hero .desc,.hero .acts{position:relative;z-index:2}
/* ---------- 首页右侧配图（建党以来重大事件 / 河南·内蒙古名胜） ----------
   由右向左透明渐变：右端清晰、左端淡出，与左侧文案自然衔接。
   渐变用 mask-image 而不是「叠一层背景色渐变」——叠色会跟着主题底色走，
   换皮肤时底色一变就会露出一条色带；mask 不吃主题变量，11 套皮肤一视同仁。 */
.hero-art{position:absolute;top:0;right:0;bottom:0;width:52%;margin:0;overflow:hidden;
  display:flex;align-items:flex-start;justify-content:flex-end;pointer-events:none;
  opacity:0;transition:opacity .55s ease;
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 32%,rgba(0,0,0,.5) 62%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to left,#000 0%,#000 32%,rgba(0,0,0,.5) 62%,rgba(0,0,0,0) 100%)}
.hero-art.on{opacity:1}
.hero-art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-art-cap{position:relative;z-index:2;margin:24px 24px 0 0;max-width:66%;text-align:right;
  display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.hero-art-cap b{font-family:var(--serif);font-size:1rem;letter-spacing:2px;color:var(--accent)}
.hero-art-cap span{font-family:var(--serif);font-size:1.3333rem;font-weight:700;letter-spacing:3px;color:var(--tx)}
.hero-art-cap i{font-style:normal;font-size:0.7667rem;line-height:1.65;color:var(--tx2);text-align:right;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 角标压在照片上，必须自带可读性：用主题底色做描边光晕，深色浅色照片都读得清 */
.hero-art-cap b,.hero-art-cap span,.hero-art-cap i{text-shadow:0 1px 12px var(--bg),0 0 3px var(--bg),0 0 3px var(--bg)}
.home-grid{grid-template-columns:1.35fr 1fr}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:26px 0}
.stat{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line2);border-radius:16px;padding:20px 8px;text-align:center}
.stat .num{font-family:var(--serif);font-size:2.1333rem;font-weight:900;color:var(--accent)}
.stat .lab{font-size:0.8333rem;color:var(--tx2);margin-top:4px;letter-spacing:2px}
.today-item{display:flex;gap:14px;padding:13px 4px;border-bottom:1px dashed var(--line2);cursor:pointer;transition:.2s}
.today-item:last-child{border-bottom:none}
.today-item:hover{transform:translateX(4px)}
.today-item:hover .t-title{color:var(--accent2)}
.today-item .yr{min-width:74px;font-family:var(--serif);font-weight:700;color:var(--accent);font-size:1rem}
.today-item .t-title{font-size:0.9667rem;transition:.2s}
.today-item .t-sub{font-size:0.8rem;color:var(--tx3);margin-top:1px}
.topic-grid{grid-template-columns:repeat(4,1fr)}
.topic{position:relative;border-radius:16px;padding:24px 20px;min-height:150px;overflow:hidden;cursor:pointer;border:1px solid var(--line2);transition:.3s;display:flex;flex-direction:column;justify-content:flex-end}
.topic:hover{transform:translateY(-4px);border-color:var(--line)}
.topic .bg-ico{position:absolute;right:-6px;top:-16px;font-size:5.2rem;opacity:.13;font-family:var(--serif)}
/* 专题卡片压着的是写死的深色美术渐变（见 app.js 的 TOPICS[].g），不是主题色，
   所以卡上文字一律固定浅色。跟着 --tx 走的话，浅色主题下会变成深字压深底（1:1）。 */
.topic h3{font-family:var(--serif);font-size:1.2667rem;letter-spacing:2px;color:#F5EFE3}
.topic p{font-size:0.8rem;color:rgba(245,239,227,.8);margin-top:5px}
.topic .bg-ico{color:#F5EFE3}

.tl-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.zoomer{margin-left:auto;display:flex;gap:6px}
.zoomer button{width:32px;height:32px;border-radius:8px;background:var(--panel2);border:1px solid var(--line2);color:var(--tx);cursor:pointer;font-size:1.0667rem;transition:.2s}
.zoomer button:hover{border-color:var(--line);color:var(--accent)}
.tl-wrap{border:1px solid var(--line2);border-radius:16px;background:var(--bg2);overflow:hidden}
.tl-scroll{overflow-x:auto;overflow-y:hidden;cursor:grab;padding:26px 0 8px;position:relative}
.tl-scroll.dragging{cursor:grabbing}
.tl-inner{position:relative;height:330px}
.tl-axis{position:absolute;left:0;right:0;top:158px;height:2px;background:linear-gradient(90deg,transparent,var(--accent) 4%,var(--accent) 96%,transparent);opacity:.6}
.tl-track-label{position:absolute;left:10px;font-size:0.7333rem;letter-spacing:3px;color:var(--tx3);top:36px}
.tl-track-label.w{top:234px}
.era{position:absolute;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:0.8333rem;letter-spacing:2px;cursor:pointer;transition:.2s;white-space:nowrap;overflow:hidden}
.era:hover{filter:brightness(1.25)}
.era.cn{top:58px;background:rgba(var(--redRGB),.22);border:1px solid rgba(var(--redRGB),.45);color:var(--redTx)}
.era.cn.hot{background:rgba(var(--redRGB),.4)}
.era.wd{top:230px;background:rgba(var(--blueRGB),.18);border:1px solid rgba(var(--blueRGB),.4);color:var(--blueTx)}
.era.wd.hot{background:rgba(var(--blueRGB),.35)}

/* 阶段特征带（需求 3.4.6）——AI 归纳的 2-4 字阶段标签，位于各自时间轴上方 */
.phase{position:absolute;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:0.7667rem;letter-spacing:1px;cursor:pointer;transition:.2s;
  white-space:nowrap;overflow:hidden;z-index:2}
.phase.cn{top:4px;background:rgba(var(--accentRGB),.12);border:1px dashed rgba(var(--accentRGB),.38);color:var(--accent2)}
.phase.cn:hover{background:rgba(var(--accentRGB),.24);border-style:solid}
.phase.wd{top:202px;background:rgba(var(--blueRGB),.10);border:1px dashed rgba(var(--blueRGB),.34);color:var(--blueTx)}
.phase.wd:hover{background:rgba(var(--blueRGB),.2);border-style:solid}
.evt{position:absolute;width:12px;height:12px;border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);border:2px solid var(--bg2);transition:.2s;z-index:3}
.evt:hover{transform:translate(-50%,-50%) scale(1.6);z-index:5}
.evt.cn,.evt.wd,.evt.world{top:158px}
.evt .lab{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:0.7667rem;color:var(--tx2);
  background:var(--tipBg);padding:2px 9px;border-radius:6px;border:1px solid var(--line2);opacity:0;transition:.2s;pointer-events:none;z-index:6}
.evt:hover .lab{opacity:1}
.tl-yearbar{padding:0 16px 12px;display:flex;justify-content:space-between;font-size:0.7333rem;color:var(--tx3);letter-spacing:1px}
.tl-hint{text-align:center;font-size:0.7667rem;color:var(--tx3);padding-bottom:12px;letter-spacing:1px}

/* ---------- 时间轴悬停卡片（朝代/时代与阶段特征共用） ----------
   挂 body、fixed 定位：时间轴内部是横向滚动容器（overflow:auto），
   卡片若放进容器里，滑到边缘会被直接裁掉。 */
.tl-tip{position:fixed;z-index:320;width:max-content;max-width:308px;pointer-events:none;
  opacity:0;transform:translateY(5px);transition:opacity .16s ease,transform .16s ease;
  background:var(--modalBg);border:1px solid var(--line2);border-radius:12px;padding:12px 15px 13px;
  box-shadow:0 18px 44px rgba(var(--shRGB),.45)}
.tl-tip.on{opacity:1;transform:translateY(0)}
/* 名称在上、简介在下（用户明确要求的次序） */
.tl-tip .tp-n{font-family:var(--serif);font-size:1.1333rem;letter-spacing:2px;color:var(--tx);line-height:1.4}
.tl-tip .tp-y{font-size:0.7333rem;letter-spacing:1px;color:var(--accent2);margin-top:4px}
.tl-tip .tp-d{font-size:0.8333rem;line-height:1.75;color:var(--tx2);margin-top:8px}

/* ---------- 时段聚焦（时间轴点击联动） ---------- */
.tl-focus .tf-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.tl-focus .tf-hd-txt{min-width:0;flex:1 1 320px}
.tl-focus .tf-t{font-family:var(--serif);font-size:1.0667rem;letter-spacing:2px;color:var(--accent);line-height:1.5}
.tl-focus .tf-k{margin-right:10px}
.tl-focus .tf-t b{color:var(--tx);font-weight:700}
.tl-focus .tf-s{font-size:0.8rem;line-height:1.8;color:var(--tx3);margin-top:5px}
.tl-focus .tf-acts{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.tl-focus .tf-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}
.tl-focus .tf-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:8px;margin-top:12px}
.tl-focus .tf-ev{display:flex;gap:10px;align-items:flex-start;min-width:0;padding:9px 12px;cursor:pointer;transition:.2s;
  border:1px solid var(--line2);border-radius:10px;background:rgba(var(--hlRGB),.025)}
.tl-focus .tf-ev:hover{border-color:var(--line);background:rgba(var(--accentRGB),.07)}
.tl-focus .tf-ev .sq{flex:0 0 auto;min-width:46px;padding-top:2px;font-size:0.7333rem;letter-spacing:.5px;color:var(--accent2)}
.tl-focus .tf-ev .tt{font-size:0.9rem;line-height:1.45;color:var(--tx)}
.tl-focus .tf-ev .nn{margin-top:3px;font-size:0.7667rem;line-height:1.55;color:var(--tx3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tl-focus .tf-empty,.tl-focus .tf-foot{font-size:0.7667rem;line-height:1.8;color:var(--tx3);margin-top:12px}

.modal-mask{position:fixed;inset:0;background:var(--mask);backdrop-filter:blur(6px);z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.modal-mask.on{display:flex}
.modal{width:min(880px,100%);max-height:88vh;overflow-y:auto;background:var(--modalBg);
  border:1px solid var(--line);border-radius:20px;padding:34px 38px;position:relative;animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.modal .x{position:absolute;top:16px;right:20px;width:34px;height:34px;border-radius:10px;border:1px solid var(--line2);
  background:transparent;color:var(--tx2);font-size:1.0667rem;cursor:pointer;transition:.2s}
.modal .x:hover{color:var(--accent);border-color:var(--line)}
.modal h2{font-family:var(--serif);font-size:1.7333rem;letter-spacing:2px;color:var(--accent2)}
.modal .meta{display:flex;gap:10px;margin:10px 0 18px;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:6px 0 16px}
.seg button{background:transparent;border:none;color:var(--tx2);padding:7px 20px;cursor:pointer;font-size:0.8667rem;letter-spacing:2px;font-family:var(--sans)}
.seg button.on{background:rgba(var(--accentRGB),.16);color:var(--accent2)}
.six-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.six-cell{background:rgba(var(--hlRGB),.025);border:1px solid var(--line2);border-radius:12px;padding:13px 15px}
.six-cell .k{font-size:0.7333rem;color:var(--accent);letter-spacing:3px;margin-bottom:5px}
.six-cell .v{font-size:0.8667rem;color:var(--tx2)}
.chain{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.chain .node{padding:7px 14px;border-radius:10px;background:rgba(var(--hlRGB),.03);border:1px solid var(--line2);font-size:0.8667rem;cursor:pointer;transition:.2s}
.chain .node:hover{border-color:var(--line);transform:translateY(-2px)}
.chain .node.hot{border-color:var(--line);color:var(--accent2);background:rgba(var(--accentRGB),.08)}
.chain .arr{color:var(--accent);font-size:1rem}
.chain .arr small{display:block;font-size:0.6rem;color:var(--tx3);text-align:center;letter-spacing:1px}
.detail-p{color:var(--tx2);font-size:0.9333rem;margin:8px 0}

.geo-grid{display:grid;grid-template-columns:1fr 360px;gap:18px}
#map{width:100%;height:640px;border-radius:16px;border:1px solid var(--line2)}
#map-fallback{width:100%;height:640px;border-radius:16px;border:1px solid var(--line2);background:var(--bg2);display:none;align-items:center;justify-content:center}
.map-side .card{margin-bottom:14px}
.area-num{font-family:var(--serif);font-size:2rem;font-weight:900;color:var(--accent)}
.dyn-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dyn-chips .chip.on{background:rgba(var(--redRGB),.2);border-color:rgba(var(--redRGB),.5);color:var(--redTx)}
.legend{display:flex;flex-direction:column;gap:8px;font-size:0.8333rem;color:var(--tx2)}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:8px;vertical-align:-2px}
.map-note{font-size:0.7667rem;color:var(--tx3);margin-top:10px;line-height:1.6}

.fig-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.fig-card{display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;gap:6px}
.avatar{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--serif);font-size:1.8667rem;font-weight:900;color:var(--onAccent);
  background:var(--btnGrad);box-shadow:0 6px 22px rgba(var(--accentRGB),.25)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.fig-card h3{font-family:var(--serif);font-size:1.2667rem;letter-spacing:2px;margin-top:6px}
.fig-card .yrs{font-size:0.8rem;color:var(--tx3)}
.fig-card .role{font-size:0.8333rem;color:var(--tx2)}
/* ================= 历史人物 · 页级检索条（深度档案 / 课本人物全集共用） =================
   深度档案原先是「只能一张张翻」；课本人物全集的搜索框又只在另一个页签里，
   切回去关键词就丢了。所以做一条常驻在页签下方的检索条：进页面即可搜，
   切页签筛选不丢，上下两个输入框互相同步（联动逻辑见 app.js 的 FigSetKw）。
   注意别把它塞进 #fig-deep —— 那个容器在「课本人物全集」页签下是 display:none，
   检索条会跟着消失，「页级搜索框」就成了半个。 */
.fig-search{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-6px 0 20px;
  padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(var(--hlRGB),.03)}
.fig-search-ico{font-size:1rem;line-height:1;color:var(--accent2)}
.fig-search .inp{flex:1 1 260px;min-width:180px;margin-bottom:0}
.fig-search-n{font-size:0.8rem;color:var(--tx3);letter-spacing:1px;white-space:nowrap}
.fig-search-n b{color:var(--accent2);font-size:0.9333rem}
.fig-empty{grid-column:1/-1;text-align:center;color:var(--tx3);font-size:0.8667rem;line-height:1.9}
.life-node{display:flex;gap:14px;position:relative;padding-bottom:18px}
.life-node::before{content:"";position:absolute;left:5px;top:14px;bottom:0;width:1px;background:var(--line2)}
.life-node:last-child::before{display:none}
.life-node .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:5px}
.life-node .yr{font-family:var(--serif);color:var(--accent);font-weight:700;font-size:0.9333rem}
.life-node .tt{font-size:0.9rem;color:var(--tx2)}
.rel-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:99px;background:rgba(var(--hlRGB),.03);border:1px solid var(--line2);font-size:0.8333rem;margin:3px}
.rel-pill b{color:var(--accent);font-weight:500;font-size:0.7333rem}

.film-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.film{overflow:hidden;padding:0;cursor:pointer}
.film .poster{height:190px;position:relative;display:flex;align-items:flex-end;padding:16px}
/* 真实封面（构建期抓取落地到 public/img/covers/，见 server/tools/build-film-covers.js）
   盖在原来的渐变色块上；图片没加载出来（或该片抓不到封面）时什么也不做，
   渐变色块照常显示 —— 绝不出现破图。z-index 显式分层：
   0 封面图 → 1 底部压暗渐变 → 2 压在封面上的文字。 */
.film .poster-img{position:absolute;inset:0;z-index:0;display:block;
  width:100%;height:100%;object-fit:cover;object-position:center}
.film .poster::after{z-index:1;content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,var(--posterFade))}
/* 压在海报上的文字一律不能用主题色变量。
   海报底 = 写死的深色美术渐变（G 色板）+ --posterFade（12 套主题下都是深色半透明），
   而浅色主题的 --tx / --accent 本身是深色 —— 直接继承就是深字压深底。
   实测（浅色主题）：.tt 只有 1.1:1、.era-tag 只有 1.9:1，都看不见。
   故统一定为暖白 + 阴影，与主题解耦；底色深/浅都不影响。 */
.film .poster .tt{position:relative;z-index:2;font-family:var(--serif);font-size:1.4rem;letter-spacing:2px;font-weight:700;
  color:#F5F0E6;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.film .poster .era-tag{position:absolute;top:12px;left:12px;z-index:2;
  color:#F0E6D2;border-color:rgba(240,230,210,.5);background:rgba(12,10,8,.55);backdrop-filter:blur(4px)}
/* 历史性质标记（史实 / 演义 / 虚构）。三档颜色由 app.js 的 KIND 表给内联值——
   海报压的是写死的深色美术渐变，不能用主题变量，否则浅色主题下会深字压深底。
   这里只负责外形：默认作为行内小胶囊（弹窗、正文里用），在 .poster 里才绝对定位。 */
.k-tag{display:inline-block;font-size:0.6667rem;letter-spacing:1px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid;line-height:1.6}
.film .poster .k-tag{position:absolute;top:12px;right:12px;z-index:2;backdrop-filter:blur(4px)}
.film .body{padding:16px 18px 18px}
.stars{color:var(--accent);letter-spacing:3px;font-size:0.9333rem}
.stars .off{color:var(--dim)}
.film .meta-line{font-size:0.8rem;color:var(--tx3);margin-top:6px;display:flex;gap:10px;flex-wrap:wrap}

/* ================= 影视播放页（.modal.player） =================
   复用弹窗机制，加宽到 1080px。播放器底色写死深色，标签/按钮文字用主题色变量
   （与海报/专题卡片同一套不变量：压在写死的深底上必须固定浅色、不跟 --tx 走）。 */
.modal.player{width:min(1080px,100%);padding:30px 34px}
.fp-head{margin:0 0 14px}
.fp-head h2{font-family:var(--serif);font-size:1.7333rem;letter-spacing:2px;color:var(--accent2);margin:0 0 8px}
.fp-player{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;
  background:#0b0d12;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.fp-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0b0d12}
.fp-note{font-size:0.7333rem;color:var(--tx);margin-top:8px;line-height:1.5}
.fp-platforms{margin-top:14px;background:rgba(var(--hlRGB),.03);border:1px solid var(--line2);border-radius:14px;padding:14px 16px}
.fp-plabel{font-size:0.8rem;letter-spacing:2px;color:var(--accent2);margin-bottom:10px}
.fp-btns{display:flex;gap:10px;flex-wrap:wrap}
/* 按钮文字用主题色变量（保证浅/深主题都 ≥4.5:1）；品牌色只作小圆点标识，hover 用主题强调色高亮。 */
.fp-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:11px;
  background:rgba(var(--hlRGB),.05);border:1px solid var(--line2);color:var(--tx);
  font-size:0.9333rem;font-weight:600;text-decoration:none;transition:.2s}
.fp-btn:hover{border-color:var(--accent);background:rgba(var(--accentRGB),.1);transform:translateY(-2px)}
.fp-btn .fp-dot{width:10px;height:10px;border-radius:50%;background:var(--c);flex-shrink:0}
/* 「正在获取可播放的视频…」遮罩：压在写死的播放器深底（#0b0d12）上，
   所以文字也写死浅色，不跟主题变量走（与海报胶囊同一套不变量）。 */
.fp-load{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:#0b0d12;color:#c9d1e0;font-size:0.8667rem;letter-spacing:1px}
/* 可切换的视频列表。播放页不变量：文字只用 --tx（正文）与 --accent2（标签/次级）。 */
.fp-vlist{margin-top:14px}
.fp-vrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px}
.fp-vcard{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;text-align:left;
  background:rgba(var(--hlRGB),.05);border:1px solid var(--line2);color:var(--tx);
  font:inherit;cursor:pointer;transition:.2s}
.fp-vcard:hover{border-color:var(--accent2)}
.fp-vcard.on{border-color:var(--accent2);border-width:2px;padding:7px;background:rgba(var(--accentRGB),.12)}
.fp-vthumb{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0b0d12}
.fp-vthumb img{width:100%;height:100%;object-fit:cover;display:block}
/* 时长角标压在缩略图上（深色半透明底），固定浅字，不受主题影响。 */
.fp-vdur{position:absolute;right:5px;bottom:5px;padding:1px 6px;border-radius:5px;
  background:rgba(0,0,0,.72);color:#fff;font-size:0.6667rem}
.fp-vtt{font-size:0.8rem;line-height:1.35;color:var(--tx);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fp-vmeta{font-size:0.6667rem;color:var(--accent2)}
/* ---- 登录页演示账号（仅演示站显示；正式站服务端不下发，区块自动隐藏） ----
   文字只压 --modalBg 渐变 + 卡片 .05 高亮叠加，与 .fp-vcard 同一层次，
   沿用既有「正文 --tx / 标签 --accent2」不变量，浅色深色主题都达标。 */
.demo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.demo-card{padding:11px 13px;border-radius:12px;cursor:pointer;transition:.2s;
  background:rgba(var(--hlRGB),.05);border:1px solid var(--line2)}
.demo-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.demo-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.demo-role{font-size:0.8667rem;font-weight:600;color:var(--accent2);margin-bottom:4px}
.demo-desc{font-size:0.7333rem;line-height:1.5;color:var(--tx2)}
.demo-user{font-size:0.7333rem;color:var(--tx);margin-top:6px;overflow-wrap:break-word}
.demo-user b{color:var(--accent2);font-weight:600}
.film .fdesc{font-size:0.8333rem;color:var(--tx2);margin-top:8px}
.path-flow{display:flex;gap:0;align-items:stretch;overflow-x:auto;padding:8px 2px 14px}
.path-node{min-width:150px;text-align:center;position:relative;padding:0 12px}
.path-node .box{background:rgba(var(--hlRGB),.03);border:1px solid var(--line2);border-radius:12px;padding:12px 8px;font-size:0.8667rem}
.path-node .box b{font-family:var(--serif);color:var(--accent2);display:block;font-size:0.9333rem}
.path-node .box span{color:var(--tx3);font-size:0.7333rem}
.path-node::after{content:"➤";position:absolute;right:-9px;top:38%;color:var(--accent);font-size:0.8667rem;opacity:.7}
.path-node:last-child::after{display:none}
.rank-row{display:flex;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px dashed var(--line2);font-size:0.9rem}
.rank-row:last-child{border-bottom:none}
.rank-row .rk{font-family:var(--serif);color:var(--accent);font-weight:900;width:26px}
.rank-row .stars{font-size:0.8rem}

.riddle-box{background:rgba(var(--jadeRGB),.06);border:1px solid rgba(var(--jadeRGB),.3);border-radius:16px;padding:26px;text-align:center}
.riddle-q{font-family:var(--serif);font-size:1.6rem;letter-spacing:4px;color:var(--jadeTx);margin:8px 0 18px}
.guess-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.poem{border-left:3px solid var(--accent);padding:10px 16px;margin-bottom:14px;background:rgba(var(--hlRGB),.02);border-radius:0 12px 12px 0}
.poem .line{font-family:var(--serif);font-size:1.0667rem;color:var(--accent2)}
.poem .exp{font-size:0.8333rem;color:var(--tx2);margin-top:4px}
.mn-out{background:rgba(var(--accentRGB),.07);border:1px dashed var(--line);border-radius:14px;padding:22px;margin-top:16px;text-align:center;display:none}
.mn-out.show{display:block;animation:fadeUp .4s}
.mn-out .txt{font-family:var(--serif);font-size:1.4667rem;color:var(--accent2);letter-spacing:3px;margin:8px 0}
.qz{margin-bottom:20px}
.qz .qq{font-size:1rem;margin-bottom:10px}
.qz .opt{display:block;width:100%;text-align:left;background:rgba(var(--hlRGB),.02);border:1px solid var(--line2);border-radius:10px;
  padding:10px 16px;color:var(--tx2);cursor:pointer;margin-bottom:8px;font-size:0.9rem;transition:.2s;font-family:var(--sans)}
.qz .opt:hover{border-color:var(--line)}
.qz .opt.right{border-color:rgba(var(--jadeRGB),.6);color:var(--jadeTx);background:rgba(var(--jadeRGB),.08)}
.qz .opt.wrong{border-color:rgba(var(--redRGB),.6);color:var(--redTx);background:rgba(var(--redRGB),.08)}
/* 未提交前已选中的那个选项：只强调，不判对错 */
.qz .opt.picked{border-color:rgba(var(--accentRGB),.55);color:var(--accent2);background:rgba(var(--accentRGB),.09)}
/* ---- 智能出题分页 ----
   题库 234 道，不分页会拉出一条几十屏的长页。这里只做「工具条 + 页码条」，
   颜色一律走主题变量（--panel / --line2 / --tx3 / --accent2 / --accentRGB），
   不做任何写死色值，避免浅色主题下出现看不见的按钮。 */
.qz-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line2);
  font-size:0.8rem;color:var(--tx3)}
.qz-bar-l,.qz-bar-r{display:flex;align-items:center;gap:8px}
.qz-sel{padding:5px 10px;font-size:0.8rem;border-radius:8px}
.qz-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:20px}
.qz-pg{min-width:34px;height:34px;padding:0 10px;border-radius:9px;cursor:pointer;
  background:rgba(var(--hlRGB),.03);border:1px solid var(--line2);color:var(--tx2);
  font-size:0.8333rem;font-family:var(--sans);transition:.16s}
.qz-pg:hover:not(:disabled){border-color:rgba(var(--accentRGB),.45);color:var(--accent2)}
.qz-pg.on{background:rgba(var(--accentRGB),.15);border-color:rgba(var(--accentRGB),.55);color:var(--accent2);font-weight:600}
.qz-pg:disabled{cursor:default;opacity:.4}
.qz-pg-nav{min-width:auto}
.qz-pg-dots{color:var(--tx3);padding:0 2px;user-select:none}
.qz-pg-info{margin-left:6px;font-size:0.7667rem;color:var(--tx3)}
.mcard{height:200px;perspective:1000px;cursor:pointer}
.mcard .inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.mcard.flip .inner{transform:rotateY(180deg)}
.mface{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;border:1px solid var(--line)}
.mface.front{background:var(--cardF)}
.mface.front .f-t{font-family:var(--serif);font-size:1.5333rem;color:var(--accent2);letter-spacing:2px}
.mface.front .hint{font-size:0.7333rem;color:var(--tx3);margin-top:12px;letter-spacing:2px}
.mface.back{background:var(--cardB);transform:rotateY(180deg);font-size:0.8667rem;color:var(--tx2);justify-content:flex-start;align-items:flex-start;text-align:left;overflow-y:auto}
.mface.back b{color:var(--accent)}
.chat-log{height:320px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--deep);border-radius:0 0 14px 14px;border:1px solid var(--line2);border-top:none}
.bubble{max-width:85%;padding:10px 15px;border-radius:14px;font-size:0.9rem;line-height:1.7}
.bubble.user{align-self:flex-end;background:rgba(var(--accentRGB),.16);border:1px solid var(--line);border-bottom-right-radius:4px}
.bubble.bot{align-self:flex-start;background:rgba(var(--hlRGB),.04);border:1px solid var(--line2);border-bottom-left-radius:4px;color:var(--tx2)}
.bubble.thinking{color:var(--tx3);font-size:0.8rem;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.3}}
.char-tabs{display:flex;gap:8px;padding:12px 14px;flex-wrap:wrap;border:1px solid var(--line2);border-radius:14px 14px 0 0;background:rgba(var(--hlRGB),.02)}
.presets{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--line2);border-top:none;background:rgba(var(--hlRGB),.015)}
.debate-msg{padding:10px 15px;border-radius:12px;font-size:0.9rem;max-width:88%}
.debate-msg.me{align-self:flex-end;background:rgba(var(--accentRGB),.14);border:1px solid var(--line)}
.debate-msg.ai{align-self:flex-start;background:rgba(var(--jadeRGB),.1);border:1px solid rgba(var(--jadeRGB),.35)}
table.cmp{width:100%;border-collapse:collapse;font-size:0.8333rem}
table.cmp th{background:rgba(var(--accentRGB),.1);color:var(--accent2);padding:8px;border:1px solid var(--line2);font-weight:600}
table.cmp td{padding:8px;border:1px solid var(--line2);color:var(--tx2)}
.pz-board{position:relative;height:340px;border:1px dashed var(--line2);border-radius:14px;background:var(--deep);overflow:hidden}
.pz-slot{position:absolute;display:flex;align-items:center;justify-content:center;font-size:0.7333rem;color:rgba(var(--hlRGB),.25);border:1px dashed rgba(var(--hlRGB),.15);border-radius:6px}
.pz-piece{position:absolute;font-size:0.7333rem;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:grab;
  border:1px solid rgba(var(--hlRGB),.25);user-select:none;transition:.15s;z-index:5}
.pz-piece.dragging{opacity:.4}
.pz-piece.locked{cursor:default;opacity:1;z-index:2}
.pz-tray{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pz-tray .piece-chip{padding:6px 14px;border-radius:8px;border:1px solid var(--line2);font-size:0.8333rem;cursor:grab;background:var(--panel2);color:var(--tx2);user-select:none}
.ds-board{position:relative;height:300px;border:1px solid var(--line2);border-radius:14px;background:var(--deep);overflow:hidden}
.ds-region{position:absolute;display:flex;align-items:center;justify-content:center;font-size:0.8rem;letter-spacing:2px;
  border:1px solid rgba(var(--accentRGB),.25);border-radius:10px;color:rgba(var(--accentRGB),.3);cursor:pointer;transition:.3s;background:rgba(var(--hlRGB),.02)}
.ds-region:hover{border-color:var(--line)}
.ds-region.open{color:var(--onAccent);font-weight:700;border:none}
.env-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line2)}
.env-item:last-child{border-bottom:none}
.env-item .ico{font-size:1.6rem}
.caps-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line2);font-size:0.8667rem}
.caps-item .yr{min-width:88px;color:var(--accent);font-family:var(--serif);font-weight:700}
.migr{animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}
.graph-svg text{fill:var(--tx2);font-size:0.7333rem}
.graph-svg .gnode{cursor:pointer}
.graph-svg .gnode:hover circle{stroke:var(--accent);stroke-width:2}
footer{border-top:1px solid var(--line2);padding:30px;text-align:center;color:var(--tx3);font-size:0.8333rem;letter-spacing:2px;position:relative;z-index:1}
footer .motto{font-family:var(--serif);color:var(--tx2);letter-spacing:4px;margin-bottom:8px}
@media (max-width:1020px){
  /* ⚠️ 折叠成单列时必须写 `minmax(0,1fr)`，不能只写 `1fr`。
     裸 `1fr` 的轨道最小值是 `auto`（= 内容的 min-content），所以「把两栏压成一栏」
     并不解决溢出：原来撑破两栏的那段不肯折行的内容，照样把单栏轨道顶到比容器还宽。
     320px 实测：`.grid[style*="1.2fr 1fr"]`（学习中心）折叠后轨道算出 323px、
     容器只有 302px → 整页右溢 21px。换成 minmax(0,1fr) 才是真的「按容器折行」。 */
  .home-grid,.geo-grid,.grid[style*="grid-template-columns:1.2fr 1fr"]{grid-template-columns:minmax(0,1fr) !important}
  .topic-grid{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .hero{padding:44px 26px}
  .hero h1{font-size:2.5333rem}
  .six-grid{grid-template-columns:repeat(2,1fr)}
}
@media print{
  /* 打印一律是白纸黑墨，与屏幕主题无关——所以这里用固定深色而不是主题变量。
     若跟着主题走，深色主题下打出来就是浅字压白纸，几乎看不见。 */
  body{background:#fff;color:#222}
  header,footer,.tl-controls,.btn{display:none !important}
  .card,.stat{border-color:#ddd;background:#fff}
  .sec-head .cn,.modal h2,.stat .num{color:#2C2C2C}
}

/* ---------- 影视关联引擎区块（需求 3.5.1） ---------- */
.fl-wrap{margin-top:20px;padding-top:14px;border-top:1px solid var(--line2)}
.fl-head{font-size:0.8rem;letter-spacing:3px;color:var(--accent);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fl-src{font-size:0.7333rem;letter-spacing:1px;color:var(--tx3)}
.fl-group{margin-top:10px}
.fl-label{font-size:0.8rem;color:var(--tx2);margin-bottom:6px}
.fl-hint{font-size:0.7333rem;color:var(--tx3);margin-left:6px}
.fl-chips{display:flex;gap:8px;flex-wrap:wrap}
.fl-chip{display:inline-flex;flex-direction:column;gap:1px;padding:6px 11px;border-radius:10px;
  background:rgba(var(--accentRGB),.07);border:1px solid var(--line);cursor:pointer;transition:.2s;max-width:240px}
.fl-chip:hover{background:rgba(var(--accentRGB),.15);border-color:rgba(var(--accentRGB),.45)}
.fl-chip b{font-size:0.8667rem;color:var(--tx);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-meta{font-size:0.7rem;color:var(--tx3)}
.fl-star{font-size:0.6667rem;color:var(--accent);letter-spacing:1px}
.fl-empty{font-size:0.8333rem;color:var(--tx3);margin-top:8px}

/* ---------- 时间粒度刻度与选择器（需求 3.1.2） ---------- */
.tl-tick{position:absolute;top:158px;width:1px;height:9px;background:rgba(var(--accentRGB),.25);pointer-events:none;z-index:1}
.tl-tick span{position:absolute;top:11px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:0.6667rem;color:var(--tx3);font-family:var(--serif);letter-spacing:.5px}
.grain-box{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grain-badge{font-size:0.7667rem;color:var(--tx2);letter-spacing:1px;border:1px solid var(--line);
  border-radius:99px;padding:3px 11px;background:rgba(var(--accentRGB),.07)}
.grain-badge b{color:var(--accent2);font-family:var(--serif);font-size:0.8667rem;letter-spacing:2px;margin-left:2px}
.grain-note{font-size:0.7333rem;color:var(--tx3)}

/* ---------- 全站公告（后台系统设置可配） ---------- */
.site-notice{position:relative;z-index:99;max-width:1320px;margin:14px auto 0;padding:9px 16px;
  font-size:0.8667rem;line-height:1.7;color:var(--accent2);
  background:rgba(var(--accentRGB),.09);border:1px solid var(--line);border-radius:11px}
/* ---------- 访问门控面板（gate.js 注入，仅锁站未登录时出现） ---------- */
#shj-gate input:focus{border-color:rgba(var(--accentRGB),.6)!important;box-shadow:0 0 0 3px rgba(var(--accentRGB),.12)}
#shj-gate button:disabled{opacity:.62;cursor:not-allowed}

/* 启动面板（检测中）的三行版式。
   字号之所以走表、不内联在 gate.js 里：品牌行放大到 4.1rem 后，
   「山 河 纪」在 360px 视口下会被挤成两行，只能靠媒体查询在窄屏收回去；
   而内联样式没法被 @media 覆盖。颜色仍留在 gate.js（必须写字面色值：
   遮罩底色是写死的 #0d0b08，取主题变量会在浅色皮肤下撞成看不见）。
   约束：三行必须按同一比例一起缩放，只放大第一行会让它看起来像个错误。 */
.gt-splash{text-align:center;padding:0 16px}
.gt-splash>div{font-family:'Noto Serif SC',STZhongsong,SimSun,serif}
.gt-splash-brand{font-size:4.1rem;font-weight:700;letter-spacing:14px;text-indent:14px;
  line-height:1.28;white-space:nowrap}
.gt-splash-motto{margin-top:24px;font-size:1.7rem;letter-spacing:7px;line-height:1.9}
.gt-splash-by{margin-top:40px;font-size:1.45rem;letter-spacing:7px}
/* 窄屏必须收：4.1rem 的「山 河 纪」（含字间空格与字距）约 328px 宽，
   360px 视口下可用只有约 312px，不收就会折成「山 河 / 纪」。 */
@media (max-width:420px){
  .gt-splash-brand{font-size:3.2rem;letter-spacing:8px;text-indent:8px}
  .gt-splash-motto{margin-top:18px;font-size:1.35rem;letter-spacing:4px}
  .gt-splash-by{margin-top:28px;font-size:1.15rem;letter-spacing:4px}
}

/* ================= 国家变迁（需求 3.2） ================= */
.dv-tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.dv-tabs span{padding:8px 18px;border-radius:9px;font-size:0.9333rem;letter-spacing:1px;cursor:pointer;
  color:var(--tx2);border:1px solid var(--line);background:rgba(var(--accentRGB),.04);transition:.22s}
.dv-tabs span:hover{color:var(--accent2);border-color:rgba(var(--accentRGB),.38)}
.dv-tabs span.on{color:var(--onAccent);background:var(--btnGrad);border-color:transparent;font-weight:700}
/* 并进「地理探索」的人文地理子页签（#gc-tabs）：刻意降一级 ——
   上下两排页签一样重的话，看不出「人文地理」是地理探索下的一个栏目。 */
.dv-tabs.sub{margin-top:-6px;margin-bottom:18px}
.dv-tabs.sub span{padding:6px 14px;font-size:0.8667rem;border-style:dashed}
.dv-tabs.sub span.on{border-style:solid}
.dv-side-tabs{display:flex;gap:6px;margin-bottom:10px}
.dv-side-tabs span{flex:1;text-align:center;padding:6px 0;border-radius:8px;font-size:0.8333rem;cursor:pointer;
  color:var(--tx3);border:1px solid var(--line)}
.dv-side-tabs span.on{color:var(--accent2);border-color:rgba(var(--accentRGB),.45);background:rgba(var(--accentRGB),.1)}
/* 只有「朝代档案」是「左列表 + 右详情」两栏；继承关系 / 文明对比 / 历史总结都是单栏。
   早先把 grid 直接写在 #dv-body 上，而 #dv-body 是所有视图的公共容器，
   于是单栏内容被整块塞进 220px 的左侧列——表现就是「整个页面缩成左边一根竖条，
   文字全被挤断行，右边一大片空白」。布局按视图判断，不能让单栏视图继承两栏。 */
#dv-body.dv-split{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start}
.dv-list{max-height:640px;overflow-y:auto;padding-right:4px}
.dv-item{padding:8px 11px;border-radius:8px;cursor:pointer;margin-bottom:3px;transition:.18s;
  border:1px solid transparent;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dv-item:hover{background:rgba(var(--accentRGB),.07)}
.dv-item.on{background:rgba(var(--accentRGB),.13);border-color:var(--line)}
.dv-item b{font-family:var(--serif);font-size:1rem;color:var(--tx);font-weight:600}
.dv-item.on b{color:var(--accent2)}
.dv-item span{font-size:0.7rem;color:var(--tx3);white-space:nowrap}
.dv-main{min-width:0}
.dv-name{font-family:var(--serif);font-size:2rem;font-weight:700;letter-spacing:3px;color:var(--accent2)}
.dv-span{font-size:0.8333rem;color:var(--tx3);margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dv-head{margin-bottom:16px}
.dv-card{margin-bottom:14px}
.dv-row{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line2)}
.dv-row:last-child{border-bottom:0}
.dv-lab{font-size:0.8333rem;color:var(--accent);letter-spacing:1px}
.dv-val{font-size:0.9rem;color:var(--tx);line-height:1.85}
.dv-caps{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dv-cap{display:inline-flex;flex-direction:column;font-size:0.8667rem;color:var(--tx);
  background:rgba(var(--accentRGB),.08);border:1px solid var(--line);border-radius:7px;padding:3px 9px}
.dv-cap i{font-style:normal;font-size:0.7rem;color:var(--tx3)}
.dv-arrow{color:var(--tx3);font-size:0.8rem}
.dv-sub{font-size:0.8667rem;letter-spacing:2px;color:var(--jade);margin-bottom:8px}
.dv-p{font-size:0.9rem;color:var(--tx2);line-height:1.95;margin-bottom:14px}
.dv-p:last-child{margin-bottom:0}
.dv-eval{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:12px}
.dv-eval-h{font-size:0.8333rem;letter-spacing:1px;margin-bottom:7px}
.dv-eval-h.up{color:var(--jade)}
.dv-eval-h.down{color:var(--red)}
.dv-ul{list-style:none}
.dv-ul li{font-size:0.8667rem;color:var(--tx2);line-height:1.8;padding-left:2px;margin-bottom:6px;display:flex;gap:7px}
.dv-ul .ic{flex:0 0 auto;font-weight:700}
.dv-ul.up .ic{color:var(--jade)}
.dv-ul.down .ic{color:var(--red)}
.dv-sum{margin-top:14px;padding:12px 14px;border-left:3px solid var(--accent);border-radius:0 9px 9px 0;
  background:rgba(var(--accentRGB),.07);font-family:var(--serif);font-size:0.9rem;line-height:1.95;color:var(--accent2)}
/* 继承关系 */
.dv-axis{display:flex;justify-content:space-between;font-size:0.7rem;color:var(--tx3);
  font-family:var(--serif);letter-spacing:1px;padding:0 0 8px 84px;border-bottom:1px solid var(--line2);margin-bottom:10px}
.dv-tree{max-height:620px;overflow-y:auto;padding-right:6px}
.dv-trow{display:flex;align-items:center;gap:12px;height:26px}
.dv-tname{flex:0 0 72px;font-family:var(--serif);font-size:0.8667rem;color:var(--accent2);text-align:right}
.dv-tbar-wrap{flex:1;position:relative;height:26px}
.dv-tbar{position:absolute;top:8px;height:11px;border-radius:6px;
  background:linear-gradient(90deg,rgba(var(--accentRGB),.75),rgba(var(--accentRGB),.35));min-width:3px}
.dv-tyear{position:absolute;top:6px;font-size:0.6667rem;color:var(--tx3);white-space:nowrap;padding-left:4px}
.dv-trel{font-size:0.7333rem;color:var(--tx3);padding:1px 0 1px 84px;display:flex;gap:6px;align-items:center}
.dv-trel .rel-type{font-size:0.6667rem;padding:1px 7px;border-radius:99px;border:1px solid var(--line)}
.dv-trel .rel-type.统一,.dv-trel .rel-type.中兴{color:var(--jade);border-color:rgba(var(--jadeRGB),.45)}
.dv-trel .rel-type.分裂{color:var(--red);border-color:rgba(var(--redRGB),.45)}
.dv-trel .rel-type.南渡{color:var(--blue);border-color:rgba(var(--blueRGB),.45)}
.dv-trel .rel-type.延续{color:var(--tx3)}
.dv-parallel{font-size:0.8333rem;color:var(--tx2);margin-bottom:7px;display:flex;gap:8px;align-items:center}
/* 文明对比 */
.dv-picker{display:flex;flex-wrap:wrap;gap:6px}
.dv-pk{font-size:0.8333rem;padding:6px 12px;border-radius:99px;cursor:pointer;transition:.18s;
  border:1px solid var(--line);color:var(--tx2);display:inline-flex;align-items:baseline;gap:5px}
.dv-pk i{font-style:normal;font-size:0.6667rem;color:var(--tx3)}
.dv-pk:hover{border-color:rgba(var(--accentRGB),.4);color:var(--accent2)}
.dv-pk.on{background:var(--btnGrad);border-color:transparent;color:var(--onAccent);font-weight:700}
.dv-pk.on i{color:rgba(var(--onAccentRGB),.6)}
.dv-cmp th{text-align:center}
.dv-cmp th i{display:block;font-style:normal;font-size:0.7rem;color:var(--tx3);margin-top:2px}
.dv-cmp td{text-align:center;vertical-align:middle}
.dv-dim{text-align:left!important;font-size:0.8667rem;color:var(--accent);min-width:150px}
.dv-dim i{display:block;font-style:normal;font-size:0.7rem;color:var(--tx3);margin-top:2px}
.dv-score{display:flex;align-items:center;gap:8px;justify-content:center}
.dv-score b{font-family:var(--serif);font-size:1.0667rem;color:var(--accent2);min-width:18px}
.dv-score .bar{width:74px}
.dv-why{display:grid;gap:10px;margin-top:16px}
.dv-why-item{font-size:0.8667rem;color:var(--tx2);line-height:1.9;padding-left:12px;border-left:2px solid var(--line)}
.dv-why-item b{color:var(--accent2);margin-right:8px}
.dv-hint{font-size:0.8333rem;color:var(--tx3);line-height:1.9}
@media(max-width:900px){
  /* ⚠️ 必须连 `.dv-split` 一起写。上面两栏那条是 `#dv-body.dv-split`（1 id + 1 class），
     只写 `#dv-body`（1 id）特异度更低 —— 同特异度才比源码顺序，这里根本比不过，
     结果是「以为窄屏已经改单列、实际仍是 220px 两栏」：320px 上内容列只剩 27px，
     胶囊撑破卡片，整页右溢 92px。改前真浏览器实测就是这条在作祟。 */
  #dv-body.dv-split{grid-template-columns:1fr}
  .dv-list{max-height:230px}
  .dv-eval{grid-template-columns:1fr;gap:12px}
  .dv-axis{padding-left:0}
  .dv-trel{padding-left:0}
}

/* ---------- 历史总结（国家变迁 · 第四视图） ---------- */
.ds-list{display:grid;gap:12px}
.ds-item{border:1px solid var(--line2);border-radius:12px;padding:14px 16px;background:rgba(var(--hlRGB),.014)}
.ds-era{font-family:var(--serif);font-size:1.1333rem;font-weight:700;color:var(--accent2);letter-spacing:2px;
  display:flex;align-items:baseline;gap:10px;margin-bottom:11px;
  padding-bottom:9px;border-bottom:1px dashed var(--line2)}
.ds-era i{font-style:normal;font-size:0.7333rem;color:var(--tx3);font-family:var(--sans);letter-spacing:0}
.ds-col{margin-bottom:10px}
.ds-h{font-size:0.8rem;letter-spacing:1px;margin-bottom:5px}
.ds-col.up .ds-h{color:var(--jade)}
.ds-col.down .ds-h{color:var(--red)}
.ds-col ul{list-style:none}
.ds-col li{font-size:0.8533rem;color:var(--tx2);line-height:1.8;padding-left:13px;position:relative;margin-bottom:4px}
.ds-col li::before{position:absolute;left:0;top:0;font-size:0.6667rem}
.ds-col.up li::before{content:"＋";color:var(--jade)}
.ds-col.down li::before{content:"－";color:var(--red)}
.ds-sum{font-family:var(--serif);font-size:0.8667rem;line-height:1.9;color:var(--accent2);
  padding:9px 12px;border-left:2px solid var(--accent);border-radius:0 8px 8px 0;background:rgba(var(--accentRGB),.06)}
.ds-theme{border-top:1px solid var(--line2);padding:15px 0}
.ds-theme:first-of-type{border-top:0}
.ds-theme-h{font-family:var(--serif);font-size:1.0667rem;color:var(--accent2);letter-spacing:2px;
  display:flex;align-items:center;gap:10px;margin-bottom:7px}
.ds-theme-h .n{font-family:var(--sans);font-size:0.7333rem;color:var(--accent);border:1px solid var(--line);
  border-radius:99px;padding:1px 8px;letter-spacing:1px}
.ds-line{font-size:0.8333rem;color:var(--blue);letter-spacing:.5px;margin-bottom:11px;
  padding:7px 11px;background:rgba(var(--blueRGB),.07);border-radius:8px;line-height:1.8}
.ds-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ds-two>div{font-size:0.8533rem;color:var(--tx2);line-height:1.9}
.ds-two b{display:block;margin-bottom:4px;font-size:0.8rem;letter-spacing:1px}
.ds-two .up b{color:var(--jade)}
.ds-two .down b{color:var(--red)}
.ds-verdict{margin-top:18px;border-color:rgba(var(--accentRGB),.35)}
.ds-lead{font-size:0.9rem;color:var(--tx);line-height:1.95;margin-bottom:12px}
.ds-points{list-style:none;counter-reset:dp}
.ds-points li{counter-increment:dp;font-size:0.8667rem;color:var(--tx2);line-height:1.95;
  padding-left:30px;position:relative;margin-bottom:11px}
.ds-points li::before{content:counter(dp);position:absolute;left:0;top:2px;width:19px;height:19px;
  border-radius:50%;background:rgba(var(--accentRGB),.14);border:1px solid var(--line);
  color:var(--accent2);font-size:0.7333rem;display:flex;align-items:center;justify-content:center}
.ds-points li b{color:var(--accent2)}
.ds-tail{margin-top:14px;padding:13px 15px;border-radius:11px;background:rgba(var(--jadeRGB),.08);
  border:1px solid rgba(var(--jadeRGB),.22);font-family:var(--serif);font-size:0.9rem;line-height:1.95;color:var(--jade)}
@media(max-width:900px){.ds-two{grid-template-columns:1fr;gap:10px}}

/* ================= 诗文里的中国 ================= */
.lt-bar{margin-bottom:22px}
.lt-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.lt-filters span{padding:6px 15px;border-radius:99px;font-size:0.8333rem;cursor:pointer;transition:.2s;
  border:1px solid var(--line);color:var(--tx2)}
.lt-filters span:hover{color:var(--accent2);border-color:rgba(var(--accentRGB),.4)}
.lt-filters span.on{background:var(--btnGrad);border-color:transparent;color:var(--onAccent);font-weight:700}
.lt-search{width:100%;max-width:340px;margin-bottom:12px}
.lt-hint{font-size:0.8rem;color:var(--tx3);line-height:1.9}
.lt-era{margin-bottom:30px}
.lt-era-h{font-family:var(--serif);font-size:1.4rem;font-weight:700;letter-spacing:3px;color:var(--accent2);
  display:flex;align-items:baseline;gap:12px;margin-bottom:14px;
  padding-bottom:9px;border-bottom:1px solid var(--line2)}
.lt-era-n{font-size:0.7333rem;color:var(--tx3);font-family:var(--sans);letter-spacing:1px}
.lt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:13px}
.lt-card{cursor:pointer;transition:.22s;padding:14px 16px}
.lt-card:hover{transform:translateY(-3px);border-color:rgba(var(--accentRGB),.42)}
.lt-card-h{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.lt-card-h b{font-family:var(--serif);font-size:1.0667rem;color:var(--tx);font-weight:600;letter-spacing:1px}
.lt-type{flex:0 0 auto;width:19px;height:19px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;
  font-size:0.7rem;background:rgba(var(--accentRGB),.15);color:var(--accent2);border:1px solid var(--line)}
.lt-book{font-size:0.6333rem;padding:1px 7px;border-radius:99px;letter-spacing:.5px;margin-left:auto;white-space:nowrap}
.lt-book.in{color:var(--jade);border:1px solid rgba(var(--jadeRGB),.42);background:rgba(var(--jadeRGB),.09)}
.lt-book.out{color:var(--tx3);border:1px solid var(--line2)}
.lt-meta{font-size:0.7333rem;color:var(--tx3);line-height:1.6;margin-bottom:7px}
.lt-pre{font-family:var(--serif);font-size:0.8533rem;color:var(--tx2);line-height:1.75;opacity:.9}
.lt-modal{max-width:760px;width:100%}
.lt-d-head{margin-bottom:18px;padding-right:34px}
.lt-d-head h2{font-family:var(--serif);font-size:1.6667rem;color:var(--accent2);letter-spacing:2px;margin-bottom:10px}
.lt-d-meta{display:flex;gap:7px;flex-wrap:wrap}
.lt-sec{margin-bottom:17px}
.lt-sec-h{font-size:0.8rem;letter-spacing:3px;color:var(--accent);margin-bottom:7px}
.lt-sec-b{font-size:0.9rem;color:var(--tx2);line-height:2}
.lt-text{font-family:var(--serif);font-size:1.0667rem;line-height:2.25;color:var(--tx);letter-spacing:.5px;
  padding:16px 18px;background:rgba(var(--accentRGB),.055);border:1px solid var(--line);border-radius:12px}
.lt-sec.geo .lt-sec-b{color:var(--blue);background:rgba(var(--blueRGB),.06);
  padding:10px 13px;border-radius:9px;border-left:2px solid rgba(var(--blueRGB),.4)}
.lt-sec.people .lt-sec-b{display:flex;gap:8px;flex-wrap:wrap}
.lt-person{font-size:0.8333rem;padding:5px 12px;border-radius:99px;cursor:pointer;transition:.2s;
  border:1px solid var(--line);color:var(--tx);background:rgba(var(--accentRGB),.07);display:inline-flex;align-items:baseline;gap:6px}
.lt-person i{font-style:normal;font-size:0.6667rem;color:var(--accent)}
.lt-person:hover{border-color:rgba(var(--accentRGB),.5);color:var(--accent2)}
.lt-person.off{opacity:.5;cursor:default}
/* 诗中的地方：与「关联人物」同一套视觉语法（同样的底、同样的字色），
   只在左侧多一个「山川 / 景点」小标签区分跳转目标。
   字色只用 --tx / --accent / --accent2 —— 这三者在所有主题里都有定义，
   换主题时不会掉回兜底色（主题测试卡死了变量键集合）。 */
.lt-sec.spots .lt-sec-b{display:flex;gap:8px;flex-wrap:wrap}
.lt-spot{font-size:0.8333rem;padding:5px 12px;border-radius:99px;cursor:pointer;transition:.2s;
  border:1px solid var(--line);color:var(--tx);background:rgba(var(--accentRGB),.07);
  display:inline-flex;align-items:baseline;gap:6px}
.lt-spot em{font-style:normal;font-size:0.6667rem;padding:1px 6px;border-radius:99px;
  color:var(--accent);border:1px solid rgba(var(--accentRGB),.35)}
.lt-spot i{font-style:normal;font-size:0.6667rem;color:var(--accent2)}
.lt-spot:hover{border-color:rgba(var(--accentRGB),.5);color:var(--accent2)}
.lt-d-foot{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

/* ============================================================
   课本人物全集（textbook-view.js）
   与「深度档案」共用 #figures 页，靠 #fig-tabs 切换。
   ============================================================ */
.tb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.tb-card{cursor:pointer;padding:16px;display:flex;flex-direction:column;gap:8px;transition:.2s}
.tb-card:hover{border-color:rgba(var(--accentRGB),.42);transform:translateY(-2px)}
.tb-card-h{display:flex;align-items:center;gap:10px}
.tb-avatar{flex:0 0 38px;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--serif);font-size:1.2667rem;color:var(--accent2);
  background:linear-gradient(135deg,rgba(var(--accentRGB),.22),rgba(var(--accentRGB),.06));border:1px solid var(--line)}
/* 人物照片：有素材时铺满头像框（cover 裁切，脸在上半部由构建期锚点保证），
   没有素材时退回上面的首字色块 —— 绝不留破图占位 */
.tb-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.tb-d-photo{width:84px;height:84px;border-radius:12px;object-fit:cover;display:block;
  border:1px solid var(--line);background:var(--bg2);float:left;margin:0 14px 10px 0}
.tb-card-t{display:flex;flex-direction:column;min-width:0}
.tb-card-t b{font-family:var(--serif);font-size:1.1333rem;letter-spacing:1px;color:var(--tx)}
.tb-life{font-size:0.7333rem;color:var(--tx3);letter-spacing:.5px}
.tb-tags{display:flex;gap:6px;flex-wrap:wrap}
.tb-era,.tb-field{font-size:0.7333rem;padding:2px 8px;border-radius:6px;letter-spacing:.5px}
.tb-era{color:var(--accent2);background:rgba(var(--accentRGB),.1);border:1px solid rgba(var(--accentRGB),.22)}
.tb-field{color:var(--jade);background:rgba(var(--jadeRGB),.1);border:1px solid rgba(var(--jadeRGB),.22)}
.tb-role{font-size:0.8rem;color:var(--tx2);line-height:1.5}
.tb-pre{font-size:0.8rem;color:var(--tx3);line-height:1.6;border-top:1px dashed var(--line2);padding-top:8px}
.tb-fields{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tb-fields span{font-size:0.8rem;padding:3px 10px;border-radius:7px;cursor:pointer;color:var(--tx3);
  border:1px solid var(--line2);transition:.18s}
.tb-fields span:hover{color:var(--accent2);border-color:rgba(var(--accentRGB),.36)}
.tb-fields span.on{color:var(--onAccent);background:var(--btnGrad);border-color:transparent;font-weight:700}
.tb-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.tb-facts>div{background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.tb-facts span{font-size:0.7333rem;letter-spacing:2px;color:var(--tx3)}
.tb-facts b{font-size:0.8667rem;color:var(--tx);font-weight:500;line-height:1.55}
.tb-lit-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.tb-lit-lb{font-size:0.7333rem;letter-spacing:2px;color:var(--tx3);flex:0 0 100%}
.tb-lit{display:inline-flex;flex-direction:column;gap:1px;padding:6px 11px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);color:var(--tx2);background:rgba(var(--accentRGB),.06);font-size:0.8667rem;transition:.18s}
.tb-lit i{font-style:normal;font-size:0.6667rem;color:var(--tx3)}
.tb-lit:hover{border-color:rgba(var(--accentRGB),.5);color:var(--accent2)}
.tb-dyns{display:flex;gap:8px;flex-wrap:wrap}
.tb-dyn{display:inline-flex;flex-direction:column;gap:1px;padding:6px 12px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(var(--blueRGB),.3);color:var(--tx2);background:rgba(var(--blueRGB),.08);font-size:0.8667rem;transition:.18s}
.tb-dyn i{font-style:normal;font-size:0.6667rem;color:var(--tx3)}
.tb-dyn:hover{border-color:rgba(var(--blueRGB),.6);color:var(--blueTx)}

/* ---- 名录统计条与翻页（textbook-view.js） ----
   名录 200+ 人，先给「有多少 / 分布如何」，再分页给细节。
   条形图用两层 div 而不是 <progress>/canvas：不引第三方库，也不受主题变量失效影响。 */
.tb-stats{padding:16px 18px;display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.tb-stats-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:10px}
.tb-stat{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:11px;
  background:var(--bg2);border:1px solid var(--line2)}
.tb-stat b{font-family:var(--serif);font-size:1.4667rem;line-height:1.1;color:var(--accent2)}
.tb-stat span{font-size:0.8rem;color:var(--tx2)}
.tb-stat i{font-style:normal;font-size:0.6667rem;color:var(--tx3);letter-spacing:.5px}
.tb-dist{display:flex;flex-direction:column;gap:6px}
.tb-dist-h{font-size:0.8rem;letter-spacing:2px;color:var(--accent);margin-bottom:2px}
.tb-dist-h span{letter-spacing:0;color:var(--tx3);font-size:0.72rem}
.tb-dist-row{display:grid;grid-template-columns:76px 1fr 34px;align-items:center;gap:10px;font-size:0.8rem}
.tb-dist-n{color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-dist-bar{height:8px;border-radius:99px;background:rgba(var(--accentRGB),.1);overflow:hidden}
.tb-dist-bar i{display:block;height:100%;border-radius:99px;background:var(--btnGrad)}
.tb-dist-v{text-align:right;color:var(--tx3);font-variant-numeric:tabular-nums}
.tb-dist-more{font-size:0.72rem;color:var(--tx3)}
.tb-pager{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;margin-top:14px}
.tb-pg-size{display:flex;align-items:center;gap:6px;font-size:0.8rem;color:var(--tx3)}
.tb-pg-size span{font-size:0.8rem;padding:3px 10px;border-radius:7px;cursor:pointer;color:var(--tx3);
  border:1px solid var(--line2);transition:.18s}
.tb-pg-size span:hover{color:var(--accent2);border-color:rgba(var(--accentRGB),.36)}
.tb-pg-size span.on{color:var(--onAccent);background:var(--btnGrad);border-color:transparent;font-weight:700}
.tb-pg-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tb-pg-btn,.tb-pg-num{font-size:0.8rem;padding:5px 11px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line2);color:var(--tx2);transition:.18s;user-select:none}
.tb-pg-btn:hover,.tb-pg-num:hover{color:var(--accent2);border-color:rgba(var(--accentRGB),.5)}
.tb-pg-num.on{color:var(--onAccent);background:var(--btnGrad);border-color:transparent;font-weight:700}
/* 首/末页时「上一页/下一页」置灰但仍占位：按钮忽隐忽现会让页码左右跳动 */
.tb-pg-btn.off{opacity:.4;cursor:default}
.tb-pg-btn.off:hover{color:var(--tx2);border-color:var(--line2)}
.tb-pg-gap{color:var(--tx3);padding:0 2px}
.tb-pg-info{margin-left:auto;font-size:0.8rem;color:var(--tx3)}
.tb-pg-info b{color:var(--accent2);font-weight:600}

/* ============================================================
   地理数据库（geo-view.js）
   与「探索游戏」共用 #geo 页，靠 #geo-tabs 切换。
   ============================================================ */
.gv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.gv-card{cursor:pointer;padding:16px;display:flex;flex-direction:column;gap:7px;transition:.2s}
.gv-card:hover{border-color:rgba(var(--accentRGB),.42);transform:translateY(-2px)}
.gv-card-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.gv-card-h b{font-family:var(--serif);font-size:1.1333rem;letter-spacing:1px;color:var(--tx)}
/* 人文地理照片：卡片顶部出血横图（构建期抓取，见 build-images.js）。
   用负外边距把图顶到卡片边缘，视觉上才像「配图」而不是贴在文字上的小方块。 */
.gv-photo{margin:-16px -16px 2px;height:112px;overflow:hidden;border-radius:16px 16px 0 0;background:var(--bg2)}
.gv-photo img{width:100%;height:100%;object-fit:cover;display:block}
.gv-d-photo{width:100%;max-height:220px;object-fit:cover;display:block;
  border-radius:12px;border:1px solid var(--line);background:var(--bg2);margin-bottom:14px}
/* 图说 · 署名：只有在后台给这张图填了才出现（见 photos.js 的 credit()）。
   配色只用各主题都定义过的变量，避免某套主题漏了变量时掉回深色兜底。
   margin-top 取负值把它贴到图片下沿 —— 图片本身有 14px 下边距，
   不改的话图说会飘在下一个字段的上方，看着像属于下一段。 */
.ph-credit{margin:-9px 0 14px;font-size:0.7333rem;line-height:1.7;color:var(--tx3);
  letter-spacing:.3px;text-align:right}
.lt-av{flex:0 0 34px;width:34px;height:34px;border-radius:9px;object-fit:cover;display:block;border:1px solid var(--line)}
.gv-short{font-size:0.7333rem;padding:1px 7px;border-radius:6px;color:var(--accent2);
  background:rgba(var(--accentRGB),.14);border:1px solid rgba(var(--accentRGB),.26)}
.gv-tag{font-size:0.7333rem;padding:1px 8px;border-radius:6px;letter-spacing:.5px;
  color:var(--jade);background:rgba(var(--jadeRGB),.1);border:1px solid rgba(var(--jadeRGB),.22)}
.gv-tag.blue{color:var(--blue);background:rgba(var(--blueRGB),.1);border-color:rgba(var(--blueRGB),.24)}
.gv-meta{font-size:0.8rem;color:var(--tx3);line-height:1.5}
.gv-spec{font-size:0.8333rem;color:var(--tx2);line-height:1.65}
.gv-pre{font-size:0.8rem;color:var(--tx3);line-height:1.65;border-top:1px dashed var(--line2);padding-top:8px}
/* 卡片上的名篇摘要：与「历史意义」摘要同一条虚线分隔，改用金色以示区别 */
.gv-lit{font-size:0.7667rem;color:var(--accent2);line-height:1.6;margin-top:-1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 上面这行是 nowrap。网格/弹性子项默认 min-width:auto，会按「最长的
   不换行内容」计算最小宽度，于是这一行会把整条轨道撑到容器以外 —— 表
   现为窄屏（≤320px）横向溢出，且省略号永远不出现。给所有网格子项显式
   归零最小宽度，让 overflow:hidden 真正生效，而不是靠内容恰好够短。 */
.lt-grid>*,.gv-grid>*,.gc-facts>*,.gc-factors>*,.gc-cmp-h>*,.gc-cmp-r>*,
.sp-levels>*,.sp-planets>*,.sp-earth>*,.sp-sun>*,.sp-impacts>*{min-width:0}
.lt-sec.lit .lt-sec-b{border-left:2px solid rgba(var(--accentRGB),.4);padding-left:11px;
  font-family:var(--serif);font-size:0.9333rem;line-height:2;letter-spacing:.2px}
.gv-block{margin-bottom:18px}
.gv-block-h{font-size:0.9333rem;letter-spacing:2px;color:var(--accent);margin-bottom:12px}
.gv-note{font-size:0.8333rem;color:var(--tx3);line-height:1.75;margin-top:10px;
  padding-left:10px;border-left:2px solid var(--line)}
.gv-chart{width:100%;height:auto;display:block}
.gv-links{display:flex;flex-direction:column;gap:10px}
.gv-link{background:var(--bg2);border:1px solid var(--line2);border-radius:11px;padding:11px 14px}
.gv-link-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:5px}
.gv-link-h b{font-size:0.9rem;color:var(--accent2);font-family:var(--serif);letter-spacing:.5px}
.gv-link-h span{font-size:0.7667rem;color:var(--jade)}

/* ============================================================
   宇宙星球（地理探索的第 3 个页签）
   ------------------------------------------------------------
   这一栏的内容不是「条目」而是「知识点」，版式也跟着换一套：
   口诀条 → 四级台阶 → 行星人设卡 → 地球的条件 → 太阳的脾气 → 小挑战。
   ★ 行星卡左侧那道色条用的是**每颗行星自己的颜色**（--sp，由渲染时内联写上），
     所以这里不写死任何颜色：内联值优先级最高，主题切换也不会盖掉它。
   ============================================================ */
.sp-lead{background:linear-gradient(120deg,rgba(var(--accentRGB),.09),transparent 62%),var(--panel)}
.sp-lead-t{font-family:var(--serif);font-size:1.1667rem;letter-spacing:2px;color:var(--accent)}
.sp-lead-b{margin:10px 0 0;font-size:0.9rem;line-height:1.95;color:var(--tx2)}
.sp-hints{display:grid;gap:8px;margin-top:14px}
.sp-hint{display:flex;gap:9px;align-items:baseline;font-size:0.8333rem;line-height:1.85;color:var(--tx2);
  padding:9px 12px;border-radius:9px;border:1px dashed var(--line2);background:rgba(var(--accentRGB),.04)}
.sp-hint b{flex:0 0 auto;color:var(--accent2);font-weight:600;letter-spacing:1px}
.sp-sec{margin:26px 0 12px;font-family:var(--serif);font-size:1.0333rem;letter-spacing:2px;color:var(--jadeTx)}
.sp-sec:first-child{margin-top:0}

/* 天体系统四级台阶：宽屏并排四格，窄屏两格/一格 */
.sp-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sp-level{position:relative;padding:15px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(var(--hlRGB),.03);min-width:0}
.sp-level-i{font-size:1.5rem;line-height:1}
.sp-level-n{margin-top:7px;font-size:0.9667rem;font-weight:600;color:var(--tx)}
.sp-level-n i{display:block;margin-top:2px;font-family:var(--sans);font-style:normal;
  font-size:0.7rem;letter-spacing:.6px;color:var(--tx3)}
.sp-level-s{margin-top:7px;font-size:0.7333rem;line-height:1.7;color:var(--accent2)}
.sp-level-d{margin-top:6px;font-size:0.8rem;line-height:1.85;color:var(--tx2)}
.sp-level-t{position:absolute;top:13px;right:13px;font-size:0.6667rem;letter-spacing:1px;color:var(--tx3)}

/* 八大行星人设卡 */
.sp-planets{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:12px}
.sp-planet{position:relative;padding:15px 16px 15px 19px;overflow:hidden}
.sp-planet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--sp,#8aa)}
.sp-p-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sp-p-sym{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;
  border-radius:50%;border:1px solid var(--sp,#8aa);color:var(--tx);font-size:0.8rem}
.sp-p-h b{font-family:var(--serif);font-size:1.1rem;letter-spacing:1px;color:var(--tx)}
.sp-p-en{font-size:0.7rem;letter-spacing:.5px;color:var(--tx3)}
.sp-p-cls{margin-left:auto}
.sp-p-tag{margin-top:8px;font-size:0.8333rem;color:var(--accent2);letter-spacing:.5px}
.sp-p-fact{margin-top:7px;font-size:0.82rem;line-height:1.9;color:var(--tx2)}
.sp-p-mem{margin-top:9px;padding-top:8px;border-top:1px dashed var(--line2);
  font-size:0.8rem;line-height:1.8;color:var(--tx3)}

/* 地球的两张安全牌 / 三份礼物 */
.sp-earth,.sp-sun{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.sp-box-h{font-family:var(--serif);font-size:0.9667rem;letter-spacing:1.5px;color:var(--jadeTx);margin-bottom:10px}
.sp-li{display:flex;flex-direction:column;gap:3px;padding:9px 0;border-bottom:1px dashed var(--line2)}
.sp-li:last-child{border-bottom:none}
.sp-li b{font-size:0.8667rem;color:var(--tx)}
.sp-li span{font-size:0.8rem;line-height:1.85;color:var(--tx2)}
.sp-li-s b::before{content:"✦ ";color:var(--accent)}
.sp-note{margin-top:12px;padding:10px 13px;border-radius:9px;font-size:0.8rem;line-height:1.9;
  color:var(--tx2);background:rgba(var(--jadeRGB),.06);border:1px solid var(--line2)}
.sp-p{margin:0;font-size:0.8333rem;line-height:1.9;color:var(--tx2)}
.sp-cycle{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line2);
  font-size:0.8rem;line-height:1.85;color:var(--accent2)}
.sp-table{width:100%;border-collapse:collapse;font-size:0.8rem}
.sp-table th,.sp-table td{text-align:left;padding:8px 8px 8px 0;vertical-align:top;
  border-bottom:1px dashed var(--line2);line-height:1.8}
.sp-table th{font-weight:600;color:var(--tx3);font-size:0.7667rem;letter-spacing:1px}
.sp-table td{color:var(--tx2)}
.sp-table td b{color:var(--tx)}
.sp-layer{display:inline-block;padding:1px 8px;border-radius:99px;font-size:0.7rem;
  color:var(--accent2);border:1px solid var(--line2);white-space:nowrap}
.sp-impacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.sp-imp{padding:11px 12px;border-radius:10px;border:1px solid var(--line2);background:rgba(var(--hlRGB),.03)}
.sp-imp b{display:block;font-size:0.84rem;color:var(--accent2);margin-bottom:5px;letter-spacing:.5px}
.sp-imp span{font-size:0.78rem;line-height:1.8;color:var(--tx2)}

/* 记忆挑战 */
.sp-quiz{display:grid;gap:16px}
.sp-q{padding-bottom:14px;border-bottom:1px dashed var(--line2)}
.sp-q:last-child{padding-bottom:0;border-bottom:none}
.sp-q-t{font-size:0.9rem;color:var(--tx);margin-bottom:10px;line-height:1.8}
.sp-opts{display:flex;gap:8px;flex-wrap:wrap}
.sp-opt{padding:7px 15px;border-radius:99px;border:1px solid var(--line2);background:rgba(var(--hlRGB),.03);
  color:var(--tx2);font-size:0.8333rem;cursor:pointer;transition:.2s;user-select:none}
.sp-opt:hover{border-color:var(--line);color:var(--tx)}
/* 判分色是**固定语义色**（对/错），不跟主题的强调色走：
   换成主题强调色以后，答对与答错可能变成同一个颜色。 */
.sp-opt.on{border-color:rgba(var(--jadeRGB),.75);background:rgba(var(--jadeRGB),.14);color:var(--jadeTx);font-weight:600}
.sp-opt.bad{border-color:rgba(var(--redRGB),.7);background:rgba(var(--redRGB),.12);color:var(--red)}
.sp-why{margin-top:10px;font-size:0.8rem;line-height:1.9;padding:9px 12px;border-radius:9px;
  border:1px solid var(--line2);color:var(--tx2);background:rgba(var(--hlRGB),.03)}
.sp-why.ok{border-color:rgba(var(--jadeRGB),.5)}
.sp-why.no{border-color:rgba(var(--redRGB),.42)}
.gv-link-b{font-size:0.8333rem;color:var(--tx2);line-height:1.75}
.gv-monsoon{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.gv-mstep{display:flex;gap:12px;align-items:baseline;background:var(--bg2);
  border:1px solid var(--line2);border-radius:10px;padding:9px 13px}
.gv-mstep b{flex:0 0 118px;font-size:0.8333rem;color:var(--accent);letter-spacing:.5px}
.gv-mstep span{font-size:0.8333rem;color:var(--tx2);line-height:1.6}
.gv-restypes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.gv-restypes span{font-size:0.8rem;padding:3px 11px;border-radius:7px;color:var(--accent);
  background:rgba(var(--accentRGB),.09);border:1px solid rgba(var(--accentRGB),.22)}
.gv-map{width:100%;height:300px;border-radius:12px;border:1px solid var(--line2);
  background:var(--bg2);overflow:hidden}
.gv-maperr{height:100%;display:flex;align-items:center;justify-content:center;
  font-size:0.8667rem;color:var(--tx3);padding:20px;text-align:center;line-height:1.7}
.gv-modal{max-width:720px}

/* ============================================================
   多语言（i18n.js）：英文界面下的范围说明条
   讲清「哪些已双语、哪些仍是中文、为什么」，而不是假装已全站翻译。
   ============================================================ */
.i18n-scope{max-width:1320px;margin:12px auto 0;padding:11px 16px;border-radius:12px;
  font-size:0.8333rem;line-height:1.75;color:var(--tx2);
  background:rgba(var(--blueRGB),.09);border:1px solid rgba(var(--blueRGB),.26)}
.i18n-scope b{display:block;color:var(--blueTx);letter-spacing:1px;margin-bottom:3px;font-size:0.8333rem}

/* ============================================================
   人文地理（geo-culture-view.js）· 近现代作者（modern-view.js）
   ------------------------------------------------------------
   这里只写这两个文件特有的类；卡片、网格、筛选条直接复用
   geo-view / literature-view 已有的 .gv-* 与 .lt-*，避免三套外观。
   ============================================================ */
.gv-tag.gold{color:var(--accent2);background:rgba(var(--accentRGB),.12);border-color:rgba(var(--accentRGB),.3)}
/* 温度带/干湿区卡片是纯展示，不该有「可点开」的手感 */
.gv-card.gc-static,.gv-card.gc-static:hover{cursor:default;border-color:var(--line2);transform:none}

/* 口径与提示：常驻在每一栏底部，不折叠——读者最易误用的正是这几条 */
.gc-notes{margin-top:22px;padding:16px 18px;display:flex;flex-direction:column;gap:11px}
.gc-note{font-size:0.8rem;line-height:1.9;color:var(--tx3);display:flex;gap:9px;flex-wrap:wrap}
.gc-note b{color:var(--accent2);font-weight:700;flex:0 0 auto;letter-spacing:.5px}

/* 专章 / 气候栏的头块与要点表 */
.gc-hero .lt-hint{margin-bottom:0}
.gc-facts{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:9px}
.gc-fact{display:flex;gap:9px;font-size:0.8333rem;line-height:1.75;padding:9px 12px;
  border-radius:9px;background:rgba(var(--hlRGB),.02);border:1px solid var(--line2)}
.gc-fact b{color:var(--accent2);flex:0 0 auto;min-width:62px}
.gc-fact span{color:var(--tx2)}

/* 「南方热北方冷」的四个因素 */
.gc-factors{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:13px;margin-top:16px}
.gc-factor{background:rgba(var(--hlRGB),.02);padding:15px 16px}
.gc-factor-h{font-size:0.9rem;letter-spacing:1.5px;color:var(--accent2);margin-bottom:8px;font-weight:700}
.gc-factor .lt-sec-b{font-size:0.8667rem;line-height:1.95}
.gc-factor-n{margin-top:9px;padding-top:8px;border-top:1px dashed var(--line2);font-size:0.7667rem}
.gc-caveat{margin-top:16px;color:var(--redTx);border-left:2px solid rgba(var(--redRGB),.55);
  background:rgba(var(--redRGB),.06);padding:11px 13px;border-radius:0 8px 8px 0}

/* 温度带 / 干湿区卡片底部补一行说明 */
.gc-band-note{font-size:0.7667rem;line-height:1.8;color:var(--tx3);margin-top:8px;
  padding-top:8px;border-top:1px dashed var(--line2)}

/* 大陆性气候的三个例子 */
.gc-examples{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.gc-example{display:flex;flex-direction:column;gap:5px;font-size:0.8333rem;line-height:1.85;
  padding:12px 14px;border-radius:10px;background:rgba(var(--hlRGB),.02);border:1px solid var(--line2)}
.gc-example b{color:var(--accent2);font-size:0.8667rem;letter-spacing:.8px}
.gc-ex-fact{color:var(--tx2)}
.gc-ex-why{color:var(--tx3);border-left:2px solid var(--line);padding-left:10px}

/* 南北生活对照表 */
.gc-cmp{margin-top:14px;border:1px solid var(--line2);border-radius:11px;overflow:hidden}
.gc-cmp-h,.gc-cmp-r{display:grid;grid-template-columns:112px 1fr 1fr}
.gc-cmp-h{background:rgba(var(--accentRGB),.1);font-size:0.8rem;letter-spacing:1.5px;color:var(--accent2);font-weight:700}
.gc-cmp-h span,.gc-cmp-r span{padding:10px 13px}
.gc-cmp-r{border-top:1px solid var(--line2);font-size:0.8333rem;line-height:1.8;color:var(--tx2)}
.gc-cmp-r span:first-child{color:var(--tx3)}
.gc-cmp-r span+span{border-left:1px solid var(--line2)}

/* 专章小节正文 */
.gc-sec .gc-sec-b{font-size:0.9rem;line-height:2.05;color:var(--tx2)}
.gc-cmp-note .gc-sec-b{font-size:0.8667rem;line-height:2;color:var(--tx3)}

/* 相关地理事物的 chip：点开即跳到山川档案 */
.gc-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.gc-chip{display:inline-flex;align-items:baseline;gap:7px;cursor:pointer;font-size:0.8667rem;
  padding:7px 14px;border-radius:99px;color:var(--jade);background:rgba(var(--jadeRGB),.08);
  border:1px solid rgba(var(--jadeRGB),.24);transition:.2s}
.gc-chip:hover{border-color:rgba(var(--jadeRGB),.5);color:var(--tx)}
.gc-chip i{font-style:normal;font-size:0.7rem;color:var(--tx3)}

/* 名篇行与跨模块按钮 */
.gc-lit-row{font-family:var(--serif);font-size:0.9333rem;line-height:2;color:var(--tx2)}
.gc-mt{margin-top:12px}

/* 体裁简述条 */
.gc-brief{margin-bottom:14px;padding-left:10px;border-left:2px solid var(--line)}

/* 近现代作者：代表作 chips 与名句 */
.gc-reps{display:flex;gap:8px;flex-wrap:wrap}
.gc-rep{font-size:0.8333rem;padding:5px 12px;border-radius:99px;color:var(--accent2);
  background:rgba(var(--accentRGB),.09);border:1px solid rgba(var(--accentRGB),.24)}
.gc-quote{font-family:var(--serif);font-size:1.0333rem;line-height:2;color:var(--tx);letter-spacing:.4px}
.gc-quote-src{margin-top:8px;font-size:0.8rem;color:var(--tx3);text-align:right}

/* ============================================================
   党史页：按官方四个历史时期分组的重要会议卡片
   文字色一律走主题变量（--tx 正文 / --tx2 次要 / --tx3 更次 /
   --accent2 标签），不使用硬编码色，也不在正文上用 --accent
   ——强调色压在自己 12% 以上的薄纱上会掉到不达标。
   ============================================================ */
.party-intro{margin-bottom:18px}
.party-intro-t{font-size:0.9333rem;letter-spacing:2px;color:var(--accent2);margin-bottom:8px}
.party-intro-p{margin:0;font-size:0.8333rem;line-height:1.95;color:var(--tx2)}

.party-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.party-tabs .chip{padding:6px 14px}
.party-tabs .chip i{font-style:normal;font-size:0.7rem;color:var(--tx3);margin-left:6px}
.party-tabs .chip.on i{color:var(--accent2)}

/* ---------- 党史会议时间轴（从左至右） ----------
   横向铺开而不是竖排：党代会天然是一条「时间—转折」的线，
   横着读才看得出间隔与密度（建国前后密、中间稀），竖着只是一列条目。
   节点用四个时期的配色区分，鼠标悬停给全称，点击跳到下方对应卡片。 */
.party-tl{margin-bottom:18px;padding:16px 6px 10px;overflow-x:auto;overflow-y:hidden}
.party-tl-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:0 12px;margin-bottom:6px}
.party-tl-hd b{font-size:0.8667rem;letter-spacing:2px;color:var(--accent2)}
.party-tl-hd span{font-size:0.7667rem;color:var(--tx3)}
.party-tl-rail{position:relative;display:flex;align-items:flex-start;min-width:max-content;padding:14px 12px 6px}
.party-tl-rail::before{content:'';position:absolute;left:12px;right:12px;top:22px;height:2px;
  background:linear-gradient(90deg,rgba(var(--accentRGB),.15),rgba(var(--accentRGB),.5),rgba(var(--accentRGB),.15))}
.party-tl-node{flex:0 0 auto;width:82px;text-align:center;cursor:pointer;position:relative;transition:.18s}
.party-tl-node:hover{transform:translateY(-2px)}
.party-tl-node .dot{width:11px;height:11px;border-radius:50%;margin:0 auto 7px;position:relative;z-index:1;
  border:2px solid var(--panel);box-shadow:0 0 0 2px rgba(var(--accentRGB),.28)}
.party-tl-node.on .dot{box-shadow:0 0 0 3px rgba(var(--accentRGB),.55)}
.party-tl-node .yr{font-size:0.7333rem;color:var(--tx3);letter-spacing:.5px}
.party-tl-node.on .yr{color:var(--accent2)}
.party-tl-node .nm{font-size:0.7rem;color:var(--tx3);line-height:1.5;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.party-tl-node.on .nm{color:var(--tx)}
/* 四个历史时期配色：与「时期」语义挂钩，不另造一套随机色 */
.party-tl-node.pk-xmd .dot{background:var(--accent2)}
.party-tl-node.pk-jsj .dot{background:var(--jade)}
.party-tl-node.pk-ggk .dot{background:var(--blue,#5b8ff9)}
.party-tl-node.pk-xsd .dot{background:var(--gold,#d4a24c)}
.party-tl-empty{font-size:0.8333rem;color:var(--tx3);padding:0 12px}
/* 从时间轴跳过来时闪一下，否则页面一滚到底，用户不知道落在哪张卡片上 */
.pc-flash{animation:pcFlash 1.6s ease}
@keyframes pcFlash{0%{box-shadow:0 0 0 0 rgba(var(--accentRGB),.55)}100%{box-shadow:0 0 0 14px rgba(var(--accentRGB),0)}}
@media (max-width:640px){.party-tl-node{width:64px}.party-tl-node .nm{font-size:0.66rem}}

.party-list{display:grid;gap:14px}
.party-group{margin-top:8px;padding:14px 18px;border-radius:14px;
  border:1px solid var(--line2);background:rgba(var(--hlRGB),.04)}
.party-group-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.party-group-n{font-family:var(--serif);font-size:1.2rem;font-weight:700;
  letter-spacing:2px;color:var(--accent2)}
.party-group-s{font-size:0.7667rem;color:var(--tx3);letter-spacing:1px}
.party-group-d{margin:8px 0 0;font-size:0.8333rem;line-height:1.9;color:var(--tx2)}

/* 会议卡改成两列栅格：左列是标题与「时间/地点/出席」，右列放配图并跨这两行，
   下面的「主要内容 / 历史意义」通栏铺开。
   为什么用栅格、不用 float 或 absolute：配图高度要跟着标题 + 元信息的高度走，
   栅格的 align-self:stretch 天然做到自适应；float 会让图顶进「主要内容」里，
   absolute 则要写死高度，元信息一换行就穿帮。 */
.pc{padding:18px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:22px}
.pc-hd,.pc-meta{grid-column:1}
.pc-key,.pc-sig{grid-column:1/-1}
.pc-hd{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.pc-n{font-family:var(--serif);font-size:1.3333rem;font-weight:700;
  letter-spacing:2px;color:var(--tx)}
.pc-y{font-family:var(--serif);font-size:1.0667rem;
  letter-spacing:1px;color:var(--accent2)}

/* ---- 会议配图 ----
   「与周边的淡出」用 mask 做：左边与下边渐隐，让图软软地收进卡片底色。
   不要改成「叠一层背景色渐变」——那样会跟着主题底色走，换皮肤就露色带。

   尺寸（用户反馈「会议图片有点小」后放大）：206×104 → 320×176。
   放大前实测只占卡片宽的 18%（1440 档卡片 1143px），确实小到看不清会址门楼。
   ★ 两个尺寸必须**同比例**放，不能只改宽：
     框比 SVG(320×180) 更「扁」时，object-fit:cover 按宽铺满，
     可见的 SVG 横向范围 = [0.32×320, 320] = [102.4, 320] —— 与框的绝对尺寸无关；
     但一旦框的高宽比反超 SVG（宽高比 < 1.7778），cover 会改成按高铺满，
     横向映射整个变掉，五角星的左半边就会滑进左边那道渐隐里（不报错，就是看不见）。
     320/176 = 1.818、250/137 = 1.825，都留了 2% 以上余量。party-images.test.js
     里有一条按 CSS 复算这个宽高比的护栏，改尺寸时它会拦。 */
.pc-fig{grid-column:2;grid-row:1 / span 2;align-self:stretch;position:relative;
  margin:0;width:320px;min-height:176px}
.pc-fig-ph{position:absolute;inset:0;display:block;overflow:hidden;border-radius:12px;
  /* 两段 mask 取交集：Chrome/Safari 走 -webkit(源相入)，Firefox 走标准属性的 intersect。
     两者都不认时只是留下硬边，不会画错内容。 */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%),linear-gradient(0deg,transparent 0,#000 26%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 32%),linear-gradient(0deg,transparent 0,#000 26%);
  mask-composite:intersect}
.pc-fig img{width:100%;height:100%;object-fit:cover;display:block}
/* 图注（第几次大会 + 年份）放在图的右下角——那是渐隐最弱的位置，字看得清。
   它是 .pc-fig-ph 的兄弟而不是子元素，所以不会被 mask 一起淡掉。
   ⚠️ 底色必须用 --panel 这种「不透明面板色」，不能用 --hlRGB 半透明叠加：
   --hlRGB 在浅色主题里是一枚深墨色（拿它做 4% 淡染是对的，做 86% 实心就得到
   近黑底 + 近黑字，图注直接看不见了）。--panel/--tx 本来就是主题里成对定义的一对，
   对比度由主题自己保证。 */
.pc-fig-cap{position:absolute;right:2px;bottom:2px;display:flex;align-items:baseline;gap:6px;
  padding:3px 9px;border-radius:99px;border:1px solid var(--line);
  background:var(--panel);box-shadow:0 1px 6px rgba(0,0,0,.14)}
.pc-fig-cap b{font-family:var(--serif);font-size:0.8rem;font-weight:700;letter-spacing:1px;color:var(--tx)}
.pc-fig-cap i{font-style:normal;font-size:0.7rem;letter-spacing:1px;color:var(--accent2)}
/* 标识图的「示意图」角标：如实告知这不是现场照片 */
.pc-fig-sig{position:absolute;left:26%;top:5px;font-size:0.6333rem;letter-spacing:1px;
  color:var(--tx3);border:1px solid var(--line2);border-radius:4px;padding:0 5px;
  background:var(--panel);opacity:.88}

/* 时间/地点/出席：用 flex + min-width 让长文本自然换行，
   而不是把某个字段挤成竖排单字 */
.pc-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.pc-m{font-size:0.8rem;line-height:1.75;color:var(--tx2);flex:1 1 200px;min-width:0}
.pc-m b{font-weight:400;color:var(--tx3);margin-right:6px;letter-spacing:1px}

.pc-key{margin-top:14px}
.pc-lab{display:inline-block;font-size:0.7333rem;letter-spacing:2px;
  color:var(--accent2);border:1px solid var(--line);border-radius:99px;padding:2px 10px}
.pc-key ul{margin:10px 0 0;padding:0;list-style:none}
.pc-key li{position:relative;padding-left:1.1rem;
  font-size:0.8667rem;line-height:1.95;color:var(--tx);margin-bottom:5px}
.pc-key li::before{content:"◆";position:absolute;left:0;top:0;
  color:var(--accent);font-size:0.6rem;line-height:2.6}

.pc-sig{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line2);
  font-size:0.8667rem;line-height:1.95;color:var(--tx2)}
.pc-sig .pc-lab{margin-right:10px}

@media (max-width:900px){
  .pc{column-gap:16px}
  /* 与基础档同比例缩小（320×176 × 0.781）——只缩宽不缩高会破坏 cover 的映射 */
  .pc-fig{width:250px;min-height:137px}
}
@media (max-width:640px){
  /* 单列：配图提到最上面通栏。渐隐方向随之翻过来——只淡下边，
     否则通栏图会被左边缘的渐隐吃掉一大块内容。 */
  .pc{padding:15px 15px;grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:0}
  /* ★ 高度不能写死成 124px，要用宽高比。
     通栏后框很宽，object-fit:cover 只保留中间一条横带；框越扁，裁掉的上下越多。
     写死 124px 时可见的 SVG 纵向范围随屏宽变化：
       360 宽 → y∈[25.6,120.9]（五角星 y∈[24,107.2]，勉强）
       414 宽 → y∈[34.6,116.6]（星的顶尖被削掉一截）
       640 宽 → 更扁，削得更多
     改成固定宽高比后，裁切量与屏宽无关，恒为 y0 = 90 − 160×(h/w)。
     h/w = 1/2.5 = 0.4 → y0 = 26，星只被削掉约 2 个 SVG 单位（≈1px），肉眼不可见；
     顺带这一档的图也真的变大了（360 宽仍是 ~123px，414 宽 143px，640 宽 230px）。 */
  .pc-fig{grid-column:1;grid-row:1;width:100%;height:auto;aspect-ratio:2.5;
    align-self:start;min-height:0;margin-bottom:12px}
  .pc-fig-ph{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 24%);
    -webkit-mask-composite:source-over;
    mask-image:linear-gradient(0deg,transparent 0,#000 24%);
    mask-composite:add}
  .pc-fig-sig{left:6px}
  .pc-n{font-size:1.2rem}
  .pc-m{flex:1 1 100%}
  .pc-key li,.pc-sig{font-size:0.8333rem}
}

/* ============================================================
   作品库（天下诗文 · 第三个页签）
   ------------------------------------------------------------
   配色一律只用 --tx / --tx2 / --tx3 / --line / --line2 / --accent /
   --accent2 / --accentRGB / --jade / --blue / --redTx 这些在每一套主题里
   都有定义的变量。主题测试卡死了变量键集合，「某套主题少一个变量就掉回
   :root 深色兜底」这类问题不会在这里发生。
   ============================================================ */
.wl-bar{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.wl-count{font-size:0.8rem;color:var(--tx2);line-height:1.7}
.wl-count b{color:var(--accent2)}
.wl-types{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.wl-chip{font-size:0.8rem;padding:5px 13px;border-radius:99px;cursor:pointer;transition:.2s;
  border:1px solid var(--line2);color:var(--tx2)}
.wl-chip b{font-weight:400;color:var(--tx3);margin-left:3px}
.wl-chip:hover{color:var(--accent2);border-color:rgba(var(--accentRGB),.4)}
.wl-chip.on{background:var(--btnGrad);border-color:transparent;color:var(--onAccent);font-weight:700}
.wl-chip.on b{color:var(--onAccent);opacity:.75}

.wl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:13px;margin-top:18px}
.wl-card{cursor:pointer;transition:.22s;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.wl-card:hover{transform:translateY(-3px);border-color:rgba(var(--accentRGB),.42)}
.wl-t{font-family:var(--serif);font-size:1.0667rem;font-weight:600;letter-spacing:1px;color:var(--tx);
  overflow-wrap:anywhere}
.wl-sub{font-size:0.7333rem;color:var(--tx3);line-height:1.6}
.wl-b{font-size:0.8rem;color:var(--tx2);line-height:1.8;flex:1}
.wl-foot{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:2px}
.wl-tag{font-size:0.6667rem;padding:1px 9px;border-radius:99px;letter-spacing:.5px;
  color:var(--accent);border:1px solid var(--line)}
.wl-flag{font-size:0.6333rem;padding:1px 7px;border-radius:99px;letter-spacing:.5px;
  color:var(--jade);border:1px solid rgba(var(--jadeRGB),.42);background:rgba(var(--jadeRGB),.09)}
.wl-flag.book{color:var(--redTx);border-color:rgba(var(--redRGB),.42);background:rgba(var(--redRGB),.09)}
.wl-flag.own{color:var(--blue);border-color:rgba(var(--blueRGB),.42);background:rgba(var(--blueRGB),.09)}
.wl-empty{grid-column:1/-1;font-size:0.8333rem;color:var(--tx3);line-height:2;padding:14px 0}

.wl-mine{margin-top:18px}
.wl-mine-hd{font-size:0.8rem;letter-spacing:3px;color:var(--accent);margin-bottom:7px}
.wl-mine-note{font-size:0.8rem;color:var(--tx3);line-height:1.9;margin-bottom:10px}
.wl-form{display:flex;gap:8px;flex-wrap:wrap}
.wl-preview{margin-top:9px;display:flex;gap:5px;flex-wrap:wrap}
.wl-mine-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line2)}
.wl-mine-row:last-child{border-bottom:0}
.wl-same{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.wl-mini{font-size:0.7667rem;padding:3px 10px;border-radius:99px;cursor:pointer;transition:.2s;
  border:1px solid var(--line2);color:var(--tx2)}
.wl-mini:hover{border-color:rgba(var(--accentRGB),.5);color:var(--accent2)}
.wl-mini.off{cursor:default;opacity:.6}

/* ============================================================
   作品库 · 国别标签 / 来源名片 / 站内全文阅读器
   ------------------------------------------------------------
   只用各主题都定义过的变量（--tx/--tx2/--tx3/--line/--line2/--bg2/--panel/
   --accent/--accent2/--accentRGB/--jade/--jadeRGB）。
   theme.test.js 会检查 var() 是否都有定义，漏一个就会掉回 :root 深色兜底。
   ============================================================ */
/* 域外作品的国别标签：比体裁标签弱一档，避免卡片底部一排同权重标签 */
.wl-tag.nt{color:var(--tx3);border-color:var(--line2);background:transparent}
.wl-flag.full{color:var(--jade);border-color:rgba(var(--jadeRGB),.46);background:rgba(var(--jadeRGB),.1)}

/* 来源名片：一行一张，左边来源名（一眼看出是哪家），右边域名（核对用） */
.wl-src-list{margin-top:8px;display:flex;flex-direction:column;gap:5px}
.wl-src{display:flex;align-items:baseline;gap:10px;text-decoration:none;transition:.2s;
  padding:5px 10px;border-radius:9px;border:1px solid var(--line2);background:var(--bg2)}
.wl-src:hover{border-color:rgba(var(--accentRGB),.45)}
.wl-src .nm{font-size:0.8rem;color:var(--accent2);flex:0 0 auto}
.wl-src .hs{font-size:0.7333rem;color:var(--tx3);word-break:break-all}

/* 站内全文阅读器 */
.wl-full{margin-top:18px;border:1px solid var(--line2);border-radius:14px;background:var(--bg2);overflow:hidden}
.wl-full-hd{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--line2);
  font-size:0.8rem;letter-spacing:3px;color:var(--accent)}
.wl-full-src{font-size:0.7333rem;letter-spacing:0;color:var(--tx3)}
.wl-full-src a{color:var(--accent2);text-decoration:none}
/* 回目目录：横向滚动条带，点多回的书（一百二十回）不占竖向空间 */
.wl-full-nav{display:flex;gap:5px;overflow-x:auto;padding:10px 14px;
  border-bottom:1px solid var(--line2);background:var(--panel)}
.wl-chap{flex:0 0 auto;font-size:0.7333rem;padding:3px 9px;border-radius:99px;cursor:pointer;
  white-space:nowrap;color:var(--tx2);border:1px solid var(--line2);background:transparent;transition:.18s}
.wl-chap:hover{border-color:rgba(var(--accentRGB),.5);color:var(--accent2)}
.wl-chap.on{color:var(--accent2);border-color:rgba(var(--accentRGB),.55);background:rgba(var(--accentRGB),.12)}
.wl-full-body{max-height:52vh;overflow-y:auto;padding:16px 18px}
.wl-chap-t{font-family:var(--serif);font-size:1rem;letter-spacing:1.5px;color:var(--tx);
  margin:0 0 12px;padding-bottom:9px;border-bottom:1px dashed var(--line2)}
.wl-p{font-family:var(--serif);font-size:0.9rem;line-height:2.15;color:var(--tx);margin:0 0 12px;text-align:justify}
.wl-p-t{font-family:var(--serif);font-size:0.9333rem;letter-spacing:2px;color:var(--accent2);
  margin:20px 0 9px;padding-left:9px;border-left:2px solid rgba(var(--accentRGB),.5)}
.wl-p-t:first-of-type{margin-top:8px}
.wl-full-load{font-size:0.8rem;color:var(--tx3);line-height:2}
.wl-full-foot{display:flex;gap:10px;align-items:center;justify-content:center;
  padding:11px 14px;border-top:1px solid var(--line2);background:var(--panel)}
.wl-full-pos{font-size:0.8rem;color:var(--tx3);letter-spacing:1px}
/* 选本（唐诗三百首 / 宋词三百首 / 全元曲）的目录：三百多首平铺成一条横向滚动条
   等于没有目录，改成换行 + 体裁部类小标题（五言古诗 / 乐府 / 七言律诗…） */
.wl-full-nav.grp{flex-wrap:wrap;align-items:center;row-gap:4px}
.wl-part{flex:0 0 auto;width:100%;font-size:0.7333rem;letter-spacing:2px;
  color:var(--accent);margin:7px 0 2px}
.wl-part:first-child{margin-top:0}
/* 选本单首的位置提示 + 「收录于哪一本」 */
.wl-full-at{color:var(--accent2);letter-spacing:0}
.wl-full-sub{font-size:0.7667rem;color:var(--tx3);letter-spacing:1px;margin:-6px 0 12px}
.wl-belongs{margin-top:12px;font-size:0.8rem;color:var(--tx3)}

/* ============================================================
   读史要略（#readhistory）
   ------------------------------------------------------------
   这一页有两层，样式上也要能一眼分开：
     · 「其人其书」= 书目导览卡（.rh-book）——单独一卡，讲清不含原书正文；
     · 「阅读正文」= 板块 + 篇目列表（.rh-era / .rh-list-card）——正文层。
   颜色一律走主题变量（--tx/--tx2/--tx3/--accent2/--line*），
   不要写死颜色：多套主题里写死一种，浅色主题上就是「字在、看不见」。
   ============================================================ */
/* 板块之间的垂直间距。
   这一页的板块全是这两个容器的**直接子级**：
     #rh-pane → .card.rh-intro / .card.rh-book / #rh-body
     #rh-body → .card.rh-era / .card.rh-list-card / .card.rh-rel
   而 .card 自己没有外边距（全站只有 .map-side .card 和 a11y 慢速模式才加 margin-bottom），
   所以 display:block 时它们严丝合缝贴在一起，看着像一整块，层次全丢。
   （用户截图反馈「版块间贴合着了」；实测相邻间距 0—1px，5 张卡全部贴死。）
   ★ 用 grid+gap 而不是给 .card 补 margin-bottom：.card 全站都在用，
     加了会漏进那些已经用 gap 排好的网格里（.fig-grid / .film-grid / .gv-grid …），
     在网格项之间又叠一层 margin，行距就会莫名变宽。 */
#rh-pane,#rh-body{display:grid;gap:18px;align-content:start}

.rh-intro{padding:16px 20px}
.rh-intro-t{font-family:var(--serif);font-size:1rem;letter-spacing:2px;color:var(--accent2);margin-bottom:8px}
.rh-intro-p{margin:0;font-size:0.8333rem;line-height:1.95;color:var(--tx2)}

/* ---------- 其人其书 ---------- */
.rh-book{padding:20px 22px}
.rh-book-t{font-family:var(--serif);font-size:1.1333rem;font-weight:700;letter-spacing:2px;
  color:var(--accent2);margin-bottom:14px}
.rh-book-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.rh-col{min-width:0}
.rh-au-name{font-family:var(--serif);font-size:1.2667rem;letter-spacing:2px;color:var(--tx);
  display:flex;align-items:baseline;gap:10px;margin:6px 0 4px}
.rh-au-name i{font-family:var(--sans);font-style:normal;font-size:0.7667rem;
  letter-spacing:2px;color:var(--tx3);text-transform:uppercase}
.rh-au-meta{font-size:0.8rem;color:var(--tx3);letter-spacing:1px;margin-bottom:10px}
.rh-au-bio{margin:0;padding:0;list-style:none}
.rh-au-bio li{position:relative;padding-left:1.1rem;font-size:0.8333rem;line-height:1.95;
  color:var(--tx2);margin-bottom:4px}
.rh-au-bio li::before{content:"·";position:absolute;left:2px;top:0;color:var(--accent)}

/* ---------- 作者照 + 题赠本：摆在「作者小传」这一列右侧的空白里 ----------
   小传的文字只占左半列，右边一大片是空的，作者照就放这儿（用户截图圈的位置）。
   摆法是**左文右图两列**（.rh-au 是 grid），不是把 <img> 插进文字流：
   小传有 4 条、每条一两行，图插进去换行位置会随图高矮漂移，窄屏还得清浮动。
   ★ 图宽 176px（与截图里圈出的框同宽），2 倍图 352px 由
     server/tools/build-read-history-images.js 生成 —— 改这里要同步改那个工具的 SPEC，
     read-history.test.js 里有一条「CSS 宽高比 vs 生成图实际宽高比」的复算护栏。 */
.rh-au{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
/* 有照片时右列 176px，并在**整块右边**留 26px 呼吸位：
   照片紧贴书目信息栏时两栏挤成一条缝，用户圈出的位置也明显偏左。
   padding 加在 grid 容器上，右列的右边界就整体内收 26px。 */
.rh-au.has-fig{grid-template-columns:minmax(0,1fr) 176px;padding-right:26px}
.rh-au-main{min-width:0}
.rh-au-figs{display:grid;gap:12px}
.rh-fig{margin:0}
/* 图注放在图的**下方**，不压在图上叠字：人像照图上没有稳定的低对比区，
   压字不是糊脸就是糊到背景里。 */
.rh-fig-cap{margin-top:6px;font-size:0.7rem;line-height:1.7;color:var(--tx3);letter-spacing:0.5px}
.rh-fig img{display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid var(--line2);background:var(--panel2);object-fit:cover}
/* ★ 宽高比必须与生成图一致。写错不报错，只会让 cover 多裁一块
   （作者照被裁成一条横带、脸只剩半张），属于「图在、内容不在」那类静默缺陷。
   这里是横长比 176:150，按站主圈出的框定；改这一行必须同步改
   server/tools/build-read-history-images.js 的 SPEC。 */
.rh-fig-portrait img{aspect-ratio:176/150}

.rh-works{display:flex;flex-wrap:wrap;gap:6px}
.rh-work{font-size:0.7667rem;line-height:1.7;padding:3px 10px;border-radius:8px;
  border:1px solid var(--line2);color:var(--tx2)}
.rh-rows{display:grid;gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.rh-row{display:flex;gap:12px;background:var(--panel);padding:8px 12px}
.rh-lab{flex:0 0 5.2rem;font-size:0.7667rem;letter-spacing:1px;color:var(--tx3);line-height:1.85}
.rh-val{flex:1 1 auto;min-width:0;font-size:0.8333rem;line-height:1.85;color:var(--tx);word-break:break-word}
.rh-note{margin-top:14px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line2);background:rgba(var(--hlRGB),.04)}
.rh-note-h{font-size:0.7667rem;letter-spacing:2px;color:var(--accent2);margin-bottom:6px}
.rh-note p{margin:0;font-size:0.8rem;line-height:1.95;color:var(--tx2)}
/* 版权说明要显眼但不刺眼：用强调色左边线提示，不整块染红（红在浅色主题上会糊成一片） */
.rh-warn{border-color:rgba(var(--accentRGB),.35);border-left:3px solid var(--accent)}
.rh-howto{margin:0;padding-left:1.2rem}
.rh-howto li{font-size:0.8rem;line-height:1.95;color:var(--tx2);margin-bottom:3px}
.rh-src{margin:8px 0 0;font-size:0.7333rem;line-height:1.8;color:var(--tx3)}

/* ---------- 板块 ---------- */
.rh-era{padding:18px 20px}
.rh-eras-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.rh-eras-tabs .chip i{font-style:normal;font-size:0.7rem;color:var(--tx3);margin-left:6px}
.rh-eras-tabs .chip.on i{color:var(--accent2)}
.rh-era-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin:18px 0 0}
.rh-era-hd b{font-family:var(--serif);font-size:1.2rem;letter-spacing:2px;color:var(--accent2)}
.rh-era-hd span{font-size:0.7667rem;color:var(--tx3);letter-spacing:1px}
.rh-era-d{margin:8px 0 0;font-size:0.8333rem;line-height:1.95;color:var(--tx2)}
.rh-must{margin-top:14px;padding:12px 14px;border-radius:10px;
  border:1px dashed var(--line2);background:rgba(var(--accentRGB),.04)}
.rh-must-lb{display:block;font-size:0.7333rem;letter-spacing:2px;color:var(--accent2);margin-bottom:8px}
.rh-must-list{display:flex;flex-wrap:wrap;gap:7px}
.rh-must-chip{display:inline-flex;flex-direction:column;gap:2px;cursor:pointer;
  padding:5px 11px;border-radius:9px;border:1px solid var(--line2);
  background:var(--panel);font-size:0.8rem;line-height:1.5;color:var(--tx);transition:.18s}
.rh-must-chip:hover{border-color:rgba(var(--accentRGB),.5);color:var(--accent2)}
.rh-must-chip i{font-style:normal;font-size:0.68rem;color:var(--tx3);letter-spacing:0}
.rh-src-list{margin-top:14px;display:grid;gap:6px}
.rh-src-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  font-size:0.7667rem;line-height:1.8;color:var(--tx3);
  padding:8px 12px;border-radius:9px;border:1px solid var(--line2)}
.rh-src-row b{font-weight:400;color:var(--tx2);letter-spacing:1px}
.rh-src-row i{font-style:normal;flex:1 1 100%;color:var(--tx3)}
/* 来源行是 flex（`b` 标签 + `a` 链接 + 整行的 `i` 说明）。
   原先是 `flex:0 0 auto`：flex-basis=auto 让链接基尺寸取 max-content（=整句不折行的宽度），
   flex-shrink=0 又禁止它收缩 —— 于是长句（「维基文库（原文为公有领域；页面文本依 CC BY-SA 4.0 提供）」）
   在 320px 上把整行撑出 29px，flex-wrap 也救不了（它换的是「行」，不是行内的字）。
   改成可收缩 + 允许在任意字间断行。 */
.rh-src-row a{color:var(--accent2);text-decoration:none;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}

/* ---------- 篇目列表 ---------- */
.rh-list-card{padding:18px 20px}
.rh-read-t{font-family:var(--serif);font-size:1.0667rem;letter-spacing:2px;color:var(--accent2);
  margin-bottom:14px}
.rh-list{display:grid;gap:8px}
.rh-item{cursor:pointer;padding:11px 14px;border-radius:11px;
  border:1px solid var(--line2);background:rgba(var(--hlRGB),.03);transition:.18s}
.rh-item:hover{border-color:rgba(var(--accentRGB),.45);transform:translateY(-1px)}
.rh-it-n{font-family:var(--serif);font-size:0.9667rem;letter-spacing:1px;color:var(--tx);line-height:1.65}
.rh-it-m{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:5px;
  font-size:0.7333rem;letter-spacing:1px;color:var(--tx3)}
.rh-bk{color:var(--accent2)}
.rh-hint{font-size:0.8333rem;color:var(--tx3);line-height:2}
/* 从别处跳过来时闪一下：不然页面一滚到底，用户不知道落在哪一条 */
.rh-flash{animation:pcFlash 1.6s ease}

/* ---------- 翻页 ---------- */
.rh-pager{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.rh-pg-sizes{display:flex;align-items:center;gap:6px}
.rh-lb{font-size:0.7333rem;letter-spacing:1px;color:var(--tx3)}
.rh-pg-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.rh-pg{min-width:1.9rem;text-align:center;padding:3px 7px;border-radius:7px;cursor:pointer;
  font-size:0.8rem;color:var(--tx2);border:1px solid transparent;transition:.18s;user-select:none}
.rh-pg:hover{border-color:var(--line2);color:var(--tx)}
.rh-pg.on{background:rgba(var(--accentRGB),.14);border-color:var(--line);color:var(--accent2)}
.rh-pg.off{opacity:.35;pointer-events:none}
.rh-pg-dot{color:var(--tx3);padding:0 2px;font-size:0.8rem}
.rh-pg-info{margin-left:auto;font-size:0.7667rem;color:var(--tx3);letter-spacing:1px}
.rh-pg-info b{font-weight:400;color:var(--accent2)}

/* ---------- 栏目联动 ---------- */
.rh-rel{padding:18px 20px}
.rh-rel-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:12px}
.rh-rel-t{font-family:var(--serif);font-size:1rem;letter-spacing:2px;color:var(--accent2)}
.rh-rel-s{font-size:0.7667rem;color:var(--tx3);letter-spacing:1px}
.rh-rel-s b{font-weight:400;color:var(--tx2)}
.rh-rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.rh-rel-card{cursor:pointer;padding:12px 14px;border-radius:11px;
  border:1px solid var(--line2);background:rgba(var(--hlRGB),.03);transition:.18s}
.rh-rel-card:hover{border-color:rgba(var(--accentRGB),.45);transform:translateY(-1px)}
.rh-rel-n{font-family:var(--serif);font-size:0.9333rem;letter-spacing:2px;color:var(--tx)}
.rh-rel-w{font-size:0.7333rem;line-height:1.8;color:var(--tx3);margin-top:4px}
.rh-rel-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.rh-rel-tag{font-size:0.68rem;padding:1px 7px;border-radius:99px;
  border:1px solid var(--line2);color:var(--tx2)}

/* ---------- 反向关联块（嵌在朝代档案 / 课本人物详情里） ---------- */
.rh-rel-inline{margin-top:14px;padding:12px 14px;border-radius:11px;
  border:1px dashed rgba(var(--accentRGB),.35);background:rgba(var(--accentRGB),.05)}
.rh-rel-inline-h{font-size:0.7667rem;letter-spacing:1px;color:var(--accent2);margin-bottom:8px}
.rh-rel-chips{display:flex;flex-wrap:wrap;gap:6px}
.rh-rel-chip{cursor:pointer;padding:3px 10px;border-radius:8px;font-size:0.7667rem;
  line-height:1.7;border:1px solid var(--line2);background:var(--panel);color:var(--tx);transition:.18s}
.rh-rel-chip:hover{border-color:rgba(var(--accentRGB),.5);color:var(--accent2)}
.rh-rel-foot{margin-top:9px;font-size:0.7333rem;letter-spacing:1px;
  color:var(--accent2);cursor:pointer}
.rh-rel-foot:hover{text-decoration:underline}

/* ---------- 原文阅读弹窗（.modal.rh-reader） ---------- */
.modal.rh-reader{width:min(920px,100%);padding:26px 30px}
.rh-rd-hd{padding-bottom:14px;border-bottom:1px dashed var(--line2);margin-bottom:14px}
.rh-rd-n{font-family:var(--serif);font-size:1.4rem;font-weight:700;letter-spacing:2px;color:var(--tx)}
.rh-rd-m{font-size:0.7667rem;color:var(--tx3);letter-spacing:1px;margin-top:6px}
.rh-rd-w{color:var(--accent2);margin-left:8px}
.rh-rd-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.rh-rd-body{max-height:58vh;overflow-y:auto;padding-right:6px}
.rh-rd-body p{font-family:var(--serif);font-size:0.9333rem;line-height:2.15;
  color:var(--tx);margin:0 0 12px;text-align:justify}
.rh-rd-ft{margin-top:14px;padding-top:12px;border-top:1px solid var(--line2);
  font-size:0.7333rem;line-height:1.9;color:var(--tx3)}
.rh-rd-ft a{color:var(--accent2);text-decoration:none}
.rh-rd-tip{margin-left:8px}

@media (max-width:900px){
  .rh-book-grid{grid-template-columns:1fr;gap:16px}
}
@media (max-width:640px){
  .rh-book,.rh-era,.rh-list-card,.rh-rel{padding:15px 15px}
  .rh-lab{flex:0 0 4.4rem}
  .rh-it-n{font-size:0.9333rem}
  .rh-pg-info{margin-left:0;flex:1 1 100%}
  .modal.rh-reader{padding:20px 16px}
  .rh-rd-body{max-height:64vh}
  /* 作者照那一块落到文字下面：窄屏上 176px 图 + 文字两列并排，文字只剩 5—7 个字一行。
     图的横向占比在窄屏要收住（max-width），否则宽屏那点「横长小像」的比例被撑成
     一大块横幅人像，先看到的就成了一张脸。 */
  .rh-au.has-fig{grid-template-columns:minmax(0,1fr);padding-right:0}
  .rh-au-figs{grid-template-columns:minmax(0,1fr);max-width:240px}
  .rh-fig-cap{font-size:0.6667rem}
}