builder-settings-types 0.0.460 → 0.0.461
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -469,7 +469,7 @@
|
|
|
469
469
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
470
470
|
<path d="M14.4132 4.80441C14.7371 4.80441 15 5.06731 15 5.39119C15 5.71507 14.7371 5.97797 14.4132 5.97797H13.7595L13.3736 11.7568C13.3426 12.2221 13.3179 12.6056 13.2722 12.9163C13.2256 13.234 13.1515 13.523 12.9982 13.7921C12.7591 14.2119 12.3978 14.5496 11.963 14.7604C11.6845 14.8953 11.3913 14.9499 11.0714 14.9753C10.7584 15.0002 10.3738 15 9.90749 15H8.09251C7.62617 15 7.24164 15.0002 6.92863 14.9753C6.6087 14.9499 6.31554 14.8953 6.037 14.7604C5.60221 14.5496 5.24093 14.2119 5.00176 13.7921C4.84855 13.523 4.77439 13.234 4.72775 12.9163C4.68215 12.6056 4.65745 12.2221 4.62643 11.7568L4.24053 5.97797H3.58678C3.26291 5.97797 3 5.71507 3 5.39119C3 5.06731 3.26291 4.80441 3.58678 4.80441H14.4132ZM5.79648 11.6793C5.82874 12.1632 5.8517 12.4923 5.88899 12.7463C5.9252 12.9927 5.96948 13.1207 6.02115 13.2115C6.14297 13.4253 6.32656 13.5975 6.54802 13.7048C6.64205 13.7504 6.7733 13.7864 7.02203 13.8062C7.27784 13.8265 7.6077 13.8264 8.09251 13.8264H9.90749C10.3923 13.8264 10.7222 13.8265 10.978 13.8062C11.2267 13.7864 11.358 13.7504 11.452 13.7048C11.6734 13.5975 11.857 13.4253 11.9789 13.2115C12.0305 13.1207 12.0748 12.9927 12.111 12.7463C12.1483 12.4923 12.1713 12.1632 12.2035 11.6793L12.5841 5.97797H5.41586L5.79648 11.6793ZM7.21057 11.1048V8.0978C7.21057 7.77392 7.47348 7.51101 7.79736 7.51101C8.1211 7.51117 8.38326 7.77402 8.38326 8.0978V11.1048C8.38326 11.4286 8.1211 11.6915 7.79736 11.6916C7.47348 11.6916 7.21057 11.4287 7.21057 11.1048ZM9.61674 11.1048V8.0978C9.61674 7.77402 9.8789 7.51117 10.2026 7.51101C10.5265 7.51101 10.7894 7.77392 10.7894 8.0978V11.1048C10.7894 11.4287 10.5265 11.6916 10.2026 11.6916C9.8789 11.6915 9.61674 11.4286 9.61674 11.1048ZM10.8044 3C11.1283 3 11.3912 3.26291 11.3912 3.58678C11.3912 3.91066 11.1283 4.17357 10.8044 4.17357H7.19559C6.87172 4.17357 6.60881 3.91066 6.60881 3.58678C6.60881 3.26291 6.87172 3 7.19559 3H10.8044Z" fill="#FF5630"/>
|
|
471
471
|
</svg>
|
|
472
|
-
`;f.innerHTML=`${d}<span>${this.deleteItemCfg.deleteButtonLabel||"Delete"}</span>`,f.addEventListener("mouseenter",()=>{f.style.backgroundColor="#fef2f2"}),f.addEventListener("mouseleave",()=>{f.style.backgroundColor="transparent"}),f.addEventListener("click",p=>{var m;p.stopPropagation(),p.preventDefault(),(m=this.onDeleteRequest)==null||m.call(this)}),h.appendChild(f),a.appendChild(h)}return t.appendChild(i),t.appendChild(s),e.appendChild(t),e.appendChild(a),this.elementRef=e,_g.trackElement(e),setTimeout(()=>{this.updateNestingStyles()},0),this.pendingBlurHandler&&(this.pendingBlurHandler=null),e}collapse(){if(!this.elementRef||this.isCollapsed)return;const e=this.elementRef.querySelector(".setting-group-content"),t=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");e&&t&&i&&(this.isCollapsed=!0,e.classList.add("collapsed"),t.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const e=this.elementRef.querySelector(".setting-group-content"),t=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");e&&t&&i&&(this.isCollapsed=!1,e.classList.remove("collapsed"),t.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}getJson(){return JSON.stringify(this.getValuesForJson(),null,2)}setJson(e){try{const t=JSON.parse(e);let i=t;const n=Object.keys(this.settings),s=Object.keys(t);if(!n.some(o=>s.includes(o))&&s.length===1){const o=s[0];i=t[o]}this.setValue(i)}catch(t){throw console.error("Invalid JSON provided to setJson:",t),new Error("Invalid JSON format")}}};of.hiddenElements=new Set;let Ir=of;class b3 extends Ir{constructor(e){super(e),this.isRootNode=!0}}function o$(r){return new X1(r)}class X1 extends Ir{constructor(e){super(e);const t=Object.keys(this.settings)[0];this.activeTabId=t||""}getActiveTabId(){return this.activeTabId}switchToTab(e){if(!this.settings[e]||this.activeTabId===e)return;this.activeTabId=e,this.updateTabUI();const t=this.getValues();this.initialValues=t}getValues(e){return e!==void 0?super.getValues(e):{...super.getValues(),activeTabId:this.activeTabId}}updateTabUI(){if(!this.tabsContainer||!this.contentContainers)return;this.tabsContainer.querySelectorAll(".tab-button").forEach(t=>{t.getAttribute("data-tab-id")===this.activeTabId?t.classList.add("active"):t.classList.remove("active")}),Object.entries(this.contentContainers).forEach(([t,i])=>{t===this.activeTabId?i.classList.add("active"):i.classList.remove("active")})}draw(){const e=super.draw();e.classList.add("tabs-settings-container");const t=e.querySelector(".setting-group-content");if(!t)return e;t.innerHTML="";const i=document.createElement("div");i.className="tabs-header",this.tabsContainer=i;const n=document.createElement("div");if(n.className="tab-content",this.contentContainers={},Object.keys(this.settings).forEach((s,a)=>{const o=document.createElement("button");o.className="tab-button",o.type="button",o.setAttribute("data-tab-id",s),o.textContent=s,o.addEventListener("click",()=>this.switchToTab(s)),i.appendChild(o);const l=document.createElement("div");l.className="tab-panel",this.contentContainers[s]=l;const c=this.settings[s];c&&(At(c)&&typeof c.setNestingLevel=="function"&&c.setNestingLevel(this.getNestingLevel()+1),l.appendChild(c.draw())),n.appendChild(l),a===0&&!this.activeTabId&&(this.activeTabId=s)}),this.title&&this.title.trim()!==""){const s=document.createElement("div");s.className="tabs-title";const a=document.createElement("h3");a.textContent=this.title,s.appendChild(a),t.appendChild(s)}if(t.appendChild(i),t.appendChild(n),!this.activeTabId){const s=Object.keys(this.settings)[0];this.activeTabId=s||""}return this.updateTabUI(),e}}function E3(r){return new Ir(r)}function l$(r){return r}const Ga=class Ga extends Ir{constructor(e){super({...e}),this.isInitialized=!1,this.pendingSettingValuesByKey={},this.isRootNode=e.isRootNode??!1}setValue(e){if(this.isInitialized){super.setValue(e);return}Object.entries(e).forEach(([t,i])=>{if(Ga.IGNORE_KEYS.includes(t))return;if(Ga.DEFAULT_KEYS.includes(t)){super.setValue({[t]:i});return}const n=this.settings[t];if(n){n.setValue(i);return}this.pendingSettingValuesByKey[t]=i})}addSetting(e,t){if(this.isInitialized){super.addSetting(e,t);return}const i=this.pendingSettingValuesByKey[e];super.addSetting(e,t),super.setValue({[e]:i}),delete this.pendingSettingValuesByKey[e],this.isInitialized=Object.keys(this.pendingSettingValuesByKey).length===0}getValues(e){return e?super.getValues(e):{...this.pendingSettingValuesByKey,...super.getValues(),isInitialized:this.isInitialized}}cleanup(){this.pendingSettingValuesByKey={},this.isInitialized=!1,super.cleanup(),this.settings={}}};Ga.IGNORE_KEYS=["isInitialized"],Ga.DEFAULT_KEYS=["$id","isRootNode"];let Bd=Ga;class D3 extends Qe{constructor(e={}){super(e),this.inputType="text",e.onChange&&this.setOnChange(e.onChange)}draw(){const e=t=>{this.props.maxLength!==void 0&&(t.maxLength=this.props.maxLength),this.props.className&&t.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:e})}}const c$="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' strokeLinecap='round' strokeLinejoin='round'/></svg>";class Ti extends D3{constructor(e){super({...e,icon:e.icon||c$,title:e.title||"Color",default:e.default?Ti.normalizeColorValue(e.default):"#000000"}),this.inputType="color",this.element=null,this.colorInputEl=null,this.textInputEl=null,this.detectChange=e.detectChange}static normalizeColorValue(e){return e.startsWith("var(--")?e:e.startsWith("#")?Ti.normalizeHexValue(e):e.includes(",")?Ti.rgbToHexStatic(e):Ti.normalizeHexValue(e)}static normalizeHexValue(e){return e=e.replace("#",""),e.length===3&&(e=e.split("").map(t=>t+t).join("")),e.length!==6?(console.warn(`Invalid hex value "${e}", using default "#000000"`),"#000000"):/^[0-9A-Fa-f]{6}$/.test(e)?`#${e.toLowerCase()}`:(console.warn(`Invalid hex value "${e}", using default "#000000"`),"#000000")}static rgbToHexStatic(e){const t=e.split(",").map(u=>parseInt(u.trim()));if(t.length!==3||t.some(isNaN))return console.warn(`Invalid RGB value "${e}", using default "#000000"`),"#000000";const[i,n,s]=t,a=Math.max(0,Math.min(255,i)),o=Math.max(0,Math.min(255,n)),l=Math.max(0,Math.min(255,s)),c=u=>{const h=u.toString(16);return h.length===1?"0"+h:h};return`#${c(a)}${c(o)}${c(l)}`}setValue(e){if(e===void 0){this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000");return}if(typeof e=="string"){const t=Ti.normalizeColorValue(e);this.value=t,this.colorInputEl&&(this.colorInputEl.value=t),this.textInputEl&&(this.textInputEl.value=t),this.onChange&&this.onChange(t),this.props.detectChange&&this.props.detectChange(t)}else this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000")}hexToRgb(e){e=e.replace("#","");const t=parseInt(e.substring(0,2),16),i=parseInt(e.substring(2,4),16),n=parseInt(e.substring(4,6),16);return`${t}, ${i}, ${n}`}draw(){const e=document.createElement("div");if(e.className="color-setting-wrapper "+(this.props.wrapperClassName||""),this.props.title||this.props.icon){const m=document.createElement("div");if(m.className="icon-container",this.props.icon){const g=document.createElement("span");g.className="input-icon",g.innerHTML=this.props.icon,m.appendChild(g)}if(this.props.title){const g=document.createElement("span");g.className="input-label",g.textContent=this.props.title,m.appendChild(g)}e.appendChild(m)}const t=document.createElement("div");t.className="color-input-wrapper";const i=document.createElement("div");i.className="color-setting-tabs",i.style.display="flex",i.style.marginBottom="8px",i.style.gap="4px";const n=document.createElement("button");n.className="color-tab active",n.textContent="Solid";const s=document.createElement("button");s.className="color-tab",s.textContent="Global",i.appendChild(n),i.appendChild(s);const a=document.createElement("div");a.className="color-content-solid";const o=document.createElement("div");o.className="color-content-global",o.style.display="none",o.style.display="grid",o.style.gridTemplateColumns="repeat(auto-fill, minmax(30px, 1fr))",o.style.gap="8px";const l=()=>{try{if(o.innerHTML="",!Qe){console.error("ColorSetting: Setting class is undefined");const g=document.createElement("div");g.textContent="Error: System error (Setting undefined)",o.appendChild(g);return}const m=Qe.GlobalVariables;if(!m||Object.keys(m).length===0){const g=document.createElement("div");g.textContent="No global colors defined",g.style.gridColumn="1 / -1",g.style.fontSize="12px",g.style.color="#666",o.appendChild(g);return}Object.entries(m).forEach(([g,O])=>{const x=document.createElement("button");x.className="global-color-btn",x.title=g,x.style.width="30px",x.style.height="30px",x.style.borderRadius="50%",x.style.border="1px solid #ddd",x.style.backgroundColor=yl(O),x.style.cursor="pointer",this.value===`var(--${g})`&&(x.style.border="2px solid #2196f3"),x.addEventListener("click",v=>{var C,k;v.preventDefault();const S=`var(--${g})`;this.value=S,(C=this.onChange)==null||C.call(this,S),(k=this.detectChange)==null||k.call(this,S),Array.from(o.children).forEach(w=>{w.style.border="1px solid #ddd"}),x.style.border="2px solid #2196f3",h.style.backgroundColor=yl(O)}),o.appendChild(x)})}catch(m){console.error("ColorSetting: Error in renderGlobalOptions",m),o.innerHTML="Error loading global options"}};l(),n.addEventListener("click",m=>{m.preventDefault(),n.classList.add("active"),s.classList.remove("active"),a.style.display="flex",o.style.display="none",this.value&&this.value.startsWith("var(--")}),s.addEventListener("click",m=>{m.preventDefault(),s.classList.add("active"),n.classList.remove("active"),a.style.display="none",o.style.display="grid",l()}),this.value&&this.value.startsWith("var(--")?s.click():n.click();const c=m=>{const g=m.value.trim();if(!g)return t.classList.remove("error"),!0;const x=/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(g);return x?t.classList.remove("error"):t.classList.add("error"),x},u=document.createElement("input");u.type="color",u.className="color-picker",u.value=this.value&&!this.value.startsWith("var(--")?this.value:"#000000",u.setAttribute("aria-label","Choose color"),u.setAttribute("title","Click to open color picker"),this.getDataPropsPath()&&u.setAttribute("data-test-id",this.getDataPropsPath()),this.colorInputEl=u;const h=document.createElement("div");h.className="color-preview";let f=this.value||"#000000";if(f.startsWith("var(--")){const m=f.replace("var(--","").replace(")","");f=(Qe.GlobalVariables||{})[m]||"#020202ff"}h.style.backgroundColor=yl(f);const d=document.createElement("input");d.type="text",d.className="color-text-input",d.value=this.value||"",d.placeholder="#000000",d.setAttribute("pattern","#[0-9A-Fa-f]{6}"),d.setAttribute("title","Enter a hex color value (e.g., #ff0000)"),d.setAttribute("aria-label","Hex color value"),d.setAttribute("maxlength","7"),this.getDataPropsPath()&&d.setAttribute("data-test-id",`${this.getDataPropsPath()}_text`),this.textInputEl=d;const p=m=>{var O,x;let g=m.trim();if(g&&!g.startsWith("#")&&!g.startsWith("var(")&&/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(g)&&(g="#"+g,this.textInputEl&&(this.textInputEl.value=g)),this.textInputEl&&c(this.textInputEl)){const v=Ti.normalizeColorValue(g);this.value=v,(O=this.onChange)==null||O.call(this,v),(x=this.detectChange)==null||x.call(this,v),this.colorInputEl&&(this.colorInputEl.value=v),h.style.backgroundColor=v}};return this.textInputEl.addEventListener("input",m=>{const g=m.target.value;p(g)}),this.textInputEl.addEventListener("paste",m=>{var O;m.preventDefault();const g=((O=m.clipboardData)==null?void 0:O.getData("text"))||"";this.textInputEl&&(this.textInputEl.value=g.trim(),p(g))}),this.textInputEl.addEventListener("keydown",m=>{var g,O,x;m.key==="Enter"&&(m.preventDefault(),p(((g=this.textInputEl)==null?void 0:g.value)||""),(O=this.textInputEl)==null||O.blur()),m.key==="Escape"&&(this.textInputEl&&this.value&&(this.textInputEl.value=this.value),(x=this.textInputEl)==null||x.blur(),t.classList.remove("error"))}),this.colorInputEl.addEventListener("input",m=>{var x,v;const g=m.target.value,O=Ti.normalizeColorValue(g);this.value=O,(x=this.onChange)==null||x.call(this,O),(v=this.detectChange)==null||v.call(this,O),this.textInputEl&&(this.textInputEl.value=O),h.style.backgroundColor=O,t.classList.remove("error")}),this.colorInputEl.addEventListener("change",m=>{var x,v;const g=m.target.value,O=Ti.normalizeColorValue(g);this.value=O,(x=this.onChange)==null||x.call(this,O),(v=this.detectChange)==null||v.call(this,O),this.textInputEl&&(this.textInputEl.value=O),h.style.backgroundColor=O}),a.appendChild(u),a.appendChild(h),a.appendChild(d),t.appendChild(i),t.appendChild(a),t.appendChild(o),e.appendChild(t),this.element=e,e}getElement(){return this.element}getNormalizedValue(){return this.value?Ti.normalizeColorValue(this.value):"#000000"}isValidHex(){return this.value?/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(this.value):!1}toRgb(){return this.isValidHex()?this.hexToRgb(this.value):"0, 0, 0"}}const u$=`
|
|
472
|
+
`;f.innerHTML=`${d}<span>${this.deleteItemCfg.deleteButtonLabel||"Delete"}</span>`,f.addEventListener("mouseenter",()=>{f.style.backgroundColor="#fef2f2"}),f.addEventListener("mouseleave",()=>{f.style.backgroundColor="transparent"}),f.addEventListener("click",p=>{var m;p.stopPropagation(),p.preventDefault(),(m=this.onDeleteRequest)==null||m.call(this)}),h.appendChild(f),a.appendChild(h)}return t.appendChild(i),t.appendChild(s),e.appendChild(t),e.appendChild(a),this.elementRef=e,_g.trackElement(e),setTimeout(()=>{this.updateNestingStyles()},0),this.pendingBlurHandler&&(this.pendingBlurHandler=null),e}collapse(){if(!this.elementRef||this.isCollapsed)return;const e=this.elementRef.querySelector(".setting-group-content"),t=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");e&&t&&i&&(this.isCollapsed=!0,e.classList.add("collapsed"),t.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const e=this.elementRef.querySelector(".setting-group-content"),t=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");e&&t&&i&&(this.isCollapsed=!1,e.classList.remove("collapsed"),t.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}getJson(){return JSON.stringify(this.getValuesForJson(),null,2)}setJson(e){try{const t=JSON.parse(e);let i=t;const n=Object.keys(this.settings),s=Object.keys(t);if(!n.some(o=>s.includes(o))&&s.length===1){const o=s[0];i=t[o]}this.setValue(i)}catch(t){throw console.error("Invalid JSON provided to setJson:",t),new Error("Invalid JSON format")}}};of.hiddenElements=new Set;let Ir=of;class b3 extends Ir{constructor(e){super(e),this.isRootNode=!0}}function o$(r){return new X1(r)}class X1 extends Ir{constructor(e){super(e);const t=Object.keys(this.settings)[0];this.activeTabId=t||""}getActiveTabId(){return this.activeTabId}switchToTab(e){if(!this.settings[e]||this.activeTabId===e)return;this.activeTabId=e,this.updateTabUI();const t=this.getValues();this.initialValues=t}getValues(e){return e!==void 0?super.getValues(e):{...super.getValues(),activeTabId:this.activeTabId}}updateTabUI(){if(!this.tabsContainer||!this.contentContainers)return;this.tabsContainer.querySelectorAll(".tab-button").forEach(t=>{t.getAttribute("data-tab-id")===this.activeTabId?t.classList.add("active"):t.classList.remove("active")}),Object.entries(this.contentContainers).forEach(([t,i])=>{t===this.activeTabId?i.classList.add("active"):i.classList.remove("active")})}draw(){const e=super.draw();e.classList.add("tabs-settings-container");const t=e.querySelector(".setting-group-content");if(!t)return e;t.innerHTML="";const i=document.createElement("div");i.className="tabs-header",this.tabsContainer=i;const n=document.createElement("div");if(n.className="tab-content",this.contentContainers={},Object.keys(this.settings).forEach((s,a)=>{const o=document.createElement("button");o.className="tab-button",o.type="button",o.setAttribute("data-tab-id",s),o.textContent=s,o.addEventListener("click",()=>this.switchToTab(s)),i.appendChild(o);const l=document.createElement("div");l.className="tab-panel",this.contentContainers[s]=l;const c=this.settings[s];c&&(At(c)&&typeof c.setNestingLevel=="function"&&c.setNestingLevel(this.getNestingLevel()+1),l.appendChild(c.draw())),n.appendChild(l),a===0&&!this.activeTabId&&(this.activeTabId=s)}),this.title&&this.title.trim()!==""){const s=document.createElement("div");s.className="tabs-title";const a=document.createElement("h3");a.textContent=this.title,s.appendChild(a),t.appendChild(s)}if(t.appendChild(i),t.appendChild(n),!this.activeTabId){const s=Object.keys(this.settings)[0];this.activeTabId=s||""}return this.updateTabUI(),e}}function E3(r){return new Ir(r)}function l$(r){return r}const Ga=class Ga extends Ir{constructor(e){super({...e}),this.isInitialized=!1,this.pendingSettingValuesByKey={},this.isRootNode=e.isRootNode??!1}setValue(e){if(this.isInitialized){super.setValue(e);return}Object.entries(e).forEach(([t,i])=>{if(Ga.IGNORE_KEYS.includes(t))return;if(Ga.DEFAULT_KEYS.includes(t)){super.setValue({[t]:i});return}const n=this.settings[t];if(n){n.setValue(i);return}this.pendingSettingValuesByKey[t]=i})}addSetting(e,t){const i=this.pendingSettingValuesByKey[e];if(this.isInitialized||!i){super.addSetting(e,t);return}super.addSetting(e,t),super.setValue({[e]:i}),delete this.pendingSettingValuesByKey[e],this.isInitialized=Object.keys(this.pendingSettingValuesByKey).length===0}getValues(e){return e?super.getValues(e):{...this.pendingSettingValuesByKey,...super.getValues(),isInitialized:this.isInitialized}}cleanup(){this.pendingSettingValuesByKey={},this.isInitialized=!1,super.cleanup(),this.settings={}}};Ga.IGNORE_KEYS=["isInitialized"],Ga.DEFAULT_KEYS=["$id","isRootNode"];let Bd=Ga;class D3 extends Qe{constructor(e={}){super(e),this.inputType="text",e.onChange&&this.setOnChange(e.onChange)}draw(){const e=t=>{this.props.maxLength!==void 0&&(t.maxLength=this.props.maxLength),this.props.className&&t.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:e})}}const c$="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' strokeLinecap='round' strokeLinejoin='round'/></svg>";class Ti extends D3{constructor(e){super({...e,icon:e.icon||c$,title:e.title||"Color",default:e.default?Ti.normalizeColorValue(e.default):"#000000"}),this.inputType="color",this.element=null,this.colorInputEl=null,this.textInputEl=null,this.detectChange=e.detectChange}static normalizeColorValue(e){return e.startsWith("var(--")?e:e.startsWith("#")?Ti.normalizeHexValue(e):e.includes(",")?Ti.rgbToHexStatic(e):Ti.normalizeHexValue(e)}static normalizeHexValue(e){return e=e.replace("#",""),e.length===3&&(e=e.split("").map(t=>t+t).join("")),e.length!==6?(console.warn(`Invalid hex value "${e}", using default "#000000"`),"#000000"):/^[0-9A-Fa-f]{6}$/.test(e)?`#${e.toLowerCase()}`:(console.warn(`Invalid hex value "${e}", using default "#000000"`),"#000000")}static rgbToHexStatic(e){const t=e.split(",").map(u=>parseInt(u.trim()));if(t.length!==3||t.some(isNaN))return console.warn(`Invalid RGB value "${e}", using default "#000000"`),"#000000";const[i,n,s]=t,a=Math.max(0,Math.min(255,i)),o=Math.max(0,Math.min(255,n)),l=Math.max(0,Math.min(255,s)),c=u=>{const h=u.toString(16);return h.length===1?"0"+h:h};return`#${c(a)}${c(o)}${c(l)}`}setValue(e){if(e===void 0){this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000");return}if(typeof e=="string"){const t=Ti.normalizeColorValue(e);this.value=t,this.colorInputEl&&(this.colorInputEl.value=t),this.textInputEl&&(this.textInputEl.value=t),this.onChange&&this.onChange(t),this.props.detectChange&&this.props.detectChange(t)}else this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000")}hexToRgb(e){e=e.replace("#","");const t=parseInt(e.substring(0,2),16),i=parseInt(e.substring(2,4),16),n=parseInt(e.substring(4,6),16);return`${t}, ${i}, ${n}`}draw(){const e=document.createElement("div");if(e.className="color-setting-wrapper "+(this.props.wrapperClassName||""),this.props.title||this.props.icon){const m=document.createElement("div");if(m.className="icon-container",this.props.icon){const g=document.createElement("span");g.className="input-icon",g.innerHTML=this.props.icon,m.appendChild(g)}if(this.props.title){const g=document.createElement("span");g.className="input-label",g.textContent=this.props.title,m.appendChild(g)}e.appendChild(m)}const t=document.createElement("div");t.className="color-input-wrapper";const i=document.createElement("div");i.className="color-setting-tabs",i.style.display="flex",i.style.marginBottom="8px",i.style.gap="4px";const n=document.createElement("button");n.className="color-tab active",n.textContent="Solid";const s=document.createElement("button");s.className="color-tab",s.textContent="Global",i.appendChild(n),i.appendChild(s);const a=document.createElement("div");a.className="color-content-solid";const o=document.createElement("div");o.className="color-content-global",o.style.display="none",o.style.display="grid",o.style.gridTemplateColumns="repeat(auto-fill, minmax(30px, 1fr))",o.style.gap="8px";const l=()=>{try{if(o.innerHTML="",!Qe){console.error("ColorSetting: Setting class is undefined");const g=document.createElement("div");g.textContent="Error: System error (Setting undefined)",o.appendChild(g);return}const m=Qe.GlobalVariables;if(!m||Object.keys(m).length===0){const g=document.createElement("div");g.textContent="No global colors defined",g.style.gridColumn="1 / -1",g.style.fontSize="12px",g.style.color="#666",o.appendChild(g);return}Object.entries(m).forEach(([g,O])=>{const x=document.createElement("button");x.className="global-color-btn",x.title=g,x.style.width="30px",x.style.height="30px",x.style.borderRadius="50%",x.style.border="1px solid #ddd",x.style.backgroundColor=yl(O),x.style.cursor="pointer",this.value===`var(--${g})`&&(x.style.border="2px solid #2196f3"),x.addEventListener("click",v=>{var C,k;v.preventDefault();const S=`var(--${g})`;this.value=S,(C=this.onChange)==null||C.call(this,S),(k=this.detectChange)==null||k.call(this,S),Array.from(o.children).forEach(w=>{w.style.border="1px solid #ddd"}),x.style.border="2px solid #2196f3",h.style.backgroundColor=yl(O)}),o.appendChild(x)})}catch(m){console.error("ColorSetting: Error in renderGlobalOptions",m),o.innerHTML="Error loading global options"}};l(),n.addEventListener("click",m=>{m.preventDefault(),n.classList.add("active"),s.classList.remove("active"),a.style.display="flex",o.style.display="none",this.value&&this.value.startsWith("var(--")}),s.addEventListener("click",m=>{m.preventDefault(),s.classList.add("active"),n.classList.remove("active"),a.style.display="none",o.style.display="grid",l()}),this.value&&this.value.startsWith("var(--")?s.click():n.click();const c=m=>{const g=m.value.trim();if(!g)return t.classList.remove("error"),!0;const x=/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(g);return x?t.classList.remove("error"):t.classList.add("error"),x},u=document.createElement("input");u.type="color",u.className="color-picker",u.value=this.value&&!this.value.startsWith("var(--")?this.value:"#000000",u.setAttribute("aria-label","Choose color"),u.setAttribute("title","Click to open color picker"),this.getDataPropsPath()&&u.setAttribute("data-test-id",this.getDataPropsPath()),this.colorInputEl=u;const h=document.createElement("div");h.className="color-preview";let f=this.value||"#000000";if(f.startsWith("var(--")){const m=f.replace("var(--","").replace(")","");f=(Qe.GlobalVariables||{})[m]||"#020202ff"}h.style.backgroundColor=yl(f);const d=document.createElement("input");d.type="text",d.className="color-text-input",d.value=this.value||"",d.placeholder="#000000",d.setAttribute("pattern","#[0-9A-Fa-f]{6}"),d.setAttribute("title","Enter a hex color value (e.g., #ff0000)"),d.setAttribute("aria-label","Hex color value"),d.setAttribute("maxlength","7"),this.getDataPropsPath()&&d.setAttribute("data-test-id",`${this.getDataPropsPath()}_text`),this.textInputEl=d;const p=m=>{var O,x;let g=m.trim();if(g&&!g.startsWith("#")&&!g.startsWith("var(")&&/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(g)&&(g="#"+g,this.textInputEl&&(this.textInputEl.value=g)),this.textInputEl&&c(this.textInputEl)){const v=Ti.normalizeColorValue(g);this.value=v,(O=this.onChange)==null||O.call(this,v),(x=this.detectChange)==null||x.call(this,v),this.colorInputEl&&(this.colorInputEl.value=v),h.style.backgroundColor=v}};return this.textInputEl.addEventListener("input",m=>{const g=m.target.value;p(g)}),this.textInputEl.addEventListener("paste",m=>{var O;m.preventDefault();const g=((O=m.clipboardData)==null?void 0:O.getData("text"))||"";this.textInputEl&&(this.textInputEl.value=g.trim(),p(g))}),this.textInputEl.addEventListener("keydown",m=>{var g,O,x;m.key==="Enter"&&(m.preventDefault(),p(((g=this.textInputEl)==null?void 0:g.value)||""),(O=this.textInputEl)==null||O.blur()),m.key==="Escape"&&(this.textInputEl&&this.value&&(this.textInputEl.value=this.value),(x=this.textInputEl)==null||x.blur(),t.classList.remove("error"))}),this.colorInputEl.addEventListener("input",m=>{var x,v;const g=m.target.value,O=Ti.normalizeColorValue(g);this.value=O,(x=this.onChange)==null||x.call(this,O),(v=this.detectChange)==null||v.call(this,O),this.textInputEl&&(this.textInputEl.value=O),h.style.backgroundColor=O,t.classList.remove("error")}),this.colorInputEl.addEventListener("change",m=>{var x,v;const g=m.target.value,O=Ti.normalizeColorValue(g);this.value=O,(x=this.onChange)==null||x.call(this,O),(v=this.detectChange)==null||v.call(this,O),this.textInputEl&&(this.textInputEl.value=O),h.style.backgroundColor=O}),a.appendChild(u),a.appendChild(h),a.appendChild(d),t.appendChild(i),t.appendChild(a),t.appendChild(o),e.appendChild(t),this.element=e,e}getElement(){return this.element}getNormalizedValue(){return this.value?Ti.normalizeColorValue(this.value):"#000000"}isValidHex(){return this.value?/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(this.value):!1}toRgb(){return this.isValidHex()?this.hexToRgb(this.value):"0, 0, 0"}}const u$=`
|
|
473
473
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
474
474
|
<path d="M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z" stroke="#667085" strokeLinecap="round" strokeLinejoin="round"/>
|
|
475
475
|
<path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#667085" strokeWidth="0.5" strokeLinecap="round" strokeLinejoin="round" opacity="0.5"/>
|
|
@@ -643,7 +643,7 @@
|
|
|
643
643
|
opacity: 0;
|
|
644
644
|
}
|
|
645
645
|
}
|
|
646
|
-
`,document.head.appendChild(e)}this.styleInjected=!0}}};Cg.styleInjected=!1;let Wa=Cg;class R${constructor(){this.overlayElement=null,this.activePromise=null}show(e){return this.activePromise?this.activePromise:(this.activePromise=new Promise(t=>{this.cleanup();const i=document.createElement("div");i.className="image-map-confirm-overlay",this.overlayElement=i;const n=document.createElement("div");n.className="image-map-confirm-modal";const s=document.createElement("div");s.className="confirm-header",s.textContent=e.title;const a=document.createElement("div");a.className="confirm-body",a.textContent=e.description;const o=document.createElement("div");o.className="confirm-actions";const l=document.createElement("button");l.type="button",l.className="confirm-btn ghost",l.textContent=e.cancelText||"Cancel";const c=document.createElement("button");c.type="button",c.className="confirm-btn danger",c.textContent=e.confirmText||"Discard";const u=h=>{i.remove(),this.overlayElement=null,this.activePromise=null,t(h)};l.addEventListener("click",()=>u(!1)),c.addEventListener("click",()=>u(!0)),i.addEventListener("click",h=>{h.target===i&&u(!1)}),o.appendChild(l),o.appendChild(c),n.appendChild(s),n.appendChild(a),n.appendChild(o),i.appendChild(n),document.body.appendChild(i),
|
|
646
|
+
`,document.head.appendChild(e)}this.styleInjected=!0}}};Cg.styleInjected=!1;let Wa=Cg;class R${constructor(){this.overlayElement=null,this.activePromise=null}show(e){return this.activePromise?this.activePromise:(this.activePromise=new Promise(t=>{this.cleanup();const i=document.createElement("div");i.className="image-map-confirm-overlay",this.overlayElement=i;const n=document.createElement("div");n.className="image-map-confirm-modal";const s=document.createElement("div");s.className="confirm-header",s.textContent=e.title;const a=document.createElement("div");a.className="confirm-body",a.textContent=e.description;const o=document.createElement("div");o.className="confirm-actions";const l=document.createElement("button");l.type="button",l.className="confirm-btn ghost",l.textContent=e.cancelText||"Cancel";const c=document.createElement("button");c.type="button",c.className="confirm-btn danger",c.textContent=e.confirmText||"Discard";const u=h=>{i.remove(),this.overlayElement=null,this.activePromise=null,t(h)};l.addEventListener("click",()=>u(!1)),c.addEventListener("click",()=>u(!0)),i.addEventListener("click",h=>{h.target===i&&u(!1)}),o.appendChild(l),o.appendChild(c),n.appendChild(s),n.appendChild(a),n.appendChild(o),i.appendChild(n),document.body.appendChild(i),n.classList.add("visible")}),this.activePromise)}cleanup(){this.overlayElement&&(this.overlayElement.remove(),this.overlayElement=null),this.activePromise=null}}class V${constructor(){this.element=document.createElement("div"),this.element.className="marker-cursor-tooltip"}getElement(){return this.element}show(){this.element.classList.add("visible")}hide(){this.element.classList.remove("visible")}updateContent(e){this.element.textContent=e}updatePosition(e,t){const i=t.getBoundingClientRect(),n=e.clientX-i.left,s=e.clientY-i.top;this.element.style.left=`${n}px`,this.element.style.top=`${s}px`}shouldShow(e,t){return e<t}}class X${constructor(){this.history=[],this.historyIndex=-1}initialize(e){this.history=[JSON.parse(JSON.stringify(e))],this.historyIndex=0}saveState(e){const t=JSON.parse(JSON.stringify(e));if(this.historyIndex>=0&&this.history.length>0){const i=this.history[this.historyIndex];if(JSON.stringify(i)===JSON.stringify(t))return}this.history=this.history.slice(0,this.historyIndex+1),this.history.push(t),this.historyIndex++,this.history.length>P$&&(this.history.shift(),this.historyIndex--)}canUndo(){return this.historyIndex>0}canRedo(){return this.historyIndex<this.history.length-1}undo(){return this.canUndo()?(this.historyIndex--,JSON.parse(JSON.stringify(this.history[this.historyIndex]))):null}redo(){return this.canRedo()?(this.historyIndex++,JSON.parse(JSON.stringify(this.history[this.historyIndex]))):null}reset(){this.history=[],this.historyIndex=-1}}class W${constructor(){this.messageListener=null,this.handlers=new Map}registerHandler(e,t){this.handlers.set(e,t),this.messageListener||this.setupMessageListener()}unregisterHandler(e){this.handlers.delete(e),this.handlers.size===0&&this.cleanupMessageListener()}openFileManager(e){window.postMessage({type:"OPEN_FILE_MANAGER_MODAL",settingId:e},"*")}setupMessageListener(){this.messageListener=e=>{if(e.data&&e.data.type==="FILE_MANAGER_IMAGE_SELECTED"){const t=e.data.settingId,i=e.data.imageUrl;if(t&&i&&typeof i=="string"){const n=this.handlers.get(t);n&&n(i)}}},window.addEventListener("message",this.messageListener)}cleanupMessageListener(){this.messageListener&&(window.removeEventListener("message",this.messageListener),this.messageListener=null)}cleanup(){this.handlers.clear(),this.cleanupMessageListener()}}const U2=new W$;function Z$(r,e){const t=document.createElement("div");t.className="marker-container",t.style.left=`${r.x}%`,t.style.top=`${r.y}%`,t.setAttribute("data-marker-id",String(r.id));const i=document.createElement("div");i.className="image-map-marker",i.innerHTML=T$;const n=document.createElement("span");n.className="marker-number",n.textContent=String(r.index),i.appendChild(n),t.appendChild(i);const s=document.createElement("button");return s.type="button",s.className="marker-delete-btn",s.innerHTML=C$,s.addEventListener("click",a=>{a.stopPropagation(),e.onDelete(r.id)}),t.appendChild(s),t.addEventListener("mousedown",a=>{a.stopPropagation(),a.preventDefault(),e.onDragStart(r.id),t.classList.add("dragging")}),t}function z$(r,e,t){const i=new Map;r.forEach(s=>i.set(s.index,s));const n=document.createElement("div");n.className="simple-prize-list";for(let s=e;s>=1;s--){const a=i.get(s),o=!!a,l=(a==null?void 0:a.prizeName)||t&&t[s-1]||"Prize Name",c=document.createElement("div");c.className=`simple-prize-item ${o?"placed":""}`;const u=document.createElement("div");u.className="simple-prize-number",u.textContent=`#${s}`,c.appendChild(u);const h=document.createElement("div");if(h.className="simple-prize-text",h.textContent=`${l}`,c.appendChild(h),o){const f=document.createElement("div");f.className="simple-prize-check",f.innerHTML=E$,c.appendChild(f)}n.appendChild(c)}return n}function U$(r,e){const t=document.createElement("div");t.className="controls-row";const i=document.createElement("div");i.className="place-prize-text",i.textContent="Place Prize",t.appendChild(i);const n=document.createElement("div");n.className="undo-redo-group";const s=document.createElement("button");s.type="button",s.className="undo-btn action-btn",s.innerHTML=k$,s.title="Undo (Ctrl+Z)",s.disabled=!r.canUndo,s.addEventListener("click",()=>e.onUndo()),n.appendChild(s);const a=document.createElement("button");a.type="button",a.className="redo-btn action-btn",a.innerHTML=b$,a.title="Redo (Ctrl+Y)",a.disabled=!r.canRedo,a.addEventListener("click",()=>e.onRedo()),n.appendChild(a),t.appendChild(n);const o=r.markerCount===r.maxMarkers,l=document.createElement("div");return l.className="prize-counter-inline",l.textContent=`${r.markerCount}/${r.maxMarkers}`,o&&l.classList.add("complete"),t.appendChild(l),t}function H$(r){const e=document.createElement("div");{e.className="upload-section-wrapper";{const n=document.createElement("h4");n.className="upload-section-title",n.textContent="Upload/Replace Map Image",e.appendChild(n)}const t=document.createElement("div");t.className="upload-section";const i=q$(r);t.appendChild(i),e.appendChild(t)}return e}function q$(r){if(r.uploadMethod==="input"){const e=document.createElement("label");e.className="upload-label",e.innerHTML=`<div class="upload-placeholder">${bh}<span>Click to upload image</span></div>`;const t=document.createElement("input");return t.type="file",t.accept="image/jpeg,image/jpg,image/png,image/gif,image/webp",t.style.display="none",t.addEventListener("change",i=>{var s;const n=(s=i.target.files)==null?void 0:s[0];n&&r.onFileSelected(n)}),e.appendChild(t),e}else{const e=document.createElement("button");return e.type="button",e.className="upload-label",e.innerHTML=`<div class="upload-placeholder">${bh}<span>Open File Manager</span></div>`,e.addEventListener("click",()=>{window.postMessage({type:"OPEN_FILE_MANAGER_MODAL",settingId:r.settingId},"*")}),e}}function G$(){const r=document.createElement("img");r.className="image-map-thumbnail-main";const e=document.createElement("span");e.className="image-map-icon",e.innerHTML=D$;const t=document.createElement("span");t.className="image-map-marker-count";const i=document.createElement("button");return i.type="button",i.className="image-map-button",i.appendChild(e),i.appendChild(t),{thumbnailEl:r,configureButtonTextEl:t,mapIconEl:e,configureButton:i,uploadBox:document.createElement("div")}}function Ei(r,e){const t=e&&e.imageUrl&&e.imageUrl!=="",i=r.thumbnailEl.parentElement,n=i==null?void 0:i.parentElement;n&&(t?(n.classList.add("has-image"),r.thumbnailEl.src=e.imageUrl):(n.classList.remove("has-image"),r.thumbnailEl.src="")),r.configureButtonTextEl.textContent="Configure Map",r.configureButton&&(r.configureButton.disabled=!t)}function j$(r,e){const t=document.createElement("div");t.className="image-map-upload-box";const i=document.createElement("div");i.className="image-map-thumbnail-wrapper",i.appendChild(r);const n=document.createElement("button");return n.type="button",n.className="image-map-delete-btn",n.innerHTML=S$,n.addEventListener("click",s=>{s.stopPropagation(),e()}),i.appendChild(n),t.appendChild(i),t}function Y$(r,e,t){if(r==="input"){const i=document.createElement("label");i.className="image-map-upload-label",i.innerHTML=`
|
|
647
647
|
<div class="upload-icon upload-icon-default">${bh}</div>
|
|
648
648
|
<div class="upload-icon upload-icon-replace">${X2}</div>
|
|
649
649
|
<span class="upload-text">Upload Image</span>
|
|
@@ -28185,11 +28185,11 @@ const Ga = class Ga extends Jr {
|
|
|
28185
28185
|
});
|
|
28186
28186
|
}
|
|
28187
28187
|
addSetting(e, t) {
|
|
28188
|
-
|
|
28188
|
+
const i = this.pendingSettingValuesByKey[e];
|
|
28189
|
+
if (this.isInitialized || !i) {
|
|
28189
28190
|
super.addSetting(e, t);
|
|
28190
28191
|
return;
|
|
28191
28192
|
}
|
|
28192
|
-
const i = this.pendingSettingValuesByKey[e];
|
|
28193
28193
|
super.addSetting(e, t), super.setValue({ [e]: i }), delete this.pendingSettingValuesByKey[e], this.isInitialized = Object.keys(this.pendingSettingValuesByKey).length === 0;
|
|
28194
28194
|
}
|
|
28195
28195
|
getValues(e) {
|
|
@@ -29351,9 +29351,7 @@ class L$ {
|
|
|
29351
29351
|
};
|
|
29352
29352
|
l.addEventListener("click", () => u(!1)), c.addEventListener("click", () => u(!0)), i.addEventListener("click", (h) => {
|
|
29353
29353
|
h.target === i && u(!1);
|
|
29354
|
-
}), o.appendChild(l), o.appendChild(c), n.appendChild(s), n.appendChild(a), n.appendChild(o), i.appendChild(n), document.body.appendChild(i),
|
|
29355
|
-
n.classList.add("visible");
|
|
29356
|
-
}, 10);
|
|
29354
|
+
}), o.appendChild(l), o.appendChild(c), n.appendChild(s), n.appendChild(a), n.appendChild(o), i.appendChild(n), document.body.appendChild(i), n.classList.add("visible");
|
|
29357
29355
|
}), this.activePromise);
|
|
29358
29356
|
}
|
|
29359
29357
|
cleanup() {
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import"https://fonts.cdnfonts.com/css/satoshi";:root{--color-text: #1d2939;--color-text-secondary: #667085;--color-text-muted: #98a2b3;--color-border: #e4e7ec;--color-border-hover: #d0d5dd;--color-bg: #fff;--color-bg-hover: #f9fafb;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--font-size-xs: 10px;--font-size-sm: 12px;--font-size-md: 14px;--font-size-lg: 16px;--transition-fast: .15s ease;--transition-normal: .3s ease}.icon-container{display:flex;align-items:center;gap:var(--space-xs)}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);flex-shrink:0;width:18px;height:18px;transition:color var(--transition-fast)}.input-label{color:#637381;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:500;line-height:1.4;transition:color var(--transition-fast)}.input-container{display:inline-flex;align-items:center;position:relative;width:100%}.input-wrapper{position:relative;width:100%;min-width:0}.base-input{width:100%;height:36px;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg);color:var(--color-text);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md);font-weight:400;line-height:1.4;transition:all var(--transition-fast);outline:none}.base-input::placeholder{color:var(--color-text-muted)}.base-input:hover{border-color:var(--color-border-hover);background:var(--color-bg-hover)}.base-input:focus{border-color:var(--color-border-focus);background:var(--color-bg-focus)}.base-input:disabled{background:#f9fafb;color:var(--color-text-muted);cursor:not-allowed;opacity:.7}.with-suffix{padding-right:44px}.input-suffix{position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;font-size:var(--font-size-sm);font-weight:500;z-index:1}.with-prefix{padding-left:44px}.input-prefix{position:absolute;left:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;font-size:var(--font-size-sm);font-weight:500;z-index:1}.setting-item{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);align-items:center;min-height:40px;padding:var(--space-sm) 0}.setting-item.full-width{grid-template-columns:1fr}.setting-item.stacked{grid-template-columns:1fr;gap:var(--space-xs);align-items:stretch}.setting-item-label{display:flex;align-items:center;gap:var(--space-xs);min-width:0}.setting-item-control{min-width:0;justify-self:end}.setting-item.stacked .setting-item-control{max-width:none;justify-self:stretch}.input-error{border-color:#f04438!important;background:#fff4f4!important;color:#f04438!important}.input-error:focus{border-color:#f04438!important;box-shadow:0 0 0 4px #f044381a!important}.error-message{color:#f04438;font-size:var(--font-size-xs);margin-top:var(--space-xs);display:flex;align-items:center;gap:var(--space-xs)}.input-success{border-color:#02cc59!important;background:#f0fdf4!important}.input-success:focus{border-color:#02cc59!important}.input-loading{position:relative;color:var(--color-text-muted);background:#f9fafb;pointer-events:none}.input-loading:after{content:"";position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid var(--color-border-focus);border-radius:50%;animation:spin 1s linear infinite}.setting-group .setting-group .setting-item{min-height:36px;padding:6px 0}.setting-group .setting-group .base-input{height:32px;padding:6px 10px;font-size:13px}.setting-group .setting-group .input-label{color:#637381!important;font-family:Public Sans!important;font-size:13px;font-style:normal!important;font-weight:500!important;line-height:150%!important}.setting-group .setting-group .setting-group .setting-item{min-height:32px;padding:4px 0}.setting-group .setting-group .setting-group .base-input{height:28px;padding:4px 8px;font-size:12px}.setting-group .setting-group .setting-group .input-label{font-size:12px}@media (max-width: 480px){.setting-item{grid-template-columns:1fr;gap:var(--space-xs)}.setting-item-control{max-width:none;justify-self:stretch}.base-input{font-size:var(--font-size-md)}}@media (prefers-color-scheme: dark){:root{--color-text: #f9fafb;--color-text-secondary: #d0d5dd;--color-text-muted: #667085;--color-border: #344054;--color-border-hover: #475467;--color-bg: #1d2939;--color-bg-hover: #344054}}.base-input:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.compact .setting-item{min-height:32px;padding:4px 0}.compact .base-input{height:32px;padding:6px 10px;font-size:13px}.compact .input-label{font-size:11px}@media (prefers-contrast: high){.base-input{border-width:2px}.base-input:focus{border-width:3px}}.ms-wrapper{display:grid;grid-template-columns:100px 1fr auto;column-gap:12px;align-items:start}.ms-label{color:var(--Gray-700, #344054);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:400;line-height:36px;white-space:nowrap;flex-shrink:0;align-self:start}.ms-content-container{display:flex;flex-direction:column;flex:1;min-width:0;align-self:start}.ms-collapsed-content,.ms-expanded-content{width:100%;display:grid;grid-template-rows:1fr;overflow:hidden;opacity:1;transform:translateY(0);transition:grid-template-rows .15s ease-in-out,opacity .15s ease-in-out,transform .15s ease-in-out}.ms-section-inner{overflow:hidden}.ms-collapsed-content.hidden,.ms-expanded-content.hidden{grid-template-rows:0fr;opacity:0;transform:translateY(-4px);pointer-events:none}.ms-input-with-icon{display:flex;align-items:center;height:36px;padding:0 4px;border:1px solid #cfd4d8;border-radius:4px;box-sizing:border-box;transition:height .15s ease-in-out}.ms-input-with-icon:hover{border-color:var(--Gray-300, #d0d5dd)}.ms-input-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;margin-right:4px}.ms-input-icon svg{width:18px;height:18px}.ms-input{flex:1;min-width:0;width:100%;border:none;outline:none;background:transparent;color:var(--Gray-900, #101828);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:400;line-height:20px;padding:0}.ms-input::placeholder{color:var(--Gray-400, #98a2b3)}.ms-grid{display:flex;flex-direction:column;gap:8px;margin-left:auto}.ms-row{display:flex;gap:8px;min-width:0}.ms-expanded-content .ms-input-with-icon{width:100%;max-width:100px;flex:1 1 0;min-width:0;height:28px}.ms-toggle-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:4px;border-radius:4px;cursor:pointer;color:var(--Gray-400, #98a2b3);flex-shrink:0;margin:3px 0 0;align-self:start}.ms-toggle-btn:hover{background:#e5e8ea}.ms-toggle-btn.active{margin-top:0;background:#e5e8ea}.ms-toggle-btn svg{width:20px;height:20px}@media (max-width: 480px){.ms-wrapper{flex-wrap:wrap}.ms-label{width:100%;line-height:20px;margin-bottom:4px}.ms-row{flex-wrap:wrap}.ms-expanded-content .ms-input-with-icon{width:100%;max-width:80px}}:root{--grey40: #9ca3af}.gradient-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.gradient-setting-wrapper .icon-container{display:flex;align-items:center;gap:4px}.gradient-setting-wrapper .input-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#667085;flex-shrink:0}.gradient-setting-wrapper .input-icon svg{width:18px;height:18px}.gradient-setting-wrapper .input-label{color:#1d2939;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:600;line-height:1.4}.gradient-controls{display:flex;align-items:center;gap:10px}.gradient-type,.gradient-angle{padding:6px 8px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;font:inherit}.gradient-angle-wrap{display:inline-flex;align-items:center;gap:6px}.gradient-preview{position:relative;height:34px;border-radius:8px;border:1px solid #e5e7eb;overflow:visible;background:linear-gradient(90deg,#a84b4b,#786666);max-width:250px;margin:42px auto 0;cursor:crosshair}.gradient-handles{position:absolute;top:-4px;left:0;right:0;height:calc(100% + 8px);pointer-events:none}.gstop-handle{position:absolute;border-radius:4px;background:#fff;border:1px solid white;transform:translate(-50%,-50%);cursor:grab;display:grid;place-items:center;pointer-events:auto;box-shadow:0 1px 3px #0000001a;z-index:10;transition:all .15s ease;user-select:none;-webkit-user-select:none;touch-action:none}.gstop-handle:active{cursor:grabbing}.gstop-handle:hover{transform:translate(-50%,-50%) scale(1.05);border-color:#9ca3af}.gstop-handle.selected{border:2px solid #2563eb;box-shadow:0 0 0 2px #2563eb33;transform:translate(-50%,-50%) scale(1.1);cursor:grabbing;transition:none!important}.gstop-chip{width:24px;height:24px;border-radius:2px;border:1px solid white;position:relative}.gstop-chip:after{content:"";position:absolute;bottom:-4px;left:50%;transform:translate(-50%);width:0;height:0;z-index:-1;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid #ffffff;border-top-color:inherit}.gradient-stops-header{padding:8px 4px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#1c252e;font-weight:500;font-size:14px;line-height:20px;min-height:36px;box-sizing:border-box;border-top:1px solid #eff1f2;margin-top:8px}.gradient-add-stop{width:36px;height:36px;padding:8px;border-radius:6px;border:none;background:transparent;color:#637381;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s ease}.gradient-add-stop svg{width:20px;height:20px}.gradient-add-stop:hover{background:#dbdfe2}.gradient-stops{display:flex;flex-direction:column;max-height:200px;overflow-y:auto;overflow-x:visible;padding-right:4px;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9}.gradient-stops::-webkit-scrollbar{width:6px}.gradient-stops::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.gradient-stops::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.gradient-stops::-webkit-scrollbar-thumb:hover{background:#94a3b8}.gstop-row{display:flex;align-items:center;gap:4px;padding:6px 4px;border-radius:8px;background:#00a76f14;min-height:44px}.gstop-position-group{display:flex;align-items:center;min-width:51px}.gstop-position-input{width:60px;height:38px;padding:0 10px;border:1px solid #919eab33;border-radius:8px;color:#1c252e;font-size:14px;font-weight:400;text-align:left;outline:none;transition:all .2s ease;background:#f9fafb;box-sizing:border-box}.gstop-position-input:hover{border-color:#cbd5e1;background-color:#f8fafc}.gstop-position-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.gstop-position-input:disabled{opacity:.4;cursor:not-allowed}.gstop-color-container{position:relative;flex:1;height:38px;display:flex;align-items:center;border:1px solid #e5e7eb;border-radius:8px;background:#fff;overflow:hidden;box-sizing:border-box}.gstop-color-preview{width:25px;height:25px;border-radius:4px;border:1px solid #e4e7ec;flex-shrink:0;margin-left:4px;cursor:pointer;transition:transform .15s ease,border-color .15s ease;position:relative;overflow:hidden}.gstop-color-preview:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#637381 25%,transparent 25%),linear-gradient(-45deg,#637381 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#637381 75%),linear-gradient(-45deg,transparent 75%,#637381 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:#fff;z-index:0;opacity:0;transition:opacity .15s ease}.gstop-color-preview.has-transparency:before{opacity:1}.gstop-color-preview-color{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:3px}.gstop-color-preview:hover{border-color:#3b82f6;transform:scale(1.05)}.gstop-color-input{flex:1;min-width:0;height:100%;padding:0 8px;border:none;color:#1c252e;font-size:14px;font-weight:400;text-align:left;outline:none;transition:all .2s ease;background:transparent}.gstop-color-separator{width:1px;height:20px;background:#e5e7eb;flex-shrink:0}.gstop-opacity-input{width:56px;height:100%;padding:0 10px;border:none;font-size:14px;font-weight:400;color:#1c252e;background:transparent;outline:none;text-align:right}.gstop-opacity-input:focus{background:#3b82f60d}.gstop-color-input:focus{background:#3b82f60d}.gstop-color-container:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.gstop-color-input:disabled{opacity:.4;cursor:not-allowed;background:var(--action-selected, #919eab29)!important;border-color:var(--action-selected, #919eab29)!important}.gstop-color-copy{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:none;background:transparent;cursor:pointer;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease;opacity:.7}.gstop-color-copy:hover{opacity:1;background:#919eab1a}.gstop-color-copy:active{transform:translateY(-50%) scale(.95)}.gstop-color{width:32px;height:32px;padding:0;border:2px solid #ffffff;border-radius:8px;cursor:pointer;outline:none;box-shadow:0 1px 2px #0000000d;position:relative;z-index:20;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}.gstop-hex{flex:1;min-width:100px;padding:10px 12px;border:2px solid #e2e8f0;border-radius:10px;background:#fff;color:#1f2937;font-size:13px;font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:500;outline:none;transition:all .2s ease}.gstop-hex:hover{border-color:#cbd5e1;background-color:#f8fafc}.gstop-hex:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.gstop-link{width:24px;height:24px;border:none;background:transparent;color:#667085;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px}.gstop-link:hover{background:#f3f4f6;color:#374151}.gstop-del{width:36px;min-width:36px;height:36px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:4px;gap:8px;opacity:1;flex-shrink:0}.gstop-del:hover{background:#f8fafc}.gstop-del:disabled{opacity:.4;cursor:not-allowed;background:var(--action-selected, #919eab29)}.gstop-opacity-label{font-size:12px;color:#64748b;font-weight:500;min-width:50px}.gstop-opacity-group{display:flex;align-items:center;gap:12px;flex:1}.gstop-opacity-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;max-width:135px;width:100%;height:20px;border-radius:12px;border:0;outline:none;cursor:pointer;position:relative;background-image:url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='3' height='3' fill='rgba(0,0,0,0.1)'/%3E%3Crect x='3' y='3' width='3' height='3' fill='rgba(0,0,0,0.1)'/%3E%3C/svg%3E"),linear-gradient(to right,var(--slider-color-transparent, rgba(59, 130, 246, 0)),var(--slider-color, #3b82f6));background-size:6px 6px,100% 100%;background-position:0 0,0 0;background-repeat:repeat,no-repeat;box-shadow:inset 0 0 0 1px #ffffffe6,inset 0 0 0 2px #00000014,0 1px 3px #0000001a}.gstop-opacity-slider::-webkit-slider-track{height:20px;border:none;border-radius:12px;background:transparent}.gstop-opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.2);box-shadow:0 0 0 1px #ffffffe6,0 2px 6px #00000026,0 1px 2px #0003;cursor:pointer;transition:all .15s ease;margin-top:0}.gstop-opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 0 0 1px #ffffffe6,0 3px 8px #0003,0 1px 3px #00000040}.gstop-opacity-slider::-moz-range-track{height:20px;border:none;border-radius:12px;background:transparent}.gstop-opacity-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.2);box-shadow:0 0 0 1px #ffffffe6,0 2px 6px #00000026,0 1px 2px #0003;cursor:pointer;transition:all .15s ease}.gstop-opacity-slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 0 0 1px #ffffffe6,0 3px 8px #0003,0 1px 3px #00000040}.gstop-opacity-slider:focus-visible{outline:3px solid rgba(59,130,246,.45);outline-offset:4px;border-radius:12px}.gstop-opacity-value{font-size:12px;color:#475569;font-weight:600;min-width:38px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:4px;padding:4px 6px}.gradient-solid-picker{display:flex;align-items:center;gap:12px;padding:8px;background:#f9fafb;border-radius:8px}.gradient-solid-color{width:257px;height:34px;padding:0;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;outline:none}.gradient-solid-hex{width:120px;padding:12px 16px;border:2px solid #e2e8f0;border-radius:12px;background:#fff;color:#1f2937;font-size:14px;font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:500;outline:none;transition:all .2s ease}.gradient-solid-hex:hover{border-color:#cbd5e1;background-color:#f8fafc}.gradient-solid-hex:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.gradient-input-wrapper{position:relative;width:100%;justify-self:end}.gradient-text-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-left:38px;padding-right:30px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.gradient-text-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.gradient-text-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.gradient-text-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.gradient-mini-preview{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:4px;border:1px solid var(--color-border, #e4e7ec);cursor:pointer;overflow:hidden;transition:transform var(--transition-fast, .15s ease),border-radius var(--transition-fast, .15s ease);background-color:#fff}.gradient-mini-preview.bound{border-radius:50%}.gradient-mini-preview:hover{transform:translateY(-50%) scale(1.05)}.gradient-unlink-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:none;background:transparent;cursor:pointer;display:none;align-items:center;justify-content:center;padding:4px;border-radius:2px;transition:background-color .15s ease}.gradient-unlink-button.visible{display:flex}.gradient-unlink-button:hover{background-color:#dbdfe2}.gradient-unlink-button:active{transform:translateY(-50%) scale(.95)}.gradient-unlink-button:focus{outline:2px solid #3b82f6;outline-offset:2px}.setting-group .setting-group .gradient-unlink-button{right:6px;width:24px;height:24px;padding:3px}.setting-group .setting-group .setting-group .gradient-unlink-button{right:4px;width:22px;height:22px;padding:2px}.setting-group .gradient-setting-wrapper{min-height:36px}.setting-group .gradient-input-wrapper{max-width:120px}.setting-group .gradient-text-input{height:32px;padding:6px 26px 6px 34px;font-size:13px}.setting-group .gradient-mini-preview{left:6px;width:22px;height:22px}.setting-group .setting-group .gradient-setting-wrapper{min-height:36px}.setting-group .setting-group .gradient-input-wrapper{max-width:120px}.setting-group .setting-group .gradient-text-input{height:32px;padding:6px 26px 6px 34px;font-size:13px}.setting-group .setting-group .gradient-mini-preview{left:6px;width:22px;height:22px}.setting-group .setting-group .setting-group .gradient-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .gradient-input-wrapper{max-width:100px}.setting-group .setting-group .setting-group .gradient-text-input{height:28px;padding:4px 22px 4px 30px;font-size:12px}.setting-group .setting-group .setting-group .gradient-mini-preview{left:4px;width:19px;height:19px}.gradient-input-wrapper.error .gradient-text-input{border-color:#f04438;background:#fff4f4;color:#f04438}.gradient-input-wrapper.error .gradient-text-input:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.gradient-input-wrapper.disabled .gradient-text-input{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.gradient-popover-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000;z-index:9999}.gradient-popover{position:fixed;z-index:10000;background:var(--primary-contrast-text, #ffffff);border-radius:8px;box-shadow:0 1px 8px #0003;overflow:visible;width:306px;height:auto;min-height:200px;max-height:80vh;opacity:1;padding:12px;display:flex;flex-direction:column;gap:16px}.gradient-popover-header{display:flex;align-items:center;justify-content:space-between;color:#1d2939;font-weight:600;font-size:16px}.color-setting-tabs{display:flex;gap:2px;padding:2px;background:transparent}.color-setting-tabs.header-tabs{padding:0;gap:0}.color-tab{display:flex;align-items:center;justify-content:center;min-width:64px;height:30px;padding:2px 4px;border:none;background:transparent;color:#637381;font-family:Public Sans,sans-serif;font-size:14px;font-weight:600;line-height:1.5;border-radius:4px;cursor:pointer;transition:all .15s ease}.color-tab:hover:not(.active){background:#f3f4f6}.gradient-popover-close{width:24px;height:24px;border-radius:4px;border:none;background:transparent;color:#667085;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}.gradient-popover-close:hover{background:#f9fafb;color:#374151}.gradient-editor{display:flex;flex-direction:column;gap:6px;flex:1;overflow:hidden;min-height:0}.type-tabs-wrapper{border:1px solid #eff1f2;border-left:0;border-right:0;padding:4px 0}.gradient-type-tabs{display:flex;padding:4px;align-items:center;gap:16px;align-self:stretch}.gradient-type-tab{display:flex;width:26px;height:26px;padding:4px;justify-content:center;align-items:center;border-radius:2px}.gradient-type-tab.active{background:#dbdfe2!important;box-shadow:0 1px 2px #0000000d}.gradient-type-tab:hover:not(.active){background:#dbdfe2}.gradient-subtype-tabs{display:flex;background:#f0f2f5;border-radius:6px;padding:2px;gap:2px;margin-bottom:12px}.gradient-subtype-inline{display:flex;align-items:center;gap:4px;margin-bottom:8px}.global-controls-row{display:flex;align-items:center;gap:8px;height:34px;margin-bottom:12px;padding:4px;border-top:1px solid #eff1f2;border-bottom:1px solid #eff1f2;box-sizing:border-box}.global-search-container{position:relative;flex:1;display:flex;align-items:center;gap:8px;height:18px}.global-search-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#96a1ab;flex-shrink:0}.global-search-icon svg{width:18px;height:18px}.global-search-separator{width:1px;height:11.5px;background:#96a1ab;flex-shrink:0}.global-search-input{flex:1;height:17px;padding:0;border:none;font-family:Public Sans,sans-serif;font-size:11px;font-weight:400;line-height:1.5;color:#1c252e;outline:none;background:transparent;box-sizing:border-box}.global-search-input::placeholder{color:#96a1ab}.global-search-input:focus{outline:none}.global-layout-toggle{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:4px;border:none;border-radius:2px;background:transparent;color:#46525c;cursor:pointer;transition:all .2s;box-sizing:border-box}.global-layout-toggle:hover{background:#eff1f2}.global-colors-grid{display:grid;grid-template-columns:repeat(auto-fill,24px);gap:6px;padding:0;margin-top:8px;width:100%;justify-content:start}.global-colors-list{display:flex;flex-direction:column;gap:4px}.global-color-row{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:6px;cursor:pointer;transition:background-color .2s}.global-color-row:hover{background-color:#f3f4f6}.global-color-circle{width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.1);position:relative;flex-shrink:0}.global-colors-grid .global-color-circle{width:24px;height:24px;margin:0 auto;cursor:pointer;transition:transform .2s}.global-colors-grid .global-color-circle:hover{transform:scale(1.1);box-shadow:0 2px 4px #0000001a}.global-color-circle.selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #2196f3}.global-colors-grid .global-color-circle.selected:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.3)}.global-color-label{font-size:13px;color:#374151;font-weight:500}.gradient-subtype-select{border:1px solid #b1b6bf;padding:6.5px 40px 6.5px 16px;border-radius:8px;background:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;color:#1f2937;font-size:14px;font-weight:500;outline:none;cursor:pointer;transition:all .2s ease;appearance:none;-webkit-appearance:none;-moz-appearance:none;min-height:38px;box-sizing:border-box;line-height:1.4;width:100%}.gradient-subtype-select:hover{border-color:#cbd5e1;background-color:#f8fafc}.gradient-subtype-select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.gradient-subtype-select option{padding:12px 16px;background-color:#fff;color:#1f2937;font-size:14px;font-weight:500;border:none;outline:none;min-height:44px;line-height:1.4}.gradient-subtype-select option:hover{background-color:#f8fafc!important;color:#1f2937!important}.gradient-subtype-select option:checked,.gradient-subtype-select option:selected{background-color:#3b82f6!important;color:#fff!important;font-weight:600}.gradient-subtype-select option:disabled{background-color:#f1f5f9!important;color:#94a3b8!important;cursor:not-allowed}.gradient-subtype-tab{flex:1;padding:6px 12px;border:none;background:transparent;color:#667085;cursor:pointer;border-radius:4px;font-size:12px;font-weight:500;transition:all .15s ease}.gradient-subtype-tab.active{background:#fff;color:#1d2939;box-shadow:0 1px 2px #0000000d}.gradient-subtype-tab:hover:not(.active){background:#e5e7eb;color:#374151}.gradient-angle-controls{display:flex;align-items:center;gap:12px}.gradient-angle-input{flex:1;display:flex;align-items:center;gap:8px}.gradient-angle-input select{flex:1;padding:12px 40px 12px 16px;border:2px solid #e2e8f0;border-radius:12px;background:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;color:#1f2937;font-size:14px;font-weight:500;outline:none;cursor:pointer;transition:all .2s ease;appearance:none;-webkit-appearance:none;-moz-appearance:none}.gradient-angle-input select:hover{border-color:#cbd5e1;background-color:#f8fafc}.gradient-angle-input select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.gradient-angle-input select option{padding:12px 16px;background-color:#fff;color:#1f2937;font-size:14px;font-weight:500;border:none;outline:none}.gradient-angle-input select option:hover{background-color:#f8fafc;color:#1f2937}.gradient-angle-input select option:checked,.gradient-angle-input select option:selected{background-color:#3b82f6;color:#fff}.gradient-angle-input select option:disabled{background-color:#f1f5f9;color:#94a3b8}.gradient-degree-input{border:1px solid #919eab33;padding:6.5px 16px;border-radius:8px;max-width:75px;background:#fff;color:#1f2937;font-size:14px;font-weight:500;width:80px;text-align:center;outline:none;transition:all .2s ease;min-height:38px}.gradient-degree-input:hover{border-color:#cbd5e1;background-color:#f8fafc}.gradient-degree-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.gradient-degree-input:disabled{opacity:.4;cursor:not-allowed;background:var(--action-selected, #919eab29)!important;border-color:var(--action-selected, #919eab29)!important}.gradient-flip-btn{max-width:36px;height:38px;width:100%;border-radius:6px;background:#919eab29;color:#6b7280;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;transition:all .2s ease}.gradient-flip-btn:hover{background:#e3e2e4;color:#374151}.gradient-flip-btn:active{transform:scale(.95)}.custom-color-picker{position:fixed;width:306px;background:#fff;border-radius:16px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:1px solid #e5e7eb;z-index:10001;overflow:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:box-shadow .2s ease}.color-picker-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000;z-index:10000}.custom-color-picker.dragging{box-shadow:0 25px 30px -5px #00000026,0 15px 15px -5px #00000014;cursor:move}.color-picker-header{display:flex;justify-content:space-between;align-items:center;padding:10.5px 20px;background:#fff;cursor:move}.color-picker-header span{font-size:16px;font-weight:600;color:#111827}.color-picker-close{width:28px;height:28px;border:none;background:transparent;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#6b7280;transition:all .15s ease}.color-picker-close:hover{background:#f3f4f6;color:#374151}.color-picker-area{height:268px;margin:8px;border-radius:12px;position:relative;cursor:crosshair;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,red);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.color-picker-area.embedded{width:100%;height:200px;margin:0 0 16px;position:relative;border-radius:8px;overflow:hidden}.color-picker-marker{position:absolute;border-radius:50%;width:20px;height:20px;border:3px solid #ffffff;box-shadow:0 0 0 1px #0003,0 2px 4px #00000026;transform:translate(-50%,-50%);top:50%;pointer-events:none;background:transparent;display:flex;align-items:center;justify-content:center;z-index:10}.embedded-color-picker-content .color-picker-marker,.embedded-color-picker-content .color-picker-hue-marker,.embedded-color-picker-content .color-picker-opacity-marker{width:16px;height:16px;border:2px solid #ffffff}.color-picker-marker:before{content:"";width:12px;height:12px;background:transparent;border-radius:50%}.color-picker-hue{width:100%;height:12px;margin:0;border-radius:8px;position:relative;cursor:pointer;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);touch-action:none;-webkit-user-select:none;user-select:none}.color-picker-hue.embedded{width:100%;margin:0;height:14px}.color-picker-sliders-container{display:flex;align-items:flex-start;gap:8px;width:100%;margin:0 auto 20px;max-width:368px;padding:0 20px}.custom-color-picker .color-picker-sliders-container{max-width:368px;padding:4px 8px}.color-picker-sliders-container.embedded{max-width:260px;margin:0 auto 16px;padding:0}.color-picker-sliders-group{display:flex;flex-direction:column;gap:12px;flex:1}.color-picker-eyedropper{background:none;border:none;padding:8px;border-radius:6px;cursor:pointer;transition:background-color .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:auto}.color-picker-eyedropper:hover{background-color:#0000000d}.color-picker-eyedropper:active{transform:scale(.95)}.color-picker-eyedropper svg{width:18px;height:18px}.color-picker-hue-marker{position:absolute;border-radius:50%;border:3px solid #ffffff;box-shadow:0 0 0 1px #0003,0 2px 4px #00000026;transform:translate(-50%,-50%);top:50%;pointer-events:none;background:#fff;display:flex;align-items:center;justify-content:center}.color-picker-hue-marker:before{content:"";width:8px;height:8px;background:transparent;border-radius:50%}.color-picker-opacity{width:100%;height:12px;margin:0;border-radius:12px;position:relative;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;background-image:url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='3' height='3' fill='rgba(0,0,0,0.1)'/%3E%3Crect x='3' y='3' width='3' height='3' fill='rgba(0,0,0,0.1)'/%3E%3C/svg%3E"),linear-gradient(to right,var(--base-color-transparent, rgba(255, 0, 0, 0)),var(--base-color, #ff0000));background-size:6px 6px,100% 100%;background-position:0 0,0 0;background-repeat:repeat,no-repeat}.color-picker-opacity.embedded{width:100%;margin:0;height:14px}.color-picker-opacity-marker{position:absolute;border:3px solid #ffffff;border-radius:50%;box-shadow:0 0 0 1px #0003,0 2px 4px #00000026;transform:translate(-50%,-50%);top:50%;pointer-events:none;background:#fff;display:flex;align-items:center;justify-content:center}.color-picker-opacity-marker:before{content:"";width:8px;height:8px;background:transparent;border-radius:50%}.color-picker-format-section{display:flex;align-items:center;padding:0 20px 20px;gap:4px}.color-picker-format-section.embedded{padding:0 4px}.color-picker-format-select{height:38px;padding:0 8px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;font-weight:400;color:#1c252e;background:#fff;outline:none;transition:all .15s ease;min-width:70px;cursor:pointer;box-sizing:border-box}.color-picker-format-select:focus{border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6}.color-picker-format-select:hover{border-color:#cbd5e1}.color-picker-input-container{position:relative;flex:1;height:38px;display:flex;align-items:center;border:1px solid #e5e7eb;border-radius:8px;background:#fff;overflow:hidden;box-sizing:border-box}.color-picker-swatch{width:25px;height:25px;border-radius:4px;border:1px solid #e4e7ec;flex-shrink:0;margin-left:4px;position:relative;overflow:hidden}.color-picker-swatch:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#637381 25%,transparent 25%),linear-gradient(-45deg,#637381 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#637381 75%),linear-gradient(-45deg,transparent 75%,#637381 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:#fff;z-index:0;opacity:0;transition:opacity .15s ease}.color-picker-swatch.has-transparency:before{opacity:1}.color-picker-swatch-color{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:3px}.color-picker-color-input{flex:1;min-width:0;height:100%;padding:0 8px;border:none;font-size:14px;font-weight:400;color:#1c252e;background:transparent;outline:none;transition:all .15s ease}.color-picker-color-input:focus{background:#3b82f60d}.color-picker-input-container:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.color-picker-input-separator{width:1px;height:100%;background:#e5e7eb;flex-shrink:0}.color-picker-opacity-value-input{width:56px;height:100%;padding:0 10px;border:none;font-size:14px;font-weight:400;color:#1c252e;background:transparent;outline:none;text-align:right}.color-picker-opacity-value-input:focus{background:#3b82f60d}.color-picker-copy-inside{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:45px;height:26px;border-radius:6px;border:none;gap:8px;padding:4px 8px;background:var(--action-selected, #919eab29);color:var(--text-secondary, #637381);font-size:11px;font-weight:500;cursor:pointer;transition:all .15s ease;outline:none;opacity:1}.color-picker-copy-inside:hover{background:#919eab66}.color-picker-copy-inside:active{transform:translateY(-50%) scale(.95)}.color-picker-copy{padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease;outline:none}.color-picker-copy:hover{background:#f9fafb;border-color:#d1d5db;color:#111827}.color-picker-copy:active{transform:scale(.98)}.custom-color-button{width:44px;height:44px;border:2px solid #e2e8f0;border-radius:12px;cursor:pointer;position:relative;overflow:hidden;transition:all .15s ease;background:#fff}.custom-color-button:hover{border-color:#cbd5e1;transform:scale(1.02)}.custom-color-button:active{transform:scale(.98)}.custom-color-button-color{position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:8px;background:var(--color, #000000)}.embedded-color-picker{padding:0}.embedded-color-picker-content{width:100%;font-family:system-ui,-apple-system,sans-serif}.color-picker-recent-section{padding:16px 0;border-top:1px solid #f3f4f6}.custom-color-picker .color-picker-recent-section{padding:16px 8px}.color-picker-recent-section.embedded{padding:12px 0}.color-picker-recent-title{font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:400;font-style:normal;font-size:.75rem;line-height:1.66;letter-spacing:.03333em;color:#637381;margin-bottom:8px}.color-picker-recent-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-bottom:8px}.color-picker-recent-swatch{width:24px;height:24px;border-radius:6px;border:1px solid rgba(0,0,0,.1);cursor:pointer;transition:all .15s ease;position:relative;overflow:hidden;background-color:#fff;background-size:cover;background-position:center}.color-picker-recent-swatch:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#637381 25%,transparent 25%),linear-gradient(-45deg,#637381 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#637381 75%),linear-gradient(-45deg,transparent 75%,#637381 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:#fff;z-index:0;opacity:0;transition:opacity .15s ease}.color-picker-recent-swatch.has-transparency:before{opacity:1}.color-picker-recent-swatch-color{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:5px}.color-picker-recent-swatch:hover{border-color:#0003;box-shadow:0 2px 8px #00000026;z-index:1}.color-picker-recent-swatch:active{transform:scale(.95)}.color-picker-recent-placeholder{font-size:11px;color:#9ca3af;text-align:center;font-style:italic;padding:8px 0;display:none}.color-picker-tooltip{position:fixed;background:#000000e6;color:#fff;padding:6px 10px;border-radius:6px;font-size:11px;font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:500;white-space:nowrap;z-index:10000;pointer-events:none;transform:translate(-50%);margin-top:4px;box-shadow:0 2px 8px #00000026}.color-picker-tooltip:before{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-bottom-color:#000000e6}.string-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.string-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.string-setting-wrapper .string-setting-wrapper{display:block;width:100%}.color-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.color-input-wrapper{position:relative;width:100%;justify-self:end}.color-text-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-left:36px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.color-text-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-text-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-text-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.color-text-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-picker{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:0;cursor:pointer;z-index:2}.color-preview{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--radius-sm, 4px);border:1px solid var(--color-border, #e4e7ec);flex-shrink:0;transition:transform var(--transition-fast, .15s ease);pointer-events:none;background-color:#fff}.color-preview:hover{transform:translateY(-50%) scale(1.05)}.setting-group .setting-group .color-setting-wrapper{min-height:36px}.setting-group .setting-group .color-input-wrapper{max-width:120px}.setting-group .setting-group .color-text-input{height:32px;padding:6px 10px 6px 32px;font-size:13px}.setting-group .setting-group .color-preview,.setting-group .setting-group .color-picker{left:6px;width:18px;height:18px}.setting-group .setting-group .setting-group .color-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .color-input-wrapper{max-width:100px}.setting-group .setting-group .setting-group .color-text-input{height:28px;padding:4px 8px 4px 28px;font-size:12px}.setting-group .setting-group .setting-group .color-preview,.setting-group .setting-group .setting-group .color-picker{left:4px;width:16px;height:16px}.color-input-wrapper.error .color-text-input{border-color:#f04438;background:#fff4f4;color:#f04438}.color-input-wrapper.error .color-text-input:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.color-input-wrapper.disabled .color-text-input{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-picker:focus-visible+.color-preview{outline-offset:2px}.color-setting-tabs{display:flex;gap:0;padding:0;background:transparent}.color-tab{flex:1;border:none;background:transparent;padding:2px 4px;font-size:14px;font-weight:600;color:#637381;cursor:pointer;border-radius:4px;transition:all .15s ease;min-width:64px;height:30px;display:flex;align-items:center;justify-content:center}.color-tab:hover:not(.active){background:#eff1f280}.color-tab.active{background:#eff1f2;color:#1c252e}.color-content-global{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:4px}.global-color-btn{width:24px;height:24px;border-radius:50%;border:1px solid #eaecf0;cursor:pointer;transition:transform .1s;padding:0}.global-color-btn:hover{transform:scale(1.1);border-color:#d0d5dd}.global-color-btn.active{border:2px solid #2196f3;box-shadow:0 0 0 2px #2196f333}.color-with-opacity-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.color-with-opacity-controls-wrapper{display:grid;grid-template-columns:1fr;gap:var(--space-sm, 8px);justify-self:end;width:100%}.color-with-opacity-input-wrapper,.color-with-opacity-opacity-wrapper{position:relative;width:100%}.color-with-opacity-text-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-left:36px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.color-with-opacity-text-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-with-opacity-text-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-with-opacity-text-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-with-opacity-picker{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:0;cursor:pointer;z-index:2}.color-with-opacity-preview{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--radius-sm, 4px);border:1px solid var(--color-border, #e4e7ec);flex-shrink:0;transition:transform var(--transition-fast, .15s ease);pointer-events:none;background-color:#fff;cursor:pointer;overflow:hidden}.color-with-opacity-preview:hover{transform:translateY(-50%) scale(1.05)}.color-with-opacity-preview:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;z-index:-1}.color-with-opacity-opacity-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:20px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.color-with-opacity-opacity-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-with-opacity-opacity-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-with-opacity-opacity-suffix{position:absolute;right:var(--space-sm, 8px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.color-with-opacity-opacity-input::-webkit-inner-spin-button,.color-with-opacity-opacity-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.color-with-opacity-opacity-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .color-with-opacity-setting-wrapper{min-height:36px}.setting-group .setting-group .color-with-opacity-controls-wrapper{max-width:120px}.setting-group .setting-group .color-with-opacity-input-wrapper,.setting-group .setting-group .color-with-opacity-opacity-wrapper{width:100%}.setting-group .setting-group .color-with-opacity-text-input,.setting-group .setting-group .color-with-opacity-opacity-input{height:32px;padding:6px 10px;font-size:13px}.setting-group .setting-group .color-with-opacity-text-input{padding-left:32px}.setting-group .setting-group .color-with-opacity-preview,.setting-group .setting-group .color-with-opacity-picker{left:6px;width:18px;height:18px}.setting-group .setting-group .color-with-opacity-opacity-input{padding-right:20px}.setting-group .setting-group .color-with-opacity-opacity-suffix{right:8px;font-size:11px}.setting-group .setting-group .setting-group .color-with-opacity-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .color-with-opacity-controls-wrapper{max-width:100px}.setting-group .setting-group .setting-group .color-with-opacity-input-wrapper,.setting-group .setting-group .setting-group .color-with-opacity-opacity-wrapper{width:100%}.setting-group .setting-group .setting-group .color-with-opacity-text-input,.setting-group .setting-group .setting-group .color-with-opacity-opacity-input{height:28px;padding:4px 8px;font-size:12px}.setting-group .setting-group .setting-group .color-with-opacity-text-input{padding-left:28px}.setting-group .setting-group .setting-group .color-with-opacity-preview,.setting-group .setting-group .setting-group .color-with-opacity-picker{left:4px;width:16px;height:16px}.setting-group .setting-group .setting-group .color-with-opacity-opacity-input{padding-right:20px}.setting-group .setting-group .setting-group .color-with-opacity-opacity-suffix{right:8px;font-size:10px}.color-with-opacity-input-wrapper.error .color-with-opacity-text-input{border-color:#f04438;background:#fff4f4;color:#f04438}.color-with-opacity-input-wrapper.disabled .color-with-opacity-text-input{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.html-setting-wrapper{display:flex;flex-direction:column;gap:8px;position:relative;width:100%}.html-setting-wrapper .icon-container{display:flex;align-items:center;gap:8px;margin-bottom:4px}.html-setting-wrapper .icon-container label{color:var(--Gray-800, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0}.html-setting-wrapper .icon-container img{width:20px;height:20px;object-fit:contain}.html-setting-textarea{width:100%;min-height:120px;padding:12px;font-size:13px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;line-height:1.4;border-radius:8px;color:var(--Gray-900, #101828);border:1px solid var(--Gray-300, #d0d5dd);background:var(--Base-White, #fff);resize:vertical;min-width:0;box-sizing:border-box;transition:border-color .2s ease,box-shadow .2s ease}.html-setting-textarea:focus{outline:none}.html-setting-textarea::placeholder{color:var(--Gray-500, #667085);font-style:italic}.html-setting-textarea:disabled{background-color:var(--Gray-50, #f9fafb);color:var(--Gray-500, #667085);cursor:not-allowed}@media (max-width: 768px){.html-setting-textarea{font-size:12px;padding:10px;min-height:100px}}.html-setting-textarea::-webkit-scrollbar{width:8px}.html-setting-textarea::-webkit-scrollbar-track{background:var(--Gray-100, #f2f4f7);border-radius:4px}.html-setting-textarea::-webkit-scrollbar-thumb{background-color:var(--Gray-300, #d0d5dd);border-radius:4px;border:2px solid transparent;background-clip:content-box}.html-setting-textarea::-webkit-scrollbar-thumb:hover{background-color:var(--Gray-400, #98a2b3)}.html-setting-textarea{scrollbar-width:thin;scrollbar-color:var(--Gray-300, #d0d5dd) var(--Gray-100, #f2f4f7)}.html-setting-textarea[data-syntax=html]{font-family:Monaco,Menlo,Ubuntu Mono,Courier New,monospace;-moz-tab-size:2;tab-size:2}.number-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.number-setting-wrapper .icon-container{display:flex;align-items:center;gap:4px}.number-setting-wrapper .input-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#667085;flex-shrink:0}.number-setting-wrapper .input-icon svg{width:18px;height:18px}.number-setting-wrapper .input-label{color:#637381;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:500;line-height:1.4}.number-setting-input-container{position:relative;width:100%;justify-self:end}.number-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:44px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.number-setting-input::placeholder{color:var(--color-text-muted, #98a2b3)}.number-setting-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.number-setting-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.number-setting-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.suffix-label{position:absolute;right:var(--space-md, 12px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.number-setting-input::-webkit-inner-spin-button,.number-setting-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-setting-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .number-setting-wrapper{min-height:36px}.setting-group .setting-group .number-setting-input-container{max-width:120px}.setting-group .setting-group .number-setting-input{height:32px;padding:6px 36px 6px 10px;font-size:13px}.setting-group .setting-group .suffix-label{right:10px;font-size:11px}.setting-group .setting-group .setting-group .number-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .number-setting-input-container{max-width:100px}.setting-group .setting-group .setting-group .number-setting-input{height:28px;padding:4px 32px 4px 8px;font-size:12px}.setting-group .setting-group .setting-group .suffix-label{right:8px;font-size:10px}.number-setting-input.error{border-color:#f04438;background:#fff4f4;color:#f04438}.number-setting-input.error:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.number-setting-input:focus-visible{outline-offset:2px}.opacity-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.icon-container{display:flex;align-items:center;gap:var(--space-sm, 8px)}.input-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--color-text-muted, #98a2b3)}.input-icon svg{width:16px;height:16px}.input-label{color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:500;line-height:1.4}.opacity-setting-input-container{position:relative;width:100%;justify-self:end}.opacity-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:44px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.opacity-setting-input::placeholder{color:var(--color-text-muted, #98a2b3)}.opacity-setting-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.opacity-setting-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.opacity-setting-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.opacity-suffix{position:absolute;right:var(--space-md, 12px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.opacity-setting-input::-webkit-inner-spin-button,.opacity-setting-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.opacity-setting-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .opacity-setting-wrapper{min-height:36px}.setting-group .setting-group .opacity-setting-input-container{max-width:120px}.setting-group .setting-group .opacity-setting-input{height:32px;padding:6px 36px 6px 10px;font-size:13px}.setting-group .setting-group .opacity-suffix{right:10px;font-size:11px}.setting-group .setting-group .setting-group .opacity-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .opacity-setting-input-container{max-width:100px}.setting-group .setting-group .setting-group .opacity-setting-input{height:28px;padding:4px 32px 4px 8px;font-size:12px}.setting-group .setting-group .setting-group .opacity-suffix{right:8px;font-size:10px}.opacity-setting-input.error{border-color:#f04438;background:#fff4f4;color:#f04438}.opacity-setting-input.error:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.opacity-setting-input:focus-visible{outline-offset:2px}.select-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;position:relative;width:100%;min-height:40px;z-index:1}.select-container .select-options{position:fixed;z-index:99999;max-width:300px;min-width:200px}.setting-group .select-container,.tab-content .select-container,.tabs-settings-container .select-container{position:relative;z-index:1}.select-container .icon-container{display:flex;align-items:center;margin-bottom:0}.select-container .icon-container .input-label{color:var(--color-text-secondary, #667085);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-sm, 12px);font-style:normal;font-weight:400;line-height:1.4}.select-button{place-self:end;max-width:140px;width:100%;height:36px;min-height:36px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 var(--space-md, 12px);border-radius:var(--radius-lg, 8px);border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);cursor:pointer;font-size:var(--font-size-md, 14px);font-weight:400;color:var(--color-text, #1d2939);position:relative;transition:all var(--transition-fast, .15s ease);box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.select-button:hover{border-color:var(--color-border-hover, #d0d5dd);box-shadow:0 1px 3px #1018281a}.select-button:focus{outline:none}.select-button.has-label{padding-top:0;height:36px}.select-button .select-label{position:absolute;top:8px;left:16px;color:#667085;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}.select-button .select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.select-button.loading{position:relative;color:#6e7891;background-color:#f9fafb;pointer-events:none;padding-left:36px!important}.select-button.loading:before{content:"";position:absolute;left:10px;top:25%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid #02cc59;border-radius:50%;animation:select-spin 1s linear infinite;z-index:2}@keyframes select-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-button.error{border-color:#f04438;color:#f04438;background-color:#fff4f4}.select-options{display:none;position:fixed!important;z-index:99999!important;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid #e4e7ec;background:#fff;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;transition:opacity .2s ease,transform .2s ease;opacity:0;transform:translateY(-8px);min-width:200px;max-width:300px}.select-options.open{display:flex;opacity:1;transform:translateY(0);animation:select-fade-in .2s ease forwards}@keyframes select-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes select-fade-in-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.select-options.dropdown-up.open{animation:select-fade-in-up .2s ease forwards}.select-option{padding:10px 12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#344054;border-radius:6px;transition:background-color .15s ease;font-size:14px}.select-option:hover{background:#f9fafb}.select-option.selected{background:#b6dfc8;color:#344054;font-weight:400}.svg-container{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;pointer-events:none;z-index:1}.svg-container .svg-select{stroke:#667085;transition:transform .3s ease;width:16px;height:16px}.svg-container.open .svg-select{transform:rotate(180deg)}.select-options::-webkit-scrollbar{width:6px}.select-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-options::-webkit-scrollbar-thumb{background:#e4e7ec;border-radius:8px}.select-options::-webkit-scrollbar-thumb:hover{background:#d0d5dd}.select-option.empty-message{text-align:center;color:#6e7891;font-style:italic;cursor:default;justify-content:center}.setting-group .setting-group .select-container{min-height:36px}.setting-group .setting-group .select-button{height:32px;min-height:32px;max-width:120px;font-size:13px;padding:0 32px 0 10px}.setting-group .setting-group .select-container .icon-container .input-label{font-size:11px}.setting-group .setting-group .setting-group .select-container{min-height:32px}.setting-group .setting-group .setting-group .select-button{height:28px;min-height:28px;max-width:100px;font-size:12px;padding:0 28px 0 8px}.setting-group .setting-group .setting-group .select-container .icon-container .input-label{font-size:10px}.setting-group .setting-group .svg-container,.setting-group .setting-group .setting-group .svg-container{right:8px;width:16px;height:16px}.setting-group .setting-group .svg-container .svg-select,.setting-group .setting-group .setting-group .svg-container .svg-select{width:12px;height:12px}.align-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px;justify-self:flex-end}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.button-setting{display:flex;height:30px;min-width:64px;padding:0;justify-content:center;align-items:center;gap:8px;flex:1 0 0;border:1px solid rgba(145,158,171,.32);border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;line-height:20px;letter-spacing:.01em;text-align:center}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative;width:100%}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center;z-index:1}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{transform:translate(-.25rem);width:24px;height:24px;background:none;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#667085;z-index:1;border-radius:4px;transition:all .2s ease}.dimension-lock-icon:hover{background-color:#f5f5f5;transform:translate(-.25rem) scale(1.1)}.dimension-setting-container.aspect-locked .dimension-lock-icon{color:#02cc59;background-color:#02cc591a;box-shadow:0 0 0 1px #02cc5933}.dimension-setting-container.aspect-locked .dimension-bracket:before,.dimension-setting-container.aspect-locked .dimension-bracket:after{filter:hue-rotate(210deg) saturate(2)}@media (max-width: 480px){.dimension-bracket{right:100px}}.upload-setting-wrapper{display:grid;grid-template-columns:1fr;gap:8px;width:100%}.icon-title-container{display:flex;align-items:center;gap:8px;margin-bottom:4px}.icon-title-container .input-label{color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500}.preview-button-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch;width:100%;gap:12px;border-radius:12px}.preview-button-container.no-image{justify-content:center}.preview-button-container.no-image .preview-placeholder{display:none}.preview-button-container.no-image .upload-button{width:100%;min-width:140px;flex-grow:1;margin:0 auto}.no-image .preview-placeholder{display:none!important}.preview-wrapper{position:relative;width:91px;height:71px;border-radius:4px;overflow:hidden;background-color:#d3d3d3;flex-shrink:0;display:none}.preview-wrapper.has-image{display:block}.upload-preview{width:100%;height:100%;object-fit:cover;border-radius:4px;display:none;background-position:center;background-size:146.165% 100%;background-repeat:no-repeat}.preview-wrapper.has-image .upload-preview{display:block;object-fit:contain;padding:2px}.empty-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3}.empty-state svg{width:100%;height:100%}.preview-wrapper.has-image .empty-state{display:none}.upload-button{width:100%;height:40px;display:flex;padding:5px 4px;flex-direction:row;align-items:center;gap:4px;border-radius:12px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Base-White, #fff);cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;flex-grow:0;justify-content:center;min-width:90px}.preview-wrapper:not(.has-image)+.upload-button{flex-grow:0}.upload-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.upload-icon{display:flex;align-items:center;justify-content:center}.upload-label{font-size:12px;font-weight:500;color:#344054}.delete-button{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;position:absolute;right:4px;top:4px;background:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:background-color .2s ease;z-index:2}.delete-button svg{width:14px;height:14px;flex-shrink:0}.delete-button:hover{background-color:#f3f4f6}.upload-setting-wrapper.no-label .preview-button-container{grid-row:1}.preview-placeholder{display:flex;justify-content:center;align-items:center;width:91px;height:71px;border-radius:4px;background-color:#f2f4f7;flex-shrink:0}.preview-button-container:not(:has(.preview-wrapper.has-image)) .preview-placeholder{display:flex}.upload-setting-wrapper .error-message{color:#f04438;font-size:12px;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.4;margin-top:4px;margin-bottom:8px;padding:8px 12px;background-color:#fff4f4;border:1px solid #fecdca;border-radius:6px;display:none;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.upload-setting-wrapper .error-message:before{content:"⚠️";margin-right:6px}.preview-wrapper.loading{display:flex;align-items:center;justify-content:center;background-color:#f9fafb}.preview-wrapper.loading .upload-preview{display:none}.loading-spinner{width:29px;height:29px;display:flex;align-items:center;justify-content:center;animation:spin 1s linear infinite}.loading-spinner svg{width:100%;height:100%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--im-bg: #f6f8fb;--im-panel: #ffffff;--im-panel-strong: #f1f4f9;--im-card: #ffffff;--im-border: #d7deea;--im-border-strong: #c3d2ea;--im-text: #0f172a;--im-text-subtle: #4b5565;--im-accent: #3ca4ff;--im-accent-strong: #2f7bd1;--im-danger: #f04438;--im-success: #12b76a;--im-shadow: 0 10px 30px rgba(15, 23, 42, .12);--im-radius: 14px;--font: "Public Sans"}.image-map-setting-wrapper{display:grid;grid-template-columns:1fr;gap:12px;width:100%;font-family:var(--font)}.icon-container{display:flex;align-items:center;gap:8px}.input-label{color:#1f2937;font-size:14px;font-weight:600}.input-icon{display:flex;align-items:center;justify-content:center}.image-map-sections-container{display:flex;flex-direction:column;gap:16px}.image-map-section{display:flex;flex-direction:column;gap:8px}.image-map-section-title{color:#46525c;margin:0;font-family:var(--font);font-size:14px;font-style:normal;font-weight:600;line-height:150%}.image-map-upload-box{position:relative;display:flex;align-items:center;justify-content:center;height:40px;background:#f9fafb;border:1px solid rgba(145,158,171,.2);border-radius:12px;padding:4px;gap:12px;transition:all .2s ease}.image-map-upload-box:hover{border-color:#c7d5ed}.image-map-upload-box.has-image{border-style:solid;background:#eff1f2;justify-content:space-between;padding:4px!important;border-radius:12px;gap:12px;height:60px}.image-map-thumbnail-wrapper{position:relative;display:none;flex-shrink:0}.image-map-upload-box.has-image .image-map-thumbnail-wrapper{display:block}.image-map-thumbnail-main{width:121px;height:52px;background:#fff;object-fit:cover;border-radius:8px;display:block}.image-map-upload-label{cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;transition:all .2s ease;margin-right:22px}.upload-text{color:#637381;font-family:var(--font);font-size:12px;font-style:normal;font-weight:600;line-height:18px;letter-spacing:0;display:flex}.image-map-upload-box.has-image .image-map-upload-label{position:static;opacity:1;background:transparent;flex:1;display:flex;align-items:center;justify-content:end;padding-right:4px;max-width:fit-content}.image-map-upload-box.has-image .upload-text{display:none}.image-map-upload-box.has-image .image-map-upload-label:after{content:"Replace";color:#637381;font-family:var(--font);font-size:12px;font-weight:600}.upload-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:50%}.upload-icon svg{width:15px;height:16px}.image-map-upload-box.has-image .upload-icon{background:transparent;width:24px;height:24px}.image-map-upload-box.has-image .upload-icon svg{width:18px;height:18px}.upload-icon-default{display:flex}.upload-icon-replace,.image-map-upload-box.has-image .upload-icon-default{display:none}.image-map-upload-box.has-image .upload-icon-replace{display:flex}.image-map-delete-btn{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:18px;height:18px;display:none;align-items:center;justify-content:center;background:#eff1f2;border:1px solid #ff5630;border-radius:500px;cursor:pointer;transition:all .2s ease;z-index:10;padding:0}.image-map-upload-box.has-image .image-map-delete-btn{display:flex;width:28px;height:28px}.image-map-delete-btn svg{width:14px;height:15px;flex-shrink:0}.image-map-button{display:flex;align-items:center;gap:12px;padding:4px;border-radius:12px;background:#f9fafb;border:1px solid #dce3ef;cursor:pointer;transition:all .2s ease;min-height:40px;border:1px solid rgba(145,158,171,.2);color:#0f172a;font-weight:600;justify-content:center}.image-map-button:hover:not(:disabled){border-color:#c7d5ed}.image-map-button:disabled{opacity:.5;cursor:not-allowed;background:#f5f5f5}.image-map-thumbnail{width:72px;height:52px;object-fit:cover;border-radius:8px;display:none;border:1px solid var(--im-border);background:#eef2f8}.image-map-button.has-image .image-map-thumbnail{display:block}.image-map-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px}.image-map-icon svg{width:18px;height:18px;aspect-ratio:1/1}.image-map-button.has-image .image-map-icon{display:none}.image-map-marker-count{color:#637381;font-family:var(--font);font-size:12px;font-style:normal;font-weight:600;line-height:18px;letter-spacing:0}.image-map-button.has-image .image-map-marker-count{color:#0f172a;font-size:14px;font-weight:600}.image-map-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a00;z-index:1;pointer-events:none}.image-map-popover{position:fixed;z-index:1;width:580px;max-width:94vw;height:600px;max-height:90vh;background:#fff;border-radius:var(--im-radius);border:1px solid var(--im-border-strong);box-shadow:0 20px 50px #0f172a29;display:flex;flex-direction:column;overflow:hidden;color:var(--im-text);gap:16px;padding:16px;z-index:99}.image-map-header{display:flex;align-items:center;justify-content:space-between;-webkit-user-select:none;user-select:none}.image-map-title{margin:0;font-size:18px;font-weight:600;color:#1c252e;line-height:150%}.image-map-close-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:2px;transition:all .2s ease;padding:0}.image-map-close-btn:hover{background:#dbdfe2}.image-map-content{overflow:hidden;flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.image-map-main-layout{display:flex;gap:16px;height:100%;min-height:0}.image-map-image-section{flex:1;display:flex;flex-direction:column;gap:16px;min-width:0;min-height:0}.prize-list-section{width:200px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden}.upload-section-wrapper{display:flex;flex-direction:column;gap:20px}.upload-section-title{font-size:16px;font-weight:700;color:#0f172a;margin:0 0 12px}.upload-section{display:flex;align-items:center;justify-content:center;min-height:180px;background:#f9fbfe;border:1px dashed #d7deea;border-radius:var(--im-radius)}.upload-label{cursor:pointer;width:100%;border:none;padding:0;background:none}.upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px;border:none;border-radius:var(--im-radius);background:transparent;transition:all .2s ease;color:#0f172a}.upload-placeholder:hover{background:#eef3fb}.upload-placeholder span{color:#0f172a;font-size:15px;font-weight:600}.upload-label.map-config-btn .upload-placeholder{border:1px solid #d7deea;border-radius:var(--im-radius);background:#fff}.upload-label.map-config-btn .upload-placeholder:hover{background:#f0f4fb;border-color:#c7d5ed}.controls-row{display:flex;justify-content:space-between;align-items:center;gap:16px;border-radius:12px}.place-prize-text{color:var(--Blue-blue-1000, #1c252e);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:150%}.undo-redo-group{display:flex;gap:8px;flex:0 0 auto;margin-left:11px}.prize-counter-inline{color:var(--Blue-blue-500, #637381);text-align:right;font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:150%}.prize-counter-inline.complete{background:#f0fbf4;color:var(--im-success);border-color:#12b76a66}.action-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0;color:#0f172a;border-radius:2px}.action-btn:hover:not(:disabled){background:#dbdfe2}.action-btn:disabled{opacity:.35;cursor:not-allowed}.action-btn:disabled svg path{fill:#454f5b}.action-btn svg path{fill:#0f172a}.bottom-buttons{display:flex;justify-content:flex-end;gap:16px}.bottom-buttons>button,.bottom-buttons>.done-btn-wrapper{max-width:110px;width:100%}.clear-all-btn{display:flex;justify-content:center;align-items:center;gap:2px;border:1px solid var(--Blue-blue-100, #cfd4d8);border-radius:8px}.clear-all-btn svg{width:18px;height:18px;aspect-ratio:1/1}.clear-all-btn span{color:var(--Blue-blue-700, #46525c);text-align:center;font-size:14px;font-style:normal;font-weight:700;line-height:150%;text-transform:capitalize}.clear-all-btn:hover{border-radius:8px;border:1px solid var(--Blue-blue-100, #cfd4d8);background:var(--Blue-blue-50, #eff1f2)}.done-btn{display:flex;justify-content:center;align-items:center;gap:4px;border-radius:8px;background:var(--Blue-blue-1000, #1c252e);padding:8px 12px;color:var(--Blue-blue-50, #eff1f2);text-align:center;font-size:14px;font-style:normal;font-weight:700;line-height:150%;text-transform:capitalize;width:100%}.done-btn:hover:not(:disabled){border-radius:8px;background:var(--Blue-blue-900, #2a3036)}.done-btn:disabled{border-radius:8px;opacity:.5;background:var(--Blue-blue-1000, #1c252e)}.done-btn-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.done-btn-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,25%);display:none;flex-direction:column;align-items:center;pointer-events:none;z-index:1000}.done-btn-wrapper.has-tooltip:hover .done-btn-tooltip{display:flex}.done-btn-tooltip-content{display:flex;padding:var(--tooltip-py, 3px) var(--tooltip-px, 6px);justify-content:center;align-items:center;border-radius:var(--radius-075, 6px);background:var(--Blue-blue-1000, #1c252e);color:#fff;font-family:var(--font);line-height:150%;white-space:nowrap;text-align:center;font-size:11px;font-style:normal;font-weight:400}.done-btn-tooltip-tail{width:8px;height:4px;display:flex;align-items:center;justify-content:center;margin-top:-1px}.done-btn-tooltip-tail svg{width:8px;height:4px;fill:var(--Blue-blue-1000, #1c252e)}.image-map-error-tooltip{position:absolute;display:flex;flex-direction:column;align-items:center;gap:0;pointer-events:none;transform:translate(-50%,-100%);opacity:0;transition:opacity .15s ease,transform .15s ease;z-index:200}.image-map-error-tooltip.visible{opacity:1;transform:translate(-50%,calc(-100% - 2px))}.image-map-error-tooltip-content{display:flex;padding:var(--tooltip-py, 3px) var(--tooltip-px, 6px);justify-content:center;align-items:center;border-radius:6px;background:#ff5630;color:var(--components-tooltip-color, #fff);text-align:center;font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:150%;box-shadow:0 10px 24px #f044384d;white-space:nowrap}.image-map-error-tooltip-tail{width:8px;height:4px;display:flex;align-items:center;justify-content:center}.image-map-error-tooltip-tail svg{width:8px;height:4px;display:block}.image-map-error-tooltip-tail path{fill:#ff5630}.image-map-container{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;padding-right:4px}.image-map-container::-webkit-scrollbar{width:4px}.image-map-container::-webkit-scrollbar-track{background:#eff1f2}.image-map-container::-webkit-scrollbar-thumb{background:var(--Blue-blue-300, #96a1ab);border-radius:100px}.image-map-container::-webkit-scrollbar-thumb:hover{background:#7a8691}.image-map-wrapper{position:relative;width:100%;background:#fff;min-height:fit-content}.image-map-image{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;border-radius:8px}.prize-counter{font-size:14px;font-weight:700;color:var(--im-text);padding:10px 12px;background:#fff;border-radius:10px;border:1px solid var(--im-border);text-align:center}.prize-counter.complete{background:#f0fbf4;color:var(--im-success);border-color:#12b76a66}.prize-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;background:#f9fbfe;padding:2px;border-radius:10px}.prize-item{padding:12px;background:var(--im-card);border:1px solid var(--im-border);border-radius:12px;display:grid;grid-template-columns:36px 1fr 24px;align-items:center;gap:10px;box-shadow:inset 0 1px #ffffffb3}.prize-item.placed{border-color:#12b76a66;background:#f0fbf4}.prize-item.missing{border-color:#f0443840;background:#fff5f5}.prize-index{width:32px;height:32px;border-radius:8px;background:#f0f4fb;border:1px solid var(--im-border);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--im-text)}.prize-label{display:flex;flex-direction:column;gap:2px}.prize-title{font-weight:700;color:#0f172a;font-size:14px}.prize-subtitle{color:#4b5565;font-size:12px}.prize-status{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffffe6}.prize-status.placed{box-shadow:0 0 0 1px #12b76a40}.prize-status.missing{box-shadow:0 0 0 1px #f0443840}.prize-list-empty{padding:16px 10px;text-align:center;color:var(--im-text-subtle);font-size:12px}.sidebar-save-btn{padding:12px 16px;background:linear-gradient(145deg,#2f7bd1,#3ca4ff);color:#fff;border:1px solid rgba(60,164,255,.4);border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:transform .1s ease,box-shadow .2s ease;box-shadow:0 12px 30px #2f7cd14d}.sidebar-save-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 34px #3ca4ff59}.sidebar-save-btn:disabled{background:#e4eaf5;color:#7a869c;border-color:var(--im-border);cursor:not-allowed;box-shadow:none}.marker-container{position:absolute;display:flex;align-items:center;gap:10px;transform:translate(-13.5px,-34px);z-index:10;cursor:grab}.marker-container.dragging{cursor:grabbing;z-index:30}.marker-container.dragging .image-map-marker{transform:scale(1.1)}.image-map-marker{width:27px;height:34px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;-webkit-user-select:none;user-select:none;transition:transform .15s ease,filter .2s ease;position:relative;filter:drop-shadow(0 4px 12px rgba(240,68,56,.4))}.image-map-marker svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.marker-number{pointer-events:none;position:relative;z-index:1;margin-top:-8px}.marker-delete-btn{position:absolute;top:-10px;right:-8px;width:18px;height:18px;display:none;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .2s ease;z-index:50;pointer-events:auto;box-shadow:0 2px 1px #00000040;border-radius:100%}.marker-container:hover .marker-delete-btn{display:flex}.marker-cursor-tooltip{position:absolute;display:none;width:18px;height:18px;padding:2px;flex-direction:column;justify-content:center;align-items:center;gap:4px;aspect-ratio:1/1;border-radius:23px;background:#f04438cc;color:#fff;font-size:11px;font-weight:700;pointer-events:none;z-index:100;transform:translate(10px,10px)}.marker-cursor-tooltip.visible{display:flex}.image-map-error-toast{font-family:var(--font)}.image-map-confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;z-index:11000;display:flex;align-items:center;justify-content:center;padding:16px}.image-map-confirm-modal{background:#fff;border:1px solid #dce3ef;border-radius:16px;width:360px;max-width:90vw;padding:20px;color:#0f172a;box-shadow:0 20px 50px #0f172a2e;transform:translateY(12px);opacity:0;transition:all .15s ease}.image-map-confirm-modal.visible{transform:translateY(0);opacity:1}.confirm-header{font-weight:700;font-size:16px;margin-bottom:8px}.confirm-body{font-size:14px;color:#4b5565;margin-bottom:18px;line-height:1.4}.confirm-actions{display:flex;justify-content:flex-end;gap:10px}.confirm-btn{padding:10px 14px;border-radius:10px;border:1px solid #dce3ef;background:#fff;color:#0f172a;font-weight:700;cursor:pointer;transition:all .15s ease;min-width:100px}.confirm-btn.ghost:hover{border-color:#c7d5ed;background:#eef3fb}.confirm-btn.danger{background:linear-gradient(145deg,#f04438,#c72f28);border-color:#f0443866;color:#fff}.confirm-btn.danger:hover{box-shadow:0 12px 24px #f044384d;transform:translateY(-1px)}.simple-prize-list{display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;padding:12px 8px 4px 4px;flex:1;min-height:0;border-radius:4px;border:1px solid var(--Blue-blue-50, #eff1f2);background:#fff}.simple-prize-list::-webkit-scrollbar{width:4px}.simple-prize-list::-webkit-scrollbar-track{background:#eff1f2}.simple-prize-list::-webkit-scrollbar-thumb{background:var(--Blue-blue-300, #96a1ab);border-radius:100px}.simple-prize-list::-webkit-scrollbar-thumb:hover{background:#7a8691}.simple-prize-item{display:grid;grid-template-columns:35px 1fr 20px;padding:2px 4px;place-content:center;align-items:center;border-bottom:1px solid #eff1f2;height:25px}.simple-prize-text{color:var(--Blue-blue-1000, #1c252e);font-size:14px;font-style:normal;font-weight:400;line-height:150%;font-family:var(--font)}.simple-prize-item.placed .simple-prize-text{color:#1c252e}.simple-prize-check{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:8px}.simple-prize-check svg{width:14px;height:14px}.height-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.height-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.height-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.height-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.width-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.width-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.width-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting .number-setting{width:100%}.sg-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s ease-out}.sg-modal-overlay.sg-modal-overlay-open{opacity:1}.sg-modal{transform:scale(.95);transition:transform .2s ease-out}.sg-modal.sg-modal-open{transform:scale(1)}.sg-confirmation-modal{background:#fff;border-radius:8px;padding:24px;max-width:400px;width:90%;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.sg-confirmation-title{margin:0 0 12px;font-size:18px;font-weight:600;color:#1f2937}.sg-confirmation-message{margin:0 0 24px;color:#6b7280;font-size:14px;line-height:1.5}.sg-confirmation-actions{display:flex;gap:12px;justify-content:flex-end}.sg-confirmation-button{padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.sg-confirmation-button--cancel{border:1px solid #d1d5db;background:#fff;color:#374151}.sg-confirmation-button--cancel:hover{background-color:#f9fafb;border-color:#9ca3af}.sg-confirmation-button--destructive{border:none;background:#ef4444;color:#fff}.sg-confirmation-button--destructive:hover{background:#dc2626}.sg-confirmation-button--primary{border:none;background:#2563eb;color:#fff}.sg-confirmation-button--primary:hover{background:#1d4ed8}confirmation-button--primary:hover{background:#1d4ed8}.select-api-container{display:grid;grid-template-columns:1fr;place-content:center;align-items:center;position:relative;width:100%}.select-api-button{width:100%;height:33px;min-height:33px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 16px;border-radius:8px;border:1px solid var(--color-border, #e4e7ec);background:#fff;cursor:pointer;color:#344054;font-family:Satoshi;font-size:14px;font-style:normal;font-weight:500;line-height:normal;position:relative;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:40px!important}.select-api-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.select-api-button:focus{outline:none;border-color:#b6dfc8;box-shadow:0 0 0 4px #7f56d91a}.select-api-button .select-label{position:absolute;top:2px;color:#667085;font-family:Satoshi;font-size:12px;font-style:normal;font-weight:400;line-height:normal;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}.select-api-button .select-value{margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.select-api-button.loading{position:relative;color:#6e7891;background-color:#f9fafb;pointer-events:none;padding-left:36px!important}.select-api-button.loading:before{content:"";position:absolute;left:10px;top:25%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid #02cc59;border-radius:50%;animation:select-api-spin 1s linear infinite;z-index:2}.select-api-button.has-label.loading{padding-left:36px!important}.select-api-button.has-label.loading .select-value{padding-left:0}.select-api-button.has-label.loading:before{top:18px;left:10px}@keyframes select-api-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-api-button.error{border-color:#f04438;color:#f04438;background-color:#fff4f4}.select-api-options{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;z-index:1000;flex-direction:column;gap:2px;color:#101828;align-items:flex-start;border:1px solid #e4e7ec;background:#fff;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;transition:opacity .2s ease,transform .2s ease;opacity:0;transform:translateY(-8px)}.select-api-options.open{display:flex;opacity:1;transform:translateY(0)}.select-api-option{padding:10px 12px;width:100%;display:flex;align-items:center;justify-content:flex-start;gap:10px;cursor:pointer;color:#344054;border-radius:6px;transition:background-color .15s ease;font-size:13px}.select-api-option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.select-api-option:hover{background:#f9fafb}.select-api-option.selected{background:#b6dfc8;color:#344054;font-weight:500}.select-api-option.disabled{opacity:.6;cursor:not-allowed;color:#6e7891}.select-api-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #e4e7ec;background:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0;cursor:pointer;flex-shrink:0}.select-api-radio:checked{border-color:#02cc59;background:#fff;position:relative}.select-api-radio:checked:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background:#02cc59;border-radius:50%}.svg-container{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;pointer-events:none}.svg-container .svg-select-api{stroke:#667085;transition:transform .3s ease;width:16px;height:16px}.svg-container.open .svg-select-api{transform:rotate(180deg)}.select-api-container .icon-container{display:none}.select-api-options::-webkit-scrollbar{width:6px}.select-api-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb{background:#e4e7ec;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb:hover{background:#d0d5dd}.select-api-option.empty-message{text-align:center;color:#6e7891;font-style:italic;cursor:default;justify-content:center}.select-api-option.empty-message:hover{background:transparent}.select-api-option:focus{outline:none;box-shadow:0 0 0 2px #b6dfc8}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.select-api-options.open{display:flex;animation:fadeIn .2s ease forwards}.select-api-button.has-label{height:48px}.toggle-setting-container{display:flex;justify-content:space-between;align-items:center;padding-left:3px;padding-right:3px;flex-wrap:wrap}.toggle-label{color:#344054;font-family:Satoshi;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.toggle-switch{position:relative;display:inline-block;width:36px;height:20px;padding:2px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#e4e7ec;transition:.4s;border-radius:34px}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.toggle-slider{background-color:#02cc59}input:focus+.toggle-slider{box-shadow:0 0 1px #02cc59}input:checked+.toggle-slider:before{transform:translate(16px)}.toggle-with-icon .toggle-label{display:flex;align-items:center;gap:8px}.toggle-icon{display:flex;align-items:center;justify-content:center;color:#667085}.toggle-description{color:#637381;width:100%;margin:8px 0 0;font-size:11px;line-height:16px}.toggle-setting-container.toggle-has-description{border:1px dashed #919EAB66;border-radius:12px;padding:12px 8px;box-sizing:border-box}.gap-settings-container{display:flex;flex-direction:column;gap:12px;width:100%}.gap-settings-title{font-size:14px;font-weight:500;color:#344054;margin-bottom:4px}.gap-input-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;width:100%}.gap-label-container{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1}.gap-setting-icon{display:flex;align-items:center;justify-content:center;font-size:16px;color:#667085}.gap-setting-icon svg{width:16px;height:16px}.gap-input-label{font-size:13px;color:#667085}.gap-setting-inner-wrapper{position:relative;display:grid;grid-template-columns:1fr;place-content:center;align-items:center;width:120px}.gap-setting-input{width:100%;padding:8px;font-size:14px;border-radius:8px;color:#292b2e;border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-wrapper{position:relative}.suffix-label{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding-left:8px;border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}.gap-setting-input::-webkit-outer-spin-button,.gap-setting-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gap-setting-input[type=number]{-moz-appearance:textfield}.margin-bottom-wrapper{display:grid;grid-template-columns:1fr auto;gap:auto}.margin-bottom-wrapper .setting-icon svg{width:18px;height:19px}.margin-bottom-wrapper .number-setting-input{background:#fff;min-width:95px;width:95px;padding:8px;border-radius:8px;border:1px solid #D0D5DD;font-size:14px;color:#292b2e}.margin-bottom-wrapper .setting-title{color:#667085;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.margin-top-wrapper{display:grid;grid-template-columns:1fr auto;gap:auto}.margin-top-wrapper .setting-icon svg{width:18px;height:19px}.margin-top-wrapper .number-setting-input{background:#fff;min-width:95px;width:95px;padding:8px;border-radius:8px;border:1px solid #D0D5DD;font-size:14px;color:#292b2e}.margin-top-wrapper .setting-title{color:#667085;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.simple-multi-language-wrapper{display:flex;flex-direction:column;width:100%}.simple-multi-language-title{display:flex;justify-content:space-between;align-items:center;color:var(--Blue-blue-700, #46525c);font-family:Public Sans;font-size:14px;font-style:normal;font-weight:600;line-height:150%}.simple-multi-language-content{display:flex;flex-direction:column;gap:12px;width:100%}.multi-language-eye-icon{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s,background .2s;border-radius:2px}.multi-language-eye-icon:hover{border-radius:2px;background:var(--Blue-hover, #dbdfe2);color:#000}.simple-multi-language-row{display:flex;flex-direction:column;gap:6px}.simple-language-label{font-size:12px;font-weight:500;color:var(--color-input-text);text-transform:uppercase;letter-spacing:.5px;margin-left:2px}.simple-language-textarea{width:100%;min-height:38px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);font-family:inherit;resize:none;line-height:1.4;overflow-y:hidden;box-sizing:border-box;padding:8px 12px;max-height:90px}.simple-language-textarea:focus{outline:none}.simple-language-textarea::placeholder{color:var(--color-text-muted, #6c757d);white-space:nowrap;text-overflow:ellipsis}.simple-language-textarea:placeholder-shown{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multi-language-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000;z-index:1000}.multi-language-popup{position:fixed;background:#fff;border-radius:16px;padding:24px 16px;max-width:580px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 4px 8px #919eab29;display:flex;flex-direction:column;gap:24px;z-index:1001}.multi-language-popup-header{display:flex;justify-content:space-between;align-items:center;cursor:move}.multi-language-popup-title{margin:0;font-family:Public Sans,sans-serif;font-size:18px;font-weight:600;line-height:1.5;color:#1c252e}.multi-language-popup-description{margin:4px 0 0;font-family:Public Sans,sans-serif;font-size:13px;font-weight:400;line-height:1.4;color:#2a3036}.multi-language-close-button{background:none;border:none;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:2px;transition:background-color .2s}.multi-language-close-button:hover{border-radius:2px;background:var(--Blue-hover, #dbdfe2)}.multi-language-close-button svg{width:24px;height:24px;color:#637381}.multi-language-popup-content{display:flex;flex-direction:column;gap:8px}.multi-language-popup-content .simple-multi-language-row{display:flex;flex-direction:column;gap:4px}.multi-language-popup-content .simple-language-label{font-family:Public Sans,sans-serif;font-size:14px;font-weight:400;line-height:1.5;color:#637381;text-transform:uppercase}.multi-language-popup-content .simple-language-textarea{width:100%;max-height:200px;font-family:Public Sans,sans-serif;font-size:14px;font-weight:400;line-height:1.5;color:#1c252e;border:1px solid #eff1f2;background:#fff;border-radius:8px;padding:16px;resize:none;box-sizing:border-box;transition:border-color .2s;overflow-y:auto}.multi-language-popup-content .simple-language-textarea:focus{outline:none}.multi-language-popup-content .simple-language-textarea::placeholder{color:#637381}.multi-language-popup-footer{display:flex;align-items:center;justify-content:flex-end;gap:16px}.multi-language-done-button{background:#1c252e;border:none;border-radius:8px;padding:8px 12px;min-width:104px;height:37px;cursor:pointer;font-family:Public Sans,sans-serif;font-size:14px;font-weight:700;line-height:1.5;color:#eff1f2;text-transform:capitalize;transition:background-color .2s}.multi-language-done-button:hover{background:#2c3840}.multi-language-done-button:disabled{background:#919eab;cursor:not-allowed}.translation-manager{padding:20px;background:var(--color-bg, #fff);border-radius:12px;border:1px solid var(--color-border, #e0e0e0);margin:20px 0}.translation-manager-title{margin:0 0 16px;font-family:Public Sans,sans-serif;font-size:16px;font-weight:600;color:var(--Blue-blue-700, #46525c)}.translation-manager-buttons{display:flex;gap:12px;margin-bottom:12px}.translation-manager-button{display:flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:8px;font-family:Public Sans,sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.translation-manager-button svg{width:16px;height:16px}.translation-manager-button.export-button{background:#1c252e;color:#fff}.translation-manager-button.export-button:hover{background:#2c3840}.translation-manager-button.import-button{background:#fff;color:#1c252e;border:1px solid #1c252e}.translation-manager-button.import-button:hover{background:#f5f5f5}.translation-manager-info{margin:0;font-family:Public Sans,sans-serif;font-size:13px;color:#637381;line-height:1.5}@media (max-width: 640px){.simple-multi-language-row{gap:4px}.simple-language-label{font-size:11px}.simple-language-textarea{min-height:0;padding:8px;font-size:13px}.multi-language-popup{width:95%;padding:16px}.multi-language-popup-title{font-size:16px}.translation-manager-buttons{flex-direction:column}.translation-manager-button{width:100%;justify-content:center}}.as-wrapper{display:grid;grid-template-columns:100px 1fr;column-gap:12px;align-items:center}.as-label{color:var(--Gray-700, #344054);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:400;line-height:36px;white-space:nowrap;flex-shrink:0}.as-row{display:flex;gap:8px;min-width:0}.as-input-with-icon{display:flex;align-items:center;height:36px;padding:0 4px;border:1px solid #cfd4d8;border-radius:4px;box-sizing:border-box;flex:1 1 0;min-width:0}.as-input-with-icon:hover{border-color:var(--Gray-300, #d0d5dd)}.as-input-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;margin-right:4px}.as-input-icon svg{width:18px;height:18px}.as-input{flex:1;min-width:0;width:100%;border:none;outline:none;background:transparent;color:var(--Gray-900, #101828);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:400;line-height:20px;padding:0}.as-input::placeholder{color:var(--Gray-400, #98a2b3)}@media (max-width: 480px){.as-wrapper{flex-wrap:wrap}.as-label{width:100%;line-height:20px;margin-bottom:4px}.as-row{flex-wrap:wrap}}.code-editor-setting-wrapper{display:flex;flex-direction:column;width:100%}.code-editor-setting-title{display:flex;justify-content:space-between;align-items:center;color:var(--Blue-blue-700, #46525c);font-family:Public Sans;font-size:14px;font-style:normal;font-weight:600;line-height:150%}.code-editor-open-button{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--color-border, #e4e7ec);border-radius:8px;padding:6px 12px;cursor:pointer;font-family:Public Sans,sans-serif;font-size:13px;font-weight:500;color:#637381;transition:background .2s,border-color .2s}.code-editor-open-button:hover{background:var(--Blue-hover, #dbdfe2);border-color:#c4cdd5}.code-editor-open-button svg{width:18px;height:18px;flex-shrink:0}.code-editor-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000;z-index:1000}.code-editor-popup{position:fixed;background:#fff;border-radius:16px;padding:24px 16px;max-width:900px;width:90%;max-height:80vh;min-height:350px;overflow:hidden;box-shadow:0 2px 12px #919eab33;display:flex;flex-direction:column;gap:16px;z-index:1001}.code-editor-popup-header{display:flex;justify-content:space-between;align-items:center;cursor:move}.code-editor-popup-title{margin:0;font-family:Public Sans,sans-serif;font-size:18px;font-weight:600;line-height:1.5;color:#1c252e}.code-editor-close-button{background:none;border:none;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:2px;transition:background-color .2s}.code-editor-close-button:hover{background:var(--Blue-hover, #dbdfe2)}.code-editor-close-button svg{width:24px;height:24px;color:#637381}.code-editor-tab-bar{display:flex;gap:0;border-bottom:1px solid #e4e7ec}.code-editor-tab{background:none;border:none;border-bottom:2px solid transparent;padding:8px 16px;cursor:pointer;font-family:Public Sans,sans-serif;font-size:14px;font-weight:500;color:#637381;transition:color .15s,border-color .15s}.code-editor-tab:hover{color:#1c252e}.code-editor-tab-active{color:#1c252e;border-bottom-color:#1c252e;font-weight:600}.code-editor-container{flex:1;min-height:200px;overflow:hidden;border:1px solid #e4e7ec;border-radius:8px;display:flex;flex-direction:column}.code-editor-view-wrapper{flex:1 1 200px;min-height:0;overflow:hidden}.code-editor-view-wrapper .cm-editor{height:100%}.code-editor-view-wrapper .cm-scroller{overflow:auto!important;min-height:200px}.code-editor-popup-footer{display:flex;align-items:center;justify-content:flex-end;gap:16px}.code-editor-done-button{background:#1c252e;border:none;border-radius:8px;padding:8px 12px;min-width:104px;height:37px;cursor:pointer;font-family:Public Sans,sans-serif;font-size:14px;font-weight:700;line-height:1.5;color:#eff1f2;text-transform:capitalize;transition:background-color .2s}.code-editor-done-button:hover{background:#2c3840}@media (max-width: 640px){.code-editor-popup{width:95%;padding:16px}.code-editor-popup-title{font-size:16px}.code-editor-container{min-height:0}}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085;align-self:center}.settings-container,.main-settings-container,[data-settings-container]{height:auto;min-height:auto;overflow:visible;flex-shrink:0}.container,.wrapper,.main-wrapper{height:auto!important;min-height:auto!important;max-height:none!important;overflow:visible!important}:root{--sg-spacing-0: 16px;--sg-spacing-1: 12px;--sg-spacing-2: 8px;--sg-spacing-3: 6px;--sg-border-0: #eaecf0;--sg-border-1: #d0d5dd;--sg-border-2: #e5e7eb;--sg-border-3: #f2f4f7;--sg-bg-0: #fff;--sg-bg-1: #fff;--sg-bg-2: #fff;--sg-bg-3: #fff;--sg-shadow-0: 0px 1px 3px rgba(16, 24, 40, .1), 0px 1px 2px rgba(16, 24, 40, .06);--sg-shadow-1: 0px 1px 2px rgba(16, 24, 40, .05);--sg-shadow-2: 0px 1px 1px rgba(16, 24, 40, .04);--sg-shadow-3: none}.setting-group{display:flex;flex-direction:column;width:100%;gap:8px;border-radius:8px;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;max-width:100%;box-sizing:border-box}.disabled-setting-group{opacity:.5!important;pointer-events:none!important}.setting-group[data-nesting-level="0"]{border-radius:8px;background:transparent}.setting-group[data-nesting-level="1"]{border-radius:6px;background:transparent}.setting-group[data-nesting-level="2"],.setting-group[data-nesting-level="3"],.setting-group[data-nesting-level="4"],.setting-group[data-nesting-level="5"]{border-radius:4px}.setting-group.collapsed{padding:0;border:none;background:transparent;box-shadow:none}.setting-group[data-nesting-level="0"] .setting-group-content{padding:0 8px 8px;gap:8px}.setting-group[data-nesting-level="1"] .setting-group-content{padding:0 8px 8px;gap:6px}.setting-group[data-nesting-level="2"] .setting-group-content{gap:4px}.setting-group[data-nesting-level="3"] .setting-group-content,.setting-group[data-nesting-level="4"] .setting-group-content,.setting-group[data-nesting-level="5"] .setting-group-content{padding:0 6px 6px;gap:3px}.setting-group-title{display:flex;justify-content:space-between;align-items:center;padding:4px 0;cursor:pointer;border-radius:6px}.setting-group-title h3{color:var(--Gray-800, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transform:rotate(180deg);color:var(--Gray-500, #344054)}.setting-group-arrow.rotated{transform:rotate(0)}.setting-group-content{display:flex;flex-direction:column;width:100%;opacity:1;overflow:visible;max-width:100%;box-sizing:border-box}.setting-group-content.collapsed{opacity:0;margin:0;padding:0;pointer-events:none;display:none}.setting-group.main-group{padding:16px;border:none;border-bottom:1px solid var(--Border-default, #d5dce5);box-shadow:none;margin-top:4px;border-radius:8px;width:100%;position:relative;margin-bottom:8px;max-height:none;overflow:visible;max-width:100%;box-sizing:border-box;height:auto;min-height:auto;flex-shrink:0}.setting-group.main-group.collapsed{padding:0;background:transparent!important;border:none;box-shadow:none;margin:0}.setting-group.main-group.collapsed .setting-group-title.collapsed-view{height:55px;border:none;margin-bottom:8px;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group.main-group .setting-group-title h3{color:#2a3036;font-family:Satoshi;font-weight:500;line-height:20px}.setting-group-content.main-content{width:100%;border:0;box-shadow:none;padding:0;height:auto;min-height:auto;overflow:visible;flex-shrink:0}.setting-divider{height:1px;width:100%;background-color:#f2f4f7;margin:4px 0}.setting-group-content>*:last-child{margin-bottom:0}.setting-group.active{border-color:#d6bbfb;box-shadow:0 0 0 4px #7f56d91a}.setting-group-empty{color:#667085;font-style:italic;padding:12px 0;text-align:center}.setting-group-title.collapsed-view{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;height:36px;border-radius:8px;background:var(--Base-White, #fff);margin-bottom:0;position:relative;overflow:visible;cursor:pointer}.setting-group.main-group .setting-group-title.collapsed-view{height:55px;border:none;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group:not(.main-group) .setting-group-title.collapsed-view{height:36px;background:#fff;padding:14px}.setting-group-title .title-section{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.setting-group-title .group-icon{display:flex;justify-content:center;align-items:center;color:var(--Gray-500, #667085);flex-shrink:0;width:20px;height:20px}.setting-group-title.collapsed-view h3{color:#344054;font-family:Satoshi;line-height:20px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-group-title.collapsed-view .group-badge{display:flex;padding:2px 8px;justify-content:center;align-items:center;border-radius:16px;background:var(--Gray-100, #f2f4f7);color:var(--Gray-700, #344054);font-weight:500;line-height:18px;margin-left:8px}.setting-group-title .actions-section{display:flex;align-items:center;gap:8px;margin-left:12px}.setting-group-title.collapsed-view .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;color:var(--Gray-500, #667085)}.setting-group-title .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;color:var(--Gray-500, #667085)}.setting-group-title .setting-group-arrow.rotated{transform:rotate(0)}.setting-group-title.collapsed-view .info-marker{width:16px;height:16px;color:var(--Gray-400, #98a2b3);cursor:help}.setting-group-description{color:#667085;margin-bottom:8px;line-height:1.4}@media (max-width: 768px){.setting-group-title.collapsed-view{padding:10px 12px}.setting-group-title .title-section{gap:8px}.setting-group-title.collapsed-view .group-badge{display:none}}.setting-group-title.collapsed-view.striped:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--Primary-100, #f4ebff);border-radius:4px 0 0 4px}.setting-group.custom-container{border:none;box-shadow:none;margin:4px 0;padding:0;background:transparent}.setting-group.custom-container>.setting-group-title{display:none}.sg-add-button-bottom{display:flex;height:30px;min-width:64px;padding:6px 12px;justify-content:center;align-items:center;flex:1 0 0;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;line-height:20px;letter-spacing:.01em;text-align:center}.sg-add-button-bottom:hover{background:#eee}.setting-group.custom-container .setting-group-content{padding:0}.custom_class{border:0!important;box-shadow:none!important;margin:4px 0!important}.custom_class>.setting-group-title{display:none!important}.custom_class .setting-group-content{padding:0!important}.setting-group-title:focus-visible{outline:2px solid #02cc59;outline-offset:2px}.setting-group::-webkit-scrollbar,.setting-group-content::-webkit-scrollbar{width:8px;height:8px}.setting-group::-webkit-scrollbar-track,.setting-group-content::-webkit-scrollbar-track{background:#f0f2f4;border-radius:4px}.setting-group::-webkit-scrollbar-thumb,.setting-group-content::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:4px;border:2px solid transparent;background-clip:content-box}.setting-group::-webkit-scrollbar-thumb:hover,.setting-group-content::-webkit-scrollbar-thumb:hover{background-color:#98a2b3}.setting-group,.setting-group-content{scrollbar-width:thin;scrollbar-color:#c2c9d6 #f0f2f4}.tabs-settings-container{display:flex;flex-direction:column;width:100%;border-radius:8px;background:transparent;overflow:visible;position:relative;z-index:1;max-width:100%;box-sizing:border-box}.tabs-settings-container.main-group{background:#fff;box-shadow:0 1px 2px #1018280d}.tabs-header{width:100%;display:flex;padding:4px;justify-content:center;align-items:center;gap:4px;align-self:stretch;flex-shrink:0;background:#f1f3f2;position:relative;z-index:1;border-radius:400px;margin-bottom:8px}.tabs-header.main-header{background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:8px 8px 0 0;padding:8px;margin-bottom:0}.tab-button{display:flex;padding:4px 12px;justify-content:center;align-items:center;background-color:transparent;gap:8px;flex:1 0 0;border-radius:400px;color:#000000b3;font-family:Satoshi,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:12px;font-style:normal;font-weight:500;line-height:20px;box-shadow:0 0 #10182800;position:relative;z-index:1;cursor:pointer;transition:all .2s ease;outline:none}.tab-button:active{box-shadow:0 1px 2px -1px #10182805}.tab-button.active{color:#000;font-weight:700;border-radius:400px;background:#fff;box-shadow:0 4px 8px -2px #1018280a}.tab-button.active:active{box-shadow:0 2px 4px -1px #1018280a}.tab-button:focus-visible{outline:2px solid #7c3aed;outline-offset:2px}.tab-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.tab-icon svg{width:100%;height:100%}.tab-content{position:relative;overflow:visible;width:100%;z-index:1;margin-top:8px;max-width:100%;box-sizing:border-box;animation:fadeIn .2s ease-in-out}.tab-panel{display:grid;gap:8px;position:absolute;width:100%;opacity:0;pointer-events:none;overflow:visible;z-index:1;max-width:100%;box-sizing:border-box}.tab-panel.active{opacity:1;pointer-events:auto;position:relative;overflow:visible;z-index:1;max-width:100%;box-sizing:border-box}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.tabs-header{padding:3px}.tab-button{padding:3px 8px}}.tab-content>.setting-group{margin-bottom:12px}.tab-content>.setting-group:last-child{margin-bottom:0}.tabs-settings-container.main-group .setting-group-content{border-top:none;border-radius:0 0 8px 8px}.setting-group.main-group.collapsed .tabs-header,.setting-group.main-group.collapsed .setting-group,.setting-group .setting-group.collapsed .tabs-header,.tabs-settings-container.collapsed .tabs-header,.tabs-settings-container.collapsed .tab-content{display:none}.tabs-settings-container{padding:0!important;border-radius:8px;background:transparent}.tabs-settings-container>.setting-group-content{padding:0!important;gap:8px}:root{--color-border: #d5dce5;--color-bg: #f8f8f8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc;--color-btn-text: #4b4b4b;--color-bg-icon: #f2f4f7}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Satoshi,sans-serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import"https://fonts.cdnfonts.com/css/satoshi";:root{--color-text: #1d2939;--color-text-secondary: #667085;--color-text-muted: #98a2b3;--color-border: #e4e7ec;--color-border-hover: #d0d5dd;--color-bg: #fff;--color-bg-hover: #f9fafb;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--font-size-xs: 10px;--font-size-sm: 12px;--font-size-md: 14px;--font-size-lg: 16px;--transition-fast: .15s ease;--transition-normal: .3s ease}.icon-container{display:flex;align-items:center;gap:var(--space-xs)}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);flex-shrink:0;width:18px;height:18px;transition:color var(--transition-fast)}.input-label{color:#637381;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:500;line-height:1.4;transition:color var(--transition-fast)}.input-container{display:inline-flex;align-items:center;position:relative;width:100%}.input-wrapper{position:relative;width:100%;min-width:0}.base-input{width:100%;height:36px;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg);color:var(--color-text);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md);font-weight:400;line-height:1.4;transition:all var(--transition-fast);outline:none}.base-input::placeholder{color:var(--color-text-muted)}.base-input:hover{border-color:var(--color-border-hover);background:var(--color-bg-hover)}.base-input:focus{border-color:var(--color-border-focus);background:var(--color-bg-focus)}.base-input:disabled{background:#f9fafb;color:var(--color-text-muted);cursor:not-allowed;opacity:.7}.with-suffix{padding-right:44px}.input-suffix{position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;font-size:var(--font-size-sm);font-weight:500;z-index:1}.with-prefix{padding-left:44px}.input-prefix{position:absolute;left:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;font-size:var(--font-size-sm);font-weight:500;z-index:1}.setting-item{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);align-items:center;min-height:40px;padding:var(--space-sm) 0}.setting-item.full-width{grid-template-columns:1fr}.setting-item.stacked{grid-template-columns:1fr;gap:var(--space-xs);align-items:stretch}.setting-item-label{display:flex;align-items:center;gap:var(--space-xs);min-width:0}.setting-item-control{min-width:0;justify-self:end}.setting-item.stacked .setting-item-control{max-width:none;justify-self:stretch}.input-error{border-color:#f04438!important;background:#fff4f4!important;color:#f04438!important}.input-error:focus{border-color:#f04438!important;box-shadow:0 0 0 4px #f044381a!important}.error-message{color:#f04438;font-size:var(--font-size-xs);margin-top:var(--space-xs);display:flex;align-items:center;gap:var(--space-xs)}.input-success{border-color:#02cc59!important;background:#f0fdf4!important}.input-success:focus{border-color:#02cc59!important}.input-loading{position:relative;color:var(--color-text-muted);background:#f9fafb;pointer-events:none}.input-loading:after{content:"";position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid var(--color-border-focus);border-radius:50%;animation:spin 1s linear infinite}.setting-group .setting-group .setting-item{min-height:36px;padding:6px 0}.setting-group .setting-group .base-input{height:32px;padding:6px 10px;font-size:13px}.setting-group .setting-group .input-label{color:#637381!important;font-family:Public Sans!important;font-size:13px;font-style:normal!important;font-weight:500!important;line-height:150%!important}.setting-group .setting-group .setting-group .setting-item{min-height:32px;padding:4px 0}.setting-group .setting-group .setting-group .base-input{height:28px;padding:4px 8px;font-size:12px}.setting-group .setting-group .setting-group .input-label{font-size:12px}@media (max-width: 480px){.setting-item{grid-template-columns:1fr;gap:var(--space-xs)}.setting-item-control{max-width:none;justify-self:stretch}.base-input{font-size:var(--font-size-md)}}@media (prefers-color-scheme: dark){:root{--color-text: #f9fafb;--color-text-secondary: #d0d5dd;--color-text-muted: #667085;--color-border: #344054;--color-border-hover: #475467;--color-bg: #1d2939;--color-bg-hover: #344054}}.base-input:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.compact .setting-item{min-height:32px;padding:4px 0}.compact .base-input{height:32px;padding:6px 10px;font-size:13px}.compact .input-label{font-size:11px}@media (prefers-contrast: high){.base-input{border-width:2px}.base-input:focus{border-width:3px}}.ms-wrapper{display:grid;grid-template-columns:100px 1fr auto;column-gap:12px;align-items:start}.ms-label{color:var(--Gray-700, #344054);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:400;line-height:36px;white-space:nowrap;flex-shrink:0;align-self:start}.ms-content-container{display:flex;flex-direction:column;flex:1;min-width:0;align-self:start}.ms-collapsed-content,.ms-expanded-content{width:100%;display:grid;grid-template-rows:1fr;overflow:hidden;opacity:1;transform:translateY(0);transition:grid-template-rows .15s ease-in-out,opacity .15s ease-in-out,transform .15s ease-in-out}.ms-section-inner{overflow:hidden}.ms-collapsed-content.hidden,.ms-expanded-content.hidden{grid-template-rows:0fr;opacity:0;transform:translateY(-4px);pointer-events:none}.ms-input-with-icon{display:flex;align-items:center;height:36px;padding:0 4px;border:1px solid #cfd4d8;border-radius:4px;box-sizing:border-box;transition:height .15s ease-in-out}.ms-input-with-icon:hover{border-color:var(--Gray-300, #d0d5dd)}.ms-input-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;margin-right:4px}.ms-input-icon svg{width:18px;height:18px}.ms-input{flex:1;min-width:0;width:100%;border:none;outline:none;background:transparent;color:var(--Gray-900, #101828);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:400;line-height:20px;padding:0}.ms-input::placeholder{color:var(--Gray-400, #98a2b3)}.ms-grid{display:flex;flex-direction:column;gap:8px;margin-left:auto}.ms-row{display:flex;gap:8px;min-width:0}.ms-expanded-content .ms-input-with-icon{width:100%;max-width:100px;flex:1 1 0;min-width:0;height:28px}.ms-toggle-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:4px;border-radius:4px;cursor:pointer;color:var(--Gray-400, #98a2b3);flex-shrink:0;margin:3px 0 0;align-self:start}.ms-toggle-btn:hover{background:#e5e8ea}.ms-toggle-btn.active{margin-top:0;background:#e5e8ea}.ms-toggle-btn svg{width:20px;height:20px}@media (max-width: 480px){.ms-wrapper{flex-wrap:wrap}.ms-label{width:100%;line-height:20px;margin-bottom:4px}.ms-row{flex-wrap:wrap}.ms-expanded-content .ms-input-with-icon{width:100%;max-width:80px}}:root{--grey40: #9ca3af}.gradient-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.gradient-setting-wrapper .icon-container{display:flex;align-items:center;gap:4px}.gradient-setting-wrapper .input-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#667085;flex-shrink:0}.gradient-setting-wrapper .input-icon svg{width:18px;height:18px}.gradient-setting-wrapper .input-label{color:#1d2939;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:600;line-height:1.4}.gradient-controls{display:flex;align-items:center;gap:10px}.gradient-type,.gradient-angle{padding:6px 8px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;font:inherit}.gradient-angle-wrap{display:inline-flex;align-items:center;gap:6px}.gradient-preview{position:relative;height:34px;border-radius:8px;border:1px solid #e5e7eb;overflow:visible;background:linear-gradient(90deg,#a84b4b,#786666);max-width:250px;margin:42px auto 0;cursor:crosshair}.gradient-handles{position:absolute;top:-4px;left:0;right:0;height:calc(100% + 8px);pointer-events:none}.gstop-handle{position:absolute;border-radius:4px;background:#fff;border:1px solid white;transform:translate(-50%,-50%);cursor:grab;display:grid;place-items:center;pointer-events:auto;box-shadow:0 1px 3px #0000001a;z-index:10;transition:all .15s ease;user-select:none;-webkit-user-select:none;touch-action:none}.gstop-handle:active{cursor:grabbing}.gstop-handle:hover{transform:translate(-50%,-50%) scale(1.05);border-color:#9ca3af}.gstop-handle.selected{border:2px solid #2563eb;box-shadow:0 0 0 2px #2563eb33;transform:translate(-50%,-50%) scale(1.1);cursor:grabbing;transition:none!important}.gstop-chip{width:24px;height:24px;border-radius:2px;border:1px solid white;position:relative}.gstop-chip:after{content:"";position:absolute;bottom:-4px;left:50%;transform:translate(-50%);width:0;height:0;z-index:-1;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid #ffffff;border-top-color:inherit}.gradient-stops-header{padding:8px 4px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#1c252e;font-weight:500;font-size:14px;line-height:20px;min-height:36px;box-sizing:border-box;border-top:1px solid #eff1f2;margin-top:8px}.gradient-add-stop{width:36px;height:36px;padding:8px;border-radius:6px;border:none;background:transparent;color:#637381;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s ease}.gradient-add-stop svg{width:20px;height:20px}.gradient-add-stop:hover{background:#dbdfe2}.gradient-stops{display:flex;flex-direction:column;max-height:200px;overflow-y:auto;overflow-x:visible;padding-right:4px;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9}.gradient-stops::-webkit-scrollbar{width:6px}.gradient-stops::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.gradient-stops::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.gradient-stops::-webkit-scrollbar-thumb:hover{background:#94a3b8}.gstop-row{display:flex;align-items:center;gap:4px;padding:6px 4px;border-radius:8px;background:#00a76f14;min-height:44px}.gstop-position-group{display:flex;align-items:center;min-width:51px}.gstop-position-input{width:60px;height:38px;padding:0 10px;border:1px solid #919eab33;border-radius:8px;color:#1c252e;font-size:14px;font-weight:400;text-align:left;outline:none;transition:all .2s ease;background:#f9fafb;box-sizing:border-box}.gstop-position-input:hover{border-color:#cbd5e1;background-color:#f8fafc}.gstop-position-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.gstop-position-input:disabled{opacity:.4;cursor:not-allowed}.gstop-color-container{position:relative;flex:1;height:38px;display:flex;align-items:center;border:1px solid #e5e7eb;border-radius:8px;background:#fff;overflow:hidden;box-sizing:border-box}.gstop-color-preview{width:25px;height:25px;border-radius:4px;border:1px solid #e4e7ec;flex-shrink:0;margin-left:4px;cursor:pointer;transition:transform .15s ease,border-color .15s ease;position:relative;overflow:hidden}.gstop-color-preview:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#637381 25%,transparent 25%),linear-gradient(-45deg,#637381 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#637381 75%),linear-gradient(-45deg,transparent 75%,#637381 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:#fff;z-index:0;opacity:0;transition:opacity .15s ease}.gstop-color-preview.has-transparency:before{opacity:1}.gstop-color-preview-color{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:3px}.gstop-color-preview:hover{border-color:#3b82f6;transform:scale(1.05)}.gstop-color-input{flex:1;min-width:0;height:100%;padding:0 8px;border:none;color:#1c252e;font-size:14px;font-weight:400;text-align:left;outline:none;transition:all .2s ease;background:transparent}.gstop-color-separator{width:1px;height:20px;background:#e5e7eb;flex-shrink:0}.gstop-opacity-input{width:56px;height:100%;padding:0 10px;border:none;font-size:14px;font-weight:400;color:#1c252e;background:transparent;outline:none;text-align:right}.gstop-opacity-input:focus{background:#3b82f60d}.gstop-color-input:focus{background:#3b82f60d}.gstop-color-container:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.gstop-color-input:disabled{opacity:.4;cursor:not-allowed;background:var(--action-selected, #919eab29)!important;border-color:var(--action-selected, #919eab29)!important}.gstop-color-copy{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:none;background:transparent;cursor:pointer;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease;opacity:.7}.gstop-color-copy:hover{opacity:1;background:#919eab1a}.gstop-color-copy:active{transform:translateY(-50%) scale(.95)}.gstop-color{width:32px;height:32px;padding:0;border:2px solid #ffffff;border-radius:8px;cursor:pointer;outline:none;box-shadow:0 1px 2px #0000000d;position:relative;z-index:20;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}.gstop-hex{flex:1;min-width:100px;padding:10px 12px;border:2px solid #e2e8f0;border-radius:10px;background:#fff;color:#1f2937;font-size:13px;font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:500;outline:none;transition:all .2s ease}.gstop-hex:hover{border-color:#cbd5e1;background-color:#f8fafc}.gstop-hex:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.gstop-link{width:24px;height:24px;border:none;background:transparent;color:#667085;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px}.gstop-link:hover{background:#f3f4f6;color:#374151}.gstop-del{width:36px;min-width:36px;height:36px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:4px;gap:8px;opacity:1;flex-shrink:0}.gstop-del:hover{background:#f8fafc}.gstop-del:disabled{opacity:.4;cursor:not-allowed;background:var(--action-selected, #919eab29)}.gstop-opacity-label{font-size:12px;color:#64748b;font-weight:500;min-width:50px}.gstop-opacity-group{display:flex;align-items:center;gap:12px;flex:1}.gstop-opacity-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;max-width:135px;width:100%;height:20px;border-radius:12px;border:0;outline:none;cursor:pointer;position:relative;background-image:url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='3' height='3' fill='rgba(0,0,0,0.1)'/%3E%3Crect x='3' y='3' width='3' height='3' fill='rgba(0,0,0,0.1)'/%3E%3C/svg%3E"),linear-gradient(to right,var(--slider-color-transparent, rgba(59, 130, 246, 0)),var(--slider-color, #3b82f6));background-size:6px 6px,100% 100%;background-position:0 0,0 0;background-repeat:repeat,no-repeat;box-shadow:inset 0 0 0 1px #ffffffe6,inset 0 0 0 2px #00000014,0 1px 3px #0000001a}.gstop-opacity-slider::-webkit-slider-track{height:20px;border:none;border-radius:12px;background:transparent}.gstop-opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.2);box-shadow:0 0 0 1px #ffffffe6,0 2px 6px #00000026,0 1px 2px #0003;cursor:pointer;transition:all .15s ease;margin-top:0}.gstop-opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 0 0 1px #ffffffe6,0 3px 8px #0003,0 1px 3px #00000040}.gstop-opacity-slider::-moz-range-track{height:20px;border:none;border-radius:12px;background:transparent}.gstop-opacity-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.2);box-shadow:0 0 0 1px #ffffffe6,0 2px 6px #00000026,0 1px 2px #0003;cursor:pointer;transition:all .15s ease}.gstop-opacity-slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 0 0 1px #ffffffe6,0 3px 8px #0003,0 1px 3px #00000040}.gstop-opacity-slider:focus-visible{outline:3px solid rgba(59,130,246,.45);outline-offset:4px;border-radius:12px}.gstop-opacity-value{font-size:12px;color:#475569;font-weight:600;min-width:38px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:4px;padding:4px 6px}.gradient-solid-picker{display:flex;align-items:center;gap:12px;padding:8px;background:#f9fafb;border-radius:8px}.gradient-solid-color{width:257px;height:34px;padding:0;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;outline:none}.gradient-solid-hex{width:120px;padding:12px 16px;border:2px solid #e2e8f0;border-radius:12px;background:#fff;color:#1f2937;font-size:14px;font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:500;outline:none;transition:all .2s ease}.gradient-solid-hex:hover{border-color:#cbd5e1;background-color:#f8fafc}.gradient-solid-hex:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.gradient-input-wrapper{position:relative;width:100%;justify-self:end}.gradient-text-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-left:38px;padding-right:30px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.gradient-text-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.gradient-text-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.gradient-text-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.gradient-mini-preview{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:4px;border:1px solid var(--color-border, #e4e7ec);cursor:pointer;overflow:hidden;transition:transform var(--transition-fast, .15s ease),border-radius var(--transition-fast, .15s ease);background-color:#fff}.gradient-mini-preview.bound{border-radius:50%}.gradient-mini-preview:hover{transform:translateY(-50%) scale(1.05)}.gradient-unlink-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:none;background:transparent;cursor:pointer;display:none;align-items:center;justify-content:center;padding:4px;border-radius:2px;transition:background-color .15s ease}.gradient-unlink-button.visible{display:flex}.gradient-unlink-button:hover{background-color:#dbdfe2}.gradient-unlink-button:active{transform:translateY(-50%) scale(.95)}.gradient-unlink-button:focus{outline:2px solid #3b82f6;outline-offset:2px}.setting-group .setting-group .gradient-unlink-button{right:6px;width:24px;height:24px;padding:3px}.setting-group .setting-group .setting-group .gradient-unlink-button{right:4px;width:22px;height:22px;padding:2px}.setting-group .gradient-setting-wrapper{min-height:36px}.setting-group .gradient-input-wrapper{max-width:120px}.setting-group .gradient-text-input{height:32px;padding:6px 26px 6px 34px;font-size:13px}.setting-group .gradient-mini-preview{left:6px;width:22px;height:22px}.setting-group .setting-group .gradient-setting-wrapper{min-height:36px}.setting-group .setting-group .gradient-input-wrapper{max-width:120px}.setting-group .setting-group .gradient-text-input{height:32px;padding:6px 26px 6px 34px;font-size:13px}.setting-group .setting-group .gradient-mini-preview{left:6px;width:22px;height:22px}.setting-group .setting-group .setting-group .gradient-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .gradient-input-wrapper{max-width:100px}.setting-group .setting-group .setting-group .gradient-text-input{height:28px;padding:4px 22px 4px 30px;font-size:12px}.setting-group .setting-group .setting-group .gradient-mini-preview{left:4px;width:19px;height:19px}.gradient-input-wrapper.error .gradient-text-input{border-color:#f04438;background:#fff4f4;color:#f04438}.gradient-input-wrapper.error .gradient-text-input:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.gradient-input-wrapper.disabled .gradient-text-input{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.gradient-popover-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000;z-index:9999}.gradient-popover{position:fixed;z-index:10000;background:var(--primary-contrast-text, #ffffff);border-radius:8px;box-shadow:0 1px 8px #0003;overflow:visible;width:306px;height:auto;min-height:200px;max-height:80vh;opacity:1;padding:12px;display:flex;flex-direction:column;gap:16px}.gradient-popover-header{display:flex;align-items:center;justify-content:space-between;color:#1d2939;font-weight:600;font-size:16px}.color-setting-tabs{display:flex;gap:2px;padding:2px;background:transparent}.color-setting-tabs.header-tabs{padding:0;gap:0}.color-tab{display:flex;align-items:center;justify-content:center;min-width:64px;height:30px;padding:2px 4px;border:none;background:transparent;color:#637381;font-family:Public Sans,sans-serif;font-size:14px;font-weight:600;line-height:1.5;border-radius:4px;cursor:pointer;transition:all .15s ease}.color-tab:hover:not(.active){background:#f3f4f6}.gradient-popover-close{width:24px;height:24px;border-radius:4px;border:none;background:transparent;color:#667085;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}.gradient-popover-close:hover{background:#f9fafb;color:#374151}.gradient-editor{display:flex;flex-direction:column;gap:6px;flex:1;overflow:hidden;min-height:0}.type-tabs-wrapper{border:1px solid #eff1f2;border-left:0;border-right:0;padding:4px 0}.gradient-type-tabs{display:flex;padding:4px;align-items:center;gap:16px;align-self:stretch}.gradient-type-tab{display:flex;width:26px;height:26px;padding:4px;justify-content:center;align-items:center;border-radius:2px}.gradient-type-tab.active{background:#dbdfe2!important;box-shadow:0 1px 2px #0000000d}.gradient-type-tab:hover:not(.active){background:#dbdfe2}.gradient-subtype-tabs{display:flex;background:#f0f2f5;border-radius:6px;padding:2px;gap:2px;margin-bottom:12px}.gradient-subtype-inline{display:flex;align-items:center;gap:4px;margin-bottom:8px}.global-controls-row{display:flex;align-items:center;gap:8px;height:34px;margin-bottom:12px;padding:4px;border-top:1px solid #eff1f2;border-bottom:1px solid #eff1f2;box-sizing:border-box}.global-search-container{position:relative;flex:1;display:flex;align-items:center;gap:8px;height:18px}.global-search-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#96a1ab;flex-shrink:0}.global-search-icon svg{width:18px;height:18px}.global-search-separator{width:1px;height:11.5px;background:#96a1ab;flex-shrink:0}.global-search-input{flex:1;height:17px;padding:0;border:none;font-family:Public Sans,sans-serif;font-size:11px;font-weight:400;line-height:1.5;color:#1c252e;outline:none;background:transparent;box-sizing:border-box}.global-search-input::placeholder{color:#96a1ab}.global-search-input:focus{outline:none}.global-layout-toggle{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:4px;border:none;border-radius:2px;background:transparent;color:#46525c;cursor:pointer;transition:all .2s;box-sizing:border-box}.global-layout-toggle:hover{background:#eff1f2}.global-colors-grid{display:grid;grid-template-columns:repeat(auto-fill,24px);gap:6px;padding:0;margin-top:8px;width:100%;justify-content:start}.global-colors-list{display:flex;flex-direction:column;gap:4px}.global-color-row{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:6px;cursor:pointer;transition:background-color .2s}.global-color-row:hover{background-color:#f3f4f6}.global-color-circle{width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.1);position:relative;flex-shrink:0}.global-colors-grid .global-color-circle{width:24px;height:24px;margin:0 auto;cursor:pointer;transition:transform .2s}.global-colors-grid .global-color-circle:hover{transform:scale(1.1);box-shadow:0 2px 4px #0000001a}.global-color-circle.selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #2196f3}.global-colors-grid .global-color-circle.selected:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.3)}.global-color-label{font-size:13px;color:#374151;font-weight:500}.gradient-subtype-select{border:1px solid #b1b6bf;padding:6.5px 40px 6.5px 16px;border-radius:8px;background:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;color:#1f2937;font-size:14px;font-weight:500;outline:none;cursor:pointer;transition:all .2s ease;appearance:none;-webkit-appearance:none;-moz-appearance:none;min-height:38px;box-sizing:border-box;line-height:1.4;width:100%}.gradient-subtype-select:hover{border-color:#cbd5e1;background-color:#f8fafc}.gradient-subtype-select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.gradient-subtype-select option{padding:12px 16px;background-color:#fff;color:#1f2937;font-size:14px;font-weight:500;border:none;outline:none;min-height:44px;line-height:1.4}.gradient-subtype-select option:hover{background-color:#f8fafc!important;color:#1f2937!important}.gradient-subtype-select option:checked,.gradient-subtype-select option:selected{background-color:#3b82f6!important;color:#fff!important;font-weight:600}.gradient-subtype-select option:disabled{background-color:#f1f5f9!important;color:#94a3b8!important;cursor:not-allowed}.gradient-subtype-tab{flex:1;padding:6px 12px;border:none;background:transparent;color:#667085;cursor:pointer;border-radius:4px;font-size:12px;font-weight:500;transition:all .15s ease}.gradient-subtype-tab.active{background:#fff;color:#1d2939;box-shadow:0 1px 2px #0000000d}.gradient-subtype-tab:hover:not(.active){background:#e5e7eb;color:#374151}.gradient-angle-controls{display:flex;align-items:center;gap:12px}.gradient-angle-input{flex:1;display:flex;align-items:center;gap:8px}.gradient-angle-input select{flex:1;padding:12px 40px 12px 16px;border:2px solid #e2e8f0;border-radius:12px;background:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;color:#1f2937;font-size:14px;font-weight:500;outline:none;cursor:pointer;transition:all .2s ease;appearance:none;-webkit-appearance:none;-moz-appearance:none}.gradient-angle-input select:hover{border-color:#cbd5e1;background-color:#f8fafc}.gradient-angle-input select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.gradient-angle-input select option{padding:12px 16px;background-color:#fff;color:#1f2937;font-size:14px;font-weight:500;border:none;outline:none}.gradient-angle-input select option:hover{background-color:#f8fafc;color:#1f2937}.gradient-angle-input select option:checked,.gradient-angle-input select option:selected{background-color:#3b82f6;color:#fff}.gradient-angle-input select option:disabled{background-color:#f1f5f9;color:#94a3b8}.gradient-degree-input{border:1px solid #919eab33;padding:6.5px 16px;border-radius:8px;max-width:75px;background:#fff;color:#1f2937;font-size:14px;font-weight:500;width:80px;text-align:center;outline:none;transition:all .2s ease;min-height:38px}.gradient-degree-input:hover{border-color:#cbd5e1;background-color:#f8fafc}.gradient-degree-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.gradient-degree-input:disabled{opacity:.4;cursor:not-allowed;background:var(--action-selected, #919eab29)!important;border-color:var(--action-selected, #919eab29)!important}.gradient-flip-btn{max-width:36px;height:38px;width:100%;border-radius:6px;background:#919eab29;color:#6b7280;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;transition:all .2s ease}.gradient-flip-btn:hover{background:#e3e2e4;color:#374151}.gradient-flip-btn:active{transform:scale(.95)}.custom-color-picker{position:fixed;width:306px;background:#fff;border-radius:16px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:1px solid #e5e7eb;z-index:10001;overflow:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:box-shadow .2s ease}.color-picker-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000;z-index:10000}.custom-color-picker.dragging{box-shadow:0 25px 30px -5px #00000026,0 15px 15px -5px #00000014;cursor:move}.color-picker-header{display:flex;justify-content:space-between;align-items:center;padding:10.5px 20px;background:#fff;cursor:move}.color-picker-header span{font-size:16px;font-weight:600;color:#111827}.color-picker-close{width:28px;height:28px;border:none;background:transparent;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#6b7280;transition:all .15s ease}.color-picker-close:hover{background:#f3f4f6;color:#374151}.color-picker-area{height:268px;margin:8px;border-radius:12px;position:relative;cursor:crosshair;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,red);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.color-picker-area.embedded{width:100%;height:200px;margin:0 0 16px;position:relative;border-radius:8px;overflow:hidden}.color-picker-marker{position:absolute;border-radius:50%;width:20px;height:20px;border:3px solid #ffffff;box-shadow:0 0 0 1px #0003,0 2px 4px #00000026;transform:translate(-50%,-50%);top:50%;pointer-events:none;background:transparent;display:flex;align-items:center;justify-content:center;z-index:10}.embedded-color-picker-content .color-picker-marker,.embedded-color-picker-content .color-picker-hue-marker,.embedded-color-picker-content .color-picker-opacity-marker{width:16px;height:16px;border:2px solid #ffffff}.color-picker-marker:before{content:"";width:12px;height:12px;background:transparent;border-radius:50%}.color-picker-hue{width:100%;height:12px;margin:0;border-radius:8px;position:relative;cursor:pointer;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);touch-action:none;-webkit-user-select:none;user-select:none}.color-picker-hue.embedded{width:100%;margin:0;height:14px}.color-picker-sliders-container{display:flex;align-items:flex-start;gap:8px;width:100%;margin:0 auto 20px;max-width:368px;padding:0 20px}.custom-color-picker .color-picker-sliders-container{max-width:368px;padding:4px 8px}.color-picker-sliders-container.embedded{max-width:260px;margin:0 auto 16px;padding:0}.color-picker-sliders-group{display:flex;flex-direction:column;gap:12px;flex:1}.color-picker-eyedropper{background:none;border:none;padding:8px;border-radius:6px;cursor:pointer;transition:background-color .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:auto}.color-picker-eyedropper:hover{background-color:#0000000d}.color-picker-eyedropper:active{transform:scale(.95)}.color-picker-eyedropper svg{width:18px;height:18px}.color-picker-hue-marker{position:absolute;border-radius:50%;border:3px solid #ffffff;box-shadow:0 0 0 1px #0003,0 2px 4px #00000026;transform:translate(-50%,-50%);top:50%;pointer-events:none;background:#fff;display:flex;align-items:center;justify-content:center}.color-picker-hue-marker:before{content:"";width:8px;height:8px;background:transparent;border-radius:50%}.color-picker-opacity{width:100%;height:12px;margin:0;border-radius:12px;position:relative;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;background-image:url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='3' height='3' fill='rgba(0,0,0,0.1)'/%3E%3Crect x='3' y='3' width='3' height='3' fill='rgba(0,0,0,0.1)'/%3E%3C/svg%3E"),linear-gradient(to right,var(--base-color-transparent, rgba(255, 0, 0, 0)),var(--base-color, #ff0000));background-size:6px 6px,100% 100%;background-position:0 0,0 0;background-repeat:repeat,no-repeat}.color-picker-opacity.embedded{width:100%;margin:0;height:14px}.color-picker-opacity-marker{position:absolute;border:3px solid #ffffff;border-radius:50%;box-shadow:0 0 0 1px #0003,0 2px 4px #00000026;transform:translate(-50%,-50%);top:50%;pointer-events:none;background:#fff;display:flex;align-items:center;justify-content:center}.color-picker-opacity-marker:before{content:"";width:8px;height:8px;background:transparent;border-radius:50%}.color-picker-format-section{display:flex;align-items:center;padding:0 20px 20px;gap:4px}.color-picker-format-section.embedded{padding:0 4px}.color-picker-format-select{height:38px;padding:0 8px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;font-weight:400;color:#1c252e;background:#fff;outline:none;transition:all .15s ease;min-width:70px;cursor:pointer;box-sizing:border-box}.color-picker-format-select:focus{border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6}.color-picker-format-select:hover{border-color:#cbd5e1}.color-picker-input-container{position:relative;flex:1;height:38px;display:flex;align-items:center;border:1px solid #e5e7eb;border-radius:8px;background:#fff;overflow:hidden;box-sizing:border-box}.color-picker-swatch{width:25px;height:25px;border-radius:4px;border:1px solid #e4e7ec;flex-shrink:0;margin-left:4px;position:relative;overflow:hidden}.color-picker-swatch:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#637381 25%,transparent 25%),linear-gradient(-45deg,#637381 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#637381 75%),linear-gradient(-45deg,transparent 75%,#637381 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:#fff;z-index:0;opacity:0;transition:opacity .15s ease}.color-picker-swatch.has-transparency:before{opacity:1}.color-picker-swatch-color{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:3px}.color-picker-color-input{flex:1;min-width:0;height:100%;padding:0 8px;border:none;font-size:14px;font-weight:400;color:#1c252e;background:transparent;outline:none;transition:all .15s ease}.color-picker-color-input:focus{background:#3b82f60d}.color-picker-input-container:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.color-picker-input-separator{width:1px;height:100%;background:#e5e7eb;flex-shrink:0}.color-picker-opacity-value-input{width:56px;height:100%;padding:0 10px;border:none;font-size:14px;font-weight:400;color:#1c252e;background:transparent;outline:none;text-align:right}.color-picker-opacity-value-input:focus{background:#3b82f60d}.color-picker-copy-inside{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:45px;height:26px;border-radius:6px;border:none;gap:8px;padding:4px 8px;background:var(--action-selected, #919eab29);color:var(--text-secondary, #637381);font-size:11px;font-weight:500;cursor:pointer;transition:all .15s ease;outline:none;opacity:1}.color-picker-copy-inside:hover{background:#919eab66}.color-picker-copy-inside:active{transform:translateY(-50%) scale(.95)}.color-picker-copy{padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease;outline:none}.color-picker-copy:hover{background:#f9fafb;border-color:#d1d5db;color:#111827}.color-picker-copy:active{transform:scale(.98)}.custom-color-button{width:44px;height:44px;border:2px solid #e2e8f0;border-radius:12px;cursor:pointer;position:relative;overflow:hidden;transition:all .15s ease;background:#fff}.custom-color-button:hover{border-color:#cbd5e1;transform:scale(1.02)}.custom-color-button:active{transform:scale(.98)}.custom-color-button-color{position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:8px;background:var(--color, #000000)}.embedded-color-picker{padding:0}.embedded-color-picker-content{width:100%;font-family:system-ui,-apple-system,sans-serif}.color-picker-recent-section{padding:16px 0;border-top:1px solid #f3f4f6}.custom-color-picker .color-picker-recent-section{padding:16px 8px}.color-picker-recent-section.embedded{padding:12px 0}.color-picker-recent-title{font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:400;font-style:normal;font-size:.75rem;line-height:1.66;letter-spacing:.03333em;color:#637381;margin-bottom:8px}.color-picker-recent-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-bottom:8px}.color-picker-recent-swatch{width:24px;height:24px;border-radius:6px;border:1px solid rgba(0,0,0,.1);cursor:pointer;transition:all .15s ease;position:relative;overflow:hidden;background-color:#fff;background-size:cover;background-position:center}.color-picker-recent-swatch:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#637381 25%,transparent 25%),linear-gradient(-45deg,#637381 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#637381 75%),linear-gradient(-45deg,transparent 75%,#637381 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:#fff;z-index:0;opacity:0;transition:opacity .15s ease}.color-picker-recent-swatch.has-transparency:before{opacity:1}.color-picker-recent-swatch-color{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:5px}.color-picker-recent-swatch:hover{border-color:#0003;box-shadow:0 2px 8px #00000026;z-index:1}.color-picker-recent-swatch:active{transform:scale(.95)}.color-picker-recent-placeholder{font-size:11px;color:#9ca3af;text-align:center;font-style:italic;padding:8px 0;display:none}.color-picker-tooltip{position:fixed;background:#000000e6;color:#fff;padding:6px 10px;border-radius:6px;font-size:11px;font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:500;white-space:nowrap;z-index:10000;pointer-events:none;transform:translate(-50%);margin-top:4px;box-shadow:0 2px 8px #00000026}.color-picker-tooltip:before{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-bottom-color:#000000e6}.string-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.string-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.string-setting-wrapper .string-setting-wrapper{display:block;width:100%}.color-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.color-input-wrapper{position:relative;width:100%;justify-self:end}.color-text-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-left:36px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.color-text-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-text-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-text-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.color-text-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-picker{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:0;cursor:pointer;z-index:2}.color-preview{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--radius-sm, 4px);border:1px solid var(--color-border, #e4e7ec);flex-shrink:0;transition:transform var(--transition-fast, .15s ease);pointer-events:none;background-color:#fff}.color-preview:hover{transform:translateY(-50%) scale(1.05)}.setting-group .setting-group .color-setting-wrapper{min-height:36px}.setting-group .setting-group .color-input-wrapper{max-width:120px}.setting-group .setting-group .color-text-input{height:32px;padding:6px 10px 6px 32px;font-size:13px}.setting-group .setting-group .color-preview,.setting-group .setting-group .color-picker{left:6px;width:18px;height:18px}.setting-group .setting-group .setting-group .color-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .color-input-wrapper{max-width:100px}.setting-group .setting-group .setting-group .color-text-input{height:28px;padding:4px 8px 4px 28px;font-size:12px}.setting-group .setting-group .setting-group .color-preview,.setting-group .setting-group .setting-group .color-picker{left:4px;width:16px;height:16px}.color-input-wrapper.error .color-text-input{border-color:#f04438;background:#fff4f4;color:#f04438}.color-input-wrapper.error .color-text-input:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.color-input-wrapper.disabled .color-text-input{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-picker:focus-visible+.color-preview{outline-offset:2px}.color-setting-tabs{display:flex;gap:0;padding:0;background:transparent}.color-tab{flex:1;border:none;background:transparent;padding:2px 4px;font-size:14px;font-weight:600;color:#637381;cursor:pointer;border-radius:4px;transition:all .15s ease;min-width:64px;height:30px;display:flex;align-items:center;justify-content:center}.color-tab:hover:not(.active){background:#eff1f280}.color-tab.active{background:#eff1f2;color:#1c252e}.color-content-global{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:4px}.global-color-btn{width:24px;height:24px;border-radius:50%;border:1px solid #eaecf0;cursor:pointer;transition:transform .1s;padding:0}.global-color-btn:hover{transform:scale(1.1);border-color:#d0d5dd}.global-color-btn.active{border:2px solid #2196f3;box-shadow:0 0 0 2px #2196f333}.color-with-opacity-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.color-with-opacity-controls-wrapper{display:grid;grid-template-columns:1fr;gap:var(--space-sm, 8px);justify-self:end;width:100%}.color-with-opacity-input-wrapper,.color-with-opacity-opacity-wrapper{position:relative;width:100%}.color-with-opacity-text-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-left:36px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.color-with-opacity-text-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-with-opacity-text-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-with-opacity-text-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-with-opacity-picker{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:0;cursor:pointer;z-index:2}.color-with-opacity-preview{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--radius-sm, 4px);border:1px solid var(--color-border, #e4e7ec);flex-shrink:0;transition:transform var(--transition-fast, .15s ease);pointer-events:none;background-color:#fff;cursor:pointer;overflow:hidden}.color-with-opacity-preview:hover{transform:translateY(-50%) scale(1.05)}.color-with-opacity-preview:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;z-index:-1}.color-with-opacity-opacity-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:20px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.color-with-opacity-opacity-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-with-opacity-opacity-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-with-opacity-opacity-suffix{position:absolute;right:var(--space-sm, 8px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.color-with-opacity-opacity-input::-webkit-inner-spin-button,.color-with-opacity-opacity-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.color-with-opacity-opacity-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .color-with-opacity-setting-wrapper{min-height:36px}.setting-group .setting-group .color-with-opacity-controls-wrapper{max-width:120px}.setting-group .setting-group .color-with-opacity-input-wrapper,.setting-group .setting-group .color-with-opacity-opacity-wrapper{width:100%}.setting-group .setting-group .color-with-opacity-text-input,.setting-group .setting-group .color-with-opacity-opacity-input{height:32px;padding:6px 10px;font-size:13px}.setting-group .setting-group .color-with-opacity-text-input{padding-left:32px}.setting-group .setting-group .color-with-opacity-preview,.setting-group .setting-group .color-with-opacity-picker{left:6px;width:18px;height:18px}.setting-group .setting-group .color-with-opacity-opacity-input{padding-right:20px}.setting-group .setting-group .color-with-opacity-opacity-suffix{right:8px;font-size:11px}.setting-group .setting-group .setting-group .color-with-opacity-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .color-with-opacity-controls-wrapper{max-width:100px}.setting-group .setting-group .setting-group .color-with-opacity-input-wrapper,.setting-group .setting-group .setting-group .color-with-opacity-opacity-wrapper{width:100%}.setting-group .setting-group .setting-group .color-with-opacity-text-input,.setting-group .setting-group .setting-group .color-with-opacity-opacity-input{height:28px;padding:4px 8px;font-size:12px}.setting-group .setting-group .setting-group .color-with-opacity-text-input{padding-left:28px}.setting-group .setting-group .setting-group .color-with-opacity-preview,.setting-group .setting-group .setting-group .color-with-opacity-picker{left:4px;width:16px;height:16px}.setting-group .setting-group .setting-group .color-with-opacity-opacity-input{padding-right:20px}.setting-group .setting-group .setting-group .color-with-opacity-opacity-suffix{right:8px;font-size:10px}.color-with-opacity-input-wrapper.error .color-with-opacity-text-input{border-color:#f04438;background:#fff4f4;color:#f04438}.color-with-opacity-input-wrapper.disabled .color-with-opacity-text-input{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.html-setting-wrapper{display:flex;flex-direction:column;gap:8px;position:relative;width:100%}.html-setting-wrapper .icon-container{display:flex;align-items:center;gap:8px;margin-bottom:4px}.html-setting-wrapper .icon-container label{color:var(--Gray-800, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0}.html-setting-wrapper .icon-container img{width:20px;height:20px;object-fit:contain}.html-setting-textarea{width:100%;min-height:120px;padding:12px;font-size:13px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;line-height:1.4;border-radius:8px;color:var(--Gray-900, #101828);border:1px solid var(--Gray-300, #d0d5dd);background:var(--Base-White, #fff);resize:vertical;min-width:0;box-sizing:border-box;transition:border-color .2s ease,box-shadow .2s ease}.html-setting-textarea:focus{outline:none}.html-setting-textarea::placeholder{color:var(--Gray-500, #667085);font-style:italic}.html-setting-textarea:disabled{background-color:var(--Gray-50, #f9fafb);color:var(--Gray-500, #667085);cursor:not-allowed}@media (max-width: 768px){.html-setting-textarea{font-size:12px;padding:10px;min-height:100px}}.html-setting-textarea::-webkit-scrollbar{width:8px}.html-setting-textarea::-webkit-scrollbar-track{background:var(--Gray-100, #f2f4f7);border-radius:4px}.html-setting-textarea::-webkit-scrollbar-thumb{background-color:var(--Gray-300, #d0d5dd);border-radius:4px;border:2px solid transparent;background-clip:content-box}.html-setting-textarea::-webkit-scrollbar-thumb:hover{background-color:var(--Gray-400, #98a2b3)}.html-setting-textarea{scrollbar-width:thin;scrollbar-color:var(--Gray-300, #d0d5dd) var(--Gray-100, #f2f4f7)}.html-setting-textarea[data-syntax=html]{font-family:Monaco,Menlo,Ubuntu Mono,Courier New,monospace;-moz-tab-size:2;tab-size:2}.number-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.number-setting-wrapper .icon-container{display:flex;align-items:center;gap:4px}.number-setting-wrapper .input-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#667085;flex-shrink:0}.number-setting-wrapper .input-icon svg{width:18px;height:18px}.number-setting-wrapper .input-label{color:#637381;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:500;line-height:1.4}.number-setting-input-container{position:relative;width:100%;justify-self:end}.number-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:44px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.number-setting-input::placeholder{color:var(--color-text-muted, #98a2b3)}.number-setting-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.number-setting-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.number-setting-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.suffix-label{position:absolute;right:var(--space-md, 12px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.number-setting-input::-webkit-inner-spin-button,.number-setting-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-setting-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .number-setting-wrapper{min-height:36px}.setting-group .setting-group .number-setting-input-container{max-width:120px}.setting-group .setting-group .number-setting-input{height:32px;padding:6px 36px 6px 10px;font-size:13px}.setting-group .setting-group .suffix-label{right:10px;font-size:11px}.setting-group .setting-group .setting-group .number-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .number-setting-input-container{max-width:100px}.setting-group .setting-group .setting-group .number-setting-input{height:28px;padding:4px 32px 4px 8px;font-size:12px}.setting-group .setting-group .setting-group .suffix-label{right:8px;font-size:10px}.number-setting-input.error{border-color:#f04438;background:#fff4f4;color:#f04438}.number-setting-input.error:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.number-setting-input:focus-visible{outline-offset:2px}.opacity-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.icon-container{display:flex;align-items:center;gap:var(--space-sm, 8px)}.input-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--color-text-muted, #98a2b3)}.input-icon svg{width:16px;height:16px}.input-label{color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:500;line-height:1.4}.opacity-setting-input-container{position:relative;width:100%;justify-self:end}.opacity-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:44px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.opacity-setting-input::placeholder{color:var(--color-text-muted, #98a2b3)}.opacity-setting-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.opacity-setting-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.opacity-setting-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.opacity-suffix{position:absolute;right:var(--space-md, 12px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.opacity-setting-input::-webkit-inner-spin-button,.opacity-setting-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.opacity-setting-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .opacity-setting-wrapper{min-height:36px}.setting-group .setting-group .opacity-setting-input-container{max-width:120px}.setting-group .setting-group .opacity-setting-input{height:32px;padding:6px 36px 6px 10px;font-size:13px}.setting-group .setting-group .opacity-suffix{right:10px;font-size:11px}.setting-group .setting-group .setting-group .opacity-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .opacity-setting-input-container{max-width:100px}.setting-group .setting-group .setting-group .opacity-setting-input{height:28px;padding:4px 32px 4px 8px;font-size:12px}.setting-group .setting-group .setting-group .opacity-suffix{right:8px;font-size:10px}.opacity-setting-input.error{border-color:#f04438;background:#fff4f4;color:#f04438}.opacity-setting-input.error:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.opacity-setting-input:focus-visible{outline-offset:2px}.select-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;position:relative;width:100%;min-height:40px;z-index:1}.select-container .select-options{position:fixed;z-index:99999;max-width:300px;min-width:200px}.setting-group .select-container,.tab-content .select-container,.tabs-settings-container .select-container{position:relative;z-index:1}.select-container .icon-container{display:flex;align-items:center;margin-bottom:0}.select-container .icon-container .input-label{color:var(--color-text-secondary, #667085);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-sm, 12px);font-style:normal;font-weight:400;line-height:1.4}.select-button{place-self:end;max-width:140px;width:100%;height:36px;min-height:36px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 var(--space-md, 12px);border-radius:var(--radius-lg, 8px);border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);cursor:pointer;font-size:var(--font-size-md, 14px);font-weight:400;color:var(--color-text, #1d2939);position:relative;transition:all var(--transition-fast, .15s ease);box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.select-button:hover{border-color:var(--color-border-hover, #d0d5dd);box-shadow:0 1px 3px #1018281a}.select-button:focus{outline:none}.select-button.has-label{padding-top:0;height:36px}.select-button .select-label{position:absolute;top:8px;left:16px;color:#667085;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}.select-button .select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.select-button.loading{position:relative;color:#6e7891;background-color:#f9fafb;pointer-events:none;padding-left:36px!important}.select-button.loading:before{content:"";position:absolute;left:10px;top:25%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid #02cc59;border-radius:50%;animation:select-spin 1s linear infinite;z-index:2}@keyframes select-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-button.error{border-color:#f04438;color:#f04438;background-color:#fff4f4}.select-options{display:none;position:fixed!important;z-index:99999!important;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid #e4e7ec;background:#fff;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;transition:opacity .2s ease,transform .2s ease;opacity:0;transform:translateY(-8px);min-width:200px;max-width:300px}.select-options.open{display:flex;opacity:1;transform:translateY(0);animation:select-fade-in .2s ease forwards}@keyframes select-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes select-fade-in-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.select-options.dropdown-up.open{animation:select-fade-in-up .2s ease forwards}.select-option{padding:10px 12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#344054;border-radius:6px;transition:background-color .15s ease;font-size:14px}.select-option:hover{background:#f9fafb}.select-option.selected{background:#b6dfc8;color:#344054;font-weight:400}.svg-container{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;pointer-events:none;z-index:1}.svg-container .svg-select{stroke:#667085;transition:transform .3s ease;width:16px;height:16px}.svg-container.open .svg-select{transform:rotate(180deg)}.select-options::-webkit-scrollbar{width:6px}.select-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-options::-webkit-scrollbar-thumb{background:#e4e7ec;border-radius:8px}.select-options::-webkit-scrollbar-thumb:hover{background:#d0d5dd}.select-option.empty-message{text-align:center;color:#6e7891;font-style:italic;cursor:default;justify-content:center}.setting-group .setting-group .select-container{min-height:36px}.setting-group .setting-group .select-button{height:32px;min-height:32px;max-width:120px;font-size:13px;padding:0 32px 0 10px}.setting-group .setting-group .select-container .icon-container .input-label{font-size:11px}.setting-group .setting-group .setting-group .select-container{min-height:32px}.setting-group .setting-group .setting-group .select-button{height:28px;min-height:28px;max-width:100px;font-size:12px;padding:0 28px 0 8px}.setting-group .setting-group .setting-group .select-container .icon-container .input-label{font-size:10px}.setting-group .setting-group .svg-container,.setting-group .setting-group .setting-group .svg-container{right:8px;width:16px;height:16px}.setting-group .setting-group .svg-container .svg-select,.setting-group .setting-group .setting-group .svg-container .svg-select{width:12px;height:12px}.align-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px;justify-self:flex-end}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.button-setting{display:flex;height:30px;min-width:64px;padding:0;justify-content:center;align-items:center;gap:8px;flex:1 0 0;border:1px solid rgba(145,158,171,.32);border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;line-height:20px;letter-spacing:.01em;text-align:center}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative;width:100%}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center;z-index:1}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{transform:translate(-.25rem);width:24px;height:24px;background:none;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#667085;z-index:1;border-radius:4px;transition:all .2s ease}.dimension-lock-icon:hover{background-color:#f5f5f5;transform:translate(-.25rem) scale(1.1)}.dimension-setting-container.aspect-locked .dimension-lock-icon{color:#02cc59;background-color:#02cc591a;box-shadow:0 0 0 1px #02cc5933}.dimension-setting-container.aspect-locked .dimension-bracket:before,.dimension-setting-container.aspect-locked .dimension-bracket:after{filter:hue-rotate(210deg) saturate(2)}@media (max-width: 480px){.dimension-bracket{right:100px}}.upload-setting-wrapper{display:grid;grid-template-columns:1fr;gap:8px;width:100%}.icon-title-container{display:flex;align-items:center;gap:8px;margin-bottom:4px}.icon-title-container .input-label{color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500}.preview-button-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch;width:100%;gap:12px;border-radius:12px}.preview-button-container.no-image{justify-content:center}.preview-button-container.no-image .preview-placeholder{display:none}.preview-button-container.no-image .upload-button{width:100%;min-width:140px;flex-grow:1;margin:0 auto}.no-image .preview-placeholder{display:none!important}.preview-wrapper{position:relative;width:91px;height:71px;border-radius:4px;overflow:hidden;background-color:#d3d3d3;flex-shrink:0;display:none}.preview-wrapper.has-image{display:block}.upload-preview{width:100%;height:100%;object-fit:cover;border-radius:4px;display:none;background-position:center;background-size:146.165% 100%;background-repeat:no-repeat}.preview-wrapper.has-image .upload-preview{display:block;object-fit:contain;padding:2px}.empty-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3}.empty-state svg{width:100%;height:100%}.preview-wrapper.has-image .empty-state{display:none}.upload-button{width:100%;height:40px;display:flex;padding:5px 4px;flex-direction:row;align-items:center;gap:4px;border-radius:12px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Base-White, #fff);cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;flex-grow:0;justify-content:center;min-width:90px}.preview-wrapper:not(.has-image)+.upload-button{flex-grow:0}.upload-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.upload-icon{display:flex;align-items:center;justify-content:center}.upload-label{font-size:12px;font-weight:500;color:#344054}.delete-button{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;position:absolute;right:4px;top:4px;background:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:background-color .2s ease;z-index:2}.delete-button svg{width:14px;height:14px;flex-shrink:0}.delete-button:hover{background-color:#f3f4f6}.upload-setting-wrapper.no-label .preview-button-container{grid-row:1}.preview-placeholder{display:flex;justify-content:center;align-items:center;width:91px;height:71px;border-radius:4px;background-color:#f2f4f7;flex-shrink:0}.preview-button-container:not(:has(.preview-wrapper.has-image)) .preview-placeholder{display:flex}.upload-setting-wrapper .error-message{color:#f04438;font-size:12px;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.4;margin-top:4px;margin-bottom:8px;padding:8px 12px;background-color:#fff4f4;border:1px solid #fecdca;border-radius:6px;display:none;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.upload-setting-wrapper .error-message:before{content:"⚠️";margin-right:6px}.preview-wrapper.loading{display:flex;align-items:center;justify-content:center;background-color:#f9fafb}.preview-wrapper.loading .upload-preview{display:none}.loading-spinner{width:29px;height:29px;display:flex;align-items:center;justify-content:center;animation:spin 1s linear infinite}.loading-spinner svg{width:100%;height:100%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--im-bg: #f6f8fb;--im-panel: #ffffff;--im-panel-strong: #f1f4f9;--im-card: #ffffff;--im-border: #d7deea;--im-border-strong: #c3d2ea;--im-text: #0f172a;--im-text-subtle: #4b5565;--im-accent: #3ca4ff;--im-accent-strong: #2f7bd1;--im-danger: #f04438;--im-success: #12b76a;--im-shadow: 0 10px 30px rgba(15, 23, 42, .12);--im-radius: 14px;--font: "Public Sans"}.image-map-setting-wrapper{display:grid;grid-template-columns:1fr;gap:12px;width:100%;font-family:var(--font)}.icon-container{display:flex;align-items:center;gap:8px}.input-label{color:#1f2937;font-size:14px;font-weight:600}.input-icon{display:flex;align-items:center;justify-content:center}.image-map-sections-container{display:flex;flex-direction:column;gap:16px}.image-map-section{display:flex;flex-direction:column;gap:8px}.image-map-section-title{color:#46525c;margin:0;font-family:var(--font);font-size:14px;font-style:normal;font-weight:600;line-height:150%}.image-map-upload-box{position:relative;display:flex;align-items:center;justify-content:center;height:40px;background:#f9fafb;border:1px solid rgba(145,158,171,.2);border-radius:12px;padding:4px;gap:12px;transition:all .2s ease}.image-map-upload-box:hover{border-color:#c7d5ed}.image-map-upload-box.has-image{border-style:solid;background:#eff1f2;justify-content:space-between;padding:4px!important;border-radius:12px;gap:12px;height:60px}.image-map-thumbnail-wrapper{position:relative;display:none;flex-shrink:0}.image-map-upload-box.has-image .image-map-thumbnail-wrapper{display:block}.image-map-thumbnail-main{width:121px;height:52px;background:#fff;object-fit:cover;border-radius:8px;display:block}.image-map-upload-label{cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;transition:all .2s ease;margin-right:22px}.upload-text{color:#637381;font-family:var(--font);font-size:12px;font-style:normal;font-weight:600;line-height:18px;letter-spacing:0;display:flex}.image-map-upload-box.has-image .image-map-upload-label{position:static;opacity:1;background:transparent;flex:1;display:flex;align-items:center;justify-content:end;padding-right:4px;max-width:fit-content}.image-map-upload-box.has-image .upload-text{display:none}.image-map-upload-box.has-image .image-map-upload-label:after{content:"Replace";color:#637381;font-family:var(--font);font-size:12px;font-weight:600}.upload-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:50%}.upload-icon svg{width:15px;height:16px}.image-map-upload-box.has-image .upload-icon{background:transparent;width:24px;height:24px}.image-map-upload-box.has-image .upload-icon svg{width:18px;height:18px}.upload-icon-default{display:flex}.upload-icon-replace,.image-map-upload-box.has-image .upload-icon-default{display:none}.image-map-upload-box.has-image .upload-icon-replace{display:flex}.image-map-delete-btn{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:18px;height:18px;display:none;align-items:center;justify-content:center;background:#eff1f2;border:1px solid #ff5630;border-radius:500px;cursor:pointer;transition:all .2s ease;z-index:10;padding:0}.image-map-upload-box.has-image .image-map-delete-btn{display:flex;width:28px;height:28px}.image-map-delete-btn svg{width:14px;height:15px;flex-shrink:0}.image-map-button{display:flex;align-items:center;gap:12px;padding:4px;border-radius:12px;background:#f9fafb;border:1px solid #dce3ef;cursor:pointer;transition:all .2s ease;min-height:40px;border:1px solid rgba(145,158,171,.2);color:#0f172a;font-weight:600;justify-content:center}.image-map-button:hover:not(:disabled){border-color:#c7d5ed}.image-map-button:disabled{opacity:.5;cursor:not-allowed;background:#f5f5f5}.image-map-thumbnail{width:72px;height:52px;object-fit:cover;border-radius:8px;display:none;border:1px solid var(--im-border);background:#eef2f8}.image-map-button.has-image .image-map-thumbnail{display:block}.image-map-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px}.image-map-icon svg{width:18px;height:18px;aspect-ratio:1/1}.image-map-button.has-image .image-map-icon{display:none}.image-map-marker-count{color:#637381;font-family:var(--font);font-size:12px;font-style:normal;font-weight:600;line-height:18px;letter-spacing:0}.image-map-button.has-image .image-map-marker-count{color:#0f172a;font-size:14px;font-weight:600}.image-map-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a00;z-index:1;pointer-events:none}.image-map-popover{position:fixed;z-index:1;width:580px;max-width:94vw;height:600px;max-height:90vh;background:#fff;border-radius:var(--im-radius);border:1px solid var(--im-border-strong);box-shadow:0 20px 50px #0f172a29;display:flex;flex-direction:column;overflow:hidden;color:var(--im-text);gap:16px;padding:16px;z-index:99}.image-map-header{display:flex;align-items:center;justify-content:space-between;-webkit-user-select:none;user-select:none}.image-map-title{margin:0;font-size:18px;font-weight:600;color:#1c252e;line-height:150%}.image-map-close-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:2px;transition:all .2s ease;padding:0}.image-map-close-btn:hover{background:#dbdfe2}.image-map-content{overflow:hidden;flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.image-map-main-layout{display:flex;gap:16px;height:100%;min-height:0}.image-map-image-section{flex:1;display:flex;flex-direction:column;gap:16px;min-width:0;min-height:0}.prize-list-section{width:200px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden}.upload-section-wrapper{display:flex;flex-direction:column;gap:20px}.upload-section-title{font-size:16px;font-weight:700;color:#0f172a;margin:0 0 12px}.upload-section{display:flex;align-items:center;justify-content:center;min-height:180px;background:#f9fbfe;border:1px dashed #d7deea;border-radius:var(--im-radius)}.upload-label{cursor:pointer;width:100%;border:none;padding:0;background:none}.upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px;border:none;border-radius:var(--im-radius);background:transparent;transition:all .2s ease;color:#0f172a}.upload-placeholder:hover{background:#eef3fb}.upload-placeholder span{color:#0f172a;font-size:15px;font-weight:600}.upload-label.map-config-btn .upload-placeholder{border:1px solid #d7deea;border-radius:var(--im-radius);background:#fff}.upload-label.map-config-btn .upload-placeholder:hover{background:#f0f4fb;border-color:#c7d5ed}.controls-row{display:flex;justify-content:space-between;align-items:center;gap:16px;border-radius:12px}.place-prize-text{color:var(--Blue-blue-1000, #1c252e);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:150%}.undo-redo-group{display:flex;gap:8px;flex:0 0 auto;margin-left:11px}.prize-counter-inline{color:var(--Blue-blue-500, #637381);text-align:right;font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:150%}.prize-counter-inline.complete{background:#f0fbf4;color:var(--im-success);border-color:#12b76a66}.action-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0;color:#0f172a;border-radius:2px}.action-btn:hover:not(:disabled){background:#dbdfe2}.action-btn:disabled{opacity:.35;cursor:not-allowed}.action-btn:disabled svg path{fill:#454f5b}.action-btn svg path{fill:#0f172a}.bottom-buttons{display:flex;justify-content:flex-end;gap:16px}.bottom-buttons>button,.bottom-buttons>.done-btn-wrapper{max-width:110px;width:100%}.clear-all-btn{display:flex;justify-content:center;align-items:center;gap:2px;border:1px solid var(--Blue-blue-100, #cfd4d8);border-radius:8px}.clear-all-btn svg{width:18px;height:18px;aspect-ratio:1/1}.clear-all-btn span{color:var(--Blue-blue-700, #46525c);text-align:center;font-size:14px;font-style:normal;font-weight:700;line-height:150%;text-transform:capitalize}.clear-all-btn:hover{border-radius:8px;border:1px solid var(--Blue-blue-100, #cfd4d8);background:var(--Blue-blue-50, #eff1f2)}.done-btn{display:flex;justify-content:center;align-items:center;gap:4px;border-radius:8px;background:var(--Blue-blue-1000, #1c252e);padding:8px 12px;color:var(--Blue-blue-50, #eff1f2);text-align:center;font-size:14px;font-style:normal;font-weight:700;line-height:150%;text-transform:capitalize;width:100%}.done-btn:hover:not(:disabled){border-radius:8px;background:var(--Blue-blue-900, #2a3036)}.done-btn:disabled{border-radius:8px;opacity:.5;background:var(--Blue-blue-1000, #1c252e)}.done-btn-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.done-btn-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,25%);display:none;flex-direction:column;align-items:center;pointer-events:none;z-index:1000}.done-btn-wrapper.has-tooltip:hover .done-btn-tooltip{display:flex}.done-btn-tooltip-content{display:flex;padding:var(--tooltip-py, 3px) var(--tooltip-px, 6px);justify-content:center;align-items:center;border-radius:var(--radius-075, 6px);background:var(--Blue-blue-1000, #1c252e);color:#fff;font-family:var(--font);line-height:150%;white-space:nowrap;text-align:center;font-size:11px;font-style:normal;font-weight:400}.done-btn-tooltip-tail{width:8px;height:4px;display:flex;align-items:center;justify-content:center;margin-top:-1px}.done-btn-tooltip-tail svg{width:8px;height:4px;fill:var(--Blue-blue-1000, #1c252e)}.image-map-error-tooltip{position:absolute;display:flex;flex-direction:column;align-items:center;gap:0;pointer-events:none;transform:translate(-50%,-100%);opacity:0;transition:opacity .15s ease,transform .15s ease;z-index:200}.image-map-error-tooltip.visible{opacity:1;transform:translate(-50%,calc(-100% - 2px))}.image-map-error-tooltip-content{display:flex;padding:var(--tooltip-py, 3px) var(--tooltip-px, 6px);justify-content:center;align-items:center;border-radius:6px;background:#ff5630;color:var(--components-tooltip-color, #fff);text-align:center;font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:150%;box-shadow:0 10px 24px #f044384d;white-space:nowrap}.image-map-error-tooltip-tail{width:8px;height:4px;display:flex;align-items:center;justify-content:center}.image-map-error-tooltip-tail svg{width:8px;height:4px;display:block}.image-map-error-tooltip-tail path{fill:#ff5630}.image-map-container{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;padding-right:4px}.image-map-container::-webkit-scrollbar{width:4px}.image-map-container::-webkit-scrollbar-track{background:#eff1f2}.image-map-container::-webkit-scrollbar-thumb{background:var(--Blue-blue-300, #96a1ab);border-radius:100px}.image-map-container::-webkit-scrollbar-thumb:hover{background:#7a8691}.image-map-wrapper{position:relative;width:100%;background:#fff;min-height:fit-content}.image-map-image{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;border-radius:8px}.prize-counter{font-size:14px;font-weight:700;color:var(--im-text);padding:10px 12px;background:#fff;border-radius:10px;border:1px solid var(--im-border);text-align:center}.prize-counter.complete{background:#f0fbf4;color:var(--im-success);border-color:#12b76a66}.prize-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;background:#f9fbfe;padding:2px;border-radius:10px}.prize-item{padding:12px;background:var(--im-card);border:1px solid var(--im-border);border-radius:12px;display:grid;grid-template-columns:36px 1fr 24px;align-items:center;gap:10px;box-shadow:inset 0 1px #ffffffb3}.prize-item.placed{border-color:#12b76a66;background:#f0fbf4}.prize-item.missing{border-color:#f0443840;background:#fff5f5}.prize-index{width:32px;height:32px;border-radius:8px;background:#f0f4fb;border:1px solid var(--im-border);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--im-text)}.prize-label{display:flex;flex-direction:column;gap:2px}.prize-title{font-weight:700;color:#0f172a;font-size:14px}.prize-subtitle{color:#4b5565;font-size:12px}.prize-status{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffffe6}.prize-status.placed{box-shadow:0 0 0 1px #12b76a40}.prize-status.missing{box-shadow:0 0 0 1px #f0443840}.prize-list-empty{padding:16px 10px;text-align:center;color:var(--im-text-subtle);font-size:12px}.sidebar-save-btn{padding:12px 16px;background:linear-gradient(145deg,#2f7bd1,#3ca4ff);color:#fff;border:1px solid rgba(60,164,255,.4);border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:transform .1s ease,box-shadow .2s ease;box-shadow:0 12px 30px #2f7cd14d}.sidebar-save-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 34px #3ca4ff59}.sidebar-save-btn:disabled{background:#e4eaf5;color:#7a869c;border-color:var(--im-border);cursor:not-allowed;box-shadow:none}.marker-container{position:absolute;display:flex;align-items:center;gap:10px;transform:translate(-13.5px,-34px);z-index:10;cursor:grab}.marker-container.dragging{cursor:grabbing;z-index:30}.marker-container.dragging .image-map-marker{transform:scale(1.1)}.image-map-marker{width:27px;height:34px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;-webkit-user-select:none;user-select:none;transition:transform .15s ease,filter .2s ease;position:relative;filter:drop-shadow(0 4px 12px rgba(240,68,56,.4))}.image-map-marker svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.marker-number{pointer-events:none;position:relative;z-index:1;margin-top:-8px}.marker-delete-btn{position:absolute;top:-10px;right:-8px;width:18px;height:18px;display:none;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .2s ease;z-index:50;pointer-events:auto;box-shadow:0 2px 1px #00000040;border-radius:100%}.marker-container:hover .marker-delete-btn{display:flex}.marker-cursor-tooltip{position:absolute;display:none;width:18px;height:18px;padding:2px;flex-direction:column;justify-content:center;align-items:center;gap:4px;aspect-ratio:1/1;border-radius:23px;background:#f04438cc;color:#fff;font-size:11px;font-weight:700;pointer-events:none;z-index:100;transform:translate(10px,10px)}.marker-cursor-tooltip.visible{display:flex}.image-map-error-toast{font-family:var(--font)}.image-map-confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;z-index:11000;display:flex;align-items:center;justify-content:center;padding:16px}.image-map-confirm-modal{background:#fff;border:1px solid #dce3ef;border-radius:16px;width:360px;max-width:90vw;padding:20px;color:#0f172a;box-shadow:0 20px 50px #0f172a2e;transform:translateY(12px);opacity:0;transition:all .15s ease}.image-map-confirm-modal.visible{transform:translateY(0);opacity:1}.confirm-header{font-weight:700;font-size:16px;margin-bottom:8px}.confirm-body{font-size:14px;color:#4b5565;margin-bottom:18px;line-height:1.4}.confirm-actions{display:flex;justify-content:flex-end;gap:10px}.confirm-btn{padding:10px 14px;border-radius:10px;border:1px solid #dce3ef;background:#fff;color:#0f172a;font-weight:700;cursor:pointer;transition:all .15s ease;min-width:100px}.confirm-btn.ghost:hover{border-color:#c7d5ed;background:#eef3fb}.confirm-btn.danger{background:linear-gradient(145deg,#f04438,#c72f28);border-color:#f0443866;color:#fff}.confirm-btn.danger:hover{box-shadow:0 12px 24px #f044384d;transform:translateY(-1px)}.simple-prize-list{display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;padding:12px 8px 4px 4px;flex:1;min-height:0;border-radius:4px;border:1px solid var(--Blue-blue-50, #eff1f2);background:#fff}.simple-prize-list::-webkit-scrollbar{width:4px}.simple-prize-list::-webkit-scrollbar-track{background:#eff1f2}.simple-prize-list::-webkit-scrollbar-thumb{background:var(--Blue-blue-300, #96a1ab);border-radius:100px}.simple-prize-list::-webkit-scrollbar-thumb:hover{background:#7a8691}.simple-prize-item{display:grid;grid-template-columns:35px 1fr 20px;padding:2px 4px;place-content:center;align-items:center;border-bottom:1px solid #eff1f2;height:25px}.simple-prize-text{color:var(--Blue-blue-1000, #1c252e);font-size:14px;font-style:normal;font-weight:400;line-height:150%;font-family:var(--font)}.simple-prize-item.placed .simple-prize-text{color:#1c252e}.simple-prize-check{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:8px}.simple-prize-check svg{width:14px;height:14px}.height-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.height-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.height-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.height-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.width-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.width-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.width-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting .number-setting{width:100%}.sg-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;transition:opacity .2s ease-out}.sg-modal-overlay.sg-modal-overlay-open{opacity:1}.sg-confirmation-modal{background:#fff;border-radius:8px;padding:24px;max-width:400px;width:90%;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.sg-confirmation-title{margin:0 0 12px;font-size:18px;font-weight:600;color:#1f2937}.sg-confirmation-message{margin:0 0 24px;color:#6b7280;font-size:14px;line-height:1.5}.sg-confirmation-actions{display:flex;gap:12px;justify-content:flex-end}.sg-confirmation-button{padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.sg-confirmation-button--cancel{border:1px solid #d1d5db;background:#fff;color:#374151}.sg-confirmation-button--cancel:hover{background-color:#f9fafb;border-color:#9ca3af}.sg-confirmation-button--destructive{border:none;background:#ef4444;color:#fff}.sg-confirmation-button--destructive:hover{background:#dc2626}.sg-confirmation-button--primary{border:none;background:#2563eb;color:#fff}.sg-confirmation-button--primary:hover{background:#1d4ed8}confirmation-button--primary:hover{background:#1d4ed8}.select-api-container{display:grid;grid-template-columns:1fr;place-content:center;align-items:center;position:relative;width:100%}.select-api-button{width:100%;height:33px;min-height:33px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 16px;border-radius:8px;border:1px solid var(--color-border, #e4e7ec);background:#fff;cursor:pointer;color:#344054;font-family:Satoshi;font-size:14px;font-style:normal;font-weight:500;line-height:normal;position:relative;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:40px!important}.select-api-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.select-api-button:focus{outline:none;border-color:#b6dfc8;box-shadow:0 0 0 4px #7f56d91a}.select-api-button .select-label{position:absolute;top:2px;color:#667085;font-family:Satoshi;font-size:12px;font-style:normal;font-weight:400;line-height:normal;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}.select-api-button .select-value{margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.select-api-button.loading{position:relative;color:#6e7891;background-color:#f9fafb;pointer-events:none;padding-left:36px!important}.select-api-button.loading:before{content:"";position:absolute;left:10px;top:25%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid #02cc59;border-radius:50%;animation:select-api-spin 1s linear infinite;z-index:2}.select-api-button.has-label.loading{padding-left:36px!important}.select-api-button.has-label.loading .select-value{padding-left:0}.select-api-button.has-label.loading:before{top:18px;left:10px}@keyframes select-api-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-api-button.error{border-color:#f04438;color:#f04438;background-color:#fff4f4}.select-api-options{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;z-index:1000;flex-direction:column;gap:2px;color:#101828;align-items:flex-start;border:1px solid #e4e7ec;background:#fff;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;transition:opacity .2s ease,transform .2s ease;opacity:0;transform:translateY(-8px)}.select-api-options.open{display:flex;opacity:1;transform:translateY(0)}.select-api-option{padding:10px 12px;width:100%;display:flex;align-items:center;justify-content:flex-start;gap:10px;cursor:pointer;color:#344054;border-radius:6px;transition:background-color .15s ease;font-size:13px}.select-api-option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.select-api-option:hover{background:#f9fafb}.select-api-option.selected{background:#b6dfc8;color:#344054;font-weight:500}.select-api-option.disabled{opacity:.6;cursor:not-allowed;color:#6e7891}.select-api-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #e4e7ec;background:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0;cursor:pointer;flex-shrink:0}.select-api-radio:checked{border-color:#02cc59;background:#fff;position:relative}.select-api-radio:checked:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background:#02cc59;border-radius:50%}.svg-container{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;pointer-events:none}.svg-container .svg-select-api{stroke:#667085;transition:transform .3s ease;width:16px;height:16px}.svg-container.open .svg-select-api{transform:rotate(180deg)}.select-api-container .icon-container{display:none}.select-api-options::-webkit-scrollbar{width:6px}.select-api-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb{background:#e4e7ec;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb:hover{background:#d0d5dd}.select-api-option.empty-message{text-align:center;color:#6e7891;font-style:italic;cursor:default;justify-content:center}.select-api-option.empty-message:hover{background:transparent}.select-api-option:focus{outline:none;box-shadow:0 0 0 2px #b6dfc8}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.select-api-options.open{display:flex;animation:fadeIn .2s ease forwards}.select-api-button.has-label{height:48px}.toggle-setting-container{display:flex;justify-content:space-between;align-items:center;padding-left:3px;padding-right:3px;flex-wrap:wrap}.toggle-label{color:#344054;font-family:Satoshi;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.toggle-switch{position:relative;display:inline-block;width:36px;height:20px;padding:2px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#e4e7ec;transition:.4s;border-radius:34px}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.toggle-slider{background-color:#02cc59}input:focus+.toggle-slider{box-shadow:0 0 1px #02cc59}input:checked+.toggle-slider:before{transform:translate(16px)}.toggle-with-icon .toggle-label{display:flex;align-items:center;gap:8px}.toggle-icon{display:flex;align-items:center;justify-content:center;color:#667085}.toggle-description{color:#637381;width:100%;margin:8px 0 0;font-size:11px;line-height:16px}.toggle-setting-container.toggle-has-description{border:1px dashed #919EAB66;border-radius:12px;padding:12px 8px;box-sizing:border-box}.gap-settings-container{display:flex;flex-direction:column;gap:12px;width:100%}.gap-settings-title{font-size:14px;font-weight:500;color:#344054;margin-bottom:4px}.gap-input-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;width:100%}.gap-label-container{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1}.gap-setting-icon{display:flex;align-items:center;justify-content:center;font-size:16px;color:#667085}.gap-setting-icon svg{width:16px;height:16px}.gap-input-label{font-size:13px;color:#667085}.gap-setting-inner-wrapper{position:relative;display:grid;grid-template-columns:1fr;place-content:center;align-items:center;width:120px}.gap-setting-input{width:100%;padding:8px;font-size:14px;border-radius:8px;color:#292b2e;border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-wrapper{position:relative}.suffix-label{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding-left:8px;border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}.gap-setting-input::-webkit-outer-spin-button,.gap-setting-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gap-setting-input[type=number]{-moz-appearance:textfield}.margin-bottom-wrapper{display:grid;grid-template-columns:1fr auto;gap:auto}.margin-bottom-wrapper .setting-icon svg{width:18px;height:19px}.margin-bottom-wrapper .number-setting-input{background:#fff;min-width:95px;width:95px;padding:8px;border-radius:8px;border:1px solid #D0D5DD;font-size:14px;color:#292b2e}.margin-bottom-wrapper .setting-title{color:#667085;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.margin-top-wrapper{display:grid;grid-template-columns:1fr auto;gap:auto}.margin-top-wrapper .setting-icon svg{width:18px;height:19px}.margin-top-wrapper .number-setting-input{background:#fff;min-width:95px;width:95px;padding:8px;border-radius:8px;border:1px solid #D0D5DD;font-size:14px;color:#292b2e}.margin-top-wrapper .setting-title{color:#667085;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.simple-multi-language-wrapper{display:flex;flex-direction:column;width:100%}.simple-multi-language-title{display:flex;justify-content:space-between;align-items:center;color:var(--Blue-blue-700, #46525c);font-family:Public Sans;font-size:14px;font-style:normal;font-weight:600;line-height:150%}.simple-multi-language-content{display:flex;flex-direction:column;gap:12px;width:100%}.multi-language-eye-icon{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s,background .2s;border-radius:2px}.multi-language-eye-icon:hover{border-radius:2px;background:var(--Blue-hover, #dbdfe2);color:#000}.simple-multi-language-row{display:flex;flex-direction:column;gap:6px}.simple-language-label{font-size:12px;font-weight:500;color:var(--color-input-text);text-transform:uppercase;letter-spacing:.5px;margin-left:2px}.simple-language-textarea{width:100%;min-height:38px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);font-family:inherit;resize:none;line-height:1.4;overflow-y:hidden;box-sizing:border-box;padding:8px 12px;max-height:90px}.simple-language-textarea:focus{outline:none}.simple-language-textarea::placeholder{color:var(--color-text-muted, #6c757d);white-space:nowrap;text-overflow:ellipsis}.simple-language-textarea:placeholder-shown{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multi-language-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000;z-index:1000}.multi-language-popup{position:fixed;background:#fff;border-radius:16px;padding:24px 16px;max-width:580px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 4px 8px #919eab29;display:flex;flex-direction:column;gap:24px;z-index:1001}.multi-language-popup-header{display:flex;justify-content:space-between;align-items:center;cursor:move}.multi-language-popup-title{margin:0;font-family:Public Sans,sans-serif;font-size:18px;font-weight:600;line-height:1.5;color:#1c252e}.multi-language-popup-description{margin:4px 0 0;font-family:Public Sans,sans-serif;font-size:13px;font-weight:400;line-height:1.4;color:#2a3036}.multi-language-close-button{background:none;border:none;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:2px;transition:background-color .2s}.multi-language-close-button:hover{border-radius:2px;background:var(--Blue-hover, #dbdfe2)}.multi-language-close-button svg{width:24px;height:24px;color:#637381}.multi-language-popup-content{display:flex;flex-direction:column;gap:8px}.multi-language-popup-content .simple-multi-language-row{display:flex;flex-direction:column;gap:4px}.multi-language-popup-content .simple-language-label{font-family:Public Sans,sans-serif;font-size:14px;font-weight:400;line-height:1.5;color:#637381;text-transform:uppercase}.multi-language-popup-content .simple-language-textarea{width:100%;max-height:200px;font-family:Public Sans,sans-serif;font-size:14px;font-weight:400;line-height:1.5;color:#1c252e;border:1px solid #eff1f2;background:#fff;border-radius:8px;padding:16px;resize:none;box-sizing:border-box;transition:border-color .2s;overflow-y:auto}.multi-language-popup-content .simple-language-textarea:focus{outline:none}.multi-language-popup-content .simple-language-textarea::placeholder{color:#637381}.multi-language-popup-footer{display:flex;align-items:center;justify-content:flex-end;gap:16px}.multi-language-done-button{background:#1c252e;border:none;border-radius:8px;padding:8px 12px;min-width:104px;height:37px;cursor:pointer;font-family:Public Sans,sans-serif;font-size:14px;font-weight:700;line-height:1.5;color:#eff1f2;text-transform:capitalize;transition:background-color .2s}.multi-language-done-button:hover{background:#2c3840}.multi-language-done-button:disabled{background:#919eab;cursor:not-allowed}.translation-manager{padding:20px;background:var(--color-bg, #fff);border-radius:12px;border:1px solid var(--color-border, #e0e0e0);margin:20px 0}.translation-manager-title{margin:0 0 16px;font-family:Public Sans,sans-serif;font-size:16px;font-weight:600;color:var(--Blue-blue-700, #46525c)}.translation-manager-buttons{display:flex;gap:12px;margin-bottom:12px}.translation-manager-button{display:flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:8px;font-family:Public Sans,sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.translation-manager-button svg{width:16px;height:16px}.translation-manager-button.export-button{background:#1c252e;color:#fff}.translation-manager-button.export-button:hover{background:#2c3840}.translation-manager-button.import-button{background:#fff;color:#1c252e;border:1px solid #1c252e}.translation-manager-button.import-button:hover{background:#f5f5f5}.translation-manager-info{margin:0;font-family:Public Sans,sans-serif;font-size:13px;color:#637381;line-height:1.5}@media (max-width: 640px){.simple-multi-language-row{gap:4px}.simple-language-label{font-size:11px}.simple-language-textarea{min-height:0;padding:8px;font-size:13px}.multi-language-popup{width:95%;padding:16px}.multi-language-popup-title{font-size:16px}.translation-manager-buttons{flex-direction:column}.translation-manager-button{width:100%;justify-content:center}}.as-wrapper{display:grid;grid-template-columns:100px 1fr;column-gap:12px;align-items:center}.as-label{color:var(--Gray-700, #344054);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:400;line-height:36px;white-space:nowrap;flex-shrink:0}.as-row{display:flex;gap:8px;min-width:0}.as-input-with-icon{display:flex;align-items:center;height:36px;padding:0 4px;border:1px solid #cfd4d8;border-radius:4px;box-sizing:border-box;flex:1 1 0;min-width:0}.as-input-with-icon:hover{border-color:var(--Gray-300, #d0d5dd)}.as-input-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;margin-right:4px}.as-input-icon svg{width:18px;height:18px}.as-input{flex:1;min-width:0;width:100%;border:none;outline:none;background:transparent;color:var(--Gray-900, #101828);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:400;line-height:20px;padding:0}.as-input::placeholder{color:var(--Gray-400, #98a2b3)}@media (max-width: 480px){.as-wrapper{flex-wrap:wrap}.as-label{width:100%;line-height:20px;margin-bottom:4px}.as-row{flex-wrap:wrap}}.code-editor-setting-wrapper{display:flex;flex-direction:column;width:100%}.code-editor-setting-title{display:flex;justify-content:space-between;align-items:center;color:var(--Blue-blue-700, #46525c);font-family:Public Sans;font-size:14px;font-style:normal;font-weight:600;line-height:150%}.code-editor-open-button{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--color-border, #e4e7ec);border-radius:8px;padding:6px 12px;cursor:pointer;font-family:Public Sans,sans-serif;font-size:13px;font-weight:500;color:#637381;transition:background .2s,border-color .2s}.code-editor-open-button:hover{background:var(--Blue-hover, #dbdfe2);border-color:#c4cdd5}.code-editor-open-button svg{width:18px;height:18px;flex-shrink:0}.code-editor-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000;z-index:1000}.code-editor-popup{position:fixed;background:#fff;border-radius:16px;padding:24px 16px;max-width:900px;width:90%;max-height:80vh;min-height:350px;overflow:hidden;box-shadow:0 2px 12px #919eab33;display:flex;flex-direction:column;gap:16px;z-index:1001}.code-editor-popup-header{display:flex;justify-content:space-between;align-items:center;cursor:move}.code-editor-popup-title{margin:0;font-family:Public Sans,sans-serif;font-size:18px;font-weight:600;line-height:1.5;color:#1c252e}.code-editor-close-button{background:none;border:none;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:2px;transition:background-color .2s}.code-editor-close-button:hover{background:var(--Blue-hover, #dbdfe2)}.code-editor-close-button svg{width:24px;height:24px;color:#637381}.code-editor-tab-bar{display:flex;gap:0;border-bottom:1px solid #e4e7ec}.code-editor-tab{background:none;border:none;border-bottom:2px solid transparent;padding:8px 16px;cursor:pointer;font-family:Public Sans,sans-serif;font-size:14px;font-weight:500;color:#637381;transition:color .15s,border-color .15s}.code-editor-tab:hover{color:#1c252e}.code-editor-tab-active{color:#1c252e;border-bottom-color:#1c252e;font-weight:600}.code-editor-container{flex:1;min-height:200px;overflow:hidden;border:1px solid #e4e7ec;border-radius:8px;display:flex;flex-direction:column}.code-editor-view-wrapper{flex:1 1 200px;min-height:0;overflow:hidden}.code-editor-view-wrapper .cm-editor{height:100%}.code-editor-view-wrapper .cm-scroller{overflow:auto!important;min-height:200px}.code-editor-popup-footer{display:flex;align-items:center;justify-content:flex-end;gap:16px}.code-editor-done-button{background:#1c252e;border:none;border-radius:8px;padding:8px 12px;min-width:104px;height:37px;cursor:pointer;font-family:Public Sans,sans-serif;font-size:14px;font-weight:700;line-height:1.5;color:#eff1f2;text-transform:capitalize;transition:background-color .2s}.code-editor-done-button:hover{background:#2c3840}@media (max-width: 640px){.code-editor-popup{width:95%;padding:16px}.code-editor-popup-title{font-size:16px}.code-editor-container{min-height:0}}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085;align-self:center}.settings-container,.main-settings-container,[data-settings-container]{height:auto;min-height:auto;overflow:visible;flex-shrink:0}.container,.wrapper,.main-wrapper{height:auto!important;min-height:auto!important;max-height:none!important;overflow:visible!important}:root{--sg-spacing-0: 16px;--sg-spacing-1: 12px;--sg-spacing-2: 8px;--sg-spacing-3: 6px;--sg-border-0: #eaecf0;--sg-border-1: #d0d5dd;--sg-border-2: #e5e7eb;--sg-border-3: #f2f4f7;--sg-bg-0: #fff;--sg-bg-1: #fff;--sg-bg-2: #fff;--sg-bg-3: #fff;--sg-shadow-0: 0px 1px 3px rgba(16, 24, 40, .1), 0px 1px 2px rgba(16, 24, 40, .06);--sg-shadow-1: 0px 1px 2px rgba(16, 24, 40, .05);--sg-shadow-2: 0px 1px 1px rgba(16, 24, 40, .04);--sg-shadow-3: none}.setting-group{display:flex;flex-direction:column;width:100%;gap:8px;border-radius:8px;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;max-width:100%;box-sizing:border-box}.disabled-setting-group{opacity:.5!important;pointer-events:none!important}.setting-group[data-nesting-level="0"]{border-radius:8px;background:transparent}.setting-group[data-nesting-level="1"]{border-radius:6px;background:transparent}.setting-group[data-nesting-level="2"],.setting-group[data-nesting-level="3"],.setting-group[data-nesting-level="4"],.setting-group[data-nesting-level="5"]{border-radius:4px}.setting-group.collapsed{padding:0;border:none;background:transparent;box-shadow:none}.setting-group[data-nesting-level="0"] .setting-group-content{padding:0 8px 8px;gap:8px}.setting-group[data-nesting-level="1"] .setting-group-content{padding:0 8px 8px;gap:6px}.setting-group[data-nesting-level="2"] .setting-group-content{gap:4px}.setting-group[data-nesting-level="3"] .setting-group-content,.setting-group[data-nesting-level="4"] .setting-group-content,.setting-group[data-nesting-level="5"] .setting-group-content{padding:0 6px 6px;gap:3px}.setting-group-title{display:flex;justify-content:space-between;align-items:center;padding:4px 0;cursor:pointer;border-radius:6px}.setting-group-title h3{color:var(--Gray-800, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transform:rotate(180deg);color:var(--Gray-500, #344054)}.setting-group-arrow.rotated{transform:rotate(0)}.setting-group-content{display:flex;flex-direction:column;width:100%;opacity:1;overflow:visible;max-width:100%;box-sizing:border-box}.setting-group-content.collapsed{opacity:0;margin:0;padding:0;pointer-events:none;display:none}.setting-group.main-group{padding:16px;border:none;border-bottom:1px solid var(--Border-default, #d5dce5);box-shadow:none;margin-top:4px;border-radius:8px;width:100%;position:relative;margin-bottom:8px;max-height:none;overflow:visible;max-width:100%;box-sizing:border-box;height:auto;min-height:auto;flex-shrink:0}.setting-group.main-group.collapsed{padding:0;background:transparent!important;border:none;box-shadow:none;margin:0}.setting-group.main-group.collapsed .setting-group-title.collapsed-view{height:55px;border:none;margin-bottom:8px;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group.main-group .setting-group-title h3{color:#2a3036;font-family:Satoshi;font-weight:500;line-height:20px}.setting-group-content.main-content{width:100%;border:0;box-shadow:none;padding:0;height:auto;min-height:auto;overflow:visible;flex-shrink:0}.setting-divider{height:1px;width:100%;background-color:#f2f4f7;margin:4px 0}.setting-group-content>*:last-child{margin-bottom:0}.setting-group.active{border-color:#d6bbfb;box-shadow:0 0 0 4px #7f56d91a}.setting-group-empty{color:#667085;font-style:italic;padding:12px 0;text-align:center}.setting-group-title.collapsed-view{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;height:36px;border-radius:8px;background:var(--Base-White, #fff);margin-bottom:0;position:relative;overflow:visible;cursor:pointer}.setting-group.main-group .setting-group-title.collapsed-view{height:55px;border:none;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group:not(.main-group) .setting-group-title.collapsed-view{height:36px;background:#fff;padding:14px}.setting-group-title .title-section{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.setting-group-title .group-icon{display:flex;justify-content:center;align-items:center;color:var(--Gray-500, #667085);flex-shrink:0;width:20px;height:20px}.setting-group-title.collapsed-view h3{color:#344054;font-family:Satoshi;line-height:20px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-group-title.collapsed-view .group-badge{display:flex;padding:2px 8px;justify-content:center;align-items:center;border-radius:16px;background:var(--Gray-100, #f2f4f7);color:var(--Gray-700, #344054);font-weight:500;line-height:18px;margin-left:8px}.setting-group-title .actions-section{display:flex;align-items:center;gap:8px;margin-left:12px}.setting-group-title.collapsed-view .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;color:var(--Gray-500, #667085)}.setting-group-title .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;color:var(--Gray-500, #667085)}.setting-group-title .setting-group-arrow.rotated{transform:rotate(0)}.setting-group-title.collapsed-view .info-marker{width:16px;height:16px;color:var(--Gray-400, #98a2b3);cursor:help}.setting-group-description{color:#667085;margin-bottom:8px;line-height:1.4}@media (max-width: 768px){.setting-group-title.collapsed-view{padding:10px 12px}.setting-group-title .title-section{gap:8px}.setting-group-title.collapsed-view .group-badge{display:none}}.setting-group-title.collapsed-view.striped:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--Primary-100, #f4ebff);border-radius:4px 0 0 4px}.setting-group.custom-container{border:none;box-shadow:none;margin:4px 0;padding:0;background:transparent}.setting-group.custom-container>.setting-group-title{display:none}.sg-add-button-bottom{display:flex;height:30px;min-width:64px;padding:6px 12px;justify-content:center;align-items:center;flex:1 0 0;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;line-height:20px;letter-spacing:.01em;text-align:center}.sg-add-button-bottom:hover{background:#eee}.setting-group.custom-container .setting-group-content{padding:0}.custom_class{border:0!important;box-shadow:none!important;margin:4px 0!important}.custom_class>.setting-group-title{display:none!important}.custom_class .setting-group-content{padding:0!important}.setting-group-title:focus-visible{outline:2px solid #02cc59;outline-offset:2px}.setting-group::-webkit-scrollbar,.setting-group-content::-webkit-scrollbar{width:8px;height:8px}.setting-group::-webkit-scrollbar-track,.setting-group-content::-webkit-scrollbar-track{background:#f0f2f4;border-radius:4px}.setting-group::-webkit-scrollbar-thumb,.setting-group-content::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:4px;border:2px solid transparent;background-clip:content-box}.setting-group::-webkit-scrollbar-thumb:hover,.setting-group-content::-webkit-scrollbar-thumb:hover{background-color:#98a2b3}.setting-group,.setting-group-content{scrollbar-width:thin;scrollbar-color:#c2c9d6 #f0f2f4}.tabs-settings-container{display:flex;flex-direction:column;width:100%;border-radius:8px;background:transparent;overflow:visible;position:relative;z-index:1;max-width:100%;box-sizing:border-box}.tabs-settings-container.main-group{background:#fff;box-shadow:0 1px 2px #1018280d}.tabs-header{width:100%;display:flex;padding:4px;justify-content:center;align-items:center;gap:4px;align-self:stretch;flex-shrink:0;background:#f1f3f2;position:relative;z-index:1;border-radius:400px;margin-bottom:8px}.tabs-header.main-header{background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:8px 8px 0 0;padding:8px;margin-bottom:0}.tab-button{display:flex;padding:4px 12px;justify-content:center;align-items:center;background-color:transparent;gap:8px;flex:1 0 0;border-radius:400px;color:#000000b3;font-family:Satoshi,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:12px;font-style:normal;font-weight:500;line-height:20px;box-shadow:0 0 #10182800;position:relative;z-index:1;cursor:pointer;transition:all .2s ease;outline:none}.tab-button:active{box-shadow:0 1px 2px -1px #10182805}.tab-button.active{color:#000;font-weight:700;border-radius:400px;background:#fff;box-shadow:0 4px 8px -2px #1018280a}.tab-button.active:active{box-shadow:0 2px 4px -1px #1018280a}.tab-button:focus-visible{outline:2px solid #7c3aed;outline-offset:2px}.tab-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.tab-icon svg{width:100%;height:100%}.tab-content{position:relative;overflow:visible;width:100%;z-index:1;margin-top:8px;max-width:100%;box-sizing:border-box;animation:fadeIn .2s ease-in-out}.tab-panel{display:grid;gap:8px;position:absolute;width:100%;opacity:0;pointer-events:none;overflow:visible;z-index:1;max-width:100%;box-sizing:border-box}.tab-panel.active{opacity:1;pointer-events:auto;position:relative;overflow:visible;z-index:1;max-width:100%;box-sizing:border-box}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.tabs-header{padding:3px}.tab-button{padding:3px 8px}}.tab-content>.setting-group{margin-bottom:12px}.tab-content>.setting-group:last-child{margin-bottom:0}.tabs-settings-container.main-group .setting-group-content{border-top:none;border-radius:0 0 8px 8px}.setting-group.main-group.collapsed .tabs-header,.setting-group.main-group.collapsed .setting-group,.setting-group .setting-group.collapsed .tabs-header,.tabs-settings-container.collapsed .tabs-header,.tabs-settings-container.collapsed .tab-content{display:none}.tabs-settings-container{padding:0!important;border-radius:8px;background:transparent}.tabs-settings-container>.setting-group-content{padding:0!important;gap:8px}:root{--color-border: #d5dce5;--color-bg: #f8f8f8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc;--color-btn-text: #4b4b4b;--color-bg-icon: #f2f4f7}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Satoshi,sans-serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}
|
package/package.json
CHANGED