.media-page
  max-width: 1200px
  margin: 0 auto

.media-toolbar
  display: flex
  gap: var(--spacing-xl)
  margin-bottom: var(--spacing-2xl)
  align-items: flex-start

.media-upload-area
  flex: 1

.media-filters
  display: flex
  gap: var(--spacing-md)
  align-items: center

.filter-select,
.search-input
  padding: var(--spacing-sm) var(--spacing-md)
  border: 1px solid var(--border-color)
  border-radius: var(--border-radius)
  
  .theme-dark &
    background: var(--color-dark-50)
    color: var(--color-light)
    border-color: var(--color-light-10)

.search-input
  min-width: 200px

.upload-progress
  background: var(--color-light-10)
  padding: var(--spacing-lg)
  border-radius: var(--border-radius)
  margin-bottom: var(--spacing-xl)
  text-align: center
  
  .theme-dark &
    background: var(--color-dark-50)

.progress-bar
  height: 8px
  background: var(--color-light-50)
  border-radius: 4px
  overflow: hidden
  margin-bottom: var(--spacing-sm)
  
  .theme-dark &
    background: var(--color-dark-20)

.progress-fill
  height: 100%
  background: var(--color-primary)
  transition: width 0.3s ease
  border-radius: 4px

.media-grid
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
  gap: var(--spacing-lg)
  margin-bottom: var(--spacing-2xl)

.media-item
  border: 2px solid transparent
  border-radius: var(--border-radius)
  padding: var(--spacing-md)
  background: var(--color-white)
  cursor: pointer
  transition: var(--transition-fast)
  position: relative
  
  &:hover
    border-color: var(--color-primary-20)
    transform: translateY(-2px)
    box-shadow: var(--shadow-md)
  
  .theme-dark &
    background: var(--color-dark)
  
  .media-item--selected &
    border-color: var(--color-primary)

.media-item__preview
  height: 120px
  display: flex
  align-items: center
  justify-content: center
  background: var(--color-light-10)
  border-radius: var(--border-radius-sm)
  margin-bottom: var(--spacing-md)
  overflow: hidden
  
  .theme-dark &
    background: var(--color-dark-50)

.media-item__image
  width: 100%
  height: 100%
  object-fit: cover

.media-item__icon
  font-size: 2rem
  opacity: 0.7

.media-item__info
  text-align: center

.media-item__name
  font-weight: var(--font-weight-medium)
  margin-bottom: var(--spacing-xs)
  word-break: break-word

.media-item__meta
  display: flex
  justify-content: space-between
  font-size: var(--font-size-sm)
  color: var(--color-secondary)

.media-item__actions
  position: absolute
  top: var(--spacing-sm)
  right: var(--spacing-sm)
  opacity: 0
  transition: var(--transition-fast)
  
  .media-item:hover &
    opacity: 1

.media-item__delete
  width: 24px
  height: 24px
  border: none
  background: var(--color-danger)
  color: var(--color-white)
  border-radius: 50%
  cursor: pointer
  display: flex
  align-items: center
  justify-content: center
  font-size: var(--font-size-lg)

.media-load-more
  text-align: center
  margin-bottom: var(--spacing-2xl)

.media-selection
  position: fixed
  bottom: var(--spacing-xl)
  left: 50%
  transform: translateX(-50%)
  background: var(--color-white)
  padding: var(--spacing-lg)
  border-radius: var(--border-radius)
  box-shadow: var(--shadow-lg)
  display: flex
  align-items: center
  gap: var(--spacing-lg)
  z-index: var(--z-sticky)
  
  .theme-dark &
    background: var(--color-dark)
    color: var(--color-light)

@media (max-width: 768px)
  .media-toolbar
    flex-direction: column
    gap: var(--spacing-md)
  
  .media-filters
    width: 100%
    justify-content: space-between
  
  .search-input
    flex: 1
  
  .media-grid
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
    gap: var(--spacing-md)