/* Body & canvas */
body {
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family:'Poppins',sans-serif;
  background: linear-gradient(135deg,#ff9a9e,#fad0c4);
  transition:0.5s;
  height:100vh;
  overflow:hidden;
}

canvas {
  margin-top:10px;
  border-radius:10px;
  background:#fff;
  cursor: crosshair;
  transition:0.3s;
}

/* Toolbar styling */
.toolbar {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:10px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  border-radius:10px;
  margin-top:10px;
  transition:0.3s;
}

.toolbar button, .toolbar select {
  padding:5px 10px;
  border:none;
  border-radius:5px;
  cursor:pointer;
  transition:0.2s;
}

.toolbar button:hover, .toolbar select:hover {
  transform: scale(1.1);
  background: rgba(255,255,255,0.3);
}

/* Active state for Rainbow & Glow buttons */
.toolbar button.active {
  background-color: #28a745;
  color: white;
  transform: scale(1.2);
}

/* Input & range styling */
.toolbar input[type="color"] {
  cursor:pointer;
  border:none;
  width:40px;
  height:30px;
  padding:0;
}

.toolbar input[type="range"] {
  cursor:pointer;
  width:80px;
}

/* Color palette */
.color-palette {
  display:flex;
  gap:5px;
  margin-top:5px;
  justify-content:center;
}

.color-swatch {
  width:30px;
  height:30px;
  border-radius:50%;
  cursor:pointer;
  border:2px solid #fff;
  transition: transform 0.2s, border 0.2s;
}

.color-swatch:hover {
  transform: scale(1.2);
  border:2px solid #000;
}

.color-swatch.selected {
  border:3px solid #28a745;
}