/* Frontend styles */
.mp3b, .mp3b-leaderboard{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.mp3b-box{ border:1px solid rgba(0,0,0,.12); border-radius:14px; padding:16px; background: var(--mp3b-card-bg, rgba(255,255,255,.9)); color: var(--mp3b-card-text, inherit); }

.mp3b-playlist-picker{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap:12px;
  margin-bottom:14px;
}
.mp3b-pl-card{ cursor:pointer; }
.mp3b-pl-card input{ position:absolute; opacity:0; pointer-events:none; }
.mp3b-pl-card-inner{
  border:1px solid rgba(0,0,0,.15);
  border-radius:14px;
  padding:12px 12px;
  background: var(--mp3b-card-bg, rgba(255,255,255,.9));
  color: var(--mp3b-card-text, inherit);
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.mp3b-pl-card input:checked + .mp3b-pl-card-inner{
  border: var(--mp3b-active-border-width, 3px) solid var(--mp3b-active-border, rgba(0,0,0,.55));
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.mp3b-pl-name{ font-weight:700; margin-bottom:6px; }
.mp3b-pl-meta code{ font-size:12px; opacity:.75; }

.mp3b-header{ margin-bottom:14px; padding:14px; border:1px solid rgba(0,0,0,.12); border-radius:14px; background: var(--mp3b-header-bg, transparent); color: var(--mp3b-header-text, inherit); }
.mp3b-h-title{ margin: 0 0 6px; font-size: 22px; color: var(--mp3b-header-text, inherit); }
.mp3b-h-sub{ margin: 0 0 10px; opacity:.85; color: var(--mp3b-header-text, inherit); }
.mp3b-h-html{ margin: 0 0 10px; }
.mp3b-h-btn{ margin: 10px 0; }
.mp3b-btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.2);
  text-decoration:none;
}
.mp3b-h-fine{ font-size: 12px; opacity:.75; margin-top:10px; color: var(--mp3b-header-text, inherit); }

.mp3b-match{
  display:grid;
  grid-template-columns: 1fr 60px 1fr;
  gap:12px;
  align-items:center;
  border:1px solid rgba(0,0,0,.12);
  border-radius:18px;
  padding:14px;
  background: var(--mp3b-card-bg, rgba(255,255,255,.9));
  color: var(--mp3b-card-text, inherit);
}
.mp3b-col{ display:flex; flex-direction:column; gap:10px; }
.mp3b-track-title{ font-weight:700; }
.mp3b-vs{ text-align:center; font-weight:900; letter-spacing:1px; opacity:.6; }
.mp3b-vote{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.18);
  cursor:pointer;
  font-weight:700;
  background: var(--mp3b-btn-bg, transparent);
  color: var(--mp3b-btn-text, inherit);
}
.mp3b-actions{
  display:flex; gap:10px; align-items:center;
  margin-top:12px;
}
.mp3b-skip{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.18);
  cursor:pointer;
  background: var(--mp3b-btn-bg, transparent);
  color: var(--mp3b-btn-text, inherit);
}
.mp3b-status{ margin-top:10px; font-size: 13px; opacity:.85; min-height: 18px; }

@media (max-width: 820px){
  .mp3b-match{ grid-template-columns: 1fr; }
  .mp3b-vs{ display:none; }
}

/* leaderboard */
.mp3b-table{ width:100%; border-collapse: collapse; }
.mp3b-table th, .mp3b-table td{ border-bottom:1px solid rgba(0,0,0,.10); padding:10px 8px; text-align:left; }
.mp3b-table th{ font-weight:800; }


/* Force theme-safe colors for header and cards (some themes override h2/h3 colors) */
.mp3b .mp3b-header, .mp3b .mp3b-header * {
  color: var(--mp3b-header-text, inherit) !important;
}
.mp3b .mp3b-match, .mp3b .mp3b-match * ,
.mp3b .mp3b-pl-card-inner, .mp3b .mp3b-pl-card-inner * {
  color: var(--mp3b-card-text, inherit) !important;
}
.mp3b .mp3b-vote, .mp3b .mp3b-btn {
  background: var(--mp3b-btn-bg, transparent) !important;
  color: var(--mp3b-btn-text, inherit) !important;
}


