@charset "UTF-8";
/*!
 * 线路通 · base.css
 *
 * 全站公共：变量、重置、页头、导航、页脚、按钮、卡片、表单、表格、面包屑、分页，以及公告与询价弹窗（当前不渲染，一开启就要用）。
 *
 * 拆分依据：19 类页面 × 2 个视口实测的 CSS coverage。
 * 本文件是拆分的产物，之后直接在这里改样式；重新跑 .tools/css-split.mjs 会覆盖它。
 */

:root {
  --navy: #0f2e4c;
  --navy-deep: #0a2138;
  --navy-soft: #163e63;
  /* 卡片/工具卡 hover 边框：navy 调的浅蓝，不做成灰，hover 才是「染上一层品牌色」 */
  --navy-line: #c3d3e4;
  /* 装饰性箭头/图标：对白底 3.1:1，只许用于图标，不承载信息 */
  --navy-mute: #98a9bb;
  /* 首页 hero 插画的两条虚线轨迹与节点，比 --navy-line 更淡 */
  --navy-line-2: #dbe6f2;
  --navy-line-3: #e8eef6;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #5b6b7f;
  /* 仅装饰用：对白底 3.10:1，不得用于承载信息的文字 */
  --muted-2: #8494a6;
  /* 承载信息的小字用它：对白底 4.97:1，对 --bg 4.68:1 */
  --muted-3: #667085;
  --line: #e3e8ef;
  --line-soft: #eef2f7;
  --bg: #f6f8fb;
  --card: #ffffff;
  --accent: #d9550f;
  --accent-soft: #fff4ec;
  /* 橙色按钮 hover / 按下 */
  --accent-deep: #bf490c;
  /* 徽标文字（--accent-soft 底上） */
  --accent-ink: #a8430b;
  /* 价格提示条、chip hover 的文字 */
  --accent-dark: #8a3c0c;
  /* 徽标/提示条的描边 */
  --accent-line: #f7d3ba;
  /* 深色底上的品牌橙（页脚 logo 圆点），提亮到对 --navy ≥ 4.5:1 */
  --accent-on-navy: #f08a4b;
  --blue: #0b62a4;
  --blue-soft: #eef6fc;
  /* 蓝色徽标文字 */
  --blue-deep: #0a4f83;
  /* 蓝色徽标描边 */
  --blue-line: #cfe6f6;
  --green: #15803d;
  --green-soft: #eefaf2;
  /* 「待核实」专用：与「钱」的 --accent 区分开，且对白底 5.92:1 达标 */
  --amber: #8a5a06;
  --amber-soft: #fdf6e6;
  --amber-line: #f0dfb8;
  /* 页脚两档浅字。深色底上的字不能复用正文的 --muted，对比度不够 */
  --on-navy-2: #a9bccf;
  --on-navy-3: #7f95ab;
  /* 阴影用的 rgb 三元组：rgba() 里没法直接塞十六进制，只能拆开 */
  --navy-rgb: 15, 46, 76;
  --navy-deep-rgb: 10, 33, 56;
  --shade-rgb: 16, 35, 61;
  --accent-rgb: 217, 85, 15;
  --blue-rgb: 11, 98, 164;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(var(--navy-rgb), 0.05);
  --shadow: 0 6px 24px rgba(var(--navy-rgb), 0.08);
  --font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --max: 1200px;
  --max-read: 980px;
  /* 下拉框箭头：全站只此一份，改颜色改这里。用在 .field select 与 .form select */
  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235b6b7f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}


@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}


h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 600;
}


p {
  margin: 0;
}


a {
  color: var(--navy);
  text-decoration: none;
}


a:hover {
  color: var(--accent);
}


img, svg {
  max-width: 100%;
}


button, input, select {
  font: inherit;
  color: inherit;
}


:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}


.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}


.container-read {
  width: 100%;
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 0 20px;
}


.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}


.skip-link:focus {
  left: 12px;
  top: 12px;
}


/* 同上：全局 a:hover 会把白字染成 --accent，压在 --navy 上只有 3.45:1 */
.skip-link:focus,
.skip-link:hover {
  color: #fff;
}


/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}


.header-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 62px;
}


.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
  flex: none;
}


.logo:hover {
  color: var(--navy);
}


.logo-mark {
  width: 26px;
  height: 26px;
  flex: none;
}


.logo-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted-2);
  letter-spacing: 0.06em;
  padding-left: 2px;
  border-left: 1px solid var(--line);
  margin-left: 2px;
  padding-left: 8px;
}


.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  font-size: 14px;
}


.nav a {
  color: var(--ink-2);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}


.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--navy);
  border-bottom-color: var(--navy);
}


/* 窄屏的导航入口。桌面端 .nav 已经铺在页头里，这个按钮不出现 */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--navy);
  cursor: pointer;
}


.nav-toggle svg {
  width: 22px;
  height: 22px;
}


.nav-toggle:hover {
  border-color: var(--navy-line);
}


/* ---------- 左侧抽屉导航（只在窄屏） ---------- */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}


/* [hidden] 是 UA 样式，作者写的 display:block 会压过它，必须显式重申 */
.nav-drawer[hidden] {
  display: none;
}


.nav-drawer-mask {
  position: absolute;
  inset: 0;
  background: rgba(var(--shade-rgb), 0.46);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}


.nav-drawer-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(82vw, 302px);
  height: 100%;
  background: var(--card);
  box-shadow: 0 0 40px rgba(var(--shade-rgb), 0.24);
  transform: translateX(-102%);
  transition: transform var(--t-base) var(--ease-out);
  overscroll-behavior: contain;
}


.nav-drawer.is-open .nav-drawer-mask {
  opacity: 1;
}


.nav-drawer.is-open .nav-drawer-panel {
  transform: translateX(0);
}


.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  border-bottom: 1px solid var(--line);
}


.nav-drawer-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
}


.nav-drawer-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
}


.nav-drawer-close svg {
  width: 18px;
  height: 18px;
}


.nav-drawer-close:hover {
  border-color: var(--navy-line);
  color: var(--navy);
}


.nav-drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0 18px;
  -webkit-overflow-scrolling: touch;
}


.nav-drawer-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  border-left: 3px solid transparent;
  color: var(--ink-2);
  font-size: 15px;
}


.nav-drawer-nav a svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted-2);
}


.nav-drawer-nav a:hover {
  background: var(--navy-line-3);
  color: var(--navy);
}


.nav-drawer-nav a[aria-current="page"] {
  border-left-color: var(--navy);
  background: var(--navy-line-3);
  color: var(--navy);
  font-weight: 600;
}


