:root {
  --bg: #0f172a;
  --panel: #1e293b;
  --panel2: #273449;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --done: #34d399;      /* 已走过 */
  --planned: #64748b;   /* 未走过 */
  --active: #fbbf24;    /* 进行中 */
  --danger: #f87171;
  --radius: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: linear-gradient(160deg, #0b1220 0%, #131f38 55%, #0b1220 100%);
  color: var(--text);
  overflow: hidden;
}

#app { display: flex; height: 100vh; }

/* ---------- 侧边栏 ---------- */
#sidebar {
  width: 340px;
  min-width: 340px;
  background: linear-gradient(180deg, #1e293b 0%, #1a2436 70%, #16202f 100%);
  display: flex;
  flex-direction: column;
  border-right: 1px solid #334155;
  z-index: 1000;
}
.side-head { padding: 18px 18px 12px; border-bottom: 1px solid #334155; }
.side-head h1 { font-size: 20px; letter-spacing: 1px; }
.side-head p { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.6; }

.controls {
  padding: 12px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #334155;
  align-items: center;
}
.speed-row {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.speed-row input[type=range] { flex: 1; accent-color: var(--accent); }
.speed-row select {
  flex: 1;
  background: #0f172a;
  color: var(--text);
  border: 1px solid #3b4a63;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
}

.btn {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid #3b4a63;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn:hover { background: #33415c; }
.btn:active { transform: scale(.96); }
.btn.primary { background: #0284c7; border-color: #0ea5e9; }
.btn.primary:hover { background: #0396de; }
.btn.small { padding: 4px 8px; font-size: 12px; }
.btn.on { background: #0e7490; border-color: var(--accent); }

/* ---------- 图例 ---------- */
.legend {
  display: flex;
  gap: 14px;
  padding: 10px 18px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid #334155;
}
.lg { display: flex; align-items: center; gap: 6px; }
.swatch { width: 22px; height: 4px; border-radius: 2px; display: inline-block; }
.swatch.done { background: var(--done); }
.swatch.planned { background: repeating-linear-gradient(90deg, var(--planned) 0 5px, transparent 5px 9px); }
.swatch.active { background: var(--active); }

/* ---------- 行程列表 ---------- */
.list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px 8px;
  font-size: 12px;
  color: var(--muted);
  gap: 6px;
}
.list-head > div { display: flex; gap: 6px; }

#segment-list { list-style: none; overflow-y: auto; flex: 1; padding: 0 10px 10px; }
#segment-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s;
}
#segment-list li:hover { background: var(--panel2); }
#segment-list li.playing { background: #1c3a52; border-color: #0e7490; }
.seg-idx {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  background: var(--panel2);
  color: var(--muted);
  flex-shrink: 0;
}
#segment-list li.done .seg-idx { background: #065f46; color: #a7f3d0; }
.seg-icon { font-size: 18px; flex-shrink: 0; }
.seg-main { flex: 1; min-width: 0; }
.seg-route { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.seg-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.seg-status.done { background: var(--done); }
.seg-status.planned { background: var(--planned); }

/* ---------- 地图 ---------- */
#map-wrap { flex: 1; position: relative; height: 100%; }
#map { width: 100%; height: 100%; background: #05080f; }

/* 电影暗角：四周压暗，聚焦中心 */
#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(2,6,23,.55) 100%);
}

/* 段落字幕卡 */
#title-card {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translate(-50%, -24px);
  z-index: 800;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
  background: rgba(10, 16, 30, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 14px;
  padding: 12px 26px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  min-width: 260px;
}
#title-card.show { opacity: 1; transform: translate(-50%, 0); }
.tc-idx { font-size: 11px; letter-spacing: 3px; color: var(--muted); text-transform: uppercase; }
.tc-route {
  font-size: 22px; font-weight: 700; margin: 4px 0; letter-spacing: 2px;
  background: linear-gradient(90deg, #7dd3fc, #a5f3fc, #f0abfc, #7dd3fc);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shinetext 4s linear infinite;
  filter: drop-shadow(0 0 10px rgba(125,211,252,.45));
}
@keyframes shinetext { to { background-position: -200% 0; } }
.tc-mode { font-size: 13px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; }
.tc-icon { font-size: 18px; }
.tc-note { color: #cbd5e1; }
.tc-status { padding: 1px 8px; border-radius: 999px; font-size: 11px; }
.tc-status.done { background: rgba(52,211,153,.15); color: var(--done); border: 1px solid rgba(52,211,153,.4); }
.tc-status.planned { background: rgba(125,211,252,.12); color: var(--planned); border: 1px solid rgba(125,211,252,.35); }

/* 文字注解：彩色跑马灯 */
#title-card.wide { min-width: 420px; max-width: 560px; }
.tc-desc {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(148,163,184,.2);
  font-size: 14px;
  line-height: 1.7;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: .5px;
}
.tc-desc .mq {
  display: inline-block;
  padding-left: 100%;
  font-weight: 600;
  background: linear-gradient(90deg, #f87171, #fbbf24, #34d399, #38bdf8, #c084fc, #f472b6, #f87171);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(251,191,36,.35));
  animation: marquee 12s linear infinite, rainbow 5s linear infinite;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes rainbow { to { background-position: -300% 0; } }

/* 底部总进度条 */
#progress {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 14px;
  height: 4px;
  background: rgba(100, 116, 139, .3);
  border-radius: 2px;
  z-index: 800;
  pointer-events: none;
}
#progress-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--done), var(--active));
  box-shadow: 0 0 10px rgba(251,191,36,.7);
  transition: width .2s linear;
}
#progress-pips i {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 10px;
  border-radius: 1px;
  transform: translateX(-1px);
}
#progress-pips i.done { background: var(--done); }
#progress-pips i.planned { background: rgba(125,211,252,.6); }

/* ---------- 路线特效（作用于 Leaflet SVG path） ---------- */

/* 未走过：流动虚线 */
.flow-line { stroke-dasharray: 6 10 !important; animation: dashflow 1.4s linear infinite; }
@keyframes dashflow { to { stroke-dashoffset: -16; } }

/* 已走过：辉光 */
.glow-line { filter: drop-shadow(0 0 5px rgba(52,211,153,.85)); }

/* 动画拖尾：金色辉光 */
.trail-glow { filter: drop-shadow(0 0 7px rgba(251,191,36,.95)); }

/* 卫星底图上增强亮度对比 */
.on-satellite .flow-line { opacity: .95; }
.on-satellite .leaflet-tile { filter: saturate(1.05) brightness(.92); }

/* ---------- 移动标记 ---------- */

.moving-marker {
  background: transparent;
  border: none;
  position: relative;
}
.moving-marker .emoji {
  font-size: 27px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.75)) drop-shadow(0 0 10px rgba(251,191,36,.65));
  display: block;
  text-align: center;
  line-height: 40px;
  width: 40px;
}
/* 标记脚下的脉冲光环 */
.moving-marker .pulse-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid rgba(251,191,36,.9);
  animation: ringpulse 1.4s ease-out infinite;
}
@keyframes ringpulse {
  0%   { transform: scale(.5); opacity: 1; }
  100% { transform: scale(3.2); opacity: 0; }
}
.city-marker .dot {
  width: 10px; height: 10px;
  background: #fff;
  border: 2px solid #0284c7;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(56,189,248,.8);
}
.city-label {
  background: rgba(15,23,42,.75);
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 12px;
  white-space: nowrap;
}

/* 移动端 */
@media (max-width: 720px) {
  #app { flex-direction: column; }
  #sidebar { width: 100%; min-width: 0; max-height: 46vh; }
  #map-wrap { height: 54vh; }
  .tc-route { font-size: 17px; }
  #title-card, #title-card.wide { min-width: 200px; max-width: 88vw; padding: 8px 16px; }
  .tc-desc { font-size: 12px; }
}