/* ============================================================
   SÓ PLAYBACKS 2026 — All-Black Design System
   Bootstrap 5.3 Dark Theme Override
   ============================================================ */

/* ── CSS Custom Properties ────────────────────────────────── */
:root,
[data-bs-theme="dark"] {
  /* Bootstrap overrides */
  --bs-body-bg:         #000000;
  --bs-body-color:      #e0e0e0;
  --bs-card-bg:         #0e0e10;
  --bs-border-color:    #222222;

  /* Accent — Neon Green (estilo Spotify) */
  --sp-accent:          #1db954;
  --sp-accent-hover:    #1ed760;
  --sp-accent-muted:    rgba(29, 185, 84, 0.12);

  /* Accent 2 — Laranja da marca */
  --sp-accent2:         #f68712;
  --sp-accent2-hover:   #f79b35;
  --sp-accent2-muted:   rgba(246, 135, 18, 0.12);

  /* Layout */
  --sp-sidebar-width:   240px;
  --sp-topbar-height:   60px;

  /* Backgrounds */
  --sp-bg-body:         #000000;
  --sp-bg-sidebar:      #0a0a0a;
  --sp-bg-card:         #0e0e10;
  --sp-bg-topbar:       rgba(0, 0, 0, 0.92);
  --sp-bg-hover-row:    rgba(255, 255, 255, 0.04);

  /* Text */
  --sp-text-primary:    #ffffff;
  --sp-text-secondary:  #a8a8a8;
  --sp-text-muted:      #555555;

  /* Borders */
  --sp-border:          #1f1f1f;

  /* Misc */
  --sp-radius:          8px;
  --sp-radius-sm:       4px;
  --sp-transition:      140ms ease;
}

/* ── Base ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--sp-bg-body);
  color: var(--bs-body-color);
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  overflow-x: hidden;
}

/* ── App Wrapper ──────────────────────────────────────────── */
#sp-app {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────────────── */
#sp-sidebar {
  width: var(--sp-sidebar-width);
  min-width: var(--sp-sidebar-width);
  background: var(--sp-bg-sidebar);
  border-right: 1px solid var(--sp-border);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #252525 transparent;
  flex-shrink: 0;
  z-index: 100;
}

#sp-sidebar::-webkit-scrollbar        { width: 4px; }
#sp-sidebar::-webkit-scrollbar-track  { background: transparent; }
#sp-sidebar::-webkit-scrollbar-thumb  { background: #252525; border-radius: 2px; }

/* ── Brand ────────────────────────────────────────────────── */
.sp-brand {
  display: block;
  text-decoration: none;
  padding: 1rem 1rem;
  line-height: 1;
}

.sp-brand span {
  color: var(--sp-accent);
}

.sp-brand:hover {
  opacity: 0.85;
}

.sp-brand-img {
  padding: 1rem 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.sp-logo-img {
  width: 230px;
  height: 60px;
  object-fit: contain;
  display: block;
}

/* Logo menor na navbar horizontal (home pré-login) */
.sp-home-nav .sp-logo-img {
  width: 140px;
  height: 38px;
}

.sp-home-nav .sp-brand-img {
  padding: 0;
  width: auto;
}

.sp-sidebar-header {
  border-bottom: 1px solid var(--sp-border);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ── Sidebar Nav ──────────────────────────────────────────── */
.sp-nav {
  padding: 0.25rem 0 2rem;
}

.sp-nav-section {
  padding: 1rem 0 0.25rem;
  border-bottom: 1px solid var(--sp-border);
}

.sp-nav-section:last-child {
  border-bottom: none;
}

.sp-nav-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sp-text-muted);
  padding: 0 1rem 0.35rem;
}

.sp-nav-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1rem;
  color: var(--sp-text-secondary);
  text-decoration: none;
  font-size: 0.855rem;
  border-left: 2px solid transparent;
  transition: color var(--sp-transition), background var(--sp-transition), border-color var(--sp-transition);
}

.sp-nav-link:hover {
  color: var(--sp-text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.sp-nav-link.active {
  color: var(--sp-accent);
  border-left-color: var(--sp-accent);
  background: var(--sp-accent-muted);
  font-weight: 600;
}

.sp-nav-link i {
  width: 15px;
  text-align: center;
  font-size: 0.78rem;
  flex-shrink: 0;
  opacity: 0.8;
}

.sp-nav-link.active i {
  opacity: 1;
}

.sp-nav-logout {
  color: #c94444 !important;
}

.sp-nav-logout:hover {
  color: #e05555 !important;
  background: rgba(201, 68, 68, 0.1) !important;
}

/* ── Main Area ────────────────────────────────────────────── */
#sp-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
    max-width: 1620px;
  margin: 0 auto;
}

/* ── Topbar ───────────────────────────────────────────────── */
#sp-topbar {
  height: var(--sp-topbar-height);
  background: var(--sp-bg-topbar);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sp-border);
  position: sticky;
  top: 0;
  z-index: 90;
  padding: 0 1.25rem;
  gap: 0.75rem !important;
}

/* Hamburger */
.sp-ham {
  color: var(--sp-text-secondary);
  padding: 0.2rem 0.4rem;
  line-height: 1;
}

.sp-ham:hover {
  color: var(--sp-text-primary);
}

/* ── Search ───────────────────────────────────────────────── */
.sp-search-form {
  max-width: 400px;
  width: 100%;
}

.sp-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.sp-search-icon {
  position: absolute;
  left: 0.7rem;
  color: var(--sp-text-muted);
  font-size: 0.78rem;
  pointer-events: none;
  z-index: 1;
}

.sp-search-input {
  width: 100%;
  background: #111111;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  color: var(--sp-text-primary);
  font-size: 0.855rem;
  padding: 0.44rem 4.8rem 0.44rem 2.1rem;
  outline: none;
  transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
}

.sp-search-input::placeholder {
  color: var(--sp-text-muted);
}

.sp-search-input:focus {
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 3px var(--sp-accent-muted);
}

.sp-search-actions {
  position: absolute;
  right: 0.32rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}

.sp-search-clear,
.sp-search-submit {
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 0.42rem;
  background: transparent;
  color: var(--sp-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--sp-transition), background var(--sp-transition), filter var(--sp-transition), transform var(--sp-transition);
}

.sp-search-clear:hover,
.sp-search-clear:focus-visible {
  color: var(--sp-text-primary);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.sp-search-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.28);
}

.sp-search-submit {
  width: 1.9rem;
  height: 1.9rem;
  background: var(--sp-accent);
  color: #000;
}

.sp-search-submit:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.sp-search-submit:active {
  transform: translateY(0);
}

.sp-search-clear[hidden] {
  display: none !important;
}

/* ── Saldo ────────────────────────────────────────────────── */
.sp-saldo {
  white-space: nowrap;
  gap: 0.4rem !important;
}

.sp-saldo-icon {
  color: var(--sp-accent);
  font-size: 1rem;
}

.sp-saldo-val {
  color: var(--sp-text-primary);
  font-weight: 700;
  font-size: 1.05rem;
}

.sp-saldo-label {
  color: var(--sp-text-muted);
  font-size: 0.82rem;
}

/* ── Avatar + Dropdown ────────────────────────────────────── */
.sp-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.sp-avatar-btn::after {
  display: none;
}

.sp-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sp-border);
  display: block;
}

.sp-avatar-initials {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #181818;
  border: 2px solid var(--sp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sp-accent);
  letter-spacing: 0.02em;
  user-select: none;
}

.sp-dropdown {
  background: #141414 !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: var(--sp-radius) !important;
  min-width: 200px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}

.sp-dropdown .dropdown-item {
  color: var(--sp-text-secondary);
  font-size: 0.855rem;
  padding: 0.5rem 1rem;
}

.sp-dropdown .dropdown-item:hover,
.sp-dropdown .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.07);
  color: var(--sp-text-primary);
}

.sp-dropdown-user {
  display: flex;
  flex-direction: column;
  padding: 0.55rem 1rem;
  border-bottom: none;
}

.sp-dropdown-name {
  color: var(--sp-text-primary) !important;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

.sp-dropdown-email {
  color: var(--sp-text-muted);
  font-size: 0.72rem;
  margin-top: 0.1rem;
}

.sp-dropdown .dropdown-divider {
  border-color: var(--sp-border);
  opacity: 1;
}

.sp-logout,
.sp-logout:visited {
  color: #c94444 !important;
}

.sp-logout:hover,
.sp-logout:focus {
  background: rgba(201, 68, 68, 0.1) !important;
  color: #e05555 !important;
}

/* ── Theme Toggle Button ───────────────────────────────────── */
.sp-theme-toggle {
  background: none;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-secondary);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
  transition: color var(--sp-transition), border-color var(--sp-transition), background var(--sp-transition);
}

.sp-theme-toggle:hover {
  color: var(--sp-accent);
  border-color: var(--sp-accent);
  background: var(--sp-accent-muted);
}

/* ── Version Switch Link ──────────────────────────────────── */
.sp-version-link {
  background: none;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-secondary);
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.65rem;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: color var(--sp-transition), border-color var(--sp-transition), background var(--sp-transition);
}

.sp-version-link:hover,
.sp-version-link:focus {
  color: var(--sp-accent2);
  border-color: var(--sp-accent2);
  background: var(--sp-accent2-muted);
}

/* ── Page Content ─────────────────────────────────────────── */
#sp-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  min-height: 0;

}

#sp-content::-webkit-scrollbar        { width: 5px; }
#sp-content::-webkit-scrollbar-track  { background: transparent; }
#sp-content::-webkit-scrollbar-thumb  { background: #222; border-radius: 3px; }

/* ── Footer ───────────────────────────────────────────────── */
#sp-footer {
  background: var(--sp-bg-sidebar);
  border-top: 1px solid var(--sp-border);
  padding: 0.65rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--sp-text-muted);
  flex-shrink: 0;
}

.sp-footer-contact {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.sp-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--sp-text-muted);
  text-decoration: none;
  transition: color var(--sp-transition);
}

.sp-footer-link:hover { color: var(--sp-text-secondary); }

