.local-tool { max-width:820px; margin:35px auto; padding:0 18px; }
.local-tool h1 { font-size:2rem; color:#666; }
.local-tool [hidden] { display:none !important; }
.local-tool .upload { display:block; border:2px dashed #b7cabd; border-radius:12px; padding:24px; background:#fbfdfb; margin:20px 0; }
.local-tool input[type=file] { display:block; max-width:100%; margin-top:12px; }
.local-tool button, .local-tool .download { display:inline-block; background:#288b40; color:white; border:0; border-radius:6px; padding:10px 18px; cursor:pointer; }
.local-tool button:disabled { opacity:.5; cursor:default; }
.local-tool textarea { width:100%; min-height:140px; }
.local-tool .controls { display:flex; flex-wrap:wrap; gap:16px; margin:18px 0; }
.local-tool .controls label { display:flex; flex-direction:column; gap:6px; }
.local-tool select { padding:8px; }
.local-tool canvas { display:block; max-width:100%; max-height:420px; margin:16px auto; }
.local-tool video { display:block; width:100%; max-height:450px; background:#000; }
.local-tool progress { width:100%; }

/* The overlay shares the video's exact displayed bounds, including portrait footage. */
.vc-settings { border:0; padding:0; margin:0; min-width:0; }
.vc-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.local-tool .vc-toolbar button { background:#eef5ef; color:#245b32; border:1px solid #b7cabd; padding:8px 12px; }
.local-tool .vc-toolbar button[aria-pressed=true] { background:#288b40; color:#fff; border-color:#288b40; }
#vc-selection-size { margin-left:auto; font-size:.85rem; color:#526459; font-variant-numeric:tabular-nums; }
#vc-crop-help { font-size:.9rem; color:#526459; }
.vc-stage { position:relative; width:min(100%, calc(450px * var(--vc-aspect, 1.77778))); margin:0 auto; overflow:hidden; background:#111; border-radius:6px; }
.local-tool .vc-stage video { width:100%; height:auto; max-height:none; }
.vc-overlay { position:absolute; inset:0; touch-action:none; user-select:none; cursor:crosshair; }
.vc-crop { position:absolute; box-sizing:border-box; border:2px solid #fff; box-shadow:0 0 0 2000px #0009; cursor:move; }
.vc-crop:focus-visible { outline:3px solid #64dc87; outline-offset:-5px; }
.vc-grid { position:absolute; inset:0; pointer-events:none; background:linear-gradient(to right, transparent 33.1%, #ffffff50 33.1%, #ffffff50 33.5%, transparent 33.5%, transparent 66.4%, #ffffff50 66.4%, #ffffff50 66.8%, transparent 66.8%),linear-gradient(to bottom, transparent 33.1%, #ffffff50 33.1%, #ffffff50 33.5%, transparent 33.5%, transparent 66.4%, #ffffff50 66.4%, #ffffff50 66.8%, transparent 66.8%); }
.vc-handle { position:absolute; width:28px; height:28px; }
.vc-handle::after { content:''; position:absolute; inset:8px; background:#fff; border:1px solid #245b32; border-radius:2px; }
.vc-handle[data-corner=nw] { left:-2px; top:-2px; cursor:nwse-resize; }
.vc-handle[data-corner=ne] { right:-2px; top:-2px; cursor:nesw-resize; }
.vc-handle[data-corner=sw] { left:-2px; bottom:-2px; cursor:nesw-resize; }
.vc-handle[data-corner=se] { right:-2px; bottom:-2px; cursor:nwse-resize; }
.vc-overlay[data-drawing=true] .vc-crop, .vc-overlay[data-drawing=true] .vc-handle { cursor:crosshair; }
.vc-overlay[aria-disabled=true] { cursor:wait; }
.vc-playback { display:flex; align-items:center; gap:12px; margin:12px 0 20px; }
.vc-playback input { flex:1; min-width:0; }
.vc-playback span { white-space:nowrap; font-size:.8rem; font-variant-numeric:tabular-nums; }
.local-tool .vc-playback button { padding:8px 12px; min-width:65px; }
.vc-preview-details { margin:12px 0; }
.vc-preview-details summary { cursor:pointer; color:#245b32; }