:root{
  --vp-bg: rgba(0,0,0,.62);
  --vp-stroke: rgba(255,255,255,.10);
  --vp-text: rgba(255,255,255,.88);
  --vp-muted: rgba(255,255,255,.55);
}

/* --- MINIMAL PLAYER BAR --- */
.varta-playerbar{
  position: fixed;
  right: 60px;
  left: auto;
  bottom: 50px;
  z-index: 999999;
  background: var(--vp-bg);
  border: 1px solid var(--vp-stroke);
  border-radius: 40px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  width: min(550px, calc(100vw - 32px));
  box-shadow: 0 10px 30px rgba(0,0,0,.28);

  /* collapsed by default; expands left from the dock button */
  transform-origin: right center;
  transform: translateX(26px) scaleX(0.01);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}

.varta-playerbar.is-active{
  transform: translateX(0) scaleX(1);
  opacity: 1;
  pointer-events: auto;
}

.varta-playerbar__progress{
  height: 2px;
  background: rgba(255,255,255,.08);
  cursor: pointer;
}
#varta-playerbar__prog{
  height: 2px;
  width: 0%;
  background: rgba(255,255,255,.9);
}

.varta-playerbar__row{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
}

.varta-playerbar__pl{
  color: rgba(255,255,255,.72);
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .9;
}

/* Compact title: keep single line (marquee-ready) */
.varta-playerbar__title{ max-width: 170px; }

/* Marquee (for long track titles) */
.varta-marquee{ position: relative; overflow: hidden; }
.varta-marquee__inner{ display:inline-block; white-space: nowrap; }
.varta-marquee.is-marquee .varta-marquee__inner{
  padding-left: 100%;
  animation: varta-marquee 10s linear infinite;
}
@keyframes varta-marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}

/* Right-side dock icon + hover flyout menu */
.varta-dock{
  position: fixed;
  right: 14px;
  bottom: 50px;
  z-index: 999999;
}
.varta-dock__btn{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--vp-stroke);
  background: var(--vp-bg);
  color: var(--vp-text);
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  justify-content:center;
}
.varta-dock__ic{ position: relative; width: 20px; height: 20px; display:block; }
.varta-dock__note{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  line-height: 1;
  opacity: .95;
  transition: opacity .15s ease;
}
.varta-dock__eq{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 2px;
  opacity: 0;
  transition: opacity .15s ease;
}
.varta-dock__eq span{
  width: 3px;
  height: 12px;
  border-radius: 3px;
  background: rgba(255,255,255,.92);
  transform-origin: center bottom;
  animation: varta-eq 900ms ease-in-out infinite;
}
.varta-dock__eq span:nth-child(2){ animation-duration: 780ms; }
.varta-dock__eq span:nth-child(3){ animation-duration: 1040ms; }
.varta-dock__eq span:nth-child(4){ animation-duration: 860ms; }
@keyframes varta-eq{
  0%,100%{ transform: scaleY(.35); opacity: .75; }
  50%{ transform: scaleY(1); opacity: 1; }
}
.varta-dock.is-playing .varta-dock__note{ opacity: 0; }
.varta-dock.is-playing .varta-dock__eq{ opacity: 1; }

/* --- Bottom track panel (no popups) --- */
.varta-trackpanel{
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .22s ease, opacity .22s ease;
}
.varta-trackpanel.is-open{
  max-height: min(60vh, 520px);
  opacity: 1;
  overflow: hidden;
  padding: 10px;
}
.varta-trackpanel__pls{
  display:flex;
  gap: 6px;
  overflow:auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.varta-trackpanel__list{
  display:flex;
  flex-direction:column;
  gap: 8px;
  max-height: 440px; /* ~10 items */
  overflow-y: auto;
  padding-right: 6px;
}

.varta-panel__list{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.varta-panel__pls{
  display:flex;
  gap: 6px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 10px;
  margin: 0 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.varta-pl-tab{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--vp-text);
  font-size: 11px;
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
  white-space: nowrap;
}
.varta-pl-tab:hover{ background: rgba(255,255,255,.07); }
.varta-pl-tab.is-active{ border-color: rgba(255,255,255,.30); background: rgba(255,255,255,.10); }

.varta-pl-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  cursor: pointer;
  user-select:none;
}
.varta-pl-item:hover{ background: rgba(255,255,255,.06); }

.varta-pl-item__t{
  color: var(--vp-text);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

/* Scroll long titles inside menu on hover */
.varta-pl-marq{ position: relative; }
.varta-pl-marq__inner{ display:inline-block; white-space: nowrap; }
.varta-pl-item:hover .varta-pl-marq__inner{
  padding-left: 100%;
  animation: varta-marquee 8s linear infinite;
}

.varta-pl-item__s{
  color: var(--vp-muted);
  font-size: 10px;
  letter-spacing: .05em;
}

.varta-pl-item.is-active{
  border-color: rgba(255,255,255,.32);
}

.varta-btn{
  appearance:none;
  border: 0;
  background: transparent;
  color: var(--vp-text);
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 999px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .12s ease, transform .12s ease, opacity .12s ease;
  letter-spacing: .04em;
  font-size: 11px;
}

/* =========================
   WPBakery element: OST playlists grid
   ========================= */
.varta-ost-playlists{ margin: 10px 0 20px; }
.varta-ost-playlists__title{
  margin: 0 0 14px;
  color: rgba(255,255,255,.92);
}

.varta-ost-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.varta-ost-playlists[data-cols="2"] .varta-ost-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.varta-ost-playlists[data-cols="4"] .varta-ost-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 999px){
  .varta-ost-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 690px){
  .varta-ost-grid{ grid-template-columns: 1fr; }
}

.varta-ost-card{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: #1a1a1a;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 16px;
  transition: all .4s ease;
}
.varta-ost-card:hover{ background: #1A1A1A; }

/* Cover area (like the reference UI) */
.varta-ost-card__cover{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background-color: rgba(255,255,255,.04);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.varta-ost-card__cover::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  opacity:.8;
  pointer-events:none;
}
.varta-ost-card__cover-title{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  color: rgba(255,255,255,.92);
  font-size: 22px;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 0 8px 20px rgba(0,0,0,.55);
  mix-blend-mode: normal;
  display: none !important;
}
@media (max-width: 690px){
  .varta-ost-card__cover-title{ font-size: 18px; }
}

.varta-ost-card__cover::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35));
}

