.recording-setup { margin: .8rem 0; }
.recording-setup:empty { display: none; }
.recording-setup [data-status]:empty, .recording-live [data-status]:empty { display: none; }
.recording-setup label, .recording-export label { display: inline-flex; flex-direction: row; gap: .45rem; align-items: center; flex-wrap: wrap; }
.recording-actions label:has(select) { flex-direction: column; align-items: flex-start; }
.recording-actions, .recording-export-options { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
.recording-setup video { display: block; max-width: 100%; max-height: 36dvh; margin: .6rem auto; }
.recording-setup [hidden], .recording-export [hidden], .recording-live [hidden], .recording-live[hidden] { display: none !important; }
.recording-hint { font-size: .85rem; }
.recording-export { width: min(94vw, 640px); max-height: 92dvh; overflow: auto; color: #fff; background: #161616; border: 1px solid #666; border-radius: 14px; padding: 1rem; }
.recording-export::backdrop { background: #000b; }
.recording-export video { width: 100%; max-height: 44dvh; background: #000; }
.recording-preview-stage { position: relative; width: min(100%, calc(44dvh * var(--preview-ratio, 1.7778))); aspect-ratio: var(--preview-ratio, 1.7778); margin: auto; }
.recording-preview-stage video, .recording-preview-stage canvas, .recording-position-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.recording-preview-stage canvas { pointer-events: none; }
.recording-position-grid { display: grid; grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); }
.recording-position-grid button { min-height: 0; padding: 0; border: 1px solid #fff6; border-radius: 0; background: transparent; }
.recording-position-grid button:hover, .recording-position-grid button[aria-pressed="true"] { border: 2px solid #ff4848; background: transparent; }
.recording-position-grid button:focus-visible { outline: 2px solid white; outline-offset: -4px; }
.recording-preview-controls { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
.recording-preview-controls input { flex: 1; min-width: 0; }
.recording-downloads { display: flex; gap: .65rem; flex-wrap: wrap; }
.recording-export-options { margin: .75rem 0; }
.recording-export a { color: #fff; }
.recording-live { display: contents; }
.recording-live video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
[data-camera-layout="hidden"] .recording-live video { display: none; }
.recording-live-tools { position: absolute; inset: 0 0 auto; z-index: 3; min-height: var(--recording-toolbar); padding: .25rem .65rem; background: #111; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-size: .82rem; }
.recording-live-tools select { min-width: 0; max-width: 56%; }
.recording-live-tools button { min-height: 36px; }
.timer-shell.is-timing[data-recording-visible] { --recording-toolbar: 48px; background: #000; }
.timer-shell.is-timing[data-recording-visible] .timer-card { position: absolute; inset: auto 0 0; min-height: 0; height: calc(100% - var(--recording-toolbar)); }
.timer-shell.is-timing[data-camera-layout="background"] .timer-card { background: transparent; }
[data-camera-layout="background"] .timer-card::before { background: #000a; box-shadow: none; }
[data-camera-layout="split"] .recording-live video { top: var(--recording-toolbar); height: calc(50% - var(--recording-toolbar)); }
.timer-shell.is-timing[data-camera-layout="split"] .timer-card { height: 50%; padding: 8px 12px; gap: 5px; }
[data-camera-layout="split"] .active-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
[data-camera-layout="split"] .active-controls button { min-height: 44px; }
[data-camera-layout="split"] .timer-control[data-testid="reset-button"] { grid-column: auto; }
[data-camera-layout="split"] .phase-chip { min-width: 0; gap: 6px; padding: 3px 5px 3px 9px; }
[data-camera-layout="split"] .phase-icon { width: 32px; height: 32px; flex-basis: 32px; font-size: 1rem; }
[data-camera-layout="split"] .timer-main-content { gap: 4px; }
@media (orientation: landscape) {
    [data-camera-layout="split"] .recording-live video { width: 50%; height: calc(100% - var(--recording-toolbar)); }
    .timer-shell.is-timing[data-camera-layout="split"] .timer-card { left: 50%; width: 50%; height: calc(100% - var(--recording-toolbar)); }
}

.recording-library-list { display: grid; list-style: none; padding: 0; gap: 8px; }
.recording-library-list button {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px;
    width: 100%; text-align: left;
}
.recording-library-list span, .recording-capacity { font-size: .85rem; }