metube/ui/src/app/app.sass

:host
  --mt-radius-sm: 0.5rem
  --mt-radius-md: 0.85rem
  --mt-radius-lg: 1.1rem
  --mt-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06)
  --mt-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08)
  --mt-shadow-lg: 0 14px 40px rgba(15, 23, 42, 0.12)
  --mt-surface: color-mix(in srgb, var(--bs-body-bg) 92%, #fff)
  --mt-surface-soft: color-mix(in srgb, var(--bs-body-bg) 85%, var(--bs-tertiary-bg))
  display: flex
  flex-direction: column
  min-height: 100vh

main
  flex-grow: 1

.navbar
  backdrop-filter: blur(8px)
  background: color-mix(in srgb, var(--bs-dark) 92%, #000)
  border-bottom: 1px solid rgba(255, 255, 255, 0.08)

.navbar-brand
  font-weight: 700
  letter-spacing: 0.02em

.add-url-box
  max-width: 1024px
  margin: 2.5rem auto

.url-entry-wrap
  display: flex
  gap: .75rem
  align-items: stretch

.url-entry-textarea
  min-height: 8.25rem
  max-height: 12rem
  resize: none
  overflow-y: auto

.url-entry-actions
  display: flex
  flex-direction: column
  gap: .5rem
  width: 11rem

  .btn
    flex: 1
    white-space: nowrap

@media (max-width: 767.98px)
  .url-entry-wrap
    flex-direction: column

  .url-entry-actions
    width: 100%

.card
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 75%, transparent)
  border-radius: var(--mt-radius-lg)
  background: var(--mt-surface)
  box-shadow: var(--mt-shadow-md)

.input-group-lg > .form-control,
.input-group-lg > .form-select,
.form-control-lg,
.form-select-lg,
.btn-lg
  border-radius: var(--mt-radius-md)

.form-control,
.form-select,
.btn
  transition: all .18s ease

.form-control:focus,
.form-select:focus
  border-color: color-mix(in srgb, var(--bs-primary) 55%, #fff)
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--bs-primary) 20%, transparent)

.btn-primary
  box-shadow: 0 6px 16px color-mix(in srgb, var(--bs-primary) 28%, transparent)

.btn-primary:hover
  transform: translateY(-1px)

.metube-section-header
  font-size: 1.2rem
  font-weight: 650
  letter-spacing: 0.01em
  display: inline-flex
  align-items: center
  gap: .55rem
  margin-top: 2rem
  margin-bottom: .5rem
  padding: .35rem .75rem
  border-radius: var(--mt-radius-md)
  color: var(--bs-body-color)
  background: var(--mt-surface-soft)
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 72%, transparent)

.metube-section-header:before
  content: ""
  width: .45rem
  height: .45rem
  border-radius: 50%
  background: var(--bs-primary)

.table
  border-radius: var(--mt-radius-md)
  overflow: hidden
  box-shadow: var(--mt-shadow-sm)

th
  border-top: 0
  border-bottom-width: 2px !important
  vertical-align: middle !important
  white-space: nowrap
  font-size: .82rem
  text-transform: uppercase
  letter-spacing: .04em
  color: var(--bs-secondary-color)

td
  vertical-align: middle

tbody tr
  transition: background-color .15s ease

tbody tr:hover
  background: color-mix(in srgb, var(--bs-primary-bg-subtle) 35%, transparent)

.disabled
  opacity: 0.5
  pointer-events: none

.form-switch
  input
    margin-top: 5px

.download-progressbar
  width: 12rem
  margin-left: auto

.modal.fade.show
  background-color: rgba(0, 0, 0, 0.45)

.modal-content
  border: 0
  border-radius: var(--mt-radius-lg)
  box-shadow: var(--mt-shadow-lg)

.modal-header
  border-bottom: 1px solid var(--bs-border-color)

.modal-body
  textarea.form-control
    resize: vertical
    min-height: 9rem

.add-url
  display: inline-flex
  align-items: center
  justify-content: center

  .spinner-border
    margin-right: 0.5rem

.add-progress-btn
  min-width: 9.5rem
  cursor: default

.add-cancel-btn
  min-width: 3.25rem

.footer
  width: 100%
  padding: 14px 0
  border-top: 1px solid rgba(255,255,255,.08)
  background: color-mix(in srgb, var(--bs-dark) 94%, #000)

  .footer-content
    display: flex
    justify-content: center
    align-items: center
    gap: 18px
    color: #fff
    font-size: 0.9rem

    .version-item
      display: flex
      align-items: center
      gap: 8px

      .version-label
        font-size: 0.72rem
        text-transform: uppercase
        letter-spacing: 0.08em
        opacity: 0.72

      .version-value
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace
        font-size: 0.84rem
        padding: 2px 8px
        background: rgba(255,255,255,0.08)
        border-radius: var(--mt-radius-sm)

    .version-separator
      width: 1px
      height: 16px
      background: rgba(255,255,255,0.18)
      margin: 0 2px

    .github-link
      display: flex
      align-items: center
      gap: 6px
      color: #fff
      text-decoration: none
      font-size: 0.85rem
      padding: 3px 9px
      border-radius: var(--mt-radius-sm)
      transition: background-color 0.2s ease

      &:hover
        background: rgba(255,255,255,0.12)
        color: #fff
        text-decoration: none

.download-metrics
  display: flex
  align-items: center
  gap: 16px
  margin-left: 24px

  .metric
    display: flex
    align-items: center
    gap: 6px
    font-size: 0.9rem
    color: #c4cad1

.cookie-btn
  flex: 1 1 auto
  background-color: var(--bs-secondary-bg)
  border-color: var(--bs-border-color)
  color: var(--bs-emphasis-color)

.cookie-active-btn
  flex: 1 1 auto

.settings-section-label
  font-size: 0.8rem
  text-transform: uppercase
  letter-spacing: 0.1em
  font-weight: 600
  color: var(--bs-body-color)
  margin-top: 1.75rem
  margin-bottom: 0.75rem

.action-group-label
  font-size: 0.7rem
  text-transform: uppercase
  letter-spacing: 0.05em
  color: var(--bs-secondary-color)
  margin-bottom: 0.4rem

.cookie-status
  font-size: 0.8rem
  margin-top: 0.35rem
  color: var(--bs-secondary-color)