:root{--bg: #0c0d10;--bg-raised: #121317;--bg-hover: #1a1c22;--bg-active: #22242c;--border: #23252d;--border-strong: #2e313b;--text: #e6e8ee;--text-dim: #9a9fad;--text-faint: #5c6170;--accent: #7dd3a8;--accent-dim: rgba(125, 211, 168, .12);--danger: #f0637e;--warn: #e8b45a;--info: #6cb2f5;--shadow: 0 16px 48px rgba(0, 0, 0, .5);--radius: 8px;--font-ui: "Segoe UI Variable", "Segoe UI", -apple-system, system-ui, sans-serif;--font-mono: "Cascadia Code", "JetBrains Mono", Consolas, "SF Mono", monospace;--editor-font-size: 13.5px;--stage-bg: #16171c}:root[data-theme=light]{--bg: #fafafa;--bg-raised: #ffffff;--bg-hover: #f0f0f2;--bg-active: #e8e8ec;--border: #e4e4e8;--border-strong: #d4d4da;--text: #1b1d23;--text-dim: #5c6170;--text-faint: #9a9fad;--accent: #14805a;--accent-dim: rgba(20, 128, 90, .1);--shadow: 0 16px 48px rgba(20, 24, 40, .18);--stage-bg: #ececef}*{margin:0;padding:0;box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{font-family:var(--font-ui);font-size:13px;background:var(--bg);color:var(--text);overflow:hidden;-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;height:100vh}.flex-spacer{flex:1}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;background:transparent;color:var(--text-dim);font:inherit;border-radius:6px;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap}.btn:hover{background:var(--bg-hover);color:var(--text)}.btn.active{color:var(--accent);background:var(--accent-dim)}.icon-btn{width:30px;height:30px}.icon-btn.sm{width:26px;height:26px}.icon-btn svg{width:16px;height:16px}.icon-btn.sm svg{width:14px;height:14px}.text-btn{padding:4px 10px;font-size:12px}.text-btn.accent{color:var(--accent);background:var(--accent-dim)}.text-btn.accent:hover{filter:brightness(1.15)}.kbd-btn{padding:5px 8px}.kbd-hint{font-size:11px;color:var(--text-faint);border:1px solid var(--border-strong);border-radius:4px;padding:1px 6px;letter-spacing:.4px}.kbd-btn:hover .kbd-hint{color:var(--text-dim)}.select{background:var(--bg-raised);color:var(--text-dim);border:1px solid var(--border);border-radius:6px;font:inherit;font-size:12px;padding:3px 6px;outline:none;cursor:pointer}.select:hover{color:var(--text);border-color:var(--border-strong)}.select:focus{border-color:var(--accent)}.topbar{display:flex;align-items:center;gap:10px;height:44px;padding:0 10px;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0}.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;letter-spacing:.2px;padding-right:4px;-webkit-user-select:none;user-select:none}.topbar-actions{display:flex;align-items:center;gap:2px}.tabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 12px;border-radius:6px;font-size:12.5px;color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background .12s,color .12s}.tab:hover{background:var(--bg-hover);color:var(--text)}.tab.active{background:var(--bg-active);color:var(--text)}.tab .close{display:inline-flex;border-radius:4px;padding:2px;color:var(--text-faint);visibility:hidden}.tab:hover .close,.tab.active .close{visibility:visible}.tab .close:hover{background:var(--border-strong);color:var(--text)}.tab .close svg{width:11px;height:11px}.tab-add{display:inline-flex;padding:5px;border-radius:6px;color:var(--text-faint);cursor:pointer}.tab-add:hover{background:var(--bg-hover);color:var(--text)}.tab-add svg{width:14px;height:14px}.workspace{display:flex;flex:1;min-height:0;background:var(--bg)}.workspace.vertical{flex-direction:column}.workspace.editor-only .preview-pane,.workspace.editor-only .resizer,.workspace.preview-only .editor-pane,.workspace.preview-only .resizer{display:none}.pane{display:flex;flex-direction:column;min-width:120px;min-height:100px;overflow:hidden}.editor-pane{flex:1 1 50%}.preview-pane{flex:1 1 50%;border-left:1px solid var(--border)}.workspace.vertical .preview-pane{border-left:none;border-top:1px solid var(--border)}.resizer{flex:0 0 5px;cursor:col-resize;position:relative;z-index:5}.resizer:after{content:"";position:absolute;top:0;right:1px;bottom:0;left:1px;border-radius:2px;background:transparent;transition:background .15s}.resizer:hover:after,.resizer.dragging:after{background:var(--accent);opacity:.55}.workspace.vertical .resizer{cursor:row-resize}.workspace.vertical .resizer:after{top:1px;right:0;bottom:1px;left:0}.editor-pane .cm-editor{height:100%;font-size:var(--editor-font-size)}.editor-pane .cm-editor.cm-focused{outline:none}.editor-pane .cm-scroller{font-family:var(--font-mono)}.pane-head{display:flex;align-items:center;gap:6px;height:36px;padding:0 8px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg)}.dim{font-size:11px;color:var(--text-faint);font-family:var(--font-mono)}.stage{flex:1;min-height:0;overflow:auto;background:var(--stage-bg);display:grid;place-items:start center;position:relative}.stage.fluid{display:block}.frame-box{background:#fff;position:relative;transform-origin:top center}.stage.fluid .frame-box{width:100%;height:100%;transform-origin:top left}.stage:not(.fluid){padding:24px}.stage:not(.fluid) .frame-box{border-radius:10px;overflow:hidden;box-shadow:0 12px 40px #00000059;outline:1px solid var(--border-strong)}#previewFrame{width:100%;height:100%;border:none;display:block;background:#fff}.preview-pane.editing .stage{outline:2px solid var(--accent);outline-offset:-2px}.edit-actions{display:inline-flex;gap:4px;align-items:center}.console{flex:0 0 30%;max-height:45%;display:flex;flex-direction:column;border-top:1px solid var(--border);background:var(--bg)}.console-head{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-faint);border-bottom:1px solid var(--border)}.console-body{flex:1;overflow-y:auto;font-family:var(--font-mono);font-size:12px;padding:4px 0}.console-line{display:flex;gap:10px;padding:2px 12px;border-left:2px solid transparent;white-space:pre-wrap;word-break:break-word;color:var(--text-dim)}.console-line.error{color:var(--danger);border-left-color:var(--danger);background:#f0637e0f}.console-line.warn{color:var(--warn);border-left-color:var(--warn)}.console-line.info{color:var(--info)}.console-empty{padding:14px 12px;color:var(--text-faint);font-size:12px}.statusbar{display:flex;align-items:center;gap:16px;height:26px;padding:0 12px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-faint);flex-shrink:0;-webkit-user-select:none;user-select:none}.live-dot{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.live-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-faint)}.live-dot.on{color:var(--accent)}.live-dot.on:before{background:var(--accent);box-shadow:0 0 6px var(--accent)}.palette-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;z-index:200;display:flex;justify-content:center;padding-top:12vh}.palette{width:min(560px,calc(100vw - 40px));max-height:60vh;background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;height:fit-content}.palette input{background:transparent;border:none;outline:none;color:var(--text);font:inherit;font-size:14px;padding:14px 16px;border-bottom:1px solid var(--border)}.palette input::placeholder{color:var(--text-faint)}.palette-list{overflow-y:auto;padding:6px}.palette-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;cursor:pointer;color:var(--text-dim)}.palette-item .cat{font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.6px;min-width:58px}.palette-item .label{flex:1;color:var(--text);font-size:13px}.palette-item .keys{font-size:11px;color:var(--text-faint);font-family:var(--font-mono)}.palette-item.selected{background:var(--accent-dim)}.palette-item.selected .label{color:var(--accent)}.palette-empty{padding:18px;text-align:center;color:var(--text-faint)}.menu-anchor{position:relative}.menu{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:10px;box-shadow:var(--shadow);padding:5px;z-index:150}.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;background:transparent;color:var(--text);font:inherit;font-size:12.5px;border-radius:6px;cursor:pointer;text-align:left}.menu-item:hover{background:var(--bg-hover)}.menu-item svg{width:14px;height:14px;color:var(--text-dim);flex-shrink:0}.menu-item small{color:var(--text-faint);margin-left:auto;font-size:11px}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;z-index:190;display:flex;align-items:center;justify-content:center;padding:20px}.dialog{background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow);width:min(480px,100%);max-height:80vh;overflow-y:auto;padding:20px}.dialog h3{font-size:15px;margin-bottom:6px}.dialog p{color:var(--text-dim);font-size:12.5px;line-height:1.55;margin-bottom:12px}.dialog input[type=text]{width:100%;background:var(--bg);border:1px solid var(--border-strong);border-radius:7px;color:var(--text);font:inherit;padding:9px 11px;outline:none;margin-bottom:14px}.dialog input[type=text]:focus{border-color:var(--accent)}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}.dialog-actions .btn{padding:7px 14px;border:1px solid var(--border-strong)}.dialog-actions .btn.primary{background:var(--accent);color:var(--bg);border-color:transparent;font-weight:600}.dialog-actions .btn.primary:hover{filter:brightness(1.1)}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 4px}.stat-cell{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;text-align:center}.stat-cell b{display:block;font-size:18px;font-family:var(--font-mono);color:var(--accent)}.stat-cell span{font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.6px}.check-list{list-style:none}.check-list li{display:flex;gap:8px;padding:7px 10px;border-radius:6px;font-size:12.5px;color:var(--text-dim);align-items:baseline}.check-list li b{color:var(--text);font-weight:500}.check-list li:before{content:"•"}.check-list li.warn:before{content:"▲";color:var(--warn);font-size:9px}.check-list li.ok:before{content:"✓";color:var(--accent)}.toasts{position:fixed;bottom:38px;right:14px;display:flex;flex-direction:column;gap:8px;z-index:300}.toast{background:var(--bg-raised);border:1px solid var(--border-strong);border-left:3px solid var(--accent);border-radius:8px;padding:9px 14px;font-size:12.5px;box-shadow:var(--shadow);max-width:320px;animation:toast-in .2s ease}.toast.error{border-left-color:var(--danger)}.toast.warn{border-left-color:var(--warn)}@keyframes toast-in{0%{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}.drop-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;background:#0c0d10bf;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--accent);border:2px dashed var(--accent)}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--text-faint)}::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}@media(max-width:760px){.workspace{flex-direction:column}.resizer{cursor:row-resize}.brand span,.kbd-btn{display:none}}