/* ================= 官网共享页面壳：token / 顶栏 / 页脚 / 主题切换 =================
   所有带顶栏的页面都引这一份（首页 / 会员页 / 协议 / 联系 / support / 404）；页内 <style>
   只放该页自己的东西，不再各抄一份顶栏与页脚。约定与 why 见 website/docs/design.md。
   <head> 顺序：防闪白主题脚本 → 本文件 → 页内样式（页内规则同权重时靠靠后取胜）。 */

/* ---------- 1. Token（浅色）---------- */
:root {
  color-scheme: light;
  --blue: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-050: #f5f9ff;
  --blue-100: #eff6ff;
  --blue-200: #dbeafe;
  --blue-300: #93c5fd;
  --ink: #18243a;
  --muted: #617086;
  --line: #dce7f1;
  --outline: #39415a;
  --paper: #ffffff;
  --card-shadow: 0 1px 2px rgba(16, 42, 83, 0.04), 0 10px 30px rgba(16, 42, 83, 0.05);
  --card-shadow-lift: 0 1px 2px rgba(16, 42, 83, 0.06), 0 16px 38px rgba(16, 42, 83, 0.09);
  --nav-h: 74px;
}
/* iOS 横屏 / 桌面版网页模式会自动放大正文；以前三处页面都没关 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---------- 1b. Token（深色：方案F 夜空地平线）----------
   逐选择器覆盖之外，token 本身也换值，页内用 var() 的组件不用再各写一条 html.dark。 */
