/* ============ 设计系统（中国传统色主题 · 配色来自 16 色预设表） ============
   ⚠ v1.1.0.124：配色不再写死在 CSS 里。
   下面的 --c-* 是「16 色预设表」在 CSS 侧的令牌化入口，
   **真源在 PHP 的 helpers.php::site_color_presets()**；
   页面在 <body> 上输出 CSS 变量覆盖这些令牌的默认值（见 theme_css_vars()），
   后台「16 色 · 预设配色」改完后刷新即全站生效。
   新增/修改配色只改预设表一处，本文件不需要动。
   ==================================================================== */
:root {
  /* ---- 16 色预设表令牌（默认值 = 预设表里的色值，由 PHP 在 body 上覆盖） ---- */
  --c-zhusha:  #A64436;   /* 朱漆红 */
  --c-liujin:  #C69A4B;   /* 鎏金 */
  --c-xiangya: #E8DDC8;   /* 象牙白 */
  --c-wumu:    #2E2A27;   /* 乌木黑 */
  --c-xuanqi:  #1F2426;   /* 玄漆 */
  --c-luodian: #6D9A98;   /* 螺钿青 */
  --c-zhumu:   #D9D4CA;   /* 珠母白 */
  --c-zidai:   #60536A;   /* 紫黛 */
  --c-xiafei:  #B85F5A;   /* 霞绯 */
  --c-hupo:    #C88A43;   /* 琥珀 */
  --c-yunjin:  #775B71;   /* 云锦紫 */
  --c-qiyeye:  #483732;   /* 漆夜褐 */
  --c-like:    #754B3A;   /* 栗壳褐 */
  --c-shiyie:  #C56F3C;   /* 柿叶橙 */
  --c-chajin:  #B5935D;   /* 茶金 */
  --c-luhua:   #D8CAB0;   /* 芦花米 */

  /* ---- 由预设色派生的表面色阶（同样随预设表联动） ---- */
  --c-surface-1: #CBB99C;  /* 控件底（芦花米压深） */
  --c-surface-2: #B9A582;  /* 深控件（芦花米压深更多） */
  --c-surface-3: #F2EBDC;  /* 最浅层 */

  /* ---- 浅底文字深调（语义色 × 乌木黑 派生，保证 WCAG ≥4.5:1） ---- */
  --c-tx-red:    #944034;
  --c-tx-gold:   #6B5735;
  --c-tx-teal:   #4A5C5A;
  --c-tx-coral:  #814A46;
  --c-tx-amber:  #735534;
  --c-tx-violet: #6C5466;
  --c-tx-tea2:   #6B593F;
  --c-tx-orange: #815033;

  /* 背景层级（浅色体系：象牙白 → 珠母白 → 芦花米）
     这几个是「角色令牌」，会随用户在后台所选的预设色变化。 */
  --bg: #E8DDC8;        /* 象牙白 —— 页面画布 */
  --bg-2: #D8CAB0;      /* 芦花米 —— 次级底 */
  --panel: #D9D4CA;     /* 珠母白 —— 卡片/面板 */
  --panel-2: #D8CAB0;   /* 芦花米 —— 次级面 */
  --panel-3: #CBB99C;   /* 芦花米压深一档 —— 控件底/悬停 */

  /* 描边（栗壳褐 / 漆夜褐） */
  --line: #754B3A;      /* 栗壳褐 —— 主描边 */
  --line-2: #483732;    /* 漆夜褐 —— 次级描边 */

  /* 文字（乌木黑 / 玄漆 / 紫黛） */
  --txt: #2E2A27;       /* 乌木黑 —— 正文 */
  --txt-2: #1F2426;     /* 玄漆 —— 次级正文 */
  --sub: #60536A;       /* 紫黛 —— 辅助文字 */

  /* 品牌主色 / 辅色（朱漆红 / 鎏金） */
  --acc: #A64436;       /* 朱漆红 —— 主色（白字对比度 6.0:1） */
  --acc-2: #C69A4B;     /* 鎏金 —— 辅色（深字对比度 4.8:1） */

  /* 语义色（全部取自 16 色板，作填充用；文字按底色取白/深） */
  --blue: #6D9A98;      /* 螺钿青 —— 信息/链接 */
  --cyan: #6D9A98;      /* 螺钿青 */
  --green: #6D9A98;     /* 螺钿青 —— 正常/成功 */
  --red: #B85F5A;       /* 霞绯 —— 错误/异常 */
  --purple: #775B71;    /* 云锦紫 */
  --yellow: #C88A43;    /* 琥珀 —— 警告 */

  /* 浅底文字色（语义色 × 乌木黑 派生，WCAG ≥4.5:1）
     原因：16 色板里鎏金/螺钿青/琥珀/茶金/柿叶橙/霞绯在浅色底上
     对比度只有 1.7~3.0，做不了正文。深色主题里它们是「深底上的亮字」，
     换成浅底主题后必须换成**同色相的深调**才能读。
     用法：浅底上的彩色文字（标签、提示条、链接）一律用这几个。 */
  --tx-red:    #944034;  /* 朱漆红深调 4.67:1 */
  --tx-gold:   #6B5735;  /* 鎏金深调   4.68:1 */
  --tx-teal:   #4A5C5A;  /* 螺钿青深调 4.79:1 */
  --tx-coral:  #814A46;  /* 霞绯深调   4.74:1 */
  --tx-amber:  #735534;  /* 琥珀深调   4.62:1 */
  --tx-violet: #6C5466;  /* 云锦紫深调 4.59:1 */
  --tx-tea2:   #6B593F;  /* 茶金深调   4.55:1 */
  --tx-orange: #815033;  /* 柿叶橙深调 4.55:1 */

  --shadow: 0 6px 24px color-mix(in srgb, var(--c-wumu) 18.0%, transparent);
  /* 阴影**颜色**单独成令牌：阴影永远是「压暗」，深浅主题只差浓度。
     深色主题下由 <body> 上的主题变量覆盖成黑色（浅色主题用暖褐压暗）。 */
  --shadow-color: color-mix(in srgb, var(--c-wumu) 20.0%, transparent);
  --radius: 10px;
  --font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--tx-teal); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-luodian); }

