/* route.html 带路页 — CLIENT_UI_DESIGN_SYSTEM_V1 视觉统一（仅 body.route-page 覆盖） */

body.route-page {
  --gwm-brand: #A64D79;
  --gwm-brand-highlight: #D86CA0;
  --gwm-glass-dark-bg: rgba(31, 33, 38, 0.62);
  --gwm-glass-light-bg: rgba(255, 255, 255, 0.16);
  --gwm-glass-blur: 24px;
  --gwm-glass-border: rgba(255, 255, 255, 0.10);
  --gwm-active-gradient: linear-gradient(135deg, rgba(166, 77, 121, 0.82), rgba(216, 108, 160, 0.48));
  --gwm-active-border: rgba(216, 108, 160, 0.75);
  --gwm-active-glow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 8px 22px rgba(166, 77, 121, 0.24), 0 0 24px rgba(216, 108, 160, 0.16);
  --gwm-func-green: #37C871;
  --gwm-func-yellow: #F2C94C;
  --gwm-func-orange: #FF9E44;
  --gwm-func-red: #FF4D5A;
  --route-nav-h: var(--gwm-tab-bar-h);
  --route-nav-gap: 7px;
  --route-drawer-handle-bottom: calc(var(--route-nav-h) + var(--route-nav-gap));
  --route-toast-bottom: calc(var(--route-drawer-handle-bottom) + 40px + 1em);
  --route-transition-fast: 180ms ease-out;
  /* V1.3 统一梅红视觉语言 */
  --route-plum-border: rgba(166, 77, 121, 0.75);
  --route-plum-glow: 0 0 16px rgba(166, 77, 121, 0.22);
  --route-weather-gradient: linear-gradient(135deg, rgba(166, 77, 121, 0.32), rgba(95, 130, 180, 0.28));
  --route-glass-light: rgba(255, 255, 255, 0.16);
  --route-glass-dark: rgba(31, 33, 38, 0.58);
  --route-glass-blur: 22px;
  --route-plum-text: #D86CA0;
  /* 场景类型主题色（仅表达图层类型，不表达选中） */
  --scene-terrain: #FF6B45;
  --scene-manual: #22B8D6;
  --scene-selected: var(--gwm-active-border);
  --route-track-default: rgba(216, 108, 160, 0.95);
  /* 天气栏 / 抽屉把手栏 — 单层毛玻璃，与底部导航一致 */
  --route-strip-bg: rgba(31, 33, 38, 0.76);
  --route-strip-blur: 24px;
  --route-strip-radius: 12px;
  --route-strip-border: 1px solid rgba(255, 255, 255, 0.10);
  --route-strip-min-h: 37px;
  --route-strip-px: 12px;
  --route-strip-pt: 6px;
  --route-strip-pb: 10px;
  --route-handle-w: 102px;
  /* 地图可用区（扣除底部 Tab）；svh 上限防止 Chrome 底栏挤出内容 */
  --route-map-h: calc(100% - var(--route-nav-h));
  --route-map-h-cap: calc(100% - var(--route-nav-h));
  --route-elev-panel-h: calc(100% / 3);
  --route-drawer-h-tall: calc(100% * 2 / 3);
  --route-drawer-h-small: min(calc(100% * 0.38), 360px);
  --route-weather-total-h: var(--route-strip-min-h);
}

