/* Layout geral */
.ncv-wrap{margin:20px auto;max-width:1200px}

/* Botões */
.ncv-btn{
  padding:10px 16px;border:none;border-radius:10px;
  background:#111;color:#fff;font-weight:700;cursor:pointer
}
.ncv-btn:disabled{opacity:.5;cursor:not-allowed}

/* Inputs */
.ncv-input{border:1px solid #ddd;border-radius:8px;padding:8px}
.ncv-label{display:block;margin-bottom:6px;font-weight:600}

/* Fundo quadriculado p/ transparência */
.bg-checkboard {
  background-image: linear-gradient(45deg, #dfe3f0 25%, transparent 25%),
                    linear-gradient(-45deg, #dfe3f0 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #dfe3f0 75%),
                    linear-gradient(-45deg, transparent 75%, #dfe3f0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* ===== Dropzone estilo Vectorizer ===== */
.ncv-dropzone{
  position:relative; border:2px dashed #3b82f6; border-radius:16px;
  background:#f8fbff; padding:44px; text-align:center; cursor:pointer;
  transition: box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.ncv-dropzone:hover{ box-shadow:0 6px 22px rgba(59,130,246,.15); background:#f3f8ff }
.ncv-dropzone.is-drag{ border-color:#2563eb; background:#ecf3ff; box-shadow:0 8px 28px rgba(37,99,235,.25) }
.ncv-dropzone:focus{ outline:2px solid #2563eb; outline-offset:4px }

.ncv-dropzone .ncv-file{
  position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer;
}

.ncv-drop-inner{ display:flex; flex-direction:column; align-items:center; gap:10px }
.ncv-drop-icon{ font-size:38px }
.ncv-drop-title{
  font-weight:800; color:#1f2a44; letter-spacing:.6px;
}
.ncv-drop-sub{ color:#6b7280; font-size:14px }
.ncv-drop-hint{ color:#6b7280; font-size:12px }
.ncv-drop-hint kbd{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono","Courier New",monospace;
  background:#eef2ff; border:1px solid #c7d2fe; border-bottom-width:2px;
  padding:0 6px; border-radius:6px; margin:0 2px;
}

/* Botão principal azul */
.ncv-choose{
  background:#2563eb; color:#fff; border-radius:10px; padding:10px 16px;
  box-shadow:0 6px 16px rgba(37,99,235,.25); border:0
}
.ncv-choose:hover{ filter:brightness(1.05) }
.ncv-choose:active{ transform: translateY(1px) }

/* Preview */
.ncv-preview{min-height:320px;border:1px solid #e5e7eb;border-radius:14px}

/* Swatches da paleta */
.ncv-swatch{
  width:28px;height:28px;border-radius:999px;border:1px solid rgba(0,0,0,.15);
  box-shadow:0 1px 3px rgba(0,0,0,.08); cursor:pointer
}
.ncv-swatch:active{ transform:scale(.97) }

/* Download link */
.ncv-download{
  display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none;
  background:#0a7;color:#fff;font-weight:700
}
.hidden{ display:none !important }

.ncv-preview{
  position:relative; min-height:520px; border:1px solid #e5e7eb; border-radius:14px;
  overflow:hidden; /* evita quebrar layout */
}

/* Camadas ocupam toda a área do preview e centralizam conteúdo */
.ncv-original,
.ncv-svg-view{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  overflow:auto; /* permite rolar se o conteúdo for muito grande */
}

/* Bitmap preview (imagem) ocupa no máximo o contêiner */
.ncv-original img{
  max-width:100%; max-height:100%; height:auto; width:auto; display:block;
}

/* SVG renderizado deve se adaptar ao contêiner */
.ncv-svg-view svg{
  max-width:100%; max-height:100%; height:auto; width:auto; display:block;
}

/* Overlay de progresso */
.ncv-progress{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.75); backdrop-filter:saturate(120%) blur(1px);
  font-weight:700; color:#1f2a44; gap:12px;
}
.ncv-spinner{
  width:18px; height:18px; border:2px solid #c7d2fe; border-top-color:#4f46e5; border-radius:50%;
  animation:ncvspin 0.9s linear infinite;
}
@keyframes ncvspin{to{transform:rotate(360deg)}}