/* QR story and post templates (2026-10-11). Shared pieces come from css/_image-kit.css. Borders are 1px hairlines. */
#visu-tools.vt-qr-story-template .vt-qst-texts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#visu-tools.vt-qr-story-template .vt-qst-texts .vt-hint { margin-top: -6px; }
#visu-tools.vt-qr-story-template #vt-qst-link-note { overflow-wrap: anywhere; }
#visu-tools.vt-qr-story-template #vt-qst-link-note[data-kind="error"] { color: var(--vt-err); }
#visu-tools.vt-qr-story-template .vt-qst-sample { justify-self: start; min-height: 40px; }
#visu-tools.vt-qr-story-template .vt-qst-mini { margin-top: 14px; background: var(--vt-bg); }
#visu-tools.vt-qr-story-template .vt-qst-mini canvas { border-radius: 6px; }

#visu-tools.vt-qr-story-template .vt-qst-color, #visu-tools.vt-qr-story-template .vt-qst-photo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
#visu-tools.vt-qr-story-template .vt-qst-color[hidden], #visu-tools.vt-qr-story-template .vt-qst-photo[hidden], #visu-tools.vt-qr-story-template #vt-qst-photo-rm[hidden] { display: none; }
#visu-tools.vt-qr-story-template .vt-qst-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#visu-tools.vt-qr-story-template .vt-qst-swatch { width: 42px; height: 42px; padding: 4px; border-radius: 50%; border: 1px solid transparent; background: none; cursor: pointer; flex: none; }
#visu-tools.vt-qr-story-template .vt-qst-swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--vt-line-2); }
#visu-tools.vt-qr-story-template .vt-qst-swatch[aria-pressed="true"] { border-color: var(--vt-ink); }
#visu-tools.vt-qr-story-template .vt-qst-custom { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; font-size: 14px; font-weight: 600; color: var(--vt-ink); cursor: pointer; }
#visu-tools.vt-qr-story-template .vt-qst-custom input[type=color] { width: 42px; height: 42px; min-height: 0; padding: 3px !important; border-radius: 12px !important; border: 1px solid var(--vt-line-2) !important; background: #fff !important; flex: none; cursor: pointer; }
#visu-tools.vt-qr-story-template #vt-qst-photo-rm { justify-self: start; min-height: 40px; }

#visu-tools.vt-qr-story-template .vt-qst-stage { display: grid; place-items: center; padding: 22px 16px; border: 1px solid var(--vt-line); border-radius: 14px; background: #eef1f5; overflow: hidden; }
#visu-tools.vt-qr-story-template .vt-qst-frame { position: relative; display: block; line-height: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(10, 19, 36, .18); }
#visu-tools.vt-qr-story-template .vt-qst-frame canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 540px; }
#visu-tools.vt-qr-story-template .vt-qst-band { display: none; position: absolute; left: 0; right: 0; background: rgba(25, 180, 239, .26); pointer-events: none; }
#visu-tools.vt-qr-story-template .vt-qst-band-top { top: 0; border-bottom: 1px dashed #fff; }
#visu-tools.vt-qr-story-template .vt-qst-band-bottom { bottom: 0; border-top: 1px dashed #fff; }
#visu-tools.vt-qr-story-template .vt-qst-guides-on .vt-qst-band { display: block; }
#visu-tools.vt-qr-story-template .vt-qst-guides { display: grid; gap: 2px; }
#visu-tools.vt-qr-story-template .vt-qst-guides .vt-check { min-height: 40px; }
#visu-tools.vt-qr-story-template .vt-qst-dyn { margin-top: 6px; }
#visu-tools.vt-qr-story-template .vt-qst-dyn strong { color: var(--vt-ink); font-size: 16px; }
#visu-tools.vt-qr-story-template .vt-qst-dyn .vt-btn { justify-self: start; }
#visu-tools.vt-qr-story-template .vt-qst-steps { padding-left: 22px !important; display: grid; gap: 6px; }
#visu-tools.vt-qr-story-template .vt-qst-linkline { color: var(--vt-ink); }
#visu-tools.vt-qr-story-template .vt-qst-linkline a { font-weight: 650; }
#visu-tools.vt-qr-story-template .vt-qst-independent { margin-top: 12px !important; }
@media (max-width: 600px) {
  #visu-tools.vt-qr-story-template .vt-ik-opt .vt-seg-item span { min-height: 40px; }
  #visu-tools.vt-qr-story-template .vt-qst-stage { padding: 16px 12px; }
  #visu-tools.vt-qr-story-template .vt-qst-frame canvas { max-height: 460px; }
  #visu-tools.vt-qr-story-template .vt-qst-dyn .vt-btn { justify-self: stretch; text-align: center; }
}