/* ===== DESIGNER ===== */
.designer-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; }
.designer-canvas-area { background: linear-gradient(135deg, #f8f0ff, #fff0f8); border-radius: 24px; border: 4px solid var(--lavender); padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 8px 32px rgba(155,89,182,0.12); }
.canvas-preview { background: white; border-radius: 18px; border: 3px solid var(--lavender); box-shadow: 0 4px 20px rgba(0,0,0,0.1); overflow: hidden; }
#designCanvas { display: block; cursor: crosshair; touch-action: none; }
.canvas-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.designer-tools { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 75vh; }
.tool-card { background: white; border-radius: 16px; padding: 14px; border: 3px solid var(--lavender); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.tool-title { font-family: 'Baloo 2', cursive; font-size: 0.9rem; font-weight: 700; color: var(--dark); margin-bottom: 7px; }
.shape-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.shape-btn { background: var(--cream); border: 3px solid transparent; border-radius: 9px; padding: 7px 4px; text-align: center; cursor: pointer; transition: all 0.2s; font-size: 0.68rem; font-weight: 700; color: var(--dark); }
.shape-btn:hover { border-color: var(--purple); background: var(--lavender); }
.shape-btn.active { border-color: var(--purple); background: var(--lavender); }
.shape-icon { font-size: 1.4rem; display: block; margin-bottom: 2px; }
.tool-grid { display: flex; gap: 5px; flex-wrap: wrap; }
.tool-btn { background: var(--cream); border: 3px solid transparent; border-radius: 9px; padding: 6px 4px; text-align: center; cursor: pointer; transition: all 0.2s; font-size: 0.65rem; font-weight: 700; color: var(--dark); min-width: 44px; }
.tool-btn:hover { border-color: var(--purple); background: var(--lavender); }
.tool-btn.active { border-color: var(--purple); background: var(--lavender); }
.color-palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-bottom: 7px; }
.color-swatch { width: 100%; aspect-ratio: 1; border-radius: 6px; border: 3px solid transparent; cursor: pointer; transition: all 0.2s; }
.color-swatch:hover { transform: scale(1.2); }
.color-swatch.active { border-color: var(--dark); transform: scale(1.2); }
.custom-color-row { display: flex; align-items: center; gap: 7px; }
.custom-color-row input[type=color] { width: 34px; height: 34px; border: 3px solid var(--peach); border-radius: 8px; cursor: pointer; padding: 2px; }
.pattern-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pattern-btn { background: var(--cream); border: 3px solid transparent; border-radius: 8px; padding: 5px 3px; text-align: center; cursor: pointer; transition: all 0.2s; font-size: 0.62rem; font-weight: 700; color: var(--dark); }
.pattern-btn:hover { border-color: var(--pink); }
.pattern-btn.active { border-color: var(--pink); background: var(--rose); }
.brush-row { display: flex; align-items: center; gap: 8px; }
.brush-row input[type=range] { flex: 1; accent-color: var(--purple); }
.brush-preview { border-radius: 50%; background: var(--dark); transition: all 0.2s; }
.opacity-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.opacity-row input[type=range] { flex: 1; accent-color: var(--purple); }