.isilti-personalizer {
  --isilti-ink: #111827;
  --isilti-gold: #D4AF37;
  --isilti-cream: #F5F1E8;
  box-sizing: border-box;
  width: 100%;
  max-width: 380px;
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid rgba(17, 24, 39, .14);
  border-radius: 12px;
  background: var(--isilti-cream);
  color: var(--isilti-ink);
  font-size: 15px;
}
.isilti-personalizer *, .isilti-personalizer *::before, .isilti-personalizer *::after { box-sizing: border-box; }
.isilti-personalizer__heading h3 { margin: 0 0 .35rem; color: var(--isilti-ink); }
.isilti-personalizer__heading p { margin: 0 0 1rem; }
.isilti-personalizer__https-warning { margin: 0 0 1rem; padding: .7rem .85rem; border-left: 4px solid #991b1b; border-radius: 4px; background: #fff; color: #991b1b; font-weight: 700; }
.isilti-personalizer__workspace { display: block; width: 100%; }
.isilti-mug-preview { position: relative; width: 100%; height: clamp(300px, 36vw, 360px); min-height: 300px; max-height: 360px; margin: 0 0 .8rem; overflow: hidden; border: 1px solid rgba(17, 24, 39, .14); border-radius: 10px; background: #fff; touch-action: none; }
.isilti-mug-preview canvas { display: block; width: 100%; height: 100%; }
.isilti-mug-preview__webgl { display: none !important; cursor: grab; }
.isilti-mug-preview.is-webgl .isilti-mug-preview__webgl { display: block !important; }
.isilti-mug-preview.is-webgl .isilti-mug-preview__fallback { display: none; }
.isilti-mug-preview__webgl:active { cursor: grabbing; }
.isilti-mug-preview__hint { position: absolute; right: .55rem; bottom: .45rem; margin: 0; padding: .2rem .38rem; border-radius: 4px; background: rgba(255,255,255,.8); font-size: .75rem; opacity: .75; pointer-events: none; }
.isilti-design-editor { width: 100%; margin: 0 0 .85rem; border: 1px solid rgba(17, 24, 39, .16); border-radius: 8px; background: rgba(255,255,255,.55); }
.isilti-design-editor > summary { padding: .65rem .75rem; cursor: pointer; font-weight: 700; }
.isilti-design-editor__body { padding: 0 .7rem .7rem; }
.isilti-personalizer__canvas-wrap { width: 100%; min-width: 0; }
.isilti-personalizer__canvas { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; border: 2px solid var(--isilti-gold); border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; }
.isilti-personalizer__hint { margin: .45rem 0 0; font-size: .78rem; opacity: .78; }
.isilti-personalizer__controls { display: flex; flex-direction: column; gap: .55rem; width: 100%; }
.isilti-personalizer__controls label { font-weight: 600; }
.isilti-personalizer__controls input[type=text], .isilti-personalizer__controls input[type=file] { width: 100%; min-height: 40px; padding: .55rem; border: 1px solid rgba(17, 24, 39, .35); border-radius: 6px; background: #fff; color: var(--isilti-ink); }
.isilti-personalizer__text-row { display: flex; width: 100%; min-width: 0; gap: .45rem; align-items: stretch; }
.isilti-personalizer__text-row input { min-width: 0; flex: 1 1 auto; }
.isilti-personalizer__text-row .isilti-btn { flex: 0 0 auto; min-width: 104px; }
.isilti-btn { min-width: 0; padding: 12px !important; border-radius: 6px !important; border: 1px solid var(--isilti-ink) !important; color: var(--isilti-ink) !important; background: #fff !important; cursor: pointer; font-size: 14px !important; line-height: 1.3 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; }
.isilti-btn:hover, .isilti-btn:focus { border-color: var(--isilti-gold) !important; box-shadow: 0 0 0 2px rgba(212, 175, 55, .28); }
.isilti-personalizer .isilti-save { width: 100%; border-color: var(--isilti-gold) !important; background: var(--isilti-gold) !important; color: var(--isilti-ink) !important; font-weight: 700; }
.isilti-personalizer button:disabled { opacity: .55; cursor: not-allowed; }
.isilti-personalizer__actions { display: flex; width: 100%; gap: .45rem; flex-wrap: wrap; }
.isilti-personalizer__actions .isilti-btn { flex: 1 1 120px; }
.isilti-personalizer__approval { display: flex; align-items: flex-start; gap: .45rem; margin: .45rem 0; font-weight: 500; }
.isilti-personalizer__approval input { flex: 0 0 auto; margin-top: .2rem; accent-color: var(--isilti-gold); }
.isilti-personalizer__status { min-height: 1.4em; margin: .1rem 0 0; font-size: .9rem; }
.isilti-personalizer__status.is-error { color: #991b1b; }
.isilti-personalizer__status.is-success { color: #166534; }
.isilti-personalizer__controls small { display: block; font-size: .8rem; opacity: .75; }
.isilti-personalizer input[type=hidden] { display: none !important; }
.isilti-admin-download { margin: .35rem 0; }
@media (max-width: 400px) {
  .isilti-personalizer { padding: .75rem; }
  .isilti-personalizer__text-row .isilti-btn { min-width: 96px; }
}