.categories-page
  display: grid
  grid-template-columns: 1fr 400px
  gap: var(--spacing-2xl)
  max-width: 1400px
  margin: 0 auto

.page-header
  grid-column: 1 / -1
  display: flex
  justify-content: space-between
  align-items: center
  margin-bottom: var(--spacing-2xl)

.page-actions
  display: flex
  gap: var(--spacing-md)

.categories-content
  display: contents

.categories-tree
  background: var(--color-white)
  padding: var(--spacing-xl)
  border-radius: var(--border-radius)
  box-shadow: var(--shadow-sm)
  
  .theme-dark &
    background: var(--color-dark)

.loading-state
  text-align: center
  padding: var(--spacing-2xl)
  color: var(--color-secondary)

.tree-container
  space-y: var(--spacing-sm)

.category-editor
  background: var(--color-white)
  padding: var(--spacing-xl)
  border-radius: var(--border-radius)
  box-shadow: var(--shadow-sm)
  height: fit-content
  position: sticky
  top: var(--spacing-xl)
  
  .theme-dark &
    background: var(--color-dark)

.editor-form
  space-y: var(--spacing-lg)

.form-group
  display: flex
  flex-direction: column
  gap: var(--spacing-sm)

.form-group label
  font-weight: var(--font-weight-medium)
  color: var(--color-dark)
  
  .theme-dark &
    color: var(--color-light)

.form-input,
.form-select,
.form-textarea
  padding: var(--spacing-md)
  border: 1px solid var(--border-color)
  border-radius: var(--border-radius)
  font-family: var(--font-family)
  font-size: var(--font-size-base)
  
  .theme-dark &
    background: var(--color-dark-50)
    color: var(--color-light)
    border-color: var(--color-light-10)

.form-textarea
  resize: vertical
  min-height: 100px

.form-actions
  display: flex
  gap: var(--spacing-md)
  justify-content: flex-end
  margin-top: var(--spacing-xl)

.editor-placeholder
  text-align: center
  padding: var(--spacing-2xl)
  color: var(--color-secondary)

// Адаптивность
@media (max-width: 1024px)
  .categories-page
    grid-template-columns: 1fr
    gap: var(--spacing-xl)
  
  .category-editor
    position: static
    order: -1

@media (max-width: 768px)
  .page-header
    flex-direction: column
    gap: var(--spacing-md)
    align-items: stretch
  
  .page-actions
    justify-content: stretch
    
    .btn
      flex: 1