body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; margin: 0; background: #0b1220; color: #e5e7eb; }
a { color: #93c5fd; text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 960px; margin: 0 auto; padding: 24px; }
.card { background: rgba(17,24,39,0.7); border: 1px solid rgba(55,65,81,0.6); border-radius: 12px; padding: 16px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.col { flex: 1 1 320px; }
label { display: block; font-size: 12px; color: #cbd5e1; margin-bottom: 6px; }
input, textarea, select { width: 100%; box-sizing: border-box; background: rgba(2,6,23,0.5); border: 1px solid rgba(55,65,81,0.8); border-radius: 10px; padding: 10px 12px; color: #e5e7eb; }
textarea { min-height: 140px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
button { background: #e5e7eb; border: 0; border-radius: 10px; padding: 10px 12px; font-weight: 700; cursor: pointer; }
button.secondary { background: transparent; border: 1px solid rgba(148,163,184,0.5); color: #e5e7eb; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.nav { display:flex; gap: 12px; align-items:center; margin-bottom: 16px; }
.badge { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(59,130,246,0.2); border: 1px solid rgba(59,130,246,0.35); }
.muted { color: #94a3b8; font-size: 13px; }
pre { white-space: pre-wrap; word-break: break-word; background: rgba(2,6,23,0.65); padding: 12px; border-radius: 10px; border: 1px solid rgba(55,65,81,0.6); }
.error { color: #fca5a5; }
.ok { color: #86efac; }

.tableWrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid rgba(55,65,81,0.6); vertical-align: top; }
th { color: #cbd5e1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
tr { cursor: pointer; }
tbody tr:hover { background: rgba(59,130,246,0.10); }
tr.selected { background: rgba(59,130,246,0.18); }
.pill { display: inline-block; font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 999px; background: rgba(148,163,184,0.14); border: 1px solid rgba(148,163,184,0.22); color: #cbd5e1; }
.events { display: flex; flex-direction: column; gap: 10px; max-height: 680px; overflow: auto; }
.event { border: 1px solid rgba(55,65,81,0.6); border-radius: 10px; padding: 10px; background: rgba(2,6,23,0.35); }
.event.user { border-color: rgba(96,165,250,0.45); }
.event.assistant { border-color: rgba(134,239,172,0.35); }
.event.tool { border-color: rgba(251,191,36,0.40); }
.eventMeta { display:flex; gap:8px; align-items:center; color:#94a3b8; font-size:12px; margin-bottom:7px; }
.eventText { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.4; }

.kpi { font-size: 34px; font-weight: 800; margin-top: 6px; }
code { background: rgba(148,163,184,0.14); border: 1px solid rgba(148,163,184,0.22); padding: 2px 6px; border-radius: 8px; }

.sectionNav { display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 16px 0; }
.sectionNav a { display:inline-block; font-size:12px; padding:8px 10px; border-radius:999px; background: rgba(148,163,184,0.10); border: 1px solid rgba(148,163,184,0.18); color:#cbd5e1; }
.sectionNav a:hover { text-decoration:none; background: rgba(59,130,246,0.16); border-color: rgba(59,130,246,0.28); }
.stack { display:flex; flex-direction:column; gap:16px; }
.sectionTitle { margin:0 0 6px 0; font-size:18px; }
.sectionBlurb { margin-bottom:12px; }