:root { --mc-gradient: linear-gradient(135deg, #5856d6, #39f, #2eb85c); --mc-stat-label-color: rgba(0, 0, 0, 0.72); }
.wrapper { padding-left: var(--cui-sidebar-occupy-start, 16rem); transition: padding .15s; }
.sidebar:not(.show) ~ .wrapper { --cui-sidebar-occupy-start: 16rem; }
.site-logo { width: 2.25rem; height: 2.25rem; object-fit: contain; border-radius: .5rem; }
.site-logo--narrow { width: 2rem; height: 2rem; }
.header .container-fluid { min-height: 4rem; }
.avatar-img, .profile-preview { object-fit: cover; border-radius: 50%; }
.avatar-img { width: 2.25rem; height: 2.25rem; }
.profile-preview, .profile-placeholder { width: 9rem; height: 9rem; margin-inline: auto; }
.profile-placeholder { border-radius: 50%; display: grid; place-items: center; font-size: 4rem; color: #fff; background: var(--mc-gradient); }
.hero { background: radial-gradient(circle at top right, rgba(51,153,255,.22), transparent 35%), var(--cui-body-bg); }
.chart-card { border-radius: 1rem; background: rgba(88, 86, 214, .12); min-height: 260px; }
.bars { height: 190px; display: flex; gap: .8rem; align-items: end; }
.bars span { flex: 1; border-radius: .5rem .5rem 0 0; background: var(--mc-gradient); }
.sample-line-chart { min-height: 280px; border-radius: 1rem; background: linear-gradient(180deg, rgba(51,153,255,.12), transparent), repeating-linear-gradient(to right, transparent 0 12%, rgba(128,128,128,.15) 12% 12.4%), repeating-linear-gradient(to top, transparent 0 24%, rgba(128,128,128,.15) 24% 24.4%); position: relative; }
.sample-line-chart::after { content: ""; position: absolute; inset: 18% 6% 25%; background: var(--mc-gradient); clip-path: polygon(0 75%, 18% 45%, 34% 52%, 49% 25%, 64% 38%, 82% 12%, 100% 28%, 100% 38%, 82% 22%, 64% 48%, 49% 35%, 34% 62%, 18% 55%, 0 85%); opacity: .9; }
.form-control, .form-select { max-width: 100%; }
@media (max-width: 991.98px) { .wrapper { padding-left: 0; } }
.track-art { width: 50px; height: 50px; max-width: 50px; max-height: 50px; border-radius: .5rem; object-fit: cover; flex: 0 0 50px; }
.track-art-placeholder { display: grid; place-items: center; background: var(--mc-gradient); color: #fff; font-weight: 700; }
.track-meta { min-width: 0; line-height: 1.25; }
.track-meta > div + div { margin-top: .125rem; }

.notification-menu { min-width: 20rem; max-width: 24rem; }
.notification-item .badge { font-size: .68rem; }
.admin-chart-wrap { position: relative; min-height: 22rem; }

.api-url-wrap { overflow-wrap: anywhere; }

.card.text-bg-primary .stat-card-label,
.card.text-bg-success .stat-card-label,
.card.text-bg-warning .stat-card-label,
.card.text-bg-danger .stat-card-label {
  color: var(--mc-stat-label-color);
}

.card.text-bg-primary .stat-card-value,
.card.text-bg-success .stat-card-value,
.card.text-bg-warning .stat-card-value,
.card.text-bg-danger .stat-card-value {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.25);
}

.artist-collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.artist-collage-item { position: relative; aspect-ratio: 1; overflow: hidden; }
.artist-collage--matched .artist-collage-item { aspect-ratio: auto; height: 100%; min-height: 0; }
.artist-collage--monthly { min-height: 18rem; }
.artist-collage-media { position: relative; display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.artist-collage-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.artist-collage-placeholder { display: grid; place-items: center; background: var(--mc-gradient); color: #fff; font-size: 2rem; font-weight: 700; }
.artist-collage-name,
.artist-collage-plays { position: absolute; z-index: 1; padding: .5rem .625rem; color: #fff; font-weight: 600; font-size: .875rem; line-height: 1.2; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
.artist-collage-name { top: 0; left: 0; right: 0; text-align: left; background: linear-gradient(to bottom, rgba(0, 0, 0, .72), transparent); pointer-events: none; }
.artist-collage-plays { bottom: 0; left: 0; right: 0; text-align: right; background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent); text-decoration: none; }
.artist-collage-plays:hover { color: #fff; text-decoration: underline; }

.listening-activity { overflow-x: auto; }
.listening-activity-grid { display: inline-block; min-width: 100%; }
.listening-activity-row { display: grid; grid-template-columns: 3rem repeat(12, minmax(1rem, 1fr)); gap: .25rem; align-items: center; margin-bottom: .25rem; }
.listening-activity-header { margin-bottom: .5rem; }
.listening-activity-year { font-size: .75rem; color: var(--cui-secondary-color); text-align: right; padding-right: .25rem; }
.listening-activity-month-label { font-size: .7rem; color: var(--cui-secondary-color); text-align: center; }
.listening-activity-cell { width: 100%; aspect-ratio: 1; border-radius: .2rem; background: var(--cui-tertiary-bg); display: block; min-width: .85rem; min-height: .85rem; }
.listening-activity-cell--clickable { cursor: pointer; }
.listening-activity-cell--clickable:focus-visible { outline: 2px solid var(--cui-primary); outline-offset: 1px; }
.listening-activity-cell:not([tabindex]) { cursor: default; }
.listening-activity-tooltip {
  position: fixed;
  z-index: 1080;
  padding: .35rem .55rem;
  border-radius: .375rem;
  font-size: .75rem;
  line-height: 1.2;
  pointer-events: none;
  background: var(--cui-body-bg);
  color: var(--cui-body-color);
  border: 1px solid var(--cui-border-color);
  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .15);
  white-space: nowrap;
}
.listening-activity-cell.level-1 { background: rgba(51, 153, 255, .25); }
.listening-activity-cell.level-2 { background: rgba(51, 153, 255, .45); }
.listening-activity-cell.level-3 { background: rgba(51, 153, 255, .68); }
.listening-activity-cell.level-4 { background: rgba(51, 153, 255, .92); }
.listening-activity-legend { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; margin-top: .75rem; font-size: .75rem; color: var(--cui-secondary-color); }
.listening-activity-legend .listening-activity-cell { width: .85rem; height: .85rem; min-width: .85rem; min-height: .85rem; aspect-ratio: auto; }
.listening-activity-row--hidden { display: none; }
.listening-activity-toggle { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; text-decoration: none; }
.listening-activity-toggle:hover { text-decoration: underline; }
.month-genre-chart-wrap { position: relative; height: 20rem; }
.month-treemap-chart-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.month-treemap-chart-wrap--style { height: 16rem; }
.month-treemap-chart-wrap--genre { height: 24rem; }
.month-treemap-chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.month-genre-chart-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .4rem 1.25rem;
  margin-top: 1rem;
  font-size: .8125rem;
  line-height: 1.3;
}
.month-genre-chart-legend-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  cursor: pointer;
  user-select: none;
}
.month-genre-chart-legend-item.is-hidden { opacity: .45; text-decoration: line-through; }
.month-genre-chart-legend-swatch {
  width: .75rem;
  height: .75rem;
  border-radius: .125rem;
  flex-shrink: 0;
}
.month-genre-chart-legend-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}