/* ============================================================
   FREQUENCY — LIQUID GLASS (somente nos ícones)
   Telas, cartões e menus ficam como eram. Só os ícones (círculos dos
   modos da Home, botões de ação, botões de cabeçalho, setas, cadeados e a
   aba ativa do dock) ganham vidro: translúcido, borda fina, profundidade.
   Desligado no tema Nítido (sharp) e com "letras firmes" (data-firm).
   ============================================================ */

/* ---------- Círculos de ícone da Home: vidro nas cores do layout ---------- */
/* --ic = cor original de cada modo (verde, azul-petróleo, bronze, violeta, argila).
   Também nos cartões bloqueados: ali o ícone mantém a cor, só mais contida. */
html:not([data-theme="sharp"]):not([data-firm]) .hx-mode-icon {
  --ic: 60, 122, 91;
  position: relative;
  background:
    linear-gradient(180deg, rgba(var(--ic), 0.55), rgba(var(--ic), 0.9)) !important;
  color: #eef3ee !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 3px 5px rgba(0, 0, 0, 0.28),
    inset 0 -10px 16px rgba(0, 0, 0, 0.3),
    0 1px 1px rgba(0, 0, 0, 0.4),
    0 4px 6px -1px rgba(0, 0, 0, 0.4),
    0 12px 20px -6px rgba(var(--ic), 0.75),
    0 20px 30px -10px rgba(0, 0, 0, 0.55) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
}
html:not([data-theme="sharp"]):not([data-firm]) .hx-mode-icon svg {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
}
html:not([data-theme="sharp"]):not([data-firm]) .hx-mode-icon.is-green  { --ic: 60, 122, 91; }
html:not([data-theme="sharp"]):not([data-firm]) .hx-mode-icon.is-teal   { --ic: 45, 109, 103; }
html:not([data-theme="sharp"]):not([data-firm]) .hx-mode-icon.is-bronze { --ic: 141, 107, 70; }
html:not([data-theme="sharp"]):not([data-firm]) .hx-mode-icon.is-violet { --ic: 87, 77, 124; }
html:not([data-theme="sharp"]):not([data-firm]) .hx-mode-icon.is-clay   { --ic: 166, 90, 71; }
html:not([data-theme="sharp"]):not([data-firm]) .hx-mode.is-locked .hx-mode-icon {
  opacity: 0.8;
}

/* ---------- Botões de ícone: cabeçalho, ações, fechar, setas ---------- */
html:not([data-theme="sharp"]):not([data-firm]) :is(
  .header-icon-btn, .sheet-close-btn, .practice-view .action-btn, .lc-arrow,
  .connect-back-top-btn, .back-btn
) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.22),
    inset 0 -6px 10px rgba(0, 0, 0, 0.22),
    0 1px 1px rgba(0, 0, 0, 0.4),
    0 4px 6px -1px rgba(0, 0, 0, 0.4),
    0 10px 16px -6px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.18s ease;
}
html:not([data-theme="sharp"]):not([data-firm]) :is(
  .header-icon-btn, .sheet-close-btn, .practice-view .action-btn, .lc-arrow
):active {
  transform: scale(0.92);
}
/* estados ativos (tocando, ouvindo, marcada) em vidro verde */
html:not([data-theme="sharp"]):not([data-firm]) .practice-view .action-btn:is(.active, .playing, .listening),
html:not([data-theme="sharp"]):not([data-firm]) .practice-view .action-btn.known-btn[aria-pressed="true"] {
  background: rgba(143, 202, 160, 0.26);
  border-color: rgba(166, 218, 182, 0.6);
  box-shadow:
    inset 0 -6px 10px rgba(143, 202, 160, 0.2),
    0 6px 16px -4px rgba(79, 150, 112, 0.5);
}

/* ---------- Aba ativa do dock: gota de vidro ---------- */
html:not([data-theme="sharp"]):not([data-firm]) .nav-btn.active {
  background: rgba(143, 202, 160, 0.22);
  border: 1px solid rgba(166, 218, 182, 0.4);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.2),
    inset 0 -6px 10px rgba(0, 0, 0, 0.22),
    0 1px 1px rgba(0, 0, 0, 0.4),
    0 5px 8px -2px rgba(0, 0, 0, 0.45),
    0 8px 14px -6px rgba(79, 150, 112, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
}

/* ---------- Cadeados ---------- */
html:not([data-theme="sharp"]):not([data-firm]) :is(.lock-badge, .lock-badge-lg) {
  background: rgba(143, 202, 160, 0.2);
  border: 1px solid rgba(166, 218, 182, 0.4);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.22),
    inset 0 -5px 9px rgba(0, 0, 0, 0.25),
    0 1px 1px rgba(0, 0, 0, 0.4),
    0 5px 8px -2px rgba(0, 0, 0, 0.45),
    0 8px 14px -6px rgba(79, 150, 112, 0.55);
  -webkit-backdrop-filter: blur(6px) saturate(1.4);
  backdrop-filter: blur(6px) saturate(1.4);
}

/* Ao tocar, o ícone afunda: a sombra externa some e a interna cresce */
html:not([data-theme="sharp"]):not([data-firm]) :is(.header-icon-btn, .sheet-close-btn, .practice-view .action-btn, .lc-arrow):active {
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.45),
    0 1px 1px rgba(0, 0, 0, 0.3);
}
html:not([data-theme="sharp"]):not([data-firm]) .hx-mode:active .hx-mode-icon {
  transform: translateY(1px) scale(0.97);
}
html:not([data-theme="sharp"]):not([data-firm]) .hx-mode-icon {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) {
  html:not([data-theme="sharp"]):not([data-firm]) .hx-mode:hover .hx-mode-icon {
    transform: translateY(-2px);
  }
}