/* ============================================================
   汝城警航应用监测系统 · 设计系统（深色科技风）
   Design Tokens + 组件样式
   ============================================================ */

:root {
    /* 色彩 */
    --bg-deep: #04070f;
    --bg-base: #070d1c;
    --bg-raised: #0b1526;
    --panel: rgba(9, 20, 42, 0.82);
    --panel-solid: #0a1428;
    --panel-hover: rgba(21, 42, 80, 0.6);
    --border: rgba(86, 156, 255, 0.16);
    --border-strong: rgba(86, 156, 255, 0.34);

    --primary: #2f7bff;
    --primary-bright: #5ea2ff;
    --cyan: #22d3ee;
    --cyan-dim: rgba(34, 211, 238, 0.14);

    --text-1: #eaf3ff;
    --text-2: #93a9cc;
    --text-3: #5c7396;

    --success: #2dd4a0;
    --warning: #f7b955;
    --danger: #ff5d6c;
    --info: #7c9cc9;

    --danger-bg: rgba(255, 93, 108, 0.12);
    --warning-bg: rgba(247, 185, 85, 0.12);
    --success-bg: rgba(45, 212, 160, 0.12);
    --primary-bg: rgba(47, 123, 255, 0.14);

    /* 尺寸 */
    --topbar-h: 56px;
    --sidebar-w: 216px;
    --sidebar-w-mini: 64px;
    --radius: 10px;
    --radius-sm: 6px;

    /* 字体 */
    --font-num: "DIN Alternate", "Bahnschrift", "Segoe UI", system-ui, sans-serif;

    --shadow: 0 8px 32px rgba(2, 8, 24, 0.55);
    --glow-cyan: 0 0 18px rgba(34, 211, 238, 0.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    background: var(--bg-deep);
    color: var(--text-1);
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
    font-size: 13.5px;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(96, 140, 200, 0.28); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(96, 140, 200, 0.5); }

a { color: var(--primary-bright); text-decoration: none; }

/* ================= 应用骨架 ================= */
#app {
    display: flex;
    height: 100vh;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(34, 90, 210, 0.16), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(20, 120, 160, 0.10), transparent 60%),
        linear-gradient(160deg, #060b18 0%, #04070f 55%, #071021 100%);
}

/* ---------- 侧边导航 ---------- */
.pa-sidebar {
    width: var(--sidebar-w);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background: rgba(6, 12, 26, 0.9);
    border-right: 1px solid var(--border);
    transition: width 0.25s ease;
    z-index: 60;
    position: relative;
}
.pa-sidebar.mini { width: var(--sidebar-w-mini); }

.pa-logo {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.pa-logo-badge {
    width: 34px; height: 34px;
    flex: 0 0 auto;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(4, 10, 24, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.pa-logo-badge img {
    width: 30px; height: 30px;
    object-fit: contain;
    border-radius: 6px;
}
.pa-logo-text { line-height: 1.15; overflow: hidden; white-space: nowrap; }
.pa-logo-text b { display: block; font-size: 15px; letter-spacing: 1px; }
/* 品牌「听风」：渐变大字突出 + 副名称小字 */
.pa-logo-text .brand-name {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-right: 7px;
    background: linear-gradient(120deg, #7ee7ff, #22d3ee 55%, #4f8dff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    vertical-align: 1px;
}
.pa-logo-text .brand-sub-name { font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: 1px; }
.pa-logo-text > span { font-size: 10px; color: var(--text-3); letter-spacing: 0.5px; }
.pa-sidebar.mini .pa-logo-text { display: none; }
.pa-sidebar.mini .pa-logo { justify-content: center; padding: 0; }

.pa-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 8px; }
.pa-nav-group { margin-bottom: 6px; }
.pa-nav-group-title {
    font-size: 10.5px;
    color: var(--text-3);
    letter-spacing: 2px;
    padding: 10px 12px 6px;
    text-transform: uppercase;
    white-space: nowrap;
}
.pa-sidebar.mini .pa-nav-group-title { visibility: hidden; height: 8px; padding: 4px 0; }

.pa-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    margin: 2px 0;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}
.pa-nav-item svg { flex: 0 0 auto; opacity: 0.85; }
.pa-nav-item:hover { background: var(--panel-hover); color: var(--text-1); }
.pa-nav-item.active {
    background: linear-gradient(90deg, rgba(47, 123, 255, 0.22), rgba(47, 123, 255, 0.05));
    color: var(--text-1);
}
.pa-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    border-radius: 2px;
    background: var(--cyan);
    box-shadow: var(--glow-cyan);
}
.pa-nav-item .nav-badge {
    margin-left: auto;
    background: var(--danger);
    color: #fff;
    font-size: 10.5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-num);
}
.pa-sidebar.mini .pa-nav-item { justify-content: center; padding: 11px 0; }
.pa-sidebar.mini .pa-nav-item span.nav-label, .pa-sidebar.mini .nav-badge { display: none; }

.pa-sidebar-foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--border);
    padding: 8px;
}

/* 侧边栏底部系统版本号（与监测站固件版本同步，便于核对前后端是否最新） */
.pa-sys-ver {
    margin-top: 4px;
    padding: 4px 0 2px;
    text-align: center;
    font-size: 10.5px;
    letter-spacing: .5px;
    color: var(--text-3);
    font-family: Consolas, Menlo, monospace;
    user-select: none;
}
.pa-sidebar.mini .pa-sys-ver { font-size: 9px; padding: 4px 0 0; }

/* ---------- 主区域 ---------- */
.pa-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.pa-topbar {
    height: var(--topbar-h);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    border-bottom: 1px solid var(--border);
    background: rgba(7, 13, 28, 0.72);
    backdrop-filter: blur(14px);
    z-index: 50;
}
.pa-topbar-title { font-size: 15.5px; font-weight: 600; letter-spacing: 0.5px; display: flex; align-items: center; gap: 9px; }
.pa-topbar-title .crumb-sep { color: var(--text-3); font-weight: 400; }
.pa-topbar-title .crumb-sub { color: var(--text-2); font-size: 13px; font-weight: 400; }

.pa-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.tb-chip {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 11px;
    border-radius: 20px;
    background: rgba(17, 33, 64, 0.6);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12.5px;
    font-family: var(--font-num);
    letter-spacing: 0.4px;
}
.tb-chip svg { opacity: 0.8; }
.tb-chip.live { color: var(--cyan); border-color: rgba(34, 211, 238, 0.3); }
.tb-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: pa-pulse 2s infinite; }
.tb-chip.warn .dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

@keyframes pa-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.tb-icon-btn {
    width: 36px; height: 36px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: rgba(17, 33, 64, 0.5);
    color: var(--text-2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
}
.tb-icon-btn:hover { color: var(--text-1); border-color: var(--border-strong); background: var(--panel-hover); }
/* 顶栏「快捷入口」菜单复用 .docs-pop 样式（app.js initQuickLinks），
   底部下载二维码样式见下方 .docs-pop .dp-qr。 */
.tb-icon-btn .badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--danger);
    color: #fff; font-size: 10px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-num);
}

