:root{
  --workW: 100%;

  --bottomH: 30dvh;

  --bg:#f4f5f7;
  --panel:rgba(255,255,255,.78);
  --panelSolid:#ffffff;
  --panelSoft:#f8f9fb;
  --line:rgba(17,23,34,.08);
  --lineSoft:rgba(17,23,34,.05);
  --muted:#6b7280;
  --text:#15171a;
  --textSoft:#5f6773;
  --accent:#0a84ff;
  --select:#0a84ff;
  --accentSoft:rgba(10,132,255,.12);
  --radius:24px;
  --shadowCard:0 10px 30px rgba(15,23,42,.06);
  --shadowFloat:0 14px 34px rgba(15,23,42,.10);
  --blur:16px;
}

*{box-sizing:border-box}
html,body{height:100%; height:100dvh;
  margin:0;
  overflow:hidden;
}
body{
  margin:0;
  height:100dvh;
  overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.92), rgba(244,245,247,.96) 34%, #f1f3f6 100%);
  color:var(--text);
}

.app{
  width:100%;
  max-width:520px;
  margin:0 auto;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}

/* Utility */
.isHidden{ display:none !important; }

/* Top steps */
.top{
  padding:18px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Plan pill */
.planPill{
  margin-top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--lineSoft);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  box-shadow:var(--shadowCard);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(145%);
  backdrop-filter:blur(var(--blur)) saturate(145%);
}
.planLabel{
  font-weight:800;
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--textSoft);
}
.planLabel.isPro{ color:var(--accent); }
.planAction{
  border:1px solid var(--line);
  background:rgba(255,255,255,.82);
  color:var(--text);
  padding:9px 13px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(15,23,42,.05);
}
.planActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.planSubAction{
  border:1px solid var(--line);
  background:transparent;
  color:var(--textSoft);
  padding:9px 13px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  box-shadow:none;
}
.planSubAction:hover{
  background:rgba(255,255,255,.52);
}
.planSubAction.isHidden{
  display:none !important;
}
.planMeta{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding-left: 6px;
}

.planHelp{
  width:22px;
  height:22px;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:999px;
  background: rgba(17, 23, 32, .06);
  color: #6b7280;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  line-height:1;
}

.planHelp:hover{
  opacity:.8;
}

