/* ================================================================
   LuneMind 全站共享基础层 · site.css
   ---------------------------------------------------------------
   作用：统一「页面外壳」——设计令牌、响应式 Header、活跃导航、
        焦点可见、可读对比度、容器宽度、可访问性。
   载入位置：必须在每个页面内联 <style> 之后引入，
        这样同等特异度下本文件的规则优先生效（后加载者胜）。
   注意：本文件不定义任何页面业务样式，只管外壳与通用规范。

   ── 2026-09-12 改版要点 ──
   1) 全站唯一容器 --cw-page：header / 正文 / 页脚共用同一条左对齐线。
      此前 nav 用 1200、数据页 1120、资讯页 880、首页 960 四套宽度并存，
      同一视口下正文左边缘出现 120/208/288/328 四种值（实测极差 208px），
      这正是「头部与内容对不齐」的根因。改为单一容器后极差为 0。
   2) Header 由 space-between 改为三轨网格：Logo 左、导航组真正居中、
      汉堡/头像靠右。此前导航组被推到右侧，与 Logo 之间空出 500px+。
   3) 首屏 hero 不再参与滚动动画：.reveal 初始 opacity:0 + 下移 20px，
      会让首屏空白最长 3 秒并造成实际间距偏移 20px。
   ================================================================ */

/* ---------- 1. 设计令牌（覆盖各页面内联的默认值，统一口径） ---------- */
:root{
  /* 文字用金：#9a7d3c 在米白底上对比度仅 3.7:1，不达标。
     加深为棕金 #7d6224 → 5.5:1，满足 WCAG AA（4.5:1）。 */
  --gold:#7d6224;
  /* 装饰用金（线条、图标、徽章描边）保留原色，不参与正文对比度判定 */
  --gold-decor:#9a7d3c;
  --gold-dim:rgba(125,98,36,0.10);
  --gold-dim-strong:rgba(125,98,36,0.16);

  /* ── 弹层专用令牌（账户下拉，以及后续的悬浮面板/气泡）──
     为什么不能直接用 --bg：--bg 是「页面背景」语义，每个页面按自己的主题定义它。
     首页把 --bg 定义成夜空黑 #08080a（hero 用），于是展开后的浅色页面上，
     账户下拉渲染成一块黑底面板（2026-09-13 用户截图）。
     弹层是浮在内容之上的独立表面：它的底色应当跟随「它所在的表面」，
     所以这里给一组独立令牌，默认取浅色（全站绝大多数页面是浅色），
     深色页面/深色状态在各自页面里显式覆盖。 */
  --pop-bg:#ffffff;
  --pop-line:rgba(20,20,20,0.12);
  --pop-text:#3a3a3a;
  --pop-text-strong:#1a1a1a;
  --pop-text-dim:#6b6b6b;
  --pop-gold:#7d6224;
  --pop-hover:rgba(125,98,36,0.10);
  --pop-shadow:0 12px 32px rgba(20,18,24,0.14);

  /* ── 头部控件令牌（账户胶囊）──
     与 --pop-* 同一个道理：账户胶囊坐在「导航栏」上，而导航栏的主题由
     **它背后的表面**决定，不由页面主题决定。
     曾用 var(--text)：首页 :root 的 --text 是夜空 hero 用的浅象牙 #e8e2d6，
     但首页展开后导航栏变成浅色实底（.nav.solid），浅字压浅底 →
     对比度 1.24:1，肉眼就是「文字虚化、糊了」（2026-09-13 用户截图）。
     这里给胶囊一组独立令牌，默认取浅色页面值（全站绝大多数页面成立），
     深色导航在各自页面里显式覆盖 —— 与 --pop-* 完全同一模式，
     新增头部控件一律引用这组令牌，不得再读 --text/--line2。 */
  --chip-text:#1a1a1a;
  --chip-line:rgba(20,20,20,0.14);
  --chip-gold:#7d6224;
  --chip-gold-dim:rgba(125,98,36,0.10);
  --chip-gold-line:rgba(125,98,36,0.28);
  --chip-hover-bg:rgba(125,98,36,0.10);

  /* ── 容器：全站只有这一条对齐线 ──
     header 的内容、正文的左边缘、页脚的第一列，全部落在同一条竖线上。
     任何新的横向区块都必须复用 --cw-page，不要再引入第二套宽度。 */
  --cw-page:1120px;
  --gutter:24px;          /* 小屏最小安全边距 */
  --nav-h:60px;           /* 固定导航高度（供各页计算 padding-top） */
}

