:root {
    --bg-dark: #181818;
    --bg-panel: #252526;
    --accent: #3b82f6;
}

body { margin: 0; font-family: sans-serif; overflow: hidden; background: var(--bg-dark); color: #ccc; }
.flex { display: flex; }
.h-screen { height: 100-vh; }
.hidden { display: none !important; }

.sidebar-icons { width: 56px; background: var(--bg-panel); border-right: 1px solid #333; display: flex; flex-direction: column; align-items: center; padding: 20px 0; }
.panel { background: var(--bg-panel); border-right: 1px solid #333; width: 260px; overflow-y: auto; padding: 15px; }

.main-area { flex: 1; display: flex; flex-direction: column; background: #1e1e1e; }
.toolbar { height: 40px; background: #2d2d2d; display: flex; align-items: center; px: 15px; border-bottom: 1px solid #181818; }

.canvas-container { flex: 1; position: relative; overflow: auto; display: flex; align-items: center; justify-content: center; }
.design-canvas { width: 800px; height: 600px; background: white; position: relative; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }

.element { position: absolute; cursor: grab; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.element.selected { outline: 2px solid var(--accent); }