.qr-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}

.qr-canvas-wrap {
  padding: 8px;
  background: #fff;
  border: 1px solid #808080;
}

#qr-canvas,
#wifi-canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.qr-empty {
  padding: 24px 32px;
  color: var(--win-muted);
  text-align: center;
  border: 1px dashed #808080;
  background: #fff;
}

.color-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.color-inputs .form-group {
  margin-bottom: 0;
}

.wifi-string-preview {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  word-break: break-all;
  padding: 8px;
  background: #fff;
  border: 1px solid #808080;
  margin-top: 4px;
}