/* ChinaVisa.ai — 视觉系统 v5
   ═══════════════════════════════════════════════════════════════
   布局：wise.com —— 有色块/白卡的输入即焦点
   配色：tailscale.com —— 暖灰基底（色值全部取自其 CSS token，非估算）
   品牌：我们自己的红 V / 蓝按钮

   三层底色（这是 Tailscale 的骨架，也是它不刺眼的原因）：
     ① 导航条  #FFFFFF   纯白（比页面更白，形成一条清晰的顶栏）
     ② 页面底  #F9F7F6   暖白（带一点黄，不是纯白）
     ③ 卡片    #FFFFFF   纯白（浮在暖白上 = 反白）
     ④ 页脚    #1F1E1E   近黑（收尾压住整页）

   对比度实测（WCAG AA 需正文 ≥4.5:1）：
     正文 #2E2D2D on #F9F7F6 = 12.86:1  ✅
     次文 #706E6D on #F9F7F6 =  4.75:1  ✅
     正文 #2E2D2D on #FFFFFF = 13.73:1  ✅
     品牌红 #C8102E on #FFFFFF = 5.88:1 ✅（实测值；#C8102E = logo 像素色）
     品牌蓝 #1678FF on #FFFFFF =  4.07:1 ⚠️ 只用于按钮大字/图形，不用于正文
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ══════════════════════════════════════════════════════════
     六栏配色 · 唯一改色入口
     改一栏 = 改这里一行，其他栏完全不受影响
     ══════════════════════════════════════════════════════════ */
  --c1-nav:     #FFFFFF;   /* 第 1 栏 · 导航条 */
  --c2-hero:    #F9F7F6;   /* 第 2 栏 · 首屏（问） */
  --c3-result:  #FFFFFF;   /* 第 3 栏 · 结果（答） */
  --c4-content: #F9F7F6;   /* 第 4 栏 · 内容区（预留） */
  --c5-cta:     #F1F1EE;   /* 第 5 栏 · 转化区（预留） */
  --c6-foot:    #FFFFFF;   /* 第 6 栏 · 页脚（白，与导航条同色） */

  /* ── 宽度：两层（外层放布局，内层放长文本） ── */
  --w-shell:    1200px;   /* 卡片/两栏/页脚：铺开 */
  --w-prose:     680px;   /* 长段落：保持易读 */

  /* ── 底色（Tailscale neutral 系） ── */
  --bg-page:     #F9F7F6;   /* ② 页面底：暖白（不动） */
  --bg-card:     #FFFFFF;   /* ③ 卡片：纯白（反白） */
  --bg-soft:     #F7F5F4;   /*    次级浅块 */
  --bg-info:     #F0F5FF;   /*    极浅蓝块（信息提示） */

  /* ── 线条 ── */
  --line:        #EEEBEA;   /* 分隔线 */
  --line-mid:    #DAD6D5;   /* 边框 */
  --line-strong: #AFACAB;   /* 强调分隔 */

  /* ── 文字 ── */
  --ink:         #2E2D2D;   /* 正文 */
  --ink-head:    #232222;   /* 标题 / 品牌名 */
  --ink-2:       #706E6D;   /* 次级 */
  --ink-3:       #AFACAB;   /* 弱化 / 占位符 */
  --ink-inv:     #F9F7F6;   /* 深底上的文字 */

  /* ── 品牌与语义 ── */
  --brand:       #1678FF;   /* 主蓝：只用于主按钮、链接、focus */
  --brand-deep:  #0B4FBF;   /* 深蓝：hover / 硬链接 */
  /* ↑ 2026-10-25 定稿：本套色号唯一权威。改之前先改 技术体系/品牌体系.md。
     红必须 = logo 像素实测 #C8102E（logo-assets/ChinaVisa-Logo.png 取色：
     14290 个红色像素全部 rgb(200,16,46)）。旧值 #C0102E / #B22D30 是笔误。 */
  --brand-red:   #C8102E;   /* 品牌红 = logo 实测色，只用于 V 字 */
  --sem-green:   #2DA44E;   /* 通过：可以走（免签 / 互免 / 240h 过境） */
  --sem-red:     #C8102E;   /* 警示：要办签证（与品牌红同色，按语境区分） */
  --sem-orange:  #B8860B;   /* 不明琥珀：我们不敢定 / 口岸选错 */
  --sem-gray:    #706E6D;   /* 输入错误：你填错了 */
  /* 文字档（text-safe）：品牌色本身对比度不足 4.5:1 时，文字用加深版，
     图形/边框/底色仍用上面的品牌色。这是 WCAG AA 的硬要求，不是审美选择。
       #2DA44E on #FFF = 3.22:1 ❌  → 文字用 #23803C = 4.97:1 ✅
       #B8860B on #FFF = 3.25:1 ❌  → 文字用 #8A6508 = 5.32:1 ✅ */
  --sem-green-text:  #23803C;
  --sem-orange-text: #8A6508;
  --sem-green-bg:#EFF6F1;
  --sem-red-bg:  #FDF3F2;
  --sem-orange-bg:#FDF6EE;

  /* ── 形状 ── */
  --radius:      14px;
  --radius-sm:   9px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(35, 34, 34, .05), 0 8px 24px rgba(35, 34, 34, .06);
  --shadow-lift: 0 2px 4px rgba(35, 34, 34, .06), 0 16px 40px rgba(35, 34, 34, .09);

  /* ── 字体 ── */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  /* 全站浅色：统一在根元素声明，避免给单个 <select> 声明时
     触发系统控件绘制（那会带来灰底）。2026-10-24 */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.small { font-size: 0.8rem; color: var(--ink-2); }

a { color: var(--brand-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ═══════════ 六栏骨架 · 每栏独立容器，互不干扰 ═══════════
   结构：<section id="band-N-xxx" class="band"><div class="band-inner">…</div></section>
   底色只由 --cN 决定；内容宽度统一由 .band-inner 限定。
   性能：纯 CSS 变量，无 JS 参与取色，无额外请求。 */
.band { width: 100%; }
.band > .band-inner,
.band .band-inner {
  max-width: var(--w-shell);        /* 1200px */
  margin: 0 auto;
  padding: 0 1.5rem;
}
/* 长段落单独收窄，保证一行 60-70 字符的舒适区 */
.prose { max-width: var(--w-prose); }

#band-1-nav     { background: var(--c1-nav);     }
#band-2-hero    { background: var(--c2-hero);    }
#band-3-result  { background: var(--c3-result);  }
#band-4-content { background: var(--c4-content); }
#band-5-cta     { background: var(--c5-cta);     }
#band-6-foot    { background: var(--c6-foot);    }

/* ═══════════ ① 顶部条：纯白（比页面更白，形成清晰顶栏） ═══════════ */
.site-head {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.head-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  text-decoration: none;
  color: var(--ink-head);
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-logo { height: 32px; width: auto; display: block; }
.brand-name {
  font-family: var(--sans);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-head);          /* 其余全黑 */
  white-space: nowrap;
}
.brand-v { color: var(--brand-red); }  /* 只有 V 是红 */

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.85rem;
  flex-wrap: wrap;
}
.nav-link {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 1.5px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav-link:hover {
  color: var(--ink-head);
  border-bottom-color: var(--ink-head);
  text-decoration: none;
}

/* ═══════════ ② 第 2 栏：首屏（底色由 --c2-hero 决定） ═══════════ */
/* hero 段的外层上下留白。
   原来 3.4rem(54.4px) + inner 72px = 126px 顶部空白，标题离导航太远。
   现在 1.2rem(19.2px) + inner 22px ≈ 41px，视觉上"贴着导航但不挤"。 */
#band-2-hero { padding: 1.2rem 0 2.6rem; }
/* hero 上下留白：
   参考站标题上方留 105px、下方到卡片留 60px+，整段约 250px 高。
   我们原来几乎没有上下留白，两行字紧贴卡片，显得"矮、没气势"。
   留白是气势的来源——不是把字号加大。 */
#band-2-hero .band-inner {
  padding: 22px 1.5rem 40px;
}
@media (max-width: 640px) {
  #band-2-hero .band-inner { padding: 40px 1.25rem 36px; }
}

.hero-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

/* 眉标（eyebrow）：参考站标题上方有一行 14px/600 的小字，
   作用是给大标题一个"上下文"，视觉上把 hero 撑成三段而不是两行。 */
.hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 18px;
}