/* §五 页面壳 */
html:has(body.route-page),
body.route-page {
  background: #1F2126 !important;
  width: 100%;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.route-page {
  position: fixed;
  inset: 0;
}

body.route-page .page {
  background: transparent !important;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.route-page .map-wrapper {
  background: transparent !important;
  flex: 0 0 auto !important;
  height: var(--route-map-h) !important;
  max-height: var(--route-map-h-cap) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.route-page #map {
  filter: none !important;
  height: 100%;
  touch-action: none;
  overscroll-behavior: contain;
}

/* §七 地图控件 — 深色毛玻璃圆钮；默认白轮廓图标，激活仅图标玫色 */
body.route-page .tool-btn,
body.route-page .tool-round {
  background: rgba(31, 33, 38, 0.62) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
  transition: transform var(--route-transition-fast), color var(--route-transition-fast), border-color var(--route-transition-fast), box-shadow var(--route-transition-fast);
}

body.route-page .tool-btn:active,
body.route-page .tool-round:active {
  transform: scale(0.96);
}

body.route-page .tool-btn.active,
body.route-page .tool-round.active,
body.route-page #btnLayerToggle.active,
body.route-page #btnNodeToggle.active,
body.route-page #btnNorth.active {
  background: rgba(31, 33, 38, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(216, 108, 160, 1) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
  font-weight: 500;
}

/* 右下操作钮：仅点按瞬间玫色，非持久切换态 */
body.route-page .tool-round.map-tool-pressed {
  color: rgba(216, 108, 160, 1) !important;
}

body.route-page .tool-round svg,
body.route-page .tool-btn svg {
  stroke: currentColor !important;
}

body.route-page .tool-round svg polygon {
  fill: currentColor !important;
  stroke: currentColor !important;
}

body.route-page .tool-round svg path,
body.route-page .tool-btn svg path {
  fill: currentColor;
}

body.route-page .tool-round svg [fill="none"],
body.route-page .tool-btn svg [fill="none"] {
  fill: none !important;
}

body.route-page #btnNodeToggle.active .icon-layerstack .layer {
  background: rgba(216, 108, 160, 1) !important;
}

body.route-page .icon-layerstack .layer {
  background: rgba(255, 255, 255, 0.92) !important;
}

body.route-page #btnNorth .compass-icon,
body.route-page #btnNorth .compass-icon-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

body.route-page #btnNorth .compass-icon-inner {
  transition: transform 0.15s ease;
  transform-origin: 50% 50%;
}

body.route-page #btnNorth svg,
body.route-page #btnLayerToggle svg,
body.route-page #btnNodeToggle svg {
  pointer-events: none;
  color: inherit;
}

body.route-page #btnNorth.active svg,
body.route-page #btnLayerToggle.active svg {
  color: rgba(216, 108, 160, 1);
}

body.route-page #btnOfflineDownload.downloading {
  opacity: 0.92 !important;
  color: #FFFFFF !important;
}

