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: | |
| radial-gradient(circle at top left, rgba(93, 169, 240, 0.12), transparent 34%), | |
| radial-gradient(circle at top right, rgba(124, 192, 130, 0.08), transparent 28%), | |
| linear-gradient(180deg, #0b1118 0%, #0f1419 100%); | |
| 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; | |
| } | |
| .app.view-overview { | |
| padding-bottom: 18px; | |
| } | |
| /* ─── Overview landing page ─────────────────────────────────── */ | |
| .overview-shell { | |
| display: grid; | |
| grid-template-columns: 280px minmax(0, 1fr); | |
| gap: 18px; | |
| min-height: calc(100vh - 36px); | |
| } | |
| .overview-sidebar, | |
| .hero-panel, | |
| .overview-card, | |
| .playground-header { | |
| background: rgba(22, 28, 38, 0.86); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(58, 66, 86, 0.88); | |
| box-shadow: var(--shadow); | |
| } | |
| .overview-sidebar { | |
| border-radius: 22px; | |
| padding: 20px 18px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| .overview-sidebar-brand { | |
| padding-bottom: 16px; | |
| border-bottom: 1px solid rgba(255,255,255,0.06); | |
| } | |
| .overview-brand-title { | |
| font-size: 24px; | |
| font-weight: 800; | |
| line-height: 1.05; | |
| letter-spacing: -0.03em; | |
| } | |
| .overview-brand-subtitle, | |
| .overview-label, | |
| .overview-card-eyebrow, | |
| .hero-badge, | |
| .playground-subtitle { | |
| color: var(--text-faint); | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| } | |
| .overview-sidebar-section { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .overview-select { | |
| width: 100%; | |
| background: rgba(255,255,255,0.04); | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| padding: 10px 12px; | |
| border-radius: 14px; | |
| font-family: inherit; | |
| font-size: 13px; | |
| } | |
| .mode-stack { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .mode-card { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| width: 100%; | |
| padding: 11px 12px; | |
| background: rgba(255,255,255,0.035); | |
| border: 1px solid rgba(255,255,255,0.06); | |
| border-radius: 14px; | |
| color: var(--text-dim); | |
| cursor: pointer; | |
| text-align: left; | |
| transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; | |
| } | |
| .mode-card:hover, | |
| .mode-card.selected { | |
| border-color: rgba(93, 169, 240, 0.55); | |
| background: rgba(93, 169, 240, 0.08); | |
| color: var(--text); | |
| } | |
| .mode-card.selected { | |
| transform: translateY(-1px); | |
| } | |
| .mode-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 999px; | |
| flex: 0 0 auto; | |
| } | |
| .mode-dot.trained { background: var(--good); } | |
| .mode-dot.heuristic { background: var(--accent); } | |
| .mode-dot.baseline { background: var(--accent-warm); } | |
| .overview-actions { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| margin-top: auto; | |
| } | |
| .launch-btn, | |
| .back-btn { | |
| border: 1px solid rgba(255,255,255,0.08); | |
| background: rgba(255,255,255,0.04); | |
| color: var(--text); | |
| padding: 12px 14px; | |
| border-radius: 14px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: transform 0.15s ease, border-color 0.15s ease, filter 0.15s ease; | |
| } | |
| .launch-btn:hover, | |
| .back-btn:hover { | |
| transform: translateY(-1px); | |
| border-color: rgba(255,255,255,0.16); | |
| } | |
| .launch-btn.primary { | |
| background: linear-gradient(135deg, var(--accent) 0%, #7ec4ff 100%); | |
| border-color: rgba(126, 196, 255, 0.35); | |
| color: #0c1520; | |
| } | |
| .launch-btn.full { | |
| width: 100%; | |
| margin-top: 14px; | |
| } | |
| .overview-note { | |
| color: var(--text-dim); | |
| background: rgba(255,255,255,0.035); | |
| border: 1px solid rgba(255,255,255,0.05); | |
| border-radius: 16px; | |
| padding: 12px; | |
| line-height: 1.6; | |
| } | |
| .overview-main { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| .hero-panel { | |
| border-radius: 26px; | |
| padding: 28px 28px 24px; | |
| } | |
| .hero-panel h1 { | |
| margin: 8px 0 10px; | |
| font-size: clamp(34px, 4vw, 52px); | |
| line-height: 1.02; | |
| letter-spacing: -0.04em; | |
| max-width: 820px; | |
| } | |
| .hero-panel p { | |
| margin: 0; | |
| max-width: 760px; | |
| color: var(--text-dim); | |
| font-size: 15px; | |
| line-height: 1.7; | |
| } | |
| .hero-pills { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-top: 18px; | |
| } | |
| .hero-pill, | |
| .endpoint-pill { | |
| border-radius: 999px; | |
| padding: 8px 12px; | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| border: 1px solid rgba(255,255,255,0.08); | |
| } | |
| .hero-pill.easy { background: rgba(124, 192, 130, 0.16); color: var(--good); } | |
| .hero-pill.medium { background: rgba(240, 181, 65, 0.16); color: var(--accent-warm); } | |
| .hero-pill.hard { background: rgba(224, 117, 96, 0.16); color: var(--bad); } | |
| .hero-pill.neutral { background: rgba(255,255,255,0.045); color: var(--text-dim); } | |
| .hero-pill.accent { background: rgba(93, 169, 240, 0.16); color: var(--accent); } | |
| .overview-grid { | |
| display: grid; | |
| grid-template-columns: 1.5fr 1fr 1fr; | |
| gap: 18px; | |
| } | |
| .overview-card { | |
| border-radius: 24px; | |
| padding: 18px; | |
| min-height: 220px; | |
| } | |
| .overview-card.tall { | |
| grid-row: span 2; | |
| } | |
| .overview-card-title { | |
| font-size: 20px; | |
| font-weight: 700; | |
| margin-bottom: 2px; | |
| } | |
| .overview-card-eyebrow { | |
| margin-bottom: 16px; | |
| } | |
| .overview-card-body { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .overview-map-frame { | |
| border-radius: 20px; | |
| overflow: hidden; | |
| border: 1px solid rgba(255,255,255,0.06); | |
| background: rgba(8, 12, 18, 0.7); | |
| min-height: 360px; | |
| } | |
| .overview-map-frame .scenario-map { | |
| min-height: 360px; | |
| } | |
| .overview-inline-stats { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| .overview-inline-stat { | |
| background: rgba(255,255,255,0.035); | |
| border: 1px solid rgba(255,255,255,0.05); | |
| border-radius: 16px; | |
| padding: 12px; | |
| } | |
| .overview-inline-label { | |
| display: block; | |
| color: var(--text-faint); | |
| font-size: 11px; | |
| margin-bottom: 6px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .overview-inline-stat strong { | |
| font-size: 24px; | |
| font-family: var(--font-mono); | |
| } | |
| .metric-bar-row { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .metric-bar-header { | |
| display: flex; | |
| justify-content: space-between; | |
| color: var(--text-dim); | |
| } | |
| .metric-bar-track { | |
| height: 10px; | |
| border-radius: 999px; | |
| background: rgba(255,255,255,0.06); | |
| overflow: hidden; | |
| } | |
| .metric-bar-fill { | |
| height: 100%; | |
| border-radius: 999px; | |
| } | |
| .metric-bar-fill.good { background: linear-gradient(90deg, #5dbe82 0%, #7cc082 100%); } | |
| .metric-bar-fill.bad { background: linear-gradient(90deg, #f08a74 0%, #e07560 100%); } | |
| .metric-bar-fill.accent { background: linear-gradient(90deg, #5da9f0 0%, #88c7ff 100%); } | |
| .analytics-reward { | |
| margin-top: 4px; | |
| padding: 14px; | |
| border-radius: 16px; | |
| background: rgba(93, 169, 240, 0.08); | |
| border: 1px solid rgba(93, 169, 240, 0.16); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .analytics-reward strong { | |
| font-size: 24px; | |
| font-family: var(--font-mono); | |
| color: var(--accent); | |
| } | |
| .constraint-list { | |
| margin: 0; | |
| padding-left: 18px; | |
| color: var(--text-dim); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .endpoint-grid { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .endpoint-pill { | |
| background: rgba(255,255,255,0.04); | |
| color: var(--text-dim); | |
| } | |
| .contract-copy { | |
| color: var(--text-dim); | |
| line-height: 1.65; | |
| } | |
| .playground-header { | |
| border-radius: 20px; | |
| padding: 14px 16px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .playground-title { | |
| font-size: 20px; | |
| font-weight: 700; | |
| } | |
| /* ─── 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; | |
| } | |
| .panel-empty { | |
| padding: 18px 14px; | |
| color: var(--text-dim); | |
| line-height: 1.6; | |
| font-size: 12px; | |
| } | |
| /* 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) { | |
| .overview-shell { | |
| grid-template-columns: 1fr; | |
| } | |
| .overview-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .overview-card.tall { | |
| grid-row: auto; | |
| } | |
| .overview-map-frame, | |
| .overview-map-frame .scenario-map { | |
| min-height: 320px; | |
| } | |
| .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; } | |
| } | |
| @media (max-width: 720px) { | |
| .app { | |
| padding: 12px 12px 90px; | |
| } | |
| .hero-panel, | |
| .overview-card, | |
| .overview-sidebar { | |
| border-radius: 18px; | |
| } | |
| .hero-panel { | |
| padding: 20px; | |
| } | |
| .hero-panel h1 { | |
| font-size: 32px; | |
| } | |
| .overview-inline-stats { | |
| grid-template-columns: 1fr; | |
| } | |
| .control-bar, | |
| .playground-header { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .control-bar-left, | |
| .control-bar-right { | |
| width: 100%; | |
| flex-wrap: wrap; | |
| } | |
| } | |