.tool-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #cbd5e1;
  border-radius: 0.375rem;
  background: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.1s, transform 0.05s;
}
.tool-btn:hover { border-color: #0b2e5b; }
.tool-btn:active { transform: scale(0.93); }
.tool-btn.tool-active { border-color: #e31837; background: #fef2f2; }
.tool-btn:disabled { opacity: 0.35; cursor: default; }

.swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  border: 2px solid #cbd5e1;
  cursor: pointer;
  transition: transform 0.05s, border-color 0.1s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.swatch-active { border-color: #0b2e5b; box-shadow: 0 0 0 2px #0b2e5b33; }

.size-btn {
  border-radius: 9999px;
  border: 2px solid #cbd5e1;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
}
.size-btn.size-active { border-color: #e31837; background: #fef2f2; }
.size-btn .dot { border-radius: 9999px; background: #0f172a; }

.grade-btn {
  min-width: 2.5rem;
  padding: 0.375rem 0.625rem;
  border: 2px solid #cbd5e1;
  border-radius: 0.375rem;
  background: #fff;
  font-weight: 800;
  font-size: 0.875rem;
  color: #0b2e5b;
  cursor: pointer;
  transition: border-color 0.1s, transform 0.05s;
}
.grade-btn:hover { border-color: #0b2e5b; }
.grade-btn:active { transform: scale(0.95); }
.grade-btn.grade-active { border-color: #e31837; background: #e31837; color: #fff; }