@charset "utf-8";
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:optional;src:url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-solid-900.woff2") format("woff2")}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:optional;src:url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-brands-400.woff2") format("woff2")}
:root{
  --bg:#0b0c10;
  --card: rgba(18,20,28,.72);
  --border: rgba(255,255,255,.10);
  --text:#eef1ff;
  --muted:#b7bdd6;
  --accent:#d6b46a;
  --accent2:#78a0ff;
  --shadow: 0 18px 70px rgba(0,0,0,.45);
  --radius: 22px;
}

*{ box-sizing: border-box; }
html, body{
  height: 100%;
  margin:0;
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

/* ================== BACKGROUND ================== */
.cover-site{
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  inset: 0;
  background-position: center;
  background-size: cover;
  z-index: 0;
}

#bgCover{
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  z-index: 1;
  filter: saturate(1.05);
}

.bg-mask{
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(214,180,106,.18), transparent 60%),
    radial-gradient(1200px 800px at 80% 30%, rgba(120,160,255,.14), transparent 60%),
    radial-gradient(rgba(0,0,0,.35) 20%, rgba(0,0,0,.85) 85%);
  backdrop-filter: blur(10px);
  z-index: 2;
}

/* ================== LAYOUT ================== */
.web-player{
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 18px 14px 40px;
}

.bh-shell{
  max-width: 1100px;
  margin: 0 auto;
}

.bh-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  margin-top: 16px;
}

@media (max-width: 920px){
  .bh-grid{ grid-template-columns: 1fr; }
}

/* ================== TOPBAR ================== */
.bh-topbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(10,11,16,.72);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

@media (max-width: 768px){
  .bg-mask{
    backdrop-filter: blur(6px);
  }
}

.bh-brand{ display:flex; align-items:center; gap: 12px; }
.bh-logo{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow: 0 10px 35px rgba(0,0,0,.35);
}

.bh-brand-title{
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  gap: 2px;
}
.bh-brand-station{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--text);
}
.bh-brand-sub{ color: var(--muted); font-size: 12px; margin-top: 2px; }

.bh-search{
  position: relative;
  width: 420px;
  max-width: 48vw;
}
.bh-search i{
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.65);
}
.bh-search input{
  width: 100%;
  padding: 11px 14px 11px 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline: none;
}
.bh-search input::placeholder{ color: rgba(255,255,255,.55); }
.bh-search input:focus{
  box-shadow: 0 0 0 .25rem rgba(120,160,255,.15);
  border-color: rgba(120,160,255,.35);
}
@media (max-width: 720px){
  .bh-search{ display:none; }
}

/* ================== CARDS ================== */
.bh-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  padding: 16px;
}

.bh-player{ padding: 18px; }
.bh-history{ padding: 18px; }

.info-current-song{
  font-family: "Share", system-ui, sans-serif;
  text-align: center;
  margin-top: 14px;
}
.info-current-song h2{
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.info-current-song h3{
  font-size: 16px;
  font-weight: 600;
  margin: 6px 0 0;
  color: rgba(255,255,255,.82);
  text-transform: uppercase;
}

/* ================== COVER (compatível com seu JS) ================== */
.cover-album{
  width: min(340px, 86vw);
  height: min(340px, 86vw);
  margin: 0 auto;
  border-radius: 26px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
  overflow:hidden;
  background: url("../img/bgnovo.webp") no-repeat center center;
  background-size: cover;
  position: relative;
}

#currentCoverArt{
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 1s;
}

/* ================== CONTROLS ================== */
.bh-controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 12px;
  margin-top: 14px;
}

.bh-btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  cursor:pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.bh-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
.bh-btn:disabled{
  opacity: .5;
  cursor:not-allowed;
  transform:none;
}

.bh-btn-primary{
  background: linear-gradient(135deg, rgba(214,180,106,.95), rgba(120,160,255,.65));
  border: 1px solid rgba(255,255,255,.22);
  color: #0b0c10;
  padding: 12px 18px;
  font-weight: 800;
}

/* ================== VOLUME ================== */
.bh-vol-ind{
  font-size: 12px;
  color: rgba(255,255,255,.75);
}

/* ================== BADGES ================== */
.bh-badges{
  display:flex;
  justify-content:center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.bh-badge{
  font-size: 12px;
  color: rgba(255,255,255,.85);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

/* ================== HISTORY (compatível com seu JS) ================== */
.bh-history-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bh-history-head h2{
  margin:0;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}

.historic article{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 10px;
  margin: 10px 0;
  overflow:hidden;
}

.historic .cover-historic{
  width: 78px;
  height: 78px;
  margin-right: 12px;
  float: left;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0px 10px 28px rgba(0,0,0,.35);
  background: url("../img/bgnovo.webp") no-repeat center center;
  background-size: cover;
  overflow:hidden;
}
.historic .cover-historic img.cover-image{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.historic .music-info{
  color: var(--text);
  font-family: "Share", system-ui, sans-serif;
  padding-top: 2px;
}
.historic .music-info .song{
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.historic .music-info .artist{
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(255,255,255,.80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}
.historic .music-info .songTimeContainer{
  display:flex;
  align-items:center;
  gap: 6px;
  margin-top: 6px;
  color: rgba(255,255,255,.78);
  font-size: 11px;
  text-transform: uppercase;
}

/* ================== MENU LATERAL (mantém seu funcionamento) ================== */
.menu-lateral{
  width: 280px;
  height: 100%;
  background: rgba(12,14,22,.92);
  position: fixed;
  left: -280px;
  top: 0;
  transition: left .25s ease;
  z-index: 1000;
  border-right: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  padding: 14px;
}
.menu-aberto{ left: 0; }

.bh-menu-head{
  display:flex;
  align-items:center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: 10px;
}
.bh-menu-logo{
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.bh-menu-title .t1{ font-weight: 900; letter-spacing: .08em; font-size: 13px; }
.bh-menu-title .t2{ color: rgba(255,255,255,.70); font-size: 12px; margin-top: 2px; }

.menu-lateral a{
  display:block;
  color: rgba(255,255,255,.92);
  padding: 12px 10px;
  border-radius: 12px;
  font-size: 14px;
  border: 1px solid transparent;
}
.menu-lateral a:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}
.menu-lateral a.active{
  background: rgba(120,160,255,.10);
  border-color: rgba(120,160,255,.18);
}

.botao-abrir-menu{
  position: fixed;
  left: 12px;
  top: 12px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,11,16,.72);
  color: #fff;
  cursor: pointer;
  z-index: 1001;
  backdrop-filter: blur(14px);
}
.botao-abrir-menu:hover{ background: rgba(255,255,255,.08); }

.novidade{
  color: #28a745;
  font-size: 11px;
  margin-left: 6px;
  animation: blink 1.5s infinite;
}
@keyframes blink{
  0%,100%{ opacity: 1; }
  50%{ opacity: 0; }
}

.bh-menu-footer{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  color: rgba(255,255,255,.65);
}

/* ===== JS v2 UI helpers ===== */
#bhToastHost{
  position: fixed;
  right: 14px;
  bottom: 14px;
  display: grid;
  gap: 10px;
  z-index: 2000;
}

.bh-toast{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,11,16,.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 60px rgba(0,0,0,.45);
  max-width: min(420px, 92vw);
  transform: translateY(0);
  transition: transform .22s ease, opacity .22s ease;
}

.bh-toast.out{
  opacity: 0;
  transform: translateY(8px);
}

.bh-toast-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
}

.bh-toast-success .bh-toast-dot{ background: rgba(40,167,69,.95); }
.bh-toast-error .bh-toast-dot{ background: rgba(220,53,69,.95); }

.bh-toast-msg{
  font-size: 13px;
  color: rgba(255,255,255,.92);
  line-height: 1.2;
}

.bh-toast-x{
  margin-left: auto;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.75);
  font-size: 18px;
  cursor: pointer;
}

.bh-fadein{
  animation: bhFadeIn .26s ease;
}
@keyframes bhFadeIn{
  from{ opacity:.4; transform: translateY(2px); }
  to{ opacity:1; transform: translateY(0); }
}

.bh-pulse{
  animation: bhPulse .24s ease;
}
@keyframes bhPulse{
  from{ transform: translateY(0); }
  50%{ transform: translateY(-1px); }
  to{ transform: translateY(0); }
}

.bh-player.bh-match{
  outline: 2px solid rgba(120,160,255,.22);
}

/* ===== Ajuste Topbar com botão lateral ===== */
.bh-topbar{
  display: flex;
  align-items: center;
  gap: 14px;
}

.bh-menu-btn{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.bh-menu-btn i{
  font-size: 16px;
}

.bh-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.bh-logo{
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.bh-menu-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1200;
}

/* ===== Social icons ===== */
.bh-social{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 6px;
  flex-shrink: 0;
}

.bh-menu-social{
  display:flex;
  gap:10px;
  justify-content:flex-start;
  margin-bottom:10px;
}

.bh-social-btn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  text-decoration: none;
  cursor: pointer;

  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.bh-social-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

.bh-social-btn i{
  font-size: 18px;
}

/* Botões do menu lateral (substitui <a>) */
.bh-menu-link{
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  margin: 6px 0;
}
.bh-menu-link.is-active{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
}

/* Abas de rádio abaixo da topbar */
.bh-stations{
  display:flex;
  flex-wrap: wrap;
  gap:8px;
  margin: 10px 12px 0;
}
.bh-station-btn{
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-size: 13px;
  white-space: nowrap;
}
.bh-station-btn.is-active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
}

/* Botões "Em breve" */
.bh-station-btn.bh-station-soon {
  opacity: .45;
  cursor: default;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-style: dashed;
  border-color: rgba(255,255,255,.18);
}
.bh-station-btn.bh-station-soon:hover {
  opacity: .60;
  transform: none;
  background: transparent;
}
.bh-soon-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  line-height: 1.4;
}

