/* ============================================================
 * 微电网智慧能源管理平台 - 精致化增强样式
 * 版本：v2.0 科技玻璃拟态版
 * ============================================================ */

:root {
    /* 高端深色数字能源大屏配色系统（克制蓝绿能源科技色系） */
    --glass-bg: rgba(10, 22, 46, 0.55);
    --glass-bg-strong: rgba(12, 30, 58, 0.68);
    --glass-bg-light: rgba(20, 44, 78, 0.58);
    --glass-border: rgba(86, 180, 220, 0.22);
    --glass-border-strong: rgba(86, 180, 220, 0.45);
    --glass-border-soft: rgba(60, 150, 200, 0.14);
    --neon-cyan: 86, 200, 235;
    --neon-blue: 56, 140, 220;
    --neon-deep: 30, 100, 170;
    --accent-teal: 38, 198, 188;
    --accent-orange: 245, 158, 60;
    --accent-green: 80, 195, 140;
    --accent-red: 232, 90, 90;
    --accent-yellow: 240, 185, 70;
    --neon-glow: 0 0 12px rgba(86, 200, 235, 0.22);
    --neon-glow-strong: 0 0 20px rgba(86, 200, 235, 0.32);
    /* 文字系统 */
    --text-primary: #e8f4ff;
    --text-secondary: rgba(190, 215, 240, 0.78);
    --text-muted: rgba(150, 178, 208, 0.58);
    --text-number: #5cd6f0;
    --text-number-strong: #ffffff;
}

/* 全局滚动条样式（精致半透明） */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(8, 20, 42, 0.3);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 188, 212, 0.45), rgba(33, 150, 243, 0.35));
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(0, 188, 212, 0.25);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(0, 188, 212, 0.7), rgba(33, 150, 243, 0.55));
    box-shadow: 0 0 8px rgba(0, 188, 212, 0.4);
}

/* ============ 深度夜间数字孪生背景（高端层次版） ============ */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}
body {
    /* 多层渐变：底部城市光影 + 顶部深邃蓝黑 + 中央柔光（亮度提升版） */
    background:
        radial-gradient(ellipse 75% 55% at 50% 110%, rgba(0, 168, 230, 0.32) 0%, transparent 62%),
        radial-gradient(ellipse 65% 45% at 50% -10%, rgba(40, 110, 190, 0.35) 0%, transparent 58%),
        radial-gradient(ellipse 100% 80% at 50% 50%, #122852 0%, #0a1838 42%, #06112a 78%, #030a1e 100%);
    background-attachment: fixed;
    height: 100vh;
    overflow: hidden;
    max-width: 1920px;
    margin: 0 auto;
}

/* 第一层：极弱网格背景（亮度提升版） */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(110, 210, 245, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110, 210, 245, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse 92% 92% at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.32) 60%, transparent 95%);
    -webkit-mask-image: radial-gradient(ellipse 92% 92% at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.32) 60%, transparent 95%);
}

/* 第二层：星点粒子（亮度提升版，更醒目） */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1.2px 1.2px at 12% 18%, rgba(150, 230, 255, 0.55), transparent),
        radial-gradient(1px 1px at 28% 42%, rgba(120, 215, 250, 0.42), transparent),
        radial-gradient(1.4px 1.4px at 45% 72%, rgba(170, 240, 255, 0.5), transparent),
        radial-gradient(1px 1px at 62% 28%, rgba(110, 200, 240, 0.4), transparent),
        radial-gradient(1.2px 1.2px at 78% 65%, rgba(140, 225, 255, 0.48), transparent),
        radial-gradient(1.4px 1.4px at 88% 38%, rgba(160, 235, 255, 0.46), transparent),
        radial-gradient(1px 1px at 5% 88%, rgba(120, 205, 245, 0.38), transparent),
        radial-gradient(1px 1px at 35% 8%, rgba(140, 220, 250, 0.42), transparent),
        radial-gradient(1px 1px at 55% 52%, rgba(130, 215, 245, 0.4), transparent),
        radial-gradient(1px 1px at 92% 82%, rgba(115, 200, 240, 0.42), transparent),
        radial-gradient(0.8px 0.8px at 20% 60%, rgba(160, 235, 255, 0.36), transparent),
        radial-gradient(0.8px 0.8px at 70% 12%, rgba(130, 215, 245, 0.34), transparent);
    animation: starTwinkle 6s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
    0% { opacity: 0.55; }
    100% { opacity: 0.9; }
}

/* 第三层：扫描线层（更克制） */
.scanline-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 4px,
        rgba(80, 180, 220, 0.006) 4px,
        rgba(80, 180, 220, 0.006) 5px
    );
}

/* ============ 顶部导航精致化 ============ */
.header {
    background: linear-gradient(180deg, rgba(6, 16, 36, 0.85) 0%, rgba(4, 12, 28, 0.7) 100%);
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
    border-bottom: 1px solid rgba(86, 180, 220, 0.22);
    box-shadow: 0 2px 16px rgba(0, 8, 24, 0.4), 0 1px 0 rgba(86, 200, 235, 0.06) inset;
}

.logo {
    position: relative;
}
.logo::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #5cd6f0, transparent);
    opacity: 0.6;
}

.nav-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}
.nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(86, 200, 235, 0.18), transparent);
    transition: left 0.5s ease;
}
.nav-item:hover::before { left: 100%; }

.nav-item.active {
    background: linear-gradient(135deg, rgba(86, 200, 235, 0.22) 0%, rgba(56, 140, 220, 0.14) 100%);
    box-shadow: 0 0 16px rgba(86, 200, 235, 0.25), inset 0 0 10px rgba(86, 200, 235, 0.08);
    color: #fff;
}

.user-info {
    background: linear-gradient(135deg, rgba(86, 200, 235, 0.22) 0%, rgba(56, 140, 220, 0.14) 100%);
    border: 1px solid rgba(86, 180, 220, 0.35);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 12px rgba(86, 200, 235, 0.12);
    transition: all 0.3s ease;
}
.user-info:hover {
    box-shadow: 0 0 18px rgba(86, 200, 235, 0.25);
}

.avatar {
    background: linear-gradient(135deg, #5cd6f0, #3892d8);
    box-shadow: 0 0 12px rgba(86, 200, 235, 0.45);
}

.header-notify {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(86, 200, 235, 0.1);
    border: 1px solid rgba(86, 180, 220, 0.25);
    transition: all 0.3s ease;
}
.header-notify:hover {
    background: rgba(86, 200, 235, 0.22);
    box-shadow: 0 0 14px rgba(86, 200, 235, 0.35);
}

/* ============ 侧边栏精致化 ============ */
.sidebar {
    background: linear-gradient(180deg, rgba(8, 20, 42, 0.55) 0%, rgba(6, 16, 36, 0.45) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid rgba(86, 180, 220, 0.18);
    box-shadow: 1px 0 12px rgba(0, 8, 24, 0.3);
}

.sidebar-title {
    position: relative;
    letter-spacing: 2px;
}

.menu-item {
    position: relative;
    margin: 2px 10px;
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-item:hover {
    background: linear-gradient(90deg, rgba(86, 200, 235, 0.14) 0%, transparent 100%);
    color: #fff;
    transform: translateX(4px);
}

.menu-item.active {
    background: linear-gradient(90deg, rgba(86, 200, 235, 0.22) 0%, rgba(56, 140, 220, 0.08) 100%);
    border-left-color: #5cd6f0;
    color: #fff;
    box-shadow: 0 0 14px rgba(86, 200, 235, 0.22), inset 0 0 10px rgba(86, 200, 235, 0.06);
}

.menu-item.active::before {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5cd6f0;
    box-shadow: 0 0 10px #5cd6f0;
    animation: pulse 1.5s ease infinite;
}

/* ============ 主内容区 ============ */
.main-container {
    height: calc(100vh - 70px) !important;
    margin-top: 70px !important;
    min-height: 0 !important;
    max-width: 100vw;
    overflow: hidden;
}
.content {
    position: relative;
    height: 100%;
    padding: 8px 10px !important;
    overflow: hidden !important;
    max-width: 100%;
    min-width: 0 !important;
    flex: 1 1 0 !important;
}

.content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top, rgba(0, 188, 212, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.module {
    position: relative;
    z-index: 1;
}

.module-header h2 {
    background: linear-gradient(90deg, #fff, #00bcd4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
}

.module-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-cyan), transparent);
}

/* ============ 统计卡片精致化 ============ */
.stat-card {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 188, 212, 0.08) 0%, transparent 40%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 229, 255, 0.35);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 229, 255, 0.12);
}

.stat-card:hover::after {
    opacity: 1;
}

.stat-icon {
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.1);
}
.stat-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    z-index: -1;
    opacity: 0.3;
    filter: blur(10px);
}

.stat-value {
    text-shadow: 0 0 16px rgba(86, 200, 235, 0.4);
    background: linear-gradient(135deg, #ffffff 0%, #5cd6f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-trend.up {
    text-shadow: 0 0 8px rgba(80, 195, 140, 0.5);
}
.stat-trend.down {
    text-shadow: 0 0 8px rgba(232, 90, 90, 0.5);
}

/* ============ 图表卡片 ============ */
.chart-card {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    transition: all 0.3s ease;
    position: relative;
}
.chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue), var(--accent-cyan));
    opacity: 0.7;
}
.chart-card:hover {
    border-color: rgba(0, 229, 255, 0.32);
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.1);
}

.chart-header h3 {
    background: linear-gradient(90deg, #fff, #8ca8c7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.chart-actions span {
    position: relative;
    padding: 5px 14px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}
.chart-actions span:hover {
    color: var(--accent-cyan);
}
.chart-actions span.active {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.3), rgba(33, 150, 243, 0.2));
    color: #fff;
    border-color: rgba(0, 188, 212, 0.4);
    box-shadow: 0 0 10px rgba(0, 188, 212, 0.3);
}

/* ============ 可视化大屏 ============ */
.bs-panel {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
}

.bs-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    animation: panelScan 3s ease infinite;
}

@keyframes panelScan {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.bs-panel-title {
    background: rgba(0, 229, 255, 0.05);
    padding: 8px 10px;
    margin: -16px -16px 12px -16px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.15);
}

.bs-value {
    background: linear-gradient(135deg, #fff, #00bcd4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(0, 188, 212, 0.4);
}

.bs-item {
    transition: all 0.3s ease;
    border-bottom: 1px dashed rgba(0, 188, 212, 0.15);
}
.bs-item:hover {
    background: rgba(0, 188, 212, 0.05);
    padding-left: 6px;
}

/* ============ 3D 容器精致化 ============ */
.three-container {
    background:
        radial-gradient(ellipse at center, rgba(0, 229, 255, 0.04) 0%, transparent 70%),
        rgba(4, 12, 26, 0.6);
    border: 1px solid rgba(0, 229, 255, 0.22);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    position: relative;
    backdrop-filter: blur(10px);
}

.three-container::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.5), transparent 50%, rgba(33, 150, 243, 0.5)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 20;
    animation: borderGlow 4s ease infinite;
}

@keyframes borderGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.three-overlay-top,
.three-overlay-bottom,
.three-overlay-right {
    z-index: 30;
}

.realtime-info,
.realtime-clock {
    background: rgba(4, 12, 26, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.22);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
}

.realtime-clock {
    font-weight: 600;
    color: var(--accent-cyan);
    text-shadow: 0 0 10px rgba(0, 188, 212, 0.6);
}

.live-dot {
    box-shadow: 0 0 10px var(--accent-green), 0 0 20px rgba(76, 175, 80, 0.5);
}

.model-controls {
    background: rgba(4, 12, 26, 0.55);
    backdrop-filter: blur(10px);
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(0, 229, 255, 0.18);
}

.ctrl-btn {
    background: rgba(10, 22, 40, 0.6);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 188, 212, 0.3);
    transition: all 0.3s ease;
}
.ctrl-btn:hover {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.4), rgba(33, 150, 243, 0.3));
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.5);
    transform: scale(1.08);
}

.three-overlay-right {
    background: rgba(4, 12, 26, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 10px;
}

.legend-item .dot {
    box-shadow: 0 0 8px currentColor;
}

/* ============ 负荷数据面板 ============ */
.load-panel {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.load-item strong {
    background: linear-gradient(135deg, #fff, #00bcd4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(0, 188, 212, 0.4);
}

/* ============ 充电管理 ============ */
.charge-stat-card {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.charge-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
    transition: left 0.6s ease;
}
.charge-stat-card.charging::before {
    left: 100%;
    animation: chargeFlow 2s linear infinite;
}
@keyframes chargeFlow {
    0% { left: -100%; }
    100% { left: 100%; }
}

.charge-stat-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.charge-stat-card.charging {
    box-shadow: 0 0 25px rgba(76, 175, 80, 0.35);
    border-color: rgba(76, 175, 80, 0.6);
}

.charge-stat-status.charging {
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.5);
    animation: statusPulse 2s ease infinite;
}

@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(76, 175, 80, 0.5); }
    50% { box-shadow: 0 0 20px rgba(76, 175, 80, 0.8); }
}

.charging-detail,
.orders-panel,
.device-table {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.detail-item {
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
    border: 1px solid rgba(0, 188, 212, 0.1);
    transition: all 0.3s ease;
}
.detail-item:hover {
    border-color: rgba(0, 188, 212, 0.4);
    transform: translateY(-2px);
}
.detail-item.highlight {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.2), rgba(33, 150, 243, 0.1));
    border: 1px solid rgba(0, 188, 212, 0.4);
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.15);
}

.detail-item strong {
    text-shadow: 0 0 12px rgba(0, 188, 212, 0.5);
}

/* ============ 表格 ============ */
.data-table {
    border-radius: 8px;
    overflow: hidden;
}
.data-table th {
    background: linear-gradient(180deg, rgba(0, 188, 212, 0.2), rgba(0, 188, 212, 0.08));
    border-bottom: 2px solid rgba(0, 188, 212, 0.4);
    letter-spacing: 1px;
}
.data-table tbody tr {
    transition: all 0.3s ease;
}
.data-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(0, 188, 212, 0.12) 0%, transparent 100%);
    transform: translateX(4px);
}

.btn-view {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.2), rgba(33, 150, 243, 0.15));
    border: 1px solid rgba(0, 188, 212, 0.5);
    position: relative;
    overflow: hidden;
}
.btn-view:hover {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.5);
}

/* ============ 系统架构 ============ */
.arch-intro,
.arch-diagram,
.arch-data-layer {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.arch-svg .node rect {
    filter: drop-shadow(0 0 6px currentColor);
}

.arch-svg .flow-lines path {
    filter: drop-shadow(0 0 4px rgba(0, 188, 212, 0.8));
}

.feature-item {
    background: linear-gradient(90deg, rgba(0, 188, 212, 0.15), rgba(0, 188, 212, 0.02));
    border: 1px solid rgba(0, 188, 212, 0.2);
    transition: all 0.3s ease;
}
.feature-item:hover {
    border-color: rgba(76, 175, 80, 0.6);
    transform: translateX(4px);
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.2);
}

.layer-item {
    background: linear-gradient(90deg, rgba(0, 188, 212, 0.1), rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}
.layer-item:hover {
    transform: translateX(4px);
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.2);
}

.layer-num {
    box-shadow: 0 0 12px rgba(0, 188, 212, 0.5);
}

/* ============ 能源监测 ============ */
.energy-panel {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    transition: all 0.3s ease;
}
.energy-panel:hover {
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.15);
}

.energy-header {
    background: rgba(0, 229, 255, 0.04);
    margin: -24px -24px 20px -24px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.15);
}

.energy-status {
    box-shadow: 0 0 12px currentColor;
}
.energy-status.normal { animation: statusPulse 3s ease infinite; }
.energy-status.charging { animation: statusPulse 2s ease infinite; }

.metric-item {
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.25));
    border: 1px solid rgba(0, 188, 212, 0.15);
    transition: all 0.3s ease;
}
.metric-item:hover {
    border-color: rgba(0, 188, 212, 0.5);
    transform: translateY(-2px);
}
.metric-item strong {
    text-shadow: 0 0 10px rgba(0, 188, 212, 0.4);
}

/* ============ 运维巡检 ============ */
.maint-sidebar,
.maint-content {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.maint-item {
    transition: all 0.3s ease;
    position: relative;
}
.maint-item:hover {
    transform: translateX(4px);
    box-shadow: 0 0 12px rgba(0, 188, 212, 0.2);
}
.maint-item.active {
    box-shadow: 0 0 16px rgba(0, 188, 212, 0.3), inset 0 0 12px rgba(0, 188, 212, 0.08);
}

.filter-group select,
.filter-group input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 188, 212, 0.25);
    transition: all 0.3s ease;
}
.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 10px rgba(0, 188, 212, 0.3);
}

.btn-primary {
    background: linear-gradient(135deg, #00bcd4, #2196f3);
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
    transition: all 0.3s ease;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.6);
}

.btn-secondary {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.15), rgba(33, 150, 243, 0.1));
    border: 1px solid rgba(0, 188, 212, 0.4);
}
.btn-secondary:hover {
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.3);
}

.btn-add {
    background: linear-gradient(135deg, #00bcd4, #2196f3);
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
}
.btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.6);
}

/* ============ 设备管理 ============ */
.device-stat-card {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 12px;
    transition: all 0.3s ease;
}
.device-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.device-icon {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.1);
}
.device-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    z-index: -1;
    opacity: 0.3;
    filter: blur(10px);
}

.device-stat-value {
    background: linear-gradient(135deg, #fff, #00bcd4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============ 能耗分析 ============ */
.summary-card {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue), var(--accent-cyan));
}
.summary-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 188, 212, 0.25);
}

.summary-value {
    background: linear-gradient(135deg, #fff, #00bcd4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(0, 188, 212, 0.4);
}

/* ============ 页脚 ============ */
.footer {
    background: rgba(4, 12, 26, 0.7);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 229, 255, 0.18);
    position: relative;
}
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}

