:root{
  --bg:#fff;
  --fg:#111;

  /* Flecha de contorno (marcador de seleção) */
  --marker-size: 26px;      /* tamanho geral da flecha */
  --marker-stroke: #fff;    /* cor do traço */
  --marker-thickness: 2.5;  /* espessura em px */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.montagem-layout{
  display:grid;
  grid-template-columns:1fr;
  min-height:100vh;
}

/* 1) deixe o JS controlar a altura útil: não force 100vh no container do preview */
.montagem-preview{
  position: relative;
  /* min-height:100vh;  <-- remova/ comente */
  min-height: auto;     /* opcional: deixa o JS calcular */
}

/* 2) zere as margens internas do contêiner do canvas */
.preview-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  /* padding:8px 0;  <-- remova/ comente */
  padding:0;            /* evita o espaço acima/abaixo do preview */
}

/* 3) canvas deixa o JS decidir tamanho e centraliza */
#stage{
  display:block;
  margin:0 auto;   /* garante centralizado */
  width:auto;      /* já está ok */
  height:auto;     /* já está ok */
  /* background:#f7f7f7;  <-- mantenha se quiser, ou remova se o fundo do preview (bg) já está no JS */
}


.preview-loading{
  position:absolute;
  inset:auto 12px 12px auto;
  background:rgba(0,0,0,.8);
  color:#fff;
  padding:8px 10px;
  border-radius:8px;
  font-size:12px;
}

.preview-error{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#111;
  color:#fff;
  padding:12px 16px;
  border-radius:10px;
  font-weight:700;
}

.montagem-aside{display:none !important}
#mobilePanel{display:none !important}
#mobilePreviewAnchor{display:none !important}

.qty-overlay{position:fixed;inset:0;z-index:2147483647;background:#f7dcc2 url("https://y1nrmnwgpdmg1oxw.public.blob.vercel-storage.com/Folders/GIF/load.gif") center/cover no-repeat;display:grid;place-items:center}
.qty-wrap{width:min(1200px,94vw);display:grid;grid-template-columns:1fr;gap:24px}
.qty-left{max-width:560px}
.qty-title{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:800;font-size:40px;line-height:1.04;color:#111;margin:0 0 10px}
.qty-sub{font-size:14px;color:#333;margin:0 0 28px}
.qty-grid{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:18px}
.qty-btn{display:grid;gap:6px;align-content:center;justify-items:center;height:92px;background:#000;color:#fff;border:0;border-radius:6px;cursor:pointer;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.qty-btn .n{font-weight:800;font-size:18px;line-height:1}
.qty-btn .lbl{font-size:14px}
.qty-btn .pr{font-weight:700;font-size:14px}
.qty-btn.cancel{background:#fff;color:#111;border:1px solid #111}
.qty-btn.cancel .lbl{text-decoration:underline}
@media (max-width:960px){
  .qty-wrap{width:min(680px,94vw)}
  .qty-title{font-size:32px}
  .qty-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.media-nav { display: none !important; }

/* Aviso sem fundo */
#pickHint{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Botão do aviso com “vidro” (blur) */
#pickHint button,
#pickHint .btn {                /* ajuste se o seu botão tiver outra classe */
  background: rgba(255,255,255,0.6);  /* 60% “leitoso” p/ o blur aparecer */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Safari */
  border: 1px solid rgba(0,0,0,0.08);
  color: #0f172a;
  border-radius: 0;             /* reto (mantenho o padrão do seu projeto) */
  padding: 10px 16px;
  font-weight: 800;
}
#pickOverlay { display: none !important; }
/* ou só os botões: */
#pickOverlay .pick-btn { display: none !important; }

/* Hover/focus (opcional) */
#pickHint button:hover,
#pickHint .btn:hover {
  background: rgba(255,255,255,0.7);
}

/* Fallback quando não houver suporte a backdrop-filter (opcional) */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  #pickHint button,
  #pickHint .btn {
    background: rgba(255,255,255,0.9);
  }
}


#selDot{
  position: fixed;
  z-index: 60;

  width: var(--marker-size);
  height: var(--marker-size);

  /* Faz a cor do traço vir da variável */
  color: var(--marker-stroke);

  /* SVG só com contorno, usando currentColor para pegar a cor acima */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'>\
  <path d='M34 8 L18 24 L34 40'/>\
</svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center left;

  filter: drop-shadow(0 -120px 6px rgba(0,0,0,.5));
  transform: translate(0,-50%);
  pointer-events: none;           /* não intercepta cliques no preview */
  will-change: transform;         /* animações/posicionamento mais suaves */
}
#selDot[hidden]{ display:none !important; }


/* reduz gestos que viram zoom */
html, body { touch-action: manipulation; }