:root {
  /* ===== 基色定义（日间）===== */
  --c-bg: #fff;
  --c-bg-alt: #f5f5f5;
  --c-bg-hover: #eee;
  --c-bg-checked: #fafafa;
  --c-text: #333;
  --c-text-alt: #666;
  --c-text-dim: #999;
  --c-border: #e0e0e0;
  --c-border-str: #ccc;
  --c-green: #99cc99;
  --c-green-hover: #80b380;
  --c-green-text: #4a8c4a;
  --c-gray: #ddd;
  --c-yellow: #f0c040;
  --c-blue: #1890ff;
  --c-red: #e53935;

  /* iOS/Android 状态栏与挖孔区（留白区）主题色：
     由 theme-color meta 与 black-translucent 状态栏样式读取 */
  --c-statusbar: #99cc99;

  /* ===== 语义别名 ===== */
  --panel-bg: var(--c-bg);
  --panel-border: var(--c-green);
  --panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  --section-bg: var(--c-bg-alt);
  --section-header-bg: var(--c-bg-alt);
  --section-header-hover: var(--c-bg-hover);
  --section-border: var(--c-border);
  --section-text: var(--c-green-text);
  --section-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  --group-bg: var(--c-bg);
  --group-header-bg: var(--c-bg-alt);
  --group-header-hover: var(--c-bg-hover);
  --group-border: var(--c-border);
  --group-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  --content-bg: var(--c-bg);
  --content-hover-bg: var(--c-bg-alt);
  --content-active-bg: var(--c-bg-hover);
  --content-checked-bg: var(--c-bg-checked);
  --accent: var(--c-green);
  --accent-hover: var(--c-green-hover);
  --accent-lighter: var(--c-green);
  --text-primary: var(--c-text);
  --text-secondary: var(--c-text-alt);
  --text-muted: var(--c-text-dim);
  --text-dim: var(--c-text-dim);
  --text-faint: var(--c-text-dim);
  --border-light: var(--c-border);
  --border-toggle: var(--c-border-str);
  --input-bg: var(--c-bg);
  --input-border: var(--c-border-str);
  --input-color: var(--c-text);
  --link-color: var(--c-blue);
  --status-idle: var(--c-gray);
  --status-loading: var(--c-yellow);
  --status-loaded: var(--c-green);
  --status-error: var(--c-red);
}

/* 深色模式：只需重定义基色 */
[data-theme="dark"] {
  --c-bg: #111;
  --c-bg-alt: #181818;
  --c-bg-hover: #252525;
  --c-bg-checked: #181818;
  --c-text: #eee;
  --c-text-alt: #aaa;
  --c-text-dim: #777;
  --c-border: #333;
  --c-border-str: #3a3a3a;
  --c-green: #88cc88;
  --c-green-hover: #99cc99;
  --c-green-text: #88cc88;
  --c-gray: #555;
  --c-yellow: #c89428;
  --c-blue: #5ab0ff;
  --c-red: #d44c44;
  /* 深色模式下的状态栏/挖孔区颜色，与面板背景保持一致 */
  --c-statusbar: #111111;
  /* 声明深色配色，让滚动条/表单控件等系统 UI 同步变暗 */
  color-scheme: dark;
}

/* 备案号悬浮条（固定右下角，合规要求） */
#beianBar {
  position: fixed;
  bottom: 6px;
  right: 8px;
  z-index: 1100;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  user-select: none;
}
#beianBar a {
  color: inherit;
  text-decoration: none;
}
#beianBar a:hover {
  text-decoration: underline;
  color: #fff;
}

