.msb-media-hub { --msb-dark:#101114; --msb-red:#c8102e; background:#fff; border:1px solid #e3e3e3; border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.08); margin:20px 0; }
.msb-media-header { background:linear-gradient(135deg,var(--msb-dark),#26282d); color:#fff; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:18px 22px; border-bottom:4px solid var(--msb-red); }
.msb-media-header h2 { color:#fff; margin:2px 0 0; font-size:clamp(22px,3vw,34px); line-height:1.1; }
.msb-media-kicker { font-size:11px; letter-spacing:.16em; font-weight:800; color:#ffb2bd; }
.msb-media-brand { font-size:12px; font-weight:700; text-transform:uppercase; text-align:right; }
.msb-media-player-wrap { position:relative; aspect-ratio:16/9; background:#000; }
.msb-media-player { width:100%; height:100%; border:0; display:block; }
.msb-media-sound { position:absolute; left:16px; bottom:16px; z-index:2; border:0; border-radius:999px; background:rgba(0,0,0,.82); color:#fff; font-weight:800; padding:10px 15px; cursor:pointer; }
.msb-media-current { padding:14px 18px; display:flex; flex-direction:column; gap:3px; border-bottom:1px solid #ececec; }
.msb-media-current-title { font-size:17px; line-height:1.3; }
.msb-media-current-team { color:#666; font-size:13px; font-weight:700; }
.msb-media-playlist { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; background:#f7f7f7; }
.msb-media-video { appearance:none; background:transparent; border:0; border-right:1px solid #ddd; padding:0 0 12px; cursor:pointer; text-align:left; min-width:0; }
.msb-media-video:last-child { border-right:0; }
.msb-media-video.is-active { background:#fff; box-shadow:inset 0 -4px 0 var(--msb-red); }
.msb-media-thumb { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#ddd; }
.msb-media-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s ease; }
.msb-media-video:hover img { transform:scale(1.04); }
.msb-media-play-icon { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.72); color:#fff; font-size:14px; }
.msb-media-meta { display:block; padding:10px 11px 0; }
.msb-media-meta strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; line-height:1.3; color:#111; }
.msb-media-meta small { display:block; margin-top:5px; color:#666; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msb-media-empty { padding:16px; background:#fff3cd; border:1px solid #ffecb5; }
@media(max-width:900px){ .msb-media-playlist{grid-template-columns:repeat(2,minmax(0,1fr))}.msb-media-video{border-bottom:1px solid #ddd}.msb-media-brand{display:none} }
@media(max-width:520px){ .msb-media-header{padding:15px}.msb-media-playlist{display:flex;overflow-x:auto}.msb-media-video{min-width:76%;border-right:1px solid #ddd}.msb-media-current{padding:12px 15px} }