| :root { |
| color-scheme: dark; |
| --bg: #090b11; |
| --panel: #11141d; |
| --panel-2: #171b26; |
| --panel-3: #1d2230; |
| --border: #2a3040; |
| --border-strong: #3a4357; |
| --text: #e8ebf2; |
| --muted: #99a2b3; |
| --purple: #a78bfa; |
| --purple-dark: #6d4ac7; |
| --blue: #60a5fa; |
| --green: #34d399; |
| --amber: #fbbf24; |
| --rose: #fb7185; |
| --red: #f87171; |
| --sidebar: 320px; |
| } |
|
|
| * { box-sizing: border-box; } |
|
|
| html, body { |
| min-height: 100%; |
| margin: 0; |
| background: var(--bg); |
| color: var(--text); |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| } |
|
|
| button, input, select { font: inherit; } |
| button, select { cursor: pointer; } |
| button:disabled { cursor: not-allowed; opacity: .45; } |
|
|
| .app-shell { |
| display: grid; |
| grid-template-columns: var(--sidebar) minmax(0, 1fr); |
| min-height: 100vh; |
| } |
|
|
| .sidebar { |
| position: sticky; |
| top: 0; |
| height: 100vh; |
| overflow-y: auto; |
| padding: 24px 20px; |
| border-right: 1px solid var(--border); |
| background: |
| radial-gradient(circle at top left, rgba(124, 58, 237, .16), transparent 34%), |
| #0d1017; |
| } |
|
|
| .brand { margin-bottom: 20px; } |
| .brand h1 { margin: 5px 0 7px; font-size: 23px; line-height: 1.2; } |
| .brand p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; } |
| .eyebrow { |
| color: var(--purple); |
| font-size: 10px; |
| font-weight: 800; |
| letter-spacing: .11em; |
| text-transform: uppercase; |
| } |
|
|
| .main-tabs { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 7px; |
| margin-bottom: 16px; |
| } |
|
|
| .main-tabs button, |
| .subtabs button, |
| .nav-row button { |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| background: var(--panel-2); |
| color: var(--muted); |
| padding: 8px 10px; |
| } |
|
|
| .main-tabs button:last-child { grid-column: 1 / -1; } |
| .main-tabs button:hover, |
| .subtabs button:hover, |
| .nav-row button:hover { border-color: var(--border-strong); color: var(--text); } |
| .main-tabs button.active { |
| border-color: var(--purple-dark); |
| background: rgba(124, 58, 237, .17); |
| color: #ddd6fe; |
| } |
|
|
| .scope-card { |
| margin-bottom: 18px; |
| padding: 11px 12px; |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| background: rgba(17, 20, 29, .8); |
| color: var(--muted); |
| font-size: 11px; |
| line-height: 1.55; |
| } |
|
|
| .scope-card b { color: var(--text); } |
| .scope-card code { color: #c4b5fd; overflow-wrap: anywhere; } |
|
|
| .controls { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
|
|
| .controls[hidden], .view[hidden] { display: none !important; } |
|
|
| .controls label { |
| display: flex; |
| flex-direction: column; |
| gap: 5px; |
| } |
|
|
| .controls label > span { |
| color: var(--muted); |
| font-size: 10px; |
| font-weight: 750; |
| letter-spacing: .06em; |
| text-transform: uppercase; |
| } |
|
|
| input, select { |
| width: 100%; |
| min-width: 0; |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| outline: none; |
| background: #0b0e14; |
| color: var(--text); |
| padding: 8px 9px; |
| font-size: 12px; |
| } |
|
|
| input:focus, select:focus { border-color: var(--purple-dark); } |
| select { text-overflow: ellipsis; } |
|
|
| .filter-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 8px; |
| } |
|
|
| .nav-row { |
| display: grid; |
| grid-template-columns: 1fr auto 1fr; |
| align-items: center; |
| gap: 7px; |
| } |
|
|
| .nav-row span { |
| min-width: 62px; |
| color: var(--muted); |
| text-align: center; |
| font-size: 11px; |
| } |
|
|
| .subtabs { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 7px; |
| } |
|
|
| .subtabs button.active { |
| border-color: #2563eb; |
| background: rgba(37, 99, 235, .16); |
| color: #bfdbfe; |
| } |
|
|
| #sidebarFooter { |
| margin-top: 22px; |
| padding-top: 14px; |
| border-top: 1px solid var(--border); |
| color: var(--muted); |
| font-size: 10px; |
| line-height: 1.55; |
| } |
|
|
| .main { |
| min-width: 0; |
| padding: 30px clamp(20px, 4vw, 64px) 60px; |
| } |
|
|
| .view { width: min(1180px, 100%); margin: 0 auto; } |
| .loading, .empty-state { |
| padding: 44px 20px; |
| color: var(--muted); |
| text-align: center; |
| } |
|
|
| .card { |
| margin-bottom: 14px; |
| border: 1px solid var(--border); |
| border-radius: 13px; |
| background: var(--panel); |
| overflow: hidden; |
| } |
|
|
| .card-body { padding: 20px 22px; } |
| .card h2, .card h3 { margin: 0; line-height: 1.45; } |
| .card h2 { font-size: 21px; } |
| .card h3 { font-size: 15px; } |
|
|
| .section-heading { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 16px; |
| margin-bottom: 13px; |
| } |
|
|
| .section-heading h2, .section-heading h3 { margin: 3px 0 0; } |
| .count-pill, .pill, .badge, .status { |
| display: inline-flex; |
| align-items: center; |
| border: 1px solid var(--border-strong); |
| border-radius: 999px; |
| padding: 3px 8px; |
| background: var(--panel-3); |
| color: var(--muted); |
| font-size: 10px; |
| line-height: 1.3; |
| } |
|
|
| .badges, .pills, .metric-grid { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 7px; |
| } |
|
|
| .badges { margin-bottom: 12px; } |
| .badge.qid { color: #c4b5fd; border-color: #5b4890; } |
| .badge.diff { color: #fde68a; border-color: #66521d; } |
| .badge.type { color: #bfdbfe; border-color: #294d78; } |
|
|
| .gold-block { |
| margin: 13px 0; |
| padding: 10px 11px; |
| border: 1px solid #624d16; |
| border-radius: 9px; |
| background: rgba(120, 82, 11, .14); |
| } |
|
|
| .gold-label { |
| margin-bottom: 7px; |
| color: var(--amber); |
| font-size: 10px; |
| font-weight: 800; |
| letter-spacing: .08em; |
| text-transform: uppercase; |
| } |
|
|
| .gold-items { display: flex; flex-wrap: wrap; gap: 6px; } |
| .gold-item { |
| border: 1px solid #70591c; |
| border-radius: 999px; |
| padding: 3px 9px; |
| background: #211b0d; |
| color: #fde68a; |
| font-size: 11px; |
| } |
|
|
| a.gold-item { cursor: pointer; text-decoration: none; } |
| a.gold-item:hover { border-color: var(--amber); color: #fff3bd; } |
|
|
| .field { |
| margin-top: 12px; |
| padding-top: 12px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .field-label { |
| margin-bottom: 6px; |
| color: var(--muted); |
| font-size: 10px; |
| font-weight: 800; |
| letter-spacing: .07em; |
| text-transform: uppercase; |
| } |
|
|
| .field-value { color: var(--text); font-size: 13px; line-height: 1.6; } |
| .muted { color: var(--muted); } |
|
|
| pre { |
| max-width: 100%; |
| margin: 0; |
| border: 1px solid #252b38; |
| border-radius: 8px; |
| background: #0b0e14; |
| color: #d8dee9; |
| padding: 11px 12px; |
| white-space: pre-wrap; |
| overflow-wrap: anywhere; |
| overflow: auto; |
| font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
| } |
|
|
| .document-card { border-top: 3px solid var(--purple-dark); } |
| .document-content { padding: 10px 24px 26px; line-height: 1.65; } |
| .document-content h1, .document-content h2, .document-content h3 { |
| margin-top: 1.35em; |
| color: #ddd6fe; |
| } |
| .document-content a { color: #93c5fd; } |
| .document-content table { display: block; max-width: 100%; overflow: auto; border-collapse: collapse; } |
| .document-content th, .document-content td { border: 1px solid var(--border); padding: 6px 8px; } |
|
|
| .metric-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); |
| margin-bottom: 14px; |
| } |
|
|
| .metric { |
| min-width: 0; |
| padding: 12px 13px; |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| background: var(--panel); |
| } |
|
|
| .metric-label { |
| color: var(--muted); |
| font-size: 9px; |
| font-weight: 800; |
| letter-spacing: .08em; |
| text-transform: uppercase; |
| } |
|
|
| .metric-value { margin-top: 4px; font-size: 19px; font-weight: 750; } |
| .metric-note { margin-top: 3px; color: var(--muted); font-size: 10px; } |
|
|
| .status.correct { color: #a7f3d0; border-color: #247657; background: rgba(16, 185, 129, .1); } |
| .status.partial { color: #fde68a; border-color: #755b16; background: rgba(245, 158, 11, .1); } |
| .status.incorrect { color: #fecaca; border-color: #7f3030; background: rgba(239, 68, 68, .1); } |
| .status.missing { color: #cbd5e1; border-color: #4b5563; } |
|
|
| .prediction { |
| border-left: 3px solid var(--run-accent, var(--purple)); |
| background: rgba(13, 16, 24, .95); |
| } |
|
|
| .ops-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); |
| gap: 9px; |
| margin-top: 12px; |
| } |
|
|
| .ops-item { |
| padding: 10px; |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| background: var(--panel-2); |
| } |
|
|
| .ops-item b { |
| display: block; |
| margin-bottom: 5px; |
| color: var(--muted); |
| font-size: 9px; |
| letter-spacing: .07em; |
| text-transform: uppercase; |
| } |
|
|
| .ops-item code { color: #c4b5fd; font-size: 11px; overflow-wrap: anywhere; } |
|
|
| .structure-summary { |
| margin-bottom: 14px; |
| border-top: 3px solid var(--rose); |
| } |
|
|
| .structure-doc { |
| margin-bottom: 12px; |
| border: 1px solid var(--border); |
| border-radius: 11px; |
| background: var(--panel); |
| overflow: hidden; |
| } |
|
|
| .structure-doc > summary, |
| .structure-shape > summary, |
| .source-text > summary { |
| cursor: pointer; |
| display: flex; |
| justify-content: space-between; |
| gap: 12px; |
| align-items: center; |
| } |
|
|
| .structure-doc > summary { padding: 13px 15px; color: #fda4af; font-weight: 700; } |
| .structure-doc > summary span:last-child { color: var(--muted); font-size: 10px; } |
| .structure-body { padding: 0 15px 14px; } |
| .source-ids { margin: 0 0 10px; color: var(--muted); font-size: 11px; line-height: 1.7; } |
| .source-ids code { color: var(--text); } |
|
|
| .structure-shape, .source-text { |
| margin: 9px 0; |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| background: var(--panel-2); |
| overflow: hidden; |
| } |
|
|
| .structure-shape > summary, .source-text > summary { padding: 9px 11px; } |
| .structure-shape > summary b { color: #fda4af; font-size: 11px; } |
| .structure-shape > summary code { color: var(--muted); font-size: 10px; } |
| .shape-description { padding: 0 11px 9px; color: var(--muted); font-size: 11px; } |
| .structure-shape pre, .source-text pre { max-height: 560px; border: 0; border-radius: 0; } |
|
|
| .trajectory { margin-top: 14px; } |
| .trajectory-steps { display: flex; flex-direction: column; gap: 9px; } |
| .trajectory-step { |
| border: 1px solid var(--border); |
| border-radius: 9px; |
| background: var(--panel); |
| padding: 10px; |
| } |
|
|
| .trajectory-step header { |
| display: flex; |
| align-items: center; |
| gap: 7px; |
| margin-bottom: 7px; |
| } |
|
|
| .step-number, .step-kind { |
| color: var(--muted); |
| font-size: 9px; |
| font-weight: 800; |
| letter-spacing: .07em; |
| text-transform: uppercase; |
| } |
|
|
| .trajectory-step header code { |
| border: 1px solid #4c3b75; |
| border-radius: 5px; |
| padding: 2px 7px; |
| color: #c4b5fd; |
| background: #211d2d; |
| font-size: 10px; |
| } |
|
|
| .tool-bash header code { color: #a7f3d0; border-color: #25674f; } |
| .tool-python header code { color: #c7d2fe; border-color: #434cb3; } |
| .step-label { |
| margin: 7px 0 4px; |
| color: var(--muted); |
| font-size: 9px; |
| font-weight: 800; |
| letter-spacing: .07em; |
| text-transform: uppercase; |
| } |
|
|
| .model-message { |
| border-left: 2px solid #516078; |
| border-radius: 5px; |
| background: var(--panel-2); |
| padding: 9px 10px; |
| white-space: pre-wrap; |
| line-height: 1.55; |
| font-size: 12px; |
| } |
|
|
| .tool-output.collapsed pre { |
| max-height: 10em; |
| overflow: hidden; |
| mask-image: linear-gradient(to bottom, #000 65%, transparent); |
| } |
|
|
| .output-toggle { |
| margin-top: 6px; |
| border: 1px solid #365276; |
| border-radius: 6px; |
| background: #172338; |
| color: #93c5fd; |
| padding: 4px 9px; |
| font-size: 10px; |
| } |
|
|
| .compare-scores { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); |
| gap: 9px; |
| margin-bottom: 14px; |
| } |
|
|
| .compare-score { |
| border: 1px solid var(--border); |
| border-top: 3px solid var(--run-accent, var(--purple)); |
| border-radius: 10px; |
| background: var(--panel); |
| padding: 11px 12px; |
| } |
|
|
| .compare-score h3 { margin: 0 0 5px; font-size: 12px; } |
| .compare-score strong { font-size: 18px; } |
| .compare-score span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; } |
| .compare-run { border-left: 3px solid var(--run-accent, var(--purple)); } |
|
|
| @media (max-width: 860px) { |
| .app-shell { display: block; } |
| .sidebar { position: static; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--border); } |
| .main { padding: 24px 16px 50px; } |
| .main-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); } |
| .main-tabs button:last-child { grid-column: auto; } |
| } |
|
|
| @media (max-width: 560px) { |
| .main-tabs { grid-template-columns: repeat(2, 1fr); } |
| .main-tabs button:last-child { grid-column: 1 / -1; } |
| .section-heading { flex-direction: column; } |
| .metric-grid, .compare-scores { grid-template-columns: 1fr; } |
| } |
|
|
