:root{--primary-color: #4a6fa5;--secondary-color: #6e9cd2;--dark-color: #2c3e50;--light-color: #ecf0f1;--border-color: #ddd;--shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);--bg-color: #f5f7fa;--text-color: #333;--editor-bg: #fff;--panel-bg: #fff;--toolbar-bg: #2c3e50;--toolbar-text: #fff;--tab-active-bg: #fff;--tab-bg: #f1f1f1}body.dark-theme{--primary-color: #6e9cd2;--secondary-color: #4a6fa5;--dark-color: #1a1a2e;--light-color: #2a2a3c;--border-color: #444;--shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .5);--bg-color: #121212;--text-color: #e0e0e0;--editor-bg: #1e1e1e;--panel-bg: #1e1e1e;--toolbar-bg: #1a1a2e;--toolbar-text: #e0e0e0;--tab-active-bg: #1e1e1e;--tab-bg: #2a2a3c}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:var(--text-color);background-color:var(--bg-color);overflow:hidden;height:100vh;transition:background-color .3s ease}.toolbar{background-color:var(--toolbar-bg);color:var(--toolbar-text);padding:10px;display:flex;justify-content:space-between;box-shadow:var(--shadow);z-index:100}.toolbar h1{font-size:1.2rem;margin:0}.toolbar-actions button{margin-left:8px;background:var(--secondary-color);border:none;color:#fff;padding:5px 12px;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background .2s}.toolbar-actions button:hover{background:var(--primary-color)}.main-container{display:flex;height:calc(100vh - 52px)}.tools-panel{width:200px;background:var(--panel-bg);border-right:1px solid var(--border-color);padding:10px;overflow-y:auto}.tools-section{margin-bottom:15px}.tools-section h3{margin-bottom:8px;font-size:.9rem;color:var(--dark-color);text-transform:uppercase;padding-bottom:5px;border-bottom:1px solid var(--border-color)}.element-button{width:100%;padding:8px;margin-bottom:5px;background:var(--light-color);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;text-align:left;transition:all .2s;color:var(--text-color)}.element-button:hover{background:var(--secondary-color);color:#fff}.workspace{display:flex;flex:1}#editor{width:50%;display:flex;flex-direction:column;border-right:1px solid var(--border-color)}.editor-tabs{display:flex;background:var(--light-color);border-bottom:1px solid var(--border-color)}.editor-tab{padding:8px 15px;cursor:pointer;border-right:1px solid var(--border-color);background:var(--tab-bg);font-size:.9rem;color:var(--text-color)}.editor-tab.active{background:var(--tab-active-bg);font-weight:700;border-bottom:2px solid var(--primary-color)}.editor-content{flex:1;overflow:auto;padding:0;position:relative}.tab-content{display:none;height:100%}.tab-content.active{display:block}#htmlEditor{width:100%;height:100%;padding:15px;position:relative;overflow:auto}#cssEditor,#jsEditor{font-family:monospace;padding:15px;resize:none;background:var(--editor-bg);border:none;outline:none;overflow:auto;font-size:14px;line-height:1.5;white-space:pre;width:100%;height:100%;color:var(--text-color)}.code-editor{position:relative}.code-editor pre{width:100%;height:100%;margin:0;padding:15px;font-family:monospace;font-size:14px;line-height:1.5;white-space:pre;overflow:auto;background:var(--editor-bg);color:var(--text-color)}.code-editor pre code{display:block;width:100%;height:100%}.code-editor textarea{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:15px;border:none;resize:none;font-family:monospace;font-size:14px;line-height:1.5;white-space:pre;overflow:auto;color:transparent;background:transparent;caret-color:var(--text-color);z-index:2}.code-editor pre{z-index:1}.status-bar{background:var(--light-color);padding:5px 10px;font-size:.8rem;border-top:1px solid var(--border-color);display:flex;justify-content:space-between;color:var(--text-color)}.autosave-indicator{color:var(--dark-color);font-style:italic}#preview{width:50%;height:100%;border:none;background:#fff}.canvas{min-height:1000px;position:relative;background-color:var(--editor-bg);background-image:linear-gradient(rgba(200,200,200,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(200,200,200,.1) 1px,transparent 1px);background-size:20px 20px}.element{position:absolute;border:1px solid transparent;min-width:20px;min-height:20px;-webkit-user-select:none;user-select:none;transition:box-shadow .2s}.element:hover{border:1px dashed #999}.element.selected{border:1px solid var(--primary-color);box-shadow:0 0 0 2px #4a6fa54d}.resize-handle{position:absolute;width:8px;height:8px;background:var(--primary-color);border-radius:50%}.resize-handle.tl{top:-4px;left:-4px;cursor:nw-resize}.resize-handle.tm{top:-4px;left:50%;margin-left:-4px;cursor:n-resize}.resize-handle.tr{top:-4px;right:-4px;cursor:ne-resize}.resize-handle.ml{top:50%;margin-top:-4px;left:-4px;cursor:w-resize}.resize-handle.mr{top:50%;margin-top:-4px;right:-4px;cursor:e-resize}.resize-handle.bl{bottom:-4px;left:-4px;cursor:sw-resize}.resize-handle.bm{bottom:-4px;left:50%;margin-left:-4px;cursor:s-resize}.resize-handle.br{bottom:-4px;right:-4px;cursor:se-resize}.properties-panel{position:absolute;right:0;top:0;width:250px;height:100%;background:var(--panel-bg);border-left:1px solid var(--border-color);padding:10px;overflow-y:auto;transform:translate(100%);transition:transform .3s;z-index:10}.properties-panel.open{transform:translate(0)}.properties-group{margin-bottom:15px}.properties-group h3{font-size:.9rem;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--border-color)}.property-row{display:flex;margin-bottom:8px;align-items:center}.property-label{width:80px;font-size:.9rem}.property-input{flex:1;padding:4px 8px;border:1px solid var(--border-color);border-radius:4px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--dark-color);color:#fff;padding:10px 20px;border-radius:4px;box-shadow:var(--shadow);z-index:1000;opacity:0;transition:opacity .3s}.toast.show{opacity:1}@media(max-width:768px){.main-container{flex-direction:column}.tools-panel{width:100%;height:auto;border-right:none;border-bottom:1px solid var(--border-color)}.workspace{flex-direction:column}#editor,#preview{width:100%;height:50%}#editor{border-right:none;border-bottom:1px solid var(--border-color)}}.theme-switch{position:relative;display:inline-block;width:40px;height:20px;margin-left:10px}.theme-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--primary-color)}input:checked+.slider:before{transform:translate(20px)}.keyboard-shortcuts{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--panel-bg);border:1px solid var(--border-color);border-radius:4px;padding:20px;z-index:1000;display:none;box-shadow:var(--shadow);max-width:500px;width:90%}.keyboard-shortcuts h2{margin-bottom:15px;font-size:1.2rem;color:var(--text-color)}.keyboard-shortcuts table{width:100%;border-collapse:collapse}.keyboard-shortcuts td{padding:8px;border-bottom:1px solid var(--border-color);color:var(--text-color)}.keyboard-shortcuts .shortcut-key{display:inline-block;background:var(--light-color);padding:2px 6px;border-radius:4px;border:1px solid var(--border-color);font-family:monospace;margin-right:5px}.keyboard-shortcuts .close-btn{position:absolute;top:10px;right:10px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--text-color)}.snap-line{position:absolute;background-color:#ff5722;z-index:1000;pointer-events:none;opacity:.7;transition:opacity .3s ease}.snap-line.horizontal{height:1px;left:0;right:0}.snap-line.vertical{width:1px;top:0;bottom:0}