/* Photo-to-map cleanup editor (js/map-photo-editor.js) */
.mpe-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10500;
    padding: 1rem;
}
.mpe-modal {
    background: var(--card-bg, linear-gradient(145deg, #1e2128 0%, #191c23 100%));
    border: 1px solid var(--border-default, #2d3341);
    border-radius: 3px;
    width: 90vw;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mpe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem 1rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.mpe-header h3 {
    font-family: var(--font-cinzel, 'Cinzel'), serif;
    font-size: 1rem;
    color: var(--text-primary, #f5f5f5);
    margin: 0;
}
.mpe-close {
    background: none;
    border: none;
    color: var(--text-secondary, #a0a8b8);
    font-size: 1.1rem;
    cursor: pointer;
}
.mpe-close:hover { color: #f0d875; }
.mpe-body {
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.mpe-stage {
    position: relative;
    width: 100%;
    line-height: 0;
}
/* The !important guards defend against any global img/modal rules (style.css
   etc.) capping the image's size — the corner-handle coordinate math assumes
   the image fills the stage exactly, so nothing may shrink or letterbox it. */
.mpe-stage img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; display: block; border-radius: 3px; }
.mpe-crop-step[hidden] { display: none; }
.mpe-rotate-row { display: flex; gap: .5rem; }
.mpe-rotate {
    background: transparent;
    border: 1px solid var(--border-default, #2d3341);
    border-radius: 3px;
    color: var(--text-secondary, #a0a8b8);
    padding: .35rem .7rem;
    font-size: .78rem;
    cursor: pointer;
}
.mpe-rotate:hover { border-color: rgba(212, 175, 55, 0.4); color: var(--text-primary, #f5f5f5); }
.mpe-crop-step { display: flex; flex-direction: column; gap: .5rem; }
.mpe-handle {
    position: absolute;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
    border-radius: 50%;
    background: var(--gm-gold, #d4af37);
    border: 3px solid #191c23;
    cursor: grab;
    touch-action: none;
}
.mpe-handle:active { cursor: grabbing; }
.mpe-guide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.mpe-dim { fill: rgba(0, 0, 0, 0.55); }
.mpe-outline {
    fill: none;
    stroke: var(--gm-gold, #d4af37);
    stroke-width: 2;
    stroke-dasharray: 8 6;
    vector-effect: non-scaling-stroke;
}
.mpe-hint {
    font-family: var(--font-body, 'Inter'), sans-serif;
    font-size: .78rem;
    color: var(--text-muted, #6b7280);
    margin: 0;
}
.mpe-adjust-step[hidden] { display: none; }
.mpe-adjust-step { display: flex; flex-direction: column; gap: .6rem; }
.mpe-adjust-step canvas { width: 100%; height: auto; border-radius: 3px; }
.mpe-slider {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-family: var(--font-body, 'Inter'), sans-serif;
    font-size: .78rem;
    color: var(--text-secondary, #a0a8b8);
}
.mpe-error {
    font-family: var(--font-body, 'Inter'), sans-serif;
    font-size: .8rem;
    color: #e57373;
    margin: 0;
}
.mpe-footer {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: .7rem 1rem;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
}
.mpe-cancel {
    background: transparent;
    border: 1px solid var(--border-default, #2d3341);
    border-radius: 3px;
    color: var(--text-secondary, #a0a8b8);
    padding: .5rem 1rem;
    cursor: pointer;
}
.mpe-cancel:hover { border-color: rgba(212, 175, 55, 0.4); color: var(--text-primary, #f5f5f5); }
.mpe-recrop {
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--border-default, #2d3341);
    border-radius: 3px;
    color: var(--text-secondary, #a0a8b8);
    padding: .35rem .7rem;
    font-size: .78rem;
    cursor: pointer;
}
.mpe-recrop:hover { border-color: rgba(212, 175, 55, 0.4); color: var(--text-primary, #f5f5f5); }

@media (max-width: 768px) {
    .mpe-modal { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; }
    .mpe-body { padding: .75rem; gap: .5rem; }
}