@media (min-width: 769px) {
  body.route-page .page {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* §八 stats-card / 剖面图 — 保留 route.html 原始结构与样式 */
body.route-page .stats-card {
  z-index: 800 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* 剖面打开时隐藏大卡片，避免与小卡片重叠/透视（不改剖面毛玻璃与尺寸） */
body.route-page.route-elev-open .stats-card {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.route-page .stats-card strong {
  color: rgba(216, 108, 160, 0.96) !important;
}

body.route-page .elev-tooltip {
  color: rgba(216, 108, 160, 0.96) !important;
  box-shadow: 0 2px 6px rgba(216, 108, 160, 0.28) !important;
  pointer-events: auto !important;
  z-index: 6 !important;
  cursor: grab !important;
}

body.route-page .elev-tooltip-value {
  color: rgba(216, 108, 160, 1) !important;
}

/* §九 路线标题浮层 */
body.route-page .route-title-overlay {
  background: rgba(31, 33, 38, 0.62) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important;
}

body.route-page .route-title-overlay h1 {
  color: #FFFFFF !important;
}

body.route-page .route-title-overlay small {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* 剖面：贴地图顶，高度 1/3；天气栏底 = 大抽屉顶（1/3 分界线） */
body.route-page .elev-panel {
  top: 0 !important;
  bottom: auto !important;
  height: var(--route-elev-panel-h) !important;
  max-height: var(--route-elev-panel-h) !important;
  min-height: var(--route-elev-panel-h) !important;
  padding: 0 !important;
  padding-bottom: var(--route-weather-total-h) !important;
  box-sizing: border-box !important;
  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transition: box-shadow 0.28s ease, border-radius 0.28s ease;
}

body.route-page .elev-panel.elev-panel--open {
  display: flex !important;
  z-index: 880 !important;
}

body.route-page .elev-panel-header {
  flex: 0 0 auto !important;
  margin: 4px 10px 2px !important;
}

body.route-page #elevCanvas {
  display: block !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* P1 · 联动模式：剖面 + 抽屉全展开，毛玻璃磁吸连接（缝隙 0–4px） */
body.route-page.route-timeline-linked .elev-panel {
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
  margin-bottom: -2px;
}

body.route-page.route-timeline-linked #sceneDrawerPanel.scene-drawer-panel.open {
  margin-top: -2px;
  border-top-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    0 -6px 18px rgba(0, 0, 0, 0.18),
    0 -1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* 磁吸对接：剖面底 + 抽屉顶轻弹靠拢 */
@keyframes routeElevMagneticDock {
  0%   { margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10); }
  58%  { margin-bottom: -5px; box-shadow: 0 14px 28px rgba(216, 108, 160, 0.18); }
  100% { margin-bottom: -2px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); }
}

@keyframes routeDrawerMagneticDock {
  0%   { margin-top: 10px; filter: brightness(0.97); }
  58%  { margin-top: -5px; filter: brightness(1.03); }
  100% { margin-top: -2px; filter: none; }
}

body.route-page.timeline-magnetic-docking.route-timeline-linked .elev-panel {
  animation: routeElevMagneticDock 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.route-page.timeline-magnetic-docking.route-timeline-linked #sceneDrawerPanel.scene-drawer-panel.open {
  animation: routeDrawerMagneticDock 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes routeTimelineSnap {
  0%   { filter: brightness(0.96); }
  55%  { filter: brightness(1.04); }
  100% { filter: none; }
}

body.route-page #sceneDrawerPanel.timeline-snap-bounce.open {
  animation: routeTimelineSnap 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* §十 天气栏 — 高度 +1/5，文字垂直居中，底边贴合无重叠 */
body.route-page .elev-weather-text {
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  touch-action: pan-y !important;
  pointer-events: auto !important;
  padding: var(--route-strip-pt) var(--route-strip-px) var(--route-strip-pb) !important;
  min-height: var(--route-strip-min-h) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.35 !important;
  transform: none !important;
  background: var(--route-strip-bg) !important;
  backdrop-filter: blur(var(--route-strip-blur));
  -webkit-backdrop-filter: blur(var(--route-strip-blur));
  border: none !important;
  border-radius: 0 0 var(--route-strip-radius) var(--route-strip-radius) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* WeatherEngine V1 — 剖面天气栏上沿时间刻度（距离比例，4 点分散） */
body.route-page .elev-wx-ticks {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(var(--route-strip-min-h, 37px) + 1px) !important;
  height: 14px !important;
  z-index: 1000 !important;
  pointer-events: none !important;
}

body.route-page .elev-wx-tick {
  position: absolute !important;
  top: 0 !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1px !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  opacity: 0.82 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

body.route-page .elev-wx-tick.is-start {
  transform: translateX(0) !important;
  align-items: flex-start !important;
}

body.route-page .elev-wx-tick.is-end {
  transform: translateX(-100%) !important;
  align-items: flex-end !important;
}

body.route-page .elev-wx-tick-mark {
  display: block !important;
  width: 1px !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.55) !important;
}

body.route-page .elev-wx-tick-label {
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 400 !important;
}

body.route-page .elev-wx-tick.is-active {
  opacity: 1 !important;
}

body.route-page .elev-wx-tick.is-active .elev-wx-tick-mark {
  background: rgba(255, 255, 255, 0.9) !important;
  height: 5px !important;
}

/* 动态天气区段极淡分界（叠在天气栏内） */
body.route-page .elev-wx-seg-marks {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: var(--route-strip-min-h, 37px) !important;
  z-index: 998 !important;
  pointer-events: none !important;
}

body.route-page .elev-wx-seg-mark {
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  width: 1px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  transform: translateX(-50%) !important;
}

/* §十一 场景抽屉 — 地图区内百分比高度，底边贴地图底（已在 Tab 上方） */
body.route-page #sceneDrawerPanel.scene-drawer-panel {
  bottom: 0 !important;
  height: var(--route-drawer-h-small) !important;
  max-height: 360px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(var(--route-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--route-glass-blur)) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom: none !important;
  border-radius: var(--route-strip-radius) var(--route-strip-radius) 0 0 !important;
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.16) !important;
}

body.route-page #sceneDrawerPanel.scene-drawer-panel.drawer-tall {
  height: var(--route-drawer-h-tall) !important;
  max-height: none !important;
}

body.route-page #sceneDrawerPanel .scene-drawer-header {
  background: var(--route-strip-bg) !important;
  backdrop-filter: blur(var(--route-strip-blur)) !important;
  -webkit-backdrop-filter: blur(var(--route-strip-blur)) !important;
  min-height: var(--route-strip-min-h) !important;
  padding: var(--route-strip-pt) var(--route-strip-px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  border: none !important;
  border-bottom: var(--route-strip-border) !important;
  border-radius: var(--route-strip-radius) var(--route-strip-radius) 0 0 !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
}

body.route-page #sceneDrawerPanel .scene-drawer-header-left {
  color: #FFFFFF !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

body.route-page #sceneDrawerPanel .scene-drawer-header-right {
  color: #FFFFFF !important;
  text-align: right !important;
  justify-content: flex-end !important;
  padding-right: 2px !important;
  font-variant-numeric: tabular-nums;
}

body.route-page #sceneDrawerPanel .drawer-inner,
body.route-page #sceneDrawerPanel .legacy-drawer-inner,
body.route-page #sceneDrawerPanel #dynamicDrawerContent,
body.route-page #sceneDrawerPanel .scene-flow {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.route-page #sceneDrawerPanel .scene-drawer-header-button {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  width: var(--route-handle-w) !important;
  min-width: var(--route-handle-w) !important;
  height: 28px !important;
  position: relative;
}

