@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* 核心色彩系统 (深邃科技商务蓝) */
    --pc-bg: #0b0f19; /* 深海邃蓝底色 */
    --pc-panel-bg: rgba(22, 30, 49, 0.75); /* 半透明深蓝灰色面板 */
    --pc-glass-border: rgba(255, 255, 255, 0.08); /* 极细发光白边 */
    --pc-text: #f1f5f9; /* 亮 slate 白文字 */
    --pc-text-mute: #94a3b8; /* 辅助灰蓝 */
    --pc-primary: #0ea5e9; /* 科技天空蓝/高光蓝 */
    --pc-primary-hover: #0284c7; /* 深科技蓝 */
    --pc-success: #10b981;
    --pc-warning: #f59e0b;
    --pc-danger: #ef4444;
    --pc-purple: #8b5cf6;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    background-color: var(--pc-bg);
    color: var(--pc-text);
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 双端顶栏 */
.portal-header {
    height: 70px;
    background: #0f172a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 100;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    font-size: 28px;
    filter: drop-shadow(0 0 8px var(--pc-primary));
    animation: pulse 2s infinite alternate;
}

.logo-text h1 {
    font-size: 18px;
    font-weight: 800;
    background: linear-gradient(135deg, #ffffff 40%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-text p {
    font-size: 11px;
    color: var(--pc-text-mute);
    margin-top: 2px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 角色与租户选择器 */
.tenant-selector-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--pc-glass-border);
}

.selector-label {
    font-size: 12px;
    color: var(--pc-text-mute);
    font-weight: 600;
}

#select-role-level {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
}

/* 按钮通用 */
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-btn.primary {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: white;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
}

.action-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

.action-btn.secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: var(--pc-glass-border);
}

.action-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 左右分区主布局 */
.portal-main {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

/* ==================== 电脑端 Web Admin 样式 ==================== */
.pc-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pc-nav {
    height: 52px;
    background: rgba(10, 15, 28, 0.4);
    border-bottom: 1px solid var(--pc-glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.nav-tabs {
    display: flex;
    gap: 4px;
}

.nav-tab {
    background: transparent;
    border: none;
    color: var(--pc-text-mute);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
}

.nav-tab.active {
    color: #ffffff !important;
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.35);
}

.pc-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--pc-text-mute);
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-indicator.online {
    background-color: var(--pc-success);
    box-shadow: 0 0 8px var(--pc-success);
}

/* PC内容面板区 */
.pc-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: radial-gradient(circle at 50% 0%, rgba(30, 41, 59, 0.15), transparent 60%);
}

.tab-pane {
    display: none;
    animation: fadeIn 0.35s ease;
}

.tab-pane.active {
    display: block;
}

/* 仪表盘头部与卡片 */
.pane-title {
    margin-bottom: 24px;
}

.pane-title h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--pc-text);
}

.pane-title p {
    font-size: 13px;
    color: var(--pc-text-mute);
    margin-top: 4px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--pc-panel-bg);
    border: 1px solid var(--pc-glass-border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 4px; height: 100%;
    background: var(--pc-primary);
}

.stat-card.success::before { background: var(--pc-success); }
.stat-card.warning::before { background: var(--pc-warning); }
.stat-card.purple::before { background: var(--pc-purple); }

.stat-icon {
    font-size: 32px;
    opacity: 0.85;
}

.stat-info h4 {
    font-size: 12px;
    color: var(--pc-text-mute);
    text-transform: uppercase;
}

.stat-info .stat-number {
    font-size: 26px;
    font-weight: 800;
    color: var(--pc-text);
    margin-top: 4px;
}

.stat-unit {
    font-size: 12px;
    color: var(--pc-text-mute);
    margin-left: 4px;
}

/* 可视化大盘网格 */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card {
    background: var(--pc-panel-bg);
    border: 1px solid var(--pc-glass-border);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--pc-glass-border);
    background: rgba(0, 0, 0, 0.015);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--pc-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body {
    padding: 20px;
}




/* ==================== 统一动画与通用排版 ==================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    from { transform: scale(1); filter: drop-shadow(0 0 6px var(--pc-primary)); }
    to { transform: scale(1.06); filter: drop-shadow(0 0 14px var(--pc-primary)); }
}

/* 列表和表格通用 */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--pc-glass-border);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

th {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 16px;
    color: var(--pc-text-mute);
    font-weight: 600;
    border-bottom: 1px solid var(--pc-glass-border);
}

td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pc-glass-border);
    color: #e5e7eb;
}

tr:hover td {
    background: rgba(255, 255, 255, 0.015);
}

/* 徽章 Badge */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    gap: 4px;
}

/* 年龄分层特定色 */
.age-old { background-color: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); } /* 土黄色 */
.age-young { background-color: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); } /* 青绿色 */
.age-mid { background-color: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); } /* 蓝色 */

.tag-party { background-color: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.tag-army { background-color: rgba(139, 92, 246, 0.15); color: #8b5cf6; border: 1px solid rgba(139, 92, 246, 0.3); }
.tag-help { background-color: rgba(236, 72, 153, 0.15); color: #ec4899; border: 1px solid rgba(236, 72, 153, 0.3); }

.compliance-ok { background-color: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.compliance-warn { background-color: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }

/* 表单组件 */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    font-size: 12px;
    color: var(--pc-text-mute);
    font-weight: 600;
}

.form-group input, .form-group select, .form-group textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pc-glass-border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--pc-text);
    outline: none;
    font-size: 13px;
    transition: border-color 0.2s;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--pc-primary);
}

