* { box-sizing: border-box; }

/* Ícones — Material Symbols */
.material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal;
  font-style:normal;
  font-size:1.5rem;
  display:inline-block;
  line-height:1;
  text-transform:none;
  letter-spacing:normal;
  word-wrap:normal;
  white-space:nowrap;
  direction:ltr;
  -webkit-font-smoothing:antialiased;
  vertical-align:middle;
  font-variation-settings:'opsz' 24,'wght' 400,'FILL' 0,'GRAD' 0;
}

/* ── Remapeamento das CSS vars do Bootstrap para os tokens M3 ── */
:root{
  --bs-primary:var(--md-sys-color-primary);
  --bs-primary-rgb:0,86,208;
  --bs-body-bg:var(--md-sys-color-surface);
  --bs-body-color:var(--md-sys-color-on-surface);
  --bs-border-color:var(--md-sys-color-outline-variant);
  --bs-secondary-color:var(--md-sys-color-on-surface-variant);
  --bs-border-radius:var(--md-sys-shape-corner-small);
  --bs-border-radius-sm:var(--md-sys-shape-corner-extra-small);
  --bs-border-radius-lg:var(--md-sys-shape-corner-medium);
  --bs-border-radius-xl:var(--md-sys-shape-corner-large);
  --bs-border-radius-pill:var(--md-sys-shape-corner-full);
  --bs-link-color:var(--md-sys-color-primary);
  --bs-link-color-rgb:0,86,208;
  --bs-link-hover-color:var(--md-sys-color-primary);
  --bs-danger:var(--md-sys-color-error);
}
.bg-primary-subtle{background-color:var(--md-sys-color-primary-container)!important}
.bg-success-subtle{background-color:var(--md-extended-color-success-color-container)!important}

h1,h2,h3,h4,h5,h6{font-family:'Lato',sans-serif;font-weight:600}
h4{font-size:var(--md-sys-typescale-headline-small-size);line-height:var(--md-sys-typescale-headline-small-line-height)}
.home-headline{color:var(--md-sys-color-on-surface);font-size:20px;line-height:1.2;margin-bottom:8px}
.fw-extrabold{font-weight:800!important}
.fw-semibold{font-weight:600!important}
h5{font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height)}
.btn{font-family:'Lato',sans-serif;font-weight:500;font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);letter-spacing:.1px}
.btn-primary,.btn-outline-primary,.btn-danger{border-radius:var(--md-sys-shape-corner-full)!important}
.btn-primary{--bs-btn-color:var(--md-sys-color-on-primary);--bs-btn-bg:var(--md-sys-color-primary);--bs-btn-border-color:var(--md-sys-color-primary);--bs-btn-hover-color:var(--md-sys-color-on-primary);--bs-btn-hover-bg:color-mix(in srgb, var(--md-sys-color-primary) 92%, var(--md-sys-color-on-primary) 8%);--bs-btn-hover-border-color:var(--md-sys-color-primary);--bs-btn-active-color:var(--md-sys-color-on-primary);--bs-btn-active-bg:color-mix(in srgb, var(--md-sys-color-primary) 84%, var(--md-sys-color-on-primary) 16%);--bs-btn-active-border-color:var(--md-sys-color-primary)}
.btn-link,.btn-link:hover{color:var(--md-sys-color-primary);text-decoration:none}
.btn-link.text-dark{color:var(--md-sys-color-on-surface)!important}
.text-primary{color:var(--md-sys-color-primary)!important}
.text-danger{color:var(--md-sys-color-error)!important}
.text-secondary,.text-muted{color:var(--md-sys-color-on-surface-variant)!important}
.form-check-input:checked{background-color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}

/* ── Casca do app — mesmas dimensões do abfinancas: cartão de celular
   centralizado, com gutters escuros nas laterais em telas largas ── */
body{background:var(--md-sys-color-scrim);display:flex;justify-content:center;align-items:center;min-height:100dvh;overflow:hidden;font-family:'Lato',sans-serif;margin:0}
/* Sem isso, `.app{width:100%}` fica sem referência de largura definida
   (o pai vira item de flex do body sem tamanho próprio) e o app inteiro
   desaparece — só o scrim escuro do body fica visível (tela preta). */