/* 抽屉打开时锁住页面滚动，否则底下的长页会跟着滑 */
body.nav-open {
  overflow: hidden;
}


@media (prefers-reduced-motion: reduce) {
  .nav-drawer-mask,
  .nav-drawer-panel {
    transition: none;
  }
}


/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}


.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}


.btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
}


.btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}


.btn-ghost {
  background: #fff;
  border-color: var(--line);
  color: var(--navy);
}


.btn-ghost:hover {
  border-color: var(--navy);
  color: var(--navy);
}


.btn-lg {
  height: 46px;
  padding: 0 24px;
  font-size: 15px;
}


.btn-block {
  width: 100%;
}


.search-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 18px;
}


.search-title {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}


.search-grid {
  display: grid;
  grid-template-columns: 1fr 44px 1fr 150px;
  gap: 10px;
  align-items: start;
}


/* 查询框内各列顶部对齐：城市下拉在第一行，区县下拉在下一行 */
.search-grid > .btn,
.search-grid > .swap-btn {
  align-self: start;
  margin-top: 24px;
}


.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}


.field label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}


.field select,
.field input {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  color: var(--ink);
  width: 100%;
  font-family: inherit;
}


/* 只有下拉框画箭头，输入框不要 */
.field select,
.form select {
  cursor: pointer;
  padding-right: 32px;
  /* 必须关掉原生外观，否则会和下面的自定义箭头叠成两个 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
}


/* 数字输入框保留原生步进按钮 */
.field input[type='number'] {
  -moz-appearance: auto;
}


/* 区县下拉是「在城市里再钻一层」，视觉上必须比城市轻。
   两行一样高一样白，用户会看成四个并列字段（起点 / 通榆县 / 终点 / 全部区县）。 */
.field select[data-role$='-district'] {
  height: 34px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  background-color: var(--bg);
  padding-right: 28px;
  background-position: right 10px center;
}


.field select:hover,
.field input:hover {
  border-color: var(--navy-line);
}


/*
 * 交换按钮。44×44 是触控下限：360 宽实测原来只有 32×32，
 * 手指点下去常常落到两边的下拉框上（起终点被换反了都不知道）。
 * 视觉上仍然只是一个细边小方块，尺寸靠 padding 区域而不是加大图标。
 */
.swap-btn {
  height: 44px;
  width: 44px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color 0.18s ease, border-color 0.18s ease;
}


.search-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted-2);
}


.search-error {
  margin-top: 8px;
  font-size: 13px;
  color: #b91c1c;
  display: none;
}


.search-error.is-on {
  display: block;
}


.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}


.section-head h2 {
  font-size: 21px;
  font-weight: 600;
}


.section-head p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}


.section-more {
  font-size: 13px;
  color: var(--blue);
  white-space: nowrap;
}


.section-more:hover {
  color: var(--accent);
}


/* ---------- cards ---------- */
.grid {
  display: grid;
  gap: 14px;
}


.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


.route-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}


.route-card .pair {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 6px;
}


.route-card .pair .arrow {
  color: var(--muted-2);
  font-weight: 400;
}


.route-card .facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--muted);
}


.route-card .price {
  color: var(--accent);
  font-weight: 600;
}


.route-card .sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted-2);
}


/* ---------- mode cards ---------- */
.mode-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.18s ease;
}


.mode-card h3 {
  font-size: 15px;
}


.mode-card p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.65;
}


.mode-card .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}


.chip {
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 2px 7px;
}


/* ---------- tables ---------- */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}


table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}


table.data th {
  text-align: left;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--muted);
  background: #f8fafc;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}


table.data td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
  vertical-align: middle;
}


table.data tr:last-child td {
  border-bottom: 0;
}


table.data tr:hover td {
  background: #fbfdff;
}


table.data td.strong {
  color: var(--navy);
  font-weight: 600;
}


/* ---------- badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  line-height: 1.6;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}


.badge-accent {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent-line);
}


.badge-blue {
  background: var(--blue-soft);
  color: var(--blue-deep);
  border-color: var(--blue-line);
}


.badge-green {
  background: var(--green-soft);
  color: #14663a;
  border-color: #cbe8d6;
}


.badge-gray {
  background: var(--bg);
  color: var(--muted);
  border-color: var(--line);
}


/* ---------- answer card ---------- */
.breadcrumbs {
  padding: 16px 0 0;
  font-size: 12.5px;
  color: var(--muted-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}


.breadcrumbs a {
  color: var(--muted);
}


.breadcrumbs a:hover {
  color: var(--accent);
}


.breadcrumbs .sep {
  color: #cbd5e1;
}


.page-head {
  padding: 12px 0 0;
}


.page-head h1 {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
}


.page-meta {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--muted-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}


.panel .kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-soft);
}


.panel .kv:last-child {
  border-bottom: 0;
}


.panel .kv span:first-child {
  color: var(--muted);
}


.panel .kv span:last-child {
  color: var(--navy);
  font-weight: 500;
}


.block {
  margin-top: 34px;
}


.block > h2 {
  font-size: 19px;
  margin-bottom: 6px;
}


.block > .lead {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 14px;
  max-width: 760px;
}


.prose {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.85;
}


.prose p + p {
  margin-top: 12px;
}


/* 正文里的「怎么算的」链接。
   句子中间挂一条实下划线会把注意力从主题句上拽走，但长得跟正文一样又没人知道能点。
   虚点线是这两者之间唯一合适的分寸：看得出可点，不抢读。 */
.xlink {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px dashed var(--navy-line);
}


.xlink:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}


details.faq summary::-webkit-details-marker {
  display: none;
}


/* ---------- footer（极简三行：品牌 / 免责 / 版权；页脚不放导航，见 design-spec v3 §1） ---------- */
.site-footer {
  background: var(--navy-deep);
  padding: 32px 0 26px;
  margin-top: 56px;
}


.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


/* 行高固定 24px = logo 尺寸，避免 slogan 与字标基线对不齐 */
.footer-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  line-height: 24px;
}


.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
}


.footer-logo .logo-mark {
  width: 24px;
  height: 24px;
}


.footer-slogan {
  font-size: 12.5px;
  color: #93a8bd;
}


/* 免责全文只此一处，最多两行（≈58 汉字/行） */
.footer-note {
  margin: 0;
  max-width: 720px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--on-navy-2);
}


.footer-note strong {
  font-weight: 600;
  color: #ffffff;
}


.footer-legal {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.6;
  color: var(--on-navy-3);
}