.planHelp:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(10,132,255,.22), 0 0 0 5px rgba(10,132,255,.10);
}
.stepTabs{
  display:flex;
  gap:6px;
  align-items:center;
  padding:6px;
  border:1px solid var(--lineSoft);
  border-radius:20px;
  background:rgba(255,255,255,.62);
  box-shadow:var(--shadowCard);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(145%);
  backdrop-filter:blur(var(--blur)) saturate(145%);
}
.stepTab{
  flex:1;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid transparent;
  background:transparent;
  color:#8f96a3;
  font-weight:700;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.stepTab.isActive{
  background:rgba(255,255,255,.96);
  color:var(--text);
  border-color:var(--lineSoft);
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}

/* Main layout */
.main{
  display:flex;
  gap:14px;
  padding:0 14px;
  flex:1;
  min-height:0;
  overflow:hidden;
}

/* Rail */
.rail{
  width:56px;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:6px;
  overflow-x:hidden;
  overflow-y:auto;
}
.railGroup{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.railBtn{
  width:56px;
  height:56px;
  border-radius:16px;
  border:1px solid var(--lineSoft);
  background:rgba(255,255,255,.70);
  display:grid;
  place-items:center;
  padding:7px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.railBtn img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.railBtn.isActive{
  border-color:rgba(10,132,255,.28);
  background:rgba(10,132,255,.10);
  box-shadow:0 0 0 1px rgba(10,132,255,.18) inset, 0 8px 20px rgba(10,132,255,.10);
}

/* Rail */
.layerBtn{
  width:56px;
  height:48px;
  border-radius:16px;
  border:1px solid var(--lineSoft);
  background:rgba(255,255,255,.70);
  display:grid;
  place-items:center;
  padding:7px;
  cursor:pointer;
  position:relative;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.layerBtn .layerBadge{
  position:absolute;
  left:7px;
  top:7px;
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(21,23,26,.88);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:800;
}
.layerBtn.isActive{
  border-color:rgba(10,132,255,.28);
  background:rgba(10,132,255,.10);
  box-shadow:0 0 0 1px rgba(10,132,255,.18) inset, 0 8px 20px rgba(10,132,255,.10);
}

.layerTextThumb{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:24px;
  color:var(--text);
  border:1.5px dashed rgba(17,23,34,.25);
  border-radius:12px;
}

/* Stage */
.stageWrap{
  position:relative;
  flex:1;
  min-height:0;
}

.stage{
  background:var(--panel);

  border-radius:28px;
  padding:16px;
  padding-bottom:78px;
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  overflow:hidden;
  box-shadow:var(--shadowCard);
  -webkit-backdrop-filter:blur(calc(var(--blur) + 2px)) saturate(145%);
  backdrop-filter:blur(calc(var(--blur) + 2px)) saturate(145%);
}

/* Finish button */
.fab{
  position:absolute;
  right:14px;
  top:14px;
  transform:none;
  min-width:74px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(17,23,34,.08);
  background:rgba(255,255,255,.82);
  color:var(--text);
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:6px;
  padding:0 14px;
  cursor:pointer;
  z-index:30;
  box-shadow:var(--shadowFloat);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.fabIcon{font-size:16px; line-height:1}
.fabText{font-size:12px; letter-spacing:0.04em}

/* Stage tools */
.stageTools{
  position:absolute;
  left:16px;
  top:16px;
  display:flex;
  gap:8px;
  z-index:31;
}
.fabMini{
  min-width:68px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(17,23,34,.08);
  background:rgba(255,255,255,.82);
  color:var(--text);
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:6px;
  padding:0 12px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.fabMini .fabIcon{font-size:16px}
.fabMini .fabText{font-size:12px;}

.work{
  flex:1;
  position:relative;
  width: var(--workW);
  margin: 0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:center;
  min-height:0;
}

/* Work area */
body.isDecoTab .work{
  transform: scale(0.8);
  transform-origin: center;
}

/* Frames */
.frame{
  border-radius:18px;
  aspect-ratio:4 / 5;
  position:relative;
  overflow:hidden;
  background:transparent;
  --cosmeScale: 1;
}


.baseFrame .layerSvg,
.baseFrame .layerTex,
.baseFrame .layerPng,
#pkgFrame > .layer,
#pkgUploadLayer{
  transform: scale(var(--cosmeScale));
  transform-origin: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}


/* Layers */
.layer{
  position:absolute;
  inset:0;
}
.layer img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}


/* Custom color */
.pkgTintLayer{
  background: transparent;
  mix-blend-mode: multiply;
  opacity: 0.85;
  pointer-events:none;
}
.variantChip.wheelChip{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  background: conic-gradient(from 0deg, #ff3b30, #ff9500, #ffcc00, #34c759, #0a84ff, #5e5ce6, #ff3b30);
  border:2px solid #fff;
  color:#222;
}

/* Layer order */
.layerSvg{ z-index: 1; pointer-events:auto; }
.layerTex{ z-index: 2; pointer-events:none; }
.layerPng{ z-index: 3; pointer-events:none; }

.layerProSvg{
  z-index: 4;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scale(var(--cosmeScale));
  transform-origin: center;
}


/* SVG sizing */
#baseSvgHost svg{
  width:100%;
  height:100%;
  display:block;
}

/* SVG editing */
#baseSvgHost.isEditable svg [id^="pan_"],
#baseSvgHost.isEditable svg [id^="pan_"] *,
#baseSvgHost.isEditable svg [id^="pan"],
#baseSvgHost.isEditable svg [id^="pan"] *{
  cursor:pointer;
}

/* Loading state */
.baseFrame.isLoading{ opacity:0; }
.baseFrame{ transition: opacity .12s ease; }

/* Color variants */
.variantBar{
  position:absolute;
  left:16px;
  right:16px;
  bottom:10px;
  z-index:20;

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;

  padding:10px 14px;

  border-radius:18px;
  background:rgba(255,255,255,.76);
  border:1px solid var(--lineSoft);
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  pointer-events: none;
}


.variantBar.isHidden{
  display:none !important;
}

/* Color variants */
.variantBar *{ pointer-events:auto; }


.variantChip.zoomChip{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(17,23,34,.08);
  color:var(--text);
}
.variantChip.zoomChip span{ font-weight:800; }

.variantChip{
  width:32px;
  height:32px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 0 0 1px rgba(17,23,34,.12), 0 6px 16px rgba(15,23,42,.08);
  cursor:pointer;
  padding:0;
  background:#fff;
}
.variantChip.isActive{
  box-shadow:0 0 0 1px rgba(10,132,255,.24), 0 0 0 4px rgba(10,132,255,.18), 0 8px 18px rgba(10,132,255,.14);
}

/* Bottom panel */
.bottom{
  flex:0 0 var(--bottomH);
  height:var(--bottomH);
  max-height:var(--bottomH);
  width:100%;
  background:rgba(248,249,251,.88);
  border-top:1px solid var(--lineSoft);
  border-left:1px solid rgba(255,255,255,.40);
  border-right:1px solid rgba(255,255,255,.40);
  border-radius:24px 24px 0 0;
  padding:12px 12px 0;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  overflow-x:hidden;
  overflow-y:auto;
  box-shadow:0 -8px 24px rgba(15,23,42,.04);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
}

.seg{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:8px 0 6px;
  color:var(--textSoft);
  background:rgba(255,255,255,.62);
  border:1px solid var(--lineSoft);
  border-radius:18px;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}
.segBtn{
  border:1px solid transparent;
  background:transparent;
  font-size:15px;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  color:#7d8592;
  font-weight:700;
}
.segBtn.isActive{
  background:rgba(255,255,255,.96);
  color:var(--text);
  border-color:var(--lineSoft);
  box-shadow:0 6px 16px rgba(15,23,42,.06);
}
.seg2{
  justify-content:center;
  gap:8px;
  padding-top:0;
}

/* Grid */
.grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
  padding:12px 0 6px;
}
.thumbBtn{
  background:rgba(255,255,255,.92);
  border:1px solid var(--lineSoft);
  border-radius:16px;
  padding:8px;
  cursor:pointer;
  position:relative;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}
.thumbBtn.isActive{
  border-color:rgba(10,132,255,.24);
  box-shadow:0 0 0 1.5px rgba(10,132,255,.30), 0 8px 18px rgba(10,132,255,.08);
}
.thumbBtn img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  display:block;
}
.badgeC{
  position:absolute;
  right:-6px;
  top:-6px;
  width:28px;
  height:28px;
  border-radius:999px;
  background:#f3cc4b;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#222;
  border:2px solid #fff;
  font-size:14px;
}

/* Color input */
.colorPicker{
  position:fixed;
  left:12px;
  bottom:12px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* Hint */
.hint{
  margin-top:10px;
  font-size:12px;
  color:var(--textSoft);
  text-align:center;
  display:none;
}
.hint.isShow{ display:block; }


.bottom.isColorMode .segBtn[data-scope="texture"]{

  color:#333;
}

/* Texture overlay */
#texSvgHost{
  position:absolute;
  inset:0;
  pointer-events:none;
}
#texSvgHost svg{
  width:100%;
  height:100%;
  display:block;
}
.textureClearBtn{
  display:flex;
  align-items:center;
  justify-content:center;
}

.textureClearBtn span{
  width:100%;
  aspect-ratio:1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:26px;
  font-weight:800;
  line-height:1;
  color:var(--textSoft);
  background:rgba(255,255,255,.72);
}

.textureClearBtn.isActive span{
  color:var(--accent);
  background:rgba(10,132,255,.08);
}

/* Stage */
.decoUi{

  display:flex;
  flex-direction:column;
  gap:12px;
}

