:root { --lab-gap: 14px; }
body { margin: 0; }
.lab { max-width: 860px; margin: 0 auto; padding: 22px 18px 60px; }
.lab-head { position: relative; margin-bottom: 22px; }
.lab-head h1 { margin: 0 0 6px; font-size: 1.35rem; font-weight: 650; letter-spacing: -.01em; }
.lab-head .accent { color: #7c5cff; }
.lab-sub { max-width: 60ch; opacity: .72; font-size: .9rem; line-height: 1.5; }
.lab-back { position: absolute; top: 0; right: 0; font-size: .85rem; opacity: .7; text-decoration: none; }
.lab-back:hover { opacity: 1; }

.lab-card { border: 1px solid rgba(128,128,128,.24); border-radius: 10px; padding: 14px 16px; margin-bottom: var(--lab-gap); }
.lab-card h2 { margin: 0 0 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; opacity: .6; font-weight: 600; }

.lab-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; font-size: .86rem; }
.lab-facts div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted rgba(128,128,128,.22); padding-bottom: 3px; }
.lab-facts b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lab-facts .bad b { color: #c2410c; }
.lab-facts .good b { color: #15803d; }

.lab-row { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lab-row label { font-size: .86rem; }
.lab-row select, .lab-row button { font: inherit; font-size: .86rem; padding: 6px 12px; border-radius: 7px; border: 1px solid rgba(128,128,128,.35); background: transparent; color: inherit; }
.lab-row button { cursor: pointer; }
.lab-row button:disabled { opacity: .45; cursor: default; }
.lab-go { background: #7c5cff !important; border-color: #7c5cff !important; color: #fff !important; }
.lab-check { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; opacity: .85; }
.lab-note { flex-basis: 100%; font-size: .78rem; opacity: .62; line-height: 1.5; max-width: 66ch; }
.lab-acts { margin-top: 0; }

.lab-status { margin-top: 10px; font-size: .86rem; opacity: .8; min-height: 1.3em; }
.lab-summary { font-size: .86rem; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.lab-summary:empty { display: none; }
.lab-rows { display: flex; flex-direction: column; gap: 8px; }
.lab-hit { border-left: 3px solid #7c5cff; padding: 7px 0 7px 11px; }
.lab-hit.empty { border-left-color: rgba(128,128,128,.4); opacity: .65; }
.lab-hit-text { font-size: .95rem; margin-bottom: 4px; overflow-wrap: anywhere; }
.lab-hit-meta { font-size: .76rem; opacity: .68; font-variant-numeric: tabular-nums; }

.lab-note-top { margin: 0 0 12px; }
.lab-sliders { display: grid; gap: 12px; }
.lab-slider { display: grid; grid-template-columns: 8.5rem 1fr 5rem; align-items: center; gap: 12px; font-size: .86rem; }
.lab-slider input[type="range"] { width: 100%; }
.lab-slider b { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.lab-slider small { grid-column: 1 / -1; font-size: .76rem; opacity: .6; margin-top: -6px; line-height: 1.45; }
@media (max-width: 560px) {
  .lab-slider { grid-template-columns: 1fr 4.5rem; }
  .lab-slider input[type="range"] { grid-column: 1 / -1; }
}