/* 页脚没有别的视觉线索表明可点，所以这里所有链接都带下划线（正文内链接规则不同，是刻意的） */
.footer-note a,
.footer-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}


.footer-note a:hover,
.footer-legal a:hover {
  color: #ffffff;
}


.footer-legal .sep {
  margin: 0 8px;
  color: #4d647c;
}


@keyframes price-tag-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}


/* 折叠说明：收起时只占一行，点开看全文。
   用 details 而不是 JS 折叠，是因为它无 JS 也能用，且键盘、读屏都自带支持。 */
.price-note {
  margin-top: 14px;
  border-top: 1px dashed var(--line);
}


.price-note > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0 3px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted-3);
  cursor: pointer;
  list-style: none;
}


.price-note > summary::-webkit-details-marker {
  display: none;
}


.price-note > summary:hover {
  color: var(--text);
}


.price-note > summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}


.price-note-ico {
  display: inline-flex;
  color: var(--accent-dark);
}


.price-note-ico svg {
  width: 13px;
  height: 13px;
}


.price-note-sum strong {
  color: var(--accent-dark);
  font-weight: 650;
}


.price-note-more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--accent-dark);
  white-space: nowrap;
}


.price-note-more::before {
  content: '+';
  font-size: 13px;
  font-weight: 600;
}


.price-note[open] .price-note-more::before {
  content: '\2212';
}


.price-note-more::after {
  content: '\8BE6\7EC6\8BF4\660E';
}


.price-note-body {
  margin-top: 8px;
  padding: 13px 15px;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  font-size: 13px;
  line-height: 1.8;
  color: #7a5636;
}


.price-note-body p {
  margin: 0;
}


.price-note-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 9px !important;
}


.price-note-links a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* 整块版：只留给表单页这类「必须当面说清」的地方 */
.price-block {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 18px;
  padding: 15px 18px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}


.price-block-tag {
  flex: none;
  margin-top: 1px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}


.price-block-body {
  flex: 1 1 auto;
  min-width: 0;
}


.price-block-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--accent-dark);
  line-height: 1.6;
}


.price-block-text {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: #7a5636;
}


.price-block-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}


.price-block-link {
  font-size: 12.5px;
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ---------- 右侧漂浮导航 ---------- */
.float-nav {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.float-btn {
  width: 52px;
  height: 54px;
  padding: 0;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  box-shadow: 0 6px 18px rgba(var(--navy-rgb), 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}


.float-btn svg {
  width: 19px;
  height: 19px;
}


/* .float-btn 设了 display:flex，会盖掉 [hidden] 的默认 display:none */
.float-btn[hidden] {
  display: none;
}


.float-btn:hover {
  transform: translateY(-2px);
  border-color: var(--navy-line);
  box-shadow: 0 10px 24px rgba(var(--navy-rgb), 0.16);
}


.float-btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.26);
}


.float-btn-accent:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  /* 必须重申白色：顶部的 `a:hover { color: var(--accent) }` 特异性 (0,1,1) 高于
     `.float-btn-accent` 的 (0,1,0)，会让图标和文字被染成 --accent，
     压在 --accent-deep 底上只有 1.26:1 —— 等于隐形。这里靠 (0,2,0) 把它按住。 */
  color: #fff;
  box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.32);
}


/* 触摸屏上 :hover 会粘住，键盘聚焦时也可能落到这条链上，一并锁住白色 */
.float-btn-accent:focus-visible,
.float-btn-accent:active {
  color: #fff;
}


.float-contact {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  width: 236px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(var(--navy-rgb), 0.18);
  font-size: 13px;
}


.float-contact[hidden] {
  display: none;
}


.float-contact strong {
  display: block;
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 13.5px;
}


.float-contact dl {
  margin: 0 0 10px;
  display: grid;
  gap: 5px;
}


.float-contact dl div {
  display: flex;
  gap: 8px;
}


.float-contact dt {
  flex: none;
  width: 30px;
  color: var(--muted);
}


.float-contact dd {
  margin: 0;
  min-width: 0;
  word-break: break-all;
}


.float-contact-more {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--blue);
}


/* ---------- 询价弹窗 ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}


.modal[hidden] {
  display: none;
}


.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--navy-deep-rgb), 0.55);
}


.modal-panel {
  position: relative;
  z-index: 1;
  width: min(660px, 100%);
  margin: auto;
  padding: 26px 26px 22px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(var(--navy-deep-rgb), 0.3);
  animation: modal-in 0.18s ease-out;
}


@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


body.modal-open {
  overflow: hidden;
}


.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}


.modal-close:hover {
  background: var(--bg);
  color: var(--ink);
}


.modal-close svg {
  width: 18px;
  height: 18px;
}


.modal-head h2 {
  margin: 0 0 6px;
  font-size: 21px;
  color: var(--navy);
}


.modal-head p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}


/* 成功态：表单已经收起来了，说明文案留着会跟「已提交」打架 */
.modal-panel.is-done .modal-head p,
.modal-panel.is-done .inquiry-done h3 {
  display: none;
}


/* ---------------- 通用表单 ----------------
 * 询价弹窗由 render_inquiry_modal() 输出在页脚前，**每一张页面**都有它，
 * 而频道样式每页只挂一份（base + home/route/facility/doc 之一）。
 * 所以这一组必须住在这里——搬进任何一份频道样式，其他频道上的弹窗就会散架。
 *
 * 2026-10-22 线上事故：这组曾留在 facility.css，线路页/首页/指南页的弹窗里
 * label 与输入框挤成一行、输入框只剩几十像素宽（.form-row-2 的 grid 压根没生效）。
 * 加规则前先问一句：这个类会出现在几个频道？只要不止一个，就写在 base.css。
 */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


.form-fine {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.75;
  color: var(--muted);
}


.inquiry-status {
  align-self: center;
  font-size: 12.5px;
  color: var(--muted);
}


.form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}


.form legend {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  padding: 0;
  margin-bottom: 12px;
}


.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  min-width: 0;
}


.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}


.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}


.form-row-2 > div,
.form-row-3 > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}


.form-row label,
.form-row-2 label,
.form-row-3 label {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
}


.form-row label em,
.form-row-2 label em,
.form-row-3 label em {
  color: var(--accent);
  font-style: normal;
}


.form input,
.form select,
.form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  height: 44px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  /* 用 background-color 而非简写：简写会把 select 的箭头图一起清掉 */
  background-color: #fff;
}


.form textarea {
  height: auto;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.6;
}


/* 给箭头留位。必须写在上面那条 padding 之后，否则被简写盖回 12px，文字会压到箭头上 */
.form select {
  padding-right: 32px;
}


