#audio{width:100%}
#siteLogo {
  height: 4rem;
  width: auto;
  object-fit: contain;
  transform: translateY(2px); /* ligeiro alinhamento óptico */
  transition: height 0.3s ease, opacity 0.3s ease;
}

/* Botão de follow / following */
.btn-follow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.9);
  cursor:pointer;
  transition:background 0.15s ease,border-color 0.15s ease,color 0.15s ease,transform 0.05s ease;
}

.btn-follow:hover{
  border-color:rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.12);
}

.btn-follow:active{
  transform:scale(0.97);
}

/* estados */
.btn-follow.following{
  background:#ffffff;
  color:#000000;
  border-color:#ffffff;
}

.btn-follow.not-following{
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.9);
}

/* badge de followers */
.followers-badge{
  font-size:11px;
  color:rgba(255,255,255,0.55);
}

  /* ==========================
     VIBE CHIPS
     ========================== */
  .vh-chip {
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.85);
    padding: 0.4rem 0.9rem;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(228,228,231,0.7);
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }

  .vh-chip[data-active="true"] {
    border-color: #f5f5f6;
    color: #f5f5f6;
    background: #111116;
  }

  .vh-chip:hover {
    border-color: #e4e4e7;
    color: #e4e4e7;
  }
  
  
    .vh-feed-card {
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background:
      radial-gradient(circle at 0 0, rgba(255,255,255,0.045), transparent 60%),
      #050506;
  }

.vh-feed-cover {
  background:
    radial-gradient(circle at 0 0, var(--surface-strong) 0%, #050506 70%);
}


  
    /* ==========================
     BOTÕES (base + variações)
     ========================== */
  .vh-btn {
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgba(5,5,6, 0.95);
    color: rgba(244,244,245,0.9);
    font-size: 0.75rem;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
  }

  .vh-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
  }

  .vh-btn:active {
    transform: scale(0.97);
  }

.vh-icon-round {
  width: 36px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 9999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);

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

.vh-icon-round:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.22);
}

.vh-icon-round:active {
  transform: scale(0.96);
}


  .vh-mini-btn {
    padding: 0.3rem 0.95rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .vh-action-btn {
    border-radius: 0.9rem;
    padding: 0.6rem 0;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .vh-icon-btn {
    padding: 0.35rem 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }


.vh-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
}


.vh-searchbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(5,5,6,0.95);

  padding: 6px 10px;
  font-size: 0.75rem;

  color: rgba(255,255,255,0.75);
}

.vh-searchbar input {
  width: 100%;
  background: transparent;
  outline: none;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.85);
}

.vh-searchbar input::placeholder {
  color: rgba(255,255,255,0.35);
}

.vh-searchbar svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}


  /* ==========================
     MOBILE AJUSTES
     ========================== */
  @media (max-width: 640px) {
    #player .vh-player-extra {
      display: none !important;
    }
  }

/* === Campos de formulário Voidhall === */

/* === Campos de formulário Voidhall === */

.vh-input {
  width: 100%;
  border-radius: 0.9rem;
  border: 1px solid var(--border-soft);
  background: var(--surface-soft);
  padding: 0.6rem 0.8rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text);                 /* antes: var(--text-primary) */
  outline: none;
  transition:
    border-color 160ms ease-out,
    background-color 160ms ease-out,
    box-shadow 160ms ease-out;
}

.vh-input::placeholder {
  color: var(--text-muted);
  opacity: 0.75;
}

.vh-input:focus-visible {
  border-color: var(--border-strong); /* antes: var(--accent-soft) */
  box-shadow: 0 0 0 1px var(--border-strong);
  background: var(--surface-strong);
}

/* textarea com altura base */
.vh-input.vh-input-textarea {
  min-height: 120px;
  resize: vertical;
}

/* ==========================
   TRACK PLAYER – Play/Pause FIX
   ========================== */

/* 1) garantir que sr-only é mesmo invisível */
.vh-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 2) botão sempre “icon-only”, mesmo que o JS injete texto */
#trackPagePlay.vh-track-v2-play-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10), transparent 55%),
    rgba(255,255,255,0.03);

  box-shadow:
    0 0 0 1px rgba(0,0,0,0.9),
    0 14px 28px rgba(0,0,0,0.75);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* mata texto visual */
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
  user-select: none;
}

#trackPagePlay.vh-track-v2-play-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.9),
    0 0 0 3px rgba(255,255,255,0.08),
    0 14px 28px rgba(0,0,0,0.75);
}

/* 3) Ícone (default = PLAY) */
#trackPagePlay.vh-track-v2-play-btn::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
  background: rgba(255,255,255,0.85);

  /* triângulo play */
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* 4) Estado PLAYING = PAUSE
   — usa aria-pressed se tiveres; se não, também suporte a .is-playing */
