/* Settings compact pass: versioned filename to bypass browser cache. */
.music-pattern-themed {
  background:
    radial-gradient(circle at 50% 44%, #0f0f1424, #0f0f14ef 70%),
    radial-gradient(circle at 24% 18%, #16bb1b18, transparent 34%),
    radial-gradient(circle at 78% 80%, #f0c96a14, transparent 32%),
    #0f0f14 !important;
  background-image:
    radial-gradient(circle at 50% 44%, #0f0f1424, #0f0f14ef 70%),
    radial-gradient(circle at 24% 18%, #16bb1b18, transparent 34%),
    radial-gradient(circle at 78% 80%, #f0c96a14, transparent 32%) !important;
  background-size: cover, cover, cover !important;
  background-position: center, center, center !important;
}

.animate-music-drift {
  animation: none !important;
}

.app-main:has(.settings-list),
.app-main:has(.details-form),
.app-main:has(.password-form) {
  padding-top: 16px !important;
}

.app-main:has(.settings-list) .space-stack,
.app-main:has(.details-form) .space-stack,
.app-main:has(.password-form) .space-stack {
  gap: 10px !important;
}

.content-panel:has(.settings-list),
.content-panel:has(.details-form),
.content-panel:has(.password-form) {
  padding: 12px !important;
  border-radius: 8px !important;
}

.content-panel:has(.settings-list) .panel-heading,
.content-panel:has(.details-form) .panel-heading,
.content-panel:has(.password-form) .panel-heading {
  margin-bottom: 8px !important;
}

.content-panel:has(.settings-list) .panel-heading h2,
.content-panel:has(.details-form) .panel-heading h2,
.content-panel:has(.password-form) .panel-heading h2 {
  font-size: 22px !important;
  line-height: 1 !important;
}

.content-panel:has(.settings-list) .eyebrow,
.content-panel:has(.details-form) .eyebrow,
.content-panel:has(.password-form) .eyebrow {
  margin-bottom: 4px !important;
  font-size: 10px !important;
}

.settings-list {
  border-radius: 6px !important;
}

.settings-list > div {
  align-items: center !important;
  gap: 10px !important;
  min-height: 0 !important;
  padding: 7px 10px !important;
}

.settings-list strong,
.settings-list span {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.content-panel:has(.details-form) .muted-copy {
  margin: 0 0 6px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.details-form {
  grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
  gap: 8px 12px !important;
  margin-top: 8px !important;
}

.password-form {
  grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
  gap: 8px 10px !important;
  margin-top: 8px !important;
}

.details-form label,
.password-form label {
  display: grid !important;
  grid-template-columns: 148px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

.details-form label > span,
.password-form label > span {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 32px !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}

.details-form input,
.password-form input {
  min-height: 32px !important;
  border-radius: 6px !important;
  padding: 0 9px !important;
  font-size: 13px !important;
}

.details-form-actions,
.password-form .stem-form-actions {
  grid-column: 1 / -1 !important;
  min-height: 32px !important;
  margin-top: 0 !important;
}

.details-form-actions button,
.password-form .stem-form-actions button {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
}

.project-heading-actions .status-pill {
  border: 1px solid #16bb1b66 !important;
  min-height: 24px !important;
  padding: 0 8px !important;
}

.status-pill.completed,
.status-pill.complete {
  color: #b8ffba !important;
  background: #16bb1b2e !important;
}

.file-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.file-title-line strong {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.file-type-badge {
  flex: none !important;
  min-width: 42px !important;
  height: 22px !important;
  border: 1px solid #ffffff1a !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e2e8f0 !important;
  background: #ffffff0c !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

.file-type-vocals {
  color: #fef3c7 !important;
  background: #f0c96a24 !important;
  border-color: #f0c96a4d !important;
}

.file-type-drums {
  color: #bbf7d0 !important;
  background: #16bb1b24 !important;
  border-color: #16bb1b55 !important;
}

.file-type-mix,
.file-type-master {
  color: #bfdbfe !important;
  background: #3b82f624 !important;
  border-color: #60a5fa55 !important;
}

.file-type-instrumental,
.file-type-stems,
.file-type-music {
  color: #ddd6fe !important;
  background: #8b5cf624 !important;
  border-color: #a78bfa55 !important;
}

.audio-detail-strip {
  display: grid !important;
  grid-template-columns: minmax(120px, 220px) auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 7px !important;
}

.audio-waveform {
  height: 28px !important;
  border: 1px solid #ffffff12 !important;
  border-radius: 6px !important;
  background: #05081040 !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 4px 6px !important;
  overflow: hidden !important;
}

.audio-waveform span {
  width: 3px !important;
  min-width: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #b8ffba, #16bb1b) !important;
  opacity: 0.85 !important;
}

.audio-meta-facts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.audio-meta-pill {
  min-height: 24px !important;
  border: 1px solid #ffffff14 !important;
  border-radius: 999px !important;
  background: #ffffff08 !important;
  color: var(--text-secondary) !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

@media (width <= 720px) {
  .audio-detail-strip {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .audio-waveform {
    max-width: 100% !important;
  }
}

@media (width <= 1040px) {
  .details-form,
  .password-form {
    grid-template-columns: 1fr !important;
  }
}

@media (width <= 720px) {
  .app-main:has(.settings-list),
  .app-main:has(.details-form),
  .app-main:has(.password-form) {
    padding: 12px !important;
  }

  .details-form,
  .password-form {
    grid-template-columns: 1fr !important;
  }

  .details-form label,
  .password-form label {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .settings-list > div {
    align-items: flex-start !important;
    padding: 8px 10px !important;
  }
}