* { box-sizing: border-box; } :root { --setup-card-gap: clamp(10px, 1.6vw, 22px); --setup-inner-gap: clamp(10px, 1.2vw, 18px); --blue: #457b9d; --brand: #1d3557; --green: #16a34a; --red: #dc2626; --amber: #b45309; --bg: #fafafa; --surface: #ffffff; --border: #e2e8f0; --hairline: #f1f5f9; --input-border: #cbd5e1; --text: #1a1a1a; --heading: #1d3557; --text-muted: #475569; --text-faint: #64748b; --text-faintest: #94a3b8; --track-bg: #e2e8f0; --table-head-bg: #f1f5f9; --chip-bg: #e2e8f0; --tab-bg: #ffffff; --tab-border: #d8d8d8; --tab-active-tint: #f1faee; --accent-border: #dbeafe; --scene-bg: #f8fbff; --info-bg: #e0f2fe; --info-text: #1d4ed8; --info-border: #93c5fd; --success-bg: #dcfce7; --success-text: #166534; --success-border: #86efac; --danger-bg: #fee2e2; --danger-text: #991b1b; --danger-border: #fca5a5; --warning-bg: #fff7ed; --warning-text: #9a3412; --warning-border: #fed7aa; --alert-bg: #fef3c7; --alert-text: #92400e; --alert-border: #fcd34d; --shadow-sm: rgba(15,23,42,.06); --shadow-md: rgba(15,23,42,.08); --overlay-bg: rgba(248,250,252,.92); } /* Theme resolution happens in a blocking script that sets data-theme before first paint (avoids a flash of the wrong theme); this block only supplies the dark values it switches between. */ :root[data-theme="dark"] { --bg: #0e1524; --surface: #1a2436; --border: #2f3f57; --hairline: #263244; --input-border: #3b4a63; --text: #dbe4f0; --heading: #eef2f8; --text-muted: #a9b7cc; --text-faint: #8695ac; --text-faintest: #6b7995; --track-bg: #2b374a; --table-head-bg: #202b3d; --chip-bg: #2b374a; --tab-bg: #1a2436; --tab-border: #2f3f57; --tab-active-tint: #16281e; --accent-border: #234064; --scene-bg: #0c1424; --info-bg: #17304d; --info-text: #8ec3ff; --info-border: #2c527d; --success-bg: #123322; --success-text: #6fe3a0; --success-border: #1f5c3c; --danger-bg: #3a1620; --danger-text: #ff9caa; --danger-border: #6b2432; --warning-bg: #33220f; --warning-text: #ffb877; --warning-border: #6b4520; --alert-bg: #3a2f0d; --alert-text: #ffd873; --alert-border: #6b551c; --shadow-sm: rgba(0,0,0,.24); --shadow-md: rgba(0,0,0,.32); --overlay-bg: rgba(14,21,36,.92); } body { margin: 0; font-family: Inter, Arial, sans-serif; background: var(--bg); color: var(--text); transition: background .15s ease, color .15s ease; } /* ── Header ── */ header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; background: var(--brand); color: #f1faee; } header h1 { margin: 0; font-size: 26px; } header p { margin: 6px 0 0; color: #b8c6db; font-size: 14px; } .header-controls { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } #lang-select { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #f1faee; border-radius: 8px; padding: 8px 10px; font-size: 14px; font-weight: 600; } #lang-select option { color: #1a1a1a; } .theme-toggle { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #f1faee; width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .theme-toggle:hover { background: rgba(255,255,255,.22); } /* ── Tabs ── */ .tabs { display: flex; background: var(--tab-bg); border-bottom: 1px solid var(--tab-border); } .tab-button { flex: 1; padding: 14px 18px; border: none; background: var(--tab-bg); color: var(--heading); font-size: 16px; cursor: pointer; } .tab-button.active { background: var(--tab-active-tint); border-bottom: 3px solid var(--blue); font-weight: 600; } /* ── Main layout ── */ main { padding: 24px; max-width: 1200px; margin: 0 auto; } .tab-panel { display: none !important; } .tab-panel.active { display: block !important; } /* ── Setup panel ── */ form { display: grid; grid-template-columns: 1fr; gap: var(--setup-inner-gap); } #setup-panel.active { display: grid !important; align-items: start; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: var(--setup-card-gap); } #setup-panel > h2 { grid-column: 1 / -1; margin: 0 0 4px; } #setup-form { align-self: start; justify-items: end; background: var(--surface); border: 1px solid var(--accent-border); border-radius: 12px; box-shadow: 0 8px 22px var(--shadow-md); padding: clamp(14px, 1.5vw, 18px); position: sticky; top: 18px; } .setup-form-header h3 { margin: 0 0 6px; } .setup-form-header p { color: var(--text-muted); font-size: 14px; line-height: 1.45; margin: 0; } label { display: flex; flex-direction: column; gap: 8px; font-weight: 600; cursor: help; } #setup-panel label { align-items: center; display: grid; grid-template-columns: minmax(120px, 1fr) minmax(90px, 50%); column-gap: 12px; text-align: left; } .checkbox-label { align-items: center; background: var(--table-head-bg); border: 1px solid var(--border); border-radius: 8px; flex-direction: row; padding: 10px 12px; } #setup-panel .checkbox-label { align-items: center; display: flex; justify-content: flex-end; } .checkbox-label input { flex: 0 0 auto; height: 18px; width: 18px; } .parameter-list label { width: 100%; } /* ── Accessible parameter tooltips (replace hover-only title=) ── */ .label-text { display: inline-flex; align-items: center; gap: 5px; } .info-anchor { position: relative; } .info-btn { flex: 0 0 auto; width: 16px; height: 16px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--input-border); border-radius: 50%; background: var(--surface); color: var(--text-faint); font-size: 11px; font-weight: 700; line-height: 1; cursor: help; } .info-btn:hover, .info-btn:focus-visible { border-color: var(--blue); color: var(--blue); } .info-tip { position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 6px; width: max-content; max-width: 260px; text-align: left; background: var(--heading); color: #f1faee; font-size: 12px; font-weight: 400; line-height: 1.45; padding: 8px 10px; border-radius: 6px; box-shadow: 0 8px 20px var(--shadow-md); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease; } .info-btn:hover + .info-tip, .info-btn:focus-visible + .info-tip, .info-tip.info-tip-open { opacity: 1; visibility: visible; } .checkbox-label > span { position: relative; } input[type="number"], input[type="range"], select { padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 8px; font-size: 16px; width: 100%; background: var(--surface); color: var(--text); } input[type="range"] { padding-left: 0; padding-right: 0; } #setup-panel input[type="number"], #setup-panel select { text-align: right; width: 100%; } /* Speed scale row */ .speed-row { display: flex; align-items: center; gap: 8px; } .speed-value { font-weight: 700; color: var(--blue); min-width: 28px; text-align: right; font-size: 14px; } .button-row { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; } .visual-actions { grid-column: auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .icon-button { flex: 0 0 auto; padding: 8px 10px; font-size: 16px; line-height: 1; } /* ── Collapsible setup section (adversarial scenario) ── */ .setup-section { width: 100%; justify-self: stretch; border: 1px solid var(--warning-border); border-radius: 8px; background: var(--warning-bg); } .setup-section > summary { cursor: pointer; padding: 10px 12px; font-weight: 700; color: var(--warning-text); list-style: none; } .setup-section > summary::-webkit-details-marker { display: none; } .setup-section > summary::before { content: "▸ "; } .setup-section[open] > summary::before { content: "▾ "; } .setup-section-body { display: grid; gap: var(--setup-inner-gap); padding: 4px 12px 14px; } .setup-section-hint { margin: 0; color: var(--warning-text); font-size: 13px; line-height: 1.4; } .setup-section .checkbox-label { background: var(--surface); } .field-disabled { opacity: .45; } .validation-card { grid-column: 1 / -1; } .validation-card:empty { display: none; } .validation-card .warn { background: var(--alert-bg); border: 1px solid var(--alert-border); color: var(--alert-text); border-radius: 8px; padding: 8px 12px; font-size: 13px; line-height: 1.4; font-weight: 500; } /* CMF panel security subheader */ .cmf-subhead td { padding-top: 12px !important; font-weight: 700; color: var(--warning-text); border-top: 1px solid var(--border); } /* Collapsible "how to read" in dashboards */ .explainer { margin-top: 10px; } .explainer > summary { cursor: pointer; font-weight: 600; color: var(--heading); font-size: 14px; } .explainer .card-description { margin-top: 8px; } button { padding: 12px 20px; border: none; background: var(--blue); color: white; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 600; transition: background .15s; } button:hover { background: #376b8d; } button:disabled { opacity: .5; cursor: not-allowed; } button.running, button.stop-mode { background: #c2410c; } button.running:hover { background: #9a3409; } .secondary-button { background: var(--info-bg); color: var(--info-text); } .secondary-button:hover { filter: brightness(0.94); } .visual-actions .secondary-button { width: auto; } /* Reset sits right next to Start/Stop — give it a visually distinct, less prominent style plus a divider so a mis-click doesn't discard a run. */ .ghost-button { background: transparent; color: var(--text-faint); border: 1px solid var(--input-border); } .ghost-button:hover { background: var(--table-head-bg); color: var(--text-muted); } .button-sep { align-self: stretch; width: 1px; margin: 2px 2px; background: var(--border); } /* ── Cards ── */ .status-card, .parameter-card, .metrics { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: clamp(14px, 1.5vw, 18px); box-shadow: 0 6px 16px var(--shadow-sm); } .parameter-cards { grid-column: 2; display: flex; flex-direction: column; gap: var(--setup-card-gap); min-width: 0; } .card-description { margin: 8px 0 var(--setup-inner-gap); color: var(--text-muted); font-size: 14px; } .parameter-list { justify-items: end; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--setup-inner-gap); } .status-card h3, .parameter-card h3 { margin: 0; color: var(--heading); } /* Advanced cards: collapsed by default, same visual weight as the rest until opened */ .advanced-card > summary { cursor: pointer; list-style: none; } .advanced-card > summary::-webkit-details-marker { display: none; } .advanced-card > summary::before { content: "▸ "; color: var(--blue); font-size: 13px; } .advanced-card[open] > summary::before { content: "▾ "; } .advanced-card > summary h3 { display: inline; } .advanced-card > summary::after { content: attr(data-badge); margin-left: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faintest); } .advanced-card[open] .card-description { margin-top: var(--setup-inner-gap); } /* ── Progress bar (E) ── */ .progress-section { margin-bottom: 14px; } .progress-bar-track { height: 10px; background: var(--track-bg); border-radius: 6px; overflow: hidden; display: flex; } .progress-seg { height: 100%; transition: width .3s ease; } .warmup-seg { background: var(--text-faintest); } .active-seg { background: var(--blue); } .progress-labels { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; font-size: 13px; color: var(--text-faint); } .phase-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; } .phase-badge.warmup { background: var(--track-bg); color: var(--text-muted); } .phase-badge.active { background: var(--info-bg); color: var(--info-text); } .phase-badge.done { background: var(--success-bg); color: var(--success-text); } /* ── Metrics with sparklines (D) ── */ .metrics { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 10px; margin-bottom: 16px; } .metric-item { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; box-shadow: 0 2px 6px var(--shadow-sm); } .metric-item.full-width { grid-column: 1 / -1; } .metric-label { flex: 1; font-size: 13px; color: var(--text-muted); } .metric-value { font-size: 18px; font-weight: 700; color: var(--heading); min-width: 64px; text-align: right; } .metric-value.metric-good { color: var(--green); } .metric-value.metric-warn { color: var(--amber); } .metric-value.metric-bad { color: var(--red); } .sparkline { flex: 0 0 80px; display: block; } /* ── CMF Activity Panel (A) ── */ .visual-status, .visual-cmf, .visual-recommendation { margin-bottom: 14px; } .cmf-panel .cmf-mode-title { margin: 0 0 10px; font-weight: 700; font-size: 15px; color: var(--heading); } .cmf-xapps { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .xapp-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; } .xapp-high { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); } .xapp-blocked { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); } .cmf-table { width: 100%; border-collapse: collapse; font-size: 13px; } .cmf-table td { padding: 4px 6px; border-bottom: 1px solid var(--hairline); } .cmf-table td:first-child { color: var(--text-faint); } .cmf-table td:last-child { font-weight: 600; text-align: right; color: var(--heading); } /* ── Visual header ── */ .visual-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 16px; } .visual-header h2 { margin: 0 0 6px; color: var(--heading); } .visual-header p { margin: 0; font-size: 13px; color: var(--text-faint); } .gpu-status { align-items: center; border: 1px solid var(--input-border); border-radius: 8px; color: var(--text-muted); display: inline-flex; font-size: 13px; font-weight: 700; min-height: 40px; padding: 6px 12px; } /* ── Canvas ── */ .canvas-container { display: flex; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px; box-shadow: 0 6px 16px var(--shadow-sm); margin-bottom: 14px; } .viewport-wrap { position: relative; width: min(100%, 1000px); background: var(--scene-bg); } #scene { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; } #tower-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .fallback-message { position: absolute; inset: 20px; display: grid; place-items: center; border: 1px dashed var(--text-faintest); border-radius: 8px; background: var(--overlay-bg); color: var(--text-muted); text-align: center; padding: 20px; font-weight: 700; } .fallback-message[hidden] { display: none !important; } /* ── Legend ── */ .legend { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; } .legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; } .legend-dot, .dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; } .legend-dot.low, .dot.low { background: green; } .legend-dot.medium, .dot.medium { background: #e6c700; border: 1px solid #a3a300; } .legend-dot.high, .dot.high { background: red; } .dot.vehicle { background: #2563eb; } .dot.pedestrian { background: #dc2626; } .legend-dot.bs, .tower { background: var(--brand); width: 13px; height: 13px; border-radius: 3px; display: inline-block; } /* ── Visual options ── */ .visual-options { margin-top: 14px; } /* ── End-of-run summary (G) ── */ #end-summary-section { margin-top: 18px; } .end-summary-card { background: var(--success-bg); border: 1px solid var(--success-border); border-radius: 10px; padding: 18px; } .end-summary-card h3 { margin: 0 0 12px; color: var(--success-text); } /* ── Comparison section (C, G) ── */ .comparison-section { margin-top: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; box-shadow: 0 4px 12px var(--shadow-sm); } .comparison-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .comparison-header h3 { margin: 0; color: var(--heading); } .comparison-progress { margin-bottom: 14px; } .comparison-progress p { margin: 0 0 8px; font-weight: 600; color: var(--text-muted); } /* Comparison table */ .cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; } .cmp-table thead tr { background: var(--table-head-bg); } .cmp-table th { padding: 8px 12px; text-align: left; font-weight: 700; color: var(--text); border-bottom: 2px solid var(--border); } .cmp-table th:first-child { min-width: 140px; } .cmp-table td { padding: 7px 12px; border-bottom: 1px solid var(--hairline); } .cmp-row-label { color: var(--text-muted); font-weight: 500; } .cmp-arrow { font-size: 12px; font-weight: 700; margin-left: 6px; } .cmp-arrow.good { color: var(--green); } .cmp-arrow.bad { color: var(--red); } .cmp-ref { font-size: 11px; font-weight: 600; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--chip-bg); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } /* ── Responsive ── */ @media (max-width: 900px) { #setup-panel.active { display: block !important; } #setup-form { margin-bottom: var(--setup-card-gap); position: static; justify-items: stretch; } #setup-panel label { align-items: stretch; display: flex; text-align: left; } #setup-panel input[type="number"], #setup-panel select { width: 100%; } #setup-panel .checkbox-label { justify-content: flex-start; } .metrics { grid-template-columns: 1fr; } } @media (max-width: 640px) { header, .visual-header { align-items: flex-start; flex-direction: column; } .header-controls { align-self: stretch; justify-content: flex-end; } .metrics { grid-template-columns: 1fr; } .metric-value { font-size: 16px; } }