/* ============ Toast 提示 ============ */
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    min-width: 280px;
    padding: 14px 20px;
    background: rgba(6, 18, 36, 0.9);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    font-size: 14px;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
}
.toast.show { transform: translateX(0); }
.toast.success { border-color: rgba(76, 175, 80, 0.6); }
.toast.success i { color: var(--accent-green); }
.toast.error { border-color: rgba(244, 67, 54, 0.6); }
.toast.error i { color: var(--accent-red); }
.toast.info { border-color: rgba(33, 150, 243, 0.6); }
.toast.info i { color: var(--accent-blue); }
.toast.warning { border-color: rgba(255, 152, 0, 0.6); }
.toast.warning i { color: var(--accent-orange); }
.toast i { font-size: 18px; }

/* ============ 模型上传面板 ============ */
.model-upload-panel {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    gap: 10px;
    background: rgba(4, 12, 26, 0.65);
    backdrop-filter: blur(12px);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 229, 255, 0.22);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    align-items: center;
}

.model-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.3), rgba(33, 150, 243, 0.25));
    border: 1px solid rgba(0, 188, 212, 0.5);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.model-upload-btn:hover {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.5);
}
.model-upload-btn input { display: none; }

.model-upload-info {
    color: var(--text-secondary);
    font-size: 12px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model-drop-hint {
    position: absolute;
    inset: 0;
    background: rgba(0, 188, 212, 0.12);
    backdrop-filter: blur(4px);
    border: 2px dashed var(--accent-cyan);
    border-radius: 14px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    z-index: 25;
    color: var(--accent-cyan);
    font-size: 16px;
    font-weight: 500;
    pointer-events: none;
}
.three-container.dragover .model-drop-hint {
    display: flex;
    animation: pulse 1.5s ease infinite;
}
.model-drop-hint i { font-size: 48px; }

/* ============ 加载进度 ============ */
.loading-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(4, 12, 26, 0.8);
    backdrop-filter: blur(10px);
    padding: 20px 30px;
    border-radius: 12px;
    border: 1px solid rgba(0, 229, 255, 0.28);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 40;
    min-width: 240px;
    display: none;
}
.loading-progress.show { display: block; }

.loading-progress .progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 188, 212, 0.15);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 12px;
}
.loading-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
    border-radius: 3px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
}
.loading-progress .progress-text {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 8px;
}
.loading-progress .progress-title {
    color: var(--accent-cyan);
    font-size: 14px;
    margin-bottom: 4px;
}

/* ============ 响应式优化 ============ */
@media (max-width: 1200px) {
    .model-upload-panel {
        flex-wrap: wrap;
        max-width: 90%;
    }
}
@media (max-width: 900px) {
    .toast-container {
        top: 70px;
        left: 10px;
        right: 10px;
    }
    .toast { min-width: auto; width: 100%; }
}

/* ============ 入场动画 ============ */
@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card,
.chart-card,
.bs-panel,
.energy-panel,
.charge-stat-card,
.summary-card,
.device-stat-card,
.arch-intro,
.arch-diagram,
.arch-data-layer {
    animation: floatIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.2s; }
.stat-card:nth-child(5) { animation-delay: 0.25s; }
.stat-card:nth-child(6) { animation-delay: 0.3s; }

/* ============ 微交互 ============ */
button,
.nav-item,
.menu-item,
.ctrl-btn,
.summary-card {
    will-change: transform;
}

/* 数字滚动动效 */
.stat-value.animating {
    animation: countFlash 1s ease;
}
@keyframes countFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ============ 仪表盘样式 ============ */
.module-header .header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-generate-report {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #00bcd4, #2196f3);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
}
.btn-generate-report:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.4);
}

/* KPI 指标条 */
.kpi-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.kpi-item {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.kpi-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 188, 212, 0.5), transparent);
}
.kpi-item:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 188, 212, 0.4);
    box-shadow: 0 8px 25px rgba(0, 188, 212, 0.2);
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

.kpi-content {
    flex: 1;
    min-width: 0;
}

.kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: #00e5ff;
    line-height: 1.2;
    font-family: 'Orbitron', 'Microsoft YaHei', sans-serif;
    text-shadow: 
        0 0 6px rgba(0, 229, 255, 0.5),
        0 0 16px rgba(0, 229, 255, 0.3),
        0 0 30px rgba(0, 229, 255, 0.12);
}
.kpi-unit {
    font-size: 14px;
    color: #8ca8c7;
    margin-left: 4px;
}
.kpi-label {
    font-size: 12px;
    color: #8ca8c7;
    margin-top: 2px;
}

.kpi-trend {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.kpi-trend.up {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}
.kpi-trend.down {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
}
.kpi-trend.alert {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
    cursor: pointer;
    transition: all 0.3s ease;
}
.kpi-trend.alert:hover {
    background: rgba(244, 67, 54, 0.35);
}

.alert-kpi {
    border-color: rgba(244, 67, 54, 0.3);
}
.alert-kpi::before {
    background: linear-gradient(90deg, transparent, rgba(244, 67, 54, 0.6), transparent);
}

/* 仪表盘网格 */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.dash-card {
    background: rgba(8, 20, 42, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 229, 255, 0.22);
    border-radius: 4px;
    padding: 14px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.dash-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 5%, 
        rgba(0, 229, 255, 0.5) 25%,
        rgba(0, 229, 255, 0.5) 75%,
        transparent 95%);
    z-index: 2;
}
.dash-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 10%,
        rgba(0, 229, 255, 0.35) 50%,
        transparent 90%);
    z-index: 2;
}
.dash-card:hover {
    border-color: rgba(0, 229, 255, 0.38);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 12px rgba(0, 229, 255, 0.1);
}
.dash-card .corner {
    position: absolute;
    width: 7px;
    height: 7px;
    border-color: rgba(0, 229, 255, 0.7);
    border-style: solid;
    z-index: 5;
    pointer-events: none;
}
.dash-card .corner.tl { top: 2px; left: 2px; border-width: 1px 0 0 1px; }
.dash-card .corner.tr { top: 2px; right: 2px; border-width: 1px 1px 0 0; }
.dash-card .corner.bl { bottom: 2px; left: 2px; border-width: 0 0 1px 1px; }
.dash-card .corner.br { bottom: 2px; right: 2px; border-width: 0 1px 1px 0; }
.dash-card.wide {
    grid-column: span 1;
}

.dash-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.dash-card-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: #e8f4fd;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-card-header h3 i {
    color: #00bcd4;
}

.dash-card-tags {
    display: flex;
    gap: 6px;
}
.dash-card-tags span {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(0, 188, 212, 0.1);
    color: #8ca8c7;
    cursor: pointer;
    transition: all 0.2s ease;
}
.dash-card-tags span:hover {
    background: rgba(0, 188, 212, 0.2);
    color: #00bcd4;
}
.dash-card-tags .tag-active {
    background: rgba(0, 188, 212, 0.3);
    color: #00bcd4;
}

.dash-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #4caf50;
}
.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4caf50;
    animation: livePulse 1.5s ease infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.dash-chart {
    width: 100%;
    height: 220px;
}

/* 告警面板卡片 */
.alert-panel-card {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 12px;
    padding: 20px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
}

.alert-panel-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.alert-gauge-wrap {
    width: 120px;
    height: 120px;
}
.alert-gauge {
    width: 100%;
    height: 100%;
}

