// Стили для страницы 404
.not-found-page
  display: flex
  align-items: center
  justify-content: center
  min-height: 60vh
  padding: var(--spacing-2xl) var(--spacing-md)

.error-container
  text-align: center
  max-width: 500px
  margin: 0 auto

.error-code
  font-size: 8rem
  font-weight: var(--font-weight-bold)
  color: var(--color-primary)
  margin-bottom: var(--spacing-sm)
  line-height: 1
  opacity: 0.8
  
  @media (max-width: 768px)
    font-size: 6rem

.error-title
  font-size: var(--font-size-2xl)
  margin-bottom: var(--spacing-md)
  color: var(--color-dark)
  font-weight: var(--font-weight-semibold)
  
  .theme-dark &
    color: var(--color-light)

.error-description
  color: var(--color-secondary)
  margin-bottom: var(--spacing-xl)
  font-size: var(--font-size-lg)
  line-height: var(--line-height-relaxed)

.error-actions
  display: flex
  gap: var(--spacing-md)
  justify-content: center
  flex-wrap: wrap

.error-illustration
  margin-bottom: var(--spacing-xl)
  opacity: 0.7
  
  svg
    width: 200px
    height: 150px
    fill: var(--color-primary-50)

// Адаптивность
@media (max-width: 480px)
  .not-found-page
    min-height: 50vh
    padding: var(--spacing-xl) var(--spacing-sm)
  
  .error-code
    font-size: 4rem
  
  .error-title
    font-size: var(--font-size-xl)
  
  .error-description
    font-size: var(--font-size-base)
  
  .error-actions
    flex-direction: column
    align-items: center
    
    .btn
      width: 100%
      max-width: 280px