/* 全局重置，优化移动端体验 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  display: flex; /* 保留flex布局 */
  /* 留白区（刘海/挖孔/灵动岛/底部 Home 条）背景随主题切换：
     viewport-fit=cover 下 body 会铺满整屏并覆盖安全区，
     此处背景即安全区可见部分，必须显式绑定主题色 */
  background: var(--c-bg);
  /* 横竖屏 safe-area 自适应：取基础间距和系统安全区中的较大值
     - 竖屏 iOS：top ≈ 50px（灵动岛）、bottom ≈ 34px（Home 条）
     - 横屏 iOS：left/right ≈ 44px（齐刘海两侧）
     - Android 刘海/打孔屏：top/bottom 按系统上报值自动适配 */
  padding-top: max(min(1.6vw, 1vh, 16px), env(safe-area-inset-top));
  padding-right: max(min(1.6vw, 1vh, 16px), env(safe-area-inset-right));
  padding-bottom: max(min(1.6vw, 1vh, 16px), env(safe-area-inset-bottom));
  padding-left: max(min(1.6vw, 1vh, 16px), env(safe-area-inset-left));
  height: 100vh; /* 旧浏览器兜底 */
  height: 100dvh; /* dvh：动态视口高度，避开移动端地址栏的高度跳变 */
  overflow: hidden;
  position: relative; /* 为固定定位元素提供参考 */
}

/* 左侧悬浮图层控制面板（仿天地图样式） */
.layer-panel {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-240px); /* fallback，由 JS 覆盖 */
  width: 240px; /* fallback，由 JS 覆盖 */
  height: 100%;
  background: var(--panel-bg);
  border-right: 1px solid var(--panel-border);
  padding: 8px;
  box-sizing: border-box;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
  z-index: 1666;
  border-radius: max(6px, 0.6vw);
  transition: transform 0.3s ease;
  /* 面板自身不滚动，用 flex 布局让内容区滚动 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 消除 DOM 中空白文本节点在 flex 布局下产生的匿名 flex 项间隙 */
  font-size: 0;
  line-height: 0;
  /* 侧面板整体禁止选中文字，搜索框例外 */
  user-select: none;
  -webkit-user-select: none;
  /* 细滚动条，与面板风格统一 */
  scrollbar-width: thin;
}

/* 为所有直接子元素恢复字体 */
.layer-panel > * {
  font-size: 13px;
  line-height: normal;
}

/* 面板滚动容器：地图设置 + 搜索栏 + 图层列表统一滚动 */
.panel-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

/* 【修复】提升active类优先级，明确覆盖默认transform */
#sidebarToggle:checked ~ .layer-panel {
  transform: translateX(0) !important;
}

/* 点击外部关闭遮罩 */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1665;
  background: transparent;
  display: none;
  cursor: default;
}
#sidebarToggle:checked ~ .sidebar-backdrop {
  display: block;
}

/* 面板拖拽时全局状态 */
body.resizing-panel {
  cursor: ew-resize !important;
  user-select: none !important;
}

/* 悬浮触发按钮（logo/手柄） */
.layer-trigger {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 40px;
  height: 80px;
  background: var(--panel-bg);
  user-select: none;
  border: 1px solid var(--border-light);
  border-left: none;
  border-radius: 0 8px 8px 0;
  box-shadow: 2px 0 5px var(--panel-shadow);
  opacity: 0.85;
  z-index: 1000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  color: var(--text-primary);
  font-size: 14px;
  transition:
    opacity 0.2s,
    background 0.2s;
}

.layer-trigger:hover,
.layer-trigger:active {
  opacity: 1;
}

.layer-trigger:active {
  background: var(--content-hover-bg);
  color: var(--text-primary);
}

.layer-panel h3 {
  font-size: 15px;
  color: var(--section-text);
  margin: 0 0 2px 0;
  padding: 10px 12px 4px;
  flex-shrink: 0;
}
#selectAllRow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

/* ========== 面板通用模块系统 ========== */
/* 所有侧边栏内部区块使用统一间距和视觉规范 */
.panel-module {
  margin-bottom: 6px;
}

/* ========== 面板标题栏 ========== */
.panel-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.title-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ========== 摘要行标题（flex:1 占满剩余空间） ========== */
.summary-title {
  flex: 1;
}

/* ========== 隐藏文件输入 ========== */
.file-input-hidden {
  display: none;
}

