/* ==========================================================
   Taz Músicas — "paredão à noite"
   noite violeta, palco em camadas, âmbar de LED; cada categoria tem sua cor
   ========================================================== */
:root {
  --noite: #120e22;
  --palco: #1c1733;
  --palco-2: #262043;
  --palco-3: #312a55;
  --linha: #352d5c;
  --texto: #f4f0fb;
  --texto-2: #a9a1c4;
  --texto-3: #7c7499;
  --led: #ffb627;
  --led-forte: #ffc95a;
  --led-tinta: #241500;
  --ok: #5fd39a;
  --atencao: #ffb627;
  --erro: #ff7a85;
  --raio-g: 18px;
  --raio: 12px;
  --raio-p: 8px;
  --lateral: 264px;
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --ui: "Figtree", system-ui, sans-serif;
  color-scheme: dark;
}

/* cores das categorias (mesma ordem de categorias.py) */
.cat-0 { --cat: #48c774; }   /* Torcidas */
.cat-1 { --cat: #ffb627; }   /* Bloquinho e Pagodão */
.cat-2 { --cat: #e0975a; }   /* Sertanejo */
.cat-3 { --cat: #ff8a3d; }   /* Forró e Piseiro */
.cat-4 { --cat: #b18cff; }   /* Pagode e Samba */
.cat-5 { --cat: #ff6fa3; }   /* Arrocha e Seresta */
.cat-6 { --cat: #5aa9ff; }   /* Rap e Trap */
.cat-7 { --cat: #ff5a5f; }   /* Funk */
.cat-8 { --cat: #8f88a8; }   /* Outros */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--noite); color: var(--texto);
  font: 400 15px/1.55 var(--ui); min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--led-forte); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-size: 1.35rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--led); outline-offset: 2px; border-radius: 4px; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--led); color: var(--led-tinta); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.pular:focus { left: 8px; }
[hidden] { display: none !important; }

.icone { width: 22px; height: 22px; fill: currentColor; flex: none; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
.marca:hover { text-decoration: none; }
.marca-icone { width: 34px; height: 34px; flex: none; }
.marca-redemoinho { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.marca-nome { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; }
.marca-nome span { font-weight: 500; color: var(--texto-2); margin-left: 5px; letter-spacing: 0; }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--led); color: var(--led-tinta); border: 0; border-radius: 999px;
  padding: 11px 22px; font: 700 .95rem var(--ui); cursor: pointer; text-decoration: none;
  transition: background .15s, transform .1s;
}
.botao:hover { background: var(--led-forte); text-decoration: none; }
.botao:active { transform: scale(.97); }
.botao:disabled { background: var(--palco-2); color: var(--texto-3); cursor: not-allowed; }
.botao .icone { width: 18px; height: 18px; }
.botao.fantasma { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--linha); }
.botao.fantasma:hover { box-shadow: inset 0 0 0 1.5px var(--texto-2); }
.botao.pequeno { padding: 7px 14px; font-size: .84rem; }
.botao.grande { padding: 15px 30px; font-size: 1.05rem; }
.botao.largo { width: 100%; }
button.link { background: none; border: 0; color: var(--texto-2); font: inherit; cursor: pointer; padding: 0; }
button.link:hover { color: var(--texto); text-decoration: underline; }
.icone-botao { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--texto-2); cursor: pointer; }
.icone-botao:hover { background: var(--palco-2); color: var(--texto); }

/* ==========================================================
   APP (membro logado): barra lateral + palco, estilo player
   ========================================================== */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px;
  padding: 22px 14px 16px; background: #0d0a19; border-right: 1px solid #1f1938; overflow-y: auto;
}
.lateral .marca { padding: 0 10px; }
.lateral-nav { display: grid; gap: 2px; }
.lateral-nav a {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--raio-p);
  color: var(--texto-2); font-weight: 600; font-size: .95rem;
}
.lateral-nav a:hover { color: var(--texto); background: var(--palco); text-decoration: none; }
.lateral-nav a[aria-current] { color: var(--texto); background: var(--palco-2); }
.lateral-nav a[aria-current] .icone { fill: var(--led); }
.lateral-cats h2 { font: 600 .8rem var(--ui); color: var(--texto-3); margin: 0 12px 6px; letter-spacing: 0; }
.lateral-cats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.lateral-cats a { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: var(--raio-p); color: var(--texto-2); font-size: .9rem; }
.lateral-cats a:hover { background: var(--palco); color: var(--texto); text-decoration: none; }
.lateral-cats small { margin-left: auto; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cat, var(--led)); flex: none; }
.lateral-conta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border-radius: var(--raio); background: var(--palco); }
.lateral-conta strong { display: block; font-size: .92rem; }
.lateral-conta small { color: var(--texto-2); font-size: .8rem; }
.lateral-conta form { margin: 0; }

.palco { min-width: 0; background: linear-gradient(180deg, #1a1433 0, var(--noite) 420px); }
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 14px clamp(16px, 3vw, 32px); background: rgba(18, 14, 34, .82); backdrop-filter: blur(14px);
}
.marca-celular { display: none; }
.busca-topo { position: relative; flex: 1; max-width: 520px; display: flex; align-items: center; }
.busca-topo .icone { position: absolute; left: 16px; width: 20px; height: 20px; fill: var(--texto-2); pointer-events: none; }
.busca-topo input {
  width: 100%; height: 46px; padding: 0 44px 0 48px; border-radius: 999px; border: 1.5px solid transparent;
  background: var(--palco-2); color: var(--texto); font: 500 .98rem var(--ui);
}
.busca-topo input::placeholder { color: var(--texto-3); }
.busca-topo input:focus { outline: none; border-color: var(--led); background: var(--palco-3); }
.busca-topo input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.busca-topo kbd { position: absolute; right: 14px; font: 600 .75rem var(--ui); color: var(--texto-3); border: 1px solid var(--linha); border-radius: 6px; padding: 1px 7px; }
.busca-topo input:focus ~ kbd, .busca-topo input:not(:placeholder-shown) ~ kbd { display: none; }
.aviso-teste { margin: 0; padding: 8px clamp(16px, 3vw, 32px); background: rgba(255, 182, 39, .1); color: var(--led-forte); font-size: .85rem; }
.conteudo { padding: 8px clamp(16px, 3vw, 32px) 64px; max-width: 1480px; }
.abas { display: none; }

/* ---------- início ---------- */
.saudacao { padding: 18px 0 8px; }
.saudacao h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: .2em; }
.saudacao p { color: var(--texto-2); font-size: 1.02rem; }