.form .checkbox {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink-2);
  margin: 4px 0 18px;
  line-height: 1.6;
}


.form .checkbox input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--navy);
}


.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}


/* 蜜罐字段：真人不可见（.hp 是老类名，.hp-field 是新的，两个都留着） */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/*
 * 验证码。放在 base 而不是 facility.css：
 * 现在只有认领 / 提交表单在用，但它是通用表单组件——
 * 下次谁在询价或别的频道加一道码，不该再经历一次「样式只在某一个频道生效」。
 * （2026-10 刚踩过：整组表单样式被拆进 facility.css，线路页的询价弹窗当场错位。）
 */
.captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}


.captcha-row input:not([type="hidden"]) {
  /* 160 够放 4 个字符 + 一点余量；不撑满整行，好让图和按钮挨着它 */
  flex: 0 1 160px;
  width: 160px;
  min-width: 120px;
  letter-spacing: 3px;
  text-transform: uppercase;
}


.captcha-img {
  flex: 0 0 auto;
  width: 132px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f7f9fc;
  cursor: pointer;
}


.captcha-refresh {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}


.captcha-refresh:hover {
  color: var(--blue-deep);
}


/* 窄屏：输入框吃掉剩下的宽度，图和「换一张」自己换行。
   图不跟着缩——132×44 是按 1:1 画的点阵，缩到 120 宽是 0.9 倍，
   每个像素块都会发虚，本来就不大的四个字符更难认。 */
@media (max-width: 560px) {
  .captcha-row input:not([type="hidden"]) {
    flex: 1 1 120px;
  }
}


.inquiry-form .form-row,
.inquiry-form .form-row-2,
.inquiry-form .form-row-3 {
  margin-bottom: 12px;
}


.inquiry-form[hidden] {
  display: none;
}


.inquiry-status.is-error {
  color: #b42318;
}


.inquiry-done {
  padding: 22px 4px 6px;
  text-align: center;
}


.inquiry-done[hidden] {
  display: none;
}


.inquiry-done-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}


.inquiry-done-icon svg {
  width: 26px;
  height: 26px;
}


.inquiry-done h3 {
  margin: 0 0 6px;
  font-size: 19px;
}


.inquiry-done p {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--ink-2);
}


.inquiry-links a:hover {
  color: var(--accent);
  text-decoration: underline;
}


.contact-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}


.contact-cta strong {
  font-size: 15px;
  color: var(--navy);
}


.contact-cta p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}


.contact-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


.admin-tab.is-active {
  color: var(--navy);
  border-color: var(--accent);
  font-weight: 600;
}


.admin-stat.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}


.admin-stat.is-active strong {
  color: #fff;
}


/* .form input 会把 checkbox 拉成整行高，这里必须用组合选择器压回去 */
.form .check-line input[type="checkbox"] {
  width: 16px;
  height: 16px;
}


/* ---------- mobile cta ---------- */
.mobile-cta {
  display: none;
}


.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13.5px;
}


.link-list a {
  color: var(--ink-2);
}


.link-list a:hover {
  color: var(--accent);
}


.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}


.kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}


.kpi .n {
  font-size: 26px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
}


.kpi .t {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}


@media (max-width: 900px) {
  .nav {
    display: none;
  }
  /* 桌面导航收起来之后，改用汉堡 + 左侧抽屉；两者同一个断点，不会出现「有汉堡没抽屉」 */
  .nav-toggle {
    display: inline-flex;
  }
  .nav-drawer {
    display: block;
  }
  .hero-art {
    display: none;
  }
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 720px) {
  body {
    padding-bottom: 62px;
  }
  .container,
  .container-read {
    padding: 0 16px;
  }
  .hero-inner {
    padding: 34px 0 62px;
  }
  /* 带 .has-mode 的五列版在 356 行，特异性比单独的 .search-grid 高，
     这里必须连写一个 .search-grid.has-mode，否则窄屏还是五列、中间两列被压成 0 宽 */
  .search-grid,
  .search-grid.has-mode {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 8px;
  }
  .search-grid .btn {
    grid-column: 1 / -1;
    height: 46px;
    margin-top: 0;
  }
  /* 窄屏放不下第五列：运输方式独占一行，排在查询按钮之前 */
  .search-grid.has-mode .field-mode {
    grid-column: 1 / -1;
    margin-top: 2px;
  }
  .search-grid.has-mode .field-mode select {
    height: 42px;
  }
  /* 板块标题与右侧说明在窄屏改为上下排列，否则长说明会把标题挤成每行两三个字 */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 16px;
  }
  .search-card {
    padding: 14px;
  }
  .answer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .answer-cell {
    border-bottom: 1px solid var(--line-soft);
  }
  .answer-cell:nth-child(2n) {
    border-right: 0;
  }
  .kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .route-aside {
    grid-template-columns: minmax(0, 1fr);
  }
  .section {
    padding: 34px 0;
  }
  .mobile-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--line);
  }
  .mobile-cta .btn {
    height: 44px;
  }
}


@media (max-width: 480px) {
  .answer-cell .value {
    font-size: 21px;
  }

  /* 窄屏两列只剩 150px，乌鲁木齐、阿坝藏族羌族自治州这类名字会被吃掉。
     改成竖排：起点 / 终点 各占整行，交换按钮缩成居中的小圆钮落在两段之间。 */
  /* 同样要带上 .has-mode：单列时起点 / 交换 / 终点 各占一行 */
  .search-grid,
  .search-grid.has-mode {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 单列时按钮落在两段之间，居中圆钮。尺寸同为 44：这一档是手机，
     32 的圆钮实测点不中，而且上下都是整行的下拉框，误触代价是起终点被悄悄换掉。 */
  .search-grid > .swap-btn {
    justify-self: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50%;
  }
}


/* 类型筛选与标签行 */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


.chip-row .chip {
  font-size: 13px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}


.chip-row .chip:hover {
  border-color: var(--navy);
  color: var(--navy);
}


.chip-row .chip em {
  font-style: normal;
  margin-left: 5px;
  opacity: 0.6;
  font-size: 11.5px;
}


/* 表单里的补充说明（字段下方小字） */
.field-hint {
  font-size: 11.5px;
  color: var(--muted-2);
  line-height: 1.5;
}


.tight-list {
  margin: 0 0 4px;
  padding-left: 18px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.75;
}


.province-row:first-of-type {
  border-top: 0;
}


.link-list a.is-empty {
  color: var(--muted-2);
}


.empty-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}


.cta-panel .btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}


.kv .phone:hover {
  color: var(--accent);
}


