/* Shared styles for /tools/mic-test, /tools/speaker-test and /tools/webcam-test */
.avt-root { --avt-ok: #2fa866; --avt-warn: #c98a1b; --avt-bad: #d9534f; }
.avt-wide { grid-column: 1 / -1; min-width: 0; }
.avt-hidden, .avt-root [hidden] { display: none !important; }

.avt-banner { margin: 12px 16px 0; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 0.84rem; line-height: 1.5; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary); }
.avt-banner strong { color: var(--text-primary); }
.avt-banner--example { border-color: var(--accent-border); background: var(--accent-muted); }
.avt-banner--live { border-color: color-mix(in srgb, var(--avt-ok) 45%, transparent); }
.avt-banner--warn { border-color: color-mix(in srgb, var(--avt-warn) 55%, transparent); }
.avt-banner--error { border-color: color-mix(in srgb, var(--avt-bad) 55%, transparent); }
.avt-banner p { margin: 4px 0; }

.avt-help { margin-top: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--avt-bad) 45%, var(--border)); border-radius: 8px; background: var(--bg-input); font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); }
.avt-help__title { font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.avt-help p { margin: 4px 0; }
.avt-fixes { margin: 6px 0 0; padding-left: 1.1em; }
.avt-fixes li { margin: 4px 0; }
.avt-more { margin-top: 6px; }
.avt-more summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 4px 0; }

.avt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.avt-actions .ub-tool-btn { min-height: 44px; }
.avt-hint { font-size: 0.8rem; color: var(--text-tertiary); line-height: 1.5; margin: 8px 0 0; }
.avt-presets { margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); }
.avt-presets__title { font-size: 0.75rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; font-weight: 600; }
.avt-presets__row { display: flex; gap: 6px; flex-wrap: wrap; }
.avt-presets__row .ub-tool-btn { min-height: 40px; }
.avt-presets__row .ub-tool-btn.is-active { border-color: var(--accent); color: var(--accent); }

.avt-checks { display: grid; gap: 8px; }
.avt-check { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--text-secondary); min-height: 36px; cursor: pointer; }
.avt-check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.avt-check small { color: var(--text-tertiary); }

.avt-verdict { margin: 0 16px 12px; font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); }
.avt-verdict strong { color: var(--text-primary); }
.avt-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--accent-border); color: var(--accent); background: var(--accent-muted); vertical-align: middle; }

.avt-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.avt-panel__body { padding: 14px 16px; }
.avt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.avt-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.avt-table th, .avt-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.avt-table thead th { font-size: 0.72rem; color: var(--text-tertiary); letter-spacing: 0.04em; font-weight: 600; }
.avt-table tbody th { font-weight: 600; color: var(--text-primary); font-family: var(--font-mono); font-size: 0.82rem; white-space: nowrap; }
.avt-table td { color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.82rem; }
.avt-foot { font-size: 0.8rem; color: var(--text-tertiary); margin-top: 10px; line-height: 1.5; }
.avt-sw-note { margin: 10px 0 0; font-size: 0.86rem; color: var(--text-secondary); line-height: 1.55; }

/* Level meter (mic) */
.avt-meter { width: 100%; padding: 0 16px; box-sizing: border-box; margin-top: 12px; }
.avt-meter__track { position: relative; height: 26px; border-radius: 6px; background: var(--bg-input); border: 1px solid var(--border); overflow: hidden; }
.avt-meter__rms { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--avt-ok) 0%, var(--avt-ok) 70%, var(--avt-warn) 88%, var(--avt-bad) 100%); background-size: var(--avt-meter-w, 100%) 100%; }
.avt-meter__peak { position: absolute; top: 0; bottom: 0; width: 3px; left: 0; background: var(--text-primary); opacity: 0.85; }
.avt-meter__scale { position: relative; height: 16px; font-size: 0.66rem; color: var(--text-tertiary); font-family: var(--font-mono); }
.avt-meter__scale span { position: absolute; transform: translateX(-50%); top: 2px; }
.avt-meter__scale span:first-child { transform: none; }
.avt-meter__scale span:last-child { transform: translateX(-100%); }
.avt-clip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--text-tertiary); letter-spacing: 0.04em; }
.avt-clip::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-input); border: 1px solid var(--border); }
.avt-clip.is-on { color: var(--avt-bad); }
.avt-clip.is-on::before { background: var(--avt-bad); border-color: var(--avt-bad); box-shadow: 0 0 8px var(--avt-bad); }
.avt-meter__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 0.8rem; color: var(--text-secondary); }

.avt-canvas-wrap { width: 100%; padding: 12px 16px; box-sizing: border-box; }
.avt-canvas { width: 100%; height: 220px; display: block; border-radius: 6px; background: var(--bg-input); border: 1px solid var(--border); }
.avt-audio { width: 100%; margin-top: 8px; }

/* Webcam */
.avt-stage { position: relative; margin: 12px 16px; border-radius: 8px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }
.avt-stage video, .avt-stage canvas, .avt-stage svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.avt-stage video.is-mirrored { transform: scaleX(-1); }
.avt-stage__label { position: absolute; left: 10px; top: 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; }
.avt-snaps { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.avt-snap { border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--bg-input); max-width: 260px; }
.avt-snap img { width: 100%; height: auto; display: block; border-radius: 4px; }
.avt-snap__meta { font-size: 0.76rem; color: var(--text-tertiary); margin: 6px 0; font-family: var(--font-mono); }

/* Speaker */
.avt-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.avt-row2 > .ub-input-group { min-width: 0; }
.avt-range { width: 100%; }
.avt-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.avt-big .ub-tool-btn { min-height: 52px; font-weight: 700; }
.avt-big .ub-tool-btn.is-playing { border-color: var(--accent); color: var(--accent); background: var(--accent-muted); }
.avt-stopbar { position: sticky; bottom: 8px; z-index: 5; }
/* On one-column layouts the Stop button floats while a sound plays, so it is never far away. */
@media (max-width: 800px) { .avt-stopbar.is-playing { position: fixed; left: 0; right: 0; bottom: 12px; z-index: 60; } }
.avt-warnbox { margin-top: 10px; padding: 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--avt-warn) 60%, var(--border)); background: var(--bg-input); font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); }
.avt-warnbox strong { color: var(--text-primary); }
.avt-section-label { font-size: 0.75rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin: 16px 0 8px; }
.avt-marks { font-size: 0.84rem; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; }

@media (max-width: 480px) {
    .avt-row2 { grid-template-columns: 1fr; }
    .avt-canvas { height: 180px; }
    .avt-stage { margin: 10px; }
}