/* Creative controls are scoped so the existing decoder remains unchanged. */
#qr-studio-controls { flex:none; padding:14px 20px; border-bottom:1px solid #e7edf4; background:#fff; }
#qr-studio-controls .studio-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; font-size:13px; font-weight:700; color:#334155; }
#qr-studio-controls .studio-title small { font-size:11px; font-weight:500; color:#64748b; }
#qr-studio-controls .studio-presets { display:flex; gap:7px; overflow-x:auto; padding-bottom:5px; }
#qr-studio-controls .studio-preset { flex:none; padding:7px 11px; border:1px solid #e2e8f0; border-radius:9px; background:#f8fafc; color:#475569; font-size:12px; cursor:pointer; }
#qr-studio-controls .studio-preset[aria-pressed="true"] { border-color:#fdba9d; color:#a34121; background:#fff3ed; }
#qr-studio-controls details { margin-top:9px; }
#qr-studio-controls summary { width:max-content; color:#52657b; font-size:12px; cursor:pointer; }
#qr-studio-controls .studio-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding-top:12px; }
#qr-studio-controls label { display:flex; flex-direction:column; gap:5px; min-width:0; color:#475569; font-size:11px; font-weight:600; }
#qr-studio-controls select, #qr-studio-controls input[type="text"] { width:100%; height:34px; padding:0 8px; border:1px solid #dbe4ee; border-radius:8px; background:#fff; color:#1e293b; font-size:12px; }
#qr-studio-controls input[type="color"] { width:100%; height:34px; padding:3px; border:1px solid #dbe4ee; border-radius:8px; background:#fff; cursor:pointer; }
#qr-studio-controls .studio-uploads { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
#qr-studio-controls .studio-upload { display:inline-flex; padding:7px 10px; border:1px solid #dbe4ee; border-radius:8px; background:#fff; color:#475569; font-size:11px; cursor:pointer; }
#qr-studio-controls .studio-note { margin:9px 0 0; color:#64748b; font-size:11px; line-height:1.5; }
body .main > .pane:first-child { overflow-y:auto; }
body .main > .pane:first-child .gen-qr-area { flex:none; min-height:360px; justify-content:flex-start; }
#qr-div canvas { width:min(340px,40vw); height:auto; max-width:100%; border-radius:12px; }
#qr-validation { max-width:430px; padding:8px 12px; border-radius:9px; background:#f1f5f9; color:#475569; font-size:12px; text-align:center; line-height:1.55; }
#qr-validation[data-state="ok"] { background:#ecfdf3; color:#166534; }
#qr-validation[data-state="error"] { background:#fff1ed; color:#9a3412; }
#qr-download:disabled { background:#cbd5e1; cursor:not-allowed; }
#use-decoded { margin-top:12px; }
.qr-mode-tabs { display:flex; gap:8px; padding:12px 20px 0; background:#fff; }
.qr-mode-tabs button { padding:8px 14px; border:1px solid #dce4ed; border-radius:9px; background:#fff; color:#475569; font-weight:650; font-size:12px; cursor:pointer; }
.qr-mode-tabs button[aria-pressed="true"] { background:#fff2eb; border-color:#edb29a; color:#ad4326; }
#qr-ai-panel { padding:18px 20px 30px; color:#334155; }
#qr-ai-panel[hidden] { display:none; }
.qr-ai-head { display:flex; align-items:start; justify-content:space-between; gap:10px; }
.qr-ai-head h2 { margin:0; font-size:16px; color:#172033; }
.qr-ai-head p { margin:6px 0 0; color:#64748b; font-size:12px; line-height:1.55; }
.qr-ai-badge { flex:none; color:#a34121; background:#fff3ed; border-radius:99px; padding:5px 8px; font-size:10px; }
.qr-ai-box { margin-top:14px; padding:14px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; }
.qr-ai-box label { display:block; margin-bottom:7px; color:#334155; font-size:12px; font-weight:700; }
.qr-ai-presets { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.qr-ai-presets button { padding:7px 11px; border:1px solid #dbe4ee; border-radius:8px; color:#475569; background:#fff; font-size:12px; cursor:pointer; }
.qr-ai-presets button[aria-pressed="true"] { border-color:#df9d85; color:#a34121; background:#fff4ef; }
.qr-ai-reference { margin:0 0 14px; padding:12px; border:1px dashed #b9c8d9; border-radius:10px; background:#fff; }
.qr-ai-reference-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.qr-ai-reference-row input { min-width:0; max-width:100%; font-size:12px; color:#475569; }
.qr-ai-reference-row button { border:1px solid #dbe4ee; border-radius:7px; background:#fff; color:#526174; padding:6px 9px; font-size:11px; cursor:pointer; }
.qr-ai-reference p { margin:8px 0 0; color:#64748b; font-size:11px; line-height:1.6; }
.qr-ai-reference img { display:block; width:110px; height:90px; object-fit:contain; margin-top:10px; border-radius:7px; background:#f1f5f9; }
.qr-ai-reference img[hidden], #qr-ai-reference-options[hidden] { display:none; }
.qr-ai-box textarea { width:100%; min-height:80px; padding:10px; resize:vertical; border:1px solid #cbd5e1; border-radius:8px; font:inherit; font-size:13px; color:#1e293b; }
.qr-ai-options { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; font-size:12px; color:#475569; }
.qr-ai-options select { padding:7px; border:1px solid #dbe4ee; border-radius:7px; background:white; color:#334155; }
.qr-ai-warning { margin:12px 0; padding:10px 12px; border-radius:9px; background:#fff7ed; color:#9a3412; font-size:12px; line-height:1.6; }
.qr-ai-warning a { color:inherit; font-weight:700; }
.qr-ai-actions { display:flex; gap:8px; flex-wrap:wrap; }
.qr-ai-actions button { border:0; border-radius:9px; padding:10px 14px; color:white; background:#b4533a; font-size:12px; font-weight:700; cursor:pointer; }
.qr-ai-actions button:disabled { background:#cbd5e1; cursor:not-allowed; }
.qr-ai-actions .qr-ai-download { color:#334155; background:#e8edf3; }
.qr-ai-result { margin-top:14px; padding:12px; border-radius:12px; background:white; border:1px solid #e2e8f0; text-align:center; }
.qr-ai-result img { display:block; max-width:min(100%,360px); height:auto; margin:10px auto; border-radius:9px; }
.qr-ai-result img[hidden] { display:none; }
.qr-ai-status { font-size:12px; line-height:1.6; color:#475569; overflow-wrap:anywhere; }
.qr-ai-status[data-state="error"] { color:#b42318; }.qr-ai-status[data-state="ok"] { color:#166534; }
@media(max-width:900px) { #qr-studio-controls .studio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { body { height:auto; min-height:100vh; } body .main { display:flex; flex-direction:column; overflow:visible; } body .main .pane { min-height:480px; overflow:visible; } #qr-div canvas { width:min(300px,75vw); } }