/* Frame extractor: the same full-page Video Engine, with one source and a frame gallery. */
.vf { --lib:240px; --insp:292px; --tl:224px; }
.vf .vx-top { grid-template-columns:minmax(0,1fr) auto auto; }
.vf .vx-title { max-width:none; margin:0; padding:0; cursor:default; font-size:15px; }
.vf button:disabled { opacity:.38; cursor:default; transform:none; }
.vf :is(button,a,input,select):focus-visible { outline:2px solid #22d3ee; outline-offset:3px; }
.vf .vx-stage { overflow:hidden; }
.vf .vx-view { padding:20px; overflow:hidden; }
.vf video,.vf #vf-fallback { display:block; width:100%; height:100%; min-height:0; object-fit:contain; border-radius:10px; }
.vf .vx-empty { gap:14px; }
.vf .vx-empty p { margin:0; color:#a1a1aa; font-size:13px; }
.vf .vx-empty b { font-size:clamp(18px,2vw,25px); letter-spacing:-.6px; }
.vf .vx-empty small { color:#8b8b96; }
.vf-private { font-size:11px; color:#a1a1aa; }
.vf-private span { width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 12px #4ade8044; }
.vf-player { display:flex; align-items:center; gap:10px; margin:0 18px; padding:10px 0; border-top:1px solid var(--line); }
.vf-player input { min-width:20px; flex:1; accent-color:#c4b5fd; }
.vf-player output { font-size:11px; font-variant-numeric:tabular-nums; color:#a1a1aa; white-space:nowrap; }
.vf-player .vx-btn { flex:none; }
.vf-status { margin:0; min-height:36px; padding:0 18px 10px; font-size:12px; color:#a1a1aa; line-height:1.4; }
.vf-status.bad { color:#fca5a5; }
.vf-working { position:absolute; inset:0; display:grid; place-items:center; background:#08080ded; z-index:5; text-align:center; padding:20px; }
.vf-working b { font-size:14px; }
.vf-working progress { width:min(240px,65vw); height:6px; accent-color:#22d3ee; border:0; }
.vf-drop { position:absolute; inset:12px; z-index:6; display:grid; place-items:center; border:2px dashed #a78bfa; border-radius:16px; background:#131021ed; font-weight:700; }
.vf-filename { color:#fff; font-size:13px; font-weight:600; overflow-wrap:anywhere; margin:20px 0 14px; }
.vf-meta { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; margin:0; font-size:11px; }
.vf-meta dt { color:#8b8b96; }.vf-meta dd { margin:0; color:#d4d4d8; text-align:right; overflow-wrap:anywhere; }
.vf-links { display:grid; gap:12px; margin-top:26px; font-size:12px; }
.vf a,.vf-dialog a { color:#c4b5fd; text-decoration:none; }.vf a:hover,.vf-dialog a:hover { text-decoration:underline; }
.vf-section { padding:18px 16px; border-bottom:1px solid var(--line); }
.vf-section h2 { margin:0 0 5px; font-size:16px; color:#fafafa; letter-spacing:-.4px; }.vf-section > p:first-of-type:not(.vx-hint) { margin:0; font-size:12px; color:#8b8b96; }
.vf-section h3 { display:flex; align-items:center; justify-content:space-between; margin:0 0 12px; font-size:12px; color:#d4d4d8; }
.vf-label { display:flex; justify-content:space-between; margin:17px 0 10px; color:#a1a1aa; font-size:12px; font-weight:600; }
.vf-label output { color:#c4b5fd; font-size:11px; }.vf #vf-quality { width:100%; accent-color:#c4b5fd; }
.vf .vx-hint { color:#8b8b96; font-size:11px; }.vf .vx-field { font-size:12px; background:#15151e; color:#e4e4e7; }
.vf .vf-formats { display:grid; grid-template-columns:repeat(3,1fr); }
.vf-match { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:12px; border:1px solid #343039; border-radius:12px; color:#e4e4e7; background:#14121b; text-align:left; cursor:pointer; }
.vf-match[aria-pressed="true"] { border-color:#a78bfa88; background:linear-gradient(100deg,#8b5cf622,#22d3ee0a); box-shadow:0 0 22px -10px #8b5cf64d; }
.vf-match span { display:grid; gap:5px; }.vf-match b { font-size:12px; }.vf-match small { color:#a1a1aa; font-size:10px; }.vf-match em { padding:4px 6px; border-radius:6px; background:#a78bfa22; color:#c4b5fd; font-size:9px; font-weight:700; font-style:normal; }
.vf-fps { display:grid; grid-template-columns:repeat(6,1fr); margin-top:14px; }.vf .vf-fps button { padding:0 6px; }
.vf-range { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.vf-range label { color:#8b8b96; font-size:10px; }.vf-range input { margin-top:7px; width:100%; }
.vf-text-btn { border:0; padding:0; background:none; color:#c4b5fd; font-size:10px; font-weight:600; cursor:pointer; }
.vf-marks { margin-top:9px; }.vf-marks .vx-btn { font-size:10px; padding:0 6px; }
.vf-estimate { display:grid; gap:7px; margin:0 0 16px; }.vf-estimate b { color:#e4e4e7; font-size:13px; }.vf-estimate span { color:#8b8b96; font-size:11px; line-height:1.5; }.vf-estimate.bad b { color:#fca5a5; }
.vf-results { height:var(--tl); }.vf-results-head { display:flex; flex:none; align-items:center; justify-content:space-between; gap:14px; padding:14px 20px 10px; }
.vf-results-head h2 { margin:0; font-size:12px; color:#e4e4e7; }.vf-results-head h2 span { margin-left:5px; padding:2px 5px; background:#ffffff0b; border-radius:5px; font-size:10px; color:#a1a1aa; }
.vf-results-head p { margin:6px 0 0; color:#8b8b96; font-size:11px; }.vf-results-head .mx-pill { height:34px; font-size:11px; }
.vf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); align-content:start; gap:12px; flex:1; min-height:0; overflow:auto; padding:4px 20px 14px; scrollbar-width:thin; scrollbar-color:#27272a transparent; }
.vf-gallery-empty { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:10px; color:#52525b; min-height:90px; font-size:12px; }.vf-gallery-empty svg { width:22px; height:22px; }
.vf-card { min-width:0; color:#a1a1aa; font-size:10px; }.vf-card img { display:block; width:100%; height:86px; object-fit:contain; background:#111117; border-radius:8px; border:1px solid #ffffff0c; }.vf-card a { display:grid; gap:7px; font-variant-numeric:tabular-nums; }.vf-card-copy { display:flex; justify-content:space-between; gap:4px; }.vf-card a b { color:#e4e4e7; font-weight:600; }
.vf-pagination { display:flex; align-items:center; justify-content:center; flex:none; gap:12px; padding:4px 20px 8px; }.vf-pagination .vx-btn { flex:none; min-height:26px; font-size:10px; }.vf-pagination span { font-size:10px; color:#8b8b96; }
.vf-dialog { width:min(560px,calc(100% - 24px)); max-height:80dvh; padding:24px; border:1px solid #ffffff1a; border-radius:20px; background:#101017; color:#d4d4d8; font:13px/1.7 Inter,system-ui,sans-serif; box-sizing:border-box; }
.vf-dialog::backdrop { background:#000b; backdrop-filter:blur(5px); }.vf-dialog h2 { margin:0; color:#fff; font-size:20px; }.vf-dialog h3 { color:#c4b5fd; margin-bottom:0; font-size:13px; }.vf-dialog-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }.vf-dialog .vx-ib { color:#a1a1aa; background:none; border:0; width:36px; height:36px; cursor:pointer; }
.vf .vx-dock { display:none; }
@media(min-width:761px) and (max-width:1080px) { .vf { --insp:260px; --lib:210px; }.vf-private { display:none; }.vf .vx-top { grid-template-columns:minmax(0,1fr) auto; } }
@media(max-width:760px) {
  body.vf-page .nxa { bottom:calc(80px + env(safe-area-inset-bottom)); }
  .vf { --tl:200px; height:calc(100dvh - 64px - var(--nxb-h,0px)); }.vf .vx-top { grid-template-columns:minmax(0,1fr) auto; gap:4px; }.vf .vx-id { gap:6px; }.vf .vx-title { font-size:12px; }.vf .vx-logo { width:19px; }.vf .vx-top .mx-primary { padding:0 10px; font-size:11px; gap:5px; }.vf .vx-top .mx-primary svg { width:14px; }.vf-private { display:none; }.vf .vx-dock { display:flex; }
  .vf .vx-view { padding:10px; }.vf .vx-empty { inset:10px; padding:16px; gap:12px; }.vf .vx-empty b { max-width:270px; font-size:20px; }.vf .vx-empty p { font-size:11px; }.vf .vx-empty > svg { width:30px; height:30px; }.vf .vx-empty small { font-size:10px; }
  .vf-player { margin:0 10px; gap:6px; }.vf-player output { font-size:9px; }.vf-player .vx-btn { padding:0 7px; min-height:32px; font-size:10px; }.vf-player #vf-total { display:none; }.vf-status { font-size:10px; min-height:30px; padding:0 10px 8px; }
  .vf-results-head { padding:10px; gap:8px; }.vf-results-head p { font-size:10px; line-height:1.3; }.vf-results-head .mx-pill { padding:0 8px; font-size:10px; gap:4px; flex:none; }.vf-grid { padding:0 10px 10px; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:9px; }.vf-card img { height:70px; }
  .vf-section { padding:16px 18px; }.vf .vx-lib,.vf .vx-insp { height:min(80dvh,680px); max-height:80dvh; }.vf .vx-db { width:auto; }.vf .vf-fps button { min-height:36px; }
}
@media(max-height:650px) { .vf { --tl:156px; }.vf .vx-empty { gap:8px; }.vf .vx-empty b { font-size:16px; }.vf .vx-empty > svg { width:26px; height:26px; }.vf-results-head p { display:none; } }
@media(prefers-reduced-motion:reduce) { .vf * { animation:none!important; transition:none!important; } }