:root { --fg:#1f2328; --muted:#656d76; --line:#d8dee4; --bg:#fff; --card:#f6f8fa;
          --accent:#0969da; --ok:#1a7f37; --warn:#9a6700; --bad:#cf222e; }
  * { box-sizing:border-box; }
  body { margin:0; font:15px/1.7 -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
         color:var(--fg); background:var(--bg); }
  .wrap { max-width:1000px; margin:0 auto; padding:32px 20px 64px; }
  header { border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:26px; }
  h1 { font-size:24px; margin:0 0 6px; }
  /* 「4W」小图标：内联 SVG —— 不用多一次请求 ✓ 颜色可控、和站点主色一致 ✓（2026-10-11 用户要求）*/
  /* 尺寸用 em，跟着 h1 字号一起缩放 ✓
     （原来写死 29px，相对大标题显得小；手机端 h1 变 21px 也会跟着缩 ✓）
     文字里不再重复写「4W」✓ —— 图标已经表达了，重复反而啰嗦（2026-10-11 用户要求）*/
  .brand-logo { width:1.5em; height:1.5em; vertical-align:-0.3em; margin-right:11px; }
  .sub { color:var(--muted); font-size:14px; }
  h2 { font-size:17px; margin:34px 0 6px;
       display:flex; align-items:center; gap:9px; }   /* 用 flex 让竖条真正跟文字中线对齐 ✓ */
  /* h2 的蓝色点缀：左侧竖条 ✓
     ⚠️ 别用 top/height 硬算位置 ✗ —— 那样是按"行盒顶部"对齐，看着偏上（2026-10-11 用户指出）*/
  h2::before { content:""; flex:none; width:4px; height:1.05em;
               background:var(--accent); border-radius:2px; }
  .lead { color:var(--muted); font-size:13.5px; margin:0 0 12px; }

  /* 运营商筛选 */
  .filter { margin:14px 0 4px; }
  .pill { display:inline-block; padding:6px 15px; margin:0 7px 7px 0; border-radius:17px; font-size:14px;
          border:1px solid var(--line); background:#fff; cursor:pointer; user-select:none; transition:.15s; }
  .pill:hover { border-color:var(--accent); color:var(--accent); }
  .pill.on { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }

  /* 推荐位 */
  .reco { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin:12px 0 4px; }
  .rec { border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--card); }
  .rec .n { font-weight:600; font-size:15px; }
  .rec .m { color:var(--muted); font-size:13px; }
  .rec .v { font-size:15px; margin-top:8px; }

  /* 推荐位卡片的悬停反馈（2026-10-11 用户反馈："卡片太死板，鼠标放上去没反应"）
     三件小事：轻微上浮 + 描边变蓝 + 标题跟着变蓝 —— 明显但不夸张 ✓
     卡片本身也变纯白（原来是浅灰底 ✓），上浮时更有"抬起来"的感觉 ✓
     ⚠️ 必须包在 @media (hover: hover) 里 ✗ ——
        触屏上 :hover 会"粘住"不消失（点完卡片一直是抬起的样子）✓ */
  .rec { transition: transform .18s ease, box-shadow .18s ease,
                      border-color .18s ease, background .18s ease; }
  .rec .n { transition: color .18s ease; }
  @media (hover: hover) {
    .rec:hover { transform: translateY(-3px);
                 border-color: var(--accent);
                 background: #fff;
                 box-shadow: 0 8px 22px rgba(0,0,0,.10); }
    .rec:hover .n { color: var(--accent); }
  }
  /* 键盘用户也要有反馈（Tab 进卡片里的链接时）✓ */
  .rec:focus-within { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.08); }

  /* 等待区：刚接入的机房在这里显示进度（用户建议 2026-10-12 ✓）
     虚线框 + 淡底，一眼看出它"还不是正式对比成员" ✓ */
  #pending { margin:16px 0 6px; border:1px dashed #c7d2dd; border-radius:10px;
             background:#f8fafc; padding:13px 16px 9px; }
  #pending h3 { margin:0 0 6px; font-size:13.5px; color:#475569; font-weight:600; }
  .pend-row { display:flex; align-items:center; gap:11px; padding:6px 0;
              font-size:13.5px; flex-wrap:wrap; border-top:1px solid #eef2f6; }
  .pend-row:first-child { border-top:0; }
  .pend-name { font-weight:600; color:var(--accent); text-decoration:none; }
  .pend-name:hover { text-decoration:underline; }
  .pend-bar { flex:0 1 120px; min-width:64px; height:6px; border-radius:3px;
              background:#e2e8f0; overflow:hidden; }
  .pend-bar i { display:block; height:100%; background:var(--accent); border-radius:3px;
                transition:width .4s ease; }
  .pend-meta { color:var(--muted); }
  @media (max-width:640px) {
    .pend-bar { flex:1 1 100%; order:3; }
    .pend-meta { flex:1 1 100%; order:4; font-size:12.5px; }
  }

  /* 对比表 */
  .tblwrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:12px 0 4px; }
  table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:760px; }

  /* ---------- 悬浮功能键（2026-10-11 加）----------
     页面变长后（提示 → 推荐 → 对比表 → 说明 → 友链）来回滚很累 ✗
     滚过一屏才出现，不挡内容；手机上按钮放大到拇指能点 ✓ */
  .fab { position:fixed; right:18px; bottom:20px; display:flex; flex-direction:column; gap:10px;
         z-index:60; opacity:0; pointer-events:none; transition:opacity .18s ease; }
  .fab.show { opacity:1; pointer-events:auto; }
  .fab button { display:flex; align-items:center; gap:6px; padding:10px 15px; border-radius:22px;
                border:1px solid var(--line); background:var(--bg); color:var(--fg); cursor:pointer;
                font-size:13.5px; font-family:inherit; line-height:1;
                box-shadow:0 2px 10px rgba(0,0,0,.10); }
  .fab button:hover { border-color:var(--accent); color:var(--accent); }
  .fab button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
  .fab button.primary:hover { background:#0a5ac2; color:#fff; }

  /* 联系我们：小面板叠在按钮上方（一个按钮装下 TG + 邮箱两个入口，不占两个球 ✓）*/
  .fab-pop { position:absolute; right:0; bottom:100%; margin-bottom:10px; width:240px;
             background:var(--bg); border:1px solid var(--line); border-radius:12px;
             padding:12px 14px 10px; box-shadow:0 10px 30px rgba(0,0,0,.18); }
  .fab-pop[hidden] { display:none; }
  .fab-pop-t { font-size:12.5px; color:var(--muted); letter-spacing:.05em; margin-bottom:8px; }
  .fab-pop a { display:block; padding:9px 11px; margin:5px 0; border-radius:7px; text-decoration:none;
               color:var(--fg); background:var(--card); border:1px solid var(--line); font-size:13.5px; }
  .fab-pop a:hover { border-color:var(--accent); color:var(--accent); }

  /* ---------- 移动端（2026-10-11 加）----------
     原来这里一条 @media 都没有 ✗，而且表格写死 `min-width:760px` ✗
     → 手机上必然横向溢出，「线路」那列字最长、最占宽 ✗
     最小改动：窄屏把表格下限放开、藏掉「线路」列（桌面照常显示 ✓）、按钮放大、间距收紧 ✓ */
  @media (max-width: 640px) {
    html { -webkit-text-size-adjust: 100%; }
    html, body { overflow-x: hidden; }         /* 兜底：任何意外宽元素都不该让整页能横拖 ✓ */
    .wrap { padding: 20px 13px 86px; }
    h1 { font-size: 21px; }
    h2 { font-size: 17px; margin-top: 26px; }
    .lead { font-size: 13.5px; }
    .pill { padding: 9px 15px; font-size: 14px; margin: 0 6px 8px 0; }
    .tblwrap { margin: 10px 0 4px; }
    table { font-size: 12px; min-width: 0; }    /* 放开 760px 下限 ✓ */
    th, td { padding: 6px 5px; white-space: normal; }  /* 关键：允许换行，表格才能真正收进屏幕 ✓ */
    th { font-size: 11.5px; }
    .hide-sm { display: none !important; }      /* 手机上藏掉「线路」列 ✓ */
    /* 手机上一屏只放得下 3 列，所以只留「所选运营商」那一列 ✓
       （晚高峰数字本来就在那个格子里 ✓，独立的晚高峰列也一起藏掉 ✓）*/
    .col-peak { display: none !important; }
    body.cur-ct .col-cu, body.cur-ct .col-cmcc { display: none !important; }
    body.cur-cu .col-ct, body.cur-cu .col-cmcc { display: none !important; }
    body.cur-cmcc .col-ct, body.cur-cmcc .col-cu { display: none !important; }
    .rec { padding: 13px 14px; }
    .fab { right: 12px; bottom: 14px; gap: 8px; }
    .fab button { padding: 13px 16px; font-size: 14.5px; box-shadow: 0 3px 14px rgba(0,0,0,.16); }
  }
  th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
  th { background:var(--card); font-size:12.5px; color:var(--muted); font-weight:600; }
  th.hl, td.hl { background:#f0f7ff; }
  tr:hover td { background:#fbfcfd; }
  tr:hover td.hl { background:#e8f2ff; }
  td.num { font-variant-numeric:tabular-nums; }
  .ok { color:var(--ok); font-weight:600; } .warn { color:var(--warn); font-weight:600; }
  .bad { color:var(--bad); font-weight:600; } .mut { color:var(--muted); }
  .delta { font-size:11.5px; display:block; }
  .region-tag { display:inline-block; font-size:11.5px; color:var(--muted); background:var(--card);
                border:1px solid var(--line); border-radius:10px; padding:0 8px; }
  /* 「筛选」标签：和右下角悬浮球的「☰ 筛选」用同一个词对应起来 ✓
     点悬浮球滚过来时，能一眼看到"就是这里"（2026-10-11 用户要求）*/
  .sec-tag { display:inline-block; padding:2px 11px; border-radius:20px;
             background:var(--accent); color:#fff; font-size:12.5px; font-weight:600;
             letter-spacing:.05em; }   /* 间距交给 h2 的 flex gap ✓ */
  #filter-section { scroll-margin-top:14px; }

  /* 表格说明：**一句一行** ✗ 原来四句挤成一段，手机和 PC 都难读（2026-10-11 用户反馈）
     顺带把颜色说明做成真正的色点，比纯文字"≤1% / 1~3% / >3%"直观 ✓ */
  .legend { font-size:12.5px; color:var(--muted); margin-top:10px;
            background:var(--card); border:1px solid var(--line); border-radius:8px;
            padding:12px 15px; }
  .legend .lg-row { margin:6px 0; line-height:1.7; }
  .legend .lg-row:first-child { margin-top:0; }
  .legend .lg-row:last-child { margin-bottom:0; }
  .legend b { color:var(--fg); font-weight:600; }
  .legend .lg-chip { display:inline-block; margin-right:14px; white-space:nowrap; }
  .note { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
          border-radius:6px; padding:12px 16px; color:var(--muted); font-size:13.5px; margin:14px 0; }
  ol,ul { padding-left:22px; margin:10px 0; }
  li { margin:5px 0; }
  code { background:var(--card); border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:13px; }
  .chips { margin-top:14px; }
  .chips a { display:inline-block; margin:4px 8px 4px 0; padding:6px 13px; border-radius:6px;
             text-decoration:none; color:var(--fg); background:var(--card);
             border:1px solid var(--line); font-size:13.5px; transition:.15s; }
  .chips a:hover { border-color:var(--accent); color:var(--accent); background:#fff; }
  footer { margin-top:44px; padding-top:18px; border-top:1px solid var(--line);
           color:var(--muted); font-size:12.5px; }
  footer a { color:var(--muted); text-decoration:none; }
  footer a:hover { color:var(--accent); text-decoration:underline; }
  .friends-title { font-size:11px; letter-spacing:.08em; text-transform:uppercase;
                   color:#8b949e; margin-bottom:8px; }
  .copyright { margin-top:16px; }

/* ==== 实测报告入口（2026-10-15）开始 ==== */
/* 落地页里的「实测报告」入口块 —— 指向 /reports/ 板块（内链 ✓）
   样式与落地页其它区块保持一致：--card 淡底 + --line 描边 + 圆角 10px ✓ */
.rp-entry {
  margin: 18px 0 6px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}
/* ⚠️ 关掉继承来的 h2 竖条 ✗ —— 本块用的是左侧整条竖线，
   两个竖条叠在一起会很怪（实测会同时出现 ✓）*/
.rp-entry h2::before { display: none; }
.rp-entry h2 { margin: 0 0 8px; font-size: 17px; }
.rp-entry p { margin: 6px 0; font-size: 13.5px; color: var(--muted); }
.rp-entry-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.rp-entry-link:hover { text-decoration: underline; }
/* ==== 实测报告入口 结束 ==== */