/* ==========================================================
   GeoLibre Lite 样式表
   布局：全屏地图 + 浮动玻璃面板（左侧功能栏 / 底部数据表 / 图例 / 状态栏）
   桌面端：侧栏从左侧滑入；移动端（≤767px）：侧栏变为底部抽屉
   ========================================================== */

:root {
  --gl-navbar-h: 56px;
  --gl-status-h: 0px;
  --gl-panel-bg: rgba(255, 255, 255, .94);
  --gl-panel-border: rgba(15, 23, 42, .14);
  --gl-accent: #0d6efd;
  --gl-radius: 12px;
  --gl-shadow: 0 6px 24px rgba(15, 23, 42, .16);
}

html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: #0b1e3a;
}

/* ---------- 顶部导航（单行、永不换行） ---------- */
.gl-navbar {
  height: var(--gl-navbar-h);
  min-height: var(--gl-navbar-h);
  padding: 0 10px;
  background: linear-gradient(90deg, #0b2a5b, #14509b);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  z-index: 1030;
}
.gl-navbar-inner {
  display: flex;
  flex-wrap: nowrap;           /* 关键：禁止换行，杜绝按钮溢出错位 */
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.gl-navbar-left { display: flex; align-items: center; gap: 6px; flex: none; }
.gl-brand {
  display: flex; align-items: center; gap: 5px;
  font-size: 17px; font-weight: 700; letter-spacing: .5px;
  color: #fff; margin: 0; white-space: nowrap;
}
.gl-brand-sub { font-weight: 400; color: rgba(255, 255, 255, .75); }
.gl-navbar-acts {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;            /* 极窄屏兜底：横向滚动而非换行溢出 */
  scrollbar-width: none;
  padding: 2px;
}
/* 下拉菜单展开时解除裁剪（overflow 非 visible 的祖先会裁掉 dropdown-menu） */
.gl-navbar-acts:has(.dropdown-menu.show) { overflow: visible; }
.gl-navbar-acts::-webkit-scrollbar { display: none; }
.gl-act, .gl-icon-btn { flex: none; white-space: nowrap; }
.gl-style-select {
  flex: none;
  max-width: 150px;
  min-width: 96px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}
.gl-style-select option { color: #212529; }

/* ---------- 地图容器 ---------- */
#map {
  position: fixed;
  top: var(--gl-navbar-h);
  bottom: var(--gl-status-h);
  left: 0; right: 0;
  background: #aadaff;
}
#map .amap-logo, #map .amap-copyright { z-index: 2 !important; }

/* ---------- 通用玻璃面板 ---------- */
.gl-panel {
  position: fixed;
  background: var(--gl-panel-bg);
  border: 1px solid var(--gl-panel-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow);
  /* 性能优化：去掉 backdrop-filter（压在 WebGL canvas 上的实时模糊非常昂贵） */
  z-index: 1000;
}

/* ---------- 左侧功能面板（可见性统一由 body.sidebar-open 控制） ---------- */
.gl-sidebar {
  top: calc(var(--gl-navbar-h) + 10px);
  left: 10px;
  bottom: 44px;   /* 抬离左下角高德 logo，不再遮挡 */
  width: 344px;
  max-width: calc(100vw - 20px);
  display: flex;
  flex-direction: column;
  padding: 10px;
  transform: translateX(-115%);
  opacity: 0;
  pointer-events: none;
  transition: transform .28s ease, opacity .28s ease;
}
body.sidebar-open .gl-sidebar {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.gl-close-sidebar { border-radius: 8px; }
.gl-pills { gap: 4px; }
.gl-pills .nav-link { padding: 5px 10px; font-size: 13px; color: #334155; border-radius: 8px; }
.gl-pills .nav-link.active { background: var(--gl-accent); color: #fff; }
.gl-tab-content { flex: 1; overflow-y: auto; overflow-x: hidden; margin-top: 10px; padding-right: 4px; }
.gl-hint { font-size: 12px; color: #64748b; line-height: 1.6; }

/* 工具按钮（标绘/测量） */
.gl-tool-btn {
  font-size: 13px;
  padding: 7px 6px;
  background: #f1f5f9;
  border: 1px solid var(--gl-panel-border);
  color: #334155;
  border-radius: 8px;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.gl-tool-btn:hover { background: #e2e8f0; }
.gl-tool-btn.active { background: var(--gl-accent); border-color: var(--gl-accent); color: #fff; }
.gl-tool-btn.active i { color: #fff; }

/* 图层列表 */
.gl-layer-item {
  display: flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid var(--gl-panel-border);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .06);
}
.gl-layer-item.hidden-layer { opacity: .55; }
.gl-layer-item.active-layer { border-color: var(--gl-accent); box-shadow: 0 0 0 2px rgba(13, 110, 253, .15); }
.gl-layer-dot { width: 14px; height: 14px; border-radius: 4px; flex: none; border: 1px solid rgba(0, 0, 0, .2); }
.gl-layer-name { font-size: 13px; font-weight: 600; color: #1e293b; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.gl-layer-meta { font-size: 11px; color: #94a3b8; white-space: nowrap; }
.gl-layer-acts { display: flex; gap: 2px; flex: none; }
.gl-layer-acts .btn { padding: 2px 6px; font-size: 12px; border: none; color: #475569; }
.gl-layer-acts .btn:hover { background: #e2e8f0; }
.gl-layer-acts .btn.danger:hover { color: #dc3545; background: #fee2e2; }

/* ---------- 底部数据表面板 ---------- */
.gl-bottom {
  left: 10px; right: 10px;
  bottom: calc(var(--gl-status-h) + 10px);
  height: 46vh;
  padding: 12px;
  display: flex; flex-direction: column;
  transform: translateY(calc(100% + 60px));
  transition: transform .3s ease;
}
body.table-open .gl-bottom { transform: translateY(0); }

.gl-table-wrap { flex: 1; overflow: auto; border: 1px solid var(--gl-panel-border); border-radius: 8px; background: #fff; }
.gl-table { margin: 0; font-size: 12.5px; }
.gl-table thead th {
  position: sticky; top: 0; z-index: 5;
  background: #f1f5f9; white-space: nowrap;
  border-bottom: 2px solid #cbd5e1;
  user-select: none;
}
.gl-table thead th.sortable { cursor: pointer; }
.gl-table thead th.sortable:hover { color: var(--gl-accent); }
.gl-table thead th .bi { font-size: 11px; }
.gl-filter-row th { padding: 2px 4px; background: #f8fafc; position: sticky; top: 32px; z-index: 4; }
.gl-colfilter { min-width: 70px; font-size: 11px; padding: 2px 6px; }
.gl-table td { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.gl-table td.gl-cell-act, .gl-table th.gl-cell-act { position: sticky; right: 0; background: #fff; border-left: 1px solid var(--gl-panel-border); }
.gl-table thead th.gl-cell-act { background: #f1f5f9; }
.gl-table tbody tr.row-selected { background: #e0edff !important; }
.gl-table tbody tr.row-active { background: #fff3cd !important; }
.gl-table tbody tr { cursor: default; }
.gl-table .btn { padding: 1px 5px; font-size: 12px; border: none; color: #475569; }
.gl-table .btn:hover { background: #e2e8f0; color: #0d6efd; }

/* 统计区 */
.gl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gl-stats table { font-size: 12px; background: #fff; border: 1px solid var(--gl-panel-border); border-radius: 8px; }
.gl-stats caption { caption-side: top; font-weight: 600; font-size: 12px; color: #334155; padding: 4px 2px; text-align: left; }
.gl-stats th, .gl-stats td { padding: 3px 8px; white-space: nowrap; }
.gl-stats .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; border: 1px solid rgba(0, 0, 0, .15); }

/* ---------- 图例（支持点击标题折叠） ---------- */
.gl-legend {
  left: 10px;
  bottom: 78px;   /* 抬高避开左下角比例尺与高德 logo */
  width: 230px;
  max-height: 40vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 1005;
}
body.sidebar-open .gl-legend { left: 364px; }
body.table-open .gl-legend { display: none !important; }
.gl-legend-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  font-size: 13px; font-weight: 600; color: #1e293b;
  cursor: pointer; user-select: none;
}
.gl-legend-head .bi-chevron-down { transition: transform .2s; margin-left: auto; }
.gl-legend.collapsed .gl-legend-head .bi-chevron-down { transform: rotate(-90deg); }
.gl-legend.collapsed .gl-legend-body { display: none; }
.gl-legend-body { overflow-y: auto; padding: 0 12px 10px; font-size: 12px; color: #334155; }
.gl-legend-layer { margin-bottom: 8px; }
.gl-legend-layer b { font-size: 12px; color: #1e293b; }
.gl-legend-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.gl-legend-row .sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .2); flex: none; }
.gl-legend-row .sw.line { height: 4px; border-radius: 2px; }
.gl-legend-row .sw.dot { border-radius: 50%; }

/* ---------- 几何编辑浮动条 ---------- */
.gl-editbar {
  position: fixed;
  top: calc(var(--gl-navbar-h) + 12px);
  left: 50%; transform: translateX(-50%);
  max-width: 92vw;
  background: rgba(15, 23, 42, .88);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 1040;
  box-shadow: var(--gl-shadow);
  /* 性能优化：去掉 backdrop-filter */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* ---------- 加载遮罩 ---------- */
.gl-mask {
  position: fixed; inset: 0;
  background: #0b1e3a;
  color: #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  /* 低于 Bootstrap 弹窗(1055)与遮罩背板(1050)，保证 Key 配置弹窗可交互 */
  z-index: 1040;
  transition: opacity .4s;
}
.gl-mask.fade-out { opacity: 0; pointer-events: none; }

/* ---------- Toast ---------- */
.gl-toastwrap { position: fixed; top: calc(var(--gl-navbar-h) + 10px); right: 12px; z-index: 2000; width: 340px; max-width: 90vw; }
.gl-toastwrap .toast { background: rgba(255, 255, 255, .97); }

/* ---------- 地图覆盖物 ---------- */
.gl-dot {
  display: block;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  cursor: pointer;
}
.gl-pin { width: 22px; height: 30px; position: relative; cursor: pointer; }
.gl-pin::before {
  content: '';
  position: absolute; left: 3px; top: 0;
  width: 16px; height: 16px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--c, #e6194b);
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
}
.gl-pin::after {
  content: '';
  position: absolute; left: 8.5px; top: 4.5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, .95);
}
.gl-label {
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(15, 23, 42, .2);
  color: #0f172a;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  font-variant-numeric: tabular-nums;
}
.gl-pulse-wrap { position: relative; width: 18px; height: 18px; }
.gl-pulse-wrap::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(13, 110, 253, .35);
  animation: glPulse 1.4s ease-out infinite;
}
.gl-pulse-wrap::after {
  content: '';
  position: absolute; left: 5px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gl-accent);
  border: 2px solid #fff;
}
@keyframes glPulse {
  0%   { box-shadow: 0 0 0 0 rgba(13, 110, 253, .5); }
  100% { box-shadow: 0 0 0 18px rgba(13, 110, 253, 0); }
}

/* ---------- 扩展点符号 / 文本标绘 / 聚合 / 箭头 ---------- */
.gl-symw {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .12s ease;
}
.gl-dot, .gl-pin, .gl-symw { transition: transform .12s ease, filter .12s ease; }
.gl-dot:hover, .gl-pin:hover, .gl-symw:hover {
  transform: scale(1.28);
  filter: drop-shadow(0 0 4px rgba(13, 110, 253, .95)) brightness(1.1);
  z-index: 300;
}
.gl-text {
  font-weight: 700;
  white-space: nowrap;
  padding: 1px 5px;
  cursor: pointer;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 1px 2px rgba(0, 0, 0, .45);
  border-radius: 6px;
  transition: transform .12s ease;
}
.gl-text:hover { background: rgba(13, 110, 253, .14); transform: scale(1.06); }
.gl-ptext { font-size: 11px; opacity: .85; white-space: nowrap; text-shadow: 0 0 2px #fff, 0 0 2px #fff; pointer-events: none; }
.gl-cluster {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(13, 110, 253, .85);
  border: 2px solid #fff;
  color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.gl-arrow { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.gl-label.multiline { white-space: normal; text-align: center; line-height: 1.5; }
.gl-label.live { border-color: #1677ff; color: #1677ff; font-weight: 600; }

/* 信息窗体 */
.amap-info-content { border-radius: 10px !important; font-size: 13px; }
.gl-iw { min-width: 220px; max-width: 300px; }
.gl-iw h6 { margin-bottom: 6px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.gl-iw table { font-size: 12px; width: 100%; max-height: 160px; overflow-y: auto; display: block; }
.gl-iw td { padding: 2px 6px; vertical-align: top; word-break: break-all; white-space: normal; }
.gl-iw td.k { color: #64748b; white-space: nowrap; }
.gl-iw .gl-iw-acts { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.gl-iw .gl-iw-acts .btn { font-size: 12px; padding: 2px 8px; }
.gl-iw .coords { color: #94a3b8; font-size: 11px; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* 样式弹窗规则列表 */
.gl-rules { max-height: 220px; overflow-y: auto; border: 1px dashed var(--gl-panel-border); border-radius: 8px; padding: 6px 8px; }
.gl-rule-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.gl-rule-row .form-control-color { width: 40px; padding: 2px; }
.gl-rule-row .gl-rule-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 属性编辑行 */
.gl-prop-row { display: flex; gap: 6px; margin-bottom: 6px; }
.gl-prop-row .k { flex: 2; }
.gl-prop-row .v { flex: 3; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .45); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .7); }
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================
   移动端响应式（≤767px）：侧栏变底部抽屉、加大触控目标、
   输入框 16px 防 iOS 聚焦缩放、精简状态栏
   ========================================================== */
@media (max-width: 767.98px) {
  :root {
    --gl-navbar-h: 48px;
    --gl-status-h: 26px;
  }
  .gl-navbar { padding: 0 6px; }
  .gl-navbar-left { gap: 4px; }
  .gl-brand { font-size: 15px; }
  .gl-navbar-acts { gap: 4px; }
  .gl-act, .gl-icon-btn { padding: 6px 8px; }
  .gl-style-select { max-width: 104px; min-width: 88px; }

  /* 侧栏 → 底部抽屉 */
  .gl-sidebar {
    top: auto;
    left: 6px; right: 6px;
    bottom: calc(var(--gl-status-h) + 6px);
    width: auto;
    height: 54vh;
    padding: 8px 10px;
    border-radius: 16px 16px 10px 10px;
    transform: translateY(118%);
  }
  body.sidebar-open .gl-sidebar { transform: none; }
  body.sidebar-open .gl-legend { display: none !important; }

  /* 底部数据表全宽加高 */
  .gl-bottom {
    left: 6px; right: 6px;
    bottom: calc(var(--gl-status-h) + 6px);
    height: 66vh;
    padding: 10px;
  }

  /* 图例收窄 */
  .gl-legend { left: 6px; width: auto; max-width: 56vw; }

  /* 触控目标加大 */
  .gl-tool-btn { padding: 11px 6px; font-size: 14px; }
  .gl-layer-acts .btn { padding: 6px 9px; font-size: 14px; }
  .gl-pills .nav-link { padding: 8px 12px; font-size: 14px; }
  .gl-layer-item { padding: 10px; }

  /* 输入 16px 防 iOS 聚焦自动缩放 */
  .gl-sidebar input, .gl-sidebar select,
  .gl-bottom input, .gl-bottom select,
  .gl-sidebar .form-control, .gl-sidebar .form-select,
  .gl-bottom .form-control, .gl-bottom .form-select { font-size: 16px !important; }
  .gl-colfilter { font-size: 12px !important; }

  /* 统计区单列 */
  .gl-stats { grid-template-columns: 1fr; }


  .gl-toastwrap { top: calc(var(--gl-navbar-h) + 6px); right: 8px; width: calc(100vw - 16px); }
  .gl-editbar { font-size: 12px; padding: 6px 10px; }
}

/* 超窄屏（≤374px）：进一步压缩 */
@media (max-width: 374.98px) {
  .gl-style-select { max-width: 92px; min-width: 80px; }
  .gl-navbar-acts { gap: 3px; }
  .gl-act, .gl-icon-btn { padding: 5px 6px; }
}

/* ==========================================================
   GeoLibre 重构新增：图层列表行 / 标注工具条 / 标注列表 /
   测量面板 / 右侧样式面板 / 覆盖物补充
   ========================================================== */

/* ---------- 图层列表行（拖拽排序 + 不透明度 + 操作） ---------- */
.gl-layer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  margin-bottom: 6px;
  background: #fff;
  border: 1px solid var(--gl-panel-border);
  border-radius: 10px;
  transition: box-shadow .15s, border-color .15s, opacity .15s;
  user-select: none;
}
.gl-layer-row:hover { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }
.gl-layer-row.active-layer { border-color: var(--gl-accent); box-shadow: 0 0 0 2px rgba(13, 110, 253, .15); }
.gl-layer-row.hidden-layer { opacity: .55; }
.gl-layer-row.dragging { opacity: .45; border-style: dashed; }
.gl-layer-row.drag-over { border-top: 2px solid var(--gl-accent); }
.gl-grip { cursor: grab; color: #94a3b8; font-size: 14px; flex: none; }
.gl-grip:active { cursor: grabbing; }
.gl-layer-main { flex: 1; min-width: 0; cursor: pointer; }
.gl-layer-line1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gl-layer-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(0,0,0,.06); }
.gl-layer-name {
  font-size: 13px; font-weight: 600; color: #1e293b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gl-layer-line2 { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.gl-op-slider { flex: 1; min-width: 56px; height: 14px; --bs-form-range-thumb-w: 12px; }
.gl-op-slider::-webkit-slider-thumb { width: 12px; height: 12px; }
.gl-op-slider::-moz-range-thumb { width: 12px; height: 12px; }
.gl-layer-meta { font-size: 11px; color: #94a3b8; white-space: nowrap; flex: none; }
.gl-layer-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.gl-layer-acts .btn { padding: 4px 7px; font-size: 14px; color: #475569; border: none; border-radius: 8px; }
.gl-layer-acts .btn:hover { background: #f1f5f9; color: #0f172a; }
.gl-layer-row .badge { font-size: 10px; padding: 2px 5px; vertical-align: 1px; }

/* ---------- 标注工具条（地图上方） ---------- */
.gl-annobar {
  position: fixed;
  top: calc(var(--gl-navbar-h) + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 8px;
  background: var(--gl-panel-bg);
  border: 1px solid var(--gl-panel-border);
  border-radius: 12px;
  box-shadow: var(--gl-shadow);
  /* 性能优化：去掉 backdrop-filter（压在 WebGL canvas 上的实时模糊非常昂贵） */
  z-index: 1000;
  max-width: calc(100vw - 20px);
  overflow-x: auto;
  scrollbar-width: none;
}
.gl-annobar::-webkit-scrollbar { display: none; }
.gl-annobar .btn {
  padding: 5px 8px;
  font-size: 15px;
  color: #334155;
  border: none;
  border-radius: 8px;
  flex: none;
  line-height: 1;
}
.gl-annobar .btn:hover { background: #e2e8f0; }
.gl-annobar .btn.active { background: var(--gl-accent); color: #fff; }
.gl-annobar .form-control-color { padding: 3px; width: 32px; height: 28px; flex: none; cursor: pointer; }
.gl-annobar .form-select { padding: 3px 22px 3px 8px; font-size: 12px; height: 28px; flex: none; }
.gl-annobar-title { font-size: 13px; color: #475569; padding: 0 3px 0 4px; flex: none; }
.gl-annobar-sep { width: 1px; height: 20px; background: var(--gl-panel-border); margin: 0 3px; flex: none; }

/* ---------- 标注 Elements 列表 ---------- */
.gl-anno-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  margin-bottom: 5px;
  background: #fff;
  border: 1px solid var(--gl-panel-border);
  border-radius: 9px;
}
.gl-anno-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.gl-anno-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gl-anno-name { font-size: 12.5px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-anno-sub { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-anno-row .btn { padding: 3px 7px; font-size: 13px; color: #64748b; border: none; }
.gl-anno-row .btn:hover { background: #f1f5f9; color: #dc2626; }

/* ---------- 测量面板 ---------- */
.gl-ms-readout {
  background: #f8fafc;
  border: 1px solid var(--gl-panel-border);
  border-radius: 10px;
  padding: 8px 10px;
  min-height: 40px;
}
.gl-ms-big { font-size: 19px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.gl-ms-sub { font-size: 11.5px; color: #64748b; margin-top: 2px; line-height: 1.5; }
.gl-ms-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  margin-bottom: 5px;
  background: #fff;
  border: 1px solid var(--gl-panel-border);
  border-radius: 9px;
}
.gl-ms-row > i { color: #1565c0; font-size: 14px; flex: none; }
.gl-ms-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gl-ms-name { font-size: 12.5px; font-weight: 600; color: #1e293b; }
.gl-ms-row .btn { padding: 3px 7px; font-size: 13px; color: #64748b; border: none; }
.gl-ms-row .btn:hover { background: #f1f5f9; color: #dc2626; }

/* 测量顶点标记（地图覆盖物） */
.gl-ms-vtx {
  width: 10px; height: 10px;
  background: #fff;
  border: 2.5px solid #1565c0;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  pointer-events: none;
}

/* ---------- 右侧样式面板（GeoLibre Styling） ---------- */
.gl-stylepanel {
  top: calc(var(--gl-navbar-h) + 10px);
  right: 10px;
  bottom: calc(var(--gl-status-h) + 10px);
  width: 308px;
  max-width: calc(100vw - 20px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  transform: translateX(115%);
  opacity: 0;
  pointer-events: none;
  transition: transform .28s ease, opacity .28s ease;
  overflow-y: auto;
}
.gl-stylepanel.open { transform: none; opacity: 1; pointer-events: auto; }
.gl-sp-title { display: flex; gap: 6px; margin-bottom: 6px; }
.gl-sp-title .form-control { font-weight: 600; }
.gl-sp-meta { font-size: 11.5px; color: #94a3b8; margin-bottom: 8px; }
.gl-sp-sec { border: 1px solid var(--gl-panel-border); border-radius: 10px; margin-bottom: 8px; background: #fff; overflow: hidden; }
.gl-sp-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  background: #f8fafc;
  user-select: none;
}
.gl-sp-head:hover { background: #f1f5f9; }
.gl-sp-head i:first-child { color: var(--gl-accent); }
.gl-sp-head .chev { margin-left: auto; font-size: 12px; color: #94a3b8; transition: transform .18s; }
.gl-sp-sec.collapsed .chev { transform: rotate(-90deg); }
.gl-sp-body { padding: 10px; border-top: 1px solid var(--gl-panel-border); }
.gl-sp-sec.collapsed .gl-sp-body { display: none; }
.gl-sp-val { font-size: 11.5px; color: #64748b; min-width: 38px; text-align: right; flex: none; }
.gl-sp-rule { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #334155; padding: 2px 0; }
.gl-sp-rule .sw { width: 16px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); flex: none; }
.gl-sp-rule .sw.dot { border-radius: 50%; height: 12px; width: 12px; }
.gl-sp-preview { max-height: 168px; overflow-y: auto; border: 1px dashed var(--gl-panel-border); border-radius: 8px; padding: 6px 8px; }
.gl-sp-filter { border: 1px solid var(--gl-panel-border); border-radius: 8px; padding: 7px; margin-bottom: 6px; background: #f8fafc; }

/* ---------- 覆盖物补充（GeoLibre 注记） ---------- */
.gl-text { font-weight: 700; white-space: nowrap; text-shadow: 0 1px 3px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.7); cursor: pointer; }
.gl-note {
  max-width: 180px;
  padding: 6px 9px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #78350f;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  cursor: pointer;
  word-break: break-word;
}
.gl-lbl {
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.gl-arrow.big { border-bottom-width: 12px; border-left-width: 7px; border-right-width: 7px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.gl-ptext { font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px rgba(255,255,255,.8); }

/* ---------- GeoEditor 手柄 ---------- */
.gl-rot-handle {
  width: 16px; height: 16px;
  background: #1565c0;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
  cursor: grab;
}
.gl-rot-handle:active { cursor: grabbing; }
.gl-sp-filter .row { margin: 0; }

/* ---------- 移动端补充（≤767px） ---------- */
@media (max-width: 767.98px) {
  .gl-annobar { top: calc(var(--gl-navbar-h) + 6px); left: 6px; right: 6px; transform: none; justify-content: flex-start; padding: 4px 6px; }
  .gl-annobar .btn { padding: 7px 9px; font-size: 16px; }
  .gl-stylepanel {
    top: auto;
    left: 6px; right: 6px;
    bottom: calc(var(--gl-status-h) + 6px);
    width: auto;
    max-height: 64vh;
    border-radius: 16px 16px 10px 10px;
    transform: translateY(118%);
  }
  .gl-stylepanel.open { transform: none; }
  body.stylepanel-open .gl-legend { display: none !important; }
  .gl-ms-big { font-size: 17px; }
  .gl-sp-body { padding: 8px; }
  .gl-anno-row .btn, .gl-ms-row .btn { padding: 6px 9px; font-size: 14px; }
}

/* ==========================================================
   图层系统（GeoLibre 图层体系）— 组树 / 拖拽 / 右键菜单 / 图例
   ========================================================== */

/* 拖拽手柄与色板 */
.gl-handle { flex: none; cursor: grab; color: #b6c2d2; padding: 0 1px; font-size: 13px; }
.gl-handle:active { cursor: grabbing; }
.gl-swatch { display: inline-flex; flex-direction: column; gap: 2px; flex: none; padding: 2px 0; }
.gl-swatch i { display: block; width: 14px; height: 4px; border-radius: 2px; border: 1px solid rgba(0,0,0,.18); }

/* 拖拽反馈 */
.gl-layer-item.dragging { opacity: .45; border-style: dashed; }
.gl-layer-item.drop-above { box-shadow: 0 -2px 0 var(--gl-accent); }
.gl-group-body.drop-into { outline: 2px dashed var(--gl-accent); outline-offset: -2px; border-radius: 8px; background: rgba(13,110,253,.05); }

/* 图层组树 */
.gl-group-block { margin-bottom: 6px; }
.gl-group-header {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px; border-radius: 8px; cursor: default;
  background: rgba(148, 163, 184, .12); border: 1px solid rgba(148, 163, 184, .25);
}
.gl-group-header .gl-layer-name { font-weight: 700; }
.gl-group-header .gl-collapse { padding: 0 3px; border: none; font-size: 12px; color: #64748b; }
.gl-group-body { padding: 2px 0 2px 10px; }
.gl-group-body .gl-layer-item { margin: 3px 0; border-left: 2px solid #e2e8f0; }

/* 图层主区域可点 */
.gl-layer-main { min-width: 0; flex: 1 1 auto; cursor: pointer; }

/* 自定义右键 / 更多菜单 */
.gl-ctx {
  position: fixed; z-index: 3000; min-width: 168px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .18); padding: 4px;
  animation: glCtxIn .1s ease;
}
@keyframes glCtxIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.gl-ctx-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 10px; border: none; background: none; border-radius: 7px;
  font-size: 13px; color: #1e293b; text-align: left; cursor: pointer; white-space: nowrap;
}
.gl-ctx-item i { font-size: 13px; color: #64748b; width: 15px; }
.gl-ctx-item:hover { background: #eff6ff; color: #0d6efd; }
.gl-ctx-item:hover i { color: #0d6efd; }
.gl-ctx-item.danger { color: #b91c1c; }
.gl-ctx-item.danger:hover { background: #fef2f2; color: #dc2626; }
.gl-ctx-item.danger i { color: #ef4444; }
.gl-ctx-sep { height: 1px; margin: 4px 6px; background: #e2e8f0; }

/* 地图右键菜单：双坐标系行 */
.gl-ctx-coord {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px 3px; font-size: 12px;
}
.gl-ctx-tag {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 1px 5px; border-radius: 5px; color: #fff;
}
.gl-ctx-coord:first-child .gl-ctx-tag { background: #0d6efd; }
.gl-ctx-coord:nth-child(2) .gl-ctx-tag { background: #16a34a; }
.gl-ctx-val {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: #1e293b; white-space: nowrap;
}
.gl-ctx-copy {
  flex: none; margin-left: auto; border: none; background: none;
  cursor: pointer; color: #64748b; padding: 2px 5px; border-radius: 5px;
  font-size: 12px; line-height: 1;
}
.gl-ctx-copy:hover { color: #0d6efd; background: #eff6ff; }

/* 导航起终点图标 */
.gl-navpin {
  width: 26px; height: 26px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.gl-navpin span {
  transform: rotate(45deg);
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.gl-navpin-from { background: #16a34a; }
.gl-navpin-to { background: #dc2626; }

/* 标签引擎标签（GeoLibre Labels） */
.gl-lb {
  font-weight: 600; white-space: nowrap; pointer-events: none;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ===== 侧边栏 GeoEditor 工具格（标注页） ===== */
.ge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ge-grid .btn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 2px; font-size: 11px; line-height: 1.2; border-radius: 8px;
}
.ge-grid .btn i { font-size: 15px; }
.ge-grid .btn.active { background: var(--gl-accent); border-color: var(--gl-accent); color: #fff; }
@media (max-width: 400px) { .ge-grid { grid-template-columns: repeat(4, 1fr); } }
.gl-scale-handle { background: #16a34a; border: 2px solid #fff; border-radius: 3px; width: 12px; height: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* ===== 自定义色带编辑器 ===== */
.gl-ramp-preview { height: 14px; border-radius: 7px; border: 1px solid rgba(0,0,0,.2); }
.sp-ramp-stop { padding: 2px; width: 34px; height: 28px; cursor: pointer; }

/* ===== 测量实时跟随读数标签 ===== */
.gl-ms-tip {
  padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  background: rgba(13, 71, 161, .92); color: #fff;
  font-size: 12px; font-weight: 600; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* ===== 测量结果标注（距离/面积固定在图上） ===== */
.gl-ms-res {
  padding: 2px 8px; border-radius: 4px; white-space: nowrap;
  background: #fff; border: 1.5px solid #ff6d00; color: #e65100;
  font-size: 12px; font-weight: 700; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ---------- 地图右侧竖排工具条（与缩放控件同列） ---------- */
#mapTools {
  position: fixed;
  right: 17px;
  bottom: 130px;
  z-index: 220;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gl-tool-btn {
  width: 34px; height: 34px;
  border: 1px solid rgba(15, 23, 42, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  color: #1e293b;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
  transition: background .15s, color .15s;
  padding: 0;
}
.gl-tool-btn:hover { background: #eff6ff; color: #0d6efd; }
.gl-tool-btn.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
#baseMenu {
  position: fixed;
  right: 58px;
  z-index: 240;
  min-width: 120px;
}

/* ---------- 地图最底部右侧信息文字（参照高德 logo 的纯文字样式） ---------- */
.gl-mapinfo {
  position: fixed;
  right: 12px;
  bottom: 5px;
  z-index: 220;
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 11px;
  color: rgba(30, 41, 59, .85);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;   /* 卫星图等深色底图上仍可读 */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.gl-mapinfo.d-none { display: none; }

/* ---------- 图例内容样式（与 renderLegend 输出类名匹配） ---------- */
.gl-legend .gl-lg-layer {
  font-size: 12px; font-weight: 700; color: #1e293b;
  padding: 5px 2px 2px;
}
.gl-legend .gl-lg-group { color: #64748b; font-weight: 500; }
.gl-legend .gl-lg-hint {
  font-size: 11px; color: #64748b;
  padding: 1px 2px 3px;
}
.gl-legend .gl-lg-rule {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #334155;
  padding: 2px 2px;
  white-space: nowrap;
}
.gl-legend .sw {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 3px; flex: none;
  border: 1px solid rgba(15, 23, 42, .2);
}
.gl-legend .sw.dot { border-radius: 50%; }
.gl-legend .sw.line { height: 4px; border-radius: 2px; }

/* ============ 天气查询 ============ */
.wx-bigicon { font-size: 2.6rem; }
.wx-temp { font-size: 2rem; font-weight: 700; line-height: 1; }
.wx-unit { font-size: .9rem; font-weight: 400; color: var(--bs-secondary-color, #64748b); }
.wx-grid { --bs-gutter-x: .5rem; }
.wx-cell { background: rgba(100,116,139,.08); border-radius: 8px; padding: .45rem .5rem; text-align: center; }
.wx-cell-v { font-weight: 600; font-size: .95rem; }
.wx-cell-l { font-size: .72rem; color: var(--bs-secondary-color, #64748b); }
#wxForecast table { font-size: .82rem; }