.crop-layout{display:flex;flex-direction:column;gap:20px;margin-top:16px}.crop-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:var(--bg-elev);border:1px solid var(--border);padding:12px 16px;border-radius:12px}.crop-ratios{display:flex;flex-wrap:wrap;gap:8px}.ratio-btn{background:transparent;border:1px solid var(--border);color:var(--text);padding:6px 14px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s ease}.ratio-btn:hover{background:#ffffff0d}.ratio-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}.crop-viewport{position:relative;display:flex;justify-content:center;align-items:center;background:#08090d;border:1px solid var(--border);border-radius:12px;min-height:400px;max-height:70vh;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}.crop-canvas{display:block;max-width:100%;max-height:70vh;cursor:crosshair}.crop-controls{display:grid;grid-template-columns:1fr 300px;gap:20px}@media(max-width:768px){.crop-controls{grid-template-columns:1fr}}.crop-info-bar{display:flex;align-items:center;gap:16px;font-size:14px;color:var(--text-dim)}.crop-info-bar strong{color:var(--text)}.crop-export-panel{display:flex;flex-direction:column;gap:12px;background:var(--bg-elev);border:1px solid var(--border);padding:16px;border-radius:12px}.crop-format-select{width:100%;background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:6px;font-size:14px}