/* ============================================================
   Frequency 2.63 — visual 3D com relevo
   Camada por cima do styles.css (carregada depois). Só CSS: botões em
   alto-relevo que afundam ao toque, cartões com bisel e sombra em camadas,
   campos "esculpidos" para dentro, esferas nos ícones, inclinação leve
   dos cartões da Home. Funciona em todos os temas (claro, grafite, noite).
   Para desligar tudo: remover o <link> do relevo3d.css no index.html.
   ============================================================ */

:root {
  /* luz vem de cima e da esquerda */
  --d-hi: rgba(255, 255, 255, 0.16); /* realce de borda superior */
  --d-hi2: rgba(255, 255, 255, 0.06);
  --d-lo: rgba(0, 0, 0, 0.5); /* sombra projetada */
  --d-lo2: rgba(0, 0, 0, 0.28);
  --d-edge: rgba(0, 0, 0, 0.55); /* borda inferior do bisel */
  --d-sheen-a: rgba(255, 255, 255, 0.075);
  --d-sheen-b: rgba(0, 0, 0, 0.16);
  --d-ext: 4px; /* altura da extrusão dos botões */
}
/* Telas de estudo no tema claro */
html[data-theme="sharp"]:has(.home-view.hidden) {
  --d-hi: rgba(255, 255, 255, 0.95);
  --d-hi2: rgba(255, 255, 255, 0.55);
  --d-lo: rgba(70, 52, 20, 0.28);
  --d-lo2: rgba(70, 52, 20, 0.16);
  --d-edge: rgba(70, 52, 20, 0.3);
  --d-sheen-a: rgba(255, 255, 255, 0.6);
  --d-sheen-b: rgba(120, 95, 50, 0.07);
}

/* ---------- receitas reutilizáveis ---------- */

/* Superfície elevada (cartão / painel) */
html .hx-card,
html .practice-view .entry,
html .sons-card,
html .sons-panel,
html .sons-box,
html .sons-stat,
html .grammar-item,
html .rl-sec,
html .rl-item,
html .connect-item,
html .mp-option,
html .session-done-rows,
html .account-menu {
  background-image: linear-gradient(155deg, var(--d-sheen-a), transparent 38%, var(--d-sheen-b));
  box-shadow:
    inset 0 1px 0 var(--d-hi),
    inset 0 -2px 0 var(--d-edge),
    0 1px 0 var(--d-lo2),
    0 8px 14px -6px var(--d-lo),
    0 22px 34px -16px var(--d-lo) !important;
}

/* Painéis flutuantes (janelas, folhas, diálogos) */
html .mode-picker-panel,
html .settings-sheet,
html .confirm-dialog-card,
html .eye-break-card,
html .video-modal-sheet,
html .lock-sheet-panel {
  background-image: linear-gradient(170deg, var(--d-sheen-a), transparent 30%);
  box-shadow:
    inset 0 1.5px 0 var(--d-hi),
    inset 0 -1px 0 var(--d-edge),
    0 -10px 40px -10px var(--d-lo),
    0 30px 60px -12px var(--d-lo) !important;
}

/* Botão em alto-relevo (afunda ao apertar) */
html .hx-choose,
html .hx-review,
html .practice-view .nav-btn,
html .practice-view .focus-toggle,
html .newday-btn,
html .font-btn,
html .theme-opt,
html .practice-reveal-btn,
html .voice-retry-btn,
html .voice-stop-btn,
html .rl-btn,
html .sons-ghost,
html .sons-idx,
html .boca-play,
html .grammar-level-tab,
html .connect-mode-btn,
html .fr-act {
  background-image: linear-gradient(180deg, var(--d-sheen-a), transparent 55%, var(--d-sheen-b));
  box-shadow:
    inset 0 1px 0 var(--d-hi),
    inset 0 -1px 0 var(--d-edge),
    0 var(--d-ext) 0 var(--d-edge),
    0 calc(var(--d-ext) + 4px) 10px -2px var(--d-lo) !important;
  transform: translateY(0);
  transition:
    transform 0.09s ease,
    box-shadow 0.09s ease,
    filter 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    background-color 0.15s ease;
}
html .practice-view .filter,
html .sheet-btn,
html .eye-break-btn,
html .practice-check-btn,
html .voice-check-btn,
html .lock-sheet-action {
  box-shadow:
    inset 0 1px 0 var(--d-hi),
    inset 0 -1px 0 var(--d-edge),
    0 var(--d-ext) 0 var(--d-edge),
    0 calc(var(--d-ext) + 4px) 10px -2px var(--d-lo) !important;
  transform: translateY(0);
  transition:
    transform 0.09s ease,
    box-shadow 0.09s ease,
    filter 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    background-color 0.15s ease;
}
html .hx-choose:active,
html .hx-review:active,
html .practice-view .filter:active,
html .practice-view .nav-btn:active,
html .practice-view .focus-toggle:active,
html .sheet-btn:active,
html .eye-break-btn:active,
html .newday-btn:active,
html .font-btn:active,
html .theme-opt:active,
html .practice-check-btn:active,
html .practice-reveal-btn:active,
html .voice-check-btn:active,
html .voice-retry-btn:active,
html .voice-stop-btn:active,
html .rl-btn:active,
html .sons-ghost:active,
html .sons-idx:active,
html .boca-play:active,
html .grammar-level-tab:active,
html .connect-mode-btn:active,
html .fr-act:active,
html .lock-sheet-action:active {
  transform: translateY(calc(var(--d-ext) - 1px));
  box-shadow:
    inset 0 2px 5px var(--d-lo),
    inset 0 -1px 0 var(--d-hi2),
    0 1px 0 var(--d-edge) !important;
}

/* Botão principal (verde): extrusão colorida, mais alto */
html .hx-go,
html .sons-go,
html .rl-btn.is-solid,
html .sheet-btn-accent,
html .login-google {
  box-shadow:
    inset 0 22px 20px -12px rgba(255, 255, 255, 0.28),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.14),
    0 6px 0 rgba(23, 66, 41, 0.95),
    0 8px 0 rgba(0, 0, 0, 0.18),
    0 16px 26px -6px rgba(0, 0, 0, 0.55) !important;
  transform: translateY(0);
  transition: transform 0.09s ease, box-shadow 0.09s ease, filter 0.15s ease;
}
html .hx-go:active,
html .sons-go:active,
html .rl-btn.is-solid:active,
html .sheet-btn-accent:active,
html .login-google:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(23, 66, 41, 0.95) !important;
}
@media (hover: hover) {
  html .hx-go:hover,
  html .sons-go:hover {
    filter: brightness(1.07);
  }
}

