| :root { |
| color-scheme: dark; |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| background: #111318; |
| color: #edf1f7; |
| font-synthesis: none; |
| text-rendering: optimizeLegibility; |
| } |
|
|
| * { box-sizing: border-box; } |
|
|
| body { |
| margin: 0; |
| min-width: 320px; |
| background: #111318; |
| } |
|
|
| button { font: inherit; } |
|
|
| .app-shell { |
| width: min(1480px, calc(100vw - 32px)); |
| margin: 0 auto; |
| padding: 24px 0 36px; |
| } |
|
|
| .topbar { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| margin-bottom: 20px; |
| } |
|
|
| .eyebrow { |
| margin: 0 0 4px; |
| color: #9aa8bb; |
| font-size: 0.78rem; |
| font-weight: 700; |
| letter-spacing: 0; |
| text-transform: uppercase; |
| } |
|
|
| h1, h2, p { margin: 0; } |
|
|
| h1 { |
| font-size: clamp(1.7rem, 3vw, 2.35rem); |
| line-height: 1.05; |
| letter-spacing: 0; |
| } |
|
|
| .refresh-button, |
| .session-card__actions button { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 7px; |
| min-height: 36px; |
| border: 1px solid #303847; |
| border-radius: 7px; |
| background: #191d25; |
| color: #edf1f7; |
| cursor: pointer; |
| } |
|
|
| .refresh-button { padding: 0 14px; } |
|
|
| .session-card__actions button { |
| width: 100%; |
| padding: 0 10px; |
| } |
|
|
| .session-card__actions button:disabled { |
| cursor: not-allowed; |
| color: #7f8ca0; |
| background: #151922; |
| } |
|
|
| .alert { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| min-height: 42px; |
| margin-bottom: 16px; |
| padding: 0 12px; |
| border: 1px solid #8a5630; |
| border-radius: 7px; |
| background: #231a14; |
| color: #ffbf80; |
| } |
|
|
| .metrics-grid { |
| display: grid; |
| grid-template-columns: repeat(6, minmax(0, 1fr)); |
| gap: 12px; |
| margin-bottom: 16px; |
| } |
|
|
| .metric, |
| .panel, |
| .session-card { |
| border: 1px solid #2a313f; |
| border-radius: 8px; |
| background: #171b23; |
| } |
|
|
| .metric { |
| display: grid; |
| grid-template-columns: 32px minmax(0, 1fr); |
| gap: 10px; |
| min-height: 96px; |
| padding: 14px; |
| } |
|
|
| .metric__icon { |
| display: grid; |
| width: 32px; |
| height: 32px; |
| place-items: center; |
| border-radius: 7px; |
| background: #202733; |
| color: #9fb9ff; |
| } |
|
|
| .metric__value { |
| font-size: 1.45rem; |
| font-weight: 800; |
| line-height: 1.05; |
| } |
|
|
| .metric__label { |
| margin-top: 4px; |
| color: #d6deeb; |
| font-weight: 700; |
| } |
|
|
| .metric__sublabel { |
| margin-top: 5px; |
| color: #8e9caf; |
| font-size: 0.82rem; |
| line-height: 1.25; |
| } |
|
|
| .metric--good .metric__icon, |
| .status-pill--idle { color: #6ee7a8; } |
|
|
| .metric--warn .metric__icon, |
| .status-pill--waiting { color: #ffd166; } |
|
|
| .metric--bad .metric__icon, |
| .status-pill--error { color: #ff8f8f; } |
|
|
| .metric--info .metric__icon, |
| .status-pill--active { color: #8ec7ff; } |
|
|
| .workspace-grid { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) 360px; |
| gap: 16px; |
| align-items: start; |
| } |
|
|
| .panel { padding: 16px; } |
|
|
| .panel__head { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| margin-bottom: 14px; |
| } |
|
|
| .panel__head h2, |
| .session-card h2 { |
| font-size: 1rem; |
| letter-spacing: 0; |
| } |
|
|
| .panel__head span, |
| .session-card__age { |
| color: #8794a8; |
| font-size: 0.82rem; |
| white-space: nowrap; |
| } |
|
|
| .sessions-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .session-card { |
| display: flex; |
| min-height: 214px; |
| flex-direction: column; |
| padding: 14px; |
| } |
|
|
| .session-card--active { border-color: #315c88; } |
| .session-card--waiting { border-color: #816632; } |
| .session-card--error { border-color: #8a3f3f; } |
|
|
| .session-card__head { |
| display: flex; |
| justify-content: space-between; |
| gap: 12px; |
| margin-bottom: 12px; |
| } |
|
|
| .session-card__identity { min-width: 0; } |
|
|
| .session-card h2 { |
| margin-top: 8px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .session-card__quote { |
| margin-top: 5px; |
| overflow: hidden; |
| color: #9faabd; |
| font-size: 0.82rem; |
| line-height: 1.3; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .status-pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| min-height: 24px; |
| padding: 0 8px; |
| border-radius: 999px; |
| background: #202733; |
| font-size: 0.78rem; |
| font-weight: 800; |
| } |
|
|
| .session-card__meta { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 8px; |
| margin-bottom: 12px; |
| } |
|
|
| .session-card__meta span { |
| display: inline-flex; |
| min-width: 0; |
| align-items: center; |
| gap: 6px; |
| overflow: hidden; |
| color: #a9b5c7; |
| font-size: 0.82rem; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .session-card__preview { |
| display: -webkit-box; |
| flex: 1; |
| overflow: hidden; |
| color: #c4ccda; |
| font-size: 0.9rem; |
| line-height: 1.42; |
| -webkit-box-orient: vertical; |
| -webkit-line-clamp: 3; |
| } |
|
|
| .session-card__actions { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 8px; |
| margin-top: 14px; |
| } |
|
|
| .lane-list { display: grid; gap: 10px; } |
|
|
| .lane-row, |
| .empty-state { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| color: #c4ccda; |
| line-height: 1.35; |
| } |
|
|
| .lane-row { |
| min-height: 46px; |
| padding: 10px; |
| border: 1px solid #2a313f; |
| border-radius: 7px; |
| background: #141820; |
| } |
|
|
| .empty-state { |
| min-height: 130px; |
| justify-content: center; |
| border: 1px dashed #364154; |
| border-radius: 8px; |
| } |
|
|
| .spin { animation: spin 0.9s linear infinite; } |
|
|
| @keyframes spin { |
| from { transform: rotate(0deg); } |
| to { transform: rotate(360deg); } |
| } |
|
|
| @media (max-width: 1120px) { |
| .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } |
| .workspace-grid { grid-template-columns: 1fr; } |
| } |
|
|
| @media (max-width: 760px) { |
| .app-shell { |
| width: min(100vw - 20px, 720px); |
| padding-top: 16px; |
| } |
|
|
| .topbar { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
|
|
| .metrics-grid, |
| .sessions-grid { grid-template-columns: 1fr; } |
|
|
| .session-card__meta, |
| .session-card__actions { grid-template-columns: 1fr; } |
| } |
|
|
