:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;--bg: #1e1f1c;--chrome-dark: #1e1f1c;--chrome-mid: #272822;--chrome-light: #3e3d32;--panel: #272822;--panel-alt: var(--pattern-icon-bg);--panel-raised: var(--button-bg);--line: #3e3d32;--line-strong: #75715e;--text: #f8f8f2;--muted: #b8b8aa;--accent: #a6e22e;--accent-strong: #e6db74;--accent-soft: #34352f;--danger: #f92672;--focus: #66d9ef;--code-bg: #272822;--canvas-bg: #1e1f1c;--black-line: #161713;--title-bg: #1e1f1c;--button-bg: #272822;--button-hover-bg: #3e3d32;--menu-bg: #272822;--menu-hover-border: #a6e22e;--input-bg: #1e1f1c;--pattern-icon-bg: #1e1f1c;--outline-active-text: #f8f8f2;--frame-border: #75715e;--popover-bg: #272822;--code-toolbar-bg: #1e1f1c;--code-toolbar-line: #3e3d32;--diagnostic-warning-border: #e6db74;--diagnostic-warning-text: #e6db74;--diagnostic-error-border: #f92672;--template-preview-bg: #75715e;--template-email-border: #75715e;--template-wireframe-bg: #1e1f1c}:root[data-theme=light]{color-scheme:light;--bg: #eef1f5;--chrome-dark: #f8fafc;--chrome-mid: #eef2f6;--chrome-light: #e2e8f0;--panel: #f8fafc;--panel-alt: #eef2f6;--panel-raised: #e2e8f0;--line: #cbd5e1;--line-strong: #94a3b8;--text: #172033;--muted: #5f6f84;--accent: #b45309;--accent-strong: #92400e;--accent-soft: #fff1df;--danger: #b42318;--focus: #d97706;--code-bg: #f8fafc;--canvas-bg: #dfe5ed;--black-line: #cbd5e1;--title-bg: #ffffff;--button-bg: #e8edf4;--button-hover-bg: #dbe3ee;--menu-bg: #ffffff;--menu-hover-border: #d97706;--input-bg: #ffffff;--pattern-icon-bg: #fff7ed;--outline-active-text: #172033;--frame-border: #94a3b8;--popover-bg: #ffffff;--code-toolbar-bg: #f8fafc;--code-toolbar-line: #cbd5e1;--diagnostic-warning-border: #d97706;--diagnostic-warning-text: #92400e;--diagnostic-error-border: #b42318;--template-preview-bg: #94a3b8;--template-email-border: #94a3b8;--template-wireframe-bg: #e2e8f0}*{box-sizing:border-box}body{margin:0;min-width:980px;min-height:100vh;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button,.file-button{border:1px solid var(--line-strong);background:var(--button-bg);color:var(--text);min-height:34px;padding:7px 10px;border-radius:4px;cursor:pointer}button:hover,.file-button:hover{border-color:var(--accent);background:var(--button-hover-bg)}button:focus-visible,.file-button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px}.workspace{display:grid;grid-template-rows:auto 1fr 24px;height:100vh;overflow:hidden;background:var(--bg)}.app-chrome{background:var(--chrome-dark);color:var(--text);border-bottom:1px solid var(--black-line)}.title-bar{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 12px;background:var(--title-bg);border-bottom:1px solid var(--black-line)}.product-name{font-size:13px;font-weight:700}.document-name{color:var(--muted);font-size:12px}.menu-bar,.command-bar{display:flex;align-items:center;gap:4px;padding:4px 8px}.menu-bar{min-height:28px;background:var(--chrome-dark)}.menu{position:relative}.command-bar{min-height:36px;background:var(--chrome-mid);border-top:1px solid var(--button-bg)}.menu-trigger{min-height:22px;padding:3px 9px;border-color:transparent;background:transparent;color:var(--muted)}.menu-trigger:hover,.menu-trigger.active{border-color:var(--line-strong);background:var(--chrome-light);color:var(--text)}.menu-dropdown{position:absolute;top:calc(100% + 2px);left:0;z-index:30;display:none;min-width:188px;padding:5px;background:var(--popover-bg);border:1px solid var(--line-strong);box-shadow:0 14px 28px #0000005c}.menu-dropdown.open{display:grid;gap:2px}.menu-dropdown button{display:block;width:100%;min-height:27px;padding:5px 9px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--text);text-align:left}.menu-dropdown button:hover,.menu-dropdown button:focus-visible{border-color:var(--menu-hover-border);background:var(--accent-soft)}.menu-separator{height:1px;margin:4px 3px;background:var(--line)}.command-bar button{min-height:28px;padding:4px 8px;font-size:12px}.icon-toolbar button{position:relative;display:inline-grid;place-items:center;width:32px;min-width:32px;min-height:30px;padding:0;border-color:transparent;background:transparent;color:var(--muted)}.icon-toolbar svg{width:16px;height:16px;stroke-width:1.9}.icon-toolbar button:hover,.icon-toolbar button:focus-visible{border-color:transparent;background:var(--button-hover-bg);color:var(--text)}.icon-toolbar button:after,.icon-toolbar label:after{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:120;display:none;width:max-content;max-width:220px;padding:5px 7px;border:1px solid var(--line-strong);border-radius:4px;background:var(--title-bg);color:var(--text);box-shadow:0 8px 20px #00000059;content:attr(aria-label);font-size:12px;line-height:1.2;pointer-events:none;transform:translate(-50%);white-space:normal}.icon-toolbar button:hover:after,.icon-toolbar button:focus-visible:after,.icon-toolbar label:hover:after,.icon-toolbar label:focus-within:after{display:block}.app-shell{display:grid;grid-template-columns:260px minmax(460px,1fr) 320px;height:100%;min-height:0;overflow:hidden;border-top:1px solid var(--button-bg)}.sidebar{background:var(--panel);border-color:var(--line);border-style:solid;overflow:auto}.left-panel{border-width:0 1px 0 0}.right-panel{border-width:0 0 0 1px}.panel-section{padding:12px;border-bottom:1px solid var(--line)}h1{margin:0 0 10px;font-size:15px;line-height:1.2}.panel-title{margin-bottom:10px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.panel-title-row .panel-title{margin-bottom:0}.icon-button{display:inline-grid;place-items:center;width:28px;min-width:28px;min-height:28px;padding:0;border-radius:4px;font-size:18px;line-height:1}.control-stack{display:grid;gap:8px}.inspector-form label{display:grid;gap:5px;color:var(--muted);font-size:12px;font-weight:700}.file-button{display:inline-flex;align-items:center;justify-content:center}.hidden-file-input,.file-button input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}.sidebar-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:8px;background:var(--code-toolbar-bg);border-bottom:1px solid var(--line)}.sidebar-tab{min-height:30px;padding:5px 8px;border-color:transparent;background:transparent;color:var(--muted);font-size:12px;font-weight:700}.sidebar-tab:hover,.sidebar-tab.active{border-color:var(--line-strong);background:var(--panel-raised);color:var(--text)}.sidebar-tab-panel{min-height:0}.position-options{display:grid;grid-template-columns:repeat(4,32px);gap:6px}.position-options label{display:contents}.position-options input{position:absolute;inline-size:1px;block-size:1px;opacity:0}.position-options span{display:inline-grid;place-items:center;width:32px;min-width:32px;min-height:30px;border:1px solid var(--line-strong);border-radius:4px;background:var(--button-bg);color:var(--text);cursor:pointer}.position-options span:hover{border-color:var(--accent);background:var(--button-hover-bg)}.position-options input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)}.position-options input:focus-visible+span{outline:2px solid var(--focus);outline-offset:1px}.pattern-palette{display:grid;gap:12px}.pattern-group{display:grid;gap:5px}.pattern-group-title{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.toolbox-command-button,.pattern-button{display:grid;grid-template-columns:30px 1fr;align-items:start;gap:3px;width:100%;border:1px solid transparent;background:transparent;min-height:0;padding:8px;text-align:left}.toolbox-command-button{margin-bottom:12px;border-color:transparent;background:transparent}.toolbox-command-button:hover,.toolbox-command-button:focus-visible,.pattern-button:hover,.pattern-button:focus-visible{background:var(--accent-soft);border-color:var(--menu-hover-border)}.pattern-icon{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);border-radius:4px;background:var(--pattern-icon-bg);color:var(--accent-strong)}.pattern-icon svg{width:15px;height:15px}.pattern-copy{display:grid;gap:3px;min-width:0}.pattern-name{font-size:13px;font-weight:700;color:var(--text)}.pattern-description,.status-text,.empty-state,.css-target{color:var(--muted);font-size:12px;line-height:1.4}.status-text,.empty-state,.css-target{margin:10px 0 0}.outline-section{padding-right:8px}.outline{display:grid;gap:2px}.outline-item{width:100%;display:block;border:1px solid transparent;border-radius:3px;background:transparent;min-height:28px;padding:5px 8px;color:var(--text);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outline-item:hover,.outline-item.active{background:var(--accent-soft);border-color:var(--menu-hover-border);color:var(--outline-active-text)}.center-panel{display:grid;grid-template-rows:45px 1fr;min-width:0;min-height:0;background:var(--canvas-bg)}.view-tabs{display:flex;align-items:end;gap:4px;padding:8px 12px 0;background:var(--chrome-mid);border-bottom:1px solid var(--line)}.tab{min-width:84px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-color:var(--line);background:var(--chrome-dark);color:var(--muted)}.tab.active{background:var(--canvas-bg);border-bottom-color:var(--canvas-bg);color:var(--accent-strong)}.editor-view{display:none;min-width:0;min-height:0}.editor-view.active{display:block}.design-surface{position:relative;overflow:hidden}.design-frame{display:block;width:calc(100% - 24px);height:calc(100% - 24px);margin:12px;border:1px solid var(--frame-border);background:#fff;box-shadow:0 10px 22px #00000047}.selection-overlay{position:absolute;z-index:4;pointer-events:none;border:2px solid var(--accent-strong);box-shadow:0 0 0 1px #0000004d}.selection-overlay-popover{position:absolute;left:-2px;bottom:calc(100% + 2px);display:flex;align-items:center;max-width:min(420px,calc(100vw - 60px));pointer-events:auto}.selection-overlay-label{max-width:280px;min-height:30px;padding:6px 8px;border:1px solid var(--menu-hover-border);border-right:0;border-radius:4px 0 0;background:var(--popover-bg);color:var(--accent-strong);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selection-overlay-actions{display:inline-flex;align-items:center;gap:2px;min-height:30px;padding:0 3px;border:1px solid var(--menu-hover-border);border-radius:0 4px 0 0;background:var(--popover-bg)}.selection-overlay-actions button{width:26px;min-width:26px;min-height:24px}.selection-overlay-actions button[data-overlay-action=delete]{color:var(--danger)}.context-menu{position:absolute;z-index:8;display:grid;gap:2px;min-width:170px;padding:5px;background:var(--popover-bg);border:1px solid var(--line-strong);box-shadow:0 14px 28px #0000005c}.context-menu button{display:block;width:100%;min-height:28px;padding:5px 9px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--text);text-align:left}.context-menu button:hover,.context-menu button:focus-visible{border-color:var(--menu-hover-border);background:var(--accent-soft)}.code-workbench{display:grid;grid-template-rows:42px 1fr;width:100%;height:100%;min-height:0}.code-toolbar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--code-toolbar-bg);border-bottom:1px solid var(--code-toolbar-line);overflow-x:auto}.code-toolbar button{min-height:28px;padding:4px 8px;white-space:nowrap}.toolbar-divider{width:1px;height:22px;background:var(--line-strong);flex:0 0 auto}.code-editor,.monaco-host{width:100%;height:100%;border:0;min-height:0}.code-editor{display:block;resize:none;padding:18px;background:var(--code-bg);color:var(--text);line-height:1.45;-moz-tab-size:2;tab-size:2;outline:none}.monaco-host,.monaco-ready .code-editor{display:none}.monaco-ready .monaco-host{display:block}.inspector-form{display:grid;gap:12px}.inspector-form input,.inspector-form select,.inspector-form textarea{width:100%;border:1px solid var(--line-strong);border-radius:4px;background:var(--input-bg);color:var(--text);padding:8px;font-weight:400}.inspector-form input[readonly]{background:var(--chrome-mid);color:var(--muted)}.inspector-form textarea{resize:vertical;min-height:78px}.element-actions{display:flex;align-items:center;gap:6px}.element-actions button{flex:0 0 auto}.element-actions button[data-element-action=delete]{color:var(--danger)}.field-group{display:grid;gap:12px}.diagnostics-list{display:grid;gap:6px}.diagnostic-empty,.diagnostic-item{padding:8px;border:1px solid var(--line);border-radius:4px;background:var(--input-bg);color:var(--muted);font-size:12px;line-height:1.35}.diagnostic-item.warning{border-color:var(--diagnostic-warning-border);color:var(--diagnostic-warning-text)}.diagnostic-item.error{border-color:var(--diagnostic-error-border);color:var(--danger)}.secondary-button{width:100%;margin:12px 0}.status-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 10px;background:var(--title-bg);border-top:1px solid var(--button-bg);color:var(--muted);font-size:12px}.modal-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:grid;place-items:center;padding:28px;background:#00000094}.modal-panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(860px,100%);max-height:min(720px,calc(100vh - 56px));overflow:hidden;background:var(--panel);border:1px solid var(--line-strong);box-shadow:0 24px 64px #0000007a}.compact-modal-panel{width:min(460px,100%)}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px;border-bottom:1px solid var(--line);background:var(--panel-alt)}.modal-header h1{margin:0 0 4px;font-size:18px}.modal-header p{margin:0;color:var(--muted);font-size:13px}.template-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:12px;padding:18px;overflow:auto}.dialog-form{display:grid;gap:16px;padding:18px;overflow:auto}.dialog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dialog-form label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase}.dialog-form input[type=number]{width:100%;border:1px solid var(--line-strong);border-radius:4px;background:var(--input-bg);color:var(--text);padding:8px}.dialog-form .checkbox-row{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:400;text-transform:none}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}.secondary-action{background:transparent}.template-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;width:100%;min-height:112px;padding:12px;text-align:left}.template-wireframe{display:grid;align-content:start;gap:6px;min-height:82px;padding:8px;background:var(--template-wireframe-bg);border:1px solid var(--line)}.template-preview-bar{display:block;height:10px;background:var(--template-preview-bg)}.template-preview-style{width:32px}.template-preview-body,.template-preview-main,.template-preview-article{width:76px;height:28px}.template-preview-header,.template-preview-footer,.template-preview-hero,.template-preview-cta{width:64px}.template-preview-features{width:78px;height:18px}.template-preview-email{width:70px;height:34px;border:1px solid var(--template-email-border);background:var(--pattern-icon-bg)}.template-preview-aside{width:34px;justify-self:end}.template-copy{display:grid;align-content:start;gap:5px;min-width:0}.template-name{font-weight:700}.template-description{color:var(--muted);font-size:12px;line-height:1.4}.clipboard-buffer{position:fixed;left:-9999px;top:0}.hidden{display:none!important}@media (max-width: 1100px){body{min-width:760px}.app-shell{grid-template-columns:220px minmax(360px,1fr) 280px}}