/* Botões redondos: esferas com brilho especular */
html .action-btn,
html .back-btn,
html .header-icon-btn,
html .lc-arrow,
html .sons-ib,
html .rl-ib,
html .sheet-close-btn,
html .lock-sheet-close,
html .video-modal-close,
html .focus-exit,
html .boca-x,
html .hx-account {
  background-image: radial-gradient(circle at 32% 24%, var(--d-hi) 0%, var(--d-hi2) 28%, transparent 56%),
    linear-gradient(180deg, transparent 40%, var(--d-sheen-b));
  box-shadow:
    inset 0 1px 1px var(--d-hi),
    inset 0 -3px 5px var(--d-lo2),
    0 3px 0 var(--d-edge),
    0 7px 12px -3px var(--d-lo) !important;
  transition: transform 0.09s ease, box-shadow 0.09s ease, border-color 0.15s ease, color 0.15s ease,
    background-color 0.15s ease;
}
html .action-btn:active,
html .back-btn:active,
html .header-icon-btn:active,
html .lc-arrow:active,
html .sons-ib:active,
html .rl-ib:active,
html .sheet-close-btn:active,
html .focus-exit:active,
html .hx-account:active {
  transform: translateY(2px) scale(0.97);
  box-shadow:
    inset 0 3px 6px var(--d-lo),
    0 1px 0 var(--d-edge) !important;
}

/* Campos esculpidos para dentro */
html .practice-view #search,
html .grammar-search-wrap input,
html .start-mode-select,
html .practice-input-inline,
html textarea,
html .voice-transcript,
html .hx-bar,
html .lock-sheet-track,
html .mini-progress-track,
html .switch {
  box-shadow:
    inset 0 3px 6px var(--d-lo),
    inset 0 -1px 0 var(--d-hi2),
    0 1px 0 var(--d-hi2) !important;
}
html .hx-bar-fill,
html .lock-sheet-fill {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 0 10px -2px var(--accent) !important;
}

/* Filtros marcados / aba ativa: botão "afundado" */
html .practice-view .filter[aria-pressed="true"],
html .practice-view .nav-btn.active,
html .grammar-level-tab[aria-selected="true"],
html .theme-opt[aria-pressed="true"],
html .theme-opt.active {
  transform: translateY(calc(var(--d-ext) - 1px));
  box-shadow:
    inset 0 3px 7px var(--d-lo),
    inset 0 -1px 0 var(--d-hi2),
    0 1px 0 var(--d-edge) !important;
}

/* ---------- HOME ---------- */
/* Obs.: não usar perspective/transform no .home-view — isso vira o "bloco de contenção" dos
   elementos position:fixed (o menu de escolha ficava lá embaixo). A perspectiva está no transform dos cartões. */
html .hx-title {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18),
    0 3px 0 rgba(0, 0, 0, 0.35),
    0 10px 22px rgba(0, 0, 0, 0.55);
}
html .hx-title em {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3),
    0 3px 0 rgba(20, 60, 38, 0.9),
    0 12px 22px rgba(0, 0, 0, 0.55);
}
html .hx-mode {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
  will-change: transform;
}
html .hx-mode > * {
  transform: translateZ(14px); /* conteúdo "flutua" acima da superfície */
}
html .hx-mode.is-tilting {
  transition: transform 0.04s linear;
}
@media (hover: hover) {
  html .hx-mode:not(.is-locked):hover {
    box-shadow:
      inset 0 1px 0 var(--d-hi),
      inset 0 -2px 0 var(--d-edge),
      0 14px 22px -8px var(--d-lo),
      0 34px 48px -18px var(--d-lo) !important;
  }
}
html .hx-mode:not(.is-locked):active {
  transform: perspective(900px) translateY(3px) scale(0.985);
}
/* Cartões bloqueados: placa afundada na superfície */
html .hx-mode.is-locked {
  background-image: linear-gradient(180deg, var(--d-sheen-b), transparent 45%);
  box-shadow:
    inset 0 4px 10px var(--d-lo),
    inset 0 -1px 0 var(--d-hi2),
    0 1px 0 var(--d-hi2) !important;
  transform: none;
}
html .hx-mode.is-locked > * {
  transform: none;
}
/* Ícones coloridos viram esferas em relevo */
html .hx-mode-icon,
html .combo-icon,
html .acc-avatar,
html .sons-sym,
html .lock-badge {
  background-image: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.22));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -4px 6px rgba(0, 0, 0, 0.3),
    0 4px 0 rgba(0, 0, 0, 0.35),
    0 10px 14px -4px rgba(0, 0, 0, 0.55) !important;
}
html .hx-mode-icon svg,
html .combo-icon svg {
  filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, 0.45));
}

/* ---------- ESTUDO (Palavras, Frases...) ---------- */
html .practice-view header,
html .grammar-view header {
  box-shadow:
    inset 0 -1px 0 var(--d-hi2),
    0 12px 22px -14px var(--d-lo),
    0 2px 0 var(--d-lo2) !important;
}
/* Cada palavra vira um cartão em relevo. content-visibility:auto cortaria a sombra. */
html .practice-view .entry {
  content-visibility: visible;
  margin: 14px 6px 18px;
  padding: 22px 16px 22px 16px;
  border: 0;
  border-radius: 22px;
  background-color: var(--bg-panel);
}
html .practice-view .entry:last-child {
  margin-bottom: 18px;
}
html .practice-view .entry.is-known {
  opacity: 0.8;
}
html .practice-view .entry::before {
  left: 6px;
  top: 22px;
}
html .word,
html .head .word {
  text-shadow: 0 1px 0 var(--d-hi), 0 2px 3px var(--d-lo2);
}
/* Barra de baixo: ilha flutuante */
html .bottom-nav {
  border-radius: 24px;
  background-image: linear-gradient(180deg, var(--d-sheen-a), transparent 60%);
  box-shadow:
    inset 0 1.5px 0 var(--d-hi),
    inset 0 -2px 0 var(--d-edge),
    0 10px 18px -6px var(--d-lo),
    0 26px 40px -14px var(--d-lo) !important;
}
html .toast,
html .update-bar {
  box-shadow:
    inset 0 1px 0 var(--d-hi),
    0 10px 20px -6px var(--d-lo) !important;
}

/* Sons: cartões e símbolos grandes */
html .sons-face,
html .boca-stage {
  box-shadow:
    inset 0 2px 0 var(--d-hi2),
    inset 0 -6px 14px var(--d-lo2),
    0 18px 30px -14px var(--d-lo) !important;
}


/* ============================================================
   MODO NÍTIDO / LETRAS FIRMES (html[data-firm])
   O app tem um modo sem brilho, pensado para quem tem astigmatismo. Aqui o
   relevo continua, mas só com bordas duras: degraus sólidos, nenhum desfoque,
   nenhum gradiente e nenhuma sombra no texto. Assim o 3D não borra as letras.
   ============================================================ */
