:root,
[data-tema="claro"] {
  --mesa-fundo: #15100d;
  --mesa-brilho-topo: rgba(180, 112, 48, 0.22);
  --mesa-brilho-base: rgba(0, 0, 0, 0.65);

  --papel: #faf5eb;
  --papel-suave: #f2eadb;
  --papel-forte: #e8decb;
  --card: #fffdf9;
  --card-hover: #ffffff;

  --tinta: #211a14;
  --tinta-suave: #4a3d31;
  --mudo: #665748;

  --borda: #ded3be;
  --borda-forte: #c6b69b;
  --sombra-moldura: 0 28px 70px rgba(7, 5, 3, 0.62), 0 2px 0 rgba(255, 255, 255, 0.7) inset;
  --sombra-card: 0 2px 8px rgba(33, 26, 20, 0.05), 0 1px 2px rgba(33, 26, 20, 0.04);
  --sombra-card-hover: 0 8px 22px rgba(33, 26, 20, 0.09), 0 2px 4px rgba(33, 26, 20, 0.05);

  --destaque: #9b1c2c;
  --destaque-hover: #7d1522;
  --destaque-texto: #fffaf4;
  --destaque-suave: rgba(155, 28, 44, 0.09);

  --cta-bg: #9b1c2c;
  --cta-hover: #7d1522;
  --cta-texto: #fffaf4;

  --ouro: #7d5310;
  --ouro-suave: rgba(161, 110, 29, 0.12);
  --ouro-borda: rgba(145, 98, 22, 0.36);

  --crime: #9b1c2c;
  --crime-tinta: #fffaf5;
  --crime-fundo: rgba(155, 28, 44, 0.08);
  --medio: #9a4406;
  --medio-fundo: rgba(180, 83, 9, 0.09);
  --leve: #156551;
  --leve-tinta: #fffaf5;
  --leve-fundo: rgba(21, 101, 81, 0.09);

  --input-bg: #fffefb;
  --chip-bg: #efe6d5;
  --filete-interno: rgba(155, 28, 44, 0.16);
  color-scheme: light;
}

[data-tema="escuro"] {
  --mesa-fundo: #080b11;
  --mesa-brilho-topo: rgba(224, 159, 62, 0.13);
  --mesa-brilho-base: rgba(0, 0, 0, 0.75);

  --papel: #111621;
  --papel-suave: #171e2d;
  --papel-forte: #1f283b;
  --card: #161d2b;
  --card-hover: #1b2436;

  --tinta: #f1ece2;
  --tinta-suave: #cbc3b5;
  --mudo: #93a1ba;

  --borda: #253046;
  --borda-forte: #344463;
  --sombra-moldura: 0 30px 80px rgba(0, 0, 0, 0.72), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --sombra-card: 0 3px 10px rgba(0, 0, 0, 0.25);
  --sombra-card-hover: 0 10px 26px rgba(0, 0, 0, 0.38);

  --destaque: #e5a93c;
  --destaque-hover: #f2bc57;
  --destaque-texto: #141821;
  --destaque-suave: rgba(229, 169, 60, 0.13);

  --cta-bg: #be263a;
  --cta-hover: #d62f45;
  --cta-texto: #fff8f6;

  --ouro: #e5a93c;
  --ouro-suave: rgba(229, 169, 60, 0.12);
  --ouro-borda: rgba(229, 169, 60, 0.32);

  --crime: #fb7185;
  --crime-tinta: #2a0610;
  --crime-fundo: rgba(251, 113, 133, 0.13);
  --medio: #fbbf24;
  --medio-fundo: rgba(251, 191, 36, 0.13);
  --leve: #34d399;
  --leve-tinta: #05261c;
  --leve-fundo: rgba(52, 211, 153, 0.13);

  --input-bg: #0f141e;
  --chip-bg: #20293d;
  --filete-interno: rgba(229, 169, 60, 0.14);
  color-scheme: dark;
}

*, *::before, *::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--cta-bg);
  color: var(--cta-texto);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--tinta);
  font-family: Literata, Georgia, Palatino, "Palatino Linotype", serif;
  line-height: 1.55;
  background:
    radial-gradient(980px 440px at 50% -8%, var(--mesa-brilho-topo), transparent 62%),
    radial-gradient(1200px 760px at 50% 115%, var(--mesa-brilho-base), transparent 58%),
    var(--mesa-fundo);
  transition: background-color 0.22s ease, color 0.22s ease;
}

.moldura {
  position: relative;
  max-width: 1080px;
  margin: 1.8rem auto 2.8rem;
  padding: 1.35rem 2.4rem 1.8rem;
  background: var(--papel);
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  box-shadow: var(--sombra-moldura);
  transition: background-color 0.22s ease, border-color 0.22s ease;
}

.moldura::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--filete-interno);
  border-radius: 3px;
  pointer-events: none;
}

/* Barra utilitária superior */
.topo-util {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--borda);
}

