/* Header music player (7 Oct 2026) */
.np { position: relative; display: inline-flex; align-items: center; margin-left: var(--spacing-md, 1rem); vertical-align: middle; --np-a: #00ff88; --np-b: #8bd3ff; }
.np-pill { display: inline-flex; align-items: center; gap: .35rem; height: 36px; padding: 0 .35rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(10,14,20,.7); }
.np.active .np-pill { border-color: rgba(0,255,136,.35); }
.np-btn { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 0; background: transparent; color: #e6edf3; display: grid; place-items: center; cursor: pointer; padding: 0; }
.np-btn svg { width: 16px; height: 16px; fill: currentColor; }
.np-btn:hover { background: rgba(255,255,255,.08); }
.np-btn:focus-visible, .np-title:focus-visible { outline: 2px solid var(--np-a); outline-offset: 2px; }
.np-btn.main { background: var(--np-a); color: #04150c; }
.np-btn.main:hover { filter: brightness(1.1); background: var(--np-a); }
.np-title { max-width: 190px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .8rem; color: #cbd5e1; background: none; border: 0; cursor: pointer; padding: 0 .2rem; font: inherit; font-size: .8rem; text-align: left; }
.np:not(.active) .np-title, .np:not(.active) .np-eq { display: none; }
.np-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; width: 14px; }
.np-eq i { flex: 1; background: var(--np-a); border-radius: 1px; height: 30%; }
.np.playing .np-eq i { animation: np-eq 1s ease-in-out infinite; }
.np.playing .np-eq i:nth-child(2) { animation-delay: .2s; } .np.playing .np-eq i:nth-child(3) { animation-delay: .4s; }
@keyframes np-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.np-resume { display: none; font-size: .78rem; color: var(--np-a); border: 1px solid rgba(0,255,136,.4); border-radius: 999px; padding: .2rem .6rem; background: transparent; cursor: pointer; white-space: nowrap; }
.np.can-resume .np-resume { display: inline-block; }

.np-panel { --np-a: #00ff88; --np-b: #8bd3ff; position: fixed; z-index: 1200; width: 360px; max-height: min(560px, calc(100vh - 100px)); display: flex; flex-direction: column; border-radius: 16px;
  background: #0d131b; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px -20px rgba(0,0,0,.85); overflow: hidden; color: #e6edf3; }
.np-panel[hidden] { display: none; }
.np-now { padding: 1rem 1rem .8rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.np-now .k { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--np-a); font-weight: 700; }
.np-now b { display: block; margin: .25rem 0 .1rem; font-size: 1rem; line-height: 1.3; }
.np-now .sub { color: #94a3b8; font-size: .8rem; }
.np-now .sub a { color: var(--np-b); text-decoration: none; }
.np-now .sub a:hover { text-decoration: underline; }
.np-seek { margin: .7rem 0 .2rem; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); cursor: pointer; position: relative; }
.np-seek i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--np-a); }
.np-seek:focus-visible { outline: 2px solid var(--np-a); outline-offset: 3px; }
.np-times { display: flex; justify-content: space-between; font-size: .72rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.np-ctl { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .4rem; }
.np-ctl .np-btn { width: 36px; height: 36px; } .np-ctl .np-btn.main { width: 44px; height: 44px; } .np-ctl .np-btn svg { width: 18px; height: 18px; }
.np-vol { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; color: #94a3b8; }
.np-vol svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.np-vol input { flex: 1; accent-color: var(--np-a); }
.np-list { overflow-y: auto; padding: .4rem 0 .6rem; }
.np-group { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; padding: .7rem 1rem .3rem; font-weight: 700; display: flex; justify-content: space-between; }
.np-group a { color: var(--np-b); text-transform: none; letter-spacing: 0; font-weight: 600; text-decoration: none; }
.np-item { display: flex; width: 100%; align-items: center; gap: .6rem; padding: .45rem 1rem; border: 0; background: none; color: #e6edf3; font: inherit; font-size: .86rem; text-align: left; cursor: pointer; }
.np-item:hover, .np-item:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.np-item .n { width: 1.4rem; color: #64748b; font-size: .75rem; font-variant-numeric: tabular-nums; text-align: right; flex: none; }
.np-item .t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.np-item .d { color: #64748b; font-size: .75rem; }
.np-item.on { color: var(--np-a); } .np-item.on .n { color: var(--np-a); }
.np-foot { border-top: 1px solid rgba(255,255,255,.08); padding: .6rem 1rem; font-size: .8rem; display: flex; justify-content: space-between; }
.np-foot a { color: var(--np-b); text-decoration: none; }

@media (max-width: 768px) {
  .np { margin-left: auto; margin-right: var(--spacing-sm, .5rem); }
  .np-title { max-width: 110px; }
  .np-pill .np-prev, .np-pill .np-next { display: none; }
  .np-panel { left: 8px !important; right: 8px !important; width: auto; top: auto !important; bottom: 8px; max-height: 75vh; }
}
@media (max-width: 420px) { .np-title { max-width: 70px; } }
@media (prefers-reduced-motion: reduce) { .np.playing .np-eq i { animation: none; height: 70%; } }