/* ============ 通用组件 ============ */
.panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 75.0%, transparent), color-mix(in srgb, var(--panel) 90.0%, transparent));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.panel-head h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .5px; }
.panel-head .sub { font-size: 12px; color: var(--sub); }
.panel-body { padding: 12px 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  /* v1.1.0.125：控件底比卡片底更深 → 文字用按控件底算出的可读色 */
  color: var(--ctrl-text, var(--txt));
  border-radius: 7px;
  font-size: 13px; cursor: pointer;
  font-family: var(--font);
  transition: all .16s;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-2); border-color: var(--c-luodian); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--acc); border-color: color-mix(in srgb, var(--acc) 72%, var(--txt)); color: var(--acc-text); font-weight: 700; }
.btn-primary:hover { background: color-mix(in srgb, var(--acc) 84%, var(--txt)); }
.btn-blue { background: var(--blue); border-color: var(--blue); color: var(--acc-text); }
.btn-blue:hover { background: color-mix(in srgb, var(--blue) 84%, var(--txt)); }
.btn-danger { background: color-mix(in srgb, var(--c-xiafei) 15.0%, transparent); border-color: color-mix(in srgb, var(--c-xiafei) 50.0%, transparent); color: var(--tx-coral); }
.btn-danger:hover { background: color-mix(in srgb, var(--c-xiafei) 28.0%, transparent); }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn-ghost { background: transparent; }

input, select, textarea {
  width: 100%;
  padding: 8px 11px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  color: var(--txt);
  border-radius: 7px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--txt-2) 13.0%, transparent);
}
/* 选择类控件不做通栏表单样式 —— 上面的 width:100% + 内边距会把
   checkbox / radio 拉成一条占满整行的"长条"（后台区域框选页截图实证），
   color / range 也不需要表单盒模型（自带原生外观）。 */
