/* Instagram highlight cover maker. Image kit summary and privacy lines come from css/_image-kit.css. Borders: 1px hairline. */
#visu-tools.vt-highlight-covers .vt-hc-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#visu-tools.vt-highlight-covers #vt-hc-labels { width: 100%; min-height: 150px; line-height: 1.5; font-size: 15px !important; padding: 12px 14px; border: 1px solid var(--vt-line-2); border-radius: 12px; background: #fff; color: var(--vt-ink); font-family: inherit; resize: vertical; }
#visu-tools.vt-highlight-covers #vt-hc-labels:focus { outline: 2px solid var(--vt-ink); outline-offset: 1px; }
#visu-tools.vt-highlight-covers #vt-hc-labels-hint, #visu-tools.vt-highlight-covers #vt-hc-sum { margin: 6px 0 0 !important; }
#visu-tools.vt-highlight-covers .vt-hc-pick { margin-top: 16px; padding: 14px; border: 1px solid var(--vt-line); border-radius: 14px; background: var(--vt-tint); }
#visu-tools.vt-highlight-covers .vt-hc-pick[hidden] { display: none; }
#visu-tools.vt-highlight-covers .vt-hc-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; margin: 8px 0; }
#visu-tools.vt-highlight-covers .vt-hc-ico { display: grid; place-items: center; height: 40px; padding: 0; border: 1px solid var(--vt-line-2); border-radius: 10px; background: #fff; color: var(--vt-ink); cursor: pointer; }
#visu-tools.vt-highlight-covers .vt-hc-ico[aria-pressed="true"] { background: var(--vt-ink); color: #fff; border-color: var(--vt-ink); }
#visu-tools.vt-highlight-covers .vt-hc-opts { display: grid; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--vt-line); }
#visu-tools.vt-highlight-covers .vt-hc-pals { display: flex; flex-wrap: wrap; gap: 8px; }
#visu-tools.vt-highlight-covers .vt-hc-pal { display: inline-flex; width: 52px; height: 32px; padding: 3px; gap: 2px; border-radius: 10px; border: 1px solid var(--vt-line-2); background: #fff; cursor: pointer; }
#visu-tools.vt-highlight-covers .vt-hc-pal span { flex: 1; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .08); }
#visu-tools.vt-highlight-covers .vt-hc-pal[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--vt-ink); }
#visu-tools.vt-highlight-covers .vt-hc-custom { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
#visu-tools.vt-highlight-covers .vt-hc-custom label { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--vt-text); }
#visu-tools.vt-highlight-covers .vt-hc-custom input[type=color] { width: 40px; height: 40px; padding: 3px; border-radius: 10px; border: 1px solid var(--vt-line-2); background: #fff; cursor: pointer; }
#visu-tools.vt-highlight-covers .vt-hc-labelopt { display: grid; gap: 2px; }
#visu-tools.vt-highlight-covers .vt-hc-labelopt .vt-hint { margin: 0 !important; }
#visu-tools.vt-highlight-covers .vt-hc-empty { padding: 30px 18px; border-radius: 16px; background: #edf0f4; border: 1px solid var(--vt-line); text-align: center; color: var(--vt-muted); }
#visu-tools.vt-highlight-covers .vt-hc-empty[hidden], #visu-tools.vt-highlight-covers .vt-hc-grid[hidden], #visu-tools.vt-highlight-covers .vt-hc-stage[hidden] { display: none; }
#visu-tools.vt-highlight-covers .vt-hc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
#visu-tools.vt-highlight-covers .vt-hc-thumb { display: grid; gap: 4px; padding: 4px; border: 1px solid var(--vt-line-2); border-radius: 10px; background: #fff; cursor: pointer; min-width: 0; }
#visu-tools.vt-highlight-covers .vt-hc-thumb canvas { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 10px; display: block; }
#visu-tools.vt-highlight-covers .vt-hc-thumb span { font-size: 12px; color: var(--vt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#visu-tools.vt-highlight-covers .vt-hc-thumb[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--vt-ink); border-color: var(--vt-ink); }
#visu-tools.vt-highlight-covers .vt-hc-stage { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 16px; }
#visu-tools.vt-highlight-covers .vt-hc-frame { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--vt-line-2); }
#visu-tools.vt-highlight-covers .vt-hc-frame canvas { display: block; width: 100%; height: auto; }
#visu-tools.vt-highlight-covers .vt-hc-safe { position: absolute; left: 50%; top: 50%; width: 61.111%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); display: none; pointer-events: none; }
#visu-tools.vt-highlight-covers .vt-hc-guides-on .vt-hc-safe { display: block; }
#visu-tools.vt-highlight-covers .vt-hc-side { display: grid; gap: 10px; align-content: start; }
#visu-tools.vt-highlight-covers .vt-hc-side .vt-hint { margin: 0 !important; }
#visu-tools.vt-highlight-covers .vt-hc-row { display: flex; flex-wrap: wrap; gap: 10px; }
#visu-tools.vt-highlight-covers .vt-hc-row figure { margin: 0; width: 66px; display: grid; gap: 4px; justify-items: center; }
#visu-tools.vt-highlight-covers .vt-hc-row canvas { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 1px var(--vt-line-2), 0 0 0 3px #fff, 0 0 0 4px var(--vt-line-2); }
#visu-tools.vt-highlight-covers .vt-hc-row figcaption { font-size: 12px; color: var(--vt-text); max-width: 66px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#visu-tools.vt-highlight-covers .vt-hc-cta-links { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
#visu-tools.vt-highlight-covers .vt-out { position: sticky; top: 16px; }
@media (max-width: 900px) {
  #visu-tools.vt-highlight-covers .vt-out { position: static; }
}
@media (max-width: 600px) {
  #visu-tools.vt-highlight-covers .vt-hc-stage { grid-template-columns: minmax(0, 1fr); }
  #visu-tools.vt-highlight-covers .vt-hc-frame { max-width: 240px; margin: 0 auto; width: 100%; }
  #visu-tools.vt-highlight-covers .vt-seg-items { flex-wrap: wrap; overflow-x: visible; margin: 0; padding: 0; }
}
@media (max-width: 600px) { #visu-tools.vt-highlight-covers .vt-hc-thumb span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.2; } }