/* Etsy Listing Video Checker. The kit's app CSS (tokens, .mk-*) is injected by the embed shell; this file only lays
   out the tool. Everything is scoped to .vc and reads --mk-* tokens. */
.vc { --mk-side-w: 380px; padding: 0; }
.vc .vc-panel { display: flex; flex-direction: column; gap: var(--mk-s-3); }
.vc .mk-drop { min-height: 168px; }
.vc .vc-h3 { margin: 0 0 var(--mk-s-1); font: 600 var(--mk-fs-md)/1.3 var(--mk-font); color: var(--mk-text); }
.vc .vc-kv { grid-template-columns: minmax(0, 1fr); }
.vc .vc-src { margin: var(--mk-s-1) 0 0; font-size: var(--mk-fs-xs); color: var(--mk-text-3); }
.vc .vc-src a { color: inherit; text-decoration: underline; }
.vc .vc-empty { padding: var(--mk-s-5) var(--mk-s-2); }
.vc .vc-empty[hidden], .vc [hidden] { display: none !important; }
.vc .vc-result { display: flex; flex-direction: column; gap: var(--mk-s-2); }
.vc .vc-file { display: flex; align-items: center; gap: var(--mk-s-1); margin: 0; font-size: var(--mk-fs-sm); color: var(--mk-text-2); min-width: 0; }
.vc .vc-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 600; color: var(--mk-text); }
.vc .vc-file__size { flex: none; color: var(--mk-text-3); }
.vc .vc-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.vc .vc-frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-s-2); }
.vc .vc-frame { margin: 0; display: flex; flex-direction: column; gap: var(--mk-s-1); }
.vc .vc-frame img { display: block; width: 100%; max-height: 260px; object-fit: contain; background: var(--mk-surface-3); border: 1px solid var(--mk-border); border-radius: var(--mk-r-md); }
.vc .vc-frame figcaption { font-size: var(--mk-fs-xs); line-height: 1.45; color: var(--mk-text-2); }
.vc .vc-frame figcaption strong { color: var(--mk-text); }
.vc .vc-actions { display: flex; flex-wrap: wrap; gap: var(--mk-s-1); }
.vc .vc-actions:empty { display: none; }
.vc .vc-cta { display: flex; flex-direction: column; gap: var(--mk-s-2); padding: var(--mk-s-3); border: 1px solid var(--mk-accent-line); border-radius: var(--mk-r-lg); background: var(--mk-accent-soft); }
.vc .vc-cta__title { margin: 0; font: 600 var(--mk-fs-lg)/1.3 var(--mk-font); color: var(--mk-text); }
.vc .vc-cta__text { margin: 4px 0 0; font-size: var(--mk-fs-sm); line-height: 1.5; color: var(--mk-text-2); }
.vc .vc-cta .mk-btn { align-self: flex-start; }
@media (min-width: 640px) {
  .vc .vc-cta { flex-direction: row; align-items: center; justify-content: space-between; }
  .vc .vc-cta .mk-btn { align-self: center; flex: none; }
}
@media (max-width: 480px) {
  .vc .vc-frames { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mk-s-1); }
  .vc .mk-btn { min-height: 44px; }
}
.vc .vc-results { scroll-margin-top: 88px; }