/* ============================================
   Dialog 样式系统 v1.1.0
   ============================================
   依赖：无（纯 CSS，原生 <dialog>）
   配合：dialog.js（JS 工具函数）

   使用方式：
     <link rel="stylesheet" href="./assets/dialog.css">

   ── 弹窗类型 ──────────────────────────────

   1. 模态弹窗（有遮罩，居中）
      <dialog class="app-dialog modal-dialog">
        <div class="dialog-header">
          <h3>标题</h3>
          <button class="dialog-close">×</button>
        </div>
        <div class="dialog-body">内容</div>
      </dialog>

   2. Toast 通知（无遮罩，flex 堆叠，自动重排）
      由 dialog.js 的 showToast() 自动创建。

      位置支持（通过 showToast 的 position 参数）：
        top           顶部居中（默认）
        bottom        底部居中（从下方滑入）
        top-left      左上角
        top-right     右上角
        bottom-left   左下角
        bottom-right  右下角

      用法：showToast('消息', { position: 'bottom' })

   ── 特色功能 ──────────────────────────────

   - 模态弹窗遮罩点击关闭（JS 层面处理，CSS 只负责样式）
   - Markdown 渲染支持：标题自动编号、表格、代码块等
   - 折叠目录（.md-toc-*）
   - 回到顶部按钮（.md-back-top）
   - 手机端自适应（@media max-width: 480px）
   - 深色模式自动跟随系统（@media prefers-color-scheme: dark）
   ============================================ */

:root {
  /* ===== 基色定义（日间）===== */
  --cd-bg: #fff;
  --cd-bg-alt: #fafafa;
  --cd-bg-mid: #f5f5f5;
  --cd-bg-code: #f0f0f0;
  --cd-bg-quote: #f8f9fa;
  --cd-bg-hover: #eee;
  --cd-text: #333;
  --cd-text-alt: #666;
  --cd-text-dim: #999;
  --cd-border: #e0e0e0;
  --cd-border-hdr: #e8e8e8;
  --cd-border-hr: #ddd;
  --cd-green: #99cc99;
  --cd-green-hover: #80b380;
  --cd-blue: #1890ff;

  /* ===== 语义别名 ===== */
  --dlg-bg: var(--cd-bg);
  --dlg-header-bg: var(--cd-bg-alt);
  --dlg-header-border: var(--cd-border-hdr);
  --dlg-header-text: var(--cd-text);
  --dlg-body-text: var(--cd-text-alt);
  --dlg-close-hover-bg: var(--cd-border-hdr);
  --dlg-close-hover-text: var(--cd-text);
  --dlg-h1-color: var(--cd-text);
  --dlg-h2-color: var(--cd-text);
  --dlg-h2-border: var(--cd-border);
  --dlg-h3-color: var(--cd-text-alt);
  --dlg-h4-color: var(--cd-text-alt);
  --dlg-code-bg: var(--cd-bg-code);
  --dlg-pre-bg: var(--cd-bg-mid);
  --dlg-pre-border: var(--cd-border);
  --dlg-hr-border: var(--cd-border-hr);
  --dlg-link-color: var(--cd-blue);
  --dlg-th-bg: var(--cd-bg-mid);
  --dlg-th-text: var(--cd-text);
  --dlg-tr-even: var(--cd-bg-alt);
  --dlg-th-border: var(--cd-border);
  --dlg-blockquote-bg: var(--cd-bg-quote);
  --dlg-blockquote-border: var(--cd-blue);
  --dlg-blockquote-text: var(--cd-text-alt);
  --dlg-shadow: rgba(0, 0, 0, 0.25);
  --dlg-backdrop: rgba(0, 0, 0, 0.45);
  --dlg-toc-bg: var(--cd-bg-mid);
  --dlg-toc-border: var(--cd-border);
  --dlg-toc-text: var(--cd-text);
  --dlg-toc-hover: var(--cd-bg-hover);
  --dlg-toc-h1: var(--cd-text);
  --dlg-toc-h2: var(--cd-text-alt);
  --dlg-toc-h3: var(--cd-text-dim);
  --dlg-backtop-bg: rgba(153, 204, 153, 0.85);
  --dlg-backtop-hover: var(--cd-green-hover);
  --dlg-confirm-text: var(--cd-text-alt);
  --dlg-cancel-bg: var(--cd-bg-code);
  --dlg-cancel-text: var(--cd-text-alt);
  --dlg-cancel-hover-bg: var(--cd-border);
  --dlg-cancel-hover-text: var(--cd-text);
  --dlg-ok-bg: var(--cd-green);
  --dlg-ok-hover: var(--cd-green-hover);
  --dlg-toast-bg: var(--cd-bg);
  --dlg-toast-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  --dlg-toast-text: var(--cd-text);
  --dlg-toc-arrow: var(--cd-green);
  --dlg-close-color: var(--cd-text-dim);
}

