/* ==========================================================
   站点共享外壳：顶栏 / 下拉菜单 / 移动菜单 / 页脚 / 吐司
   规则逐条取自 home-preview.html，保证两页完全一致。
   ========================================================== */

:root{
  color-scheme:light dark;
  --nav-h:52px;
  --max:1024px;
  --gutter:22px;
  /* 苹果字号阶梯：12 / 14 / 17 / 21 / 28 / 40 / 56 / 80 */
  --text-xs:12px;
  --text-sm:14px;
  --text-base:17px;
  --text-lg:21px;
  --text-xl:28px;
  --text-2xl:40px;
  --text-3xl:56px;
  --text-4xl:80px;
  --leading-tight:1.05;
  --leading-body:1.47059;
  --tracking-display:-.015em;
  --tracking-body:-.022em;
  --ease:cubic-bezier(.4,0,.6,1);
  --font-d:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-t:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

html{
  color-scheme:light dark;
}

/* ===== 中文排版基线：全角标点收缩 + 中英文自动间距 + 行末标点悬挂 ===== */
body{
  text-spacing-trim:trim-start;
  text-autospace:normal;
  hanging-punctuation:allow-end;
  font-kerning:normal;
}

/* ===== 导航玻璃容器（固定定位，脱离文档流） ===== */
.nav-glass{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(22,22,23,.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  height:var(--nav-h);
  transition:height .35s var(--ease), border-radius .35s var(--ease);
  overflow:hidden;
  border-radius:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#f5f5f7;
}
.nav-glass.open{
  border-radius:0 0 20px 20px;
}

.nav-bar{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;
  width:100%;
}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--font-d);font-size:16px;font-weight:600;color:#f5f5f7;letter-spacing:-.02em}
.brand svg{width:20px;height:20px;color:#f5f5f7}
.brand img{width:24px;height:24px;display:block;object-fit:contain}
.nav-cats{display:flex;align-items:center;gap:0;list-style:none;height:100%}
.nav-cat{height:100%;display:flex;align-items:center;position:relative}
.nav-cat>a,.nav-cat>button{display:flex;align-items:center;gap:3px;height:100%;padding:0 12px;font-size:12px;font-weight:400;color:#a1a1a6;letter-spacing:-.01em;transition:color .2s var(--ease);background:none;border:none}
.nav-cat>a:hover,.nav-cat>button:hover,.nav-cat.open>button{color:#f5f5f7}
.nav-cat>button svg{width:9px;height:9px;transition:transform .2s var(--ease)}
.nav-cat.open>button svg{transform:rotate(180deg)}

.nav-right{display:flex;align-items:center;gap:2px}
.mobile-menu-btn{
  display:none;width:32px;height:32px;padding:0;border:0;border-radius:50%;
  align-items:center;justify-content:center;color:#f5f5f7;
  background:transparent;appearance:none;-webkit-appearance:none;
}
.mobile-menu-btn svg{width:17px;height:17px}

/* ===== 下拉容器（深色） ===== */
.nav-dropdown{
  position:relative;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s var(--ease), visibility .25s var(--ease);
}
.nav-glass.open .nav-dropdown{
  opacity:1;
  visibility:visible;
}

.mega-content{
  position:absolute;
  top:0; left:0; right:0;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter) 24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s var(--ease), visibility .25s var(--ease);
}
.mega-content.active{
  opacity:1;
  visibility:visible;
}

.mega-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid #333336;
  padding-top:20px;
}
.mega-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.mega-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.mega-group{padding:0 16px;min-width:0}
.mega-group:first-child{padding-left:0}
.mega-group:last-child{padding-right:0}
.mega-group h5{font-size:var(--text-xs);font-weight:600;letter-spacing:0;color:#86868b;margin-bottom:10px;padding:0 8px}
.mega-group a{display:block;padding:8px;border-radius:8px;transition:background .12s var(--ease)}
.mega-group a:hover{background:rgba(255,255,255,.08)}
.mega-group a strong{font-size:var(--text-sm);font-weight:500;color:#f5f5f7;letter-spacing:-.01em}

/* ===== 模糊遮罩 ===== */
.nav-overlay{
  position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),visibility .28s var(--ease);
  z-index:998;
}
.nav-overlay.open{opacity:1;visibility:visible;pointer-events:auto}

/* 移动端 */
.mobile-panel{
  position:fixed;inset:var(--nav-h) 0 0 0;background:#1d1d1f;z-index:999;
  overflow:hidden;padding:0;color:#f5f5f7;opacity:0;visibility:hidden;
  pointer-events:none;transform:translateY(-10px);
  transition:opacity .28s var(--ease),transform .38s var(--ease),visibility 0s linear .38s;
}
.mobile-panel.open{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  transition-delay:0s;
}
.mobile-panel-view{
  position:absolute;inset:0;overflow-y:auto;padding:20px var(--gutter) 40px;
  transition:transform .38s var(--ease),opacity .24s var(--ease);
}
.mobile-panel-view[data-view="sub"]{transform:translateX(100%);opacity:0}
.mobile-panel.is-sub .mobile-panel-view[data-view="main"]{transform:translateX(-24%);opacity:0}
.mobile-panel.is-sub .mobile-panel-view[data-view="sub"]{transform:translateX(0);opacity:1}
.mobile-panel-section{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:18px 0;border:0;
  background:transparent;color:#f5f5f7;text-align:left;font:inherit;
  font-size:var(--text-xl);letter-spacing:var(--tracking-display);
  cursor:pointer;appearance:none;-webkit-appearance:none;
}
.mobile-panel-section span{color:#86868b;font-size:28px;font-weight:300;line-height:1;transition:transform .24s var(--ease)}
.mobile-panel-section:hover span{transform:translateX(4px);color:#f5f5f7}
.mobile-sub-header{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
  min-height:40px;
}
.mobile-back{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  padding:0;border:0;border-radius:50%;background:transparent;color:#f5f5f7;
  cursor:pointer;appearance:none;-webkit-appearance:none;
}
.mobile-back:hover{background:rgba(255,255,255,.1)}
.mobile-back svg{width:18px;height:18px}
.mobile-sub-title{font-size:var(--text-xl);font-weight:600;letter-spacing:var(--tracking-display)}
.mobile-sub-content h4{
  font-size:var(--text-xs);font-weight:600;letter-spacing:0;color:#86868b;
  margin:18px 0 8px;padding-bottom:6px;
}
.mobile-sub-content h4:first-child{margin-top:0}
.mobile-sub-content a{display:block;padding:13px 0;font-size:var(--text-base);color:#f5f5f7}

/* ===== 页脚 ===== */
.foot{background:#f5f5f7;padding:64px 0 24px;font-size:var(--text-xs);color:#424245;line-height:1.5}
.foot-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.foot-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:0 clamp(20px,4vw,56px) 32px;
}
.foot-column{display:flex;flex-direction:column;gap:28px;min-width:0}
.foot-col h5{font-size:var(--text-xs);font-weight:600;color:#1d1d1f;margin-bottom:14px;letter-spacing:0}
.foot-toggle{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left}
.foot-toggle::before,.foot-toggle::after{display:none}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-col a{color:#424245;font-size:var(--text-xs);text-decoration:none}
.foot-col a:hover{color:#1d1d1f;text-decoration:underline;text-underline-offset:2px}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:17px;border-top:1px solid #d2d2d7}
.foot-legal{color:#86868b}
.foot-links{display:flex;flex-wrap:wrap;list-style:none}
.foot-links li{padding:0 10px;border-left:1px solid #d2d2d7}
.foot-links li:first-child{padding-left:0;border-left:0}
.foot-links a{color:#424245;font-size:var(--text-xs);text-decoration:none}
.foot-links a:hover{color:#1d1d1f;text-decoration:underline;text-underline-offset:2px}
.foot-links .beian-mps{display:inline-flex;align-items:center;gap:4px}
.beian-mps img{display:block;width:16px;height:16px;object-fit:contain}

/* 底栏占位链接提示 */
.site-toast{
  position:fixed;left:50%;bottom:32px;z-index:1200;
  padding:11px 18px;border-radius:980px;
  background:rgba(29,29,31,.9);color:#f5f5f7;
  font-size:var(--text-sm);line-height:1;
  box-shadow:0 8px 28px rgba(0,0,0,.2);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,12px) scale(.96);
  transition:opacity .22s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;
}
.site-toast.is-visible{
  opacity:1;visibility:visible;
  transform:translate(-50%,0) scale(1);
  transition-delay:0s;
}

@media(max-width:1068px){
  :root{--gutter:22px}
}
@media(max-width:833px){
  :root{--gutter:18px}
  .mega-grid,.mega-grid.cols-3,.mega-grid.cols-2{grid-template-columns:1fr 1fr}
}
@media(max-width:734px){
  :root{--gutter:16px}
  .nav-cats{display:none}
  .mobile-menu-btn{display:flex}
  .nav-glass.open{height:var(--nav-h) !important;}
  .nav-glass.open .nav-dropdown{opacity:0; visibility:hidden;}
  .nav-overlay{display:none}
  .mega-grid,.mega-grid.cols-3,.mega-grid.cols-2{grid-template-columns:1fr}
  .foot{padding:32px 0 24px}
  /* 铺满：去掉页脚内衬，让折叠行与分隔线横向通铺到屏幕两边 */
  .foot-in{padding:0}
  .foot-top{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    width:100%;margin-left:0;padding:0 0 28px;
  }
  .foot-column{display:contents}
  .foot-col{border-top:1px solid #d2d2d7}
  .foot-column:last-child .foot-col:last-child{border-bottom:1px solid #d2d2d7}
  .foot-col h5{margin:0}
  .foot-toggle{position:relative;padding:16px var(--gutter) 16px calc(var(--gutter) + 24px);cursor:pointer}
  /* 左侧展开指示：横线 + 竖线叠加成「＋」，展开时分别转 45° 收成「×」 */
  .foot-toggle::before,
  .foot-toggle::after{
    display:block;content:"";position:absolute;left:var(--gutter);top:50%;
    width:11px;height:1.5px;margin-top:-.75px;border-radius:1px;background:#1d1d1f;
    transition:transform .3s var(--ease)
  }
  .foot-toggle::before{transform:rotate(90deg)}
  .foot-col.is-open .foot-toggle::before{transform:rotate(45deg)}
  .foot-col.is-open .foot-toggle::after{transform:rotate(-45deg)}
  /* 展开用高度推开，而不是 display 硬切 */
  .foot-col ul{
    display:flex;flex-direction:column;gap:0;overflow:hidden;margin:0;
    max-height:0;opacity:0;padding:0 var(--gutter);
    transition:max-height .34s var(--ease), opacity .24s var(--ease), padding-bottom .34s var(--ease);
  }
  .foot-col.is-open ul{max-height:var(--list-h,420px);opacity:1;padding-bottom:14px}
  .foot-col a{display:block;padding:7px 0}
  .foot-bottom{padding:17px var(--gutter) 0;display:block}
  .foot-links{
    width:100%;display:flex;flex-wrap:wrap;align-items:center;
    gap:8px 14px;margin-top:12px;
  }
  .foot-links li{min-width:0;padding:0;border-left:0}
  .foot-links a{display:flex;align-items:center;min-height:22px;white-space:nowrap}
  .foot-links .beian-mps{gap:4px}
  .site-toast{bottom:24px}
}
@media(min-width:735px){
  .mobile-panel{display:none !important}
}
@media (prefers-reduced-motion: reduce){
  .foot-toggle::before,.foot-toggle::after,.foot-col ul{transition:none}
  .site-toast{transition:none}
}