/* ===================================================================
   亚当的羊皮卷 · ERA IDENTITY LAYER  (additive — loaded after styles.css)
   ------------------------------------------------------------------
   每一个时代都应当"看起来是另一个世界"。
   本层在不改动任何已有功能的前提下，按 body[data-era] 重新着色
   主题变量、铺设大气层（光/雾/尘），并让背景粒子带上时代体温。

     · athens (palette "sun")  — 阳光、白石、爱琴海蓝 · 高调暖光、金尘上扬
     · soho   (palette "smoke")— 煤气灯、烟煤、瘴气灰绿 · 低调冷雾、煤灰飘移
     · venice (palette "water")— 水光、青铜、潟湖绿（1.2 备用）

   data-era 由 js/era.js 在进入某一幕时设置，离开时清除。
   =================================================================== */

/* =================================================================
   1. 大气层容器 —— 进入某一幕才淡入
   ================================================================= */
#era-atmos,
#era-atmos-fx{
  position:fixed; inset:0; pointer-events:none;
  opacity:0; transition:opacity 1.4s ease;
}
#era-atmos{ z-index:1; }      /* 在内容之后、背景之上：渲染整体色温 */
#era-atmos-fx{ z-index:55; }  /* 在内容之前、HUD 之下：边缘的光/雾框景 */
body[data-era] #era-atmos,
body[data-era] #era-atmos-fx{ opacity:1; }

#era-atmos > *,
#era-atmos-fx > *{ position:absolute; inset:0; }

/* 子层默认隐藏，由具体 era 打开，避免互相叠加 */
.era-wash, .era-beam, .era-fog, .era-dust-mask{ opacity:0; transition:opacity 1.4s ease; }

/* =================================================================
   2. ATHENS · 阳光 / 白石 / 爱琴海
   ================================================================= */
body[data-era="athens"]{
  --gold:#ecbe52;
  --gold-soft:#ffdd86;
  --gold-deep:#9c6f1d;
  --glow-gold:0 0 30px rgba(236,190,82,.5);
  --era-accent2:#5aa6cc;          /* 爱琴海蓝 */
  --era-accent2-soft:#a9d6ec;
}
body[data-era="athens"] .era-wash{
  opacity:1;
  background:
    radial-gradient(130% 85% at 72% -12%, rgba(255,214,138,.26), transparent 55%),
    radial-gradient(110% 80% at 18% 116%, rgba(120,170,160,.10), transparent 60%);
  mix-blend-mode:screen;
}
body[data-era="athens"] .era-beam{
  opacity:1;
  background:
    radial-gradient(120% 62% at 60% -8%, rgba(255,221,140,.27) 0%, transparent 60%),
    linear-gradient(118deg,
      transparent 34%,
      rgba(255,231,160,.24) 49%,
      rgba(255,231,160,.08) 55%,
      transparent 68%);
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 44%, transparent 76%);
          mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 44%, transparent 76%);
  animation:eraBeamDrift 26s ease-in-out infinite alternate;
}
@keyframes eraBeamDrift{
  0%{ transform:translateX(-3%) rotate(.0deg); opacity:.9 }
  100%{ transform:translateX(3%) rotate(1.2deg); opacity:1 }
}

/* Athens 背景虚化层：暖而亮 */
body[data-era="athens"] #bg-cinematic .bg-image{
  filter:blur(16px) brightness(.62) saturate(.98);
}
body[data-era="athens"] #bg-cinematic .bg-overlay{
  background:linear-gradient(180deg, rgba(34,24,9,.46) 0%, rgba(9,8,5,.82) 100%);
}
/* Athens 场景卡 / 立绘：暖、亮、饱和 */
body[data-era="athens"] .l1-scene{
  border-color:rgba(236,190,82,.26);
  background:linear-gradient(170deg, rgba(40,31,18,.82) 0%, rgba(14,12,9,.92) 100%);
}
body[data-era="athens"] .l1-scene-art img{
  filter:brightness(.94) contrast(1.04) saturate(1.14);
}
body[data-era="athens"] .l1-era-hero-bg{
  filter:brightness(.62) contrast(1.04) saturate(1.08);
}

/* =================================================================
   3. SOHO · 煤气灯 / 烟煤 / 瘴气
   ================================================================= */