.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 14px 0 26px; }
.atalho {
  display: flex; align-items: center; min-height: 64px; border-radius: var(--raio-p); overflow: hidden;
  background: color-mix(in srgb, var(--cat) 16%, var(--palco)); color: var(--texto);
  transition: background .15s;
}
.atalho:hover { text-decoration: none; background: color-mix(in srgb, var(--cat) 28%, var(--palco)); }
.atalho-capa { width: 64px; height: 64px; flex: none; background: color-mix(in srgb, var(--cat) 55%, #000); }
.atalho-capa img { width: 100%; height: 100%; object-fit: cover; }
.atalho-nome { padding: 0 14px; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.atalho-nome small { display: block; font-weight: 500; color: var(--texto-2); font-size: .8rem; }

.liberar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 16px;
  padding: 16px 18px; margin: 0 0 34px; border-radius: var(--raio-g);
  background: linear-gradient(100deg, rgba(255, 182, 39, .14), rgba(255, 182, 39, .03) 60%), var(--palco);
  box-shadow: inset 0 0 0 1px rgba(255, 182, 39, .22);
}
.liberar-icone { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 182, 39, .16); }
.liberar-icone .icone { fill: var(--led); }
.liberar label strong { display: block; font-family: var(--display); font-size: 1.05rem; color: var(--texto); }
.liberar label small { color: var(--texto-2); font-size: .86rem; font-weight: 500; }
.liberar-campo { display: flex; gap: 8px; }
.liberar-campo input { width: 190px; height: 44px; border-radius: 999px; padding: 0 18px; }
.liberar-status { grid-column: 2 / -1; margin: 0; font-size: .86rem; color: var(--texto-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.prateleira { margin-bottom: 34px; }
.prateleira header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.prateleira h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.45rem; }
.prateleira h2 .bolinha { width: 12px; height: 12px; }
.prateleira header p { margin: 2px 0 0; color: var(--texto-3); font-size: .86rem; }
.prateleira-acoes { display: flex; align-items: center; gap: 4px; flex: none; }
.prateleira-acoes a { color: var(--texto-2); font-weight: 600; font-size: .88rem; margin-right: 8px; }
.prateleira-acoes a:hover { color: var(--texto); }
.trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: 196px; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { scroll-snap-align: start; }

/* ---------- cartão de música ---------- */
.card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 12px;
  border-radius: var(--raio); background: var(--palco); transition: background .15s;
}
.card:hover { background: var(--palco-2); }
.card-capa { position: relative; display: block; padding: 0; border: 0; border-radius: var(--raio-p); overflow: hidden; cursor: pointer; background: none; aspect-ratio: 1; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7); }
.capa {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden;
  background:
    radial-gradient(90% 90% at 15% 10%, var(--cat, #8f88a8) 0, transparent 70%),
    linear-gradient(140deg, color-mix(in srgb, var(--cat, #8f88a8) 60%, #000), #140f26);
}
.capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.capa-letras { display: none; font-family: var(--display); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.04em; color: rgba(255, 255, 255, .92); text-transform: uppercase; }
/* capa gerada: cartaz com o nome da música (cada uma fica diferente) */
.capa-titulo {
  position: absolute; left: 12px; right: 12px; bottom: 12px; font: 800 1.12rem/1.02 var(--display);
  letter-spacing: -0.02em; color: #fff; text-transform: uppercase; overflow-wrap: anywhere; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.capa::after {
  content: ""; position: absolute; left: 12px; top: 40%; width: 34px; height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, .55); box-shadow: 0 -9px 0 rgba(255, 255, 255, .3), 0 -18px 0 rgba(255, 255, 255, .18);
}
.capa:has(img)::after { display: none; }
.linha-capa .capa-titulo, .capa.mini .capa-titulo, .atalho-capa .capa-titulo { display: none; }
.linha-capa .capa-letras, .capa.mini .capa-letras { display: block; }
.linha-capa .capa::after, .capa.mini::after { display: none; }
.selo-vel { position: absolute; z-index: 2; left: 8px; top: 8px; background: rgba(10, 8, 20, .78); color: #fff; font: 700 .72rem var(--ui); padding: 3px 8px; border-radius: 999px; }
.card-play {
  position: absolute; z-index: 2; right: 8px; bottom: 8px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--led); box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s;
}
.card-play .icone { fill: var(--led-tinta); width: 22px; height: 22px; }
.card:hover .card-play, .card-capa:focus-visible .card-play { opacity: 1; transform: none; }
.card-info { min-width: 0; padding: 0 2px; }
.card-info h3 { font: 700 .95rem/1.3 var(--ui); letter-spacing: 0; margin: 0 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.card-info p { margin: 0; color: var(--texto-2); font-size: .82rem; display: flex; align-items: center; gap: 6px; }
.card-info p::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cat); flex: none; }
.card > .id-botao { margin-top: auto; flex: none; }
.fav-botao.sobre-capa { position: absolute; z-index: 3; top: 16px; right: 16px; width: 34px; height: 34px; background: rgba(10, 8, 20, .62); backdrop-filter: blur(6px); opacity: 0; transition: opacity .15s; }
.fav-botao.sobre-capa .icone { stroke: #fff; }
.card:hover .fav-botao.sobre-capa, .fav-botao.sobre-capa:focus-visible, .fav-botao.sobre-capa[aria-pressed="true"] { opacity: 1; }
@media (hover: none) { .fav-botao.sobre-capa { opacity: 1; } }

.id-botao {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  height: 36px; padding: 0 10px 0 12px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--palco-3); color: var(--texto); font: 600 .84rem var(--ui); font-variant-numeric: tabular-nums;
  transition: background .15s, color .15s;
}
.id-botao span { overflow: hidden; text-overflow: clip; white-space: nowrap; letter-spacing: .01em; }
.id-botao .icone { width: 16px; height: 16px; fill: var(--texto-2); }
.id-botao:hover { background: var(--led); color: var(--led-tinta); }
.id-botao:hover .icone { fill: var(--led-tinta); }
.id-botao.copiado { background: var(--ok); color: #062615; }
.id-botao.copiado .icone { fill: #062615; }
.fav-botao { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 0; background: var(--palco-3); cursor: pointer; display: grid; place-items: center; }
.fav-botao .icone { width: 18px; height: 18px; fill: transparent; stroke: var(--texto-2); stroke-width: 2; }
.fav-botao:hover .icone { stroke: var(--texto); }
.fav-botao[aria-pressed="true"] .icone { fill: var(--led); stroke: var(--led); }
.fav-botao.pulsa .icone { animation: pulsa .35s ease-out; }
@keyframes pulsa { 40% { transform: scale(1.35); } }
.fav-botao.com-texto { width: auto; height: auto; border-radius: 999px; display: inline-flex; gap: 8px; padding: 11px 20px; background: transparent; color: var(--texto); }

/* ---------- busca / resultados ---------- */
.pagina-topo { padding: 18px 0 6px; }
.pagina-topo p { color: var(--texto-2); }
.faixa-categoria {
  position: relative; display: flex; align-items: flex-end; gap: 24px; min-height: 230px;
  margin: -8px calc(-1 * clamp(16px, 3vw, 32px)) 22px; padding: 28px clamp(16px, 3vw, 32px); overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat, var(--led)) 55%, #120e22) 0, var(--noite) 100%);
}
.faixa-capas { position: absolute; right: -20px; top: 18px; display: flex; gap: 12px; transform: rotate(-6deg); opacity: .5; }
.faixa-capas img { width: 150px; aspect-ratio: 1; object-fit: cover; border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.faixa-texto { position: relative; z-index: 1; }
.faixa-texto p { margin: 0; color: rgba(255, 255, 255, .8); font-weight: 600; font-size: .9rem; }
.faixa-texto h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin: 4px 0 6px; line-height: .95; }

.filtros-busca { margin-bottom: 18px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip-cat { flex: none; padding: 8px 16px; border-radius: 999px; background: var(--palco-2); color: var(--texto); font-weight: 600; font-size: .88rem; white-space: nowrap; }
.chip-cat:hover { background: var(--palco-3); text-decoration: none; }
.chip-cat[aria-current] { background: var(--cat, var(--led)); color: #140f00; }
.avancada { border-radius: var(--raio); background: var(--palco); }
.avancada summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 11px 16px; font-weight: 600; color: var(--texto-2); list-style: none; }
.avancada summary::-webkit-details-marker { display: none; }
.avancada summary .icone { width: 18px; height: 18px; }
.avancada summary:hover { color: var(--texto); }
.avancada[open] summary { border-bottom: 1px solid var(--linha); }
.avancada-grade { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; padding: 16px; }
.avancada fieldset { border: 0; padding: 0; margin: 0; }
.avancada legend { font-size: .85rem; color: var(--texto-2); font-weight: 600; margin-bottom: 8px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px; }
.checks label { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--raio-p); cursor: pointer; font-size: .9rem; }
.checks label:hover { background: var(--palco-2); }
.checks input, .avancada .check input { width: 17px; height: 17px; accent-color: var(--led); }
.avancada-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.avancada-campos label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--texto-2); font-weight: 600; }
.avancada-campos .check { flex-direction: row; align-items: center; gap: 9px; grid-column: 1 / -1; color: var(--texto); font-weight: 500; }
.avancada-acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 0 16px 16px; }
.avancada-acoes p { margin: 4px 0 0; flex-basis: 100%; font-size: .84rem; color: var(--texto-3); }
.resultado-total { color: var(--texto-2); font-weight: 600; margin: 6px 0 12px; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.resultados.carregando { opacity: .55; transition: opacity .2s; }
.paginas { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--texto-2); margin: 26px 0; font-size: .92rem; }
.vazio-grande { text-align: center; padding: 56px 16px; color: var(--texto-2); }
.vazio-grande p:first-child { font-family: var(--display); font-size: 1.4rem; color: var(--texto); font-weight: 700; }

/* ---------- favoritas ---------- */
.favoritas-topo { --cat: #8b5cf6; align-items: center; }
.favoritas-icone { position: relative; z-index: 1; width: 150px; height: 150px; flex: none; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #5b3fd6, #ffb627); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.favoritas-icone .icone { width: 64px; height: 64px; fill: #fff; }
.favoritas-acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.favoritas-acoes p { margin: 0; color: var(--texto-3); font-size: .86rem; }
.lista-musicas { list-style: none; margin: 0; padding: 0; }
.linha-musica { display: grid; grid-template-columns: 32px 52px minmax(0, 1fr) 210px 40px; align-items: center; gap: 14px; padding: 8px 10px; border-radius: var(--raio-p); }
.linha-musica:hover { background: var(--palco); }
.linha-n { color: var(--texto-3); text-align: right; font-variant-numeric: tabular-nums; }
.linha-capa { width: 52px; height: 52px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; background: none; }
.linha-capa .capa-letras { font-size: 1.1rem; }
.linha-nome { min-width: 0; }
.linha-nome strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.linha-nome small { color: var(--texto-2); }

/* ---------- janela de detalhes ---------- */
.detalhe {
  width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 22px;
  background: var(--palco); color: var(--texto); overflow: auto; box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
}
.detalhe::backdrop { background: rgba(6, 4, 14, .72); backdrop-filter: blur(6px); }
.detalhe[open] { animation: abre .22s ease-out; }
@keyframes abre { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.detalhe-fundo { position: absolute; inset: 0 0 auto; height: 260px; background: linear-gradient(180deg, color-mix(in srgb, var(--cat, var(--led)) 55%, transparent), transparent); pointer-events: none; }
.detalhe-fechar { position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(0, 0, 0, .35); color: #fff; }
.detalhe-corpo { position: relative; display: grid; grid-template-columns: 300px 1fr; gap: 28px; padding: 30px; }
.detalhe-capa { aspect-ratio: 1; border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
.detalhe-capa .capa-titulo { font-size: clamp(1.6rem, 3vw, 2.3rem); left: 22px; right: 22px; bottom: 22px; -webkit-line-clamp: 5; }
.detalhe-capa::after { left: 22px; width: 54px; height: 6px; }
.detalhe-capa:has(img:not([hidden]))::after { display: none; }
.detalhe-capa img[hidden] + .capa-titulo { display: -webkit-box; }
.detalhe-video { position: absolute; inset: 0; z-index: 2; }
.detalhe-video:empty { display: none; }
.detalhe-video iframe { width: 100%; height: 100%; border: 0; background: #000; }
.detalhe-texto { display: flex; flex-direction: column; min-width: 0; padding-top: 6px; }
.detalhe-cat { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; color: var(--texto); font-weight: 700; font-size: .85rem; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .28); }
.detalhe-cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cat); }
.detalhe-texto h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 14px 0 6px; font-weight: 800; overflow-wrap: anywhere; }
.detalhe-original { color: var(--texto-2); font-size: .92rem; }
.detalhe-id {
  display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 0 12px;
  padding: 14px 18px; margin: 6px 0 16px; border: 0; border-radius: var(--raio); cursor: pointer;
  background: var(--noite); color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--linha); transition: box-shadow .15s;
}
.detalhe-id:hover { box-shadow: inset 0 0 0 1.5px var(--led); }
.detalhe-id-rotulo { font-size: .78rem; color: var(--texto-3); font-weight: 600; }
.detalhe-id-numero { grid-row: 2; font: 800 clamp(1.4rem, 3vw, 1.9rem) var(--display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.detalhe-id-acao { grid-row: 1 / 3; grid-column: 2; align-self: center; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--led); }
.detalhe-id-acao .icone { width: 18px; height: 18px; fill: var(--led); }
.detalhe-id.copiado { box-shadow: inset 0 0 0 1.5px var(--ok); }
.detalhe-id.copiado .detalhe-id-acao { color: var(--ok); }
.detalhe-id.copiado .detalhe-id-acao .icone { fill: var(--ok); }
.detalhe-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.detalhe-nota { margin: 16px 0 0; font-size: .82rem; color: var(--texto-3); }

/* ---------- aviso flutuante ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 200; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px;
  background: var(--texto); color: var(--noite); font-weight: 700; font-size: .92rem; box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  animation: sobe .25s ease-out; white-space: nowrap;
}
@keyframes sobe { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ==========================================================
   PÚBLICO: landing com o paredão de capas
   ========================================================== */
.topo-publico {
  position: absolute; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px clamp(16px, 4vw, 48px);
}
.topo-publico nav { display: flex; align-items: center; gap: 22px; }
.topo-publico nav a:not(.botao) { color: var(--texto); font-weight: 600; font-size: .95rem; }
.publico-conteudo { min-height: 70vh; }
.publico-conteudo.estreito { max-width: 460px; margin: 0 auto; padding: 110px 16px 64px; }
.publico-conteudo > .flash { max-width: 1120px; margin: 90px auto 0; }
.publico-conteudo .pagina-topo { padding-top: 100px; }
.publico-conteudo > .cabecalho-painel { max-width: 1180px; margin: 0 auto 24px; padding: 100px clamp(16px, 4vw, 48px) 0; box-sizing: border-box; }
.publico-conteudo > .pagina-topo, .publico-conteudo > .secao-app { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 48px); padding-right: clamp(16px, 4vw, 48px); }

.hero { position: relative; min-height: min(860px, 100vh); display: flex; align-items: center; overflow: hidden; padding: 120px clamp(16px, 4vw, 48px) 64px; isolation: isolate; }
.paredao {
  position: absolute; inset: -60px -10% -60px 30%; z-index: -2; display: grid; gap: 16px; align-content: center;
  transform: rotate(-8deg);
}
.paredao-faixa { overflow: hidden; }
.paredao-trilho { display: flex; gap: 16px; width: max-content; animation: paredao 80s linear infinite; }
.ao-contrario .paredao-trilho { animation-direction: reverse; animation-duration: 95s; }
.paredao img { width: 250px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; background: var(--palco); }
@keyframes paredao { to { transform: translateX(-50%); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--noite) 32%, rgba(18, 14, 34, .86) 52%, rgba(18, 14, 34, .25) 80%, rgba(18, 14, 34, .55)),
    linear-gradient(0deg, var(--noite) 0, transparent 30%);
}
.hero-texto { max-width: 640px; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.1rem); line-height: .98; letter-spacing: -0.035em; margin-bottom: 22px; }
.hero h1 .quebra { display: block; }
.hero-texto > p { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--texto-2); max-width: 54ch; }
.hero-acoes { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 34px; }
.hero-numeros { list-style: none; padding: 0; margin: 0; display: flex; gap: 34px; flex-wrap: wrap; color: var(--texto-2); font-size: .92rem; }
.hero-numeros strong { display: block; font: 800 1.9rem var(--display); color: var(--led); letter-spacing: -0.02em; }

