.editor-page{padding-top:72px;height:100vh;display:flex;flex-direction:column;overflow:hidden}
.editor-container{display:grid;grid-template-columns:72px 1fr 300px;flex:1;overflow:hidden}
.toolbar{background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:16px 8px;gap:4px;overflow-y:auto}
.toolbar-divider{width:40px;height:1px;background:var(--border);margin:8px 0}
.tool-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);position:relative}
.tool-btn:hover{background:var(--bg-elevated);color:var(--text-primary)}
.tool-btn.active{background:rgba(255,107,53,0.15);color:var(--accent-orange)}
.tool-btn svg{width:22px;height:22px;fill:currentColor}
.tool-btn::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--bg-card);color:var(--text-primary);padding:6px 12px;border-radius:6px;font-size:0.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:var(--transition-fast);border:1px solid var(--border);z-index:10}
.tool-btn:hover::after{opacity:1}
.canvas-area{background:#0a0a0f;display:flex;align-items:center;justify-content:center;position:relative;overflow:auto;background-image:linear-gradient(45deg,#1a1a24 25%,transparent 25%),linear-gradient(-45deg,#1a1a24 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1a1a24 75%),linear-gradient(-45deg,transparent 75%,#1a1a24 75%);background-size:20px 20px}
.canvas-wrapper{position:relative;box-shadow:0 0 40px rgba(0,0,0,0.5)}
#editorCanvas{display:block;cursor:crosshair;background:white}
.canvas-info{position:absolute;bottom:16px;left:16px;display:flex;gap:8px;padding:8px 12px;background:rgba(10,10,15,0.9);backdrop-filter:blur(10px);border-radius:6px;font-size:0.75rem;font-family:monospace;color:var(--text-muted)}
.zoom-controls{position:absolute;bottom:16px;right:316px;display:flex;align-items:center;gap:8px;padding:8px;background:rgba(10,10,15,0.9);backdrop-filter:blur(10px);border-radius:6px}
.zoom-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);cursor:pointer}
.zoom-btn svg{width:14px;height:14px;fill:currentColor}
.zoom-value{font-size:0.85rem;font-family:monospace;color:var(--text-secondary);min-width:50px;text-align:center}
.panel{background:var(--bg-secondary);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}
.panel-section{border-bottom:1px solid var(--border);padding:20px}
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.panel-title{font-size:0.85rem;font-weight:700;text-transform:uppercase;color:var(--text-muted)}
.panel-actions{display:flex;gap:4px}
.panel-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);cursor:pointer}
.panel-btn svg{width:14px;height:14px;fill:currentColor}
.color-picker{display:flex;flex-direction:column;gap:12px}
.color-preview{display:flex;gap:8px;align-items:center}
.color-swatch{width:48px;height:48px;border-radius:var(--radius-md);border:2px solid var(--border);cursor:pointer;position:relative;overflow:hidden}
.color-swatch .color-fill{position:absolute;inset:0}
.color-inputs{flex:1;display:flex;flex-direction:column;gap:8px}
.color-hex{padding:8px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-family:monospace}
.color-picker input[type="color"]{width:100%;height:32px;padding:0;border:1px solid var(--border);border-radius:6px;cursor:pointer;background:transparent}
.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:12px}
.palette-color{aspect-ratio:1;border-radius:4px;cursor:pointer;transition:var(--transition-fast);border:2px solid transparent}
.palette-color:hover{transform:scale(1.1);border-color:var(--border-hover)}
.palette-color.active{border-color:white}
.size-control{display:flex;flex-direction:column;gap:8px}
.size-preview{display:flex;align-items:center;justify-content:space-between;font-size:0.85rem;color:var(--text-secondary)}
.size-value{font-family:monospace;font-weight:600;color:var(--accent-orange)}
.size-slider{width:100%;height:6px;border-radius:3px;background:var(--bg-card);outline:none;-webkit-appearance:none;cursor:pointer}
.size-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-orange);cursor:pointer}
.size-preview-circle{width:100%;height:48px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border-radius:var(--radius-md)}
.size-preview-circle div{background:var(--accent-orange);border-radius:50%}
.layers-list{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto}
.layer-item{display:flex;align-items:center;gap:8px;padding:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;cursor:pointer}
.layer-item.active{border-color:var(--accent-orange);background:rgba(255,107,53,0.1)}
.layer-thumb{width:32px;height:32px;background:var(--bg-elevated);border-radius:4px;flex-shrink:0}
.layer-name{flex:1;font-size:0.85rem;font-weight:500}
.layer-actions{display:flex;gap:4px}
.layer-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-muted);cursor:pointer;border-radius:4px}
.layer-btn svg{width:14px;height:14px;fill:currentColor}
.templates-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.template-card{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:12px;cursor:pointer;text-align:center}
.template-card:hover{border-color:var(--accent-orange)}
.template-card svg{width:32px;height:32px;fill:var(--text-muted);margin-bottom:8px}
.template-card span{font-size:0.8rem;color:var(--text-secondary);display:block}
.action-buttons{display:flex;flex-direction:column;gap:8px}
.action-buttons .btn{width:100%;justify-content:center}
@media (max-width:900px){.editor-container{grid-template-columns:1fr}.toolbar{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border)}.tool-btn::after{display:none}.panel{border-left:none;border-top:1px solid var(--border)}}