html[data-firm] body .hx-card,
html[data-firm] body .practice-view .entry,
html[data-firm] body .sons-card,
html[data-firm] body .sons-panel,
html[data-firm] body .sons-box,
html[data-firm] body .sons-stat,
html[data-firm] body .grammar-item,
html[data-firm] body .rl-sec,
html[data-firm] body .rl-item,
html[data-firm] body .connect-item,
html[data-firm] body .mp-option,
html[data-firm] body .session-done-rows,
html[data-firm] body .account-menu,
html[data-firm] body .bottom-nav,
html[data-firm] body .toast,
html[data-firm] body .update-bar,
html[data-firm] body .sons-face,
html[data-firm] body .boca-stage {
  background-image: none;
  box-shadow: inset 0 2px 0 var(--d-hi), 0 2px 0 var(--d-edge), 0 14px 24px -12px var(--d-lo) !important;
}
html[data-firm] body .mode-picker-panel,
html[data-firm] body .settings-sheet,
html[data-firm] body .confirm-dialog-card,
html[data-firm] body .eye-break-card,
html[data-firm] body .video-modal-sheet,
html[data-firm] body .lock-sheet-panel {
  background-image: none;
  box-shadow: inset 0 2px 0 var(--d-hi), 0 -10px 28px -12px var(--d-lo), 0 2px 0 var(--d-edge) !important;
}
html[data-firm] body .hx-choose,
html[data-firm] body .hx-review,
html[data-firm] body .practice-view .nav-btn,
html[data-firm] body .practice-view .focus-toggle,
html[data-firm] body .newday-btn,
html[data-firm] body .font-btn,
html[data-firm] body .theme-opt,
html[data-firm] body .practice-reveal-btn,
html[data-firm] body .voice-retry-btn,
html[data-firm] body .voice-stop-btn,
html[data-firm] body .rl-btn,
html[data-firm] body .sons-ghost,
html[data-firm] body .sons-idx,
html[data-firm] body .boca-play,
html[data-firm] body .grammar-level-tab,
html[data-firm] body .connect-mode-btn,
html[data-firm] body .practice-view .connect-mode-row .connect-mode-btn,
html[data-firm] body .practice-view .connect-chips .connect-chip,
html[data-firm] body .fr-act {
  background-image: none;
  transform: translateY(0);
  box-shadow: inset 0 2px 0 var(--d-hi), 0 4px 0 var(--d-edge) !important;
}
html[data-firm] body .practice-view .filter,
html[data-firm] body .practice-view .filters .filter,
html[data-firm] body .sheet-btn,
html[data-firm] body .settings-sheet .sheet-btn,
html[data-firm] body .eye-break-btn,
html[data-firm] body .practice-check-btn,
html[data-firm] body .voice-check-btn,
html[data-firm] body .lock-sheet-action {
  transform: translateY(0);
  box-shadow: inset 0 2px 0 var(--d-hi), 0 4px 0 var(--d-edge) !important;
}
html[data-firm] body .login-google {
  background-image: none;
  transform: translateY(0);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 6px 0 rgba(23, 66, 41, 0.95) !important;
}
html[data-firm] body .hx-go,
html[data-firm] body .sons-go,
html[data-firm] body .rl-btn.is-solid,
html[data-firm] body .sheet-btn-accent {
  transform: translateY(0);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 6px 0 rgba(23, 66, 41, 0.95) !important;
}
html[data-firm] body .action-btn,
html[data-firm] body .practice-view .action-btn,
html[data-firm] body .back-btn,
html[data-firm] body .header-icon-btn,
html[data-firm] body .lc-arrow,
html[data-firm] body .sons-ib,
html[data-firm] body .rl-ib,
html[data-firm] body .sheet-close-btn,
html[data-firm] body .lock-sheet-close,
html[data-firm] body .video-modal-close,
html[data-firm] body .focus-exit,
html[data-firm] body .boca-x,
html[data-firm] body .hx-account,
html[data-firm] body .hx-mode-icon,
html[data-firm] body .combo-icon,
html[data-firm] body .acc-avatar,
html[data-firm] body .sons-sym,
html[data-firm] body .lock-badge {
  background-image: none;
  box-shadow: inset 0 2px 0 var(--d-hi), 0 2px 0 var(--d-edge), 0 9px 14px -8px var(--d-lo) !important;
}
html[data-firm] body .practice-view #search,
html[data-firm] body .grammar-search-wrap input,
html[data-firm] body .start-mode-select,
html[data-firm] body .practice-input-inline,
html[data-firm] body textarea,
html[data-firm] body .voice-transcript,
html[data-firm] body .hx-bar,
html[data-firm] body .lock-sheet-track,
html[data-firm] body .mini-progress-track {
  box-shadow: inset 0 2px 0 var(--d-lo2), inset 0 -1px 0 var(--d-hi2) !important;
}
html[data-firm] body .hx-choose:active,
html[data-firm] body .hx-review:active,
html[data-firm] body .practice-view .filter:active,
html[data-firm] body .practice-view .filters .filter:active,
html[data-firm] body .practice-view .nav-btn:active,
html[data-firm] body .practice-view .focus-toggle:active,
html[data-firm] body .sheet-btn:active,
html[data-firm] body .settings-sheet .sheet-btn:active,
html[data-firm] body .eye-break-btn:active,
html[data-firm] body .newday-btn:active,
html[data-firm] body .font-btn:active,
html[data-firm] body .theme-opt:active,
html[data-firm] body .practice-check-btn:active,
html[data-firm] body .practice-reveal-btn:active,
html[data-firm] body .voice-check-btn:active,
html[data-firm] body .voice-retry-btn:active,
html[data-firm] body .voice-stop-btn:active,
html[data-firm] body .rl-btn:active,
html[data-firm] body .sons-ghost:active,
html[data-firm] body .sons-idx:active,
html[data-firm] body .boca-play:active,
html[data-firm] body .grammar-level-tab:active,
html[data-firm] body .connect-mode-btn:active,
html[data-firm] body .practice-view .connect-mode-row .connect-mode-btn:active,
html[data-firm] body .fr-act:active,
html[data-firm] body .lock-sheet-action:active,
html[data-firm] body .practice-view .filter[aria-pressed="true"],
html[data-firm] body .practice-view .nav-btn.active,
html[data-firm] body .grammar-level-tab[aria-selected="true"],
html[data-firm] body .theme-opt[aria-pressed="true"],
html[data-firm] body .theme-opt.active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 var(--d-lo2), 0 1px 0 var(--d-edge) !important;
}
html[data-firm] body .hx-go:active,
html[data-firm] body .sons-go:active,
html[data-firm] body .rl-btn.is-solid:active,
html[data-firm] body .sheet-btn-accent:active,
html[data-firm] body .login-google:active,
html[data-firm] body .action-btn:active,
html[data-firm] body .practice-view .action-btn:active,
html[data-firm] body .back-btn:active,
html[data-firm] body .header-icon-btn:active,
html[data-firm] body .lc-arrow:active,
html[data-firm] body .sons-ib:active,
html[data-firm] body .rl-ib:active,
html[data-firm] body .sheet-close-btn:active,
html[data-firm] body .focus-exit:active,
html[data-firm] body .hx-account:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 var(--d-lo2), 0 1px 0 var(--d-edge) !important;
}
html[data-firm] body .word,
html[data-firm] body .head .word,
html[data-firm] body .hx-title,
html[data-firm] body .hx-title em {
  text-shadow: none;
}
html[data-firm] body .hx-mode > * {
  transform: none;
}