/* 统一的流式内边距：宽度足够时居中留白，窄屏时退化为 gutter。
   用 padding 而不是 max-width + margin:auto，是为了避免
   「max-width 与 padding 叠加」导致内容区比预期窄 96px。 */
.nav,
.page-header,
.section,
.footer,
.data-band{
  padding-left:max(var(--gutter), calc((100% - var(--cw-page)) / 2));
  padding-right:max(var(--gutter), calc((100% - var(--cw-page)) / 2));
}

/* 旧的 max-width / margin:auto 一律失效，避免与上面的流式内边距打架 */
.page-header,
.section,
body.page-data .page-header,
body.page-data .section{
  max-width:none;
  margin-left:0;
  margin-right:0;
}
/* 正文段落仍限制行长，保证可读性（约 40 个汉字/行） */
.page-header p,
body.page-data .page-header p{max-width:660px}

/* ---------- 2. 可访问性基础 ---------- */

/* 跳转到主内容：键盘用户第一个可聚焦元素 */
.skip-link{
  position:fixed;left:16px;top:-80px;z-index:3000;
  background:#1f1a28;color:#fafaf8;text-decoration:none;
  padding:10px 20px;border-radius:0 0 10px 10px;
  font-size:.85rem;font-weight:600;letter-spacing:1px;
  transition:top .18s ease;
}
.skip-link:focus,.skip-link:focus-visible{top:0;outline:2px solid var(--gold);outline-offset:2px}

/* 全站统一焦点框：任何可交互元素键盘聚焦时必须可见 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:4px;
}
/* 鼠标点击不出现焦点框，但键盘一定出现 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible){outline:none}

/* 尊重「减少动态效果」系统设置 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- 3. 首屏不得等待滚动动画 ---------- */
/* .reveal 的初始态是 opacity:0 + translateY(20px)。放在首屏会造成：
   ① 页面首屏空白（最长等 3 秒兜底计时器）② 内容实际位置比设计位置低 20px，
   滚动前后跳动。因此 hero 直接以最终状态渲染；下方的滚动动画保持不变。 */
.page-header.reveal,
.reveal.is-first-screen{
  opacity:1 !important;
  transform:none !important;
}

/* ---------- 4. 响应式 Header ---------- */
/* 三轨网格：左轨与右轨等宽（1fr），中轨按内容自适应，
   因此导航组在数学上位于容器正中，与 Logo 的视觉重量平衡。 */
.nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.nav-brand{grid-column:1;justify-self:start;flex:0 0 auto;min-width:0}
.nav-brand span{white-space:nowrap}
.nav-items{grid-column:2;justify-self:center;min-width:0}
/* 右轨：账户入口 + 汉堡按钮。左右两轨同为 1fr，中轨因此真正居中。
   2026-09-12 修：账户区此前是 .nav-items（中轨）的最后一个子元素，
   34px 头像 + 8px 间距把 6 个文字导航整体向左推了约 21px ——
   这就是「导航看着重心不在中间」的根因。现移入独立右轨。 */
.nav-actions{grid-column:3;justify-self:end;display:flex;align-items:center;gap:6px;min-width:0}
.nav-menu-btn{grid-column:auto;justify-self:auto}

/* 汉堡按钮（由 site.js 注入，默认桌面隐藏）
   同样只读 --chip-*：它是导航栏上的控件，配色跟着导航栏走，
   不能跟着页面主题走（首页 --text 是夜空 hero 的浅象牙）。 */
.nav-menu-btn{
  display:none;
  align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;
  border:1px solid var(--chip-line);border-radius:10px;
  background:transparent;color:var(--chip-text);cursor:pointer;
  transition:background .2s,border-color .2s;
}
.nav-menu-btn:hover{background:var(--chip-hover-bg);border-color:var(--chip-gold)}
.nav-menu-btn svg{width:20px;height:20px;stroke:currentColor}

