:root{
  --acsb-radius:16px;
  --acsb-gap:16px;
  --acsb-card-min:340px; /* controla nº de colunas */
}

/* Base */
.acsb{display:block;}
.acsb-header{margin-bottom:var(--acsb-gap);}
.acsb-title{font-size:1.6rem;margin:0 0 4px;}
.acsb-sub{opacity:.8;margin:0 0 12px;}

/* Filtros */
.acsb-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;}
.acsb-filter{padding:8px 12px;border-radius:999px;border:1px solid #e5e7eb;background:#f3f4f6;cursor:pointer;}
.acsb-filter.is-active{background:#e0f2fe;border-color:#bae6fd;}

/* GRID dos cards */
.acsb-songs{
  display:grid;
  gap:var(--acsb-gap);
  grid-template-columns:repeat(auto-fill,minmax(var(--acsb-card-min),1fr));
}
@media (min-width:1400px){ .acsb-songs{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1024px){ .acsb-songs{ --acsb-card-min:300px; } }
@media (max-width:600px){  .acsb-songs{ --acsb-card-min:100%; } }

/* Card */
.acsb-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:var(--acsb-radius);
  padding:16px; overflow:hidden; box-sizing:border-box;
}
.acsb-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.acsb-card-title{font-size:1.1rem;margin:0;}
.acsb-chip{font-size:12px;padding:4px 8px;background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;}

/* Player */
.acsb-player{margin:6px 0 10px;}
.acsb-player audio{display:block;width:100%;height:36px;max-width:100%;}

/* Letra */
.acsb-lyrics{margin-top:10px;}
.acsb-lyrics-static{white-space:pre-wrap;font-family:inherit;}

/* Karaoke — o scroll é só aqui */
.acsb-lyrics-karaoke{
  list-style:none;
  margin:0;
  padding:0 6px 0 0;         /* padding-right para não cortar */
  max-height:360px;
  overflow:auto;              /* rola só dentro da lista */
  scroll-behavior:auto !important;   /* evita “smooth” global */
  overscroll-behavior:contain;       /* não empurra a página */
  overflow-anchor:none;              /* evita saltos por ancoragem */
}
.acsb-lyrics-karaoke li{
  line-height:1.7; padding:2px 0; opacity:.6; transition:opacity .2s, transform .2s;
}
.acsb-lyrics-karaoke li.is-active{
  opacity:1; transform:translateX(2px); font-weight:600;
}

/* Instrumentos */
.acsb-instruments{margin-top:32px;}
.acsb-subtitle{font-size:1.3rem;margin:0 0 12px;}
.acsb-instrument-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--acsb-gap);}
.acsb-inst-img{width:100%;height:auto;border-radius:12px;object-fit:cover;}
.acsb-inst-desc{opacity:.85;}
.acsb-inst-samples{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.acsb-btn{padding:8px 12px;border-radius:10px;border:1px solid #e5e7eb;background:#f9fafb;cursor:pointer;}
.acsb-btn:active{transform:scale(.98);}

/* Mobile */
@media (max-width:480px){ .acsb-title{font-size:1.3rem;} }

/* Desliga smooth global do tema (se existir) */
html, body{ scroll-behavior:auto !important; }

/* mata “smooth” que alguns temas aplicam via :focus-within */
html, body { scroll-behavior: auto !important; }
html:focus-within { scroll-behavior: auto !important; }

/* só o OL rola, NUNCA a página por causa dele */
.acsb-lyrics-karaoke { overflow-anchor: none; overscroll-behavior: contain; }
/* mata smooth global */
html, body { scroll-behavior: auto !important; }

/* quando o áudio toca, travamos o scroll da página */
.acsb-lock body {
  overflow: hidden !important;   /* sem scroll de roda/toque */
  position: relative !important;
}

/* a letra continua rolando só no OL */
.acsb-lyrics-karaoke {
  max-height: 360px;
  overflow: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  scroll-behavior: auto !important;
}
/* --- Teleprompter (sem scroll) --- */
.acsb-lyrics-lite{
  display:flex;
  flex-direction:column;
  gap:6px;
  /* altura fixa “respirada” para 3 linhas */
  min-height: 5.5em;
}
.acsb-lite-prev,
.acsb-lite-next{
  opacity:.6;
  line-height:1.6;
}
.acsb-lite-current{
  line-height:1.6;
  font-weight:700;
  background: rgba(254, 249, 195, .6); /* amarelinho suave */
  padding:2px 4px;
  border-radius:8px;
}
/* --- Teleprompter com 5 linhas --- */
.acsb-lyrics-lite{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height: 9em; /* mais alto p/ 5 linhas */
}

.acsb-lyrics-lite div{
  line-height:1.6;
  text-align:left;
}

.acsb-lite-prev2,
.acsb-lite-prev1,
.acsb-lite-next1,
.acsb-lite-next2{
  opacity:.6;
  font-weight:400;
}

.acsb-lite-current{
  font-weight:700;
  background: rgba(254, 249, 195, .6);
  padding:2px 4px;
  border-radius:8px;
}

/* Teleprompter (10 linhas: 4 acima, 1 atual, 5 abaixo) */
.acsb-lyrics-lite{
  --rows: 10;
  --gap: 4px;
  --lh: 1.6;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-height: calc( var(--rows) * 1.05em * var(--lh) ); /* altura suficiente p/ 10 linhas */
}

.acsb-lyrics-lite .slot{
  line-height: var(--lh);
  text-align: left;
  white-space: normal;
}

/* menos destaque */
.acsb-lyrics-lite .slot.prev,
.acsb-lyrics-lite .slot.next{
  opacity: .65;
  font-weight: 400;
}

/* linha atual */
.acsb-lyrics-lite .slot.cur{
  font-weight: 700;
  background: rgba(254, 249, 195, .7); /* amarelinho leve */
  padding: 2px 6px;
  border-radius: 8px;
}

/* quando ainda não começou: “pronto para começar” */
.acsb-lyrics-lite .slot.cur:empty::after{
  content: '— pronto para começar —';
  opacity: .7;
  font-weight: 600;
}
/* compacta o grid quando alguns cartões desaparecem com o filtro */
.acsb-songs{
  display: grid;
  gap: var(--acsb-gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--acsb-card-min), 1fr));

  /* <- estes 3 são os mais importantes para “sumir com os buracos” */
  grid-auto-flow: row dense;  /* compacta, reaproveita os espaços */
  align-content: start;        /* gruda os itens no topo quando sobra altura */
  justify-content: start;      /* garante alinhamento à esquerda */
}

