.toolroll-app.toolroll-image-cropper { width: 100%; max-width: 920px; box-sizing: border-box; color: #273142; line-height: 1.6; }
.toolroll-app.toolroll-image-cropper *, .toolroll-app.toolroll-image-cropper *::before, .toolroll-app.toolroll-image-cropper *::after { box-sizing: border-box; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__field { margin-top: 16px; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__field:first-child { margin-top: 0; }
.toolroll-app.toolroll-image-cropper label, .toolroll-app.toolroll-image-cropper .toolroll-image-cropper__label { display: block; margin: 0 0 6px; font-weight: 700; }
.toolroll-app.toolroll-image-cropper input[type="file"], .toolroll-app.toolroll-image-cropper input[type="number"], .toolroll-app.toolroll-image-cropper select { max-width: 100%; padding: 9px 10px; border: 1px solid #8a96a6; border-radius: 7px; background: #fff; color: inherit; font: inherit; }
.toolroll-app.toolroll-image-cropper input[type="file"], .toolroll-app.toolroll-image-cropper select { width: 100%; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__hint { margin: 6px 0 0; color: #58677b; font-size: .88rem; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 18px 0 0; padding: 14px; background: #f6f8fb; border-radius: 8px; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__info dt { color: #58677b; font-size: .86rem; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__info dd { margin: 3px 0 0; overflow-wrap: anywhere; font-weight: 700; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__workspace { margin-top: 20px; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__editor { position: relative; display: inline-block; max-width: 100%; line-height: 0; overflow: hidden; background: #e5e7eb; touch-action: none; user-select: none; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__editor > img { display: block; max-width: 100%; max-height: 600px; width: auto; height: auto; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__shade { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 9999px rgba(15, 23, 42, .56); clip-path: polygon(0 0); }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 1px #1769aa, 0 0 0 9999px rgba(15, 23, 42, .56); cursor: move; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__handle { position: absolute; width: 22px; height: 22px; border: 2px solid #1769aa; border-radius: 50%; background: #fff; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__handle--nw { top: -12px; left: -12px; cursor: nwse-resize; }.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__handle--ne { top: -12px; right: -12px; cursor: nesw-resize; }.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__handle--sw { bottom: -12px; left: -12px; cursor: nesw-resize; }.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__handle--se { right: -12px; bottom: -12px; cursor: nwse-resize; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__number { display: flex; align-items: center; gap: 7px; }.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__number input { width: 100%; min-width: 0; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__button { padding: 10px 18px; border: 1px solid #68778b; border-radius: 7px; background: #fff; color: #273142; font: inherit; font-weight: 700; cursor: pointer; }.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__button--primary { border-color: #1769aa; background: #1769aa; color: #fff; }.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__button:disabled { opacity: .55; cursor: not-allowed; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__result { margin-top: 22px; padding-top: 20px; border-top: 1px solid #d8dee8; }.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__result-preview { display: flex; justify-content: center; padding: 12px; border: 1px solid #c7d0dc; border-radius: 8px; background: #f7f8fa; }.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__result-preview img { display: block; max-width: 100%; max-height: 520px; width: auto; height: auto; }.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__result > .toolroll-image-cropper__button { margin-top: 14px; }
.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__status { margin: 16px 0 0; padding: 10px 12px; color: #3b4658; background: #eef1f5; border-radius: 7px; font-size: .9rem; }.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__status[data-state="error"] { color: #7a271a; background: #fde8e4; border-left: 4px solid #c43d2b; }.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__status[data-state="success"] { color: #0b5135; background: #e2f4eb; border-left: 4px solid #137a52; }
.toolroll-app.toolroll-image-cropper input:focus-visible, .toolroll-app.toolroll-image-cropper select:focus-visible, .toolroll-app.toolroll-image-cropper button:focus-visible, .toolroll-app.toolroll-image-cropper .toolroll-image-cropper__crop-box:focus-visible { outline: 3px solid #79b8f3; outline-offset: 2px; }
@media (max-width: 640px) { .toolroll-app.toolroll-image-cropper .toolroll-image-cropper__values, .toolroll-app.toolroll-image-cropper .toolroll-image-cropper__info { grid-template-columns: 1fr 1fr; }.toolroll-app.toolroll-image-cropper .toolroll-image-cropper__button { width: 100%; } }