/* YouTube thumbnail downloader */
.yd-form { display: flex; gap: 10px; flex-wrap: wrap; }
.yd-form input { flex: 1 1 320px; min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; font: 500 15px var(--font-body); background: var(--surface); color: var(--ink); }
.yd-form input:focus { outline: 2px solid var(--tool-line); border-color: var(--tool); }
.yd-info { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.yd-info img { width: 112px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; flex: none; background: #000; }
.yd-info .t { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.yd-info .c { font: 500 13px var(--font-body); color: var(--ink-2); margin-top: 3px; }
.yd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.yd-tile { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.yd-tile .pic { background: repeating-conic-gradient(#e9e9ee 0 25%, #fff 0 50%) 0 0/16px 16px; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.yd-tile .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.yd-tile .pic.bars { background: #000; }
.yd-tile .meta { padding: 10px 12px 4px; }
.yd-tile .meta b { font: 600 14px var(--font-body); color: var(--ink); }
.yd-tile .meta span { display: block; font: 500 12.5px var(--font-body); color: var(--ink-2); margin-top: 2px; }
.yd-tile .act { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 12px 12px; margin-top: auto; }
.yd-tile.off { opacity: .55; }
.yd-tile.off .pic { aspect-ratio: 16/9; color: var(--ink-3); font: 500 13px var(--font-body); }
.yd-h { font: 600 13px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin: 6px 0 -4px; }
@media (max-width: 560px) { .yd-info { flex-direction: column; align-items: flex-start; } .yd-info img { width: 100%; } }