/* Teu CD — Equalizador grande + visualizador de espectro */
:root{
  --eq-accent: var(--accent, #7c3aed);
  --eq-green: #24d17e;
  --eq-ink: #0e0a1a;
}
[data-theme="dark"]{ --eq-ink:#f4f0ff; }

/* Botão EQ no player */
.pl-eq{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:0; border-radius:12px; cursor:pointer;
  background:transparent; color:inherit; position:relative; flex:0 0 auto;
}
.pl-eq svg{ width:22px; height:22px; }
.pl-eq.active{ color:var(--eq-green); }
.pl-eq.active::after{
  content:""; position:absolute; right:4px; top:4px; width:7px; height:7px;
  border-radius:50%; background:var(--eq-green); box-shadow:0 0 8px var(--eq-green);
}

/* Overlay / backdrop */
.eqwrap{ position:fixed; inset:0; z-index:120; display:none; }
.eqwrap.open{ display:block; }
.eqwrap .eq-backdrop{
  position:absolute; inset:0; background:rgba(8,4,20,.55);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}

/* Painel (bottom sheet) */
.eqsheet{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%) translateY(100%);
  width:min(760px,100%); max-height:88vh; overflow:auto;
  background:linear-gradient(180deg,#1a1030,#120a24);
  color:#f4f0ff; border-radius:22px 22px 0 0;
  box-shadow:0 -18px 60px rgba(0,0,0,.5); padding:16px 18px 24px;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.eqwrap.open .eqsheet{ transform:translateX(-50%) translateY(0); }
@media(min-width:800px){
  .eqsheet{ bottom:14px; border-radius:22px; }
  .eqwrap.open .eqsheet{ transform:translateX(-50%) translateY(0); }
}

.eq-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.eq-head h3{ margin:0; font-size:19px; font-weight:800; letter-spacing:.2px; }
.eq-head .eq-sub{ font-size:12px; color:#b9a9e6; margin-top:2px; }
.eq-grip{ width:44px; height:5px; border-radius:99px; background:#4a3a6e; margin:0 auto 12px; }
.eq-x{ margin-left:auto; width:36px; height:36px; border:0; border-radius:10px; cursor:pointer;
  background:#2a1c48; color:#cdbff2; font-size:18px; line-height:1; }
.eq-x:hover{ background:#37265e; }

/* Chave liga/desliga */
.eq-switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; font-size:13px; color:#cdbff2; }
.eq-switch input{ display:none; }
.eq-switch .tk{ width:44px; height:24px; border-radius:99px; background:#3a2a5e; position:relative; transition:background .2s; }
.eq-switch .tk::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .2s; }
.eq-switch input:checked + .tk{ background:var(--eq-green); }
.eq-switch input:checked + .tk::after{ left:23px; }

/* Visualizador */
.eq-viz{ width:100%; height:120px; display:block; border-radius:14px;
  background:radial-gradient(120% 140% at 50% 100%, #241640 0%, #140c28 70%);
  margin:4px 0 14px; }

/* Presets */
.eq-presets{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:14px; -webkit-overflow-scrolling:touch; }
.eq-preset{ flex:0 0 auto; border:1px solid #3a2a5e; background:#20143c; color:#e7ddff;
  padding:8px 14px; border-radius:99px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.eq-preset:hover{ border-color:var(--eq-accent); }
.eq-preset.on{ background:linear-gradient(90deg,var(--eq-accent),#a855f7); border-color:transparent; color:#fff; box-shadow:0 6px 18px rgba(124,58,237,.4); }
.eq-preset.grave{ background:linear-gradient(90deg,#7c3aed,#e11d8f); }
.eq-preset.grave.on{ box-shadow:0 6px 18px rgba(225,29,143,.45); }

/* Bandas (sliders verticais) */
.eq-bands{ display:grid; grid-template-columns:repeat(10,1fr); gap:6px; align-items:end; }
.eq-band{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.eq-band .db{ font-size:10px; color:#b9a9e6; font-variant-numeric:tabular-nums; min-height:12px; }
.eq-band input[type=range]{
  -webkit-appearance:none; appearance:none; writing-mode:vertical-lr; direction:rtl;
  width:8px; height:150px; background:transparent; cursor:pointer;
}
/* trilha */
.eq-band input[type=range]::-webkit-slider-runnable-track{
  width:8px; border-radius:99px;
  background:linear-gradient(#3a2a5e,#2a1c48);
}
.eq-band input[type=range]::-moz-range-track{ width:8px; border-radius:99px; background:#2a1c48; }
/* polegar */
.eq-band input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; margin-left:-7px;
  border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,var(--eq-green));
  border:2px solid #0e0a1a; box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.eq-band input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; border:2px solid #0e0a1a;
  background:var(--eq-green); box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.eq-band .hz{ font-size:10px; color:#8f7cc2; font-weight:600; }

.eq-foot{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.eq-reset{ border:1px solid #3a2a5e; background:transparent; color:#cdbff2; padding:9px 16px;
  border-radius:99px; font-size:13px; font-weight:600; cursor:pointer; }
.eq-reset:hover{ border-color:var(--eq-accent); color:#fff; }
.eq-note{ font-size:11.5px; color:#9784c2; margin-left:auto; text-align:right; }
.eq-note.warn{ color:#ffb454; }

/* desabilitado quando EQ off */
.eqsheet.off .eq-bands, .eqsheet.off .eq-presets{ opacity:.4; pointer-events:none; }