.sts-builder { display: grid; grid-template-columns: 360px 1fr; gap: 20px; }
.sts-left { background: #fff; border: 1px solid #ddd; padding: 20px; border-radius: 12px; }
.sts-right { background: #fff; border: 1px solid #ddd; padding: 20px; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }

.sts-canvas-toolbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; margin-bottom: 15px; }
.sts-toolbar-title{ text-align:center; font-weight:800; }
.sts-toolbar-spacer{ width: 120px; }
.sts-zoom-container { display: flex; gap: 5px; }

.sts-canvas-area { flex: 1; background: #f0f2f5; border-radius: 8px; overflow: auto; position: relative; padding: 40px; }
#sheetsContainer { display: inline-flex; gap: 40px; transform-origin: top left; min-width: 100%; }

.sts-sheet-wrap { display: flex; flex-direction: column; align-items: center; }
.sts-sheet-info { font-weight: bold; margin-bottom: 10px; font-size: 14px; color: #444; }

.sts-canvas-grid {
  background: var(--sts-sheet-bg, #fff);
  position: relative;
  box-shadow: 0 5px 25px rgba(0,0,0,0.1);
  background-image: radial-gradient(var(--sts-sheet-dot, #ddd) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* --- EXPORT: keep the on-screen grid, but export true transparent PNGs --- */
.sts-canvas-grid.sts-export-transparent{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.sts-placed-design { position: absolute; background-size: 100% 100%; cursor: move; }
.sts-placed-design.selected { outline: 2px solid #2f6bff; z-index: 100; }

.sts-del { position:absolute; top:-12px; left:-12px; width:24px; height:24px; background:#ff2d2d; color:#fff; border-radius:50%; display:none; align-items:center; justify-content:center; cursor:pointer; font-weight:800; font-size:16px; line-height:24px; text-align:center; z-index:110; }
.sts-rotate { position:absolute; top:-38px; left:50%; transform:translateX(-50%); width:18px; height:18px; background:#2f6bff; border-radius:50%; display:none; cursor:grab; z-index:110; }
.sts-handle.br { position:absolute; bottom:-10px; right:-10px; width:18px; height:18px; background:#fff; border:2px solid #2f6bff; border-radius:50%; display:none; cursor:nwse-resize; z-index:110; }

.sts-placed-design.selected .sts-del, 
.sts-placed-design.selected .sts-rotate, 
.sts-placed-design.selected .sts-handle { display: grid; }

.sts-upload { border: 2px dashed #ccc; padding: 25px; text-align: center; border-radius: 10px; cursor: pointer; background: #fafafa; }
.sts-upload-hint{
  margin-top: 8px;
  font-size: 12px;
  color: #555;
  line-height: 1.35;
}
.sts-upload-alert{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.35;
  background: rgba(255, 193, 7, 0.18);
  border: 1px solid rgba(255, 193, 7, 0.45);
  color: #4a3b00;
}
.sts-design-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.sts-design-item { height: 80px; background-size: contain; background-repeat: no-repeat; background-position: center; border: 1px solid #eee; cursor: pointer; background-color: var(--sts-thumb-bg, #fff); }
.sts-design-item.selected { border-color: #2f6bff; box-shadow: 0 0 0 2px #2f6bff; }

/* --- Preview Background Controls (UI only; never exported) --- */
.sts-preview-bg-controls{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sts-preview-bg-label{
  font-size: 11px;
  font-weight: 800;
  color: #444;
  margin-right: 2px;
  white-space: nowrap;
}
.sts-bg-btn{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.18) !important;
  background: #fff !important;
  cursor: pointer;
  padding: 0;
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
}
.sts-bg-btn.is-active{
  box-shadow: 0 0 0 2px #2f6bff;
  border-color: rgba(47,107,255,0.55);
}

/* Swatch colors */
.sts-bg-btn[data-sts-bg="light-gray"]{ background: #f3f4f6 !important; }
.sts-bg-btn[data-sts-bg="dark-gray"]{ background: #2b2f36 !important; }
.sts-bg-btn[data-sts-bg="light-pink"]{ background: #ffe6ef !important; }
.sts-bg-btn[data-sts-bg="dark-pink"]{ background: #5a2037 !important; }

/* Left panel placement under "Add to Sheet" */
.sts-preview-bg-left{
  margin-top: 10px;
  padding: 10px 10px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
}
.sts-preview-bg-left-title{
  font-size: 12px;
  font-weight: 800;
  color: #333;
  margin-bottom: 6px;
}
.sts-preview-bg-controls--left{
  justify-content: flex-start;
}

/* Toolbar spacing */
.sts-preview-bg-controls--toolbar{
  margin-left: 10px;
}

/* Apply preview variables via a single wrapper class */
.sts-builder-wrap.sts-preview-bg-light-gray{ --sts-sheet-bg:#f3f4f6; --sts-sheet-dot:rgba(0,0,0,0.14); --sts-thumb-bg:#f3f4f6; }
.sts-builder-wrap.sts-preview-bg-dark-gray{  --sts-sheet-bg:#2b2f36; --sts-sheet-dot:rgba(255,255,255,0.16); --sts-thumb-bg:#2b2f36; }
.sts-builder-wrap.sts-preview-bg-light-pink{ --sts-sheet-bg:#ffe6ef; --sts-sheet-dot:rgba(0,0,0,0.14); --sts-thumb-bg:#ffe6ef; }
.sts-builder-wrap.sts-preview-bg-dark-pink{  --sts-sheet-bg:#5a2037; --sts-sheet-dot:rgba(255,255,255,0.16); --sts-thumb-bg:#5a2037; }

.sts-btn { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #ddd; background: #fff; font-weight: bold; cursor: pointer; }
.sts-btn-primary { background: #1f2f46; color: #fff; border: none; }

.sts-step-subtitle { font-size: 13px; color: #444; margin: 6px 0 10px; line-height: 1.25; }

/* --- External tool buttons (AI Designer / Canva) --- */
.sts-ext-tools{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0 12px;
}
.sts-ext-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: #111;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.sts-ext-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.sts-ext-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sts-ext-label{
  font-size: 12px;
  letter-spacing: 0.2px;
}

/* Improve drag/rotate/resize reliability */
.sts-placed-design, .sts-placed-design * { touch-action: none; }


/* --- Upload overlay: ensures file picker opens even if JS click is blocked by theme wrappers --- */
#uploadArea{ position: relative; }
.sts-file-input-overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  cursor:pointer !important;
  display:block !important;
}

/* --- FIX: Per-copy edit controls (rotate/resize/delete) --- */
.sts-placed-design { position:absolute; box-sizing:border-box; }
.sts-placed-design .sts-del{
  position:absolute !important;
  top:-12px !important;
  right:-12px !important;
  width:24px !important;
  height:24px !important;
  border-radius:999px !important;
  background:#e53935 !important;
  color:#fff !important;
  font-weight:900 !important;
  font-size:16px !important;
  line-height:24px !important;
  text-align:center !important;
  display:none !important;
  z-index:120 !important;
  cursor:pointer !important;
  user-select:none !important;
}
.sts-placed-design .sts-rotate{
  position:absolute !important;
  top:-18px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:16px !important;
  height:16px !important;
  border-radius:999px !important;
  border:2px solid #2f6bff !important;
  background:#fff !important;
  display:none !important;
  z-index:120 !important;
  cursor:grab !important;
}
.sts-placed-design .sts-handle.br{
  position:absolute !important;
  bottom:-10px !important;
  right:-10px !important;
  width:18px !important;
  height:18px !important;
  border-radius:4px !important;
  border:2px solid #2f6bff !important;
  background:#fff !important;
  display:none !important;
  z-index:120 !important;
  cursor:nwse-resize !important;
}
.sts-placed-design.selected .sts-del,
.sts-placed-design.selected .sts-rotate,
.sts-placed-design.selected .sts-handle{ display:block !important; }

/* --- Action overlay (download / add to cart) --- */
.sts-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.sts-overlay-card{
  background: #fff;
  border-radius: 14px;
  padding: 18px 18px 16px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  text-align: center;
}
.sts-spinner{
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  border: 4px solid rgba(0,0,0,0.12);
  border-top-color: rgba(0,0,0,0.55);
  border-radius: 999px;
  animation: stsSpin 0.8s linear infinite;
}
@keyframes stsSpin { to { transform: rotate(360deg); } }

.sts-overlay-title{ font-weight: 800; font-size: 16px; color: #111; }
.sts-overlay-sub{ margin-top: 6px; font-size: 13px; color: #333; line-height: 1.35; }
.sts-overlay-detail{ margin-top: 10px; font-size: 12px; color: #444; }

.sts-overlay-progress{
  margin-top: 12px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.10);
  overflow: hidden;
}
.sts-overlay-bar{
  height: 100%;
  width: 0%;
  background: rgba(0,0,0,0.55);
  transition: width 120ms linear;
}


/* --- Rotation panel (left sidebar) --- */
.sts-rotation-panel{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}
.sts-rotation-title{
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #374151;
}
.sts-rotation-quick{
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.sts-btn-small{
  padding: 6px 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
.sts-rotation-row{
  display:flex;
  align-items:center;
  gap: 6px;
  margin-bottom: 8px;
}
.sts-rotation-deg-label{
  font-size: 12px;
  color: #6b7280;
}
#rotationSlider{
  width:100%;
}
.sts-rotation-note{
  margin-top: 6px;
  font-size: 11px;
  color: #6b7280;
}

/* Ensure rotate handle is visible when selected */
.sts-placed-design.selected .sts-rotate{
  display:block !important;
}