/* Trim strip under the source player: locked for plans without trim, an editor for Pro, Studio and admin. */
.uf-trim { padding:14px 16px; border:1px dashed var(--uf-border-strong); border-radius:12px; background:var(--uf-surface); }
.uf-trim:not(.is-active) * { pointer-events:none; }
.uf-trim:not(.is-active) :is(.uf-trim-head,.uf-trim-track,.uf-trim-times) { opacity:.55; }
.uf-trim-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:15px; }
.uf-trim-track { position:relative; height:40px; border:2px solid var(--uf-border-strong); border-radius:8px; background:repeating-linear-gradient(90deg,var(--uf-tint) 0 6px,var(--uf-tint-strong) 6px 8px); }
.uf-trim-handle { position:absolute; top:-2px; bottom:-2px; left:-2px; width:12px; border-radius:6px 0 0 6px; background:var(--uf-subtle); }
.uf-trim-handle.is-end { left:auto; right:-2px; border-radius:0 6px 6px 0; }
.uf-trim-playhead { position:absolute; top:-6px; bottom:-6px; left:0; width:2px; margin-left:-1px; background:var(--uf-blue); transition:left .25s linear; }
.uf-trim-times { display:flex; justify-content:space-between; margin-top:6px; color:var(--uf-muted); font-size:13px; font-variant-numeric:tabular-nums; }
.uf-trim-range, .uf-trim-thumbs, .uf-trim-bubble { display:none; }

/* Editor: a row of frames, the part outside the selection dimmed, 44px handles for mouse or finger. */
.uf-trim.is-active { border-style:solid; }
.uf-trim.is-active .uf-trim-head { margin-bottom:34px; }
.uf-trim.is-active .uf-trim-track, .uf-trim.is-active .uf-trim-times { margin-inline:22px; }
.uf-trim.is-active .uf-trim-track { height:48px; cursor:pointer; touch-action:none; }
.uf-trim.is-active .uf-trim-thumbs { display:flex; position:absolute; inset:0; overflow:hidden; border-radius:6px; }
.uf-trim-thumbs img { flex:1 1 0; min-width:0; height:100%; object-fit:cover; }
.uf-trim.is-active .uf-trim-track::before, .uf-trim.is-active .uf-trim-track::after { content:""; position:absolute; top:0; bottom:0; z-index:1; background:#0b1220a8; pointer-events:none; }
.uf-trim.is-active .uf-trim-track::before { left:0; width:var(--trim-start,0%); border-radius:6px 0 0 6px; }
.uf-trim.is-active .uf-trim-track::after { left:var(--trim-end,100%); right:0; border-radius:0 6px 6px 0; }
.uf-trim.is-active .uf-trim-range { display:block; position:absolute; top:-2px; bottom:-2px; z-index:2; left:var(--trim-start,0%); right:calc(100% - var(--trim-end,100%)); border-block:3px solid var(--uf-blue); pointer-events:none; }
.uf-trim.is-active .uf-trim-handle { top:-5px; bottom:-5px; z-index:3; left:var(--trim-start,0%); right:auto; width:44px; margin-left:-22px; border-radius:0; background:none; cursor:ew-resize; touch-action:none; }
.uf-trim.is-active .uf-trim-handle.is-end { left:var(--trim-end,100%); }
.uf-trim.is-active .uf-trim-handle::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:12px; margin-left:-6px; border-radius:6px; background:var(--uf-blue); box-shadow:var(--uf-shadow-xs); }
.uf-trim.is-active .uf-trim-handle:focus-visible { outline:none; }
.uf-trim.is-active .uf-trim-handle:focus-visible::before { outline:3px solid var(--uf-ring); outline-offset:2px; }
.uf-trim.is-active .uf-trim-playhead { z-index:4; pointer-events:none; }
.uf-trim.is-active .uf-trim-bubble { display:block; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); padding:2px 8px; border-radius:999px; background:var(--uf-ink); color:var(--uf-surface); font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.uf-trim.is-saved .uf-trim-handle { display:none; }
.uf-trim-length { margin-inline-start:auto; color:var(--uf-ink-soft); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }

.uf-trim-controls { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-top:14px; }
.uf-trim-field { display:grid; gap:4px; }
.uf-trim-field label { color:var(--uf-muted); font-size:13px; font-weight:600; }
.uf-trim-stepper { display:flex; overflow:hidden; border:1px solid var(--uf-border-strong); border-radius:10px; background:var(--uf-surface); }
.uf-trim-stepper:focus-within { border-color:var(--uf-blue); box-shadow:0 0 0 3px var(--uf-ring); }
.uf-trim-stepper button { flex:none; width:44px; min-height:44px; border:none; background:var(--uf-softer); color:var(--uf-link); font-size:20px; font-weight:600; cursor:pointer; touch-action:manipulation; }
.uf-trim-stepper button:hover { background:var(--uf-tint); }
.uf-trim-stepper input { width:6.5rem; min-width:0; height:44px; padding:0 6px; border:none; border-inline:1px solid var(--uf-border); background:none; color:var(--uf-ink); font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; text-align:center; outline:none; touch-action:manipulation; }
.uf-trim-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.uf-trim-actions button { min-height:44px; touch-action:manipulation; }
.uf-trim-saved { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-top:14px; padding:10px 12px; border-radius:10px; background:var(--uf-success-soft); color:var(--uf-success-ink); font-size:14px; font-weight:600; }

@media(max-width:640px) {
    .uf-trim { padding:12px; }
    .uf-trim-field { flex:1 1 100%; } .uf-trim-stepper input { flex:1; width:auto; }
    .uf-trim-actions { flex:1 1 100%; } .uf-trim-actions .uf-button { flex:1 1 auto; }
}
@media(prefers-reduced-motion:reduce) { .uf-trim-playhead { transition:none; } }