input[type="checkbox"], input[type="radio"] {
  width: 15px;
  height: 15px;
  min-width: 15px;
  padding: 0;
  margin: 0;
  flex: none;
  accent-color: var(--blue, var(--c-luodian));
  cursor: pointer;
}
input[type="color"], input[type="range"] {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
input[type="color"] { width: 34px; height: 26px; cursor: pointer; }
input[type="range"] { accent-color: var(--blue, var(--c-luodian)); cursor: pointer; }
textarea { resize: vertical; min-height: 78px; line-height: 1.65; }
select option { background: var(--panel); }

.field { margin-bottom: 13px; }
.field > label { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--txt-2); }
.field .hint { margin-top: 4px; font-size: 11.5px; color: var(--sub); }
.field-row { display: flex; flex-wrap: wrap; gap: 12px; }
.field-row > .field { flex: 1 1 200px; min-width: 0; margin-bottom: 0; }
.field-row > .field.span-2 { flex: 2 1 320px; }

table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
}
table.grid th { color: var(--sub); font-weight: 600; background: color-mix(in srgb, var(--panel) 60.0%, transparent); white-space: nowrap; }
table.grid tbody tr:hover { background: color-mix(in srgb, var(--panel) 28.0%, transparent); }
table.grid td .ops { display: flex; gap: 6px; }

.tag {
  display: inline-block; padding: 1.5px 8px; border-radius: 10px;
  font-size: 11.5px; line-height: 1.6;
  /* 窄屏下表格列被压缩时，标签里的中文会一列一字竖着排 —— 禁止换行，由容器横向滚动兜住 */
  white-space: nowrap;
  background: color-mix(in srgb, var(--c-luodian) 16.0%, transparent); color: var(--tx-teal); border: 1px solid color-mix(in srgb, var(--c-luodian) 30.0%, transparent);
}
.tag.l1 { background: color-mix(in srgb, var(--c-xiafei) 16.0%, transparent); color: var(--tx-coral); border-color: color-mix(in srgb, var(--c-xiafei) 35.0%, transparent); }
.tag.l2 { background: color-mix(in srgb, var(--c-hupo) 16.0%, transparent); color: var(--tx-amber); border-color: color-mix(in srgb, var(--c-hupo) 35.0%, transparent); }
.tag.l3 { background: color-mix(in srgb, var(--c-luodian) 16.0%, transparent); color: var(--tx-teal); border-color: color-mix(in srgb, var(--c-luodian) 35.0%, transparent); }
.tag.ok { background: color-mix(in srgb, var(--c-luodian) 15.0%, transparent); color: var(--tx-teal); border-color: color-mix(in srgb, var(--c-luodian) 32.0%, transparent); }
.tag.no { background: color-mix(in srgb, var(--c-xiafei) 14.0%, transparent); color: var(--tx-coral); border-color: color-mix(in srgb, var(--c-xiafei) 30.0%, transparent); }
.tag.gray { background: color-mix(in srgb, var(--panel-2) 14.0%, transparent); color: var(--sub); border-color: color-mix(in srgb, var(--line) 28.0%, transparent); }

.empty { padding: 46px 20px; text-align: center; color: var(--sub); font-size: 13px; }
.empty::before { content: "📭"; display: block; font-size: 30px; margin-bottom: 10px; opacity: .65; }

.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 11px 0 2px; font-size: 12.5px; color: var(--sub); }
.pager button {
  padding: 4px 11px; background: var(--panel-2); border: 1px solid var(--line-2);
  color: var(--txt-2); border-radius: 6px; cursor: pointer; font-size: 12.5px;
}
.pager button:hover:not(:disabled) { background: var(--panel-3); color: var(--txt); }
.pager button:disabled { opacity: .4; cursor: not-allowed; }

/* v1.1.0.178：弹窗外壳（.mask / .modal*）已迁至 assets/css/user-panel.css ——
   角色卡面板（后台 / 前台 / 指挥调度中心三处共用）需要它，而指挥调度中心模板
   不加载 common.css（自包含设计）→ 归到共享样式里，三处只需各引一份 user-panel.css。 */

