Spaces:
Sleeping
Sleeping
| /* ═══════════════════════════════════════════════ | |
| RootCauseArena V3 — Premium Dark Design System | |
| ═══════════════════════════════════════════════ */ | |
| /* ── Design Tokens ── */ | |
| :root { | |
| --bg-base: #080c14; | |
| --bg-surface: #0d1525; | |
| --bg-card: rgba(16, 27, 50, 0.75); | |
| --bg-card-hover: rgba(22, 38, 68, 0.9); | |
| --border: rgba(56, 100, 185, 0.22); | |
| --border-bright: rgba(56, 150, 255, 0.45); | |
| --accent-blue: #3b82f6; | |
| --accent-purple: #8b5cf6; | |
| --accent-cyan: #06b6d4; | |
| --accent-green: #10b981; | |
| --accent-yellow: #f59e0b; | |
| --accent-red: #ef4444; | |
| --text-primary: #e2e8f0; | |
| --text-secondary: #7f8fa6; | |
| --text-muted: #4a5568; | |
| --font-ui: 'Inter', system-ui, sans-serif; | |
| --font-mono: 'JetBrains Mono', 'Courier New', monospace; | |
| --radius-sm: 6px; | |
| --radius-md: 12px; | |
| --radius-lg: 18px; | |
| --shadow-glow-blue: 0 0 20px rgba(59, 130, 246, 0.3); | |
| --shadow-glow-red: 0 0 20px rgba(239, 68, 68, 0.4); | |
| --shadow-glow-green: 0 0 20px rgba(16, 185, 129, 0.3); | |
| --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5); | |
| --transition: 0.2s ease; | |
| } | |
| /* ── Reset & Base ── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html, body { | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| body { | |
| background: var(--bg-base); | |
| color: var(--text-primary); | |
| font-family: var(--font-ui); | |
| font-size: 14px; | |
| line-height: 1.6; | |
| display: flex; | |
| flex-direction: column; | |
| /* Subtle radial glow in the background */ | |
| background-image: | |
| radial-gradient(ellipse 80% 50% at 20% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 60%), | |
| radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 60%); | |
| } | |
| /* ── Header ── */ | |
| .site-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 14px 24px; | |
| border-bottom: 1px solid var(--border); | |
| background: rgba(8, 12, 20, 0.9); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| flex-shrink: 0; | |
| z-index: 100; | |
| } | |
| .header-brand { display: flex; align-items: center; gap: 14px; } | |
| .brand-icon { font-size: 28px; filter: drop-shadow(0 0 8px rgba(59,130,246,0.8)); } | |
| .brand-title { | |
| font-size: 18px; font-weight: 700; letter-spacing: -0.3px; | |
| background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan)); | |
| -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; | |
| } | |
| .brand-subtitle { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); } | |
| .header-status { | |
| display: flex; align-items: center; gap: 8px; | |
| padding: 6px 14px; border-radius: 20px; | |
| border: 1px solid var(--border); | |
| background: var(--bg-card); | |
| font-size: 12px; font-family: var(--font-mono); | |
| } | |
| .status-dot { | |
| width: 8px; height: 8px; border-radius: 50%; | |
| background: var(--accent-yellow); | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| .status-dot.online { background: var(--accent-green); } | |
| .status-dot.error { background: var(--accent-red); animation: none; } | |
| /* ── Layout ── */ | |
| .app-layout { | |
| display: grid; | |
| grid-template-columns: 280px 1fr 300px; | |
| gap: 0; | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| .panel { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| overflow-y: auto; | |
| padding: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .control-panel { border-left: none; border-top: none; border-bottom: none; } | |
| .log-panel { border-right: none; border-top: none; border-bottom: none; } | |
| /* ── Panel Sections ── */ | |
| .panel-section { display: flex; flex-direction: column; gap: 10px; } | |
| .section-label { | |
| font-size: 10px; font-weight: 700; letter-spacing: 1.5px; | |
| text-transform: uppercase; color: var(--text-muted); | |
| padding-bottom: 6px; border-bottom: 1px solid var(--border); | |
| } | |
| /* ── Task Selection Cards ── */ | |
| .task-grid { display: flex; flex-direction: column; gap: 8px; } | |
| .task-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: 12px 14px; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .task-card::before { | |
| content: ''; | |
| position: absolute; left: 0; top: 0; bottom: 0; width: 3px; | |
| background: var(--task-color, var(--accent-blue)); | |
| border-radius: 3px 0 0 3px; | |
| } | |
| .task-card:hover { | |
| background: var(--bg-card-hover); | |
| border-color: var(--border-bright); | |
| transform: translateX(3px); | |
| } | |
| .task-card.active { | |
| border-color: var(--task-color, var(--accent-blue)); | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.15); | |
| background: var(--bg-card-hover); | |
| } | |
| .task-card-title { font-weight: 600; font-size: 13px; } | |
| .task-card-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; } | |
| .difficulty-badge { | |
| display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 1px; | |
| padding: 2px 7px; border-radius: 10px; text-transform: uppercase; margin-top: 4px; | |
| } | |
| .difficulty-easy { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); } | |
| .difficulty-medium { background: rgba(245, 158, 11, 0.15); color: var(--accent-yellow); } | |
| .difficulty-hard { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); } | |
| .difficulty-extreme{ background: rgba(139, 92, 246, 0.15); color: var(--accent-purple); } | |
| /* ── Stat Cards ── */ | |
| .stat-grid { | |
| display: grid; grid-template-columns: 1fr 1fr; gap: 8px; | |
| } | |
| .stat-card { | |
| background: var(--bg-card); border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); padding: 10px; text-align: center; | |
| } | |
| .stat-value { | |
| display: block; font-family: var(--font-mono); font-size: 22px; | |
| font-weight: 600; color: var(--accent-blue); | |
| } | |
| .stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; } | |
| /* ── Progress Bar ── */ | |
| .progress-bar-wrap { margin-top: 6px; } | |
| .progress-bar-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; } | |
| .progress-track { | |
| height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; width: 0%; border-radius: 3px; | |
| background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan)); | |
| transition: width 0.4s ease; | |
| box-shadow: 0 0 8px rgba(59, 130, 246, 0.5); | |
| } | |
| /* ── Action Area ── */ | |
| .action-targets { | |
| display: flex; flex-wrap: wrap; gap: 6px; | |
| } | |
| .target-btn { | |
| flex: 1 1 calc(50% - 3px); min-width: 0; | |
| padding: 8px 6px; border-radius: var(--radius-sm); | |
| background: var(--bg-card); border: 1px solid var(--border); | |
| color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; | |
| cursor: pointer; transition: all var(--transition); text-align: center; | |
| } | |
| .target-btn:hover { background: var(--bg-card-hover); border-color: var(--border-bright); } | |
| .target-btn.selected { | |
| border-color: var(--accent-blue); | |
| background: rgba(59, 130, 246, 0.12); | |
| color: var(--accent-blue); | |
| box-shadow: var(--shadow-glow-blue); | |
| } | |
| .target-btn:disabled { opacity: 0.4; cursor: not-allowed; } | |
| .action-buttons { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } | |
| .action-buttons button { width: 100%; } | |
| /* ── Buttons ── */ | |
| .btn { | |
| padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; | |
| font-family: var(--font-ui); font-size: 13px; font-weight: 500; cursor: pointer; | |
| transition: all var(--transition); display: flex; align-items: center; justify-content: center; gap: 6px; | |
| } | |
| .btn:disabled { opacity: 0.4; cursor: not-allowed; } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent-blue), #2563eb); | |
| color: #fff; border-color: transparent; | |
| box-shadow: 0 2px 12px rgba(59, 130, 246, 0.3); | |
| } | |
| .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5); } | |
| .btn-secondary { | |
| background: var(--bg-card); color: var(--text-primary); border-color: var(--border); | |
| } | |
| .btn-secondary:hover:not(:disabled) { background: var(--bg-card-hover); border-color: var(--border-bright); } | |
| .btn-success { | |
| background: linear-gradient(135deg, var(--accent-green), #059669); | |
| color: #fff; | |
| } | |
| .btn-success:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-glow-green); } | |
| .btn-danger { | |
| background: linear-gradient(135deg, var(--accent-red), #dc2626); | |
| color: #fff; | |
| } | |
| .btn-danger:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-glow-red); } | |
| .btn-ghost { | |
| background: transparent; color: var(--text-secondary); border-color: var(--border); | |
| } | |
| .btn-ghost:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-bright); } | |
| .btn-icon { | |
| background: transparent; border: none; color: var(--text-muted); | |
| cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: var(--radius-sm); | |
| transition: color var(--transition); | |
| } | |
| .btn-icon:hover { color: var(--text-primary); } | |
| .w-full { width: 100%; } | |
| .mt { margin-top: 6px; } | |
| /* ── Center Column ── */ | |
| .center-column { | |
| overflow-y: auto; padding: 20px; | |
| display: flex; flex-direction: column; gap: 20px; | |
| background: transparent; | |
| } | |
| .system-header { | |
| display: flex; align-items: center; justify-content: space-between; | |
| } | |
| .episode-status-badge { | |
| font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; | |
| padding: 4px 12px; border-radius: 20px; | |
| background: rgba(127, 143, 166, 0.1); color: var(--text-muted); | |
| border: 1px solid var(--border); | |
| transition: all var(--transition); | |
| } | |
| .episode-status-badge.running { background: rgba(245, 158, 11, 0.1); color: var(--accent-yellow); border-color: var(--accent-yellow); } | |
| .episode-status-badge.success { background: rgba(16, 185, 129, 0.1); color: var(--accent-green); border-color: var(--accent-green); } | |
| .episode-status-badge.failed { background: rgba(239, 68, 68, 0.1); color: var(--accent-red); border-color: var(--accent-red); } | |
| /* ── Components Grid ── */ | |
| .components-grid { | |
| display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; | |
| position: relative; min-height: 300px; | |
| } | |
| .no-session-overlay { | |
| position: absolute; inset: 0; | |
| display: flex; align-items: center; justify-content: center; | |
| background: rgba(8, 12, 20, 0.6); | |
| border-radius: var(--radius-lg); | |
| border: 2px dashed var(--border); | |
| } | |
| .no-session-content { text-align: center; color: var(--text-muted); } | |
| .no-session-icon { font-size: 40px; margin-bottom: 12px; } | |
| /* ── Component Cards ── */ | |
| .component-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| transition: all 0.3s ease; | |
| position: relative; overflow: hidden; | |
| backdrop-filter: blur(6px); | |
| } | |
| .component-card::after { | |
| content: ''; position: absolute; inset: 0; | |
| background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%); | |
| pointer-events: none; | |
| } | |
| .component-card.status-healthy { | |
| border-color: rgba(16, 185, 129, 0.35); | |
| box-shadow: 0 4px 20px rgba(16, 185, 129, 0.08); | |
| } | |
| .component-card.status-degraded { | |
| border-color: rgba(245, 158, 11, 0.45); | |
| box-shadow: 0 4px 20px rgba(245, 158, 11, 0.12); | |
| } | |
| .component-card.status-down { | |
| border-color: rgba(239, 68, 68, 0.5); | |
| box-shadow: 0 4px 20px rgba(239, 68, 68, 0.18); | |
| animation: card-pulse-danger 2.5s ease-in-out infinite; | |
| } | |
| @keyframes card-pulse-danger { | |
| 0%, 100% { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.18); } | |
| 50% { box-shadow: 0 4px 30px rgba(239, 68, 68, 0.4); } | |
| } | |
| .comp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } | |
| .comp-name { | |
| font-size: 15px; font-weight: 700; text-transform: capitalize; | |
| display: flex; align-items: center; gap: 8px; | |
| } | |
| .comp-icon { font-size: 18px; } | |
| .comp-status-pill { | |
| font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; | |
| padding: 3px 10px; border-radius: 12px; | |
| } | |
| .pill-healthy { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); } | |
| .pill-degraded { background: rgba(245, 158, 11, 0.15); color: var(--accent-yellow); } | |
| .pill-down { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); animation: pill-blink 1.2s steps(2) infinite; } | |
| @keyframes pill-blink { 50% { opacity: 0.4; } } | |
| /* ── Metrics Bars ── */ | |
| .metrics-list { display: flex; flex-direction: column; gap: 8px; } | |
| .metric-row { display: flex; flex-direction: column; gap: 3px; } | |
| .metric-header{ display: flex; justify-content: space-between; font-size: 11px; } | |
| .metric-name { color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.8px; font-size: 10px; } | |
| .metric-val { font-family: var(--font-mono); color: var(--text-primary); font-size: 11px; } | |
| .metric-track { | |
| height: 4px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; | |
| } | |
| .metric-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; } | |
| .fill-latency { background: var(--accent-cyan); } | |
| .fill-error { background: var(--accent-red); } | |
| .fill-queue { background: var(--accent-yellow); } | |
| .fill-cpu { background: var(--accent-purple); } | |
| /* ── Log Console ── */ | |
| .log-header { display: flex; align-items: center; justify-content: space-between; } | |
| .log-console { | |
| flex: 1; overflow-y: auto; background: rgba(0,0,0,0.3); | |
| border: 1px solid var(--border); border-radius: var(--radius-md); | |
| padding: 12px; font-family: var(--font-mono); font-size: 11.5px; | |
| display: flex; flex-direction: column; gap: 4px; | |
| min-height: 0; | |
| scrollbar-width: thin; scrollbar-color: var(--border) transparent; | |
| } | |
| .log-console::-webkit-scrollbar { width: 4px; } | |
| .log-console::-webkit-scrollbar-track { background: transparent; } | |
| .log-console::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } | |
| .log-entry { | |
| display: flex; gap: 8px; align-items: baseline; | |
| padding: 4px 6px; border-radius: 4px; | |
| animation: log-in 0.25s ease; | |
| border-left: 2px solid transparent; | |
| } | |
| @keyframes log-in { from { opacity: 0; transform: translateX(-6px); } } | |
| .log-ts { color: var(--text-muted); flex-shrink: 0; font-size: 10px; } | |
| .log-msg { flex: 1; line-height: 1.5; } | |
| .log-tag { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; } | |
| .log-info { border-left-color: var(--accent-blue); } | |
| .log-info .log-tag { background: rgba(59,130,246,0.15); color: var(--accent-blue); } | |
| .log-warn { border-left-color: var(--accent-yellow); } | |
| .log-warn .log-tag { background: rgba(245,158,11,0.15); color: var(--accent-yellow); } | |
| .log-error { border-left-color: var(--accent-red); background: rgba(239,68,68,0.05); } | |
| .log-error .log-tag { background: rgba(239,68,68,0.15); color: var(--accent-red); } | |
| .log-system { border-left-color: var(--accent-purple); } | |
| .log-system .log-tag { background: rgba(139,92,246,0.15); color: var(--accent-purple); } | |
| .log-success { border-left-color: var(--accent-green); } | |
| .log-success .log-tag { background: rgba(16,185,129,0.15); color: var(--accent-green); } | |
| /* ── Baseline Table ── */ | |
| .baseline-section { display: flex; flex-direction: column; gap: 12px; } | |
| .results-table { | |
| width: 100%; border-collapse: collapse; | |
| background: var(--bg-card); border-radius: var(--radius-md); overflow: hidden; | |
| } | |
| .results-table th { | |
| padding: 10px 14px; text-align: left; font-size: 10px; font-weight: 700; | |
| letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); | |
| background: rgba(0,0,0,0.2); border-bottom: 1px solid var(--border); | |
| } | |
| .results-table td { | |
| padding: 10px 14px; font-family: var(--font-mono); font-size: 12px; | |
| border-bottom: 1px solid rgba(255,255,255,0.04); | |
| } | |
| .results-table tr:last-child td { border-bottom: none; } | |
| .results-table tr:hover td { background: rgba(255,255,255,0.02); } | |
| .result-success { color: var(--accent-green); font-weight: 700; } | |
| .result-fail { color: var(--accent-red); font-weight: 700; } | |
| /* ── Modal ── */ | |
| .modal-overlay { | |
| position: fixed; inset: 0; background: rgba(0,0,0,0.7); | |
| backdrop-filter: blur(6px); z-index: 1000; | |
| display: flex; align-items: center; justify-content: center; | |
| } | |
| .modal { | |
| background: var(--bg-surface); border: 1px solid var(--border-bright); | |
| border-radius: var(--radius-lg); padding: 28px; max-width: 400px; width: 90%; | |
| box-shadow: 0 20px 60px rgba(0,0,0,0.7); | |
| animation: modal-in 0.2s ease; | |
| display: flex; flex-direction: column; gap: 12px; | |
| } | |
| @keyframes modal-in { from { opacity: 0; transform: scale(0.95); } } | |
| .modal-title { font-size: 18px; font-weight: 700; } | |
| .modal-body { color: var(--text-secondary); font-size: 13px; line-height: 1.6; } | |
| /* ── Animations / helpers ── */ | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| .shimmer { | |
| background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| } | |
| @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } | |