/* 海航集团国内航线查询 —— 版式对齐海航官方预订页 */

:root {
  --red: #d7000f;
  --red-dark: #b8000c;
  --red-soft: #fdeeee;
  --ink: #1a1a1a;
  --ink-2: #4a4a4a;
  --ink-3: #8c8c8c;
  --ink-4: #b3b3b3;
  --line: #e6e6e6;
  --line-2: #f0f0f0;
  --bg: #f4f5f7;
  --card: #ffffff;
  --blue: #1f6fd0;
  --green: #0a8a3c;
  --orange: #e8632a;
  --warn: #d4380d;
  --radius: 3px;

  /* ---- 流式间距 ----
     全部用 clamp(最小值, 视口比例, 最大值)：随视口宽度连续变化，不靠断点跳变，
     PC / 手机共用一套节奏。页面左右留白(--gutter)与结果卡片的内边距(--pad-card)
     出自同一系列，因此边框留白与结果内容的间距始终保持一致。
     参考值：  手机375px → gutter 15 / pad 12   平板768px → 31 / 12
              PC 1440px → gutter 40 / pad 20 */
  --gutter:   clamp(14px, 4vw, 40px);    /* 页面左右留白 */
  --pad-card: clamp(12px, 1.6vw, 20px);  /* 卡片左右内边距 */
  --gap:      clamp(8px, 0.9vw, 12px);   /* 紧凑间距：标签 / 按钮 / 表单字段 */
  --gap-lg:   clamp(10px, 1.1vw, 14px);  /* 常规间距：卡片之间 / 航段之间 */
  --space:    clamp(14px, 2.2vw, 26px);  /* 区块间距：搜索区、结果区上下留白 */
}

* { box-sizing: border-box; }

/* 作者样式里写了 display:flex / grid 的元素会覆盖 UA 的 [hidden]{display:none}，
   导致带 hidden 属性的弹层仍然可见（「我的」弹窗就因此一直挂在页面上）。
   这条必须放在所有组件规则之前生效，故置于顶部。 */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* 内容宽度也随视口伸缩：大屏铺得更开，小屏自动收窄到视口宽度 */
.wrap {
  max-width: clamp(1240px, 92vw, 1560px);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 站点注入的返回栏：默认只有 14px 内边距，会贴着页面边缘，与下方内容不对齐。
   这里让它的左右内边距 = 内容居中的外边距 + --gutter，和 .wrap 内容同一条左/右基线。
   用 .wb-topnav.wb-topnav 提高优先级（注入的 <style> 在本文件之后加载）。 */
.wb-topnav.wb-topnav {
  padding-left: max(var(--gutter), calc((100vw - clamp(1240px, 92vw, 1560px)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100vw - clamp(1240px, 92vw, 1560px)) / 2 + var(--gutter)));
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================= 顶部搜索区 ================= */
.search-zone {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

/* 与 .wrap 同宽同留白：搜索表单原本没套 .wrap，会贴着页面左右边缘，
   与下方日期条 / 排序栏 / 结果区不一致。这里复用同一套 gutter 变量。 */
.search-bar {
  max-width: clamp(1240px, 92vw, 1560px);
  margin: 0 auto;
  padding: var(--space) var(--gutter) 4px;
}

.search-fields {
  display: grid;
  grid-template-columns: 1fr 34px 1fr clamp(140px, 15vw, 178px) clamp(140px, 15vw, 176px) clamp(88px, 9vw, 108px);
  gap: var(--gap);
  align-items: end;
}

.sf { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.sf > label {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .3px;
}

.sf-icon {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 1.7;
  pointer-events: none;
}

.combo { position: relative; }

input[type="text"], .date-btn {
  width: 100%;
  height: 40px;
  padding: 0 34px 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fafafa;
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}

input[type="text"]::placeholder { color: var(--ink-4); }

input[type="text"]:focus, .date-btn:focus {
  outline: none;
  border-color: var(--red);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(215, 0, 15, .1);
}

.date-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
}

.date-btn .sf-icon { position: static; transform: none; }

/* 日期文本单行显示：宽度不足时省略，不要折成两行把按钮撑变形 */
.date-btn > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 交换按钮 */
.swap-btn {
  width: 34px; height: 34px;
  margin-bottom: 3px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .16s;
}

.swap-btn svg { width: 17px; height: 17px; }
.swap-btn:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.swap-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* 行程类型 */
.sf-legs { position: relative; }

.legs-options { display: flex; flex-direction: column; gap: 1px; }

.leg-opt { position: relative; cursor: pointer; }
.leg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }

.leg-opt span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--ink-2);
  padding: 1px 0;
  user-select: none;
  line-height: 1.5;
}