/* 筛选面板 */
.filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--pc-glass-border);
}

.filter-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pc-glass-border);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--pc-text);
    outline: none;
    font-size: 13px;
}

/* 操作链接 */
.table-action-link {
    background: transparent;
    border: none;
    color: var(--pc-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 12px;
    outline: none;
}

.table-action-link:hover {
    text-decoration: underline;
}

.table-action-link.danger {
    color: var(--pc-danger);
}

/* Modal 弹窗 */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.modal-overlay.active {
    display: flex;
}

.modal-box {
    background: #0f172a;
    border: 1px solid var(--pc-glass-border);
    border-radius: 16px;
    width: 650px;
    max-width: 90%;
    overflow: hidden;
    animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--pc-glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pc-text);
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--pc-text-mute);
    font-size: 20px;
    cursor: pointer;
    outline: none;
}

.modal-body {
    padding: 24px;
    max-height: 75vh;
    overflow-y: auto;
}

/* 双端联动指示器 */
.sync-log-wrapper {
    margin-top: 16px;
    border: 1px dashed rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    padding: 12px;
}

.sync-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: #60a5fa;
    margin-bottom: 6px;
}

.sync-log-list {
    max-height: 80px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 11px;
    color: #0ea5e9;
    list-style: none;
}

.sync-log-item {
    margin-bottom: 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

/* ==================== 家族族谱拓扑树样式 ==================== */
.genealogy-tree-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.01);
    border-radius: 12px;
}

.genealogy-level {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
    position: relative;
}

.genealogy-level::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    width: 2px;
    height: 15px;
    background: rgba(59, 130, 246, 0.3);
    border-style: dashed;
}
.genealogy-level:last-child::after {
    display: none;
}

.genealogy-node {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid var(--pc-glass-border);
    border-radius: 8px;
    padding: 10px 14px;
    text-align: center;
    min-width: 110px;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.genealogy-node.active-person {
    border: 1.5px solid var(--pc-primary);
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.25);
}

.genealogy-node.elder-mediator {
    border: 1.5px solid var(--pc-warning);
    background: rgba(245, 158, 11, 0.1);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}

.genealogy-relation {
    font-size: 9px;
    color: var(--pc-text-mute);
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.genealogy-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    display: block;
}

.mediator-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #f59e0b;
    color: #000;
    font-size: 8px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ==================== Excel 拖拽上传区域样式 ==================== */
.excel-upload-zone {
    border: 2px dashed rgba(59, 130, 246, 0.35);
    border-radius: 10px;
    padding: 20px 15px;
    text-align: center;
    background: rgba(255, 255, 255, 0.01);
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
}

.excel-upload-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 0;
}

.excel-upload-zone:hover {
    border-color: rgba(59, 130, 246, 0.7);
    background: rgba(59, 130, 246, 0.03);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.1);
}

.excel-upload-zone:hover::before {
    opacity: 1;
}

.excel-upload-zone.dragover {
    border-color: var(--pc-success);
    background: rgba(16, 185, 129, 0.05);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
}

.excel-upload-content {
    position: relative;
    z-index: 1;
}

.excel-upload-icon {
    font-size: 26px;
    margin-bottom: 6px;
    display: inline-block;
    animation: uploadFloat 3s ease-in-out infinite;
}

@keyframes uploadFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.excel-upload-text {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
}

.excel-upload-subtext {
    font-size: 11px;
    color: var(--pc-text-mute);
}

.excel-upload-status {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    display: inline-block;
}

/* 数据中枢专用全局样式微调 */
.full-width {
    width: 100%;
}
.tab-pane#pane-datacenter .stats-grid {
    gap: 16px;
}
.tab-pane#pane-datacenter .card-header select {
    background: rgba(255,255,255,0.05);
    color: #fff;
    border: 1px solid var(--pc-glass-border);
    cursor: pointer;
}
.tab-pane#pane-datacenter .card-header select option {
    background: #090f1c;
    color: #fff;
}

/* 人员管理18列精细化表格排版 */
#table-people {
    font-size: 11.5px;
    white-space: nowrap;
}
#table-people th, #table-people td {
    padding: 8px 10px;
}
#table-people td strong {
    font-weight: 700;
}
/* 操作列粘性固定在最右侧 */
#table-people th:last-child,
#table-people td:last-child {
    position: sticky;
    right: 0;
    background: #090d16;
    z-index: 2;
    box-shadow: -6px 0 12px rgba(0, 0, 0, 0.4);
    border-left: 1px solid var(--pc-glass-border);
}
#table-people tr:hover td:last-child {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* 📡 双端实时同步高保真 Toast 吐司提示框 */
.toast-notification {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--pc-primary);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.25);
    color: #fff;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards, toast-out 0.3s cubic-bezier(0.16, 1, 0.3, 1) 3.7s forwards;
}
@keyframes toast-in {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes toast-out {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-20px); opacity: 0; }
}

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