.status-plantao,
.controles-topo,
.plantao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.pilula-status,
.pilula-vigia,
.usuario-chip,
.btn-util {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.34rem 0.65rem;
  min-height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--papel-suave);
  color: var(--tinta-suave);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  text-decoration: none;
  line-height: 1.2;
}

.btn-util {
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-util:hover:not(:disabled) {
  background: var(--card);
  border-color: var(--borda-forte);
  color: var(--tinta);
}

.btn-discord {
  background: var(--card);
  color: var(--tinta);
  border-color: var(--borda-forte);
  font-weight: 600;
}

.btn-discord:hover {
  background: #5865f2;
  border-color: #5865f2;
  color: #ffffff;
}

.btn-util svg,
.pilula-vigia svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mudo);
  flex-shrink: 0;
}

.ponto.online,
.pilula-vigia.ativa .ponto {
  background: var(--leve);
  box-shadow: 0 0 0 3px var(--leve-fundo);
}

.pilula-vigia.ativa {
  border-color: var(--leve);
  background: var(--leve-fundo);
  color: var(--leve);
  font-weight: 600;
}

button.pilula-vigia {
  cursor: pointer;
}

button.pilula-vigia:not(.ativa):hover:not(:disabled) {
  background: var(--card);
  color: var(--tinta);
  border-color: var(--borda-forte);
}

button.pilula-vigia.ativa:hover:not(:disabled) {
  background: var(--leve-fundo);
  color: var(--leve);
  border-color: var(--leve);
  filter: brightness(1.06);
}

.usuario-chip strong {
  color: var(--tinta);
  font-weight: 600;
}

.usuario-chip em {
  font-style: normal;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  background: var(--ouro-suave);
  border: 1px solid var(--ouro-borda);
  color: var(--ouro);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Cabeçalho Editorial */
.cabecalho {
  text-align: center;
  padding: 0.25rem 0 0.35rem;
}

.brasao-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: 13rem;
  margin: 0 auto 0.45rem;
}

.brasao-linha .traco {
  flex: 1;
  height: 1px;
  background: var(--borda-forte);
}

.selo-topo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-texto);
  font-family: Fraunces, Georgia, serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.edicao {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mudo);
}

h1 {
  margin: 0.35rem 0 0;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 0.96;
}

.link-titulo {
  color: var(--tinta);
  text-decoration: none;
  transition: color 0.15s ease;
}

.link-titulo:hover {
  color: var(--destaque);
}

.filete {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 12rem;
  margin: 0.75rem auto 0.6rem;
}

.filete::before,
.filete::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borda-forte);
}

.filete span {
  width: 7px;
  height: 7px;
  background: var(--ouro-suave);
  border: 1.5px solid var(--ouro);
  transform: rotate(45deg);
}

.epigrafe {
  margin: 0 auto;
  max-width: 36rem;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--tinta-suave);
}

/* Barra de Navegação + CTA */
.barra-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 1.25rem 0 1.35rem;
  padding: 0.5rem 0.6rem;
  background: var(--papel-suave);
  border: 1px solid var(--borda);
  border-radius: 8px;
  scroll-margin-top: 0.75rem;
}

.abas-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.abas-menu a {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--tinta-suave);
  text-decoration: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.46rem 0.68rem;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.abas-menu a svg {
  width: 15px;
  height: 15px;
  opacity: 0.82;
  flex-shrink: 0;
}

.abas-menu a:hover {
  color: var(--tinta);
  background: var(--card);
}

.abas-menu a.ativo {
  color: var(--destaque-texto);
  background: var(--destaque);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}

.abas-menu a.ativo svg {
  opacity: 1;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.05rem 0.38rem;
  border-radius: 999px;
  background: var(--papel-forte);
  color: var(--tinta-suave);
  font-size: 0.66rem;
  font-weight: 700;
}

.nav-badge:empty {
  display: none;
}

.abas-menu a.ativo .nav-badge {
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
}

.cta-registrar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  background: var(--cta-bg);
  color: var(--cta-texto);
  border: 1px solid transparent;
  text-decoration: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(155, 28, 44, 0.26);
  transition: background-color 0.15s ease, transform 0.12s ease;
}

.cta-registrar:hover {
  background: var(--cta-hover);
  color: var(--cta-texto);
}

.cta-registrar.ativo {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
}

/* Toast de Notificação */
.aviso-toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: min(26rem, calc(100vw - 2rem));
  padding: 0.75rem 0.95rem;
  border-radius: 8px;
  background: var(--card);
  color: var(--tinta);
  border: 1px solid var(--borda-forte);
  border-left: 4px solid var(--destaque);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  animation: subirToast 0.2s ease-out;
}

.aviso-toast.erro {
  border-left-color: var(--crime);
}

.aviso-toast.sucesso {
  border-left-color: var(--leve);
}

.aviso-toast button {
  padding: 0.15rem 0.42rem;
  min-width: auto;
  background: transparent;
  color: var(--mudo);
  border: 1px solid transparent;
  font-size: 0.95rem;
  line-height: 1;
}

