:root{
  color-scheme: light;
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#000000;
  --muted:#000000;
  --border:#e2e8f0;
  --accent:#2f5bff;
  --accent-dark:#1f3ac7;
}
html, body{
  margin:0;
  padding:0;
  width:100%;
}
*{
  box-sizing:border-box;
}
body.personalizacaoBody{
  margin:0;
  padding:0;
  font-family:"Bahnschrift","Segoe UI Variable Text","Segoe UI",sans-serif;
  background:radial-gradient(circle at top, #aeb9d3 0%, #c4cfe5 45%, #dee6f2 100%);
  color:var(--text);
}
.personalizacaoShell{
  max-width:100%;
  width:100%;
  margin:0 auto;
  padding:64px 20px 60px;
}
.appFooter{
  width:100%;
  display:flex;
  justify-content:center;
  padding:20px 16px 32px;
  background:transparent;
  border:0;
}
.footerInner{
  display:flex;
  justify-content:center;
}
.footerBrand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  font-size:12px;
  color:#1f2937;
}
.footerLogo{
  width:22px;
  height:22px;
  object-fit:contain;
  display:block;
}
.footerText{
  font-weight:400;
}
.miniOverlay{
  position:fixed;
  inset:0;
  background:rgba(7, 12, 24, 0.7);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:2000;
}
.miniOverlay.show{
  display:flex;
}
.popupModal{
  width:100%;
  max-width:min(720px, calc(100vw - 48px));
  max-height:90vh;
  background:#0f1b2e;
  color:#e6edf8;
  border:1px solid #20324f;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 50px rgba(2,6,23,0.45);
}
.popupModal .mh{
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.popupModal .mh h3{
  margin:0;
  font-size:14px;
  font-weight:700;
}
.popupModal .mb{
  padding:14px 16px;
  overflow:auto;
  max-height:calc(90vh - 120px);
}
.popupModal .mf{
  display:flex;
  justify-content:center;
  padding:0 16px 32px;
  margin-top:0px;
}
.popupMessage{
  font-size:13px;
  line-height:1.4;
  color:#c5d2e8;
  text-align:center;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:0 0 20px 0;
}
.popupInputWrap{
  display:block;
}
.popupTextarea{
  width:100%;
  min-height:140px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background:#0b1220;
  color:#e6edf8;
  padding:12px;
  resize:vertical;
}
.popupImagesWrap{
  margin-top:8px;
  margin-bottom:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.popupImagesLabel{
  font-size:12px;
  font-weight:700;
  color:#d6e2f5;
}
.popupImagesHint{
  font-size:11px;
  color:#9fb0c8;
}
.popupImagesDivider{
  width:100%;
  height:1px;
  background:rgba(255,255,255,0.08);
  margin-top:8px;
}
.popupImagesInput{
  width:100%;
  margin-top:8px;
  margin-bottom:8px;
  border:0;
  outline:0;
  background:transparent;
  padding:0;
}
.popupImageList{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.popupImageItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background:#0b1220;
  font-size:12px;
}
.popupImageName{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.popupImageRemove{
  border:0;
  background:transparent;
  color:#f87171;
  font-weight:800;
  cursor:pointer;
  padding:0 4px;
  line-height:1;
}
#popupActions.mf{
  justify-content:center !important;
}
#popupActions .btn{
  padding:8px 12px;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
#popupActions.isHidden{
  display:none !important;
}
.miniOverlay .btn{
  border:1px solid rgba(255,255,255,0.12);
  background:#0b1220;
  color:#ffffff;
  border-radius:12px;
  padding:8px 12px;
  font-size:12px;
  font-weight:800;
  box-shadow:none;
}
.miniOverlay .popupModal .btn{
  border:1px solid rgba(255,255,255,0.12);
  background:#0b1220;
  color:#ffffff;
  border-radius:12px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
  box-shadow:none;
}
.miniOverlay .btn:hover{
  background:#111a2b;
  border-color:rgba(255,255,255,0.2);
  color:#ffffff;
  box-shadow:0 0 0 2px rgba(124,140,255,0.15);
}
.miniOverlay .btn.primary{
  background:#0b1220;
  border-color:rgba(255,255,255,0.12);
  color:#ffffff;
}
.miniOverlay .popupModal .btn.primary{
  background:#0b1220;
  border-color:rgba(255,255,255,0.12);
  color:#ffffff;
}
.miniOverlay .btn.small{
  padding:8px 12px;
  font-size:12px;
}
.personalizacaoTopbar{
  background:#0b0b0b;
  color:#fff;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 28px;
  border-radius:0;
  margin:0;
  position:fixed;
  inset:0 0 auto 0;
  width:100%;
  max-width:100%;
  z-index:20;
  flex-wrap:nowrap;
}
.topbarLogo{
  display:flex;
  align-items:center;
  min-width:160px;
}
#storeTopLogoLink{
  display:inline-flex;
  align-items:center;
}
#storeTopLogoImg{
  height:40px;
  width:auto;
  display:block;
}
.topbarSocials{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  flex:1;
}
.topbarSocialBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  padding:0;
  border-radius:0;
  background:transparent;
  text-decoration:none;
  transition:opacity 0.15s ease;
}
.topbarSocialBtn:hover{
  opacity:0.7;
}
.topbarSocialIcon{
  width:16px;
  height:16px;
  display:block;
}
.personalizacaoHeader{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  margin-top:16px;
  margin-bottom:16px;
}
.personalizacaoHeaderContent{
  width:100%;
  max-width:920px;
  background:linear-gradient(180deg, rgba(255,255,255,0.58) 0%, rgba(245,249,255,0.34) 100%);
  border:1px solid rgba(127,150,190,0.35);
  border-radius:14px;
  padding:12px 14px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55), 0 8px 18px rgba(29,42,68,0.08);
}
.storeBrand{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  margin-top:0;
}
.storeBackBtn{
  align-self:flex-start;
  margin-top:16px;
  padding:6px 10px;
  border-radius:0;
  background:transparent;
  color:#0f1a2b;
  font-size:13px;
  font-weight:400;
  text-decoration:none;
  border:1px solid rgba(15, 26, 43, 0.25);
  display:inline-flex;
  align-items:center;
  gap:8px;
  line-height:1;
  transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.storeBackBtn:hover{
  background:rgba(15, 26, 43, 0.06);
  border-color:rgba(15, 26, 43, 0.45);
}
.storeBackBtn.storeBackBtnTop{
  margin-left:auto;
  margin-right:6px;
  border:0;
  padding:4px 0;
  margin-top:0;
  background:transparent;
  color:#fff;
  align-self:center;
  display:inline-flex;
  align-items:center;
}
.storeBackBtn.storeBackBtnTop:hover{
  background:transparent;
  color:#fff;
  border-color:transparent;
}
.storeBackIcon{
  width:16px;
  height:16px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  display:block;
}
.personalizacaoLogo{
  height:37px;
  margin-bottom:10px;
  display:block;
}
.personalizacaoHeader h1{
  margin:0 0 12px;
  font-size:34px;
  font-weight:800;
  letter-spacing:0.01em;
  line-height:1.1;
  color:#0f1b32;
  position:relative;
  display:inline-block;
  padding-bottom:6px;
}
.personalizacaoHeader h1::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  max-width:220px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, #2f5bff 0%, #7ea2ff 100%);
}
.personalizacaoHeader p{
  margin:0;
  color:#21304c;
  font-size:17px;
  line-height:1.5;
  max-width:760px;
  font-weight:500;
}
.personalizacaoEyebrow{
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.personalizacaoAlert{
  border:1px solid #ff9f43;
  background:#fff7e6;
  color:#7c4b00;
  padding:12px 14px;
  border-radius:12px;
  max-width:320px;
  font-size:13px;
}
.personalizacaoAlert.isLogo{
  border:0;
  background:transparent;
  color:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  position:relative;
  width:180px;
  height:60px;
}
.personalizacaoAlert.isLogo img{
  max-width:100%;
  max-height:100%;
  width:180px;
  height:auto;
  display:block;
  position:relative;
  z-index:1;
}
.personalizacaoGrid{
  display:grid;
  grid-template-columns:minmax(280px, 340px) minmax(280px, 1fr);
  gap:20px;
  width:100%;
  max-width:100%;
  min-width:0;
}
.personalizacaoGrid > *{
  min-width:0;
}
.personalizacaoPanel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
  max-width:100%;
  min-width:0;
}
.personalizacaoPanel#configPanel{
  --config-text-color: inherit;
  --config-field-text-color: var(--text);
  --trash-icon-color: #000000;
}
.personalizacaoPanel#customerPanel{
  --customer-text-color: inherit;
}
.personalizacaoPanel#configPanel,
.personalizacaoPanel#configPanel .label,
.personalizacaoPanel#configPanel .note,
.personalizacaoPanel#configPanel .warningTitle,
.personalizacaoPanel#configPanel .sizeInfo,
.personalizacaoPanel#configPanel ul,
.personalizacaoPanel#configPanel li,
.personalizacaoPanel#configPanel input,
.personalizacaoPanel#configPanel select,
.personalizacaoPanel#configPanel textarea,
.personalizacaoPanel#configPanel .fileText,
.personalizacaoPanel#configPanel .btn,
.personalizacaoPanel#configPanel .iconBtn{
  color:var(--config-text-color);
}
.personalizacaoPanel#configPanel .trashIconBtn{
  color:var(--trash-icon-color);
}
.personalizacaoPanel#configPanel .trashIconBtn svg{
  fill:currentColor;
}
.personalizacaoPanel#configPanel input,
.personalizacaoPanel#configPanel select,
.personalizacaoPanel#configPanel textarea,
.personalizacaoPanel#configPanel .fileText{
  color:var(--config-field-text-color);
}
.personalizacaoPanel#customerPanel,
.personalizacaoPanel#customerPanel .label,
.personalizacaoPanel#customerPanel .formNote,
.personalizacaoPanel#customerPanel .labelRow,
.personalizacaoPanel#customerPanel .requiredTag{
  color:var(--customer-text-color);
}
.personalizacaoBody .btn,
.personalizacaoBody .iconBtn,
.personalizacaoBody input,
.personalizacaoBody select,
.personalizacaoBody textarea,
.personalizacaoBody .fileText{
  border-radius:0;
}
.personalizacaoPanelFull{
  grid-column:1 / -1;
}

