.rotate-image-page .rotate-control-row {
  display: grid;
  gap: var(--space-sm);
}

.rotate-image-page .rotate-button-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.rotate-image-page .rotate-button-grid .btn {
  min-height: 2.8rem;
  white-space: normal;
}

.rotate-image-page .rotate-current {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  color: var(--resize-muted);
  font-size: var(--text-sm, 0.9rem);
  border: 1px solid var(--resize-border);
  border-radius: 12px;
  background: var(--resize-panel);
}

.rotate-image-page .rotate-current strong {
  color: var(--resize-text);
}

.rotate-image-page .rotate-before-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.rotate-image-page .rotate-example {
  display: grid;
  gap: 0.65rem;
}

.rotate-image-page .rotate-example-art {
  position: relative;
  min-height: 13rem;
  overflow: hidden;
  border: 1px solid var(--resize-border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, #f8fafc 0 35%, transparent 35%),
    linear-gradient(45deg, #2563eb, #059669);
}

.rotate-image-page .rotate-example-art::before {
  position: absolute;
  inset: 22% 28%;
  content: "";
  border-radius: 12px 12px 4px 4px;
  background:
    radial-gradient(circle at 50% 24%, #fbbf24 0 12%, transparent 13%),
    linear-gradient(180deg, #0f172a 0 36%, #f8fafc 36%);
  box-shadow: 0 18px 36px rgb(15 23 42 / 0.22);
}

.rotate-image-page .rotate-example-art.is-rotated::before {
  transform: rotate(90deg);
}

.rotate-image-page .rotate-example strong {
  color: var(--resize-text);
}

.rotate-image-page .rotate-example p {
  margin: 0;
  color: var(--resize-muted);
  font-size: var(--text-sm, 0.9rem);
}

@media (width <= 760px) {
  .rotate-image-page .rotate-button-grid,
  .rotate-image-page .rotate-before-after {
    grid-template-columns: 1fr;
  }
}