/* Image cropping uses the shared Studio dialog shell and interface tokens. */
html body.site-design .image-crop-dialog{max-width:620px;padding:24px;overflow:auto;background:var(--ui-panel,#fff)}
html body.site-design .image-crop-dialog .studio-picker-heading{margin-bottom:12px;padding:0 0 12px;background:var(--ui-panel,#fff)}
html body.site-design .image-crop-dialog .studio-picker-close{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;font-size:28px;line-height:1;background:var(--ui-raised,#f7f8f9);color:var(--ui-text,#090909);border:1px solid var(--ui-border,#d4d5d7);border-radius:999px}
.image-crop-dialog .studio-picker-body{display:grid;gap:16px}
.image-crop-ratio-row{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px}
html body.site-design .image-crop-ratio-row select{width:150px;max-width:65%;min-height:40px;padding:8px 12px;margin:0;border:1px solid var(--ui-border,#d4d5d7);border-radius:10px;background:var(--ui-field,#fff);color:var(--ui-text,#090909);font:inherit}
.image-crop-surface{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;height:clamp(180px,45dvh,420px);overflow:hidden;border-radius:12px;background:var(--ui-raised,#f7f8f9)}
.image-crop-frame{position:relative;flex:none;overflow:hidden;max-width:100%;max-height:100%;background-color:#fff;background-image:conic-gradient(#e8e8e8 25%,transparent 0 50%,#e8e8e8 0 75%,transparent 0);background-size:16px 16px;cursor:grab;touch-action:none;user-select:none;box-shadow:0 0 0 1px #0002}
.image-crop-frame.is-dragging{cursor:grabbing}
.image-crop-frame canvas{display:block;width:100%;height:100%;pointer-events:none}
.image-crop-grid{position:absolute;inset:0;pointer-events:none;border:1px solid #fffc;background:linear-gradient(to right,transparent calc(33.333% - .5px),#ffffff85 calc(33.333% - .5px),#ffffff85 calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff85 calc(66.666% - .5px),#ffffff85 calc(66.666% + .5px),transparent calc(66.666% + .5px)),linear-gradient(to bottom,transparent calc(33.333% - .5px),#ffffff85 calc(33.333% - .5px),#ffffff85 calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff85 calc(66.666% - .5px),#ffffff85 calc(66.666% + .5px),transparent calc(66.666% + .5px))}
html body.site-design .image-crop-dialog .image-crop-help{margin:-4px 0 0;font-size:12px;line-height:1.5;color:var(--ui-muted,#636569)}
.image-crop-zoom{display:grid;grid-template-columns:auto minmax(0,1fr) 48px;align-items:center;gap:18px;font-size:14px}
html body.site-design .image-crop-zoom input{width:100%;min-width:0;min-height:44px;margin:0;padding:0;border:0;accent-color:var(--ui-text,#090909);background:transparent}
.image-crop-zoom output{text-align:right;font-variant-numeric:tabular-nums;font-size:12px;color:var(--ui-muted,#636569)}
.image-crop-actions{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;padding-top:4px}
html body.site-design .image-crop-actions button{min-height:44px;padding:10px 20px;border:1px solid var(--ui-border,#d4d5d7);border-radius:999px;background:var(--ui-raised,#f7f8f9);color:var(--ui-text,#090909);font:inherit;font-size:14px;line-height:1.2}
html body.site-design .image-crop-actions [data-crop-action=apply]{background:var(--ui-accent,#ffff61);color:var(--ui-ink,#090909);border-color:var(--ui-accent,#ffff61);--action-hover-bg:#090909;--action-hover-ink:#fff}
html body.site-design .image-crop-dialog .image-crop-error{margin:0;color:var(--ui-text,#090909);font-size:13px;line-height:1.4}
html body.site-design .image-crop-dialog :focus-visible{outline:2px solid var(--ui-text,#090909);outline-offset:3px}
html body.site-design .image-crop-dialog .image-crop-frame:focus-visible{outline-offset:-3px}
.image-crop-dialog [hidden]{display:none!important}
@media(max-width:600px){html body.site-design .image-crop-dialog{padding:16px}.image-crop-dialog .studio-picker-body{gap:14px}.image-crop-actions{gap:7px}html body.site-design .image-crop-actions button{padding:10px 14px}.image-crop-zoom{gap:12px}.image-crop-surface{height:clamp(180px,40dvh,340px)}html body.site-design .image-crop-dialog .studio-picker-heading{top:-16px}}