/* ====== 防汛防灾手风琴户级卡片布局 ====== */

/* 防汛卡片区域独占全宽 */
.flood-warning-card {
    border-top: 2px solid rgba(59, 130, 246, 0.3);
}

/* 顶部统计指标条 */
.flood-stats-bar {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--pc-glass-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.flood-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 16px;
}
.flood-stat-num {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}
.flood-stat-label {
    font-size: 10.5px;
    color: var(--pc-text-mute);
    white-space: nowrap;
}
.flood-stat-divider {
    width: 1px;
    height: 32px;
    background: var(--pc-glass-border);
    flex-shrink: 0;
}
.flood-pulse-red {
    animation: pulse-opacity 1.5s infinite;
}

/* 转移进度条（大） */
.flood-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 2px;
}
.flood-progress-fill {
    height: 100%;
    background: var(--pc-success);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* 卡片网格容器 */
.flood-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 户级卡片 */
.flood-household-card {
    border-radius: 8px;
    border: 1px solid var(--pc-glass-border);
    background: rgba(255, 255, 255, 0.015);
    overflow: hidden;
    transition: all 0.25s ease;
}
.flood-household-card.is-danger {
    border-left: 3px solid #ef4444;
}
.flood-household-card.is-safe {
    border-left: 3px solid var(--pc-success);
}
.flood-household-card.is-expanded {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* 户级卡片头部（摘要行） */
.flood-hh-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}
.flood-hh-header:hover {
    background: rgba(255, 255, 255, 0.04);
}
.flood-hh-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.flood-hh-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.flood-hh-toggle {
    font-size: 10px;
    color: var(--pc-text-mute);
    width: 14px;
    text-align: center;
    transition: transform 0.2s ease;
}
.flood-hh-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.flood-hh-status-dot.dot-safe {
    background: var(--pc-success);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}
.flood-hh-status-dot.dot-danger {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
    animation: pulse-opacity 1.8s infinite;
}
.flood-hh-addr {
    font-size: 12.5px;
    color: #fff;
}
.flood-hh-owner {
    font-size: 11px;
    color: var(--pc-text-mute);
}
.flood-hh-chip {
    font-size: 10px;
    color: var(--pc-text-mute);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}
.flood-hh-chip.chip-transfer {
    color: var(--pc-warning);
    background: rgba(245, 158, 11, 0.1);
}

/* 迷你进度条 */
.flood-hh-mini-progress {
    width: 48px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}
.flood-hh-mini-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* 户状态徽章 */
.flood-hh-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.flood-hh-badge.badge-safe {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}
.flood-hh-badge.badge-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* 展开后的详情区域 */
.flood-hh-detail {
    border-top: 1px solid var(--pc-glass-border);
    padding: 12px 14px;
    animation: flood-slide-down 0.2s ease;
}
@keyframes flood-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.flood-detail-title {
    font-size: 11px;
    color: var(--pc-text-mute);
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--pc-glass-border);
}
.flood-detail-members {
    margin-bottom: 10px;
}

/* 成员行 */
.flood-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 5px;
    margin-bottom: 4px;
    font-size: 11.5px;
    transition: background 0.15s ease;
}
.flood-member-row:hover {
    background: rgba(255, 255, 255, 0.04);
}
.flood-member-row.member-danger {
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.08);
}
.flood-member-row.member-safe {
    background: rgba(16, 185, 129, 0.04);
    border: 1px solid rgba(16, 185, 129, 0.08);
}
.flood-member-status {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    min-width: 32px;
    text-align: center;
}
.flood-member-status.ms-safe {
    background: rgba(16, 185, 129, 0.15);
    color: var(--pc-success);
}
.flood-member-status.ms-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.flood-member-name {
    color: #fff;
    font-size: 12px;
    min-width: 48px;
}
.flood-member-info {
    color: var(--pc-text-mute);
    font-size: 10.5px;
}
.flood-hazard-type {
    color: var(--pc-warning);
}
.flood-member-action {
    margin-left: auto;
}

/* 劝离按钮 */
.flood-evacuate-btn {
    padding: 3px 10px;
    font-size: 10.5px;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    border: 1px solid #f87171;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.flood-evacuate-btn:hover {
    background: #dc2626;
    transform: scale(1.03);
}
.flood-moved-tag {
    font-size: 10.5px;
    color: var(--pc-success);
    font-weight: 700;
}

/* 详情底栏 */
.flood-detail-footer {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    padding-top: 6px;
    border-top: 1px dashed var(--pc-glass-border);
}

/* 组别分区标题 */
.flood-group-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 6px;
    margin-top: 8px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.2);
}
.flood-group-section:first-child {
    margin-top: 0;
}
.flood-group-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--pc-primary);
    letter-spacing: 0.5px;
}
.flood-group-meta {
    font-size: 10.5px;
    color: var(--pc-text-mute);
}

/* 修复下拉选项 option 元素在某些操作系统/浏览器白底菜单中字体发白隐形的问题 */
select.filter-input option,
.form-group select option {
    background-color: #1e293b !important;
    color: #ffffff !important;
}
select.filter-input {
    background-color: rgba(30, 41, 59, 0.7) !important;
    color: #ffffff !important;
    border: 1px solid var(--pc-glass-border) !important;
}