/* Menu lateral — label + botões "Em breve" */
.bh-menu-soon-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.40);
  padding: 10px 4px 4px;
}
.bh-menu-link-soon {
  opacity: .55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
}
.bh-menu-link-soon:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  opacity: .70;
}

/* Swipe hint (mobile only) */
.bh-swipe-hint {
  text-align: center;
  font-size: 11px;
  letter-spacing: .03em;
  color: rgba(255,255,255,.28);
  margin: 6px 0 0;
  user-select: none;
  display: none;
}
[data-theme="light"] .bh-swipe-hint { color: rgba(0,0,0,.30); }
@media (max-width: 920px) {
  .bh-swipe-hint { display: block; }
}

/* ================== KEBAB MENU ⋯ ================== */
.bh-kebab-wrap {
  position: relative;
}

.bh-kebab-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: rgba(18, 20, 30, 0.96);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  padding: 6px;
  z-index: 500;
  transform-origin: bottom right;
  transform: scale(0.92) translateY(6px);
  opacity: 0;
  transition: transform .18s cubic-bezier(.22,1,.36,1), opacity .15s ease;
  pointer-events: none;
}

.bh-kebab-menu.is-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

.bh-kebab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.82);
  font-size: 13.5px;
  font-family: inherit;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}

.bh-kebab-item i {
  width: 16px;
  text-align: center;
  font-size: 14px;
  color: rgba(255,255,255,.5);
  flex-shrink: 0;
}

.bh-kebab-item span {
  flex: 1;
}

.bh-kebab-item:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.bh-kebab-item:hover i {
  color: rgba(255,255,255,.8);
}

.bh-kebab-shortcut {
  font-family: inherit;
  font-size: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 5px;
  padding: 2px 6px;
  color: rgba(255,255,255,.4);
  flex-shrink: 0;
}

.bh-kebab-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 4px 8px;
}

.bh-kebab-hints {
  padding: 8px 12px;
  font-size: 10.5px;
  color: rgba(255,255,255,.28);
  letter-spacing: .03em;
  user-select: none;
  margin: 0;
  line-height: 1.6;
}

.bh-kebab-hints kbd {
  font-family: inherit;
  font-size: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  padding: 1px 4px;
  color: rgba(255,255,255,.38);
}

/* Tema claro */
[data-theme="light"] .bh-kebab-menu {
  background: rgba(245,246,250,.97);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
[data-theme="light"] .bh-kebab-item {
  color: rgba(0,0,0,.75);
}
[data-theme="light"] .bh-kebab-item i {
  color: rgba(0,0,0,.4);
}
[data-theme="light"] .bh-kebab-item:hover {
  background: rgba(0,0,0,.05);
  color: rgba(0,0,0,.9);
}
[data-theme="light"] .bh-kebab-divider {
  background: rgba(0,0,0,.07);
}
[data-theme="light"] .bh-kebab-hints {
  color: rgba(0,0,0,.32);
}
[data-theme="light"] .bh-kebab-hints kbd,
[data-theme="light"] .bh-kebab-shortcut {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.12);
  color: rgba(0,0,0,.4);
}

