/* ==========================================================
   JR杰瑞 · 暗色容器适配 v2（针对 2026-09-09 第二轮反馈）
   ------------------------------------------------------------
   修第一轮没覆盖到的容器（开场 / 4 步卡 / 数字 / 辅助卡 / 代码块）：
   1) .gate 仍是浅纸底 + 卡片白底 → 暗色下没适配
   2) .flow__step 白底卡 → 暗色下顶白底
   3) .metric 数字卡暗色下变量已对（var(--bg-soft)/var(--line-soft) 自动反转）
      但 .flow__step / .aux / .code-fold 硬编码 #FFFDF8 / 浅色需覆盖
   4) .door 卡片硬编码 rgba(255,253,248,.92) → 暗色下没适配
   5) gate 的 ::after / .g-l::before / .g-r::before 浅色高光 → 暗色下变白雾
   ========================================================== */

/* ============================ 开场门廊 gate ============================ */
/* 覆盖 gate.162918.css 的硬编码 #F7F3EA + 浅色高光 */
[data-jr-base] .gate {
  background-color: var(--bg) !important;
  background-image: url("/assets/brand/gate-rooms-h5.webp") !important;
  background-size: cover !important;
  background-position: center !important;
}
[data-jr-base] .gate::after {
  background:
    linear-gradient(180deg,
      rgba(14,12,10,.62) 0%, rgba(14,12,10,.18) 22%,
      rgba(14,12,10,.18) 78%, rgba(14,12,10,.72) 100%) !important;
}
[data-jr-base] .g-l::before {
  background: linear-gradient(95deg,
    rgba(14,12,10,.92) 0%, rgba(14,12,10,.78) 60%, rgba(14,12,10,.36) 100%) !important;
}
[data-jr-base] .g-r::before {
  background: linear-gradient(95deg,
    rgba(14,12,10,.40) 0%, rgba(14,12,10,.78) 60%, rgba(14,12,10,.92) 100%) !important;
}
/* 暗色下亮色版 */
[data-jr-base][data-theme="light"] .gate::after {
  background:
    linear-gradient(180deg,
      rgba(247,243,234,.40) 0%, rgba(247,243,234,.10) 22%,
      rgba(247,243,234,.10) 78%, rgba(247,243,234,.52) 100%) !important;
}
[data-jr-base][data-theme="light"] .g-l::before {
  background: linear-gradient(95deg,
    rgba(247,243,234,.94) 0%, rgba(247,243,234,.88) 60%, rgba(247,243,234,.46) 100%) !important;
}
[data-jr-base][data-theme="light"] .g-r::before {
  background: linear-gradient(95deg,
    rgba(247,243,234,.40) 0%, rgba(247,243,234,.86) 60%, rgba(247,243,234,.92) 100%) !important;
}

/* gate 内文字 + 卡片 */
[data-jr-base] .g-brand .bn { color: var(--text); }
[data-jr-base] .gtitle { color: var(--text); }
[data-jr-base] .gsub { color: var(--text); }
[data-jr-base] .gsub .gline { border-top-color: var(--line); }
[data-jr-base] .gsub .gline:last-child { border-bottom-color: var(--line); }
/* 进入按钮保持赭石（无变化） */

/* gate 内三扇门卡片 */
[data-jr-base] .door {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text);
}
[data-jr-base] .door:hover {
  background: var(--panel-2) !important;
  border-color: rgba(180,83,42,.4) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.3) !important;
}
[data-jr-base] .door .dt { color: var(--text); }
[data-jr-base] .door .dd { color: var(--muted); }
[data-jr-base] .gfoot { color: var(--muted); }

/* ============================ 4 步卡 flow__step ============================ */
[data-jr-base] .flow__step {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}
[data-jr-base] .flow__step:hover {
  border-color: rgba(180,83,42,.30) !important;
}
[data-jr-base] .flow__step b { color: var(--text) !important; }
[data-jr-base] .flow__step span { color: var(--muted) !important; }
/* .flow__num 保持赭石（品牌色） */

/* ============================ 数字卡 metric ============================
   brand.212832.css 已用 var(--bg-soft) + var(--line-soft)，暗色下自动反转
   这里只补一下 metric__v 在暗色下的变量 fallback（虽然内联 style 已硬编码 var(--accent)） */

/* ============================ 辅助卡 aux ============================ */
[data-jr-base] .aux {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}
[data-jr-base] .aux:hover {
  border-color: rgba(180,83,42,.28) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.3) !important;
}
[data-jr-base] .aux__title { color: var(--text) !important; }
[data-jr-base] .aux__desc { color: var(--text-dim) !important; }
/* .aux__tag 保持赭石 */
/* .aux__media img 边框跟着 var(--line) 走 */

/* ============================ 代码折叠 ============================ */
[data-jr-base] .code-fold summary { color: var(--muted) !important; }
[data-jr-base] .code-fold summary::before { color: var(--accent) !important; }
[data-jr-base] .code-block {
  background: var(--panel-2) !important;
  color: var(--mn-700) !important;
  border: 1px solid var(--line);
}
[data-jr-base][data-theme="dark"] .code-block {
  color: var(--mn-700) !important;
}

/* ============================ BY THE NUMBERS 段包裹 ============================
   L249 <h3>把长篇做短的几个数</h3> 下面是 .metric-row（var 自动反转 OK）
   但这个 section 容器若是 .numbers/.stat 之类硬编码浅色，需覆盖 */

/* ============================ 动线层的 .flow（注：不要动布局） ============================
   L239 .flow 旧定义已用 grid 排版，.flow__step 已在上面覆盖
   但 .flow__note 用 #7A736A 硬编码（暗色下偏暗不显眼），用变量替 */
[data-jr-base] .flow__note { color: var(--muted) !important; }