* { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background: #E8F4F8;
            color: #1f2937;
            overflow-y: auto;
        }
        .page {
            width: 100%;
            min-height: 100vh;
            padding: 14px 16px 20px;
            display: none;
            flex-direction: column;
            gap: 12px;
            background: linear-gradient(180deg, #E8F4F8 0%, #f6fbfd 100%);
        }
        .page.active { display: flex; }
        .topbar {
            height: 58px;
            background: #fff;
            border: 1px solid #d7e8f2;
            border-left: 5px solid #1F4E79;
            border-radius: 10px;
            box-shadow: 0 4px 14px rgba(31, 78, 121, .08);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            flex-shrink: 0;
        }
        .title-wrap h1 {
            margin: 0;
            color: #1F4E79;
            font-size: 22px;
            letter-spacing: 1px;
        }
        .title-wrap p { margin: 4px 0 0; color: #6b7280; font-size: 12px; }
        .top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
        .data-time { color: #1F4E79; font-weight: 600; font-size: 13px; }
        .switch {
            width: 46px; height: 24px; border-radius: 20px; background: #2E75B6; position: relative;
            box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
        }
        .switch::after { content: ""; position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; }
        input, select {
            height: 30px;
            border: 1px solid #c8deea;
            border-radius: 6px;
            background: #fff;
            color: #334155;
            padding: 0 10px;
            outline: none;
            font-size: 12px;
        }
        input:focus, select:focus { border-color: #2E75B6; box-shadow: 0 0 0 2px rgba(46,117,182,.12); }
        .btn {
            height: 30px;
            border: none;
            border-radius: 6px;
            padding: 0 12px;
            background: #2E75B6;
            color: #fff;
            font-size: 12px;
            cursor: pointer;
        }
        .btn.secondary { background: #1F4E79; }
        .main {
            flex: 1 0 auto;
            display: grid;
            grid-template-columns: 38% 62%;
            gap: 12px;
            align-items: stretch;
            min-height: calc(100vh - 100px);
        }
        .panel {
            background: rgba(255,255,255,.96);
            border: 1px solid #d7e8f2;
            border-radius: 10px;
            box-shadow: 0 5px 18px rgba(31, 78, 121, .08);
            overflow: hidden;
        }
        .left {
            min-width: 0;
            display: flex;
            flex-direction: column;
        }
        .section-hd {
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 14px;
            border-bottom: 1px solid #edf4f8;
            background: linear-gradient(90deg, #f8fcff, #fff);
        }
        .section-title {
            font-weight: 700;
            color: #1F4E79;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .refresh-dot {
            width: 9px; height: 9px; border-radius: 50%; background: #16a34a; display: inline-block;
            box-shadow: 0 0 0 rgba(22,163,74,.6); animation: pulse 1.5s infinite;
        }
        @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)} 70%{box-shadow:0 0 0 8px rgba(22,163,74,0)} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0)} }
        .update-time { color: #64748b; font-size: 12px; display: flex; align-items: center; gap: 6px; }
        .filter-bar {
            padding: 10px 12px;
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1fr;
            gap: 8px;
            border-bottom: 1px solid #edf4f8;
        }
        .station-list {
            flex: 0 1 auto;
            max-height: 640px;
            min-height: 0;
            overflow: auto;
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 9px;
        }
        .station-card {
            border: 1px solid #dcebf4;
            border-radius: 9px;
            padding: 10px;
            background: #fff;
            cursor: pointer;
            transition: .2s;
        }
        .station-card.active, .station-card:hover {
            border-color: #2E75B6;
            box-shadow: 0 5px 14px rgba(46,117,182,.14);
            transform: translateY(-1px);
        }
        .station-row { display: grid; grid-template-columns: 1.55fr .65fr 1.4fr; gap: 8px; align-items: start; }
        .station-name { font-size: 14px; font-weight: 700; color: #1F4E79; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .station-code { margin-top: 4px; color: #7b8794; font-size: 11px; }
        .status-tag { font-size: 12px; font-weight: 700; white-space: nowrap; }
        .normal { color: #16a34a; }
        .warning { color: #d97706; }
        .offline { color: #6b7280; }
        .danger { color: #dc2626; }
        .metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: right; }
        .metric-label { color: #8492a6; font-size: 10px; }
        .metric-val { font-weight: 700; font-size: 12px; margin-top: 2px; }
        .sparkline { width: 100%; height: 22px; margin-top: 8px; }
        .left-stats {
            height: 126px;
            padding: 10px 12px 12px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            border-top: 1px solid #edf4f8;
            flex-shrink: 0;
        }
        .small-stat {
            background: #f8fbfd;
            border: 1px solid #dcebf4;
            border-radius: 8px;
            padding: 10px 12px;
        }
        .small-stat .label { color: #64748b; font-size: 12px; }
        .small-stat .value { margin-top: 6px; color: #1F4E79; font-size: 22px; font-weight: 800; }
        .small-stat .sub { float: right; margin-top: 8px; font-size: 12px; font-weight: 700; }
        .right { min-width: 0; display: grid; grid-template-rows: 280px 1fr; gap: 12px; }
        .right-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; }
        .overview-body {
            height: calc(100% - 44px);
            padding: 12px;
            display: flex;
            flex-direction: column;
        }
        .service-main {
            flex: 1;
            min-height: 120px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            align-items: stretch;
        }
        .big-number {
            text-align: center;
            border-radius: 10px;
            background: linear-gradient(180deg, #eef8ff, #fff);
            border: 1px solid #dcebf4;
            padding: 14px 8px;
            min-height: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .big-number .num { font-size: 46px; font-weight: 900; color: #1F4E79; line-height: 1; }
        .big-number .label { margin-top: 8px; color: #64748b; font-size: 13px; }
        .big-number .mom { margin-top: 6px; color: #16a34a; font-weight: 800; }
        .rings {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, minmax(0, 1fr));
            gap: 8px;
            min-height: 0;
        }
        .ring-item { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fbfdff; border: 1px solid #edf4f8; border-radius: 8px; }
        .ring {
            --p: 80; --c: #2E75B6;
            width: 44px; height: 44px; border-radius: 50%;
            background: conic-gradient(var(--c) calc(var(--p)*1%), #e5eef5 0);
            display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #1F4E79;
        }
        .ring::before { content: attr(data-val); width: 32px; height: 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
        .ring-label { margin-top: 5px; color: #64748b; font-size: 11px; }
        .selected-label {
            margin-top: 8px;
            text-align: center;
            color: #1F4E79;
            font-weight: 700;
            background: #f2f8fc;
            border-radius: 6px;
            padding: 8px;
            font-size: 12px;
        }
        .chart { width: 100%; height: calc(100% - 44px); min-height: 0; }
        .table-wrap { height: calc(100% - 44px); padding: 10px 12px 8px; display: flex; flex-direction: column; min-height: 0; }
        table { width: 100%; border-collapse: collapse; font-size: 14px; }
        th {
            background: #E8F4F8;
            color: #1F4E79;
            font-weight: 800;
            height: 34px;
            border-bottom: 1px solid #cfe2ee;
            white-space: nowrap;
        }
        td {
            height: 34px;
            border-bottom: 1px solid #eef3f7;
            color: #334155;
            text-align: center;
            white-space: nowrap;
        }
        td.name { text-align: center; color: #1F4E79; font-weight: 700; }
        tbody tr:hover { background: #f7fbfe; }
        .table-scroll { flex: 1; overflow: auto; min-height: 0; }
        .pagination { height: 28px; display: flex; align-items: end; justify-content: flex-end; gap: 6px; color: #64748b; font-size: 12px; }
        .page-btn { border: 1px solid #cfe2ee; background: #fff; color: #1F4E79; border-radius: 4px; padding: 3px 8px; }
        .footer-note {
            height: 28px;
            color: #64748b;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 4px;
            flex-shrink: 0;
        }
        @media (max-width: 1280px) {
            .topbar { height: auto; min-height: 58px; align-items: flex-start; padding: 10px; }
            .top-actions { gap: 6px; }
            .main { grid-template-columns: 1fr; min-height: auto; }
            .page { height: auto; min-height: 100vh; }
            .right { grid-template-rows: auto auto; }
            .left { min-height: auto; }
        }

        /* ===== 服务能力评估专用 ===== */
        .svc-list {
            flex: 0 1 auto;
            max-height: 640px;
            min-height: 0;
            overflow: auto;
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 9px;
        }
        .svc-card {
            border: 1px solid #dcebf4;
            border-radius: 9px;
            padding: 10px;
            background: #fff;
            cursor: pointer;
            transition: .2s;
        }
        .svc-card.active, .svc-card:hover {
            border-color: #2E75B6;
            box-shadow: 0 5px 14px rgba(46,117,182,.14);
            transform: translateY(-1px);
        }
        .svc-row1 { display: flex; justify-content: space-between; align-items: center; }
        .svc-name { font-size: 14px; font-weight: 700; color: #1F4E79; }
        .svc-level { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 12px; }
        .level-full { background: #dcfce7; color: #16a34a; }
        .level-mid { background: #dbeafe; color: #2563eb; }
        .level-tight { background: #fef3c7; color: #d97706; }
        .level-sat { background: #fee2e2; color: #dc2626; }
        .svc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 8px; }
        .svc-metric { text-align: center; }
        .svc-metric .label { font-size: 10px; color: #8492a6; }
        .svc-metric .val { font-size: 13px; font-weight: 700; margin-top: 3px; }
        .wait-ok { color: #16a34a; }
        .wait-warn { color: #d97706; }
        .wait-bad { color: #dc2626; }
        .svc-bar { width: 100%; height: 6px; background: #e5eef5; border-radius: 3px; margin-top: 4px; overflow: hidden; }
        .svc-bar-fill { height: 100%; border-radius: 3px; }
        .svc-spark { width: 100%; height: 20px; margin-top: 6px; }

        /* ===== 运行负荷监测专用 ===== */
        .load-main {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: minmax(310px, 40vh) minmax(360px, 1fr);
            gap: 12px;
            align-items: stretch;
            min-height: calc(100vh - 100px);
        }
        .load-overview-grid {
            display: grid;
            grid-template-columns: minmax(420px, 1.35fr) minmax(320px, 1fr) minmax(280px, .85fr);
            gap: 12px;
            min-height: 0;
        }
        .load-site-panel,
        .load-gauge-panel,
        .load-stat-panel,
        .load-detail-panel {
            min-width: 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }
        .load-gauge-panel .chart {
            flex: 1;
            height: auto;
        }
        .load-gauge-panel .selected-label {
            margin: 0 12px 12px;
            flex-shrink: 0;
        }
        .load-detail-panel .table-wrap {
            flex: 1;
            height: auto;
        }
        .load-detail-panel td.name {
            text-align: center;
        }
        .load-list {
            flex: 1;
            max-height: none;
            min-height: 0;
            overflow: auto;
            padding: 8px 10px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .load-card {
            border: 1px solid #dcebf4;
            border-radius: 8px;
            padding: 8px 10px;
            background: #fff;
            cursor: pointer;
            transition: .2s;
        }
        .load-card.active, .load-card:hover {
            border-color: #2E75B6;
            box-shadow: 0 5px 14px rgba(46,117,182,.14);
            transform: translateY(-1px);
        }
        .load-row {
            display: grid;
            grid-template-columns: 1.18fr 1fr .88fr;
            gap: 8px;
            align-items: center;
        }
        .device-code { font-size: 13px; font-weight: 800; color: #1F4E79; }
        .device-site { margin-top: 2px; color: #7b8794; font-size: 10px; }
        .load-card-meta { text-align: right; }
        .load-power { margin-bottom: 3px; font-size: 11px; font-weight: 700; color: #334155; }
        .load-empty {
            margin: 12px;
            padding: 18px 12px;
            border: 1px dashed #c8deea;
            border-radius: 8px;
            color: #64748b;
            font-size: 13px;
            text-align: center;
            background: #fbfdff;
        }
        .load-bar { height: 7px; background: #e5eef5; border-radius: 10px; overflow: hidden; }
        .load-bar-fill { height: 100%; border-radius: 10px; }
        .load-pct { margin-top: 4px; text-align: right; font-size: 11px; font-weight: 800; }
        .load-status { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; }
        .status-light { background: #dcfce7; color: #16a34a; }
        .status-normal { background: #dbeafe; color: #2563eb; }
        .status-high { background: #fef3c7; color: #d97706; }
        .status-over { background: #fee2e2; color: #dc2626; }
        .alarm-panel { height: 150px; border-top: 1px solid #edf4f8; flex-shrink: 0; display: flex; flex-direction: column; }
        .alarm-title { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; color: #1F4E79; font-weight: 800; }
        .red-dot { width: 9px; height: 9px; border-radius: 50%; background: #dc2626; display: inline-block; animation: redPulse 1.2s infinite; }
        @keyframes redPulse { 0%{box-shadow:0 0 0 0 rgba(220,38,38,.55)} 70%{box-shadow:0 0 0 8px rgba(220,38,38,0)} 100%{box-shadow:0 0 0 0 rgba(220,38,38,0)} }
        .alarm-list { flex: 1; overflow: hidden; padding: 0 12px 8px; }
        .alarm-inner { animation: alarmScroll 18s linear infinite; }
        .alarm-item { height: 26px; line-height: 26px; font-size: 12px; color: #334155; border-bottom: 1px dashed #edf2f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        @keyframes alarmScroll { 0%{transform:translateY(0)} 100%{transform:translateY(-130px)} }
        .load-stats { flex: 1; min-height: 0; padding: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 10px; }
        .load-stat { background: #f8fbfd; border: 1px solid #dcebf4; border-radius: 8px; padding: 12px; text-align: center; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
        .load-stat .label { color: #64748b; font-size: 11px; }
        .load-stat .value { margin-top: 5px; color: #1F4E79; font-size: 18px; font-weight: 900; }
        .load-actions button { border: none; background: transparent; color: #2E75B6; cursor: pointer; padding: 0 4px; font-size: 12px; }
        .load-actions button:nth-child(3) { color: #dc2626; }

        /* ===== 环境监测专用 ===== */
        .env-list { flex: 0 1 auto; max-height: 640px; min-height: 0; overflow: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
        .env-card { border: 1px solid #dcebf4; border-radius: 8px; padding: 8px 10px; background: #fff; cursor: pointer; transition: border-color .2s; display: flex; align-items: center; gap: 10px; }
        .env-card:hover { border-color: #2E75B6; }
        .env-card.active { border-color: #2E75B6; background: #f0f7ff; }
        .env-card-left { min-width: 110px; }
        .env-card-name { font-size: 13px; font-weight: 700; color: #1F4E79; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .env-card-site { font-size: 10px; color: #94a3b8; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .env-card-mid { flex: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
        .env-param-mini { text-align: center; background: #f8fbfd; border-radius: 5px; padding: 4px 2px; }
        .env-param-mini .ep-icon { font-size: 11px; }
        .env-param-mini .ep-val { font-size: 13px; font-weight: 700; margin-top: 2px; }
        .env-param-mini .ep-unit { font-size: 9px; color: #94a3b8; }
        .env-status-tag { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 12px; white-space: nowrap; flex-shrink: 0; }
        .env-status-tag.normal { background: #dcfce7; color: #16a34a; }
        .env-status-tag.warning { background: #fef3c7; color: #d97706; }
        .env-status-tag.alarm { background: #fee2e2; color: #dc2626; }
        .env-alarm-panel { height: 130px; border-top: 1px solid #edf4f8; flex-shrink: 0; display: flex; flex-direction: column; }
        .env-alarm-title { height: 30px; line-height: 30px; padding: 0 12px; font-size: 13px; font-weight: 700; color: #1F4E79; background: linear-gradient(90deg,#fef2f2,#fff); border-bottom: 1px solid #fee2e2; display: flex; align-items: center; gap: 6px; }
        .env-alarm-scroll { flex: 1; overflow: hidden; padding: 0 12px; position: relative; }
        .env-alarm-inner { animation: envAlarmScroll 22s linear infinite; }
        .env-alarm-inner .ea-item { height: 24px; line-height: 24px; font-size: 11px; color: #334155; border-bottom: 1px dashed #edf2f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        @keyframes envAlarmScroll { 0%{transform:translateY(0)} 100%{transform:translateY(-168px)} }
        .env-stats { height: 82px; padding: 8px 12px; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; border-top: 1px solid #edf4f8; flex-shrink: 0; }
        .env-gauges { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; height: calc(100% - 44px - 28px); }
        .gauge-box { min-height: 0; }
        .env-right .right-top { min-height: 0; }