/* Video downloader only – shared styles are in static/css/app.css */
.results { display: grid; gap: 14px; margin: 16px 0 28px; }
.vd-card {
  display: grid; grid-template-columns: 180px 1fr; gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
}
.vd-card .thumb { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--line); }
.vd-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-card .dur {
  position: absolute; right: 6px; bottom: 6px; background: rgb(0 0 0 / .7); color: #fff;
  font-size: .75rem; padding: 1px 6px; border-radius: 6px;
}
.vd-card .dur:empty { display: none; }
.vd-card .info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vd-card .meta { display: flex; gap: 8px; font-size: .8rem; color: var(--muted); flex-wrap: wrap; }
.vd-card .platform { color: var(--accent); font-weight: 600; }
.vd-card .title {
  margin: 0; font-size: 1rem; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vd-card .controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.vd-card select { width: auto; padding: 8px 10px; }
.images { display: flex; flex-wrap: wrap; gap: 6px; }
.img-btn {
  position: relative; width: 64px; height: 64px; padding: 0; border-radius: 8px; cursor: pointer;
  overflow: hidden; background: var(--line); border: 1px solid var(--line);
}
.img-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-btn span {
  position: absolute; left: 4px; top: 4px; background: rgb(0 0 0 / .65); color: #fff;
  font-size: .7rem; padding: 0 5px; border-radius: 5px;
}
.img-btn:hover { outline: 2px solid var(--accent); }

.vd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.vd-steps div {
  display: flex; gap: 10px; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; font-size: .9rem;
}
.vd-steps b {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .8rem;
}
@media (max-width: 600px) {
  .vd-card { grid-template-columns: 96px 1fr; gap: 12px; }
  .vd-steps { grid-template-columns: 1fr; }
}