.side-card p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}


.side-link:hover {
  text-decoration: underline;
}


.side-routes a:hover {
  color: var(--navy);
}


.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(var(--navy-rgb), 0.08);
}


.form-alert,
.form-ok {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 16px 0;
  font-size: 13.5px;
}


.form-alert {
  background: #fef2f2;
  border: 1px solid #fccaca;
  color: #991b1b;
}


.form-alert strong {
  display: block;
  margin-bottom: 4px;
}


.form-alert ul {
  margin: 6px 0 0;
  padding-left: 18px;
}


.form-alert p {
  margin: 6px 0 0;
}


.done-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 auto 18px;
  max-width: 680px;
  text-align: left;
}


.done-facts > div {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}


.done-facts dt {
  font-size: 11.5px;
  /* 11.5px 的「受理编号 / 当前状态」是信息不是装饰，--muted-2 只有 3.10:1 */
  color: var(--muted-3);
  margin-bottom: 3px;
}


.done-facts dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink);
}


.empty-province-grid .muted {
  font-size: 11.5px;
}


.page-meta a:hover {
  text-decoration: underline;
}


/* ---------- 漂浮导航 / 询价 / 后台：响应式 ---------- */

/* 窄屏右栏会压到正文：内容区最大 1200，1280 以下时右边缘只剩 40px，放不下 52px 的按钮 */
@media (max-width: 1279px) {
  .float-nav {
    display: none;
  }
}


@media (max-width: 900px) {
  /* 两列/三列在小屏都收成一列。这条跟着 .form-row-* 一起留在 base：
     360 宽时半栏只有 160，地址和说明都会被挤成三行 */
  .form-row-2,
  .form-row-3 {
    grid-template-columns: 1fr;
  }

  .price-block {
    flex-direction: column;
    gap: 10px;
  }

  .price-block-actions {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  /* 折叠态在窄屏上「详细说明」贴着右边缘，和 summary 的文字挤在一起 */
  .price-note-more::after {
    content: '';
  }

  .inquiry-layout,
  .inquiry-steps {
    grid-template-columns: 1fr;
  }

  /* 单列时右栏在表单下方，吸顶没有意义还会盖住内容 */
  .inquiry-aside {
    position: static;
    top: auto;
  }
}


@media (max-width: 720px) {
  /* 页脚三行都保留，只是每行内部改为纵向：免责与备案在手机上同样必须可见 */
  .site-footer {
    padding: 26px 0 20px;
    margin-top: 40px;
  }

  .footer-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .footer-slogan {
    font-size: 12px;
  }

  .footer-note {
    font-size: 12px;
    line-height: 1.8;
    max-width: none;
  }

  .footer-legal {
    flex-direction: column;
    gap: 6px;
  }

  .modal {
    padding: 12px;
  }

  .modal-panel {
    padding: 22px 16px 18px;
    border-radius: 12px;
  }

  .modal-head h2 {
    font-size: 19px;
  }

  .done-card {
    padding: 26px 16px;
  }

  .contact-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ============================================================
   动效层
   只做三类：进场（滚动触发）、悬停（位移 ≤3px）、状态切换（滑动的激活块）。
   约束：位移一律 transform，不改布局盒（避免 CLS）；不做视差与 scroll-jacking；
   prefers-reduced-motion 下全部退化为静态（顶部已有全局兜底，这里再兜一层）。
   ============================================================ */
:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.16s;
  --t-base: 0.24s;
}


/* ---------- 首屏：路线图描点 + 标题浮起 ---------- */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


@keyframes node-pop {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* 虚线每 4.5s 走两个完整周期（7 7 / 4 8 的公倍数），循环处不会跳一下 */
@keyframes dash-drift {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -28;
  }
}


/* ---------- 滚动进场 ----------
   .reveal 只由 JS 加给「初始化时在视口下方」的元素：
   首屏内容不受影响，JS 挂了也只是没有动画，不会白屏。 */
.reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}


.reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
  transition-delay: var(--rv-delay, 0ms);
}


/* ---------- 悬停：卡片抬起 ---------- */
.route-card,
.mode-card,
.facility-card,
.answer-cell,
.tool-card {
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
}


@media (hover: hover) and (pointer: fine) {
  .route-card:hover,
  .facility-card:hover {
    transform: translateY(-3px);
    border-color: var(--navy-line);
  }

  .mode-card:hover {
    transform: translateY(-3px);
    border-color: var(--navy-line);
  }

  .mode-card:hover .mode-icon {
    color: var(--accent);
    transform: translateY(-1px);
  }
}


/* ---------- 悬停：按钮与链接 ---------- */
.btn {
  transition:
    background-color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    color var(--t-fast) ease,
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}


@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.24);
  }

  .btn-ghost:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  .section-more:hover {
    transform: translateX(2px);
  }

  .chip:hover {
    border-color: #d8c3b1;
    background: var(--accent-soft);
    color: var(--accent-dark);
  }
}


.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}


.section-more {
  transition:
    color var(--t-fast) ease,
    transform var(--t-base) var(--ease-out);
}


.chip {
  transition:
    background-color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    color var(--t-fast) ease;
}


/* ---------- 导航下划线：从左滑入，而不是整条闪出来 ---------- */
.nav a {
  position: relative;
  padding: 4px 0 6px;
  border-bottom: 0;
}


.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease-out);
}


.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--navy);
  border-bottom-color: transparent;
}


.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}


/* ---------- 表格行悬停 ---------- */
@media (hover: hover) and (pointer: fine) {
  table.data tbody tr {
    transition: background-color var(--t-fast) ease;
  }

  table.data tbody tr:hover {
    background: #f8fbff;
  }
}


@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero h1,
  .hero-sub,
  .hero-stats,
  .hero-art path,
  .hero-art circle,
  .hero-art rect,
  .hero-art text,
  .mode-panel {
    animation: none !important;
  }

  .route-card:hover,
  .mode-card:hover,
  .facility-card:hover,
  .btn:hover,
  .btn:active {
    transform: none !important;
  }
}


/* ---------- 细节：指路箭头跟着悬停方向挪一点 ---------- */
.route-card .pair .arrow {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}


@media (hover: hover) and (pointer: fine) {
  .route-card:hover .pair .arrow {
    transform: translateX(3px);
    color: var(--accent);
  }

  .route-card:hover .pair {
    color: var(--navy);
  }
}


/* ---------- 细节：页头滚过一屏后浮起来一点，压住正文 ---------- */
.site-header {
  transition:
    box-shadow var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out);
}


.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(var(--navy-rgb), 0.07);
}


@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}


