/*
 * Media Player Playlist — Modern Redesign v6.0
 * Clean, minimal, professional light theme
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

/* ══ TOKENS ══ */
.mpp-player {
  --acc:    #cc0000;
  --acc-h:  #e60000;
  --acc-d:  #990000;
  --acc-s:  rgba(204,0,0,.06);
  --acc-b:  rgba(204,0,0,.2);
  --bg:     #ffffff;
  --surf:   #fafafa;
  --surf2:  #f3f4f6;
  --surf3:  #e5e7eb;
  --bdr:    rgba(0,0,0,.08);
  --bdr2:   rgba(0,0,0,.05);
  --txt:    #111827;
  --muted:  #6b7280;
  --muted2: #9ca3af;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:   ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  --speed:  .2s;
  --ease:   cubic-bezier(.4,0,.2,1);
  --radius: 10px;
  font-family: var(--sans);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
}
.mpp-player,.mpp-player *,.mpp-player *::before,.mpp-player *::after { box-sizing:border-box;margin:0;padding:0; }
.mpp-player button { font-family: var(--sans); }

/* ══ SHELL ══ */
.mpp-shell {
  max-width: 100%; margin: 0 auto;
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
}
.mpp-shell.layout-left { flex-direction: column; }
@media(min-width:1024px) {
  .mpp-shell.layout-left { display: grid; grid-template-columns: 1fr 360px; }
  .mpp-shell.layout-left .mpp-cinema  { grid-column: 1; }
  .mpp-shell.layout-left .mpp-list   { grid-column: 2; border-left: 1px solid var(--bdr); border-top: none; }
  .mpp-shell.layout-left .mpp-list-scroll { max-height: none; height: 0; flex: 1; }
}

/* ══ VIDEO AREA ══ */
.mpp-cinema { display: flex; flex-direction: column; min-width: 0; }
.mpp-video-wrap { position: relative; background: #000; overflow: hidden; aspect-ratio: 16/9; }
.mpp-video { width:100%; height:100%; display:block; background:#000; outline:none; position:absolute; inset:0; }
.mpp-video::-webkit-media-controls { display:none!important; }

.mpp-video-gradient {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 40%);
  transition: opacity .3s;
}
.mpp-player:hover .mpp-video-gradient,
.mpp-player[data-state="paused"] .mpp-video-gradient { opacity: 1; }

/* Big play button */
.mpp-play-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none; opacity: 0; transition: opacity .25s;
}
.mpp-player[data-state="paused"] .mpp-play-overlay { opacity:1; pointer-events:auto; }
.mpp-play-big {
  width: 64px; height: 64px;
  background: var(--acc);
  border: none;
  border-radius: 50%;
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--speed), transform .15s;
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
}
.mpp-play-big svg { width: 24px; height: 24px; margin-left: 3px; }
.mpp-play-big:hover { background: var(--acc-h); transform: scale(1.1); }

/* iframe */
.mpp-video.mpp-iframe {
  position: absolute!important; inset: 0!important;
  width: 100%!important; height: calc(100% + 80px)!important;
  border: none!important; background: #000!important;
}
.mpp-video-wrap[data-video-type="youtube"] .mpp-play-overlay,
.mpp-video-wrap[data-video-type="vimeo"]   .mpp-play-overlay { display:none!important; }

/* ══ CONTROLS ══ */
.mpp-controls-bar {
  padding: 0 16px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--bdr);
  position: relative;
}
.mpp-controls-bar::before { display: none; }

/* Progress */
.mpp-progress-wrap {
  position: relative; height: 22px;
  display: flex; align-items: center;
  cursor: pointer; padding: 8px 0;
}
.mpp-progress-track {
  position: relative; width: 100%; height: 3px;
  background: var(--surf3); overflow: visible;
  border-radius: 3px;
  transition: height .12s;
}
.mpp-progress-wrap:hover .mpp-progress-track,
.mpp-progress-wrap.is-dragging .mpp-progress-track { height: 5px; }
.mpp-progress-buffered { position:absolute; inset:0; width:0%; background:rgba(0,0,0,.04); border-radius: 3px; }
.mpp-progress-fill     { position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--acc); border-radius: 3px; }
.mpp-progress-thumb {
  position: absolute; left: 0; top: 50%;
  width: 14px; height: 14px;
  background: #fff; border: 3px solid var(--acc);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  transition: transform .12s; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.mpp-progress-wrap:hover .mpp-progress-thumb,
.mpp-progress-wrap.is-dragging .mpp-progress-thumb { transform: translate(-50%,-50%) scale(1); }
.mpp-progress-tooltip {
  position: absolute; top: -30px; left: 0;
  transform: translateX(-50%);
  background: var(--txt); color: #fff;
  font-family: var(--mono); font-size: .62rem;
  padding: 3px 8px; border-radius: 4px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s;
}
.mpp-progress-wrap:hover .mpp-progress-tooltip { opacity: 1; }

/* Controls row */
.mpp-controls-row {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 4px; height: 38px;
}
.mpp-ctrl-left, .mpp-ctrl-right { display: flex; align-items: center; gap: 2px; }

.mpp-ctrl-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--muted); cursor: pointer;
  border-radius: 6px;
  transition: color var(--speed), background var(--speed);
}
.mpp-ctrl-btn:hover { color: var(--txt); background: var(--surf2); }
.mpp-ctrl-btn svg   { width: 16px; height: 16px; }