.secao { max-width: 1180px; margin: 0 auto; padding: 72px clamp(16px, 4vw, 48px) 0; }
.secao > h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; margin-bottom: 8px; }
.secao-sub { color: var(--texto-2); font-size: 1.05rem; max-width: 60ch; margin-bottom: 28px; }
.secao-app { margin: 10px 0 36px; }
.secao-app > h2 { margin-bottom: 6px; }

.cat-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cat-bloco {
  position: relative; height: 170px; padding: 18px; border-radius: var(--raio-g); overflow: hidden;
  background: color-mix(in srgb, var(--cat) 72%, #120e22);
}
.cat-bloco h3 { font-size: 1.35rem; font-weight: 800; position: relative; z-index: 1; max-width: 70%; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.cat-bloco p { position: relative; z-index: 1; margin: 0; color: rgba(255, 255, 255, .85); font-weight: 600; font-size: .88rem; }
.cat-capas { position: absolute; right: -24px; bottom: -16px; display: flex; transform: rotate(18deg); }
.cat-capas img { width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 10px; margin-left: -48px; box-shadow: -6px 6px 18px rgba(0, 0, 0, .4); }

.passos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: passo; }
.passos li { counter-increment: passo; padding: 26px 22px; border-radius: var(--raio-g); background: var(--palco); }
.passos li::before { content: counter(passo); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 50%; background: var(--led); color: var(--led-tinta); font: 800 1.1rem var(--display); }
.passos h3 { font-size: 1.2rem; }
.passos p { color: var(--texto-2); margin: 0; }

.planos-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); gap: 16px; }
.plano { display: flex; flex-direction: column; padding: 26px; border-radius: var(--raio-g); background: var(--palco); box-shadow: inset 0 0 0 1px var(--linha); }
.plano-destaque { background: linear-gradient(160deg, rgba(255, 182, 39, .2), var(--palco) 55%); box-shadow: inset 0 0 0 1.5px var(--led); }
.plano-selo { align-self: flex-start; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: var(--led); color: var(--led-tinta); font-weight: 700; font-size: .8rem; }
.plano h3 { font-size: 1.2rem; margin-bottom: 10px; }
.plano-preco { font: 800 2.6rem var(--display); letter-spacing: -0.03em; margin: 0; }
.plano-prazo { color: var(--led-forte); font-weight: 600; font-size: .9rem; }
.plano-desc { color: var(--texto-2); }
.plano form, .plano > .botao { margin-top: auto; }