.aviso-toast button:hover:not(:disabled) {
  background: var(--papel-suave);
  color: var(--tinta);
  border-color: var(--borda);
}

@keyframes subirToast {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Elementos base e formulários (baixa especificidade via :where) */
.kicker {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mudo);
}

main h2 {
  margin: 0.2rem 0 0.55rem;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.65rem, 2.8vw, 2.15rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.topo-secao {
  margin-bottom: 1.1rem;
}

.topo-secao p.subtitulo {
  margin: 0.25rem 0 0;
  color: var(--tinta-suave);
  font-size: 0.96rem;
}

label,
.rotulo {
  display: block;
  margin: 0.85rem 0 0.32rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

:where(input, textarea, select, button) {
  font: inherit;
  color: var(--tinta);
}

:where(input:not([type="radio"]):not([type="checkbox"]), textarea, select) {
  width: 100%;
  padding: 0.68rem 0.8rem;
  background: var(--input-bg);
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:where(input:not([type="radio"]):not([type="checkbox"]), textarea, select):focus {
  outline: none;
  border-color: var(--destaque);
  box-shadow: 0 0 0 3px var(--destaque-suave);
}

textarea {
  resize: vertical;
  min-height: 6.5rem;
}

button,
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.62rem 0.95rem;
  background: var(--cta-bg);
  color: var(--cta-texto);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

button:hover:not(:disabled),
.botao:hover {
  background: var(--cta-hover);
  color: var(--cta-texto);
}

button:active:not(:disabled),
.botao:active {
  transform: translateY(1px);
}

button.secundario,
a.botao.secundario {
  background: var(--card);
  color: var(--tinta);
  border-color: var(--borda-forte);
}

button.secundario:hover:not(:disabled),
a.botao.secundario:hover {
  background: var(--papel-suave);
  border-color: var(--destaque);
  color: var(--destaque);
}

button.perigo {
  background: var(--crime-fundo);
  color: var(--crime);
  border-color: var(--crime);
}

button.perigo:hover:not(:disabled) {
  background: var(--crime);
  color: var(--crime-tinta);
}

button.btn-fantasma {
  background: transparent;
  color: var(--tinta-suave);
  border-color: var(--borda);
  padding: 0.44rem 0.7rem;
  font-size: 0.72rem;
}

button.btn-fantasma:hover:not(:disabled) {
  background: var(--papel-suave);
  color: var(--tinta);
  border-color: var(--borda-forte);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 2px;
}

/* Carimbo de Gravidade */
.selo {
  display: inline-flex;
  align-items: center;
  padding: 0.26rem 0.52rem;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--medio);
  background: var(--medio-fundo);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transform: rotate(-3.5deg);
  white-space: nowrap;
  flex-shrink: 0;
}

.selo.leve {
  color: var(--leve);
  background: var(--leve-fundo);
}

.selo.medio {
  color: var(--medio);
  background: var(--medio-fundo);
}

.selo.crime {
  color: var(--crime);
  background: var(--crime-fundo);
}

/* ==========================================
   ABA 1: DICIONÁRIO
   ========================================== */
.hero-dicionario {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.card-do-dia,
.card-recentes {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.15rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 8px;
  box-shadow: var(--sombra-card);
}

.card-do-dia {
  background:
    linear-gradient(135deg, var(--ouro-suave), transparent 65%),
    var(--card);
  border-color: var(--ouro-borda);
}

.topo-do-dia,
.topo-recentes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}

.topo-do-dia .kicker {
  color: var(--ouro);
}

.palavra-destaque {
  margin: 0.15rem 0 0;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.85rem, 3.2vw, 2.45rem);
  font-weight: 700;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.palavra-destaque a {
  color: var(--destaque);
  text-decoration: none;
}

.palavra-destaque a:hover {
  text-decoration: underline;
}

.traducao-destaque {
  margin: 0.35rem 0 0;
  font-size: 1.08rem;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.seta {
  color: var(--mudo);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.classe-pill {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--papel-suave);
  border: 1px solid var(--borda);
  color: var(--mudo);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-style: normal;
  font-size: 0.68rem;
  vertical-align: middle;
}

.citacao {
  margin: 0.65rem 0 0;
  padding: 0.45rem 0.75rem;
  border-left: 3px solid var(--ouro);
  background: var(--papel-suave);
  border-radius: 0 4px 4px 0;
  color: var(--tinta-suave);
  font-style: italic;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.etimologia-curta {
  margin: 0.6rem 0 0;
  color: var(--tinta-suave);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.rodape-do-dia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--borda);
}

.meta-curta,
.resumo-mini {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--mudo);
}

.acoes-curtas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.btn-link {
  color: var(--destaque);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

.lista-recentes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.item-recente a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.52rem 0.68rem;
  border-radius: 6px;
  background: var(--papel-suave);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--medio);
  text-decoration: none;
  color: var(--tinta);
  transition: background-color 0.15s ease, transform 0.12s ease;
}

.item-recente.crime a { border-left-color: var(--crime); }
.item-recente.medio a { border-left-color: var(--medio); }
.item-recente.leve a { border-left-color: var(--leve); }

.item-recente a:hover {
  background: var(--card-hover);
  border-color: var(--borda-forte);
  transform: translateX(2px);
}

.par-recente {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.93rem;
}

.par-recente strong {
  font-family: Fraunces, Georgia, serif;
  color: var(--destaque);
  font-weight: 650;
}

.par-recente .trad-mini {
  color: var(--tinta-suave);
}

.item-recente .quando {
  flex-shrink: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  color: var(--mudo);
}

/* Barra de Busca e Filtros */
.painel-busca {
  padding: 0.95rem 1.05rem;
  margin-bottom: 1.1rem;
  background: var(--papel-suave);
  border: 1px solid var(--borda);
  border-radius: 8px;
}

.linha-busca {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
}

.campo-busca {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.campo-busca svg {
  position: absolute;
  left: 0.85rem;
  width: 17px;
  height: 17px;
  color: var(--mudo);
  pointer-events: none;
}

.campo-busca input {
  padding-left: 2.55rem;
  padding-right: 2.35rem;
}

.btn-limpar-input {
  position: absolute;
  right: 0.4rem;
  padding: 0.2rem 0.5rem;
  background: transparent;
  color: var(--mudo);
  border: none;
  font-size: 1.1rem;
  line-height: 1;
}

.btn-limpar-input:hover:not(:disabled) {
  background: var(--papel-forte);
  color: var(--tinta);
}

.linha-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.pills-grau {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pill-filtro {
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  background: var(--card);
  color: var(--tinta-suave);
  border: 1px solid var(--borda);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
}

.pill-filtro:hover:not(:disabled) {
  background: var(--card-hover);
  color: var(--tinta);
  border-color: var(--borda-forte);
}

.pill-filtro.ativo,
.pill-filtro.ativo:hover:not(:disabled) {
  background: var(--destaque);
  color: var(--destaque-texto);
  border-color: var(--destaque);
  font-weight: 700;
}

.btn-limpar-filtros {
  padding: 0.28rem 0.6rem;
  background: transparent;
  color: var(--destaque);
  border: 1px dashed var(--destaque);
  border-radius: 999px;
  font-size: 0.69rem;
}

.btn-limpar-filtros:hover:not(:disabled) {
  background: var(--destaque-suave);
  color: var(--destaque);
}

.letras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
  margin-top: 0.65rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--borda);
}

.letras button {
  min-width: 1.82rem;
  padding: 0.28rem 0.32rem;
  border-radius: 4px;
  background: transparent;
  color: var(--tinta);
  border: 1px solid transparent;
  font-size: 0.73rem;
}

.letras button:hover:not(:disabled) {
  background: var(--card);
  color: var(--destaque);
  border-color: var(--borda);
}

.letras button.ativo,
.letras button.ativo:hover:not(:disabled) {
  background: var(--destaque);
  color: var(--destaque-texto);
  border-color: var(--destaque);
}

.letras button.vazio {
  opacity: 0.35;
}

/* Grade de Verbetes em 2 Colunas */
.cabecalho-resultados {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.contagem {
  margin: 0;
  color: var(--mudo);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.76rem;
}

.grade-verbetes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: stretch;
}

.verbete {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.05rem 1.15rem;
  background: var(--card);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--medio);
  border-radius: 8px;
  box-shadow: var(--sombra-card);
  scroll-margin-top: 1.2rem;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.verbete.crime { border-left-color: var(--crime); }
.verbete.medio { border-left-color: var(--medio); }
.verbete.leve { border-left-color: var(--leve); }

.verbete:hover {
  box-shadow: var(--sombra-card-hover);
  border-color: var(--borda-forte);
  border-left-width: 4px;
}

.verbete.crime:hover { border-left-color: var(--crime); }
.verbete.medio:hover { border-left-color: var(--medio); }
.verbete.leve:hover { border-left-color: var(--leve); }

.verbete.aberto {
  grid-column: 1 / -1;
  background: var(--card-hover);
  border-color: var(--borda-forte);
  box-shadow: var(--sombra-card-hover);
}

.topo-verbete {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: flex-start;
}

.cabeca-bloco {
  min-width: 0;
}

.cabeca {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
}

.cabeca a,
.cabeca-preview {
  color: var(--destaque);
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-decoration: none;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.cabeca a:hover {
  text-decoration: underline;
}

.pagina {
  color: var(--mudo);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 500;
}

.definicao {
  margin: 0.32rem 0 0;
  font-size: 1.02rem;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.exemplo {
  margin: 0.6rem 0 0;
  padding: 0.42rem 0.7rem;
  background: var(--papel-suave);
  border-left: 2px solid var(--borda-forte);
  border-radius: 0 4px 4px 0;
  color: var(--tinta-suave);
  font-style: italic;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.etimologia-preview {
  margin: 0.55rem 0 0;
  color: var(--mudo);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rodape-verbete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-top: 0.85rem;
  padding-top: 0.68rem;
  border-top: 1px solid var(--borda);
}

.chips-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.67rem;
  color: var(--mudo);
}

.chip-auto,
.chip-test {
  padding: 0.15rem 0.44rem;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--tinta-suave);
  max-width: 10.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acoes-card {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.btn-falou {
  padding: 0.32rem 0.55rem;
  border-radius: 6px;
  background: var(--papel-suave);
  color: var(--tinta);
  border: 1px solid var(--borda-forte);
  font-size: 0.69rem;
  text-transform: none;
  letter-spacing: 0.01em;
}

.btn-falou:hover:not(:disabled) {
  background: var(--destaque);
  color: var(--destaque-texto);
  border-color: var(--destaque);
}

.btn-abrir {
  padding: 0.32rem 0.52rem;
  border-radius: 6px;
  background: transparent;
  color: var(--mudo);
  border: 1px solid var(--borda);
  font-size: 0.68rem;
}

.btn-abrir:hover:not(:disabled) {
  background: var(--papel-suave);
  color: var(--tinta);
  border-color: var(--borda-forte);
}

/* Gaveta expandida do Auto */
.miolo {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--borda-forte);
}

.grade-auto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.85rem;
}

.bloco-auto {
  min-width: 0;
  padding: 0.75rem 0.9rem;
  border-radius: 6px;
  background: var(--papel-suave);
  border: 1px solid var(--borda);
}

.bloco-auto p,
.bloco-auto blockquote {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.bloco-auto blockquote {
  font-style: italic;
}

.mudo-italico {
  color: var(--mudo) !important;
  font-style: italic;
}

.bloco-testemunhas {
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 6px;
  background: var(--papel-suave);
  border: 1px solid var(--borda);
}

.lista-assinaturas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin-top: 0.42rem;
}

.assinatura-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.58rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--borda);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.assinatura-chip.autor {
  border-color: var(--ouro-borda);
  background: var(--ouro-suave);
  color: var(--ouro);
  font-weight: 600;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
  align-items: center;
}

.form-testemunha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  flex: 1;
}

