/* 指挥调度平台 - 全局样式（简洁明亮） */
:root {
    --primary: #1677ff;
    --primary-dark: #0958d9;
    --primary-soft: #e8f2ff;
    --danger: #d7263d;
    --danger-soft: #fdecee;
    --success: #1d9a41;
    --success-soft: #e9f7ee;
    --warn: #b8860b;
    --warn-soft: #fff7e6;
    --text: #1f2937;
    --text-sub: #6b7280;
    --border: #e5e7eb;
    --bg: #f4f6f9;
    --panel: #ffffff;
    --radius: 10px;
    --shadow: 0 2px 10px rgba(16, 24, 40, .06);
    --shadow-lg: 0 8px 28px rgba(16, 24, 40, .12);
    /* 地图覆盖层亮色主题（两侧面板 / 信息窗口 / 视频浮窗 / 搜索栏）
       白色明亮风格：白玻璃底 + 蓝色点缀 + 柔和阴影，文字深色可读 */
    --tech-bg: rgba(255, 255, 255, 0.94);
    --tech-bg-2: rgba(248, 250, 252, 0.97);
    --tech-bg-3: rgba(243, 246, 250, 0.92);
    --tech-bg-card: rgba(247, 249, 252, 0.95);
    --tech-line: rgba(22, 119, 255, 0.22);
    --tech-line-bright: rgba(22, 119, 255, 0.45);
    --tech-cyan: #1677ff;
    --tech-cyan-2: #4096ff;
    --tech-cyan-3: #69b1ff;
    --tech-blue: #1677ff;
    --tech-text: #1f2937;
    --text-bright: #0f172a;
    --text-white: #0f172a;
    --tech-sub: #6b7280;
    --tech-sub-dim: #9ca3af;
    --tech-glow: 0 2px 12px rgba(16, 24, 40, 0.08);
    --tech-glow-strong: 0 8px 28px rgba(16, 24, 40, 0.14);
    --tech-accent-red: #d7263d;
    --tech-accent-orange: #d97706;
    --tech-accent-green: #1d9a41;
    --tech-accent-purple: #7c3aed;
    /* 统一 hover 色板：全部基于主色 #1677ff，避免青/蓝色相混用导致的突兀变色 */
    --hover-bg: rgba(22, 119, 255, .06);
    --hover-bg-strong: rgba(22, 119, 255, .12);
    --hover-border: rgba(22, 119, 255, .45);
    --hover-text: #1677ff;
    --hover-text-strong: #0958d9;
    --hover-danger-bg: rgba(215, 38, 61, .08);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: var(--text);
    background: var(--bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

/* 链接配色：未悬停时与正文同色（深色可读），悬停时变为主题蓝，
   避免"亮蓝链接文字在白色背景上到处突兀"的视觉噪音 */
a { color: var(--text); text-decoration: none; }
a:link    { color: var(--text); }
a:visited { color: var(--text); }
a:hover   { color: var(--primary); }
a:active  { color: var(--primary-dark); }
h1, h2, h3, h4 { margin: 0 0 12px; font-weight: 600; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
code { background: #f1f3f5; padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ---------- 卡片 / 按钮 / 表单 ---------- */
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 16px;
}
.card > h2:first-child { margin-top: 0; }

.btn {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all .15s;
}
.btn:hover { border-color: var(--primary); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.06); color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 按钮内的 <a> 链接：强制白色文字，防止全局 a 规则或地图 InfoWindow 内置样式污染 */
a.btn-primary, a.btn-danger, a.btn-tech { color: #ffffff !important; }
a.btn-primary:hover, a.btn-danger:hover, a.btn-tech:hover { color: #ffffff !important; }

label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 13px; }
input[type=text], input[type=password], input[type=number], input[type=tel], select, textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,119,255,.1); }
textarea { min-height: 88px; resize: vertical; }
.field { margin-bottom: 14px; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }

.alert { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; }
.alert-error   { background: var(--danger-soft); color: #a3123a; border: 1px solid #f3bcc7; }
.alert-success { background: var(--success-soft); color: #1d6b32; border: 1px solid #b7e2c4; }
.alert-warn    { background: var(--warn-soft); color: var(--warn); border: 1px solid #ffe1a1; }
.alert-info    { background: var(--primary-soft); color: var(--primary-dark); border: 1px solid #bcdcff; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}
.badge-gray { background: #9ca3af; }
.badge-outline { background: transparent; border: 1px solid var(--border); color: var(--text-sub); }

.table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.table th, .table td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.table th { background: #f8fafc; font-weight: 600; color: var(--text-sub); white-space: nowrap; }
.table tbody tr:hover { background: var(--hover-bg); }
.table .nowrap { white-space: nowrap; }
.table-responsive { overflow-x: auto; }

.empty { padding: 30px; text-align: center; color: var(--text-sub); }
.muted { color: var(--text-sub); }
.small { font-size: 12px; }
.tip { font-size: 12px; color: var(--text-sub); }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.row-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- 登录 / 注册 ---------- */
.auth-page {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 15px;
    background: linear-gradient(135deg, #eaf2ff 0%, #f6f8fb 55%, #e9f6f1 100%);
}
.auth-box {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 30px;
}
.auth-box h1 { font-size: 22px; text-align: center; margin-bottom: 4px; }
.auth-box .sub { text-align: center; color: var(--text-sub); margin-bottom: 20px; font-size: 13px; }
.auth-links { display: flex; justify-content: space-between; margin-top: 14px; font-size: 13px; }

.avatar-upload { display: flex; align-items: center; gap: 14px; }
.avatar-upload img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); background: #f1f3f5; }
.avatar-upload input[type=file] { font-size: 12px; }

/* ---------- 地图主页 ---------- */
.dash { display: flex; flex-direction: column; height: 100%; }
/* 悬浮标题卡片（左上角，浮于地图之上；整页背景即为地图） */
.float-brand {
    position: absolute; top: 12px; left: 12px; z-index: 1003;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid var(--tech-line);
    border-radius: 8px;
    box-shadow: var(--tech-glow-strong);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-weight: 600; font-size: 16px;
    color: var(--text-bright);
    white-space: nowrap;
}
.float-brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tech-accent-red); box-shadow: 0 0 0 4px rgba(215,38,61,.15); flex-shrink: 0; }
.float-brand .fb-title { letter-spacing: 1px; }
/* Logo + 主标题 + 辅标题 */
.float-brand .fb-logo { width: 200px; height: auto; object-fit: contain; border-radius: 6px; flex-shrink: 0; background: rgba(255, 255, 255, .5); padding: 2px; }
/* PNG / SVG 格式 Logo 使用透明背景（保留图片自身透明度） */
.float-brand .fb-logo.is-png { background: transparent; }
.float-brand .fb-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.float-brand .fb-sub { font-size: 11px; font-weight: 400; color: var(--tech-sub); letter-spacing: .3px; }

/* 悬浮用户卡片（右上角，浮于地图之上） */
.float-user {
    position: absolute; top: 12px; right: 12px; z-index: 1003;
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px;
    background: var(--tech-bg);
    border: 1px solid var(--tech-line);
    border-radius: 8px;
    box-shadow: var(--tech-glow-strong);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    flex-wrap: wrap;
    justify-content: flex-end;
}
.float-user .fu-locate { white-space: nowrap; }
.float-user .fu-chip { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 8px; border-radius: 20px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.float-user .fu-chip:hover { background: var(--tech-bg-3); border-color: var(--tech-line); }
.float-user .fu-chip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--tech-line); }
.float-user .fu-name { line-height: 1.2; font-weight: 600; color: var(--text-bright); }
.float-user .fu-meta .small { line-height: 1.2; }

.map-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    /* 强制建立层叠上下文：内部所有子元素的 z-index 都只在 .map-stage 内部比较，
       彻底杜绝第三方地图 SDK 的高 z-index 元素盖住悬浮面板 */
    isolation: isolate;
}

/* 地图包裹层：定位元素 + 非 auto 的 z-index 会创建层叠上下文，
   天地图内部 z-index 高达数百的窗格元素因此被限制在本层内 */
.map-canvas {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;   /* 不用 inset，兼容老浏览器 */
    z-index: 0;
    background: #eaeef3;
}
#mapContainer {
    width: 100%; height: 100%;
    /* 兜底：即使天地图用行内样式改了 position/z-index，!important 也能压过去，
       保证地图容器自身形成层叠上下文，其子元素不会跑到面板之上 */
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    z-index: 0 !important;
}

.panel-layer {
    position: absolute;
    top: 108px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100% - 24px);
    overflow-y: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
/* 顶部预留 108px 给悬浮品牌卡/用户卡片（避免与地图上的用户信息冲突）；底部预留约 96px，避免盖住左下角图例与右下天地图控件 */
.panel-layer.left { left: 12px; max-height: calc(100% - 204px); }
.panel-layer.right { right: 12px; max-height: calc(100% - 204px); }
.panel-layer::-webkit-scrollbar { width: 6px; }
.panel-layer::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }

.fpanel {
    background: var(--tech-bg);
    border: 1px solid var(--tech-line);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .12), 0 2px 8px rgba(16, 24, 40, .06);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    overflow: hidden;
    position: relative;
}
/* 面板顶部装饰线 */
.fpanel::before {
    content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-cyan-2), transparent);
    opacity: .8;
}
/* 面板头部 —— 仿参考图：> 箭头 + 标题 + 深色底 */
.fpanel .fp-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--tech-line);
    background: linear-gradient(90deg, rgba(0, 180, 255, .08), transparent);
    cursor: pointer; user-select: none;
    position: relative;
}
/* > 箭头图标（仿大屏面板标题左侧箭头） */
.fpanel .fp-head::before {
    content: "";
    display: inline-block; flex-shrink: 0;
    width: 7px; height: 7px;
    margin-right: 2px;
    border-top: 2px solid var(--tech-cyan);
    border-right: 2px solid var(--tech-cyan);
    transform: rotate(45deg);
}
.fpanel .fp-head .fp-title {
    color: var(--text-white);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .5px;
    flex: 1;
}
.fpanel .fp-head .fp-toggle {
    color: var(--tech-sub);
    font-size: 11px;
    padding: 2px 8px;
    border: 1px solid rgba(40, 140, 200, .25);
    border-radius: 3px;
    transition: all .15s;
    flex-shrink: 0;
}
.fpanel .fp-head .fp-toggle:hover {
    color: var(--hover-text);
    border-color: var(--hover-border);
    background: var(--hover-bg);
}
.fpanel .fp-body { padding: 12px 14px; font-size: 13px; max-height: 46vh; overflow-y: auto; }
.fpanel.collapsed .fp-body { display: none; }

