.host-preview #preview {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.host-toolbar { gap: 9px; }

.quality-field { position: relative; }
.quality-field span {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 11px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}
.quality-field select {
  width: 178px;
  height: 40px;
  padding: 14px 30px 2px 10px;
}

.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }

.session-panel { justify-content: center; }
.session-code {
  padding: 13px 16px;
  border: 1px dashed var(--brand);
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font: 650 30px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-align: center;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.form-field input, .form-field select { width: 100%; }

.stat-details { border-top: 0; padding-top: 0; }
.stat-details + .stat-details { border-top: 1px solid var(--line-soft); padding-top: 10px; }

.switch-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-soft);
  cursor: pointer;
}
.switch-row:has(input:checked) {
  border-color: #efcaa9;
  background: var(--brand-soft);
}
.switch-row input {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--brand);
  flex: 0 0 auto;
}
.switch-row span { display: flex; flex-direction: column; gap: 2px; }
.switch-row b { color: var(--ink); font-size: 12.5px; }
.switch-row small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }

.technical-card .card-icon { background: #f1effc; color: #6f5bb8; }
.technical-card .card-badge { border-color: #ddd7f4; background: #f7f5fd; color: #6f5bb8; }
.technical-card .diagnostics pre { max-height: 360px; }

.metric-box.tall, .log-box.tall { min-height: 260px; max-height: 440px; }

@media (max-width: 1100px) {
  .span-6, .span-8 { grid-column: span 12; }
}

@media (max-width: 760px) {
  .quality-field, .quality-field select { width: 100%; }
  .host-toolbar .btn { flex: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .session-code { font-size: 24px; }
}