/* ================== SLEEP TIMER ================== */
.bh-kebab-sleep {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: rgba(255,255,255,.82);
  font-size: 13.5px;
  border-radius: 9px;
}
.bh-kebab-sleep i {
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  flex-shrink: 0;
}
.bh-kebab-sleep > span { flex: 1; }
.bh-sleep-moon-on { color: #a78bfa !important; }

.bh-sleep-opts {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.bh-sleep-opt {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  color: rgba(255,255,255,.7);
  font-size: 11px;
  font-family: inherit;
  padding: 3px 7px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.bh-sleep-opt:hover {
  background: rgba(var(--accent-rgb),.22);
  border-color: rgba(var(--accent-rgb),.4);
  color: #fff;
}
.bh-sleep-cancel {
  background: rgba(255,90,90,.12);
  border: 1px solid rgba(255,90,90,.25);
  border-radius: 6px;
  color: rgba(255,120,120,.9);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s;
}
.bh-sleep-cancel:hover { background: rgba(255,90,90,.22); }

[data-theme="light"] .bh-kebab-sleep { color: rgba(0,0,0,.75); }
[data-theme="light"] .bh-kebab-sleep i { color: rgba(0,0,0,.4); }
[data-theme="light"] .bh-sleep-opt {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.12);
  color: rgba(0,0,0,.65);
}

.bh-history-side{
  max-height: 620px;
  display:flex;
  flex-direction: column;
}

.bh-history-list{
  overflow:auto;
  padding-right: 6px;
  margin-top: 8px;
}

.bh-history-item{
  display:flex;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  margin-bottom: 10px;

  /* ✅ quando tiver 2 linhas no título, a capa fica alinhada no topo */
  align-items: flex-start;
}

.bh-history-item img{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
}

.bh-history-meta{
  min-width: 0;
  flex: 1;
  padding-top: 2px;
}

/* ✅ QUEBRA DE LINHA (até 2 linhas) — resolve títulos enormes */
.bh-history-song{
  font-weight: 800;
  font-size: 13px;

  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* Artista: pode quebrar (2 linhas) ou deixe 1 se preferir */
.bh-history-artist{
  margin-top: 4px;
  font-size: 12px;
  opacity: .78;

  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
  word-break: break-word;
}

.bh-mini-btn{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
  font-size: 12px;
}

/* ✅ “Tocou às” com relógio mais juntinho */
.bh-history-time{
  margin-top: 6px;
  font-size: 11px;
  opacity: .75;

  display:inline-flex;
  align-items:center;
  gap:4px;
}
.bh-history-time i{
  font-size:10px;
  margin-top:1px;
}


/* ================== NOW PLAYING (AzuraCast) ================== */
/* Bloco de tempo + barra para o "Tocando agora" (elapsed correndo) */
.bh-np-time{
  width: min(340px, 86vw);
  margin: 10px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bh-np-time .bh-np-clock{
  display:flex;
  align-items:center;
  gap: 6px;
  min-width: 120px;
  white-space: nowrap;
}

.bh-np-time .bh-np-meta{
  display:flex;
  align-items:center;
  gap: 10px;
  opacity: .95;
  white-space: nowrap;
}

.bh-np-bar{
  margin-top: 10px;
  height: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.bh-np-bar-fill{
  height: 100%;
  width: 0%;
  /* Gradiente suave usando suas cores do tema */
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width .22s linear;
}

/* Quando não há duração (live/stream), esconde barra */
.bh-np-bar.is-hidden{ display:none; }

/* Mobile */
@media (max-width: 560px){
  .bh-np-time{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .bh-np-time .bh-np-meta{
    opacity: .9;
  }
}


/* ===== Ajustes UI: barra Now Playing menor + volume em ícone ===== */
.bh-np-bar{
  height: 6px;          /* antes 8px */
  margin-top: 8px;
  max-width: 520px;     /* não ficar grandona */
}
.bh-np-bar-fill{
  transition: width .18s linear;
}

/* ===== Volume ===== */
.bh-volume{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bh-vol-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
}
.bh-vol-pop{
  position: absolute;
  bottom: 54px;
  right: -4px;
  width: 52px;
  height: 180px;
  padding: 10px 8px;
  border-radius: 14px;
  background: rgba(18,22,32,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.bh-vol-pop::before{
  content: "";
  position: absolute;
  inset: -8px;
}
.bh-vol-pop.is-open{ display: flex; }
.bh-vol-ind{ display: none !important; }

/* Wrapper define o espaço visual do slider vertical */
.bh-vol-slider-wrap {
  position: relative;
  width: 28px;
  height: 130px;
  flex-shrink: 0;
}
/* Input rotacionado -90° para aparecer vertical */
#volume {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130px;           /* vira a altura visual após rotação */
  transform: translate(-50%, -50%) rotate(-90deg);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
  outline-offset: 4px;
}
/* Track */
#volume::-webkit-slider-runnable-track {
  height: 5px;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
}
#volume::-moz-range-track {
  height: 5px;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
}
/* Thumb */
#volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  margin-top: -5.5px;
  cursor: pointer;
}
#volume::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  cursor: pointer;
}

/* Barra exatamente do mesmo tamanho da capa */
.bh-np-bar{
  width: min(340px, 86vw);
  margin: 12px auto 0; /* centraliza igual a capa */
}


/* ===== Now Playing: barra acima + tempo nas pontas (simétrico com a capa) ===== */
.bh-np-bar{
  width: min(340px, 86vw);
  margin: 8px auto 0;
  height: 4px;
  border: 0;
  background: rgba(255,255,255,.22);
}

.bh-np-bar-fill{
  border-radius: 999px;
}

.bh-np-time{
  width: min(340px, 86vw);
  margin: 8px auto 0;
  padding: 0;
}

.bh-np-clock{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  min-width: 0;
}

/* some com o "/" do meio */
.bh-np-clock span:nth-child(2){
  display:none;
}

/* ================== COR POR ESTAÇÃO ================== */
[data-station-theme="pop"]       { --accent:#e040fb; --accent2:#9c27b0; --accent-rgb:224,64,251;  --station-glow:rgba(224,64,251,.055); }
[data-station-theme="sertanejo"] { --accent:#ffb300; --accent2:#e65100; --accent-rgb:255,179,0;   --station-glow:rgba(255,179,0,.055);  }
[data-station-theme="pagode"]    { --accent:#00e676; --accent2:#00bfa5; --accent-rgb:0,230,118;   --station-glow:rgba(0,230,118,.055);  }
[data-station-theme="rock"]      { --accent:#ff1744; --accent2:#ff6d00; --accent-rgb:255,23,68;   --station-glow:rgba(255,23,68,.055);  }
[data-station-theme="dance"]     { --accent:#00e5ff; --accent2:#2979ff; --accent-rgb:0,229,255;   --station-glow:rgba(0,229,255,.055);  }
[data-station-theme="flashback"] { --accent:#ff80ab; --accent2:#e040fb; --accent-rgb:255,128,171; --station-glow:rgba(255,128,171,.055);}

/* Tint sutil no fundo por estação */
html, body { transition: background-color 1.2s ease; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--station-glow, transparent) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  transition: background 1.2s ease;
}

/* ================== INDICADOR DE CONEXÃO ================== */
.bh-conn-bar{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(220,53,69,.92);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0,0,0,.30);
  transition: transform .3s ease, opacity .3s ease;
  opacity: 0;
  pointer-events: none;
}
.bh-conn-bar.is-visible{
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ================== TEMA CLARO ================== */
[data-theme="light"]{
  --bg: #f0f2f8;
  --card: rgba(255,255,255,.82);
  --border: rgba(0,0,0,.10);
  --text: #0d0e14;
  --muted: #5a6180;
  --accent: #b8922a;
  --accent2: #3a6ee8;
  --shadow: 0 18px 70px rgba(0,0,0,.12);
}
[data-theme="light"] .bg-mask{
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(214,180,106,.22), transparent 60%),
    radial-gradient(1200px 800px at 80% 30%, rgba(58,110,232,.12), transparent 60%),
    radial-gradient(rgba(255,255,255,.40) 20%, rgba(240,242,248,.90) 85%);
}
[data-theme="light"] .bh-topbar,
[data-theme="light"] .menu-lateral{
  background: rgba(255,255,255,.80);
}
[data-theme="light"] .bh-np-bar{
  background: rgba(0,0,0,.12);
}
[data-theme="light"] .info-current-song h3{
  color: var(--muted);
}
[data-theme="light"] .bh-history-artist,
[data-theme="light"] .bh-history-time{
  opacity: .65;
}
[data-theme="light"] .bh-station-btn,
[data-theme="light"] .bh-menu-link{
  color: var(--text);
}
[data-theme="light"] .bh-card{
  background: rgba(255,255,255,.75);
}
[data-theme="light"] .bh-history-head h2{
  color: var(--text);
}
[data-theme="light"] .bh-social-btn{
  color: var(--muted);
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.05);
}
[data-theme="light"] .bh-social-btn:hover{
  color: var(--text);
  background: rgba(0,0,0,.08);
}
[data-theme="light"] .bh-menu-btn,
[data-theme="light"] .bh-menu-close{
  color: var(--text);
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.10);
}
[data-theme="light"] .bh-station-btn{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.10);
}
[data-theme="light"] .bh-station-btn.is-active{
  background: rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.16);
}
[data-theme="light"] .bh-history-item{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}
[data-theme="light"] .bh-btn{
  color: var(--text);
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.10);
}
[data-theme="light"] .bh-btn:hover{
  background: rgba(0,0,0,.09);
}
[data-theme="light"] .bh-next-wrap{
  background: rgba(0,0,0,.05);
}

/* ================== TRANSIÇÃO DE CAPA ================== */
#currentCoverArt{
  transition: opacity .28s ease;
}
#currentCoverArt.bh-cover-fading{
  opacity: 0;
}