.sp-footer-wa:hover   { color: #25D366; }

.sp-footer-link i {
  font-size: 0.85rem;
}

.sp-footer-copy {
  white-space: nowrap;
}

/* ── Offcanvas (mobile sidebar) ───────────────────────────── */
.offcanvas {
  background: var(--sp-bg-sidebar) !important;
  border-right: 1px solid var(--sp-border) !important;
  max-width: var(--sp-sidebar-width) !important;
}

.offcanvas-header {
  background: var(--sp-bg-sidebar);
  border-bottom: 1px solid var(--sp-border);
  padding: 0;
}

.btn-close {
  filter: invert(1) grayscale(1) brightness(0.6);
  margin-right: 0.75rem;
}

/* ── Legacy module overrides ──────────────────────────────── */
/* Remove fundos herdados de módulos /2019/ */
#sp-content #master,
#sp-content .master,
#sp-content #conteudo2014 {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ============================================================
   TOP DOWNLOADS — Streaming Playlist Style
   ============================================================ */

.td-page {
  /* max-width: 920px; */
  width: 100%;
}

/* ── Page Header ──────────────────────────────────────────── */
.td-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.td-page-title {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.td-title-icon {
  font-size: 2.25rem;
  color: var(--sp-accent);
  line-height: 1;
}

.td-h1 {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--sp-text-primary);
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.td-subtitle {
  color: var(--sp-text-muted);
  font-size: 0.78rem;
  margin: 0.2rem 0 0;
}

.td-month-badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: var(--sp-accent-muted);
  border: 1px solid rgba(29, 185, 84, 0.25);
  border-radius: 2rem;
  color: var(--sp-accent);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Month Filter Dropdown ────────────────────────────────── */
.td-months-wrap {
  margin-bottom: 1.5rem;
}

.td-month-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #111111;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  color: var(--sp-text-secondary);
  font-size: 0.855rem;
  font-weight: 500;
  padding: 0.42rem 0.85rem;
  cursor: pointer;
  transition: border-color var(--sp-transition), color var(--sp-transition);
}

.td-month-trigger:hover,
.td-month-trigger:focus {
  border-color: var(--sp-accent);
  color: var(--sp-text-primary);
}

.td-month-trigger::after {
  margin-left: 0.3rem;
  opacity: 0.5;
}

.td-months-menu {
  background: #141414 !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: var(--sp-radius) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7) !important;
  padding: 0.25rem 0;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent;
  min-width: 180px;
}

.td-months-menu::-webkit-scrollbar       { width: 4px; }
.td-months-menu::-webkit-scrollbar-track { background: transparent; }
.td-months-menu::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 2px; }

.td-months-year-label {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--sp-text-muted) !important;
  padding: 0.5rem 1rem 0.2rem !important;
}

.td-months-item {
  color: var(--sp-text-secondary) !important;
  font-size: 0.855rem;
  padding: 0.4rem 1rem !important;
}

.td-months-item:hover,
.td-months-item:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--sp-text-primary) !important;
}

.td-months-item.active {
  background: var(--sp-accent-muted) !important;
  color: var(--sp-accent) !important;
  font-weight: 600;
}

.td-months-divider {
  border-color: var(--sp-border) !important;
  margin: 0.25rem 0 !important;
  opacity: 1 !important;
}

/* Sem coluna de posição: recua o botão play para não ficar colado na borda */
.td-table--no-pos .td-th-play,
.td-table--no-pos .td-play {
  padding-left: 0.85rem;
}

/* ── Table Wrapper ────────────────────────────────────────── */
.td-table-wrap {
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  overflow: hidden;
  background: var(--sp-bg-card);
}

/* ── Table ────────────────────────────────────────────────── */
.td-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
/* Fix 3: alinhamento vertical central em todas as células */
.td-table td {
  vertical-align: middle;
}
/* ── Table Head ───────────────────────────────────────────── */
.td-thead tr {
  background: #090909;
  border-bottom: 1px solid var(--sp-border);
}

.td-thead th {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sp-text-muted);
  padding: 0.65rem 0.75rem;
  white-space: nowrap;
}

/* Column widths */
.td-th-pos    { width: 46px; text-align: center; padding-left: 0; padding-right: 0; }
.td-th-play   { width: 42px; }
.td-th-info   { /* auto */ }
.td-th-format { width: 95px; }
.td-th-dl     { width: auto; text-align: center; white-space: nowrap; }

/* ── Table Rows ───────────────────────────────────────────── */
.td-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background var(--sp-transition);
}

.td-row:last-child {
  border-bottom: none;
}

.td-row:hover {
  background: var(--sp-bg-hover-row);
}

/* ── Position Cell ────────────────────────────────────────── */
.td-pos {
  text-align: center;
  padding: 0 0.25rem;
  width: 46px;
  vertical-align: middle;
}

.td-pos-num {
  font-size: 0.78rem;
  color: var(--sp-text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Play Cell ────────────────────────────────────────────── */
.td-play {
  padding: 0 0.25rem;
  width: 42px;
  vertical-align: middle;
}

.td-btn-play {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sp-text-muted);
  font-size: 1.35rem;
  text-decoration: none;
  transition: color var(--sp-transition), transform var(--sp-transition);
  line-height: 1;
  /* reset <button> defaults */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.td-btn-play:hover {
  color: var(--sp-accent);
  transform: scale(1.12);
}

.td-btn-play--active {
  color: var(--sp-accent) !important;
}

.td-btn-play--active:hover {
  transform: scale(1.12);
}

.td-row--playing {
  background: rgba(29, 185, 84, 0.06) !important;
  border-left: 2px solid var(--sp-accent);
}

[data-sp-theme="light"] .td-row--playing {
  background: rgba(29, 185, 84, 0.08) !important;
}

/* ── Info Cell ────────────────────────────────────────────── */
.td-info {
  padding: 0.85rem 0.5rem;
  vertical-align: middle;
  overflow: hidden;
}

.td-track-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sp-text-primary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  line-height: 1.3;
  white-space: normal;
}

.td-track-artist {
  font-size: 0.82rem;
  color: var(--sp-text-secondary);
  margin-top: 0.2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ── Badges ───────────────────────────────────────────────── */
.td-badge-novo {
  font-size: 0.56rem !important;
  font-weight: 600 !important;
  padding: 0.1rem 0.36rem !important;
  background: transparent !important;
  color: var(--sp-accent) !important;
  border: 1px solid rgba(29, 185, 84, 0.35) !important;
  border-radius: 3px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  vertical-align: middle;
  opacity: 0.75;
}

.td-badge-quality {
  font-size: 0.6rem !important;
  padding: 0.14rem 0.32rem !important;
  background: transparent !important;
  color: #FFD700 !important;
  /* border: 1px solid rgba(255, 215, 0, 0.3) !important; */
  border-radius: 3px !important;
  vertical-align: middle;
}

.td-badge-format {
  font-size: 0.62rem !important;
  padding: 0.13rem 0.42rem !important;
  background: transparent !important;
  color: var(--sp-text-muted) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 3px !important;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.03em;
}

.td-badge-mp4 {
  color: #8888ff !important;
  border-color: rgba(136, 136, 255, 0.3) !important;
}

.td-badge-paren {
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    padding: 0.22rem 0.5rem !important;
    background: #0a2413 !important;
    color: var(--sp-text-secondary) !important;
    border: 1px solid #333333 !important;
    border-radius: 2rem !important;
    vertical-align: middle;
    letter-spacing: 0.01em;
}

.td-badge-estilo {
  /* font-size: 0.58rem !important; */
  font-weight: 500 !important;
  padding: 0.3rem 0.42rem !important;
  background: transparent !important;
  border-radius: 3px !important;
  vertical-align: middle;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: #888 !important;
  border: 1px solid rgba(136,136,136,0.22) !important;
}
/* Sertanejo/Forró */
.td-badge-estilo--5  { color: #fdcb6e !important; border-color: rgba(253,203,110,0.28) !important; }
/* MPB/Pop/Rock */
.td-badge-estilo--3  { color: #74b9ff !important; border-color: rgba(116,185,255,0.28) !important; }
/* Sacra/Gospel */
.td-badge-estilo--4  { color: #a29bfe !important; border-color: rgba(162,155,254,0.28) !important; }
/* Internacional */
.td-badge-estilo--2  { color: #55efc4 !important; border-color: rgba(85,239,196,0.28) !important; }
/* Axé/Pagode */
.td-badge-estilo--1  { color: #fab1a0 !important; border-color: rgba(250,177,160,0.28) !important; }
/* Karaokê */
.td-badge-estilo--97 { color: #fd79a8 !important; border-color: rgba(253,121,168,0.28) !important; }
/* VS */
.td-badge-estilo--98 { color: #b2bec3 !important; border-color: rgba(178,190,195,0.28) !important; }
/* sub-estilo (estilo2) — neutro, levemente mais apagado */
.td-badge-estilo-sub {
  color: #6c757d !important;
  border-color: rgba(108,117,125,0.22) !important;
  /* font-style: italic; */
}

/* ── Format Cell ──────────────────────────────────────────── */
.td-format {
  padding: 0.85rem 0.5rem;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Download Cell ────────────────────────────────────────── */
.td-dl {
  padding: 0 0.75rem;
  text-align: center;
  width: 100px;
  white-space: nowrap;
  vertical-align: middle;
}

.td-btn-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  min-width: 90px;
  height: auto;
  border-radius: var(--sp-radius-sm);
  background: rgba(29, 185, 84, 0.1);
  color: var(--sp-accent);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(29, 185, 84, 0.3);
  transition: background var(--sp-transition), color var(--sp-transition), transform var(--sp-transition), border-color var(--sp-transition);
  white-space: nowrap;
}

.td-btn-dl:hover {
  background: var(--sp-accent);
  color: #000000;
  border-color: var(--sp-accent);
  transform: translateY(-1px);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 767.98px) {
  #sp-topbar {
    height: auto;
    min-height: var(--sp-topbar-height);
    flex-wrap: wrap;
    padding: 0.45rem 0.75rem;
    gap: 0.45rem !important;
  }

  #sp-topbar .sp-ham {
    order: 1;
  }

  #sp-topbar .sp-topbar-logo-mobile {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    text-decoration: none;
  }

  #sp-topbar .sp-topbar-logo-mobile-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  #sp-topbar .sp-topbar-right {
    order: 3;
    margin-left: auto !important;
  }

  #sp-topbar .sp-search-form {
    order: 4;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-top: 0.15rem;
  }

  #sp-content {
    padding: 1rem 0.875rem;
  }

  .td-page-header {
    margin-bottom: 1rem;
  }

  .td-h1 {
    font-size: 1.3rem;
  }

  .td-title-icon {
    font-size: 1.65rem;
  }

  .td-subtitle {
    font-size: 0.72rem;
  }

  .td-track-title {
    font-size: 0.83rem;
  }

  .td-track-artist {
    font-size: 0.72rem;
  }

  .sp-search-form {
    max-width: unset;
  }

  #sp-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    font-size: 0.68rem;
  }

  .td-dl {
    width: auto;
    padding: 0 0.4rem;
  }

  .td-th-dl {
    width: auto;
  }

  .td-btn-dl {
    min-width: unset;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
  }

  .td-btn-dl .sp-btn-dl-label {
    display: none;
  }
}

@media (max-width: 400px) {
  .td-table {
    table-layout: auto;
  }

  .td-pos,
  .td-th-pos {
    display: none;
  }

  .td-play {
    padding-left: 0.5rem;
  }

  .td-track-title {
    display: block;
  }

  .td-track-title > * {
    display: inline;
    vertical-align: middle;
  }

  .td-badge-novo,
  .td-badge-quality {
    display: inline-block !important;
    vertical-align: middle;
    margin-left: 0.25rem;
  }
}

/* ============================================================
   PLAYER BAR — Barra fixa de áudio (estilo Spotify)
   ============================================================ */

#sp-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: #0d0d0d;
  border-top: 1px solid var(--sp-border);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  z-index: 1050;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6);
}

