.msb-taste-mix {
    --taste-accent: var(--primary, #1ed760);
    --taste-bg: var(--bg-card, #121212);
    position: relative;
    overflow: hidden;
    margin: 16px 20px 8px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 21px;
    background:
        radial-gradient(circle at 100% 0, rgba(30,215,96,.10), transparent 33%),
        linear-gradient(145deg, rgba(255,255,255,.025), transparent 54%),
        var(--taste-bg);
    box-shadow: 0 14px 34px rgba(0,0,0,.16);
    isolation: isolate;
}
.msb-taste-mix::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 0 66%, rgba(30,215,96,.025) 66% 67%, transparent 67%);
    z-index: -1;
}
.msb-followed-mix + .msb-taste-mix { margin-top: 12px; }
.msb-taste-mix__head {
    position: relative;
    z-index: 1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.msb-taste-mix__identity { display:flex; align-items:center; gap:11px; min-width:0; }
.msb-taste-mix__icon {
    width:44px; height:44px; flex:0 0 44px; border-radius:14px; display:grid; place-items:center;
    color:#06110a; background:linear-gradient(135deg, #55ef88, var(--taste-accent));
    box-shadow:0 7px 20px rgba(30,215,96,.18);
}
.msb-taste-mix__icon i { color:#06110a !important; font-size:17px; }
.msb-taste-mix__copy { min-width:0; }
.msb-taste-mix__title { margin:0; color:var(--text,#fff); font-size:17px; line-height:1.4; font-weight:850; }
.msb-taste-mix__subtitle { margin:3px 0 0; color:var(--text-sec,#969b98); font-size:10.5px; line-height:1.65; }

/* Play all is deliberately identical to followed-artist mix. */
.msb-taste-mix__play-all {
    min-height:40px; padding:0 14px; border:0; border-radius:12px;
    display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:0 0 auto;
    color:#06110a; background:var(--taste-accent); font: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-taste-mix__play-all:hover { transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 9px 22px rgba(30,215,96,.23); }
.msb-taste-mix__play-all:active { transform:scale(.97); }
.msb-taste-mix__play-all[hidden] { display:none; }
.msb-taste-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-taste-mix__playlists { position:relative; z-index:1; min-height:0; display:flex; align-items:center; margin:10px 0 9px; padding-right:3px; }
.msb-taste-mix__playlist {
    width:32px; height:32px; flex:0 0 32px; overflow:hidden; display:grid; place-items:center; margin-left:-6px;
    border:2px solid var(--taste-bg); border-radius:10px; background:#242825; text-decoration:none; transition:transform .18s ease;
}
.msb-taste-mix__playlist:hover { transform:translateY(-2px); z-index:2; }
.msb-taste-mix__playlist img { width:100%; height:100%; object-fit:cover; display:block; }
.msb-taste-mix__playlist-fallback { color:var(--taste-accent); }
.msb-taste-mix__playlist-more { min-width:32px; height:32px; padding:0 7px; display:grid; place-items:center; border-radius:10px; background:#262b28; color:#a8b0ab; font-size:9px; font-weight:850; }

.msb-taste-mix__tracks, .msb-taste-mix__skeleton { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.msb-taste-mix__skeleton[hidden] { display:none; }
.msb-taste-mix__skeleton span { height:64px; border-radius:14px; background:linear-gradient(90deg,#202421 25%,#292e2b 45%,#202421 65%); background-size:220% 100%; animation:msbTastePulse 1.2s linear infinite; }
@keyframes msbTastePulse { to { background-position:-220% 0; } }
.msb-taste-mix__track {
    min-width:0; display:grid; grid-template-columns:46px minmax(0,1fr) 32px; align-items:center; gap:8px; padding:8px;
    border:1px solid rgba(255,255,255,.055); border-radius:14px; background:rgba(255,255,255,.03);
}
.msb-taste-mix__cover { width:46px; height:46px; overflow:hidden; border-radius:10px; background:#242825; }
.msb-taste-mix__cover img { width:100%; height:100%; display:block; object-fit:cover; }
.msb-taste-mix__meta { min-width:0; }
.msb-taste-mix__song, .msb-taste-mix__artist { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.msb-taste-mix__song { color:var(--text,#fff); text-decoration:none; font-size:10.5px; font-weight:800; }
.msb-taste-mix__song:hover { color:var(--taste-accent); }
.msb-taste-mix__artist { margin-top:3px; color:var(--text-sec,#8f9691); font-size:8.8px; }
.msb-taste-mix__track-play {
    width:32px; height:32px; padding:0; display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer;
    color:#06110a; background:var(--taste-accent); box-shadow:0 4px 12px rgba(30,215,96,.10);
}
.msb-taste-mix__track-play i { color:#06110a !important; font-size:10.5px; }

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

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