/* Criador de designs — layout (telemóvel primeiro) */
.dz-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.dz-canvas-col{display:flex;flex-direction:column;align-items:center;gap:8px;
  position:sticky;top:var(--hdr,72px);z-index:30;background:#fff;padding:8px 0 10px;
  border-bottom:1px solid var(--color-line);margin:0 -24px;padding-left:24px;padding-right:24px}
.dz-canvas-wrap{position:relative;width:min(100%,520px);aspect-ratio:1/1;border:1px solid var(--color-line);background:#fff;overflow:hidden;
  /* no telemóvel o quadro nunca ocupa mais de 40% da altura do ecrã: as ferramentas ficam por baixo */
  max-width:min(calc(100vw - 48px),40vh);max-width:min(calc(100vw - 48px),40svh)}
.dz-lado[hidden]{display:none}
.dz-lado .canvas-container{position:absolute!important;left:0;top:0}
.dz-tabs{display:flex;gap:6px}
.dz-tab{border:1px solid var(--color-line);background:#fff;color:var(--color-ink);border-radius:9999px;padding:8px 22px;font-size:.85rem;font-weight:500;cursor:pointer;min-height:40px}
.dz-tab[aria-selected="true"]{background:var(--color-ink);color:#fff;border-color:var(--color-ink)}
.dz-dica{font-size:.72rem;color:var(--color-ink-dim);text-align:center;margin:0}
.dz-tools{display:flex;flex-direction:column;gap:2rem;padding:1.5rem 0 6rem}
.dz-tools .tool-btn{min-height:44px;justify-content:center}
.dz-tools input[type=text],.dz-tools select{font-size:16px}
.dz-acoes{display:flex;flex-direction:column;gap:.6rem}
.dz-acoes .btn-primary,.dz-acoes .btn-ghost{width:100%;justify-content:center}
.dz-rodape-fixo{position:static}
@media (min-width:1024px){
  .dz-grid{grid-template-columns:minmax(0,1fr) 340px;gap:3rem}
  .dz-canvas-col{top:6rem;align-self:start;border:0;margin:0;padding:0;background:transparent;z-index:1}
  .dz-canvas-wrap{max-width:520px}
  .dz-tools{align-self:start;position:sticky;top:6rem;max-height:calc(100vh - 7rem);overflow-y:auto;padding:0 1rem 1rem 0}
}

.dz-amostras{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.75rem}
.dz-amostra{width:2.25rem;height:2.25rem;border-radius:9999px;border:2px solid var(--color-line);cursor:pointer;padding:0;box-shadow:inset 0 0 0 2px #fff}
.dz-amostra[aria-pressed="true"]{border-color:var(--color-accent);outline:2px solid var(--color-accent);outline-offset:2px}