/* ---------- acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  html .hx-mode {
    transform: none !important;
  }
  html .hx-go:active,
  html .action-btn:active {
    transform: none;
  }
}
@media (forced-colors: active) {
  html * {
    box-shadow: none !important;
    background-image: none !important;
  }
}

/* ============================================================
   v2.63.2 — relevo em TODAS as telas (Frases, Inglês real, Gramática,
   Sons, folhas, diálogos, tour, chips e barras)
   ============================================================ */

/* Cartões / superfícies */
html .fr-card,
html .fr-flow,
html .fr-note,
html .fr-tense,
html .fr-review,
html .rl-clip,
html .rl-player,
html .rl-form,
html .rl-hero,
html .rl-phrase,
html .connect-review-bar,
html .sheet-progress,
html .tour-ball,
html .boca-chips,
html .instructions-sheet-el .sheet-row {
  background-image: linear-gradient(155deg, var(--d-sheen-a), transparent 38%, var(--d-sheen-b));
  box-shadow:
    inset 0 1px 0 var(--d-hi),
    inset 0 -2px 0 var(--d-edge),
    0 1px 0 var(--d-lo2),
    0 8px 14px -6px var(--d-lo),
    0 22px 34px -16px var(--d-lo) !important;
}
/* Folhas e janelas */
html .instructions-sheet-el,
html #instructions-sheet,
html #sons-sheet,
html #boca-sheet,
html .sons-sheet-panel,
html .video-modal-info {
  box-shadow:
    inset 0 1.5px 0 var(--d-hi),
    0 -10px 40px -10px var(--d-lo),
    0 30px 60px -12px var(--d-lo) !important;
}
/* Botões, chips e pílulas em alto-relevo */
html .fr-chip,
html .fr-seg button,
html .fr-size-btn,
html .fr-review-btn,
html .fr-back,
html .rl-chip,
html .rl-pill,
html .rl-opt,
html .rl-watch,
html .rl-say,
html .rl-clip-play,
html .rl-clip-del,
html .pl-chip,
html .boca-chip,
html .sons-pill,
html .tour-skip,
html .tour-next,
html .connect-back-top-btn,
html .confirm-dialog-ok,
html .confirm-dialog-actions button,
html .video-modal-yt-btn,
html .video-modal-fs-btn,
html .sheet-btn-pair .sheet-btn {
  background-image: linear-gradient(180deg, var(--d-sheen-a), transparent 55%, var(--d-sheen-b));
  box-shadow:
    inset 0 1px 0 var(--d-hi),
    inset 0 -1px 0 var(--d-edge),
    0 3px 0 var(--d-edge),
    0 7px 10px -3px var(--d-lo) !important;
  transform: translateY(0);
  transition: transform 0.09s ease, box-shadow 0.09s ease, filter 0.15s ease;
}
html .fr-chip:active,
html .fr-seg button:active,
html .fr-size-btn:active,
html .fr-review-btn:active,
html .fr-back:active,
html .rl-chip:active,
html .rl-pill:active,
html .rl-opt:active,
html .rl-watch:active,
html .rl-say:active,
html .rl-clip-play:active,
html .pl-chip:active,
html .boca-chip:active,
html .sons-pill:active,
html .tour-skip:active,
html .tour-next:active,
html .connect-back-top-btn:active,
html .confirm-dialog-ok:active,
html .confirm-dialog-actions button:active,
html .video-modal-yt-btn:active,
html .video-modal-fs-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 3px 6px var(--d-lo), 0 1px 0 var(--d-edge) !important;
}
/* Campos e trilhas esculpidos */
html .rl-search,
html .rl-search input,
html #rl-url,
html #rl-label,
html #fr-search-input,
html input[type="text"],
html input[type="url"],
html input[type="search"],
html .rl-prog-bar,
html .progress-track,
html .pl-progress,
html .sheet-progress-track,
html .fr-bar {
  box-shadow:
    inset 0 3px 6px var(--d-lo),
    inset 0 -1px 0 var(--d-hi2),
    0 1px 0 var(--d-hi2) !important;
}
html .progress-fill,
html .mini-progress-fill,
html .rl-prog-bar > * {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 0 8px -2px var(--accent) !important;
}
/* Títulos com leve gravação */
html .fr-head h1, html .fr-head h2, html .rl-title, html .rl-lead, html .sons-title,
html .grammar-main h2, html .sheet-title, html .confirm-dialog-message {
  text-shadow: 0 1px 0 var(--d-hi), 0 2px 3px var(--d-lo2);
}

