/* ═══════════════════════════════════════════════════════════════════
   Veyrun 悦跑 · 自动跑步（地图 / 路线 / 跑态）
   —— 依赖 style.css 的设计 token，:root 里的 --violet / --spring 等
   —— 全部类名以 rt- / run- 打头，不污染既有页面
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── 舞台 ───────────────────────────── */

.run-stage {
  position: relative;
  height: calc(100dvh - 64px);
  min-height: 620px;
  overflow: hidden;
  background: #0a0714;
  isolation: isolate;
}
.run-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 100% at 50% 0%, #17102b 0%, #0a0714 62%),
    #0a0714;
}
/* 底图之上、标注之下的紫色氛围（不挡点击） */
.run-map::after,
.rt-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 350;
  pointer-events: none;
  background:
    radial-gradient(120% 88% at 12% 0%, rgba(124, 58, 237, 0.18), transparent 56%),
    radial-gradient(96% 78% at 102% 104%, rgba(168, 85, 247, 0.13), transparent 58%),
    radial-gradient(80% 70% at 50% 120%, rgba(11, 6, 22, 0.92), transparent 70%);
  mix-blend-mode: screen;
}
/* 四周压暗，视觉收边 */
.run-map::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 351;
  pointer-events: none;
  box-shadow: inset 0 0 140px 40px rgba(6, 3, 14, 0.85);
  background:
    linear-gradient(180deg, rgba(9, 5, 18, 0.55), transparent 22%),
    linear-gradient(0deg, rgba(9, 5, 18, 0.6), transparent 26%);
}

/* 高德栅格瓦片 → 深紫夜图（无 key 时的默认形态） */
.rt-tiles {
  filter: invert(0.94) hue-rotate(186deg) saturate(0.62) brightness(0.84) contrast(1.06);
}
.rt-dark .leaflet-tile-pane { opacity: 0.94; }
.rt-dark .leaflet-control-attribution { display: none; }
.run-map .leaflet-container { background: transparent; outline: none; }
.rt-zooming .rt-tiles { filter: invert(0.94) hue-rotate(186deg) saturate(0.5) brightness(0.76) contrast(1.04); }

/* 官方高德 darkblue 底图直接用，不叠滤镜 */
.rt-amap .amap-tile-pane img { filter: none; }

/* ─────────────────────── 路线 / 标注 ─────────────────────── */

.rt-pin-wrap, .rt-vtx-wrap { background: none; border: 0; }
.rt-pin {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, #c4b5fd 0%, #8b5cf6 38%, #6d28d9 100%);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 6px 18px -4px rgba(109, 40, 217, 0.85),
    0 0 0 6px rgba(124, 58, 237, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #fff;
  font: 700 12.5px/1 ui-rounded, -apple-system, "PingFang SC", sans-serif;
  animation: rtPinIn 520ms var(--spring, cubic-bezier(.34,1.56,.64,1)) both;
}
.rt-pin b { transform: translateY(0.3px); }
@keyframes rtPinIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.6); }
  to   { opacity: 1; transform: none; }
}
.rt-vtx {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #7c3aed;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 0 5px rgba(124, 58, 237, 0.18);
  cursor: grab;
  transition: transform 160ms var(--spring, cubic-bezier(.34,1.56,.64,1));
}
.rt-vtx:active { cursor: grabbing; transform: scale(1.22); }
.leaflet-marker-draggable .rt-vtx { cursor: grab; }

/* 起点光晕 */
.rt-start {
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, #a7f3d0, #10b981 62%, #047857);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.14), 0 6px 16px -4px rgba(4, 120, 87, 0.8);
}