/* Info: capa + título + artista */
.sp-player-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 220px;
  min-width: 0;
}

.sp-player-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: #1a1a1a;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sp-accent);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.sp-player-meta { min-width: 0; }

.sp-player-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sp-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-player-artist {
  font-size: 0.72rem;
  color: var(--sp-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

/* Centro: play/pause + seek */
.sp-player-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.sp-player-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sp-accent);
  border: none;
  color: #000;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}

.sp-player-btn:hover:not(:disabled) {
  background: var(--sp-accent-hover);
  transform: scale(1.06);
}

.sp-player-btn:disabled {
  background: #2a2a2a;
  color: #555;
  cursor: default;
}

.sp-player-seek-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.sp-player-time {
  font-size: 0.68rem;
  color: var(--sp-text-secondary);
  white-space: nowrap;
  min-width: 2.1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Range: seek */
.sp-player-seek {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #333;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  accent-color: var(--sp-accent);
}
.sp-player-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--sp-accent);
  cursor: pointer;
}
.sp-player-seek::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--sp-accent);
  cursor: pointer;
  border: none;
}

/* Direita: volume + fechar */
.sp-player-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.sp-player-vol-icon {
  color: var(--sp-text-secondary);
  font-size: 0.82rem;
}

.sp-player-volume {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #333;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  accent-color: #e0e0e0;
}
.sp-player-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #e0e0e0;
  cursor: pointer;
}
.sp-player-volume::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #e0e0e0;
  cursor: pointer;
  border: none;
}

.sp-player-close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--sp-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--sp-transition), border-color var(--sp-transition);
}

.sp-player-close:hover {
  color: var(--sp-text-primary);
  border-color: #333;
}

/* Responsivo */
@media (max-width: 575.98px) {
  .sp-player-info { flex: 0 0 130px; }
  .sp-player-vol-icon,
  .sp-player-volume { display: none; }
  .sp-player-time { display: none; }
  #sp-player { padding: 0 0.75rem; gap: 0.5rem; }
}

/* ============================================================
   BUSCA — Página de resultados
   ============================================================ */

/* Destaque do termo buscado no subtítulo */
.sp-busca-termo {
  color: var(--sp-accent);
  font-weight: 600;
}

/* Barra de busca inline na página de resultados */
.sp-busca-form {
  margin-bottom: 1.5rem;
  max-width: 520px;
}

.sp-busca-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.sp-busca-icon {
  position: absolute;
  left: 0.85rem;
  color: var(--sp-text-muted);
  font-size: 0.82rem;
  pointer-events: none;
  z-index: 1;
}

.sp-busca-input {
  flex: 1;
  background: #111;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  color: var(--sp-text-primary);
  font-size: 0.92rem;
  padding: 0.55rem 3rem 0.55rem 2.3rem;
  outline: none;
  transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
}

.sp-busca-input::placeholder { color: var(--sp-text-muted); }

.sp-busca-input:focus {
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 3px var(--sp-accent-muted);
}

.sp-busca-btn {
  position: absolute;
  right: 0.4rem;
  background: var(--sp-accent);
  border: none;
  border-radius: calc(var(--sp-radius) - 2px);
  color: #000;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background var(--sp-transition);
}

.sp-busca-btn:hover { background: var(--sp-accent-hover); }

.sp-busca-hint {
  font-size: 0.75rem;
  color: #e07000;
  margin: 0.4rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Estado vazio (sem resultados) */
.sp-busca-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--sp-text-secondary);
}

.sp-busca-empty-icon {
  font-size: 2.5rem;
  color: var(--sp-text-muted);
  margin-bottom: 0.75rem;
  display: block;
}

.sp-busca-empty-msg {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sp-text-primary);
  margin-bottom: 0.35rem;
}

.sp-busca-empty-hint {
  font-size: 0.82rem;
  color: var(--sp-text-muted);
}

/* ============================================================
   PLAYBACK LISTAR — índice alfabético, atualizações, paginação
   ============================================================ */

/* Índice de letras */
.pl-alpha-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin: 0 0 1.4rem;
}

.pl-alpha-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid var(--sp-border);
  color: var(--sp-text-secondary);
  text-decoration: none;
  background: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  cursor: pointer;
}
.pl-alpha-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--sp-text-primary);
  border-color: rgba(255,255,255,0.18);
  text-decoration: none;
}
.pl-alpha-btn.active {
  background: var(--sp-accent);
  color: #000 !important;
  border-color: var(--sp-accent);
  pointer-events: none;
}

/* Seções de atualizações */
.pl-updates-section { margin-bottom: 2rem; }

.pl-updates-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-text-muted);
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--sp-border);
}
.pl-updates-title:first-of-type { margin-top: 0; }

.pl-empty {
  color: var(--sp-text-muted);
  font-size: 0.85rem;
  padding: 1rem 0;
}

/* Paginação */
.pl-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin: 1.5rem 0 0.5rem;
}

.pl-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--sp-border);
  color: var(--sp-text-secondary);
  text-decoration: none;
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.pl-page-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--sp-text-primary);
  text-decoration: none;
}
.pl-page-btn.active {
  background: var(--sp-accent);
  color: #000 !important;
  border-color: var(--sp-accent);
  pointer-events: none;
  font-weight: 700;
}

.pl-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 2.1rem;
  font-size: 0.85rem;
  color: var(--sp-text-muted);
}

/* ── Click-to-search ──────────────────────────────────────────── */
.td-search-link {
  cursor: pointer;
}
.td-search-link:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