/* 文档中心下拉菜单（app.js initDocsCenter） */
.docs-pop {
    position: fixed; z-index: 3000; width: 316px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(14, 28, 54, 0.97);
    border: 1px solid rgba(94, 162, 255, 0.3);
    box-shadow: 0 18px 50px rgba(2, 8, 20, 0.65);
    animation: popIn 0.18s ease;
}
/* 顶栏下拉菜单入场动画（文档中心与快捷入口共用） */
@keyframes popIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.docs-pop .dp-head {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 8px 8px; margin-bottom: 6px;
    font-size: 11.5px; letter-spacing: 2px; color: var(--text-3);
    border-bottom: 1px solid rgba(94, 162, 255, 0.16);
}
.docs-pop .dp-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 8px; border-radius: 10px;
    text-decoration: none; color: var(--text-1);
    transition: background 0.15s;
}
.docs-pop .dp-item:hover { background: rgba(47, 123, 255, 0.16); }
.docs-pop .dp-ico {
    width: 30px; height: 30px; flex: 0 0 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px; color: #8fd4ff;
    background: rgba(47, 123, 255, 0.14);
    border: 1px solid rgba(94, 162, 255, 0.26);
}
.docs-pop .dp-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.docs-pop .dp-meta b { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.docs-pop .dp-meta i { font-style: normal; font-size: 11px; color: var(--text-3); }
.docs-pop .dp-go { margin-left: auto; color: var(--text-3); display: flex; }
.docs-pop .dp-item:hover .dp-go { color: #8fd4ff; }
/* 快捷入口菜单底部：APP 下载二维码与版本号 */
.docs-pop .dp-qr {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px 13px;
    border-top: 1px solid rgba(94, 162, 255, 0.16);
}
.docs-pop .dp-qr-img {
    flex: none; width: 108px; height: 108px;
    background: #fff; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.docs-pop .dp-qr-img canvas, .docs-pop .dp-qr-img img { display: block; }
.docs-pop .dp-qr-tip { font-size: 11.5px; color: var(--text-2); line-height: 1.7; }
.docs-pop .dp-qr-tip div { margin-top: 4px; font-size: 11px; color: #8fd4ff; }

.tb-user {
    display: flex; align-items: center; gap: 9px;
    padding: 4px 10px 4px 5px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: rgba(17, 33, 64, 0.5);
    cursor: pointer;
    transition: all 0.15s;
}
.tb-user:hover { border-color: var(--border-strong); }
.tb-user-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2557c0, #1899b8);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: #fff;
}
.tb-user-meta { line-height: 1.15; }
.tb-user-meta b { display: block; font-size: 12.5px; }
.tb-user-meta span { font-size: 10.5px; color: var(--text-3); }

/* ---------- 视图容器 ---------- */
.pa-view {
    flex: 1;
    min-height: 0;
    overflow: auto;
    position: relative;
}
.pa-view.view-flush { overflow: hidden; }
.view-body { padding: 16px 18px 24px; }

/* ================= 面板 / 卡片 ================= */
.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow);
    position: relative;
}
.panel-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(86, 156, 255, 0.10);
}
.panel-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.6px;
    display: flex; align-items: center; gap: 8px;
}
.panel-title::before {
    content: '';
    width: 3.5px; height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--cyan), var(--primary));
    box-shadow: var(--glow-cyan);
}
.panel-extra { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.panel-body { padding: 14px 16px; }

/* 角标装饰（科技角框） */
.corner-frame { position: relative; }
.corner-frame::before, .corner-frame::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    border-color: rgba(34, 211, 238, 0.55);
    border-style: solid;
    pointer-events: none;
}
.corner-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: 6px; }
.corner-frame::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: 6px; }

/* 指标卡 */
.stat-grid { display: grid; gap: 12px; }
.stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stat-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.stat-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

