/* ── Generic modal ── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 100;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 24px; width: 540px;
  max-width: calc(100vw - 32px); max-height: calc(100vh - 80px);
  display: flex; flex-direction: column; gap: 14px;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 14px; font-weight: 600; }
.modal-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 6px;
}
.modal-close:hover { color: var(--text); }
.modal label { font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.modal select, .modal textarea {
  width: 100%; background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 13px; font-family: inherit;
}
.modal select { margin-bottom: 4px; }
.modal textarea { resize: vertical; min-height: 220px; font-family: "SF Mono", Consolas, monospace; font-size: 12px; }
.modal-hint {
  font-size: 11px; color: var(--text-dim); background: var(--bg);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 6px 10px; max-height: 80px; overflow-y: auto; white-space: pre-wrap;
  word-break: break-word;
}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.modal-actions .btn-primary {
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 7px 16px;
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.modal-actions .btn-primary:hover { opacity: .9; }
.modal-actions .btn-secondary {
  background: none; color: var(--text-muted); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 16px;
  font-size: 13px; cursor: pointer;
}
.modal-actions .btn-secondary:hover { color: var(--text); }

/* Info modal content */
.info-modal-body {
  font-size: 13px; line-height: 1.7; color: var(--text-muted);
  overflow-y: auto;
}
.info-modal-body p { margin-bottom: 10px; }
.info-modal-body ul { padding-left: 1.3em; }
.info-modal-body li { margin: 4px 0; }
.info-modal-body strong { color: var(--text); font-weight: 600; }
.info-modal-body code {
  background: var(--bg-input); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 1px 5px;
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px;
  color: var(--orange);
}
.info-modal-body pre {
  background: var(--bg-input); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px;
  color: var(--text-muted); overflow-x: auto; white-space: pre;
  margin: 6px 0 10px;
}
.info-modal-body pre code {
  background: none; border: none; padding: 0; color: inherit; font-size: inherit;
}
.info-modal-body h4 {
  color: var(--text); font-size: 12px; font-weight: 600;
  margin: 12px 0 4px;
}

/* View Schema modal */
.schema-modal { width: 680px; }
.schema-modal-body {
  flex: 1; overflow-y: auto; min-height: 200px; max-height: 55vh;
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.schema-modal-state {
  padding: 16px; font-size: 12px; color: var(--text-dim);
}
.schema-modal-body pre {
  margin: 0; padding: 12px 14px;
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 11.5px;
  color: var(--text-muted); white-space: pre; overflow-x: auto;
}
.schema-modal-body pre code { background: none; border: none; padding: 0; }

/* JSON tree renderer (schema modal) */
#schema-modal-tree {
  padding: 12px 14px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  overflow-x: auto;
}
.jt-node { display: flex; flex-direction: column; }
.jt-row {
  display: flex; align-items: baseline; gap: 4px; cursor: default;
  border-radius: 2px; padding: 0 2px;
}
.jt-row:hover { background: rgba(255,255,255,.04); }
.jt-toggle {
  width: 14px; flex-shrink: 0; text-align: center;
  color: var(--text-dim); font-size: 10px; cursor: pointer; user-select: none;
}
.jt-toggle:hover { color: var(--text-muted); }
.jt-indent { padding-left: 20px; }
.jt-key   { color: var(--accent); }
.jt-colon { color: var(--text-dim); margin-right: 2px; }
.jt-str   { color: var(--green); }
.jt-num   { color: var(--orange); }
.jt-bool  { color: var(--purple); }
.jt-null  { color: var(--text-dim); }
.jt-brace { color: var(--text-dim); }
.jt-summary { color: var(--text-dim); font-style: italic; font-size: 10.5px; }
.jt-collapsed > .jt-indent { display: none; }

