* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #0a1018; color: #e7e9ee;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
}
body { display: flex; flex-direction: column; }

/* === Top bar === */
.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #1a2030;
  background: #0a1018;
  z-index: 10;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand .cn { font-size: 18px; font-weight: 500; color: #e7e9ee; }
.brand .en { font-size: 11px; color: #6e7480; letter-spacing: 0.1em; text-transform: uppercase; }

/* Search box — input + dropdown of results */
.search-box {
  position: relative;
  flex: 0 0 auto;
}
.search-box input {
  appearance: none;
  background: #14202e; color: #e7e9ee;
  border: 1px solid #232a38; border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px; font-family: inherit;
  width: 220px;
  outline: none;
  transition: border-color 80ms;
}
.search-box input:focus {
  border-color: #3f5878;
}
.search-box input::placeholder { color: #6e7480; }
.search-results {
  position: absolute; top: 100%; left: 0;
  margin: 4px 0 0; padding: 4px 0;
  list-style: none;
  background: rgba(20,24,32,0.96); backdrop-filter: blur(8px);
  border: 1px solid #2c3445; border-radius: 8px;
  width: 280px; max-height: 360px; overflow-y: auto;
  z-index: 30;
  font-size: 13px;
}
.search-results li {
  padding: 6px 12px;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  border-radius: 4px;
}
.search-results li:hover, .search-results li.active {
  background: #1c2a40;
}
.search-results li .name { flex: 1; }
.search-results li .cn { font-weight: 500; }
.search-results li .en { color: #9aa1ad; font-size: 11px; }
.search-results li .pills { display: flex; gap: 3px; flex-wrap: wrap; }
.search-results li .pill {
  display: inline-flex; padding: 1px 6px; border-radius: 999px;
  font-size: 9px; font-weight: 500; color: #fff;
}
.search-results .empty {
  padding: 8px 12px; color: #6e7480; font-style: italic;
}

/* Highlighted station after a search hit */
@keyframes searchPulse {
  0%, 100% { stroke: #ffae00; stroke-width: 2; opacity: 1; }
  50%      { stroke: #ffae00; stroke-width: 4; opacity: 0.6; }
}
#mapHost svg .search-highlight {
  animation: searchPulse 0.9s ease-in-out 3;
  fill: none;
}

/* Mode toggle (2016 / New / Current) — pill-button group */
.mode-toggle {
  display: flex; gap: 2px; padding: 2px;
  background: #14202e; border-radius: 999px;
  border: 1px solid #232a38;
}
.mode-toggle button {
  appearance: none; border: 0;
  background: transparent; color: #9aa1ad;
  font-size: 12px; padding: 6px 14px;
  border-radius: 999px; cursor: pointer;
  font-family: inherit;
  transition: background 120ms, color 120ms;
}
.mode-toggle button.active { background: #2a3140; color: #f0f3f8; }
.mode-toggle button:hover:not(.active) { color: #e7e9ee; }

/* Stats overlay */
.stats {
  position: absolute;
  top: 60px; right: 14px; z-index: 5;
  background: rgba(20,24,32,0.92); backdrop-filter: blur(8px);
  border: 1px solid #232a38; border-radius: 10px;
  padding: 8px 12px;
  display: flex; gap: 14px;
  font-size: 11px;
}
.stats .stat { display: flex; flex-direction: column; gap: 1px; }
.stats .num { font-size: 16px; font-weight: 500; color: #f0f3f8; tabular-nums: true; }
.stats .num.added { color: #ffae00; }
.stats .lbl { font-size: 10px; color: #7d8390; letter-spacing: 0.04em; text-transform: uppercase; }

.hud { display: flex; gap: 6px; align-items: center; }
.hud button {
  appearance: none; border: 1px solid #232a38;
  background: #14202e; color: #c0c8d2;
  font-size: 16px; line-height: 1; width: 32px; height: 32px;
  border-radius: 8px; cursor: pointer;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: background 80ms, color 80ms;
}
.hud button:hover { background: #1c2a40; color: #fff; }
.hud button:active { transform: scale(0.95); }

.hud input[type=range] {
  appearance: none; width: 110px; height: 4px;
  background: #1a2533; border-radius: 2px; outline: none; cursor: pointer;
  margin: 0 4px;
}
.hud input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: #c0c8d2;
  border: 1px solid #232a38; cursor: pointer;
}
.hud input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #c0c8d2; border: 1px solid #232a38; cursor: pointer;
}

/* Tooltip — small floating panel that follows the cursor on hover */
.tooltip {
  position: fixed; pointer-events: none; z-index: 20;
  background: rgba(20,24,32,0.96); backdrop-filter: blur(8px);
  border: 1px solid #2c3445; border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px; color: #e7e9ee;
  max-width: 220px;
  transition: opacity 80ms;
  opacity: 0;
}
.tooltip.show { opacity: 1; }
.tooltip .cn { font-weight: 500; font-size: 13px; }
.tooltip .en { color: #9aa1ad; font-size: 11px; }
.tooltip .lines { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.tooltip .pill { display: inline-flex; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 500; color: #fff; }

/* === Map stage === */
.stage {
  flex: 1 1 auto; position: relative; overflow: hidden;
  background: #0a1018;
  min-height: 0;
}
.map-host {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  touch-action: none;
}
.map-host.dragging { cursor: grabbing; }
.map-host > svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.loading {
  color: #6e7480; font-size: 14px; pointer-events: none;
}

/* Make stations + clusters obviously hoverable */
#mapHost svg circle[data-cn],
#mapHost svg g[data-station] {
  cursor: pointer;
  transition: filter 100ms ease-out;
}

/* Hover feedback: brighten + glow + thicker stroke */
#mapHost svg circle[data-cn]:hover {
  filter: brightness(1.5) drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9));
  stroke: #ffffff;
  stroke-width: 0.45;
}
#mapHost svg g[data-station]:hover {
  filter: brightness(1.4) drop-shadow(0 0 2px rgba(255, 255, 255, 0.85));
}
#mapHost svg g[data-station]:hover > circle:first-child {
  fill: #ffffff;
  fill-opacity: 0.95;
}
#mapHost svg g[data-station]:hover > circle:not(:first-child) {
  stroke: #ffffff;
  stroke-width: 0.25;
}
/* Airport markers also get a glow */
#mapHost svg g[id="airports"] g:hover {
  filter: brightness(1.3) drop-shadow(0 0 2px rgba(255, 174, 0, 0.7));
  cursor: pointer;
}

/* Closed / renamed (historical) stations — black fill, thin line-color stroke.
   Set data-status="historical" on the <circle> or its parent <g>. */
#mapHost svg circle[data-cn][data-status="historical"],
#mapHost svg g[data-station][data-status="historical"] circle:not(:first-child) {
  fill: #000 !important;
}
#mapHost svg circle[data-cn][data-status="historical"] {
  stroke-width: 0.18;     /* thin */
}
/* Slight dim on the cluster halo when the cluster is historical */
#mapHost svg g[data-station][data-status="historical"] circle:first-child {
  fill-opacity: 0.4;
}

/* === Info panel === */
.info-panel {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(20, 24, 32, 0.96); backdrop-filter: blur(12px);
  border: 1px solid #232a38; border-radius: 10px;
  padding: 14px 16px;
  width: 280px; max-width: calc(100% - 24px);
  z-index: 5;
}
.info-panel .close {
  position: absolute; top: 6px; right: 8px;
  background: transparent; border: 0;
  color: #6e7480; font-size: 22px; line-height: 1;
  cursor: pointer; padding: 4px 8px;
}
.info-panel .close:hover { color: #fff; }
.info-panel h3 { margin: 0 0 4px; font-size: 16px; font-weight: 500; }
.info-panel .en { color: #9aa1ad; font-size: 13px; margin-bottom: 12px; }
.info-panel .lines { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.info-panel .pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  background: #1f2530; color: #fff;
}
.info-panel .meta { font-size: 12px; color: #9aa1ad; line-height: 1.5; }

/* small viewports */
@media (max-width: 700px) {
  .topbar { padding: 8px 10px; }
  .brand .cn { font-size: 15px; }
  .brand .en { font-size: 10px; }
  .info-panel { width: calc(100% - 16px); right: 8px; bottom: 8px; }
}