/* ---- modo Nítido / Letras firmes: sombras duras, sem borrão ---- */
html[data-firm] body .fr-card,
html[data-firm] body .fr-flow,
html[data-firm] body .fr-note,
html[data-firm] body .fr-tense,
html[data-firm] body .fr-review,
html[data-firm] body .rl-clip,
html[data-firm] body .rl-player,
html[data-firm] body .rl-form,
html[data-firm] body .rl-hero,
html[data-firm] body .rl-phrase,
html[data-firm] body .connect-review-bar,
html[data-firm] body .sheet-progress,
html[data-firm] body .tour-ball,
html[data-firm] body .instructions-sheet-el .sheet-row {
  background-image: none;
  box-shadow: inset 0 2px 0 var(--d-hi), 0 2px 0 var(--d-edge), 0 14px 24px -12px var(--d-lo) !important;
}
html[data-firm] body .instructions-sheet-el,
html[data-firm] body #instructions-sheet,
html[data-firm] body #sons-sheet,
html[data-firm] body #boca-sheet,
html[data-firm] body .video-modal-info {
  box-shadow: inset 0 2px 0 var(--d-hi), 0 -10px 28px -12px var(--d-lo), 0 2px 0 var(--d-edge) !important;
}
html[data-firm] body .fr-chip,
html[data-firm] body .fr-seg button,
html[data-firm] body .fr-size-btn,
html[data-firm] body .fr-review-btn,
html[data-firm] body .fr-back,
html[data-firm] body .rl-chip,
html[data-firm] body .rl-pill,
html[data-firm] body .rl-opt,
html[data-firm] body .rl-watch,
html[data-firm] body .rl-say,
html[data-firm] body .rl-clip-play,
html[data-firm] body .rl-clip-del,
html[data-firm] body .pl-chip,
html[data-firm] body .boca-chip,
html[data-firm] body .sons-pill,
html[data-firm] body .tour-skip,
html[data-firm] body .tour-next,
html[data-firm] body .connect-back-top-btn,
html[data-firm] body .confirm-dialog-ok,
html[data-firm] body .confirm-dialog-actions button,
html[data-firm] body .video-modal-yt-btn,
html[data-firm] body .video-modal-fs-btn,
html[data-firm] body .sheet-btn-pair .sheet-btn {
  background-image: none;
  box-shadow: inset 0 2px 0 var(--d-hi), 0 2px 0 var(--d-edge), 0 9px 14px -8px var(--d-lo) !important;
}
html[data-firm] body .rl-search,
html[data-firm] body .rl-search input,
html[data-firm] body #rl-url,
html[data-firm] body #rl-label,
html[data-firm] body #fr-search-input,
html[data-firm] body input[type="text"],
html[data-firm] body input[type="url"],
html[data-firm] body input[type="search"],
html[data-firm] body .rl-prog-bar,
html[data-firm] body .progress-track,
html[data-firm] body .pl-progress,
html[data-firm] body .sheet-progress-track,
html[data-firm] body .fr-bar {
  box-shadow: inset 0 2px 0 var(--d-lo2), inset 0 -1px 0 var(--d-hi2) !important;
}
html[data-firm] body .progress-fill,
html[data-firm] body .mini-progress-fill,
html[data-firm] body .rl-prog-bar > * {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35) !important;
}
html[data-firm] body .fr-chip:active,
html[data-firm] body .fr-seg button:active,
html[data-firm] body .rl-chip:active,
html[data-firm] body .rl-opt:active,
html[data-firm] body .pl-chip:active,
html[data-firm] body .sons-pill:active,
html[data-firm] body .tour-next:active,
html[data-firm] body .confirm-dialog-ok:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 0 var(--d-lo2), 0 1px 0 var(--d-edge) !important;
}

/* ---- Ajustes v2.63.2: respiro na barra inferior e campo de escrita maior ---- */
html body .bottom-nav {
  gap: 8px;
  padding: 7px 8px calc(7px + var(--safe-bottom, 0px));
}
html body .bottom-nav .nav-btn {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 10px 4px 9px;
  min-height: 54px;
}
html body .practice-input-inline,
html body .practice-view .practice-input-inline,
html body .entry > .practice-box .practice-input-inline,
html:root .entry > .practice-box .practice-input-inline,
html[data-firm] body .practice-input-inline {
  font-size: 1.2rem !important;
  line-height: 1.45 !important;
  padding: 12px 14px !important;
  min-height: 3.6em;
}

/* ============================================================
   v2.63.5 — HOME premium
   Luz única vinda do alto-esquerda. Cartões de vidro-escuro com aro de luz em
   degradê (1px), brilho interno suave, sombras em camadas e um halo verde
   discreto embaixo. Itens bloqueados ficam "cavados". Botão principal é uma
   gema verde com reflexo. Nada de bordas grossas.
   ============================================================ */
html .home-view .hx-title {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px rgba(0, 0, 0, 0.5);
}
html .home-view .hx-title em {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 22px rgba(20, 90, 55, 0.55);
}

/* Cartões elevados */
html .home-view .hx-card,
html .home-view .hx-mode:not(.is-locked) {
  border: 1px solid transparent !important;
  background:
    radial-gradient(120% 90% at var(--mx, 22%) var(--my, 0%), rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%) padding-box,
    linear-gradient(165deg, #223530 0%, #172420 58%, #101a16 100%) padding-box,
    linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0.03) 62%, rgba(0, 0, 0, 0.55)) border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -14px 22px -16px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.65),
    0 10px 18px -8px rgba(0, 0, 0, 0.75),
    0 30px 44px -22px rgba(0, 0, 0, 0.9),
    0 42px 60px -42px rgba(143, 202, 160, 0.26) !important;
}
html .home-view .hx-mode[data-mode="sons"]:not(.is-locked) {
  background:
    radial-gradient(120% 90% at var(--mx, 22%) var(--my, 0%), rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%) padding-box,
    linear-gradient(165deg, #2a3a30 0%, #1b2a23 58%, #131e19 100%) padding-box,
    linear-gradient(145deg, rgba(190, 240, 205, 0.55), rgba(143, 202, 160, 0.12) 34%, rgba(255, 255, 255, 0.03) 62%, rgba(0, 0, 0, 0.55)) border-box !important;
}
@media (hover: hover) {
  html .home-view .hx-mode:not(.is-locked):hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -14px 22px -16px rgba(0, 0, 0, 0.6),
      0 1px 2px rgba(0, 0, 0, 0.65),
      0 16px 26px -8px rgba(0, 0, 0, 0.8),
      0 40px 56px -22px rgba(0, 0, 0, 0.95),
      0 46px 64px -40px rgba(143, 202, 160, 0.4) !important;
  }
}
html .home-view .hx-mode:not(.is-locked):active {
  transform: perspective(900px) translateY(2px) scale(0.985);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.5),
    0 4px 8px -4px rgba(0, 0, 0, 0.8) !important;
}

/* Itens bloqueados: nicho cavado */
html .home-view .hx-mode.is-locked {
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1) 70%), #121c17 !important;
  box-shadow:
    inset 0 8px 16px -6px rgba(0, 0, 0, 0.95),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
html .home-view .hx-mode.is-locked .hx-mode-title,
html .home-view .hx-mode.is-locked .hx-mode-desc {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
}

/* Botão principal: gema verde com reflexo */
html .home-view .hx-go {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.14) 49%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #a9ddb8, #5fb07a) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -3px 6px rgba(20, 80, 45, 0.35),
    0 3px 0 #3d8858,
    0 12px 20px -6px rgba(15, 60, 35, 0.8),
    0 22px 38px -12px rgba(110, 200, 140, 0.5) !important;
}
html .home-view .hx-go:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 4px rgba(20, 80, 45, 0.35),
    0 0 0 #3d8858,
    0 6px 12px -6px rgba(15, 60, 35, 0.8) !important;
}

/* Ícones: esferas de vidro com reflexo */
html .home-view .hx-mode-icon {
  background-image:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 50% 125%, rgba(143, 202, 160, 0.45), rgba(143, 202, 160, 0) 62%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 -6px 9px rgba(0, 0, 0, 0.38),
    0 8px 12px -4px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(0, 0, 0, 0.35) !important;
}
html .home-view .hx-mode-icon:not(.is-clay) {
  background-color: #2c4639 !important;
}
html .home-view .hx-mode.is-locked .hx-mode-icon {
  background-image: none !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
html .home-view .hx-ring {
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.55));
}

