/* Crop tool — canvas-based cropper UI */
.crop-workspace{display:grid;grid-template-columns:1fr 320px;gap:24px;margin-top:24px}
@media(max-width:968px){.crop-workspace{grid-template-columns:1fr}}

.crop-stage{
    position:relative;
    background:repeating-conic-gradient(#1a1a1d 0% 25%, #111113 0% 50%) 50% / 24px 24px;
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    min-height:400px;
    display:flex;
    align-items:center;
    justify-content:center;
    user-select:none;
    touch-action:none;
}
[data-theme="light"] .crop-stage{
    background:repeating-conic-gradient(#F4F4F5 0% 25%, #FFFFFF 0% 50%) 50% / 24px 24px;
}
.crop-stage canvas{
    max-width:100%;
    max-height:600px;
    display:block;
    pointer-events:none;
}

/* Crop frame — absolute positioned over canvas */
.crop-frame{
    position:absolute;
    box-shadow:0 0 0 9999px rgba(0,0,0,0.55);
    border:1px solid var(--accent);
    cursor:move;
    box-sizing:border-box;
}
[data-theme="light"] .crop-frame{box-shadow:0 0 0 9999px rgba(255,255,255,0.6)}

/* Grid of thirds overlay inside crop frame */
.crop-grid{
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
        linear-gradient(to right, transparent 33.33%, rgba(255,255,255,0.25) 33.33%, rgba(255,255,255,0.25) calc(33.33% + 1px), transparent calc(33.33% + 1px), transparent 66.66%, rgba(255,255,255,0.25) 66.66%, rgba(255,255,255,0.25) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
        linear-gradient(to bottom, transparent 33.33%, rgba(255,255,255,0.25) 33.33%, rgba(255,255,255,0.25) calc(33.33% + 1px), transparent calc(33.33% + 1px), transparent 66.66%, rgba(255,255,255,0.25) 66.66%, rgba(255,255,255,0.25) calc(66.66% + 1px), transparent calc(66.66% + 1px));
}

/* Handles */
.crop-handle{
    position:absolute;
    width:12px;
    height:12px;
    background:var(--accent);
    border:2px solid var(--bg);
    border-radius:50%;
    z-index:2;
}
.handle-nw{top:-7px;left:-7px;cursor:nw-resize}
.handle-n{top:-7px;left:50%;transform:translateX(-50%);cursor:n-resize}
.handle-ne{top:-7px;right:-7px;cursor:ne-resize}
.handle-e{top:50%;right:-7px;transform:translateY(-50%);cursor:e-resize}
.handle-se{bottom:-7px;right:-7px;cursor:se-resize}
.handle-s{bottom:-7px;left:50%;transform:translateX(-50%);cursor:s-resize}
.handle-sw{bottom:-7px;left:-7px;cursor:sw-resize}
.handle-w{top:50%;left:-7px;transform:translateY(-50%);cursor:w-resize}

/* Control panel beside stage */
.crop-controls{display:flex;flex-direction:column;gap:16px}
.crop-controls .control-group{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px}
.crop-controls .control-label{font-size:.8125rem;font-weight:600;color:var(--text-secondary);margin-bottom:10px}

.aspect-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.aspect-btn{
    background:var(--bg);
    color:var(--text-secondary);
    border:1px solid var(--border);
    border-radius:8px;
    padding:8px 6px;
    font-size:.8125rem;
    font-weight:500;
    cursor:pointer;
    transition:all .15s;
}
.aspect-btn:hover{border-color:var(--border-strong);color:var(--text)}
.aspect-btn.active{background:var(--text);color:var(--bg);border-color:var(--text)}

.crop-dims{display:flex;flex-direction:column;gap:8px}
.crop-dim-row{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px;align-items:center}
.crop-dim-label{font-size:.8125rem;font-weight:600;color:var(--muted);text-align:center}
.crop-dim-row input{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:6px;font-size:.8125rem;width:100%;min-width:0}
.crop-dim-row input:focus{outline:1px solid var(--accent);border-color:var(--accent)}