/* ================== RIPPLE (botão play) ================== */
#playerButton{
  position: relative;
  overflow: hidden;
}
.bh-ripple{
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: bhRipple .55s linear;
  pointer-events: none;
}
@keyframes bhRipple{
  to{ transform: scale(2.5); opacity: 0; }
}

/* ================== CORAÇÃO (double-tap) ================== */
.bh-heart-pop{
  position: fixed;
  font-size: 42px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0);
  animation: bhHeartPop .75s ease forwards;
}
@keyframes bhHeartPop{
  0%  { transform: translate(-50%,-50%) scale(0);   opacity:1; }
  40% { transform: translate(-50%,-50%) scale(1.4); opacity:1; }
  100%{ transform: translate(-50%,-120%) scale(1);  opacity:0; }
}

/* ================== A SEGUIR ================== */
.bh-next-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  max-width: min(340px, 86vw);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.bh-next-label{
  white-space: nowrap;
  opacity: .75;
}
.bh-next-song{
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================== FOCUS VISIBLE (acessibilidade) ================== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
details summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ================== SCROLLBAR HISTÓRICO ================== */
.bh-history-list::-webkit-scrollbar { width: 4px; }
.bh-history-list::-webkit-scrollbar-track { background: transparent; }
.bh-history-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.20);
  border-radius: 999px;
}
.bh-history-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.35);
}

/* ================== THUMBNAILS HISTÓRICO (52x52) ================== */
.bh-history-item img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  flex-shrink: 0;
}

/* ================== BOTÕES DE ESTAÇÃO COM COR DA ESTAÇÃO ================== */
.bh-station-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255,255,255,.08);
  font-weight: 700;
}
.bh-menu-link.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255,255,255,.08);
}

/* ================== GLOW NO PLAY QUANDO TOCANDO ================== */
#playerButton.bh-is-playing {
  box-shadow: 0 0 18px 2px var(--accent), 0 8px 32px rgba(0,0,0,.35);
  animation: bhPlayGlow 2.4s ease-in-out infinite;
}
@keyframes bhPlayGlow {
  0%, 100% { box-shadow: 0 0  8px 0px var(--accent), 0 8px 32px rgba(0,0,0,.35); }
  50%       { box-shadow: 0 0 22px 6px var(--accent), 0 8px 44px rgba(0,0,0,.45); }
}

/* ================== TRANSIÇÃO NA TROCA DE ESTAÇÃO ================== */
.bh-card.bh-switching {
  animation: bhSwitchFade .45s ease forwards;
}
@keyframes bhSwitchFade {
  0%   { opacity: 1; transform: scale(1); }
  30%  { opacity: 0; transform: scale(.97); }
  70%  { opacity: 0; transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}

/* ================== OVERLAY DO MENU LATERAL ================== */
.bh-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.bh-overlay.is-active {
  opacity: 1;
  pointer-events: all;
}

/* ================== MINI-PLAYER ================== */
.bh-mini-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(10,11,16,.92);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(16px);
  box-shadow: 0 -8px 32px rgba(0,0,0,.40);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.bh-mini-player.is-visible {
  transform: translateY(0);
}
.bh-mini-cover {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,.08);
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.bh-mini-info {
  flex: 1;
  min-width: 0;
}
.bh-mini-song {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  font-family: "Share", system-ui, sans-serif;
}
.bh-mini-artist {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  text-transform: uppercase;
}
.bh-mini-play {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(214,180,106,.95), rgba(120,160,255,.65));
  color: #0b0c10;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 14px;
  transition: transform .12s ease;
}
.bh-mini-play:hover { transform: scale(1.06); }

/* Mini-player só em mobile/tablet */
@media (min-width: 921px) {
  .bh-mini-player { display: none !important; }
}

/* ================== ABOUT ================== */
.bh-about {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(14px);
}

.bh-about-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* ================== FAQ ================== */
.bh-faq {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(14px);
}

.bh-faq-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
}

.bh-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bh-faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  overflow: hidden;
}

.bh-faq-item[open] {
  background: rgba(255,255,255,.07);
}

.bh-faq-q {
  list-style: none;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.bh-faq-q::-webkit-details-marker { display: none; }

.bh-faq-q::after {
  content: '+';
  font-size: 18px;
  font-weight: 400;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform .2s ease;
}

.bh-faq-item[open] .bh-faq-q::after {
  transform: rotate(45deg);
}

.bh-faq-a {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

/* ================== SEPARADOR THEME TOGGLE ================== */
/* Separa o botão de tema dos links sociais com um divisor sutil */
.bh-social #themeToggle {
  margin-right: 8px;
  position: relative;
}
.bh-social #themeToggle::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 22%;
  height: 56%;
  width: 1px;
  background: var(--border);
  pointer-events: none;
}

/* ================== SKELETON CAPA ================== */
@keyframes bhShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.cover-album.bh-loading {
  position: relative;
}
.cover-album.bh-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,.14)  50%,
    rgba(255,255,255,0)   100%
  );
  background-size: 400px 100%;
  animation: bhShimmer 1.2s ease-in-out infinite;
  pointer-events: none;
}

/* ================== SKELETON HISTÓRICO ================== */
.bh-skel-item {
  display: flex;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  margin-bottom: 6px;
}
.bh-skel-box {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.06) 25%,
    rgba(255,255,255,.13) 50%,
    rgba(255,255,255,.06) 75%
  );
  background-size: 400px 100%;
  animation: bhShimmer 1.4s ease-in-out infinite;
}
[data-theme="light"] .bh-skel-box {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.06) 25%,
    rgba(0,0,0,.12) 50%,
    rgba(0,0,0,.06) 75%
  );
  background-size: 400px 100%;
}
.bh-skel-thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 8px;
}
.bh-skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.bh-skel-line        { height: 11px; border-radius: 5px; width: 72%; }
.bh-skel-line:nth-child(2)  { width: 50%; }
.bh-skel-line--sm    { width: 36%; height: 9px; }

/* ── Transição suave de accent color (Color Thief) ── */
.bh-player {
  transition: --accent .6s, --accent2 .6s;
}

/* ================== ANIMAÇÃO "A SEGUIR" ================== */
@keyframes bhNextSlide {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
#bhNextWrap:not([hidden]) {
  animation: bhNextSlide .3s ease;
}

/* ================== LIKE ATIVO ================== */
#likeButton.bh-liked {
  color: var(--ok);
  border-color: rgba(53,211,156,.45);
  background: rgba(53,211,156,.10);
}
#dislikeButton.bh-disliked {
  color: var(--bad);
  border-color: rgba(255,90,106,.45);
  background: rgba(255,90,106,.10);
}

