/* Create By Asking: the QR code generator tool. Loaded after style.css and tools.css; reuses the dark .tool-shell look. */

.qr { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); grid-template-areas: "kinds kinds" "form out" "opts out"; align-items: start; column-gap: 28px; }
.qr [hidden] { display: none !important; }
.qr-kinds { grid-area: kinds; display: flex; flex-wrap: wrap; gap: 6px; }
.qr-form { grid-area: form; display: grid; gap: 12px; }
.qr-panel { display: grid; gap: 12px; }
.qr-opts { grid-area: opts; display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.qr-out { grid-area: out; display: grid; gap: 12px; position: sticky; top: 16px; }
.qr label { display: grid; gap: 6px; font-size: var(--step--1); color: #CBBFE8; }
.qr label small { color: #A597CC; }
.qr textarea { background: rgba(255, 255, 255, 0.08); border: 1.5px solid transparent; color: #fff; border-radius: 10px; padding: 10px 12px; font: inherit; min-width: 0; resize: vertical; }
.qr textarea:focus { outline: none; border-color: #FFC93C; }
.qr textarea::placeholder { color: #A597CC; }
.qr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qr label.qr-check { display: flex; align-items: center; gap: 8px; color: #CBBFE8; }
.qr-check input { width: 18px; height: 18px; accent-color: #FFC93C; }
.qr-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qr-row > span:first-child { font: 600 0.68rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #A597CC; min-width: 9.5em; }
.qr label.qr-colour { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--1); color: #CBBFE8; }
.qr .qr-colour input { width: 40px; height: 32px; padding: 2px; border-radius: 8px; cursor: pointer; }
.qr input[type="range"] { flex: 1 1 120px; max-width: 200px; padding: 0; background: none; accent-color: #FFC93C; }
.qr-link { border: 0; background: none; color: #CBBFE8; font: 500 0.8rem/1 var(--body); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; padding: 2px 0; }
.qr-preview { background: #fff; border-radius: 14px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.qr-preview svg { width: 100%; height: 100%; display: block; }
.qr-empty { color: #6B5F8A; font-size: var(--step--1); text-align: center; padding: 24px; margin: 0; }
.qr-info { font: 500 0.75rem/1.3 var(--mono); color: #A597CC; text-align: center; min-height: 1em; margin: 0; }
.qr-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qr-dl .btn { justify-content: center; }
.qr-dl .btn:disabled { opacity: 0.4; cursor: default; }
.qr-dl .qr-size { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qr-dl .qr-print-btn { grid-column: 1 / -1; }
.qr-warn { display: grid; gap: 6px; background: rgba(255, 176, 77, 0.14); color: #FFD9A8; border-radius: 10px; padding: 10px 12px; font-size: 0.82rem; line-height: 1.4; }
.qr-hint { font-size: 0.78rem; color: #8FE3B4; margin: 0; text-align: center; }
.qr-print { display: none; }

@media (max-width: 820px) {
  .qr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kinds" "form" "out" "opts"; }
  .qr-out { position: static; }
  .qr-preview { width: min(100%, 320px); justify-self: center; }
}
@media (max-width: 480px) {
  .qr-two { grid-template-columns: 1fr; }
  .qr-row > span:first-child { min-width: 100%; }
}

@media print {
  body.qr-printing > *:not(.qr-print) { display: none !important; }
  body.qr-printing { background: #fff; }
  body.qr-printing .qr-print { display: block; }
  .qr-print-card { text-align: center; padding-top: 20mm; font-family: "Figtree", Arial, sans-serif; color: #000; }
  .qr-print-card svg { width: 90mm; height: 90mm; }
  .qr-print-card h2 { font: 800 22pt/1.2 "Bricolage Grotesque", Arial, sans-serif; margin: 8mm 0 2mm; }
  .qr-print-card p { font-size: 13pt; margin: 0 0 2mm; }
  .qr-print-card svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}