.form-testemunha input {
  width: min(100%, 17.5rem);
  padding: 0.54rem 0.75rem;
}

.gaveta-retificar {
  margin-top: 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--borda);
  background: var(--papel);
}

.gaveta-retificar summary {
  cursor: pointer;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.gaveta-retificar[open] summary {
  margin-bottom: 0.6rem;
  color: var(--destaque);
}

.grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem 1rem;
}

.largo {
  grid-column: 1 / -1;
}

.estado-vazio {
  padding: 2.2rem 1.4rem;
  text-align: center;
  background: var(--card);
  border: 1px dashed var(--borda-forte);
  border-radius: 8px;
}

.estado-vazio p {
  margin: 0.35rem auto 0.9rem;
  max-width: 28rem;
  color: var(--tinta-suave);
}

/* ==========================================
   ABA 2: TRADUTOR LADO A LADO
   ========================================== */
.barra-direcao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  padding: 0.65rem 0.8rem;
  background: var(--papel-suave);
  border: 1px solid var(--borda);
  border-radius: 8px;
}

.seletor-sentido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.seletor-sentido button.sentido {
  background: var(--card);
  color: var(--tinta-suave);
  border-color: var(--borda);
  padding: 0.48rem 0.78rem;
}

.seletor-sentido button.sentido:not(.ativo):hover:not(:disabled) {
  background: var(--papel-forte);
  color: var(--tinta);
  border-color: var(--borda-forte);
}