body[data-era="soho"]{
  --gold:#c89a52;
  --gold-soft:#e8c888;
  --gold-deep:#7a5a24;
  --glow-gold:0 0 26px rgba(200,154,82,.4);
  --era-accent2:#6fa090;          /* 瘴气灰绿 */
  --era-accent2-soft:#a7cabd;
}
body[data-era="soho"] .era-wash{
  opacity:1;
  /* 去掉淡蓝雾气，仅留一点中性暗角压住底部 */
  background:radial-gradient(130% 95% at 50% 124%, rgba(14,16,20,.32), transparent 62%);
}
/* 取消上下的淡蓝灰雾气——苏荷的氛围改由煤灰 + 细雨颗粒承担 */
body[data-era="soho"] .era-fog{ display:none; }
@keyframes eraFogDrift{
  0%{ transform:translateX(-2.5%); opacity:.85 }
  100%{ transform:translateX(2.5%); opacity:1 }
}
/* Soho 背景虚化层：冷而暗、去饱和 */
body[data-era="soho"] #bg-cinematic .bg-image{
  filter:blur(19px) brightness(.36) saturate(.5);
}
body[data-era="soho"] #bg-cinematic .bg-overlay{
  background:linear-gradient(180deg, rgba(14,22,30,.56) 0%, rgba(6,9,12,.9) 100%);
}
/* Soho 场景卡 / 立绘：冷、暗、去饱和（瘴气感） */
body[data-era="soho"] .l1-scene{
  border-color:rgba(122,150,150,.22);
  background:linear-gradient(170deg, rgba(16,23,29,.86) 0%, rgba(8,11,16,.93) 100%);
}
body[data-era="soho"] .l1-scene-art img{
  filter:brightness(.8) contrast(1.07) saturate(.7);
}
body[data-era="soho"] .l1-era-hero-bg{
  filter:brightness(.42) contrast(1.1) saturate(.66);
}

/* =================================================================
   4. VENICE · 水光 / 青铜（1.2 备用占位）
   ================================================================= */
body[data-era="venice"]{
  --gold:#7fb7bd;
  --gold-soft:#bfe6e8;
  --gold-deep:#2f6f74;
  --glow-gold:0 0 28px rgba(127,183,189,.42);
  --era-accent2:#d9b46a;
  --era-accent2-soft:#f0d79e;
}
body[data-era="venice"] .era-wash{
  opacity:1;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(60,120,128,.28), transparent 60%),
    linear-gradient(180deg, rgba(18,40,46,.18) 0%, rgba(6,8,12,0) 44%);
}

/* =================================================================
   5. 术语链接 / 高亮 —— 跟随时代体温
   ================================================================= */
body[data-era="athens"] .term-link{ color:#ffdd86; border-bottom-color:rgba(236,190,82,.5); }
body[data-era="athens"] .term-link:hover{ color:#fff0c0; text-shadow:0 0 9px rgba(236,190,82,.5); }
body[data-era="soho"]   .term-link{ color:#e8c888; border-bottom-color:rgba(200,154,82,.5); }
body[data-era="soho"]   .term-link:hover{ color:#f6e3b0; text-shadow:0 0 9px rgba(200,154,82,.45); }

/* =================================================================
   6. 选项卡交互升级 —— 仅在剧情内启用，主题化的"落子手感"
   ================================================================= */
body[data-era] .opt-btn{
  transition:border-color .3s, background .3s, box-shadow .3s cubic-bezier(.2,.9,.4,1),
             transform .14s cubic-bezier(.2,.9,.4,1);
}
body[data-era] .opt-btn:hover:not(:disabled){
  transform:translateX(8px) translateY(-1px);
  box-shadow:var(--shadow-sm), var(--glow-gold);
}
body[data-era] .opt-btn:active:not(:disabled){
  transform:translateX(8px) scale(.991);
  transition:transform .06s ease;
}
body[data-era="athens"] .opt-btn::after{
  background:radial-gradient(ellipse at left center, rgba(236,190,82,.18), transparent 60%);
}
body[data-era="athens"] .opt-btn .opt-letter{
  background:rgba(236,190,82,.16); border-color:rgba(236,190,82,.42); color:#ffdd86;
}
body[data-era="soho"] .opt-btn::after{
  background:radial-gradient(ellipse at left center, rgba(200,154,82,.16), transparent 60%);
}
body[data-era="soho"] .opt-btn .opt-letter{
  background:rgba(200,154,82,.14); border-color:rgba(200,154,82,.4); color:#e8c888;
}

/* =================================================================
   8. HUD / 整体框架 —— 顶栏与暗角跟随时代体温
   ================================================================= */
body[data-era="athens"] #hud{
  background:linear-gradient(180deg, rgba(20,14,5,.92) 0%, rgba(20,14,5,.5) 100%);
  border-bottom-color:rgba(236,190,82,.24);
}
body[data-era="athens"] #bg-vignette{
  background:radial-gradient(ellipse 92% 72% at 50% 30%, transparent 0%, rgba(20,12,4,.32) 64%, rgba(8,6,3,.92) 100%);
}
body[data-era="soho"] #hud{
  background:linear-gradient(180deg, rgba(8,14,18,.94) 0%, rgba(8,14,18,.52) 100%);
  border-bottom-color:rgba(120,150,150,.22);
}
body[data-era="soho"] #bg-vignette{
  background:radial-gradient(ellipse 86% 66% at 50% 36%, transparent 0%, rgba(8,16,22,.42) 60%, rgba(4,7,10,.96) 100%);
}

