.stqr-wrap{max-width:1160px;margin:46px auto 30px;padding:0 16px;font-family:Arial,Helvetica,sans-serif;color:#101828}.stqr-header{text-align:center;margin:18px 0 24px;padding-top:10px}.stqr-header h1{margin:0 0 10px;font-size:40px;line-height:1.15}.stqr-header p{max-width:850px;margin:auto;color:#667085;line-height:1.6}.stqr-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.stqr-card{background:#fff;border:1px solid #e6eaf0;border-radius:22px;padding:24px;box-shadow:0 12px 32px rgba(16,24,40,.06);margin-bottom:18px}.stqr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.stqr-field{margin-bottom:14px}.stqr-field label{display:block;font-weight:700;margin-bottom:7px;color:#344054}.stqr-field input,.stqr-field select,.stqr-field textarea{width:100%;border:1px solid #d0d5dd;border-radius:13px;padding:12px 13px;font-size:15px;box-sizing:border-box;background:#fff;outline:none}.stqr-field textarea{min-height:94px;resize:vertical}.stqr-field input:focus,.stqr-field select:focus,.stqr-field textarea:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12)}.stqr-field small{display:block;color:#667085;margin-top:6px}.stqr-subtitle{margin:18px 0 12px;font-size:20px}.stqr-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.stqr-btn{border:none;background:#2563eb;color:#fff;padding:12px 17px;border-radius:12px;font-weight:700;cursor:pointer;transition:.2s}.stqr-btn:hover{transform:translateY(-1px);filter:brightness(.96)}.stqr-soft{background:#f2f4f7;color:#344054}.stqr-copy{background:#16a34a}.stqr-status{margin-top:18px;background:linear-gradient(135deg,#0f172a,#2563eb);color:#fff;border-radius:20px;padding:20px;font-size:18px;font-weight:800}.stqr-preview-card{text-align:center}.stqr-preview-card h2{margin:0 0 18px}.stqr-frame{display:inline-block;background:#fff;border:1px solid #e6eaf0;border-radius:24px;padding:22px;box-shadow:0 10px 24px rgba(16,24,40,.08)}#stqr-preview{display:flex;align-items:center;justify-content:center;min-height:300px}.stqr-frame-label{font-weight:800;font-size:24px;margin-top:12px;color:#111827}.stqr-note{margin-top:18px;text-align:left;background:#fffaeb;color:#92400e;border:1px solid #fedf89;border-radius:16px;padding:14px 16px;line-height:1.55}@media(max-width:950px){.stqr-layout{grid-template-columns:1fr}.stqr-header h1{font-size:32px}}@media(max-width:650px){.stqr-grid{grid-template-columns:1fr}.stqr-status{font-size:16px}#stqr-preview{min-height:240px}.stqr-frame{max-width:100%;box-sizing:border-box}}
.stqr-field input[type="color"]{
height:54px;
padding:6px;
cursor:pointer;
background:#fff;
}

#stqr-preview canvas{display:block;}

#stqr-preview canvas{
display:block;
max-width:100%;
height:auto;
}
.stqr-preview-card #stqr-preview{
background:transparent;
}

.stqr-frame-options{
display:flex;
gap:10px;
overflow-x:auto;
padding:8px 2px 12px;
}
.stqr-frame-option{
min-width:92px;
height:74px;
border:2px solid #e0e7ef;
background:#fff;
border-radius:12px;
font-weight:800;
color:#344054;
cursor:pointer;
transition:.2s ease;
}
.stqr-frame-option:hover,
.stqr-frame-option.active{
border-color:#2563eb;
background:#eef4ff;
color:#2563eb;
}

