body { overflow: hidden; margin: 0; padding: 0; background: var(--bg-surface); }
.drawing-layout { display: flex; height: calc(100vh - var(--nav-height, 60px)); }
.toolbar { width: 250px; background: var(--bg-card); border-right: 1px solid var(--border); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; z-index: 10; }
.tool-section { display: flex; flex-direction: column; gap: 0.5rem; }
.tool-section label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.preset-colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.color-btn { width: 100%; aspect-ratio: 1; border-radius: var(--radius-full); border: 2px solid transparent; cursor: pointer; transition: transform var(--transition-fast); }
.color-btn:hover { transform: scale(1.1); }
.canvas-wrapper { flex: 1; position: relative; background: #e5e5f7; opacity: 1; background-image: repeating-radial-gradient(circle at 0 0, transparent 0, #e5e5f7 10px), repeating-linear-gradient(#f1f1fc55, #f1f1fc); display: flex; align-items: center; justify-content: center; overflow: auto; padding: 2rem; }
html[data-theme="dark"] .canvas-wrapper { background: #1a1a2e; background-image: radial-gradient(#2a2a4a 1px, transparent 0); background-size: 20px 20px; }
.drawing-canvas { background: #ffffff; box-shadow: var(--shadow-lg); cursor: crosshair; touch-action: none; border-radius: var(--radius-sm); }
@media (max-width: 768px) {
    .drawing-layout { flex-direction: column; }
    .toolbar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding: 1rem; flex-direction: row; flex-wrap: wrap; justify-content: center; height: auto; }
    .tool-section { width: auto; min-width: 120px; }
    .canvas-wrapper { padding: 1rem; }
}