.leg-opt span::before {
  content: "";
  width: 13px; height: 13px;
  border: 1.5px solid var(--ink-4);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all .15s;
}

.leg-opt input:checked + span { color: var(--red); font-weight: 600; }

.leg-opt input:checked + span::before {
  border-color: var(--red);
  border-width: 4px;
}

.leg-opt:hover span { color: var(--red); }
.leg-opt input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

/* 搜索按钮 */
.btn-search {
  height: 40px;
  border: 0;
  border-radius: var(--radius);
  background: var(--red);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}

.btn-search:hover { background: var(--red-dark); }
.btn-search:active { transform: translateY(1px); }
.btn-search:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ================= 日期条 ================= */
.date-strip { border-top: 1px solid var(--line-2); padding: 6px 0 8px; }

.ds-inner { display: flex; align-items: stretch; gap: 4px; }

.ds-arrow {
  flex-shrink: 0;
  width: 26px;
  border: 0;
  background: transparent;
  color: var(--ink-4);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
  transition: color .15s, background .15s;
}

.ds-arrow:hover:not(:disabled) { color: var(--red); background: var(--red-soft); }
.ds-arrow:disabled { opacity: .3; cursor: not-allowed; }
.ds-arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

.ds-track {
  flex: 1;
  display: flex;
  gap: 2px;
  overflow: hidden;
  min-width: 0;
}

.ds-cell {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 6px 2px 7px;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--radius);
  text-align: center;
  transition: background .15s;
  position: relative;
}

.ds-cell:hover { background: #f7f7f8; }
.ds-cell:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

.ds-cell .wd {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-cell .dt {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 1px;
}

.ds-cell .cd {
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  margin: 3px auto 0;
}

.ds-cell.lv-actual .cd { background: var(--green); }
.ds-cell.lv-weekly .cd { background: var(--orange); }
.ds-cell.lv-none   .cd { background: var(--ink-4); }
.ds-cell.lv-none .dt { color: var(--ink-4); font-weight: 500; }
.ds-cell.lv-none .wd { color: var(--ink-4); }

.ds-cell.on {
  background: var(--red);
  box-shadow: 0 2px 8px rgba(215, 0, 15, .3);
}

.ds-cell.on .wd, .ds-cell.on .dt { color: #fff; }
.ds-cell.on .cd { background: rgba(255, 255, 255, .85); }

.ds-more {
  flex-shrink: 0;
  align-self: center;
  margin-left: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink-2);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}

.ds-more:hover { border-color: var(--red); color: var(--red); }
.ds-more:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

/* ================= 筛选工具条 ================= */
.filter-bar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.fb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 42px;
  flex-wrap: wrap;
}

.fb-left { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.fb-sort {
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-family: inherit;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .15s;
}

.fb-sort::after {
  content: "";
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid var(--ink-4);
  transition: transform .18s;
}

/* 未选中的排序按钮三角淡出，避免三个三角同时出现让人以为都可点 */
.fb-sort::after { opacity: .35; }
.fb-sort:hover::after { opacity: .7; }
.fb-sort:hover { color: var(--red); }
.fb-sort.active {
  color: var(--red);
  font-weight: 600;
  background: var(--red-soft);
}
.fb-sort.active::after { border-top-color: var(--red); opacity: 1; }
.fb-sort.asc::after { transform: rotate(180deg); }
.fb-sort:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

.fb-label { font-size: 12px; color: var(--ink-4); margin-right: 2px; }
.fb-sortstate {
  font-size: 12px;
  color: var(--ink-2);
  margin-left: 6px;
  white-space: nowrap;
}

.fb-note { font-size: 12px; color: var(--ink-4); margin-left: 8px; }

/* 结果被 MAX_RESULTS 截断时的说明（按省查询常见） */
.more-note {
  margin: 0 0 var(--gap-lg);
  padding: 8px var(--pad-card);
  background: #fff8e6;
  border: 1px solid #f2dfae;
  border-radius: var(--radius);
  font-size: 12.5px;
  color: #7a5a10;
}

/* 强调「仅实测数据」 */
.fb-note-strong {
  color: var(--green);
  background: #f0f9f3;
  border: 1px solid #c6e8d3;
  border-radius: 3px;
  padding: 4px 10px;
  margin-left: 0;
  font-weight: 600;
}

.fb-right { display: flex; align-items: center; gap: 14px; }

.fb-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}

.fb-check input {
  width: 14px; height: 14px;
  accent-color: var(--red);
  cursor: pointer;
}

/* ================= 自动完成下拉 ================= */
.combo-list {
  position: absolute;
  top: calc(100% + 3px);
  left: 0; right: 0;
  max-height: 288px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .13);
  z-index: 40;
}