/* ================== PILLS: COR POR CANAL ================== */
.bh-station-btn[data-station="pop"].is-active       { border-color:#a78bfa; color:#a78bfa; background:rgba(167,139,250,.13); }
.bh-station-btn[data-station="sertanejo"].is-active  { border-color:#f5a623; color:#f5a623; background:rgba(245,166,35,.13); }
.bh-station-btn[data-station="pagode"].is-active     { border-color:#f97316; color:#f97316; background:rgba(249,115,22,.13); }
.bh-station-btn[data-station="rock"].is-active       { border-color:#ef4444; color:#ef4444; background:rgba(239,68,68,.13); }
.bh-station-btn[data-station="dance"].is-active      { border-color:#06b6d4; color:#06b6d4; background:rgba(6,182,212,.13); }
.bh-station-btn[data-station="flashback"].is-active  { border-color:#ec4899; color:#ec4899; background:rgba(236,72,153,.13); }

/* ================== DOTS DE ESTAÇÃO (mobile) ================== */
.bh-station-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
}
@media (max-width: 700px) {
  .bh-station-dots { display: flex; }
}
.bh-station-dots span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  transition: width .3s ease, background .3s ease;
  flex-shrink: 0;
}
.bh-station-dots span.is-active { width: 20px; }
.bh-station-dots span[data-station="pop"].is-active       { background:#a78bfa; }
.bh-station-dots span[data-station="sertanejo"].is-active  { background:#f5a623; }
.bh-station-dots span[data-station="pagode"].is-active     { background:#f97316; }
.bh-station-dots span[data-station="rock"].is-active       { background:#ef4444; }
.bh-station-dots span[data-station="dance"].is-active      { background:#06b6d4; }
.bh-station-dots span[data-station="flashback"].is-active  { background:#ec4899; }

/* ================== ANIMAÇÃO TÍTULO AO MUDAR MÚSICA ================== */
@keyframes bhSongIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
.info-current-song.bh-song-in h2,
.info-current-song.bh-song-in h3 {
  animation: bhSongIn .3s cubic-bezier(.22,1,.36,1) both;
}
.info-current-song.bh-song-in h3 {
  animation-delay: .05s;
}

/* ================== TOOLTIPS ================== */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(14,18,28,.95);
  color: #eef1ff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 7px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 200;
  border: 1px solid rgba(255,255,255,.08);
}
[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Não mostrar tooltip em touch (evita ficar preso) */
@media (hover: none) { [data-tip]::after { display: none; } }

/* ================== COUNTDOWN ================== */
.bh-countdown {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  margin-left: 6px;
  opacity: .75;
  transition: opacity .3s;
}
.bh-countdown:empty { display: none; }

/* ================== MODO COMPACTO (mobile) ================== */
.bh-compact-btn {
  display: none;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 12px 6px;
  margin: 0 auto;
  width: 100%;
  transition: color .2s;
}
.bh-compact-btn i {
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  display: inline-block;
}
.bh-compact-btn:hover { color: var(--text); }
@media (max-width: 700px) {
  .bh-compact-btn { display: block; }
  /* Volume não funciona em mobile — esconde botão e popover */
  .bh-volume { display: none !important; }
  /* Pills de estação no topo não fazem sentido no mobile (usa swipe/dots) */
  .bh-stations { display: none; }
  /* Topbar mobile: esconde subtítulo e redes sociais (já estão no menu) */
  .bh-brand-sub { display: none; }
  .bh-social a.bh-social-btn { display: none; }
  .bh-social { gap: 6px; }
  .bh-social #themeToggle { margin-right: 0; }
  .bh-social #themeToggle::after { display: none; }
}

/* Cover colapsável */
.cover-album {
  transition: max-height .4s cubic-bezier(.22,1,.36,1),
              opacity .35s ease,
              margin .35s ease;
  max-height: 500px;
  overflow: hidden;
}
.bh-player.bh-compact .cover-album {
  max-height: 0 !important;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.bh-player.bh-compact .bh-compact-btn i {
  transform: rotate(180deg);
}
.bh-player.bh-compact .bh-np-bar,
.bh-player.bh-compact .bh-np-time {
  margin-top: 4px;
}

/* ================== MINI-PLAYER: ESTAÇÃO ================== */
.bh-mini-station {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1px;
}

/* ================== FOOTER ================== */
.bh-footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 22px 14px 28px;
  border-top: 1px solid var(--border);
}


.bh-footer-copy{
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .03em;
}

/* ================== FEATURE 1: COVER BLUR MORPH ================== */
@keyframes bhCoverOut {
  0%   { filter: blur(0px);   transform: scale(1);    opacity: 1; }
  100% { filter: blur(12px);  transform: scale(1.08); opacity: 0; }
}
@keyframes bhCoverIn {
  0%   { filter: blur(4px);   transform: scale(0.96); opacity: 0; }
  100% { filter: blur(0px);   transform: scale(1);    opacity: 1; }
}
#currentCoverArt.bh-cover-out {
  animation: bhCoverOut 300ms ease forwards;
}
#currentCoverArt.bh-cover-in {
  animation: bhCoverIn 350ms ease forwards;
}

/* ================== FEATURE 2: LIKE PARTICLES ================== */
@keyframes bhParticleFly {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--bh-px), var(--bh-py)) scale(1.1); opacity: 0; }
}
.bh-like-particle {
  position: fixed;
  font-size: 16px;
  pointer-events: none;
  z-index: 9999;
  animation: bhParticleFly 700ms ease-out forwards;
}

/* ================== FEATURE 3: SKELETON TEXT LOADING ================== */
.bh-skeleton-text {
  position: relative;
  color: transparent !important;
  border-radius: 6px;
  overflow: hidden;
}
.bh-skeleton-text::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.06) 25%,
    rgba(255,255,255,.15) 50%,
    rgba(255,255,255,.06) 75%
  );
  background-size: 400px 100%;
  animation: bhShimmer 1.4s ease-in-out infinite;
  border-radius: inherit;
}
[data-theme="light"] .bh-skeleton-text::after {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.06) 25%,
    rgba(0,0,0,.14) 50%,
    rgba(0,0,0,.06) 75%
  );
  background-size: 400px 100%;
}

/* ================== FEATURE 4: RICHER TOAST ================== */
/* Slide in from right */
@keyframes bhToastIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}
.bh-toast {
  animation: bhToastIn .32s cubic-bezier(.22,1,.36,1) both;
  overflow: hidden;
  position: relative;
}
.bh-toast.out {
  transform: translateX(110%) !important;
  opacity: 0 !important;
  transition: transform .22s ease, opacity .22s ease !important;
  animation: none !important;
}
/* Progress bar */
.bh-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  border-radius: 0 0 16px 16px;
  background: rgba(255,255,255,.25);
  transform-origin: left;
  animation: bhToastProgress 2.6s linear forwards;
}
@keyframes bhToastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
.bh-toast-success .bh-toast-progress { background: rgba(40,167,69,.55); }
.bh-toast-error   .bh-toast-progress { background: rgba(220,53,69,.55); }
.bh-toast-info    .bh-toast-progress { background: rgba(120,160,255,.55); }
/* SVG icon */
.bh-toast-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
/* Success checkmark stroke animation */
@keyframes bhCheckDraw {
  from { stroke-dashoffset: 30; }
  to   { stroke-dashoffset: 0; }
}
.bh-toast-success .bh-check-path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: bhCheckDraw .4s .1s ease forwards;
}
/* Error shake */
@keyframes bhShakeIcon {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-3px); }
  40%     { transform: translateX(3px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(2px); }
}
.bh-toast-error .bh-toast-icon {
  animation: bhShakeIcon .4s .05s ease;
}
/* Info pulse */
@keyframes bhPulseIcon {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.18); }
}
.bh-toast-info .bh-toast-icon {
  animation: bhPulseIcon .6s ease infinite;
}