/* Validation modal */
.validation-modal-body {
  font-size: 13px; line-height: 1.6; overflow-y: auto; max-height: 55vh;
  display: flex; flex-direction: column; gap: 12px;
}
.validation-status {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 13px;
}
.validation-status.valid   { background: rgba(63,185,80,.12); color: var(--green); border: 1px solid rgba(63,185,80,.25); }
.validation-status.invalid { background: rgba(248,81,73,.12); color: var(--red);   border: 1px solid rgba(248,81,73,.25); }
.validation-status.warning { background: rgba(210,153,34,.12); color: var(--orange); border: 1px solid rgba(210,153,34,.25); }
.validation-section-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted); margin-bottom: 4px;
}
.validation-list {
  list-style: none; display: flex; flex-direction: column; gap: 5px;
}
.validation-list li {
  font-size: 12px; padding: 6px 10px;
  border-radius: var(--radius-sm); line-height: 1.5;
}
.validation-list.errors li   { background: rgba(248,81,73,.08); color: var(--red); border-left: 3px solid var(--red); }
.validation-list.recs li     { background: rgba(210,153,34,.08); color: var(--orange); border-left: 3px solid var(--orange); }


/* ── Lobby list ── */
.lobby-list {
  display: flex; flex-direction: column;
  gap: 14px; padding: 14px;
}
.lobby-global-settings {
  background: var(--bg-input); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 10px 12px;
}
.lobby-global-title {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-dim); margin-bottom: 6px;
}
.lobby-global-row { display: flex; gap: 8px; font-size: 11.5px; }
.lobby-controls-grid {
  display: grid; gap: 8px; margin-bottom: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lobby-controls-grid-agent {
  grid-template-columns: 1fr 150px;
  align-items: end;
}
.lobby-control {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--text-dim);
}
.lobby-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-muted);
}
.lobby-input {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 6px 8px; font-size: 11px;
}
.lobby-input:disabled { opacity: .55; }
.lobby-global-key {
  color: var(--purple); font-family: "SFMono-Regular", Consolas, monospace;
  min-width: 64px; flex-shrink: 0;
}
.lobby-global-val {
  color: var(--text-muted); font-family: "SFMono-Regular", Consolas, monospace;
}
.lobby-legend {
  background: var(--bg-input); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 10px 12px;
}
.lobby-legend-row {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
}
.lobby-toolbar {
  display: flex; align-items: flex-end; gap: 10px;
  margin-top: 8px;
}
.lobby-filter {
  min-width: 220px; margin-left: auto;
}
.lobby-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-muted);
}
.lobby-legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); border: 1px solid var(--border-soft);
}
.lobby-legend-dot[data-color="purple"] { background: var(--purple); }
.lobby-legend-dot[data-color="accent"] { background: var(--accent); }
.lobby-legend-dot[data-color="orange"] { background: var(--orange); }
.lobby-legend-dot[data-color="green"] { background: var(--green); }
.lobby-legend-dot[data-color="red"] { background: var(--red); }

