/* Free QR tools: QR studio, bulk QR, UPI QR, Google review, visiting card, scanner.
   Tokens only (dark mode follows hi4.css). Printed/phone "card" previews use fixed
   light colours on purpose: they show what the paper or phone screen will look like. */

/* Tap targets: at least 40px on these pages */
.tq .btn-sm, .tq .btn-xs { --bh: 40px; }
.tq .btn-xs { padding: 0 12px; font-size: 14px; }
.tq .swatch { width: 40px; height: 40px; }
.tq .chip-btn { min-height: 40px; }
.tq .label .faint { font-weight: 500; }
.tq .qr-stage canvas { max-width: 300px; }
.tq .hint a { color: inherit; }
.tq .hint svg, .tq .ico-inline { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }

/* Studio layout: content -> preview -> design on phones; preview sticky on the right on desktop */
.qs-layout { grid-template-areas: "content" "preview" "design"; }
.qs-layout > .qs-content { grid-area: content; }
.qs-layout > .preview-col { grid-area: preview; }
.qs-layout > .qs-design { grid-area: design; }
@media (min-width: 960px) {
  .qs-layout { grid-template-areas: "content preview" "design preview"; grid-template-rows: auto 1fr; }
}

.qs-types { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.qs-types .opt { min-height: 64px; padding: 8px 4px; font-size: 12.5px; line-height: 1.2; text-align: center; }
.qs-types .opt svg { width: 22px; height: 22px; }
.opt-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt .mini { width: 34px; height: 34px; }

.qs-sec { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.qs-sec.first { border-top: 0; padding-top: 0; }
.qs-sec > h3, .qs-h { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.qs-colors { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.color-input { min-height: 50px; }
.color-input input[type="text"] { flex: 1; min-width: 0; color: var(--ink); }
.qs-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qs-range { display: flex; align-items: center; gap: 12px; }
.qs-range output { min-width: 2ch; font-weight: 700; text-align: right; }

.file-btn { position: relative; overflow: hidden; }
.file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; font-size: 0; }
.file-btn:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.qs-logo-prev { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: #fff; }

.qs-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qs-actions > .btn-primary, .qs-actions > .span-2 { grid-column: 1 / -1; }
.qs-actions .btn { white-space: normal; text-align: center; line-height: 1.2; }
.qs-test:empty { display: none; }
.qs-h2 { display: flex; align-items: center; gap: 8px; }
.qs-h2 svg { width: 20px; height: 20px; color: var(--accent); }
.qs-test { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600; }
.qs-test .ok { color: var(--green-ink); }
.qs-test .bad { color: var(--red); }
.qs-raw summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink-2); min-height: 40px; display: flex; align-items: center; }
.qs-raw .out { white-space: pre-wrap; max-height: 180px; overflow: auto; }
.pw-wrap { display: flex; gap: 8px; }
.pw-wrap .input { flex: 1; min-width: 0; }

/* Bulk */
.bq-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.bq-tile { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 10px; display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; color: var(--ink); font: inherit; min-width: 0; }
.bq-tile:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.bq-tile canvas { width: 100%; height: auto; border-radius: 6px; background: #fff; }
.bq-tile .lbl { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bq-tile .sub { font-size: 12px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bq-tile.is-err { border-color: var(--red); background: var(--red-soft); cursor: default; }

/* Poster / card previews (rendered canvases) */
.poster-prev { width: 100%; max-width: 300px; height: auto; margin: 0 auto; border-radius: 10px; box-shadow: var(--shadow); background: #fff; }

/* Digital visiting card preview (looks like the phone card, so fixed light colours) */
.vc-card { --vc: #3730C9; --vc-on: #fff; width: 100%; max-width: 380px; margin: 0 auto; border-radius: 20px; overflow: hidden; background: #fff; color: #101326; border: 1px solid var(--line); box-shadow: var(--shadow); }
.vc-top { background: var(--vc); color: var(--vc-on); padding: 22px 18px; display: flex; gap: 14px; align-items: center; }
.vc-photo { width: 68px; height: 68px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: rgba(255, 255, 255, .22); display: grid; place-items: center; font-weight: 800; font-size: 26px; color: var(--vc-on); border: 2px solid rgba(255, 255, 255, .55); }
.vc-name { font-size: 20px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.vc-role { font-size: 14px; opacity: .92; overflow-wrap: anywhere; }
.vc-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 14px; }
.vc-acts a, .vc-acts span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; border-radius: 12px; background: #F2F3F8; color: #2B3045; font-size: 12px; font-weight: 700; text-decoration: none; }
.vc-acts a:hover { background: #E8E9F2; color: #101326; }
.vc-acts span { opacity: .4; }
.vc-acts svg { width: 20px; height: 20px; }
.vc-rows { padding: 0 16px 8px; }
.vc-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid #EEF0F5; font-size: 14px; color: #2B3045; overflow-wrap: anywhere; min-width: 0; }
.vc-row svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: #5B6178; }
.vc-row a { color: #2B3045; text-decoration: none; }
.vc-save { display: block; margin: 8px 16px 18px; padding: 12px; border-radius: 12px; text-align: center; font-weight: 800; background: var(--vc); color: var(--vc-on); }
.vc-back { padding: 26px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.vc-back canvas { width: 210px; max-width: 100%; height: auto; }
.vc-back .s { font-size: 13px; color: #5B6178; }

/* Scanner */
.scan-stage { position: relative; background: #000; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1 / 1; max-height: 70vh; width: 100%; }
.scan-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 14%; border: 3px solid rgba(255, 255, 255, .92); border-radius: 18px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35); pointer-events: none; }
.scan-frame::after { content: ""; position: absolute; left: 6%; right: 6%; height: 2px; top: 10%; background: rgba(255, 255, 255, .85); animation: scanline 2.2s ease-in-out infinite alternate; }
@keyframes scanline { to { top: 88%; } }
.scan-drop { border: 2px dashed var(--line-2); border-radius: var(--r-md); padding: 22px 16px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; color: var(--muted); }
.scan-drop.is-over { border-color: var(--accent); background: var(--accent-tint); }
.scan-drop svg { width: 36px; height: 36px; opacity: .5; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; font-size: 15px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* Review stars in the how-to */
.stars { display: inline-flex; gap: 2px; color: var(--amber); }
.stars svg { width: 18px; height: 18px; fill: currentColor; }