#qrg ─────
     Every selector starts with #qrg. Nothing leaks to the host page.
     No Tailwind, no global resets, no preflight. WordPress / Elementor
     theme styles (container borders, headings, etc.) remain untouched. */

  #qrg, #qrg *, #qrg *::before, #qrg *::after { box-sizing: border-box; }
  #qrg, #qrg button, #qrg input, #qrg textarea, #qrg select, #qrg label,
  #qrg p, #qrg h2, #qrg span, #qrg div, #qrg a, #qrg pre {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  /* Internal reset — only applies INSIDE the widget */
  #qrg div, #qrg p, #qrg h2, #qrg span { margin: 0; padding: 0; }
  #qrg button { margin: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
  #qrg textarea, #qrg select { margin: 0; font: inherit; color: inherit; }
  #qrg svg { display: inline-block; vertical-align: middle; }

  /* Container */
  #qrg {
    width: 100%; max-width: 56rem; margin: 0 auto;
    padding: 8px 4px;
    font-size: 14px; line-height: 1.5; color: #1f2937;
  }
  @media (min-width: 640px) { #qrg { padding: 8px; } }
  @media (min-width: 768px) { #qrg { padding: 8px 16px; } }

  /* Mobile breakout — pull widget outside parent column padding */
  @media (max-width: 767px) {
    #qrg { margin-left: -25px; margin-right: -25px; width: calc(100% + 50px); max-width: none; }
  }

  /* Subtitle */
  #qrg .qrg-subtitle { text-align: center; font-size: 14px; color: #4b5563; font-weight: 500; margin-bottom: 16px; }
  @media (min-width: 768px) { #qrg .qrg-subtitle { font-size: 16px; } }

  /* Input */
  #qrg .qrg-input {
    width: 100%; max-width: 42rem; display: block; margin: 0 auto;
    padding: 12px 16px; border-radius: 8px;
    border: 2px solid #d1d5db; background: #fff; color: #1f2937;
    font-size: 13px; font-weight: 500; transition: all .15s; resize: vertical;
    line-height: 1.6; word-break: break-word;
  }
  #qrg .qrg-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.18); border-color: #3b82f6; }
  #qrg .qrg-input::placeholder { color: #9ca3af; font-weight: 400; }

  /* Controls */
  #qrg .qrg-controls {
    display: grid; grid-template-columns: 1fr; gap: 12px;
    max-width: 42rem; margin: 12px auto 0;
  }
  @media (min-width: 460px) { #qrg .qrg-controls { grid-template-columns: 1fr 1fr; } }
  #qrg .qrg-field { display: block; min-width: 0; }
  #qrg .qrg-field-label {
    display: block; font-size: 11px; font-weight: 800; color: #6b7280;
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
  }
  #qrg .qrg-select {
    width: 100%; padding: 11px 12px; border-radius: 8px;
    border: 2px solid #d1d5db; background: #fff; color: #1f2937;
    font-size: 14px; font-weight: 500; transition: all .15s;
  }
  #qrg .qrg-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.18); border-color: #3b82f6; }

  /* Message row */
  #qrg .qrg-msg-row {
    min-height: 20px; padding: 0 4px; margin: 10px auto 16px; max-width: 42rem;
    text-align: center;
  }
  #qrg .qrg-err { font-size: 12.5px; color: #ef4444; font-weight: 600; line-height: 1.5; }
  #qrg .qrg-err.qrg-err-soft { color: #6b7280; font-weight: 500; }

  /* Card */
  #qrg .qrg-card-wrap { width: 100%; }
  #qrg .qrg-card-bg {
    border-radius: 12px;
    border: 1px solid #93c5fd; /* blue-300 mobile */
    padding: 20px 12px;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 50%, #eef2ff 100%);
    box-shadow: 0 4px 20px -8px rgba(59,130,246,.18), 0 1px 3px rgba(0,0,0,.04);
    position: relative; overflow: hidden;
  }
  @media (min-width: 768px) {
    #qrg .qrg-card-bg { border-radius: 16px; padding: 28px; border-color: #bfdbfe; /* blue-200 desktop */ }
  }

  /* Top-edge scan-progress bar */
  #qrg .qrg-card-bg::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #10b981 100%);
    transform-origin: left center; transform: scaleX(0); opacity: 0;
    pointer-events: none; z-index: 2;
    box-shadow: 0 0 12px rgba(16,185,129,.5);
  }
  #qrg .qrg-card-bg.qrg-wave-red::before {
    background: linear-gradient(90deg, #ef4444 0%, #f87171 50%, #ef4444 100%);
    box-shadow: 0 0 12px rgba(239,68,68,.5);
  }
  #qrg .qrg-card-bg.qrg-wave-go::before {
    animation: qrgLoadBar 1.4s cubic-bezier(.45,.05,.4,1) forwards;
  }
  @keyframes qrgLoadBar {
    0%   { transform: scaleX(0); opacity: 0; }
    8%   { opacity: 1; }
    78%  { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
  }

  /* Header */
  #qrg .qrg-head { text-align: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #dbeafe; }
  #qrg .qrg-head-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
  #qrg .qrg-head-big {
    font-size: 26px; font-weight: 900; color: #0b1220;
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.15;
  }
  @media (min-width: 768px) { #qrg .qrg-head-big { font-size: 30px; } }
  #qrg .qrg-headsub { font-size: 14px; color: #6b7280; font-weight: 500; margin-top: 6px; }
  @media (min-width: 768px) { #qrg .qrg-headsub { font-size: 15px; } }

  /* Copy button */
  #qrg .qrg-copy-btn { color: #9ca3af; transition: all .15s; padding: 6px; border-radius: 8px; flex-shrink: 0; }
  #qrg .qrg-copy-btn:hover { color: #2563eb; background: rgba(59,130,246,.08); }
  #qrg .qrg-copy-btn.qrg-copied { color: #059669; }
  #qrg .qrg-copy-btn svg { width: 20px; height: 20px; }

  /* Code preview */
  #qrg .qrg-preview { display: flex; justify-content: center; margin: 0 0 20px; }
  #qrg .qrg-canvas-wrap {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 10px; line-height: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
  }
  #qrg .qrg-canvas {
    display: block; max-width: 100%; height: auto;
    image-rendering: pixelated; image-rendering: crisp-edges;
    transition: opacity .2s;
  }
  #qrg .qrg-canvas.qrg-canvas-idle { opacity: .35; }

  /* Info strip */
  #qrg .qrg-info {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px;
    padding-top: 20px; border-top: 1px solid #dbeafe;
  }
  @media (min-width: 640px) { #qrg .qrg-info { grid-template-columns: repeat(4, 1fr); } }
  #qrg .qrg-info-cell { min-width: 0; text-align: center; }
  #qrg .qrg-info-label {
    font-size: 11px; color: #6b7280; text-transform: uppercase;
    letter-spacing: .06em; font-weight: 800; margin-bottom: 4px;
  }
  #qrg .qrg-info-val {
    font-size: 15px; color: #1f2937; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #qrg .qrg-note { font-size: 12.5px; color: #6b7280; text-align: center; margin-top: 14px; font-weight: 500; }

  /* Actions */
  #qrg .qrg-actions {
    display: flex; gap: 8px; margin: 20px auto 0; max-width: 42rem;
    flex-wrap: wrap; justify-content: center;
  }
  #qrg .qrg-button {
    padding: 12px 24px; background: #2563eb; color: #fff;
    font-size: 14px; font-weight: 600; border-radius: 8px;
    transition: background .15s; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
  }
  #qrg .qrg-button:hover { background: #1d4ed8; }
  #qrg .qrg-button:active { background: #1e40af; }
  #qrg .qrg-button:disabled { opacity: .55; cursor: not-allowed; background: #2563eb; }
  #qrg .qrg-btn-ghost {
    padding: 12px 20px; border-radius: 8px; background: #fff;
    border: 2px solid #d1d5db; color: #4b5563;
    font-size: 13px; font-weight: 600; transition: all .15s;
    white-space: nowrap;
  }
  #qrg .qrg-btn-ghost:hover { border-color: #93c5fd; color: #2563eb; background: #f8fafc; }
  #qrg .qrg-btn-ghost:disabled { opacity: .55; cursor: not-allowed; border-color: #e5e7eb; color: #9ca3af; background: #f9fafb; }

  #qrg .qrg-foot {
    font-size: 12.5px; color: #6b7280; text-align: center;
    margin-top: 16px; line-height: 1.6; max-width: 42rem; margin-left: auto; margin-right: auto;
  }
  #qrg .qrg-foot strong { color: #374151; font-weight: 700; }

  /* Hidden utility */
  #qrg .qrg-hidden { display: none !important; }

  /* Loading state */
  #qrg .qrg-loading { color: #9ca3af !important; font-style: italic; font-weight: 400 !important; }