#band-2-hero h1 {
  font-family: var(--sans);
  font-weight: 500;              /* Tailscale .text-display-sm = 500 */
  font-size: 2.5rem;             /* 手机 40px */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-head);
  margin: 0 0 0.85rem;
}
@media (min-width: 641px) { #band-2-hero h1 { font-size: 3.5rem; } }   /* 平板 56px */
@media (min-width: 921px) { #band-2-hero h1 { font-size: 4rem; } }     /* 桌面 64px */

.hero-sub {
  font-size: 1.25rem;                      /* 20px，Tailscale .text-title-sm */
  color: var(--ink-2);
  margin: 0 auto 2.6rem;
  max-width: 100%;                         /* 不人为限宽：让它在宽屏一行排完 */
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-wrap: balance;                      /* 真要换行时两行均分，不留孤字 */
}

/* ── 卡片：全页唯一焦点（Wise 的核心手法） ── */
/* 卡片规格对齐 visa-free-china.com（实测值）：
   12px 圆角 / 1px 中性边 / 单层极轻阴影 / 统一 24px 内边距。
   旧值 14px 圆角 + 双层阴影 + 25.6/21.6 的零碎内边距，
   在窄栏里会显得"肿"，且和输入框的圆角不成比例。 */
.card {
  background: var(--bg-card);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(23,23,23,.06);
  border: 1px solid #E7E5E4;
  /* 输入卡左条 = 品牌蓝（2026-10-25 定稿）。语义是「身份色」：
     这是你要填的东西，同时传递"我们给你的数据是准的"。
     结果卡一律不用蓝（绿/红/橙/灰），两块并排靠颜色一眼分开。 */
  border-left: 4px solid var(--brand);
  padding: 24px;
  text-align: left;
}

/* 输入卡内的控件要用白色，才能从浅灰卡里浮出来 */
.card select, .card input { background-color: #FFFFFF; }  /* 用 background-color，别用简写——简写会清掉下拉箭头 */

.f-row { margin-bottom: 1rem; }
.f-row:last-of-type { margin-bottom: 0.5rem; }

/* 表单网格 —— 单列，这是本轮最重要的修复。
   旧版是「宽屏 3 列」，那是给 1200px 满宽表单设计的；
   现在表单搬进 400px 左栏后，3 列 → 每列 148px，
   输入框被压成 48px（只够显示一个字符），看起来像缩进变形。
   结论：窄栏里就必须单列。控件宽度来自容器，不靠网格去分。 */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.form-grid .f-row { margin-bottom: 0; }

/* 标签：14px / 500 / sentence case（参考站实测值）。
   旧版是小号大写 + 字间距，在窄栏里显得挤、且不像表单像表头。 */
label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #44403C;
  margin-bottom: 6px;
}



/* 输入框规格对齐 visa-free-china.com（实测值）：
   44px 高 / 6px 圆角 / 1px #E5E5E5 边 / 无内阴影 / 14px 字。
   旧版 46px + 10px 圆角 + 1.5px 边框 + inset 阴影，
   在 24px 内边距的卡片里圆角比例失调，看起来"胖"。
   注意：内阴影去掉是刻意的——它让控件"陷进去"，
   而参考站用的是"平贴在卡片上"，后者更清爽。 */
input {
  font: inherit;
  font-size: 14px;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: none;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input:hover { border-color: #D6D3D1; }

/* 原生 <select> 的全部样式已移除（2026-10-25）。
 * 页面上不再有 <select>——全部换成 .dd（button + listbox）。
 * 之前那些 select{} / option{} / .select-wrap{} 规则是死代码，
 * 留着只会让人误以为还有原生下拉要调。 */

/* 焦点：蓝描边 + 3px 淡蓝光圈。光圈是让控件"亮起来"的关键 */
input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(22, 120, 255, .14);
}


/* 高级选项：收起，避免首屏变问卷 */
.more {
  margin: 0.95rem 0 0.15rem;
  border-top: 1px solid var(--line);
  padding-top: 0.85rem;
}
.more summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
  list-style: none;
  padding: 0.12rem 0;
  transition: color .15s;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+ "; font-weight: 700; color: var(--ink-3); }
.more[open] summary::before { content: "− "; }
.more summary:hover { color: var(--ink-head); }
.more > .f-row { margin-top: 0.85rem; }

/* 主按钮：品牌蓝只在这里最亮 */
/* 主按钮：占满整行宽度，和上面的输入框左右边缘对齐。
   旧版是 min-width 240px 的胶囊，孤零零挂在 410px 输入框下方，
   视觉上像"没对齐"——这是卡片显乱的来源之一。 */
#route-check-btn {
  margin-top: 18px;
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 8px;
  height: 46px;
  padding: 0 20px;
  cursor: pointer;
  transition: background .15s, transform .06s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(22, 120, 255, .25);
}
#route-check-btn:hover {
  background: #0A66E8;
  box-shadow: 0 4px 14px rgba(22, 120, 255, .32);
}
#route-check-btn:active { transform: translateY(1px); box-shadow: none; }

/* 隐私行：品牌的物理证明，不放页脚 */
.privacy-line {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin: 0.8rem 0 0;
  text-align: center;
  line-height: 1.5;
}
.privacy-line strong { color: var(--ink-head); }

.verify-line {
  font-size: 0.83rem;
  color: var(--ink-2);
  margin: 1.3rem 0 0;
  text-align: center;
}
.verify-line .sep { margin: 0 0.4rem; color: var(--ink-3); }

/* ═══════════ ③ 结果区（方案 2：白卡 + 左侧强调条） ═══════════
   结构：#band-3-result（底色 --c3-result）> .band-inner > .result-card（白卡 + 结论色左条）
   为什么要有画布：让"这是结果区"先于内容被看见，同时首屏与结果区之间有分界。
   ═══════════════════════════════════════════════════════════════ */
/* main 已无实质内容（结果区已移出为独立栏），保留以免将来误用 */
main { max-width: 800px; margin: 0 auto; padding: 0 1.25rem 2.5rem; }

/* ═══════════ ③ 第 3 栏：结果区（底色由 --c3-result 决定） ═══════════ */
#band-3-result { padding: 1.5rem 0 2.5rem; }
#band-3-result .band-inner { max-width: 800px; }
@media (max-width: 640px) { #band-3-result { padding: 1rem 0 2rem; } }

.result-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);  /* 默认蓝；具体颜色由下面 data-tier 覆盖 */
  border-radius: var(--radius-sm);
  padding: 1.35rem 1.5rem 1.2rem;
  box-shadow: var(--shadow-lift);
}
@media (max-width: 640px) { .result-card { padding: 1.1rem 1.1rem 1rem; } }

/* 左条跟结论走：一眼知道吉凶，比读字快 */
.result-card[data-tier="free"]    { border-left-color: var(--sem-green);  }
.result-card[data-tier="transit"] { border-left-color: var(--sem-green);  }
.result-card[data-tier="visa"]    { border-left-color: var(--sem-red);    }
.result-card[data-tier="unclear"] { border-left-color: var(--sem-orange); }
.result-card[data-tier="err"]     { border-left-color: var(--sem-gray);   }
#band-3-result:not([hidden]) { animation: rise .22s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* 结果卡：自身是白卡，与其他区块分家 */
#band-3-result > * { }

.badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 700; font-size: 0.88rem;
  letter-spacing: 0.035em;
  padding: 0.4rem 0.9rem; border-radius: var(--radius-pill);
  border: 1.5px solid;
}
.badge.free   { color: var(--sem-green-text);  border-color: var(--sem-green);  background: var(--sem-green-bg); }
/* transit 与 free 同色（2026-10-25 定稿）：240h 过境也是「可以走」，
   具体差异由标签文字和图标表达（✈️ 240-HOUR TRANSIT vs ✅ NO VISA NEEDED）。 */
.badge.transit{ color: var(--sem-green-text); border-color: var(--sem-green); background: var(--sem-green-bg); }
.badge.visa   { color: var(--sem-red);    border-color: var(--sem-red);    background: var(--sem-red-bg); }
.badge.unclear{ color: var(--sem-orange-text); border-color: var(--sem-orange); background: var(--sem-orange-bg); }
.badge.err    { color: var(--sem-gray);   border-color: var(--line-mid);   background: var(--bg-soft); }

.result-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; margin-bottom: 0.3rem; }
.headline {
  font-size: 1.32rem;
  font-weight: 650;
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: var(--ink-head);
  margin: 0.45rem 0 0.65rem;
}

.risk { font-size: 0.95rem; color: var(--ink); }

h3.sec {
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 700;
  margin: 1.9rem 0 0.65rem;
  padding-bottom: 0.38rem;
  border-bottom: 1px solid var(--line);
}

ul.plain { margin: 0.3rem 0; padding-left: 1.15rem; }
ul.plain li { margin: 0.28rem 0; }

/* 原文引用：本站最值钱的东西，给它最稳的排版 */
/* 官方原文引用：统一分块规则下唯一保留的"例外"形态。
   去掉底色和右侧圆角，只留 2px 左竖线——
   引用带左竖线是通用视觉语义，读者一眼认得，去掉反而降低可读性。
   保留衬线字体：原文需要和其它解释性文字区分开。 */
