.modal-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity 0.25s var(--ease-out);
}
.modal-backdrop.is-visible { opacity: 1; }

.modal {
  width: min(480px, 100%);
  max-height: min(80vh, 640px);
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(16px) scale(0.98); opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.modal-backdrop.is-visible .modal { transform: translateY(0) scale(1); opacity: 1; }

.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.modal-head h3 { font-size: 1.2rem; }
.modal-close { background: none; border: none; color: var(--text-faint); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--bg-card); color: var(--text); }
.modal-body { padding: 22px; overflow-y: auto; }

@media (max-width: 560px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 85vh; }
}