.seletor-sentido button.sentido.ativo,
.seletor-sentido button.sentido.ativo:hover:not(:disabled) {
  background: var(--destaque);
  color: var(--destaque-texto);
  border-color: var(--destaque);
}

.btn-inverter {
  padding: 0.46rem 0.65rem;
  background: var(--card);
  color: var(--tinta);
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
}

.btn-inverter:hover:not(:disabled) {
  background: var(--ouro-suave);
  border-color: var(--ouro);
  color: var(--ouro);
}

.painel-tradutor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.caixa-tradutor {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 8px;
  box-shadow: var(--sombra-card);
  overflow: hidden;
}

.caixa-tradutor form {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cabecalho-caixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.68rem 0.95rem;
  background: var(--papel-suave);
  border-bottom: 1px solid var(--borda);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.mono-suave {
  font-weight: 400;
  color: var(--mudo);
}

.caixa-tradutor textarea {
  flex: 1;
  min-height: 11.5rem;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0.95rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

.caixa-tradutor textarea:focus {
  box-shadow: inset 0 0 0 2px var(--destaque-suave);
}

.rodape-caixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.95rem;
  border-top: 1px solid var(--borda);
  background: var(--papel-suave);
}

.dica-atalho {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--mudo);
}

.corpo-saida {
  flex: 1;
  padding: 0.95rem;
  min-height: 11.5rem;
}

