/* =====================================================
   QR Code Generator — mobile-first, fully responsive
   Mobile (default)  : single column, QR preview right after the inputs
   Tablet  (>=600px) : wider buttons / chips in a row
   Laptop  (>=900px) : two columns, sticky preview on the right
   ===================================================== */

.qg-section{padding-top:6px}
.qg-section [hidden]{display:none !important}
.qg-section *,.qg-section *::before,.qg-section *::after{box-sizing:border-box}

/* ---------- Heading ---------- */
.qg-head{text-align:center;max-width:680px;margin:0 auto 22px}
.qg-badge{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;max-width:100%;background:var(--black-soft);border:1px solid var(--gold);color:var(--gold);padding:6px 14px;border-radius:30px;font-size:.74rem;line-height:1.4;margin-bottom:14px;text-align:center}
.qg-title{font-size:clamp(1.6rem,7vw,2.3rem);font-weight:700;line-height:1.2;margin:0 0 8px;text-align:center}
.qg-title span{color:var(--gold)}
.qg-sub{color:var(--text-muted);font-size:clamp(.84rem,3.6vw,.98rem);line-height:1.6;margin:0 auto;max-width:560px;text-align:center}

/* ---------- Alert ---------- */
.qg-alert{max-width:700px;margin:0 auto 16px;background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.35);color:#ff9d9d;padding:12px 16px;border-radius:10px;font-size:.88rem;line-height:1.5;text-align:center;display:none}
.qg-alert.show{display:block}

/* ---------- Layout ---------- */
.qg-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"content" "shape" "preview" "design";gap:14px;align-items:start}
.qg-shape{grid-area:shape}
.qg-content{grid-area:content}
.qg-preview{grid-area:preview}
.qg-design{grid-area:design}

/* ---------- Cards ---------- */
.qg-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:16px;min-width:0}
.qg-card-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;color:var(--text-light);margin-bottom:14px}
.qg-card-title i{color:var(--gold)}

/* Design card = <details>, collapsible on mobile */
.qg-design{padding:0}
.qg-design > summary{list-style:none;cursor:pointer;margin:0;padding:16px;min-height:52px;justify-content:space-between;-webkit-tap-highlight-color:transparent}
.qg-design > summary::-webkit-details-marker{display:none}
.qg-design > summary > span{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qg-chev{transition:transform .2s ease;font-size:.8rem}
.qg-design[open] .qg-chev{transform:rotate(180deg)}
.qg-design-body{padding:0 16px 4px;border-top:1px solid var(--card-border);padding-top:16px}

/* ---------- Type chips ---------- */
.qg-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}
.qg-chip{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 6px;background:var(--black-soft);border:1px solid var(--card-border);color:var(--text-muted);border-radius:12px;font-size:.84rem;font-weight:600;font-family:inherit;cursor:pointer;transition:var(--transition-fast);-webkit-tap-highlight-color:transparent}
.qg-chip i{font-size:.85rem}
.qg-chip.active{background:var(--gold-glow-soft);border-color:var(--gold);color:var(--gold)}

