/* Shared UI for the media test tools (webcam-test / mic-test). Layout chrome
   comes from shared.css / utilities.css. */

.media-tool { max-width: 720px; margin: 0 auto; }

.media-stage {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 14px;
}

.media-controls {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: center; margin-bottom: 14px;
}
.media-select {
  font: inherit; font-size: .9rem; padding: 9px 12px; border-radius: var(--radius);
  border: 1px solid var(--border-control, #7a7fb5); background: var(--surface); color: var(--text);
  max-width: 220px;
}
.media-select:disabled { opacity: .55; }

.media-status {
  text-align: center; font-size: .95rem; font-weight: 500; color: var(--muted);
  margin: 0 auto 14px; max-width: 640px; min-height: 1.4em;
}
.media-status.is-ok    { color: var(--teal-dark); font-weight: 600; }
.media-status.is-error { color: var(--accent-fg); font-weight: 600; }

.media-info {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-width: 640px; margin: 0 auto 14px;
}
.media-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; text-align: center; min-width: 0;
}
.media-stat .v {
  font-family: 'JetBrains Mono', var(--mono); font-weight: 600; font-size: 1rem;
  color: var(--text); word-break: break-word;
}
.media-stat .k {
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}

.media-privacy {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--accent-bg); border: 1px solid var(--accent-light);
  border-radius: var(--radius); padding: 12px 14px;
  font-size: .9rem; color: var(--accent-fg); max-width: 720px; margin: 0 auto 16px;
}
.media-privacy svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }

@media (max-width: 520px) { .media-info { grid-template-columns: 1fr; } }