.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }

.modal-backdrop { position: absolute; inset: 0; background: rgba(30, 15, 75, 0.65); }

.modal-dialog {
  position: relative;
  width: min(560px, 92%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  animation: pop 0.25s ease;
}

.modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  font-size: 1.8rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--muted);
}

.modal-body-list { padding-left: 1.2rem; color: var(--muted); }

.modal h3 { font-size: 1.6rem; }

.modal dl { margin: 1rem 0 0; }

.modal dt { font-weight: 700; margin-top: 0.8rem; }

.modal dd { margin: 0; color: var(--muted); }

@keyframes pop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}