* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; background-color: #f0f4f8; min-height: 100vh; display: flex; flex-direction: column; }

        .header { background: linear-gradient(135deg, #1e4d8c 0%, #2c5aa0 100%); color: white; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
        .header h1 { font-size: 20px; font-weight: 600; }
        .header-right span { font-size: 14px; opacity: 0.9; }

        .container { display: flex; flex: 1; overflow: hidden; }
        .sidebar { width: 220px; background-color: #1a365d; color: white; padding: 16px 0; overflow-y: auto; flex-shrink: 0; }
        .sidebar-title { font-size: 16px; font-weight: 600; padding: 12px 20px; color: #7eb8ea; border-bottom: 1px solid #2d4a6f; margin-bottom: 8px; }
        .nav-item { padding: 12px 24px; cursor: pointer; transition: all 0.3s ease; font-size: 14px; position: relative; }
        .nav-item:hover { background-color: #2c5282; }
        .nav-item.active { background-color: #2c5282; border-left: 4px solid #4facfe; }

        .main-content { flex: 1; padding: 24px; overflow-y: auto; background-color: #f0f4f8; }
        .page { display: none; animation: fadeIn 0.3s ease; }
        .page.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .page-header { margin-bottom: 20px; }
        .page-title { font-size: 20px; font-weight: 600; color: #1a365d; margin-bottom: 12px; }

        .filter-bar { background: white; padding: 14px 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
        .filter-item { display: flex; align-items: center; gap: 5px; }
        .filter-item label { font-size: 13px; color: #4b5563; white-space: nowrap; }
        .filter-item select { padding: 5px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
        .btn { padding: 7px 16px; border-radius: 4px; font-size: 13px; cursor: pointer; border: none; transition: all 0.3s; }
        .btn-primary { background-color: #1e4d8c; color: white; }
        .btn-primary:hover { background-color: #2c5aa0; }
        .btn-secondary { background-color: white; color: #4b5563; border: 1px solid #d1d5db; }

        .stats-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; }
        .stats-cards-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 20px; }
        .stat-card { background: white; padding: 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); display: flex; flex-direction: column; border-top: 3px solid #4facfe; }
        .stat-card .label { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
        .stat-card .value { font-size: 22px; font-weight: 700; color: #1e4d8c; }
        .stat-card .sub { font-size: 11px; margin-top: 4px; color: #6b7280; }
        .stat-card .sub.green { color: #10b981; }

        .content-grid-65-35 { display: grid; grid-template-columns: 68% 32%; gap: 16px; margin-bottom: 16px; }
        .content-grid-70-30 { display: grid; grid-template-columns: 70% 30%; gap: 20px; margin-bottom: 20px; }
        .content-grid-50-50 { display: grid; grid-template-columns: 50% 50%; gap: 20px; margin-bottom: 20px; }

        .panel { background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 20px; }
        .panel.map-panel { padding: 12px 14px 8px; }
        .pagination { padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e5e7eb; font-size: 13px; color: #6b7280; }
        .pagination-btns { display: flex; gap: 4px; }
        .pagination-btns button { padding: 5px 10px; border: 1px solid #d1d5db; border-radius: 4px; background: white; cursor: pointer; font-size: 12px; }
        .pagination-btns button.active { background: #1e4d8c; color: white; border-color: #1e4d8c; }
        .panel-title { font-size: 15px; font-weight: 600; color: #1a365d; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #e5e7eb; }

        .chart-box { width: 100%; }

        .channel-table { width: 100%; border-collapse: collapse; font-size: 12px; }
        .channel-table th, .channel-table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid #e5e7eb; }
        .channel-table th { background-color: #1e4d8c; color: white; font-weight: 600; position: sticky; top: 0; }
        .channel-table tbody tr:hover { background-color: #f0f7ff; }
        .coverage-bar { display: inline-block; width: 60px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 4px; }
        .coverage-fill { height: 100%; border-radius: 3px; }

        .scroll-list { max-height: 180px; overflow-y: auto; }
        .scroll-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; align-items: center; }
        .scroll-item:last-child { border-bottom: none; }
        .scroll-time { color: #6b7280; font-family: monospace; min-width: 75px; font-size: 12px; }
        .scroll-icon { font-size: 14px; }
        .scroll-desc { color: #374151; flex: 1; }
        .scroll-tag { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: #dbeafe; color: #1e4d8c; }

        .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
        .badge-green { background-color: #d1fae5; color: #065f46; }
        .badge-blue { background-color: #dbeafe; color: #1e4d8c; }
        .badge-orange { background-color: #ffedd5; color: #9a3412; }
        .badge-red { background-color: #fee2e2; color: #991b1b; }
        .badge-gray { background-color: #f3f4f6; color: #4b5563; }

        .channel-selector { display: flex; gap: 12px; align-items: center; }
        .channel-selector select { padding: 8px 16px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px; min-width: 280px; }

        /* 通道线路图 */
        .route-container { position: relative; height: 450px; overflow-x: auto; overflow-y: hidden; padding: 20px 0; }
        .route-svg { min-width: 800px; height: 100%; }

        /* 服务区列表 */
        .station-list { max-height: 450px; overflow-y: auto; }
        .station-card { background: #f8fafc; padding: 12px; border-radius: 6px; margin-bottom: 10px; border-left: 3px solid #4facfe; }
        .station-card.fault { border-left-color: #ef4444; }
        .station-card.offline { border-left-color: #9ca3af; }
        .station-card.building { border-left-color: #f59e0b; }
        .station-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
        .station-name { font-size: 13px; font-weight: 600; color: #1a365d; }
        .station-mileage { font-size: 11px; color: #6b7280; font-family: monospace; }
        .station-info { display: flex; gap: 12px; font-size: 11px; color: #6b7280; }
        .station-load { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
        .station-load-bar { flex: 1; height: 4px; background: #e5e7eb; border-radius: 2px; overflow: hidden; }
        .station-load-fill { height: 100%; border-radius: 2px; }
        .station-load-val { font-size: 11px; font-weight: 600; min-width: 30px; }
        .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; }
        .dot-green { background: #10b981; }
        .dot-red { background: #ef4444; }
        .dot-gray { background: #9ca3af; }

        .summary-box { background: #f8fafc; padding: 14px; border-radius: 6px; margin-top: 12px; }
        .summary-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
        .summary-row .label { color: #6b7280; }
        .summary-row .value { color: #1a365d; font-weight: 600; }
        .summary-warn { color: #f97316; }

        .conclusion-box { background: #eff6ff; padding: 14px; border-radius: 6px; margin-top: 12px; border-left: 3px solid #4facfe; }
        .conclusion-item { font-size: 12px; color: #374151; padding: 3px 0; }
        .conclusion-item:before { content: '▸ '; color: #4facfe; }

        /* Embedded模式 */
        html, body.embedded { height: 100%; min-height: 0; max-height: 100%; overflow: hidden; }
        body.embedded .header { display: none; }
        body.embedded .sidebar { display: none; }
        body.embedded .container { flex: 1; min-height: 0; height: 100%; overflow: hidden; }
        body.embedded .container > .main-content { flex: 1; min-height: 0; min-width: 0; height: 100%; overflow-y: auto; overflow-x: hidden; overflow-anchor: none; padding: 16px; }

        /* ===== Tab3 服务区详情 ===== */
        .breadcrumb { font-size: 13px; color: #6b7280; margin-bottom: 8px; }
        .breadcrumb a { color: #4facfe; text-decoration: none; }
        .breadcrumb a:hover { text-decoration: underline; }
        .breadcrumb span { margin: 0 5px; color: #d1d5db; }

        .station-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .station-detail-title { font-size: 22px; font-weight: 700; color: #1a365d; display: flex; align-items: center; gap: 12px; }
        .station-detail-actions { display: flex; gap: 8px; }
        .action-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #e5e7eb; background: white; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
        .action-btn:hover { background: #eff6ff; border-color: #4facfe; }

        .stats-cards-6-detail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 20px; }

        .sub-tabs { display: flex; gap: 0; border-bottom: 2px solid #e5e7eb; margin-bottom: 20px; }
        .sub-tab { padding: 10px 20px; cursor: pointer; font-size: 14px; color: #6b7280; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.2s; font-weight: 500; }
        .sub-tab:hover { color: #1e4d8c; }
        .sub-tab.active { color: #1e4d8c; border-bottom-color: #1e4d8c; font-weight: 600; }
        .sub-page { display: none; }
        .sub-page.active { display: block; animation: fadeIn 0.3s ease; }

        .info-card { background: #f8fafc; border-radius: 8px; padding: 16px; margin-bottom: 14px; border-left: 3px solid #4facfe; }
        .info-card-title { font-size: 14px; font-weight: 600; color: #1a365d; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
        .info-row { display: flex; padding: 4px 0; font-size: 13px; }
        .info-row .info-label { color: #6b7280; min-width: 110px; }
        .info-row .info-value { color: #1f2937; font-weight: 500; }

        .device-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
        .device-mini-card { background: white; border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px; text-align: center; transition: all 0.2s; }
        .device-mini-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
        .device-mini-id { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
        .device-mini-status { font-size: 20px; margin-bottom: 4px; }
        .device-mini-power { font-size: 13px; font-weight: 600; color: #1a365d; }
        .device-mini-energy { font-size: 11px; color: #6b7280; margin-top: 2px; }

        .detail-table { width: 100%; border-collapse: collapse; font-size: 12px; }
        .detail-table th { background: #1e4d8c; color: white; padding: 8px 6px; text-align: left; font-weight: 600; white-space: nowrap; }
        .detail-table td { padding: 7px 6px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
        .detail-table tbody tr:hover { background: #f0f7ff; }
        .health-bar { display: inline-block; width: 50px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 4px; }
        .health-fill { height: 100%; border-radius: 3px; }
        .table-action { font-size: 12px; color: #4facfe; cursor: pointer; margin-right: 8px; }
        .table-action:hover { text-decoration: underline; }

        .metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
        .metric-card { background: white; border: 1px solid #e5e7eb; border-radius: 6px; padding: 14px; text-align: center; }
        .metric-card .metric-label { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
        .metric-card .metric-value { font-size: 20px; font-weight: 700; color: #1e4d8c; }
        .metric-card .metric-unit { font-size: 12px; color: #6b7280; }

        .price-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
        .price-table th { background: #1e4d8c; color: white; padding: 10px; text-align: center; }
        .price-table td { padding: 10px; border-bottom: 1px solid #e5e7eb; text-align: center; }
        .price-table .period-peak { color: #ef4444; font-weight: 600; }
        .price-table .period-high { color: #f97316; font-weight: 600; }
        .price-table .period-normal { color: #4facfe; }
        .price-table .period-low { color: #10b981; }
        .price-table .period-deep { color: #059669; }

        .contact-card { background: #f8fafc; border-radius: 8px; padding: 18px; margin-bottom: 14px; border-left: 3px solid #4facfe; }
        .contact-card-title { font-size: 15px; font-weight: 600; color: #1a365d; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
        .contact-row { display: flex; padding: 5px 0; font-size: 13px; }
        .contact-row .contact-label { color: #6b7280; min-width: 150px; }
        .contact-row .contact-value { color: #1f2937; font-weight: 500; }

        .bottom-actions { display: flex; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #e5e7eb; }
        .btn-action { padding: 10px 24px; border-radius: 6px; font-size: 14px; cursor: pointer; border: none; font-weight: 500; transition: all 0.2s; }
        .btn-blue { background: #1e4d8c; color: white; }
        .btn-blue:hover { background: #2c5aa0; }
        .btn-green { background: #10b981; color: white; }
        .btn-green:hover { background: #059669; }
        .btn-orange { background: #f97316; color: white; }
        .btn-orange:hover { background: #ea580c; }

        .score-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
        .score-a { background: #d1fae5; color: #065f46; }