/* 桌面宽屏：保持原有宽松间距 */
@media (min-width:1201px){
  .nav-item{padding:8px 20px !important;letter-spacing:2px;font-size:.92rem}
}
/* 1024～1200：收紧间距，防止溢出 */
@media (max-width:1200px){
  .nav-item{padding:8px 14px !important;letter-spacing:1.5px;font-size:.88rem}
  :root{--cw-page:100%}
}
/* 900～1024：进一步收紧 */
@media (max-width:1024px){
  .nav-item{padding:8px 10px !important;letter-spacing:.5px;font-size:.85rem}
}
/* ≤900：折叠为汉堡菜单（只隐藏链接，保留用户头像入口） */
@media (max-width:900px){
  .nav .nav-item{display:none}
  .nav-menu-btn{display:flex}
  /* 链接隐藏后，头像与汉堡按钮一起靠右，避免头像孤零零居中 */
  .nav-items{justify-self:end}
}
/* ≤768：进一步压缩外壳与主体内边距 */
@media (max-width:768px){
  .nav{height:54px}
  .nav-brand span{font-size:.98rem}
  :root{--gutter:18px}
}

/* ---------- 5. 移动端抽屉菜单（由 site.js 注入） ----------
   抽屉是**浮在全屏之上的独立表面**（position:fixed;inset:0），按红线 17
   必须用弹层令牌 --pop-*，不得读页面级 --bg/--line/--text ——
   --bg 是「页面背景」语义：首页把它定义成夜空黑 #08080a，
   会在浅色内容区弹出一块黑抽屉；而 discover-ai.html 根本没有 --text，
   那里的抽屉链接会退化成「深字压深底」（不可读）。
   改用 --pop-* 后：浅色页得浅抽屉，深色页得深抽屉，自动成立。 */
.nav-drawer{
  position:fixed;inset:0;z-index:2000;
  background:rgba(20,18,24,.42);
  backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s;
}
.nav-drawer.open{opacity:1;visibility:visible}
.nav-drawer-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(84vw,320px);background:var(--pop-bg);
  border-left:1px solid var(--pop-line);
  padding:22px 22px 32px;overflow-y:auto;
  transform:translateX(100%);transition:transform .26s cubic-bezier(.22,.7,.3,1);
  box-shadow:-8px 0 32px rgba(0,0,0,.24);
}
.nav-drawer.open .nav-drawer-panel{transform:translateX(0)}
.nav-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--pop-line);
}
.nav-drawer-head strong{font-size:1rem;letter-spacing:1px;color:var(--pop-text-strong)}
.nav-drawer-close{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--pop-line);border-radius:9px;background:transparent;
  cursor:pointer;font-size:1.1rem;color:var(--pop-text);
}
.nav-drawer-links{display:flex;flex-direction:column;gap:2px;margin-bottom:22px}
.nav-drawer-links a{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 12px;border-radius:9px;text-decoration:none;
  color:var(--pop-text);font-size:.95rem;font-weight:600;letter-spacing:1px;
  min-height:44px;transition:background .2s,color .2s;
}
.nav-drawer-links a:hover{background:var(--pop-hover)}
.nav-drawer-links a[aria-current="page"]{color:var(--pop-gold);background:var(--pop-hover)}
.nav-drawer-sep{height:1px;background:var(--pop-line);margin:16px 0}
.nav-drawer-group-label{
  font-size:.75rem;letter-spacing:2px;color:var(--pop-text-dim);
  text-transform:uppercase;margin-bottom:8px;padding-left:12px;
}
.nav-drawer-legal{display:flex;flex-direction:column;gap:2px}
.nav-drawer-legal a{
  padding:9px 12px;border-radius:8px;text-decoration:none;
  color:var(--pop-text-dim);font-size:.84rem;min-height:40px;display:flex;align-items:center;
}
.nav-drawer-legal a:hover{background:var(--pop-hover);color:var(--pop-text)}

/* ---------- 6. 活跃导航：颜色 + 底色 + 下划线，三重区分 ---------- */
.nav-item.active{
  color:var(--gold) !important;
  opacity:1 !important;
  font-weight:700;
  background:var(--gold-dim);
  border-radius:8px;
  box-shadow:inset 0 -2px 0 var(--gold);
}

