| :root { |
| color-scheme: dark; |
| --bg: #0b0d10; |
| --surface: #11151a; |
| --surface-2: #151b21; |
| --surface-3: #1a222a; |
| --line: #29333d; |
| --line-soft: rgba(137, 151, 164, 0.18); |
| --text: #eef2f5; |
| --muted: #9ba8b5; |
| --faint: #687684; |
| --teal: #62d6c7; |
| --gold: #e9c46a; |
| --blue: #75a7ff; |
| --green: #7bd88f; |
| --red: #f0837c; |
| --shadow: 0 18px 48px rgba(0, 0, 0, 0.28); |
| --radius: 8px; |
| font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html, |
| body { |
| margin: 0; |
| min-height: 100%; |
| background: var(--bg); |
| color: var(--text); |
| } |
|
|
| body { |
| line-height: 1.45; |
| } |
|
|
| body::before { |
| content: ""; |
| position: fixed; |
| inset: 0; |
| pointer-events: none; |
| background: |
| linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px); |
| background-size: 44px 44px; |
| opacity: 0.55; |
| } |
|
|
| button, |
| input, |
| select { |
| font: inherit; |
| } |
|
|
| button { |
| cursor: pointer; |
| } |
|
|
| .app-shell { |
| min-height: 100vh; |
| display: grid; |
| grid-template-columns: 280px minmax(0, 1fr); |
| position: relative; |
| } |
|
|
| .rail { |
| position: sticky; |
| top: 0; |
| height: 100vh; |
| padding: 24px 18px; |
| background: #0f1317; |
| border-right: 1px solid var(--line); |
| display: grid; |
| grid-template-rows: auto auto 1fr; |
| gap: 22px; |
| z-index: 2; |
| } |
|
|
| .brand-block { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .eyebrow { |
| margin: 0; |
| color: var(--teal); |
| font-size: 0.74rem; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| font-weight: 700; |
| } |
|
|
| h1, |
| h2, |
| h3, |
| p { |
| margin: 0; |
| } |
|
|
| h1 { |
| font-size: 1.85rem; |
| line-height: 1.05; |
| letter-spacing: 0; |
| } |
|
|
| h2 { |
| font-size: 1.35rem; |
| line-height: 1.15; |
| letter-spacing: 0; |
| } |
|
|
| h3 { |
| font-size: 1rem; |
| line-height: 1.2; |
| letter-spacing: 0; |
| } |
|
|
| .rail-copy, |
| .muted { |
| color: var(--muted); |
| } |
|
|
| .view-nav { |
| display: grid; |
| gap: 6px; |
| } |
|
|
| .view-button, |
| .ghost-button, |
| .inventory-row, |
| .focus-item, |
| .discovery-row { |
| border: 1px solid transparent; |
| color: var(--text); |
| background: transparent; |
| } |
|
|
| .view-button { |
| width: 100%; |
| text-align: left; |
| border-radius: 6px; |
| padding: 10px 11px; |
| color: var(--muted); |
| } |
|
|
| .view-button:hover, |
| .view-button.active { |
| background: var(--surface-2); |
| border-color: var(--line-soft); |
| color: var(--text); |
| } |
|
|
| .filter-stack { |
| align-self: end; |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .field { |
| display: grid; |
| gap: 6px; |
| color: var(--muted); |
| font-size: 0.82rem; |
| } |
|
|
| .field input, |
| .field select { |
| width: 100%; |
| border: 1px solid var(--line); |
| border-radius: 6px; |
| color: var(--text); |
| background: #0b0f13; |
| padding: 10px 11px; |
| } |
|
|
| .ghost-button { |
| border-color: var(--line); |
| border-radius: 6px; |
| background: var(--surface); |
| padding: 10px 12px; |
| } |
|
|
| .ghost-button:hover { |
| border-color: #41505f; |
| background: var(--surface-2); |
| } |
|
|
| .workspace { |
| min-width: 0; |
| padding: 26px 28px 54px; |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .workspace-head { |
| display: flex; |
| justify-content: space-between; |
| gap: 18px; |
| align-items: flex-start; |
| margin-bottom: 18px; |
| } |
|
|
| .topbar-meta { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: flex-end; |
| gap: 8px; |
| } |
|
|
| .stat-pill, |
| .tag, |
| .status-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 7px; |
| border: 1px solid var(--line); |
| border-radius: 999px; |
| padding: 5px 9px; |
| background: rgba(255, 255, 255, 0.025); |
| color: var(--muted); |
| font-size: 0.78rem; |
| white-space: nowrap; |
| } |
|
|
| .stat-pill strong { |
| color: var(--text); |
| } |
|
|
| .tag { |
| border-radius: 5px; |
| color: var(--text); |
| } |
|
|
| .status-badge { |
| text-transform: capitalize; |
| border-radius: 5px; |
| } |
|
|
| .status-badge.ok { |
| color: var(--green); |
| } |
|
|
| .status-badge.warn { |
| color: var(--gold); |
| } |
|
|
| .status-badge.bad { |
| color: var(--red); |
| } |
|
|
| .content-region { |
| min-width: 0; |
| } |
|
|
| .view-stack { |
| display: grid; |
| gap: 18px; |
| } |
|
|
| .section-header { |
| display: flex; |
| justify-content: space-between; |
| gap: 16px; |
| align-items: end; |
| } |
|
|
| .section-header .stack { |
| gap: 5px; |
| } |
|
|
| .harness-overview, |
| .usage-grid { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 14px; |
| } |
|
|
| .harness-tile, |
| .usage-panel, |
| .focus-panel, |
| .panel-section, |
| .privacy-panel, |
| .source-group, |
| .empty-state, |
| .detail-dialog { |
| border: 1px solid var(--line); |
| background: linear-gradient(180deg, rgba(22, 28, 34, 0.96), rgba(14, 18, 23, 0.98)); |
| box-shadow: var(--shadow); |
| border-radius: var(--radius); |
| } |
|
|
| .harness-tile, |
| .usage-panel, |
| .focus-panel, |
| .panel-section, |
| .privacy-panel, |
| .source-group, |
| .empty-state { |
| padding: 16px; |
| } |
|
|
| .harness-tile { |
| border-top: 3px solid var(--blue); |
| } |
|
|
| .harness-tile.codex, |
| .usage-panel.codex { |
| border-top-color: var(--teal); |
| } |
|
|
| .harness-tile.claude-code, |
| .usage-panel.claude-code { |
| border-top-color: var(--gold); |
| } |
|
|
| .harness-tile.hermes, |
| .usage-panel.hermes { |
| border-top-color: var(--green); |
| } |
|
|
| .row { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 12px; |
| } |
|
|
| .stack { |
| display: grid; |
| gap: 8px; |
| min-width: 0; |
| } |
|
|
| .metric-strip { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); |
| gap: 8px; |
| } |
|
|
| .metric { |
| border: 1px solid var(--line-soft); |
| border-radius: 6px; |
| padding: 9px 10px; |
| background: rgba(255, 255, 255, 0.024); |
| min-width: 0; |
| } |
|
|
| .metric-label { |
| display: block; |
| color: var(--muted); |
| font-size: 0.74rem; |
| } |
|
|
| .metric-value { |
| display: block; |
| margin-top: 3px; |
| font-size: 1.08rem; |
| font-weight: 700; |
| overflow-wrap: anywhere; |
| } |
|
|
| .insight-line { |
| min-height: 58px; |
| display: grid; |
| grid-template-columns: auto minmax(0, 1fr); |
| align-items: start; |
| gap: 8px; |
| color: var(--muted); |
| font-size: 0.88rem; |
| } |
|
|
| .focus-panel { |
| display: grid; |
| gap: 14px; |
| } |
|
|
| .focus-list, |
| .discovery-list, |
| .inventory-list, |
| .source-list { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .focus-list { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .focus-item, |
| .discovery-row, |
| .inventory-row { |
| width: 100%; |
| text-align: left; |
| border-color: var(--line-soft); |
| border-radius: 7px; |
| background: rgba(255, 255, 255, 0.02); |
| } |
|
|
| .focus-item { |
| display: grid; |
| grid-template-columns: 34px minmax(0, 1fr); |
| gap: 12px; |
| padding: 10px; |
| } |
|
|
| .focus-item:hover, |
| .discovery-row:hover, |
| .inventory-row:hover { |
| border-color: #4d5f71; |
| background: rgba(255, 255, 255, 0.045); |
| } |
|
|
| .rank { |
| width: 28px; |
| height: 28px; |
| display: grid; |
| place-items: center; |
| border-radius: 6px; |
| background: #202a33; |
| color: var(--teal); |
| font-weight: 800; |
| } |
|
|
| .table-wrap { |
| overflow-x: auto; |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| } |
|
|
| table { |
| width: 100%; |
| border-collapse: collapse; |
| background: #0e1216; |
| } |
|
|
| th, |
| td { |
| padding: 12px 13px; |
| text-align: left; |
| vertical-align: top; |
| border-bottom: 1px solid var(--line-soft); |
| } |
|
|
| th { |
| color: var(--muted); |
| font-size: 0.78rem; |
| background: #151b21; |
| } |
|
|
| td .muted { |
| margin-top: 3px; |
| font-size: 0.82rem; |
| } |
|
|
| .data-block { |
| display: grid; |
| gap: 9px; |
| border-top: 1px solid var(--line-soft); |
| padding-top: 12px; |
| } |
|
|
| .bar-row, |
| .kv-row { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) auto; |
| gap: 12px; |
| color: var(--muted); |
| font-size: 0.84rem; |
| } |
|
|
| .bar-value, |
| .kv-value { |
| color: var(--text); |
| overflow-wrap: anywhere; |
| } |
|
|
| .bar-meter { |
| height: 5px; |
| border-radius: 999px; |
| overflow: hidden; |
| background: #222b34; |
| } |
|
|
| .bar-meter span { |
| display: block; |
| height: 100%; |
| border-radius: inherit; |
| background: linear-gradient(90deg, var(--teal), var(--gold)); |
| } |
|
|
| .inventory-row { |
| display: grid; |
| grid-template-columns: 112px minmax(220px, 0.65fr) minmax(260px, 1fr); |
| gap: 14px; |
| align-items: start; |
| padding: 12px; |
| } |
|
|
| .row-summary { |
| color: var(--muted); |
| overflow-wrap: anywhere; |
| } |
|
|
| .discovery-row { |
| display: grid; |
| grid-template-columns: 38px minmax(0, 1fr) auto; |
| gap: 14px; |
| align-items: start; |
| padding: 13px; |
| } |
|
|
| .privacy-panel { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .source-group { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .source-list { |
| border-top: 1px solid var(--line-soft); |
| padding-top: 10px; |
| } |
|
|
| .detail-dialog { |
| width: min(860px, calc(100vw - 24px)); |
| color: var(--text); |
| padding: 0; |
| } |
|
|
| .detail-dialog::backdrop { |
| background: rgba(0, 0, 0, 0.68); |
| backdrop-filter: blur(3px); |
| } |
|
|
| .dialog-header { |
| display: flex; |
| justify-content: space-between; |
| gap: 16px; |
| padding: 18px 18px 0; |
| } |
|
|
| .dialog-body { |
| padding: 18px; |
| display: grid; |
| gap: 14px; |
| } |
|
|
| .detail-summary { |
| color: var(--muted); |
| } |
|
|
| .detail-meta { |
| display: grid; |
| grid-template-columns: 140px minmax(0, 1fr); |
| gap: 8px 12px; |
| margin: 0; |
| } |
|
|
| .detail-meta dt { |
| color: var(--muted); |
| } |
|
|
| .detail-meta dd { |
| margin: 0; |
| overflow-wrap: anywhere; |
| } |
|
|
| .snapshot-details { |
| border-top: 1px solid var(--line-soft); |
| padding-top: 12px; |
| } |
|
|
| .snapshot-details summary { |
| color: var(--muted); |
| cursor: pointer; |
| } |
|
|
| .code-block { |
| max-height: 360px; |
| overflow: auto; |
| margin: 10px 0 0; |
| padding: 12px; |
| border: 1px solid var(--line); |
| border-radius: 6px; |
| background: #090c0f; |
| color: #dce5ec; |
| white-space: pre-wrap; |
| overflow-wrap: anywhere; |
| } |
|
|
| @media (max-width: 1180px) { |
| .app-shell { |
| grid-template-columns: 1fr; |
| } |
|
|
| .rail { |
| position: relative; |
| height: auto; |
| grid-template-columns: 1fr; |
| } |
|
|
| .view-nav { |
| grid-template-columns: repeat(5, minmax(0, 1fr)); |
| } |
|
|
| .filter-stack { |
| align-self: auto; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| } |
|
|
| .harness-overview, |
| .usage-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| @media (max-width: 760px) { |
| .workspace { |
| padding: 18px 14px 42px; |
| } |
|
|
| .workspace-head, |
| .row, |
| .dialog-header { |
| display: grid; |
| } |
|
|
| .topbar-meta, |
| .view-nav, |
| .filter-stack, |
| .focus-list, |
| .privacy-panel { |
| grid-template-columns: 1fr; |
| justify-content: start; |
| } |
|
|
| .inventory-row, |
| .discovery-row { |
| grid-template-columns: 1fr; |
| } |
|
|
| .detail-meta { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