/* ================== FEATURE 5: SWIPE INDICATOR ================== */
.bh-swipe-indicator {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .1s ease;
}
.bh-swipe-indicator.is-visible {
  opacity: 1;
}
.bh-swipe-arrow {
  font-size: 42px;
  line-height: 1;
  color: #fff;
  transition: transform .08s ease;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.bh-swipe-label {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
/* Flash on successful swipe */
@keyframes bhSwipeFlash {
  0%   { background: rgba(255,255,255,.28); }
  100% { background: rgba(0,0,0,0); opacity: 0; }
}
.bh-swipe-indicator.bh-swipe-confirm {
  animation: bhSwipeFlash .3s ease forwards;
}

/* ================== FEATURE 6: STATION SWITCH COUNTDOWN ================== */
.bh-switch-countdown {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 20;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(6px);
}
.bh-switch-ring-wrap {
  position: relative;
  width: 64px;
  height: 64px;
}
.bh-switch-ring-wrap svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
@keyframes bhRingSweep {
  from { stroke-dashoffset: 176; }
  to   { stroke-dashoffset: 0; }
}
.bh-switch-ring-circle {
  fill: none;
  stroke: var(--accent, #d6b46a);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  animation: bhRingSweep 800ms linear forwards;
}
.bh-switch-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,.15);
  stroke-width: 4;
}
.bh-switch-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  font-family: "Share", system-ui, sans-serif;
}

/* ================== FEATURE A: DYNAMIC BACKGROUND WITH COVER COLOR ================== */
:root {
  --accent-rgb: 214, 180, 106;
}

.bh-card.bh-player {
  position: relative;
  overflow: visible;
  transition: box-shadow 1.2s ease;
  box-shadow: var(--shadow), 0 0 60px rgba(var(--accent-rgb), 0.18);
}

.bh-card.bh-player::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), 0.22) 0%, transparent 70%);
  pointer-events: none;
  transition: background 1.2s ease;
  z-index: 0;
}

/* Ensure all direct content stays above ::before */
.bh-card.bh-player > * {
  position: relative;
  z-index: 1;
}

/* ================== FEATURE B: VOLUME SLIDER COLORED FILL ================== */
#volume {
  --vol-pct: 80%;
}

#volume::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--accent) var(--vol-pct), rgba(255,255,255,0.18) var(--vol-pct));
  border-radius: 999px;
}

#volume::-moz-range-track {
  background: linear-gradient(to right, var(--accent) var(--vol-pct), rgba(255,255,255,0.18) var(--vol-pct));
  border-radius: 999px;
}

/* ================== FEATURE C: LONG PRESS FAVORITES MENU ================== */
.bh-fav-menu {
  position: absolute;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 300;
  background: rgba(14, 18, 28, 0.97);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  transition: transform 180ms ease, opacity 180ms ease;
  white-space: nowrap;
}

.bh-fav-menu.is-open {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  pointer-events: all;
}

.bh-fav-menu button {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
  text-align: left;
  transition: background .12s ease;
}

.bh-fav-menu button:hover {
  background: rgba(255,255,255,.12);
}

/* ================== FEATURE D: FOCUS MODE (CINEMATIC) ================== */
.bh-focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.bh-focus-overlay[hidden] {
  display: none !important;
}

.bh-focus-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* Blurred background art */
.bh-focus-bg {
  position: absolute;
  inset: -60px;
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(.38) saturate(1.4);
  transition: background-image 0.8s ease;
  z-index: 0;
}

/* Dark vignette overlay */
.bh-focus-bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 70%),
    linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 50%);
  z-index: 1;
  pointer-events: none;
}

/* Top bar */
.bh-focus-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}

.bh-focus-now {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bh-focus-now-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b3b;
  flex-shrink: 0;
  animation: bhFocusDotPulse 1.5s ease-in-out infinite;
}

@keyframes bhFocusDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.75); }
}

.bh-focus-now-txt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}

.bh-focus-station-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255,255,255,.85);
  text-transform: uppercase;
}

.bh-focus-close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 16px;
  transition: background .15s ease;
  flex-shrink: 0;
}

.bh-focus-close:hover {
  background: rgba(255,255,255,.22);
}

/* Flexible spacer pushes content to bottom */
.bh-focus-spacer {
  flex: 1;
}

/* Bottom content area */
.bh-focus-bottom {
  position: relative;
  z-index: 2;
  padding: 0 24px 36px;
}

.bh-focus-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 20px;
}

.bh-focus-cover {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,.08);
  flex-shrink: 0;
  transform: scale(0.88);
  transition: transform 400ms cubic-bezier(.22,1,.36,1);
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
}

.bh-focus-overlay.is-open .bh-focus-cover {
  transform: scale(1);
}

.bh-focus-info {
  min-width: 0;
  flex: 1;
  padding-bottom: 4px;
}

.bh-focus-song {
  font-size: clamp(18px, 4vw, 34px);
  font-weight: 900;
  color: #fff;
  letter-spacing: .01em;
  margin: 0 0 6px;
  font-family: "Share", system-ui, sans-serif;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bh-focus-artist {
  font-size: clamp(13px, 2vw, 17px);
  color: rgba(255,255,255,.6);
  letter-spacing: .02em;
  margin: 0;
  font-family: "Share", system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Progress bar */
.bh-focus-bar {
  height: 3px;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  margin-bottom: 24px;
  overflow: hidden;
}

.bh-focus-bar-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 999px;
  transition: width .5s linear;
}

/* Controls row */
.bh-focus-ctrls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.bh-focus-ctrl {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 17px;
  transition: background .15s ease, transform .1s ease;
}

.bh-focus-ctrl:hover {
  background: rgba(255,255,255,.18);
  transform: scale(1.07);
}

.bh-focus-ctrl--play {
  width: 64px;
  height: 64px;
  font-size: 22px;
  background: #fff;
  color: #000;
  border-color: transparent;
}

.bh-focus-ctrl--play:hover {
  background: rgba(255,255,255,.88);
  color: #000;
}

@media (max-width: 480px) {
  .bh-focus-topbar { padding: 16px 16px 0; }
  .bh-focus-bottom { padding: 0 16px 28px; }
  .bh-focus-cover  { width: 96px; height: 96px; border-radius: 10px; }
  .bh-focus-row    { gap: 14px; }
}

/* Make cover clickable with cursor pointer */
.cover-album {
  cursor: pointer;
}

/* ================== FEATURE 3: CARD DO ARTISTA ================== */
.bh-artist-link {
  cursor: pointer;
  transition: color .18s ease;
  text-decoration: underline dotted rgba(255,255,255,.3);
  text-underline-offset: 3px;
}
.bh-artist-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
[data-theme="light"] .bh-artist-link:hover { color: var(--accent); }

/* Sheet container */
.bh-artist-sheet {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: flex-end;
}
.bh-artist-sheet[hidden] { display: none !important; }

.bh-artist-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s ease;
  cursor: pointer;
}
.bh-artist-sheet.is-open .bh-artist-sheet-backdrop { opacity: 1; }

.bh-artist-sheet-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: rgba(14,18,28,.97);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 20px 20px 32px;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 -16px 60px rgba(0,0,0,.5);
}
.bh-artist-sheet.is-open .bh-artist-sheet-panel { transform: translateY(0); }

[data-theme="light"] .bh-artist-sheet-panel {
  background: rgba(245,247,255,.98);
  border-color: rgba(0,0,0,.1);
}

.bh-artist-sheet-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 15px;
  transition: background .15s ease;
}
.bh-artist-sheet-close:hover { background: rgba(255,255,255,.15); }

