:root{--bg-color: #0d1117;--panel-bg: #161b22;--border-color: #30363d;--text-primary: #c9d1d9;--text-secondary: #8b949e;--accent-color: #58a6ff;--accent-hover: #1f6feb;--danger-color: #f85149;--canvas-bg: #e1e4e8;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .5);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";background-color:var(--bg-color);color:var(--text-primary);line-height:1.5;height:100vh;overflow:hidden}#root{height:100%}.app-container{display:flex;height:100%;width:100%}.sidebar{width:300px;background-color:var(--panel-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column;box-shadow:var(--shadow-md);z-index:10}.sidebar-header{padding:1rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:.5rem}.sidebar-header h1{font-size:1.25rem;font-weight:600;color:#fff}.sidebar-content{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1.5rem}.control-group{display:flex;flex-direction:column;gap:.5rem;background:#ffffff08;padding:1rem;border-radius:var(--radius-md);border:1px solid var(--border-color)}.control-group h3{font-size:.875rem;text-transform:uppercase;color:var(--text-secondary);letter-spacing:.05em;margin-bottom:.25rem}.input-row{display:flex;gap:.5rem;align-items:center}.input-row label{font-size:.875rem;color:var(--text-secondary);flex:1}.input-field{background-color:var(--bg-color);border:1px solid var(--border-color);color:var(--text-primary);padding:.4rem .75rem;border-radius:var(--radius-sm);font-size:.875rem;width:100%;outline:none;transition:border-color .2s,box-shadow .2s}.input-field:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px #58a6ff33}.number-input{width:80px}.unit-label{width:20px;font-size:.8rem;color:var(--text-secondary)}.btn{background-color:var(--panel-bg);border:1px solid var(--border-color);color:var(--text-primary);padding:.5rem 1rem;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s ease}.btn:hover{background-color:var(--border-color)}.btn-primary{background-color:var(--accent-color);color:#fff;border:none}.btn-primary:hover{background-color:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.workspace{flex:1;display:flex;flex-direction:column;position:relative;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:20px 20px;background-position:center center;overflow:hidden}.toolbar{height:48px;background-color:var(--panel-bg);border-bottom:1px solid var(--border-color);display:flex;align-items:center;padding:0 1rem;gap:1rem;box-shadow:var(--shadow-sm);z-index:5}.canvas-container{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:2rem}.svg-canvas-wrapper{background-color:var(--canvas-bg);box-shadow:var(--shadow-lg);border-radius:2px;transition:width .3s ease,height .3s ease;position:relative;overflow:visible}.svg-canvas{width:100%;height:100%;display:block;overflow:visible}.text-element{cursor:grab;-webkit-user-select:none;user-select:none}.text-element:active{cursor:grabbing}.text-element.selected{outline:2px solid var(--accent-color);outline-offset:2px}.layers-list{display:flex;flex-direction:column;gap:.5rem;max-height:200px;overflow-y:auto;padding-right:.25rem}.layer-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease}.layer-item:hover{border-color:#58a6ff80}.layer-item.selected{border-color:var(--accent-color);background-color:#58a6ff1a}.layer-name{font-size:.875rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin-right:.5rem}.layer-actions{display:flex;gap:.25rem}.icon-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.2rem;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all .2s ease}.icon-btn:hover:not(:disabled){background-color:var(--border-color);color:var(--text-primary)}.icon-btn.active-style{background-color:#58a6ff33;color:var(--accent-color);border:1px solid var(--accent-color)}.icon-btn:disabled{opacity:.3;cursor:not-allowed}.icon-btn.danger:hover:not(:disabled){color:var(--danger-color);background-color:#f851491a}.empty-layers{font-size:.875rem;color:var(--text-secondary);text-align:center;padding:1rem 0;font-style:italic}