/* Light theme */
[data-sp-theme="light"] .pl-alpha-btn {
  color: #555;
  border-color: #ccc;
}
[data-sp-theme="light"] .pl-alpha-btn:hover {
  background: rgba(0,0,0,0.05);
  color: #111;
  border-color: #aaa;
}
[data-sp-theme="light"] .pl-updates-title { color: #999; }
[data-sp-theme="light"] .pl-page-btn { color: #555; border-color: #ccc; }
[data-sp-theme="light"] .pl-page-btn:hover { background: rgba(0,0,0,0.05); color: #111; }

/* ============================================================
   LIGHT THEME OVERRIDES
   Ativado via data-sp-theme="light" no <html>
   ============================================================ */

[data-sp-theme="light"] {
  --bs-body-bg:        #f2f2f2;
  --bs-body-color:     #1a1a1a;
  --bs-card-bg:        #ffffff;
  --bs-border-color:   #e0e0e0;

  --sp-bg-body:        #f2f2f2;
  --sp-bg-sidebar:     #ffffff;
  --sp-bg-card:        #ffffff;
  --sp-bg-topbar:      rgba(255, 255, 255, 0.96);
  --sp-bg-hover-row:   rgba(0, 0, 0, 0.03);

  --sp-text-primary:   #111111;
  --sp-text-secondary: #444444;
  --sp-text-muted:     #909090;

  --sp-border:         #e0e0e0;
  --sp-accent-muted:   rgba(29, 185, 84, 0.10);
}

/* Base */
[data-sp-theme="light"] body {
  background-color: #f2f2f2;
  color: #1a1a1a;
}

/* Sidebar */
[data-sp-theme="light"] #sp-sidebar,
[data-sp-theme="light"] .offcanvas {
  background: #ffffff !important;
  border-right-color: #e0e0e0 !important;
}

/* Topbar */
[data-sp-theme="light"] #sp-topbar {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: #e0e0e0;
}

/* Hamburger */
[data-sp-theme="light"] .sp-ham { color: #555; }

/* Search */
[data-sp-theme="light"] .sp-search-input {
  background: #ebebeb;
  border-color: #d8d8d8;
  color: #111;
}
[data-sp-theme="light"] .sp-search-input::placeholder { color: #aaa; }

/* Avatar */
[data-sp-theme="light"] .sp-avatar-initials {
  background: #ebebeb;
  border-color: #d8d8d8;
}

/* User dropdown */
[data-sp-theme="light"] .sp-dropdown {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
}
[data-sp-theme="light"] .sp-dropdown .dropdown-item { color: #444; }
[data-sp-theme="light"] .sp-dropdown .dropdown-item:hover,
[data-sp-theme="light"] .sp-dropdown .dropdown-item:focus {
  background: rgba(0,0,0,0.04);
  color: #111;
}
[data-sp-theme="light"] .sp-dropdown-name { color: #111 !important; }
[data-sp-theme="light"] .sp-dropdown .dropdown-divider { border-color: #eee; opacity: 1; }

/* Footer */
[data-sp-theme="light"] #sp-footer {
  background: #ebebeb;
  border-top-color: #e0e0e0;
}

/* Sidebar nav */
[data-sp-theme="light"] .sp-nav-link {
  color: #555;
}
[data-sp-theme="light"] .sp-nav-link:hover {
  background: rgba(0,0,0,0.04);
  color: #111;
}
[data-sp-theme="light"] .sp-nav-link.active {
  color: var(--sp-accent);
  background: var(--sp-accent-muted);
}
[data-sp-theme="light"] .sp-nav-section { border-bottom-color: #eee; }
[data-sp-theme="light"] .sp-sidebar-header { border-bottom-color: #eee; }

/* Top Downloads — table */
[data-sp-theme="light"] .td-table-wrap {
  background: #ffffff;
  border-color: #e0e0e0;
}
[data-sp-theme="light"] .td-thead tr {
  background: #f7f7f7;
  border-bottom-color: #e0e0e0;
}
[data-sp-theme="light"] .td-row { border-bottom-color: rgba(0,0,0,0.05); }

/* Month trigger */
[data-sp-theme="light"] .td-month-trigger {
  background: #ffffff;
  border-color: #d8d8d8;
  color: #444;
}

/* Month dropdown */
[data-sp-theme="light"] .td-months-menu {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
}
[data-sp-theme="light"] .td-months-item { color: #444 !important; }
[data-sp-theme="light"] .td-months-item:hover,
[data-sp-theme="light"] .td-months-item:focus {
  background: rgba(0,0,0,0.04) !important;
  color: #111 !important;
}
[data-sp-theme="light"] .td-months-divider { border-color: #eee !important; }

/* Badges */
[data-sp-theme="light"] .td-badge-paren {
  background: rgba(29,185,84,0.08) !important;
  border-color: #d0d0d0 !important;
  color: #555 !important;
}
[data-sp-theme="light"] .td-badge-format {
  color: #777 !important;
  border-color: #ccc !important;
}
[data-sp-theme="light"] .td-badge-estilo      { color: #999 !important; border-color: rgba(0,0,0,0.12) !important; }
[data-sp-theme="light"] .td-badge-estilo--5   { color: #c77b0a !important; border-color: rgba(199,123,10,0.25) !important; }
[data-sp-theme="light"] .td-badge-estilo--3   { color: #2980b9 !important; border-color: rgba(41,128,185,0.25) !important; }
[data-sp-theme="light"] .td-badge-estilo--4   { color: #8e44ad !important; border-color: rgba(142,68,173,0.25) !important; }
[data-sp-theme="light"] .td-badge-estilo--2   { color: #00897b !important; border-color: rgba(0,137,123,0.25) !important; }
[data-sp-theme="light"] .td-badge-estilo--1   { color: #c0392b !important; border-color: rgba(192,57,43,0.25) !important; }
[data-sp-theme="light"] .td-badge-estilo--97  { color: #c0396b !important; border-color: rgba(192,57,107,0.25) !important; }
[data-sp-theme="light"] .td-badge-estilo--98  { color: #636e72 !important; border-color: rgba(99,110,114,0.25) !important; }
[data-sp-theme="light"] .td-badge-estilo-sub  { color: #888 !important; border-color: rgba(0,0,0,0.12) !important; }

/* Busca input inline */
[data-sp-theme="light"] .sp-busca-input {
  background: #ebebeb;
  border-color: #d8d8d8;
  color: #111;
}
[data-sp-theme="light"] .sp-busca-input::placeholder { color: #aaa; }

/* Player bar */
[data-sp-theme="light"] #sp-player {
  background: #f0f0f0;
  border-top-color: #e0e0e0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.07);
}
[data-sp-theme="light"] .sp-player-thumb {
  background: #e0e0e0;
  border-color: #ccc;
  color: var(--sp-accent);
}
[data-sp-theme="light"] .sp-player-title  { color: #111; }
[data-sp-theme="light"] .sp-player-artist { color: #555; }
[data-sp-theme="light"] .sp-player-time   { color: #666; }
[data-sp-theme="light"] .sp-player-vol-icon { color: #666; }
[data-sp-theme="light"] .sp-player-seek   { background: #ccc; }
[data-sp-theme="light"] .sp-player-seek::-webkit-slider-thumb { background: var(--sp-accent); }
[data-sp-theme="light"] .sp-player-seek::-moz-range-thumb     { background: var(--sp-accent); }
[data-sp-theme="light"] .sp-player-volume { background: #ccc; }
[data-sp-theme="light"] .sp-player-volume::-webkit-slider-thumb { background: #555; }
[data-sp-theme="light"] .sp-player-volume::-moz-range-thumb     { background: #555; }
[data-sp-theme="light"] .sp-player-close { color: #888; }
[data-sp-theme="light"] .sp-player-close:hover { color: #333; border-color: #bbb; }

/* ============================================================
   DOWNLOAD — Modal + Page  (DownloadModal.php / Download.php)
   ============================================================ */

/* Modal container */
.sp-dl-modal-dialog { max-width: 480px; }

.sp-dl-modal-content {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  color: var(--sp-text-primary);
}

.sp-dl-modal-header {
  background: var(--sp-bg-topbar);
  border-bottom: 1px solid var(--sp-border);
  padding: 0.85rem 1.1rem;
  border-radius: var(--sp-radius) var(--sp-radius) 0 0;
}

.sp-dl-modal-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.sp-dl-modal-header .btn-close { filter: invert(1) grayscale(1) brightness(1.5); }
[data-sp-theme="light"] .sp-dl-modal-header .btn-close { filter: none; }

.sp-dl-modal-body { padding: 1.25rem 1.1rem 1.1rem; }

/* Page (fallback sem JS) */

.sp-dl-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem 1rem 4rem;
}

.sp-dl-card {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 2rem;
  width: 100%;
  max-width: 540px;
}

/* Cabeçalho */
.sp-dl-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.sp-dl-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--sp-radius);
  background: var(--sp-accent-muted);
  color: var(--sp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.sp-dl-meta { flex: 1; min-width: 0; }

.sp-dl-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sp-text-primary);
  margin: 0 0 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-dl-artist {
  font-size: 0.82rem;
  color: var(--sp-text-secondary);
  margin: 0 0 0.6rem;
}

.sp-dl-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.sp-dl-badge-cost,
.sp-dl-badge-ok,
.sp-dl-badge-saldo {
  font-size: 0.7rem;
  padding: 0.18rem 0.55rem;
  border-radius: 2rem;
  font-weight: 500;
  border: 1px solid;
}

.sp-dl-badge-cost {
  color: var(--sp-text-secondary);
  border-color: var(--sp-border);
  background: transparent;
}

.sp-dl-badge-ok {
  color: var(--sp-accent);
  border-color: rgba(29, 185, 84, 0.35);
  background: var(--sp-accent-muted);
}

.sp-dl-badge-saldo {
  color: var(--sp-text-muted);
  border-color: var(--sp-border);
  background: transparent;
}

/* Alerta */
.sp-dl-alert {
  border-radius: var(--sp-radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}

.sp-dl-alert--warn {
  background: rgba(201, 68, 68, 0.08);
  border: 1px solid rgba(201, 68, 68, 0.25);
  color: #e07070;
}

/* Descrição */
.sp-dl-desc {
  font-size: 0.82rem;
  color: var(--sp-text-secondary);
  margin-bottom: 0.75rem;
}

/* Opções */
.sp-dl-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.sp-dl-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-border);
  background: transparent;
  text-decoration: none;
  transition: border-color var(--sp-transition), background var(--sp-transition);
  cursor: pointer;
  min-width: 260px;
}

.sp-dl-option:hover {
  border-color: var(--sp-accent);
  background: var(--sp-accent-muted);
  text-decoration: none;
}

.sp-dl-option-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--sp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.sp-dl-option-icon--mp3 {
  background: rgba(29, 185, 84, 0.12);
  color: var(--sp-accent);
}

.sp-dl-option-icon--mp4 {
  background: rgba(100, 130, 255, 0.12);
  color: #8090ff;
}

.sp-dl-option-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sp-dl-option-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.sp-dl-option-sub {
  font-size: 0.75rem;
  color: var(--sp-text-muted);
  margin-top: 0.1rem;
}

.sp-dl-option-arrow {
  color: var(--sp-text-muted);
  font-size: 0.85rem;
  transition: color var(--sp-transition);
}

.sp-dl-option:hover .sp-dl-option-arrow { color: var(--sp-accent); }

/* Rodapé do card */
.sp-dl-footer {
  border-top: 1px solid var(--sp-border);
  padding-top: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sp-dl-hint {
  font-size: 0.75rem;
  color: var(--sp-text-muted);
  margin: 0;
  flex: 1;
}

.sp-dl-link {
  color: var(--sp-accent);
  text-decoration: none;
}

.sp-dl-link:hover { text-decoration: underline; }

.sp-dl-creditos {
  font-size: 0.84rem;
  color: var(--sp-text-secondary);
}

.sp-dl-creditos-title {
  font-weight: 600;
  color: var(--sp-text-primary);
  margin-bottom: 0.5rem;
}

.sp-dl-creditos-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sp-dl-creditos-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sp-dl-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-accent);
  color: var(--sp-accent);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--sp-transition), color var(--sp-transition);
  white-space: nowrap;
}

.sp-dl-link:hover {
  background: var(--sp-accent);
  color: #000;
  text-decoration: none;
}

.sp-dl-link--alt {
  border-color: var(--sp-accent2);
  color: var(--sp-accent2);
}

.sp-dl-link--alt:hover {
  background: var(--sp-accent2);
  color: #000;
}

.sp-dl-creditos-desc {
  font-size: 0.76rem;
  color: var(--sp-text-muted);
  align-self: center;
  padding-left: 0.6rem;
}.sp-dl-back {
  font-size: 0.78rem;
  color: var(--sp-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.sp-dl-back:hover { color: var(--sp-text-secondary); }

/* Light theme */
[data-sp-theme="light"] .sp-dl-card {
  background: #fff;
  border-color: #e0e0e0;
}

[data-sp-theme="light"] .sp-dl-title { color: #111; }
[data-sp-theme="light"] .sp-dl-artist { color: #555; }
[data-sp-theme="light"] .sp-dl-badge-cost { color: #666; border-color: #d0d0d0; }
[data-sp-theme="light"] .sp-dl-badge-saldo { color: #888; border-color: #d0d0d0; }

[data-sp-theme="light"] .sp-dl-alert--warn {
  background: rgba(201, 68, 68, 0.06);
  border-color: rgba(201, 68, 68, 0.2);
  color: #b04040;
}

[data-sp-theme="light"] .sp-dl-option {
  border-color: #e0e0e0;
}

[data-sp-theme="light"] .sp-dl-option:hover {
  border-color: var(--sp-accent);
  background: var(--sp-accent-muted);
}

[data-sp-theme="light"] .sp-dl-option-label { color: #111; }
[data-sp-theme="light"] .sp-dl-option-sub   { color: #999; }
[data-sp-theme="light"] .sp-dl-option-arrow { color: #aaa; }

[data-sp-theme="light"] .sp-dl-footer { border-top-color: #e0e0e0; }
[data-sp-theme="light"] .sp-dl-hint  { color: #aaa; }
[data-sp-theme="light"] .sp-dl-back  { color: #aaa; }
[data-sp-theme="light"] .sp-dl-back:hover { color: #666; }

/* ============================================================
   PLAYBACKS ENVIADOS / BAIXADOS
   ============================================================ */

/* Status column */
.td-th-status  { width: 130px; }

.td-status-col {
  padding: 0.65rem 0.5rem;
  vertical-align: middle;
}

.td-status-detalhe {
  margin-top: 0.3rem;
  font-size: 0.72rem;
}

/* Status badges */
.td-badge-env-aprovado {
  font-size: 0.63rem !important;
  padding: 0.22rem 0.55rem !important;
  background: rgba(29, 185, 84, 0.1) !important;
  color: var(--sp-accent) !important;
  border: 1px solid rgba(29, 185, 84, 0.3) !important;
  border-radius: 2rem !important;
  white-space: nowrap;
}
.td-badge-env-reprovado {
  font-size: 0.63rem !important;
  padding: 0.22rem 0.55rem !important;
  background: rgba(201, 68, 68, 0.1) !important;
  color: #e07070 !important;
  border: 1px solid rgba(201, 68, 68, 0.3) !important;
  border-radius: 2rem !important;
  white-space: nowrap;
}
.td-badge-env-aguardando {
  font-size: 0.63rem !important;
  padding: 0.22rem 0.55rem !important;
  background: rgba(253, 203, 110, 0.08) !important;
  color: #fdcb6e !important;
  border: 1px solid rgba(253, 203, 110, 0.28) !important;
  border-radius: 2rem !important;
  white-space: nowrap;
}

/* Status detail lines */
.td-env-pontos {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sp-accent);
}
.td-env-motivo {
  font-size: 0.72rem;
  color: #e07070;
  text-decoration: none;
}
.td-env-motivo:hover { text-decoration: underline; color: #e07070; }
.td-env-posicao {
  font-size: 0.72rem;
  color: var(--sp-text-muted);
}

/* Date row in info cell */
.td-env-data {
  font-size: 0.73rem;
  color: var(--sp-text-muted);
  margin-top: 0.28rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* ── Empty state ───────────────────────────────────────────── */
.td-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1rem;
  text-align: center;
  gap: 0.6rem;
}
.td-empty-icon {
  font-size: 2.4rem;
  color: var(--sp-text-muted);
  opacity: 0.35;
}
.td-empty-msg {
  font-size: 0.9rem;
  color: var(--sp-text-secondary);
  margin: 0;
}

/* ── Baixados — aviso informativo ─────────────────────────── */
.td-baixados-aviso {
  background: rgba(29, 185, 84, 0.05);
  border: 1px solid rgba(29, 185, 84, 0.18);
  border-radius: var(--sp-radius-sm);
  font-size: 0.81rem;
  color: var(--sp-text-muted);
  margin-bottom: 1rem;
  padding: 0.65rem 1rem;
}

/* ── Light theme overrides ─────────────────────────────────── */
[data-sp-theme="light"] .td-badge-env-aprovado  { color: #1a7a3a !important; background: rgba(29,185,84,0.08) !important; }
[data-sp-theme="light"] .td-badge-env-reprovado { color: #c0392b !important; background: rgba(192,57,43,0.06) !important; border-color: rgba(192,57,43,0.25) !important; }
[data-sp-theme="light"] .td-badge-env-aguardando{ color: #a07000 !important; background: rgba(253,203,110,0.08) !important; border-color: rgba(253,203,110,0.35) !important; }
[data-sp-theme="light"] .td-env-pontos  { color: #1a7a3a; }
[data-sp-theme="light"] .td-env-motivo  { color: #c0392b; }
[data-sp-theme="light"] .td-env-motivo:hover { color: #c0392b; }
[data-sp-theme="light"] .td-baixados-aviso { border-color: rgba(29,185,84,0.2); color: #666; }

/* ── Saldo flash após download ─────────────────────────────── */
@keyframes sp-saldo-flash {
  0%   { color: var(--sp-accent); transform: scale(1.18); }
  60%  { color: var(--sp-accent); transform: scale(1.18); }
  100% { color: inherit;          transform: scale(1); }
}
.sp-saldo-updated {
  animation: sp-saldo-flash 1.4s ease forwards;
}

/* ── Modal de Reprova ──────────────────────────────────────── */
.td-env-motivo {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.td-env-motivo:hover { opacity: 0.8; }

.sp-reprova-codigo {
  font-size: 0.82rem;
  color: var(--sp-text-muted);
  margin-bottom: 0.75rem;
}

.sp-reprova-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sp-reprova-list li {
  font-size: 0.83rem;
  color: var(--sp-text-secondary);
  padding: 0.45rem 0.65rem;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-border);
  background: var(--sp-bg-card);
}

.sp-reprova-list li.sp-reprova-ativo {
  border-color: rgba(201, 68, 68, 0.4);
  background: rgba(201, 68, 68, 0.07);
  color: var(--sp-text-primary);
  font-weight: 600;
}

.sp-reprova-cod {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--sp-text-muted);
  margin-right: 0.4rem;
  font-variant-numeric: tabular-nums;
}

.sp-reprova-list li.sp-reprova-ativo .sp-reprova-cod {
  color: #e07070;
}

[data-sp-theme="light"] .sp-reprova-list li { color: #444; border-color: #e0e0e0; background: #fff; }
[data-sp-theme="light"] .sp-reprova-list li.sp-reprova-ativo { border-color: rgba(192,57,43,0.35); background: rgba(192,57,43,0.05); color: #111; }
[data-sp-theme="light"] .sp-reprova-cod { color: #999; }
[data-sp-theme="light"] .sp-reprova-list li.sp-reprova-ativo .sp-reprova-cod { color: #c0392b; }

/* ════════════════════════════════════════════════════════════
   Enviar Playback — 2026
════════════════════════════════════════════════════════════ */

/* ── Bloqueio ─────────────────────────────────────────────── */
.sp-env-bloqueio {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 2rem 2rem 1.75rem;
  max-width: 560px;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.sp-env-bloqueio--user { border-color: rgba(255,170,0,0.25); background: rgba(255,170,0,0.04); }
.sp-env-bloqueio-icon { font-size: 2rem; color: var(--sp-text-muted); margin-bottom: 0.5rem; }
.sp-env-bloqueio--user .sp-env-bloqueio-icon { color: #ffaa00; }
.sp-env-bloqueio-title { font-size: 1.05rem; font-weight: 600; color: var(--sp-text-primary); margin: 0; }
.sp-env-bloqueio p { font-size: 0.9rem; color: var(--sp-text-secondary); margin: 0; }

/* ── Card ─────────────────────────────────────────────────── */
.sp-env-card { background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); overflow: hidden; }
.sp-env-card-header {
  padding: 0.85rem 1.25rem;
  font-size: 0.87rem; font-weight: 600;
  color: var(--sp-text-secondary);
  border-bottom: 1px solid var(--sp-border);
  background: var(--sp-bg-elevated);
  text-transform: uppercase; letter-spacing: 0.04em;
}

#sp-env-form-wrap { max-width: 900px; }

.sp-env-pts-card {
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  padding: 0.6rem 0.9rem;
  background: var(--sp-bg-body);
  min-width: 200px;
  font-size: 0.78rem;
}

.sp-env-pts-card-title {
  font-weight: 700;
  color: var(--sp-text-primary);
  margin: 0 0 0.4rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
}

.sp-env-pts-card-item {
  margin: 0.2rem 0 0;
  color: var(--sp-text-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.76rem;
}

.sp-env-pts-card-item strong {
  /* color: var(--sp-accent); */
  color: #000000d1;
}

[data-sp-theme="light"] .sp-env-pts-card {
  background: #fff;
  border-color: #ddd;
}
.sp-env-card-body { padding: 1.5rem 1.25rem; }
.sp-env-card-body--pts { padding: 1.25rem; }

/* ── Form controls ────────────────────────────────────────── */
.sp-env-label { font-size: 0.85rem; font-weight: 500; color: var(--sp-text-secondary); margin-bottom: 0.35rem; display: block; }
.sp-env-input,
.sp-env-select {
  background: var(--sp-bg-elevated) !important;
  border: 1px solid var(--sp-border) !important;
  color: var(--sp-text-primary) !important;
  border-radius: var(--sp-radius-sm) !important;
  font-size: 0.9rem !important;
  padding: 0.55rem 0.8rem !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sp-env-input:focus,
.sp-env-select:focus {
  border-color: var(--sp-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), 0.18) !important;
  outline: none !important;
}
.sp-env-select option { background: var(--sp-bg-elevated); color: var(--sp-text-primary); }
.sp-env-ferr { display: none; font-size: 0.78rem; color: #e07070; margin-top: 0.3rem; }

/* ── Zona de upload ───────────────────────────────────────── */
.sp-env-file-zone {
  border: 2px dashed var(--sp-border);
  border-radius: var(--sp-radius-sm);
  transition: border-color 0.2s, background 0.2s; cursor: pointer;
}
.sp-env-file-zone:hover,
.sp-env-file-zone:focus-within     { border-color: var(--sp-accent); }
.sp-env-file-zone.sp-env-fz--loading { border-color: var(--sp-accent); border-style: solid; opacity: 0.85; }
.sp-env-file-zone.sp-env-fz--ok    { border-color: #1db954; border-style: solid; }
.sp-env-file-zone.sp-env-fz--err   { border-color: #e05555; border-style: solid; }

.sp-env-file-trigger {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3rem; padding: 1.5rem;
  cursor: pointer; color: var(--sp-text-secondary); font-size: 0.88rem; text-align: center;
}
.sp-env-file-icon { font-size: 1.6rem; color: var(--sp-text-muted); margin-bottom: 0.2rem; }
.sp-env-file-zone.sp-env-fz--ok .sp-env-file-icon { color: #1db954; }
.sp-env-file-hint { font-size: 0.75rem; color: var(--sp-text-muted); }
.sp-env-file-input { display: none; }

/* ── Progresso ────────────────────────────────────────────── */
.sp-env-prog { height: 6px; background: var(--sp-bg-elevated); border-radius: 3px; margin-top: 0.5rem; overflow: hidden; }
.sp-env-prog-bar { height: 100%; background: var(--sp-accent); border-radius: 3px; transition: width 0.2s; font-size: 0; }

/* ── Status ───────────────────────────────────────────────── */
.sp-env-fok         { font-size: 0.82rem; color: #1db954; }
.sp-env-ferr-inline { font-size: 0.82rem; color: #e07070; }

/* ── Checkbox ─────────────────────────────────────────────── */
.sp-env-check { display: flex; align-items: flex-start; gap: 0.5rem; }
.sp-env-check-label { font-size: 0.87rem; color: var(--sp-text-secondary); line-height: 1.5; }
.sp-env-terms-link {
  background: none; border: none; padding: 0;
  color: var(--sp-accent); font-size: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.sp-env-terms-link:hover { opacity: 0.8; }

/* ── Botões ───────────────────────────────────────────────── */
.sp-env-btn-submit {
  background: var(--sp-accent); color: #fff; border: none;
  border-radius: var(--sp-radius-sm); padding: 0.65rem 1.5rem;
  font-size: 0.9rem; font-weight: 600; width: 100%; transition: opacity 0.15s;
}
.sp-env-btn-submit:hover:not(:disabled) { opacity: 0.88; color: #fff; }
.sp-env-btn-submit:disabled { opacity: 0.45; cursor: not-allowed; color: #fff; }

.sp-env-btn-link {
  background: var(--sp-bg-elevated); border: 1px solid var(--sp-border);
  color: var(--sp-text-primary); border-radius: var(--sp-radius-sm);
  font-size: 0.88rem; padding: 0.5rem 1.1rem; transition: border-color 0.15s;
}
.sp-env-btn-link:hover { border-color: var(--sp-accent); color: var(--sp-text-primary); }
.sp-env-btn-link--sec { opacity: 0.75; }
.sp-env-btn-link--sec:hover { opacity: 1; }

/* ── Alerta de erro ───────────────────────────────────────── */
.sp-env-alerta {
  margin-top: 1rem; padding: 0.75rem 1rem;
  border-radius: var(--sp-radius-sm);
  background: rgba(201,68,68,0.08); border: 1px solid rgba(201,68,68,0.3);
  color: #e07070; font-size: 0.87rem;
}

/* ── Pontuação ────────────────────────────────────────────── */
.sp-env-pts-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.sp-env-pts-item {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.87rem; color: var(--sp-text-secondary);
  padding: 0.35rem 0; border-bottom: 1px solid var(--sp-border);
}
.sp-env-pts-item:last-child { border-bottom: none; }
.sp-env-pts-val { font-weight: 700; color: var(--sp-accent); white-space: nowrap; }
.sp-env-aviso { font-size: 0.8rem; color: var(--sp-text-muted); margin: 0; line-height: 1.5; padding-top: 0.5rem; border-top: 1px solid var(--sp-border); }

/* ── Critérios ────────────────────────────────────────────── */
.sp-env-crit-wrap { margin-top: 1.75rem; border: 1px solid var(--sp-border); border-radius: var(--sp-radius); overflow: hidden; }
.sp-env-crit-toggle {
  width: 100%; background: var(--sp-bg-elevated); border: none;
  color: var(--sp-text-secondary); font-size: 0.87rem; font-weight: 600;
  padding: 0.85rem 1.25rem; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 0.5rem;
  transition: background 0.15s; text-transform: uppercase; letter-spacing: 0.04em;
}
.sp-env-crit-toggle:hover { background: var(--sp-bg-card); }
.sp-env-crit-toggle span  { flex: 1; }
.sp-env-chevron { transition: transform 0.2s; }
.sp-env-chevron--open { transform: rotate(180deg); }

.sp-env-crit-body { padding: 1.25rem; }
.sp-env-crit-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.sp-env-crit-table tr + tr td,
.sp-env-crit-table tr + tr th { border-top: 1px solid var(--sp-border); }
.sp-env-crit-th { padding: 0.75rem 0.5rem 0.4rem; color: var(--sp-text-primary); font-size: 0.87rem; text-align: left; }
.sp-env-crit-num { padding: 0.45rem 0.9rem 0.45rem 0.25rem; color: var(--sp-text-muted); font-size: 0.77rem; font-weight: 700; white-space: nowrap; vertical-align: top; }
.sp-env-crit-desc { padding: 0.45rem 0.25rem; color: var(--sp-text-secondary); vertical-align: top; line-height: 1.5; }

/* ── Sucesso ──────────────────────────────────────────────── */
.sp-env-sucesso { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1.5rem; gap: 0.75rem; }
.sp-env-sucesso-icon  { font-size: 3.5rem; color: #1db954; }
.sp-env-sucesso-title { font-size: 1.2rem; font-weight: 700; color: var(--sp-text-primary); margin: 0; }
.sp-env-sucesso-desc  { font-size: 0.9rem; color: var(--sp-text-secondary); max-width: 480px; margin: 0; }
.sp-env-sucesso-links { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 0.5rem; }

/* ── Light theme ──────────────────────────────────────────── */
[data-sp-theme="light"] .sp-env-input,
[data-sp-theme="light"] .sp-env-select { background: #fff !important; color: #111 !important; border-color: #d0d0d0 !important; }
[data-sp-theme="light"] .sp-env-card   { background: #fff; border-color: #e4e4e4; }
[data-sp-theme="light"] .sp-env-card-header,
[data-sp-theme="light"] .sp-env-crit-toggle { background: #f5f5f5; }
[data-sp-theme="light"] .sp-env-file-zone   { border-color: #d0d0d0; }
[data-sp-theme="light"] .sp-env-pts-item    { color: #444; border-color: #e8e8e8; }
[data-sp-theme="light"] .sp-env-check-label { color: #444; }
[data-sp-theme="light"] .sp-env-crit-desc   { color: #555; }
[data-sp-theme="light"] .sp-env-crit-num    { color: #999; }
[data-sp-theme="light"] .sp-env-aviso       { color: #888; }
[data-sp-theme="light"] .sp-env-btn-link    { background: #f0f0f0; border-color: #d0d0d0; color: #222; }

/* ─────────────────────────────────────────────────────────
   Autocomplete dropdown (Busca + PlaybackEnviar)
───────────────────────────────────────────────────────── */
.sp-ac-wrap { position: relative; }

.sp-ac-list {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  z-index: 300;
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-accent);
  border-radius: var(--sp-radius-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,.24);
  list-style: none;
  margin: 0; padding: 0.2rem 0;
  max-height: 220px;
  overflow-y: auto;
}

.sp-ac-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.48rem 0.9rem;
  cursor: pointer;
  font-size: 0.87rem;
  color: var(--sp-text-primary);
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-ac-item:hover,
.sp-ac-item--active { background: var(--sp-bg-elevated); color: var(--sp-accent); }

.sp-ac-icon   { font-size: 0.7rem; flex-shrink: 0; color: var(--sp-text-muted); }
.sp-ac-icon-m { color: var(--sp-accent); opacity: 0.7; }
.sp-ac-icon-i { color: var(--sp-text-muted); }

/* Busca: alinha com o wrap que já tem position:relative e overflow */
.sp-busca-ac { top: calc(100% + 4px); }

/* ─────────────────────────────────────────────────────────
   Pontuação vigente — exibição discreta (details/summary)
───────────────────────────────────────────────────────── */
.sp-env-pts-details {
  margin-top: 1.25rem;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  overflow: hidden;
}
.sp-env-pts-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--sp-text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: transparent;
  transition: color 0.15s, background 0.15s;
}
.sp-env-pts-summary::-webkit-details-marker { display: none; }
.sp-env-pts-summary:hover { color: var(--sp-text-secondary); background: var(--sp-bg-elevated); }
.sp-env-pts-chevron { font-size: 0.68rem; margin-left: auto; transition: transform 0.22s; }
details[open] .sp-env-pts-chevron { transform: rotate(180deg); }

.sp-env-pts-inner {
  padding: 0.8rem 0.9rem 0.9rem;
  border-top: 1px solid var(--sp-border);
}
.sp-env-pts-inner .sp-env-pts-list { margin-bottom: 0.6rem; }

/* ── Light overrides ── */
[data-sp-theme="light"] .sp-ac-list  { background: #fff; border-color: var(--sp-accent); box-shadow: 0 6px 18px rgba(0,0,0,.10); }
[data-sp-theme="light"] .sp-ac-item:hover,
[data-sp-theme="light"] .sp-ac-item--active { background: #f0f0f0; }
[data-sp-theme="light"] .sp-env-pts-details { border-color: #ddd; }
[data-sp-theme="light"] .sp-env-pts-inner   { border-color: #ddd; }
[data-sp-theme="light"] .sp-env-pts-summary:hover { background: #f7f7f7; }

/* ============================================================
   PACOTE DE PONTOS — Pedido & Extrato
   ============================================================ */

/* ── Sub-nav (Pedido / Extrato) ───────────────────────────── */

/* =========================================================
   CONTA -- Dados, Senha, Resumo, Contato
   ========================================================= */

.sp-conta-wrap {
  max-width: 1080px;
  margin: 0 auto;
}

.sp-conta-wrap--narrow {
  max-width: 480px;
}

/* Form */
.sp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.sp-form-grid--single {
  grid-template-columns: 1fr;
}

.sp-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sp-form-group--sm { max-width: 180px; }
.sp-form-group--xs { max-width: 100px; }

.sp-form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sp-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sp-form-input {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-primary);
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
  width: 100%;
}

.sp-form-input:focus {
  outline: none;
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 3px var(--sp-accent-muted);
}

.sp-form-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sp-form-hint {
  font-size: 0.75rem;
  color: var(--sp-text-muted);
}

.sp-form-error {
  font-size: 0.8rem;
  color: #e05555;
  margin-top: 0.2rem;
}

.sp-form-feedback {
  padding: 0.75rem 1rem;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  font-size: 0.875rem;
  color: var(--sp-text-secondary);
  margin-bottom: 1rem;
}

.sp-form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.sp-form-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--sp-text-secondary);
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  padding: 0.6rem 0.85rem;
}

/* Botoes */
.sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  border-radius: var(--sp-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background var(--sp-transition), opacity var(--sp-transition);
}

.sp-btn-primary {
  background: var(--sp-accent);
  color: #000;
}

.sp-btn-primary:hover {
  background: var(--sp-accent-hover);
}

/* Resumo */
.sp-resumo-saldo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0.25rem;
  border-top: 2px solid var(--sp-accent);
  margin-top: 0.5rem;
}

.sp-resumo-saldo__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sp-accent);
}

.sp-resumo-saldo__valor {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sp-accent);
  line-height: 1;
}

.sp-resumo-saldo__valor small {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sp-accent);
  margin-left: 0.2rem;
  opacity: 0.75;
}

.sp-resumo-section {
  margin-bottom: 2rem;
}

/* Entradas - verde */
.sp-resumo-section--entrada .sp-section-title {
  color: var(--sp-accent);
}
.sp-resumo-section--entrada .sp-resumo-table th {
  color: var(--sp-accent);
  border-bottom-color: rgba(29,185,84,0.35);
}
.sp-resumo-section--entrada .sp-resumo-table tfoot td {
  color: var(--sp-accent);
  border-top-color: rgba(29,185,84,0.35);
}
.sp-resumo-section--entrada .sp-resumo-total td {
  color: var(--sp-accent);
}

/* Saidas - laranja */
.sp-resumo-section--saida .sp-section-title {
  color: var(--sp-accent2);
}
.sp-resumo-section--saida .sp-resumo-table th {
  color: var(--sp-accent2);
  border-bottom-color: rgba(246,135,18,0.35);
}
.sp-resumo-section--saida .sp-resumo-table tfoot td {
  color: var(--sp-accent2);
  border-top-color: rgba(246,135,18,0.35);
}
.sp-resumo-section--saida .sp-resumo-total td {
  color: var(--sp-accent2);
}
.sp-resumo-section--saida .sp-resumo-toggle:hover {
  color: var(--sp-accent2);
  background: var(--sp-accent2-muted);
}

.sp-resumo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.sp-resumo-table th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--sp-text-muted);
  padding: 0 0 0.6rem;
  border-bottom: 1px solid var(--sp-border);
}

.sp-resumo-table td {
  padding: 0.75rem 0;
  color: var(--sp-text-primary);
  border-bottom: 1px solid var(--sp-border);
  font-size: 0.9rem;
}

.sp-resumo-row:hover td {
  background: rgba(255,255,255,0.035);
}
[data-sp-theme="light"] .sp-resumo-row:hover td {
  background: rgba(0,0,0,0.035);
}

.sp-resumo-table tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--sp-border);
  padding-top: 0.65rem;
}

.sp-resumo-total td {
  font-weight: 700;
  color: var(--sp-text-primary);
}

.sp-resumo-toggle {
  background: none;
  border: none;
  color: var(--sp-text-muted);
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  border-radius: var(--sp-radius-sm);
  transition: color var(--sp-transition), background var(--sp-transition);
  line-height: 1;
}

.sp-resumo-toggle:hover {
  color: var(--sp-accent);
  background: var(--sp-accent-muted);
}

.sp-resumo-detalhe-cell {
  padding: 0 0 0.75rem 0 !important;
  border-bottom: 1px solid var(--sp-border);
}

.sp-resumo-detalhe-wrap {
  background: var(--sp-bg-body);
  border-radius: var(--sp-radius-sm);
  padding: 0.75rem 0.5rem;
  font-size: 0.82rem;
  color: var(--sp-text-secondary);
  max-height: 260px;
  overflow-y: auto;
}

.sp-resumo-detalhe-wrap ul {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sp-resumo-idx;
}

.sp-resumo-detalhe-wrap li {
  counter-increment: sp-resumo-idx;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--sp-border);
}

.sp-resumo-detalhe-wrap li::before {
  content: counter(sp-resumo-idx);
  flex-shrink: 0;
  min-width: 1.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--sp-text-muted);
  text-align: right;
  opacity: 0.6;
}

.sp-resumo-detalhe-wrap li:last-child { border-bottom: none; }

.sp-resumo-detalhe-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  counter-reset: sp-resumo-idx;
}

.sp-resumo-detalhe-wrap table tbody tr {
  counter-increment: sp-resumo-idx;
}

.sp-resumo-detalhe-wrap table tbody tr td:first-child::before {
  content: counter(sp-resumo-idx) ". ";
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--sp-text-muted);
  opacity: 0.6;
  margin-right: 0.25rem;
}

.sp-resumo-detalhe-wrap table td {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--sp-border);
  color: var(--sp-text-secondary);
}

.sp-resumo-loading { color: var(--sp-text-muted); }

[data-sp-theme="light"] .sp-resumo-detalhe-wrap {
  background: #f7f7f7;
  border: 1px solid #e0e0e0;
}

.sp-contato-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sp-contato-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 1rem 1.25rem;
}

.sp-contato-icon {
  font-size: 1.5rem;
  color: var(--sp-accent);
  width: 1.75rem;
  text-align: center;
  flex-shrink: 0;
}

.sp-contato-icon--wa { color: #25D366; }

.sp-contato-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sp-text-muted);
  margin-bottom: 0.2rem;
}

.sp-contato-valor {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sp-text-primary);
  text-decoration: none;
}

.sp-contato-valor:hover {
  color: var(--sp-accent);
  text-decoration: underline;
}

/* Responsivo conta */
@media (max-width: 640px) {
  .sp-form-grid { grid-template-columns: 1fr; }
  .sp-form-group--sm, .sp-form-group--xs { max-width: 100%; }
  .sp-resumo-cols { grid-template-columns: 1fr; }
}

/* Light theme overrides -- conta */
[data-sp-theme="light"] .sp-form-input {
  background: #ffffff;
  border-color: #d0d0d0;
  color: #111;
}
[data-sp-theme="light"] .sp-form-input:focus { border-color: var(--sp-accent); }
[data-sp-theme="light"] .sp-form-info,
[data-sp-theme="light"] .sp-form-feedback,
[data-sp-theme="light"] .sp-contato-item {
  background: #ffffff;
  border-color: #e0e0e0;
}
[data-sp-theme="light"] .sp-resumo-table td,
[data-sp-theme="light"] .sp-resumo-table tfoot td { color: #444; }
[data-sp-theme="light"] .sp-resumo-total td { color: #111; }
[data-sp-theme="light"] .sp-contato-valor { color: #111; }

.sp-pedido-wrap {
  max-width: 1080px;
  margin: 0 auto;
}

.sp-pedido-wrap .sp-section-title {
  justify-content: center;
}

.sp-pontos-nav {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--sp-border);
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.sp-pontos-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  font-size: 0.855rem;
  font-weight: 500;
  color: var(--sp-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--sp-transition), border-color var(--sp-transition);
  white-space: nowrap;
}

.sp-pontos-tab:hover {
  color: var(--sp-text-primary);
}

.sp-pontos-tab.active {
  color: var(--sp-accent);
  border-bottom-color: var(--sp-accent);
  font-weight: 600;
}

/* ── Section shared ───────────────────────────────────────── */
.sp-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sp-accent);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.sp-section-title::before {
  content: \'\';
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background: var(--sp-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.sp-info-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--sp-accent-muted);
  border: 1px solid rgba(29, 185, 84, 0.2);
  border-radius: var(--sp-radius);
  padding: 0.875rem 1rem;
  font-size: 0.85rem;
  color: var(--sp-text-secondary);
    margin:auto;
  margin-bottom: 1.5rem;
  line-height: 1.5;
  max-width: 600px;

}

.sp-info-icon {
  color: var(--sp-accent);
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.sp-sep {
  color: var(--sp-text-muted);
  margin: 0 0.35rem;
}

.sp-alerta-info {
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.25);
  border-radius: var(--sp-radius);
  color: #e5ac00;
  font-size: 0.82rem;
  padding: 0.7rem 1rem;
  margin-top: 1.25rem;
}

/* ── Pacotes Grid ─────────────────────────────────────────── */
.sp-pacotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.875rem;
}

@media (min-width: 1240px) {
  .sp-pacotes-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 200px));
    justify-content: center;
  }
}

.sp-card-pacote {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: #0e0e10;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 1.1rem 0.85rem 0.875rem;
  cursor: pointer;
  transition: border-color var(--sp-transition), background var(--sp-transition), transform 80ms;
  text-align: center;
  user-select: none;
}

.sp-card-pacote:hover {
  border-color: #444;
  background: #141416;
}

.sp-card-pacote--sel {
  border-color: var(--sp-accent) !important;
  background: var(--sp-accent-muted) !important;
  transform: translateY(-1px);
}

.sp-card-pacote--destaque {
  border-color: rgba(29, 185, 84, 0.35);
}

.sp-badge-off {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: var(--sp-accent);
  color: #000;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.18rem 0.42rem;
  border-radius: 2rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.sp-card-nome {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.9rem;
}

.sp-card-creditos {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.3rem 0;
}

.sp-card-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--sp-text-primary);
  line-height: 1;
}

.sp-card-lbl {
  font-size: 0.65rem;
  color: var(--sp-text-muted);
  font-weight: 500;
}

.sp-card-preco {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sp-accent);
  margin: 0.1rem 0;
}

.sp-card-unitario {
  font-size: 0.67rem;
  color: var(--sp-text-muted);
}

.sp-card-range {
  font-size: 0.7rem;
  color: var(--sp-text-muted);
  margin-top: 0.35rem;
  line-height: 1.4;
}

.sp-card-range strong {
  color: var(--sp-text-secondary);
}

/* ── Formas de Pgto ───────────────────────────────────────── */
.sp-pgto-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.sp-pgto-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: #0e0e10;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--sp-text-secondary);
  transition: border-color var(--sp-transition), background var(--sp-transition);
  user-select: none;
}

.sp-pgto-item:hover {
  border-color: #444;
  background: #141416;
}

.sp-pgto-item--sel {
  border-color: var(--sp-accent) !important;
  background: var(--sp-accent-muted) !important;
  color: var(--sp-text-primary) !important;
}

/* ── Botão Primário ───────────────────────────────────────── */
.sp-btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--sp-accent);
  color: #000;
  border: none;
  border-radius: 2rem;
  padding: 0.65rem 2rem;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--sp-transition), transform 80ms;
}

.sp-btn-primary:hover  { background: var(--sp-accent-hover); transform: translateY(-1px); }
.sp-btn-primary:active { transform: translateY(0); }

/* ── Loading overlay ──────────────────────────────────────── */
.sp-loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}

.sp-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--sp-text-muted);
  font-size: 0.88rem;
}

/* ── Extrato ──────────────────────────────────────────────── */
.sp-extrato-table-wrap {
  overflow-x: auto;
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-border);
}

.sp-extrato-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  color: var(--sp-text-secondary);
}

.sp-extrato-table thead th {
  background: #0a0a0a;
  color: var(--sp-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--sp-border);
  white-space: nowrap;
}

.sp-extrato-table tbody tr {
  border-bottom: 1px solid var(--sp-border);
  transition: background var(--sp-transition);
}

.sp-extrato-table tbody tr:last-child { border-bottom: none; }

.sp-extrato-table tbody tr:hover {
  background: var(--sp-bg-hover-row);
}

.sp-extrato-table td {
  padding: 0.7rem 0.9rem;
  vertical-align: middle;
}

.sp-ext-destaque {
  font-weight: 600;
  color: var(--sp-text-primary);
  font-size: 0.84rem;
}

.sp-ext-meta {
  font-size: 0.72rem;
  color: var(--sp-text-muted);
  margin-top: 0.1rem;
}

.sp-ext-valor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Status Badges ────────────────────────────────────────── */
.sp-status-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 2rem;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.sp-status--sucesso  { background: rgba(29,185,84,.14); color: #1db954; }
.sp-status--pendente { background: rgba(255,193,7,.12); color: #e5ac00; }
.sp-status--erro     { background: rgba(220,53,69,.12); color: #e55;    }

.sp-pgto-ok   { font-size: 0.78rem; color: var(--sp-accent); font-weight: 600; }
.sp-pgto-wait { font-size: 0.78rem; color: var(--sp-text-muted); }

.sp-link-action {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sp-accent);
  text-decoration: none;
}
.sp-link-action:hover { color: var(--sp-accent-hover); text-decoration: underline; }

.sp-link-detail {
  font-size: 0.78rem;
  font-weight: 600;
  color: #f5a623;
  text-decoration: none;
}
.sp-link-detail:hover { color: #ffbe5c; text-decoration: underline; }

.sp-btn-excluir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(220,53,69,.1);
  color: #dc3545;
  text-decoration: none;
  font-size: 0.78rem;
  transition: background var(--sp-transition), color var(--sp-transition);
}
.sp-btn-excluir:hover {
  background: rgba(220,53,69,.22);
  color: #ff4d5a;
}

/* ── Extrato vazio ────────────────────────────────────────── */
.sp-extrato-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--sp-text-muted);
}

.sp-vazio-icon { font-size: 2.5rem; opacity: 0.4; }

.sp-vazio-msg {
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 380px;
}

.sp-vazio-msg a { color: var(--sp-accent); text-decoration: none; }
.sp-vazio-msg a:hover { text-decoration: underline; }

/* ── Responsivo ───────────────────────────────────────────── */
@media (max-width: 575px) {
  .sp-pacotes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sp-extrato-table thead { display: none; }

  .sp-extrato-table tbody tr {
    display: block;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    margin-bottom: 0.6rem;
  }

  .sp-extrato-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--sp-border);
    font-size: 0.82rem;
  }

  .sp-extrato-table td:last-child { border-bottom: none; }

  .sp-extrato-table td::before {
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sp-text-muted);
    min-width: 72px;
    flex-shrink: 0;
  }

  .sp-extrato-table-wrap {
    border: none;
  }
}

/* ── Light theme overrides ────────────────────────────────── */
[data-sp-theme="light"] .sp-pontos-tab          { color: #555; }
[data-sp-theme="light"] .sp-pontos-tab:hover    { color: #111; }
[data-sp-theme="light"] .sp-pontos-tab.active   { color: #1a7a3a; border-bottom-color: #1a7a3a; }
[data-sp-theme="light"] .sp-card-pacote         { background: #fff; border-color: #ddd; }
[data-sp-theme="light"] .sp-card-pacote:hover   { background: #f8f8f8; border-color: #bbb; }
[data-sp-theme="light"] .sp-card-pacote--sel    { border-color: #1db954 !important; background: rgba(29,185,84,.06) !important; }
[data-sp-theme="light"] .sp-pgto-item           { background: #fff; border-color: #ddd; color: #444; }
[data-sp-theme="light"] .sp-pgto-item:hover     { border-color: #aaa; }
[data-sp-theme="light"] .sp-pgto-item--sel      { border-color: #1db954 !important; background: rgba(29,185,84,.07) !important; color: #111 !important; }
[data-sp-theme="light"] .sp-extrato-table-wrap  { border-color: #ddd; }
[data-sp-theme="light"] .sp-extrato-table thead th { background: #f7f7f7; color: #777; border-color: #ddd; }
[data-sp-theme="light"] .sp-extrato-table tbody tr { border-color: #eee; background: #fff; }
[data-sp-theme="light"] .sp-ext-destaque        { color: #111; }
[data-sp-theme="light"] .sp-card-num            { color: #111; }
[data-sp-theme="light"] .sp-info-box            { background: rgba(29,185,84,.07); border-color: rgba(29,185,84,.2); color: #333; }
[data-sp-theme="light"] .sp-section-title       { color: var(--sp-accent); }

/* ============================================================
   DETALHES DO PEDIDO (PontosPedidoDetalhes)
   Override das tabelas geradas por ClassPontos (2019)
   ============================================================ */

/* ── Layout geral ─────────────────────────────────────────── */
.sp-detalhe-page {}

.sp-detalhe-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sp-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--sp-transition);
}
.sp-detalhe-back:hover { color: var(--sp-text-primary); }

.sp-detalhe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.sp-detalhe-col {}

.sp-detalhe-single {
  max-width: 520px;
  /* margin: 0 auto; */
}

.sp-detalhe-confirm-hint {
  background: var(--sp-accent-muted);
  border: 1px solid rgba(29,185,84,.2);
  border-radius: var(--sp-radius);
  padding: 0.875rem 1rem;
  font-size: 0.84rem;
  color: var(--sp-text-secondary);
  margin-top: 1rem;
  line-height: 1.6;
}
.sp-detalhe-confirm-hint a { color: var(--sp-accent); font-weight: 600; text-decoration: none; }
.sp-detalhe-confirm-hint a:hover { text-decoration: underline; }

.sp-detalhe-subtext {
  font-size: 0.78rem;
  color: var(--sp-text-muted);
  text-align: center;
  margin-top: 0.6rem;
}

/* ── #TableDetalhesPedido (resumo do pedido) ──────────────── */
#TableDetalhesPedido {
  width: 100%;
  border-collapse: collapse;
  background: #0e0e10;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  overflow: hidden;
  font-size: 0.84rem;
  color: var(--sp-text-secondary);
}

#TableDetalhesPedido th {
  background: #0a0a0a;
  color: var(--sp-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--sp-border);
  text-align: left;
}

#TableDetalhesPedido td {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--sp-border);
  vertical-align: top;
}

#TableDetalhesPedido tr:last-child td { border-bottom: none; }

#TableDetalhesPedido .nCampo {
  color: var(--sp-text-muted);
  font-size: 0.78rem;
  width: 40%;
  white-space: nowrap;
}

#TableDetalhesPedido td a {
  color: var(--sp-accent);
  font-weight: 600;
  text-decoration: none;
}
#TableDetalhesPedido td a:hover { text-decoration: underline; }

/* ── #TableDadosBancarios (dados de pgto / pix) ───────────── */
#TableDadosBancarios {
  width: 100%;
  border-collapse: collapse;
  background: #0e0e10;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  overflow: hidden;
  font-size: 0.84rem;
  color: var(--sp-text-secondary);
}

#TableDadosBancarios th {
  background: #0a0a0a;
  color: var(--sp-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--sp-border);
  text-align: left;
}

#TableDadosBancarios td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--sp-border);
  vertical-align: top;
}

#TableDadosBancarios tr:last-child > td { border-bottom: none; }

/* Logo da forma de pgto — limita tamanho */
#TableDadosBancarios td > img:not([id]) {
  max-width: 80px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto 0.5rem;
}

/* Valor do pedido */
#TableDadosBancarios .Valor {
  font-weight: 700;
  color: var(--sp-accent);
  font-size: 1.05rem;
}

/* Dados bancários texto */
#TableDadosBancarios .DadosBancarios {
  /* line-height: 1.8; */
  font-weight: 600;
  text-align: center;
}

/* ── QR Code — limita tamanho e centraliza ────────────────── */
#qrCode {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}

#qrCode svg {
  width: 180px !important;
  height: 180px !important;
  display: block;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

/* ── Input Pix Copia e Cola ───────────────────────────────── */
#pixpag-2 {
  width: 100%;
  background: #111;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  color: var(--sp-text-secondary);
  font-size: 0.72rem;
  font-family: 'Courier New', monospace;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  outline: none;
  cursor: text;
}
#pixpag-2:focus { border-color: var(--sp-accent); }

/* ── Botão Copiar Pix ─────────────────────────────────────── */
.copy-icon-2,
#copy-icon-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: #1a1a1a;
  border: 1px solid rgba(29,185,84,.45);
  border-radius: var(--sp-radius);
  color: var(--sp-accent);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  cursor: pointer;
  width: 100%;
  margin: 0.35rem 0 0.5rem;
  transition: background var(--sp-transition), color var(--sp-transition), border-color var(--sp-transition);
}

.copy-icon-2:hover,
#copy-icon-2:hover {
  background: var(--sp-accent-muted);
  border-color: var(--sp-accent);
}

/* Estado "copiado" */
.sp-copy-btn--ok,
#copy-icon-2.sp-copy-btn--ok {
  background: rgba(29,185,84,.18) !important;
  border-color: var(--sp-accent) !important;
  color: var(--sp-accent) !important;
}

/* ── Instruções Pix ───────────────────────────────────────── */
.pix-instrucoes {
  background: #0a0a0a;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 1rem 1.1rem;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--sp-text-secondary);
  line-height: 1.6;
}

.pix-instrucoes h3 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sp-text-primary);
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}

.lista-pix {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lista-pix li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--sp-text-muted);
}

.lista-pix li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--sp-accent);
  font-weight: 700;
}

.lista-pix li strong { color: var(--sp-text-secondary); }

/* ── Responsivo ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .sp-detalhe-grid {
    grid-template-columns: 1fr;
  }
  .sp-detalhe-single { max-width: 100%; }
}

/* ── Light theme ──────────────────────────────────────────── */
[data-sp-theme="light"] #TableDetalhesPedido,
[data-sp-theme="light"] #TableDadosBancarios {
  background: #fff;
  border-color: #ddd;
  color: #444;
}
[data-sp-theme="light"] #TableDetalhesPedido th,
[data-sp-theme="light"] #TableDadosBancarios th  { background: #f7f7f7; color: #777; border-color: #ddd; }
[data-sp-theme="light"] #TableDetalhesPedido td,
[data-sp-theme="light"] #TableDadosBancarios td  { border-color: #eee; }
[data-sp-theme="light"] #pixpag-2                { background: #f5f5f5; color: #333; border-color: #ccc; }
[data-sp-theme="light"] .pix-instrucoes          { background: #fafafa; border-color: #e0e0e0; }
[data-sp-theme="light"] .copy-icon-2,
[data-sp-theme="light"] #copy-icon-2             { background: #f0fff5; border-color: #1db954; }