:root{
  --ink:#0b0f14; --text:#fff; --muted:rgba(255,255,255,.7);
  --border:rgba(255,255,255,.12);
  --nav-h:96px; --brand-w:180px;

  --logo-box-h:220px; --logo-max-w:520px;

  --nav-area-top:58%;
  --nav-area-top-carousel:18%;
  --nav-bottom-gap:32px;
  --menu-w-fixed:80%;
  --menu-gap:18px;
  --menu-gap-min:6px;
  --nav-item-min:44px;
  --nav-single-h:64px;

  --mini-safe:88px; --vfade-bottom:var(--mini-safe);
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark}
body{margin:0;background:var(--ink);color:var(--text);
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Noto Sans CJK SC","Microsoft Yahei",Arial,sans-serif}
a{color:inherit;text-decoration:none}

/* header */
.site-header{position:sticky;top:0;z-index:100;height:var(--nav-h);
  background:rgba(0,0,0,.35);backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--border);display:flex;align-items:center}
.wrap{max-width:1600px;margin:0 auto;padding:0 16px;width:100%}
.header-row{display:flex;align-items:center;gap:16px}
.site-brand{display:flex;align-items:center;width:var(--brand-w);height:calc(var(--nav-h) - 16px);padding:6px 0}
.site-brand-img{max-height:100%;max-width:100%;object-fit:contain;opacity:.95}

/* panels */
.panels-section{position:relative;padding:8px 0 16px;display:flex;flex-direction:column;align-items:center}
.track{display:flex;gap:12px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;padding:0 6vw;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{height:10px}
.track::-webkit-scrollbar-thumb{background:#2a2f36;border-radius:8px}

.panel{position:relative;isolation:isolate;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border:1px solid var(--border);border-radius:14px;min-width:88vw;scroll-snap-align:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.03);overflow:hidden;outline:0}
.panel:focus-visible{box-shadow:0 0 0 2px rgba(40,216,199,.6)}

/* backgrounds */
.panel-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;will-change:opacity}
.panel-bg.base{opacity:0;transition:opacity .36s ease .08s;
  /* 介绍卡：底部 100% 黑 -> 中部 透明 */
  background-image:linear-gradient(
    to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) var(--vfade-bottom),
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,0) 100%
  ), var(--bg, none)}
.panel-bg.alt,
.panel-bg.alt2{opacity:0;transition:opacity .28s ease;
  background-image:linear-gradient(
    to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) var(--vfade-bottom),
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,0) 100%
  ), var(--bg2, none)}

/* content + logos */
.panel-content{position:relative;z-index:1;min-height:72vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 16px 32px;text-align:center}
.logo-box{height:var(--logo-box-h);width:min(90%,var(--logo-max-w));display:flex;align-items:center;justify-content:center;margin:8px auto 12px}
.logo{max-width:100%;max-height:100%;transform:translateY(var(--logo-shift,0)) scale(calc(var(--logo-scale,1) * var(--logo-hover-scale,1)));
  transform-origin:center center;filter:blur(var(--logo-blur,0px));opacity:var(--logo-opacity,1);
  transition:transform .36s ease,filter .36s ease,opacity .28s ease}
.logo-mini-wrap{position:absolute;left:50%;bottom:var(--mini-offsetY,18px);transform:translateX(-50%) scale(var(--mini-scale,1));
  transform-origin:center bottom;opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:3}
.logo-mini{display:block;width:var(--mini-width,120px);height:auto}

/* intro menu */
.menu.glass-nav{
  position:absolute;left:0;right:0;
  top:var(--nav-area-top);
  bottom:calc(var(--mini-safe) + var(--nav-bottom-gap));
  display:grid;grid-auto-flow:row;grid-auto-rows:var(--nav-item-h,1fr);
  row-gap:var(--menu-gap-current,var(--menu-gap));
  justify-items:center;align-content:var(--menu-align,stretch);
  overflow:hidden;padding:0;pointer-events:auto;opacity:0;transition:opacity .25s ease}
.menu.glass-nav.is-single{grid-auto-rows:var(--nav-single-h);row-gap:0;align-content:center}
.menu.glass-nav > .menu-item{
  width:var(--menu-w-fixed);min-height:var(--nav-item-min);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.10);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  color:#e8ecef;font-weight:600;letter-spacing:.02em;transition:background .18s ease,transform .18s ease}
.menu.glass-nav > .menu-item:hover,.menu.glass-nav > .menu-item:focus-visible{background:rgba(255,255,255,.16);transform:translateY(-1px);outline:none}
.menu.glass-nav > .menu-item a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0 18px;text-align:center}

/* show-on-hover for intro */
@media(hover:hover){
  .panel:hover .menu.glass-nav,.panel:focus-within .menu.glass-nav{opacity:1}
  .panel:hover .logo,.panel:focus-within .logo{--logo-hover-scale:1.12;--logo-blur:8px;--logo-opacity:0}
  .panel:hover .panel-bg.base,.panel:focus-within .panel-bg.base{opacity:1}
  .panel:hover .logo-mini-wrap,.panel:focus-within .logo-mini-wrap{opacity:1}
}
@media(hover:none){.menu.glass-nav{opacity:1}.panel-bg.base{opacity:1}.logo-mini-wrap{opacity:1}}

