/* =====================================================================
   RÁDIO MARIRI · modern.css  — RE-SKIN DROP-IN (não altera o layout)
   ---------------------------------------------------------------------
   Folha de modernização que SOBRESCREVE/ESTENDE as classes e ids REAIS
   do player atual. Carregue por ÚLTIMO no index.html, depois de
   styles.css, player.css e ondemand.css:

     <link rel="stylesheet" href="css/styles.css?v=2" />
     <link rel="stylesheet" href="css/player.css?v=3" />
     <link rel="stylesheet" href="css/ondemand.css?v=9" />
     <link rel="stylesheet" href="css/modern.css?v=1" />   <-- ADICIONAR

   Mesma estrutura, mesmas posições, mesma UX. Só "pele" nova:
   paleta-ponte do Mandala C4, tipografia Inter (sans-serif, igual à
   versão antiga), sombras azul-tinted, cantos, glassmorphism sutil,
   microtransições e a Mandala Sagrada integrada (header + marca d'água
   + favicon + ícone "ao vivo").
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. FONTES — Inter (sans-serif) p/ títulos e corpo, como na versão antiga
   --------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* =====================================================================
   1. TOKENS — paleta-ponte Mandala C4 (índigo → azul → cyan → teal)
   ===================================================================== */
:root {
  /* --- Paleta-ponte (Mandala Sagrada C4) --- */
  --c-indigo-night: #20204a; /* índigo profundo (cipó/espiritualidade) */
  --c-indigo: #2a2a55;
  --c-blue-deep: #2c5fd0;
  --c-blue: #3b82f6; /* azul primário (groupanel) */
  --c-cyan: #22c7e6; /* cyan sonoro */
  --c-teal: #18b58c; /* verde-teal medicina (Apenas Respire) */
  --c-amber: #f5b83d; /* sol / calor sagrado (accent quente) */
  --c-mist: #f4f8fb; /* branco névoa */

  /* --- Tokens semânticos (sobrescrevem styles.css) --- */
  --bg: #f5f8fc; /* fundo cool-white, mais sereno */
  --fg: #15192b; /* índigo-tinta p/ texto (mais coeso que #1e1e28) */
  --muted: #5d6b85; /* neutro frio (não cinza puro) */
  --muted-soft: #8492a8;
  --brand: #2c5fd0; /* azul-ponte como marca principal */
  --brand-strong: #1f4fc0;
  --accent: var(--c-amber);
  --card: #ffffff;
  --line: #e3e9f4; /* linha azul-acinzentada sutil */
  --line-soft: #eef2fa;

  /* --- Gradientes assinatura (Mandala) --- */
  --grad-brand: linear-gradient(135deg, #2c5fd0 0%, #22c7e6 100%);
  --grad-mandala: linear-gradient(140deg, #20204a 0%, #2c5fd0 52%, #18b58c 100%);
  --grad-aurora: linear-gradient(
    140deg,
    #20204a 0%,
    #2c5fd0 42%,
    #1f86c9 68%,
    #18b58c 100%
  );

  /* --- Halos / glows radiais (toque groupanel) --- */
  --glow-cyan: radial-gradient(
    closest-side,
    rgba(34, 199, 230, 0.45),
    rgba(34, 199, 230, 0.12) 50%,
    transparent 78%
  );
  --glow-teal: radial-gradient(
    closest-side,
    rgba(24, 181, 140, 0.4),
    rgba(24, 181, 140, 0.1) 52%,
    transparent 80%
  );

  /* --- Sombras dual-layer azul-tinted --- */
  --shadow-xs: 0 1px 2px rgba(20, 24, 48, 0.05);
  --shadow-sm: 0 1px 2px rgba(20, 24, 48, 0.05), 0 4px 12px -8px rgba(44, 95, 208, 0.22);
  --shadow-md: 0 2px 6px rgba(20, 24, 48, 0.06), 0 12px 28px -14px rgba(44, 95, 208, 0.28);
  --shadow-lg: 0 4px 10px rgba(20, 24, 48, 0.06), 0 28px 56px -22px rgba(44, 95, 208, 0.34);
  --shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 18px 40px -24px rgba(32, 32, 74, 0.45);

  /* --- Tipografia --- */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Raios --- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;

  /* --- Easing --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =====================================================================
   2. BASE — fundo, tipografia de corpo, links
   ===================================================================== */
body {
  background:
    /* halos sutis para "ar" no fundo claro */
    radial-gradient(60% 50% at 88% 0%, rgba(34, 199, 230, 0.07), transparent 70%),
    radial-gradient(55% 45% at 0% 100%, rgba(24, 181, 140, 0.06), transparent 72%),
    var(--bg) !important;
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--brand);
}

/* =====================================================================
   3. STATION CARD — identidade da rádio (aurora Mandala + marca d'água)
   ===================================================================== */
.station-card {
  background: var(--grad-aurora) !important;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Marca d'água: a Mandala (Flor da Vida) atrás do conteúdo, bem sutil */
.station-card::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -56px;
  transform: translateY(-50%);
  width: 240px;
  height: 240px;
  background: url("logo/mandala-glyph.svg") center / contain no-repeat;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  filter: brightness(0) invert(1); /* mandala em branco sobre o gradiente */
}
/* Mandala (Flor da Vida) MANTIDA no desktop e no mobile — é o charme do
   header. A "linha" que o Hildel viu era a sombra cortada do card, não a
   mandala (corrigido na seção 18). Restaurada em 11/jun. */

/* glow extra sobre o card (acima da marca d'água, abaixo do conteúdo) */
.station-card::after {
  background: radial-gradient(
    120% 120% at 100% 0%,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(34, 199, 230, 0.06) 38%,
    rgba(255, 255, 255, 0) 64%
  ) !important;
}

/* garante que texto/cta fiquem acima da marca d'água */
.station-card__header,
.station-card .title,
.station-card .subtitle,
.station-card__meta,
.station-card .links {
  position: relative;
  z-index: 1;
}

/* Badge "Ao vivo agora" — vidro + pulso teal Mandala */
.station-card__badge {
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  letter-spacing: 0.4px;
  box-shadow: var(--shadow-xs);
}
.station-card__pulse {
  background: var(--c-cyan);
  box-shadow: 0 0 0 0 rgba(34, 199, 230, 0.85);
  animation: mariri-pulse 2.4s infinite;
}
@keyframes mariri-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 199, 230, 0.8);
  }
  70% {
    box-shadow: 0 0 0 11px rgba(34, 199, 230, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 199, 230, 0);
  }
}

