:root{
  --sbap-primary: #2563eb;
  --sbap-bg: #0b0f19;
  --sbap-text: #eef2ff;
  --sbap-muted: #a5b4fc;
}
.sbap-player{font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:16px auto;}
.sbap-shell{background: var(--sbap-bg); color: var(--sbap-text); border-radius:0; box-shadow: 0 10px 28px rgba(0,0,0,.18); overflow:hidden;}
.sbap-header{display:flex; gap:14px; padding:14px;}
.sbap-cover-wrap{width:84px; flex:0 0 84px;}
.sbap-cover{width:84px; height:84px; border-radius:0; background: rgba(255,255,255,.08); background-size:cover; background-position:center;}
.sbap-meta{flex:1 1 auto; min-width:0;}
.sbap-title{font-size:14px; opacity:.9;}
.sbap-now{font-size:18px; font-weight:700; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sbap-timer{display:flex; align-items:center; gap:10px; margin-top:10px;}
.sbap-seek{width:100%;}
.sbap-time-current,.sbap-time-total{font-variant-numeric: tabular-nums; font-size:12px; }
.sbap-controls{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:center;}
.sbap-btn{border:0; background: rgba(255,255,255,.10); color: var(--sbap-text); padding:8px 10px; border-radius:0; cursor:pointer;}
.sbap-btn:hover{background: rgba(255,255,255,.16);}
.sbap-rate{background: rgba(255,255,255,.10); border:0; color: var(--sbap-text); padding:8px 10px; border-radius:0;}
.sbap-links{display:flex; gap:10px; margin-top:10px;}
.sbap-links a{color: var(--sbap-text); text-decoration:none; font-weight:600; padding:6px 10px; border-radius:0; background: rgba(255,255,255,.10);}
.sbap-links a:hover{background: rgba(255,255,255,.16);}
.sbap-list-wrap{border-top:1px solid rgba(255,255,255,.10);}
.sbap-list-head{padding:10px 14px; display:flex; justify-content:space-between; align-items:center;}
.sbap-toggle-list{border:0; background:transparent; color: var(--sbap-text); font-weight:700; cursor:pointer; padding:0;}
.sbap-tracklist{list-style:none; margin:0; padding:0 10px 10px 10px; overflow:auto;}
.sbap-track{display:flex; gap:10px; align-items:center; padding:10px; border-radius:0; cursor:pointer;}
.sbap-track:hover{background: rgba(255,255,255,.06);}
.sbap-track.is-active{background: var(--sbap-active, rgba(37,99,235,.22)); outline:1px solid var(--sbap-active, rgba(37,99,235,.35));}
.sbap-num{color: var(--sbap-num, var(--sbap-muted));width:32px; text-align:right; font-variant-numeric: tabular-nums;  flex:0 0 32px;}
.sbap-track-left{display:flex; gap:10px; align-items:center; min-width:0;}
.sbap-thumb{width:44px; height:44px; border-radius:0; background: rgba(255,255,255,.08); background-size:cover; background-position:center; flex:0 0 44px;}
.sbap-track-meta{min-width:0;}
.sbap-track-title{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sbap-track-artist{font-size:12px;  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sbap-lyrics{padding:12px 14px; border-top:1px solid rgba(255,255,255,.10); color: var(--sbap-text);}


.sbap-service:hover{background: rgba(255,255,255,.16);}
.sbap-simple .sbap-cover-wrap{display:none;}
.sbap-fixed{position:fixed; left:16px; right:16px; bottom:16px; z-index:9999; margin:0 auto;}
@media (max-width: 520px){
  .sbap-header{flex-direction:column;}
  .sbap-cover-wrap{width:100%;}
  .sbap-cover{width:100%; height:160px;}
}

/* Optional squared style */
.sbap-no-radius .sbap-shell{border-radius:0;}
.sbap-no-radius .sbap-cover{border-radius:0;}
.sbap-no-radius .sbap-btn{border-radius:0;}
.sbap-no-radius .sbap-rate{border-radius:0;}
.sbap-no-radius .sbap-links a{border-radius:0;}
.sbap-no-radius .sbap-track{border-radius:0;}
.sbap-no-radius .sbap-thumb{border-radius:0;}
.sbap-no-radius 

/* Stronger squared style (higher specificity) */
.sbap-player.sbap-no-radius .sbap-shell{border-radius:0 !important;}
.sbap-player.sbap-no-radius .sbap-cover{border-radius:0 !important;}
.sbap-player.sbap-no-radius .sbap-btn{border-radius:0 !important;}
.sbap-player.sbap-no-radius .sbap-rate{border-radius:0 !important;}
.sbap-player.sbap-no-radius .sbap-links a{border-radius:0 !important;}
.sbap-player.sbap-no-radius .sbap-track{border-radius:0 !important;}
.sbap-player.sbap-no-radius .sbap-thumb{border-radius:0 !important;}
.sbap-player.sbap-no-radius 

/* Rounded option (default is square) */
.sbap-player.sbap-rounded .sbap-shell{border-radius:16px !important;}
.sbap-player.sbap-rounded .sbap-cover{border-radius:12px !important;}
.sbap-player.sbap-rounded .sbap-btn{border-radius:12px !important;}
.sbap-player.sbap-rounded .sbap-rate{border-radius:12px !important;}
.sbap-player.sbap-rounded .sbap-links a{border-radius:999px !important;}
.sbap-player.sbap-rounded .sbap-track{border-radius:12px !important;}
.sbap-player.sbap-rounded .sbap-thumb{border-radius:10px !important;}
.sbap-player.sbap-rounded 

/* Square default enforcement (beats theme CSS) */
.sbap-player .sbap-shell{border-radius:0 !important;}
.sbap-player .sbap-cover{border-radius:0 !important;}
.sbap-player .sbap-thumb{border-radius:0 !important;}
.sbap-player .sbap-btn{border-radius:0 !important;}
.sbap-player .sbap-rate{border-radius:0 !important;}
.sbap-player .sbap-links a{border-radius:0 !important;}
.sbap-player .sbap-track{border-radius:0 !important;}
.sbap-player 

.sbap-volwrap{display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:0; background: rgba(255,255,255,.10);}
.sbap-volicon{font-size:14px; opacity:.9;}
.sbap-volume{width:90px;}
@media (max-width: 520px){
  .sbap-volume{width:100px;}
}

/* Cover size setting (per-playlist) */
.sbap-cover-wrap{
  width: var(--sbap-cover-size,84px) !important;
  flex: 0 0 var(--sbap-cover-size,84px) !important;
}
.sbap-cover{
  width: var(--sbap-cover-size,84px) !important;
  height: var(--sbap-cover-size,84px) !important;
  background-size: cover;
  background-position: center;
}

/* Optional: prevent cover shrinking on small screens */
@media (max-width: 600px){
  .sbap-player:not(.sbap-no-mobile-shrink) .sbap-cover-wrap{
    width: min(var(--sbap-cover-size,84px), 40vw) !important;
    flex: 0 0 min(var(--sbap-cover-size,84px), 40vw) !important;
  }
  .sbap-player:not(.sbap-no-mobile-shrink) .sbap-cover{
    width: min(var(--sbap-cover-size,84px), 40vw) !important;
    height: min(var(--sbap-cover-size,84px), 40vw) !important;
  }
}

/* Expand list: let the page scroll instead of the player */
.sbap-player.sbap-expand-list .sbap-list{
  max-height: none !important;
  overflow: visible !important;
}

/* Visible expand button */
.sbap-expand:hover{background:#334155 !important;}

/* Expand list: let page scroll (no internal scroll) */
.sbap-player.sbap-expand-list .sbap-tracklist{
  max-height:none !important;
  overflow:visible !important;
}





/* Expand list: page scroll, show all tracks */
.sbap-player.sbap-expand-list .sbap-tracklist{
  max-height: none !important;
  overflow: visible !important;
}
.sbap-player.sbap-expand-list .sbap-list-wrap{
  overflow: visible !important;
}

/* Expand list: show all tracks, page scroll */
.sbap-player.sbap-expand-list .sbap-tracklist{
  max-height: none !important;
  overflow: visible !important;
}
.sbap-player.sbap-expand-list .sbap-list-wrap{
  overflow: visible !important;
}


/* Full width cover image on mobile */
@media (max-width: 600px){
  .sbap-cover-wrap{
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  .sbap-cover{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  .sbap-head{
    flex-direction: column;
    align-items: stretch;
  }
}

/* sbap-controls-wrap-fix: ensure control buttons (incl. expand) are never clipped */
.sbap-controls{
  flex-wrap: wrap;
  gap: 8px;
}
.sbap-btn.sbap-expand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* sbap-head-layout-fix: keep cover and controls in their own columns */
.sbap-head{display:flex; gap:12px; align-items:stretch;}
.sbap-cover-wrap{flex:0 0 auto;}
.sbap-head-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:10px;}
.sbap-controls{display:flex; align-items:center; flex-wrap:wrap; gap:8px;}

/* Expand list: show all tracks, page scroll (no internal scrollbar) */
.sbap-player.sbap-expand-list .sbap-tracklist,
.sbap-player.sbap-expand-list .sbap-list,
.sbap-player.sbap-expand-list .sbap-list-wrap{
  max-height: none !important;
  overflow: visible !important;
}


/* =========================================================
   Kiko Player — Control Button Normalization (no blue, no resize)
   ========================================================= */
.sbap-player .sbap-controls .sbap-btn,
.sbap-player .sbap-controls .sbap-btn:visited,
.sbap-player .sbap-controls .sbap-btn:hover,
.sbap-player .sbap-controls .sbap-btn:active,
.sbap-player .sbap-controls .sbap-btn:focus,
.sbap-player .sbap-controls .sbap-btn:focus-visible{
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 0 !important;

  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

/* Ensure active/hover doesn't change border/padding (prevents "jump") */
.sbap-player .sbap-controls .sbap-btn:hover,
.sbap-player .sbap-controls .sbap-btn:active{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

/* Icon wrapper: never tinted, never background-filled */
.sbap-player .sbap-controls .sbap-btn .sbap-ico{
  box-sizing: border-box !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--sbap-text, #fff) !important;
}

/* Make SVG icons monochrome (no blue) */
.sbap-player .sbap-controls .sbap-btn svg,
.sbap-player .sbap-controls .sbap-btn svg path{
  fill: currentColor !important;
  stroke: none !important;
}

/* Kill any leftover active styling */
.sbap-player .sbap-controls .sbap-btn.sbap-active,
.sbap-player .sbap-controls .sbap-btn.sbap-active .sbap-ico{
  background: rgba(255,255,255,.10) !important;
  color: var(--sbap-text, #fff) !important;
}


/* === Kiko: lock control sizing + prevent any active/focus resizing === */
.sbap-player .sbap-controls{ gap: 6px !important; }
.sbap-player .sbap-controls .sbap-btn{
  box-sizing: border-box !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.10) !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  color: var(--sbap-text, #fff) !important;
}
.sbap-player .sbap-controls .sbap-btn:active,
.sbap-player .sbap-controls .sbap-btn:focus,
.sbap-player .sbap-controls .sbap-btn:focus-visible{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.10) !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.sbap-player .sbap-controls .sbap-btn .sbap-ico{
  box-sizing: border-box !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}
.sbap-player .sbap-controls .sbap-btn svg,
.sbap-player .sbap-controls .sbap-btn svg path{
  fill: currentColor !important;
  stroke: none !important;
}


/* === Kiko: remove accent fill from Prev/Play/Next icon glyphs ===
   The blue you see is the accent background being applied to the inner icon badge.
   These rules force those three buttons to render like the other controls (no badge fill).
*/
.sbap-player .sbap-controls .sbap-btn.sbap-prev .sbap-ico,
.sbap-player .sbap-controls .sbap-btn.sbap-play .sbap-ico,
.sbap-player .sbap-controls .sbap-btn.sbap-next .sbap-ico{
  background: transparent !important;
  color: var(--sbap-text, #fff) !important;
}

/* Also ensure no per-button active state adds a badge */
.sbap-player .sbap-controls .sbap-btn.sbap-prev.sbap-active .sbap-ico,
.sbap-player .sbap-controls .sbap-btn.sbap-play.sbap-active .sbap-ico,
.sbap-player .sbap-controls .sbap-btn.sbap-next.sbap-active .sbap-ico{
  background: transparent !important;
  color: var(--sbap-text, #fff) !important;
}