/* YouTube Thumbnail Downloader - per-tool styles. */

.yt-intro { margin: 0 0 14px; color: #475569; font-size: 0.95rem; line-height: 1.5; }
.yt-input-row { display: flex; gap: 10px; flex-wrap: wrap; }
.yt-input-row .text-input { flex: 1 1 320px; }
.yt-error { color: #b91c1c; font-size: 0.9rem; margin: 10px 0 0; }
.yt-error[hidden] { display: none; }

.yt-results { margin-top: 18px; }
.yt-results[hidden] { display: none; }
.yt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.yt-card {
    border: 1px solid #e7eaf0; border-radius: 12px; background: #fff;
    padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.yt-thumb {
    aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
    background: repeating-conic-gradient(#eef2f6 0% 25%, #fff 0% 50%) 50% / 16px 16px;
    display: flex; align-items: center; justify-content: center;
}
.yt-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.yt-na { color: #94a3b8; font-size: 0.85rem; padding: 8px; text-align: center; }
.yt-card.is-unavailable { opacity: 0.7; }
.yt-size-label { font-weight: 700; color: #1f2937; font-size: 0.95rem; }
.yt-size-dims { color: #64748b; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.yt-actions { display: flex; gap: 8px; margin-top: auto; }
.yt-actions .primary-btn { background: #dc2626; border-color: #dc2626; }
.yt-actions .primary-btn:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.yt-actions button[disabled] { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 560px) {
    .yt-grid { grid-template-columns: 1fr; }
}