/* ── Collapsible agent cards ── */
.lobby-card {
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  border-left: 3px solid var(--card-color, var(--accent));
  overflow: hidden;
}
.lobby-card[data-color="purple"] { --card-color: var(--purple); }
.lobby-card[data-color="accent"]  { --card-color: var(--accent);  }
.lobby-card[data-color="orange"]  { --card-color: var(--orange);  }
.lobby-card[data-color="green"]   { --card-color: var(--green);   }
.lobby-card[data-color="red"]     { --card-color: var(--red);     }
.lobby-card-summary {
  cursor: pointer; list-style: none; padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 4px;
  user-select: none;
}
.lobby-card-summary::-webkit-details-marker { display: none; }
.lobby-card-summary:hover { background: rgba(255,255,255,.03); }
.lobby-card-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lobby-card-name {
  font-size: 14px; font-weight: 700; color: var(--card-color, var(--text));
}
.lobby-card-gear {
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text-dim); cursor: pointer; font-size: 12px; padding: 2px 5px;
  line-height: 1; flex-shrink: 0;
}
.lobby-card-gear:hover { color: var(--text); border-color: var(--border-soft); background: var(--bg-input); }
.lobby-card-gear--active { color: var(--accent); border-color: var(--accent); }
.lobby-card-override-badge {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
}
.lobby-card-model {
  font-size: 10.5px; color: var(--text-dim);
  font-family: "SFMono-Regular", Consolas, monospace;
  margin-left: auto;
}
.lobby-card-desc {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
}
.lobby-card-body {
  padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--border-soft);
}
/* ── Collapsible sections inside a card ── */
.lobby-section-details {
  border: none; margin: 0;
}
.lobby-section-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-dim);
  cursor: pointer; list-style: none; display: flex;
  align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 0 4px; user-select: none;
}
.lobby-section-label::-webkit-details-marker { display: none; }
.lobby-section-label::after { content: "▸"; font-size: 9px; margin-left: auto; }
.lobby-section-details[open] > .lobby-section-label::after { content: "▾"; }
.lobby-section-tools-label { display: flex; align-items: center; gap: 8px; }
.lobby-section-tools-label::after { display: none; }
.lobby-tools-toggle {
  background: var(--bg-input); color: var(--text-muted);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 3px 8px; font-size: 10px; cursor: pointer; margin-left: auto;
}
.lobby-tools-toggle:hover { color: var(--text); border-color: var(--border); }
.lobby-params {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-input); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.lobby-param-row { display: flex; gap: 8px; font-size: 11.5px; }
.lobby-param-key { color: var(--purple); font-family: "SFMono-Regular", Consolas, monospace; min-width: 120px; flex-shrink: 0; }
.lobby-param-val { color: var(--text-muted); font-family: "SFMono-Regular", Consolas, monospace; }
.lobby-io {
  font-size: 11px; line-height: 1.5; color: var(--text-muted);
  background: var(--bg-input); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 8px 10px; white-space: pre-wrap;
}
.lobby-prompt-pre {
  max-height: 22vh; font-size: 10.5px;
}
/* ── Per-agent configuration edit panel ── */
.lobby-edit-panel {
  display: none; flex-direction: column; gap: 10px;
  padding: 12px; background: var(--bg-input);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  margin-bottom: 2px;
}
.lobby-edit-panel--open { display: flex; }
.lobby-edit-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lobby-edit-title {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--text-dim); flex: 1;
}
.lobby-edit-actions { display: flex; gap: 6px; }
.lobby-btn-save, .lobby-btn-reset {
  font-size: 10.5px; border-radius: var(--radius-sm); padding: 4px 10px;
  cursor: pointer; border: 1px solid var(--border-soft);
  background: var(--bg); color: var(--text-muted);
}
.lobby-btn-save:hover { color: var(--text); border-color: var(--border); }
.lobby-btn-reset:hover { color: var(--red, #f85149); border-color: var(--red, #f85149); }
.lobby-prompt-textarea {
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 10.5px;
  resize: vertical; min-height: 120px;
}
.lobby-tools-checklist {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 160px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 6px 8px; margin-top: 4px;
}
.lobby-tool-check {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-muted); cursor: pointer;
}
.lobby-tool-check:hover { color: var(--text); }
.agents-tools-list { display: flex; flex-direction: column; gap: 6px; }
.agents-tool-card {
  background: var(--bg-input); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 6px 10px;
}
.agents-tool-summary {
  cursor: pointer; list-style: none; display: flex;
  align-items: center; justify-content: space-between; gap: 8px;
}
.agents-tool-summary::-webkit-details-marker { display: none; }
.agents-tool-toggle {
  font-size: 10px; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: .4px;
}
.agents-tool-toggle::before { content: "show details"; }
.agents-tool-card[open] .agents-tool-toggle::before { content: "hide details"; }
.agents-tool-card[open] .agents-tool-toggle { color: var(--text-muted); }
.agents-tool-card .agents-tool-desc,
.agents-tool-card .agents-tool-params {
  margin-top: 6px;
}
.agents-tool-name {
  font-family: "SFMono-Regular", Consolas, monospace;
  color: var(--purple); font-size: 11.5px; font-weight: 600;
}
.agents-tool-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.agents-tool-params { margin-top: 4px; font-size: 10.5px; color: var(--text-dim); }
.agents-param-chips { display: flex; flex-wrap: wrap; gap: 2px; }
.agents-param-chip {
  display: inline-block; margin: 2px 3px 0 0; padding: 1px 7px;
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: 20px; font-size: 10px; font-family: "SFMono-Regular", Consolas, monospace;
  color: var(--orange);
}
.agents-param-chip[data-required="true"] { border-color: var(--red); color: var(--red); }
.agents-param-chip sup { color: var(--red); font-size: 8px; }
.agents-param-legend { font-size: 9.5px; color: var(--text-dim); margin-top: 4px; font-style: italic; }
.agents-prompt-pre {
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 11.5px;
  color: var(--text-muted); white-space: pre-wrap;
  word-break: break-word; max-height: 44vh; overflow-y: auto; line-height: 1.6;
}

/* ── MCP tools table ── */
.mcp-tool-group {
  margin-bottom: 18px;
}
.mcp-tool-group-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--accent); margin-bottom: 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
}
.mcp-tool-table { display: flex; flex-direction: column; gap: 4px; }
.mcp-tool-row {
  display: flex; align-items: baseline; gap: 12px; font-size: 12px;
  padding: 5px 8px; border-radius: var(--radius-sm);
  background: var(--bg-input);
}
.mcp-tool-row:hover { background: var(--bg-panel); }
.mcp-tool-name {
  font-family: "SFMono-Regular", Consolas, monospace; color: var(--purple);
  font-size: 11px; font-weight: 600; flex-shrink: 0; min-width: 200px;
}
.mcp-tool-desc { color: var(--text-muted); font-size: 11.5px; line-height: 1.5; }
.mcp-tool-desc code { font-family: "SFMono-Regular", Consolas, monospace; color: var(--orange); font-size: 10.5px; }