.perguntas { padding-bottom: 80px; }
.perguntas details { max-width: 820px; border-bottom: 1px solid var(--linha); }
.perguntas summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: 700 1.1rem var(--display); }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 500 1.6rem var(--ui); color: var(--led); transition: transform .2s; }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details p { color: var(--texto-2); padding-bottom: 20px; margin: 0; max-width: 65ch; }

.rodape { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 28px clamp(16px, 4vw, 48px); border-top: 1px solid var(--linha); color: var(--texto-3); font-size: .86rem; }
.rodape span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-2); font-weight: 700; }
.rodape .marca-icone { width: 20px; height: 20px; }

/* ==========================================================
   COMPONENTES COMPARTILHADOS (painel, pedidos, admin)
   ========================================================== */
.cartao { background: var(--palco); border-radius: var(--raio-g); padding: 22px; margin-bottom: 20px; }
.centro { text-align: center; }
.codigo { font: 800 3.4rem var(--display); color: var(--led); margin: 0; }
.lead { color: var(--texto-2); margin: 0 0 1em; }
.vazio, .pequeno-texto { color: var(--texto-3); font-size: .88rem; }
.flash { padding: 13px 18px; border-radius: var(--raio); margin: 12px 0 20px; font-weight: 600; }
.flash.ok { background: rgba(95, 211, 154, .14); color: var(--ok); }
.flash.erro { background: rgba(255, 122, 133, .14); color: var(--erro); }

.formulario { display: flex; flex-direction: column; gap: 14px; }
.formulario label, .liberar label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; color: var(--texto-2); font-weight: 600; }
.liberar label { gap: 2px; }
.formulario small { color: var(--texto-3); font-weight: 400; }
input, select, textarea {
  background: var(--noite); color: var(--texto); border: 1.5px solid var(--linha); border-radius: 10px;
  padding: 10px 13px; font: 500 .95rem var(--ui); width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--led); outline: none; }
textarea { resize: vertical; font-size: .85rem; }
.check { flex-direction: row !important; align-items: center; }
.check input { width: auto; accent-color: var(--led); }
.linha { display: flex; gap: 8px; align-items: flex-end; }
.linha > label { flex: 1; }
.curto { width: 120px; }
.formulario .abas { display: flex; gap: 8px; flex-wrap: wrap; position: static; background: none; padding: 0; }
.formulario .abas label { flex-direction: row; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--palco-2); cursor: pointer; color: var(--texto); }
.formulario .abas label:has(input:checked) { background: var(--led); color: var(--led-tinta); }
.formulario .abas input { width: auto; accent-color: var(--led-tinta); }
.erro-campo { background: rgba(255, 122, 133, .14); color: var(--erro); padding: 10px 13px; border-radius: 10px; margin: 0; font-size: .9rem; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; margin-bottom: 20px; }
.duas-colunas > .cartao { margin-bottom: 0; }

.cabecalho-painel { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 18px 0 24px; flex-wrap: wrap; }
.saldo { background: var(--palco); border-radius: var(--raio-g); padding: 14px 22px; display: grid; grid-template-columns: auto auto; gap: 0 18px; align-items: center; box-shadow: inset 0 0 0 1.5px rgba(255, 182, 39, .4); }
.saldo span { color: var(--texto-2); font-size: .85rem; }
.saldo strong { font: 800 2.1rem var(--display); grid-row: span 2; color: var(--led); }
.saldo a { font-size: .85rem; }
.acesso { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.acesso h2 { margin-bottom: .2em; }
.acesso .lead { margin: 0; }
.acesso.ativo { box-shadow: inset 0 0 0 1.5px rgba(95, 211, 154, .45); }
.planos-mini { display: flex; gap: 8px; flex-wrap: wrap; }
.planos-mini form { margin: 0; }
.contagem { font: 500 .95rem var(--ui); color: var(--texto-3); margin-left: 8px; letter-spacing: 0; }
code { font-size: .85em; color: var(--led-forte); background: rgba(255, 182, 39, .08); padding: 1px 6px; border-radius: 5px; }

.lista-simples { list-style: none; padding: 0; margin: 0; }
.lista-simples li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linha); }
.lista-simples li:last-child { border-bottom: 0; }
.lista-simples li > :first-child:not(.chip) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; color: var(--texto-3); font-weight: 600; font-size: .8rem; padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.titulo { max-width: 340px; }
td small { display: block; }
.erro-linha { color: var(--erro); font-size: .8rem; }
tr.inativo td { opacity: .45; }
tr.alerta td:nth-child(2) { color: var(--erro); }
.copiar { background: var(--palco-3); border: 0; color: var(--texto); border-radius: 999px; padding: 5px 12px; font: 600 .85rem var(--ui); font-variant-numeric: tabular-nums; cursor: pointer; }
.copiar:hover { background: var(--led); color: var(--led-tinta); }
.copiar.copiado { background: var(--ok); color: #062615; }
.botao.copiar { padding: 11px 22px; background: var(--led); color: var(--led-tinta); }

.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; background: var(--palco-3); color: var(--texto-2); }
.chip.aprovado, .chip.pago { background: rgba(95, 211, 154, .16); color: var(--ok); }
.chip.em_analise, .chip.processando, .chip.na_fila, .chip.pendente { background: rgba(255, 182, 39, .16); color: var(--atencao); }
.chip.negado, .chip.falhou, .chip.cancelado { background: rgba(255, 122, 133, .16); color: var(--erro); }

.pedido { text-align: center; display: flex; flex-direction: column; gap: 12px; }
.pedido label { text-align: left; font-size: .85rem; color: var(--texto-2); display: flex; flex-direction: column; gap: 6px; }
.qr { background: #fff; border-radius: 14px; padding: 10px; margin: 0 auto; max-width: 100%; height: auto; }
.estreito { max-width: 520px; }
.conteudo.estreito { margin: 0 auto; padding-top: 28px; }

.admin-nav, .filtros { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 24px; }
.admin-nav a, .filtros a { padding: 8px 16px; border-radius: 999px; color: var(--texto); background: var(--palco-2); font-size: .88rem; font-weight: 600; }
.admin-nav a[aria-current], .filtros a[aria-current] { background: var(--led); color: var(--led-tinta); }
.admin-nav a:hover, .filtros a:hover { text-decoration: none; background: var(--palco-3); }
.admin-nav a[aria-current]:hover, .filtros a[aria-current]:hover { background: var(--led-forte); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--palco); border-radius: var(--raio-g); padding: 18px; display: flex; flex-direction: column; gap: 2px; }
.kpi span { color: var(--texto-2); font-size: .85rem; }
.kpi strong { font: 800 1.7rem var(--display); }
.kpi small { color: var(--texto-3); }
.ver-tudo { font: 600 .85rem var(--ui); margin-left: 8px; }
.busca { display: flex; gap: 8px; margin-bottom: 16px; max-width: 420px; }
.busca.larga { max-width: 680px; }
.busca.larga select { max-width: 230px; }
.grade-pacotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.grade-pacotes.admin .linha { flex-wrap: wrap; }
.grade-pacotes.admin .linha label { min-width: 90px; }
.capa.mini { width: 64px; height: 40px; border-radius: 6px; }
.capa.mini .capa-letras { font-size: .9rem; }
.ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cat); margin-right: 8px; vertical-align: middle; }