/* Modo Nítido / Letras firmes: sem brilho nem borrão, contraste alto */
html[data-firm] body .home-view .hx-card,
html[data-firm] body .home-view .hx-mode:not(.is-locked) {
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  background: #1f332b !important;
  box-shadow: 0 5px 0 #040706 !important;
}
html[data-firm] body .home-view .hx-mode.is-locked {
  border: 2px dashed rgba(255, 255, 255, 0.25) !important;
  background: #070b09 !important;
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.9) !important;
}
html[data-firm] body .home-view .hx-go {
  background: #8fcaa0 !important;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), 0 6px 0 #1f5a37 !important;
}
html[data-firm] body .home-view .hx-mode-icon {
  background-image: none !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 4px 0 rgba(0, 0, 0, 0.7) !important;
}
html[data-firm] body .home-view .hx-title,
html[data-firm] body .home-view .hx-title em {
  text-shadow: none;
}

/* ============================================================
   v2.63.6 — Home mais suave: aro de luz mais sutil, sombras difusas,
   cantos mais redondos, transições longas e sem corte duro no reflexo.
   ============================================================ */
html .home-view .hx-card,
html .home-view .hx-mode {
  border-radius: 26px;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.45s ease;
}
html .home-view .hx-card,
html .home-view .hx-mode:not(.is-locked) {
  background:
    radial-gradient(130% 100% at var(--mx, 24%) var(--my, 0%), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 60%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 45%) padding-box,
    linear-gradient(165deg, #1f302b 0%, #172421 60%, #131e1a 100%) padding-box,
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 36%, rgba(255, 255, 255, 0.02) 64%, rgba(0, 0, 0, 0.3)) border-box !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.06),
    inset 0 -18px 28px -22px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.25),
    0 14px 28px -12px rgba(0, 0, 0, 0.5),
    0 36px 56px -28px rgba(0, 0, 0, 0.6),
    0 46px 70px -50px rgba(143, 202, 160, 0.18) !important;
}
html .home-view .hx-mode[data-mode="sons"]:not(.is-locked) {
  background:
    radial-gradient(130% 100% at var(--mx, 24%) var(--my, 0%), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 60%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 45%) padding-box,
    linear-gradient(165deg, #26382f 0%, #1a2a24 60%, #15221d 100%) padding-box,
    linear-gradient(145deg, rgba(190, 240, 205, 0.32), rgba(143, 202, 160, 0.08) 36%, rgba(255, 255, 255, 0.02) 64%, rgba(0, 0, 0, 0.3)) border-box !important;
}
@media (hover: hover) {
  html .home-view .hx-mode:not(.is-locked):hover {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.09),
      inset 0 -18px 28px -22px rgba(0, 0, 0, 0.45),
      0 2px 6px rgba(0, 0, 0, 0.25),
      0 22px 38px -12px rgba(0, 0, 0, 0.55),
      0 46px 66px -28px rgba(0, 0, 0, 0.65),
      0 54px 80px -50px rgba(143, 202, 160, 0.3) !important;
  }
}
html .home-view .hx-mode:not(.is-locked):active {
  transform: perspective(900px) translateY(1px) scale(0.99);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.35),
    0 6px 12px -6px rgba(0, 0, 0, 0.5) !important;
  transition-duration: 0.12s;
}
html .home-view .hx-mode.is-locked {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.06) 75%), #141f1a !important;
  border-color: rgba(255, 255, 255, 0.045) !important;
  box-shadow:
    inset 0 10px 20px -10px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(0, 0, 0, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
html .home-view .hx-go {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.3s ease;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #a3d9b3, #68b682) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -6px 12px -4px rgba(20, 80, 45, 0.3),
    0 2px 4px rgba(15, 60, 35, 0.35),
    0 14px 26px -10px rgba(15, 60, 35, 0.6),
    0 24px 44px -16px rgba(110, 200, 140, 0.4) !important;
}
html .home-view .hx-go:active {
  transform: translateY(2px) scale(0.995);
  transition-duration: 0.1s;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -3px 8px -3px rgba(20, 80, 45, 0.3),
    0 6px 12px -6px rgba(15, 60, 35, 0.6) !important;
}
html .home-view .hx-mode-icon {
  background-image:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 48%),
    radial-gradient(circle at 50% 125%, rgba(143, 202, 160, 0.3), rgba(143, 202, 160, 0) 65%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    inset 0 -7px 10px -2px rgba(0, 0, 0, 0.28),
    0 10px 16px -6px rgba(0, 0, 0, 0.55) !important;
}
html .home-view .hx-title,
html .home-view .hx-title em {
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
html .home-view .hx-title em {
  text-shadow: 0 8px 22px rgba(20, 90, 55, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  html .home-view .hx-card,
  html .home-view .hx-mode,
  html .home-view .hx-go {
    transition: none;
  }
}

/* ============================================================
   v2.63.7 — mais suavidade em todo o app
   Sombras mais difusas e leves, bordas de base mais finas, e campo de
   escrita das palavras maior.
   ============================================================ */
:root {
  --d-hi: rgba(255, 255, 255, 0.1);
  --d-hi2: rgba(255, 255, 255, 0.04);
  --d-lo: rgba(0, 0, 0, 0.36);
  --d-lo2: rgba(0, 0, 0, 0.18);
  --d-edge: rgba(0, 0, 0, 0.34);
  --d-sheen-a: rgba(255, 255, 255, 0.05);
  --d-sheen-b: rgba(0, 0, 0, 0.1);
  --d-ext: 2px;
}
html[data-theme="sharp"]:has(.home-view.hidden),
html[data-firm]:has(.home-view.hidden) {
  --d-hi: rgba(255, 255, 255, 0.9);
  --d-hi2: rgba(255, 255, 255, 0.5);
  --d-lo: rgba(70, 52, 20, 0.2);
  --d-lo2: rgba(70, 52, 20, 0.1);
  --d-edge: rgba(70, 52, 20, 0.2);
  --d-sheen-a: rgba(255, 255, 255, 0.55);
  --d-sheen-b: rgba(120, 95, 50, 0.05);
  --d-ext: 2px;
}
html .practice-view .entry {
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
html body .practice-input-inline,
html body .practice-view .practice-input-inline,
html body .entry > .practice-box .practice-input-inline,
html:root .entry > .practice-box .practice-input-inline,
html[data-firm] body .practice-input-inline {
  font-size: 1.6rem !important;
  line-height: 1.4 !important;
  padding: 14px 16px !important;
  min-height: 4.2em;
}

/* v2.63.8 — botão principal da Home: sem reluzir (menos brilho e halo) */
html .home-view .hx-go {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #8cc79d, #74b08a) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -4px 8px -4px rgba(20, 80, 45, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 14px 24px -12px rgba(0, 0, 0, 0.6) !important;
}
html .home-view .hx-go:active {
  box-shadow:
    inset 0 2px 6px rgba(20, 80, 45, 0.3),
    0 4px 8px -6px rgba(0, 0, 0, 0.6) !important;
}

/* ============================================================
   v2.64.0 — HOME com peças reais
   Cada cartão é uma "peça" física: face em material fosco com grão fino,
   aro de luz no canto superior esquerdo, parede lateral com espessura,
   sombra de contato e sombra ambiente. Ao tocar, a peça afunda do lado
   pressionado e volta com mola. Botão principal é uma tecla de verdade.
   Modo Nítido / Letras firmes: mesma espessura, mas face lisa, sem grão.
   ============================================================ */
:root {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
}

/* grão fino sobre toda a Home (some no modo Nítido) */
html:not([data-firm]):has(.home-view:not(.hidden)) body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--grain) 0 0 / 160px 160px;
  opacity: 0.10;
  mix-blend-mode: overlay;
}

/* ---- peça (cartão elevado) ---- */
html .home-view .hx-card,
html .home-view .hx-mode:not(.is-locked) {
  border: 1px solid transparent !important;
  background:
    var(--grain) 0 0 / 160px 160px padding-box,
    radial-gradient(130% 100% at var(--mx, 24%) var(--my, 0%), rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 58%) padding-box,
    linear-gradient(165deg, #24372f 0%, #1a2924 55%, #141f1b 100%) padding-box,
    linear-gradient(140deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 34%, rgba(255, 255, 255, 0.02) 62%, rgba(0, 0, 0, 0.45)) border-box !important;
  background-blend-mode: soft-light, normal, normal, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    inset 0 -14px 22px -16px rgba(0, 0, 0, 0.5),
    0 1px 0 #2a4136,
    0 2px 0 #243a30,
    0 3px 0 #1e332a,
    0 4px 0 #182a23,
    0 7px 9px -2px rgba(0, 0, 0, 0.55),
    0 24px 38px -14px rgba(0, 0, 0, 0.75) !important;
}
html .home-view .hx-mode[data-mode="sons"]:not(.is-locked) {
  background:
    var(--grain) 0 0 / 160px 160px padding-box,
    radial-gradient(130% 100% at var(--mx, 24%) var(--my, 0%), rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 58%) padding-box,
    linear-gradient(165deg, #2c4034 0%, #1f3029 55%, #17241f 100%) padding-box,
    linear-gradient(140deg, rgba(190, 240, 205, 0.45), rgba(143, 202, 160, 0.09) 34%, rgba(255, 255, 255, 0.02) 62%, rgba(0, 0, 0, 0.45)) border-box !important;
}
/* mola ao soltar; afunda do lado tocado */
html .home-view .hx-mode:not(.is-locked) {
  transition:
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
html .home-view .hx-mode.is-pressed:not(.is-locked),
html .home-view .hx-mode.is-pressed:not(.is-locked):active {
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(4px) scale(0.985);
  transition: transform 0.09s ease-out, box-shadow 0.09s ease-out;
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 #182a23,
    0 4px 6px -2px rgba(0, 0, 0, 0.6) !important;
}

/* ---- nicho gravado (bloqueado) ---- */
html .home-view .hx-mode.is-locked {
  border: 1px solid rgba(0, 0, 0, 0.35) !important;
  background:
    var(--grain) 0 0 / 160px 160px,
    linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.05) 70%),
    #111a16 !important;
  background-blend-mode: soft-light, normal, normal;
  box-shadow:
    inset 0 9px 16px -8px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

/* ---- tecla principal ---- */
html .home-view .hx-go {
  background:
    var(--grain) 0 0 / 160px 160px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #95cfa6, #74b08a) !important;
  background-blend-mode: soft-light, normal, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -5px 8px -4px rgba(20, 80, 45, 0.3),
    0 1px 0 #55a06e,
    0 2px 0 #4f9a68,
    0 3px 0 #489262,
    0 4px 0 #428b5c,
    0 5px 0 #3b8355,
    0 9px 11px -2px rgba(0, 0, 0, 0.55),
    0 26px 34px -14px rgba(0, 0, 0, 0.6) !important;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
html .home-view .hx-go:active {
  transform: translateY(4px) scale(0.99);
  transition-duration: 0.08s;
  box-shadow:
    inset 0 2px 7px rgba(20, 80, 45, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 0 #3b8355,
    0 4px 6px -3px rgba(0, 0, 0, 0.55) !important;
}

/* ---- medalhões dos ícones ---- */
html .home-view .hx-mode-icon {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.32),
    inset 0 -6px 9px -2px rgba(0, 0, 0, 0.35),
    0 1px 0 #0d1713,
    0 2px 0 #0b1411,
    0 3px 0 #09100d,
    0 7px 9px -3px rgba(0, 0, 0, 0.6) !important;
}

/* ---- modo Nítido: mesma espessura, face lisa, sem grão ---- */
html[data-firm] body .home-view .hx-card,
html[data-firm] body .home-view .hx-mode:not(.is-locked) {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: #1f332b !important;
  background-blend-mode: normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 1px 0 #2a4136,
    0 2px 0 #243a30,
    0 3px 0 #1e332a,
    0 4px 0 #182a23,
    0 14px 18px -8px rgba(0, 0, 0, 0.6) !important;
}
html[data-firm] body .home-view .hx-mode.is-pressed:not(.is-locked) {
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35), 0 1px 0 #182a23, 0 5px 8px -4px rgba(0, 0, 0, 0.6) !important;
}
html[data-firm] body .home-view .hx-mode.is-locked {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: #0b110e !important;
  background-blend-mode: normal;
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
html[data-firm] body .home-view .hx-go {
  background: #8fcaa0 !important;
  background-blend-mode: normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 0 #55a06e,
    0 2px 0 #4a9363,
    0 3px 0 #428b5c,
    0 4px 0 #3b8355,
    0 5px 0 #327a4d,
    0 12px 16px -6px rgba(0, 0, 0, 0.55) !important;
}
html[data-firm] body .home-view .hx-go:active {
  box-shadow: inset 0 2px 0 rgba(20, 80, 45, 0.35), 0 1px 0 #327a4d !important;
}
html[data-firm] body .home-view .hx-mode-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 1px 0 #0d1713, 0 2px 0 #0b1411, 0 3px 0 #09100d,
    0 6px 8px -3px rgba(0, 0, 0, 0.55) !important;
}
@media (prefers-reduced-motion: reduce) {
  html .home-view .hx-mode:not(.is-locked),
  html .home-view .hx-go {
    transition: none;
  }
}

/* ============================================================
   v2.64.1 — identidade: fundo mineral + navegação flutuante
   Barra inferior translúcida e separada do fundo; só o item ativo fica
   rebaixado (os outros são planos). Fundo escuro com luz ambiente discreta.
   ============================================================ */
html body .bottom-nav {
  background-color: rgba(15, 22, 19, 0.92) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, 0.09);
  gap: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 18px 34px -12px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="sharp"]:has(.home-view.hidden) body .bottom-nav,
html[data-firm]:has(.home-view.hidden) body .bottom-nav {
  background-color: rgba(250, 247, 240, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(70, 52, 20, 0.12),
    0 2px 4px rgba(70, 52, 20, 0.12),
    0 16px 30px -12px rgba(70, 52, 20, 0.35) !important;
}
html body .bottom-nav .nav-btn:not(.active),
html[data-firm] body .bottom-nav .nav-btn:not(.active) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none;
}
html body .bottom-nav .nav-btn.active,
html[data-firm] body .bottom-nav .nav-btn.active {
  background: rgba(0, 0, 0, 0.26) !important;
  background-image: none !important;
  transform: none;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="sharp"]:has(.home-view.hidden) body .bottom-nav .nav-btn.active,
html[data-firm]:has(.home-view.hidden) body .bottom-nav .nav-btn.active {
  background: rgba(120, 95, 50, 0.1) !important;
  box-shadow:
    inset 0 3px 7px rgba(70, 52, 20, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
html body .bottom-nav .nav-btn:not(.active):active {
  background: rgba(0, 0, 0, 0.14) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35) !important;
}

/* Fundo mineral com luz ambiente (temas escuros, telas de estudo) */
html[data-theme="night"]:has(.home-view.hidden) body,
html[data-theme="graphite"]:has(.home-view.hidden) body,
html[data-theme="slate"]:has(.home-view.hidden) body {
  background-image:
    radial-gradient(900px 520px at 12% -6%, rgba(143, 202, 160, 0.10), transparent 62%),
    radial-gradient(760px 480px at 100% 8%, rgba(110, 170, 160, 0.06), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(0, 0, 0, 0.45), transparent 70%);
  background-attachment: fixed;
}

/* ============================================================
   v2.64.2 — 3D suave, quase imperceptível
   Só uma sugestão de profundidade: luz fina na borda de cima, sombra curta
   e difusa, sem grão, sem parede lateral, sem inclinação perceptível.
   ============================================================ */
:root {
  --d-hi: rgba(255, 255, 255, 0.06);
  --d-hi2: rgba(255, 255, 255, 0.025);
  --d-lo: rgba(0, 0, 0, 0.22);
  --d-lo2: rgba(0, 0, 0, 0.1);
  --d-edge: rgba(0, 0, 0, 0.2);
  --d-sheen-a: rgba(255, 255, 255, 0.025);
  --d-sheen-b: rgba(0, 0, 0, 0.05);
  --d-ext: 1px;
}
html[data-theme="sharp"]:has(.home-view.hidden),
html[data-firm]:has(.home-view.hidden) {
  --d-hi: rgba(255, 255, 255, 0.8);
  --d-hi2: rgba(255, 255, 255, 0.4);
  --d-lo: rgba(70, 52, 20, 0.12);
  --d-lo2: rgba(70, 52, 20, 0.06);
  --d-edge: rgba(70, 52, 20, 0.12);
  --d-sheen-a: rgba(255, 255, 255, 0.3);
  --d-sheen-b: rgba(120, 95, 50, 0.03);
  --d-ext: 1px;
}
html:not([data-firm]):has(.home-view:not(.hidden)) body::after {
  display: none;
}

/* Home: cartões */
html .home-view .hx-card,
html .home-view .hx-mode:not(.is-locked),
html .home-view .hx-mode[data-mode="sons"]:not(.is-locked) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 50%) padding-box,
    linear-gradient(180deg, #1d2d27, #172621) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)) border-box !important;
  background-blend-mode: normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 10px 20px -12px rgba(0, 0, 0, 0.45) !important;
}
html .home-view .hx-mode[data-mode="sons"]:not(.is-locked) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 50%) padding-box,
    linear-gradient(180deg, #22342c, #1a2a24) padding-box,
    linear-gradient(180deg, rgba(160, 220, 180, 0.2), rgba(255, 255, 255, 0.04)) border-box !important;
}
@media (hover: hover) {
  html .home-view .hx-mode:not(.is-locked):hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 1px 2px rgba(0, 0, 0, 0.22),
      0 14px 24px -12px rgba(0, 0, 0, 0.5) !important;
  }
}
html .home-view .hx-mode.is-pressed:not(.is-locked),
html .home-view .hx-mode.is-pressed:not(.is-locked):active {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(1px) scale(0.996);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.25), 0 4px 10px -8px rgba(0, 0, 0, 0.5) !important;
}
html .home-view .hx-mode:not(.is-locked) {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
/* Bloqueados */
html .home-view .hx-mode.is-locked {
  background: #111b17 !important;
  background-blend-mode: normal;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: inset 0 2px 6px -2px rgba(0, 0, 0, 0.5) !important;
}
/* Botão principal */
html .home-view .hx-go {
  background: linear-gradient(180deg, #92cba3, #7ab690) !important;
  background-blend-mode: normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 10px 18px -12px rgba(0, 0, 0, 0.55) !important;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
html .home-view .hx-go:active {
  transform: translateY(1px) scale(0.997);
  box-shadow: inset 0 1px 3px rgba(20, 80, 45, 0.25), 0 3px 8px -6px rgba(0, 0, 0, 0.5) !important;
}
/* Ícones */
html .home-view .hx-mode-icon {
  background-image: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.4) !important;
}
html .home-view .hx-mode.is-locked .hx-mode-icon {
  box-shadow: none !important;
}
/* Modo Nítido */
html[data-firm] body .home-view .hx-card,
html[data-firm] body .home-view .hx-mode:not(.is-locked) {
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background: #1f332b !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 0 #162720, 0 10px 14px -10px rgba(0, 0, 0, 0.5) !important;
}
html[data-firm] body .home-view .hx-mode.is-pressed:not(.is-locked) {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 #162720 !important;
}
html[data-firm] body .home-view .hx-mode.is-locked {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: #0b110e !important;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.6) !important;
}
html[data-firm] body .home-view .hx-go {
  background: #8fcaa0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 0 #4f9a68, 0 8px 12px -8px rgba(0, 0, 0, 0.5) !important;
}
html[data-firm] body .home-view .hx-go:active {
  box-shadow: inset 0 1px 0 rgba(20, 80, 45, 0.3), 0 1px 0 #4f9a68 !important;
}
html[data-firm] body .home-view .hx-mode-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 #0d1713 !important;
}
/* Barra inferior e filtros: relevo mínimo */
html body .bottom-nav,
html[data-theme="sharp"]:has(.home-view.hidden) body .bottom-nav,
html[data-firm]:has(.home-view.hidden) body .bottom-nav {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px -12px rgba(0, 0, 0, 0.35) !important;
}
html body .bottom-nav .nav-btn.active,
html[data-firm] body .bottom-nav .nav-btn.active,
html[data-theme="sharp"]:has(.home-view.hidden) body .bottom-nav .nav-btn.active,
html[data-firm]:has(.home-view.hidden) body .bottom-nav .nav-btn.active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}