/* GPS 蓝点 */
.rt-gps-ring {
  transform-box: fill-box; transform-origin: center;
  animation: rtGpsPulse 2.6s ease-out infinite;
}
@keyframes rtGpsPulse {
  0%   { opacity: 0.55; transform: scale(0.72); }
  70%  { opacity: 0.05; transform: scale(1.35); }
  100% { opacity: 0;    transform: scale(1.35); }
}
.rt-gps-dot { filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.85)); }
.rt-gps {
  width: 16px; height: 16px; border-radius: 50%;
  background: #38bdf8;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 7px rgba(56, 189, 248, 0.18), 0 0 16px rgba(56, 189, 248, 0.7);
  animation: rtGpsBeat 2.6s ease-out infinite;
}
@keyframes rtGpsBeat {
  0%, 100% { box-shadow: 0 0 0 5px rgba(56,189,248,.22), 0 0 14px rgba(56,189,248,.65); }
  50%      { box-shadow: 0 0 0 12px rgba(56,189,248,.04), 0 0 20px rgba(56,189,248,.5); }
}

/* 流动虚线的蚂蚁线效果 */
.rt-dashline { animation: rtDash 1.6s linear infinite; }
@keyframes rtDash { to { stroke-dashoffset: -17; } }

/* ───────────────────── 控制面板（玻璃浮层） ───────────────────── */

.run-panel {
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 6;
  width: 376px;
  max-height: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(38, 26, 64, 0.86), rgba(19, 12, 34, 0.9));
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(196, 181, 253, 0.16);
  box-shadow:
    0 40px 90px -34px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  animation: rtPanelIn 620ms var(--ease-out, cubic-bezier(.16,.84,.24,1)) both;
}
@keyframes rtPanelIn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.run-panel.scrolled { border-color: rgba(196, 181, 253, 0.24); }