blockquote.official {
  margin: 12px 0;
  padding: 0 0 0 14px;
  background: none;
  border-left: 2px solid #D6D3D1;
  border-radius: 0;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.65;
  color: #44403C;
}
blockquote.official:first-of-type { margin-top: 0; }
blockquote.official:last-of-type { margin-bottom: 0; }
blockquote.official .src {
  display: block; margin-top: 0.55rem;
  font-family: var(--mono);
  font-size: 0.71rem; color: var(--ink-2);
  word-break: break-all;
  line-height: 1.5;
}
blockquote.official .src a { color: var(--ink-2); text-decoration: underline; }

/* 边界区块 */
.boundary { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 0.55rem; }
@media (max-width: 640px) { .boundary { grid-template-columns: 1fr; } }
.boundary .cell {
  border: 1.5px solid var(--line-mid);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.95rem;
  background: var(--bg-card);
}
.boundary .cell h4 { margin: 0 0 0.4rem; font-size: 0.82rem; letter-spacing: 0.02em; }
.boundary .yes h4 { color: var(--sem-green-text); }
.boundary .no  h4 { color: var(--sem-red); }
.boundary ul { margin: 0; padding-left: 1.05rem; font-size: 0.87rem; }

.warnings li { color: var(--sem-orange-text); }