/* 户号分组背景色交替及卡片式底色框 */
tr.household-group-odd {
    background-color: rgba(255, 255, 255, 0.02) !important;
}
tr.household-group-even {
    background-color: rgba(255, 255, 255, 0.065) !important;
}
tr.household-group-odd:hover, tr.household-group-even:hover {
    background-color: rgba(255, 255, 255, 0.09) !important;
}
tr.household-group-first-row {
    border-top: 2px solid rgba(255, 255, 255, 0.15) !important;
}
tr.household-group-last-row {
    border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
}

/* 人员管理列表分页样式 */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding: 10px 20px;
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--pc-glass-border);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.pagination-info {
    font-size: 13px;
    color: var(--pc-text-mute);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--pc-text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pc-glass-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--pc-primary);
    border-color: var(--pc-primary);
    color: #ffffff;
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-btn.active {
    background: var(--pc-primary);
    border-color: var(--pc-primary);
    color: #ffffff;
}

.pagination-select {
    padding: 5px 8px;
    font-size: 12px;
    color: var(--pc-text);
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid var(--pc-glass-border);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}

/* 年龄分层可视化着色标签样式 */
.age-old {
    color: #eab308 !important; /* 土黄色 */
    background: rgba(234, 179, 8, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
}
.age-young {
    color: #10b981 !important; /* 青绿色 */
    background: rgba(16, 185, 129, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
}
.age-mid {
    color: #3b82f6 !important; /* 蓝色 */
    background: rgba(59, 130, 246, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
}

/* 将地图底图的鼠标样式改为高精度十字准星，以便在极近邻里间进行测绘级精准像素对准打点 */
.leaflet-container {
    cursor: crosshair !important;
}
/* 鼠标滑过已标记的 marker 图标时改为手部提示 */
.leaflet-custom-marker, .leaflet-marker-icon {
    cursor: pointer !important;
}

/* ==================== 14. 防汛防台应急指挥控制台 ==================== */
.emergency-map-btn-group {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.88) !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
    pointer-events: auto !important;
}

.emergency-map-btn-group button {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.emergency-toggle-btn {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: white;
    padding: 0 14px;
    height: 32px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    cursor: pointer !important;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    pointer-events: auto !important;
}

.emergency-toggle-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
}

.emergency-toggle-btn.active {
    background: linear-gradient(135deg, #10b981, #047857);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

/* 🗺️ 地图手抓 (Grab & Pan) 与全屏作战模式 */
#leaflet-map-container, 
#huawei-map-container,
.leaflet-container, 
.leaflet-grab {
    cursor: grab !important;
}

#leaflet-map-container:active, 
#huawei-map-container:active,
.leaflet-container:active, 
.leaflet-grabbing,
.leaflet-drag-target {
    cursor: grabbing !important;
}

/* 🖥️ 全局沉浸式全屏大地图模式 (覆盖整个视口，不受父级 transform/filter 干扰) */
body.global-map-fullscreen .portal-header,
body.global-map-fullscreen .pc-nav,
body.global-map-fullscreen .pane-title,
body.global-map-fullscreen .stats-grid,
body.global-map-fullscreen .card:not(.map-card-wrapper) {
    display: none !important;
}

body.global-map-fullscreen .pc-content {
    padding: 0 !important;
    overflow: hidden !important;
    background: #020617 !important;
}

body.global-map-fullscreen .dashboard-grid {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
}

body.global-map-fullscreen .card.map-card-wrapper {
    border: none !important;
    border-radius: 0 !important;
    height: 100vh !important;
    width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9990 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.global-map-fullscreen .map-card-body {
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.global-map-fullscreen #leaflet-map-container,
body.global-map-fullscreen #huawei-map-container {
    height: 100vh !important;
    border-radius: 0 !important;
}

/* 🚨 应急防台防汛与 AI 决策指挥舱 (大屏中枢与宽屏展开) */
.emergency-sidebar {
    position: fixed;
    top: 0;
    right: -680px;
    width: 620px;
    max-width: 92vw;
    height: 100%;
    background: rgba(11, 15, 25, 0.98);
    border-left: 2px solid rgba(14, 165, 233, 0.4);
    box-shadow: -15px 0 50px rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s ease;
    backdrop-filter: blur(16px);
}

.emergency-sidebar.open {
    right: 0;
}

.emergency-sidebar.wide {
    width: 960px;
    max-width: 95vw;
}

.emergency-header {
    padding: 16px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(15, 23, 42, 0.8));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.emergency-header h3 {
    font-size: 16px;
    font-weight: 800;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    letter-spacing: 0.5px;
}

.emergency-header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.emergency-body {
    flex: 1;
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.emergency-sidebar.wide .emergency-body {
    padding: 24px;
    gap: 22px;
}

.sim-section {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.sim-section h4 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pc-primary);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 3px solid var(--pc-primary);
    padding-left: 8px;
}

.weather-btn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.weather-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    padding: 10px 6px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.weather-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.weather-btn.active {
    background: rgba(14, 165, 233, 0.25);
    border-color: var(--pc-primary);
    color: #38bdf8;
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.3);
}

.slider-group {
    margin-bottom: 12px;
}

.slider-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 6px;
}

.slider-val {
    color: #38bdf8;
    font-weight: 800;
    font-size: 13px;
}

.slider-input {
    width: 100%;
    height: 7px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    outline: none;
    accent-color: var(--pc-primary);
    cursor: pointer;
}

.evac-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
}

.emergency-sidebar.wide .evac-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-height: 380px;
}

.evac-card {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
}

.evac-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    margin-bottom: 6px;
    color: #fff;
    font-size: 13px;
}

