/* 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 {
  display: none !important;
}

.file-type-icon {
  flex: none !important;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid #ffffff1a !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e2e8f0 !important;
  background: #ffffff0c !important;
}

.file-type-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

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

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

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

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

.audio-detail-strip {
  display: block !important;
  align-items: center !important;
  margin: 0 !important;
  width: min(860px, 100%) !important;
  justify-self: center !important;
  align-self: center !important;
}

.audio-waveform {
  width: 100% !important;
  height: 78px !important;
  border: 1px solid #ffffff12 !important;
  border-radius: 9px !important;
  background:
    linear-gradient(180deg, #ffffff08, transparent 44%, #ffffff07 45%, transparent 46%),
    #05081052 !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  min-width: 420px !important;
}

.audio-waveform-area {
  fill: #18d21ccc !important;
  stroke: #b8ffba !important;
  stroke-width: 1.6 !important;
  vector-effect: non-scaling-stroke !important;
  filter: drop-shadow(0 0 5px #16bb1b66) !important;
}

.audio-waveform-edge {
  fill: none !important;
  stroke: #d9ffd9 !important;
  stroke-width: 1.2 !important;
  opacity: 0.9 !important;
  vector-effect: non-scaling-stroke !important;
}

.audio-waveform-grid path {
  fill: none !important;
  stroke: #ffffff14 !important;
  stroke-width: 1 !important;
  vector-effect: non-scaling-stroke !important;
}

.audio-waveform-midline {
  fill: none !important;
  stroke: #f0c96a99 !important;
  stroke-width: 1.2 !important;
  vector-effect: non-scaling-stroke !important;
}

.audio-meta-facts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 120px !important;
  margin-top: 7px !important;
}

.audio-meta-pill {
  min-height: 28px !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 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.audio-file-row {
  grid-template-columns: minmax(230px, 0.55fr) minmax(520px, 1.45fr) auto !important;
  align-items: center !important;
}

.audio-file-row > div:first-child {
  align-self: center !important;
}

.audio-file-row > .file-actions {
  align-self: center !important;
}

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

  .audio-meta-facts,
  .audio-waveform {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .audio-waveform {
    max-width: 100% !important;
    min-width: 0 !important;
    height: 62px !important;
  }

  .audio-file-row {
    grid-template-columns: 1fr !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;
  }
}