/* 统计卡片 —— 仿参考图：图标(左) + 数字(中) + 标签(右) 横向布局 */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat-item {
    background: var(--tech-bg-card);
    border: 1px solid var(--tech-line);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 4px;
    position: relative;
    overflow: hidden;
}
/* 统计卡片左侧色条装饰 */
.stat-item::before {
    content: "";
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, rgba(0, 180, 255, .50), rgba(0, 140, 220, .25));
}
.stat-item .num {
    font-size: 22px; font-weight: 800;
    color: var(--text-white);
    line-height: 1.2;
}
.stat-item .lbl {
    font-size: 12px;
    color: var(--tech-sub);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* 项目列表 —— 仿参考图右侧报警列表：图标+文字+操作按钮 */
.plist { list-style: none; margin: 0; padding: 0; }
.plist li {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(40, 140, 200, .10);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    transition: background .15s;
}
.plist li:last-child { border-bottom: 0; }
.plist li:hover {
    background: var(--hover-bg);
    border-radius: 4px;
}
/* 项目名称（左侧主文字） */
.plist .pname {
    font-weight: 600;
    cursor: pointer;
    color: var(--text-white);
    font-size: 13px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plist .pname:hover {
    color: var(--hover-text);
}
/* 项目元信息 */
.plist .pmeta {
    font-size: 11px;
    color: var(--tech-sub-dim);
    flex-shrink: 0;
}

/* 在线人员列表 —— 仿参考图左侧圆形头像+名字+定位按钮 */
.ulist { list-style: none; margin: 0; padding: 0; }
.ulist li {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 4px;
    border-bottom: 1px solid rgba(40, 140, 200, .10);
    transition: background .15s;
}
.ulist li:last-child { border-bottom: 0; }
.ulist li:hover {
    background: var(--hover-bg);
    border-radius: 4px;
}
/* 头像 —— 圆形 + 青色边框辉光 */
.ulist img {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(22, 119, 255, .25);
    flex-shrink: 0;
}
/* 名字行 */
.ulist .uname {
    font-weight: 600;
    color: var(--text-white);
    font-size: 13px;
    flex: 1;
    min-width: 0;
}
.ulist .umeta {
    font-size: 11px;
    color: var(--tech-sub-dim);
}
.role-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }

/* 左下角容器：图例 + 定位状态（避开右上/右下的天地图控件） */
.map-corner {
    position: absolute; left: 12px; bottom: 12px; z-index: 1001;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
    max-width: 46%;
}
.map-status {
    background: var(--tech-bg);
    border: 1px solid var(--tech-line);
    border-radius: 8px;
    padding: 9px 13px;
    font-size: 12px;
    color: var(--tech-sub);
    box-shadow: var(--tech-glow);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.map-status b { color: var(--tech-cyan-2); }
.map-legend {
    background: var(--tech-bg);
    border: 1px solid var(--tech-line);
    border-radius: 8px;
    padding: 9px 13px;
    font-size: 12px;
    box-shadow: var(--tech-glow);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.map-legend .lg-item { display: flex; align-items: center; gap: 6px; margin: 3px 0; color: var(--tech-sub); }
.map-legend .lg-dot { width: 10px; height: 10px; border-radius: 50%; }

/* 顶部工具条居中，避免与左右两侧面板重叠 */
.map-tools {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1002;
    display: flex; gap: 6px;
}
/* 底部「上报位置」快捷按钮：桌面端隐藏，仅手机端显示（见 @media max-width:640px） */
.fab-locate { display: none; }
.map-tools .btn { background: rgba(255,255,255,.96); box-shadow: var(--shadow); }

/* ============================================================
   地图顶部搜索栏 + 城市分类筛选（仿大屏监控中心）
   位置：地图上方居中，工具条下方
   ============================================================ */
.map-search-bar {
    position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
    z-index: 1001;
    display: flex;
    justify-content: center;
    width: auto;
    max-width: calc(100% - 340px - 340px - 40px);
    pointer-events: none;
}
.msb-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    pointer-events: auto;
}
/* 搜索框 */
.msb-search {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--tech-bg);
    border: 1px solid var(--tech-line-bright);
    border-radius: 8px;
    padding: 0 10px;
    width: 320px;
    height: 38px;
    box-shadow: var(--tech-glow-strong), 0 4px 20px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: border-color .2s, box-shadow .2s;
}
.msb-search:focus-within {
    border-color: var(--tech-cyan);
    box-shadow: 0 0 0 3px rgba(22, 119, 255, .15), 0 4px 20px rgba(16, 24, 40, .12);
}
.msb-icon {
    width: 16px; height: 16px; flex-shrink: 0;
    color: var(--tech-sub-dim);
    stroke: var(--tech-cyan-2);
    opacity: .7;
    transition: opacity .2s;
}
.msb-search:focus-within .msb-icon { opacity: 1; }
.msb-search input {
    flex: 1;
    background: transparent;
    border: 0; outline: none;
    color: var(--text-bright);
    font-size: 13px;
    padding: 0 8px;
    font-family: inherit;
    letter-spacing: .5px;
}
.msb-search input::placeholder {
    color: var(--tech-sub-dim);
    opacity: .7;
}
.msb-clear {
    cursor: pointer;
    color: var(--tech-sub-dim);
    font-size: 18px;
    line-height: 1;
    padding: 2px 4px;
    opacity: 0;
    transition: opacity .15s, color .15s;
    user-select: none;
}
.msb-clear.visible { opacity: .7; }
.msb-clear:hover { color: var(--tech-accent-red); opacity: 1; }
/* 城市筛选标签栏 */
.msb-cities {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 420px;
}
.msb-city {
    display: inline-block;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--tech-sub);
    background: var(--tech-bg-3);
    border: 1px solid var(--tech-line);
    border-radius: 20px;
    cursor: pointer;
    user-select: none;
    transition: all .18s ease;
    white-space: nowrap;
}
.msb-city:hover {
    color: var(--hover-text);
    border-color: var(--hover-border);
    background: var(--hover-bg-strong);
}
.msb-city.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(0, 212, 255, .35), rgba(0, 180, 230, .20));
    border-color: var(--tech-cyan);
    box-shadow: 0 0 12px rgba(0, 212, 255, .25), inset 0 0 8px rgba(0, 212, 255, .10);
}
/* 搜索无结果提示 */
.map-no-result {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--tech-bg);
    border: 1px solid var(--tech-line);
    border-radius: 10px;
    padding: 20px 28px;
    text-align: center;
    color: var(--tech-sub);
    font-size: 13px;
    z-index: 500;
    box-shadow: var(--tech-glow-strong);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s;
}
.map-no-result.show { opacity: 1; }
.map-no-result strong { color: var(--tech-cyan-2); }