.varta-ost-card__meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding-top: 14px;
}
.varta-ost-card__left{ min-width: 0; }
.varta-ost-card__t{
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none !important;
}
.varta-ost-card__s{ color: rgba(255,255,255,.62); font-size: 12px; margin-top: 6px; }



.varta-yt-meta{ padding: 12px 14px 14px; }
.varta-yt-name{
  color: rgba(255,255,255,.86);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.varta-btn:hover{ background: rgba(255,255,255,.08); }
.varta-btn:active{ transform: translateY(1px); }

.varta-playerbar__title{
  flex:1;
  min-width: 0;
  color: var(--vp-text);
  font-size: 12px;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .92;
}

/* Volume hidden by default, shown on hover (desktop) */
.varta-vol{
  width: 90px;
  height: 2px;
  accent-color: rgba(255,255,255,.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.varta-playerbar:hover .varta-vol{
  opacity: .9;
  pointer-events: auto;
}

/* On mobile: hide volume entirely */
@media (max-width: 640px){
  .varta-playerbar{ right:10px; left:10px; bottom:10px; width:auto; }
  .varta-vol{ display:none; }
  .varta-dock{ bottom: 72px; }
}

/* =========================
   Popup: track list from OST folder
   ========================= */
.varta-ost-popup{
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: none;
}
.varta-ost-popup.is-open{ display:block; }
.varta-ost-popup__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.varta-ost-popup__panel{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 24px));
  max-height: min(70vh, 640px);
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.varta-ost-popup__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.varta-ost-popup__title{ color: rgba(255,255,255,.92); font-size: 13px; letter-spacing: .02em; }
.varta-ost-popup__close{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.90);
  cursor: pointer;
}
.varta-ost-popup__list{
  padding: 12px;
  overflow: auto;
  max-height: calc(70vh - 64px);
}
.varta-ost-popup__item{
  width: 100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  margin-bottom: 10px;
}
.varta-ost-popup__item:hover{ background: rgba(255,255,255,.06); }
.varta-ost-popup__name{ min-width:0; overflow:hidden; }
.varta-ost-popup__act{ color: rgba(255,255,255,.55); letter-spacing: .12em; font-size: 11px; }

/* --- Playlist page --- */
.varta-playlist-page{
  border-radius: 20px;
  padding: 22px;
}
.varta-playlist-title{ margin: 0 0 14px; }

.varta-track{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  margin-bottom: 10px;
}
.varta-track__title{ font-weight: 600; }

.varta-track__play{
  border: 0;
  background: rgba(0,0,0,.06);
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  letter-spacing: .05em;
  font-size: 11px;
}
.varta-track__play:hover{ background: rgba(0,0,0,.10); }

.varta-empty{ padding: 14px; opacity:.8; }
.varta-hint{ opacity:.75; margin-top: 14px; }

/* (duplicate grid styles removed in v1.6.0) */


/* Playlists button in bar */
.varta-btn--pls{opacity:.85;}
.varta-btn--pls:hover{opacity:1;}


/* Inline tracks inside OST cards */
.varta-ost-card__tracks{
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 12px;
}

.varta-ost-tracklist{
  max-height: calc(5 * 56px); /* show ~5 tracks, then scroll */
  overflow-y: auto;
  padding-right: 6px;
}
.varta-ost-track{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 16px;
  margin: 10px 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.90);
  cursor:pointer;
}
.varta-ost-track:hover{ background: rgba(255,255,255,.06); }
.varta-ost-track.is-current{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}
.varta-ost-track__title{
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}
.varta-ost-track__state{
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.60);
}