/* 5 colunas a partir de ~1440px */
@media (min-width: 1440px){
  .acsb-songs { grid-template-columns: repeat(3, 1fr); }
}

/* 6 colunas a partir de ~1800px */
@media (min-width: 1800px){
  .acsb-songs { grid-template-columns: repeat(4, 1fr); }
}

/* --- TOQUES (mini grid de 8 passos) --- */
.acsb-toque-wrap {
  margin: 10px 0 14px;
}

.acsb-toque-title {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.acsb-toque-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  padding: 0;
  margin: 0 0 6px;
  list-style: none;
}

.acsb-toque-grid li {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e5e7eb; /* cinza neutro */
  display: inline-block;
}

/* cada tipo de batida */
.acsb-toque-grid li.hit-strong { background: #dc2626; } /* vermelho = forte */
.acsb-toque-grid li.hit-mid    { background: #f59e0b; } /* laranja = médio */
.acsb-toque-grid li.hit-high   { background: #2563eb; } /* azul = agudo */

/* legenda */
.acsb-toque-legend {
  font-size: 0.8rem;
  opacity: 0.8;
  display: flex;
  gap: 12px;
  align-items: center;
}
.acsb-toque-legend .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 4px;
}
.acsb-toque-legend .dot.hit-strong { background: #dc2626; }
.acsb-toque-legend .dot.hit-mid    { background: #f59e0b; }
.acsb-toque-legend .dot.hit-high   { background: #2563eb; }

/* --------- Legenda de Toques (ícones) --------- */
.acsb-beat-ref{margin:6px 0 10px;}
.acsb-beat-note{font-size:.9rem;opacity:.8;margin:0 0 4px;}

.acsb-beat-pills{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;padding:0;list-style:none;
}

.acsb-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;
  background:#f9fafb;font-size:.9rem;line-height:1;
}

.acsb-ico{
  width:18px;height:18px;display:inline-grid;place-items:center;
  font-weight:700;
}

.acsb-ico svg{
  width:18px;height:18px;display:block;
  /* herda cores do tema */
  stroke: currentColor;
  fill: transparent;
  stroke-width: 2;
}

/* círculo cheio (Ton) precisa preencher */
.acsb-pill:nth-child(3) .acsb-ico svg circle{
  fill: currentColor; /* só no Ton */
}

/* “TX” fica só texto, sem svg */
.acsb-ico-tx{
  font-size: .8rem; letter-spacing:.5px;
}

.acsb-pill-label{white-space:nowrap;}
.acsb-beat-pills{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0 10px;padding:0;list-style:none}
.acsb-pill{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #e5e7eb;border-radius:999px;background:#f9fafb}
.acsb-ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.acsb-ico svg{width:18px;height:18px;stroke:#111;stroke-width:2;fill:none}
.acsb-ico svg circle{stroke:#111}
.acsb-ico svg line{stroke:#111}
.acsb-ico-tx{font-weight:700;font-size:11px;line-height:1}
.acsb-toque-title{font-weight:600;opacity:.8;margin:6px 0 4px}

.acsb-ico svg{
  width:18px;height:18px;display:block;
  stroke: currentColor;
  fill: transparent;
  stroke-width: 2;
  stroke-linecap: round; /* opcional: cantos arredondados */
}

.acsb-ico svg{
  width:18px;height:18px;display:block;
  stroke: currentColor;
  fill: transparent;
  stroke-width: 2;
  stroke-linecap: round; /* deixa o X mais bonito */
}
.acsb-controls{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  margin:0 0 12px;
  align-items:flex-end;
}
.acsb-control{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.acsb-control label{
  font-size:.9rem;
  opacity:.85;
}
.acsb-control select{
  padding:8px 10px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
}
.acsb-toques-title {
  font-size: 1.8rem; /* maior que os subtítulos normais */
  font-weight: 700;
  margin-bottom: 1rem;
}

.acsb-header .acsb-title {
  font-size: 2rem;  /* aumentei */
  font-weight: 800;
}
.acsb-play-sample.is-playing {
  background:#fee2e2; /* levemente vermelhinho */
  border-color:#fecaca;
}

.acsb-lyrics-start,
.acsb-lyrics-karaoke li.acsb-start {
  text-align: left;
  font-weight: 700;
  color: #166534;
  background: #fefce8;
  padding: 2px 6px;
  border-radius: 8px;
  margin: 0 0 6px 0;
  display: inline-block;
}
/* ===== Títulos maiores ===== */
.acsb .acsb-title{
  font-size: 2rem; /* ↑ título principal */
  line-height: 1.2;
}
.acsb .acsb-subtitle{ /* título dos instrumentos */
  font-size: 1.5rem;
  font-weight: 700;
}

/* ===== Filtros em grid (desktop) / coluna (mobile) ===== */
.acsb .acsb-controls{
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 14px;
  align-items: end;
  margin-bottom: 12px;
}
.acsb .acsb-controls .acsb-ctrl{
  display: flex; flex-direction: column; gap: 6px;
}
.acsb .acsb-controls select{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  line-height: 1.2;
}
@media (max-width: 900px){
  .acsb .acsb-controls{ grid-template-columns: 1fr; gap: 10px; }
}

/* ===== Teleprompter (10 linhas) ===== */
.acsb-lyrics-lite{
  --rows: 10; --gap: 4px; --lh: 1.6;
  display: flex; flex-direction: column; gap: var(--gap);
  min-height: calc(var(--rows) * 1.05em * var(--lh));
}
.acsb-lyrics-lite .slot{ line-height: var(--lh); text-align:left; white-space: normal; }
.acsb-lyrics-lite .slot.prev,
.acsb-lyrics-lite .slot.next{ opacity:.65; font-weight:400; }
.acsb-lyrics-lite .slot.cur{
  font-weight:700; background: rgba(254, 249, 195, .7);
  padding:2px 6px; border-radius:8px;
}
.acsb-lyrics-lite .slot.cur:empty::after{
  content: '— pronto para começar —';
  opacity:.7; font-weight:600;
}

/* ===== Instrumentos – cards e botões ===== */
.acsb-instrument .acsb-btn{
  padding:8px 12px; border-radius:10px;
  border:1px solid #e5e7eb; background:#f9fafb; cursor:pointer;
}
.acsb-instrument .acsb-btn:active{ transform: scale(.98); }

/* ===== Evita que o audio mude layout ===== */
.acsb-player audio{ display:block; width:100%; height:36px; max-width:100%; }