/* YouTube thumbnail tester (views/youtube-thumbnail-tester.cjs). Shared pieces come from css/_image-kit.css. Borders are 1px hairlines. */
#visu-tools.vt-youtube-thumbnail-tester .vt-in > * + * { margin-top: 14px; }
#visu-tools.vt-youtube-thumbnail-tester .vt-in [hidden], #visu-tools.vt-youtube-thumbnail-tester .vt-out [hidden] { display: none !important; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-items { list-style: none; display: grid; gap: 10px; padding: 0 !important; margin: 14px 0 0 !important; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-items:not(:has(li:not([hidden]))) { display: none; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border: 1px solid var(--vt-line); border-radius: 12px; background: var(--vt-bg); margin: 0 !important; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-thumb { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 8px; background: #000; overflow: hidden; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-thumb canvas { display: block; max-width: 100%; max-height: 100%; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-item-main { display: grid; gap: 6px; min-width: 0; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-avatar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-avatar input[type=color] { width: 46px; height: 46px; padding: 3px; border-radius: 12px; border: 1px solid var(--vt-line-2); background: #fff; cursor: pointer; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-opts { display: grid; gap: 14px; margin-top: 14px; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-opts .vt-hint { margin: 4px 0 0; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-opts .vt-seg-item span { min-height: 36px; padding: 6px 14px; font-size: 14px; }
#visu-tools.vt-youtube-thumbnail-tester .vt-seg { min-width: 0; max-width: 100%; }
#visu-tools.vt-youtube-thumbnail-tester .vt-seg-items { flex-wrap: wrap; overflow-x: visible; margin: 0; padding: 0; }
#visu-tools.vt-youtube-thumbnail-tester .vt-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
#visu-tools.vt-youtube-thumbnail-tester .vt-out > * { margin: 0; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-stage { display: grid; place-items: center; padding: 12px; border-radius: 14px; background: var(--vt-bg); border: 1px solid var(--vt-line); max-height: 760px; overflow: auto; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-stage canvas { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 6px 22px rgba(10, 19, 36, .12); }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-stage[data-layout="mobile"] canvas { max-width: 340px; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-h { font-size: 15px; font-weight: 680; margin: 0 0 4px; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-small, #visu-tools.vt-youtube-thumbnail-tester .vt-yt-checks { padding: 14px; border: 1px solid var(--vt-line); border-radius: 14px; background: var(--vt-bg); }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-small-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-small-item { margin: 0; display: grid; gap: 6px; font-size: 13px; color: var(--vt-muted); }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-small-item canvas { display: block; border-radius: 6px; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-check + .vt-yt-check { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vt-line); }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-check h4 { font-size: 14px; margin: 0 0 6px; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-check ul { list-style: none; display: grid; gap: 6px; padding: 0 !important; margin: 0 !important; font-size: 14px; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-check li { margin: 0 !important; line-height: 1.45; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-lvl { display: inline-block; min-width: 64px; margin-right: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--vt-line); font-size: 12px; font-weight: 650; text-align: center; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-l-ok .vt-yt-lvl { color: #15803d; border-color: rgba(21, 128, 61, .35); }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-l-note .vt-yt-lvl, #visu-tools.vt-youtube-thumbnail-tester .vt-yt-l-check .vt-yt-lvl { color: var(--vt-muted); }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-l-warn .vt-yt-lvl { color: #b45309; border-color: rgba(180, 83, 9, .4); }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-l-bad .vt-yt-lvl { color: var(--vt-err, #b91c1c); border-color: rgba(185, 28, 28, .4); }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-checks .vt-more { display: inline-block; margin-top: 10px; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-next { display: grid; gap: 8px; justify-items: start; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-next p { margin: 0; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-spec th { text-align: left; white-space: nowrap; padding-right: 18px; }
#visu-tools.vt-youtube-thumbnail-tester .vt-yt-links { margin: 12px 0 0; }
@media (max-width: 600px) {
  #visu-tools.vt-youtube-thumbnail-tester .vt-yt-item { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
  #visu-tools.vt-youtube-thumbnail-tester .vt-yt-spec th { white-space: normal; }
  #visu-tools.vt-youtube-thumbnail-tester .vt-yt-stage { max-height: 620px; padding: 8px; }
}