/* Editor de imagem (/editor-de-imagem). Cores só pelas variáveis do tema. */
.image-editor .ie-drop { display: grid; justify-items: center; gap: 6px; text-align: center; cursor: pointer; }
.image-editor .ie-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.image-editor .ie-drop.dropzone.is-compact { min-height: 0; padding-block: 14px; gap: 2px; }
.image-editor .ie-drop.is-compact strong { font-size: 13px; }
.image-editor .ie-drop.is-compact .upload-icon,
.image-editor .ie-drop.is-compact small { display: none; }
.image-editor .ie-drop small { max-width: 60ch; color: var(--muted); }

.ie-status { min-height: 1.4em; margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.ie-status.is-error { color: var(--danger); font-weight: 600; }

.ie-workspace { display: grid; gap: 14px; margin-top: 12px; }
.ie-toolbar {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.ie-tool {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
    border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink);
    font: 600 13px Manrope, Arial, sans-serif; cursor: pointer;
}
.ie-tool:hover:not(:disabled) { background: var(--field-hover); border-color: var(--line); }
.ie-tool[aria-pressed="true"] { background: var(--cta); border-color: var(--cta); color: var(--button-ink); }
.ie-tool:disabled { opacity: .45; cursor: not-allowed; }
.ie-tool:focus-visible, .ie-chips button:focus-visible, .ie-ghost:focus-visible, .ie-crop:focus-visible {
    outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px;
}
.ie-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--line); }

.ie-cropbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 10px 12px; border: 1px solid var(--cta); border-radius: 12px; background: var(--surface);
}
.ie-cropbar[hidden] { display: none; }
.ie-label { font: 700 13px Manrope, Arial, sans-serif; color: var(--ink); }
.ie-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ie-chips button {
    min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px;
    background: var(--field); color: var(--ink); font: 600 13px Manrope, Arial, sans-serif; cursor: pointer;
}
.ie-chips button[aria-pressed="true"] { border-color: var(--cta); background: var(--cta); color: var(--button-ink); }
.ie-cropbar-actions { display: flex; gap: 8px; margin-left: auto; }
.ie-ghost {
    min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 10px;
    background: var(--field); color: var(--ink); font: 700 14px Manrope, Arial, sans-serif; cursor: pointer;
}
.ie-ghost:hover { border-color: var(--accent); background: var(--field-hover); }
.ie-apply { min-height: 44px; padding: 0 18px; }

.ie-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ie-stage {
    position: relative; display: grid; place-items: center; min-height: 260px; padding: 12px; user-select: none; -webkit-user-select: none;
    border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    /* Xadrez claro: mostra onde a imagem é transparente. */
    background: repeating-conic-gradient(var(--surface-soft) 0 25%, var(--surface) 0 50%) 0 0 / 20px 20px;
}
.ie-stage canvas { display: block; max-width: 100%; height: auto; box-shadow: 0 6px 24px rgb(0 0 0 / .18); }
.ie-info { justify-self: center; margin-top: 8px; color: var(--muted); font: 500 12px 'DM Mono', monospace; }

.ie-crop {
    position: absolute; box-sizing: border-box; border: 2px solid #fff; cursor: move; touch-action: none;
    /* Escurece fora do recorte. */
    box-shadow: 0 0 0 9999px rgb(0 0 0 / .5), 0 0 0 1px rgb(0 0 0 / .6);
    background-image: linear-gradient(rgb(255 255 255 / .35), rgb(255 255 255 / .35)), linear-gradient(rgb(255 255 255 / .35), rgb(255 255 255 / .35)),
                      linear-gradient(90deg, rgb(255 255 255 / .35), rgb(255 255 255 / .35)), linear-gradient(90deg, rgb(255 255 255 / .35), rgb(255 255 255 / .35));
    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
    background-position: 0 33.33%, 0 66.66%, 33.33% 0, 66.66% 0;
    background-repeat: no-repeat;
}
.ie-crop[hidden] { display: none; }
.ie-handle {
    position: absolute; width: 22px; height: 22px; border: 3px solid #fff; border-radius: 4px;
    background: var(--cta); box-shadow: 0 1px 4px rgb(0 0 0 / .5);
}
.ie-handle[data-handle="nw"] { left: -12px; top: -12px; cursor: nwse-resize; }
.ie-handle[data-handle="ne"] { right: -12px; top: -12px; cursor: nesw-resize; }
.ie-handle[data-handle="sw"] { left: -12px; bottom: -12px; cursor: nesw-resize; }
.ie-handle[data-handle="se"] { right: -12px; bottom: -12px; cursor: nwse-resize; }

.ie-panel { display: grid; gap: 12px; }
.ie-group {
    display: grid; gap: 10px; min-width: 0; margin: 0; padding: 12px 14px 14px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.ie-group legend { padding: 0 6px; font: 700 13px Manrope, Arial, sans-serif; color: var(--ink); }
.ie-group label { display: grid; gap: 4px; font: 600 12px Manrope, Arial, sans-serif; color: var(--muted); }
.ie-group input[type="number"], .ie-group select {
    width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 10px;
    border: 1px solid var(--line-strong); border-radius: 8px; background: var(--field); color: var(--ink); font-size: 15px;
}
.ie-group input[type="range"] { width: 100%; accent-color: var(--accent); }
.ie-size { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ie-group .ie-check { display: flex; align-items: center; gap: 8px; min-height: 32px; color: var(--ink); }
.ie-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.ie-range output { float: right; color: var(--ink); font-family: 'DM Mono', monospace; }
.ie-hint { color: var(--muted); font-size: 12px; line-height: 1.4; }
.ie-group .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }

@media (max-width: 900px) {
    .ie-main { grid-template-columns: 1fr; }
    .ie-tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ie-tool { width: 44px; justify-content: center; padding: 0; }
    .ie-cropbar-actions { width: 100%; margin-left: 0; }
    .ie-cropbar-actions > * { flex: 1; }
}