Spaces:
Sleeping
Sleeping
| /* ── Design System Tokens ────────────────────────────────────────── */ | |
| :root { | |
| --bg-base: #0a0e17; | |
| --bg-surface: #121824; | |
| --bg-surface-elevated: #1a2336; | |
| --border-color: rgba(255, 255, 255, 0.08); | |
| --color-text-primary: #e2e8f0; | |
| --color-text-secondary: #94a3b8; | |
| --color-text-disabled: #475569; | |
| --color-primary: #00e5ff; | |
| --color-primary-hover: #00b8d4; | |
| --color-primary-transparent: rgba(0, 229, 255, 0.1); | |
| --color-success: #00e676; | |
| --color-warning: #ffb300; | |
| --color-danger: #ff1744; | |
| --font-heading: 'Space Grotesk', sans-serif; | |
| --font-body: 'Outfit', sans-serif; | |
| --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); | |
| --shadow-md: 0 8px 24px rgba(0,0,0,0.5); | |
| --shadow-lg: 0 16px 48px rgba(0,0,0,0.6); | |
| --radius-sm: 6px; | |
| --radius-md: 12px; | |
| --radius-lg: 18px; | |
| --transition-fast: 0.15s ease; | |
| --transition-normal: 0.3s ease; | |
| } | |
| /* ── Base Reset ─────────────────────────────────────────────────── */ | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: var(--bg-base); | |
| color: var(--color-text-primary); | |
| font-family: var(--font-body); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow-x: hidden; | |
| } | |
| /* ── Layout ──────────────────────────────────────────────────────── */ | |
| .app-header { | |
| background-color: var(--bg-surface); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: 0.75rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-shadow: var(--shadow-sm); | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .logo-area { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .logo-area h1 { | |
| font-family: var(--font-heading); | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| letter-spacing: -0.5px; | |
| color: var(--color-text-primary); | |
| } | |
| .badge { | |
| background-color: var(--color-primary-transparent); | |
| color: var(--color-primary); | |
| border: 1px solid rgba(0, 229, 255, 0.3); | |
| padding: 0.2rem 0.5rem; | |
| border-radius: 4px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| } | |
| .pulse-indicator { | |
| width: 10px; | |
| height: 10px; | |
| background-color: var(--color-primary); | |
| border-radius: 50%; | |
| box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7); | |
| animation: pulse 1.8s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7); | |
| } | |
| 70% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 8px rgba(0, 229, 255, 0); | |
| } | |
| 100% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); | |
| } | |
| } | |
| /* Header Stat Strip */ | |
| .header-stat-strip { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| background-color: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-color); | |
| padding: 0.4rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| color: var(--color-text-secondary); | |
| } | |
| .stat-pill.highlight { | |
| color: var(--color-primary); | |
| font-weight: 600; | |
| } | |
| .stat-dot { | |
| opacity: 0.4; | |
| } | |
| .status-panel { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| font-size: 0.85rem; | |
| color: var(--color-text-secondary); | |
| } | |
| .gpu-banner { | |
| font-weight: 600; | |
| padding: 0.25rem 0.6rem; | |
| border-radius: 4px; | |
| font-size: 0.8rem; | |
| } | |
| .gpu-banner.gpu-active { | |
| background-color: rgba(0, 230, 118, 0.12); | |
| color: var(--color-success); | |
| border: 1px solid rgba(0, 230, 118, 0.3); | |
| } | |
| .gpu-banner.cpu-fallback { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| color: var(--color-text-secondary); | |
| border: 1px solid var(--border-color); | |
| } | |
| /* ── Dashboard Grid ──────────────────────────────────────────────── */ | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: auto auto; | |
| gap: 1.25rem; | |
| padding: 1.25rem; | |
| flex-grow: 1; | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| /* Card Styling (Glassmorphism) */ | |
| .card { | |
| background-color: var(--bg-surface); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| box-shadow: var(--shadow-md); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| transition: transform var(--transition-fast), border-color var(--transition-fast); | |
| } | |
| .card:hover { | |
| border-color: rgba(255, 255, 255, 0.12); | |
| } | |
| .card-header { | |
| padding: 1rem 1.25rem; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: justify; | |
| flex-direction: column; | |
| gap: 0.2rem; | |
| } | |
| .card-header h2 { | |
| font-family: var(--font-heading); | |
| font-size: 1.15rem; | |
| font-weight: 600; | |
| } | |
| .subtitle { | |
| font-size: 0.75rem; | |
| color: var(--color-text-secondary); | |
| } | |
| /* Individual Panel Configurations */ | |
| .panel-leaderboard { | |
| grid-column: span 5; | |
| height: 480px; | |
| } | |
| .panel-chart { | |
| grid-column: span 7; | |
| height: 480px; | |
| } | |
| .panel-decisions { | |
| grid-column: span 4; | |
| height: 440px; | |
| } | |
| .panel-benchmarks { | |
| grid-column: span 4; | |
| height: 440px; | |
| } | |
| .panel-chat { | |
| grid-column: span 4; | |
| height: 440px; | |
| } | |
| /* ── Leaderboard Table ───────────────────────────────────────────── */ | |
| .table-container { | |
| overflow-y: auto; | |
| flex-grow: 1; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| text-align: left; | |
| font-size: 0.85rem; | |
| } | |
| th { | |
| background-color: var(--bg-surface-elevated); | |
| color: var(--color-text-secondary); | |
| font-weight: 600; | |
| padding: 0.75rem 1rem; | |
| position: sticky; | |
| top: 0; | |
| border-bottom: 1px solid var(--border-color); | |
| z-index: 10; | |
| } | |
| td { | |
| padding: 0.8rem 1rem; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| tr:hover td { | |
| background-color: rgba(255,255,255,0.02); | |
| cursor: pointer; | |
| } | |
| /* Status Score Classes */ | |
| .score-badge { | |
| padding: 0.2rem 0.5rem; | |
| border-radius: 4px; | |
| font-weight: 700; | |
| text-align: center; | |
| display: inline-block; | |
| min-width: 45px; | |
| font-size: 0.8rem; | |
| } | |
| .score-green { | |
| background-color: rgba(0, 230, 118, 0.12); | |
| color: var(--color-success); | |
| border: 1px solid rgba(0, 230, 118, 0.2); | |
| } | |
| .score-amber { | |
| background-color: rgba(255, 179, 0, 0.12); | |
| color: var(--color-warning); | |
| border: 1px solid rgba(255, 179, 0, 0.2); | |
| } | |
| .score-red { | |
| background-color: rgba(255, 23, 68, 0.12); | |
| color: var(--color-danger); | |
| border: 1px solid rgba(255, 23, 68, 0.2); | |
| } | |
| /* Trend Indicator */ | |
| .trend-up { | |
| color: var(--color-success); | |
| font-weight: 600; | |
| } | |
| .trend-down { | |
| color: var(--color-danger); | |
| font-weight: 600; | |
| } | |
| .trend-neutral { | |
| color: var(--color-text-secondary); | |
| } | |
| /* ── Timeline Chart Panel ────────────────────────────────────────── */ | |
| .header-details { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| width: 100%; | |
| } | |
| .dropdown { | |
| background-color: var(--bg-surface-elevated); | |
| color: var(--color-text-primary); | |
| border: 1px solid var(--border-color); | |
| padding: 0.4rem 0.8rem; | |
| border-radius: var(--radius-sm); | |
| outline: none; | |
| font-family: var(--font-body); | |
| font-size: 0.85rem; | |
| } | |
| .chart-container { | |
| padding: 1rem; | |
| flex-grow: 1; | |
| position: relative; | |
| } | |
| /* ── Decisions Panel ─────────────────────────────────────────────── */ | |
| .decisions-list { | |
| overflow-y: auto; | |
| padding: 0.75rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| flex-grow: 1; | |
| } | |
| .decision-item { | |
| background-color: var(--bg-surface-elevated); | |
| border-left: 4px solid var(--color-primary); | |
| border-radius: var(--radius-sm); | |
| padding: 0.75rem 0.85rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.3rem; | |
| } | |
| .decision-item.severe { | |
| border-left-color: var(--color-danger); | |
| } | |
| .decision-item.warning { | |
| border-left-color: var(--color-warning); | |
| } | |
| .decision-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 0.7rem; | |
| color: var(--color-text-secondary); | |
| font-weight: 600; | |
| } | |
| .decision-title { | |
| font-weight: 600; | |
| font-size: 0.85rem; | |
| color: var(--color-text-primary); | |
| } | |
| .decision-action { | |
| font-size: 0.8rem; | |
| color: var(--color-primary); | |
| } | |
| .decision-rider-impact { | |
| font-size: 0.75rem; | |
| color: var(--color-text-secondary); | |
| font-style: italic; | |
| } | |
| /* ── Benchmark Panel ─────────────────────────────────────────────── */ | |
| .benchmark-content { | |
| padding: 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| flex-grow: 1; | |
| } | |
| .headline-stat { | |
| background-color: var(--bg-surface-elevated); | |
| border-radius: var(--radius-sm); | |
| padding: 0.75rem; | |
| text-align: center; | |
| border: 1px dashed rgba(255,255,255,0.06); | |
| } | |
| .stat-label { | |
| display: block; | |
| font-size: 0.75rem; | |
| color: var(--color-text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .stat-value { | |
| display: block; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--color-primary); | |
| margin: 0.1rem 0; | |
| font-family: var(--font-heading); | |
| } | |
| .stat-desc { | |
| font-size: 0.8rem; | |
| color: var(--color-text-secondary); | |
| } | |
| .chart-embed { | |
| flex-grow: 1; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| overflow: hidden; | |
| position: relative; | |
| min-height: 160px; | |
| background-color: #0d121c; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .speedup-img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| .repro-caption { | |
| font-size: 0.75rem; | |
| color: var(--color-text-secondary); | |
| text-align: center; | |
| } | |
| .code-font { | |
| font-family: monospace; | |
| background-color: var(--bg-surface-elevated); | |
| padding: 0.1rem 0.3rem; | |
| border-radius: 3px; | |
| color: var(--color-text-primary); | |
| } | |
| /* ── Gemini Copilot Panel ────────────────────────────────────────── */ | |
| .chat-container { | |
| display: flex; | |
| flex-direction: column; | |
| flex-grow: 1; | |
| padding: 0.75rem; | |
| overflow: hidden; | |
| } | |
| .chat-messages { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| margin-bottom: 0.75rem; | |
| padding-right: 0.25rem; | |
| } | |
| .message { | |
| padding: 0.6rem 0.85rem; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.8rem; | |
| line-height: 1.35; | |
| max-width: 85%; | |
| } | |
| .system-message { | |
| background-color: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-color); | |
| color: var(--color-text-primary); | |
| align-self: flex-start; | |
| } | |
| .user-message { | |
| background-color: var(--color-primary-transparent); | |
| border: 1px solid rgba(0, 229, 255, 0.2); | |
| color: var(--color-primary); | |
| align-self: flex-end; | |
| } | |
| /* Suggestion Chips */ | |
| .suggestion-chips { | |
| display: flex; | |
| gap: 0.4rem; | |
| margin-bottom: 0.75rem; | |
| flex-wrap: wrap; | |
| } | |
| .chip { | |
| background-color: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-color); | |
| color: var(--color-text-secondary); | |
| padding: 0.3rem 0.6rem; | |
| border-radius: 12px; | |
| font-size: 0.7rem; | |
| cursor: pointer; | |
| font-family: var(--font-body); | |
| transition: background-color var(--transition-fast), color var(--transition-fast); | |
| } | |
| .chip:hover { | |
| background-color: var(--color-primary-transparent); | |
| color: var(--color-primary); | |
| border-color: rgba(0, 229, 255, 0.2); | |
| } | |
| .chat-input-area { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| #chat-input { | |
| flex-grow: 1; | |
| background-color: var(--bg-surface-elevated); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| color: var(--color-text-primary); | |
| padding: 0.6rem 0.85rem; | |
| font-family: var(--font-body); | |
| outline: none; | |
| font-size: 0.8rem; | |
| } | |
| #chat-input:focus { | |
| border-color: var(--color-primary); | |
| } | |
| .btn { | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| padding: 0.6rem 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| font-family: var(--font-body); | |
| transition: background-color var(--transition-fast); | |
| font-size: 0.8rem; | |
| } | |
| .btn-primary { | |
| background-color: var(--color-primary); | |
| color: var(--bg-base); | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--color-primary-hover); | |
| } | |
| .btn-primary:disabled { | |
| background-color: var(--color-text-disabled); | |
| cursor: not-allowed; | |
| } | |
| /* Responsive Scaling */ | |
| @media(max-width: 1200px) { | |
| .panel-leaderboard, .panel-chart { | |
| grid-column: span 12; | |
| height: 400px; | |
| } | |
| .panel-decisions, .panel-benchmarks, .panel-chat { | |
| grid-column: span 12; | |
| height: 400px; | |
| } | |
| } | |