/* The video editor (Pages/Video) and everything js/video-ui.js, video-timeline.js and video-inspector.js build inside it.
   It reuses the photo editor's chrome — menus, dialogs, buttons, sliders, toasts are photo.css's .pe-* — and adds .ve-* for
   the parts a photo editor does not have. Chrome follows the app's tokens, so it follows light and dark with the rest of the site. */

.ve {
    --ve-tl-h: 40%;
    --ve-left: 16.5rem;
    --ve-right: 20rem;
    --ve-video: #3866d6;
    --ve-image: #2191b8;
    --ve-audio: #1b9a6a;
    --ve-text: #7c4ddb;
    --ve-color: #d9741a;
    --ve-adjust: #0e8f9c;
    --ve-wave: rgba(255, 255, 255, .88);
    --ve-playhead: var(--rl-danger);
}

.ve-work { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: var(--ve-left) minmax(0, 1fr) var(--ve-right); }
.ve-split { flex: none; height: 7px; cursor: row-resize; background: var(--rl-surface); border-top: 1px solid var(--pe-line); border-bottom: 1px solid var(--pe-line); position: relative; touch-action: none; }
.ve-split::after { content: ""; position: absolute; left: 50%; top: 2px; width: 3rem; height: 2px; margin-left: -1.5rem; border-radius: 2px; background: var(--rl-text-muted); opacity: .5; }
.ve-split:hover::after { opacity: 1; background: var(--rl-accent); }
.ve-tl { flex: none; height: var(--ve-tl-h); min-height: 140px; display: flex; flex-direction: column; background: var(--rl-surface); }