/* 进度条 / 卡片光晕跟随强调色（变量已按时代重定义） */
body[data-era] .l1-scene{ box-shadow:var(--shadow); }
body[data-era="athens"] .l1-scene{ box-shadow:var(--shadow), 0 0 50px rgba(236,190,82,.05); }
body[data-era="soho"]   .l1-scene{ box-shadow:var(--shadow), 0 0 50px rgba(70,98,112,.08); }

/* =================================================================
   8.5 落子手感 —— 选中项的"落定"动画 + 其余项后退
       由 engine_l1.js handleChoice 写入 .opt-committing / #l1-options.committed
   ================================================================= */
.opt-btn.opt-committing{
  border-color:var(--gold-soft) !important;
  background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 100%) !important;
  box-shadow:var(--shadow-sm), var(--glow-gold) !important;
  transform:translateX(8px) scale(1.006) !important;
  animation:optCommit .42s cubic-bezier(.2,.9,.3,1);
  z-index:2;
}
.opt-btn.opt-committing::before{ transform:scaleY(1) !important; }
.opt-btn.opt-committing::after{ opacity:1 !important; animation:optGlow .55s ease-out; }
.opt-btn.opt-committing .opt-letter{
  background:var(--gold) !important; color:var(--bg-deep) !important;
  border-color:var(--gold) !important;
  box-shadow:0 0 20px var(--glow-gold);
  transform:translateY(-50%) scale(1.08);
}
@keyframes optCommit{
  0%{   transform:translateX(6px) scale(.992) }
  45%{  transform:translateX(11px) scale(1.014) }
  100%{ transform:translateX(8px) scale(1.006) }
}
@keyframes optGlow{
  0%{ opacity:.1 } 45%{ opacity:1 } 100%{ opacity:.55 }
}
/* 未被选中的选项：安静地后退 */
#l1-options.committed .opt-btn:not(.opt-committing){
  opacity:.3; filter:saturate(.55);
  transform:translateX(0) scale(.99);
  transition:opacity .38s ease, filter .38s ease, transform .38s ease;
  box-shadow:none;
}
@media (prefers-reduced-motion:reduce){
  .opt-btn.opt-committing{ animation:none; }
  .opt-btn.opt-committing::after{ animation:none; }
}

/* =================================================================
   8.6 场景转场 —— 每进入一个节点，场景卡按时代的方式"现身"
       (renderCurrent 每次重建 .l1-scene，动画随之重放)
   ================================================================= */
/* 仅当「过场效果」关闭时启用「场景现身」入场；开启过场时入场交给转场遮罩 */
body:not(.cutscene-on)[data-era] .l1-scene{ animation:sceneEnter .5s cubic-bezier(.2,.8,.3,1) both; }
@keyframes sceneEnter{
  from{ opacity:0; transform:translateY(10px) }
  to{   opacity:1; transform:none }
}
/* 雅典：晨光绽开（自亮而稳） */
body:not(.cutscene-on)[data-era="athens"] .l1-scene{ animation:sceneEnterAthens .55s cubic-bezier(.2,.8,.3,1) both; }
@keyframes sceneEnterAthens{
  from{ opacity:0; transform:translateY(8px); filter:brightness(1.28) saturate(1.2) }
  to{   opacity:1; transform:none;          filter:none }
}
/* 苏荷：真实烟雾散开（由 engine_l1.js 的 canvas 粒子系统呈现）。
   卡片本身不做「模糊→清晰」之类的变化，纯靠烟雾物理粒子向外飘散、消散来揭开画面。 */
