.offer-video-editor {
    --ove-bg: #141a2a;
    --ove-text: #f8fafc;
    --ove-border: #78849b;
    --ove-control: #252f45;
    box-sizing: border-box;
    width: min(760px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: clamp(16px, 3vw, 28px);
    overflow: auto;
    border: 1px solid var(--ove-border);
    border-radius: 20px;
    background: var(--ove-bg);
    color: var(--ove-text);
    font: inherit;
    line-height: 1.5;
    color-scheme: dark;
}
:root[data-theme="light"] .offer-video-editor,
body[data-theme="light"] .offer-video-editor {
    --ove-bg: #ffffff;
    --ove-text: #0a0e1a;
    --ove-border: #596479;
    --ove-control: #eef0f5;
    color-scheme: light;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .offer-video-editor {
        --ove-bg: #ffffff;
        --ove-text: #0a0e1a;
        --ove-border: #596479;
        --ove-control: #eef0f5;
        color-scheme: light;
    }
}
.offer-video-editor::backdrop { background: rgb(0 0 0 / 72%); }
.offer-video-editor *, .offer-video-editor *::before, .offer-video-editor *::after { box-sizing: border-box; }
.offer-video-editor [hidden] { display: none !important; }
.ove-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ove-header h2 { color: var(--ove-text); margin: 0; font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.25; }
.ove-hint, .ove-status, .ove-error { color: var(--ove-text); font-size: 1rem; margin: 14px 0; overflow-wrap: anywhere; }
.ove-caption { color: var(--ove-text); font-size: 1rem; margin: 16px 0 8px; }
#ove-video-preview { display: block; width: 100%; max-height: min(47dvh, 440px); border-radius: 12px; background: #080b14; object-fit: contain; }
.ove-selection { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 16px 0; }
.ove-selection label, .ove-range { color: var(--ove-text); font-weight: 600; }
#ove-start-slider { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 40px; margin: 0; accent-color: #6d28d9; }
.ove-range { text-align: end; }
.offer-video-editor progress { display: block; width: 100%; height: 14px; margin: 14px 0; accent-color: #6d28d9; }
.ove-error { border-inline-start: 4px solid currentColor; padding: 10px 12px; font-weight: 600; }
.ove-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.offer-video-editor button, .offer-video-editor .ove-actions a {
    min-height: 44px; max-width: 100%; padding: 10px 16px; border: 1px solid var(--ove-border);
    border-radius: 10px; background: var(--ove-control); color: var(--ove-text);
    font: inherit; font-weight: 650; text-align: center; text-decoration: none; cursor: pointer; overflow-wrap: anywhere;
}
.offer-video-editor .ove-primary { background: #4c1d95; color: #ffffff; border-color: #4c1d95; }
.offer-video-editor .ove-close { flex: 0 0 44px; width: 44px; padding: 0; font-size: 1.7rem; line-height: 1; }
.offer-video-editor button:disabled { opacity: .65; cursor: default; }
.offer-video-editor :focus-visible { outline: 3px solid var(--ove-text); outline-offset: 3px; }
.ove-encoder { position: fixed; width: 2px; height: 2px; inset-inline-start: -20px; inset-block-start: 0; pointer-events: none; }
@media (max-width: 480px) {
    .ove-actions { justify-content: stretch; }
    .ove-actions > * { flex: 1 1 140px; }
    .ove-selection { grid-template-columns: 1fr; }
    .ove-range { grid-column: 1; text-align: start; }
    #ove-start-slider { grid-row: auto; }
}