/* Leaderboard should respect per-playlist colors too */
.mp3b-leaderboard, .mp3b-leaderboard * {
  color: var(--mp3b-card-text, inherit);
}
.mp3b-leaderboard .mp3b-box h3 {
  color: var(--mp3b-card-text, inherit) !important;
}
.mp3b-leaderboard .mp3b-table th,
.mp3b-leaderboard .mp3b-table td {
  color: var(--mp3b-card-text, inherit) !important;
}


/* Explicit per-piece color controls */
.mp3b .mp3b-pl-card-inner,
.mp3b-leaderboard .mp3b-pl-card-inner{
  background: var(--mp3b-picker-bg, var(--mp3b-card-bg, rgba(255,255,255,.9))) !important;
  color: var(--mp3b-picker-text, var(--mp3b-card-text, inherit)) !important;
}
.mp3b .mp3b-pl-card input:checked + .mp3b-pl-card-inner,
.mp3b-leaderboard .mp3b-pl-card input:checked + .mp3b-pl-card-inner{
  background: var(--mp3b-picker-selected-bg, var(--mp3b-picker-bg, rgba(255,255,255,.9))) !important;
  color: var(--mp3b-picker-selected-text, var(--mp3b-picker-text, inherit)) !important;
}

.mp3b .mp3b-box,
.mp3b-leaderboard .mp3b-box{
  background: var(--mp3b-lb-bg, var(--mp3b-card-bg, rgba(255,255,255,.9))) !important;
}

.mp3b-leaderboard,
.mp3b-leaderboard *{
  color: var(--mp3b-lb-text, var(--mp3b-card-text, inherit)) !important;
}

.mp3b .mp3b-skip{
  background: var(--mp3b-skip-bg, transparent) !important;
  color: var(--mp3b-skip-text, var(--mp3b-card-text, inherit)) !important;
}


.mp3b-lb-status{
  min-height:18px;
  margin: 0 0 8px;
  font-size: 13px;
  opacity: .85;
}


.mp3b-battle-end-wrap{
  margin-top: 14px;
}
.mp3b-battle-end{
  border:1px solid rgba(0,0,0,.12);
  border-radius:18px;
  padding:16px;
  background: var(--mp3b-card-bg, rgba(255,255,255,.9));
  color: var(--mp3b-card-text, inherit);
}
.mp3b-battle-end h3{
  margin:0 0 10px;
  color: var(--mp3b-card-text, inherit);
}
.mp3b-battle-end-msg{
  margin-bottom: 12px;
}
.mp3b-battle-end-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}
.mp3b-battle-end-actions button{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.18);
  background: var(--mp3b-btn-bg, transparent);
  color: var(--mp3b-btn-text, inherit);
  cursor:pointer;
}
.mp3b-battle-other-label{
  font-weight:700;
  margin-bottom:8px;
}


.mp3b-battle-round-label{
  font-size: 13px;
  opacity: .8;
  margin: -4px 0 10px;
}


/* Rebuild polish */
.mp3b-section{ margin: 0 0 18px; }
.mp3b-media-row{ display:flex; gap:8px; align-items:center; }
.mp3b-separator{ text-align:center; }
.mp3b-separator-image{ max-width:100%; height:auto; display:inline-block; }
.mp3b-battle-wrap{ scroll-margin-top: 24px; }

.mp3b-battle-end-wrap{ margin-top:14px; }
.mp3b-battle-end{
  border:1px solid rgba(0,0,0,.12);
  border-radius:18px;
  padding:16px;
  background: var(--mp3b-card-bg, rgba(255,255,255,.9));
  color: var(--mp3b-card-text, inherit);
}
.mp3b-battle-end h3{
  margin:0 0 10px;
  color: var(--mp3b-card-text, inherit);
}
.mp3b-battle-end-msg{ margin-bottom: 12px; }
.mp3b-battle-end-actions{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 8px;
}
.mp3b-battle-end-actions button,
.mp3b-battle-end-actions a{
  display:inline-block;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.18);
  background: var(--mp3b-btn-bg, transparent);
  color: var(--mp3b-btn-text, inherit);
  text-decoration:none;
  cursor:pointer;
}


.mp3b-track-meta{ font-size: 0.9em; opacity: 0.8; margin-bottom: 8px; }


/* Indicates the currently playing side (A/B) */
.mp3b-col.mp3b-playing{
  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
  border-radius: 14px;
}


.mp3b-box.mp3b-active{ border: var(--mp3b-active-border-width, 3px) solid var(--mp3b-active-border, rgba(0,0,0,.55)); }

