/* Crop Image */
.cri-wrap { display: flex; justify-content: center; padding: 12px; border-radius: 16px; background: #e2e8f0; }
.cri-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.cri-stage img { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; pointer-events: none; }
.cri-box { position: absolute; border: 2px solid #fff; outline: 1px solid rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55); cursor: move; touch-action: none; box-sizing: border-box; }
.cri-box:focus-visible { outline: 3px solid #6366f1; }
.cri-h { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; touch-action: none; display: flex; align-items: center; justify-content: center; }
.cri-h::after { content: ""; width: 12px; height: 12px; background: #fff; border: 2px solid #4f46e5; border-radius: 3px; box-sizing: border-box; }
.cri-h-nw { left: 0; top: 0; cursor: nwse-resize; } .cri-h-n { left: 50%; top: 0; cursor: ns-resize; } .cri-h-ne { left: 100%; top: 0; cursor: nesw-resize; }
.cri-h-w { left: 0; top: 50%; cursor: ew-resize; } .cri-h-e { left: 100%; top: 50%; cursor: ew-resize; }
.cri-h-sw { left: 0; top: 100%; cursor: nesw-resize; } .cri-h-s { left: 50%; top: 100%; cursor: ns-resize; } .cri-h-se { left: 100%; top: 100%; cursor: nwse-resize; }
.cri-tip, .cri-info, .cri-hint { font-size: 12px; color: #64748b; margin: 0; overflow-wrap: anywhere; }
.cri-info { font-weight: 600; color: #334155; }
.cri-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .cri-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cri-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; color: #1e293b; }
.cri-field { width: 100%; padding: 9px 10px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a; font-size: 14px; min-height: 40px; }
.cri-wide { grid-column: span 2; }
.cri-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cri-btn-main { flex: 1 1 200px; padding: 12px 16px; border-radius: 12px; background: #4f46e5; color: #fff; font-weight: 700; border: 0; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cri-btn-main:hover { background: #4338ca; }
.cri-btn-alt { padding: 12px 16px; border-radius: 12px; background: #f1f5f9; color: #334155; font-weight: 600; border: 1px solid #e2e8f0; cursor: pointer; min-height: 44px; }
.cri-btn-alt:hover { background: #e2e8f0; }
.dark .cri-wrap { background: #0f172a; }
.dark .cri-tip, .dark .cri-hint { color: #94a3b8; }
.dark .cri-info, .dark .cri-label { color: #e2e8f0; }
.dark .cri-field { background: #334155; border-color: #475569; color: #f1f5f9; }
.dark .cri-btn-alt { background: #334155; border-color: #475569; color: #e2e8f0; }
.dark .cri-btn-alt:hover { background: #475569; }