/* ============================================================
   山河纪 · 主题层
   ---------------------------------------------------------------
   对应《山河纪 · 多主题风格与全人群适配设计方案》第三、六、七节。

   设计要点，先说清楚，改的时候别踩：

   ① 变量契约。每套主题必须把同一整组变量定义齐（见下）。
      少定义一个不会报错——它会掉回 :root 里的深色兜底值，
      在浅色主题上表现为「一块深色补丁」，很难查。
      因此 test:theme 里有一条测试专门比对各主题的变量键集合是否一致。

   ② --accent / --accent2 / --accent3 不是「金色」，是
      「主强调 / 次强调 / 深强调」。明亮课堂的主强调是天蓝、文旅漫游是山河青。
      （这三者原本叫 --gold*，改名就是为了避免「叫 gold 的变量装着蓝色」。）

   ③ 主题块用 html[data-theme="x"] 而不是 [data-theme="x"]：
      :root 的特异度是 (0,1,0)，属性选择器也是 (0,1,0)，同级靠顺序决胜；
      加上 html 前缀变成 (0,1,1)，可以稳定压过 :root，不依赖加载顺序。

   ④ 文字色必须过 WCAG AA（正文 4.5:1、次要信息 3:1）。
      浅色主题上「浅金」当文字是过不了的（#C9A961 在宣纸底上只有 2.3:1），
      所以浅色主题的 --accent 一律取深一档，浅色只留给渐变收口与图标。
      test:theme 会逐主题实算对比度，不靠肉眼。

   ⑤ 字号基准 --fsBase 由主题决定（明亮课堂 +10%、长者关怀 20px 起），
      --fsScale 由用户在无障碍里无级调节，两者相乘。
      正文字号已全部改为 rem（相对 html），所以调 html 的 font-size
      只会放大文字、不会放大布局，窄屏不会因此溢出。
   ============================================================ */

/* ============================================================
   0 · 兜底变量（等于平台原有的深色外观）
   仅在脚本未执行、或某主题漏定义变量时生效
   ============================================================ */