.mpp-btn-play {
  width: 38px; height: 38px;
  color: #fff; background: var(--acc); border: none;
  border-radius: 8px;
}
.mpp-btn-play:hover { background: var(--acc-h); color: #fff; }

.mpp-icon-pause   { display:none; }
.mpp-player[data-state="playing"] .mpp-icon-play  { display:none; }
.mpp-player[data-state="playing"] .mpp-icon-pause { display:block; }
.mpp-icon-vol-off { display:none; }
.mpp-player[data-muted-state="true"] .mpp-icon-vol-on  { display:none; }
.mpp-player[data-muted-state="true"] .mpp-icon-vol-off { display:block; }
.mpp-icon-fs-exit { display:none; }
.mpp-player.is-fullscreen .mpp-icon-fs-enter { display:none; }
.mpp-player.is-fullscreen .mpp-icon-fs-exit  { display:block; }

.mpp-btn-speed     { width:auto; padding:0 10px; }
.mpp-speed-label   { font-family:var(--mono); font-size:.68rem; font-weight:600; }

/* Volume */
.mpp-volume-group { display:flex; align-items:center; }
.mpp-volume-slider-wrap { width:0; overflow:hidden; transition:width .2s,opacity .2s; opacity:0; }
.mpp-volume-group:hover .mpp-volume-slider-wrap { width:72px; opacity:1; }
.mpp-volume-slider {
  -webkit-appearance:none; appearance:none;
  width:66px; height:3px; background:var(--surf3);
  outline:none; cursor:pointer; margin:0 4px; border-radius:3px;
}
.mpp-volume-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:12px; height:12px;
  background:var(--acc); border:2px solid #fff; border-radius:50%; cursor:pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.mpp-volume-slider::-moz-range-thumb {
  width:12px; height:12px;
  background:var(--acc); border:2px solid #fff; border-radius:50%; cursor:pointer;
}

/* Time */
.mpp-time { font-family:var(--mono); font-size:.68rem; color:var(--muted); white-space:nowrap; margin-left:8px; user-select:none; }
.mpp-time-sep     { margin:0 3px; opacity:.3; }
.mpp-time-current { color:var(--txt); font-weight:600; }

/* ══ META STRIP ══ */
.mpp-meta {
  padding: 16px 20px 18px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg);
}
.mpp-meta-inner { border-left: none; padding-left: 0; }
.mpp-meta-inner::before {
  content: '▶ NOW PLAYING';
  display: inline-block;
  font-family: var(--sans);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--acc);
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
  border: none;
}
.mpp-title {
  font-family: var(--sans);
  font-size: 1.1rem; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.35;
  color: var(--txt); margin-bottom: 4px;
}
.mpp-description { font-size: .84rem; line-height: 1.6; color: var(--muted); }

/* ══ PLAYLIST PANEL ══ */
.mpp-list {
  display: flex; flex-direction: column;
  background: var(--surf);
  border-top: 1px solid var(--bdr);
}
.mpp-list-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  background: var(--bg);
}
.mpp-list-title {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.mpp-list-title svg { opacity: .4; width: 14px; height: 14px; stroke: var(--muted); }

.mpp-list-count {
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-size: .58rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--acc);
  padding: 3px 10px; line-height: 1.6;
  white-space: nowrap; border-radius: 3px; border: none;
}

/* Scroll */
.mpp-list-scroll {
  display: flex; flex-direction: row;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--surf3) transparent;
  padding: 12px; gap: 0;
}
.mpp-list-scroll::-webkit-scrollbar { height: 3px; }
.mpp-list-scroll::-webkit-scrollbar-thumb { background: var(--surf3); border-radius:3px; }

/* ══ PLAYLIST ITEMS ══ */
.mpp-item {
  position: relative;
  display: flex; flex-direction: column;
  flex-shrink: 0; width: 192px;
  cursor: pointer; user-select: none;
  border: 1px solid transparent;
  margin-right: 10px;
  background: var(--bg);
  border-radius: 8px;
  transition: border-color var(--speed), background var(--speed), box-shadow var(--speed);
  overflow: hidden;
}
.mpp-item:last-child { margin-right: 0; }
.mpp-item:hover      { border-color: var(--surf3); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.mpp-item.is-active  { border-color: var(--acc); background: rgba(204,0,0,.03); }
.mpp-item.is-active::before { display: none !important; }

/* Thumbnail */
.mpp-track-num { display: none; }
.mpp-thumb {
  width: 100%; aspect-ratio: 16/9;
  background: var(--surf2); position: relative;
  overflow: hidden; flex-shrink: 0;
  border-radius: 0;
}
.mpp-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s var(--ease); }
.mpp-item:hover .mpp-thumb img { transform: scale(1.05); }
.mpp-item.is-active .mpp-thumb img { opacity: .5; }
.mpp-thumb-placeholder { width:100%; height:100%; display:grid; place-items:center; background:var(--surf2); }
.mpp-thumb-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,.3);
  opacity: 0; transition: opacity .2s;
}
.mpp-item:hover .mpp-thumb-overlay,
.mpp-item.is-active .mpp-thumb-overlay { opacity: 1; }
.mpp-thumb-overlay svg { width: 20px; height: 20px; fill: #fff; }

/* Equalizer */
.mpp-equalizer { display:none; align-items:flex-end; gap:2px; height:16px; }
.mpp-item.is-active .mpp-thumb-overlay .mpp-equalizer { display:flex; }
.mpp-equalizer span { width:3px; background:#fff; border-radius:1px; }
.mpp-player[data-state="playing"] .mpp-item.is-active .mpp-equalizer span { animation:mpp-eq .8s ease-in-out infinite alternate; }
.mpp-player[data-state="paused"]  .mpp-item.is-active .mpp-equalizer span { height:30%!important; animation:none; }
.mpp-equalizer span:nth-child(1) { height:40%; animation-delay:0s; }
.mpp-equalizer span:nth-child(2) { height:70%; animation-delay:.15s; }
.mpp-equalizer span:nth-child(3) { height:50%; animation-delay:.3s; }
@keyframes mpp-eq { 0%{height:20%} 100%{height:100%} }

.mpp-item-progress { position:absolute; left:0; bottom:0; height:2px; width:0%; background:var(--acc); pointer-events:none; transition:width .15s linear; border-radius: 0 0 8px 8px; }

/* Text */
.mpp-item-text { padding: 10px 12px 12px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.mpp-now-playing { display: none; }
.mpp-np-dot { display: none; }
.mpp-item-text strong {
  font-size: .78rem; font-weight: 600;
  color: var(--txt); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; line-height: 1.35;
  transition: color var(--speed);
}
.mpp-item:hover .mpp-item-text strong { color: var(--acc); }
.mpp-item.is-active .mpp-item-text strong { color: var(--acc); font-weight: 700; }
.mpp-item-text p {
  font-size: .72rem; line-height: 1.5;
  color: var(--muted2);
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ══ COUNTDOWN ══ */
.mpp-countdown { position:absolute; bottom:14px; right:14px; display:none; z-index:10; }
.mpp-countdown.is-visible { display:block; }
.mpp-countdown-inner {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,.97);
  border:1px solid var(--bdr);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  backdrop-filter: blur(8px);
}
.mpp-countdown-ring { width:32px; height:32px; position:relative; flex-shrink:0; }
.mpp-countdown-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.mpp-countdown-ring circle { fill:none; stroke-width:2; }
.mpp-ring-bg       { stroke:var(--surf3); }
.mpp-ring-progress { stroke:var(--acc); stroke-dasharray:113.1; stroke-dashoffset:113.1; transition:stroke-dashoffset .08s linear; }
.mpp-countdown-seconds { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--mono); font-size:.72rem; font-weight:700; color:var(--acc); }
.mpp-countdown-text   { display:flex; flex-direction:column; gap:1px; }
.mpp-countdown-label  { font-size:.55rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); }
.mpp-countdown-title  { font-size:.78rem; font-weight:600; color:var(--txt); max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mpp-countdown-cancel {
  width:26px; height:26px; display:grid; place-items:center;
  background:var(--surf2); border:1px solid var(--bdr);
  border-radius: 6px;
  color:var(--muted); cursor:pointer;
  transition:background var(--speed),color var(--speed); flex-shrink:0;
}
.mpp-countdown-cancel:hover { background:var(--surf3); color:var(--txt); }

/* ══ EMPTY ══ */
.mpp-empty { font-family:var(--sans); padding:48px 24px; text-align:center; color:var(--muted); font-size:.88rem; background:var(--bg); border:1px solid var(--bdr); border-radius: var(--radius); }

/* ══ LEFT LAYOUT ══ */
@media(min-width:1024px) {
  .mpp-shell.layout-left .mpp-list { border-top:none; background: var(--bg); }
  .mpp-shell.layout-left .mpp-list-scroll {
    flex-direction:column; overflow-x:hidden; overflow-y:auto; padding:0; gap:0;
  }
  .mpp-shell.layout-left .mpp-item {
    width:auto; flex-direction:row;
    border:none; border-bottom:1px solid var(--bdr);
    border-radius: 0;
    margin-right:0; align-items:center;
    gap:0; padding:0;
    background: transparent;
  }
  .mpp-shell.layout-left .mpp-item::before { display:none !important; }
  .mpp-shell.layout-left .mpp-item.is-active::before { display:none !important; }
  .mpp-shell.layout-left .mpp-item:last-child { border-bottom:none; }
  .mpp-shell.layout-left .mpp-item:hover { background:var(--surf2); box-shadow: none; }
  .mpp-shell.layout-left .mpp-item.is-active { background: rgba(204,0,0,.04); border-left: 3px solid var(--acc) !important; }

  /* Track number */
  .mpp-shell.layout-left .mpp-track-num {
    display:flex; align-items:center; justify-content:center;
    width:42px; flex-shrink:0; align-self:stretch;
    border-right:1px solid var(--bdr2);
  }
  .mpp-shell.layout-left .mpp-track-index { font-family:var(--mono); font-size:.68rem; color:var(--muted2); }
  .mpp-shell.layout-left .mpp-item.is-active .mpp-track-index { display:none; }
  .mpp-shell.layout-left .mpp-item.is-active .mpp-equalizer { display:flex; }

  /* Thumbnail */
  .mpp-shell.layout-left .mpp-thumb { width:100px; flex-shrink:0; border-right:1px solid var(--bdr2); aspect-ratio:16/9; border-radius:0; }
  .mpp-shell.layout-left .mpp-thumb-overlay { opacity:0; }
  .mpp-shell.layout-left .mpp-item:hover .mpp-thumb-overlay,
  .mpp-shell.layout-left .mpp-item.is-active .mpp-thumb-overlay { opacity:1; }

  .mpp-shell.layout-left .mpp-item-text { padding:10px 14px; flex:1; }
  .mpp-shell.layout-left .mpp-item-text strong { font-size:.82rem; font-weight:600; white-space:normal; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
  .mpp-shell.layout-left .mpp-item-text p { color: var(--muted); }
  .mpp-shell.layout-left .mpp-item-progress { height:2px; top:auto; bottom:0; right:0; border-radius:0; }

  /* Hide badges in playlist sidebar */
  .mpp-shell.layout-left .mpp-now-playing { display:none !important; }
  .mpp-shell.layout-left .mppx-np-badge { display:none !important; }
}

/* ══ RESPONSIVE ══ */
@media(max-width:767px) {
  .mpp-item { width:160px; }
  .mpp-list-scroll { padding:10px; }
  .mpp-meta { padding:12px 16px; }
  .mpp-title { font-size:1rem; }
  .mpp-controls-bar { padding:0 12px 10px; }
  .mpp-ctrl-btn { width:30px; height:30px; }
  .mpp-ctrl-btn svg { width:14px; height:14px; }
  .mpp-play-big { width:54px; height:54px; }
  .mpp-play-big svg { width:20px; height:20px; }
  .mpp-volume-group:hover .mpp-volume-slider-wrap { width:56px; }
}

/* ══ A11Y ══ */
.mpp-item:focus-visible          { outline:2px solid var(--acc); outline-offset:-2px; }
.mpp-ctrl-btn:focus-visible,
.mpp-progress-wrap:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
@media(prefers-reduced-motion:reduce) { .mpp-player,.mpp-player * { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* ══ TOAST ══ */
.mpp-toast {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.85);
  background: var(--txt);
  color: #fff;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s, transform .18s;
  z-index: 99999;
  white-space: nowrap;
}
.mpp-toast.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ══ THEATER ══ */
.mpp-player.mpp-theater {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99998 !important;
  max-width: 100vw !important;
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
}
.mpp-player.mpp-theater .mpp-shell {
  flex: 1; max-width: 100%; height: 100%;
  grid-template-rows: 1fr auto; border-radius: 0;
}
.mpp-player.mpp-theater .mpp-cinema { flex: 1; }
.mpp-player.mpp-theater .mpp-video-wrap { height: 100%; aspect-ratio: unset; }

/* ══ SEARCH ══ */
.mppx-search {
  padding: 10px 14px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  background: var(--bg);
}
.mppx-search-inner { position: relative; display: flex; align-items: center; }
.mppx-search-ico {
  position: absolute; left: 10px;
  width: 14px; height: 14px;
  color: var(--muted2); pointer-events: none; display: block; z-index: 2;
}
.mppx-search-field {
  display: block !important;
  width: 100% !important;
  background: var(--surf2) !important;
  border: 1px solid var(--bdr) !important;
  color: var(--txt) !important;
  font-family: var(--sans) !important;
  font-size: .78rem !important;
  padding: 8px 10px 8px 34px !important;
  outline: none !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  transition: border-color .15s, background .15s, box-shadow .15s !important;
  -webkit-appearance: none !important;
}
.mppx-search-field:focus {
  border-color: var(--acc) !important;
  background: var(--bg) !important;
  box-shadow: 0 0 0 3px rgba(204,0,0,.08) !important;
}
.mppx-search-field::placeholder { color: var(--muted2) !important; opacity: 1 !important; }
.mpp-no-results { padding: 16px; font-size: .78rem; color: var(--muted2); text-align: center; }

/* ══ TRACK NUMBER ══ */
.mppx-track-col {
  display: none; width: 42px; flex-shrink: 0;
  align-items: center; justify-content: center;
  align-self: stretch; border-right: 1px solid var(--bdr2); position: relative;
}
@media(min-width:1024px) {
  .mpp-shell.layout-left .mppx-track-col { display: flex; width: 36px; border-right: none; }
}
.mppx-track-idx { font-family: var(--mono); font-size: .68rem; color: var(--muted2); font-weight: 500; display: block; }
.mppx-eq        { display: none !important; }
.mpp-item.is-active .mppx-track-idx { display: none !important; }
.mpp-item.is-active .mppx-eq        { display: flex !important; }

.mppx-eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.mppx-eq b { display: block; width: 3px; border-radius: 1px; background: var(--acc); height: 30%; }
.mpp-player[data-state="playing"] .mpp-item.is-active .mppx-eq b { animation: mppx-bar .7s ease-in-out infinite alternate; }
.mppx-eq b:nth-child(1) { animation-delay: 0s;    height: 45%; }
.mppx-eq b:nth-child(2) { animation-delay: .18s;  height: 80%; }
.mppx-eq b:nth-child(3) { animation-delay: .35s;  height: 55%; }
.mppx-eq b:nth-child(4) { animation-delay: .52s;  height: 65%; }
@keyframes mppx-bar { 0% { height: 20%; } 100% { height: 100%; } }
.mpp-player[data-state="paused"] .mpp-item.is-active .mppx-eq b { animation: none; height: 25% !important; }

/* NOW PLAYING badge — hidden in sidebar, shown only in meta */
.mppx-np-badge { display: none; }
.mppx-np-badge span {
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-size: .56rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--acc);
  padding: 3px 10px; border-radius: 3px; border: none;
}
.mppx-eq-sm { height: 10px; gap: 1.5px; }
.mppx-eq-sm b { width: 2px; }
.mpp-player[data-state="playing"] .mpp-item.is-active .mppx-eq-sm b { animation: mppx-bar .7s ease-in-out infinite alternate; }

/* ══ KEYBOARD HINTS ══ */
.mpp-kb-hints {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 16px; border-top: 1px solid var(--bdr); background: var(--bg); flex-shrink: 0;
}
.mpp-kb-hint { display: flex; align-items: center; gap: 4px; font-size: .6rem; color: var(--muted2); }
.mpp-kb-hint kbd {
  display: inline-block; background: var(--surf2); border: 1px solid var(--bdr);
  border-bottom-width: 2px; padding: 1px 5px; font-family: var(--mono);
  font-size: .6rem; color: var(--txt); border-radius: 3px;
}

.mpp-search-input {
  width: 100%;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  color: var(--txt);
  font-family: var(--sans);
  font-size: .78rem;
  padding: 8px 12px 8px 36px;
  outline: none;
  border-radius: 6px;
  transition: border-color .15s, background .15s;
  box-sizing: border-box;
}
.mpp-search-input:focus {
  border-color: var(--acc);
  background: var(--bg);
}
.mpp-search-input::placeholder {
  color: var(--muted2);
  opacity: 1;
}