/* Nexus Music — disposicao B (prateleiras) escolhida pelo Daniel em 11/11/2026; "tocando agora" = cinema igual ao News (opcao A de 11/11).
   Mesmo padrao do Trending: vidro e degrade, verde so na palavra MUSIC e no ponto da faixa tocando. 960x540 ampliado. */
@font-face{font-family:Space;src:url("../design/fonts/SpaceGrotesk-Regular.ttf");font-weight:400}
@font-face{font-family:Space;src:url("../design/fonts/SpaceGrotesk-Medium.ttf");font-weight:500}
@font-face{font-family:Space;src:url("../design/fonts/SpaceGrotesk-SemiBold.ttf");font-weight:600}
@font-face{font-family:Space;src:url("../design/fonts/SpaceGrotesk-Bold.ttf");font-weight:700}
@font-face{font-family:Barlow;src:url("../design/fonts/BarlowCondensed-ExtraBold.ttf");font-weight:800}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#050607;color:#fff;font-family:Space,sans-serif}
button,input{font:inherit;color:inherit;background:none;border:0;text-align:left}
button{cursor:pointer}
[hidden]{display:none!important}
.tela{--ac:#b7ff3c;width:960px;height:540px;position:absolute;left:50%;top:50%;transform-origin:0 0;overflow:hidden;display:flex;flex-direction:column;
 background:radial-gradient(120% 90% at 12% 0%,#1a2530 0%,#0a0d11 52%,#050607 100%)}
/* selecionado: vidro fume, igual ao News e ao player (pedido do Daniel 11/11). So o fundo clareia. */
.foco{outline:none;position:relative;isolation:isolate;border-radius:10px}
.foco::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .24s cubic-bezier(.2,.8,.2,1);pointer-events:none;
 background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.foco:focus::before{opacity:1}
/* cartoes ja sao de vidro: em foco, borda clara fina e leve levantar (como os cartoes do player, sem o anel verde) */
.cd{transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .24s,box-shadow .24s}
.cd:focus{border-color:rgba(255,255,255,.6);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.4)}
/* barra de cima: a mesma do Trending (discreta, sem negrito, aba ativa em pilula suave) */
.top{height:46px;flex:none;display:flex;align-items:center;gap:14px;padding:0 24px}
.marca{display:flex;align-items:center;gap:8px;flex:none;margin-right:8px}.marca img{height:17px;width:auto}
.marca b{display:block;font:500 12.5px/1 Space;letter-spacing:3.6px;color:#eef1f3}
.marca span{display:block;font:400 6px/1 Space;letter-spacing:3.9px;color:var(--ac);opacity:.85;margin-top:3px}
.abas{display:flex;gap:4px;flex:1}
.abas button{font:400 11.5px Space;color:rgba(255,255,255,.5);padding:5px 10px;border-radius:8px}
.abas button.on{color:#fff;background:rgba(255,255,255,.05)}
.hora{font:400 15px Space;letter-spacing:-.2px;font-variant-numeric:tabular-nums;color:#eef1f3}
.vidro{border-radius:10px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
 -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.capa{display:block;border-radius:8px;flex:none;background:#10161c center/cover no-repeat}
.sub{font:700 10px Space;letter-spacing:1.6px;color:#9aa3ad;text-transform:uppercase}
.barra{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.18);position:relative}
.barra b{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:#fff}
.tempo{display:flex;justify-content:space-between;font:600 10px Space;color:#9aa3ad;margin-top:5px}
.pagina{flex:1;min-height:0;padding:10px 14px 0;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.aviso{font:400 13px Space;color:#9aa3ad}

/* inicio: prateleiras */
#p-inicio{overflow-y:auto;scrollbar-width:none}
.fx{display:flex;gap:10px;flex:none}
.cd{width:124px;flex:none;padding:7px;border-radius:9px}
.cd .capa{width:110px;height:110px}
.cd b{display:block;font:600 11.5px/1.2 Space;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd small{font:400 10px Space;color:#9aa3ad}

/* listas de faixas */
.lista{display:flex;flex-direction:column;gap:1px;overflow-y:auto;min-height:0;scrollbar-width:none}
.lin{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:7px;width:100%;flex:none}
.lin .capa{width:36px;height:36px;border-radius:5px}
.lin span{min-width:0}
.lin b{display:block;font:600 12.5px Space;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lin small{display:block;font:400 10.5px Space;color:#9aa3ad;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lin.toca{background:rgba(255,255,255,.10)}
.lin.toca b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ac);margin-right:6px}
.campo{height:40px;padding:0 14px;font:600 15px Space;flex:none}
input::placeholder{color:#7d8791}
/* busca sempre a vista no topo (opcao A do topo, escolha do Daniel 11/11) */
#q{height:28px;width:230px;flex:none;padding:0 11px 0 30px;border-radius:14px;font:400 11.5px Space;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3ad' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") 10px center/13px no-repeat,
 linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.fx.vol{flex-wrap:wrap;overflow-y:auto;scrollbar-width:none}

/* tocando agora */
/* opcao A (escolha do Daniel 11/11): cinema igual ao News. Foto que se desfaz no fundo, texto e controles no degrade, fila a direita. */
.ft,.veu{position:absolute;opacity:0;transition:opacity .7s ease;pointer-events:none}
.ft{left:0;top:0;right:250px;bottom:0;background:center 18%/cover no-repeat;
 -webkit-mask-image:linear-gradient(90deg,#000 58%,transparent 100%),linear-gradient(180deg,#000 58%,transparent 100%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,#000 58%,transparent 100%),linear-gradient(180deg,#000 58%,transparent 100%);mask-composite:intersect}
.veu{top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(5,6,7,.55) 0%,rgba(5,6,7,0) 16%),
 linear-gradient(90deg,rgba(5,6,7,.9) 0%,rgba(5,6,7,.62) 30%,rgba(5,6,7,.05) 56%,rgba(5,6,7,0) 100%),
 linear-gradient(0deg,rgba(5,6,7,.95) 0%,rgba(5,6,7,.7) 22%,rgba(5,6,7,0) 48%)}
.tela.cine{background:#050607}
.cine .ft,.cine .veu{opacity:1}
.top{position:relative;z-index:3}
.a{position:relative;z-index:2;padding:0}
.agora{position:absolute;left:28px;bottom:26px;width:560px}
h2{font:800 38px/1 Barlow;text-transform:uppercase;letter-spacing:.3px;margin-top:10px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.art{font:400 15px Space;color:#cfd5db;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog{margin:24px 0 18px}
.ctl{display:flex;align-items:center;gap:8px}
.bt{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.bt svg{width:22px;height:22px;fill:none;stroke:#e6eaee;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bt.on{background:rgba(255,255,255,.16)}
.bt.on svg{stroke:#fff}
#b-co.on svg{fill:#fff}
.bt.fim{margin-left:auto}
.pp{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3);
 background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.08))}
.pp svg{width:22px;height:22px;fill:#fff}
.fila{position:absolute;right:14px;top:14px;bottom:26px;width:232px;display:flex;flex-direction:column;gap:4px;min-height:0}
.fila .sub{padding:0 8px 4px}

/* barra do som */
.mini{height:58px;flex:none;margin:8px 10px 10px;display:flex;align-items:center;gap:12px;padding:0 14px}
.mini .capa{width:40px;height:40px;border-radius:5px}
.mini .abre{display:flex;align-items:center;gap:12px;padding:4px;border-radius:8px}
.mini .bt{flex:none}
#m-pp svg{fill:#fff;stroke:none}
.mtx{width:230px;min-width:0}
.mtx b{display:block;font:600 13px Space;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtx b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ac);margin-right:6px}
.mtx small{display:block;font:400 10.5px Space;color:#9aa3ad;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meio{flex:1}
.mest{font:600 10.5px Space;color:#9aa3ad;width:120px;text-align:right}