.organizer-app {
  padding-top: 8px;
  padding-bottom: 24px;
  --brand: #4a5fca;
  --muted: #606b82;
}
.dark .organizer-app {
  --brand: #a0b0ff;
  --muted: #a2adc1;
}
.dark .organizer-app .m-btn.primary {
  color: #17203e;
}
.dark .organizer-app .m-btn.primary:hover:not(:disabled) {
  background: #b1beff;
  color: #17203e;
}
.organizer-app .merge-drop > .m-kicker {
  display: block;
  margin-top: 15px;
}
.organizer-app button,
.organizer-app input,
.organizer-app select {
  max-width: 100%;
}
.organizer-app :focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
.organizer-app [hidden] {
  display: none !important;
}
.organizer-toolbar,
.organizer-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 24px 0;
  padding: 23px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.organizer-toolbar > div:first-child,
.organizer-save-bar > div {
  min-width: 0;
}
.organizer-toolbar p,
.organizer-save-bar p {
  font-size: 11px;
  line-height: 1.8;
  color: var(--muted);
  margin: 7px 0;
}
.organizer-toolbar strong,
.organizer-save-bar strong {
  font-size: 14px;
}
.organizer-toolbar .m-toolbar {
  justify-content: flex-end;
  flex: 1;
}
.organizer-inline-panel {
  margin: 22px 0;
  padding: 23px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 17px;
  animation: organizer-reveal 0.22s ease;
}
.organizer-inline-panel h3 {
  font-size: 17px;
  letter-spacing: -0.3px;
}
.organizer-inline-panel .m-section-heading {
  margin-bottom: 20px;
}
.organizer-spaced {
  margin-top: 18px;
}
.organizer-confirm {
  display: flex;
  gap: 15px;
  padding: 22px;
  margin: 20px 0;
  border: 1px solid var(--brand);
  border-radius: 16px;
  background: var(--soft);
}
.organizer-confirm > i {
  color: var(--brand);
  font-size: 24px;
  flex-shrink: 0;
}
.organizer-confirm > div {
  min-width: 0;
}
.organizer-confirm strong {
  font-size: 14px;
}
.organizer-confirm p {
  font-size: 11px;
  line-height: 1.9;
  color: var(--muted);
  margin: 9px 0 15px;
}
.organizer-hint {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.organizer-field-error {
  color: #af334c;
  font-size: 11px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.organizer-field-error:empty {
  display: none;
}
.dark .organizer-field-error {
  color: #ffb1c0;
}
.organizer-workspace {
  margin: 32px 0;
}
.organizer-workspace .m-section-heading h2 {
  font-size: 25px;
  letter-spacing: -0.8px;
}
.organizer-workspace .m-section-heading p {
  font-size: 11px;
  color: var(--muted);
}
.organizer-selection-toolbar {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin: 20px 0;
}
.organizer-range-entry {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 16px 0;
}
.organizer-range-entry label {
  flex: 1;
  max-width: 430px;
}
.organizer-selection-actions {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.organizer-selection-actions #delete-selected {
  color: var(--rx-danger, #b43b53);
}
.organizer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 22px 0;
  min-width: 0;
}
.organizer-page {
  min-width: 0;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.organizer-page.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 12%, transparent);
}
.organizer-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 11px 11px 8px;
}
.organizer-position {
  font-size: 10px;
  font-weight: 700;
  color: var(--brand);
}
.page-drag {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  min-height: 32px;
  cursor: grab;
  padding: 3px 4px;
  touch-action: none;
}
.page-drag i {
  font-size: 16px;
}
.page-drag:active {
  cursor: grabbing;
}
.organizer-thumbnail {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 210px;
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  padding: 10px;
  cursor: zoom-in;
}
.organizer-paper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  background: #fff;
  color: #647083;
  box-shadow: 0 3px 12px #17203e16;
  flex-shrink: 0;
  overflow: hidden;
  min-width: 30px;
  min-height: 30px;
}
.organizer-paper > i {
  font-size: 32px;
  color: var(--brand);
  padding: 38px;
}
.organizer-paper > small {
  font-size: 9px;
  padding: 15px;
  line-height: 1.6;
}
.organizer-paper img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none !important;
  object-fit: contain;
  transform-origin: center;
}
.organizer-blank-label {
  font-size: 10px;
  color: #65718a;
  max-width: 80%;
  text-align: center;
}
.organizer-number {
  position: absolute;
  z-index: 2;
  font-family: Arial, sans-serif;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.organizer-number.is-top {
  top: var(--number-margin, 18px);
}
.organizer-number.is-bottom {
  bottom: var(--number-margin, 18px);
}
.organizer-number.align-center {
  left: 50%;
  transform: translateX(-50%);
}
.organizer-number.align-left {
  left: var(--number-margin, 18px);
}
.organizer-number.align-right {
  right: var(--number-margin, 18px);
}
.organizer-page-copy {
  padding: 12px;
}
.organizer-select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  min-height: 28px;
  cursor: pointer;
}
.organizer-select input {
  flex-shrink: 0;
}
.organizer-copy-badge {
  font-size: 8px;
  background: var(--soft);
  border-radius: 6px;
  padding: 4px 6px;
  color: var(--brand);
  margin-left: auto;
}
.organizer-selection-status {
  font-size: 10px;
  font-weight: 600;
}
.organizer-page-source {
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
  margin: 7px 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.organizer-page-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.organizer-page-actions button,
.organizer-page-move button,
.organizer-position-field button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 7px;
  min-height: 35px;
  color: var(--muted);
  font-size: 12px;
}
.organizer-page-actions button:hover:not(:disabled),
.organizer-page-move button:hover:not(:disabled) {
  background: var(--soft);
  color: var(--brand);
  border-color: var(--brand);
}
.organizer-page-actions [data-page-action="delete"] {
  color: var(--rx-danger, #b43b53);
}
.organizer-page-move {
  display: flex;
  gap: 5px;
  margin: 6px 0;
}
.organizer-page-move button {
  flex: 1;
  font-size: 10px;
}
.organizer-position-field {
  display: flex;
  gap: 5px;
  align-items: flex-end;
}
.organizer-position-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  font-size: 9px;
  color: var(--muted);
}
.organizer-position-field input {
  width: 55px;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 8px 5px;
  font-size: 11px;
  margin-left: auto;
}
.organizer-position-field button {
  width: 33px;
  flex-shrink: 0;
}
.organizer-grid.readonly .page-drag,
.organizer-grid.readonly .organizer-select input,
.organizer-grid.readonly .organizer-page-actions,
.organizer-grid.selection-only .page-drag,
.organizer-grid.selection-only .organizer-page-actions {
  display: none;
}
.organizer-grid.selection-only .organizer-thumbnail {
  height: 150px;
}
.organizer-grid.selection-only .organizer-page-source {
  margin-bottom: 0;
}
.organizer-drag-placeholder {
  opacity: 0.28;
  border: 2px dashed var(--brand);
  background: var(--soft);
}
.organizer-drag-preview {
  opacity: 0.93;
  box-shadow: 0 18px 50px #17203e30;
  transform: rotate(2deg);
  z-index: 10000 !important;
  pointer-events: none;
}
.organizer-is-dragging {
  cursor: grabbing;
  user-select: none;
}
.organizer-is-dragging .organizer-page {
  transition: none;
}
.organizer-pagination {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--muted);
  margin: 20px 0;
}
.organizer-pagination label {
  display: flex;
  gap: 8px;
  align-items: center;
}
.organizer-pagination input {
  width: 65px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px;
}
.organizer-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px 8px;
  padding: 25px 15px;
  background: var(--soft);
  border-radius: 18px;
  margin: 28px 0;
  text-align: center;
}
.organizer-summary > div {
  border-right: 1px solid var(--border);
}
.organizer-summary > div:nth-child(6) {
  border: 0;
}
.organizer-summary > div span {
  display: block;
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 7px;
}
.organizer-summary strong {
  font-size: 23px;
  letter-spacing: -0.7px;
}
.organizer-summary > p {
  grid-column: 1/-1;
  display: flex;
  gap: 20px;
  justify-content: center;
  font-size: 10px;
  color: var(--muted);
  flex-wrap: wrap;
  margin: 3px 0;
}
.organizer-summary b {
  font-weight: 500;
  color: var(--text);
}
.organizer-app .m-settings-group .m-toolbar {
  gap: 8px;
}
.organizer-app .m-settings-group .m-option em {
  font-size: 9px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
}
.organizer-app .unsupported {
  opacity: 0.7;
}
.organizer-app .m-field input[type="color"] {
  height: 44px;
  width: 100%;
  padding: 5px;
}
.organizer-app .m-field output {
  font-size: 11px;
  color: var(--brand);
}
.organizer-save-bar .merge-cta {
  margin: 0;
  min-width: 230px;
}
.organizer-save-bar {
  background: linear-gradient(140deg, var(--surface), var(--soft));
  margin-top: 27px;
}
.organizer-save-bar #download-original {
  margin-top: 5px;
}
.organizer-pending-row,
.organizer-trash-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.organizer-pending-row > div,
.organizer-trash-row > div {
  flex: 1;
  min-width: 0;
}
.organizer-pending-row strong,
.organizer-trash-row strong {
  font-size: 11px;
  display: block;
  overflow-wrap: anywhere;
}
.organizer-pending-row p,
.organizer-trash-row p {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.7;
  margin: 5px 0;
}
.organizer-trash-row > span {
  display: grid;
  place-items: center;
  background: var(--soft);
  color: var(--brand);
  border-radius: 9px;
  min-width: 36px;
  height: 36px;
  font-size: 12px;
}
.organizer-app .result-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.organizer-app #result-filename {
  overflow-wrap: anywhere;
  font-size: 12px;
  color: var(--brand);
}
.organizer-app #result-notes {
  text-align: left;
  font-size: 11px;
  line-height: 1.9;
}
.organizer-app #result-notes p {
  margin: 7px 0;
}
.organizer-app .preview-panel {
  margin-top: 30px;
}
.organizer-app .preview-panel > .m-segment {
  margin-bottom: 15px;
}
.organizer-app .preview-toolbar {
  flex-wrap: wrap;
  gap: 8px;
}
.organizer-app .rotation-preview-paper {
  position: relative;
  overflow: auto;
  min-height: 260px;
  max-height: 76vh;
  min-width: 0;
  padding: 20px;
  display: block;
}
.organizer-app .rotation-preview-stage {
  position: relative;
  background: #fff;
  box-shadow: 0 6px 30px #17203e20;
  margin: auto;
  flex-shrink: 0;
}
.organizer-app #preview-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: none;
}
.organizer-app #preview-blank {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #65718a;
  font-size: 13px;
}
.organizer-app #preview-status {
  font-size: 11px;
  line-height: 1.8;
  color: var(--muted);
}
@keyframes organizer-reveal {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (min-width: 1250px) {
  .organizer-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 950px) {
  .organizer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .organizer-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .organizer-toolbar .m-toolbar {
    justify-content: flex-start;
  }
  .organizer-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .organizer-summary > div:nth-child(3) {
    border: 0;
  }
  .organizer-app .result-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .organizer-app {
    padding-inline: 16px;
  }
  .organizer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .organizer-card-top {
    padding: 8px 8px 5px;
  }
  .organizer-page-copy {
    padding: 9px;
  }
  .organizer-thumbnail {
    height: 175px;
  }
  .organizer-page-actions button {
    min-height: 39px;
  }
  .organizer-page-move button {
    min-height: 38px;
  }
  .organizer-page-source {
    font-size: 9px;
  }
  .organizer-selection-status {
    font-size: 9px;
  }
  .organizer-select {
    gap: 6px;
  }
  .organizer-copy-badge {
    font-size: 7px;
    padding: 3px;
  }
  .page-drag span {
    display: none;
  }
  .organizer-toolbar,
  .organizer-save-bar,
  .organizer-inline-panel {
    padding: 17px;
  }
  .organizer-workspace > .m-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }
  .organizer-workspace .m-section-heading h2 {
    font-size: 22px;
  }
  .organizer-save-bar {
    align-items: stretch;
    flex-direction: column;
  }
  .organizer-save-bar .merge-cta {
    width: 100%;
    min-width: 0;
  }
  .organizer-range-entry {
    align-items: stretch;
    flex-direction: column;
  }
  .organizer-selection-toolbar {
    padding: 15px;
  }
  .organizer-selection-actions .m-btn {
    flex: 1;
    white-space: normal;
  }
  .organizer-summary {
    padding: 20px 10px;
  }
  .organizer-summary > div span {
    font-size: 9px;
  }
  .organizer-summary strong {
    font-size: 21px;
  }
  .organizer-pagination {
    gap: 9px;
  }
  .organizer-pagination .m-btn {
    padding: 10px;
    font-size: 10px;
  }
  .organizer-app .m-settings-columns {
    grid-template-columns: 1fr;
  }
  .organizer-app .preview-toolbar .m-btn {
    padding: 10px;
    font-size: 10px;
  }
  .organizer-app .rotation-preview-paper {
    padding: 12px;
  }
  .organizer-pending-row,
  .organizer-trash-row {
    flex-wrap: wrap;
  }
  .organizer-app .result-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .organizer-page .organizer-position-field label {
    font-size: 8px;
    gap: 3px;
  }
  .organizer-position-field input {
    width: 40px;
  }
  .organizer-position-field button {
    width: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .organizer-app * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}