body.wardrobe-v2
  margin: 0
  padding: 0
  height: 100vh
  overflow: hidden
  font-family: sans-serif

.wardrobe-container
  display: flex
  height: 100vh
  background: #000

  @media (max-width: 800px)
    flex-direction: column

.outfit-preview-section
  flex: 1
  display: flex
  align-items: center
  justify-content: center
  background: #000
  position: relative
  min-height: 400px

  outfit-viewer
    width: 100%
    height: 100%

  .no-preview-message
    color: white
    text-align: center
    padding: 2rem
    font-size: 1.2rem

.outfit-controls-section
  width: 400px
  background: #fff
  padding: 2rem
  overflow-y: auto
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3)

  @media (max-width: 800px)
    width: 100%
    max-height: 40vh

  h1
    margin-top: 0
    font-size: 1.75rem
    color: #448844

  h2
    font-size: 1.25rem
    color: #448844
    margin-top: 2rem

.species-color-picker
  margin: 1.5rem 0

  .form-group
    margin-bottom: 1rem

    label
      display: block
      font-weight: bold
      margin-bottom: 0.5rem
      color: #333

    select
      width: 100%
      padding: 0.5rem
      font-size: 1rem
      border: 1px solid #ccc
      border-radius: 4px
      font-family: inherit

      &:focus
        outline: none
        border-color: #448844

.current-selection
  padding: 1rem
  background: #f0f0f0
  border-radius: 4px
  margin: 1rem 0

  p
    margin: 0
    color: #666

  strong
    color: #000

.worn-items
  margin-top: 2rem

  ul
    list-style: none
    padding: 0
    margin: 0.5rem 0

  li
    padding: 0.5rem
    background: #f9f9f9
    margin-bottom: 0.5rem
    border-radius: 4px
    color: #333