.modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) - 1);
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.modal__backdrop[data-state='open'] {
  opacity: 1;
}
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow: auto;
}
.modal[data-open='true'],
.modal--open,
.modal:has(> [data-state='open']) {
  display: flex;
}
.modal__panel {
  background: var(--background-secondary);
  border: 1px solid var(--background-quaternary);
  width: 100%;
  max-width: 560px;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.modal__panel[data-state='open'] {
  opacity: 1;
  transform: scale(1);
}
.modal__panel[data-state='closed'] {
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .modal__backdrop,
  .modal__panel {
    transition: none;
  }
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--background-quaternary);
}
.modal__title {
  margin: 0;
  font-size: var(--fs-lg);
}
.modal__body {
  padding: 16px;
}
.modal__footer {
  padding: 14px 16px;
  border-top: 1px solid var(--background-quaternary);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}