/* Video frame extractor (#111) */
.container--video-frame { width: min(100% - 1.5rem, 1180px); max-width: 100%; min-width: 0; }
.vf-loader { margin-bottom: 1.5rem; }
.vf-file-label { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-bottom: .8rem; font-weight: 700; }
.vf-file-label + input { max-width: 100%; }
.vf-workspace { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr); gap: 1.25rem; align-items: start; margin-bottom: 1.5rem; }
.vf-workspace[hidden] { display: none; }
.vf-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.vf-heading h2, .vf-heading p { margin-top: 0; }
.vf-file-info, .vf-capture-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }
.vf-file-info div, .vf-capture-info div { min-width: 0; padding: .7rem; border-radius: 10px; background: #f4f8f7; }
.vf-file-info dt, .vf-capture-info dt { color: #50625f; font-size: .78rem; }
.vf-file-info dd, .vf-capture-info dd { margin: .2rem 0 0; overflow-wrap: anywhere; font-weight: 700; }
.vf-player-panel video { display: block; width: 100%; max-width: 100%; height: auto; max-height: 68vh; margin: 1rem 0; border-radius: 12px; background: #111; }
.vf-time-readout { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; margin: .7rem 0; font-weight: 700; }
.vf-time-readout output { min-width: 0; color: #146b63; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vf-range-label, .vf-time-controls label, .vf-export-settings label { display: grid; min-width: 0; gap: .4rem; font-weight: 700; }
.vf-range-label input, .vf-time-controls input, .vf-export-settings select { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; }
.vf-time-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; align-items: end; margin-top: 1rem; }
.vf-fine-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin: .8rem 0; }
.vf-fine-controls .button { width: 100%; min-width: 0; padding-inline: .5rem; }
.vf-capture, .vf-export { width: 100%; }
.vf-precision-note { color: #50625f; font-size: .9rem; line-height: 1.65; }
.vf-output-panel { min-width: 0; }
.vf-output-panel .counter-panel { position: sticky; top: 1rem; }
.vf-canvas-wrap { max-width: 100%; overflow: auto; padding: .65rem; border-radius: 12px; background: #172521; color: #fff; text-align: center; }
.vf-canvas-wrap canvas { display: block; width: auto; max-width: 100%; height: auto; margin: auto; }
.vf-canvas-wrap p { overflow-wrap: anywhere; }
.vf-capture-info { grid-template-columns: 1fr; }
.vf-export-settings { display: grid; gap: .9rem; margin: 1rem 0; }
.vf-export-settings .is-disabled, .vf-export-settings label.is-disabled { opacity: .55; }
.vf-download { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #d5dfdd; }
.vf-download p { overflow-wrap: anywhere; }
.vf-warning { margin: 1.5rem 0; padding: 1rem 1.2rem; border: 2px solid #bd6a26; border-radius: 14px; background: #fff7ed; }
.vf-warning h2 { margin: 0 0 .45rem; font-size: 1.15rem; }
.vf-warning p { margin: 0; overflow-wrap: anywhere; }
.vf-player-panel button:focus-visible, .vf-output-panel button:focus-visible, .vf-output-panel a:focus-visible, .vf-file-label:focus-within { outline: 3px solid rgb(20 107 99 / 30%); outline-offset: 3px; }
@media (max-width: 820px) { .vf-workspace { grid-template-columns: minmax(0, 1fr); } .vf-output-panel .counter-panel { position: static; } .vf-file-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .container--video-frame { width: min(100% - 1rem, 1180px); padding-inline: 0; } .vf-player-panel, .vf-output-panel, .vf-workspace, .vf-time-controls, .vf-fine-controls { width: 100%; max-width: 100%; min-width: 0; } .vf-heading { display: grid; } .vf-file-info, .vf-time-controls { grid-template-columns: minmax(0, 1fr); } .vf-time-controls .button { width: 100%; } .vf-fine-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }