.avatar-crop-modal{gap:16px;display:grid;width:440px!important;max-width:calc(100vw - 24px)!important;padding:24px!important}.avatar-crop-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.avatar-crop-header h2{font-size:22px}.avatar-crop-modal>p{margin:0}.avatar-crop-preview{aspect-ratio:1;border:1px solid var(--line);touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;background:#fff;border-radius:14px;width:min(100%,300px);margin:0 auto;position:relative;overflow:hidden}.avatar-crop-preview:active{cursor:grabbing}.avatar-crop-preview:focus-visible{outline:3px solid var(--green);outline-offset:4px}.avatar-crop-preview canvas{width:100%;height:100%;display:block}.avatar-crop-circle{pointer-events:none;border:2px solid #ffffffef;border-radius:50%;position:absolute;inset:0;box-shadow:0 0 0 80px #20302675}.avatar-crop-loading{color:var(--green);background:var(--pale);place-items:center;display:grid;position:absolute;inset:0}.avatar-crop-zoom-label{color:var(--muted);justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;display:flex}.avatar-crop-zoom-label output{font-variant-numeric:tabular-nums}.avatar-crop-zoom-controls{align-items:center;gap:12px;display:flex}.avatar-crop-zoom-controls input[type=range]{width:100%;min-width:0;height:28px;accent-color:var(--green);cursor:pointer;background:0 0;border:0;flex:1;padding:0}.avatar-crop-zoom-controls .icon-button{width:32px;height:32px}.avatar-crop-actions{border-top:1px solid var(--line);justify-content:flex-end;align-items:center;gap:8px;padding-top:16px;display:flex}.avatar-crop-actions .text-button{align-items:center;gap:5px;margin-right:auto;font-size:13px;display:flex}.avatar-crop-modal .notice{margin:0}.avatar-crop-actions .primary,.avatar-crop-actions .secondary{padding:10px 13px;font-size:13px}@media (max-width:420px){.avatar-crop-modal{gap:14px;padding:18px!important}.avatar-crop-header h2{font-size:20px}.avatar-crop-preview{width:min(100%,280px)}.avatar-crop-actions{gap:6px}.avatar-crop-actions .primary,.avatar-crop-actions .secondary{padding:10px;font-size:12px}.avatar-crop-actions .text-button{gap:4px;font-size:12px}}@media (max-height:700px){.avatar-crop-preview{width:min(100%,220px)}.avatar-crop-modal{gap:12px;padding:18px!important}}