:root{
  --egh-brand:#1F4FD8;
  --egh-brand-t:#4D7DDE;
  --egh-brand-td:#3A63B8;
  --egh-brand-d:#163DB0;
  --egh-brand-l:#EBF1FF;
  --egh-ink:#0F172A;
  --egh-ink-2:#475569;
  --egh-ink-3:#94A3B8;
  --egh-bg:#FFFFFF;
  --egh-bg-2:#F6F8FC;
  --egh-line:#E5EAF2;
  --egh-accent:#0EA5A4;
  --egh-radius:12px;
  --egh-max:1200px;

  /* 多层阴影：靠"低透明度 + 负 spread"做到阴影大而干净，不用高浓度黑 */
  --egh-sh-1:0 1px 2px rgba(16,24,40,.05);
  --egh-sh-2:
    0 1px 2px rgba(16,24,40,.04),
    0 6px 12px -3px rgba(16,24,40,.06),
    0 16px 32px -8px rgba(16,24,40,.07);
  --egh-sh-3:
    0 2px 4px rgba(16,24,40,.04),
    0 12px 24px -6px rgba(16,24,40,.07),
    0 32px 64px -16px rgba(16,24,40,.11);
  --egh-ease:cubic-bezier(.4,0,.2,1);
  /* 第 64 批 抽屉开合：时长按屏幕大小由 JS 写入（--dw-dur，视口越宽走得越久） */
  --dw-dur:.42s;
  /* ★★★ 第 85 批之十（用户 2026-10-13 15:11「做点曲线，有被吸附的感觉 比如再 20px 内加快」）：
     开合曲线换成【末段加速】的吸附曲线 —— 起手快、中段慢慢缓下来、最后约 30px
     （--dw-pos 总位移 320px 的 ~10%）里突然提速，"嗖"地被吸到位。
     · 默认值仍保留原来的 cubic-bezier：老浏览器观感 = 改前，不会崩；
     · linear() 属 CSS Easing L2（Chrome 113+ / Safari 17.2+ / FF 112+）——
       认不出的浏览器会把这条值判为【无效】，而无效的自定义属性会让引用它的
       transition 整条失效，所以绝不能直接写在 :root 里，必须放 @supports 覆盖（见下方）。 */
  --dw-ease:cubic-bezier(.32,.06,.2,1);
  --egh-ease-pop:cubic-bezier(.34,1.28,.64,1);
}

/* ★★★ 第 85 批之十 · 吸附曲线（末段加速）
   把时间/位移摊开看：0→90% 时间走完 84% 位移；最后 10% 位移（≈32px）只用 6% 时间 →
   末段斜率 1.67，是全程最陡的一段（最慢的一段 0.83 在 79~85%）⇒ 观感就是"被吸住"。 */
@supports (transition-timing-function:linear(0,1)){
  :root{--dw-ease:linear(0,.16 14%,.30 28%,.42 41%,.52 52%,.60 62%,.67 71%,.73 79%,.78 85%,.84 90%,.90 94%,1)}
}
/* ★ 第 64 批 丝滑关键：把 --dw-pos 注册成真正的 <length>。
   未注册的自定义属性在 Chrome/Safari 里是「token 流」，值一变就是离散跳变，
   即使给它依赖的 transform/left 写了 transition 也**不会**动画（实测 90ms 就到终态）。
   注册成 <length> 后，--dw-pos 的变化才会被当成可过渡的数值 → 开合/关闭都跟着 --dw-dur 平滑滑动。
   （@property 需 Chrome 85+/Safari 16.4+；老浏览器降级为瞬变，功能不受影响。） */
@property --dw-pos{syntax:"<length>";inherits:true;initial-value:0px}
/* 暗度：注册成 <number> 才能平滑过渡 —— 顶栏的暗化直接吃这个变量（见 .egh-nav 分栏规则），
   这样「顶栏暗度」和「主页暗度」永远是同一个数，不会一个暗一个不暗（第 65 批第 9 条）。 */
@property --dw-dim{syntax:"<number>";inherits:true;initial-value:0}
@property --dw-slug{syntax:"<length>";inherits:true;initial-value:64px}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--egh-ink);background:var(--egh-bg);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:var(--egh-max);margin:0 auto;padding:0 20px}

/* ---------- 导航 ---------- */
/* ★ 10-17（用户：浮动半透 → 水玻璃半透）：顶栏改成更明显的磨砂玻璃 —— 白底更透、模糊更强，滚动时内容透上来 */
.egh-nav{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:saturate(170%) blur(20px);backdrop-filter:saturate(170%) blur(20px);
  border-bottom:1px solid rgba(229,234,242,.75);
}
.egh-nav-in{display:flex;align-items:center;gap:24px;height:60px}
.egh-logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;letter-spacing:.2px}
.egh-logo i{width:36px;height:36px;display:block;color:var(--egh-brand-t)}
.egh-menu{display:flex;gap:4px;margin-left:8px}
/* ★ 10-17 午（用户「有二级的加粗、一级不加，很不好看」）：一级导航全部统一 ——
   同一字重（500）/字号/内距/颜色；有无二级只差一个小箭头；箭头更细更淡、悬停旋转。 */
