/* BaseHeart Thumbnail Creator. The page shares the Photo Creator's layout and
   controls (photo-creator.css); these rules add what is its own. */

.thumbnail-creator-page .photo-creator-heading h1 { background: linear-gradient(100deg, #fff 30%, #ffb0b0 65%, #ff5f6d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.thumb-input { width: 100%; min-height: 42px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(12,11,15,.7); color: #fff; font-size: 14px; }
.thumb-input::placeholder, #thumbnailCreatorPage textarea::placeholder { color: #75707e; }
.thumb-input:focus { outline: none; border-color: rgba(242,80,116,.6); box-shadow: 0 0 0 3px rgba(242,80,116,.14); }
.thumb-input:disabled { opacity: .45; }
#thumbnailCreatorPage textarea { width: 100%; resize: vertical; padding: 11px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(12,11,15,.7); color: #fff; font-size: 13.5px; line-height: 1.5; }
#thumbnailCreatorPage textarea:focus { outline: none; border-color: rgba(242,80,116,.6); box-shadow: 0 0 0 3px rgba(242,80,116,.14); }
.thumb-toggle { min-height: 30px; padding: 5px 10px; font-size: 11.5px; }
.thumb-reference-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.thumb-accent-row { align-items: center; }
.thumb-accent { width: 46px; height: 36px; padding: 3px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(12,11,15,.7); cursor: pointer; }
.thumb-accent.active { border-color: rgba(242,80,116,.7); box-shadow: 0 0 0 3px rgba(242,80,116,.16); }

/* The YouTube link: paste, scan, then pick frames from the video. */
.thumb-youtube-field { padding: 14px; border: 1px solid rgba(242,80,116,.22); border-radius: 14px; background: linear-gradient(150deg, rgba(242,80,116,.08), rgba(115,60,255,.06)); }
.thumb-youtube-row { display: flex; gap: 8px; align-items: stretch; }
.thumb-youtube-row .thumb-input { flex: 1 1 auto; min-width: 0; }
.thumb-scan-button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.thumb-scan-button b { color: #ffb0c0; font-variant-numeric: tabular-nums; }
.thumb-scan-button:disabled { opacity: .5; cursor: default; }
.thumb-scan-button[aria-busy="true"] { opacity: .8; }
.thumb-youtube-result { display: grid; gap: 8px; margin-top: 4px; }
.thumb-youtube-result[hidden] { display: none; }
.thumb-youtube-video { display: grid; gap: 2px; min-width: 0; }
.thumb-youtube-video strong { overflow: hidden; color: #f2eef6; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.thumb-youtube-video small { color: #9e98aa; font-size: 12px; }
.thumb-youtube-done { color: #9fe0b8; }
.thumb-scene-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.thumb-scene-row[data-format="shorts"] { grid-template-columns: repeat(4, minmax(0, 76px)); }
.thumb-scene { position: relative; display: block; overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: #0d0c10; cursor: pointer; }
.thumb-scene img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.thumb-scene-row[data-format="shorts"] .thumb-scene img { aspect-ratio: 9 / 16; }
.thumb-scene-tag { position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px); overflow: hidden; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.72); color: #fff; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
:is(#thumbnailCreatorPage) button.thumb-scene { border-color: rgba(255,255,255,.14) !important; background: #0d0c10 !important; box-shadow: none !important; }
:is(#thumbnailCreatorPage) button.thumb-scene.active { border-color: rgba(242,80,116,.9) !important; box-shadow: 0 0 0 2px rgba(242,80,116,.45) !important; }
.thumb-scene-check { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f25074; color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.4); }

.thumb-stage[data-format="youtube"] .photo-loading-tile { width: min(520px, 78vw); aspect-ratio: 16 / 9; }
.thumb-stage[data-format="shorts"] .photo-loading-tile { width: min(230px, 54vw); aspect-ratio: 9 / 16; }
.thumb-card[data-format="youtube"] img { aspect-ratio: 16 / 9; object-fit: cover; }
.thumb-card[data-format="shorts"] img { aspect-ratio: 9 / 16; object-fit: cover; }
.thumb-history-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.thumb-history-grid .thumb-card[data-format="youtube"] img { aspect-ratio: 16 / 9; }
.thumb-history-grid .thumb-card[data-format="shorts"] img { aspect-ratio: 16 / 9; object-fit: contain; background: #0d0c10; }

.thumb-panel { display: grid; gap: 14px; margin-top: 24px; padding: 20px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: linear-gradient(160deg, rgba(30,27,36,.86), rgba(20,18,25,.82)); box-shadow: 0 24px 70px rgba(0,0,0,.35); scroll-margin-top: 88px; }
.thumb-panel[hidden] { display: none; }
.thumb-edit-panel { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; }
.thumb-panel-image { align-self: start; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: #0d0c10; }
.thumb-panel-image[data-format="shorts"] { max-width: 220px; }
.thumb-panel-image img { display: block; width: 100%; height: auto; }
.thumb-panel-body { display: grid; gap: 12px; align-content: start; min-width: 0; }
.thumb-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.thumb-panel-head h2 { margin: 0; color: #f2eef6; font-size: 18px; }
.thumb-apply { justify-content: space-between; padding: 0 18px; }
.thumb-apply b { font-variant-numeric: tabular-nums; }
.thumb-theme-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* A YouTube-like feed at the sizes people see a thumbnail. */
.thumb-preview-samples { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 240px) minmax(0, 168px); gap: 22px; align-items: start; padding: 18px; border-radius: 14px; background: #0f0f0f; }
.thumb-preview-panel[data-theme="light"] .thumb-preview-samples { background: #ffffff; }
.thumb-yt { display: grid; gap: 8px; margin: 0; min-width: 0; }
.thumb-yt-label { color: #8f899a; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.thumb-yt-frame { position: relative; overflow: hidden; border-radius: 12px; background: #202020; }
.thumb-yt-frame[data-format="youtube"] { aspect-ratio: 16 / 9; }
.thumb-yt-frame[data-format="shorts"] { aspect-ratio: 9 / 16; max-width: 62%; }
.thumb-yt-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb-yt-duration { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.8); color: #fff; font-weight: 600; font-size: 12px; line-height: 1.4; }
.thumb-yt-next .thumb-yt-duration, .thumb-yt-phone .thumb-yt-duration { font-size: 10.5px; }
.thumb-yt-next .thumb-yt-frame { border-radius: 8px; }
.thumb-yt-meta { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
.thumb-yt-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #ff5f6d, #733cff); }
.thumb-yt-next .thumb-yt-meta { grid-template-columns: minmax(0, 1fr); }
.thumb-yt-next .thumb-yt-avatar { display: none; }
.thumb-yt-copy { display: grid; gap: 3px; min-width: 0; }
.thumb-yt-copy strong { display: -webkit-box; overflow: hidden; color: #f1f1f1; font-size: 14px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.thumb-yt-phone .thumb-yt-copy strong { font-size: 13px; }
.thumb-yt-next .thumb-yt-copy strong { font-size: 12px; }
.thumb-yt-copy small { color: #aaa; font-size: 12px; }
.thumb-preview-panel[data-theme="light"] .thumb-yt-copy strong { color: #0f0f0f; }
.thumb-preview-panel[data-theme="light"] .thumb-yt-copy small { color: #606060; }
.thumb-preview-panel[data-theme="light"] .thumb-yt-frame { background: #f2f2f2; }

@media (max-width: 980px) {
  .thumb-edit-panel { grid-template-columns: 1fr; }
  .thumb-preview-samples { grid-template-columns: 1fr 1fr; }
  .thumb-yt-home { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .thumb-panel { padding: 16px; }
  .thumb-youtube-row { flex-wrap: wrap; }
  .thumb-scan-button { flex: 1 1 100%; justify-content: center; }
  .thumb-preview-samples { grid-template-columns: 1fr; padding: 12px; }
  .thumb-yt-phone { max-width: 240px; }
  .thumb-yt-next { max-width: 168px; }
}

:is(#thumbnailCreatorPage) button.thumb-toggle.active { border-color: rgba(242,80,116,.7) !important; background: linear-gradient(150deg, rgba(242,80,116,.22), rgba(115,60,255,.16)) !important; color: #fff !important; }