/* QR Code */
.qr-colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space);
}

.qr-color {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}

.qr-color input[type="color"] {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
}

.qr-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 4px; }
.qr-color input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
.qr-color input[type="color"]::-moz-color-swatch { border: none; border-radius: 6px; }

.qr-color span {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.qr__media {
  background: repeating-conic-gradient(var(--surface-3) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}

.qr__media canvas {
  max-width: 100%;
  max-height: 50vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}