[data-theme="dark"] {
  --cd-bg: #131313;
  --cd-bg-alt: #1a1a1a;
  --cd-bg-mid: #181818;
  --cd-bg-code: #222;
  --cd-bg-quote: #1a1a1a;
  --cd-bg-hover: #222;
  --cd-text: #eee;
  --cd-text-alt: #aaa;
  --cd-text-dim: #777;
  --cd-border: #333;
  --cd-border-hdr: #333;
  --cd-border-hr: #333;
  --cd-green: #88cc88;
  --cd-green-hover: #99cc99;
  --cd-blue: #5ab0ff;

  --dlg-shadow: rgba(0, 0, 0, 0.6);
  --dlg-backdrop: rgba(0, 0, 0, 0.65);
  --dlg-backtop-bg: rgba(136, 204, 136, 0.7);
  --dlg-toast-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* ============================================
   手机端响应式
   ============================================ */
.app-dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  background: var(--dlg-bg);
  box-shadow: 0 12px 48px var(--dlg-shadow);
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  margin: auto;
  animation: dialogPop 0.2s ease;
}

.app-dialog::backdrop {
  background: var(--dlg-backdrop);
  animation: fadeIn 0.2s ease;
}

@keyframes dialogPop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ========== 高级功能激活弹窗 ========== */
.premium-dialog {
  width: min(400px, calc(100vw - 32px)) !important;
}
.premium-dialog .dialog-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--dlg-header-text);
}
.premium-dialog .dialog-body {
  padding: 18px;
  color: var(--dlg-body-text);
  font-size: 13px;
}
.premium-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--input-color);
  box-sizing: border-box;
  outline: none;
}
.premium-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.15);
}
.premium-error {
  margin: 8px 0 0;
  color: var(--status-error);
  font-size: 12px;
  display: none;
}
.premium-btns {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.premium-btn {
  flex: 1;
  padding: 7px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  border: none;
  transition: background 0.12s;
}
.premium-btn-cancel {
  border: 1px solid var(--dlg-cancel-bg);
  background: var(--dlg-cancel-bg);
  color: var(--dlg-cancel-text);
}
.premium-btn-cancel:hover {
  background: var(--dlg-cancel-hover-bg);
  color: var(--dlg-cancel-hover-text);
}
.premium-btn-submit {
  background: var(--dlg-ok-bg);
  color: #fff;
  font-weight: 600;
}
.premium-btn-submit:hover {
  background: var(--dlg-ok-hover);
}

/* 标题栏 */
.app-dialog .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--dlg-header-border);
  position: sticky;
  top: 0;
  background: var(--dlg-header-bg);
  z-index: 1;
  border-radius: 16px 16px 0 0;
}

.app-dialog .dialog-header h3 {
  margin: 0;
  font-size: 17px;
  color: var(--dlg-header-text);
  font-weight: 600;
}

/* 关闭按钮 */
.app-dialog .dialog-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--dlg-close-color);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s;
}

.app-dialog .dialog-close:hover {
  background: var(--dlg-close-hover-bg);
  color: var(--dlg-close-hover-text);
}

