.canvas-element{position:absolute;touch-action:none;-webkit-user-select:none;user-select:none;z-index:10}.canvas-element[data-element-type=line],.canvas-element[data-element-type=rectangle],.canvas-element[data-element-type=circle]{z-index:1}.canvas-element.selected{outline:2px solid #2563eb;outline-offset:2px;box-shadow:0 0 0 4px #2563eb33}.canvas-element.dragging{opacity:.7}.canvas-element-text{padding:4px 8px;white-space:nowrap;pointer-events:none}.canvas-element-text span,.canvas-element-rectangle,.canvas-element-circle{pointer-events:none}.resize-handle{position:absolute;width:10px;height:10px;background-color:#2563eb;border:2px solid white;border-radius:2px;transform:translate(-50%,-50%);pointer-events:auto;cursor:move;z-index:100;box-shadow:0 2px 4px #0003}.resize-handle.nw{cursor:nwse-resize}.resize-handle.ne,.resize-handle.sw{cursor:nesw-resize}.resize-handle.se{cursor:nwse-resize}.resize-handle.n,.resize-handle.s{cursor:ns-resize}.resize-handle.e,.resize-handle.w{cursor:ew-resize}.resize-handle.start,.resize-handle.end{width:12px;height:12px;background-color:#2563eb;border-radius:50%;cursor:grab}.resize-handle.start:active,.resize-handle.end:active{cursor:grabbing}.resize-handle.p1,.resize-handle.p2,.resize-handle.p3{width:12px;height:12px;background-color:#2563eb;border-radius:50%;cursor:grab}.resize-handle.p1:active,.resize-handle.p2:active,.resize-handle.p3:active{cursor:grabbing}.resize-handle.radius{width:12px;height:12px;background-color:#2563eb;border-radius:50%;cursor:ew-resize}.resize-handle.startAngle,.resize-handle.endAngle{width:10px;height:10px;background-color:#f59e0b;border-radius:50%;cursor:grab}.resize-handle.startAngle:active,.resize-handle.endAngle:active{cursor:grabbing}.resize-handle.active{background-color:#1d4ed8;box-shadow:0 0 0 3px #2563eb4d,0 2px 8px #0000004d;transform:translate(-50%,-50%) scale(1.2)}.resize-handle.active.corner{border-color:#2563eb}.resize-dimensions-tooltip{background:#000000d9;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:0 2px 8px #0000004d;transform:translateY(-50%)}.group-selection-box{border:2px dashed var(--accent, #4f46e5);border-radius:4px;background:#4f46e50f;pointer-events:none;z-index:100}.inline-edit-popup{position:fixed;background:#1e293b;border-radius:8px;min-width:280px;max-width:320px;box-shadow:0 4px 16px #0000004d;border:1px solid #334155;z-index:1001;color:#f1f5f9}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #334155}.popup-title{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#0ea5e9}.popup-close{background:none;border:none;font-size:20px;color:#94a3b8;cursor:pointer;padding:0;line-height:1;transition:color .15s}.popup-close:hover{color:#f1f5f9}.popup-body{padding:16px}.popup-field{margin-bottom:12px}.popup-field:last-child{margin-bottom:0}.popup-field label{display:block;font-size:12px;color:#94a3b8;margin-bottom:6px}.popup-field input[type=text],.popup-field input[type=number],.popup-field select{width:100%;padding:8px 12px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#f1f5f9;font-size:14px;transition:border-color .15s}.popup-field input:focus,.popup-field select:focus{outline:none;border-color:#0ea5e9}.popup-field.checkbox-field{display:flex;align-items:center}.popup-field.checkbox-field label{margin-bottom:0;margin-left:8px;font-size:14px;color:#f1f5f9}.popup-footer{padding:12px 16px;border-top:1px solid #334155;display:flex;justify-content:flex-end}.popup-done{padding:8px 20px;background:#0ea5e9;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s}.popup-done:hover{background:#0284c7}.canvas-container{flex:1;display:flex;justify-content:center;align-items:center;background-color:#f5f5f5;padding:20px}.canvas-scaler{transform-origin:center center;display:inline-block}.canvas{background-color:#fff;border:2px solid #ccc;position:relative;box-shadow:0 2px 8px #0000001a;cursor:default}.context-menu{position:fixed;background-color:#fff;color:#333;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #00000026;z-index:1000;min-width:150px}@media(prefers-color-scheme:dark){.context-menu{background-color:#2d2d2d;color:#e0e0e0;border-color:#444;box-shadow:0 2px 8px #00000080}}.context-menu-item{display:block;width:100%;padding:8px 12px;border:none;background:none;color:inherit;text-align:left;cursor:pointer;font-size:14px;transition:background-color .2s}.context-menu-item:hover{background-color:#f0f0f0}@media(prefers-color-scheme:dark){.context-menu-item:hover{background-color:#3d3d3d}}.context-menu-item:first-child{border-radius:4px 4px 0 0}.context-menu-item:last-child{border-radius:0 0 4px 4px}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--surface-strong);border-radius:8px;padding:24px;max-width:480px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 16px #00000026;border:1px solid var(--surface-border)}.modal h2{margin:0 0 14px;font-size:16px;font-weight:600;color:var(--text-primary)}.modal p{margin:0 0 14px;font-size:13px;color:var(--text-secondary);line-height:1.5}.modal input,.modal textarea,.modal select{width:100%;padding:8px 10px;margin-bottom:12px;border:1px solid var(--surface-border);border-radius:4px;font-size:13px;background:var(--surface);color:var(--text-primary);font-family:inherit;transition:border-color .15s;box-sizing:border-box}.modal input:focus,.modal textarea:focus,.modal select:focus{outline:none;border-color:var(--accent)}.modal-buttons{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;padding-top:14px;border-top:1px solid var(--divider-soft)}.modal button{padding:8px 16px;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s;background:var(--accent);color:#fff}.modal button:hover:not(:disabled){background:var(--accent-strong)}.modal button:disabled{opacity:.5;cursor:not-allowed}.modal button.cancel{background:var(--surface);color:var(--text-primary);border:1px solid var(--surface-border)}.modal button.cancel:hover:not(:disabled){background:var(--surface-soft);border-color:var(--surface-outline)}:root[data-theme=dark] .modal-overlay{background:#000000a6}:root[data-theme=dark] .modal input,:root[data-theme=dark] .modal textarea,:root[data-theme=dark] .modal select{background:var(--surface-soft);border-color:var(--divider-strong)}:root[data-theme=dark] .modal input:focus,:root[data-theme=dark] .modal textarea:focus,:root[data-theme=dark] .modal select:focus{border-color:var(--accent)}.modal button.dangerous{background:#ef4444;color:#fff}.modal button.dangerous:hover:not(:disabled){background:#dc2626}.sidebar{width:240px;background:var(--surface);border-radius:8px;border:1px solid var(--surface-border);padding:0;overflow-y:auto;display:flex;flex-direction:column;color:var(--text-secondary);flex-shrink:0}.sidebar-section-header{display:flex;align-items:center;justify-content:space-between}.sidebar-collapse-btn{padding:4px;border:none;border-radius:4px;background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s}.sidebar-collapse-btn:hover{background:var(--neutral-overlay);color:var(--text-primary)}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:var(--neutral-overlay);border-radius:3px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar-section{display:flex;flex-direction:column;gap:10px;padding:12px;border-bottom:1px solid var(--divider-soft)}.sidebar-section:last-of-type{border-bottom:none}.sidebar-section h3{margin:0;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}.preset-controls{display:flex;flex-direction:column;gap:8px}.preset-buttons-row{display:flex;gap:8px}.preset-controls button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;border-radius:6px;border:1px solid var(--surface-border);background:var(--surface-soft);color:var(--text-primary);font-size:12px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s;flex:1}.preset-buttons-row button{flex:1}.preset-controls button:hover{border-color:var(--surface-outline);background:var(--neutral-overlay)}.save-preset-btn{color:var(--accent-strong);border-color:var(--accent)}.reset-canvas-btn{color:#b45309;border-color:#d4a233}.import-btn{color:#047857;border-color:#34d399}.presets-section{padding:8px;border-radius:6px;background:var(--surface-soft);border:1px solid var(--divider-soft)}.presets-section h4{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}.presets-list{display:flex;flex-direction:column;gap:4px;max-height:150px;overflow-y:auto}.preset-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border-radius:6px;border:1px solid var(--divider-soft);background:var(--surface);transition:border-color .15s}.preset-item:hover{border-color:var(--surface-outline)}.preset-name{flex:1;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--text-primary);font-weight:600;font-size:12px}.preset-name:hover{color:var(--accent)}.element-count{font-size:10px;color:var(--text-secondary);font-weight:500}.preset-actions{display:flex;gap:4px}.preset-actions button{padding:3px 6px;border-radius:4px;border:1px solid transparent;background:var(--neutral-overlay);color:var(--text-secondary);cursor:pointer;font-size:13px;transition:color .15s,background .15s;display:flex;align-items:center;justify-content:center}.preset-actions button:hover{background:var(--accent);color:#fff}.preset-actions .delete-btn:hover{background:#ef4444;color:#fff}.element-palette{display:grid;grid-template-columns:1fr 1fr;gap:4px}.palette-item{padding:6px 8px;background:var(--surface);border:1px solid var(--divider-soft);border-radius:4px;font-size:11px;font-weight:500;color:var(--text-primary);cursor:grab;transition:border-color .15s,background .15s;display:flex;align-items:center;gap:4px}.palette-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.palette-icon svg{width:14px;height:14px}.palette-label{white-space:nowrap}.palette-item:hover{border-color:var(--accent);background:var(--surface-soft)}.canvas-settings{display:flex;flex-wrap:wrap;gap:6px}.canvas-settings label{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--surface);border-radius:4px;border:1px solid var(--divider-soft);font-size:11px;font-weight:500;color:var(--text-secondary)}.canvas-settings input[type=number]{width:56px;padding:3px 4px;border-radius:3px;border:1px solid var(--divider-strong);font-size:11px;background:var(--surface-strong);transition:border-color .15s}.canvas-settings input[type=number]:focus{outline:none;border-color:var(--accent)}.canvas-settings input[type=checkbox]{width:14px;height:14px;cursor:pointer;accent-color:var(--accent)}.elements-list{display:flex;flex-direction:column;gap:4px;max-height:150px;overflow-y:auto;padding-right:4px}.empty-list{font-size:12px;color:var(--text-secondary);font-style:italic;padding:8px;text-align:center;background:var(--surface-soft);border-radius:6px;border:1px dashed var(--divider-strong)}.element-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;background:var(--surface);border:1px solid var(--divider-soft);border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}.element-item:hover{border-color:var(--surface-outline);background:var(--surface-soft)}.element-item.selected{background:var(--accent);color:#fff;border-color:var(--accent-strong)}.element-item-content{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.element-type{padding:1px 6px;background:var(--neutral-overlay);border-radius:3px;font-weight:600;font-size:10px;text-transform:uppercase;color:var(--accent)}.element-item.selected .element-type{background:#ffffff40;color:#fff}.element-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-btn,.duplicate-btn{padding:3px 5px;border-radius:4px;border:1px solid transparent;background:var(--neutral-overlay);color:var(--text-secondary);cursor:pointer;font-size:13px;transition:color .15s,background .15s;display:flex;align-items:center;justify-content:center}.delete-btn:hover{background:#fecaca;color:#b91c1c}:root[data-theme=dark] .delete-btn:hover{background:#ef444433;color:#fca5a5}.duplicate-btn:hover{background:var(--accent);color:#fff}.element-item.selected .delete-btn{color:#ffffffd9;background:#ffffff26}.grouping-section{display:flex;flex-direction:column;gap:10px}.create-group{display:flex;flex-direction:column;gap:8px;background:var(--surface);border-radius:6px;border:1px solid var(--divider-soft);padding:8px}.create-group input[type=text]{padding:6px 8px;border:1px solid var(--divider-strong);border-radius:4px;font-size:12px;font-weight:500;background:var(--surface-strong);transition:border-color .15s}.create-group input[type=text]:focus{outline:none;border-color:var(--accent)}.create-group button{padding:8px 10px;background:var(--surface-soft);color:var(--accent);border:1px solid var(--surface-border);border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:border-color .15s,background .15s}.create-group button:hover:not(:disabled){border-color:var(--accent);background:var(--neutral-overlay)}.create-group button:disabled{background:var(--surface-muted);border-color:var(--divider-soft);color:var(--text-secondary);cursor:not-allowed;opacity:.6}.groups-list{display:flex;flex-direction:column;gap:8px;max-height:250px;overflow-y:auto;padding-right:4px}.group-item{border:1px solid var(--divider-soft);border-radius:6px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:border-color .15s}.group-item:hover:not(.selected){border-color:var(--surface-outline)}.group-item.selected{background:var(--accent);border-color:var(--accent-strong)}.group-item.selected .group-header{background:#ffffff1a;border-bottom-color:#ffffff26}.group-item.selected .group-name,.group-item.selected .group-name:hover{color:#fff}.group-item.selected .group-elements{background:#ffffff0d}.group-item.selected .group-element{background:#ffffff1f;border-color:#ffffff26;color:#fff}.group-item.selected .element-type{background:#fff3;color:#fff}.group-item.selected .group-actions button{background:#ffffff26;color:#ffffffd9;border-color:#fff3}.group-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:var(--surface-soft);border-bottom:1px solid var(--divider-soft)}.group-name{flex:1;font-size:12px;font-weight:600;cursor:pointer;color:var(--text-primary);transition:color .15s}.group-name:hover{color:var(--accent)}.group-name-input{flex:1;padding:4px 6px;border:1px solid var(--accent);border-radius:4px;font-size:12px;font-weight:500;background:var(--surface-strong)}.group-actions{display:flex;gap:4px}.group-actions .delete-btn{padding:3px 5px}.group-elements{display:flex;flex-direction:column;gap:4px;padding:6px 8px 8px;background:var(--surface-muted)}.group-element{display:flex;align-items:center;gap:6px;padding:4px 6px;background:var(--surface);border:1px solid var(--divider-soft);border-radius:4px;font-size:11px;font-weight:500;color:var(--text-secondary)}.group-element .element-type{padding:1px 5px;font-size:9px;background:var(--neutral-overlay);color:var(--accent);border-radius:3px}.group-element .element-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.delete-selected-btn{width:100%;padding:8px;background:#ef4444;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:background .15s}.delete-selected-btn:hover{background:#dc2626}@media(max-width:1024px){.sidebar{width:100%;max-height:360px}}@media(max-width:768px){.import-section{flex-direction:column;align-items:stretch}.groups-list,.elements-list{max-height:220px}}.properties-panel{background:var(--surface);padding:0;display:flex;flex-direction:column;overflow-y:auto;color:var(--text-secondary)}.properties-panel::-webkit-scrollbar{width:6px}.properties-panel::-webkit-scrollbar-thumb{background:var(--neutral-overlay);border-radius:3px}.properties-header{position:sticky;top:0;padding:10px 14px;border-bottom:1px solid var(--divider-soft);display:flex;justify-content:space-between;align-items:center;background:var(--surface);z-index:10;gap:8px}.properties-header h3{margin:0;font-size:14px;font-weight:600;color:var(--text-primary);flex:1;min-width:0}.panel-collapse-btn{padding:4px;border:none;border-radius:4px;background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s}.panel-collapse-btn:hover{background:var(--neutral-overlay);color:var(--text-primary)}.properties-empty,.properties-note{margin:0;padding:14px;background:var(--surface-soft);border:1px dashed var(--divider-strong);font-size:12px;line-height:1.5;text-align:center;color:var(--text-secondary)}.properties-group{display:flex;flex-direction:column;gap:10px;padding:10px 12px;background:var(--surface);border-bottom:1px solid var(--divider-soft);margin:0}.properties-group:first-of-type{margin-top:0}.properties-group:last-of-type{margin-bottom:0;border-bottom:none}.properties-group label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--text-primary)}.properties-group input[type=text],.properties-group input[type=number],.properties-group select{flex:1;padding:6px 8px;border-radius:4px;border:1px solid var(--divider-strong);background:var(--surface-strong);font-size:12px;font-family:JetBrains Mono,SFMono-Regular,Consolas,Liberation Mono,monospace;transition:border-color .15s}.properties-group input[type=text]:focus,.properties-group input[type=number]:focus,.properties-group select:focus{outline:none;border-color:var(--accent)}.properties-group input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}.properties-group label input[type=checkbox]+span,.properties-group label input[type=checkbox]+input{font-family:inherit}.property-type{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:3px;background:var(--neutral-overlay);color:var(--accent);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.custom-format-section{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:var(--surface-soft);border:1px solid var(--divider-soft)}.custom-format-section label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:500;color:var(--text-primary)}.custom-format-section input[type=text]{padding:6px 8px;border-radius:4px;border:1px solid var(--divider-strong);background:var(--surface-strong);font-family:JetBrains Mono,SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:12px;transition:border-color .15s}.custom-format-section input[type=text]:focus{outline:none;border-color:var(--accent)}.format-reference{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--text-secondary)}.format-reference strong{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}.reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;font-family:JetBrains Mono,SFMono-Regular,Consolas,Liberation Mono,monospace}.reference-grid div{padding:4px 6px;background:var(--surface);border:1px solid var(--divider-soft);line-height:1.4}@media(max-width:1024px){.properties-panel{max-height:380px}}.code-output{background:var(--surface);padding:0;display:flex;flex-direction:column;overflow-y:auto;color:var(--text-secondary)}.code-output::-webkit-scrollbar{width:6px}.code-output::-webkit-scrollbar-thumb{background:var(--neutral-overlay);border-radius:3px}.code-output-header{position:sticky;top:0;padding:10px 14px;border-bottom:1px solid var(--divider-soft);display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface);z-index:10}.code-output-header h3{margin:0;font-size:14px;font-weight:600;color:var(--text-primary);flex:1;min-width:0}.code-output-controls{display:flex;align-items:center;gap:6px}.copy-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border-radius:6px;border:1px solid var(--surface-border);background:var(--surface-soft);color:var(--accent);font-size:12px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s;white-space:nowrap}.copy-button:hover:not(:disabled){border-color:var(--accent);background:var(--neutral-overlay)}.copy-button:disabled{opacity:.5;cursor:not-allowed}.code-collapse-btn{padding:4px;border:none;border-radius:4px;background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s}.code-collapse-btn:hover{background:var(--neutral-overlay);color:var(--text-primary)}.code-block{background:#0f172a;color:#e2e8f0;padding:12px;font-size:12px;line-height:1.6;overflow-x:auto;margin:12px;border:1px solid var(--divider-soft);border-radius:4px}.code-block code{font-family:JetBrains Mono,Fira Code,Courier New,monospace}.code-empty{font-size:12px;color:var(--text-secondary);padding:14px;text-align:center;border:1px dashed var(--divider-strong);background:var(--surface-soft);margin:12px}.validation-errors,.validation-warnings{padding:10px 12px;font-size:12px;display:flex;flex-direction:column;gap:6px;border:1px solid transparent;margin:0 12px}.validation-errors:first-of-type,.validation-warnings:first-of-type{margin-top:12px}.validation-errors{background:#fecaca8c;border-color:#f8717166;color:#7f1d1d}:root[data-theme=dark] .validation-errors{background:#ef444426;color:#fca5a5}.validation-warnings{background:#fde68a8c;border-color:#fbbf2466;color:#92400e}:root[data-theme=dark] .validation-warnings{background:#fbbf2426;color:#fde68a}.validation-title{font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11px}.error-message,.warning-message{line-height:1.4}@media(max-width:1024px){.code-output{max-height:380px}}*{box-sizing:border-box}:root{--bg: #f4f5f7;--surface: #ffffff;--surface-strong: #ffffff;--surface-soft: #f8f9fa;--surface-card: #ffffff;--surface-muted: #f4f5f7;--surface-border: #e0e3e8;--surface-outline: #d0d4da;--divider-soft: #e8eaed;--divider-strong: #d0d4da;--neutral-overlay: rgba(0, 0, 0, .06);--inset-highlight: rgba(255, 255, 255, .5);--surface-shadow: 0 1px 3px rgba(0, 0, 0, .08);--text-primary: #1a1d23;--text-secondary: #5f6672;--accent: #4f46e5;--accent-strong: #4338ca;--neutral: rgba(0, 0, 0, .06);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}:root[data-theme=dark]{--bg: #18191c;--surface: #232428;--surface-strong: #282a2e;--surface-soft: #1e1f23;--surface-card: #27282d;--surface-muted: #1e1f23;--surface-border: #35373d;--surface-outline: #43464e;--divider-soft: #2e3035;--divider-strong: #43464e;--neutral-overlay: rgba(255, 255, 255, .08);--inset-highlight: rgba(255, 255, 255, .06);--surface-shadow: 0 1px 3px rgba(0, 0, 0, .3);--text-primary: #eaecef;--text-secondary: #9ca0aa;--accent: #818cf8;--accent-strong: #a5b4fc;--neutral: rgba(255, 255, 255, .08)}html,body{margin:0;padding:0;font-family:var(--font-family);color:var(--text-primary);background:var(--bg);min-height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;height:100%}.app{display:flex;flex-direction:column;width:100vw;height:100vh;padding:8px;gap:8px}.app-header{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 14px;background:var(--surface);border-radius:8px;border:1px solid var(--surface-border);flex-shrink:0}.app-header h1{margin:0;font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}.app-header-actions{display:flex;align-items:center;gap:10px}.autosave-indicator{display:block;width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0}.theme-toggle-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid var(--surface-border);border-radius:6px;background:var(--surface-soft);color:var(--text-secondary);cursor:pointer;transition:color .15s,border-color .15s}.theme-toggle-btn:hover{color:var(--text-primary);border-color:var(--surface-outline)}.theme-toggle-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.app-layout{display:flex;flex:1;min-height:0;gap:8px;align-items:stretch}.minimized-sidebar{display:flex;align-items:center;justify-content:center;width:40px;padding:8px 0;background:var(--surface);border-radius:8px;border:1px solid var(--surface-border);flex-shrink:0;cursor:pointer;color:var(--text-secondary);transition:color .15s,border-color .15s}.minimized-sidebar:hover{color:var(--text-primary);border-color:var(--surface-outline)}.canvas-section{display:flex;flex-direction:column;flex:1;min-width:0;background:var(--surface);border-radius:8px;border:1px solid var(--surface-border);overflow:hidden}.right-panel{display:flex;flex-direction:column;width:280px;flex-shrink:0;gap:8px;min-height:0}.right-panel>.properties-panel,.right-panel>.code-output{width:100%;flex:1;min-height:0;border-radius:8px;border:1px solid var(--surface-border)}@media(max-width:1024px){.app-layout{flex-direction:column}.right-panel{width:100%;flex-direction:row}.right-panel>.properties-panel,.right-panel>.code-output{max-height:380px}}@media(max-width:768px){.app-header h1{font-size:13px}}