: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;
  --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}
body{background:var(--bg);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%);}
::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}
.logo{display:flex;align-items:baseline;gap:12px;cursor:pointer;user-select:none}
.logo .mark{font-family:var(--serif);font-size:1.7333rem;font-weight:900;letter-spacing:6px;
  background:var(--logoGrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo .slog{font-size:0.7333rem;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:0.9rem;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)}
.grid{display:grid;gap:18px}
.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)}
.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}
.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)}
.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}
.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)}
.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}
.hero .acts{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.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}

.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}
.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;
  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)}
.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)}
.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}
.film .poster::after{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)}
.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){
  .home-grid,.geo-grid,.grid[style*="grid-template-columns:1.2fr 1fr"]{grid-template-columns: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}

/* ================= 国家变迁（需求 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}
.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)}
#dv-body{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-body{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}
.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;
  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)}
.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)}

/* ============================================================
   地理数据库（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)}
.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>*{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)}
.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}