.qr-studio-shell{display:grid;gap:20px;--qr-purple:#8b5cf6;--qr-purple2:#a855f7;--qr-blue:#60a5fa;--qr-border:rgba(148,163,184,.16);--qr-panel:rgba(15,23,42,.78)}.qr-studio-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:6px 2px}.qr-studio-heading h1{margin:7px 0 8px;font-size:clamp(28px,4vw,42px);line-height:1.05}.qr-studio-heading p{margin:0;max-width:780px;color:var(--text-muted,#94a3b8)}.qr-studio-kicker{font-size:12px;font-weight:900;letter-spacing:.16em;color:#a78bfa}.qr-studio-account-state{min-width:180px;padding:13px 15px;border:1px solid var(--qr-border);border-radius:16px;background:rgba(15,23,42,.55);display:grid;gap:4px}.qr-studio-account-state span{font-size:12px;color:#94a3b8}.qr-studio-account-state strong{font-size:14px}.qr-studio-account-state.is-pro{border-color:rgba(168,85,247,.48);box-shadow:0 0 30px rgba(126,34,206,.12)}
.qr-studio-type-strip{display:grid;grid-template-columns:repeat(9,minmax(76px,1fr));gap:9px}.qr-type-card{appearance:none;border:1px solid var(--qr-border);border-radius:15px;min-height:82px;background:linear-gradient(145deg,rgba(30,41,59,.58),rgba(15,23,42,.66));color:#cbd5e1;display:grid;place-items:center;align-content:center;gap:7px;cursor:pointer;transition:.18s ease}.qr-type-card:hover{border-color:rgba(167,139,250,.4);transform:translateY(-1px)}.qr-type-card.is-active{border-color:rgba(168,85,247,.7);background:linear-gradient(145deg,rgba(109,40,217,.26),rgba(30,41,59,.72));box-shadow:0 10px 30px rgba(88,28,135,.16);color:#fff}.qr-type-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(2,6,23,.34);color:#a78bfa;font-weight:900}.qr-type-card strong{font-size:12px}
.qr-studio-workspace{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:18px;align-items:start}.qr-studio-panel{min-width:0;border:1px solid var(--qr-border);border-radius:22px;background:linear-gradient(145deg,rgba(15,23,42,.9),rgba(15,23,42,.63));box-shadow:0 18px 50px rgba(2,6,23,.22)}.qr-studio-editor{overflow:hidden}.qr-editor-section{border-bottom:1px solid rgba(148,163,184,.09)}.qr-editor-section:last-child{border-bottom:0}.qr-section-toggle{width:100%;border:0;background:transparent;color:#e5e7eb;display:grid;grid-template-columns:38px 1fr 24px;gap:11px;align-items:center;text-align:left;padding:17px 19px;cursor:pointer}.qr-section-toggle>span:nth-child(2){display:grid;gap:2px}.qr-section-toggle strong{font-size:14px}.qr-section-toggle small{font-size:12px;color:#94a3b8}.qr-section-toggle>b{font-size:18px;color:#94a3b8;transition:.18s}.qr-editor-section.is-open .qr-section-toggle>b{transform:rotate(180deg)}.qr-section-no{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#a855f7);font-size:11px;font-weight:900}.qr-section-body{display:none;padding:0 19px 19px}.qr-editor-section.is-open .qr-section-body{display:grid;gap:16px}.qr-content-pane{display:none;gap:13px}.qr-content-pane.is-active{display:grid}.qr-field{position:relative;display:grid;gap:7px}.qr-field>span,.qr-control-title{font-size:12px;font-weight:800;color:#cbd5e1}.qr-field input,.qr-field textarea,.qr-field select{width:100%;box-sizing:border-box;border:1px solid rgba(148,163,184,.19);border-radius:11px;background:rgba(2,6,23,.34);color:#f8fafc;padding:11px 12px;outline:none;font:inherit}.qr-field textarea{resize:vertical;min-height:74px}.qr-field input:focus,.qr-field textarea:focus,.qr-field select:focus{border-color:rgba(139,92,246,.75);box-shadow:0 0 0 3px rgba(139,92,246,.09)}.qr-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.qr-grid-phone{grid-template-columns:110px 1fr}.qr-inline-action{position:absolute;right:7px;bottom:7px;border:0;border-radius:7px;background:rgba(139,92,246,.18);color:#c4b5fd;padding:5px 8px;cursor:pointer}.qr-check{display:flex;align-items:center;gap:8px;color:#cbd5e1;font-size:12px}.qr-check input{accent-color:#8b5cf6}.qr-more{border:1px solid rgba(148,163,184,.13);border-radius:12px;padding:10px 12px}.qr-more summary{cursor:pointer;font-size:12px;font-weight:800;color:#c4b5fd}.qr-more[open]{display:grid;gap:12px}.qr-more[open] summary{margin-bottom:10px}.qr-control-block{display:grid;gap:10px;padding:13px;border:1px solid rgba(148,163,184,.11);border-radius:14px;background:rgba(2,6,23,.18)}.qr-choice-row,.qr-segmented,.qr-gradient-directions{display:flex;flex-wrap:wrap;gap:7px}.qr-choice-row button,.qr-segmented button,.qr-gradient-directions button{border:1px solid rgba(148,163,184,.18);border-radius:9px;background:rgba(30,41,59,.45);color:#cbd5e1;min-width:42px;min-height:36px;padding:7px 10px;cursor:pointer}.qr-choice-row button.is-active,.qr-segmented button.is-active,.qr-gradient-directions button.is-active{border-color:rgba(139,92,246,.72);background:rgba(109,40,217,.25);color:#fff}.qr-choice-row.compact button{min-width:36px}.qr-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.qr-color-grid label,.qr-eye-color{display:grid;gap:6px;font-size:11px;color:#94a3b8}.qr-color-grid input[type=color],.qr-eye-color input[type=color]{width:100%;height:38px;border:1px solid rgba(148,163,184,.18);border-radius:9px;padding:3px;background:#0f172a}.qr-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.qr-upload-card{display:grid;gap:10px;padding:14px;border:1px dashed rgba(167,139,250,.28);border-radius:14px;background:rgba(30,41,59,.22)}.qr-upload-card>div{display:grid;gap:3px}.qr-upload-card small{color:#94a3b8;font-size:11px}.qr-upload-card button{border:1px solid rgba(139,92,246,.35);border-radius:9px;background:rgba(109,40,217,.18);color:#ddd6fe;padding:9px;font-weight:800;cursor:pointer}.qr-upload-card .qr-remove-image{border-color:rgba(248,113,113,.25);background:rgba(127,29,29,.13);color:#fca5a5}.qr-image-controls{display:grid;gap:12px;padding:13px;border-radius:13px;background:rgba(2,6,23,.2)}.qr-range{display:grid;gap:7px;color:#cbd5e1;font-size:12px}.qr-range span{display:flex;justify-content:space-between;gap:12px}.qr-range b{color:#a78bfa}.qr-range input{accent-color:#8b5cf6}.qr-local-note{margin:0;color:#64748b;font-size:11px;line-height:1.5}
.qr-studio-preview{padding:19px}.qr-preview-sticky{position:sticky;top:16px;display:grid;gap:13px}.qr-studio-panel-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid rgba(148,163,184,.11)}.qr-studio-panel-head>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#a855f7);font-size:11px;font-weight:900}.qr-studio-panel-head div{display:grid;gap:2px}.qr-studio-panel-head strong{font-size:14px}.qr-studio-panel-head small{color:#94a3b8}.qr-studio-preview-box{position:relative;aspect-ratio:1;border:1px solid rgba(167,139,250,.18);border-radius:18px;background:radial-gradient(circle at 50% 30%,rgba(126,34,206,.12),transparent 48%),rgba(2,6,23,.34);display:grid;place-items:center;padding:18px;overflow:hidden}.qr-studio-preview-box canvas{display:block;width:min(100%,430px);height:auto;max-height:100%;border-radius:16px;box-shadow:0 12px 35px rgba(2,6,23,.28)}.qr-preview-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#94a3b8;background:rgba(2,6,23,.72)}.qr-preview-placeholder[hidden]{display:none!important}.qr-readability{display:flex;align-items:center;gap:10px;border:1px solid rgba(34,197,94,.18);border-radius:12px;background:rgba(20,83,45,.12);padding:10px 12px}.qr-readability.is-warning{border-color:rgba(245,158,11,.25);background:rgba(120,53,15,.12)}.qr-readability.is-danger{border-color:rgba(248,113,113,.25);background:rgba(127,29,29,.12)}.qr-readability-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 14px rgba(34,197,94,.5)}.qr-readability.is-warning .qr-readability-dot{background:#f59e0b}.qr-readability.is-danger .qr-readability-dot{background:#ef4444}.qr-readability div{display:grid;gap:2px}.qr-readability strong{font-size:12px}.qr-readability small{font-size:10px;color:#94a3b8}.qr-project-bar{display:grid;gap:9px}.qr-project-name input{padding:9px 10px}.qr-secondary-button,.qr-primary-button{border-radius:10px;padding:10px 13px;font-weight:850;cursor:pointer}.qr-secondary-button{border:1px solid rgba(148,163,184,.2);background:rgba(30,41,59,.55);color:#e2e8f0}.qr-primary-button{border:1px solid rgba(167,139,250,.5);background:linear-gradient(135deg,#7c3aed,#9333ea);color:#fff}.qr-guest-note{padding:11px;border-radius:10px;background:rgba(30,41,59,.35);color:#94a3b8;font-size:11px;line-height:1.45}.qr-generate-button{border:1px solid rgba(167,139,250,.55);border-radius:13px;background:linear-gradient(135deg,#6d28d9,#9333ea);color:#fff;padding:13px 15px;display:grid;gap:2px;text-align:left;cursor:pointer;box-shadow:0 12px 28px rgba(88,28,135,.22)}.qr-generate-button span{font-weight:900}.qr-generate-button small{opacity:.8}.qr-studio-download-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.qr-studio-download-row button{min-height:40px;border-radius:10px;border:1px solid rgba(148,163,184,.17);background:rgba(30,41,59,.52);color:#e2e8f0;font-weight:850;cursor:pointer}.qr-studio-download-row button:disabled{color:#64748b;cursor:not-allowed;opacity:.55}.qr-studio-download-row button span{color:#a78bfa;margin-left:4px}.qr-saved-projects{border-top:1px solid rgba(148,163,184,.1);padding-top:10px}.qr-saved-projects summary{cursor:pointer;font-size:12px;font-weight:800;color:#cbd5e1}.qr-saved-projects summary span{color:#a78bfa}.qr-saved-projects>div{display:grid;gap:6px;margin-top:8px;max-height:220px;overflow:auto}.qr-saved-projects button{border:1px solid rgba(148,163,184,.11);border-radius:9px;background:rgba(2,6,23,.22);color:#e2e8f0;text-align:left;padding:9px;display:grid;gap:2px;cursor:pointer}.qr-saved-projects small{color:#64748b}
.qr-crop-modal[hidden]{display:none}.qr-crop-modal{position:fixed;inset:0;z-index:10000;background:rgba(2,6,23,.82);backdrop-filter:blur(9px);display:grid;place-items:center;padding:18px}.qr-crop-dialog{width:min(920px,96vw);max-height:94vh;overflow:auto;border:1px solid rgba(167,139,250,.28);border-radius:20px;background:#0b1220;box-shadow:0 30px 90px rgba(0,0,0,.5);padding:17px}.qr-crop-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:12px}.qr-crop-head>div{display:grid;gap:3px}.qr-crop-head span{font-size:10px;letter-spacing:.15em;color:#a78bfa;font-weight:900}.qr-crop-head strong{font-size:18px}.qr-crop-head button{width:36px;height:36px;border:1px solid rgba(148,163,184,.15);border-radius:10px;background:rgba(30,41,59,.55);color:#fff;font-size:22px;cursor:pointer}.qr-crop-stage{position:relative;width:100%;height:min(58vh,560px);min-height:340px;border-radius:15px;overflow:hidden;background:repeating-conic-gradient(#111827 0 25%,#0f172a 0 50%) 50%/20px 20px;touch-action:none}.qr-crop-stage canvas{width:100%;height:100%;display:block}.qr-crop-frame{position:absolute;left:50%;top:50%;width:min(68%,420px);aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid #c4b5fd;border-radius:12px;box-shadow:0 0 0 9999px rgba(2,6,23,.56);pointer-events:none}.qr-crop-frame:before,.qr-crop-frame:after{content:"";position:absolute;inset:33.333% 0;border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22)}.qr-crop-frame:after{inset:0 33.333%;border:0;border-left:1px solid rgba(255,255,255,.22);border-right:1px solid rgba(255,255,255,.22)}.qr-crop-controls{display:flex;align-items:end;gap:9px;margin-top:12px}.qr-crop-controls label{display:grid;gap:5px;flex:1;color:#94a3b8;font-size:11px}.qr-crop-controls input{width:100%;accent-color:#8b5cf6}.qr-crop-controls button{border:1px solid rgba(148,163,184,.17);border-radius:9px;background:rgba(30,41,59,.5);color:#e2e8f0;padding:9px 11px;cursor:pointer}.qr-crop-tip{margin-top:9px;color:#64748b;font-size:10px}.qr-crop-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:13px}.qr-toast{position:fixed;right:22px;bottom:22px;z-index:11000;max-width:360px;border:1px solid rgba(167,139,250,.3);border-radius:12px;background:#111827;color:#f8fafc;padding:12px 15px;box-shadow:0 20px 50px rgba(0,0,0,.3);font-size:12px}.qr-toast.is-error{border-color:rgba(248,113,113,.35)}
@media(max-width:1100px){.qr-studio-type-strip{grid-template-columns:repeat(5,1fr)}.qr-studio-workspace{grid-template-columns:minmax(0,1fr) 340px}}@media(max-width:880px){.qr-studio-heading{align-items:flex-start;flex-direction:column}.qr-studio-account-state{width:100%;box-sizing:border-box}.qr-studio-workspace{grid-template-columns:1fr}.qr-preview-sticky{position:static}.qr-studio-preview{order:-1}.qr-studio-preview-box{max-height:520px}.qr-studio-type-strip{display:flex;overflow:auto;padding-bottom:4px;scrollbar-width:thin}.qr-type-card{min-width:92px}.qr-upload-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.qr-studio-shell{gap:14px}.qr-studio-panel{border-radius:17px}.qr-studio-editor .qr-section-toggle{padding:14px}.qr-section-body{padding:0 14px 15px}.qr-grid-2,.qr-grid-phone,.qr-upload-grid,.qr-color-grid{grid-template-columns:1fr}.qr-studio-preview{padding:14px}.qr-studio-preview-box{padding:10px}.qr-crop-modal{padding:7px}.qr-crop-dialog{padding:11px;border-radius:14px}.qr-crop-stage{min-height:300px;height:48vh}.qr-crop-frame{width:78%}.qr-crop-controls{flex-wrap:wrap}.qr-crop-controls label{flex-basis:100%}}


/* QR Studio v1.2: viewport-safe sticky preview + visual frame picker */
@media (min-width:881px){
  /* v1.3: the whole preview card sticks as one piece. No nested scrolling. */
  .qr-studio-workspace{position:relative}
  .qr-studio-preview{position:sticky;top:12px;align-self:start;max-height:none;overflow:visible}
  .qr-preview-sticky{position:static;min-height:0;gap:10px}
  .qr-studio-panel-head{padding-bottom:10px}
  .qr-studio-preview-box{height:clamp(250px,calc(100vh - 390px),500px);aspect-ratio:auto;min-height:250px;padding:12px}
  .qr-studio-preview-box canvas{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
  .qr-readability{padding:8px 10px}
  .qr-guest-note{padding:9px 10px}
  .qr-generate-button{padding:11px 13px}
  .qr-studio-download-row button{min-height:36px}
}
.qr-frame-control{gap:12px}.qr-frame-grid{display:grid;grid-template-columns:repeat(5,minmax(54px,1fr));gap:9px}.qr-frame-grid>button{appearance:none;display:grid;place-items:center;min-width:0;aspect-ratio:1.15;border:1px solid rgba(148,163,184,.15);border-radius:11px;background:rgba(248,250,252,.94);padding:8px;cursor:pointer;transition:.18s ease}.qr-frame-grid>button:hover{transform:translateY(-1px);border-color:rgba(139,92,246,.5);box-shadow:0 8px 22px rgba(2,6,23,.18)}.qr-frame-grid>button.is-active{border-color:#8b5cf6;box-shadow:0 0 0 2px rgba(139,92,246,.16),0 9px 24px rgba(91,33,182,.2);background:#fff}.qr-frame-thumb{position:relative;display:block;width:46px;height:54px;color:#20242b}.qr-frame-thumb i,.qr-frame-thumb b{position:absolute;display:block;box-sizing:border-box}.qr-frame-thumb i{left:9px;top:9px;width:28px;height:28px;border:2px solid currentColor;background:#fff}.frame-none:before,.frame-none:after{content:"";position:absolute;left:7px;top:26px;width:38px;height:4px;border-radius:4px;background:currentColor;transform:rotate(45deg)}.frame-none:after{transform:rotate(-45deg)}.frame-none i{display:none}.frame-card-top{border:2px solid currentColor;border-radius:6px}.frame-card-top b{left:7px;right:7px;top:5px;height:7px;border-radius:4px;background:currentColor}.frame-card-top i{top:17px;left:7px;width:32px;height:31px;border-radius:4px}.frame-card-bottom{border:2px solid currentColor;border-radius:6px}.frame-card-bottom i{top:5px;left:7px;width:32px;height:31px;border-radius:4px}.frame-card-bottom b{left:7px;right:7px;bottom:5px;height:7px;border-radius:4px;background:currentColor}.frame-outline i{left:6px;top:5px;width:34px;height:42px;border-radius:2px}.frame-topbar{border:2px solid currentColor}.frame-topbar b{left:0;right:0;top:0;height:9px;background:currentColor}.frame-topbar i{left:7px;top:15px;width:30px;height:30px}.frame-bottombar{border:2px solid currentColor}.frame-bottombar i{left:7px;top:6px;width:30px;height:30px}.frame-bottombar b{left:0;right:0;bottom:0;height:9px;background:currentColor}.frame-label-bottom i{left:7px;top:4px;width:32px;height:34px}.frame-label-bottom b{left:8px;right:8px;bottom:3px;height:10px;border-radius:2px;background:currentColor}.frame-bubble-top b{left:5px;right:5px;top:0;height:11px;border-radius:3px;background:currentColor}.frame-bubble-top b:after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-4px;border:4px solid transparent;border-top-color:currentColor}.frame-bubble-top i{left:8px;top:20px;width:30px;height:29px}.frame-bubble-bottom i{left:8px;top:3px;width:30px;height:29px}.frame-bubble-bottom b{left:5px;right:5px;bottom:0;height:11px;border-radius:3px;background:currentColor}.frame-bubble-bottom b:after{content:"";position:absolute;left:50%;top:-5px;margin-left:-4px;border:4px solid transparent;border-bottom-color:currentColor}.frame-corners:before,.frame-corners:after,.frame-corners i:before,.frame-corners i:after{content:"";position:absolute;width:10px;height:10px;border-color:currentColor}.frame-corners:before{left:4px;top:4px;border-left:3px solid;border-top:3px solid}.frame-corners:after{right:4px;top:4px;border-right:3px solid;border-top:3px solid}.frame-corners i{border:0;background:transparent;inset:0;width:auto;height:auto}.frame-corners i:before{left:4px;bottom:4px;border-left:3px solid;border-bottom:3px solid}.frame-corners i:after{right:4px;bottom:4px;border-right:3px solid;border-bottom:3px solid}.frame-badge-bottom i{left:8px;top:3px;width:30px;height:32px}.frame-badge-bottom b{left:4px;right:4px;bottom:2px;height:10px;background:currentColor}.frame-badge-bottom b:before,.frame-badge-bottom b:after{content:"";position:absolute;top:0;border:5px solid transparent}.frame-badge-bottom b:before{left:-7px;border-right-color:currentColor}.frame-badge-bottom b:after{right:-7px;border-left-color:currentColor}
@media(max-width:1100px) and (min-width:881px){.qr-frame-grid{grid-template-columns:repeat(4,minmax(52px,1fr))}.qr-studio-preview-box{height:clamp(240px,calc(100vh - 400px),440px);min-height:240px}}

@media (min-width:881px) and (max-height:760px){
  .qr-studio-preview{top:8px;padding:13px}
  .qr-preview-sticky{gap:8px}
  .qr-studio-preview-box{height:clamp(210px,calc(100vh - 360px),360px);min-height:210px;padding:9px}
  .qr-studio-panel-head{padding-bottom:8px}
  .qr-readability{padding:7px 9px}
  .qr-guest-note{padding:8px 9px}
  .qr-generate-button{padding:9px 11px}
}
@media(max-width:880px){.qr-studio-preview{position:static;max-height:none;overflow:visible}.qr-frame-grid{grid-template-columns:repeat(5,minmax(50px,1fr))}.qr-studio-preview-box{height:min(72vw,520px);aspect-ratio:auto}.qr-studio-preview-box canvas{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}}
@media(max-width:560px){.qr-frame-grid{grid-template-columns:repeat(4,minmax(48px,1fr));gap:7px}.qr-frame-grid>button{padding:6px}.qr-frame-thumb{transform:scale(.88)}}


/* QR Studio v1.4: true sticky + unclipped full-frame preview */
html.qr-studio-page-root,
body.qr-studio-page-root{
  overflow-x:clip !important;
}
.qr-studio-shell,
.qr-studio-workspace,
.content-frame:has(#qrStudio),
.app-content:has(#qrStudio),
.app-main:has(#qrStudio){
  overflow:visible !important;
}
@media (min-width:881px){
  .qr-studio-preview{
    position:sticky !important;
    top:12px !important;
    align-self:start !important;
    overflow:visible !important;
  }
  .qr-preview-sticky{
    position:static !important;
    overflow:visible !important;
  }
  .qr-studio-preview-box{
    height:clamp(230px,calc(100vh - 370px),500px) !important;
    min-height:230px !important;
    padding:8px !important;
    overflow:hidden !important;
  }
  .qr-studio-preview-box canvas{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    border-radius:14px;
  }
}
@media (min-width:881px) and (max-height:760px){
  .qr-studio-preview-box{
    height:clamp(205px,calc(100vh - 335px),350px) !important;
    min-height:205px !important;
  }
}

/* QR Studio v1.5: reference-like card proportions. Outer frame stays bold; QR-to-inner-frame gap is tighter. */


/* QR Studio v1.6: preview canvas is sized by JS using its real output ratio. */
@media (min-width:881px){
  .qr-studio-preview-box{
    height:clamp(260px,calc(100vh - 340px),560px) !important;
    min-height:260px !important;
    padding:10px !important;
  }
  .qr-studio-preview-box canvas{
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:initial !important;
    flex:none;
  }
}
@media (min-width:881px) and (max-height:760px){
  .qr-studio-preview-box{
    height:clamp(230px,calc(100vh - 310px),390px) !important;
    min-height:230px !important;
  }
}
@media(max-width:880px){
  .qr-studio-preview-box canvas{
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:initial !important;
  }
}

/* QR Studio v1.7: preview box follows the rendered canvas ratio; never crops the card. */
@media (min-width:881px){
  .qr-studio-preview-box{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    padding:10px !important;
    overflow:visible !important;
  }
  .qr-studio-preview-box canvas{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:initial !important;
    margin:auto !important;
  }
}
@media(max-width:880px){
  .qr-studio-preview-box{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    overflow:visible !important;
  }
}

/* QR Studio v1.8: desktop preview is intentionally compact; output/render size is untouched. */
@media (min-width:881px){
  .qr-studio-preview-box canvas{
    max-width:100% !important;
  }
}

/* QR Studio v1.9: mobile-first preview + action stack. Desktop v1.8 is untouched. */
@media (max-width:880px){
  .qr-studio-workspace{display:flex !important;flex-direction:column !important;gap:14px !important}
  .qr-studio-preview{order:-1 !important;width:100% !important;box-sizing:border-box !important;padding:12px !important;overflow:visible !important}
  .qr-preview-sticky{display:flex !important;flex-direction:column !important;gap:10px !important;width:100% !important;min-width:0 !important}
  .qr-studio-panel-head{order:1;padding-bottom:10px !important}
  .qr-studio-preview-box{order:2;width:100% !important;height:auto !important;min-height:0 !important;aspect-ratio:auto !important;padding:7px !important;box-sizing:border-box !important;overflow:visible !important;border-radius:16px !important}
  .qr-studio-preview-box canvas{display:block !important;width:auto !important;height:auto !important;max-width:100% !important;max-height:none !important;margin:0 auto !important;border-radius:13px !important}
  .qr-generate-button{order:3;width:100% !important;min-height:52px !important;padding:12px 14px !important;box-sizing:border-box !important;text-align:center !important;place-items:center !important;border-radius:13px !important}
  .qr-generate-button span{font-size:15px !important}
  .qr-generate-button small{font-size:10px !important}
  .qr-studio-download-row{order:4;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:7px !important;width:100% !important}
  .qr-studio-download-row button{min-width:0 !important;min-height:46px !important;padding:8px 5px !important;font-size:12px !important}
  .qr-project-bar{order:5;width:100% !important}
  .qr-project-bar .qr-secondary-button{min-height:46px !important;width:100% !important}
  .qr-readability{order:6;padding:9px 10px !important}
  .qr-saved-projects{order:7}
  .qr-studio-editor{order:2;width:100% !important;min-width:0 !important}
}
@media (max-width:560px){
  .qr-studio-shell{padding-left:0 !important;padding-right:0 !important}
  .qr-studio-preview{border-radius:15px !important;padding:10px !important}
  .qr-studio-preview-box{padding:5px !important;border-radius:14px !important}
  .qr-studio-panel-head>span{width:30px;height:30px;border-radius:9px}
  .qr-studio-panel-head strong{font-size:13px}
  .qr-studio-panel-head small{font-size:10px}
  .qr-studio-download-row{gap:6px !important}
  .qr-studio-download-row button{min-height:45px !important;font-size:11px !important}
  .qr-type-card{min-width:86px !important;min-height:62px !important}
  .qr-section-body input,.qr-section-body select,.qr-section-body textarea{font-size:16px !important}
  .qr-section-body button,.qr-section-toggle{touch-action:manipulation}
}

/* QR Studio v1.10: mobile hierarchy = types -> preview -> editor tools -> actions. */
@media (max-width:880px){
  .qr-studio-workspace{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }

  /* On mobile the preview wrapper must not drag its action buttons above the editor. */
  .qr-studio-preview,
  .qr-preview-sticky{
    display:contents !important;
  }

  /* Content-type strip is already outside the workspace and therefore remains first. */
  .qr-studio-panel-head{
    display:none !important;
  }

  /* Ready Barcodem template immediately below URL / WhatsApp / ... types. */
  .qr-studio-preview-box{
    order:1 !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    box-sizing:border-box !important;
    padding:8px !important;
    margin:0 !important;
    overflow:visible !important;
    border-radius:16px !important;
  }
  .qr-studio-preview-box canvas{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    margin:0 auto !important;
  }

  /* All content/design sections follow the preview. */
  .qr-studio-editor{
    order:2 !important;
    width:100% !important;
    min-width:0 !important;
  }

  /* Final actions stay below all design tools. */
  .qr-readability{order:3 !important;width:100% !important;box-sizing:border-box !important}
  .qr-project-bar{order:4 !important;width:100% !important;box-sizing:border-box !important}
  .qr-generate-button{
    order:5 !important;
    width:100% !important;
    min-height:52px !important;
    padding:12px 14px !important;
    box-sizing:border-box !important;
    text-align:center !important;
    place-items:center !important;
    border-radius:13px !important;
  }
  .qr-studio-download-row{
    order:6 !important;
    width:100% !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  .qr-studio-download-row button{min-width:0 !important;min-height:46px !important}
  .qr-saved-projects{order:7 !important;width:100% !important;box-sizing:border-box !important}

  /* Since the desktop preview panel box disappears with display:contents,
     give action blocks comfortable edge spacing on phones. */
  .qr-readability,
  .qr-project-bar,
  .qr-generate-button,
  .qr-studio-download-row,
  .qr-saved-projects{
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

@media (max-width:560px){
  .qr-studio-preview-box{padding:5px !important;border-radius:14px !important}
  .qr-generate-button{min-height:54px !important}
  .qr-studio-download-row{gap:6px !important}
  .qr-studio-download-row button{min-height:46px !important;font-size:12px !important}
}

/* QR Projects quick access */
.qr-studio-heading-actions{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.qr-projects-page-button{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;border:1px solid rgba(126,103,255,.34);border-radius:16px;background:linear-gradient(135deg,rgba(180,40,214,.13),rgba(45,95,255,.12));color:#eef2ff;text-decoration:none;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.qr-projects-page-button:hover{border-color:rgba(132,112,255,.68);transform:translateY(-1px)}
.qr-projects-page-button>span{font-size:20px;color:#b88cff}.qr-projects-page-button>b{min-width:26px;height:26px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(119,93,255,.2);color:#dcd5ff;font-size:12px}
@media(max-width:760px){.qr-studio-heading-actions{width:100%;justify-content:stretch}.qr-projects-page-button,.qr-studio-account-state{flex:1 1 100%}.qr-projects-page-button{justify-content:center}}

/* Logo crop: circular, edge-to-edge selection. Background crop keeps the square frame. */
.qr-crop-frame.is-logo{border-radius:50%;border:1px solid rgba(196,181,253,.65);box-shadow:0 0 0 9999px rgba(2,6,23,.62);}
.qr-crop-frame.is-logo:before,.qr-crop-frame.is-logo:after{display:none;}
.qr-crop-stage.is-logo-crop{background:repeating-conic-gradient(#111827 0 25%,#0f172a 0 50%) 50%/20px 20px;}

/* Expanded QR module shape gallery */
.qr-shape-grid{display:grid!important;grid-template-columns:repeat(7,minmax(42px,1fr));gap:8px}
.qr-shape-grid button{min-width:0!important;height:48px;font-size:20px;display:grid;place-items:center;padding:6px!important}
.qr-shape-grid button span{line-height:1;transform:scale(1.05)}
@media(max-width:720px){.qr-shape-grid{grid-template-columns:repeat(5,minmax(42px,1fr))}}