.global-config { padding: 24px; max-width: 1200px; margin: 0 auto; } .global-config-header { margin-bottom: 32px; } .global-config-header h2 { margin: 0 0 8px 0; font-size: 24px; font-weight: 600; } .global-config-header p { margin: 0; color: #666; font-size: 14px; } .global-section { margin-bottom: 40px; background: #fff; border-radius: 8px; padding: 24px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .section-header h3 { margin: 0; font-size: 18px; font-weight: 600; } .form-card { background: #f5f5f5; border-radius: 8px; padding: 20px; margin-bottom: 20px; } .form-card h4 { margin: 0 0 16px 0; font-size: 16px; font-weight: 600; } .form-group { margin-bottom: 16px; } .form-group label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 14px; } .form-group input, .form-group select { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .form-actions { display: flex; gap: 12px; margin-top: 20px; } .btn-primary { background: #1976d2; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; } .btn-primary:hover:not(:disabled) { background: #1565c0; } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .table-container { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; } .data-table th { background: #f5f5f5; font-weight: 600; font-size: 14px; } .data-table td { font-size: 14px; } .data-table select { padding: 4px 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .status-badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; } .status-badge.active { background: #e8f5e9; color: #2e7d32; } .status-badge.disabled { background: #ffebee; color: #c62828; } .message { padding: 12px 16px; border-radius: 4px; margin-bottom: 20px; } .message.success { background: #e8f5e9; color: #2e7d32; } .message.error { background: #ffebee; color: #c62828; } /* System Control Section */ .system-section { border-top: 4px solid #1976d2; } .system-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .system-header h3 { margin: 0; } .system-status { display: flex; align-items: center; gap: 12px; } .system-status-badge { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; } .system-status-badge.running { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; } .system-status-badge.stopped { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; } .system-status-meta { font-size: 12px; color: #666; font-family: monospace; } .system-control-group { background: #f8f9fa; border-radius: 8px; padding: 16px; margin-bottom: 16px; border: 1px solid #eee; } .control-group-title { margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.5px; } .system-actions { display: flex; gap: 12px; flex-wrap: wrap; } .system-btn { padding: 8px 16px; border: 1px solid #ddd; background: white; border-radius: 6px; font-size: 14px; cursor: pointer; transition: all 0.2s; color: #333; } .system-btn:hover:not(:disabled) { background: #f5f5f5; border-color: #bbb; } .system-btn:disabled { opacity: 0.6; cursor: not-allowed; } .system-btn.primary { background: #1976d2; color: white; border-color: #1565c0; } .system-btn.primary:hover:not(:disabled) { background: #1565c0; } .system-btn.danger { background: #dc3545; color: white; border-color: #dc3545; } .system-btn.danger:hover:not(:disabled) { background: #c82333; border-color: #bd2130; } .system-btn.warning { background: #ff9800; color: white; border-color: #f57c00; } .system-btn.warning:hover:not(:disabled) { background: #f57c00; } .system-hint { font-size: 13px; color: #666; margin-top: 12px; padding: 8px 12px; background: #fff3e0; border-radius: 4px; border: 1px solid #ffe0b2; }