.dashboard-container {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .dashboard-header {
        margin-bottom: 24px;
    }
    
    .dashboard-title {
        font-size: 24px;
        font-weight: 600;
        color: #262626;
        margin-bottom: 8px;
    }
    
    .dashboard-subtitle {
        color: #8c8c8c;
        font-size: 14px;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }
    
    .stat-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        transition: box-shadow 0.2s;
        position: relative;
        cursor: pointer;
        z-index: 1;
    }
    
    .stat-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        z-index: 9998;
    }
    
    .stat-tooltip {
        position: absolute;
        background: white;
        color: #333;
        padding: 12px 16px;
        border-radius: 6px;
        font-size: 12px;
        pointer-events: none;
        z-index: 9999;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border: 1px solid #e0e0e0;
        opacity: 0;
        transition: opacity 0.2s;
        line-height: 1.6;
        min-width: 280px;
        max-width: 400px;
        max-height: 400px;
        overflow-y: auto;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        margin-top: 8px;
    }
    
    .stat-tooltip.visible {
        opacity: 1;
    }
    
    .stat-tooltip::after {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid white;
    }
    
    .stat-label {
        font-size: 14px;
        color: #8c8c8c;
        margin-bottom: 8px;
    }
    
    .stat-value {
        font-size: 32px;
        font-weight: 600;
        color: #262626;
        margin-bottom: 4px;
    }
    
    .stat-change {
        font-size: 12px;
        color: #52c41a;
    }
    
    .stat-change.negative {
        color: #ff4d4f;
    }
    
    .section {
        background: white;
        border-radius: 8px;
        padding: 24px;
        margin-bottom: 24px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    
    .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #262626;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .health-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .health-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: #fafafa;
        border-radius: 6px;
    }
    
    .health-agents-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .health-agents-grid .health-item {
        margin: 0;
    }
    
    .health-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #52c41a;
    }
    
    .health-indicator.warning {
        background: #faad14;
    }
    
    .health-indicator.error {
        background: #ff4d4f;
    }
    
    .health-indicator.idle {
        background: #d9d9d9;
    }
    
    .health-label {
        font-size: 14px;
        color: #262626;
        position: relative;
        display: inline-block;
    }
    
    .health-status-bar {
        position: absolute;
        bottom: -4px;
        left: 0;
        right: 0;
        height: 3px;
        border-radius: 2px;
        transition: background-color 0.3s;
    }
    
    .health-status-bar.healthy {
        background: #52c41a;
    }
    
    .health-status-bar.warning {
        background: #faad14;
    }
    
    .health-status-bar.error {
        background: #ff4d4f;
    }
    
    .health-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1;
    }
    
    .health-item:hover {
        z-index: 9998;
    }
    
    .health-item-content {
        display: flex;
        align-items: center;
        flex: 1;
    }
    
    .status-badge {
        margin-left: 16px;
        cursor: pointer;
        position: relative;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
    }
    
    .status-badge-text {
        font-size: 11px;
        color: white;
        padding: 2px 6px;
        border-radius: 3px;
        font-weight: 500;
        white-space: nowrap;
    }
    
    .status-badge.healthy .status-badge-text {
        background: #52c41a;
    }
    
    .status-badge.warning .status-badge-text {
        background: #faad14;
    }
    
    .status-badge.error .status-badge-text {
        background: #ff4d4f;
    }

    .status-badge.idle .status-badge-text {
        background: #d9d9d9;
    }
    
    .qc-badge {
        margin-left: 16px;
        cursor: pointer;
        position: relative;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        z-index: 1;
    }
    
    .qc-badge:hover {
        z-index: 10000;
    }
    
    .qc-badge-text {
        font-size: 11px;
        color: white;
        padding: 2px 6px;
        border-radius: 3px;
        font-weight: 500;
        white-space: nowrap;
    }
    
    .qc-badge.healthy .qc-badge-text {
        background: #52c41a;
    }
    
    .qc-badge.warning .qc-badge-text {
        background: #faad14;
    }
    
    .qc-badge.error .qc-badge-text {
        background: #ff4d4f;
    }
    
    .qc-badge.idle .qc-badge-text {
        background: #d9d9d9;
    }
    
    .qc-tooltip {
        position: absolute;
        background: white;
        color: #333;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 11px;
        pointer-events: none;
        z-index: 10000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border: 1px solid #e0e0e0;
        opacity: 0;
        transition: opacity 0.2s;
        line-height: 1.5;
        min-width: 160px;
        right: 0;
        top: 100%;
        margin-top: 6px;
        white-space: nowrap;
    }
    
    .qc-tooltip.visible {
        opacity: 1;
    }
    
    .qc-tooltip::after {
        content: '';
        position: absolute;
        bottom: 100%;
        right: 12px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid white;
    }
    
    .health-tooltip {
        position: absolute;
        background: white;
        color: #333;
        padding: 10px 14px;
        border-radius: 6px;
        font-size: 12px;
        pointer-events: none;
        z-index: 9999;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border: 1px solid #e0e0e0;
        opacity: 0;
        transition: opacity 0.2s;
        line-height: 1.6;
        min-width: 200px;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        margin-top: 8px;
    }
    
    .health-tooltip.visible {
        opacity: 1;
    }
    
    .health-tooltip::after {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid white;
    }
    
    .queue-item {
        position: relative;
    }
    
    .queue-tooltip {
        position: absolute;
        background: white;
        color: #333;
        padding: 12px 16px;
        border-radius: 6px;
        font-size: 12px;
        pointer-events: none;
        z-index: 9999;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border: 1px solid #e0e0e0;
        opacity: 0;
        transition: opacity 0.2s;
        line-height: 1.6;
        min-width: 300px;
        max-width: 400px;
        max-height: 400px;
        overflow-y: auto;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        margin-top: 8px;
    }
    
    .queue-tooltip.visible {
        opacity: 1;
    }
    
    .queue-tooltip::after {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid white;
    }
    
    .tooltip-title {
        font-weight: 600;
        margin-bottom: 8px;
        padding-bottom: 6px;
        border-bottom: 1px solid #e0e0e0;
        color: #262626;
    }
    
    .tooltip-item {
        margin: 4px 0;
        color: #333;
    }
    
    .task-list-item {
        padding: 6px 0;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .task-list-item:last-child {
        border-bottom: none;
    }
    
    .task-progress {
        width: 100%;
        height: 4px;
        background: #f0f0f0;
        border-radius: 2px;
        margin-top: 4px;
        overflow: hidden;
    }
    
    .task-progress-bar {
        height: 100%;
        background: #52c41a;
        transition: width 0.3s;
    }
    
    .queue-list {
        display: grid;
        gap: 12px;
    }
    
    .queue-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background: #fafafa;
        border-radius: 6px;
    }
    
    .queue-name {
        font-size: 14px;
        color: #262626;
    }
    
    .queue-count {
        font-size: 18px;
        font-weight: 600;
        color: #1890ff;
    }
    
    /* API服务状态样式 */
    .api-status-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .api-status-summary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 8px;
    }
    
    .api-stat-item {
        text-align: center;
        padding: 12px 8px;
        background: #fafafa;
        border-radius: 6px;
    }
    
    .api-stat-value {
        font-size: 24px;
        font-weight: 600;
        color: #262626;
    }
    
    .api-stat-value.success {
        color: #52c41a;
    }
    
    .api-stat-value.warning {
        color: #faad14;
    }
    
    .api-stat-label {
        font-size: 11px;
        color: #8c8c8c;
        margin-top: 4px;
    }
    
    .api-provider-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 200px;
        overflow-y: auto;
    }
    
    .api-provider-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        background: #fafafa;
        border-radius: 6px;
        font-size: 13px;
    }
    
    .api-provider-name {
        color: #262626;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .api-provider-status {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #52c41a;
    }
    
    .api-provider-status.warning {
        background: #faad14;
    }
    
    .api-provider-status.error {
        background: #ff4d4f;
    }
    
    .api-provider-status.unknown {
        background: #d9d9d9;
    }
    
    .api-provider-stats {
        display: flex;
        gap: 12px;
        font-size: 12px;
        color: #8c8c8c;
    }
    
    .cost-chart-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .time-range-selector {
        display: flex;
        gap: 8px;
    }
    
    .time-range-btn {
        padding: 8px 20px;
        border: 1px solid #d9d9d9;
        background: white;
        color: #262626;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.2s;
        min-width: 70px;
        text-align: center;
    }
    
    .time-range-btn:hover {
        border-color: #713eff;
        color: #713eff;
    }
    
    .time-range-btn.active {
        background: #713eff;
        border-color: #713eff;
        color: white;
    }
    
    .cost-chart {
        height: 200px;
        display: flex;
        align-items: flex-end;
        gap: 8px;
        padding: 20px 0;
        position: relative;
    }
    
    .chart-bar {
        flex: 1;
        background: linear-gradient(to top, #1890ff, #40a9ff);
        border-radius: 4px 4px 0 0;
        min-height: 20px;
        position: relative;
        cursor: pointer;
        transition: opacity 0.2s;
    }
    
    .chart-bar:hover {
        opacity: 0.8;
    }
    
    .chart-label {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        color: #8c8c8c;
        white-space: nowrap;
    }
    
    .chart-tooltip {
        position: absolute;
        background: white;
        color: #333;
        padding: 10px 14px;
        border-radius: 6px;
        font-size: 12px;
        pointer-events: none;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border: 1px solid #e0e0e0;
        opacity: 0;
        transition: opacity 0.2s;
        line-height: 1.6;
        min-width: 140px;
    }
    
    .chart-tooltip.visible {
        opacity: 1;
    }
    
    .chart-tooltip::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid white;
    }
    
    .tooltip-title {
        font-weight: 600;
        margin-bottom: 6px;
        padding-bottom: 4px;
        border-bottom: 1px solid #e0e0e0;
        color: #262626;
    }
    
    .tooltip-item {
        margin: 3px 0;
        color: #333;
    }
    
    /* 关联图谱分析面板样式 */
    .insights-panel {
        margin-top: 24px;
        background: white;
        border-radius: 8px;
        padding: 24px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    
    .insights-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .insights-panel-title {
        font-size: 18px;
        font-weight: 600;
        color: #262626;
    }
    
    .insights-search-box {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
    }
    
    .insights-search-input {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        font-size: 14px;
    }
    
    .insights-search-btn {
        padding: 8px 16px;
        background: #713eff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }
    
    .insights-search-btn:hover {
        background: #5a2fd9;
    }
    
    .insights-history {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #f0f0f0;
    }
    
    .insights-history-item {
        padding: 8px 12px;
        background: #f8f9fa;
        border-radius: 4px;
        margin-bottom: 8px;
        cursor: pointer;
        transition: background 0.2s;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .insights-history-item:hover {
        background: #e9ecef;
    }
    
    /* 图谱视图样式 */
    .graph-drawer {
        position: fixed;
        top: 0;
        right: -600px;
        width: 600px;
        height: 100vh;
        background: white;
        box-shadow: -2px 0 8px rgba(0,0,0,0.15);
        z-index: 2000;
        transition: right 0.3s;
        overflow-y: auto;
    }
    
    .graph-drawer.open {
        right: 0;
    }
    
    .graph-drawer-header {
        padding: 16px 24px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
    }
    
    .graph-drawer-title {
        font-size: 16px;
        font-weight: 600;
        color: #262626;
    }
    
    .graph-drawer-close {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #8c8c8c;
        padding: 4px 8px;
    }
    
    .graph-drawer-close:hover {
        color: #262626;
    }
    
    .graph-drawer-content {
        padding: 24px;
    }
    
    .graph-container {
        width: 100%;
        height: 500px;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
    }
    
    .analyze-btn {
        padding: 4px 8px;
        background: #713eff;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        font-size: 11px;
        margin-left: 8px;
    }
    
    .analyze-btn:hover {
        background: #5a2fd9;
    }
    
    .trace-btn {
        padding: 4px 8px;
        background: #52c41a;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        font-size: 11px;
        margin-left: 8px;
    }
    
    .trace-btn:hover {
        background: #73d13d;
    }
    
    .graph-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1999;
        display: none;
    }
    
    .graph-overlay.show {
        display: block;
    }
    
    /* ============================================
       快捷入口按钮样式
       ============================================ */
    .quick-action-btn {
        transition: all 0.2s ease;
    }
    
    .quick-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* ============================================
       告警中心样式（新增）
       ============================================ */
    .alert-center-section {
        margin-bottom: 24px;
    }
    
    .alert-center-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    
    .alert-center-title {
        font-size: 18px;
        font-weight: 600;
        color: #262626;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .alert-stats {
        display: flex;
        gap: 16px;
        align-items: center;
    }
    
    .alert-stat-badge {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
    }
    
    .alert-stat-badge.critical {
        background: #fff1f0;
        color: #cf1322;
        border: 1px solid #ffa39e;
    }
    
    .alert-stat-badge.warning {
        background: #fffbe6;
        color: #d48806;
        border: 1px solid #ffe58f;
    }
    
    .alert-stat-badge.info {
        background: #e6f7ff;
        color: #096dd9;
        border: 1px solid #91d5ff;
    }
    
    .alert-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 280px;
        overflow-y: auto;
    }
    
    .alert-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
        background: #fafafa;
        border-radius: 6px;
        border-left: 4px solid #d9d9d9;
        transition: background 0.2s;
    }
    
    .alert-item:hover {
        background: #f0f0f0;
    }
    
    .alert-item.critical {
        border-left-color: #ff4d4f;
        background: #fff2f0;
    }
    
    .alert-item.warning {
        border-left-color: #faad14;
        background: #fffbe6;
    }
    
    .alert-item.info {
        border-left-color: #1890ff;
        background: #e6f7ff;
    }
    
    .alert-icon {
        font-size: 18px;
        flex-shrink: 0;
    }
    
    .alert-content {
        flex: 1;
        min-width: 0;
    }
    
    .alert-title {
        font-size: 14px;
        font-weight: 500;
        color: #262626;
        margin-bottom: 4px;
    }
    
    .alert-message {
        font-size: 12px;
        color: #595959;
        line-height: 1.5;
    }
    
    .alert-meta {
        font-size: 11px;
        color: #8c8c8c;
        margin-top: 6px;
        display: flex;
        gap: 12px;
    }
    
    .alert-actions {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex-shrink: 0;
    }
    
    .alert-action-btn {
        padding: 4px 10px;
        font-size: 11px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .alert-action-btn.primary {
        background: #713eff;
        color: white;
    }
    
    .alert-action-btn.primary:hover {
        background: #5a2fd9;
    }
    
    .alert-action-btn.secondary {
        background: #f0f0f0;
        color: #595959;
    }
    
    .alert-action-btn.secondary:hover {
        background: #e0e0e0;
    }
    
    .alert-empty {
        text-align: center;
        padding: 40px 20px;
        color: #8c8c8c;
    }
    
    .alert-empty-icon {
        font-size: 32px;
        margin-bottom: 8px;
    }
    
    .alert-config-btn {
        padding: 6px 12px;
        background: #f5f5f5;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        color: #595959;
        font-size: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .alert-config-btn:hover {
        background: #e8e8e8;
    }
    
    /* 告警规则配置弹窗 */
    .alert-rules-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 2000;
    }
    
    .alert-rules-modal.show {
        display: flex;
    }
    
    .alert-rules-content {
        background: white;
        border-radius: 8px;
        width: 600px;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
    
    .alert-rules-header {
        padding: 16px 24px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .alert-rules-title {
        font-size: 16px;
        font-weight: 600;
    }
    
    .alert-rules-close {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #8c8c8c;
    }
    
    .alert-rules-body {
        padding: 24px;
    }
    
    .alert-rule-item {
        padding: 16px;
        background: #fafafa;
        border-radius: 6px;
        margin-bottom: 12px;
    }
    
    .alert-rule-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }
    
    .alert-rule-name {
        font-size: 14px;
        font-weight: 500;
    }
    
    .alert-rule-toggle {
        position: relative;
        width: 40px;
        height: 20px;
    }
    
    .alert-rule-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .alert-rule-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.4s;
        border-radius: 20px;
    }
    
    .alert-rule-slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }
    
    .alert-rule-toggle input:checked + .alert-rule-slider {
        background-color: #52c41a;
    }
    
    .alert-rule-toggle input:checked + .alert-rule-slider:before {
        transform: translateX(20px);
    }
    
    .alert-rule-desc {
        font-size: 12px;
        color: #8c8c8c;
        margin-bottom: 8px;
    }
    
    .alert-rule-threshold {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .alert-rule-threshold label {
        font-size: 12px;
        color: #595959;
    }
    
    .alert-rule-threshold input {
        width: 80px;
        padding: 4px 8px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        font-size: 12px;
    }

    /* ============================================
       任务链路监测样式（新增）
       ============================================ */
    .pipeline-monitor-section {
        margin-bottom: 24px;
    }
    
    .pipeline-monitor-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    
    .pipeline-monitor-title {
        font-size: 18px;
        font-weight: 600;
        color: #262626;
    }
    
    .pipeline-monitor-actions {
        display: flex;
        gap: 8px;
    }
    
    .pipeline-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    .pipeline-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border: 1px solid #f0f0f0;
        transition: all 0.2s;
    }
    
    .pipeline-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }
    
    .pipeline-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    
    .pipeline-title {
        font-size: 16px;
        font-weight: 600;
        color: #262626;
    }
    
    .pipeline-status-badge {
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
    }
    
    .pipeline-status-badge.running {
        background: #e6f7ff;
        color: #1890ff;
    }
    
    .pipeline-status-badge.completed {
        background: #f6ffed;
        color: #52c41a;
    }
    
    .pipeline-status-badge.error {
        background: #fff2f0;
        color: #ff4d4f;
    }
    
    .pipeline-status-badge.pending {
        background: #f5f5f5;
        color: #8c8c8c;
    }
    
    /* 集群进度条 */
    .cluster-progress-bar {
        display: flex;
        gap: 4px;
        margin-bottom: 16px;
        background: #f5f5f5;
        border-radius: 8px;
        padding: 8px;
    }
    
    .cluster-progress-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 8px 4px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .cluster-progress-item:hover {
        background: rgba(113, 62, 255, 0.1);
    }
    
    .cluster-progress-item.active {
        background: rgba(113, 62, 255, 0.15);
    }
    
    .cluster-icon {
        font-size: 20px;
    }
    
    .cluster-name {
        font-size: 11px;
        color: #8c8c8c;
        text-align: center;
        white-space: nowrap;
    }
    
    .cluster-status-indicator {
        width: 100%;
        height: 4px;
        background: #e0e0e0;
        border-radius: 2px;
        overflow: hidden;
    }
    
    .cluster-status-indicator.completed {
        background: #52c41a;
    }
    
    .cluster-status-indicator.running {
        background: linear-gradient(90deg, #1890ff 0%, #e0e0e0 100%);
        animation: progress-pulse 1.5s ease-in-out infinite;
    }
    
    .cluster-status-indicator.error {
        background: #ff4d4f;
    }
    
    .cluster-status-indicator.pending {
        background: #e0e0e0;
    }
    
    @keyframes progress-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }
    
    /* 集群内部节点详情 */
    .cluster-node-details {
        display: none;
        background: #fafafa;
        border-radius: 6px;
        padding: 12px;
        margin-top: 12px;
    }
    
    .cluster-node-details.show {
        display: block;
    }
    
    .cluster-node-details-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .cluster-node-details-title {
        font-size: 14px;
        font-weight: 600;
        color: #262626;
    }
    
    .node-flow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    
    .node-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 8px;
        background: white;
        border-radius: 6px;
        border: 1px solid #e0e0e0;
        transition: all 0.2s;
    }
    
    .node-item.completed {
        border-color: #52c41a;
        background: #f6ffed;
    }
    
    .node-item.running {
        border-color: #1890ff;
        background: #e6f7ff;
        animation: node-pulse 1.5s ease-in-out infinite;
    }
    
    .node-item.error {
        border-color: #ff4d4f;
        background: #fff2f0;
    }
    
    @keyframes node-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.4); }
        50% { box-shadow: 0 0 0 4px rgba(24, 144, 255, 0.1); }
    }
    
    .node-id {
        font-size: 14px;
        font-weight: 600;
        color: #262626;
    }
    
    .node-name {
        font-size: 11px;
        color: #8c8c8c;
        text-align: center;
    }
    
    .node-duration {
        font-size: 10px;
        color: #bfbfbf;
    }
    
    .node-arrow {
        color: #d9d9d9;
        font-size: 16px;
    }
    
    .node-arrow.active {
        color: #52c41a;
    }
    
    /* 流水线底部信息 */
    .pipeline-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #f0f0f0;
        font-size: 12px;
        color: #8c8c8c;
    }
    
    .pipeline-progress-text {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .pipeline-progress-percent {
        font-weight: 600;
        color: #1890ff;
    }
    
    /* 空状态 */
    .pipeline-empty {
        text-align: center;
        padding: 40px 20px;
        color: #8c8c8c;
    }
    
    .pipeline-empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
    }
    
    /* 历史任务链接 */
    .view-history-link {
        font-size: 13px;
        color: #713eff;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .view-history-link:hover {
        text-decoration: underline;
    }
    
    /* 刷新按钮 */
    .refresh-btn {
        padding: 6px 12px;
        background: white;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        color: #262626;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: all 0.2s;
    }
    
    .refresh-btn:hover {
        border-color: #713eff;
        color: #713eff;
    }
    
    .refresh-btn.loading {
        opacity: 0.6;
        pointer-events: none;
    }
    
    .refresh-btn .spin {
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }