@use "@/common/styles/colors" as *

.install-page
  min-height: 100vh
  display: flex
  align-items: center
  justify-content: center
  padding: 120px 24px 80px

.install-container
  width: 100%
  max-width: 700px

.install-header
  text-align: center
  margin-bottom: 40px

  h1
    font-size: 2.5rem
    font-weight: 700
    margin-bottom: 8px

  p
    font-size: 1.125rem
    color: $text-secondary

.quick-install
  background: $background-lighter
  border: 1px solid $border-color
  border-radius: 12px
  padding: 24px
  margin-bottom: 32px

.quick-install-header
  text-align: center
  margin-bottom: 16px

  h2
    font-size: 1.25rem
    font-weight: 600
    margin-bottom: 4px

  p
    font-size: 0.875rem
    color: $text-secondary

.command-row
  display: flex
  align-items: center
  background: $background
  border: 1px solid $border-color
  border-radius: 8px
  padding: 14px 16px
  cursor: pointer
  transition: border-color 0.2s ease

  &:hover
    border-color: $primary

  code
    flex: 1
    font-family: "JetBrains Mono", "Fira Code", monospace
    font-size: 0.875rem
    color: $text
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap

.copy-btn
  display: flex
  align-items: center
  gap: 6px
  background: none
  border: none
  color: $text-muted
  font-size: 0.8125rem
  font-weight: 500
  padding: 6px 12px
  cursor: pointer
  transition: color 0.2s ease
  border-radius: 6px

  &:hover
    color: $primary
    background: rgba($primary, 0.1)

  &.copied
    color: $primary

.divider
  display: flex
  align-items: center
  gap: 16px
  margin-bottom: 24px

  &::before, &::after
    content: ""
    flex: 1
    height: 1px
    background: $border-color

  span
    font-size: 0.8125rem
    color: $text-muted

.install-options
  display: grid
  grid-template-columns: repeat(3, 1fr)
  gap: 12px
  margin-bottom: 40px

.install-option
  display: flex
  align-items: center
  gap: 14px
  padding: 18px 20px
  background: $background-lighter
  border: 1px solid $border-color
  border-radius: 10px
  cursor: pointer
  transition: all 0.2s ease
  text-align: left

  &:hover
    border-color: $border-hover
    background: lighten($background-lighter, 2%)

  > svg
    font-size: 1.75rem
    color: $text-secondary
    transition: color 0.2s ease

  .option-text
    display: flex
    flex-direction: column
    gap: 2px

    strong
      font-size: 0.9375rem
      font-weight: 600
      color: $text

    span
      font-size: 0.75rem
      color: $text-muted

.help-section
  text-align: center
  padding-top: 24px
  border-top: 1px solid $border-color

  > p
    font-size: 0.875rem
    color: $text-muted
    margin-bottom: 12px

.help-links
  display: flex
  justify-content: center
  gap: 24px

  a
    color: $text-secondary
    font-size: 0.875rem
    font-weight: 500
    cursor: pointer
    transition: color 0.2s ease

    &:hover
      color: $primary

@media (max-width: 640px)
  .install-header h1
    font-size: 2rem

  .install-options
    grid-template-columns: 1fr

  .command-row
    flex-direction: column
    gap: 12px

    code
      width: 100%
      text-align: center
      font-size: 0.75rem