.fx-recorder { position:fixed; z-index:180; width:min(640px,100vw); max-height:100dvh; display:flex; flex-direction:column; border:0; box-shadow:var(--shadow-md); background:var(--surface); overflow:hidden; }
.fx-recorder.is-fullscreen {border-radius:0;}
.fx-recorder.is-fullscreen>[data-box=window] {display:none;}

.fx-recorder-window-actions {display:flex;align-items:center;flex:none;gap:6px;}
.fx-recorder-body {overflow:auto;scrollbar-width:none;padding:0 12px 12px;min-height:0;}
.fx-recorder-body::-webkit-scrollbar {display:none;}
.fx-recorder-stage {position:relative;background:var(--text);border-radius:0;overflow:hidden;width:calc(100% + 24px);margin-inline:-12px;height:clamp(180px,36vh,350px);}
.fx-recorder-stage video {width:100%;height:100%;object-fit:contain;display:block;}
.fx-recorder-stage video[hidden] {display:none;}
.fx-recorder-stage video.is-preview {transform:scaleX(-1);}
.fx-recorder-stage[data-format=portrait] {height:auto;width:min(100%,calc(clamp(240px,46vh,460px) * 0.5625));aspect-ratio:9/16;margin-inline:auto;}
.fx-recorder-stage[data-format=landscape] {height:auto;aspect-ratio:16/9;}
.fx-recorder-stage[data-format=portrait] video.is-preview,.fx-recorder-stage[data-format=landscape] video.is-preview {object-fit:cover;}
.fx-recorder-format {margin-top:12px;}
.fx-recorder-prompt {position:absolute;inset:8% 8% 12%;overflow:auto;scrollbar-width:none;color:white;background:rgb(0 0 0 / 42%);border-radius:var(--r-md);padding:14px 20px;font-size:25px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;text-shadow:0 1px 3px black;}
.fx-recorder-prompt::-webkit-scrollbar {display:none;}
.fx-recorder-prompt[hidden],.fx-recorder-countdown[hidden] {display:none;}
.fx-recorder-countdown {position:absolute;inset:0;display:grid;place-items:center;background:rgb(0 0 0 / 35%);color:white;font-size:72px;font-weight:700;}
.fx-recorder-status {display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-weight:600;font-variant-numeric:tabular-nums;}
.fx-recorder-message {color:var(--text-2);font-size:13px;margin:6px 0;}
.fx-recorder-message:empty {display:none;}
.fx-recorder-devices {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.fx-recorder-sliders {display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:12px;}
.fx-recorder .field {min-width:0;}
.fx-recorder .field-label {display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;}
.fx-recorder-number {display:flex;align-items:center;gap:6px;}
.fx-recorder-number .input {min-width:52px;padding-inline:10px;appearance:textfield;-moz-appearance:textfield;}
.fx-recorder-number .input::-webkit-inner-spin-button,.fx-recorder-number .input::-webkit-outer-spin-button {appearance:none;margin:0;}
.fx-recorder-unit {white-space:nowrap;color:var(--text-2);}
.fx-recorder-steps {display:grid;flex:none;gap:2px;}
.fx-recorder-steps .btn {width:28px;height:22px;min-height:22px;padding:0;box-shadow:none;}
.fx-recorder-steps svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
@media(max-width:600px){.fx-recorder-sliders .field {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,160px);align-items:center;gap:8px;}.fx-recorder-sliders .field-label {margin:0;}.fx-recorder-steps .btn {width:44px;height:44px;min-height:44px;}}
.fx-recorder-actions {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0;}
.fx-recorder-icon {width:44px;height:44px;padding:0;flex:0 0 44px;}
.fx-recorder-icon svg {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.fx-recorder-record {width:56px;height:56px;padding:4px;flex:0 0 56px;border:2px solid var(--text-3);}
.fx-recorder-record-shape {display:block;width:40px;height:40px;border-radius:50%;background:var(--danger);transition:width .15s,height .15s,border-radius .15s;}
.fx-recorder-record[data-recording=true] .fx-recorder-record-shape {width:22px;height:22px;border-radius:4px;}
.fx-recorder-actions [hidden] {display:none;}
.design-select-trigger {display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;font:inherit;}
.design-select-menu {position:fixed;z-index:190;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);max-height:min(240px,var(--menu-available-height,calc(100dvh - 32px)));overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:6px;}
.design-select-menu[hidden] {display:none;}
.design-select-option {display:block;appearance:none;width:100%;border:0;border-radius:var(--r-md);padding:10px 12px;background:transparent;color:var(--text);text-align:left;font:inherit;overflow-wrap:anywhere;cursor:pointer;}
.design-select-option:hover,.design-select-option:focus-visible {background:var(--surface-2);outline:2px solid var(--accent);outline-offset:-2px;}
.design-select-option[aria-selected=true] {background:var(--accent-soft);}
.fx-recordings {display:grid;gap:8px;margin-top:10px;}
.fx-recording-row {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;}
.fx-recording-row small {display:block;color:var(--text-2);}
.fx-recording-actions {display:flex;align-items:center;gap:6px;}
.fx-recording-row>.fx-recording-player {flex:0 0 100%;}
.fx-recording-player {width:100%;max-height:320px;border-radius:var(--r-md);background:var(--text);}
.fx-source-actions {display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:6px;}
.fx-storage {position:relative;display:flex;align-items:center;width:144px;height:44px;max-width:50%;cursor:default;border-radius:var(--r-sm);}
html[data-keyboard-focus="true"] .fx-storage:focus-visible {outline:none !important;}
.fx-storage-track {display:block;width:100%;height:6px;background:var(--border);border-radius:var(--r-pill);overflow:hidden;}
.fx-storage-fill {display:block;height:100%;width:0;background:var(--ok);border-radius:inherit;}
.fx-storage[data-level="warning"] .fx-storage-fill {background:var(--warning);}
.fx-storage[data-level="danger"] .fx-storage-fill {background:var(--danger);}
.fx-storage-tip {position:absolute;bottom:calc(100% + 4px);right:0;padding:8px 12px;white-space:nowrap;background:var(--surface);color:var(--text);font-size:13px;border-radius:var(--r-md);box-shadow:var(--shadow-md);visibility:hidden;z-index:5;}
.fx-storage:hover .fx-storage-tip,.fx-storage:focus .fx-storage-tip {visibility:visible;}
.fx-storage.is-unavailable .fx-storage-track {opacity:.5;}
@media(max-width:600px){.fx-recorder-window-actions .btn {min-height:44px;}.fx-recorder-body {padding:0 10px 10px;}.fx-recorder-devices {grid-template-columns:1fr;gap:8px;}.fx-recorder-sliders {grid-template-columns:1fr;gap:6px;}.fx-recorder-prompt {inset:5% 4% 12%;padding:10px;}.fx-recorder-stage {width:calc(100% + 20px);margin-inline:-10px;height:clamp(180px,32vh,300px);}.fx-recorder-actions .btn {min-height:44px;}.design-select-option {min-height:44px;}}

