/* The uploaded preview replaces the empty drop zone inside the same workspace. */
.video-upload-area{border:1px dashed #b6c9aa;border-radius:12px;background:#f7faf3;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.video-upload-area>.upload-zone{border:0;border-radius:0;min-height:174px}
.video-upload-area .upload-symbol{font-size:52px;line-height:1;font-weight:400}
.video-upload-area.has-videos{border-style:solid;border-color:#dce5dc;background:#fff}
.video-upload-area.has-videos>.upload-zone{display:none}
.video-upload-area.dragging{border-color:#246b55;box-shadow:0 0 0 3px #246b5520}
.video-upload-area.dragging>.upload-zone{background:#e4f1e7}
.video-upload-area .video-editor-heading{margin:0;padding:15px 18px;gap:12px;background:#f8faf6;border-bottom:1px solid #e5eae5}
.video-editor-heading h3{margin:0;font-size:13px;line-height:1.5;overflow-wrap:anywhere;min-width:0}
.video-editor-heading #region-count{font-size:11px;white-space:nowrap}
.video-preview-surface{background:#121b17;display:flex;align-items:center;justify-content:center;min-height:160px;overflow:hidden}
.video-upload-area .video-stage{margin:0 auto;border-radius:0;max-width:100%}
.video-upload-area .video-stage video{max-height:440px;max-width:100%;width:auto}
.video-editor-toolbar{padding:13px 16px 12px}
.video-upload-area .video-controls{gap:8px;flex-wrap:wrap}
.video-upload-area .video-controls .button{font-size:12px;padding:7px 10px;min-height:33px;white-space:nowrap}
.video-upload-area .video-controls .text-button{font-size:12px;white-space:nowrap}
.video-upload-area .video-controls #video-scrub{min-width:90px;flex:1}
.video-upload-area .video-controls #video-time{font-size:11px;white-space:nowrap}
.video-upload-area .editor-volume{margin:10px 0 0;gap:8px}
.video-upload-area .editor-volume .volume-slider{width:86px}
.video-upload-area .video-queue{margin:0;padding:13px 16px;gap:10px;background:#f8faf6;border-top:1px solid #e5eae5;align-items:center}
.video-upload-area .video-thumb{flex-basis:92px;background:#fff}
.video-upload-area .video-thumb-select img,.video-upload-area .video-thumb-select video{width:82px;height:53px}
.video-upload-area .video-thumb-select span{max-width:82px;font-size:10px}
.video-upload-area .video-add-more{flex-basis:64px;height:64px;background:#fff}
.video-upload-area .file-info{padding:12px 16px;background:#f8faf6;margin:0}
.video-workspace>.video-requirements{margin:11px 0 0;line-height:1.7}
.video-workspace>.section-divider{margin:25px 0}
.video-workspace>.form-footer{margin-top:22px}
@media(min-width:1600px){.video-upload-area .video-stage video{max-height:480px}}
@media(max-width:700px){.video-upload-area .video-editor-heading{padding:12px}.video-editor-toolbar{padding:11px 12px}.video-upload-area .video-stage video{max-height:380px}.video-upload-area .video-controls #video-scrub{order:5;flex-basis:calc(100% - 95px);min-width:0}.video-upload-area .video-controls #video-time{order:6}.video-upload-area .video-queue{padding:12px}.video-editor-heading h3{font-size:12px}.video-workspace>.section-divider{margin:22px 0}}
@media(prefers-reduced-motion:reduce){.video-upload-area{transition:none}}

.video-upload-progress{padding:14px 16px;background:#eaf3ed;border-top:1px solid #cbded0}.upload-progress-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.upload-progress-heading strong{font-size:12px;line-height:1.7;flex:1;min-width:140px;color:#28624c}.upload-progress-spinner{width:16px;height:16px;flex-shrink:0;border:2px solid #b9d3c0;border-top-color:#28624c;border-radius:50%;animation:download-spin .8s linear infinite}.upload-progress-heading .upload-cancel{color:#b76152;white-space:nowrap}.upload-progress-heading .upload-cancel:disabled{color:#9ba897;cursor:default}.video-upload-progress>p{font-size:11px;color:#708870;margin:7px 0;overflow-wrap:anywhere}.upload-progress-track{height:5px;background:#d7e6d9;border-radius:5px;overflow:hidden}.upload-progress-track i{display:block;height:100%;width:0;background:#2b6f51;transition:width .15s}.video-upload-progress[hidden]{display:none}.video-upload-area:has(.video-upload-progress:not([hidden]))>.upload-zone{pointer-events:none}.video-upload-area:has(.video-upload-progress:not([hidden])) .video-add-more{opacity:.5;pointer-events:none}@media(prefers-reduced-motion:reduce){.upload-progress-spinner{animation:none}.upload-progress-track i{transition:none}}

/* Keep the action area visible on ordinary desktop screens. */
main:has(#page-video.active){padding-top:18px}
#page-video .stepper{padding:8px 16px;margin-bottom:10px}
.video-workspace{padding:20px}
.video-workspace>.panel-title{margin-bottom:12px}
.video-upload-area .video-editor-heading{padding:9px 12px}
.video-upload-area .video-stage video{max-height:clamp(180px,calc(100dvh - 650px),360px)}
.video-upload-area .video-preview-surface{min-height:0}
.video-editor-toolbar{padding:10px 12px}
.video-upload-area .video-queue{padding:9px 12px}
.video-upload-area .video-thumb-select img,.video-upload-area .video-thumb-select video{height:42px}
.video-upload-area .video-add-more{height:58px}
.video-workspace>.section-divider{margin:12px 0}
.video-workspace .video-modes button{padding:9px 20px}
.video-workspace>.form-footer{margin-top:10px;padding-top:10px}
@media(max-width:700px){.video-upload-area .video-stage video{max-height:320px}.video-workspace{padding:18px}}