/* ---------------------------------------------------------------------
   LOGO no header — wordmark CAIXA ALTA "RÁDIO MARIRI"
   ("RÁDIO " gradiente azul→cyan · "MARIRI" sólido) + mandala à esquerda.
   ---------------------------------------------------------------------
   Markup esperado (drop-in com pequeno ajuste documentado no README):

     <h1 class="title">
       <span class="brand-mark" aria-hidden="true"></span>
       <span class="brand-word">
         <span class="brand-word__line">
           <span class="brand-radio">RÁDIO </span><span class="brand-mariri">MARIRI</span>
         </span>
         <span class="brand-tagline" id="brandTagline">TOCANDO SEU CORAÇÃO</span>
       </span>
     </h1>

   Se a marcação NÃO for trocada (cai no texto antigo "Rádio Mariri — …"),
   o título continua legível em branco — nada quebra. Veja README §"markup".
   --------------------------------------------------------------------- */
.station-card .title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 2px 0 8px 0;
  letter-spacing: normal; /* zera o tracking herdado do styles.css */
}

/* Mandala (símbolo SVG) à esquerda do wordmark */
.station-card .title .brand-mark {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: url("logo/mandala-symbol.svg") center / cover no-repeat;
  box-shadow: 0 6px 16px -6px rgba(10, 30, 60, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Bloco do wordmark (linha + tagline empilhados) */
.station-card .title .brand-word {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.station-card .title .brand-word__line {
  font-family: var(--font-body);
  font-size: clamp(1.45rem, 2.3vw, 1.85rem);
  line-height: 1;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

/* "RÁDIO " — peso Light + gradiente azul→cyan (clip no texto) */
.station-card .title .brand-radio {
  font-weight: 300;
  background: linear-gradient(95deg, #2d5fd0 0%, #22c7e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* "MARIRI" — peso Bold + sólido (tema claro: branco sobre o card aurora) */
.station-card .title .brand-mariri {
  font-weight: 700;
  color: #f5f6fc;
}

/* Tagline "TOCANDO SEU CORAÇÃO" — teal, médio, tracking */
.station-card .title .brand-tagline,
#brandTagline {
  font-family: var(--font-body);
  font-weight: 500;
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 3.4px;
  color: #34e0b6; /* teal clareado p/ contraste sobre o card escuro */
  text-transform: uppercase;
}

.station-card .subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.96rem;
}

/* CTA — glass refinado */
.station-card__cta {
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-weight: 600;
  transition: transform 0.22s var(--ease), background 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}
.station-card__cta:hover {
  background: rgba(255, 255, 255, 0.26);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(16, 40, 74, 0.7);
}

/* =====================================================================
   4. STATUS PILLS & LANG SWITCH — coesão com a paleta
   ===================================================================== */
.status-pill {
  background: rgba(44, 95, 208, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px; /* forma do antigo, cor/estilo do novo */
  letter-spacing: 0.2px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-xs);
}
.lang-switch__btn {
  background: rgba(44, 95, 208, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px; /* forma do antigo, cor/estilo do novo */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.lang-switch__btn:hover {
  background: var(--c-blue-deep);
  transform: translateY(-1px);
}
.lang-switch__menu {
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}
.lang-switch__menu button {
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.lang-switch__menu button:hover {
  background: var(--line-soft);
  color: var(--brand);
}

/* =====================================================================
   5. PLAYER — glass card, capa com brilho, controles gradiente Mandala
   ===================================================================== */
.horizontal-player {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 248, 251, 0.9)),
    radial-gradient(120% 120% at 0% 0%, rgba(34, 199, 230, 0.1), transparent 55%) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  color: var(--fg);
  font-family: var(--font-body);
}

/* Capa do álbum — moldura mais suave + leve realce */
.album-artwork {
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #eef3fb, #e3edf8);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8),
    0 8px 18px -12px rgba(44, 95, 208, 0.4);
}
.album-artwork img {
  border-radius: var(--r-md);
}
.album-artwork .default-artwork {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}

/* Linha "tocando agora" / status */
.status-indicator {
  color: var(--muted);
  font-weight: 500;
}
.status-dot,
.status-dot.playing,
.status-dot.online {
  background: var(--c-teal);
}
.status-dot.connecting {
  background: var(--c-amber);
}

/* Título da música — corpo limpo (NÃO serif, p/ legibilidade) */
.song-title {
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.1px;
}
.song-artist {
  color: var(--muted);
}

/* Botões de controle */
.control-button {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--brand);
  box-shadow: var(--shadow-xs);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
    box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.control-button:hover {
  background: var(--line-soft);
  border-color: rgba(44, 95, 208, 0.28);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Play — gradiente da Mandala + glow */
.play-button {
  background: var(--grad-brand) !important;
  border: 0 !important;
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(34, 199, 230, 0.6),
    0 4px 10px -4px rgba(44, 95, 208, 0.5);
}
.play-button:hover {
  background: linear-gradient(135deg, #2453c0 0%, #1bb6da 100%) !important;
  box-shadow: 0 12px 24px -6px rgba(34, 199, 230, 0.7),
    0 6px 14px -4px rgba(44, 95, 208, 0.55);
  transform: translateY(-1px);
}

/* Volume slider + thumb */
.volume-slider {
  background: #c4d3ee;
}
.volume-slider::-webkit-slider-thumb {
  background: var(--brand);
  box-shadow: 0 2px 6px rgba(44, 95, 208, 0.5);
}
.volume-slider::-moz-range-thumb {
  background: var(--brand);
  box-shadow: 0 2px 6px rgba(44, 95, 208, 0.5);
}
.volume-popover {
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

/* Barra de progresso (rádio read-only + on-demand seek) */
.od-progress__fill {
  background: var(--grad-brand);
}
.od-progress[data-progress-mode="radio"] .od-progress__bar {
  background: rgba(196, 211, 238, 0.6);
}
.od-progress[data-progress-mode="ondemand"] .od-progress__bar::-webkit-slider-thumb,
.od-progress[data-progress-mode="ondemand"] .od-progress__bar::-moz-range-thumb {
  background: var(--brand);
  box-shadow: 0 2px 6px rgba(44, 95, 208, 0.5);
}
.od-progress[data-progress-mode="radio"] .od-progress__bar::-moz-range-progress {
  background: var(--grad-brand);
}

/* =====================================================================
   6. MODE TOGGLE SEGMENTADO (Ao vivo / On-Demand)
   ---------------------------------------------------------------------
   SUBSTITUI o switch antigo (.mode-switch). Estilo do Conceito 1,
   adaptado às cores da marca: pílula ativa = gradiente verde→teal com
   texto escuro; inativo = cinza frio.

   Markup novo (ver README §"toggle"):
     <div class="mode-toggle" role="tablist" aria-label="Modo de reprodução">
       <button class="mode-toggle__btn active" role="tab"
               aria-selected="true"  data-mode="radio">…onda… Ao vivo</button>
       <button class="mode-toggle__btn"        role="tab"
               aria-selected="false" data-mode="ondemand">…nota… On-Demand</button>
     </div>
     <!-- input ESCONDIDO mantém o hook que o ondemand.js escuta (#mode-toggle) -->
     <input type="checkbox" id="mode-toggle" class="mode-toggle__input"
            role="switch" aria-hidden="true" tabindex="-1" />

   Um shim de ~12 linhas (no README) sincroniza os botões <-> checkbox:
   clicar num botão marca o checkbox e dispara "change" (o JS de produção
   continua intacto). enterOndemand()/exitOndemand() já fazem sw.checked=…
   — um listener no checkbox reflete isso de volta nos botões.
   ===================================================================== */

/* input real escondido — o JS de produção continua lendo/escrevendo .checked.
   Cobre tanto a classe quanto um #mode-toggle "pelado" dentro do .mode-toggle,
   pra esconder com segurança mesmo se a classe for esquecida no markup. */
.mode-toggle__input,
.mode-toggle > #mode-toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* trilho do segmentado */
.mode-toggle {
  display: inline-flex;
  margin-left: auto; /* mesma posição do switch antigo (canto direito do header) */
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  background: rgba(20, 30, 60, 0.06); /* track sutil sobre o player glass claro */
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mode-toggle__btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--muted-soft);
  padding: 8px 16px;
  border-radius: 999px;
  transition: all 0.25s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.mode-toggle__btn svg {
  width: 14px;
  height: 14px;
  flex: none;
}
/* pílula ATIVA — gradiente verde→teal da marca, texto escuro */
.mode-toggle__btn.active {
  background: linear-gradient(135deg, #3cdea0, #14b896);
  color: #04140d;
  box-shadow: 0 4px 14px -5px rgba(20, 184, 150, 0.8);
}
.mode-toggle__btn:not(.active):hover {
  color: var(--fg);
}
/* foco coeso */
.mode-toggle__btn:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
}

/* compat: caso o switch antigo (.mode-switch) ainda exista em algum lugar,
   mantém o realce em gradiente quando ON (sem quebrar) */
.mode-switch {
  color: var(--muted);
  font-weight: 600;
}
.mode-switch__track {
  background: #c4cbdc;
}
.mode-switch input:checked + .mode-switch__track {
  background: var(--grad-brand) !important;
}

/* =====================================================================
   7. TÍTULOS DE SEÇÃO — Inter sans-serif (Tocadas Recentemente / Pedido)
   ===================================================================== */
#historyTitle,
#historyTitleMobile,
#requestsTitle {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--fg);
  font-size: 1.22rem;
}

/* =====================================================================
   8. LISTA DE PEDIDOS — superfície clara, cards macios
   ===================================================================== */
#pedidos-container {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
#lista-pedidos {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: #fbfcff;
}

/* Item de pedido */
.pedido-item {
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.pedido-item:hover {
  background: linear-gradient(90deg, rgba(44, 95, 208, 0.06), rgba(34, 199, 230, 0.04));
}
.pedido-title {
  font-weight: 600;
  color: var(--fg);
}
.pedido-artist {
  color: var(--muted);
}

/* Capa */
.media-shell {
  border-radius: var(--r-sm);
  background: var(--line-soft);
  box-shadow: var(--shadow-xs);
}

/* Botão "Pedir" — gradiente da marca */
.pedido-button {
  background: var(--grad-brand);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.1px;
  box-shadow: 0 4px 10px -5px rgba(44, 95, 208, 0.6);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    filter 0.18s var(--ease);
}
.pedido-button:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -6px rgba(34, 199, 230, 0.6);
}
.pedido-button:disabled {
  background: var(--muted-soft);
  box-shadow: none;
}

/* Botão compartilhar */
.pedido-share {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}
.pedido-share:hover {
  color: var(--brand);
  border-color: rgba(44, 95, 208, 0.3);
  background: var(--line-soft);
}
.pedido-share.is-copied {
  color: var(--c-teal);
  border-color: rgba(24, 181, 140, 0.4);
  background: rgba(24, 181, 140, 0.1);
}

/* Campo de busca */
#search-input {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fbfcff;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    background 0.2s var(--ease);
}
.search-container input:focus {
  border-color: var(--brand) !important;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(44, 95, 208, 0.16) !important;
}
.search-clear {
  background: var(--line);
  color: var(--muted);
}
.search-clear:hover {
  background: #d4dcec;
  color: var(--fg);
}

/* Scroll hint */
.scroll-hint {
  background: rgba(44, 95, 208, 0.08);
  color: var(--brand);
  border-radius: var(--r-sm);
}
.scroll-hint__icon {
  color: var(--brand);
}

/* Contador de resultados */
#results-counter {
  color: var(--muted);
}

/* =====================================================================
   9. HISTÓRICO — foco no "tocando agora" (od-current) com brilho Mandala
   ===================================================================== */
#song-history,
#song-history-mobile {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}
.history-item {
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  transition: background 0.18s var(--ease);
}
.history-item:hover {
  background: var(--line-soft);
}
.history-title {
  color: var(--fg);
}
.history-artist {
  color: var(--muted);
}
.history-time {
  color: var(--muted-soft);
}
.history-cover {
  border-radius: var(--r-sm);
}

/* "Tocando agora" na fila On-Demand — destaque com a marca */
.history-item.od-current {
  background: linear-gradient(90deg, rgba(44, 95, 208, 0.1), rgba(34, 199, 230, 0.06)) !important;
  box-shadow: inset 3px 0 0 0 var(--c-cyan);
}
.history-tag {
  background: var(--grad-brand);
  border-radius: 999px;
  letter-spacing: 0.4px;
}

/* =====================================================================
   10. ACCORDION (histórico mobile) — coesão visual
   ===================================================================== */
.accordion-header {
  background: var(--line-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-display);
  font-weight: 600;
}
.accordion-header:hover {
  background: #e7eefa !important;
}

/* =====================================================================
   11. SELO HDBR STUDIOS — vidro discreto
   ===================================================================== */
.stamp {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 8px; /* forma do antigo, vidro/cor do novo */
  color: var(--muted);
}
.stamp strong {
  color: var(--fg);
}
.wa {
  background: var(--c-teal);
  border-radius: 4px; /* forma do antigo, cor teal do novo */
}

/* =====================================================================
   12. TOASTS & SKELETONS — gradientes/coesão na paleta
   ===================================================================== */
.toast {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.toast--success {
  background: linear-gradient(135deg, #18b58c, #0f8e6c);
}
.toast--info {
  background: var(--grad-brand);
}

.request-skeleton-item,
.history-skeleton-item {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
}

/* =====================================================================
   13. RETRY / OFFLINE MODAL — botões na nova marca
   ===================================================================== */
.retry-button {
  background: var(--grad-brand);
  border-radius: 999px;
  font-weight: 600;
}
.offline-modal-content {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.offline-modal-icon {
  background: var(--grad-aurora);
}
.offline-retry-btn {
  background: var(--grad-brand);
  border-radius: var(--r-md);
  box-shadow: 0 6px 14px -6px rgba(34, 199, 230, 0.6);
}
.offline-retry-btn:hover {
  background: linear-gradient(135deg, #2453c0, #1bb6da);
  box-shadow: 0 10px 20px -6px rgba(34, 199, 230, 0.7);
}

/* =====================================================================
   14. ACESSIBILIDADE — foco visível coeso + respeito a reduced-motion
   ===================================================================== */
:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .station-card__pulse {
    animation: none;
  }
}

/* =====================================================================
   15. HEADER DO PLAYER — acomoda o toggle segmentado (mais alto que o
   switch antigo) sem desalinhar o "Conectando…" / status.
   ===================================================================== */
.now-playing-header {
  align-items: center;
  gap: 10px;
}
/* Em telas estreitas, status em cima e toggle embaixo (não espreme) */
@media (max-width: 600px) {
  .now-playing-header {
    flex-wrap: wrap;
  }
  .now-playing-header .mode-toggle {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  .mode-toggle__btn {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
  }
}

/* =====================================================================
   16. TEMA ESCURO — logo + superfícies (auto via SO ou .theme-dark/[data-theme])
   ---------------------------------------------------------------------
   Re-skin claro é o default. Quando o SO pede escuro (ou o app marca
   data-theme="dark"/.theme-dark no <html>/<body>), a marca usa o
   gradiente mais claro (#4A8CFA→#34D6F0) e "MARIRI" em branco.
   ===================================================================== */
.theme-dark .station-card .title .brand-radio,
[data-theme="dark"] .station-card .title .brand-radio {
  background: linear-gradient(95deg, #4a8cfa 0%, #34d6f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.theme-dark .station-card .title .brand-mariri,
[data-theme="dark"] .station-card .title .brand-mariri {
  color: #f5f6fc;
}

@media (prefers-color-scheme: dark) {
  /* só aplica o auto-dark se o app NÃO forçar tema claro */
  :root:not([data-theme="light"]):not(.theme-light) .station-card .title .brand-radio {
    background: linear-gradient(95deg, #4a8cfa 0%, #34d6f0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Badge 'Ao vivo agora' removido — redundante com o toggle segmentado */
.station-card__badge{display:none !important;}

/* =====================================================================
   17. TOOLTIP "ON-DEMAND" — callout de descoberta (abre sozinho 1x)
   ---------------------------------------------------------------------
   Aparece ~1.2s após carregar apontando pro botão On-Demand do toggle,
   ensinando que dá pra escolher a música. Glass sutil na paleta aurora/
   teal, cantos arredondados, fade+slide na entrada e leve bounce na seta.
   Posicionado via JS (fixed) — funciona desktop e mobile. Some ao
   interagir e não volta (localStorage). Ver js/hint-ondemand.js.
   ===================================================================== */
.od-hint {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  max-width: min(300px, calc(100vw - 24px));
  pointer-events: none; /* só o inner/close recebem clique quando visível */
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
  filter: drop-shadow(0 14px 30px rgba(20, 32, 74, 0.32));
}
.od-hint.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.od-hint.is-leaving {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
}

.od-hint__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px 12px 14px;
  border-radius: 14px;
  color: #f3f8ff;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.34;
  background:
    linear-gradient(140deg, rgba(32, 32, 74, 0.96) 0%, rgba(44, 95, 208, 0.95) 55%, rgba(24, 181, 140, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.od-hint__text {
  display: block;
}
.od-hint__text strong {
  font-weight: 700;
  color: #b9ffe6; /* teal clareado p/ destaque sobre o gradiente */
}

/* botão fechar (×) */
.od-hint__close {
  flex: none;
  width: 22px;
  height: 22px;
  margin: -2px -2px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #f3f8ff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.od-hint__close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.08);
}
.od-hint__close:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
}

/* seta apontando pra cima (pro botão On-Demand) */
.od-hint__arrow {
  position: absolute;
  top: -7px;
  left: 24px; /* ajustado via JS pra alinhar ao centro da âncora */
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, rgba(32, 32, 74, 0.96), rgba(44, 95, 208, 0.95));
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-top-left-radius: 3px;
}
.od-hint.is-visible .od-hint__arrow {
  animation: od-hint-bounce 1.6s var(--ease) infinite;
}
@keyframes od-hint-bounce {
  0%, 100% {
    transform: translateX(-50%) rotate(45deg) translateY(0);
  }
  50% {
    transform: translateX(-50%) rotate(45deg) translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .od-hint {
    transition: opacity 0.2s linear;
    transform: none;
  }
  .od-hint.is-visible,
  .od-hint.is-leaving {
    transform: none;
  }
  .od-hint.is-visible .od-hint__arrow {
    animation: none;
  }
}

/* =====================================================================
   18. SOMBRAS DOS CARDS SEM CLIP + sem "linha" preta nas bordas
   ---------------------------------------------------------------------
   As colunas (.section / .section.player / .section.requests) usavam
   overflow:hidden só como clamp — mas o scroll REAL é nos filhos
   internos (#song-history à esquerda, #lista-pedidos à direita). Esse
   clip cortava a box-shadow do header e do player, e a borda do corte
   aparecia como um talho escuro embaixo/na direita. Liberando o overflow
   das colunas a sombra renderiza inteira; o z-index põe a sombra dos
   cards ACIMA da lista seguinte (senão o fundo branco da lista cobre).
   width:100% no container elimina o sliver do 100vw na lateral direita.
   Pedido Hildel 11/jun (deixar impecável).
   ===================================================================== */
.container {
  width: 100% !important;
  max-width: 100%;
  /* respiro p/ a sombra desvanecer ANTES da borda da viewport (senão
     o body overflow:hidden corta a sombra e vira um talho escuro) */
  padding: 22px 26px 18px 26px !important;
}
/* Só a COLUNA DO PLAYER (header + player) libera o clip — a coluna de
   pedidos continua clipando (senão os botões "Solicitar" vazam até a
   borda). O scroll da lista de histórico é no próprio #song-history. */
.section.player {
  overflow: visible !important;
}
/* cards do header e do player: sombra contida + por cima dos vizinhos */
.station-card,
.horizontal-player {
  position: relative;
  z-index: 2;
}
/* sombras refinadas (spread negativo = não vazam até a borda) */
.station-card {
  box-shadow: 0 14px 30px -16px rgba(18, 38, 86, 0.5) !important;
}
.horizontal-player {
  box-shadow: 0 12px 26px -16px rgba(44, 95, 208, 0.32) !important;
}
/* a lista de histórico (scroll próprio) fica atrás da sombra dos cards */
#song-history {
  position: relative;
  z-index: 0;
}

/* =====================================================================
   19. SCROLLBARS finas e na paleta — remove a "linha" cinza/escura
   nativa que aparecia na lateral direita das listas. Pedido Hildel 11/jun.
   ===================================================================== */
#lista-pedidos,
#song-history,
#pedidos-container,
.lang-switch__menu {
  scrollbar-width: thin;
  scrollbar-color: rgba(44, 95, 208, 0.3) transparent;
}
#lista-pedidos::-webkit-scrollbar,
#song-history::-webkit-scrollbar,
#pedidos-container::-webkit-scrollbar,
.lang-switch__menu::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#lista-pedidos::-webkit-scrollbar-track,
#song-history::-webkit-scrollbar-track,
#pedidos-container::-webkit-scrollbar-track,
.lang-switch__menu::-webkit-scrollbar-track {
  background: transparent;
}
#lista-pedidos::-webkit-scrollbar-thumb,
#song-history::-webkit-scrollbar-thumb,
#pedidos-container::-webkit-scrollbar-thumb,
.lang-switch__menu::-webkit-scrollbar-thumb {
  background: rgba(44, 95, 208, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#lista-pedidos::-webkit-scrollbar-thumb:hover,
#song-history::-webkit-scrollbar-thumb:hover,
#pedidos-container::-webkit-scrollbar-thumb:hover {
  background: rgba(44, 95, 208, 0.45);
  background-clip: padding-box;
}