body.route-page #sceneDrawerPanel .scene-drawer-header-left,
body.route-page #sceneDrawerPanel .scene-drawer-header-right,
body.route-page #sceneDrawerPanel .scene-drawer-header-center {
  display: flex !important;
  align-items: center !important;
}

body.route-page #sceneDrawerPanel .scene-drawer-header-arrow,
body.route-page #sceneDrawerPanel .scene-drawer-header-button .scene-drawer-header-arrow {
  display: none !important;
}

body.route-page #sceneDrawerPanel .scene-drawer-header-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 6px;
  border-radius: 999px;
  background: rgba(220, 230, 245, 0.82);
}

/* §拉手（抽屉关闭）— 相对地图底，Tab 已由 map-wrapper 高度扣除 */
body.route-page .scene-drawer-handle {
  bottom: var(--route-nav-gap) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.route-page .scene-drawer-handle .scene-drawer-button {
  width: var(--route-handle-w) !important;
  min-width: var(--route-handle-w) !important;
  height: 28px !important;
  background: var(--route-strip-bg) !important;
  backdrop-filter: blur(var(--route-strip-blur)) !important;
  -webkit-backdrop-filter: blur(var(--route-strip-blur)) !important;
  border: var(--route-strip-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
  position: relative;
}

body.route-page .scene-drawer-handle .scene-drawer-arrow {
  display: none !important;
}

body.route-page .scene-drawer-handle .scene-drawer-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 6px;
  border-radius: 999px;
  background: rgba(220, 230, 245, 0.82);
}

body.route-page .scene-drawer-handle--active .scene-drawer-button,
body.route-page .scene-drawer-handle--has-selection .scene-drawer-button {
  background: var(--route-strip-bg) !important;
}

body.route-page .scene-drawer-handle--active .scene-drawer-button::before,
body.route-page .scene-drawer-handle--has-selection .scene-drawer-button::before {
  background: rgba(220, 230, 245, 0.92) !important;
}

/* §十二 场景行 — 左缘贴齐抽屉 + 全行 Timeline 光圈 */
body.route-page #sceneDrawerPanel #dynamicDrawerContent,
body.route-page #sceneDrawerPanel .drawer-inner,
body.route-page #sceneDrawerPanel .legacy-drawer-inner {
  overflow-x: visible !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 16px !important;
}