/* ============ 提示 ============ */
#toastWrap { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  padding: 9px 18px; border-radius: 8px; font-size: 13.5px;
  background: color-mix(in srgb, var(--panel) 96.0%, transparent); border: 1px solid var(--line-2);
  box-shadow: var(--shadow); animation: toastIn .22s ease;
  max-width: 80vw;
}
.toast.success { border-color: color-mix(in srgb, var(--c-luodian) 50.0%, transparent); color: var(--tx-teal); }
.toast.error { border-color: color-mix(in srgb, var(--c-xiafei) 50.0%, transparent); color: var(--tx-coral); }
.toast.info { border-color: color-mix(in srgb, var(--c-luodian) 50.0%, transparent); color: var(--tx-teal); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ============ 地图组件 ============ */
.xffa-map { position: relative; overflow: hidden; border-radius: var(--radius); }
.xffa-map-svg { touch-action: none; user-select: none; }
.xffa-map-controls { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 5px; }
.xffa-map-controls button {
  width: 28px; height: 28px; border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 90.0%, transparent); border: 1px solid var(--line-2);
  color: var(--txt-2); cursor: pointer; font-size: 15px; line-height: 1;
}
.xffa-map-controls button:hover { background: var(--panel-3); color: var(--txt); }
.xffa-map-tip {
  position: absolute; left: 10px; top: 10px; display: none;
  background: color-mix(in srgb, var(--bg) 93.0%, transparent); border: 1px solid var(--line-2);
  padding: 5px 10px; border-radius: 6px; font-size: 12.5px; color: var(--txt);
  pointer-events: none; max-width: 70%; z-index: 5;
}
.xffa-map-note {
  position: absolute; left: 10px; bottom: 8px;
  font-size: 11px; color: color-mix(in srgb, var(--txt) 62.0%, transparent);
  pointer-events: none; letter-spacing: .3px;
}
.xffa-map-note b { color: color-mix(in srgb, var(--txt) 80.0%, transparent); font-weight: 600; }
.ffa-pulse { animation: ffaPulse 2.2s ease-out infinite; transform-origin: center; }
@keyframes ffaPulse {
  0% { transform: scale(.6); opacity: .5; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
/* 定位高亮圈：虚线外圈轻微旋转/呼吸，提示「已定位到该元素」 */
.ffa-locate circle { transform-origin: center; }
.ffa-locate circle:first-child { animation: ffaLocate 2.4s ease-out infinite; }
@keyframes ffaLocate {
  0% { transform: scale(.85); opacity: .9; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
/* 附加标记：搜索结果定位针 / 我的位置（离线 / 在线共用，独立于业务标记层） */
.ffa-extra { pointer-events: none; }
.ffa-extra-pin .ffa-search-halo { fill: color-mix(in srgb, var(--c-hupo) 22.0%, transparent); animation: ffaPulseFade 1.7s ease-in-out infinite; }
.ffa-extra-pin .ffa-search-body { fill: var(--c-hupo); stroke: var(--c-surface-2); stroke-width: 1.4; }
.ffa-extra-pin .ffa-search-dot { fill: var(--c-surface-2); }
.ffa-extra-pin .ffa-search-label { fill: var(--c-hupo); }
.ffa-extra-pin .ffa-my-halo { fill: color-mix(in srgb, var(--c-luodian) 20.0%, transparent); animation: ffaPulseFade 2s ease-in-out infinite; }
.ffa-extra-pin .ffa-my-ring { fill: color-mix(in srgb, var(--c-luodian) 30.0%, transparent); stroke: var(--c-surface-2); stroke-width: 1.6; }
.ffa-extra-pin .ffa-my-dot { fill: var(--c-luodian); stroke: var(--c-surface-2); stroke-width: 1.8; }
.ffa-extra-pin .ffa-my-label { fill: var(--c-surface-2); }
@keyframes ffaPulseFade {
  0%, 100% { opacity: .3; }
  50% { opacity: .78; }
}
/* 比例尺 / 指北针 / 回退提示 */
.xffa-scale { position: absolute; right: 10px; bottom: 8px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--txt) 82.0%, transparent); pointer-events: none; }
.xffa-scale .bar { display: inline-block; height: 6px; border: 1px solid color-mix(in srgb, var(--line) 70.0%, transparent); border-top: none; background: color-mix(in srgb, var(--panel-2) 14.0%, transparent); }
.xffa-north { position: absolute; right: 12px; top: 46px; width: 34px; height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--tx-gold); pointer-events: none; text-shadow: 0 1px 2px color-mix(in srgb, var(--c-xuanqi) 60.0%, transparent); }
.xffa-north .arr { font-size: 15px; line-height: 1; }
.xffa-north .lab { font-size: 11px; font-weight: 700; color: var(--txt); }
.xffa-banner { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); background: color-mix(in srgb, var(--bg-2) 92.0%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 50.0%, transparent); color: var(--txt); padding: 5px 12px; border-radius: 7px; font-size: 12px; z-index: 8; pointer-events: none; max-width: 92%; text-align: center; }