/* ---------- 7. 页脚：与正文同一条对齐线 ---------- */
@media (max-width:768px){
  .footer-main-links,.footer-legal-links{gap:14px 18px !important}
}
.footer-main-links a,.footer-legal-links a{
  display:inline-flex;align-items:center;min-height:32px;
}

/* ---------- 8. 辅助文字最小字号与点击区 ---------- */
/* 正文不低于 15px（页面基准），辅助说明不低于 13px */
.footer-icp,.footer-copyright,.m-released,.rank-help{font-size:.78rem}

/* 通用：小徽章/标签统一可核验感的排版基线 */
.lm-tag{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.75rem;letter-spacing:.5px;padding:2px 8px;border-radius:6px;
  border:1px solid var(--line2);color:var(--text3);background:var(--bg2);
  white-space:nowrap;
}

/* ---------- 9. 名称可核验徽章：三态语义 ---------- */
/* api      —— 本次在线匹配到接口 ID，名称可回溯（绿）
   baseline —— 基线收录，来自最近一次成功的在线核验（中性，不制造焦虑）
   seed     —— 仅有本地收录、无在线来源（琥珀，提示需以官方公告为准） */
.m-name-badge.baseline{color:var(--text3);background:var(--bg2);border:1px solid var(--line2)}

/* ---------- 10. 账户区（导航右轨，2026-09-12 重做） ---------- */
/* 改版前的问题（用户反馈「个人的那个图标很突兀，放在旁边很不搭」）：
   ① 形态：全站唯一的实心金圆（#9a7d3c + 白字），周围全是描边/幽灵态元素，
      视觉重量失衡，看着像多出来的第 7 个导航项；
   ② 几何：塞在中轨里把导航组整体推离中心（见 .nav-actions 注释）；
   ③ 配色：下拉面板硬编码 #fff/#555/#333，hover 变红 #e74c3c，与全站金色体系冲突。
   现在：账户入口是「头像 + 用户名 + 箭头」的浅描边胶囊，语言与导航一致；
   下拉改用主题变量与金色 hover；保留原有全部 id，认证逻辑无需重写。
    注意：≤900px 只隐藏 .nav-item，本区块必须保留 —— 整块隐藏会让用户在
   所有窄屏设备上失去登录入口。
   配色：只读 --chip-* 头部控件令牌（默认浅色）。**不得**读页面级
   --text/--line2/--gold —— 首页那两个变量是给夜空 hero 用的浅色值，
   导航栏在展开态是浅色实底，会导致文字整片糊掉（2026-09-13）。 */
.user-avatar-wrap{position:relative;min-width:0}

/* 账户按钮：默认只有 1px 描边；hover 或展开时才上金色 */
.user-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:38px;max-width:200px;padding:0 12px 0 5px;
  border:1px solid var(--chip-line);border-radius:999px;
  background:transparent;color:var(--chip-text);
  font-family:var(--sans);font-size:.84rem;font-weight:600;letter-spacing:.5px;
  cursor:pointer;user-select:none;
  text-decoration:none;   /* 公开页（about / sources）用的是 <a> 版本 */
  transition:border-color .2s,background .2s,color .2s;
}
.user-btn:hover,
.user-btn[aria-expanded="true"]{border-color:var(--chip-gold);background:var(--chip-hover-bg);color:var(--chip-gold)}

/* 头像：实心金 → 浅底 + 同色系描边，视觉重量降下来，不再抢导航 */
.user-avatar{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--chip-gold-dim);color:var(--chip-gold);
  border:1px solid var(--chip-gold-line);
  font-size:var(--fs-xs);font-weight:700;line-height:1;
}
.user-avatar svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7}
.user-btn-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:104px}
.user-btn-caret{
  flex:0 0 10px;width:10px;height:10px;
  stroke:currentColor;fill:none;stroke-width:2;opacity:.6;
  transition:transform .2s;
}
.user-btn[aria-expanded="true"] .user-btn-caret{transform:rotate(180deg)}

