/* ===========================================================
   换证网 huanzheng.com.cn  —  全局样式
   =========================================================== */
:root{
  --brand:#1668dc;
  --brand-d:#0f4fb0;
  --brand-l:#e8f1ff;
  --green:#22b573;
  --green-d:#12a05f;
  --green-l:#e8faf1;
  --orange:#ff8a3d;
  --purple:#7c5cff;
  --teal:#12b5b0;
  --ink:#1b2330;
  --ink-2:#4a5568;
  --ink-3:#8a94a6;
  --line:#e8ecf2;
  --bg:#f5f7fb;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 2px 10px rgba(23,43,77,.06);
  --shadow-h:0 10px 30px rgba(23,43,77,.12);
  --wrap:1200px;
  /* 首页三模块的**竖向节奏唯一旋钮**（2026-09-25 用户要求"模块之间间距缩小一半"：
     桌面 56px → 28px，窄屏 36px → 18px，见下方 `#km`/`#service`/`#cases` 三条规则）。
     只作用于首页；内页的 `.sec` 节奏（56 / 窄屏 36）不受影响。
     以后要再调，只改这一个数（以及 `@media(max-width:760px)` 里的同名值）。 */
  --home-sec:28px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:var(--bg);font-size:14px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
li{list-style:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;font-size:inherit;color:inherit}
input{font-family:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.hide{display:none !important}

/* ---------- 顶部公告栏（浅色内嵌卡片，全站最顶部） ----------
   版式取自 haizu.cn 的 `.announce-*`（`/e/haizu.cn/css/style.css`）：
   内嵌圆角卡片 + 黄色圆形喇叭图标 + 蓝黄双色淡渐变底 + 右侧小 ×。
   ⚠️ 类名不能用 `.notice` —— 它已被「提示条」占用（6 个内页的淡黄 温馨提示框，
   带 `margin-bottom:20px`），复用会被背景色和下外边距污染成一块漂着的黄条。
   渐变的左端蓝改用本站品牌蓝 `--brand`(#1668dc) 的 .10 透明度，右端保留参考图的
   暖黄 .18，这样既还原参考观感，又不引入本站色板以外的颜色。 */
/* 位置：页头之下、正文之上。只给上方一点间距 —— 下方的留白交给后一块内容自己的
   上内边距（首页 `.sec` 是 56px、内页 `.crumb` 是 18px），避免叠加成双倍空隙。 */
.announce{padding:12px 0 0}
.announce-inner{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:10px;
  padding:9px 44px 9px 20px;
  background:linear-gradient(90deg,rgba(22,104,220,.10),rgba(252,211,77,.18));
  border:1px solid rgba(22,104,220,.15);border-radius:10px;
  font-size:14px;color:var(--ink)}
/* 黄色圆形喇叭图标：参考图里这块是整条公告的视觉锚点，别改成方形或绿色 */
.announce-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:#fcd34d;color:#0f172a;
  box-shadow:0 1px 3px rgba(15,23,42,.12)}
.announce-ico svg{width:14px;height:14px}
/* 文案变长后（2026-09-25 改成「推荐换证驾照翻译客户，可获订单金额 20% 佣金。」）窄屏会折行，
   而且是很丑的"孤字"——375px 下第二行只剩「金。」。这句 20 个汉字 ≈250px，
   而 375px 视口里留给文案的只有 ~251px，**单行在数学上就放不下**。
   两手一起上（CSS 没法"条件换行"，于是媒体查询 + balance 各管一段）：
     ① `≤430px` 字号 12.5 → 11px → 375/390/414/430 都能单行（见下方 430 块）；
     ② 万一仍然换行（≤360px），`text-wrap:balance` 让两行**长度接近**，
        而不是 19 个字 + 1 个字的孤儿行。旧浏览器不认这个属性 → 退回普通换行，无副作用。 */
.announce-text{flex:1 1 auto;min-width:0;color:inherit;text-wrap:balance}
.announce-text:hover{text-decoration:underline;text-underline-offset:3px}
.announce-text em{color:var(--brand);font-style:normal;font-weight:800}
/* × 绝对定位在右侧，所以 .announce-inner 的右内边距要给到 44px 才不被长文案压住 */
.announce-x{position:absolute;top:50%;right:12px;transform:translateY(-50%);width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:50%;
  background:transparent;color:#64748b;font-size:18px;line-height:1;transition:background .15s,color .15s}
.announce-x:hover{background:rgba(15,23,42,.08);color:var(--ink)}

/* ---------- 头部导航 ----------
   原深色顶栏（.topbar，副标题 + 「本站为便民信息聚合平台 / 联系我们」）已于
   2026-09-24 按用户要求整条删除，连带 .tb-l/.tb-r/.tb-x 与 ≤760px 的覆盖规则一并移除。
   ⚠️ 连带影响：`#siteHeader` 现在只剩 `.header` 一个子元素，
   所以 `.header` 依旧没有 sticky 活动空间（详见 MEMORY 陷阱 24），行为未变。 */
/* 让页头的 position:sticky 真正生效。
   背景：`.header` 是 `#siteHeader` **唯一且最后一个**子元素，而 sticky 只能在其所在
   **块容器祖先的内容盒**内活动 —— 父容器高度恰好等于子元素高度之和 → 活动空间为 0
   → `top:0` 写了十年也没粘住（详见 MEMORY 陷阱 24）。
   解法：让 `#siteHeader` **不生成盒子**（`display:contents`），最近块容器祖先就变成 `body`，
   页头于是能在整页范围内粘住。这也是"让 CSS 作者原本的意图生效"的最小改法。
   ⚠️ 副作用检查（改前已确认）：站内**没有任何锚点链接**（无 `href="#xxx"`），所以不需要
   额外加 `scroll-padding-top` 来防"跳转目标被页头遮住"；若日后加了锚点，记得补上。
   ⚠️ `#siteHeader` 本身**没有任何其他样式规则**，改成 contents 不影响别的布局。 */
#siteHeader{display:contents}
/* 页内锚点的落点偏移（MEMORY §6.4 那条"一旦加页内锚点必须补"）。
   交通标志页有 17 个分类锚点，而页头（72px）+ 吸顶分类条（约 56px）会盖住落点。
   ⚠️ 页头高度 ≤1180 时是 62px，所以窄屏要一起改。 */
html{scroll-padding-top:136px}
@media(max-width:1180px){html{scroll-padding-top:126px}}
.header{background:#fff;position:sticky;top:0;z-index:60;box-shadow:0 1px 0 var(--line)}
/* `.wrap` 的 gap 从 40px 收到 16px，同时在 `.nav` 上补回 margin-left:24px ——
   两者相加仍是 40px，所以 **logo↔首个导航项 的间距一点没变**（实测前后都是 40px）。
   收窄的目的是让「联系我们」挪到导航右端后，与「开始刷题」只隔 16px、看起来是一组；
   原先是 40px（未收窄前药丸在导航中部，到按钮有 410px 空档）。 */
.header .wrap{display:flex;align-items:center;height:72px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
/* logo 样式（2026-09-25 换成整套字标图）。
   原 `.logo .mark`（38px 蓝色渐变方块 + 白「换」）与 `.logo .txt b/i`
   （换证网 19px + HUANZHENG.COM.CN 11px）共 5 行随旧 logo 一起删除 —— 新图已含这两部分。
   高度给 34px（源图裁掉透明边后宽高比 3.824 → 宽 130px，比旧 logo 的 ~158px 还窄，
   给页头腾出约 28px）。用 `height` + `width:auto` 定位，宽高比由图片自身保证；
   HTML 里的 width/height 属性同时写死，避免首屏图片未加载时发生布局跳动。 */
.logo img{display:block;height:34px;width:auto}
.nav{display:flex;align-items:center;gap:6px;flex:1}
/* ⚠️ 横向内边距的两次调整（都与"完整导航所需视口宽"绑死，**改了就要重扫 `_probe/_hdr_scan.py`**）：
   · 2026-09-26：18px → **10px**（导航加到 7 项后）——每项左右各省 8px × 7 项 = 112px，
     把"完整导航所需视口宽"从约 1230px 压回约 1120px，于是「≤1180 转抽屉」断点仍能盖住，
     **不必再把断点往上推**（推上去的代价是 1280 宽的屏幕也只剩汉堡菜单，那更糟）。
     实测：改前 1181~1200px 溢出、1240px 才正常；改后 ≤1180 走抽屉、1181 起完整导航可容纳。
   · 2026-09-27：10px → **15px**（用户：「导航栏目之间的间距适当拉大」）。
     ⚠️ 这次是**反向**调整 —— 加 5px/侧 × 7 个文字项 = 约 +70px，**吃的是余量**：
     8 项时 1181px 处原本还剩 168px → 改后约 98px，仍不溢出（`_hdr_scan.py` 已复扫）。
     `gap` 保持 6px 不动：项间视觉间距 = 15 + 6 + 15 = **36px**（原 26px），
     用 padding 而不是只加 gap，顺带把**点击热区**也放大了（纯 gap 不会）。
     **下次再加导航项前，先看这个余量够不够**（加一项约需 90~110px）。 */
.nav>li>a{display:block;padding:0 15px;height:72px;line-height:72px;font-size:15.5px;font-weight:600;color:#2a3548;position:relative;transition:color .18s}
.nav>li>a:hover,.nav>li>a.on{color:var(--brand)}
.nav>li>a.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:16px;width:26px;height:3px;border-radius:2px;background:var(--brand)}
/* 导航项「联系我们」做成药丸（2026-09-24 夜，用户要求「和开始刷题一样的药丸形式，颜色用主题蓝」）。
   几何参数与页头 `.hd-btn` **逐项对齐**（padding 11/24、radius 999px、font-size 16px、
   font-weight 600、同一档位移阴影），所以两者尺寸完全相同（预期 112×49）。
   色系换成网站主题蓝：渐变两端用品牌蓝 `linear-gradient(135deg,#2b8bff,#0f4fb0)`
   （这组值原先写在 `.logo .mark` 里，2026-09-25 换 logo 后那个元素已删除，此处独立保留），
   阴影用 `--brand` #1668dc 的 rgb(22,104,220) 配 .30 透明度 —— 与绿色版 `.hd-btn` 的
   `rgba(34,181,115,.30)` 结构一致，只换色相。

   ⚠️ 三处必须覆盖，否则会坏（每一条都是 `.nav>li>a` 给的默认值）：
     ① `height:72px` —— 不覆盖药丸会被拉成 72px 高的通条；
     ② `line-height:72px` —— 不覆盖文字会被巨大的行高顶到偏下；
     ③ `padding:0 18px` —— 不覆盖就没有药丸的内边距，文字贴边。
   行高这里必须显式给值（原 1.7 = body 默认），且**要与 `.hd-btn` 完全一致**，
   这样两个药丸的高度才会一样。
   ⚠️ 2026-09-24 夜用户要求"药丸的高度降低一点"：`.hd-btn` 与 `.nav-pill` 一起从
     `line-height:1.7 / padding:11px 24px`（实测 112×49）改成
     `line-height:1.5 / padding:10px 24px`（实测 **112×44**）。
     16×1.5 = 24px 行盒 + 上下各 10px = **恰好 44px**，是个整数，不用靠小数凑；
     44px 也正好是这个按钮更早一版的高度（当时 `font-size:14 / padding:10/20`），
     所以这是回到一个站内验证过的尺寸。横向内边距 24px 不动 → 宽度仍是 112px。
     **只改高度、不改字号** —— 用户只说了高度。 */
.nav>li>a.nav-pill{display:inline-flex;align-items:center;height:auto;line-height:1.5;
  padding:10px 24px;border-radius:999px;font-size:16px;
  background:linear-gradient(135deg,#2b8bff,#0f4fb0);color:#fff;
  box-shadow:0 6px 16px rgba(22,104,220,.30);transition:transform .16s}
/* 悬停：① 必须在 `.nav>li>a:hover{color:var(--brand)}` 之后声明（权重更高）才能保住白字，
   否则蓝底上会变成蓝字，读不出来；② 抬起 1px 与 `.hd-btn` 的手感保持一致。 */
.nav>li>a.nav-pill:hover{transform:translateY(-1px);color:#fff}
/* 底部那条 26×3 的 --brand 下划线是给**纯文字链接**做的位置指示。
   它在药丸里不是"脏边"这么简单 —— 药丸高 44px、行高 24px、上内边距 10px，
   文字占 y=10~34，而 `bottom:16px` 把它落在 y=25~28，**正好横穿文字**。
   （按 49px 高算也一样横穿：y=30~33 落在 y=11~38 内。所以这条宽度/高度怎么调都得隐藏。）
   ⚠️ 所以这里**不能抄抽屉那条 `.on::after`** —— 带 `.on` 就只在「联系我们」页生效，
     其余页面选择器不命中，一条蓝色横杠会压在「联系我们」四个字上。
     必须无条件隐藏；与上面 `.nav>li>a.on::after` 同权重、靠顺序取胜（本块在其之后声明）。 */
.nav>li>a.nav-pill::after{display:none}
.nav>li.nav-pill-li{display:flex;align-items:center}
/* 「联系我们」挪到导航右端（2026-09-24 夜，用户要求"放到开始刷题一块"）。
   `.nav` 是 `flex:1`，本来就占满到「开始刷题」左侧；用 `margin-left:auto` 把这一项
   推到它的最右端，于是两者只隔 `.header .wrap` 的 16px（改前是 410px 空档）。
   注意这里**没有改 HTML 结构** —— 药丸仍留在 `.nav` 里，因此：
     ① 窄屏抽屉那条"药丸退回普通行"的规则原样继续生效，不用新增任何抽屉规则；
     ② 药丸的宽度需求没变（原来就占着导航里的一格），不会引入新的横向溢出。
   ⚠️ 必须限定「非抽屉」宽度：抽屉里 `.nav` 变成 `flex-direction:column`，
     此时**交叉轴上的 auto 外边距会接管对齐**，`align-items:stretch` 失效 ——
     这一项会缩成内容宽并靠右，整行不再通栏、与其余几项错位。
     **2026-09-26：抽屉断点由 760 提到 1180，这里的阈值必须同步改成 1181** ——
     否则 800px 这类"已经转抽屉、但仍落在 761 以上"的宽度会错误套用桌面规则。
   ⚠️ 同一条媒体查询里还放了 `.nav` 的 `margin-left:24px`（补 wrap gap 40→16 的差额）。
     **这个 margin 绝不能写在 `.nav` 基类上** —— 抽屉里 `.nav` 是
     `position:absolute;left:0;right:0`，基类上的 margin-left 会把它整体**右移并压窄**
     （实测抽屉从 `L=0 / 宽 390` 变成 `L=24 / 宽 351`，`_pill_scan.py` 会把这个数打出来）。
     在抽屉宽度下它也不需要：抽屉已脱离文档流，`.wrap` 的 gap 对它没有任何影响。 */
@media(min-width:1181px){
  .nav{margin-left:24px}
  .nav>li.nav-pill-li{margin-left:auto}
}
/* 页头「开始刷题」按钮：2026-09-24 按用户要求由蓝改绿（用户给的参考色取自
   答题页题号格 `.qnums i.cur`，实测像素 #22b573 = 站内变量 --green）。
   绿色没有另调，直接复用站内已有的绿色主按钮配方（见下方 `.q-btn.primary`）：
     linear-gradient(135deg,#2fd08a,#12a05f)
   —— 渐变角度与它替换掉的蓝渐变**完全一致**，端点结构也没变，只换色系；
     两端均值 ≈ #20b874，几乎正中用户给的 #22b573。
   ⚠️ 阴影必须一起换（原为 rgba(22,104,220,.30) 蓝底光晕），否则按钮是绿的、
      光晕还是蓝的。
   2026-09-24 晚再调一次（用户要求）：**去掉右侧箭头**、**文字适当放大**。
     font-size 14→16px；padding 由 10/20 调到 11/24 —— 箭头拿掉后内容宽度少约 20px，
     这两处一起调才能让药丸的整体比例（高宽比）跟改之前基本一致，不会显得缩了一圈。
     `gap:6px` 一并删除：里面只剩纯文字了，单子项的 gap 无意义。
   ⚠️ 缩小视口时若再动 padding/font-size，记得同时看 `.header .wrap` 的高度是写死的
      （72px / 窄屏 62px），别把按钮撑高到超过页头。 */
/* 2026-09-24 夜与导航药丸一起压低：`padding 11px→10px` + 显式 `line-height:1.5`
   → 实测 112×49 变成 **112×44**，与 `.nav-pill` 严格等高（两个值必须一起改，
   否则这一对按钮会差 5px）。 */
.hd-btn{flex:none;display:inline-flex;align-items:center;padding:10px 24px;border-radius:999px;
  line-height:1.5;
  background:linear-gradient(135deg,#2fd08a,#12a05f);color:#fff;font-weight:600;font-size:16px;
  box-shadow:0 6px 16px rgba(34,181,115,.30);transition:transform .16s}
.hd-btn:hover{transform:translateY(-1px)}
.nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;font-size:22px;color:#2a3548}
/* 移动端顶部两个入口（2026-09-28 用户要求，格式参照 haizu 站点顶栏）。
   桌面隐藏：那边导航完整、右上角本来就有「开始刷题」药丸，再加就是重复入口。
   ⚠️ 这组是页头「转抽屉」整组的一部分 —— 改断点时要跟 `.nav-toggle`、`.header .wrap` 高度一起挪。 */
.mob-cta{display:none}
.mob-btn{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:999px;
  font-size:14px;font-weight:600;line-height:1;white-space:nowrap;
  background:var(--green-l);color:var(--green-d);border:1px solid #bfe8d3;transition:transform .16s}
.mob-btn.primary{background:linear-gradient(135deg,#2fd08a,#12a05f);color:#fff;border:0;
  box-shadow:0 4px 12px rgba(34,181,115,.28)}
.mob-btn:hover{transform:translateY(-1px)}

/* ---------- 通用区块 ---------- */
.sec{padding:56px 0}
/* 首页三模块的竖向节奏（2026-09-25 按用户要求整体减半，56px → 28px）。
   实测基线（`_probe/_gap_scan.py`，1280px）：公告栏→① / ①→② / ②→③ 都是 **56px**。
   为什么用 id 而不是改 `.sec`：`.sec` 被**全站 14 个页面**共用，
   改它会把内页的节奏一起带走 —— 用户这次只针对首页，所以只覆写首页这三个 section。
   ⚠️ ②③ 的 HTML 里写死了 `style="padding-top:0"`（内联样式），节间距由**上一节的
     padding-bottom** 提供（见 MEMORY 的"内边距节奏规律"）。所以它们只需要改 padding-bottom；
     这里的 `padding:0 0 var(--home-sec)` 简写把 padding-top 也写成 0，与内联值一致，不冲突。
   ⚠️ ①`#km` 两头都要改：顶部接公告栏、底部提供到 ② 的间隔。 */
#km{padding:var(--home-sec) 0}
#service,#cases{padding:0 0 var(--home-sec)}
.sec-head{margin-bottom:26px}
/* ⚠️ h1 也吃这套样式：案例列表页 2026-09-27 删掉了页头 `.page-hd`，
   把页面的 h1 挪到案例卡上方（用户指定位置），字号/字重与 h2 一致。 */
.sec-head h2,.sec-head h1{font-size:30px;font-weight:800;letter-spacing:-.4px;color:#101a2b;display:flex;align-items:center;gap:12px}
.sec-head p{color:var(--ink-3);font-size:14.5px;margin-top:8px}
/* 原 `.sec-head.center` 三行（居中 + h2 两侧各一条 38px 细线）已于 2026-09-24 夜删除 ——
   它最后一个使用者是首页案例模块那个居中标题（该模块与 `.case-head` 已于 2026-09-27 整体被三块新模块取代）。
   全仓（HTML / JS / 构建脚本）grep `sec-head center` = 0 处，属真孤儿。
   若要恢复，把下面三行加回来即可：
     .sec-head.center{text-align:center}
     .sec-head.center h2{justify-content:center}
     .sec-head.center h2::before,.sec-head.center h2::after{content:"";width:38px;height:1px;background:#d5dbe6} */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}
.more-link{display:inline-flex;align-items:center;gap:4px;color:var(--brand);font-weight:600;font-size:14px}
.more-link:hover{gap:8px}

/* ---------- 通用按钮（联系我们页等复用） ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:999px;font-weight:700;font-size:15.5px;transition:.18s}
.btn-p{background:linear-gradient(135deg,#3d97ff,#1668dc);color:#fff;box-shadow:0 10px 24px rgba(43,139,255,.42)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(43,139,255,.5)}

/* ---------- 模块2 服务导航（横条） ---------- */
.flow{margin-top:0}
.flow-card{background:#fff;border-radius:18px;box-shadow:var(--shadow);display:flex;align-items:stretch;overflow:hidden}
.flow-lead{flex:none;width:270px;padding:24px 26px;position:relative;
  background:linear-gradient(160deg,#eaf3ff,#dbeaff 60%,#eef6ff);
  border-right:1px solid #e3edfb;display:flex;flex-direction:column;justify-content:center;gap:6px}
.flow-lead::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:0;border-left:1px solid #e3edfb}
.flow-lead::before{content:"";position:absolute;right:-26px;top:0;bottom:0;width:52px;
  background:linear-gradient(160deg,#eaf3ff,#dbeaff 60%,#eef6ff);
  clip-path:polygon(0 0,50% 50%,0 100%);z-index:3}
.flow-lead h3{font-size:23px;font-weight:800;color:#0f2c56;letter-spacing:-.3px}
.flow-lead span{font-size:13px;color:#5b7396}
.flow-lead .go{margin-top:14px;align-self:flex-start;background:linear-gradient(135deg,#3d97ff,#1668dc);
  color:#fff;padding:10px 24px;border-radius:999px;font-weight:700;font-size:14px;
  box-shadow:0 8px 18px rgba(43,139,255,.35)}
.flow-lead .go:hover{transform:translateY(-1px)}
.flow-lead .art{position:absolute;right:26px;bottom:14px;opacity:.5}
.flow-steps{flex:1;display:grid;grid-template-columns:repeat(4,1fr);align-items:center}
.flow-step{padding:30px 12px;text-align:center;position:relative;transition:.2s;cursor:pointer}
.flow-step:hover{background:#f8fbff}
.flow-step .ic{width:56px;height:56px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
.flow-step b{display:block;font-size:16.5px;font-weight:700;color:#152539}
.flow-step i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.flow-step+.flow-step::before{content:"";position:absolute;left:0;top:26%;height:48%;width:1px;background:#eef2f8}

/* ---------- 模块1 科目一 ---------- */
.km-main{flex:1;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.km-tabs{display:flex;border-bottom:1px solid var(--line);background:#fbfcfe}
.km-tabs .t{padding:16px 30px;font-size:16px;font-weight:700;color:var(--ink-3);position:relative}
.km-tabs .t.on{color:var(--green-d);background:#fff}
.km-tabs .t.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--green);border-radius:3px 3px 0 0}
.km-body{padding:22px}
.km-big{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.km-big a{display:flex;align-items:center;gap:16px;padding:22px 24px;border-radius:12px;color:#fff;
  background:linear-gradient(120deg,#2fd08a,#18b06a);box-shadow:0 8px 18px rgba(34,181,115,.28);transition:.18s;position:relative;overflow:hidden}
/* 第二张（错题本）2026-09-26 由绿改红。用户要求「不要绿色，要能突出是错题的、比较醒目」。
   红取站内既有红 `#e0414f`（答题页「答错」统计、小卡红书签同色），
   渐变结构照抄绿色那对（`120deg`、亮→深），两端围绕 #e0414f 取值：
   `#f4666f → #d1303f`（两端均值 ≈ #e24b57，基本就是 #e0414f）。
   ⚠️ 悬停光晕必须单独写 `:nth-child(2):hover` —— `.km-big a:hover`（0,2,1）与
      `.km-big a:nth-child(2)`（0,2,1）**同权重**，而 `:hover` 那条在文件里更靠后、会赢；
      不补这条，红卡悬停时会亮起一圈**绿**光晕。
   ⚠️ 图标块 `.gi` 的 `rgba(255,255,255,.22)` **保持共用、不动** —— 它是两张卡共用的规则，
      在红底上会自然透成浅粉、在绿底上透成浅薄荷，视觉语言一致（卡与图标元素均由同一条规则管）。 */
.km-big a:nth-child(2){background:linear-gradient(120deg,#f4666f,#d1303f);
  box-shadow:0 8px 18px rgba(224,65,79,.28)}
.km-big a:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(34,181,115,.38)}
.km-big a:nth-child(2):hover{box-shadow:0 12px 26px rgba(224,65,79,.38)}
.km-big a .gi{width:52px;height:52px;border-radius:12px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex:none}
.km-big a b{display:block;font-size:21px;font-weight:800;letter-spacing:-.2px}
.km-big a span{display:block;font-size:13px;color:rgba(255,255,255,.88);margin-top:2px}
/* 大绿卡里的 <em>：「font-style:normal」原先只在 `.km-grid a em` 里给过，
   所以「错题本」搬进大卡后，它副标题里的错题数 <em id="wrongNum"> 会退回浏览器默认的斜体。
   颜色给纯白，在 rgba(255,255,255,.88) 的副标题里做强调。 */
.km-big a em{font-style:normal;font-weight:700;color:#fff}
.km-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.km-grid a{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--line);border-radius:12px;
  background:#fff;transition:.18s}
.km-grid a:hover{border-color:#c6e9d6;background:#f7fdfa;box-shadow:0 8px 20px rgba(23,43,77,.07);transform:translateY(-2px)}
.km-grid a .gi{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none}
.km-grid a .gi.g{background:var(--green-l)}
.km-grid a .gi.y{background:#fff6e8}
.km-grid a .gi.r{background:#ffeef0}
.km-grid a .gi.b{background:var(--brand-l)}
.km-grid a b{display:block;font-size:16px;font-weight:700;color:#152539}
.km-grid a i{display:block;font-style:normal;font-size:12px;color:var(--ink-3)}
.km-grid a em{font-style:normal;color:var(--green-d);font-weight:700}
.km-tip{margin-top:18px;background:#f5f7fa;border-radius:10px;padding:14px 18px;display:flex;align-items:center;gap:10px;
  font-size:13.5px;color:#5c6b82}
.km-tip b{color:#152539}

/* ---------- 首页科目一模块：去掉左侧「车型选择」栏，右侧整体放大铺满 ----------
   用 min-width:981px 包起来，与 `@media(max-width:980px)` 的断点严格对齐：
   2026-09-27：**两页都要这套放大** —— 科目一主页去掉了「车型选择」侧栏后，也给它的 section
   加了 `id="km"`（原来只有首页有），所以下面这组规则现在**同时命中两页**，
   两页的大卡/小卡/图标/字号完全同规格（实测：大卡高 135、图标 64、标题 26px）。
   ⚠️ 若以后又有页面复用 `.km-*` 但**不想被放大**，别把 `#km ` 去掉（那会波及首页），
      而是给那个页面换一个不被 `#km` 覆盖的容器类。 */
@media(min-width:981px){
  #km .km-body{padding:30px 32px}
  #km .km-tabs .t{padding:19px 34px;font-size:17px}
  #km .km-big{gap:20px}
  #km .km-big a{padding:30px 34px;gap:20px;border-radius:14px}
  #km .km-big a .gi{width:64px;height:64px;border-radius:15px}
  #km .km-big a .gi svg{width:38px;height:38px}
  #km .km-big a b{font-size:26px}
  #km .km-big a span{font-size:14.5px;margin-top:3px}
  #km .km-grid{gap:18px;margin-top:20px}
  #km .km-grid a{padding:24px 22px;gap:16px;border-radius:14px}
  #km .km-grid a .gi{width:54px;height:54px;border-radius:13px}
  #km .km-grid a .gi svg{width:30px;height:30px}
  #km .km-grid a b{font-size:18.5px}
  #km .km-grid a i{font-size:13px;margin-top:2px}
  #km .km-tip{margin-top:22px;padding:17px 22px;font-size:14.5px}
}

/* ---------- 模块3 案例 ---------- */
/* 顶部内边距 8px → 0：标题条要**贴住卡片顶边**，留 8px 白边会在标题条上方
   露出一条与卡片同色的缝，看着像没对齐。 */
.case-card{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:0 0 26px}
/* 案例卡标题条（2026-09-24 夜按用户要求改造）。
   原来是卡片**外面**的居中标题 `.sec-head.center`（h2 居中 + 两侧各一条 38px 细线），
   现在改成科目一卡 `.km-tabs .t.on` 那种**卡内标题标签**：浅底条 + 白底标签 + 绿字 + 3px 绿下划线。
   关键几何**逐项抄自** `.km-tabs`/`.km-tabs .t.on`（浅底 #fbfcfe、下边框 --line、
   内边距 16px 30px、字号 16px、字重 700、绿色 --green-d、下划线 3px --green）——
   用户要的是"这种形式"，所以就照它写，别自己另配一套。
   ⚠️ 圆角必须自己补：卡片是 `border-radius:18px` 且**没有 overflow:hidden**，
     不补的话浅底条会从卡片的圆角处直角露出去。
   ⚠️ 标签文字**不能**放进 `#caseTabs` 里冒充 `.t` —— 那里的事件委托是
     `e.target.closest('.t')`，混进去会被当成地区筛选标签，点了会切面板。 */
.case-tabs{display:flex;justify-content:center;gap:38px;border-bottom:1px solid var(--line);flex-wrap:wrap;padding:0 16px}
.case-tabs .t{padding:20px 4px;font-size:17px;font-weight:700;color:#4a5568;position:relative;cursor:pointer;transition:.18s}
.case-tabs .t:hover{color:#152539}
.case-tabs .t.on{color:#0d1b33}
.case-tabs .t.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;width:34px;height:3px;border-radius:3px;background:#0d1b33}
.case-panel{padding:30px 34px 4px;display:none}
.case-panel.on{display:block}
.case-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:26px 18px}
.case-item{text-align:center;cursor:pointer;padding:8px 4px;border-radius:12px;transition:.18s}
.case-item:hover{background:#f8fafd;transform:translateY(-2px)}
.case-item .seal{width:78px;height:78px;margin:0 auto 10px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #eef2f8}
.case-item .seal img{width:100%;height:100%;object-fit:contain}
.case-item b{display:block;font-size:15px;font-weight:600;color:#2a3548}
/* 条目下方的「已完成 N 人次」（2026-09-26 加）。
   数字来源：用户的《换证统计完整年度表（2017-2026）》——
     国家/地区取「来源国×年度」表的**合计**列；
     美国 51 州 / 加拿大 9 省 / 澳大利亚 6 州 Excel 没有分州，
     按当地**华人量比例**拆分国家合计（最大余数法，各部分之和精确等于国家合计）。
     比例是估算值，见 `_probe/_build_done_counts.py` 的权重表。
   ⚠️ Excel 里没有数据的条目不渲染这一行（模板里是三元判断），
     所以会出现"有的条目有、有的没有"—— 这是有意为之，不是渲染错误。
   ⚠️ 用 <i> 承接是因为它比 <span> 短，但 <i> 默认斜体 → 必须显式 font-style:normal。 */
.case-item .done{display:block;margin-top:3px;font-size:11.5px;font-style:normal;
  color:#12a05f;letter-spacing:.2px}
/* ── 案例数据统计条（2026-09-26 加，位置：`.page-hd` 之后、`.notice` 之前）──
   文案：「已完成 N 个国家 M 人次驾照翻译认证，在中国 K 个城市完成了换领中国驾照」
   ⚠️ 页面上的三个数字**不要手改** —— 它们是 `_probe/_build_done_counts.py` 从
      《换证统计完整年度表（2017-2026）》算出的 `_probe/hjz/stats.json`，
      由 `build_part2.py` 在构建时注入。要更新数据：改 Excel → 重跑该脚本 → 重建页面。
   圆角用 10px 与上方 `.page-hd .wrap` 保持一致（下方 `.notice` 是 12px，两者之间取 10）。
   间距：`.cs-wrap` 给它 20px 上边距（与标题卡成为一组），下方 0 —— 由后一块
   `.sec` 自己的 56px 上内边距撑开，避免两段留白叠成双倍。 */
.cs-wrap{padding-top:20px}
/* 统计块的小标题与「数据更新至」备注（2026-09-27 加）。
   ⚠️ 2026-09-27 二次改动：**标题和备注都挪进卡内**（用户要求），所以 `.case-stats`
      由"一行 flex"改成"一块 column 卡"（卡内：标题 / 三块横排 `.cs-bar` / 备注）。
      字号不再复用 `.sec-head`（30px），统一到 **20px** —— 与地图卡标题同一档
      （用户指定「字体大小参考这个」，指的就是地图卡那个）。 */
.cs-head{padding-bottom:24px;text-align:center}
/* 备注**左对齐**（2026-09-27 用户要求；原来居中）—— 与卡内三块的内容左边界对齐 */
/* 2026-09-27 二次改动：从「卡底独立一行」改成**跟在副标题后面**（行内）——
   字号继承 `.cs-sub`（13.5px），颜色比正文再浅一档，不抢主句。 */
.cs-note{color:#a8b2c1;margin-left:8px;white-space:nowrap}
.cs-note b{color:var(--green-d);font-weight:400}   /* 2026-09-27：日期改为主题绿、不加粗（用户指定） */
/* 三个标题共用一套字号：`.citymap-head h3` / `.cs-head h2` / `.cc-title h1`
   —— 写成一串选择器而不是各写一份，避免以后改一处忘了另一处（同一件事存两份必漂移）。 */
.citymap-head h3,.cs-head h2,.cc-title h1,.cc-title h2{font-size:20px;font-weight:800;color:#101a2b;letter-spacing:-.2px}
/* 卡内副标题（2026-09-27 用户要求加"二级标题"）。规格对齐地图卡那句说明
   （`.citymap-head p`：13.5px / --ink-3），三张卡的"标题 + 一句说明"口径就一致了。
   ⚠️ 之前给这两个标题加的"文字宽度下划线"（`inline-block + border-bottom`）已按用户要求**删除**。 */
.cs-sub,.cc-sub{font-size:13.5px;color:var(--ink-3);margin-top:8px;line-height:1.7}
/* 案例卡内的标题（h1，用户要求放进卡里；放在 `.case-tabs` 上方）。
   `padding-bottom` 是"标题↔标签条"的间距（标签条自己还有 20px 上内边距）——
   2026-09-27 用户要求"标题和内容之间距离适当拉大"，这里 +10px。 */
.cc-title{padding:22px 26px 10px;text-align:center}
.case-stats{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  padding:20px 30px 16px}
.cs-bar{display:flex;align-items:center}
/* 三块**内容左对齐**（2026-09-27 用户指定）。宽度按内容分：`flex:0 1 auto`，
   **剩余宽度全部交给中间的分隔线元素**（`.cs-div{flex:1 1 0}`）——
   这样分隔线正好落在两块之间的留白正中，两侧留白相等；
   若改用"给条目 flex-grow"，留白会全堆在内容右侧、分隔线紧贴后一块，看着还是"挤"。
   实测（`_probe/_stats_probe.html`）：1280 条宽 1160 时三块右余量均为 60px，且三块都单行；
   约 980px 视口起开始折行，900 以下三块一起折（再窄就到 760 的竖排断点了）。 */
.cs-item{flex:0 1 auto;display:flex;align-items:center;gap:16px;min-width:0}
.cs-div{flex:1 1 0;height:56px;align-self:center;position:relative;min-width:24px}
.cs-div::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.cs-ico{flex:none;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.cs-ico svg{width:28px;height:28px;display:block}
.cs-ico.b{background:var(--brand-l);color:var(--brand)}
.cs-ico.g{background:var(--green-l);color:var(--green-d)}
/* 「昨日新增」用站点既有的橙色系（`.gi.y` 那支：底 #fff6e8），
   与「国家=蓝」「城市=绿」三块在颜色上区分开。数字用稍深一档保证白底可读性。 */
.cs-ico.y{background:#fff6e8;color:#ff8a3d}
/* 「累计」前缀：尺寸/字重与单位字（<em>）保持一致，视觉上属于"标签"那一层，不跟数字抢 */
.cs-k{font-size:17px;font-weight:700;color:#2a3548}
.cs-line.y b{color:#e8771f}
.cs-txt{display:flex;flex-direction:column;min-width:0}
.cs-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 7px;line-height:1.05}
/* 「数字 + 单位」绑成一组一起换行 —— 否则窄屏会在数字与它的单位之间断开，
   出现「… · 22,396 / 人次」这种把单位甩到下一行的情况。 */
.cs-g{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
/* 数字放大：这里是模块的视觉主体，36px + 紧字距 + 等宽数字（避免逐个数字宽度不一而抖动） */
.cs-line b{font-size:36px;font-weight:800;letter-spacing:-1px;color:var(--brand);
  font-variant-numeric:tabular-nums}
.cs-line em{font-style:normal;font-size:17px;font-weight:700;color:#2a3548}
.cs-sep{font-size:17px;font-weight:700;color:#c6cfdd}
.cs-cap{font-size:14px;color:var(--ink-3);margin-top:7px}
.cs-line.g b{color:var(--green-d)}

/* ── 换证城市分布地图（2026-09-26 加，位置：案例卡之后、「通用要求」之前）──
   数据：Excel《城市×年度》352 个城市（人次）+ 坐标（`_probe/hjz/geo/geo_index.json`）
   几何：中国省级边界**在构建期**转成静态 SVG 内联进来（`_probe/_build_citymap.py`）——
        不引第三方地图 SDK、不要 key、不依赖任何外部瓦片，部署到哪都能显示。
   合规：底图为阿里云 DataV 行政区划边界，含 34 个省级行政区（含台湾、香港、澳门）
        与「十段线/南海诸岛」（做成右下角附图框，符合标准制图惯例）。
   交互：前 20 名默认显示标签；其余只有圆点，鼠标移上去（或手机上按住）才显示 —— 纯 CSS，无 JS。 */
.citymap-card{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:24px 30px 20px}
/* 2026-09-27 用户要求：标题与说明**居中**（下方地图卡与「共 352 个中国城市」那行本来就是居中的，整块口径统一） */
.citymap-head{text-align:center}
.citymap-head p{font-size:13.5px;color:var(--ink-3);margin-top:7px;line-height:1.7}
.citymap-head p b{color:#2a3548}
.citymap-box{border:1px solid var(--line);border-radius:12px;background:#fbfdff;
  padding:8px 10px;margin-top:16px;position:relative}
/* 缩放控件（2026-09-27 加）：悬浮在地图右上角。放右上而不是右下 ——
   右下角是「南海诸岛」附图框的地盘，盖上去就违规了。 */
.cm-ctl{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:6px;z-index:2}
.cm-btn{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:9px;
  color:#41506b;font-size:17px;font-weight:700;line-height:1;cursor:pointer;padding:0;
  box-shadow:0 1px 4px rgba(23,43,77,.08);transition:.15s;display:flex;align-items:center;justify-content:center}
.cm-btn:hover{border-color:var(--brand);color:var(--brand)}
.cm-btn:active{transform:scale(.94)}
.cm-btn-r{font-size:12px;font-weight:600;color:#7b869a;display:none}
/* 「复位」只在放大/缩小时出现（scale=1 时它是无意义的） */
.citymap-box.zoomed .cm-btn-r{display:flex}
.citymap-foot{font-size:12.5px;color:#96a0b2;margin-top:12px;text-align:center}
.citymap-foot b{color:#5a6577}
/* 放大后可拖动平移：光标给出手势提示（触屏不参与拖拽，避免和窄屏的横向滚动打架）
   ⚠️ 2026-09-30 用户指出：地图被"限在中间"，两侧各空出 ~150px。
      根因就是这里原来的 `max-width:800px` —— 卡片实测 1100px 宽、地图只画到 800px。
      而 SVG **自身内容是填满 viewBox 的**（实测内容 bbox 1003.6×706.3 vs viewBox 1000×717.1），
      所以不是"图里有留白"，纯粹是被这条上限卡住 → 删掉即可，`width:100%` 自然铺满。
      （内联 SVG 是矢量的，放大不会糊；标签 15px 是**用户单位**，铺满后约合 16px，更清楚；
       引线/避让是构建期按用户单位算的，与显示尺寸无关，放大不会新增碰撞。）
      ⚠️ 窄屏那条 `.cm-svg{width:760px}`（见 max-760 块）**不受影响**，仍走横向滚动。 */
.cm-svg{display:block;width:100%;height:auto;margin:0 auto}
.citymap-box.zoomed .cm-svg{cursor:grab}
.citymap-box.cm-dragging .cm-svg{cursor:grabbing}
.cm-prov{fill:#e9f1fa;stroke:#cddcee;stroke-width:.9;stroke-linejoin:round}
.cm-inset>rect{fill:none;stroke:#dbe6f3;stroke-width:1}
.cm-jd{fill:#b9cbe0;stroke:none}
.cm-isl circle{fill:#b9cbe0}
.cm-inset-t{font-size:15px;fill:#9aa5b6}
.cm-p{cursor:pointer}
.cm-p .cm-hit{fill:transparent;stroke:none}
.cm-p .cm-dot{fill:#8fbdf2;stroke:#fff;stroke-width:.9}
.cm-p.is-top .cm-dot{fill:var(--brand);stroke:#fff;stroke-width:1.2}
.cm-p .cm-lb{font-size:15px;fill:#42506a;paint-order:stroke;stroke:#fff;stroke-width:3px;
  stroke-linejoin:round}
.cm-p.is-top .cm-lb{fill:var(--brand-d);font-weight:700}
.cm-ld{stroke:#a9c6e6;stroke-width:.8}
.cm-p:hover .cm-ld{stroke:var(--brand)}
/* 非前 20：标签默认不显示，悬停/按住才出现 */
.cm-p:not(.is-top) .cm-lb{opacity:0;transition:opacity .12s}
.cm-p:not(.is-top):hover .cm-lb,.cm-p:not(.is-top):active .cm-lb{opacity:1}
.cm-p:hover .cm-dot{fill:var(--brand);r:5}
.cm-tip-mob{display:none}
/* 操作提示（2026-09-27）：跟在说明句后面，颜色比正文浅一档，不抢主句 */
.cm-hint{color:#9aa5b6;margin-left:2px}

/* ── 城市搜索框（2026-10-08 加，位置：地图卡标题与说明句之间）──
   用户要求：「增加一个搜索框，搜索已有成功案例的城市。搜索后，如果有，显示：
   您好，我们在该城市已有多少人次成功案例，您可放心。然后地图联动，将该城市居中放大显示。」
   行为在 `assets/js/blocks.js`（索引直接从地图 SVG 的 DOM 里读，不另存数据）。 */
.cm-search{margin-top:14px}
.cm-search-box{position:relative;display:flex;align-items:center;gap:9px;max-width:430px;margin:0 auto;
  padding:0 13px;height:44px;background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:0 1px 4px rgba(23,43,77,.06);transition:border-color .15s,box-shadow .15s}
.cm-search-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(23,101,209,.12)}
.cm-search-ico{flex:none;color:#9aa5b6}
.cm-search-box:focus-within .cm-search-ico{color:var(--brand)}
.cm-search-in{flex:1;min-width:0;border:0;background:none;outline:none;font-size:14.5px;
  color:#2a3548;font-family:inherit;padding:0}
.cm-search-in::placeholder{color:#a9b2c1}
/* 清空按钮：有内容才显示（JS 切 hidden）
   ⚠️ 必须补一条 `[hidden]{display:none}` —— 下面 `.cm-search-clr` 的 `display:flex`
      是**类选择器**，会盖掉浏览器默认的 `[hidden]{display:none}`（同优先级时后者在后，
      但 UA 样式表的优先级更低）→ 输入框空着也照样显示一个 ×（2026-10-08 截图抓到）。 */
.cm-search-clr[hidden]{display:none}
.cm-search-clr{flex:none;width:22px;height:22px;padding:0;border:0;border-radius:50%;
  background:#eef2f8;color:#7b869a;font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s}
.cm-search-clr:hover{background:#e2e9f4;color:#41506b}
.cm-search-res{font-size:14px;line-height:1.7;margin-top:11px;padding:10px 14px;
  border-radius:10px;text-align:center}
.cm-search-res[hidden]{display:none}
/* 命中：主题绿（和统计条「数据更新至」同族，不新造颜色）。
   ⚠️ 不在这里再要一个"成功绿/失败红" —— 站内唯一的红是 #d1303f，留给错题红 CTA。 */
.cm-search-res.ok{background:#eef8f1;border:1px solid #cfe9d8;color:#1f7a45}
.cm-search-res.ok b{font-size:16px;color:#17663a}
.cm-search-res.no{background:#f7f9fc;border:1px solid var(--line);color:#7b869a}
/* 命中的那个城市点：加一圈光晕 + 标签常显（JS 打上 .cm-focus）
   ⚠️ 必须写在 `.cm-p:not(.is-top) .cm-lb{opacity:0}` 之后 —— 否则小城市（无标签类）
      命中后标签仍是透明的，用户看到的只是"图放大了一点"。
   ⚠️ 置顶不在这里做 —— `z-index` 对 SVG 的 `<g>` **不可靠**（2026-10-08 实测无效），
      改由 JS 把命中的 `<g>` 挪到 `.cm-points` 末尾（文档顺序＝绘制顺序）。 */
.cm-p.cm-focus{filter:drop-shadow(0 0 6px rgba(23,101,209,.55))}
.cm-p.cm-focus .cm-dot{fill:var(--brand);r:7;stroke:#fff;stroke-width:1.6}
.cm-p.cm-focus .cm-lb{opacity:1;fill:var(--brand-d);font-weight:700;
  stroke-width:4.5px}   /* 白描边加粗一档：放大后邻近标签会挨得很近，靠它保住可读性 */

/* ── 国家 / 州省 搜索框（2026-10-08 加，位置：案例卡标题说明句**下面**）──
   用户要求：「在国外驾照翻译案例和样本下面也做一个类似的搜索，搜索国家或者州」。
   视觉与地图那个城市搜索（`.cm-search*`）**刻意保持同族**：同样 44px 高、同样的
   focus 描边、同样的图标位。两处样式没合并成一个类，是因为地图那个要固定在
   430px、这个要跟着标题区居中且能挂下拉；共用类会让两边的宽度规则互相打架。
   ⚠️ 但**颜色与圆角都走变量**（`--line` / `--brand`）→ 改主题色时两处一起变，不会漏。 */
.cs-search{margin-top:16px;position:relative;max-width:430px;margin-left:auto;margin-right:auto}
/* 2026-10-09：`.cc-sub` 说明句与搜索框**互换了上下位置**（搜索框提到说明之上）。
   换位后说明句紧贴搜索框（只 8px）显得挤，且它本是给下方图标网格做注解的
   → 单独给"跟在搜索框后面"的说明句补足间距。用相邻兄弟选择器**只作用于这一种位置**，
   不影响 `.cs-sub`（统计卡副标题）与别处的 `.cc-sub`。 */
.cc-title .cs-search+.cc-sub{margin-top:14px}
/* ⚠️ 下拉是**绝对定位**、脱离文档流 → 展开时**不推挤**下方标签条（否则点开候选、
   整页内容往下跳，鼠标还停在原地的候选上就点空了）。 */
.cs-search-box{position:relative;display:flex;align-items:center;gap:9px;
  padding:0 13px;height:44px;background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:0 1px 4px rgba(23,43,77,.06);transition:border-color .15s,box-shadow .15s}
.cs-search-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(23,101,209,.12)}
.cs-search-ico{flex:none;color:#9aa5b6}
.cs-search-box:focus-within .cs-search-ico{color:var(--brand)}
.cs-search-in{flex:1;min-width:0;border:0;background:none;outline:none;font-size:14.5px;
  color:#2a3548;font-family:inherit;padding:0}
.cs-search-in::placeholder{color:#a9b2c1}
/* ⚠️ 同 `.cm-search-clr`：`display:flex` 会盖掉 UA 的 `[hidden]{display:none}`
   → 空着也显示一个 ×（那个坑刚踩过，这里一次写好）。 */
.cs-search-clr[hidden]{display:none}
.cs-search-clr{flex:none;width:22px;height:22px;padding:0;border:0;border-radius:50%;
  background:#eef2f8;color:#7b869a;font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s}
.cs-search-clr:hover{background:#e2e9f4;color:#41506b}
.cs-search-res[hidden]{display:none}
.cs-search-res{font-size:14px;line-height:1.7;margin-top:11px;padding:10px 14px;
  border-radius:10px;text-align:center}
.cs-search-res.ok{background:#eef8f1;border:1px solid #cfe9d8;color:#1f7a45}
.cs-search-res.ok b{color:#17663a}
.cs-search-res.no{background:#f7f9fc;border:1px solid var(--line);color:#7b869a}
/* 候选下拉：贴着输入框下沿悬浮 */
.cs-sug[hidden]{display:none}
.cs-sug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px;
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 30px rgba(23,43,77,.14);max-height:298px;overflow:auto;text-align:left}
.cs-sug-i{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 11px;border-radius:8px;cursor:pointer;transition:background .12s}
.cs-sug-i:hover,.cs-sug-i.on{background:var(--brand-l)}
.cs-sug-n{font-size:14.5px;font-weight:600;color:#22304a}
.cs-sug-s{font-size:12px;color:#8a94a6;white-space:nowrap}
/* 命中的卡片：加一圈品牌蓝描边（位置由 JS 滚过去）
   ⚠️ 用 `outline` + `box-shadow` 而不是 `border`/`margin` —— 加 border 会改变盒子尺寸、
      把整个网格顶得重排一格，用户会看到"旁边几张卡片抖了一下"。 */
.cs-hit{background:var(--brand-l)!important;outline:2px solid var(--brand);outline-offset:-2px}
/* 1100px 以下统计条按比例变窄，中间那块会重新折行 → 这一档把数字与标签各缩一点，
   让它撑到 800px 上下（再窄就到竖排断点了）。⚠️ 只缩字号、**不改结构**。 */
@media(max-width:1180px){
  .cs-line b{font-size:30px}
  .cs-line em,.cs-sep,.cs-k{font-size:15px}
  /* 2026-09-27：第二块改成「个国家和地区」后内容变长，这一档原本**差几像素**放不下，
     761~1000px 会折成两行。这里把图标与间距各收一点腾出 ~10px（不动字号，数字大小是用户要的）；
     实测 980/1100/1180 均恢复单行。⚠️ 与上面的字号是同一条链，改动要一起验。 */
  .cs-item{gap:12px}
  .cs-ico{width:46px;height:46px}
  .cs-ico svg{width:25px;height:25px}
}
@media(max-width:760px){
  .citymap-card{padding:20px 18px 16px}
  .citymap-head h3,.cs-head h2,.cc-title h1,.cc-title h2{font-size:18px}
  .citymap-head p{font-size:13px}
  /* 手机上把地图保持在一个"字还看得清"的宽度，改成**横向滚动**看，而不是把 SVG 缩到 4px 字 */
  .citymap-box{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cm-svg{width:760px;max-width:none}
  .cm-tip-mob{display:inline}
}
@media(max-width:760px){
  /* 竖排的是卡内**三块那一行** `.cs-bar`（不是整张卡：卡里还有标题与备注，它们不参与横排） */
  .case-stats{padding:18px 20px 14px}
  .cs-bar{flex-direction:column;align-items:stretch}
  .cc-title{padding:18px 16px 10px}
  /* 竖排：竖分隔线改成一条横线（`.cs-div::before` 的竖线关掉，改由元素自身当横线） */
  .cs-div{flex:none;width:100%;height:1px;min-width:0;background:var(--line);margin:16px 0}
  .cs-div::before{display:none}
  /* 竖排时内容本来就是通宽左对齐的，这里只需保证不被居中规则影响 */
  .cs-item{justify-content:flex-start}
  .cs-item{gap:13px}
  .cs-ico{width:42px;height:42px;border-radius:12px}
  .cs-ico svg{width:23px;height:23px}
  .cs-line{gap:0 6px}
  /* 390px 下「141 个国家 · 22,396 人次」一行约需 246px，28px 字号刚好放得下 */
  .cs-line b{font-size:28px}
  .cs-line em,.cs-sep,.cs-k{font-size:14.5px}
  .cs-g{gap:4px}
  .cs-cap{font-size:12.5px;margin-top:5px}
}
/* 原 `.case-item.more`「更多」格子的最后一条（两个点透明度）随该模块于 2026-09-27 删除；留档见 _probe/_removed_home_case_module.css */

/* ---------- 页脚 ---------- */
.footer{background:#0d1b33;color:#93a4bf;padding:48px 0 0;margin-top:56px;font-size:13.5px}
.footer .fgrid{display:flex;gap:60px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer .fbrand{flex:1 1 280px;min-width:240px}
/* 原 `.footer .fbrand .logo .txt b/i{color:#fff/#7f92b0}` 两条随旧文字 logo 删除 ——
   页脚现在直接用反白版 logo 图片（`logo-white.png`），不再需要给文字改色。 */
.footer .fbrand p{margin-top:16px;line-height:1.9;color:#8095b4}
.footer h5{color:#fff;font-size:14.5px;font-weight:700;margin-bottom:16px}
.footer .fcol li{margin-bottom:10px}
.footer .fcol a:hover{color:#fff}
.footer .fbot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 0;font-size:12.5px;color:#6d809e}
.disclaimer{background:rgba(255,255,255,.04);border-radius:10px;padding:14px 18px;margin-top:18px;font-size:12.5px;color:#8296b3;line-height:1.9}

/* ---------- 内页通用 ---------- */
.crumb{padding:18px 0;font-size:13px;color:var(--ink-3)}
.crumb a:hover{color:var(--brand)}
.crumb em{font-style:normal;color:#8a94a6;margin:0 8px}
.page-hd{padding:18px 20px 0}
/* 内页标题区：原为**通栏**白带（background:#fff + border-bottom，横跨整个视口），
   现改为**与顶部公告栏同宽的内嵌卡片**。
   ⚠️ 这是纯 CSS 实现的，14 个页面的 HTML 一行都没动（它们都是
      <div class="page-hd"><div class="wrap"><h1>…</h1><p>…</p></div></div>，
      没有内层元素可用）。靠的是下面这个等式：

        公告卡左边缘 = max(0,(W-1200)/2) + 20            （外层 .wrap 居中 + 自身 20px 内边距）
        本卡左边缘   = 20 + max(0,(W-40-(1200-40))/2)
                     = 20 + max(0,(W-1200)/2)            —— 恒等，任意视口宽度都对齐

      即：.page-hd 自带左右 20px 内边距，内层 .wrap 的 max-width 再收 40px。
   ⚠️ 若哪天改了 `.wrap` 的左右内边距（现在是 0 20px），这里的 20px 与 calc 里的 40px
      必须同步改，否则两张卡会错开。
   ⚠️ 圆角取 10px 与 `.announce-inner` 一致，而不是全站通用的 var(--radius)=14px ——
      这两张卡上下相邻、会被直接比宽，圆角不一致会显得是两个体系。 */
.page-hd .wrap{max-width:calc(var(--wrap) - 40px);background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:22px 20px}
.page-hd h1{font-size:30px;font-weight:800;letter-spacing:-.4px;color:#101a2b}
.page-hd p{color:var(--ink-3);margin-top:8px;font-size:14.5px}
/* 页头卡**右侧的补充数据**（2026-10-04 加，国家页「已完成人次：N」用）。
   ⚠️ 只有传了 `page(..., hd_extra=…)` 的页面才会有 `.has-extra` 与那层 `.hd-main` 包裹 ——
      没传的页面 DOM 与以前**逐字节一致**，这里的规则对它们不生效（别把 flex 写到 `.page-hd .wrap` 上，
      那会让 h1 与 p 变成左右并排、影响全站 24 个页面）。 */
.page-hd.has-extra .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.hd-main{min-width:0}
.hd-extra{flex:0 0 auto;text-align:right;font-size:13px;color:var(--ink-3);line-height:1.5}
.hd-extra b{display:block;font-size:26px;font-weight:800;color:var(--brand);letter-spacing:-.3px;
  margin-top:2px;font-variant-numeric:tabular-nums}
@media(max-width:560px){
  .page-hd.has-extra .wrap{flex-direction:column;align-items:flex-start;gap:10px}
  .hd-extra{text-align:left}
}

/* 练习列表页 */
.list-main{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 28px}
.list-main>h1{font-size:22px;font-weight:800;margin-bottom:6px}
.list-main>.sub{color:var(--ink-3);font-size:13.5px;margin-bottom:20px}
.zx-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.zx-list a{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:16px 18px;transition:.18s}
.zx-list a:hover{border-color:#bfe3ce;background:#f8fdfa;transform:translateY(-2px);box-shadow:0 8px 18px rgba(23,43,77,.07)}
.zx-list .num{width:34px;height:34px;flex:none;border-radius:9px;background:var(--green-l);color:var(--green-d);
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.zx-list .info{flex:1;min-width:0}
.zx-list .name{font-size:15px;font-weight:600;color:#152539;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zx-list .desc{font-size:12.5px;color:var(--ink-3)}
.zx-list .arrow{color:#c3ccdb;font-size:13px}

.zj-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.zj-list a{position:relative;border:1px solid var(--line);border-radius:12px;padding:20px;display:block;overflow:hidden;transition:.18s}
.zj-list a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(23,43,77,.1);border-color:#bfe3ce}
.zj-list .top{display:flex;justify-content:space-between;align-items:center;color:var(--green-d);font-size:13px;font-weight:700}
.zj-list .total{color:var(--ink-3);font-weight:500}
.zj-list p{margin-top:12px;font-size:16.5px;font-weight:700;color:#152539}
.zj-list .go{margin-top:14px;display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--green-d);font-weight:600}
.zj-list .bgn{position:absolute;right:-16px;top:-16px;width:76px;height:76px;border-radius:50%;background:var(--green-l);opacity:.7}

/* 答题页 */
.quiz{display:flex;gap:20px;align-items:flex-start}
.quiz-side{flex:none;width:300px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.quiz-side .hd{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--line)}
.quiz-side .hd b{font-size:15px}
.quiz-side .hd span{font-size:12.5px;color:var(--ink-3)}
/* 「清空错题本」入口（只在错题本模式出现）。
   刻意放侧栏栏头，而不是底部「上一题/下一题」那一行 —— 清空不可逆，不能紧挨主操作。 */
.quiz-side .hd span a{color:#e0414f;font-weight:700;text-decoration:none;border-bottom:1px dashed rgba(224,65,79,.45)}
.quiz-side .hd span a:hover{color:#c9303e;border-bottom-color:#c9303e}
.qnums{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:14px;max-height:420px;overflow:auto;padding-right:4px}
.qnums i{display:flex;align-items:center;justify-content:center;height:32px;border-radius:7px;border:1px solid var(--line);
  font-size:12.5px;font-style:normal;color:#5c6b82;cursor:pointer;transition:.15s}
.qnums i:hover{border-color:#bfe3ce;background:#f8fdfa;color:var(--green-d)}
.qnums i.cur{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.qnums i.ok{background:#e8faf1;border-color:#bfe3ce;color:var(--green-d)}
.qnums i.no{background:#ffeef0;border-color:#ffd4da;color:#e0414f}
.qnums i.cur.ok,.qnums i.cur.no{color:#fff}
.qnums i.cur.ok{background:#12a05f;border-color:#12a05f}
.qnums i.cur.no{background:#e0414f;border-color:#e0414f}

.quiz-main{flex:1;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 30px;min-height:520px}
.quiz-stat{display:flex;align-items:center;gap:26px;padding-bottom:18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.quiz-stat .s{font-size:13.5px;color:var(--ink-2)}
.quiz-stat .s b{font-size:20px;font-weight:800;margin-left:6px}
.quiz-stat .s.ok b{color:var(--green-d)}
.quiz-stat .s.no b{color:#e0414f}
.quiz-stat .auto{margin-left:auto;font-size:13px;color:var(--ink-3);display:flex;align-items:center;gap:7px;cursor:pointer}
.quiz-stat .auto i{width:16px;height:16px;border-radius:50%;border:1.5px solid #c9d2e0;display:block;position:relative}
.quiz-stat .auto.on i{background:var(--green);border-color:var(--green)}
.quiz-stat .auto.on i::after{content:"";position:absolute;left:4.5px;top:1.5px;width:5px;height:9px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)}
.q-title{display:flex;gap:10px;align-items:flex-start;margin-top:24px}
.q-title .tag{flex:none;padding:3px 10px;border-radius:6px;background:var(--green-l);color:var(--green-d);
  font-size:12.5px;font-weight:700;margin-top:3px}
.q-title .tt{flex:1;font-size:18px;font-weight:600;line-height:1.75;color:#152539}
.q-img{margin:18px 0 0;text-align:center}
.q-img img{max-height:290px;margin:0 auto;border-radius:8px;border:1px solid var(--line)}
.q-opts{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.q-opt{display:flex;gap:14px;align-items:flex-start;padding:15px 20px;border:1.5px solid var(--line);border-radius:11px;
  cursor:pointer;transition:.15s;font-size:15.5px;color:#2a3548;line-height:1.6}
.q-opt:hover{border-color:#bfe3ce;background:#f8fdfa}
.q-opt .k{flex:none;width:26px;height:26px;border-radius:50%;background:#f0f3f8;color:#5c6b82;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px}
.q-opt.sel{border-color:var(--brand);background:#f3f8ff}
.q-opt.sel .k{background:var(--brand);color:#fff}
.q-opt.right{border-color:var(--green);background:#f1fcf7}
.q-opt.right .k{background:var(--green);color:#fff}
.q-opt.wrong{border-color:#e0414f;background:#fff5f6}
.q-opt.wrong .k{background:#e0414f;color:#fff}
.q-explain{margin-top:20px;border-radius:11px;background:#f7fafd;border:1px solid #e8f0f8;padding:18px 22px;display:none}
.q-explain.on{display:block}
.q-explain h6{font-size:14px;color:var(--green-d);font-weight:800;margin-bottom:8px}
.q-explain p{font-size:14.5px;color:#3d4b60;line-height:1.9;white-space:pre-wrap}
.q-foot{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ⚠️ `display:inline-block` 必须写（2026-09-28 修）：
   `.q-btn` 既用在 `<button>` 上也用在 `<a>` 上；`<a>` 默认是 **inline**，
   而 **inline 元素的上下 padding 不参与行盒高度** → 按钮的 padding 会**溢出行盒、压到下一行**
   （两个翻译样本页把按钮竖直排列，就直接"叠在一起"了；`anli/detail.html` 那两个并排同线，只是没暴露）。
   `inline-block` 让 padding 进入布局盒 → 行高正常。对 `<button>` 无影响（本来就是 inline-block）。 */
.q-btn{display:inline-block;padding:11px 32px;border-radius:999px;border:1.5px solid var(--line);font-weight:700;color:#2a3548;background:#fff;font-size:15px}
.q-btn:hover{border-color:#c3ccdb;background:#f8fafd}
.q-btn.primary{background:linear-gradient(135deg,#2fd08a,#12a05f);color:#fff;border:0;box-shadow:0 8px 18px rgba(34,181,115,.3)}
.q-btn.primary:hover{transform:translateY(-1px)}

/* 成绩卡 */
.result{text-align:center;padding:26px 0}
.result .score{font-size:64px;font-weight:800;color:var(--green-d);letter-spacing:-2px;line-height:1.1}
.result .score.bad{color:#e0414f}
.result .lv{font-size:17px;font-weight:700;color:#152539;margin-top:6px}
.result .rr{display:flex;justify-content:center;gap:40px;margin-top:26px;flex-wrap:wrap}
.result .rr div b{display:block;font-size:26px;font-weight:800}
.result .rr div span{font-size:13px;color:var(--ink-3)}

/* 内容文章页 */
.doc{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 40px}
.doc h2{font-size:22px;font-weight:800;margin:30px 0 12px;padding-left:12px;border-left:4px solid var(--brand)}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:17px;font-weight:700;margin:22px 0 8px;color:#152539}
.doc p{font-size:15px;color:#3d4b60;line-height:2;margin-bottom:12px;text-align:justify}
.doc ul,.doc ol{margin:10px 0 16px;padding-left:6px}
.doc ul li,.doc ol li{font-size:15px;color:#3d4b60;line-height:2;padding-left:20px;position:relative;margin-bottom:4px}
.doc ul li::before{content:"";position:absolute;left:4px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.doc ol{counter-reset:n}
.doc ol li{counter-increment:n}
.doc ol li::before{content:counter(n);position:absolute;left:0;top:8px;width:18px;height:18px;border-radius:50%;
  background:var(--brand-l);color:var(--brand);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.doc table{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:14.5px}
.doc table th{background:#f4f7fb;font-weight:700;color:#152539;text-align:left}
.doc table th,.doc table td{border:1px solid var(--line);padding:11px 14px;color:#3d4b60}
.doc table tr:hover td{background:#fafcfe}
.doc .hl{background:#fff8e6;border-left:4px solid #ffb020;padding:14px 18px;border-radius:8px;margin:16px 0;font-size:14.5px;color:#6b5320;line-height:1.9}
.doc .hl b{color:#8a5a00}
.doc-steps{counter-reset:s;margin:18px 0}
.doc-steps .st{position:relative;padding:0 0 26px 54px}
.doc-steps .st::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;
  border-radius:10px;background:linear-gradient(135deg,#3d97ff,#1668dc);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.doc-steps .st::after{content:"";position:absolute;left:16.5px;top:40px;bottom:6px;width:1.5px;background:#e3eaf5}
.doc-steps .st:last-child{padding-bottom:0}
.doc-steps .st:last-child::after{display:none}
.doc-steps .st b{display:block;font-size:16px;color:#152539;margin-bottom:4px}
.doc-steps .st p{margin:0;font-size:14.5px;color:#5c6b82}

/* 交通标志（2026-09-27 改版：改为**全部分类静态展开**，图形换成真实标志图，卡片带含义说明） */
/* 分类锚点导航（吸顶）。原来这里是一排 **JS 分页签** `.sign-tabs`，现在页面变成
   17 个分类全部静态展开（581 个标志，为了 SEO），所以需要一个"随时能跳分类"的入口。
   ⚠️ 吸顶位置必须与页头高度对齐（桌面 72px / ≤1180 是 62px）；
   ⚠️ 配套的 `html{scroll-padding-top}` 要留出"页头 + 这条"的总高，否则锚点跳过去会被盖住
      （MEMORY §6.4：加页内锚点必须补 scroll-padding-top）。 */
.sign-cats{position:sticky;top:72px;z-index:50;background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);box-shadow:0 6px 18px rgba(23,43,77,.05)}
.sign-cats .wrap{display:flex;gap:8px;overflow-x:auto;padding-top:11px;padding-bottom:11px;
  scrollbar-width:none}
.sign-cats .wrap::-webkit-scrollbar{display:none}
.sign-cats a{flex:0 0 auto;padding:7px 15px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-size:13.5px;font-weight:600;color:#2a3548;white-space:nowrap;transition:.18s}
.sign-cats a:hover{background:var(--brand-l);border-color:#cfdcee;color:var(--brand-d)}
.sign-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sign-it{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:14px 12px 13px;text-align:center;transition:.18s;
  /* ⚠️ `min-width:0` 必须给：栅格项的自动最小尺寸＝**内部图片的固有宽度（320px）**，
     不给的话窄屏两列（每列 ~167px）会把栅格撑到 320px/列 → **整页横向溢出**（手机上真踩到，
     桌面 4 列时列宽 >320px 反而不显形，所以只在窄屏暴露）。 */
  min-width:0}
.sign-it:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(23,43,77,.1);border-color:#cfdcee}
.sign-it .im{display:flex;align-items:center;justify-content:center;height:104px;margin-bottom:9px}
.sign-it .im img{max-width:100%;max-height:104px;width:auto;height:auto}
.sign-it b{display:block;font-size:13.5px;font-weight:700;color:#2a3548;line-height:1.5}
/* 含义说明：581 条里中位数 23 字 → 最多 3 行、超出省略，卡片才等高 */
.sign-it p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin:5px 0 0;font-size:12px;color:var(--ink-3);line-height:1.6}

/* 联系 */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start}
.form-row{margin-bottom:16px}
.form-row label{display:block;font-size:14px;font-weight:600;color:#2a3548;margin-bottom:7px}
.form-row input,.form-row textarea,.form-row select{width:100%;border:1.5px solid var(--line);border-radius:10px;
  padding:12px 14px;font-size:14.5px;color:#152539;outline:none;transition:.16s;background:#fff}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,104,220,.1)}
.form-row textarea{min-height:120px;resize:vertical}
.form-tip{font-size:12.5px;color:var(--ink-3);margin-top:10px}
.faq-it{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:12px}
.faq-it b{display:block;font-size:15px;color:#152539;margin-bottom:6px}
.faq-it>p>b{display:inline;font-size:inherit;color:#25324a;margin:0;font-weight:600}
.faq-it p{font-size:14px;color:#5c6b82;line-height:1.9;margin:0}

/* 案例详情 */
.case-detail{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}
.case-aside{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;text-align:center}
.case-aside .seal{width:120px;height:120px;margin:0 auto 14px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;border:1px solid #eef2f8}
.case-aside .seal img{width:100%;height:100%;object-fit:contain}
.case-aside .seal.flag{width:136px;height:94px;border-radius:10px;background:#fbfcfe}
.case-aside .seal.flag img{width:auto;height:auto;max-width:100%;max-height:100%}
.case-aside h3{font-size:20px;font-weight:800;color:#101a2b}
.case-aside .rg{font-size:13px;color:var(--ink-3);margin-top:4px}
/* 「服务人次」行（2026-09-27 加）：夹在「XX · 州级证件」与信息表之间。
   数字用品牌蓝加粗放大一档 —— 它是这张卡里唯一的"业绩"数字，值得比两侧灰字重一点。 */
/* 左栏＝"卡片 + 卡片下方那块"的纵向列（2026-10-02 用户要求把「服务人次」从卡片里挪到下面）。
   ⚠️ 这层 `.case-col` 必须存在：`.case-detail` 是 **2 列栅格**，卡片下方那块若直接当栅格子元素，
      会被自动放到**第二行**（＝跑到右侧正文底下），而不是紧贴卡片下方。包一层 flex 列最省事。
   ⚠️ `.case-aside .dm` 那两条规则已随之删除（`.dm` 全仓只有详情页左栏用，没有别的引用）。 */
.case-col{display:flex;flex-direction:column;gap:20px;min-width:0}
/* 右栏也改成竖排（2026-10-03 用户要求把首页两块搬上来）：
   标题块 → 换证服务卡 → 原有正文（样本说明 / 真实样本 / 换证办理提示）。
   `min-width:0` 与 `.case-col` 同理：栅格子项不加它会被内部内容（SVG/长表格）撑破。 */
.case-main-col{display:flex;flex-direction:column;gap:20px;min-width:0}
/* 右栏顶上的**动态**标题块（2026-10-03）——观感取自「翻译」页的 `.page-hd`（白卡 + 大标题），
   但**不套 `.wrap`、不做通栏**：它住在右栏里，宽度与下面的「样本说明」卡一致。
   ⚠️ 原块还有一句副标题「中文翻译件由谁出具、要达到什么标准」，用户明确要求删掉 → 现在只有 h1。
   ⚠️ 标题文字＝「<本页案例名>**驾照**换中国驾照」（如「阿拉巴马州驾照换中国驾照」），由页面 JS 填 `#caseHd`。
      （2026-10-03 用户报「少了『驾照』2 个字」后补上；拼装代码在 `_probe/build_part2.py` 的 `ANLI_DETAIL`。） */
/* 🔴 `.cd-hd` 现在是「左标题 / 右数据」两列（2026-10-04 用户要求右上角加「翻译服务人次：N」）。
   `.hd-extra` 那套样式与城市页/国家页页头**共用同一份**（灰标签 + 品牌蓝大数字）。
   ⚠️ 卡片内容由页面 JS 填（`#caseHd`）：没有数字的条目只渲染 `.cd-hd-main` 那一半，
      `justify-content:space-between` 对单个子元素没有副作用。 */
.cd-hd{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.cd-hd-main{min-width:0}
.cd-hd h1{font-size:30px;font-weight:800;letter-spacing:-.4px;color:#101a2b;line-height:1.25}
@media(max-width:560px){
  .cd-hd{flex-direction:column;align-items:flex-start;gap:10px}
  .cd-hd .hd-extra{text-align:left}
}
/* 「<本页名字>驾照翻译要求」提示框（2026-10-03）：直接复用 `.notice` 那套黄框
   （与「样本说明」同一个观感），这里只把它的 `margin-bottom` 归零 ——
   这一层的间距交给 `.case-main-col` 的 `gap` 统一管，否则会叠成 40px。 */
.cd-req{margin-bottom:0}
.case-extra{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 24px}
/* 2026-10-02 用户要求「文字居中显示」—— 这两条**标题类**文字居中，与上面那张 `.case-aside` 卡
   （整卡 `text-align:center`）保持一致。
   ⚠️ **列表行不要跟着居中**：日期 + 城市长短不一，居中会参差不齐；`.ce-list li` 是 flex 且没继承
      这里的对齐，所以只改 `.ce-h` / `.ce-num` 就够。 */
.ce-h{font-size:13px;color:var(--ink-3);text-align:center}
.ce-num{font-size:26px;font-weight:800;color:var(--brand);letter-spacing:-.3px;margin-top:4px;
  text-align:center}
/* 第二节（最新服务案例）自带一条分隔线；没有服务人次时它就是第一节，不需要线 */
.ce-h2{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.ce-list{margin-top:10px}
/* ⚠️ 左右各 9px 内边距 + **等量负外边距**：悬停时的底色能往外铺一点，
   而文字仍然与上面的「最新服务案例」左对齐（不加负外边距的话整列会右移 9px）。 */
.ce-list li{display:flex;gap:12px;font-size:13px;color:#2a3548;padding:7px 9px;margin:0 -9px;
  border-radius:8px;position:relative;border-bottom:1px dashed #eef2f8;
  transition:background .14s,color .14s}
.ce-list li:last-child{border-bottom:0}
/* 悬停高亮（2026-10-02 用户要求"鼠标移过去那行高亮突出下"）：淡蓝底 + 左侧竖条 + 日期染色。
   ⚠️ 竖条用 `::before` 且只动 `height`（0 → 16px），**不做位移** —— 否则悬停时整行会抖。 */
.ce-list li::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:3px;height:0;border-radius:2px;background:var(--brand);transition:height .14s}
.ce-list li:hover{background:var(--brand-l)}
.ce-list li:hover::before{height:16px}
.ce-list li:hover span{color:var(--brand)}
/* 日期列等宽对齐（`tabular-nums`），否则 YYYY-MM-DD 的 1 与 0 宽度不同会参差 */
.ce-list li span{flex:0 0 auto;color:var(--ink-3);font-variant-numeric:tabular-nums;
  transition:color .14s}
/* 列表里**能链到国家页的国名**（2026-10-04 加）：只有已建页面的国家才包 `<a>`。
   用品牌蓝 + 虚线底 —— 比纯文字**看得出可点**，又不像实线下划线那样抢眼；
   行悬停时底线变实线（`.ce-list li:hover` 那套已经会给整行加淡蓝底）。 */
.ce-list li a{color:var(--brand);text-decoration:none;
  border-bottom:1px dashed rgba(22,104,220,.45);transition:border-bottom-color .14s}
.ce-list li a:hover{border-bottom-style:solid;border-bottom-color:var(--brand)}
/* ⚠️ 国名那半**必须整段包一个元素**：`.ce-list li` 是 `display:flex`，
   「文本 / `<a>` / 文本 / `<a>`」会各成为一个 flex item、被挤成两三个字一行（实测断字）。
   ⚠️ 选择器要**比 `.ce-list li span` 更具体**（上面那条是给日期列用的灰字 + 等宽数字），
     否则这半也会变灰、还会被 `flex:0 0 auto` 压住。 */
.ce-list li .ce-c{flex:1 1 auto;min-width:0;color:#2a3548;font-variant-numeric:normal}
/* ── 城市页顶部两栏（2026-10-04）：左＝「<城市>换证数据」(.doc)，右＝「最新换证翻译国家和地区」(.case-extra) ──
   用户要求把新的「最新换证翻译国家和地区」做成**详情页那张 `.case-extra` 卡的样子**（`ce-h` / `ce-num` /
   `ce-h2` / `ce-list` 全部复用，一行 CSS 都没为它新写）—— 只是换个位置放。
   ⚠️ 右栏写死 `340px`：`ce-list` 的日期列（`flex:0 0 auto`，`YYYY-MM-DD`）约 84px，
      再减去卡片左右各 24px 内边距 → 一行放「日期 + 四五个国家名」正好，窄了国家名会折成两行。
   ⚠️ `align-items:start`：否则右侧卡会被拉伸到与左侧 `.doc` 等高（列表短时底部一大片空白）。
   ⚠️ 断点 `980` 与 `.case-detail` 一致：窄屏整页转单列，卡片自然落到下方。 */
.city-top{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
/* 左栏是**竖列**：`.doc`（换证数据）下面接 `.flow-card`（换证指南）。
   ⚠️ 2026-10-04 用户把「换证指南」从页面底部**移到这里**（画红圈指定）→ 它不再是独立一节，
      而是左栏里的第二块，所以这一层必须有，否则两块会并排（`.city-top` 只分两列）。
   ⚠️ `min-width:0` 与 `.case-col` / `.case-main-col` 同理：栅格子项不加它会被内部 SVG 撑破。 */
.city-top-l{display:flex;flex-direction:column;gap:20px;min-width:0}
/* 左栏里的「换证指南」比它在详情页右栏时**窄 60~100px** → 四步的副标题会折成两行
   （「哪些境外驾照可以换」9 字 ≈ 112px，是折行的阈值；「材料清单与办理步骤」同理）。
   这里把**左引导块宽度**和**每格内边距**各收一点、副标题字号降到 12px，把可用宽度让出来。
   ⚠️ 只作用于 `.city-top` 内，**不动 `.flow-card` 的基础规则**（详情页那处宽度够、保持原样）。
   🔴 **必须包在 `min-width:1041px` 里** —— 这是 2026-10-04 用户报「移动端右侧空白了」的根因：
      `.city-top .flow-lead` 是 **2 个类**（比 `@media(max-width:980px)` 里那条 `.flow-lead`
      的 **1 个类** 更具体），不限定范围就会**盖掉移动端的 `width:100%`**，
      导致「卡片已转竖排、引导块还卡在 200px」→ 右边留一大块空白。
      ≥1041 才是 `.city-top` 两栏、这张卡真正待在窄左栏里的区间，收紧规则只该在这段生效。
   （参见 `_probe/_flow_probe.html`：它量 `.flow-card/.flow-lead/.flow-steps` 的实际矩形。） */
@media(min-width:1041px){
  .city-top .flow-lead{width:200px;padding:22px 20px}
  .city-top .flow-step{padding:30px 6px}
  .city-top .flow-step i{font-size:12px}
}
@media(max-width:1040px){.city-top{grid-template-columns:minmax(0,1fr);gap:14px}
  .city-top-l{gap:14px}}
@media(max-width:430px){.case-extra{padding:18px 18px}}
.case-aside dl{margin-top:20px;text-align:left;border-top:1px solid var(--line);padding-top:16px}
.case-aside dl div{display:flex;justify-content:space-between;padding:8px 0;font-size:13.5px;border-bottom:1px dashed #eef2f8}
.case-aside dt{color:var(--ink-3)}
.case-aside dd{color:#2a3548;font-weight:600}
/* 2026-10-02 用户要求「颜色换成主题绿」—— 原先是蓝色 CTA 渐变，改成站内既有的**绿色 CTA 渐变**
   （与移动端按钮组 `.mob-btn.primary` 同一套色：`135deg,#2fd08a,#12a05f`，投影也换成绿色的）。
   ⚠️ `.cbtn` 全站只有详情页左栏这一个按钮在用，改它不会波及别处。 */
.case-aside .cbtn{display:block;margin-top:18px;padding:12px;border-radius:10px;text-align:center;font-weight:700;
  background:linear-gradient(135deg,#2fd08a,#12a05f);color:#fff;box-shadow:0 8px 18px rgba(34,181,115,.3)}
.sample-box{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 28px;margin-bottom:20px}
.sample-box h4{font-size:17px;font-weight:800;margin-bottom:14px;color:#101a2b;display:flex;align-items:center;gap:9px}
.sample-box h4::before{content:"";width:4px;height:17px;border-radius:2px;background:var(--brand)}
/* 「真实样本」原图框。
   原图为横向合成图（左=证件原件正反面，右=中文翻译件），信息密度高、缩到版心宽度后小字看不清，所以：
     ① 图片按容器自适应，**点击在页内灯箱放大**（见下方 .lightbox；2026-09-27 前是 <a target="_blank"> 跳新标签页）；
     ② 给浅灰底 + 内边距，让白底的证件图有边界感，不至于糊在卡片上。 */
.rs-shot{border:1px solid var(--line);border-radius:12px;background:#f4f7fb;padding:12px}
.rs-shot a{display:block;cursor:zoom-in}
.rs-shot img{display:block;width:100%;height:auto;border-radius:7px;
  box-shadow:0 2px 12px rgba(16,42,80,.12);background:#fff}
/* 样本图下方说明（2026-09-27 二次改版：用户嫌"太丑"→ 从"一段灰字 + 清单"重做成**卡片式版面**）。
   层次：未盖章提示条 → 小节标题 → 两套文件并列小卡 → 末行资质 → 虚线分隔的放大提示。
   ⚠️ 文字一个字没改（含 ASCII `+`、手写 `√`、半角句点 `如C1.`）；`√` 只是包进 `<i>` 做成绿圆点。 */
.rs-cap{margin-top:14px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(180deg,#f8fafd,#f3f7fc);border:1px solid #e8eef7;
  font-size:13px;color:#4a5a74;line-height:1.8}
.rs-cap b{color:#1f2a3d}
/* ① 未盖章提示：淡黄底 + 左侧橙条（全篇唯一的"提醒"语气，所以给它一个暖色） */
.rsc-note{padding:10px 14px 10px 15px;border-radius:10px;background:#fff8e6;
  border-left:3px solid #f0a020;color:#7a5a12;font-size:13px}
.rsc-note b{color:#c2410c}
/* 「翻译机构备案公章+翻译章」放大一倍（2026-10-02 用户要求）。
   ⚠️ 用 `%` 而不是写死 px：它是相对**父级** `.rsc-note` 的 13px（窄屏 12.5px）算的，
      一处规则两个断点都对，不会写漏（`.rsc-note` 在 ≤760 会缩到 12.5px）。
   ⚠️ `inline-block` 不是可有可无的：纯 inline 时，窄屏（390px）这一串 25px 的字装不下，
      会**先在行尾塞进一个字**再换行 —— 截图里就是「…成品会加盖**翻** / 译机构备案公章+翻 / 译章」，
      行尾挂个孤零零的大字很难看。`inline-block` 让它**要么整段留在行内、要么整段换行**：
      桌面 742px 够宽 → 仍是一行（实测 566 < 742）；窄屏装不下 → 整体落到下一行。
   ⚠️ 实测：1280 下 13px → **26px**；390 下 12.5px → **25px**，都是精确 2 倍，且无横向溢出。 */
.rsc-note b.big{font-size:200%;display:inline-block}
/* ② 小节标题：竖条 + 粗体（与全站 `.sample-box h4::before` 同款语汇） */
.rsc-h{display:flex;align-items:center;gap:8px;margin:17px 0 11px;
  font-size:13.5px;font-weight:800;color:#1f2a3d}
.rsc-h::before{content:"";width:4px;height:15px;border-radius:2px;background:var(--brand)}
/* ③ 两套文件并列小卡 */
.rsc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* 2026-10-03 用户要求「这两块加一点背景色，让醒目一点」——
   原来卡片是纯白、与外面那张白卡（`.sample-box`）同一个色，几乎分不出来。
   改成站内的**品牌浅蓝** `--brand-l`（#e8f1ff）+ 同色系的边框，边界一下子就出来了。
   ⚠️ 刻意**不用绿色** `--green-l`：卡里那个 `√` 圆点本身就是 `--green-l` 底，
      卡片再用同一个绿会把它糊掉、失去"打勾"的识别度。
   ⚠️ 想更醒目就调这两个色（`--brand-l` → 再深一档），别去动 `.sample-box` 的白底。 */
.rsc-card{background:var(--brand-l);border:1px solid #d3e5ff;border-radius:12px;padding:13px 15px;
  box-shadow:0 2px 8px rgba(23,43,77,.05)}
.rsc-t{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:#2a3548;line-height:1.7}
.rsc-t i{flex:0 0 auto;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--green-l);color:var(--green-d);font-style:normal;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.rsc-t b{font-weight:700;color:#1f2a3d}
.rsc-card p{margin:7px 0 0 27px;font-size:12.5px;color:#8a94a6;line-height:1.65}   /* 27 = 18 圆点 + 9 间距 */
/* ④ 末行：营业执照 + 译员资质证书 */
/* 末行：营业执照 + 译员资质证书。
   2026-10-03 用户要求「也做的醒目一点」—— 与上面那两块 `.rsc-card` **同一套浅蓝底/边框**，
   让它读起来是同一组的第三条（而不是一行容易被跳过的灰色小字）；
   字号 13 → 13.5、加 `font-weight:600`、文字色提到 `#1f2a3d`，图标仍是品牌蓝。
   ⚠️ 底色/边框要与 `.rsc-card` **保持一致**，两处一起改（否则同一组里三个色阶会显得脏）。 */
.rsc-foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding:11px 15px;
  font-size:13.5px;font-weight:600;color:#1f2a3d;
  background:var(--brand-l);border:1px solid #d3e5ff;border-radius:12px}
.rsc-foot svg{flex:0 0 auto;color:var(--brand)}
/* 「营业执照+译员资质证书」染红（2026-10-03 用户要求）—— 用站内既有的那个**红**
   （与「错题」红 CTA 的深色端同一个值 `#d1303f`），别另造一个红。
   ⚠️ 整行已经是 `font-weight:600`，这里只改颜色 + 提到 700，不动字号。 */
.rsc-foot b{color:#d1303f;font-weight:700}
/* ⑤ 虚线分隔的放大提示（功能提示，压到最后、最轻） */
.rsc-hint{margin:13px 0 0;padding-top:12px;border-top:1px dashed #e0e8f3;
  font-size:12.5px;color:#8a94a6}
.rsc-hint b{color:#4a5a74}
@media(max-width:760px){
  .rs-cap{padding:13px 13px 14px}
  .rsc-grid{grid-template-columns:1fr;gap:10px}   /* 窄屏两套改上下排 */
  .rsc-note{font-size:12.5px}
}
@media(max-width:560px){.rs-shot{padding:8px}}
/* ── 样本放大**对话框**：点样本图 → 在原网页上弹出一个居中的浮层卡片 ──
   2026-09-27 用户两次要求：① 「点击样本图片，在原网页放大图片」② 「直接在原网页上弹出一个放大对话框」。
   形态从"整屏深色遮罩"改成"**半透明遮罩 + 居中白色卡片**" —— 页面still在背后可见（这点是"对话框"与"整屏查看"的区别）。
   结构：.lightbox(遮罩) > .lb-card(卡片) > .lb-bar(标题 + 提示 + ×) + .lb-stage(滚动盒) > .lb-img
   两种状态：默认「适应窗口」（无 .native）→ 点图片后「原始尺寸」（.native，可滚/可捏合）
   ⚠️ `hidden` 属性会被下面的 display:flex 覆盖 → **必须显式写 `.lightbox[hidden]{display:none}`**
   ⚠️ 层级：.header 是 z-index:60、抽屉 59、汉堡 70 → 对话框取 200 压在全部之上 */
.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(15,23,42,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-tap-highlight-color:transparent}
.lightbox[hidden]{display:none}
/* 卡片：**高度随内容自适应**、上限 88vh —— 这样它是"裹住图片"的对话框，
   而不是把图片摆在空荡荡的大盒子里（整屏高对 2.12:1 的横向样张会上下留一大片灰）。
   ⚠️ 图片的 max-height 用 vh 而不是 %（百分比要父元素有确定高度，卡片改自适应后就没高度可依，
      会退化成"按内容撑开 → 又超过上限"的循环）→ 上限里预留标题栏与内边距的空间。 */
.lb-card{display:flex;flex-direction:column;width:min(1200px,100%);max-height:min(88vh,900px);
  background:#fff;border-radius:14px;box-shadow:0 30px 80px rgba(8,15,30,.45);overflow:hidden}
.lb-bar{display:flex;align-items:center;gap:12px;flex:0 0 auto;
  padding:12px 14px 12px 18px;border-bottom:1px solid var(--line);background:#fff}
.lb-cap{font-size:14.5px;font-weight:700;color:#101a2b;letter-spacing:.2px}
.lb-hint{font-size:12.5px;color:#8a94a6;margin-left:auto;text-align:right}
.lb-x{flex:0 0 auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:#f4f7fb;color:#5c6b82;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:background .18s,color .18s}
.lb-x:hover{background:#e8eef7;color:#25324a}
/* stage 同时是裁剪盒与滚动盒；图片用 `margin:auto` ——
   小于容器时居中；⚠️ 大于容器时 auto 外边距自动归零、从左上开始，
   不会出现"overflow 容器里用 flex 居中导致左侧/顶部永远滚不到"的老毛病。
   `flex:0 1 auto` + `min-height:0`：自适应态跟着图片长高，切到原始尺寸后由卡片上限压回去并滚动。 */
.lb-stage{flex:0 1 auto;min-height:0;display:flex;overflow:auto;overscroll-behavior:contain;
  background:#f4f7fb;padding:14px}
.lb-img{margin:auto;display:block;max-width:100%;max-height:min(72vh,760px);width:auto;height:auto;
  border-radius:6px;cursor:zoom-in;background:#fff;box-shadow:0 6px 22px rgba(16,42,80,.14)}
.lightbox.native .lb-img{max-width:none;max-height:none;cursor:zoom-out}
@media(max-width:560px){
  .lightbox{padding:8px}
  .lb-card{width:100%;max-height:92vh;border-radius:12px}
  .lb-bar{flex-wrap:wrap;gap:8px;padding:9px 10px 9px 13px}
  .lb-cap{font-size:12.5px}
  /* 窄屏一行放不下提示 → 折到第二行，别把它藏掉（不然"能点图片切尺寸"没人知道） */
  .lb-hint{flex-basis:100%;margin-left:0;font-size:11.5px;text-align:left}
  .lb-x{width:32px;height:32px;margin-left:auto}
  .lb-stage{padding:8px}
  .lb-img{max-height:min(78vh,760px)}
}
/* 🗑️ 「证件要点列表」`.pt-list` 已随该模块于 2026-09-27 整体删除，
   留档 `_probe/_removed_case_points.css`（含删除理由与恢复方法）。 */

/* ── 「翻译」页的两块「豆腐干」：翻译机构 vs 公证处（2026-09-27 用户要求）──
   放在页面标题块与「境外驾驶证翻译的通用要求」之间，就一句"两种出件方式、各自多贵、长什么样"。
   每块四件东西：名称 / 客户选择占比徽标 / 费用 / 示例图（**用户指定的正是这四项，没加别的话术**）。
   ⚠️ 图片不是等比缩放的：两张是"多页拼接"的横条（2.20:1 与 2.67:1），比例不同，
      所以固定盒高 + `max-width/height:100%` 做 **contain**（各自居中、留浅灰衬底），
      这样两块卡片**等高**且都不裁切。改成 `cover` 会把左右两页裁掉。
   ⚠️ 窄屏 ≤760 不能再用固定盒高（图会缩得看不清）→ 改成 `height:auto` + 图 `width:100%`。 */
.fy-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fy-tile{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px 20px}
/* 「推荐」角标（2026-09-27 用户要求，**只给第一块**：翻译机构）。
   做成"贴右上角、跟着卡片圆角走"的标签，而不是 45° 斜丝带 ——
   斜丝带必须给卡片加 `overflow:hidden` 才能裁出斜边，那会连带裁掉别的绝对定位元素；
   这个做法不需要，且 `top/right:-1px` 正好盖住卡片的 1px 边框。
   ⚠️ 内圆角写 `0 14px 0 12px` 与 `--radius:14px` 对齐（改 --radius 时这里要跟着改）。 */
.fy-tag{position:absolute;top:-1px;right:-1px;display:flex;align-items:center;gap:6px;
  padding:10px 24px 10px 22px;border-radius:0 var(--radius) 0 24px;
  background:linear-gradient(135deg,#2fd08a,#12a05f);color:#fff;
  font-size:25px;font-weight:700;letter-spacing:1px;line-height:1;
  box-shadow:0 4px 14px rgba(18,160,95,.30)}
/* 第二块（公证处）的「全程代办」角标（2026-10-03 用户要求）—— 与「推荐」同款贴角，
   但**尺寸只有一半、底色改成品牌蓝**（2026-10-03 二次要求）：
   · 字号 22 → **11px**、内边距/圆角/gap 全部按比例减半；
   · 底色从绿渐变换成站内的**蓝色 CTA 渐变**（`135deg,#3d97ff,#1668dc`，投影同色系）；
   · 图标尺寸用 CSS 控（`.fy-tag2 svg`）而不是改模板里的 `width/height`，
     这样以后调尺寸不用动 HTML、也不会和「推荐」那枚的标记写法走样。 */
.fy-tag2{font-size:11px;gap:3px;padding:5px 8px 5px 7px;border-radius:0 var(--radius) 0 12px;
  background:linear-gradient(135deg,#3d97ff,#1668dc);
  box-shadow:0 2px 7px rgba(22,104,220,.30)}
.fy-tag2 svg{width:6px;height:6px}
/* ⚠️ 星标尺寸用 `1em` 跟着字号走，别写死 —— 窄屏把字号调小时星标会自动跟着缩，
   不用再去改模板里 SVG 的 width/height 属性（CSS 的 width/height 会盖掉属性）。 */
.fy-tag svg{display:block;flex:0 0 auto;width:1em;height:1em}
/* ⚠️ 角标是**绝对定位**的，放大到 2× 后实测把「99.5% 客户选择」徽标压住 26px
   （用 `_btn_probe.html?sel=.fy-tag,.fy-hd` 量出来的；肉眼扫一眼看不出来）
   → 给标题行留出**角标那么宽**的右内边距，让它俩各占一边、互不侵犯。
   ⚠️ **两块卡片都要留**（同宽同高）：只给带角标那块留，会出现"一块徽标换行、一块不换行"
      → 下面各行（费用、图、按钮）的起始高度就错位了。
   ✅ 1280 下内容区 530px，留 136 后仍有 394px，"标题 136 + 徽标 120" 一行放得下 ✓ 不会白白换行。
   ⚠️ 预留值 ≈ 2× 角标的实测宽度 129px + 余量；**改角标字号时要跟着改这里**。 */
.fy-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px;
  padding-right:136px}
/* ⚠️ 详情页右栏里的两块豆腐干（2026-10-03 从翻译页搬来）——
   右栏只有 ~836px，两块各 408px；`.fy-hd` 又要给「推荐」角标预留 136px → 标题行只剩 230px。
   实测：第一块「翻译机构出具翻译」(136) + gap(10) + 「99.5% 客户选择」(106) = 252px > 230 → **折成两行**；
   第二块 119+10+99 = 228 ≤ 230 → 一行。两块标题行高度差 65 vs 52 →
   下面的「图片框 / 包括 / 按钮」整体错开 **14px**（用户明确要求对齐）。
   给标题行一个**两行高**的最小高度（实测两行＝65px，取 66 留 1px 余量），两块从「费用」起完全对齐。
   ⚠️ 别改成"缩字号"或"缩角标预留"：前者让这两块和站内其它卡片不同级；
      后者会把预留压到 ~114px 才能让第一块不折行，那时标题离角标只剩 5px、太挤。
   ⚠️ 这 66px 是**量出来的**，改了标题文案/字号/角标尺寸都要回来重量一次。 */
.case-main-col .fy-hd{min-height:66px;align-content:flex-start}
.fy-hd h3{font-size:17px;font-weight:800;color:#101a2b;margin:0}
.fy-badge{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.fy-badge.g{background:var(--green-l);color:var(--green-d)}
.fy-badge.m{background:#f1f5f9;color:#64748b}
.fy-fee{font-size:14px;color:#5c6b82;margin:0 0 14px}
.fy-fee b{font-size:21px;font-weight:800;color:var(--brand);margin:0 3px;letter-spacing:.3px}
/* 盒高固定 → 两块等高；图 contain 居中（不裁切，比例不同也不变形） */
.fy-shot{display:flex;align-items:center;justify-content:center;height:200px;
  border:1px solid var(--line);border-radius:10px;background:#f4f7fb;padding:8px}
.fy-shot img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:5px;background:#fff}
@media(max-width:980px){.fy-shot{height:176px}}
@media(max-width:760px){
  .fy-grid{grid-template-columns:1fr;gap:16px}
  .fy-shot{height:auto;padding:6px}
  .fy-shot img{width:100%}
  .fy-fee b{font-size:19px}
}
/* 「包括：…」清单 —— 用户给的原文，位置就在示例图**正下方**（他画的横线处）。
   ⚠️ 用 `<b>` 只是强调关键词，**文字一个字都没改**（含 ASCII 的 `+`，别"顺手"换成全角）。 */
.fy-inc{font-size:13px;color:#5c6b82;line-height:1.75;margin:12px 0 14px}
.fy-inc b{color:#25324a;font-weight:700}
/* 政策解读页顶部那两块（2026-10-05 用户要求）——外形照搬豆腐干，但没有费用/角标/按钮：
   · `.fy-hd` 本来给「推荐」角标预留了 136px 右侧内边距 → 这里没有角标，要收回，否则标题行右半空着
   · `.fy-inc` 的 14px 底边距是给「查看详情」按钮留的 → 这里没有按钮，收掉 */
.pol-grid{margin-bottom:20px}
.pol .fy-hd{padding-right:0}
.pol .fy-inc{margin-bottom:0}
/* 「查看详情」按钮（2026-09-27 用户要求，每块图下面一个）：
   `margin-top:auto` 把它推到卡片底部 —— 两块卡片的"包括"文字行数不同时，按钮仍**左右对齐**。 */
.fy-btn{display:flex;align-items:center;justify-content:center;margin-top:auto;height:42px;
  border-radius:10px;border:1px solid rgba(22,104,220,.20);background:var(--brand-l);
  color:var(--brand-d);font-size:14.5px;font-weight:700;letter-spacing:.2px;
  transition:background .18s,color .18s,border-color .18s}
.fy-btn:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* ⚠️ 这里原来有 `.fy-doc-shot`（样本图位：白卡 + `max-width:800px` 卡住横条拼图不放大）。
   2026-09-28 用户把两个样本详情页的缩略图都去掉了（只留「包括」清单 + 内嵌 PDF）→ **成了孤儿 CSS，已删**。
   要恢复就写回这两行（原样，供复制）：
     .fy-doc-shot{background:#fff;border:1px solid var(--line);border-radius:12px;
       box-shadow:var(--shadow);padding:14px;margin-top:18px}
     .fy-doc-shot img{display:block;width:100%;max-width:800px;height:auto;margin:0 auto;
       border-radius:7px;background:#fff}
   （配套结论仍写在技能里：横条拼图限宽 800；竖版 A4 整页反过来要铺满版心。） */

/* 「翻译机构样本」页里内嵌的 PDF 阅读器（2026-09-27 用户要求「保留 PDF 格式」，不做图片转换）。
   ⚠️ 高度**必须写死**：`<object>` 里的文档尺寸不参与父级布局，不给高度会塌成 0。
   ⚠️ `.fy-pdf p` 是**内嵌失败时的兜底内容**（object 打不开才显示），不是冗余 —— 别当孤儿样式删掉。
   ⚠️ iOS Safari / 部分安卓不渲染内嵌 PDF → 模板里那个「在新窗口打开」按钮是必需兜底。 */
.fy-pdf-h{font-size:16px;font-weight:800;color:#101a2b;margin:22px 0 10px}
.fy-pdf{background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:10px}
.fy-pdf object{display:block;width:100%;height:900px;border:0;border-radius:8px;background:#f4f7fb}
.fy-pdf p{margin:0;padding:28px 10px;text-align:center;font-size:14px;color:#5c6b82;line-height:1.9}
.fy-pdf-tip{font-size:12.5px;color:#8a94a6;text-align:center;margin:10px 0 0}
@media(max-width:760px){
  .fy-pdf{padding:6px}
  .fy-pdf object{height:460px}
}
@media(max-width:560px){.fy-doc-shot{padding:8px}}

/* 提示条 */
.notice{background:#fff8e6;border:1px solid #ffe2a8;color:#7a5b12;border-radius:12px;padding:14px 20px;font-size:13.5px;line-height:1.85;margin-bottom:20px}
.notice b{color:#8a5a00}
.empty{text-align:center;padding:60px 20px;color:var(--ink-3)}
.empty b{display:block;font-size:17px;color:#4a5568;margin-bottom:8px}

/* 返回顶部 */
.totop{position:fixed;right:26px;bottom:34px;width:46px;height:46px;border-radius:50%;background:#fff;
  box-shadow:0 8px 24px rgba(23,43,77,.18);display:none;align-items:center;justify-content:center;
  color:#4a5568;z-index:70;font-size:18px}
.totop.on{display:flex}

/* ---------- 响应式 ---------- */
@media(max-width:1180px){
  .sign-grid{grid-template-columns:repeat(3,1fr)}
  .sign-cats{top:62px}      /* 窄屏页头 62px，吸顶要跟着上移 */
  .zx-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .flow-card{flex-direction:column}
  .flow-lead{width:100%}
  .flow-lead::before{display:none}
  .flow-steps{grid-template-columns:repeat(2,1fr)}
  .flow-step+.flow-step::before{display:none}
  .km-big{grid-template-columns:1fr}
  .km-grid{grid-template-columns:repeat(2,1fr)}
  .case-grid{grid-template-columns:repeat(4,1fr)}
  .quiz{flex-direction:column}
  .quiz-side{width:100%}
  .case-detail{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .sign-grid{grid-template-columns:repeat(3,1fr)}
}
/* ===== 页头「转抽屉」断点：760px → 1160px（2026-09-26）=====
   起因：导航从 4 项（国外换国内/科目一/交通标志/联系我们）改成 **6 项 + 1 个 CTA 药丸**，
   其中「翻译认证/公证」这类标签很长。实测页头溢出窗口从 `765~775px`（3 档）
   **暴涨到 `765~1100px`**（765px 时导航文字折成 6 行、整段压到公告栏上）。
   也就是说 7 项中文标签**需要约 1150px 视口才放得下**，所以抽屉必须提前接管。
   取 1160 留一点字体渲染差异的余量（实测 1150 刚好正常、1100 已溢出）。
   边界实测（）：1160 及以下走抽屉、1161 起完整导航即正常；
   但 1161 处只剩约 11px 余量，换个字体渲染就可能破，故取 **1180** 留约 3% 的安全余量。
   ⚠️ **整组一起挪，一个都不能少**：`.nav-toggle` 显示、`.header .wrap` 高度、
   `.nav` 转抽屉、`.nav>li>a` 行高、选中态高亮、药丸退回普通行、`.hd-btn` 隐藏。
   只挪其中一条就会出现"汉堡出来了但点了没反应/抽屉样式没生效"（MEMORY 陷阱 31）。
   ⚠️ 下面这个块**只管页头**。窄屏的正文版式（`.sec` 间距、网格列数、字号等）仍在
   后面的 `@media(max-width:760px)` 里 —— 两者范围不同，别再合并回去。
   ⚠️ 副作用（同时也是好事）：这组断点提前后，`765~1100px` 那一段由抽屉接管，
   顺带**把拖了很久的"页头导航溢出压住公告栏"老 bug 一并盖住了**（MEMORY 陷阱 43）。 */
@media(max-width:1180px){
  .nav-toggle{display:flex}
  .header .wrap{height:62px;gap:12px}
  /* 抽屉改为「贴着 .header 底边」而不是写死视口偏移。
     原写法 position:fixed;top:62px 只在 .header 正好贴在视口顶部时才成立；
     顶部一旦多出公告栏 / 顶栏之类的内容，在页面顶部展开菜单时抽屉的前几十像素
     会被 .header 压住（.header 的 z-index:60 高于抽屉的 59），首个菜单项直接看不见。
     .header 是 position:sticky（已建立定位上下文），所以 top:100% 永远等于 header 底边，
     滚不滚动都对，也不再需要 JS 去量高度。 */
  .nav{position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;
    gap:0;box-shadow:0 12px 26px rgba(23,43,77,.14);display:none;z-index:59;padding:6px 0 10px}
  .nav.open{display:flex}
  .nav>li>a{height:50px;line-height:50px;padding:0 24px}
  .nav>li>a.on::after{display:none}
  .nav>li>a.on{background:var(--brand-l)}
  /* 抽屉里的「联系我们」退回普通行。抽屉是**整行平的列表**（所有项统一 50px 高、
     占满一行宽度），塞一个药丸进去既不与相邻行对齐，语义上也和"列出可去的地方"不符。
     ⚠️ 必须显式补回选中态高亮：`background:transparent` 与 `.nav>li>a.on` 同权重，
       同块内靠顺序决定胜负，不补最后那条 `.nav>li>a.nav-pill.on` 的话，
       当前页在抽屉里就没有高亮底色了（且这条权重更高，不受顺序影响）。 */
  .nav>li>a.nav-pill{height:50px;line-height:50px;padding:0 24px;border-radius:0;
    background:transparent;box-shadow:none;font-size:15.5px;color:#2a3548;transform:none}
  .nav>li>a.nav-pill:hover{color:var(--brand);transform:none}
  .nav>li>a.nav-pill.on{background:var(--brand-l)}
  .hd-btn{display:none}
  /* 移动端两个入口按钮：整组用 `margin-left:auto` 推到最右，
     ☰ 在它左边紧挨着 → 可见顺序 logo → ☰ → 联系我们 → 开始刷题（与参考站一致）。 */
  .mob-cta{display:flex;align-items:center;gap:8px;margin-left:auto}
}
/* 窄屏再收一档：390 下「logo + ☰ + 两个按钮」本来就挤，
   不收会在 360 附近横向溢出（用 `_ovf_probe` 量过）。 */
@media(max-width:430px){
  .header .wrap{gap:8px}
  .logo img{width:104px;height:auto}
  .nav-toggle{width:34px;height:34px;font-size:20px}
  .mob-cta{gap:6px}
  .mob-btn{height:32px;padding:0 12px;font-size:13px}
}
/* 320 这一档还得再收：`_ovf_probe` 实测 320 下横溢 13px
   （logo + ☰ + 两个 4 字按钮，在 320 里排不下）。 */
@media(max-width:340px){
  .logo img{width:92px}
  .nav-toggle{width:30px;height:30px;font-size:18px}
  .mob-btn{height:30px;padding:0 9px;font-size:12px}
}

@media(max-width:760px){
  .sec{padding:36px 0}
  /* 首页节奏旋钮的窄屏值：内页 36px 保持不动，首页同样按"减半"给 18px */
  :root{--home-sec:18px}
  .sec-head h2{font-size:23px}
  .case-grid{grid-template-columns:repeat(3,1fr);gap:20px 12px}
  /* 原 `.case-head .t` 的窄屏收紧规则（15px / 14px 20px）随该模块于 2026-09-27 删除，
     留档见 _probe/_removed_home_case_module.css */
  .case-tabs{gap:18px}
  .case-tabs .t{font-size:15px;padding:14px 2px}
  .case-panel{padding:20px 16px 4px}
  .case-item .seal{width:60px;height:60px}
  .case-item b{font-size:13.5px}
  .zx-list,.zj-list{grid-template-columns:1fr}
  .doc{padding:22px 18px}
  .sign-grid{grid-template-columns:repeat(2,1fr)}
  .qnums{grid-template-columns:repeat(8,1fr);max-height:220px}
  .quiz-main{padding:18px 16px}
  .q-title .tt{font-size:16px}
  /* （原顶栏的窄屏收敛规则随 .topbar 一并删除） */
  /* 公告栏：窄屏收紧字号/图标/内边距，让整句仍是一行。
     注意**右内边距必须保住**（给绝对定位的 × 让位）——参考实现 haizu.cn 在窄屏
     写成 `padding:7px 12px`，把右内边距压到 12px，文案一长就会钻到 × 底下。 */
  .announce{padding:10px 0 0}
  .announce-inner{font-size:12.5px;gap:8px;padding:8px 40px 8px 16px}
  .announce-ico{width:20px;height:20px}
  .announce-ico svg{width:13px;height:13px}
}

/* ≤430px 窄屏手机：两列网格的卡片内宽放不下 4 个汉字的标题，
   「专项练习 / 章节练习」会被断成「专项练 / 习」两行，两行卡片高度也不齐。
   收紧内边距 / 图标 / 间距，腾出横向空间让标题单行放下，并让各行等高。
   注意：这里**不能**加 `#km` 前缀 —— `index.html` 与 `kemuyi/index.html` 都用 .km-grid，
   后者没有 id="km"，加了前缀就漏掉它（两页的卡片宽度一样，都会断行）。 */
@media(max-width:430px){
  .km-body{padding:16px}
  .km-grid{gap:10px;margin-top:12px;grid-auto-rows:1fr}
  .km-grid a{padding:13px 11px;gap:9px}
  .km-grid a .gi{width:36px;height:36px;border-radius:10px}
  .km-grid a .gi svg{width:21px;height:21px}
  .km-grid a b{font-size:14.5px;letter-spacing:-.3px}
  .km-grid a i{font-size:11px;line-height:1.35;margin-top:1px}
  .km-tip{padding:13px 15px;font-size:12.5px}
  /* 公告栏：≤430px 再收一档（15 个汉字 + 图标 + × 在 320px 上必须单行，
     只能靠字号腾空间）。 */
  /* 公告栏：文案 2026-09-25 加长到 20 个汉字后，12px 在 390px 下**放不下**
     （实测可用 255px / 需要 272px，差 17px）→ 收到 11px 换回单行，
     11px 下需要 ≈249px ≤ 可用 255px ✓。再窄（≤360）见下一个块。
     ⚠️ 同一块里**只能有这一条** `.announce-inner` —— 之前我在块首另加了一条 11px，
     被这条更靠后的 12px 覆盖掉，白忙一轮（字号改了却没生效，量出来还是 12px）。 */
  .announce-inner{font-size:11px;gap:7px;padding:7px 38px 7px 14px}
  .announce-ico{width:19px;height:19px}
  .announce-ico svg{width:12px;height:12px}
  .announce-x{right:10px;font-size:17px}
}
/* ≤360px（老款小屏 / 窄 webview）：字号再收一档到 10.5px（见块内注释），
   320/340px 单行在数学上已放不下（需 8.9~9.8px，偏小不值得），
   改用 `.announce-text` 的 `text-wrap:balance` 让两行长度接近，避免孤儿行。
   ⚠️ 本块的字号必须**小于等于**上一块（≤430 的 11px），否则会出现"屏幕更窄、字反而更大"的倒挂。 */
@media(max-width:360px){
  /* 再来一档字号：360px 视口里可用 242px、需要 249px，只差 7px（2.8%），
     缩到 10.5px 就回到了单行。320/340 仍放不下（那需要 8.9~9.8px，太小，不做），
     交给 `text-wrap:balance` 做两行均衡。 */
  .announce-inner{font-size:10.5px;gap:6px;padding:7px 36px 7px 13px}
  .announce-ico{width:18px;height:18px}
  .announce-ico svg{width:11px;height:11px}
  .announce-x{right:9px}
}
/* ≤340px（老款小屏 / 窄 webview）：上一条腾出的空间仍差几点，再收一档 */
@media(max-width:340px){
  .km-grid{gap:8px}
  .km-grid a{padding:11px 9px;gap:8px}
  .km-grid a .gi{width:30px;height:30px;border-radius:9px}
  .km-grid a .gi svg{width:18px;height:18px}
  .km-grid a b{font-size:13px}
  .km-grid a i{font-size:10.5px}
}

/* ---------- 子导航 ---------- */
.subnav{background:#fff;border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:4px;flex-wrap:wrap}
.subnav a{padding:15px 22px;font-size:15px;font-weight:600;color:#4a5568;position:relative}
.subnav a:hover{color:var(--brand)}
.subnav a.on{color:var(--brand)}
.subnav a.on::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}
@media(max-width:760px){.subnav a{padding:12px 14px;font-size:14px}}

/* ---------- 信息卡网格 ---------- */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.info-card .n{width:38px;height:38px;border-radius:11px;background:var(--brand-l);color:var(--brand);
  font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.info-card h4{font-size:17px;font-weight:800;color:#101a2b;margin-bottom:8px}
.info-card p{font-size:14px;color:#5c6b82;line-height:1.9}
.info-card ul{margin-top:10px}
.info-card li{font-size:14px;color:#5c6b82;line-height:1.95;padding-left:16px;position:relative}
.info-card li::before{content:"";position:absolute;left:2px;top:12px;width:5px;height:5px;border-radius:50%;background:#b9c6da}
@media(max-width:980px){.info-grid{grid-template-columns:1fr}}

/* ---------- 新闻列表 ---------- */
.news-list{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.news-it{display:flex;gap:20px;padding:22px 26px;border-bottom:1px solid var(--line);transition:.16s}
.news-it:last-child{border-bottom:0}
.news-it:hover{background:#fafcff}
.news-it .dt{flex:none;width:74px;text-align:center;padding-top:2px}
.news-it .dt b{display:block;font-size:22px;font-weight:800;color:var(--brand);line-height:1.2}
.news-it .dt span{font-size:12px;color:var(--ink-3)}
.news-it .ct{flex:1;min-width:0}
.news-it .ct h4{font-size:16.5px;font-weight:700;color:#152539;margin-bottom:6px}
.news-it .ct p{font-size:14px;color:#6b7b91;line-height:1.85}
.news-it .ct .src{margin-top:8px;font-size:12.5px;color:var(--ink-3)}
.news-it .ct .src em{font-style:normal;margin-left:12px;background:#f2f5fa;color:#63748c;padding:2px 9px;border-radius:5px}
@media(max-width:760px){.news-it{padding:18px 16px;gap:14px}.news-it .dt{width:56px}.news-it .dt b{font-size:18px}}

/* ---------- 热线表 ---------- */
.hotline{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 28px}
.hotline .top{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.hotline .tel{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#eaf3ff,#f6faff);
  border:1px solid #dbe9fb;border-radius:12px;padding:16px 22px;flex:1 1 240px}
.hotline .tel .ic{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#3d97ff,#1668dc);
  display:flex;align-items:center;justify-content:center;flex:none}
.hotline .tel b{display:block;font-size:24px;font-weight:800;color:#0f2c56;letter-spacing:.5px;line-height:1.2}
.hotline .tel span{font-size:12.5px;color:#5c7391}
.prov-search{display:flex;gap:10px;margin-bottom:16px}
.prov-search input{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;font-size:14.5px;outline:none}
.prov-search input:focus{border-color:var(--brand)}
.prov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.prov{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:10px;padding:13px 15px;font-size:14.5px;color:#25324a;transition:.16s}
.prov:hover{border-color:#bfd9f7;background:#f8fbff}
.prov b{font-weight:600}
.prov span{font-size:12px;color:var(--brand);font-weight:600}
@media(max-width:980px){.prov-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.prov-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- 国旗样式（案例模块） ---------- */
.case-item .seal.flag{width:84px;height:58px;border-radius:8px;border:1px solid #e6ecf4;
  box-shadow:0 1px 3px rgba(23,43,77,.06);margin-bottom:20px}
.case-item .seal.flag img{width:100%;height:100%;object-fit:contain;padding:4px}
@media(max-width:760px){.case-item .seal.flag{width:64px;height:44px}}