:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #f7f8f4;
  --muted: rgba(247, 248, 244, .72);
  --panel: rgba(15, 25, 20, .82);
  --line: rgba(255, 255, 255, .14);
  --accent: #ff5a2f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #14231b; }
button { font: inherit; }
.map-shell { position: relative; width: 100%; height: 100%; min-height: 100vh; overflow: hidden; }
.map-ui-layer { position: fixed; inset: 0; z-index: 2147483647; isolation: isolate; pointer-events: none; }

/* 双地图容器全尺寸层叠体系：绝对不用 display:none，彻底杜绝切换尺寸归零白屏 */
#map, #map-3d { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .2s ease; }
#map-3d { z-index: 2; opacity: 1; pointer-events: auto; }
#map { z-index: 1; opacity: 0; pointer-events: none; }

/* 2D 卫星/地图模式 */
body.mode-2d #map { z-index: 2; opacity: 1; pointer-events: auto; }
body.mode-2d #map-3d { z-index: 1; opacity: 0; pointer-events: none; }

.map-header { position: absolute; top: max(20px, env(safe-area-inset-top)); left: 20px; right: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; pointer-events: none; }
.eyebrow { margin: 0 0 6px; color: #d6ebca; font-size: 12px; letter-spacing: .12em; }
.provider-badge, .map-type-menu, .menu-toggle, .fit-track-button, .map-error { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 35px rgba(0, 0, 0, .25); backdrop-filter: blur(12px); }
.provider-badge { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 999px; color: var(--ink); font-size: 12px; white-space: nowrap; }
.provider-dot { width: 8px; height: 8px; border-radius: 50%; background: #58d68d; box-shadow: 0 0 0 4px rgba(88, 214, 141, .16); }
.map-controls { position: absolute; top: 62%; right: max(20px, env(safe-area-inset-right)); z-index: 1001; display: grid; justify-items: end; gap: 10px; pointer-events: auto; }
.map-type-controls { position: relative; display: grid; justify-items: end; }
.tool-button { min-width: 50px; padding: 8px 6px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }
.menu-toggle, .fit-track-button { display: grid; width: 38px; height: 38px; min-width: 38px; place-items: center; padding: 0; border-radius: 50%; color: var(--ink); font-size: 20px; line-height: 1; transition: all .2s ease; }
.fit-track-button { font-size: 19px; }
.fit-track-button svg { display: block; pointer-events: none; }
.map-type-menu { position: absolute; right: 0; bottom: calc(100% + 8px); display: grid; gap: 2px; padding: 4px; border-radius: 12px; }
.map-type-menu .tool-button { min-width: 60px; }
.tool-button.is-active, .tool-button:hover { color: #fff; background: rgba(255, 255, 255, .15); }
.map-error { position: absolute; right: 20px; bottom: 148px; left: 20px; padding: 12px 14px; border-color: rgba(255, 120, 90, .45); border-radius: 12px; color: #ffd1c6; font-size: 12px; }

/* 地图类型切换为普通矢量地图时的浅色高对比度主题 */
body.theme-normal-map {
  --panel: rgba(255, 255, 255, .94);
  --line: rgba(0, 0, 0, .12);
  --ink: #1f6f55;
  --muted: rgba(31, 111, 85, .82);
}
body.theme-normal-map .provider-badge {
  color: #1f6f55;
  border-color: rgba(31, 111, 85, .2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
body.theme-normal-map .eyebrow {
  color: #1f6f55;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .8);
}
body.theme-normal-map .menu-toggle,
body.theme-normal-map .fit-track-button {
  color: #1f6f55;
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(31, 111, 85, .22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}
body.theme-normal-map .map-type-menu {
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}
body.theme-normal-map .map-type-menu .tool-button {
  color: #4a5568;
}
body.theme-normal-map .map-type-menu .tool-button.is-active,
body.theme-normal-map .map-type-menu .tool-button:hover {
  color: #1f6f55;
  background: rgba(31, 111, 85, .12);
  font-weight: 600;
}

/* 天地图 2D 标注 Label 样式强化（绝不设置 transform，避免破坏天地图坐标系统） */
.tdt-label {
  padding: 4px 8px !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35) !important;
  font-weight: 500 !important;
  letter-spacing: .5px !important;
  white-space: nowrap !important;
  border: none !important;
  line-height: 1.4 !important;
}

/* 3D 地形 Marker 与气泡样式 */
.marker-3d-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.marker-3d-bubble {
  padding: 4px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .5px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
  margin-bottom: 2px;
  transform: translateY(-2px);
}
.marker-3d-wrap.is-start .marker-3d-bubble {
  background: #1f6f55;
}
.marker-3d-wrap.is-end .marker-3d-bubble {
  background: #c65a3a;
}
.marker-3d-pin {
  width: 28px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4));
}

@media (min-width: 700px) { .map-controls { right: 28px; } }