/* ---------- 细节：卡片静置时也有一点厚度，悬停再抬起 ---------- */
.route-card,
.mode-card,
.facility-card {
  box-shadow: 0 1px 2px rgba(var(--navy-rgb), 0.04);
}


@media (hover: hover) and (pointer: fine) {
  .route-card:hover,
  .mode-card:hover,
  .facility-card:hover {
    box-shadow: 0 14px 30px rgba(var(--navy-rgb), 0.11);
  }
}


.ends-chain a:hover {
  color: var(--blue);
}


@media (hover: hover) and (pointer: fine) {
  .route-tool:hover {
    transform: translateY(-2px);
    border-color: var(--navy-line);
    box-shadow: 0 10px 24px rgba(var(--navy-rgb), 0.09);
  }

  .route-tool:hover strong {
    color: var(--accent);
  }
}


/* 区县 + 乡镇两个下拉并排：它们属于同一层「再钻一层」，
   竖着堆三行会让查询框看起来像三个并列字段。 */
.field.has-town {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
}


.field.has-town > label {
  grid-column: 1 / -1;
}


.field.has-town > select[data-role$='-city'] {
  grid-column: 1 / -1;
}


.field.has-town > select[data-role$='-district'],
.field.has-town > select[data-role$='-town'] {
  height: 34px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
  background-color: var(--bg);
  padding-right: 26px;
  background-position: right 9px center;
}


@media (max-width: 720px) {
  .field.has-town {
    grid-template-columns: 1fr;
  }
}


.side-card {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}


.side-tel {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.01em;
}


.side-tel:hover {
  color: var(--blue);
}


.side-toc a:hover {
  color: var(--blue);
}


.side-links li a:hover {
  color: var(--blue);
}


.side-links li a:hover em {
  color: var(--blue);
}


.side-more:hover {
  text-decoration: underline;
}


.side-note {
  background: #fbfcfe;
}


.side-note p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--muted);
}


a.doc-sub {
  color: var(--blue);
  text-decoration: none;
}


a.doc-sub:hover {
  text-decoration: underline;
}


/* 工具页结果下方的「这些数怎么来的」。
   比正文小一档、比页脚大一档：它是一句补充，不是一个功能入口。 */
.calc-note {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted-3);
}


.calc-note .sep {
  margin: 0 6px;
  color: var(--muted-2);
}


/* 说明页的表格：来源与精度是长句，字号要小于数字，否则整张表像一堵墙 */
table.data.data-doc td {
  font-size: 13.5px;
  line-height: 1.7;
}


/* 这张表有 colgroup 固定了三列宽度，560px 的通用下限会把「来源」挤成一条竖线。
   窄屏就让它横向滚（.table-scroll 本来就是这个用途），而不是把长句压成单字换行。 */
table.data.data-doc {
  min-width: 700px;
}


table.data.data-doc td.muted {
  font-size: 12.5px;
  color: var(--muted-3);
}


table.data.data-doc td .doc-sub {
  margin-top: 2px;
}


@media (max-width: 860px) {
  .doc-toc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 720px) {
  .doc-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-card {
    padding: 16px 14px;
  }

  .doc-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-nav {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* 内容页（城市 / 省份 / 指南 / 工具 / 查询）的模块也统一到白卡片上：
   之前正文直接铺在浅灰底上，表格边界弱，看着像没排完。
   只作用于容器的直接子级，避免和模块内部的 .panel / 表格卡片套娃。 */
.container-read > .block {
  margin-top: 22px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}


.container-read > .block > h2:first-child {
  margin-top: 0;
}


@media (max-width: 720px) {
  .container-read > .block {
    padding: 16px 14px;
  }
}


.trust-line.is-verified {
  background: var(--green-soft);
  border-color: #cbe8d6;
  color: #14663a;
}


.trust-line.is-claimed {
  background: var(--blue-soft);
  border-color: var(--blue-line);
  color: var(--blue-deep);
}


.submit-card:hover {
  border-color: var(--blue);
  background: #f7fbfe;
}


/* 兜底：8 类都有数据、提交卡退出网格时，认领入口退化为此行 */
.claim-line {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted-3);
}


.claim-line a {
  color: var(--blue);
  font-weight: 500;
  white-space: nowrap;
}


/* ---------- 主要城市（§5.4 / §5.7） ---------- */
.region {
  min-width: 0;
}


.region-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}


.region-head h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}


.region-head span {
  font-size: 12px;
  color: var(--muted-3);
}


/* 第一个大区紧接 section-head，不再叠一层 18px 上边距 */
.region:first-child .region-head,
.section-head + .region .region-head {
  margin-top: 0;
}


.city-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}


.city-card:hover {
  border-color: var(--navy-line);
  box-shadow: var(--shadow-sm);
}


/* 「呼和浩特 / 内蒙古」这类长名必须 nowrap + min-width:0，否则卡高会从 85 撑到 102，一行四张参差 */
.city-card-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}


.city-card-head strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
  white-space: nowrap;
}


.city-card-head em {
  margin-left: auto;
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted-3);
  white-space: nowrap;
}


/* 两个指标（区县 / 设施） */
.city-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}


.city-card-stats span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}


.city-card-stats em {
  font-style: normal;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted-3);
  white-space: nowrap;
}


.city-card-stats strong {
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.4;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}


/* 指标口径脚注 */
.region-note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted-3);
}


/* ---------- 联系页（§6.2 – §6.4） ---------- */
/* 卡片按内容宽度铺满整行（不再限 760）：本页上下三个 block 都是满宽内容，
   只有这一行缩进会显得「联系方式」那张卡没做完。2 张各约 460，3 张各约 300 */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}


.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 15px;
  min-height: 132px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}


.contact-card:hover {
  border-color: var(--navy-line);
  box-shadow: var(--shadow-sm);
}


.contact-card-icon {
  color: var(--blue);
}


.contact-card-icon svg {
  width: 20px;
  height: 20px;
}


.contact-card-label {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted-3);
}


.contact-card-main {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  overflow-wrap: anywhere;
}


.contact-card-sub {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted-3);
}


.contact-card-arrow {
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 14px;
  color: var(--navy-mute);
}


/* 编号清单：用 column-count 让 5 条自动均衡成 3+2，不用 grid（避免末行空一半） */
.check-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  column-count: 2;
  column-gap: 32px;
}


/* 分栏是按高度切的，四条长短不一的步骤会被切成 01/02 | 03/04，
   读起来像跳着走。有先后顺序的清单用这个修饰类强制单列。 */
.check-list.is-seq {
  column-count: 1;
}


