.preview-toolbar-group {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.edit-photo-btn {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-width:164px;
  padding:10px 14px;
}
.edit-photo-btn-title {
  font-weight:700;
  color:var(--text);
  line-height:1.2;
}
.edit-photo-btn-sub {
  font-size:12px;
  color:var(--muted);
  line-height:1.2;
}

.photo-edit-dock[hidden] { display:none !important; }
.photo-edit-dock {
  flex:0 0 auto;
  display:grid;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f8fafc;
  box-shadow:0 8px 24px rgba(16, 24, 40, 0.08);
}
.photo-edit-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.photo-edit-head > div {
  display:flex;
  flex-direction:column;
  gap:2px;
}
.photo-edit-main-title { font-size:16px; }
.photo-edit-main-sub { font-size:13px; color:var(--muted); }
.photo-edit-dock-close { width:auto; margin:0; }

.photo-edit-tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.photo-edit-tab {
  width:auto;
  margin:0;
}
.photo-edit-tab.is-active,
.photo-edit-aspect-row .is-active,
.preview-toolbar-group .is-active {
  border-color:#8fb8ff;
  background:#edf3ff;
  color:#143964;
}
.photo-edit-tabpanel[hidden] { display:none !important; }
.photo-edit-tabpanel {
  display:grid;
  gap:10px;
}
.photo-edit-mode-row {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.photo-edit-mode-row strong { font-size:15px; }
.photo-edit-mode-row span { color:var(--muted); font-size:13px; }
.photo-edit-aspect-row {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.photo-edit-aspect-row button,
.photo-edit-actions button,
.preview-toolbar-group button {
  white-space:nowrap;
}
.photo-edit-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.photo-edit-actions .primary.compact,
.lut-apply-actions .primary.compact {
  width:auto;
  margin-top:0;
  min-width:88px;
}

/* Crop only: this overlay appears directly on the photo. */
.photo-edit-overlay[hidden] { display:none !important; }
.photo-edit-overlay {
  position:absolute;
  inset:0;
  z-index:15;
  background:rgba(10, 14, 20, 0.56);
  /* Do not blur the preview; blur looked like resolution loss. */
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.photo-edit-stage {
  position:absolute;
  inset:0;
  overflow:hidden;
}
.photo-edit-image {
  position:absolute;
  display:block;
  max-width:none;
  user-select:none;
  -webkit-user-drag:none;
  border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,0.28);
}
.photo-edit-box[hidden] { display:none !important; }
.photo-edit-box {
  position:absolute;
  border:2px solid #ffffff;
  border-radius:10px;
  box-shadow:0 0 0 9999px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.35);
  cursor:move;
  touch-action:none;
}
.photo-edit-size-badge {
  position:absolute;
  left:10px;
  top:10px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(17, 24, 39, 0.82);
  color:#fff;
  font-size:12px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.photo-edit-handle {
  position:absolute;
  width:18px;
  height:18px;
  border:2px solid #fff;
  border-radius:50%;
  background:#2159a6;
  padding:0;
  min-width:0;
}
.photo-edit-handle[data-handle="nw"] { left:-10px; top:-10px; cursor:nwse-resize; }
.photo-edit-handle[data-handle="ne"] { right:-10px; top:-10px; cursor:nesw-resize; }
.photo-edit-handle[data-handle="sw"] { left:-10px; bottom:-10px; cursor:nesw-resize; }
.photo-edit-handle[data-handle="se"] { right:-10px; bottom:-10px; cursor:nwse-resize; }

.photo-edit-lut-panel {
  gap:10px;
}
.lut-control-grid {
  display:grid;
  grid-template-columns:minmax(190px, .8fr) minmax(220px, 1.2fr) auto;
  gap:12px;
  align-items:end;
}
.lut-control-grid label { margin:0; }
.lut-control-grid .lut-file-row { margin:0; align-self:end; }

#photoEditLegacyControls { display:none !important; }

/* Fullscreen: keep controls compact and never overlay/blur the image. */
.preview-wrap:fullscreen .photo-edit-dock,
.preview-wrap.is-fullscreen-fallback .photo-edit-dock {
  background:#151d27;
  border-color:#2f3a46;
  color:#fff;
  box-shadow:none;
  padding:10px 12px;
}
.preview-wrap:fullscreen .photo-edit-dock .photo-edit-main-sub,
.preview-wrap.is-fullscreen-fallback .photo-edit-dock .photo-edit-main-sub,
.preview-wrap:fullscreen .photo-edit-dock .photo-edit-mode-row span,
.preview-wrap.is-fullscreen-fallback .photo-edit-dock .photo-edit-mode-row span,
.preview-wrap:fullscreen .photo-edit-dock .hint,
.preview-wrap.is-fullscreen-fallback .photo-edit-dock .hint {
  color:#b8c3cf;
}
.preview-wrap:fullscreen .photo-edit-dock .status,
.preview-wrap.is-fullscreen-fallback .photo-edit-dock .status {
  background:#202a36;
  border-color:#344354;
  color:#e8eef5;
}
.preview-wrap:fullscreen .photo-edit-dock select,
.preview-wrap.is-fullscreen-fallback .photo-edit-dock select {
  background:#fff;
  color:#111827;
}
.preview-wrap:fullscreen .photo-edit-dock button.ghost,
.preview-wrap.is-fullscreen-fallback .photo-edit-dock button.ghost {
  background:#fff;
  color:#243345;
}

@media (max-width: 1080px) {
  .preview-toolbar { flex-direction:column; align-items:stretch; }
  .preview-toolbar-group { justify-content:stretch; }
  .preview-toolbar-group button { flex:1 1 auto; }
  .lut-control-grid { grid-template-columns:1fr 1fr; }
  .lut-control-grid .lut-file-row { grid-column:1 / -1; }
}
@media (max-width: 640px) {
  .photo-edit-dock { padding:10px; }
  .photo-edit-head { align-items:flex-start; }
  .photo-edit-handle { width:24px; height:24px; }
  .photo-edit-handle[data-handle="nw"] { left:-12px; top:-12px; }
  .photo-edit-handle[data-handle="ne"] { right:-12px; top:-12px; }
  .photo-edit-handle[data-handle="sw"] { left:-12px; bottom:-12px; }
  .photo-edit-handle[data-handle="se"] { right:-12px; bottom:-12px; }
  .edit-photo-btn { min-width:0; width:100%; }
  .lut-control-grid { grid-template-columns:1fr; }
  .lut-control-grid .lut-file-row { grid-column:auto; }
}


/* v15: compact LUT dock so the preview remains visible in normal mode. */
.photo-edit-dock[data-mode="lut"] {
  gap:8px;
  padding:9px 12px;
}
.photo-edit-head-compact {
  min-height:38px;
}
.photo-edit-head-compact .photo-edit-tabs {
  flex:1 1 auto;
}
.photo-edit-dock[data-mode="lut"] .photo-edit-tabpanel {
  gap:7px;
}
.photo-edit-dock[data-mode="lut"] .lut-control-grid {
  grid-template-columns:minmax(180px, .8fr) minmax(240px, 1.25fr) auto;
  gap:10px;
}
.photo-edit-dock[data-mode="lut"] .lut-file-row {
  flex-wrap:nowrap;
}
.photo-edit-dock[data-mode="lut"] .lut-file-note {
  white-space:nowrap;
}
.lut-compact-footer {
  display:grid;
  grid-template-columns:auto minmax(220px, 1fr);
  gap:10px;
  align-items:center;
}
.lut-primary-actions {
  flex-wrap:nowrap;
}
.lut-primary-actions button {
  white-space:nowrap;
}
.photo-edit-dock[data-mode="lut"] .lut-scope-status {
  margin:0;
  min-width:0;
  padding:8px 10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lut-more-settings {
  margin:0;
  font-size:13px;
}
.lut-more-settings summary {
  cursor:pointer;
  color:var(--muted);
  user-select:none;
  width:max-content;
}
.lut-more-settings[open] {
  padding-top:4px;
}
.lut-more-settings .secondary {
  margin-top:8px;
}
.lut-more-settings .hint {
  margin:7px 0 0;
}

@media (max-width: 1080px) {
  .photo-edit-dock[data-mode="lut"] {
    padding:8px 10px;
    gap:7px;
  }
  .photo-edit-dock[data-mode="lut"] .lut-control-grid {
    grid-template-columns:minmax(170px, .9fr) minmax(220px, 1.2fr) auto;
  }
  .photo-edit-dock[data-mode="lut"] .lut-file-note {
    display:none;
  }
  .lut-compact-footer {
    grid-template-columns:1fr;
    gap:7px;
  }
  .lut-primary-actions {
    flex-wrap:wrap;
  }
  .lut-primary-actions button {
    flex:1 1 auto;
  }
}

@media (max-width: 760px) {
  .photo-edit-dock[data-mode="lut"] .lut-control-grid {
    grid-template-columns:1fr 1fr;
  }
  .photo-edit-dock[data-mode="lut"] .lut-file-row {
    grid-column:1 / -1;
  }
}

@media (max-width: 640px) {
  .photo-edit-dock[data-mode="lut"] .lut-control-grid {
    grid-template-columns:1fr;
  }
  .photo-edit-dock[data-mode="lut"] .lut-file-row {
    grid-column:auto;
  }
  .lut-primary-actions {
    flex-direction:row;
  }
  .lut-primary-actions button {
    flex:1 1 120px;
    width:auto;
  }
}


/* v17: while editing, hide the composed preview and show only the editing image. */
.preview-wrap.is-editing-photo #canvas,
.preview-wrap.is-editing-photo #emptyPreview {
  visibility: hidden;
}

.photo-edit-overlay {
  background: #f3f4f6;
}

.photo-edit-stage {
  background: #f3f4f6;
}

.photo-edit-preview-canvas[hidden] {
  display: none !important;
}

.photo-edit-preview-canvas {
  position: absolute;
  display: block;
  max-width: none;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

.preview-wrap:fullscreen .photo-edit-overlay,
.preview-wrap.is-fullscreen-fallback .photo-edit-overlay,
.preview-wrap:fullscreen .photo-edit-stage,
.preview-wrap.is-fullscreen-fallback .photo-edit-stage {
  background: #10161d;
}


/* v18: hidden must always win over component display rules. */
.photo-edit-image[hidden],
.photo-edit-preview-canvas[hidden] {
  display:none !important;
}

/* The edit previews are always fitted inside the shell, so scrollbars are unnecessary. */
.preview-wrap.is-editing-photo .canvas-shell,
.preview-wrap:fullscreen.is-editing-photo .canvas-shell,
.preview-wrap.is-fullscreen-fallback.is-editing-photo .canvas-shell {
  overflow:hidden !important;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.preview-wrap.is-editing-photo .canvas-shell::-webkit-scrollbar,
.preview-wrap:fullscreen.is-editing-photo .canvas-shell::-webkit-scrollbar,
.preview-wrap.is-fullscreen-fallback.is-editing-photo .canvas-shell::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
}

/* Override the older LUT scroll-container rule. */
.preview-wrap.is-editing-photo.is-lut-editing .canvas-shell {
  align-items:center;
  justify-content:center;
  overflow:hidden !important;
}
.preview-wrap.is-editing-photo.is-lut-editing .canvas-shell > canvas {
  margin:0;
}


/* v21: editing navigation stays on one row. */
.photo-edit-head.photo-edit-head-compact {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
}

.photo-edit-head.photo-edit-head-compact > .photo-edit-tabs {
  display:flex;
  flex-direction:row;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.photo-edit-head.photo-edit-head-compact .photo-edit-dock-close {
  flex:0 0 auto;
  white-space:nowrap;
}

.photo-edit-aspect-row {
  align-items:center;
}

.photo-edit-aspect-row .crop-apply-inline {
  width:auto;
  margin:0;
  min-width:120px;
  white-space:nowrap;
}

.photo-edit-crop-status {
  margin:0;
}

@media (max-width: 640px) {
  .photo-edit-head.photo-edit-head-compact {
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .photo-edit-head.photo-edit-head-compact::-webkit-scrollbar {
    display:none;
  }
  .photo-edit-head.photo-edit-head-compact > .photo-edit-tabs {
    flex-wrap:nowrap;
  }
}


/* v22: feedback is a floating toast so it never steals preview height. */
.photo-edit-toast[hidden] {
  display:none !important;
}
.photo-edit-toast {
  position:absolute;
  top:14px;
  right:14px;
  z-index:50;
  max-width:min(420px, calc(100% - 28px));
  padding:9px 13px;
  border:1px solid #9ebbe3;
  border-radius:10px;
  background:rgba(237, 243, 255, 0.96);
  color:#174a86;
  box-shadow:0 8px 24px rgba(15, 32, 55, 0.16);
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  pointer-events:none;
}
.photo-edit-toast.is-error {
  border-color:#efb2ad;
  background:rgba(255, 242, 241, 0.97);
  color:#9b2c24;
}
.preview-wrap:fullscreen .photo-edit-toast,
.preview-wrap.is-fullscreen-fallback .photo-edit-toast {
  top:16px;
  right:16px;
}


/* v30: mobile editing prioritizes the image area. */
.photo-edit-fullscreen-mobile {
  display:none;
  flex:0 0 auto;
  white-space:nowrap;
}

@media (max-width: 640px) {
  /* The regular preview toolbar is redundant while editing. */
  .preview-wrap.is-editing-photo > .preview-toolbar {
    display:none !important;
  }

  .preview-wrap.is-editing-photo {
    padding:6px;
    gap:6px;
    top:0;
  }

  .preview-wrap.is-editing-photo .photo-edit-dock {
    padding:7px 8px;
    gap:6px;
    border-radius:12px;
  }

  .preview-wrap.is-editing-photo .photo-edit-head.photo-edit-head-compact {
    min-height:0;
    gap:6px;
    overflow:visible;
  }

  .preview-wrap.is-editing-photo .photo-edit-head.photo-edit-head-compact > .photo-edit-tabs {
    gap:6px;
    flex:0 1 auto;
  }

  .preview-wrap.is-editing-photo .photo-edit-tab,
  .preview-wrap.is-editing-photo .photo-edit-dock-close,
  .preview-wrap.is-editing-photo .photo-edit-fullscreen-mobile {
    padding:7px 9px;
    border-radius:10px;
    font-size:13px;
    line-height:1.2;
  }

  .preview-wrap.is-editing-photo .photo-edit-fullscreen-mobile {
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .preview-wrap.is-editing-photo .photo-edit-dock-close {
    margin-left:auto;
  }

  .preview-wrap.is-editing-photo .photo-edit-tabpanel {
    gap:5px;
  }

  .preview-wrap.is-editing-photo .photo-edit-mode-row {
    min-height:0;
    gap:0;
    margin:0;
  }

  .preview-wrap.is-editing-photo .photo-edit-mode-row strong {
    display:none;
  }

  .preview-wrap.is-editing-photo .photo-edit-mode-row span {
    font-size:11px;
    line-height:1.25;
  }

  .preview-wrap.is-editing-photo .photo-edit-aspect-row {
    gap:5px;
  }

  .preview-wrap.is-editing-photo .photo-edit-aspect-row .photo-aspect-btn {
    min-width:0;
    padding:7px 9px;
    border-radius:10px;
    font-size:13px;
    line-height:1.15;
  }

  .preview-wrap.is-editing-photo .photo-edit-aspect-row .crop-apply-inline {
    min-width:112px;
    padding:7px 10px;
    margin:0;
    border-radius:10px;
    font-size:13px;
    line-height:1.15;
  }

  /* Use nearly all remaining viewport height for the edit image. */
  .preview-wrap.is-editing-photo .canvas-shell {
    max-height:calc(100dvh - 185px);
    min-height:220px;
    padding:4px;
    border-radius:12px;
  }

  .preview-wrap.is-editing-photo .photo-edit-overlay,
  .preview-wrap.is-editing-photo .photo-edit-stage {
    border-radius:11px;
  }

  .preview-wrap.is-editing-photo .photo-edit-handle {
    width:20px;
    height:20px;
  }
  .preview-wrap.is-editing-photo .photo-edit-handle[data-handle="nw"] { left:-10px; top:-10px; }
  .preview-wrap.is-editing-photo .photo-edit-handle[data-handle="ne"] { right:-10px; top:-10px; }
  .preview-wrap.is-editing-photo .photo-edit-handle[data-handle="sw"] { left:-10px; bottom:-10px; }
  .preview-wrap.is-editing-photo .photo-edit-handle[data-handle="se"] { right:-10px; bottom:-10px; }
}

@media (max-width: 420px) {
  .preview-wrap.is-editing-photo .photo-edit-tab,
  .preview-wrap.is-editing-photo .photo-edit-dock-close,
  .preview-wrap.is-editing-photo .photo-edit-fullscreen-mobile {
    padding:6px 7px;
    font-size:12px;
  }
  .preview-wrap.is-editing-photo .photo-edit-head.photo-edit-head-compact,
  .preview-wrap.is-editing-photo .photo-edit-head.photo-edit-head-compact > .photo-edit-tabs {
    gap:4px;
  }
  .preview-wrap.is-editing-photo .canvas-shell {
    max-height:calc(100dvh - 175px);
  }
}


/* v31: compact edit dock and let the preview use the remaining height on tablet/mobile widths. */
@media (max-width: 1080px) {
  .preview-wrap.is-editing-photo .photo-edit-dock {
    padding:8px 10px;
    gap:6px;
    border-radius:12px;
  }

  .preview-wrap.is-editing-photo .photo-edit-head.photo-edit-head-compact {
    min-height:0;
    gap:6px;
    align-items:center;
  }

  .preview-wrap.is-editing-photo .photo-edit-head.photo-edit-head-compact > .photo-edit-tabs {
    gap:6px;
    flex:1 1 auto;
    min-width:0;
  }

  .preview-wrap.is-editing-photo .photo-edit-tab,
  .preview-wrap.is-editing-photo .photo-edit-dock-close,
  .preview-wrap.is-editing-photo .photo-edit-fullscreen-mobile {
    padding:7px 10px;
    border-radius:10px;
    font-size:13px;
    line-height:1.15;
  }

  .preview-wrap.is-editing-photo .photo-edit-tabpanel {
    gap:6px;
  }

  .preview-wrap.is-editing-photo .photo-edit-mode-row {
    gap:6px;
    min-height:0;
  }

  .preview-wrap.is-editing-photo .photo-edit-mode-row strong {
    font-size:14px;
  }

  .preview-wrap.is-editing-photo .photo-edit-mode-row span {
    font-size:12px;
    line-height:1.3;
  }

  .preview-wrap.is-editing-photo .photo-edit-aspect-row {
    gap:6px;
  }

  .preview-wrap.is-editing-photo .photo-edit-aspect-row .photo-aspect-btn,
  .preview-wrap.is-editing-photo .photo-edit-aspect-row .crop-apply-inline {
    min-width:0;
    padding:7px 10px;
    border-radius:10px;
    font-size:13px;
    line-height:1.15;
  }

  .preview-wrap.is-editing-photo .photo-edit-crop-status {
    margin:0;
    font-size:12px;
    line-height:1.35;
    padding:6px 8px;
  }
}

@media (max-width: 640px) {
  .preview-wrap.is-editing-photo .photo-edit-dock {
    padding:7px 8px;
    gap:5px;
  }

  .preview-wrap.is-editing-photo .photo-edit-head.photo-edit-head-compact {
    gap:5px;
  }

  .preview-wrap.is-editing-photo .photo-edit-head.photo-edit-head-compact > .photo-edit-tabs {
    gap:5px;
  }

  .preview-wrap.is-editing-photo .photo-edit-tab,
  .preview-wrap.is-editing-photo .photo-edit-dock-close,
  .preview-wrap.is-editing-photo .photo-edit-fullscreen-mobile,
  .preview-wrap.is-editing-photo .photo-edit-aspect-row .photo-aspect-btn,
  .preview-wrap.is-editing-photo .photo-edit-aspect-row .crop-apply-inline {
    padding:6px 8px;
    font-size:12px;
  }

  .preview-wrap.is-editing-photo .photo-edit-mode-row span,
  .preview-wrap.is-editing-photo .photo-edit-crop-status {
    font-size:11px;
  }
}