.run-ph {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(196, 181, 253, 0.09);
}
.run-ph .ic {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(160deg, rgba(168, 85, 247, 0.95), rgba(91, 33, 182, 0.95));
  box-shadow: 0 8px 20px -8px rgba(124, 58, 237, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
}
.run-ph h1 { margin: 0; font-size: 16.5px; font-weight: 750; letter-spacing: -0.01em; color: #f5f2ff; }
.run-ph .sub { font-size: 11.5px; color: rgba(196, 181, 253, 0.62); margin-top: 2px; letter-spacing: 0.02em; }

.run-pb { padding: 16px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
.run-pb::-webkit-scrollbar { width: 0; }

/* 字段 */
.rt-field { margin-bottom: 15px; }
.rt-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600;
  color: rgba(214, 205, 245, 0.74);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.rt-label .hint { font-weight: 500; color: rgba(168, 85, 247, 0.85); font-size: 11.5px; }
.rt-label .hint.warn { color: #fbbf24; }
.rt-label .hint.busy { animation: rtBreath 1.4s ease-in-out infinite; }

/* 换个地方跑 */
.rt-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 11px;
  height: 42px;
  border-radius: 13px;
  background: rgba(12, 7, 24, 0.72);
  border: 1px solid rgba(168, 85, 247, 0.16);
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.rt-search:focus-within {
  border-color: rgba(168, 85, 247, 0.46);
  background: rgba(14, 8, 28, 0.9);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}
.rt-search > svg {
  flex: 0 0 auto;
  color: rgba(168, 85, 247, 0.62);
}
.rt-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  outline: none;
  color: #efe8ff;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.01em;
}
.rt-search input::placeholder { color: rgba(150, 136, 195, 0.5); }
.rt-search button {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(140deg, #8b5cf6, #6d28d9);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(124, 58, 237, 0.9);
  transition: transform 160ms cubic-bezier(0.34, 1.4, 0.64, 1), filter 160ms ease;
}
.rt-search button:hover { filter: brightness(1.12); }
.rt-search button:active { transform: scale(0.95); }
.rt-search button:disabled { opacity: 0.6; cursor: default; transform: none; }

@keyframes rtBreath {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* 账号选择 */
.rt-select {
  width: 100%;
  appearance: none; -webkit-appearance: none;
  padding: 12px 34px 12px 14px;
  border-radius: 13px;
  border: 1px solid rgba(196, 181, 253, 0.14);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 13px center,
    rgba(10, 6, 20, 0.6);
  color: #eee7ff;
  font: 600 13.5px/1.3 -apple-system, "PingFang SC", sans-serif;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  outline: none;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.rt-select:hover { border-color: rgba(196, 181, 253, 0.28); }
.rt-select:focus-visible { border-color: rgba(168, 85, 247, 0.7); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22); }
.rt-select option { background: #1a1130; color: #eee7ff; }

.rt-sub {
  margin-top: 7px;
  font-size: 11.5px;
  color: rgba(196, 181, 253, 0.55);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* 步进器 */
.rt-step {
  display: flex; align-items: center; gap: 6px;
  padding: 5px;
  border-radius: 15px;
  background: rgba(10, 6, 20, 0.6);
  border: 1px solid rgba(196, 181, 253, 0.12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.rt-step .m,
.rt-step .p {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px; border: 0;
  background: rgba(124, 58, 237, 0.16);
  color: #ddd6fe;
  font: 600 17px/1 -apple-system, "PingFang SC", sans-serif;
  cursor: pointer;
  transition: transform 170ms var(--spring, cubic-bezier(.34,1.56,.64,1)),
              background 180ms ease, color 180ms ease;
}
.rt-step .m:hover, .rt-step .p:hover { background: rgba(124, 58, 237, 0.3); color: #fff; }
.rt-step .m:active, .rt-step .p:active { transform: scale(0.9); background: rgba(168, 85, 247, 0.45); }
.rt-step .m:disabled, .rt-step .p:disabled { opacity: 0.32; cursor: not-allowed; transform: none; }
.rt-step .v {
  flex: 1; min-width: 0;
  text-align: center;
  font: 750 20px/1 ui-rounded, -apple-system, "SF Pro Display", "PingFang SC", sans-serif;
  font-variant-numeric: tabular-nums;
  color: #fff;
  letter-spacing: -0.02em;
  background: none; border: 0; outline: none;
  width: 100%;
}
.rt-step .v::-webkit-outer-spin-button,
.rt-step .v::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rt-step .u {
  font-size: 12px; color: rgba(196, 181, 253, 0.55); font-weight: 600;
  padding-right: 6px;
}
.rt-step.hero { padding: 7px; }
.rt-step.hero .v { font-size: 24px; }

/* iOS 分段控件 */
.rt-seg {
  position: relative;
  display: flex;
  padding: 3px;
  border-radius: 13px;
  background: rgba(10, 6, 20, 0.62);
  border: 1px solid rgba(196, 181, 253, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
}
.rt-seg .th {
  position: absolute;
  top: 3px; bottom: 3px; left: 0;
  width: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.95), rgba(109, 40, 217, 0.95));
  box-shadow: 0 4px 12px -3px rgba(109, 40, 217, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition: transform 380ms var(--spring, cubic-bezier(.34,1.56,.64,1)), width 380ms var(--spring, cubic-bezier(.34,1.56,.64,1));
  pointer-events: none;
  z-index: 0;
}
.rt-seg.is-init .th { transition: none; }
.rt-seg button {
  position: relative; z-index: 1;
  flex: 1;
  padding: 9px 6px;
  border: 0; background: none;
  border-radius: 10px;
  font: 600 13px/1 -apple-system, "PingFang SC", sans-serif;
  color: rgba(196, 181, 253, 0.66);
  cursor: pointer;
  transition: color 240ms ease;
  white-space: nowrap;
}
.rt-seg button.on { color: #fff; }
.rt-seg button:active { transform: scale(0.985); }

/* 预计数据块 */
.rt-pred {
  border-radius: 15px;
  padding: 13px 15px;
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.14), rgba(124, 58, 237, 0.05));
  border: 1px solid rgba(168, 85, 247, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.rt-pred .row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12.5px;
  padding: 3px 0;
}
.rt-pred .row span:first-child { color: rgba(196, 181, 253, 0.62); }
.rt-pred .row b {
  font-weight: 700; color: #f3efff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.rt-pred .row b em { font-style: normal; font-size: 11.5px; color: rgba(196,181,253,.6); margin-left: 3px; }

/* 主按钮 */
.rt-cta {
  position: relative;
  width: 100%;
  margin-top: 4px;
  padding: 15px 18px;
  border: 0; border-radius: 15px;
  font: 700 15px/1 -apple-system, "PingFang SC", sans-serif;
  letter-spacing: 0.01em;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(180deg, #9d5cff 0%, #7c3aed 46%, #6425d0 100%);
  box-shadow:
    0 18px 36px -14px rgba(124, 58, 237, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24);
  transition: transform 190ms var(--spring, cubic-bezier(.34,1.56,.64,1)), box-shadow 240ms ease, filter 200ms ease;
}
.rt-cta::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.38) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.rt-cta:hover { filter: brightness(1.06); }
.rt-cta:hover::after { transform: translateX(120%); }
.rt-cta:active { transform: scale(0.978); box-shadow: 0 10px 22px -12px rgba(124, 58, 237, 0.8); }
.rt-cta.ghost {
  background: rgba(196, 181, 253, 0.08);
  color: #ddd6fe;
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.18);
}
.rt-cta.ghost:hover { background: rgba(196, 181, 253, 0.14); filter: none; }
.rt-cta.stop { background: linear-gradient(180deg, #f87171, #dc2626 60%, #b91c1c); box-shadow: 0 18px 36px -14px rgba(220, 38, 38, 0.8), inset 0 1px 0 rgba(255,255,255,.3); }
.rt-hint {
  margin-top: 10px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(196, 181, 253, 0.5);
}
.rt-hint a { color: rgba(168, 85, 247, 0.95); text-decoration: none; }

/* 两列小按钮（手动模式的撤销/清空） */
.rt-mini-row { display: flex; gap: 8px; margin-top: 2px; }
.rt-mini {
  flex: 1;
  padding: 9px 10px;
  border-radius: 11px;
  border: 1px solid rgba(196, 181, 253, 0.16);
  background: rgba(196, 181, 253, 0.06);
  color: #d8d0f5;
  font: 600 12px/1 -apple-system, "PingFang SC", sans-serif;
  cursor: pointer;
  transition: background 180ms ease, transform 160ms var(--spring), border-color 180ms ease;
}
.rt-mini:hover { background: rgba(196, 181, 253, 0.12); border-color: rgba(196, 181, 253, 0.3); }
.rt-mini:active { transform: scale(0.97); }
.rt-mini:disabled { opacity: 0.36; cursor: not-allowed; }

/* ─────────────────────── 地图上的浮控 ─────────────────────── */

.run-tools {
  position: absolute;
  right: 22px; top: 22px;
  z-index: 6;
  display: flex; flex-direction: column; gap: 8px;
}
.run-tool {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(196, 181, 253, 0.16);
  background: rgba(22, 14, 40, 0.78);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  color: #d8d0f5;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 180ms var(--spring), background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.run-tool:hover { background: rgba(46, 30, 78, 0.9); color: #fff; border-color: rgba(196, 181, 253, 0.32); }
.run-tool:active { transform: scale(0.93); }
.run-tool.on { background: linear-gradient(180deg, rgba(139, 92, 246, 0.95), rgba(109, 40, 217, 0.95)); color: #fff; border-color: transparent; }
.run-tool.spin svg { animation: rtSpin 900ms linear infinite; }
@keyframes rtSpin { to { transform: rotate(360deg); } }

/* 路线编号胶囊（对齐参考站那种「路线2 2274m」） */
.run-pill {
  position: absolute;
  right: 22px; bottom: 64px;
  z-index: 6;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 85, 0.34);
  background: rgba(58, 34, 12, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fde4b0;
  font: 600 12px/1 -apple-system, "PingFang SC", sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 180ms var(--spring), background 220ms ease, border-color 220ms ease;
}
.run-pill b { font-variant-numeric: tabular-nums; font-weight: 800; }
.run-pill i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fbbf55; box-shadow: 0 0 0 3px rgba(251, 191, 85, 0.2);
}
.run-pill:hover { background: rgba(76, 46, 16, 0.9); border-color: rgba(251, 191, 85, 0.55); }
.run-pill:active { transform: scale(0.97); }
.run-pill.off { border-color: rgba(196, 181, 253, 0.16); background: rgba(22, 14, 40, 0.8); color: rgba(196, 181, 253, 0.6); }
.run-pill.off i { background: rgba(196, 181, 253, 0.45); box-shadow: none; }

/* 底部数据条 */
.run-stats {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex; align-items: stretch;
  border-radius: 18px;
  border: 1px solid rgba(196, 181, 253, 0.15);
  background: rgba(18, 11, 33, 0.82);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.run-stats .s {
  padding: 11px 20px;
  min-width: 92px;
  text-align: center;
}
.run-stats .s + .s { border-left: 1px solid rgba(196, 181, 253, 0.1); }
.run-stats .s b {
  display: block;
  font: 750 16.5px/1.1 ui-rounded, -apple-system, "SF Pro Display", "PingFang SC", sans-serif;
  font-variant-numeric: tabular-nums;
  color: #f6f3ff;
  letter-spacing: -0.015em;
}
.run-stats .s b em { font-style: normal; font-size: 11px; font-weight: 600; color: rgba(196, 181, 253, 0.55); margin-left: 2px; }
.run-stats .s span {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(196, 181, 253, 0.5);
}

/* ───────────────────── 跑态 HUD（进行中） ───────────────────── */

.run-hud {
  position: absolute;
  right: 22px; top: 74px;
  z-index: 7;
  width: 244px;
  padding: 16px 16px 14px;
  border-radius: 20px;
  border: 1px solid rgba(168, 85, 247, 0.28);
  background: linear-gradient(180deg, rgba(44, 22, 78, 0.9), rgba(20, 11, 36, 0.92));
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: 0 30px 64px -26px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  animation: rtPanelIn 460ms var(--ease-out) both;
}
.run-hud .ah {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 650;
  color: rgba(196, 181, 253, 0.7);
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}
.run-hud .ah .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  animation: rtLive 1.9s ease-out infinite;
}
@keyframes rtLive {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.run-hud .big {
  font: 750 34px/1 ui-rounded, -apple-system, "SF Pro Display", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: #fff;
  display: flex; align-items: baseline; gap: 6px;
}
.run-hud .big em {
  font-style: normal; font-size: 13px; font-weight: 600;
  color: rgba(196, 181, 253, 0.55);
  letter-spacing: 0;
}
.run-hud .prog {
  margin-top: 12px;
  height: 5px;
  border-radius: 999px;
  background: rgba(196, 181, 253, 0.12);
  overflow: hidden;
}
.run-hud .prog i {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #a855f7, #c4b5fd 70%, #fff);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.8);
  transition: width 700ms linear;
}
.run-hud .meta {
  display: flex; justify-content: space-between;
  margin-top: 10px;
  font-size: 11.5px;
  color: rgba(196, 181, 253, 0.62);
  font-variant-numeric: tabular-nums;
}
.run-hud .meta b { color: #e9e2ff; font-weight: 700; }

/* 沿路线的跑者光点 */
.rt-runner-wrap { background: none; border: 0; }
.rt-runner {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, #c4b5fd 40%, #7c3aed 100%);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 6px rgba(168, 85, 247, 0.2), 0 0 22px rgba(196, 181, 253, 0.95);
  animation: rtRunner 1.5s ease-in-out infinite;
}
@keyframes rtRunner {
  0%, 100% { box-shadow: 0 0 0 5px rgba(168,85,247,.22), 0 0 18px rgba(196,181,253,.9); }
  50%      { box-shadow: 0 0 0 11px rgba(168,85,247,.06), 0 0 26px rgba(196,181,253,.7); }
}

/* ─────────────────────── 说明区（图下方） ─────────────────────── */

.run-note {
  max-width: 1120px;
  margin: 0 auto;
  padding: 46px 22px 64px;
}
.run-note h2 {
  font-size: 21px; font-weight: 750; letter-spacing: -0.015em;
  color: #f4f1ff; margin: 0 0 6px;
}
.run-note .lead { font-size: 13.5px; color: rgba(196, 181, 253, 0.6); margin: 0 0 26px; }
.run-note .g {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.run-note .c {
  position: relative;
  padding: 20px 18px;
  border-radius: 18px;
  border: 1px solid rgba(196, 181, 253, 0.1);
  background: linear-gradient(180deg, rgba(30, 20, 52, 0.7), rgba(15, 9, 27, 0.7));
  overflow: hidden;
  transition: transform 320ms var(--ease-out), border-color 320ms ease, box-shadow 320ms ease;
}
.run-note .c::before {
  content: '';
  position: absolute; inset: -1px -1px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.5), transparent);
  opacity: 0;
  transition: opacity 320ms ease;
}
.run-note .c:hover {
  transform: translateY(-3px);
  border-color: rgba(168, 85, 247, 0.34);
  box-shadow: 0 26px 50px -30px rgba(124, 58, 237, 0.9);
}
.run-note .c:hover::before { opacity: 1; }
.run-note .c .n {
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(168, 85, 247, 0.9);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.run-note .c h3 { font-size: 14.5px; font-weight: 700; color: #f2eeff; margin: 0 0 6px; }
.run-note .c p { font-size: 12.5px; line-height: 1.68; color: rgba(196, 181, 253, 0.56); margin: 0; }

/* 跑步页底部有统计条，toast 抬高一点免得盖住 */
body.on-run .toasts { bottom: calc(120px + var(--safe-b)); }

/* 底图署名 */
.run-cred {
  position: absolute;
  left: 24px; bottom: 20px;
  z-index: 5;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: rgba(196, 181, 253, 0.38);
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

/* ───────────────────────── 响应式 ───────────────────────── */

@media (max-width: 1080px) {
  .run-panel { width: 344px; left: 18px; top: 18px; }
  .run-stats .s { padding: 10px 15px; min-width: 80px; }
}

@media (max-width: 860px) {
  .run-stage {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: 8px;
  }
  .run-map {
    position: relative;
    height: clamp(320px, 52vh, 460px);
    min-height: 0;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
  }
  .run-panel {
    position: relative;
    left: 0; top: 0;
    width: auto;
    max-height: none;
    margin: -32px 14px 0;
    border-radius: 24px;
    z-index: 6;
  }
  .run-pb { overflow: visible; }
  .run-tools {
    right: 14px;
    top: calc(clamp(320px, 52vh, 460px) - 78px);
    bottom: auto;
    flex-direction: row;
  }
  .run-tool { width: 38px; height: 38px; border-radius: 12px; }
  .run-pill { right: auto; left: 14px; bottom: auto; top: 14px; font-size: 11.5px; padding: 8px 12px 8px 10px; }
  .run-cred { display: none; }
  .run-stats {
    position: relative;
    left: 0; bottom: 0;
    transform: none;
    margin: 16px 14px 0;
    border-radius: 16px;
  }
  .run-stats .s { flex: 1; min-width: 0; padding: 10px 8px; }
  .run-stats .s b { font-size: 15px; }
  .run-hud {
    right: 14px; top: 14px;
    width: 196px;
    padding: 13px 13px 12px;
  }
  .run-hud .big { font-size: 28px; }
  .run-note { padding: 34px 16px 48px; }
  .run-note .g { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 420px) {
  .run-panel { margin-left: 10px; margin-right: 10px; }
  .rt-step .v { font-size: 19px; }
  .run-stats .s span { font-size: 9.5px; }
}

/* 触屏设备去掉悬停位移，避免"粘住" */
@media (hover: none) {
  .run-note .c:hover { transform: none; box-shadow: none; border-color: rgba(196, 181, 253, 0.1); }
  .rt-cta:hover::after { transform: translateX(-120%); }
}

@media (prefers-reduced-motion: reduce) {
  .run-panel, .rt-pin, .run-hud { animation: none !important; }
  .rt-dashline, .rt-gps-ring, .rt-gps-dot, .run-hud .ah .dot, .rt-runner { animation: none !important; }
  .rt-seg .th { transition: none; }
}