.texto-traduzido {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.texto-vazio {
  margin: 0;
  color: var(--mudo);
  font-style: italic;
}

.grifo-troca {
  padding: 0.08rem 0.32rem;
  border-radius: 4px;
  background: var(--ouro-suave);
  border-bottom: 2px solid var(--ouro);
  color: var(--tinta);
  font-weight: 650;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.grifo-troca:hover {
  background: var(--destaque);
  color: var(--destaque-texto);
  border-bottom-color: transparent;
}

.trocas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trocas li a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--borda-forte);
  color: var(--tinta);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.73rem;
  text-decoration: none;
}

.trocas li a:hover {
  border-color: var(--destaque);
  color: var(--destaque);
}

/* ==========================================
   ABA 3: RANKING E PLACAR
   ========================================== */
.resumo-estatisticas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}

.stat-card {
  padding: 0.85rem 0.95rem;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 8px;
  box-shadow: var(--sombra-card);
}

.stat-card strong {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--destaque);
}

.stat-card span {
  display: block;
  margin-top: 0.2rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mudo);
}

.ranking {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.95rem;
  align-items: start;
}

.coluna {
  min-width: 0;
  padding: 1.05rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 8px;
  box-shadow: var(--sombra-card);
}

.coluna h2 {
  margin: 0;
  font-size: 1.38rem;
}

.coluna .sub-coluna {
  margin: 0.15rem 0 0.75rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.69rem;
  color: var(--mudo);
}

.coluna ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.coluna li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--borda);
}

.linha-rank {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.esq-rank {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  min-width: 0;
}

.pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--papel-suave);
  border: 1px solid var(--borda);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mudo);
  flex-shrink: 0;
}

.pos.pos-1 {
  background: var(--ouro-suave);
  border-color: var(--ouro);
  color: var(--ouro);
}

.pos.pos-2 {
  background: var(--destaque-suave);
  border-color: var(--destaque);
  color: var(--destaque);
}

.pos.pos-3 {
  background: var(--medio-fundo);
  border-color: var(--medio);
  color: var(--medio);
}

.nome-rank {
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coluna a {
  color: var(--tinta);
  text-decoration: none;
}

.coluna a:hover {
  color: var(--destaque);
  text-decoration: underline;
}

.valor-rank {
  flex-shrink: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--mudo);
}

.barra-rank {
  height: 4px;
  margin-top: 0.38rem;
  margin-left: 2.03rem;
  border-radius: 999px;
  background: var(--papel-suave);
  overflow: hidden;
}

.barra-rank span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--destaque);
}

/* ==========================================
   ABA 4: QUIZ / PROVA ORAL
   ========================================== */
.card-prova {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.4rem 1.6rem;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 10px;
  box-shadow: var(--sombra-card);
}

.topo-prova {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.55rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  color: var(--mudo);
}

.placar-parcial {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--ouro-suave);
  border: 1px solid var(--ouro-borda);
  color: var(--ouro);
  font-weight: 700;
}

.trilha-progresso {
  height: 6px;
  border-radius: 999px;
  background: var(--papel-suave);
  overflow: hidden;
  margin-bottom: 1.2rem;
}

.barra-progresso {
  height: 100%;
  background: var(--destaque);
  transition: width 0.25s ease;
}

.enunciado-prova {
  padding: 1rem 1.15rem;
  border-radius: 8px;
  background: var(--papel-suave);
  border: 1px solid var(--borda);
}

.enunciado-prova h2 {
  margin: 0.2rem 0 0;
  color: var(--destaque);
  overflow-wrap: anywhere;
}

.opcoes {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}

.opcoes button {
  justify-content: flex-start;
  text-align: left;
  padding: 0.75rem 0.9rem;
  text-transform: none;
  letter-spacing: 0;
  font-family: Literata, Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--borda-forte);
}

.opcoes button:hover:not(:disabled) {
  background: var(--papel-suave);
  border-color: var(--destaque);
  color: var(--tinta);
}

.letra-opcao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 5px;
  background: var(--card);
  border: 1px solid var(--borda-forte);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tinta-suave);
  flex-shrink: 0;
}

.texto-opcao {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.opcoes button.certa {
  background: var(--leve-fundo);
  border-color: var(--leve);
  color: var(--tinta);
  opacity: 1;
}

.opcoes button.certa .letra-opcao {
  background: var(--leve);
  border-color: var(--leve);
  color: var(--leve-tinta);
}

.opcoes button.errada {
  background: var(--crime-fundo);
  border-color: var(--crime);
  color: var(--tinta);
  opacity: 1;
}

.opcoes button.errada .letra-opcao {
  background: var(--crime);
  border-color: var(--crime);
  color: var(--crime-tinta);
}

.feedback-prova {
  margin-top: 0.95rem;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  border-left: 4px solid var(--leve);
  background: var(--leve-fundo);
}

.feedback-prova.erro {
  border-left-color: var(--crime);
  background: var(--crime-fundo);
}

.feedback-prova p {
  margin: 0;
  overflow-wrap: anywhere;
}

.feedback-prova .meta {
  margin-top: 0.3rem;
  font-size: 0.88rem;
  color: var(--tinta-suave);
}

.nota-gigante {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 750;
  color: var(--destaque);
  line-height: 1;
  margin: 0.25rem 0;
}

.titulo-grau {
  margin: 0.45rem 0 0;
  color: var(--ouro);
  font-family: Fraunces, Georgia, serif;
  font-size: 1.45rem;
  font-weight: 650;
}

/* ==========================================
   ABA 5: DIPLOMA ORNAMENTAL
   ========================================== */
.barra-diploma {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1.15rem;
  padding: 0.9rem 1.05rem;
  background: var(--papel-suave);
  border: 1px solid var(--borda);
  border-radius: 8px;
}

.barra-diploma form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem;
  flex: 1;
}

.barra-diploma label {
  margin-top: 0;
}

.barra-diploma input {
  width: min(100%, 17.5rem);
}

.diploma {
  position: relative;
  padding: 2.3rem 2.2rem 2rem;
  text-align: center;
  background:
    radial-gradient(600px 300px at 50% 0%, var(--ouro-suave), transparent 70%),
    var(--card);
  border: 2px solid var(--ouro);
  outline: 1px solid var(--borda-forte);
  outline-offset: -9px;
  border-radius: 6px;
  box-shadow: var(--sombra-card);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.canto {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--ouro);
  border-style: solid;
  pointer-events: none;
}

.canto.ce { top: 14px; left: 14px; border-width: 2px 0 0 2px; }
.canto.cd { top: 14px; right: 14px; border-width: 2px 2px 0 0; }
.canto.be { bottom: 14px; left: 14px; border-width: 0 0 2px 2px; }
.canto.bd { bottom: 14px; right: 14px; border-width: 0 2px 2px 0; }

.diploma h2 {
  margin: 0.25rem 0 0.6rem;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  font-weight: 700;
}

.texto-outorga {
  max-width: 36rem;
  margin: 0 auto;
  font-size: 1.06rem;
  color: var(--tinta-suave);
}

.texto-outorga strong {
  color: var(--tinta);
  font-size: 1.18rem;
  overflow-wrap: anywhere;
}

.diploma .titulo-grau {
  margin: 0.85rem auto;
  padding: 0.55rem 1.1rem;
  max-width: 31rem;
  background: var(--ouro-suave);
  border-top: 1px solid var(--ouro-borda);
  border-bottom: 1px solid var(--ouro-borda);
  color: var(--destaque);
}

.rodape-diploma {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.6rem;
  padding-top: 1rem;
}

.coluna-assinatura {
  font-size: 0.85rem;
  color: var(--mudo);
}

.linha-assinatura {
  margin: 0 auto 0.3rem;
  max-width: 12rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--borda-forte);
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--tinta);
}

.lacre {
  width: 88px;
  height: 88px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #7f1422;
  background: radial-gradient(circle at 32% 28%, #c92a3e, #9b1c2c 58%, #5e0d18);
  color: #fffaf0;
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  transform: rotate(7deg);
  box-shadow:
    inset 0 0 0 4px rgba(255, 238, 204, 0.35),
    0 8px 18px rgba(0, 0, 0, 0.28);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ==========================================
   ABA 6: NOVO VERBETE + PREVIEW AO VIVO
   ========================================== */
.layout-registro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: 1.25rem;
  align-items: start;
}

.painel-form {
  min-width: 0;
  padding: 1.2rem 1.3rem;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 8px;
  box-shadow: var(--sombra-card);
}

.seletor-gravidade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.opcao-grau {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  margin: 0;
  padding: 0.6rem 0.68rem;
  border-radius: 6px;
  background: var(--papel-suave);
  border: 1.5px solid var(--borda);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.opcao-grau:focus-within {
  outline: 2px solid var(--destaque);
  outline-offset: 2px;
}

.opcao-grau input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.opcao-grau strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.opcao-grau small {
  font-family: Literata, Georgia, serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--mudo);
  line-height: 1.25;
}

.opcao-grau.leve.selecionado,
.opcao-grau.leve:has(input:checked) {
  border-color: var(--leve);
  background: var(--leve-fundo);
}
.opcao-grau.leve strong { color: var(--leve); }

.opcao-grau.medio.selecionado,
.opcao-grau.medio:has(input:checked) {
  border-color: var(--medio);
  background: var(--medio-fundo);
}
.opcao-grau.medio strong { color: var(--medio); }

.opcao-grau.crime.selecionado,
.opcao-grau.crime:has(input:checked) {
  border-color: var(--crime);
  background: var(--crime-fundo);
}
.opcao-grau.crime strong { color: var(--crime); }

.painel-preview {
  min-width: 0;
  position: sticky;
  top: 1.2rem;
  padding: 1.05rem 1.15rem;
  background: var(--papel-suave);
  border: 1px dashed var(--borda-forte);
  border-radius: 8px;
}

.painel-preview .verbete {
  margin-top: 0.55rem;
}

/* ==========================================
   ABA 7: BOT DA CALL
   ========================================== */
.painel-status-bot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}

.card-bot-info {
  min-width: 0;
  padding: 1.05rem 1.15rem;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 8px;
  box-shadow: var(--sombra-card);
}

.card-bot-info h3 {
  margin: 0.2rem 0 0.35rem;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.25rem;
}

.card-bot-info p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--tinta-suave);
}

.grade-comandos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.65rem;
  margin-bottom: 1.25rem;
}

.card-comando {
  min-width: 0;
  padding: 0.8rem 0.95rem;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 8px;
}

.card-comando.restrito {
  border-left: 3px solid var(--ouro);
}

.topo-comando {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.topo-comando code {
  padding: 0.18rem 0.48rem;
  border-radius: 4px;
  background: var(--destaque-suave);
  color: var(--destaque);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 700;
}

.tag-acesso {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  text-transform: uppercase;
  color: var(--mudo);
}

.tag-acesso.admin {
  color: var(--ouro);
  font-weight: 700;
}

.card-comando p {
  margin: 0.38rem 0 0;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

/* Rodapé */
.rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borda);
  color: var(--mudo);
  font-size: 0.88rem;
}

.rodape-esq {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.rodape-esq strong {
  color: var(--tinta-suave);
  font-family: Fraunces, Georgia, serif;
}

.rodape-dir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.74rem;
}

.rodape-dir a {
  color: var(--tinta-suave);
  text-decoration: none;
}

.rodape-dir a:hover {
  color: var(--destaque);
  text-decoration: underline;
}

/* Responsividade */
@media (max-width: 880px) {
  .moldura {
    margin: 0.65rem;
    padding: 1.1rem 1.15rem 1.3rem;
  }
  .hero-dicionario,
  .grade-verbetes,
  .painel-tradutor,
  .ranking,
  .layout-registro,
  .painel-status-bot,
  .grade-comandos,
  .grade-auto {
    grid-template-columns: 1fr;
  }
  .resumo-estatisticas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .painel-preview {
    position: static;
  }
  .rodape-diploma {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  .moldura {
    margin: 0.35rem;
    padding: 0.95rem 0.85rem 1.1rem;
  }
  .moldura::before {
    inset: 5px;
  }
  .barra-menu {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-registrar {
    justify-content: center;
  }
  .linha-busca {
    flex-direction: column;
  }
  .grade,
  .seletor-gravidade,
  .resumo-estatisticas {
    grid-template-columns: 1fr;
  }
  .topo-verbete {
    flex-direction: column;
  }
  .form-testemunha input,
  .barra-diploma input {
    width: 100%;
  }
  .selo {
    transform: none;
  }
  .card-prova {
    padding: 1.1rem 1rem;
  }
  .diploma {
    padding: 1.5rem 1rem;
  }
}

/* Impressão limpa em papel claro sempre (mesmo acionada do modo escuro) */
@media print {
  :root,
  [data-tema="escuro"],
  [data-tema="claro"] {
    --papel: #ffffff;
    --papel-suave: #f7f4ed;
    --papel-forte: #ebe4d5;
    --card: #ffffff;
    --card-hover: #ffffff;
    --tinta: #1c1611;
    --tinta-suave: #3d332a;
    --mudo: #5c5044;
    --borda: #d4c9b4;
    --borda-forte: #b5a68c;
    --destaque: #8c1927;
    --destaque-texto: #ffffff;
    --destaque-suave: rgba(140, 25, 39, 0.08);
    --ouro: #7d5310;
    --ouro-suave: rgba(143, 96, 22, 0.08);
    --ouro-borda: rgba(143, 96, 22, 0.45);
    --crime: #8c1927;
    --crime-tinta: #ffffff;
    --crime-fundo: rgba(140, 25, 39, 0.07);
    --medio: #8f3e05;
    --medio-fundo: rgba(143, 62, 5, 0.07);
    --leve: #145e4b;
    --leve-tinta: #ffffff;
    --leve-fundo: rgba(20, 94, 75, 0.07);
    --input-bg: #ffffff;
    --chip-bg: #f3ede0;
    color-scheme: light;
  }
  body {
    background: #ffffff !important;
    color: #1c1611 !important;
  }
  body[data-view="certificado"] .cabecalho {
    display: none !important;
  }
  .moldura {
    margin: 0;
    padding: 0.4rem;
    max-width: none;
    border: none;
    box-shadow: none;
    background: #ffffff !important;
  }
  .moldura::before,
  .no-print,
  .acoes,
  .acoes-card,
  .painel-busca,
  .hero-dicionario,
  .gaveta-retificar {
    display: none !important;
  }
  .diploma {
    box-shadow: none;
    page-break-inside: avoid;
  }
  .lacre {
    background: #fff8f6 !important;
    color: #8c1927 !important;
    border: 3px double #8c1927 !important;
    box-shadow: none !important;
  }
}