:root {
  --color-body: white !important; /* dark body */
  --color-body-bg: #1c1c1e !important; /* pure black background */
  --color-card: rgba(0, 0, 0, 0.2) !important; /* pure black background */
  --color-primary: #ff2d55 !important; /* vibrant pink/red - Apple Music accent */
  --color-accent: #ffcc00 !important; /* gold/yellow accent (can stay similar) */
  --color-primary--30: #ff2d534c !important; /* semi-transparent accent */
  --color-primary--90: #ff2d53cc !important; /* high-opacity white for text or icons */
  --color-secondry: #ff375f !important; /* secondary vibrant pink/red */
  --color-divider: #2c2c2e !important; /* dark gray divider (Apple uses subtle lines) */
  --color-caption: #8e8e93 !important; /* muted iOS-style gray text */
  --color-canvas: #1c1c1e !important; /* canvas/background panel */
  --radius: 4px;
}

.empty-list-ph i {
  font-size: 8rem;
}
center.empty-list-ph .btn-group {
  justify-content: center;
  align-items: center;
}

.card input,
.card textarea,
.card select {
  background-color: var(--color-canvas);
}

/* selectize */
.selectize-control.single .selectize-input {
  box-shadow: none !important;
}

.selectize-dropdown-content .option {
  background-color: var(--color-canvas) !important;
  color: var(--color-body) !important;
}

.selectize-input {
  color: var(--color-body) !important;
}
.input.selector a.clear {
  color: white !important;
  right: 0 !important;
}

/* tile--singer */
.tile.tile--xl {
  background-color: var(--color-card);
  border-radius: var(--radius);
  padding: 2rem;
  gap: 2rem;
}
.tile__media.tile__media--rounded {
  border-radius: 1000px;
  aspect-ratio: 1;
  object-fit: cover;
}
.tile--xl .tile__media.tile__media--rounded {
  width: 10rem;
  height: 10rem;
}

label + .filepond {
  margin-top: 0.4rem;
}

.card + .btn-group {
  margin-top: 3rem;
}

/* card--add */
.card--add.media {
  height: 100%;
  transition: all 0.3s;
}
.card--add.media .media__img {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.card--add.media .media__img:hover {
  scale: 1.2;
}

.card--add.media:hover {
  background-color: var(--color-primary);
}

/* breadcrumb arrows */
.subheader__breadcrumb .fa-solid.fa-chevron-right {
  display: inline-block;
  transform: rotate(180deg);
}