/* ≤1200px：导航已开始收紧，账户按钮退化为纯图标（保持 38px 可点区域），
   避免与 6 个导航项争抢宽度 */
@media (max-width:1200px){
  .user-btn{width:38px;padding:0;justify-content:center}
  .user-btn-name,.user-btn-caret{display:none}
}

/* 下拉面板：弹层令牌 + 金色 hover，带小箭头与展开动画 */
.user-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;z-index:220;
  min-width:200px;padding:6px;
  background:var(--pop-bg);border:1px solid var(--pop-line);border-radius:var(--r-card);
  box-shadow:var(--pop-shadow);
  transform-origin:top right;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.user-dropdown::before{
  content:"";position:absolute;top:-5px;right:20px;width:9px;height:9px;
  background:var(--pop-bg);border-left:1px solid var(--pop-line);border-top:1px solid var(--pop-line);
  transform:rotate(45deg);
}
.user-dropdown.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* 用户名已在胶囊上显示，这里只放身份标记（管理员/称号），无标记时整行隐藏 */
/* ★ 弹层的排版必须由弹层自己声明，不得继承页面 body ——
   与 --pop-* / --chip-* 同一个道理：弹层是浮在内容之上的独立表面，
   它的字体规格不该随「它盖住的那一页」变。
   2026-09-14 用户截图：首页账户下拉的文字比别的页面细一号。真机实测（Chromium）：
     首页        body{font-weight:300}          → 下拉条目 300 / .user-info 行高 normal
     资讯/模型等  body{font-weight:500;lh:1.7}   → 下拉条目 500 / 行高 21.2px
     AI 指南      body{font-weight:400}          → 下拉条目 400
   三个页面三种字重 —— 因为旧写法把 font-weight / line-height 全留给了继承。
   现在把这两项钉在组件上（取全站多数页面的 500 / 1.7）。 */
.user-info{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:8px 12px;margin-bottom:4px;
  border-bottom:1px solid var(--pop-line);
  font-size:.78rem;font-weight:500;line-height:1.7;color:var(--pop-text-dim);letter-spacing:.5px;
}
.user-menu-item{
  display:block;width:100%;padding:9px 12px;
  border:none;background:none;border-radius:var(--r-btn);
  font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--pop-text);
  cursor:pointer;text-align:left;line-height:1.4;letter-spacing:.5px;text-decoration:none;
  transition:background .15s,color .15s;
}
.user-menu-item:hover{background:var(--pop-hover);color:var(--pop-gold)}
.admin-badge{display:inline-block;font-size:var(--fs-xs);background:var(--gold-dim);color:var(--gold);padding:1px 7px;border-radius:6px;font-weight:700;vertical-align:middle;border:1px solid rgba(125,98,36,.28)}
/* 下拉里的身份标记跟随弹层配色：全局 .admin-badge 用的是页面金（浅色页上成立），
   在深色弹层上会变成「深棕底 + 深棕字」。作用域限定在 .user-dropdown 内。 */
.user-dropdown .admin-badge{background:var(--pop-hover);color:var(--pop-gold);border-color:var(--pop-line)}
/* 通用隐藏类：账户下拉等组件依赖它，缺了会导致菜单常驻展开 */
.hidden{display:none!important}

/* ---------- 11. 统一视觉标尺：圆角 / 字号下限 ---------- */
/* 审核发现的问题（2026-09-12）：同一站内卡片圆角出现 6/10/12/14 四种值，
   徽章圆角出现 3/4/6/9/10/12/20 七种值，辅助字号低到 8.3px（.52rem）——
   这些不是设计取向，而是各页各自演化后失同步。这里给出唯一标尺，
   后续新增组件只允许引用这些变量，不得再写魔法数字。 */
:root{
  --r-card:12px;   /* 卡片、面板 */
  --r-tag:6px;     /* 标签、徽章（非胶囊） */
  --r-btn:8px;     /* 按钮、输入框 */
  --fs-xs:.75rem;  /* 辅助文字下限 = 12px，低于此值在移动端不可读 */
}

/* 卡片圆角归一：models 网格 r6、tools 排行 r12、predict 卡 r12 / 面板 r10、
   discover 工具卡 r10 → 统一为 --r-card。 */
