.cropImageContainer{background:#0e141d;min-height:100vh;padding:20px 10px}@media (min-width:768px){.cropImageContainer{padding:40px 0}}.cropImageContainer .mainArea{max-width:1100px;margin:0 auto;padding:0 20px}.cropImageContainer .leftPanel,.cropImageContainer .rightPanel{box-sizing:border-box;width:100%}.cropImageContainer .crop-image-header{text-align:center;max-width:1200px;margin:0 auto 40px;padding:0 20px}.cropImageContainer .crop-image-header .cntr_header_nano{text-align:center;margin-bottom:40px}.cropImageContainer .crop-image-header .cntr_header_nano h4{color:#fff;margin-bottom:12px;font-size:52px;font-weight:700}.cropImageContainer .crop-image-header .cntr_header_nano p{color:#b5b5b5;max-width:720px;margin:0 auto;font-size:16px}.cropImageContainer .crop-image-header .shine{background:linear-gradient(90deg,#f59e0b 10%,#ff5700 62%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}@media (max-width:768px){.cropImageContainer .crop-image-header .cntr_header_nano h4{font-size:36px}.cropImageContainer .crop-image-header .cntr_header_nano p{font-size:14px}}@media (max-width:576px){.cropImageContainer .crop-image-header .cntr_header_nano h4{font-size:28px}}.cropImageContainer .row{grid-template-columns:1fr;gap:20px;display:grid}.cropImageContainer .titleArea{border-bottom:1px solid rgba(255,255,255,.21);margin-bottom:20px;padding-bottom:10px}.cropImageContainer .titleArea h4{color:#fff;align-items:center;gap:12px;margin-bottom:0;font-size:20px;font-weight:700;display:flex}.cropImageContainer .titleArea i,.cropImageContainer .titleArea svg{color:#fff;background:linear-gradient(-90deg,#f59e0b 10%,#ff5700 62%);border-radius:50px;justify-content:center;align-items:center;width:50px;height:50px;font-size:18px;display:flex}.cropImageContainer .leftPanel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:25px 20px;box-shadow:inset 0 1px rgba(255,255,255,.04),0 4px 6px -1px rgba(0,0,0,.3)}.cropImageContainer .uploadBox{cursor:pointer;background-color:rgba(0,0,0,.39);border:2px dashed rgba(255,87,0,.45);border-radius:10px;justify-content:center;align-items:center;margin-bottom:20px;padding:25px 20px;transition:all .3s;display:flex}.cropImageContainer .uploadBox:hover{border-color:#ff5700;box-shadow:inset 0 0 0 1px #ff5700}.cropImageContainer .uploadContent{text-align:center;width:100%}.cropImageContainer .uploadContent svg{background:#374151;border-radius:50px;width:80px;height:80px;margin:0 auto 20px;padding:10px;display:block}.cropImageContainer .uploadContent h4{color:#fff;margin-bottom:10px;font-size:15px;font-weight:600}.cropImageContainer .uploadContent .hint{color:#99a1b3;margin-bottom:20px;display:block}.cropImageContainer .uploadContent button{color:#fff;cursor:pointer;background:linear-gradient(-90deg,#f59e0b 10%,#ff5700 62%);border:none;border-radius:50px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .5s}.cropImageContainer .uploadContent button:hover{background:linear-gradient(90deg,#f59e0b 10%,#ff5700 62%)}.cropImageContainer .uploadContent button i{color:#fff;margin-right:8px}.cropImageContainer .uploadContent .subHint{color:#99a1b3;margin-top:10px;font-size:13px;display:block}.cropImageContainer .imagePreview{background:rgba(0,0,0,.39);border:1px solid rgba(255,255,255,.21);border-radius:10px;margin-bottom:20px;overflow:hidden}.cropImageContainer .imagePreview img{width:100%;height:auto;display:block}.cropImageContainer .modeSelector{background:rgba(0,0,0,.39);border:1px solid rgba(255,255,255,.21);border-radius:10px;margin-bottom:20px;padding:20px}.cropImageContainer .modeSelector h4{color:#fff;margin-bottom:15px;font-size:18px;font-weight:600}.cropImageContainer .modeButtons{grid-template-columns:1fr 1fr;gap:8px;display:grid}@media (max-width:576px){.cropImageContainer .modeButtons{grid-template-columns:1fr}}.cropImageContainer .modeButton{cursor:pointer;text-align:center;background:#000;border:1px solid transparent;border-radius:10px;padding:12px 15px;transition:all .5s}.cropImageContainer .modeButton:hover,.cropImageContainer .modeButton.active{background:linear-gradient(90deg,#f59e0b 10%,#ff5700 62%)}.cropImageContainer .modeButton span{color:#fff;margin-top:5px;font-size:14px;font-weight:600;display:block}.cropImageContainer .modeButton i{color:#fff;margin-bottom:5px;font-size:18px;display:block}.cropImageContainer .resizeControls,.cropImageContainer .textControls,.cropImageContainer .drawControls{background:rgba(0,0,0,.39);border:1px solid rgba(255,255,255,.21);border-radius:10px;margin-bottom:20px;padding:20px}.cropImageContainer .resizeControls h4,.cropImageContainer .textControls h4,.cropImageContainer .drawControls h4{color:#fff;margin-bottom:15px;font-size:18px;font-weight:600}.cropImageContainer .inputGroup{margin-bottom:15px}.cropImageContainer .inputGroup label{color:#fff;margin-bottom:8px;font-size:14px;font-weight:500;display:block}.cropImageContainer .inputGroup input[type=text],.cropImageContainer .inputGroup input[type=number]{color:#fff;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.21);border-radius:10px;outline:none;width:100%;padding:10px;font-size:14px}.cropImageContainer .inputGroup input[type=text]:focus,.cropImageContainer .inputGroup input[type=number]:focus{border-color:#ff5700}.cropImageContainer .inputGroup input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:10px;width:100%;height:40px}.cropImageContainer .inputGroup input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#e2e8f0;border-radius:999px;outline:none;width:calc(100% - 50px);height:8px;margin-right:10px}.cropImageContainer .inputGroup input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:linear-gradient(-90deg,#f59e0b 10%,#ff5700 62%);border-radius:50%;width:22px;height:22px;box-shadow:0 4px 12px rgba(255,87,0,.4)}.cropImageContainer .inputGroup input[type=range]::-moz-range-thumb{cursor:pointer;background:#ff5700;border:none;border-radius:50%;width:22px;height:22px}.cropImageContainer .inputGroup span{color:#fff;min-width:40px;font-size:14px;font-weight:600;display:inline-block}.cropImageContainer .checkboxGroup{align-items:center;margin-bottom:15px;display:flex}.cropImageContainer .checkboxGroup input[type=checkbox]{cursor:pointer;accent-color:#ff5700;width:18px;height:18px;margin-right:10px}.cropImageContainer .checkboxGroup label{color:#fff;cursor:pointer;margin:0;font-size:14px;font-weight:500}.cropImageContainer .applyButton,.cropImageContainer .clearButton{color:#fff;cursor:pointer;background:linear-gradient(-90deg,#f59e0b 10%,#ff5700 62%);border:none;border-radius:50px;width:100%;padding:12px 20px;font-size:15px;font-weight:600;transition:all .5s}.cropImageContainer .applyButton:hover,.cropImageContainer .clearButton:hover{background:linear-gradient(90deg,#f59e0b 10%,#ff5700 62%)}.cropImageContainer .clearButton{background:#dc3545;margin-top:10px}.cropImageContainer .clearButton:hover{background:#c82333}.cropImageContainer .hint{color:#99a1b3;margin-top:10px;font-size:13px;display:block}.cropImageContainer .rightPanel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:25px 20px;box-shadow:inset 0 1px rgba(255,255,255,.04),0 4px 6px -1px rgba(0,0,0,.3)}.cropImageContainer .canvasContainer{background:rgba(0,0,0,.39);border:2px solid rgba(255,255,255,.07);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;min-height:500px;padding:20px;display:flex}.cropImageContainer .canvas{cursor:crosshair;border-radius:10px;max-width:100%;height:auto;margin-bottom:20px;box-shadow:0 4px 20px rgba(0,0,0,.5)}.cropImageContainer .placeholder{text-align:center;color:#fff}.cropImageContainer .placeholder svg{opacity:.5;width:90px;height:90px;margin:0 auto 20px}.cropImageContainer .placeholder h4{color:#fff;opacity:.7;font-size:18px;font-weight:500}.cropImageContainer .actionButtons{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;display:flex}.cropImageContainer .actionButton{color:#fff;cursor:pointer;background:linear-gradient(-90deg,#f59e0b 10%,#ff5700 62%);border:none;border-radius:50px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .5s}.cropImageContainer .actionButton:hover{background:linear-gradient(90deg,#f59e0b 10%,#ff5700 62%)}.cropImageContainer .actionButton i{margin-right:5px}.cropImageContainer .resetButton{color:#fff;cursor:pointer;background:#6c757d;border:none;border-radius:50px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .5s}.cropImageContainer .resetButton:hover{background:#5a6268}.cropImageContainer .resetButton i{margin-right:5px}@media (min-width:992px){.cropImageContainer .row{grid-template-columns:1fr 2fr;align-items:flex-start;gap:30px}.cropImageContainer .leftPanel{margin-bottom:30px}}.titleWithIcon{align-items:center;gap:10px;display:flex}@media (max-width:768px){.cropImageContainer .modeButtons{grid-template-columns:1fr}.cropImageContainer .titleArea h4{font-size:16px}.cropImageContainer .uploadContent h4{font-size:13px}.cropImageContainer .canvasContainer{min-height:300px}.cropImageContainer .actionButtons{flex-direction:column}.cropImageContainer .actionButton,.cropImageContainer .resetButton{width:100%}}@media (max-width:576px){.cropImageContainer .mainArea{padding:0 10px}.cropImageContainer .leftPanel,.cropImageContainer .rightPanel{padding:15px}.cropImageContainer .uploadContent button{padding:8px 15px;font-size:12px}.cropImageContainer .uploadBox{padding:20px 12px}.cropImageContainer .uploadContent svg{width:55px;height:55px}.cropImageContainer .uploadContent button{width:100%;padding:8px 12px;font-size:13px}.cropImageContainer .uploadContent h4{font-size:14px}}@media (max-width:768px){.cropImageContainer .canvasContainer{min-height:auto;padding:10px}.cropImageContainer .canvas{max-width:100%;height:auto}}