/* ========== 图层组面板视觉层次 ========== */
/* 主折叠区（"静态矢量要素"） */
details.layer-section {
  border: 1px solid var(--section-border);
  border-radius: 8px;
  background: var(--section-bg);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
details.layer-section[open] {
  box-shadow: 0 1px 4px var(--section-shadow);
}
details.layer-section > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  background: var(--section-header-bg);
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--section-text);
  list-style: none;
  transition: background 0.15s;
}
details.layer-section > summary::-webkit-details-marker {
  display: none;
}
details.layer-section > summary:hover {
  background: var(--section-header-hover);
}
details.layer-section[open] > summary {
  border-bottom: 1px solid var(--section-border);
}

/* ========== 图层组折叠区（"全球板块构造"等） ========== */
details.layer-group {
  border: 1px solid var(--group-border);
  border-radius: 7px;
  margin: 0;
  background: var(--group-bg);
  overflow: hidden;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
details.layer-group:hover {
  border-color: #c8dcc8;
  box-shadow: 0 1px 4px var(--group-shadow);
}
details.layer-group[open] {
  border-color: var(--group-border);
  box-shadow: 0 1px 3px var(--group-shadow);
}
details.layer-group > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px 7px 12px;
  background: var(--group-header-bg);
  cursor: pointer;
  user-select: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--section-text);
  list-style: none;
  transition: background 0.15s;
  border-bottom: 1px solid transparent;
}
details.layer-group[open] > summary {
  border-bottom-color: var(--group-border);
}
details.layer-group > summary::-webkit-details-marker {
  display: none;
}
details.layer-group > summary:hover {
  background: var(--group-header-hover);
}

/* 图层组展开箭头 */
.layer-group-arrow {
  display: inline-block;
  font-size: 9px;
  color: var(--accent-lighter);
  transition: transform 0.2s;
  flex-shrink: 0;
  width: 12px;
  text-align: center;
}
details.layer-group[open] > summary .layer-group-arrow,
details.layer-section[open] > summary .layer-group-arrow {
  transform: rotate(90deg);
}

/* 图层组名 */
.layer-group-name {
  flex: 1;
  font-weight: 600;
  color: var(--section-text);
}

/* 图层组子项容器（缩进） */
.layer-group-children {
  padding: 4px 0 6px 14px;
  background: var(--content-bg);
}

/* 无分组图层的占位容器 */
.layer-plain {
  padding: 2px 0 4px 10px;
  border: 1px solid var(--group-border);
  border-radius: 7px;
  background: var(--group-bg);
}

/* 图层项 */
.layer-item {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  margin: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 0.15s,
    box-shadow 0.15s;
  gap: 6px;
  position: relative;
}
.layer-item:hover {
  background: var(--content-hover-bg);
}
.layer-item:active {
  background: var(--content-active-bg);
}
/* 图层勾选时，左侧加一条小绿条 */
.layer-item:has(input[type="checkbox"]:checked) {
  background: var(--content-checked-bg);
}
.layer-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid var(--input-border);
  border-radius: 3px;
  position: relative;
  outline: none;
  background: var(--panel-bg);
  transition: all 0.15s ease;
}
.layer-item input[type="checkbox"]:checked {
  border-color: transparent;
  background: var(--layer-color, #4caf50);
}
.layer-item input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}
.layer-item label {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 图层加载状态指示器 */
.layer-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: auto;
  flex-shrink: 0;
  transition: background 0.3s;
}
.layer-status[data-status="idle"] {
  background: var(--status-idle);
}
.layer-status[data-status="loading"] {
  background: var(--status-loading);
  animation: statusPulse 0.8s ease-in-out infinite;
}
.layer-status[data-status="loaded"] {
  background: var(--accent);
}
.layer-status[data-status="error"] {
  background: var(--status-error);
}
@keyframes statusPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* 组状态指示器 */
.group-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin: 0 3px;
  line-height: 1;
  font-size: 0;
  transition: background 0.2s;
}
.group-status[data-status="idle"] {
  background: var(--status-idle);
}
.group-status[data-status="loading"] {
  background: var(--status-loading);
  animation: groupStatusPulse 0.8s ease-in-out infinite;
}
.group-status[data-status="loaded"] {
  background: var(--accent);
}
.group-status[data-status="partial"] {
  background: var(--status-loading);
}
.group-status[data-status="error"] {
  background: var(--status-error);
}

