body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif; }
.font-raleway-dots { font-family: "Raleway Dots", system-ui, sans-serif; }
textarea { resize: none; }

/* Drag/drop */
.drag-area {
  border: 2px dashed #4a5568;
  transition: border-color 0.3s, background-color 0.3s;
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
}
.drag-area.active { border-color: #4c51bf; background-color: #3c4151; }

/* Pills for options */
.pill {
  display: grid;
  place-items: center;
  text-align: center;
  background: #111827;
  border: 1px solid #374151;
  border-radius: 0.5rem;
  padding: 0.6rem 0.4rem;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.05;
}
.pill span { font-size: 0.7rem; color: #9CA3AF; font-weight: 500; }
.pill input { display: none; }
.pill:has(input:checked) {
  background: #4f46e5; color: white; border-color: #4f46e5;
}

/* Small number inputs */
.num {
  background: #111827; border: 1px solid #374151; border-radius: 0.375rem; padding: 0.45rem 0.5rem; width: 5.5rem;
}
.range { width: 100%; }

/* Remove mouse-wheel increments on number inputs */
.no-wheel::-webkit-outer-spin-button,
.no-wheel::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-wheel { -moz-appearance: textfield; }
.no-wheel:focus { outline: none; }

/* Unit selector pills */
.unit { padding: 0.35rem 0.6rem; cursor: pointer; }
.unit input { display: none; }
.unit:has(input:checked) { background: #4f46e5; color: white; }

/* Preview scaling */
#preview-box { position: relative; }
.preview-canvas,
.watermark-canvas {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: center center;
  image-rendering: pixelated;
}
#ph { pointer-events: none; }

/* Watermark look */
.watermark-canvas { pointer-events: none; }

/* Color swatch in counts */
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid #374151; }

/* Buttons */
button:disabled { opacity: 0.55; cursor: not-allowed; }


/* Constrain uploaded thumbnail so wide images don't push UI */
#original-wrap { flex: 0 0 25%; max-width: 25%; }
#original-wrap img#original-thumb { width: 100%; height: auto; object-fit: contain; }



/* Footer layout v10.4 */
.pane-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-size: 0.9rem;
  color: #AEB7C2;
}
.footer-right { display:flex; align-items:center; gap:10px; }
#left-footer,

/* Footer copyright exact size + color */
#copyright-text{
  font-size: 11px !important;   /* match baseline 'text-[11px]' */
  color: #6B7280 !important;    /* Tailwind text-gray-500 */
  line-height: 1.25;
}

/* Ensure only the footer icons in the left footer display */
.left-pane .footer-icons { display: none !important; }
#left-footer .footer-icons { display: flex !important; gap: 10px; align-items: center; }




/* === Enforce vertical spacing between stacked action buttons (robust) === */
#reset-form-btn { margin-top: 12px !important; } /* direct target if present */
#preview-pane button + button,
#right-pane button + button,
.preview-pane button + button,
.panel button + button,
.controls button + button,
button + button { margin-top: 12px !important; } /* final fallback */

/* === RHINESTONE Step 2 Color Buttons — dropdown & arrow essentials === */
.pill { position: relative; overflow: visible; }

/* Arrow on active buttons (safe fallback even if JS adds inline arrow) */
.pill.color-active::after {
  content: '▼';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none;
}

/* Dropdown container (hidden by default) */
.pill .dropdown {
  display: none;
  position: absolute;
  z-index: 9999;
  left: 0;
  top: calc(100% + 4px);
  background: #111827;
  border: 1px solid #374151;
  border-radius: 0.375rem;
  min-width: 180px;
  padding: 6px 0;
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}

/* Shown when JS toggles .open on an active button */
.pill.color-active .dropdown.open { display: block; }

/* Menu items */
.pill .dropdown button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  font-size: 0.9rem;
  color: #E5E7EB;
  background: transparent;
}
.pill .dropdown button:hover { background: #1F2937; }

/* Swatch */
.pill .dropdown .sw {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  border: 1px solid #374151;
}

/* --- Compact spacing override --- */
.pill .dropdown button { padding: 2px 8px !important; line-height: 1.2 !important; }
/* === /RHINESTONE Step 2 === */

/* === P2 Dropdown Color Item Tight Override === */
.pill .dropdown button {
  padding: 1px 6px !important;  /* tighter vertical spacing */
  line-height: 1.1 !important;  /* reduced line height */
}

/* === P2 Dropdown Color Item Tight Override v2 === */
.pill .dropdown button {
  padding: 0 6px !important;     /* remove vertical padding */
  line-height: 1 !important;     /* tight line height */
  min-height: 22px !important;   /* cap row height */
  gap: 6px !important;           /* keep small gap */
  margin: 0 !important;
}
.pill .dropdown button span { margin: 0 !important; }
.pill .dropdown .sw {
  width: 10px !important;
  height: 10px !important;
  border-radius: 9999px !important;
  border: 1px solid #374151 !important;
}

/* === P2 Dropdown Tight Spacing v3 (targets body-attached dropdown) === */
div[data-slot] { font-size: 0.9rem !important; }
div[data-slot] button {
  padding: 2px 8px !important;
  line-height: 1.1 !important;
  min-height: 22px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
div[data-slot] .sw {
  width: 10px !important;
  height: 10px !important;
  border-radius: 9999px !important;
  border: 1px solid #374151 !important;
}


/* P5: identity modal (cookie) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:1000}
.modal.hidden{display:none}
.modal-content{background:#0f172a;color:#e5e7eb;padding:20px;border-radius:12px;max-width:420px;width:90%}
.modal-content h2{margin:0 0 8px 0;font-size:1.25rem}
.modal-content label{display:block;margin-top:10px}
.modal-content input{width:100%;padding:8px;margin-top:4px;border:1px solid #334155;border-radius:8px;background:#0b1220;color:#e5e7eb}
.modal-content .btn-primary{margin-top:14px;width:100%}