.stat-card {
    background: linear-gradient(160deg, rgba(20, 40, 82, 0.55), rgba(10, 20, 42, 0.65));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 13px 15px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.stat-card::after {
    content: '';
    position: absolute; right: -18px; top: -18px;
    width: 70px; height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--stat-tint, rgba(47,123,255,0.16)), transparent 70%);
    pointer-events: none;
}
.stat-card .stat-label { color: var(--text-2); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.stat-card .stat-value { font-family: var(--font-num); font-size: 27px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.1; }
.stat-card .stat-value small { font-size: 12px; color: var(--text-3); font-weight: 400; margin-left: 3px; }
.stat-card .stat-sub { font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.stat-card.t-cyan { --stat-tint: rgba(34,211,238,0.2); } .stat-card.t-cyan .stat-value { color: var(--cyan); }
.stat-card.t-blue { --stat-tint: rgba(47,123,255,0.22); } .stat-card.t-blue .stat-value { color: var(--primary-bright); }
.stat-card.t-green { --stat-tint: rgba(45,212,160,0.18); } .stat-card.t-green .stat-value { color: var(--success); }
.stat-card.t-amber { --stat-tint: rgba(247,185,85,0.18); } .stat-card.t-amber .stat-value { color: var(--warning); }
.stat-card.t-red { --stat-tint: rgba(255,93,108,0.2); } .stat-card.t-red .stat-value { color: var(--danger); }

/* ================= 表单 ================= */
.pa-input, .pa-select, .pa-textarea {
    background: rgba(6, 13, 28, 0.75);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    padding: 8px 11px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    width: 100%;
}
.pa-input:focus, .pa-select:focus, .pa-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.15);
}
.pa-input::placeholder, .pa-textarea::placeholder { color: var(--text-3); }
/* 日期输入框：点击任意位置弹出日历（配合 app.js showPicker），手型光标提示可点 */
.pa-input[type="date"] { cursor: pointer; }
.pa-input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.85; filter: invert(0.7) sepia(1) saturate(3) hue-rotate(175deg); }
.pa-select { appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393a9cc' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; cursor: pointer; }
.pa-select option { background: var(--panel-solid); color: var(--text-1); }
.pa-textarea { resize: vertical; min-height: 74px; }

.pa-form-row { display: flex; gap: 12px; margin-bottom: 12px; }
.pa-form-item { flex: 1; min-width: 0; }
.pa-form-item label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.pa-form-item label.req::before { content: '*'; color: var(--danger); margin-right: 3px; }

.search-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.search-bar .pa-input, .search-bar .pa-select { width: auto; min-width: 160px; }

/* ================= 按钮 ================= */
.pa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: rgba(23, 42, 80, 0.55);
    color: var(--text-1);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.pa-btn:hover { background: rgba(38, 66, 120, 0.7); border-color: rgba(120, 175, 255, 0.5); }
.pa-btn:active { transform: translateY(1px); }
.pa-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.pa-btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d98c4);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 14px rgba(37, 99, 235, 0.4);
}
.pa-btn-primary:hover { background: linear-gradient(135deg, #3573f5, #23a8d4); border-color: transparent; }

.pa-btn-danger { background: rgba(255, 93, 108, 0.14); border-color: rgba(255, 93, 108, 0.4); color: var(--danger); }
.pa-btn-danger:hover { background: rgba(255, 93, 108, 0.25); border-color: var(--danger); }

.pa-btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.pa-btn-ghost:hover { background: var(--panel-hover); color: var(--text-1); border-color: transparent; }

.pa-btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 5px; }
.pa-btn-xs { padding: 3px 8px; font-size: 12px; border-radius: 5px; }

/* 分段筛选器（如全部/在线/离线） */
.pa-seg { display: inline-flex; border-radius: 5px; overflow: hidden; border: 1px solid var(--border); }
.pa-seg-item { padding: 4px 12px; font-size: 12px; border: none; background: transparent; color: var(--text-3); cursor: pointer; transition: all .2s; }
.pa-seg-item:not(:last-child) { border-right: 1px solid var(--border); }
.pa-seg-item:hover { color: var(--text-1); background: var(--panel-hover); }
.pa-seg-item.active { background: var(--primary); color: #fff; }

/* ================= 表格 ================= */
.pa-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table.pa-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.pa-table thead th {
    background: rgba(13, 27, 54, 0.85);
    color: var(--text-2);
    font-weight: 500;
    text-align: left;
    padding: 10px 13px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 2;
    letter-spacing: 0.3px;
}
.pa-table tbody td {
    padding: 10px 13px;
    border-bottom: 1px solid rgba(86, 156, 255, 0.07);
    color: var(--text-1);
    vertical-align: middle;
}
.pa-table tbody tr { transition: background 0.12s; }
.pa-table tbody tr:hover { background: rgba(30, 58, 110, 0.25); }
.pa-table tbody tr:last-child td { border-bottom: none; }
.pa-table .cell-num { font-family: var(--font-num); }
.pa-table .cell-sub { color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
/* 长文本单元格：自动换行完整显示（如工单电子存档“处理结果”），不再单行省略截断 */
.pa-table .cell-wrap {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 320px;
}
.pa-table .cell-sn { font-family: var(--font-num); font-size: 12.5px; letter-spacing: 0.3px; color: var(--cyan); cursor: pointer; }
.pa-table .cell-sn:hover { text-decoration: underline; }
/* 违规告警坐标列：序列号改为跳飞行历史后，地图定位入口在这里 */
.pa-table .vio-coord:hover { color: var(--cyan) !important; text-decoration: underline; }
/* 序列号列：限制列宽，监测站名称自动换行 */
.pa-table th.col-sn { width: 160px; }
.pa-table td.col-sn .cell-sub { overflow-wrap: break-word; word-break: break-all; line-height: 1.4; }
/* 行内操作按钮组：允许换行（两行），节省列宽 */
/* 飞行历史行操作现有 5 个按钮（回放/轨迹/激活查询/加白/加入布控），
   216px 会把最后一个挤到换行，使整列高度不齐。 */
.pa-table .row-actions { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; white-space: nowrap; max-width: 300px; }

/* 空状态 */
.pa-empty { padding: 42px 0; text-align: center; color: var(--text-3); }
.pa-empty svg { opacity: 0.4; margin-bottom: 10px; }
.pa-empty p { font-size: 13px; }

/* ================= 标签 / 徽章 ================= */
.pa-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2.5px 9px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}
.pa-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pa-tag-primary { background: var(--primary-bg); color: var(--primary-bright); }
.pa-tag-cyan { background: var(--cyan-dim); color: var(--cyan); }
.pa-tag-success { background: var(--success-bg); color: var(--success); }
.pa-tag-warning { background: var(--warning-bg); color: var(--warning); }
.pa-tag-danger { background: var(--danger-bg); color: var(--danger); }
.pa-tag-info { background: rgba(124, 156, 201, 0.14); color: var(--info); }
.pa-tag-muted { background: rgba(92, 115, 150, 0.14); color: var(--text-3); }

/* ================= 实名库备案标记（全平台统一文字图标） =================
   省=橙底白字、UOM=蓝底白字，实心圆角徽标；APP 端对应 global.scss .rn-flag-* */
.rn-badge {
    display: inline-block;
    padding: 0 6px;
    margin-right: 4px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: 0.5px;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
}
.rn-badge-prov { background: linear-gradient(135deg, #f59e0b, #ea780c); box-shadow: 0 1px 4px rgba(234, 120, 12, 0.45); }
.rn-badge-uom { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 1px 4px rgba(37, 99, 235, 0.45); }
/* “验”=低空话汝现场查验命中：青绿底，与省（橙）/UOM（蓝）同风格不同色，三个可并存显示 */
.rn-badge-inspect { background: linear-gradient(135deg, #14b8a6, #0d9488); box-shadow: 0 1px 4px rgba(13, 148, 136, 0.45); }
/* 徽标防污染：部分容器（.ti-main span、.dp-cell span 等）对后代 span 设了
 * display:block + 灰字色，会把小徽标撑成整行、白字被覆盖成灰蓝色看不清。
 * 基础规则统一 !important 强制还原，任何容器内都保持迷你圆角徽标形态 */
.rn-badge {
    flex: 0 0 auto;
    display: inline-block !important;
    color: #fff !important;
    font-size: 10.5px !important;
    margin: 0 4px 0 0 !important;
}
.ti-main .rn-badge { vertical-align: 2px; }

/* ================= 分页 ================= */
.pa-pager { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 13px 2px 0; }
.pa-page-info { color: var(--text-3); font-size: 12.5px; font-family: var(--font-num); }
.pa-page-size { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 12.5px; }
.pa-page-size-select {
    height: 30px; min-width: 62px;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-2, rgba(10, 20, 40, 0.6));
    color: var(--text-1);
    font-size: 12.5px;
    font-family: var(--font-num);
    outline: none;
    cursor: pointer;
}
.pa-page-size-select:focus { border-color: var(--primary); }
.pa-page-btns { display: flex; gap: 5px; }
.pa-page-btn {
    min-width: 30px; height: 30px;
    padding: 0 7px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(15, 30, 60, 0.5);
    color: var(--text-2);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px;
    font-family: var(--font-num);
    transition: all 0.13s;
}
.pa-page-btn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text-1); }
.pa-page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pa-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pa-page-ellipsis { min-width: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 13px; }
.pa-page-jump { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; color: var(--text-3); font-size: 12.5px; }
.pa-page-jump-input {
    width: 46px; height: 30px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-2, rgba(10, 20, 40, 0.6));
    color: var(--text-1);
    font-size: 12.5px;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}
.pa-page-jump-input::-webkit-outer-spin-button,
.pa-page-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pa-page-jump-input:focus { border-color: var(--primary); }

/* ================= Toast ================= */
.pa-toast-wrap {
    position: fixed;
    top: 84px; left: 50%;
    transform: translateX(-50%);
    z-index: 1900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    pointer-events: none;
}
.pa-toast {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 20px;
    border-radius: 10px;
    background: rgba(10, 22, 44, 0.94);
    border: 1px solid var(--border-strong);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
    color: var(--text-1);
    font-size: 13px;
    letter-spacing: 0.2px;
    max-width: min(560px, 92vw);
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
    transition: all 0.28s cubic-bezier(0.21, 1.02, 0.73, 1);
    backdrop-filter: blur(12px);
    pointer-events: auto;
}
.pa-toast-icon { display: inline-flex; align-items: center; flex: 0 0 auto; }
.pa-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.pa-toast-success { border-color: rgba(45, 212, 160, 0.5); } .pa-toast-success .pa-toast-icon { color: var(--success); }
.pa-toast-error { border-color: rgba(255, 93, 108, 0.55); } .pa-toast-error .pa-toast-icon { color: var(--danger); }
.pa-toast-warning { border-color: rgba(247, 185, 85, 0.5); } .pa-toast-warning .pa-toast-icon { color: var(--warning); }
.pa-toast-info .pa-toast-icon { color: var(--cyan); }

/* ================= Modal ================= */
.pa-modal-mask {
    position: fixed; inset: 0;
    background: rgba(2, 6, 16, 0.66);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.pa-modal-mask.in { opacity: 1; }
.pa-modal {
    width: 520px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, #0e1c38, #0a1428);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.6);
    transform: scale(0.94) translateY(10px);
    transition: transform 0.22s ease;
}
.pa-modal-mask.in .pa-modal { transform: scale(1) translateY(0); }
.pa-modal-head {
    display: flex; align-items: center;
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
}
.pa-modal-title { font-size: 15px; font-weight: 600; letter-spacing: 0.5px; }
.pa-modal-close {
    margin-left: auto;
    width: 28px; height: 28px;
    border: none; border-radius: 7px;
    background: transparent;
    color: var(--text-3);
    font-size: 19px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.13s;
}
.pa-modal-close:hover { background: var(--danger-bg); color: var(--danger); }
.pa-modal-body { padding: 18px; overflow-y: auto; }
.pa-modal-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 13px 18px;
    border-top: 1px solid var(--border);
}
.pa-confirm-msg { display: flex; gap: 13px; align-items: flex-start; font-size: 13.5px; line-height: 1.6; }
.pa-confirm-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--primary-bg); color: var(--primary-bright); display: flex; align-items: center; justify-content: center; }
.pa-confirm-ico.danger { background: var(--danger-bg); color: var(--danger); }

