.image-transform-settings{display:grid;gap:18px}.image-transform-section{padding:18px;border:1px solid var(--border-color,#d9dee8);border-radius:12px;background:var(--card-bg,#fff)}.image-transform-title{font-weight:700;margin-bottom:6px}.image-transform-title.compact{margin-top:16px}.image-transform-help{font-size:.9rem;opacity:.75;margin-bottom:12px}.image-transform-choice-group{display:flex;gap:10px}.image-transform-choice-group.wrap{flex-wrap:wrap}.image-transform-choice{border:1px solid var(--border-color,#cfd6e2);background:transparent;border-radius:9px;padding:9px 14px;cursor:pointer}.image-transform-choice.active{border-color:currentColor;font-weight:700}.image-transform-grid{display:grid;gap:12px}.image-transform-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.image-transform-grid label{display:grid;gap:6px;font-size:.9rem}.image-transform-settings input[type="number"],.image-transform-settings select{width:100%;padding:10px;border:1px solid var(--border-color,#cfd6e2);border-radius:8px;background:var(--card-bg,#fff);color:inherit}.image-transform-check{display:flex;gap:9px;align-items:center;margin-top:12px}.image-transform-range-row{display:flex;gap:12px;align-items:center}.image-transform-range-row input{flex:1}.image-transform-validation{padding:12px 14px;border-radius:9px;background:rgba(100,116,139,.08)}.image-transform-validation.valid{background:rgba(34,197,94,.09)}.image-transform-validation.error{background:rgba(239,68,68,.09)}.hidden{display:none!important}@media(max-width:640px){.image-transform-grid.two{grid-template-columns:1fr}.image-transform-choice{flex:1 1 auto}}

/* =========================================================
   EASYFILE IMAGE TRANSFORMS — SHARED FINISHING
========================================================= */
.image-transform-validation {
    font-weight: 650;
    color: #6b7280;
    background: #f3f4f6;
}
.image-transform-validation.valid {
    color: var(--green-text);
    background: var(--green-hover);
}
.image-transform-validation.error {
    color: #991b1b;
    background: #fee2e2;
}

.image-transform-range-row strong {
    min-width: 52px;
    color: var(--violet);
    text-align: right;
}

/* Crop conceptual preview */
.crop-concept-preview {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #ddd6fe;
    border-radius: 12px;
    background: rgba(255,255,255,.72);
}
.crop-concept-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.crop-concept-caption strong { color: var(--green-text); }
.crop-concept-caption span { color: var(--violet); font-size: 13px; font-weight: 750; }
.crop-preview-frame {
    position: relative;
    width: min(100%, 430px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin: 0 auto 10px;
    border: 2px solid #c4b5fd;
    border-radius: 12px;
    background: linear-gradient(135deg, #ede9fe, #f8fafc 48%, #d1fae5);
}
.crop-preview-grid-lines {
    position: absolute;
    inset: 0;
    opacity: .34;
    background-image:
        linear-gradient(to right, transparent 33.1%, #64748b 33.3%, #64748b 33.6%, transparent 33.8%, transparent 66.2%, #64748b 66.4%, #64748b 66.7%, transparent 66.9%),
        linear-gradient(to bottom, transparent 33.1%, #64748b 33.3%, #64748b 33.6%, transparent 33.8%, transparent 66.2%, #64748b 66.4%, #64748b 66.7%, transparent 66.9%);
}
.crop-preview-area {
    position: absolute;
    display: grid;
    place-items: center;
    border: 3px solid var(--green-text);
    border-radius: 7px;
    background: rgba(209,250,229,.46);
    box-shadow: 0 0 0 999px rgba(15,23,42,.22);
    transition: width .24s ease, height .24s ease, left .24s ease, top .24s ease;
}
.crop-preview-area span {
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--green-hover);
    color: var(--green-text);
    font-size: 12px;
    font-weight: 800;
}

/* Arbitrary rotation */
.rotate-custom-angle {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #ddd6fe;
}
.rotate-angle-toolbar {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) minmax(160px, 1fr);
    gap: 12px;
    margin-bottom: 10px;
}
.rotate-angle-toolbar label {
    display: grid;
    gap: 6px;
    color: var(--green-text);
    font-size: 13px;
    font-weight: 750;
}
.rotate-angle-equivalent {
    margin: 7px 0 8px;
    color: var(--violet);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 800;
}

@media(max-width:640px){
    .rotate-angle-toolbar{grid-template-columns:1fr}
    .crop-concept-caption{align-items:flex-start;flex-direction:column;gap:3px}
}