/* ============================================================
   时光路书 · v2 视觉层
   作用域：html[data-engine="timeflow"]
   叠加在暗夜路书底座（data-skin="roadbook"）之上：
   - 目的地卡片重构为「抵达片 / 停留带 / 出发片」三段天空
   - 天空由 timeflow.js 注入的 --tf-a-bg / --tf-b-bg 变量渲染
   - 停留按钮组按旅行场景标注「停留时间 / 过夜至」
   ============================================================ */

/* ---------- 目的地卡片：两片天空 ---------- */
/* [data-sky-a] 提升优先级：voyage.css 的玻璃卡片背景与本规则同优先级且加载更晚，
   无 photo-* 类目的卡片会被压成暗底，导致上午/正午等深色文字不可读 */
html[data-engine="timeflow"] .destination-card,
html[data-engine="timeflow"] .destination-card.photo-golden,
html[data-engine="timeflow"] .destination-card.photo-sunset,
html[data-engine="timeflow"] .destination-card.photo-blue,
html[data-engine="timeflow"] .destination-card[data-sky-a] {
  padding-bottom: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--tf-a-bg, linear-gradient(160deg, rgba(255, 255, 255, .058), rgba(255, 255, 255, .026)));
  box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
  transition: background .6s ease, box-shadow .3s ease;
}