/* Playlist tabs */
.mp3b-playlist-tabs, .mp3b-playlist-picker{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 10px 0 18px 0;
}
.mp3b-pl-tab{
  border: 2px solid rgba(0,0,0,.12);
  background: var(--mp3b-picker-bg, #fff);
  color: var(--mp3b-picker-text, #111);
  border-radius: 999px;
  padding: 10px 14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
}
.mp3b-pl-tab .mp3b-pl-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  font-size: 12px;
}
.mp3b-pl-tab.is-active{
  border-color: var(--mp3b-tab-border, var(--mp3b-picker-selected-bg, #2271b1));
  border-width: var(--mp3b-tab-border-width, 3px);
  box-shadow: 0 0 var(--mp3b-tab-glow, 10px) color-mix(in srgb, var(--mp3b-tab-border, var(--mp3b-picker-selected-bg, #2271b1)) 45%, transparent);
  background: var(--mp3b-picker-selected-bg, #2271b1);
  color: var(--mp3b-picker-selected-text, #fff);
}
.mp3b-pl-tab.is-active .mp3b-pl-count{
  background: color-mix(in srgb, var(--mp3b-picker-selected-text, #fff) 18%, transparent);
}


/* Playlist tabs (stable, Folders-safe) */
.mp3b-playlist-picker.mp3b-pl-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px 0;}
.mp3b-pl-tab{appearance:none;border:1px solid rgba(0,0,0,.18);background:var(--mp3b-picker-bg, rgba(255,255,255,.92));color:var(--mp3b-picker-text, inherit);padding:10px 14px;border-radius:999px;font-weight:700;cursor:pointer;line-height:1;transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease;}
.mp3b-pl-tab:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.08);}
.mp3b-pl-tab.is-active{background:var(--mp3b-picker-selected-bg, rgba(0,0,0,.08));color:var(--mp3b-picker-selected-text, inherit);border:3px solid var(--mp3b-picker-selected-bg, rgba(0,0,0,.35));}
.mp3b-pl-tab:focus{outline:3px solid rgba(0,0,0,.25);outline-offset:2px;}

/* Active playlist highlight */
.mp3b.mp3b-root{
  border: var(--mp3b-active-border-width, 3px) solid var(--mp3b-active-border, var(--mp3b-picker-selected-bg, #2271b1));
  box-shadow: 0 0 var(--mp3b-active-border-glow, 12px) color-mix(in srgb, var(--mp3b-active-border, #2271b1) 35%, transparent);
  border-radius: 16px;
  padding: 12px;
}
.mp3b-playlist-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}



.mp3b-root{
  border: var(--mp3b-active-border-width, 3px) solid var(--mp3b-active-border, var(--mp3b-picker-selected-bg, #2271b1));
  border-radius: 18px;
  padding: 8px;
}
.mp3b-current-playlist{
  font-weight: 800;
  text-align:center;
  padding: 10px 12px;
  margin: 10px 0 12px 0;
  border-radius: 14px;
  background: var(--mp3b-label-bg, transparent);
  color: var(--mp3b-label-text, inherit);
  border: var(--mp3b-label-border-width, 3px) solid var(--mp3b-label-border, var(--mp3b-active-border, #2271b1));
  box-shadow: 0 0 var(--mp3b-label-glow, 10px) color-mix(in srgb, var(--mp3b-label-border, var(--mp3b-active-border, #2271b1)) 40%, transparent);
}



/* Active playlist visibility */
.mp3b-root { border: var(--mp3b-active-border-width, 3px) solid var(--mp3b-active-border, var(--mp3b-picker-selected-bg, #2271b1)); padding: 12px; border-radius: 12px; }
.mp3b-playlist-tabs { display:flex; gap:8px; flex-wrap:wrap; margin: 0 0 12px 0; }
.mp3b-playlist-tabs .mp3b-pl-tab { cursor:pointer; border:2px solid transparent; padding:8px 12px; border-radius:999px; background: var(--mp3b-picker-bg, #f2f2f2); color: var(--mp3b-picker-text, #111); }
.mp3b-playlist-tabs .mp3b-pl-tab.is-active { background: var(--mp3b-picker-selected-bg, #2271b1); color: var(--mp3b-picker-selected-text, #fff); border-color: var(--mp3b-picker-selected-bg, #2271b1); }
.mp3b-active-playlist-label{ font-weight:700; margin: 0 0 8px 0; }