/* ── System diagram (interactive SVG) ── */
.diag-outer { display: flex; flex-direction: column; gap: 12px; }
.diag-scroll {
  overflow-x: auto;
  background: var(--bg-input); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 8px;
}
.diag-info-panel {
  display: flex; align-items: flex-start; gap: 10px; min-height: 38px;
  background: var(--bg-input); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 10px 16px;
  font-size: 13px; color: var(--text-muted); line-height: 1.5;
  flex-wrap: wrap;
}
.diag-info-pin-badge {
  flex-shrink: 0; font-size: 10px; color: var(--text-dim);
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 2px 7px; align-self: center;
}
.diag-legend {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  background: var(--bg-input); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 12px 16px;
}
.diag-legend-item {
  display: inline-flex; align-items: center; gap: 7px;
}
.diag-legend-swatch {
  display: inline-block; width: 16px; height: 16px;
  border-radius: 4px; flex-shrink: 0;
}
.diag-legend-dash {
  display: inline-block; width: 28px; height: 0;
  border-top: 2px dashed #4b5563; flex-shrink: 0;
}
.diag-legend-label {
  font-size: 11px; color: var(--text-muted);
}

/* ── Drag-and-drop zone ── */
.drop-zone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 16px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
  color: var(--text-dim); font-size: 12px; line-height: 1.6;
  margin-bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--accent); background: rgba(47,129,247,.05); color: var(--text-muted);
}
.drop-zone-icon { font-size: 22px; opacity: .5; }
.drop-zone-row { display: flex; align-items: center; gap: 8px; }
.drop-zone-or { font-size: 11px; color: var(--text-dim); }
.drop-zone-file-btn {
  font-size: 11px; font-weight: 500; padding: 4px 10px;
  background: var(--bg-input); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: color .15s;
}
.drop-zone-file-btn:hover { color: var(--text); border-color: var(--text-muted); }

