.profile-photo-crop {
    box-sizing: border-box;
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow: auto;
    margin: auto;
    padding: 24px;
    border: 1px solid #d6dbe1;
    border-radius: 16px;
    background: #fff;
    color: #202830;
    box-shadow: 0 20px 60px #0004;
}
.profile-photo-crop::backdrop { background: #0009; }
.profile-photo-crop h2 { margin: 0 0 12px; font-size: 1.35rem; }
.profile-photo-crop p { font-size: .95rem; }
.profile-photo-crop canvas {
    display: block;
    width: min(100%, 320px);
    height: auto;
    margin: 16px auto;
    border-radius: 50%;
    cursor: grab;
    touch-action: none;
}
.profile-photo-crop canvas:active { cursor: grabbing; }
.profile-photo-crop input[type="range"] {
    display: block;
    width: 100%;
    margin: 8px 0 16px;
    accent-color: var(--tenant-primary, #2878bd);
}
.profile-photo-crop-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.profile-photo-crop button {
    padding: 10px 12px;
    border: 1px solid #bbc3cc;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.profile-photo-crop button.profile-photo-crop-save {
    background: var(--tenant-primary, #2878bd);
    border-color: var(--tenant-primary, #2878bd);
    color: #fff;
}
.profile-photo-crop :focus-visible { outline: 3px solid var(--tenant-primary, #2878bd); outline-offset: 3px; }
.profile-photo-crop-error { color: #c0392b; }
.profile-photo-crop-error:empty { display: none; }
[data-theme='dark'] .profile-photo-crop { background: #202830; color: #f5f7fa; border-color: #52606e; }
[data-theme='dark'] .profile-photo-crop-error { color: #ffb4ab; }