body:not(.cutscene-on)[data-era="soho"] .l1-scene{ animation:none; }

/* 真实烟雾粒子层：engine_l1.js 注入的 <canvas>，铺满 .l1-scene-art，粒子四散飘升后消散 */
.scene-smoke-canvas{ position:fixed; pointer-events:none; z-index:45; }   /* 贴 body、固定跟随剧照；left/top/尺寸由 JS 内联 */

body.res-low:not(.cutscene-on)[data-era]:not([data-era="soho"]) .l1-scene{ animation:sceneEnter .4s ease both; }
@media (prefers-reduced-motion:reduce){
  body[data-era] .l1-scene,
  body[data-era="athens"] .l1-scene,
  body[data-era="soho"] .l1-scene{ animation:none; }
  .scene-smoke-canvas{ display:none; }
}

/* =================================================================
   9. 性能 / 无障碍 —— 低画质或减弱动效时关闭大气动画
   ================================================================= */
body.res-low #era-atmos-fx,
body.res-low .era-beam,
body.res-low .era-fog{ animation:none; }
body.res-low #era-atmos-fx{ opacity:.5; }

@media (prefers-reduced-motion:reduce){
  .era-beam, .era-fog{ animation:none !important; }
}

/* =================================================================
   10. 选幕卡（时空 HUB）—— 每个世界的体温写在卡面上
      由 cinematic.js renderStages 写入 .era-card[data-era]
   ================================================================= */
