/* MixTuTu Image Crop Tool — premium responsive interface */
.image-crop-app{--crop-ink:#17233d;--crop-muted:#71809a;--crop-line:#e5eaf3;--crop-blue:#286bff;--crop-purple:#7048ed;margin:26px 0 32px;padding:16px;border:1px solid #e3e9f5;border-radius:20px;background:linear-gradient(145deg,#fbfcff 0%,#f5f7ff 100%);box-shadow:0 12px 38px rgba(30,55,100,.07)}
.image-crop-workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:560px;background:#fff;border:1px solid #e4e9f2;border-radius:15px;overflow:hidden}
.image-crop-stage{min-width:0;min-height:520px;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden;background:radial-gradient(circle at 1px 1px,rgba(117,136,170,.14) 1px,transparent 0) 0 0/18px 18px,#f4f6fb}
.image-crop-stage>img{display:block;max-width:100%;max-height:72vh}.image-crop-stage .cropper-container{max-width:100%;max-height:100%}
.crop-empty{width:min(100%,520px);padding:48px 24px;text-align:center;color:var(--crop-ink);background:rgba(255,255,255,.94);border:1.5px dashed #bdcbed;border-radius:18px;box-shadow:0 8px 26px rgba(30,55,100,.045)}
.crop-empty:before{content:"✂";display:flex;width:58px;height:58px;align-items:center;justify-content:center;margin:0 auto 18px;border-radius:17px;color:#fff;font-size:27px;background:linear-gradient(135deg,var(--crop-blue),var(--crop-purple));box-shadow:0 8px 18px rgba(75,91,230,.22)}
.crop-empty strong{display:block;font-size:19px;font-weight:750;letter-spacing:-.3px}.crop-empty p{max-width:390px;margin:9px auto 20px;color:var(--crop-muted);font-size:13px;line-height:1.65}.crop-empty small{display:block;margin-top:12px;color:var(--crop-muted);font-size:12px}
.crop-empty input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.crop-upload-button{display:inline-flex!important;align-items:center;justify-content:center;min-height:46px;padding:0 22px!important;border:0!important;border-radius:10px!important;color:#fff!important;font-weight:700!important;background:linear-gradient(105deg,var(--crop-blue),var(--crop-purple))!important;box-shadow:0 7px 16px rgba(73,91,226,.2);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.crop-upload-button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(73,91,226,.28)}
.image-crop-controls{display:flex;flex-direction:column;padding:0 20px 20px;border-left:1px solid var(--crop-line);background:#fff}
.image-crop-controls h2{margin:0 -20px;padding:23px 22px 5px;color:var(--crop-ink);font-size:20px;font-weight:750;letter-spacing:-.4px;text-align:left}
.crop-controls-hint{margin:0 -20px 16px;padding:0 22px 17px;color:var(--crop-muted);font-size:12px;border-bottom:1px solid var(--crop-line)}
.image-crop-controls>label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid #edf0f6;color:#34425b;font-size:13px;font-weight:600}
.image-crop-controls input[type=number]{width:112px;min-width:0;height:42px;padding:0 11px;border:1px solid #dce3ef;border-radius:9px;outline:none;background:#fbfcff;color:var(--crop-ink);font:600 14px inherit;transition:border-color .18s ease,box-shadow .18s ease}
.image-crop-controls input[type=number]:focus{border-color:#7a91ff;box-shadow:0 0 0 3px rgba(84,111,255,.12);background:#fff}
.crop-actions{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.35fr);gap:10px;margin-top:auto;padding-top:22px}
.crop-actions button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:48px;padding:12px 13px;border:0;border-radius:10px;font:700 13px/1.2 inherit;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.crop-actions button:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}.crop-secondary{color:#42516b;background:#f0f3f9;border:1px solid #e5eaf3!important}.crop-secondary:not(:disabled):hover{background:#e7ecf5;transform:translateY(-1px)}
.crop-primary{color:#fff;background:linear-gradient(105deg,#2678ff 0%,#6548ed 100%);box-shadow:0 7px 16px rgba(73,91,226,.2)}.crop-primary:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 11px 22px rgba(73,91,226,.28)}.crop-submit-arrow{font-size:18px;line-height:1}
.image-crop-app .progressbox,.image-crop-app .result{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px;padding:18px 20px;background:#fff;border:1px solid var(--crop-line);border-radius:14px;box-shadow:0 5px 18px rgba(30,55,100,.04)}
.image-crop-app .progressbox[hidden],.image-crop-app .result[hidden]{display:none}.image-crop-app .result>b{color:#07965b}.image-crop-app .result>span,.image-crop-app .result>small{color:var(--crop-muted);overflow-wrap:anywhere}
.image-crop-app .result .download{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:10px;color:#fff;text-decoration:none;font-weight:750;background:linear-gradient(105deg,#0aa66b,#07965b)}
.image-crop-app .result button{min-height:42px;padding:0 15px;border:1px solid #dce3ef;border-radius:9px;color:#34425b;background:#fff;font-weight:650;cursor:pointer}.image-crop-app .cropper-container{max-width:100%}
@media(max-width:900px){.image-crop-workspace{grid-template-columns:minmax(0,1fr) 300px}.image-crop-stage{min-height:440px;padding:16px}.image-crop-controls{padding-right:16px;padding-left:16px}}
@media(max-width:700px){.image-crop-app{margin:18px 0 24px;padding:9px;border-radius:15px}.image-crop-workspace{grid-template-columns:minmax(0,1fr);min-height:0}.image-crop-stage{min-height:290px;padding:13px}.image-crop-stage>img{max-height:52vh}.image-crop-controls{padding:0 16px 16px;border-left:0;border-top:1px solid var(--crop-line)}.image-crop-controls h2{padding-top:19px;font-size:18px}.crop-controls-hint{margin-bottom:7px}.image-crop-controls>label{padding:12px 0;font-size:13px}.image-crop-controls input[type=number]{height:40px;width:120px}.crop-actions{grid-template-columns:1fr 1.5fr;padding-top:16px}.crop-actions button{min-height:48px;padding:11px 9px;font-size:13px}.image-crop-app .result{align-items:stretch;flex-direction:column;gap:9px}.image-crop-app .result .download,.image-crop-app .result button{width:100%}}
@media(max-width:380px){.crop-actions{grid-template-columns:1fr}.crop-empty{padding:34px 14px}.crop-empty strong{font-size:17px}}