.decoTopTools{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.decoTool{
  flex:0 0 auto;
  border:none;
  background:#f0f0f0;
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  border:1px solid var(--line);
}
.decoTool .ico{ font-size:18px; }
.decoTool .txt{ font-weight:800; font-size:13px; color:#444; }

.decoXformRow{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.xbtn{
  width:50px;
  height:52px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#f0f0f0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  font-weight:900;
}
.xbtn small{
  font-size:10px;
  font-weight:800;
  color:#555;
}

.scaleWrap{
  flex:1;
  min-width:170px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 6px;
}
.scaleWrap small{
  font-size:11px;
  color:#555;
  font-weight:800;
}
.scaleWrap input{ flex:1; }

.decoColorRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  padding:8px 10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
}

.decoColorRow .chip{
  width:30px;
  height:30px;
  border-radius:999px;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
  cursor:pointer;
  padding:0;
}
.decoColorRow .chip.isActive{
  box-shadow:0 0 0 3px var(--select);
}

.decoColorRow .wheel{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.2);
  overflow:hidden;
  display:grid;
  place-items:center;
}
.decoColorRow .wheel input{
  width:40px;
  height:40px;
  border:none;
  padding:0;
  background:transparent;
  cursor:pointer;
}

/* Bottom panel */


.decoModeSeg{
  display:flex;
  justify-content:center;
  gap:14px;
  padding:12px 0 6px;
}
.decoModeBtn{
  border:none;
  background:transparent;
  font-size:16px;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  color:#777;
}
.decoModeBtn.isActive{
  background:#cfcfcf;
  color:#333;
}

.decoSearchRow{ padding:10px 0 6px; }
.decoSearchInput{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  font-size:14px;
  outline:none;
}

.decoCats{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 0 2px;
}
.decoCat{
  border:none;
  background:transparent;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  color:#777;
}
.decoCat.isActive{
  background:#cfcfcf;
  color:#333;
}

/* Deco layer */

.decoStageLayer{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:auto;
  touch-action:none;
}

.decoLayer{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:auto;
}

/* Package upload layer */
.pkgUploadLayer{
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:auto;
}
.pkgUploadItem{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  cursor:grab;
  user-select:none;
  touch-action:none;
  border-radius:10px;
}
.pkgUploadItem:active{ cursor:grabbing; }
.pkgUploadItem img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
}
.pkgUploadItem.isSelected{
  outline:2px solid rgba(10,132,255,.55);
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(10,132,255,.10);
}



/* Main layout */
.pkgUploadUi{
  width:100%;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  justify-items:center;
  gap:10px;
  max-height: calc(var(--bottomH) - 90px);
}


.pkgUploadUi{
  --big: clamp(78px, 22vw, 100px);
  --mini: clamp(44px, 12vw, 56px);

  --padH: calc(var(--mini) * 2 + 10px);
  --padW: calc(var(--padH) + 14px);
  --gap: 8px;
}


.pkgUploadSquareBig{
  height:var(--big);
  width:var(--big);
  border:1px solid rgba(17,23,34,.08);
  border-radius:20px;
  background:rgba(255,255,255,.88);
  color:var(--text);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  position:relative;
  overflow:hidden;
}
.pkgUploadSquareBig:active{ transform:translateY(1px); }

.pkgUploadBigIcon{
  font-size:30px;
  line-height:1;
}
.pkgUploadBigText{
  font-size:12px;
  font-weight:900;
  line-height:1.1;
  text-align:center;
}
.pkgUploadTrashIcon{
  font-size:30px;
  line-height:1;
}

/* Main layout */
.pkgUploadMid{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-width:0;
}


