/* -- Avatar cropper (static/js/avatar_crop.js) ------------------------------
 *
 * The dialog is self-contained: a dark backdrop, a white card, a circular mask
 * with the picture inside it, and a row of controls. It is appended to <body>
 * when a profile photo is chosen and removed when the dialog closes, so no
 * template has to carry the markup.
 */
.acv{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.66);
  display:flex;align-items:center;justify-content:center;padding:16px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.acv-open{overflow:hidden}
.acv-card{background:#fff;border-radius:18px;padding:16px;
  width:min(360px,94vw);box-shadow:0 24px 70px rgba(15,23,42,.45);
  display:flex;flex-direction:column;gap:12px}
.acv-title{font-size:15px;font-weight:800;color:#0f172a;text-align:center}
.acv-stage{position:relative;width:320px;height:320px;max-width:100%;
  margin:0 auto;touch-action:none;cursor:grab;overflow:hidden;
  border-radius:14px;background:#f1f5f9}
.acv-stage.is-dragging{cursor:grabbing}
/* The mask is a shadow-ring on a circle: the picture is clipped by the stage,
   so the ring can sit exactly on the visible edge. */
.acv-mask{position:absolute;inset:0;overflow:hidden;border-radius:50%;
  box-shadow:0 0 0 3px #fff, 0 0 0 4px #cbd5e1,
             0 0 0 9999px rgba(15,23,42,.18)}
.acv-mask.is-square{border-radius:14px}
.acv-img{position:absolute;max-width:none;max-height:none;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
  will-change:left,top,width,height}
.acv-hint{font-size:11.5px;color:#64748b;text-align:center;line-height:1.5}
.acv-row{display:flex;align-items:center;gap:8px}
.acv-range{flex:1 1 auto;min-width:0;accent-color:#4f46e5}
.acv-btn{appearance:none;border:1px solid #e2e8f0;background:#fff;
  border-radius:10px;padding:8px 12px;font:inherit;font-size:13px;
  font-weight:700;color:#334155;cursor:pointer;line-height:1.2;flex:none}
.acv-btn:hover{border-color:#6366f1;background:#eef2ff;color:#312e81}
.acv-btn:focus-visible{outline:2px solid #6366f1;outline-offset:1px}
.acv-reset{font-size:12px;font-weight:600;color:#64748b}
.acv-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}
.acv-actions .acv-btn{flex:1 1 0;text-align:center}
.acv-use{background:#4f46e5;border-color:#4f46e5;color:#fff}
.acv-use:hover{background:#4338ca;border-color:#4338ca;color:#fff}
.acv-cancel{background:#fff}
@media (max-width:520px){
  .acv-stage{width:min(320px,78vw);height:min(320px,78vw)}
}