/* ---------- Fields ---------- */
.qg-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.qg-field label{font-size:.82rem;color:var(--text-muted);font-weight:600}
.qg-hint{font-weight:400;color:var(--text-faint);font-size:.74rem}
.qg-input{width:100%;min-width:0;min-height:46px;background:rgba(255,255,255,.03);border:1px solid var(--card-border);border-radius:10px;padding:11px 13px;color:var(--text-light);font-family:inherit;font-size:1rem;outline:0;transition:border-color .15s ease;-webkit-appearance:none;appearance:none}
select.qg-input{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.qg-input:focus{border-color:var(--gold)}
.qg-input::placeholder{color:var(--text-faint)}
select.qg-input option{background:#1a1a1a;color:#fff}
.qg-textarea{min-height:110px;resize:vertical;line-height:1.6}
.qg-textarea.qg-sm{min-height:76px}
.qg-link{color:var(--gold);font-size:.88rem;text-overflow:ellipsis}
.qg-color{width:100%;height:46px;padding:3px;border:1px solid var(--card-border);border-radius:10px;background:rgba(255,255,255,.03);cursor:pointer}
.qg-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qg-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:.9rem;color:var(--text-muted);cursor:pointer}
.qg-check input{accent-color:var(--gold);width:20px;height:20px;flex-shrink:0}

/* ---------- Image upload ---------- */
.qg-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:120px;padding:18px 14px;background:rgba(255,255,255,.02);border:2px dashed var(--card-border);border-radius:12px;color:var(--text-muted);font-family:inherit;cursor:pointer;transition:var(--transition-fast);text-align:center;-webkit-tap-highlight-color:transparent}
.qg-drop i{font-size:1.8rem;color:var(--gold);margin-bottom:4px}
.qg-drop strong{color:var(--text-light);font-size:.95rem}
.qg-drop span{font-size:.78rem}
.qg-drop:hover,.qg-drop.drag{border-color:var(--gold);background:var(--gold-glow-soft)}
.qg-img-result{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px;background:rgba(255,255,255,.03);border:1px solid var(--card-border);border-radius:12px}
.qg-img-result img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0;background:#0d0d0d}
.qg-img-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.qg-img-meta strong{font-size:.88rem;color:var(--text-light);word-break:break-word}
.qg-img-meta span{font-size:.76rem;color:var(--text-muted);word-break:break-word}
.qg-img-meta.ok strong{color:var(--success)}
.qg-img-meta.err strong{color:var(--danger)}
.qg-copy-row{display:flex;gap:8px;align-items:stretch}
.qg-copy-row .qg-input{flex:1}
.qg-copy-row .qg-mini-btn{flex-shrink:0}

