.arvizr-wrap{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.arvizr-controls{position:sticky;top:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.arvizr-field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.arvizr-inline{display:flex;gap:8px;align-items:center}
.arvizr-field>label{font-size:12px;font-weight:600;color:#374151}
.arvizr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0}
.arvizr-btn{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;cursor:pointer}
.arvizr-btn:hover{background:#e5e7eb}
.arvizr-btn-primary,.arvizr-btn.arvizr-btn-primary{background:#111827;color:#fff;border-color:#111827}
.arvizr-stage-wrap{position:relative;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.arvizr-canvas{width:100%;height:auto;display:block;background:#f9fafb}
.arvizr-help{pointer-events:none;position:absolute;bottom:8px;left:8px;background:rgba(255,255,255,.8);padding:6px 8px;border-radius:8px;font-size:12px}
.arvizr-measure{border-top:1px dashed #e5e7eb;margin-top:10px;padding-top:10px;font-size:13px;color:#374151}
.arvizr-ppcm{margin-left:8px;color:#111827;font-weight:600}
.arvizr-cta{margin-top:12px;display:flex;gap:8px}
/* Thumbs */
.arvizr-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.arvizr-thumb{border:1px solid #e5e7eb;border-radius:8px;padding:4px;background:#fff;cursor:pointer}
.arvizr-thumb img{display:block;width:56px;height:56px;object-fit:cover;border-radius:6px}
.arvizr-thumb.is-active{outline:2px solid #111827}
@media (max-width:900px){.arvizr-wrap{grid-template-columns:1fr}}


/* v1.3.9 UX tweaks */
/* Make number inputs roomy, especially Art width (cm) */
.arvizr-field input[type="number"],
.arvizr-art-width-cm {
  min-width: 140px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.2;
}

/* Put actions and CTA on separate lines with spacing */
.arvizr-actions,
.arvizr-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

/* Make the main buttons full-width in the control column for a cleaner look */
.arvizr-actions .arvizr-btn,
.arvizr-cta .arvizr-btn,
.arvizr-cta a.arvizr-btn {
  width: 100%;
  text-align: center;
  padding: 12px 14px;
  font-size: 15px;
}

/* Ensure the URL row layout doesn't squish buttons/inputs */
.arvizr-inline {
  gap: 10px;
}
.arvizr-inline input[type="url"] {
  flex: 1 1 auto;
  min-width: 0;
}


/* v1.4.1 layout: stack the first control grid (Art width, Scale, Rotate) */
.arvizr-controls > .arvizr-grid:first-of-type{
  grid-template-columns: 1fr;
  gap: 10px;
}
.arvizr-controls > .arvizr-grid:first-of-type .arvizr-field{
  margin-bottom: 6px;
}

/* v1.4.1 darker default buttons for readability */
.arvizr-btn{
  background: #1f2937;
  color: #fff;
  border-color: #1f2937;
}
.arvizr-btn:hover{ filter: brightness(1.08); }
.arvizr-btn:focus{ outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
.arvizr-cta a.arvizr-btn{ background:#1f2937; color:#fff; border-color:#1f2937; }