.modal-overlay
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: rgba(0, 0, 0, 0.5)
  display: flex
  align-items: center
  justify-content: center
  z-index: 1000
  padding: 2rem
  backdrop-filter: blur(4px)

.modal
  background: var(--bg-alt)
  border-radius: var(--radius-lg)
  border: 1px solid var(--border)
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2)
  width: 100%
  max-height: 90vh
  overflow: hidden
  display: flex
  flex-direction: column
  animation: modalIn 0.2s ease-out
  
  &--sm
    max-width: 400px
  
  &--md
    max-width: 500px
  
  &--lg
    max-width: 700px
  
  &--xl
    max-width: 900px

.modal-header
  display: flex
  align-items: center
  justify-content: space-between
  padding: 1.5rem 1.5rem 0
  flex-shrink: 0

.modal-title
  font-size: 1.3rem
  font-weight: 600
  color: var(--text)
  margin: 0

.modal-close
  margin-left: auto

.modal-content
  padding: 1.5rem
  overflow-y: auto
  flex: 1

.modal-actions
  display: flex
  gap: 0.75rem
  margin-top: 1.5rem
  
  &--left
    justify-content: flex-start
  
  &--center
    justify-content: center
  
  &--right
    justify-content: flex-end

@keyframes modalIn
  from
    opacity: 0
    transform: scale(0.95) translateY(-10px)
  to
    opacity: 1
    transform: scale(1) translateY(0)

@media (max-width: 768px)
  .modal-overlay
    padding: 1rem
  
  .modal
    max-width: none
    margin: 0
    
  .modal-header
    padding: 1rem 1rem 0
    
  .modal-content
    padding: 1rem