/* ---- 地图主题（离线示意图配色，由容器 class 切换） ----
   传统色版：陆地走暖中性（象牙白/珠母白/芦花米），水域走螺钿青，
   河流螺钿青、区域朱漆红、地名乌木黑 —— 与全局传统色主题一致。 */
/* v1.1.0.125：地图配色跟随所选色卡的方案 —— 陆地/水域走方案底色层，
   河流走辅色，辖区边界走主色，地名走正文色。整站不再有"独立定义"的地图配色。 */
.xffa-map {
  --xffa-sea-1: var(--bg-2); --xffa-sea-2: color-mix(in srgb, var(--bg-2) 72%, var(--txt));
  --xffa-land-1: var(--bg); --xffa-land-2: var(--panel);
  --xffa-region-fill: color-mix(in srgb, var(--acc) 12.0%, transparent); --xffa-region-stroke: color-mix(in srgb, var(--acc) 75.0%, transparent);
  --xffa-grid: color-mix(in srgb, var(--line) 10.0%, transparent); --xffa-river: var(--acc-2);
  --xffa-label: var(--txt); --xffa-label-stroke: var(--bg); --xffa-note: color-mix(in srgb, var(--sub) 70.0%, transparent);
  --xffa-road: color-mix(in srgb, var(--line) 38.0%, transparent);
}
.xffa-map.xffa-light {
  --xffa-sea-1: var(--bg); --xffa-sea-2: var(--panel);
  --xffa-land-1: color-mix(in srgb, var(--bg) 60%, var(--panel)); --xffa-land-2: var(--bg);
  --xffa-region-fill: color-mix(in srgb, var(--acc) 10.0%, transparent); --xffa-region-stroke: color-mix(in srgb, var(--acc) 68.0%, transparent);
  --xffa-grid: color-mix(in srgb, var(--line) 9.0%, transparent); --xffa-river: var(--acc-2);
  --xffa-label: var(--txt); --xffa-label-stroke: var(--bg); --xffa-note: color-mix(in srgb, var(--sub) 68.0%, transparent);
  --xffa-road: color-mix(in srgb, var(--line) 32.0%, transparent);
}
.xffa-sea-stop-1 { stop-color: var(--xffa-sea-1); }
.xffa-sea-stop-2 { stop-color: var(--xffa-sea-2); }
.xffa-land-stop-1 { stop-color: var(--xffa-land-1); }
.xffa-land-stop-2 { stop-color: var(--xffa-land-2); }
.xffa-sea { fill: url(#xffaSea); }
.xffa-land { fill: url(#xffaLand); }
.xffa-grid-line { stroke: var(--xffa-grid); }
.xffa-road { stroke: var(--xffa-road); }
.xffa-river { stroke: var(--xffa-river); }
.xffa-river-hi { opacity: .7; stroke-width: 1; }
.xffa-region-poly { fill: transparent; stroke: transparent; stroke-width: 0; pointer-events: none; }
.xffa-region-poly.xffa-region-hover { fill: transparent; }
.xffa-region-hl { stroke: transparent !important; stroke-width: 0 !important; }
.xffa-region-ov { fill: transparent; stroke: transparent; stroke-width: 0; pointer-events: none; }
.xffa-region-ov.xffa-region-hover { fill: transparent !important; }
.xffa-region-ov.xffa-region-hl { stroke: transparent !important; stroke-width: 0 !important; }
.xffa-label { fill: var(--xffa-label); paint-order: stroke; stroke: var(--xffa-label-stroke); stroke-width: 3; }
.xffa-map-note { color: var(--xffa-note); }

/* 地图模式切换控件（浅色/深色、标准/卫星/深色） */
.xffa-map-modes { position: absolute; left: 10px; bottom: 12px; z-index: 7; display: flex; gap: 6px; }
.xffa-map-modes button {
  padding: 4px 11px; font-size: 12px; border-radius: 14px; cursor: pointer;
  background: color-mix(in srgb, var(--line-2) 88.0%, transparent); border: 1px solid var(--line-2); color: var(--sub);
}
.xffa-map-modes button:hover { color: var(--txt); border-color: var(--sub); }
.xffa-map-modes button.on { color: var(--txt); border-color: currentColor; background: color-mix(in srgb, var(--bg-2) 90.0%, transparent); }

/* 首页一张图：标记信息卡片 */
.map-info-card {
  position: absolute; left: 10px; top: 52px; z-index: 9; width: 252px; max-width: calc(100% - 20px);
  display: none; pointer-events: auto;
  background: color-mix(in srgb, var(--panel) 96.0%, transparent); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 12px 13px 13px; color: var(--txt);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--txt-2) 45.0%, transparent);
}
.map-info-card.show { display: block; animation: micIn .15s ease-out; }
@keyframes micIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.map-info-card .mic-close {
  position: absolute; right: 7px; top: 6px; width: 22px; height: 22px; border: 0; cursor: pointer;
  background: transparent; color: var(--sub); font-size: 17px; line-height: 1; border-radius: 5px;
}
.map-info-card .mic-close:hover { background: color-mix(in srgb, var(--panel-2) 8.0%, transparent); color: var(--txt); }
.map-info-card .mic-tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-bottom: 7px; }
.map-info-card .mic-tag.unit { background: color-mix(in srgb, var(--acc) 18.0%, transparent); color: var(--tx-orange); }
.map-info-card .mic-tag.hyd { background: color-mix(in srgb, var(--c-luodian) 18.0%, transparent); color: var(--tx-teal); }
.map-info-card .mic-tag.org { background: color-mix(in srgb, var(--acc-2) 18.0%, transparent); color: var(--tx-gold); }
.map-info-card h4 { margin: 0 0 8px; font-size: 15px; color: var(--txt); padding-right: 20px; }
.map-info-card .mic-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed color-mix(in srgb, var(--c-luodian) 16.0%, transparent); }
.map-info-card .mic-row:last-child { border-bottom: 0; }
.map-info-card .mic-row span { color: var(--sub); }
.map-info-card .mic-row b { color: var(--txt); font-weight: 600; text-align: right; }
.map-info-card .mic-note { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--txt-2); background: color-mix(in srgb, var(--panel-2) 4.0%, transparent); border-radius: 6px; padding: 7px 9px; }

