.site-image-cropper{width:min(760px,calc(100% - 28px));max-height:calc(100dvh - 28px);border:0;border-radius:22px;padding:0;background:#fff;color:#152530;box-shadow:0 30px 90px rgba(8,43,75,.34)}
.site-image-cropper::backdrop{background:rgba(6,30,53,.68);backdrop-filter:blur(5px)}
.site-image-cropper-card{display:grid;gap:15px;padding:22px;font-family:"IBM Plex Sans Thai",sans-serif}
.site-image-cropper-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.site-image-cropper-kicker{margin:0;color:#f28b35;font-size:.78rem;font-weight:800}
.site-image-cropper h2{margin:2px 0 0;color:#082b4b;font:600 1.35rem/1.35 "Prompt",sans-serif}
.site-image-cropper-progress{display:block;margin-top:4px;color:#6d7d85;font-size:.76rem;font-weight:600}
.site-image-cropper-close{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border:1px solid #d8e3e2;border-radius:11px;background:#fff;color:#082b4b;font-size:1.35rem;line-height:1}
.site-image-cropper-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:5px;border:1px solid #d8e3e2;border-radius:13px;background:#edf4f3}
.site-image-cropper-modes button{border:0;border-radius:9px;padding:9px 12px;background:transparent;color:#607078;font-weight:800}
.site-image-cropper-modes button[aria-pressed="true"]{background:#082b4b;color:#fff;box-shadow:0 5px 14px rgba(8,43,75,.18)}
.site-image-cropper-stage-wrap{display:grid;min-height:0;place-items:center;overflow:auto;border-radius:17px;padding:14px;background:linear-gradient(135deg,#e7efed,#dce8e6)}
.site-image-cropper-stage{position:relative;width:min(100%,680px);aspect-ratio:16/9;overflow:hidden;border:4px solid #fff;border-radius:15px;background:#cddbd8;box-shadow:0 15px 34px rgba(8,43,75,.18);touch-action:none;cursor:grab;user-select:none}
.site-image-cropper-stage.is-portrait{width:min(44vw,300px);max-width:100%;aspect-ratio:9/16}
.site-image-cropper-stage.is-dragging{cursor:grabbing}
.site-image-cropper-stage img{width:100%;height:100%;pointer-events:none;object-fit:cover;object-position:50% 50%;transform:translateZ(0);will-change:object-position}
.site-image-cropper-guide{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 33.1%,rgba(255,255,255,.62) 33.3%,rgba(255,255,255,.62) 33.6%,transparent 33.8%,transparent 66.2%,rgba(255,255,255,.62) 66.4%,rgba(255,255,255,.62) 66.7%,transparent 66.9%),linear-gradient(transparent 33.1%,rgba(255,255,255,.62) 33.3%,rgba(255,255,255,.62) 33.6%,transparent 33.8%,transparent 66.2%,rgba(255,255,255,.62) 66.4%,rgba(255,255,255,.62) 66.7%,transparent 66.9%);box-shadow:inset 0 0 0 1px rgba(8,43,75,.18)}
.site-image-cropper-help{display:flex;align-items:center;gap:9px;margin:0;color:#61727a;font-size:.82rem;line-height:1.5}
.site-image-cropper-help::before{display:grid;width:29px;height:29px;flex:0 0 29px;place-items:center;border-radius:9px;background:#e7f6ef;color:#168a5b;content:"↔";font-weight:900}
.site-image-cropper-actions{display:flex;justify-content:flex-end;gap:9px}
.site-image-cropper-actions button{min-width:120px;border-radius:12px;padding:11px 16px;font-weight:800}
.site-image-cropper-skip{border:1px solid #d8e3e2;background:#fff;color:#61727a}
.site-image-cropper-confirm{border:0;background:#f28b35;color:#10283c}
.site-image-cropper-confirm:disabled{opacity:.58;cursor:wait}
@media(max-width:600px){.site-image-cropper{width:calc(100% - 18px);max-height:calc(100dvh - 18px)}.site-image-cropper-card{gap:12px;padding:15px}.site-image-cropper h2{font-size:1.15rem}.site-image-cropper-stage-wrap{padding:9px}.site-image-cropper-stage.is-portrait{width:min(58vw,270px)}.site-image-cropper-help{font-size:.76rem}.site-image-cropper-actions button{min-width:0;flex:1;padding:10px 9px}}