.evac-card-member {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: normal;
}

.evac-card-address {
    color: #94a3b8;
    margin-bottom: 4px;
    line-height: 1.4;
}

.evac-card-contact {
    display: flex;
    justify-content: space-between;
    color: #cbd5e1;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

.shelter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.emergency-sidebar.wide .shelter-grid {
    grid-template-columns: repeat(3, 1fr);
}

.shelter-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px;
    font-size: 11.5px;
}

.shelter-name {
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    font-size: 12.5px;
}

.shelter-bar-bg {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    margin: 8px 0;
    overflow: hidden;
}

.shelter-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    width: 0%;
    transition: width 0.3s;
}

.shelter-occupancy {
    display: flex;
    justify-content: space-between;
    color: #94a3b8;
    font-size: 11px;
}

.ai-eval-box {
    background: rgba(14, 165, 233, 0.04);
    border: 1px dashed rgba(14, 165, 233, 0.3);
    border-radius: 10px;
    padding: 16px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #cbd5e1;
}

.ai-eval-box .risk-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.ai-eval-box .risk-badge.red { background: #ef4444; box-shadow: 0 0 14px rgba(239, 68, 68, 0.5); }
.ai-eval-box .risk-badge.orange { background: #f97316; box-shadow: 0 0 10px rgba(249, 115, 22, 0.4); }
.ai-eval-box .risk-badge.yellow { background: #eab308; }
.ai-eval-box .risk-badge.blue { background: #10b981; }

.drawing-banner {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid var(--pc-primary);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    color: #fff;
    box-shadow: 0 6px 25px rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    gap: 14px;
}

.leaflet-disaster-polygon {
    stroke-width: 2.5;
    fill-opacity: 0.25;
    animation: zoneBlink 2.5s infinite alternate;
}

@keyframes zoneBlink {
    from { fill-opacity: 0.15; stroke-opacity: 0.7; }
    to { fill-opacity: 0.35; stroke-opacity: 1; }
}

.leaflet-disaster-polygon.RED {
    stroke: #ef4444;
    fill: #ef4444;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.6));
}

.leaflet-disaster-polygon.ORANGE {
    stroke: #f97316;
    fill: #f97316;
    filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.5));
}

.leaflet-disaster-polygon.YELLOW {
    stroke: #eab308;
    fill: #eab308;
}

.leaflet-disaster-polygon.BLUE {
    stroke: #3b82f6;
    fill: #3b82f6;
}

/* 🏔️ 等高线与坡度地形图层样式 */
.leaflet-contour-line {
    stroke: #10b981;
    stroke-width: 1.5;
    stroke-opacity: 0.6;
    stroke-dasharray: 4, 3;
    fill: none;
    pointer-events: none;
}

.leaflet-contour-major {
    stroke: #34d399;
    stroke-width: 2.2;
    stroke-opacity: 0.85;
    stroke-dasharray: none;
}

.contour-elevation-badge {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid #10b981;
    color: #34d399;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.terrain-slope-marker {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid #f59e0b;
    color: #fbbf24;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    pointer-events: auto;
    cursor: pointer;
}

/* 🌀 专业气象级台风路径与 7/10/12 级多重风圈 (极速 GPU 加速渲染，无 CPU 重绘卡顿) */
.typhoon-center-marker {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle, #ef4444 40%, rgba(239,68,68,0.2) 75%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
    cursor: pointer;
    will-change: transform;
}

/* 12 级飓风核心圈 (深红剧烈环) */
.typhoon-wind-ring-12 {
    stroke: #dc2626;
    stroke-width: 2.5;
    stroke-dasharray: 4, 3;
    fill: rgba(220, 38, 38, 0.22);
}

/* 10 级暴风圈 (橙红雷达脉冲) */
.typhoon-wind-ring-10 {
    stroke: rgba(249, 115, 22, 0.9);
    stroke-width: 2;
    stroke-dasharray: 6, 4;
    fill: rgba(249, 115, 22, 0.12);
}

/* 7 级大风圈 (黄色预警外围圈) */
.typhoon-wind-ring-7 {
    stroke: rgba(234, 179, 8, 0.75);
    stroke-width: 1.5;
    stroke-dasharray: 8, 6;
    fill: rgba(234, 179, 8, 0.05);
}

/* 航迹折线与预测概率圈 */
.typhoon-track-history-line {
    stroke: #06b6d4;
    stroke-width: 3;
    stroke-opacity: 0.85;
}

.typhoon-track-forecast-line {
    stroke: #f59e0b;
    stroke-width: 2.5;
    stroke-dasharray: 6, 5;
    stroke-opacity: 0.9;
}

.typhoon-uncertainty-cone {
    stroke: #eab308;
    stroke-width: 1.2;
    stroke-dasharray: 4, 4;
    fill: rgba(234, 179, 8, 0.08);
}

.typhoon-waypoint-badge {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid #38bdf8;
    color: #e0f2fe;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}

.typhoon-waypoint-badge.forecast {
    border-color: #f59e0b;
    color: #fef08a;
}

/* 🌧️ 局部降雨预测与气象仪表卡片 */
.rainfall-forecast-box {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(15, 23, 42, 0.7));
    border: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 12px;
}

.forecast-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.forecast-metric-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 8px;
    text-align: center;
}

.forecast-metric-item .metric-label {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 4px;
}

.forecast-metric-item .metric-val {
    font-size: 14px;
    font-weight: 800;
    color: #38bdf8;
}

.orographic-banner {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 10px;
    font-size: 11.5px;
    color: #6ee7b7;
    display: flex;
    align-items: center;
    gap: 6px;
}

.track-timeline-bar {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0;
    margin-top: 10px;
}

.track-timeline-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: all 0.2s;
}

