.pa-modal {
  align-items: center;
  background: var(--pa-color-overlay);
  display: none;
  inset: 0;
  justify-content: center;
  padding: var(--pa-spacing-m);
  position: fixed;
  z-index: var(--pa-z-modal);
}

.pa-modal.is-open { display: flex; }
.pa-modal-dialog { background: var(--pa-color-surface); border-radius: var(--pa-radius-large); box-shadow: var(--pa-shadow-large); max-height: calc(100vh - (2 * var(--pa-spacing-xl))); max-width: var(--pa-container-narrow); overflow: auto; width: 100%; }
.pa-modal-header,
.pa-modal-content,
.pa-modal-footer { padding: var(--pa-spacing-l); }
.pa-modal-header { align-items: center; border-bottom: var(--pa-border-width) solid var(--pa-color-border); display: flex; gap: var(--pa-spacing-m); justify-content: space-between; }
.pa-modal-footer { align-items: center; border-top: var(--pa-border-width) solid var(--pa-color-border); display: flex; flex-wrap: wrap; gap: var(--pa-spacing-s); justify-content: flex-end; }
.pa-modal-title { color: var(--pa-color-text-primary); font: var(--pa-font-weight-semibold) var(--pa-font-size-heading-m)/var(--pa-line-height-heading) var(--pa-font-family-heading); margin: 0; }
.pa-modal-close { align-items: center; background: transparent; border: 0; border-radius: var(--pa-radius-small); color: var(--pa-color-text-primary); cursor: pointer; display: inline-flex; height: var(--pa-control-height-compact); justify-content: center; width: var(--pa-control-height-compact); }
.pa-modal-close:focus-visible { outline: var(--pa-focus-width) solid var(--pa-color-focus); outline-offset: var(--pa-spacing-xs); }