.check-item {
  display: flex;
  gap: 10px;
  break-inside: avoid;
  padding: 7px 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}


.check-item + .check-item {
  border-top: 1px solid var(--line-soft);
}


.check-num {
  flex: none;
  width: 22px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 4px;
}


@media (max-width: 720px) {
  /* 数据条坚持 2 列：4 个数字单列会吃掉近 300px 首屏高度，它们是概览不是阅读 */
  .stat-strip,
  .type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .type-card,
  .submit-card {
    min-height: 96px;
  }

  .type-desc {
    font-size: 11.5px;
    line-height: 1.55;
  }

  .claim-line {
    margin-top: 12px;
  }

  /* 手机上一行一城（48px/行），一屏能扫 7–8 个，避免 28 张卡纵向拉出 2500px */
  .city-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }

  .city-card-head {
    flex: 1 1 auto;
    gap: 8px;
  }

  .city-card-head em {
    margin-left: 0;
  }

  .city-card-stats {
    display: flex;
    gap: 10px;
    flex: none;
  }

  .city-card-stats span {
    flex-direction: row;
    align-items: baseline;
    gap: 3px;
  }

  .city-card-stats em {
    font-size: 11px;
  }

  .city-card-stats strong {
    font-size: 12.5px;
  }

  .region-head {
    margin: 16px 0 8px;
  }

  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-card {
    min-height: 0;
    padding: 14px 14px 13px;
  }

  .contact-card-main {
    font-size: 14.5px;
  }

  /* 双列时每列只有 20 来字，必折行，反而更乱 */
  .check-list {
    column-count: 1;
  }

  .check-item {
    font-size: 13px;
  }

  /* chip 视觉高度不变，用 ::after 把命中区撑到 44px 底线 */
  .chip-row .chip {
    position: relative;
  }

  .chip-row .chip::after {
    content: "";
    position: absolute;
    inset: -11px -2px;
  }
}


/* 类型标识在纵排 flex 里会被拉满宽，这里收回内容宽 */
.rail-target .facility-kind {
  align-self: flex-start;
  margin-bottom: 9px;
}


.rail-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
  /* 「XX 国际物流园」这类长名在 288px 里必须能断，否则撑破卡片 */
  overflow-wrap: anywhere;
}


.rail-place {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted-3);
}


.rail-link:hover svg {
  transform: translateX(2px);
}


.form.form-card input:hover,
.form.form-card select:hover,
.form.form-card textarea:hover {
  border-color: #b9c8da;
}


/* ---------- 字段级错误（第十轮补） ---------- */
/*
 * 只有 .form-card（认领 / 收录）用这套；/inquiry/ 的老表单没动。
 * 红沿用 .form-alert 的 #991b1b 那一支（白底 7.9:1），边框取同色系浅一档，
 * 不新造颜色——「必填星号」已经在这个色上，语义一致。
 * 注意用 background-color 而不是 background 简写：简写会把 select 的箭头图清掉。
 */
.form.form-card .is-invalid {
  border-color: #d64545;
  background-color: #fffbfb;
}


.form.form-card .is-invalid:hover {
  border-color: #c13232;
}


/* 聚焦时如果不写这条，:focus 的 navy 描边会把红框盖回去，看起来像已修好 */
.form.form-card .is-invalid:focus {
  border-color: #d64545;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.13);
}


/* 勾选框没法靠边框表达错误，把红打在整块授权区上 */
.form-consent.is-invalid {
  background: #fffbfb;
  border-color: #f0bcbc;
}


/* 出错原因比 .frow-note（11.5px）大一档：它决定用户能不能走出这个表单，
   不该比「只在核对主体时使用」那句还小。13px 的 label 已用 500，这里同字重。 */
.frow-error {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
  color: #991b1b;
}


.form-consent .frow-error {
  margin-top: 6px;
}


/* 摘要里的字段名做成锚点：读起来仍是「企业 / 机构全称」，点一下跳到对应字段。
   下划线用浅一档的红，避免和上面的错误列表抢注意力。 */
.form-alert-fields a {
  color: #991b1b;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #d9a3a3;
  text-underline-offset: 2px;
}


.form-alert-fields a:hover {
  text-decoration-color: #991b1b;
}


/* ---------- 受理编号 ---------- */
.done-ticket {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 16px;
  align-items: baseline;
  margin-top: 20px;
  padding: 14px 18px 15px;
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius);
}


.done-ticket-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--blue-deep);
}


.done-ticket-code {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--navy);
  /* 点一下整串全选：编号是这页唯一要用户带走的东西，不该让他手工框选 */
  user-select: all;
  -webkit-user-select: all;
}


.done-ticket-hint {
  grid-column: 2;
  font-size: 11.5px;
  line-height: 1.6;
  color: #3b617f;
}


/* ---------- 三步时间线 ---------- */
.done-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}


.done-step {
  position: relative;
  min-width: 0;
  padding-top: 26px;
}


/* 横向连接线：从圆点右侧连到本格末尾，最后一格不画 */
.done-step::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 24px;
  right: 4px;
  height: 1px;
  background: var(--line);
}


.done-step:last-child::after {
  display: none;
}


.done-step.is-done::after {
  background: #bfe7cd;
}


.done-step-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted-3);
  font-size: 10.5px;
  font-weight: 700;
}


.done-step-dot svg {
  width: 10px;
  height: 10px;
}


.done-step.is-done .done-step-dot {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}


/* 当前这一步用蓝圈 + 光晕：和「已认领」同一支蓝，全站把蓝留给「正在发生 / 已确认」 */
.done-step.is-now .done-step-dot {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.1);
}


.done-step strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-2);
}


.done-step-meta {
  display: block;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted-3);
}


/* ---------- 提交内容 ---------- */
/* 两格就够：编号在票里、时间在时间线里，再列一行「当前状态」是把上面说过的重复一遍 */
.done-panel .done-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  max-width: none;
  margin: 22px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}


.done-panel .done-facts > div {
  padding: 11px 16px 12px;
  background: #fff;
  border-radius: 0;
}


.done-panel .done-facts > div + div {
  border-left: 1px solid var(--line);
}


.collapse-toggle:hover {
  border-color: #b9c9da;
  background: #fbfcfe;
  color: var(--navy);
}


.collapse-toggle:active {
  background: #f4f7fb;
}


.collapse-toggle[aria-expanded="true"] .when-shut {
  display: none;
}


.collapse-toggle[aria-expanded="true"] .when-open {
  display: inline;
}


.collapse-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}


@media (prefers-reduced-motion: reduce) {
  .collapse-toggle svg {
    transition: none;
  }
}


