/* Radar Studio -- QR designer (2026-10-19). */
.qrd { margin: 12px 0; }
.qrd-head { display: flex; justify-content: space-between; align-items: center; }
.qrd-head h3 { margin: 0; }
.qrd-body { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 20px; align-items: start; margin-top: 10px; }
.qrd-stage { position: sticky; top: 12px; }
.qrd-preview { display: block; width: 100%; max-width: 420px; cursor: grab; touch-action: none; user-select: none; background: #eef1f3; border-radius: 12px; }
.qrd-preview:active { cursor: grabbing; }
.qrd-hint b { cursor: pointer; text-decoration: underline dotted; }
.qrd-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.qrd-controls fieldset { border: 1px solid var(--line, #d8dee6); border-radius: 8px; padding: 8px 12px 10px; margin: 0; display: grid; gap: 6px; }
.qrd-controls legend { font-weight: 700; padding: 0 4px; }
.qrd-controls label { display: grid; gap: 2px; font-size: 13px; }
.qrd-controls label.qrd-chk { display: flex; gap: 6px; align-items: center; }
.qrd-controls input[type=range] { width: 100%; }
.qrd-controls input[type=color] { width: 40px; height: 28px; padding: 0; border: 1px solid var(--line, #d8dee6); border-radius: 4px; }
.qrd-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.qrd-row > label { flex: 1; min-width: 110px; }
.qrd-row > label:has(input[type=color]) { flex: none; display: flex; gap: 4px; align-items: center; }
.qrd-check ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.qrd-ok { color: #0a7a4f; font-weight: 700; margin: 8px 0 0; }
.qrd-bad { color: #b42318; font-weight: 700; margin: 8px 0 0; }
@media (max-width: 900px) { .qrd-body { grid-template-columns: 1fr; } .qrd-stage { position: static; } }
.qrd-controls { align-items: start; }
.qrd-controls fieldset { align-content: start; }
.qrd-controls select, .qrd-controls input[type=text], .qrd-controls input[type=url] { height: auto; min-height: 0; padding: 5px 8px; font-size: 14px; width: 100%; }
.qrd-controls label.qrd-chk { display: flex; flex-direction: row; justify-content: flex-start; gap: 6px; font-weight: 600; }
.qrd-controls label.qrd-chk input { width: auto; margin: 0; }
.qrd-controls input[type=file] { font-size: 13px; padding: 0; border: 0; }
.qrd-controls button { padding: 6px 12px; }
.qrd-controls fieldset.qrd-tent { grid-column: 1 / -1; }
.qrd-tentrow { display: grid; grid-template-columns: minmax(160px, 1fr) 3fr; gap: 12px; align-items: start; margin-top: 8px; }
.qrd-tentrow figure { margin: 0; }
.qrd-tentrow img { width: 100%; display: block; border: 1px solid var(--line, #d8dee6); border-radius: 6px; background: #fff; }
.qrd-tentrow figcaption { font-size: 12px; color: var(--muted, #5b6472); margin-top: 4px; }