/* Compact recorder: controls stay below the camera; window and prompt keep invisible resize targets. */
.fx-recorder-body {flex:1;}
.fx-recorder-workspace {position:relative;width:calc(100% + 24px);margin-inline:-12px;min-height:120px;background:var(--surface-2);overflow:hidden;}
.fx-recorder-stage,.fx-recorder-stage[data-format=portrait],.fx-recorder-stage[data-format=landscape] {position:absolute;margin:0;aspect-ratio:auto;min-width:0;min-height:0;}
.fx-recorder-image {position:absolute;overflow:hidden;}
.fx-recorder-image video {width:100%;height:100%;object-fit:cover;}
.fx-recorder-image video.is-camo-preview {position:absolute;left:50%;top:50%;}
.fx-recorder-prompt-box {position:absolute;cursor:grab;touch-action:pan-y;}
.fx-recorder-prompt-box:active {cursor:grabbing;}
.fx-recorder-prompt-box[hidden],.fx-recorder-sliders[hidden] {display:none;}
.fx-recorder-prompt {inset:0;padding:14px 16px;touch-action:pan-y;overscroll-behavior:contain;}
.fx-prompt-drag {position:absolute;top:18px;left:calc(50% - 16px);height:20px;width:32px;background:transparent;border:0;cursor:grab;touch-action:none;}
.fx-recorder-device {display:flex;align-items:center;gap:0;flex:none;}
.fx-device-arrow {width:32px;height:44px;padding:0;border:0;box-shadow:none;background-position:center;border-radius:var(--r-button);}
.fx-recorder-actions {gap:6px;margin:8px 0;justify-content:center;}