/* 城市范围 */
.cities { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.city-chip {
  border: 1.5px solid var(--line-mid); border-radius: var(--radius-pill);
  padding: 0.15rem 0.72rem; font-size: 0.83rem; background: var(--bg-card);
}
.city-chip.unmapped { border-color: var(--sem-orange); color: var(--sem-orange-text); background: var(--sem-orange-bg); }

/* 动作区 */
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.9rem; align-items: center; }
.btn {
  font: inherit; font-weight: 600; font-size: 0.93rem;
  border-radius: var(--radius-sm); cursor: pointer;
  padding: 0.62rem 1.3rem; border: 1.5px solid;
  transition: all .15s;
}
.btn-export { color: var(--ink-head); border-color: var(--line-mid); background: var(--bg-card); }
.btn-export:hover { border-color: var(--ink-head); background: var(--bg-soft); }
.btn-save { color: #fff; border-color: var(--sem-green); background: var(--sem-green); }
.btn-save:hover { background: #176B48; border-color: #176B48; }
.btn-paid { color: var(--sem-orange); border-color: var(--sem-orange); background: var(--bg-card); cursor: default; }

.save-row { display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center; margin-top: 0.75rem; }
.save-row input { min-width: 240px; width: auto; flex: 1 1 240px; }
.saved-id { font-family: var(--mono); font-size: 0.88rem; color: var(--sem-green-text); }

/* ═══════════ ④ 页脚：近黑收尾（Tailscale 的压页手法） ═══════════ */
/* ═══════════ 第 6 栏：页脚（白色，布局参考 tailscale.com） ═══════════
   上：左 logo / 右快捷链接
   下：左版权 —— 细横线 —— 右免责声明
   白底页脚必须有一条上边框，否则"页面结束"读不出来。 */
.site-foot {
  color: var(--ink-2);
  border-top: 1px solid var(--line-mid);
  margin-top: 0;
  padding: 2.6rem 0 2rem;
  font-size: 0.84rem;
}
.foot-inner { padding: 0 1.5rem; }

.foot-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.foot-brand { display: inline-flex; align-items: center; }
.foot-brand .brand-logo { height: 32px; width: auto; }

.foot-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.foot-link { color: var(--ink-2); font-weight: 500; }
.foot-link:hover { color: var(--ink-head); text-decoration: none; }

.foot-bottom {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
  color: var(--ink-3);
  font-size: 0.78rem;
}
.foot-copy { white-space: nowrap; }
.foot-rule { flex: 1 1 auto; height: 1px; background: var(--line-mid); }
.foot-legal { flex: 0 1 auto; text-align: right; }

@media (max-width: 640px) {
  .site-foot { padding: 2rem 0 1.6rem; }
  .foot-top { gap: 1.2rem; }
  .foot-nav { gap: 1rem; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .foot-rule { display: none; }
  .foot-legal { text-align: left; }
}
.foot-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.25rem 2.4rem;
}
.site-foot p { margin: 0.3rem 0; }
.brand-foot {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-inv);
  letter-spacing: -0.01em;
}
.site-foot .small { color: #A8A5A4; }

/* ═══════════ 打印 / Export for Check-in ═══════════ */
@media print {
  .site-head, #band-2-hero, .site-foot, .actions, .verify-line, .more { display: none !important; }
  main { max-width: none; padding: 0; }
  #band-3-result { margin-top: 0; }
  body { background: #fff; font-size: 11pt; }
  /* 打印时去掉画布灰底、圆角、阴影，只留文字与引用（用户在机场拿着纸） */
  #band-3-result { background: #fff; padding: 0; }
  .result-card { border: 0; box-shadow: none; padding: 0; border-left: 0; }
  blockquote.official { border-left-color: #000; }
}

/* ── 北京时间锚点 ────────────────────────────────────────────────
   目的：让用户第一眼就知道我们按哪一天算，避免"我以为今天是 X"的边界争议。
   样式克制：一行小字，不抢表单焦点。 */
.cn-clock {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--ink-soft, #706E6D);
  margin: 0 0 1.1rem; line-height: 1.4;
}
.cn-clock strong { font-weight: 600; color: var(--ink-body, #2E2D2D); font-variant-numeric: tabular-nums; }
.cn-clock-tz { color: var(--ink-faint, #96918E); }
.cn-clock-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brand, #1678FF);
  box-shadow: 0 0 0 3px rgba(22,120,255,.14);
}
@media (max-width: 640px) {
  .cn-clock { flex-wrap: wrap; font-size: 0.75rem; }
  .cn-clock-tz { display: block; width: 100%; padding-left: 14px; }
}

/* ── 最晚离境日面板 ──────────────────────────────────────────────
   用途：把"240 小时"翻译成能直接对照登机牌的日期。
   这是 We never guess 的落地：不给模糊的"10 天"，给具体到 23:59 的截止点。 */
.exit-panel {
  margin: 1.1rem 0 1.4rem; padding: 0.95rem 1.1rem;
  background: #FCFBFA; border: 1px solid var(--line-mid, #E8E5E3);
  border-radius: 10px;
}
.exit-row {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.34rem 0; font-size: 0.9rem;
}
.exit-row + .exit-row { border-top: 1px dashed var(--line-mid, #E8E5E3); }
.exit-k { flex: 0 0 9.5rem; color: var(--ink-soft, #706E6D); font-size: 0.82rem; }
.exit-v { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-body, #2E2D2D); }
.exit-v em { font-style: normal; font-weight: 400; color: var(--ink-faint, #96918E); font-size: 0.82rem; }
.exit-row-hard { margin-top: 0.3rem; padding-top: 0.6rem; }
.exit-row-hard .exit-k { color: #2E2D2D; font-weight: 600; }
.exit-row-hard .exit-v { color: var(--brand, #1678FF); }
@media (max-width: 640px) {
  .exit-k { flex-basis: 100%; }
  .exit-row { flex-wrap: wrap; gap: 0.2rem; }
}

/* ── 口岸可搜索组合框 ────────────────────────────────────────────
   官方口岸名最长 78 字符（西九龙那条），下拉框里根本认不出来。
   改成输入框 + 别名匹配：用户打「西九龙」「高铁」「PVG」「Shekou」都能命中。 */
.combo { position: relative; }
/* 口岸输入框必须和全局 input 完全一致（44px / 6px / #E5E5E5），
   否则同一张卡片里两种圆角和高度，一眼看出没对齐。 */
.combo input[type="text"] {
  width: 100%; height: 44px; padding: 0 12px; font-size: 14px;
  border: 1px solid #E5E5E5; border-radius: 6px;
  background: #fff; color: var(--ink-body, #2E2D2D);
  transition: border-color .15s, box-shadow .15s;
}
.combo input[type="text"]:hover { border-color: #D6D3D1; }
.combo input[type="text"]:focus {
  outline: none; border-color: var(--brand, #1678FF);
  box-shadow: 0 0 0 3px rgba(22,120,255,.14);
}
.combo-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 300px; overflow-y: auto; margin: 0; padding: 4px;
  list-style: none; background: #fff;
  border: 1px solid var(--line-mid, #E8E5E3); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.11);
}
.combo-list li {
  padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.55rem;
  align-items: baseline; font-size: 0.86rem;
}
.combo-list li:hover, .combo-list li.active { background: #F2F7FF; }
.combo-short { font-weight: 600; color: var(--ink-body, #2E2D2D); white-space: nowrap; }
.combo-full {
  color: var(--ink-faint, #96918E); font-size: 0.78rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combo-prov {
  color: var(--ink-faint, #96918E); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.combo-empty {
  padding: 0.7rem; font-size: 0.82rem; color: var(--ink-soft, #706E6D);
  line-height: 1.45;
}
@media (max-width: 640px) {
  .combo-list li { grid-template-columns: 1fr auto; }
  .combo-full { display: none; }
}

/* ── 结果页口岸行 ────────────────────────────────────────────────
   官方口岸名最长 78 字符，放进标题会把句子撑断。
   这里显示短名，官方全名折叠，需要核对时展开。 */
.port-line {
  margin: -0.5rem 0 1rem; font-size: 0.85rem; color: var(--ink-soft, #706E6D);
}
.port-line strong { color: var(--ink-body, #2E2D2D); }
.port-zh { margin-left: 0.4rem; color: var(--ink-faint, #96918E); }
.port-official { display: inline-block; margin-left: 0.5rem; }
.port-official summary {
  cursor: pointer; font-size: 0.78rem; color: var(--brand, #1678FF);
  list-style: none; display: inline;
}
.port-official summary::-webkit-details-marker { display: none; }
.port-official summary::before { content: "· "; color: var(--ink-faint); }
.port-official code {
  display: block; margin-top: 0.35rem; padding: 0.4rem 0.55rem;
  font-size: 0.74rem; line-height: 1.45; word-break: break-word;
  background: #FCFBFA; border: 1px solid var(--line-mid, #E8E5E3);
  border-radius: 6px; color: var(--ink-body);
}

.port-usage-note {
  margin: -0.6rem 0 1rem; padding: 0.5rem 0.7rem;
  font-size: 0.8rem; line-height: 1.5;
  background: #F2F7FF; border-left: 3px solid var(--brand, #1678FF);
  border-radius: 0 6px 6px 0; color: var(--ink-body, #2E2D2D);
}

/* ══════════════════════════════════════════════════════════════
   左右两栏布局（左=输入卡片 / 右=引导或结果）
   ─────────────────────────────────────────────────────────────
   设计原则：
   1. 左栏永远只有输入，不加任何解释文字 —— 解释统一放右栏。
      这样卡片可以永久保持干净，未来加注释只改右栏一处。
   2. 右栏是"可替换面板"：提交前=填写指引，提交后=结果。
      同位置替换，不跳转、不滚动。
   3. 左栏窄（固定 380px），右栏宽（自适应）—— 输入不需要宽，
      结果需要宽（原文引用、检查清单都要横向空间）。
   ══════════════════════════════════════════════════════════════ */
.split {
  display: grid;
  grid-template-columns: 580px minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
  margin-top: 2rem;
  text-align: left;
}
.split-left { position: sticky; top: 1.5rem; }
.split-right { min-width: 0; }

/* 右栏在结果过期时整体变淡——比重新计算更礼貌：用户看得见旧答案，
   但一眼知道它不是当前的。 */
.split-right.is-stale #right-result { opacity: .45; transition: opacity .18s; }

.recheck-bar {
  margin: .9rem 0 0; padding: .55rem .8rem;
  font-size: .82rem; color: var(--ink-soft, #706E6D);
  background: #FFF8E6; border-left: 3px solid #E8B84B; border-radius: 0 6px 6px 0;
}
.recheck-bar strong { color: var(--ink-body, #2E2D2D); }

/* ── 右栏：填写引导 ──────────────────────────────────────────── */
.right-guide { padding: .2rem 0; }
.guide-title {
  font-size: 1.32rem; line-height: 1.35; margin: 0 0 .5rem;
  font-weight: 650; color: var(--ink-strong, #1A1918); letter-spacing: -.01em;
}
.guide-lead {
  font-size: .92rem; line-height: 1.6; color: var(--ink-soft, #706E6D);
  margin: 0 0 1.5rem;
}
.guide-steps { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.guide-steps li {
  display: grid; grid-template-columns: 26px 1fr; gap: .7rem;
  padding: 0 0 1.05rem; margin-bottom: 1.05rem;
  border-bottom: 1px solid var(--line-soft, #F0EDEB);
}
.guide-steps li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.guide-n {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700;
  color: var(--brand, #1678FF); background: #EEF4FF;
}
.guide-steps strong {
  display: block; font-size: .95rem; margin-bottom: .28rem;
  color: var(--ink-body, #2E2D2D); font-weight: 620;
}
.guide-steps p {
  margin: 0; font-size: .86rem; line-height: 1.62;
  color: var(--ink-soft, #706E6D);
}
.guide-steps em { font-style: normal; color: var(--ink-body, #2E2D2D); font-weight: 550; }

.guide-warn {
  padding: .85rem 1rem; margin-bottom: 1.3rem;
  background: #FFF8E6; border: 1px solid #F2E4BE; border-radius: 9px;
}
.guide-warn > strong {
  display: block; font-size: .84rem; margin-bottom: .5rem;
  color: #7A5B00; letter-spacing: .01em;
}
.guide-warn ul { margin: 0; padding-left: 1.05rem; }
.guide-warn li {
  font-size: .84rem; line-height: 1.6; color: #6B5410; margin-bottom: .4rem;
}
.guide-warn li:last-child { margin-bottom: 0; }
.guide-warn em { font-style: normal; font-weight: 600; }

.guide-example {
  padding: .85rem 1rem; margin-bottom: 1.1rem;
  background: #F7FAF7; border: 1px solid #E2EBE2; border-radius: 9px;
}
.guide-example > strong {
  display: block; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .05em; color: #4A6B4A; margin-bottom: .45rem;
}
.guide-example p { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--ink-body, #2E2D2D); }
.guide-out { display: block; margin-top: .3rem; color: #2E7D32; font-weight: 600; }

.guide-foot {
  font-size: .8rem; line-height: 1.6; color: var(--ink-faint, #96918E); margin: 0;
}

/* ── 窄屏：上下堆叠 ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 1.6rem; }
  .split-left { position: static; }
  .guide-title { font-size: 1.15rem; }
  .right-guide { padding-top: .4rem; }
}

/* ══════════════════════════════════════════════════════════════
   逐条检查清单
   ─────────────────────────────────────────────────────────────
   设计纪律（与 We never guess 直接相关）：
   · pass    = 安静。用户不需要反复看已经过的项。
   · fail    = 最显眼的红。这是用户要立刻知道的事。
   · unknown = **和 fail 一样显眼**的黄。
     很多站把"不确定"做成灰色小字，等于藏起来。
     我们反过来：它必须抢眼，因为它才是用户真正需要去核实的东西。
   ══════════════════════════════════════════════════════════════ */
.ck-tally {
  font-size: .74rem; font-weight: 500; color: var(--ink-faint, #96918E);
  letter-spacing: .01em; margin-left: .5rem;
}
.checklist {
  list-style: none; margin: .2rem 0 1.4rem; padding: 0;
  border: 1px solid var(--line-soft, #EDEAE8); border-radius: 10px;
  overflow: hidden; background: #fff;
}
.checklist li {
  display: grid; grid-template-columns: 24px 1fr auto;
  gap: .65rem; align-items: start;
  padding: .68rem .9rem;
  border-bottom: 1px solid var(--line-soft, #F2EFED);
}
.checklist li:last-child { border-bottom: 0; }

.ck-icon {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; line-height: 1;
  margin-top: .1rem;
}
.ck-body { min-width: 0; }
.ck-label {
  display: block; font-size: .88rem; line-height: 1.45;
  color: var(--ink-body, #2E2D2D); font-weight: 500;
}
.ck-note {
  display: block; margin-top: .22rem;
  font-size: .78rem; line-height: 1.5; color: var(--ink-faint, #96918E);
}
.ck-word {
  font-size: .7rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap; margin-top: .22rem;
}

/* pass —— 安静 */
.ck-pass .ck-icon { background: #E7F4EA; color: #2E7D32; }
.ck-pass .ck-word { color: #4E8C52; }

/* fail —— 最显眼 */
.ck-fail { background: #FFF6F5; }
.ck-fail .ck-icon { background: #FDE3E0; color: var(--sem-red); }
.ck-fail .ck-label { color: #8E2A1F; font-weight: 600; }
.ck-fail .ck-word { color: var(--sem-red); }

/* unknown —— 与 fail 同等显眼，不允许弱化 */
.ck-unknown { background: #FFFBF0; }
.ck-unknown .ck-icon { background: #FCEFC7; color: #8A6A00; }
.ck-unknown .ck-label { color: #6B5410; font-weight: 600; }
.ck-unknown .ck-word { color: #A07D00; }

/* 单列版"无法确认"区（原双栏已拆，确认项移到清单里） */
.boundary.one-col { grid-template-columns: 1fr; }
.boundary.one-col .cell.no { border-left: 3px solid #E8B84B; border-radius: 8px; }

/* ── 右栏引导（精简版）─────────────────────────────────────────
   参考站右侧几乎不放长文；档次感来自留白与短句，不是信息量。
   因此这里只保留一个短列表 + 一个示例，字号也比旧版小一档。 */
.guide-title {
  font-size: 19px; line-height: 1.35; margin: 0 0 16px;
  font-weight: 600; color: #1C1917; letter-spacing: -.01em;
}
.guide-list {
  list-style: none; margin: 0 0 20px; padding: 0;
}
.guide-list li {
  position: relative; padding-left: 20px; margin-bottom: 10px;
  font-size: 14px; line-height: 1.55; color: #57534E;
}
.guide-list li:last-child { margin-bottom: 0; }
.guide-list li::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: #A8A29E;
}
.guide-example {
  padding: 14px 16px; margin-bottom: 16px;
  background: #FAFAF9; border: 1px solid #EDEBE9; border-radius: 8px;
}
.guide-example p {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: #57534E;
}
.guide-out {
  margin-top: 6px !important; color: #2E7D32 !important; font-weight: 600;
}
.guide-foot {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: #A8A29E;
}

/* ══════════════════════════════════════════════════════════════
   表单分组块（fieldset.fgroup）
   ─────────────────────────────────────────────────────────────
   取自 visa-free-china.com 实测结构：
     · 外层浅灰块 : padding 16px · radius 8px · bg rgba(245,245,245,.3)
                    border 1px #E5E7EB
     · 块内输入框 : 白色，浮在灰底上
   立体感的来源是"块套块"（灰块里放白控件），不是靠阴影堆叠。
   分组依据 = 用户脑子里的行程结构：先"你是谁"，再"你怎么走"。
   ══════════════════════════════════════════════════════════════ */
.fgroup {
  border: 1px solid #EDEBE9;
  border-radius: 8px;
  background: #FAFAF9;
  padding: 16px;
  margin: 0 0 14px;
}
.fgroup:last-of-type { margin-bottom: 0; }

/* legend 用 block + 小字号，不用默认的"骑在边框上"样式 */
/* ⚠️ 这处空隙的真正来源是 .fgroup 的 grid row-gap，不是 margin。
   （实测：legend padding-bottom 6px + grid row-gap 14px = 20px 空隙，
     只改 margin/padding 都动不了它。）
   解法：legend 与下一行之间单独用负 margin 吃掉 gap，
   同时给 legend 自身留一点呼吸。 */
.fgroup-title {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0 0 -10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8A8683;
}

/* 组内两列：左栏已加宽到 580px，每字段约 242px，
   足够显示 "Shanghai Pudong" 这类中长标签。
   两列的收益是"卡片变矮、变宽"，横向比例接近右侧，
   整页才平衡——单列 796px 高的卡片配 268px 高的右栏，怎么调都失衡。 */
.fgroup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.fgroup-title { grid-column: 1 / -1; }
.fgroup .f-row { margin-bottom: 0; min-width: 0; }

/* 长字段跨两列：口岸名最长，日期两个可以并排，目的地短 */
.f-row.span-2 { grid-column: 1 / -1; }

/* 只有一个字段的组（护照），字段本身占满 */
.fgroup:has(.f-row:only-of-type) { grid-template-columns: 1fr; }

/* 组内标签弱化一档：组标题已经是层级，标签不必再抢 */
.fgroup label {
  font-size: 13px;
  font-weight: 500;
  color: #57534E;
  margin-bottom: 5px;
}

/* ── 卡片头部（图标徽章 + 标题 + 时间）─────────────────────────
   参考站结构实测：徽章 12px/500 pad"4px 12px" 带 14px SVG 图标，
   标题 24px/600，描述 16px/400。三层加起来 168px 高，
   让卡片有"身份感"，而不是一进来就是一个裸表单。 */
.card-head {
  margin: 0 0 20px;
  padding: 0 0 16px;
  border-bottom: 1px solid #F0EDEB;
}
/* 徽章 + 标题同一行：徽章靠左、标题靠右。
   原来两者各占一行且都左对齐，白占两行高度。 */
.card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: #EEF4FF;
  color: #1D4ED8;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
}
.card-ico { width: 13px; height: 13px; flex: none; }
.card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: #1C1917;
}

/* 北京时间移到第二行：小一号、弱一档，作为"环境信息"而不是主信息 */
.cn-clock {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #78716C;
  margin: 0;
}
.cn-clock strong { color: #44403C; font-weight: 600; }
.cn-clock-tz { color: #A8A29E; }
.cn-clock-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22C55E; flex: none;
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

/* ══════════════════════════════════════════════════════════════
   结果页右栏 —— 统一分块规则
   ─────────────────────────────────────────────────────────────
   问题：原来同一屏里并存 7 种形态（胶囊徽章 / 浅灰卡片 / 裸文字 /
   折叠块 / 引用块 / 边框清单 / 黄条盒），每加一个功能我就按"最方便"
   挑一种形式，局部都合理，合起来就乱。

   现在只允许一种分块方式：**一条 1px 细线**。
   · 不铺底色（除徽章，它是状态标识，不是区块）
   · 不用圆角盒子套内容
   · 不用边框盒
   · 强调靠文字：粗体 / 彩色 / 图标

   唯一例外：官方原文保留 2px 左竖线——"引用"的通用视觉语义，
   读者一眼认得，去掉反而降低可读性。
   ══════════════════════════════════════════════════════════════ */

/* 区块：只用上边框分区 */
.rs-sec {
  border-top: 1px solid #F0EDEB;
  padding: 20px 0 0;
  margin: 20px 0 0;
}
.rs-sec:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* 区块标题：小号大写灰字，不用序号（内容不是步骤，编号会暗示阅读顺序） */
.rs-h {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A8683;
}
.rs-h-sub {
  margin: -4px 0 12px;
  font-size: 12px;
  color: #A8A29E;
}

/* ── key-value 表（日期 + 口岸统一成这一种形态）──
   左标签固定宽、右值自适应；行与行之间细线，无底色。 */
.kv { margin: 0; }
.kv-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #F5F3F1;
}
.kv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.kv-row:first-child { padding-top: 0; }
.kv-k {
  font-size: 13px;
  color: #78716C;
  line-height: 1.5;
}
.kv-v {
  margin: 0;
  font-size: 14px;
  color: #1C1917;
  line-height: 1.5;
}
.kv-v em { font-style: normal; color: #A8A29E; font-size: 12px; }
.kv-zh { color: #78716C; font-size: 13px; }
/* 最晚离境日：只加粗，不铺色 */
.kv-hard .kv-k { color: #1C1917; font-weight: 600; }
.kv-hard .kv-v { font-weight: 600; }

.kv-official { margin-top: 2px; }
.kv-official summary {
  font-size: 12px; color: #A8A29E; cursor: pointer; list-style: none;
}
.kv-official summary::before { content: "▸ "; }
.kv-official[open] summary::before { content: "▾ "; }
.kv-official code {
  display: block; margin-top: 4px; font-size: 12px;
  color: #57534E; line-height: 1.5; word-break: break-word;
}

/* ── 检查清单：无外框，行间细线 ── */
.ck-list { list-style: none; margin: 0; padding: 0; }
.ck-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid #F5F3F1;
}
.ck-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ck-item:first-child { padding-top: 0; }

.ck-icon {
  width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  margin-top: 3px;
}
.ck-body { min-width: 0; }
.ck-label {
  display: block; font-size: 13.5px; line-height: 1.5;
  color: #2E2D2D;
}
.ck-note {
  display: block; margin-top: 3px;
  font-size: 12.5px; line-height: 1.5; color: #A8A29E;
}
.ck-word {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; margin-top: 4px;
}

/* pass：安静。已通过的项不需要反复吸引注意力 */
.ck-pass .ck-icon { background: #EAF4EC; color: #3F7C45; }
.ck-pass .ck-word { color: #6B9E70; }

/* fail：最显眼。用红色文字与图标，不铺背景 */
.ck-fail .ck-icon { background: #FCE8E5; color: var(--sem-red); }
.ck-fail .ck-label { color: #A02D20; font-weight: 600; }
.ck-fail .ck-word { color: var(--sem-red); }

/* unknown：与 fail 同等显眼，靠三重标识而非底色：
   ① 感叹号（不是圆点） ② 深黄文字标签 ③ 说明文字不隐藏 */
.ck-unknown .ck-icon { background: #FBF0CF; color: #8A6A00; }
.ck-unknown .ck-label { color: #6B5410; font-weight: 600; }
.ck-unknown .ck-word { color: #9C7A00; }

/* ── 无法确认列表：普通列表，无盒子无黄条 ── */
.rs-list-no { list-style: none; margin: 0; padding: 0; }
.rs-list-no li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #57534E;
}
.rs-list-no li:last-child { margin-bottom: 0; }
.rs-list-no li::before {
  content: "·";
  position: absolute; left: 4px; top: 0;
  color: #C4C0BC; font-weight: 700;
}

.note-line {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #78716C;
}

/* 结果头部：徽章 + 标题 */
.rs-head { margin-bottom: 12px; }

/* ── 右栏引导（重做：三段式，一种形态）─────────────────────────
   旧版是「标题 + 项目符号列表 + 灰框 + 尾注」四种形态并列，
   且项目符号暗示"并列条目"，但三段其实是递进关系（做什么→凭什么→不做什么）。
   现在统一成：小标题（大写灰色） + 一段说明。
   与前文结果卡的 .rs-h 用同一套规格，左右两栏视觉语言一致。 */
/* 字号照竞品实测值放大（2026-10-25）：
 *   竞品 大标题 36px/700 · 正文 16px/400/lh24 · 小标题 16px/400
 *   原来 大标题 20px · 正文 13.5px · 小标题 11px 全大写
 * 11px 全大写是网页上最难读的组合，去掉 uppercase，改成 16px 正常大小写。 */
.guide-title {
  margin: 0 0 28px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: #0A0A0A;
}

.guide-block { margin-bottom: 26px; }
.guide-block:last-of-type { margin-bottom: 26px; }

.guide-h {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: #0A0A0A;
}

.guide-block p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #52525B;
}

/* 示例段：不用灰底框，只用一条左竖线——
   与结果卡里的官方引用保持一致，全站只有这一种"引用/示例"形态 */
.guide-block-worked {
  padding-left: 14px;
  border-left: 2px solid #EDEBE9;
}
.guide-ex-in { color: #78716C !important; }
.guide-ex-out {
  margin-top: 4px !important;
  color: #2E7D32 !important;
  font-weight: 600;
}

.guide-foot {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid #F0EDEB;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #8A8683;
}

/* ══════════════════════════════════════════════════════════════
   卡片内表单 —— 1:1 复刻 visa-free-china.com（2026-10-24）
   ─────────────────────────────────────────────────────────────
   实测它的数值（卡片 623×1074 / 内边距24 / 表单 573×880）：
     · 字段并排两列，控件宽 262px（灰块内）或 279px（灰块外）
     · 每个字段容器高 100px = 标签预留41 + 间隙11 + 控件44 + 4
     · 标签区固定高度 → 并排字段的控件自动对齐（标签换行也不塌）
     · 没有任何输入字段跨列；只有展示块跨两列
     · 灰块：内边距16 / 圆角8 / 底色 rgba(245,245,245,.3) / 边框 #E5E7EB
   之前的错误：纵向单列堆叠 + 长字段跨两列。两者都不是它的做法。
   ══════════════════════════════════════════════════════════════ */

/* 两列网格 */
.fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.fgrid:last-of-type { margin-bottom: 20px; }

/* 单个字段容器：高度由标签区 + 控件决定，与参考站同构 */
.fld {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 标签区固定高度（41px）：参考站用两行高度预留，
   这样"Departure country/region before China"这种长标签换行后，
   相邻字段的控件仍在同一水平线上。 */
.fld > label {
  min-height: 41px;
  margin: 0 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #44403C;
  display: block;
}

/* 控件统一 44px，和参考站一致 */
.fld input {
  height: 44px;
  border-radius: 6px;
  border: 1px solid #E5E5E5;
  padding: 0 12px;
  font-size: 14px;
  box-shadow: none;
  width: 100%;
  box-sizing: border-box;
}

/* 灰块：只裹行程段（出发地/入境口岸/目的地/离境地）
   实测 573×336，内边距16，圆角8，底色极浅 */
.fblock {
  background: rgba(245, 245, 245, 0.3);
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.fblock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* 窄屏：退回单列，否则两列每列不到 200px 装不下口岸名 */
@media (max-width: 560px) {
  .fgrid, .fblock-grid { grid-template-columns: 1fr; }
  .fld > label { min-height: 0; margin-bottom: 6px; }
}

/* 灰块标题：说明这一块是"一起填的一组"，不是装饰 */
.fblock-title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A8683;
}

/* 单字段行（票务）：占满两列宽，因为只有一个字段 */
.fgrid-single { grid-template-columns: 1fr; }

/* 提交按钮：与字段同宽的语言，不居中不缩小 */
#route-check-btn {
  width: 100%;
  height: 46px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 4px;
}

/* 隐私提示 */
.privacy-line {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #A8A29E;
  text-align: center;
}

/* ── 停留区域预览（参考站有，我们此前缺失）────────────────────
   选完入境口岸立刻显示能待哪些省市。这不是装饰：
   240h 的停留区域是有限制的，从上海入境 ≠ 能去全国。 */
.area-preview {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #F7FAFF;
  border: 1px solid #E3EDFB;
}
.area-k {
  margin: 0 0 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8FA6C4;
}
.area-v {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #1C1917;
}

/* ── 四项确认：四个独立方框（照竞品实测值 1:1）────────────────
   竞品实测（F12 量的）：
     LABEL  281×106  padding 12px  border 1px solid rgb(229,231,235)
            radius 6px  bg #FFF  display flex  gap 12px
       INPUT 16×16  margin-top 4px
       标题  14px / 500 / rgb(10,10,10)
       说明  14px / 400 / rgb(115,115,115)
   我之前做成无边框列表行，只有 hover 才有浅底 —— 那是"一条一条"，
   不是"一个框一个框"。这里全部改成独立方框。 */
.attest {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 16px;
}
.att {
  display: flex;
  gap: 12px;
  padding: 12px;
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.att:hover { border-color: #D6D3D1; }
/* 勾选后不变色——竞品就是纯白底灰边框，勾选只体现在 checkbox 本身。
   我原来擅自加了淡蓝底 + 蓝边框，是"自己觉得好看"，不是照抄。 */

.att input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  accent-color: #1678FF;
  cursor: pointer;
}
.att-body { display: block; min-width: 0; }
.att-t {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #0A0A0A;
}
.att-d {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #737373;
}

/* 四个框一律 2×2，全部同宽。原先把第 4 个做成整行 530 宽没有任何理由，
   竞品就是四个等框两行两列。勾选也不变色（竞品就是纯白灰框）。 */

@media (max-width: 640px) {
  .attest { grid-template-columns: 1fr; }
}

/* 漏填高亮：红边框 + 一行说明。
   为什么前端要做这件事：nationality 保持空值（不给默认国籍），
   用户漏填时引擎只会笼统说"缺输入"，他会不知道该回头改哪个框。 */
.fld.is-missing > label { color: var(--sem-red); }
.fld.is-missing input,
.fld.is-missing .dd-btn {
  border-color: #E8A79F;
  background: #FFF9F8;
}
.fld.is-missing::after {
  content: "Required";
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sem-red);
}

/* ══════════════════════════════════════════════════════════════
   下拉框白底兜底（2026-10-24，用户实测反馈"下拉框是灰的"）
   ─────────────────────────────────────────────────────────────
   根因：原生 <select> 的背景不完全受 background-color 控制。
   尤其在使用 appearance:none + background-image 画箭头时，
   部分浏览器会退回系统绘制，背景变成系统灰——而 getComputedStyle
   读到的仍是 rgb(255,255,255)，所以只查样式查不出来。
   实测对比：同一套 CSS 下 <input> 是白底、<select> 是灰底。

   解法：把白底和边框交给外层 .select-wrap 画，select 自身透明。
   这样即使浏览器不肯给 select 白底，外层 div 也保证了白色。
   另外边框从 #E5E5E5 加深到 #D6D3D1，让控件看起来"可交互"
   而不是"禁用"——灰底+浅边框是最像 disabled 的组合。
   ══════════════════════════════════════════════════════════════ */

/* select 自己必须是**不透明白底**，不能透明。
 * 之前设成 transparent 是个错误：透明背景会让浏览器按系统默认填充，
 * 在部分平台上填的就是灰。双层保底——外层 div 白，select 自己也是白。 */

/* 空占位选项（"Select your passport country"）也是深色，
   只是稍淡一档；绝不用浏览器的浅灰默认值。 */

/* 输入框保持原样，但边框同步加深，和 select 一致 */
.fld input { border: 1px solid #D6D3D1; }
.fld input:hover { border-color: #A8A29E; }

/* ══════════════════════════════════════════════════════════════════
   自定义下拉（2026-10-25）
   ──────────────────────────────────────────────────────────────────
   为什么放弃原生 <select>：
   竞品 visa-free-china.com 的下拉实测是 <button role="combobox">，
   不是原生 select。所以浏览器从来不用系统控件绘制它，也就不可能
   出现系统灰底。我用原生 select 调了六轮 background/color-scheme/
   appearance/伪元素，全都在和浏览器原生绘制较劲——方向就是错的。

   本实现零原生绘制：button 画外框，ul 画弹层，颜色 100% 由我们决定。
   样式数值照竞品实测：44px 高 / 6px 圆角 / 1px #E5E5E5 边 /
   8px 12px 内边距 / 14px 字 / 阴影 0 1px 2px rgba(0,0,0,.05)。
   ══════════════════════════════════════════════════════════════════ */
.dd { position: relative; width: 100%; }

.dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 8px 12px;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  color: #0A0A0A;
  background-color: #FFFFFF;
  background-image: none;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.dd-btn:hover { border-color: #D6D3D1; }
.dd-btn:focus-visible {
  outline: none;
  border-color: #1678FF;
  box-shadow: 0 0 0 3px rgba(22, 120, 255, .14);
}
.dd.is-open .dd-btn {
  border-color: #1678FF;
  box-shadow: 0 0 0 3px rgba(22, 120, 255, .14);
}

.dd-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0A0A0A;
}
/* 未选时提示文字略淡，但不至于像禁用 */
.dd.is-empty .dd-label { color: #8A8683; }

/* 箭头：纯 CSS 三角，不用图片 */
.dd-caret {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 2px;
  margin-top: -4px;
  border-right: 1.6px solid #706E6D;
  border-bottom: 1.6px solid #706E6D;
  transform: rotate(45deg);
  transition: transform .15s, margin .15s;
}
.dd.is-open .dd-caret { transform: rotate(-135deg); margin-top: 4px; }

/* 弹层 */
.dd-list {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 268px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(28, 25, 23, .12), 0 2px 6px rgba(28, 25, 23, .06);
}
.dd-list li {
  padding: 8px 10px;
  font-size: 14px;
  line-height: 20px;
  color: #1C1917;
  border-radius: 5px;
  cursor: pointer;
}
.dd-list li:hover { background-color: #F5F5F4; }
.dd-list li[aria-selected="true"] {
  background-color: #EEF4FF;
  color: #0B4FA8;
  font-weight: 500;
}

/* 弹层不要被灰块裁掉 */
.fblock { overflow: visible; }


/* ---------- 搜索式组合框（国籍/出发/下一站） ---------- */
.dd-search { position: relative; }
.dd-input {
  width: 100%;
  font: inherit;
  padding: 0.55rem 2rem 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}
.dd-search .dd-caret {
  position: absolute; right: 0.7rem; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid #8a857b;
  pointer-events: none;
}
.dd-search .dd-list { max-height: 260px; overflow-y: auto; }
.v-badge {
  float: right;
  color: var(--green);
  font-size: 0.8rem;
  margin-left: 0.5rem;
}
.dd-none { color: #8a857b; font-size: 0.85rem; padding: 0.5rem 0.7rem; cursor: default; }

/* ---------- 结果页新增区块 ---------- */
.callout {
  margin: 0.3rem 0;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--gold);
  background: #fdf8ef;
  font-size: 0.92rem;
}
.rs-regional {
  margin: 0.8rem 0 0.2rem;
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--gold);
  background: #fdf8ef;
}
.rs-regional strong { color: #9a6b00; }
.rs-regional.strong {
  border-left-color: var(--red);
  background: #fdf3f4;
}
.rs-regional.strong .rs-regional-h { color: var(--red); }
.rs-regional-h { margin: 0 0 0.3rem; font-size: 0.95rem; }
.rs-regional p { margin: 0; font-size: 0.9rem; }
.rs-hotline .hotline-p { margin: 0.2rem 0 0; font-size: 0.9rem; }
.mono { font-family: "SF Mono", Menlo, Consolas, monospace; }

@media print {
  .rs-regional { border-left-color: #000; background: #fff; }
  .callout { border-left-color: #000; background: #fff; }
}

.tr-flag { display:block; margin-top:0.3rem; font-size:0.78rem; color:#9a6b00; font-style:italic; }

/* ═══════════ v4.1 栏1 右栏瘦身 + 栏2 证据区 ═══════════
   规格：技术体系/网站设计体系.md §3.3.2 / §3.3.3
   右栏实宽 500–540px：只放徽章/结论/3行数字表/证据锚点。
   checks 与原文下沉 #band-3-result（栏2），否则 must_exit_by 被挤出首屏。
   ═════════════════════════════════════════════════════════ */

/* 证据锚点：右栏唯一的外跳入口，也是"预知点开有什么"的承诺 */
.proof-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.05rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.proof-link:hover { border-bottom-color: currentColor; }
.proof-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }

/* 区域方案：右侧强提示（海南命中时结论可能被推翻，必须在右栏出现） */
.rs-regional { border-left: 3px solid var(--sem-orange); padding-left: 12px; margin: 0.9rem 0; }
.rs-regional.strong { background: var(--sem-orange-bg); border-radius: 0 6px 6px 0; padding: 10px 12px; }
.rs-regional-h { font-size: 14px; font-weight: 700; margin: 0 0 6px; color: var(--ink-head); }
.rs-regional p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.rs-regional-mild { margin: 0.7rem 0 0; font-size: 13px; color: var(--ink-2); }

/* ── 栏2 证据区容器 ──
   760px 居中：长文超 80 字符/行难读，不铺满 1160。 */
#band-3-result { padding: 2.2rem 0 2.8rem; }
/* 栏2 宽度 = 全站统一版心（--w-shell）。
   原来写死 760px，比第一栏窄 440px，视觉上像"另一个页面"——
   用户 2026-10-25 指出后改为与全站一致，所有 section 从此同一宽度。 */
.evidence-wrap { max-width: var(--w-shell); margin: 0 auto; padding: 0 1.5rem; }
.evidence-head { margin-bottom: 1.4rem; }
.evidence-title { font-size: 1.22rem; font-weight: 680; letter-spacing: -0.01em;
  color: var(--ink-head); margin: 0 0 0.4rem; }
.evidence-sub { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* 段间距 28px + 细线；段内 12px（与 .rs-sec 一致，此处只补栏2 特有） */
.evidence-wrap .verify-line { margin-top: 1.6rem; padding-top: 0.9rem;
  border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }

@media (max-width: 640px) {
  .evidence-wrap { padding: 0 1rem; }
  .evidence-title { font-size: 1.1rem; }
}

/* ═══════════ v4.2 右栏填满 + 栏2 两列网格 ═══════════
   用户反馈：左栏很高、右栏太空；栏2 一列瀑布流显得很高。
   裁决：检查项回右栏（紧凑形态）、栏2 横向两列。 */

/* ── 右栏紧凑检查网格 ──
   原来 8 条 checklist 每条 3 行 >400px 高。改成两列网格：
   每格一行（图标 + 短标签），说明文字收进 title，全文仍在栏2。
   两列 × 4 行 ≈ 130px，右栏填满但不把 must_exit_by 挤走。 */
.ck-cell {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
  min-width: 0;
}
.ck-cell .ck-icon { font-size: 11px; flex: 0 0 auto; }
.ck-short {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* 三态：pass 安静，fail 最显眼，unknown 与 fail 同等显眼（红线 9） */
.ck-cell.ck-pass .ck-icon { color: var(--sem-green); }
.ck-cell.ck-pass { color: var(--ink-2); }
.ck-cell.ck-fail { color: var(--sem-red-text); font-weight: 600; }
.ck-cell.ck-fail .ck-icon { color: var(--sem-red); }
.ck-cell.ck-unknown { color: var(--sem-orange-text); font-weight: 600; }
.ck-cell.ck-unknown .ck-icon { color: var(--sem-orange); }


/* ── 栏2 两列网格 ──
   原文通栏（长句在窄列里折行灾难）；其余模块两列平铺，一眼扫完。 */
/* 固定三列：用户实测反馈"两列在模块少的场景看起来还是一列 + 大片空白"。
   三列更稳：模块只有 2 个时，第 3 格空着也不塌成单列视觉。
   860px 以下退两列，620px 以下退单列。 */
/* 栏2 版式（用户第三次定稿）：左 = 只有原文；右 = 2~7 全排。
   目标是"左右两块高度接近"，视觉上像两栏对齐，而不是零散小格子。 */
/* 全宽 1200px 下的两栏比例：左侧原文是主体（读长句需要宽度），
   右侧是清单式短块。1.3 : 1 让原文有 ~640px（约 75 字符/行，可读），
   右侧 ~490px 排 2~7 不挤。 */
.ev-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 0 3rem;
  align-items: start;
}
.ev-right { display: flex; flex-direction: column; }
@media (max-width: 860px) {
  /* 窄屏：左右合并成一列，卡片间距由 v4.5 的 margin 统一管 */
  .ev-cols { grid-template-columns: 1fr; gap: 0; }
  .ev-left { margin-bottom: 14px; }
}


/* 栏2 底部：导出按钮 + 核验行，与网格分开 */
.evidence-foot { margin-top: 1.8rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line); }
.evidence-foot .verify-line { margin: 0.8rem 0 0; padding-top: 0; border-top: 0; }

/* ═══════════ v4.3 检查项单列（字号与左卡统一）+ 邮箱保存块 ═══════════
   用户裁决（2026-10-25）：
   1) 检查项不用更大字号，与左侧卡片一致 = 14px
   2) 每行一句，纵向单列——两列小字读不清
   3) 恢复"留邮箱发资料"的设计
   左卡实测基准：label 14px/500，组内标签 13px/500。 */

.ck-grid {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: flex;            /* 单列纵向 */
  flex-direction: column;
  gap: 7px;
}
.ck-cell {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;          /* = 左卡 label 字号 */
  font-weight: 400;
  line-height: 1.45;
  color: #44403C;           /* = 左卡 label 颜色 */
  min-width: 0;
}
.ck-cell .ck-icon { font-size: 12px; line-height: 1.5; flex: 0 0 auto; }
.ck-short { min-width: 0; }
/* 三态：pass 安静；fail / unknown 加粗变色但字号不变（红线 9） */
.ck-cell.ck-pass .ck-icon { color: var(--sem-green); }
.ck-cell.ck-fail { color: #8E2A1F; font-weight: 600; }
.ck-cell.ck-fail .ck-icon { color: var(--sem-red); }
.ck-cell.ck-unknown { color: #6B5410; font-weight: 600; }
.ck-cell.ck-unknown .ck-icon { color: var(--sem-orange); }

/* 来源指向：用户问"依据哪几个文件"→ 这句把他送到栏2 */
.proof-link { font-size: 14px; }

/* ── 邮箱保存块 ──
   放在栏2 底部 Export 之后：用户已看完证据，此刻最愿意留邮箱。 */
/* 右栏版邮箱块（540px 内）：纵向排，输入框满宽，按钮满宽 */
.save-block {
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  background: var(--bg-soft, #FAF9F7);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.save-h { font-size: 14px; font-weight: 650; color: var(--ink-head); margin: 0 0 3px; }
.save-block .rs-h { margin-top: 0; }
.save-sub { margin: 0 0 0.5rem; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.save-row { display: flex; flex-direction: column; gap: 6px; }
.save-row input {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--line-mid, #D6D3D1);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}
.save-row input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.save-row .btn { width: 100%; font-size: 14px; }
.saved-id { display: block; margin-top: 0.6rem; font-size: 13.5px; color: var(--ink-2); }
.saved-id:empty { display: none; }
.save-note { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.4; }



/* 邮箱输入框：实测被撑到 240px（未约束高度 + 继承行高）。
   这里显式固定，不依赖继承——右栏 540px 内它必须只有一行高。 */
.save-row input {
  height: 36px;
  line-height: 1.2;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.save-row .btn {
  height: 36px;
  line-height: 1.2;
  box-sizing: border-box;
  padding: 0 0.8rem;
}

/* ═══════════ v4.5 栏2 每块独立成卡 ═══════════
   用户反馈：块之间只有编号，视觉上仍"散落整体在一起"，靠序号读不清。
   原因：原来每块之间只有 1px 细线，没有边界 → 看起来是同一张纸上的段落。
   做法：每块一个白卡（边界 + 底 + 圆角 + 标题条），让人"一眼数得出几块"。 */

.evidence-wrap .rs-sec {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px 18px;
  margin: 0 0 14px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .04);
}
/* 卡片自身即分隔，不再需要细线；但保留 1px 边框作为卡边 */
.evidence-wrap .rs-sec:first-child,
.ev-right > .rs-sec:first-child,
.ev-left > .rs-sec:first-child { margin-top: 0; }

/* 标题条：与内容之间一条线，让"这是这一块的标题"明确 */
.evidence-wrap .rs-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;      /* 有编号时全大写难读 */
  color: var(--ink-head);
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #F5F3F1;
}

/* 右侧多块时统一间距 */
.ev-right > .rs-sec { margin-bottom: 14px; }
.ev-right > .rs-sec:last-child { margin-bottom: 0; }

/* 原文块（左侧）不再需要额外边框强调——它本身就是一张卡 */
.ev-left > .rs-sec { border-left: 3px solid var(--brand); }

/* 12367 块给一点提示色，它是应急信息 */
.evidence-wrap .rs-hotline { background: #FFFCF7; border-color: #F2E4D0; }

/* 右列多卡纵向排列：卡与卡之间 14px，阅读上是一条"卡片组"而不是散点 */
.ev-right { gap: 0; }
/* 卡片内部首尾元素不要外扩边距，否则卡会被撑高 */
.evidence-wrap .rs-sec > :last-child { margin-bottom: 0; }
.evidence-wrap .rs-sec .rs-list-no,
.evidence-wrap .rs-sec .ck-list { margin-bottom: 0; }
/* 块内列表更紧凑，避免卡越做越高 */
.evidence-wrap .rs-sec .ck-item { padding: 5px 0; }

/* ═══════════ v4.6 引文出处三层布局 ═══════════
   用户反馈：原布局 "A · 日期 · 网址 · verified 日期" 挤一行，看不懂。
   两个日期含义不同（官方发布 vs 我们去核对的日期），必须带标签分开。 */

.quote-fig {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #FCFBFA;
  border-left: 3px solid var(--line-mid, #D6D3D1);
  border-radius: 0 6px 6px 0;
}
.quote-fig:last-child { margin-bottom: 0; }

blockquote.official {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--ink);
}
blockquote.official .tr-flag {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 12px;
  color: var(--sem-orange-text, #6B5410);
}

/* 出处区：与引文之间一条细线，视觉上"这是注释" */
.src {
  display: block;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--line, #E7E5E4);
  font-size: 12.5px;
  line-height: 1.5;
}

/* 第一行：发布方 + 两个日期（每个日期都带标签） */
.src-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}
.src-pub { font-weight: 600; color: var(--ink-2, #57534E); }
.src-d { color: var(--ink-3, #8A8683); white-space: nowrap; }
.src-d b { font-weight: 600; color: var(--ink-2, #57534E); margin-right: 3px; }

/* 第二行：原网址单独一行，可点、可复制、不换行折断得难看 */
.src-url {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--brand);
  text-decoration: none;
  word-break: break-all;
  line-height: 1.45;
}
.src-url:hover { text-decoration: underline; }
.src-url:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ═══════════ v4.7 日期控件现代化 + 网址短标签 ═══════════
   用户反馈：原生 date 输入框"是上个时代的产物"；网址满屏斜杠看着乱。 */

/* ── 日期控件 ──
   保留原生 input（键盘/读屏免费），外面包一层统一外观。
   原生控件在空值时显示 mm/dd/yyyy 且无法定制 → 用自绘占位符覆盖。 */
.date-wrap {
  position: relative;
  display: block;
}
.date-wrap input[type="date"] {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 0.55rem 2.2rem 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.date-wrap input[type="date"]:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}
/* 隐藏原生日历图标（Chrome/Edge/Safari），换自绘图标 */
.date-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.date-wrap input[type="date"]::-webkit-datetime-edit { color: var(--ink); }
/* 空值时隐藏原生的 mm/dd/yyyy 占位文字 */
.date-wrap input[type="date"]:not(.has-value)::-webkit-datetime-edit {
  color: transparent;
}

/* 自绘占位符 */
.date-ph {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #A8A29E;
  pointer-events: none;
}
.date-ph[hidden] { display: none; }

/* 自绘日历图标 */
.date-ico {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #A8A29E;
  stroke-width: 1.7;
  stroke-linecap: round;
  pointer-events: none;
}
.date-wrap:hover .date-ico { stroke: var(--brand); }

/* ── 网址：短标签 + 外链图标 ── */
/* 完整 URL（85+ 字符）必须能安全折行：用 flex 会阻止折行，改 block + break-all。
   这是全域名显示能否成立的关键——否则长链接会溢出卡片边界。 */
.src-url {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--brand);
  text-decoration: none;
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.src-url:hover { text-decoration: underline; }
.src-url:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.src-ext { font-size: 11px; opacity: .75; }

/* 出处分隔符：两个日期之间必须有可见的 "/"
   原来只靠 flex gap，看起来是断开或挤在一起，用户 2026-10-25 指出。 */
.src-sep {
  color: #D6D3D1;
  font-weight: 400;
  margin: 0 -6px;      /* 与 gap 配合，视觉上左右各留 ~8px */
  user-select: none;
}