/* 天地图自带控件（缩放/图层/比例尺）默认在左上，会压住左侧面板，统一移出可视干扰区 */
.map-canvas .tdt-control-container { z-index: 10 !important; }

/* 信息窗口 —— 仿参考图面板风格 */
.iw {
    width: 340px; max-width: 88vw;
    max-height: 480px;
    display: flex; flex-direction: column;
    overflow: hidden;
    font-size: 13px; line-height: 1.5;
    background: var(--tech-bg);
    border: 1px solid var(--tech-line-bright);
    border-radius: 8px;
    box-shadow: var(--tech-glow-strong), 0 8px 32px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255,255,255,.03);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    position: relative;
}
/* 信息窗顶部装饰线 */
.iw::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-cyan-2), transparent);
}
/* 兼容人员标注弹窗 */
.iw h4 { margin: 0 0 8px; font-size: 15px; color: var(--text-white); }
.iw .iw-row { margin: 3px 0; color: #4b5563; }

/* ── 用户信息窗卡片式布局（左头像 + 右信息）── */
.iw-user-card { padding: 14px 16px; }
.iw-user-card .iw-user-main {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px;
}
.iw-user-card .iw-user-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--tech-line-bright);
    flex-shrink: 0;
    background: rgba(255,255,255,.06);
}
.iw-user-card .iw-user-info {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0;
    flex: 1;
}
.iw-user-card .iw-user-name {
    font-size: 16px; font-weight: 700;
    color: var(--text-white);
    line-height: 1.2;
}
.iw-user-card .iw-user-role {
    display: inline-block;
    font-size: 11px; font-weight: 600;
    padding: 1px 8px; border-radius: 10px;
    align-self: flex-start;
    letter-spacing: 0.3px;
}
.iw-user-card .iw-user-phone {
    font-size: 13px; color: #9ca3af;
    margin-top: 2px;
}
.iw-user-card .iw-user-phone b { color: #d1d5db; font-weight: 500; }
.iw-user-card .iw-user-loc {
    font-size: 12px; color: #1f2937;
    padding: 8px 10px;
    background: rgba(200, 205, 212, .35);
    border-radius: 6px;
    border-left: 3px solid var(--tech-cyan);
    line-height: 1.45;
}
.iw-user-card .iw-user-loc b { color: #1f2937; font-weight: 600; }
.iw-user-card .iw-user-time {
    float: right; font-size: 11px; color: #374151;
    white-space: nowrap; margin-left: 8px;
}
.iw-user-card .iw-user-proj {
    margin-top: 8px;
    font-size: 11px; color: #6b7280;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.iw-user-card .iw-user-remark {
    margin-top: 8px;
    font-size: 12px; color: #1f2937;
    padding: 7px 10px;
    background: rgba(200, 195, 230, .40);
    border-radius: 6px;
    border-left: 3px solid #a78bfa;
    line-height: 1.45;
}
.iw-user-card .iw-user-remark b { color: #1f2937; font-weight: 600; }

/* 头部 —— 与面板同款：> 箭头风格 + 深色底 */
.iw-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--tech-line);
    background: linear-gradient(90deg, rgba(0, 180, 255, .08), transparent);
    position: relative;
}
.iw-head::before {
    content: "";
    display: inline-block; flex-shrink: 0;
    width: 7px; height: 7px;
    margin-right: 1px;
    border-top: 2px solid var(--tech-cyan);
    border-right: 2px solid var(--tech-cyan);
    transform: rotate(45deg);
}
.iw-title {
    font-size: 15px; font-weight: 700;
    color: var(--text-white);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1;
}
.iw-edit {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--tech-sub);
    text-decoration: none;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    transition: all .15s;
}
.iw-edit:hover {
    text-decoration: none;
    color: var(--primary);
    border-color: var(--hover-border);
    background: var(--hover-bg);
}

/* 正文：分区、可滚动 */
.iw-body { flex: 1 1 auto; overflow-y: auto; padding: 10px 14px; }
.iw-sec {
    padding: 10px 0;
    border-bottom: 1px solid rgba(40, 140, 200, .10);
    position: relative;
}
.iw-sec:last-child { border-bottom: 0; }
/* 分区标题 —— 仿参考图：左侧竖线 + 青色文字 */
.iw-sec-t {
    font-size: 12px;
    font-weight: 700;
    color: var(--tech-cyan);
    margin-bottom: 8px;
    padding-left: 12px;
    position: relative;
    letter-spacing: 1.5px;
}
.iw-sec-t::before {
    content: ""; position: absolute; left: 0; top: 1px; bottom: 1px;
    width: 3px;
    background: linear-gradient(180deg, var(--tech-cyan), var(--tech-cyan-3));
    border-radius: 2px;
}
.iw-sec-t i { font-style: normal; font-weight: 400; color: var(--tech-sub-dim); margin-left: 5px; font-size: 11px; }