/* ================= 描述列表 ================= */
.pa-desc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pa-desc-item { display: flex; padding: 9px 14px; border-bottom: 1px solid rgba(86,156,255,0.08); font-size: 13px; min-width: 0; }
.pa-desc-item:nth-child(odd) { border-right: 1px solid rgba(86,156,255,0.08); }
.pa-desc-item dt { flex: 0 0 92px; color: var(--text-3); }
.pa-desc-item dd { flex: 1; color: var(--text-1); word-break: break-all; }
.pa-desc.cols-1 { grid-template-columns: 1fr; }
.pa-desc.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ================= 加载 ================= */
.pa-loading { padding: 36px 0; text-align: center; color: var(--text-3); }
.pa-spinner {
    width: 26px; height: 26px;
    margin: 0 auto 10px;
    border-radius: 50%;
    border: 2.5px solid rgba(86, 156, 255, 0.2);
    border-top-color: var(--cyan);
    animation: pa-spin 0.8s linear infinite;
}
@keyframes pa-spin { to { transform: rotate(360deg); } }

/* ================= 大屏（实时监控） ================= */
.dash-root { position: absolute; inset: 0; }
.dash-map { position: absolute; inset: 0; z-index: 1; }
.dash-map #dashMapContainer { width: 100%; height: 100%; }

/* 地图顶部指标条 */
.dash-kpi {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 8px;
    pointer-events: none;
}
.dash-kpi .kpi {
    pointer-events: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 5px 12px;
    text-align: center;
    min-width: 80px;
    box-shadow: var(--shadow);
}
.dash-kpi .kpi b { display: block; font-family: var(--font-num); font-size: 17px; line-height: 1.2; letter-spacing: 0.4px; }
.dash-kpi .kpi span { font-size: 10px; color: var(--text-2); letter-spacing: 0.8px; }
.dash-kpi .kpi.k-cyan b { color: var(--cyan); }
.dash-kpi .kpi.k-blue b { color: var(--primary-bright); }
.dash-kpi .kpi.k-green b { color: var(--success); }
.dash-kpi .kpi.k-teal b { color: #29d3ee; }
.dash-kpi .kpi.k-amber b { color: var(--warning); }
.dash-kpi .kpi.k-red b { color: var(--danger); }
.dash-kpi .kpi.k-purple b { color: #a78bfa; }
.dash-kpi .kpi.k-violet b { color: #c084fc; }

/* 浮动面板 */
.float-panel {
    position: absolute;
    z-index: 15;
    width: 328px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 108px);
    overflow: hidden;
}
.float-panel .fp-head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(86,156,255,0.1);
    flex: 0 0 auto;
}
.float-panel .fp-title { font-size: 13.5px; font-weight: 600; letter-spacing: 0.5px; display: flex; align-items: center; gap: 7px; }
.float-panel .fp-title::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: linear-gradient(180deg, var(--cyan), var(--primary)); }
.float-panel .fp-extra { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.float-panel .fp-body { flex: 1; overflow-y: auto; min-height: 0; }

.fp-collapse-btn {
    width: 24px; height: 24px;
    border-radius: 6px;
    border: none;
    background: rgba(30, 55, 100, 0.5);
    color: var(--text-2);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.13s;
}
.fp-collapse-btn:hover { color: var(--text-1); background: var(--panel-hover); }

/* 面板完全收起后的展开胶囊 */
.fp-expand-chip {
    position: absolute;
    z-index: 15;
    display: flex; align-items: center; gap: 7px;
    padding: 9px 15px;
    border-radius: 22px;
    background: var(--panel);
    border: 1px solid var(--border);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow);
    color: var(--text-1);
    font-size: 13px;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: all 0.15s;
}
.fp-expand-chip:hover { border-color: rgba(34,211,238,0.5); color: var(--cyan); box-shadow: var(--glow-cyan); }
/* 拖动状态：标题栏/胶囊可抓取，拖动中禁用过渡避免发飘 */
.float-panel .fp-head { cursor: grab; }
.fp-expand-chip { cursor: grab; }
.float-panel.dragging, .fp-expand-chip.dragging { transition: none; cursor: grabbing; opacity: 0.94; }
.float-panel.dragging { box-shadow: 0 14px 44px rgba(0,0,0,0.6); }

