:root{--ink:#1c2430;--mut:#5f6b7a;--line:#e5e9ef;--bg:#eef2f6;--card:#fff;
    --teal:#0f766e;--teal-d:#0b4f4a;--soft:#e7f5f3;--good:#0b7a45;--bad:#c0392b;--gold:#d49a1f;
    /* 顶栏控件字体（2026-09-16）：<button> 默认**不继承**页面字体 → 落到 UA 的 Arial，
       而内容站用真链接 <a> 继承 system-ui，两边导航宽度就差 10px（实测 453 vs 463）。
       这里显式钉一份字体栈：应用与内容站渲染完全一致（各平台都解析为系统 UI 字体）。 */
    --uifont:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.5;font-size:15px;}
  .wrap{max-width:1240px;margin:0 auto;padding:16px 20px 60px;}
  .topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 14px;}
  .brand{font-weight:800;font-size:19px;color:var(--teal-d);text-decoration:none;} .brand b{color:var(--teal);}
  .brandsub{font-size:11px;font-weight:600;color:#5f6b7a;margin-left:10px;letter-spacing:.1px;}
  .topnav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;}
  /* ⚠️ 选择器同时写 button 与 a：内容站（guides/calculators/terms/privacy）用的是真链接，
     它们只链 css/nav.css（本文件抽取出来的同一份），不能有第二处定义否则又会漂移。
     应用内的 .topnav 里没有 <a>，所以对应用零影响。
     line-height:normal 是必须的：<button> 默认就是 normal（应用现状不变），
     而 <a> 会继承内容站的 body{line-height:1.75} → 导航项 31px 被撑成 39px、
     导航条 53px 变 58px（实测出来的），钉住行高两边才真一致。 */
  .topnav button,.topnav a{border:0;background:none;padding:7px 12px;border-radius:8px;cursor:pointer;color:var(--mut);font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;line-height:normal;font-family:var(--uifont);}
  .topnav button.active,.topnav a.active{background:var(--soft);color:var(--teal-d);}
  /* 导航项的"短标签"（目前只有首项用）：桌面保留完整文案，手机上换短的。
     为什么这么做（2026-09-20 实测）：375px 下 6 项共 332px、可用 303px → 差 29px，
     而 "Start Here" 一项就占 69px，换成 "Start" 省 27px → 一行放得下。
     不直接把文案全局改成 "Start"/"Home"："Start Here" 是这个产品的引导语义
     （落地页正文里也写着 "Start Here = what SeeFund is, …"），改成 "Home" 就变成
     一个通用首页标签，反而丢信息。桌面宽度够，没理由跟着降级。
     ⚠️ 选择器必须带 `.topnav` 前缀：css/nav.css 由 tools/split_pages.py 按 NAV_CSS_KEYS
     抽取，带前缀才会一起进内容站，否则内容页会两个标签同时显示。 */
  .topnav .lbl-sm{display:none;}
  body.pw-phone .topnav .lbl-sm,body.pw-tab .topnav .lbl-sm{display:inline;}
  body.pw-phone .topnav .lbl-lg,body.pw-tab .topnav .lbl-lg{display:none;}
  /* Learn ▾ 下拉（合并 Guides/Tools，收敛顶栏项数） */
  .navdd{position:relative;display:inline-flex;}
  .navdd .navdd-btn{border:0;background:none;padding:7px 12px;border-radius:8px;cursor:pointer;color:var(--mut);font-size:14px;font-weight:600;}
  .navdd .navdd-btn.active{background:var(--soft);color:var(--teal-d);}
  .navdd-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:196px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 26px rgba(15,40,60,.14);padding:6px;z-index:80;}
  .navdd-menu button,.navdd-menu a{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-radius:8px;font-size:13.5px;cursor:pointer;color:var(--ink);font-weight:600;text-decoration:none;line-height:normal;font-family:var(--uifont);}
  .navdd-menu button:hover,.navdd-menu a:hover{background:var(--soft);color:var(--teal-d);}
  #savedNavBtn.active{background:var(--soft);color:var(--teal-d);}
  /* ⚠️ 2026-09-20 删除了 `.topnav.ovr`（横滑时的右缘渐隐）。手机端导航不再横滑
     （见下方 ≤640 的说明），也就没有"还有更多"需要提示；而 mask/overflow 正是
     把 Learn 下拉裁掉、让用户以为"点了没反应"的元凶。别再把它加回来。 */
  /* 窄屏/手机：顶栏分两行 —— 第一行 brand + 搜索 + Saved + Sign in，第二行导航（可换行，不横滑）。
     ⚠️ 2026-09-20 手机实测（用户报「Sign in 跑到第二行」「Learn 点不了」）：
       ① 导航原来用 `overflow-x:auto` + 右缘渐隐。两个后果：
          · `Learn ▾` 是最后一项，实测 scrollWidth 369 > 可视 309 → **被推到屏幕外**，自然点不到；
          · 导航上的 overflow/mask 会把 Learn 下拉（它是导航内部的绝对定位子元素）一起裁掉，
            所以即使点到了也看不见菜单 —— 那才是"点不了"的真正原因，不是没绑事件。
          ⇒ 手机端改成**不滚动、允许换行**：宁可导航占两行，也不能有看不见/点不到的项。
       ② `margin-left:auto` 原来挂在 `#savedNavBtn` 上：它一个人吃掉整行剩余空间，
          把 Sign in 挤到下一行。靠右应由**右组的第一项**（`.gsbox`）带动。
       ③ 搜索框**不动**（用户 2026-09-20 明确要求：手机上别动搜索）——空间从两个按钮身上省，
          见样式表末尾那条 ≤640 规则（只压横向内边距，高度仍受 44px 触控目标规则保护）。 */
  @media (max-width:640px){
    .topnav{flex-wrap:wrap;overflow:visible;}
    .topnav button,.topnav a,.topnav .navdd-btn{font-size:12px;padding:6px 6px;}
    /* 手机上用短标签（见上面 .lbl-sm 的说明）：桌面不动 */
    .topnav .lbl-lg{display:none;}
    .topnav .lbl-sm{display:inline;}
    #styles .chip{font-size:12.5px;padding:6px 9px;}
    .brandsub{display:none;}
    .topbar{padding:8px 12px;gap:6px;}
    .gsbox{margin-left:auto;}                   /* 右组从这里开始靠右（原来是 Saved 抢了 auto） */
    #savedNavBtn{margin-left:0;}
    .brand{font-size:17px;}
    /* 下拉项撑到 44px 触控目标（只改手机：桌面鼠标精度高，31px 已够 WCAG 24×24） */
    .navdd-menu button,.navdd-menu a{padding:12px 12px;font-size:14px;}
    .navdd{position:static;}
    /* ⚠️ 必须给 .topbar 定位：手机上 .navdd 改 static 后，菜单的基准变成头部；
       若头部没定位，`top:100%` 会按**视口**算 → 菜单直接落到屏幕外（实测 y=848，
       点开却"什么都没有"）。这正是"Learn 点不了"的第二层坑，别只改 navdd。 */
    .topbar{position:relative;}
    .navdd-menu{left:8px;right:8px;width:auto;min-width:0;top:calc(100% + 4px);}
  }
  /* 320px 级别的老窄机（iPhone SE 一代）：四个控件确实放不下一行，
     这里只把 brand 与按钮再收一点；「Sign in」仍可能折到第二行 —— 可接受的降级，
     不再为它牺牲搜索框（用户 2026-09-20 的选择）。 */
  @media (max-width:360px){
    .brand{font-size:16px;}
    #savedNavBtn,#signBtn,#acctArea .btn{font-size:12px!important;padding:5px 7px!important;}
  }
  /* Phone 预览（pw-phone 类）必须与真机 ≤640 规则**逐条**对齐。
     ⚠️ 2026-09-20 吃掉三轮返工的教训：预览只抄了一半规则 ——
       ① 搜索框预览 30px / 真机 34px，② 导航预览还是桌面字号(14px/12px padding)
       而真机是 12px/6px padding → 预览里导航折成两行、头部比真机高近一倍，
       于是"两个按钮看着比搜索框高""手机版还是不对"。**用户是拿预览判断手机版的，
       预览不同尺 = 用户看到的永远不是真机的样子。** 下面每条都对应 ≤640 里的一条。 */
  body.pw-phone .brandsub{display:none;}                                  /* ↔ ≤640 .brandsub */
  body.pw-phone #styles .chip{font-size:12.5px;padding:6px 9px;}          /* ↔ ≤640 #styles .chip */
  body.pw-phone .topbar{padding:8px 8px;gap:4px;position:relative;}       /* ↔ ≤640 .topbar（含定位，见"Learn 点不了"）*/
  body.pw-phone .gsbox{margin:0 2px 0 auto;}                              /* ↔ ≤640 .gsbox */
  body.pw-phone #savedNavBtn{margin-left:0;}                              /* ↔ ≤640 #savedNavBtn */
  body.pw-phone .brand{font-size:16px;}                                   /* ↔ ≤640 .brand */
  body.pw-phone #savedNavBtn,body.pw-phone #acctArea .btn{font-size:12.5px!important;padding:5px 6px!important;margin-right:0!important;}
  body.pw-phone #signBtn{font-size:12.5px!important;padding:5px 7px!important;}
  /* 导航规格（真机 ≤640 是 12px / 6px padding）—— 预览漏的就是这两条，导致预览里导航换行、头部虚高 */
  body.pw-phone .topnav{flex-wrap:wrap;overflow:visible;}
  body.pw-phone .topnav button,body.pw-phone .topnav a,
  body.pw-phone .navdd .navdd-btn{font-size:12px;padding:6px 6px;}
  body.pw-phone .navdd{position:static;}                                  /* ↔ ≤640 .navdd */
  body.pw-phone .navdd-menu{left:8px;right:8px;width:auto;min-width:0;top:calc(100% + 4px);}  /* ↔ ≤640 .navdd-menu */
  body.pw-phone .navdd-menu button,body.pw-phone .navdd-menu a{padding:12px 12px;font-size:14px;}
  .pro-badge{background:#fdecea;color:var(--bad);border:1px solid #f3c6c6;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;}
  .notice{margin:10px 0 4px;background:#fff7e0;border:1px solid #f0dc9a;color:#6b4d00;font-size:12.5px;border-radius:12px;padding:7px 12px;}
  .devbar{display:flex;gap:6px;margin:8px 0;}
  /* ⚠️ 设备预览条（devbar）**只给开发/自己看**：它是模拟器，不是适配机制 ——
     真机适配由 @media（≤900 / ≤640 / ≤400）完成，devbar 只是在宽屏上预览那些状态。
     默认隐藏；只有 body.sf-dev 时才出现，而那个类由下方 SF-DEV 脚本按条件添加
     （本机开发 / ?dev=1 / 登录管理员）。线上访客看不到它。 */
  body:not(.sf-dev) .devbar{display:none !important;}
  .devbar button{border:1px solid var(--line);background:var(--card);padding:4px 12px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--mut);}
  .devbar button.active{background:var(--teal);color:#fff;border-color:var(--teal);}
  #stage{margin:0 auto;width:100%;max-width:100%;transition:max-width .25s;}
  body.pw-tab #stage{max-width:820px;} body.pw-phone #stage{max-width:400px;}
  body.pw-tab .topbar{max-width:820px;margin:0 auto;}
  body.pw-phone .topbar{max-width:400px;margin:0 auto;}
  body.pw-phone .topnav{margin-left:0;width:100%;order:3;justify-content:flex-start;}
  body.pw-phone .topnav button,body.pw-phone .topnav a{font-size:12px;padding:5px 7px;}
  .footbox{max-width:100%;margin:0 auto;}
  body.pw-tab .footbox{max-width:820px;} body.pw-phone .footbox{max-width:400px;}
  /* 设备预览：**所有** .wrap 直接子元素都要收进“手机/平板框”。只收 topbar/#stage/footbox 不够
     —— 提醒条（#trialBar / #annBar）与 devbar 仍是全宽，看起来就像从框里溢出来
     （用户截图：「这不是溢出吗」）。 */
  body.pw-tab .wrap>*,body.pw-phone .wrap>*{margin-left:auto;margin-right:auto;}
  body.pw-tab .wrap>*{max-width:820px;}
  body.pw-phone .wrap>*{max-width:400px;}
  .screen{display:none;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;margin-top:4px;box-shadow:0 6px 18px rgba(20,40,60,.05);}
  .screen.show{display:block;}
  h1{font-size:29px;line-height:1.2;margin:4px 0 10px;color:var(--teal-d);}
  h2{font-size:19px;margin:4px 0 8px;color:var(--teal-d);}
  /* 页面主标题：语义上必须是 h1（每页恰好一个 —— 读屏与搜索靠它判断"这页是什么"），
     但视觉上不能变成首页那个 29px 大标题。下面这个类把字号钉在原来的 19px，
     所以是**零视觉变化**的纯语义修复。
     为什么不去改 h1 的样式：那会把首页 hero 一起改小。
     （2026-09-16 全站体检：8 个应用页 h1 数量为 0，这条规则覆盖其中 6 个有静态标题的屏。） */
  h1.screenh1{font-size:19px;margin:4px 0 8px;}
  .sub{color:var(--mut);max-width:780px;margin:0 0 14px;}
  /* 间距一律走 4px 栅格（用户 2026-09-12 授权按设计规范自驱）：原 5/3/6px 是"差一点"值，已废弃 */
  .pillrow{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0;align-items:center;}
  /* Rank 筛选区用"组"表达层级（proximity），而不是靠 micro-margin 数值：
     组内 4px（说明句紧贴它解释的那一行）· 组间 8px 手机 / 12px 桌面 —— 2:1 对比，4 栅格上 */
  .fgrid{display:flex;flex-direction:column;gap:8px;margin:0 0 8px;}
  .fgroup{display:flex;flex-direction:column;gap:4px;}
  .fgroup>*{margin:0;}   /* 组内间距只由 gap 决定（含 <p> 的浏览器默认 margin 也要清掉） */
  /* Style 分类 chip 容器：**宽屏不换行、窄屏换行**。
     为什么：6 个分类在手机宽度下必然超出视野（实测 457px > 351px），
     横滑 + 渐隐提示都不够（用户 2026-09-12："显示有问题"）→ 窄屏直接换行，6 个全看得见。 */
  #styChips{display:inline-flex;gap:4px;flex-wrap:nowrap;}
  /* ⚠️ `overflow-y:hidden` 是**必需**的，不是可选优化。
     只写 `overflow-x:auto` 时，按 CSS 规范另一轴的 `visible` 会被**计算成 `auto`**，
     于是行变成纵向也可滚动。而 `.chip::after`（44px 触控区）上下各伸出 8px，
     正好把行撑出 8px 纵向溢出（实测 clientH=27 / scrollH=35）→ 鼠标停在行上滚动时
     滚的是**行**而非页面，按钮被上下裁掉，看起来"显示不全"（用户 2026-09-12 报告）。
     显式关掉纵向溢出即可根治。 */
  .pillrow.norow{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .pillrow.norow::-webkit-scrollbar{display:none;}
  /* 横滑提示：右端渐隐（只在还能继续滑时加 .scrollable）。
     为什么必需：手机上第 6 个 chip 在视野外，而横滑条被隐藏 → 用户不知道右边还有东西。 */
  .pillrow.norow.scrollable{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),rgba(0,0,0,0));
                            mask-image:linear-gradient(90deg,#000 calc(100% - 26px),rgba(0,0,0,0));}
  .pillrow .kbd{font-size:11.5px;}
  .chip{border:1px solid var(--line);background:#fafbfc;border-radius:999px;padding:7px 12px;font-size:12.5px;cursor:pointer;color:var(--mut);font-weight:600;white-space:nowrap;}
  /* 触控目标：视觉保持紧凑（~31px），用透明伪元素把热区补到 ≥44px（不占布局）。
     为什么必须：1y/3y/5y/10y 紧挨着，点错窗口 = 看到完全不同排名（数据误读）。 */
  #F .chip{position:relative;}
  #F .chip::after{content:'';position:absolute;left:-2px;right:-2px;top:-8px;bottom:-8px;border-radius:999px;}
  .chip.sm{padding:6px 11px;font-size:12px;white-space:nowrap;border-radius:999px;}
  .chip.active{background:var(--teal);border-color:var(--teal);color:#fff;}
  .chip.lock{color:#6b5400;}
  /* 统一键盘焦点可见环（WCAG 2.4.7） */
  .btn:focus-visible,.chip:focus-visible,.topnav button:focus-visible,.devbar button:focus-visible,.arrow:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
  /* Backtest workspace tab strip */
  #rowMode{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:#f6f8fa;padding:5px;display:flex;gap:4px;flex-wrap:wrap;}
  #rowMode .kbd{display:none;}
  #rowMode .chip{border:none;background:transparent;border-radius:9px;color:#3a4552;font-weight:600;padding:8px 12px;font-size:13px;}
  #rowMode .chip:hover{background:#e9edf1;}
  #rowMode .chip.active{background:var(--teal);color:#fff;box-shadow:0 1px 3px rgba(16,86,86,.25);}
  #rowMode .chip .pro-badge{margin-left:2px;}
  /* Start sensitivity 卡内容压缩：紧凑表格，减少滚动量，便于整块可视 */
  #btaSensWrap .cmp th,#btaSensWrap .cmp td{padding:3px 6px;font-size:12px;line-height:1.3;}
  #btaSensWrap .cmp td div{line-height:1.25;}
  #btaSensWrap .cmp td .kbd{font-size:10px;}
  #btaSensWrap .kbd{font-size:11px;}
  /* 表不设纵向滚动：内容完整展示，仅窄屏由 #btaSensWrap 横向滚动，避免横纵双条 */
  #btaSensWrap .cmp{margin:4px 0 8px;}
  /* 热力图（Every start year × hold length）**不是** .cmp 那一类：
     它全是数字的 7 列**色块场**，靠颜色读 → 应铺满容器（与全站图表铺满一致）；
     而 .cmp 那种含"基金名"文字列的表才该 width:auto 居中（撑满会让名字列空得离谱）。
     2026-09-15 用户："这个敏感表格看起来是适配手机版的吧，桌面和平板看起来有点别扭"
     —— 就是上面那条把"窄+居中"一并套到了热力图上。（桌面量到：表宽 361px / 容器 ~1000px） */
  #btaHeat .cmp{margin:4px 0 8px;}
  #btaHeat .cmp th,#btaHeat .cmp td{white-space:nowrap;}
  @media(min-width:561px){
    #btaHeat .cmp th,#btaHeat .cmp td{padding:6px 10px;font-size:12.5px;}
  }
  .btn{display:inline-block;border:0;border-radius:10px;padding:10px 17px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;}
  .btn-primary{background:var(--teal);color:#fff;} .btn-primary:hover{background:var(--teal-d);}
  .btn-ghost{background:#fff;color:var(--teal-d);border:1px solid var(--teal);}
  .btn-gold{background:linear-gradient(120deg,#b8860b,#d49a1f);color:#2f2306;}
  .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:13px;margin:14px 0;}
  .tile{background:#fafbfd;border:1px solid var(--line);border-radius:12px;padding:13px 15px;display:flex;flex-direction:column;}
  .tile h2,.tile h3{margin:0 0 5px;font-size:15px;color:var(--teal-d);} .tile p{margin:0;font-size:13px;color:var(--mut);}
  .tile p:first-of-type{flex:1 1 auto;}

  /* hero comparison chart */
  .hero{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:8px 0 4px;background:linear-gradient(180deg,#fbfdfe,#f4f8f9);}
  .hero .lg{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--mut);margin:6px 0 2px;}
  .lg i{display:inline-block;width:16px;height:4px;border-radius:2px;margin-right:5px;vertical-align:middle;}
  .lg button{border:0;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--mut);}
  .lg button.sel{font-weight:700;color:#fff;border-color:transparent;}

  /* swipe */
  .card{border:1px solid var(--line);border-radius:16px;padding:17px 19px;background:#fff;box-shadow:0 10px 26px rgba(15,40,60,.08);}
  .c-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .c-style{font-size:12px;color:var(--teal-d);background:var(--soft);padding:3px 9px;border-radius:999px;font-weight:700;}
  .c-name{font-size:17px;font-weight:800;}
  .fav{background:none;border:none;padding:0;margin:0 0 0 auto;cursor:pointer;font-size:21px;color:#64748b;user-select:none;line-height:1;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;} .fav:hover{background:#f1f5f9;} .fav.on{color:#e34f4f;} .fav:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
  .chartbox{border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin:11px 0;background:#fcfdfe;}
  .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;margin:6px 0 11px;}
  .metric{background:#fafbfd;border:1px solid var(--line);border-radius:10px;padding:8px 11px;}
  .metric .k{font-size:11.5px;color:var(--mut);} .metric .v{font-size:16px;font-weight:800;}
  .v.good{color:var(--good);} .v.bad{color:var(--bad);}
  .plain{border-left:4px solid var(--teal);background:var(--soft);border-radius:0 10px 10px 0;padding:9px 14px;font-size:14px;margin:8px 0;}
  .honest{border-left:4px solid var(--bad);background:#fdf3f2;border-radius:0 10px 10px 0;padding:8px 12px;font-size:13px;margin:8px 0;}
  .navbtns{display:flex;gap:8px;align-items:center;margin-top:13px;flex-wrap:wrap;}
  .arrow{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 13px;cursor:pointer;font-weight:700;color:var(--teal-d);}
  .dots{display:flex;gap:6px;margin-left:auto;} .dots i{width:8px;height:8px;border-radius:50%;background:#d5dbe3;} .dots i.on{background:var(--teal);}
  .lockcard{margin-top:12px;border:1px dashed var(--gold);border-radius:12px;padding:11px 14px;background:#fffdf6;display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
  .lockcard .big{font-size:15px;font-weight:700;color:#7a5b00;} .lockcard .small{font-size:12.5px;color:var(--mut);}
  /* 口径标签：把"这段数字看的是哪个时间范围"**写在标题上**（2026-09-16 用户要求）。
     判据：同一页出现两个不同口径的「最深回撤」时，口径必须在用户读数字**之前**就看到，
     不能等他在正文里找到那行小字。 */
  .scopechip{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    padding:1px 7px;border-radius:99px;background:#eef2f6;color:#475569;vertical-align:2px;margin-left:7px;white-space:nowrap;}
  .scopechip.hist{background:#fdf3e0;color:#7a5b00;border:1px solid #f0d98a;}
  /* 双口径对照的两行：分隔线只出现在**两行之间**。
     第一版给每行都加了 border-top，于是第一行上方多出一根跟外框平行的细线
     （用户：“-53.4 顶上那根线有点多余且难看”）。 */
  .scoperow{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:5px 0;}
  .scoperow+.scoperow{border-top:1px solid rgba(212,154,31,.32);}
  table{border-collapse:collapse;width:100%;font-size:13px;margin:10px 0;}
  th,td{border:1px solid var(--line);padding:7px 9px;text-align:left;} thead th{background:#f4f6f9;}
  tr:nth-child(even) td{background:#fafbfc;}
  .rowlink{cursor:pointer;} .rowlink:hover td{background:#eef7f6;}
  table.yf{border-collapse:separate;border-spacing:0;margin:8px 0 6px;}
  table.yf th,table.yf td{border:none;border-bottom:1px solid var(--line);background:transparent;}
  table.yf thead th{border-bottom:1px solid var(--line);}
  table.yf th:nth-child(n+2),table.yf td:nth-child(n+2){border-left:1px solid var(--line);}
  table.yf thead th.year,table.yf tbody td.year{position:sticky;left:0;}
  table.yf thead th.year{z-index:3;background:#f4f6f9 !important;border-right:1px solid var(--line);box-shadow:none;}
  table.yf tbody td.year{z-index:2;background:#fff !important;border-right:1px solid var(--line);box-shadow:none;}
  .svRow{display:flex;align-items:center;gap:12px;padding:7px 2px;border-bottom:1px solid var(--line);}
  .svRow:last-child{border-bottom:none;}
  .svName{flex:1;min-width:0;font-size:13px;line-height:1.4;}
  .svActs{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:none;}
  /* Rankings 列表：桌面=表格；手机(≤640)=卡片列表(方案A)；Phone 预览档同样强制卡片 */
  #rankTable table td:first-child{min-width:190px;}
  .rankCards{display:none;}
  .rankCard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px 9px;margin:0 0 6px;box-shadow:0 1px 2px rgba(20,40,60,.03);line-height:1.25;}
  .rankCard:active{background:#f2faf8;}
  .rankCard .rcTop{display:flex;align-items:center;gap:8px;}
  .rankCard .rcId{display:flex;align-items:baseline;gap:6px;min-width:0;flex:1;}
  .rankCard .rcId b{font-size:14px;color:#0f766e;flex:none;line-height:1.25;letter-spacing:.01em;}
  .rankCard .rcId span{font-size:11.5px;color:#3a4552;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .rankCard .rcCmp{flex:none;}
  .rankCard .rcCmp button{background:#fff;color:#0f766e;border:1px solid #0f766e;border-radius:999px;width:24px;height:24px;font-size:14px;line-height:1;cursor:pointer;}
  .rankCard .rcCmp button.on{background:#0f766e;color:#fff;}
  /* 无障碍：卡片=整卡按钮开详情，对比钮=右上角独立按钮（不嵌套、可键盘 Tab 到） */
  .rankCard{position:relative;padding:8px 38px 9px 10px;}
  .rankCard .rcOpen{display:block;width:100%;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;}
  .rankCard .rcOpen:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:8px;}
  .rankCard .rcOpen:hover b{text-decoration:underline;}
  .rankCard .rcCmp{position:absolute;top:6px;right:8px;}
  .fundOpen{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;display:block;width:100%;}
  .fundOpen:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
  .fundOpen:hover div:first-child{text-decoration:underline;}
  .rankCard .rcChips{display:flex;gap:2px;margin-top:5px;padding-top:5px;border-top:1px dashed #e3e8ef;}
  .rankCard .rcC{flex:1 1 0;min-width:0;text-align:center;}
  .rankCard .rcC em{display:block;font-style:normal;font-size:10px;color:#5f6b7a;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rankCard .rcC b{display:block;font-size:12px;color:#2a3441;line-height:1.25;font-variant-numeric:tabular-nums;}
  .rankCard .rcC i{display:block;font-style:normal;font-size:10px;color:#5f6b7a;line-height:1.2;}
  .rankCard .rcC.rcEm b{font-size:14.5px;color:#0f766e;}
  body.pw-phone .rankCards{display:block;}
  body.pw-phone #rankTable table{display:none;}
  @media (max-width:640px){
    #rankTable table{display:none;}
    #rankTable .rankCards{display:block;}
  }
  .tkr{font-weight:800;}
  .mini{display:inline-block;height:9px;border-radius:3px;}
  .searchbox{display:flex;gap:8px;flex-wrap:wrap;}
  .searchbox input{flex:1;min-width:200px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;}
  .rank-metric{font-size:11px;color:var(--mut);margin-left:4px;}
  .empty{padding:30px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:12px;}
  .edu-bar{background:#eef7f6;border-radius:10px;padding:9px 13px;font-size:13px;color:#0b4f4a;margin:10px 0;}
  .asterisk{font-size:11.5px;color:var(--mut);margin-top:8px;}
  /* hero chart v2 */
  .lgbtns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
  .lgbtn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 11px;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:#3d4653;font-weight:700;}
  .lgbtn i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;}
  .lgbtn.on{color:#fff;border-color:transparent;}
  #heroRealSvg{width:100%;height:auto;display:block;}
  /* 走势图 SVG 随容器全宽展开（高度交给 viewBox 比例），修复桌面/平板 letterbox 不铺满；
     保留刻意做细横条的图（如 height=30 的仓位/防守条）不变 */
  /* 图内所有 svg 一律铺满宽度、高度随 viewBox 走 —— **不要再用 :not([height="30"]) 排除**。
     历史：旧写法特意把仓位条（height="30"）排除在外，它就保留了固定高度、按自己的
     长宽比（640:34）缩放居中 → 与主图宽度不一致（用户 2026-09-16：“下图宽度貌似没有
     跟主图匹配”）。而主图本来就被这条规则拉满 —— 两者差异全来自那个排除条件。
     ⚠️ 任何“给某个图单独写死 height 属性”的写法都会被这条规则盖掉；
     要调高度就改 viewBox 的 H，别改 height 属性（否则又会变成两个尺度）。 */
  .chartbox svg{width:100% !important;height:auto !important;display:block !important;}
  .gser{transition:opacity .3s;} .gser.dim{opacity:.07;}
  .gser path{fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(20,30,50,.18));}
  .band{fill:rgba(220,38,38,.05);}
  .htick{font:11px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;fill:#a2aab5;}
  .hv{font:700 12.5px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;}
  .hbase{stroke:#d9dee6;stroke-width:1;stroke-dasharray:3 5;}
  .hs{stroke-dashoffset:1;animation:draw 1.6s cubic-bezier(.5,0,.6,1) forwards;}
  @keyframes draw{to{stroke-dashoffset:0;}}
  .hgrid{stroke:#eef1f5;stroke-width:1;stroke-dasharray:2 4;}
  .hpct{font:11px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;fill:#9aa3af;}
  .heroHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
  .heroTitle{font-size:13px;font-weight:800;color:#2a3441;}
  .heroTitle small{font-weight:500;color:#9aa3af;margin-left:8px;font-size:12px;}
  .lgbtn em{font-style:normal;font-weight:800;font-size:11.5px;opacity:.92;margin-left:3px;}
  .lgbtn.on em{opacity:1;}
  .readout{position:absolute;top:10px;left:14px;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:12.5px;box-shadow:0 6px 18px rgba(20,40,60,.15);min-width:178px;display:none;pointer-events:none;z-index:5;}
  .readout .yr{font-weight:800;color:#33404f;margin-bottom:3px;font-size:12px;}
  .readout .row{display:flex;align-items:center;gap:6px;color:#3d4653;margin:2px 0;}
  .readout .row i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none;}
  .readout .row b{margin-left:auto;font-variant-numeric:tabular-nums;}
  .crossline{stroke:#aeb8c4;stroke-width:1;stroke-dasharray:3 4;}
  .pdot{stroke:#fff;stroke-width:1.6;}
  .axword{font:700 11px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;fill:#c6ccd6;}
  /* auth / plans / admin / toast */
  .auth input,.cf input,.cf textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;background:#fff;color:var(--ink);}
  .planrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:8px 0;}
  .plan{border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff;position:relative;}
  .plan.hot{border:2px solid var(--teal);box-shadow:0 10px 24px rgba(15,118,110,.12);}
  .plan .price{font-size:26px;font-weight:800;color:var(--teal-d);line-height:1.1;}
  .plan ul{margin:10px 0 14px;padding-left:18px;font-size:13.5px;color:#3d4653;}
  .plan li{margin:4px 0;}
  .kpirow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:10px 0 14px;}
  .kpi{background:#fafbfd;border:1px solid var(--line);border-radius:12px;padding:11px 13px;}
  .kpi .v{font-size:20px;font-weight:800;color:var(--teal-d);}
  .kpi .k{font-size:11.5px;color:var(--mut);}
  .bar{height:9px;border-radius:6px;background:#eef1f5;}
  .bar i{display:block;height:9px;border-radius:6px;background:var(--teal);}
  .switchrow{display:flex;align-items:center;gap:10px;justify-content:space-between;border-bottom:1px solid var(--line);padding:10px 2px;font-size:13.5px;}
  .switch{position:relative;width:40px;height:22px;flex:none;}
  .switch input{display:none;}
  .switch i{position:absolute;inset:0;background:#d7dce3;border-radius:999px;cursor:pointer;transition:.2s;}
  .switch i:after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;}
  .switch input:checked+i{background:var(--teal);}
  .switch input:checked+i:after{transform:translateX(18px);}
  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(90px);background:#0b4f4a;color:#fff;padding:10px 20px;border-radius:999px;font-size:13.5px;opacity:0;transition:.28s;z-index:60;box-shadow:0 10px 24px rgba(0,0,0,.22);max-width:86vw;}
  .toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
  .admhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
  .foot{color:var(--mut);font-size:12px;margin-top:14px;text-align:center;}
  .linklike{position:relative;background:none;border:none;padding:0;font:inherit;color:var(--teal);cursor:pointer;text-decoration:underline;} .linklike::before{content:'';position:absolute;inset:-6px -2px;border-radius:6px;} .linklike:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px;}
  .kbd{font-size:11px;color:var(--mut);}
  /* Rank · 「基线」标（2026-09-15）：这几只没过硬门槛，是按用户决定固定入池的参照物。
     不标出来 → 榜单里出现 5 年夏普 0.16 的 VWO，看起来就像门槛漏了（用户实测反馈）。
     用中性灰而非警示色：这是"说明"，不是"错误"。 */
  .bTag{display:inline-block;margin-left:5px;padding:0 5px;border:1px solid #cbd5e1;border-radius:4px;background:#f8fafc;color:#526071;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px;cursor:help;}
  .range{width:100%;}
  @media (max-width:640px){.screen{padding:15px 13px;} .topnav{margin-left:0;width:100%;order:3;justify-content:flex-start;}}
  @media (max-width:560px){.screen{overflow-x:hidden;} #btaCmp,#savedList,#pfYears{overflow-x:auto;-webkit-overflow-scrolling:touch;} #btReport{overflow-x:hidden;}}
  /* 触控目标：**只在移动端**把导航与选项芯片撑到 44px（iOS/Android 人机界面指南）。
     为什么不改桌面：鼠标精度足够，31px 已满足 WCAG 2.2 的 24×24 最小值；
     把桌面 header 也撑高才是"越改越差"。
     为什么不改上面那三处 padding：它们在手机上是**刻意压紧**的（27px），
     改动点多必漏；这里用一条后置规则统一接管（同优先级靠顺序胜出）。
     2026-09-16 全站体检：手机端可点元素里 rank 页 78/126、其它页 20~28 个低于 44px。 */
  @media (max-width:640px){
    .topnav button,.topnav a,.topnav .navdd-btn{min-height:44px;display:inline-flex;align-items:center;}
    .chip,.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  }
  /* devbar 的"Phone"预览是 CSS 类模拟（不是真窄屏），媒体查询不会触发 ——
     这里补一条，让预览看到的就是手机上真实的样子（否则预览与实机不一致，会误导验收）。 */
  body.pw-phone .topnav button,body.pw-phone .topnav a,body.pw-phone .topnav .navdd-btn,
  body.pw-phone .chip,body.pw-phone .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  /* Explore · 组合 vs 单基金对比表 */
  .cmp{margin:6px 0 10px;width:100%;} .cmp th{font-size:10.5px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.03em;text-align:left;padding:4px 10px 4px 0;} .cmp td{font-size:12px;padding:4px 10px 4px 0;} .cmp th.num,.cmp td.num{text-align:right;white-space:nowrap;} .cmp tr.me td{background:#eef6f4;font-weight:700;}
  /* 表格宽度规则（2026-09-15 统一，别再逐张打补丁）：`.cmp` 一律 **铺满容器**。
     页面上图/卡片/标题都是铺满的，表格没理由缩成中间一小块 —— 用户两次指出
     （热力图、YOUR START VS LUCKIEST 表）在桌面上“像手机版”。
     · 窄屏行为不变：width:100% 与 width:auto 在 min-content 超过容器时结果一样，
       仍由各自的 overflow-x 容器（#btaSensWrap / #btaCmp / #pfYears …）内部横滚。
     · 曾想过“键值表（Profile 的 Category/ER…）应该保持收缩”并试过 .cmp.kv，
       **实测是空操作**：那张表里两行长说明（178/271 字符）的 max-content 已超过容器，
       width:auto 时本来就会铺满，而且看着正常 → 按“先量再下结论”把该例外撤掉了。 */
  /* 报告可折叠块（逐年/回撤）；手机默认折叠，选择记 localStorage，不存后端 */
  .fold{border:1px solid var(--line);border-radius:12px;background:#fbfcfd;margin:12px 0 4px}
  .fold>.fold-btn{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;padding:9px 12px;cursor:pointer;text-align:left;font:inherit;flex-wrap:wrap}
  .fold>.fold-btn .fold-t{font-weight:800;color:var(--teal-d);font-size:14px}
  .fold>.fold-btn .fold-s{color:#5f6b7a;font-size:11.5px;margin-left:2px}
  .fold>.fold-btn .fold-ic{margin-left:auto;font-size:12px;color:#55606e;transition:transform .15s;flex:none}
  .fold>.fold-btn:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
  .fold>.fold-b{display:block}
  .fold-b{padding:2px 10px 8px}
  .fold.c>.fold-b{display:none}
  .fold.c>.fold-btn .fold-ic{transform:rotate(-90deg)}
  @media (max-width:640px){
    .fold>.fold-b{display:none}
    .fold.o>.fold-b{display:block}
  }
  /* 右上角单一 Account 下拉（Saved ♥ 独立保留） */
  /* 未登录时 #acctArea 是空的 —— 零宽但它仍然是一个 flex 项，会吃掉一个 gap（手机第一行
     实测就差这零点几像素），空的时候直接不参与布局。 */
  #acctArea:empty{display:none;}
  .accdd{position:relative;display:inline-block}
  .accdd-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:196px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 26px rgba(15,23,42,.12);padding:6px;display:none;z-index:70}
  .accdd.open .accdd-menu{display:block}
  .accdd-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:8px 11px;border-radius:8px;cursor:pointer;font:inherit;color:#1e293b;font-size:13.5px}
  .accdd-menu button:hover{background:#f0faf8}
  .accdd-menu button.warn{color:#9a3412}
  .accdd-menu button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
  /* 比较图例可点击（曲线不靠颜色认——点图例显隐对应线） */
  .chartbox .lg span[data-cs-target]{cursor:pointer;border-radius:8px;padding:1px 4px;margin:-1px}
  .chartbox .lg span[data-cs-target]:hover{background:#eef6f4}
  .chartbox .lg span[data-cs-target]:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
  .chartbox .lg span[data-cs-target].off{opacity:.42}
  .chartbox .lg span[data-cs-target].off i{position:relative;overflow:hidden}
  .chartbox .lg span[data-cs-target].off i:after{content:'';position:absolute;left:-2px;right:-2px;top:50%;height:2px;background:#5f6b7a;transform:rotate(-45deg)}
  .chartbox svg [data-cs].hide{display:none}
  /* 加载中轻骨架（替代干文字） */
  .loadingbox{margin:6px 0;display:flex;align-items:center;gap:9px;color:#5f6b7a;font-size:12.5px}
  .loadingbox .bar{width:130px;height:8px;border-radius:99px;background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 37%,#e2e8f0 49%);background-size:200% 100%;animation:skl 1.1s linear infinite;flex:none}
  @keyframes skl{to{background-position:-200% 0}}
  /* 尊重系统“减弱动态效果” */
  @media (prefers-reduced-motion:reduce){
    *,*:before,*:after{animation-duration:.001s!important;transition-duration:.001s!important}
  }
  /* —— 顶栏常驻基金搜索（2026-09-12 用户要求）：查任何标的的档案 ——
     位置：紧贴主导航右侧、Saved 之前（不夹在 Saved / Sign in 中间）—— */
  .gsbox{position:relative;display:flex;align-items:center;margin:0 8px 0 2px;}
  #gsQ{width:196px;border:1px solid var(--line);border-radius:9px;padding:7px 10px 7px 29px;font-size:13.5px;background:#fff;}
  .gsic{position:absolute;left:9px;font-size:12.5px;color:#8a94a3;pointer-events:none;}
  .gsdrop{display:none;position:absolute;top:calc(100% + 6px);right:0;width:min(352px,88vw);max-height:346px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(15,40,60,.16);z-index:95;padding:6px;}
  .gsdrop.on{display:block;}
  .gsrow{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink);}
  .gsrow:hover,.gsrow.cur{background:var(--soft);}
  .gsrow b{color:var(--teal-d);}
  .gsrow span{display:block;color:var(--mut);font-size:11.5px;line-height:1.35;}
  .gsrow i{font-style:normal;font-size:10px;font-weight:700;color:var(--teal-d);background:var(--soft);border-radius:5px;padding:1px 5px;margin-left:6px;}
  .gsmsg{padding:9px 10px;font-size:12.5px;color:var(--mut);line-height:1.5;}
  .gsmsg b{color:var(--ink);}
  /* ⚠️ 这个独立 🔍 按钮**永不显示**：它和输入框内的 .gsic 会变成"两个放大镜"（用户 2026-09-12 指出）。
     保留 DOM 只为兼容旧代码，视觉上全站只有一个放大镜。 */
  .gsh{display:none!important;border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 9px;font-size:13px;cursor:pointer;line-height:1;}
  /* 顶栏右侧控件**统一高度/圆角**（2026-09-12 用户：搜索框与 Saved/Pro 大小不一，不齐） */
  .topbar .btn{height:34px;box-sizing:border-box;border-radius:9px;display:inline-flex;
    align-items:center;justify-content:center;line-height:1;font-size:13.5px;padding:0 12px;font-family:var(--uifont);}
  .topbar #gsQ{display:block;height:34px;box-sizing:border-box;border-radius:9px;
    padding:0 10px 0 29px;line-height:32px;font-size:13.5px;}
  .topbar #acctArea .btn{padding:0 11px;}
  /* —— 窄屏 / 手机 / 平板（含预览类）——
     ⚠️ 2026-09-12 修正：曾用"独立 🔍 按钮 + 输入框内图标"，结果**两个放大镜同时出现**（用户指出）。
     现在统一为：**全站只有一个放大镜**（输入框内那一个），窄屏只把输入框收窄，绝不换行。 */
  @media (max-width:900px){
    .topbar .btn{height:30px;font-size:12.5px;}
    /* 高度写 34 是为了跟真机一致：真机上这条其实被 `.topbar #gsQ{height:34px}`
       （选择器更具体）盖掉，写 30 只会误导下一个人以为真机搜索框是 30px。 */
    #gsQ{width:min(142px,34vw);height:34px;padding:0 9px 0 26px;line-height:32px;font-size:13px;}
    .gsh{display:none!important;}          /* 去掉第二个放大镜 */
  }
  body.pw-phone .topbar .btn,body.pw-tab .topbar .btn{height:30px;font-size:12.5px;}
  /* 窄屏/手机：筛选行再紧凑一档（用户 2026-09-12：太占空间） */
  @media (max-width:900px){
    .pillrow{gap:4px;}   /* margin 交给 .fgroup gap —— 避免 margin+gap 叠加 */
    .chip{padding:6px 10px;font-size:12px;}
    .pillrow .kbd{font-size:11px;}
    .fgrid{gap:8px;}
    /* 窄屏：第 6 个分类会被截在视野外 → 换行显示全部（用户 2026-09-12 反馈） */
    #styChips{flex-wrap:wrap;row-gap:4px;}
    #styRow{overflow-x:visible;}
  }
  body.pw-phone .pillrow,body.pw-tab .pillrow{gap:4px;}
  body.pw-phone #styChips,body.pw-tab #styChips{flex-wrap:wrap;row-gap:4px;}
  body.pw-phone #styRow,body.pw-tab #styRow{overflow-x:visible;}
  body.pw-phone .chip,body.pw-tab .chip{padding:6px 10px;font-size:12px;}
  body.pw-phone .pillrow .kbd,body.pw-tab .pillrow .kbd{font-size:11px;}
  body.pw-phone .fgrid,body.pw-tab .fgrid{gap:8px;}
  /* 说明块不再自带 margin —— 交给 .fgroup 的 gap 统一控（原行内 margin 会覆盖样式表 → 死代码） */
  body.pw-phone #mktNote,body.pw-tab #mktNote{padding:5px 9px;font-size:11.5px;}
  body.pw-phone #styNote,body.pw-tab #styNote{font-size:11.5px;line-height:1.45;}
  @media (min-width:901px){ .fgrid{gap:12px;} }
  @media (max-width:900px){
    #mktNote{padding:5px 9px;font-size:11.5px;}
    #styNote{font-size:11.5px;line-height:1.45;}
  }
  /* ⚠️ 预览里搜索框必须 34px：真机上它一直是 34px（`.topbar #gsQ{height:34px}` 的优先级
     高于下面 ≤900 那条），而预览这里原来写 30px → **预览里的搜索框比真机矮 4px**，
     于是"两个按钮(30/34px)比搜索框高"，看起来就像按钮没改好（用户 2026-09-20 二次反馈
     "手机版的还没改好吧"）。真机与预览从此同尺。 */
  body.pw-phone #gsQ,body.pw-tab #gsQ{width:min(140px,36vw);height:34px;
    padding:0 9px 0 26px;line-height:32px;font-size:13px;}
  body.pw-phone .gsh,body.pw-tab .gsh{display:none!important;}
  /* 右侧控件组靠右成一排（brand 左 · [搜索][Saved][Pro] 右） */
  body.pw-phone .gsbox,body.pw-tab .gsbox{margin:0 6px 0 auto;}
  body.pw-phone #savedNavBtn,body.pw-tab #savedNavBtn{margin-left:0;}
  /* 右侧控件组靠右成一排（brand 左 · [🔍][Saved][Pro] 右），不再用 Saved 的 margin-left:auto */
  body.pw-phone .gsbox,body.pw-tab .gsbox{margin:0 6px 0 auto;}
  body.pw-phone #savedNavBtn,body.pw-tab #savedNavBtn{margin-left:0;}
  /* ===== 手机顶栏：搜索收成图标 + 下拉以头部为基准（2026-09-20 用户实机反馈后重做）=====
     用户报的两条：① Sign in 被挤到第二行；② Learn 点不了。
     实测原因：390px 下头部高 161px、分 6 行；导航 scrollWidth 369 > 可视 309，
     `Learn ▾`（最后一项）被推到横向滚动区外，而且导航上的 overflow/mask 还会把它的下拉一并裁掉。
     为什么不靠"继续压字号/padding"：320px 下第一行可用宽度只有 239px（wrap 40 + 头部内边距 24
     + 边框），brand(66)+Saved(49)+Sign in(54)+间距(18) 已 187px，搜索框只剩 52px —— 挤不出来的。
     所以换交互（仅 ≤640 生效，桌面一行不动）：
       ① 搜索收成 🔍 图标，点开是盖住整行的全宽输入框（见 js 的 gsTap/gsBoxClose）；
       ② 导航不横滑、允许换行（见上面 ≤640 块）→ Learn 永远在屏幕内；
       ③ 手机上 .navdd 改 static，让菜单以**头部**为基准横向铺开 —— 否则 Learn 在窄屏换到
          第二行时，右对齐的 196px 菜单会跑到屏幕左边外面去。 */
  /* ⚠️ 手机端搜索框**保持原样**（2026-09-20 用户明确要求：手机上别动搜索）。
     那空间就从三处省：① 两个按钮的横向内边距压到 7-8px（竖向不动 —— 高度仍由上面那条
     `min-height:44px` 规则管着，触控目标没变差，改的只是宽度）；② 头部左右内边距 12→8px；
     ③ 控件间距 6→4px、`.gsbox` 右侧那 8px 间距收到 2px、brand 17→16px（都不碰搜索框本身），
     它们加起来在 390px 上省出约 26px。
     实测：430 / 414 / 390 / 375 / 360 一行放得下；≤340px 的老窄机仍会折行，属可接受的降级。 */
  @media (max-width:640px){
    .topbar{padding:8px 8px;gap:4px;}
    /* 右上角两个按钮：**与顶栏搜索框同高（34px）、命中高度仍 44px**。
       四步定稿史（别再往回改）：① 原来 44px（全站触控下限）→ 用户：「右上角两个按钮
       感觉可以适当缩小高度，目前看起来有点不协调且拥挤」；② 我压到 34px（= 搜索框高度，
       真机对齐了，但**手机预览里搜索框是 30px** → 预览中两个按钮比搜索框高 4px，看起来
       "没改好"）；③ 我又把按钮压到 30px 想拉开层次 → 用户：「也不用比搜索框矮吧，
       跟搜索框一样高是否更好」；④ **定稿：和搜索框同高**。
       两条教训：a) 同一行的输入框与按钮必须等高 —— 比较对象是旁边的搜索框，不是别的;
       b) 预览（pw-phone）必须与真机同尺，否则"看着像没改"（搜索框那条已同步成 34px）。
       44px 命中区继续靠 ::before 上下各 5px 透明区保住。 */
    #savedNavBtn,#signBtn,#acctArea .btn{position:relative;height:34px;min-height:34px!important;}
    #savedNavBtn::before,#signBtn::before,#acctArea .btn::before{
      content:'';position:absolute;left:0;right:0;top:-5px;bottom:-5px;}
    .gsbox{margin:0 2px 0 auto;}                /* 基础规则是 0 8px 0 2px：右边 8px 在 390px 上是压死骆驼的那几 px */
    .brand{font-size:16px;}
    #savedNavBtn {font-size:12.5px!important;padding:5px 6px!important;margin-right:0!important;}
    /* Sign in 是头部唯一的常驻 CTA，比 Saved 略宽（看得出的主次，又不至于占两格） */
    #signBtn      {font-size:12.5px!important;padding:5px 7px!important;}
  }
  /* ≤400px 再加一档：真机本有余量（移动端滚动条不占宽度），但系统"放大字体"会把
     每个控件撑宽 —— 这一档是为那种情况留的保险，视觉上几乎看不出来。 */
  @media (max-width:400px){
    .topbar{gap:3px;}
    .brand{font-size:15px;}
    #savedNavBtn{font-size:12px!important;padding:5px 5px!important;}
    #signBtn{font-size:12px!important;padding:5px 6px!important;}
  }
  body.pw-phone .topbar{padding:8px 8px;gap:4px;}
  /* 预览（pw-phone/pw-tab）必须和真机同高同宽 —— 预览的职责是复现真机，不是自成一套。
     定稿：两个按钮 34px = 搜索框高度（见上面 ≤640 的定稿史）。 */
  body.pw-phone #savedNavBtn,body.pw-phone #signBtn,body.pw-phone #acctArea .btn,
  body.pw-tab #savedNavBtn,body.pw-tab #signBtn,body.pw-tab #acctArea .btn{
    position:relative;height:34px;min-height:34px!important;}
  body.pw-phone #savedNavBtn::before,body.pw-phone #signBtn::before,body.pw-phone #acctArea .btn::before,
  body.pw-tab #savedNavBtn::before,body.pw-tab #signBtn::before,body.pw-tab #acctArea .btn::before{
    content:'';position:absolute;left:0;right:0;top:-5px;bottom:-5px;}
  body.pw-phone .gsbox{margin:0 2px 0 auto;}
  body.pw-phone .brand{font-size:15px;}
  body.pw-phone #savedNavBtn{font-size:12px!important;padding:5px 5px!important;margin-right:0!important;}
  body.pw-phone #signBtn{font-size:12px!important;padding:5px 6px!important;}