*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;background:#f0f0f0;height:100vh;overflow:hidden}.svg-editor-container{display:flex;flex-direction:column;height:100vh}.header-toolbar{background:#2c3e50;color:#fff;padding:8px 16px;display:flex;align-items:center;gap:16px;box-shadow:0 2px 4px #0003;z-index:100}.toolbar-group{display:flex;align-items:center;gap:8px;padding:0 8px;border-right:1px solid #34495e}.toolbar-group:last-child{border-right:none}.toolbar-btn{background:transparent;border:1px solid transparent;color:#fff;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:6px;transition:all .2s}.toolbar-btn:hover{background:#34495e;border-color:#4a5f7f}.toolbar-btn.active{background:#3498db;border-color:#2980b9}.toolbar-btn span{font-size:18px}.main-content{display:flex;flex:1;overflow:hidden}.tool-palette{width:60px;background:#34495e;display:flex;flex-direction:column;padding:8px;gap:4px;box-shadow:2px 0 4px #0000001a}.tool-btn{width:44px;height:44px;background:#2c3e50;border:2px solid transparent;border-radius:6px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .2s}.tool-btn:hover{background:#4a5f7f;border-color:#5a6f8f}.tool-btn.active{background:#3498db;border-color:#2980b9}.tool-separator{height:1px;background:#2c3e50;margin:4px 0}.canvas-area{flex:1;display:flex;position:relative;background:#e0e0e0}#svg-canvas-container{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;transition:all .3s ease;position:relative}#svg-canvas-container.drag-over{background:#e3f2fd;box-shadow:inset 0 0 20px #4299e14d}#svg-canvas-container.drag-over:after{content:"🎨 Drop SVG or Image here";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;color:#4299e1;font-weight:700;pointer-events:none;z-index:1000;background:#fffffff2;padding:20px 40px;border-radius:8px;border:2px dashed #4299e1;box-shadow:0 4px 12px #00000026}#svg-canvas-container svg{background:#fff;box-shadow:0 4px 8px #0000001a;border:1px solid #ccc}.properties-panel{width:296px;min-width:220px;max-width:500px;background:#fff;border-left:1px solid #ddd;padding:0;overflow-y:auto;overflow-x:hidden;box-shadow:-2px 0 4px #0000001a;flex-shrink:0}.panel-resize-handle{width:5px;cursor:col-resize;background:transparent;flex-shrink:0;position:relative;z-index:10;transition:background .15s}.panel-resize-handle:hover,.panel-resize-handle.dragging{background:#3498db}.panel-section{border-bottom:1px solid #e0e0e0}.panel-header{background:#f5f5f5;padding:10px 16px;font-weight:600;font-size:14px;color:#333;cursor:pointer;user-select:none;display:flex;justify-content:space-between;align-items:center}.panel-header:hover{background:#eee}.panel-header .arrow{transition:transform .2s}.panel-header.collapsed .arrow{transform:rotate(-90deg)}.panel-content{padding:16px}.panel-section.collapsed .panel-content{display:none}.property-row{display:flex;align-items:center;margin-bottom:12px}.property-label{flex:0 0 80px;font-size:13px;color:#555}.property-control{flex:1;display:flex;align-items:center;gap:8px}.color-input-group{display:flex;align-items:center;gap:8px;flex:1}input[type=checkbox]{width:16px;height:16px}input[type=color]{width:40px;height:32px;border:1px solid #ddd;border-radius:4px;cursor:pointer}input[type=range]{flex:1}input[type=number]{width:60px;padding:4px 8px;border:1px solid #ddd;border-radius:4px}select{flex:1;padding:6px;border:1px solid #ddd;border-radius:4px;background:#fff}.value-display{min-width:40px;font-size:12px;color:#666;text-align:right}.color-input-group.style-mixed input[type=color]{opacity:.3;pointer-events:none}.color-input-group.style-mixed input[type=checkbox]{pointer-events:none}.property-control.style-mixed input[type=range],.property-control.style-mixed select{opacity:.3;pointer-events:none}.mixed-label{font-size:11px;color:#999;font-style:italic}.layers-list{max-height:200px;overflow-y:auto;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:12px}.layer-item{display:flex;align-items:center;padding:8px;border-bottom:1px solid #f0f0f0;cursor:pointer}.layer-item:hover{background:#f8f8f8}.layer-item.active{background:#e3f2fd}.layer-visibility{width:20px;height:20px;margin-right:8px;cursor:pointer}.layer-lock{width:20px;height:20px;margin-left:auto;cursor:pointer}.layer-name{flex:1;font-size:13px}.status-bar{background:#2c3e50;color:#fff;padding:4px 16px;display:flex;align-items:center;justify-content:space-between;font-size:12px;border-top:1px solid #34495e}.status-section{display:flex;align-items:center;gap:16px}.status-item{display:flex;align-items:center;gap:4px}.zoom-controls{display:flex;align-items:center;gap:8px}.zoom-btn{width:24px;height:24px;background:#34495e;border:none;color:#fff;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center}.zoom-btn:hover{background:#4a5f7f}.zoom-value{min-width:50px;text-align:center}.grid-toggle{display:flex;align-items:center;gap:8px}.grid-toggle input{width:14px;height:14px}.icon-btn-group{display:flex;gap:2px;background:#f0f0f0;border-radius:4px;padding:2px}.icon-btn{background:transparent;border:1px solid transparent;border-radius:3px;cursor:pointer;padding:3px 4px;display:flex;align-items:center;justify-content:center;transition:all .15s}.icon-btn:hover{background:#ddd}.icon-btn.active{background:#3498db;border-color:#2980b9}.icon-btn.active svg line,.icon-btn.active svg polyline{stroke:#fff}.dash-pattern-wrapper{position:relative;flex:1}.dash-pattern-btn{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid #ddd;border-radius:4px;padding:4px 6px;cursor:pointer;width:100%;transition:border-color .15s}.dash-pattern-btn:hover{border-color:#aaa}.dropdown-arrow{font-size:9px;color:#888}.dash-pattern-popup{position:absolute;top:100%;left:0;z-index:500;background:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 4px 12px #00000026;padding:6px;min-width:180px}.dash-grid{display:flex;flex-direction:column;gap:2px}.dash-grid-item{display:flex;align-items:center;padding:4px 8px;border-radius:3px;cursor:pointer;transition:background .1s}.dash-grid-item:hover{background:#e3f2fd}.dash-grid-item.active{background:#bbdefb}.marker-controls{display:flex;gap:4px;flex:1}.marker-btn{flex:1;background:#fff;border:1px solid #ddd;border-radius:4px;padding:4px 2px;cursor:pointer;font-size:11px;color:#555;transition:border-color .15s;white-space:nowrap}.marker-btn:hover{border-color:#aaa}.marker-btn.has-marker{border-color:#3498db;color:#3498db}.marker-popup{position:absolute;z-index:500;background:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 4px 12px #00000026;padding:8px;min-width:200px;right:0}.marker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.marker-grid-item{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer;transition:all .1s}.marker-grid-item:hover{background:#e3f2fd;border-color:#90caf9}.marker-grid-item.active{background:#bbdefb;border-color:#3498db}@media (max-width: 768px){.properties-panel{width:240px;min-width:200px}.tool-palette{width:48px}.tool-btn{width:36px;height:36px;font-size:16px}}