body.route-page #sceneDrawerPanel .scene-flow {
  padding: 0 !important;
  margin: 0 !important;
}

body.route-page #sceneDrawerPanel .scene-flow-table {
  padding: 0 !important;
  margin: 0 !important;
  gap: 6px !important;
  overflow: visible !important;
}

body.route-page #sceneDrawerPanel .scene-flow-table .scene-flow-row,
body.route-page #sceneDrawerPanel .scene-flow-row {
  position: relative;
  overflow: visible !important;
  background: rgba(31, 33, 38, 0.525) !important;
  background-image: none !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 12px 12px 12px 22px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  font-weight: 500;
}

body.route-page #sceneDrawerPanel .scene-flow-table .scene-flow-row:nth-child(even),
body.route-page #sceneDrawerPanel .scene-flow-table .scene-flow-row:nth-child(odd) {
  background: rgba(31, 33, 38, 0.525) !important;
  background-image: none !important;
}

/* 行走进度 current：仅进度条变化，不加玫红框 */
body.route-page #sceneDrawerPanel .scene-flow-row.scene-flow-row-current {
  background: rgba(31, 33, 38, 0.525) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  font-weight: 500;
}

/* 唯一选中框：仅用户手动点击（不含时间线/光圈点亮） */
body.route-page #sceneDrawerPanel .scene-flow-table .scene-flow-row.scene-flow-row-selected,
body.route-page #sceneDrawerPanel .scene-flow-row.scene-flow-row-selected {
  background: rgba(18, 22, 28, 0.62) !important;
  background-image: none !important;
  border: 1.25px solid var(--gwm-active-border) !important;
  box-shadow: var(--gwm-active-glow) !important;
  outline: none !important;
  font-weight: 600;
}

/* 每行 Timeline 光圈：默认熄灭（透明心 + 白圈） */
body.route-page #sceneDrawerPanel .scene-flow-row::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5.25px !important;
  height: 5.25px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.125px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow: none !important;
  filter: none !important;
  z-index: 4;
  pointer-events: none;
}

/* Timeline 竖线：默认熄灭 */
body.route-page #sceneDrawerPanel .scene-flow-row::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.28) !important;
  border: none !important;
  pointer-events: none;
  z-index: 1;
}

body.route-page #sceneDrawerPanel .scene-flow-row:first-child::after {
  top: 50%;
}

body.route-page #sceneDrawerPanel .scene-flow-row:last-child::after {
  bottom: 50%;
}

/* 磁吸联动 / 地图 POI+剖面半联动：第二条位 timeline-lit 点亮 */
body.route-page.route-timeline-linked #sceneDrawerPanel .scene-flow-row.scene-flow-row-timeline-lit::before,
body.route-page.route-poi-elev-sync #sceneDrawerPanel .scene-flow-row.scene-flow-row-timeline-lit::before {
  background: #FFFFFF !important;
  border: 1.125px solid rgba(255, 255, 255, 0.98) !important;
  box-shadow:
    0 0 0 1.5px rgba(216, 108, 160, 0.50),
    0 0 6px rgba(216, 108, 160, 0.80),
    0 0 12px rgba(216, 108, 160, 0.60) !important;
  filter: drop-shadow(0 0 3.75px rgba(216, 108, 160, 0.70));
}

