/* =====================================================================
   DESIGNER (design.php) — layered on pinme.css. Everything here is
   prefixed dz-/pv-/dsn- so nothing collides with the design system.
   ===================================================================== */
body.designer .canvas{padding-top:clamp(.8rem,1.6vh,1.4rem)}
body.designer .step-title{margin-bottom:.15rem}
body.designer .step-sub{margin-bottom:clamp(.8rem,1.6vh,1.3rem)}

.dz-layout{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr) minmax(240px,320px);
  gap:clamp(.8rem,1.6vw,1.4rem);align-items:start;flex:1;
}

/* ---------- tools (left) ---------- */
.dz-tools{padding:0;overflow:hidden}
.dz-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:var(--bord);background:var(--paper)}
.dz-tab{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:.9rem .3rem .7rem;background:none;border:none;border-right:2px solid rgba(18,18,18,.15);
  cursor:pointer;font-weight:900;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
}
.dz-tab:last-child{border-right:none}
.dz-tab svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dz-tab.on{background:var(--yellow)}
.dz-tab .new-tag{
  position:absolute;top:.35rem;right:.3rem;background:var(--ink);color:var(--yellow);
  font-size:.5rem;letter-spacing:.08em;padding:.15rem .35rem;border-radius:6px;
}
.dz-pane{display:none;padding:1rem 1.1rem 1.1rem}
.dz-pane.on{display:block}
.dz-pane .lab{display:block;font-weight:900;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;margin:.9rem 0 .35rem}
.dz-pane .lab:first-child{margin-top:0}
.dz-pane textarea,.dz-pane select,.dz-in{
  width:100%;font:inherit;font-weight:700;font-size:.9rem;color:var(--ink);
  background:var(--paper);border:var(--bord);border-radius:12px;padding:.6rem .75rem;
}
.dz-pane textarea{min-height:64px;resize:vertical}
.dz-pane select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23121212' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.2rem}
.dz-row{display:flex;gap:.5rem;align-items:center}
.dz-row + .dz-row{margin-top:.5rem}
.dz-seg{display:flex;border:var(--bord);border-radius:12px;overflow:hidden;background:var(--paper);flex:1}
.dz-seg button{
  flex:1;background:none;border:none;border-right:2px solid rgba(18,18,18,.2);padding:.5rem .3rem;cursor:pointer;
  font-weight:900;font-size:.95rem;display:grid;place-items:center;
}
.dz-seg button:last-child{border-right:none}
.dz-seg button.on{background:var(--ink);color:var(--yellow)}
.dz-seg button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round}
.dz-size-row{display:flex;align-items:center;gap:.6rem}
.dz-size-row .a{font-family:var(--display);line-height:1}
.dz-size-row .a.s{font-size:.9rem}.dz-size-row .a.l{font-size:1.5rem}
.dz-size-row input[type=range]{flex:1;accent-color:var(--ink)}
.dz-swatches{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.sw{
  width:30px;height:30px;border-radius:50%;border:2.5px solid var(--ink);cursor:pointer;
  box-shadow:0 2px 0 rgba(18,18,18,.6);transition:transform .1s;padding:0;
}
.sw:hover{transform:translateY(-2px)}
.sw.on{box-shadow:0 0 0 3px var(--paper),0 0 0 5.5px var(--ink)}
.sw-pick{position:relative;width:30px;height:30px;border-radius:50%;border:2.5px dashed var(--ink);overflow:hidden;cursor:pointer;
  background:conic-gradient(#E3252B,#FFCF00,#1E8E3E,#1B6FE0,#7B2FD1,#E3252B)}
.sw-pick input{position:absolute;inset:-8px;width:200%;height:200%;opacity:0;cursor:pointer}
.dz-half{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center}
.dz-colorbox{display:block;width:44px;height:40px;border:var(--bord);border-radius:10px;padding:0;overflow:hidden;background:var(--paper);cursor:pointer}
.dz-colorbox input{width:140%;height:140%;margin:-20%;border:none;padding:0;cursor:pointer}
.dz-add{
  width:100%;margin-top:.2rem;font-family:var(--display);font-size:1.05rem;letter-spacing:.04em;
  background:var(--ink);color:var(--yellow);border:3px solid var(--cream);border-radius:14px;padding:.6rem;cursor:pointer;
  box-shadow:0 0 0 3px var(--ink),0 5px 0 var(--ink);transition:transform .1s,box-shadow .1s;
}
.dz-add:hover{transform:translateY(-2px);box-shadow:0 0 0 3px var(--ink),0 7px 0 var(--ink)}
.dz-add:active{transform:translateY(2px);box-shadow:0 0 0 3px var(--ink),0 2px 0 var(--ink)}
.dz-props.off{display:none}
.dz-add + .dz-props{margin-top:1.1rem}
.dz-soon{text-align:center;padding:1.2rem .4rem}
.dz-soon .big{font-family:var(--display);font-size:1.4rem;line-height:1;margin-bottom:.4rem}
.dz-soon p{font-weight:700;font-size:.85rem;line-height:1.5;opacity:.8}
.dz-soon .soon-tag{display:inline-block;margin-bottom:.6rem;background:var(--ink);color:var(--yellow);font-size:.6rem;letter-spacing:.1em;font-weight:900;padding:.25rem .55rem;border-radius:8px}

/* upload pane */
.dz-drop{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;
  border:3px dashed var(--ink);border-radius:16px;background:var(--paper);padding:1.3rem .8rem;cursor:pointer;
  transition:transform .12s,background .12s;
}
.dz-drop:hover,.dz-drop.drag{background:var(--yellow-hot);transform:translateY(-2px)}
.dz-drop input{display:none}
.dz-drop .big{font-family:var(--display);font-size:1.15rem;letter-spacing:.03em;line-height:1}
.dz-drop .hint{font-weight:700;font-size:.72rem;line-height:1.4;opacity:.8}
.dz-assets{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.dz-assets-wrap.off{display:none}
.asset{
  position:relative;aspect-ratio:1;border:var(--bord);border-radius:10px;background:
    repeating-conic-gradient(#e8e8e8 0 25%,#fff 0 50%) 0 0/12px 12px;overflow:hidden;cursor:pointer;padding:0;
}
.asset img{width:100%;height:100%;object-fit:contain}
.asset.pending{display:grid;place-items:center;font-weight:900;opacity:.6}
.asset .rm{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:6px;background:var(--ink);color:#fff;font-size:.6rem;font-weight:900;display:grid;place-items:center;opacity:0}
.asset:hover .rm{opacity:1}
.dz-err{display:none;margin-top:.6rem;background:#D9483B;color:#fff;font-weight:800;font-size:.78rem;border-radius:10px;padding:.5rem .7rem}
.dz-err.on{display:block}

/* ---------- stage (centre) ---------- */
.dz-center{display:flex;gap:clamp(.6rem,1.2vw,1rem);align-items:stretch;min-width:0}
.dz-rail{
  display:flex;flex-direction:column;gap:.25rem;align-self:center;
  background:var(--cream);border:var(--bord);border-radius:16px;box-shadow:var(--card-shadow);padding:.5rem .35rem;
}
.dz-rail button{
  width:56px;display:flex;flex-direction:column;align-items:center;gap:.2rem;background:none;border:none;
  cursor:pointer;padding:.45rem 0;border-radius:10px;font-weight:900;font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;
}
.dz-rail button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dz-rail button:hover:not(:disabled){background:var(--yellow)}
.dz-rail button:disabled{opacity:.3;cursor:not-allowed}
.dz-rail hr{border:none;border-top:2px solid rgba(18,18,18,.2);margin:.15rem .3rem}
.dz-stagecol{flex:1;display:flex;flex-direction:column;gap:.7rem;min-width:0}
.dz-sizes{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center}
.szc{
  display:flex;flex-direction:column;align-items:center;line-height:1;background:var(--paper);border:2.5px solid var(--ink);
  border-radius:999px;padding:.35rem .7rem .3rem;cursor:pointer;box-shadow:0 3px 0 rgba(18,18,18,.7);transition:transform .1s;
}
.szc b{font-family:var(--display);font-weight:400;font-size:.9rem}
.szc i{font-style:normal;font-weight:800;font-size:.52rem;opacity:.7}
.szc:hover{transform:translateY(-2px)}
.szc.on{background:var(--ink);color:var(--yellow)}
.szc.on i{opacity:.9}
.dz-stage{
  position:relative;flex:1;min-height:min(520px,58vh);aspect-ratio:1;max-height:62vh;margin:0 auto;width:100%;
  border-radius:24px;transition:box-shadow .15s;touch-action:none;
}
.dz-stage.drag{box-shadow:0 0 0 4px var(--ink) inset}
.dz-stage canvas{display:block;width:100%;height:100%;border-radius:24px}
.dz-empty{
  position:absolute;inset:0;display:none;place-items:center;pointer-events:none;
  font-family:var(--display);font-size:clamp(1rem,2vw,1.4rem);color:rgba(18,18,18,.35);text-align:center;padding:0 20%;
}
.dz-empty.on{display:grid}
.dz-under{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:space-between}
.dz-legend{
  display:flex;flex-direction:column;gap:.2rem;background:var(--cream);border:var(--bord);border-radius:14px;
  box-shadow:var(--card-shadow);padding:.55rem .8rem;font-weight:800;font-size:.66rem;
}
.dz-legend .leg{display:flex;align-items:center;gap:.5rem}
.dz-legend .swatch{width:26px;height:0;border-top:3px dashed #3BA55D;flex:none}
.dz-legend .leg.cut .swatch{border-top:3px solid #9a9a9a}
.dz-legend .leg.safe .swatch{border-top-color:#D9483B}
.dz-zoom{display:flex;align-items:center;gap:.2rem;background:var(--cream);border:var(--bord);border-radius:999px;box-shadow:var(--card-shadow);padding:.25rem .4rem}
.dz-zoom button{background:none;border:none;font-weight:900;cursor:pointer;padding:.3rem .55rem;border-radius:999px;font-size:.85rem}
.dz-zoom button:hover{background:var(--yellow)}
.dz-zoom #dzZoomVal{min-width:3.2em;text-align:center}
.dz-tip{font-weight:700;font-size:.66rem;opacity:.7;text-align:center;width:100%}

/* ---------- side (right) ---------- */
.dz-side{display:flex;flex-direction:column;gap:clamp(.8rem,1.6vh,1.2rem)}
.pv-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem;margin-bottom:.6rem}
.pv-head b{font-weight:900;font-size:.8rem;letter-spacing:.08em}
.pv-head span{font-weight:700;font-size:.68rem;opacity:.75}
.pv-toggle{display:flex;border:var(--bord);border-radius:999px;overflow:hidden;margin:0 auto .6rem;background:var(--paper);width:max-content}
.pv-tab{background:none;border:none;font-weight:900;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:.4rem .8rem;cursor:pointer}
.pv-tab.on{background:var(--ink);color:var(--yellow)}
#dzBack{display:block;width:min(100%,240px);height:auto;margin:0 auto;aspect-ratio:1}
#dzBack.off{display:none}

/* ---------- glossy front preview (approved mockup values) ----------
   The stage is a fixed 202-px design space; --preview-scale (set by JS
   from the container width) scales the whole rendering — shadows, blurs
   and strokes included — so the finish keeps its proportions at any
   size. The finish lives only here, never in the artwork or print. */
.button-preview{
  --button-color:#FFFFFF;
  --shine:.82;
  position:relative;
  width:min(100%,240px);
  max-width:100%;
  aspect-ratio:1 / 1;
  margin:0 auto .5rem;
  padding:0;
  border:0;
  overflow:visible; /* the cast shadow reaches beyond the circle */
}
.button-preview.off{display:none}
.button-preview__stage{
  position:absolute;
  top:0;left:0;
  isolation:isolate;
  width:202px;height:202px;
  border-radius:50%;
  overflow:hidden;
  background:var(--button-color);
  transform-origin:top left;
  transform:scale(var(--preview-scale,1));
  box-shadow:
    3px 5px 2px -2px #17130f80,
    6px 12px 10px -4px #211c1559;
}
.button-preview__art{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;
  object-fit:cover;
}
.button-preview__edge{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    linear-gradient(145deg,#ffffff24,transparent 45%,#00000008 70%,#00000016),
    radial-gradient(ellipse at 43% 39%,transparent 58%,#00000006 70%,#00000019 83%,#00000048 100%);
  box-shadow:
    inset -6px -9px 13px -4px #17221965,
    inset -2px -3px 3px #18221950,
    inset 1px 2px 2px #ffffff60,
    inset 0 0 0 1px #00000026;
}
.button-preview__reflection{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:var(--shine);
  filter:blur(.45px);
  pointer-events:none;
}
.button-preview__rim-return{
  fill:none;stroke:#fff;stroke-linecap:round;
  filter:blur(.6px);
}
.dsn-list{display:flex;flex-direction:column;gap:.45rem;max-height:34vh;overflow:auto;padding-right:.2rem}
.dsn{
  display:flex;align-items:center;gap:.6rem;background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;
  padding:.4rem .5rem;cursor:pointer;transition:transform .1s;
}
.dsn:hover{transform:translateX(2px)}
.dsn.on{background:var(--yellow);box-shadow:0 3px 0 rgba(18,18,18,.8)}
.dsn canvas{width:52px;height:52px;flex:none;border-radius:50%}
.dsn-meta{flex:1;display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:0}
.dsn-name{font-weight:900;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsn-inc{display:flex;cursor:pointer}
.dsn-inc input{position:absolute;opacity:0;width:0;height:0}
.dsn-box{width:24px;height:24px;border:2.5px solid var(--ink);border-radius:7px;background:var(--paper);display:grid;place-items:center}
.dsn-inc input:checked + .dsn-box{background:var(--ink)}
.dsn-inc input:checked + .dsn-box::after{content:"";width:12px;height:7px;border-left:3px solid var(--yellow);border-bottom:3px solid var(--yellow);transform:translateY(-2px) rotate(-45deg)}
.dsn-inc input:focus-visible + .dsn-box{outline:3px dashed var(--ink);outline-offset:2px}
.dz-dsn-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.dz-dsn-actions button{
  font-weight:900;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);border:2.5px solid var(--ink);
  border-radius:10px;padding:.45rem .6rem;cursor:pointer;box-shadow:0 3px 0 rgba(18,18,18,.8);flex:1;
}
.dz-dsn-actions button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
.dz-dsn-actions button.primary{background:var(--yellow)}
.dz-dsn-actions button:hover:not(:disabled){transform:translateY(-1px)}

/* ---------- bottom bar additions ---------- */
.save-status{font-weight:800;font-size:.64rem;letter-spacing:.04em;padding:.3rem .6rem;border-radius:999px;border:2px solid var(--ink);white-space:nowrap}
.save-status.saved{background:#c9f2d5}
.save-status.saving{background:var(--paper)}
.save-status.unsaved{background:var(--paper);opacity:.75}
.save-status.err{background:#f8c9c4}
.ob-mid{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .dz-layout{grid-template-columns:minmax(260px,300px) minmax(0,1fr)}
  .dz-side{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  .dz-side > .card{flex:1 1 300px}
}
@media (max-width:820px){
  .dz-layout{grid-template-columns:1fr}
  .dz-center{order:-1;flex-direction:column}
  .dz-rail{flex-direction:row;align-self:stretch;justify-content:center;flex-wrap:wrap;padding:.3rem}
  .dz-rail hr{display:none}
  .dz-rail button{width:48px}
  .dz-stage{min-height:0;max-height:none;aspect-ratio:1}
  .dz-side{flex-direction:column}
  .dsn-list{max-height:none}
  .dz-tip{display:none}
}
@media (max-width:560px){
  .dz-tab{font-size:.52rem;padding:.7rem .2rem .55rem}
  .ob-mid{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .dz-drop,.sw,.szc,.dsn,.dz-add{transition:none}
}