.stqr-frame-options{
display:flex;
gap:12px;
overflow-x:auto;
padding:8px 2px 14px;
}
.stqr-frame-option{
min-width:94px;
height:96px;
border:2px solid #e0e7ef;
background:#fff;
border-radius:14px;
font-weight:800;
color:#344054;
cursor:pointer;
transition:.2s ease;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
padding:8px;
}
.stqr-frame-option small{
font-size:12px;
font-weight:800;
color:#344054;
}
.stqr-frame-option:hover,
.stqr-frame-option.active{
border-color:#2563eb;
background:#eef4ff;
color:#2563eb;
}
.stqr-frame-option.active small,
.stqr-frame-option:hover small{
color:#2563eb;
}
.stqr-mini{
width:54px;
height:54px;
background:#fff;
border:2px solid #d7dee9;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-sizing:border-box;
overflow:hidden;
}
.stqr-mini i{
width:28px;
height:28px;
display:block;
background:
linear-gradient(90deg,#9ca3af 20%,transparent 20% 40%,#9ca3af 40% 60%,transparent 60% 80%,#9ca3af 80%),
linear-gradient(#9ca3af 20%,transparent 20% 40%,#9ca3af 40% 60%,transparent 60% 80%,#9ca3af 80%);
background-size:10px 10px;
border:2px solid #111827;
box-sizing:border-box;
}
.stqr-mini em{
font-style:normal;
font-size:34px;
font-weight:900;
line-height:1;
color:#344054;
}
.stqr-mini b{
position:absolute;
font-size:7px;
line-height:1;
font-weight:900;
letter-spacing:.2px;
}
.stqr-mini-text b{
bottom:5px;
color:#111827;
}
.stqr-mini-text i{
margin-top:-7px;
}
.stqr-mini-bar b{
left:9px;
right:9px;
bottom:5px;
height:10px;
background:#111827;
border-radius:2px;
}
.stqr-mini-bar b:after{
content:"SCAN";
position:absolute;
left:0;
right:0;
top:2px;
font-size:5px;
color:#fff;
text-align:center;
}
.stqr-mini-card{
border-color:#111827;
border-radius:14px;
}
.stqr-mini-card i{
margin-top:-7px;
}
.stqr-mini-card b{
bottom:6px;
color:#111827;
}
.stqr-mini-badge b{
top:5px;
left:8px;
right:8px;
height:12px;
border-radius:4px;
background:#111827;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:6px;
}
.stqr-mini-badge i{
margin-top:13px;
}
.stqr-mini-classic{
border-color:#111827;
border-radius:6px;
}
.stqr-mini-classic:before{
content:"";
position:absolute;
inset:4px;
border:1px solid #111827;
border-radius:4px;
}
.stqr-mini-classic i{
margin-top:-6px;
transform:scale(.9);
}
.stqr-mini-classic b{
bottom:6px;
color:#111827;
}

/* v1.7 visible frame icons */
.stqr-frame-option{
min-width:104px!important;
height:110px!important;
}
.stqr-mini{
width:62px!important;
height:62px!important;
background:#ffffff!important;
border:2px solid #cfd8e3!important;
border-radius:12px!important;
position:relative!important;
display:block!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
.stqr-mini:after{
content:"";
position:absolute;
left:17px;
top:13px;
width:28px;
height:28px;
background:
linear-gradient(90deg,#111827 0 6px,transparent 6px 10px,#111827 10px 16px,transparent 16px 20px,#111827 20px 28px),
linear-gradient(#111827 0 6px,transparent 6px 10px,#111827 10px 16px,transparent 16px 20px,#111827 20px 28px);
background-size:14px 14px;
border:2px solid #111827;
box-sizing:border-box;
}
.stqr-mini-none:after{display:none!important;}
.stqr-mini-none em{
position:absolute;
left:0;
right:0;
top:7px;
text-align:center;
font-size:38px!important;
font-style:normal;
font-weight:900;
color:#344054;
}
.stqr-mini-text:before{
content:"SCAN ME";
position:absolute;
bottom:6px;
left:0;
right:0;
text-align:center;
font-size:7px;
font-weight:900;
color:#111827;
z-index:3;
}
.stqr-mini-text:after{top:10px!important;}
.stqr-mini-bar:before{
content:"SCAN";
position:absolute;
left:10px;
right:10px;
bottom:6px;
height:13px;
background:#111827;
color:#fff;
border-radius:3px;
font-size:7px;
font-weight:900;
display:flex;
align-items:center;
justify-content:center;
z-index:3;
}
.stqr-mini-bar:after{top:9px!important;}
.stqr-mini-card{
border-color:#111827!important;
border-radius:16px!important;
}
.stqr-mini-card:before{
content:"SCAN";
position:absolute;
bottom:6px;
left:0;
right:0;
text-align:center;
font-size:7px;
font-weight:900;
color:#111827;
z-index:3;
}
.stqr-mini-card:after{top:9px!important;}
.stqr-mini-badge:before{
content:"SCAN";
position:absolute;
top:6px;
left:10px;
right:10px;
height:14px;
background:#111827;
color:#fff;
border-radius:4px;
font-size:7px;
font-weight:900;
display:flex;
align-items:center;
justify-content:center;
z-index:3;
}
.stqr-mini-badge:after{top:24px!important;}
.stqr-mini-clipboard{
border-color:#111827!important;
border-radius:10px!important;
}
.stqr-mini-clipboard:before{
content:"";
position:absolute;
left:18px;
top:-1px;
width:26px;
height:12px;
background:#111827;
border-radius:0 0 5px 5px;
z-index:4;
}
.stqr-mini-clipboard:after{
top:19px!important;
}
.stqr-mini-clipboard b{
display:none!important;
}


/* v1.8 force visible frame icons */
.stqr-frame-option{
background:#ffffff !important;
}

.stqr-frame-option .stqr-mini{
display:flex !important;
align-items:center !important;
justify-content:center !important;
position:relative !important;
}

.stqr-frame-option .stqr-mini i{
display:block !important;
width:26px !important;
height:26px !important;
background:
linear-gradient(90deg,#111827 0 6px,transparent 6px 10px,#111827 10px 16px,transparent 16px 20px,#111827 20px 26px),
linear-gradient(#111827 0 6px,transparent 6px 10px,#111827 10px 16px,transparent 16px 20px,#111827 20px 26px) !important;
background-size:13px 13px !important;
border:2px solid #111827 !important;
box-sizing:border-box !important;
position:absolute !important;
top:12px !important;
left:50% !important;
transform:translateX(-50%) !important;
}

.stqr-mini-none i{
display:none !important;
}

/* v1.9 inline SVG frame previews */
.stqr-frame-option{
background:#ffffff !important;
height:112px !important;
min-width:108px !important;
padding:8px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
}
.stqr-frame-svg{
width:64px !important;
height:64px !important;
display:block !important;
flex:0 0 auto !important;
}
.stqr-frame-option small{
display:block !important;
font-size:12px !important;
font-weight:800 !important;
color:#344054 !important;
}
.stqr-frame-option.active small,
.stqr-frame-option:hover small{
color:#1b8d5c !important;
}
.stqr-frame-option.active,
.stqr-frame-option:hover{
border-color:#1b8d5c !important;
background:#eefaf4 !important;
}

/* v2.0 polished frame selector */
.stqr-frame-options{
background:#ffffff !important;
border:1px solid #e6eaf0 !important;
border-radius:18px !important;
padding:14px !important;
gap:12px !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.stqr-frame-option{
background:#ffffff !important;
border:1px solid #dbe3ee !important;
box-shadow:0 6px 18px rgba(16,24,40,.06) !important;
border-radius:16px !important;
height:118px !important;
min-width:112px !important;
color:#101828 !important;
}
.stqr-frame-option:hover{
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(16,24,40,.10) !important;
}
.stqr-frame-option.active{
background:#eefaf4 !important;
border:2px solid #1b8d5c !important;
box-shadow:0 8px 22px rgba(27,141,92,.18) !important;
}
.stqr-frame-svg{
background:#ffffff;
border-radius:12px;
filter:drop-shadow(0 2px 4px rgba(16,24,40,.08));
}
.stqr-frame-option small{
color:#344054 !important;
font-size:13px !important;
}
.stqr-frame-option.active small,
.stqr-frame-option:hover small{
color:#1b8d5c !important;
}

/* v2.1 frame row fixes */
.stqr-frame-options{
display:flex !important;
flex-wrap:nowrap !important;
align-items:flex-start !important;
overflow-x:auto !important;
background:#ffffff !important;
}

.stqr-frame-option{
background:#ffffff !important;
flex:0 0 auto !important;
}

.stqr-frame-svg{
background:transparent !important;
}

/* v2.2 revert frame layout */
.stqr-frame-options{
display:flex !important;
flex-wrap:wrap !important;
justify-content:flex-start !important;
overflow:visible !important;
gap:12px !important;
background:#ffffff !important;
}

.stqr-frame-option{
width:110px !important;
}

/* v2.4 approved shopping frame polish */
.stqr-frame-options{
flex-wrap:wrap !important;
overflow:visible !important;
background:#ffffff !important;
}
.stqr-frame-option{
background:#ffffff !important;
}
.stqr-frame-svg{
background:transparent !important;
}