.ve-name { border: 0; background: transparent; padding: .25rem .5rem; border-radius: 8px; cursor: pointer; font-weight: 600; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-name:hover { background: var(--rl-surface-sunken); }
.ve-savestate { font-size: .72rem; color: var(--rl-text-muted); padding: 0 .3rem; white-space: nowrap; }
.ve-savestate--error { color: var(--rl-danger); font-weight: 600; }
.ve-savestate--dirty, .ve-savestate--saving { opacity: .7; }
.ve-sep { width: 1px; align-self: stretch; margin: .25rem .3rem; background: var(--pe-line); }

/* ---- left panel ---- */
.ve-left { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--pe-line); background: var(--rl-surface); }
.ve-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--pe-line); }
.ve-tab { display: flex; flex-direction: column; align-items: center; gap: .1rem; border: 0; background: transparent; padding: .4rem .1rem .3rem; cursor: pointer; font-size: .66rem; color: var(--rl-text-muted); border-bottom: 2px solid transparent; }
.ve-tab:hover { color: var(--rl-text); background: var(--rl-surface-sunken); }
.ve-tab.is-on { color: var(--rl-text); border-bottom-color: var(--rl-accent); }
.ve-pane { flex: 1; min-height: 0; overflow-y: auto; padding: .5rem; display: flex; flex-direction: column; gap: .5rem; }
.ve-pane__tools { display: flex; gap: .3rem; }
.ve-pane__hint { margin: 0; }
.ve-search { font-size: .8rem; padding: .3rem .5rem; }
.ve-medialist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; align-content: start; }
.ve-media { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: .25rem; border: 1px solid var(--pe-line); border-radius: 9px; background: var(--rl-surface-raised); cursor: grab; }
.ve-media:hover { border-color: var(--rl-accent); }
.ve-media.is-sel { border-color: var(--rl-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rl-accent) 35%, transparent); }
.ve-media__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #0d0f12; display: grid; place-items: center; color: #8b93a1; }
.ve-media__thumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.ve-media__thumb--audio { background: #0f2a22; color: #34d399; }
.ve-media__dur { position: absolute; right: 3px; bottom: 3px; font-size: .64rem; background: rgba(0, 0, 0, .7); color: #fff; padding: 0 .3rem; border-radius: 4px; }
.ve-media__name { font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-media__used { position: absolute; top: 5px; left: 5px; font-size: .62rem; background: var(--rl-accent); color: var(--rl-accent-contrast); padding: 0 .3rem; border-radius: 4px; }
.ve-media__err { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(160, 20, 20, .6); color: #fff; font-weight: 800; font-size: 1.4rem; }
.ve-media__spin { position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: ve-spin .8s linear infinite; }
@keyframes ve-spin { to { transform: rotate(360deg); } }
.ve-empty { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; padding: .8rem; border: 2px dashed var(--pe-line); border-radius: 12px; color: var(--rl-text-muted); }
.ve-empty p { margin: 0; font-size: .8rem; }
.ve-fxlist { display: flex; flex-direction: column; gap: .15rem; }
.ve-grouphead { margin: .5rem 0 .15rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rl-text-muted); }
.ve-item { display: flex; align-items: center; gap: .5rem; text-align: left; border: 1px solid transparent; background: transparent; padding: .32rem .45rem; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; }
.ve-item:hover { background: var(--rl-surface-sunken); border-color: var(--pe-line); }
.ve-item__ico { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 6px; background: var(--rl-surface-sunken); color: var(--rl-text-muted); flex: none; }

/* ---- monitor ---- */
.ve-mon { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ve-stage { flex: 1; min-height: 0; display: grid; place-items: center; background: var(--pe-work); overflow: hidden; }
.ve-frame { position: relative; background: #000; box-shadow: var(--pe-shadow); touch-action: none; }
.ve-frame:fullscreen { box-shadow: none; display: grid; place-items: center; }
.ve-canvas { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.ve-ov { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.ve-frame:fullscreen .ve-ov { display: none; }
.ve-box { position: absolute; display: none; border: 2px solid var(--rl-accent); box-sizing: border-box; cursor: move; pointer-events: auto; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.ve-hd { position: absolute; width: 11px; height: 11px; margin: -6px 0 0 -6px; background: #fff; border: 2px solid var(--rl-accent); border-radius: 3px; box-sizing: border-box; pointer-events: auto; }
.ve-hd--tl { left: 0; top: 0; cursor: nwse-resize; } .ve-hd--t { left: 50%; top: 0; cursor: ns-resize; } .ve-hd--tr { left: 100%; top: 0; cursor: nesw-resize; }
.ve-hd--r { left: 100%; top: 50%; cursor: ew-resize; } .ve-hd--br { left: 100%; top: 100%; cursor: nwse-resize; } .ve-hd--b { left: 50%; top: 100%; cursor: ns-resize; }
.ve-hd--bl { left: 0; top: 100%; cursor: nesw-resize; } .ve-hd--l { left: 0; top: 50%; cursor: ew-resize; }
.ve-rot { position: absolute; left: 50%; top: -30px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--rl-accent); cursor: grab; pointer-events: auto; box-sizing: border-box; }
.ve-rot::before { content: ""; position: absolute; left: 3px; top: 8px; width: 2px; height: 20px; background: var(--rl-accent); }
.ve-guide { position: absolute; display: none; background: #f0abfc; pointer-events: none; }
.ve-guide--h { left: 0; right: 0; top: 50%; height: 1px; } .ve-guide--v { top: 0; bottom: 0; left: 50%; width: 1px; }
.ve-safe { position: absolute; inset: 0; pointer-events: none; }
.ve-safe__a { position: absolute; inset: 5%; border: 1px dashed rgba(255, 255, 255, .65); }
.ve-safe__t { position: absolute; inset: 10%; border: 1px dashed rgba(255, 255, 255, .4); }
.ve-mon__bar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: .15rem .2rem; padding: .3rem .6rem; border-top: 1px solid var(--pe-line); background: var(--rl-surface); }
.ve-play { width: 2.3rem; }
.ve-tc { display: inline-flex; align-items: baseline; gap: .4rem; margin: 0 .5rem; }
.ve-tc-big { font: 600 1.05rem ui-monospace, Consolas, monospace; border: 0; background: var(--rl-surface-sunken); color: inherit; padding: .12rem .5rem; border-radius: 6px; cursor: text; font-variant-numeric: tabular-nums; }
.ve-tc-input { font: 600 1.05rem ui-monospace, Consolas, monospace; width: 9rem; padding: .12rem .5rem; border-radius: 6px; border: 1px solid var(--rl-accent); background: var(--rl-surface); color: inherit; }
.ve-dur { font: .8rem ui-monospace, Consolas, monospace; color: var(--rl-text-muted); }
.ve-meter { display: inline-flex; flex-direction: column; gap: 2px; width: 58px; margin: 0 .5rem; }
.ve-meter__t { height: 5px; background: var(--rl-surface-sunken); border-radius: 3px; overflow: hidden; }
.ve-meter__b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rl-ok) 65%, #facc15 85%, var(--rl-danger)); transition: width .06s linear; }
.ve-mon__bar .pe-sel--compact { flex-direction: row; align-items: center; gap: .3rem; }

/* ---- inspector ---- */
.ve-right { min-height: 0; overflow-y: auto; border-left: 1px solid var(--pe-line); background: var(--rl-surface); }
.ve-ins { display: flex; flex-direction: column; padding-bottom: 2rem; }
.ve-ins__head { display: flex; flex-direction: column; padding: .6rem .8rem .5rem; border-bottom: 1px solid var(--pe-line); gap: .1rem; }
.ve-ins__head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-ins__sub { font-size: .74rem; color: var(--rl-text-muted); }
.ve-ins__tip { padding: .6rem .8rem; }
.ve-sec { border-bottom: 1px solid var(--pe-line); }
.ve-sec > summary { display: flex; align-items: center; gap: .4rem; padding: .45rem .8rem; cursor: pointer; font-weight: 600; font-size: .78rem; list-style: none; }
.ve-sec > summary::-webkit-details-marker { display: none; }
.ve-sec > summary .pe-ico { transition: transform .15s; }
.ve-sec[open] > summary .pe-ico { transform: rotate(90deg); }
.ve-sec__count { margin-left: auto; font-size: .66rem; background: var(--rl-surface-sunken); border-radius: 8px; padding: 0 .4rem; color: var(--rl-text-muted); }
.ve-sec__count:empty { display: none; }
.ve-sec__body { display: flex; flex-direction: column; gap: .5rem; padding: .1rem .8rem .8rem; }
.ve-ins .pe-rng { display: grid; grid-template-columns: 5.8rem minmax(0, 1fr) auto; align-items: center; gap: .4rem; width: 100%; }
.ve-ins .pe-rng__label { font-size: .74rem; color: var(--rl-text-muted); }
.ve-ins .pe-rng input[type=range] { width: 100%; min-width: 0; }
.ve-ins .pe-rng__num { width: 3.7rem; }
.ve-ins .pe-sel--compact { display: grid; grid-template-columns: 5.8rem minmax(0, 1fr); align-items: center; gap: .4rem; }
.ve-ins .pe-sel--compact select, .ve-ins .pe-input, .ve-ins .pe-sel input[type=color] { width: 100%; min-width: 0; }
.ve-ins .pe-sel { display: grid; grid-template-columns: 5.8rem minmax(0, 1fr); align-items: center; gap: .4rem; }
.ve-ins .pe-form__row { gap: .5rem; }
.ve-ins .pe-form__row > * { min-width: 0; }
.ve-ins .pe-form__row .pe-rng, .ve-ins .pe-form__row .pe-sel { grid-template-columns: 1fr; }
.ve-ins .pe-form__row .pe-rng .pe-rng__label, .ve-ins .pe-form__row .pe-sel .pe-sel__label { grid-column: 1 / -1; }
.ve-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .2rem; }
.ve-scale { position: relative; display: flex; flex-direction: column; gap: .5rem; }
.ve-dia { border: 0; background: transparent; padding: .15rem; border-radius: 5px; cursor: pointer; color: var(--rl-text-muted); display: grid; place-items: center; opacity: .55; }
.ve-dia:hover { opacity: 1; background: var(--rl-surface-sunken); }
.ve-dia.is-animated { color: #f59e0b; opacity: 1; }
.ve-dia.is-on { color: #f59e0b; opacity: 1; }
.ve-dia.is-on svg path { fill: currentColor; }
.ve-btnrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.ve-tc { font-variant-numeric: tabular-nums; }
.ve-ins .ve-tc { margin: 0; }
.ve-textarea { resize: vertical; min-height: 4rem; font: inherit; user-select: text; }
.ve-mini { min-width: 1.5rem; height: 1.5rem; }
.ve-fx { border: 1px solid var(--pe-line); border-radius: var(--rl-radius); background: var(--rl-surface-raised); }
.ve-fx.is-off { opacity: .6; }
.ve-fx__head { display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem .3rem .6rem; font-size: .78rem; }
.ve-fx__body { display: flex; flex-direction: column; gap: .4rem; padding: .1rem .6rem .6rem; }
.ve-animrow { display: grid; grid-template-columns: 1fr auto auto; gap: .3rem; align-items: center; font-size: .76rem; }
.ve-kf-ease { font: inherit; font-size: .72rem; padding: .1rem .2rem; border: 1px solid var(--pe-line); border-radius: 6px; background: var(--rl-surface); color: var(--rl-text); }
.ve-markrow { display: grid; grid-template-columns: auto 1fr auto auto; gap: .3rem; align-items: center; font-size: .78rem; }
.ve-markrow__t { border: 0; background: transparent; color: var(--rl-accent); font-family: ui-monospace, Consolas, monospace; cursor: pointer; padding: 0; }
.ve-markrow__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rl-text-muted); }

/* ---- timeline ---- */
.ve-tl__bar { flex: none; display: flex; align-items: center; gap: .1rem; padding: .2rem .5rem; border-bottom: 1px solid var(--pe-line); background: var(--rl-surface); min-height: 2.3rem; }
.ve-tl__info { font-size: .74rem; color: var(--rl-text-muted); margin-right: .6rem; white-space: nowrap; }
.ve-zoom { width: 7rem; }
.ve-tl--razor .ve-clip, .ve-tl--razor .ve-clip * { cursor: crosshair !important; }
.ve-tl__scroll { flex: 1; min-height: 0; overflow: auto; position: relative; background: var(--pe-work); overscroll-behavior: contain; }
.ve-tl__inner { position: relative; min-height: 100%; }
.ve-ruler-row { position: sticky; top: 0; z-index: 6; display: flex; height: 30px; background: var(--rl-surface); border-bottom: 1px solid var(--pe-line); }
.ve-corner { position: sticky; left: 0; z-index: 9; flex: none; width: 184px; display: flex; align-items: center; justify-content: center; background: var(--rl-surface); border-right: 1px solid var(--pe-line); font: 600 .78rem ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.ve-ruler { position: relative; flex: none; height: 30px; cursor: ew-resize; touch-action: none; }
.ve-ruler__c { position: sticky; left: 184px; display: block; }
.ve-rows { position: relative; }
.ve-row { display: flex; border-bottom: 1px solid var(--pe-line); position: relative; }
.ve-head { position: sticky; left: 0; z-index: 8; flex: none; width: 184px; box-sizing: border-box; padding: .25rem .4rem; display: flex; flex-direction: column; justify-content: center; gap: .15rem; background: var(--rl-surface); border-right: 1px solid var(--pe-line); }
.ve-head__top { display: flex; align-items: center; gap: .2rem; }
.ve-head__name { font-weight: 700; font-size: .78rem; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-head__btns { display: flex; gap: .2rem; }
.ve-hb { min-width: 1.45rem; height: 1.35rem; border: 1px solid var(--pe-line); background: var(--rl-surface-raised); border-radius: 5px; font-size: .68rem; font-weight: 700; cursor: pointer; display: inline-grid; place-items: center; padding: 0 .2rem; color: var(--rl-text-muted); }
.ve-hb:hover { color: var(--rl-text); }
.ve-hb.is-on { background: var(--rl-accent); border-color: var(--rl-accent); color: var(--rl-accent-contrast); }
.ve-hb--m.is-on { background: var(--rl-danger); border-color: var(--rl-danger); color: #fff; }
.ve-hb--s.is-on { background: #d97706; border-color: #d97706; color: #fff; }
.ve-head__vol { width: 100%; height: 14px; margin: 0; accent-color: var(--rl-accent); }
.ve-row--video .ve-head { border-left: 3px solid var(--ve-video); }
.ve-row--audio .ve-head { border-left: 3px solid var(--ve-audio); }
.ve-lane { position: relative; flex: none; background: repeating-linear-gradient(0deg, transparent 0 0, transparent 0 0), var(--pe-work); }
.ve-row.is-locked .ve-lane { background-image: repeating-linear-gradient(135deg, rgba(128, 128, 128, .1) 0 6px, transparent 6px 12px); }
.ve-row.is-hidden .ve-lane, .ve-row.is-muted .ve-lane { opacity: .55; }
.ve-clip { position: absolute; top: 3px; border-radius: 6px; overflow: hidden; background: var(--ve-video); color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); cursor: grab; user-select: none; touch-action: none; outline: none; }
.ve-clip--image { background: var(--ve-image); }
.ve-clip--audio { background: var(--ve-audio); }
.ve-clip--text { background: var(--ve-text); }
.ve-clip--color { background: var(--ve-color); }
.ve-clip--adjust { background: var(--ve-adjust); }
.ve-clip.is-sel { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rl-accent); z-index: 2; }
.ve-clip.is-locked { cursor: not-allowed; filter: saturate(.6); }
.ve-clip.is-missing { background: repeating-linear-gradient(45deg, #7f1d1d 0 8px, #991b1b 8px 16px); }
.ve-clip.is-target { box-shadow: 0 0 0 3px #fbbf24; }
.ve-clip__c { position: absolute; top: 0; height: 100%; pointer-events: none; }
.ve-clip__label { position: absolute; left: 7px; top: 3px; right: 7px; font-size: .7rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.ve-clip__fade { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.ve-clip__fade--l { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .6), transparent); }
.ve-clip__fade--r { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .6), transparent); }
.ve-clip__trans { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .42) 0 4px, rgba(255, 255, 255, .14) 4px 8px); border-right: 2px solid rgba(255, 255, 255, .85); pointer-events: none; }
.ve-clip__kfs { position: absolute; left: 0; right: 0; bottom: 2px; height: 8px; pointer-events: none; }
.ve-kf { position: absolute; bottom: 0; width: 8px; height: 8px; background: #fbbf24; transform: rotate(45deg) scale(.82); border: 1px solid rgba(0, 0, 0, .6); }
.ve-clip__h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 3; }
.ve-clip__h--l { left: 0; } .ve-clip__h--r { right: 0; }
.ve-clip:hover .ve-clip__h, .ve-clip.is-sel .ve-clip__h { background: rgba(255, 255, 255, .28); }
.ve-clip__fh { position: absolute; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid rgba(0, 0, 0, .55); box-sizing: border-box; cursor: ew-resize; z-index: 4; display: none; }
.ve-clip:hover .ve-clip__fh, .ve-clip.is-sel .ve-clip__fh { display: block; }
.ve-clip__fh--l { left: 0; } .ve-clip__fh--r { right: 0; }
.ve-clip.has-trans .ve-clip__label { padding-left: 2px; }
.ve-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 7; pointer-events: none; will-change: transform; }
.ve-playhead::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--ve-playhead); }
.ve-playhead__knob { position: absolute; top: 0; left: -7px; width: 14px; height: 17px; background: var(--ve-playhead); clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%); cursor: ew-resize; pointer-events: auto; }
.ve-snapline { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: #fbbf24; display: none; z-index: 7; pointer-events: none; }
.ve-marquee { position: absolute; display: none; z-index: 9; border: 1px solid var(--rl-accent); background: color-mix(in srgb, var(--rl-accent) 18%, transparent); pointer-events: none; }
.ve-ghost { position: absolute; top: 3px; bottom: 3px; border: 2px dashed var(--rl-accent); background: color-mix(in srgb, var(--rl-accent) 22%, transparent); border-radius: 6px; pointer-events: none; z-index: 4; }
.ve-newtrack { display: none; height: 46px; margin: 6px 10px; border: 2px dashed var(--pe-line); border-radius: 10px; color: var(--rl-text-muted); align-items: center; justify-content: center; position: relative; font-size: .78rem; position: sticky; left: 10px; }
.ve-dragging .ve-newtrack { display: flex; }
.ve-newtrack--video { border-color: color-mix(in srgb, var(--ve-video) 60%, transparent); }
.ve-newtrack--audio { border-color: color-mix(in srgb, var(--ve-audio) 60%, transparent); }

/* ---- dialogs and misc ---- */
.ve-preview { display: block; max-width: 100%; max-height: 52vh; margin: 0 auto; border-radius: 8px; background: #000; }
.ve-prog { height: 10px; border-radius: 5px; background: var(--rl-surface-sunken); overflow: hidden; }
.ve-prog i { display: block; height: 100%; width: 0; background: var(--rl-accent); transition: width .2s; }
.ve-progmsg { margin: 0; font-size: .82rem; color: var(--rl-text-muted); font-variant-numeric: tabular-nums; }
.ve-expprev { width: 100%; max-width: 320px; border-radius: 8px; background: #000; display: block; margin: 0 auto; }
.ve-dlgfoot { border-top: 1px solid var(--pe-line); }
.ve-lib { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.ve-lib .pe-lib__item video, .ve-lib .pe-lib__item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; background: #0d0f12; }
.ve-lib .pe-lib__item.is-on { border-color: var(--rl-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rl-accent) 40%, transparent); }
.ve-lib__audio { aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 7px; background: #0f2a22; color: #34d399; }
.ve-reclevel { height: 12px; border-radius: 6px; background: var(--rl-surface-sunken); overflow: hidden; }
.ve-reclevel i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rl-ok) 65%, #facc15 85%, var(--rl-danger)); }
.ve-caption-progress { width: 100%; height: 10px; accent-color: var(--rl-accent); }
.ve-caption-progress[hidden] { display: none; }
.ve-projects { display: flex; flex-direction: column; gap: .4rem; max-height: 55vh; overflow-y: auto; }
.ve-proj { display: grid; grid-template-columns: 6.5rem 1fr auto auto; gap: .6rem; align-items: center; padding: .35rem; border: 1px solid var(--pe-line); border-radius: var(--rl-radius); }
.ve-proj.is-cur { border-color: var(--rl-accent); }
.ve-proj img, .ve-proj__none { width: 6.5rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #0d0f12; display: grid; place-items: center; color: #8b93a1; }
.ve-proj__info { display: flex; flex-direction: column; min-width: 0; }
.ve-proj__info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-proj__info span { font-size: .74rem; color: var(--rl-text-muted); }
.ve-ctx { z-index: 9999; }
.pe-chk input:disabled + span { opacity: .5; }

/* ---- narrower editors ----
   Sized by the editor's own width, not the window's: the sidebar takes a quarter of a laptop screen, so a media query on
   the viewport would leave the preview a few hundred pixels wide long before it asked the side panels to step aside. */
.ve-host { container: ve / inline-size; }
.ve .pe-ib--panels { display: none; }
@container ve (max-width: 1260px) { .ve { --ve-left: 14.5rem; --ve-right: 17.5rem; } }
@container ve (max-width: 1060px) { .ve { --ve-left: 13rem; --ve-right: 16rem; } .ve-name { max-width: 10rem; } }
@container ve (max-width: 940px) {
    .ve-work { position: relative; grid-template-columns: minmax(0, 1fr); }
    .ve-left, .ve-right { position: absolute; top: 0; bottom: 0; z-index: 20; width: min(19rem, 86%); box-shadow: var(--pe-shadow); display: none; }
    .ve-left { left: 0; } .ve-right { right: 0; }
    .pe--panels .ve-left { display: flex; flex-direction: column; }
    .pe--panels .ve-right { display: block; }
    .ve .pe-ib--panels { display: inline-grid; }
    .ve-tl { height: 44%; }
    .ve-name { max-width: 7rem; }
    .ve-only-wide { display: none; }
    .ve-zoom { width: 5rem; }
    .ve-savestate { display: none; }
}


/* ---- colour, mixer, source monitor and the trim tools (added with the colour and sound panels) ----
   The audio studio reuses .ve-tab, .ve-pane, .ve-ins and .ve-sec, so nothing here changes those; the video editor's own
   variants are scoped under .ve and named separately. */
.ve .ve-tabs--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ve .ve-tabs--six .ve-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve.ve--wide-left { --ve-left: 22rem; }
.ve-clip--shape { background: #b4235a; }
.ve-clip--nest { background: repeating-linear-gradient(135deg, #4b5563 0 10px, #374151 10px 20px); }
.ve-crumbs { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--rl-text-muted); margin-right: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.ve-crumbs:empty { display: none; }
.ve-tl--nested .ve-tl__scroll { box-shadow: inset 0 3px 0 #a855f7; }
.ve-clip.is-linked .ve-clip__label .pe-ico { vertical-align: -1px; opacity: .9; }
.ve-hb--tgt { min-width: 1.25rem; height: 1.2rem; font-size: .62rem; }
.ve-hb--tgt.is-on { background: #0e7490; border-color: #0e7490; color: #fff; }
.ve-tl--ripple .ve-clip, .ve-tl--roll .ve-clip, .ve-tl--stretch .ve-clip { cursor: col-resize; }
.ve-tl--slip .ve-clip, .ve-tl--slide .ve-clip { cursor: ew-resize; }
.ve-tl--ripple .ve-clip__fh, .ve-tl--roll .ve-clip__fh, .ve-tl--slip .ve-clip__fh, .ve-tl--slide .ve-clip__fh, .ve-tl--stretch .ve-clip__fh { display: none !important; }

/* monitor: program and source */
.ve-montabs { flex: none; display: flex; gap: .2rem; padding: .25rem .5rem 0; background: var(--rl-surface); border-bottom: 1px solid var(--pe-line); }
.ve-montab { border: 1px solid transparent; border-bottom: 0; background: transparent; padding: .2rem .7rem; border-radius: 7px 7px 0 0; font-size: .74rem; cursor: pointer; color: var(--rl-text-muted); }
.ve-montab:hover { color: var(--rl-text); }
.ve-montab.is-on { color: var(--rl-text); background: var(--pe-work); border-color: var(--pe-line); }
.ve-mon__view, .ve-src { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ve-src__view { flex: 1; min-height: 0; display: grid; place-items: center; background: var(--pe-work); overflow: hidden; padding: 8px; }
.ve-src__media { max-width: 100%; max-height: 100%; display: block; background: #000; box-shadow: var(--pe-shadow); }
.ve-src__wave { width: min(100%, 640px); aspect-ratio: 16 / 5; height: auto; }
.ve-src__empty { max-width: 28rem; text-align: center; color: var(--rl-text-muted); }
.ve-src__empty p { font-size: .82rem; }
.ve-src__bar { position: relative; flex: none; height: 18px; margin: 0 .6rem; background: var(--rl-surface-sunken); border-radius: 4px; cursor: ew-resize; touch-action: none; }
.ve-src__range { position: absolute; top: 0; bottom: 0; display: none; background: color-mix(in srgb, var(--rl-accent) 35%, transparent); border-left: 2px solid var(--rl-accent); border-right: 2px solid var(--rl-accent); box-sizing: border-box; pointer-events: none; }
.ve-src__head { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--ve-playhead); pointer-events: none; }
.ve-src__ctl { border-top: 0; }
.ve-src__tc { cursor: default; }
.ve-src__info { font-size: .74rem; color: var(--rl-text-muted); margin-right: .4rem; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* colour */
.ve-colour { display: flex; flex-direction: column; gap: .4rem; }
.ve-scope { display: flex; flex-direction: column; gap: .3rem; }
.ve-scope .pe-seg__row { flex-wrap: wrap; }
.ve-scope__c { display: block; border-radius: 8px; background: #07090c; }
.ve-scope__stats { font-size: .7rem; color: var(--rl-text-muted); font-variant-numeric: tabular-nums; }
.ve-grade { display: flex; flex-direction: column; gap: .35rem; }
.ve-grade__head { display: flex; align-items: center; gap: .3rem; padding-top: .3rem; border-top: 1px solid var(--pe-line); }
.ve-grade__head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.ve-gsec { border: 1px solid var(--pe-line); border-radius: var(--rl-radius); background: var(--rl-surface-raised); }
.ve-gsec > summary { padding: .35rem .5rem; }
.ve-gsec .ve-sec__on { margin: 0; accent-color: var(--rl-accent); }
.ve-gsec .ve-sec__body { padding: .1rem .55rem .6rem; }
.ve-colour .pe-rng, .ve-afx .pe-rng { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) auto; align-items: center; gap: .35rem; width: 100%; }
.ve-colour .pe-rng__label, .ve-afx .pe-rng__label { font-size: .72rem; color: var(--rl-text-muted); }
.ve-colour .pe-rng input[type=range], .ve-afx .pe-rng input[type=range] { width: 100%; min-width: 0; }
.ve-colour .pe-rng__num, .ve-afx .pe-rng__num { width: 3.6rem; }
.ve-colour .pe-sel--compact, .ve-afx .pe-sel--compact { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); align-items: center; gap: .35rem; }
.ve-colour .pe-sel--compact select { width: 100%; min-width: 0; }
.ve-curve__wrap { display: flex; justify-content: center; }
.ve-curve { display: block; border-radius: 6px; cursor: crosshair; touch-action: none; outline: none; }
.ve-curve:focus-visible { box-shadow: 0 0 0 2px var(--rl-accent); }
.ve-wheels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.ve-wheel { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 0; }
.ve-wheel__label { font-size: .7rem; color: var(--rl-text-muted); }
.ve-wheel__c { cursor: crosshair; touch-action: none; border-radius: 50%; }
.ve-wheel .pe-rng { grid-template-columns: 1fr; }
.ve-wheel .pe-rng .pe-rng__label { display: none; }
.ve-wheel .pe-rng__num { width: 3rem; }

/* sound */
.ve-mixer { display: flex; flex-direction: column; gap: .5rem; }
.ve-mixer__strips { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .3rem; }
/* Strips share the panel's width and only scroll sideways once there are too many to fit at their narrowest. */
.ve-strip { flex: 1 1 0; min-width: 3rem; max-width: 4.6rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .35rem .25rem; border: 1px solid var(--pe-line); border-radius: var(--rl-radius); background: var(--rl-surface-raised); }
.ve-strip--video { border-top: 3px solid var(--ve-video); }
.ve-strip--audio { border-top: 3px solid var(--ve-audio); }
.ve-strip--master { border-top: 3px solid var(--rl-accent); min-width: 3.4rem; }
.ve-strip__name { font-size: .72rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-strip__fx { padding: .05rem .4rem; font-size: .66rem; }
.ve-strip__mid { display: flex; gap: .25rem; height: 9.5rem; align-items: stretch; }
.ve-strip__meter { display: flex; gap: 2px; width: 10px; }
.ve-strip__meter i { flex: 1; align-self: flex-end; height: 0; background: linear-gradient(0deg, var(--rl-ok) 60%, #facc15 85%, var(--rl-danger)); border-radius: 2px; transition: height .06s linear; }
.ve-strip__meter.is-clip { box-shadow: 0 -3px 0 var(--rl-danger); }
.ve-fader { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 100%; margin: 0; accent-color: var(--rl-accent); }
.ve-strip__db { font: .6rem ui-monospace, Consolas, monospace; color: var(--rl-text-muted); white-space: nowrap; }
.ve-strip__pan { width: 100%; height: 14px; margin: 0; accent-color: var(--rl-accent); }
.ve-strip__btns { display: flex; gap: .2rem; }
.ve-afx { display: flex; flex-direction: column; gap: .4rem; }
.ve-afx select.pe-input { font-size: .78rem; }
.ve-loud { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .4rem; }
.ve-loud__cell { display: flex; flex-direction: column; padding: .45rem .6rem; border: 1px solid var(--pe-line); border-radius: var(--rl-radius); background: var(--rl-surface-raised); }
.ve-loud__cell span { font-size: .7rem; color: var(--rl-text-muted); }
.ve-loud__cell strong { font: 600 1.05rem ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }

/* dialogs and inspector bits */
.ve-swatches { display: flex; flex-wrap: wrap; gap: .35rem; }
.ve-swatch { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.ve-swatch.is-on { border-color: var(--rl-text); }
.ve-history { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; border: 1px solid var(--pe-line); border-radius: var(--rl-radius); }
.ve-history__row { text-align: left; border: 0; border-bottom: 1px solid var(--pe-line); background: transparent; padding: .35rem .6rem; font: inherit; font-size: .8rem; color: inherit; cursor: pointer; }
.ve-history__row:hover { background: var(--rl-surface-sunken); }
.ve-history__row.is-cur { background: color-mix(in srgb, var(--rl-accent) 18%, transparent); font-weight: 600; }
.ve-history__row.is-redo { color: var(--rl-text-muted); font-style: italic; }
.ve-pip { display: flex; flex-direction: column; gap: .3rem; }
.ve-pip .pe-btn { padding: .1rem .45rem; font-size: .7rem; }

@container ve (max-width: 1260px) { .ve.ve--wide-left { --ve-left: 19rem; } }
@container ve (max-width: 1060px) { .ve.ve--wide-left { --ve-left: 17rem; } }