/* The crop editor stays a local, non-destructive step over the photo workspace. */
.photo-crop-dialog{
  --crop-ink:#202a36;--crop-muted:#647080;--crop-line:#dce1e7;--crop-accent:#2869ad;
  box-sizing:border-box;width:min(680px,calc(100% - 48px));max-width:none;
  max-height:calc(100dvh - 48px);margin:auto;padding:24px;
  border:1px solid var(--crop-line);border-radius:18px;background:#fff;color:var(--crop-ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  box-shadow:0 20px 70px #202a3626;overflow:auto;overscroll-behavior:contain;
}
.photo-crop-dialog::backdrop{background:#202a3670;backdrop-filter:blur(3px)}
.photo-crop-dialog[open]{display:grid;gap:12px}
.photo-crop-dialog>*{min-width:0}
.photo-crop-dialog .crop-dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.photo-crop-dialog .crop-dialog-heading h2{margin:0 0 4px;font:650 22px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.025em;color:var(--crop-ink)}
.photo-crop-dialog .crop-dialog-heading p{margin:0;font-size:13px;line-height:1.45;color:var(--crop-muted);overflow-wrap:anywhere}
.photo-crop-dialog button{font:600 14px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;min-height:44px;cursor:pointer;touch-action:manipulation}
.photo-crop-dialog .save-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;background:#fff;color:var(--crop-ink);border:1px solid var(--crop-line);border-radius:9px;box-shadow:none}
.photo-crop-dialog .save-button:hover:not(:disabled){border-color:#b7c4d2;background:#f5f6f8;color:var(--crop-ink)}
.photo-crop-dialog .text-button{border:0;border-radius:7px;padding:6px 8px;background:transparent;color:var(--crop-accent);text-decoration:none}
.photo-crop-dialog .text-button:hover:not(:disabled){background:#edf3f9;color:var(--crop-accent)}
.photo-crop-dialog button:disabled{opacity:.4;cursor:default}
.photo-crop-dialog button:focus-visible,.photo-crop-dialog input:focus-visible{outline:3px solid #2869ad66;outline-offset:3px}
.photo-crop-dialog .editor-icon{display:block;width:20px;height:20px;flex:none}
.photo-crop-dialog .crop-dialog-heading>.save-button{padding:10px;width:44px;flex:none;margin-top:-4px}
.photo-crop-dialog #photo-crop-instructions{margin:0;font-size:13px;line-height:1.5;color:var(--crop-muted)}
.photo-crop-dialog .crop-surface{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:0;height:clamp(190px,38dvh,365px);padding:12px;background:#e9edf2;border:1px solid var(--crop-line);border-radius:10px;overflow:hidden}
.photo-crop-dialog .crop-frame{position:relative;overflow:hidden;background:#fff;flex:none;touch-action:none;cursor:grab;outline:1px solid #ffffffb3;user-select:none;-webkit-user-select:none;box-shadow:0 2px 14px #202a3626}
.photo-crop-dialog .crop-frame:active{cursor:grabbing}
.photo-crop-dialog .crop-frame:focus-visible{outline:3px solid var(--crop-accent);outline-offset:4px}
.photo-crop-dialog .crop-frame>img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none}
.photo-crop-dialog .crop-guides{position:absolute;inset:0;pointer-events:none;border:1px solid #ffffffb3;background:linear-gradient(to right,transparent calc(33.333% - .5px),#ffffff70 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff70 66.666%,transparent calc(66.666% + .5px)),linear-gradient(to bottom,transparent calc(33.333% - .5px),#ffffff70 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff70 66.666%,transparent calc(66.666% + .5px))}
.photo-crop-dialog .crop-status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.photo-crop-dialog .crop-status{font-size:12px;line-height:1.45;margin:0;color:var(--crop-muted)}
.photo-crop-dialog .crop-status-row .text-button{font-size:13px;flex:none}
.photo-crop-dialog .crop-zoom{display:flex;align-items:center;gap:14px;margin:0}
.photo-crop-dialog .crop-zoom>label{display:block;flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.4}
.photo-crop-dialog .crop-zoom output{float:right;color:var(--crop-muted);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}
.photo-crop-dialog .crop-zoom input{display:block;width:100%;height:32px;min-height:32px;margin:2px 0 0;padding:0;border:0;background:transparent;accent-color:var(--crop-accent);cursor:pointer;box-shadow:none}
.photo-crop-dialog .crop-zoom .save-button{width:44px;padding:10px;flex:none}
.photo-crop-dialog .crop-position{display:flex;align-items:center;justify-content:space-between;gap:12px}
.photo-crop-dialog .crop-position>span{font-size:13px;color:var(--crop-muted)}
.photo-crop-dialog .crop-position>div{display:flex;gap:6px}
.photo-crop-dialog .crop-position .save-button{width:44px;padding:10px}
.photo-crop-dialog .crop-help{margin:0;font-size:12px;line-height:1.5;color:var(--crop-muted)}
.photo-crop-dialog .crop-dialog-actions{display:flex;justify-content:flex-end;gap:10px;position:sticky;bottom:-24px;z-index:2;margin:0 -24px -24px;padding:16px 24px 24px;border-top:1px solid var(--crop-line);background:#fff}
.photo-crop-dialog .crop-dialog-actions button{min-height:46px}
.photo-crop-dialog .crop-dialog-actions .primary{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border:1px solid var(--crop-accent);border-radius:9px;background:var(--crop-accent);color:#fff;font-size:14px;font-weight:600;text-align:center;box-shadow:none}
.photo-crop-dialog .crop-dialog-actions .primary:hover:not(:disabled){background:#205b97;border-color:#205b97}
@media(max-width:700px){
  .photo-crop-dialog{position:fixed;inset:auto 0 0;width:100%;height:min(820px,calc(100dvh - 12px));max-height:calc(100dvh - 12px);margin:0;padding:20px 16px 0;border:0;border-radius:20px 20px 0 0;box-shadow:0 -12px 50px #202a3626;scroll-padding-bottom:84px}
  .photo-crop-dialog[open]{grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto auto;gap:10px}
  .photo-crop-dialog .crop-dialog-heading h2{font-size:20px}
  .photo-crop-dialog .crop-dialog-heading p{font-size:12px}
  .photo-crop-dialog #photo-crop-instructions{font-size:12px}
  .photo-crop-dialog .crop-surface{height:100%;min-height:90px;border-radius:8px}
  .photo-crop-dialog .crop-status-row{gap:8px;min-height:36px}
  .photo-crop-dialog .crop-status-row .text-button{font-size:12px}
  .photo-crop-dialog .crop-status{font-size:11px}
  .photo-crop-dialog .crop-position>span{font-size:12px}
  .photo-crop-dialog .crop-help{font-size:11px}
  .photo-crop-dialog .crop-dialog-actions{bottom:0;margin:0 -16px;padding:12px 16px max(12px,env(safe-area-inset-bottom));gap:10px}
  .photo-crop-dialog .crop-dialog-actions .primary{flex:1;min-width:0;white-space:normal}
  .photo-crop-dialog .crop-dialog-actions .save-button{padding-inline:18px}
}
@media(max-width:700px) and (max-height:650px){
  .photo-crop-dialog{padding-top:14px}
  .photo-crop-dialog[open]{grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto;gap:8px}
  .photo-crop-dialog .crop-help{display:none}
}
@media(max-height:500px) and (min-width:540px){
  .photo-crop-dialog{position:fixed;inset:8px 8px 0;width:calc(100% - 16px);height:calc(100dvh - 8px);max-height:calc(100dvh - 8px);margin:0;padding:12px 16px 0;border-radius:14px 14px 0 0}
  .photo-crop-dialog[open]{grid-template-columns:minmax(0,1fr) minmax(220px,.85fr);grid-template-rows:auto auto minmax(36px,1fr) auto auto auto;column-gap:20px;row-gap:6px}
  .photo-crop-dialog .crop-dialog-heading{grid-area:1/1/2/3}
  .photo-crop-dialog .crop-dialog-heading h2{font-size:19px}
  .photo-crop-dialog .crop-dialog-heading p{font-size:11px}
  .photo-crop-dialog #photo-crop-instructions{grid-area:2/1/3/3;font-size:11px}
  .photo-crop-dialog .crop-surface{grid-area:3/1/6/2;height:100%;min-height:80px}
  .photo-crop-dialog .crop-status-row{grid-area:3/2/4/3;min-height:36px;gap:6px}
  .photo-crop-dialog .crop-status{font-size:11px}
  .photo-crop-dialog .crop-status-row .text-button{font-size:12px;padding:4px;min-height:36px}
  .photo-crop-dialog .crop-zoom{grid-area:4/2/5/3;gap:8px}
  .photo-crop-dialog .crop-position{grid-area:5/2/6/3;justify-content:flex-end}
  .photo-crop-dialog .crop-position>span,.photo-crop-dialog .crop-help{display:none}
  .photo-crop-dialog .crop-dialog-actions{grid-area:6/1/7/3;bottom:0;margin:0 -16px;padding:10px 16px max(10px,env(safe-area-inset-bottom))}
  .photo-crop-dialog .crop-dialog-actions .primary{flex:0 1 240px}
}
@media(prefers-reduced-motion:reduce){.photo-crop-dialog::backdrop{backdrop-filter:none}}