.msb-followed-mix button,
.msb-followed-mix a,
.msb-followed-mix input { font-family: inherit; }

.msb-followed-mix {
    --msb-mix-accent: var(--primary, #1ed760);
    --msb-mix-bg: var(--bg-card, #121212);
    --msb-mix-soft: var(--hover, #1d1d1d);
    position: relative;
    margin: 28px 20px 8px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 21px;
    background:
        radial-gradient(circle at 7% 0%, rgba(30,215,96,.12), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.025), transparent 54%),
        var(--msb-mix-bg);
    box-shadow: 0 14px 34px rgba(0,0,0,.16);
    isolation: isolate;
}
.msb-followed-mix::before {
    content:"";
    position:absolute;
    inset:auto -70px -100px auto;
    width:210px;
    height:210px;
    border-radius:50%;
    background:rgba(30,215,96,.055);
    pointer-events:none;
    z-index:-1;
}
.msb-followed-mix__head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.msb-followed-mix__identity { display:flex; align-items:center; min-width:0; gap:11px; }
.msb-followed-mix__icon {
    width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:14px;
    color:#07130b; background:linear-gradient(135deg,#55ef88,var(--msb-mix-accent));
    box-shadow:0 7px 20px rgba(30,215,96,.18); font-size:17px;
}
.msb-followed-mix__copy { min-width:0; }
.msb-followed-mix__eyebrow { display:block; margin-bottom:1px; color:var(--msb-mix-accent); font-size:9.5px; font-weight:800; }
.msb-followed-mix__title { margin:0; color:var(--text,#fff); font-size:17px; line-height:1.4; font-weight:850; }
.msb-followed-mix__subtitle { margin:3px 0 0; color:var(--text-sec,#a7a7a7); font-size:10.5px; line-height:1.65; }

/* Play all is deliberately identical to taste mix. */
.msb-followed-mix__play-all {
    min-height:40px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:0 0 auto;
    border:0; border-radius:12px; color:#06110a; background:var(--msb-mix-accent); font-family:inherit; font-size:11px; font-weight:850; line-height:1;
    cursor:pointer; box-shadow:0 7px 18px rgba(30,215,96,.18);
    transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.msb-followed-mix__play-all:hover { transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 9px 22px rgba(30,215,96,.23); }
.msb-followed-mix__play-all:active { transform:scale(.97); }
.msb-followed-mix__play-all[hidden] { display:none; }
.msb-followed-mix__play-all.is-playing { box-shadow:0 0 0 3px rgba(30,215,96,.10), 0 7px 18px rgba(30,215,96,.18); }

.msb-followed-mix__artists { min-height:0; display:flex; align-items:center; gap:0; margin:-1px 0 10px; }
.msb-followed-mix__artist {
    width:32px; height:32px; display:block; overflow:hidden; border:2px solid var(--msb-mix-bg); border-radius:50%;
    background:var(--msb-mix-soft); box-shadow:0 3px 9px rgba(0,0,0,.26); transition:transform .18s ease,z-index .18s ease;
}
.msb-followed-mix__artist + .msb-followed-mix__artist { margin-right:-7px; }
.msb-followed-mix__artist:hover { transform:translateY(-2px) scale(1.05); z-index:3; }
.msb-followed-mix__artist img { width:100%; height:100%; object-fit:cover; display:block; }
.msb-followed-mix__artist-more { margin-right:8px; color:var(--text-sec,#aaa); font-size:9.5px; font-weight:750; }

.msb-followed-mix__tracks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.msb-followed-mix__track {
    min-width:0; padding:8px; display:grid; grid-template-columns:46px minmax(0,1fr) 32px; align-items:center; gap:8px;
    border:1px solid rgba(255,255,255,.055); border-radius:14px; background:rgba(255,255,255,.03);
    transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.msb-followed-mix__track:hover { transform:translateY(-1px); background:rgba(255,255,255,.05); border-color:rgba(30,215,96,.24); }
.msb-followed-mix__cover { position:relative; width:46px; height:46px; overflow:hidden; border-radius:10px; background:#202020; }
.msb-followed-mix__cover img { width:100%; height:100%; object-fit:cover; display:block; }
.msb-followed-mix__meta { min-width:0; }
.msb-followed-mix__song,.msb-followed-mix__singer { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.msb-followed-mix__song { color:var(--text,#fff); font-size:10.5px; font-weight:800; text-decoration:none; }
.msb-followed-mix__song:hover { color:var(--msb-mix-accent); }
.msb-followed-mix__singer { margin-top:3px; color:var(--text-sec,#999); font-size:8.8px; }
.msb-followed-mix__track-play {
    width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:50%; color:#061109; background:var(--msb-mix-accent); cursor:pointer;
    transition:transform .16s ease,filter .16s ease;
}
.msb-followed-mix__track-play:hover { transform:scale(1.06); filter:brightness(1.05); }
.msb-followed-mix__track-play:active { transform:scale(.94); }
.msb-followed-mix__track-play i { font-size:10.5px; margin-left:1px; }

/* Compact access/empty state: integrated into main card. */
.msb-followed-mix__state {
    min-height:0; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:10px;
    padding:10px 2px 0; border-top:1px solid rgba(255,255,255,.065); border-radius:0;
    color:var(--text-sec,#aaa); background:transparent; text-align:right;
}
.msb-followed-mix__state[hidden] { display:none; }
.msb-followed-mix__state > i { width:30px; color:var(--msb-mix-accent); font-size:17px; text-align:center; }
.msb-followed-mix__state > div {
    min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:10px; align-items:center;
}
.msb-followed-mix__state strong { grid-column:1; display:block; color:var(--text,#fff); font-size:11.5px; line-height:1.5; margin:0; }
.msb-followed-mix__state p { grid-column:1; margin:2px 0 0; font-size:9.5px; line-height:1.55; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.msb-followed-mix__cta {
    grid-column:2; grid-row:1 / span 2; align-self:center; display:inline-flex; align-items:center; justify-content:center; gap:6px;
    margin:0; min-height:32px; padding:0 11px; border:1px solid rgba(30,215,96,.22); border-radius:10px;
    background:rgba(30,215,96,.08); color:var(--msb-mix-accent); text-decoration:none; font-size:9.5px; font-weight:850; white-space:nowrap;
}
.msb-followed-mix.is-compact-state { padding-bottom:13px; }
.msb-followed-mix.is-compact-state .msb-followed-mix__head { margin-bottom:8px; min-height:44px; }
.msb-followed-mix.is-compact-state .msb-followed-mix__subtitle { margin-top:2px; }

.msb-followed-mix__skeleton { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.msb-followed-mix__skeleton[hidden] { display:none; }
.msb-followed-mix__skeleton-item { height:64px; border-radius:14px; background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.07),rgba(255,255,255,.03)); background-size:220% 100%; animation:msbMixShimmer 1.25s linear infinite; }
@keyframes msbMixShimmer { to { background-position:-220% 0; } }

@media (max-width:1180px) {
    .msb-followed-mix__tracks,.msb-followed-mix__skeleton { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:850px) {
    .msb-followed-mix { margin:18px 12px 7px; padding:13px; border-radius:18px; }
    .msb-followed-mix__head { gap:9px; margin-bottom:10px; }
    .msb-followed-mix__icon { width:39px; height:39px; flex-basis:39px; border-radius:12px; }
    .msb-followed-mix__title { font-size:15px; }
    .msb-followed-mix__eyebrow { font-size:8.8px; }
    .msb-followed-mix__subtitle { font-size:9.5px; }
    .msb-followed-mix__tracks,.msb-followed-mix__skeleton { display:flex; gap:7px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:2px; }
    .msb-followed-mix__tracks::-webkit-scrollbar,.msb-followed-mix__skeleton::-webkit-scrollbar { display:none; }
    .msb-followed-mix__track,.msb-followed-mix__skeleton-item { min-width:min(80vw,286px); scroll-snap-align:start; }
}
@media (max-width:560px) {
    .msb-followed-mix__play-all { min-height:38px; width:38px; padding:0; border-radius:11px; }
    .msb-followed-mix__play-all span { display:none; }
    .msb-followed-mix__artist { width:29px; height:29px; }
    .msb-followed-mix__state { padding-top:8px; grid-template-columns:26px minmax(0,1fr); gap:7px; }
    .msb-followed-mix__state > i { width:26px; font-size:15px; }
    .msb-followed-mix__state strong { font-size:10.5px; }
    .msb-followed-mix__state p { display:none; }
    .msb-followed-mix__state > div { grid-template-rows:auto; }
    .msb-followed-mix__cta { grid-row:1; min-height:30px; padding:0 9px; border-radius:9px; font-size:9px; }
    .msb-followed-mix.is-compact-state { padding-bottom:11px; }
}
@media (prefers-reduced-motion:reduce) {
    .msb-followed-mix *, .msb-followed-mix *::before, .msb-followed-mix *::after { animation:none !important; transition:none !important; }
}
.msb-followed-mix__retry { appearance:none; font-family:inherit; cursor:pointer; }