body.route-page.route-timeline-linked #sceneDrawerPanel .scene-flow-row.scene-flow-row-timeline-lit::after,
body.route-page.route-poi-elev-sync #sceneDrawerPanel .scene-flow-row.scene-flow-row-timeline-lit::after {
  background: linear-gradient(
    to bottom,
    rgba(216, 108, 160, 0.55) 0%,
    rgba(216, 108, 160, 0.28) 42%,
    rgba(255, 255, 255, 0.24) 100%
  ) !important;
}

/* 禁止 distance 列历史红三角，圆点已改到行级 ::before */
body.route-page #sceneDrawerPanel .scene-flow-cell-distance::before {
  display: none !important;
  content: none !important;
}

/* 防止 route.html 内联 overflow:hidden 裁切时间线元素 */
body.route-page #sceneDrawerPanel .scene-flow-cell,
body.route-page #sceneDrawerPanel .scene-flow-cell-distance {
  overflow: visible !important;
}

/* 场景行文字 — 全白体系 V1.3，绿色仅留给 km 标签 */
body.route-page #sceneDrawerPanel .scene-flow-title,
body.route-page #sceneDrawerPanel .scene-flow-table .scene-flow-row.scene-flow-row-current .scene-flow-title,
body.route-page #sceneDrawerPanel .scene-flow-header,
body.route-page #sceneDrawerPanel .scene-flow-cell-main,
body.route-page #sceneDrawerPanel .scene-flow-sub-current,
body.route-page #sceneDrawerPanel .scene-flow-length-text-current {
  color: #FFFFFF !important;
  text-shadow: none !important;
}

body.route-page #sceneDrawerPanel .scene-flow-sub {
  color: #FFFFFF !important;
}

body.route-page #sceneDrawerPanel .scene-flow-sub-param,
body.route-page #sceneDrawerPanel .scene-flow-sub-bind,
body.route-page #sceneDrawerPanel .scene-flow-sub-bind.has-cards,
body.route-page #sceneDrawerPanel .scene-flow-sub-bind.no-cards,
body.route-page #sceneDrawerPanel .scene-flow-sub-param.scene-flow-sub-bind.has-cards,
body.route-page #sceneDrawerPanel .scene-flow-sub-param.scene-flow-sub-bind.no-cards,
body.route-page #sceneDrawerPanel .scene-flow-params,
body.route-page #sceneDrawerPanel .scene-flow-bar-label,
body.route-page #sceneDrawerPanel .scene-flow-length-text,
body.route-page #sceneDrawerPanel .scene-flow-metric-text,
body.route-page #sceneDrawerPanel .scene-flow-cell-bar,
body.route-page #sceneDrawerPanel .scene-flow-cell-bar *:not(.scene-flow-distance):not([class*="scene-flow-distance"]) {
  color: #FFFFFF !important;
}

body.route-page #sceneDrawerPanel .scene-flow-bar {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* §十三 距离 / 风险功能色 */
body.route-page .scene-distance--green,
body.route-page .scene-flow-distance-green,
body.route-page #sceneDrawerPanel .scene-flow-distance,
body.route-page #sceneDrawerPanel .scene-flow-distance.scene-flow-distance-green {
  background: var(--gwm-func-green) !important;
  background-color: var(--gwm-func-green) !important;
  color: #FFFFFF !important;
}

/* 场景类型距离色块（terrain / manual 图层） */
body.route-page.route-scene-type-terrain .scene-flow-distance-type,
body.route-page.route-scene-type-terrain #sceneDrawerPanel .scene-flow-distance.scene-flow-distance-type {
  background: var(--scene-terrain) !important;
  background-color: var(--scene-terrain) !important;
  color: #FFFFFF !important;
}

body.route-page.route-scene-type-manual .scene-flow-distance-type,
body.route-page.route-scene-type-manual #sceneDrawerPanel .scene-flow-distance.scene-flow-distance-type {
  background: var(--scene-manual) !important;
  background-color: var(--scene-manual) !important;
  color: #FFFFFF !important;
}

