@markopolo_ai_inc/markopolo-email-editor 1.0.7 → 1.0.8
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.
- package/README.md +164 -49
- package/lib/index.css +1 -1
- package/lib/index.js +1 -1
- package/lib/index.mjs +1 -1
- package/package.json +29 -24
package/README.md
CHANGED
|
@@ -1,94 +1,209 @@
|
|
|
1
1
|
# @markopolo_ai_inc/markopolo-email-editor
|
|
2
2
|
|
|
3
|
-
React email template editor (drag-and-drop blocks, export HTML/JSON). Built with Create React App; library build via Rollup.
|
|
3
|
+
React email template editor (drag-and-drop blocks, export HTML/JSON). Built with Create React App; **library** build via Rollup (`npm run build:lib`).
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Install (consumer app)
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
The package declares **peer dependencies** so your app supplies one copy of React, Ant Design, Font Awesome, etc. (avoids duplicate React / broken hooks).
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
10
|
npm install @markopolo_ai_inc/markopolo-email-editor react react-dom antd @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome framer-motion react-color clsx axios
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
**Optional:** install `pexels` if you use the built-in Pexels image search in the editor.
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install pexels
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Import the editor and **CSS** (required):
|
|
14
20
|
|
|
15
21
|
```js
|
|
16
|
-
import EmailEditor
|
|
22
|
+
import EmailEditor, {
|
|
23
|
+
exportTemplateJson,
|
|
24
|
+
validateExportPayload,
|
|
25
|
+
exportNormalizerToHtml,
|
|
26
|
+
TEMPLATE_DATA_SCHEMA,
|
|
27
|
+
createDefaultTemplateData,
|
|
28
|
+
validateTemplateDataShape,
|
|
29
|
+
} from '@markopolo_ai_inc/markopolo-email-editor';
|
|
17
30
|
import '@markopolo_ai_inc/markopolo-email-editor/lib/index.css';
|
|
18
|
-
|
|
19
|
-
// Use <EmailEditor defaultBlockList={...} defaultBodySettings={...} language="en" />
|
|
20
31
|
```
|
|
21
32
|
|
|
22
|
-
|
|
33
|
+
## `templateData` (variables from your product)
|
|
23
34
|
|
|
24
|
-
|
|
35
|
+
Pass live data from your backend as **`templateData`** (not `templateVariables`). The editor uses it for:
|
|
25
36
|
|
|
26
|
-
|
|
37
|
+
| Area | Path | Role |
|
|
38
|
+
| -------------------------- | -------------------------------------------------------- | --------------------------------------------------- |
|
|
39
|
+
| Product columns | `content.products`, `content.primaryProductId` | Default / assigned products in product containers |
|
|
40
|
+
| Menu blocks | `companyContext.navigation_links` | Synced when blocks use navigation links |
|
|
41
|
+
| Social blocks | `companyContext.social_links` | Synced when blocks use company social links |
|
|
42
|
+
| Placeholders / HTML export | `brandContext`, `companyContext`, `content`, `companyId` | Resolved in `exportHtml` / `exportNormalizerToHtml` |
|
|
27
43
|
|
|
28
|
-
|
|
44
|
+
**Stability helpers** (optional):
|
|
29
45
|
|
|
30
|
-
|
|
46
|
+
- `TEMPLATE_DATA_SCHEMA` — documents expected top-level keys (`content`, `companyContext`, `brandContext`, `companyId`).
|
|
47
|
+
- `createDefaultTemplateData(overrides)` — minimal empty structure to merge with your API response.
|
|
48
|
+
- `validateTemplateDataShape(data)` — lightweight dev check; returns `{ ok, warnings }` (does not block the editor).
|
|
31
49
|
|
|
32
|
-
|
|
50
|
+
Example:
|
|
33
51
|
|
|
34
|
-
|
|
52
|
+
```js
|
|
53
|
+
const templateData = {
|
|
54
|
+
content: {
|
|
55
|
+
products: [
|
|
56
|
+
/* { id, name, description, image, link, price, currency, old_price, new_price } */
|
|
57
|
+
],
|
|
58
|
+
primaryProductId: 'product-1',
|
|
59
|
+
},
|
|
60
|
+
companyContext: {
|
|
61
|
+
name: 'Acme',
|
|
62
|
+
website: 'https://example.com',
|
|
63
|
+
navigation_links: [{ label: 'Shop', url: 'https://example.com/shop' }],
|
|
64
|
+
social_links: { facebook: 'https://facebook.com/...' },
|
|
65
|
+
},
|
|
66
|
+
brandContext: {
|
|
67
|
+
brand_color: '#263D2D',
|
|
68
|
+
logo_url: 'https://...',
|
|
69
|
+
tagline: 'Your tagline',
|
|
70
|
+
heroBanner: 'https://...',
|
|
71
|
+
footerBanner: 'https://...',
|
|
72
|
+
},
|
|
73
|
+
companyId: 'uuid-here',
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
<EmailEditor
|
|
77
|
+
ref={editorRef}
|
|
78
|
+
defaultBlockList={templateJson.blockList}
|
|
79
|
+
defaultBodySettings={templateJson.bodySettings}
|
|
80
|
+
aiContentRefs={templateJson.aiContentRefs}
|
|
81
|
+
templateData={templateData}
|
|
82
|
+
language='en'
|
|
83
|
+
/>;
|
|
84
|
+
```
|
|
35
85
|
|
|
36
|
-
|
|
86
|
+
## Export JSON from your app (no Dashboard `Header`)
|
|
37
87
|
|
|
38
|
-
|
|
88
|
+
Dashboard UI (`src/pages/Dashboard/Header.js`) is **not** part of the published API. Export from your product using a **ref** plus **`exportTemplateJson`**:
|
|
89
|
+
|
|
90
|
+
```js
|
|
91
|
+
import { useRef } from 'react';
|
|
92
|
+
import EmailEditor, { exportTemplateJson } from '@markopolo_ai_inc/markopolo-email-editor';
|
|
93
|
+
|
|
94
|
+
function MyScreen() {
|
|
95
|
+
const editorRef = useRef(null);
|
|
96
|
+
|
|
97
|
+
const handleSave = () => {
|
|
98
|
+
const { payload, issues } = exportTemplateJson(editorRef, { validate: true });
|
|
99
|
+
const errors = issues.filter((i) => i.severity === 'error');
|
|
100
|
+
if (errors.length > 0) {
|
|
101
|
+
// Block save or show your own modal
|
|
102
|
+
console.warn(errors);
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
// payload: { blockList, bodySettings, aiContentRefs }
|
|
106
|
+
await fetch('/api/templates', {
|
|
107
|
+
method: 'POST',
|
|
108
|
+
headers: { 'Content-Type': 'application/json' },
|
|
109
|
+
body: JSON.stringify(payload),
|
|
110
|
+
});
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
return (
|
|
114
|
+
<>
|
|
115
|
+
<button type="button" onClick={handleSave}>Save template</button>
|
|
116
|
+
<EmailEditor ref={editorRef} defaultBlockList={...} templateData={...} />
|
|
117
|
+
</>
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
```
|
|
39
121
|
|
|
40
|
-
|
|
122
|
+
- `exportTemplateJson(ref, { validate: false })` — skip validation (same shape as `ref.current.exportJson()` plus `issues: []`).
|
|
123
|
+
- Imperative API on the ref (unchanged): `ref.current.exportJson()`, `ref.current.exportHtml()`.
|
|
41
124
|
|
|
42
|
-
|
|
43
|
-
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
|
125
|
+
### `validateExportPayload`
|
|
44
126
|
|
|
45
|
-
|
|
46
|
-
You may also see any lint errors in the console.
|
|
127
|
+
Pure function over `{ blockList, bodySettings }` — same rules as the old Dashboard export modal. Use it if you build JSON yourself:
|
|
47
128
|
|
|
48
|
-
|
|
129
|
+
```js
|
|
130
|
+
import { validateExportPayload } from '@markopolo_ai_inc/markopolo-email-editor';
|
|
49
131
|
|
|
50
|
-
|
|
51
|
-
|
|
132
|
+
const issues = validateExportPayload({ blockList, bodySettings });
|
|
133
|
+
```
|
|
52
134
|
|
|
53
|
-
|
|
135
|
+
## Custom variable definitions
|
|
54
136
|
|
|
55
|
-
|
|
56
|
-
It correctly bundles React in production mode and optimizes the build for the best performance.
|
|
137
|
+
Override default variable metadata (from internal `variableDefinitions.json`):
|
|
57
138
|
|
|
58
|
-
|
|
59
|
-
|
|
139
|
+
```js
|
|
140
|
+
const customVariableDefinitions = {
|
|
141
|
+
global: [
|
|
142
|
+
{
|
|
143
|
+
key: 'CompanyName',
|
|
144
|
+
label: 'Company Name',
|
|
145
|
+
labelKey: 'variable_company_name',
|
|
146
|
+
source: 'company',
|
|
147
|
+
type: 'text',
|
|
148
|
+
token: '{{CompanyName}}',
|
|
149
|
+
},
|
|
150
|
+
],
|
|
151
|
+
product: [
|
|
152
|
+
{
|
|
153
|
+
key: 'ProductName',
|
|
154
|
+
label: 'Product Name',
|
|
155
|
+
labelKey: 'variable_product_name',
|
|
156
|
+
source: 'product',
|
|
157
|
+
type: 'text',
|
|
158
|
+
token: '{{ProductName}}',
|
|
159
|
+
},
|
|
160
|
+
],
|
|
161
|
+
discount: [],
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
<EmailEditor
|
|
165
|
+
defaultBlockList={template}
|
|
166
|
+
templateData={templateData}
|
|
167
|
+
variableDefinitions={customVariableDefinitions}
|
|
168
|
+
/>;
|
|
169
|
+
```
|
|
60
170
|
|
|
61
|
-
|
|
171
|
+
## JSON → full HTML (server or client)
|
|
62
172
|
|
|
63
|
-
|
|
173
|
+
```js
|
|
174
|
+
import { exportNormalizerToHtml } from '@markopolo_ai_inc/markopolo-email-editor';
|
|
175
|
+
|
|
176
|
+
const htmlString = exportNormalizerToHtml({
|
|
177
|
+
blockList,
|
|
178
|
+
bodySettings,
|
|
179
|
+
templateData,
|
|
180
|
+
});
|
|
181
|
+
const blob = new Blob([htmlString], { type: 'text/html' });
|
|
182
|
+
```
|
|
64
183
|
|
|
65
|
-
|
|
184
|
+
Pass `templateData` when your HTML must resolve `{{placeholders}}` the same way as the editor preview.
|
|
66
185
|
|
|
67
|
-
|
|
186
|
+
## Template input shape for `defaultBlockList`
|
|
68
187
|
|
|
69
|
-
|
|
188
|
+
You can pass either:
|
|
70
189
|
|
|
71
|
-
|
|
190
|
+
1. Legacy: an **array** of blocks as `defaultBlockList={blocks}`.
|
|
191
|
+
2. Exported object: `defaultBlockList={{ blockList, bodySettings, aiContentRefs }}` (or `blocks` instead of `blockList`).
|
|
72
192
|
|
|
73
|
-
|
|
193
|
+
---
|
|
74
194
|
|
|
75
|
-
##
|
|
195
|
+
## Scripts (this repo)
|
|
76
196
|
|
|
77
|
-
|
|
197
|
+
### Build the library (npm publish)
|
|
78
198
|
|
|
79
|
-
|
|
199
|
+
- **`npm run build:lib`** — Rollup → `lib/index.js`, `lib/index.mjs`, `lib/index.css`.
|
|
80
200
|
|
|
81
|
-
|
|
82
|
-
import { exportNormalizerToHtml } from "../components/EmailEditor/utils/dataToHTML";
|
|
201
|
+
### Local demo app
|
|
83
202
|
|
|
84
|
-
|
|
85
|
-
const htmlString = exportNormalizerToHtml(jsonString);
|
|
203
|
+
- **`npm run dev`** / **`npm start`** — CRA dev server.
|
|
86
204
|
|
|
87
|
-
|
|
88
|
-
const htmlString = exportNormalizerToHtml({ blockList, bodySettings });
|
|
205
|
+
Install in this repo: **`npm install`** (devDependencies satisfy peers for the demo).
|
|
89
206
|
|
|
90
|
-
|
|
91
|
-
const blob = new Blob([htmlString], { type: "text/html" });
|
|
92
|
-
```
|
|
207
|
+
## Email template: JSON to HTML (internals)
|
|
93
208
|
|
|
94
|
-
`
|
|
209
|
+
`exportNormalizerToHtml` lives in the editor bundle; prefer importing it from the package root as shown above rather than deep paths into `src/`.
|
package/lib/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import "./RichText.css";@import "./ImageBlock.css";@import "./Sidebar.css";@import "./Preview.css";@import "./Header.css";@import "./Columns.css";@import "./RightSettings.css";.email-editor *{box-sizing:border-box}:root{--ee-bg:#0a0a0a;--ee-foreground:#fafafa;--ee-primary:#d8fe91;--ee-primary-foreground:#171717;--ee-card:#171717;--ee-muted:#262626;--ee-muted-foreground:#a1a1a1;--ee-border:#282828;--ee-border-width:1px;--ee-radius:0.5rem;--ee-shadow:0px 1px 3px 0px #00000040,0px 1px 2px 0px #00000026;--ee-shadow-sm:0px 1px 2px 0px #0003;--block-active-border:var(--ee-primary);--block-hover-border:#b8e67a;--block-empty-content-color:#374151;--block-empty-content-background:#d8fe911f;--start-content-background:var(--ee-muted);--start-content-font-color:var(--ee-muted-foreground);--left-sidebar-background:var(--ee-muted);--left-sidebar-tabs-background:var(--ee-card);--left-sidebar-tab-color:var(--ee-foreground);--left-sidebar-tab-hover-background:#404040;--left-sidebar-tab-active-color:var(--ee-primary);--rich-text-icon:#d8fe9159;--tools-font-color:var(--ee-primary-foreground);--option-hover-color:#d8fe9126;--border-color:var(--ee-border);--header-bg-color:var(--ee-card);--header-icon-hover-color:var(--ee-foreground);--header-icon-active-color:var(--ee-primary);--header-icon-disabled-color:var(--ee-muted-foreground);--header-drawer-close-bg-color:var(--ee-muted-foreground);--header-drawer-close-color:var(--ee-foreground);--header-drawer-close-hover-bg-color:#404040;--header-drawer-head-bg-color:var(--ee-muted);--right-settings-font-color:var(--ee-foreground);--right-settings-title-font-color:var(--ee-muted-foreground);--right-settings-block-title-font-color:var(--ee-foreground);--right-settings-block-title-background-color:var(--ee-muted);--column-background:var(--ee-muted);--column-active-border:var(--ee-primary);--column-un-active-border:var(--ee-border);--column-divider-color:var(--ee-muted-foreground);--align-style-item-active-color:var(--ee-primary);--align-style-item-un-active-color:var(--ee-border);--blue-500:var(--ee-primary);--gray-400:var(--ee-muted-foreground);--slate-100:var(--ee-muted);--red-100:#f8717133;--red-500:#f87070;color-scheme:dark}img{max-width:100%}.hover-visible{height:100%;position:absolute;width:100%}.font-semibold{font-weight:600}.width-full{width:100%}.margin-y-30{margin-bottom:30px;margin-top:30px}.margin-top-6{margin-top:6px}.margin-top-12{margin-top:12px}.margin-top-18{margin-top:18px}.margin-top-32{margin-top:32px}.height-full{height:100%}.relative{position:relative}.absolute{position:absolute}.select-none{user-select:none}.margin-auto{margin:auto}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.inline-block{display:inline-block}.flex{display:flex}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.items-center{align-items:center}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.cursor-grab{cursor:grab}.border-transparent{border-color:#0000}ol{list-style:auto}ol,ul{margin-left:11px}ul{list-style:disc}a:hover{text-decoration:underline}@keyframes shake{0%,to{transform:translateX(0) rotate(0)}30%,5%,50%,70%,90%{transform:rotate(5deg)}20%,40%,60%,80%{transform:rotate(-5deg)}}.ant-btn-primary{background-color:var(--ee-primary);border-color:var(--ee-primary)}.block-style_settings-collapse .ant-collapse-header{background-color:var(--start-content-background);color:var(--start-content-font-color)!important;font-weight:700}.block-style_settings-collapse .ant-collapse-item{margin-bottom:12px;padding:0}.block-style_settings-collapse .ant-collapse-content-box{padding:0!important}.ee-modal-dark .ant-modal-content{background-color:var(--ee-card)!important;border:var(--ee-border-width) solid var(--ee-border);border-radius:var(--ee-radius);box-shadow:var(--ee-shadow)}.ee-modal-dark .ant-modal-header{background-color:var(--ee-card)!important;border-bottom:var(--ee-border-width) solid var(--ee-border);border-radius:var(--ee-radius) var(--ee-radius) 0 0}.ee-modal-dark .ant-modal-title{color:var(--ee-foreground)!important}.ee-modal-dark .ant-modal-body{background-color:var(--ee-card)!important;color:var(--ee-foreground)}.ee-modal-dark .ant-modal-body .column-modal-context,.ee-modal-dark .ant-modal-body p{color:var(--ee-foreground)}.ee-modal-dark .ant-modal-close-x{color:var(--ee-muted-foreground)}.ee-modal-dark .ant-modal-close-x:hover{color:var(--ee-foreground)}.ee-modal-dark .ant-modal-footer{background-color:var(--ee-card)!important;border-top:var(--ee-border-width) solid var(--ee-border)}.ee-modal-dark .ant-modal-footer .ant-btn-default{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important;color:var(--ee-foreground)}.ee-modal-dark .ant-modal-footer .ant-btn-default:hover{border-color:var(--ee-primary);color:var(--ee-primary)}.ee-modal-dark .ant-modal-footer .ant-btn-primary{background-color:var(--ee-primary)!important;border-color:var(--ee-primary)!important;color:var(--ee-primary-foreground)!important}.ee-modal-dark .ant-modal-footer .ant-btn-primary:hover{background-color:#b8e67a!important;border-color:#b8e67a!important;color:var(--ee-primary-foreground)!important}.ee-modal-dark .ant-modal-body .ant-input,.ee-modal-dark .ant-modal-body .ant-input-affix-wrapper{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important;color:var(--ee-foreground)!important}.ee-modal-dark .ant-modal-body .ant-input-affix-wrapper-focused,.ee-modal-dark .ant-modal-body .ant-input:focus{border-color:var(--ee-primary)!important;box-shadow:0 0 0 1px var(--ee-primary)!important}.ee-modal-dark .ant-modal-body .ant-input-group-addon{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important;color:var(--ee-foreground)}.ee-modal-dark .export-validation-errors-heading{color:var(--red-500)}.ee-modal-dark .export-validation-warnings-heading{color:#fbbf24}.ee-modal-dark .export-validation-info-heading{color:#60a5fa}.ee-modal-dark .export-validation-location{color:var(--ee-muted-foreground)}.email-editor .right-settings .ant-input-number-group-addon,.email-editor .right-settings .ant-input-number-group-wrapper .ant-input-number-group-addon{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important;color:var(--ee-foreground)!important}.email-editor .right-settings .ant-input-number-group-addon *{color:var(--ee-foreground)!important}
|
|
1
|
+
.email-editor *{box-sizing:border-box}:root{--ee-bg:#0a0a0a;--ee-foreground:#fafafa;--ee-primary:#d8fe91;--ee-primary-foreground:#171717;--ee-card:#171717;--ee-muted:#262626;--ee-muted-foreground:#a1a1a1;--ee-border:#282828;--ee-border-width:1px;--ee-radius:0.5rem;--ee-shadow:0px 1px 3px 0px #00000040,0px 1px 2px 0px #00000026;--ee-shadow-sm:0px 1px 2px 0px #0003;--block-active-border:#1677d2;--block-hover-border:#7eaedf;--block-empty-content-color:#374151;--block-empty-content-background:#1677d21f;--start-content-background:var(--ee-muted);--start-content-font-color:var(--ee-muted-foreground);--left-sidebar-background:var(--ee-muted);--left-sidebar-tabs-background:var(--ee-card);--left-sidebar-tab-color:var(--ee-foreground);--left-sidebar-tab-hover-background:#404040;--left-sidebar-tab-active-color:var(--ee-primary);--rich-text-icon:#1677d259;--tools-font-color:#fff;--option-hover-color:#1677d226;--border-color:var(--ee-border);--header-bg-color:var(--ee-card);--header-icon-hover-color:var(--ee-foreground);--header-icon-active-color:var(--ee-primary);--header-icon-disabled-color:var(--ee-muted-foreground);--header-drawer-close-bg-color:var(--ee-muted-foreground);--header-drawer-close-color:var(--ee-foreground);--header-drawer-close-hover-bg-color:#404040;--header-drawer-head-bg-color:var(--ee-muted);--right-settings-font-color:var(--ee-foreground);--right-settings-title-font-color:var(--ee-muted-foreground);--right-settings-block-title-font-color:var(--ee-foreground);--right-settings-block-title-background-color:var(--ee-muted);--column-background:var(--ee-muted);--column-active-border:var(--ee-primary);--column-un-active-border:var(--ee-border);--column-divider-color:var(--ee-muted-foreground);--align-style-item-active-color:var(--ee-primary);--align-style-item-un-active-color:var(--ee-border);--blue-500:var(--ee-primary);--gray-400:var(--ee-muted-foreground);--slate-100:var(--ee-muted);--red-100:#f8717133;--red-500:#f87070;color-scheme:dark}img{max-width:100%}.hover-visible{height:100%;position:absolute;width:100%}.font-semibold{font-weight:600}.margin-y-30{margin-bottom:30px;margin-top:30px}.margin-top-6{margin-top:6px}.margin-top-12{margin-top:12px}.margin-top-18{margin-top:18px}.margin-top-32{margin-top:32px}.height-full{height:100%}.relative{position:relative}.absolute{position:absolute}.select-none{user-select:none}.margin-auto{margin:auto}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.inline-block{display:inline-block}.flex{display:flex}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.items-center{align-items:center}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.cursor-grab{cursor:grab}.border-transparent{border-color:#0000}ol{list-style:auto}ol,ul{margin-left:11px}ul{list-style:disc}a:hover{text-decoration:underline}@keyframes shake{0%,to{transform:translateX(0) rotate(0)}30%,5%,50%,70%,90%{transform:rotate(5deg)}20%,40%,60%,80%{transform:rotate(-5deg)}}.ant-btn-primary{background-color:var(--ee-primary);border-color:var(--ee-primary)}.block-style_settings-collapse .ant-collapse-header{background-color:var(--start-content-background);color:var(--start-content-font-color)!important;font-weight:700}.block-style_settings-collapse .ant-collapse-item{margin-bottom:12px;padding:0}.block-style_settings-collapse .ant-collapse-content-box{padding:0!important}.ee-modal-dark .ant-modal-content{background-color:var(--ee-card)!important;border:var(--ee-border-width) solid var(--ee-border);border-radius:var(--ee-radius);box-shadow:var(--ee-shadow)}.ee-modal-dark .ant-modal-header{background-color:var(--ee-card)!important;border-bottom:var(--ee-border-width) solid var(--ee-border);border-radius:var(--ee-radius) var(--ee-radius) 0 0}.ee-modal-dark .ant-modal-title{color:var(--ee-foreground)!important}.ee-modal-dark .ant-modal-body{background-color:var(--ee-card)!important;color:var(--ee-foreground)}.ee-modal-dark .ant-modal-body .column-modal-context,.ee-modal-dark .ant-modal-body p{color:var(--ee-foreground)}.ee-modal-dark .ant-modal-close-x{color:var(--ee-muted-foreground)}.ee-modal-dark .ant-modal-close-x:hover{color:var(--ee-foreground)}.ee-modal-dark .ant-modal-footer{background-color:var(--ee-card)!important;border-top:var(--ee-border-width) solid var(--ee-border)}.ee-modal-dark .ant-modal-footer .ant-btn-default{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important;color:var(--ee-foreground)}.ee-modal-dark .ant-modal-footer .ant-btn-default:hover{border-color:var(--ee-primary);color:var(--ee-primary)}.ee-modal-dark .ant-modal-footer .ant-btn-primary{background-color:var(--ee-primary)!important;border-color:var(--ee-primary)!important;color:var(--ee-primary-foreground)!important}.ee-modal-dark .ant-modal-footer .ant-btn-primary:hover{background-color:#b8e67a!important;border-color:#b8e67a!important;color:var(--ee-primary-foreground)!important}.ee-modal-dark .ant-modal-body .ant-input,.ee-modal-dark .ant-modal-body .ant-input-affix-wrapper{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important;color:var(--ee-foreground)!important}.ee-modal-dark .ant-modal-body .ant-input-affix-wrapper-focused,.ee-modal-dark .ant-modal-body .ant-input:focus{border-color:var(--ee-primary)!important;box-shadow:0 0 0 1px var(--ee-primary)!important}.ee-modal-dark .ant-modal-body .ant-input-group-addon{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important;color:var(--ee-foreground)}.ee-modal-dark .export-validation-errors-heading{color:var(--red-500)}.ee-modal-dark .export-validation-warnings-heading{color:#fbbf24}.ee-modal-dark .export-validation-info-heading{color:#60a5fa}.ee-modal-dark .export-validation-location{color:var(--ee-muted-foreground)}.email-editor .right-settings .ant-input-number-group-addon,.email-editor .right-settings .ant-input-number-group-wrapper .ant-input-number-group-addon{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important;color:var(--ee-foreground)!important}.email-editor .right-settings .ant-input-number-group-addon *{color:var(--ee-foreground)!important}.rich-text{position:absolute;z-index:1060}.rich-text-tools{align-items:center;background-color:var(--ee-card);border:var(--ee-border-width) solid var(--ee-border);border-radius:var(--ee-radius);box-shadow:var(--ee-shadow);display:flex;max-width:375px;min-height:40px;padding:6px}.rich-text-tools-body{display:flex;flex-wrap:wrap}.rich-text-tools-button-icon{color:var(--ee-foreground);font-size:14px;user-select:none}.rich-text-tools-button{background-color:initial;border:none;border-radius:calc(var(--ee-radius) - 2px);cursor:pointer;height:30px;line-height:30px;margin:3px;text-align:center;transition:all .12s linear;width:30px}.rich-text-tools-button-active,.rich-text-tools-button:hover{background:var(--rich-text-icon)}.richText-select{color:var(--ee-foreground);font-size:12px;margin:0 12px;position:relative}.richText-select,.richText-select-select{align-items:center;display:flex;user-select:none}.richText-select-select{cursor:pointer;justify-content:space-between;width:100%}.richText-select-option{background-color:var(--ee-card);border:var(--ee-border-width) solid var(--ee-border);border-radius:var(--ee-radius);box-shadow:var(--ee-shadow);cursor:pointer;display:none;height:200px;overflow:auto;padding:3px 0;position:absolute;top:100%;width:150px;z-index:1071}.richText-mask{display:none;height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:1070}.richText-select-icon{margin-left:6px}.richText-select-option::-webkit-scrollbar{width:4px}.richText-select-option::-webkit-scrollbar-thumb{background:#0003;border-radius:10px;box-shadow:inset 0 0 5px #0003}.richText-select-option_item{color:var(--ee-foreground);cursor:pointer;font-size:14px;line-height:14px;padding:12px 8px;transition:all .12s linear}.richText-select-option_item-checked,.richText-select-option_item:hover{background-color:var(--option-hover-color)}@keyframes move{0%{display:block;height:0}to{height:200px}}@keyframes leave{0%{height:200px}to{display:none;height:0}}.input-wrapper{align-items:center;display:flex;gap:8px}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:initial;border:none;cursor:pointer;height:28px;width:40px}input[type=color]::-webkit-color-swatch{border-radius:15px;box-shadow:0 0 0 2px var(--ee-card),0 0 0 3px var(--ee-border);display:block;height:auto;opacity:1;width:auto}input[type=color]::-moz-color-swatch{border-radius:15px;box-shadow:0 0 0 2px var(--ee-card),0 0 0 3px var(--ee-border);display:block;height:auto;opacity:1;width:auto}.chrome-picker{box-shadow:none!important}.rich_text-font_color{border:var(--ee-border-width) solid var(--border-color);border-radius:2px}.rich_text-font_color-content{border-radius:2px;height:10px;width:36px}.empty-image{background-color:var(--block-empty-content-background);border:var(--ee-border-width) solid var(--block-empty-content-color);display:inline-block;padding:24px;text-align:center}.empty-image-icon{color:var(--block-empty-content-color);font-size:48px}.empty-image-variable-label{color:var(--block-empty-content-color);display:block;font-size:12px}.email-editor{height:100%;min-width:1280px}.email-editor-main{display:flex;height:100%;justify-content:space-between}.photo-container{flex:1;height:100%;overflow:hidden;padding:18px}.margin-bottom-12{margin-bottom:12px}.pexels-link{color:var(--ee-muted-foreground);cursor:pointer;font-size:12px;line-height:15px;margin-top:12px}.pexels-link:hover{color:var(--ee-foreground);text-decoration:underline}.photos-body{height:calc(100% - 58px);position:relative}.photos-container{display:grid;gap:6px;grid-template-columns:repeat(2,1fr);height:100%;overflow:auto;padding-right:18px}.photo-item{cursor:grab;margin-bottom:6px;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.width-full{width:100%}.scroll-loading-context{bottom:-6px;color:var(--ee-muted-foreground);left:0;position:absolute;right:0;text-align:center;width:100%}.loading-spinner{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:10}.text-18{font-size:18px;line-height:24px}.side-bar-icon-title{font-weight:600;margin-top:3px}.side-bar-blocks,.side-bar-content{flex:1;overflow:hidden}.side-bar-blocks{height:100%}.side-bar-blocks-container{display:grid;gap:10px;grid-template-columns:repeat(3,1fr);padding:12px}.side-bar-blocks-item{border:var(--ee-border-width) solid #0000;height:96px;position:relative;width:100%}.side-bar{background:var(--left-sidebar-background);border-right:var(--ee-border-width) solid var(--border-color);display:flex;height:100%;min-width:380px;width:380px}.side-bar-tabs{background:var(--left-sidebar-tabs-background)}.side-bar-item-default{cursor:pointer;padding:12px 18px;text-align:center;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);user-select:none}.side-bar-tab-item{color:var(--left-sidebar-tab-color)}.side-bar-tab-item:hover{background-color:var(--left-sidebar-tab-hover-background)}.side-bar-tab-item-active{background:var(--left-sidebar-tab-active-color);color:var(--left-sidebar-tabs-background)}.sidebar-block{align-items:center;background-color:var(--ee-card);border:var(--ee-border-width) solid var(--ee-border);border-radius:var(--ee-radius);color:var(--start-content-font-color);cursor:-webkit-grab;display:flex;flex-direction:column;height:100%;justify-content:center;transition-duration:.15s;transition-property:border-color,box-shadow;user-select:none}.sidebar-block-icon{font-size:22.5px;line-height:27px;margin-bottom:9px}.sidebar-block-text{font-size:13.5px;line-height:21px}.sidebar-block:hover{border-color:var(--ee-primary)}.sidebar-block-move{animation:none;background-color:initial}.sidebar-block-move:hover{animation:shake 0s linear 1s infinite normal none;box-shadow:none}.preview-main{background-color:var(--ee-bg);display:flex;flex:1;flex-direction:column}.preview-content{border:var(--ee-border-width) solid var(--border-color);border-radius:var(--ee-radius);box-shadow:var(--ee-shadow-sm);margin:0 auto;min-height:100%;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}#preview{background-color:var(--ee-muted);background-image:linear-gradient(45deg,var(--ee-card) 25%,#0000 25%),linear-gradient(-45deg,var(--ee-card) 25%,#0000 25%),linear-gradient(45deg,#0000 75%,var(--ee-card) 75%),linear-gradient(-45deg,#0000 75%,var(--ee-card) 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;flex:1;height:100%;inset:0 425px 0 0;overflow:auto;padding:24px 18px;transition:right .3s ease 0s}.header{align-items:center;background-color:var(--header-bg-color);border-bottom:var(--ee-border-width) solid var(--border-color);display:flex;justify-content:space-between;padding:12px 30px}.header-box{width:33.3333%}.header-icon{font-size:18px;line-height:24px}.header-icon,.header-icon-small{cursor:pointer;margin-right:24px}.header-icon-small{font-size:15px;line-height:21px}.header-icon-history{font-size:18px;line-height:24px}.header-icon-history:first-child{margin-right:24px}.header-icon-history_active{color:var(--header-icon-active-color);cursor:pointer}.header-icon-history_disabled{color:var(--header-icon-disabled-color);cursor:not-allowed}.header-icon-small:hover,.header-icon:hover{color:var(--header-icon-hover-color)}.header-icon_active{color:var(--header-icon-active-color)}.header-icon_disabled{color:var(--header-icon-disabled-color)}.header-drawer-close{align-items:center;background-color:var(--header-drawer-close-bg-color);border-radius:100%;color:var(--header-drawer-close-color);cursor:pointer;display:inline-flex;height:24px;justify-content:center;padding:3px;width:24px}.header-drawer-close:hover{background-color:var(--header-drawer-close-hover-bg-color)}.header-drawer-body{border:var(--ee-border-width) solid var(--border-color);border-radius:var(--ee-radius);box-shadow:var(--ee-shadow);height:100%;margin:0 auto;transition:all .3s}.header-drawer-head{background-color:var(--header-drawer-head-bg-color);border-bottom:var(--ee-border-width) solid var(--border-color);border-top-left-radius:var(--ee-radius);border-top-right-radius:var(--ee-radius);display:flex;gap:6px;padding:12px}.header-drawer-head-item{border-radius:100%;height:12px;width:12px}.header-drawer-head-item:first-child{background-color:#dc2626}.header-drawer-head-item:nth-child(2){background-color:#fbbf24}.header-drawer-head-item:nth-child(3){background-color:#10b981}.header-drawer-content{height:calc(100% - 40px);width:100%}.header-drawer-iframe{border:none;height:100%;width:100%}.ee-preview-drawer.ant-drawer .ant-drawer-content{background-color:var(--ee-bg)!important}.ee-preview-drawer.ant-drawer .ant-drawer-wrapper-body{background-color:var(--ee-bg)}.ee-preview-drawer.ant-drawer .ant-drawer-header{background-color:var(--ee-card)!important;border-bottom:var(--ee-border-width) solid var(--ee-border)!important;color:var(--ee-foreground);padding:12px 24px}.ee-preview-drawer.ant-drawer .ant-drawer-header-title{color:var(--ee-foreground)}.ee-preview-drawer.ant-drawer .ant-drawer-body{align-items:center;background-color:var(--ee-bg)!important;display:flex;flex:1;justify-content:center;padding:16px}.ee-preview-drawer .header-icon{color:var(--ee-muted-foreground)}.ee-preview-drawer .header-icon:hover{color:var(--ee-foreground)}.ee-preview-drawer .header-icon_active{color:var(--ee-primary)}.ee-preview-drawer .header-icon_disabled{color:var(--ee-muted-foreground)}.ee-preview-drawer .header-drawer-body{background-color:var(--ee-card)}.ee-preview-drawer .header-drawer-head{background-color:var(--ee-muted)}.hover-visible:after{bottom:0;content:"";left:0;opacity:0;outline:2px solid var(--block-active-border);outline-offset:-2px;pointer-events:none;position:absolute;right:0;top:0;visibility:visible;z-index:100}.hover-visible:hover:after{opacity:1;outline:2px solid var(--block-hover-border)}.block-focus>.hover-visible:after{opacity:1;outline:2px solid var(--block-active-border)}.mobile-block-focus>.hover-visible:after{margin-left:-50px;margin-right:-50px}.mobile-block-focus .block-delete,.mobile-block-focus .block-move{margin-right:-50px}.block-content{display:flex;flex-wrap:wrap;height:100%;margin:0 auto;max-width:100%}.block-focus .block-delete,.block-focus .block-move{visibility:visible}.block-delete{bottom:-36px;right:0}.block-delete,.block-move{background-color:var(--block-active-border);color:var(--tools-font-color);cursor:pointer;height:30px;line-height:30px;text-align:center;visibility:hidden;width:30px;z-index:120}.block-move{border-radius:25px;bottom:50%;font-size:16px;right:-14px;transform:translateY(50%)}.block-move-content{height:50%;z-index:100}.block-move-content-top:after{bottom:50%;content:"";position:absolute;top:0;width:100%;z-index:104}.block-move-content-bottom:after{bottom:0;content:"";position:absolute;top:50%;width:100%;z-index:104}.block-move-top{top:-2px}.block-move-bottom,.block-move-top{align-items:center;background-color:var(--block-active-border);display:flex;height:4px;justify-content:center;visibility:hidden;width:100%;z-index:103}.block-move-bottom{bottom:-2px}.block-tools-drag_here{background-color:var(--block-active-border);border-radius:25px;color:var(--tools-font-color);padding:6px 12px;position:absolute;text-align:center;z-index:98}.block-empty-content{background-color:var(--block-empty-content-background);border:1px dashed var(--block-empty-content-color);box-sizing:border-box;color:var(--block-empty-content-color);height:96px;padding:8px;position:relative;text-align:center}.block-empty-content,.block-empty-content-tools{align-items:center;display:flex;justify-content:center}.block-empty-content-tools{background-color:var(--block-empty-content-color);bottom:0;color:var(--tools-font-color);left:0;opacity:0;position:absolute;right:0;top:0;z-index:110}.start-to-add{align-items:center;background-color:var(--start-content-background);color:var(--start-content-font-color);display:flex;height:50px;justify-content:center;margin:auto;width:100}.block-item{flex:1;position:relative}.block-item-container{--nested-gap:12px;--nested-width:91%;--nested-body-padding:6px;--container-highlight-primary:#1677d2;--container-highlight-secondary:#7eaedf;box-sizing:border-box;flex:0 0 auto;margin:0 auto;max-width:100%;min-width:0;transition:width .16s ease,margin .16s ease;width:var(--nested-width)}.block-item-container>.relative{width:100%}.block-item-container>.relative>.block-item-tools:after{box-shadow:inset 0 0 0 1px #1677d22e;outline-color:var(--container-highlight-primary)}.block-item-tools,.block-item-tools:after{bottom:0;left:0;position:absolute;right:0;top:0}.block-item-tools:after{content:"";opacity:0;outline:2px solid var(--block-active-border);outline-offset:-1.5px;visibility:visible;z-index:100}.block-item-tools:hover:after{opacity:.9}.block-item-focus>.relative>.block-item-tools:after{opacity:1;outline:2px solid var(--block-active-border)}.block-item-container[data-hovered]>.relative>.block-item-tools:after,.block-item-focus.block-item-container>.relative>.block-item-tools:after{box-shadow:inset 0 0 0 1px #1677d22e;outline-color:var(--container-highlight-primary)}.block-item-delete{right:0}.block-item-delete,.block-item-parent{background-color:var(--block-active-border);bottom:-36px;color:var(--tools-font-color);cursor:pointer;height:30px;line-height:30px;text-align:center;visibility:hidden;width:30px;z-index:120}.block-item-parent{right:36px}.block-item-move{background-color:var(--block-active-border);border-radius:25px;bottom:50%;color:var(--tools-font-color);cursor:pointer;font-size:16px;height:30px;line-height:30px;right:-14px;text-align:center;transform:translateY(50%);visibility:hidden;width:30px;z-index:120}.block-item-focus>.relative>.block-item-tools .block-item-delete,.block-item-focus>.relative>.block-item-tools .block-item-move,.block-item-focus>.relative>.block-item-tools .block-item-parent{visibility:visible}.text-block,.text-content_editable{direction:ltr;unicode-bidi:isolate}.text-block{border:none;flex:1;position:relative;z-index:101}.text-block:focus-visible{outline:unset}.column-item{background-color:var(--column-background);border-radius:var(--ee-radius);border-style:solid;border-width:var(--ee-border-width);cursor:pointer;display:flex;height:36px;margin-top:12px;width:100%}.column-item-active{border-color:var(--column-active-border)}.column-item-un_active{border-color:var(--column-un-active-border)}.column-item-un_active:hover{border-color:var(--ee-primary);box-shadow:0 3px 12px 0 #1677d233}.column-item-border-right{border-right-style:solid;border-right-width:var(--ee-border-width)}.column-item .column-item-border-right{border-right-color:var(--column-divider-color)!important}.column-modal-context{font-weight:600;margin:0 3px}.block-item-container-body{border:1px dashed #ffffff14;border-radius:var(--ee-radius);box-sizing:border-box;min-height:48px}.block-item-container:has(.block-item-container[data-hovered])>.relative>.block-item-tools:after{box-shadow:inset 0 0 0 1px #7eaedf1f;opacity:.9;outline-color:var(--container-highlight-secondary)}.block-item-container[data-hovered]>.relative>.block-item-tools:after{box-shadow:inset 0 0 0 1px #1677d22e;opacity:1;outline-color:var(--container-highlight-primary)}.block-item-container:has(.block-item-focus.block-item-container)>.relative>.block-item-tools:after,.block-item-container:has(.block-item-focus:not(.block-item-container))>.relative>.block-item-tools:after{box-shadow:inset 0 0 0 1px #7eaedf1f;opacity:.9;outline-color:var(--container-highlight-secondary)}.block:not(.block-focus):has(.block-item-container[data-hovered])>.hover-visible:after,.block:not(.block-focus):has(.block-item-focus.block-item-container)>.hover-visible:after,.block:not(.block-focus):has(.block-item-focus:not(.block-item-container))>.hover-visible:after{opacity:.3}.right-settings{background-color:var(--ee-bg);border-left:var(--ee-border-width) solid var(--border-color);height:100%;min-width:320px;overflow:auto;padding:24px;transition:box-shadow .2s ease;width:320px}.right-setting-block-title{border-left:3px solid var(--ee-primary);color:var(--right-settings-font-color);font-size:16px;font-weight:600;line-height:16px;padding-left:6px}.right-panel-tabs{align-items:center;background-color:var(--ee-muted);border-bottom:var(--ee-border-width) solid var(--ee-border);display:flex;gap:8px;margin:-24px -24px 0;padding:12px 14px 0;position:relative}.right-panel-tab{background:#0000;border:none;border-radius:var(--ee-radius) var(--ee-radius) 0 0;color:var(--ee-muted-foreground);cursor:pointer;flex:1;font-size:14px;font-weight:500;padding:10px 14px;transition:color .2s,background .2s,box-shadow .2s}.right-panel-tab:hover{color:var(--ee-foreground)}.right-panel-tab:focus-visible{box-shadow:0 0 0 2px var(--ee-primary);outline:none}.right-panel-tab-active{background-color:var(--ee-card);box-shadow:0 -1px 0 0 var(--ee-border)}.right-panel-tab-active,.right-panel-tab-active:hover{color:var(--ee-foreground)}.right-panel-tab-content{margin-top:20px;min-height:120px}.ee-product-mode-tabs{background-color:var(--ee-muted);border:var(--ee-border-width) solid var(--ee-border);border-radius:var(--ee-radius);display:flex;overflow:hidden;width:100%}.ee-product-mode-tab{background:#0000;border:none;border-right:var(--ee-border-width) solid var(--ee-border);color:var(--ee-muted-foreground);cursor:pointer;flex:1;font-size:13px;font-weight:500;padding:10px 14px;transition:color .2s,background-color .2s}.ee-product-mode-tab:last-child{border-right:none}.ee-product-mode-tab:hover{background-color:#ffffff0a;color:var(--ee-foreground)}.ee-product-mode-tab:focus-visible{box-shadow:inset 0 0 0 2px var(--ee-primary);outline:none}.ee-product-mode-tab-active{background-color:var(--ee-card);color:var(--ee-foreground)}.ee-product-assign-section{display:flex;flex-direction:column;gap:6px;min-width:0;width:100%}.ee-product-assign-section .ee-stack-label{color:var(--right-settings-title-font-color);font-size:13px;font-weight:600;line-height:1.4}.ee-product-assign-section .ee-stack-label-sub{color:var(--ee-muted-foreground);font-size:12px;font-weight:500;margin-top:8px}.ee-product-assign-section .ee-stack-label-sub:first-of-type{margin-top:0}.ee-product-assign-section .ee-stack-control{min-width:0;width:100%}.ee-product-variables-section{display:flex;flex-direction:column;gap:8px;width:100%}.ee-product-variables-toggle{align-items:center;background:var(--ee-muted);border:var(--ee-border-width) solid var(--ee-border);border-radius:var(--ee-radius);color:var(--ee-foreground);cursor:pointer;display:flex;font-size:13px;font-weight:600;justify-content:space-between;padding:9px 12px;width:100%}.ee-product-variables-toggle:hover{border-color:var(--ee-primary)}.ee-product-variables-toggle-icon{color:var(--ee-muted-foreground)}.ee-product-variables-dropdown{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;padding-right:4px}.ee-product-variable-item{background:var(--ee-card);border:var(--ee-border-width) solid var(--ee-border);border-radius:var(--ee-radius);cursor:grab;display:flex;flex-direction:column;gap:4px;padding:8px 10px;user-select:none}.ee-product-variable-item:hover{border-color:var(--ee-primary)}.ee-product-variable-item-dragging,.ee-product-variable-item:active{cursor:grabbing}.ee-product-variable-item-label{color:var(--ee-foreground);font-size:13px;line-height:1.3}.ee-product-variable-item-token{color:var(--ee-muted-foreground);font-size:12px;line-height:1.2}.right-panel-block-settings-header{align-items:center;background-color:var(--ee-muted);border-bottom:var(--ee-border-width) solid var(--ee-border);display:flex;gap:12px;margin:-24px -24px 20px;min-width:0;padding:12px 24px}.right-panel-back-btn{align-items:center;background:#0000;border:1px solid #ffffff80;border-radius:var(--ee-radius);color:var(--ee-foreground);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;padding:0;transition:border-color .15s,color .15s,background .15s;width:32px}.right-panel-back-btn:hover{border-color:var(--ee-primary);color:var(--ee-primary)}.right-panel-back-btn:focus{border-color:#fffc;box-shadow:0 0 0 1px #ffffff4d;outline:none}.right-panel-back-btn:focus-visible{border-color:var(--ee-primary);box-shadow:0 0 0 2px #1677d266;outline:none}.right-panel-block-title-inline{border-left:none;flex:1;margin:0;min-width:0;overflow:hidden;padding-left:0;text-overflow:ellipsis;white-space:nowrap}.right-panel-breadcrumbs{align-items:center;display:flex;flex-wrap:wrap;gap:6px;margin:-10px 0 10px;min-height:20px}.right-panel-breadcrumb-btn,.right-panel-breadcrumb-current{border-radius:999px;font-size:12px;line-height:1.3;max-width:200px;overflow:hidden;padding:3px 8px;text-overflow:ellipsis;white-space:nowrap}.right-panel-breadcrumb-btn{background:var(--ee-card);border:var(--ee-border-width) solid var(--ee-border);color:var(--ee-muted-foreground);cursor:pointer}.right-panel-breadcrumb-btn:hover{border-color:var(--ee-primary);color:var(--ee-foreground)}.right-panel-breadcrumb-current{background:#1677d224;border:var(--ee-border-width) solid var(--ee-primary);color:var(--ee-foreground)}.right-panel-breadcrumb-separator{color:var(--ee-muted-foreground);font-size:12px;line-height:1}.right-panel-block-list{display:flex;flex-direction:column;gap:20px}.right-panel-block-category{display:flex;flex-direction:column;gap:8px}.right-panel-block-category-title{color:var(--ee-muted-foreground);font-size:11px;font-weight:600;letter-spacing:.05em;margin-bottom:2px;padding-left:2px;text-transform:uppercase}.right-panel-block-row{border:var(--ee-border-width) solid #0000;border-radius:calc(var(--ee-radius) + 2px);cursor:-webkit-grab;transition:border-color .2s,box-shadow .2s;user-select:none}.right-panel-block-row:active{cursor:-webkit-grabbing}.right-panel-block-row:hover{border-color:var(--ee-border)}.right-panel-block-inner{align-items:center;background-color:var(--ee-card);border:var(--ee-border-width) solid var(--ee-border);border-radius:calc(var(--ee-radius) + 2px);color:var(--ee-foreground);display:flex;gap:0;padding:12px 14px;transition:border-color .2s,background .2s,box-shadow .2s}.right-panel-block-row:hover .right-panel-block-inner{border-color:var(--ee-primary);box-shadow:0 2px 8px #0003}.right-panel-block-drag-handle{align-items:center;color:var(--ee-muted-foreground);cursor:-webkit-grab;display:inline-flex;flex-shrink:0;justify-content:center;padding-right:12px}.right-panel-block-drag-handle:active{cursor:-webkit-grabbing}.right-panel-block-drag-icon{color:inherit;font-size:16px;opacity:.9}.right-panel-block-separator{background-color:var(--ee-border);flex-shrink:0;height:18px;margin-right:12px;width:1px}.right-panel-block-icon{color:var(--ee-muted-foreground);flex-shrink:0;font-size:18px;line-height:1;margin-right:10px}.right-panel-block-text{flex:1;font-size:14px;font-weight:500;line-height:1.4;min-width:0}.right-panel-block-ai-pill{background-color:var(--ee-primary);border-radius:9999px;color:var(--ee-primary-foreground);flex-shrink:0;font-size:12px;font-weight:600;letter-spacing:.02em;padding:5px 12px}.right-panel-block-move{background-color:initial}.right-panel-block-move:hover{box-shadow:none}.right-panel-styles-section{margin-bottom:28px}.right-panel-styles-section:last-child{margin-bottom:0}.right-panel-styles-section-title{color:var(--ee-foreground);font-size:13px;font-weight:600;letter-spacing:.02em;margin:0 0 14px}.right-panel-styles-section-body{padding-left:0}.right-panel-styles-section-body .card-item{margin-bottom:14px}.right-panel-styles-section-body .card-item:last-child{margin-bottom:0}.subject-settings{font-size:15px;font-weight:600;height:21px;margin-bottom:30}.card-item{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:12px;min-width:0}.card-item>div:last-child{flex:1;min-width:0}.card-item-title{color:var(--right-settings-title-font-color);flex-shrink:0;font-weight:600;min-width:100px}.ee-content-type-two-rows{min-width:0;padding-top:4px;width:100%}.ee-content-type-two-rows .ee-content-type-row-1{align-items:center;display:flex;gap:12px;margin-bottom:14px;min-height:32px;width:100%}.ee-content-type-two-rows .ee-content-type-row-1 .ee-ai-label{margin-right:0}.ee-ai-label{align-items:center;color:var(--right-settings-title-font-color,inherit);display:inline-flex;font-size:13px;font-weight:500;line-height:1.5;min-height:20px;white-space:nowrap}.ee-content-type-two-rows .ee-content-type-row-2{align-items:center;display:flex;flex-wrap:wrap;gap:10px;min-width:0;width:100%}.ee-content-type-two-rows .ee-content-type-row-2 .align-style-item{border-radius:6px;font-size:12px;height:32px;margin-left:0;min-width:32px;padding-left:8px;padding-right:8px;width:auto}.ee-content-type-group{margin-bottom:12px;min-width:0;width:100%}.ee-content-type-group .ant-radio-group{display:flex;flex-wrap:wrap;gap:12px 16px;min-width:0;width:100%}.ee-variable-select-wrap{min-width:0;width:100%}.right-settings .ee-variable-select.ant-select{min-width:0!important;width:100%!important}.right-settings .ee-variable-select .ant-select-selector{min-width:0!important}.ee-btn-use-variable.ee-btn-use-variable-dark{background-color:var(--ee-muted,#374151)!important;border-color:var(--ee-border,#4b5563)!important;color:var(--ee-foreground,#f3f4f6)!important}.ee-btn-use-variable.ee-btn-use-variable-dark:hover{background-color:var(--ee-muted-foreground,#6b7280)!important;border-color:var(--ee-border,#6b7280)!important;color:var(--ee-foreground,#fff)!important}.ee-menu-item-header{gap:12px}.ee-menu-item-content .ee-menu-item-header .ee-menu-item-delete{margin-left:auto}.ee-menu-item-fields{display:flex;flex-direction:column;gap:12px;width:100%}.ee-menu-item-fields .card-item{align-items:flex-start;flex-wrap:wrap}.ee-menu-item-fields .card-item-title{margin-bottom:4px;width:100%}.ee-menu-item-fields .card-item>div:last-child{min-width:0;width:100%}.ee-menu-item-fields .ant-select.ee-menu-item-input,.ee-menu-item-fields .ee-menu-item-input.ant-input,.ee-menu-item-fields .ee-menu-item-input.ant-input-number{max-width:100%;width:100%!important}.ee-button-action-divider{background-color:var(--ee-border,#4b5563);flex-shrink:0;height:1px;margin:16px 0}.ee-right-panel-stack{align-items:stretch;display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.ee-right-panel-stack .ee-stack-label{color:var(--right-settings-title-font-color);font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap}.ee-right-panel-stack .ee-stack-help{color:var(--ee-muted-foreground);font-size:12px;line-height:1.4;margin-top:2px}.ee-right-panel-stack .ee-stack-control{width:100%}.ee-tooltip-trigger{background:#0000!important;border:none!important;outline:none!important}.ee-tooltip-trigger:focus,.ee-tooltip-trigger:focus-visible,.ee-tooltip-trigger:hover{background:#0000!important;border:none!important;box-shadow:none!important}.ee-help-icon{align-items:center;border-radius:50%;color:var(--ee-muted-foreground);cursor:help;display:inline-flex;font-size:12px;height:16px;justify-content:center;margin-left:6px;transition:color .15s;width:16px}.ee-help-icon:hover{color:var(--ee-primary)}.pre_header{font-weight:600}.pre_header,.pre_header-desc{color:var(--right-settings-title-font-color)}.pre_header-desc{font-size:10.5px;line-height:15px;margin-top:6px}.right-setting-block-item-title{background-color:var(--right-settings-block-title-background-color);border-bottom:var(--ee-border-width) solid var(--border-color);border-top:var(--ee-border-width) solid var(--border-color);color:var(--right-settings-block-title-font-color);font-size:13.5px;line-height:21px;margin:24px -24px;padding:12px 24px}.link-tag{border:var(--ee-border-width) solid var(--blue-500);border-radius:var(--ee-radius);color:var(--blue-500);font-weight:500;padding:2px 6px;text-align:center}.switch-active{background-color:var(--blue-500)}.switch-disabled{background-color:var(--gray-400)}.input-width{width:96px}.align-style-item{align-items:center;border:var(--ee-border-width) solid;border-radius:calc(var(--ee-radius) - 2px);cursor:pointer;display:flex;font-weight:700;height:30px;justify-content:center;margin-left:6px;text-align:center;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);user-select:none;width:30px}.align-style-item-active{border-color:var(--align-style-item-active-color);color:var(--align-style-item-active-color)}.align-style-item-un_active{border-color:var(--align-style-item-un-active-color);color:var(--align-style-item-un-active-color)}.align-style-item-un_active:hover{border-color:var(--align-style-item-active-color);color:var(--align-style-item-active-color)}.padding-settings{display:grid;gap:16px 20px;grid-template-columns:repeat(2,minmax(100px,1fr));margin-bottom:12px;margin-top:12px}.padding-settings>div{display:flex;flex-direction:column;gap:4px;min-width:0}.padding-settings .width-full{max-width:100%;width:100%}.padding-settings>div>div:first-child{color:var(--right-settings-title-font-color);font-size:13px}.color-picker-button{border:var(--ee-border-width) solid var(--border-color);border-radius:var(--ee-radius);height:30px;width:30px}.social-link-item{border-width:var(--ee-border-width);margin-bottom:12px;position:relative}.social-link-item-drag_start:after{bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:40}.social-link-item-current{border-color:var(--ee-border);border-style:dashed;opacity:.4}.social-link-item-content{border:var(--ee-border-width) solid #0000;border-radius:var(--ee-radius);padding:12px;user-select:none}.social-link-item-content:hover{border-color:var(--ee-primary);box-shadow:0 3px 12px 0 #1677d233}.social-link-item-img{height:27px;margin-right:6px;width:27px}.social-link-item-icon{align-items:center;border-radius:100%;cursor:pointer;display:flex;height:30px;justify-content:center;padding:6px;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:30px;z-index:40}.social-link-item-icon-slate:hover{background-color:var(--slate-100)}.social-link-item-icon-red:hover{background-color:var(--red-100)}.tag-style-size{height:30px;width:30px}.social-link-item-icon-svg{font-size:13.5px;line-height:21px}.social-link-item-icon-svg-deep{color:var(--start-content-font-color)}.social-link-item-icon-svg-red{color:var(--red-500)}.social-link-add{display:flex;flex-wrap:wrap;gap:12px}.menu-add-new-item{align-items:center;background:#0000;border:1px dashed var(--ee-border,#d9d9d9);border-radius:var(--ee-radius,6px);color:var(--ee-primary,#2faade);cursor:pointer;display:flex;font-size:14px;gap:8px;justify-content:center;padding:12px 16px;transition:border-color .2s,color .2s;width:100%}.menu-add-new-item:hover{border-color:var(--ee-primary,#2faade);color:var(--ee-primary,#2faade)}.menu-add-new-item-icon{font-size:18px;line-height:1}.margin-bottom-8{margin-bottom:8px}.social-link-add-img{cursor:pointer;height:30px;width:30px}.ee-image-upload-input-hidden{height:0;opacity:0;pointer-events:none;position:absolute;width:0}.ee-image-upload-trigger{align-items:center;background-color:var(--ee-muted);border:var(--ee-border-width) dashed var(--ee-border);border-radius:var(--ee-radius);color:var(--ee-foreground);cursor:pointer;display:flex;font-size:14px;gap:8px;justify-content:center;margin-top:6px;min-height:80px;padding:12px 16px;transition:border-color .15s,background-color .15s;width:100%}.ee-image-upload-trigger:hover{background-color:#1677d214;border-color:var(--ee-primary)}.ee-image-upload-icon{color:var(--ee-muted-foreground);font-size:18px}.ee-image-upload-trigger:hover .ee-image-upload-icon{color:var(--ee-primary)}.right-settings .ant-input,.right-settings .ant-input-affix-wrapper,.right-settings .ant-input-number-input{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important;border-radius:var(--ee-radius);color:var(--ee-foreground)!important}.right-settings .ant-input-number-input::placeholder,.right-settings .ant-input::placeholder{color:var(--ee-muted-foreground)}.right-settings .ant-input-affix-wrapper:hover,.right-settings .ant-input:hover{border-color:var(--ee-muted-foreground)!important}.right-settings .ant-input-affix-wrapper-focused,.right-settings .ant-input-focused,.right-settings .ant-input-number-focused .ant-input-number-input,.right-settings .ant-input:focus{border-color:var(--ee-primary)!important;box-shadow:0 0 0 1px var(--ee-primary)!important;outline:none}.right-settings .ant-input,.right-settings .ant-input-number-input{caret-color:var(--ee-primary)}.right-settings .ant-input-affix-wrapper-focused,.right-settings .ant-input-affix-wrapper:focus{border-color:var(--ee-primary)!important;box-shadow:0 0 0 1px var(--ee-primary)!important}.right-settings .ant-input-group-addon{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important;color:var(--ee-foreground)!important}.right-settings .ant-input-group-addon:first-child{border-radius:var(--ee-radius) 0 0 var(--ee-radius)}.right-settings .ant-input-group-addon:last-child{border-radius:0 var(--ee-radius) var(--ee-radius) 0}.right-settings .ant-input-group-addon *{color:var(--ee-foreground)!important}.right-settings .ant-input-group .ant-input{border-left-color:var(--ee-border)!important}.right-settings .ant-input-group .ant-input:first-child{border-radius:var(--ee-radius) 0 0 var(--ee-radius)}.right-settings .ant-input-group .ant-input-affix-wrapper:last-child,.right-settings .ant-input-group .ant-input-affix-wrapper:last-child .ant-input,.right-settings .ant-input-group .ant-input:last-child{border-radius:0 var(--ee-radius) var(--ee-radius) 0}.right-settings .ant-input-group .ant-input:focus{border-left-color:var(--ee-primary)!important}.right-settings .ant-input-number-group-addon,.right-settings .ant-input-number-group-addon:first-child,.right-settings .ant-input-number-group-addon:last-child,.right-settings .ant-input-number-group-wrapper .ant-input-number-group-addon{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important;color:var(--ee-foreground)!important}.right-settings .ant-input-number-group-addon:first-child{border-radius:var(--ee-radius) 0 0 var(--ee-radius)}.right-settings .ant-input-number-group-addon:last-child{border-radius:0 var(--ee-radius) var(--ee-radius) 0}.right-settings .ant-input-number-group-addon *,.right-settings .ant-input-number-group-addon .ant-select .ant-select-selector{background-color:initial!important;color:var(--ee-foreground)!important}.right-settings .ant-input-number-group .ant-input-number{border-right-color:var(--ee-border)!important}.right-settings .ant-input-number-group .ant-input-number:first-child{border-radius:var(--ee-radius) 0 0 var(--ee-radius)}.right-settings .ant-input-number-group .ant-input-number:last-child{border-radius:0 var(--ee-radius) var(--ee-radius) 0}.right-settings .ant-input-number-group .ant-input-number-focused,.right-settings .ant-input-number-group .ant-input-number:focus-within{border-right-color:var(--ee-primary)!important}.right-settings .ant-input-number{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important;border-radius:var(--ee-radius)}.right-settings .ant-input-number:hover{border-color:var(--ee-muted-foreground)!important}.right-settings .ant-input-number-focused{border-color:var(--ee-primary)!important;box-shadow:0 0 0 1px var(--ee-primary)!important}.right-settings .ant-input-number-handler-wrap{background:var(--ee-card)!important;border-left:var(--ee-border-width) solid var(--ee-border)!important}.right-settings .ant-input-number-handler-down-inner,.right-settings .ant-input-number-handler-up-inner{color:var(--ee-foreground)}.right-settings .ant-input-number-handler-down:hover .ant-input-number-handler-down-inner,.right-settings .ant-input-number-handler-up:hover .ant-input-number-handler-up-inner{color:var(--ee-primary)}.right-settings .ant-select .ant-select-selector{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important;border-radius:var(--ee-radius);color:var(--ee-foreground)!important}.right-settings .ant-select:hover .ant-select-selector{border-color:var(--ee-muted-foreground)!important}.right-settings .ant-select-focused .ant-select-selector{border-color:var(--ee-primary)!important;box-shadow:0 0 0 1px var(--ee-primary)!important}.right-settings .ant-select-arrow{color:var(--ee-muted-foreground)}.right-settings .ant-select-dropdown{background-color:var(--ee-card)!important;border:var(--ee-border-width) solid var(--ee-border);border-radius:var(--ee-radius);box-shadow:var(--ee-shadow)}.right-settings .ant-select-dropdown .ant-select-item{color:var(--ee-foreground)}.right-settings .ant-select-dropdown .ant-select-item-option-active,.right-settings .ant-select-dropdown .ant-select-item-option-selected{background-color:var(--option-hover-color)!important;color:var(--ee-foreground)}.right-settings .ant-slider-rail{background-color:var(--ee-muted)!important}.right-settings .ant-slider-handle,.right-settings .ant-slider-track{background-color:var(--ee-primary)!important}.right-settings .ant-slider-handle{border-color:var(--ee-primary)!important}.right-settings .ant-slider-handle:focus{border-color:var(--ee-primary)!important;box-shadow:0 0 0 2px #1677d233}.right-settings .ant-switch{background-color:var(--ee-muted-foreground)!important}.right-settings .ant-switch-checked{background-color:var(--ee-primary)!important}.right-settings .ant-switch-inner{color:var(--ee-foreground)}.right-settings .ant-tabs-tab{color:var(--ee-muted-foreground)}.right-settings .ant-tabs-tab:hover{color:var(--ee-foreground)}.right-settings .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{color:var(--ee-primary)!important}.right-settings .ant-tabs-tab-btn{color:inherit}.right-settings .ant-tabs-ink-bar{background:var(--ee-primary)!important}.right-settings .ant-tabs-nav:before{border-bottom-color:var(--ee-border)!important}.right-settings .ant-radio-group,.right-settings .ant-radio-wrapper{color:var(--ee-foreground)}.right-settings .ant-radio-wrapper .ant-radio-disabled+span{color:var(--ee-muted-foreground)}.right-settings .ant-radio-inner{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important}.right-settings .ant-radio-input:focus+.ant-radio-inner,.right-settings .ant-radio-wrapper:hover .ant-radio-inner{border-color:var(--ee-primary)!important}.right-settings .ant-radio-checked .ant-radio-inner{background-color:var(--ee-primary)!important;border-color:var(--ee-primary)!important}.right-settings .ant-radio-checked .ant-radio-inner:after{background-color:var(--ee-primary-foreground)}.right-settings .ant-radio-wrapper span:not(.ant-radio){color:inherit}.right-settings .ant-btn-primary{background:var(--ee-primary)!important;border-color:var(--ee-primary)!important;color:var(--ee-primary-foreground)!important}.right-settings .ant-btn-primary:hover{filter:brightness(1.1)}.right-settings .ee-dynamic-prompt-block{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.right-settings .ee-dynamic-prompt-block .ee-prompt-label{color:var(--right-settings-title-font-color);font-size:13px;font-weight:600}.right-settings .ee-dynamic-prompt-block .ant-input{box-sizing:border-box;min-width:0;width:100%!important}.right-settings .ee-sample-content-block{display:flex;flex-direction:column;gap:8px;margin-top:12px}.right-settings .ee-sample-content-item{background:var(--ee-muted);border:var(--ee-border-width) solid var(--ee-border);border-radius:var(--ee-radius);color:var(--ee-foreground);cursor:pointer;font-size:12px;line-height:1.4;padding:10px 12px;transition:border-color .15s,background .15s}.right-settings .ee-sample-content-item:hover{background:#1677d20f;border-color:var(--ee-primary)}.right-settings .ee-sample-content-item.ee-sample-content-item-selected{background:#1677d21f;border-color:var(--ee-primary);font-weight:500}.right-settings .ant-popover-inner{background-color:var(--ee-card)!important;border:var(--ee-border-width) solid var(--ee-border);border-radius:var(--ee-radius);box-shadow:var(--ee-shadow)}.right-settings .ant-popover-inner-content{background-color:var(--ee-card)}.right-settings .ee-color-picker-popover .chrome-picker{background:var(--ee-card)!important}.right-settings .ee-color-picker-popover input{background-color:var(--ee-muted)!important;border-color:var(--ee-border)!important;color:var(--ee-foreground)!important}
|