#app-shell{width:100%}
/* width:100% + max-width(max(...)) em vez de margin fixo: no celular
   (tela mais estreita que 560px) o app continua ocupando 100% sem
   nenhum gutter, igual sempre foi. Só em telas largas o max-width vira
   calc(100% - 80px), travando o respiro lateral em exatos 40px de cada
   lado — nunca mais que isso, mas também nunca estreitando o app em
   telas pequenas. */
.app{width:100%;max-width:max(560px, calc(100% - 80px));height:100dvh;background:var(--md-sys-color-surface);position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 24px color-mix(in srgb, var(--md-sys-color-scrim) 40%, transparent);margin:0 auto}
.app-content{flex:1;position:relative;overflow:clip;min-height:0;background:var(--md-sys-color-surface)}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--md-sys-color-surface);transition:transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized)}
.screen.hidden{transform:translateX(100%);pointer-events:none}
.screen.active{transform:none;opacity:1;will-change:auto}
.screen-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}
.screen-body::-webkit-scrollbar{display:none}
.screen-body:not(.center-col){padding-bottom:32px!important}

.avatar-lg{width:56px;height:56px;font-size:22px}
.avatar-sm{width:32px;height:32px;font-size:14px}
.center-col{display:flex;flex-direction:column;justify-content:center;padding:28px 24px}

/* ── Wordmark Is.pí.que BR — usado no lugar de um logo em imagem
   (splash, welcome, header da Home). gap separa "que" de "BR" (a
   notação fonética com pontos não deixa claro onde a palavra termina
   sem esse espaço). ── */
