* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #0f1419; color: #e7e9ea; }
.bar { background: #1a2332; padding: 12px 20px; display: flex; gap: 12px; align-items: center; }
.tag { font-size: 12px; color: #f59e0b; }
.right { margin-left: auto; }
nav { background: #15202b; padding: 10px 20px; display: flex; flex-wrap: wrap; gap: 14px; }
nav a { color: #8ab4f8; text-decoration: none; }
main { padding: 24px; max-width: 900px; }
.warn { color: #fbbf24; }
pre, .box { background: #1e2732; padding: 12px; overflow: auto; border-radius: 6px; }
input, textarea, select { width: 100%; max-width: 480px; padding: 8px; margin: 6px 0 12px; }
button { padding: 8px 16px; cursor: pointer; }
.error { color: #f87171; }

.lab-main { max-width: 1100px; }
.lab-section { margin-bottom: 28px; }
.lab-section h2 { font-size: 1.1rem; color: #94a3b8; margin-bottom: 10px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
a.btn, button.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #38444d;
  background: #1e2732;
  color: #e7e9ea;
  text-decoration: none;
  font-size: 14px;
  font-family: inherit;
}
a.btn:hover, button.btn:hover { background: #253341; border-color: #8ab4f8; }
.btn-danger { border-color: #b45309; background: #2a1f14; }
.btn-danger:hover { border-color: #f59e0b; }
.btn-form { display: inline; margin: 0; }
.hint { font-size: 13px; color: #94a3b8; margin-top: 8px; }

.flash { background: #1e3a2f; border: 1px solid #22c55e; padding: 10px 14px; border-radius: 8px; }
.summary { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.pill { padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.pill-ok { background: #422006; color: #fbbf24; }
.pill-bad { background: #3f1d1d; color: #f87171; }
.pill-pending { background: #1e2732; color: #94a3b8; }
.btn-primary { border-color: #2563eb; background: #1e3a5f; }
.btn-sm { padding: 6px 10px; font-size: 13px; }
.lab-actions { margin-bottom: 8px; }
.lab-cmd { font-size: 14px; user-select: all; }
.lab-queue-panel { margin-bottom: 24px; }
.lab-queue-panel h2 { margin-top: 0; font-size: 1.1rem; }
.lab-url-label { display: block; margin-bottom: 12px; font-size: 14px; }
.lab-url-label input { max-width: 100%; margin-top: 6px; }
#lab-queue-progress { width: 100%; height: 10px; margin: 8px 0; }
.lab-log { max-height: 160px; font-size: 12px; margin-top: 8px; }
tr.lab-row-running { outline: 1px solid #8ab4f8; }
tr.lab-row-ok { background: rgba(34, 197, 94, 0.06); }
tr.lab-row-bad { background: rgba(248, 113, 113, 0.06); }

.lab-results-wide { max-width: 1100px; }
.lab-result-card { margin-bottom: 24px; }
.lab-result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.lab-result-head h2 { margin: 0; font-size: 1.15rem; }
.evidence-label { font-size: 0.85rem; color: #94a3b8; margin: 16px 0 8px; font-weight: 600; }
.lab-screenshot { max-width: 100%; border: 1px solid #38444d; border-radius: 8px; display: block; }
.lab-proof-frame { width: 100%; height: 420px; border: 1px solid #38444d; border-radius: 8px; background: #0f1419; }
.lab-download-preview { font-size: 13px; max-height: 200px; white-space: pre-wrap; word-break: break-word; }
.lab-row-pending { opacity: 0.85; }
.lab-viewer-global { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.evidence-collapse { margin-top: 12px; border-top: 1px solid #38444d; padding-top: 10px; }
.evidence-collapse-summary {
  cursor: pointer;
  color: #8ab4f8;
  font-size: 14px;
  user-select: none;
  list-style: none;
}
.evidence-collapse-summary::-webkit-details-marker { display: none; }
.evidence-collapse-summary::before { content: '▸ '; }
.evidence-collapse[open] .evidence-collapse-summary::before { content: '▾ '; }
.evidence-collapse-body { margin-top: 12px; }
.evidence-collapse:not([open]) .evidence-viewer,
.evidence-collapse:not([open]) .lab-viewer-global { display: none; }
.evidence-toggle { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.evidence-toggle-local { margin: 12px 0 8px; }
.evidence-mode-btn.is-active, .card-mode-btn.is-active { border-color: #8ab4f8; background: #1e3a5f; }
.evidence-viewer { margin-top: 4px; }
.evidence-pane { display: none; }
.evidence-pane.is-active { display: block; }
.lab-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; }
.lab-table th, .lab-table td { border-bottom: 1px solid #38444d; padding: 12px 8px; vertical-align: top; text-align: left; }
.lab-table th { color: #94a3b8; font-weight: 600; }
.test-title { font-weight: 600; }
.test-meta { font-size: 12px; color: #64748b; margin-top: 4px; }
.test-detail { font-size: 13px; color: #cbd5e1; margin-top: 6px; }
.test-note { font-size: 12px; color: #fbbf24; margin-top: 4px; }
.status { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.status-ok { background: #422006; color: #fbbf24; }
.status-bad { background: #3f1d1d; color: #f87171; }
.status-pending { background: #1e2732; color: #94a3b8; }
.test-actions { min-width: 220px; }
.inline-form { display: inline; }
.override-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-width: 220px; }
.override-form select, .override-form input { max-width: 100%; margin: 0; }