.track-timeline-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.track-timeline-btn.active {
    background: rgba(14, 165, 233, 0.25);
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.4);
}

/* 🌊 滑坡冲刷扇面与淹没圈 */
.leaflet-washout-fan {
    stroke: #ef4444;
    stroke-width: 2;
    fill-opacity: 0.38;
}

/* 🤖 AI 深度推演思维链与实战指挥卡片 */
.ai-thinking-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(14, 165, 233, 0.35);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 12px;
    font-size: 11.5px;
    line-height: 1.7;
    color: #94a3b8;
}

.ai-thinking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    color: #38bdf8;
    user-select: none;
    font-size: 12.5px;
}

.ai-thinking-body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 11.5px;
    line-height: 1.7;
    white-space: pre-wrap;
}

/* 人员转移顺位梯队卡片 */
.evac-tier-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.emergency-sidebar.wide .evac-tier-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.evac-tier-block {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.evac-tier-block.priority-1 {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(15, 23, 42, 0.6));
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15);
}

.evac-tier-title {
    font-size: 12.5px;
    font-weight: 800;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.evac-tier-title.p1 { color: #f87171; }
.evac-tier-title.p2 { color: #fde047; }

.evac-resident-row {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
    font-size: 11.5px;
}

/* 路线与派工令 */
.evac-route-banner {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 12px;
    font-size: 12.5px;
    color: #6ee7b7;
    line-height: 1.6;
}

.dispatch-task-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.emergency-sidebar.wide .dispatch-task-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.dispatch-task-item {
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: #e2e8f0;
}

.official-report-section {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    padding: 14px;
    margin-top: 12px;
}

/* ==================== 15. AI 减负与智能决策中枢 2.0 样式体系 ==================== */
.ai-hub-segment-nav {
    display: flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 3px;
    gap: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.ai-segment-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-segment-btn:hover {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.06);
}

.ai-segment-btn.active {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
    font-weight: 700;
}

/* 语音听写麦克风动画 */
.voice-mic-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}

.voice-mic-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
}

.voice-mic-btn.listening {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    animation: pulse-voice 1.2s infinite ease-in-out;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.6) !important;
}

@keyframes pulse-voice {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* 全息人像档案卡 */
.ai-dossier-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ai-dossier-header {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
}

.ai-dossier-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #38bdf8, #0369a1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.ai-dossier-summary-box {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: #f1f5f9;
    line-height: 1.6;
}

.ai-dossier-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.ai-dossier-subcard {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 11.5px;
    color: #cbd5e1;
}

