/* TOOLBOX BUTTONS */
/* TOOLBOX */
#toolbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.toolbox-btn {
  padding: 10px;
  background: #e3f2fd;
  color: #1565c0 !important;
  border: 1px solid #90caf9;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
}
.toolbox-btn:hover {
  background: #bbdefb;
  transform: translateY(-1px);
}

/* MODE GRID */
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.mode-btn {
  padding: 12px 8px;
  background: #f0f0f0;
  color: #000 !important;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-weight: bold;
  transition: all 0.2s;
}
.mode-btn:hover { background: #e0e0e0; }
.mode-btn.active {
  background: #d14635 !important;
  color: white !important;
  border-color: #d14635;
}

/* ARROW GRID */
.arrow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin: 12px 0;
}
.arrow-btn {
  padding: 8px;
  background: #f5f5f5;
  color: #000 !important;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.8rem;
}
.arrow-btn.center {
  background: #e3f2fd;
  font-weight: bold;
}

/* ROTATE */
.rotate-row {
  display: flex; align-items: center; gap: 8px; margin: 12px 0; justify-content: center;
}
#rotate-value { min-width: 50px; font-weight: bold; text-align: center; }

/* ACTION GRID */
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.action-btn {
  padding: 12px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  color: white !important;
}
.action-btn.danger   { background: #ff4d4d; }
.action-btn.primary  { background: #d14635; }
.action-btn.warning  { background: #ffb800; }
.action-btn.secondary{ background: #666; }
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.mode-btn {
  padding: 12px 8px;
  font-weight: bold;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: all 0.2s;
}
.mode-btn.active {
  background: #d14635 !important;
  color: white;
  border-color: #d14635;
}

/* ROTATE */
.rotate-row {
  display: flex; align-items: center; gap: 8px; margin: 12px 0; justify-content: center;
}
#rotate-value { min-width: 50px; font-weight: bold; text-align: center; }

/* ACTION GRID */
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.action-btn {
  padding: 12px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
}
.action-btn.danger   { background: #ff4d4d; color: white; }
.action-btn.primary  { background: #d14635; color: white; }
.action-btn.warning  { background: #ffb800; color: white; }
.action-btn.secondary{ background: #666; color: white; }
.action-btn.primary:active {
  animation: pulse 0.2s;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); box-shadow: 0 0 20px #d14635; }
  100% { transform: scale(1); }
}