/* carousel */
.panels-section.is-carousel .track{display:flex;gap:0;padding-left:15vw;padding-right:15vw;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;perspective:1000px}
.panels-section.is-carousel .panel{min-width:70vw;width:70vw;scroll-snap-align:center;transition:transform .35s ease,opacity .25s ease,filter .25s ease}
.panels-section.is-carousel .panel.is-active{transform:rotateY(0) scale(1);opacity:1;z-index:2}
.panels-section.is-carousel .panel.is-prev{transform:translateX(-6%) rotateY(8deg) scale(.94);opacity:.9;z-index:1}
.panels-section.is-carousel .panel.is-next{transform:translateX(6%) rotateY(-8deg) scale(.94);opacity:.9;z-index:1}
.panels-section.is-carousel .panel:not(.is-active):not(.is-prev):not(.is-next){opacity:.6;filter:saturate(.9)}
.panels-section.is-carousel .menu.glass-nav{top:var(--nav-area-top-carousel)}
.panels-section.is-carousel .controls{display:block !important;position:absolute;inset:0;pointer-events:none}
.panels-section.is-carousel .ctrl{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;height:44px;width:44px;border-radius:50%;
  border:1px solid var(--border);background:rgba(0,0,0,.45);backdrop-filter:blur(6px);display:grid;place-items:center;opacity:.95}
.panels-section.is-carousel #prevBtn{left:24px}
.panels-section.is-carousel #nextBtn{right:24px}
.panels-section.is-carousel .ctrl svg{width:20px;height:20px;fill:#fff}

/* responsive grid (desktop) */
@media(min-width:1440px){
  .track{--gap:18px;--pad:16px;--cardW:calc((100vw - 2*var(--pad) - 4*var(--gap))/7);
    display:grid;grid-template-columns:repeat(5,var(--cardW));gap:var(--gap);
    padding-left:calc(var(--pad) + var(--cardW));padding-right:calc(var(--pad) + var(--cardW));
    max-width:100vw;margin:0 auto;overflow:hidden}
  .panel{min-width:0}
  .controls,.pager{display:none}
}
@media (min-width:1200px) and (max-width:1439px){
  .track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;overflow:visible;padding:0 16px;max-width:1300px;margin:0 auto}
  .panel{min-width:0;} /* ← 新增：覆盖 88vw，避免堆叠 */
}

@media (min-width:960px) and (max-width:1199px){
  .track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;overflow:visible;padding:0 16px;max-width:1200px;margin:0 auto}
  .panel{min-width:0;} /* ← 同理补上 */
}
/* 只要是网格模式，就确保 panel 能被网格收缩 */
.track.is-grid .panel{ min-width:0; }