:root{
  --bg:#0d1017; --bg2:#11151f; --panel:#161b28; --panel2:#1b2132; --deep:#0a0d13;
  --line:rgba(216,178,110,.18); --line2:rgba(255,255,255,.07);
  --tx:#e8e2d4; --tx2:#a89f8c; --tx3:#6f6a5e;
  --accent:#d8b26e; --accent2:#f0d9a8; --accent3:#c89b53;
  --red:#c05a4e; --jade:#5a9e8f; --blue:#6d94c4; --violet:#9a7bb0; --green:#7ba05b;

  --bgRGB:13,16,23; --panelRGB:22,27,40; --txRGB:232,226,212;
  --accentRGB:216,178,110; --accent2RGB:240,217,168; --accent3RGB:200,155,83;
  --redRGB:192,90,78; --jadeRGB:90,158,143; --blueRGB:109,148,196;
  --hlRGB:255,255,255; --shRGB:0,0,0; --onAccentRGB:36,26,8;

  --redTx:#e8a49b; --jadeTx:#8fd0c0; --blueTx:#9ab8de; --onAccent:#241a08;
  --btnGrad:linear-gradient(135deg,#e8ce97,#c89b53);
  --logoGrad:linear-gradient(135deg,#f5e3bb,#d8b26e 45%,#a97f3e);
  --numGrad:linear-gradient(120deg,#f7ead0,#d8b26e 55%,#b3874a);

  --hdBg:rgba(13,16,23,.82); --hdBg2:rgba(13,16,23,.98); --tipBg:rgba(13,16,23,.9);
  --modalBg:linear-gradient(180deg,#1a2030,#12161f);
  --mask:rgba(5,7,12,.72); --posterFade:rgba(10,12,18,.85);
  --cardF:linear-gradient(135deg,#20283c,#171c2a);
  --cardB:linear-gradient(135deg,#2a2318,#1d1810);
  --scroll:#2a3247; --dim:#3a4157;

  --fsBase:1; --lhBase:1; --fsScale:1; --lhScale:1; --dur:1;
}

/* 字号：--fsBase（主题）× --fsScale（用户）。只作用在 font-size 上，
   padding/margin 等布局尺寸仍是 px，故放大字号不会撑破布局。 */
html{font-size:calc(15px * var(--fsBase) * var(--fsScale))}
body{line-height:calc(1.7 * var(--lhBase) * var(--lhScale))}

/* 主题切换时的过渡。切主题不应闪烁，但也不该慢吞吞，
   180ms 足够让人觉得「换过去了」而不像卡顿。 */
body,header,.card,.modal,nav,.dv-tabs span,#pane{
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}

/* ============================================================
   1 · 水墨山河（默认 · 文化熏陶）
   墨黑 #2C2C2C / 宣纸白 #F5F0E8 / 朱砂 #C23A2B / 靛青 #2B5F8A / 金 #C9A961
   ============================================================ */
html[data-theme="ink"]{
  --bg:#F5F0E8; --bg2:#EFE7D8; --panel:#FFFCF5; --panel2:#F8F3E8; --deep:#EAE1D0;
  --line:rgba(44,44,44,.16); --line2:rgba(44,44,44,.09);
  --tx:#2C2C2C; --tx2:#5B544C; --tx3:#877E70;
  --accent:#7A6127; --accent2:#5E4A1B; --accent3:#C9A961;
  --red:#B3311F; --jade:#2E6B5E; --blue:#2B5F8A; --violet:#6C4E8A; --green:#40632F;

  --bgRGB:245,240,232; --panelRGB:255,252,245; --txRGB:44,44,44;
  --accentRGB:122,97,39; --accent2RGB:94,74,27; --accent3RGB:201,169,97;
  --redRGB:179,49,31; --jadeRGB:46,107,94; --blueRGB:43,95,138;
  /* 浅色主题上「次强调」要比主强调更深才读得出来：
     深底上提亮＝更显眼，浅底上提亮＝更看不清，方向是反的 */
  /* 浅底上「提亮」要变成「压暗」——白透明叠在宣纸上什么也看不见 */
  --hlRGB:44,44,44; --shRGB:44,44,44; --onAccentRGB:255,252,245;

  --redTx:#8E2416; --jadeTx:#215448; --blueTx:#204A6E; --onAccent:#FFFCF5;
  --btnGrad:linear-gradient(135deg,#8b7034,#6e5521);
  --logoGrad:linear-gradient(135deg,#7A6127,#2C2C2C);
  --numGrad:linear-gradient(120deg,#9C7D33,#2C2C2C);

  --hdBg:rgba(245,240,232,.86); --hdBg2:rgba(245,240,232,.98); --tipBg:rgba(44,44,44,.92);
  --modalBg:linear-gradient(180deg,#FFFCF5,#F3EEE2);
  --mask:rgba(44,40,32,.46); --posterFade:rgba(44,40,32,.8);
  --cardF:linear-gradient(135deg,#FFFCF5,#F1EBDE);
  --cardB:linear-gradient(135deg,#F7F1E4,#EBE3D2);
  --scroll:#C4B394; --dim:#CFC6B4;

  --serif:"Noto Serif SC","STZhongsong","SimSun",serif;
}
/* 宣纸纹与印章感：这两处是「水墨」的辨识点，值得单独写，而不是靠通用规则近似 */
html[data-theme="ink"] body::before{
  background:radial-gradient(1100px 480px at 78% -8%,rgba(201,169,97,.16),transparent 62%),
             radial-gradient(900px 500px at -8% 32%,rgba(43,95,138,.07),transparent 60%),
             radial-gradient(700px 420px at 62% 108%,rgba(179,49,31,.06),transparent 60%);
}
html[data-theme="ink"] .sec-head .cn,
html[data-theme="ink"] .logo .mark{letter-spacing:4px}
html[data-theme="ink"] .tl-axis{opacity:.85}

/* ============================================================
   2 · 明亮课堂（授课 / 投影）
   纯白 #FFFFFF + 深灰 #333333，主按钮天蓝，强调橙红
   专属：字号默认 +10%、远距离可辨的粗时间轴、大触控目标
   ============================================================ */
html[data-theme="bright"]{
  --bg:#FFFFFF; --bg2:#F4F7FA; --panel:#FFFFFF; --panel2:#F7FAFD; --deep:#EBF0F5;
  --line:rgba(51,51,51,.15); --line2:rgba(51,51,51,.08);
  --tx:#333333; --tx2:#59626D; --tx3:#7C858F;
  --accent:#0B69C7; --accent2:#0A5CA8; --accent3:#1890FF;
  --red:#C43B12; --jade:#0F7B5F; --blue:#0E7490; --violet:#7C3AED; --green:#15803D;

  --bgRGB:255,255,255; --panelRGB:255,255,255; --txRGB:51,51,51;
  --accentRGB:11,105,199; --accent2RGB:10,92,168; --accent3RGB:24,144,255;
  --redRGB:196,59,18; --jadeRGB:15,123,95; --blueRGB:14,116,144;
  --hlRGB:51,51,51; --shRGB:51,51,51; --onAccentRGB:255,255,255;

  --redTx:#A8320E; --jadeTx:#0C6550; --blueTx:#0B5F78; --onAccent:#FFFFFF;
  --btnGrad:linear-gradient(135deg,#1876d1,#0a5699);
  --logoGrad:linear-gradient(135deg,#333333,#0B69C7);
  --numGrad:linear-gradient(120deg,#0B69C7,#333333);

  --hdBg:rgba(255,255,255,.9); --hdBg2:rgba(255,255,255,.99); --tipBg:rgba(34,40,48,.94);
  --modalBg:linear-gradient(180deg,#FFFFFF,#F2F6FA);
  --mask:rgba(28,36,48,.44); --posterFade:rgba(24,30,40,.76);
  --cardF:linear-gradient(135deg,#FFFFFF,#EDF3F9);
  --cardB:linear-gradient(135deg,#F2F7FC,#E6EEF6);
  --scroll:#C0CAD6; --dim:#C8D1DB;

  --serif:var(--sans);      /* 投影场景用无衬线，远看清 */
  --fsBase:1.1;             /* 方案第二（二）节：字号默认放大 10% */
  --lhBase:1.05;
}
html[data-theme="bright"] body::before{
  background:radial-gradient(1000px 460px at 80% -10%,rgba(24,144,255,.09),transparent 60%),
             radial-gradient(800px 460px at -10% 34%,rgba(250,84,28,.05),transparent 60%);
}
/* 3px 粗时间轴 + 大圆点：后排学生也要看得清 */
html[data-theme="bright"] .tl-axis{height:3px;opacity:.9}
html[data-theme="bright"] .evt .dot{transform:scale(1.25)}
html[data-theme="bright"] .btn,
html[data-theme="bright"] .chip{min-height:40px}

/* ============================================================
   3 · 暗夜沉浸（夜读 / 深读）
   深空灰 #1A1A1A + 暗夜蓝 #0F1729 / 月光白 #E0E0E0 / 琥珀橙 #FF9F43 / 紫罗兰 #9B59B6
   ============================================================ */
html[data-theme="night"]{
  --bg:#0F1729; --bg2:#141D33; --panel:#18223A; --panel2:#1E2942; --deep:#0A1120;
  --line:rgba(255,159,67,.2); --line2:rgba(255,255,255,.08);
  --tx:#E0E0E0; --tx2:#9BA7BC; --tx3:#6D798F;
  --accent:#FF9F43; --accent2:#FFC178; --accent3:#D97B22;
  --red:#E0655A; --jade:#3FB68B; --blue:#5B9BE0; --violet:#B77BD6; --green:#5FA84A;

  --bgRGB:15,23,41; --panelRGB:24,34,58; --txRGB:224,224,224;
  --accentRGB:255,159,67; --accent2RGB:255,193,120; --accent3RGB:217,123,34;
  --redRGB:224,101,90; --jadeRGB:63,182,139; --blueRGB:91,155,224;
  --hlRGB:255,255,255; --shRGB:0,0,0; --onAccentRGB:26,16,4;

  --redTx:#F0948A; --jadeTx:#7FD3B4; --blueTx:#9CC3EC; --onAccent:#1A1206;
  --btnGrad:linear-gradient(135deg,#ffb764,#de8628);
  --logoGrad:linear-gradient(135deg,#FFD9A6,#FF9F43 52%,#C46F1A);
  --numGrad:linear-gradient(120deg,#FFD9A6,#FF9F43 55%,#C46F1A);

  --hdBg:rgba(15,23,41,.84); --hdBg2:rgba(15,23,41,.98); --tipBg:rgba(10,17,32,.92);
  --modalBg:linear-gradient(180deg,#1B2540,#101828);
  --mask:rgba(4,7,14,.76); --posterFade:rgba(6,10,20,.86);
  --cardF:linear-gradient(135deg,#1E2942,#141C2E);
  --cardB:linear-gradient(135deg,#2A2418,#1A1710);
  --scroll:#2B3752; --dim:#39456A;

  --serif:"Noto Serif SC","STZhongsong","SimSun",serif;
}
html[data-theme="night"] body::before{
  background:radial-gradient(1200px 520px at 82% -10%,rgba(255,159,67,.1),transparent 62%),
             radial-gradient(900px 520px at -10% 30%,rgba(155,89,182,.07),transparent 60%),
             radial-gradient(700px 420px at 60% 112%,rgba(91,155,224,.06),transparent 60%);
}
/* 发光霓虹时间轴 + 节点光晕：夜读主题的核心观感 */
html[data-theme="night"] .tl-axis{
  box-shadow:0 0 14px rgba(var(--accentRGB),.55),0 0 3px rgba(var(--accentRGB),.8);opacity:.95}
html[data-theme="night"] .evt .dot,
html[data-theme="night"] .tl-node{box-shadow:0 0 12px rgba(var(--accentRGB),.5)}

/* ============================================================
   4 · 童趣探索（低龄 / 亲子）
   天空蓝 #4DA6FF / 草地绿 #6BCB77 / 阳光黄 #FFD93D，浅蓝渐变底
   ============================================================ */
html[data-theme="kids"]{
  --bg:#EAF6FF; --bg2:#DCF0FF; --panel:#FFFFFF; --panel2:#F2FAFF; --deep:#D8ECFC;
  --line:rgba(31,80,120,.16); --line2:rgba(31,80,120,.08);
  --tx:#173B57; --tx2:#41637E; --tx3:#6C8AA1;
  /* 童趣原配色（天空蓝 #4DA6FF / 阳光黄 #FFD93D）明度过高，当文字放在浅蓝底上
     只有 1.2–4.3:1，孩子更看不清。这里把它们下沉一档用作「能读的」强调色，
     原色仍留在缩略图与 accent3 里，观感不变而文字达标。 */
  --accent:#9E5606; --accent2:#15629E; --accent3:#FFD93D;
  --red:#B8321E; --jade:#1F7642; --blue:#0F5F8F; --violet:#6D3FC4; --green:#1F7642;

  --bgRGB:234,246,255; --panelRGB:255,255,255; --txRGB:23,59,87;
  --accentRGB:158,86,6; --accent2RGB:21,98,158; --accent3RGB:255,217,61;
  --redRGB:184,50,30; --jadeRGB:31,118,66; --blueRGB:15,95,143;
  --hlRGB:23,59,87; --shRGB:31,80,120; --onAccentRGB:255,255,255;

  --redTx:#8F2615; --jadeTx:#175A33; --blueTx:#0B4A70; --onAccent:#FFFFFF;
  --btnGrad:linear-gradient(135deg,#2978c2,#124f82);
  --logoGrad:linear-gradient(135deg,#1C7BD0,#2E9E5B);
  --numGrad:linear-gradient(120deg,#1C7BD0,#2E9E5B);

  --hdBg:rgba(234,246,255,.9); --hdBg2:rgba(234,246,255,.99); --tipBg:rgba(24,52,74,.92);
  --modalBg:linear-gradient(180deg,#FFFFFF,#EAF6FF);
  --mask:rgba(20,52,76,.42); --posterFade:rgba(20,52,76,.72);
  --cardF:linear-gradient(135deg,#FFFFFF,#EAF6FF);
  --cardB:linear-gradient(135deg,#F0FAFF,#DCF0FF);
  --scroll:#A9CBE4; --dim:#C2D9EA;

  /* 圆体字：低龄用户对圆角字形的识别快于宋体 */
  --serif:"HYWenHei","Yuanti SC","YouYuan","Microsoft YaHei",sans-serif;
  --sans:"HYWenHei","Yuanti SC","YouYuan","Microsoft YaHei",sans-serif;
  --fsBase:1.07;
}
html[data-theme="kids"] body::before{
  background:radial-gradient(1000px 460px at 78% -8%,rgba(255,217,61,.28),transparent 60%),
             radial-gradient(820px 460px at -8% 30%,rgba(77,166,255,.22),transparent 60%),
             radial-gradient(700px 420px at 64% 108%,rgba(107,203,119,.18),transparent 60%);
}
/* 大圆角 + 弹性动效 */
html[data-theme="kids"] .card,
html[data-theme="kids"] .modal,
html[data-theme="kids"] .stat{border-radius:20px}
html[data-theme="kids"] .btn,
html[data-theme="kids"] .chip,
html[data-theme="kids"] .tabs span{border-radius:99px}
html[data-theme="kids"] .card{transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
html[data-theme="kids"] .card:hover{transform:translateY(-4px) scale(1.012)}
html[data-theme="kids"] .chip,
html[data-theme="kids"] .btn{min-height:40px}

/* ============================================================
   5 · 光影纪元（影视爱好者）
   影院黑 #151515 + 幕布红 #8B0000，胶片暖金 #D4AF37
   ============================================================ */
html[data-theme="film"]{
  --bg:#151515; --bg2:#1C1919; --panel:#222020; --panel2:#2B2727; --deep:#0E0D0D;
  --line:rgba(212,175,55,.2); --line2:rgba(255,255,255,.07);
  --tx:#EDE6DC; --tx2:#A99F94; --tx3:#7C736A;
  --accent:#D4AF37; --accent2:#E8C765; --accent3:#A8842A;
  --red:#E0624F; --jade:#4FA88C; --blue:#6E9BD1; --violet:#B77BD6; --green:#6FA24A;

  --bgRGB:21,21,21; --panelRGB:34,32,32; --txRGB:237,230,220;
  --accentRGB:212,175,55; --accent2RGB:232,199,101; --accent3RGB:168,132,42;
  --redRGB:224,98,79; --jadeRGB:79,168,140; --blueRGB:110,155,209;
  --hlRGB:255,255,255; --shRGB:0,0,0; --onAccentRGB:26,21,8;

  --redTx:#E38C82; --jadeTx:#8FCBB8; --blueTx:#A8C4E4; --onAccent:#1A1508;
  --btnGrad:linear-gradient(135deg,#d4af37,#997c34);
  --logoGrad:linear-gradient(135deg,#E8C765,#D4AF37 50%,#8F6F1F);
  --numGrad:linear-gradient(120deg,#E8C765,#D4AF37 55%,#8F6F1F);

  --hdBg:rgba(18,18,18,.86); --hdBg2:rgba(18,18,18,.98); --tipBg:rgba(12,12,12,.92);
  --modalBg:linear-gradient(180deg,#242121,#141212);
  --mask:rgba(6,5,5,.78); --posterFade:rgba(8,6,6,.9);
  --cardF:linear-gradient(135deg,#2B2727,#1A1818);
  --cardB:linear-gradient(135deg,#2E2718,#1A1610);
  --scroll:#3A3434; --dim:#443E3E;

  --serif:"Noto Serif SC","STZhongsong","SimSun",serif;
}
html[data-theme="film"] body::before{
  /* 胶片颗粒：用两层极细的重复渐变叠加，比贴图轻，且不依赖外部资源 */
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),
             radial-gradient(1100px 500px at 84% -10%,rgba(212,175,55,.1),transparent 62%),
             radial-gradient(800px 480px at -10% 32%,rgba(139,0,0,.18),transparent 60%);
}
html[data-theme="film"] .film .poster,
html[data-theme="film"] .fl-card{border-radius:3px}          /* 场记板/剧照的硬边 */
html[data-theme="film"] .sec-head .cn::before{content:"▶"}

/* ============================================================
   6 · 学者精读（研究者 / 高校师生）
   纸质米白 #FAF8F2 + 墨蓝 #1F3A5F，低饱和、高信息密度
   ============================================================ */
html[data-theme="scholar"]{
  --bg:#FAF8F2; --bg2:#F2EFE6; --panel:#FFFFFF; --panel2:#F7F5EF; --deep:#ECE8DE;
  --line:rgba(31,58,95,.18); --line2:rgba(31,58,95,.09);
  --tx:#232B36; --tx2:#4E5866; --tx3:#767F8B;
  /* accent2 要比 accent 更深（浅色主题的统一定义），原先是更浅的 #2C5282；
     浅色主题上「更浅」会让选中态文字在强调色薄纱上反而变淡。 */
  --accent:#1F3A5F; --accent2:#14283F; --accent3:#A8843C;
  --red:#9B2C2C; --jade:#276749; --blue:#2B6CB0; --violet:#553C9A; --green:#2F6B3F;

  --bgRGB:250,248,242; --panelRGB:255,255,255; --txRGB:35,43,54;
  --accentRGB:31,58,95; --accent2RGB:20,40,63; --accent3RGB:168,132,60;
  --redRGB:155,44,44; --jadeRGB:39,103,73; --blueRGB:43,108,176;
  --hlRGB:35,43,54; --shRGB:31,40,50; --onAccentRGB:255,255,255;

  --redTx:#8A2020; --jadeTx:#1F5940; --blueTx:#235A93; --onAccent:#FFFFFF;
  --btnGrad:linear-gradient(135deg,#2c5282,#182c47);
  --logoGrad:linear-gradient(135deg,#1F3A5F,#232B36);
  --numGrad:linear-gradient(120deg,#1F3A5F,#232B36);

  --hdBg:rgba(250,248,242,.88); --hdBg2:rgba(250,248,242,.99); --tipBg:rgba(28,36,48,.94);
  --modalBg:linear-gradient(180deg,#FFFFFF,#F3F0E8);
  --mask:rgba(31,38,48,.44); --posterFade:rgba(28,34,44,.8);
  --cardF:linear-gradient(135deg,#FFFFFF,#F4F1EA);
  --cardB:linear-gradient(135deg,#F5F2EB,#EAE6DC);
  --scroll:#BCC2CB; --dim:#CDD3DA;

  --serif:"Noto Serif SC","STZhongsong","SimSun",serif;
  --sans:"Noto Serif SC","STZhongsong","SimSun",serif;   /* 正文也用衬线：长文阅读更稳 */
  --lhBase:.94;                                          /* 紧凑行距 → 一屏容纳更多信息 */
  --fsBase:.95;
}
html[data-theme="scholar"] body::before{
  background:radial-gradient(1000px 440px at 82% -10%,rgba(31,58,95,.05),transparent 60%),
             radial-gradient(760px 420px at -10% 34%,rgba(168,132,60,.06),transparent 60%);
}
html[data-theme="scholar"] .card{border-radius:4px}
html[data-theme="scholar"] .sec-head .cn{font-size:1.5rem;letter-spacing:1px}

/* ============================================================
   7 · 长者关怀（银发群体）
   高对比暖白 #FFFDF7 + 深黑 #1A1A1A，稳重赭红 #A0522D
   专属：全站大字号（20px 起）、大点击热区、去除复杂动效
   ============================================================ */
html[data-theme="senior"]{
  --bg:#FFFDF7; --bg2:#FAF6EA; --panel:#FFFFFF; --panel2:#FCFAF2; --deep:#F1EBDC;
  --line:rgba(26,26,26,.26); --line2:rgba(26,26,26,.15);   /* 描边也加深，弱视要看得见边界 */
  --tx:#1A1A1A; --tx2:#3F3F3F; --tx3:#5E5E5E;
  --accent:#A0522D; --accent2:#8B4513; --accent3:#C1794A;
  --red:#A81C1C; --jade:#1A6B4A; --blue:#1C4E86; --violet:#63389C; --green:#2C6B1C;

  --bgRGB:255,253,247; --panelRGB:255,255,255; --txRGB:26,26,26;
  --accentRGB:160,82,45; --accent2RGB:139,69,19; --accent3RGB:193,121,74;
  --redRGB:168,28,28; --jadeRGB:26,107,74; --blueRGB:28,78,134;
  --hlRGB:26,26,26; --shRGB:26,26,26; --onAccentRGB:255,255,255;

  --redTx:#8F1616; --jadeTx:#155C3F; --blueTx:#174272; --onAccent:#FFFFFF;
  --btnGrad:linear-gradient(135deg,#a0522d,#753a1d);
  --logoGrad:linear-gradient(135deg,#8B4513,#1A1A1A);
  --numGrad:linear-gradient(120deg,#A0522D,#1A1A1A);

  --hdBg:rgba(255,253,247,.92); --hdBg2:rgba(255,253,247,.99); --tipBg:rgba(26,26,26,.95);
  --modalBg:linear-gradient(180deg,#FFFFFF,#FBF7EC);
  --mask:rgba(26,26,26,.5); --posterFade:rgba(26,26,26,.82);
  --cardF:linear-gradient(135deg,#FFFFFF,#F7F3E8);
  --cardB:linear-gradient(135deg,#FBF8F0,#F0EBDE);
  --scroll:#A89A85; --dim:#C4B9A6;

  --serif:"Noto Sans SC","Microsoft YaHei",sans-serif;  /* 长者端统一无衬线，笔画更清楚 */
  --sans:"Noto Sans SC","Microsoft YaHei",sans-serif;
  --fsBase:1.34;      /* 15px × 1.34 ≈ 20px，方案第七节「默认 20px 起」 */
  --lhBase:1.06;
}
html[data-theme="senior"] body::before{display:none}   /* 去掉背景装饰，减少视觉噪声 */
html[data-theme="senior"] .evt .dot{transform:scale(1.3)}
html[data-theme="senior"] .btn,
html[data-theme="senior"] .chip{min-height:48px;padding:0 20px}
html[data-theme="senior"] .tag{font-size:1rem;padding:4px 12px}
/* 去除复杂动效：长者对动效最敏感，也最容易因此迷失位置 */
html[data-theme="senior"] .page,
html[data-theme="senior"] .card,
html[data-theme="senior"] .modal,
html[data-theme="senior"] .btn{animation:none !important;transition:none !important}

/* ============================================================
   8 · 文旅漫游（出行 / 游客）
   山河青 #2E8B57 + 大地黄 #C8A165，明亮户外感
   专属：地图优先、实景大图、路线条带
   ============================================================ */
html[data-theme="travel"]{
  --bg:#F6FAF5; --bg2:#EBF4EA; --panel:#FFFFFF; --panel2:#F3F9F2; --deep:#E2EEE1;
  --line:rgba(30,60,42,.17); --line2:rgba(30,60,42,.09);
  --tx:#1B3327; --tx2:#45604E; --tx3:#6E8878;
  --accent:#1E6B46; --accent2:#154D32; --accent3:#C8A165;
  --red:#B5402E; --jade:#1E6B46; --blue:#1C6A87; --violet:#6D3FA0; --green:#2E6B2A;

  --bgRGB:246,250,245; --panelRGB:255,255,255; --txRGB:27,51,39;
  --accentRGB:30,107,70; --accent2RGB:21,77,50; --accent3RGB:200,161,101;
  --redRGB:181,64,46; --jadeRGB:33,113,74; --blueRGB:28,106,135;
  --hlRGB:27,51,39; --shRGB:30,60,42; --onAccentRGB:255,255,255;

  --redTx:#9C3524; --jadeTx:#1B5F3E; --blueTx:#175A73; --onAccent:#FFFFFF;
  --btnGrad:linear-gradient(135deg,#2c8553,#175a3a);
  --logoGrad:linear-gradient(135deg,#21714A,#1B3327);
  --numGrad:linear-gradient(120deg,#2E8B57,#1B3327);

  --hdBg:rgba(246,250,245,.9); --hdBg2:rgba(246,250,245,.99); --tipBg:rgba(24,48,34,.94);
  --modalBg:linear-gradient(180deg,#FFFFFF,#EFF7EE);
  --mask:rgba(20,44,30,.42); --posterFade:rgba(18,40,28,.74);
  --cardF:linear-gradient(135deg,#FFFFFF,#EFF7EE);
  --cardB:linear-gradient(135deg,#F4FAF3,#E4F0E2);
  --scroll:#A9C4AE; --dim:#C2D8C5;

  --serif:"Noto Serif SC","STZhongsong","SimSun",serif;
  --fsBase:1.04;
}
html[data-theme="travel"] body::before{
  background:radial-gradient(1000px 460px at 80% -8%,rgba(200,161,101,.16),transparent 60%),
             radial-gradient(820px 460px at -8% 32%,rgba(46,139,87,.12),transparent 60%);
}
/* 地图优先：把地图容器抬高，让「出发前先看地图」成为默认视角 */
html[data-theme="travel"] #geo-map,
html[data-theme="travel"] #gv-map{min-height:440px}
html[data-theme="travel"] .gv-card img,
html[data-theme="travel"] .gc-card .ph{min-height:132px}

/* ============================================================
   9 · 节日限定皮肤（方案第六（四）节：依据节日推送限定皮肤）
   这三套不强制、不打扰：只在对应日期于主题面板里置顶并打「本期限定」角标。
   用户不切就还是原主题，切了也不会被自动改回去。
   ============================================================ */
html[data-theme="spring"]{        /* 春节 · 红金 */
  --bg:#7A0F14; --bg2:#8C1418; --panel:#8E1A1E; --panel2:#9C2226; --deep:#5E0A0E;
  --line:rgba(245,214,140,.28); --line2:rgba(255,236,190,.13);
  --tx:#FFF3DC; --tx2:#E8C79A; --tx3:#C09A6E;
  --accent:#F0D080; --accent2:#FFE9B0; --accent3:#D9A93E;
  --red:#FF8A6E; --jade:#7FD3A8; --blue:#9CC3EC; --violet:#D8A0E8; --green:#A8D48A;

  --bgRGB:122,15,20; --panelRGB:142,26,30; --txRGB:255,243,220;
  --accentRGB:240,208,128; --accent2RGB:255,233,176; --accent3RGB:217,169,62;
  --redRGB:255,138,110; --jadeRGB:127,211,168; --blueRGB:156,195,236;
  --hlRGB:255,255,255; --shRGB:0,0,0; --onAccentRGB:74,10,12;

  --redTx:#FFB3A0; --jadeTx:#A8E6C8; --blueTx:#C2DAF2; --onAccent:#4A0A0C;
  --btnGrad:linear-gradient(135deg,#ffe9b0,#d9a93e);
  --logoGrad:linear-gradient(135deg,#FFE9B0,#F0D080 50%,#C99A30);
  --numGrad:linear-gradient(120deg,#FFE9B0,#F0D080 55%,#C99A30);

  --hdBg:rgba(110,12,16,.86); --hdBg2:rgba(110,12,16,.98); --tipBg:rgba(74,10,12,.92);
  --modalBg:linear-gradient(180deg,#96201F,#6E0D11);
  --mask:rgba(48,4,6,.74); --posterFade:rgba(48,4,6,.85);
  --cardF:linear-gradient(135deg,#9C2226,#7A1317);
  --cardB:linear-gradient(135deg,#3E2410,#2A1708);
  --scroll:#A83438; --dim:#B05356;
}
html[data-theme="spring"] body::before{
  background:radial-gradient(1100px 500px at 80% -8%,rgba(240,208,128,.18),transparent 62%),
             radial-gradient(800px 460px at -10% 34%,rgba(255,138,110,.14),transparent 60%);
}

html[data-theme="midautumn"]{     /* 中秋 · 月夜 */
  --bg:#0C1526; --bg2:#111D33; --panel:#16243D; --panel2:#1C2D4A; --deep:#08101E;
  --line:rgba(226,226,255,.2); --line2:rgba(255,255,255,.08);
  --tx:#EAF0FF; --tx2:#A8B6D4; --tx3:#78889F;
  --accent:#F2E3A8; --accent2:#FFF6D0; --accent3:#C9B36A;
  --red:#E08A8A; --jade:#7FD3C4; --blue:#8FB6EC; --violet:#B79BE8; --green:#9CCF9A;

  --bgRGB:12,21,38; --panelRGB:22,36,61; --txRGB:234,240,255;
  --accentRGB:242,227,168; --accent2RGB:255,246,208; --accent3RGB:201,179,106;
  --redRGB:224,138,138; --jadeRGB:127,211,196; --blueRGB:143,182,236;
  --hlRGB:255,255,255; --shRGB:0,0,0; --onAccentRGB:28,24,8;

  --redTx:#F0A8A8; --jadeTx:#A8E6DC; --blueTx:#B8D0F6; --onAccent:#1C1808;
  --btnGrad:linear-gradient(135deg,#fff6d0,#c9b36a);
  --logoGrad:linear-gradient(135deg,#FFFFFF,#F2E3A8 55%,#C9B36A);
  --numGrad:linear-gradient(120deg,#FFFFFF,#F2E3A8 55%,#C9B36A);

  --hdBg:rgba(12,21,38,.86); --hdBg2:rgba(12,21,38,.98); --tipBg:rgba(8,16,30,.92);
  --modalBg:linear-gradient(180deg,#1A2A46,#0C1830);
  --mask:rgba(4,8,18,.78); --posterFade:rgba(6,10,22,.86);
  --cardF:linear-gradient(135deg,#1C2D4A,#121E34);
  --cardB:linear-gradient(135deg,#2A2A16,#1A1A0E);
  --scroll:#2A3856; --dim:#3A4868;
}
html[data-theme="midautumn"] body::before{
  background:radial-gradient(520px 520px at 84% -6%,rgba(242,227,168,.2),transparent 62%),
             radial-gradient(1100px 520px at 10% 108%,rgba(143,182,236,.1),transparent 62%);
}

html[data-theme="reading"]{       /* 世界读书日 · 书香 */
  --bg:#F2EFE4; --bg2:#EAE5D6; --panel:#FFFDF6; --panel2:#F6F2E6; --deep:#E3DCC9;
  --line:rgba(58,48,32,.18); --line2:rgba(58,48,32,.09);
  --tx:#2A2418; --tx2:#5A5140; --tx3:#847860;
  /* 三支强调色的语义是「主 / 次（更深）/ 浅（装饰）」，不是「浅 / 中 / 深」。
     这套原先把 accent2 填成比 accent 更浅的中间色，于是选中态文字
     （压在 accent 12~16% 薄纱上）只有 3.95:1。accent2 必须比 accent 更深。 */
  --accent:#6B4A1E; --accent2:#503616; --accent3:#B99A5A;
  --red:#A32B1E; --jade:#2C6B4E; --blue:#2A5578; --violet:#5E4080; --green:#4A6B2A;

  --bgRGB:242,239,228; --panelRGB:255,253,246; --txRGB:42,36,24;
  --accentRGB:107,74,30; --accent2RGB:80,54,22; --accent3RGB:185,154,90;
  --redRGB:163,43,30; --jadeRGB:44,107,78; --blueRGB:42,85,120;
  --hlRGB:42,36,24; --shRGB:58,48,32; --onAccentRGB:255,253,246;

  --redTx:#8A2418; --jadeTx:#215540; --blueTx:#1F4664; --onAccent:#FFFDF6;
  --btnGrad:linear-gradient(135deg,#8a6228,#5a3b14);
  --logoGrad:linear-gradient(135deg,#6B4A1E,#2A2418);
  --numGrad:linear-gradient(120deg,#6B4A1E,#2A2418);

  --hdBg:rgba(242,239,228,.88); --hdBg2:rgba(242,239,228,.98); --tipBg:rgba(42,36,24,.93);
  --modalBg:linear-gradient(180deg,#FFFDF6,#F2EDE0);
  --mask:rgba(42,36,24,.46); --posterFade:rgba(42,36,24,.8);
  --cardF:linear-gradient(135deg,#FFFDF6,#F1ECDD);
  --cardB:linear-gradient(135deg,#F6F2E6,#E8E2CF);
  --scroll:#B8AC90; --dim:#C7BEA8;

  --serif:"Noto Serif SC","STZhongsong","SimSun",serif;
  --sans:"Noto Serif SC","STZhongsong","SimSun",serif;
}

/* ============================================================
   十 · 无障碍覆盖（方案第七节）
   三个开关与所选主题叠加生效，因此必须写在各主题块之后
   （同为 html[attr] 特异度，靠顺序取胜）。
   ============================================================ */

/* 高对比：把正文推到纯黑/纯白，并加重描边。
   深浅由脚本探测主题底色后写在 data-lum 上，两套值分别对应。 */
html[data-a11y-contrast="1"]{--hlRGB:255,255,255}
html[data-a11y-contrast="1"][data-lum="dark"]{
  --bg:#000000; --bg2:#0A0A0A; --panel:#111111; --panel2:#171717; --deep:#000000;
  --tx:#FFFFFF; --tx2:#E6E6E6; --tx3:#C4C4C4;
  --line:rgba(255,255,255,.42); --line2:rgba(255,255,255,.28);
  --hlRGB:255,255,255; --shRGB:0,0,0;
  --hdBg:rgba(0,0,0,.92); --hdBg2:rgba(0,0,0,1); --tipBg:rgba(0,0,0,.96);
  --mask:rgba(0,0,0,.86);
}
html[data-a11y-contrast="1"][data-lum="light"]{
  --bg:#FFFFFF; --bg2:#F4F4F4; --panel:#FFFFFF; --panel2:#F0F0F0; --deep:#E8E8E8;
  --tx:#000000; --tx2:#1F1F1F; --tx3:#3D3D3D;
  --line:rgba(0,0,0,.42); --line2:rgba(0,0,0,.26);
  --hlRGB:0,0,0; --shRGB:0,0,0;
  --mask:rgba(0,0,0,.62);
}
html[data-a11y-contrast="1"] body::before{display:none}
html[data-a11y-contrast="1"] .card,
html[data-a11y-contrast="1"] .stat,
html[data-a11y-contrast="1"] .modal{border-width:2px}
html[data-a11y-contrast="1"] *:focus-visible{outline:3px solid var(--accent) !important;outline-offset:3px}

/* 减少动效：手动开关，与系统的 prefers-reduced-motion 等效。
   responsive.css 里已处理系统偏好，这里处理用户的手动选择。 */
html[data-a11y-motion="0"] *,
html[data-a11y-motion="0"] *::before,
html[data-a11y-motion="0"] *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}
html[data-a11y-motion="0"] html{scroll-behavior:auto}

/* 慢速浏览：每屏只讲一件事（长者关怀的「慢速浏览」模式）。
   不是把字放大，而是把并列内容改为纵向单列、逐条呈现。 */
html[data-a11y-slow="1"] .gv-grid,
html[data-a11y-slow="1"] .lt-grid,
html[data-a11y-slow="1"] .ck-grid,
html[data-a11y-slow="1"] .stat-grid{grid-template-columns:1fr !important}
html[data-a11y-slow="1"] .chip-row,
html[data-a11y-slow="1"] .tabs{flex-wrap:wrap}
html[data-a11y-slow="1"] .card{margin-bottom:18px}
html[data-a11y-slow="1"] .gc-facts,
html[data-a11y-slow="1"] .gc-factors,
html[data-a11y-slow="1"] .gc-cmp{grid-template-columns:1fr !important}

/* ============================================================
   十一 · 主题面板（外观与适配）
   面板自己也是「主题的一部分」：它全部用变量上色，
   所以在浅色主题下也是浅色的，不会出现一块突兀的深色浮层。
   ============================================================ */
.th-mask{position:fixed;inset:0;z-index:320;background:var(--mask);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:24px}
.th-mask.on{display:flex}
.th-panel{width:min(880px,100%);max-height:86vh;display:flex;flex-direction:column;
  background:var(--modalBg);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 30px 80px rgba(var(--shRGB),.55);overflow:hidden;animation:fadeUp .28s ease}
.th-head{display:flex;align-items:flex-start;gap:16px;padding:20px 22px 14px;border-bottom:1px solid var(--line2)}
.th-head h2{margin:0;font-family:var(--serif);font-size:1.3rem;letter-spacing:2px;color:var(--tx)}
.th-head p{margin:5px 0 0;font-size:.82rem;color:var(--tx3);line-height:1.7}
.th-x{margin-left:auto;flex:none;width:34px;height:34px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line2);background:transparent;color:var(--tx2);font-size:1.25rem;line-height:1}
.th-x:hover{color:var(--accent2);border-color:var(--line)}
.th-tabs{display:flex;gap:4px;padding:12px 16px 0;flex-wrap:wrap}
.th-tabs span{padding:6px 13px;border-radius:8px;font-size:.85rem;color:var(--tx2);
  cursor:pointer;border:1px solid transparent;white-space:nowrap}
.th-tabs span:hover{color:var(--accent2)}
.th-tabs span.on{background:var(--btnGrad);color:var(--onAccent);font-weight:700}
.th-body{padding:16px 22px 24px;overflow-y:auto;overscroll-behavior:contain}
.th-sec{font-size:.78rem;letter-spacing:3px;color:var(--accent);margin:16px 0 10px}
.th-sec:first-child{margin-top:2px}
.th-hint{font-size:.8rem;color:var(--tx3);line-height:1.8;margin:0 0 12px}

/* ---------- 皮肤卡片：缩略图 + 说明 ---------- */
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:11px}
.th-grid>*{min-width:0}
.th-card{display:flex;gap:11px;text-align:left;padding:11px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line2);border-radius:12px;
  color:var(--tx);font-family:inherit;transition:border-color .18s,transform .18s}
.th-card:hover{border-color:var(--line);transform:translateY(-2px)}
.th-card.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.th-thumb{flex:none;width:52px;height:66px;border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;border:1px solid rgba(var(--hlRGB),.18)}
.th-thumb i{display:block;flex:1}
.th-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.th-n{font-size:.92rem;font-weight:700;color:var(--tx);display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.th-cur,.th-fest{font-size:.62rem;font-weight:400;letter-spacing:1px;padding:1px 6px;border-radius:99px}
.th-cur{background:rgba(var(--accentRGB),.18);color:var(--accent2);border:1px solid var(--line)}
.th-fest{background:var(--btnGrad);color:var(--onAccent)}
.th-tag{font-size:.68rem;letter-spacing:1px;color:var(--accent)}
.th-desc{font-size:.76rem;color:var(--tx2);line-height:1.6}
.th-aud{font-size:.7rem;color:var(--tx3)}
.th-feat{font-size:.7rem;color:var(--tx3);line-height:1.6;border-top:1px dashed var(--line2);padding-top:5px;margin-top:2px}
.th-festbar{display:block;margin-bottom:12px;padding:9px 13px;border-radius:10px;font-size:.82rem;
  background:rgba(var(--accentRGB),.12);border:1px solid var(--line);color:var(--accent2)}

/* ---------- 人群 ---------- */
.th-grouplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:10px}
.th-grouplist>*{min-width:0}
.th-per{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line2);border-radius:12px;
  color:var(--tx);font-family:inherit;transition:border-color .18s}
.th-per:hover{border-color:var(--line)}
.th-per.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.th-per-none{grid-column:1/-1;margin-top:2px}
.th-per-h{display:flex;align-items:center;gap:8px;font-size:.92rem}
.th-per-h em{font-style:normal;font-size:.62rem;letter-spacing:1px;padding:1px 6px;border-radius:99px;
  background:rgba(var(--accentRGB),.18);color:var(--accent2);border:1px solid var(--line)}
.th-per-r{display:flex;gap:6px;font-size:.74rem;color:var(--tx2);line-height:1.6}
.th-per-r i{font-style:normal;color:var(--tx3);flex:none;min-width:56px}
.th-per-f{font-size:.7rem;color:var(--tx3);border-top:1px dashed var(--line2);padding-top:5px}

/* ---------- 开关与滑块 ---------- */
.th-row{position:relative;display:flex;align-items:center;gap:12px;padding:11px 13px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:11px;cursor:pointer}
.th-row-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.th-row-tx b{font-size:.86rem;font-weight:600;color:var(--tx);white-space:nowrap}
/* 「朗读语速」这类四字标签在窄行里会折成两行，标题被压成两截很难看；
   标签一律不折行，宽度不够时让滑块让位 */
.th-row-tx i{font-style:normal;font-size:.72rem;color:var(--tx3);line-height:1.6}
.th-row input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.th-sw{flex:none;width:44px;height:25px;border-radius:99px;background:var(--deep);
  border:1px solid var(--line);position:relative;transition:background .2s}
.th-sw::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:var(--tx3);transition:transform .2s,background .2s}
.th-row input:checked~.th-sw{background:var(--btnGrad);border-color:transparent}
.th-row input:checked~.th-sw::after{transform:translateX(19px);background:var(--onAccent)}
.th-row input:focus-visible~.th-sw{outline:2px solid var(--accent);outline-offset:2px}
.th-row-rng{cursor:default}
.th-row input[type=range]{flex:none;width:132px;accent-color:var(--accent);
  background:transparent;cursor:pointer}
.th-out{flex:none;min-width:44px;text-align:right;font-size:.76rem;color:var(--accent2);
  font-variant-numeric:tabular-nums}
.th-actions{display:flex;gap:9px;flex-wrap:wrap;margin:4px 0 10px}
.th-presets{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 14px}
.th-pre{width:30px;height:30px;border-radius:8px;cursor:pointer;border:1px solid var(--line)}
.th-pre:hover{transform:scale(1.08)}
.th-row input[type=color]{flex:none;width:42px;height:30px;padding:0;border:1px solid var(--line);
  border-radius:7px;background:transparent;cursor:pointer}

/* 页头入口按钮：与检索按钮同一排，故沿用它的尺寸语言 */
.th-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;flex:none;
  background:rgba(var(--hlRGB),.05);border:1px solid var(--line2);color:var(--tx2);
  border-radius:9px;padding:6px 11px;font-size:.8rem;font-family:inherit;letter-spacing:1px}
.th-toggle:hover{color:var(--accent2);border-color:var(--line)}
.th-toggle .th-dot{width:11px;height:11px;border-radius:3px;background:var(--btnGrad);flex:none}

/* 节日角标：只在对应日期出现，不需要人工开关 */
.th-fest-dot{display:none;width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px rgba(var(--accentRGB),.22)}
html[data-fest="1"] .th-fest-dot{display:block}