/* v3.8.0 styles (inherits layout; buttons flex-wrap neatly on mobile) */
.retech-badge-wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#fff; background:#78d64b; padding:32px; border-radius:16px; }
.retech-badge-wrap h1 { text-align:center; font-size:44px; margin:0 0 24px; font-weight:800; }
.retech-steps { max-width:900px; margin:0 auto 24px; }
.retech-steps h2 { font-size:36px; margin:0 0 8px; }
.retech-controls { display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:flex-start; grid-template-areas:"right left"; }
.retech-left  { grid-area: left; }
.retech-right { grid-area: right; }
.retech-left .retech-copy { background:rgba(255,255,255,.08); padding:20px; border-radius:12px; }
.retech-copy h2 { margin:0 0 8px; font-size:32px; }
.retech-copy textarea { width:100%; border-radius:12px; border:none; padding:12px; color:#1f2937; }
.retech-actions { display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; }
.retech-btn { background:#fff; color:#1f2937; padding:10px 16px; border-radius:999px; font-weight:700; border:none; text-decoration:none; display:inline-block; cursor:pointer; min-height:44px; }
.retech-btn.alt { background:rgba(255,255,255,.16); color:#fff; }
.retech-url { margin-top:8px; font-weight:700; display:inline-block; }
.retech-right { background:rgba(255,255,255,.08); padding:20px; border-radius:12px; }
.retech-badge-preview { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; position:relative; }
#retech-canvas { width:100%; height:auto; background:#e5e5e5; border-radius:12px; display:block; touch-action: none; z-index:0; }
.retech-upload { position: relative; display:inline-block; order:0; }
.retech-upload-label { display:inline-block; padding:12px 14px; background:#fff; color:#1f2937; border-radius:999px; font-weight:700; }
#retech-upload-input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; z-index:2; }
.retech-fields, .retech-upload, .retech-actions, .retech-toggle { position:relative; z-index:1; }
.retech-fields { display:grid; grid-template-columns: 1fr; gap:8px; width:100%; }
.retech-fields input[type="text"] { width:100%; padding:12px 14px; border-radius:10px; border:none; font-size:16px; background:#fff; color:#111; }
.retech-color, .retech-zoom, .retech-export { display:flex; align-items:center; gap:8px; font-weight:700; width:100%; }
.retech-zoom input[type="range"]{ width: 70%; }
.retech-toggle { display:flex; gap:12px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.retech-hint { opacity:.85; }

/* Download button yellow style */
.retech-actions a[data-action="download"],
.retech-actions .retech-btn[data-action="download"] { background:#f0c711; color:#111; border:2px solid #b49300; }
.retech-actions a[data-action="download"]:hover,
.retech-actions .retech-btn[data-action="download"]:hover { background:#e0bb0f; }

/* Mobile stacking order: right then left */
@media (max-width: 900px) {
  .retech-controls { grid-template-columns: 1fr; grid-template-areas: "right" "left"; }
  .retech-badge-wrap { padding: 16px; border-radius: 12px; }
  .retech-badge-wrap h1 { font-size: 28px; }
  .retech-steps h2 { font-size: 22px; }
  .retech-left .retech-copy, .retech-right { padding: 14px; }
  .retech-copy textarea { min-height: 140px; }
  .retech-actions { flex-direction: column; gap: 10px; }
  .retech-actions .retech-btn, .retech-toggle .retech-btn { width: 100%; padding: 14px; }
  #retech-canvas { border-radius: 10px; }
}

/* Modal for iOS long-press saving */
.retech-modal[hidden]{ display:none !important; }
.retech-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:9999; padding:16px; }
.retech-modal__inner{ position:relative; background:#fff; color:#111; max-width:92vw; border-radius:12px; padding:16px; }
.retech-modal__close{ position:absolute; top:10px; right:14px; background:#111; color:#fff; border:none; border-radius:999px; width:32px; height:32px; font-weight:bold; cursor:pointer; }
.retech-modal__tip{ margin:0 0 10px; font-weight:700; }
.retech-modal__inner img{ max-width:86vw; height:auto; display:block; }