.vg { display: grid; gap: 20px; }
.vg .kv-msg { margin: 0; }
.vg-work { display: grid; gap: 22px; }
.vg-controls { margin-top: 0; }

.vg-file { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; gap: 12px 20px; }
.vg-file p { margin: 0; }
.vg-video { width: 100%; max-height: 260px; border-radius: 8px; background: #000; }
.vg-file-info { display: grid; gap: 4px; min-width: 0; }
.vg-file-name { font-weight: 700; font-size: 1.08rem; overflow-wrap: anywhere; }
.vg-change { justify-self: start; margin-left: -10px; }
@media (max-width: 620px) { .vg-file { grid-template-columns: minmax(0, 1fr); } }

.vg-controls .kv-seg span { padding: 8px 12px; white-space: nowrap; }
@media (max-width: 420px) { .vg-controls .kv-seg span { padding: 8px 9px; } }
.vg-loop { margin-top: 6px; }
.vg-estimate { margin: -8px 0 0; }
.vg-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.vg-result { display: grid; gap: 12px; padding-top: 18px; border-top: 2px solid var(--line); }
.vg-result p { margin: 0; }
.vg-done { font-size: 1.15rem; font-weight: 700; }
.vg-gif {
  max-width: 100%; height: auto; justify-self: start; border-radius: 6px;
  background: repeating-conic-gradient(var(--line) 0 25%, var(--surface) 0 50%) 0 0 / 14px 14px;
}
.vg-result .kv-btn { justify-self: start; }