:root{
  --ue-sap-bg:#111827;
  --ue-sap-text:#f9fafb;
  --ue-sap-muted:#cbd5e1;
  --ue-sap-btn:#2563eb;
  --ue-sap-track:rgba(255,255,255,.35);
  --ue-sap-fill:#fff;
}
#ue-sap-bar.ue-sap{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:9999;
  color:var(--ue-sap-text);
  font-family:inherit;
}
.ue-sap__inner{
  background:var(--ue-sap-bg);
  box-shadow:0 -6px 20px rgba(0,0,0,.25);
  padding:10px 14px;
}
#ue-sap-audio{display:none}

.ue-sap__embed{
  margin-bottom:10px;
}
.ue-sap__embed iframe{
  width:100%;
  height:92px;
  border:0;
  border-radius:14px;
  background:#0b1220;
}

.ue-sap__row{
  display:grid;
  grid-template-columns:auto minmax(220px,1fr) minmax(320px,1.1fr);
  gap:12px;
  align-items:center;
}
.ue-sap__left{
  display:flex;
  align-items:center;
  gap:10px;
}
.ue-sap__meta{
  min-width:0;
}
.ue-sap__controls{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.ue-sap__primary,.ue-sap__secondary,.ue-sap-trigger{
  border:0;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
}
.ue-sap__primary{
  width:48px; height:48px;
  background:var(--ue-sap-btn);
  color:#fff;
  font-size:24px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  flex:0 0 auto;
}
.ue-sap__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:translateX(1px);
}
.ue-sap__secondary{
  width:42px; height:42px;
  padding:0;
  background:#374151;
  color:#fff;
  font-size:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.ue-sap-trigger{
  background:var(--ue-sap-btn);
  color:#fff;
  padding:10px 16px;
  font-size:15px;
}

body{padding-bottom:92px}

/* Desktop: two-row text block */
.ue-sap__titleRow{display:block}
.ue-sap__title{display:block;font-size:16px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ue-sap__status{display:none}
.ue-sap__song{display:block;font-size:16px;font-weight:400;color:var(--ue-sap-muted);line-height:1.2;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* progress/time */
.ue-sap__progress{
  -webkit-appearance:none;
  appearance:none;
  flex:1 1 auto;
  min-width:120px;
  height:4px;
  background:transparent !important;
  outline:none;
  border:none !important;
  box-shadow:none !important;
  padding:0;
}
.ue-sap__progress:focus,.ue-sap__volume:focus{outline:none;box-shadow:none}
.ue-sap__time{
  font-size:12px;
  color:var(--ue-sap-muted);
  white-space:nowrap;
  flex:0 0 auto;
}

/* volume */
.ue-sap__volumeWrap{
  display:flex;
  align-items:center;
  gap:0;
  position:relative;
  flex:0 0 auto;
  min-width:20px;
}
.ue-sap__volumeLabel{
  font-size:18px;
  line-height:1;
  color:#fff;
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
}
.ue-sap__volume{
  position:absolute;
  right:-2px;
  bottom:28px;
  -webkit-appearance:slider-vertical;
  appearance:slider-vertical;
  width:24px;
  height:130px;
  opacity:0;
  overflow:visible;
  transition:opacity .18s ease;
  transform:none;
  background:transparent !important;
  outline:none;
  border:none !important;
  box-shadow:none !important;
  padding:0;
  pointer-events:none;
  z-index:20;
  writing-mode:vertical-lr;
  direction:rtl;
}
.ue-sap__volumeWrap:hover .ue-sap__volume,
.ue-sap__volumeWrap:focus-within .ue-sap__volume,
.ue-sap__volumeWrap--open .ue-sap__volume{
  opacity:1;
  pointer-events:auto;
}

.ue-sap__progress::-webkit-slider-runnable-track{
  height:4px;
  background:var(--ue-sap-track);
  border-radius:999px;
  border:none;
}
.ue-sap__progress::-moz-range-track{
  height:4px;
  background:var(--ue-sap-track);
  border-radius:999px;
  border:none;
}
.ue-sap__progress::-moz-range-progress{
  height:4px;
  background:var(--ue-sap-fill);
  border-radius:999px;
}
.ue-sap__progress::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--ue-sap-fill);
  cursor:pointer;
  border:0;
  margin-top:-4px;
}
.ue-sap__progress::-moz-range-thumb{
  width:12px; height:12px;
  border-radius:50%;
  background:var(--ue-sap-fill);
  cursor:pointer;
  border:0;
}

.ue-sap__volume::-webkit-slider-runnable-track{
  width:6px;
  background:var(--ue-sap-track);
  border-radius:999px;
  border:none;
}
.ue-sap__volume::-moz-range-track{
  width:6px;
  height:130px;
  background:var(--ue-sap-track);
  border-radius:999px;
  border:none;
}
.ue-sap__volume::-moz-range-progress{
  width:6px;
  background:var(--ue-sap-fill);
  border-radius:999px;
}
.ue-sap__volume::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--ue-sap-fill);
  cursor:pointer;
  border:0;
  margin-left:-5px;
}
.ue-sap__volume::-moz-range-thumb{
  width:16px; height:16px;
  border-radius:50%;
  background:var(--ue-sap-fill);
  cursor:pointer;
  border:0;
}
input[type=range]::-moz-focus-outer{border:0}

#ue-sap-bar.ue-sap.ue-sap--embed-live .ue-sap__progress{opacity:.6}

/* Mobile: one-row text line */
@media (max-width:980px){
  .ue-sap__row{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "meta meta"
      "left controls";
    gap:6px 10px;
  }
  .ue-sap__left{grid-area:left}
  .ue-sap__meta{grid-area:meta;display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
  .ue-sap__controls{grid-area:controls}
  .ue-sap__titleRow{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
  .ue-sap__title{display:inline;font-size:13px;line-height:1.15}
  .ue-sap__status{display:none}
  .ue-sap__song{display:inline;font-size:13px;font-weight:400;color:var(--ue-sap-muted);line-height:1.15;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
}
  .ue-sap__left{grid-area:left}
  .ue-sap__meta{grid-area:meta}
  .ue-sap__controls{grid-area:controls}

  .ue-sap__meta{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
  }
  .ue-sap__titleRow{display:block}
  .ue-sap__title{display:block;font-size:16px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ue-sap__status{display:none}
  .ue-sap__song{display:block;font-size:16px;font-weight:400;color:var(--ue-sap-muted);line-height:1.2;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media (max-width:520px){
  .ue-sap__title,.ue-sap__song{font-size:13px}
  .ue-sap__time{display:none}
  .ue-sap__volume{height:110px;bottom:24px}
}
  .ue-sap__time{
    display:none;
  }
  .ue-sap__volume{
    height:110px;
    bottom:24px;
  }
}