.pkgUploadZoomCol{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.pkgUploadMiniSquare{
  width:var(--mini);
  height:var(--mini);
  border-radius:16px;
  border:1px solid var(--lineSoft);
  background:rgba(255,255,255,.92);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-weight:900;
}
.pkgUploadMiniSquare small{
  font-size:12px;
  font-weight:900;
  color:#333;
}
.pkgUploadMiniSign{
  font-size:20px;
  line-height:1;
  font-weight:900;
}

/* Main layout */
.pkgUploadDpad{
  width:var(--padW);
  height:var(--padH);
  display:grid;
  grid-template-columns: 1fr 0.85fr 1fr;
  grid-template-rows: 1fr 0.85fr 1fr;
  gap:6px;
  align-items:center;
  justify-items:center;
}
.pkgUploadDpadBtn{
  width:100%;
  height:100%;
  border-radius:14px;
  border:1px solid var(--lineSoft);
  background:rgba(255,255,255,.92);
  cursor:pointer;
  font-size:24px;
  font-weight:900;
  color:#111;
  line-height:1;
}
.pkgUploadDpadBtn:active{ transform:translateY(1px); }

#pkgUploadRotateLeft{ grid-column:1; grid-row:2; }
#pkgUploadRotateRight{ grid-column:3; grid-row:2; }


#pkgUploadBtn
.pkgUploadBtn{ all:unset; }
.pkgUploadBtn.sub{ all:unset; }

.pkgUploadSquareBig:disabled,
.pkgUploadMiniSquare:disabled,
.pkgUploadDpadBtn:disabled{
  opacity:0.55;
  cursor:not-allowed;
}

/* Toast and modal */
.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(var(--bottomPad, 260px) + 14px);
  z-index:80;
  background:rgba(21,23,26,.84);
  color:#fff;
  padding:11px 14px;
  border-radius:16px;
  font-size:13px;
  font-weight:800;
  max-width:min(520px, calc(100% - 24px));
  text-align:center;
  box-shadow:var(--shadowFloat);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.modalOverlay{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(15,23,42,.16);
  display:grid;
  place-items:center;
  padding:18px;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.modal{
  width:min(520px, 100%);
  background:rgba(255,255,255,.90);
  border-radius:24px;
  border:1px solid var(--lineSoft);
  padding:18px;
  box-shadow:var(--shadowFloat);
}
.modal h3{ margin: 0 auto 6px; font-size:16px; color:var(--text); }
.modal p{ margin:0 0 12px; color:var(--textSoft); font-size:13px; line-height:1.45; text-align: center; }
.modalActions{ display:flex; gap:10px; justify-content:flex-end; }
.btn{
  border:1px solid rgba(17,23,34,.08);
  border-radius:16px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
.btn.primary{ background:rgba(21,23,26,.92); color:#fff; }
.btn.ghost{ background:rgba(255,255,255,.94); color:var(--text); }

/* Deco items */
.decoItem{
  position:absolute;
  width:50px;
  height:50px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  cursor:grab;
  user-select:none;
  touch-action:none;
}
.decoItem:active{ cursor:grabbing; }
.decoItem img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
}


.decoItem.isText{
  width:max-content;
  height:max-content;
}
.decoItem.isSelected{
  outline:2px solid rgba(10,132,255,.55);
  outline-offset:2px;
  border-radius:14px;
  box-shadow:0 0 0 6px rgba(10,132,255,.10);
}

/* Small screens */
@media (max-width: 390px){
  .main{ padding:0 10px; gap:10px; }

  .stage{
    padding:14px;
    padding-bottom:104px;
    min-height:0;
  }

  .variantBar{
    left:12px;
    right:12px;
    padding:6px 10px;
    gap:6px;
  }

  .variantChip{
    width:24px;
    height:24px;
  }
  .variantChip.isActive{
    box-shadow:0 0 0 2px var(--select);
  }

  .rail{ width:52px; gap:6px; }
  .railBtn, .layerBtn{ width:52px; height:52px; }

  .xbtn{ width:52px; height:52px; }
}
/* Deco side controls */
.decoTopTools{
  display:flex;
  flex-direction:column;
  gap:6px;
}


.decoTool{
  width:50px;
  height:52px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#f0f0f0;
  cursor:pointer;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;

  padding:0;
}

.decoTool .ico{
  font-size:16px;
  line-height:1;
}
.decoTool .txt{
  font-weight:800;
  font-size:10px;
  color:#555;
}


/* Vertical slider */
.scaleWrapV{
  width:50px;
  height:220px;
  padding:8px 0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}

.scaleWrapV small{
  font-size:11px;
  font-weight:800;
  color:#555;
}


.scaleWrapV input[type="range"]{
  width:180px;
  height:28px;

  transform: rotate(-90deg);
  transform-origin: center;


  touch-action:none;
}

/* Text panel */
.textPanel{
  padding:10px 0 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.textRow{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.textInput{
  flex:1;
  min-width:0;
  border:1px solid var(--lineSoft);
  border-radius:14px;
  padding:12px 14px;
  font-size:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 6px 16px rgba(15,23,42,.04) inset;
}
.textBtn{
  border:1px solid rgba(17,23,34,.08);
  background:rgba(255,255,255,.92);
  color:var(--text);
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.textSelect{
  flex:1;
  border:1px solid var(--lineSoft);
  border-radius:14px;
  padding:12px 12px;
  font-size:16px;
  background:rgba(255,255,255,.92);
}
.textHint{
  text-align:center;
  font-size:12px;
  color:var(--textSoft);
}

.textDirSeg{
  flex:1;
  display:flex;
  gap:10px;
  justify-content:center;
}
.textDirBtn{
  flex:1;
  border:1px solid var(--line);
  background:#fff;
  color:#333;
  border-radius:999px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
}
.textDirBtn.isActive{
  background:#2b2b2b;
  color:#fff;
  border-color:#2b2b2b;
}


/* Image panel */
.decoImagePanel{
  padding:10px 0 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.decoUploadBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.decoUploadIcon{
  font-size:18px;
  line-height:1;
}
.decoUploadHint{
  text-align:center;
  font-size:12px;
  color:#666;
}

/* Text deco */
.decoText{
  padding:0;
  margin:0;
  background:transparent;
  border:none;
  border-radius:0;
  display:inline-block;
  width:max-content;
  max-width:none;
  white-space:pre;
  user-select:none;
  pointer-events:none;
}
.decoText.isVertical{
  writing-mode: vertical-rl;
  text-orientation: upright;
}


.layerPng, .layerPng img,
.layerTex, .layerTex img,
#baseTex, #basePng {
  pointer-events: none;
}
#pkgTintLayer{  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}

#pkgUploadBtn{ width: calc(var(--big) + 18px); }
#pkgUploadClear{ width: calc(var(--big) - 18px); }

/* Deco tab layout */


.frame{
  border-radius: 0 !important;
}

/* Work area */
body.isDecoTab .work{

  transform: translateY(clamp(30px, 4vh, 56px)) scale(0.60) !important;


}

@media (max-width: 480px){
  body.isDecoTab .work{
    transform: translateY(clamp(50px, 7vh, 90px)) scale(0.60) !important;
  }
}


body.isDecoTab .baseFrame .layerSvg,
body.isDecoTab .baseFrame .layerTex,
body.isDecoTab .baseFrame .layerPng,
body.isDecoTab #pkgFrame > .layer,
body.isDecoTab #pkgUploadLayer,
body.isDecoTab .layerProSvg{
  transform: none !important;
  transform-origin: center !important;
}


body.isDecoTab .stageTools{
  top: 14px !important;
  left: 14px !important;
  gap: 10px !important;
}
body.isDecoTab .fabMini{
  width: auto !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  flex-direction: row !important;
  gap: 6px !important;
}
body.isDecoTab .fabMini .fabIcon{ font-size: 18px !important; }
body.isDecoTab .fabMini .fabText{ font-size: 12px !important;}


.stageWrap{ min-width: 0; }

/* Finish button */
@media (hover: none) and (pointer: coarse) and (max-width: 640px){

}

/* Visual overrides */
.decoTool{
  border:1px solid var(--lineSoft);
  background:rgba(255,255,255,.86);
  border-radius:16px;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.decoTool .txt{ color:var(--textSoft); }

.xbtn{
  width:52px;
  height:52px;
  border-radius:16px;
  border:1px solid var(--lineSoft);
  background:rgba(255,255,255,.86);
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.xbtn small{ color:var(--textSoft); }

.decoColorRow{
  background:rgba(255,255,255,.70);
  border:1px solid var(--lineSoft);
  border-radius:18px;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.decoColorRow .chip{
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 0 0 1px rgba(17,23,34,.12), 0 6px 16px rgba(15,23,42,.08);
}
.decoColorRow .chip.isActive{
  box-shadow:0 0 0 1px rgba(10,132,255,.24), 0 0 0 4px rgba(10,132,255,.18), 0 8px 18px rgba(10,132,255,.14);
}
.decoColorRow .wheel{
  border:1px solid var(--lineSoft);
  background:rgba(255,255,255,.92);
  box-shadow:0 6px 16px rgba(15,23,42,.08);
}

.decoModeSeg{
  gap:8px;
  padding:10px 0 4px;
  background:rgba(255,255,255,.62);
  border:1px solid var(--lineSoft);
  border-radius:18px;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}
.decoModeBtn{
  border:1px solid transparent;
  background:transparent;
  font-size:15px;
  padding:10px 14px;
  color:#7d8592;
  font-weight:700;
}
.decoModeBtn.isActive{
  background:rgba(255,255,255,.96);
  color:var(--text);
  border-color:rgba(10,132,255,.24);
  box-shadow:0 0 0 1px rgba(10,132,255,.18) inset, 0 8px 18px rgba(10,132,255,.08);
}

.decoSearchInput{
  border:1px solid var(--lineSoft);
  background:rgba(255,255,255,.92);
  box-shadow:0 6px 16px rgba(15,23,42,.04) inset;
}
.decoCat{
  border:1px solid transparent;
  color:#7d8592;
  font-weight:700;
}
.decoCat.isActive{
  background:rgba(255,255,255,.96);
  color:var(--text);
  border:1px solid rgba(10,132,255,.24);
  box-shadow:0 0 0 1px rgba(10,132,255,.18) inset, 0 8px 18px rgba(10,132,255,.08);
}

.textDirBtn{
  flex:1;
  border:1px solid var(--lineSoft);
  background:rgba(255,255,255,.92);
  color:#7d8592;
  border-radius:999px;
  padding:10px 12px;
  font-weight:800;
  box-shadow:0 6px 16px rgba(15,23,42,.04);
}
.textDirBtn.isActive{
  background:rgba(255,255,255,.98);
  color:var(--text);
  border-color:rgba(10,132,255,.24);
  box-shadow:0 0 0 1px rgba(10,132,255,.18) inset, 0 8px 18px rgba(10,132,255,.08);
}

.decoImagePanel{
  padding:12px 0 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.decoUploadHint{ color:var(--textSoft); }

.pkgUploadUi{
  background:rgba(255,255,255,.50);
  border:1px solid var(--lineSoft);
  border-radius:22px;
  padding:10px 12px;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}
.pkgUploadMiniSquare small{ color:var(--textSoft); }

.finishPreviewWrap{
  border:1px solid var(--lineSoft);
  border-radius:20px;
  background:rgba(248,249,251,.82);
}
.finishPreview{
  border-radius:16px;
  background:#fff;
}
.finishNote{ color:var(--textSoft); }

.railBtn:focus-visible,
.layerBtn:focus-visible,
.stepTab:focus-visible,
.segBtn:focus-visible,
.decoModeBtn:focus-visible,
.textBtn:focus-visible,
.fab:focus-visible,
.fabMini:focus-visible,
.thumbBtn:focus-visible,
.variantChip:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(10,132,255,.22), 0 0 0 5px rgba(10,132,255,.10);
}


/* Tab adjustments */
.stepTabs{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px;
  border:1px solid rgba(17,23,32,.06);
  border-radius:999px;
  background:rgba(17,23,32,.04);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  overflow:auto;
}
.stepTab{
  flex:1 1 0;
  min-width:max-content;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--textSoft);
  font-weight:800;
  white-space:nowrap;
  box-shadow:none;
}
.stepTab.isActive{
  background:#fff;
  color:var(--text);
  border-color:transparent;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 6px 18px rgba(15,23,42,.05);
}
.stepIndex{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:999px;
  background:rgba(17,23,32,.06);
  color:#6b7280;
  font-size:11px;
  font-weight:900;
  line-height:1;
}
.stepLabel{
  letter-spacing:-0.01em;
  line-height:1;
}
.stepTab.isActive .stepIndex{
  background:var(--accentSoft);
  color:var(--accent);
}

/* Visual polish */


.top{ gap:12px; }
.planPill{
  padding:10px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.74);
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}
.planAction{
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  font-weight:800;
}


.stage{
  background:#ffffff;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
.bottom{
  background:rgba(248,249,251,.9);
}

/* Stage */
.fab,
.fabMini{
  height:42px !important;
  border-radius:999px !important;
  border:1px solid rgba(17,23,34,.08) !important;
  background:rgba(255,255,255,.58) !important;
  color:var(--text) !important;
  -webkit-backdrop-filter:blur(5px) saturate(100%) !important;
  backdrop-filter:blur(2px) saturate(110%) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.08) !important;
}
.fab{
  min-width:76px;
  padding:0 14px;
  gap:7px;
}
.fabMini{
  min-width:auto !important;
  padding:0 13px !important;
  gap:7px !important;
}
.fabText,
.fabMini .fabText{
  font-size:12px !important;
  font-weight:800 !important;
  white-space:nowrap;
  letter-spacing:0;
}
.fabIcon,
.fabMini .fabIcon{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0 !important;
  line-height:1;
}
.fabIcon svg,
.fabMini .fabIcon svg{
  width:16px;
  height:16px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.xbtn{
  width:56px !important;
  height:54px !important;
  padding: 3px !important;
  gap:3px;
  border-radius:16px !important;
  background:rgba(255,255,255,.84) !important;
  border: 1px solid var(--lineSoft) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .04)!important;
}
.xbtn .xicon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  flex:0 0 auto;
}
.xbtn .xicon svg{
  width:18px;
  height:18px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.xbtn small{
  font-size:11px !important;
  line-height:1.08;
  white-space:nowrap;
  color:var(--textSoft) !important;
}


.variantChip.zoomChip span{
  font-size:12px;
  font-weight:800;
}

/* Bottom panel */
.seg,
.decoModeSeg{
  align-items:center;
  min-height:48px;
}
.seg{ padding:6px !important; }
.decoModeSeg{
  margin-top:0 !important;
  padding:6px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px !important;
}
.segBtn,
.decoModeBtn{
  min-width:0;
  min-height:36px;
  padding:8px 14px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  line-height:1;
}


.textPanel{
  margin-top:10px;
  padding:12px;
  border:1px solid rgba(17,23,34,.06);
  border-radius:18px;
  background:rgba(255,255,255,.5);
}
.textRow{ gap:10px; }
.textInput{
  min-height:46px;
  padding:0 14px !important;
  border:1px solid rgba(17,23,34,.10) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 4px 12px rgba(15,23,42,.03);
  font-size:15px;
}
.textInput::placeholder{ color:#9aa3af; }
.textInput:focus,
.textSelect:focus{
  outline:none;
  border-color:rgba(10,132,255,.28) !important;
  box-shadow:0 0 0 4px rgba(10,132,255,.10), 0 6px 14px rgba(15,23,42,.04);
}
.textBtn{
  min-height:44px;
  border-radius:16px !important;
  border:1px solid rgba(17,23,34,.08) !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 8px 16px rgba(15,23,42,.04);
  font-weight:800;
}
#textAddBtn{
  background:rgba(10,132,255,.12) !important;
  color:#0a5fd0 !important;
  border-color:rgba(10,132,255,.18) !important;
}
.textSelect{
  min-height:42px;
  border:1px solid rgba(17,23,34,.08) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.92) !important;
}


.pkgUploadUi{
  gap:12px;
  padding:12px;
  border-radius:22px;
  background:rgba(255,255,255,.58) !important;
  border:1px solid rgba(17,23,34,.06) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.04) !important;
}
.pkgUploadSquareBig,
.pkgUploadMiniSquare,
.pkgUploadDpadBtn,
.decoUploadBtn{
  border:1px solid rgba(17,23,34,.08) !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 8px 16px rgba(15,23,42,.04) !important;
}
.pkgUploadSquareBig{ border-radius:18px !important; }
.pkgUploadMiniSquare,
.pkgUploadDpadBtn{ border-radius:14px !important; }
.pkgUploadBigText{ line-height:1.18; }
.pkgUploadBigIcon,
.pkgUploadTrashIcon,
.decoUploadIcon,
.iconOnly{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0 !important;
  color:var(--text);
}
.pkgUploadBigIcon svg,
.pkgUploadTrashIcon svg,
.decoUploadIcon svg,
.iconOnly svg{
  width:20px;
  height:20px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.pkgUploadMiniSign{ font-size:16px; }
.decoUploadHint,
.textHint{ color:var(--textSoft) !important; }
.decoImagePanel{
  margin-top:10px;
  padding:12px;
  border:1px solid rgba(17,23,34,.06);
  border-radius:18px;
  background:rgba(255,255,255,.5);
}
.decoUploadBtn{
  min-height:44px;
  border-radius:16px !important;
  justify-content:center;
  gap:8px;
}


.segBtn,
.decoModeBtn,
.railBtn,
.layerBtn,
.thumbBtn,
.textBtn,
.pkgUploadSquareBig,
.pkgUploadMiniSquare,
.pkgUploadDpadBtn,
.textInput,
.textSelect{
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}


.stepTab,
.segBtn,
.decoModeBtn,
.fabText,
.pkgUploadBigText,
.textBtn,
.xbtn small{
  word-break:keep-all;
}

/* Tab unification */
:root{
  --tabShellBg: rgba(255,255,255,.62);
  --tabShellBorder: rgba(17,23,34,.06);
  --tabIdleText: #7d8592;
  --tabActiveBorder: rgba(10,132,255,.34);
  --tabActiveRing: rgba(10,132,255,.14);
}

.stepTabs,
#scopeSeg,
.decoModeSeg{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px !important;
  border:1px solid var(--tabShellBorder);
  border-radius:18px;
  background:var(--tabShellBg);
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}
#scopeSeg{
  min-height:54px;
  height:54px;
}

#scopeSeg .segBtn{
  height:40px;
  min-height:40px;
}

.stepTab,
.segBtn,
.decoModeBtn{
  min-width:0;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 14px !important;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--tabIdleText);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:none;
}

.stepTab.isActive,
.segBtn.isActive,
.decoModeBtn.isActive{
  background:rgba(255,255,255,.96);
  color:var(--text);
  border-color:var(--tabActiveBorder);
  box-shadow:0 0 0 3px var(--tabActiveRing), 0 6px 16px rgba(15,23,42,.06);
}

.stepTab .stepIndex{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:999px;
  background:rgba(17,23,32,.06);
  color:#6b7280;
  font-size:11px;
  font-weight:900;
  line-height:1;
}

.stepTab.isActive .stepIndex{
  background:rgba(10,132,255,.12);
  color:var(--accent);
}
/* Design upload panel */


.pkgUploadUi{
  width: 100%;
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(17,23,34,.06) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.04) !important;
  max-height: none !important;
}

.pkgUploadWide{
  width: 100% !important;
  min-height: 86px;
  height: auto !important;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  padding: 0 18px;
  border-radius: 20px !important;
}

.pkgUploadWide .pkgUploadBigText{
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.pkgUploadWide .pkgUploadActions{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.pkgUploadMiniSquare,
.pkgUploadDpadBtn,
.pkgUploadActionBtn{
  min-height: 74px;
  height: 74px;
  width: 100% !important;
  border-radius: 18px !important;
  border: 1px solid rgba(17,23,34,.08) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 8px 16px rgba(15,23,42,.04) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
}

.pkgUploadActionBtn{
  overflow: hidden;
}

.pkgUploadMiniSquare small,
.pkgUploadDpadBtn small,
.pkgUploadActionBtn small{
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
}

.pkgUploadBigIcon,
.pkgUploadMiniSign,
.iconOnly,
.pkgUploadTrashIcon{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 0 !important;
}

.pkgUploadBigIcon img,
.pkgUploadMiniSign img,
.iconOnly img,
.pkgUploadTrashIcon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pkgUploadBigText br{
  display: none;
}


.pkgUploadMid,
.pkgUploadZoomCol,
.pkgUploadDpad{
  display: contents;
}

#pkgUploadBtn{
  width: 100% !important;
}

#pkgUploadClear{
  width: 100% !important;
}

#pkgUploadRotateLeft,
#pkgUploadRotateRight{
  grid-column: auto !important;
  grid-row: auto !important;
}

.stagePreviewModal{
  width: min(520px, calc(100vw - 24px));
  max-height: min(92dvh, 920px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;

  justify-self: center;
  align-self: center;
  margin: 0;
}

.stagePreviewViewport{
  min-height:180px;
  height:min(50dvh, 500px);
  display:grid;
  place-items:center;
  overflow:hidden;

  border:1px solid rgba(17,23,34,.08);
  border-radius:18px;
  background:rgba(255,255,255,.94);
}

.stagePreviewCanvas{
  position:relative;
  flex:none;
}

.stagePreviewStage{
  box-shadow:none;
}

.stagePreviewNote{
  margin:0;
}


#decoUploadBtn{
  min-height: 86px;
  height: auto;
  border-radius: 20px !important;
  padding: 0 18px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(17,23,34,.08) !important;
  box-shadow: 0 8px 16px rgba(15,23,42,.04) !important;
}

#decoUploadBtn .decoUploadIcon{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 0 !important;
}

