/* In-app photo editor modal */
.img-editor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(24, 16, 10, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ie-fade 0.18s ease-out;
}

@keyframes ie-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.img-editor-panel {
  width: min(460px, 100%);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(20, 10, 0, 0.35));
  overflow: hidden;
}

.img-editor-head {
  padding: 16px 20px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.img-editor-head h2 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.img-editor-head p {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

.img-editor-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #1a110a;
  touch-action: none;
  overflow: hidden;
}

.img-editor-frame canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.img-editor-frame canvas:active {
  cursor: grabbing;
}

/* Rule-of-thirds grid overlay */
.img-editor-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-position:
    33.333% 0,
    66.666% 0,
    0 33.333%,
    0 66.666%;
  background-repeat: no-repeat;
  background-size:
    1px 100%,
    1px 100%,
    100% 1px,
    100% 1px;
  opacity: 0.5;
}

.img-editor-controls {
  padding: 14px 20px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#ie-zoom {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  height: 22px;
}

#ie-zoom::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(to right, var(--accent), var(--crema));
  border-radius: 2px;
}

#ie-zoom::-moz-range-track {
  height: 3px;
  background: linear-gradient(to right, var(--accent), var(--crema));
  border-radius: 2px;
}

#ie-zoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-solid);
  border: 2px solid var(--accent);
  margin-top: -8px;
  box-shadow: 0 1px 3px rgba(20, 10, 0, 0.18);
  cursor: pointer;
}

#ie-zoom::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-solid);
  border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(20, 10, 0, 0.18);
  cursor: pointer;
}

.img-editor-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.img-editor-row .btn.small {
  padding: 6px 12px;
  font-size: 12px;
}

#ie-enhance.on {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.img-editor-actions {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line);
}

.img-editor-actions .btn {
  flex: 1;
}

/* Lock page scroll while editor is open */
body.no-scroll {
  overflow: hidden;
}