:root{--ui-text: #252525;--ui-text-secondary: #737373;--ui-text-disabled: #a3a3a3;--ui-border: #e6e6e6;--ui-surface: #fff;--ui-control-bg: #f5f5f5;--ui-hover: #ededed;--ui-accent: #0d99ff;--ui-accent-bg: #e8f3ff;--ui-component: #8b5cf6;--ui-danger: #b42318;--ui-control-height: 28px;--ui-icon-button-size: 28px;--ui-radius: 6px;--ui-space-1: 4px;--ui-space-2: 8px;--ui-space-3: 12px;--ui-space-4: 16px;--ui-shadow: 0 8px 32px #00000014, 0 2px 6px #00000008}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font:12px/1.5 -apple-system,PingFang SC,Microsoft YaHei,sans-serif;color:#333;background:#f5f5f5;overflow:hidden}.app{display:flex;flex-direction:column;height:100%}.main{display:flex;flex:1;min-height:0}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}ul{margin:0;padding:0;list-style:none}h3{margin:0;font-size:12px}.ui-icon{display:block;flex:none}.topbar{display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid var(--ui-border)}.topbar-left{display:flex;align-items:center}.design-file-btn{color:#555;text-decoration:none;border-radius:4px;padding:4px 8px;white-space:nowrap}.design-file-btn:hover{background:#f0f0f0}.design-file-error{position:absolute;top:42px;right:16px;z-index:50;max-width:420px;background:#fff0ee;color:#a22;border:1px solid #e8b6af;padding:8px 12px;border-radius:6px}.workspace-loading{padding:32px;display:flex;align-items:center;gap:16px}.topbar-right{display:flex;align-items:center}.topbar-right select{background:#f5f5f5;border:none;border-radius:4px;padding:4px 6px;color:#333;font:inherit}.tool-rail{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:12;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;width:max-content;max-width:calc(100% - 32px);padding:8px;background:#fff;border:1px solid #e5e5e5;border-radius:14px;box-shadow:0 4px 20px #0000001f}.rail-btn{display:flex;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;color:#333}.rail-btn:hover{background:#f0f0f0}.rail-btn.active{background:var(--ui-accent-bg);color:var(--ui-accent)}.rail-group{position:relative}.rail-flyout{position:absolute;left:0;bottom:calc(100% + 8px);z-index:20;display:flex;flex-direction:column;gap:2px;padding:4px;background:#fff;border:1px solid #e5e5e5;border-radius:8px;box-shadow:0 4px 16px #0000001f}.rail-flyout:before{content:"";position:absolute;left:-1px;right:-1px;bottom:-9px;height:9px}.flyout-item{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:6px;white-space:nowrap;color:#333}.flyout-item:hover{background:#f0f0f0}.flyout-item.active{background:var(--ui-accent-bg);color:var(--ui-accent)}.rail-divider{flex:none;width:1px;height:24px;background:#e5e5e5;margin:0 4px}.panel-resizer{flex:none;width:5px;margin:0 -2px;z-index:20;cursor:col-resize;position:relative}.panel-resizer:after{content:"";position:absolute;top:0;bottom:0;left:2px;width:1px;background:transparent;transition:background .1s}.panel-resizer:hover:after,.panel-resizer:active:after{background:var(--ui-accent);width:2px;left:1.5px}.layer-panel-wrap{flex:none;min-width:0;overflow:hidden}.layer-panel-wrap .layer-panel{width:100%;height:100%}.layer-panel{flex:none;width:220px;background:#fff;border-right:1px solid #e5e5e5;overflow:auto;padding:8px 0}.layer-panel h3{padding:0 12px 8px;color:#999}.layer-panel .row{display:flex;align-items:center;gap:6px;padding:4px 12px;cursor:default;-webkit-user-select:none;user-select:none}.layer-panel .row:hover{background:#f5f5f5}.layer-panel .row.selected{background:var(--ui-accent-bg);color:var(--ui-accent)}.layer-panel .row .caret{display:flex;align-items:center;justify-content:center;width:12px;flex:none;padding:0;color:#999}.layer-panel .row .icon{display:flex;align-items:center;flex:none;color:#999}.right-panel{display:flex;flex-direction:column;flex:none;width:260px;background:#fff;border-left:1px solid #e5e5e5}.right-panel .inspector{width:auto;border-left:none;flex:1}.inspector{padding:12px;overflow:auto;color:#333}.inspector h3{color:#999;margin-bottom:8px}.inspector label{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}.inspector input,.inspector select{width:120px;background:#f5f5f5;border:1px solid transparent;color:#333;border-radius:4px;padding:3px 6px;font:inherit}.inspector input:focus,.inspector select:focus{outline:none;border-color:var(--ui-accent);background:#fff}.inspector input[type=checkbox]{width:auto}.stage-wrap{position:relative;flex:1;min-width:0;background:#f5f5f5}.stage{display:block;width:100%;height:100%;touch-action:none}.perf-hud{position:absolute;top:28px;right:8px;background:#ffffffe6;border:1px solid #e5e5e5;color:#333;padding:6px 10px;border-radius:6px;font-family:ui-monospace,monospace;font-size:12px;pointer-events:none}.culling-toggle{position:absolute;top:28px;left:28px;background:#ffffffe6;border:1px solid #e5e5e5;color:#333;padding:6px 10px;border-radius:6px;display:flex;gap:6px;align-items:center}.rulers{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.ruler-h{position:absolute;top:0;left:20px;width:calc(100% - 20px);height:20px;pointer-events:auto;border-bottom:1px solid #e5e5e5}.ruler-v{position:absolute;top:20px;left:0;height:calc(100% - 20px);width:20px;pointer-events:auto;border-right:1px solid #e5e5e5}.ruler-corner{position:absolute;top:0;left:0;width:20px;height:20px;background:#fff;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}.text-edit-proxy{position:absolute;z-index:6;width:2px;height:1em;opacity:0;background:transparent;border:none;outline:none;resize:none;padding:0;caret-color:transparent;pointer-events:none;overflow:hidden}.export-btn{flex:1;background:var(--ui-accent);color:#fff;border-radius:4px;padding:6px 0}.export-btn:disabled{background:#ccc}.export-btn:not(:disabled):hover{background:#007be5}.ai-panel{border-top:1px solid #e5e5e5;padding:8px 12px;display:flex;flex-direction:column;height:280px;background:#fff}.ai-panel h3{margin:4px 0 8px;color:#999}.ai-messages{flex:1;overflow:auto;margin-bottom:8px}.ai-msg{padding:4px 8px;border-radius:6px;margin-bottom:4px}.ai-user{background:#f0f0f0}.ai-assistant{background:var(--ui-accent-bg)}.ai-error{background:#fee;color:#c00}.ai-panel form{display:flex;gap:6px}.ai-panel input{flex:1;background:#f5f5f5;border:1px solid transparent;color:#333;border-radius:4px;padding:5px 8px;font:inherit}.ai-panel input:focus{outline:none;border-color:var(--ui-accent);background:#fff}.ai-panel button{background:var(--ui-accent);color:#fff;border-radius:4px;padding:5px 12px}.ai-panel button:disabled{background:#ccc}body.cf-cursor-lock *{cursor:inherit!important}.color-field{position:relative;display:inline-block}.color-swatch{position:relative;overflow:hidden;width:28px;height:20px;padding:0;border:1px solid #e5e5e5;border-radius:4px;cursor:pointer;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%),linear-gradient(45deg,#ccc 25%,#fff 25%,#fff 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,4px 4px}.color-swatch-fill{position:absolute;top:0;right:0;bottom:0;left:0}.color-popover{position:absolute;left:0;top:26px;z-index:30;width:196px;padding:8px;background:#fff;border:1px solid #e5e5e5;border-radius:8px;box-shadow:0 4px 16px #0000001f}.color-popover.flip-up{top:auto;bottom:26px}.color-sv{position:relative;width:180px;height:140px;border-radius:4px;cursor:crosshair;touch-action:none;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent)}.color-hue{position:relative;width:180px;height:12px;margin-top:8px;border-radius:6px;cursor:pointer;touch-action:none;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.color-alpha{position:relative;width:180px;height:12px;margin-top:8px;border-radius:6px;cursor:pointer;touch-action:none;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%),linear-gradient(45deg,#ccc 25%,#fff 25%,#fff 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,4px 4px}.color-alpha-fill{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:6px}.color-sat,.color-val{position:relative;width:180px;height:12px;margin-top:8px;border-radius:6px;cursor:pointer;touch-action:none}.color-slider-fill{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:6px}.color-cursor{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 2px #0009;transform:translate(-50%,-50%);pointer-events:none}.color-hue .color-cursor,.color-alpha .color-cursor,.color-sat .color-cursor,.color-val .color-cursor{top:50%}.color-inputs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.color-inputs .color-mode{width:52px;padding:0 2px}.color-inputs .color-hex{flex:1;width:auto}.color-inputs .color-hsv-h,.color-inputs .color-hsv-s,.color-inputs .color-hsv-v{width:30px}.color-inputs .color-alpha-input{width:48px}.inspector-section{padding:12px 0;border-top:1px solid #e5e5e5}.inspector-section:first-of-type{border-top:none}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;font-weight:600;color:#333}.sub-label{font-size:11px;color:#999;margin:6px 0 4px}.field-col{flex:1;min-width:0;display:flex;flex-direction:column}.field-col .sub-label{margin:0 0 4px}.field-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.field-row>input,.field-row>select{flex:1;min-width:0}.prefix-input{display:flex;align-items:center;flex:1;min-width:0;background:#f5f5f5;border:1px solid transparent;border-radius:4px}.prefix-input span{flex:none;padding-left:8px;color:#999;pointer-events:none}.prefix-input input{flex:1;min-width:0;width:auto;background:transparent;border:none;border-radius:4px;padding:3px 6px 3px 4px;color:#333;font:inherit}.prefix-input:focus-within{border-color:var(--ui-accent);background:#fff}.icon-btn{display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:4px;color:#333}.icon-btn:hover{background:#f0f0f0}.icon-btn.active{background:var(--ui-accent-bg);color:var(--ui-accent)}.layer-panel .row{position:relative}.layer-panel .row[data-drop-position=inside]{background:var(--ui-accent-bg);outline:1px solid var(--ui-accent);outline-offset:-1px}.layer-panel .row[data-drop-position=above]:before,.layer-panel .row[data-drop-position=below]:after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ui-accent);pointer-events:none}.layer-panel .row[data-drop-position=above]:before{top:0}.layer-panel .row[data-drop-position=below]:after{bottom:0}.layer-tree-root-drop{margin:8px;padding:12px;border:1px dashed #999;color:#666}.layer-tree-root-drop[data-drop-position=root]{border-color:var(--ui-accent);color:var(--ui-accent);background:var(--ui-accent-bg)}.effects-panel .effect-actions,.effect-heading,.effect-order{display:flex;align-items:center;gap:4px}.effects-panel select{min-width:0;flex:1}.effects-panel button{padding:2px 5px;flex:0 0 auto}.effect-row{border-top:1px solid var(--border, #ddd);padding:8px 0}.effect-heading input[type=checkbox]{width:14px;margin:0}.effect-order{justify-content:flex-end;margin:4px 0}.effect-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;margin-bottom:8px}.effect-number{display:flex;gap:4px;align-items:center;min-width:0}.effect-number span{font-size:11px;flex:0 0 auto}.effect-number input{min-width:0;width:0;flex:1}.auto-layout-panel .field-row{gap:6px}.auto-layout-panel button{border:1px solid #ddd;border-radius:4px;background:#fff;padding:4px 7px;color:inherit;cursor:pointer}.auto-layout-panel button[aria-pressed=true]{border-color:var(--ui-accent);color:var(--ui-accent);background:var(--ui-accent-bg)}.layout-number,.layout-align{display:flex;align-items:center;gap:6px;min-width:0;margin:5px 0;font-size:11px}.layout-number span,.layout-align span{flex:0 0 auto;color:#666}.layout-number input,.layout-align select{min-width:0;width:100%;border:1px solid #ddd;border-radius:4px;padding:5px;background:#fafafa}.layout-padding{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}.layout-help{font-size:11px;color:#777;line-height:1.5;margin:7px 0}.prefix-input input[readonly]{color:#888;cursor:default}.layout-align{flex:1;flex-direction:column;align-items:stretch;gap:4px}.sizing-mode{flex:1;min-width:0;display:flex;align-items:center;gap:4px}.sizing-mode span{color:#999;font-size:11px}.sizing-mode select{min-width:0;width:100%}.sizing-preset{display:flex;justify-content:space-between;align-items:center;gap:8px}.sizing-modes{margin-top:8px}.sizing-axis{flex:1;min-width:0}.sizing-inheritance{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:4px;font-size:11px;color:#777}.sizing-local{color:#a66512}.sizing-local button{font:inherit;white-space:nowrap;cursor:pointer}.inherited-fields{border:0;margin:0;padding:0;min-width:0}.inherited-fields:disabled{opacity:.65}.component-controls button{font:inherit;cursor:pointer;border:1px solid #ddd;border-radius:4px;background:#fff;padding:5px 8px;color:inherit}.component-controls>button{width:100%}.component-controls .component-primary{border-color:var(--ui-component);background:#f6f0ff;color:var(--ui-component)}.component-controls button:disabled{opacity:.55;cursor:default}.component-source{color:#777;font-size:11px;overflow-wrap:anywhere}.component-actions,.component-override{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:6px 0}.component-override{font-size:12px}.layer-panel [aria-label=主组件],.layer-panel [aria-label=组件实例]{color:var(--ui-component)}.font-picker{display:grid;gap:6px;margin:8px 0}.font-picker input,.font-picker select{min-width:0;width:100%}.font-picker small{color:#8b5a26;line-height:1.5}.save-message{font-size:11px;max-width:320px}.render-error{position:absolute;top:60px;left:280px;right:300px;padding:10px;z-index:20;background:#fff0e8;color:#8a3300;border:1px solid #e6ab86;border-radius:6px}.fill-field{display:flex;align-items:center;flex-wrap:wrap;width:100%;gap:6px}.paint-swatch{display:block;width:100%;height:100%}.fill-popover{width:100%;margin-top:8px;padding:10px;box-sizing:border-box;background:#fff;border:1px solid #ddd;border-radius:6px}.fill-editor-heading,.gradient-actions{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:12px}.fill-editor-heading select{flex:1}.fill-popover button{cursor:pointer;border:1px solid #ddd;border-radius:4px;background:#fafafa;padding:3px 8px}.fill-popover button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}.fill-popover button:disabled{opacity:.4;cursor:default}.fill-popover .color-field{display:block;width:100%}.fill-popover .color-popover{position:static;width:100%;box-sizing:border-box;box-shadow:none;border:none;padding:0}.gradient-strip{position:relative;width:calc(100% - 12px);height:24px;margin:0 6px 18px;border-radius:3px;background:repeating-conic-gradient(#ddd,#ddd 25%,#fff 0%,#fff 50%) 0 / 8px 8px}.gradient-strip .gradient-stop{position:absolute;top:16px;transform:translate(-50%);width:12px;height:16px;padding:0;border:2px solid #fff;box-shadow:0 0 0 1px #888}.gradient-strip .gradient-stop.selected{box-shadow:0 0 0 2px var(--ui-accent);z-index:1}.gradient-number input{max-width:90px}.gradient-geometry{margin-top:8px}.gradient-geometry summary{cursor:pointer;margin-bottom:8px}.gradient-hint{color:#888;font-size:11px;line-height:1.5;margin:8px 0 0}.inspector .clip-content-control{justify-content:flex-start;gap:8px}.inspector .clip-content-control input{flex:none;width:auto}.line-cap-controls{display:flex;gap:6px;align-items:flex-end;margin-top:8px}.line-cap-picker{position:relative;flex:1;min-width:0}.line-cap-label{display:block;color:var(--text-muted, #999);font-size:11px;margin-bottom:5px}.line-cap-trigger{display:flex;align-items:center;width:100%;height:30px;padding:2px 7px;border:1px solid var(--border, #ddd);border-radius:5px;background:var(--panel-bg, #fff);color:inherit}.line-cap-trigger svg{width:100%;height:24px}.line-cap-swap{height:30px;width:26px;padding:0;color:inherit;background:transparent;border:0;font-size:20px}.line-cap-menu{position:absolute;top:100%;left:0;z-index:40;width:174px;padding:4px;background:var(--panel-bg, #fff);border:1px solid var(--border, #ddd);border-radius:6px;box-shadow:0 4px 14px #0005}.line-cap-picker:nth-child(2) .line-cap-menu{left:auto;right:0}.line-cap-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;border:0;border-radius:3px;color:inherit;background:transparent;text-align:left;font-size:12px}.line-cap-menu svg{width:64px;height:24px}.line-cap-menu button.focused{background:var(--ui-accent-bg)}.line-cap-trigger:focus-visible,.line-cap-swap:focus-visible,.line-cap-menu:focus-visible{outline:2px solid #18a0fb;outline-offset:1px}.line-cap-controls button:disabled{opacity:.45;cursor:default}.line-cap-menu.up{top:auto;bottom:calc(100% + 4px)}.line-cap-menu{max-height:calc(100vh - 100px);overflow:auto}.path-panel .field-row>label{display:flex;align-items:center;gap:6px;flex:1;min-width:0;white-space:nowrap}.path-panel .field-row>label>input,.path-panel .field-row>label>select{flex:1;min-width:0;width:100%}.path-panel small{display:block;margin:8px 0;color:#888;line-height:1.5}.path-panel button{margin:3px 0}.pen-tool-hint{position:absolute;left:50%;bottom:24px;transform:translate(-50%);z-index:8;padding:8px 12px;border-radius:8px;background:#fffffff0;color:#5f6b7a;font-size:12px;white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px #00000014}.layer-panel-header{display:flex;align-items:center;justify-content:space-between;padding-right:12px}.layer-panel-header button{color:#888;font-size:11px;padding:0 0 8px}.layer-panel .row{min-height:28px;flex-wrap:nowrap}.layer-panel .caret-placeholder{width:12px;flex:none}.layer-panel .layer-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-panel .layer-hidden .layer-name,.layer-panel .layer-hidden .icon{opacity:.45}.layer-row-actions{display:flex;align-items:center;flex:none;gap:2px;opacity:0}.row:hover .layer-row-actions,.row.selected .layer-row-actions,.row:focus-within .layer-row-actions,.layer-row-actions.has-state{opacity:1}.layer-row-actions button{display:flex;padding:2px;width:20px;height:20px;align-items:center;justify-content:center;color:#777;border-radius:3px}.layer-row-actions button:hover{background:#ddd8}.layer-row-actions button:disabled{opacity:.4;cursor:default}.layer-name-input{flex:1;min-width:0;width:80px;font:inherit;border:1px solid var(--ui-accent);border-radius:2px;padding:1px 3px;outline:none}.layer-context-menu{position:fixed;z-index:80;min-width:172px;padding:4px;border:1px solid #ddd;border-radius:7px;background:#fff;box-shadow:0 4px 20px #0002}.layer-context-menu button{display:block;width:100%;text-align:left;border-radius:4px;padding:6px 12px}.layer-context-menu button:hover,.layer-context-menu button:focus-visible{background:var(--ui-accent-bg);outline:none}.layer-context-menu button:disabled{color:#aaa;cursor:default}.layer-dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0003;z-index:90;display:flex;align-items:center;justify-content:center}.layer-rename-dialog{width:340px;padding:20px;border-radius:10px;background:#fff;box-shadow:0 8px 32px #0003}.layer-rename-dialog h3{padding:0;color:#333;font-size:14px;margin-bottom:14px}.layer-rename-dialog input{width:100%;padding:7px;font:inherit;border:1px solid #ccc;border-radius:4px}.layer-rename-dialog p{color:#888}.layer-dialog-actions{display:flex;justify-content:flex-end;gap:10px}.layer-dialog-actions button{padding:6px 12px;background:#f3f3f3;border-radius:4px}.layer-dialog-actions button[type=submit]{background:var(--ui-accent);color:#fff}.prototype-panel{padding:16px;font-size:12px;overflow:auto}.prototype-panel h3{margin:0 0 14px;font-size:14px}.prototype-panel h4{margin:18px 0 10px}.prototype-help{color:#788395;line-height:1.7}.prototype-warning{color:#b45309;line-height:1.6}.prototype-field{display:flex;flex-direction:column;gap:7px;margin:14px 0;color:#596579}.prototype-field input,.prototype-field select{width:100%;padding:9px;border:1px solid #dde2ea;border-radius:6px;background:#fff;color:#1e293b}.prototype-panel button{border:1px solid #dde2ea;border-radius:6px;padding:7px 10px;background:#fff;color:#475569;cursor:pointer}.prototype-panel button:disabled{opacity:.45;cursor:default}.prototype-page-settings{border-top:1px solid #e2e8f0;margin-top:18px}.prototype-repair{position:absolute;top:60px;left:50%;transform:translate(-50%);z-index:20;padding:8px 16px;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px}.editor-shell{display:contents}.prototype-player{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;flex-direction:column;background:#111827;color:#e2e8f0;outline:none}.prototype-player header{height:60px;flex-shrink:0;display:flex;align-items:center;gap:18px;padding:0 22px;background:#1e293b;border-bottom:1px solid #334155}.prototype-player header button{background:#334155;color:#fff;padding:8px 14px;border:1px solid #475569;border-radius:6px;cursor:pointer}.prototype-player-hint{margin-left:auto;color:#94a3b8;font-size:12px}.prototype-player-stage{position:relative;flex:1;overflow:hidden}.prototype-screen{position:absolute;background:#fff;overflow:hidden;box-shadow:0 12px 50px #0006}.prototype-canvas{display:block;width:100%;height:100%;touch-action:none}.prototype-overlay-layer{position:absolute;background:#00000059;display:flex;align-items:center;justify-content:center}.prototype-overlay-content{position:relative;background:transparent;filter:drop-shadow(0 12px 24px #0003)}.prototype-player-message,.prototype-error{position:absolute;bottom:18px;left:50%;transform:translate(-50%);border-radius:8px;padding:10px 18px;background:#fff7ed;color:#9a3412;font-size:13px}.prototype-wait{opacity:0;pointer-events:none}.prototype-in{animation:prototype-in ease-in-out both}.prototype-out{animation:prototype-out ease-in-out both;pointer-events:none}@keyframes prototype-in{0%{opacity:0}to{opacity:1}}@keyframes prototype-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.prototype-in,.prototype-out{animation-duration:0ms!important}}.layer-panel-wrap{display:flex;flex-direction:column;min-height:0;overflow:hidden}.layer-panel-wrap>.layer-panel{flex:1;min-height:0;width:100%}.pages-panel{flex:none;border-bottom:1px solid #e5e7eb;padding:10px 8px;font-size:12px;background:#fff}.pages-header{display:flex;align-items:center;justify-content:space-between;padding:0 5px 6px}.pages-header h3{margin:0;font-size:12px}.pages-panel button{border:0;background:transparent;cursor:pointer;color:inherit;border-radius:4px}.pages-panel button:disabled{opacity:.3;cursor:default}.pages-header button{display:flex;align-items:center;justify-content:center;width:26px;height:26px}.pages-panel ul{list-style:none;padding:0;margin:0;max-height:180px;overflow:auto}.page-row{display:flex;align-items:center;height:30px;border-radius:5px}.page-row.active{background:var(--ui-accent-bg);color:var(--ui-accent)}.page-name{display:flex;align-items:center;gap:6px;flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%;padding:0 7px}.page-name .page-title{min-width:0;overflow:hidden;text-overflow:ellipsis}.page-actions{display:flex;visibility:hidden}.page-row:hover .page-actions,.page-row:focus-within .page-actions{visibility:visible}.page-actions button{display:flex;align-items:center;justify-content:center;width:24px;height:26px;padding:0}.page-row input{flex:1;min-width:0;padding:4px;border:1px solid var(--ui-accent);border-radius:4px}.page-delete-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0004;display:flex;align-items:center;justify-content:center}.page-delete-dialog{width:340px;background:#fff;padding:22px;border-radius:10px;box-shadow:0 12px 36px #0002;color:#222}.page-delete-dialog h3{margin:0 0 12px}.page-delete-dialog p{line-height:1.6}.page-delete-dialog>div{display:flex;justify-content:flex-end;gap:12px}.page-delete-dialog button{background:#f1f3f6;padding:8px 14px}.page-delete-dialog button:last-child{background:#d83d3d;color:#fff}.layer-panel-wrap>.layer-panel{height:auto}.layer-panel .row{min-height:34px;gap:5px}.layer-panel .row>.icon{width:16px;text-align:center;font-size:13px}.app{color:var(--ui-text)}.topbar{height:48px;flex:none;gap:16px;padding:0 12px;border-color:var(--ui-border);position:relative;z-index:40}.topbar-left{min-width:0;flex:1;gap:8px}.doc-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.topbar-right{flex:none;gap:12px}.zoom{min-width:36px;text-align:center;color:var(--ui-text-secondary);font-variant-numeric:tabular-nums}.editor-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:var(--ui-control-height);padding:0 8px;border:1px solid transparent;border-radius:var(--ui-radius);color:var(--ui-text);white-space:nowrap}.editor-button:hover:not(:disabled){background:var(--ui-hover)}.editor-button:active:not(:disabled){background:#e2e2e2}.editor-button:disabled{color:var(--ui-text-disabled);cursor:default}.editor-button-primary{background:var(--ui-accent);color:#fff;padding:0 12px}.editor-button-primary:hover:not(:disabled){background:#0086e6}.editor-button-primary:disabled{background:var(--ui-control-bg)}.editor-button-danger{color:var(--ui-danger)}.editor-button-icon{width:var(--ui-icon-button-size);padding:0}.editor-button:focus-visible,.rail-btn:focus-visible,.icon-btn:focus-visible,.page-name:focus-visible,.layer-row-actions button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}.mode-switch{display:flex;background:var(--ui-control-bg);padding:2px;border-radius:8px;gap:2px}.mode-switch .editor-button{height:26px;color:var(--ui-text-secondary)}.mode-switch .editor-button[aria-pressed=true]{color:var(--ui-accent);background:#fff;box-shadow:0 1px 3px #0000000d}.history-actions{display:flex;gap:2px;border-left:1px solid var(--ui-border);padding-left:8px}.editor-menu{position:fixed;z-index:150;min-width:200px;max-width:calc(100vw - 16px);overflow:auto;padding:4px;background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:8px;box-shadow:var(--ui-shadow)}.editor-menu>:is(button,a){display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:0 8px;border:0;border-radius:4px;color:inherit;text-decoration:none;text-align:left;white-space:nowrap;font:inherit}.editor-menu>:is(button,a):focus,.editor-menu>:is(button,a):hover:not(:disabled){outline:none;background:var(--ui-accent-bg)}.editor-menu>button:disabled{color:var(--ui-text-disabled);cursor:default}.menu-check{display:flex;width:14px;flex:none;color:var(--ui-accent)}.editor-menu kbd{margin-left:auto;color:var(--ui-text-secondary);font:inherit}.editor-tooltip{position:fixed;z-index:300;width:max-content;max-width:calc(100vw - 16px);padding:6px 9px;border-radius:5px;font-size:11px;line-height:1.5;color:#fff;background:#252525;box-shadow:var(--ui-shadow);pointer-events:none}.editor-debug{position:absolute;right:12px;top:44px;z-index:151;width:248px;max-width:calc(100vw - 16px);background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:8px;padding:12px;box-shadow:var(--ui-shadow)}.editor-debug label{display:flex;align-items:center;gap:8px;margin:8px 0}.editor-debug select{min-width:0;flex:1;height:28px;border:1px solid var(--ui-border);border-radius:6px;background:var(--ui-control-bg);font:inherit}.editor-debug input{accent-color:var(--ui-accent)}.editor-file-status{position:absolute;top:52px;left:12px;max-width:min(480px,calc(100vw - 24px));padding:8px 12px;background:#fff;border:1px solid var(--ui-border);border-radius:8px;box-shadow:var(--ui-shadow)}.editor-file-status[role=alert]{color:var(--ui-danger)}.inspector{padding:0 12px 16px;color:var(--ui-text)}.inspector>h3{display:none}.inspector-section{padding:12px 0;border-color:var(--ui-border)}.section-title{min-height:24px;margin-bottom:8px;color:var(--ui-text);font-weight:600}.sub-label{color:var(--ui-text-secondary);font-size:11px}.inspector :is(input:not([type=checkbox]),select),.prototype-panel :is(input:not([type=checkbox]),select),.ai-panel input{height:var(--ui-control-height);border-radius:var(--ui-radius);background:var(--ui-control-bg);border:1px solid transparent;color:var(--ui-text);padding:0 7px;font:inherit;min-width:0}.inspector :is(input,select):focus,.prototype-panel :is(input,select):focus,.ai-panel input:focus{outline:none;border-color:var(--ui-accent);background:#fff}.inspector input:read-only{color:var(--ui-text-secondary)}.inspector input[type=checkbox],.prototype-panel input[type=checkbox]{width:auto;accent-color:var(--ui-accent)}.prefix-input{height:var(--ui-control-height);border-radius:var(--ui-radius);background:var(--ui-control-bg)}.inspector .prefix-input input{background:transparent;border:0;padding-left:5px;width:0}.prefix-input span{color:var(--ui-text-secondary);font-size:11px}.field-row{gap:8px;margin-bottom:8px}.field-row:last-child{margin-bottom:0}.field-row:has(.icon-btn){gap:1px;flex-wrap:wrap}.icon-btn{width:27px;height:28px;border-radius:5px}.icon-btn:disabled{color:var(--ui-text-disabled);cursor:default}.icon-btn:disabled:hover{background:transparent}.inspector-empty{padding:28px 8px;text-align:center;color:var(--ui-text-secondary)}.inspector-empty strong{font-weight:500;color:var(--ui-text)}.inspector-empty p{margin:12px 0 6px}.inspector-empty span{font-size:11px}.selection-summary{color:var(--ui-text-secondary)}.component-compact{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.component-compact>span{margin-right:auto;font-weight:600}.component-controls .component-compact .editor-button{width:auto;padding:0 6px;background:transparent;border-color:transparent}.component-controls .component-compact .editor-button-icon{width:24px;color:var(--ui-text-secondary)}.component-controls .component-compact .editor-button:disabled{color:var(--ui-text-disabled)}.component-help{flex-basis:100%;margin:6px 0 0}.inspector :is(.auto-layout-panel,.component-controls,.effects-panel,.font-picker) button:not(.icon-btn):not(.color-swatch){border-radius:var(--ui-radius);min-height:28px}.inspector :is(.auto-layout-panel,.effects-panel) select{height:28px}.auto-layout-panel button[aria-pressed=true]{background:var(--ui-accent-bg);color:var(--ui-accent);border-color:var(--ui-accent)}.layout-number{gap:8px}.layout-padding{gap:4px 8px}.layout-help{color:var(--ui-text-secondary);font-size:11px}.component-controls .component-primary{color:var(--ui-component);border-color:#ddd1fc}.component-controls button{font-size:11px}.sizing-mode{flex-direction:column;align-items:stretch;gap:4px}.sizing-mode select{width:100%}.sizing-mode span{color:var(--ui-text-secondary)}.effect-fields{gap:8px}.effect-number{flex-direction:column;align-items:stretch}.effect-number input{width:100%}.prototype-panel{padding:12px}.prototype-panel h3{font-size:12px;font-weight:600}.prototype-field{gap:6px;margin:12px 0}.prototype-panel button{height:28px;padding:0 8px;border-color:var(--ui-border);color:var(--ui-text);border-radius:var(--ui-radius)}.pages-panel{padding:8px;border-color:var(--ui-border)}.pages-header{padding-bottom:6px}.page-row{height:32px;border-radius:var(--ui-radius)}.page-row.active{color:var(--ui-accent);background:var(--ui-accent-bg)}.layer-panel{padding-top:8px;border-color:var(--ui-border)}.layer-panel-header h3{color:var(--ui-text-secondary)}.layer-panel .row{height:32px;min-height:32px;gap:5px;padding-right:8px;border-radius:0}.layer-panel .row .icon{color:#a3a3a3}.layer-panel .row [aria-label=主组件],.layer-panel .row [aria-label=组件实例]{color:var(--ui-component)}.layer-panel .layer-name{min-width:0;font-size:12px}.layer-row-actions{flex:none;gap:1px}.layer-row-actions button{width:20px;height:24px;padding:0;border-radius:4px}.layer-row-actions button:hover:not(:disabled){background:#00000008}.layer-panel .row.selected{color:var(--ui-accent);background:var(--ui-accent-bg)}.layer-row-actions button:disabled{color:var(--ui-text-disabled)}.color-popover,.fill-popover,.layer-context-menu,.page-delete-dialog{border-color:var(--ui-border);border-radius:8px;box-shadow:var(--ui-shadow)}.color-popover,.fill-popover{overflow:auto;max-width:calc(100vw - 16px);overscroll-behavior:contain}.editor-floating{position:fixed;z-index:160}.fill-popover.editor-floating{width:248px}.color-popover.editor-floating{width:196px}.inspector .color-swatch{width:28px;height:24px;border-radius:5px}@media (max-width: 1000px){.topbar{gap:8px;padding:0 8px}.topbar-right{gap:4px}.topbar .editor-button{padding:0 6px}.topbar .editor-button-icon{padding:0}.doc-name{max-width:180px}.history-actions{padding-left:4px}.zoom{font-size:11px;min-width:30px}}.layer-row-actions{position:absolute;right:6px;top:4px}.row:is(:hover,:focus-within,.selected) .layer-name,.row:has(.layer-row-actions.has-state) .layer-name{margin-right:42px}.inspector :is(.path-panel,.line-cap-controls) button:not(.icon-btn){min-height:28px;padding:0 6px;border:1px solid var(--ui-border);border-radius:var(--ui-radius)}.section-title>span{flex:none;white-space:nowrap}.effect-actions{flex:1;min-width:0;margin-left:8px}.effect-actions select{flex:1;width:0;min-width:0}.inspector .color-inputs .color-mode{padding:0 2px;flex:none;width:52px}.inspector .sizing-preset{white-space:nowrap}.sizing-preset select{flex:1;width:0}.startup-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:grid;place-items:center;background:var(--editor-surface,#fff)}.startup-card{width:min(420px,calc(100vw - 48px));color:var(--editor-text,#202124)}.startup-brand{font-size:15px;font-weight:650;letter-spacing:-.2px;color:#1685ef;margin-bottom:32px}.startup-card h1{font-size:20px;font-weight:600;margin:0 0 24px}.startup-track{height:5px;border-radius:3px;background:#edf0f4;overflow:hidden}.startup-track>div{height:100%;background:#1685ef;transition:width .12s linear}.startup-detail{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#69717d;margin-top:14px}.startup-actions{display:flex;align-items:center;gap:16px;margin-top:24px;font-size:13px}.startup-actions button,.module-unavailable button,.module-warning button{padding:6px 12px;border:1px solid #d9e1eb;border-radius:5px;background:#fff;color:#1685ef;cursor:pointer}.startup-actions a{color:#69717d}.module-warning,.module-unavailable{padding:8px 12px;font-size:12px;color:#7a5714;background:#fff8e8}.module-warning button,.module-unavailable button{margin-left:8px}@media (prefers-reduced-motion:reduce){.startup-track>div{transition:none}}