/* ================= 公告 ================= */
/*
 * 三种形态共用一套配色语义：
 *   is-info   通知——蓝（信息，不带催促）
 *   is-warn   提醒——琥珀（服务调整、时限，需要看一眼）
 *   is-promo  推广——橙（活动，唯一允许用品牌橙的公告语气）
 * 语气是后台选的，不是按位置定的：同一条公告在通栏和弹窗里必须长得一样，
 * 否则用户会以为是两条不同的消息。
 */

.notice-bar {
  border-bottom: 1px solid transparent;
  font-size: 14px;
}


.notice-bar.is-info {
  background: var(--blue-soft);
  border-bottom-color: var(--blue-line);
  color: var(--blue-deep);
}


.notice-bar.is-warn {
  background: var(--amber-soft);
  border-bottom-color: var(--amber-line);
  color: var(--amber);
}


.notice-bar.is-promo {
  background: var(--accent-soft);
  border-bottom-color: var(--accent-line);
  color: var(--accent-ink);
}


.notice-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding-top: 9px;
  padding-bottom: 9px;
}


.notice-bar-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}


.notice-bar-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
  margin: 0;
  line-height: 1.55;
}


.notice-bar-text strong {
  font-weight: 650;
}


/*
 * 正文那句压成次要色、再小一档：标题和说明同字号时，一整行读下来像一句话，
 * 用户得自己找断句。差 1px 加个色差，层次就出来了。
 */
.notice-bar-text span {
  color: var(--ink-2);
  font-size: 13px;
}


.notice-bar-link {
  flex: none;
  margin-left: auto;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}


.notice-bar-link:hover {
  text-decoration-thickness: 2px;
}


.notice-bar-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}


.notice-bar-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.6);
}


.notice-bar-close svg {
  width: 13px;
  height: 13px;
}


/* 读者点过「知道了」之后，这一条在本机不再出现 */
.notice-bar[hidden] {
  display: none;
}


/* ---------------- 弹窗 ---------------- */

.notice-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}


/* [hidden] 与 display:flex 打架，必须显式写回 none */
.notice-modal[hidden] {
  display: none;
}


.notice-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(var(--navy-deep-rgb), 0.5);
  backdrop-filter: blur(2px);
  animation: notice-fade var(--t-base) var(--ease-out);
}


.notice-modal-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 28px 28px 22px;
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--blue);
  background: var(--card);
  box-shadow: 0 24px 64px rgba(var(--shade-rgb), 0.28);
  animation: notice-pop var(--t-base) var(--ease-out);
}


/*
 * JS 把焦点放到面板上是给读屏软件定位用的，浏览器默认会在整块面板外画一圈
 * outline——看起来像「这个弹窗被选中了」。面板本身不可操作，去掉即可；
 * 真正可点的按钮仍然有自己的 focus-visible 样式。
 */
.notice-modal-panel:focus {
  outline: none;
}


.notice-modal-panel.is-warn { border-top-color: var(--amber); }

.notice-modal-panel.is-promo { border-top-color: var(--accent); }


.notice-modal-panel h2 {
  margin: 10px 0 0;
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}


.notice-modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-3);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}


.notice-modal-x:hover {
  color: var(--ink);
  background: var(--line-soft);
}


.notice-modal-x svg {
  width: 14px;
  height: 14px;
}


.notice-modal .notice-body {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.8;
}


.notice-modal .notice-body p {
  margin: 0 0 10px;
}


.notice-modal .notice-body p:last-child {
  margin-bottom: 0;
}


.notice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}


.notice-actions .btn {
  min-width: 96px;
}


/* 弹窗打开时锁住背景滚动：不锁的话手机上滑的是正文，弹窗自己不动 */
body.is-notice-open {
  overflow: hidden;
}


@keyframes notice-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}


@keyframes notice-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}


/* ---------------- 首页卡片 ---------------- */

/*
 * 位置在搜索卡和第一个内容 section 之间。上下都不吃满 46px：
 * 上面接搜索卡的 26px 就够（再大像另一屏），下面留 0 交给下一个 section 自己的 padding，
 * 否则两个 46 叠起来中间会空出近一百像素。
 */
.notice-card-section {
  padding: 26px 0 0;
}


.notice-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 24px 26px;
  border: 1px solid var(--blue-line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue-soft);
}


.notice-card.is-warn {
  border-color: var(--amber-line);
  border-left-color: var(--amber);
  background: var(--amber-soft);
}


.notice-card.is-promo {
  border-color: var(--accent-line);
  border-left-color: var(--accent);
  background: var(--accent-soft);
}


.notice-card-main {
  min-width: 0;
}


.notice-card h2 {
  margin: 8px 0 0;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}


.notice-card .notice-body {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.75;
}


.notice-card .notice-body p {
  margin: 0 0 6px;
}


.notice-card .notice-body p:last-child {
  margin-bottom: 0;
}


.notice-card-side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}


.notice-card-more {
  color: var(--muted-3);
  font-size: 13px;
  white-space: nowrap;
}


.notice-card-more:hover {
  color: var(--ink);
}


/* ---------------- 语气徽标 ---------------- */

.notice-eyebrow {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--card);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.6;
}


.notice-eyebrow.is-info { color: var(--blue-deep); }

.notice-eyebrow.is-warn { color: var(--amber); }

.notice-eyebrow.is-promo { color: var(--accent-ink); }


/* ---------------- 独立页 ---------------- */

.notice-page-head .notice-eyebrow {
  margin-bottom: 6px;
}


.notice-page-body {
  margin-top: 24px;
}


.notice-page-cta {
  margin-top: 28px;
}


.notice-page-back {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}


/* ---------------- 窄屏 ---------------- */

@media (max-width: 720px) {
  .notice-bar-inner {
    flex-wrap: wrap;
    gap: 4px 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* 通栏在手机上标题和说明各占一行，链接不再推到最右，跟在文字后面 */
  .notice-bar-text {
    flex: 1 1 100%;
    order: 2;
  }

  .notice-bar-dot {
    order: 1;
  }

  .notice-bar-link {
    order: 3;
    margin-left: 0;
  }

  .notice-bar-close {
    order: 4;
    margin-left: auto;
  }

  .notice-modal-panel {
    padding: 24px 20px 18px;
  }

  .notice-card {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }

  .notice-card-side {
    flex-direction: row;
    align-items: center;
    width: 100%;
  }
}


@media (prefers-reduced-motion: reduce) {
  .notice-modal-mask,
  .notice-modal-panel {
    animation: none;
  }
}