body.route-page .scene-distance--yellow,
body.route-page .scene-flow-distance-yellow {
  background: var(--gwm-func-yellow) !important;
  background-color: var(--gwm-func-yellow) !important;
  color: #1F2126 !important;
}

body.route-page .scene-distance--orange,
body.route-page .scene-flow-distance-orange {
  background: var(--gwm-func-orange) !important;
  background-color: var(--gwm-func-orange) !important;
  color: #FFFFFF !important;
}

body.route-page .scene-distance--red,
body.route-page .scene-flow-distance-red {
  background: var(--gwm-func-red) !important;
  background-color: var(--gwm-func-red) !important;
  color: #FFFFFF !important;
}

body.route-page #sceneDrawerPanel .scene-flow-bar-fill,
body.route-page .scene-flow-bar-fill {
  background: rgba(255, 255, 255, 0.72) !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
}

/* Phase 2: ETA under km + single bar time/distance copy */
body.route-page #sceneDrawerPanel .scene-flow-cell-distance {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}

body.route-page #sceneDrawerPanel .scene-flow-eta,
body.route-page #sceneDrawerPanel .scene-flow-eta-text {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
}

body.route-page #sceneDrawerPanel .scene-flow-eta-icon {
  color: rgba(255, 255, 255, 0.72) !important;
}

body.route-page #sceneDrawerPanel .scene-flow-bar-time,
body.route-page #sceneDrawerPanel .scene-flow-bar-point-eta,
body.route-page #sceneDrawerPanel .scene-flow-bar-point-away,
body.route-page #sceneDrawerPanel .scene-flow-bar-label {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-align: right !important;
  width: 100% !important;
  white-space: nowrap !important;
}

body.route-page #sceneDrawerPanel .scene-flow-cell-bar {
  width: 78px !important;
  flex: 0 0 78px !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 2px !important;
}

body.route-page #sceneDrawerPanel .scene-flow-cell-bar--point {
  gap: 3px !important;
}

body.route-page #sceneDrawerPanel .scene-flow-row.is-point-node .scene-flow-bar-bg {
  display: none !important;
}

/* §十四 POI：默认小白点；选中时三标签窗口（针尖 = 栈底 = 路线落点） */
body.route-page .poi-marker {
  background: transparent !important;
  border: none !important;
}

body.route-page .poi-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 28px;
  overflow: visible;
  pointer-events: auto;
}

body.route-page .poi-foot {
  position: relative;
  width: 28px;
  height: 0;
  flex-shrink: 0;
  overflow: visible;
}

body.route-page .poi-stack:not(.poi-stack--label) .poi-foot {
  height: 2px;
}

body.route-page .poi-stack.poi-stack--label .poi-foot {
  height: 14px;
}

body.route-page .poi-dot {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 11px;
  height: 11px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.38);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  padding: 0;
  margin: 0;
  z-index: 3;
}

body.route-page .poi-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
}

body.route-page .poi-stack .poi-label {
  display: none !important;
  position: relative;
  flex-shrink: 0;
}

body.route-page .poi-stack.poi-stack--label .poi-dot {
  visibility: hidden !important;
}

body.route-page .poi-stack.poi-stack--label .poi-label {
  display: inline-flex !important;
}

body.route-page .poi-stack.poi-stack--current {
  z-index: 1200;
}

body.route-page .poi-stack.poi-stack--adjacent {
  z-index: 1100;
}

body.route-page .poi-label {
  position: relative;
  align-items: center;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  color: #1A1A1A !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
  cursor: pointer;
}

body.route-page .poi-stack.poi-stack--label .poi-label::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 0;
  width: 2px;
  height: 14px;
  transform: translateX(-50%);
  background: rgba(30, 30, 30, 0.72) !important;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

body.route-page .poi-stack.poi-stack--label .poi-label::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 12px;
  width: 72%;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22) !important;
  filter: blur(4px);
  pointer-events: none;
}

