/* <Cropper /> — default styling, lm-cropper-* convention */
.lm-cropper {
    display: inline-block;
    font-family: system-ui, sans-serif;
}

.lm-cropper .lm-cropper-editor {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--lm-border-color, #e4e4e7);
    background: var(--lm-background-color-header, #f8fafc);
    cursor: pointer;
    user-select: none;
    touch-action: none; /* the editor owns touch gestures (pan + pinch) */
}

.lm-cropper.lm-cropper-edition .lm-cropper-editor {
    cursor: grab;
    background: var(--lm-background-color, #fff);
}

.lm-cropper.lm-cropper-dragging .lm-cropper-editor {
    border: 1px dashed var(--lm-font-color, #000); /* v5 drop feedback */
}

.lm-cropper .lm-cropper-canvas {
    display: block;
}

.lm-cropper .lm-cropper-box {
    display: none;
    position: absolute;
    z-index: 1;
    border: 1px dashed var(--lm-background-color, #fff);
    outline: 1px dashed var(--lm-border-outline, #475569);
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.4);
}

.lm-cropper.lm-cropper-edition .lm-cropper-box {
    display: block;
}

/* keyboard focus ring (arrows move, Shift+arrows resize) */
.lm-cropper .lm-cropper-box:focus-visible {
    outline: 2px solid var(--lm-main-color, #2563eb);
    outline-offset: 1px;
}

.lm-cropper .lm-cropper-controls {
    border: 1px solid var(--lm-border-color, #e4e4e7);
    border-top: none;
}

.lm-cropper .lm-cropper-ranges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    padding: 12px 14px;
}

.lm-cropper .lm-cropper-range {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: var(--lm-font-grayout, #475569);
}

.lm-cropper .lm-cropper-range input {
    display: block;
    margin-top: 4px;
    width: 92px;
    accent-color: var(--lm-main-color, #2563eb);
}

/* ---- transform / filter / aspect tools row */
.lm-cropper .lm-cropper-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 14px 12px;
}

.lm-cropper .lm-cropper-transform,
.lm-cropper .lm-cropper-filter {
    border: 1px solid var(--lm-border-color, #e4e4e7);
    border-radius: var(--lm-radius, 6px);
    background: var(--lm-background-color, #fff);
    color: var(--lm-font-color, #0f172a);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.lm-cropper .lm-cropper-transform {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    line-height: 1;
}

/* inline SVG icons (no icon-font dependency): crisp 2px strokes */
.lm-cropper .lm-cropper-transform svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lm-cropper .lm-cropper-filter {
    padding: 0 10px;
    height: 30px;
}

.lm-cropper .lm-cropper-filter.lm-active {
    background: var(--lm-main-color, #2563eb);
    border-color: var(--lm-main-color, #2563eb);
    color: #fff;
}

.lm-cropper .lm-cropper-transform:disabled,
.lm-cropper .lm-cropper-filter:disabled,
.lm-cropper .lm-cropper-aspect:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.lm-cropper .lm-cropper-aspect {
    margin-left: auto;
    height: 30px;
    border: 1px solid var(--lm-border-color, #e4e4e7);
    border-radius: var(--lm-radius, 6px);
    background: var(--lm-background-color, #fff);
    color: var(--lm-font-color, #0f172a);
    font: inherit;
    font-size: 12px;
    padding: 0 6px;
    cursor: pointer;
}

.lm-cropper .lm-cropper-buttons {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--lm-border-color, #e4e4e7);
}

.lm-cropper .lm-cropper-buttons button {
    padding: 8px 14px;
    border: 1px solid var(--lm-border-color, #e4e4e7);
    border-radius: var(--lm-radius, 6px);
    background: var(--lm-background-color, #fff);
    color: var(--lm-font-color, #0f172a);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.lm-cropper .lm-cropper-buttons button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.lm-cropper .lm-cropper-buttons .lm-cropper-save {
    flex: 1;
    background: var(--lm-main-color, #2563eb);
    border-color: var(--lm-main-color, #2563eb);
    color: #fff;
}

.lm-cropper .lm-cropper-buttons .lm-cropper-delete {
    margin-left: auto;
    border-color: #fca5a5;
    color: var(--lm-color-danger, #b91c1c);
}

.lm-cropper .lm-cropper-file {
    display: none;
}