:root {
  --lab-bg: #08111f;
  --lab-panel: #0f1b2d;
  --lab-line: #26364d;
  --lab-text: #e8eef7;
  --lab-muted: #a8b5c7;
  --lab-blue: #60a5fa;
  --lab-green: #49c582;
  --lab-amber: #f0b34a;
  --lab-red: #ef6b73;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--lab-bg);
  color: var(--lab-text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
}
a { color: #93c5fd; }
.lab-shell { margin: 0 auto; max-width: 1180px; padding: 16px 18px 56px; }
.lab-topbar {
  align-items: center;
  border-bottom: 1px solid var(--lab-line);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  min-height: 58px;
}
.lab-brand { color: #fff; font-size: 20px; font-weight: 800; text-decoration: none; }
.lab-nav { display: flex; flex-wrap: wrap; gap: 16px; }
.lab-nav a { color: #c9d5e5; font-weight: 700; text-decoration: none; }
.lab-intro { max-width: 820px; padding: 34px 0 24px; }
.lab-intro h1 { font-size: 40px; letter-spacing: 0; line-height: 1.1; margin: 0 0 12px; }
.lab-intro p { color: var(--lab-muted); font-size: 18px; margin: 0; }
.lab-loading { border-top: 1px solid var(--lab-line); padding: 24px 0; }
.lab-loading.is-error { color: #fecaca; }
.lab-summary {
  border-bottom: 1px solid var(--lab-line);
  border-top: 1px solid var(--lab-line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lab-metric { min-width: 0; padding: 16px 18px; }
.lab-metric + .lab-metric { border-left: 1px solid var(--lab-line); }
.lab-metric span { color: var(--lab-muted); display: block; font-size: 13px; }
.lab-metric strong { display: block; font-size: 22px; margin-top: 3px; overflow-wrap: anywhere; }
.lab-workspace { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 430px; }
.lab-region-tabs { border-right: 1px solid var(--lab-line); padding: 18px 16px 18px 0; }
.lab-region-tab {
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--lab-text);
  cursor: pointer;
  display: block;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}
.lab-region-tab.is-selected { background: #14243a; border-left-color: var(--lab-blue); }
.lab-region-tab span, .lab-region-tab small { display: block; }
.lab-region-tab span { font-weight: 800; }
.lab-region-tab small { color: var(--lab-muted); }
.lab-results { min-width: 0; padding: 22px 0 22px 24px; }
.lab-results h2 { font-size: 24px; margin: 0; }
.lab-region-meta { color: var(--lab-muted); margin: 4px 0 18px; }
.lab-table-wrap { overflow-x: auto; }
.lab-table { border-collapse: collapse; min-width: 780px; width: 100%; }
.lab-table th, .lab-table td { border-bottom: 1px solid var(--lab-line); padding: 13px 10px; text-align: left; }
.lab-table thead th { color: var(--lab-muted); font-size: 13px; }
.lab-result { font-weight: 800; }
.lab-result.is-ok { color: var(--lab-green); }
.lab-result.is-warn { color: var(--lab-amber); }
.lab-result.is-bad { color: var(--lab-red); }
.lab-method {
  border-top: 1px solid var(--lab-line);
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr 1fr;
  padding: 26px 0;
}
.lab-method h2 { font-size: 21px; margin: 0 0 8px; }
.lab-method p, .lab-method li { color: var(--lab-muted); }
.lab-method ul { margin: 0; padding-left: 20px; }
.lab-legal { border-top: 1px solid var(--lab-line); color: var(--lab-muted); font-size: 14px; padding-top: 18px; }

@media (max-width: 760px) {
  .lab-topbar { align-items: flex-start; flex-direction: column; padding: 12px 0; }
  .lab-intro h1 { font-size: 32px; }
  .lab-summary { grid-template-columns: 1fr 1fr; }
  .lab-metric:nth-child(3) { border-left: 0; }
  .lab-metric:nth-child(n+3) { border-top: 1px solid var(--lab-line); }
  .lab-workspace { grid-template-columns: 1fr; }
  .lab-region-tabs { border-bottom: 1px solid var(--lab-line); border-right: 0; display: flex; overflow-x: auto; padding: 12px 0; }
  .lab-region-tab { flex: 0 0 100px; }
  .lab-results { padding-left: 0; }
  .lab-method { grid-template-columns: 1fr; }
}

.lab-lang { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.lab-lang a { border: 1px solid var(--lab-line); border-radius: 999px; color: #c9d5e5; padding: 6px 10px; text-decoration: none; }
.lab-lang a[aria-current="true"] { background: #14243a; border-color: var(--lab-blue); color: #fff; }
.lab-lang span { margin-right: 5px; }
.lab-lang strong { color: var(--lab-muted); font-size: 12px; }
@media (max-width: 760px) { .lab-lang { justify-content: flex-start; } }