.rotation-settings {
  grid-template-columns: minmax(250px, .8fr) minmax(430px, 1.5fr) 105px;
  align-items: start;
  gap: 14px;
}
.orientation-setting {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.orientation-setting > select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.orientation-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  height: 62px;
}
.rotation-settings .orientation-option {
  display: grid;
  min-height: 62px;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 90%, var(--paper));
  color: var(--muted);
  box-shadow: 0 3px 10px rgba(29, 41, 72, .05);
}
.rotation-settings .orientation-option:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  color: var(--accent);
}
.rotation-settings .orientation-option.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 7px 18px rgba(91, 111, 245, .14);
}
.orientation-icon {
  position: relative;
  display: block;
  width: 25px;
  height: 21px;
}
.orientation-icon::before,.orientation-icon::after {
  content: '';
  position: absolute;
  border: 2px solid currentColor;
  border-radius: 2px;
}
.orientation-icon.all::before { inset: 3px 8px 1px 0; }
.orientation-icon.all::after { inset: 0 0 4px 8px; }
.orientation-icon.portrait::before { inset: 0 7px; }
.orientation-icon.portrait::after { display: none; }
.orientation-icon.landscape::before { inset: 4px 0; }
.orientation-icon.landscape::after { display: none; }
.orientation-option span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-rotate > .transform-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  height: 62px;
}
.transform-group {
  min-width: 0;
  height: 62px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 92%, var(--paper));
}
.transform-group > small {
  display: block;
  margin: 0 0 3px 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.transform-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.rotation-settings .transform-buttons button {
  min-width: 0;
  min-height: 30px;
  padding: 4px 6px;
  font-size: 10px;
  white-space: nowrap;
}
.rotation-settings .transform-buttons button b { font-size: 14px; }
.rotation-settings .transform-buttons button span { overflow: hidden; text-overflow: ellipsis; }
.rotation-settings > label:last-child { align-self: end; }
.rotation-settings > label:last-child .angle-input { height: 62px; }
.rotation-settings > label:last-child .angle-input input { height: 60px; font-size: 14px; }
html[data-theme=dark] .rotation-settings .orientation-option { background: #111927; }
html[data-theme=dark] .rotation-settings .orientation-option.active { background: #202a48; }
html[data-theme=dark] .transform-group { background: #111927; }
@media(max-width:900px){.rotation-settings{grid-template-columns:1fr 120px}.orientation-setting{grid-column:1/-1}.quick-rotate{min-width:0}}
@media(max-width:620px){.rotation-settings{grid-template-columns:1fr}.quick-rotate> .transform-groups{grid-template-columns:1fr}.rotation-settings>label:last-child{align-self:stretch}}
@media(max-width:520px){.orientation-options{gap:5px}.orientation-options,.quick-rotate>.transform-groups{height:auto}.rotation-settings .orientation-option{min-height:56px;padding-inline:4px}.orientation-option span:last-child{font-size:10px}.transform-group{height:58px;padding:5px}}