.combo-list li {
  padding: 7px 10px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.combo-list li:hover, .combo-list li[aria-selected="true"] { background: var(--red-soft); }

/* 省份条目：与机场区分开，蓝色「省」角标 + 下分隔线 */
.combo-list li.opt-prov {
  background: #f2f7fd;
  font-weight: 600;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 2px;
}
.combo-list li.opt-prov:hover,
.combo-list li.opt-prov[aria-selected="true"] { background: #e4eefb; }
.combo-list .prov-code {
  color: var(--blue);
  background: #e4eefb;
}

.combo-list .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 12px;
  color: var(--red);
  background: var(--red-soft);
  padding: 1px 5px;
  border-radius: 2px;
  flex-shrink: 0;
}

.combo-list li.is-empty { color: var(--ink-4); cursor: default; }
.combo-list li.is-empty:hover { background: none; }

.combo-list .prov {
  color: var(--ink-3);
  font-size: 11px;
  margin-left: 4px;
  white-space: nowrap;
}

/* ================= 结果区 ================= */
.results { padding: var(--space) 0 clamp(28px, 4vw, 52px); min-height: 320px; }

.empty-state { text-align: center; padding: 90px var(--gutter); color: var(--ink-4); }
.empty-state svg {
  width: 50px; height: 50px;
  fill: none; stroke: var(--line); stroke-width: 1.5; stroke-linejoin: round;
  margin-bottom: 12px;
}
.empty-state p { margin: 0; font-size: 14px; }

/* 结果头 */
.result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-lg);
  margin-bottom: var(--gap-lg);
  flex-wrap: wrap;
}

.result-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.result-head h2 .rt { color: var(--red); }
.result-head h2 .dt { color: var(--ink-3); font-weight: 400; font-size: 14px; }
.result-head .cnt { font-size: 13px; color: var(--ink-3); }

/* 状态横幅 */
.banner {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  border: 1px solid;
}