html.dark {
  color-scheme: dark;
  --blue-050: #0d1526;
  --blue-100: #13203a;
  --blue-200: #1e3054;
  --blue-300: #34517e;
  --ink: #e9eefb;
  --muted: #8794b3;
  --line: rgba(148, 168, 220, 0.16);
  --outline: #3d4a6b;
  --paper: #0e1326;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
  --card-shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 38px rgba(0, 0, 0, 0.45);
}
html.dark body { background: #05070f; }

/* ---------- 1.5 触屏点击反馈 ---------- */
/* 触屏上点一下不要留蓝底、也不要焦点描边（按钮 / FAQ 折叠标题 / 登录 tab 点完那块蓝很丑，09-11 阿杰）。
   tap-highlight 是继承属性，挂在 html 上一处覆盖全站，页内不用再逐个写；
   焦点描边只给键盘 Tab 导航（精确指针设备的 :focus-visible）保留，鼠标点击与触屏一律不画。
   写成 html :focus-visible 是为了压过页内 :where(button):focus-visible 那种零特异度的描边规则。 */
html { -webkit-tap-highlight-color: transparent; }
/* 触屏双击不放大（连点两下按钮 / 标题就把页面放大了，09-11 阿杰 iPhone Safari）：manipulation 只关双击缩放和 300ms 点击延迟，
   滚动、双指缩放都保留——双指缩放是无障碍能力，iOS Safari 本来也不理 user-scalable=no，不去禁。
   另一处缩放来源是聚焦字号 <16px 的输入框，那条靠各页输入框字号 ≥16px 守（staticSeo 测试按声明扫）。 */
html { touch-action: manipulation; }
html :focus:not(:focus-visible) { outline: none; }
@media (hover: none), (pointer: coarse) {
  html :focus-visible { outline: none; }
}

/* ---------- 2. 顶栏 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px); /* viewport-fit=cover 的页面必配，其余页 env() 为 0 */
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
  border-bottom: 1px solid rgba(220, 231, 241, 0.9);
  transform: translateY(-100%);
  animation: navDrop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s forwards;
}
@keyframes navDrop { to { transform: none; } }
.nav {
  width: 100%;
  height: var(--nav-h);
  padding: 0 40px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(14px, 3vw, 40px);
}
/* 导航项依次浮现；每项的 --nd 写在标签上 */
.nav > *,
.nav-links a {
  opacity: 0;
  animation: navItem 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) var(--nd, 0.45s) forwards;
}
@keyframes navItem { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* 会话内再次加载（页间跳转 / 返回）直接静态呈现，不重播入场：由 <head> 的 jdNavSeen 脚本打 class */
html.nav-seen .topbar { animation: none; transform: none; }
html.nav-seen .nav > *,
html.nav-seen .nav-links a { animation: none; opacity: 1; }

/* 顶栏永不重叠：只有品牌名可伸缩，其余 flex:none。flex 子项只会压缩或换行，不会互相覆盖。 */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 0 1 auto;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand .beta {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: 2px;
  padding: 0 8px;
  border: 1px solid #b9d3ff;
  border-radius: 999px;
  background: #edf4ff;
  color: #245bd7;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.02em;
}
.nav-links { display: flex; gap: 34px; font-size: 16px; font-weight: 700; color: #47566e; }
.nav-links a {
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
  padding: 4px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2.5px;
  border-radius: 99px;
  background: var(--blue-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav-links a:hover,
.nav-links a.on,
.nav-links a[aria-current="page"] { color: var(--blue-700); }
.nav-links a:hover::after,
.nav-links a.on::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
/* 苹果平台（Mac / iPhone / iPad）访问时，导航里的「会员」不走灰色，保持加黑加粗（怡婷稿 html.plat-apple）：
   这批人在 App 内买要吃苹果渠道费，把官网会员入口往前提一格。平台判定只有 site.js 一份（R10）。 */
html.plat-apple .nav-links a[href="/member/"],
html.plat-apple .nav-drawer-in a[href="/member/"] { color: var(--ink); font-weight: 800; }
.nav-spacer { flex: 1 1 0; min-width: 0; }
.nav-login { flex: none; font-size: 15px; font-weight: 700; color: #4c5d73; text-decoration: none; white-space: nowrap; }
.nav-login:hover { color: var(--blue-700); }
/* 右侧行动钮：首页「免费体验」/ 子页 CTA / 会员页「登录」同一副外观 */
.nav-cta,
.nav-signin {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--blue-600);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, transform 0.18s;
}
.nav-cta:hover,
.nav-signin:hover { background: var(--blue-700); transform: translateY(-1px); }

/* 三杠与抽屉：桌面不存在，≤900px 才出现。少了这条桌面上 <button> 会按默认显示冒出来。 */
.nav-burger,
.nav-drawer { display: none; }

/* 主题切换：桌面是三态胶囊；手机收成一个按钮，点开从同一容器往下长出另外两档（见 ≤900px 段） */
.theme-pop { position: relative; flex: none; }
.theme-trigger { display: none; }
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
}
.theme-switch button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8a97ac;
  font: inherit;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.theme-switch button:hover { color: var(--blue-700); }
.theme-switch button.on { background: var(--blue-100); color: var(--blue-700); }
.theme-switch svg,
.theme-trigger svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (orientation: landscape) {
  .nav {
    padding-left: calc(40px + env(safe-area-inset-left, 0px));
    padding-right: calc(40px + env(safe-area-inset-right, 0px));
  }
}

/* 桌面完整导航实际约需 880px；≤820 才收起会让 iPad 竖屏(~834px)落在
   「塞不下又没切移动布局」的死区。900 收起，首页 / 子页 / 会员页同一断点。 */
@media (max-width: 900px) {
  :root { --nav-h: 58px; }
  .nav { padding: 0 14px; gap: 10px; }
  .nav-links,
  .nav-login { display: none; }
  .brand { font-size: 16px; gap: 8px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 8px; }
  .nav-cta,
  .nav-signin { min-height: 36px; padding: 0 14px; font-size: 13px; border-radius: 9px; }

  /* --- 三杠 --- */
  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #47566e;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-burger span {
    display: block;
    position: relative;
    width: 18px;
    height: 1.8px;
    border-radius: 2px;
    background: currentColor;
    transition: background 0.18s;
  }
  .nav-burger span::before,
  .nav-burger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 1.8px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .nav-burger span::before { top: -5.5px; }
  .nav-burger span::after { top: 5.5px; }
  .nav-burger[aria-expanded="true"] span { background: transparent; }
  .nav-burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span::after { transform: translateY(-5.5px) rotate(-45deg); }

  /* --- 抽屉：白条下方，横向胶囊，放不下自动换行 --- */
  /* 抽屉是顶栏下方的覆盖层：绝对定位、自带纸底，只用 transform / opacity 开合。
     以前用 max-height 过渡把顶栏撑高：iOS Safari 每帧要重排整页 + 重光栅化 sticky 顶栏的
     backdrop-filter，抽屉下落一顿一顿（2026-09-11 iPhone 实测）。覆盖层不改顶栏高度，
     动画层自己不带 blur，合成器单层就能画完。 */
  .nav-drawer {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid rgba(38, 55, 92, 0.08);
    border-bottom: 1px solid rgba(220, 231, 241, 0.9);
    box-shadow: 0 14px 30px rgba(24, 36, 58, 0.1);
    transform-origin: 50% 0;
    transform: translateY(-6px) scaleY(0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: transform, opacity;
    transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease, visibility 0s linear 0.26s;
  }
  .nav-drawer.open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease, visibility 0s;
  }
  .nav-drawer-in { display: flex; flex-wrap: wrap; gap: 8px; padding: 11px 14px 13px; }
  .nav-drawer a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(38, 55, 92, 0.06);
    color: #47566e;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }
  .nav-drawer a.on,
  .nav-drawer a[aria-current="page"] { background: var(--blue-600); color: #fff; }
  .nav-drawer a:active { background: rgba(38, 55, 92, 0.12); }

  /* --- 主题：收起 = 一个按钮，展开 = 另外两档从按钮底下滑出来。
     以前是同一个容器 max-height 0→80px 往下长：跟三杠抽屉同一个病，max-height 过渡 = 每帧重排 + 重光栅化
     毛玻璃顶栏（09-11 阿杰问起，抽屉那次漏了它）。改成独立浮层只动 transform / opacity。 --- */
  .theme-pop { width: 34px; height: 34px; }
  .theme-pop-in {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(38, 55, 92, 0.12);
  }
  .theme-pop.open .theme-pop-in { border-color: rgba(38, 55, 92, 0.18); }
  .theme-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #47566e;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .theme-trigger svg { width: 18px; height: 18px; stroke-width: 1.7; }
  .theme-pop .theme-switch,
  html.dark .theme-pop .theme-switch {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(38, 55, 92, 0.18);
    box-shadow: 0 10px 26px rgba(8, 16, 34, 0.16);
    transform-origin: 100% 0;
    transform: translateY(-6px) scaleY(0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: transform, opacity;
    transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease, visibility 0s linear 0.26s;
  }
  .theme-pop.open .theme-switch,
  html.dark .theme-pop.open .theme-switch {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease, visibility 0s;
  }
  .theme-pop .theme-switch button {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: transparent;
    color: #47566e;
  }
  .theme-pop .theme-switch button:active { background: rgba(38, 55, 92, 0.08); }
  /* 当前档已经显示在按钮本体上，列表里只剩另外两档 */
  .theme-pop .theme-switch button.on,
  html.dark .theme-pop .theme-switch button.on { display: none; }

  html.dark .theme-pop-in,
  html.dark .theme-pop .theme-switch { background: #131a2b; border-color: rgba(255, 255, 255, 0.12); }
  html.dark .theme-pop .theme-switch button { color: #aab6cf; }

  .nav {
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right: calc(14px + env(safe-area-inset-right, 0px));
  }
}
@media (max-width: 430px) {
  .nav { gap: 8px; padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); }
  .brand { font-size: 15px; gap: 6px; }
  .brand .beta { display: none; }
  .nav-cta,
  .nav-signin { padding: 0 11px; font-size: 12.5px; }
}

/* ---------- 3. 页脚 ---------- */
.site-footer {
  padding: 28px 0 24px;
  border-top: 1px solid rgba(220, 231, 241, 0.46);
  background: rgba(243, 248, 254, 0.92);
  color: #718095;
  font-size: 12px;
}
.site-footer-inner {
  width: min(calc(100% - 48px), 1160px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.footer-brand img { width: 32px; height: 32px; display: block; object-fit: contain; }
.footer-spacer { flex: 1; }
.footer-links,
.footer-legal { display: flex; align-items: center; }
.footer-links { gap: 20px; }
.footer-legal { gap: 10px; white-space: nowrap; }
.site-footer a { color: inherit; text-decoration: none; transition: color 0.18s; }
.site-footer a:hover { color: var(--blue-700); }
.footer-legal-separator { color: #aeb9c8; }
.police-record { display: inline-flex; align-items: center; gap: 5px; }
.police-record img { width: 18px; height: 18px; flex: 0 0 auto; }
@media (max-width: 1000px) {
  .site-footer-inner { flex-direction: column; text-align: center; }
  .footer-spacer { display: none; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 700px) {
  .site-footer { padding: 18px 0 14px; }
  .site-footer-inner { width: min(calc(100% - 28px), 1160px); }
  .footer-legal { flex-direction: column; gap: 6px; white-space: normal; }
  .footer-legal-separator { display: none; }
}

/* ---------- 4. 深色（壳）---------- */
html.dark .topbar { background: rgba(5, 7, 15, 0.85); border-bottom-color: rgba(148, 168, 220, 0.14); }
/* logo 上圈是描边+透明填充，深色底下会隐形，垫一块浅色小圆角底（页脚同理） */
html.dark .brand-mark { background: #e9eefb; padding: 3px; }
html.dark .brand .beta { border-color: rgba(111, 162, 255, 0.4); background: rgba(111, 162, 255, 0.12); color: #9dbcff; }
html.dark .nav-links { color: #aab6cf; }
html.dark .nav-links a:hover,
html.dark .nav-links a.on,
html.dark .nav-links a[aria-current="page"] { color: #9dbcff; }
html.dark .nav-login { color: #93a1bc; }
html.dark .nav-burger { color: #aab6cf; }
html.dark .nav-drawer { background: rgba(5, 7, 15, 0.97); border-top-color: rgba(255, 255, 255, 0.1); border-bottom-color: rgba(148, 168, 220, 0.14); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5); }
html.dark .nav-drawer a { background: rgba(255, 255, 255, 0.07); color: #c3cde0; }
html.dark .nav-drawer a.on,
html.dark .nav-drawer a[aria-current="page"] { background: var(--blue-600); color: #fff; }
html.dark .theme-switch { border-color: rgba(148, 168, 220, 0.2); background: rgba(14, 19, 38, 0.6); }
html.dark .theme-switch button { color: #8794b3; }
html.dark .theme-switch button:hover { color: #cdd9f2; }
html.dark .theme-switch button.on { background: rgba(111, 162, 255, 0.16); color: #9dbcff; }
html.dark .theme-trigger { color: #aab6cf; }
html.dark .site-footer { background: rgba(6, 9, 18, 0.92); border-top-color: rgba(148, 168, 220, 0.14); color: #7c89a5; }
html.dark .site-footer a:hover { color: #9dbcff; }
html.dark .footer-brand { color: #e9eefb; }
html.dark .footer-brand img { background: #e9eefb; border-radius: 9px; padding: 3px; }
html.dark .footer-legal-separator { color: #3d4a6b; }

/* ---------- 5. 减少动态 ---------- */
/* ===== 手机横屏：提示转回竖屏 =====
   官网按竖屏设计，手机横过来首屏叙事 / 会员页首屏都被压扁。网页没有真正的方向锁
   （screen.orientation.lock 只在全屏下可用），所以用一层覆盖提示代替。三个条件同时满足才拦：
   触屏（pointer: coarse）+ 横屏 + 视口高 ≤ 500px——手机横屏高度 ≤ 430，iPad mini 横屏 744、
   iPad 分屏是竖屏，平板照常可转；桌面窄窗是 pointer: fine，不拦。 */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  html::after {
    content: "请把手机转回竖屏浏览";
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--paper);
    color: var(--ink);
    font: 700 17px/1.6 "PingFang SC", -apple-system, BlinkMacSystemFont, "Inter", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    letter-spacing: 0.02em;
    text-align: center;
  }
}

/* 登录卡提交钮：后端点头后原地变「✓ 已登录」再收卡（site-auth.js settled）。两份文案叠同一格切透明度，
   宽度恒等于较长的那份、不先缩再扩——跟「✓ 已复制」（in-app-browser.js .jd-cp-st）同一套做法 */
.lg-stack { display: inline-grid; align-items: center; justify-items: center; }
.lg-stack > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .16s; }
.lg-stack > .lg-done { opacity: 0; }
.lg-stack.ok > .lg-idle { opacity: 0; }
.lg-stack.ok > .lg-done { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lg-stack > span { transition: none; }
  .topbar { animation: none; transform: none; }
  .nav > *,
  .nav-links a { animation: none; opacity: 1; transform: none; }
  .nav-drawer,
  .theme-pop .theme-switch,
  .theme-pop-in { transition: none; }
}