.brand-logo{font-family:'Lato',sans-serif;font-weight:700;letter-spacing:-.3px;display:inline-flex;gap:.3em;color:var(--md-sys-color-primary)}
.brand-logo b{font-weight:700;color:var(--md-sys-color-on-surface)}
.brand-logo-lg{font-size:1.8rem;margin-bottom:20px}
.brand-logo-sm{font-size:.95rem}
.auth-screen .brand-logo,.auth-screen .brand-logo b{color:#e8c39e}

/* ── Telas de autenticação (Login/Criar conta) — gradiente azul, à
   parte do tema M3 do resto do app ── */
/* Sem !important de propósito: regras !important nunca são sobrescritas
   por @keyframes (nem por outra declaração sem !important na mesma
   regra) — como o shorthand "background" reseta background-position
   implicitamente, marcá-lo !important também travava a posição com
   !important "de graça" e a animação nunca se movia de fato. A ordem
   no arquivo já garante que .auth-screen vence .screen (mesma
   especificidade, declarada depois), então o !important nem fazia falta. */
.auth-screen{background:linear-gradient(0deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 30%),linear-gradient(160deg,#0069c0 0%,#137fd9 50%,#2196f3 100%);background-size:100% 100%,220% 220%;background-position:0% 0%,0% 0%;animation:auth-gradient-move 12s ease-in-out infinite}
@keyframes auth-gradient-move{0%{background-position:0% 0%,0% 0%}50%{background-position:0% 0%,100% 100%}100%{background-position:0% 0%,0% 0%}}

/* Login é duotone (só 2 cores, azul + ciano), diferente do resto das
   telas de auth (3 azuis). Blue segurado até 55% pra logo/título (que
   ficam na metade de cima) nunca caírem sobre o ciano durante a
   animação — o ciano aparece só como acento perto do rodapé.
   #screen-login (id) já vence .auth-screen (classe) na especificidade,
   sem precisar de !important.

   O ângulo do degradê gira sozinho e aleatoriamente (em vez de um
   vai-e-volta fixo): --grad-angle é registrado via @property só pra
   virar transitionable (ângulo puro não interpola em CSS comum), e
   quem sorteia o próximo valor é o randomizeLoginGradientAngle() no
   main.js — sempre um pequeno passo relativo ao ângulo atual, nunca um
   valor absoluto novo, senão a interpolação linear entre ex. 350deg e
   10deg giraria a volta toda errada em vez do caminho curto. */
@property --grad-angle{syntax:'<angle>';inherits:false;initial-value:165deg}
#screen-login{background:linear-gradient(0deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 30%),linear-gradient(var(--grad-angle),#0069c0 0%,#0069c0 55%,#00bcd4 100%);background-size:100% 100%,140% 140%;background-position:0% 0%,center;transition:--grad-angle 6s ease-in-out}
.auth-title{color:#fff;font-size:1.6rem;font-weight:700;text-align:center;line-height:1.25;margin-bottom:8px}
.auth-subtitle{color:rgba(255,255,255,.85);text-align:center;font-size:.85rem;margin-bottom:28px}
.auth-btn-primary{background:#fff!important;color:#0056d0!important;border:none!important;border-radius:999px!important;font-weight:700!important;padding:14px 48px!important}
.auth-btn-primary:hover,.auth-btn-primary:active{background:#f0f0f0!important;color:#0056d0!important}
.auth-btn-guest{background:rgba(255,255,255,.14)!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.45)!important;border-radius:999px!important;font-weight:600!important;font-size:.8rem!important;padding:7px 20px!important}
.auth-btn-guest:hover,.auth-btn-guest:active{background:rgba(255,255,255,.22)!important;border-color:#fff!important}
.auth-link{color:#fff!important;text-decoration:underline}
.auth-link.text-muted{color:rgba(255,255,255,.7)!important}
.auth-err{background:rgba(255,255,255,.92);color:#c62828;border-radius:10px;padding:6px 12px;font-weight:500}
.auth-err:empty{background:transparent;padding:0}
.auth-check .form-check-input{background-color:transparent;border-color:rgba(255,255,255,.6)}
.auth-check .form-check-input:checked{background-color:#fff;border-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230056d0'%3e%3cpath d='M7 11.5L4.5 9 3 10.5l4 4 9-9L14.5 4z'/%3e%3c/svg%3e")}
.auth-check .form-check-label{color:rgba(255,255,255,.85)}
.auth-input-box{background:rgba(255,255,255,.14)!important;border:1.5px solid rgba(255,255,255,.45)!important;border-radius:10px!important;color:#fff!important;padding:14px 16px!important;font-size:.95rem}
.auth-input-box::placeholder{color:rgba(255,255,255,.75)}
.auth-input-box:focus{background:rgba(255,255,255,.22)!important;border-color:#fff!important;box-shadow:none!important;color:#fff!important}
.auth-spinner{width:32px;height:32px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;margin:24px auto 0;animation:auth-spinner-spin .8s linear infinite}
/* Coluna de conteúdo mais estreita que o padding lateral padrão
   (px-4/center-col, 24px) — usada no formulário do login e, pro mesmo
   respiro lateral, no bloco de busca/resultado da Home. */
.content-narrow{max-width:300px;margin:0 auto;width:100%}
/* .center-col estica os filhos (align-items:stretch é o default), então
   o .brand-logo (inline-flex) vira uma caixa full-width com o texto
   grudado à esquerda. Centraliza só a caixa do logo na splash. */
#screen-splash .brand-logo{align-self:center}
.brand-logo-md{font-size:1.5rem}

/* Logo do login fica no meio do vão entre o topo da tela e o título —
   em vez de calcular esse vão em JS, troca o justify-content:center
   do .center-col por dois espaçadores flex:1 (um antes do logo, um
   depois do link "Criar agora"). Como os dois crescem igual, o efeito
   de centralizar o bloco de conteúdo é o mesmo de antes, mas agora o
   logo fica centralizado dentro do espaçador de cima — ou seja, exatamente
   no meio entre o topo e o título. */
.auth-center-col-split{justify-content:flex-start}
.auth-logo-slot{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.auth-bottom-spacer{flex:1;min-height:0}

/* Cada sílaba de "Is.pí.que BR" entra em zoom-in, uma de cada vez. */
@keyframes brand-syl-in{
  0%{opacity:0;transform:scale(.35)}
  70%{opacity:1;transform:scale(1.12)}
  100%{opacity:1;transform:scale(1)}
}
.brand-logo-splash .syl{
  display:inline-block;
  animation:brand-syl-in .5s cubic-bezier(.3,0,.3,1) backwards;
}
.brand-logo-splash .syl-1{animation-delay:.1s}
.brand-logo-splash .syl-2{animation-delay:.3s}
.brand-logo-splash .syl-3{animation-delay:.5s}
.brand-logo-splash .syl-4{animation-delay:.7s}

@media (prefers-reduced-motion: reduce){
  .brand-logo-splash .syl{animation:none;opacity:1;transform:none}
}
@keyframes auth-spinner-spin{to{transform:rotate(360deg)}}

/* ── Header em degradê azul, usado no topo das telas internas ── */
.app-header-gradient{background:linear-gradient(135deg,#0069c0 0%,#137fd9 50%,#2196f3 100%)!important;border-bottom:none!important;color:#fff}
.app-header-gradient .material-symbols-outlined{color:#fff}
.app-header-gradient .btn-link{color:#fff!important}
.app-header-gradient .text-primary{color:#fff!important}
.app-header-gradient .avatar-sm.text-primary{color:var(--md-sys-color-primary)!important}
.app-header-gradient{padding-bottom:32px!important}
/* Header da Home: logo à esquerda, avatar à direita. */
#home-header{display:flex;align-items:center;justify-content:space-between;height:100px;padding:12px 16px 20px!important}

/* Faixa de celulares comuns (iPhone SE até telas ~500px): padding
   lateral unificado em 40px — cobre tanto o header (que por padrão usa
   16px) quanto o conteúdo (.px-4/.center-col, que por padrão usam
   24px), pra não ter dois respiros diferentes na mesma tela nesse
   intervalo. */
@media (min-width:376px) and (max-width:500px){
  .px-4{padding-left:40px!important;padding-right:40px!important}
  .center-col{padding-left:40px;padding-right:40px}
  #home-header{padding-left:40px!important;padding-right:40px!important}
}
.app-header-gradient .brand-logo,.app-header-gradient .brand-logo b{color:#fff}
.app-body-rounded{background:var(--md-sys-color-surface-container-low);border-radius:24px 24px 0 0;margin-top:-16px;position:relative;z-index:1}

/* ── Perfil ── */
.profile-item{background-color:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-medium);padding:14px 16px;margin:8px 0;cursor:pointer;transition:background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard)}
.profile-item:hover{background-color:var(--md-sys-color-surface-container-low)}
.profile-item:active{background-color:var(--md-sys-color-surface-container)}

/* ── Privacidade/LGPD — cada <details> abre/fecha por conta própria ── */
.privacy-accordion-item{background-color:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-medium);padding:14px 16px}
.privacy-accordion-item summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;font-weight:600;font-size:.875rem;list-style:none}
.privacy-accordion-item summary::-webkit-details-marker{display:none}
.privacy-accordion-chevron{font-size:1.2rem;color:var(--md-sys-color-on-surface-variant);transition:transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);flex-shrink:0}
.privacy-accordion-item[open] .privacy-accordion-chevron{transform:rotate(180deg)}

/* ── Circular progress indicator M3 (indeterminado), usado nos botões
   durante ações assíncronas (ver setBtnLoading em js/auth.js) ── */
.m3-spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.9;vertical-align:-3px;animation:m3-spin var(--md-sys-motion-duration-long2) linear infinite}
@keyframes m3-spin{to{transform:rotate(360deg)}}
.btn:disabled{cursor:not-allowed}

/* ── Ferramenta de tradução/pronúncia (tela Home) ── */
.input-row {
  display: flex;
  align-items: center;
}

.input-glow {
  position: relative;
  flex: 1;
  min-width: 0;
}

#word-input {
  display: block;
  width: 100%;
  height: 72px;
  padding: 0 50px;
  font-family: var(--md-ref-typeface-plain);
  font-size: 24px;
  font-weight: 600;
  line-height: 72px;
  text-align: center;
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
  outline: none;
}

/* Botão de fala dentro do próprio campo — grava a palavra falada e já
   dispara a busca, no lugar de digitar. */
#word-mic-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(calc(-50% + 2px));
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #7a2b26;
  cursor: pointer;
  z-index: 1;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

#word-mic-btn:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

#word-mic-btn.listening {
  color: var(--md-sys-color-error);
  animation: mic-pulse 1s ease-in-out infinite;
}

#word-mic-btn[hidden] {
  display: none;
}

/* line-height/padding/vertical-align não deslocam o texto do
   ::placeholder nesse input (testado empiricamente) — só transform
   funciona, por isso o ajuste fino de posição usa translateY em vez
   de mexer no line-height (que afetaria o valor digitado também). */
#word-input::placeholder {
  font-size: var(--md-sys-typescale-body-large-size);
  font-weight: 400;
  color: var(--md-sys-color-on-surface-variant);
  transform: translateY(-2px);
}

/* Palavra traduzida — mesma tipografia do input, logo abaixo dele. */
.translation-word-display {
  margin-top: 32px;
  text-align: center;
}

.translation-word-display .card-label {
  margin-bottom: 1px;
}

#translation-word-text {
  font-family: var(--md-ref-typeface-plain);
  font-size: 18px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
}

.speak-btn,
.mic-btn {
  position: relative;
  overflow: hidden;
  flex: none;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  line-height: 1;
  cursor: pointer;
}

.speak-btn {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-surface);
}

.mic-btn {
  background: #f6d9d6;
  color: #7a2b26;
}

.speak-btn::after,
.mic-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.mic-btn:hover::after {
  opacity: var(--md-sys-state-hover-opacity);
}

#error-message {
  text-align: center;
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-error-container);
}

#error-message:not(:empty) {
  margin-top: 10px;
  background: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 10px 14px;
}

#result-card {
  margin-top: 16px;
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

/* Cada resposta (palavra, pronúncia US, pronúncia GB) é seu próprio
   cartão branco, separado dos outros — não mais seções dentro de uma
   caixa única. */
.result-item-card {
  background: var(--md-sys-color-surface);
  border-radius: 8px;
  padding: 24px 18px 16px;
  text-align: center;
}

/* Só o primeiro card (US) recebe o padding-top menor — o segundo
   (UK), quando visível junto, mantém o padding-top padrão. */
#dialect-section-us {
  padding-top: 16px;
}

.card-label {
  display: block;
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 14px;
}

.flag-tag {
  font-weight: 600;
}

.result-item-card .flag-tag {
  margin-left: 6px;
}

.flag-icon {
  margin-left: 6px;
  vertical-align: -2px;
  border-radius: 2px;
}

.card-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ouvir pronúncia + Testar pronúncia — mesma linha, duas colunas,
   mesmo estilo de botão (pill com ícone e texto). */
.action-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.action-row .action-col,
.action-row .mic-btn {
  flex: none;
}

.action-col {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.action-col .speak-btn {
  width: auto;
  flex: none;
}

.action-col .speed-toggle-btn {
  flex: none;
}

.test-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* Botão de velocidade de reprodução do "Ouvir" — alterna entre normal
   (1x) e reduzida (0.5x) a cada toque, ao lado esquerdo do "Ouvir". */
.speed-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--md-sys-color-surface-container-high);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.speed-toggle-btn:hover {
  background: var(--md-sys-color-surface-container-highest);
}

.card-value {
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
}

.card-value-lg {
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: 900;
  color: var(--md-sys-color-primary);
}

/* Ouvir pronúncia e Testar pronúncia — mesmo estilo (pill, ícone +
   texto), lado a lado em .action-row. */
.speak-btn,
.mic-btn {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 16px;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.speak-btn .material-symbols-outlined,
.mic-btn .material-symbols-outlined {
  font-size: 1.05rem;
}

.mic-btn.listening {
  background: #f6d9d6;
  color: #7a2b26;
}

.speak-btn[hidden],
.mic-btn[hidden] {
  display: none;
}

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(186, 26, 26, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(186, 26, 26, 0); }
}

/* Barras de áudio — substituem o ícone de autofalante enquanto a
   palavra está sendo falada (ver .speaking, ligado/desligado via
   onstart/onend do SpeechSynthesisUtterance em main.js). */
.audio-bars {
  display: none;
  align-items: flex-end;
  gap: 2px;
  width: 1.05rem;
  height: 1.05rem;
}

.audio-bars span {
  flex: 1;
  background: currentColor;
  border-radius: 1px;
  animation: audio-bar-bounce 0.9s ease-in-out infinite;
}

.audio-bars span:nth-child(1) { animation-delay: -0.6s; }
.audio-bars span:nth-child(2) { animation-delay: -0.3s; }
.audio-bars span:nth-child(3) { animation-delay: -0.75s; }
.audio-bars span:nth-child(4) { animation-delay: -0.15s; }

@keyframes audio-bar-bounce {
  0%, 100% { height: 25%; }
  50% { height: 100%; }
}

.speak-btn.speaking {
  background: #dceed3;
  color: #33512c;
  border-color: #dceed3;
}

.speak-btn.speaking .material-symbols-outlined {
  display: none;
}

.speak-btn.speaking .audio-bars {
  display: inline-flex;
}

.mic-btn.listening .material-symbols-outlined {
  animation: mic-icon-pulse 1s ease-in-out infinite;
}

@keyframes mic-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .audio-bars span {
    animation: none;
    height: 60%;
  }
}

.mic-feedback {
  font-size: var(--md-sys-typescale-body-small-size);
  font-weight: 500;
  text-align: center;
}

.mic-feedback:empty {
  display: none;
}

.mic-feedback.incorrect {
  color: var(--md-sys-color-error);
}

#result-note {
  font-size: var(--md-sys-typescale-body-small-size);
  font-style: italic;
  color: var(--md-sys-color-on-surface-variant);
}

