/* Front styles */
.wctpl-panel{border:1px dashed #ddd; padding:12px; margin:14px 0}
.wctpl-row{display:flex; gap:18px; margin-bottom:10px; align-items:center}
.wctpl-radio{display:flex; gap:8px; align-items:center; font-weight:600}
.wctpl-fields{margin-top:6px}
.wctpl-fonts,.wctpl-colors{display:flex; gap:12px; flex-wrap:wrap; margin:10px 0}
.wctpl-chip{user-select:none; cursor:pointer; padding:10px 18px; border-radius:10px; background:#6d8dfd; color:#fff; font-weight:800; box-shadow:0 1px 0 rgba(0,0,0,.08)}
.wctpl-chip.is-active{outline:3px solid rgba(109,141,253,.35); background:#5077ff}
.wctpl-chip:hover{opacity:.85}
.wctpl-color{width:20px;height:20px;border-radius:50%;border:2px solid #e9e9e9;display:inline-block;vertical-align:middle;cursor:pointer}
.wctpl-color.is-active{box-shadow:0 0 0 3px rgba(0,0,0,.08) inset, 0 0 0 3px rgba(0,0,0,.08)}
.wctpl-text{width:100%;padding:10px 12px;margin:8px 0;border:1px solid #ddd;border-radius:6px}
.wctpl-preview{position:relative;background:#f8f8f8;border:1px dashed #ddd;border-radius:10px;min-height:220px;overflow:hidden;background-size:contain;background-repeat:no-repeat;background-position:center top}
/* overlay */
#wctpl-preview .wctpl-overlay{position:absolute;pointer-events:none;z-index:3;left:var(--wctpl-left,0%);top:var(--wctpl-top,0%);width:var(--wctpl-width,50%)}
#wctpl-preview .wctpl-overlay__text{display:block;width:100%;line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:center top}