.image-crop-modal { position: fixed; inset: 0; z-index: 2200; display: grid; place-items: center; padding: 20px; background: #1b253b80; }
.image-crop-modal[hidden] { display: none; }
.image-crop-dialog { width: min(500px, 100%); max-height: calc(100dvh - 40px); overflow: auto; box-sizing: border-box; padding: 24px; border-radius: 16px; background: white; box-shadow: 0 20px 80px #16203540; }
.image-crop-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.image-crop-dialog h2 { margin: 0; font-size: 20px; }
.image-crop-dialog header button { padding: 5px; background: transparent; border: 0; color: #657084; width: auto; }
.image-crop-stage { display: flex; justify-content: center; margin: 20px 0; }
.image-crop-stage canvas { display: block; max-width: 100%; height: auto; touch-action: none; cursor: grab; background-color: #fff; background-image: conic-gradient(#e8ebf1 25%, transparent 0 50%, #e8ebf1 0 75%, transparent 0); background-size: 16px 16px; border: 1px solid #d7deeb; }
.image-crop-modal[data-kind="photo"] canvas { border-radius: 50%; }
.image-crop-dialog label { display: grid; gap: 6px; margin-top: 12px; color: #657084; font-size: 13px; }
.image-crop-dialog label[hidden] { display: none; }
.image-crop-dialog input[type="range"] { width: 100%; padding: 0; accent-color: #3f70cf; }
.image-crop-help { color: #657084; font-size: 12px; text-align: center; }
.image-crop-message { color: #b42318; font-size: 13px; }
.image-crop-message:empty { display: none; }
.image-crop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
body .image-crop-actions button { box-sizing: border-box; width: 104px; min-height: 40px; padding: 9px 12px; font-size: 14px; line-height: 20px; white-space: nowrap; }
body .image-crop-actions [data-crop-save] { border: 1px solid #3f70cf; background: #3f70cf; color: #fff; }
body .page-section[data-page="personal-profile"] .personal-center-hero { position: relative; z-index: 1; overflow: visible; }
.personal-center-avatar-wrap { position: relative; flex: 0 0 auto; }
.personal-center-avatar .personal-center-photo { border-radius: 50%; }
body .personal-avatar-edit { position: absolute; bottom: -2px; right: -3px; display: grid; place-items: center; width: 26px; height: 26px; padding: 5px; border: 1px solid #d7deeb; border-radius: 50%; background: white; color: #3f70cf; }
.personal-avatar-edit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.personal-avatar-menu { position: absolute; z-index: 30; top: calc(100% + 10px); left: 0; display: grid; min-width: 155px; padding: 5px; border: 1px solid #d7deeb; border-radius: 8px; background: white; box-shadow: 0 8px 25px #17253b20; }
.personal-avatar-menu[hidden], .personal-avatar-edit[hidden] { display: none; }
body .personal-avatar-menu button { width: 100%; padding: 9px; background: transparent; border: 0; color: #273348; text-align: left; font-size: 13px; }
body .personal-avatar-menu button:hover { background: #edf3ff; }
.personal-profile-hero-actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; gap: 8px; align-items: center; flex: 0 0 auto; }
.personal-profile-hero-actions button { width: auto; flex: 0 0 auto; white-space: nowrap; }
.personal-profile-hero-actions .personal-profile-edit-button { margin-left: 0; }
.personal-profile-hero-actions #myProfileFormActions { display: flex; margin: 0; gap: 8px; }
.personal-profile-hero-actions #myProfileFormActions[hidden] { display: none; }
.personal-profile-birth-label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.personal-profile-birth-label input { min-width: 0; width: 100%; }
.personal-media-upload-control .attachment-upload { flex: 1 1 230px; }
@media (max-width: 760px) {
  .personal-center-hero { flex-wrap: wrap; }
  .personal-center-hero > .personal-profile-hero-actions { width: 100%; justify-content: flex-end; }
  .image-crop-modal { padding: 12px; }
  .image-crop-dialog { max-height: calc(100dvh - 24px); padding: 18px; }
}

.personal-profile-hero-actions > .action-feedback-error { flex-basis: 100%; display: block; color: #b42318; text-align: right; overflow-wrap: anywhere; }