/* Vazio, sai do fluxo flex do #result-card pra não consumir um gap:16px
   extra (senão o espaço visual até o vizinho seguinte dobra). */
#result-note:empty {
  display: none;
}

#result-note:not(:empty) {
  min-height: 1em;
  margin-top: 12px;
}

/* Rodapé institucional (mensagem da marca) — fica dentro da área com
   scroll, no fim do conteúdo real (não fixo/sobreposto). #home-body já
   tem altura definida via flex:1 (herdado de .screen-body) dentro de
   .screen, então virar coluna flex é suficiente pro margin-top:auto no
   rodapé empurrar ele pro fim da tela quando o conteúdo é curto — sem
   precisar (e sem correr o risco de) redeclarar min-height:100% de
   forma autorreferente, que quebrava a rolagem em navegadores mobile e
   cortava a segunda linha do texto. */
#home-body {
  display: flex;
  flex-direction: column;
  padding-bottom: 32px !important;
}

.usage-footer {
  margin-top: auto;
  padding: 16px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--md-sys-color-on-surface);
}

.usage-footer-line {
  display: block;
}

/* Confete de acerto — camada de peças caindo, contida no shell do app
   (#app tem overflow:hidden), acima do backdrop/modal do Bootstrap
   (z-index 1050/1055) pra continuar visível quando o modal abre. */
