.ew-vto-intro { display:grid; gap:8px; margin:24px 0; }
.ew-vto-intro span { font-size:13px; color:var(--ew-ink-soft); }
.ew-vto-open { background:white; border:1px solid var(--ew-yellow-deep); color:var(--ew-yellow-deep); min-height:48px; border-radius:4px; }
.ew-vto-open:hover { background:var(--ew-wash); }
.ew-vto-modal[hidden], .ew-vto-modal [hidden] { display:none!important; }
.ew-vto-modal { position:fixed; z-index:99999; inset:0; display:grid; place-items:center; padding:24px; }
.ew-vto-backdrop { position:absolute; inset:0; background:rgba(10,18,23,.76); }
.ew-vto-dialog { position:relative; width:min(100%,1040px); max-height:calc(100dvh - 48px); overflow:auto; background:#fff; border-radius:8px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr); box-shadow:0 20px 80px #0004; }
.ew-vto-head { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--ew-rule); position:sticky; top:0; background:white; z-index:4; }
.ew-vto-head h2 { margin:3px 0 0; font-size:26px; letter-spacing:-.03em; }
.ew-vto-head .ew-kicker { color:var(--ew-yellow-deep); }
.ew-vto-close { width:44px; height:44px; min-width:44px; padding:0; background:#f3f5f4; color:var(--ew-ink); border:0; font-size:28px; border-radius:4px; font-weight:400; }
.ew-vto-stage { position:relative; align-self:start; margin:24px 0 24px 24px; aspect-ratio:4/3; max-height:60dvh; background:#1e2b31; overflow:hidden; border-radius:4px; }
.ew-vto-stage video, .ew-vto-stage canvas, .ew-vto-stage #ew-vto-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; max-width:none; }
.ew-vto-stage video, .ew-vto-stage #ew-vto-photo { transform:scaleX(-1); }
.ew-vto-stage canvas { z-index:2; pointer-events:none; }
.ew-vto-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; padding:28px; color:white; text-align:center; }
.ew-vto-placeholder span { font-size:14px; color:#d5e1e6; }
.ew-vto-placeholder strong { font-size:17px; }
.ew-vto-placeholder .ew-vto-frame-preview { width:90%; max-height:110px; object-fit:contain; background:#e1c6b0; border-radius:4px; padding:12px; }
.ew-vto-stage.is-running .ew-vto-placeholder { display:none; }
.ew-vto-controls { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:24px; align-content:start; font-size:14px; }
.ew-vto-controls label { display:block; font-weight:600; }
.ew-vto-controls input:not([type="range"]), .ew-vto-controls select { width:100%; min-height:44px; padding:8px; margin-top:6px; border:1px solid #aeb7bb; border-radius:4px; font:inherit; color:var(--ew-ink); background:white; }
.ew-vto-controls input[type="range"] { display:block; width:100%; margin:8px 0 0; accent-color:var(--ew-yellow-deep); min-height:24px; }
.ew-vto-color-label, .ew-vto-actions, .ew-vto-photo-controls, .ew-vto-final-actions, .ew-vto-status, .ew-vto-fit-result, .ew-vto-privacy, .ew-vto-note { grid-column:1/-1; }
.ew-vto-label-row { display:flex; justify-content:space-between; gap:8px; }
.ew-vto-actions, .ew-vto-final-actions { display:flex; gap:10px; flex-wrap:wrap; }
.ew-vto-controls button { flex:1; min-height:44px; padding:10px 14px; font-size:12px; border-radius:4px; background:var(--ew-yellow-deep); color:white; }
.ew-vto-controls .ew-vto-secondary { background:white; color:var(--ew-ink); border:1px solid var(--ew-rule); }
.ew-vto-photo-controls small { display:block; color:var(--ew-ink-soft); font-size:12px; margin-top:6px; }
.ew-vto-status { margin:0; min-height:1.5em; font-weight:600; }
.ew-vto-status[data-state="error"] { color:var(--ew-error); }
.ew-vto-fit-result { display:grid; gap:3px; padding:12px; margin:0; background:var(--ew-paper); font-size:13px; }
.ew-vto-fit-result span { color:var(--ew-ink-soft); }
.ew-vto-privacy, .ew-vto-note { font-size:12px; margin:0; color:var(--ew-ink-soft); }
.ew-vto-privacy { padding-top:16px; border-top:1px solid var(--ew-rule); }
.ew-vto-modal :focus-visible { outline:3px solid var(--ew-yellow-deep); outline-offset:3px; }
body.ew-vto-opened { overflow:hidden; }
@media(max-width:760px) {
 .ew-vto-modal { padding:0; }
 .ew-vto-dialog { display:block; width:100%; max-height:100dvh; height:100dvh; border-radius:0; }
 .ew-vto-head { padding:12px 16px; }
 .ew-vto-head h2 { font-size:22px; }
 .ew-vto-stage { margin:16px; max-height:42dvh; }
 .ew-vto-controls { padding:0 16px 24px; }
}