.fx-recorder-sliders {padding:12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);}
.fx-grip {position:absolute;z-index:4;padding:0;border:0;background:transparent;touch-action:none;}
.fx-grip:focus-visible {outline:2px solid var(--accent);outline-offset:-2px;}
.fx-grip-n,.fx-grip-s {left:16px;right:16px;height:8px;cursor:ns-resize;}
.fx-grip-n {top:0;}.fx-grip-s {bottom:0;}
.fx-grip-e,.fx-grip-w {top:16px;bottom:16px;width:8px;cursor:ew-resize;}
.fx-grip-e {right:0;}.fx-grip-w {left:0;}
.fx-grip-nw,.fx-grip-ne,.fx-grip-sw,.fx-grip-se {width:16px;height:16px;}
.fx-grip-nw,.fx-grip-se {cursor:nwse-resize;}.fx-grip-ne,.fx-grip-sw {cursor:nesw-resize;}
.fx-grip-nw {top:0;left:0;}.fx-grip-ne {top:0;right:0;}.fx-grip-sw {bottom:0;left:0;}.fx-grip-se {bottom:0;right:0;}
.fx-recorder-prompt-box>.fx-grip {z-index:6;}
@media(max-width:600px){.fx-recorder-workspace {width:calc(100% + 20px);margin-inline:-10px;}.fx-recorder-prompt {inset:0;padding:10px;}.fx-recorder-sliders {gap:8px;}}
.fx-recorder>[data-box=window] {z-index:10;}

.fx-prompt-drag {top:18px;z-index:8;}
.fx-recorder-icon .fx-microphone-level {fill:var(--ok);stroke:none;}
.fx-recorder-body {cursor:grab;}
.fx-recorder.is-dragging .fx-recorder-body {cursor:grabbing;}
.fx-recorder-workspace,.fx-recorder-actions,.fx-recorder-window-actions,.fx-recorder-status,.fx-recorder-message {touch-action:none;}
.fx-recorder-controls:focus-visible {outline:2px solid var(--accent);outline-offset:-2px;}
.fx-recorder .field,.fx-recorder-stage video[controls] {cursor:auto;}

/* Camera settings use the recorder surface and shared form controls. */
.fx-recorder-main {min-width:0;}
.fx-camera-panel[hidden] {display:none;}
.fx-camera-panel {min-width:0;overflow:auto;scrollbar-width:none;cursor:auto;padding:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);}
.fx-camera-panel::-webkit-scrollbar {display:none;}
.fx-recorder.has-camera-settings .fx-recorder-body {display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start;padding-top:12px;}
.fx-recorder.has-camera-settings .fx-camera-panel {max-height:calc(100% - 4px);height:100%;}
.fx-recorder.has-camera-settings .fx-recorder-workspace {width:100%;margin:0;}
.fx-camera-heading {display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;}
.fx-camera-heading strong {font-size:16px;}
.fx-camera-pair {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:10px;}
.fx-camera-panel .field {display:block;margin-top:12px;}
.fx-camera-panel .field-note,.fx-camera-source {font-size:12px;line-height:1.5;color:var(--text-2);margin:8px 0;}
.fx-camera-panel .select {width:100%;}
.fx-camera-number {display:flex;align-items:center;gap:8px;}
.fx-camera-number .input {width:100%;min-width:0;}
.fx-camera-number span {color:var(--text-2);font-size:12px;}
.fx-camera-details {border-top:1px solid var(--border);margin-top:16px;padding-top:12px;}
.fx-camera-details summary {cursor:pointer;font-weight:500;min-height:32px;}
.fx-camera-details summary::marker {color:var(--text-3);}
.fx-camera-details input[type=range] {width:100%;accent-color:var(--accent);}
.fx-camera-check {display:flex;align-items:center;gap:8px;min-height:32px;font-size:13px;}
.fx-camera-check input {margin:0;accent-color:var(--accent);}
.fx-camera-guide {position:absolute;inset:6% 9% 21%;border:1px dashed rgb(255 255 255 / .8);pointer-events:none;}
.fx-camera-guide[hidden] {display:none;}
.fx-camera-guide span {position:absolute;bottom:4px;left:6px;font-size:11px;color:white;background:rgb(0 0 0 / .45);padding:2px 4px;border-radius:var(--r-sm);}
.fx-camera-source {font-variant-numeric:tabular-nums;}
.fx-camera-panel .fx-recorder-sliders {grid-template-columns:1fr;padding:0;border:0;background:transparent;}
.fx-camera-panel .fx-recorder-sliders .field {display:grid;grid-template-columns:1fr minmax(0,170px);gap:6px;align-items:center;}
.fx-camera-panel .fx-recorder-sliders .field-label {margin:0;}
@media(max-width:959px){.fx-recorder.has-camera-settings .fx-recorder-body {display:block;padding-top:0;}.fx-recorder.has-camera-settings .fx-camera-panel {height:auto;max-height:300px;margin-top:12px;}.fx-recorder.has-camera-settings .fx-recorder-workspace {width:calc(100% + 24px);margin-inline:-12px;}}
@media(max-width:600px){.fx-recorder.has-camera-settings .fx-recorder-workspace {width:calc(100% + 20px);margin-inline:-10px;}.fx-camera-pair {grid-template-columns:1fr;}.fx-camera-panel .input {font-size:16px;}.fx-camera-check {min-height:44px;}.fx-camera-details summary {min-height:44px;}}