/* stage mode */
.stage-scrim{position:absolute;inset:0;z-index:60;display:none;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.stage-scrim.is-on{display:block}
.panel-ghost{border:1px solid transparent;border-radius:14px}
.panel .stage-content{display:none}

.panel.is-stage{position:absolute !important; z-index:70;
  will-change:left,top,width,height,border-radius,opacity,transform;
  transition:left .38s ease, top .38s ease, width .38s ease, height .38s ease, border-radius .38s ease;
  overflow:hidden}
.panel.is-stage .logo-box{opacity:0;transition:opacity .22s ease}
.panel.is-stage .logo-mini-wrap{opacity:0;pointer-events:none}
.panel.is-stage .panel-bg.base{opacity:1 !important}

/* 舞台卡导航：底部横排，毛玻璃，无边框 */
.panel.is-stage .menu.glass-nav{
  position:absolute;left:24px;right:24px;bottom:24px;top:auto;
  height:56px;display:flex;flex-direction:row;gap:12px;align-items:stretch;justify-content:center;
  overflow:visible;opacity:0;transform:translateY(10px);
  transition:opacity .28s ease .14s, transform .28s ease .14s
}
.panel.is-stage.is-ready .menu.glass-nav{opacity:1;transform:none}
.panel.is-stage .menu.glass-nav > .menu-item{width:auto;min-width:120px;height:56px;min-height:56px;padding:0 6px}
.panel.is-stage .menu.glass-nav > .menu-item a{padding:0 16px}

/* stage content area */
.panel.is-stage .stage-content{
  position:absolute;left:24px;right:24px;top:24px;bottom:calc(24px + 56px + 16px);
  overflow:auto;color:#e9edf1;opacity:0;transform:translateY(8px);
  transition:opacity .28s ease .14s, transform .28s ease .14s;display:block}
.panel.is-stage.is-ready .stage-content{opacity:1;transform:none}
.panel.is-stage .stage-content section{display:none;max-width:920px}
.panel.is-stage .stage-content section.is-active{display:block}
.panel.is-stage h2{margin:0 0 10px 0;font-size:22px;letter-spacing:.03em}
.panel.is-stage p{margin:8px 0 0 0;line-height:1.6;color:#cfd5dc}

/* back button */
.panel.is-stage .stage-back{position:absolute;top:10px;right:10px;z-index:4;height:40px;width:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.4);color:#fff;display:grid;place-items:center;cursor:pointer}
.panel.is-stage .stage-back::before{content:"←";font-size:18px;line-height:1;transform:translateY(-1px)}

/* footer */
.site-footer{border-top:1px solid var(--border);margin-top:20px}
.site-footer .small{font-size:12px;color:var(--muted);padding:18px 16px}

/* first-load entrance */
@keyframes slideFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes logoPop{from{opacity:0;transform:translateY(var(--logo-shift,0)) scale(1.16)}to{opacity:1;transform:translateY(var(--logo-shift,0)) scale(var(--logo-scale,1))}}
.panels-section.enter:not(.is-carousel) .panel{opacity:0}
.panels-section.enter:not(.is-carousel) .panel:nth-child(3){animation:slideFadeUp .5s ease-out .00s forwards}
.panels-section.enter:not(.is-carousel) .panel:nth-child(2),
.panels-section.enter:not(.is-carousel) .panel:nth-child(4){animation:slideFadeUp .5s ease-out .08s forwards}
.panels-section.enter:not(.is-carousel) .panel:nth-child(1),
.panels-section.enter:not(.is-carousel) .panel:nth-child(5){animation:slideFadeUp .5s ease-out .16s forwards}
.panels-section.enter:not(.is-carousel) .panel .logo{opacity:0}
.panels-section.enter:not(.is-carousel) .panel:nth-child(3) .logo{animation:logoPop .6s ease-out .12s forwards}
.panels-section.enter:not(.is-carousel) .panel:nth-child(2) .logo,
.panels-section.enter:not(.is-carousel) .panel:nth-child(4) .logo{animation:logoPop .6s ease-out .18s forwards}
.panels-section.enter:not(.is-carousel) .panel:nth-child(1) .logo,
.panels-section.enter:not(.is-carousel) .panel:nth-child(5) .logo{animation:logoPop .6s ease-out .24s forwards}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important;animation-iteration-count:1 !important}
}
/* 第二层淡入层，供双缓冲交叉淡入 */
.panel-bg.alt2{
  position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .32s ease;
  background-size:cover;background-position:center;
  background-image:
    linear-gradient(to top,rgba(0,0,0,1) 0,
      rgba(0,0,0,1) calc(var(--vfade-bottom) - 8px),
      rgba(0,0,0,.75) calc(var(--vfade-bottom) + 24px),
      rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 75%),
    var(--bg3, none);
}

/* 默认隐藏舞台容器，避免关闭后“Coming soon”残留 */
.stage-content{display:none}
.panel.is-stage .stage-content{display:block}