/* Hero */
.bh-artist-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.bh-artist-photo {
  width: 80px; height: 80px;
  border-radius: 999px;
  background: rgba(255,255,255,.08) center/cover no-repeat;
  border: 2px solid var(--border);
  flex-shrink: 0;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: background-image .4s ease;
}
.bh-artist-genre {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 4px;
}
.bh-artist-name {
  font-size: 22px;
  font-weight: 900;
  margin: 0;
  font-family: "Share", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Body — álbum atual */
.bh-artist-body { min-height: 64px; }

.bh-artist-album-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
}
.bh-artist-album-wrap[hidden] { display: none !important; }

[data-theme="light"] .bh-artist-album-wrap { background: rgba(0,0,0,.04); }

.bh-artist-album-thumb {
  width: 54px; height: 54px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.bh-artist-album-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 2px;
}
.bh-artist-album-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--text);
}
.bh-artist-album-year {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* Loader 3 dots */
.bh-artist-loader {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}
.bh-artist-loader[hidden] { display: none !important; }
.bh-artist-loader span {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
  animation: bhDotPulse 1s ease-in-out infinite;
}
.bh-artist-loader span:nth-child(2) { animation-delay: .15s; }
.bh-artist-loader span:nth-child(3) { animation-delay: .30s; }
@keyframes bhDotPulse {
  0%,80%,100% { transform: scale(.6); opacity: .4; }
  40%         { transform: scale(1);  opacity: 1; }
}

/* ================== FEATURE 12: TOP 10 DA SEMANA ================== */
/* ================== TOP DA GALERA — WIDGET DE VOTAÇÃO ================== */

/* Reutilizado pelo JS de votação */
@keyframes bhTop10In {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Container principal */
.bh-vote {
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(14px);
  padding: 18px 18px 14px;
  box-shadow: var(--shadow);
}

/* Cabeçalho */
.bh-vote-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}

.bh-vote-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.bh-vote-title-wrap i {
  color: var(--accent);
  font-size: 15px;
}

.bh-vote-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bh-vote-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Status pill */
.bh-vote-status-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.07);
  color: var(--muted);
}

.bh-vote-pill--open {
  background: rgba(255,60,60,.12);
  border-color: rgba(255,60,60,.4);
  color: #ffa0a0;
}

.bh-vote-pill--wait {
  background: rgba(244,193,93,.10);
  border-color: rgba(244,193,93,.35);
  color: #f4c15d;
}

.bh-vote-pill--closed {
  background: rgba(183,189,214,.08);
  border-color: rgba(183,189,214,.25);
  color: var(--muted);
}

.bh-vote-pill--play {
  background: rgba(53,211,156,.10);
  border-color: rgba(53,211,156,.35);
  color: #35d39c;
}

/* Countdown */
.bh-vote-countdown {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  letter-spacing: .02em;
}

/* Corpo */
.bh-vote-body {
  display: flex;
  flex-direction: column;
}

/* Lista de músicas */
.bh-vote-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bh-vote-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  transition: background .15s ease;
}

.bh-vote-item:last-child {
  border-bottom: none;
}

.bh-vote-item:hover {
  background: rgba(255,255,255,.03);
}

.bh-vote-item.is-voted {
  background: rgba(var(--accent-rgb),.06);
}

.bh-vote-item.is-top {
  background: transparent;
}

/* Rank */
.bh-vote-rank {
  font-size: 42px;
  font-weight: 900;
  min-width: 42px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text);
  line-height: 1;
}

.bh-vote-rank-num {
  font-size: 42px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}

/* Thumbnail do álbum */
.bh-vote-thumb {
  width: 76px;
  height: 76px;
  border-radius: 8px;
  background: rgba(255,255,255,.06) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff22"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>') center/40% no-repeat;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  overflow: hidden;
}

/* Info: título + artista */
.bh-vote-info {
  flex: 1;
  min-width: 0;
}

.bh-vote-song {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .01em;
  margin: 0 0 4px;
  color: var(--text);
}

.bh-vote-artist {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Barra de votos (resultado) */
.bh-vote-bar-wrap {
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  margin-top: 8px;
}

.bh-vote-bar {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width .5s ease;
}

/* Contagem (oculta — fica dentro do botão) */
.bh-vote-count {
  display: none;
}

/* Botão de voto */
.bh-vote-btn {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  border: none;
  background: rgba(255,255,255,.10);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: background .15s, transform .12s;
  line-height: 1;
  padding: 0;
  text-decoration: none;
}

.bh-vote-btn span {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.bh-vote-btn:hover:not(:disabled):not(.bh-vote-btn--used):not(.bh-vote-btn--closed) {
  background: rgba(var(--accent-rgb),.25);
  transform: scale(1.05);
}

.bh-vote-btn:active:not(:disabled) {
  transform: scale(.95);
}

.bh-vote-btn.is-voted {
  background: rgba(var(--accent-rgb),.20);
  border: 1px solid rgba(var(--accent-rgb),.4);
  color: var(--accent);
  cursor: default;
}

.bh-vote-btn--used {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

.bh-vote-btn--closed {
  opacity: .6;
  cursor: default;
  pointer-events: none;
}

/* Skeleton */
.bh-vote-skel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bh-vote-skel-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}

.bh-vote-skel-row:last-child {
  border-bottom: none;
}

/* Mensagem vazia / aguardando */
.bh-vote-empty {
  text-align: center;
  padding: 20px 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.bh-vote-empty small {
  font-size: 11px;
  opacity: .7;
}

/* Rodapé */
.bh-vote-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
}

#bhVoteVotesLeft {
  font-weight: 700;
  color: var(--accent);
}

/* Light theme */
[data-theme="light"] .bh-vote {
  background: rgba(245,247,255,.95);
}

[data-theme="light"] .bh-vote-item.is-voted {
  background: rgba(var(--accent-rgb),.10);
}

[data-theme="light"] .bh-vote-skel-row {
  background: rgba(0,0,0,.03);
}

/* ================== FEATURE 7: ENQUETE SEMANAL ================== */
.bh-poll {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(14px);
  padding: 18px;
  box-shadow: var(--shadow);
}
.bh-poll[hidden] { display: none !important; }

.bh-poll-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.bh-poll-head i { color: var(--accent2); font-size: 14px; }
.bh-poll-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bh-poll-question {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.4;
  color: var(--text);
}

.bh-poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bh-poll-opt {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255,255,255,.04);
  transition: border-color .18s ease, background .18s ease;
}
.bh-poll-opt:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); }

.bh-poll-opt-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(var(--accent-rgb), .18);
  border-radius: inherit;
  transition: width .5s cubic-bezier(.22,1,.36,1);
  width: 0%;
  pointer-events: none;
}

.bh-poll-opt-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
}

.bh-poll-opt-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.bh-poll-opt-pct {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  flex-shrink: 0;
  min-width: 32px;
  text-align: right;
  transition: color .3s ease;
}

/* Voted state */
.bh-poll-opt.is-voted {
  border-color: rgba(var(--accent-rgb), .55);
}
.bh-poll-opt.is-voted .bh-poll-opt-pct {
  color: var(--accent);
}
.bh-poll-opt.is-winner .bh-poll-opt-text {
  color: var(--accent);
}

/* Disabled after voting */
.bh-poll-options.is-done .bh-poll-opt {
  cursor: default;
  pointer-events: none;
}

.bh-poll-total {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  letter-spacing: .04em;
}

[data-theme="light"] .bh-poll { background: rgba(245,247,255,.95); }
[data-theme="light"] .bh-poll-opt { background: rgba(0,0,0,.03); }

/* ================== FEATURE 10: PERFIL DO OUVINTE ================== */
/* Botão no topbar */
.bh-profile-btn.is-logged i { color: var(--accent); }

/* Modal */
.bh-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bh-profile-modal[hidden] { display: none !important; }

