.dbm-chart { margin: 1.5rem 0; 
	--dbm-bg-blur: 18px;
	--dbm-bg-brightness: 0.6; /* 1 = no dim, lower = darker */
	--dbm-bg-saturate: 0.85;  /* 1 = original, lower = desat */
	--dbm-bg-opacity: 0.45;   /* overall visibility */
}
.dbm-chart-title { margin: 0 0 .25rem; }
.dbm-chart-week { color: #666; margin-bottom: .5rem; }
.dbm-chart-list { list-style: none; padding: 0; margin: 0; counter-reset: dbm-rank; }
.dbm-chart-item { position: relative; display: flex; align-items: center; gap: .75rem; padding: .75rem .5rem; border-bottom: 1px solid #eee; overflow: hidden; width: 100%; }
/* Softened blurred cover background */
.dbm-chart-item .dbm-bg { position: absolute; inset: 0; background-size: cover; background-position: center; 
	filter: blur(var(--dbm-bg-blur)) saturate(var(--dbm-bg-saturate)) brightness(var(--dbm-bg-brightness)) contrast(0.95);
	transform: scale(1.08);
	opacity: var(--dbm-bg-opacity);
}
/* Gentle left-to-right shading for readability */
.dbm-chart-item::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.14), rgba(0,0,0,.08) 30%, rgba(255,255,255,0) 65%);
}
.dbm-chart-item > *:not(.dbm-bg) { position: relative; z-index: 1; }
.dbm-cover { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px #ddd inset; }
.dbm-rank { display: inline-flex; width: 32px; height: 24px; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; font-weight: 700; color: #111; text-align: center; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px; }
.dbm-titlecol { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.dbm-titleline { display: flex; min-width: 0; align-items: baseline; flex-wrap: wrap; gap: .25rem; }
.dbm-submeta { color:#6b7280; font-size:.8rem; line-height:1.2; margin-top:.1rem; }
.dbm-artist { font-weight: 600; color: #222; }
.dbm-track { color: #333; }
.dbm-sep { color: #888; margin: 0 .25rem; }
.dbm-links { display: inline-flex; gap: .5rem; }
.dbm-links { margin-left: auto; }
.dbm-link { font-size: .85rem; text-decoration: none; padding: .1rem .4rem; border-radius: 3px; border: 1px solid transparent; }
.dbm-spotify { background: #1DB95414; color: #0a5; border-color: #1DB95433; }
.dbm-youtube { background: #FF000014; color: #c00; border-color: #FF000033; }
.dbm-meta { display: inline-flex; gap: .35rem; align-items: center; margin-left: .5rem; }
.dbm-badge { display: inline-block; font-size: .75rem; line-height: 1; padding: .2rem .35rem; border-radius: 3px; border: 1px solid transparent; }
.dbm-badge-new { background: #E6FFEF; color: #137333; border-color: #b5ebc7; }
.dbm-badge-up { background: #E7F6EC; color: #0E7C3A; border-color: #b9e5c9; }
.dbm-badge-down { background: #FDECEC; color: #B00020; border-color: #f5c2c7; }
.dbm-badge-re { background: #EEF2FF; color: #3F51B5; border-color: #c7cff5; }
.dbm-isrc { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .75rem; color: #555; }
.dbm-delta { display:inline-block; font-size:.75rem; padding:.1rem .3rem; border-radius:3px; border:1px solid transparent; }
.dbm-delta-up { color:#0E7C3A; background:#E7F6EC; border-color:#b9e5c9; }
.dbm-delta-down { color:#B00020; background:#FDECEC; border-color:#f5c2c7; }
.dbm-delta-same { color:#666; background:#f3f4f6; border-color:#e5e7eb; }

/* Play button + equalizer */
.dbm-play { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #e5e7eb; background: #fff8; backdrop-filter: blur(4px); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-right: .25rem; }
.dbm-play:hover { background: #fff; }
.dbm-eq { width: 14px; height: 12px; display: inline-flex; gap: 2px; }
.dbm-eq i { width: 3px; background: #0E7C3A; height: 20%; animation: dbm-eq 1s infinite ease-in-out; }
.dbm-eq i:nth-child(2){ animation-delay:.15s }
.dbm-eq i:nth-child(3){ animation-delay:.3s }
@keyframes dbm-eq { 0%,100%{ height:20% } 50%{ height:90% } }
.dbm-chart-item:not(.is-playing) .dbm-eq i { height: 35%; opacity: .7; animation-play-state: paused; }

.dbm-chart-archive-list { list-style: none; padding: 0; }
.dbm-chart-archive-list li { padding: .25rem 0; }
.dbm-archive-meta { color: #666; }

/* Mobile: tone the background down a bit more */
@media (max-width: 640px) {
	.dbm-chart { --dbm-bg-opacity: 0.35; --dbm-bg-blur: 16px; --dbm-bg-brightness: 0.65; }
	.dbm-chart-item::before { background: linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,.06) 35%, rgba(255,255,255,0) 70%); }
}

/* Admin table */
.dbm-entries-table { table-layout: auto; }
.dbm-entries-table th { white-space: nowrap; }
.dbm-entries-table td { vertical-align: top; }
.dbm-entries-table .dbm-rank-cell { width: 60px; }
.dbm-entries-table .dbm-entry-row-2 td { border-top: none; }
.dbm-entries-table .dbm-entry-row-1 td { border-top: 1px solid #ddd; }
.dbm-cover-wrap { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #fafafa; border: 1px dashed #ddd; margin-bottom: .25rem; overflow: hidden; }
.dbm-cover-preview { max-width: 100%; max-height: 100%; display: block; }
.dbm-cover-input .button { margin-top: .25rem; margin-right: .25rem; }
.dbm-status-select { width: 100%; }

/* Spotify search results */
.dbm-spotify-tools { margin-top: .25rem; }
.dbm-spotify-results { position: relative; margin-top: .25rem; }
.dbm-spotify-results-inner { position: absolute; z-index: 9999; background: #fff; border: 1px solid #ddd; box-shadow: 0 6px 18px rgba(0,0,0,.08); width: 420px; max-width: calc(100vw - 80px); max-height: 360px; overflow: auto; padding: .5rem; }
.dbm-spotify-list { list-style: none; margin: 0; padding: 0; }
.dbm-spotify-item { display: grid; grid-template-columns: 48px 1fr; gap: .5rem; align-items: center; padding: .35rem; border-radius: 4px; cursor: pointer; }
.dbm-spotify-item:hover { background: #f6f7f7; }
.dbm-spotify-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.dbm-spotify-actions { margin-top: .25rem; text-align: right; }