/* ============ 移动端适配 ============ */
.mobile-only { display: none !important; }
@media (max-width: 768px) {
  .mobile-only { display: inline-flex !important; }
  .hide-sm { display: none !important; }
  .field-row { flex-direction: column; gap: 0; }
  .modal { max-height: 92vh; }
  table.grid th, table.grid td { padding: 7px 8px; font-size: 12.5px; }
}

/* ============ 通用折叠组件（v1.1.0.41） ============ */
/* 后台「图标设置」分类、首页统计区等所有折叠区共用，交互完全一致：
   默认收起、点标题切换、箭头指示、localStorage 记忆。 */
.xf-collapse {
  border: 1px solid var(--line);
  border-radius: 9px;
  margin-top: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel-2) 4.0%, transparent);
}
.xf-collapse-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; cursor: pointer; user-select: none;
  font-weight: 600; font-size: 13px; color: var(--txt);
}
.xf-collapse-head:hover { background: color-mix(in srgb, var(--panel-2) 8.0%, transparent); }
.xf-collapse-head .xf-caret {
  display: inline-block; flex: none; margin-left: 6px; font-size: 11px;
  color: var(--sub); transition: transform .15s ease; transform: rotate(0deg);
}
.xf-collapse.open .xf-collapse-head .xf-caret { transform: rotate(90deg); }
.xf-collapse-body { display: none; padding: 10px 12px; border-top: 1px solid var(--line); }
.xf-collapse.open .xf-collapse-body { display: block; }

/* 首页统计区等「整块面板」折叠：在 .panel 上加 .collapsible */
.panel.collapsible .panel-head { cursor: pointer; user-select: none; }
.panel.collapsible .panel-body { display: none; }
.panel.collapsible.open .panel-body { display: block; }
.panel.collapsible .panel-head .xf-caret {
  display: inline-block; flex: none; margin-left: 6px; font-size: 11px;
  color: var(--sub); transition: transform .15s ease;
}
.panel.collapsible.open .panel-head .xf-caret { transform: rotate(90deg); }