.button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.button-row--stacked {
  grid-template-columns: minmax(0, 1fr);
}

.button-row__full {
  width: 100%;
}

.focus-mode-actions {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.focus-mode-mode-switch {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.primary-button,
.ghost-button {
  padding: 10px 16px;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.primary-button {
  background: #1a73e8;
  color: white;
}

.primary-button:hover {
  background: #1669d6;
}

.ghost-button {
  background: transparent;
  color: #1a73e8;
  border: 1px solid #dadce0;
}

.ghost-button:hover {
  background: #f1f3f4;
}

.ghost-button.is-disabled,
.primary-button.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#panel-image-operations .tool-panel__body .button-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; 
}

.image-operations-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.tool-operation-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #dfe3f1;
  background: #f7f8fd;
  color: #1f2433;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tool-operation-button.is-active {
  border-color: #4c6fff;
  background: linear-gradient(135deg, rgba(76, 111, 255, 0.08), rgba(76, 111, 255, 0.18));
  box-shadow: 0 10px 20px rgba(76, 111, 255, 0.22);
  color: #1a237e;
}

.tool-operation-button:hover {
  border-color: #c9d2ef;
  box-shadow: 0 8px 16px rgba(41, 74, 146, 0.18);
  transform: translateY(-1px);
}

.tool-operation-button img {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.symmetry-button .symmetry-icon {
  transition: transform 0.2s ease;
}

.symmetry-icon--diag-45 {
  transform: rotate(45deg);
}

.symmetry-icon--diag-135 {
  transform: rotate(135deg);
}