.confetti-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1200;
}

.confetti-piece {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 1px;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(var(--confetti-fall-distance, 640px)) rotate(var(--confetti-spin, 540deg)); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .confetti-piece {
    animation: none;
    display: none;
  }
}

/* Bootstrap usa position:fixed (relativo à viewport) tanto pro .modal
   quanto pro .modal-backdrop, então em telas largas eles ignoram o
   frame do app (.app, max-width:560px) e cobrem a janela inteira.
   Como .modal já nasce dentro de #app (index.php) e o .modal-backdrop
   é movido pra lá via JS (main.js) assim que criado, basta trocar pra
   position:absolute pra ambos ficarem contidos no #app
   (position:relative; overflow:hidden). */
.app .modal,
.app .modal-backdrop {
  position: absolute;
}

/* Mesma largura de conteúdo do input/cards — .screen-body usa px-4
   (1.5rem de cada lado). */
.modal-dialog-app-width {
  max-width: calc(100% - 3rem);
  margin-left: auto;
  margin-right: auto;
}

/* Mesma faixa de celulares comuns do padding lateral do site (ver
   media query lá em cima) — aqui precisa ficar DEPOIS da regra base
   acima porque @media não aumenta especificidade, só a condição de
   aplicação; com a mesma especificidade, a ordem no arquivo decide. */