/* 首次进入的面板入场动画（3号卡先，随后2/4，再1/5） */
body.is-intro .panel{opacity:0;transform:translateY(14px) scale(.985)}
.panel.intro-in{animation:panelIntro .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes panelIntro{to{opacity:1;transform:none}}
/* 防止切图时看到默认底图；舞台页由 alt/alt2 提供渐变 */
.panel.is-stage .panel-bg.base{opacity:0 !important}

/* 让两层淡入更稳定 */
.panel-bg.alt,.panel-bg.alt2{pointer-events:none;will-change:opacity}

/* 第二层（交叉淡入背层） */
.panel-bg.alt2{
  position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .32s ease;
  background-size:cover;background-position:center;
  background-image:
    linear-gradient(to top,rgba(0,0,0,1) 0,
      rgba(0,0,0,1) calc(var(--vfade-bottom) - 8px),
      rgba(0,0,0,.75) calc(var(--vfade-bottom) + 24px),
      rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 75%),
    var(--bg3, none);
}

/* 首次进入入场动画（3→2/4→1/5） */
body.is-intro .panel{opacity:0;transform:translateY(14px) scale(.985)}
.panel.intro-in{animation:panelIntro .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes panelIntro{to{opacity:1;transform:none}}
/* ===== 舞台卡：一级导航定位到中间 2–4/5 ===== */
.panel.is-stage .menu.glass-nav.as-mid-3of5{
  /* 覆盖默认 24px 边距，拉到整卡 5 等分中的中间三份 */
  left:20%;
  right:20%;
  /* 让每个菜单项等宽，不受字数影响 */
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  justify-items:stretch;
}

/* ===== 舞台卡：二级导航（顶部中间 1/3 宽） ===== */
.panel.is-stage .stage-subnav.as-top-1of3{
  position:absolute;
  top:18px;
  left:33.333%;
  right:33.333%;
  height:48px;
  z-index:5;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:max(120px,1fr);
  align-items:center;
  justify-items:stretch;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease;
}
.panel.is-stage.is-ready .stage-subnav.as-top-1of3{
  opacity:1;
  transform:none;
}
/* 二级项视觉与一级一致（复用毛玻璃/无边框） */
.panel.is-stage .stage-subnav .sub-item{
  border-radius:10px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  color:#e8ecef;
  font-weight:600;
  letter-spacing:.02em;
  padding:0 16px;
  transition:background .18s ease, transform .18s ease;
}
.panel.is-stage .stage-subnav .sub-item:hover,
.panel.is-stage .stage-subnav .sub-item:focus-visible{
  background:rgba(255,255,255,.16);
  transform:translateY(-1px);
  outline:none;
}

/* ===== 舞台卡：暗幕可点击（无需改现有，保证能点到） ===== */
.stage-scrim{ cursor:pointer; }

/* ===== 新增断点：≥720px 即启用网格模式（两列），与原 960+ 断点叠加 ===== */
@media (min-width:720px) and (max-width:959px){
  .track{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:18px;
    overflow:visible;
    padding:0 16px;
    max-width:1200px;
    margin:0 auto;
  }
  .panel{ min-width:0; }
  .controls,.pager{ display:none; }
}
/* === stage-subnav 居中三等分区域 + 等分按钮（末尾增量，不改你现有规则） === */

/* 让二级导航容器位于舞台卡水平三等分的“正中 1/3”区间 */
.panel.is-stage .stage-subnav{
  /* 覆盖之前的 left/right 数值：固定在中间三分之一 */
  left: 33.333%;
  right: 33.333%;
  /* 使用网格把子项按数量均匀分布到容器宽度内 */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;   /* 每个子项等宽、与数量挂钩 */
  justify-items: stretch;
  align-items: stretch;
  /* 保留你原有的高度/过渡/毛玻璃背景等视觉设置（不覆盖） */
}

/* 二级导航按钮：宽度不受文本字数影响，等宽分配；超出省略 */
.panel.is-stage .stage-subnav .sub-item{
  min-width: 0;                 /* 允许等分压缩 */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;      /* 文本过长用省略号 */
}

/* 可选：在超窄屏时稍微放宽中段宽度（不影响大屏）
   如不需要自适应可删掉这段 */
@media (max-width: 780px){
  .panel.is-stage .stage-subnav{
    left: 25%;
    right: 25%;
  }
}
/* === 二级导航：几何居中到舞台卡中间 1/3 宽度（等分按钮，文本不撑宽） === */
.panel.is-stage .stage-subnav{
  position:absolute;           /* 保持你的定位模型 */
  top:18px;                    /* 你原来的顶部位置 */
  left:50%;                    /* 几何中心点 */
  right:auto;
  width:33.333%;               /* 中间 1/3 宽度 */
  transform:translate(-50%, -6px);     /* 继续保留你原有的 Y 方向入场偏移 */
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;       /* 按数量等分，按钮等宽 */
  justify-items:stretch;
  align-items:stretch;
  /* 其余视觉（毛玻璃、透明度/过渡）沿用你已有定义，不重复覆盖 */
}

/* 就绪态把 Y 偏移收回，同时保持 X 方向的 -50% 居中 */
.panel.is-stage.is-ready .stage-subnav{
  transform:translate(-50%, 0);
}

/* 子项文本溢出省略，不撑破等分 */
.panel.is-stage .stage-subnav .sub-item{
  min-width:0;                 /* grid 等分允许压缩 */
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* （可选）在窄屏稍放宽中段，以免和右上角返回键产生视觉拥挤 */
@media (max-width: 780px){
  .panel.is-stage .stage-subnav{
    width:40%;
  }
}
/* ===== 二级导航：强制居中到舞台卡中间 1/3 宽度，按钮等分且不受字数影响 ===== */
.panel.is-stage .stage-subnav{
  position:absolute !important;
  top:18px !important;

  /* 几何居中到“中间 1/3” */
  left:50% !important;
  right:auto !important;
  width:33.333% !important;
  transform:translate(-50%, -6px) !important;

  /* 等分布局：用 flex + flex:1 实现，不受文字长短影响 */
  display:flex !important;
  gap:12px !important;
  align-items:stretch !important;
  justify-content:stretch !important;

  /* 保持你原有的视觉（透明/毛玻璃/过渡）—不在此覆盖 */
}

.panel.is-stage.is-ready .stage-subnav{
  /* 进入就绪态时仅收起 Y 偏移，保留 X 方向的 -50% 居中 */
  transform:translate(-50%, 0) !important;
}

/* 子项等宽、文本不撑破 */
.panel.is-stage .stage-subnav .sub-item{
  flex:1 1 0 !important;
  min-width:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* 可选：窄屏时稍放宽中段，避免与右上角返回键显得拥挤 */
@media (max-width: 780px){
  .panel.is-stage .stage-subnav{
    width:40% !important;
  }
}
/* === Frosted glass overlay for stage mode (append-only) === */
.panel-frost{
  position:absolute;
  inset:0;
  z-index:0; /* 背景(base/alt/alt2)同层；靠 DOM 顺序盖在它们之上，仍在内容(.panel-content,z-index:1)之下 */
  background:rgba(8,12,16,.34);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  opacity:0;
  transition: opacity .24s ease;
  pointer-events:none; /* 不挡点击/悬停 */
}

/* 仅在舞台模式显示毛玻璃 */
.panel.is-stage .panel-frost{ opacity:1; }

/* 降级：不支持 backdrop-filter 的环境 */
@supports not (backdrop-filter: blur(10px)){
  .panel.is-stage .panel-frost{ background:rgba(8,12,16,.55); }
}
/* === 单按钮位置与可点性（舞台底部导航上方、居中） === */
.panel.is-stage .frost-toggle{
  position:absolute;
  left:50%; transform:translateX(-50%);
  /* 24(内边距) + 56(底部一级导航高度) + 48(再抬高避免刮到导航，可自行调大/调小) */
  bottom:calc(env(safe-area-inset-bottom,0px) + 24px + 56px + 48px);
  z-index:120;
  height:36px; padding:0 16px; border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px) saturate(120%);
  -webkit-backdrop-filter:blur(6px) saturate(120%);
  color:#e9eef3; font-weight:600; letter-spacing:.02em; cursor:pointer;
}
.panel.is-stage .frost-toggle:focus-visible{
  outline:none; box-shadow:0 0 0 2px rgba(40,216,199,.5);
}
/* 退出舞台就隐藏，防任何“小横条/小残留” */
.panel:not(.is-stage) .frost-toggle{
  display:none !important; opacity:0 !important; pointer-events:none !important;
}

/* === 强制覆盖：默认你当前是“舞台有毛玻璃” ===
   点击“显示内容”时给 panel 写 data-frost="off"，用更高优先级 + !important 把毛玻璃关掉 */
.panel.is-stage[data-frost="off"] .panel-frost{ opacity:0 !important; }
/* 毛玻璃关闭=展示纯背景时，同时隐藏舞台内容区域 */
.panel.is-stage[data-frost="off"] .stage-content{
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(6px);        /* 小幅退场，更自然 */
  transition:opacity .18s ease, transform .18s ease;
}
/* === Global: Stage center patch for ALL panels === */

/* 让每个舞台页 <section> 能占满舞台区域（否则内部容器无法垂直居中） */
.panel.is-stage .stage-content > .panel-pages > section{
  max-width:none !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:none;                 /* 默认隐藏 */
}

/* 仍按 is-active 控制显示（提高优先级，避免被旧规则覆盖） */
.panel.is-stage .stage-content > .panel-pages > section.is-active{
  display:block !important;
}

/* 通用“整体居中”工具类：可选。即使不用它，以上补丁也会让你现有容器真正居中。 */
.stage-center{
  min-height:100%;
  display:grid;
  place-content:center;         /* 水平 + 垂直 */
  padding:0 clamp(16px, 6vw, 64px);
}

/* 常见内部容器的水平居中兜底（不改变你的布局比例） */
.panel.is-stage .stage-content .two-col,
.panel.is-stage .stage-content .narrow,
.panel.is-stage .stage-content .centered{
  margin:0 auto;
}
/* === Global: Stage perfect centering + content image clamp === */
:root{
  /* 你可以按需微调这几个上限 */
  --stage-pad: clamp(16px, 6vw, 64px);
  --stage-img-max-w: 560px;   /* 正文图的最大像素宽度上限 */
  --stage-img-max-vw: 46vw;   /* 正文图相对视口的宽度上限 */
  --stage-img-max-vh: 58vh;   /* 正文图相对视口的高度上限 */
}

/* 让 panel-pages / section 填满舞台区域（不影响介绍模式） */
.panel.is-stage .stage-content > .panel-pages{
  height:100% !important;
}
.panel.is-stage .stage-content > .panel-pages > section{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:none;                         /* 仍由 is-active 控制显示 */
}

/* 核心：舞台页上下左右“整体居中”（对每个 is-active 的 section 生效） */
.panel.is-stage .stage-content > .panel-pages > section.is-active{
  display:flex !important;
  align-items:center !important;        /* 垂直居中 */
  justify-content:center !important;    /* 水平居中 */
  padding:var(--stage-pad) !important;  /* 舞台内统一留白 */
}

/* 避免你在第一层容器上写的 margin-top 之类把中心推偏 */
.panel.is-stage .stage-content > .panel-pages > section.is-active > *{
  margin:0 !important;
  max-width:min(1120px, 92vw);          /* 保持你现在两栏/单栏的宽度策略 */
  width:100%;
}

/* —— 正文图片大小限制（不影响背景/Logo） —— */
/* 只限定舞台内容里的图片，防溢出、保持居中 */
.panel.is-stage .stage-content > .panel-pages > section.is-active img{
  max-width:min(var(--stage-img-max-w), var(--stage-img-max-vw));
  max-height:var(--stage-img-max-vh);
  height:auto;
  object-fit:contain;
}

/* 若某个舞台页需要取消居中，可给该 section 加 .no-center */
.panel.is-stage .stage-content > .panel-pages > section.no-center{
  display:block !important;
}
/* —— 可选图片双列工具：没有图片=单列居中；有图片=左右双列仍居中 —— */
.stage-2col{
  display:grid;
  gap:28px;
  align-items:center;         /* 垂直对齐 */
  justify-content:center;     /* 让栅格轨道整体水平居中 */
  grid-template-columns:minmax(320px,560px);  /* 默认单列（只有文案时） */
}
.stage-2col:has(.media){
  grid-template-columns:minmax(320px,560px) 1fr; /* 出现图片后切到两列 */
}
.stage-2col .copy{ max-width:560px; }            /* 文案列宽度约束（与上面一致） */
.stage-2col .media{ display:flex; justify-content:center; }

/* 小屏时即使有图片也自然回单列 */
@media (max-width: 780px){
  .stage-2col:has(.media){ grid-template-columns:1fr; }
}
/* === Stage 图片安全高度 + 可选缩放（全局补丁） === */
:root{
  /* 二级导航的占位高度（你的内容常用 72px，如有差异改这里即可） */
  --stage-subnav-h: 72px;

  /* 舞台上下安全留白（避免图片顶到导航/底部） */
  --stage-vpad: clamp(16px, 4vh, 64px);

  /* 图片与二级导航之间的额外“呼吸”间距 */
  --media-top-gap: 8px;
}

/* 媒体容器：始终与文字垂直居中、留出上方间距 */
.panel.is-stage .stage-content .panel-pages .media{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: var(--media-top-gap);
}

/* 舞台内图片：限制最大宽度与最大高度，避免顶到二级导航 */
.panel.is-stage .stage-content .panel-pages .media img{
  /* 宽度按舞台自适应，桌面端不超过 48vw；移动端下面会放宽 */
  max-width: min(100%, 48vw);
  width: auto;
  height: auto;

  /* 关键：上有二级导航，下有安全边，图片最大高度不超过可视高减去它们 */
  max-height: calc(100vh - var(--stage-subnav-h) - (var(--stage-vpad) * 2));

  object-fit: contain;
  border-radius: 12px;

  /* 可选缩放（见用法）：默认 1，不需要就别设置变量 */
  transform: scale(var(--media-scale, 0.9));
  transform-origin: center;
}

/* 移动/窄屏：允许图片更宽一些以提升观感 */
@media (max-width: 1024px){
  .panel.is-stage .stage-content .panel-pages .media img{
    max-width: min(100%, 84vw);
  }
}
/* —— 舞台态左右翻页（纯新增，不影响现有） —— */
.stage-pager{position:absolute;inset:0;pointer-events:none;}
.stage-pager-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:64px;border:0;border-radius:12px;
  background:rgba(12,18,26,.36);backdrop-filter:blur(8px) saturate(120%);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;pointer-events:auto;transition:transform .18s ease, opacity .18s ease;
}
.stage-pager-btn:hover{transform:translateY(-50%) scale(1.03);}
.stage-pager-btn:active{transform:translateY(-50%) scale(.98);}
.stage-pager-btn svg{width:22px;height:22px;fill:#e7eef7;opacity:.95;}
.stage-pager-btn.prev{left:20px;}
.stage-pager-btn.next{right:20px;}
/* 小屏自动收敛 */
@media (max-width: 640px){
  .stage-pager-btn{width:36px;height:52px;border-radius:10px;}
  .stage-pager-btn svg{width:18px;height:18px;}
}
/* === Flip 模式样式映射：让 data-mode="flip" 等价于 .is-carousel === */
.panels-section[data-mode="flip"] .track{
  display:flex;
  gap:0;
  padding-left:15vw;
  padding-right:15vw;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  perspective:1000px;
}
.panels-section[data-mode="flip"] .panel{
  min-width:70vw;
  width:70vw;
  scroll-snap-align:center;
  transition:transform .35s ease,opacity .25s ease,filter .25s ease;
}
.panels-section[data-mode="flip"] .panel.is-active{transform:rotateY(0) scale(1);opacity:1;z-index:2}
.panels-section[data-mode="flip"] .panel.is-prev  {transform:translateX(-6%) rotateY(8deg) scale(.94);opacity:.9;z-index:1}
.panels-section[data-mode="flip"] .panel.is-next  {transform:translateX(6%)  rotateY(-8deg) scale(.94);opacity:.9;z-index:1}
.panels-section[data-mode="flip"] .panel:not(.is-active):not(.is-prev):not(.is-next){
  opacity:.6;filter:saturate(.9);
}
/* flip 下二级导航的垂直位置（与你原有 .is-carousel 规则一致） */
.panels-section[data-mode="flip"] .menu.glass-nav{ top:var(--nav-area-top-carousel) }

/* 翻页按钮：flip 显示，其它模式隐藏（与你原有样式一致） */
.panels-section[data-mode="flip"] .controls{
  display:block !important;
  position:absolute; inset:0; pointer-events:none;
}
.panels-section[data-mode="flip"] .ctrl{
  position:absolute; top:50%; transform:translateY(-50%);
  pointer-events:auto; height:44px; width:44px; border-radius:50%;
  border:1px solid var(--border); background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px); display:grid; place-items:center; opacity:.95;
}
.panels-section[data-mode="flip"] #prevBtn{ left:24px }
.panels-section[data-mode="flip"] #nextBtn{ right:24px }
.panels-section[data-mode="flip"] .ctrl svg{ width:20px; height:20px; fill:#fff }
/* === hotfix: 让 flip 优先级压过 720–1199 的 grid 规则 === */
.panels-section[data-mode="flip"] .track{
  display:flex !important;
  gap:0 !important;
  padding-left:15vw; padding-right:15vw;
  overflow-x:auto; overflow-y:visible;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  perspective:1000px;
  /* 防御：若浏览器仍保留 grid 属性，直接清空 */
  grid-template-columns:unset !important;
}

/* flip 下确保卡片宽度和按钮可见（避免“堆叠错位”） */
@media (min-width:720px) and (max-width:1199px){
  .panels-section[data-mode="flip"] .panel{
    min-width:70vw !important;
    width:70vw !important;
  }
  .panels-section[data-mode="flip"] .controls{
    display:block !important;
  }
}
/* ensure flip beats any grid MQ around 1200–1440 */
.panels-section[data-mode="flip"] .track{
  display:flex !important;
  grid-template-columns:unset !important;
}
/* resize/zoom 护栏：禁用过渡与遮罩点击，避免“卡住” */
html.stage-resizing .panel.is-stage{ transition:none !important; }
html.stage-resizing .stage-scrim{ pointer-events:none !important; }
.panel.is-stage.no-anim{ transition:none !important; }
/* === Flip 模式：全屏舞台 Modal === */
.flip-overlay{ position:fixed; inset:0; z-index:200; display:none; }
.flip-overlay.is-on{ display:block; }
.flip-overlay .flip-scrim{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.flip-overlay .panel.flip-stage.is-stage{
  position:fixed;
  left:24px; right:24px; top:24px; bottom:24px;
  width:auto !important; height:auto !important;
  border-radius:16px; z-index:210;
  transition:none !important; /* Modal 不需要过渡 */
}
.flip-overlay .panel.flip-stage .menu.glass-nav{
  position:absolute; left:24px; right:24px; bottom:24px; top:auto;
  height:56px; display:flex; gap:12px; align-items:stretch; justify-content:center;
  opacity:1; transform:none;
}
.flip-overlay .panel.flip-stage .stage-content{
  position:absolute; left:24px; right:24px; top:24px; bottom:calc(24px + 56px + 16px);
  overflow:auto; opacity:1; transform:none; display:block;
}
/* === flip 全屏舞台：让页面内容完全居中（至少左右居中） === */
.flip-overlay .panel.flip-stage .stage-content > .panel-pages > section.is-active{
  display:flex !important;
  align-items:center !important;     /* 垂直居中 */
  justify-content:center !important; /* 水平居中 */
  text-align:center;                 /* 文本居中 */
  padding:var(--stage-pad) !important;
}

/* 内部直接子元素保持自适应宽，且在居中布局下不贴边 */
.flip-overlay .panel.flip-stage .stage-content > .panel-pages > section.is-active > *{
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:min(1120px, 92vw);
}

/* 若有配图，也遵守居中与安全尺寸 */
.flip-overlay .panel.flip-stage .stage-content .media{
  display:flex; justify-content:center; align-items:center; padding-top:var(--media-top-gap);
}
.flip-overlay .panel.flip-stage .stage-content .media img{
  max-width:min(100%, 48vw);
  max-height:calc(100vh - var(--stage-subnav-h) - (var(--stage-vpad) * 2));
  height:auto; object-fit:contain; border-radius:12px;
  transform:scale(var(--media-scale, 0.9));
}
/* === append-only: flip 模式舞台不显示正文图片（背景/Logo不受影响） === */
.panels-section[data-mode="flip"] .panel.is-stage .stage-content .panel-pages img{
  display: none !important;
}

/* 同时保证 flip 下正文左右居中对齐（文本） */
.panels-section[data-mode="flip"] .panel.is-stage .stage-content > .panel-pages > section.is-active{
  text-align: center;
}
/* === append-only: overlay 打开时隐藏底层卡片，避免“卡默认图 + 舞台BG”叠影 === */
.panels-section.overlay-on .track .panel[data-flip-mask="on"]{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
/* === append-only: flip 下舞台文字/内容强制完美居中（左右+上下） === */
.panels-section[data-mode="flip"] .panel.is-stage .stage-content > .panel-pages > section.is-active{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:var(--stage-pad) !important;
}
.panels-section[data-mode="flip"] .panel.is-stage .stage-content > .panel-pages > section.is-active > *{
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:min(1120px,92vw) !important;
}

/* === append-only: flip 下不显示“正文图片”只保留舞台背景/Logo === */
.panels-section[data-mode="flip"] .panel.is-stage .stage-content .panel-pages img{
  display:none !important;
}
/* === FIX 1: flip 下舞台正文水平居中 + 二栏自动折回一栏 === */
.panels-section[data-mode="flip"] .panel.is-stage .stage-content > .panel-pages{
  display: grid !important;
  place-items: center !important; /* 水平 + 垂直都居中 */
}

.panels-section[data-mode="flip"] .panel.is-stage .stage-content > .panel-pages > section.is-active{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;  /* 左右居中 */
  text-align: center !important;
  padding: var(--stage-pad) !important;
}

.panels-section[data-mode="flip"] .panel.is-stage .stage-content > .panel-pages > section.is-active > *{
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: min(1120px, 92vw) !important;
}

/* 二栏容器在 flip 下折回单列；隐藏空的媒体列，避免“偏左” */
.panels-section[data-mode="flip"] .panel.is-stage .stage-content .panel-pages .stage-2col:has(.media){
  grid-template-columns: minmax(320px, 560px) !important;
}
.panels-section[data-mode="flip"] .panel.is-stage .stage-content .panel-pages .stage-2col .media{
  display: none !important;
}

/* 覆盖到全屏 overlay 也生效（稳妥起见再加一层） */
.flip-overlay .panel.flip-stage .stage-content .panel-pages .stage-2col:has(.media){
  grid-template-columns: minmax(320px, 560px) !important;
}
.flip-overlay .panel.flip-stage .stage-content .panel-pages .stage-2col .media{
  display: none !important;
}
/* === append-only: flip 模式隐藏底部 pager 小条 === */
.panels-section[data-mode="flip"] .pager{
  display: none !important;
}
/* === 1080p 介绍态按钮自适应补丁（append-only） === */

/* 1080p 及以下：把导航区“起始位置”稍微上移，留更多可用高度 */
@media (max-height:1080px){
  :root{ --nav-area-top: 52%; }
}
@media (max-height:900px){
  :root{ --nav-area-top: 50%; }
}

/* 紧凑态：当空间仍不足时，开启垂直滚动 + 收紧间距（仅介绍态会用到） */
.menu.glass-nav.is-tight{
  --menu-gap-min: 4px;      /* 原 6px → 4px */
  --nav-item-min: 40px;     /* 原 44px → 40px */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.menu.glass-nav.is-tight > .menu-item a{
  padding: 0 12px;          /* 水平内边距小一点 */
  font-size: .95rem;        /* 字号略微收紧 */
}
/* ===== intro 卡片在 ≤1080p：让导航自上而下均匀铺满，避开 mini 区 ===== */

/* 导航永远压在 mini-logo 之上，避免被盖 */
.panel .menu.glass-nav{ z-index: 5; }

/* 非舞台 + 非 flip 模式下生效；大于 1080p 不影响 */
@media (max-height:1080px){
  .panels-section:not([data-mode="flip"]) .panel:not(.is-stage) .menu.glass-nav{
    /* 从卡片上边缘开始铺 */
    top: 0 !important;

    /* 下缘：至少 168px 安全区；或按你变量的 mini 安全区+底部间距二者取更大者 */
    bottom: max(168px, calc(var(--mini-safe) + var(--nav-bottom-gap) + 24px)) !important;

    /* 允许均匀分布，禁止被容器裁切 */
    overflow: hidden;
  }
}

/* 如仍觉得偏紧，可把 168px 提大到 184/200 试试 */
/* === Force GRID: 全局只保留网格模式（追加式覆盖） === */

/* 任何时候都用网格布局 */
.panels-section .track{
  display:grid !important;
  gap:18px !important;
  overflow:visible !important;
  padding:0 16px !important;
  margin:0 auto;
}

/* 自适应列数：大屏沿用你原断点；小于 960 / 720 / 480 时兜底为 2 / 1 列 */
@media (max-width: 959.98px){
  .panels-section .track{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; max-width:1200px; }
}
@media (max-width: 719.98px){
  .panels-section .track{ grid-template-columns:1fr !important; }
}

/* 网格模式下，卡片允许缩小，不再按 70vw 走 */
.panels-section .track .panel{ min-width:0 !important; width:auto !important; }

/* 永久隐藏翻页控件与 pager */
.panels-section .controls,
.panels-section .pager{ display:none !important; }

/* 任何“flip/carousel”选择器一律回退为网格表现 */
.panels-section.is-carousel .track,
.panels-section[data-mode="flip"] .track{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap:18px !important;
  overflow:visible !important;
  padding:0 16px !important;
}

/* flip/carousel 下的特有样式全部失效 */
.panels-section.is-carousel .ctrl,
.panels-section[data-mode="flip"] .ctrl,
.panels-section.is-carousel .pager,
.panels-section[data-mode="flip"] .pager{
  display:none !important;
}

/* 禁用 flip 全屏 overlay（若遗留监听也不会显示） */
#flipOverlay{ display:none !important; }
.panels-section.overlay-on .track .panel[data-flip-mask="on"]{
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
}