.grafico { width: 100%; height: auto; display: block; }
.grafico .grade { stroke: var(--linha); stroke-width: 1; display: block; }
.grafico .grade.fraca { stroke-dasharray: 3 4; opacity: .6; }
.grafico .eixo { fill: var(--texto-3); font-size: 12px; font-family: var(--ui); }
.grafico .alvo { fill: transparent; }
.grafico .barra { fill: var(--led); }
.grafico .dia:hover .alvo { fill: rgba(255, 255, 255, .03); }
.grafico .dia:hover .barra { fill: var(--led-forte); }
.tabela-dados { margin-top: 12px; font-size: .85rem; color: var(--texto-2); }
.tabela-dados summary { cursor: pointer; }

/* ==========================================================
   RESPONSIVO
   ========================================================== */
@media (max-width: 1100px) {
  :root { --lateral: 224px; }
  .detalhe-corpo { grid-template-columns: 240px 1fr; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { display: none; }
  .marca-celular { display: inline-flex; order: -1; }
  .marca-celular .marca-icone { width: 30px; height: 30px; }
  .topo { padding: 10px 16px; }
  .conteudo { padding: 4px 16px calc(96px + env(safe-area-inset-bottom)); }
  .abas {
    display: flex; position: fixed; inset: auto 0 0; z-index: 30; justify-content: space-around;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(13, 10, 25, .85), #0d0a19 40%); backdrop-filter: blur(12px);
  }
  .abas a { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; padding: 4px; color: var(--texto-3); font-size: .72rem; font-weight: 600; }
  .abas a:hover { text-decoration: none; }
  .abas a[aria-current] { color: var(--texto); }
  .abas a[aria-current] .icone { fill: var(--led); }
  .duas-colunas, .avancada-grade { grid-template-columns: 1fr; }
  .liberar { grid-template-columns: auto 1fr; }
  .liberar-campo { grid-column: 1 / -1; }
  .liberar-campo input { flex: 1; width: auto; }
  .liberar-status { grid-column: 1 / -1; }
  .passos { grid-template-columns: 1fr; }
  .paredao { inset: -40px -40% 34% -10%; opacity: .6; }
  .hero { align-items: flex-end; min-height: 94vh; }
  .hero::before { background: linear-gradient(0deg, var(--noite) 40%, rgba(18, 14, 34, .7) 68%, rgba(18, 14, 34, .3)); }
  .topo-publico nav a:not(.botao) { display: none; }
  .detalhe-corpo { grid-template-columns: 1fr; padding: 22px; gap: 18px; }
  .detalhe-capa { max-width: 260px; width: 100%; margin: 0 auto; }
  .faixa-capas { opacity: .3; }
  .linha-musica { grid-template-columns: 44px minmax(0, 1fr) 40px; grid-template-areas: "capa nome fav" "capa id fav"; gap: 4px 12px; }
  .linha-n { display: none; }
  .linha-capa { grid-area: capa; width: 44px; height: 44px; }
  .linha-nome { grid-area: nome; }
  .linha-musica .id-botao { grid-area: id; height: 30px; justify-self: start; }
  .linha-musica .fav-botao { grid-area: fav; }
  .favoritas-icone { width: 96px; height: 96px; }
  .favoritas-icone .icone { width: 44px; height: 44px; }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .trilho { grid-auto-columns: 152px; gap: 10px; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 8px 8px 10px; gap: 8px; }
  .card-info h3 { font-size: .88rem; }
  .id-botao { font-size: .8rem; padding: 0 8px 0 10px; height: 32px; }
  .fav-botao.sobre-capa { top: 12px; right: 12px; width: 30px; height: 30px; }
  .capa-titulo { font-size: .92rem; left: 10px; right: 10px; bottom: 10px; }
  .atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .atalho { min-height: 54px; }
  .atalho-capa { width: 54px; height: 54px; }
  .atalho-nome { padding: 0 10px; font-size: .84rem; }
  .atalho-nome small { display: none; }
  .prateleira-acoes .icone-botao { display: none; }
  .avancada-campos { grid-template-columns: 1fr; }
  .paredao img { width: 170px; }
  .hero-numeros { gap: 22px; }
  .hero-numeros strong { font-size: 1.5rem; }
  .faixa-categoria { min-height: 180px; }
  .cabecalho-painel { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .paredao-trilho { animation: none; }
}

/* ==========================================================
   v4: playlists, biblioteca, Grupo de Músicas por categoria
   ========================================================== */
.mini-capa { width: 26px; height: 26px; flex: none; border-radius: 6px; display: grid; place-items: center; background: var(--palco-2); }
.mini-capa .icone { width: 15px; height: 15px; fill: var(--texto-2); }
.mini-capa.fav { background: linear-gradient(135deg, #5b3fd6, #ffb627); }
.mini-capa.fav .icone { fill: #fff; }
.lateral-playlists a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-cats a[aria-current] { background: var(--palco-2); color: var(--texto); }
.lateral-nova { color: var(--texto-3) !important; }
.lateral-nova:hover { color: var(--texto) !important; }

/* menu "Adicionar à playlist" na janela da música */
.menu-playlists { margin-top: 12px; padding: 10px; border-radius: var(--raio); background: var(--noite); box-shadow: inset 0 0 0 1px var(--linha); }
.menu-playlists ul { list-style: none; margin: 0 0 8px; padding: 0; max-height: 190px; overflow-y: auto; }
.menu-playlists li button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: var(--raio-p);
  background: none; color: var(--texto); font: 600 .9rem var(--ui); text-align: left; cursor: pointer;
}
.menu-playlists li button:hover { background: var(--palco-2); }
.menu-playlists li button small { margin-left: auto; color: var(--texto-3); font-weight: 500; }
.menu-playlists .marcador { width: 20px; height: 20px; flex: none; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--linha); display: grid; place-items: center; }
.menu-playlists .marcador .icone { width: 15px; height: 15px; fill: transparent; }
.menu-playlists [aria-pressed="true"] .marcador { background: var(--led); box-shadow: none; }
.menu-playlists [aria-pressed="true"] .marcador .icone { fill: var(--led-tinta); }
.menu-playlists .vazio-menu { color: var(--texto-3); font-size: .86rem; padding: 6px 10px; }
.nova-playlist { display: flex; gap: 8px; }
.nova-playlist input { height: 38px; }
.nova-playlist .botao { flex: none; }

/* sua biblioteca */
.biblioteca-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 10px; }
.pasta { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 16px; border-radius: var(--raio); background: var(--palco); color: var(--texto); }
.pasta:hover { background: var(--palco-2); text-decoration: none; }
.pasta-capa { aspect-ratio: 1; border-radius: var(--raio-p); overflow: hidden; display: grid; place-items: center; margin-bottom: 8px; background: linear-gradient(140deg, var(--palco-3), #140f26); }
.pasta-capa img { width: 100%; height: 100%; object-fit: cover; }
.pasta-capa .icone { width: 54px; height: 54px; fill: var(--texto-2); }
.pasta strong { font: 700 1rem var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pasta small { color: var(--texto-2); }
.pasta-favoritas .pasta-capa { background: linear-gradient(135deg, #5b3fd6, #ffb627); }
.pasta-favoritas .pasta-capa .icone { fill: #fff; }
.pasta-nova { background: transparent; outline: 1.5px dashed var(--linha); outline-offset: -1.5px; }
.pasta-nova .pasta-capa { background: var(--palco); }
.pasta-nova label { color: var(--texto); }
.pasta-nova input { margin: 6px 0 8px; }
.dica-biblioteca { color: var(--texto-3); margin-top: 18px; }

/* página da playlist */
.playlist-topo { --cat: #6d4ad8; align-items: center; }
.playlist-mosaico { position: relative; z-index: 1; width: 170px; height: 170px; flex: none; display: grid; grid-template-columns: 1fr 1fr; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); background: var(--palco-2); }
.playlist-mosaico img, .playlist-mosaico .capa { width: 100%; height: 100%; object-fit: cover; }
.playlist-mosaico img:only-child, .playlist-mosaico .capa:only-child { grid-column: 1 / -1; grid-row: 1 / 3; }
.playlist-vazia { grid-column: 1 / -1; display: grid; place-items: center; }
.playlist-vazia .icone { width: 64px; height: 64px; fill: var(--texto-2); }
.renomear { position: relative; }
.renomear summary { list-style: none; cursor: pointer; }
.renomear summary::-webkit-details-marker { display: none; }
.renomear[open] form { position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; width: 320px; padding: 10px; border-radius: var(--raio); background: var(--palco-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.favoritas-acoes form { margin: 0; }
.lista-musicas[data-playlist] .linha-musica { grid-template-columns: 32px 52px minmax(0, 1fr) 210px 40px 40px; }
.tirar .icone { width: 18px; height: 18px; }

/* Grupo de Músicas: categorias avulsas */
.grupo-topo { padding-bottom: 10px; }
.grupo-topo p { max-width: 70ch; }
.cat-planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cat-plano { display: flex; flex-direction: column; border-radius: var(--raio-g); overflow: hidden; background: var(--palco); scroll-margin-top: 90px; }
.cat-plano:target { box-shadow: 0 0 0 2px var(--cat); }
.cat-plano-topo { position: relative; height: 128px; padding: 16px 18px; overflow: hidden; background: color-mix(in srgb, var(--cat) 72%, #120e22); }
.cat-plano-topo h3 { position: relative; z-index: 1; font-size: 1.3rem; color: #fff; max-width: 55%; margin-bottom: 4px; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); }
.cat-plano .cat-capas { right: -40px; bottom: -34px; }
.cat-plano .cat-capas img { width: 84px; margin-left: -40px; }
.cat-plano-topo p { position: relative; z-index: 1; margin: 0; color: rgba(255, 255, 255, .85); font-weight: 600; font-size: .86rem; }
.cat-plano-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 16px; }
.cat-plano-base form { margin: 0; }
.cat-plano-preco { margin: 0; color: var(--texto-2); font-size: .88rem; }
.cat-plano-preco strong { display: block; font: 800 1.5rem var(--display); color: var(--texto); letter-spacing: -0.02em; }
.cat-plano-status { flex-basis: 100%; display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ok); font-weight: 600; font-size: .86rem; }
.cat-plano-status .icone { width: 18px; height: 18px; fill: var(--ok); }

/* início: categorias que a pessoa ainda não tem */
.desbloquear { margin: -10px 0 30px; }
.desbloquear h2 { font-size: 1.1rem; margin-bottom: 4px; }
.chip-cat.trancada { display: inline-flex; align-items: center; gap: 7px; color: var(--texto-2); }
.chip-cat.trancada .icone { width: 15px; height: 15px; fill: var(--cat); }
.chip-cat small { color: var(--texto-3); }

@media (max-width: 860px) {
  .lista-musicas[data-playlist] .linha-musica { grid-template-columns: 44px minmax(0, 1fr) 40px 40px; grid-template-areas: "capa nome fav tirar" "capa id fav tirar"; }
  .lista-musicas[data-playlist] .tirar { grid-area: tirar; }
  .playlist-mosaico { width: 110px; height: 110px; }
  .biblioteca-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .renomear[open] form { width: min(320px, calc(100vw - 32px)); }
}


/* ==========================================================
   v5: primeiras impressões mais organizadas e responsivas
   ========================================================== */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px;
  min-height: min(760px, 100svh); padding: 104px clamp(20px, 5vw, 72px) 48px;
}
.hero-texto { max-width: 680px; }
.hero h1 { font-size: clamp(2.5rem, 5.1vw, 4.5rem); line-height: 1; text-wrap: balance; margin-bottom: 20px; }
.hero-texto > p { text-wrap: pretty; }
.hero-numeros { display: grid; grid-template-columns: repeat(3, max-content); gap: 8px 36px; }
.hero-numeros li { line-height: 1.3; }

/* cartão de amostra: mostra na hora o que a pessoa compra */
.amostra {
  position: relative; z-index: 1; width: 300px; margin: 0; padding: 14px; border-radius: 20px;
  background: rgba(28, 23, 51, .86); backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transform: rotate(2.5deg);
}
.amostra-capa { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--palco-2); }
.amostra-capa img { width: 100%; height: 100%; object-fit: cover; }
.amostra figcaption { display: flex; flex-direction: column; gap: 4px; padding: 14px 4px 2px; }
.amostra strong { font: 700 1.05rem/1.25 var(--ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.amostra-cat { display: flex; align-items: center; gap: 7px; color: var(--texto-2); font-size: .85rem; }
.amostra-cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cat); }
.amostra-id {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 10px; padding: 10px 14px; border-radius: 999px;
  background: var(--noite); color: var(--texto-2); font: 700 1rem var(--ui); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.amostra-id .icone { width: 16px; height: 16px; fill: var(--led); }
.amostra .botao { font-size: .9rem; padding: 10px 16px; }

/* seções da página inicial: ritmo e alinhamento únicos */
.secao { padding-top: clamp(56px, 8vw, 88px); }
.secao > h2 { text-wrap: balance; }
.cat-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cat-bloco { height: 150px; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 104px; }
  .amostra { display: none; }
  .hero-texto { max-width: 720px; }
  .cat-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .topo-publico { padding: 14px 20px; }
  .hero { padding: 46vh 20px 40px; align-items: end; }
  .paredao { inset: 0 -45% auto -15%; height: 52vh; opacity: .75; align-content: start; padding-top: 70px; }
  .hero::before { background: linear-gradient(180deg, rgba(18, 14, 34, .35) 0, rgba(18, 14, 34, .55) 30%, var(--noite) 54%); }
  .hero h1 { font-size: clamp(2.1rem, 8.6vw, 3rem); }
  .hero-acoes { margin: 22px 0 26px; }
  .hero-acoes .botao { flex: 1 1 auto; }
  .cat-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cat-bloco { height: 124px; padding: 14px; border-radius: var(--raio); }
  .cat-bloco h3 { font-size: 1.02rem; max-width: 100%; }
  .cat-capas { right: -28px; bottom: -24px; }
  .cat-capas img { width: 66px; margin-left: -34px; }
  .passos { gap: 10px; margin-top: 20px; }
  .passos li { display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; padding: 16px; }
  .passos li::before { grid-row: span 2; margin: 0; }
  .passos h3 { margin: 0 0 2px; font-size: 1.05rem; }
  .secao-sub { font-size: .98rem; margin-bottom: 20px; }
  .planos-grade { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .hero { padding-top: 40vh; }
  .hero-numeros { gap: 6px 22px; font-size: .82rem; }
  .hero-numeros strong { font-size: 1.45rem; }
  .hero-acoes { flex-direction: column; }
}

/* membro no celular: músicas aparecem já na primeira tela */
@media (max-width: 560px) {
  .saudacao { padding-top: 10px; }
  .saudacao h1 { font-size: 1.75rem; }
  .saudacao p { font-size: .9rem; margin-bottom: .6em; }
  .atalhos { margin: 8px 0 22px; gap: 6px; }
  .atalho { min-height: 46px; border-radius: 6px; }
  .atalho-capa { width: 46px; height: 46px; }
  .atalho-nome { font-size: .8rem; line-height: 1.15; padding: 0 8px; }
  .liberar { padding: 14px; gap: 8px 12px; margin-bottom: 28px; }
  .liberar-icone { width: 38px; height: 38px; }
  .liberar label small { font-size: .8rem; }
  .prateleira { margin-bottom: 26px; }
  .prateleira h2 { font-size: 1.2rem; }
}
.cat-bloco p { max-width: 55%; }

/* mesma margem esquerda no topo, no hero e nas seções (telas largas) */
.topo-publico, .hero, .rodape { padding-left: max(clamp(20px, 5vw, 72px), calc((100vw - 1180px) / 2 + 48px));
  padding-right: max(clamp(20px, 5vw, 72px), calc((100vw - 1180px) / 2 + 48px)); }
@media (max-width: 860px) { .topo-publico, .hero, .rodape { padding-left: 20px; padding-right: 20px; } }
/* ID inteiro nos cartões do celular */
@media (max-width: 560px) {
  .card > .id-botao { justify-content: center; padding: 0 6px; font-size: .78rem; letter-spacing: 0; }
  .card > .id-botao .icone { display: none; }
}

/* ==========================================================
   v6: segurança da conta
   ========================================================== */
.campo-codigo { font: 800 2rem var(--display); letter-spacing: .35em; text-align: center; padding: 14px; font-variant-numeric: tabular-nums; }
.campo-codigo::placeholder { color: var(--palco-3); }
.cartao-codigo .reenviar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; color: var(--texto-3); font-size: .88rem; margin: 0; }
.cartao-codigo .reenviar .link { color: var(--led-forte); font-weight: 600; }
.formulario .pequeno-texto { margin: 0; }
.lateral-conta-link { min-width: 0; color: var(--texto); border-radius: var(--raio-p); }
.lateral-conta-link:hover { text-decoration: none; }
.lateral-conta-link:hover strong { text-decoration: underline; }
.lateral-conta-link strong, .lateral-conta-link small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { display: none; margin-left: auto; width: 38px; height: 38px; flex: none; border-radius: 50%; place-items: center;
  background: var(--palco-3); color: var(--texto); font: 800 1rem var(--display); }
.avatar:hover { text-decoration: none; background: var(--led); color: var(--led-tinta); }
.cabecalho-secao { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cabecalho-secao .lead { margin-bottom: .6em; }
.lista-aparelhos { list-style: none; margin: 8px 0 14px; padding: 0; }
.lista-aparelhos li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.lista-aparelhos li:last-child { border-bottom: 0; }
.aparelho-icone { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--palco-2); }
.aparelho-icone .icone { width: 20px; height: 20px; fill: var(--texto-2); }
.aparelho-nome { flex: 1; min-width: 0; }
.aparelho-nome strong { display: block; font-weight: 600; }
.aparelho-nome em { font-style: normal; font-size: .76rem; color: var(--ok); background: rgba(95, 211, 154, .14); padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.aparelho-nome small { color: var(--texto-3); }
.lista-aparelhos form { margin: 0; }
@media (max-width: 860px) {
  .avatar { display: grid; }
}
.aviso-codigo-teste { margin: 0; padding: 10px 13px; border-radius: 10px; background: rgba(255, 182, 39, .12); color: var(--led-forte); font-size: .88rem; }
.aviso-codigo-teste strong { font: 800 1.1rem var(--display); letter-spacing: .12em; }

/* ==========================================================
   v7: Minhas músicas (envios)
   ========================================================== */
.resumo-envios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.resumo-item { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--raio); background: var(--palco); color: var(--texto-2); font-size: .86rem; box-shadow: inset 0 0 0 1.5px transparent; }
.resumo-item strong { font: 800 1.7rem var(--display); color: var(--texto); }
.resumo-item:hover { text-decoration: none; background: var(--palco-2); }
.resumo-item[aria-current] { box-shadow: inset 0 0 0 1.5px var(--led); color: var(--texto); }
.resumo-aprovadas strong { color: var(--ok); }
.resumo-analise strong { color: var(--atencao); }
.resumo-recusadas strong { color: var(--erro); }
.lista-envios { display: grid; gap: 10px; margin: 16px 0 26px; }
.envio { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 12px; border-radius: var(--raio); background: var(--palco); border-left: 4px solid var(--palco-3); }
.envio-aprovado { border-left-color: var(--ok); }
.envio-em_analise, .envio-na_fila, .envio-processando { border-left-color: var(--atencao); }
.envio-negado, .envio-falhou { border-left-color: var(--erro); }
.envio-capa { aspect-ratio: 16 / 9; border-radius: var(--raio-p); overflow: hidden; background: var(--palco-2); display: grid; place-items: center; }
.envio-capa img { width: 100%; height: 100%; object-fit: cover; }
.envio-capa .icone { width: 28px; height: 28px; fill: var(--texto-3); }
.envio-corpo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.envio-linha1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.envio h3 { font: 700 1rem/1.3 var(--ui); margin: 0; overflow-wrap: anywhere; }
.envio-explica { margin: 0; color: var(--texto-2); font-size: .9rem; }
.envio-falhou .envio-explica, .envio-negado .envio-explica { color: var(--erro); }
.envio-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 0; color: var(--texto-3); font-size: .8rem; }
.envio-meta a { color: var(--texto-2); }
.credito { font-weight: 700; }
.credito.devolvido { color: var(--ok); }
.credito.usado { color: var(--texto-2); }
.envio-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.envio-acoes form { margin: 0; }
.envio-acoes .id-botao { flex: 0 1 auto; width: auto; min-width: 190px; }
.liberar-envio summary { list-style: none; cursor: pointer; }
.liberar-envio summary::-webkit-details-marker { display: none; }
.liberar-envio[open] { flex-basis: 100%; }
.liberar-envio form { margin-top: 8px; max-width: 360px; }
.lista-extrato { list-style: none; margin: 0; padding: 0; }
.lista-extrato li { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: .9rem; }
.lista-extrato li:last-child { border-bottom: 0; }
.extrato-valor { font: 800 1.05rem var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.extrato-valor.mais { color: var(--ok); }
.extrato-valor.menos { color: var(--texto-2); }
.extrato-motivo small { color: var(--texto-3); margin-left: 4px; }
.extrato-data { color: var(--texto-3); font-size: .8rem; white-space: nowrap; }
@media (max-width: 760px) {
  .resumo-envios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .envio { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .envio-linha1 { flex-direction: column; gap: 4px; }
  .envio-acoes .id-botao { min-width: 0; flex: 1 1 100%; }
}

/* Minhas músicas em seções: em análise, aceitas, recusadas */
.grupo-envios { margin-top: 26px; }
.grupo-envios header h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.35rem; }
.grupo-envios header h2 small { font: 700 .8rem var(--ui); padding: 2px 10px; border-radius: 999px; background: var(--palco-3); color: var(--texto-2); }
.grupo-envios header p { margin: 2px 0 0; color: var(--texto-3); font-size: .88rem; }
.grupo-envios header h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--texto-3); }
.grupo-analise header h2::before { background: var(--atencao); }
.grupo-aprovadas header h2::before { background: var(--ok); }
.grupo-recusadas header h2::before { background: var(--erro); }
.grupo-envios .lista-envios { margin-top: 12px; }
.envio-estilo { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); font-weight: 600; }
.envio-estilo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cat); }
.envio-estilo:hover { color: var(--texto); }

/* sugestões */
.envio-pendente { border-left-color: var(--atencao); }
.marcar { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.marcar input { width: 18px; height: 18px; accent-color: var(--led); flex: none; }
.upar-todas { display: flex; gap: 8px; align-items: center; }
.upar-todas select, .barra-selecao select { width: auto; }
.barra-selecao { position: sticky; bottom: 12px; display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; padding: 10px; border-radius: var(--raio); background: rgba(28, 23, 51, .92); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
@media (max-width: 860px) { .barra-selecao { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ==========================================================
   v8: painel de administração
   ========================================================== */
.admin-menu { display: flex; gap: 6px; overflow-x: auto; margin: 14px 0 22px; padding-bottom: 4px; scrollbar-width: none; }
.admin-menu::-webkit-scrollbar { display: none; }
.admin-menu a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--raio); background: var(--palco); color: var(--texto-2); font-weight: 600; font-size: .9rem; }
.admin-menu a .icone { width: 18px; height: 18px; }
.admin-menu a:hover { text-decoration: none; background: var(--palco-2); color: var(--texto); }
.admin-menu a[aria-current] { background: var(--led); color: var(--led-tinta); }
.admin-menu a[aria-current] .icone { fill: var(--led-tinta); }
.contador { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--erro); color: #fff; font: 800 .72rem var(--ui); }
.admin-menu a[aria-current] .contador { background: var(--led-tinta); color: var(--led); }
.admin-topo { margin-bottom: 18px; }
.admin-topo h1 { margin-bottom: .15em; }

.atencao { margin-bottom: 20px; padding: 18px; border-radius: var(--raio-g); background: var(--palco); box-shadow: inset 0 0 0 1.5px rgba(255, 182, 39, .35); }
.atencao h2 { font-size: 1.1rem; margin-bottom: 10px; }
.atencao ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.atencao li { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--raio); background: var(--palco-2); }
.atencao li strong { font: 800 1.25rem var(--display); text-align: center; }
.atencao-atencao strong { color: var(--atencao); }
.atencao-erro strong { color: var(--erro); }
.atencao-info strong { color: var(--texto-2); font-size: .95rem; }
.tudo-certo { padding: 14px 18px; border-radius: var(--raio); background: rgba(95, 211, 154, .12); color: var(--ok); font-weight: 600; }

.kpi-texto { font-size: 1.25rem !important; }
.kpi small b.sobe { color: var(--ok); }
.kpi small b.desce { color: var(--erro); }
.barras-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.barras-lista li > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.barras-lista small { color: var(--texto-3); font-size: .78rem; }
.trilha { display: block; width: 100%; height: 8px; }
.trilha-fundo { fill: var(--palco-3); }
.trilha-valor { fill: var(--cat, var(--led)); }

.feed { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; }
.feed li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: .88rem; }
.feed li:last-child { border-bottom: 0; }
.feed li small { color: var(--texto-3); }
.feed-hora { color: var(--texto-3); font-size: .8rem; font-variant-numeric: tabular-nums; }
.feed li.alerta span:last-child { color: var(--erro); }
.chips-status { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-status .chip { font-size: .85rem; padding: 6px 12px; }
.chips-status a:hover { text-decoration: none; filter: brightness(1.15); }

.lista-clientes { list-style: none; margin: 0; padding: 0; }
.lista-clientes li { border-bottom: 1px solid var(--linha); }
.lista-clientes li:last-child { border-bottom: 0; }
.cliente-link { display: grid; grid-template-columns: 42px minmax(0, 1.6fr) minmax(0, 1fr) 100px 76px 64px minmax(0, 1.2fr); align-items: center; gap: 14px; padding: 12px 8px; border-radius: var(--raio-p); color: var(--texto); }
.cliente-link:hover { text-decoration: none; background: var(--palco-2); }
.cliente-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--palco-3); font: 800 1.05rem var(--display); color: var(--texto); }
.cliente-avatar.grande { width: 72px; height: 72px; font-size: 1.8rem; background: var(--led); color: var(--led-tinta); flex: none; }
.cliente-nome { min-width: 0; }
.cliente-nome strong, .cliente-nome small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cliente-nome small, .cliente-num small { color: var(--texto-3); font-size: .78rem; }
.cliente-acesso { color: var(--texto-2); font-size: .88rem; }
.cliente-num strong { display: block; font-size: .92rem; }
.cliente-selos { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

.voltar { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-2); font-weight: 600; font-size: .88rem; margin-bottom: 12px; }
.voltar .icone { width: 18px; height: 18px; }
.ficha-topo { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.ficha-topo h1 { margin-bottom: .1em; }
.ficha-topo .lead { margin-bottom: .4em; }
.ficha-selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.acoes-ficha { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; }
.acoes-ficha form { margin: 0; }
.acoes-ficha label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--texto-2); font-weight: 600; }
.acoes-ficha select { width: auto; }
.acoes-ficha.secundarias { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linha); gap: 8px; }
.botao.perigo { color: var(--erro); box-shadow: inset 0 0 0 1.5px rgba(255, 122, 133, .45); }

@media (max-width: 1000px) {
  .cliente-link { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .cliente-acesso, .cliente-num { display: none; }
}
@media (max-width: 700px) {
  .atencao li { grid-template-columns: 56px minmax(0, 1fr); }
  .atencao li .botao { grid-column: 1 / -1; justify-self: start; }
  .cliente-selos { grid-column: 2 / -1; justify-content: flex-start; }
  .ficha-topo { align-items: flex-start; }
  .cliente-avatar.grande { width: 54px; height: 54px; font-size: 1.4rem; }
  .feed li { grid-template-columns: 1fr; gap: 2px; }
}

.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cartao > .liberar-status { margin-top: 14px; }
.envio-acoes form:has(select) { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.envio-acoes select, .barra-selecao select { height: 34px; border-radius: 999px; padding: 0 12px; font-size: .85rem; }

/* menu lateral separado por serviço */
.lateral-nav + .lateral-nav { margin-top: -8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .06); }
.lateral-titulo { font: 600 .74rem var(--ui); color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; margin: 0 12px 6px; }
.lateral-saldo { margin-left: auto; font-weight: 700; color: var(--led); font-size: .8rem; }

/* Grupo de Músicas x Enviar música */
.passos-creditos { grid-template-columns: repeat(4, 1fr); margin-top: 16px; }
@media (max-width: 980px) { .passos-creditos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .passos-creditos { grid-template-columns: 1fr; } }
.servicos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 26px; }
.servico { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px; border-radius: var(--raio-g); background: var(--palco); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.servico:first-child { box-shadow: inset 0 0 0 1px rgba(255, 182, 39, .35); }
.servico h3 { margin: 4px 0 0; font-size: 1.45rem; }
.servico p { margin: 0; color: var(--texto-2); }
.servico ul { margin: 4px 0 8px; padding: 0; list-style: none; display: grid; gap: 6px; }
.servico li { padding-left: 22px; position: relative; color: var(--texto); font-weight: 600; font-size: .95rem; }
.servico li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--led); }
.servico .botao { margin-top: auto; align-self: flex-start; }
.servico-icone { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 182, 39, .14); }
.servico-icone .icone { fill: var(--led); width: 24px; height: 24px; }
@media (max-width: 760px) { .servicos { grid-template-columns: 1fr; } }
.como-funciona h2 { margin-top: 0; }
.passos-envio { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 10px; color: var(--texto-2); }
.passos-envio strong { color: var(--texto); }
.privado { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--raio); background: rgba(255, 182, 39, .1); color: var(--texto); font-size: .92rem; font-weight: 600; }
.privado .icone { flex: none; fill: var(--led); width: 18px; height: 18px; margin-top: 2px; }
.outro-servico { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 30px; }
.outro-servico h2 { margin: 0 0 4px; }
.outro-servico .lead { margin: 0; max-width: 60ch; }
.linha-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.extrato li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; }
.extrato .entrou { color: #4ade80; }
.extrato .saiu { color: var(--texto-2); }
.pacotes .planos-grade { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pacotes .planos-grade { grid-template-columns: 1fr; } }

/* campo de senha com botão mostrar */
.campo-senha { position: relative; display: block; }
.campo-senha input { width: 100%; padding-right: 92px; }
.mostrar-senha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--led); font: 700 .8rem var(--ui); padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.mostrar-senha:hover { background: rgba(255, 182, 39, .12); }
.atividade li { display: flex; justify-content: space-between; gap: 12px; }
.atividade li.alerta span { color: #ff8a8a; }

/* Pix manual */
.passos-pix { text-align: left; margin: 18px 0; padding-left: 20px; color: var(--texto-2); line-height: 1.6; }
.passos-pix li + li { margin-top: 6px; }
.aviso-pix { margin: 18px 0 0; padding: 13px 16px; border-radius: var(--raio); background: rgba(95, 211, 154, .14); color: var(--ok); font-weight: 600; }
.chip.pix-informado { background: rgba(95, 211, 154, .16); color: var(--ok); }

/* cupons */
.tem-cupom { margin-top: 10px; font-size: .92rem; color: var(--texto-2); }
.tem-cupom a { color: var(--led-forte); font-weight: 600; }
.cupom-form { max-width: 460px; }
.grade-cupom { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 14px; }
.preco-antigo { font-size: .5em; color: var(--texto-3); margin-left: 6px; font-weight: 500; }

.cupom-pedido { margin: 18px 0 0; text-align: left; }
.cupom-pedido label { display: grid; gap: 6px; font-size: .9rem; color: var(--texto-2); }
.linha-cupom { display: flex; gap: 8px; }
.linha-cupom input { flex: 1; min-width: 0; text-transform: uppercase; }
.convite-sugestao { display: flex; gap: 12px; align-items: center; margin: 18px 0; padding: 14px 18px; border-radius: var(--raio-g); background: var(--palco); color: var(--texto-2); text-decoration: none; }
.convite-sugestao strong { color: var(--texto); display: block; }
.convite-sugestao .icone { flex: none; width: 28px; height: 28px; color: var(--led-forte); }
.convite-sugestao:hover { outline: 1px solid var(--led-forte); }