.era-card[data-era="athens"]{ border-color:rgba(236,190,82,.30); }
.era-card[data-era="athens"] .era-card-bg{ filter:brightness(.6) contrast(1.06) saturate(1.12); }
.era-card[data-era="athens"] .era-card-gradient{
  background:linear-gradient(180deg,
    rgba(40,28,10,0) 0%, rgba(30,20,7,.42) 42%, rgba(8,7,4,.95) 100%);
}
.era-card[data-era="athens"] .era-card-name,
.era-card[data-era="athens"] .era-card-era{ color:#ffdd86; }
.era-card[data-era="athens"]:hover:not(.locked){
  border-color:#ecbe52;
  box-shadow:var(--shadow-lg), 0 0 46px rgba(236,190,82,.22);
}
.era-card[data-era="athens"]:hover:not(.locked) .era-card-bg{
  filter:brightness(.96) contrast(1.06) saturate(1.18);   /* 悬停亮度 +30% (.74→.96) */
}

.era-card[data-era="soho"]{ border-color:rgba(122,150,150,.26); }
.era-card[data-era="soho"] .era-card-bg{ filter:brightness(.68) contrast(1.12) saturate(.62); }  /* 基础亮度再 +20% (.57→.68) */
.era-card[data-era="soho"] .era-card-gradient{
  background:linear-gradient(180deg,
    rgba(12,20,28,0) 0%, rgba(10,18,26,.5) 40%, rgba(4,7,11,.96) 100%);
}
.era-card[data-era="soho"] .era-card-name{ color:#d9c79a; }
.era-card[data-era="soho"] .era-card-era{ color:#8fb0a4; }
.era-card[data-era="soho"]:hover:not(.locked){
  border-color:#7fa093;
  box-shadow:var(--shadow-lg), 0 0 46px rgba(90,120,128,.26);
}
.era-card[data-era="soho"]:hover:not(.locked) .era-card-bg{
  filter:brightness(1.15) contrast(1.12) saturate(.66);   /* 悬停亮度再 +35% (.85→1.15) */
}

.era-card[data-era="venice"]{ border-color:rgba(127,183,189,.28); }
.era-card[data-era="venice"] .era-card-bg{ filter:brightness(.5) contrast(1.06) saturate(.95) hue-rotate(-6deg); }
.era-card[data-era="venice"] .era-card-name,
.era-card[data-era="venice"] .era-card-era{ color:#bfe6e8; }

/* =================================================================
   12. 交互动效 —— HUD 数值跳动 / 术语卡片 / 习得新知
   ================================================================= */
/* HUD：数值缓动 + 冒出的 +N / −N 飘字 */
#hud .hud-stat{ position:relative; overflow:visible; }
.hud-stat-delta{
  position:absolute; right:8px; top:-3px; z-index:6; pointer-events:none;
  font-size:12px; font-weight:700; letter-spacing:.03em;
  font-variant-numeric:tabular-nums; text-shadow:0 2px 8px rgba(0,0,0,.65);
  animation:hudDelta 1.15s cubic-bezier(.2,.8,.3,1) forwards;
}
.hud-stat-delta.pos{ color:var(--gold-soft, #f3d77a); }
.hud-stat-delta.neg{ color:var(--red-soft, #e88670); }
@keyframes hudDelta{
  0%{   opacity:0; transform:translateY(5px) scale(.8); }
  22%{  opacity:1; transform:translateY(-6px) scale(1.06); }
  100%{ opacity:0; transform:translateY(-28px) scale(1); }
}

/* 术语卡片：自右侧滑入更有质感 + 左缘强调条 + 时代体温 */
#story-panel{
  transition:opacity .32s cubic-bezier(.2,.8,.3,1), transform .32s cubic-bezier(.2,.8,.3,1);
  transform:translateY(-6px) translateX(12px) scale(.97);
}
#story-panel.visible{ transform:translateY(0) translateX(0) scale(1); }
#story-panel::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0;
  background:linear-gradient(180deg, transparent, var(--gold, #d4af37) 35%, var(--gold, #d4af37) 65%, transparent);
  opacity:.85;
}
#story-panel .term{ color:var(--gold-soft, #f3d77a); }
body[data-era="athens"] #story-panel{ border-color:rgba(236,190,82,.45); }
body[data-era="soho"]   #story-panel{ border-color:rgba(160,180,180,.42); }

/* 习得新知：保留翻牌动画，叠加时代光晕 + 一次扫光 */
.knowledge-card{ position:relative; overflow:hidden; }
.knowledge-card::after{
  content:""; position:absolute; top:0; left:-65%; width:55%; height:100%; pointer-events:none;
  background:linear-gradient(105deg, transparent, rgba(255,248,230,.20), transparent);
  transform:skewX(-18deg); animation:cardSheen 1.5s ease .55s 1;
}
@keyframes cardSheen{ from{ left:-65%; } to{ left:130%; } }
body[data-era="athens"] .knowledge-card{ box-shadow:0 0 80px rgba(236,190,82,.5), inset 0 0 30px rgba(236,190,82,.1); }
body[data-era="soho"]   .knowledge-card{ box-shadow:0 0 80px rgba(110,150,150,.46), inset 0 0 30px rgba(110,150,150,.1); }

@media (prefers-reduced-motion:reduce){
  .hud-stat-delta, .knowledge-card::after{ animation:none; }
}

/* =================================================================
   11. 经济分析面板 —— 羊皮卷边上的"学者旁注"（排版 + 主题升级）
       字段块带 .ea-block--{summary|logic|learn|misread|course}
       --ea-rgb 控制描边/底色的时代体温
   ================================================================= */
.l1-econ-analysis{
  --ea-rgb:196,148,74;
  background:linear-gradient(170deg, rgba(22,18,13,.92), rgba(12,10,8,.95));
  border:1px solid rgba(var(--ea-rgb),.30);
  border-radius:14px;
  padding:16px 16px 16px 19px;
  box-shadow:var(--shadow-sm);
}
/* 左缘细金线 —— 旁注的"装订边" */
.l1-econ-analysis::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px; z-index:1;
  background:linear-gradient(180deg, transparent, var(--gold,#c4944a) 30%, var(--gold,#c4944a) 70%, transparent);
  opacity:.7;
}

/* 抬头：加一条分隔线，标题用衬线 */
.ea-head{ align-items:flex-start; margin-bottom:12px; padding-bottom:11px;
  border-bottom:1px solid rgba(255,255,255,.07); }
.ea-glyph{ width:26px;height:26px;border-color:rgba(var(--ea-rgb),.6);
  background:radial-gradient(circle at 35% 30%, var(--gold-soft,#e0bd80), transparent 65%); }
.ea-glyph::after{ background:var(--gold,#c4944a); box-shadow:0 0 7px var(--gold,#c4944a); }
.ea-title{ font-family:"Noto Serif SC","Songti SC",serif;
  font-size:13px; color:var(--gold-soft,#e0bd80); letter-spacing:.14em; }
.ea-sub{ font-size:9px; letter-spacing:.24em; margin-top:4px; }

/* 概念芯片：可悬停、微微上浮 */
.ea-concepts{ gap:7px; margin-bottom:2px; }
.l1-econ-analysis .ea-chip{
  font-size:11px; padding:5px 11px; border-radius:99px;
  border:1px solid rgba(var(--ea-rgb),.4);
  background:rgba(var(--ea-rgb),.12);
  color:var(--gold-soft,#e0bd80); letter-spacing:.02em;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.l1-econ-analysis .ea-chip:hover{
  transform:translateY(-1px);
  background:rgba(var(--ea-rgb),.2);
  box-shadow:0 3px 12px rgba(var(--ea-rgb),.28);
}

/* 区块通用排版 */
.l1-econ-analysis .ea-block{ margin-top:13px; }
.l1-econ-analysis .ea-label{
  font-size:10.5px; letter-spacing:.1em; font-weight:600; margin-bottom:5px;
  display:flex; align-items:center; gap:7px; text-transform:none;
  color:var(--gold,#c4944a);
}
.l1-econ-analysis .ea-label::before{
  content:""; width:5px; height:5px; border-radius:50%; flex:0 0 auto;
  background:currentColor; box-shadow:0 0 6px currentColor;
}
.l1-econ-analysis .ea-text{ font-size:13px; line-height:1.72; color:#ddd6c8; }
.l1-econ-analysis .ea-text em{ color:var(--gold-soft,#e7c787); font-style:normal; }

/* —— 按字段类型分化 —— */
/* 经济分析：学术核心，最醒目（卡片化 + 强调底纹） */
.ea-block--logic{
  background:rgba(var(--ea-rgb),.06);
  border:1px solid rgba(var(--ea-rgb),.18);
  border-radius:10px; padding:11px 13px 12px 14px; margin-top:14px;
}
.ea-block--logic .ea-label{ font-size:11px; letter-spacing:.12em; }
.ea-block--logic .ea-text{ font-size:13.5px; line-height:1.8; color:#e7e0d1; }
/* 你学会了什么：洞见（次强调色 + ✦） */
.ea-block--learn .ea-label{ color:var(--era-accent2,#6fb0c4); }
.ea-block--learn .ea-label::before{
  content:"✦"; width:auto; height:auto; background:none; box-shadow:none;
  font-size:10px; line-height:1;
}
/* 容易误解：警示（暖红 + 圈感叹号） */
.ea-block--misread .ea-label{ color:#cf8b5e; }
.ea-block--misread .ea-label::before{
  content:"!"; width:13px; height:13px; line-height:12px; text-align:center;
  border-radius:50%; border:1px solid currentColor; background:none; box-shadow:none;
  font-size:9px; font-weight:700;
}
/* 课程对应：引用感（弱化、斜体） */
.ea-block--course .ea-label{ color:var(--ink-dim); }
.ea-block--course .ea-text{ font-size:12px; color:#b8b0a0; font-style:italic; }

/* —— 时代体温 —— */
body[data-era="athens"] .l1-econ-analysis{
  --ea-rgb:236,190,82;
  background:linear-gradient(170deg, rgba(34,26,14,.9), rgba(16,13,8,.95));
}
body[data-era="soho"] .l1-econ-analysis{
  --ea-rgb:200,154,82;
  /* 账簿横纹：呼应 17 岁账簿抄写员的身份 */
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(150,168,172,.045) 27px 28px),
    linear-gradient(170deg, rgba(16,22,28,.92), rgba(9,12,16,.95));
}
body[data-era="venice"] .l1-econ-analysis{ --ea-rgb:127,183,189; }

/* 桌面端把学习区适当加宽，长公式/分析更好读 */
@media(min-width:1100px){ .l1-main-row{ grid-template-columns:1fr 300px; } }
@media(min-width:1440px){ .l1-main-row{ grid-template-columns:1fr 336px; } }