.rot-wrap { max-width: 880px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.rot-wrap h1 { font-size: 1.6rem; margin: 0 0 .35rem; }
.rot-sub { color: #6b7280; margin: 0 0 1.1rem; }
.rot-drop {
  border: 2px dashed #94a3b8; border-radius: 12px; padding: 1.4rem; text-align: center;
  background: rgba(148,163,184,.08); cursor: pointer;
}
.rot-drop.is-drag { border-color: #f59e0b; background: rgba(245,158,11,.12); }
.rot-btn {
  display: inline-block; background: #f59e0b; color: #111; font-weight: 700;
  padding: .55rem 1.1rem; border-radius: 8px; cursor: pointer;
}
.rot-panel {
  margin-top: 1rem; display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .rot-panel { grid-template-columns: 1.2fr .8fr; align-items: start; }
}
.rot-preview-wrap {
  border-radius: 12px; border: 1px solid rgba(148,163,184,.4);
  padding: .75rem; background: repeating-conic-gradient(#e5e7eb 0% 25%, #fff 0% 50%) 50% / 16px 16px;
  text-align: center; overflow: auto;
}
[data-theme="dark"] .rot-preview-wrap, body.dark .rot-preview-wrap {
  background: repeating-conic-gradient(#334155 0% 25%, #1e293b 0% 50%) 50% / 16px 16px;
}
#rotCanvas { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
.rot-size { font-size: .85rem; margin: .5rem 0 0; opacity: .8; }
.rot-controls { display: flex; flex-direction: column; gap: .75rem; }
.rot-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.rot-label { font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.rot-chip {
  border: 1px solid #94a3b8; background: transparent; color: inherit;
  border-radius: 8px; padding: .4rem .7rem; cursor: pointer; font-weight: 600;
}
.rot-chip:hover { border-color: #f59e0b; }
.rot-chip:disabled { opacity: .45; cursor: not-allowed; }
.rot-row--hist { gap: .5rem; }
.rot-row--angle input[type="range"] { width: min(220px, 60vw); }
.rot-warn {
  font-size: .88rem; padding: .55rem .7rem; border-radius: 8px;
  background: rgba(245,158,11,.15); color: #b45309; margin: 0;
}
.rot-export {
  background: #16a34a; color: #fff; font-weight: 700; border: 0;
  border-radius: 8px; padding: .7rem 1.1rem; cursor: pointer;
}
.rot-export:disabled { opacity: .45; cursor: not-allowed; }
.rot-err { color: #b91c1c; margin-top: .75rem; }