/* ===================================================================
   Thumbnail & Cover Downloader suite

   Shared by every thumbnail/cover page. Builds on backlink-maker.css
   (the bm-* design system the YouTube Thumbnail Downloader uses) and
   adds only the results grid, asset cards, status panels and the
   per-mode extras. Scoped under .tsu; .tn- and .ts- are taken elsewhere.

   Space for results is reserved before loading (skeleton cards with
   fixed aspect ratios) so nothing jumps when images arrive.
   =================================================================== */

.tsu { --tsu-ok: #17864f; --tsu-ok-soft: #e7f6ee; --tsu-warn: #8f5600; --tsu-warn-soft: #fff2dc; --tsu-bad: #c62f2f; --tsu-bad-soft: #fdeeee; }

.tsu .bm-input textarea,
.tsu .bm-input input[type="url"],
.tsu .bm-input input[type="text"] {
    width: 100%; min-height: 52px; resize: vertical; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 1rem; color: var(--bm-ink); padding: 14px 8px; line-height: 1.4;
}
.tsu .bm-input.is-multi textarea { min-height: 132px; }

.tsu-inputbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.tsu-examples { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; font-size: .85rem; }
.tsu-examples li { margin: 0; }
.tsu-example {
    border: 1px dashed var(--bm-line); background: var(--bm-surface); color: var(--bm-ink-2);
    border-radius: 999px; padding: 4px 10px; font: inherit; font-size: .8rem; cursor: pointer; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tsu-example:hover { border-color: var(--bm-accent); color: var(--bm-accent-strong); }

.tsu-status {
    display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 14px;
    border-radius: 12px; font-size: .9rem; line-height: 1.45; background: var(--tsu-warn-soft); color: var(--tsu-warn);
}
.tsu-status.is-info { background: var(--bm-accent-soft); color: var(--bm-accent-strong); }
.tsu-status i { margin-top: 3px; }

.tsu-copyright {
    display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 10px 14px;
    border-left: 3px solid var(--bm-accent); background: var(--bm-surface); border-radius: 0 10px 10px 0;
    font-size: .86rem; line-height: 1.5; color: var(--bm-ink-3);
}

/* ---------- Results ---------- */
.tsu-results { margin-top: 18px; min-height: 0; }
.tsu-results[aria-busy="true"] { cursor: progress; }

.tsu-summary {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
    padding: 16px; background: var(--bm-surface); border: 1px solid var(--bm-line); border-radius: var(--bm-r-lg);
    box-shadow: var(--bm-shadow); margin-bottom: 14px;
}
.tsu-summary-main { min-width: 0; flex: 1 1 320px; }
.tsu-kicker { margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bm-accent-strong); }
.tsu-title { margin: 0; font-size: 1.12rem; font-weight: 800; color: var(--bm-ink); overflow-wrap: anywhere; }
.tsu-sub { margin: 4px 0 0; font-size: .88rem; color: var(--bm-ink-3); overflow-wrap: anywhere; }
.tsu-sub a { color: var(--bm-accent-strong); }
.tsu-summary-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.tsu-grid {
    display: grid; gap: 14px; margin: 0; padding: 0; list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.tsu-card {
    position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0;
    background: var(--bm-surface); border: 1px solid var(--bm-line); border-radius: var(--bm-r);
    box-shadow: var(--bm-shadow); overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.tsu-card:focus-within { border-color: var(--bm-accent); box-shadow: 0 0 0 3px var(--bm-accent-ring); }
.tsu-card.is-best { border-color: var(--bm-accent); }
.tsu-card.is-selected { border-color: var(--tsu-ok); box-shadow: 0 0 0 2px rgba(23, 134, 79, .35); }

.tsu-thumb {
    position: relative; aspect-ratio: 16 / 10; background:
        repeating-conic-gradient(#f1efec 0% 25%, #fbfaf8 0% 50%) 50% / 18px 18px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.tsu-thumb img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.tsu-thumb.is-square { aspect-ratio: 1 / 1; }
.tsu-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tsu-badge {
    padding: 3px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .02em;
    color: #fff; background: rgba(16, 22, 43, .78);
}
.tsu-badge.is-best { background: var(--bm-accent-strong); }
.tsu-badge.is-original { background: var(--tsu-ok); }

.tsu-select { position: absolute; top: 8px; right: 8px; }
.tsu-select input { width: 22px; height: 22px; accent-color: var(--tsu-ok); cursor: pointer; }

.tsu-card-body { padding: 12px 12px 4px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tsu-card-label { margin: 0; font-weight: 800; font-size: .95rem; color: var(--bm-ink); overflow-wrap: anywhere; }
.tsu-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: .82rem; color: var(--bm-ink-3); }
.tsu-facts div { display: flex; gap: 4px; }
.tsu-facts dt { font-weight: 600; }
.tsu-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.tsu-tag { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .76rem; color: var(--bm-ink-2); overflow-wrap: anywhere; }

.tsu-card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 12px; }
.tsu-card-actions .bm-btn { min-height: 38px; padding: 0 12px; font-size: .85rem; flex: 1 1 auto; }

.tsu-skeleton .tsu-thumb { background: linear-gradient(90deg, #efedea 0%, #f7f6f4 50%, #efedea 100%) 0 0 / 200% 100%; animation: tsu-shimmer 1.2s linear infinite; }
.tsu-skeleton .tsu-line { height: 12px; margin: 6px 0; border-radius: 6px; background: #efedea; }
.tsu-skeleton .tsu-line.is-short { width: 55%; }

.tsu-empty, .tsu-fail {
    display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--bm-r);
    background: var(--bm-surface); border: 1px solid var(--bm-line);
}
.tsu-fail { border-color: #f3c8c8; background: var(--tsu-bad-soft); color: #8d1f1f; }
.tsu-fail p, .tsu-empty p { margin: 0; }
.tsu-fail strong { display: block; margin-bottom: 2px; }

.tsu-notes { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tsu-notes li { display: flex; gap: 8px; font-size: .86rem; color: var(--bm-ink-3); }

/* ---------- Tables (bulk, playlist, warnings) ---------- */
.tsu-table-wrap { overflow-x: auto; border: 1px solid var(--bm-line); border-radius: var(--bm-r); background: var(--bm-surface); }
.tsu-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tsu-table th, .tsu-table td { padding: 10px 12px; border-bottom: 1px solid var(--bm-line-2); text-align: left; vertical-align: middle; }
.tsu-table th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bm-ink-3); background: #faf9f7; position: sticky; top: 0; }
.tsu-table tr:last-child td { border-bottom: 0; }
.tsu-table img { display: block; width: 120px; height: 68px; object-fit: cover; border-radius: 8px; background: #efedea; }
.tsu-table .tsu-cell-main { min-width: 180px; overflow-wrap: anywhere; }

.tsu-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.tsu-pill.is-ok { background: var(--tsu-ok-soft); color: var(--tsu-ok); }
.tsu-pill.is-bad { background: var(--tsu-bad-soft); color: var(--tsu-bad); }
.tsu-pill.is-warn { background: var(--tsu-warn-soft); color: var(--tsu-warn); }
.tsu-pill.is-muted { background: #f1efec; color: var(--bm-ink-3); }
.tsu-pill.is-wait { background: var(--bm-accent-soft); color: var(--bm-accent-strong); }

.tsu-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.tsu-toolbar .bm-search input { min-height: 40px; }

/* ---------- Social previews ---------- */
.tsu-previews { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.tsu-preview { margin: 0; }
.tsu-preview figcaption { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 800; color: var(--bm-ink); font-size: .92rem; }
.tsu-pcard { border: 1px solid #dadde1; border-radius: 10px; overflow: hidden; background: #fff; color: #1c1e21; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.tsu-pcard-img { aspect-ratio: 1.91 / 1; background: #e4e6eb center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: #65676b; font-size: .8rem; }
.tsu-pcard-body { padding: 10px 12px; }
.tsu-pcard-domain { margin: 0; font-size: .72rem; text-transform: uppercase; color: #65676b; }
.tsu-pcard-title { margin: 2px 0 0; font-weight: 700; font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tsu-pcard-desc { margin: 2px 0 0; font-size: .84rem; color: #65676b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tsu-pcard.is-x { border-radius: 16px; }
.tsu-pcard.is-x .tsu-pcard-img { position: relative; }
.tsu-pcard.is-small { display: flex; }
.tsu-pcard.is-small .tsu-pcard-img { width: 110px; flex: 0 0 110px; aspect-ratio: 1 / 1; }
.tsu-pcard.is-whatsapp { background: #d9fdd3; border-color: #bfe8b8; }
.tsu-pcard.is-whatsapp .tsu-pcard-body { background: #d1f4cc; }
.tsu-pcard.is-telegram { border-left: 3px solid #3390ec; border-radius: 4px 10px 10px 4px; }
.tsu-pcard.is-discord { background: #2b2d31; color: #dbdee1; border: 0; border-left: 4px solid var(--tsu-discord, #1e1f22); border-radius: 4px; max-width: 432px; }
.tsu-pcard.is-discord .tsu-pcard-title { color: #00a8fc; }
.tsu-pcard.is-discord .tsu-pcard-desc, .tsu-pcard.is-discord .tsu-pcard-domain { color: #b5bac1; }
.tsu-pcard.is-discord .tsu-pcard-img { margin: 0 12px 12px; border-radius: 4px; }

.tsu-warnings { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tsu-warnings li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: .88rem; line-height: 1.45; }
.tsu-warnings .is-error { background: var(--tsu-bad-soft); color: #8d1f1f; }
.tsu-warnings .is-warning { background: var(--tsu-warn-soft); color: var(--tsu-warn); }
.tsu-warnings .is-info { background: var(--bm-accent-soft); color: var(--bm-accent-strong); }
.tsu-meta-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tsu-meta-table th { text-align: left; width: 34%; padding: 8px 10px; color: var(--bm-ink-3); font-weight: 700; vertical-align: top; }
.tsu-meta-table td { padding: 8px 10px; overflow-wrap: anywhere; color: var(--bm-ink); }
.tsu-meta-table tr + tr th, .tsu-meta-table tr + tr td { border-top: 1px solid var(--bm-line-2); }

/* ---------- Channel banner device previews ---------- */
.tsu-banner-devices { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tsu-device { margin: 0; }
.tsu-device figcaption { font-weight: 800; font-size: .9rem; color: var(--bm-ink); margin-bottom: 6px; }
.tsu-device figcaption small { font-weight: 500; color: var(--bm-ink-3); }
.tsu-device-frame { position: relative; overflow: hidden; border-radius: 10px; background: #0f0f0f; border: 1px solid var(--bm-line); }
.tsu-device-frame img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none; }
.tsu-safe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 2px dashed #ffd84d; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35); pointer-events: none; }

/* ---------- Frame generator ---------- */
.tsu-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
    min-height: 180px; padding: 20px; border: 2px dashed var(--bm-line); border-radius: var(--bm-r-lg); background: var(--bm-surface); cursor: pointer;
}
.tsu-drop.is-over { border-color: var(--bm-accent); background: var(--bm-accent-soft); }
.tsu-drop:focus-visible { outline: 3px solid var(--bm-accent-ring); outline-offset: 2px; }
.tsu-video-wrap { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.tsu-video-wrap video { width: 100%; max-height: 60vh; background: #000; border-radius: var(--bm-r); }
.tsu-controls { display: grid; gap: 10px; }
.tsu-controls label { display: grid; gap: 4px; font-size: .85rem; font-weight: 700; color: var(--bm-ink-2); }
.tsu-controls input[type="range"] { width: 100%; }
.tsu-controls select, .tsu-controls input[type="number"], .tsu-controls input[type="text"] {
    min-height: 40px; padding: 0 10px; border: 1px solid var(--bm-line); border-radius: 10px; font: inherit; background: var(--bm-surface); color: var(--bm-ink);
}
.tsu-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.tsu-row > * { flex: 1 1 120px; }
.tsu-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--bm-line); border-radius: 12px; background: var(--bm-surface); }
.tsu-seg button { border: 0; background: transparent; padding: 6px 10px; border-radius: 8px; font: inherit; font-size: .84rem; font-weight: 700; color: var(--bm-ink-2); cursor: pointer; }
.tsu-seg button[aria-checked="true"], .tsu-seg button[aria-pressed="true"] { background: var(--bm-ink); color: #fff; }
.tsu-progress { height: 8px; border-radius: 999px; background: #efedea; overflow: hidden; }
.tsu-progress span { display: block; height: 100%; width: 0; background: var(--bm-accent); transition: width .2s; }

/* ---------- History ---------- */
.tsu-history-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tsu-history-item { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; background: var(--bm-surface); border: 1px solid var(--bm-line); border-radius: var(--bm-r); }
.tsu-history-item img { width: 160px; height: 90px; object-fit: cover; border-radius: 8px; background: #efedea; }
.tsu-timeline { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 12px 0 0; padding: 0; list-style: none; }
.tsu-compare { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }

/* ---------- Info cards ----------
   Supported-input examples contain long unbreakable links
   (tiktok.com/@username/video/1234567890123456789) that pushed a card past
   a 400px viewport. Grid/flex children need min-width:0 to shrink. */
.tsu .bm-how-card { min-width: 0; overflow-wrap: anywhere; }
.tsu .bm-how-card li { overflow-wrap: anywhere; }

/* ---------- Shared section headings and details ---------- */
.tsu-section { margin-top: 22px; }
.tsu-section-title { margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; color: var(--bm-ink); display: flex; align-items: center; gap: 8px; }
.tsu-urls { margin-top: 4px; font-size: .8rem; color: var(--bm-ink-3); }
.tsu-urls summary { cursor: pointer; font-weight: 700; color: var(--bm-accent-strong); }
.tsu-urls p { margin: 4px 0 0; overflow-wrap: anywhere; }

/* ---------- History extras ---------- */
.tsu-history-ph { width: 160px; height: 90px; border-radius: 8px; background: #efedea; display: flex; align-items: center; justify-content: center; color: var(--bm-ink-3); font-size: .8rem; }
.tsu-history-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tsu-history-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tsu-history-confirm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--tsu-bad-soft); color: #8d1f1f; font-size: .86rem; }
@media (max-width: 760px) { .tsu-history-ph { width: 100%; height: auto; aspect-ratio: 16 / 9; } .tsu-history-actions { justify-content: flex-start; } }

@keyframes tsu-shimmer { to { background-position: -200% 0; } }

@media (max-width: 760px) {
    .tsu-video-wrap { grid-template-columns: 1fr; }
    .tsu-history-item { grid-template-columns: 1fr; }
    .tsu-history-item img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .tsu-compare { grid-template-columns: 1fr; }
    .tsu-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
    .tsu-summary-actions .bm-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .tsu *, .tsu *::before, .tsu *::after { animation: none !important; transition: none !important; }
}