.banner .bi {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.banner .bi svg { width: 18px; height: 18px; }
.banner .bt { flex: 1; min-width: 0; }
.banner .bt h3 { margin: 0 0 1px; font-size: 15px; font-weight: 600; }
.banner .bt p { margin: 0; font-size: 13px; color: var(--ink-2); }
.banner .bt .big { font-size: 18px; font-weight: 700; color: inherit; }
.banner .bt .bn-sub {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(0, 0, 0, .12);
  font-size: 12.5px;
  color: var(--ink-2);
}

.banner.yes { background: #f0f9f3; border-color: #c6e8d3; }
.banner.yes .bi { background: var(--green); color: #fff; }
.banner.yes h3 { color: #07692f; }

.banner.no { background: #f7f7f8; border-color: var(--line); }
.banner.no .bi { background: var(--ink-3); color: #fff; }

.banner.unknown { background: #fff8f0; border-color: #f7ddbc; }
.banner.unknown .bi { background: var(--orange); color: #fff; }
.banner.unknown h3 { color: #a8451a; }

/* 数据说明条 */
.src-note {
  padding: 9px 13px;
  border-radius: var(--radius);
  font-size: 12.5px;
  line-height: 1.6;
  margin-bottom: 12px;
  border: 1px solid;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* 提示图标必须限尺：flex 子项里的 svg 没有宽高会被拉伸成整块大图 */
.src-note > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 2px;
}

.src-note.info { background: #f2f7fd; border-color: #cfe0f5; color: #1a4a80; }
.src-note.warn { background: #fff8f0; border-color: #f7ddbc; color: #a8451a; }
.src-note.error { background: #fdf2f2; border-color: #f5cccc; color: #a01818; }
.src-note b { font-weight: 600; }
.src-note .conf-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.7;
}
.src-note .conf-list li.ok::marker { color: var(--green); }
.src-note .conf-list li.mid::marker { color: var(--orange); }
.src-note .conf-list li.bad::marker { color: var(--warn); }

/* 数据范围说明（航司名单）*/
.src-scope {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0, 0, 0, .12);
  font-size: 12px;
  opacity: .85;
}

/* 日历/日期条：推算日与实测日一眼可分 */
.ds-cell.lv-predicted .cd { background: #8fa3b8; }
.ds-cell.lv-cross-season .cd { background: #b0a4b8; }
.ds-cell.lv-oag .cd { background: #0ea5a4; }
.dp-cell.lv-predicted { border-color: #cfdae6; background: #f5f8fb; }
.dp-cell.lv-predicted .dot { background: #8fa3b8; }
.dp-cell.lv-cross-season { border-color: #e0d6ea; background: #faf7fc; }
.dp-cell.lv-cross-season .dot { background: #b0a4b8; }
.dp-cell.lv-oag { border-color: #a9dedd; background: #eefaf9; }
.dp-cell.lv-oag .dot { background: #0ea5a4; }

/* 汇总条 */
.summary-bar { display: flex; gap: var(--gap); margin-bottom: var(--gap-lg); flex-wrap: wrap; }

.summary-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink-2);
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}

.summary-item b { color: var(--ink); font-weight: 700; margin-right: 4px; font-size: 14px; }
.summary-item:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.summary-item.active { background: var(--red); border-color: var(--red); color: #fff; }
.summary-item.active b { color: #fff; }
.summary-item:disabled { opacity: .45; cursor: not-allowed; }
.summary-item:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.summary-item.static { cursor: default; background: #fafafa; }
.summary-item.static:hover { border-color: var(--line); color: var(--ink-2); }

/* ================= 航班卡片（对齐海航版式） ================= */
.fcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--gap-lg);
  overflow: hidden;
  transition: box-shadow .18s, border-color .18s;
}

.fcard:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .09); border-color: #dcdcdc; }

/* 顶部标签条 */
.fcard-top {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 8px var(--pad-card);
  border-bottom: 1px solid var(--line-2);
  flex-wrap: wrap;
}

.ftag {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 2px;
  font-weight: 500;
  white-space: nowrap;
}

.ftag.best { background: var(--red); color: #fff; font-weight: 600; }
.ftag.direct { background: #eaf4ff; color: var(--blue); }
.ftag.one { background: #fff4ec; color: #c25510; }
.ftag.two { background: #f3eefb; color: #6b3fa0; }
.ftag.actual { background: #eaf7ef; color: var(--green); }
/* OAG权威班期：蓝绿底，与实测绿、推算灰区分 */
.ftag.oag { background: #e6f6f5; color: #0f766e; border: 1px solid #b7e4e1; }
/* 推算班期：灰底，与实测的绿色形成明确区分 */
.ftag.pred { background: #f4f4f5; color: var(--ink-3); border: 1px dashed #d0d0d4; }
.ftag.viatag { background: #f0f6fd; color: var(--blue); border: 1px solid #d5e5f8; }
.ftag.weekly { background: #fff4ec; color: #c25510; }
.ftag.cancel { background: #f4f4f5; color: var(--ink-3); text-decoration: line-through; }
.ftag.plain { background: #f7f7f8; color: var(--ink-3); }

.fcard-top .spacer { margin-left: auto; }
.fcard-total { font-size: 12.5px; color: var(--ink-3); }

/* 主体三栏 */
.fcard-body {
  /* 这里原本预留了右侧第二列（1fr 300px），但卡片里一直只有一个子元素，
     结果是右侧空出一大块：到达城市到不了最右端，中间的航线图示也拉不开。
     改回单列后：起飞城市贴左、到达城市贴右，中间的线随页面宽度伸缩。 */
  display: block;
}

.fcard-main { padding: clamp(12px, 1.4vw, 16px) var(--pad-card) clamp(10px, 1.2vw, 14px); }

/* 单个航段行 */
.seg {
  display: grid;
  grid-template-columns: clamp(104px, 11vw, 132px) 1fr clamp(78px, 8vw, 96px);
  gap: var(--gap-lg);
  align-items: center;
}

.seg + .seg {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.seg-t { text-align: left; }

.seg-t .time {
  font-size: 25px;
  font-weight: 300;
  letter-spacing: -.5px;
  line-height: 1.12;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.seg-t .time .sup { font-size: 12px; font-weight: 500; vertical-align: super; }
.seg-t .time.cancelled { color: var(--ink-4); text-decoration: line-through; }

.seg-t .ap { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.4; }
.seg-t .ap .term { color: var(--ink-3); font-size: 11.5px; margin-left: 3px; }
.seg-t .date { font-size: 11.5px; color: var(--ink-4); margin-top: 1px; }

/* 中间：航线图示 */
.seg-mid { padding: 0 4px; }

/* 中转时的进出港航站楼 */
.seg-stop .term-tag {
  font-size: 11px;
  color: var(--ink-3);
  background: #f2f3f5;
  border-radius: 2px;
  padding: 0 5px;
  white-space: nowrap;
}

.seg-stop .term-warn {
  font-size: 11px;
  color: var(--warn);
  background: #fff4ec;
  border: 1px solid #f7ddbc;
  border-radius: 2px;
  padding: 0 5px;
  font-weight: 600;
  white-space: nowrap;
}

/* 联运航班号（多航司共飞同一班次） */
.seg-share {
  font-size: 11px;
  color: var(--blue);
  background: #f0f6fd;
  border: 1px solid #d5e5f8;
  border-radius: 2px;
  padding: 1px 6px;
  display: inline-block;
  margin-bottom: 4px;
  white-space: nowrap;
}

.seg-line { display: flex; align-items: center; gap: 0; margin: 2px 0 5px; }

.seg-line .sdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
  flex-shrink: 0;
}

.seg-line .sline {
  flex: 1;
  height: 1px;
  background: #dcdcdc;
  position: relative;
}

.seg-line .splane {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--ink-4);
  background: var(--card);
  padding: 0 3px;
}

.seg-line .splane svg { width: 13px; height: 13px; display: block; }

/* 中转 / 经停信息
   —— 中转：本班抵达后换乘另一航班（橙色）
   —— 经停：同一班飞机中途落地后继续飞（蓝色） */
.seg-stop {
  font-size: 12.5px;
  margin-bottom: 3px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.seg-stop:empty { display: none; }

.stop-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}

.stop-row .pin { color: var(--orange); font-weight: 600; white-space: nowrap; }

/* 经停用蓝色区分：同机继续飞，不需要提行李换乘 */
.stop-via .pin {
  color: var(--blue);
  background: #f0f6fd;
  border: 1px solid #d5e5f8;
  border-radius: 2px;
  padding: 0 5px;
  font-size: 11px;
}

.stop-via .via-city { color: var(--ink-2); font-size: 12px; }
.stop-via .via-code { color: var(--ink-3); font-size: 11px; }
.stop-via .via-sep { color: var(--ink-4); font-size: 11px; }

.seg-stop .via { color: var(--ink-2); font-size: 12px; }

.seg-stop .wait {
  color: var(--ink-3);
  font-size: 11.5px;
  white-space: nowrap;
  margin-right: 2px;
}

.seg-dur { font-size: 11.5px; color: var(--ink-4); }
.seg-dur b { color: var(--ink-2); font-weight: 500; }

/* 右侧：航司信息 */
.seg-air {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding-left: 12px;
  border-left: 1px solid var(--line-2);
  min-height: 40px;
}

.seg-air .logo {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--red);
  margin-top: 1px;
}

.seg-air .logo svg { width: 20px; height: 20px; display: block; }

.seg-air .info { min-width: 0; }

.seg-air .al {
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.seg-air .fl {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .2px;
}

.seg-air .fl.cancelled { color: var(--ink-4); text-decoration: line-through; }
.seg-air .ac {
  font-size: 11.5px;
  color: var(--ink-4);
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  background: #f5f6f8;
  border-radius: 2px;
}

/* 中转提示条 */
.transfer-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 18px;
  background: #fff8f0;
  border-top: 1px solid #fbead5;
  font-size: 12.5px;
  color: #b1531a;
}

.transfer-bar.ok { background: #fafafa; border-top-color: var(--line-2); color: var(--ink-2); }
.transfer-bar .sep { color: var(--ink-4); }

/* ================= 无结果 ================= */
.no-result {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 44px 24px;
  text-align: center;
}

.no-result h3 { margin: 0 0 7px; font-size: 16px; font-weight: 600; }
.no-result p { margin: 0; color: var(--ink-2); font-size: 13.5px; }

.no-result .hint {
  margin: 14px auto 0;
  font-size: 12.5px;
  color: var(--ink-2);
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: inline-block;
  max-width: 620px;
  text-align: left;
  line-height: 1.65;
}

/* ================= 完整日历 ================= */
.datepicker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 60;
  animation: fade-in .15s ease;
}

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

.datepicker {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(540px, calc(100vw - 32px));
  max-height: min(640px, calc(100dvh - 40px));
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
  z-index: 61;
  padding: clamp(14px, 2.2vw, 18px) clamp(14px, 3vw, 20px) clamp(12px, 2vw, 16px);
}

@keyframes dp-in {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.datepicker:not([hidden]) { animation: dp-in .18s ease; }

.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-head h2 { margin: 0; font-size: 16px; font-weight: 600; }

.dp-close {
  width: 28px; height: 28px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
}

.dp-close svg { width: 16px; height: 16px; }
.dp-close:hover { background: #f5f5f5; color: var(--ink); }

.dp-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 11px;
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 11.5px;
  color: var(--ink-2);
  margin-bottom: 12px;
}

.dp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dp-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-actual { background: var(--green); }
.dot-predicted { background: #8fa3b8; }
.dot-cross { background: #b0a4b8; }
.dot-none { background: var(--ink-4); }

.dp-months { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

.dp-month {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  font-family: inherit;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.dp-month:hover { border-color: var(--red); color: var(--red); }
.dp-month.active { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.dp-month:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.dp-month .mc { opacity: .7; font-size: 11px; margin-left: 3px; }

.dp-nav { display: grid; grid-template-columns: 32px 1fr 32px; gap: 8px; align-items: start; }

.dp-nav-btn {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 18px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  transition: all .15s;
}

.dp-nav-btn:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.dp-nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.dp-nav-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dp-wd { text-align: center; font-size: 11px; color: var(--ink-4); padding: 3px 0 5px; }

.dp-cell {
  aspect-ratio: 1;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all .13s;
  padding: 2px;
}

.dp-cell:hover { border-color: var(--red); background: var(--red-soft); }
.dp-cell:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.dp-cell .n { font-weight: 600; line-height: 1; }
.dp-cell .dot { width: 5px; height: 5px; border-radius: 50%; }

.dp-cell.lv-actual { border-color: #c6e8d3; background: #f0f9f3; }
.dp-cell.lv-actual .dot { background: var(--green); }
.dp-cell.lv-weekly { border-color: #f7ddbc; background: #fff8f0; }
.dp-cell.lv-weekly .dot { background: var(--orange); }
.dp-cell.lv-none { background: #fafafa; }
.dp-cell.lv-none .n { color: var(--ink-4); }
.dp-cell.lv-none .dot { background: var(--ink-4); }
.dp-cell.on { background: var(--red); border-color: var(--red); }
.dp-cell.on .n { color: #fff; }
.dp-cell.on .dot { background: rgba(255, 255, 255, .85); }

.dp-hint {
  margin: 12px 0 0;
  padding: 9px 12px;
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.6;
}

.dp-hint b { color: var(--ink); }

/* ================= 页脚 ================= */
/* ================= 页面底部：数据来源说明 ================= */
/* 说明块放在结果列表之后、页脚之前，不占结果首屏空间；无内容时整块隐藏 */
.page-note-zone { margin-top: var(--space); }
.page-note-zone:has(#page-note:empty) { display: none; }
#page-note:empty { display: none; }
.page-note-zone .src-note { margin-bottom: 0; }

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--card);
  padding: var(--space) 0;
  color: var(--ink-4);
  font-size: 12px;
}

.site-footer p { margin: 0 0 3px; }

/* ================= 提示 ================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: rgba(26, 26, 26, .93);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  z-index: 100;
  animation: toast-in .2s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ================= 响应式 ================= */
@media (max-width: 1080px) {
  .search-fields {
    grid-template-columns: 1fr 34px 1fr;
    grid-template-areas: "from swap to" "date date legs" "btn btn btn";
    gap: var(--gap);
  }
  .sf:nth-of-type(1) { grid-area: from; }
  .swap-btn { grid-area: swap; }
  .sf:nth-of-type(2) { grid-area: to; }
  .sf-date { grid-area: date; }
  .sf-legs { grid-area: legs; flex-direction: row; align-items: center; gap: 14px; }
  .sf-legs > label { display: none; }
  .legs-options { flex-direction: row; gap: 14px; }
  .btn-search { grid-area: btn; }
  .fcard-body { display: block; }
}

@media (max-width: 720px) {
  .search-fields { grid-template-columns: 1fr; grid-template-areas: "from" "swap" "to" "date" "legs" "btn"; }
  .swap-btn { justify-self: center; margin: 0; }
  .sf-legs { flex-direction: column; align-items: flex-start; }
  .sf-legs > label { display: block; }
  .ds-more { display: none; }
  .fb-note { display: none; }
  .fb-inner { height: auto; padding: 8px 0; }
  .seg { grid-template-columns: 1fr; gap: 6px; }
  .seg-t { display: flex; align-items: baseline; gap: var(--gap-lg); flex-wrap: wrap; }
  .seg-t .time { font-size: 21px; }
  .seg-mid { padding: 0; }
  .seg-air { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-2); padding-top: var(--gap); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
/* ================= 云服务 UI ================= */
.acct-bar {
  border-bottom: 1px solid var(--line-2);
  background: #fbfbfc;
}

.acct-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-top: 7px;
  padding-bottom: 7px;
  flex-wrap: wrap;
}

.acct-left { display: flex; gap: var(--gap); }

.acct-btn {
  font: inherit;
  font-size: 13px;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px 12px;
  cursor: pointer;
  line-height: 1.4;
}

.acct-btn:hover { color: var(--red); border-color: var(--red); }
.acct-btn:disabled { opacity: .55; cursor: default; }
.acct-btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.acct-btn.primary:hover { opacity: .9; color: #fff; }
.acct-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

.acct-user { font-size: 13px; color: var(--ink-2); margin-right: 4px; }
.acct-off { font-size: 12px; color: var(--ink-4); }

/* 卡片收藏按钮 */
.fav-btn {
  font: inherit;
  font-size: 12px;
  color: var(--ink-3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 9px;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 6px;
}

.fav-btn:hover { color: var(--red); border-color: var(--red); }
.fav-btn.on { color: #b8860b; border-color: #e8c766; background: #fff9e8; }
.fav-btn:disabled { opacity: .5; cursor: default; }
.fav-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

/* 「我的」弹层 */
.cp-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 20, 30, .35);
  z-index: 70;
}

.cloud-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 2 * var(--gutter)));
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
  z-index: 71;
}

.cp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 13px var(--pad-card);
  border-bottom: 1px solid var(--line-2);
}

.cp-head h2 { margin: 0; font-size: 15px; font-weight: 600; }

.cp-close {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-4); padding: 3px; line-height: 0;
}

.cp-close svg { width: 17px; height: 17px; }
.cp-close:hover { color: var(--red); }

.cp-body {
  padding: var(--pad-card);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cp-tip { margin: 0 0 12px; font-size: 13px; color: var(--ink-3); line-height: 1.7; }
.cp-empty { margin: 0; font-size: 13px; color: var(--ink-4); line-height: 1.8; }

.cp-form { display: flex; flex-direction: column; gap: 10px; }
.cp-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-3); }
.cp-field input {
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink-1);
}

.cp-field input:focus { outline: none; border-color: var(--red); }
.cp-err { margin: 0; font-size: 12px; color: var(--warn); min-height: 1em; }
.cp-actions { display: flex; gap: var(--gap); flex-wrap: wrap; }
.cp-msg { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.7; }

.cp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.cp-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 9px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}

.cp-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-item-main b { font-size: 14px; font-weight: 600; }
.cp-item-sub { font-size: 12px; color: var(--ink-4); }

.cp-del {
  font: inherit;
  font-size: 12px;
  color: var(--ink-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.cp-del:hover { color: var(--warn); border-color: var(--warn); }
.cp-del:disabled { opacity: .5; cursor: default; }

@media (max-width: 720px) {
  .acct-inner { padding-top: 6px; padding-bottom: 6px; }
  .cloud-panel { width: calc(100vw - 2 * var(--gutter)); max-height: 82vh; }
}

/* 搜索栏下方说明：起飞 / 到达可只填一侧 */
.sf-hint {
  margin: 9px 0 2px;
  font-size: 12px;
  color: var(--ink-4);
  line-height: 1.7;
}