.ai-dossier-subcard-title {
    font-size: 12px;
    font-weight: 700;
    color: #38bdf8;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 政策找人匹配卡 */
.ai-policy-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

/* AI 全能自由对话工作台 */
.ai-chat-workspace {
    display: flex;
    flex-direction: column;
    height: 640px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(16px);
}

.ai-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: rgba(30, 41, 59, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-chat-messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-behavior: smooth;
}

.ai-chat-msg {
    display: flex;
    gap: 12px;
    max-width: 88%;
    animation: fadeIn 0.25s ease forwards;
}

.ai-chat-msg.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-chat-msg.ai {
    align-self: flex-start;
}

.ai-chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.ai-chat-msg.user .ai-chat-avatar {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
}

.ai-chat-msg.ai .ai-chat-avatar {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
}

.ai-chat-bubble {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.65;
    word-break: break-word;
}

.ai-chat-msg.user .ai-chat-bubble {
    background: #0284c7;
    color: #fff;
    border-bottom-right-radius: 2px;
}

.ai-chat-msg.ai .ai-chat-bubble {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    border-bottom-left-radius: 2px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.ai-chat-bubble h1, .ai-chat-bubble h2, .ai-chat-bubble h3 {
    margin: 6px 0 8px 0;
    color: #38bdf8;
}

.ai-chat-bubble ul, .ai-chat-bubble ol {
    margin: 4px 0 6px 0;
    padding-left: 20px;
}

.ai-chat-bubble p {
    margin: 4px 0;
}

.ai-chat-input-area {
    padding: 14px 18px;
    background: rgba(15, 23, 42, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-quick-prompts-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.ai-quick-pill {
    white-space: nowrap;
    font-size: 11px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-quick-pill:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    color: #38bdf8;
    transform: translateY(-1px);
}

.ai-policy-item {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-policy-name {
    font-size: 12px;
    font-weight: 700;
    color: #34d399;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-policy-amount {
    background: rgba(16, 185, 129, 0.2);
    color: #a7f3d0;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
}

/* 工作计划日程排期网格 */
.ai-priority-card {
    background: rgba(255, 255, 255, 0.04);
    border-left: 4px solid #0ea5e9;
    border-radius: 0 8px 8px 0;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 12px;
}

.ai-priority-card.p1 { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.06); }
.ai-priority-card.p2 { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.06); }

.ai-daily-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.ai-daily-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    font-size: 11.5px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-daily-card-day {
    font-weight: 800;
    color: #38bdf8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 4px;
}

/* 红头公文排版框 */
.redhead-doc-box {
    background: #ffffff;
    color: #1e293b;
    border-radius: 8px;
    padding: 30px 36px;
    font-family: "SimSun", "Songti SC", "STSong", serif;
    line-height: 1.8;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    max-height: 580px;
    overflow-y: auto;
}

.redhead-doc-header {
    text-align: center;
    border-bottom: 2px solid #dc2626;
    padding-bottom: 14px;
    margin-bottom: 20px;
}

.redhead-doc-org {
    color: #dc2626;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 4px;
    font-family: "SimHei", "STHeiti", sans-serif;
}

.redhead-doc-num {
    font-size: 13px;
    color: #475569;
    margin-top: 6px;
}

.redhead-doc-title {
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 18px;
    font-family: "SimHei", "STHeiti", sans-serif;
}

.redhead-doc-body {
    font-size: 14px;
    text-indent: 2em;
    color: #334155;
    white-space: pre-wrap;
}

/* 枫桥经验三维调解卡片 */
.fengqiao-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 10px;
}

.fengqiao-col {
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fengqiao-col.emotion {
    background: rgba(236, 72, 153, 0.08);
    border: 1px solid rgba(236, 72, 153, 0.3);
    color: #fbcfe8;
}

.fengqiao-col.reason {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #bfdbfe;
}

.fengqiao-col.law {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #a7f3d0;
}

/* ==================== 16. 全景沙盘超级图层（高性能硬件加速优化版） ==================== */

/* 1. 物联感知数字哨兵标记与 GPU 呼吸光环 */
.iot-sensor-wrapper {
    position: relative;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
    transform: translateZ(0);
}

.iot-sensor-badge {
    position: relative;
    z-index: 2;
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid #38bdf8;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease;
}

.iot-sensor-wrapper:hover .iot-sensor-badge {
    transform: scale(1.05);
    border-color: #67e8f9;
}

.iot-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.35);
    z-index: 1;
    animation: iot-pulse 2.8s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes iot-pulse {
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; }
    70% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

.iot-sensor-popup-card {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0f172a;
    min-width: 220px;
}

.iot-sensor-popup-title {
    font-size: 13px;
    font-weight: 800;
    color: #0284c7;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 5px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 2. 应急避险“绿色生命线”动态光流通道 (零滤镜轻量高性能版) */
.leaflet-evac-life-line {
    stroke-dasharray: 10, 10;
    animation: evac-flow 1.6s linear infinite;
}

@keyframes evac-flow {
    from { stroke-dashoffset: 20; }
    to { stroke-dashoffset: 0; }
}

.evac-danger-marker {
    background: rgba(239, 68, 68, 0.95);
    border: 1px solid #fff;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    transform: translateZ(0);
}

/* 3. 无人机空中巡检航线与动态飞行航标 */
.leaflet-drone-flight-path {
    stroke-dasharray: 6, 6;
    opacity: 0.75;
}

.drone-marker-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
    cursor: pointer !important;
    transform: translateZ(0);
}

.drone-icon-body {
    position: relative;
    z-index: 3;
    font-size: 18px;
    transform-origin: center center;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
}

.drone-radar-sweep {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px dashed rgba(56, 189, 248, 0.7);
    background: rgba(56, 189, 248, 0.15);
    animation: drone-scan 3.5s linear infinite;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
}

@keyframes drone-scan {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.drone-info-tag {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid #38bdf8;
    color: #67e8f9;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 4;
}

/* 4. 右上角沙盘图层滤镜控制器抽屉 */
.map-layer-filter-drawer {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 9999 !important;
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    pointer-events: auto !important;
    font-size: 11.5px !important;
    color: #cbd5e1 !important;
    user-select: none;
    transform: translateZ(0);
}

.map-layer-filter-title {
    font-size: 11px;
    font-weight: 800;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 4px;
    margin-bottom: 2px;
}

.layer-filter-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer !important;
    transition: color 0.15s ease;
}

.layer-filter-item:hover {
    color: #ffffff;
}

.layer-filter-item input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: #0ea5e9;
    cursor: pointer !important;
}

/* 🌀 台风与地灾推演顶部一键清退浮动条 */
.simulation-active-banner {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    background: rgba(15, 23, 42, 0.94);
    border: 1.5px solid #ef4444;
    border-radius: 30px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 4000;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(239, 68, 68, 0.35);
}

.iot-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.35);
    z-index: 1;
    animation: iot-pulse 2.8s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes iot-pulse {
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; }
    70% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

