Spaces:
Sleeping
Sleeping
| /* Dispatch Arena — dark theme, info-dense, demo-friendly */ | |
| :root { | |
| --bg: #0f1419; | |
| --bg-elev: #161c26; | |
| --bg-card: #1c232f; | |
| --border: #2a3142; | |
| --border-strong: #3a4256; | |
| --text: #dde2ed; | |
| --text-dim: #a4afc7; | |
| --text-faint: #6f7991; | |
| --accent: #5DA9F0; | |
| --accent-warm: #F0B541; | |
| --good: #7CC082; | |
| --bad: #E07560; | |
| --info: #B07ED9; | |
| --easy: #7CC082; | |
| --medium: #F0B541; | |
| --hard: #E07560; | |
| --radius: 8px; | |
| --shadow: 0 2px 12px rgba(0,0,0,0.35); | |
| --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace; | |
| --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| } | |
| * { box-sizing: border-box; } | |
| body, html { margin: 0; padding: 0; height: 100%; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font); | |
| font-size: 13px; | |
| line-height: 1.45; | |
| } | |
| #root { height: 100%; } | |
| .app { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| padding: 14px 18px 90px; | |
| gap: 14px; | |
| } | |
| /* ─── Control bar ──────────────────────────────────────────── */ | |
| .control-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 10px 14px; | |
| background: var(--bg-elev); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| flex-wrap: wrap; | |
| } | |
| .control-bar-left, .control-bar-right { | |
| display: flex; align-items: center; gap: 10px; | |
| } | |
| .brand { | |
| font-weight: 700; | |
| font-size: 14px; | |
| letter-spacing: 0.5px; | |
| margin-right: 6px; | |
| color: var(--accent); | |
| } | |
| .ctrl-select { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| padding: 6px 10px; | |
| border-radius: var(--radius); | |
| font-family: inherit; | |
| font-size: 13px; | |
| cursor: pointer; | |
| } | |
| .ctrl-select:focus { outline: 1px solid var(--accent); } | |
| .ctrl-btn { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| color: var(--text-dim); | |
| padding: 6px 10px; | |
| border-radius: var(--radius); | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| cursor: pointer; | |
| min-width: 32px; | |
| transition: all 0.12s; | |
| } | |
| .ctrl-btn:hover { color: var(--text); border-color: var(--border-strong); } | |
| .ctrl-btn.primary { background: var(--accent); color: #0f1419; border-color: var(--accent); font-weight: 700; } | |
| .ctrl-btn.primary:hover { filter: brightness(1.1); } | |
| .ctrl-btn.active { background: var(--accent); color: #0f1419; border-color: var(--accent); font-weight: 600; } | |
| .ctrl-btn.speed { font-size: 12px; } | |
| .ctrl-divider { | |
| width: 1px; height: 22px; background: var(--border); margin: 0 4px; | |
| } | |
| /* ─── Scenario summary ─────────────────────────────────────── */ | |
| .scenario-summary { | |
| background: var(--bg-elev); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 12px 16px; | |
| } | |
| .scenario-row { | |
| display: flex; align-items: center; gap: 10px; margin-bottom: 6px; | |
| } | |
| .difficulty-badge { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| color: #0f1419; | |
| } | |
| .difficulty-badge.easy { background: var(--easy); } | |
| .difficulty-badge.medium { background: var(--medium); } | |
| .difficulty-badge.hard { background: var(--hard); } | |
| .scenario-meta { | |
| color: var(--text-dim); | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| } | |
| .scenario-skills { | |
| display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; | |
| } | |
| .skill-tag { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| color: var(--text-dim); | |
| font-size: 11px; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| } | |
| .scenario-desc { | |
| color: var(--text-dim); | |
| font-size: 12px; | |
| line-height: 1.5; | |
| } | |
| .action-banner { | |
| background: linear-gradient(180deg, rgba(28, 35, 47, 0.98), rgba(22, 28, 38, 0.98)); | |
| border: 1px solid var(--border); | |
| border-left: 4px solid var(--accent); | |
| border-radius: var(--radius); | |
| padding: 12px 16px; | |
| box-shadow: var(--shadow); | |
| } | |
| .action-banner.phase-thinking { | |
| border-left-color: var(--accent-warm); | |
| } | |
| .action-banner.phase-acting { | |
| border-left-color: var(--accent); | |
| } | |
| .action-banner-status { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| margin-bottom: 4px; | |
| } | |
| .action-banner-line { | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--text); | |
| margin-bottom: 4px; | |
| } | |
| .action-banner-subtext { | |
| color: var(--text-dim); | |
| font-size: 12px; | |
| } | |
| /* ─── Workspace ─────────────────────────────────────────────── */ | |
| .workspace { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 12px; | |
| } | |
| .workspace.compare { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .compare-col { | |
| display: flex; flex-direction: column; gap: 8px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 8px; | |
| background: var(--bg-elev); | |
| } | |
| .compare-label { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-dim); | |
| padding: 4px 8px; | |
| background: var(--bg-card); | |
| border-radius: 4px; | |
| width: fit-content; | |
| } | |
| .compare-label.heuristic { color: var(--accent-warm); } | |
| .compare-label.trained { color: var(--accent); } | |
| .playback-col { | |
| display: grid; | |
| grid-template-columns: 1.6fr 0.95fr; | |
| grid-template-rows: minmax(300px, auto) auto; | |
| gap: 10px; | |
| } | |
| .map-area { | |
| grid-column: 1; | |
| grid-row: 1 / span 2; | |
| position: relative; | |
| background: var(--bg-elev); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| min-height: 360px; | |
| } | |
| .workspace.compare .playback-col { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: minmax(260px, 1fr) auto auto auto; | |
| } | |
| .workspace.compare .map-area { | |
| grid-column: 1; grid-row: 1; | |
| } | |
| .map-svg { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| min-height: 360px; | |
| } | |
| .map-svg.dimmed { opacity: 0.6; } | |
| .map-final-overlay { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(15, 20, 25, 0.84); | |
| backdrop-filter: blur(2px); | |
| } | |
| .node-label { font-family: var(--font); font-weight: 500; } | |
| .courier-group { transition: transform 0.6s ease-out; } | |
| /* ─── Panels (orders, agent feed, reward) ────────────────── */ | |
| .panel { | |
| background: var(--bg-elev); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| } | |
| .panel-header { | |
| padding: 8px 12px; | |
| border-bottom: 1px solid var(--border); | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .panel-meta { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| color: var(--text); | |
| font-weight: 600; | |
| letter-spacing: 0; | |
| text-transform: none; | |
| } | |
| /* orders */ | |
| .orders-panel { grid-column: 2; grid-row: 1; } | |
| .orders-list { | |
| padding: 8px; | |
| display: flex; flex-direction: column; gap: 6px; | |
| overflow-y: auto; | |
| max-height: 360px; | |
| } | |
| .order-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-left: 3px solid var(--text-faint); | |
| border-radius: 6px; | |
| padding: 7px 10px; | |
| font-size: 12px; | |
| } | |
| .order-card.status-queued { border-left-color: #7C8DB5; } | |
| .order-card.status-ready { border-left-color: var(--accent-warm); } | |
| .order-card.status-picked { border-left-color: var(--accent); } | |
| .order-card.status-delivered { border-left-color: var(--good); opacity: 0.75; } | |
| .order-card.status-expired { border-left-color: var(--bad); opacity: 0.6; } | |
| .order-card.urgent { box-shadow: 0 0 0 1px rgba(224, 117, 96, 0.5); } | |
| .order-row1 { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; } | |
| .order-id { font-family: var(--font-mono); font-weight: 600; color: var(--text); } | |
| .order-kind { | |
| font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600; | |
| background: var(--bg-elev); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; | |
| } | |
| .order-kind.kind-food { background: rgba(240, 181, 65, 0.15); color: var(--accent-warm); } | |
| .order-kind.kind-grocery { background: rgba(124, 192, 130, 0.15); color: var(--good); } | |
| .order-status { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } | |
| .order-row2 { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-bottom: 4px; } | |
| .order-row3 { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } | |
| .deadline-urgent { color: var(--bad); font-weight: 600; } | |
| .order-delivered-info { color: var(--good); } | |
| /* agent feed */ | |
| .agent-feed { grid-column: 1; grid-row: 2; min-height: 180px; } | |
| .workspace.compare .agent-feed { grid-row: 3; } | |
| .feed-list { | |
| padding: 6px 8px; | |
| display: flex; flex-direction: column; gap: 2px; | |
| overflow-y: auto; | |
| max-height: 220px; | |
| } | |
| .feed-row { | |
| display: grid; | |
| grid-template-columns: 36px 90px 200px 1fr; | |
| gap: 8px; | |
| padding: 4px 6px; | |
| border-radius: 4px; | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| cursor: pointer; | |
| transition: background 0.12s; | |
| align-items: center; | |
| } | |
| .feed-row:hover { background: var(--bg-card); } | |
| .feed-row.current { background: rgba(93, 169, 240, 0.1); } | |
| .feed-tick { color: var(--text-faint); } | |
| .feed-action { color: var(--accent); font-weight: 600; } | |
| .feed-args { color: var(--text-dim); } | |
| .feed-events { color: var(--text-faint); font-style: italic; } | |
| /* reward */ | |
| .reward-panel { grid-column: 2; grid-row: 2; } | |
| .workspace.compare .reward-panel { grid-row: 4; } | |
| .cumulative-reward { color: var(--good); font-size: 13px; } | |
| .reward-rows { padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; } | |
| .reward-row { | |
| display: grid; | |
| grid-template-columns: 90px 1fr 56px; | |
| gap: 8px; | |
| align-items: center; | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| } | |
| .reward-label { color: var(--text-dim); } | |
| .reward-bar-track { | |
| background: rgba(255,255,255,0.04); | |
| height: 12px; | |
| border-radius: 3px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .reward-bar { display: block; height: 100%; transition: width 0.4s; border-radius: 3px; } | |
| .reward-val { text-align: right; color: var(--text); } | |
| .reward-val.neg { color: var(--bad); } | |
| /* ─── Tick scrubber (sticky bottom) ────────────────────────── */ | |
| .tick-scrubber { | |
| position: fixed; | |
| left: 0; right: 0; bottom: 0; | |
| background: var(--bg-elev); | |
| border-top: 1px solid var(--border); | |
| padding: 10px 18px; | |
| z-index: 50; | |
| } | |
| .tick-meta { | |
| display: flex; justify-content: space-between; | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| color: var(--text-dim); | |
| margin-bottom: 4px; | |
| } | |
| .tick-events { color: var(--accent); } | |
| .tick-slider { | |
| width: 100%; | |
| accent-color: var(--accent); | |
| } | |
| /* ─── Final card ───────────────────────────────────────────── */ | |
| .final-card { | |
| background: var(--bg-elev); | |
| border: 1px solid var(--border-strong); | |
| border-radius: var(--radius); | |
| padding: 22px 32px; | |
| text-align: center; | |
| box-shadow: var(--shadow); | |
| } | |
| .final-header { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| margin-bottom: 14px; | |
| } | |
| .final-stats { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 14px; | |
| } | |
| .stat { padding: 8px 14px; } | |
| .stat-value { | |
| font-size: 24px; | |
| font-weight: 700; | |
| font-family: var(--font-mono); | |
| color: var(--text); | |
| } | |
| .stat-label { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| } | |
| .stat.accent-good .stat-value { color: var(--good); } | |
| .stat.accent-mid .stat-value { color: var(--accent-warm); } | |
| .stat.accent-bad .stat-value { color: var(--bad); } | |
| /* ─── Responsive guardrail ─────────────────────────────────── */ | |
| @media (max-width: 1100px) { | |
| .playback-col { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: minmax(320px, auto) auto auto auto; | |
| } | |
| .orders-panel, .reward-panel, .agent-feed { grid-column: 1; } | |
| .map-area { grid-row: 1; } | |
| .orders-panel { grid-row: 2; } | |
| .reward-panel { grid-row: 3; } | |
| .agent-feed { grid-row: 4; } | |
| } | |