/* 内容区 */
.app-dialog .dialog-body {
  padding: 24px;
  max-height: min(80vh, 600px);
  overflow-y: auto;
  overflow-x: hidden;
  line-height: 1.7;
  color: var(--dlg-body-text);
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ============================================
   MD 内容样式（自动编号 + 表格 + 代码块等）
   ============================================ */

/* h2/h3 自动编号（CSS counter） */
.app-dialog .dialog-body {
  counter-reset: h2-counter;
}

.app-dialog .dialog-body h1 {
  font-size: 22px;
  color: var(--dlg-h1-color);
}
.app-dialog .dialog-body h2 {
  font-size: 18px;
  color: var(--dlg-h2-color);
  margin-top: 24px;
  border-bottom: 1px solid var(--dlg-h2-border);
  padding-bottom: 6px;
  counter-increment: h2-counter;
  counter-reset: h3-counter;
}
.app-dialog .dialog-body h2::before {
  content: counter(h2-counter) ". ";
}
.app-dialog .dialog-body h3 {
  font-size: 15px;
  color: var(--dlg-body-text);
  margin-top: 16px;
  counter-increment: h3-counter;
}
.app-dialog .dialog-body h3::before {
  content: counter(h2-counter) "." counter(h3-counter) " ";
}
.app-dialog .dialog-body h4 {
  font-size: 14px;
  color: var(--dlg-h4-color);
  margin-top: 12px;
}
.app-dialog .dialog-body p {
  margin: 8px 0;
}
/* MD 文档弹窗正文首行缩进（仅直接子级段落，不含引用块内） */
#_mdBody > p {
  text-indent: 2em;
}
.app-dialog .dialog-body code {
  background: var(--dlg-code-bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: Consolas, monospace;
}
.app-dialog .dialog-body pre {
  background: var(--dlg-pre-bg);
  padding: 14px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 13px;
  border: 1px solid var(--dlg-pre-border);
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.app-dialog .dialog-body hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 20px 0;
}
.app-dialog .dialog-body ul,
.app-dialog .dialog-body ol {
  padding-left: 20px;
  margin: 8px 0;
}
.app-dialog .dialog-body li {
  margin: 4px 0;
  list-style-position: inside;
}
/* MD 文档弹窗才有首行缩进 */
#_mdBody li {
  text-indent: 1em;
}
.app-dialog .dialog-body a {
  color: var(--dlg-link-color);
  text-decoration: none;
}
.app-dialog .dialog-body a:hover {
  text-decoration: underline;
}
.app-dialog .dialog-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
  font-size: 13px;
}
.app-dialog .dialog-body th,
.app-dialog .dialog-body td {
  border: 1px solid var(--dlg-th-border);
  padding: 6px 10px;
  text-align: left;
  word-break: break-word;
  overflow-wrap: break-word;
}
.app-dialog .dialog-body th {
  background: var(--dlg-th-bg);
  font-weight: 600;
  color: var(--dlg-th-text);
}
.app-dialog .dialog-body tr:nth-child(even) {
  background: var(--dlg-tr-even);
}
.app-dialog .dialog-body blockquote {
  border-left: 3px solid var(--dlg-blockquote-border);
  margin: 12px 0;
  padding: 8px 16px;
  background: var(--dlg-blockquote-bg);
  border-radius: 0 6px 6px 0;
  color: var(--dlg-blockquote-text);
}

/* ----- Markdown 折叠目录 ----- */
.md-toc {
  margin-bottom: 16px;
}

.md-toc-details {
  border: 1px solid var(--dlg-toc-border);
  border-radius: 8px;
  background: var(--dlg-toc-bg);
  overflow: hidden;
}

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

.md-toc-summary::before {
  content: "\25B6";
  font-size: 10px;
  color: var(--dlg-toc-arrow);
  transition: transform 0.2s;
  display: inline-block;
}

.md-toc-details[open] > .md-toc-summary::before {
  transform: rotate(90deg);
}

.md-toc-summary:hover {
  background: var(--dlg-toc-hover);
}

.md-toc-summary::-webkit-details-marker {
  display: none;
}

/* 目录列表（最大高度 240px，过长时内部滚动） */
.md-toc-list {
  padding: 2px 6px 8px;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(106, 170, 106, 0.3) transparent;
}

.md-toc-item {
  display: block;
  padding: 3px 8px;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.1s;
  color: var(--dlg-toc-text);
}

.md-toc-item:hover {
  background: var(--dlg-toc-hover) !important;
}

/* 目录层级：h1→6px缩进+粗体, h2→20px, h3→34px+小字 */
.md-toc-item.toc-h1 {
  font-size: 13px;
  font-weight: 600;
  padding-left: 6px;
  color: var(--dlg-toc-h1);
}

.md-toc-item.toc-h2 {
  font-size: 12px;
  font-weight: 500;
  padding-left: 20px;
  color: var(--dlg-toc-text);
}

.md-toc-item.toc-h3 {
  font-size: 11px;
  font-weight: 400;
  padding-left: 34px;
  color: var(--dlg-toc-h3);
}

/* ========== 回到顶部按钮 ========== */
.md-back-top {
  position: sticky;
  bottom: 16px;
  float: right;
  margin-top: -36px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(74, 140, 74, 0.85);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    background 0.15s,
    transform 0.15s;
  z-index: 10;
  line-height: 1;
}
.md-back-top:hover {
  background: var(--dlg-backtop-hover);
  transform: scale(1.08);
}
.md-back-top.visible {
  display: flex;
}

/* ============================================
   确认弹窗（showConfirm）
   ============================================ */

.confirm-dialog {
  width: min(420px, calc(100vw - 32px));
}

.confirm-dialog .dialog-body {
  max-height: none;
  overflow: visible;
}

