.ecp-root { margin: 0 0 16px; text-align: left; }
.ecp-preview { max-width: 420px; margin: 0 0 12px; border: 1px solid #d9dce1; border-radius: 6px; overflow: hidden; background: #fff; }
.ecp-canvas { display: block; width: 100%; height: auto; }
.ecp-field { margin: 0 0 12px; }
.ecp-label { display: block; margin: 0 0 4px; font-weight: 600; }
.ecp-counter { float: right; font-weight: 400; font-size: 12px; opacity: .7; }
.ecp-input { display: block; width: 100%; max-width: 420px; padding: 8px 10px; border: 1px solid #c4c9d0; border-radius: 4px; font: inherit; background: #fff; color: inherit; }
textarea.ecp-input { min-height: 72px; resize: vertical; }
.ecp-upload { display: flex; align-items: center; gap: 8px; max-width: 420px; padding: 10px; border: 1px dashed #c4c9d0; border-radius: 4px; }
.ecp-upload-btn, .ecp-remove { padding: 6px 12px; border: 1px solid #c4c9d0; border-radius: 4px; background: #fff; color: inherit; font: inherit; cursor: pointer; }
.ecp-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .7; }
.ecp-help { margin-top: 3px; font-size: 12px; opacity: .7; }
.ecp-error { margin-top: 3px; font-size: 12px; color: #c62828; }
.ecp-busy { opacity: .6; pointer-events: none; }
.ecp-swatches { display: flex; flex-wrap: wrap; gap: 8px; max-width: 420px; }
.ecp-swatch { padding: 2px; border: 2px solid #c4c9d0; border-radius: 6px; background: #fff; color: inherit; font: inherit; cursor: pointer; min-width: 56px; min-height: 56px; }
.ecp-swatch img { display: block; width: 56px; height: 56px; object-fit: contain; }
.ecp-swatch[aria-pressed="true"] { border-color: #1f2328; }
select.ecp-input { appearance: auto; }
.ecp-tabs { display: flex; flex-wrap: wrap; gap: 6px; max-width: 420px; margin: 0 0 8px; }
.ecp-tab { padding: 6px 12px; border: 1px solid #c4c9d0; border-radius: 4px; background: #fff; color: inherit; font: inherit; cursor: pointer; }
.ecp-tab[aria-pressed="true"] { background: #1f2328; border-color: #1f2328; color: #fff; }
.ecp-chosen { font-weight: 400; }
.ecp-launch { margin: 0 0 16px; text-align: left; }
.ecp-open-btn { padding: 12px 24px; border: 0; border-radius: 4px; background: #ebebeb; color: #111; font: inherit; font-weight: 700; cursor: pointer; }
.ecp-open-btn:hover { background: #dedede; }
.ecp-summary { margin-top: 8px; font-size: 13px; }
.ecp-overlay { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.ecp-overlay[hidden] { display: none; }
.ecp-root, .ecp-root *, .ecp-dialog, .ecp-dialog * { box-sizing: border-box; }
.ecp-dialog { position: relative; width: 100%; max-width: 900px; max-height: 100%; overflow: auto; padding: 44px 24px 24px; border-radius: 8px; background: #fff; color: #1f2328; }
.ecp-close { position: absolute; top: 6px; right: 10px; border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer; color: inherit; }
.ecp-dialog .ecp-root { display: flex; gap: 24px; align-items: flex-start; margin: 0; }
.ecp-col { flex: 1; min-width: 0; }
.ecp-dialog .ecp-tabs, .ecp-dialog .ecp-preview, .ecp-dialog .ecp-input, .ecp-dialog .ecp-upload, .ecp-dialog .ecp-swatches { max-width: none; }
.ecp-dialog .ecp-preview { margin: 0; }
.ecp-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.ecp-done, .ecp-add { padding: 12px 22px; border: 1px solid #1f2328; border-radius: 4px; font: inherit; font-weight: 700; cursor: pointer; }
.ecp-done { background: #fff; color: #1f2328; }
.ecp-add { background: #1f2328; color: #fff; }
html.ecp-open { overflow: hidden; }
@media (max-width: 700px) {
  .ecp-dialog { padding: 44px 16px 16px; }
  .ecp-dialog .ecp-root { flex-direction: column; gap: 12px; }
  .ecp-col { width: 100%; }
}