:root {
  --font-display: "Outfit", "Segoe UI Variable Display", "Aptos Display", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI Variable Text", "Aptos", "Segoe UI", sans-serif;
}

.qr-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  align-items: start;
  gap: clamp(1rem, 3vw, 1.75rem);
}

.qr-workspace > * { min-width: 0; }

.qr-settings-panel,
.qr-preview-panel { scroll-margin-top: 1rem; }

.qr-preview-panel {
  position: sticky;
  top: 1rem;
}

.mode-panel textarea { min-height: 142px; }

#email-message { min-height: 116px; }

.optional-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.field-error {
  min-height: 1.4rem;
  margin: -0.2rem 0 0;
  color: var(--danger);
  font-size: 0.83rem;
  font-weight: 750;
}

[aria-invalid="true"] {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 24%, transparent);
}

.appearance-group {
  min-width: 0;
  margin: 0.2rem 0 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
  padding: 1.25rem 0 0;
}

.appearance-group legend {
  padding: 0 0.55rem 0 0;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
}

.appearance-fields { margin-top: 0.75rem; }

.standard-colors-button {
  width: fit-content;
  margin-top: -0.15rem;
}

.compact-check {
  min-height: 44px;
  margin-top: 0.55rem;
}

.qr-canvas-frame {
  width: 100%;
  min-height: 330px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: clamp(0.7rem, 2.5vw, 1.25rem);
  background:
    linear-gradient(45deg, var(--surface-quiet) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface-quiet) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface-quiet) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface-quiet) 75%),
    var(--surface);
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
}

#qr-canvas {
  width: min(100%, 520px);
  height: auto;
  max-height: none;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 18px 42px -26px rgba(12, 35, 64, 0.72);
  image-rendering: pixelated;
}

.qr-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 1rem 0 0;
}

.qr-facts > div {
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 0.65rem 0.7rem;
  background: var(--surface-quiet);
}

.qr-facts dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qr-facts dd {
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
  color: var(--heading);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 750;
}

.scan-note {
  min-height: 1.45rem;
  margin: 0.85rem 0 0;
  color: var(--green);
  font-size: 0.83rem;
  font-weight: 750;
  text-align: center;
}

.scan-note.is-error { color: var(--danger); }

:root[data-theme="dark"] .scan-note:not(.is-error) { color: #9ee4c2; }

.download-row { justify-content: center; }

.button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

.library-credit {
  margin-top: 0.45rem !important;
  font-size: 0.74rem;
}

@media (max-width: 900px) {
  .qr-workspace { grid-template-columns: 1fr; }
  .qr-preview-panel { position: static; }
}

@media (max-width: 560px) {
  .qr-canvas-frame { min-height: 260px; }
  .qr-facts { grid-template-columns: 1fr; }
  .standard-colors-button { width: 100%; }
}

@media (forced-colors: active) {
  #qr-canvas { border: 2px solid CanvasText; }
  .qr-facts > div { border-color: CanvasText; }
}