/* ISA Music: Musical Genius videos and its weekly Billboard, shown inside the ISA player frame. */
.live-actions { display: flex; align-items: center; gap: 8px; }
.music-btn { font: 600 .74rem var(--hud); letter-spacing: .1em; text-transform: uppercase; color: var(--white); background: rgba(3,6,15,.55); border: 1px solid rgba(246,248,255,.3); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.music-btn:hover { border-color: var(--white); }
.music-btn[aria-pressed="true"] { background: #7a5cff; border-color: #7a5cff; }
.music { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #07031a; display: flex; flex-direction: column; color: var(--white); }
.music[hidden] { display: none; }
.m-head { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: linear-gradient(90deg, rgba(224,123,255,.22), rgba(61,139,255,.2)); border-bottom: 1px solid rgba(246,248,255,.14); }
.m-brand { font: 700 .72rem var(--hud); letter-spacing: .12em; text-transform: uppercase; margin-right: auto; white-space: nowrap; background: linear-gradient(120deg, #e07bff, #7fa4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-tab, .m-back { font: 600 .72rem var(--hud); letter-spacing: .06em; color: var(--white); background: rgba(3,6,15,.55); border: 1px solid rgba(246,248,255,.26); border-radius: 999px; padding: 4px 11px; cursor: pointer; white-space: nowrap; }
.m-tab[aria-selected="true"] { background: #7a5cff; border-color: #7a5cff; }
.m-tab:hover, .m-back:hover { border-color: var(--white); }
.m-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.m-video { position: relative; flex: 1; min-height: 0; }
.m-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; color-scheme: dark; }
.m-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(3,6,15,.7); font-size: .78rem; }
.m-bar .m-info { flex: 1; min-width: 0; line-height: 1.25; }
.m-bar .m-info b, .m-bar .m-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-bar .m-info span { color: var(--mist); font-size: .72rem; }
.m-step { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(246,248,255,.3); background: rgba(3,6,15,.55); color: var(--white); cursor: pointer; font-size: 1rem; line-height: 1; }
.m-step:hover { border-color: var(--white); }
.m-week { flex: none; margin: 0; padding: 6px 10px 2px; font: 600 .7rem var(--hud); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.m-list { flex: 1; min-height: 0; margin: 0; padding: 2px 6px 6px; list-style: none; overflow-y: auto; scrollbar-width: thin; }
.m-row { width: 100%; display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--white); cursor: pointer; text-align: left; font: inherit; }
.m-row:hover { background: rgba(255,255,255,.08); }
.m-row[aria-current="true"] { background: rgba(122,92,255,.28); }
.m-row .rk { font: 700 .86rem var(--hud); text-align: center; }
.m-row img { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; background: #1a0b36; }
.m-row .tx { min-width: 0; line-height: 1.2; }
.m-row .tx b, .m-row .tx span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-row .tx b { font-size: .8rem; } .m-row .tx span { font-size: .7rem; color: var(--mist); }
.m-row .mv { font: 700 .66rem var(--hud); padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.12); }
.m-row .mv.up { color: #7dffb2; } .m-row .mv.down { color: #ff8fa3; } .m-row .mv.new { background: #7a5cff; }
.m-now { flex: none; height: 126px; border-top: 1px solid rgba(246,248,255,.14); }
.m-now iframe { width: 100%; height: 100%; border: 0; background: #10001f; color-scheme: dark; }
.m-empty { margin: auto; padding: 14px 22px; text-align: center; max-width: 36ch; line-height: 1.5; font-size: .86rem; color: var(--mist); }
.m-empty b { display: block; color: var(--white); font: 700 1rem var(--hud); margin-bottom: 4px; }
.m-empty a { color: var(--white); text-underline-offset: 3px; }
@media (max-width: 700px) { .m-brand { display: none; } .m-now { height: 112px; } .m-row { grid-template-columns: 20px 32px minmax(0, 1fr) auto; } .m-row img { width: 32px; height: 32px; } }