:root{
  --bg:#f5f7fa; --card:#fff; --ink:#1f2329; --sub:#6b7280;
  --line:#e5e7eb; --blue:#1677ff; --green:#389e0d; --red:#d4380d;
  --best:#f6ffed; --bestline:#b7eb8f; --warn:#fff7e6; --warnline:#ffd591;
  --orange:#ff7a45;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink);
     font-family:-apple-system,"PingFang SC","Microsoft YaHei",Segoe UI,sans-serif;
     line-height:1.65;padding:0;
     font-size:clamp(14px,0.5vw + 13px,15px);
     -webkit-font-smoothing:antialiased;
     overflow-x:hidden;}
.wrap{max-width:820px;margin:0 auto;padding:clamp(12px,3vw,20px);}

/* ========== 顶部导航 ========== */
header.site{background:linear-gradient(135deg,#1677ff,#0958d9);color:#fff;
            padding:calc(12px + var(--safe-top)) clamp(14px,3vw,20px) 12px;
            position:sticky;top:0;z-index:1000;
            box-shadow:0 2px 8px rgba(0,0,0,0.08);}
header.site a{color:#fff;text-decoration:none;font-weight:700;font-size:17px;}
header.site > a{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
header.site .nav{margin-top:8px;font-size:13px;position:relative;z-index:100;}
header.site .nav a{font-weight:400;margin-right:12px;}
/* 主题分类二级导航（CSS-only hover） */
header.site .nav-item{display:inline-block;position:relative;margin-right:6px;vertical-align:top;}
header.site .nav-item > a{display:inline-block;padding:8px 14px;border-radius:8px;background:rgba(255,255,255,0.12);font-weight:600;font-size:13.5px;line-height:1.4;cursor:pointer;min-height:36px;user-select:none;-webkit-user-select:none;}
header.site .nav-item:hover > a,header.site .nav-item:focus-within > a{background:rgba(255,255,255,0.28);}
header.site .nav-item > a::after{content:" ▾";font-size:11px;opacity:0.7;margin-left:2px;}
header.site .nav-item.open > a::after{content:" ▴";}
header.site .nav-sub{position:absolute;top:calc(100% + 6px);left:0;display:none;min-width:220px;max-width:calc(100vw - 32px);background:#fff;color:#1f2329;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,0.18);padding:8px 0;z-index:999;}
header.site .nav-item:hover .nav-sub,header.site .nav-item:focus-within .nav-sub,header.site .nav-item.open .nav-sub{display:block;}
header.site .nav-sub a{color:#1f293b38;padding:8px 14px;font-size:13px;display:block;font-weight:500;transition:background 0.1s;min-height:36px;line-height:1.4;display:flex;align-items:center;}
header.site .nav-sub a:hover,header.site .nav-sub a:active{background:#eaf1ff;color:#0958d9;}
header.site .nav-sub .sep{height:1px;background:#e5e7eb;margin:6px 0;}
header.site .nav-sub .head{display:block;padding:6px 14px;font-size:11px;color:#8a94a6;font-weight:600;letter-spacing:.5px;}

/* ========== 排版（流体） ========== */
h1{font-size:clamp(20px,1.2vw + 18px,28px);margin:14px 0 4px;line-height:1.3;}
h2{font-size:clamp(15px,0.4vw + 14px,18px);margin:0 0 10px;display:flex;align-items:center;gap:8px;}
h2::before{content:"";width:4px;height:16px;background:var(--blue);border-radius:2px;flex-shrink:0;}
h3{font-size:clamp(14px,0.3vw + 13px,16px);}
p{margin:6px 0;}
.sub{color:var(--sub);font-size:clamp(12px,0.2vw + 12px,13px);margin-bottom:14px;line-height:1.55;}

/* ========== 卡片与容器 ========== */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:clamp(12px,2vw,18px);margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.answer{background:#e6f4ff;border:1px solid #91caff;border-radius:12px;padding:clamp(10px,2vw,14px);font-size:clamp(13.5px,0.3vw + 13px,15px);margin-bottom:14px;line-height:1.7;}
.answer b{color:#0958d9;}
.callout{background:var(--best);border:1px solid var(--bestline);border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:14px;}
.box{border:1px solid var(--line);border-radius:10px;padding:clamp(10px,1.5vw,13px);background:#fcfcfd;margin-top:9px;}
.box h3{margin:0 0 5px;font-size:clamp(13.5px,0.2vw + 13px,15px);line-height:1.4;}

/* ========== 表格（移动端横滚 + 紧凑） ========== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0;border-radius:8px;border:1px solid var(--line);background:#fff;}
.table-wrap::-webkit-scrollbar{height:4px;}
.table-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px;}
table{width:100%;border-collapse:collapse;font-size:clamp(12px,0.2vw + 12px,13.5px);min-width:480px;}
th,td{border:1px solid var(--line);padding:clamp(6px,1vw,8px) clamp(5px,0.8vw,8px);text-align:center;vertical-align:middle;}
th{background:#fafafa;font-weight:600;white-space:nowrap;}
td.name{text-align:left;font-weight:600;white-space:nowrap;}
.best{background:var(--best);}
.best td{border-color:var(--bestline);}
.hl{color:var(--red);font-weight:700;}
.ok{color:var(--green);font-weight:600;}

/* ========== 列表 ========== */
ul{margin:6px 0 0;padding-left:20px;font-size:clamp(13px,0.2vw + 13px,14.5px);line-height:1.7;}
li{margin:5px 0;}

.ph{display:inline-block;background:var(--warn);border:1px dashed var(--warnline);color:#ad6800;
    font-size:12.5px;padding:2px 8px;border-radius:6px;margin:2px 0;}
.tag{font-size:11px;padding:1px 6px;border-radius:9px;background:#e6f4ff;color:#0958d9;margin-left:4px;}

/* ========== 面包屑 ========== */
nav.crumb{font-size:13px;color:var(--sub);margin-bottom:10px;line-height:1.5;word-break:break-word;}
nav.crumb a{color:var(--blue);text-decoration:none;}

/* ========== 页脚 ========== */
footer.site{border-top:1px solid var(--line);margin-top:20px;
            padding:calc(14px + var(--safe-bot)) 16px 14px;
            color:var(--sub);font-size:12.5px;text-align:center;line-height:1.6;}
footer.site br+*{display:inline;}
.foot{font-size:12px;color:var(--sub);margin-top:8px;line-height:1.5;}
.ai-note{background:#f0f5ff;border:1px solid #bcd4ff;border-radius:8px;padding:7px 11px;margin:8px auto 0;max-width:760px;font-size:12px;color:#3a5a8c;text-align:center;line-height:1.6;}
.ai-note b{color:#0958d9;}

/* ========== 网格（citycard） ========== */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.citycard{display:flex;flex-direction:column;justify-content:space-between;
          border:1px solid var(--line);border-radius:12px;padding:14px;
          background:#fff;text-decoration:none;color:inherit;transition:.15s;
          min-height:80px;}
.citycard:hover,.citycard:active{border-color:var(--blue);box-shadow:0 3px 10px rgba(22,119,255,.12);}
.citycard h3{margin:0 0 4px;font-size:clamp(14px,0.2vw + 13.5px,15.5px);color:var(--blue);line-height:1.35;}
.citycard p{margin:0;font-size:clamp(12px,0.2vw + 12px,13px);color:var(--sub);line-height:1.5;}

/* ========== 携程联盟 CPS 按钮 ========== */
.cps-group{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 6px;}
.cps-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
         padding:11px 18px;border-radius:10px;font-size:14px;font-weight:600;
         text-decoration:none;transition:.15s;min-height:42px;
         -webkit-tap-highlight-color:rgba(0,0,0,0.05);}
.cps-btn.primary{background:linear-gradient(135deg,#ff6a00,#ff9a3c);color:#fff;box-shadow:0 2px 8px rgba(255,122,69,.25);}
.cps-btn.primary:hover,.cps-btn.primary:active{transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,122,69,.35);}
.cps-btn.secondary{background:#fff;color:var(--blue);border:1.5px solid var(--blue);}
.cps-btn.secondary:hover,.cps-btn.secondary:active{background:var(--blue);color:#fff;}
.cps-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.cps-btn.ghost:hover,.cps-btn.ghost:active{border-color:var(--blue);color:var(--blue);}
.cps-tag{font-size:10.5px;background:rgba(255,255,255,.25);color:#fff;padding:1px 6px;border-radius:4px;font-weight:400;margin-left:2px;}
.cps-btn.secondary .cps-tag{background:#e6f4ff;color:var(--blue);}
.cps-btn.ghost .cps-tag{background:#f0f0f0;color:var(--sub);}
.cps-note{font-size:12px;color:var(--sub);margin-top:6px;line-height:1.5;}
.cps-card{background:linear-gradient(135deg,#fff7e6,#fffbf2);border:1px solid var(--warnline);border-radius:12px;padding:14px;margin-top:12px;}
.cps-card h3{margin:0 0 6px;font-size:14.5px;color:var(--ink);}
.cps-card p{margin:0;font-size:13px;color:var(--sub);}

/* ====================================================================
   移动端断点（≤720px）—— 核心体验
   ==================================================================== */
@media(max-width:720px){
  /* 导航：默认折叠，点击展开 */
  header.site{padding-top:calc(10px + var(--safe-top));}
  header.site .nav{display:flex;flex-direction:column;align-items:stretch;gap:4px;}
  header.site .nav-item{display:block;width:100%;margin-right:0;margin-bottom:2px;}
  header.site .nav-item > a{display:flex;align-items:center;justify-content:space-between;
                             width:100%;padding:12px 14px;min-height:44px;font-size:14px;
                             box-sizing:border-box;}
  header.site .nav-item > a::after{font-size:13px;opacity:0.8;}
  header.site .nav-sub{position:static;box-shadow:none;
                       background:rgba(255,255,255,0.10);border-radius:8px;
                       padding:4px 0;margin-top:2px;margin-bottom:6px;
                       display:none;min-width:0;max-height:60vh;overflow-y:auto;}
  header.site .nav-item.open .nav-sub{display:block;}
  header.site .nav-item:hover .nav-sub,
  header.site .nav-item:focus-within .nav-sub{display:none;}
  header.site .nav-item.open:hover .nav-sub,
  header.site .nav-item.open:focus-within .nav-sub{display:block;}
  header.site .nav-sub a{color:rgba(255,255,255,0.95);padding:10px 20px;
                          min-height:42px;font-size:13.5px;}
  header.site .nav-sub a:hover,header.site .nav-sub a:active{background:rgba(255,255,255,0.18);color:#fff;}
  header.site .nav-sub .sep{background:rgba(255,255,255,0.20);margin:4px 12px;}
  header.site .nav-sub .head{color:rgba(255,255,255,0.65);padding:6px 20px 2px;}

  /* 排版微调 */
  h1{margin:12px 0 4px;}
  .sub{font-size:12.5px;}

  /* 表格：横滚容器 */
  .card > table,
  .box > table{display:none;}  /* 裸 table 强制走 wrap */
  /* table 必须在 .table-wrap 容器内（注入器会改：自动包） */
  /* 但已存在的裸 table 也要兜底——溢出 */
  .card,.box,.answer{overflow-x:visible;}

  /* 列表与文字 */
  ul{padding-left:18px;}

  /* 卡片 padding 收紧 */
  .box{padding:10px 12px;}

  /* CPS 按钮：单列全宽（便于拇指点） */
  .cps-group{flex-direction:column;gap:8px;margin:10px 0;}
  .cps-group .cps-btn{width:100%;justify-content:center;padding:14px 16px;font-size:15px;min-height:48px;}
  .cps-group .cps-btn .cps-tag{margin-left:auto;}

  /* citycard：1 列 */
  .grid{grid-template-columns:1fr;gap:10px;}

  /* footer：堆叠 */
  footer.site{font-size:11.5px;line-height:1.6;}
  footer.site a{display:inline-block;padding:4px 0;}

  /* 表格脚注 */
  .foot{font-size:11.5px;}

  /* AI 备注 */
  .ai-note{font-size:11.5px;padding:6px 10px;}
}

/* ====================================================================
   平板（721-1024px）—— 折中布局
   ==================================================================== */
@media(min-width:721px) and (max-width:1024px){
  .wrap{max-width:760px;padding:18px;}
  .grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  /* 平板保持桌面风格，仅收紧宽度 */
}

/* ====================================================================
   小屏优化（≤400px）—— 极限设备
   ==================================================================== */
@media(max-width:400px){
  body{font-size:13.5px;}
  h1{font-size:19px;}
  .wrap{padding:10px 12px;}
  .card{padding:11px 12px;border-radius:12px;}
  .nav-sub a{padding:9px 16px;}
  .cps-btn{font-size:14px;padding:12px 14px;}
  .citycard{padding:12px;min-height:70px;}
}

/* ====================================================================
   横屏手机（landscape）—— 防 nav 折断
   ==================================================================== */
@media(max-width:900px) and (orientation:landscape){
  header.site .nav-sub{max-height:55vh;overflow-y:auto;}
}

/* ====================================================================
   暗色模式（系统跟随）—— 实验性，先就绪不启用
   ==================================================================== */
@media(prefers-color-scheme:dark){
  :root{
    --bg:#1a1d23; --card:#242830; --ink:#e5e7eb; --sub:#9ca3af;
    --line:#3a3f47; --best:#2d3a1f; --bestline:#4a6b2e;
    --warn:#3a2e0f; --warnline:#6b4f1c;
  }
  body{color:var(--ink);}
  .ai-note{background:#1e2530;border-color:#2d3a4d;color:#a3b3cc;}
  .ai-note b{color:#7ab3ff;}
  /* 暗色模式默认不启用，留作未来 */
}

/* ─── "避坑与装备"显眼提醒（2026-10-09） ───
   让 .callout-warn 的容器在视觉上"跳出来"，避免被正文吞掉。
   仅追加样式，原有 .box 的内聚修饰不受影响。 */
.callout-warn {
  border: 2px solid #ff9a3c !important;
  border-left: 6px solid #d4380d !important;
  background: #fff8ec !important;
  padding: 14px 16px !important;
  position: relative;
  box-shadow: 0 2px 6px rgba(212,56,13,.10);
}
.callout-warn h3 {
  color: #d4380d !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding-left: 2px;
}
.callout-warn h3::before {
  content: "⚠️ ";
  margin-right: 4px;
}
.callout-warn ul {
  margin: 8px 0 4px;
  padding-left: 22px;
}
.callout-warn ul li {
  margin-bottom: 4px;
  line-height: 1.6;
}

/* ─── 同一 CPS URL 的"软链多入口"（2026-10-09） ───
   这些 <a> 指向与页内既有 CPS 块相同的 URL（同行内多家入口），
   不新增任何 CPS 块，不破坏"每页 ≤2 个推广块"红线。
   视觉低调：纯蓝字无下划线，hover 时才出现下划线。
   与正文内容自然融合。 */
.soft-link {
  color: #1677ff;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s, color .15s;
}
.soft-link:hover,
.soft-link:focus {
  color: #0958d9;
  border-bottom-color: #91caff;
  text-decoration: none;
  outline: 0;
}