#decoUploadBtn .decoUploadIcon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#decoUploadBtn{
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

#decoImagePanel{
  padding: 12px 0 6px;
}

.panSelectionRing{
  border: 3px solid #0a84ff;
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(10,132,255,.18);
  pointer-events: none;
  animation: panSelectionPulse 1s ease-in-out 5;
  animation-fill-mode: none;
}

@keyframes panSelectionPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.35; transform:scale(1.02); }
}

/* Color variants */
.variantBar{
  position:absolute;
  left:16px;
  right:16px;
  bottom:10px;
  z-index:20;

  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
  align-items:center;
  gap:8px;

  padding:10px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.76);
  border:1px solid var(--lineSoft);
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
  backdrop-filter: blur(2px) saturate(110%) !important;

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;

  pointer-events:auto;
  touch-action:pan-x;
}

.variantBar::-webkit-scrollbar{
  display:none;
}

.variantBar > *{
  flex:0 0 auto;
}

.variantChip{
  width:28px;
  height:28px;
}

.variantChip.zoomChip,
.variantChip.wheelChip{
  width:28px;
  min-width:28px;
  height:28px;
}

.variantBar.isHidden{
  display:none !important;
}


/* Bottom panel */

.bottom{
  position: relative;
}


#scopeSeg,
.decoModeSeg{
  position: sticky;
  top: 0;
  z-index: 40;


  background: rgba(255,255,255,.1) !important;
  border: 1px solid var(--lineSoft) !important;
  box-shadow:
    0 8px 24px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.72);

  -webkit-backdrop-filter: blur(5px) saturate(145%);
  backdrop-filter: blur(5px) saturate(145%);
}