/* 键值对 */
.iw-kv { display: flex; gap: 10px; margin: 5px 0; align-items: baseline; }
.iw-kv > span { flex: 0 0 48px; color: var(--tech-sub); font-size: 12px; }
.iw-kv > b { font-weight: 600; color: var(--text-white); font-size: 13px; }
.iw-kv.block { flex-direction: column; gap: 3px; margin: 6px 0; }
.iw-kv.block > span { flex: none; color: var(--tech-cyan); font-weight: 600; font-size: 12px; }
.iw-kv.block p { margin: 0; color: #374151; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.6; }
.iw-sublist { color: #374151; }
.iw-updated { margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(40, 140, 200, .10); }

.iw-imgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; align-items: center; }
.iw-imgs img {
    width: 100%; height: 54px; object-fit: cover;
    border: 1px solid var(--tech-line); border-radius: 5px;
    cursor: pointer;
    background: #f1f3f5;
    transition: border-color .15s, box-shadow .15s;
}
.iw-imgs img:hover { border-color: var(--tech-cyan); box-shadow: 0 0 0 2px rgba(22, 119, 255, .18); }
.iw-imgs .iw-more { font-size: 11px; color: var(--tech-sub-dim); align-self: center; }

.iw-members { display: flex; flex-direction: column; gap: 4px; }
.iw-member { display: flex; gap: 8px; align-items: baseline; font-size: 12px; padding: 4px 0; }
.iw-member b { color: var(--text-white); font-weight: 600; }
.iw-member span { color: var(--tech-sub-dim); }

/* 底部常驻操作 */
.iw-foot {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-top: 1px solid var(--tech-line);
    background: linear-gradient(90deg, rgba(0, 180, 255, .05), transparent);
}
.btn-block { display: block; width: 100%; text-align: center; box-sizing: border-box; }

/* 项目图片缩略图（后台表单） */
.img-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.img-thumb { width: 86px; text-align: center; }
.img-thumb img {
    width: 86px; height: 64px; object-fit: cover;
    border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.img-thumb label {
    font-size: 11px; font-weight: 400; margin-top: 2px;
    display: flex; align-items: center; justify-content: center; gap: 3px;
}

/* FLV 监控播放浮窗 —— 仿面板风格 */
.flv-window {
    position: fixed; right: 20px; bottom: 20px;
    width: 480px; max-width: 94vw;
    background: var(--tech-bg);
    border: 1px solid var(--tech-line-bright);
    border-radius: 8px;
    box-shadow: var(--tech-glow-strong), 0 8px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255,255,255,.03);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    z-index: 10050; overflow: hidden;
    position: relative;
}
.flv-window::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-cyan-2), transparent);
}
.flv-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 14px;
    background: linear-gradient(90deg, rgba(0, 180, 255, .08), transparent);
    border-bottom: 1px solid var(--tech-line);
    font-weight: 700; font-size: 13px;
    user-select: none;
    color: var(--text-white);
}
.flv-head .flv-title { }
.flv-close {
    cursor: pointer;
    color: var(--tech-sub);
    font-size: 18px; padding: 0 4px; line-height: 1;
    transition: color .15s;
}
.flv-close:hover { color: var(--tech-accent-red); }
.flv-body video { display: block; width: 100%; height: 260px; background: #000; }
.ezuikit-host { width: 100%; height: 270px; background: #000; }
.ezuikit-host iframe, .ezuikit-host canvas, .ezuikit-host video { width: 100% !important; height: 100% !important; display: block; border: 0; }
.flv-tip { padding: 0 14px 10px; color: var(--tech-sub); font-size: 12px; }
.flv-foot {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 14px 10px;
    border-top: 1px solid var(--tech-line);
    background: linear-gradient(90deg, rgba(0, 180, 255, .03), transparent);
}
.flv-url { font-size: 11px; word-break: break-all; max-height: 34px; overflow: hidden; line-height: 1.4; color: var(--tech-sub-dim); }
.flv-act { font-size: 12px; color: var(--tech-sub); }
.flv-act a { color: var(--text-sub); cursor: pointer; text-decoration: none; transition: color .15s; }
.flv-act a:hover { color: var(--primary); }

/* ============================================================
   科技感玻璃拟态主题覆盖（地图覆盖层）
   深度仿照智慧消防大屏监控中心
   ============================================================ */

/* 天地图信息窗口外壳透明化 */
.tdt-infowindow,
.tdt-infowindow-content-wrapper,
.tdt-infowindow-content,
.tdt-infowindow-tip,
.tdt-infowindow-top,
.tdt-infowindow-bottom,
.tdt-infowindow-left,
.tdt-infowindow-right {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* 两侧浮动面板 —— 覆盖层强化 */
.fpanel .fp-head {
    background: linear-gradient(90deg, rgba(0, 180, 255, .08), transparent);
}
.fpanel .fp-body { color: var(--tech-text); }

/* 面板内组件 */
.fpanel .stat-item { background: var(--tech-bg-card); border-color: var(--tech-line); }
.fpanel .stat-item .num {
    color: var(--text-white);
}
.fpanel .stat-item .lbl { color: var(--tech-sub); }
.fpanel .plist li { border-bottom-color: rgba(40, 140, 200, .10); }
.fpanel .plist .pname { color: var(--text-white); }
.fpanel .plist .pname:hover { color: var(--hover-text); }
.fpanel .plist .pmeta { color: var(--tech-sub-dim); }
.fpanel .ulist li { border-bottom-color: rgba(40, 140, 200, .10); }
.fpanel .ulist .uname { color: var(--text-white); }
.fpanel .ulist .umeta { color: var(--tech-sub-dim); }
/* 面板内按钮 */
.fpanel .btn {
    background: rgba(0, 180, 255, .08);
    border: 1px solid rgba(40, 140, 200, .25);
    color: var(--tech-cyan-2);
    font-size: 11px; padding: 3px 10px;
}
.fpanel .btn:hover {
    background: var(--hover-bg-strong);
    border-color: var(--hover-border);
    color: var(--hover-text-strong);
}

/* 地图左下角图例 / 状态条 */
.map-status, .map-legend {
    background: var(--tech-bg);
    border: 1px solid var(--tech-line);
    color: var(--tech-sub);
    box-shadow: var(--tech-glow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.map-legend .lg-item { color: var(--tech-sub); }
.map-status b { color: var(--tech-cyan-2); }

/* 顶部工具条 */
.map-tools .btn {
    background: var(--tech-bg);
    border: 1px solid var(--tech-line);
    color: var(--tech-text);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--tech-glow);
    font-size: 12px;
}
.map-tools .btn:hover { border-color: var(--hover-border); background: var(--hover-bg); }

/* 搜索栏暗色主题（确保在深色地图上协调） */
.msb-search { background: var(--tech-bg-2); border-color: var(--tech-line-bright); }
.msb-search input { color: var(--text-white); }
.msb-city { background: rgba(255, 255, 255, .88); border-color: var(--border); color: var(--text); }
.msb-city:hover { border-color: var(--primary); background: #fff; }
.msb-city.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(0, 212, 255, .30), rgba(0, 180, 230, .15));
    border-color: var(--tech-cyan);
    box-shadow: 0 0 10px rgba(0, 212, 255, .20);
}

/* 信息窗口内容亮色化 */
.iw { color: var(--tech-text); }
.iw h4 { color: var(--text-white); }
.iw .iw-row { color: #4b5563; }
.iw .iw-row b { color: var(--text-white); }
.iw .muted { color: var(--tech-sub-dim) !important; }
.iw-edit { color: var(--tech-sub); }
.iw-edit:hover { color: var(--primary); }
.iw-sec { border-bottom-color: rgba(40, 140, 200, .10); }
.iw-sec-t { color: var(--tech-cyan); }
.iw-sec-t i { color: var(--tech-sub-dim); }
.iw-kv > span { color: var(--tech-sub); }
.iw-kv > b { color: var(--text-white); }
.iw-kv.block p { color: #374151; }
.iw-imgs img { border-color: var(--tech-line); background: rgba(14, 28, 52, .8); }
.iw-imgs img:hover { border-color: var(--tech-cyan); box-shadow: 0 0 0 2px rgba(22, 119, 255, .18); }
.iw-member b { color: var(--text-white); }
.iw-member span { color: var(--tech-sub-dim); }
.iw-foot { background: linear-gradient(90deg, rgba(0, 180, 255, .04), transparent); }

/* 视频浮窗亮色化 */
.flv-head { background: linear-gradient(90deg, rgba(0, 180, 255, .06), transparent); color: var(--text-white); border-bottom-color: var(--tech-line); }
.flv-close { color: var(--tech-sub); }
.flv-close:hover { color: var(--tech-accent-red); }
.flv-tip { color: var(--tech-sub); }
.flv-foot { background: linear-gradient(90deg, rgba(0, 180, 255, .03), transparent); }
.flv-act a { color: var(--text-sub); }
.flv-act a:hover { color: var(--primary); }
.flv-url { color: var(--tech-sub-dim); }

/* 科技感视频按钮 —— 白色明亮风格：实心蓝底 + 白色文字 + 顶部扫描线 */
.btn-tech {
    display: inline-block; width: 100%; text-align: center; box-sizing: border-box;
    padding: 12px 18px;
    border: 1px solid var(--primary-dark);
    border-radius: 6px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #ffffff;
    font-weight: 700; letter-spacing: 2px; font-size: 13px;
    box-shadow: 0 2px 10px rgba(22, 119, 255, .25);
    cursor: pointer; user-select: none;
    transition: all .20s ease;
    position: relative;
    overflow: hidden;
}
/* 按钮顶部扫描线 */
.btn-tech::before {
    content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    animation: btn-sweep 2.5s ease-in-out infinite;
}
@keyframes btn-sweep {
    0% { left: -60%; }
    100% { left: 160%; }
}
.btn-tech:hover {
    background: linear-gradient(135deg, #2f8bff 0%, var(--primary) 100%);
    box-shadow: 0 4px 16px rgba(22, 119, 255, .4);
    color: #ffffff;
}
.btn-tech:active {
    transform: scale(.98);
    box-shadow: 0 1px 6px rgba(22, 119, 255, .35);
}

/* ---------- 后台布局 ---------- */
.admin { display: flex; min-height: 100vh; }
.sidebar {
    width: 210px; flex: 0 0 210px;
    background: #fff; border-right: 1px solid var(--border);
    padding: 14px 10px;
}
.sidebar .sb-title { font-weight: 700; font-size: 15px; padding: 6px 10px 14px; display: flex; align-items: center; gap: 8px; }
.sidebar a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 8px; color: var(--text); margin-bottom: 2px; font-size: 14px;
}
.sidebar a:hover { background: var(--hover-bg); color: var(--hover-text); }
.sidebar a.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.sidebar .sb-group { font-size: 12px; color: var(--text-sub); padding: 12px 12px 6px; }
.admin-main { flex: 1; min-width: 0; padding: 18px 22px; background: var(--bg); }
.admin-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.admin-head h2 { margin: 0; }

/* ---------- 导入导出 / 备份 三栏卡片 ---------- */
.imp-box { flex: 1; min-width: 220px; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: #fbfcfe; }
.imp-box h3 { font-size: 15px; margin: 0 0 6px; }
.imp-box .small, .imp-box p.small { color: var(--text-sub); margin: 0 0 10px; line-height: 1.5; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; height: 56px; padding: 0 22px; background: #fff; border-bottom: 1px solid var(--border); }

/* ---------- 项目选择 / 复选 ---------- */
.project-picker { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: #fbfcfe; }
.project-picker label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0 0 6px; cursor: pointer; }

/* ---------- 天地图选点 ---------- */
.pick-map { height: 320px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; }
.search-result { border: 1px solid var(--border); border-radius: 8px; max-height: 220px; overflow-y: auto; margin-top: 8px; display: none; }
.search-result .item { padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.search-result .item:hover { background: var(--primary-soft); }
.search-result .item:last-child { border-bottom: 0; }
.search-result .item .name { font-weight: 500; }
.search-result .item .addr { font-size: 12px; color: var(--text-sub); }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    .admin { flex-direction: column; }
    .sidebar { width: 100%; flex: none; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); }
    .sidebar .sb-title, .sidebar .sb-group { display: none; }
    .sidebar a { white-space: nowrap; }
    .admin-main { padding: 14px; }
}

/* ============ 手机端响应式（≤640px，以竖屏为主）============
   目标：整页地图背景不变，所有悬浮元素重排为
   「顶部信息条（品牌/用户）＋ 中部搜索与工具条 ＋ 底部并排面板抽屉」，
   互不重叠、不溢出、可滚动。 */
@media (max-width: 640px) {
    /* —— 左上：品牌标题卡，缩小 —— */
    .float-brand {
        top: 8px; left: 8px;
        padding: 6px 10px;
        font-size: 13px;
        gap: 7px;
        border-radius: 7px;
    }
    .float-brand .dot { width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(215,38,61,.15); }
    .float-brand .fb-title { letter-spacing: .5px; }
    .float-brand .fb-logo { display: none; }

    /* —— 右上：用户卡，精简为「头像 + 退出」，定位提示换行右对齐 —— */
    .float-user {
        top: 8px; right: 8px;
        padding: 5px 8px;
        gap: 8px;
        border-radius: 7px;
        align-items: center;
    }
    /* 隐藏中间的文字按钮（后台管理 / 个人中心）；头像点击可进个人中心，退出保留 */
    .float-user a.btn:not([href*="logout"]) { display: none; }
    .float-user .fu-chip { padding: 2px 4px; }
    .float-user .fu-chip img { width: 28px; height: 28px; }
    .float-user .fu-meta .small { display: none; }            /* 角色名隐藏，仅留姓名 */
    .float-user .fu-name { font-size: 13px; }
    .float-user a.btn.btn-sm { padding: 4px 9px; font-size: 12px; }
    /* 定位提示：换行占满整行、右对齐小字，保证定位信息仍在 */
    .float-user .fu-locate {
        flex-basis: 100%;
        text-align: right;
        font-size: 11px;
        line-height: 1.3;
        margin-top: 2px;
    }

    /* —— 顶部工具条：手机端已隐藏（改由底部「上报位置」按钮承担），仅保留规则以免桌面样式串味 —— */
    .map-tools { top: 42px; gap: 5px; }
    .map-tools .btn { padding: 4px 10px; font-size: 12px; }

    /* —— 搜索栏 + 城市筛选：占满宽度居中、城市标签横向滚动 —— */
    .map-search-bar {
        top: 46px;
        width: 94%;
        max-width: 94%;
    }
    .msb-search { width: 100%; height: 40px; padding: 0 12px; }
    .msb-search input { font-size: 14px; padding: 0 6px; }
    .msb-cities {
        max-width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 3px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .msb-cities::-webkit-scrollbar { height: 4px; }
    .msb-cities::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 2px; }
    .msb-city { flex: 0 0 auto; padding: 4px 13px; font-size: 12px; }

    /* —— 左右面板：手机端隐藏，只保留地图内容 —— */
    .panel-layer { display: none !important; }
    .fpanel .fp-head { padding: 10px 12px; font-size: 13px; }
    .fpanel .fp-head .fp-title { font-size: 13px; }
    .fpanel .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .fpanel .stat-item { padding: 9px 8px; }
    .fpanel .stat-item .num { font-size: 20px; }

    /* —— 左下角图例/状态：手机端隐藏 —— */
    .map-corner { display: none; }

    /* —— 右上角用户信息卡：手机端隐藏（仅保留地图 + 上报位置按钮） —— */
    .float-user { display: none !important; }

    /* —— 顶部工具条：手机端隐藏，改由底部「上报位置」快捷按钮承担 —— */
    .map-tools { display: none !important; }

    /* —— 底部「上报位置」快捷按钮（仅手机端显示） —— */
    .fab-locate {
        position: fixed; left: 12px; bottom: 14px; z-index: 1300;
        display: flex; align-items: center; gap: 6px;
        padding: 11px 18px; border: 0; border-radius: 999px;
        background: var(--primary); color: #fff;
        font-size: 14px; font-weight: 600; cursor: pointer;
        box-shadow: 0 6px 18px rgba(22, 119, 255, .35);
        transition: background .15s, transform .1s;
    }
    .fab-locate:active { transform: scale(.96); background: var(--primary-dark); }
    .fab-locate svg { width: 16px; height: 16px; }

    /* —— 报警提醒条：让开左下角的上报按钮，保证提醒仍可见 —— */
    .alarm-banner { left: 132px; right: 8px; bottom: 14px; transform: none; }
    /* —— 消息弹窗：抬到提醒条之上，两者不打架 —— */
    .msg-stack { right: 8px; left: 8px; bottom: 96px; width: auto; }

    /* —— 待分配提示：浮于上报按钮之上 —— */
    .map-pending {
        max-width: 92%;
        bottom: 78px;
        font-size: 12px;
        padding: 8px 12px;
    }
}

/* 超窄屏（≤380px）进一步收紧，避免品牌卡与用户卡挤压 */
@media (max-width: 380px) {
    .float-brand { font-size: 12px; padding: 5px 8px; }
    .float-brand .fb-title { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
    .map-tools { top: 40px; }
    .map-tools .btn { padding: 3px 8px; font-size: 11px; }
    .map-search-bar { top: 44px; }
}

/* ================================================================== */
/* 消防控制室「五知四快」模块（project_wuzhi.php / admin/wuzhi.php）      */
/* ================================================================== */
.wz-page { max-width: 1180px; margin: 0 auto; padding: 18px 20px 40px; }

.wz-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.wz-title { font-size: 20px; font-weight: 700; color: var(--tech-text); }
.wz-sub { margin-top: 4px; }

.wz-tabs {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    border-bottom: 2px solid var(--border); margin-bottom: 18px;
}
.wz-tab {
    appearance: none; border: none; background: none; cursor: pointer;
    font-size: 15px; color: var(--tech-sub); padding: 10px 16px;
    border-bottom: 3px solid transparent; margin-bottom: -2px; font-weight: 600;
    transition: color .15s, border-color .15s;
}
.wz-tab:hover { border-bottom-color: var(--primary); }
.wz-tab.active { color: var(--tech-cyan); border-bottom-color: var(--tech-cyan); }
.wz-tab i {
    font-style: normal; font-size: 12px; background: var(--tech-bg-3);
    color: var(--tech-sub); border-radius: 10px; padding: 1px 7px; margin-left: 5px;
}
.wz-tab-link {
    margin-left: auto; color: var(--tech-cyan); text-decoration: none;
    border: 1px solid var(--tech-line); border-radius: 8px; padding: 8px 14px;
}
.wz-tab-link:hover { background: var(--tech-bg-3); }

.wz-block { margin-bottom: 26px; }
.wz-h3 { font-size: 17px; margin: 0 0 10px; color: var(--tech-text); }
.wz-note { color: var(--tech-sub); font-size: 13px; line-height: 1.7; margin: 0 0 14px; background: var(--tech-bg-2); border: 1px solid var(--tech-line); border-radius: 10px; padding: 10px 14px; }
.wz-tip { color: var(--tech-sub-dim); font-size: 13px; margin: 8px 0 0; }
.wz-list { margin: 0; padding-left: 20px; }
.wz-list li { line-height: 1.85; color: var(--tech-text); margin-bottom: 2px; }
.wz-list-dot { list-style: disc; }

.wz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wz-card {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 16px 14px 18px; position: relative; overflow: hidden;
    box-shadow: var(--tech-glow);
}
.wz-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--tech-accent-red), var(--tech-cyan));
}
.wz-card-h { font-size: 16px; font-weight: 700; color: var(--tech-cyan); margin-bottom: 8px; }
.wz-card .wz-list { padding-left: 18px; }
.wz-card .wz-list li { font-size: 13px; line-height: 1.8; }

.wz-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.wz-step {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 16px; box-shadow: var(--tech-glow);
}
.wz-step-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.wz-step-key {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px;
    background: var(--tech-accent-red); color: #fff; font-weight: 700; font-size: 13px;
}
.wz-step-h b { font-size: 16px; color: var(--tech-text); }
.wz-step-time { margin-left: auto; font-size: 12px; color: var(--tech-sub); }

/* 记录表格 */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.wz-table { margin-bottom: 0; background: #fff; }
.wz-table th, .wz-table td { white-space: normal; }
.wz-table td.small, .wz-table td .small { font-size: 12px; color: var(--tech-sub); }

.wz-badge {
    display: inline-block; font-size: 12px; line-height: 1; padding: 3px 8px;
    border-radius: 999px; font-weight: 600; white-space: nowrap;
}
.lv-ok   { background: #e7f7ec; color: #1d9a41; }
.lv-warn { background: #fff3e0; color: #d97706; }
.lv-bad  { background: #fdecee; color: #d7263d; }
.lv-plain{ background: var(--tech-bg-3); color: var(--tech-cyan); }

.wz-empty { text-align: center; color: var(--tech-sub); padding: 28px 16px; border: 1px dashed var(--tech-line); border-radius: 12px; background: var(--tech-bg-2); }

/* 后台填写表单 */
.wz-form {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 16px 18px; margin-bottom: 6px;
}
.wz-form-h { font-size: 15px; font-weight: 700; color: var(--tech-text); margin-bottom: 12px; }
.wz-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.wz-grid5 .field { min-width: 0; }

@media (max-width: 900px) {
    .wz-grid { grid-template-columns: repeat(2, 1fr); }
    .wz-steps { grid-template-columns: 1fr; }
    .wz-grid5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .wz-page { padding: 14px 12px 32px; }
    .wz-grid { grid-template-columns: 1fr; }
    .wz-grid5 { grid-template-columns: repeat(2, 1fr); }
    .wz-title { font-size: 17px; }
    .wz-tab { font-size: 14px; padding: 9px 11px; }
}
@media (max-width: 420px) {
    .wz-grid5 { grid-template-columns: 1fr; }
}

/* ================================================================== */
/* 在线消息：发消息编辑器 / 浮动弹窗 / 常用语句 / 提示音                      */
/* ================================================================== */

/* 在线人员面板姓名可点击 */
.u-msg-link { color: var(--tech-text); text-decoration: none; cursor: pointer; }
.u-msg-link:hover { color: var(--hover-text); text-decoration: underline; }

/* 发消息编辑器（模态） */
.msg-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 1300;
    background: rgba(15, 23, 42, 0.42);
    align-items: center; justify-content: center;
    padding: 16px;
}
.msg-modal {
    width: 100%; max-width: 460px;
    background: #fff;
    border: 1px solid var(--tech-line);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(2, 8, 23, 0.28);
    overflow: hidden;
    animation: msgPop .18s ease-out;
}
@keyframes msgPop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.mm-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; border-bottom: 1px solid var(--tech-line);
}
.mm-title { font-size: 16px; font-weight: 700; color: var(--tech-text); }
.mm-close {
    border: none; background: transparent; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--tech-sub);
    width: 28px; height: 28px; border-radius: 6px;
}
.mm-close:hover { background: #f1f5f9; color: var(--tech-text); }
.mm-to { padding: 10px 16px; font-size: 14px; color: var(--tech-text); }
.mm-online {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px;
    font-size: 12px; color: #1d9a41; background: rgba(29, 154, 65, 0.12);
}
.mm-text {
    display: block; width: 100%; box-sizing: border-box;
    min-height: 112px; resize: vertical;
    margin: 4px 0 0; padding: 10px 12px;
    border: 1px solid var(--tech-line); border-radius: 8px;
    font: inherit; font-size: 14px; color: var(--tech-text); background: #fbfdff;
    outline: none;
}
.mm-text:focus { border-color: var(--tech-cyan); background: #fff; }
.mm-count { text-align: right; font-size: 12px; color: var(--tech-sub); padding: 2px 16px 0; }
.mm-phrases-title {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px 4px; font-size: 13px; font-weight: 600; color: var(--tech-text);
}
.mm-manage-btn {
    border: none; background: transparent; color: var(--tech-cyan);
    font-size: 12px; cursor: pointer; padding: 2px 6px;
}
.mm-phrases {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 4px 16px 10px; max-height: 150px; overflow: auto;
}
.mm-chip {
    display: inline-block; padding: 6px 11px; border-radius: 16px;
    border: 1px solid var(--tech-line); background: rgba(22, 119, 255, 0.06);
    color: var(--tech-text); font-size: 13px; cursor: pointer; user-select: none;
    white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.mm-chip:hover { background: rgba(22, 119, 255, 0.14); }
.mm-chip.global { background: rgba(22, 119, 255, 0.12); border-color: var(--tech-cyan); color: var(--tech-cyan); }
.mm-manage {
    border-top: 1px dashed var(--tech-line); padding: 10px 16px; margin-top: 2px;
    background: #f8fafc;
}
.mm-manage-list { max-height: 150px; overflow: auto; margin-bottom: 8px; }
.mm-manage-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 5px 0; font-size: 13px; color: var(--tech-text);
    border-bottom: 1px solid #f0f2f5;
}
.mm-mr-text.global { color: var(--tech-cyan); }
.mm-tag { font-style: normal; font-size: 11px; color: var(--tech-cyan); }
.mm-mr-del {
    border: none; background: transparent; color: var(--danger);
    font-size: 12px; cursor: pointer; white-space: nowrap;
}
.mm-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#mmPhraseInput {
    flex: 1; min-width: 140px; box-sizing: border-box;
    border: 1px solid var(--tech-line); border-radius: 8px;
    padding: 7px 10px; font: inherit; font-size: 13px; color: var(--tech-text); outline: none;
}
#mmPhraseInput:focus { border-color: var(--tech-cyan); }
.mm-global { font-size: 12px; color: var(--tech-sub); }
.mm-add-btn, .mm-send {
    border: none; background: var(--tech-cyan); color: #fff;
    border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mm-add-btn:hover, .mm-send:hover { background: #0f63e6; }
.mm-actions { padding: 12px 16px 16px; }
.mm-send { width: 100%; padding: 11px; font-size: 15px; }
.mm-send:disabled { opacity: .6; cursor: default; }

/* 浮动弹窗（接收方） */
.msg-stack {
    position: fixed; right: 16px; bottom: 16px; z-index: 1350;
    display: flex; flex-direction: column; gap: 12px;
    width: min(92vw, 340px); pointer-events: none;
}
.msg-popup {
    pointer-events: auto;
    background: #fff; border: 1px solid var(--tech-line);
    border-left: 3px solid var(--tech-cyan); border-radius: 12px;
    box-shadow: 0 14px 34px rgba(2, 8, 23, 0.2);
    overflow: hidden;
    transform: translateX(24px); opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}
.msg-popup.show { transform: none; opacity: 1; }
.mp-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #f0f2f5; }
.mp-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.mp-meta { flex: 1; min-width: 0; }
.mp-name { font-weight: 700; font-size: 14px; color: var(--tech-text); }
.mp-time { font-size: 11px; color: var(--tech-sub); margin-top: 2px; }
.mp-close {
    border: none; background: transparent; cursor: pointer;
    font-size: 18px; line-height: 1; color: var(--tech-sub);
    width: 24px; height: 24px; border-radius: 6px; flex: none;
}
.mp-close:hover { background: #f1f5f9; color: var(--tech-text); }
.mp-body {
    padding: 10px 12px; font-size: 14px; line-height: 1.6; color: var(--tech-text);
    white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: auto;
}
.mp-foot { padding: 0 12px 10px; }
.mp-reply {
    border: none; background: transparent; color: var(--tech-cyan);
    font-size: 13px; cursor: pointer; padding: 2px 0;
}
.mp-reply:hover { text-decoration: underline; }

/* 发送成功轻提示 */
.msg-toast {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 1400;
    background: rgba(15, 23, 42, 0.9); color: #fff;
    padding: 8px 16px; border-radius: 20px; font-size: 13px;
    box-shadow: 0 8px 24px rgba(2, 8, 23, 0.3);
}

@media (max-width: 640px) {
    .msg-stack { right: 10px; left: 10px; bottom: 10px; width: auto; }
    .msg-popup { width: 100%; }
    .msg-overlay { padding: 10px; }
    .msg-modal { max-width: none; }
}

/* 超窄屏（≤380px）进一步收紧 */
@media (max-width: 380px) {
    .mm-to { font-size: 13px; }
    .mm-phrases { gap: 6px; }
    .mm-chip { font-size: 12px; padding: 5px 9px; }
}

/* ==================================================================
   信息窗关闭按钮 + 一键报警（红色扩散水波纹 / 提醒条）
   ================================================================== */

/* 后台卡片头部（标题 + 右侧操作区）；此前只有语义没有样式 */
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-bottom: 10px;
}

/* 信息窗关闭按钮（天地图 InfoWindow 默认无关闭入口，自行注入） */
.iw-root { position: relative; }
/* 天地图 InfoWindow 容器内样式加固：确保 .iw 弹窗卡片视觉完整 */
.tdt-info-window,
.tdt-infowindow,
.tdt-info-win {
    max-width: 360px !important;
}
.tdt-info-window .iw-root,
.tdt-infowindow .iw-root,
.tdt-info-win .iw-root {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.iw-close {
    position: absolute; top: 6px; right: 6px; z-index: 5;
    width: 26px; height: 26px; line-height: 24px; text-align: center;
    border: 1px solid var(--tech-line, rgba(22, 119, 255, .18));
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #6b7280; font-size: 18px; cursor: pointer;
    padding: 0; box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}
.iw-close:hover { background: var(--hover-danger-bg); color: var(--danger); border-color: rgba(215, 38, 61, .35); }

/* ── 信息窗下方独立「关闭」按钮（浮动定位，不在内容框内）── */
#map-iw-close-btn {
    position: absolute; z-index: 1005;
    display: none; align-items: center; gap: 4px;
    padding: 6px 18px;
    border: 1px solid rgba(156, 163, 175, .35);
    border-radius: 20px;
    background: rgba(255, 255, 255, .92);
    color: #374151; font-size: 13px; cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all .18s ease;
    white-space: nowrap;
}
#map-iw-close-btn:hover {
    background: #fff;
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: 0 3px 12px rgba(215, 38, 61, .2);
}
#map-iw-close-btn span:first-child {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; line-height: 14px;
    font-size: 14px; font-weight: 700;
}
/* 关闭按钮尚未注入头部时（降级为绝对定位），给标题栏右侧留出位置，避免压住「编辑」 */
.iw-root .iw-head { padding-right: 38px; }
.iw-root .iw-body > .iw-sec:first-child { padding-top: 4px; }
/* 已注入头部时：作为 flex 末位元素排列，与「编辑」并列，永不重叠 */
.iw-root.iw-close-inhead .iw-head { padding-right: 14px; }
.iw-head > .iw-close {
    position: static;
    flex: 0 0 auto;
    margin-left: auto;
    width: 24px; height: 24px; line-height: 22px; font-size: 17px;
}

/* 一键报警按钮（信息窗内） */
.btn-danger {
    display: block; width: 100%; text-align: center;
    background: linear-gradient(135deg, #ff3b30, #d7263d);
    color: #fff !important; border: 1px solid #d7263d; border-radius: 8px;
    padding: 9px 12px; font-weight: 600; font-size: 13px; text-decoration: none;
    box-shadow: 0 4px 12px rgba(215, 38, 61, .22);
}
.btn-danger:hover { filter: brightness(1.06); }
.iw-alarm-on {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    background: #fff1f0; border: 1px solid #ffccc7; border-radius: 8px;
    padding: 7px 9px; margin-bottom: 6px;
}
.iw-alarm-on b { color: #d7263d; }
.iw-alarm-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #ff3b30;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, .7); animation: alarmPulse 1.2s infinite;
}
@keyframes alarmPulse {
    70% { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

/* 地图上的红色扩散水波纹（地震波效果） */
.alarm-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 620; }
.alarm-ripple { position: absolute; width: 0; height: 0; }
.alarm-ripple i {
    position: absolute; left: 0; top: 0;
    width: 30px; height: 30px; margin: -15px 0 0 -15px;
    border-radius: 50%;
    border: 3px solid rgba(255, 59, 48, .95);
    background: rgba(255, 59, 48, .22);
    animation: alarmWave 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
}
.alarm-ripple i:nth-child(2) { animation-delay: .8s; }
.alarm-ripple i:nth-child(3) { animation-delay: 1.6s; }
@keyframes alarmWave {
    0%   { transform: scale(.25); opacity: .95; }
    70%  { opacity: .35; }
    100% { transform: scale(4.6); opacity: 0; }
}
.alarm-core {
    position: absolute; left: 0; top: 0;
    width: 22px; height: 22px; margin: -11px 0 0 -11px;
    border-radius: 50%; background: #ff3b30; color: #fff;
    font-size: 14px; font-weight: 700; line-height: 22px; text-align: center;
    border: 2px solid #fff; box-shadow: 0 0 10px rgba(255, 59, 48, .8);
    animation: alarmCore 1.2s ease-in-out infinite;
}
@keyframes alarmCore {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

/* 底部报警提醒条 */
.alarm-banner {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 1200; min-width: 280px; max-width: min(92vw, 520px);
    background: #fff; border: 1px solid #ffccc7; border-left: 4px solid #ff3b30;
    border-radius: 10px; box-shadow: 0 8px 24px rgba(215, 38, 61, .22);
    padding: 9px 11px; display: none;
}
.alarm-banner .ab-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.alarm-banner .ab-head b { color: #d7263d; font-size: 14px; }
.alarm-banner .ab-count {
    margin-left: auto; font-size: 11px; color: #fff; background: #ff3b30;
    border-radius: 10px; padding: 1px 8px;
}
.alarm-banner .ab-item {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 5px 0; border-top: 1px dashed #ffe0dc; font-size: 12px;
}
.alarm-banner .ab-item:first-child { border-top: 0; }
.alarm-banner .ab-name { font-weight: 600; color: #0f172a; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alarm-banner .ab-by { color: #6b7280; }
.alarm-banner .ab-wait { color: #b06a00; font-size: 11px; }
.alarm-banner .ab-btn {
    margin-left: auto; border: 0; border-radius: 6px; padding: 4px 10px;
    font-size: 12px; cursor: pointer; background: #f1f3f5; color: #495057;
}
.alarm-banner .ab-ack { background: #ff3b30; color: #fff; font-weight: 600; }
.alarm-banner .ab-ack:hover { filter: brightness(1.08); }
.alarm-banner .ab-loc { margin-left: 4px; }

/* 报警提示 Toast */
.alarm-toast {
    position: fixed; left: 50%; top: 84px; transform: translateX(-50%);
    z-index: 2200; background: rgba(215, 38, 61, .96); color: #fff;
    padding: 10px 18px; border-radius: 8px; font-size: 13px;
    box-shadow: 0 6px 20px rgba(215, 38, 61, .35);
}

/* 手机端：提醒条让开左下角「上报位置」按钮，保证提醒仍完整可见 */
@media (max-width: 640px) {
    .alarm-banner { left: 132px; right: 8px; bottom: 14px; transform: none; max-width: none; min-width: 0; }
    .alarm-banner .ab-name { max-width: 100px; }
    .alarm-toast { top: 70px; }
    .iw-close { width: 30px; height: 30px; line-height: 28px; font-size: 20px; }
}