.model-grid,
.rank,
.predict-card,
.agi-panel,
.tool-card{
  border-radius:var(--r-card);
}

/* 标签类圆角归一：m-spec r3、m-name-badge r4、news-tag r3、rk-diff r9 等 → --r-tag。
   胶囊型（agi-stage-badge / update-badge / rk-price）保持全圆角，
   因为「胶囊」在这里承担「状态」语义，与「标签」区分是有意的。 */
.m-spec,
.m-name-badge,
.news-tag,
.lm-tag,
.rk-kind,
.rk-diff,
.aiq-fb-tag,
.idea-cat,
.scenario-tag,
.hb-daily-tag{
  border-radius:var(--r-tag);
}

/* ---------- 12. 统一空状态 ---------- */
/* 审核发现空状态有 5 种写法：内容区居中块、虚线左对齐、裸 <p>（无容器）、
   渐变虚线卡、裸 div。读者在不同页面看到的「没有内容」提示形态完全不同。
   统一为一套：虚线上边框容器 + 可选图标 + 标题 + 说明 + 可选动作。
   用法：
     <div class="empty-state">
       <svg class="empty-state-icon">…</svg>
       <p class="empty-state-title">该分类暂无内容</p>
       <p class="empty-state-hint">换个分类，或稍后刷新</p>
     </div> */
.empty-state{
  grid-column:1/-1;
  text-align:center;
  padding:48px 24px;
  border:1px dashed var(--line2);
  border-radius:var(--r-card);
  background:var(--bg2);
  color:var(--text3);
}
.empty-state-icon{
  display:block;margin:0 auto 14px;
  width:44px;height:44px;
  stroke:var(--line2);fill:none;stroke-width:1.2;
  opacity:.8;
}
.empty-state-title{
  font-size:.95rem;font-weight:600;color:var(--text2);margin-bottom:6px;
}
.empty-state-hint{
  font-size:var(--fs-xs);line-height:1.8;color:var(--text3);
  max-width:420px;margin:0 auto;
}
.empty-state-action{margin-top:16px}

/* 行内变体：用于「网格里有内容、但当前筛选结果为空」的说明条
   （models 页勾选「仅看在线核验」后一张不剩的场景）。
   它需要解释原因，属于左对齐长文本，套居中的大图标空态反而不合适 ——
   但仍复用同一套容器令牌（虚线 + --r-card + --bg2），
   避免同一站里演化出第 6 种「没有内容」的写法。 */
.empty-state.is-inline{text-align:left;padding:12px 16px;margin-top:14px}
.empty-state.is-inline .empty-state-title{font-size:.8rem;margin-bottom:4px}
.empty-state.is-inline .empty-state-hint{max-width:none;margin:0;text-align:left}

/* ---------- 13. 统一返回顶部 ---------- */
/* news / models / predict / tools / ai-homepage 各自实现了一遍（36px 与 44px
   两种尺寸、浅底与金底两种配色），其余 7 个页面则完全没有。
   这里给出唯一实现；缺失页面的按钮由 site.js 注入。
   注意：首页在深色首屏上是金色实体按钮（设计取向），它自己的样式块
   在本文件之后重新覆盖，不受此处影响。 */
.back-top{
  position:fixed;bottom:32px;right:32px;z-index:99;
  width:40px;height:40px;border-radius:50%;
  background:rgba(250,250,248,.94);
  border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.07);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s,transform .3s,border-color .2s,background .2s;
}
.back-top.show{opacity:1;transform:translateY(0);pointer-events:auto}
.back-top:hover{background:var(--bg);border-color:var(--gold);transform:translateY(-2px)}
.back-top svg{width:16px;height:16px;stroke:var(--text2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.back-top:hover svg{stroke:var(--gold)}
@media (max-width:600px){
  .back-top{bottom:20px;right:16px;width:42px;height:42px}
}

/* ---------- 14. 可横向滚动的表格容器 ---------- */
/* 窄屏下宽表格会把整个页面撑出横向滚动条。把表格包进本容器后，
   只有表格自己滚动，页面宽度不受影响。 */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:16px 0 24px;
}
.table-scroll>table{min-width:560px;margin:0}