@keyframes groupStatusPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* 全选复选框 */
#selectAllLayers {
  margin-left: auto;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.group-select-all {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ========== 图层要素面板内容区 ========== */
.layer-section-content {
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#map {
  flex: 1; /* 保留flex布局的自适应 */
  height: 100%;
  width: min(96%, 100vw - 6px);
  margin: 0 auto;
  position: relative;
  border: min(1.6px, 1vh) dashed var(--panel-border);
  border-radius: max(6px, 0.6vw);
  overflow: hidden;
  touch-action: pan-x pan-y;
  transition: box-shadow 0.3s ease;
}

#map:active {
  box-shadow: 0 0 16px rgba(106, 170, 106, 0.4);
}

/* 站点标签 Tooltip */
.leaflet-tooltip.station-label-tooltip {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #8b7355;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  font-size: 11px;
  color: #5a4a3a;
  padding: 2px 6px;
  white-space: nowrap;
}

.leaflet-tooltip.station-label-tooltip::before {
  border-right-color: #8b7355;
}

.leaflet-tooltip.station-label-tooltip.top::before {
  border-top-color: #8b7355;
}

/* ========== 搜索框（侧边栏内，介于地图设置与图层要素之间） ========== */
.search-bar {
  position: relative;
  flex-shrink: 0;
  padding: 0 8px;
}

.search-bar input[type="text"] {
  width: 100%;
  padding: 7px 28px 7px 10px;
  font-size: 13px;
  border: 1px solid var(--border-toggle);
  border-radius: 6px;
  background: var(--content-bg);
  color: var(--text-primary);
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.search-bar input[type="text"]:disabled {
  background: var(--content-checked-bg);
  border-color: var(--border-toggle);
  color: var(--text-faint);
  cursor: not-allowed;
  opacity: 0.8;
}

.search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) translate(0, -1px);
  font-size: 12px;
  color: var(--text-faint);
  cursor: pointer;
  display: none;
  user-select: none;
  padding: 4px;
  border-radius: 25%;
  transition:
    color 0.15s,
    background 0.15s;
}
.search-clear:hover {
  color: var(--status-error);
  font-size: 16px;
  /* background: #f0e0e0; */
}
.search-clear.visible {
  display: block;
}

.search-bar input[type="text"]:focus {
  border-color: var(--accent);
  background: var(--panel-bg);
}

.search-results {
  display: none;
  background: var(--panel-bg);
  border: 1px solid var(--group-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px var(--panel-shadow);
  max-height: 65vh;
  overflow-y: auto;
  position: absolute;
  top: calc(100% + 4px);
  left: 5px;
  right: 5px;
  z-index: 2000;
}

.search-results.open {
  display: block;
}

.search-result-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: var(--content-hover-bg);
}

.search-result-tag {
  flex-shrink: 0;
  font-size: 12px;
  color: #fff;
  background: var(--accent-lighter);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}

.search-result-text {
  color: var(--text-primary);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.search-result-text mark {
  background: #ffe066;
  color: var(--text-primary);
  border-radius: 2px;
  padding: 0 1px;
}

.search-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}

/* 天地图地名搜索按钮 */
.search-empty .tdt-search-btn {
  margin-top: 8px;
  display: inline-block;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
  background: var(--content-bg);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  transition: background 0.12s;
}
.search-empty .tdt-search-btn:hover {
  background: var(--content-hover-bg);
}

/* 搜索结果「查看更多」分页按钮 */
.search-loadmore {
  padding: 10px 12px;
  font-size: 12px;
  text-align: center;
  color: var(--accent, #2f9e7f);
  cursor: pointer;
  border-top: 1px solid var(--border-light);
  transition: background 0.12s;
  user-select: none;
}
.search-loadmore:hover {
  background: var(--content-hover-bg);
}

/* 侧边栏右侧拖拽手柄（透明，hover 微绿） */
.panel-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 12px;
  cursor: ew-resize;
  z-index: 10;
  touch-action: none;
  background: transparent;
  transition: background 0.2s;
}
.panel-resize-handle:hover,
.panel-resize-handle.active {
  background: rgba(106, 170, 106, 0.15);
}