body.route-page .poi-label--manual,
body.route-page .poi-label--terrain,
body.route-page .poi-label--weather {
  border-color: rgba(0, 0, 0, 0.10) !important;
}

body.route-page .poi-label--active {
  border: 1.25px solid var(--gwm-active-border) !important;
  color: rgba(216, 108, 160, 1) !important;
  box-shadow: var(--gwm-active-glow) !important;
}

body.route-page .poi-label--active::before {
  background: rgba(216, 108, 160, 0.92) !important;
  box-shadow: 0 1px 3px rgba(216, 108, 160, 0.55) !important;
}

body.route-page .poi-label--active::after {
  background: rgba(216, 108, 160, 0.38) !important;
  filter: blur(5px);
}

/* 三标签窗口：前后节点弱化 */
body.route-page .poi-label--adjacent {
  opacity: 0.78 !important;
  font-weight: 500 !important;
  color: #333333 !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12) !important;
}

body.route-page .poi-label--adjacent::before {
  background: rgba(60, 60, 60, 0.58) !important;
  box-shadow: none !important;
}

body.route-page .poi-label--adjacent::after {
  opacity: 0.45 !important;
  filter: blur(4px);
}

/* §十五 离线 / Toast / Badge */
body.route-page .offline-map-status {
  padding: 2px 4px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  line-height: 1.25;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
  opacity: 0.72;
  transition: opacity 0.35s ease;
}

body.route-page .offline-map-status.status-installed,
body.route-page .offline-map-status.status-ready,
body.route-page .offline-map-status.status-offline_ready {
  color: rgba(221, 255, 232, 0.76);
}

body.route-page .offline-map-status.status-partial,
body.route-page .offline-map-status.status-preparing {
  color: rgba(255, 222, 186, 0.86);
}

body.route-page .offline-map-status.status-not_installed,
body.route-page .offline-map-status.status-offline_incomplete {
  color: rgba(255, 214, 214, 0.90);
}

body.route-page .offline-map-status.status-zoom_out_of_range {
  color: rgba(255, 236, 173, 0.88);
}

body.route-page .offline-map-status.is-faded {
  opacity: 0;
}

body.route-page .route-toast {
  position: fixed !important;
  bottom: var(--route-toast-bottom) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: min(78vw, 280px) !important;
  width: max-content;
  padding: 9px 14px !important;
  background: rgba(31, 33, 38, 0.72) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1250;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20);
}

body.route-page .route-toast.show {
  opacity: 1 !important;
}

body.route-page .cache-status {
  display: none !important;
}

body.route-page .route-load-mode-badge.pkg {
  background: rgba(55, 200, 113, 0.82) !important;
}

body.route-page .route-load-mode-badge.route {
  background: rgba(255, 158, 68, 0.82) !important;
}

/* §十六 偏航 / 回线 */
body.route-page .off-route-alert {
  bottom: var(--route-toast-bottom) !important;
  background: rgba(31, 33, 38, 0.88) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

body.route-page .off-route-icon {
  color: var(--gwm-func-yellow) !important;
}

body.route-page .back-on-track-alert {
  bottom: var(--route-toast-bottom) !important;
  background: rgba(55, 200, 113, 0.88) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #FFFFFF !important;
}

/* §十七 全屏视频 */
body.route-page .video-controls {
  background: rgba(31, 33, 38, 0.72) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

body.route-page .video-btn-icon,
body.route-page .video-btn-close {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 15px;
  transition: transform var(--route-transition-fast), background var(--route-transition-fast);
}

body.route-page .video-btn-icon:active,
body.route-page .video-btn-close:active,
body.route-page .video-btn-speed:active {
  transform: scale(0.96);
}

body.route-page .video-btn-speed {
  border: 1px solid rgba(166, 77, 121, 0.75) !important;
  color: #FFFFFF !important;
  background: rgba(31, 33, 38, 0.48) !important;
}

/* §十八 node_guide 侧滑 */
body.route-page .node-guide-overlay iframe {
  background: #1F2126 !important;
}