@media (min-width:376px) and (max-width:500px){
  .modal-dialog-app-width{max-width:calc(100% - 80px)}
}

.pronunciation-modal-content {
  position: relative;
  border: none;
  border-radius: var(--md-sys-shape-corner-large);
  aspect-ratio: 1 / 1;
}

.pronunciation-modal-content .modal-body {
  height: 100%;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pronunciation-modal-icon {
  font-size: 3rem;
}

.pronunciation-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  /* .modal-body do Bootstrap é position:relative e vem depois no DOM,
     então sem z-index os dois empatam no nível 0 e o modal-body (mais
     recente na ordem do documento) pinta por cima, roubando o clique
     mesmo estando visualmente "vazio" ali. */
  z-index: 1;
}

.pronunciation-modal-close:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
}

.pronunciation-modal-close .material-symbols-outlined {
  font-size: 1.2rem;
}

/* Botão "Ver significado" — cinza claro (mesmo tom do botão 1x),
   mesmo border-radius do card de pronúncia (.result-item-card), ícone
   maior alinhado à esquerda com respiro e uma linha vertical separando
   do texto (em vez de ícone+texto centralizados juntos). */
.meaning-btn {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-top: 12px;
  padding: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border: none;
  border-radius: 8px;
  font-family: 'Lato', sans-serif;
  font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
}