.alert-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.alert-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.alert-stat .stat-num {
    font-size: 24px;
    font-weight: 700;
}
.alert-stat .stat-text {
    font-size: 12px;
    color: #8ca8c7;
}
.alert-stat.critical .stat-num { color: #f44336; }
.alert-stat.warning .stat-num { color: #ff9800; }
.alert-stat.pending .stat-num { color: #2196f3; }

.alert-panel-right {
    border-left: 1px solid rgba(0, 188, 212, 0.2);
    padding-left: 24px;
}

.alert-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.alert-panel-header h4 {
    margin: 0;
    font-size: 14px;
    color: #e8f4fd;
}
.btn-view-all {
    background: none;
    border: none;
    color: #00bcd4;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}
.btn-view-all:hover {
    text-decoration: underline;
}

.alert-list-mini {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(14, 28, 52, 0.55) 0%, rgba(8, 20, 42, 0.45) 100%);
    border-radius: 6px;
    border-left: 3px solid;
    transition: all 0.25s;
}
.alert-item:hover {
    background: linear-gradient(180deg, rgba(20, 38, 68, 0.65) 0%, rgba(12, 26, 50, 0.55) 100%);
    transform: translateX(2px);
}
.alert-item.critical { border-left-color: #e85a5a; box-shadow: -2px 0 8px rgba(232, 90, 90, 0.18); }
.alert-item.warning { border-left-color: #f59e3c; box-shadow: -2px 0 8px rgba(245, 158, 60, 0.18); }
.alert-item.info { border-left-color: #5cd6f0; box-shadow: -2px 0 8px rgba(86, 200, 235, 0.18); }
.alert-item .alert-time {
    font-size: 12px;
    color: #a8c5dd;
    min-width: 45px;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.3px;
}
.alert-item .alert-msg {
    flex: 1;
    font-size: 13px;
    color: #e8f4ff;
    line-height: 1.4;
}
.alert-status {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.alert-status.pending { background: rgba(232, 90, 90, 0.18); color: #ec7878; border: 1px solid rgba(232, 90, 90, 0.35); }
.alert-status.processing { background: rgba(245, 158, 60, 0.18); color: #f5b87a; border: 1px solid rgba(245, 158, 60, 0.35); }
.alert-status.resolved { background: rgba(80, 195, 140, 0.18); color: #6cd6a3; border: 1px solid rgba(80, 195, 140, 0.35); }

/* 告警抽屉 */
.alert-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: rgba(4, 12, 26, 0.95);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(0, 229, 255, 0.22);
    z-index: 1000;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
}
.alert-drawer.open {
    right: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(0, 188, 212, 0.2);
}
.drawer-header h3 {
    margin: 0;
    font-size: 18px;
    color: #e8f4fd;
    display: flex;
    align-items: center;
    gap: 10px;
}
.drawer-header h3 i { color: #ff9800; }
.drawer-close {
    background: none;
    border: none;
    color: #8ca8c7;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s ease;
}
.drawer-close:hover {
    color: #f44336;
    background: rgba(244, 67, 54, 0.1);
}

.drawer-tabs {
    display: flex;
    padding: 12px 20px;
    gap: 8px;
    border-bottom: 1px solid rgba(0, 188, 212, 0.15);
}
.drawer-tabs .tab {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(0, 188, 212, 0.1);
    color: #8ca8c7;
    display: flex;
    align-items: center;
    gap: 6px;
}
.drawer-tabs .tab .count {
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
}
.drawer-tabs .tab.active {
    background: rgba(0, 188, 212, 0.3);
    color: #00bcd4;
}
.drawer-tabs .critical-tab.active { background: rgba(244, 67, 54, 0.3); color: #f44336; }
.drawer-tabs .warning-tab.active { background: rgba(255, 152, 0, 0.3); color: #ff9800; }
.drawer-tabs .resolved-tab.active { background: rgba(76, 175, 80, 0.3); color: #4caf50; }

.drawer-alert-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drawer-alert-item {
    background: rgba(20, 42, 68, 0.5);
    border-radius: 10px;
    padding: 14px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(0, 188, 212, 0.15);
}
.drawer-alert-item.critical { border-color: rgba(244, 67, 54, 0.4); }
.drawer-alert-item.warning { border-color: rgba(255, 152, 0, 0.3); }

.alert-level-badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}
.critical .alert-level-badge { background: rgba(244, 67, 54, 0.2); color: #f44336; }
.warning .alert-level-badge { background: rgba(255, 152, 0, 0.2); color: #ff9800; }

.alert-content {
    min-width: 0;
}
.alert-title {
    font-size: 14px;
    color: #e8f4fd;
    font-weight: 500;
    margin-bottom: 4px;
}
.alert-detail {
    font-size: 12px;
    color: #8ca8c7;
    margin-bottom: 4px;
}
.alert-time-info {
    font-size: 11px;
    color: #5a7090;
}

.alert-action {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}
.alert-action .status {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
}
.alert-action .status.pending { background: rgba(244, 67, 54, 0.2); color: #f44336; }
.alert-action .status.processing { background: rgba(255, 152, 0, 0.2); color: #ff9800; }
.alert-action .status.resolved { background: rgba(76, 175, 80, 0.2); color: #4caf50; }

.btn-handle {
    padding: 5px 12px;
    background: linear-gradient(135deg, #00bcd4, #2196f3);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-handle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 188, 212, 0.3);
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.drawer-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* 报告模态框 */
.report-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.report-modal.show {
    display: flex;
}

.report-container {
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    background: rgba(6, 18, 36, 0.92);
    border-radius: 16px;
    border: 1px solid rgba(0, 229, 255, 0.22);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.18);
    background: rgba(0, 229, 255, 0.04);
}
.report-header h2 {
    margin: 0;
    font-size: 18px;
    color: #e8f4fd;
    display: flex;
    align-items: center;
    gap: 10px;
}
.report-header h2 i { color: #00bcd4; }
.report-close {
    background: none;
    border: none;
    color: #8ca8c7;
    font-size: 24px;
    cursor: pointer;
}
.report-close:hover { color: #f44336; }

.report-toolbar {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0, 188, 212, 0.15);
    align-items: center;
}
.report-toolbar label {
    font-size: 13px;
    color: #8ca8c7;
}
.report-toolbar select {
    padding: 8px 12px;
    background: rgba(10, 22, 40, 0.8);
    border: 1px solid rgba(0, 188, 212, 0.3);
    border-radius: 8px;
    color: #e8f4fd;
    font-size: 13px;
    cursor: pointer;
}
.report-toolbar select:focus {
    outline: none;
    border-color: #00bcd4;
}

.report-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.report-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.report-summary-card {
    background: rgba(6, 18, 36, 0.7);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}
.report-summary-card .value {
    font-size: 22px;
    font-weight: 700;
    color: #00bcd4;
}
.report-summary-card .label {
    font-size: 12px;
    color: #8ca8c7;
    margin-top: 4px;
}

.report-section {
    margin-bottom: 24px;
}
.report-section h3 {
    font-size: 15px;
    color: #e8f4fd;
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid #00bcd4;
}

.report-chart-mini {
    height: 180px;
    background: rgba(10, 22, 40, 0.5);
    border-radius: 8px;
    padding: 10px;
}

.report-alert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.report-alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(10, 22, 40, 0.5);
    border-radius: 8px;
    font-size: 13px;
}
.report-alert-item .level {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}
.report-alert-item.critical .level { background: rgba(244, 67, 54, 0.2); color: #f44336; }
.report-alert-item.warning .level { background: rgba(255, 152, 0, 0.2); color: #ff9800; }
.report-alert-item .msg { flex: 1; color: #e8f4fd; }
.report-alert-item .time { color: #5a7090; font-size: 12px; }

.suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.suggestion-item {
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(0, 188, 212, 0.1));
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.suggestion-item i {
    color: #4caf50;
    font-size: 18px;
    margin-top: 2px;
}
.suggestion-item .content {
    font-size: 13px;
    color: #e8f4fd;
    line-height: 1.6;
}

.report-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(0, 188, 212, 0.15);
}
.report-footer button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.btn-print {
    background: rgba(0, 188, 212, 0.2);
    color: #00bcd4;
    border: 1px solid rgba(0, 188, 212, 0.4) !important;
}
.btn-print:hover {
    background: rgba(0, 188, 212, 0.3);
}
.btn-export {
    background: linear-gradient(135deg, #00bcd4, #2196f3);
    color: #fff;
}
.btn-export:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
}

/* ========== 首页概览信息卡片 ========== */
.overview-info-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-top: 20px;
}

.info-card {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.15);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00bcd4, #2196f3);
    opacity: 0.6;
}

.info-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 188, 212, 0.4);
    box-shadow: 0 8px 25px rgba(0, 188, 212, 0.15);
}

.info-card.alert-info {
    cursor: pointer;
    border-color: rgba(244, 67, 54, 0.3);
}

.info-card.alert-info::before {
    background: linear-gradient(90deg, #f44336, #e91e63);
}

.info-card.alert-info:hover {
    border-color: rgba(244, 67, 54, 0.6);
    box-shadow: 0 8px 25px rgba(244, 67, 54, 0.2);
}

.info-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #8ca8c7;
    font-weight: 500;
}

.info-card-header i {
    font-size: 14px;
}

.alert-badge-mini {
    margin-left: auto;
    background: #f44336;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.info-card-value {
    font-size: 24px;
    font-weight: 700;
    color: #e8f4fd;
    margin-bottom: 8px;
    line-height: 1.2;
}

.info-card-value small {
    font-size: 13px;
    font-weight: 500;
    color: #5a7090;
}

.info-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.info-label {
    color: #5a7090;
}

.info-value {
    color: #8ca8c7;
    font-weight: 500;
}

.info-value.good {
    color: #4caf50;
}

.info-value.link {
    color: #00bcd4;
    font-weight: 600;
}

/* ========== 告警中心页面 ========== */

/* 顶部过滤按钮 */
.alert-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-filter {
    background: rgba(20, 42, 68, 0.6);
    border: 1px solid rgba(0, 188, 212, 0.2);
    color: #8ca8c7;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.btn-filter:hover,
.btn-filter.active {
    background: rgba(0, 188, 212, 0.15);
    color: #00bcd4;
    border-color: rgba(0, 188, 212, 0.4);
}

.btn-filter.critical-filter.active {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
    border-color: rgba(244, 67, 54, 0.4);
}

.btn-filter.warning-filter.active {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
    border-color: rgba(255, 152, 0, 0.4);
}

.btn-filter.resolved-filter.active {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border-color: rgba(76, 175, 80, 0.4);
}

.count-badge {
    background: rgba(0, 188, 212, 0.2);
    color: #00bcd4;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.btn-mark-all {
    background: linear-gradient(135deg, #00bcd4, #2196f3);
    border: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.btn-mark-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
}

/* 告警统计卡片 */
.alert-stat-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.alert-stat-card {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.alert-stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 188, 212, 0.4);
    box-shadow: 0 8px 25px rgba(0, 188, 212, 0.15);
}

.alert-stat-card.critical-card { border-color: rgba(244, 67, 54, 0.3); }
.alert-stat-card.critical-card:hover { border-color: rgba(244, 67, 54, 0.6); box-shadow: 0 8px 25px rgba(244, 67, 54, 0.2); }
.alert-stat-card.warning-card { border-color: rgba(255, 152, 0, 0.3); }
.alert-stat-card.warning-card:hover { border-color: rgba(255, 152, 0, 0.6); box-shadow: 0 8px 25px rgba(255, 152, 0, 0.2); }
.alert-stat-card.info-card-stat { border-color: rgba(33, 150, 243, 0.3); }
.alert-stat-card.info-card-stat:hover { border-color: rgba(33, 150, 243, 0.6); }
.alert-stat-card.success-card { border-color: rgba(76, 175, 80, 0.3); }
.alert-stat-card.success-card:hover { border-color: rgba(76, 175, 80, 0.6); }
.alert-stat-card.total-card { border-color: rgba(0, 188, 212, 0.3); }
.alert-stat-card.total-card:hover { border-color: rgba(0, 188, 212, 0.6); }

.asc-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.critical-card .asc-icon { background: rgba(244, 67, 54, 0.2); color: #f44336; }
.warning-card .asc-icon { background: rgba(255, 152, 0, 0.2); color: #ff9800; }
.info-card-stat .asc-icon { background: rgba(33, 150, 243, 0.2); color: #2196f3; }
.success-card .asc-icon { background: rgba(76, 175, 80, 0.2); color: #4caf50; }
.total-card .asc-icon { background: rgba(0, 188, 212, 0.2); color: #00bcd4; }

.asc-content {
    flex: 1;
}

.asc-value {
    font-size: 28px;
    font-weight: 700;
    color: #e8f4fd;
    line-height: 1.2;
}

.asc-label {
    font-size: 13px;
    color: #8ca8c7;
    margin-top: 2px;
}

.asc-sub {
    font-size: 11px;
    color: #5a7090;
    margin-top: 4px;
}

.asc-ring {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.asc-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

/* 告警图表区 */
.alert-charts-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.alert-chart-card {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 14px;
    padding: 16px;
}

.alert-chart-header {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.alert-chart-header h3 {
    font-size: 14px;
    color: #e8f4fd;
    margin: 0;
    font-weight: 600;
}

.alert-chart-header h3 i {
    color: #00bcd4;
    margin-right: 8px;
}

.alert-chart-area {
    height: 200px;
}

/* ===== 告警中心 - 多样化 KPI 卡片 ===== */
.alert-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.alert-kpi {
    background: linear-gradient(145deg, rgba(10, 22, 40, 0.85), rgba(14, 30, 55, 0.75));
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 14px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    border-radius: 4px 0 0 4px;
}

.alert-kpi.critical { border-color: rgba(232, 90, 90, 0.35); }
.alert-kpi.critical::before { background: linear-gradient(180deg, #e85a5a, #c62828); }
.alert-kpi.critical:hover { box-shadow: 0 8px 30px rgba(232, 90, 90, 0.25); transform: translateY(-2px); }

.alert-kpi.warning { border-color: rgba(245, 158, 60, 0.35); }
.alert-kpi.warning::before { background: linear-gradient(180deg, #f59e3c, #e65100); }
.alert-kpi.warning:hover { box-shadow: 0 8px 30px rgba(245, 158, 60, 0.25); transform: translateY(-2px); }

.alert-kpi.info { border-color: rgba(94, 229, 255, 0.35); }
.alert-kpi.info::before { background: linear-gradient(180deg, #5ee5ff, #00bcd4); }
.alert-kpi.info:hover { box-shadow: 0 8px 30px rgba(94, 229, 255, 0.25); transform: translateY(-2px); }

.alert-kpi.success { border-color: rgba(95, 214, 160, 0.35); }
.alert-kpi.success::before { background: linear-gradient(180deg, #5fd6a0, #2e7d32); }
.alert-kpi.success:hover { box-shadow: 0 8px 30px rgba(95, 214, 160, 0.25); transform: translateY(-2px); }

.alert-kpi.total { border-color: rgba(78, 168, 232, 0.35); }
.alert-kpi.total::before { background: linear-gradient(180deg, #4ea8e8, #1565c0); }
.alert-kpi.total:hover { box-shadow: 0 8px 30px rgba(78, 168, 232, 0.25); transform: translateY(-2px); }

/* 严重告警 - 脉冲圆环 */
.ak-icon-ring {
    position: relative;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ak-ring-inner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e85a5a, #c62828);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    z-index: 2;
}
.ak-ring-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(232, 90, 90, 0.5);
    animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.ak-progress-ring {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}
.ak-progress-ring svg { width: 100%; height: 100%; }

/* 警告 - 条形仪表 */
.ak-bar-gauge {
    width: 60px;
    flex-shrink: 0;
}
.ak-bar-track {
    height: 8px;
    background: rgba(245, 158, 60, 0.15);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}
.ak-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e3c, #ff6d00);
    border-radius: 4px;
    transition: width 0.8s ease;
}
.ak-bar-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #5a7090;
}

.ak-icon-block {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(245, 158, 60, 0.25), rgba(255, 109, 0, 0.15));
    border-radius: 10px;
    color: #f59e3c;
    font-size: 16px;
}

/* 提示 - 图标计数 */
.ak-icon-count {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(94, 229, 255, 0.2), rgba(0, 188, 212, 0.1));
    border-radius: 10px;
    color: #5ee5ff;
    font-size: 18px;
}
.ak-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #5ee5ff;
    color: #0a1628;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 已解决 - 对勾 */
.ak-check-ring {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}
.ak-check-ring svg { width: 100%; height: 100%; }
.ak-check-ring .check-path {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: draw-check 0.6s ease-out 0.3s forwards;
}
@keyframes draw-check {
    to { stroke-dashoffset: 0; }
}

/* 总计 - 迷你趋势线 */
.ak-sparkline {
    width: 70px;
    height: 36px;
    flex-shrink: 0;
}
.ak-sparkline svg { width: 100%; height: 100%; }

.ak-icon-trend {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(78, 168, 232, 0.2), rgba(21, 101, 192, 0.1));
    border-radius: 8px;
    color: #4ea8e8;
    font-size: 14px;
}

/* 通用 KPI 主体 */
.ak-body {
    flex: 1;
    min-width: 0;
}
.ak-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #e8f4fd;
    margin-bottom: 4px;
}
.ak-unit {
    font-size: 11px;
    color: #5a7090;
    margin-left: 3px;
    font-weight: 400;
}
.ak-label {
    font-size: 12px;
    color: #8ba4bd;
    margin-bottom: 3px;
}
.ak-sub {
    font-size: 11px;
    color: #5a7090;
}
.ak-sub.urgent { color: #e85a5a; font-weight: 600; }
.ak-sub.down { color: #5fd6a0; }

.ak-mini-spark {
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

/* ===== 告警图表 - 第二行 ===== */
.alert-charts-row.second-row .alert-chart-card {
    height: 260px;
}
.alert-charts-row.second-row .alert-chart-area {
    height: 160px;
}

/* 系统健康度仪表卡 */
.health-gauge-card {
    display: flex;
    flex-direction: column;
}
.health-gauge-card .alert-chart-area {
    height: 170px;
}

/* 图表图例 */
.chart-legend {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #8ba4bd;
    align-items: center;
}
.chart-legend .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}
.chart-legend .dot.critical { background: #e85a5a; }
.chart-legend .dot.warning { background: #f59e3c; }
.chart-legend .dot.success { background: #5fd6a0; }

/* 响应效率指标面板 */
.kpi-panel {
    display: flex;
    flex-direction: column;
}
.kpi-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 6px 0;
}
.kpi-metric {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 22, 40, 0.4);
    border: 1px solid rgba(0, 188, 212, 0.12);
    border-radius: 10px;
    padding: 8px 10px;
}
.km-ring {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}
.km-ring svg { width: 100%; height: 100%; }
.km-info { flex: 1; min-width: 0; }
.km-value {
    font-size: 16px;
    font-weight: 700;
    color: #e8f4fd;
    line-height: 1;
}
.km-unit {
    font-size: 10px;
    color: #5a7090;
    margin-left: 2px;
}
.km-label {
    font-size: 10px;
    color: #8ba4bd;
    margin-top: 3px;
}

/* TOP 告警来源 */
.top-sources {
    grid-column: span 2;
    background: rgba(10, 22, 40, 0.4);
    border: 1px solid rgba(0, 188, 212, 0.12);
    border-radius: 10px;
    padding: 10px 12px;
}
.ts-title {
    font-size: 11px;
    color: #8ba4bd;
    margin-bottom: 6px;
    font-weight: 600;
}
.ts-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ts-item {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #c0d6e8;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(0, 188, 212, 0.1);
}
.ts-item:last-child { border-bottom: none; }
.ts-item .rank {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(135deg, #4ea8e8, #1565c0);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}
.ts-item:nth-child(1) .rank { background: linear-gradient(135deg, #e85a5a, #c62828); }
.ts-item:nth-child(2) .rank { background: linear-gradient(135deg, #f59e3c, #e65100); }
.ts-item:nth-child(3) .rank { background: linear-gradient(135deg, #5ee5ff, #00bcd4); }
.ts-item .count {
    margin-left: auto;
    color: #5a7090;
    font-size: 10px;
}

/* 告警列表表格 */
.alert-table-card {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 24px;
}

.alert-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.alert-table-header h3 {
    font-size: 15px;
    color: #e8f4fd;
    margin: 0;
    font-weight: 600;
}

.alert-table-header h3 i {
    color: #00bcd4;
    margin-right: 8px;
}

.alert-table-tools {
    display: flex;
    gap: 12px;
    align-items: center;
}

.search-box {
    position: relative;
}

.search-box i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #5a7090;
    font-size: 13px;
}

.search-box input {
    background: rgba(10, 22, 40, 0.6);
    border: 1px solid rgba(0, 188, 212, 0.2);
    border-radius: 8px;
    padding: 8px 12px 8px 30px;
    color: #e8f4fd;
    font-size: 13px;
    width: 220px;
    outline: none;
    transition: all 0.3s ease;
}

.search-box input:focus {
    border-color: rgba(0, 188, 212, 0.5);
    background: rgba(10, 22, 40, 0.8);
}

.search-box input::placeholder {
    color: #5a7090;
}

.filter-select {
    background: rgba(10, 22, 40, 0.6);
    border: 1px solid rgba(0, 188, 212, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: #e8f4fd;
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.filter-select option {
    background: #0a1628;
}

.btn-export {
    background: rgba(0, 188, 212, 0.1);
    border: 1px solid rgba(0, 188, 212, 0.3);
    color: #00bcd4;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.btn-export:hover {
    background: rgba(0, 188, 212, 0.2);
}

.alert-table-wrapper {
    overflow-x: auto;
}

.alert-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.alert-table thead {
    background: rgba(0, 188, 212, 0.1);
}

.alert-table th {
    padding: 12px 16px;
    text-align: left;
    color: #8ca8c7;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(0, 188, 212, 0.2);
}

.alert-table td {
    padding: 12px 16px;
    color: #e8f4fd;
    border-bottom: 1px solid rgba(0, 188, 212, 0.08);
}

.alert-row:hover {
    background: rgba(0, 188, 212, 0.05);
}

.alert-row.critical {
    background: rgba(244, 67, 54, 0.05);
}

.alert-row.critical:hover {
    background: rgba(244, 67, 54, 0.1);
}

.level-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.level-badge.critical {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

.level-badge.warning {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

.status-tag {
    padding: 3px 10px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
    display: inline-block;
}

.status-tag.online { background: rgba(80, 195, 140, 0.16); color: #6cd6a3; border: 1px solid rgba(80, 195, 140, 0.35); }
.status-tag.offline { background: rgba(120, 140, 165, 0.16); color: #a8b8c8; border: 1px solid rgba(120, 140, 165, 0.35); }
.status-tag.fault { background: rgba(232, 90, 90, 0.16); color: #ec7878; border: 1px solid rgba(232, 90, 90, 0.35); }
.status-tag.warning { background: rgba(245, 158, 60, 0.16); color: #f5b87a; border: 1px solid rgba(245, 158, 60, 0.35); }
.status-tag.critical { background: rgba(232, 90, 90, 0.18); color: #ec7878; border: 1px solid rgba(232, 90, 90, 0.4); }
.status-tag.info { background: rgba(86, 200, 235, 0.16); color: #6cd6f0; border: 1px solid rgba(86, 200, 235, 0.35); }
.status-tag.normal { background: rgba(86, 200, 235, 0.16); color: #6cd6f0; border: 1px solid rgba(86, 200, 235, 0.35); }

.status-tag.pending {
    background: rgba(232, 90, 90, 0.16);
    color: #ec7878;
    border: 1px solid rgba(232, 90, 90, 0.35);
}

.status-tag.processing {
    background: rgba(245, 158, 60, 0.16);
    color: #f5b87a;
    border: 1px solid rgba(245, 158, 60, 0.35);
}

.status-tag.resolved {
    background: rgba(80, 195, 140, 0.16);
    color: #6cd6a3;
    border: 1px solid rgba(80, 195, 140, 0.35);
}

.action-btn {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    border: none;
    margin-right: 4px;
    transition: all 0.3s ease;
}

.action-btn.handle {
    background: linear-gradient(135deg, #e85a5a, #c93f5a);
    color: #fff;
}

.action-btn.handle:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(232, 90, 90, 0.35);
}

.action-btn.view {
    background: rgba(86, 200, 235, 0.14);
    color: #5cd6f0;
    border: 1px solid rgba(86, 180, 220, 0.3);
}

.action-btn.view:hover {
    background: rgba(86, 200, 235, 0.22);
    box-shadow: 0 0 10px rgba(86, 200, 235, 0.2);
}

.alert-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.table-info {
    font-size: 13px;
    color: #8ca8c7;
}

.table-info strong {
    color: #e8f4fd;
}

.pagination {
    display: flex;
    gap: 6px;
}

.page-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(20, 42, 68, 0.6);
    border: 1px solid rgba(0, 188, 212, 0.2);
    color: #8ca8c7;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.page-btn:hover,
.page-btn.active {
    background: rgba(0, 188, 212, 0.15);
    color: #00bcd4;
    border-color: rgba(0, 188, 212, 0.4);
}

.page-btn.next {
    width: auto;
    padding: 0 12px;
    gap: 6px;
}

/* 告警规则卡片 */
.alert-rules-card {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 14px;
    padding: 20px;
}

.alert-rules-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.alert-rules-header h3 {
    font-size: 15px;
    color: #e8f4fd;
    margin: 0;
    font-weight: 600;
}

.alert-rules-header h3 i {
    color: #00bcd4;
    margin-right: 8px;
}

.btn-add-rule {
    background: linear-gradient(135deg, #00bcd4, #2196f3);
    border: none;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.btn-add-rule:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
}

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

.rule-card {
    background: rgba(10, 22, 40, 0.6);
    border: 1px solid rgba(0, 188, 212, 0.15);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.rule-card:hover {
    border-color: rgba(0, 188, 212, 0.35);
    transform: translateY(-2px);
}

.rule-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(0, 188, 212, 0.05);
    border-bottom: 1px solid rgba(0, 188, 212, 0.1);
}

.rule-id {
    font-size: 13px;
    font-weight: 600;
    color: #00bcd4;
}

.rule-level {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
}

.rule-level.critical {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

.rule-level.warning {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

.rule-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    margin-left: 8px;
}

.rule-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rule-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #374a5e;
    border-radius: 18px;
    transition: 0.3s;
}

.rule-switch .slider:before {
    content: '';
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}

.rule-switch input:checked + .slider {
    background: #00bcd4;
}

.rule-switch input:checked + .slider:before {
    transform: translateX(16px);
}

.rule-body {
    padding: 14px;
}

.rule-name {
    font-size: 14px;
    font-weight: 600;
    color: #e8f4fd;
    margin-bottom: 4px;
}

.rule-desc {
    font-size: 12px;
    color: #5a7090;
    margin-bottom: 10px;
}

.rule-params {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: #8ca8c7;
    margin-bottom: 8px;
}

.rule-params strong {
    color: #e8f4fd;
    font-weight: 600;
}

.rule-targets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.target-tag {
    background: rgba(0, 188, 212, 0.1);
    border: 1px solid rgba(0, 188, 212, 0.2);
    color: #00bcd4;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

/* 左侧导航徽章 */
.menu-badge {
    background: #f44336;
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: auto;
    font-weight: 600;
}

/* 响应式 */
@media (max-width: 1200px) {
    .kpi-bar {
        grid-template-columns: repeat(3, 1fr);
    }
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .overview-info-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .alert-kpi-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .alert-charts-row {
        grid-template-columns: 1fr;
    }
    .alert-charts-row.second-row .kpi-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    .rules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .alert-panel-card {
        grid-template-columns: 1fr;
    }
    .alert-panel-right {
        border-left: none;
        border-top: 1px solid rgba(0, 188, 212, 0.2);
        padding-left: 0;
        padding-top: 20px;
    }
}
@media (max-width: 768px) {
    .kpi-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .overview-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .alert-stat-cards {
        grid-template-columns: 1fr;
    }
    .rules-grid {
        grid-template-columns: 1fr;
    }
    .report-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    .alert-header-actions {
        flex-wrap: wrap;
    }
}

/* ========== 首页底部扩展区样式 ========== */
.home-bottom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.section-card {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 14px;
    padding: 20px;
    position: relative;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
}

.section-header h3 {
    font-size: 16px;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header h3 i {
    color: #00bcd4;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #4caf50;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #4caf50;
    border-radius: 50%;
    animation: pulse-live 1.5s infinite;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5); }
    50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); }
}

/* 设备状态列表 */
.device-status-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.device-status-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 188, 212, 0.05);
    border-radius: 10px;
    border-left: 3px solid #4caf50;
    transition: all 0.3s ease;
}

.device-status-item:hover {
    background: rgba(0, 188, 212, 0.1);
    transform: translateX(4px);
}

.device-status-item.warning {
    border-left-color: #ff9800;
}

.device-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.2), rgba(33, 150, 243, 0.2));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00bcd4;
    font-size: 18px;
    flex-shrink: 0;
}

.device-info {
    flex: 1;
    min-width: 0;
}

.device-name {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 2px;
}

.device-meta {
    font-size: 12px;
    color: #8ca8c7;
}

.device-power {
    text-align: right;
    flex-shrink: 0;
}

.power-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.power-unit {
    font-size: 12px;
    color: #8ca8c7;
    margin-left: 2px;
}

.device-power.warning-power .power-value {
    color: #ff9800;
}

.device-power.solar-power .power-value {
    color: #4caf50;
}

.device-status-tag {
    font-size: 11px;
    padding: 3px 8px;
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border-radius: 12px;
    flex-shrink: 0;
}

.device-status-tag.warning-tag {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

/* 能耗排行榜 */
.rank-update {
    font-size: 12px;
    color: #8ca8c7;
}

.rank-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rank-number {
    width: 28px;
    height: 28px;
    background: rgba(0, 188, 212, 0.15);
    color: #8ca8c7;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

.rank-number.rank-1 {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #fff;
}

.rank-number.rank-2 {
    background: linear-gradient(135deg, #c0c0c0, #808080);
    color: #fff;
}

.rank-number.rank-3 {
    background: linear-gradient(135deg, #cd7f32, #8b4513);
    color: #fff;
}

.rank-info {
    flex: 1;
    min-width: 0;
}

.rank-name {
    font-size: 13px;
    color: #fff;
    margin-bottom: 4px;
}

.rank-bar-bg {
    height: 6px;
    background: rgba(0, 188, 212, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.rank-bar {
    height: 100%;
    background: linear-gradient(90deg, #00bcd4, #2196f3);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.rank-value {
    text-align: right;
    flex-shrink: 0;
}

.rank-num {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.rank-unit {
    font-size: 11px;
    color: #8ca8c7;
    margin-left: 2px;
}

/* 节能建议 */
.savings-tag {
    font-size: 12px;
    color: #4caf50;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tips-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tip-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 188, 212, 0.05);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.tip-item:hover {
    background: rgba(0, 188, 212, 0.1);
}

.tip-icon {
    width: 36px;
    height: 36px;
    background: rgba(0, 188, 212, 0.15);
    color: #00bcd4;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tip-icon.saving {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.tip-icon.new {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

.tip-content {
    flex: 1;
    min-width: 0;
}

.tip-title {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 4px;
}

.tip-desc {
    font-size: 12px;
    color: #8ca8c7;
    line-height: 1.4;
}

.tip-badge {
    font-size: 11px;
    color: #4caf50;
    background: rgba(76, 175, 80, 0.15);
    padding: 4px 8px;
    border-radius: 12px;
    align-self: flex-start;
    flex-shrink: 0;
}

/* 响应式 - 首页底部 */
@media (max-width: 1200px) {
    .home-bottom-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .home-bottom-grid {
        grid-template-columns: 1fr;
    }
    .tip-badge {
        display: none;
    }
}

/* ============ 首页三列仪表盘新版 ============ */

/* 顶部KPI指标栏 */
.home-kpi-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.home-kpi-card {
    background: rgba(6, 18, 36, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.home-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.5), transparent);
}
.home-kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 229, 255, 0.38);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.hkc-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.hkc-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.hkc-value {
    font-size: 36px;
    font-weight: 700;
    color: #5cd6f0;
    line-height: 1.1;
    font-family: 'Orbitron', 'Microsoft YaHei', sans-serif;
    letter-spacing: 0.5px;
    text-shadow:
        0 0 8px rgba(86, 200, 235, 0.45),
        0 0 18px rgba(56, 140, 200, 0.22);
}

.hkc-unit {
    font-size: 13px;
    color: #a8c5dd;
    margin-left: 4px;
    letter-spacing: 0.3px;
}

.hkc-label {
    font-size: 13px;
    color: #a8c5dd;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* 三列主体布局 */
.home-main-layout {
    display: grid;
    grid-template-columns: 280px 1fr 260px;
    gap: 16px;
    min-height: calc(100vh - 240px);
}

.home-left-col,
.home-right-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.home-center-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 通用面板 */
.home-panel {
    background: linear-gradient(145deg, rgba(4, 14, 32, 0.55) 0%, rgba(2, 8, 20, 0.55) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 229, 255, 0.22);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 0 14px rgba(0, 229, 255, 0.08);
}

.home-panel:hover {
    border-color: rgba(0, 229, 255, 0.32);
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.1);
}

.home-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 229, 255, 0.4) 25%,
        rgba(0, 229, 255, 0.4) 75%,
        transparent 100%);
    opacity: 0.6;
}

.home-panel.flex-1 {
    flex: 1;
    min-height: 0;
}

.home-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0, 229, 255, 0.04);
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
}

.home-panel-header h3 {
    font-size: 14px;
    color: #e8f4fd;
    margin: 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-panel-header h3 i {
    color: #00bcd4;
}

.home-panel-body {
    padding: 14px 16px;
    flex: 1;
    min-height: 0;
}

.home-chart {
    width: 100%;
    height: 160px;
}

/* 设备数据网格 */
.device-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dd-item {
    background: rgba(0, 188, 212, 0.06);
    border: 1px solid rgba(0, 188, 212, 0.15);
    border-radius: 8px;
    padding: 10px 12px;
}

.dd-label {
    font-size: 11px;
    color: #8ca8c7;
    margin-bottom: 4px;
}

.dd-value {
    font-size: 18px;
    font-weight: 600;
    color: #e8f4fd;
    margin-bottom: 6px;
    font-family: 'Orbitron', monospace;
}

.dd-value span {
    font-size: 11px;
    color: #8ca8c7;
    font-weight: 400;
}

.dd-bar {
    height: 3px;
    background: rgba(0, 188, 212, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.dd-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* 环境数据 */
.env-data-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.env-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: rgba(0, 188, 212, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(0, 188, 212, 0.1);
}

.env-icon {
    font-size: 18px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 188, 212, 0.1);
    border-radius: 8px;
    flex-shrink: 0;
}

.env-info {
    flex: 1;
}

.env-value {
    font-size: 16px;
    font-weight: 600;
    color: #e8f4fd;
    font-family: 'Orbitron', monospace;
}

.env-label {
    font-size: 11px;
    color: #8ca8c7;
}

.env-status {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.env-status.good {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.env-status.normal {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

/* 面板标签页 */
.panel-tabs {
    display: flex;
    gap: 4px;
}

.panel-tabs span {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 10px;
    color: #8ca8c7;
    cursor: pointer;
    transition: all 0.3s ease;
}

.panel-tabs span.tab-active,
.panel-tabs span:hover {
    background: rgba(0, 188, 212, 0.15);
    color: #00bcd4;
}

/* 中央3D容器 */
.home-3d-container {
    background: rgba(6, 18, 36, 0.55);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 350px;
    position: relative;
    backdrop-filter: blur(10px);
}

.home-3d-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0, 229, 255, 0.04);
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
}

.home-3d-header h3 {
    font-size: 15px;
    color: #e8f4fd;
    margin: 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-3d-header h3 i {
    color: #00bcd4;
}

.home-3d-actions {
    display: flex;
    gap: 8px;
}

.home-3d-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0, 188, 212, 0.15);
    border: 1px solid rgba(0, 188, 212, 0.3);
    color: #00bcd4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.home-3d-btn:hover {
    background: rgba(0, 188, 212, 0.3);
    transform: translateY(-1px);
}

.home-3d-canvas {
    flex: 1;
    position: relative;
    min-height: 300px;
    background: radial-gradient(ellipse at center, rgba(0, 188, 212, 0.08) 0%, transparent 70%);
}

.home-3d-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.three-loading-mini {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #8ca8c7;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.spinner-mini {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 188, 212, 0.2);
    border-top-color: #00bcd4;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.model-drop-hint-home {
    position: absolute;
    inset: 0;
    background: rgba(0, 188, 212, 0.1);
    backdrop-filter: blur(4px);
    border: 2px dashed rgba(0, 188, 212, 0.5);
    border-radius: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: #00bcd4;
    font-size: 14px;
    z-index: 10;
}

.model-drop-hint-home.show {
    display: flex;
}

.model-drop-hint-home i {
    font-size: 36px;
}

/* 3D底部悬浮面板 */
.home-3d-bottom-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(2, 8, 20, 0.6);
    border-top: 1px solid rgba(0, 229, 255, 0.15);
    backdrop-filter: blur(8px);
}

.h3bp-item {
    text-align: center;
    padding: 12px 8px;
    border-right: 1px solid rgba(0, 188, 212, 0.1);
}

.h3bp-item:last-child {
    border-right: none;
}

.h3bp-value {
    font-size: 22px;
    font-weight: 700;
    color: #00bcd4;
    font-family: 'Orbitron', monospace;
}

.h3bp-label {
    font-size: 11px;
    color: #8ca8c7;
    margin-top: 2px;
}

/* 底部三图行 */
.home-bottom-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.home-bottom-row .home-chart {
    height: 140px;
}

/* 收益统计 */
.revenue-data {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.revenue-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(0, 188, 212, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(0, 188, 212, 0.1);
}

.revenue-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(0, 188, 212, 0.15);
    color: #00bcd4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.revenue-icon.water {
    background: rgba(33, 150, 243, 0.15);
    color: #2196f3;
}

.revenue-icon.gas {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

.revenue-info {
    flex: 1;
}

.revenue-price {
    font-size: 14px;
    font-weight: 600;
    color: #e8f4fd;
}

.revenue-price span {
    font-size: 11px;
    color: #8ca8c7;
    font-weight: 400;
}

.revenue-amount {
    font-size: 12px;
    color: #4caf50;
    margin-top: 2px;
}

.revenue-amount span {
    font-size: 10px;
    color: #8ca8c7;
}

.revenue-trend {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.revenue-trend.up {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.revenue-trend.down {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
}

.revenue-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.15), rgba(33, 150, 243, 0.1));
    border-radius: 10px;
    border: 1px solid rgba(0, 188, 212, 0.3);
}

.rt-label {
    font-size: 13px;
    color: #8ca8c7;
}

.rt-value {
    font-size: 20px;
    font-weight: 700;
    color: #00bcd4;
    font-family: 'Orbitron', monospace;
}

.rt-value span {
    font-size: 12px;
    color: #8ca8c7;
    font-weight: 400;
}

/* 工单统计 */
.work-order-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.wo-item {
    text-align: center;
}

.wo-ring {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 6px;
}

.wo-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.wo-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #e8f4fd;
    font-family: 'Orbitron', monospace;
}

.wo-label {
    font-size: 11px;
    color: #8ca8c7;
}

.work-order-tags {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.wot-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(0, 188, 212, 0.1);
    color: #8ca8c7;
}

.wot-tag.wot-done {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.wot-tag.wot-doing {
    background: rgba(33, 150, 243, 0.15);
    color: #2196f3;
}

.wot-tag.wot-pending {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

/* 告警信息列表 */
.panel-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
    cursor: pointer;
}

.panel-badge:hover {
    background: rgba(244, 67, 54, 0.25);
}

.alert-msg-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.alert-msg-list::-webkit-scrollbar {
    width: 4px;
}

.alert-msg-list::-webkit-scrollbar-thumb {
    background: rgba(0, 188, 212, 0.3);
    border-radius: 2px;
}

.alert-msg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 188, 212, 0.05);
    border-radius: 8px;
    border-left: 3px solid #8ca8c7;
    transition: all 0.2s ease;
}

.alert-msg-item.critical {
    border-left-color: #f44336;
    background: rgba(244, 67, 54, 0.08);
}

.alert-msg-item.warning {
    border-left-color: #ff9800;
    background: rgba(255, 152, 0, 0.08);
}

.alert-msg-item.info {
    border-left-color: #2196f3;
    background: rgba(33, 150, 243, 0.08);
}

.alert-msg-item:hover {
    background: rgba(0, 188, 212, 0.1);
    transform: translateX(2px);
}

.ams-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8ca8c7;
    flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
}

.alert-msg-item.critical .ams-dot {
    background: #f44336;
    box-shadow: 0 0 8px #f44336;
}

.alert-msg-item.warning .ams-dot {
    background: #ff9800;
    box-shadow: 0 0 8px #ff9800;
}

.alert-msg-item.info .ams-dot {
    background: #2196f3;
    box-shadow: 0 0 8px #2196f3;
}

.ams-content {
    flex: 1;
    min-width: 0;
}

.ams-title {
    font-size: 13px;
    color: #e8f4fd;
    font-weight: 500;
}

.ams-meta {
    font-size: 11px;
    color: #8ca8c7;
    margin-top: 2px;
}

.ams-level {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.ams-level.critical {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

.ams-level.warning {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

.ams-level.info {
    background: rgba(33, 150, 243, 0.2);
    color: #2196f3;
}

/* 响应式 */
@media (max-width: 1400px) {
    .home-main-layout {
        grid-template-columns: 240px 1fr 240px;
    }
}

@media (max-width: 1200px) {
    .home-main-layout {
        grid-template-columns: 220px 1fr 220px;
    }
    .home-kpi-strip {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1000px) {
    .home-main-layout {
        grid-template-columns: 1fr;
    }
    .home-3d-bottom-panel {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
 * 首页大屏风格 - 宝能数字能源监控平台复刻版
 * ============================================================ */

/* ------- 工业级大屏顶部导航 ------- */
.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0 14px;
    background: rgba(2, 8, 20, 0.38);
    border-bottom: 1px solid rgba(0, 229, 255, 0.15);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100vw;
    overflow: hidden;
    z-index: 100;
    box-shadow: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.dashboard-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 229, 255, 0.25) 15%,
        rgba(0, 229, 255, 0.5) 50%, 
        rgba(0, 229, 255, 0.25) 85%,
        transparent 100%);
}
.dh-left, .dh-right {
    display: flex;
    align-items: center;
    gap: 1px;
    flex: 0 0 220px;
    min-width: 0;
    overflow: hidden;
}
.dh-right {
    justify-content: flex-end;
}
.dh-decor-line {
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.85), transparent);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.45);
    border-radius: 1px;
}
/* ------- 左上角脉联 mael 官方 logo（本地绿色透明底图片，直接引用，可离线/双击打开） ------- */
.dh-brand-logo {
    flex-shrink: 0;
    display: block;
    width: 132px;
    height: 25px; /* 官方图比例 516:96 ≈ 5.4:1 */
    object-fit: contain;
}
.dh-left .dh-decor-line {
    flex: 1 1 auto;
    width: auto;
    min-width: 24px;
    margin-left: 10px;
}
.dh-nav-item {
    padding: 4px 7px;
    color: rgba(170, 200, 230, 0.65);
    font-size: 11.5px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 3px;
    position: relative;
    border: 1px solid transparent;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
    flex-shrink: 0;
}
.dh-nav-item:hover {
    color: #4cd9ff;
    background: rgba(0, 229, 255, 0.06);
    border-color: rgba(0, 229, 255, 0.15);
}
.dh-nav-item i {
    font-size: 11.5px;
    opacity: 0.85;
}
.dh-nav-item.active {
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.22);
}
.dh-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #00e5ff, transparent);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
}
.dh-clock {
    font-family: 'Consolas', 'Courier New', monospace;
    color: #00e5ff !important;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
    font-size: 11.5px !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    background: rgba(0, 229, 255, 0.06) !important;
    padding: 4px 8px !important;
    letter-spacing: 0.5px;
}
.dh-user {
    font-size: 12px !important;
    color: rgba(180, 210, 240, 0.75) !important;
}
.dh-center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    position: relative;
    min-width: 0;
    overflow: visible;
}

/* 顶部导航下拉菜单 */
.dh-dropdown {
    position: relative;
    padding: 0;
}
.dh-dropdown-toggle {
    padding: 4px 7px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.dh-dropdown-arrow {
    font-size: 10px;
    opacity: 0.7;
    transition: transform 0.25s ease;
    margin-left: 2px;
}
.dh-dropdown:hover .dh-dropdown-arrow {
    transform: rotate(180deg);
}
.dh-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 150px;
    padding: 6px;
    background: linear-gradient(180deg, rgba(12, 34, 68, 0.95) 0%, rgba(8, 22, 48, 0.95) 100%);
    border: 1px solid rgba(86, 200, 235, 0.35);
    border-radius: 5px;
    box-shadow: 0 8px 28px rgba(0, 12, 32, 0.65), 0 0 16px rgba(86, 200, 235, 0.12);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 200;
}
.dh-dropdown:hover .dh-dropdown-menu,
.dh-dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.dh-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(86, 200, 235, 0.4);
}
.dh-dropdown-item {
    padding: 8px 12px;
    border-radius: 4px;
    color: rgba(180, 210, 240, 0.82);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.dh-dropdown-item:hover {
    background: rgba(0, 229, 255, 0.1);
    color: #00e5ff;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}
.dh-dropdown-item i {
    font-size: 12px;
    width: 16px;
    text-align: center;
}
.dh-dropdown-item.active {
    background: rgba(0, 229, 255, 0.13);
    color: #00e5ff;
    border: 1px solid rgba(0, 229, 255, 0.22);
}
.dh-dropdown.active > .dh-dropdown-toggle {
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.22);
}
.dh-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 8px;
    background: linear-gradient(180deg,
        #ffffff 0%,
        #c8f5ff 25%,
        #6ee5ff 55%,
        #00b8d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
    filter: drop-shadow(0 0 22px rgba(0, 229, 255, 0.55))
            drop-shadow(0 0 48px rgba(0, 229, 255, 0.2));
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    position: relative;
    text-transform: uppercase;
}
.dh-title::before,
.dh-title::after {
    content: '';
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(110, 229, 255, 0.9), transparent);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}
.dh-title::before { right: calc(100% + 20px); }
.dh-title::after { left: calc(100% + 20px); }

/* ------- KPI 指标行 - 工业级风格 ------- */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.kpi-card {
    background: rgba(8, 20, 42, 0.5);
    border: 1px solid rgba(0, 229, 255, 0.22);
    border-radius: 4px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.3s ease;
}
.kpi-card:hover {
    border-color: rgba(0, 229, 255, 0.38);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 12px rgba(0, 229, 255, 0.1);
}
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 5%,
        rgba(0, 229, 255, 0.5) 25%,
        rgba(0, 229, 255, 0.5) 75%,
        transparent 95%);
}
.kpi-card .corner {
    position: absolute;
    width: 7px;
    height: 7px;
    border-color: rgba(0, 229, 255, 0.65);
    border-style: solid;
    pointer-events: none;
}
.kpi-card .corner.tl { top: 2px; left: 2px; border-width: 1px 0 0 1px; }
.kpi-card .corner.tr { top: 2px; right: 2px; border-width: 1px 1px 0 0; }
.kpi-card .corner.bl { bottom: 2px; left: 2px; border-width: 0 0 1px 1px; }
.kpi-card .corner.br { bottom: 3px; right: 3px; border-width: 0 1px 1px 0; }
.kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}
.kpi-body { flex: 1; }
.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: #6ee5ff;
    line-height: 1;
    letter-spacing: 1px;
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: 'Orbitron', 'Microsoft YaHei', sans-serif;
    text-shadow:
        0 0 10px rgba(110, 229, 255, 0.75),
        0 0 24px rgba(86, 200, 235, 0.5),
        0 0 48px rgba(86, 200, 235, 0.25);
}
.kpi-value small {
    font-size: 12px;
    color: rgba(180, 210, 240, 0.8);
    font-weight: 400;
    letter-spacing: 0;
}
.kpi-label {
    font-size: 12px;
    color: rgba(180, 210, 240, 0.65);
    margin-top: 3px;
}

/* ------- 主体4列网格 ------- */
#module-overview.active {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.kpi-row {
    display: none !important;
    flex: 0 0 0;
    min-height: 0;
}
.dashboard-grid {
    display: flex;
    gap: 8px;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    max-width: 100%;
}
.dash-col-left {
    flex: 0 0 20%;
    min-width: 0;
}
.dash-col-right {
    flex: 0 0 20%;
    min-width: 0;
}
.dash-col-center {
    flex: 1 1 0;
    min-width: 0;
}
.dash-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
}
.dash-col-left, .dash-col-right {
    padding-right: 0;
}
.dash-col-left,
.dash-col-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(110, 229, 255, 0.25) transparent;
}
.dash-col-left::-webkit-scrollbar,
.dash-col-right::-webkit-scrollbar { width: 4px; }
.dash-col-left::-webkit-scrollbar-thumb,
.dash-col-right::-webkit-scrollbar-thumb { background: rgba(110, 229, 255, 0.25); border-radius: 2px; }
.dash-col-left::-webkit-scrollbar-track,
.dash-col-right::-webkit-scrollbar-track { background: transparent; }
/* 左列：设备状态/收益统计自适应剩余空间（不塌缩为0）；下方两张卡片按内容撑开并整体下移 */
.dash-col-left .dash-panel:nth-child(1) { flex: 1 1 auto; min-height: fit-content; }
.dash-col-left .dash-panel:nth-child(2) {
    flex: 0 0 auto;
    margin-top: 12px;
}
.dash-col-left .dash-panel:nth-child(3) {
    flex: 0 0 auto;
    margin-top: 4px;
}
/* 右列：收益统计自适应剩余空间（不塌缩为0）；工单统计、告警信息按内容撑开并整体下移 */
.dash-col-right .dash-panel:nth-child(1) { flex: 1 1 auto; min-height: fit-content; }
/* 可折叠面板（设备状态）：折叠时保留数据、隐藏故障卡，并拉伸填充列内剩余空间 */
.dash-panel.collapsed #fault-detail-card { display: none !important; }
.dash-panel.collapsed .dash-panel-body { padding: 4px 8px 6px; }
.dash-panel.collapsed .device-status-summary { margin-bottom: 2px; padding: 3px 4px; }
.dash-panel.collapsed .device-data-list { flex: 1 1 auto; justify-content: space-evenly; }
.dash-panel.collapsed .dd-row { padding: 0 6px; font-size: 12px; white-space: nowrap; }
/* 折叠态仅保留前3项指标（电流值/在线率/故障率），负载率/光伏板/空调机组归入展开详情 */
.dash-panel.collapsed .dd-row:nth-child(n+4) { display: none; }
.dash-panel.collapsed .dd-row .dd-name,
.dash-panel.collapsed .dd-row .dd-val { overflow: hidden; text-overflow: ellipsis; }
.dash-col-left .dash-panel.collapsed,
.dash-col-right .dash-panel.collapsed { flex: 1 0 auto !important; min-height: fit-content !important; display: flex; flex-direction: column; }
.dash-panel.collapsed .dash-panel-header { flex: 0 0 auto; }
.dash-panel-header[onclick] { user-select: none; }
.dash-panel-header[onclick]:hover { background: rgba(110, 229, 255, 0.06); }
.dash-col-right .dash-panel:nth-child(2) {
    flex: 0 0 auto;
    margin-top: 12px;
}
.dash-col-right .dash-panel:nth-child(3) {
    flex: 0 0 auto;
    margin-top: 4px;
}

/* ------- 中间列底部图表 (三张等高图表，占30%高度，不压缩) ------- */
.center-bottom-charts {
    position: relative;
    flex: 0 0 34%;
    min-height: 0;
    overflow: hidden;
}
.center-bottom-charts .dash-panel {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: calc((100% - 30px) / 4);
    overflow: hidden;
}
.center-bottom-charts .dash-panel:nth-child(1) { left: 0; }
.center-bottom-charts .dash-panel:nth-child(2) { left: calc((100% - 30px) / 4 + 10px); }
.center-bottom-charts .dash-panel:nth-child(3) { left: calc((100% - 30px) / 4 * 2 + 20px); }
.center-bottom-charts .dash-panel:nth-child(4) { left: calc((100% - 30px) / 4 * 3 + 30px); }
.center-bottom-charts .dash-panel-body {
    padding: 6px 10px;
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto !important;
    overflow: hidden;
}
/* 大数字紧跟标题下方；分项明细贴底，消除标题与数字之间的空白 */
.center-bottom-charts .rt-main-metric {
    flex: 0 0 auto;
    padding: 2px 0 0;
    margin: 0;
}
.center-bottom-charts .rt-sub-metrics {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    margin-top: 10px;
    gap: 4px;
}
.center-bottom-charts .rt-sub-item { flex: 1 1 0; padding: 0 8px; font-size: 13px; }
#lighting-realtime .rt-label { margin: 0; font-size: 10px; line-height: 1.2; }
.center-bottom-charts .dash-chart {
    height: 100%;
    width: 100%;
}

/* ------- 底部四面板实时数据展示 ------- */
.realtime-metric-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
}
.rt-main-metric {
    text-align: center;
    padding: 8px 0 4px;
    width: 100%;
}
.rt-main-metric.electric .rt-value { color: #6ee5ff; text-shadow: 0 0 16px rgba(110, 229, 255, 0.45); }
.rt-main-metric.water .rt-value { color: #4ea8e8; text-shadow: 0 0 16px rgba(78, 168, 232, 0.45); }
.rt-main-metric.gas .rt-value { color: #f59e3c; text-shadow: 0 0 16px rgba(245, 158, 60, 0.45); }
.rt-main-metric.lighting .rt-value { color: #ffd06b; text-shadow: 0 0 16px rgba(255, 208, 107, 0.45); }
/* 照明面板：窄屏下禁止换行，标签超长省略号 */
#lighting-realtime .rt-sub-item { white-space: nowrap; }
#lighting-realtime .rt-sub-label { overflow: hidden; text-overflow: ellipsis; }
.rt-value-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    line-height: 1;
}
.rt-value {
    font-size: 34px;
    font-weight: 700;
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    transition: color 0.2s ease;
}
.rt-unit {
    font-size: 13px;
    color: #a8c5dd;
    font-weight: 500;
}
.rt-label {
    font-size: 12px;
    color: #8aa4c0;
    margin-top: 6px;
    letter-spacing: 0.5px;
}
.rt-sub-metrics {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.rt-sub-item {
    display: flex;
    align-items: center;
    background: rgba(16, 38, 72, 0.35);
    border: 1px solid rgba(110, 210, 245, 0.12);
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 12px;
}
.rt-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 7px;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}
.rt-sub-label {
    color: #a8c5dd;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rt-sub-value {
    color: #e8f4ff;
    font-weight: 600;
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    margin-right: 3px;
    min-width: 42px;
    text-align: right;
}
.rt-sub-unit {
    color: #7a9ab8;
    font-size: 11px;
}

/* ------- 工业级通用面板 - 超轻玻璃态 + 青色霓虹描边 ------- */
.dash-panel {
    background:
        linear-gradient(180deg, rgba(24, 52, 96, 0.62) 0%, rgba(12, 28, 58, 0.52) 100%);
    border: 1px solid rgba(110, 210, 245, 0.32);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
    box-shadow:
        0 4px 20px rgba(0, 12, 32, 0.5),
        0 0 14px rgba(86, 200, 235, 0.1),
        0 0 0 1px rgba(110, 210, 245, 0.06) inset,
        inset 0 0 28px rgba(86, 200, 235, 0.06);
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.dash-panel:hover {
    border-color: rgba(110, 220, 250, 0.55);
    box-shadow:
        0 6px 26px rgba(0, 16, 40, 0.55),
        0 0 24px rgba(86, 200, 235, 0.22),
        inset 0 0 28px rgba(86, 200, 235, 0.1);
}
.dash-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 8%,
        rgba(110, 220, 250, 0.75) 30%,
        rgba(110, 220, 250, 0.75) 70%,
        transparent 92%);
    z-index: 2;
}

/* 四角装饰 - 精致科技斜切角 */
.dash-panel .corner {
    position: absolute;
    width: 9px;
    height: 9px;
    border-color: rgba(86, 200, 235, 0.75);
    border-style: solid;
    z-index: 5;
    pointer-events: none;
}
.dash-panel .corner.tl { top: 2px; left: 2px; border-width: 1px 0 0 1px; }
.dash-panel .corner.tr { top: 2px; right: 2px; border-width: 1px 1px 0 0; }
.dash-panel .corner.bl { bottom: 2px; left: 2px; border-width: 0 0 1px 1px; }
.dash-panel .corner.br { bottom: 2px; right: 2px; border-width: 0 1px 1px 0; }

.dash-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(86, 180, 220, 0.18);
    background: linear-gradient(90deg,
        rgba(56, 140, 200, 0.14) 0%,
        rgba(20, 60, 110, 0.06) 45%,
        transparent 100%);
    position: relative;
    flex-shrink: 0;
}
.dash-panel-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: linear-gradient(180deg, #5cd6f0 0%, #3892d8 100%);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 10px rgba(86, 200, 235, 0.45);
}
.dash-panel-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 1.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.dash-panel-header h3 i {
    color: #5cd6f0;
    font-size: 13px;
    text-shadow: 0 0 8px rgba(86, 200, 235, 0.45);
}
.dash-panel-header .panel-tag {
    font-size: 11px;
    color: rgba(190, 215, 240, 0.55);
    font-weight: 400;
    letter-spacing: 0.5px;
}
.dash-panel-body {
    padding: 8px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* 设备状态：在线/离线/故障汇总 */
.device-status-summary {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 8px;
    padding: 6px 4px;
    background: rgba(0, 188, 212, 0.05);
    border: 1px solid rgba(0, 188, 212, 0.12);
    border-radius: 6px;
}
.dss-item {
    text-align: center;
    flex: 1;
    min-width: 0;
}
.dss-item + .dss-item { border-left: 1px solid rgba(86, 180, 220, 0.12); }
.dss-num {
    font-size: 16px;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    color: #5cd6f0;
}
.dss-item.offline .dss-num { color: #94a8bc; }
.dss-item.fault .dss-num { color: #e85a5a; }
.dss-lbl {
    font-size: 9px;
    color: rgba(180, 210, 240, 0.65);
    margin-top: 1px;
}

/* 环境监测详情 */
.env-detail {
    display: block;
    font-size: 9px;
    color: rgba(160, 195, 225, 0.55);
    margin-top: 1px;
}
.dash-tabs { display: flex; gap: 2px; }
.dash-tabs .tab-item {
    padding: 2px 10px;
    font-size: 12px;
    color: rgba(180, 210, 240, 0.7);
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
}
.dash-tabs .tab-item.active {
    background: rgba(0, 188, 212, 0.2);
    color: #00e5ff;
}
.header-badge {
    font-size: 12px;
    color: #ff9800;
    cursor: pointer;
}
.header-badge:hover { color: #ffb74d; }

/* ------- 设备数据 ------- */
.device-gauge-row {
    text-align: center;
    padding: 4px 0 8px;
    border-bottom: 1px solid rgba(60, 150, 200, 0.14);
    margin-bottom: 6px;
}
.device-gauge {
    width: 120px;
    height: 80px;
    margin: 0 auto;
}
.device-gauge-label {
    font-size: 11.5px;
    color: rgba(190, 215, 240, 0.65);
    margin-top: 2px;
    letter-spacing: 0.5px;
}
.device-data-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dd-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    font-size: 12.5px;
    border-radius: 4px;
    transition: all 0.2s;
}
.dd-row:hover { background: rgba(56, 140, 200, 0.08); }
.dd-name { color: rgba(190, 215, 240, 0.68); }
.dd-val {
    color: #5cd6f0;
    font-weight: 600;
    font-family: 'Orbitron', 'Microsoft YaHei', sans-serif;
    letter-spacing: 0.3px;
}

/* ------- 环境数据 ------- */
.env-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 4px;
    border-radius: 5px;
    transition: background 0.2s;
}
.env-item-row:hover { background: rgba(56, 140, 200, 0.06); }
.env-item-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    background: rgba(8, 20, 42, 0.4);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}
.env-item-circle i { font-size: 12px; }
.env-num {
    font-size: 9px;
    color: #e8f4ff;
    margin-top: 1px;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
}
.env-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}
.env-lbl { font-size: 13px; color: rgba(200, 220, 240, 0.82); }
.env-st {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.env-st.good { background: rgba(80, 195, 140, 0.18); color: #6cd6a3; border: 1px solid rgba(80, 195, 140, 0.35); }
.env-st.normal { background: rgba(56, 140, 220, 0.18); color: #6cb8e8; border: 1px solid rgba(56, 140, 220, 0.35); }
.env-st.warn { background: rgba(245, 158, 60, 0.18); color: #f5b87a; border: 1px solid rgba(245, 158, 60, 0.35); }

/* ------- 能耗分析图表 ------- */
.dash-chart {
    width: 100%;
    flex: 1;
    min-height: 0;
}

.dash-col-right .dash-panel-header {
    padding: 5px 10px;
}
.dash-col-right .dash-panel-header h3 {
    font-size: 12.5px;
    gap: 6px;
}
.dash-col-right .dash-panel-header h3 i {
    font-size: 12px;
}
.dash-col-right .dash-panel-body {
    padding: 5px 8px;
}
.dash-col-right .alert-body {
    flex-direction: row !important;
    gap: 6px;
}
.dash-col-right .alert-donut-wrap {
    width: 86px;
    flex-shrink: 0;
}
.dash-col-right .alert-donut {
    width: 86px;
    height: 86px;
}
.dash-col-right .alert-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.dash-col-right .adl-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    background: rgba(0, 180, 216, 0.06);
    border-radius: 4px;
    border: 1px solid rgba(0, 180, 216, 0.12);
}
.dash-col-right .adl-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 5px currentColor;
}
.dash-col-right .adl-label {
    font-size: 11px;
    color: rgba(200, 220, 240, 0.88);
    flex: 1;
}
.dash-col-right .adl-count {
    font-size: 14px;
    font-weight: 700;
    color: #6ee5ff;
    font-family: 'Orbitron', 'Alibaba PuHuiTi', sans-serif;
}
.dash-col-right .adl-unit {
    font-size: 9px;
    color: rgba(160, 195, 225, 0.7);
    font-weight: 400;
    margin-left: 2px;
}

/* 收益统计顶部汇总卡 */
.rev-summary-cards {
    display: flex;
    gap: 6px;
    margin-bottom: 5px;
}
.rev-sum-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 5px 7px;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.1) 0%, rgba(0, 188, 212, 0.03) 100%);
    border: 1px solid rgba(0, 188, 212, 0.18);
    border-radius: 5px;
}
.rev-sum-lbl { font-size: 10px; color: rgba(180, 210, 240, 0.65); }
.rev-sum-val {
    font-size: 15px;
    font-weight: 700;
    color: #00e5ff;
    font-family: 'Orbitron', sans-serif;
    margin-top: 1px;
}
.rev-sum-val small { font-size: 10px; color: rgba(180, 210, 240, 0.65); font-weight: 400; }
.rev-sum-trend {
    font-size: 9px;
    margin-top: 1px;
    font-weight: 500;
}
.rev-sum-trend.up { color: #5fd6a0; }
.rev-sum-trend.down { color: #e85a5a; }

/* 工单统计迷你占比条 */
.wo-mini-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 5px 0;
    border-top: 1px solid rgba(0, 188, 212, 0.12);
    border-bottom: 1px solid rgba(0, 188, 212, 0.12);
    margin: 4px 0;
}
.wo-mini-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: rgba(190, 215, 240, 0.8);
}
.wo-mini-label { width: 42px; flex-shrink: 0; }
.wo-mini-track {
    flex: 1;
    height: 5px;
    background: rgba(86, 180, 220, 0.1);
    border-radius: 3px;
    overflow: hidden;
}
.wo-mini-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.wo-mini-num { width: 22px; text-align: right; font-family: 'Orbitron', sans-serif; color: #e8f4ff; }

/* 告警预览列表（三级颜色：紧急/重要/提示） */
.alert-preview-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}
.alert-preview-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    background: rgba(14, 28, 52, 0.45);
    border-left: 2px solid transparent;
    transition: background 0.2s;
}
.alert-preview-item:hover { background: rgba(30, 60, 100, 0.5); }
.alert-preview-item.level-urgent { border-left-color: #e85a5a; }
.alert-preview-item.level-important { border-left-color: #ffb05c; }
.alert-preview-item.level-tip { border-left-color: #5cd6f0; }
.ap-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.alert-preview-item.level-urgent .ap-dot { background: #e85a5a; box-shadow: 0 0 5px rgba(232, 90, 90, 0.6); }
.alert-preview-item.level-important .ap-dot { background: #ffb05c; box-shadow: 0 0 5px rgba(255, 176, 92, 0.5); }
.alert-preview-item.level-tip .ap-dot { background: #5cd6f0; box-shadow: 0 0 5px rgba(86, 200, 235, 0.5); }
.ap-text {
    flex: 1;
    font-size: 10.5px;
    color: rgba(200, 225, 255, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ap-time { font-size: 9px; color: rgba(160, 195, 225, 0.5); flex-shrink: 0; }

/* ============ 工业级大屏样式强化 ============ */
/* 左侧数据行 - 数字醒目清晰 */
.dd-row {
    padding: 6px 9px;
    font-size: 13.5px;
    border-bottom: 1px solid rgba(0, 160, 200, 0.06);
    border-radius: 0;
    gap: 8px;
}
.dd-row:last-child { border-bottom: none; }
.dd-name { 
    color: rgba(170, 198, 225, 0.72); 
    font-weight: 400;
    letter-spacing: 0.2px;
}
.dd-val { 
    color: #00e5ff; 
    font-weight: 600; 
    font-size: 14px;
    font-family: 'Noto Sans SC', 'Segoe UI', sans-serif;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
}

/* 设备仪表盘中心数字升级 */
.online-count-num {
    font-size: 28px;
    font-weight: 700;
    color: #e6fbff;
    letter-spacing: 1.5px;
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.65);
    font-family: 'DIN Alternate', 'Noto Sans SC', 'Segoe UI', sans-serif;
}

/* 面板标题高度统一 */
.dash-panel-header {
    min-height: 32px;
    padding: 5px 9px 5px 9px;
    border-bottom: 1px solid rgba(0, 180, 220, 0.18);
    background: linear-gradient(90deg, rgba(0, 180, 220, 0.08) 0%, transparent 100%);
}
.dash-panel-header h3 {
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(220, 240, 255, 0.95);
    letter-spacing: 0.8px;
}
.dash-panel-header h3 i {
    color: #00e5ff;
    margin-right: 6px;
    font-size: 13px;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}

/* 面板内边距统一 */
.dash-panel-body {
    padding: 7px 8px;
}

/* ------- 3D 模型区 (flex 填满中间列剩余空间) ------- */
.dash-col-center {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.dash-3d-wrap {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(56, 140, 200, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(38, 100, 170, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, rgba(6, 16, 36, 0.92) 0%, rgba(3, 10, 24, 0.95) 100%);
    border: 1px solid rgba(86, 180, 220, 0.28);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    box-shadow:
        0 4px 24px rgba(0, 10, 30, 0.55),
        0 0 32px rgba(56, 140, 200, 0.12),
        inset 0 0 40px rgba(20, 60, 120, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.dash-3d-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 6%, rgba(86, 200, 235, 0.75) 50%, transparent 94%);
    box-shadow: 0 0 14px rgba(86, 200, 235, 0.45);
    z-index: 10;
}
.dash-3d-wrap::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 12%, rgba(86, 200, 235, 0.45) 50%, transparent 88%);
    z-index: 10;
}
.dash-3d-wrap .corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: rgba(86, 200, 235, 0.85);
    border-style: solid;
    z-index: 11;
    pointer-events: none;
}
.dash-3d-wrap .corner.tl { top: 6px; left: 6px; border-width: 2px 0 0 2px; }
.dash-3d-wrap .corner.tr { top: 6px; right: 6px; border-width: 2px 2px 0 0; }
.dash-3d-wrap .corner.bl { bottom: 6px; left: 6px; border-width: 0 0 2px 2px; }
.dash-3d-wrap .corner.br { bottom: 6px; right: 6px; border-width: 0 2px 2px 0; }
.dash-3d-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(86, 180, 220, 0.18);
    background: linear-gradient(90deg,
        rgba(56, 140, 200, 0.12) 0%,
        rgba(20, 60, 110, 0.04) 50%,
        transparent 100%);
    flex-shrink: 0;
    position: relative;
}
.dash-3d-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: linear-gradient(180deg, #5cd6f0 0%, #3892d8 100%);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 10px rgba(86, 200, 235, 0.5);
}
.dash-3d-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: #e8f4ff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 1.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.dash-3d-header h3 i {
    color: #5cd6f0;
    font-size: 13px;
    text-shadow: 0 0 8px rgba(86, 200, 235, 0.5);
}
.dash-3d-actions { display: flex; gap: 6px; }
.dash-btn {
    padding: 5px 12px;
    font-size: 11.5px;
    color: #5cd6f0;
    background: linear-gradient(180deg, rgba(56, 140, 200, 0.14), rgba(56, 140, 200, 0.06));
    border: 1px solid rgba(86, 180, 220, 0.35);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.dash-btn:hover {
    background: linear-gradient(180deg, rgba(86, 200, 235, 0.22), rgba(56, 140, 200, 0.12));
    border-color: rgba(86, 200, 235, 0.6);
    box-shadow: 0 0 14px rgba(86, 200, 235, 0.25), inset 0 0 8px rgba(86, 200, 235, 0.08);
    color: #8fe5f5;
}
.dash-3d-canvas {
    flex: 1;
    position: relative;
    min-height: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 60%, rgba(56, 140, 200, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse at center, rgba(20, 50, 100, 0.18) 0%, rgba(2, 10, 24, 0.5) 75%);
    overflow: hidden;
}
.dash-3d-canvas::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(86, 180, 220, 0.012) 3px,
        rgba(86, 180, 220, 0.012) 4px
    );
    pointer-events: none;
    z-index: 2;
}
.dash-3d-canvas::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(86, 200, 235, 0.5), transparent);
    box-shadow: 0 0 12px rgba(86, 200, 235, 0.4);
    top: 0;
    z-index: 3;
    animation: scanDown 5s linear infinite;
    pointer-events: none;
    opacity: 0.7;
}
@keyframes scanDown {
    0% { top: -2px; }
    100% { top: 100%; }
}
.dash-3d-canvas canvas {
    width: 100% !important;
    height: 100% !important;
}
.loading-mini {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(180, 210, 240, 0.7);
    font-size: 13px;
    z-index: 5;
}
.loading-mini p { margin-top: 10px; }
.spinner-mini {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(0, 229, 255, 0.2);
    border-top-color: #00e5ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
}
@keyframes spin { to { transform: rotate(360deg); } }

.dash-3d-floaters {
    display: flex;
    justify-content: space-around;
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(4, 12, 28, 0.4) 0%, rgba(2, 8, 20, 0.65) 100%);
    border-top: 1px solid rgba(86, 180, 220, 0.18);
    position: relative;
    z-index: 4;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}
.dash-3d-floaters::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(86, 200, 235, 0.5), transparent);
}
.floater-item { text-align: center; }
.fi-val {
    font-size: 20px;
    font-weight: 700;
    color: #5cd6f0;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.5px;
    text-shadow:
        0 0 8px rgba(86, 200, 235, 0.5),
        0 0 18px rgba(56, 140, 200, 0.25);
}
.fi-lbl {
    font-size: 10.5px;
    color: rgba(190, 215, 240, 0.62);
    margin-top: 2px;
    letter-spacing: 0.4px;
}
.fi-compare {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 500;
}
.fi-compare i { font-size: 8px; margin-right: 1px; }
.fi-cmp-day { color: #5fd6a0; }
.fi-cmp-yesterday { color: #ffb05c; }
/* 3D底部提示文字 */
.dash-3d-footer-tip {
    padding: 4px 14px;
    font-size: 10.5px;
    color: rgba(150, 178, 208, 0.6);
    text-align: center;
    background: rgba(56, 140, 200, 0.04);
    border-top: 1px solid rgba(86, 180, 220, 0.12);
    letter-spacing: 0.6px;
    flex-shrink: 0;
}
.dash-3d-footer-tip i {
    color: rgba(86, 200, 235, 0.65);
    margin-right: 4px;
    font-size: 10.5px;
}

/* ------- 收益统计 ------- */
.revenue-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.rev-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 5px;
    background: rgba(0, 188, 212, 0.04);
    transition: background 0.2s;
}
.rev-row:hover { background: rgba(0, 188, 212, 0.1); }
.rev-ico {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.rev-detail { flex: 1; line-height: 1.25; }
.rev-price {
    font-size: 13px;
    color: #e0f0ff;
    font-weight: 500;
}
.rev-price small { font-size: 10px; color: rgba(180, 210, 240, 0.6); }
.rev-amount {
    font-size: 11px;
    color: #00e5ff;
    margin-top: 1px;
}
.rev-amount small { font-size: 9px; color: rgba(180, 210, 240, 0.6); }
.rev-trend {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
}
.rev-trend.up { color: #4caf50; background: rgba(76, 175, 80, 0.15); }
.rev-trend.down { color: #f44336; background: rgba(244, 67, 54, 0.15); }
.rev-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(0, 188, 212, 0.15);
}
.rev-total span { font-size: 12px; color: rgba(180, 210, 240, 0.7); }
.rev-total strong {
    font-size: 16px;
    color: #00e5ff;
    font-family: 'Orbitron', sans-serif;
}
.rev-total strong small { font-size: 11px; color: rgba(180, 210, 240, 0.7); font-weight: 400; }

/* ------- 充电桩状态 ------- */
.charging-pile-overview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    justify-content: space-between;
}
.pile-status-header {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.pile-status-total,
.pile-status-active {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px;
    border-radius: 8px;
    background: rgba(0, 188, 212, 0.05);
    border: 1px solid rgba(86, 180, 220, 0.1);
}
.pile-total-num,
.pile-active-num {
    font-size: 22px;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    line-height: 1.1;
}
.pile-total-num { color: #6ee5ff; text-shadow: 0 0 10px rgba(110, 229, 255, 0.45); }
.pile-active-num { color: #5fd6a0; text-shadow: 0 0 10px rgba(95, 214, 160, 0.4); }
.pile-total-label,
.pile-active-label {
    font-size: 11px;
    color: rgba(180, 210, 240, 0.65);
    margin-top: 2px;
}
.pile-status-chart {
    flex: 1;
    min-height: 96px;
    width: 100%;
}
.pile-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    justify-content: center;
    padding: 2px 0;
}
.pile-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(200, 225, 255, 0.9);
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(86, 180, 220, 0.08);
    border: 1px solid rgba(86, 180, 220, 0.12);
}
.pile-legend-item b { font-family: 'Orbitron', sans-serif; margin-left: 3px; }
.pile-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
}

/* ------- 工单统计 ------- */
.dash-col-right .wo-ring-row {
    display: flex;
    justify-content: space-around;
    padding: 3px 0;
    gap: 2px;
}
.dash-col-right .wo-ring-item { text-align: center; flex: 1; min-width: 0; }
.dash-col-right .wo-ring-chart {
    width: 100%;
    max-width: 52px;
    aspect-ratio: 1;
    margin: 0 auto;
}
.dash-col-right .wo-ring-lbl {
    font-size: 10px;
    color: rgba(180, 210, 240, 0.7);
    margin-top: 2px;
}
.dash-col-right .wo-tags {
    display: flex;
    justify-content: space-around;
    gap: 3px;
    padding-top: 5px;
    border-top: 1px solid rgba(0, 188, 212, 0.12);
}
.dash-col-right .wo-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
}
.wo-tag.done { background: rgba(76, 175, 80, 0.2); color: #81c784; }
.wo-tag.doing { background: rgba(0, 188, 212, 0.2); color: #4dd0e1; }
.wo-tag.pending { background: rgba(255, 152, 0, 0.2); color: #ffb74d; }

/* ------- 告警信息 ------- */
.alert-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.alert-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    border-left: 3px solid;
    transition: all 0.25s ease;
    background: linear-gradient(180deg, rgba(14, 28, 52, 0.55) 0%, rgba(8, 20, 42, 0.45) 100%);
    backdrop-filter: blur(8px);
}
.alert-item:hover {
    background: linear-gradient(180deg, rgba(20, 40, 72, 0.65) 0%, rgba(12, 28, 56, 0.55) 100%);
    transform: translateX(2px);
}
.alert-item.critical { border-left-color: #e85a5a; box-shadow: -2px 0 10px rgba(232, 90, 90, 0.18); }
.alert-item.warning { border-left-color: #f59e3c; box-shadow: -2px 0 10px rgba(245, 158, 60, 0.18); }
.alert-item.info { border-left-color: #5cd6f0; box-shadow: -2px 0 10px rgba(86, 200, 235, 0.18); }
.ai-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.alert-item.critical .ai-dot { background: #e85a5a; box-shadow: 0 0 8px rgba(232, 90, 90, 0.6); }
.alert-item.warning .ai-dot { background: #f59e3c; box-shadow: 0 0 8px rgba(245, 158, 60, 0.6); }
.alert-item.info .ai-dot { background: #5cd6f0; box-shadow: 0 0 8px rgba(86, 200, 235, 0.6); }
.ai-main { flex: 1; min-width: 0; }
.ai-title {
    font-size: 13px;
    color: #e8f4ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.3px;
}
.ai-meta {
    font-size: 11px;
    color: rgba(180, 210, 240, 0.55);
    margin-top: 3px;
    letter-spacing: 0.2px;
}
.ai-level {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    flex-shrink: 0;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.alert-item.critical .ai-level { background: rgba(232, 90, 90, 0.18); color: #f08080; border: 1px solid rgba(232, 90, 90, 0.3); }
.alert-item.warning .ai-level { background: rgba(245, 158, 60, 0.18); color: #f5b87a; border: 1px solid rgba(245, 158, 60, 0.3); }
.alert-item.info .ai-level { background: rgba(86, 200, 235, 0.18); color: #6cd6f0; border: 1px solid rgba(86, 200, 235, 0.3); }

/* ------- 响应式（保持16:9比例，不改变列宽百分比） ------- */
@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .kpi-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .center-bottom-charts {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .kpi-row {
        grid-template-columns: 1fr;
    }
    .dh-nav-item {
        padding: 6px 10px;
        font-size: 12px;
    }
    .dh-title {
        font-size: 16px;
        letter-spacing: 2px;
    }
    .dh-left {
        flex-basis: 112px;
    }
    .dh-brand-logo {
        width: 92px;
        height: 17px;
    }
}

/* ------- 滚动条美化 ------- */
.dash-panel-body::-webkit-scrollbar {
    width: 4px;
}
.dash-panel-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
.dash-panel-body::-webkit-scrollbar-thumb {
    background: rgba(0, 229, 255, 0.4);
    border-radius: 2px;
}
.dash-panel-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 229, 255, 0.6);
}

/* 左侧导航栏始终显示 */
body.overview-mode .sidebar {
    display: flex !important;
}

/* ============ 左侧 slim 导航栏 ============ */
.dash-side-nav {
    width: 120px !important;
    background: linear-gradient(180deg, rgba(5, 14, 30, 0.88) 0%, rgba(3, 10, 22, 0.92) 100%);
    border-right: 1px solid rgba(0, 229, 255, 0.15);
    padding: 14px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 1px 0 24px rgba(0, 0, 0, 0.35);
    z-index: 10;
}
.dsn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    color: rgba(160, 195, 225, 0.6);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    border-left: 2px solid transparent;
    font-size: 11.5px;
    text-align: center;
    letter-spacing: 0.5px;
    line-height: 1.3;
}
.dsn-item i {
    font-size: 18px;
    transition: all 0.25s ease;
}

/* 左侧导航分组（能耗分析下拉） */
.dsn-group {
    display: flex;
    flex-direction: column;
}
.dsn-group-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    color: rgba(160, 195, 225, 0.6);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    border-left: 2px solid transparent;
    font-size: 11.5px;
    text-align: center;
    letter-spacing: 0.5px;
    line-height: 1.3;
}
.dsn-group-toggle i:first-child { font-size: 18px; transition: all 0.25s ease; }
.dsn-group-arrow {
    font-size: 10px !important;
    transition: transform 0.25s ease;
    color: rgba(160, 195, 225, 0.5);
}
.dsn-group.active .dsn-group-arrow {
    transform: rotate(180deg);
    color: #00e5ff;
}
.dsn-group-toggle:hover,
.dsn-group.active > .dsn-group-toggle {
    color: #4cd9ff;
    background: rgba(0, 229, 255, 0.05);
}
.dsn-group.active > .dsn-group-toggle {
    color: #00e5ff;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.12) 0%, transparent 100%);
    border-left-color: #00e5ff;
}
.dsn-submenu {
    display: none;
    flex-direction: column;
    background: rgba(0, 8, 20, 0.25);
    padding: 4px 0;
}
.dsn-group.active .dsn-submenu { display: flex; }
.dsn-submenu .dsn-item {
    padding: 9px 4px 9px 10px;
    font-size: 10.5px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    border-left: 2px solid transparent;
    min-height: 34px;
}
.dsn-submenu .dsn-item i { font-size: 13px; }
.dsn-submenu .dsn-item span {
    flex: 1;
    text-align: left;
    line-height: 1.2;
}
.dsn-submenu .dsn-item:hover {
    color: #4cd9ff;
    background: rgba(0, 229, 255, 0.06);
}
.dsn-submenu .dsn-item.active {
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.1);
    border-left-color: #00e5ff;
}

/* 能耗分析页面标签页 */
.ea-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    padding: 0 2px;
}
.ea-tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 8px;
    background: rgba(0, 188, 212, 0.06);
    border: 1px solid rgba(86, 180, 220, 0.12);
    color: rgba(180, 210, 240, 0.75);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}
.ea-tab-item i { font-size: 13px; }
.ea-tab-item:hover {
    background: rgba(0, 229, 255, 0.1);
    color: #4cd9ff;
    border-color: rgba(0, 229, 255, 0.25);
}
.ea-tab-item.active {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(0, 188, 212, 0.08));
    color: #00e5ff;
    border-color: rgba(0, 229, 255, 0.45);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.12);
}
.ea-tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}
.ea-tab-panel.active { display: block; }

/* 能耗分析报告 */
.ea-report-body {
    padding: 16px;
    height: 100%;
}
.ea-report-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ea-report-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(86, 180, 220, 0.05);
    font-size: 13px;
}
.ea-r-label { color: rgba(180, 210, 240, 0.65); }
.ea-r-val { color: #e0f0ff; font-weight: 600; }
.ea-report-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ea-report-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    color: rgba(228, 243, 255, 0.9);
    line-height: 1.5;
}
.ea-report-list li i {
    color: #5fd6a0;
    margin-top: 3px;
    font-size: 12px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.dsn-item:hover {
    color: #4cd9ff;
    background: rgba(0, 229, 255, 0.05);
}
.dsn-item:hover i {
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}
.dsn-item.active {
    color: #00e5ff;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.12) 0%, transparent 100%);
    border-left-color: #00e5ff;
}
.dsn-item.active i {
    color: #00e5ff;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
}
.dsn-item.active::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 28px;
    background: #00e5ff;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
}

/* ===== 海绵城市页：讲解重点高亮（水位3.7m / 绿化35% 道路33%） ===== */
/* 顶部水位KPI高亮卡 */
.kpi-sponge-focus {
    border: 1px solid rgba(53, 198, 255, 0.55) !important;
    background: linear-gradient(135deg, rgba(53, 198, 255, 0.18), rgba(10, 30, 60, 0.35)) !important;
    box-shadow: 0 0 20px rgba(53, 198, 255, 0.30), inset 0 0 16px rgba(53, 198, 255, 0.08);
}
.kpi-sponge-focus .kpi-value {
    color: #6ee5ff !important;
    font-size: 32px;
    text-shadow: 0 0 18px rgba(110, 229, 255, 0.75);
}
.kpi-sponge-focus .kpi-label { color: #bfe9ff; }
.kpi-sub {
    font-size: 10px;
    color: #8fd8ff;
    letter-spacing: 1.5px;
    margin-top: 2px;
}
/* A区蓄水池聚焦卡片 */
.pool-card-focus {
    position: relative;
    border: 1px solid rgba(53, 198, 255, 0.65) !important;
    box-shadow: 0 0 18px rgba(53, 198, 255, 0.28), inset 0 0 20px rgba(53, 198, 255, 0.07);
    background: linear-gradient(160deg, rgba(30, 110, 170, 0.22), rgba(12, 32, 60, 0.35)) !important;
}
.pool-live-badge {
    position: absolute;
    top: 33px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #8fe8ff;
    letter-spacing: 1px;
    background: rgba(53, 198, 255, 0.12);
    border: 1px solid rgba(53, 198, 255, 0.4);
    padding: 1px 8px;
    border-radius: 10px;
    z-index: 2;
}
.pool-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #35c6ff;
    box-shadow: 0 0 7px #35c6ff;
    animation: pool-live-pulse 1.4s ease-in-out infinite;
}
@keyframes pool-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.65); }
}
.scc-m-focus b {
    font-size: 17px !important;
    color: #6ee5ff !important;
    text-shadow: 0 0 12px rgba(110, 229, 255, 0.8);
}
/* 本月耗水占比图表面板高亮 */
.chart-panel-focus {
    border: 1px solid rgba(47, 230, 160, 0.45);
    box-shadow: 0 0 18px rgba(47, 230, 160, 0.16), inset 0 0 18px rgba(47, 230, 160, 0.05);
}
.sponge-focus-tag {
    font-size: 15px;
    color: #062a1f;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, #2fe6a0, #35c6ff);
    padding: 4px 16px;
    border-radius: 14px;
    white-space: nowrap;
    box-shadow: 0 0 12px rgba(53, 198, 255, 0.45);
}
.sponge-focus-tag b {
    font-size: 19px;
    font-weight: 800;
    color: #fff44f;
    text-shadow: 0 0 8px rgba(255, 244, 79, 0.85), 0 1px 2px rgba(0, 0, 0, 0.4);
    margin: 0 1px;
}

/* ===== 地源热泵页：讲解重点数据高亮条 ===== */
#hvac-highlight-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 8px;
}
.hvac-hl {
    position: relative;
    border-radius: 8px;
    padding: 12px 14px;
    overflow: hidden;
    border: 1px solid rgba(110, 229, 255, 0.28);
    background: linear-gradient(135deg, rgba(20, 60, 110, 0.55), rgba(10, 28, 56, 0.45));
    box-shadow: inset 0 0 18px rgba(53, 198, 255, 0.06);
}
.hvac-hl::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #6ee5ff;
    box-shadow: 0 0 10px #6ee5ff;
}
.hvac-hl-return { border-color: rgba(255, 176, 92, 0.32); }
.hvac-hl-return::before { background: #ffb05c; box-shadow: 0 0 10px #ffb05c; }
.hvac-hl-load { border-color: rgba(95, 214, 160, 0.32); }
.hvac-hl-load::before { background: #5fd6a0; box-shadow: 0 0 10px #5fd6a0; }
.hvac-hl-save { border-color: rgba(255, 244, 79, 0.36); background: linear-gradient(135deg, rgba(90, 80, 10, 0.5), rgba(10, 28, 56, 0.45)); }
.hvac-hl-save::before { background: #fff44f; box-shadow: 0 0 10px #fff44f; }

.hvac-hl-label {
    font-size: 12px;
    color: rgba(191, 233, 255, 0.85);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.hvac-hl-label i { color: #6ee5ff; }
.hvac-hl-return .hvac-hl-label i { color: #ffb05c; }
.hvac-hl-load .hvac-hl-label i { color: #5fd6a0; }
.hvac-hl-save .hvac-hl-label i { color: #fff44f; }

.hvac-hl-value {
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.hvac-hl-value b {
    font-family: 'Orbitron', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #eaf8ff;
    text-shadow: 0 0 16px rgba(110, 229, 255, 0.7);
    line-height: 1;
}
.hvac-hl-value em {
    font-style: normal;
    font-size: 14px;
    color: rgba(191, 233, 255, 0.85);
    font-weight: 600;
}
.hvac-hl-return .hvac-hl-value b { color: #ffe2c2; text-shadow: 0 0 16px rgba(255, 176, 92, 0.7); }
.hvac-hl-load .hvac-hl-value b { color: #d6ffe9; text-shadow: 0 0 16px rgba(95, 214, 160, 0.7); }
.hvac-hl-save .hvac-hl-value b { color: #fffbd6; text-shadow: 0 0 16px rgba(255, 244, 79, 0.7); }

.hvac-hl-diff {
    margin-top: 5px;
    font-size: 11px;
    color: rgba(168, 197, 221, 0.7);
}
.hvac-hl-diff strong { color: #6ee5ff; font-weight: 700; font-family: 'Orbitron', sans-serif; }
.hvac-hl-return .hvac-hl-diff strong { color: #ffb05c; }

/* 地源热泵页：压缩 KPI 卡片高度 */
#hvac-highlight-bar { margin-bottom: 6px; }
.hvac-kpi-group { margin-top: 0; }
.hvac-kpi-card {
    min-height: 86px !important;
    padding: 5px 10px !important;
    gap: 2px !important;
}
.hvac-kpi-card .kpi-value { font-size: 18px !important; line-height: 1.05 !important; }
.hvac-kpi-sub {
    padding-top: 3px !important;
    gap: 1px 8px !important;
    margin-top: auto;
}
.hvac-kpi-sub-item { font-size: 10px !important; padding: 1px 0 !important; }

/* ===== 光伏数据系统：讲解重点数据高亮条 ===== */
#pv-highlight-bar {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}
.pv-hl {
    position: relative;
    border-radius: 8px;
    padding: 12px 14px;
    overflow: hidden;
    border: 1px solid rgba(110, 229, 255, 0.25);
    background: linear-gradient(135deg, rgba(20, 60, 110, 0.5), rgba(10, 28, 56, 0.4));
    box-shadow: inset 0 0 18px rgba(53, 198, 255, 0.05);
}
.pv-hl::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #6ee5ff;
    box-shadow: 0 0 10px #6ee5ff;
}
.pv-hl-gen { border-color: rgba(95, 214, 160, 0.35); background: linear-gradient(135deg, rgba(20, 80, 55, 0.5), rgba(10, 28, 56, 0.4)); }
.pv-hl-gen::before { background: #5fd6a0; box-shadow: 0 0 12px #5fd6a0; }
.pv-hl-income { border-color: rgba(255, 193, 7, 0.38); background: linear-gradient(135deg, rgba(90, 70, 10, 0.5), rgba(10, 28, 56, 0.4)); }
.pv-hl-income::before { background: #ffc107; box-shadow: 0 0 12px #ffc107; }
.pv-hl-total::before { background: #6ee5ff; }
.pv-hl-total2::before { background: #b388ff; box-shadow: 0 0 10px #b388ff; }

.pv-hl-label {
    font-size: 12px;
    color: rgba(191, 233, 255, 0.85);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pv-hl-gen .pv-hl-label i { color: #5fd6a0; }
.pv-hl-income .pv-hl-label i { color: #ffc107; }
.pv-hl-total .pv-hl-label i { color: #6ee5ff; }
.pv-hl-total2 .pv-hl-label i { color: #b388ff; }

.pv-hl-value {
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.pv-hl-value b {
    font-family: 'Orbitron', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #eaf8ff;
    line-height: 1;
}
.pv-hl-gen .pv-hl-value b { color: #d6ffe9; text-shadow: 0 0 16px rgba(95, 214, 160, 0.75); }
.pv-hl-income .pv-hl-value b { color: #fff3c4; text-shadow: 0 0 16px rgba(255, 193, 7, 0.75); }
.pv-hl-value em {
    font-style: normal;
    font-size: 14px;
    color: rgba(191, 233, 255, 0.85);
    font-weight: 600;
}
.pv-hl-yuan {
    margin-left: 6px;
    font-size: 13px;
    color: rgba(255, 243, 196, 0.7);
    font-family: 'Orbitron', sans-serif;
}
.pv-hl-value-sm b { font-size: 24px; }
.pv-hl-total .pv-hl-value b { color: #eaf8ff; text-shadow: 0 0 14px rgba(110, 229, 255, 0.6); }
.pv-hl-total2 .pv-hl-value b { color: #ece0ff; text-shadow: 0 0 14px rgba(179, 136, 255, 0.6); }

.pv-hl-sub {
    margin-top: 5px;
    font-size: 11px;
    color: rgba(168, 197, 221, 0.7);
}

/* ===== 海绵城市：顶部 KPI 卡亮色点缀 ===== */
.sponge-kpi {
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s;
}
.sponge-kpi::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--sponge-accent, #6ee5ff);
    box-shadow: 0 0 10px var(--sponge-accent, #6ee5ff);
}
.sponge-kpi .kpi-label i {
    color: var(--sponge-accent, #6ee5ff);
}
.sponge-kpi .kpi-value {
    color: var(--sponge-accent, #6ee5ff) !important;
    text-shadow: 0 0 14px var(--sponge-accent-glow, rgba(110,229,255,0.55));
}
.sponge-kpi .kpi-unit { opacity: 0.85; }

.sponge-kpi-1 {
    --sponge-accent: #6ee5ff;
    --sponge-accent-glow: rgba(110,229,255,0.55);
    border-color: rgba(110,229,255,0.3) !important;
    background: linear-gradient(135deg, rgba(20,60,110,0.45), rgba(10,28,56,0.35)) !important;
}
.sponge-kpi-2 {
    --sponge-accent: #5fd6a0;
    --sponge-accent-glow: rgba(95,214,160,0.6);
    border-color: rgba(95,214,160,0.35) !important;
    background: linear-gradient(135deg, rgba(20,80,55,0.45), rgba(10,28,56,0.35)) !important;
}
.sponge-kpi-3 {
    --sponge-accent: #ffb05c;
    --sponge-accent-glow: rgba(255,176,92,0.55);
    border-color: rgba(255,176,92,0.3) !important;
    background: linear-gradient(135deg, rgba(90,55,20,0.4), rgba(10,28,56,0.35)) !important;
}
.sponge-kpi-4 {
    --sponge-accent: #b388ff;
    --sponge-accent-glow: rgba(179,136,255,0.55);
    border-color: rgba(179,136,255,0.3) !important;
    background: linear-gradient(135deg, rgba(55,35,90,0.42), rgba(10,28,56,0.35)) !important;
}
.sponge-kpi:hover { box-shadow: 0 0 16px var(--sponge-accent-glow); }

/* ===== 首页 3D 区：上传图片/视频预览层 ===== */
.home-media-viewer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: #000;
    overflow: hidden;
    backdrop-filter: blur(2px);
}
.home-media-stage {
    flex: 1;
    width: 100%;
    min-height: 0;
    display: flex;
}
.home-media-stage img,
.home-media-stage video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #000;
}
.home-media-close {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(110, 229, 255, 0.5);
    background: rgba(10, 30, 60, 0.85);
    color: #6ee5ff;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.home-media-close:hover {
    background: rgba(232, 90, 90, 0.85);
    border-color: #e85a5a;
    color: #fff;
    box-shadow: 0 0 12px rgba(232, 90, 90, 0.6);
}

/* ============================================================
   照明数据系统页面
   ============================================================ */
#light-highlight-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 6px;
}
.light-hl-lux { border-color: rgba(255, 212, 92, 0.4); background: linear-gradient(135deg, rgba(90, 74, 12, 0.5), rgba(10, 28, 56, 0.45)); }
.light-hl-lux::before { background: #ffd45c; box-shadow: 0 0 10px #ffd45c; }
.light-hl-lux .hvac-hl-label i { color: #ffd45c; }
.light-hl-lux .hvac-hl-value b { color: #fff4d2; text-shadow: 0 0 16px rgba(255, 212, 92, 0.75); }
.light-hl-lux .hvac-hl-diff strong { color: #ffd45c; }

.light-hl-rate { border-color: rgba(110, 229, 255, 0.32); }
.light-hl-rate::before { background: #6ee5ff; box-shadow: 0 0 10px #6ee5ff; }

.light-hl-save { border-color: rgba(95, 214, 160, 0.36); }
.light-hl-save::before { background: #5fd6a0; box-shadow: 0 0 10px #5fd6a0; }
.light-hl-save .hvac-hl-label i { color: #5fd6a0; }
.light-hl-save .hvac-hl-value b { color: #d6ffe9; text-shadow: 0 0 16px rgba(95, 214, 160, 0.7); }

.light-hl-auto { border-color: rgba(179, 136, 255, 0.36); }
.light-hl-auto::before { background: #b388ff; box-shadow: 0 0 10px #b388ff; }
.light-hl-auto .hvac-hl-label i { color: #b388ff; }
.light-hl-auto .hvac-hl-value b { color: #ede2ff; text-shadow: 0 0 16px rgba(179, 136, 255, 0.7); }
.light-hl-auto .hvac-hl-diff strong { color: #b388ff; }

.light-kpi-card .kpi-label i { color: #ffd45c; }

/* 分区能耗表格 */
.light-zone-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.light-zone-table thead th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 500;
    color: rgba(168, 197, 221, 0.75);
    border-bottom: 1px solid rgba(110, 229, 255, 0.18);
    white-space: nowrap;
    background: rgba(110, 229, 255, 0.04);
}
.light-zone-table tbody td {
    padding: 7px 8px;
    color: rgba(220, 238, 255, 0.88);
    border-bottom: 1px solid rgba(110, 229, 255, 0.07);
    white-space: nowrap;
}
.light-zone-table tbody tr:hover { background: rgba(110, 229, 255, 0.05); }
.light-bright-bar {
    display: inline-block;
    width: 58px;
    height: 5px;
    border-radius: 3px;
    background: rgba(110, 229, 255, 0.1);
    vertical-align: middle;
    overflow: hidden;
    margin-right: 6px;
}
.light-bright-fill { display: block; height: 100%; border-radius: 3px; transition: width 0.4s; }
.light-bright-val { font-family: 'Orbitron', sans-serif; font-size: 10px; }
.light-mode-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10px;
    color: #8fd6ff;
    background: rgba(53, 198, 255, 0.1);
    border: 1px solid rgba(53, 198, 255, 0.25);
    margin-right: 6px;
}
.light-zone-status { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; }
.light-zone-status i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.light-zone-status.is-online { color: #5fd6a0; }
.light-zone-status.is-online i { background: #5fd6a0; box-shadow: 0 0 6px #5fd6a0; }
.light-zone-status.is-standby { color: #94a8bc; }
.light-zone-status.is-standby i { background: #94a8bc; }

/* 全自动运行徽标 */
.light-auto-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #5fd6a0;
    padding: 2px 9px;
    border-radius: 9px;
    background: rgba(95, 214, 160, 0.1);
    border: 1px solid rgba(95, 214, 160, 0.3);
}
.light-auto-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #5fd6a0;
    box-shadow: 0 0 6px #5fd6a0;
    animation: lightPulse 1.6s ease-in-out infinite;
}
@keyframes lightPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* 调控策略卡片 */
.light-strategy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.light-strategy-card {
    display: flex;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 6px;
    border: 1px solid rgba(110, 229, 255, 0.16);
    background: linear-gradient(135deg, rgba(20, 60, 110, 0.35), rgba(10, 28, 56, 0.3));
    transition: border-color 0.2s, box-shadow 0.2s;
}
.light-strategy-card:hover {
    border-color: rgba(255, 212, 92, 0.4);
    box-shadow: 0 0 12px rgba(255, 212, 92, 0.12);
}
.ls-icon {
    flex: 0 0 30px;
    width: 30px; height: 30px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 212, 92, 0.12);
    border: 1px solid rgba(255, 212, 92, 0.3);
    color: #ffd45c;
    font-size: 13px;
}
.ls-body { min-width: 0; flex: 1; }
.ls-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ls-head b { font-size: 12px; color: rgba(232, 244, 255, 0.95); font-weight: 600; }
.ls-status {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9px; color: #5fd6a0;
    white-space: nowrap;
}
.ls-status i {
    width: 5px; height: 5px; border-radius: 50%;
    background: #5fd6a0;
    box-shadow: 0 0 5px #5fd6a0;
}
.ls-desc {
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1.55;
    color: rgba(168, 197, 221, 0.72);
}

/* 实时调控动态日志 */
.light-event-log {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dashed rgba(110, 229, 255, 0.15);
}
.light-event-title {
    font-size: 11px;
    color: rgba(191, 233, 255, 0.85);
    margin-bottom: 5px;
}
.light-event-title i { color: #ffd45c; margin-right: 5px; }
.light-event-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    font-size: 10.5px;
    border-bottom: 1px solid rgba(110, 229, 255, 0.05);
}
.light-event-item:last-child { border-bottom: none; }
.le-time {
    flex: 0 0 38px;
    font-family: 'Orbitron', sans-serif;
    color: rgba(168, 197, 221, 0.65);
    font-size: 10px;
}
.le-ico { font-size: 10px; }
.le-area {
    flex: 0 0 auto;
    color: #8fd6ff;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.le-info {
    flex: 1;
    color: rgba(220, 238, 255, 0.75);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   告警中心：302房间1号空调 严重故障应急处置面板
   ============================================================ */
.ac-emergency-panel {
    margin: 10px 0 8px;
    border: 1px solid rgba(232, 90, 90, 0.45);
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(60, 18, 24, 0.42), rgba(8, 20, 42, 0.55) 40%);
    box-shadow: 0 0 18px rgba(232, 90, 90, 0.12), inset 0 0 24px rgba(232, 90, 90, 0.04);
    overflow: hidden;
    transition: box-shadow 0.4s, border-color 0.4s;
}
.ac-emergency-panel.aep-focus {
    border-color: rgba(255, 118, 118, 0.9);
    box-shadow: 0 0 26px rgba(232, 90, 90, 0.55), inset 0 0 24px rgba(232, 90, 90, 0.08);
    animation: aepFocusBlink 0.7s ease-in-out 3;
}
@keyframes aepFocusBlink {
    0%, 100% { box-shadow: 0 0 18px rgba(232, 90, 90, 0.12); }
    50% { box-shadow: 0 0 34px rgba(232, 90, 90, 0.65); }
}
.aep-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    background: linear-gradient(90deg, rgba(232, 90, 90, 0.22), rgba(232, 90, 90, 0.05) 60%, transparent);
    border-bottom: 1px solid rgba(232, 90, 90, 0.25);
}
.aep-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #ffd9d9;
    flex-wrap: wrap;
}
.aep-title > i { color: #ff7676; }
.aep-title b { font-size: 15px; letter-spacing: 0.5px; }
.aep-fault-flow { font-size: 11px; color: rgba(220, 238, 255, 0.65); font-weight: 400; }
.aep-level-tag {
    font-size: 10px;
    padding: 2px 9px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(90deg, #e85a5a, #ff7676);
    box-shadow: 0 0 10px rgba(232, 90, 90, 0.55);
    font-weight: 600;
}
.aep-pulse-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff5c5c;
    box-shadow: 0 0 8px #ff5c5c;
    animation: aepDotPulse 1.4s ease-in-out infinite;
}
@keyframes aepDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.75); }
}
.aep-time { font-size: 11px; color: rgba(168, 197, 221, 0.7); white-space: nowrap; }
.aep-time i { margin-right: 4px; }
.aep-time b { color: #cfe4ff; font-family: 'Orbitron', sans-serif; font-weight: 600; }

.aep-body {
    display: grid;
    grid-template-columns: 1.12fr 1.05fr 0.95fr;
    gap: 0;
}
.aep-col {
    padding: 11px 14px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.aep-col:nth-child(2) { border-left: 1px solid rgba(110, 229, 255, 0.1); border-right: 1px solid rgba(110, 229, 255, 0.1); }
.aep-col-title {
    font-size: 12px;
    font-weight: 600;
    color: #bfe9ff;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.aep-col-title i { color: #6ee5ff; }

/* 设备识别区 */
.aep-device { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.aep-dev-icon {
    width: 38px; height: 38px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    color: #ff9d9d;
    background: rgba(232, 90, 90, 0.15);
    border: 1px solid rgba(232, 90, 90, 0.4);
    transition: all 0.3s;
}
.aep-dev-icon.is-stopped, .aep-device:has(.is-stopped) .aep-dev-icon {
    color: #5fd6a0;
    background: rgba(95, 214, 160, 0.12);
    border-color: rgba(95, 214, 160, 0.4);
}
.aep-dev-name { font-size: 13px; font-weight: 700; color: #eaf4ff; }
.aep-dev-area { font-size: 10.5px; color: rgba(168, 197, 221, 0.7); margin: 2px 0; }
.aep-dev-area i { font-size: 9px; margin-right: 3px; }
.aep-dev-status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; color: #ff9d9d; font-weight: 600;
}
.aep-dev-status i {
    width: 6px; height: 6px; border-radius: 50%;
    background: #ff5c5c; box-shadow: 0 0 6px #ff5c5c;
    animation: aepDotPulse 1.4s ease-in-out infinite;
}
.aep-dev-status.is-stopped { color: #5fd6a0; }
.aep-dev-status.is-stopped i { background: #5fd6a0; box-shadow: 0 0 6px #5fd6a0; animation: none; }

.aep-param-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.aep-param {
    border-radius: 6px;
    padding: 7px 9px;
    background: rgba(12, 32, 60, 0.5);
    border: 1px solid rgba(110, 229, 255, 0.14);
}
.aep-param.is-danger { border-color: rgba(232, 90, 90, 0.4); background: rgba(60, 18, 24, 0.35); }
.aep-param.is-warn { border-color: rgba(255, 176, 92, 0.38); background: rgba(70, 42, 12, 0.3); }
.ap-name { font-size: 10px; color: rgba(168, 197, 221, 0.72); }
.ap-val {
    font-family: 'Orbitron', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.15;
    margin: 2px 0;
    color: #ff8a8a;
    text-shadow: 0 0 12px rgba(232, 90, 90, 0.5);
    transition: color 0.3s;
}
.aep-param.is-warn .ap-val { color: #ffc078; text-shadow: 0 0 12px rgba(255, 176, 92, 0.45); }
.ap-val b { font-size: 11px; font-weight: 600; margin-left: 1px; }
.ap-note { font-size: 9.5px; color: rgba(168, 197, 221, 0.6); }
.aep-param.is-off { border-color: rgba(95, 214, 160, 0.3); background: rgba(16, 50, 38, 0.3); }
.aep-param.is-off .ap-val { color: #5fd6a0; text-shadow: 0 0 12px rgba(95, 214, 160, 0.45); }

.aep-conclusion {
    margin-top: 9px;
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.6;
    color: rgba(232, 244, 255, 0.85);
    background: rgba(232, 90, 90, 0.08);
    border-left: 3px solid #e85a5a;
}
.aep-conclusion i { color: #ffb05c; margin-top: 3px; }
.aep-conclusion b { color: #ffc9c9; }

/* 流程步骤区 */
.aep-steps { display: flex; flex-direction: column; gap: 4px; }
.aep-step {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 4px 0 8px;
}
.aep-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 11px; top: 26px; bottom: -2px;
    width: 2px;
    background: rgba(110, 229, 255, 0.2);
}
.aep-step-dot {
    flex: 0 0 24px;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    color: #94a8bc;
    background: rgba(20, 44, 76, 0.8);
    border: 1.5px solid rgba(148, 168, 188, 0.4);
    z-index: 1;
}
.aep-step.is-done .aep-step-dot {
    color: #04210f;
    background: linear-gradient(135deg, #5fd6a0, #2fe6a0);
    border-color: #5fd6a0;
    box-shadow: 0 0 10px rgba(95, 214, 160, 0.6);
}
.aep-step.is-lock .aep-step-dot {
    color: #5a6b80;
    background: rgba(16, 30, 52, 0.8);
    border-color: rgba(90, 107, 128, 0.5);
    border-style: dashed;
}
.aep-step.is-lock .aep-step-name { color: #7a8ca3; }
.aep-step.is-lock .aep-step-desc { color: rgba(148, 168, 188, 0.55); }
.aep-step-name { font-size: 12.5px; font-weight: 700; color: #dceeff; }
.aep-step-desc { font-size: 10.5px; color: rgba(168, 197, 221, 0.72); line-height: 1.55; margin-top: 2px; }
.aep-step-desc b { color: #ffb05c; }
.aep-step.is-done .aep-step-desc b { color: #5fd6a0; }

.aep-btn {
    margin-top: 7px;
    height: 34px;
    padding: 0 16px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    font-family: inherit;
}
.aep-btn:disabled { cursor: not-allowed; opacity: 0.55; filter: grayscale(0.4); }
.aep-btn-dispatch {
    color: #04182b;
    background: linear-gradient(135deg, #6ee5ff, #35c6ff);
    box-shadow: 0 0 12px rgba(53, 198, 255, 0.4);
}
.aep-btn-dispatch:hover:not(:disabled) { box-shadow: 0 0 20px rgba(53, 198, 255, 0.7); transform: translateY(-1px); }
.aep-btn-dispatch:disabled {
    color: #9fd9c2;
    background: rgba(95, 214, 160, 0.14);
    border-color: rgba(95, 214, 160, 0.45);
    box-shadow: none;
    filter: none;
    opacity: 1;
}
.aep-btn-stop {
    flex: 1;
    color: #fff;
    background: linear-gradient(135deg, #e85a5a, #c93d3d);
    box-shadow: 0 0 14px rgba(232, 90, 90, 0.4);
}
.aep-btn-stop:hover:not(:disabled) { box-shadow: 0 0 22px rgba(232, 90, 90, 0.75); transform: translateY(-1px); }
.aep-btn-stop:disabled {
    color: #9fd9c2;
    background: rgba(95, 214, 160, 0.14);
    border-color: rgba(95, 214, 160, 0.45);
    box-shadow: none;
    filter: none;
    opacity: 1;
}
.aep-btn-start {
    flex: 1;
    color: #04210f;
    background: linear-gradient(135deg, #5fd6a0, #2fe6a0);
    box-shadow: 0 0 12px rgba(95, 214, 160, 0.4);
}
.aep-btn-start:hover:not(:disabled) { box-shadow: 0 0 20px rgba(95, 214, 160, 0.7); transform: translateY(-1px); }

.aep-order-card {
    margin-top: 8px;
    border-radius: 6px;
    border: 1px solid rgba(110, 229, 255, 0.3);
    background: rgba(12, 36, 66, 0.6);
    padding: 8px 10px;
    animation: aepCardIn 0.35s ease;
}
@keyframes aepCardIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.aoc-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 10.5px;
    padding: 2.5px 0;
}
.aoc-row span { color: rgba(168, 197, 221, 0.68); white-space: nowrap; }
.aoc-row b { color: #dceeff; font-weight: 600; text-align: right; }

/* 远程控制区 */
.aep-remote-tag {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    color: #5fd6a0;
    font-weight: 400;
}
.aep-remote-tag i {
    width: 5px; height: 5px; border-radius: 50%;
    background: #5fd6a0; box-shadow: 0 0 5px #5fd6a0;
}
.aep-ctl-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 6px;
    background: rgba(60, 18, 24, 0.4);
    border: 1px solid rgba(232, 90, 90, 0.38);
}
.aep-ctl-light {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #ff5c5c;
    box-shadow: 0 0 10px #ff5c5c;
    animation: aepDotPulse 1.2s ease-in-out infinite;
    flex: 0 0 12px;
}
.aep-ctl-light.is-off {
    background: #5fd6a0;
    box-shadow: 0 0 10px #5fd6a0;
    animation: none;
}
.aep-ctl-main { font-size: 13px; font-weight: 700; color: #ffb3b3; }
.aep-ctl-light.is-off ~ .aep-ctl-text .aep-ctl-main { color: #8ff0c8; }
.aep-ctl-sub { font-size: 10px; color: rgba(168, 197, 221, 0.66); margin-top: 2px; }
.aep-ctl-btns { display: flex; gap: 8px; margin-top: 9px; }
.aep-ctl-feedback {
    margin-top: 9px;
    padding: 8px 11px;
    border-radius: 6px;
    background: rgba(14, 46, 36, 0.45);
    border: 1px solid rgba(95, 214, 160, 0.35);
    animation: aepCardIn 0.35s ease;
}
.acf-title { font-size: 11px; font-weight: 700; color: #5fd6a0; margin-bottom: 5px; }
.acf-title i { margin-right: 4px; }
.acf-row {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    padding: 2px 0;
    color: rgba(190, 220, 245, 0.75);
}
.acf-row b { font-family: 'Orbitron', sans-serif; color: #dceeff; }

.aep-log {
    margin-top: 9px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.aep-log-title { font-size: 11px; color: rgba(191, 233, 255, 0.85); margin-bottom: 5px; }
.aep-log-title i { color: #6ee5ff; margin-right: 4px; }
.aep-log-list {
    flex: 1;
    max-height: 96px;
    overflow-y: auto;
    border-radius: 5px;
    background: rgba(4, 14, 30, 0.55);
    border: 1px solid rgba(110, 229, 255, 0.1);
    padding: 5px 8px;
}
.aep-log-item {
    font-size: 10px;
    line-height: 1.7;
    color: rgba(200, 224, 248, 0.78);
    word-break: break-all;
}
.all-time {
    font-family: 'Orbitron', sans-serif;
    color: rgba(148, 168, 188, 0.8);
    margin-right: 5px;
}
.all-ico { font-size: 7px; margin-right: 5px; }

/* 底部：达标 + 成本核算 */
.aep-footer {
    display: grid;
    grid-template-columns: 0.85fr 1.4fr;
    border-top: 1px solid rgba(110, 229, 255, 0.12);
}
.aep-foot { padding: 10px 14px; }
.aep-foot-standard {
    border-right: 1px solid rgba(110, 229, 255, 0.12);
    background: linear-gradient(90deg, rgba(95, 214, 160, 0.1), transparent);
}
.af-title { font-size: 11.5px; font-weight: 700; color: #bfe9ff; margin-bottom: 6px; }
.af-title i { margin-right: 5px; }
.aep-foot-standard .af-title i { color: #5fd6a0; }
.aep-foot-cost .af-title i { color: #ffd45c; }
.afs-main { font-size: 12px; color: rgba(220, 238, 255, 0.85); }
.afs-main b {
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    color: #5fd6a0;
    text-shadow: 0 0 12px rgba(95, 214, 160, 0.55);
    margin: 0 3px;
}
.afs-main em { font-style: normal; font-size: 11px; color: #9fd9c2; }
.afs-limit { font-size: 10.5px; color: rgba(168, 197, 221, 0.72); margin-top: 4px; }
.afs-limit b { color: #6ee5ff; font-family: 'Orbitron', sans-serif; }
.af-cost-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.afc-item {
    text-align: center;
    padding: 6px 4px;
    border-radius: 6px;
    background: rgba(12, 32, 60, 0.45);
    border: 1px solid rgba(110, 229, 255, 0.14);
}
.afc-item.afc-hl {
    border-color: rgba(255, 212, 92, 0.5);
    background: rgba(70, 56, 12, 0.35);
    box-shadow: 0 0 10px rgba(255, 212, 92, 0.12);
}
.afc-num {
    font-family: 'Orbitron', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #eaf4ff;
    line-height: 1.2;
}
.afc-num b { font-size: 10px; font-weight: 600; color: rgba(191, 233, 255, 0.85); margin-left: 1px; }
.afc-hl .afc-num { color: #ffd45c; text-shadow: 0 0 10px rgba(255, 212, 92, 0.5); }
.afc-lbl { font-size: 9.5px; color: rgba(168, 197, 221, 0.68); margin-top: 3px; line-height: 1.4; }

/* 全局 toast */
.aep-toast {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #eaf8ff;
    background: rgba(10, 32, 60, 0.95);
    border: 1px solid rgba(110, 229, 255, 0.5);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5), 0 0 18px rgba(110, 229, 255, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    max-width: 80vw;
}
.aep-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.aep-toast i { font-size: 16px; }
.aep-toast.success { border-color: rgba(95, 214, 160, 0.6); box-shadow: 0 6px 28px rgba(0,0,0,0.5), 0 0 18px rgba(95, 214, 160, 0.3); }
.aep-toast.success i { color: #5fd6a0; }
.aep-toast.danger { border-color: rgba(232, 90, 90, 0.6); box-shadow: 0 6px 28px rgba(0,0,0,0.5), 0 0 18px rgba(232, 90, 90, 0.3); }
.aep-toast.danger i { color: #ff7676; }
.aep-toast.info i { color: #6ee5ff; }

/* ============================================================
   告警中心：精简后（删除统计图表）紧凑表格
   ============================================================ */
.alert-compact-tabs { margin-top: 12px; }
#module-alert .tab-pane .table-panel { margin-bottom: 12px; }
.alert-compact-table {
    display: block;
    max-height: 232px;
    overflow-y: auto;
}
.alert-compact-table thead,
.alert-compact-table tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.alert-compact-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(10, 30, 58, 0.98);
}
.alert-compact-table th,
.alert-compact-table td {
    padding: 6px 10px;
    font-size: 11.5px;
    white-space: normal;
    word-break: break-all;
    line-height: 1.45;
}
/* 列宽：时间 / 来源 / 内容 / 级别 / 状态 / 操作 */
.alert-compact-table th:nth-child(1), .alert-compact-table td:nth-child(1) { width: 15%; }
.alert-compact-table th:nth-child(2), .alert-compact-table td:nth-child(2) { width: 13%; }
.alert-compact-table th:nth-child(3), .alert-compact-table td:nth-child(3) { width: 41%; }
.alert-compact-table th:nth-child(4), .alert-compact-table td:nth-child(4) { width: 8%; }
.alert-compact-table th:nth-child(5), .alert-compact-table td:nth-child(5) { width: 9%; }
.alert-compact-table th:nth-child(6), .alert-compact-table td:nth-child(6) { width: 8%; text-align: center; }
.alert-compact-table tbody tr { transition: background 0.15s; }
.alert-compact-table tbody tr:hover { background: rgba(110, 229, 255, 0.06); }