.confirm-msg {
  margin: 0 0 20px;
  line-height: 1.6;
  color: var(--dlg-body-text);
}

.confirm-btns {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.confirm-btns button {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.confirm-cancel {
  background: var(--dlg-cancel-bg);
  color: var(--dlg-cancel-text);
}

.confirm-cancel:hover {
  background: var(--dlg-cancel-hover-bg);
  color: var(--dlg-cancel-hover-text);
}

.confirm-ok {
  background: var(--dlg-ok-bg);
  color: #fff;
}

.confirm-ok:hover {
  background: var(--dlg-ok-hover);
}

/* ============================================
   Toast 系统（flex 堆叠，自动重排）
   ============================================
   由 dialog.js 的 showToast() 自动管理 DOM。
   showToast(msg, { position: 'top'|'bottom'|'top-left'|... })
   不同位置使用独立容器，互不干扰。
   容器 pointer-events: none，toast 自身 auto。
   ============================================ */

/* --- 基础容器 --- */
._toastContainer {
  position: fixed;
  z-index: 9999;
  display: flex;
  gap: 8px;
  pointer-events: none;
  max-width: min(600px, calc(100vw - 32px));
  width: fit-content;
}
/* 顶部 */
._toastContainer-top {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
}
/* 底部 */
._toastContainer-bottom {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column-reverse;
  align-items: center;
}
/* 左上 */
._toastContainer-top-left {
  top: 20px;
  left: 20px;
  flex-direction: column;
  align-items: flex-start;
}
/* 右上 */
._toastContainer-top-right {
  top: 20px;
  right: 20px;
  flex-direction: column;
  align-items: flex-end;
}
/* 左下 */
._toastContainer-bottom-left {
  bottom: 20px;
  left: 20px;
  flex-direction: column-reverse;
  align-items: flex-start;
}
/* 右下 */
._toastContainer-bottom-right {
  bottom: 20px;
  right: 20px;
  flex-direction: column-reverse;
  align-items: flex-end;
}

/* ----- Toast 单个元素 ----- */
.toast-dialog {
  pointer-events: auto;
  position: relative;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  box-shadow: 0 4px 20px var(--dlg-toast-shadow);
  width: fit-content;
  max-width: 100%;
  background: var(--dlg-toast-bg);
  opacity: 0;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* Toast 内容布局 */
.toast-cnt {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toast-msg {
  color: var(--dlg-toast-text);
  font-size: 13px;
  line-height: 1.5;
}
.toast-action {
  flex-shrink: 0;
  padding: 5px 14px;
  background: var(--dlg-ok-bg);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.toast-action:hover {
  background: var(--dlg-ok-hover);
}
.toast-close-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--dlg-close-color);
  font-size: 14px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    color 0.15s;
}
.toast-close-btn:hover {
  background: var(--dlg-close-hover-bg);
  color: var(--dlg-close-hover-text);
}

/* ===== 不同位置的动画方向 ===== */
/* 顶部系列：从上方滑入（.open 时显示，.closing 时隐藏） */
.toast-top {
  transform: translateY(-16px);
}
.toast-top.open {
  transform: translateY(0);
  opacity: 1;
}
.toast-top.closing {
  transform: translateY(-16px);
  opacity: 0;
}

/* 底部系列：从下方滑入 */
.toast-bottom {
  transform: translateY(16px);
}
.toast-bottom.open {
  transform: translateY(0);
  opacity: 1;
}
.toast-bottom.closing {
  transform: translateY(16px);
  opacity: 0;
}

/* 左上系列：向左上方向 */
.toast-top-left {
  transform: translate(-8px, -16px);
}
.toast-top-left.open {
  transform: translate(0, 0);
  opacity: 1;
}
.toast-top-left.closing {
  transform: translate(-8px, -16px);
  opacity: 0;
}

/* 右上系列：向右上方向 */
.toast-top-right {
  transform: translate(8px, -16px);
}
.toast-top-right.open {
  transform: translate(0, 0);
  opacity: 1;
}
.toast-top-right.closing {
  transform: translate(8px, -16px);
  opacity: 0;
}

/* 左下系列：向左下方向 */
.toast-bottom-left {
  transform: translate(-8px, 16px);
}
.toast-bottom-left.open {
  transform: translate(0, 0);
  opacity: 1;
}
.toast-bottom-left.closing {
  transform: translate(-8px, 16px);
  opacity: 0;
}

/* 右下系列：向右下方向 */
.toast-bottom-right {
  transform: translate(8px, 16px);
}
.toast-bottom-right.open {
  transform: translate(0, 0);
  opacity: 1;
}
.toast-bottom-right.closing {
  transform: translate(8px, 16px);
  opacity: 0;
}

/* 手机端响应式 */
@media (max-width: 480px) {
  .app-dialog .dialog-header {
    padding: 12px 16px;
  }
  .app-dialog .dialog-body {
    padding: 16px;
    max-height: min(75vh, 500px);
  }
  .app-dialog .dialog-body h1 {
    font-size: 19px;
  }
  .app-dialog .dialog-body h2 {
    font-size: 16px;
  }
  .app-dialog .dialog-body pre {
    padding: 10px;
    font-size: 12px;
  }

  /* 手机端所有 toast 容器缩窄 */
  ._toastContainer-top,
  ._toastContainer-bottom {
    max-width: calc(100vw - 24px);
  }
  ._toastContainer-top-left,
  ._toastContainer-top-right,
  ._toastContainer-bottom-left,
  ._toastContainer-bottom-right {
    max-width: calc(50vw - 16px);
  }

  .toast-dialog {
    max-width: calc(100vw - 24px);
  }
}

/* ============================================
   Leaflet 弹窗 & 提示样式
   ============================================ */

/* ========== 要素点击 Popup 样式（适配深色模式） ========== */

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--panel-bg);
  color: var(--text-primary);
  box-shadow: 0 3px 14px var(--panel-shadow);
}

.leaflet-popup-content {
  font-size: 12px;
  color: var(--text-primary);
  margin: 8px 10px;
}

.leaflet-popup-close-button {
  color: var(--text-dim) !important;
  transition: color 0.15s;
}
.leaflet-popup-close-button:hover {
  color: var(--text-primary) !important;
}

/* ========== 【方案A】Tooltip 样式（替代旧 Popup 样式）========== */

/* 悬停提示 Tooltip */
.leaflet-tooltip.hover-tooltip {
  background: var(--panel-bg);
  border: 2px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  font-size: 12px;
  color: var(--text-primary);
  padding: 0;
  max-width: 300px;
}

.leaflet-tooltip.hover-tooltip::before {
  display: none; /* 隐藏箭头 */
}

.leaflet-tooltip.hover-tooltip .feature-popup table {
  width: 100%;
  border-collapse: collapse;
}

.leaflet-tooltip.hover-tooltip .feature-popup table td {
  padding: 3px 5px;
  border-bottom: 1px solid var(--border-light);
}

.leaflet-tooltip.hover-tooltip .feature-popup table tr:last-child td {
  border-bottom: none;
}

.leaflet-tooltip.hover-tooltip .feature-popup {
  margin: 8px 10px;
}

/* ========== 要素弹窗内容 ========== */

.feature-popup {
  font-size: 12px;
  line-height: 1.7;
  min-width: 160px;
  max-width: 280px;
  overflow: hidden;
}

.feature-popup-body {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.feature-popup-body::-webkit-scrollbar {
  width: 4px;
}
.feature-popup-body::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2px;
}

.feature-popup table {
  width: 100%;
  border-collapse: collapse;
}

.feature-popup td {
  padding: 2px 4px;
  vertical-align: top;
}

.feature-popup td:first-child {
  color: var(--text-dim);
  white-space: nowrap;
  padding-right: 8px;
}

.feature-popup td:last-child {
  color: var(--text-primary);
  word-break: break-all;
}

.feature-popup tr:nth-child(even) td {
  background: var(--content-checked-bg);
}

/* 要素弹窗标题 */
.feature-popup-title {
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--section-text);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 3px;
}

.feature-popup-footer {
  font-size: 10px;
  color: #999;
  padding-top: 4px;
  margin-top: 4px;
  border-top: 1px solid var(--border-light, #e8e8e8);
  text-align: left;
}

/* ========== Leaflet Hover Popup ========== */

.leaflet-popup.hover-popup {
  pointer-events: none;
}

.leaflet-popup.hover-popup .leaflet-popup-content-wrapper {
  background: var(--panel-bg);
  border: 2px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.leaflet-popup.hover-popup .leaflet-popup-content {
  font-size: 12px;
  color: var(--text-primary);
  margin: 8px 10px;
}

.leaflet-popup.hover-popup .leaflet-popup-tip-container {
  display: none;
}

.leaflet-popup.hover-popup .feature-popup table {
  width: 100%;
  border-collapse: collapse;
}

.leaflet-popup.hover-popup .feature-popup table td {
  padding: 3px 5px;
  border-bottom: 1px solid var(--border-light);
}

.leaflet-popup.hover-popup .feature-popup table tr:last-child td {
  border-bottom: none;
}