@media screen {
  #profileModal .modal-dialog { max-width: 500px; }
  #profileModal .modal-content { border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; }
  #profileModal .modal-header, #profileModal .modal-body, #profileModal .modal-footer { padding: 20px 24px; }
  #profileModal .modal-title { font-size: 17px; }
  #profileModal .modal-footer { background: #f8fafc; gap: 8px; }
  #profileModal .pp-profile-photo-picker { display: flex; align-items: center; gap: 20px; padding: 20px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px; }
  #profileModal .pp-profile-current-photo { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 1px #e2e8f0; }
  #profileModal .form-text { font-size: 11px; line-height: 1.6; margin-top: 8px; }
  #profileModal .pp-profile-photo-picker:focus-within { outline: 2px solid #2563eb; outline-offset: 2px; }
  #profileModal .pp-profile-crop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 16px; }
  #profileModal .pp-profile-crop-stage { height: 260px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 10px; background: #f1f5f9; }
  #profileModal .pp-profile-crop-stage > img { max-height: 260px; }
  #profileModal .pp-profile-crop-preview-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 11px; color: #64748b; }
  #profileModal .pp-profile-crop-preview { width: 88px; height: 88px; overflow: hidden; border-radius: 50%; background: #f1f5f9; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e2e8f0; }
  #profileModal .pp-profile-crop-preview img { max-width: none !important; }
  @media (max-width: 575px) {
    #profileModal .modal-header, #profileModal .modal-body, #profileModal .modal-footer { padding: 16px; }
    #profileModal .pp-profile-photo-picker { gap: 14px; padding: 16px; }
    #profileModal .pp-profile-crop-layout { grid-template-columns: minmax(0, 1fr); }
    #profileModal .pp-profile-crop-preview-panel { flex-direction: row; }
    #profileModal .pp-profile-crop-preview { width: 64px; height: 64px; }
  }
}

#profileModal .pp-profile-password-field { position: relative; }
#profileModal .pp-profile-password-field .form-control { padding-right: 46px; }
#profileModal .pp-profile-password-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #64748b; font-size: 18px; cursor: pointer; }
#profileModal .pp-profile-password-toggle:hover { background: #eff6ff; color: #2563eb; }
#profileModal .pp-profile-password-toggle:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }