/* Anki Mining — visual "Bancada". Cores só pelas variáveis dos dois temas. */

:root, :root[data-tema="claro"] {
  color-scheme: light;
  --bg: #F3F4F7; --panel: #FFFFFF; --panel2: #F8F9FB; --line: #E2E5EB;
  --text: #0F172A; --muted: #566072;
  --accent: #2152E5; --accent-ink: #FFFFFF; --accent-soft: #E9EFFE; --accent-text: #1B45C4;
  --ok: #157F4B; --ok-soft: #E6F5EC;
  --erro: #B42318; --erro-soft: #FDECEA;
  --aviso: #8A5200; --aviso-soft: #FBEFD5; --giro: #D98A00;
  --side: #0F1420; --side2: #1A2131; --side-line: #232B3D; --side-text: #E6E9F0; --side-muted: #9AA4B8;
  --side-ativa: #FFFFFF; --side-ativa-texto: #0F172A; --side-link: #A9C1FF;
  --a1: #1B45C4; --a1b: #E9EFFE; --a2: #6B32C9; --a2b: #F0E9FC;
  --b1: #157F4B; --b1b: #E6F5EC; --b2: #8A5200; --b2b: #FBEFD5;
  --shadow: 0 1px 2px rgba(15,23,42,0.06), 0 8px 24px -12px rgba(15,23,42,0.12);
  --sombra-chave: 0 1px 2px rgba(15,23,42,0.12);
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --bg: #0C0F14; --panel: #141821; --panel2: #1A1F2A; --line: #262D3A;
  --text: #E8EBF1; --muted: #9BA5B6;
  --accent: #3D6BEF; --accent-ink: #FFFFFF; --accent-soft: #18233F; --accent-text: #8FB0FF;
  --ok: #56D08C; --ok-soft: #12301F;
  --erro: #FF8A80; --erro-soft: #3A1614;
  --aviso: #F0B95A; --aviso-soft: #33260F; --giro: #F5B344;
  --side: #080A0E; --side2: #141821; --side-line: #262D3A; --side-text: #E8EBF1; --side-muted: #8C96A8;
  --side-ativa: #1D2432; --side-ativa-texto: #FFFFFF; --side-link: #A9C1FF;
  --a1: #8FB0FF; --a1b: #18233F; --a2: #C4A2F5; --a2b: #261B3C;
  --b1: #56D08C; --b1b: #12301F; --b2: #F0B95A; --b2b: #33260F;
  --shadow: 0 12px 28px -16px rgba(0,0,0,0.7);
  --sombra-chave: 0 1px 2px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px; line-height: 1.45;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.6; }
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lateral :focus-visible { outline-color: var(--side-link); }
.mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; }
[hidden] { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes pulsar { 50% { opacity: 0.45; } }
.giro {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--giro); border-top-color: transparent; animation: girar 0.8s linear infinite;
}

/* ── Estrutura ─────────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Barra lateral ─────────────────────────────────────────── */
.lateral {
  flex: 0 0 264px; width: 264px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  background: var(--side); color: var(--side-text);
  display: flex; flex-direction: column; gap: 18px; padding: 18px 14px;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 2px 6px; }
.marca-nome { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: #FFFFFF; }
.grupo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.grupo-titulo {
  display: flex; justify-content: space-between; align-items: center; padding: 0 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--side-muted);
}
.grupo-titulo .mono { letter-spacing: 0; }
.grupo-acao {
  background: none; border: 0; padding: 4px 0; font-weight: 600; letter-spacing: 0; text-transform: none;
  font-size: 12px; color: var(--side-link);
}
.grupo-acao:hover { text-decoration: underline; }
.grupo-vazio { margin: 0; padding: 0 10px; font-size: 12.5px; color: var(--side-muted); }