/* ---------- Buttons ---------- */
.qg-btn-row{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.qg-btn-row .btn{width:100%;min-height:48px;justify-content:center;text-align:center;font-size:1rem}
.qg-btn-row .btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.qg-btn-row.qg-left{flex-direction:row;flex-wrap:wrap;gap:8px}
.qg-mini-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:9px 14px;background:var(--black-soft);border:1px solid var(--card-border);color:var(--text-light);border-radius:10px;font-size:.85rem;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.qg-mini-btn:hover{border-color:var(--gold);color:var(--gold)}
.qg-mini-btn.qg-danger:hover{border-color:var(--danger);color:var(--danger)}

/* ---------- Preview ---------- */
.qg-preview{text-align:center}
.qg-preview .qg-card-title{justify-content:center}
.qg-qr-box{width:min(100%,300px);aspect-ratio:1/1;margin:0 auto 16px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.qg-qr-box svg,.qg-qr-box canvas{width:100% !important;height:100% !important;display:block}
.qg-qr-empty{color:#6b7280;font-size:.85rem;padding:20px;line-height:1.5}
.qg-qr-empty i{display:block;font-size:2.2rem;margin-bottom:10px;color:#9ca3af}
.qg-preview .qg-field{text-align:left}
.qg-note{margin-top:12px;font-size:.78rem;color:var(--text-faint);line-height:1.55;text-align:left}
.qg-note i{margin-right:4px}
.qg-warn{background:rgba(255,193,7,.1);border:1px solid rgba(255,193,7,.35);color:var(--gold);padding:10px 12px;border-radius:10px;font-size:.8rem;line-height:1.5;text-align:left;margin-bottom:14px}

/* ---------- Shape picker ---------- */
.qg-shapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qg-shape-btn{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-height:104px;padding:10px 4px 8px;background:var(--black-soft);border:1px solid var(--card-border);border-radius:12px;color:var(--text-muted);font-family:inherit;cursor:pointer;text-align:center;transition:var(--transition-fast);-webkit-tap-highlight-color:transparent}
.qg-shape-btn:hover{border-color:var(--gold);color:var(--text-light)}
.qg-shape-btn.active{background:var(--gold-glow-soft);border-color:var(--gold);color:var(--gold)}
.qg-shape-ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;font-size:1.7rem;margin-bottom:2px}
.qg-shape-ico svg{width:100%;height:100%;fill:currentColor}
.qg-shape-name{font-size:.8rem;font-weight:700;line-height:1.2;color:var(--text-light)}
.qg-shape-btn.active .qg-shape-name{color:var(--gold)}
.qg-shape-hint{font-size:.68rem;line-height:1.25;color:var(--text-faint)}
.qg-shape-note{margin-top:12px}
.qg-shape-only[hidden]{display:none !important}
.qg-style{margin-top:14px}
.qg-label{font-size:.82rem;color:var(--text-muted);font-weight:600;margin-bottom:8px}
.qg-style-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qg-style-btn{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:8px 6px;background:var(--black-soft);border:1px solid var(--card-border);color:var(--text-muted);border-radius:12px;font-size:.85rem;font-weight:600;font-family:inherit;cursor:pointer;transition:var(--transition-fast);-webkit-tap-highlight-color:transparent}
.qg-style-btn.active{background:var(--gold-glow-soft);border-color:var(--gold);color:var(--gold)}
.qg-style-btn:hover{border-color:var(--gold)}

/* ---------- Scan test ---------- */
.qg-scan{font-size:.8rem;line-height:1.5;padding:10px 12px;border-radius:10px;margin-bottom:14px;text-align:left;background:rgba(255,255,255,.04);border:1px solid var(--card-border);color:var(--text-muted)}
.qg-scan.ok{background:rgba(46,204,113,.1);border-color:rgba(46,204,113,.35);color:var(--success)}
.qg-scan.bad{background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.35);color:#ff9d9d}
.qg-scan i{margin-right:6px}

/* ---------- Promo ---------- */
.qg-promo{max-width:640px;margin:32px auto 0;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:18px 16px;text-align:center}
.qg-promo-title{font-size:.88rem;color:var(--text-muted);margin-bottom:12px}
.qg-promo-title i{color:var(--gold);margin-right:6px}
.qg-promo-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.qg-promo-links .btn{flex:1 1 130px;min-height:44px}

/* ---------- Tablet ---------- */
@media(min-width:600px){
  .qg-shapes{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .qg-card{padding:20px}
  .qg-design > summary{padding:20px}
  .qg-design-body{padding:16px 20px 6px}
  .qg-chips{display:flex;flex-wrap:wrap;gap:10px}
  .qg-chip{padding:9px 18px;font-size:.88rem}
  .qg-btn-row:not(.qg-left){flex-direction:row}
  .qg-btn-row:not(.qg-left) .btn{flex:1}
  .qg-badge{font-size:.8rem;padding:6px 16px}
}

/* ---------- Laptop / desktop ---------- */
@media(min-width:900px){
  .qg-shapes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .qg-head{margin-bottom:30px}
  .qg-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"content preview" "shape preview" "design preview";gap:22px}
  .qg-preview{position:sticky;top:90px}
  .qg-card{padding:24px}
  /* design panel is always open on big screens */
  .qg-design > summary{padding:24px 24px 16px;cursor:default;pointer-events:none}
  .qg-design .qg-chev{display:none}
  .qg-design-body{padding:0 24px 8px;border-top:0}
  .qg-row2{gap:16px}
}
@media(min-width:1200px){
  .qg-grid{gap:26px}
}

/* Design card handles its own padding (summary + body) at every width */
.qg-card.qg-design{padding:0 !important}

/* ---------- Very small phones ---------- */
@media(max-width:380px){
  .qg-shapes{gap:6px}
  .qg-shape-btn{min-height:96px;padding:8px 2px 6px}
  .qg-shape-name{font-size:.74rem}
  .qg-shape-hint{font-size:.64rem}
  .qg-card{padding:14px 12px}
  .qg-design > summary{padding:14px 12px}
  .qg-design-body{padding:14px 12px 2px}
  .qg-chip{font-size:.78rem;gap:4px;padding:8px 4px}
  .qg-row2{gap:8px}
  .qg-img-result img{width:52px;height:52px}
  .qg-copy-row{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  .qg-chev,.qg-input,.qg-chip,.qg-drop{transition:none}
}