/* modals.css */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 2000; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all var(--transition-base);
}
.modal-backdrop--open { opacity: 1; visibility: visible; }

.modal {
  background: var(--color-surface); border-radius: var(--radius-xl);
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg); transform: translateY(20px);
  transition: transform var(--transition-base); position: relative;
  margin: var(--space-4);
}
.modal-backdrop--open .modal { transform: translateY(0); }

.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border);
}
.modal__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.modal__close {
  width: 32px; height: 32px; border: none; background: transparent;
  border-radius: var(--radius-full); cursor: pointer; display: flex;
  align-items: center; justify-content: center; color: var(--color-text-muted);
  transition: all var(--transition-fast); font-size: var(--text-lg);
}
.modal__close:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.modal__body { padding: var(--space-6); }
.modal__footer {
  display: flex; gap: var(--space-3); justify-content: flex-end;
  padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border);
}