/* Suite toolbar */
.tl-suite-toolbar {
  padding: 0; border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
  position: sticky; top: 0; z-index: 2;
}
.tl-filter-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 14px;
}
.tl-filter-row:first-child { border-bottom: 1px solid var(--border-soft); }
.tl-filter-row-type { background: var(--bg-input); }
.tl-filter-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.tl-filter-tab {
  font-size: 11.5px; font-weight: 500; padding: 4px 10px;
  color: var(--text-muted); cursor: pointer; border: 1px solid transparent;
  background: none; border-radius: var(--radius-sm); transition: color .15s, background .15s;
  white-space: nowrap;
}
.tl-filter-tab:hover { color: var(--text); background: var(--bg-input); }
.tl-filter-tab.active {
  background: var(--bg-panel); color: var(--text);
  border-color: var(--border-soft);
}
.tl-filter-count {
  display: inline-block; font-size: 10px; opacity: .6;
  margin-left: 3px;
}
.tl-suite-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; flex-wrap: wrap; }
.tl-suite-stats { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.tl-run-all-btn, .tl-stop-btn, .tl-clear-btn {
  font-size: 11.5px; padding: 4px 12px; white-space: nowrap;
}

/* Test rows */
.tl-test-list { display: flex; flex-direction: column; }
.tl-test-row {
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 14px;
  transition: background .1s;
}
.tl-test-row:hover { background: var(--bg-input); }
.tl-test-row-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tl-test-id {
  font-size: 10.5px; color: var(--text-dim);
  font-family: "SFMono-Regular", Consolas, monospace; min-width: 28px;
}
.tl-test-desc { font-size: 12px; color: var(--text-muted); flex: 1; }
.tl-test-prompt {
  font-size: 11.5px; color: var(--text-dim); margin-top: 4px;
  font-family: "SFMono-Regular", Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-test-row-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.tl-run-btn {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 11px; padding: 2px 8px;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.tl-run-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Agent badges */
.tl-agent-badge {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 1px 7px; border-radius: 20px; white-space: nowrap;
  border: 1px solid transparent;
}
.tl-badge-purple { background: rgba(188,140,255,.12); color: var(--purple); border-color: rgba(188,140,255,.3); }
.tl-badge-accent  { background: rgba(47,129,247,.12);  color: var(--accent);  border-color: rgba(47,129,247,.3);  }
.tl-badge-orange  { background: rgba(210,153,34,.12);  color: var(--orange);  border-color: rgba(210,153,34,.3);  }
.tl-badge-green   { background: rgba(63,185,80,.12);   color: var(--green);   border-color: rgba(63,185,80,.3);   }

/* Test type tag badges */
.tl-tag {
  display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 20px; white-space: nowrap;
  border: 1px solid transparent; text-transform: uppercase;
}
.tl-tag-routing     { background: rgba(188,140,255,.1); color: var(--purple);  border-color: rgba(188,140,255,.25); }
.tl-tag-epistemic   { background: rgba(47,129,247,.1);  color: var(--accent);  border-color: rgba(47,129,247,.25);  }
.tl-tag-grounding   { background: rgba(63,185,80,.1);   color: var(--green);   border-color: rgba(63,185,80,.25);   }
.tl-tag-behavioral  { background: rgba(210,153,34,.1);  color: var(--orange);  border-color: rgba(210,153,34,.25);  }
.tl-tag-mechanistic { background: var(--bg-input);      color: var(--text-dim); border-color: var(--border-soft);   }

/* Type filter tab color accents */
.tl-type-tab-routing.active     { color: var(--purple);  background: rgba(188,140,255,.12); border-color: rgba(188,140,255,.3); }
.tl-type-tab-epistemic.active   { color: var(--accent);  background: rgba(47,129,247,.12);  border-color: rgba(47,129,247,.3);  }
.tl-type-tab-grounding.active   { color: var(--green);   background: rgba(63,185,80,.12);   border-color: rgba(63,185,80,.3);   }
.tl-type-tab-behavioral.active  { color: var(--orange);  background: rgba(210,153,34,.12);  border-color: rgba(210,153,34,.3);  }
.tl-type-tab-mechanistic.active { color: var(--text);    background: var(--bg-panel);       border-color: var(--border-soft);   }

/* Status chips */
.tl-status-chip {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 20px; min-width: 26px; text-align: center;
}
.tl-status-idle    { background: var(--bg-input); color: var(--text-dim); }
.tl-status-running { background: rgba(47,129,247,.15); color: var(--accent); }
.tl-status-pass    { background: rgba(63,185,80,.15);  color: var(--green); }
.tl-status-fail    { background: rgba(248,81,73,.15);   color: var(--red); }
.tl-status-error   { background: rgba(210,153,34,.15);  color: var(--orange); }

/* Test detail / check results */
.tl-test-detail { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tl-check-list { display: flex; flex-direction: column; gap: 3px; }
.tl-check-row {
  display: flex; align-items: baseline; gap: 8px; font-size: 11.5px;
  padding: 4px 8px; border-radius: var(--radius-sm);
}
.tl-check-pass { background: rgba(63,185,80,.08);  color: var(--green); }
.tl-check-fail { background: rgba(248,81,73,.08);   color: var(--red); }
.tl-check-icon { font-size: 11px; font-weight: 700; flex-shrink: 0; }
.tl-check-label { flex: 1; }
.tl-check-detail { font-size: 10.5px; opacity: .7; font-family: "SFMono-Regular", Consolas, monospace; word-break: break-word; white-space: normal; }
.tl-response-snippet {
  font-size: 11px; color: var(--text-dim); background: var(--bg-input);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 6px 10px; font-family: "SFMono-Regular", Consolas, monospace;
  line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.tl-error-msg { font-size: 11.5px; color: var(--orange); }

/* LLM-as-judge quality score */
.tl-judge-row {
  display: flex; align-items: baseline; gap: 8px; font-size: 11.5px;
}
.tl-judge-pending { color: var(--text-dim); font-style: italic; }
.tl-judge-badge {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: var(--radius-sm); font-size: 11px; font-weight: 600;
  flex-shrink: 0; white-space: nowrap;
}
.tl-judge-high  { background: rgba(63,185,80,.12);  color: var(--green); border: 1px solid rgba(63,185,80,.3); }
.tl-judge-mid   { background: rgba(210,153,34,.12); color: var(--orange); border: 1px solid rgba(210,153,34,.3); }
.tl-judge-low   { background: rgba(248,81,73,.12);  color: var(--red);   border: 1px solid rgba(248,81,73,.3); }
.tl-judge-reasoning { color: var(--text-muted); font-size: 11px; line-height: 1.4; }

/* Playground */
.tl-playground { padding: 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.tl-pg-fields { display: flex; flex-direction: column; gap: 10px; }
.tl-pg-field { display: flex; flex-direction: column; gap: 4px; }
.tl-pg-field-half { flex: 1; }
.tl-pg-row { display: flex; gap: 10px; }
.tl-pg-label { font-size: 11.5px; color: var(--text-muted); }
.tl-pg-textarea {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
  color: var(--text); font-size: 13px; font-family: inherit;
  resize: vertical; transition: border-color .15s;
}
.tl-pg-textarea:focus { border-color: var(--accent); }
.tl-pg-select, .tl-pg-input {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 10px;
  color: var(--text); font-size: 13px; font-family: inherit;
  transition: border-color .15s; width: 100%;
}
.tl-pg-select:focus, .tl-pg-input:focus { border-color: var(--accent); }
.tl-pg-run-row { display: flex; align-items: center; gap: 10px; }
.tl-pg-hint { font-size: 11px; color: var(--text-dim); }
.tl-pg-result {
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.tl-pg-summary {
  font-size: 13px; font-weight: 600; padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.tl-pg-pass { background: rgba(63,185,80,.12); color: var(--green); border: 1px solid rgba(63,185,80,.25); }
.tl-pg-fail { background: rgba(248,81,73,.12);  color: var(--red);   border: 1px solid rgba(248,81,73,.25); }
.tl-pg-meta { font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-pg-meta-sep { color: var(--text-dim); }
.tl-pg-response-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); }
.tl-pg-response {
  font-size: 12px; color: var(--text-muted); background: var(--bg-input);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 8px 10px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  max-height: 180px; overflow-y: auto;
}
.tl-pg-preview-pre {
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px;
  color: var(--text-dim); background: var(--bg-input);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 8px 10px; overflow-x: auto; white-space: pre;
  max-height: 120px; overflow-y: auto;
}

/* ── Mobile modal adjustments ── */
@media (max-width: 600px) {
  .modal { padding: 16px; }
  .modal-header { flex-wrap: wrap; gap: 8px; }
  .schema-modal { width: calc(100vw - 32px); }
  .lobby-controls-grid,
  .lobby-controls-grid-agent { grid-template-columns: 1fr; }
  .lobby-toolbar { flex-direction: column; align-items: stretch; }
  .lobby-filter { min-width: 100%; margin-left: 0; }
  .modal textarea { min-height: 120px; }
  .mcp-tool-row { flex-direction: column; gap: 4px; }
  .mcp-tool-name { min-width: 0; }
}