.meaning-btn-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
}

.meaning-btn-icon {
  font-size: 1.5rem;
}

.meaning-btn-divider {
  align-self: center;
  width: 1px;
  height: 1.5rem;
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 25%, transparent);
}

.meaning-btn-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 22px 16px;
  text-align: left;
}

/* Modal "Significado" — conteúdo variável (1 a 3 classes gramaticais,
   cada uma com traduções + definições + exemplos), então sem o
   quadrado fixo dos modais de pronúncia: altura natural com scroll
   interno quando passa da tela. */
.meaning-modal-content {
  position: relative;
  border: none;
  border-radius: var(--md-sys-shape-corner-large);
  max-height: 85vh;
}

.meaning-modal-body {
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px 24px 24px;
}

.meaning-word {
  text-align: center;
  color: var(--md-sys-color-primary);
  margin-bottom: 16px;
}

.meaning-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
}

.meaning-error {
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
  padding: 16px 0;
}

.meaning-entry {
  padding: 16px 0;
}

.meaning-entry + .meaning-entry {
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.meaning-entry-pos {
  display: inline-block;
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 3px 12px;
  margin-bottom: 10px;
}

.meaning-translations {
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  margin-bottom: 4px;
}

.meaning-multiple-note {
  font-size: var(--md-sys-typescale-body-small-size);
  font-style: italic;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 12px;
}

.meaning-definition {
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 6px;
}

.meaning-definition-en {
  font-style: italic;
}

.meaning-examples {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meaning-example {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 10px 14px;
}

.meaning-example-en {
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface);
}

.meaning-example-pt {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 2px;
}

.meaning-british {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface);
}

.meaning-british .flag-icon {
  margin-left: 0;
}

.pronunciation-success-content {
  background: #ffffff;
}

.pronunciation-success-content h5,
.pronunciation-success-content p {
  color: var(--md-extended-color-success-on-color-container);
}

/* Mesmo tamanho do título "Melhore sua pronúncia" (h4.fw-extrabold) na
   tela inicial, pra reforçar a identidade visual entre as telas. */
.pronunciation-success-content h5 {
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  font-weight: 600;
}

.pronunciation-success-illustration {
  width: 220px;
  max-width: 80%;
  margin-bottom: 8px;
}

.pronunciation-retry-illustration {
  width: 190px;
  max-width: 70%;
  margin-bottom: 4px;
}

/* Mesmo tamanho/peso do título "Melhore sua pronúncia" (h4.fw-extrabold)
   na tela inicial, igual já feito no h5 do modal de acerto. */
#pronunciation-retry-modal h5 {
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
}

/* Sem isso o quadrado 1:1 fixo do modal (herdado da base) deixa uma
   folga de centralização enorme e imprevisível abaixo do conteúdo,
   e o padding-bottom abaixo vira irrelevante perto dela. */