/* 目标列表项 */
.target-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(86,156,255,0.07);
    cursor: pointer;
    transition: background 0.13s;
}
.target-item:hover { background: rgba(30, 58, 110, 0.3); }
.target-item:last-child { border-bottom: none; }
.target-item .ti-icon {
    width: 34px; height: 34px;
    flex: 0 0 auto;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--cyan-dim);
    color: var(--cyan);
}
.target-item.alert .ti-icon { background: var(--danger-bg); color: var(--danger); }
.target-item.white .ti-icon { background: var(--success-bg); color: var(--success); }
.target-item .ti-main { flex: 1; min-width: 0; }
.target-item .ti-main b { display: block; font-size: 12.5px; font-family: var(--font-num); letter-spacing: 0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target-item .ti-main span { font-size: 11px; color: var(--text-3); display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 监测信号来源（监测站/肩灯）：比普通信息行略提亮，便于一眼看出信号由哪台设备捕获 */
.target-item .ti-main span.ti-src { color: rgba(34, 211, 238, 0.85); }
.target-item .ti-meta { flex: 0 0 auto; max-width: 118px; text-align: right; font-family: var(--font-num); font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
.target-item .ti-meta .pa-tag { display: inline-block; margin: 1px 0; }
.target-item .ti-loc { display: flex; gap: 4px; justify-content: flex-end; margin-top: 3px; }
.target-item .ti-loc-btn {
    width: 20px; height: 20px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(86,156,255,0.25); background: rgba(86,156,255,0.08);
    color: var(--cyan); border-radius: 5px; cursor: pointer; transition: all 0.13s;
}
.target-item .ti-loc-btn:hover { background: var(--cyan); color: #04121f; border-color: var(--cyan); }
.target-item .ti-loc-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* 告警滚动列表项 */
.alert-item {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(86,156,255,0.07);
    cursor: pointer;
    transition: background 0.13s;
}
.alert-item:hover { background: rgba(30, 58, 110, 0.3); }
.alert-item .ai-top { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.alert-item .ai-top time { margin-left: auto; font-size: 11px; color: var(--text-3); font-family: var(--font-num); }
.alert-item p { font-size: 12px; color: var(--text-2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 告警中心：已读/未读筛选 */
.alert-filter { display: flex; gap: 5px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.alert-filter .af-btn {
    flex: 0 0 auto; font-size: 11px; line-height: 1; padding: 5px 9px;
    border: 1px solid var(--border); border-radius: 6px; background: transparent;
    color: var(--text-2); cursor: pointer;
}
.alert-filter .af-btn b { font-family: var(--font-num); color: var(--warning); }
.alert-filter .af-btn.active { border-color: var(--primary); color: var(--primary); background: rgba(34,211,238,0.08); }
.alert-filter .af-btn.af-btn-readall { margin-left: auto; color: var(--success); border-color: rgba(52,211,153,0.35); }

/* 告警项：已读样式 + 原因 + 操作按钮 */
.alert-item.is-read { opacity: 0.62; }
.alert-item.is-read .ai-top .pa-tag, .alert-item.is-read .ai-actions .ai-btn { opacity: 0.75; }
.alert-item .ai-target { display: block; }
.alert-item p.ai-reason {
    display: flex; align-items: center; gap: 4px; margin-top: 3px;
    -webkit-line-clamp: 1; color: var(--warning); font-size: 11.5px;
}
.alert-item .ai-actions { display: flex; gap: 6px; margin-top: 7px; }
/* 告警中心 · 监测信号来源（监测站/肩灯）：与实时目标列表同色系，便于识别捕获设备 */
.alert-item p.ai-src {
    display: flex; align-items: center; gap: 4px; margin-top: 3px;
    -webkit-line-clamp: 1; color: rgba(34, 211, 238, 0.85); font-size: 11.5px;
}
.alert-item .ai-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; line-height: 1; padding: 4px 8px;
    border: 1px solid var(--border); border-radius: 6px; background: rgba(6,13,28,0.5);
    color: var(--text-2); cursor: pointer;
}
.alert-item .ai-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.alert-item .ai-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.alert-item .ai-btn.ai-read { margin-left: auto; color: var(--success); border-color: rgba(52,211,153,0.35); }
.alert-item .ai-btn.ai-read:hover { border-color: var(--success); color: var(--success); background: rgba(52,211,153,0.08); }

/* 大屏工具栏 */
.dash-toolbar {
    position: absolute;
    right: 14px;
    top: 96px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.dash-tool {
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel);
    backdrop-filter: blur(14px);
    color: var(--text-2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.14s;
    box-shadow: var(--shadow);
}
.dash-tool:hover { color: var(--cyan); border-color: rgba(34,211,238,0.4); }
.dash-tool.on { color: var(--cyan); border-color: rgba(34,211,238,0.55); background: rgba(13, 42, 60, 0.85); box-shadow: var(--glow-cyan); }
/* 地图底部状态条 */
.dash-statusbar {
    position: absolute;
    bottom: 14px; left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex; align-items: center; gap: 16px;
    padding: 7px 20px;
    border-radius: 24px;
    background: var(--panel);
    border: 1px solid var(--border);
    backdrop-filter: blur(14px);
    font-size: 12px;
    color: var(--text-2);
    box-shadow: var(--shadow);
    white-space: nowrap;
}
.dash-statusbar .sep { width: 1px; height: 12px; background: var(--border); }
.dash-statusbar b { color: var(--text-1); font-family: var(--font-num); }

/* 图层面板 */
.layer-pop {
    position: absolute;
    right: 62px;
    top: 96px;
    z-index: 25;
    width: 200px;
    background: var(--panel);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    backdrop-filter: blur(18px);
    padding: 8px;
    box-shadow: var(--shadow);
}
.layer-pop .lp-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--text-2);
    font-size: 12.5px;
    transition: all 0.12s;
}
.layer-pop .lp-item:hover { background: var(--panel-hover); color: var(--text-1); }
.layer-pop .lp-item.on { color: var(--cyan); }
.layer-pop .lp-item .lp-check { margin-left: auto; opacity: 0; }
.layer-pop .lp-item.on .lp-check { opacity: 1; }

/* ================= 无人机详情卡 ================= */
.drone-pop {
    position: absolute;
    z-index: 30;
    width: 320px;
    background: linear-gradient(165deg, rgba(14,28,56,0.97), rgba(9,18,38,0.97));
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.6);
    backdrop-filter: blur(16px);
    /* 详情卡字段多（无人机弹层 16 格 ≈ 500+ px 高），视口不够时卡内滚动，
     * 绝不允许整张卡溢出到大屏之外（旧值 overflow:hidden 会直接裁掉底部内容） */
    max-height: calc(100% - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}
.drone-pop .dp-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(90deg, rgba(47,123,255,0.16), transparent);
    border-bottom: 1px solid var(--border);
    /* 头部即拖动手柄；touch-action:none 保证移动端按住拖动不会顺带平移地图 */
    cursor: move;
    touch-action: none;
    user-select: none;
}
.drone-pop.dp-dragging { cursor: grabbing; box-shadow: 0 20px 60px rgba(0,0,0,0.75); }
/* 头部文字列：min-width:0 允许收缩，SN 超长省略、状态标签自动换行，避免与序列号重叠 */
.drone-pop .dp-head > div:nth-child(2) { min-width: 0; flex: 1; }
.drone-pop .dp-head .dp-sn { font-family: var(--font-num); font-size: 14px; letter-spacing: 0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drone-pop .dp-head .pa-tag { display: inline-block; margin: 1px 2px 1px 0; }
.drone-pop .dp-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 14px 14px; gap: 10px 12px; }
.drone-pop .dp-cell span { display: block; font-size: 11px; color: var(--text-3); margin-bottom: 3px; }
.drone-pop .dp-cell b { font-size: 13px; font-family: var(--font-num); font-weight: 600; }
/* 可点击坐标（详情窗内快速定位到地图） */
.drone-pop .dp-coord {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; font-family: var(--font-num); font-weight: 600;
    color: var(--cyan); background: var(--cyan-dim, rgba(34,211,238,0.12));
    border: 1px solid rgba(34,211,238,0.35); border-radius: 6px;
    padding: 3px 8px; cursor: pointer; transition: all .15s;
}
.drone-pop .dp-coord:hover { background: rgba(34,211,238,0.24); border-color: var(--cyan); transform: translateY(-1px); }
.drone-pop .dp-coord:active { transform: translateY(0); }
.drone-pop .dp-coord svg { flex: none; }
.drone-pop .dp-actions { display: flex; gap: 8px; padding: 0 14px 14px; }

/* ================= 标签页 ================= */
.pa-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.pa-tab {
    padding: 9px 16px;
    color: var(--text-2);
    cursor: pointer;
    font-size: 13.5px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
    display: flex; align-items: center; gap: 7px;
    user-select: none;
}
.pa-tab:hover { color: var(--text-1); }
.pa-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.pa-tab .cnt { font-family: var(--font-num); font-size: 11.5px; background: rgba(34,211,238,0.12); color: var(--cyan); border-radius: 8px; padding: 1px 7px; }

/* ================= 时间线 ================= */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--cyan), rgba(47,123,255,0.1)); border-radius: 1px; }
.timeline-item { position: relative; padding-bottom: 16px; }
.timeline-item::before {
    content: '';
    position: absolute; left: -19px; top: 5px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 3px rgba(34,211,238,0.18);
}
.timeline-item.t-danger::before { background: var(--danger); box-shadow: 0 0 0 3px rgba(255,93,108,0.18); }
.timeline-item time { font-size: 11.5px; color: var(--text-3); font-family: var(--font-num); display: block; margin-bottom: 3px; }
.timeline-item p { font-size: 13px; line-height: 1.55; }

/* ================= 告警横幅 ================= */
.alarm-banner {
    position: fixed;
    top: 12px; left: 50%;
    transform: translateX(-50%) translateY(-140%);
    z-index: 2000;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(120, 18, 30, 0.96), rgba(84, 14, 26, 0.96));
    border: 1px solid rgba(255, 93, 108, 0.6);
    box-shadow: 0 10px 40px rgba(255, 60, 80, 0.35);
    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    max-width: 640px;
}
.alarm-banner.show { transform: translateX(-50%) translateY(0); }
.alarm-banner .ab-ico { color: #ff8f9a; animation: pa-pulse 1s infinite; }
.alarm-banner .ab-text b { display: block; font-size: 14px; color: #ffd7db; }
.alarm-banner .ab-text span { font-size: 12px; color: #f3a8b0; }
.alarm-banner button { border: none; background: rgba(255,255,255,0.12); color: #ffd7db; border-radius: 7px; padding: 6px 12px; cursor: pointer; font-size: 12px; }

/* ================= 全局告警页面特效（任意页面可见，与当前路由无关） =================
   由 js/sse.js 的 PA.alarm.alertFx() 动态挂载 #paAlertFx。
   目的：用户在"非实时监控页"（工单/历史/设置等）或标签页处于后台时，也能靠视觉立刻察觉。
   · 违规告警 → 红色脉冲光晕（强度高，与告警横幅同色系）
   · 新目标进入 → 青色脉冲光晕（较柔和，仅提示"发现目标"）
   注意：pointer-events:none —— 纯视觉层，绝不影响任何页面操作。 */
.pa-alert-fx {
    position: fixed;
    inset: 0;
    z-index: 1900;
    pointer-events: none;
    opacity: 0;
    border: 2px solid rgba(255, 93, 108, 0.65);
    box-shadow: inset 0 0 130px 26px rgba(255, 60, 80, 0.5);
    transition: opacity 0.25s ease;
}
.pa-alert-fx.target {
    border-color: rgba(34, 211, 238, 0.6);
    box-shadow: inset 0 0 110px 20px rgba(34, 211, 238, 0.38);
}
.pa-alert-fx.show {
    animation: pa-alert-fx-pulse 1.15s ease-in-out infinite;
}
@keyframes pa-alert-fx-pulse {
    0%,
    100% { opacity: 0.32; }
    50% { opacity: 1; }
}
/* 无障碍：用户系统开启"减少动态效果"时退化为静态光晕，仍可被察觉但不闪烁 */
@media (prefers-reduced-motion: reduce) {
    .pa-alert-fx.show { animation: none; opacity: 0.85; }
}

/* ================= 监测站信号动效 ================= */
/* 外层容器：宽高 0，内部元素以 translate(-50%,-50%) 居中于地理锚点。
   提升为独立 GPU 合成层，避免动画触发天地图覆盖层主线程重绘导致的闪烁 */
.sig-wrap {
    position: relative; width: 0; height: 0;
    transform: translateZ(0);
    will-change: transform;
}

/* 信号盘：固定像素尺寸，纯视觉信号指示（精确覆盖范围由 T.Circle 表达）
   will-change 让旋转/扩散动画跑在 GPU 合成层，消除缩放时页面闪烁 */
.sig-ring {
    position: absolute;
    left: 0; top: 0;
    transform: translate(-50%, -50%) translateZ(0);
    width: 84px; height: 84px;
    pointer-events: none;
    will-change: transform;
}

/* 旋转扫描扇区（雷达波束）：conic-gradient 为静态纹理，rotate 动画由 GPU 合成层完成 */
.sig-ring .sweep {
    position: absolute; inset: 4%;
    border-radius: 50%;
    animation: sigSpin 4.6s linear infinite;
    opacity: 0.85;
    will-change: transform;
}
@keyframes sigSpin { to { transform: rotate(360deg); } }

/* 扩散脉冲环：从中心向外扩散并淡出，三环错峰形成连续波纹 */
.sig-ring .pr {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--sig);
    opacity: 0;
    animation: sigPulse 3.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
    will-change: transform, opacity;
}
.sig-ring .pr.p2 { animation-delay: 1.06s; }
.sig-ring .pr.p3 { animation-delay: 2.13s; }

/* 关闭特效态（图层面板「雷达扫描特效」开关，或系统开了“减少动态效果”）：
   不再渲染扫描扇区与三层脉冲环——每个在线设备叠加四个带 animation 的合成层，
   几十台站同时在线就是低配电脑卡顿的主要来源。覆盖范围本就由 T.Circle 绘制，
   这里再补一个极淡的静态圈，保证“站点在线、有信号”依旧可感知。 */
.sig-ring.static::before {
    content: '';
    position: absolute; inset: 4%;
    border-radius: 50%;
    border: 1px solid var(--sig);
    opacity: .26;
    background: radial-gradient(circle, transparent 62%, var(--sig-halo) 100%);
}
@media (prefers-reduced-motion: reduce) {
    /* 兜底：JS 偏好只在加载时读一次，中途改系统设置时这里至少保证动画不跑 */
    .sig-ring .sweep, .sig-ring .pr { display: none; }
    .sig-ring::before {
        content: '';
        position: absolute; inset: 4%;
        border-radius: 50%;
        border: 1px solid var(--sig);
        opacity: .26;
    }
}
@keyframes sigPulse {
    0% { transform: scale(0.16); opacity: 0.95; }
    60% { opacity: 0.35; }
    100% { transform: scale(1); opacity: 0; }
}

/* 中心信号核 */
.sig-ring .core {
    position: absolute; left: 50%; top: 50%;
    width: 9px; height: 9px;
    margin: -4.5px;
    border-radius: 50%;
    background: var(--sig);
    box-shadow: 0 0 10px var(--sig), 0 0 0 3px var(--sig-halo);
    animation: sigCore 1.6s ease-in-out infinite;
    will-change: transform;
}
@keyframes sigCore {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.35); }
}

/* 离线设备：静态灰环 + 斜杠，无动画 */
.sig-offline {
    position: absolute;
    left: 0; top: 0;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border: 1.5px dashed rgba(140, 155, 180, 0.65);
    border-radius: 50%;
    pointer-events: none;
}
.sig-offline::after {
    content: '';
    position: absolute; left: 50%; top: 50%;
    width: 26px; height: 1.5px;
    background: rgba(140, 155, 180, 0.65);
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ================= 布局辅助类 ================= */
.mb-14 { margin-bottom: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-2-1 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
.grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-side { display: grid; grid-template-columns: minmax(430px, 1fr) minmax(380px, 0.9fr); gap: 14px; }

.split-row { display: flex; gap: 14px; height: calc(100vh - var(--topbar-h) - 40px); min-height: 520px; }
.split-left { flex: 0 0 380px; min-width: 330px; display: flex; flex-direction: column; }
.split-right { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* 汉堡按钮（仅移动端显示） */
.pa-menu-btn {
    display: none;
    width: 38px; height: 38px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: rgba(17, 33, 64, 0.5);
    color: var(--text-1);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}
.pa-sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(2, 6, 16, 0.35);
    z-index: 55;
}

/* ================= 响应式 ================= */
@media (max-width: 1440px) {
    .stat-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
    .dash-kpi .kpi { min-width: 72px; padding: 4px 9px; }
    .dash-kpi .kpi b { font-size: 15px; }
    .grid-side { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1200px) {
    .grid-3 { grid-template-columns: 1fr; }
    .grid-2-1, .grid-1-1 { grid-template-columns: 1fr; }
    .grid-side { grid-template-columns: 1fr; }
    .split-left { flex-basis: 340px; min-width: 300px; }
}
@media (max-width: 1100px) {
    .float-panel { width: 290px; }
    .stat-grid.cols-4, .stat-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 平板 / 大屏手机横屏 ---------- */
@media (max-width: 900px) {
    .pa-sidebar { width: var(--sidebar-w-mini); }
    .pa-sidebar .pa-logo-text, .pa-sidebar .nav-label, .pa-sidebar .nav-badge, .pa-sidebar .pa-nav-group-title { display: none; }
    .pa-sidebar .pa-nav-item { justify-content: center; padding: 11px 0; }
    .pa-sidebar .pa-logo { justify-content: center; padding: 0; }
    .tb-user-meta { display: none; }
    .dash-kpi .kpi { min-width: 68px; }
}

/* ---------- 手机端 ---------- */
@media (max-width: 768px) {
    html, body { font-size: 13px; }

    /* 侧边栏 → 抽屉 */
    .pa-sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        width: 240px;
        transform: translateX(-105%);
        transition: transform 0.26s ease;
        box-shadow: none;
    }
    .pa-sidebar.open {
        transform: translateX(0);
        box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5);
    }
    .pa-sidebar.open .pa-logo-text, .pa-sidebar.open .nav-label { display: block; }
    .pa-sidebar.open .pa-nav-group-title { display: block; }
    .pa-sidebar.open .pa-nav-item { justify-content: flex-start; padding: 10px 12px; }
    .pa-sidebar.open .pa-logo { justify-content: flex-start; padding: 0 16px; }
    .pa-sidebar.open .nav-badge { display: flex; }
    .pa-sidebar-backdrop.show { display: block; }
    .pa-menu-btn { display: flex; }

    /* 顶栏压缩 */
    .pa-topbar { padding: 0 12px; gap: 8px; }
    .pa-topbar-title { font-size: 14px; }
    .pa-topbar-title .crumb-sep, .pa-topbar-title .crumb-sub { display: none; }
    #chipWeather { display: none !important; }
    #chipClock { padding: 4px 9px; font-size: 11.5px; }
    .tb-user { padding: 3px; border-radius: 50%; }
    .tb-user-meta { display: none; }

    /* 视图区 */
    .view-body { padding: 12px 12px 20px; }
    .split-row { flex-direction: column; height: auto; min-height: 0; }
    .split-left { flex: none; min-width: 0; max-height: 42vh; }
    .split-right { min-height: 56vh; }

    /* 指标卡 */
    .stat-grid.cols-4, .stat-grid.cols-5, .stat-grid.cols-6 { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .stat-card { padding: 10px 12px; }
    .stat-card .stat-value { font-size: 21px; }

    /* 搜索栏与表单 */
    .search-bar { gap: 8px; }
    .search-bar .pa-input, .search-bar .pa-select { width: 100% !important; min-width: 0; flex: 1 1 45%; }
    .pa-form-row { flex-direction: column; gap: 10px; }
    .panel-head { flex-wrap: wrap; gap: 8px; padding: 11px 13px; }
    .panel-head .panel-extra { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .panel-head .panel-extra .pa-input, .panel-head .panel-extra .pa-select { flex: 1; min-width: 120px; width: auto !important; }
    #histAiBar .panel-body { flex-wrap: wrap; }

    /* 标签页 */
    .pa-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pa-tab { padding: 9px 12px; font-size: 13px; white-space: nowrap; }

    /* Modal */
    .pa-modal { width: calc(100vw - 24px) !important; max-height: calc(100vh - 40px); }
    .pa-modal-body { padding: 14px; }
    .pa-desc { grid-template-columns: 1fr; }
    .pa-desc-item:nth-child(odd) { border-right: none; }

    /* 分页 */
    .pa-pager { flex-direction: column; align-items: center; gap: 8px; }

    /* ---------- 监控大屏移动端 ---------- */
    /* 使用 dvh 避免浏览器底部工具栏遮挡内容 */
    #app { height: 100vh; height: 100dvh; }
    .dash-kpi {
        top: 6px;
        width: calc(100% - 12px);
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 3px;
    }
    .dash-kpi .kpi { min-width: 0; flex: 1 1 14%; padding: 4px 4px; clip-path: none; }
    .dash-kpi .kpi b { font-size: 15px; }
    .dash-kpi .kpi span { font-size: 9px; letter-spacing: 0.3px; }

    /* 浮动面板 → 底部堆叠，默认收起 */
    .float-panel {
        left: 8px;
        right: 8px;
        width: auto;
        max-height: 40vh;
    }
    #fpTargets { top: auto; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
    #fpAlerts { top: auto; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
    /* 展开胶囊左右对齐在同一水平线 */
    #expandTargets { top: auto; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); left: 8px; }
    #expandAlerts { top: auto; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); right: 8px; }

    /* 底部状态条：上移避免被浏览器工具栏遮挡 */
    .dash-statusbar { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 25; }

    /* 工具栏 → 左侧竖排 */
    .dash-toolbar { right: auto; left: 8px; top: 92px; gap: 6px; }
    .dash-tool { width: 36px; height: 36px; }
    .layer-pop { right: auto; left: 52px; top: 92px; }

    /* 底部状态条精简 */
    .dash-statusbar { padding: 6px 14px; gap: 10px; font-size: 11px; }
    .dash-statusbar #stTime { display: none; }

    /* 无人机详情卡贴底 */
    .drone-pop {
        left: 8px !important;
        right: 8px;
        top: auto !important;
        bottom: 8px;
        width: auto !important;
        /* 贴底布局同样要限高：卡内滚动，不允许整张卡顶穿视口 */
        max-height: calc(100% - 16px);
    }
    /* 贴底时头部不再是拖动手柄：放开 cursor/touch，避免在手机上占掉一块地图手势 */
    .drone-pop .dp-head { cursor: default; touch-action: auto; }

    /* 告警横幅 */
    .alarm-banner { max-width: calc(100vw - 20px); padding: 10px 14px; gap: 9px; }

    /* toast 下移，避开 KPI 指标条 */
    .pa-toast-wrap { top: 68px; }

    /* 图表高度收缩 */
    #chartTrend, #chartModel { height: 210px !important; }
    #chartVType, #chartHeat { height: 200px !important; }
}

/* 超窄屏（≤380px） */
@media (max-width: 380px) {
    .dash-kpi .kpi b { font-size: 12px; }
    .dash-kpi .kpi span { font-size: 8px; }
    .stat-grid.cols-4, .stat-grid.cols-5, .stat-grid.cols-6 { grid-template-columns: 1fr 1fr; }
    .pa-topbar-title span { font-size: 13px; }
}

/* 移动端横屏（高度较小）：保持底部堆叠布局，确保展开胶囊可见 */
@media (max-height: 500px) and (orientation: landscape) {
    .float-panel {
        left: 8px;
        right: 8px;
        width: auto;
        max-height: 40vh;
    }
    #fpTargets { top: auto; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
    #fpAlerts { top: auto; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
    /* 展开胶囊左右对齐在同一水平线 */
    #expandTargets { top: auto; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); left: 8px; }
    #expandAlerts { top: auto; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); right: 8px; }

    /* 底部状态条：上移避免被浏览器工具栏遮挡 */
    .dash-statusbar { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 25; }

    /* 工具栏 → 左侧竖排 */
    .dash-toolbar { right: auto; left: 8px; top: 92px; gap: 6px; }
    .dash-tool { width: 36px; height: 36px; }
    .layer-pop { right: auto; left: 52px; top: 92px; }

    /* 底部状态条精简 */
    .dash-statusbar { padding: 6px 14px; gap: 10px; font-size: 11px; }
    .dash-statusbar #stTime { display: none; }

    /* 无人机详情卡贴底 */
    .drone-pop {
        left: 8px !important;
        right: 8px;
        top: auto !important;
        bottom: 8px;
        width: auto !important;
        /* 贴底布局同样要限高：卡内滚动，不允许整张卡顶穿视口 */
        max-height: calc(100% - 16px);
    }
    /* 贴底时头部不再是拖动手柄：放开 cursor/touch，避免在手机上占掉一块地图手势 */
    .drone-pop .dp-head { cursor: default; touch-action: auto; }

    /* 告警横幅 */
    .alarm-banner { max-width: calc(100vw - 20px); padding: 10px 14px; gap: 9px; }

    /* toast 下移，避开 KPI 指标条 */
    .pa-toast-wrap { top: 68px; }

    /* 图表高度收缩 */
    #chartTrend, #chartModel { height: 210px !important; }
    #chartVType, #chartHeat { height: 200px !important; }
}

/* ============================================================
   科技警务风格统一（v2 · 与登录页对齐）
   全局氛围层 + 警灯光带 + HUD 角标 + 大屏 KPI 强化
   ============================================================ */

/* ---------- 全局氛围层：深空渐变 + 网格 + 扫描线 ---------- */
#app {
    position: relative;
    z-index: 0;
    background:
        radial-gradient(1200px 620px at 84% -10%, rgba(30, 86, 214, 0.20), transparent 62%),
        radial-gradient(900px 500px at -8% 112%, rgba(53, 224, 255, 0.08), transparent 60%),
        linear-gradient(160deg, #060b18 0%, #04070f 55%, #071021 100%);
}
#app::before {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(61, 123, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61, 123, 255, 0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 95% 85% at 45% 40%, #000 25%, transparent 80%);
    mask-image: radial-gradient(ellipse 95% 85% at 45% 40%, #000 25%, transparent 80%);
}
#app::after {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.013) 0 1px, transparent 1px 4px);
    mix-blend-mode: overlay;
}

/* ---------- 顶栏：警灯光带（顶部流动红蓝） ---------- */
.pa-topbar { position: relative; }
.pa-topbar::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg,
        transparent 0%, var(--danger) 22%, #7a4dff 50%, #2f6bff 78%, transparent 100%);
    background-size: 220% 100%;
    animation: paLightSweep 3s linear infinite;
    opacity: 0.72;
    pointer-events: none;
}
@keyframes paLightSweep {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

/* ---------- 科技角框强化（登录页同款 HUD 角标） ---------- */
.corner-frame::before, .corner-frame::after {
    border-color: rgba(53, 224, 255, 0.75);
    filter: drop-shadow(0 0 4px rgba(53, 224, 255, 0.35));
}

/* ---------- 面板标题区 HUD 高光 ---------- */
.panel-head::after {
    content: '';
    position: absolute; left: 16px; right: 16px; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, rgba(53, 224, 255, 0.4), rgba(53, 224, 255, 0.05), transparent);
    opacity: 0.5;
    pointer-events: none;
}
.panel-head { position: relative; }

/* ============================================================
   数据大屏（实时监控）强化
   ============================================================ */
/* 地图扫描线 + 边缘暗角（大屏 CRT 感） */
.dash-map::before,
.dash-map::after {
    content: '';
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.dash-map::before {
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 4px);
    mix-blend-mode: overlay;
}
.dash-map::after {
    background: radial-gradient(ellipse 120% 95% at 50% 50%, transparent 64%, rgba(2, 5, 14, 0.5) 100%);
}

/* KPI 指标条：切角 + 顶部高光 + 数字辉光（半透明毛玻璃背景） */
.dash-kpi .kpi {
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    border: 1px solid var(--border-strong);
    background: linear-gradient(170deg, rgba(12, 28, 60, 0.5), rgba(6, 13, 30, 0.55));
    position: relative;
}
.dash-kpi .kpi::after {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0.85;
}
.dash-kpi .kpi b { text-shadow: 0 0 16px currentColor; }
.dash-kpi .kpi span { letter-spacing: 1.5px; }

/* 浮动面板：HUD 直角角框 */
.float-panel { border-color: var(--border-strong); }
.float-panel::before, .float-panel::after {
    content: '';
    position: absolute; width: 16px; height: 16px;
    border-color: rgba(53, 224, 255, 0.7);
    border-style: solid;
    pointer-events: none;
}
.float-panel::before { top: 0; left: 0; border-width: 2px 0 0 2px; border-top-left-radius: 6px; }
.float-panel::after { bottom: 0; right: 0; border-width: 0 2px 2px 0; border-bottom-right-radius: 6px; }

/* 底部状态条 / 工具栏切角 */
.dash-statusbar {
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    border-color: var(--border-strong);
}
.dash-tool { clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.dash-toolbar { position: absolute; }

/* 目标/告警列表项 hover 高光 */
.target-item, .alert-item { border-left: 2px solid transparent; }
.target-item:hover { border-left-color: var(--cyan); }
.alert-item:hover { border-left-color: var(--warning); }

/* ================= 系统设置页 ================= */
.sys-settings { display: flex; flex-direction: column; gap: 14px; }
.sys-settings .panel-body { max-width: 900px; }
.wx-config-hint {
    margin-top: 6px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-2);
    background: var(--primary-bg, rgba(47, 123, 255, 0.08));
    border: 1px solid var(--border);
    border-radius: 8px;
}
.wx-config-hint b { color: var(--primary-bright); }
.wx-config-hint code {
    padding: 1px 5px;
    font-family: var(--mono, monospace);
    font-size: 11.5px;
    color: var(--cyan, #22d3ee);
    background: rgba(34, 211, 238, 0.1);
    border-radius: 4px;
}
.wx-config-hint svg { flex-shrink: 0; margin-top: 3px; color: var(--text-3); }

/* 用户列表「推送」开关 */
.wx-push-sw { display: inline-flex; align-items: center; cursor: pointer; }
.wx-push-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.wx-push-sw-track {
    position: relative;
    display: inline-block;
    width: 34px; height: 18px;
    border-radius: 9px;
    background: rgba(92, 115, 150, 0.35);
    border: 1px solid var(--border);
    transition: background .18s, border-color .18s;
}
.wx-push-sw-dot {
    position: absolute;
    top: 1px; left: 1px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--text-3);
    transition: transform .18s, background .18s;
}
.wx-push-sw input:checked + .wx-push-sw-track {
    background: var(--success-bg, rgba(45, 212, 160, 0.22));
    border-color: var(--success);
}
.wx-push-sw input:checked + .wx-push-sw-track .wx-push-sw-dot {
    transform: translateX(16px);
    background: var(--success);
}
.wx-push-sw input:focus-visible + .wx-push-sw-track {
    outline: 2px solid var(--primary-bright);
    outline-offset: 1px;
}

/* ================= 布控中心 ================= */
.sv-detail { padding: 2px 0 6px; }
.sv-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
.sv-kv-item { display: flex; gap: 8px; font-size: 12.5px; min-width: 0; }
.sv-kv-item > span { color: var(--text-3); flex: 0 0 auto; }
.sv-kv-item > b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-section { margin-top: 16px; }
.sv-section-h {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--cyan);
    padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 4px; font-size: 12px;
    background: var(--danger-bg); color: var(--danger); border: 1px solid var(--border);
}
.sv-chip b { font-family: var(--font-num); }
.sv-actions {
    display: flex; align-items: center; gap: 12px;
    margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border);
}
@media (max-width: 900px) { .sv-kv { grid-template-columns: 1fr; } }