#scopeSeg{
  margin-bottom: 8px;
}

.decoModeSeg{
  margin-bottom: 8px;
}


#scopeSeg::before,
.decoModeSeg::before{
  content: "";
  position: absolute;
  inset: -8px -8px -6px -8px;
  z-index: -1;
  border-radius: 22px;
  pointer-events: none;
}


#scopeSeg .segBtn,
.decoModeSeg .decoModeBtn{
  background: transparent;
}

#scopeSeg .segBtn.isActive,
.decoModeSeg .decoModeBtn.isActive{
  background: rgba(255,255,255,.94);
  box-shadow:
    0 6px 16px rgba(15,23,42,.06),
    0 0 0 3px rgba(10,132,255,.10);
}

/* Small screens */
@supports (top: env(safe-area-inset-top)){
  #scopeSeg,
  .decoModeSeg{
    top: 0;
  }
}

/* Support link */
.planPill{
  min-height:66px;
}
.planAction.supportAction{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* Top links */

.top{
  padding-top:10px;
  gap:8px;
}

.topLinks{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
  min-height:28px;
  padding:0 4px;
}

.topLink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--textSoft);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  line-height:1;
  opacity:.82;
  white-space:nowrap;
}

.topLinkIcon{
  width:18px;
  height:18px;
  display:block;
  object-fit:contain;
  opacity:.72;
}

