:root{
  --ofm-neon:#26ff7a;
  --ofm-text:#e9fff2;
  --ofm-muted: rgba(233,255,242,.72);
  --ofm-glass: rgba(10,18,16,.35);
  --ofm-stroke: rgba(38,255,122,.22);
  --ofm-radius: 18px;
  --ofm-shadow: 0 0 24px rgba(38,255,122,.18), 0 0 90px rgba(0,255,85,.08);
  --ofm-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.ofm-np, .ofm-player, .ofm-tracks{
  font-family: var(--ofm-font);
}
.ofm-np{
  border:1px solid var(--ofm-stroke);
  background: linear-gradient(180deg, rgba(10,18,16,.55), rgba(10,18,16,.28));
  border-radius: var(--ofm-radius);
  box-shadow: var(--ofm-shadow);
  padding:14px 14px;
}
.ofm-np.is-compact{padding:12px}
.ofm-np-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.ofm-np-title{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px;opacity:.86}
.ofm-np-track{margin-top:6px;font-size:18px;font-weight:800}
.ofm-np-meta{margin-top:6px;font-size:13px;color:var(--ofm-muted)}
.ofm-live{display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.12em;font-size:12px}
.ofm-live-dot{width:9px;height:9px;border-radius:50%;background:var(--ofm-neon);box-shadow:0 0 18px rgba(38,255,122,.9);animation:ofmBlink 1.2s ease-in-out infinite}
@keyframes ofmBlink{0%,100%{opacity:.45}50%{opacity:1}}
.ofm-listeners{margin-top:8px;color:var(--ofm-muted);font-size:13px;text-align:right}

.ofm-player{
  border:1px solid var(--ofm-stroke);
  background: linear-gradient(180deg, rgba(10,18,16,.55), rgba(10,18,16,.22));
  border-radius: 22px;
  box-shadow: var(--ofm-shadow);
  overflow:hidden;
}
.ofm-player.is-compact .ofm-eq-wrap{height:120px}
.ofm-controls{
  display:flex;align-items:center;gap:10px;
  padding:14px 14px 10px;
}
.ofm-btn{
  cursor:pointer;
  border-radius:16px;
  border:1px solid rgba(38,255,122,.25);
  background: rgba(10,18,16,.35);
  color: rgba(233,255,242,.92);
  padding:10px 12px;
  min-width:48px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition:.15s;
}
.ofm-btn:hover{transform:translateY(-1px);box-shadow:var(--ofm-shadow);border-color:rgba(38,255,122,.45)}
.ofm-play{font-weight:900}
.ofm-vol{margin-left:auto;display:flex;align-items:center;gap:10px;color:rgba(233,255,242,.85)}
.ofm-vol-range{width:160px}
.ofm-progress{height:6px;background:rgba(233,255,242,.10);position:relative}
.ofm-progress-bar{height:100%;width:0%;background:linear-gradient(90deg, rgba(38,255,122,.9), rgba(0,255,85,.35));box-shadow:0 0 18px rgba(38,255,122,.35)}
.ofm-eq-wrap{position:relative;height:160px}
.ofm-eq{width:100%;height:100%;display:block}
.ofm-eq-fallback{
  position:absolute;inset:10px 12px 12px;
  display:flex;align-items:flex-end;gap:6px;
  opacity:.55;
}
.ofm-eq-fallback span{
  flex:1;
  height:20%;
  border-radius:10px;
  background: rgba(38,255,122,.25);
  border:1px solid rgba(38,255,122,.18);
  animation: ofmEq 1.2s ease-in-out infinite;
}
.ofm-eq-fallback span:nth-child(3n){animation-duration:1.05s}
.ofm-eq-fallback span:nth-child(4n){animation-duration:1.35s}
.ofm-eq-fallback span:nth-child(5n){animation-duration:1.55s}
@keyframes ofmEq{
  0%,100%{transform:scaleY(.25)}
  50%{transform:scaleY(1)}
}

.ofm-tracks{
  border:1px solid var(--ofm-stroke);
  background: linear-gradient(180deg, rgba(10,18,16,.55), rgba(10,18,16,.22));
  border-radius: 22px;
  box-shadow: var(--ofm-shadow);
  padding:14px;
}
.ofm-tracks-title{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px;opacity:.86}
.ofm-tracks-list{margin-top:10px;display:grid;gap:10px}
.ofm-track-item{
  border:1px solid rgba(38,255,122,.14);
  background: rgba(10,18,16,.28);
  border-radius: 16px;
  padding:10px 12px;
}
.ofm-track-item .t{font-weight:800}
.ofm-track-item .m{margin-top:4px;font-size:13px;color:var(--ofm-muted)}