/* ========== 开关折叠区 ========== */
.toggle-section {
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--content-bg);
  flex-shrink: 0;
}

.toggle-section summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--section-text);
  padding: 8px 10px;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}

.toggle-section summary::-webkit-details-marker {
  display: none;
}

.toggle-section summary::before {
  content: "▶";
  font-size: 10px;
  color: var(--accent-lighter);
  transition: transform 0.2s;
  display: inline-block;
}

.toggle-section[open] summary::before {
  transform: rotate(90deg);
}

.toggle-section summary:hover {
  background: var(--content-hover-bg);
  border-radius: 6px 6px 0 0;
}

.toggle-section:not([open]) summary:hover {
  border-radius: 6px;
}

.toggle-section .toggle-body {
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

/* 操作按钮（置于 toggle body 内，flex 自适应排列） */
.toggle-section .action-btn {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  background: var(--input-bg);
  color: var(--input-color);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toggle-section .action-btn:hover {
  background: var(--content-hover-bg);
}

/* 开关折叠区内部的 toggle bar */
.toggle-section .toggle-bar {
  flex: 1 1 120px;
  min-width: 120px;
  padding: 5px 4px 6px;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  margin-bottom: 0;
  position: relative;
}

.cluster-toggle-text {
  font-size: 12px;
  color: var(--text-secondary);
  position: relative;
  z-index: 0; /* 文字在按钮下方 */
  padding-right: 48px; /* 给按钮留出空间 */
}

.cluster-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 文字左、按钮右 */
  cursor: pointer;
  position: relative;
}

/* 隐藏原生 checkbox */
.cluster-toggle-label input[type="checkbox"] {
  display: none;
}

/* 开关滑块 - 绝对定位在右边，在文字上方 */
.cluster-toggle-switch {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 20px;
  background: var(--status-idle);
  border-radius: 10px;
  transition: background 0.2s;
  z-index: 1; /* 在文字上方 */
}

.cluster-toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--panel-bg);
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 开启状态 */
.cluster-toggle-label input[type="checkbox"]:checked + .cluster-toggle-switch {
  background: var(--accent);
}

.cluster-toggle-label
  input[type="checkbox"]:checked
  + .cluster-toggle-switch::after {
  transform: translateX(16px);
}

/* 分类标题行 */
.toggle-category {
  width: 100%;
  flex: 0 0 100%;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-lighter);
  padding: 5px 2px 2px;
  margin-top: 2px;
  border-top: 1px solid var(--border-light);
  letter-spacing: 0.3px;
  user-select: none;
}
.toggle-category:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* ========== 加载缓冲动画 ========== */
#loadingOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
#loadingOverlay.active {
  display: flex;
}
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: loadingSpin 0.8s linear infinite;
}
@keyframes loadingSpin {
  to {
    transform: rotate(360deg);
  }
}
#loadingMessage {
  color: #fff;
  font-size: 15px;
  font-family: sans-serif;
  letter-spacing: 1px;
}

/* 版本号（图层面板底部） */
.app-version {
  color: var(--text-faint);
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  padding: 4px;
  user-select: none;
  cursor: pointer;
  transition: color 0.15s;
}
.app-version:hover {
  color: var(--text-muted);
}

/* 版本号清理菜单（版号上方） */
.refresh-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px 4px;
  flex-shrink: 0;
}

/* 版本号固定在面板底部 */
#appVersion {
  flex-shrink: 0;
}
.refresh-menu button {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  text-align: center;
  background: var(--content-checked-bg);
  color: var(--text-primary);
  transition: background 0.12s;
}
.refresh-menu button:hover {
  background: var(--content-hover-bg);
}

/* 悬浮窗右下角缩放按钮 */
.popup-zoom-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition:
    background 0.15s,
    transform 0.1s;
  padding: 0;
}
.popup-zoom-btn:hover {
  background: var(--accent-hover);
  transform: scale(1.1);
}