.topLink:focus-visible{
  outline:none;
  border-radius:999px;
  box-shadow:0 0 0 2px rgba(10,132,255,.22), 0 0 0 5px rgba(10,132,255,.10);
}


@media (max-width:390px){
  .topLinks{
    gap:14px;
  }

  .topLink{
    font-size:12px;
  }

  .topLinkIcon{
    width:16px;
    height:16px;
  }
}


/* Resize handle */

.decoResizeHandle,
.pkgResizeHandle{
  position:absolute;
  right:-14px;
  bottom:-14px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:2px solid #fff;
  background:
    var(--accent)
    url("/app/assets/icons/icon_resize.png")
    center / 16px 16px
    no-repeat;
  box-shadow:
    0 8px 18px rgba(10,132,255,.28),
    0 0 0 1px rgba(10,132,255,.22);
  cursor:nwse-resize;
  z-index:80;
  pointer-events:auto;
  touch-action:none;
}


.decoItem:not(.isSelected) .decoResizeHandle,
.pkgUploadItem:not(.isSelected) .pkgResizeHandle{
  display:none;
}


@media (hover:none) and (pointer:coarse){
  .decoResizeHandle,
  .pkgResizeHandle{
    width:34px;
    height:34px;
    right:-16px;
    bottom:-16px;
    background-size:17px 17px;
  }
}

/* Deco transform overlay */
.decoTransformOverlay{
  position:absolute;
  inset:0;
  z-index:90;
  pointer-events:none;
}
.decoTransformOverlay.isHidden{
  display:none !important;
}
.decoTransformBox{
  position:absolute;
  pointer-events:none;
  transform-origin:center center;
  --deco-overlay-counter-rot:0deg;
}
.decoOverlayHandle{
  position:absolute;
  width:28px;
  height:28px;
  padding:0;
  margin:0;
  border:2px solid #fff;
  border-radius:999px;
  background:var(--accent);
  box-shadow:
    0 6px 14px rgba(10,132,255,.24),
    0 0 0 1px rgba(10,132,255,.20);
  display:grid;
  place-items:center;
  cursor:pointer;
  pointer-events:auto;
  touch-action:none;
  -webkit-appearance:none;
  appearance:none;
  transform:none !important;
}
.decoOverlayHandle img{
  width:20px !important;
  height:20px !important;
  display:block;
  object-fit:contain;
  pointer-events:none;
  transform:none !important;
}
.decoOverlayHandle--rotate{
  left:50%;
  top:-38px;
  transform:translateX(-50%) rotate(var(--deco-overlay-counter-rot)) !important;
  cursor:grab;
}
.decoOverlayHandle--rotate:active{
  cursor:grabbing;
}
.decoOverlayHandle--resize{
  right:-16px;
  bottom:-16px;
  transform:rotate(var(--deco-overlay-counter-rot)) !important;
  cursor:nwse-resize;
}