.sessoes { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.sessao { display: flex; align-items: center; border-radius: 8px; color: var(--side-text); }
.sessao:hover { background: var(--side2); }
.sessao.ativa { background: var(--side-ativa); color: var(--side-ativa-texto); box-shadow: inset 3px 0 0 var(--accent); }
.sessao-botao {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; text-align: left;
  height: 40px; padding: 0 4px 0 10px; background: none; border: 0; border-radius: 8px;
}
.sessao-tipo { flex: none; display: grid; place-items: center; opacity: 0.7; }
.sessao-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sessao.ativa .sessao-nome { font-weight: 700; }
.sessao-estado { flex: none; font-size: 11.5px; color: var(--side-muted); }
.sessao-estado.andando { color: var(--giro); }
.sessao-estado.escolher { color: var(--side-link); }
.sessao-estado.erro { color: #FF8A80; }
.sessao.ativa .sessao-estado.escolher { color: var(--accent-text); }
.sessao.ativa .sessao-estado.erro { color: var(--erro); }
.sessao.ativa .sessao-estado.andando { color: var(--aviso); }
.ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #1FA463; }
.ponto.erro { background: #E5484D; }
.ponto.escolher { border-radius: 2px; background: #7AA2FF; }
.ponto.fila { background: transparent; border: 1.5px solid var(--side-muted); }
.selo-enviados {
  flex: none; font-size: 11px; font-weight: 600; color: #157F4B; background: #E6F5EC; border-radius: 5px; padding: 2px 6px;
}
.sessao-fechar {
  flex: none; width: 30px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px; color: inherit; opacity: 0.45;
}
.sessao-fechar:hover, .sessao-fechar:focus-visible { opacity: 1; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px; }
.chip-depois {
  display: inline-flex; align-items: center; max-width: 100%;
  border: 1px solid var(--side-line); border-radius: 999px; font-size: 12.5px; color: var(--side-text);
}
.chip-depois button { background: none; border: 0; color: inherit; }
.chip-abrir { padding: 4px 4px 4px 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-abrir:hover { text-decoration: underline; }
.chip-tirar { padding: 4px 8px 4px 4px; opacity: 0.5; display: grid; place-items: center; }
.chip-tirar:hover, .chip-tirar:focus-visible { opacity: 1; }

.meta-cartao {
  margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--side2);
}
.meta-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--side-muted); }
.meta-numero { font-size: 13px; font-weight: 600; color: #FFFFFF; }
.meta-numero span { color: var(--side-muted); font-weight: 400; }
.meta-linha b { color: #FFFFFF; }
.barra { height: 6px; border-radius: 999px; background: var(--side-line); overflow: hidden; }
.barra-cheio { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.3s ease; }
.barra-cheio.completa { background: #1FA463; }
.conexao { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #86E0AC; }
.conexao::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #1FA463; }
.conexao.fora { color: #FFB4AB; }
.conexao.fora::before { background: #E5484D; }
.conexao.vendo { color: var(--side-muted); }
.conexao.vendo::before { background: var(--side-muted); }
.ajustes summary { font-size: 12px; color: var(--side-link); cursor: pointer; list-style: none; }
.ajustes summary::-webkit-details-marker { display: none; }
.ajustes summary:hover { text-decoration: underline; }
.ajustes-campos { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.ajustes label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--side-muted); }
.ajustes input {
  width: 110px; height: 30px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--side-line);
  background: var(--side); color: #FFFFFF; font-size: 12.5px;
}

/* ── Caixa no topo ─────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 28px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.caixa-campo {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 8px 0 14px;
  border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); cursor: text;
}
.caixa-campo:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.caixa-campo > svg { flex: none; color: var(--muted); }
.caixa-entrada {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; resize: none;
  font-size: 15px; line-height: 22px; padding: 11px 0; max-height: 154px; overflow-y: auto;
}
.caixa-entrada::placeholder { color: var(--muted); opacity: 1; }
.etiqueta-tipo {
  flex: none; font-size: 12px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft);
  border: 0; border-radius: 6px; padding: 4px 9px; white-space: nowrap;
}
.etiqueta-tipo:hover { filter: brightness(0.97); }
.dicas { flex: none; display: flex; gap: 10px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tecla {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px;
}
.topo-lado { flex: none; display: flex; align-items: center; gap: 12px; min-height: 46px; }
.gerando { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.botao {
  font-size: 13px; font-weight: 600; height: 36px; padding: 0 14px; border-radius: 8px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); white-space: nowrap;
}
.botao:hover:not(:disabled) { background: var(--panel2); }
.botao.cheio { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
.botao.cheio:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
.botao.largo { width: 100%; }
.botao-icone {
  flex: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); display: grid; place-items: center;
}
.botao-icone:hover { background: var(--panel2); }
.botao-icone.grande { width: 44px; height: 44px; border-radius: 10px; }
.botao-icone.limpo { border: 0; background: transparent; color: var(--muted); width: 34px; height: 34px; border-radius: 8px; }
.botao-icone.limpo:hover { color: var(--text); background: var(--panel2); }
.link-botao { background: none; border: 0; padding: 0 8px; height: 34px; font-size: 12.5px; color: var(--muted); text-decoration: underline; }
.link-botao:hover { color: var(--text); }

/* ── Área da sessão ────────────────────────────────────────── */
.area { flex: 1; display: flex; flex-wrap: wrap; gap: 20px; padding: 22px 28px 48px; align-items: flex-start; }
.coluna { flex: 999 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.lado { flex: 1 1 300px; max-width: 348px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; }
.painel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.painel.pad { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.painel.estreito { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.painel.corta { overflow: hidden; }
.rotulo { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }

.verbete-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.termo { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; overflow-wrap: anywhere; }
.classe { font-size: 12px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); border-radius: 6px; padding: 4px 9px; }
.ipa { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13.5px; color: var(--muted); }
.no-anki { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.no-anki.tem { color: var(--aviso); background: var(--aviso-soft); border-radius: 6px; padding: 4px 9px; font-weight: 600; }
.traducao { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.explicacao { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 70ch; }
.blocos { display: flex; flex-wrap: wrap; gap: 20px 32px; padding-top: 12px; border-top: 1px solid var(--line); }
.bloco { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 12.5px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; }
.tag-acao {
  font-size: 12.5px; font-weight: 600; color: var(--accent-text); background: var(--accent-soft);
  border: 0; border-radius: 6px; padding: 5px 10px;
}
.tag-acao:hover { filter: brightness(0.96); }
:root[data-tema="escuro"] .tag-acao:hover, :root[data-tema="escuro"] .etiqueta-tipo:hover { filter: brightness(1.25); }

.linhas-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.linhas-topo h2 { margin: 0; font-size: 14px; font-weight: 700; }
.linhas-topo span { font-size: 12px; color: var(--muted); text-align: right; }
.linha { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.linha:last-child { border-bottom: 0; }
.linha.foco { background: var(--accent-soft); }
.num {
  flex: 0 0 22px; height: 22px; display: grid; place-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px;
}
.num.vazio { border-color: transparent; }
.linha.foco .num { color: var(--accent-text); border-color: var(--accent); background: var(--panel); }
.num.feito { border: 0; color: var(--ok); }
.nivel {
  flex: 0 0 32px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600;
  text-align: center; border-radius: 5px; padding: 3px 0; color: var(--muted); background: var(--panel2);
}
.nivel.neutro { flex: none; padding: 3px 6px; }
.linha.foco .nivel.neutro { background: var(--panel); }
.nivel.a1 { color: var(--a1); background: var(--a1b); }
.nivel.a2 { color: var(--a2); background: var(--a2b); }
.nivel.b1 { color: var(--b1); background: var(--b1b); }
.nivel.b2 { color: var(--b2); background: var(--b2b); }
.frase { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 500; overflow-wrap: anywhere; }
.frase b { color: var(--accent-text); font-weight: 700; }
.frase-pt, .frase-nota { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.frase-nota { font-style: italic; }
.frase-falha { display: block; font-size: 12.5px; font-weight: 500; color: var(--erro); margin-top: 3px; }
.linha.enviada .frase { color: var(--muted); }
.linha.enviada .frase b { color: inherit; }
.linha-acoes { flex: none; display: flex; align-items: center; gap: 4px; }
.no-anki-selo { font-size: 12.5px; font-weight: 600; color: var(--ok); white-space: nowrap; }
.linha .botao { height: 34px; }
.linha.foco .botao-icone.limpo { color: var(--text); }
.sua-frase { display: flex; align-items: center; gap: 12px; padding: 8px 18px; background: var(--panel2); }
.sua-frase span { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sua-frase input { flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; font-size: 14.5px; }
.sua-frase input::placeholder { color: var(--muted); opacity: 1; }
.recolhe > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; cursor: pointer;
  list-style: none; font-size: 14px; font-weight: 700;
}
.recolhe > summary::-webkit-details-marker { display: none; }
.recolhe > summary::after { content: 'abrir'; font-size: 12px; font-weight: 500; color: var(--muted); }
.recolhe[open] > summary { border-bottom: 1px solid var(--line); }
.recolhe[open] > summary::after { content: 'fechar'; }
.recolhe > summary small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 8px; }
.recolhe-corpo { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }

/* ── Painel do card ────────────────────────────────────────── */
.card-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-topo b { font-size: 13px; }
.card-topo label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.card-imagem { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; background: var(--panel2); }
.card-vazio {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; border: 1px dashed var(--line); background: var(--panel2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px;
  text-align: center; font-size: 12.5px; color: var(--muted);
}
.card-vazio.erro { color: var(--erro); }
.card-vazio .giro { width: 18px; height: 18px; }
.previa { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.previa > div { padding: 14px; font-size: 15px; overflow-wrap: anywhere; }
.previa > div + div { background: var(--panel2); border-top: 1px dashed var(--line); }
.previa .rotulo { display: block; margin-bottom: 6px; }
.previa small { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ── Estados da sessão ─────────────────────────────────────── */
.centro { flex: 1; min-width: 0; display: flex; justify-content: center; padding: 6vh 0; }
.centro-caixa { max-width: 560px; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.centro-caixa h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.centro-caixa p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.atalhos { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--muted); }
.atalhos .tecla { margin-right: 4px; }
.andamento { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.andamento .giro { width: 14px; height: 14px; }
.esqueleto { display: flex; flex-direction: column; gap: 10px; }
.esqueleto i { display: block; height: 14px; border-radius: 6px; background: var(--line); animation: pulsar 1.4s ease-in-out infinite; }
.esqueleto i:nth-child(1) { height: 40px; width: 45%; }
.esqueleto i:nth-child(2) { width: 70%; }
.esqueleto i:nth-child(3) { width: 90%; }
.esqueleto i:nth-child(4) { width: 60%; }
.opcoes { display: flex; flex-direction: column; }
.opcao {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 18px;
  background: none; border: 0; border-bottom: 1px solid var(--line);
}
.opcao:last-child { border-bottom: 0; }
.opcao:hover, .opcao:focus-visible { background: var(--accent-soft); }
.opcao-termo { font-size: 16px; font-weight: 700; }
.opcao-dica { flex: 1; min-width: 0; font-size: 13.5px; color: var(--muted); }
.erro-caixa {
  border: 1px solid var(--erro); background: var(--erro-soft); color: var(--text); border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.erro-caixa b { color: var(--erro); }

/* ── Texto ─────────────────────────────────────────────────── */
.citacao { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.citacao.longa { font-size: 15.5px; font-weight: 500; line-height: 1.6; max-height: 260px; overflow-y: auto; }
.alvo { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.alvo:last-child { border-bottom: 0; }
.alvo-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.alvo-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.alvo-termo { font-size: 15.5px; font-weight: 700; }
.alvo-tipo { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.alvo-ja { font-size: 11px; font-weight: 700; color: var(--ok); background: var(--ok-soft); border-radius: 5px; padding: 2px 6px; }
.alvo-trad { font-size: 14px; }
.alvo-expl, .alvo-frase { font-size: 13px; color: var(--muted); }
.alvo-frase { font-style: italic; }
.alvo-acoes { flex: none; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ── Pronúncia ─────────────────────────────────────────────── */
.silabas { font-size: 22px; font-weight: 600; letter-spacing: 0.01em; }
.silabas b { color: var(--accent-text); font-weight: 800; }
.silabas i { font-style: normal; color: var(--muted); margin: 0 4px; }
.fila-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.fonema {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; min-width: 38px; height: 38px; padding: 0 8px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
}
.fonema[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.boca { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.boca svg { flex: none; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); }
.boca p { flex: 1; min-width: 180px; margin: 0; font-size: 13.5px; color: var(--muted); }
.dica { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.55; }
.dica::before {
  content: 'BR'; flex: none; align-self: flex-start; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 600;
  color: var(--b1); background: var(--b1b); border-radius: 5px; padding: 2px 6px; margin-top: 2px;
}
.pares { display: flex; flex-direction: column; gap: 8px; }
.par { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.par .ipa { font-size: 12px; }
.par small { flex: 1 1 100%; font-size: 12.5px; color: var(--muted); }
.palavra-som { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 4px 2px; font-weight: 700; }
.palavra-som:hover { color: var(--accent-text); }

/* ── Avisos ────────────────────────────────────────────────── */
.avisos { position: fixed; right: 20px; bottom: 20px; z-index: 20; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.aviso {
  pointer-events: auto; max-width: 360px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px;
  background: var(--text); color: var(--bg); box-shadow: var(--shadow);
}
.aviso.erro { background: var(--erro); color: #FFFFFF; }
:root[data-tema="escuro"] .aviso.erro { color: #1B0B0A; }

/* ── Telas estreitas ───────────────────────────────────────── */
@media (max-width: 1180px) {
  .dicas { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .giro, .esqueleto i { animation-duration: 2.4s; }
  .barra-cheio { transition: none; }
}

/* ── Segunda entrega ───────────────────────────────────────── */
.chave { display: flex; padding: 3px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); }
.chave button {
  font-size: 12px; font-weight: 600; height: 26px; padding: 0 10px; border-radius: 6px;
  background: transparent; color: var(--muted); border: 0; white-space: nowrap;
}
.chave button[aria-pressed="true"] { background: var(--panel); color: var(--text); font-weight: 700; box-shadow: var(--sombra-chave); }
.chave.grande { border-radius: 10px; padding: 4px; }
.chave.grande button { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 7px; }
.caixa-campo.soltar { border-color: var(--accent); background: var(--accent-soft); }
.caixa-campo .botao-icone.limpo { flex: none; }
.previa small + b { display: inline-block; margin-top: 8px; }
.previa-nota { margin: 0; font-size: 12.5px; color: var(--aviso); }
.nova { text-decoration: none; border-bottom: 2px dotted var(--b2); cursor: help; }
.i1 { font-size: 11px; font-weight: 700; color: var(--ok); background: var(--ok-soft); border-radius: 5px; padding: 2px 6px; margin-left: 8px; white-space: nowrap; }
.frase-antes { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-bottom: 2px; }
.vs { font-size: 0.5em; font-weight: 600; letter-spacing: 0; color: var(--muted); vertical-align: middle; margin: 0 6px; }
.termo.pequeno { font-size: 26px; letter-spacing: -0.02em; }
.lados { display: flex; flex-wrap: wrap; gap: 12px; }
.lado-comp { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); }
.lado-termo { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.errado { margin: 4px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.errado s { color: var(--erro); }
.errado span { color: var(--ok); font-weight: 600; }
.bloco.largo { flex: 1 1 100%; }
.reescrito { color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.frase-exemplo { font-size: 14px; color: var(--text); }
.frase-exemplo b { color: var(--accent-text); }
.rodape-lista { display: flex; justify-content: center; padding: 14px 18px; background: var(--panel2); }
.marca-caixa { flex: 0 0 22px; width: 18px; height: 18px; margin: 0 2px; accent-color: var(--accent); }
.marca-todas { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.marca-todas input { width: 18px; height: 18px; accent-color: var(--accent); }
label.linha { cursor: pointer; }

.botao.com-icone { display: inline-flex; align-items: center; gap: 8px; }
.topo-lado .botao.cheio { height: 44px; border-radius: 10px; padding: 0 16px; }
/* Com o botão de PDF na barra sobra menos espaço para a caixa: as dicas de tecla saem e o texto de exemplo não quebra. */
.com-pdf .dicas { display: none; }
.caixa-entrada::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Celular e telas estreitas: a ordem muda. Marca fina, caixa, faixa de sessões presa no
   topo, conteúdo; Ver depois e a meta do dia vão para o fim. A barra lateral e a área
   principal "se desfazem" (display: contents) para os blocos poderem ser reordenados. */
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .lateral, .principal { display: contents; }
  .marca { order: 1; background: var(--side); padding: 10px 14px; }
  .marca svg { width: 22px; height: 22px; }
  .marca-nome { font-size: 15px; }

  .topo { order: 2; position: static; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .caixa-campo { flex-basis: 100%; min-height: 48px; }
  .caixa-entrada { font-size: 16px; }                 /* abaixo de 16px o iPhone dá zoom ao focar */
  .topo-lado { flex: 1 1 100%; min-height: 0; gap: 8px; justify-content: flex-start; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .topo-lado::-webkit-scrollbar { display: none; }
  .topo-lado > * { flex: none; }
  .topo-lado .botao, .topo-lado .botao.cheio { height: 40px; border-radius: 10px; padding: 0 14px; }
  .topo-lado .botao-icone.grande { width: 40px; height: 40px; margin-left: auto; }
  .chave.grande button { height: 30px; padding: 0 10px; }

  #sessoes { order: 3; position: sticky; top: 0; z-index: 6; background: var(--side); padding: 8px 12px; }
  #sessoes:not(:has(.sessoes)) { display: none; }
  #sessoes .grupo-titulo { display: none; }
  .sessoes { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .sessoes::-webkit-scrollbar { display: none; }
  .sessao { flex: none; max-width: 230px; background: var(--side2); }
  .sessao-botao { height: 38px; }
  .sessao-fechar { height: 38px; width: 34px; opacity: 0.7; }
  .sessao-estado, .sessao-tipo { display: none; }

  .area { order: 4; padding: 12px 12px 28px; gap: 12px; }
  .lado { position: static; max-width: none; flex-basis: 100%; }
  .painel { border-radius: 12px; }
  .painel.pad { padding: 16px 14px; }
  .termo { font-size: 30px; }
  .termo.pequeno { font-size: 20px; overflow-wrap: anywhere; }
  .traducao { font-size: 18px; }
  .no-anki { margin-left: 0; }
  .centro { padding: 3vh 4px; }
  .centro-caixa h1 { font-size: 22px; }
  .atalhos { display: none; }                         /* atalhos de teclado não servem no toque */

  #depois { order: 5; background: var(--side); color: var(--side-text); padding: 14px 12px 6px; }
  #depois .grupo-titulo, #depois .grupo-vazio { padding: 0 2px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 0 6px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip-depois { flex: none; max-width: 220px; }
  .chip-abrir { padding: 8px 4px 8px 12px; }
  .chip-tirar { padding: 8px 10px 8px 6px; }
  #meta { order: 6; margin: 0; border-radius: 0; background: var(--side); padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); }
  .ajustes input { font-size: 16px; height: 36px; }

  /* Linhas de frase: a frase ocupa a largura toda e as ações ficam embaixo, com alvo de toque maior. */
  .linhas-topo, .recolhe > summary, .alvo, .sua-frase { padding-left: 14px; padding-right: 14px; }
  .linhas-topo { flex-wrap: wrap; row-gap: 4px; }
  .linhas-topo span { text-align: left; }
  .linha { flex-wrap: wrap; padding: 12px 14px; gap: 8px 10px; }
  .linha .num:not(.feito) { display: none; }          /* número é atalho de teclado */
  .linha .frase { flex: 1 1 60%; font-size: 16px; }
  .linha-acoes { flex-basis: 100%; justify-content: flex-end; gap: 8px; }
  .linha .botao, .alvo .botao, .lado .botao, .erro-caixa .botao, .centro-caixa .botao { height: 42px; padding: 0 16px; font-size: 14px; }
  .linha .botao-icone.limpo { width: 42px; height: 42px; }
  .link-botao { height: 42px; font-size: 13.5px; }
  label.linha { flex-wrap: nowrap; align-items: flex-start; }
  label.linha .linha-acoes { flex-basis: auto; }
  .marca-caixa, .marca-todas input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
  .sua-frase { flex-wrap: wrap; row-gap: 0; padding-top: 10px; }
  .sua-frase input { flex-basis: 100%; height: 44px; font-size: 16px; }
  .alvo { flex-direction: column; }
  .alvo-acoes { justify-content: flex-start; }
  .lados { flex-direction: column; }
  .lado-comp { flex-basis: auto; }
  .opcao { flex-wrap: wrap; padding: 14px; }
  .opcao-dica { flex-basis: 100%; }
  .fonema { min-width: 44px; height: 44px; }
  .chave button { height: 32px; }

  .grupo-acao { padding: 10px 0 10px 12px; font-size: 13px; }
  .ajustes summary { padding: 10px 0; font-size: 13px; }
  .tag-acao { padding: 9px 12px; font-size: 13.5px; }
  .tag { padding: 6px 10px; }
  .card-topo label { padding: 8px 0; }
  .card-topo input[type="checkbox"] { width: 20px; height: 20px; }
  .palavra-som { padding: 10px 4px; }
  .so-teclado { display: none; }
  .avisos { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); align-items: stretch; }
  .aviso { max-width: none; }
}