/* ========== 帮助图标（绿色问号） ========== */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin: 0 4px;
  flex-shrink: 0;
  transition: background 0.15s;
  user-select: none;
}
.help-icon:hover {
  background: var(--accent-hover);
}

/* 大号帮助图标（标题栏 20px 版本） */
.help-icon-lg {
  width: 20px;
  height: 20px;
  text-decoration: none;
}

/* ========== 本地图层提示 ========== */
.local-hint {
  font-size: 11px;
  color: var(--text-faint);
  padding: 2px 4px 6px;
}

/* ========== 空状态提示 ========== */
.empty-hint {
  font-size: 12px;
  color: var(--text-dim);
  padding: 10px 4px;
  text-align: center;
  line-height: 1.7;
}
.empty-hint-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ========== 上传区域 ========== */
.upload-area {
  padding: 10px 0 0;
  margin-top: 6px;
}

/* 投点按钮独占一行（点击展开投点编辑器） */
#pointDropAnchor {
  margin-bottom: 6px;
}

/* ========== 上传/文件夹二合一按钮行 ========== */
.upload-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ========== 上传/文件夹/投点按钮 ========== */
#pointDropAnchor .pd-btn,
.upload-btn,
.folder-btn {
  width: 100%;
  padding: 8px 12px;
  background: var(--content-bg);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-primary);
  transition: background 0.15s;
}
#pointDropAnchor .pd-btn:hover,
.upload-btn:hover,
.folder-btn:hover {
  background: var(--content-hover-bg);
}

.upload-btn,
.folder-btn {
  flex: 1 1 140px;
  min-width: 0;
}
.folder-btn:hover {
  background: var(--content-hover-bg);
}

/* 侧边栏图钉按钮 */
.sidebar-pin-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 0 4px;
  opacity: 0.35;
  transition:
    opacity 0.2s,
    transform 0.2s;
  line-height: 1;
  flex-shrink: 0;
}
.sidebar-pin-btn:hover {
  opacity: 0.7;
}
.sidebar-pin-btn.active {
  opacity: 1;
  transform: rotate(45deg);
}

/* 侧边栏钉住状态：面板进入文档流，地图让出空间 */
body.sidebar-pinned {
  overflow: hidden;
}
body.sidebar-pinned #layerPanel {
  position: relative !important;
  transform: none !important;
  transition: none !important;
  flex-shrink: 0;
  height: 100%;
  z-index: auto;
  margin-right: 2px;
}
body.sidebar-pinned #map {
  flex: 1 !important;
  width: auto !important;
  margin: 0 !important;
}
body.sidebar-pinned .layer-trigger {
  display: none !important;
}

/* ========== 打印样式（window.print() 导出图片）========== */
@media print {
  /* 隐藏所有非地图元素 */
  body.sidebar-pinned #layerPanel,
  #layerPanel,
  #layerTrigger,
  .leaflet-control-container,
  .color-picker-popup,
  .hover-tooltip,
  .leaflet-tooltip,
  .leaflet-popup {
    display: none !important;
  }

  /* 地图占满整页 */
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #map,
  .map-container,
  #app-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* 确保底图图层可见 */
  .leaflet-layer,
  .leaflet-tile,
  .leaflet-tile-loaded,
  .leaflet-overlay-pane svg,
  .leaflet-overlay-pane canvas {
    visibility: visible !important;
    display: block !important;
  }

  /* 强制打印背景色（底图瓦片）*/
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ========== 深色模式 ========== */

/* ===== DEM 高程渲染控制 ===== */
.dem-controls {
  padding: 8px 12px;
}
.dem-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.dem-upload-btn {
  display: inline-block;
  padding: 4px 10px;
  background: #1a73e8;
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.dem-upload-btn:hover {
  background: #1557b0;
}
.dem-remove-btn {
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 13px;
}
.dem-remove-btn:hover {
  background: #b71c1c;
}
.dem-opacity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.dem-opacity-row input[type="range"] {
  flex: 1;
  height: 4px;
}
.dem-status {
  font-size: 12px;
  min-height: 1.4em;
  word-break: break-all;
}
.dem-colormode-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.dem-colormode-row select {
  flex: 1;
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 12px;
  background: #fff;
}