/* Artist system - home page "Top Artist" pills, "Featured Remixer" list, artist pages */
.ab-bar{background:var(--primary,#5a4fc4);color:var(--on-primary,#fff);text-align:center;font-weight:700;font-size:calc(14px*var(--ts,1));padding:7px 10px;line-height:1.35;margin:0}
.ab-bar i{margin-right:4px}
.ab-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 6px;padding:12px 8px;background:var(--surface,#fff)}
.ab-pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:calc(10px*var(--ts,1));font-weight:700;line-height:1.5;text-decoration:none;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.18);transition:transform .12s,filter .12s}
.ab-pill:hover{transform:translateY(-1px);filter:brightness(1.12)}
.ab-list{background:var(--surface,#fff)}
.ab-row{display:flex;align-items:center;gap:6px;padding:0 8px 0 0;min-height:62px;border-bottom:1px solid var(--border,#e4e4ee);background:var(--surface,#fff);text-decoration:none;color:var(--primary,#5a4fc4)}
.ab-row:hover{background:var(--surface2,#f6f5fd)}
.ab-ph{flex:0 0 50px;width:50px;height:50px;border:1px solid var(--border,#9a9aa8);background:#111;display:block;overflow:hidden;margin:6px 0 6px 0}
.ab-ph img{width:50px;height:50px;object-fit:cover;display:block}
.ab-tx{display:flex;flex-direction:column;gap:2px;min-width:0;padding-left:4px}
.ab-nm{font-size:calc(12px*var(--ts,1));font-weight:700;color:var(--primary,#4a43c4);word-break:break-word}
.ab-ct{font-size:calc(10px*var(--ts,1));color:var(--text,#222)}
.ab-tg{font-size:calc(10px*var(--ts,1));font-style:italic;font-weight:700;color:#c8102e}
.ab-more{text-align:center;padding:9px 8px;background:var(--surface,#fff);font-weight:700;font-size:calc(13px*var(--ts,1))}
.ab-more a{color:var(--primary,#5a4fc4)}
.ab-hero{text-align:center;padding:14px 8px 4px;background:var(--surface,#fff)}
.ab-hero img{width:130px;height:130px;object-fit:cover;border:1px solid var(--border,#bbb);border-radius:6px;padding:1px;box-shadow:0 1px 4px rgba(0,0,0,.25);background:#111}
.ab-hero .ab-hn{display:block;margin-top:8px;font-weight:800;font-size:calc(15px*var(--ts,1));color:var(--primary,#5a4fc4)}
.ab-hero .ab-hc{display:block;font-size:calc(11px*var(--ts,1));color:var(--text,#222)}

/* v29: bigger text + automatic ranking (serial 1,2,3 by downloads) */
.ab-bar{font-size:calc(15px*var(--ts,1))}
.ab-pill{font-size:calc(12px*var(--ts,1));padding:5px 12px}
.ab-nm{font-size:calc(14.5px*var(--ts,1))}
.ab-ct{font-size:calc(12.5px*var(--ts,1))}
.ab-tg{font-size:calc(12px*var(--ts,1))}
.ab-more{font-size:calc(14px*var(--ts,1))}
.ab-row{min-height:66px}
.ab-no{flex:0 0 30px;height:30px;margin-left:8px;border-radius:50%;background:var(--surface2,#eee);color:var(--text,#222);font-weight:800;font-size:calc(14px*var(--ts,1));display:flex;align-items:center;justify-content:center}
.ab-row.rk1 .ab-no{background:#f5b50a;color:#fff}.ab-row.rk2 .ab-no{background:#9aa3ad;color:#fff}.ab-row.rk3 .ab-no{background:#c27a3a;color:#fff}
.ab-dl{color:#0b6fd1;font-weight:700}
.ab-row:not(.rk1):not(.rk2):not(.rk3):not(.rkx) .ab-ph{margin-left:8px}
.ab-row .ab-ph{margin-left:6px}

/* v31: look of the DjDunia reference - big square photo, bold name, black MP3 count, red italic label, [More...] button */
.ab-row{min-height:84px;padding:0 8px;gap:9px;font-family:Arial,Helvetica,sans-serif}
.ab-row .ab-ph,.ab-row:not(.rk1):not(.rk2):not(.rk3):not(.rkx) .ab-ph{position:relative;flex:0 0 70px;width:70px;height:70px;margin:7px 0;border:1px solid #444;border-radius:4px;background:#fff;overflow:visible}
.ab-ph img{width:100%;height:100%;border-radius:3px;object-fit:cover}
.ab-ph .ab-no{position:absolute;left:-4px;top:-4px;margin:0;flex:none;width:22px;height:22px;font-size:calc(12px*var(--ts,1));border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35);z-index:2}
.ab-tx{gap:3px;padding-left:0}
.ab-nm{font-size:calc(15px*var(--ts,1));font-weight:700;color:var(--primary,#3300c4)}
.ab-ct{font-size:calc(14px*var(--ts,1));color:#111}
.ab-ct .ab-dl{font-size:calc(12.5px*var(--ts,1));font-weight:600;margin-left:6px}
.ab-tg{font-size:calc(12.5px*var(--ts,1));font-style:italic;font-weight:700;color:#d0021b}
.ab-more{text-align:left;padding:7px 8px;border-bottom:1px solid var(--border,#e4e4ee)}
.ab-more a{display:inline-block;background:var(--primary,#3300c4);color:#fff!important;font-weight:700;font-size:calc(13px*var(--ts,1));padding:6px 12px;border-radius:6px;text-decoration:none}

/* v32: blinking red label */
@keyframes abxBlink{0%,49%{opacity:1}50%,100%{opacity:.15}}
.ab-tg{animation:abxBlink 1s steps(1,end) infinite}
@media (prefers-reduced-motion:reduce){.ab-tg{animation:none}}
