/* SoulPlay design integration. Bootstrap owns its grid and component behavior. */
.sp-site .row { --bs-gutter-x: 30px; }
.sp-site .sp-form-group { margin-bottom: 15px; }
.sp-site .sp-jumbotron { padding: 30px; margin-bottom: 30px; }
.sp-site .sp-item-tooltip { position: static; opacity: 1; }
.sp-site .sp-popup-close { cursor: pointer; }
.sp-site .sp-form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sp-site .sp-input-actions { display: flex; }
.sp-site .sp-btn-xs { padding: 1px 5px; font-size: 12px; }
/* Historical float panels are outside Bootstrap rows. Keep their desktop
   proportions without imposing them on any real Bootstrap row. */
@media (min-width: 768px) {
  .sp-site .box-top.col-md-3 { width: 22%; }
  .sp-site .box-top.col-md-4 { width: 33%; }
  .sp-site .box-top.col-md-6 { width: 50%; }
  .sp-site .box-top.col-md-8 { width: 66.666667%; }
}

/* Bootstrap ranking tabs retain the dark panels and gold active tab. */
.sp-ranking-tabs .nav-tabs { gap: 4px; margin: 0; padding: 0; border: 0; }
.sp-ranking-tabs .nav-item { margin: 0; padding: 0; list-style: none; }
.sp-ranking-tabs .nav-link { border: 1px solid #3e4044; border-radius: 4px 4px 0 0; background: #242629; color: #ddd; padding: 12px 16px; font: inherit; }
.sp-ranking-tabs .nav-link:hover { color: #ffcf54; border-color: #a58032; }
.sp-ranking-tabs .nav-link.active { color: #181818; background: #f1c40f; border-color: #f1c40f; }
.sp-ranking-tabs .nav-link:focus-visible { outline: 2px solid #ffe261; outline-offset: 2px; }
.sp-ranking-tabs .tab-content { padding: 15px; border: 1px solid #3e4044; background: #242629; }
.sp-ranking-tabs .tab-pane { overflow: auto; }
@media (max-width: 575px) {
  .sp-ranking-tabs .nav-item { flex: 1 1 auto; }
  .sp-ranking-tabs .nav-link { width: 100%; padding: 10px; }
  .sp-ranking-tabs .tab-content { padding: 8px; }
}