.bh-profile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s ease;
  cursor: pointer;
}
.bh-profile-modal.is-open .bh-profile-backdrop { opacity: 1; }

.bh-profile-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: rgba(14,18,28,.98);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 52px 22px 36px; /* top 52px — espaço para o botão X não colidir */
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 -16px 60px rgba(0,0,0,.5);
  max-height: 90vh;
  overflow-y: auto;
}
.bh-profile-modal.is-open .bh-profile-panel { transform: translateY(0); }

[data-theme="light"] .bh-profile-panel {
  background: rgba(248,250,255,.98);
  border-color: rgba(0,0,0,.1);
}

.bh-profile-close {
  position: absolute; top:14px; left:14px;
  width:34px; height:34px; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.07);
  color:var(--text); cursor:pointer; display:grid; place-items:center;
  font-size:14px; transition:background .15s;
}
.bh-profile-close:hover { background: rgba(255,255,255,.14); }

/* Vista de login */
.bh-profile-view[hidden] { display: none !important; }

.bh-profile-icon-wrap {
  font-size: 48px;
  text-align: center;
  margin-bottom: 10px;
  color: var(--accent);
}
.bh-profile-title {
  font-size: 18px; font-weight: 800; text-align:center;
  margin: 0 0 6px; font-family:"Share",sans-serif;
  text-transform:uppercase; letter-spacing:.04em;
}
.bh-profile-sub {
  font-size: 13px; color: var(--muted); text-align:center; margin:0 0 20px;
}

/* Form */
.bh-profile-form { display:flex; flex-direction:column; gap:12px; }
.bh-pf-field { display:flex; flex-direction:column; gap:5px; }
.bh-pf-field label { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.bh-pf-field input {
  padding:11px 14px; border-radius:10px;
  border:1px solid var(--border); background:rgba(255,255,255,.06);
  color:var(--text); font-size:14px; outline:none; transition:border-color .2s;
  font-family:inherit;
}
.bh-pf-field input:focus { border-color:rgba(var(--accent-rgb),.5); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12); }
[data-theme="light"] .bh-pf-field input { background:rgba(0,0,0,.04); }

.bh-pf-submit {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px; border-radius:10px;
  background:linear-gradient(135deg, rgba(214,180,106,.9), rgba(120,160,255,.65));
  border:none; color:#0b0c10; font-weight:800; font-size:14px;
  cursor:pointer; transition:opacity .15s ease; margin-top:4px;
  font-family:inherit; letter-spacing:.03em;
}
.bh-pf-submit:hover { opacity:.9; }
.bh-pf-submit:disabled { opacity:.5; cursor:not-allowed; }

.bh-pf-note { font-size:11px; color:var(--muted); text-align:center; margin:0; }

/* Dashboard */
.bh-profile-header {
  display:flex; align-items:center; gap:14px; margin-bottom:18px;
  padding-bottom:16px; border-bottom:1px solid var(--border);
}
.bh-profile-avatar {
  width:48px; height:48px; border-radius:999px;
  background:rgba(var(--accent-rgb),.18); border:2px solid rgba(var(--accent-rgb),.4);
  display:grid; place-items:center; font-size:22px; flex-shrink:0;
}
.bh-profile-name { font-size:16px; font-weight:800; margin:0 0 2px; }
.bh-profile-email-lbl { font-size:12px; color:var(--muted); margin:0; }

.bh-pf-logout {
  margin-left:auto; background:rgba(255,90,90,.12); border:1px solid rgba(255,90,90,.25);
  color:rgba(255,120,120,.9); border-radius:8px; padding:7px 10px;
  cursor:pointer; font-size:14px; transition:background .15s;
}
.bh-pf-logout:hover { background:rgba(255,90,90,.22); }

/* Tabs */
.bh-profile-tabs {
  display:flex; gap:4px; margin-bottom:14px;
}
.bh-ptab {
  flex:1; padding:9px; border-radius:8px; border:1px solid var(--border);
  background:rgba(255,255,255,.04); color:var(--muted); font-size:12px;
  font-weight:700; cursor:pointer; transition:all .15s; font-family:inherit;
}
.bh-ptab.is-active {
  background:rgba(var(--accent-rgb),.15); border-color:rgba(var(--accent-rgb),.4);
  color:var(--text);
}

.bh-ptab-content[hidden] { display:none !important; }

/* Lista de favoritos / histórico */
.bh-plist {
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:4px;
  max-height:240px; overflow-y:auto;
}
.bh-plist li {
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 10px; border-radius:8px; background:rgba(255,255,255,.04);
  font-size:12px;
}
.bh-plist-info { flex:1; min-width:0; }
.bh-plist-song {
  font-weight:700; text-transform:uppercase;
  overflow:hidden; display:-webkit-box;
  -webkit-box-orient:vertical; -webkit-line-clamp:2;
  line-clamp:2; word-break:break-word; line-height:1.35;
}
.bh-plist-artist {
  color:var(--muted); text-transform:uppercase; font-size:11px;
  overflow:hidden; display:-webkit-box;
  -webkit-box-orient:vertical; -webkit-line-clamp:1;
  word-break:break-word; margin-top:2px;
}
.bh-plist-ch {
  font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; border:1px solid var(--border);
  color:var(--accent); flex-shrink:0;
}
.bh-plist-time {
  font-size:10px; color:var(--muted); margin-top:4px; opacity:.7;
  letter-spacing:.02em;
}
.bh-plist-empty { color:var(--muted); font-size:13px; text-align:center; padding:20px 10px; }

[data-theme="light"] .bh-profile-panel { background:rgba(248,250,255,.98); }
[data-theme="light"] .bh-pf-field input { background:rgba(0,0,0,.04); }
[data-theme="light"] .bh-ptab { background:rgba(0,0,0,.03); }

/* ================== OUVINTES AO VIVO ================== */
.bh-listeners-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px auto 0;
  font-size: 12px;
  color: rgba(255,255,255,.50);
  letter-spacing: .03em;
  user-select: none;
}
.bh-listeners-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  flex-shrink: 0;
  animation: bhListenerPulse 2.2s ease-in-out infinite;
}
@keyframes bhListenerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .55; transform: scale(.8); }
}
#bhListenerCount {
  font-weight: 700;
  color: rgba(255,255,255,.78);
  font-variant-numeric: tabular-nums;
  transition: color .4s ease;
}
.bh-listeners-label { opacity: .75; }
[data-theme="light"] .bh-listeners-wrap { color: rgba(0,0,0,.40); }
[data-theme="light"] #bhListenerCount   { color: rgba(0,0,0,.65); }

/* ================== STATS DO PERFIL ================== */
.bh-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.bh-stat-item {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.bh-stat-item.bh-stat-full { grid-column: 1 / -1; }
.bh-stat-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
  font-family: "Share", system-ui, sans-serif;
  letter-spacing: .02em;
  line-height: 1.2;
}
.bh-stat-val--sm { font-size: 13px; }
.bh-stat-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
[data-theme="light"] .bh-stat-item {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
}

/* ================== CONQUISTAS / BADGES ================== */
.bh-badges-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.bh-earned-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.bh-earned-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 68px;
  padding: 10px 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor: default;
  text-align: center;
  transition: transform .15s ease, background .15s ease;
}
.bh-earned-badge:not(.bh-earned-badge--locked):hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
}
.bh-earned-badge--locked {
  opacity: .30;
  filter: grayscale(1);
}
.bh-badge-icon { font-size: 22px; line-height: 1; }
.bh-badge-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.3;
}
[data-theme="light"] .bh-earned-badge {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.10);
}