.egh-menu a{
  padding:7px 11px;border-radius:8px;font-size:14px;font-weight:400;color:#6B7A99;
  letter-spacing:.1px;
  transition:background .15s,color .15s;
}
@media (hover:hover){.egh-menu a:hover{background:rgba(15,23,42,.045);color:#3E4C66}}
.egh-nav-r{margin-left:auto;display:flex;align-items:center;gap:10px}
/* ★ 2026-10-16：头部会员入口（登录态）= 首字头像 + 悬浮菜单（原「用户名 + 箭头」太宽，用户要求改为头像形态）。
   原来定义在 member.css（只随会员页加载），但头部在所有页面可见 —— 非会员页登录后会裸样式。移到全站 style.css。
   ★ 头像：暂未上头像系统 ⇒ 用用户名首字（.egh-user-nm[hidden] 仅作数据源；head.html 内联小脚本同步写入首字、防闪空）；
     造型沿用站内「方格语言」：30×30、圆角 9、品牌蓝底白字（不做圆圈 —— 第 80 批用户明确过全站方格）。 */
.egh-user{position:relative}
/* 两类选择器提高优先级：本块在 .egh-btn 之前定义，单类会被 .egh-btn 的 padding/gap 反压 */
/* ★ 10-17（用户：登录后只保留头像、不要下拉指引）：按钮=裸头像，无边框无底色，hover 淡底 */
.egh-user .egh-user-btn{gap:0;padding:2px;border-color:transparent;background:transparent}
@media (hover:hover){.egh-user .egh-user-btn:hover{border-color:transparent;background:var(--egh-bg-2);color:inherit}}
.egh-user-ava{position:relative;flex:none;align-self:center;width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--egh-brand);font-size:13px;font-weight:600;line-height:1;text-transform:uppercase;user-select:none;overflow:hidden}
.egh-user-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 抽屉顶部已登录行：首字头像（与头部同款；4 类选择器提高优先级，压过下方两处 .dw-ava 白底定义） */
.egh-drawer .dw-me .dw-ava.dw-ava-t{position:relative;background:#fff;border-color:var(--egh-line);color:var(--egh-brand-t);font-size:14px;font-weight:700;overflow:hidden}
.egh-drawer .dw-me .dw-ava.dw-ava-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.egh-user-arw{flex:none;opacity:.6}
/* ★ 10-17（用户参考图）：下拉放大成"名片卡"—— 顶部用户名 + 分隔线 + 带图标菜单 + 底部独立退出登录 */
.egh-user-pn{position:absolute;right:0;top:calc(100% + 10px);min-width:238px;padding:18px 18px 14px;
  background:#fff;border:1px solid var(--egh-line);border-radius:16px;
  box-shadow:0 24px 60px rgba(15,23,42,.16),0 2px 8px rgba(15,23,42,.06);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s var(--egh-ease),
  transform .16s var(--egh-ease),visibility .16s}
.egh-user-uname{font-size:16.5px;font-weight:600;color:var(--egh-ink);padding:2px 2px 13px;
  border-bottom:1px solid var(--egh-line);margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.egh-user-pn a{display:flex;align-items:center;gap:11px;padding:10px 2px;border-radius:8px;font-size:15px;color:var(--egh-ink);white-space:nowrap}
.egh-user-pn a svg{flex:none;width:19px;height:19px;opacity:.8}
.egh-user-pn a.out{margin-top:10px;color:var(--egh-ink-2)}
@media (hover:hover){
  .egh-user:hover .egh-user-pn,.egh-user:focus-within .egh-user-pn{opacity:1;visibility:visible;transform:translateY(0)}
  .egh-user-pn a:hover{color:var(--egh-brand-t)}
}
.egh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 16px;border-radius:8px;font-size:15px;font-weight:400;
  border:1px solid var(--egh-line);background:#fff;color:var(--egh-ink);
  transition:all .15s;cursor:pointer;
}
@media (hover:hover){.egh-btn:hover{border-color:var(--egh-brand);color:var(--egh-brand-t)}}
.egh-btn-p{background:var(--egh-brand);border-color:var(--egh-brand);color:#fff;box-shadow:var(--egh-sh-1)}
@media (hover:hover){.egh-btn-p:hover{
  background:var(--egh-brand-d);border-color:var(--egh-brand-d);color:#fff;
  transform:translateY(-2px);box-shadow:0 8px 20px -6px rgba(31,79,216,.45);
}}
/* ★ 汉堡按钮沿用【整站按钮风格】（浅底 + 1px 描边 + 8px 圆角）。
   ★ 第 76 批（02:41）曾按参考图改成圆形，用户 03:05 明确否掉：「汉堡按钮不要改圆的，默认整站的按钮风格」
     → 已回退。参考图那两张只是说明「打开/关闭菜单页的状态格式」，参考图里那个圆形按钮是人家 App 的风格，不照抄。 */
.egh-burger{display:none;width:36px;height:36px;border:1px solid var(--egh-line);
  border-radius:8px;background:#fff;cursor:pointer;align-items:center;justify-content:center;
  transition:transform .28s var(--egh-ease),border-color .28s var(--egh-ease),box-shadow .28s var(--egh-ease)}
/* ★★ 第 85 批（用户 2026-10-13「汉堡按钮帮我加点呼吸的感觉」）—— 给汉堡加一层"活的"感觉：
   ① 轻微起伏 scale 1 → 1.05 + 描边/柔光向品牌蓝靠一点点，不换形状、不加图标、不加圈；
   ② 只在【菜单没打开】时呼吸 —— 打开后它变"关闭键"，再呼吸就是跟内容抢注意力
      （跟方向线把手 `.egh-rail-curic` 同款口径：收着的时候才提示）；
   ③ 用 transform 缩放，不参与布局 ⇒ peek 态那条缝的 12 + 36 + 12 算术完全不受影响（汉堡仍占 36px）；
   ④ prefers-reduced-motion 减动效用户完全不呼吸。 */
@keyframes eghBurgerBreathe{
  0%,100%{transform:scale(1);border-color:var(--egh-line);box-shadow:0 0 0 0 rgba(31,79,216,0)}
  50%{transform:scale(1.05);border-color:rgba(31,79,216,.45);box-shadow:0 0 0 4px rgba(31,79,216,.10)}
}
@media (prefers-reduced-motion:no-preference){
  .egh-burger{animation:eghBurgerBreathe 2.8s var(--egh-ease) infinite}
  /* ★★★ 第 85 批之十一（用户 2026-10-13 15:31「容器内的汉堡按钮没有呼吸」）：
     汉堡【只要看得见就一直呼吸】—— 撤掉第 85 批之一 写的那条"菜单打开就停"的抑制
     （`body.egh-dw-open .egh-burger / #eghBurger / .egh-burger.on {animation:none}`）。
     为什么撤（实测 `_diag85s.py`）：
       · vw=900（760~1100 容器档）打开菜单 → body 带 egh-dw-open+egh-dw-split+egh-dw-bar
         但没有 egh-dw-peek ⇒ 汉堡 animation-name=none，容器顶栏里那颗不呼吸【就是用户报的这条】；
       · vw=430（手机档）打开菜单 → 靠第 85 批之九 的 peek 规则才单独恢复呼吸；
       两处口径不一。现在统一成"可见即呼吸"，≥1100 汉堡是 display:none、不受影响。
     ★ 副作用：菜单打开时汉堡描边不再固定品牌蓝，而是跟着呼吸在两档之间走（这正是"呼吸"的意思）。 */
}

/* ---------- 通用区块 ---------- */
.egh-sec{padding:72px 0}
.egh-sec.alt{background:var(--egh-bg-2)}
.egh-head{max-width:760px;margin:0 auto 36px;text-align:center}
.egh-eyebrow{
  display:inline-block;font-size:14px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--egh-brand-t);font-weight:600;margin-bottom:10px;
}
.egh-h2{font-size:clamp(22px,3.2vw,32px);font-weight:600;line-height:1.35}
.egh-sub{margin-top:12px;font-size:15px;color:var(--egh-ink-2)}

/* ---------- Hero ---------- */
.egh-hero{padding:84px 0 72px;background:
  radial-gradient(1200px 380px at 50% -120px,var(--egh-brand-l),transparent 70%),#fff;}
.egh-hero h1{font-size:clamp(28px,5vw,48px);font-weight:600;line-height:1.25;letter-spacing:-.5px}
.egh-hero p{margin-top:18px;font-size:clamp(15px,1.8vw,18px);color:var(--egh-ink-2);max-width:640px}
.egh-hero-act{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.egh-hero-tags{margin-top:34px;display:flex;gap:8px;flex-wrap:wrap}
.egh-tag{
  font-size:13.5px;color:var(--egh-ink-2);background:var(--egh-bg-2);
  border:1px solid var(--egh-line);border-radius:999px;padding:5px 12px;
}

/* ---------- 卡片网格 ---------- */
.egh-grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

.egh-card{
  background:#fff;border:1px solid var(--egh-line);border-radius:var(--egh-radius);
  padding:22px;display:flex;flex-direction:column;
  box-shadow:var(--egh-sh-1);
  transition:transform .3s var(--egh-ease-pop),box-shadow .3s var(--egh-ease),border-color .25s var(--egh-ease);
  will-change:transform;
}
@media (hover:hover){/* 悬浮：抬起 + 三层阴影接管（边框转透明，避免边框与阴影叠在一起显脏） */
.egh-card:hover{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:var(--egh-sh-3);
}}
.egh-badge{
  align-self:flex-start;font-size:12.5px;font-weight:600;letter-spacing:.3px;
  color:var(--egh-brand-t);background:var(--egh-brand-l);
  border-radius:5px;padding:3px 8px;margin-bottom:12px;
}
.egh-card h3{font-size:16.5px;font-weight:600;line-height:1.4}
.egh-card .desc{margin-top:8px;font-size:14.5px;color:var(--egh-ink-2);flex:1}
.egh-card .more{
  margin-top:14px;font-size:14.5px;color:var(--egh-brand-t);font-weight:500;
  display:inline-flex;align-items:center;gap:5px;
}
@media (hover:hover){.egh-card .more:hover{gap:9px}}

/* 要点清单 */
.egh-pts{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.egh-pts li{display:flex;gap:8px;font-size:14px;color:var(--egh-ink-2);line-height:1.5}
.egh-pts li svg{flex:0 0 auto;margin-top:4px;color:var(--egh-brand-t)}

/* 带图标的小卡 */
.egh-mini{
  background:#fff;border:1px solid var(--egh-line);border-radius:var(--egh-radius);
  padding:18px;box-shadow:var(--egh-sh-1);
  transition:transform .3s var(--egh-ease-pop),box-shadow .3s var(--egh-ease),border-color .25s var(--egh-ease);
  will-change:transform;
}
@media (hover:hover){.egh-mini:hover{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:var(--egh-sh-3);
}}
.egh-mini .ic{
  width:36px;height:36px;border-radius:9px;background:var(--egh-brand-l);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
  color:var(--egh-brand-t);
  transition:background .25s var(--egh-ease),color .25s var(--egh-ease);
}
@media (hover:hover){/* 图标容器在悬浮时翻成实心，白色的线条图标 —— 这一点点变化让卡片"活"起来 */
.egh-mini:hover .ic{background:var(--egh-brand);color:#fff}}
.egh-mini h4{font-size:15.5px;font-weight:600}
.egh-mini p{margin-top:6px;font-size:14px;color:var(--egh-ink-2);line-height:1.55}

/* ---------- 能力矩阵：悬停放大，其余卡自动重排 ---------- */
/* 行高固定住，卡片才谈得上"占几格"；dense 保证放大后不留空洞 */
.egh-mx{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:156px;grid-auto-flow:dense;gap:14px;
}
.egh-cell{
  grid-column:span 1;grid-row:span 1;
  background:#fff;border:1px solid var(--egh-line);border-radius:var(--egh-radius);
  padding:18px;overflow:hidden;cursor:pointer;will-change:transform;
  /* 展开/收起的主时长：0.62s。下面 .ic 和 JS 里 FLIP 那两条要跟它对齐，改一处就得改三处 */
  transition:border-color .25s var(--egh-ease),background .25s var(--egh-ease),transform .62s var(--egh-ease-pop);
}
/* 放大态：不挂阴影（阴影跟着位移跑会显脏），只用边框区分 */
.egh-cell.on{grid-column:span 2;grid-row:span 2;border-color:var(--egh-brand)}
.egh-cell .ic{
  width:36px;height:36px;border-radius:9px;background:var(--egh-brand-l);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
  color:var(--egh-brand-t);transform-origin:left center;
  transition:transform .45s var(--egh-ease-pop),background .25s var(--egh-ease),color .25s var(--egh-ease);
}
/* 图标用 scale 放大而不是改宽高 —— 改宽高会二次触发重排，动画会抖 */
.egh-cell.on .ic{transform:scale(1.18);background:var(--egh-brand);color:#fff}
.egh-cell h4{font-size:15.5px;font-weight:600;transition:font-size .35s var(--egh-ease)}
.egh-cell.on h4{font-size:16px}
.egh-cell p{margin-top:6px;font-size:14px;color:var(--egh-ink-2);line-height:1.55}
.egh-cell.on p{margin-top:8px;font-size:14.5px}
/* 要点只在放大态出现，用来把大卡的空间填满，不留一整块空 */
.egh-cell .mxp{display:none}
.egh-cell.on .mxp{
  display:block;margin-top:14px;padding-top:12px;border-top:1px dashed var(--egh-line);
}
.egh-cell .mxp li{
  display:flex;gap:8px;font-size:14px;color:var(--egh-ink-2);line-height:1.5;padding:4px 0;
}
.egh-cell .mxp li svg{flex:0 0 auto;margin-top:4px;color:var(--egh-brand-t)}
.egh-cell:focus-visible{outline:2px solid var(--egh-brand);outline-offset:2px}

/* ---------- 技术优势：左右结构 ---------- */
.egh-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.egh-quote{
  background:#fff;border:1px solid var(--egh-line);
  border-radius:var(--egh-radius);padding:22px;box-shadow:var(--egh-sh-2);
}
.egh-quote li{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--egh-line)}
.egh-quote li:last-child{border-bottom:0}
.egh-quote .n{
  flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:var(--egh-brand);
  color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.egh-quote b{font-size:15px;font-weight:600}
.egh-quote span{display:block;font-size:14px;color:var(--egh-ink-2);margin-top:3px}

/* ---------- 数字 ---------- */
.egh-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.egh-num b{display:block;font-size:clamp(22px,3.4vw,34px);font-weight:600;color:var(--egh-brand-t)}
.egh-num span{display:block;margin-top:6px;font-size:14.5px;color:var(--egh-ink-2)}
.egh-todo{
  display:inline-block;font-size:13px;color:#92400E;background:#FEF3C7;
  border:1px dashed #F59E0B;border-radius:5px;padding:4px 10px;font-weight:600;
}

/* ---------- 动态 ---------- */
.egh-news li{border-bottom:1px solid var(--egh-line)}
.egh-news a{display:flex;gap:20px;align-items:baseline;padding:16px 0;transition:padding-left .18s}
@media (hover:hover){.egh-news a:hover{padding-left:8px}}
.egh-news time{flex:0 0 auto;font-size:14px;color:var(--egh-ink-3);font-variant-numeric:tabular-nums}
.egh-news h4{font-size:15px;font-weight:500}
.egh-news p{margin-top:4px;font-size:14.5px;color:var(--egh-ink-2)}

/* ---------- 页脚 ---------- */
.egh-foot{background:#0F172A;color:#CBD5E1;padding:56px 0 32px;margin-top:0}
.egh-foot-cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}
.egh-foot h5{font-size:15px;color:#fff;font-weight:600;margin-bottom:14px}
.egh-foot li{padding:5px 0;font-size:14.5px}
@media (hover:hover){.egh-foot li a:hover{color:#fff}}
.egh-foot-bot{
  margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
  font-size:14px;color:#94A3B8;display:flex;gap:16px;flex-wrap:wrap;
}

/* ---------- 响应式 ---------- */
@container eghpage (max-width:1024px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .egh-mx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .egh-foot-cols{grid-template-columns:1fr 1fr}
}
@container eghpage (max-width:860px){
  .g3, .g2{grid-template-columns:1fr}
  .egh-split{grid-template-columns:1fr;gap:24px}
  .egh-nums{grid-template-columns:repeat(2,1fr)}
  .egh-sec{padding:52px 0}
}
@container eghpage (max-width:560px){
  .g4{grid-template-columns:1fr}
  /* 单列时占两格会溢出，所以窄屏改成"原地展开"，行高交给内容 */
  .egh-mx{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:12px}
  .egh-cell, .egh-cell.on{grid-column:span 1;grid-row:span 1}
  .egh-cell.on .ic{transform:none}
  .egh-foot-cols{grid-template-columns:1fr}
  .egh-news a{flex-direction:column;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  @media (hover:hover){.egh-card:hover, .egh-mini:hover, .egh-btn-p:hover{transform:none}}
  .egh-cell, .egh-cell.on .ic{transition-duration:.01ms !important}
}
.egh-menu.on{
  display:flex;flex-direction:column;position:absolute;top:60px;left:0;right:0;
  background:#fff;border-bottom:1px solid var(--egh-line);padding:8px 20px 16px;
}
/* ============ 方向线图标条 ============ */
.egh-rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:2147482000;background:#fff;border:1px solid var(--egh-line);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:4px}
.egh-rail-arw{display:flex;align-items:center;justify-content:center;width:100%;padding:4px 0 8px;margin-bottom:2px;background:none;border:0;border-bottom:1px solid var(--egh-line);cursor:pointer;color:var(--egh-ink-2);transition:color .18s ease}
@media (hover:hover){.egh-rail-arw:hover{color:var(--egh-brand-t)}}
.egh-rail-arw-h{transition:transform .2s ease}
.egh-rail.open .egh-rail-arw-h{transform:rotate(180deg)}
.egh-rail-curic{display:none;align-items:center;justify-content:center;color:var(--egh-brand-t)}
/* 收起态的呼吸提示：不加圈不加光晕，就让【把手里的当前线图标】自己在深浅两档蓝之间来回变色。
   只跑在"收起且没设减弱动效"时 —— 展开后图标都摊开了，再呼吸就是噪音。
   ★★★ 第 85 批之五（用户 2026-10-13 14:34 拍板，**回退第 85 批之二**）：呼吸挂在 `.egh-rail-curic` 上，
     因为收起态就是「只露 1 枚当前线图标」（就是它）。用户原话：
       「右边栏的 5 线和到顶部和留言的那个浮动按钮 必须所有页面都要有，而且压到内容边缘的都要
         自动缩小，只有当前线路的图标并呼吸，之前都好好的，你改动了才乱的。」 */
@keyframes eghRailBreathe{0%,100%{color:var(--egh-brand-t)}50%{color:#7CA0F2}}
@media (prefers-reduced-motion:no-preference){
  .egh-rail:not(.open) .egh-rail-curic{animation:eghRailBreathe 2.6s ease-in-out infinite}
  /* ★★★ 第 85 批之十一（用户 2026-10-13 15:31「…还有边栏5 线也没」）：
     展开态（.open = 5 条线 + 分隔 + 上箭头 + 留言 都摊开）时，把手里的 .egh-rail-curic 是
     `display:none`（第 85 批之五 那条）⇒ 【整条边栏一处呼吸都没有】——
     宽屏（实测 vw=1440 首页/子页）看到的正是这个。
     补：展开态让【当前线路那一枚】.egh-rail-ic.cur 接着呼吸，与第 85 批之五
     「只有当前线路的图标并呼吸」同一口径 —— 收起态呼吸在把手、展开态呼吸在当前线，
     两种状态永远有一处在提示"你在这条线"。 */
  .egh-rail.open .egh-rail-ic.cur{animation:eghRailBreathe 2.6s ease-in-out infinite}
}
.egh-rail-ic{position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:8px;cursor:pointer;color:var(--egh-ink-2);transition:background .18s ease,color .18s ease}
.egh-rail-ic.on{background:#EAF1FE;color:var(--egh-brand-t)}
@media (hover:hover){.egh-rail-ic:hover{background:#EAF1FE;color:var(--egh-brand-t)}}
/* 当前板块：只把图标染成品牌蓝，不加左边那颗圆点（大小屏都不加）。
   cur 是"常驻的弱标记"，on 是"当前悬浮的强高亮"，两者靠有无背景区分，不靠圆点 */
.egh-rail-ic.cur{color:var(--egh-brand-t)}
.egh-rail-pn{position:fixed;left:50%;top:50%;z-index:2147482001;width:min(288px,calc(100vw - 110px));background:#fff;border:1px solid var(--egh-line);border-radius:12px;padding:18px 20px;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.97);transition:opacity .2s ease,transform .2s var(--egh-ease-pop);box-shadow:0 2px 4px rgba(16,24,40,.04),0 12px 24px -6px rgba(16,24,40,.07),0 32px 64px -16px rgba(16,24,40,.11)}
.egh-rail-pn.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.egh-rail-pn h3{font-size:15px;font-weight:600;color:var(--egh-ink);margin:8px 0 8px}
.egh-rail-pn ul{list-style:none;margin:0;padding:0}
.egh-rail-pn li{border-top:1px solid var(--egh-line)}
.egh-rail-pn li:first-child{border-top:0}
.egh-rail-pn li a{display:block;padding:7px 0;font-size:14.5px;color:var(--egh-ink-2)}
@media (hover:hover){.egh-rail-pn li a:hover{color:var(--egh-brand-t)}}
.egh-rail-note{font-size:13px;color:#a97014;margin:12px 0 0}
/* ★★★ 第 85 批之五（用户 2026-10-13 14:34 拍板，**回退第 85 批之二**）定稿：
   收起态（压到内容边缘 / 右侧放不下时）＝ **只露 1 枚当前线图标** ——
   5 条线 / 回到顶部 / 留言 与那条分隔线全部 display:none，只留把手 + 把手里的当前线图标
   `.egh-rail-curic`（它自己在两档蓝之间呼吸）。
   用户原话：「右边栏的 5 线和到顶部和留言的那个浮动按钮 必须所有页面都要有，而且压到内容边缘的
             都要自动缩小，只有当前线路的图标并呼吸，之前都好好的，你改动了才乱的。」
   ★ 已废口径：第 85 批之二曾把收起态做成「8 个条目一个不少、整条缩到最小（28×28 / 212px）」
     ⇒ 用户判定为「乱」，作废，**别再改回来**。展开态（`.open`）从头到尾一行未动。 */
.egh-rail-div{height:1px;background:var(--egh-line);margin:4px 4px}
.egh-rail:not(.open) .egh-rail-ic, .egh-rail:not(.open) .egh-rail-div{display:none}
.egh-rail:not(.open) .egh-rail-arw{border-bottom:0;padding:2px 0;margin-bottom:0}
.egh-rail:not(.open) .egh-rail-arw-h{display:none}
.egh-rail:not(.open) .egh-rail-curic{display:flex}
@container eghpage (max-width:900px){
  .egh-rail{right:8px;padding:4px}
  .egh-rail-ic{width:32px;height:32px}
}
section[id]{scroll-margin-top:72px}
.egh-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(150px,auto);gap:20px;margin-top:32px}
.egh-bento>.egh-card{display:flex;flex-direction:column;padding:22px;background:#fff;border:1px solid var(--egh-line);border-radius:var(--egh-r);transition:.25s var(--egh-ease);text-decoration:none}
.egh-bento>.egh-card.big{grid-row:span 2;background:linear-gradient(145deg,#f6f8ff,#fff)}
.egh-bento>.egh-card.big .ic svg{width:34px;height:34px}
.egh-bento>.egh-card .ic{margin-bottom:14px;color:var(--egh-brand-t)}
.egh-bento>.egh-card h3{font-size:18px;margin:0 0 8px;color:var(--egh-ink-1)}
.egh-bento>.egh-card .desc{font-size:15px;color:var(--egh-ink-3);line-height:1.55;margin-bottom:12px}
.egh-bento>.egh-card .egh-pts{font-size:14px;color:var(--egh-ink-2);line-height:1.7;margin-bottom:14px}
.egh-bento>.egh-card .egh-pts li{margin-bottom:3px}
/* ★ 查看详情固定到卡片右下角：flex column 下用 margin-top:auto 顶到底，
   align-self:flex-end 贴右边；z-index 压过右下角水印保证可读 */
.egh-bento>.egh-card .more{font-size:15px;color:var(--egh-brand-t);font-weight:500;margin-top:auto;align-self:flex-end;display:inline-flex;align-items:center;gap:6px;position:relative;z-index:1;padding-top:14px}
.egh-bento>.egh-card .kind{align-self:flex-start}
.egh-bento>.egh-card>h3, .egh-bento>.egh-card>.desc, .egh-bento>.egh-card>.egh-pts{flex:0 0 auto}
@media (hover:hover){.egh-bento>.egh-card:hover{border-color:var(--egh-brand);transform:translateY(-5px);box-shadow:var(--egh-sh-3)}}
@container eghpage (max-width:900px){.egh-bento{grid-template-columns:1fr}.egh-bento>.egh-card.big{grid-row:auto}}
.egh-bento>.egh-card .kind{display:inline-block;font-size:12.5px;font-weight:500;letter-spacing:.02em;padding:3px 9px;border-radius:999px;background:var(--egh-brand);color:#fff;margin-bottom:12px}
.egh-mtx{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);grid-auto-flow:dense;gap:16px;margin-top:32px}
.egh-mtx .mt{position:relative;padding:18px 20px 20px;background:#fff;border:1px solid var(--egh-line);border-radius:var(--egh-r);overflow:hidden;grid-column:span 1;grid-row:span 1;will-change:transform;transition:border-color .25s var(--egh-ease),box-shadow .25s var(--egh-ease)}
/* ★ 卡内产品预览图（矢量界面示意图）：
   ① 小卡不显示（display:none），只有放大卡才出现 → 小卡保持「图标 + 标题 + 要点」的干净文字版
   ② 放大卡改成左文右图两栏，图片固定 240px 宽（★ 所有卡尺寸一致），不压标题与图标
   ③ 统一 160×100 viewBox，等比缩放不变形 */
.egh-mtx .mt{display:flex;flex-direction:column}
.egh-mtx .mt .bd{position:relative;z-index:1;min-width:0}
.egh-mtx .mt .shot{display:none;position:relative;z-index:1;border-radius:12px;background:linear-gradient(160deg,#F5F8FE 0%,#EDF3FC 100%);border:1px solid #E4EBF7;overflow:hidden;box-shadow:0 8px 22px rgba(16,24,40,.07)}
.egh-mtx .mt .shot svg{display:block;width:100%;height:auto}
.egh-mtx .mt.on .bd{flex:1 1 auto}
/* 放大卡：文字在上、预览图整幅在下（★ crmeb「AI 能力矩阵」是上文下图，不是左文右图）；
   图宽铺满卡内，160×100 等比 → 所有放大卡图尺寸完全一致 */
.egh-mtx .mt.on .shot{display:block;margin-top:16px;height:300px}
.egh-mtx .mt.on .shot svg{height:100%}
.egh-mtx .mt.on .shot svg{animation:eghShotIn .38s var(--egh-ease) both}
@keyframes eghShotIn{from{opacity:0;transform:translateX(14px) scale(.98)}to{opacity:1;transform:none}}
@container eghpage (max-width:600px){.egh-mtx .mt.on{flex-direction:column}.egh-mtx .mt .shot{flex:0 0 auto;width:100%}}
/* 放大卡右侧已经是预览图，右下角水印会压到图上 → 隐藏 */
.egh-mtx .mt.on .wm{display:none}
@media (hover:hover){.egh-mtx .mt:hover{border-color:var(--egh-brand);box-shadow:var(--egh-sh-3)}}
.egh-mtx .mt.on{grid-column:span 2;grid-row:span 2;border-color:var(--egh-brand);box-shadow:var(--egh-sh-3);z-index:3;background:linear-gradient(135deg,#F6F8FF 0%,#fff 70%)}
.egh-mtx .mt.on h4{font-size:17px}
.egh-mtx .mt.on ul{font-size:14.5px}
@container eghpage (max-width:1100px){.egh-mtx .mt.on{grid-column:span 2;grid-row:span 1}}
@container eghpage (max-width:600px){.egh-mtx .mt.on{grid-column:span 1;grid-row:span 1}}
.egh-mtx .mt.feature{display:flex;flex-direction:column;background:linear-gradient(135deg,#F6F8FF 0%,#fff 60%);border-color:#C7D6F7}
.egh-mtx .mt.feature.on{grid-column:span 2;grid-row:span 2;border-color:var(--egh-brand)}
.egh-mtx .mt.feature .hero{position:absolute;right:18px;top:18px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--egh-brand-t)}
.egh-mtx .mt.feature .hero svg{width:48px;height:48px}
.egh-mtx .mt.feature .hero span{font-size:12px;font-weight:600;padding:3px 10px;background:var(--egh-brand);color:#fff;border-radius:999px}
.egh-mtx .mt.feature h4{font-size:20px;margin-top:auto}
.egh-mtx .mt.feature ul{font-size:15px}
.egh-mtx .kind{display:inline-block;font-size:12.5px;font-weight:500;padding:2px 9px;border-radius:999px;background:var(--egh-brand-l);color:var(--egh-brand-t)}
.egh-mtx .mt[data-k="community"] .kind{background:#E6F7F6;color:#0F7B74}
.egh-mtx .mt[data-k="theme"] .kind{background:#EEF2F7;color:var(--egh-ink-2)}
.egh-mtx h4{display:flex;align-items:center;gap:7px;margin:10px 0 8px;font-size:15px;font-weight:600;color:var(--egh-ink-1)}
.egh-mtx h4 svg{flex:0 0 auto;color:var(--egh-brand-t)}
.egh-mtx ul{font-size:14px;color:var(--egh-ink-2);line-height:1.75}
.egh-mtx li{display:flex;gap:8px}
.egh-mtx li svg{flex:0 0 auto;margin-top:5px;color:var(--egh-brand-t)}
@container eghpage (max-width:1100px){.egh-mtx{grid-template-columns:repeat(2,1fr)}.egh-mtx .mt.feature.on{grid-column:span 2;grid-row:span 1}}
@container eghpage (max-width:600px){.egh-mtx{grid-template-columns:1fr}.egh-mtx .mt.feature.on{grid-column:span 1}}
.egh-pms{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px;text-align:center}
.egh-pms .n{display:inline-flex;width:42px;height:42px;border-radius:50%;background:var(--egh-brand-l);color:var(--egh-brand-t);font-size:14.5px;font-weight:600;align-items:center;justify-content:center;margin-bottom:14px}
.egh-pms h4{font-size:16.5px;font-weight:600;margin-bottom:8px;color:var(--egh-ink-1)}
.egh-pms p{font-size:14.5px;color:var(--egh-ink-2);line-height:1.7}
@container eghpage (max-width:900px){.egh-pms{grid-template-columns:1fr;gap:22px}}
.egh-flow{margin-top:30px}
.egh-menu{display:flex;align-items:center;gap:4px}
.egh-drop{position:relative}
/* 带二级的项：视觉完全吃上面 .egh-menu a（只有一个小箭头区分），不再单独加粗/加深/放大内距 */
.egh-drop>.t{display:inline-flex;align-items:center;gap:5px;text-decoration:none}
/* 展开态（点开 .on / 悬停）时触发项与 hover 同款淡底，视觉上"按住"了 */
.egh-drop.on>.t{background:var(--egh-bg-2);color:var(--egh-ink)}
/* 小箭头：5px 细尖角，默认半透明、悬停加深并翻向上（比原来 6px 实色更轻） */
.egh-drop>.t:after{content:"";display:inline-block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.45;transition:transform .2s var(--egh-ease),opacity .2s}
.egh-drop.on>.t:after{transform:rotate(-135deg);margin-top:1px;opacity:.85}
@media (hover:hover){.egh-drop:hover>.t:after{transform:rotate(-135deg);margin-top:1px;opacity:.85}}
.egh-drop-pn{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(calc(-50% + var(--pn-shift,0px))) translateY(8px);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s var(--egh-ease);display:flex;gap:32px;background:#fff;border:1px solid var(--egh-line);border-radius:20px;padding:28px 30px;box-shadow:0 30px 80px rgba(16,24,40,.16);min-width:min(900px, calc(100vw - 32px));max-width:calc(100vw - 32px);z-index:100}
/* ★ 悬停桥接：标题与面板之间那点空隙补一层透明命中区，鼠标从标题移到面板不会断 hover 而自己弹回去 */
.egh-drop-pn:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.egh-drop.on>.egh-drop-pn{opacity:1;pointer-events:auto;transform:translateX(calc(-50% + var(--pn-shift,0px))) translateY(0)}
@media (hover:hover){.egh-drop:hover>.egh-drop-pn, .egh-drop-pn:hover{opacity:1;pointer-events:auto;transform:translateX(calc(-50% + var(--pn-shift,0px))) translateY(0)}}
.egh-drop-pn .links{display:flex;flex-direction:column;gap:6px;min-width:160px}
.egh-drop-pn .links a{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:10px;color:var(--egh-ink-2);font-size:15px;text-decoration:none;transition:background .18s,color .18s}
@media (hover:hover){.egh-drop-pn .links a:hover{background:#F6F8FC;color:var(--egh-brand-t)}}
.egh-drop-pn .links a span{font-size:15px;transition:transform .2s}
@media (hover:hover){.egh-drop-pn .links a:hover span{transform:translateX(4px)}}
.egh-drop-pn .cards{display:flex;gap:22px;flex:1}
.egh-drop-pn .cards.empty{display:none}
/* 卡片走"白底 + 极浅品牌渐变"，不用大块彩色底（用户明确否掉了那种颜色背景）；
   右下角放一枚放大的同款图标当水印，代替他们那种产品背景图。 */
.mega-card{position:relative;overflow:hidden;flex:1;display:flex;flex-direction:column;gap:12px;padding:26px 28px;border-radius:16px;border:1px solid var(--egh-line);background:linear-gradient(160deg,#F6F8FF 0%,#FFFFFF 62%);text-decoration:none;min-width:340px;transition:transform .25s var(--egh-ease),box-shadow .25s,border-color .25s}
@media (hover:hover){.mega-card:hover{transform:translateY(-4px);border-color:var(--egh-brand);box-shadow:var(--egh-sh-3)}}
.mega-card .wm{position:absolute;right:-16px;bottom:-20px;opacity:.07;color:var(--egh-brand-t);pointer-events:none}
.mega-card .ci{width:62px;height:62px;border-radius:18px;background:#fff;border:1px solid var(--egh-line);display:flex;align-items:center;justify-content:center;color:var(--egh-brand-t)}
.mega-card .ci svg{width:38px;height:38px}
.mega-card .tag{font-size:12.5px;padding:4px 11px;background:var(--egh-brand-l);color:var(--egh-brand-t);border-radius:999px;align-self:flex-start;font-weight:500}
.mega-card h4{font-size:18px;font-weight:600;line-height:1.3;color:var(--egh-ink-1)}
.mega-card p{font-size:14.5px;line-height:1.6;color:var(--egh-ink-2)}
.mega-card .more{margin-top:auto;font-size:14.5px;font-weight:500;padding-top:6px;color:var(--egh-brand-t)}
@container eghpage (max-width:900px){
  /* ★ 原 .egh-nav--collapsed 一套（菜单纵向排布）已整段删除：那个 class 已无任何脚本添加，
     且顶栏形态判定已统一到 style 末尾 keep-media 区（纯 CSS 视口断点，唯一判定处）。 */
  .mega-card{min-width:auto}
}
.egh-logowall{overflow:hidden;width:100%;margin-left:0;padding:34px 0;background:linear-gradient(180deg,#fff 0%,#F6F8FC 50%,#fff 100%)}
.track{display:flex;gap:26px;width:max-content;align-items:center;margin-bottom:20px;animation:eghMarqueeL 42s linear infinite}
.track.reverse{animation-name:eghMarqueeR}
.track:last-child{margin-bottom:0}
/* ★ 10-17（用户：图再大些、不超框边 5px、自动缩小；保留滚动）：格子加到 210×100，内边距 5px，图撑满内容区 */
.track .lg{display:flex;align-items:center;justify-content:center;width:210px;height:100px;padding:5px;border-radius:12px;background:#fff;border:1px solid var(--egh-line);flex:0 0 auto;transition:border-color .22s,box-shadow .22s,transform .22s}
@media (hover:hover){.track .lg:hover{border-color:var(--egh-brand);box-shadow:var(--egh-sh-2);transform:translateY(-3px)}}
.track .lg img{width:100%;height:100%;object-fit:contain;display:block}
@keyframes eghMarqueeL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes eghMarqueeR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.track{animation:none}}
@container eghpage (max-width:900px){.track{gap:18px}.track .lg{width:170px;height:82px;padding:5px}.track .lg img{width:100%;height:100%}}
/* ★ 商城独立建站：两张对比卡「放大缩小」（与插件矩阵同一套体感，用户定稿 10-10）。
   默认两张均等（flex-grow:1）；鼠标指到哪张，哪张 grow 到 1.75 变大、内容同步放大，
   另一张被挤小；移开复原。grid 2 列分不出大小 → 换 flex 用 flex-grow 分配。 */
.egh-duo{display:flex;gap:20px;margin-top:30px}
.egh-duo .duo{flex:1 1 0;min-width:0}
.egh-duo .duo.on{flex-grow:1.75;border-color:var(--egh-brand);box-shadow:var(--egh-sh-3)}
@media (hover:hover){.egh-duo .duo:hover{flex-grow:1.75;border-color:var(--egh-brand);box-shadow:var(--egh-sh-3)}}
@media (hover:hover){.egh-duo:has(.duo:hover) .duo.on:not(:hover){flex-grow:1;border-color:var(--egh-line);box-shadow:none}}
.egh-duo .duo .ic{transition:width .3s var(--egh-ease),height .3s var(--egh-ease),background .3s}
.egh-duo .duo .wm{position:absolute;right:-16px;bottom:-20px;width:96px;height:96px;color:var(--egh-brand-t);opacity:.06;pointer-events:none}
.egh-duo .duo.on .ic{width:56px;height:56px;background:var(--egh-brand);color:#fff}
@media (hover:hover){.egh-duo .duo:hover .ic{width:56px;height:56px;background:var(--egh-brand);color:#fff}}
.egh-duo .duo h4{transition:font-size .3s var(--egh-ease)}
.egh-duo .duo.on h4{font-size:21px;color:var(--egh-brand-t)}
@media (hover:hover){.egh-duo .duo:hover h4{font-size:21px;color:var(--egh-brand-t)}}
.egh-duo .duo .wm{transition:width .3s var(--egh-ease),height .3s var(--egh-ease)}
.egh-duo .duo.on .wm{width:130px;height:130px;opacity:.08}
@media (hover:hover){.egh-duo .duo:hover .wm{width:130px;height:130px;opacity:.08}}
@container eghpage (max-width:760px){.egh-duo{flex-direction:column}@media (hover:hover){.egh-duo .duo:hover{flex-grow:1}}.egh-duo .duo.on{flex-grow:1}}
.egh-duo .duo{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:var(--egh-r);background:#fff;border:1px solid var(--egh-line);text-decoration:none;transition:flex-grow .55s var(--egh-ease),border-color .35s var(--egh-ease),transform .35s var(--egh-ease),box-shadow .35s var(--egh-ease)}
@media (hover:hover){.egh-duo .duo:hover{border-color:var(--egh-brand);transform:translateY(-5px);box-shadow:var(--egh-sh-3)}}
/* ★★★ 第 85 批之七（用户 2026-10-13 14:51「点击汉堡按钮，容器的内容比框快，框跟不上的感觉」）
   ★★★ 第 85 批之十（用户 2026-10-13 15:11「这个问题还在，尤其是关闭菜单页的时候」）
   根因（两次都用 `_diag85o.py` / `_diag85p.py` 的 document.getAnimations() 逐条量出来）：
     抽屉开合时容器宽度是【瞬时】跳变的（第 82 批「两拍」的第一拍），一跳到 ≤760，
     容器内的 flex 卡片（`.egh-duo .duo`、`.egh-flow-grid .fg`）就整体改 flex-grow ——
     而它们的 flex-grow 过渡与外壳【两处都不一样】：
       · `.egh-duo .duo`  : .55s + --egh-ease(cubic-bezier(.4,0,.2,1))
       · `.fg`            : **.45s 写死** + --egh-ease
       · 外壳（.egh-drawer / .egh-content / .egh-nav / 拉条 / 遮罩）: var(--dw-dur) + --dw-ease
     ⇒ 1440 档实测：外壳 flex 560ms，而 `div.fg` 只有 450ms ⇒
        **内容比框早 110ms 停**，看着就是「框还没到、内容已经就位 / 框跟不上」。
   ⇒ 开合期间（.egh-dw-split / .egh-dw-anim）把这两类卡片的 flex-grow
      压到与外壳【同长 + 同曲线】，保证一起起步、一起停。
      只在抽屉开合时生效，平时 hover 仍走各自的 .55s/.45s + --egh-ease，观感不变。 */
body.egh-dw-split .egh-duo .duo, body.egh-dw-anim .egh-duo .duo,
body.egh-dw-split .egh-flow-grid .fg, body.egh-dw-anim .egh-flow-grid .fg{
  transition-duration:var(--dw-dur,.42s);
  transition-timing-function:var(--dw-ease,cubic-bezier(.32,.06,.2,1))}
.egh-duo .duo .ic{width:46px;height:46px;border-radius:13px;background:var(--egh-brand-l);display:flex;align-items:center;justify-content:center;color:var(--egh-brand-t)}
.egh-duo .duo .tag{font-size:12.5px;font-weight:500;padding:4px 11px;border-radius:999px;background:var(--egh-brand-l);color:var(--egh-brand-t);align-self:flex-start}
.egh-duo .duo h4{font-size:18px;font-weight:600;color:var(--egh-ink-1)}
.egh-duo .duo p{font-size:14.5px;color:var(--egh-ink-2);line-height:1.65}
.egh-duo .duo ul{font-size:14.5px;color:var(--egh-ink-2);line-height:1.85}
.egh-duo .duo ul li{display:flex;gap:8px}
.egh-duo .duo ul li svg{flex:0 0 auto;margin-top:5px;color:var(--egh-brand-t)}
.egh-duo .duo .more{margin-top:auto;font-size:15px;font-weight:500;color:var(--egh-brand-t);padding-top:6px}
@container eghpage (max-width:760px){.egh-duo{grid-template-columns:1fr}}
/* ★ 定制流程：复刻 crmeb.com「电商领域全行业解决方案」手风琴（已读其源码移植）——
   3 个列容器(.fcol)高度固定 → 板块总高恒定，聚焦/缩小只是列内 flex 份额变化，不影响整体对齐；
   同列一张聚焦(.on)拿大份额，其余(.min)对应变小并收起标签（crmeb 收配图，我们收标签）；
   「下一步」按钮 = 他们的「查看详情」，仅聚焦卡显示；鼠标移出板块恢复 09 默认聚焦。
   落位列序：左列 01/06/07、中列 02/05/08、右列 03/04/09（蛇形 01→02→03↓04←05←06↓07→08→09） */
.egh-flow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;position:relative}
.egh-flow-grid .fcol{display:flex;flex-direction:column;gap:16px;height:650px;min-width:0}
.egh-flow-grid .fg{flex:1 1 0;min-height:0;position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--egh-line);border-radius:12px;padding:18px;transition:flex-grow .45s var(--egh-ease),border-color .25s var(--egh-ease),box-shadow .25s var(--egh-ease)}
.egh-flow-grid .fg.on{flex:1.75 1 0;border-color:var(--egh-brand);box-shadow:0 18px 40px rgba(31,79,240,.14);z-index:2}
.egh-flow-grid .fg.on h4{color:var(--egh-brand-t)}
/* ★ 卡内内容块固定自身高度，不随卡片高度被 flex 压缩：
      否则放大过渡期间（卡高 .45s 才长到位、内容需求已先变大）标题/正文会被挤扁，长高后才回弹 */
.egh-flow-grid .fg > *{flex:0 0 auto}
.egh-flow-grid .n{width:28px;height:28px;border-radius:50%;background:var(--egh-brand);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.egh-flow-grid h4{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:var(--egh-ink-1);margin-bottom:8px}
.egh-flow-grid h4 svg{color:var(--egh-brand-t);flex:0 0 auto}
.egh-flow-grid p{font-size:14px;color:var(--egh-ink-2);line-height:1.6;margin-bottom:10px;flex:0 0 auto}
.egh-flow-grid ul{display:flex;flex-wrap:wrap;gap:6px;max-height:96px;overflow:hidden;margin-top:2px;transition:opacity .3s var(--egh-ease),max-height .35s var(--egh-ease)}
/* min 卡（聚焦卡的同列邻居）对应变小：标签收起（等价 crmeb 的 .ind-img 归零） */
.egh-flow-grid .fg.min ul{opacity:0;max-height:0}
.egh-flow-grid li{font-size:12.5px;background:#F6F8FC;border:1px solid var(--egh-line);border-radius:999px;padding:3px 9px;color:var(--egh-ink-2)}
/* 「下一站」徽章：挂在流程的下一张卡上，顺序一眼可循 */
.egh-flow-grid .fg .next-tag{display:none;position:absolute;top:-11px;right:14px;background:var(--egh-brand);color:#fff;font-size:12px;font-weight:500;letter-spacing:.04em;padding:2px 10px;border-radius:999px;box-shadow:0 3px 8px rgba(59,110,246,.35)}
.egh-flow-grid .fg.next{border:1px dashed var(--egh-brand)}
.egh-flow-grid .fg.next .next-tag{display:block}
/* 「下一步」指引按钮：大号圆形箭头 + 目标步骤名；方向跟随流程（dir-r 向右 / dir-d 换行向下） */
.egh-flow-grid .fnx{margin-top:auto;align-self:flex-end;display:none;align-items:center;gap:10px;background:var(--egh-brand);color:#fff;border:0;border-radius:999px;padding:7px 16px 7px 8px;cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .25s var(--egh-ease),transform .25s var(--egh-ease),background .2s;pointer-events:none;box-shadow:0 6px 16px rgba(59,110,246,.35)}
.egh-flow-grid .fg.on .fnx{display:inline-flex;opacity:1;transform:none;pointer-events:auto;animation:eghFx 1.6s ease-in-out infinite}
@media (hover:hover){.egh-flow-grid .fg:hover .fnx{display:inline-flex;opacity:1;transform:none;pointer-events:auto;animation:eghFx 1.6s ease-in-out infinite}}
@media (hover:hover){/* ★ 点击锁定态＝只屏蔽鼠标动作：其余卡悬停不再弹出「下一步」按钮（放大卡自己的按钮保留）。
   —— 标签收起与放大尺寸完全沿用 hover 态的同列规则，不额外加限制（避免点任一步后整版标签全空）。
   —— 隐藏规则只作用于「非放大卡」(:not(.on))，否则放大卡自身被 :hover 覆盖导致「下一步」消失 */
.egh-flow-grid.locked .fg:not(.on):hover .fnx{display:none;opacity:0;pointer-events:none}}
@media (hover:hover){.egh-flow-grid .fnx:hover{background:#2b5ce0}}
@keyframes eghFx{0%,100%{box-shadow:0 6px 16px rgba(59,110,246,.35)}50%{box-shadow:0 6px 26px rgba(59,110,246,.6)}}
.egh-flow-grid .fnx .fx{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.egh-flow-grid .fnx .ft{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.egh-flow-grid .fnx .ft i{font-style:normal;font-size:12px;opacity:.85}
.egh-flow-grid .fnx .ft{font-size:13.5px;font-weight:600}
.egh-flow-grid .fnx.dir-d .fx svg{transform:rotate(0)}
/* CTA 收尾格 */
.egh-flow-grid .fg.cta{background:linear-gradient(150deg,#3B6EF6 0%,#5B8CFF 100%);border:0;color:#fff}
.egh-flow-grid .fg.cta .n{background:rgba(255,255,255,.22)}
.egh-flow-grid .fg.cta h4{color:#fff}
.egh-flow-grid .fg.cta h4 svg{color:#fff}
.egh-flow-grid .fg.cta p{color:rgba(255,255,255,.9)}
.egh-flow-grid .fg.cta .go{margin-top:auto;font-size:15px;font-weight:600;color:#fff;display:inline-flex;align-items:center;gap:6px;transition:gap .25s var(--egh-ease)}
.egh-flow-grid .fg.cta .cta-hint{margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.72)}
/* CTA 缩小时收起次要文案（同其余卡收起 ul 的口径一致），保证缩小态内容装得下、不溢出 */
.egh-flow-grid .fg.min .cta-hint{display:none}
.egh-flow-grid .fg.cta.on{box-shadow:0 18px 40px rgba(59,110,246,.4)}
@media (hover:hover){.egh-flow-grid .fg.cta:hover .go{gap:12px}}
.egh-flow-grid .fg.cta.on{background:linear-gradient(150deg,#3B6EF6 0%,#5B8CFF 100%)}
@media (hover:hover){/* ★ 09 悬停白屏修复：通配 .fg:hover{background:#fff}（卡片底色段）会把 CTA 蓝渐变覆盖成白，
   这里用更高特异性把蓝渐变锁死（普通态 + .on 态 + 悬停态都保持蓝） */
.egh-flow-grid .fg.cta, .egh-flow-grid .fg.cta:hover, .egh-flow-grid .fg.cta.on:hover{background:linear-gradient(150deg,#3B6EF6 0%,#5B8CFF 100%)}}
/* ≤1100：退出手风琴（列容器 display:contents 摊平回网格），按 data-idx 恢复 01→09 阅读顺序 */
@container eghpage (max-width:1100px){.egh-flow-grid{grid-template-columns:repeat(2,1fr)}
  .egh-flow-grid .fcol{display:contents}
  .egh-flow-grid .fg,.egh-flow-grid .fg.on{flex:none}
  .egh-flow-grid .fg.min ul{opacity:1;max-height:100px}
  .egh-flow-grid .fg.min .cta-hint{display:block}   /* ≤1100 摊平阅读：次要文案一并恢复显示 */
  .egh-flow-grid .fg[data-idx="0"]{order:1}.egh-flow-grid .fg[data-idx="1"]{order:2}.egh-flow-grid .fg[data-idx="2"]{order:3}
  .egh-flow-grid .fg[data-idx="3"]{order:4}.egh-flow-grid .fg[data-idx="4"]{order:5}.egh-flow-grid .fg[data-idx="5"]{order:6}
  .egh-flow-grid .fg[data-idx="6"]{order:7}.egh-flow-grid .fg[data-idx="7"]{order:8}.egh-flow-grid .fg[data-idx="8"]{order:9}}
@container eghpage (max-width:620px){.egh-flow-grid{grid-template-columns:1fr}}
/* 首页 Hero 下载区统计 */
.egh-hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.egh-hero-stats .hs{background:#fff;border:1px solid var(--egh-line);border-radius:var(--egh-radius);padding:22px 14px;text-align:center;box-shadow:var(--egh-sh-1);transition:transform .25s var(--egh-ease),box-shadow .25s,border-color .25s}
@media (hover:hover){.egh-hero-stats .hs:hover{border-color:var(--egh-brand);transform:translateY(-4px);box-shadow:var(--egh-sh-2)}}
.egh-hero-stats .hs b{display:block;font-size:clamp(28px,4.2vw,40px);font-weight:700;color:var(--egh-ink-1);line-height:1.1;letter-spacing:-.5px}
.egh-hero-stats .hs b span{font-size:18px;font-weight:600;margin-left:2px}
.egh-hero-stats .hs>span{display:block;margin-top:8px;font-size:14px;color:var(--egh-ink-2)}
@container eghpage (max-width:760px){.egh-hero-stats{grid-template-columns:repeat(2,1fr)}}
/* 营销运维数字加白框卡片 */
.egh-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.egh-num{background:#fff;border:1px solid var(--egh-line);border-radius:var(--egh-radius);padding:24px 14px;box-shadow:var(--egh-sh-1);transition:transform .25s var(--egh-ease),box-shadow .25s,border-color .25s}
@media (hover:hover){.egh-num:hover{border-color:var(--egh-brand);transform:translateY(-4px);box-shadow:var(--egh-sh-2)}}
.egh-num b{display:block;font-size:clamp(26px,3.6vw,34px);font-weight:700;color:var(--egh-ink-1);line-height:1.1}
.egh-num b small{font-size:16px;font-weight:600;margin-left:2px}
.egh-num span{display:block;margin-top:8px;font-size:14px;color:var(--egh-ink-2)}
@container eghpage (max-width:900px){.egh-nums{grid-template-columns:repeat(2,1fr)}}
/* ---------- 卡片底色：极淡、按板块分色温，破掉「整页一片白」的单调 ----------
   饱和度都压得很低（明度 96%~98%），只做层次不做花哨；hover 时转纯白，
   配合品牌色边框形成「浮起来」的反馈。 */
.egh-mtx .mt[data-k="official"]{background:linear-gradient(165deg,#F2F6FF 0%,#FFFFFF 66%)}
.egh-mtx .mt[data-k="community"]{background:linear-gradient(165deg,#EEFAF7 0%,#FFFFFF 66%)}
.egh-mtx .mt[data-k="theme"]{background:linear-gradient(165deg,#F7F8FB 0%,#FFFFFF 66%)}
.egh-mtx .mt.on{background:linear-gradient(135deg,#E8F0FF 0%,#FFFFFF 74%)}
@media (hover:hover){.egh-mtx .mt:hover{background:#fff}}
.egh-cell{background:linear-gradient(165deg,#EEFAF8 0%,#FFFFFF 68%)}
@media (hover:hover){.egh-cell:hover{background:#fff}}
.egh-duo .duo{background:linear-gradient(165deg,#F2F6FF 0%,#FFFFFF 68%)}
.egh-duo .duo+.duo{background:linear-gradient(165deg,#EEFAF7 0%,#FFFFFF 68%)}
@media (hover:hover){.egh-duo .duo:hover{background:#fff}}
.egh-flow-grid .fg{background:linear-gradient(165deg,#F5F6FD 0%,#FFFFFF 70%)}
@media (hover:hover){.egh-flow-grid .fg:hover{background:#fff}}
.egh-num{background:linear-gradient(165deg,#F6F9FD 0%,#FFFFFF 70%)}
@media (hover:hover){.egh-num:hover{background:#fff}}
.egh-hero-stats .hs{background:linear-gradient(165deg,#F6F9FD 0%,#FFFFFF 70%)}
@media (hover:hover){.egh-hero-stats .hs:hover{background:#fff}}
/* ★ 品牌层清单加底色时必须补左右内边距：原来的 padding 是 10px 0（左右为 0），
   不补的话背景左边缘会直接压住序号方块。用户只要「把 1/2/3 拉进来一点」，
   所以只补左右 14px，不动上下间距、不加圆角，保持原本虚线清单的样子。 */
.egh-quote li{background:linear-gradient(165deg,#F5F8FF 0%,#FFFFFF 72%);padding:10px 14px}
.egh-quote li:last-child{border-bottom:0}
.egh-logowall .lg{background:linear-gradient(165deg,#F7F9FD 0%,#FFFFFF 70%)}
.egh-pms>div{background:linear-gradient(165deg,#F4F7FF 0%,#FFFFFF 72%);border-radius:var(--egh-r);padding:20px 16px}
.egh-bento>.egh-card:not(.big){background:linear-gradient(165deg,#F7F9FF 0%,#FFFFFF 68%)}
@media (hover:hover){.egh-bento>.egh-card:hover{background:#fff}}
/* ---------- 定制流程：8 步连成一条「会走」的蛇形路径（boustrophedon） ----------
   落位：01(1,1) 02(2,1) 03(3,1) → 04(3,2) 05(2,2) 06(1,2) → 07(1,3) 08(2,3) 09(3,3)。
   即 01→02→03 向右，03 向下到 04，04→05→06 向左，06 向下到 07，07→08→09 向右。
   卡片间用流动虚线连接，看着像「走过去」的通道。 */
.egh-flow-grid .fg{position:relative;z-index:1}
/* 卡片间流动虚线：跟着蛇形走（右 / 左 / 下）；DOM 已按列容器分组，按「第几列-第几张」定位 */
.egh-flow-grid .fg::after{content:'';position:absolute;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--egh-brand) 0 5px,transparent 5px 9px);
  background-size:9px 2px;opacity:.5;animation:eghFlowGo .7s linear infinite}
/* 右连：01→02、02→03（左/中列第 1 张）、07→08、08→09（左/中列第 3 张）—— 流动方向左→右（与第一排一致） */
.egh-flow-grid .fcol:nth-child(1) .fg:nth-child(1)::after, .egh-flow-grid .fcol:nth-child(2) .fg:nth-child(1)::after, .egh-flow-grid .fcol:nth-child(1) .fg:nth-child(3)::after, .egh-flow-grid .fcol:nth-child(2) .fg:nth-child(3)::after{left:100%;top:50%;width:18px;height:2px;margin-top:-1px}
/* 左连：04→05（右列第 2 张）、05→06（中列第 2 张）—— 流动方向右→左（第二排反向，与路径方向一致） */
.egh-flow-grid .fcol:nth-child(3) .fg:nth-child(2)::after, .egh-flow-grid .fcol:nth-child(2) .fg:nth-child(2)::after{right:100%;top:50%;width:18px;height:2px;margin-top:-1px;animation:eghFlowGoL .7s linear infinite}
/* 下连：03→04（右列第 1 张）、06→07（左列第 2 张）—— 垂直流动方向 上→下（独立 Y 轴关键帧，否则竖线看不出动） */
.egh-flow-grid .fcol:nth-child(3) .fg:nth-child(1)::after, .egh-flow-grid .fcol:nth-child(1) .fg:nth-child(2)::after{left:50%;top:100%;width:2px;height:18px;margin-left:-1px;
  background:repeating-linear-gradient(180deg,var(--egh-brand) 0 5px,transparent 5px 9px);background-size:2px 9px;animation:eghFlowGoV .7s linear infinite}
.egh-flow-grid .fcol:nth-child(3) .fg:nth-child(3)::after{display:none}
@keyframes eghFlowGo{to{background-position:9px 0}}
@keyframes eghFlowGoL{to{background-position:-9px 0}}
@keyframes eghFlowGoV{to{background-position:0 9px}}
@media (prefers-reduced-motion:reduce){.egh-flow-grid .fg::after{animation:none}}
@container eghpage (max-width:1100px){.egh-flow-grid .fg::after{display:none}}
/* ---------- 5 线弹出面板：不再丢在页面正中，改贴右侧边栏左边缘展开 ----------
   原来是 left:50% + translate(-50%,-50%)（正中心，挡内容）。现在水平改成
   right:87px = 边栏距右(29) + 边栏宽(50) + 间隙(8)，正好贴在边栏左边；
   垂直仍与边栏居中对齐（边栏本身是 top:50% translateY(-50%)）。
   ★ 面板宽 288px，即使最窄的笔记本也不会超出左边界。 */
.egh-rail-pn{left:auto;right:87px;transform:translateY(-50%) scale(.97)}
.egh-rail-pn.on{transform:translateY(-50%) scale(1)}
@container eghpage (max-width:900px){.egh-rail-pn{right:61px}}
/* ========== Round16：crmeb 式装饰 ========== */
/* ---- 1) 插件矩阵：彩色淡底 + 大图标水印 + 「热门」贴角蓝条 ----
   彩底规则写在 Round12 的 data-k 底色之后，同特异性后者胜出。 */
/* ★ 水印大小跟【当前状态】走，不跟身份走：谁处于放大态(.on，JS 实时切换)谁用大水印，
   缩回 1×1 自动回小水印。之前绑在永久的 .feature 上 → 大卡用小水印、小卡用大水印，
   用户指出「大图应该大的 小图应该小的 一致才对」。比例统一 ≈ 卡宽 35%。 */
.egh-mtx .mt .wm{position:absolute;right:-16px;bottom:-20px;width:96px;height:96px;color:var(--egh-brand-t);opacity:.06;pointer-events:none;transition:width .3s var(--egh-ease),height .3s var(--egh-ease),opacity .3s}
.egh-mtx .mt.on .wm{width:200px;height:200px;right:-28px;bottom:-34px;opacity:.07}
.egh-mtx .mt.c0{background:linear-gradient(165deg,#EAF3FF 0%,#FFFFFF 72%)}
.egh-mtx .mt.c1{background:linear-gradient(165deg,#E6F7F6 0%,#FFFFFF 72%)}
.egh-mtx .mt.c2{background:linear-gradient(165deg,#F1EEFF 0%,#FFFFFF 72%)}
.egh-mtx .mt.c3{background:linear-gradient(165deg,#FFF3E8 0%,#FFFFFF 72%)}
.egh-mtx .mt.c4{background:linear-gradient(165deg,#EAF7EC 0%,#FFFFFF 72%)}
.egh-mtx .mt.c5{background:linear-gradient(165deg,#FDEFF3 0%,#FFFFFF 72%)}
.egh-mtx .mt.c6{background:linear-gradient(165deg,#FBF6E5 0%,#FFFFFF 72%)}
.egh-mtx .mt.c7{background:linear-gradient(165deg,#EDF0FF 0%,#FFFFFF 72%)}
.egh-mtx .mt.c8{background:linear-gradient(165deg,#FDEEEC 0%,#FFFFFF 72%)}
.egh-mtx .mt.c1 h4 svg{color:#0E9E94}
.egh-mtx .mt.c2 h4 svg{color:#7A5AF8}
.egh-mtx .mt.c3 h4 svg{color:#E8833A}
.egh-mtx .mt.c4 h4 svg{color:#3E9E4F}
.egh-mtx .mt.c5 h4 svg{color:#E05C8A}
.egh-mtx .mt.c6 h4 svg{color:#C9A227}
.egh-mtx .mt.c7 h4 svg{color:#5B6BE8}
.egh-mtx .mt.c8 h4 svg{color:#E05A4E}
/* 放大态仍回到品牌蓝调：写在彩底之后压住 c0~c8 */
.egh-mtx .mt.on{background:linear-gradient(135deg,#F6F8FF 0%,#FFFFFF 70%)}
/* 热门角标：贴住放大卡右上角，文字居中在蓝条里（替代原「主推」悬浮胶囊） */
.egh-mtx .mt.feature .hot{position:absolute;top:0;right:0;padding:7px 18px;background:var(--egh-brand);color:#fff;font-size:13px;font-weight:600;letter-spacing:.08em;border-radius:0 0 0 14px;line-height:1.2}
/* ---- 2) 五条业务线 Bento 卡：大图标水印 ---- */
.egh-bento>.egh-card{position:relative;overflow:hidden}
.egh-bento>.egh-card .wm{position:absolute;right:-18px;bottom:-26px;width:120px;height:120px;color:var(--egh-brand-t);opacity:.05;pointer-events:none}
.egh-bento>.egh-card.big .wm{width:200px;height:200px;right:-34px;bottom:-40px;opacity:.06}
/* ---- 3) 其他板块：右下角淡色斑，去空白感 ----
   注意：flow 卡的连线画在卡外（left:100%），绝不能给 .fg 加 overflow:hidden，
   它的色斑只能整个待在卡内。 */
.egh-cell, .egh-duo .duo, .egh-num, .egh-hero-stats .hs, .egh-pms>div{position:relative;overflow:hidden}
.egh-cell:after, .egh-duo .duo:after, .egh-num:after, .egh-hero-stats .hs:after, .egh-pms>div:after{content:"";position:absolute;right:-34px;bottom:-34px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--egh-brand-l) 0%,rgba(255,255,255,0) 72%);opacity:.55;pointer-events:none}
.egh-flow-grid .fg::before{content:"";position:absolute;right:6px;bottom:6px;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--egh-brand-l) 0%,rgba(255,255,255,0) 72%);opacity:.5;pointer-events:none}
/* ---- 4) 行业解决方案卡（crmeb 全行业解决方案版式） ---- */
.egh-ind-head{margin-top:46px}
.egh-ind-head h3{font-size:20px;font-weight:600;color:var(--egh-ink-1);margin:0 0 6px}
.egh-ind-head p{font-size:14.5px;color:var(--egh-ink-3);margin:0 0 4px}
.egh-inds{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:20px}
.egh-ind{display:flex;gap:16px;padding:20px;background:#fff;border:1px solid var(--egh-line);border-radius:var(--egh-r);text-decoration:none;position:relative;overflow:hidden;transition:transform .25s var(--egh-ease),box-shadow .25s,border-color .25s}
@media (hover:hover){.egh-ind:hover{border-color:var(--egh-brand);transform:translateY(-4px);box-shadow:var(--egh-sh-3)}}
.egh-ind .pic{flex:0 0 64px;width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff}
.egh-ind .pic svg{width:30px;height:30px}
.egh-ind .pic.g0{background:linear-gradient(135deg,#5B9BFF,#2E6FE8)}
.egh-ind .pic.g1{background:linear-gradient(135deg,#34C0B4,#0E9E94)}
.egh-ind .pic.g2{background:linear-gradient(135deg,#9B7BFF,#6C4DF0)}
.egh-ind .pic.g3{background:linear-gradient(135deg,#FFA45C,#E8833A)}
.egh-ind .pic.g4{background:linear-gradient(135deg,#59C97E,#2F9E55)}
.egh-ind .pic.g5{background:linear-gradient(135deg,#FF8AA8,#E05C8A)}
.egh-ind h4{display:flex;align-items:center;gap:8px;margin:2px 0 6px;font-size:15.5px;font-weight:600;color:var(--egh-ink-1)}
.egh-ind .tg{font-size:12px;font-weight:500;padding:2px 8px;border-radius:999px;background:var(--egh-brand-l);color:var(--egh-brand-t);white-space:nowrap}
.egh-ind p{margin:0;font-size:14px;color:var(--egh-ink-2);line-height:1.6}
.egh-ind ul{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--egh-ink-3)}
.egh-ind ul li{display:flex;align-items:center;gap:5px}
.egh-ind ul svg{flex:0 0 auto;color:var(--egh-brand-t)}
.egh-ind:after{content:"";position:absolute;right:-30px;bottom:-30px;width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--egh-brand-l) 0%,rgba(255,255,255,0) 72%);opacity:.5;pointer-events:none}
@container eghpage (max-width:900px){.egh-inds{grid-template-columns:1fr}}
/* ---- 7) 行业卡：图标块 hover 放大 + 「了解详情」箭头浮现 ---- */
.egh-ind .pic{transition:transform .3s var(--egh-ease)}
@media (hover:hover){.egh-ind:hover .pic{transform:scale(1.06)}}
.egh-ind .more{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:14px;font-weight:500;color:var(--egh-brand-t);opacity:.5;transition:opacity .2s,transform .2s}
@media (hover:hover){.egh-ind:hover .more{opacity:1;transform:translateX(4px)}}
/* ---- 8) 右栏业务线面板：同一套元素风格（淡彩底 + 大水印跟当前线换图标） ---- */
.egh-rail-pn{overflow:hidden;background:linear-gradient(165deg,#F3F7FF 0%,#FFFFFF 74%)}
.egh-rail-pn .wm{position:absolute;right:-22px;bottom:-30px;width:150px;height:150px;color:var(--egh-brand-t);opacity:.07;pointer-events:none;transition:.3s}

/* ========== 9. 全站响应式断点阶梯（细致多档，覆盖 320~1440+） ========== */
:root{--nav-h:60px}
.egh-nav-in{height:var(--nav-h)}
.egh-menu.on{top:var(--nav-h)}
/* ★ 顶栏形态（横排 / 汉堡）唯一判定处 = style 末尾 keep-media 区的视口断点，此处不再有规则 */

/* 超大桌面：留白更大 */
@container eghpage (min-width:1440px){
  .wrap{padding:0 30px}
  .egh-sec{padding:88px 0}
}
@container eghpage (min-width:1280px){
  .egh-sec{padding:80px 0}
  .egh-hero{padding:92px 0 76px}
}
/* 常规桌面收窄 */
@container eghpage (max-width:1200px){
  .egh-sec{padding:64px 0}
  .egh-hero{padding:76px 0 62px}
}
@container eghpage (max-width:1100px){
  .wrap{padding:0 22px}
  .egh-head{margin-bottom:30px}
}
/* 平板横 */
@container eghpage (max-width:1024px){
  .egh-sec{padding:58px 0}
}
/* 平板竖 / 小笔电 */
@container eghpage (max-width:900px){
  .egh-sec{padding:54px 0}
  .egh-hero{padding:66px 0 54px}
}
/* 大手机横 */
@container eghpage (max-width:768px){
  .egh-sec{padding:48px 0}
  .wrap{padding:0 16px}
  .egh-hero{padding:54px 0 44px}
  .egh-h2{font-size:clamp(20px,5.2vw,26px)}
  .egh-hero h1{font-size:clamp(26px,6.6vw,34px)}
}
/* 手机竖 */
@container eghpage (max-width:640px){
  .egh-sec{padding:44px 0}
  /* ★ 已删（顶栏在容器外，容器查询管不到；且导航尺寸/字号必须恒定） */
  /* ★ 已删（顶栏在容器外，容器查询管不到；且导航尺寸/字号必须恒定） */
  /* ★ 已删（顶栏在容器外，容器查询管不到；且导航尺寸/字号必须恒定） */
  .egh-head{margin-bottom:24px}
  .egh-sub{font-size:15px}
  .egh-hero p{font-size:clamp(14px,3.6vw,16px)}
}
/* 小手机 */
@container eghpage (max-width:480px){
  .wrap{padding:0 14px}
  .egh-sec{padding:38px 0}
  .egh-hero{padding:46px 0 38px}
  .egh-btn{height:34px;padding:0 13px;font-size:14px}
  .egh-h2{font-size:clamp(19px,6vw,23px)}
  .egh-hero-act{flex-direction:column;align-items:stretch}
  .egh-hero-act .egh-btn{width:100%}
}
/* 超小屏：次级按钮让位，只留主 CTA，避免顶栏挤爆 */
@container eghpage (max-width:375px){
  .wrap{padding:0 12px}
  .egh-sec{padding:34px 0}
}
@container eghpage (max-width:360px){
  .egh-hero-act, .egh-hero-tags{gap:8px}
  .egh-tag{font-size:12.5px;padding:4px 10px}
}
@container eghpage (max-width:320px){
  .wrap{padding:0 10px}
  .egh-sec{padding:30px 0}
}
/* ★ 手机端专项修复（桌面组件在窄屏下的适配） */
@container eghpage (max-width:640px){
  /* 插件矩阵：4 列对照网格 → 单列堆叠（430px 下每列仅 ~97px，窄卡内容宽度直接为 0，不可读） */
  .egh-mtx{grid-template-columns:1fr;grid-auto-rows:minmax(0,auto)}
  .egh-mtx .mt,.egh-mtx .mt.on,.egh-mtx .mt.feature,.egh-mtx .mt.feature.on{grid-column:span 1;grid-row:span 1}
}
@container eghpage (max-width:760px){
  /* 商城 duo 卡：flex:1 1 0 是横向手风琴的写法，容器转纵向后 basis:0 落在高度轴上，
     卡片被压到只剩图标 → 恢复按内容自适应高度 */
  .egh-duo .duo{flex:0 0 auto}
}
@container eghpage (max-width:1100px){
  /* 流程板块：显示每张卡自己的「下一步」按钮（此前全部 display:none，
     初始 .on 又是无按钮的 09 → 手机端整个板块没有任何可点入口），去掉脉冲动画保持安静。
     ★ 条件加 (hover:none)：iPad Pro 横屏 1366 是触屏但宽度 >1100，光按宽度判断会让它的
       按钮全藏起来，触屏用户没有鼠标可 hover、就永远推不动流程 —— 所以触屏一律显示全部按钮 */
  .egh-flow-grid .fnx{display:inline-flex;opacity:1;transform:none;pointer-events:auto;animation:none}
}

/* ========== 11. 左侧菜单抽屉（仅窄屏 / 导航被挤时出现） ========== */
/* 分级降级第 1 级：空间不够时【只收掉「立即下载 EGOHUI」，保留「登录」】—— 保住导航横条也不牺牲登录入口 */
/* ★≤1100（手机 / 平板 / 拖窄的窗口）一律保留汉堡入口：
   非手机尺寸这一档导航往往还够宽、分级降级只收了按钮，汉堡会被隐藏 →
   菜单打不开、拉条也就无从谈起。这里强制显示，保证「任何非大屏宽度都能打开菜单」。 */

/* 抽屉：贴左边、从顶栏下方滑入，盖在主页上面；主页一点都没动 */
/* ★ 第 65 批：抽屉改【全高】（top:0）—— 登录整行顶到屏幕最上面，不再从顶栏下方出。 */
.egh-drawer{--dw-w:min(86vw,360px);position:fixed;top:0;left:0;bottom:0;width:var(--dw-w);
  background:#fff;z-index:300;display:flex;flex-direction:column;overflow:hidden;visibility:hidden;
  transform:translateX(-100%);box-shadow:0 0 0 rgba(16,24,40,0);
  /* 「吸」的手感：起步快、末端收住；不带过冲（过冲 = 抖），震动交给手机触觉 */
  transition:transform .32s cubic-bezier(.2,.8,.3,1),visibility .32s}
/* ★ 第 64 批：投影向右收窄（spread -32、blur 36）—— 老参数 24px 0 70px -24px 的模糊会向上扩散 ~47px，
   在顶栏高度上糊出一条灰带（头部收进缝里后就露出来了）。现在模糊只余 (36-32)/2≈2px，灰带消失。 */
.egh-drawer.on{transform:translateX(0);visibility:visible;box-shadow:16px 0 36px -32px rgba(16,24,40,.28)}
.egh-drawer.dragging{transition:visibility .32s}   /* 拖拽期间跟手，不带过渡 */

/* ★ 第 61 批 抽屉顶栏（按用户参考图）：登录（头像+文字）+ 提醒/设置/扫一扫，下面「消息」条目，再往下才是导航菜单 */
/* ★★ 第 77 批（用户 03:21）：「菜单页排版 只能在 320 宽度做。多出来可以放其他广告之类的。
   但是主要内容必须在 320.」
   ★★ 同日 03:28 用户纠正：「菜单页的 登录行 右边按钮要还原到之前拉动跟随」
      + 03:30：「菜单页不是固定 320 ，只是排版在 320 内做而已。」
   ⇒ **菜单页本身宽度不变**（= --dw-menu），只是把**内容**排进 320 主栏（.dw-body 的 max-width）；
     顶栏这一行【不加 max-width】—— 它的右边缘必须继续跟着拉条走（第 89 批起 = body.egh-dw-split .dw-acts 那条
     transform:translateX(--dw-pos − --dw-menu)；原来是 width:var(--dw-pos)，会让按钮和主页边各走各的轨道），
     我曾在 03:23 给它加过 max-width:320px，右侧三个按钮就卡在 320 不再跟随了，已回退。 */
.egh-drawer .dw-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 14px 12px;border-bottom:1px solid var(--egh-line)}
/* ★ 第 69 批：菜单页顶栏（登录 + 搜索/提醒/深浅切换）【跟着拉条走】。
   菜单页宽度是打开时定死的（--dw-menu，约占视口 91%），拉条往左拉时右半截被主页盖住，
   那三个按钮原本钉在菜单页右上角 → 一拉就被盖掉看不见（用户原话）。
   分栏时把这一行的宽度收到【可见宽度 --dw-pos】，右侧按钮自然贴到分界线旁、随拉条左右移动。
   overflow:hidden 防止拉到很窄时按钮溢出到主页上；.dw-me 允许收缩，避免挤爆布局。 */
body.egh-dw-split .egh-drawer .dw-top{width:100%;min-width:0;overflow:hidden;padding-right:12px}
/* ★★★ 第 89 批（10-14 15:5x，用户「菜单页的搜索行 搜索三个按钮又不跟随拉动条了」+「拉动后没有跟着主页边一起走」）
   三枚按钮的跟随【从 width 换成 transform】—— 就是把 88 批之三留下的那条 width 过渡换掉。
   [根因] 主页层左缘（= 可见边界）走的是 `transform:translateX(var(--dw-pos))`（合成线程）；
     而 .dw-top 当时跟的是 `width:var(--dw-pos)`（主线程布局）—— 两条轨道、两套状态机。
     只要某个状态里一条在动、另一条不动，两者立刻错开：实测「关闭」那一瞬差到 360px、
     开场第一帧差 26px（88 批之三注释里记的「content.x 落后 pos 约 25~33px」是同一个病，当时只压了过渡没换轨道）。
   [修法] 让【按钮自己】translateX（同一条 --dw-dur / --dw-ease，和 .egh-content 的 translateX 逐帧同值）
     ⇒ 与主页边同一条轨道，永远贴着走；行宽不再随 pos 变，顺带【拖动时不再每帧重排抽屉】。
   [几何] 行宽 = 菜单页整宽（--dw-menu）；按钮组原位右缘 = 行右缘 − 12（padding-right）；
     平移 −(menu − pos) ⇒ 按钮组右缘 恒 = pos − 12 = 主页层左缘 − 12 ✓（与 .egh-content 同一边界）。 */
body.egh-dw-split .egh-drawer .dw-acts{transform:translateX(calc(var(--dw-pos,0px) - var(--dw-menu,0px)));
  transition:transform var(--dw-dur) var(--dw-ease)}
body.egh-dw-split .egh-drawer .dw-me{min-width:0;overflow:hidden}
body.egh-dw-split .egh-drawer .dw-me>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.egh-drawer .dw-me{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;
  color:var(--egh-ink);text-decoration:none}
/* ★ 第 80 批（用户 04:58「登录图标改成符合网站方格，丑不拉几」）——
   原来登录头像是【34px 正圆 + 淡蓝底 + 无描边】，整站只有它一个圆形；
   而站里所有图标容器都是【方格 + 1px 描边】（.dw-act 34×34 r9、.mega-card .ci r18）。
   现在并进同一套方格语言：34×34（box-sizing:border-box，含描边）、圆角 9、1px 描边、白底、品牌色图标。 */
.egh-drawer .dw-me .dw-ava{width:34px;height:34px;border-radius:9px;background:#fff;
  border:1px solid var(--egh-line);color:var(--egh-brand-t);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.egh-drawer .dw-acts{display:flex;gap:8px}
.egh-drawer .dw-act{width:34px;height:34px;flex:0 0 auto;border:1px solid var(--egh-line);border-radius:9px;
  background:#fff;color:var(--egh-ink-2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0}
.egh-drawer .dw-body .dw-msg{gap:9px;margin-bottom:6px;justify-content:flex-start}
/* ★★ 第 83 批（用户 2026-10-13「菜单页加一些元素进去 比如水印之类的，标题的图标之类的」
   + 勾选：一级标题加图标 / 底部品牌水印 / 登录行+消息也加图标 / 水印右下角出血被裁）——
   ① **一级条目行首图标**（`insertIco` 注入的 `<i class="dw-ico">`）：28×28、圆角 8、1px 描边、白底、16px 线稿图标。
      规格**故意与右侧 .dw-cv 完全一致**（28×28 r8）→ 一条一级行两端各一枚方格，左右对称、整齐。
      展开（.egh-drop.on）时整枚亮成品牌淡底 + 品牌色，与同行文字同步变色。
      图标口径与首页右侧 rail / .egh-lines 卡片【同一枚】（`#ic-brand` `#ic-om` `#ic-shop` `#ic-ops` `#ic-dev`），
      「EGOHUI 首页」补 `#i-grid`（同笔触 stroke 1.25）——
      ⇒ 一个业务全站一个符号，用户在哪都认得。
   ② **「消息」条目**原来是裸 `<svg>`（没有容器），在一排方格图标里看着"不像图标"；
      现在并进同一套 `.dw-ico` 方格（JS 把原 svg 包进 `<i>`），与一级行逐行对齐。
   ③ **抽屉右下角品牌水印** `.dw-wm`：用 `#i-logo`（115×115 新标，自有品牌色），故意出血到可见区之外被裁——
      与 `.mega-card .wm` 同一种「出水」语言（用户 04:51：「就是要那种故意被裁的感觉」）。
      ★ 第 83 批换标后重核过：新标内容只占 115 图高的 73（y 21~94）、左右满宽，
        所以 bottom 从 -34 下调到 **-78** —— 让 logo **内容本身**（不是透明留白）从右下角出血：
        220 尺寸下内容 190×140 落在 x 130~350 / y 900~1040，可见区 0~320、视口高 1000
        ⇒ 右出血 30px、下出血 40px。
        旧的 -34 是按立方体（占满整块方形）算的；换成扁标后内容底边停在 y≈994，
        下边一滴血都不出，看着像"浮"在右下角而不是"从右下角冒出来"。
      ★★★ 定位必须用 **left 基准**、绝不能用 right：
        分栏时抽屉宽 = `--dw-menu`（900 档 ≈ 840），而可见区只有 `0 ~ --dw-pos`（320）；
        若写 `right:-34px`，水印会落在 x≈800 —— **被主页整块盖住、任何档位都永远看不见**。
        用 `left: calc(--dw-col − 190)` = 130 → 水印落在 130~350，
        可见 130~320（190px 宽）＋右侧 30px 出血被裁 ⇒ 永远贴着 320 主栏右下角。
   ★ 水印是 `.egh-drawer` 的**第一个子节点**（DOM 在 .dw-top/.dw-body 之前）⇒ 落在内容层**之下**，
     不遮文字（与 `.mega-card .wm` 放首位同理）；`.egh-drawer{overflow:hidden}` 负责裁掉出血部分。 */
.egh-drawer .dw-ico{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:#fff;
  border:1px solid var(--egh-line);color:var(--egh-ink-2);display:flex;align-items:center;
  justify-content:center;margin-right:10px;
  transition:background .18s,color .18s,border-color .18s}
.egh-drawer .dw-ico svg{width:16px;height:16px;display:block}
.egh-drawer .egh-drop.on>.t .dw-ico{background:var(--egh-brand-l);border-color:transparent;color:var(--egh-brand-t)}
/* ★ 裸链接条目（「EGOHUI 首页」「定制开发服务」）放进行首图标后，行内变成【两个 flex 项】，
   上面 828 行那条 `justify-content:space-between` 就会把文字整段推到最右边。
   这里用更高权重（3 类 + 1 元素 > 2 类 + 1 元素）压回靠左；`消息`行不需处理（它本来就走 flex-start）。 */
.egh-drawer .dw-body>a:not(.dw-msg){justify-content:flex-start}
.egh-drawer .dw-wm{position:absolute;left:calc(var(--dw-col) - 190px);bottom:-78px;
  width:220px;height:220px;opacity:.05;pointer-events:none}
.egh-drawer .dw-body{flex:1 1 auto;overflow-y:auto;padding:12px 0 32px;-webkit-overflow-scrolling:touch}
.egh-drawer .dw-body>a, .egh-drawer .dw-body .egh-drop>.t{display:flex;align-items:center;
  justify-content:space-between;padding:12px 14px;border-radius:10px;font-size:15px;font-weight:500;
  color:var(--egh-ink);text-decoration:none;transition:background .18s,color .18s}
@media (hover:hover){.egh-drawer .dw-body>a:hover, .egh-drawer .dw-body .egh-drop>.t:hover{background:#F6F8FC;color:var(--egh-brand-t)}}
/* ★ 第 65 批：箭头改成【上下】（跟 PC 一致），并紧跟文字（不再被 space-between 推到最右）
   注意选择器要跟原规则同权重（.egh-drawer .dw-body .egh-drop>.t），否则压不过 space-between。 */
.egh-drawer .dw-body .egh-drop>.t{justify-content:flex-start}
/* ★★★ 第 77 批（用户 2026-10-13 03:08 三条 + 03:21 两条）—— 二级改回【手风琴】+ 竖排菜单按「320 主栏」排一版。
   【03:08 原话】「菜单页的二级的卡片上下叠加，然后默认不打开，打开一个一级，其他二级要自动收起来。
                  然后再帮我看看怎么更好能展开这个二级，怕客户老误触，比如手机更难点击。这个竖排菜单是不是要排一下版」
   【03:21 原话】「菜单页排版 只能在 320 宽度做。多出来可以放其他广告之类的。但是主要内容必须在 320.」
   ⇒ ① 菜单页所有内容收进一条 **320px 主栏**（--dw-col；.dw-top 与 .dw-body 都加了 max-width）；
        抽屉比 320 宽时多出来的部分留白、以后放广告位 —— 所以二级宽度口径也从
        「min(560px,100%)」直接收回 100%（就在这条主栏里铺满，不再按抽屉宽排）。
      ② 卡片【上下叠加】= 单列（原来 auto-fit 在宽抽屉里会排成 2 列）。
      ③ 二级【默认收起】；一级负责开合，且**同时只开一个**（互斥、收其余 .on 的逻辑在 JS 里）。
      ④ 防误触（尤其手机）三条：
         · 一级行 = 整行大热区（min-height:52px）+ touch-action:manipulation（去掉 300ms 双击缩放判定）；
         · 一级行【不再跳转、不再滚主页】，只做开合 —— 点错没有代价、不用回退；
           一级原有的锚点定位能力挪到展开面板顶部那条「XX总览 →」（JS 动态补，class .dw-ov）；
         · 二级行高抬到 44px（Apple HIG 最小可点尺寸 44pt）。
      ⑤ 竖排排版：一级 15.5px/600 + 右侧 chevron（展开时翻上去）、二级块左缩进 14px + 2px 竖线、
         「消息」下面加一条分隔线，跟下面的导航菜单分开。 */
.egh-drawer{--dw-col:320px;--dw-lv2-w:100%}
/* ★★ 第 77 批（03:44 修正）—— 主栏限制【下发给每一行】，而不是夹住滚动容器：
   上一版写 `.dw-body{max-width:320px}`，滚动条就竖在 x=320 那条线上（900 档实测 x≈310），
   屏幕中间凭空一条竖线，用户「还是很乱」。
   现在容器仍占满抽屉、滚动条留在抽屉最右；每一条条目自己 max-width → 内容照样收在 320 内。
   ★★★ 第 80 批（用户 04:37「菜单页的排版已经溢出 320 了 而且太丑了…各种压边」）——
   【实测根因（_probe80）】旧写法 = `.dw-body{padding:12px}` + 子项 `max-width:320px`：
     块级子项先占满内容盒，再被 max-width 收到 320 —— **但它落在 x=12，右边缘 = 12+320 = 332**。
     实测行 / 卡片 / 分隔线的右边缘全部是 332（超出 320 有 12px）。
     而停靠后菜单页可见区只有 0~320 → 每一条行、卡片、分隔线、高亮块的【右侧 12px 被内容层切平】
     = 用户说的「溢出 320」＋「各种压边」（圆角、右边框、分隔线全被裁掉）。
   【新写法】在 --dw-col(320) 这条主栏口径里留出左右各 12 的呼吸边：
     子项 max-width = 320−24 = 296，margin 左右各 12 → 实际落在 **x = 12 ~ 308**，
     整条都在 0~320 以内，右侧再也不被裁；同时左边 12 也保证高亮块/卡片不贴屏幕边。 */
.egh-drawer .dw-body>*{max-width:calc(var(--dw-col) - 24px);margin-left:12px;margin-right:12px}
.egh-drawer .dw-body .egh-drop>.t{min-height:52px;padding:14px;font-size:15.5px;font-weight:600;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* ★★ 第 77 批（用户 03:34「那个二级的上下 按钮要不要做个 按钮更好点击？」）：
   把原来那枚 7px 的裸箭头做成一枚【真正的按钮】—— 28×28、1px 描边、8px 圆角（整站按钮风格），
   展开时整枚翻 180°（箭头朝上）并亮成品牌色。
   ★ 关键：点击热区**不是**这 28px，而是【整条一级行】（52px 高 × 320 宽）—— 那才是「更好点击」的正解；
     这枚按钮的职责是给出**看得见的「可展开」提示**（点它 = 点整行，同一件事、同一行为，不会有两套逻辑）。
   ★ 元素由 JS 在建抽屉时插进每个一级行（class .dw-cv），这样才有两层伪元素可画（外框 + 里面的箭头）。 */
/* ★ 第 80 批（用户 04:58 澄清）：「箭头没有说要紧跟。只是那时屏幕大被拉得很远。」
   ⇒ 第 65 批那句「紧跟文字」**不是审美要求**，而是当时菜单页是整屏宽、
     space-between 会把箭头推到几百像素之外才做的权宜处理。
     现在菜单内容收在 320 主栏里（行宽 296），推到最后 = 「文字 ←→ 按钮」两端对齐，
     正是用户要的，也跟站里 .dw-body>a 那一排（justify-content:space-between）同一种语言。
   ⇒ 标回 margin-left:auto（按钮落在行尾内边距上）。 */
.egh-drawer .dw-cv{flex:0 0 auto;width:28px;height:28px;margin-left:auto;border:1px solid var(--egh-line);
  border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;
  color:var(--egh-ink-2);
  transition:transform .22s var(--egh-ease),background .18s,color .18s,border-color .18s}
.egh-drawer .dw-cv:after{content:"";width:6px;height:6px;margin-top:-3px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg)}
.egh-drawer .egh-drop.on>.t .dw-cv{background:var(--egh-brand-l);border-color:transparent;
  color:var(--egh-brand-t);transform:rotate(180deg)}
/* ★★ 第 77 批（03:39 修 bug）—— 抽屉里【必须掐掉主导航那条 :after 箭头】。
   第 399 行有一条全局 `.egh-drop>.t:after{...rotate(45deg)}`（主导航 PC 悬浮面板用），
   抽屉与主导航共用 `.egh-drop` 这个 class → 我上一版把抽屉自己的 :after 覆盖删掉后，
   全局那条立刻漏进来，一级行变成「小方钮 + 裸箭头」两枚箭头并排（900 档截图实拍）。 */
.egh-drawer .egh-drop>.t:after{display:none}
.egh-drawer .egh-drop.on>.t{background:#F6F8FC;color:var(--egh-brand-t)}
/* 手风琴：面板默认 display:none，只有挂上 .on 才展开（第 76 批那套「常显平铺」作废） */
/* ★ 第 80 批（用户 05:53「二级这个 你加个左边框干嘛？又压到上面一级边沿」）——
   **删掉二级面板那条 2px 左竖线**（第 76 批我加的，用户不要）；
   上边距 0 → 6：原来 margin-top:0，面板顶边正贴在上一级行的圆角底边上、那条线又从接缝处往下画
   → 就是「压到上面一级边沿」。
   ★★ 第 80 批之二（用户 05:09「卡片对齐左右两边吧…不然卡片看起来压到右边了 左边宽右边窄很难看」）——
   旧法只有【左侧】缩进（margin-left:14 + padding-left:14 = 28），右侧一路贴到主栏右沿：
     · 一级行   12 ~ 308
     · 二级内容 42 ~ 308     ← 左留 30、右留 0 → 卡片像被"挤"到右边（左宽右窄）。
   现在两侧【对称】缩进 12、取消 padding-left：
     · 一级行   12 ~ 308
     · 二级内容 24 ~ 296     ← 左留 12、右留 12；卡片与上面 links 同宽、左右都对齐。
   顺带卡片自动变窄到 272（正是用户说的「把卡片做小」），不再需要额外缩小。 */
.egh-drawer .egh-drop-pn{position:static;transform:none;left:auto;opacity:1;max-height:none;overflow:hidden;
  display:none;border:0;box-shadow:none;background:transparent;min-width:auto;
  margin:6px 12px 4px 12px;padding:0 0 12px 0}
.egh-drawer .egh-drop.on>.egh-drop-pn{display:block;animation:eghPnIn .24s var(--egh-ease) both}
@keyframes eghPnIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* ★★ 第 76 批（用户「鼠标进去自动隐藏」的真凶）：
   主导航有两条带 hover 的二级规则 —— `@media(hover:hover){.egh-drop:hover>.egh-drop-pn, .egh-drop-pn:hover{...}}`，
   它们带 `transform:translateX(calc(-50% + var(--pn-shift,0)))`（PC 悬浮大面板要以菜单项为中心）。
   抽屉里的二级面板是同一个 class，鼠标一移进去就被命中 → 整个面板**左移半个宽度**，
   再被 `.egh-drawer` 的 `overflow:hidden` 一剪 → 看起来就是「鼠标进去二级自动隐藏」。
   下面用更高权重（`.egh-drawer` + `.egh-drop` + `:hover` + `.egh-drop-pn` = 4 个）压回无位移。 */
.egh-drawer .egh-drop:hover>.egh-drop-pn,
.egh-drawer .egh-drop-pn:hover{transform:none;opacity:1;pointer-events:auto}
/* ★ 第 75 批：主导航那条 `.egh-drop-pn:before` 是给 PC 悬浮面板用的「隐形搭桥」（absolute + top:-16px）。
   抽屉里面板已改成 static，这个 :before 会按最近的定位祖先（.egh-drawer 是 fixed）落到屏幕外 —— 虽看不见，
   但会白白撑出一个可点区域，直接在抽屉里关掉。 */
.egh-drawer .egh-drop-pn:before{display:none}
/* 二级项：44px 行高（手机好点），横向铺满 320 主栏 */
.egh-drawer .egh-drop-pn .links{display:block;gap:2px;max-width:var(--dw-lv2-w)}
.egh-drawer .egh-drop-pn .links a{display:flex;align-items:center;justify-content:flex-start;gap:8px;
  min-height:44px;padding:11px 12px;font-size:14.5px;border-radius:9px;color:var(--egh-ink-2);
  touch-action:manipulation}
/* ★ 第 77 批：展开面板顶部那条「XX总览 →」= 一级原本的锚点定位能力（JS 动态插，避免重复插） */
.egh-drawer .egh-drop-pn .links a.dw-ov{color:var(--egh-brand-t);font-weight:500}
/* ★★ 第 77 批（03:08）抽屉卡片布局：**单列上下叠加**（用户原话），宽度就在 320 主栏内。
   ★ .mega-card 基类是 flex:1 + min-width:340px，在网格里必须打掉 min-width。 */
.egh-drawer .egh-drop-pn .cards{display:grid;grid-template-columns:1fr;
  gap:10px;padding:2px 0 4px;max-width:var(--dw-lv2-w)}
.egh-drawer .mega-card{min-width:0;flex:none;padding:16px 18px;gap:9px;border-radius:14px}
/* ★ 出水设计（用户 04:51 明确：**水印别动**，「就是要那种故意被裁的感觉」）——
   卡片右下这枚大图标 right:-12 / bottom:-16 是**故意**出血到卡片外、再被 overflow:hidden 裁掉一半的，
   是刻意的视觉元素，不是"压边"缺陷。任何人（包括我）都不许再把它收进卡片里。 */
.egh-drawer .mega-card .wm{right:-12px;bottom:-16px;opacity:.06}
.egh-drawer .mega-card .wm svg{width:84px;height:84px}
.egh-drawer .mega-card .ci{width:42px;height:42px;border-radius:13px}
.egh-drawer .mega-card .ci svg{width:24px;height:24px}
.egh-drawer .mega-card h4{font-size:15px;margin:0}
.egh-drawer .mega-card p{font-size:13.5px;line-height:1.55;margin:0}
.egh-drawer .mega-card .more{padding-top:4px;font-size:13.5px}
/* ★ 第 77 批（03:08）曾在「消息」下面加过一条分隔线（.dw-msg::after，left:0/right:0）。
   ★ 第 80 批（用户 04:58「那消息你加条线条干嘛，难看到离谱」）—— **整条删除**。
   理由：它横贯整条主栏（296px），视觉重量跟顶栏那条 border-bottom 重复；
   而「消息」只是个不起眼的小条目，顶着一条和顶栏一样长的线，用户判为「难看到离谱」。
   现在「消息」与下面导航菜单的分隔改为纯靠间距（.dw-msg margin-bottom:6px），不靠线。
   ★ 注意：是【整条规则删掉】，不是改透明/改色 —— 别再把它加回来。 */

/* 拉条：菜单右缘的竖把手（长在菜单里，没有裁切，不会被切掉）。
   往左拖 = 把菜单拖走；松手按位置吸附到全开或全关。 */

/* ★ 菜单打开时锁住主页滚动；顶栏改 fixed 钉住（sticky 依赖滚动，锁滚后吸顶会掉出视口），
   层级 320 > 抽屉 300 —— 顶栏与汉堡按钮全程可见可点。 */
body.egh-dw-open{overflow:hidden}
/* ★ 第 69 批：手机档（纯覆盖）点菜单条目时，body 是锁滚的、窗口滚不动，
   所以要临时放开一下才能把主页滚到对应区块。
   ★★ 只能放 overflow，**不能摘 .egh-dw-open** —— 摘了的话
   `body.egh-dw-open:not(.egh-dw-split) .egh-nav{position:fixed}` 会失效、顶栏回到文档流占位，
   内容整体位移 ≈60px，滚完再装回去落点就偏 60（实测 430 档 vpTop 只剩 11/28/44，本该 72）。 */
body.egh-dw-open.egh-dw-unlock{overflow:visible}
/* ★ 浮动头部【永远属于主页】：分栏时它是 .egh-page 里的 sticky（跟着主页一起被推走/滑回，
   按钮就落在主页那条缝里），不能用 position:fixed —— fixed 是相对视口的，会跑到主页外面去。
   只有手机尺寸（没有分栏、body 本身被锁滚）才需要 fixed 钉住。 */
body.egh-dw-open:not(.egh-dw-split) .egh-nav{position:fixed;top:0;left:0;right:0;width:100%;z-index:320}
/* ★ 分栏时整行头部回归主页层（用户口径：「顶部菜单栏不要再外面，直接放里面，不要分开」）：
   整行头部用 left 跟随 --dw-pos 被推进右边那条主页缝里（跟 .egh-content 同步），只有落在缝里的部分可见、
   并被变暗层（z315 > 主页层 310）压暗。
   ★★ 汉堡按钮【跟着主页走、不再反向钉回左上】（用户口径：「菜单按钮不想在汉堡页这里」）——
   它本来就属于主页顶栏，主页被推进缝里它就落在缝里（缝宽 64px，按钮 36px 装得下），
   只是提到 z330（> 变暗层 315）保持亮色、可点、不变灰。
   ★ 关键：父级不能形成 stacking context（sticky/fixed+z-index、transform、filter 都会），
   否则按钮被关在里面提不上去 —— 所以位移用 left（relative+left 不创建上下文），不用 transform。 */
body.egh-dw-split .egh-nav{position:relative;top:auto;z-index:50;left:0;transform:translateX(var(--dw-pos,0px));
  /* ★ 第 69 批：宽度收到【可见宽度】。原来宽度一直保持 100%（视口宽），而 left 又右移了 --dw-pos，
     于是整条顶栏右边凭空多出 pos 那么宽、被视口裁掉 —— 最右侧的「登录 / 立即下载」正好落在被裁的那截里
     （用户「主页的头部下载和登录不见了」）。收到 100% - pos 后右边缘正好贴视口右边，右侧按钮回到可见区。 */
  width:calc(100% - var(--dw-pos,0px));
  /* ★★★ 第 85 批之十二（用户 17:11「内容主页的很顺畅，拉条和头部 logo 行一卡一卡的」
     + 17:13「那框一卡一卡的，但是里面的很顺畅，导致内容先到、框卡慢了」）——
     【框走主线程、内容走合成线程】才是真凶：
       · 内容容器 .egh-content 用 transform ⇒ 合成线程，60fps 丝滑；
       · 顶栏 .egh-nav 原来用 `left`（+ width）⇒ 只能走主线程，每帧都要布局 ⇒ 一卡一卡；
       · 拉条 .egh-dwgrip 同样用 `left` ⇒ 同样卡。
     ⇒ 框与内容不是"谁先谁后"，而是**框掉帧、内容不掉帧** ⇒ 观感就是"内容先到、框慢"。
     修法：框一律改成 transform 位移（可交合成线程），left 恒 0。几何等价（见下），只是换条腿跑。 */
  /* ★ 第 85 批之十三：顶栏宽度恢复过渡（--dw-cw 会随容器一起平滑变窄），
     否则容器慢慢变窄、顶栏却瞬间到位 ⇒ 又变回"块过样式框"。 */
  transition:transform var(--dw-dur) var(--dw-ease),width var(--dw-dur) var(--dw-ease);
}
/* ★★★ 第 85 批之十二（用户 2026-10-13 16:52「其实不是容器框慢，是阴影样式和头部 logo 行整个样式框慢」
   + 16:55「并不是容器慢，而是块过样式框」）—— **760~1100 档：顶栏宽度改用【容器同一个变量 --dw-cw】**。
   [根因 · _diag85w.py 逐帧实测，1440 打开。注意：探针传相对路径会打开空白页，必须绝对路径]
     t=118  容器宽 100%（已定稿 640）  顶栏宽 **-2%**（还在 1425 附近）  容器左 0%
     t=274  容器宽 100%                顶栏宽 18%                        容器左 20%
   ⇒ 容器（内容块）早就收成 640 了，顶栏（样式框）还在按 560ms 慢慢缩 ⇒ 样式框一直比内容块宽，
     看着就是「内容块跑在样式框前面 / 穿出去」。
   [修法] 顶栏宽度不再自己算 calc(100% − pos)，改成吃 --dw-cw（= 容器的宽度来源、同一时刻写入）
     ⇒ 顶栏与容器**恒等宽**，两者只一起平移，样式框永远贴着内容块。
   [为什么不选"让宽度也走过渡"] 试过：同步完美（各列 3%/45%/48%/51%/100% 全同拍），
     但动画期 **108ms/帧 ≈9fps**（每帧重排整个 container-query 容器），不可用 ⇒ 已撤回。
   ★ 手机档（<760）不动：那一档 --dw-cw 恒等于 --dw-basew（视口宽），而顶栏需要的是
     calc(100% − pos) = 60 才能把汉堡【居中】在暗格里，换变量会破坏定稿的暗格几何。 */
@media (min-width:760px){
  body.egh-dw-split .egh-nav{width:var(--dw-cw,100%)}
}
/* ★ 第 69 批：顶栏变窄时的收缩优先级 —— 空间不够先压 logo，【保住右侧的登录 / 立即下载】
   （否则窄视口下它们会被挤出去，用户看到「主页的头部不见了」）。 */
body.egh-dw-split .egh-nav-in{min-width:0;overflow:hidden}
body.egh-dw-split .egh-logo{min-width:0;overflow:hidden}
body.egh-dw-split .egh-nav-r{flex:0 0 auto}
/* ★★★ 第 88 批之二（00:1x，用户「760 的汉堡按钮不用高亮出来？」）——顶栏暗化层【恢复】：
   汉堡被关在 .egh-page 的层叠上下文里（z330 只在上下文内生效），body 级暗层(315) 会连整个
   page(310) 一起压住 ⇒ 88 批「两层合一」实测把汉堡也压暗了。⇒ 顶栏区必须由 nav 内部的层来压：
   z330 汉堡 / peek logo 浮在它上面保持高亮，其余内容被压暗；顶栏以下仍由 .egh-dwdim 负责。
   ★ 与 20:17 的区别：<760 那条「钉成右 60px」的覆写【永久不恢复】（它是"只有最后 60px 暗"的根因）。
   ★ 本层 inset:0 跟随 nav 几何、吃同一条 --dw-dim、无独立过渡 —— 与 .egh-dwdim 同拍，不扫车。 */
body.egh-dw-split .egh-nav:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(16,24,40,.88);opacity:var(--dw-dim,0);
  transition:none}
/* ★★ 第 77 批（用户 03:08「点击菜单后容器里的主页不要去掉浮动的 logo 行，不然无法关闭这个菜单页」）：
   点完一级菜单后容器会拉开（--dw-pos 变 320），顶栏变窄 → 汉堡被 flex 挤成 20px（第 73 批老毛病复发）。
   ⇒ 汉堡在【所有分栏态】都不许收缩（原来只有 peek 态写了 flex:0 0 36px），
     同时它是 nav-in 的第一个子元素（第 69 批 insertBefore）+ 顶栏 overflow:hidden →
     永远贴在可见区左缘、恒 36×36、恒可点 = 随时能关菜单。 */
body.egh-dw-split #eghBurger{position:relative;z-index:330;
  flex:0 0 36px;width:36px;min-width:36px}
/* ★ 只露出那一条（<360）时，把这一条的左右内边距改成「让汉堡按钮正好居中」：
   缝宽 = --dw-slug（第 76 批起 = 20vw，下限 56 / 上限 220），按钮 36 → 左右各 (slug-36)/2。 */
body.egh-dw-split.egh-dw-peek .egh-nav-in{
  gap:12px;
  padding-left:12px;
  padding-right:0}
/* ★★★ 第 85 批之四（用户 2026-10-13 14:27「你把刚才改错的 汉堡 60 宽的暗格改回来，你乱改现在那个暗格太宽」）
   —— 暗格（peek 露缝态）口径回到【固定 60】：12 + 汉堡36 + 12 = 60，暗格里【只有汉堡】。
   ① nav-in：padding-left 12 / gap 12 ⇒ 汉堡 x = 缝左 + 12，右侧余 12 ⇒ 正好在这 60 里居中；
   ② logo(26) 落在汉堡右侧 12 之后（x = 缝左 + 60），紧贴缝右缘、被 overflow:hidden 裁掉
      —— 拉开主页容器后自动回来（与 03:21 拍板口径一致）；
   ③ 缝宽由 JS `sliver()` 给，**固定 60**（护栏 = 菜单页不得小于 MENU_MIN 240）。
   ★ 历史沿革（别再反复，60 是唯一口径）：74c 要过「缝里有 logo」→ 76 批改成「缝正中只有汉堡」→
     84 批放开到 86（把 logo 挤进缝里）→ **85 批之四 用户判定 86 太宽，收回 60**。
     〔08:31「容器里的 logo 行不见」的真根因是分栏时 .egh-page 被滚走 60px（overflow:clip 已修），与缝宽无关。〕 */
/* ★★★ 第 88 批之三（10-14 00:4x，用户「把之前的 logo 高亮去掉，就一个汉堡菜单」）——
   84 批之二「peek 态把 logo 也提到 330、两个都亮」**撤销**：暗格里只留汉堡一个亮体，
   logo 随大流被压暗、端态被 overflow 裁掉。（汉堡自己的 z-index:330 保留不动——那是「可点不灰」的硬规则。） */
body.egh-dw-split.egh-dw-peek .egh-nav-in>.egh-logo{flex:0 0 auto}
/* ★★★ 第 88 批之四（10-14 01:0x，用户截图反馈）：露出 < 360（peek 档）时——
   ① 顶栏「立即下载 EGOHUI」收起：窗内窄了不再挤下载，让位给站名（与 ≤449 同一逻辑）；
   ② 顶栏 logo 行去掉毛玻璃底色：露出窄时它背后是菜单页白底 + 菜单登录行的边框线，
      backdrop-blur 会把那根线吸上来、在行底部糊出一条「白→灰」渐变（用户「底色渐变」）；
      关掉后 = 均匀白净，与关闭菜单页时的观感统一（用户「统一改成透明行的」）。 */
body.egh-dw-split.egh-dw-peek .egh-nav .egh-btn-dl{display:none}
/* ★★★ 第 88 批之四（01:1x）：【「底色渐变」的真修复】渐变不是毛玻璃造成的（关掉过，依旧 255→240）——
   是 .egh-content 的左侧分隔投影（85 批加的 box-shadow:-10px 0 28px）在【分栏态】从内容顶边
   往上洇进顶栏底缘约 14px（实测顶栏底部像素 255→240 灰渐变）；关闭态没有这层投影、所以干净
   （用户「窗内的 logo 行还是底色渐变…统一改成透明行的」）。
   ⇒ 给顶栏一个页内正 z-index：整行（含底色）压在内容投影之上，投影只留在分界线左侧作分隔。 */
body.egh-dw-split .egh-nav{z-index:50}
/* ★★★ 第 88 批之四：原「peek 藏字标」规则【撤销】——用户要「logo 后面补上网站名 EGOHUI」。
   窄到装不下时由 .egh-nav-in 的 overflow:hidden 自动裁切，不再靠 display:none。 */
body.egh-dw-split.egh-dw-peek #eghBurger{flex:0 0 36px;width:36px;min-width:36px}
/* ★ 拖动期间全部去掉过渡，保证跟手（松手/开合才走 --dw-dur 的丝滑动画） */
/* ★ 第 69 批：拖动期间关掉主页左缘那道 28px 模糊投影 ——
   它每帧都要重绘一整块全屏高的模糊，是「拉起来很累/一卡一卡」的主要来源（用户实测反馈）。
   拖动时靠 .egh-dwgrip:after 那条加深的暗带看清分界，松手后投影自动回来。 */
body.egh-dw-dragging .egh-content{box-shadow:none}
/* ★★★ 第 88 批之三（修复「内容跟不上拉条、在框外」）：本组必须带 !important ——
   否则会被后面同权重的 `body.egh-dw-split .egh-content{transition:...}`（85 批之十三）按"后出现者胜"盖掉
   ⇒ 拖动期间内容仍走 450ms 过渡、整整慢半拍（实测 content.x 落后 pos 约 25~33px）。
   另补 .dw-top（新加了宽度过渡，拖动期间必须跟手）。 */
body.egh-dw-dragging .egh-content, body.egh-dw-dragging .egh-nav,
body.egh-dw-dragging .egh-dwdim, body.egh-dw-dragging .egh-dwgrip,
body.egh-dw-dragging .egh-drawer .dw-acts, body.egh-dw-dragging{transition:none !important}
/* ★ 第 69 批：拖动拉条时【整页禁止选中文本】—— 原来一拉就把菜单/正文整片刷蓝（用户「一拉都全选了」）。
   只在 .egh-dw-dragging 期间生效，松手立刻恢复可正常选中复制。
   另加 cursor:ew-resize：拖动时光标离开把手也不变回默认，观感上不会「掉手」。 */
body.egh-dw-dragging{user-select:none;-webkit-user-select:none;cursor:ew-resize}
/* 手机尺寸（≤640）抽屉全高后，顶栏要让位：背景透明 + 只留汉堡按钮浮在抽屉之上，
   否则横条会盖住抽屉顶部的「登录」整行（第 65 批第 2/6 条）。 */
body.egh-dw-open:not(.egh-dw-split) .egh-nav{background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
body.egh-dw-open:not(.egh-dw-split) .egh-nav-in>*{visibility:hidden}
body.egh-dw-open:not(.egh-dw-split) #eghBurger{visibility:visible;pointer-events:auto}
/* ★ 第 73 批：手机档打开抽屉时，把汉堡排到【最右】（order:1，其余元素默认 0）——
   第 69 批 insertBefore 把汉堡搬到顶栏最左后，它(12,12,36×36) 正好压住抽屉自己的登录头像(14,14,34×34)，
   登录整行点不到（390/640 实测重叠 34×34）。排到最后 = 回到第 65 批验收过的位置（紧跟隐藏占位的
   nav-r 之后 ≈x226），既不压登录、也不碰右侧的搜索/提醒/切换。 */
body.egh-dw-open:not(.egh-dw-split) #eghBurger{order:1}
/* ★ 第 69 批：开关抽屉时【整条顶栏】是跟着 --dw-pos 一起横着走的（left 有 --dw-dur≈450ms 过渡），
   所以 logo / 登录 / 下载 那一行会从抽屉面板脸上扫过去 —— 就是用户反馈的
   「登录页行又跨屏了」「登录行贯穿菜单页和主页」。
   办法跟手机档那条一样：滑动期间把顶栏内容藏起来，只留汉堡按钮跟着走。
   （抽屉是博主的「菜单页」，不该被主页那条顶栏横穿。） */
/* ★★★ 第 82 批（用户 06:31「头部 logo 行的会慢一半」）——【整段删除，别再写回来】：
   旧规则是「滑动期间把顶栏内容藏起来，只留汉堡跟着走」：
     body.egh-dw-anim .egh-nav-in>*{visibility:hidden}
     body.egh-dw-anim #eghBurger{visibility:visible;pointer-events:auto}
   当时的病根：抽屉已经完整就位了，顶栏才从 0 慢慢横移到 pos，于是白色顶栏连同 logo/登录/下载
   从菜单页脸上扫过去。现在抽屉和顶栏【同时、同速、同向】走（都用 --dw-dur/--dw-ease），
   而且有个不变式保证永远不会穿越：
     · 菜单页【可见区】右边界 ≡ --dw-pos（页面层从 --dw-pos 起把右边全盖住）；
     · 顶栏内容从 left+12px 起，left ≡ --dw-pos。
   ⇒ 顶栏内容永远在可见区右边界之外，"贯穿菜单页"从几何上就不可能发生。
   保留它只会带来副作用：顶栏那行要等 durMs()+40ms 才重新可见 → 用户看到的「慢一半」。 */
/* 顶栏布局：横排菜单 + 右侧按钮固定靠右不伸缩；logo 用 flex:1 吃掉【剩余空间】并在剩余空间里居中
   —— 不用绝对定位居中（那会压在菜单上），也不给菜单 margin-left:auto（会抢走 logo 的空间）。 */
.egh-nav-in{display:flex;align-items:center}
.egh-nav-in>.egh-logo{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center}
.egh-nav-in>.egh-menu{flex:0 0 auto}
.egh-nav-in>.egh-nav-r{flex:0 0 auto}
/* ★ 原「横排菜单收紧一档」（改 gap / 字号 / 内边距 / 按钮高度）已整段删除（2026-10-12）：
     用户要求「导航字体大小任何宽度都不变」，缩放窗口时字不该忽大忽小。
     类 .egh-nav--tight 不再有任何规则，也不再有脚本添加它。 */
/* 汉堡高亮态：抽屉打开时按钮亮成品牌色 */
body.egh-dw-open #eghBurger, .egh-burger.on{border-color:var(--egh-brand);color:var(--egh-brand-t)}
/* 露出不足 320（只露一条按钮）时：主页那一小条【不可点】，只有菜单按钮可点 */
body.egh-dw-peek .egh-content{pointer-events:none}
/* ★ 第 68 批：分栏时 .egh-page 是整屏宽的容器（z310 > 抽屉 z300），会把抽屉的点击全吃掉
   —— 实测手机端登录行 elementFromPoint 命中的是 .egh-page 而不是 .dw-me，抽屉里什么都点不了。
   让外层 page 不吃点击，只把真正的主页内容区 / 顶栏（含汉堡）恢复可点。
   ★ peek 那条要写成 .egh-dw-split.egh-dw-peek（权重更高），否则会被下面这条盖掉。 */
body.egh-dw-split .egh-page{pointer-events:none}
body.egh-dw-split .egh-content{pointer-events:auto}
body.egh-dw-split .egh-nav{pointer-events:auto}
body.egh-dw-split.egh-dw-peek .egh-content{pointer-events:none}

/* ===== 两种模式：手机尺寸 = 纯覆盖；非手机尺寸 = 顶开 + 遮罩 + 拉条 =====
   ★ 手机尺寸（≤640）：不加 .egh-dw-push / .egh-dw-mask，
     主页不写任何 transform，菜单纯覆盖，关掉后主页完整可点、无遮罩。
   ★ 非手机尺寸：主页被顶开一条手机尺寸的边（--dw-push），遮罩压住被顶开的主页，
     拉条可拖；拖到手机尺寸阈值就收菜单、去遮罩、主页整页显示。 */
/* ★ 主页层就是那层「盖住菜单页」的东西：它从右边滑过来，一寸寸盖住菜单。
   菜单页宽度固定（--dw-w），永远不变形；盖的动作完全由主页层的位移+宽度完成。
   .egh-page 同时是布局容器（container-type:inline-size）→ 被压到手机宽时自动走手机排版。 */
/* 主页：常态是普通文档流里完整的一页。
   分栏时它就是那层「遮罩」：宽 640（容器查询 → 真·手机排版）、自己内部滚动，
   位置由 --dw-pos 决定 —— 从右边（菜单全露）一路滑到 0（把菜单页整个盖住）。 */
.egh-page{transition:transform .32s cubic-bezier(.2,.8,.3,1),left .32s cubic-bezier(.2,.8,.3,1)}
/* 菜单页：只占「视口 − 手机宽」剩下的那部分，固定不参与拖动（不会被拉变形） */
.egh-drawer{transition:transform var(--dw-dur) var(--dw-ease),visibility var(--dw-dur)}
body.egh-dw-split .egh-drawer{width:var(--dw-menu,300px)}
/* 打开时右边那条主页要变暗：本层只管【内容区】（top 从顶栏下沿起）；
   ★ 顶栏那条（logo 行）由 .egh-nav:before 单独负责 —— 汉堡要在它上面亮着（见 88 批之二）。 */
.egh-dwdim{position:fixed;top:var(--nav-h);bottom:0;left:0;transform:translateX(var(--dw-pos,0px));right:0;z-index:315;
  background:rgba(16,24,40,.88);opacity:0;visibility:hidden;pointer-events:none;
  /* ★★★ 第 88 批（23:5x）：补回 transform 过渡 —— 开=随页面平滑从亮到暗、关=镜像；拖动期间 .egh-dw-dragging 关掉跟手。
     ★★★ 第 88 批之二（00:1x，用户「760 的汉堡按钮不用高亮出来？」）——top 回到「顶栏下沿」：
        回归根因（实测+层叠推导）：汉堡在 .egh-page 的层叠上下文里（z330 只在上下文内生效），
        body 级暗层(315) 会连整个 page(310) 一起压住 ⇒ 汉堡被压暗。
        ⇒ 顶栏区必须由【nav 内部】的层来压（汉堡 z330 在同上下文里压得住它），本层退回只管顶栏以下。
     ★★ 不要把 opacity 放进过渡：--dw-dim 已在 body 上插值，再套一层 = 双重缓动滞后。 */
  transition:transform var(--dw-dur) var(--dw-ease),visibility .28s}
/* ★ 暗度 = 拖动进度：打开时全暗（--dw-dim:1），
   露出 320 起、到 360 才逐渐变亮（→0）；360 之后全亮、可点。
   回退值写 0（不写 1）—— 关闭时 --dw-dim 被清掉，若回退 1 会先闪一下更暗再消失。 */
body.egh-dw-split .egh-dwdim{opacity:var(--dw-dim,0);visibility:visible}
/* ★ 第 68 批：--dw-dim 注册过 @property <number>，给 body 加它的过渡后，
   顶栏暗化层与主页变暗层吃的是同一条曲线 → 展开/收起两边完全同步（原来顶栏没有、主页有，观感不一致）。 */
body{transition:--dw-dim var(--dw-dur,.32s) var(--dw-ease,cubic-bezier(.2,.8,.3,1))}
/* 关闭动画期间：暗层的透明度【仍然跟着 --dw-dim 渐变到 0】（从暗到亮），
   只把 visibility 的切换延到动画结束（否则一关就「啪」地全亮）。 */
/* ★ 第 85 批之十四：同理去掉 opacity 过渡，只把 visibility 的切换延到动画结束。 */
body.egh-dw-closing .egh-dwdim{transition:transform var(--dw-dur) var(--dw-ease),visibility 0s linear var(--dw-dur)} /* ★ 第 88 批：补回 transform —— 关闭时暗层跟页面平滑收回，不许瞬跳铺满 */
body.egh-dw-closing .egh-drawer .dw-acts{transition:none}   /* ★ 第 88 批之三 + 89 批：关闭时 --dw-pos 归零，三枚按钮瞬时归位（随抽屉一起淡出，不单独滑动） */
/* ★★★ 第 85 批之十四（用户 2026-10-13 17:28，【<760 手机档】）——
   遮罩（主页变暗层 + 顶栏 logo 行变暗层）**锚死在右侧 60px 暗格里，只淡入淡出、不再跟着 --dw-pos 扫**。
   为什么必须这样（三个问题同一个根因）：
     ①「菜单页的时候左边的菜单页不要遮罩」—— 遮罩是 `left:0;right:0`（整屏宽）靠 transform 跟着
        --dw-pos 走；开/关动画期间 pos 从 0 扫到 vw−60（或反向），遮罩就横扫过整个菜单页。
        （第 85 批之十二 给它补了 transform 过渡之后，这个"横扫"才变成肉眼可见的动画——之前是瞬跳。）
     ②「关闭时 logo 行遮罩有拖影」—— 顶栏那层是 `inset:0` 铺满顶栏，顶栏关闭时宽度从 60 涨回整屏
        ⇒ 暗层跟着放大、扫过整条 logo 行。
     ③「遮罩颜色跳动 / 突然暗突然亮」—— 关闭时 --dw-pos 归 0，整屏宽的遮罩瞬间铺满再淡出
        ⇒ 先"啪"地全暗、再慢慢亮。
   ⇒ 手机档两条都改成【贴右边 60px、不动】，暗度只由 --dw-dim 控制淡入淡出：
      · 永远压在暗格上，不可能盖到菜单页；
      · 关闭时它就在暗格里静静淡出，没有横扫、没有铺满、没有拖影。
   ★ 60 = sliver() 的常量值（与暗格几何同一套口径，别改）。
   ★ 只作用于 <760：760~1100 档 --dw-dim 恒为 0（第 80 批 定案），遮罩本来就是不可见的。 */
/* 第 64 批 边界提示胶囊：拉到 360 / 640 阈值时淡入淡出一行小字 */
.egh-dwtip{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(6px);
  z-index:340;max-width:min(78vw,360px);padding:9px 16px;border-radius:999px;
  background:rgba(16,24,40,.88);color:#fff;font-size:13.5px;line-height:1.45;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s var(--dw-ease)}
.egh-dwtip.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* 拉条：骑在遮罩（主页）左沿上 —— 拖它就是拖遮罩往左盖菜单 */
.egh-dwgrip{position:fixed;top:0;bottom:0;width:36px;z-index:330;display:none;
  /* ★★★ 第 85 批之十二：拉条也改用 transform（原 `left:calc(--dw-pos - 18px)` 走主线程 ⇒ 一卡一卡）。
     left 恒 0、-18px 挪进 translateX ⇒ 位置与改前完全相同，只是从"主线程布局"换成"合成线程位移"。 */
  left:0;transform:translateX(calc(var(--dw-pos,0px) - 18px));cursor:ew-resize;touch-action:none;
  /* ★ 第 69 批：把手自己也不能选中文本（按在把手上就刷蓝 → 用户「一拉都全选了」） */
  user-select:none;-webkit-user-select:none;
  transition:transform var(--dw-dur) var(--dw-ease)}
  /* ★ 第 69 批：拉条阴影【只要一边】（用户「一边阴影就行了 不用两边」）。
   只做把手的【左半边】（right:50% → 只占 18px），从左往右渐深到分界线 ——
   即阴影只落在菜单那一侧，主页那一侧干净。跟 .egh-content 那道向左的投影同向，不重复。
   最暗处正好压在 --dw-pos 这条分界线上（把手中心 = --dw-pos）。 */
.egh-dwgrip:after{content:"";position:absolute;top:0;bottom:0;left:0;right:50%;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,24,40,0) 0%,rgba(16,24,40,.05) 35%,
    rgba(16,24,40,.22) 100%);
  transition:opacity .2s ease;opacity:.75}
body.egh-dw-dragging .egh-dwgrip:after{opacity:1}
body.egh-dw-bar .egh-dwgrip{display:block}
.egh-dwgrip:before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:6px;height:88px;border-radius:3px;background:#7C8CA6;
  box-shadow:0 0 0 2px rgba(255,255,255,.95),0 3px 10px rgba(16,24,40,.28);transition:background .2s}
.egh-dwgrip:active:before{background:var(--egh-brand)}
/* 拉到手机段（露出 ≥360）时把手变品牌色，提示「这一段可正常用了」 */
.egh-dwgrip.on:before{background:var(--egh-brand)}
@media (hover:hover){.egh-dwgrip:hover:before{background:var(--egh-brand)}}
/* 右下角常驻边栏 z-index 极高，会压在抽屉上面 → 打开时让位 */
/* ★ 第 100 批：抽屉打开时【边栏本体 + 卡片都保留】——边栏由 JS railSync 收成把手
   （缩成当前线那枚图标 + 呼吸），卡片照常可点开。用户 2026-10-15 拍板原话：
   「这个隐藏不是消失，是缩小成一个小的当前的图标，可以打开还原的。」
   ★★ 修第 97 批的漏：那次只把选择器从 `.egh-rail,.egh-rail-pn` 收窄成 `.egh-rail-pn`，
     却仍留着 opacity:0;pointer-events:none ⇒ 把手看得见、点得动，卡片却永远不显示
     = 用户 2026-10-15 报的「点击没卡片」根因（运行时实测 pnCls 有 on 但 opacity=0）。
     现整条撤掉，让面板回到默认的 `.on` 才显示。 */

@media (prefers-reduced-motion:reduce){
  .egh-drawer, .egh-drawer.on .dw-body>*{transition-duration:.01s}
}
/* logo 永远只有图标，字标不出现；EGOHUI 作为站点名放在标题、页脚等处 */
.egh-logo i img{display:block;width:36px;height:36px;border-radius:10px;object-fit:cover}
/* ★ 第 83 批：站头 logo 改用 <svg><use href="#i-logo"/></svg>（与其余 7 个页面【同构】，
   全站只留一份 logo 数据，以后换标只改 #i-logo 一处）。
   尺寸口径与上面 img 那条完全一致（26×26、display:block）；不再需要 border-radius / object-fit：
   新标是 115×115 方图、内容上下留白对称（上 21 / 下 21），方图进方框零裁切。
   旧 img 那条【保留不删】—— 回滚时把 <svg> 改回 <img> 即自动生效。 */
.egh-logo i svg{display:block;width:36px;height:36px}
/* ★ 已删掉 .egh-logo i img{22px}：logo 图标任何宽度都是 36px，小屏不再缩水 */


/* ========== 11. 左侧菜单抽屉（仅窄屏 / 导航被挤时出现） ========== */
/* 分级降级第 1 级：空间不够时【只收掉「立即下载 EGOHUI」，保留「登录」】—— 保住导航横条也不牺牲登录入口 */
/* ★≤1100（手机 / 平板 / 拖窄的窗口）一律保留汉堡入口：
   非手机尺寸这一档导航往往还够宽、分级降级只收了按钮，汉堡会被隐藏 →
   菜单打不开、拉条也就无从谈起。这里强制显示，保证「任何非大屏宽度都能打开菜单」。 */

/* 抽屉：贴左边、从顶栏下方滑入，盖在主页上面；主页一点都没动 */
/* ★ 第 65 批：抽屉改【全高】（top:0）—— 登录整行顶到屏幕最上面，不再从顶栏下方出。 */
.egh-drawer{--dw-w:min(86vw,360px);position:fixed;top:0;left:0;bottom:0;width:var(--dw-w);
  background:#fff;z-index:300;display:flex;flex-direction:column;overflow:hidden;visibility:hidden;
  transform:translateX(-100%);box-shadow:0 0 0 rgba(16,24,40,0);
  /* 「吸」的手感：起步快、末端收住；不带过冲（过冲 = 抖），震动交给手机触觉 */
  transition:transform .32s cubic-bezier(.2,.8,.3,1),visibility .32s}
/* ★ 第 64 批：投影向右收窄（spread -32、blur 36）—— 老参数 24px 0 70px -24px 的模糊会向上扩散 ~47px，
   在顶栏高度上糊出一条灰带（头部收进缝里后就露出来了）。现在模糊只余 (36-32)/2≈2px，灰带消失。 */
.egh-drawer.on{transform:translateX(0);visibility:visible;box-shadow:16px 0 36px -32px rgba(16,24,40,.28)}
.egh-drawer.dragging{transition:visibility .32s}   /* 拖拽期间跟手，不带过渡 */

/* ★ 第 61 批 抽屉顶栏（按用户参考图）：登录（头像+文字）+ 提醒/设置/扫一扫，下面「消息」条目，再往下才是导航菜单 */
/* ★★ 第 77 批（用户 03:21）：「菜单页排版 只能在 320 宽度做。多出来可以放其他广告之类的。
   但是主要内容必须在 320.」
   ★★ 同日 03:28 用户纠正：「菜单页的 登录行 右边按钮要还原到之前拉动跟随」
      + 03:30：「菜单页不是固定 320 ，只是排版在 320 内做而已。」
   ⇒ **菜单页本身宽度不变**（= --dw-menu），只是把**内容**排进 320 主栏（.dw-body 的 max-width）；
     顶栏这一行【不加 max-width】—— 它的右边缘必须继续跟着拉条走（第 89 批起 = body.egh-dw-split .dw-acts 那条
     transform:translateX(--dw-pos − --dw-menu)；原来是 width:var(--dw-pos)，会让按钮和主页边各走各的轨道），
     我曾在 03:23 给它加过 max-width:320px，右侧三个按钮就卡在 320 不再跟随了，已回退。 */
.egh-drawer .dw-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 14px 12px;border-bottom:1px solid var(--egh-line)}
/* ★ 第 69 批：菜单页顶栏（登录 + 搜索/提醒/深浅切换）【跟着拉条走】。
   菜单页宽度是打开时定死的（--dw-menu，约占视口 91%），拉条往左拉时右半截被主页盖住，
   那三个按钮原本钉在菜单页右上角 → 一拉就被盖掉看不见（用户原话）。
   分栏时把这一行的宽度收到【可见宽度 --dw-pos】，右侧按钮自然贴到分界线旁、随拉条左右移动。
   overflow:hidden 防止拉到很窄时按钮溢出到主页上；.dw-me 允许收缩，避免挤爆布局。 */
body.egh-dw-split .egh-drawer .dw-top{width:100%;min-width:0;overflow:hidden;padding-right:12px}
/* ★★★ 第 89 批（10-14 15:5x，用户「菜单页的搜索行 搜索三个按钮又不跟随拉动条了」+「拉动后没有跟着主页边一起走」）
   三枚按钮的跟随【从 width 换成 transform】—— 就是把 88 批之三留下的那条 width 过渡换掉。
   [根因] 主页层左缘（= 可见边界）走的是 `transform:translateX(var(--dw-pos))`（合成线程）；
     而 .dw-top 当时跟的是 `width:var(--dw-pos)`（主线程布局）—— 两条轨道、两套状态机。
     只要某个状态里一条在动、另一条不动，两者立刻错开：实测「关闭」那一瞬差到 360px、
     开场第一帧差 26px（88 批之三注释里记的「content.x 落后 pos 约 25~33px」是同一个病，当时只压了过渡没换轨道）。
   [修法] 让【按钮自己】translateX（同一条 --dw-dur / --dw-ease，和 .egh-content 的 translateX 逐帧同值）
     ⇒ 与主页边同一条轨道，永远贴着走；行宽不再随 pos 变，顺带【拖动时不再每帧重排抽屉】。
   [几何] 行宽 = 菜单页整宽（--dw-menu）；按钮组原位右缘 = 行右缘 − 12（padding-right）；
     平移 −(menu − pos) ⇒ 按钮组右缘 恒 = pos − 12 = 主页层左缘 − 12 ✓（与 .egh-content 同一边界）。 */
body.egh-dw-split .egh-drawer .dw-acts{transform:translateX(calc(var(--dw-pos,0px) - var(--dw-menu,0px)));
  transition:transform var(--dw-dur) var(--dw-ease)}
body.egh-dw-split .egh-drawer .dw-me{min-width:0;overflow:hidden}
body.egh-dw-split .egh-drawer .dw-me>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.egh-drawer .dw-me{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;
  color:var(--egh-ink);text-decoration:none}
/* ★ 第 80 批（用户 04:58「登录图标改成符合网站方格，丑不拉几」）——
   原来登录头像是【34px 正圆 + 淡蓝底 + 无描边】，整站只有它一个圆形；
   而站里所有图标容器都是【方格 + 1px 描边】（.dw-act 34×34 r9、.mega-card .ci r18）。
   现在并进同一套方格语言：34×34（box-sizing:border-box，含描边）、圆角 9、1px 描边、白底、品牌色图标。 */
.egh-drawer .dw-me .dw-ava{width:34px;height:34px;border-radius:9px;background:#fff;
  border:1px solid var(--egh-line);color:var(--egh-brand-t);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.egh-drawer .dw-acts{display:flex;gap:8px}
.egh-drawer .dw-act{width:34px;height:34px;flex:0 0 auto;border:1px solid var(--egh-line);border-radius:9px;
  background:#fff;color:var(--egh-ink-2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0}
.egh-drawer .dw-body .dw-msg{gap:9px;margin-bottom:6px;justify-content:flex-start}
/* ★★ 第 83 批（用户 2026-10-13「菜单页加一些元素进去 比如水印之类的，标题的图标之类的」
   + 勾选：一级标题加图标 / 底部品牌水印 / 登录行+消息也加图标 / 水印右下角出血被裁）——
   ① **一级条目行首图标**（`insertIco` 注入的 `<i class="dw-ico">`）：28×28、圆角 8、1px 描边、白底、16px 线稿图标。
      规格**故意与右侧 .dw-cv 完全一致**（28×28 r8）→ 一条一级行两端各一枚方格，左右对称、整齐。
      展开（.egh-drop.on）时整枚亮成品牌淡底 + 品牌色，与同行文字同步变色。
      图标口径与首页右侧 rail / .egh-lines 卡片【同一枚】（`#ic-brand` `#ic-om` `#ic-shop` `#ic-ops` `#ic-dev`），
      「EGOHUI 首页」补 `#i-grid`（同笔触 stroke 1.25）——
      ⇒ 一个业务全站一个符号，用户在哪都认得。
   ② **「消息」条目**原来是裸 `<svg>`（没有容器），在一排方格图标里看着"不像图标"；
      现在并进同一套 `.dw-ico` 方格（JS 把原 svg 包进 `<i>`），与一级行逐行对齐。
   ③ **抽屉右下角品牌水印** `.dw-wm`：用 `#i-logo`（115×115 新标，自有品牌色），故意出血到可见区之外被裁——
      与 `.mega-card .wm` 同一种「出水」语言（用户 04:51：「就是要那种故意被裁的感觉」）。
      ★ 第 83 批换标后重核过：新标内容只占 115 图高的 73（y 21~94）、左右满宽，
        所以 bottom 从 -34 下调到 **-78** —— 让 logo **内容本身**（不是透明留白）从右下角出血：
        220 尺寸下内容 190×140 落在 x 130~350 / y 900~1040，可见区 0~320、视口高 1000
        ⇒ 右出血 30px、下出血 40px。
        旧的 -34 是按立方体（占满整块方形）算的；换成扁标后内容底边停在 y≈994，
        下边一滴血都不出，看着像"浮"在右下角而不是"从右下角冒出来"。
      ★★★ 定位必须用 **left 基准**、绝不能用 right：
        分栏时抽屉宽 = `--dw-menu`（900 档 ≈ 840），而可见区只有 `0 ~ --dw-pos`（320）；
        若写 `right:-34px`，水印会落在 x≈800 —— **被主页整块盖住、任何档位都永远看不见**。
        用 `left: calc(--dw-col − 190)` = 130 → 水印落在 130~350，
        可见 130~320（190px 宽）＋右侧 30px 出血被裁 ⇒ 永远贴着 320 主栏右下角。
   ★ 水印是 `.egh-drawer` 的**第一个子节点**（DOM 在 .dw-top/.dw-body 之前）⇒ 落在内容层**之下**，
     不遮文字（与 `.mega-card .wm` 放首位同理）；`.egh-drawer{overflow:hidden}` 负责裁掉出血部分。 */
.egh-drawer .dw-ico{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:#fff;
  border:1px solid var(--egh-line);color:var(--egh-ink-2);display:flex;align-items:center;
  justify-content:center;margin-right:10px;
  transition:background .18s,color .18s,border-color .18s}
.egh-drawer .dw-ico svg{width:16px;height:16px;display:block}
.egh-drawer .egh-drop.on>.t .dw-ico{background:var(--egh-brand-l);border-color:transparent;color:var(--egh-brand-t)}
/* ★ 裸链接条目（「EGOHUI 首页」「定制开发服务」）放进行首图标后，行内变成【两个 flex 项】，
   上面 828 行那条 `justify-content:space-between` 就会把文字整段推到最右边。
   这里用更高权重（3 类 + 1 元素 > 2 类 + 1 元素）压回靠左；`消息`行不需处理（它本来就走 flex-start）。 */
.egh-drawer .dw-body>a:not(.dw-msg){justify-content:flex-start}
.egh-drawer .dw-wm{position:absolute;left:calc(var(--dw-col) - 190px);bottom:-78px;
  width:220px;height:220px;opacity:.05;pointer-events:none}
.egh-drawer .dw-body{flex:1 1 auto;overflow-y:auto;padding:12px 0 32px;-webkit-overflow-scrolling:touch}
.egh-drawer .dw-body>a, .egh-drawer .dw-body .egh-drop>.t{display:flex;align-items:center;
  justify-content:space-between;padding:12px 14px;border-radius:10px;font-size:15px;font-weight:500;
  color:var(--egh-ink);text-decoration:none;transition:background .18s,color .18s}
@media (hover:hover){.egh-drawer .dw-body>a:hover, .egh-drawer .dw-body .egh-drop>.t:hover{background:#F6F8FC;color:var(--egh-brand-t)}}
/* ★ 第 65 批：箭头改成【上下】（跟 PC 一致），并紧跟文字（不再被 space-between 推到最右）
   注意选择器要跟原规则同权重（.egh-drawer .dw-body .egh-drop>.t），否则压不过 space-between。 */
.egh-drawer .dw-body .egh-drop>.t{justify-content:flex-start}
/* ★★★ 第 77 批（用户 2026-10-13 03:08 三条 + 03:21 两条）—— 二级改回【手风琴】+ 竖排菜单按「320 主栏」排一版。
   【03:08 原话】「菜单页的二级的卡片上下叠加，然后默认不打开，打开一个一级，其他二级要自动收起来。
                  然后再帮我看看怎么更好能展开这个二级，怕客户老误触，比如手机更难点击。这个竖排菜单是不是要排一下版」
   【03:21 原话】「菜单页排版 只能在 320 宽度做。多出来可以放其他广告之类的。但是主要内容必须在 320.」
   ⇒ ① 菜单页所有内容收进一条 **320px 主栏**（--dw-col；.dw-top 与 .dw-body 都加了 max-width）；
        抽屉比 320 宽时多出来的部分留白、以后放广告位 —— 所以二级宽度口径也从
        「min(560px,100%)」直接收回 100%（就在这条主栏里铺满，不再按抽屉宽排）。
      ② 卡片【上下叠加】= 单列（原来 auto-fit 在宽抽屉里会排成 2 列）。
      ③ 二级【默认收起】；一级负责开合，且**同时只开一个**（互斥、收其余 .on 的逻辑在 JS 里）。
      ④ 防误触（尤其手机）三条：
         · 一级行 = 整行大热区（min-height:52px）+ touch-action:manipulation（去掉 300ms 双击缩放判定）；
         · 一级行【不再跳转、不再滚主页】，只做开合 —— 点错没有代价、不用回退；
           一级原有的锚点定位能力挪到展开面板顶部那条「XX总览 →」（JS 动态补，class .dw-ov）；
         · 二级行高抬到 44px（Apple HIG 最小可点尺寸 44pt）。
      ⑤ 竖排排版：一级 15.5px/600 + 右侧 chevron（展开时翻上去）、二级块左缩进 14px + 2px 竖线、
         「消息」下面加一条分隔线，跟下面的导航菜单分开。 */
.egh-drawer{--dw-col:320px;--dw-lv2-w:100%}
/* ★★ 第 77 批（03:44 修正）—— 主栏限制【下发给每一行】，而不是夹住滚动容器：
   上一版写 `.dw-body{max-width:320px}`，滚动条就竖在 x=320 那条线上（900 档实测 x≈310），
   屏幕中间凭空一条竖线，用户「还是很乱」。
   现在容器仍占满抽屉、滚动条留在抽屉最右；每一条条目自己 max-width → 内容照样收在 320 内。
   ★★★ 第 80 批（用户 04:37「菜单页的排版已经溢出 320 了 而且太丑了…各种压边」）——
   【实测根因（_probe80）】旧写法 = `.dw-body{padding:12px}` + 子项 `max-width:320px`：
     块级子项先占满内容盒，再被 max-width 收到 320 —— **但它落在 x=12，右边缘 = 12+320 = 332**。
     实测行 / 卡片 / 分隔线的右边缘全部是 332（超出 320 有 12px）。
     而停靠后菜单页可见区只有 0~320 → 每一条行、卡片、分隔线、高亮块的【右侧 12px 被内容层切平】
     = 用户说的「溢出 320」＋「各种压边」（圆角、右边框、分隔线全被裁掉）。
   【新写法】在 --dw-col(320) 这条主栏口径里留出左右各 12 的呼吸边：
     子项 max-width = 320−24 = 296，margin 左右各 12 → 实际落在 **x = 12 ~ 308**，
     整条都在 0~320 以内，右侧再也不被裁；同时左边 12 也保证高亮块/卡片不贴屏幕边。 */
.egh-drawer .dw-body>*{max-width:calc(var(--dw-col) - 24px);margin-left:12px;margin-right:12px}
.egh-drawer .dw-body .egh-drop>.t{min-height:52px;padding:14px;font-size:15.5px;font-weight:600;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* ★★ 第 77 批（用户 03:34「那个二级的上下 按钮要不要做个 按钮更好点击？」）：
   把原来那枚 7px 的裸箭头做成一枚【真正的按钮】—— 28×28、1px 描边、8px 圆角（整站按钮风格），
   展开时整枚翻 180°（箭头朝上）并亮成品牌色。
   ★ 关键：点击热区**不是**这 28px，而是【整条一级行】（52px 高 × 320 宽）—— 那才是「更好点击」的正解；
     这枚按钮的职责是给出**看得见的「可展开」提示**（点它 = 点整行，同一件事、同一行为，不会有两套逻辑）。
   ★ 元素由 JS 在建抽屉时插进每个一级行（class .dw-cv），这样才有两层伪元素可画（外框 + 里面的箭头）。 */
/* ★ 第 80 批（用户 04:58 澄清）：「箭头没有说要紧跟。只是那时屏幕大被拉得很远。」
   ⇒ 第 65 批那句「紧跟文字」**不是审美要求**，而是当时菜单页是整屏宽、
     space-between 会把箭头推到几百像素之外才做的权宜处理。
     现在菜单内容收在 320 主栏里（行宽 296），推到最后 = 「文字 ←→ 按钮」两端对齐，
     正是用户要的，也跟站里 .dw-body>a 那一排（justify-content:space-between）同一种语言。
   ⇒ 标回 margin-left:auto（按钮落在行尾内边距上）。 */
.egh-drawer .dw-cv{flex:0 0 auto;width:28px;height:28px;margin-left:auto;border:1px solid var(--egh-line);
  border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;
  color:var(--egh-ink-2);
  transition:transform .22s var(--egh-ease),background .18s,color .18s,border-color .18s}
.egh-drawer .dw-cv:after{content:"";width:6px;height:6px;margin-top:-3px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg)}
.egh-drawer .egh-drop.on>.t .dw-cv{background:var(--egh-brand-l);border-color:transparent;
  color:var(--egh-brand-t);transform:rotate(180deg)}
/* ★★ 第 77 批（03:39 修 bug）—— 抽屉里【必须掐掉主导航那条 :after 箭头】。
   第 399 行有一条全局 `.egh-drop>.t:after{...rotate(45deg)}`（主导航 PC 悬浮面板用），
   抽屉与主导航共用 `.egh-drop` 这个 class → 我上一版把抽屉自己的 :after 覆盖删掉后，
   全局那条立刻漏进来，一级行变成「小方钮 + 裸箭头」两枚箭头并排（900 档截图实拍）。 */
.egh-drawer .egh-drop>.t:after{display:none}
.egh-drawer .egh-drop.on>.t{background:#F6F8FC;color:var(--egh-brand-t)}
/* 手风琴：面板默认 display:none，只有挂上 .on 才展开（第 76 批那套「常显平铺」作废） */
/* ★ 第 80 批（用户 05:53「二级这个 你加个左边框干嘛？又压到上面一级边沿」）——
   **删掉二级面板那条 2px 左竖线**（第 76 批我加的，用户不要）；
   上边距 0 → 6：原来 margin-top:0，面板顶边正贴在上一级行的圆角底边上、那条线又从接缝处往下画
   → 就是「压到上面一级边沿」。
   ★★ 第 80 批之二（用户 05:09「卡片对齐左右两边吧…不然卡片看起来压到右边了 左边宽右边窄很难看」）——
   旧法只有【左侧】缩进（margin-left:14 + padding-left:14 = 28），右侧一路贴到主栏右沿：
     · 一级行   12 ~ 308
     · 二级内容 42 ~ 308     ← 左留 30、右留 0 → 卡片像被"挤"到右边（左宽右窄）。
   现在两侧【对称】缩进 12、取消 padding-left：
     · 一级行   12 ~ 308
     · 二级内容 24 ~ 296     ← 左留 12、右留 12；卡片与上面 links 同宽、左右都对齐。
   顺带卡片自动变窄到 272（正是用户说的「把卡片做小」），不再需要额外缩小。 */
.egh-drawer .egh-drop-pn{position:static;transform:none;left:auto;opacity:1;max-height:none;overflow:hidden;
  display:none;border:0;box-shadow:none;background:transparent;min-width:auto;
  margin:6px 12px 4px 12px;padding:0 0 12px 0}
.egh-drawer .egh-drop.on>.egh-drop-pn{display:block;animation:eghPnIn .24s var(--egh-ease) both}
@keyframes eghPnIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* ★★ 第 76 批（用户「鼠标进去自动隐藏」的真凶）：
   主导航有两条带 hover 的二级规则 —— `@media(hover:hover){.egh-drop:hover>.egh-drop-pn, .egh-drop-pn:hover{...}}`，
   它们带 `transform:translateX(calc(-50% + var(--pn-shift,0)))`（PC 悬浮大面板要以菜单项为中心）。
   抽屉里的二级面板是同一个 class，鼠标一移进去就被命中 → 整个面板**左移半个宽度**，
   再被 `.egh-drawer` 的 `overflow:hidden` 一剪 → 看起来就是「鼠标进去二级自动隐藏」。
   下面用更高权重（`.egh-drawer` + `.egh-drop` + `:hover` + `.egh-drop-pn` = 4 个）压回无位移。 */
.egh-drawer .egh-drop:hover>.egh-drop-pn,
.egh-drawer .egh-drop-pn:hover{transform:none;opacity:1;pointer-events:auto}
/* ★ 第 75 批：主导航那条 `.egh-drop-pn:before` 是给 PC 悬浮面板用的「隐形搭桥」（absolute + top:-16px）。
   抽屉里面板已改成 static，这个 :before 会按最近的定位祖先（.egh-drawer 是 fixed）落到屏幕外 —— 虽看不见，
   但会白白撑出一个可点区域，直接在抽屉里关掉。 */
.egh-drawer .egh-drop-pn:before{display:none}
/* 二级项：44px 行高（手机好点），横向铺满 320 主栏 */
.egh-drawer .egh-drop-pn .links{display:block;gap:2px;max-width:var(--dw-lv2-w)}
.egh-drawer .egh-drop-pn .links a{display:flex;align-items:center;justify-content:flex-start;gap:8px;
  min-height:44px;padding:11px 12px;font-size:14.5px;border-radius:9px;color:var(--egh-ink-2);
  touch-action:manipulation}
/* ★ 第 77 批：展开面板顶部那条「XX总览 →」= 一级原本的锚点定位能力（JS 动态插，避免重复插） */
.egh-drawer .egh-drop-pn .links a.dw-ov{color:var(--egh-brand-t);font-weight:500}
/* ★★ 第 77 批（03:08）抽屉卡片布局：**单列上下叠加**（用户原话），宽度就在 320 主栏内。
   ★ .mega-card 基类是 flex:1 + min-width:340px，在网格里必须打掉 min-width。 */
.egh-drawer .egh-drop-pn .cards{display:grid;grid-template-columns:1fr;
  gap:10px;padding:2px 0 4px;max-width:var(--dw-lv2-w)}
.egh-drawer .mega-card{min-width:0;flex:none;padding:16px 18px;gap:9px;border-radius:14px}
/* ★ 出水设计（用户 04:51 明确：**水印别动**，「就是要那种故意被裁的感觉」）——
   卡片右下这枚大图标 right:-12 / bottom:-16 是**故意**出血到卡片外、再被 overflow:hidden 裁掉一半的，
   是刻意的视觉元素，不是"压边"缺陷。任何人（包括我）都不许再把它收进卡片里。 */
.egh-drawer .mega-card .wm{right:-12px;bottom:-16px;opacity:.06}
.egh-drawer .mega-card .wm svg{width:84px;height:84px}
.egh-drawer .mega-card .ci{width:42px;height:42px;border-radius:13px}
.egh-drawer .mega-card .ci svg{width:24px;height:24px}
.egh-drawer .mega-card h4{font-size:15px;margin:0}
.egh-drawer .mega-card p{font-size:13.5px;line-height:1.55;margin:0}
.egh-drawer .mega-card .more{padding-top:4px;font-size:13.5px}
/* ★ 第 77 批（03:08）曾在「消息」下面加过一条分隔线（.dw-msg::after，left:0/right:0）。
   ★ 第 80 批（用户 04:58「那消息你加条线条干嘛，难看到离谱」）—— **整条删除**。
   理由：它横贯整条主栏（296px），视觉重量跟顶栏那条 border-bottom 重复；
   而「消息」只是个不起眼的小条目，顶着一条和顶栏一样长的线，用户判为「难看到离谱」。
   现在「消息」与下面导航菜单的分隔改为纯靠间距（.dw-msg margin-bottom:6px），不靠线。
   ★ 注意：是【整条规则删掉】，不是改透明/改色 —— 别再把它加回来。 */

/* 拉条：菜单右缘的竖把手（长在菜单里，没有裁切，不会被切掉）。
   往左拖 = 把菜单拖走；松手按位置吸附到全开或全关。 */

/* ★ 菜单打开时锁住主页滚动；顶栏改 fixed 钉住（sticky 依赖滚动，锁滚后吸顶会掉出视口），
   层级 320 > 抽屉 300 —— 顶栏与汉堡按钮全程可见可点。 */
body.egh-dw-open{overflow:hidden}
/* ★ 第 69 批：手机档（纯覆盖）点菜单条目时，body 是锁滚的、窗口滚不动，
   所以要临时放开一下才能把主页滚到对应区块。
   ★★ 只能放 overflow，**不能摘 .egh-dw-open** —— 摘了的话
   `body.egh-dw-open:not(.egh-dw-split) .egh-nav{position:fixed}` 会失效、顶栏回到文档流占位，
   内容整体位移 ≈60px，滚完再装回去落点就偏 60（实测 430 档 vpTop 只剩 11/28/44，本该 72）。 */
body.egh-dw-open.egh-dw-unlock{overflow:visible}
/* ★ 浮动头部【永远属于主页】：分栏时它是 .egh-page 里的 sticky（跟着主页一起被推走/滑回，
   按钮就落在主页那条缝里），不能用 position:fixed —— fixed 是相对视口的，会跑到主页外面去。
   只有手机尺寸（没有分栏、body 本身被锁滚）才需要 fixed 钉住。 */
body.egh-dw-open:not(.egh-dw-split) .egh-nav{position:fixed;top:0;left:0;right:0;width:100%;z-index:320}
/* ★ 分栏时整行头部回归主页层（用户口径：「顶部菜单栏不要再外面，直接放里面，不要分开」）：
   整行头部用 left 跟随 --dw-pos 被推进右边那条主页缝里（跟 .egh-content 同步），只有落在缝里的部分可见、
   并被变暗层（z315 > 主页层 310）压暗。
   ★★ 汉堡按钮【跟着主页走、不再反向钉回左上】（用户口径：「菜单按钮不想在汉堡页这里」）——
   它本来就属于主页顶栏，主页被推进缝里它就落在缝里（缝宽 64px，按钮 36px 装得下），
   只是提到 z330（> 变暗层 315）保持亮色、可点、不变灰。
   ★ 关键：父级不能形成 stacking context（sticky/fixed+z-index、transform、filter 都会），
   否则按钮被关在里面提不上去 —— 所以位移用 left（relative+left 不创建上下文），不用 transform。 */
body.egh-dw-split .egh-nav{position:relative;top:auto;z-index:50;left:0;transform:translateX(var(--dw-pos,0px));
  /* ★ 第 69 批：宽度收到【可见宽度】。原来宽度一直保持 100%（视口宽），而 left 又右移了 --dw-pos，
     于是整条顶栏右边凭空多出 pos 那么宽、被视口裁掉 —— 最右侧的「登录 / 立即下载」正好落在被裁的那截里
     （用户「主页的头部下载和登录不见了」）。收到 100% - pos 后右边缘正好贴视口右边，右侧按钮回到可见区。 */
  width:calc(100% - var(--dw-pos,0px));
  /* ★★★ 第 85 批之十二（用户 17:11「内容主页的很顺畅，拉条和头部 logo 行一卡一卡的」
     + 17:13「那框一卡一卡的，但是里面的很顺畅，导致内容先到、框卡慢了」）——
     【框走主线程、内容走合成线程】才是真凶：
       · 内容容器 .egh-content 用 transform ⇒ 合成线程，60fps 丝滑；
       · 顶栏 .egh-nav 原来用 `left`（+ width）⇒ 只能走主线程，每帧都要布局 ⇒ 一卡一卡；
       · 拉条 .egh-dwgrip 同样用 `left` ⇒ 同样卡。
     ⇒ 框与内容不是"谁先谁后"，而是**框掉帧、内容不掉帧** ⇒ 观感就是"内容先到、框慢"。
     修法：框一律改成 transform 位移（可交合成线程），left 恒 0。几何等价（见下），只是换条腿跑。 */
  /* ★ 第 85 批之十三：顶栏宽度恢复过渡（--dw-cw 会随容器一起平滑变窄），
     否则容器慢慢变窄、顶栏却瞬间到位 ⇒ 又变回"块过样式框"。 */
  transition:transform var(--dw-dur) var(--dw-ease),width var(--dw-dur) var(--dw-ease);
}
/* ★★★ 第 85 批之十二（用户 2026-10-13 16:52「其实不是容器框慢，是阴影样式和头部 logo 行整个样式框慢」
   + 16:55「并不是容器慢，而是块过样式框」）—— **760~1100 档：顶栏宽度改用【容器同一个变量 --dw-cw】**。
   [根因 · _diag85w.py 逐帧实测，1440 打开。注意：探针传相对路径会打开空白页，必须绝对路径]
     t=118  容器宽 100%（已定稿 640）  顶栏宽 **-2%**（还在 1425 附近）  容器左 0%
     t=274  容器宽 100%                顶栏宽 18%                        容器左 20%
   ⇒ 容器（内容块）早就收成 640 了，顶栏（样式框）还在按 560ms 慢慢缩 ⇒ 样式框一直比内容块宽，
     看着就是「内容块跑在样式框前面 / 穿出去」。
   [修法] 顶栏宽度不再自己算 calc(100% − pos)，改成吃 --dw-cw（= 容器的宽度来源、同一时刻写入）
     ⇒ 顶栏与容器**恒等宽**，两者只一起平移，样式框永远贴着内容块。
   [为什么不选"让宽度也走过渡"] 试过：同步完美（各列 3%/45%/48%/51%/100% 全同拍），
     但动画期 **108ms/帧 ≈9fps**（每帧重排整个 container-query 容器），不可用 ⇒ 已撤回。
   ★ 手机档（<760）不动：那一档 --dw-cw 恒等于 --dw-basew（视口宽），而顶栏需要的是
     calc(100% − pos) = 60 才能把汉堡【居中】在暗格里，换变量会破坏定稿的暗格几何。 */
@media (min-width:760px){
  body.egh-dw-split .egh-nav{width:var(--dw-cw,100%)}
}
/* ★ 第 69 批：顶栏变窄时的收缩优先级 —— 空间不够先压 logo，【保住右侧的登录 / 立即下载】
   （否则窄视口下它们会被挤出去，用户看到「主页的头部不见了」）。 */
body.egh-dw-split .egh-nav-in{min-width:0;overflow:hidden}
body.egh-dw-split .egh-logo{min-width:0;overflow:hidden}
body.egh-dw-split .egh-nav-r{flex:0 0 auto}
/* ★★★ 第 88 批之二（00:1x，用户「760 的汉堡按钮不用高亮出来？」）——顶栏暗化层【恢复】：
   汉堡被关在 .egh-page 的层叠上下文里（z330 只在上下文内生效），body 级暗层(315) 会连整个
   page(310) 一起压住 ⇒ 88 批「两层合一」实测把汉堡也压暗了。⇒ 顶栏区必须由 nav 内部的层来压：
   z330 汉堡 / peek logo 浮在它上面保持高亮，其余内容被压暗；顶栏以下仍由 .egh-dwdim 负责。
   ★ 与 20:17 的区别：<760 那条「钉成右 60px」的覆写【永久不恢复】（它是"只有最后 60px 暗"的根因）。
   ★ 本层 inset:0 跟随 nav 几何、吃同一条 --dw-dim、无独立过渡 —— 与 .egh-dwdim 同拍，不扫车。 */
body.egh-dw-split .egh-nav:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(16,24,40,.88);opacity:var(--dw-dim,0);
  transition:none}
/* ★★ 第 77 批（用户 03:08「点击菜单后容器里的主页不要去掉浮动的 logo 行，不然无法关闭这个菜单页」）：
   点完一级菜单后容器会拉开（--dw-pos 变 320），顶栏变窄 → 汉堡被 flex 挤成 20px（第 73 批老毛病复发）。
   ⇒ 汉堡在【所有分栏态】都不许收缩（原来只有 peek 态写了 flex:0 0 36px），
     同时它是 nav-in 的第一个子元素（第 69 批 insertBefore）+ 顶栏 overflow:hidden →
     永远贴在可见区左缘、恒 36×36、恒可点 = 随时能关菜单。 */
body.egh-dw-split #eghBurger{position:relative;z-index:330;
  flex:0 0 36px;width:36px;min-width:36px}
/* ★ 只露出那一条（<360）时，把这一条的左右内边距改成「让汉堡按钮正好居中」：
   缝宽 = --dw-slug（第 76 批起 = 20vw，下限 56 / 上限 220），按钮 36 → 左右各 (slug-36)/2。 */
body.egh-dw-split.egh-dw-peek .egh-nav-in{
  gap:12px;
  padding-left:12px;
  padding-right:0}
/* ★★★ 第 85 批之四（用户 2026-10-13 14:27「你把刚才改错的 汉堡 60 宽的暗格改回来，你乱改现在那个暗格太宽」）
   —— 暗格（peek 露缝态）口径回到【固定 60】：12 + 汉堡36 + 12 = 60，暗格里【只有汉堡】。
   ① nav-in：padding-left 12 / gap 12 ⇒ 汉堡 x = 缝左 + 12，右侧余 12 ⇒ 正好在这 60 里居中；
   ② logo(26) 落在汉堡右侧 12 之后（x = 缝左 + 60），紧贴缝右缘、被 overflow:hidden 裁掉
      —— 拉开主页容器后自动回来（与 03:21 拍板口径一致）；
   ③ 缝宽由 JS `sliver()` 给，**固定 60**（护栏 = 菜单页不得小于 MENU_MIN 240）。
   ★ 历史沿革（别再反复，60 是唯一口径）：74c 要过「缝里有 logo」→ 76 批改成「缝正中只有汉堡」→
     84 批放开到 86（把 logo 挤进缝里）→ **85 批之四 用户判定 86 太宽，收回 60**。
     〔08:31「容器里的 logo 行不见」的真根因是分栏时 .egh-page 被滚走 60px（overflow:clip 已修），与缝宽无关。〕 */
/* ★★★ 第 88 批之三（10-14 00:4x，用户「把之前的 logo 高亮去掉，就一个汉堡菜单」）——
   84 批之二「peek 态把 logo 也提到 330、两个都亮」**撤销**：暗格里只留汉堡一个亮体，
   logo 随大流被压暗、端态被 overflow 裁掉。（汉堡自己的 z-index:330 保留不动——那是「可点不灰」的硬规则。） */
body.egh-dw-split.egh-dw-peek .egh-nav-in>.egh-logo{flex:0 0 auto}
/* ★★★ 第 88 批之四（10-14 01:0x，用户截图反馈）：露出 < 360（peek 档）时——
   ① 顶栏「立即下载 EGOHUI」收起：窗内窄了不再挤下载，让位给站名（与 ≤449 同一逻辑）；
   ② 顶栏 logo 行去掉毛玻璃底色：露出窄时它背后是菜单页白底 + 菜单登录行的边框线，
      backdrop-blur 会把那根线吸上来、在行底部糊出一条「白→灰」渐变（用户「底色渐变」）；
      关掉后 = 均匀白净，与关闭菜单页时的观感统一（用户「统一改成透明行的」）。 */
body.egh-dw-split.egh-dw-peek .egh-nav .egh-btn-dl{display:none}
/* ★★★ 第 88 批之四（01:1x）：【「底色渐变」的真修复】渐变不是毛玻璃造成的（关掉过，依旧 255→240）——
   是 .egh-content 的左侧分隔投影（85 批加的 box-shadow:-10px 0 28px）在【分栏态】从内容顶边
   往上洇进顶栏底缘约 14px（实测顶栏底部像素 255→240 灰渐变）；关闭态没有这层投影、所以干净
   （用户「窗内的 logo 行还是底色渐变…统一改成透明行的」）。
   ⇒ 给顶栏一个页内正 z-index：整行（含底色）压在内容投影之上，投影只留在分界线左侧作分隔。 */
body.egh-dw-split .egh-nav{z-index:50}
/* ★★★ 第 88 批之四：原「peek 藏字标」规则【撤销】——用户要「logo 后面补上网站名 EGOHUI」。
   窄到装不下时由 .egh-nav-in 的 overflow:hidden 自动裁切，不再靠 display:none。 */
body.egh-dw-split.egh-dw-peek #eghBurger{flex:0 0 36px;width:36px;min-width:36px}
/* ★ 拖动期间全部去掉过渡，保证跟手（松手/开合才走 --dw-dur 的丝滑动画） */
/* ★ 第 69 批：拖动期间关掉主页左缘那道 28px 模糊投影 ——
   它每帧都要重绘一整块全屏高的模糊，是「拉起来很累/一卡一卡」的主要来源（用户实测反馈）。
   拖动时靠 .egh-dwgrip:after 那条加深的暗带看清分界，松手后投影自动回来。 */
body.egh-dw-dragging .egh-content{box-shadow:none}
/* ★★★ 第 88 批之三（修复「内容跟不上拉条、在框外」）：本组必须带 !important ——
   否则会被后面同权重的 `body.egh-dw-split .egh-content{transition:...}`（85 批之十三）按"后出现者胜"盖掉
   ⇒ 拖动期间内容仍走 450ms 过渡、整整慢半拍（实测 content.x 落后 pos 约 25~33px）。
   另补 .dw-top（新加了宽度过渡，拖动期间必须跟手）。 */
body.egh-dw-dragging .egh-content, body.egh-dw-dragging .egh-nav,
body.egh-dw-dragging .egh-dwdim, body.egh-dw-dragging .egh-dwgrip,
body.egh-dw-dragging .egh-drawer .dw-acts, body.egh-dw-dragging{transition:none !important}
/* ★ 第 69 批：拖动拉条时【整页禁止选中文本】—— 原来一拉就把菜单/正文整片刷蓝（用户「一拉都全选了」）。
   只在 .egh-dw-dragging 期间生效，松手立刻恢复可正常选中复制。
   另加 cursor:ew-resize：拖动时光标离开把手也不变回默认，观感上不会「掉手」。 */
body.egh-dw-dragging{user-select:none;-webkit-user-select:none;cursor:ew-resize}
/* 手机尺寸（≤640）抽屉全高后，顶栏要让位：背景透明 + 只留汉堡按钮浮在抽屉之上，
   否则横条会盖住抽屉顶部的「登录」整行（第 65 批第 2/6 条）。 */
body.egh-dw-open:not(.egh-dw-split) .egh-nav{background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
body.egh-dw-open:not(.egh-dw-split) .egh-nav-in>*{visibility:hidden}
body.egh-dw-open:not(.egh-dw-split) #eghBurger{visibility:visible;pointer-events:auto}
/* ★ 第 73 批：手机档打开抽屉时，把汉堡排到【最右】（order:1，其余元素默认 0）——
   第 69 批 insertBefore 把汉堡搬到顶栏最左后，它(12,12,36×36) 正好压住抽屉自己的登录头像(14,14,34×34)，
   登录整行点不到（390/640 实测重叠 34×34）。排到最后 = 回到第 65 批验收过的位置（紧跟隐藏占位的
   nav-r 之后 ≈x226），既不压登录、也不碰右侧的搜索/提醒/切换。 */
body.egh-dw-open:not(.egh-dw-split) #eghBurger{order:1}
/* ★ 第 69 批：开关抽屉时【整条顶栏】是跟着 --dw-pos 一起横着走的（left 有 --dw-dur≈450ms 过渡），
   所以 logo / 登录 / 下载 那一行会从抽屉面板脸上扫过去 —— 就是用户反馈的
   「登录页行又跨屏了」「登录行贯穿菜单页和主页」。
   办法跟手机档那条一样：滑动期间把顶栏内容藏起来，只留汉堡按钮跟着走。
   （抽屉是博主的「菜单页」，不该被主页那条顶栏横穿。） */
/* ★★★ 第 82 批（用户 06:31「头部 logo 行的会慢一半」）——【整段删除，别再写回来】：
   旧规则是「滑动期间把顶栏内容藏起来，只留汉堡跟着走」：
     body.egh-dw-anim .egh-nav-in>*{visibility:hidden}
     body.egh-dw-anim #eghBurger{visibility:visible;pointer-events:auto}
   当时的病根：抽屉已经完整就位了，顶栏才从 0 慢慢横移到 pos，于是白色顶栏连同 logo/登录/下载
   从菜单页脸上扫过去。现在抽屉和顶栏【同时、同速、同向】走（都用 --dw-dur/--dw-ease），
   而且有个不变式保证永远不会穿越：
     · 菜单页【可见区】右边界 ≡ --dw-pos（页面层从 --dw-pos 起把右边全盖住）；
     · 顶栏内容从 left+12px 起，left ≡ --dw-pos。
   ⇒ 顶栏内容永远在可见区右边界之外，"贯穿菜单页"从几何上就不可能发生。
   保留它只会带来副作用：顶栏那行要等 durMs()+40ms 才重新可见 → 用户看到的「慢一半」。 */
/* 顶栏布局：横排菜单 + 右侧按钮固定靠右不伸缩；logo 用 flex:1 吃掉【剩余空间】并在剩余空间里居中
   —— 不用绝对定位居中（那会压在菜单上），也不给菜单 margin-left:auto（会抢走 logo 的空间）。 */
.egh-nav-in{display:flex;align-items:center}
.egh-nav-in>.egh-logo{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center}
.egh-nav-in>.egh-menu{flex:0 0 auto}
.egh-nav-in>.egh-nav-r{flex:0 0 auto}
/* ★ 原「横排菜单收紧一档」（改 gap / 字号 / 内边距 / 按钮高度）已整段删除（2026-10-12）：
     用户要求「导航字体大小任何宽度都不变」，缩放窗口时字不该忽大忽小。
     类 .egh-nav--tight 不再有任何规则，也不再有脚本添加它。 */
/* 汉堡高亮态：抽屉打开时按钮亮成品牌色 */
body.egh-dw-open #eghBurger, .egh-burger.on{border-color:var(--egh-brand);color:var(--egh-brand-t)}
/* 露出不足 320（只露一条按钮）时：主页那一小条【不可点】，只有菜单按钮可点 */
body.egh-dw-peek .egh-content{pointer-events:none}
/* ★ 第 68 批：分栏时 .egh-page 是整屏宽的容器（z310 > 抽屉 z300），会把抽屉的点击全吃掉
   —— 实测手机端登录行 elementFromPoint 命中的是 .egh-page 而不是 .dw-me，抽屉里什么都点不了。
   让外层 page 不吃点击，只把真正的主页内容区 / 顶栏（含汉堡）恢复可点。
   ★ peek 那条要写成 .egh-dw-split.egh-dw-peek（权重更高），否则会被下面这条盖掉。 */
body.egh-dw-split .egh-page{pointer-events:none}
body.egh-dw-split .egh-content{pointer-events:auto}
body.egh-dw-split .egh-nav{pointer-events:auto}
body.egh-dw-split.egh-dw-peek .egh-content{pointer-events:none}

/* ===== 两种模式：手机尺寸 = 纯覆盖；非手机尺寸 = 顶开 + 遮罩 + 拉条 =====
   ★ 手机尺寸（≤640）：不加 .egh-dw-push / .egh-dw-mask，
     主页不写任何 transform，菜单纯覆盖，关掉后主页完整可点、无遮罩。
   ★ 非手机尺寸：主页被顶开一条手机尺寸的边（--dw-push），遮罩压住被顶开的主页，
     拉条可拖；拖到手机尺寸阈值就收菜单、去遮罩、主页整页显示。 */
/* ★ 主页层就是那层「盖住菜单页」的东西：它从右边滑过来，一寸寸盖住菜单。
   菜单页宽度固定（--dw-w），永远不变形；盖的动作完全由主页层的位移+宽度完成。
   .egh-page 同时是布局容器（container-type:inline-size）→ 被压到手机宽时自动走手机排版。 */
/* 主页：常态是普通文档流里完整的一页。
   分栏时它就是那层「遮罩」：宽 640（容器查询 → 真·手机排版）、自己内部滚动，
   位置由 --dw-pos 决定 —— 从右边（菜单全露）一路滑到 0（把菜单页整个盖住）。 */
.egh-page{transition:transform .32s cubic-bezier(.2,.8,.3,1),left .32s cubic-bezier(.2,.8,.3,1)}
/* 菜单页：只占「视口 − 手机宽」剩下的那部分，固定不参与拖动（不会被拉变形） */
.egh-drawer{transition:transform var(--dw-dur) var(--dw-ease),visibility var(--dw-dur)}
body.egh-dw-split .egh-drawer{width:var(--dw-menu,300px)}
/* 打开时右边那条主页要变暗：本层只管【内容区】（top 从顶栏下沿起）；
   ★ 顶栏那条（logo 行）由 .egh-nav:before 单独负责 —— 汉堡要在它上面亮着（见 88 批之二）。 */
.egh-dwdim{position:fixed;top:var(--nav-h);bottom:0;left:0;transform:translateX(var(--dw-pos,0px));right:0;z-index:315;
  background:rgba(16,24,40,.88);opacity:0;visibility:hidden;pointer-events:none;
  /* ★★★ 第 88 批（23:5x）：补回 transform 过渡 —— 开=随页面平滑从亮到暗、关=镜像；拖动期间 .egh-dw-dragging 关掉跟手。
     ★★★ 第 88 批之二（00:1x，用户「760 的汉堡按钮不用高亮出来？」）——top 回到「顶栏下沿」：
        回归根因（实测+层叠推导）：汉堡在 .egh-page 的层叠上下文里（z330 只在上下文内生效），
        body 级暗层(315) 会连整个 page(310) 一起压住 ⇒ 汉堡被压暗。
        ⇒ 顶栏区必须由【nav 内部】的层来压（汉堡 z330 在同上下文里压得住它），本层退回只管顶栏以下。
     ★★ 不要把 opacity 放进过渡：--dw-dim 已在 body 上插值，再套一层 = 双重缓动滞后。 */
  transition:transform var(--dw-dur) var(--dw-ease),visibility .28s}
/* ★ 暗度 = 拖动进度：打开时全暗（--dw-dim:1），
   露出 320 起、到 360 才逐渐变亮（→0）；360 之后全亮、可点。
   回退值写 0（不写 1）—— 关闭时 --dw-dim 被清掉，若回退 1 会先闪一下更暗再消失。 */
body.egh-dw-split .egh-dwdim{opacity:var(--dw-dim,0);visibility:visible}
/* ★ 第 68 批：--dw-dim 注册过 @property <number>，给 body 加它的过渡后，
   顶栏暗化层与主页变暗层吃的是同一条曲线 → 展开/收起两边完全同步（原来顶栏没有、主页有，观感不一致）。 */
body{transition:--dw-dim var(--dw-dur,.32s) var(--dw-ease,cubic-bezier(.2,.8,.3,1))}
/* 关闭动画期间：暗层的透明度【仍然跟着 --dw-dim 渐变到 0】（从暗到亮），
   只把 visibility 的切换延到动画结束（否则一关就「啪」地全亮）。 */
/* ★ 第 85 批之十四：同理去掉 opacity 过渡，只把 visibility 的切换延到动画结束。 */
body.egh-dw-closing .egh-dwdim{transition:transform var(--dw-dur) var(--dw-ease),visibility 0s linear var(--dw-dur)} /* ★ 第 88 批：补回 transform —— 关闭时暗层跟页面平滑收回，不许瞬跳铺满 */
body.egh-dw-closing .egh-drawer .dw-acts{transition:none}   /* ★ 第 88 批之三 + 89 批：关闭时 --dw-pos 归零，三枚按钮瞬时归位（随抽屉一起淡出，不单独滑动） */
/* ★★★ 第 85 批之十四（用户 2026-10-13 17:28，【<760 手机档】）——
   遮罩（主页变暗层 + 顶栏 logo 行变暗层）**锚死在右侧 60px 暗格里，只淡入淡出、不再跟着 --dw-pos 扫**。
   为什么必须这样（三个问题同一个根因）：
     ①「菜单页的时候左边的菜单页不要遮罩」—— 遮罩是 `left:0;right:0`（整屏宽）靠 transform 跟着
        --dw-pos 走；开/关动画期间 pos 从 0 扫到 vw−60（或反向），遮罩就横扫过整个菜单页。
        （第 85 批之十二 给它补了 transform 过渡之后，这个"横扫"才变成肉眼可见的动画——之前是瞬跳。）
     ②「关闭时 logo 行遮罩有拖影」—— 顶栏那层是 `inset:0` 铺满顶栏，顶栏关闭时宽度从 60 涨回整屏
        ⇒ 暗层跟着放大、扫过整条 logo 行。
     ③「遮罩颜色跳动 / 突然暗突然亮」—— 关闭时 --dw-pos 归 0，整屏宽的遮罩瞬间铺满再淡出
        ⇒ 先"啪"地全暗、再慢慢亮。
   ⇒ 手机档两条都改成【贴右边 60px、不动】，暗度只由 --dw-dim 控制淡入淡出：
      · 永远压在暗格上，不可能盖到菜单页；
      · 关闭时它就在暗格里静静淡出，没有横扫、没有铺满、没有拖影。
   ★ 60 = sliver() 的常量值（与暗格几何同一套口径，别改）。
   ★ 只作用于 <760：760~1100 档 --dw-dim 恒为 0（第 80 批 定案），遮罩本来就是不可见的。 */
/* 第 64 批 边界提示胶囊：拉到 360 / 640 阈值时淡入淡出一行小字 */
.egh-dwtip{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(6px);
  z-index:340;max-width:min(78vw,360px);padding:9px 16px;border-radius:999px;
  background:rgba(16,24,40,.88);color:#fff;font-size:13.5px;line-height:1.45;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s var(--dw-ease)}
.egh-dwtip.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* 拉条：骑在遮罩（主页）左沿上 —— 拖它就是拖遮罩往左盖菜单 */
.egh-dwgrip{position:fixed;top:0;bottom:0;width:36px;z-index:330;display:none;
  /* ★★★ 第 85 批之十二：拉条也改用 transform（原 `left:calc(--dw-pos - 18px)` 走主线程 ⇒ 一卡一卡）。
     left 恒 0、-18px 挪进 translateX ⇒ 位置与改前完全相同，只是从"主线程布局"换成"合成线程位移"。 */
  left:0;transform:translateX(calc(var(--dw-pos,0px) - 18px));cursor:ew-resize;touch-action:none;
  /* ★ 第 69 批：把手自己也不能选中文本（按在把手上就刷蓝 → 用户「一拉都全选了」） */
  user-select:none;-webkit-user-select:none;
  transition:transform var(--dw-dur) var(--dw-ease)}
  /* ★ 第 69 批：拉条阴影【只要一边】（用户「一边阴影就行了 不用两边」）。
   只做把手的【左半边】（right:50% → 只占 18px），从左往右渐深到分界线 ——
   即阴影只落在菜单那一侧，主页那一侧干净。跟 .egh-content 那道向左的投影同向，不重复。
   最暗处正好压在 --dw-pos 这条分界线上（把手中心 = --dw-pos）。 */
.egh-dwgrip:after{content:"";position:absolute;top:0;bottom:0;left:0;right:50%;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,24,40,0) 0%,rgba(16,24,40,.05) 35%,
    rgba(16,24,40,.22) 100%);
  transition:opacity .2s ease;opacity:.75}
body.egh-dw-dragging .egh-dwgrip:after{opacity:1}
body.egh-dw-bar .egh-dwgrip{display:block}
.egh-dwgrip:before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:6px;height:88px;border-radius:3px;background:#7C8CA6;
  box-shadow:0 0 0 2px rgba(255,255,255,.95),0 3px 10px rgba(16,24,40,.28);transition:background .2s}
.egh-dwgrip:active:before{background:var(--egh-brand)}
/* 拉到手机段（露出 ≥360）时把手变品牌色，提示「这一段可正常用了」 */
.egh-dwgrip.on:before{background:var(--egh-brand)}
@media (hover:hover){.egh-dwgrip:hover:before{background:var(--egh-brand)}}
/* 右下角常驻边栏 z-index 极高，会压在抽屉上面 → 打开时让位 */
/* ★ 第 100 批：抽屉打开时【边栏本体 + 卡片都保留】——边栏由 JS railSync 收成把手
   （缩成当前线那枚图标 + 呼吸），卡片照常可点开。用户 2026-10-15 拍板原话：
   「这个隐藏不是消失，是缩小成一个小的当前的图标，可以打开还原的。」
   ★★ 修第 97 批的漏：那次只把选择器从 `.egh-rail,.egh-rail-pn` 收窄成 `.egh-rail-pn`，
     却仍留着 opacity:0;pointer-events:none ⇒ 把手看得见、点得动，卡片却永远不显示
     = 用户 2026-10-15 报的「点击没卡片」根因（运行时实测 pnCls 有 on 但 opacity=0）。
     现整条撤掉，让面板回到默认的 `.on` 才显示。 */

@media (prefers-reduced-motion:reduce){
  .egh-drawer, .egh-drawer.on .dw-body>*{transition-duration:.01s}
}
/* logo 永远只有图标，字标不出现；EGOHUI 作为站点名放在标题、页脚等处 */
.egh-logo i img{display:block;width:36px;height:36px;border-radius:10px;object-fit:cover}
/* ★ 第 83 批：站头 logo 改用 <svg><use href="#i-logo"/></svg>（与其余 7 个页面【同构】，
   全站只留一份 logo 数据，以后换标只改 #i-logo 一处）。
   尺寸口径与上面 img 那条完全一致（26×26、display:block）；不再需要 border-radius / object-fit：
   新标是 115×115 方图、内容上下留白对称（上 21 / 下 21），方图进方框零裁切。
   旧 img 那条【保留不删】—— 回滚时把 <svg> 改回 <img> 即自动生效。 */
.egh-logo i svg{display:block;width:36px;height:36px}
/* ★ 已删 .egh-logo i img{22px}：logo 图标恒为 36px，小屏不缩水 */


/* 主页内容装在这个容器里：容器宽度 = 页面实际可用宽度。
   分栏模式下 .egh-page 被压到手机宽并右移，右边那份就是真·手机排版（断点走 @container）。 */
/* 主页层：固定铺满、不裁剪、**不做容器** —— 顶栏（含汉堡按钮）留在这里，按钮永远在最左。
   分栏时被推到右边的是下面那个「内容容器」，顶栏不动。 */
.egh-page{position:relative;min-height:100%}
/* ★★★ 第 85 批（用户 2026-10-13 14:18 两张截图定案）—— 这里必须是 overflow:clip，不能是 hidden。
   [根因 · _chk85d.py 实测] 分栏时 .egh-page 是 fixed 铺满（视口 600），但它的 scrollHeight = 660
   （= 视口 + 顶栏 60，页面其余部分在 .egh-content 里、是 absolute 不参与流）。
   overflow:hidden 只是【不显示滚动条】，它【仍然是一个可滚动盒子】——
   任何一个「滚动到某元素」的默认行为（原生锚点跳转 / scrollIntoView / 焦点滚动）
   都会先滚这层：实测 location.hash='#brand' → .egh-page.scrollTop = 60 →
      · 顶栏 .egh-nav（在流内 y=0）被滚到 y=−60 ⇒ 汉堡 / EGOHUI / 登录 / 立即下载【整行滚出视口】；
      · .egh-content（top:60px）跟着落到 y=0 ⇒ 容器内容从最顶上开始画。
   这两条与用户截图逐像素一致（「点企业品牌建站后容器的 logo 行整行没了」）。
   ⇒ 换成 overflow:clip：clip 只是裁剪，【不产生滚动容器】，这一层从此滚不动，
     任何触发途径都不可能再把顶栏整行滚走（第 84 批那句「容器的 logo 行还是没有」也是同一根因）。
   注：clip 的裁剪效果与 hidden 完全相同（容器左缘投影照旧被裁），且不改变 .egh-content 的包含块。 */
body.egh-dw-split .egh-page{position:fixed;top:0;left:0;right:0;bottom:0;z-index:310;overflow:clip}
/* 内容容器：宽度由 --dw-cw 决定（第 64 批）：
   · 露出 <320：--dw-cw = 打开时的视口宽（--dw-basew）→ 保持【打开当时尺寸】的原主页，只露出左边一条、全暗；
   · 露出 ≥320：--dw-cw = 露出宽度 → 切进「自适应盒子」（容器查询 → 真·手机排版），320→360 变亮、≥360 可点。
   位移由 --dw-pos 驱动，并带 --dw-dur 过渡（拖动期间被 .egh-dw-dragging 关掉以保证跟手）。 */
/* ★★★ 第 85 批之十三（用户 17:20「打开菜单页 容器的内容不是慢慢变小，而是直接一下子小，
   手机大小了。不像被推过去的感觉」）—— 基础态补 `width:100%`：
   闭合态宽度原来是 auto（块级默认），开合时 .egh-content 从 auto 变到 var(--dw-cw) 长度 ——
   **auto 不可插值** ⇒ 宽度永远"瞬跳"（就是"一下子变手机大小"）。
   写成 100%（= auto 的等价视觉，块级铺满父层）后，100% → (vw−posMin) 才能沿 --dw-dur 平滑插值
   ⇒ 内容跟着框**一起慢慢变小** = "被推过去"的感觉。 */
.egh-content{container-type:inline-size;container-name:eghpage;min-height:100%;width:100%}
/* ★★★ 第 85 批之十三：宽度既然要每帧过渡，就得把重排成本压下来。
   只让**离屏区块跳过布局**：content-visibility:auto + 一个兜底高度（contain-intrinsic-size）。
   实测（_diag85w.py，1440 打开，同目录绝对路径）：
     不加这条：动画期 69.5ms/帧（≈14fps）   ← 每帧重排整个 8000px+ 容器
     加上这条：动画期 26.4ms/帧（≈38fps）   ← 快 2.6 倍，比"宽度瞬跳"那一版（38~46ms）还快
   ★ 只在 .egh-dw-anim（开合那 ~durMs+40）期间挂，动画结束即撤，不影响平时的滚动/布局。 */
body.egh-dw-anim .egh-content > *{content-visibility:auto;contain-intrinsic-size:auto 600px}
body.egh-dw-split .egh-content{position:absolute;top:var(--nav-h);left:0;bottom:0;
  width:var(--dw-cw,100%);min-width:320px;transform:translateX(var(--dw-pos,0px));
  overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;
  /* ★ 第 69 批：主页层左边缘投影 —— 菜单页和主页【都是白底】，拉开后（遮罩变亮）两条白贴在一起
     根本看不出分界在哪（用户「两边白看不清楚」）。给主页左沿一道向左的投影，它就"浮"在菜单上了。
     .egh-page 是 overflow:hidden 但覆盖全屏，这道 28px 的投影落在 [pos-28,pos] 内，不会被裁掉。 */
  box-shadow:-10px 0 28px rgba(16,24,40,.16);
  /* width 也进过渡：关闭时 --dw-cw 被清掉，宽度平滑回到 100%（否则内容重排会「跳动」一下） */
  transition:transform var(--dw-dur) var(--dw-ease),width var(--dw-dur) var(--dw-ease)}
/* ★★★ 第 78 批（用户「这个容器模式是不是很不稳定」「我必须用户是顺畅的，而不是跳来跳去的感觉」）
   「点条目自动停靠」那一下改成【单段动画、零可见重排】：
   挂上 .egh-dw-dock 的这段时间里，把 width 从过渡列表里摘掉 →
   --dw-cw 当场生效（重排只发生一次、瞬时），--dw-pos 照旧 450ms 滑过去。
   为什么这样就不抖了：重排发生在【这一刻】—— 此时内容还缩在暗格那 60px 里、而且 --dw-dim 还是 1（全暗），
   整页重排的过程用户根本看不见；等他看见的时候，宽度早就成型了，眼前只剩一条横向滑动。
   旧法对比：先滑 450ms → 再写 --dw-cw → 主页宽度走 450ms 过渡 = 用户盯着一个 8000px 的页面实时重排（"抖"）。
   ★ 这条只服务于 jumpTo 的停靠那一刻，done 之后（或关菜单时）立刻撤掉，恢复原来的平滑宽度过渡。 */
body.egh-dw-dock .egh-content{transition:transform var(--dw-dur) var(--dw-ease)}
/* ★★★ 第 80 批（用户 05:25「第一次打开固定容器 会乱跳乱转而且会超出固定容器然后再回归到容器」）——
   打开的第一帧专用：把 --dw-pos 驱动的那些过渡【临时摘掉】。
   原因：splitInit() 原来靠「setPos(0) → 强制回流 → setPos(posMax())」求一个开场动画，
   于是第一帧主页容器的 translateX = 0 → 它铺满整个视口（＝"超出固定容器"），
   再花 450ms 滑回右边那条暗格（＝"再回归到容器"）。摘掉过渡后，--dw-pos 一次写到位，
   容器从第一帧起就已经停在暗格里，没有横扫这一趟。
   ★ 不要把 .egh-drawer 也算进来 —— 抽屉自己那条 translateX(-100%) → 0 的滑入是开场动效，要保留。 */
body.egh-dw-nopos .egh-content,
body.egh-dw-nopos .egh-nav,
body.egh-dw-nopos .egh-dwdim,
body.egh-dw-nopos .egh-dwgrip,
body.egh-dw-nopos .egh-drawer .dw-acts{transition:none !important}   /* ★ 第 89 批：按钮跟随也改成 transform，nopos 这一帧必须跟主页层一起瞬时到位，否则开场第一帧就差 26px */
/* ★★★ 第 80 批：关闭【收尾那一帧】用 —— 摘掉抽屉的 transition。
   为什么必须有：.egh-drawer 的 transition 里带 visibility，而 visibility→hidden 是"过渡结束才切"的
   离散属性，撤 .on 后抽屉会"可见地"滑出去 450ms；这一刻它已经回到 position:fixed + z-index:300，
   比回到普通文档流的主页更高 → 首页左上凭空出现一块 360px 宽的老菜单页（同时盖住主页头部 logo）。
   挂上本类后：宽度跳回、位移归位、visibility 隐藏全在同一帧完成，抽屉"啪"地消失。 */
body.egh-dw-snap .egh-drawer{transition:none !important}
/* 暗度变量本身也要过渡（顶栏暗化吃它） */
body{transition:--dw-dim var(--dw-dur) var(--dw-ease)}
/* 顶栏不在容器里 → 容器查询管不到它，手机态样式用 @container eghpage (max-width:768px){ .egh-nav-in{gap:12px} .wrap{padding:0 16px} }
/* ★ 已删掉 .egh-logo i{22px}：logo 图标任何宽度恒为 36px（用户要求左段完全不变） */
/* ★ 已删掉同块里的 .egh-nav-in{gap:8px} / .egh-logo{gap:7px}：汉堡档间距与 logo 内间距必须恒定，见上方汉堡档规则 */
/* ★ 已删掉 .egh-nav-in{gap:6px}：会让汉堡↔logo 距离在 ≤480 突然缩到 6px，与其它档不一致 */
/* ★ 顶栏形态 = 纯 CSS 视口断点（用户 2026-10-12 拍板，替掉原来的 JS 量宽判定：
     JS 测量在「放大浏览器 → 再缩小」时会滞后、与实际布局对不上，也不丝滑；CSS 全站只算一次，改窗口即时生效）。
   ★★ 硬规则（2026-10-12 用户追加）：**导航字体大小任何宽度都不变** ——
     原来 1100~1279 有一档「紧凑档」把菜单字号压到 12.5px、按钮高度压到 32px，
     缩放窗口时字会忽大忽小；现在整段删掉，字号/内边距/按钮高度全站恒定（只改显示与否，不改字号）。
     代价：横排需求宽变成恒定值 ——
       · 横向菜单 + 站点名 + 登录              = 944px 内容宽 → 最小视口 1007
       · 再加上「立即下载」                     = 1102px 内容宽 → 最小视口 1165
     所以「立即下载」只在 ≥1200 出现（1165 + 安全余量）。 */
/*@keep-media*/ @media (max-width:1099px){
  .egh-nav #eghMenu{display:none}
  .egh-nav #eghBurger{display:flex}
  .egh-nav-in>.egh-logo{flex:0 0 auto;justify-content:flex-start}
  /* ★ 汉堡按钮【四边等距 12px】（用户 2026-10-12 拍板）：
       上 12 / 下 12（汉堡 36×36 在 60px 顶栏里天然居中，不用改）
       左 12 = 顶栏左内边距（覆盖 .wrap 的 20px）／ 右 12 = 本条 gap。
       原来它跟着 @media (max-width:640px){gap:8} / (max-width:480px){gap:6} 一路缩水 → 已全部删除。 */
  .egh-nav-in{gap:12px;padding-left:12px;padding-right:12px}
}
/* ★ 汉堡档把「立即下载」补回来（用户 2026-10-12：汉堡时顶栏有大把空间，下载必须回归）。
     硬判据：汉堡按钮必须保持 36px（被压就是挤了）。实测（内容可用 = 视口 − 15 滚动条 − 30 内边距）：
       480 → 需求 385 / 可用 435，富余 50  ✔ 汉堡 36 正常
       430 → 需求 385 / 可用 385，贴边     ✘ 汉堡被挤成 26
       375 → 需求 385 / 可用 330          ✘ 差 9，汉堡被挤成 20
       320 → 需求 385 / 可用 275          ✘ 差 64
     → 断点取 480：≥480 汉堡档显示「立即下载」；<480 仍然牺牲它（页面 hero 里还有下载按钮）。 */
/* ★ 汉堡档「立即下载」的断点 = 449。实测（四边等距 12px 之后，顶栏内边距也从 20 收到 12，可用空间变大）：
   450 档汉堡仍是完整 36×36 且下载正常显示，440 档汉堡被挤到 20 → 不可用。
   取 450 为显示起点（比临界高 10px 安全余量），≤449 收掉「立即下载」保住汉堡不被压扁。 */
/* ★ 10-17 午：logo 26→36px（与右侧按钮同高）后，汉堡档装下「立即下载」的安全宽度
   从 449 涨到 ~500（实测 500 宽：内容 485 = 可用 485，恰贴边）；断点同步 449→509 留余量。 */
/*@keep-media*/ @media (max-width:509px){
  .egh-nav .egh-btn-dl{display:none}
}
/* ★ 第 88 批之四（01:0x）：00:44 曾把「360 以下」误解为浏览器宽度、给 hero 下载按钮加过 ≤360 隐藏——【已撤回】。
   用户指的是【窗内露出宽度 < 360】，对应规则在 peek 档处（顶栏下载按钮收起 + 字标补回），hero 按钮保持显示。 */
/*@keep-media*/ @media (min-width:1100px){
  .egh-nav #eghMenu{display:flex}
  .egh-nav #eghBurger{display:none}
  .egh-nav .egh-btn-dl{display:none}          /* 1100~1199 先牺牲「立即下载」，见下一条 */
  .egh-nav-in>.egh-logo{flex:1 1 auto;justify-content:center}
}
/*@keep-media*/ @media (min-width:1200px){
  .egh-nav .egh-btn-dl{display:inline-flex}   /* 全量（含下载）真正装得下的起点 = 1165，取 1200 留安全余量 */
}

/* ★★★ 第 88 批之二（00:1x）——【20:17 的 <760 钉右 60px 覆写：永久删除，不再恢复】：
   那条覆写 = 打开时"只有最后 60px 暗"的直接根因（用户 23:02 判死）。
   顶栏暗化改由 nav 内部层（.egh-nav:before，inset:0 全宽、跟随 nav 几何）负责（见该规则处的批注）；
   汉堡 / 缝里的 logo 靠 z-index:330 在同上下文里浮在它之上，保持高亮可点。 */
body.egh-dw-closing .egh-drawer{opacity:0;transition:transform var(--dw-dur) var(--dw-ease),visibility var(--dw-dur),opacity var(--dw-dur) var(--dw-ease)}



/* ═══════ V3 合并：业务页/子页专属组件（首页未使用，从列表页 CSS 提取）═══════ */

/* 价格卡 */
.egh-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:920px;margin:0 auto}

@container eghpage (max-width:760px){.egh-two{grid-template-columns:1fr}}

.egh-price{background:var(--egh-bg-2);border:1px solid var(--egh-line);border-radius:var(--egh-radius);padding:26px 24px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 30px rgba(16,24,40,.06)}

.egh-price .big{font-size:30px;font-weight:800;color:var(--egh-ink);line-height:1.15}

.egh-price .big em{font-style:normal;font-size:15px;font-weight:600;color:var(--egh-ink-3);margin-left:5px}

.egh-price .who{margin:8px 0 16px;font-size:14px;font-weight:600;color:var(--egh-brand-t)}

.egh-price ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:9px}

.egh-price ul li{display:flex;align-items:flex-start;gap:8px;font-size:15px;color:var(--egh-ink-2);line-height:1.5}

.egh-price ul li svg{flex:0 0 auto;margin-top:3px;color:var(--egh-accent)}

.egh-price .add{margin:auto 0 0;padding-top:14px;border-top:1px dashed var(--egh-line);font-size:14px;color:var(--egh-ink-3)}

.egh-note{text-align:center;color:var(--egh-ink-3);font-size:14.5px;margin-top:18px}

.egh-price-wrap{max-width:460px;margin:0 auto}

/* 三列价格 */
.egh-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:980px;margin:0 auto}

@container eghpage (max-width:900px){.egh-prices{grid-template-columns:1fr}}

.egh-two{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}

.egh-prices{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

/* ★ 业务线副标题编号（.egh-quote .n）改为 CSS 计数器，配合 {pboot:list} 动态条数 */
.egh-quote{counter-reset:eghq}
.egh-quote li{counter-increment:eghq}
.egh-quote .n::before{content:counter(eghq)}

/* ★ 分页条（{page:bar} 输出用） */
.egh-pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:15px}
.egh-pager a,.egh-pager span{padding:6px 12px;border:1px solid var(--egh-line);border-radius:8px;color:var(--egh-ink-2);text-decoration:none}
.egh-pager a:hover{border-color:var(--egh-brand);color:var(--egh-brand-t)}
.egh-pager .page-num-current{background:var(--egh-brand);border-color:var(--egh-brand);color:#fff}


/* ═══════ V3 第三批：子页专属组件（新闻/案例/详情/表单/联系，从子页 CSS 提取）═══════ */

.egh-pms{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px;text-align:center}

.egh-pms .n{display:inline-flex;width:42px;height:42px;border-radius:50%;background:var(--egh-brand-l);color:var(--egh-brand-t);font-size:14.5px;font-weight:600;align-items:center;justify-content:center;margin-bottom:14px}

.egh-pms h4{font-size:16.5px;font-weight:600;margin-bottom:8px;color:var(--egh-ink-1)}

.egh-pms p{font-size:14.5px;color:var(--egh-ink-2);line-height:1.7}

@container eghpage (max-width:900px){.egh-pms{grid-template-columns:1fr;gap:22px}}

.egh-pms>div{background:linear-gradient(165deg,#F4F7FF 0%,#FFFFFF 72%);border-radius:var(--egh-r);padding:20px 16px}

/* ---- 3) 其他板块：右下角淡色斑，去空白感 ----
   注意：flow 卡的连线画在卡外（left:100%），绝不能给 .fg 加 overflow:hidden，
   它的色斑只能整个待在卡内。 */
.egh-cell,.egh-duo .duo,.egh-num,.egh-hero-stats .hs,.egh-pms>div{position:relative;overflow:hidden}

.egh-cell:after,.egh-duo .duo:after,.egh-num:after,.egh-hero-stats .hs:after,.egh-pms>div:after{content:"";position:absolute;right:-34px;bottom:-34px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--egh-brand-l) 0%,rgba(255,255,255,0) 72%);opacity:.55;pointer-events:none}



/* ============ 站点二级页：与官网首页同风格的专属区块 ============ */
/* 页面横幅：小淡底 + 大图标水印 + 右上角色斑（首页 Hero 的简化版） */
.egh-phero{position:relative;overflow:hidden;padding:62px 0 50px;background:linear-gradient(165deg,#F2F6FF 0%,#FFFFFF 72%);border-bottom:1px solid var(--egh-line)}

.egh-phero h1{font-size:clamp(26px,4vw,38px);font-weight:600;color:var(--egh-ink);margin:10px 0 12px;letter-spacing:-.5px;line-height:1.3}

.egh-phero p{font-size:15.5px;color:var(--egh-ink-2);max-width:660px;line-height:1.7}

.egh-phero .wm{position:absolute;right:-26px;bottom:-34px;width:210px;height:210px;color:var(--egh-brand-t);opacity:.06;pointer-events:none}

.egh-phero:after{content:"";position:absolute;right:6%;top:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,#DBE6FF 0%,rgba(255,255,255,0) 72%);opacity:.8;pointer-events:none}

/* 通用带装饰的卡片：右下角色斑（不牵扯外鎏 uxún 的元素） */
.dcard{position:relative;overflow:hidden;background:#fff;border:1px solid var(--egh-line);border-radius:var(--egh-radius);box-shadow:var(--egh-sh-1)}

.dcard:after{content:"";position:absolute;right:-34px;bottom:-34px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--egh-brand-l) 0%,rgba(255,255,255,0) 72%);opacity:.55;pointer-events:none}

/* 筛选 chips */
.egh-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}

.egh-chip{font-size:14.5px;padding:7px 16px;border-radius:999px;border:1px solid var(--egh-line);background:#fff;color:var(--egh-ink-2);text-decoration:none;transition:.2s var(--egh-ease)}

.egh-chip:hover{border-color:var(--egh-brand);color:var(--egh-brand-t)}

.egh-chip.on{background:var(--egh-brand);border-color:var(--egh-brand);color:#fff;font-weight:500}

/* 案例卡 */
.egh-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}

.egh-case{display:block;text-decoration:none;transition:transform .25s var(--egh-ease-out),box-shadow .25s,border-color .25s}

.egh-case:hover{border-color:var(--egh-brand);transform:translateY(-4px);box-shadow:var(--egh-sh-3)}

.egh-case .pic{height:186px;overflow:hidden;border-bottom:1px solid var(--egh-line);background:#F6F8FC;position:relative}

.egh-case .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--egh-ease)}

.egh-case:hover .pic img{transform:scale(1.08)}

/* 悬停浮现的圆形箭头（crmeb 式：图放大 + 箭头指向详情） */
.egh-case .arrow{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--egh-brand-t);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:opacity .25s var(--egh-ease-out),transform .25s var(--egh-ease-out);box-shadow:var(--egh-sh-2);z-index:2}

.egh-case:hover .arrow{opacity:1;transform:translateY(0)}

.egh-case .bd{padding:16px 18px 18px}

.egh-case h4{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15.5px;font-weight:600;color:var(--egh-ink);margin-bottom:6px}

.egh-case .tg{font-size:12px;font-weight:500;padding:2px 8px;border-radius:999px;background:var(--egh-brand-l);color:var(--egh-brand-t)}

.egh-case p{font-size:14px;color:var(--egh-ink-2);line-height:1.6}

.egh-case ul{display:flex;flex-wrap:wrap;gap:4px 14px;margin:10px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--egh-ink-3)}

.egh-case ul li{display:flex;align-items:center;gap:5px}

.egh-case ul svg{flex:0 0 auto;color:var(--egh-brand-t)}

/* 「热门」贴角蓝条（与插件矩阵同款） */
.egh-case .hot{position:absolute;top:0;right:0;padding:7px 18px;background:var(--egh-brand);color:#fff;font-size:13px;font-weight:600;letter-spacing:.08em;border-radius:0 0 0 14px;line-height:1.2;z-index:2}

/* 新闻列表 */
.egh-cols{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}

.egh-nlist{display:flex;flex-direction:column;gap:16px}

.egh-ncard{display:flex;gap:18px;align-items:flex-start;padding:18px;transition:border-color .22s,box-shadow .22s,transform .22s}

.egh-ncard:hover{border-color:var(--egh-brand);box-shadow:var(--egh-sh-2);transform:translateY(-3px)}

.egh-ncard .date{flex:0 0 62px;text-align:center;padding:6px 0;border-right:1px solid var(--egh-line)}

.egh-ncard .date b{display:block;font-size:24px;font-weight:600;color:var(--egh-brand-t);line-height:1.1}

.egh-ncard .date span{font-size:13px;color:var(--egh-ink-3)}

.egh-ncard .txt{flex:1 1 auto;min-width:0}

.egh-ncard .txt h3{font-size:16px;font-weight:600;margin-bottom:6px}

.egh-ncard .txt h3 a{color:var(--egh-ink);text-decoration:none}

.egh-ncard:hover .txt h3 a{color:var(--egh-brand-t)}

.egh-ncard .txt p{font-size:14.5px;color:var(--egh-ink-2);line-height:1.65}

.egh-ncard .meta{display:flex;align-items:center;gap:14px;margin-top:10px;font-size:13px;color:var(--egh-ink-3)}

.egh-ncard .meta .egh-badge{margin-bottom:0}

.egh-ncard .pic{flex:0 0 190px;height:118px;border-radius:10px;overflow:hidden;background:#F6F8FC}

.egh-ncard .pic img{width:100%;height:100%;object-fit:cover;display:block}

.egh-ncard .hot{position:absolute;top:0;right:0;padding:6px 14px;background:var(--egh-brand);color:#fff;font-size:12px;font-weight:600;letter-spacing:.08em;border-radius:0 0 0 12px;z-index:2}

/* 侧栏 */
.egh-aside .dcard{padding:18px 20px}

.egh-aside h4{font-size:15px;font-weight:600;color:var(--egh-ink);margin-bottom:10px}

.egh-hotlist{list-style:none;margin:0;padding:0}

.egh-hotlist li{border-bottom:1px dashed var(--egh-line)}

.egh-hotlist li:last-child{border-bottom:0}

.egh-hotlist a{display:block;padding:9px 0;font-size:14.5px;color:var(--egh-ink-2);text-decoration:none;line-height:1.6}

.egh-hotlist a:hover{color:var(--egh-brand-t)}

.egh-aside+.egh-aside{margin-top:16px;display:block}

/* 右栏小卡：淡彩底 + 大图标水印（a0 蓝 / a1 青 / a2 紫），水印放右上避开底部色斑 */
.egh-aside .dcard.a0{background:linear-gradient(165deg,#F3F7FF 0%,#FFFFFF 72%)}

.egh-aside .dcard.a1{background:linear-gradient(165deg,#EAF7F6 0%,#FFFFFF 72%)}

.egh-aside .dcard.a2{background:linear-gradient(165deg,#F2EFFF 0%,#FFFFFF 72%)}

.egh-aside .wm{position:absolute;right:-16px;top:-22px;width:110px;height:110px;color:var(--egh-brand-t);opacity:.07;pointer-events:none}

/* 联系信息卡 */
.egh-cinfo{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.egh-cinfo .ci{padding:22px 20px 20px}

.egh-cinfo .pic{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:14px}

.egh-cinfo .pic svg{width:28px;height:28px}

.egh-cinfo h4{font-size:15px;font-weight:600;color:var(--egh-ink);margin-bottom:6px}

.egh-cinfo .v{font-size:15px;color:var(--egh-ink-2);line-height:1.6}

.egh-cinfo span{display:block;margin-top:8px;font-size:13.5px;color:var(--egh-ink-3)}

/* 留言表单 */
.egh-cform{padding:24px}

.egh-cform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.egh-cform input,.egh-cform textarea{width:100%;border:1px solid var(--egh-line);border-radius:10px;padding:12px 14px;font-size:15px;color:var(--egh-ink);background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit}

.egh-cform input:focus,.egh-cform textarea:focus{border-color:var(--egh-brand);box-shadow:0 0 0 3px var(--egh-brand-l)}

.egh-cform textarea{margin-top:14px;min-height:120px;resize:vertical}

.egh-cform .bot{display:flex;align-items:center;gap:14px;margin-top:16px}

.egh-cform .bot span{font-size:13.5px;color:var(--egh-ink-3)}

/* 详情：正文卡 / 上下篇 / 封面 / 项目参数 */
.egh-art{padding:26px 28px 28px}

.egh-art h1{font-size:clamp(21px,2.6vw,28px);font-weight:600;color:var(--egh-ink);line-height:1.4}

.egh-meta{display:flex;flex-wrap:wrap;gap:18px;margin:12px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--egh-line);font-size:13.5px;color:var(--egh-ink-3)}

.egh-meta span{display:inline-flex;align-items:center;gap:5px}

.egh-artbd h3{font-size:16px;font-weight:600;color:var(--egh-ink);margin:22px 0 8px}

.egh-artbd h3:first-child{margin-top:0}

.egh-artbd p{font-size:15.5px;color:var(--egh-ink-2);line-height:1.85}

.egh-prenxt{display:flex;gap:12px;margin-top:18px}

.egh-prenxt a{flex:1 1 0;padding:14px 16px;background:#fff;border:1px solid var(--egh-line);border-radius:var(--egh-radius);font-size:14.5px;color:var(--egh-ink-2);text-decoration:none;transition:.2s}

.egh-prenxt a:hover{border-color:var(--egh-brand);color:var(--egh-brand-t)}

.egh-cover{height:320px;overflow:hidden}

.egh-cover img{width:100%;height:100%;object-fit:cover;display:block}

.egh-casemeta{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px;padding:20px 22px}

.egh-casemeta span{display:block;font-size:13.5px;color:var(--egh-ink-3);margin-bottom:4px}

.egh-casemeta b{font-size:15px;font-weight:500;color:var(--egh-ink)}

.egh-mapbox{height:auto;overflow:hidden}

.egh-mapbox img{width:100%;height:auto;display:block}

/* 底部 CTA */
.egh-cta{background:linear-gradient(165deg,#F2F6FF 0%,#FFFFFF 70%);text-align:center;border-top:1px solid var(--egh-line)}

.egh-cta h2{font-size:clamp(20px,2.6vw,26px);font-weight:600;color:var(--egh-ink)}

.egh-cta p{margin:10px 0 20px;font-size:15.5px;color:var(--egh-ink-2)}

.egh-cta div{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.egh-cta .egh-btn{padding:0 20px;height:40px}

@container eghpage (max-width:1000px){
  .egh-cases{grid-template-columns:repeat(2,1fr)}
  .egh-cols{grid-template-columns:1fr}
  .egh-cinfo,.egh-casemeta{grid-template-columns:repeat(2,1fr)}
  .egh-split{grid-template-columns:1fr;gap:26px}
}

@container eghpage (max-width:640px){
  .egh-cases{grid-template-columns:1fr}
  .egh-ncard{flex-direction:column}
  .egh-ncard .date{display:flex;align-items:baseline;gap:8px;border-right:0;border-bottom:1px solid var(--egh-line);width:100%;padding:0 0 8px}
  .egh-ncard .pic{flex:none;width:100%}
  .egh-cinfo,.egh-casemeta{grid-template-columns:1fr}
  .egh-cform .row{grid-template-columns:1fr}
  .egh-prenxt{flex-direction:column}
}

.egh-cases{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(14px,1.5vw,20px)}

.egh-cols{grid-template-columns:minmax(0,1fr) clamp(236px,23vw,300px)}

/* ================= 第 93 批：栏目动态化配套 ================= */
/* 徽标文案来自后台「栏目描述1/2/3」，没填就整个藏起来，不留空药丸 */
.egh-badge:empty{display:none}
.egh-drop-pn .cards p:empty{display:none}
/* 大卡 = 循环出来的第一张（原来是写死 class="egh-card big"，循环后没有 big 了） */
.egh-bento>.egh-card:first-child{grid-row:span 2;background:linear-gradient(145deg,#f6f8ff,#fff)}
.egh-bento>.egh-card:first-child .ic svg{width:34px;height:34px}
.egh-bento>.egh-card:not(:first-child) .kind{display:none}
/* 国内/海外双卡：最后一张承担原来 .on 的重点态（循环后没法写死哪张） */
.egh-duo .duo:last-child{flex-grow:1.75;border-color:var(--egh-brand);box-shadow:var(--egh-sh-3)}
.egh-duo .duo:last-child .ic{width:56px;height:56px;background:var(--egh-brand);color:#fff}
.egh-duo .duo:last-child h4{font-size:21px;color:var(--egh-brand-t)}
.egh-duo .duo:last-child .wm{width:130px;height:130px;opacity:.08}
@media (hover:hover){.egh-duo:has(.duo:hover) .duo:last-child:not(:hover){flex-grow:1;border-color:var(--egh-line);box-shadow:none}}
/* 副标题 = 后台栏目的「副标题」字段（[nav:subname] / [2nav:subname]）；没填时整行不占位，避免卡片、区块标题下留空白 */
.egh-card .desc:empty{display:none}
.egh-duo .duo p:empty{display:none}
.egh-head .egh-sub:empty{display:none}

/* EGH-TAGS:1 —— 标签串容器（第 105 批）
   渲染出来的 .egh-badge / li 全部复用母体原有样式，这里只管容器排布。
   原来三个徽标是 inline 紧挨着，这里改成 flex + gap，间隔统一、多了会自动换行。 */
.egh-tags{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.egh-tags .egh-badge{margin-bottom:0}
.egh-tags:empty{display:none}

/* EGH-NOTE:1 —— 板块底部说明句（第 105 批）
   接的是后台「栏目描述3」；没填时整行不占位，不留一段空白。 */
.egh-note:empty{display:none}

/* ★★ 第 109 批 · 接文章后的「可空字段」空态：后台没填就整块消失，不留空皮 */
.egh-mtx .mt .kind:empty{display:none}
.egh-mtx .mt ul:empty{display:none}
.fg ul:empty{display:none}
.egh-ind p:empty{display:none}
.egh-ind .tg:empty{display:none}
.egh-num span:empty{display:none}

/* ★★ 第 112 批（用户 2026-10-16「菜单的行距帮我做点上去，字体间距也加点」）——
   菜单页（抽屉）三处一起加：① 行与行之间留白 6px ② 行内行高 1.65 ③ 字间距 .03em。
   ★ 为什么用【追加】而不是改上面原规则：抽屉那段 CSS 在样式表里是**两份重复区**
     （母本里就有两遍：第 840 行起、第 1350 行起），改一份必漏另一份；
     同权重「后出现者胜」⇒ 追加到文件末尾能一次盖住两份，且重跑 build 不会重复累加（有 MARK）。
   ★ 一级行 52→60（更好点）、二级行 44→48（Apple HIG 44pt 之上再放宽），都在 320 主栏内。 */
.egh-drawer .dw-body>*{margin-bottom:6px}
.egh-drawer .dw-body>a, .egh-drawer .dw-body .egh-drop>.t{line-height:1.65;letter-spacing:.03em}
.egh-drawer .dw-body>a{padding:15px 14px}
.egh-drawer .dw-body .egh-drop>.t{min-height:60px;padding:16px 14px}
.egh-drawer .dw-body .egh-drop>.egh-drop-pn{margin-top:2px}
.egh-drawer .egh-drop-pn .links{gap:4px}
.egh-drawer .egh-drop-pn .links a{min-height:48px;padding:13px 12px;font-size:15px;
  line-height:1.65;letter-spacing:.02em}
/* ★ 一级行现在是「链接 + 开关」两重身份（112 批），给个 pointer 手型，别让人以为是纯文本 */
.egh-drawer .dw-body .egh-drop>.t{cursor:pointer}

/* ★★ 第 107 批 · Safari 滚动修复（用户 2026-10-15「Safari 里怎么滚都不行」）
   根元素上不能挂 overflow-x:clip —— 根元素的 overflow 会传给视口，而 clip 是
   「禁止一切滚动」的语义（Safari 16.4+ 才支持该值，旧版忽略 ⇒ 升级后才突然不能滚）。
   改挂 .egh-page：clip 不创建滚动容器 ⇒ sticky 顶栏不受影响，横向仍裁、视口恢复滚动。*/
.egh-page{overflow-x:clip}


/* ★ 10-17 夜（用户「做一些有点意思的样式」）：业务线 / 子栏目页增强组件 ——
   交付流程 egh-steps / FAQ 折叠 egh-faq / 子线入口卡 egh-subcards / 尾行动带 egh-ctaband */
.egh-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.egh-step{position:relative;background:#fff;border:1px solid var(--egh-line);border-radius:14px;padding:22px 20px 20px;box-shadow:var(--egh-sh-1);transition:transform .2s var(--egh-ease),box-shadow .2s}
@media (hover:hover){.egh-step:hover{transform:translateY(-3px);box-shadow:var(--egh-sh-2)}}
.egh-step .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--egh-brand-l);color:var(--egh-brand);font-weight:700;font-size:15px;margin-bottom:12px}
.egh-step h4{font-size:15.5px;margin-bottom:6px}
.egh-step p{font-size:13.5px;color:var(--egh-ink-2);line-height:1.7}
.egh-step::after{content:"";position:absolute;top:37px;right:-12px;width:6px;height:6px;border-top:1.5px solid var(--egh-line);border-right:1.5px solid var(--egh-line);transform:rotate(45deg)}
.egh-step:last-child::after{display:none}
@media (max-width:900px){.egh-steps{grid-template-columns:1fr 1fr}.egh-step::after{display:none}}
@media (max-width:560px){.egh-steps{grid-template-columns:1fr}}
.egh-faq{max-width:760px;margin:0 auto}
.egh-faq details{background:#fff;border:1px solid var(--egh-line);border-radius:12px;margin-bottom:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.egh-faq details[open]{border-color:#c7d6f5;box-shadow:var(--egh-sh-2)}
.egh-faq summary{list-style:none;cursor:pointer;padding:15px 48px 15px 18px;font-size:15px;font-weight:600;color:var(--egh-ink);position:relative}
.egh-faq summary::-webkit-details-marker{display:none}
.egh-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:19px;color:var(--egh-ink-3);transition:transform .25s var(--egh-ease),color .2s}
.egh-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);color:var(--egh-brand)}
.egh-faq .a{padding:12px 18px 16px;font-size:14px;color:var(--egh-ink-2);line-height:1.8;border-top:1px dashed var(--egh-line)}
.egh-subcards{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:820px;margin:0 auto}
.egh-subcard{position:relative;display:block;background:#fff;border:1px solid var(--egh-line);border-radius:16px;padding:24px 22px;box-shadow:var(--egh-sh-1);transition:transform .2s var(--egh-ease),box-shadow .2s,border-color .2s;overflow:hidden}
.egh-subcard .wm{position:absolute;right:-14px;bottom:-18px;width:110px;height:110px;color:var(--egh-brand-t);opacity:.05;pointer-events:none}
@media (hover:hover){.egh-subcard:hover{transform:translateY(-4px);box-shadow:var(--egh-sh-3);border-color:#c7d6f5}}
.egh-subcard h4{font-size:17px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.egh-subcard h4 .arw{color:var(--egh-brand-t);transition:transform .2s;font-style:normal}
@media (hover:hover){.egh-subcard:hover h4 .arw{transform:translateX(3px)}}
.egh-subcard p{font-size:14px;color:var(--egh-ink-2);line-height:1.7}
.egh-subcard .tags{margin-top:12px}
@media (max-width:760px){.egh-subcards{grid-template-columns:1fr}}
.egh-ctaband{background:linear-gradient(135deg,#2a5cf0,#1F4FD8);border-radius:20px;padding:38px 32px;color:#fff;text-align:center;position:relative;overflow:hidden}
.egh-ctaband::after{content:"";position:absolute;right:-60px;bottom:-70px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.10)}
.egh-ctaband h2{font-size:23px;margin-bottom:8px;color:#fff}
.egh-ctaband p{color:rgba(255,255,255,.82);font-size:14.5px;margin-bottom:18px}
.egh-ctaband .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.egh-ctaband .egh-btn{background:#fff;border-color:#fff;color:var(--egh-brand)}
.egh-ctaband .egh-btn:hover{background:#f0f5ff;border-color:#f0f5ff;color:var(--egh-brand-d)}
.egh-ctaband .egh-btn.ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff}
.egh-ctaband .egh-btn.ghost:hover{background:rgba(255,255,255,.22)}

/* ★ 10-17 午（用户「图做大一点、不要重复、空了给虚位以待占位」）：合作客户 logo 墙 →
   静态网格：每个 logo 只出现一次、格子加大；空位是「虚位以待」虚线占位卡。 */
.egh-logogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.egh-logogrid .lg{height:92px;background:#fff;border:1px solid var(--egh-line);border-radius:16px;display:flex;align-items:center;justify-content:center;padding:16px 22px;box-shadow:var(--egh-sh-1);transition:transform .2s var(--egh-ease),box-shadow .2s,border-color .2s}
@media (hover:hover){.egh-logogrid .lg:hover{transform:translateY(-3px);box-shadow:var(--egh-sh-2);border-color:#c7d6f5}}
.egh-logogrid .lg img{max-width:100%;max-height:52px;object-fit:contain;display:block}
.egh-logogrid .lg-empty{border-style:dashed;background:var(--egh-bg-2);box-shadow:none}
.egh-logogrid .lg-empty span{font-size:13.5px;color:var(--egh-ink-3);letter-spacing:2px}
@media (max-width:900px){.egh-logogrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.egh-logogrid{grid-template-columns:repeat(2,1fr);gap:12px}.egh-logogrid .lg{height:76px;padding:12px 14px}.egh-logogrid .lg img{max-height:42px}}

/* ★ 10-17（用户：头部下载按钮文案缩成「下载」+ 加下载图标 + 鼠标移入/移出文字滚一下） */
.egh-btn-dl .dl-ic{flex:none;display:block}
.egh-btn-dl .dl-txt{display:inline-flex;flex-direction:column;height:1.3em;line-height:1.3em;overflow:hidden;vertical-align:middle}
.egh-btn-dl .dl-txt>span{display:block;transition:transform .26s var(--egh-ease)}
@media (hover:hover){.egh-btn-dl:hover .dl-txt>span{transform:translateY(-100%)}}

/* ★ 10-17（首页 hero 标签改由后台描述2驱动）：标签引擎输出 .egh-badge，在 hero 里沿用原来的灰边药丸样式 */
.egh-hero-tags .egh-badge{align-self:auto;font-size:13.5px;font-weight:400;letter-spacing:0;color:var(--egh-ink-2);background:var(--egh-bg-2);border:1px solid var(--egh-line);border-radius:999px;padding:5px 12px;margin-bottom:0}

/* ★ 10-17（用户：首页大标题再大 50%）：只放大首页 hero，业务线页不变 */
.egh-hero-home h1{font-size:clamp(42px,7.5vw,72px)}
@container eghpage (max-width:768px){.egh-hero-home h1{font-size:clamp(39px,9.9vw,51px)}}

/* ★ 10-17（用户：立即下载再大一些）：首页 hero 行动按钮整体加大一档（一对按钮同步，保持平衡） */
.egh-hero-home .egh-hero-act .egh-btn{height:48px;padding:0 24px;font-size:16px;border-radius:10px}
.egh-hero-home .egh-hero-act .egh-btn-p{font-weight:600}

/* ★ 10-17（用户：hero 加超大 logo 水印，占 1/3、很淡只有形状）：右侧竖中、约 1/3 宽、4.5% 透明度 + 微模糊 */
.egh-hero-home{position:relative;overflow:hidden}
.egh-hero-home .egh-hero-wm{position:absolute;right:1.5%;top:50%;transform:translateY(-50%);width:clamp(240px,32vw,440px);aspect-ratio:1;opacity:.045;filter:blur(1.5px);pointer-events:none;z-index:0}
.egh-hero-home .egh-hero-wm svg{width:100%;height:100%;display:block}
.egh-hero-home>.wrap{position:relative;z-index:1}
@media (max-width:768px){.egh-hero-home .egh-hero-wm{width:60vw;right:-14%;opacity:.035}}

/* ★ 10-17（用户改水印：再往里、下右斜着、占板块一半、随意拓影模糊）—— 覆盖上一条的右侧竖中参数 */
.egh-hero-home .egh-hero-wm{top:auto;right:3%;bottom:-10%;transform:rotate(-22deg);width:clamp(340px,50vw,700px);aspect-ratio:1;opacity:.05;filter:blur(7px)}
@media (max-width:768px){.egh-hero-home .egh-hero-wm{width:82vw;right:-8%;bottom:-16%;opacity:.04;filter:blur(5px);transform:rotate(-18deg)}}

/* ★ 10-17（用户：水印往 logo 方向斜、再淡一些）：旋转对齐 logo 实测倾角 -28°，透明度 .05→.032 */
.egh-hero-home .egh-hero-wm{transform:rotate(-28deg);opacity:.032}
@media (max-width:768px){.egh-hero-home .egh-hero-wm{transform:rotate(-24deg);opacity:.028}}
/* ★ 10-17（用户：白色登录按钮感觉矮一些——实测同高，属浅边框视觉错觉）：加深边框、加发丝阴影托住轮廓 */
.egh-nav .egh-btn-login{border-color:#c9d4e4;box-shadow:0 1px 2px rgba(15,23,42,.05)}

/* ★ 10-17（用户：hero 打开就是满屏，跟完整登录页一样）：hero 高度 = 视口 − 顶栏，内容垂直居中 */
.egh-hero-home{min-height:calc(100vh - 60px);min-height:calc(100dvh - var(--nav-h,60px));display:flex;align-items:center}
.egh-hero-home>.wrap{width:100%}
@media (max-width:768px){.egh-hero-home{min-height:calc(100svh - var(--nav-h,60px))}}

/* ★ 10-17（用户：数字以上的往上、数字不动）：上半组用 transform 上浮，统计卡位置完全不变 */
.egh-hero-home .egh-hero-top{transform:translateY(-40px)}
@media (max-width:768px){.egh-hero-home .egh-hero-top{transform:translateY(-22px)}}

/* ★ 10-17（用户：水印再大 50%）：宽度 50vw→75vw、700→1050 */
.egh-hero-home .egh-hero-wm{width:clamp(510px,75vw,1050px)}
@media (max-width:768px){.egh-hero-home .egh-hero-wm{width:120vw}}

/* ★ 10-17（用户：友情墙改一排循环、两边遮罩淡入淡出）：单排滚动 + 左右边缘 mask 渐隐 */
.egh-logowall{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}

/* ★ 10-17（用户：刷新时标签先隐后现、整块被压下再提起）：标签由 JS 渲染，
   .egh-tags:empty{display:none} 会让它在填充前塌成 0 高 → 居中布局重排。
   给 hero 标签行预留最终高度，空态也保持占位，JS 填充时零位移。 */
.egh-hero-tags{min-height:30px}
.egh-hero-tags.egh-tags:empty{display:flex}

/* ★ 10-17（用户：水印太大→小一些、换个方向）：宽度 75vw→38vw(≤560)、旋转 -28°→+26°（反向） */
.egh-hero-home .egh-hero-wm{width:clamp(320px,38vw,560px);transform:rotate(26deg);right:4%;bottom:-6%}
@media (max-width:768px){.egh-hero-home .egh-hero-wm{width:88vw;transform:rotate(20deg)}}

/* ★ 10-17（用户：水印太小→取中间；大标题再大一点） */
.egh-hero-home .egh-hero-wm{width:clamp(420px,54vw,780px)}
.egh-hero-home h1{font-size:clamp(48px,8.6vw,86px)}
@container eghpage (max-width:768px){
  .egh-hero-home .egh-hero-wm{width:100vw}
  /* ★ 108（用户：盒子里的标题也要缩，且不超一行）：vw 在窄容器里仍按视口算会爆版，改用 cqw */
  .egh-hero-home h1{font-size:clamp(26px,6.0cqw,44px);white-space:nowrap}
}
/* 真·窄视口（手机）保持原来的大小：覆盖上面按容器算的那条 */
@media (max-width:768px){
  .egh-hero-home h1{font-size:clamp(40px,10.2vw,54px);white-space:nowrap}
}

/* ★ 10-17（用户：锚点跳转不准、顶栏盖住目标开头还露出上一板块的行）：给所有锚点目标加滚动偏移，
   跳转后目标板块的顶边正好落在顶栏下方（--nav-h + 4px 缓冲）。 */
/* ★ 10-17（用户：跳转后顶栏下还有一条细横条，别留缝）：偏移=顶栏高+1px 边线，板块直接贴住顶栏 */
section[id],div[id],article[id],h1[id],h2[id],h3[id]{scroll-margin-top:calc(var(--nav-h,60px) + 1px)}

/* ============ ★ 10-17 日/夜双主题（用户：全站黑白两种模式，汉堡菜单太阳↔月亮） ============
   机制：<html data-theme="dark"> 覆盖设计变量 + 逐个白色面换深色；偏好存 localStorage('egh-theme')。
   切换按钮在抽屉（site.js 构建的 #dwTheme，太阳/月亮双 SVG 由 CSS 按主题显隐）。 */
html[data-theme=dark]{
  color-scheme:dark;
  --egh-ink:#E7ECF5;--egh-ink-2:#A9B4C7;--egh-ink-3:#6E798C;
  --egh-bg:#0C111B;--egh-bg-2:#121926;--egh-line:rgba(255,255,255,.12);
  --egh-brand-t:#8FB0FF;--egh-brand-td:#6E93F0;--egh-brand-l:rgba(79,120,255,.16);
  --egh-sh-1:0 1px 2px rgba(0,0,0,.45);
  --egh-sh-2:0 1px 2px rgba(0,0,0,.4),0 6px 12px -3px rgba(0,0,0,.45),0 16px 32px -8px rgba(0,0,0,.5);
  --egh-sh-3:0 2px 4px rgba(0,0,0,.4),0 12px 24px -6px rgba(0,0,0,.5),0 32px 64px -16px rgba(0,0,0,.6);
}
html[data-theme=dark] body{background:var(--egh-bg);color:var(--egh-ink);transition:background-color .3s,color .3s}
html[data-theme=dark] .egh-nav{background:rgba(12,17,27,.62);border-bottom-color:rgba(255,255,255,.08)}
html[data-theme=dark] .egh-hero{background:radial-gradient(1200px 380px at 50% -120px,var(--egh-brand-l),transparent 70%),var(--egh-bg)}
html[data-theme=dark] .egh-burger{background:#141B28;border-color:var(--egh-line)}
html[data-theme=dark] .egh-btn{background:#141B28;color:var(--egh-ink)}
/* 白色面 → 深色面（卡片/步骤/FAQ/价目/统计/表格等内容块统一 #131A26） */
html[data-theme=dark] .egh-card,
html[data-theme=dark] .egh-price,
html[data-theme=dark] .egh-num,
html[data-theme=dark] .egh-ind,
html[data-theme=dark] .egh-step,
html[data-theme=dark] .egh-faq details,
html[data-theme=dark] .egh-duo .duo,
html[data-theme=dark] .egh-mtx .mt,
html[data-theme=dark] .egh-cell,
html[data-theme=dark] .egh-hero-stats .hs,
html[data-theme=dark] .track .lg,
html[data-theme=dark] .egh-logogrid .lg,
html[data-theme=dark] .egh-bento>.egh-card,
html[data-theme=dark] .egh-quote li,
html[data-theme=dark] .egh-subcard,
html[data-theme=dark] .dcard,
html[data-theme=dark] .egh-user-pn,
html[data-theme=dark] .egh-drop-pn,
html[data-theme=dark] .mega-card,
html[data-theme=dark] .egh-rail-pn{background:#131A26;border-color:var(--egh-line)}
html[data-theme=dark] .egh-faq details[open]{border-color:rgba(120,160,255,.35)}
html[data-theme=dark] .egh-logowall{background:linear-gradient(180deg,var(--egh-bg) 0%,var(--egh-bg-2) 50%,var(--egh-bg) 100%)}
html[data-theme=dark] .egh-foot{background:#080D16}
html[data-theme=dark] .egh-tag,
html[data-theme=dark] .egh-hero-tags .egh-badge{background:var(--egh-bg-2);color:var(--egh-ink-2);border-color:var(--egh-line)}
html[data-theme=dark] .egh-step .n{background:var(--egh-brand-l);color:var(--egh-brand-t)}
html[data-theme=dark] .egh-rail-ic{background:#141B28;border-color:var(--egh-line);color:var(--egh-ink-2)}
html[data-theme=dark] .egh-cform input,
html[data-theme=dark] .egh-cform textarea{background:#0F1622;border-color:var(--egh-line);color:var(--egh-ink)}
/* 抽屉（JS 构建） */
html[data-theme=dark] .egh-drawer{background:#0E1520}
html[data-theme=dark] .dw-act{background:#141B28;border-color:var(--egh-line);color:var(--egh-ink-2)}
html[data-theme=dark] .dw-msg{background:#121926;border-color:var(--egh-line)}
html[data-theme=dark] .egh-drawer .egh-drop.on>.t{background:#16202F}
/* 主题切换按钮：太阳/月亮按主题显隐（两种都是 1.25 细线） */
.dw-theme .ic-moon{display:none}
html[data-theme=dark] .dw-theme .ic-sun{display:none}
html[data-theme=dark] .dw-theme .ic-moon{display:inline-block}

/* 暗色补丁：rail 胶囊容器本身是白底（图标块是透明的）——修正 */
html[data-theme=dark] .egh-rail-ic{background:none;border:0;color:var(--egh-ink-2)}
html[data-theme=dark] .egh-rail{background:#141B28;border-color:var(--egh-line)}
@media (hover:hover){html[data-theme=dark] .egh-rail-ic:hover{background:var(--egh-brand-l);color:var(--egh-brand-t)}}
html[data-theme=dark] .egh-rail-ic.on{background:var(--egh-brand-l);color:var(--egh-brand-t)}

/* 暗色补丁 2：扫描出的残余白面（插件大图预览/引用框/抽屉图标块与头像/信息小图块） */
html[data-theme=dark] .egh-mtx .mt .shot{background:linear-gradient(160deg,#0F1622 0%,#0B111C 100%);border-color:var(--egh-line);box-shadow:0 8px 22px rgba(0,0,0,.5)}
html[data-theme=dark] .egh-quote{background:#121926;border-color:var(--egh-line)}
html[data-theme=dark] .dw-ico,html[data-theme=dark] .dw-cv{background:#141B28;border-color:var(--egh-line);color:var(--egh-ink-2)}
html[data-theme=dark] .dw-ava{background:#0F1622;border-color:var(--egh-line);color:var(--egh-brand-t)}
html[data-theme=dark] .ci{background:#0F1622}

/* ★ 10-17（用户：H1 无论如何只能一行，随屏幕变小字号跟着缩）：nowrap + 按视口宽度定字号
   —— 文案 ≈10.7em 宽，7.8vw 保证最窄 320px 也放得下；上限仍是 86px。 */
.egh-hero-home h1{white-space:nowrap;font-size:clamp(15px,7.8vw,86px);letter-spacing:-.02em}

/* ★ 10-17（用户：下载按钮做大；看看服务不要按钮、改成文字链放按钮下面；标签行距拉开） */
.egh-hero-home .egh-hero-act{flex-direction:column;align-items:flex-start;gap:14px}
.egh-hero-home .egh-hero-act .egh-btn-p{height:58px;padding:0 34px;font-size:18px;border-radius:12px}
.egh-hero-svc{display:inline-block;font-size:15px;color:var(--egh-brand-t);padding:2px 2px;width:max-content;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
@media (hover:hover){.egh-hero-svc:hover{color:var(--egh-brand);border-bottom-color:currentColor}}
.egh-hero-tags{gap:14px 10px;margin-top:42px}
.egh-hero-tags .egh-badge{padding:6px 13px}

/* ★ 10-17（用户：文字链改灰字不要箭头；内容来自栏目描述2） */
.egh-hero-svc{display:inline-block;font-size:15px;color:var(--egh-ink-3);padding:2px 2px;width:max-content;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
/* ★ 10-17（用户：鼠标指过去不要横杠）：hover 只变色、不加下划线 */
@media (hover:hover){.egh-hero-svc:hover{color:var(--egh-ink-2);border-bottom-color:transparent;text-decoration:none}}

/* ============ ★ H1 开场（用户定稿 v3：入场逐张/逐字更不同步 + 左滑完全同步 + 前段放慢） ============ */
.egh-go-h1{position:relative}
.egh-go-full{display:inline-block}
.go-stage{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2}
.go-stage .s-logo,.go-stage .s-e,.go-stage .s-g,.go-stage .s-o,.go-stage .s-h,.go-stage .s-u,.go-stage .s-i,.go-stage .s-t{position:absolute;display:block;opacity:0;will-change:transform,opacity}
.go-stage .s-e,.go-stage .s-g,.go-stage .s-o,.go-stage .s-h,.go-stage .s-u,.go-stage .s-i,.go-stage .s-t{transition:transform .8s cubic-bezier(.25,.8,.35,1),opacity .5s ease}
.s-logo{transition:transform .8s cubic-bezier(.25,.8,.35,1),opacity .5s ease;perspective:800px}
.s-logo .logo3{display:block;width:100%;height:100%;overflow:visible}
.logo3 .cd{opacity:0;transform:translateY(-46px);transition:transform .68s cubic-bezier(.2,.92,.28,1.03),opacity .42s ease}
.p1 .logo3 .cd{opacity:1;transform:translateY(0)}
.p1 .logo3 .c2{transition-delay:.30s}
.p1 .logo3 .c3{transition-delay:.62s}
/* 初始：两卡斜置+折叠藏两侧；字母待命 */
.p0 .s-logo{opacity:1}
.s-e{transform:translateX(-3.2em)}
.s-h,.s-u,.s-i,.s-t{transform:translateX(3.2em)}
.s-g{transform:translate(-1.8em,-.6em) rotate(-26deg)}
.s-o{transform:translate(1.8em,.6em) rotate(26deg)}
/* ① logo 两卡一张一张折叠飞入（慢） */
/* ② 字母逐个滑入（前段放慢） */
.p3 .s-e{opacity:1;transform:translateX(0);transition-duration:.95s}
.p4 .s-h{opacity:1;transform:translateX(0);transition-duration:.7s}
.p5 .s-u{opacity:1;transform:translateX(0);transition-duration:.7s}
.p6 .s-i{opacity:1;transform:translateX(0);transition-duration:.7s}
/* ③ 换位：logo 与 E 交换；HUI 同时贴到 E 后面（不留空） */
.p7 .s-logo{transform:translateX(var(--swap,0))}
.p7 .s-e{transform:translateX(var(--shift,0)) translateY(-.02em);transition-delay:0s}
.p7 .s-h,.p7 .s-u,.p7 .s-i{transform:translateX(var(--shiftA,0));transition-delay:0s}
/* ④ G 斜着飞入→把 HUI 挤开一个 G 宽；O 再飞入→再挤开一个 O 宽；被挤时错峰 + 微微缩小 */
.p8 .s-g{opacity:1;transform:translate(0,0) rotate(0);transition-duration:.85s}
.p8 .s-h{transform:translateX(calc(var(--shiftA,0) + var(--shiftG,0))) scale(.94);transition-delay:0s}
.p8 .s-u{transform:translateX(calc(var(--shiftA,0) + var(--shiftG,0))) scale(.94);transition-delay:.05s}
.p8 .s-i{transform:translateX(calc(var(--shiftA,0) + var(--shiftG,0))) scale(.94);transition-delay:.1s}
.p9 .s-o{opacity:1;transform:translate(0,0) rotate(0);transition-duration:.85s}
.p9 .s-e{transform:translateX(var(--shift,0)) translateY(0)}
.p9 .s-logo{transform:translateX(var(--swap,0))}
.p9 .s-h{transform:translateX(calc(var(--shiftA,0) + var(--shiftG,0) + var(--shiftO,0))) scale(1);transition-delay:0s}
.p9 .s-u{transform:translateX(calc(var(--shiftA,0) + var(--shiftG,0) + var(--shiftO,0))) scale(1);transition-delay:.05s}
.p9 .s-i{transform:translateX(calc(var(--shiftA,0) + var(--shiftG,0) + var(--shiftO,0))) scale(1);transition-delay:.1s}
/* ⑤ 整体左滑：EGOHUI 完全同步（零延迟零错峰，不散架）；logo 折叠渐隐；标语逐字滑入 */
.p11 .s-logo{transform:translateX(var(--exit,0));opacity:0;transition:transform .85s cubic-bezier(.25,.8,.35,1),opacity .85s ease}
/* ④-B GO 落位后微调找正：整组向左收 ~3px 找正位置（GO 刚插入整体稍宽），停留一会再退场 */
.p10 .s-e{transform:translateX(calc(var(--shift,0) - .035em)) translateY(0)}
.p10 .s-g{transform:translate(-.035em,0) rotate(0)}
.p10 .s-o{transform:translate(-.035em,0) rotate(0)}
.p10 .s-h{transform:translateX(calc(var(--shiftA,0) + var(--shiftG,0) + var(--shiftO,0) - .035em)) scale(1)}
.p10 .s-u{transform:translateX(calc(var(--shiftA,0) + var(--shiftG,0) + var(--shiftO,0) - .035em)) scale(1)}
.p10 .s-i{transform:translateX(calc(var(--shiftA,0) + var(--shiftG,0) + var(--shiftO,0) - .035em)) scale(1)}
.p10 .s-logo{transform:translateX(calc(var(--swap,0) - .035em))}

/* ⑤ 退场：logo 领头左滑渐隐；EGOHUI 不像刚体一起动——一个字母跟着一个字母归位（E→G→O→H→U→I），
      跟标语一样"跟着"；标语随后逐字滑入 */
.p11 .s-e{transform:translateX(0) translateY(0) scale(1);transition-delay:0s;transition-duration:.75s}
.p11 .s-g{transform:translateX(var(--gBack,0)) translateY(0);transition-delay:.07s;transition-duration:.75s}
.p11 .s-o{transform:translateX(var(--oBack,0)) translateY(0);transition-delay:.14s;transition-duration:.75s}
.p11 .s-h{transform:translateX(0) translateY(0) scale(1);transition-delay:.21s;transition-duration:.75s}
.p11 .s-u{transform:translateX(0) translateY(0) scale(1);transition-delay:.28s;transition-duration:.75s}
.p11 .s-i{transform:translateX(0) translateY(0) scale(1);transition-delay:.35s;transition-duration:.75s}
.p11 .s-t{opacity:1;transform:translateX(0);transition-delay:calc(var(--i) * 75ms + .7s)}  68%{opacity:1;transform:translateY(-50%) scale(1.12)}
  74%{transform:translateY(-50%) scale(1)}
  86%{opacity:1;transform:translateY(-50%) scale(1)}
  95%,100%{opacity:0;transform:translateY(-50%) scale(.92)}
}