/* Video compressor / GIF / crop (after hub.css, bpm.css, slowed.css, cutjoin.css) */
.vgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:20px;align-items:start}
.stage{position:relative;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.stage video{display:block;width:100%;max-height:60vh;background:#000}
.cropbox{position:absolute;border:2px solid #00e5ff;cursor:move;touch-action:none;border-radius:2px;z-index:2}
.cropbox::before,.cropbox::after{content:"";position:absolute;inset:33.3% 0;border-top:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3);pointer-events:none}
.cropbox::after{inset:0 33.3%;border:0;border-left:1px solid rgba(255,255,255,.3);border-right:1px solid rgba(255,255,255,.3)}
.cropshade{position:absolute;inset:0;border-style:solid;border-color:rgba(0,0,0,.62);pointer-events:none;z-index:1;box-sizing:border-box}
.trim{margin-top:10px}
.rail{position:relative;height:26px}
.rail::before{content:"";position:absolute;left:0;right:0;top:11px;height:4px;border-radius:2px;background:#232a3a}
.rail i{position:absolute;top:11px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.rail input{position:absolute;inset:0;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;height:26px}
.rail input::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;width:16px;height:22px;border-radius:5px;background:#00e5ff;border:2px solid #0b0d12;cursor:ew-resize}
.rail input::-moz-range-thumb{pointer-events:auto;width:14px;height:20px;border-radius:5px;background:#00e5ff;border:2px solid #0b0d12;cursor:ew-resize}
.rail input::-webkit-slider-runnable-track{background:none}.rail input::-moz-range-track{background:none}
.trim .tset{justify-content:space-between;flex-wrap:wrap;gap:6px 10px;margin-top:6px}
.vset{display:flex;flex-direction:column;gap:10px}
.vset>label[hidden]{display:none}.vset>label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);font-weight:600}
.vset>label output{color:var(--text);float:right}
.vset select,.vset input[type=number]{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:8px 10px;font:inherit;font-size:14px}
.vset input[type=range]{accent-color:var(--accent)}
.vset input[type=color]{width:100%;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);padding:2px}
.vset .tog{flex-direction:row}
.est{font-size:13.5px;color:#c9cfdb;margin:4px 0 0;line-height:1.5}.est .warn{color:#f2cf73}.est .good{color:#7ee2a8}
.gorow{display:flex;gap:8px}.gorow .btn{flex:1}
.vresult{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,0.8fr);gap:18px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.vresult video,.vresult img{display:block;max-width:100%;max-height:50vh;border-radius:10px;background:#000;margin:0 auto}
.vresult p{color:#c9cfdb;font-size:14px}
.vresult .btn{text-decoration:none;display:inline-block}
@media (max-width:900px){.vgrid,.vresult{grid-template-columns:1fr}}
[hidden]{display:none !important}

.badgeprev{position:absolute;display:inline-flex;align-items:center;gap:.35em;background:rgba(0,0,0,.45);color:rgba(255,255,255,.9);border-radius:999px;font:600 9px/1 "Segoe UI",Roboto,Arial,sans-serif;white-space:nowrap;pointer-events:none}
.badgeprev i{display:inline-block;width:.18em;border-radius:.1em;background:linear-gradient(#00e5ff,#6c7bff);height:.6em}.badgeprev i:nth-child(2){height:.95em}.badgeprev i:nth-child(3){height:1.1em}.badgeprev i:nth-child(4){height:.7em;margin-right:.25em}
.hintinline{color:var(--muted);font-weight:400;font-size:12px}

.sbox{position:absolute;border:2px solid #00e5ff;background:rgba(0,229,255,.08);cursor:move;touch-action:none;z-index:2;box-sizing:border-box}
.sbox.cam{border-color:#ff5fd2;background:rgba(255,95,210,.10);z-index:3}
.sbox .lbl{position:absolute;left:0;top:0;background:#00e5ff;color:#0b0d12;font:700 11px/1 Inter,sans-serif;padding:3px 6px;border-radius:0 0 4px 0;white-space:nowrap;pointer-events:none}
.sbox.cam .lbl{background:#ff5fd2}
.sbox .rz{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #0b0d12;cursor:nwse-resize}
.layprev{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);font-size:12px}
.layprev canvas{width:160px;aspect-ratio:9/16;border-radius:12px;border:1px solid var(--line);background:#000;box-shadow:0 12px 30px rgba(0,0,0,.4)}

.transport{display:flex;align-items:center;gap:10px;margin-top:10px}
.transport #vplay{min-width:38px;font-size:14px}
.transport #vseek{flex:1;accent-color:#fff}
.transport .time{min-width:58px;text-align:right}
.marknote{margin:6px 0 0;font-size:13px;color:#f2cf73}