#trackPagePlay[aria-pressed="true"]::before,
#trackPagePlay.is-playing::before {
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  clip-path: none;
  background: transparent;

  /* duas barras */
  box-shadow:
    -4px 0 0 0 rgba(255,255,255,0.85),
     4px 0 0 0 rgba(255,255,255,0.85);
}

/* hover */
#trackPagePlay.vh-track-v2-play-btn:hover {
  border-color: rgba(255,255,255,0.18);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.13), transparent 55%),
    rgba(255,255,255,0.04);
  transform: translateY(-1px);
}

#trackPagePlay.vh-track-v2-play-btn:active {
  transform: translateY(0);
}

.vh-nav-ico{
  width: 22px;
  height: 22px;
  fill: currentColor;
  opacity: .9;
}
.vh-mobile-nav a:hover .vh-nav-ico{
  opacity: 1;
}

/* ==========================
   LIGHT MODE OVERRIDES (components)
   ========================== */

html[data-theme="light"] .btn-follow {
  border-color: rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.75);
  color: rgba(0,0,0,0.85);
}
html[data-theme="light"] .btn-follow:hover {
  border-color: rgba(0,0,0,0.22);
  background: rgba(0,0,0,0.06);
}
html[data-theme="light"] .btn-follow.following {
  background: rgba(0,0,0,0.92);
  color: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.92);
}
html[data-theme="light"] .followers-badge {
  color: rgba(0,0,0,0.55);
}

html[data-theme="light"] .vh-chip {
  border-color: rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.75);
  color: rgba(0,0,0,0.62);
}
html[data-theme="light"] .vh-chip[data-active="true"] {
  border-color: rgba(0,0,0,0.80);
  background: rgba(0,0,0,0.92);
  color: rgba(255,255,255,0.92);
}
html[data-theme="light"] .vh-chip:hover {
  border-color: rgba(0,0,0,0.22);
  color: rgba(0,0,0,0.78);
}

html[data-theme="light"] .vh-feed-card {
  background:
    radial-gradient(circle at 0 0, rgba(0,0,0,0.05), transparent 60%),
    rgba(255,255,255,0.78);
}
html[data-theme="light"] .vh-feed-cover {
  background:
    radial-gradient(circle at 0 0, rgba(0,0,0,0.06) 0%, rgba(255,255,255,0.85) 70%);
}

html[data-theme="light"] .vh-btn {
  background: rgba(255,255,255,0.80);
  color: rgba(0,0,0,0.82);
  border-color: rgba(0,0,0,0.16);
}
html[data-theme="light"] .vh-btn:hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.22);
}

html[data-theme="light"] .vh-nav-dot {
  background: rgba(0,0,0,0.35);
}

html[data-theme="light"] .vh-searchbar {
  border-color: rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.86);
  color: rgba(0,0,0,0.70);
}
html[data-theme="light"] .vh-searchbar input {
  color: rgba(0,0,0,0.86);
}
html[data-theme="light"] .vh-searchbar input::placeholder {
  color: rgba(0,0,0,0.38);
}

/* ==========================
   VOIDTHALL RANGE – PLAYER
   ========================== */

/* Chrome / Safari */
input[type="range"].vh-range::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--vh-range-fill) var(--vh-progress, 0%),
    var(--vh-range-track) var(--vh-progress, 0%)
  );
}

input[type="range"].vh-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vh-range-thumb);
  border: 1px solid var(--vh-range-thumb-border);
  margin-top: -4px;
}

/* Firefox */
input[type="range"].vh-range::-moz-range-track {
  height: 2px;
  border-radius: 999px;
  background: var(--vh-range-track);
}

input[type="range"].vh-range::-moz-range-progress {
  height: 2px;
  border-radius: 999px;
  background: var(--vh-range-fill);
}

input[type="range"].vh-range::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vh-range-thumb);
  border: 1px solid var(--vh-range-thumb-border);
}

/* volume mais discreto */
input[type="range"].vh-volume {
  width: clamp(120px, 14vw, 100px);
  max-width: none;
  opacity: 0.75;
}

input[type="range"].vh-volume:hover {
  opacity: 1;
}

/* ==========================
   GLOBAL PLAYER LAYOUT (desktop optical centering)
   ========================== */

/* mobile: mantém comportamento simples */
#player .vh-player-row{
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* desktop: grid para puxar LEFT/RIGHT para o centro */
@media (min-width: 768px){
  #player .vh-player-row{
    display: grid;
    grid-template-columns:
      minmax(260px, 1fr)
      minmax(420px, 500px)
      minmax(260px, 1fr);
    column-gap: clamp(24px, 4vw, 80px);
    align-items: center;
  }

  #player .vh-player-left{  justify-self: end; }
  #player .vh-player-center{ justify-self: center; width: 100%; }
  #player .vh-player-right{ justify-self: start; }
}