/* 線上錄音頁專用樣式；欄位沿用 site.css 的 .qr-field */
.vr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.vr-actions .btn { min-width: 110px; }
.vr-go { flex: 1 1 200px; min-height: 56px; font-size: 1.1rem; }
.vr-go.playing { background: var(--bad); border-color: var(--bad); }
.vr-fx { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; line-height: 1.5; }
.vr-fx input { margin-top: .35em; flex: none; }
.vr-err { border: 2px solid var(--bad); background: #fef2f2; border-radius: 12px; padding: 4px 14px 8px; margin: 10px 0; }
.vr-err-title { font-size: 1.15rem; color: var(--bad); margin: .6rem 0 .4rem; }
.vr-err p { margin: .4rem 0; }
.vr-h { margin-top: 1rem; }
#vr-time { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 4px 0; }
.vr-meter { position: relative; height: 28px; background: #e5e7eb; border-radius: 8px; overflow: hidden; }
#vr-bar { height: 100%; width: 0; background: var(--ok); transition: width .05s linear; }
#vr-bar.hot { background: var(--warn); }
#vr-bar.clip { background: var(--bad); }
#vr-peak { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--brand-dark); }
.vr-scale { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.vr-db { margin: 6px 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.vr-wave, .vr-trim { display: block; width: 100%; height: 120px; background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; }
.vr-trim { height: 100px; }
#vr-audio { width: 100%; margin: 8px 0; }
.vr-range { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 8px 0; }
.vr-range label { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.vr-range input[type=range] { width: 100%; }
.vr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.vr-row > * { min-width: 0; }
.sources li { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { #vr-bar { transition: none; } }