/* ===========================================================
   QR GENERATOR STYLES
=========================================================== */
.qr-root .qr-body { gap: 4px; }
.qr-input-pane { flex: 0 0 42%; min-width: 280px; }
.qr-output-pane { flex: 1; min-width: 0; }

.qr-input-body { padding: 10px; background: #ffffff; flex: 1; overflow: auto; }
.qr-field-row {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 10px;
}
.qr-field-row label {
  font-family: Verdana, sans-serif; font-size: 11px;
  color: #404040; font-weight: bold;
}
.qr-field-row input[type=text],
.qr-field-row textarea {
  border: 2px inset #ffffff; background: #ffffff;
  padding: 4px 8px;
  font-family: "Courier New", monospace; font-size: 12px;
  color: #000;
  resize: vertical;
}
.qr-field-row textarea {
  min-height: 60px;
}

.qr-info {
  font-family: "Courier New", monospace; font-size: 10px;
  color: #cce4ff; font-weight: normal;
}
.qr-output-body {
  flex: 1; min-height: 0; overflow: auto;
  background: #ffffff; padding: 16px;
  display: flex; align-items: center; justify-content: center;
}
.qr-output-body svg {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  display: block;
}
.qr-empty {
  padding: 20px; text-align: center;
  color: #808080; font-style: italic;
  font-family: Verdana, sans-serif;
}
.qr-empty.qr-err { color: #a00000; font-family: "Courier New", monospace; font-style: normal; }