/* 抵达片文字：随天空明暗自适应 */
html[data-engine="timeflow"] .destination-card[data-sky-a] .place-picker input {
  color: var(--tf-a-ink);
  border-bottom-color: color-mix(in srgb, var(--tf-a-ink) 30%, transparent);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .place-picker input::placeholder {
  color: color-mix(in srgb, var(--tf-a-ink) 45%, transparent);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .place-address {
  color: color-mix(in srgb, var(--tf-a-ink) 86%, transparent);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .place-meta {
  color: color-mix(in srgb, var(--tf-a-ink) 74%, transparent);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .search-mark {
  color: color-mix(in srgb, var(--tf-a-ink) 66%, transparent);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .time-grid span {
  color: color-mix(in srgb, var(--tf-a-ink) 88%, transparent);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .time-grid strong {
  color: var(--tf-a-ink);
  font-size: 21px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .18);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .route-status {
  color: color-mix(in srgb, var(--tf-a-ink) 92%, transparent);
  background: color-mix(in srgb, var(--tf-a-ink) 14%, transparent);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .route-status.error {
  color: #ffd7da;
  background: rgba(200, 40, 55, .35);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .card-actions button {
  color: color-mix(in srgb, var(--tf-a-ink) 75%, transparent);
  background: color-mix(in srgb, var(--tf-a-ink) 10%, transparent);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .card-actions button:last-child { color: #ff9aa1; }
html[data-engine="timeflow"] .destination-card[data-sky-a] .station-number {
  color: var(--tf-a-ink);
  text-shadow: 0 0 10px color-mix(in srgb, var(--tf-a-ink) 45%, transparent);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .section-label {
  color: color-mix(in srgb, var(--tf-a-ink) 72%, transparent);
}
/* 高原提示：与「距日落」同款的椭圆气泡，墨色自适应保证任意天空可读 */
html[data-engine="timeflow"] .destination-card[data-sky-a] .altitude-warning {
  margin-top: 7px;
  color: var(--tf-a-ink);
  background: color-mix(in srgb, var(--tf-a-ink) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--tf-a-ink) 22%, transparent);
  font-weight: 600;
}

/* 时段徽章 & 日光余额 */
html[data-engine="timeflow"] .tf-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font: 600 10px/1.4 "Noto Sans SC", sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* Keep source badges for recalculation; show only the combined sky chip. */
html[data-engine="timeflow"] .destination-card[data-sky-a] [data-arrival]:has(.tf-moment) > .photo-badge,
html[data-engine="timeflow"] .destination-card[data-sky-b] [data-departure]:has(.tf-moment) > .photo-badge { display: none; }
html[data-engine="timeflow"] .tf-moment {
  color: var(--tf-a-ink, #e9edf6);
  background: color-mix(in srgb, var(--tf-a-ink, #fff) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tf-a-ink, #fff) 26%, transparent);
}
html[data-engine="timeflow"] .departure-block .tf-moment {
  color: var(--tf-b-ink, #e9edf6);
  background: color-mix(in srgb, var(--tf-b-ink, #fff) 16%, transparent);
  border-color: color-mix(in srgb, var(--tf-b-ink, #fff) 26%, transparent);
}
html[data-engine="timeflow"] .tf-daylight { margin-top: 7px; width: fit-content; }
html[data-engine="timeflow"] .tf-good { color: #d9f4e2; background: rgba(46, 160, 100, .3); border: 1px solid rgba(120, 220, 160, .4); }
html[data-engine="timeflow"] .tf-mid  { color: #ffedc9; background: rgba(220, 160, 60, .3); border: 1px solid rgba(255, 200, 110, .42); }
html[data-engine="timeflow"] .tf-warn { color: #ffd9c9; background: rgba(220, 110, 50, .34); border: 1px solid rgba(255, 150, 90, .45); }
html[data-engine="timeflow"] .tf-dim,
html[data-engine="timeflow"] .tf-dark { color: #ccd6ee; background: rgba(90, 110, 170, .3); border: 1px solid rgba(150, 170, 230, .35); }

/* ---------- 停留带：全幅玻璃夜带 ---------- */
html[data-engine="timeflow"] .stay-section {
  margin: 15px -16px 0;
  padding: 13px 16px 15px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  background: rgba(8, 12, 20, .46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* 无出发片时由停留带收尾圆角 */
html[data-engine="timeflow"] .destination-card:not(.tf-has-dep) .stay-section {
  border-radius: 0 0 18px 18px;
}
/* 有出发片时停留带不再保留底padding，避免露出抵达片天空 */
html[data-engine="timeflow"] .destination-card.tf-has-dep .stay-section {
  padding-bottom: 0;
}
/* 隐藏原区块级「停留时间」标题，改为按钮组小标题 */
html[data-engine="timeflow"] .stay-section > span { display: none; }
html[data-engine="timeflow"] .stay-buttons { margin-top: 0; gap: 9px; }
html[data-engine="timeflow"] .stay-relative-buttons,
html[data-engine="timeflow"] .stay-until-buttons { align-items: center; }
html[data-engine="timeflow"] .stay-relative-buttons::before,
html[data-engine="timeflow"] .stay-until-buttons::before {
  flex: 0 0 auto;
  margin-right: 1px;
  font: 600 10px/1 "Noto Sans SC", sans-serif;
  letter-spacing: .06em;
  color: #93a0b8;
  white-space: nowrap;
}
html[data-engine="timeflow"] .stay-relative-buttons::before { content: "停留"; }
html[data-engine="timeflow"] .stay-until-buttons::before { content: "过夜"; }
html[data-engine="timeflow"] .stay-section p[data-stay-current] {
  color: #aeb9cf;
}
html[data-engine="timeflow"] .destination-card[data-tf-overnight] .stay-section {
  background:
    radial-gradient(1.2px 1.2px at 22% 30%, rgba(255, 255, 255, .75), transparent),
    radial-gradient(1px 1px at 45% 18%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.3px 1.3px at 70% 34%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1px 1px at 88% 22%, rgba(255, 255, 255, .5), transparent),
    linear-gradient(180deg, #0a0f1e, #141d35);
  border-top-color: rgba(140, 165, 230, .25);
}
html[data-engine="timeflow"] .destination-card[data-tf-overnight] [data-stay-current]::after {
  content: " · ☾ 过夜";
  color: #9fb4e8;
}

/* ---------- 出发片 ---------- */
html[data-engine="timeflow"] .departure-block {
  margin: 13px -16px 0;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-radius: 0 0 18px 18px;
  background: var(--tf-b-bg, rgba(255, 255, 255, .04));
  transition: background .6s ease;
}
html[data-engine="timeflow"] .destination-card[data-sky-b] .departure-block > span {
  color: color-mix(in srgb, var(--tf-b-ink) 82%, transparent);
}
html[data-engine="timeflow"] .destination-card[data-sky-b] .departure-block strong {
  color: var(--tf-b-ink);
  font-size: 19px;
}

/* ---------- 出发点卡片：出发时刻的天空 ---------- */
html[data-engine="timeflow"] .start-card[data-sky-a] {
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--tf-a-bg);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
}
html[data-engine="timeflow"] .start-card[data-sky-a] .section-label,
html[data-engine="timeflow"] .start-card[data-sky-a] .date-field,
html[data-engine="timeflow"] .start-card[data-sky-a] .time-field {
  color: color-mix(in srgb, var(--tf-a-ink) 80%, transparent);
}
html[data-engine="timeflow"] .start-card[data-sky-a] .place-picker input {
  color: var(--tf-a-ink);
  border-bottom-color: color-mix(in srgb, var(--tf-a-ink) 32%, transparent);
}
html[data-engine="timeflow"] .start-card[data-sky-a] .place-picker input::placeholder {
  color: color-mix(in srgb, var(--tf-a-ink) 45%, transparent);
}
html[data-engine="timeflow"] .start-card[data-sky-a] .place-address {
  color: color-mix(in srgb, var(--tf-a-ink) 76%, transparent);
}
html[data-engine="timeflow"] .start-card[data-sky-a] .date-field input,
html[data-engine="timeflow"] .start-card[data-sky-a] .time-field input {
  color: var(--tf-a-ink);
}
html[data-engine="timeflow"] .start-card[data-sky-a] .start-number { color: var(--tf-a-ink); }
html[data-engine="timeflow"] .start-card[data-sky-a] .search-mark {
  color: color-mix(in srgb, var(--tf-a-ink) 55%, transparent);
}
html[data-engine="timeflow"] .start-card[data-sky-a] .quick-starts > span {
  color: color-mix(in srgb, var(--tf-a-ink) 74%, transparent);
}
html[data-engine="timeflow"] .start-card[data-sky-a] .quick-starts button {
  border-color: color-mix(in srgb, var(--tf-a-ink) 26%, transparent);
  color: color-mix(in srgb, var(--tf-a-ink) 88%, transparent);
  background: color-mix(in srgb, var(--tf-a-ink) 10%, transparent);
}
html[data-engine="timeflow"] .start-card[data-sky-a] .quick-starts button.active {
  border-color: var(--tf-a-ink);
  color: var(--tf-a-ink);
  background: color-mix(in srgb, var(--tf-a-ink) 24%, transparent);
  box-shadow: 0 0 0 1px var(--tf-a-ink), 0 4px 14px color-mix(in srgb, var(--tf-a-ink) 35%, transparent);
  font-weight: 700;
}

/* ---------- 跨天分割线：日出刻度 ---------- */
html[data-engine="timeflow"] .date-divider {
  color: #f0b46c;
  text-shadow: 0 0 12px rgba(255, 177, 77, .35);
}
html[data-engine="timeflow"] .date-divider::before,
html[data-engine="timeflow"] .date-divider::after {
  background: linear-gradient(90deg, transparent, rgba(255, 177, 77, .55), transparent);
}

/* ---------- 已跳过卡片：天空熄灯，恢复底部内边距（停留带隐藏时收边） ---------- */
html[data-engine="timeflow"] .destination-card.is-skipped {
  padding-bottom: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
}

/* ============================================================
   动效层：滚动苏醒 / 新站生长 / 天空交叉淡化
   全走 transform / opacity / filter（可插值），
   尊重 prefers-reduced-motion。
   ============================================================ */

/* ① 滚动即时间流逝：视口外「熄灯」，入视口天空苏醒 */
html[data-engine="timeflow"] .destination-card.tf-preroll {
  opacity: 0;
  transform: translateY(12px);
  filter: saturate(.35) brightness(.78);
}
html[data-engine="timeflow"] .destination-card.tf-inview {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .6s ease,
              transform .6s cubic-bezier(.22, 1, .36, 1),
              filter .75s ease,
              background .6s ease,
              box-shadow .3s ease;
}

/* ② 添加目的地：新站生长入场（按站点序号 stagger） */
html[data-engine="timeflow"] .destination-wrap.tf-enter {
  animation: tf-grow .55s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes tf-grow {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* ③ 改停留时间：出发片「幽灵层」淡出，露出新时刻天空 */
html[data-engine="timeflow"] .departure-block {
  position: relative;
  overflow: hidden;
}
html[data-engine="timeflow"] .tf-skyfade {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: 0 0 18px 18px;
  opacity: 1;
  pointer-events: none;
  transition: opacity .55s ease;
}
html[data-engine="timeflow"] .tf-skyfade.tf-out { opacity: 0; }
html[data-engine="timeflow"] .tf-pop {
  animation: tf-pop .5s cubic-bezier(.22, 1, .36, 1);
}
@keyframes tf-pop {
  from { transform: translateY(9px); opacity: .15; }
  to { transform: none; opacity: 1; }
}

/* 减少动态偏好：全部静默降级 */
@media (prefers-reduced-motion: reduce) {
  html[data-engine="timeflow"] .destination-wrap.tf-enter,
  html[data-engine="timeflow"] .tf-pop { animation: none; }
  html[data-engine="timeflow"] .destination-card.tf-preroll {
    opacity: 1;
    transform: none;
    filter: none;
  }
  html[data-engine="timeflow"] .destination-card.tf-inview { transition: none; }
  html[data-engine="timeflow"] .tf-skyfade { display: none; }
}

/* ============================================================
   行程节律带：按天的 24h 驾驶/停留/过夜分布
   ============================================================ */
html[data-engine="timeflow"] .tf-rhythm[hidden] { display: none; }
html[data-engine="timeflow"] .tf-rhythm {
  margin-top: 14px;
  padding: 14px 15px 15px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .058), rgba(255, 255, 255, .026));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html[data-engine="timeflow"] .tf-rhythm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
html[data-engine="timeflow"] .tf-rhythm-legend {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
  gap: 10px;
  flex-wrap: wrap;
  color: #93a0b8;
  font-size: 10px;
}
@media (max-width: 480px) {
  html[data-engine="timeflow"] .tf-rhythm-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
  html[data-engine="timeflow"] .tf-rhythm-legend { justify-content: flex-start; }
}
html[data-engine="timeflow"] .tf-rhythm-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
html[data-engine="timeflow"] .tf-rhythm-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
html[data-engine="timeflow"] .tf-rhythm-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
html[data-engine="timeflow"] .tf-rhythm-day b {
  display: block;
  color: #e9edf6;
  font: 600 11px/1.3 "DM Mono", monospace;
}
html[data-engine="timeflow"] .tf-rhythm-day span {
  display: block;
  margin-top: 2px;
  color: #78829a;
  font: 500 9px/1.2 "DM Mono", monospace;
  white-space: nowrap;
}
html[data-engine="timeflow"] .tf-rhythm-bar {
  position: relative;
  height: 17px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}
/* 06:00 / 12:00 / 18:00 刻度 */
html[data-engine="timeflow"] .tf-rhythm-bar::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg,
    transparent calc(25% - .5px), rgba(255, 255, 255, .14) calc(25% - .5px) 25%, transparent 25%,
    transparent calc(50% - .5px), rgba(255, 255, 255, .14) calc(50% - .5px) 50%, transparent 50%,
    transparent calc(75% - .5px), rgba(255, 255, 255, .14) calc(75% - .5px) 75%, transparent 75%);
  pointer-events: none;
}
html[data-engine="timeflow"] .tf-rhythm-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
}
html[data-engine="timeflow"] .tf-rb-drive {
  background: linear-gradient(180deg, #ffc46b, #ff9e34);
}
html[data-engine="timeflow"] .tf-rb-stay {
  background: linear-gradient(180deg, #6fd4f6, #3fb0e8);
}
html[data-engine="timeflow"] .tf-rb-overnight {
  background:
    radial-gradient(1px 1px at 30% 35%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1px 1px at 65% 60%, rgba(255, 255, 255, .45), transparent),
    linear-gradient(180deg, #31437a, #232f56);
}
html[data-engine="timeflow"] .tf-rb-latenight {
  background: linear-gradient(180deg, #ff7a7a, #e05252);
  animation: tf-alarm 1.8s ease-in-out infinite;
}
@keyframes tf-alarm {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
html[data-engine="timeflow"] .tf-rhythm-warn {
  margin: 11px 0 0;
  color: #ff98a0;
  font-size: 11px;
  line-height: 1.5;
}
.tf-rhythm-stay-hint { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: left; }
/* 当日风险：独占一行，左对齐 */
html[data-engine="timeflow"] .tf-rhythm-day-warn {
  display: block;
  grid-column: 1 / -1;
  margin-top: -3px;
  color: #ff98a0;
  font: 600 10px/1.45 "Noto Sans SC", sans-serif;
  font-style: normal;
  text-align: left;
}
@media (prefers-reduced-motion: reduce) {
  html[data-engine="timeflow"] .tf-rb-latenight { animation: none; }
}

/* ============================================================
   What-if 出发时间滑块：轨道本身就是一条微缩的 24h 天空
   ============================================================ */
html[data-engine="timeflow"] .tf-whatif {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--tf-a-ink, #98a1b1) 28%, transparent);
}
html[data-engine="timeflow"] .tf-whatif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
html[data-engine="timeflow"] .tf-whatif-head > span {
  color: color-mix(in srgb, var(--tf-a-ink, #98a1b1) 74%, transparent);
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: .12em;
}
html[data-engine="timeflow"] .tf-whatif-head output {
  color: var(--tf-a-ink);
  font: 600 12px/1 "DM Mono", monospace;
  text-shadow: 0 1px 10px color-mix(in srgb, var(--tf-a-ink) 30%, transparent);
}
html[data-engine="timeflow"] .tf-whatif input[type="range"] {
  width: 100%;
  height: 22px;
  margin: 9px 0 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
/* 轨道：深夜→黎明→上午→正午→下午→黄昏→入夜→深夜 */
html[data-engine="timeflow"] .tf-whatif input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    #0d1426 0%, #0d1426 18%,
    #f7a96f 27%,
    #6fb1ea 38%, #4f9be0 50%, #6fa8dc 62%,
    #ff9a55 76%,
    #1c2745 86%, #0d1426 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .08);
}
html[data-engine="timeflow"] .tf-whatif input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45), 0 0 12px rgba(255, 177, 77, .5);
  cursor: grab;
  -webkit-appearance: none;
  appearance: none;
}
html[data-engine="timeflow"] .tf-whatif input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.12);
}
html[data-engine="timeflow"] .tf-whatif input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    #0d1426 0%, #0d1426 18%,
    #f7a96f 27%,
    #6fb1ea 38%, #4f9be0 50%, #6fa8dc 62%,
    #ff9a55 76%,
    #1c2745 86%, #0d1426 100%);
}
html[data-engine="timeflow"] .tf-whatif input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: #ffb14d;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  cursor: grab;
}

/* ============================================================
   时光版分享长图（仅 html[data-engine="timeflow"] 生效）
   布局不动，只换质感：深夜纸面 + 每站一条「抵达时刻天空带」。
   天空带是 timeflow.js 注入的真实元素（html2canvas 不渲染伪元素），
   配色与界面天空引擎同源（PALETTES 的 top→bot 线性渐变）。
   ============================================================ */
html[data-engine="timeflow"] .share-poster {
  background: linear-gradient(180deg, #0a1122 0%, #0e1730 100%);
  color: #e9edf6;
}
html[data-engine="timeflow"] .share-poster .share-kicker,
html[data-engine="timeflow"] .share-poster .share-section-label { color: rgba(233, 237, 246, .55); }
html[data-engine="timeflow"] .share-header h2 { color: #f4f7ff; }
html[data-engine="timeflow"] .share-subtitle { color: rgba(233, 237, 246, .55); }
html[data-engine="timeflow"] .share-custom-title { border-bottom-color: rgba(255, 255, 255, .14); color: #fff; }

/* 天空带（真实元素，可被 html2canvas 捕获） */
.tf-poster-sky {
  position: relative; height: 40px; margin: 0 0 12px;
  overflow: hidden; border-radius: 12px;
}
.tf-poster-cel { position: absolute; border-radius: 50%; }
.tf-poster-star { position: absolute; border-radius: 50%; background: #fff; }

/* 头部天空带：整幅出发时刻天空，出血到海报边缘 */
html[data-engine="timeflow"] .share-header .tf-poster-sky {
  height: 58px; margin: -27px -28px 14px; border-radius: 17px 17px 0 0;
}

/* 站点卡：深色玻璃 + 顶部抵达天空带 */
html[data-engine="timeflow"] .share-station {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .05);
  box-shadow: none;
}
html[data-engine="timeflow"] .share-station .tf-poster-sky {
  height: 34px; margin: -15px -16px 12px; border-radius: 15px 15px 0 0;
}
html[data-engine="timeflow"] .share-station h3 { color: #fff; }
html[data-engine="timeflow"] .share-station-number { color: #ffd98a; }
html[data-engine="timeflow"] .share-station-address { color: rgba(233, 237, 246, .55); }
html[data-engine="timeflow"] .share-station-time strong { color: #fff; }
html[data-engine="timeflow"] .share-station-meta { color: rgba(233, 237, 246, .48); }
html[data-engine="timeflow"] .share-station-stay { color: rgba(233, 237, 246, .72); }
html[data-engine="timeflow"] .share-altitude-warning { color: #f0b67f; }
html[data-engine="timeflow"] .share-station-departure { border-top-color: rgba(255, 255, 255, .12); }
html[data-engine="timeflow"] .share-station-departure strong { color: #fff; }

/* 出发行：直接变成「出发时刻天空带」 */
html[data-engine="timeflow"] .share-station-departure.tf-poster-dep {
  margin-top: 12px; padding: 9px 11px; border-top: 0; border-radius: 10px;
}
html[data-engine="timeflow"] .share-station-departure.tf-poster-dep strong { color: inherit; }

/* 汇总 / 路线 / 连接段 / 页脚：暗色玻璃化 */
html[data-engine="timeflow"] .share-summary {
  border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); box-shadow: none;
}
html[data-engine="timeflow"] .share-summary > div { border-right-color: rgba(255, 255, 255, .10); }
html[data-engine="timeflow"] .share-summary span { color: rgba(233, 237, 246, .55); }
html[data-engine="timeflow"] .share-summary strong { color: #fff; }
html[data-engine="timeflow"] .share-summary-final { border-top-color: rgba(255, 255, 255, .10); }
html[data-engine="timeflow"] .share-summary-final strong { color: #ffd98a; }
html[data-engine="timeflow"] .share-route {
  border-color: rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .05); box-shadow: none;
}
html[data-engine="timeflow"] .share-route-note,
html[data-engine="timeflow"] .share-route-empty { color: rgba(233, 237, 246, .55); }
html[data-engine="timeflow"] .share-route-capturing { color: rgba(233, 237, 246, .55); }
html[data-engine="timeflow"] .share-leg-line { background: rgba(255, 255, 255, .16); }
html[data-engine="timeflow"] .share-leg-arrow { background: #0d1728; color: #ffd98a; }
html[data-engine="timeflow"] .share-leg-route { color: #9fc1ff; }
html[data-engine="timeflow"] .share-footer { border-top-color: rgba(255, 255, 255, .12); color: rgba(233, 237, 246, .45); }
html[data-engine="timeflow"] .share-footer strong { color: rgba(233, 237, 246, .7); }

/* 圆角对齐：停留带/出发片/幽灵层与卡片 19px 圆角同心，
   消除卡片圆角处露出的半透明直角残边（gallery 以 14px 规则覆盖） */
html[data-engine="timeflow"] .destination-card:not(.tf-has-dep) .stay-section,
html[data-engine="timeflow"] .destination-card.tf-has-dep .stay-section,
html[data-engine="timeflow"] .departure-block,
html[data-engine="timeflow"] .tf-skyfade {
  border-radius: 0 0 19px 19px;
}
html[data-engine="timeflow"] .destination-card.tf-has-dep .stay-section {
  overflow: hidden;
}

/* ---------- POI 自动 AI 评价：随天空墨色自适应 ---------- */
html[data-engine="timeflow"] .destination-card[data-sky-a] .poi-review {
  border-color: color-mix(in srgb, var(--tf-a-ink) 20%, transparent);
  background: color-mix(in srgb, var(--tf-a-ink) 8%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .poi-review .section-label {
  color: color-mix(in srgb, var(--tf-a-ink) 68%, transparent);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .poi-review-title { color: var(--tf-a-ink); }
html[data-engine="timeflow"] .destination-card[data-sky-a] .poi-review-body p {
  color: color-mix(in srgb, var(--tf-a-ink) 90%, transparent);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .poi-review-meta {
  color: color-mix(in srgb, var(--tf-a-ink) 60%, transparent);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .poi-review-error { color: #ff9aa1; }
html[data-engine="timeflow"] .destination-card[data-sky-a] .poi-review-retry {
  border-color: color-mix(in srgb, var(--tf-a-ink) 42%, transparent);
  color: var(--tf-a-ink);
  background: color-mix(in srgb, var(--tf-a-ink) 12%, transparent);
}
/* 展开/收起按钮：天空卡上随墨色自适应，避免默认蓝色在亮天空上发飘 */
html[data-engine="timeflow"] .destination-card[data-sky-a] .poi-review-toggle {
  border-color: color-mix(in srgb, var(--tf-a-ink) 36%, transparent);
  color: var(--tf-a-ink);
  background: color-mix(in srgb, var(--tf-a-ink) 8%, transparent);
}

/* 自动推算微标签：天空卡上改为墨色自适应，避免浅灰字在白 pill 上像空白 */
html[data-engine="timeflow"] .destination-card[data-sky-a] .derived-tag {
  color: color-mix(in srgb, var(--tf-a-ink) 78%, transparent);
  background: color-mix(in srgb, var(--tf-a-ink) 12%, transparent);
}
html[data-engine="timeflow"] .destination-card[data-sky-a] .overnight-badge {
  color: color-mix(in srgb, var(--tf-a-ink) 88%, transparent);
  background: color-mix(in srgb, var(--tf-a-ink) 14%, transparent);
}