:root,[data-theme=dark]{--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--bg-app:#0b0f17;--bg-surface:#111827;--bg-surface-elevated:#1e293b;--bg-surface-active:#283548;--bg-canvas-wrapper:#0d121c;--bg-nav:#111827d9;--border-subtle:#ffffff14;--border-focus:#6366f1;--border-active:#6366f166;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--brand-grad:linear-gradient(135deg, #fff, #c7d2fe);--canvas-dot:#ffffff0d;--accent-primary:#6366f1;--accent-hover:#4f46e5;--accent-glow:#6366f140;--accent-success:#10b981;--accent-warning:#f59e0b;--accent-danger:#ef4444;--modal-header-bg:#111827cc;--modal-footer-bg:#11182799;--modal-overlay:#000000bf;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--shadow-sm:0 1px 2px #0003;--shadow-md:0 4px 12px #00000059;--shadow-lg:0 12px 30px #00000080;--shadow-glow:0 0 20px #6366f14d;--header-height:56px;--sidebar-width:360px}[data-theme=light]{--bg-app:#f1f5f9;--bg-surface:#fff;--bg-surface-elevated:#f8fafc;--bg-surface-active:#e2e8f0;--bg-canvas-wrapper:#cbd5e1;--bg-nav:#ffffffeb;--border-subtle:#00000014;--border-focus:#4f46e5;--border-active:#4f46e559;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--brand-grad:linear-gradient(135deg, #1e1b4b, #4338ca);--canvas-dot:#0000001a;--accent-primary:#4f46e5;--accent-hover:#4338ca;--accent-glow:#4f46e533;--accent-success:#059669;--accent-warning:#d97706;--accent-danger:#dc2626;--modal-header-bg:#f8fafcf2;--modal-footer-bg:#f1f5f9f2;--modal-overlay:#0f172a80;--shadow-sm:0 1px 3px #0000000f;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 12px 30px #0000001f;--shadow-glow:0 0 20px #4f46e533}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;width:100vw;height:100vh;line-height:1.5;transition:background-color .25s,color .25s;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#80808040;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#80808073}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}input,textarea,select{color:inherit;outline:none;font-family:inherit}.app-container{background-color:var(--bg-app);flex-direction:column;width:100vw;height:100vh;transition:background-color .25s;display:flex;overflow:hidden}.top-navbar{height:var(--header-height);background:var(--bg-nav);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);z-index:40;justify-content:space-between;align-items:center;padding:0 16px;transition:background-color .25s,border-color .25s;display:flex}.brand-section{align-items:center;gap:12px;display:flex}.brand-logo-badge{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#6366f12e,#a855f71f);border:1px solid #6366f14d;align-items:center;gap:8px;padding:6px 12px;display:flex}.brand-title{letter-spacing:-.01em;background:var(--brand-grad);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:14px;font-weight:700}.brand-pill{color:var(--accent-primary);letter-spacing:.05em;text-transform:uppercase;background:#6366f133;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:700}.doc-name-input{color:var(--text-primary);border-radius:var(--radius-sm);background:0 0;border:1px solid #0000;width:220px;padding:4px 8px;font-size:13px;font-weight:600;transition:all .2s}.doc-name-input:hover{border-color:var(--border-subtle);background:#8080800f}.doc-name-input:focus{border-color:var(--border-focus);background:var(--bg-surface-elevated)}.save-status-indicator{color:var(--text-muted);align-items:center;gap:6px;font-size:11px;display:flex}.status-dot{background-color:var(--accent-success);width:7px;height:7px;box-shadow:0 0 8px var(--accent-success);border-radius:50%}.center-controls{align-items:center;gap:8px;display:flex}.pill-group{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);align-items:center;gap:2px;padding:3px;display:flex}.pill-btn{border-radius:var(--radius-sm);color:var(--text-secondary);align-items:center;gap:6px;padding:5px 10px;font-size:12px;font-weight:600;transition:all .18s;display:flex}.pill-btn:hover{color:var(--text-primary);background:#80808014}.pill-btn.active{background:var(--accent-primary);color:#fff;box-shadow:var(--shadow-sm)}.action-icon-btn{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-secondary);background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);justify-content:center;align-items:center;transition:all .15s;display:flex}.action-icon-btn:hover:not(:disabled){color:var(--text-primary);background:var(--bg-surface-active);border-color:#8080804d}.action-icon-btn:disabled{opacity:.4;cursor:not-allowed}.nav-actions{align-items:center;gap:8px;display:flex}.btn-secondary{border-radius:var(--radius-md);color:var(--text-primary);background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:600;transition:all .2s;display:flex}.btn-secondary:hover{background:var(--bg-surface-active);border-color:#8080804d}.btn-mautic{border-radius:var(--radius-md);color:#fff;background:linear-gradient(135deg,#1e3a8a,#3b82f6);border:1px solid #3b82f666;align-items:center;gap:6px;padding:6px 13px;font-size:12px;font-weight:700;transition:all .2s;display:flex;box-shadow:0 2px 8px #2563eb40}.btn-mautic:hover{transform:translateY(-1px);box-shadow:0 4px 14px #2563eb73}.btn-primary{border-radius:var(--radius-md);color:#fff;background:linear-gradient(135deg, var(--accent-primary), #8b5cf6);box-shadow:0 2px 10px var(--accent-glow);border:1px solid #8b5cf666;align-items:center;gap:6px;padding:6px 14px;font-size:12px;font-weight:700;transition:all .2s;display:flex}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px #6366f180}.workspace-layout{height:calc(100vh - var(--header-height));flex:1;display:flex;position:relative;overflow:hidden}.canvas-wrapper{background-color:var(--bg-canvas-wrapper);background-image:radial-gradient(var(--canvas-dot) 1px, transparent 0);background-size:24px 24px;flex-direction:column;flex:1;align-items:center;padding:36px 24px 100px;transition:background-color .25s;display:flex;position:relative;overflow:hidden auto}.email-artboard{box-shadow:var(--shadow-lg), 0 0 0 1px #00000014;border-radius:var(--radius-sm);-webkit-user-select:text;user-select:text;transition:width .3s cubic-bezier(.16,1,.3,1),transform .3s;position:relative}.mobile-frame-container{background:#18181b;border:1px solid #ffffff1a;border-radius:44px;width:400px;margin:0 auto;padding:14px 12px 24px;position:relative;box-shadow:0 25px 60px #00000080,0 0 0 4px #27272a}.mobile-notch{background:#09090b;border-radius:0 0 14px 14px;width:140px;height:20px;margin:0 auto 12px;position:relative}.mobile-home-indicator{background:#ffffff4d;border-radius:99px;width:120px;height:4px;margin:14px auto 0}.email-row-wrapper{transition:outline .15s;position:relative}.email-row-wrapper:hover{outline:1.5px dashed #6366f199}.email-row-wrapper.selected{z-index:10;outline:2px solid var(--accent-primary)!important}.row-action-bar{background:var(--accent-primary);color:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:30;align-items:center;gap:6px;padding:2px 6px;font-size:11px;font-weight:700;animation:.15s ease-out fadeIn;display:flex;position:absolute;top:-28px;right:8px}.row-action-btn{color:#fff;border-radius:3px;justify-content:center;align-items:center;width:20px;height:20px;transition:background .15s;display:flex}.row-action-btn:hover{background:#ffffff40}.columns-grid{width:100%;display:flex}.column-cell{min-height:48px;transition:outline .15s;position:relative}.column-cell.empty-column{border:1.5px dashed var(--border-subtle);border-radius:var(--radius-sm);min-height:70px;color:var(--text-muted);background:#00000005;justify-content:center;align-items:center;margin:4px;font-size:12px;font-weight:500;display:flex}.email-block-wrapper{cursor:pointer;transition:outline .15s;position:relative}.email-block-wrapper:hover{outline:1.5px dashed #3b82f6b3}.email-block-wrapper.selected{z-index:12;outline:2px solid #3b82f6!important}.block-action-bar{color:#fff;box-shadow:var(--shadow-md);z-index:35;background:#3b82f6;border-radius:4px;align-items:center;gap:4px;padding:2px 6px;font-size:10px;font-weight:700;animation:.15s ease-out fadeIn;display:flex;position:absolute;top:-26px;right:6px}.block-action-btn{color:#fff;border-radius:2px;justify-content:center;align-items:center;width:18px;height:18px;transition:background .15s;display:flex}.block-action-btn:hover{background:#ffffff4d}.drop-indicator{background:var(--accent-primary);height:4px;box-shadow:0 0 10px var(--accent-primary);border-radius:2px;margin:2px 0;animation:1s infinite alternate pulseDrop}@keyframes pulseDrop{0%{opacity:.6}to{opacity:1}}.empty-artboard-prompt{border:2px dashed var(--border-subtle);border-radius:var(--radius-lg);color:var(--text-secondary);text-align:center;background:var(--bg-surface);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:60px 24px;display:flex}.sidebar-panel{width:var(--sidebar-width);background:var(--bg-surface);border-left:1px solid var(--border-subtle);z-index:30;flex-direction:column;height:100%;transition:background-color .25s,border-color .25s;display:flex}.sidebar-tabs-nav{border-bottom:1px solid var(--border-subtle);background:var(--bg-surface);display:flex}.sidebar-tab-btn{color:var(--text-muted);border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;gap:6px;padding:12px 8px;font-size:12px;font-weight:600;transition:all .2s;display:flex}.sidebar-tab-btn:hover{color:var(--text-primary);background:var(--bg-surface-elevated)}.sidebar-tab-btn.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary);background:#6366f114}.sidebar-tab-content{flex:1;padding:18px 16px;overflow-y:auto}.blocks-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.draggable-block-card{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:grab;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:16px 10px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex}.draggable-block-card:hover{background:var(--bg-surface-active);color:var(--text-primary);box-shadow:var(--shadow-md);border-color:#6366f166;transform:translateY(-2px)}.draggable-block-card:active{cursor:grabbing}.block-card-icon{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--accent-primary);background:#6366f11f;justify-content:center;align-items:center;display:flex}.draggable-block-card:hover .block-card-icon{background:var(--accent-primary);color:#fff;box-shadow:0 0 12px var(--accent-glow)}.block-card-label{text-align:center;font-size:11px;font-weight:600}.rows-grid{flex-direction:column;gap:12px;display:flex}.draggable-row-card{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:grab;padding:14px;transition:all .2s}.draggable-row-card:hover{background:var(--bg-surface-active);box-shadow:var(--shadow-sm);border-color:#6366f166;transform:translateY(-1px)}.row-card-visual{gap:6px;height:28px;margin-bottom:8px;display:flex}.row-col-preview{height:100%;color:var(--accent-primary);font-size:10px;font-family:var(--font-mono);background:#6366f11f;border:1px dashed #6366f166;border-radius:4px;justify-content:center;align-items:center;display:flex}.row-card-info{color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:11px;font-weight:600;display:flex}.inspector-section{border-bottom:1px solid var(--border-subtle);margin-bottom:22px;padding-bottom:18px}.inspector-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.inspector-section-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);justify-content:space-between;align-items:center;margin-bottom:12px;font-size:11px;font-weight:700;display:flex}.control-group{margin-bottom:12px}.control-label{color:var(--text-secondary);margin-bottom:6px;font-size:11px;font-weight:600;display:block}.control-input{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);padding:8px 10px;font-size:12px;transition:all .15s}.control-input:focus{border-color:var(--border-focus);background:var(--bg-surface-active)}.control-textarea{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);resize:vertical;min-height:80px;padding:8px 10px;font-size:12px;line-height:1.4}.control-textarea:focus{border-color:var(--border-focus)}.grid-2{grid-template-columns:1fr 1fr;gap:8px;display:grid}.grid-4{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.color-picker-row{align-items:center;gap:8px;display:flex}.color-preview-box{border-radius:var(--radius-sm);cursor:pointer;border:1px solid #8080804d;flex-shrink:0;width:28px;height:28px;position:relative;overflow:hidden}.color-native-input{opacity:0;cursor:pointer;width:50px;height:50px;position:absolute;top:-10px;left:-10px}.toggle-row{justify-content:space-between;align-items:center;padding:4px 0;display:flex}.toggle-switch{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);cursor:pointer;border-radius:99px;width:36px;height:20px;transition:background .2s;position:relative}.toggle-switch.checked{background:var(--accent-primary);border-color:var(--accent-primary)}.toggle-handle{background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .2s;position:absolute;top:2px;left:2px}.toggle-switch.checked .toggle-handle{transform:translate(16px)}.mautic-token-dropdown{position:relative}.token-badge{color:#60a5fa;font-size:11px;font-family:var(--font-mono);cursor:pointer;background:#3b82f626;border:1px solid #3b82f64d;border-radius:4px;align-items:center;gap:4px;padding:3px 8px;transition:all .15s;display:inline-flex}.token-badge:hover{background:#3b82f640;border-color:#3b82f6}.modal-overlay{background:var(--modal-overlay);-webkit-backdrop-filter:blur(8px);z-index:100;justify-content:center;align-items:center;padding:20px;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-dialog{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg), 0 0 0 1px var(--border-subtle);flex-direction:column;width:100%;max-width:760px;max-height:85vh;animation:.2s cubic-bezier(.16,1,.3,1) scaleIn;display:flex;overflow:hidden}.modal-header{border-bottom:1px solid var(--border-subtle);background:var(--modal-header-bg);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-title{color:var(--text-primary);align-items:center;gap:8px;font-size:16px;font-weight:700;display:flex}.modal-body{flex:1;padding:20px;overflow-y:auto}.modal-footer{border-top:1px solid var(--border-subtle);background:var(--modal-footer-bg);justify-content:flex-end;align-items:center;gap:10px;padding:14px 20px;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.toast-notification{background:var(--bg-surface);border:1px solid var(--border-focus);color:var(--text-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg), 0 0 15px var(--accent-glow);z-index:120;align-items:center;gap:10px;padding:12px 18px;font-size:13px;font-weight:600;animation:.25s cubic-bezier(.16,1,.3,1) slideUpToast;display:flex;position:fixed;bottom:24px;right:24px}@keyframes slideUpToast{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}