.personalizacaoPopupOverlay{
  position:fixed;
  inset:0;
  background:rgba(7, 12, 24, 0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:999;
}
.personalizacaoPopup{
  background:#ffffff;
  border-radius:16px;
  border:1px solid #d9e0ea;
  padding:22px 24px;
  max-width:min(420px, calc(100vw - 48px));
  width:100%;
  color:#1f2a3d;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 18px 50px rgba(12, 18, 38, 0.25);
}
.personalizacaoPopup h3{
  margin:0;
  font-size:18px;
}
.personalizacaoPopup p{
  margin:0;
  font-size:14px;
  color:#3a4a63;
}
.personalizacaoPopup .popupActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
body.stampCropOpen{
  overflow:hidden;
}
.stampCropOverlay{
  z-index:2200;
  padding:18px;
}
.stampCropModal{
  width:min(920px, calc(100vw - 36px));
  max-height:calc(100vh - 36px);
  background:#ffffff;
  border:1px solid #d6dfec;
  border-radius:16px;
  padding:16px;
  box-shadow:0 22px 54px rgba(9, 17, 32, 0.28);
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
}
.stampCropHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.stampCropHeader h3{
  margin:0;
  font-size:22px;
  font-weight:700;
}
.stampCropHint{
  font-size:13px;
  color:#334155;
  line-height:1.4;
}
.stampCropCanvasWrap{
  width:100%;
  min-height:240px;
  max-height:62vh;
  border:1px solid #d1dae8;
  border-radius:12px;
  background-color:#e9eff8;
  background-image:
    linear-gradient(45deg, rgba(152, 166, 187, 0.25) 25%, transparent 25%, transparent 75%, rgba(152, 166, 187, 0.25) 75%, rgba(152, 166, 187, 0.25)),
    linear-gradient(45deg, rgba(152, 166, 187, 0.25) 25%, transparent 25%, transparent 75%, rgba(152, 166, 187, 0.25) 75%, rgba(152, 166, 187, 0.25));
  background-size:22px 22px;
  background-position:0 0, 11px 11px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  padding:10px;
}
#stampCropCanvas{
  display:block;
  max-width:100%;
  height:auto;
  cursor:crosshair;
  touch-action:none;
  border-radius:8px;
  box-shadow:0 4px 14px rgba(15, 23, 42, 0.2);
  background:#ffffff;
}
.stampCropActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.sendProgress{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}
.sendProgressTrack{
  width:220px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(27,46,80,0.2), rgba(27,46,80,0.35));
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.15);
}
.sendProgressBar{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, #4e8cff, #7c8cff, #a78bfa);
  box-shadow:0 0 12px rgba(124,140,255,0.45);
  transition:width 0.2s ease;
}
.sendProgressText{
  font-size:12px;
  color:#51607a;
}
.panelTitle{
  font-weight:700;
  font-size:16px;
}
.mockupSideLabel{
  font-weight:400;
  font-size:13px;
  color:inherit;
  margin-left:6px;
}
.fieldGroup{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}
.fieldGroup:first-of-type{
  margin-top:0;
}
.fieldGroup.textBlock{
  margin-top:0;
}
.label{
  font-size:13px;
  font-weight:400;
  color:var(--muted);
}
.note{
  font-size:12px;
  color:var(--muted);
}
.labelRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:0;
  margin-top:8px;
}
.requiredTag{
  font-size:11px;
  color:#111111;
  font-weight:400;
  letter-spacing:0.02em;
}
.error{
  font-size:12px;
  color:#d64545;
}
input, textarea{
  width:100%;
  border:1px solid #8a8a8a;
  border-radius:12px;
  padding:9px 12px;
  font-size:14px;
  font-family:inherit;
}
textarea#customTextInput{
  border-radius:0;
}
textarea{
  resize:vertical;
}
.toggleRow{
  display:block;
}
.toggleOption{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  cursor:pointer;
  background:#f8fafc;
}
.colorGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:8px;
}
.colorCustom{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.colorCustom input[type="color"]{
  width:44px;
  height:36px;
  padding:0;
  border:none;
  background:none;
}
.colorInputRow{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  margin-top:3px;
}
.textToolCenter .label{
  text-align:center;
}
.colorInputRow input[type="color"]{
  width:44px;
  height:36px;
  padding:0;
  border:none;
  background:#fff;
}
.textSizeInput{
  max-width:90px;
}
.colorCustom input[type="text"]{
  flex:1;
  border:1px solid #8a8a8a;
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
}
#mockupUploadInput{
  width:100%;
}
.fieldGroup input[type="file"]{
  width:100%;
  color:transparent;
}
.fieldGroup input[type="file"]::file-selector-button{
  color:var(--text);
}
.fieldGroup select{
  width:100%;
  border:1px solid #8a8a8a;
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  background:#fff;
}
.textTools{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  align-items:end;
}
.textTools .fieldGroup{
  margin-top:0;
}
.colorBtn{
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 10px;
  background:#f8fafc;
  font-size:12px;
  cursor:pointer;
  text-align:center;
}
.colorBtn.active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(47,91,255,0.3);
}
.infoBox{
  background:#d9e0ea;
  border-radius:14px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border:1px solid #dbe3ff;
}
.infoBoxSpacer{
  height:8px;
}
.sectionDivider{
  height:1px;
  background:#b9c2cf;
  opacity:0.7;
  width:100%;
}
.configAccordion{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
}
.configAccordionToggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid #c4d0e7;
  border-radius:12px;
  background:linear-gradient(180deg, #eef4ff 0%, #e2eaf8 100%);
  color:#14213d;
  padding:11px 12px;
  cursor:pointer;
  text-align:left;
}
.configAccordionToggle:hover{
  border-color:#9cb2da;
  background:linear-gradient(180deg, #f5f9ff 0%, #e6efff 100%);
}
.configAccordionToggle:focus-visible{
  outline:2px solid #7c8cff;
  outline-offset:2px;
}
.configAccordionTitle{
  font-size:16px;
  font-weight:700;
}
.configAccordionIcon{
  width:38px;
  min-width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid #b7c7e4;
  background:#ffffff;
  color:#243a66;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  line-height:1;
  transition:transform 0.2s ease;
}
.configAccordionBody{
  display:none;
}
.configAccordion.isOpen .configAccordionBody{
  display:block;
}
.configAccordion.isOpen .configAccordionIcon{
  transform:rotate(180deg);
}
.warningTitle{
  font-weight:700;
}
.infoBox ul{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  font-size:13px;
}
.sizeInfo{
  font-size:13px;
  color:var(--muted);
}
.mockupStageWrap{
  background:#e8f1ff;
  border-radius:16px;
  padding:12px 12px 0;
  border:1px solid #d6e3f7;
  max-width:100%;
  overflow-x:hidden;
  position:relative;
  opacity:1;
  transform:translateZ(0) scale(1);
  filter:none;
  transition:opacity 0.16s ease, transform 0.18s ease, filter 0.18s ease;
  will-change:opacity, transform, filter;
}
.mockupStageWrap.sideSwitchAnimating{
  pointer-events:none;
}
.mockupStageWrap.sideSwitchOut{
  opacity:0;
  transform:scale(0.985);
  filter:blur(1px);
}
.mockupStageWrap.sideSwitchIn{
  opacity:1;
  transform:translateZ(0) scale(1);
  filter:none;
}
.mockupStage{
  position:relative;
  margin:0 auto;
  max-width:100%;
}
.stageTrashBtn{
  position:absolute;
  top:12px;
  right:12px;
  z-index:8;
  width:36px;
  height:36px;
  border:1px solid rgba(15, 23, 42, 0.35);
  background:rgba(255, 255, 255, 0.94);
  color:#000000;
  border-radius:8px;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(15, 23, 42, 0.12);
}
.stageTrashBtn.isVisible{
  display:inline-flex;
}
.stageTrashBtn:hover{
  background:#ffffff;
  border-color:rgba(15, 23, 42, 0.6);
  color:#000000;
}
.stageTrashBtn:disabled{
  opacity:0.45;
  box-shadow:none;
}
.mockupSidePreviews{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
  align-items:stretch;
}
.mockupSidePreview{
  border:1px solid #d6e3f7;
  border-radius:12px;
  background:#e8f1ff;
  padding:8px 8px 0;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:96px;
  align-items:center;
  justify-content:flex-start;
  position:relative;
  overflow:hidden;
  height:100%;
}
.mockupSideTitle{
  font-size:15px;
  font-weight:700;
  color:#2b3647;
  width:100%;
  text-align:center;
}
.mockupSidePreview img{
  width:63%;
  max-width:63%;
  height:auto;
  margin-top:0;
  margin-bottom:0;
  margin-left:auto;
  margin-right:auto;
  border-radius:10px;
  display:none;
}
.mockupSidePreview[data-side="back"] img{
  width:46%;
  max-width:46%;
}
.mockupSidePreview.hasPreview img{
  display:block;
  margin-top:auto;
}
.mockupSideEmpty{
  font-size:12px;
  color:#4a5568;
}
.mockupSidePreview.hasPreview .mockupSideEmpty{
  display:none;
}
.mockupTools{
  display:flex;
  justify-content:flex-end;
  margin-bottom:10px;
  gap:8px;
  flex-wrap:nowrap;
  align-items:center;
}
.mockupTools .btn.small{
  border:1px solid #b3c2de;
  background:linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
  color:#1d2a44;
  border-radius:10px;
  padding:7px 12px;
  min-height:36px;
  font-size:12px;
  font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 6px rgba(15,23,42,0.08);
}
.mockupTools .btn.small .btnIcon{
  fill:currentColor;
  margin-right:7px;
}
.mockupTools .btn.small:hover{
  background:linear-gradient(180deg, #ffffff 0%, #e4edff 100%);
  border-color:#8ea4cf;
  color:#1f3ac7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.85), 0 4px 10px rgba(15,23,42,0.12);
}
#mockupSideToggleBtn{
  color:#ffffff;
  font-weight:700;
  transition:transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
#mockupSideToggleBtn .btnIcon{
  fill:currentColor;
}
#mockupSideToggleBtn .btnLabel{
  color:inherit;
}
#mockupSideToggleBtn:not(.isBackTarget):not(.isFrontTarget){
  border-color:#2f5bff;
  background:linear-gradient(180deg, #4f74ff 0%, #2f5bff 100%);
  color:#ffffff;
  box-shadow:0 6px 14px rgba(47,91,255,0.26);
}
#mockupSideToggleBtn.isBackTarget{
  border-color:#2f5bff;
  background:linear-gradient(180deg, #4f74ff 0%, #2f5bff 100%);
  color:#ffffff;
  box-shadow:0 6px 14px rgba(47,91,255,0.26);
}
#mockupSideToggleBtn.isFrontTarget{
  border-color:#22335f;
  background:linear-gradient(180deg, #334b85 0%, #253a69 100%);
  color:#ffffff;
  box-shadow:0 6px 14px rgba(26,43,80,0.26);
}
#mockupSideToggleBtn:hover{
  filter:none;
  color:#ffffff;
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(31,58,199,0.34);
}
#mockupSideToggleBtn:active{
  transform:translateY(0);
}
#mockupSideToggleBtn:focus-visible{
  outline-color:#5f7dff;
}
#stampCropBtn.isDisabled{
  opacity:0.6;
  border-style:dashed;
}
#stampCropBtn.isDisabled:hover{
  border-color:#b3c2de;
  background:linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
  color:#1d2a44;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 6px rgba(15,23,42,0.08);
}
.mockupActionError{
  margin:-2px 0 10px;
  min-height:16px;
}
.stampScaleControls{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  margin-bottom:10px;
}
#areaLockDesktopBtn{
  display:inline-flex;
}
.controlAccordionToggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:0;
  background:transparent;
  padding:0;
  cursor:default;
}
.controlAccordionIcon{
  display:none;
  width:36px;
  min-width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  font-size:24px;
  line-height:1;
  color:var(--muted);
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#ffffff;
  transition:transform 0.2s ease;
}
.controlAccordionBody{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
}
.stampScaleLabel{
  font-size:16px;
  text-align:left;
  font-weight:600;
  margin-bottom:0;
  color:var(--muted);
}
.stampScaleTop{
  display:grid;
  grid-template-columns:40px minmax(0, 1fr) 40px;
  align-items:center;
  column-gap:10px;
  margin-top:10px;
}
.stampScaleBtn{
  width:40px;
  min-width:40px;
  padding:6px 0;
  font-size:16px;
  line-height:1;
}
#stampScaleDownBtn{
  justify-self:start;
}
#stampScaleUpBtn{
  justify-self:end;
}
#stampScaleRange{
  min-width:0;
  width:100%;
  border:0;
  padding:0;
  background:transparent;
  border-radius:0;
  -webkit-appearance:auto;
  appearance:auto;
  accent-color:#2f5bff;
}
.stampScaleValue{
  font-size:13px;
  color:var(--muted);
  text-align:center;
  justify-self:center;
}
.stampMinAlert{
  margin-top:10px;
  border:1px solid #dc2626;
  background:#fee2e2;
  color:#b91c1c;
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
  font-weight:700;
  text-align:center;
}
.stampMoveControls{
  display:none;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  margin-bottom:10px;
}
.stampMoveLabel{
  font-size:16px;
  text-align:left;
  font-weight:600;
  margin-bottom:0;
  color:var(--muted);
}
.stampMovePad{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:nowrap;
}
.stampMoveBtn{
  width:44px;
  min-width:44px;
  height:44px;
  padding:0;
  font-size:20px;
  font-weight:700;
  line-height:1;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.stampMoveCenter{
  display:none;
}
.areaScaleControls{
  display:none;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  margin-bottom:10px;
}
.areaScaleLabel{
  font-size:16px;
  text-align:left;
  font-weight:600;
  margin-bottom:0;
  color:var(--muted);
}
.areaLockIconBtn{
  display:none;
  align-self:flex-end;
  width:44px;
  min-width:44px;
  height:44px;
  border:1px solid #cbd5e1;
  background:#ffffff;
  color:#334155;
  border-radius:10px;
  padding:0;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.areaLockIcon{
  font-size:20px;
  line-height:1;
}
.areaLockIconBtn.isLocked{
  border-color:#94a3b8;
  background:#e2e8f0;
}
#areaLockDesktopBtn.active{
  background:#e2e8f0;
}
.areaScaleTop{
  display:grid;
  grid-template-columns:40px minmax(0, 1fr) 40px;
  align-items:center;
  column-gap:10px;
  margin-top:10px;
}
.areaScaleBtn{
  width:40px;
  min-width:40px;
  padding:6px 0;
  font-size:16px;
  line-height:1;
}
#areaScaleRange{
  min-width:0;
  width:100%;
  border:0;
  padding:0;
  background:transparent;
  border-radius:0;
  -webkit-appearance:auto;
  appearance:auto;
  accent-color:#2f5bff;
}
.areaScaleValue{
  font-size:13px;
  color:var(--muted);
  text-align:center;
  justify-self:center;
}
.mockupHint{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}
.mockupNotice{
  margin-top:12px;
  color:#0f172a;
  line-height:1.4;
  padding:10px 12px;
  border:1px solid #c7d2fe;
  border-left:4px solid #6366f1;
  border-radius:12px;
  background:#eef2ff;
}
.mockupNoticeTitle{
  font-size:13px;
  font-weight:700;
  color:#1e293b;
  margin-bottom:4px;
}
.mockupNoticeText{
  font-size:12.5px;
  font-weight:400;
}
.mockupPriceNote{
  margin-top:6px;
  font-size:12px;
  color:var(--text);
  line-height:1.4;
}
.opacityControl{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
}
.opacityPanel{
  display:none;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  position:absolute;
  top:100%;
  right:0;
  margin-top:6px;
  z-index:5;
  box-shadow:0 8px 18px rgba(15, 23, 42, 0.12);
}
.opacityPanel.show{
  display:flex;
}
#stampOpacityRange{
  width:120px;
}
#stampOpacityValue{
  font-size:12px;
  color:var(--muted);
  min-width:42px;
  text-align:right;
}
#stampUploadInput{
  flex:0 0 auto;
}
#areaAdjustToggle.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
#mockupImg{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  position:relative;
  z-index:1;
  pointer-events:none;
}
.mockupStageWrap,
.mockupStage,
#mockupImg,
.printArea,
#printArea img{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
#mockupImg,
#printArea img{
  -webkit-user-drag:none;
}
.printArea{
  position:absolute;
  --print-area-border: rgba(0,0,0,0.6);
  --print-area-handle: #2f5bff;
  --print-area-handle-shadow: rgba(15, 23, 42, 0.22);
  border:2px dashed var(--print-area-border);
  background:rgba(47,91,255,0.08);
  overflow:hidden;
  cursor:move;
  touch-action:none;
  z-index:2;
  pointer-events:auto;
}
.printAreaInsertHint{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:calc(100% - 24px);
  max-width:300px;
  text-align:center;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:0.01em;
  pointer-events:none;
  user-select:none;
  text-shadow:0 1px 2px rgba(255,255,255,0.35);
  opacity:0.95;
}
.printArea.isHidden{
  border-color:transparent;
  background:transparent;
  pointer-events:none;
}
.printArea.isHidden .areaHandle{
  display:none !important;
}
.printArea.isDragOver{
  border-color:var(--print-area-border);
  background:rgba(47,91,255,0.16);
}
.printArea.isAdjusting{
  border-style:solid;
}
#printArea img{
  position:absolute;
  top:0;
  left:0;
  display:none;
  cursor:grab;
  user-select:none;
  touch-action:none;
}
#stampText{
  position:absolute;
  left:50%;
  top:30%;
  transform:translate(-50%, -50%);
  color:#000000;
  font-family:Arial, sans-serif;
  font-size:32px;
  font-weight:400;
  text-align:center;
  white-space:pre-line;
  max-width:80%;
  pointer-events:auto;
  user-select:none;
  cursor:grab;
}
#stampText:active{
  cursor:grabbing;
}
.printArea.isAdjusting #stampImg{
  pointer-events:auto;
}
#printArea img:active{
  cursor:grabbing;
}
.resizeHandle{
  position:absolute;
  width:16px;
  height:16px;
  right:4px;
  bottom:4px;
  background:#2f5bff;
  border-radius:4px;
  cursor:se-resize;
  display:none;
}
.areaHandle{
  position:absolute;
  width:12px;
  height:12px;
  background:var(--print-area-handle);
  box-shadow:0 0 0 1px var(--print-area-handle-shadow);
  border-radius:3px;
  display:none;
}
.printArea.isAdjusting .areaHandle{
  display:block;
}
.handle-nw{
  top:-6px;
  left:-6px;
  cursor:nwse-resize;
}
.handle-ne{
  top:-6px;
  right:-6px;
  cursor:nesw-resize;
}
.handle-n{
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  cursor:ns-resize;
}
.handle-sw{
  bottom:-6px;
  left:-6px;
  cursor:nesw-resize;
}
.handle-se{
  bottom:-6px;
  right:-6px;
  cursor:nwse-resize;
}
.handle-s{
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
  cursor:ns-resize;
}
.btn{
  border:1px solid #1a1a1a;
  background:#f8fafc;
  color:var(--text);
  border-radius:0;
  padding:8px 14px;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover{
  background:#eef3ff;
  border-color:#9aa7bf;
  color:#1f3ac7;
  box-shadow:0 0 0 2px rgba(31, 58, 199, 0.08);
}
.btn:active{
  transform:translateY(1px);
}
.btn:focus-visible{
  outline:2px solid #7c8cff;
  outline-offset:2px;
}
.btnIcon{
  width:16px;
  height:16px;
  fill:#000000;
  margin-right:6px;
  flex:0 0 auto;
}
.btn.primary{
  background:var(--accent);
  border-color:#c7c7c7;
  color:#fff;
}
.personalizacaoBody #submitPersonalizacaoBtn{
  border:1px solid #2f5bff;
  background:linear-gradient(180deg, #4f74ff 0%, #2f5bff 100%);
  border-color:#2f5bff;
  color:#fff;
  border-radius:10px;
  min-height:42px;
  font-size:14px;
  font-weight:700;
  padding:10px 16px;
  box-shadow:0 8px 16px rgba(47,91,255,0.28);
}
.personalizacaoBody #submitPersonalizacaoBtn .btnIcon{
  fill:currentColor;
}
.personalizacaoBody #submitPersonalizacaoBtn:hover{
  background:linear-gradient(180deg, #5f7fff 0%, #3057df 100%);
  border-color:#2345c6;
  color:#ffffff;
  box-shadow:0 10px 20px rgba(47,91,255,0.34);
}
.btn.primary:hover{
  background:var(--accent-dark);
}
.btn.small{
  padding:6px 10px;
  font-size:12px;
}
.fileRow{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}
.fileRow > *{
  min-width:0;
}
.fileInputHidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  border:0;
}
.fileText{
  flex:1;
  min-width:0;
  background:#fff;
  cursor:default;
  border:none;
  padding-left:6px;
  padding-right:6px;
}
.fileRow .iconBtn{
  flex:0 0 auto;
}
.iconBtn{
  width:36px;
  height:36px;
  border-radius:0;
  border:none;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#000000;
}
.iconBtn.isDisabled,
.iconBtn:disabled{
  opacity:0.5;
  cursor:not-allowed;
  background:transparent;
}
.trashIconBtn.isDisabled,
.trashIconBtn:disabled{
  opacity:1;
}
.iconBtn svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
#stampClearBtn{
  border:none;
}
#stampClearBtn svg{
  fill:currentColor;
}
#customFontClearBtn{
  border:none;
}
#customFontClearBtn svg{
  fill:currentColor;
}
.iconBtn.isDisabled svg,
.iconBtn:disabled svg{
  fill:currentColor;
}
.iconBtn:hover svg{
  fill:currentColor;
}
.iconBtn.isDisabled:hover svg,
.iconBtn:disabled:hover svg{
  fill:currentColor;
}
#stampClearBtn,
#customFontClearBtn{
  border:none;
  background:transparent;
  color:#000000;
}
.formActions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}
.formMessage{
  font-size:13px;
}
.formNote{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
.formGrid{
  row-gap:8px;
  column-gap:20px;
}
.dragHint{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  text-align:center;
}
.debugInfo{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}
@media (max-width: 900px){
  .personalizacaoGrid{
    grid-template-columns:1fr;
  }
  #configPanel > *{
    order:10;
  }
  #configPanel > .panelTitle{
    order:0;
  }
  #configPanel > #colorGroup{
    order:1;
  }
  #configPanel > #sizeGroup{
    order:2;
  }
  #mockupPanel{
    order:1;
  }
  #configPanel{
    order:2;
  }
  #customerPanel{
    order:3;
  }
  .personalizacaoHeader{
    flex-direction:column;
  }
  .personalizacaoShell{
    padding:72px 16px 48px;
  }
  .personalizacaoPanel{
    padding:16px;
  }
  .mockupStageWrap{
    padding:10px 10px 0;
  }
  .mockupTools{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    justify-content:stretch;
    align-items:stretch;
  }
  .mockupTools .btn.small{
    width:100%;
    justify-content:center;
  }
  #mobileAreaToggleBtn{
    order:1;
  }
  #mockupSideToggleBtn{
    order:2;
  }
  #insertStampToolbarBtn{
    order:3;
  }
  #stampCropBtn{
    order:4;
  }
  #duplicateStampBtn{
    order:5;
  }
  .mockupSidePreviews{
    display:none;
  }
  .stampScaleTop,
  .areaScaleTop{
    grid-template-columns:52px minmax(0, 1fr) 52px;
    column-gap:12px;
  }
  .stampScaleBtn,
  .areaScaleBtn{
    width:52px;
    min-width:52px;
    height:52px;
    font-size:22px;
  }
  .stampMovePad{
    justify-content:center;
    gap:10px;
  }
  .stampMoveBtn{
    width:52px;
    min-width:52px;
    height:52px;
    font-size:22px;
  }
  #areaLockDesktopBtn{
    display:none;
  }
  .areaLockIconBtn{
    display:inline-flex;
    margin-bottom:10px;
  }
  .controlAccordionToggle{
    cursor:pointer;
    border:1px solid #d1dae8;
    background:#f8fafc;
    border-radius:10px;
    padding:12px 14px;
  }
  .controlAccordionIcon{
    display:inline-flex;
  }
  .controlAccordion > .controlAccordionBody{
    display:none;
    margin-top:10px;
  }
  .controlAccordion.isOpen .controlAccordionIcon{
    transform:rotate(180deg);
  }
  .controlAccordion.isOpen > .controlAccordionBody{
    display:flex;
  }
  .stampScaleBtn,
  .areaScaleBtn,
  .stampMoveBtn{
    touch-action:manipulation;
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  #stampScaleRange,
  #areaScaleRange{
    height:44px;
    -webkit-appearance:none;
    appearance:none;
    touch-action:pan-x;
    -webkit-tap-highlight-color:transparent;
  }
  #stampScaleRange::-webkit-slider-runnable-track,
  #areaScaleRange::-webkit-slider-runnable-track{
    height:10px;
    border-radius:999px;
    background:#d6dfef;
  }
  #stampScaleRange::-webkit-slider-thumb,
  #areaScaleRange::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:34px;
    height:34px;
    margin-top:-12px;
    border-radius:50%;
    border:2px solid #ffffff;
    background:#2f5bff;
    box-shadow:0 2px 8px rgba(15, 23, 42, 0.35);
  }
  #stampScaleRange::-moz-range-track,
  #areaScaleRange::-moz-range-track{
    height:10px;
    border-radius:999px;
    border:0;
    background:#d6dfef;
  }
  #stampScaleRange::-moz-range-thumb,
  #areaScaleRange::-moz-range-thumb{
    width:34px;
    height:34px;
    border-radius:50%;
    border:2px solid #ffffff;
    background:#2f5bff;
    box-shadow:0 2px 8px rgba(15, 23, 42, 0.35);
  }
  .printArea.isAdjusting .areaHandle{
    display:none;
  }
}
@media (max-width: 768px){
  .personalizacaoHeader{
    align-items:flex-start;
    text-align:left;
  }
  .personalizacaoHeader > div{
    width:100%;
  }
  .personalizacaoHeaderContent{
    border-radius:12px;
    padding:10px 12px 12px;
  }
  .personalizacaoHeader h1{
    text-align:left;
    font-size:30px;
  }
  .personalizacaoHeader p{
    text-align:left;
    font-size:15px;
  }
  .personalizacaoPanel{
    align-items:stretch;
    text-align:left;
  }
  .personalizacaoPanel > *{
    width:100%;
  }
  .panelTitle,
  .fieldSubtitle,
  .label,
  .note,
  .fileText,
  .formNote,
  .warningTitle,
  .sizeInfo,
  .mockupHint,
  .mockupPriceNote,
  .mockupNoticeTitle,
  .mockupNoticeText{
    text-align:left;
  }
  .labelRow{
    justify-content:flex-start;
  }
  #customerPanel .labelRow{
    justify-content:space-between;
    align-items:center;
  }
  #customerPanel .requiredTag{
    margin-left:auto;
    text-align:right;
  }
  .personalizacaoPanel ul{
    list-style-position:outside;
    padding-left:20px;
    text-align:left;
  }
  .personalizacaoPanel input,
  .personalizacaoPanel textarea,
  .personalizacaoPanel select{
    text-align:left;
  }
  .fileRow{
    justify-content:flex-start;
    align-items:center;
  }
  .textTools{
    justify-items:stretch;
  }
  .personalizacaoTopbar{
    height:auto;
    padding:8px 14px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:"logo social back";
    align-items:center;
    column-gap:12px;
    row-gap:0;
  }
  .personalizacaoShell{
    padding-top:calc(84px + env(safe-area-inset-top));
  }
  .topbarLogo{
    min-width:0;
    grid-area:logo;
  }
  .topbarSocials{
    grid-area:social;
    justify-content:center;
    justify-self:center;
    width:auto;
    flex:0 0 auto;
    gap:12px;
  }
  .storeBackBtn.storeBackBtnTop{
    grid-area:back;
    margin-left:0;
    margin-right:0;
    justify-self:end;
  }
  .personalizacaoHeader h1{
    font-size:28px;
  }
  .personalizacaoHeader p{
    font-size:16px;
  }
  .panelTitle{
    font-size:18px;
  }
  .fieldSubtitle{
    font-size:16px;
  }
  .label{
    font-size:15px;
  }
  .note{
    font-size:14px;
    line-height:1.45;
  }
  .requiredTag{
    font-size:12px;
  }
  input, textarea, select{
    font-size:16px;
  }
  .btn{
    font-size:15px;
  }
  .btn.small{
    font-size:14px;
  }
  .storeBackBtn{
    font-size:15px;
  }
  .textTools{
    grid-template-columns:1fr;
  }
  .textToolCenter .label{
    text-align:left;
  }
  .fileRow{
    flex-wrap:wrap;
  }
  .fileRow .btn.small{
    flex:1 1 auto;
    justify-content:center;
  }
  .fileRow .iconBtn{
    order:2;
  }
  .fileRow .fileText{
    order:3;
    flex:1 1 100%;
  }
  .mockupSidePreviews{
    grid-template-columns:1fr;
  }
  .mockupStageWrap{
    padding:8px 8px 0;
  }
  .mockupStage{
    overflow:hidden;
  }
  #mockupImg{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    margin:0 auto;
    width:100%;
    height:auto;
  }
  .formActions{
    flex-direction:column;
    align-items:stretch;
  }
  .formActions .btn{
    width:100%;
    justify-content:center;
  }
  .sendProgress{
    width:100%;
  }
  .sendProgressTrack{
    width:100%;
  }
  .personalizacaoPopup{
    text-align:center;
    align-items:center;
  }
  .personalizacaoPopup .popupActions{
    justify-content:center;
  }
  .stampCropHeader,
  .stampCropHint{
    text-align:center;
  }
}
@media (max-width: 640px){
  .mockupTools{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    justify-content:stretch;
  }
  .stampScaleControls{
    gap:0;
  }
  .stampScaleTop{
    grid-template-columns:50px minmax(0, 1fr) 50px;
  }
  .stampScaleBtn{
    width:50px;
    min-width:50px;
    height:50px;
  }
  .stampMovePad{
    gap:8px;
  }
  .stampMoveBtn{
    width:50px;
    min-width:50px;
    height:50px;
  }
  .areaScaleControls{
    gap:0;
  }
  .areaScaleTop{
    grid-template-columns:50px minmax(0, 1fr) 50px;
  }
  .areaScaleBtn{
    width:50px;
    min-width:50px;
    height:50px;
  }
  .opacityPanel{
    position:static;
    margin-top:0;
    box-shadow:none;
  }
  .personalizacaoHeader h1{
    font-size:26px;
  }
  .personalizacaoHeader{
    margin-top:10px;
    margin-bottom:12px;
  }
  .personalizacaoHeaderContent{
    padding:10px 10px 12px;
  }
  .personalizacaoHeader p{
    font-size:14px;
  }
  .panelTitle{
    font-size:17px;
  }
  .mockupSideTitle{
    font-size:14px;
  }
  .mockupNotice{
    padding:10px;
  }
  .personalizacaoPopup{
    padding:18px;
  }
  .stampCropOverlay{
    padding:10px;
  }
  .stampCropModal{
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
    padding:12px;
    gap:10px;
  }
  .stampCropHeader h3{
    font-size:19px;
  }
  .stampCropHint{
    font-size:14px;
  }
  .stampCropCanvasWrap{
    min-height:200px;
    max-height:54vh;
    padding:8px;
  }
  .stampCropActions{
    justify-content:stretch;
  }
  .stampCropActions .btn{
    width:100%;
  }
}
@media (max-width: 520px){
  .personalizacaoShell{
    padding:calc(84px + env(safe-area-inset-top)) 12px 40px;
  }
  .personalizacaoTopbar{
    padding:8px 12px;
  }
  .topbarSocialBtn,
  .topbarSocialIcon{
    width:16px;
    height:16px;
  }
  .storeBackBtn{
    font-size:14px;
  }
  .mockupSidePreview{
    min-height:84px;
  }
  .personalizacaoPopup{
    max-width:100%;
  }
}

.fieldSubtitle{
  font-size:13px;
  font-weight:700 !important;
  color:#1f2937;
  margin-bottom:6px;
}
.textBlock.isDisabled{
  opacity:0.45;
  pointer-events:none;
}
.fieldGroup.isDisabled{
  opacity:0.45;
  pointer-events:none;
}

#colorGroup .label,
#sizeGroup .label{
  margin-bottom:6px;
}
#customerPanel{
  margin-top:16px;
}

#colorGroup .label,
#sizeGroup .label{
  margin-bottom:6px;
}
.fieldGroup.isDisabled{
  opacity:0.45;
  pointer-events:none;
}