:root{--kirp-bg:#0b2e44;--kirp-line:rgba(132,207,220,.22);--kirp-muted:#a9c4d0;--kirp-text:#f3f8fa}*{box-sizing:border-box}body{background:var(--kirp-bg);color:var(--kirp-text)}button,input,select,textarea{font:inherit}button{cursor:pointer}main{max-width:1760px;margin:auto;padding:20px 22px 32px}.page-head{display:flex;align-items:center;gap:17px;padding:18px 20px;margin-bottom:14px;border:1px solid var(--kirp-line);border-radius:18px;background:linear-gradient(135deg,#14506a,#0a2f44)}.page-icon{width:52px;height:52px;display:grid;place-items:center;flex-shrink:0;border:1px solid #438878;border-radius:16px;background:#164c51;color:#79d7c0}.page-icon svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}.page-head h1{font-size:clamp(24px,3vw,34px);line-height:1.12;margin:0;letter-spacing:-.025em}.page-head p{margin:6px 0 0;color:#c5d9e2;font-size:14px}.panel{background:linear-gradient(180deg,#10445f,#082d41);border:1px solid var(--kirp-line);border-radius:16px}.btn{min-height:36px;padding:0 12px;border:1px solid #466f83;border-radius:9px;font-size:12px;font-weight:550;color:#eef7f8;background:#123c54;display:inline-flex;align-items:center;gap:6px}.btn-green{border-color:#4b9d7b;background:linear-gradient(180deg,#287a5a,#1d5b44)}.btn:hover{filter:brightness(1.15)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn[aria-pressed=true]{outline:2px solid #79d7c0;outline-offset:-2px;background:#23624f!important}button:focus-visible,input:focus-visible{outline:2px solid #79d7c0;outline-offset:2px}.crop-workspace{display:flex;flex-direction:column;gap:12px}.crop-topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px}.crop-pagenav{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--kirp-muted)}.crop-pagenav .btn{min-height:30px;padding:0 9px}.crop-status{flex:1 1 220px;margin:0;font-size:12px;color:var(--kirp-muted);line-height:1.5;min-width:180px}.crop-load-progress{position:relative;height:3px;border-radius:3px;background:#79d7c024;overflow:hidden}.crop-load-progress[hidden]{display:none}.crop-load-progress-bar{position:absolute;top:0;bottom:0;width:42%;background:#79d7c0;border-radius:3px;animation:crop-progress-sweep 1s ease-in-out infinite}.crop-stage{position:relative;height:clamp(440px,64vh,780px);border:1px solid var(--kirp-line);border-radius:16px;overflow:hidden;background-color:#06283b;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:22px 22px;touch-action:none}#canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}#canvas:focus-visible{outline:2px solid #79d7c0;outline-offset:-2px}.crop-stage[data-mode=pan] #canvas{cursor:grab}.crop-stage[data-mode=pan].panning #canvas{cursor:grabbing}.crop-stage[data-mode=select] #canvas{cursor:crosshair}.crop-selection{position:absolute;border:1.5px dashed #79d7c0;background:#79d7c024;pointer-events:none;box-shadow:0 0 0 1px #06283b99}.crop-selection[hidden]{display:none}.crop-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;color:#aac6d1;padding:24px}.crop-empty[hidden]{display:none}.crop-empty b{font-size:20px;color:#e3f1f4}.crop-empty p{line-height:1.7;font-size:13px;margin-top:6px}.crop-toast{position:absolute;left:50%;bottom:18px;transform:translate(-50%);padding:9px 16px;border-radius:999px;background:#1c594f;border:1px solid #4b9d7b;color:#eafff5;font-size:13px;font-weight:600;box-shadow:0 6px 18px #0005;pointer-events:none;transition:opacity .25s,transform .25s}.crop-toast[hidden]{display:none}.crop-toast.crop-toast-out{opacity:0;transform:translate(-50%) translateY(6px)}.crop-hscroll{position:absolute;left:10px;right:10px;bottom:4px;height:10px;border-radius:999px;background:#062030a6;border:1px solid var(--kirp-line);z-index:2}.crop-hscroll[hidden]{display:none}.crop-hscroll-thumb{position:absolute;top:0;bottom:0;min-width:24px;border-radius:999px;background:#4b9d7b;cursor:grab;transition:background .15s}.crop-hscroll-thumb:hover,.crop-hscroll-thumb.dragging{background:#79d7c0}.crop-hscroll-thumb.dragging{cursor:grabbing}.crop-toolbar{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:14px;background:#0a2f44e6;border:1px solid var(--kirp-line);backdrop-filter:blur(2px)}.crop-tool{width:40px;height:40px;min-height:40px;padding:0;display:grid;place-items:center}.crop-tool svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}@keyframes crop-progress-sweep{0%{left:-42%}to{left:100%}}@media(max-width:820px){main{padding:14px 12px 24px}.page-head{padding:14px}.crop-stage{height:60vh}.crop-toolbar{top:auto;right:10px;bottom:10px;flex-direction:row}}