/* Package upload transform overlay */
.pkgTransformOverlay{
  position:absolute;
  inset:0;
  z-index:91;
  pointer-events:none;
}
.pkgTransformOverlay.isHidden{
  display:none !important;
}
.pkgTransformBox{
  position:absolute;
  pointer-events:none;
  transform-origin:center center;
  --pkg-overlay-counter-rot:0deg;
}
.pkgOverlayHandle{
  position:absolute;
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  padding:0 !important;
  margin:0 !important;
  border:2px solid #fff !important;
  border-radius:999px !important;
  background:var(--accent) !important;
  box-shadow:
    0 6px 14px rgba(10,132,255,.24),
    0 0 0 1px rgba(10,132,255,.20) !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer;
  pointer-events:auto;
  touch-action:none;
  -webkit-appearance:none;
  appearance:none;
  transform:none !important;
}
.pkgOverlayHandle img{
  width:20px !important;
  height:20px !important;
  display:block !important;
  object-fit:contain !important;
  pointer-events:none;
  transform:none !important;
}
.pkgOverlayHandle--rotate{
  left:50%;
  top:-38px;
  transform:translateX(-50%) rotate(var(--pkg-overlay-counter-rot)) !important;
  cursor:grab;
}
.pkgOverlayHandle--rotate:active{
  cursor:grabbing;
}
.pkgOverlayHandle--resize{
  right:-16px;
  bottom:-16px;
  transform:rotate(var(--pkg-overlay-counter-rot)) !important;
  cursor:nwse-resize;
}

/* Bottom panel */
.pkgUploadActions{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:8px !important;
  width:100% !important;
  align-items:stretch !important;
}
.pkgUploadActions > button{
  width:100% !important;
  min-width:0 !important;
}
.pkgUploadMiniSquare,
.pkgUploadDpadBtn,
.pkgUploadActionBtn{
  min-height:64px !important;
  height:64px !important;
}
@media (max-width:390px){
  .pkgUploadActions{
    gap:6px !important;
  }
  .pkgUploadMiniSquare,
  .pkgUploadDpadBtn,
  .pkgUploadActionBtn{
    min-height:58px !important;
    height:58px !important;
  }
  .pkgUploadMiniSquare small,
  .pkgUploadDpadBtn small,
  .pkgUploadActionBtn small{
    font-size:10px !important;
  }
}

/* Panel unification: design image upload / deco image upload */
#scopeSeg,
.decoModeSeg{
  min-height:48px !important;
  height:auto !important;
  padding:6px !important;
}

#scopeSeg .segBtn,
.decoModeSeg .decoModeBtn{
  min-height:36px !important;
  height:36px !important;
  padding:8px 14px !important;
}

#decoImagePanel{
  margin-top:10px !important;
  padding:14px !important;
  border:1px solid rgba(17,23,34,.06) !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.58) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.04) !important;
}

#decoUploadBtn{
  width:100% !important;
  min-height:86px !important;
  height:auto !important;
  border-radius:20px !important;
  padding:0 18px !important;
  font-size:15px !important;
  font-weight:900 !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
}

#decoUploadBtn .decoUploadIcon{
  width:22px !important;
  height:22px !important;
  flex:0 0 auto !important;
}

#decoUploadBtn .decoUploadIcon img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
}

/* Header brand */
.topBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:30px;
  padding:0 4px;
}

.topBrand{
  flex:0 0 auto;
  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:18px;
  letter-spacing:-0.03em;
  line-height:1;
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
}

.topBrand:focus-visible{
  outline:none;
  border-radius:999px;
  box-shadow:0 0 0 2px rgba(10,132,255,.22), 0 0 0 5px rgba(10,132,255,.10);
}

.topBar .topLinks{
  flex:1 1 auto;
  justify-content:flex-end;
  min-width:0;
  padding:0;
}

@media (max-width:390px){
  .topBar{
    gap:10px;
  }

  .topBrand{
    font-size:17px;
  }

  .topBar .topLinks{
    gap:10px;
  }
}

/* Text deco selection fix */
.decoItem.isText.isSelected{
  outline:none !important;
  box-shadow:none !important;
}

.decoItem.isText.isSelected .decoText{
  outline:2px solid rgba(10,132,255,.55);
  outline-offset:3px;
  border-radius:10px;
  box-shadow:0 0 0 6px rgba(10,132,255,.10);
}

.decoText.isVertical{
  display:inline-block;
  width:auto;
  height:auto;
  line-height:1.1;
}

/* Stage preview share link */
.stagePreviewNote a {
  color: var(--textSoft) !important;
  text-decoration: none;
  margin-right: .5em;
  margin-left: .25em;
}

.stagePreviewNote a:visited {
  color: var(--textSoft) !important;
}

.stagePreviewNote a:hover {
  opacity: .75;
}

.stagePreviewNote a:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(10,132,255,.22);
}

/* Deco action button unification */
.fab,
.fabMini{
  height:34px !important;
  min-height:34px !important;
  border-radius:12px !important;
  border:1px solid rgba(17,23,34,.08) !important;
  background:rgba(255,255,255,.58) !important;
  color:var(--text) !important;
  -webkit-backdrop-filter:blur(5px) saturate(100%) !important;
  backdrop-filter:blur(2px) saturate(110%) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.08) !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  padding:0 12px !important;
}

.fab{
  right:14px !important;
  left:auto !important;
  top:14px !important;
  width:auto !important;
  min-width:auto !important;
}

.fabMini{
  width:auto !important;
  min-width:auto !important;
}

.fabText,
.fabMini .fabText,
body.isDecoTab .xbtn small,
body.isDecoTab .decoModeBtn,
body.isDecoTab .decoCat,
body.isDecoTab .textBtn,
body.isDecoTab .textDirBtn,
body.isDecoTab .decoUploadBtn{
  color:var(--text) !important;
  font-weight:800 !important;
}

.fab .fabText,
.fabMini .fabText{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:16px !important;
  margin:0 !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  transform:translateY(-1px);
}

.fab .fabIcon,
.fabMini .fabIcon{
  width:16px !important;
  height:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}

.fab .fabIcon img,
.fabMini .fabIcon img{
  width:16px !important;
  height:16px !important;
  display:block !important;
  object-fit:contain !important;
}

body.isDecoTab .decoModeBtn:not(.isActive),
body.isDecoTab .decoCat:not(.isActive),
body.isDecoTab .textDirBtn:not(.isActive){
  color:var(--text) !important;
}

body.isDecoTab .xbtn,
body.isDecoTab .decoModeBtn,
body.isDecoTab .decoCat,
body.isDecoTab .textBtn,
body.isDecoTab .textDirBtn,
body.isDecoTab .decoUploadBtn{
  font-weight:800 !important;
}