.pc-body.pz-body{
  background:#0a0a0b;
  background-image:radial-gradient(rgba(255,162,0,.10) 1.15px,transparent 1.15px);
  background-size:32px 32px;
}
.pc-body .pz-badge{
  background:rgba(255,162,0,.12);
}
.pc-preview-dock{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}
.pc-cards-stage{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(14px,3vw,28px);
  width:100%;
}
.pc-card-slot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
  max-width:min(42vw,280px);
}
.pc-card-label{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,226,176,.82);
}
.pc-card-slot.is-editing-slot{
  position:relative;
  z-index:8;
}
.pc-card{
  position:relative;
  width:100%;
  aspect-ratio:5.5/8.5;
  margin:0;
  padding:0;
  border:none;
  --pc-card-radius:clamp(16px, 1.25rem, 24px);
  border-radius:var(--pc-card-radius);
  background:#080808;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  cursor:pointer;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
  outline:none;
}
.pc-card:hover{
  border-color:rgba(255,162,0,.45);
  box-shadow:
    0 0 0 1px rgba(255,162,0,.35),
    0 18px 42px rgba(255,162,0,.12);
}
.pc-card.has-image{
  cursor:default;
}
.pc-card.has-image:hover{
  transform:none;
}
.pc-card.is-editing{
  border-color:rgba(255,162,0,.55);
  box-shadow:
    0 0 0 2px rgba(255,162,0,.4),
    0 18px 42px rgba(255,162,0,.14);
  cursor:grab;
  overflow:visible;
  z-index:2;
}
.pc-card.is-editing:active{
  cursor:grabbing;
}
.pc-card.is-locked{
  cursor:default;
  border-color:rgba(34,197,94,.42);
  box-shadow:
    inset 0 0 0 1px rgba(134,239,172,.18),
    0 0 0 2px rgba(22,163,74,.1),
    0 18px 40px rgba(0,0,0,.35);
}
.pc-card-viewport{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
}
.pc-card-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:16px;
  text-align:center;
  color:rgba(255,255,255,.38);
  font-size:.8rem;
  line-height:1.45;
  pointer-events:none;
  z-index:2;
}
.pc-card-empty[hidden]{
  display:none !important;
}
.pc-card-edit-hint{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  padding:8px 10px;
  text-align:center;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.04em;
  color:rgba(255,255,255,.72);
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.72) 100%);
  pointer-events:none;
  z-index:3;
}
.pc-card-edit-hint[hidden]{
  display:none !important;
}
.pc-card-img{
  position:absolute;
  top:50%;
  left:50%;
  display:block;
  max-width:none;
  max-height:none;
  width:auto;
  height:auto;
  transform-origin:center center;
  will-change:transform;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.pc-card-img[hidden]{
  display:none !important;
}
.pc-img-frame{
  position:absolute;
  box-sizing:border-box;
  border:2px solid rgba(255,162,0,.85);
  pointer-events:none;
  z-index:6;
}
.pc-img-frame[hidden]{
  display:none !important;
}
.pc-img-frame-corner{
  position:absolute;
  width:12px;
  height:12px;
  background:#ffa200;
  border:1px solid #fff;
  border-radius:50%;
  box-sizing:border-box;
  pointer-events:auto;
  touch-action:none;
  z-index:1;
}
.pc-img-frame-corner--tl{top:-6px;left:-6px;cursor:nwse-resize;}
.pc-img-frame-corner--tr{top:-6px;right:-6px;cursor:nesw-resize;}
.pc-img-frame-corner--bl{bottom:-6px;left:-6px;cursor:nesw-resize;}
.pc-img-frame-corner--br{bottom:-6px;right:-6px;cursor:nwse-resize;}
.pc-img-frame-corner:hover{
  filter:brightness(1.08);
  transform:scale(1.08);
}
.pc-card-lock{
  position:absolute;
  inset:0;
  z-index:4;
  border-radius:inherit;
  background:transparent;
  pointer-events:none;
}
.pc-card-lock[hidden]{
  display:none !important;
}
.pc-panel-hint{
  margin:10px 0 0;
  font-size:.78rem;
  line-height:1.45;
  color:rgba(255,226,176,.72);
}
.pc-panel-hint[hidden]{
  display:none !important;
}
.pc-ready-btn,
.pc-modify-btn{
  display:block;
  width:100%;
  margin-top:10px;
  border:none;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:700;
  font-size:.95rem;
  line-height:1.35;
  border-radius:14px;
  padding:13px 12px;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.pc-ready-btn{
  background:linear-gradient(135deg,#86efac 0%,#16a34a 100%);
  color:#141414;
  box-shadow:0 5px 0 #15803d,0 8px 20px rgba(22,163,74,.35);
}
.pc-ready-btn:hover{
  filter:brightness(1.06);
  transform:translateY(-2px);
  box-shadow:0 7px 0 #15803d,0 12px 24px rgba(22,163,74,.45);
}
.pc-ready-btn:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 #15803d;
}
.pc-modify-btn{
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}
.pc-modify-btn:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,162,0,.35);
}
.pc-ready-btn[hidden],
.pc-modify-btn[hidden]{
  display:none !important;
}
.pc-size-note{
  margin:0;
  text-align:center;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.pc-spec-box{
  margin-top:6px;
  padding:18px 16px;
  border-radius:18px;
  background:linear-gradient(165deg,rgba(255,162,0,.07) 0%,rgba(255,255,255,.02) 45%,rgba(0,0,0,.14) 100%);
  border:1px solid rgba(255,162,0,.16);
}
.pc-spec-box .pz-step{
  margin-top:0;
}
.pc-spec-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.pc-spec-item{
  padding:12px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.pc-spec-k{
  display:block;
  margin-bottom:4px;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.pc-spec-v{
  display:block;
  font-size:.95rem;
  font-weight:800;
  color:#fff;
}
.pc-multi-toggle{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,162,0,.2);
  background:linear-gradient(165deg,rgba(255,162,0,.08) 0%,rgba(255,255,255,.02) 55%,rgba(0,0,0,.12) 100%);
  cursor:pointer;
  user-select:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.pc-multi-toggle:hover{
  border-color:rgba(255,162,0,.34);
  box-shadow:0 0 0 1px rgba(255,162,0,.08);
}
.pc-multi-toggle:has(.pc-multi-toggle-input:checked){
  border-color:rgba(255,162,0,.42);
  background:linear-gradient(165deg,rgba(255,162,0,.14) 0%,rgba(255,255,255,.03) 55%,rgba(0,0,0,.1) 100%);
  box-shadow:0 0 0 1px rgba(255,162,0,.12);
}
.pc-multi-toggle-input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  pointer-events:none;
}
.pc-multi-toggle-switch{
  position:relative;
  flex-shrink:0;
  width:48px;
  height:28px;
  margin-top:2px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.08);
  transition:background .25s ease,border-color .25s ease;
}
.pc-multi-toggle-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
  transition:transform .25s ease;
}
.pc-multi-toggle-input:checked + .pc-multi-toggle-switch{
  background:var(--orange);
  border-color:rgba(255,162,0,.55);
}
.pc-multi-toggle-input:checked + .pc-multi-toggle-switch .pc-multi-toggle-thumb{
  transform:translateX(20px);
}
.pc-multi-toggle-input:focus-visible + .pc-multi-toggle-switch{
  outline:2px solid rgba(255,162,0,.65);
  outline-offset:2px;
}
.pc-multi-toggle-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.pc-multi-toggle-title{
  display:block;
  font-size:.92rem;
  font-weight:800;
  color:#fff;
  line-height:1.35;
}
.pc-multi-toggle-desc{
  display:block;
  font-size:.76rem;
  line-height:1.45;
  color:rgba(255,255,255,.55);
}
.pc-multi-toggle-desc[hidden]{
  display:none !important;
}
.pc-multi-panel{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,162,0,.18);
  background:rgba(255,162,0,.05);
}
.pc-multi-panel[hidden]{
  display:none !important;
}
.pc-multi-controls{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:12px;
}
.pc-multi-label{
  display:block;
  margin-bottom:6px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.pc-multi-stepper{
  display:flex;
  align-items:center;
  gap:8px;
}
.pc-multi-stepper-btn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:1.1rem;
  font-weight:800;
  cursor:pointer;
}
.pc-multi-stepper-btn:hover{
  border-color:rgba(255,162,0,.35);
  background:rgba(255,162,0,.1);
}
.pc-multi-stepper-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  pointer-events:none;
}
.pc-multi-stepper-value{
  min-width:24px;
  text-align:center;
  font-size:1rem;
  color:#fff;
}
.pc-multi-total strong{
  font-size:1.2rem;
  color:#fff;
}
.pc-multi-total-suffix{
  margin-left:4px;
  font-size:.82rem;
  color:rgba(255,255,255,.55);
}
.pc-multi-rows{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pc-multi-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.pc-multi-row.is-active{
  border-color:rgba(255,162,0,.45);
  background:rgba(255,162,0,.08);
}
.pc-multi-row.is-ready .pc-multi-row-status{
  color:#86efac;
}
.pc-multi-row-main{
  flex:1;
  min-width:0;
}
.pc-multi-row-title{
  display:block;
  font-size:.86rem;
  font-weight:800;
  color:#fff;
}
.pc-multi-row-status{
  display:block;
  margin-top:2px;
  font-size:.72rem;
  color:rgba(255,255,255,.48);
}
.pc-multi-row-qty{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.pc-multi-qty-stepper{
  display:flex;
  align-items:center;
  gap:4px;
}
.pc-multi-qty-btn{
  width:30px;
  height:30px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:1rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.pc-multi-qty-btn:hover{
  background:rgba(255,162,0,.18);
  border-color:rgba(255,162,0,.45);
}
.pc-multi-qty-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  pointer-events:none;
}
.pc-multi-qty-value{
  min-width:28px;
  text-align:center;
  font-weight:800;
  font-size:.9rem;
  color:#fff;
}
.pc-design-nav{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:12;
  width:calc(100% - 20px);
  max-width:168px;
  pointer-events:none;
}
.pc-design-nav[hidden]{
  display:none !important;
}
.pc-design-nav-bar{
  display:grid;
  grid-template-columns:36px 1fr 36px;
  align-items:center;
  gap:0;
  padding:4px;
  border-radius:999px;
  background:rgba(8,8,10,.52);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 6px 18px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.pc-design-nav-btn{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.9);
  cursor:pointer;
  pointer-events:auto;
  transition:background .16s ease,color .16s ease,transform .12s ease;
}
.pc-design-nav-btn svg{
  display:block;
  flex-shrink:0;
}
.pc-design-nav-btn:hover{
  background:rgba(255,162,0,.18);
  color:#fff;
}
.pc-design-nav-btn:active{
  transform:scale(.94);
  background:rgba(255,162,0,.28);
}
.pc-design-nav-btn:focus-visible{
  outline:2px solid rgba(255,162,0,.8);
  outline-offset:1px;
}
.pc-design-nav-indicator-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:0 4px;
  pointer-events:none;
}
.pc-design-nav-indicator{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,240,210,.96);
  line-height:1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.pc-multi-note{
  margin:10px 0 0;
  font-size:.74rem;
  line-height:1.45;
  color:rgba(255,226,176,.68);
}
.pc-body .pz-qty-wrap.is-multi-readonly .pz-qty button{
  opacity:.45;
  pointer-events:none;
}
@media(min-width:821px){
  .pc-preview-dock{
    height:calc(100vh - 84px - 28px);
    max-height:calc(100vh - 84px - 28px);
  }
  .pc-cards-stage{
    max-width:min(calc(100vh - 160px),720px);
    margin:0 auto;
  }
  .pc-card-slot{
    max-width:none;
  }
  .pc-card{
    --pc-card-radius:36px;
    border-radius:var(--pc-card-radius);
  }
}
@media(max-width:820px){
  .pc-body .pz-canvas-dock.pz-panel.pc-preview-dock{
    width:100%;
    padding:calc(64px + env(safe-area-inset-top, 0px)) 12px 10px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:#0d0d10;
  }
  .pc-cards-stage{
    gap:12px;
  }
  .pc-card-slot{
    max-width:none;
    gap:0;
  }
  .pc-card{
    --pc-card-radius:18px;
    border-radius:var(--pc-card-radius);
  }
  .pc-card-label,
  .pc-size-note{
    display:none;
  }
  .pc-spec-grid{
    grid-template-columns:1fr;
  }
  .pc-design-nav{
    bottom:14px;
    max-width:152px;
  }
  .pc-design-nav-bar{
    grid-template-columns:32px 1fr 32px;
    padding:3px;
  }
  .pc-design-nav-btn{
    width:32px;
    height:32px;
  }
  .pc-design-nav-indicator{
    font-size:.66rem;
  }
}