.iot-sensor-popup-card {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0f172a;
    min-width: 220px;
}

.iot-sensor-popup-title {
    font-size: 13px;
    font-weight: 800;
    color: #0284c7;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 5px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 2. 应急避险“绿色生命线”动态光流通道 (零滤镜轻量高性能版) */
.leaflet-evac-life-line {
    stroke-dasharray: 10, 10;
    animation: evac-flow 1.6s linear infinite;
}

@keyframes evac-flow {
    from { stroke-dashoffset: 20; }
    to { stroke-dashoffset: 0; }
}

.evac-danger-marker {
    background: rgba(239, 68, 68, 0.95);
    border: 1px solid #fff;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    transform: translateZ(0);
}

/* 3. 无人机空中巡检航线与动态飞行航标 */
.leaflet-drone-flight-path {
    stroke-dasharray: 6, 6;
    opacity: 0.75;
}

.drone-marker-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
    cursor: pointer !important;
    transform: translateZ(0);
}

.drone-icon-body {
    position: relative;
    z-index: 3;
    font-size: 18px;
    transform-origin: center center;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
}

.drone-radar-sweep {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px dashed rgba(56, 189, 248, 0.7);
    background: rgba(56, 189, 248, 0.15);
    animation: drone-scan 3.5s linear infinite;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
}

@keyframes drone-scan {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.drone-info-tag {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid #38bdf8;
    color: #67e8f9;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 4;
}

/* 4. 右上角沙盘图层滤镜控制器抽屉 */
.map-layer-filter-drawer {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 9999 !important;
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    pointer-events: auto !important;
    font-size: 11.5px !important;
    color: #cbd5e1 !important;
    user-select: none;
    transform: translateZ(0);
}

.map-layer-filter-title {
    font-size: 11px;
    font-weight: 800;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 4px;
    margin-bottom: 2px;
}

.layer-filter-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer !important;
    transition: color 0.15s ease;
}

.layer-filter-item:hover {
    color: #ffffff;
}

.layer-filter-item input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: #0ea5e9;
    cursor: pointer !important;
}

/* 🌀 台风与地灾推演顶部一键清退浮动条 */
.simulation-active-banner {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    background: rgba(15, 23, 42, 0.94);
    border: 1.5px solid #ef4444;
    border-radius: 30px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 4000;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(239, 68, 68, 0.35);
    backdrop-filter: blur(8px);
    animation: fadeInDown 0.3s ease-out;
    pointer-events: auto !important;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translate(-50%, -15px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ==================== 战备指挥全景作战大屏弹窗 (Tactical Modal) ==================== */
.tactical-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(4, 8, 20, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100005 !important; /* 确保高过全屏大地图(9990)与应急侧边栏(10000) */
    padding: 16px;
    box-sizing: border-box;
}

.tactical-modal-overlay.active {
    display: flex !important;
    animation: tacticalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tactical-modal-container {
    background: linear-gradient(145deg, #0b1329, #080f1e);
    border: 1.5px solid rgba(56, 189, 248, 0.4);
    border-radius: 16px;
    width: 1160px;
    max-width: 96vw;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.9), 0 0 45px rgba(14, 165, 233, 0.3);
    overflow: hidden;
    color: #f8fafc;
    transition: all 0.25s ease;
}

.tactical-modal-container.is-fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.tactical-modal-header {
    padding: 14px 20px;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.2), rgba(15, 23, 42, 0.85) 60%);
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tactical-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tactical-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 14px;
}

.tactical-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tactical-card.danger {
    border-left: 4px solid #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(15, 23, 42, 0.7));
}

.tactical-card.warning {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(15, 23, 42, 0.7));
}

.tactical-card.primary {
    border-left: 4px solid #0ea5e9;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(15, 23, 42, 0.7));
}

.tactical-card.success {
    border-left: 4px solid #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(15, 23, 42, 0.7));
}

.tactical-card.purple {
    border-left: 4px solid #a855f7;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(15, 23, 42, 0.7));
}

.tactical-modal-footer {
    padding: 12px 20px;
    background: rgba(11, 19, 41, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@keyframes tacticalFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

@media print {
    body * {
        visibility: hidden !important;
    }
    #tactical-modal-layer, #tactical-modal-layer * {
        visibility: visible !important;
    }
    #tactical-modal-layer {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        background: #fff !important;
        color: #000 !important;
        display: block !important;
        padding: 0 !important;
    }
    .tactical-modal-container {
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
        color: #000 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .tactical-modal-footer, .modal-close-btn, .tactical-header-actions {
        display: none !important;
    }
    .tactical-card {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #ccc !important;
    }
}

/* ==================== 村级风险类型自主勾选胶囊 ==================== */
.risk-toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 11px;
    color: #94a3b8;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.risk-toggle-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.risk-toggle-chip.active {
    background: rgba(14, 165, 233, 0.2);
    border-color: #38bdf8;
    color: #38bdf8;
    font-weight: 700;
}

.risk-toggle-chip input[type="checkbox"] {
    accent-color: #0ea5e9;
    cursor: pointer;
    width: 12px;
    height: 12px;
    margin: 0;
}