#pronunciation-success-modal .pronunciation-modal-content {
  aspect-ratio: auto;
}

.pronunciation-success-content .modal-body {
  padding-bottom: 32px !important;
}

.pronunciation-success-countdown {
  display: inline-block;
  min-width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--md-sys-typescale-body-small-size);
  margin-top: 16px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

/* O conteúdo do modal de erro é rico e varia de tamanho (palavra,
   quantidade de segmentos, texto da dica) — o quadrado 1:1 fixo (usado
   no modal de acerto) não escala bem aqui, então cai pra altura
   automática só nesse modal. */
#pronunciation-retry-modal .pronunciation-modal-content {
  aspect-ratio: auto;
}

.pronunciation-retry-columns {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-top: 10px;
  width: 100%;
}

.pronunciation-retry-column {
  flex: 1;
  min-width: 0;
}

.pronunciation-retry-columns-divider {
  flex: none;
  width: 1px;
  background: var(--md-sys-color-outline-variant);
}

.pronunciation-retry-label {
  display: block;
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
}

/* Palavra separada por segmento pedagógico dentro do modal de erro —
   mesma notação fonética "professor" já usada no card de pronúncia,
   cada segmento colorido pelo próprio score do Azure Pronunciation
   Assessment (lib/pronunciation_assessment.php::buildPedagogicalFeedback).
   Faixas: >=85 bom (verde), 70-84 ok (amarelo), <70 precisa de atenção
   (vermelho, sublinhado), sem fonema correspondente (cinza) — ainda
   não calibradas com falantes reais, só um ponto de partida. */
.pronunciation-retry-syllables {
  margin: 2px 0 0;
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--md-sys-color-on-surface);
}

/* "Você falou" — sem score por segmento, então fica num tom neutro
   mais discreto que a pronúncia correta (essa sim colorida). */
.pronunciation-retry-heard {
  color: var(--md-sys-color-on-surface-variant);
}

.pronunciation-retry-syllables .segment-good {
  color: var(--md-extended-color-success-color);
}

.pronunciation-retry-syllables .segment-ok {
  color: #946800;
}

.pronunciation-retry-syllables .segment-needs_work {
  color: var(--md-sys-color-error);
  text-decoration: underline;
  text-decoration-color: var(--md-sys-color-error);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.pronunciation-retry-syllables .segment-unclear {
  color: var(--md-sys-color-on-surface-variant);
}

.pronunciation-retry-tip {
  margin-top: 20px;
  margin-bottom: 0 !important;
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface);
  white-space: pre-line;
}

/* Um item por sílaba/segmento com erro (não só o pior) — cada um com o
   texto da sílaba em destaque e a dica correspondente. */
.pronunciation-retry-tips {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pronunciation-retry-tips li {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 10px 14px;
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface);
}

.pronunciation-retry-tips .pronunciation-retry-tip-segment {
  font-weight: 700;
  color: var(--md-sys-color-error);
  margin-right: 4px;
}

.pronunciation-retry-attempt-count {
  display: block;
  font-size: var(--md-sys-typescale-body-small-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 4px;
}

/* Barra mostrando o score da tentativa atual (1-100) — preenchido
   sempre verde (não muda de cor por faixa, é só "quanto você
   alcançou"), fundo cinza na mesma matriz azul da paleta M3 do app
   (--md-sys-color-surface-container-high, derivado do azul primário
   #0056d0, não um cinza neutro). Ocupa 100% da largura útil do modal,
   igual aos outros elementos (mesma margem do .modal-body). */
.pronunciation-retry-progress-wrap {
  margin-top: 24px;
  width: 100%;
}

.pronunciation-retry-progress {
  width: 100%;
  height: 16px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high);
  overflow: hidden;
}

.pronunciation-retry-progress-bar {
  height: 100%;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.pronunciation-retry-progress-label {
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
}

/* Linha com os indicadores de escala (1 e 100) nas pontas e a
   pontuação no meio, tudo na mesma linha, acima da barra. */
.pronunciation-retry-progress-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
}

.pronunciation-retry-best {
  margin-top: 8px;
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
}