/* id8 voice recorder panel — shared by the Short Video Maker and the Voiceover Recorder. */
.vr-panel { display: grid; gap: 14px; padding: 16px; }
.vr-title { margin: 0; font: 700 17px/1.3 Inter, system-ui, sans-serif; color: var(--id8-ink); outline: none; }
.vr-facts { margin: 0; padding-left: 18px; color: var(--id8-ink-muted); font-size: 14.5px; line-height: 1.6; }
.vr-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vr-actions .id8-btn { min-height: 44px; }
.vr-actions--quiet { opacity: 0.9; }
.vr-status, .vr-live { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--id8-ink); }
.vr-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--id8-ink-muted); }
.vr-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--id8-border-strong); }
.vr-live.is-live .vr-dot { background: var(--id8-danger); animation: vr-pulse 1.2s ease-in-out infinite; }
.vr-meter, .vr-bar { height: 8px; border-radius: 4px; background: var(--id8-border); overflow: hidden; }
.vr-meter > span, .vr-bar > span { display: block; height: 100%; width: 0; background: var(--id8-chosen); transition: width 80ms linear; }
.vr-switch { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; }
.vr-switch input { width: 22px; height: 22px; margin-top: 2px; }
.vr-switch small { display: block; color: var(--id8-ink-muted); }
.vr-count { margin: 0; text-align: center; font: 800 56px/1 Inter, system-ui, sans-serif; color: var(--id8-ink); }
.vr-note { margin: 0; font-size: 14px; color: var(--id8-ink-muted); }
.vr-error { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--id8-danger-tint); color: var(--id8-ink); }
.vr-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--id8-border); border-top-color: var(--id8-chosen); animation: vr-spin 0.8s linear infinite; }
@keyframes vr-spin { to { transform: rotate(360deg); } }
@keyframes vr-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .vr-live.is-live .vr-dot, .vr-spin { animation: none; } .vr-meter > span, .vr-bar > span { transition: none; } }

/* The id8 mark, drawn where the finished video will carry it (Id8Watermark.at). White at 67%,
   as in the video itself. */
.preview-watermark {
    position: absolute; z-index: 4; display: flex; align-items: center; gap: 0.45em;
    transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
    font: 800 1.9cqw/1 Poppins, Inter, system-ui, sans-serif; color: rgba(255, 255, 255, 0.67);
    text-shadow: 0 0.06em 0.12em rgba(0, 0, 0, 0.4);
}
.preview-watermark__badge {
    font-size: 0.78em; padding: 0.35em 0.5em; border: 0.09em solid rgba(255, 255, 255, 0.67); border-radius: 0.3em;
}