:host
  display: block

.scrim
  position: fixed
  inset: 0
  background: oklch(25% 0.02 240 / 0.35)
  opacity: 0
  pointer-events: none
  transition: opacity 0.18s ease
  z-index: 40

  &.show
    opacity: 1
    pointer-events: auto

.slideover
  position: fixed
  top: 0
  right: 0
  bottom: 0
  width: 340px
  max-width: 100vw
  background: var(--surface)
  border-left: 1px solid var(--border)
  box-shadow: -12px 0 40px oklch(30% 0.02 240 / 0.15)
  transform: translateX(100%)
  transition: transform 0.22s ease
  z-index: 50
  display: flex
  flex-direction: column

  &.show
    transform: translateX(0)

.so-head
  display: flex
  align-items: center
  padding: 16px 18px
  border-bottom: 1px solid var(--border)
  flex: none

  .so-title
    font-size: 15px
    font-weight: 600
    letter-spacing: -0.01em
    color: var(--fg)

.so-body
  padding: 18px
  overflow-y: auto
  flex: 1

.so-group
  margin-bottom: 24px

.so-label
  font-size: 11px
  font-weight: 600
  letter-spacing: 0.06em
  color: var(--muted)
  margin-bottom: 10px

.so-hint
  font-size: 12px
  color: var(--muted)
  margin-bottom: 10px

.so-row
  display: flex
  align-items: center
  justify-content: space-between
  gap: 12px
  padding: 9px 0
  font-size: 13.5px
  color: var(--fg)

  .sub
    font-size: 11.5px
    color: var(--muted)
    margin-top: 2px

  &.flat
    padding: 6px 0
    font-size: 12.5px

    .num
      font-size: 12px
      color: var(--fg)

.switch
  width: 36px
  height: 21px
  border-radius: 20px
  border: none
  background: oklch(85% 0.01 240)
  position: relative
  transition: background 0.15s ease
  flex: none

  &::after
    content: ""
    position: absolute
    top: 2.5px
    left: 3px
    width: 16px
    height: 16px
    border-radius: 50%
    background: var(--surface)
    box-shadow: 0 1px 3px oklch(20% 0.02 240 / 0.3)
    transition: transform 0.15s ease

  &.on
    background: var(--accent)

    &::after
      transform: translateX(14px)

.so-input
  width: 72px
  height: 30px
  border: 1px solid var(--border)
  border-radius: 6px
  padding: 0 8px
  font-size: 13px
  font-family: var(--font-mono)
  color: var(--fg)
  text-align: right
  background: var(--surface)

  &.text
    width: 140px
    text-align: left
    font-family: var(--font-body)

  &.wide
    width: 100%
    text-align: left
    font-family: var(--font-body)
    margin-bottom: 8px

.so-textarea
  width: 100%
  border: 1px solid var(--border)
  border-radius: 6px
  padding: 8px 10px
  font-size: 12px
  font-family: var(--font-mono)
  color: var(--fg)
  background: var(--surface)
  resize: vertical
  margin-bottom: 8px

.so-btn
  width: 100%
  padding: 8px 12px
  border: 1px solid var(--border)
  background: var(--surface)
  border-radius: 6px
  font-size: 13px
  color: var(--fg)
  text-align: left
  display: flex
  align-items: center
  gap: 8px
  margin-bottom: 6px
  transition: background 0.12s ease

  &:hover:not(:disabled)
    background: var(--bg)

  &:disabled
    opacity: 0.5
    cursor: default

  svg
    color: var(--muted)
    flex: none

  &.primary
    background: var(--accent-tint)
    border-color: oklch(85% 0.05 145)
    color: var(--accent-strong)
    font-weight: 550

    &:hover:not(:disabled)
      background: var(--accent-tint)

.icon-btn
  width: 32px
  height: 32px
  display: grid
  place-items: center
  border: 1px solid transparent
  background: none
  border-radius: 6px
  color: var(--muted)
  transition: background 0.12s ease, color 0.12s ease

  &.neutral:hover
    background: var(--bg)
    color: var(--fg)