/*
	wnEsc — paineis battlepass, roleta misteriosa e ranking.
	Usa os tokens --sr-* do css.css; o dourado marca a trilha premium.
*/

:root {
  /* paleta vermelho / branco / preto: o "ouro" (premium, lendario) virou
     branco e o epico, vermelho vivo */
  --wn-ouro: #ffffff;
  --wn-ouro-fundo: rgba(255, 255, 255, .08);
  --wn-ouro-linha: rgba(255, 255, 255, .45);
  --wn-verde: #ffffff;
  --wn-epico: #ff3b4c;
}

.container-roleta,
.container-ranking {
  width: 100%;
  height: 700px;
  margin-top: 40px;
}

/* em telas baixas (ex.: 1366x768) o painel nao passa da borda: rola por dentro */
.container-battlepass,
.container-roleta,
.container-ranking {
  max-height: calc(100vh - 270px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  box-sizing: border-box;
}

/* ---- Imagem de recompensa (compartilhada) ------------------------------- */

.wn-recompensa-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.wn-recompensa-icone {
  font-size: 26px;
  color: var(--sr-accent);
}

/* ---- Toast -------------------------------------------------------------- */

.wn-toast {
  position: fixed;
  left: 50%;
  bottom: 60px;
  transform: translate(-50%, 20px);
  padding: 12px 22px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(10, 12, 15, .95);
  color: #fff;
  font-weight: 700;
  letter-spacing: .5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 9999;
}

.wn-toast.visivel {
  opacity: 1;
  transform: translate(-50%, 0);
}

.wn-toast.erro {
  border-color: rgba(255, 120, 132, .5);
}

/* ---- BATTLEPASS --------------------------------------------------------- */

.bp-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 25px;
}

.bp-temporada {
  font-size: 14px;
  color: var(--sr-text-dim);
  font-weight: 600;
}

.bp-temporada i {
  color: var(--sr-accent);
  margin-right: 4px;
}

.bp-topo-direita {
  display: flex;
  gap: 12px;
}

.bp-horas,
.bp-premium-ativo,
.bp-comprar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  padding: 8px 18px;
  border-radius: 5px;
  border: 1px solid var(--sr-line);
  background: var(--sr-surface);
}

.bp-horas-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--sr-text-dim);
}

.bp-horas-valor {
  font-size: 20px;
  font-weight: 800;
  color: var(--sr-accent);
}

.bp-premium-ativo {
  border-color: var(--wn-ouro-linha);
  background: var(--wn-ouro-fundo);
}

.bp-premium-ativo-valor {
  font-size: 20px;
  font-weight: 800;
  color: var(--wn-ouro);
}

.bp-comprar {
  cursor: pointer;
  border-color: var(--wn-ouro-linha);
  background: linear-gradient(180deg, #ffffff 0%, #cfcfd4 100%);
  color: #0a0a0a;
  transition: filter 150ms ease, transform 150ms ease;
}

.bp-comprar:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

.bp-comprar.desabilitado {
  opacity: .45;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.bp-comprar-titulo {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

.bp-comprar-preco {
  font-size: 16px;
  font-weight: 800;
}

.bp-progresso {
  margin-top: 18px;
}

.bp-progresso-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--sr-text-dim);
  margin-bottom: 6px;
}

.bp-progresso-barra {
  height: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.bp-progresso-preenchido {
  height: 100%;
  width: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--sr-accent) 0%, var(--wn-ouro) 100%);
  transition: width 400ms ease;
}

.bp-trilhas {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.bp-rotulos,
.bp-coluna {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.bp-rotulo {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
}

.bp-rotulo-premium,
.bp-rotulo-free,
.bp-celula {
  height: 150px;
}

.bp-rotulo-nivel,
.bp-nivel {
  height: 54px;
}

.bp-rotulo-premium {
  color: var(--wn-ouro);
  background: var(--wn-ouro-fundo);
}

.bp-rotulo-nivel {
  color: var(--sr-text-dim);
}

.bp-rotulo-free {
  color: var(--sr-accent);
  background: rgba(225, 29, 47, .1);
}

.bp-niveis {
  flex: 1;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
}

.bp-coluna {
  width: 140px;
}

.bp-celula {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--sr-line);
  background: var(--sr-surface);
  overflow: hidden;
}

.bp-celula-vazia {
  border-style: dashed;
  background: rgba(255, 255, 255, .015);
}

.bp-celula.liberado {
  border-color: rgba(225, 29, 47, .5);
  background: rgba(225, 29, 47, .1);
}

.bp-celula.liberado-premium {
  border-color: var(--wn-ouro-linha);
  background: var(--wn-ouro-fundo);
}

.bp-celula.resgatado {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .04);
}

.bp-celula-img {
  height: 56px;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-celula.apagado .bp-celula-img {
  opacity: .4;
}

.bp-celula-label {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
}

.bp-celula.apagado .bp-celula-label {
  color: rgba(255, 255, 255, .4);
}

.bp-celula-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, .55);
  font-size: 18px;
  color: rgba(255, 255, 255, .6);
}

.bp-celula-overlay.resgatado {
  font-size: 13px;
  font-weight: 800;
  color: var(--wn-verde);
}

.bp-resgatar {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  padding: 5px 0;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  color: #fff;
  background: var(--sr-primary);
  transition: filter 150ms ease;
}

.bp-resgatar.premium {
  color: #0a0a0a;
  background: linear-gradient(180deg, #ffffff 0%, #cfcfd4 100%);
}

.bp-resgatar:hover {
  filter: brightness(1.15);
}

.bp-nivel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid var(--sr-line);
  background: var(--sr-surface);
}

.bp-nivel b {
  font-size: 16px;
  color: rgba(255, 255, 255, .5);
}

.bp-nivel span {
  font-size: 11px;
  color: var(--sr-text-faint);
}

.bp-nivel.alcancado {
  border-color: rgba(225, 29, 47, .55);
  background: rgba(225, 29, 47, .15);
}

.bp-nivel.alcancado b {
  color: #fff;
}

/* ---- ROLETA ------------------------------------------------------------- */

.rl-saldo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 5px;
  border: 1px solid var(--sr-line);
  background: var(--sr-surface);
  font-size: 18px;
  font-weight: 800;
  text-transform: none;
}

.rl-saldo i {
  color: var(--sr-accent);
  font-size: 16px;
}

.rl-saldo small {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--sr-text-dim);
}

/* sem altura fixa: o rolo cresce com os cards e nunca os corta */
.rl-viewport {
  position: relative;
  padding: 18px 0;
  margin-top: 24px;
  border-radius: 5px;
  border: 1px solid var(--sr-line);
  background: rgba(0, 0, 0, .35);
  overflow: hidden;
}

.rl-mascara {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 160px;
  z-index: 2;
  pointer-events: none;
}

.rl-mascara-esquerda {
  left: 0;
  background: linear-gradient(to right, rgba(6, 7, 9, .95) 0%, transparent 100%);
}

.rl-mascara-direita {
  right: 0;
  background: linear-gradient(to left, rgba(6, 7, 9, .95) 0%, transparent 100%);
}

.rl-marcador {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: var(--sr-accent);
  box-shadow: 0 0 12px rgba(225, 29, 47, .8);
  z-index: 3;
}

.rl-marcador::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid var(--sr-accent);
}

.rl-track {
  position: relative;
  display: flex;
  width: max-content;
  gap: 12px;
  will-change: transform;
}

.rl-card {
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: var(--sr-surface);
}

.rl-card-img {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-card-label {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
}

.rl-card.rar-raro,
.rl-chip.rar-raro { border-color: rgba(225, 29, 47, .55); }
.rl-card.rar-epico,
.rl-chip.rar-epico { border-color: rgba(255, 59, 76, .8); }
.rl-card.rar-lendario,
.rl-chip.rar-lendario {
  border-color: var(--wn-ouro-linha);
  background: var(--wn-ouro-fundo);
}

.rl-resultado {
  margin-top: 16px;
  padding: 12px;
  border-radius: 5px;
  border: 1px solid var(--sr-line);
  background: var(--sr-surface);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

.rl-resultado span {
  font-weight: 800;
}

.rl-resultado small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--sr-text-dim);
}

.rl-resultado.rar-raro span { color: #ff5252; }
.rl-resultado.rar-epico span { color: var(--wn-epico); }
.rl-resultado.rar-lendario span { color: var(--wn-ouro); }
.rl-resultado.erro { border-color: rgba(255, 120, 132, .5); color: #ff8a95; }

.rl-girar {
  width: 320px;
  height: 52px;
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 120, 132, .35);
  background: var(--sr-primary);
  box-shadow: 0 8px 30px rgba(190, 22, 44, .35);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 150ms ease, transform 150ms ease;
}

.rl-girar:hover {
  filter: brightness(1.18);
  transform: translateY(-2px);
}

.rl-girar.desabilitado {
  opacity: .45;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.rl-premios {
  margin-top: 20px;
}

.rl-premios-titulo {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--sr-text-dim);
  margin-bottom: 10px;
}

.rl-premios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  max-height: 132px;
  overflow-y: auto;
  padding-right: 6px;
}

.rl-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid var(--sr-line);
  background: var(--sr-surface);
  font-size: 13px;
  font-weight: 700;
}

.rl-chip-img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-chip-img .wn-recompensa-icone {
  font-size: 18px;
}

/* ---- RANKING ------------------------------------------------------------ */

.rk-abas {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}

.rk-aba {
  flex: 1;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid var(--sr-line);
  background: var(--sr-surface);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.rk-aba:hover {
  background: var(--sr-surface-hover);
}

.rk-aba.active {
  border-color: rgba(255, 120, 132, .35);
  background: var(--sr-surface-active);
}

.rk-reset {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 20px;
  margin: 14px 0 10px;
  font-size: 13px;
  color: var(--sr-text-dim);
  font-weight: 600;
}

.rk-reset-tempo {
  margin-left: auto;
}

.rk-reset-tempo i {
  color: var(--sr-accent);
  margin-right: 4px;
}

.rk-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 6px;
}

.rk-item {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 46px;
  flex-shrink: 0;
  padding: 0 18px;
  border-radius: 5px;
  border: 1px solid var(--sr-line);
  background: var(--sr-surface);
}

.rk-item:nth-child(1) { border-color: rgba(225, 29, 47, .7); background: rgba(225, 29, 47, .08); }
.rk-item:nth-child(2) { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .05); }
.rk-item:nth-child(3) { border-color: rgba(140, 140, 146, .6); background: rgba(140, 140, 146, .04); }

.rk-pos {
  width: 40px;
  font-size: 18px;
  font-weight: 800;
  color: var(--sr-text-dim);
}

.rk-item:nth-child(1) .rk-pos { color: #ff3b4c; }
.rk-item:nth-child(2) .rk-pos { color: #ffffff; }
.rk-item:nth-child(3) .rk-pos { color: #9a9aa0; }

.rk-nome {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rk-valor {
  font-size: 15px;
  font-weight: 800;
  color: var(--sr-accent);
}

.rk-vazio {
  padding: 40px 0;
  text-align: center;
  color: var(--sr-text-dim);
  font-weight: 600;
}

/* ---- LOJA VIP (site da loja dentro do ESC) ------------------------------ */

.hub .container-loja {
  width: 100%;
  height: 100%;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  box-sizing: border-box;
}

.loja-navegador {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.loja-navegador:hover {
  color: #fff;
  border-color: rgba(225, 29, 47, .7);
  background: rgba(225, 29, 47, .16);
}

.loja-moldura {
  flex: 1 1 auto;
  min-height: 0;
}

.loja-inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .04);
  background: #0b0b0d;
}

#loja-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0b0b0d;
}

.loja-carregando {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #0b0b0d;
  color: rgba(255, 255, 255, .6);
  font-size: 15px;
  font-weight: 600;
}

.loja-carregando i {
  color: #e11d2f;
}


/* ---- REGRAS DA CIDADE (Configuracoes > Regras da Cidade) ---------------- */

.hub .container-regras {
  width: 100%;
  height: 100%;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  box-sizing: border-box;
}

.rg-busca {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 360px;
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  text-transform: none;
  letter-spacing: normal;
  transition: border-color 150ms ease, background 150ms ease;
}

.rg-busca:focus-within {
  border-color: rgba(225, 29, 47, .7);
  background: rgba(255, 255, 255, .06);
}

.rg-busca > i {
  color: #e11d2f;
  font-size: 14px;
}

.rg-busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-family: "Montserrat", "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.rg-busca input::placeholder {
  color: rgba(255, 255, 255, .35);
}

.rg-busca-limpar {
  display: none;
  color: rgba(255, 255, 255, .45);
  cursor: pointer;
  font-size: 14px;
}

.rg-busca-limpar:hover {
  color: #fff;
}

.rg-corpo {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
}

.rg-lateral-moldura,
.rg-leitor-moldura {
  min-height: 0;
}

.rg-lateral,
.rg-leitor {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .04);
  background: linear-gradient(180deg, #19191c 0%, #121214 100%);
  font-family: "Montserrat", "Segoe UI", sans-serif;
}

.rg-lateral::-webkit-scrollbar,
.rg-leitor::-webkit-scrollbar { width: 6px; }
.rg-lateral::-webkit-scrollbar-thumb,
.rg-leitor::-webkit-scrollbar-thumb { background: rgba(225, 29, 47, .35); border-radius: 6px; }

/* menu lateral */
.rg-lateral {
  padding: 8px 10px 14px;
}

.rg-cat-titulo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 10px 6px;
  color: rgba(255, 255, 255, .45);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.rg-cat-titulo i {
  color: #e11d2f;
  font-size: 13px;
}

.rg-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
}

.rg-item.nivel-1 { padding-left: 24px; }
.rg-item.nivel-2 { padding-left: 38px; font-size: 13.5px; }
.rg-item.nivel-3 { padding-left: 52px; font-size: 13px; color: rgba(255, 255, 255, .6); }

.rg-item:hover {
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

.rg-item.active {
  background: rgba(225, 29, 47, .16);
  color: #fff;
  box-shadow: inset 3px 0 0 #e11d2f;
}

.rg-item-cont:empty {
  display: none;
}

.rg-item-cont {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 10px;
  background: #e11d2f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.rg-lateral.buscando .rg-item.sem-resultado {
  opacity: .32;
}

.rg-fonte {
  margin: 18px 10px 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .3);
  font-size: 11.5px;
  line-height: 1.5;
}

/* leitor */
.rg-leitor {
  padding: 26px 36px 30px;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.65;
}

.rg-pagina-topo {
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.rg-trilha {
  color: #e11d2f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.rg-pagina-titulo {
  margin: 6px 0 0;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
}

.rg-conteudo h2,
.rg-conteudo h3,
.rg-conteudo h4,
.rg-conteudo h5,
.rg-conteudo h6 {
  margin: 24px 0 8px;
  color: #fff;
  line-height: 1.35;
}

.rg-conteudo h2 { font-size: 21px; }
.rg-conteudo h3 { font-size: 18px; }
.rg-conteudo h4 { font-size: 16.5px; }
.rg-conteudo h5,
.rg-conteudo h6 { font-size: 15px; }

.rg-conteudo p {
  margin: 8px 0;
}

.rg-conteudo strong,
.rg-conteudo b {
  color: #fff;
}

.rg-conteudo ul,
.rg-conteudo ol {
  margin: 8px 0;
  padding-left: 22px;
}

.rg-conteudo li {
  margin: 10px 0;
}

.rg-conteudo li::marker {
  color: #e11d2f;
}

.rg-conteudo .rg-centro {
  text-align: center;
}

.rg-conteudo blockquote {
  margin: 12px 0;
  padding: 10px 16px;
  border-left: 3px solid #e11d2f;
  border-radius: 0 6px 6px 0;
  background: rgba(225, 29, 47, .07);
}

.rg-conteudo hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.rg-conteudo img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px auto;
  border-radius: 8px;
}

.rg-conteudo figure { margin: 0; }
.rg-conteudo figcaption:empty { display: none; }

/* cores do GitBook (<mark>) na paleta do ESC */
.rg-mark.rg-info { color: #f2a7ae; }
.rg-mark.rg-perigo { color: #ff3b4c; font-weight: 700; }
.rg-mark.rg-aviso { color: #ffffff; font-weight: 700; }
.rg-mark.rg-destaque { color: #e11d2f; font-weight: 700; }

.rg-link {
  color: #ff5a68;
  text-decoration: underline;
  cursor: pointer;
}

/* termo pesquisado e trecho de destino */
mark.rg-achado {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(225, 29, 47, .4);
  color: #fff;
}

.rg-alvo {
  border-radius: 6px;
  animation: rg-alvo 2.4s ease;
}

@keyframes rg-alvo {
  0%, 35% { background: rgba(225, 29, 47, .22); box-shadow: 0 0 0 6px rgba(225, 29, 47, .22); }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}

/* anterior / proxima */
.rg-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.rg-nav-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.rg-nav-btn:hover {
  border-color: rgba(225, 29, 47, .7);
  background: rgba(225, 29, 47, .1);
}

.rg-nav-btn i { color: #e11d2f; }

.rg-nav-btn small {
  display: block;
  color: rgba(255, 255, 255, .4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.rg-nav-prox {
  justify-content: flex-end;
  text-align: right;
}

/* resultados da pesquisa */
.rg-res-grupo {
  margin: 20px 0 6px;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
}

.rg-res-grupo i { color: #e11d2f; }
.rg-res-grupo b { color: #fff; }

.rg-res {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .02);
  font-size: 14px;
  line-height: 1.55;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.rg-res:hover {
  border-color: rgba(225, 29, 47, .6);
  background: rgba(225, 29, 47, .07);
}

.rg-vazio {
  padding: 40px 10px;
  color: rgba(255, 255, 255, .45);
  text-align: center;
}

.rg-vazio i {
  display: block;
  margin-bottom: 12px;
  color: #e11d2f;
  font-size: 28px;
}


/* ---- Regras: abas de modo, acoes do dev, editor e assistente ------------- */

.rg-modos {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  text-transform: none;
  letter-spacing: normal;
}

.rg-modo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  color: rgba(255, 255, 255, .55);
  font-family: "Montserrat", "Segoe UI", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.rg-modo:hover { color: #fff; }

.rg-modo.active {
  background: #e11d2f;
  color: #fff;
  box-shadow: 0 4px 14px rgba(225, 29, 47, .35);
}

.rg-topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rg-acoes {
  display: flex;
  gap: 8px;
}

.rg-acao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .75);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.rg-acao:hover {
  color: #fff;
  border-color: rgba(225, 29, 47, .7);
  background: rgba(225, 29, 47, .12);
}

.rg-acao-perigo.confirmar {
  color: #fff;
  border-color: #e11d2f;
  background: #e11d2f;
}

/* editor */
.rg-editor-titulo {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  outline: none;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
}

.rg-editor-titulo:focus,
.rg-editor:focus,
.rg-form input:focus,
.rg-form select:focus {
  border-color: rgba(225, 29, 47, .7);
}

.rg-barra {
  position: sticky;
  top: -26px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #19191c;
}

.rg-ferramenta {
  width: 34px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  cursor: pointer;
}

.rg-ferramenta:hover {
  color: #fff;
  background: rgba(225, 29, 47, .2);
}

.rg-sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: rgba(255, 255, 255, .1);
}

.rg-editor {
  min-height: 320px;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .2);
  outline: none;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

.rg-editor * {
  user-select: text;
  -webkit-user-select: text;
}

.rg-editor-rodape {
  position: sticky;
  bottom: -30px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 0 4px;
  background: #121214;
}

.rg-editor-status {
  flex: 1;
  color: rgba(255, 255, 255, .45);
  font-size: 13px;
}

.rg-editor-status.erro {
  color: #ff5a68;
  font-weight: 600;
}

.rg-botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 7px;
  border: 1px solid rgba(255, 120, 132, .35);
  background: linear-gradient(180deg, #c0102a 0%, #6f0917 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 150ms ease;
}

.rg-botao:hover { filter: brightness(1.15); }
.rg-botao.ocupado { opacity: .5; pointer-events: none; }

.rg-botao-sec {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
}

/* formulario de nova pagina */
.rg-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rg-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: rgba(255, 255, 255, .55);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.rg-form label:first-child { grid-column: 1 / -1; }

.rg-form input,
.rg-form select {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  outline: none;
  background: #19191c;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  text-transform: none;
}

.rg-form-dica {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(255, 255, 255, .45);
  font-size: 13px;
}

/* assistente */
.ia-tela {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ia-tela .rg-pagina-topo { flex: 0 0 auto; }

.ia-modo {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, .45);
  font-size: 13px;
}

.ia-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 4px 12px 0;
}

.ia-log::-webkit-scrollbar { width: 6px; }
.ia-log::-webkit-scrollbar-thumb { background: rgba(225, 29, 47, .35); border-radius: 6px; }

.ia-bolha {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.55;
}

.ia-bolha p { margin: 0 0 8px; }
.ia-bolha p:last-child { margin-bottom: 0; }
.ia-bolha ul { margin: 6px 0 8px; padding-left: 20px; }
.ia-bolha li::marker { color: #e11d2f; }
.ia-bolha b { color: #fff; }

.ia-eu {
  align-self: flex-end;
  border-bottom-right-radius: 3px;
  background: #e11d2f;
  color: #fff;
}

.ia-bot {
  align-self: flex-start;
  border-bottom-left-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .85);
}

.ia-digitando {
  display: flex;
  gap: 5px;
}

.ia-digitando i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e11d2f;
  animation: ia-ponto 1s ease-in-out infinite;
}

.ia-digitando i:nth-child(2) { animation-delay: .15s; }
.ia-digitando i:nth-child(3) { animation-delay: .3s; }

@keyframes ia-ponto {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

.ia-boasvindas {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
}

.ia-boasvindas > i {
  margin-bottom: 6px;
  color: #e11d2f;
  font-size: 34px;
}

.ia-boasvindas b { color: #fff; font-size: 18px; }
.ia-boasvindas > span { color: rgba(255, 255, 255, .5); font-size: 14px; }

.ia-sugestoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.ia-sugestao {
  padding: 8px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.ia-sugestao:hover {
  border-color: rgba(225, 29, 47, .7);
  background: rgba(225, 29, 47, .12);
}

.ia-entrada {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.ia-entrada input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  outline: none;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
}

.ia-entrada input:focus { border-color: rgba(225, 29, 47, .7); }

.ia-enviar {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #e11d2f;
  color: #fff;
  cursor: pointer;
  transition: filter 150ms ease;
}

.ia-enviar:hover { filter: brightness(1.15); }

.ia-cartao {
  margin: 8px 0;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(0, 0, 0, .2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 150ms ease;
}

.ia-cartao:hover { border-color: rgba(225, 29, 47, .7); }

.ia-cartao-fonte {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: rgba(225, 29, 47, .1);
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
  font-weight: 600;
}

.ia-cartao-fonte i { color: #e11d2f; }

.ia-cartao-fonte span {
  margin-left: auto;
  color: #ff5a68;
  white-space: nowrap;
}

.ia-cartao-texto {
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.55;
}

.ia-bolha .ia-sub,
.ia-bolha .ia-rel-titulo {
  margin: 12px 0 4px;
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.ia-bolha .ia-aviso {
  margin-top: 10px;
  color: rgba(255, 255, 255, .35);
  font-size: 12px;
}

.ia-erro {
  color: #ff8a95;
  font-weight: 600;
}

.ia-fonte {
  color: rgba(255, 255, 255, .5);
  font-size: 12.5px;
}


/* ---- Assistente: veredito, observacao e alertas ------------------------- */

.ia-veredito {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.ia-veredito.v-pode    { background: rgba(255, 255, 255, .14); color: #fff; }
.ia-veredito.v-nao     { background: #e11d2f; color: #fff; }
.ia-veredito.v-depende { background: rgba(225, 29, 47, .22); color: #ff8a95; border: 1px solid rgba(225, 29, 47, .5); }
.ia-veredito.v-neutro  { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .12); }

.ia-bolha .ia-obs {
  margin-top: 8px;
  padding: 8px 12px;
  border-left: 3px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .7);
  font-size: 13.5px;
}

.ia-bolha .ia-obs i { color: #fff; margin-right: 4px; }

.ia-bolha .ia-alerta {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(225, 29, 47, .6);
  background: rgba(225, 29, 47, .12);
  color: #ffb3ba;
  font-size: 13.5px;
  font-weight: 600;
}

.ia-bolha .ia-alerta i { color: #ff3b4c; margin-right: 4px; }

.ia-dica-dev {
  display: block;
  margin-top: 4px;
  color: #ff8a95;
}

.ia-dica-dev b { color: #fff; font-weight: 600; }

/*----------------------------------------------------------------------------
  TOPICOS — sugestoes de mudanca nas regras + votacao
----------------------------------------------------------------------------*/
.tp-contador {
  display: none;
  min-width: 18px;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 9px;
  background: #e11d2f;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 0 10px rgba(225, 29, 47, .7);
}

.rg-modo.active .tp-contador { background: #fff; color: #e11d2f; box-shadow: none; }

.tp-secao {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.tp-secao i { color: #e11d2f; }

.tp-vazio {
  padding: 18px;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: rgba(255, 255, 255, .45);
  font-size: 13.5px;
  text-align: center;
}

.tp-card {
  position: relative;
  margin-bottom: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}

.tp-card.tp-destaque {
  border-color: rgba(225, 29, 47, .55);
  background: linear-gradient(135deg, rgba(225, 29, 47, .16) 0%, rgba(18, 18, 20, .9) 55%);
  box-shadow: 0 0 0 1px rgba(225, 29, 47, .15), 0 8px 30px rgba(225, 29, 47, .14);
}

.tp-card-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.tp-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.tp-selo-votacao { background: #e11d2f; color: #fff; }

.tp-selo-votacao i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: tp-pulso 1.2s ease-in-out infinite;
}

@keyframes tp-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

.tp-selo-aprovada { background: #fff; color: #121214; }
.tp-selo-recusada { background: rgba(225, 29, 47, .18); color: #ff8a95; }
.tp-selo-aplicada { background: rgba(255, 255, 255, .12); color: #fff; }

.tp-tempo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 7px;
  background: rgba(0, 0, 0, .45);
  color: rgba(255, 255, 255, .7);
  font-size: 12.5px;
}

.tp-tempo b {
  color: #fff;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}

.tp-tempo.tp-tempo-fim { border-color: #e11d2f; }
.tp-tempo.tp-tempo-fim b { color: #ff5a68; }

.tp-titulo {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.tp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 6px 0 12px;
  color: rgba(255, 255, 255, .45);
  font-size: 12.5px;
}

.tp-meta b { color: rgba(255, 255, 255, .8); }

.tp-regra {
  color: #ff8a95;
  font-weight: 700;
  cursor: pointer;
}

.tp-regra:hover { color: #fff; text-decoration: underline; }

.tp-bloco {
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 3px solid rgba(255, 255, 255, .25);
  border-radius: 0 8px 8px 0;
  background: rgba(0, 0, 0, .3);
  color: rgba(255, 255, 255, .8);
  font-size: 13.5px;
  line-height: 1.55;
}

.tp-bloco small,
.tp-motivo small {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, .45);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.tp-atual { color: rgba(255, 255, 255, .6); }
.tp-proposta { border-left-color: #e11d2f; background: rgba(225, 29, 47, .07); color: #fff; }

.tp-motivo {
  margin-top: 10px;
  color: rgba(255, 255, 255, .7);
  font-size: 13.5px;
  line-height: 1.5;
}

.tp-motivo small { display: inline; margin-right: 4px; }

.tp-placar { margin-top: 16px; }

.tp-barra {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(255, 255, 255, .08);
}

.tp-barra-sim { background: #fff; transition: width 300ms ease; }
.tp-barra-nao { background: #e11d2f; transition: width 300ms ease; }

.tp-placar-num {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: rgba(255, 255, 255, .55);
  font-size: 12.5px;
  font-weight: 600;
}

.tp-placar-num span:first-child { color: #fff; }
.tp-placar-num span:last-child { color: #ff8a95; }

.tp-votar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.tp-voto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.tp-voto-sim:hover, .tp-voto-sim.meu { border-color: #fff; background: #fff; color: #121214; }
.tp-voto-nao:hover, .tp-voto-nao.meu { border-color: #e11d2f; background: #e11d2f; }
.tp-voto.ocupado { opacity: .5; pointer-events: none; }

.tp-dica {
  margin-top: 6px;
  color: rgba(255, 255, 255, .4);
  font-size: 12px;
  text-align: center;
}

.tp-resultado {
  margin-top: 12px;
  color: rgba(255, 255, 255, .65);
  font-size: 13px;
}

.tp-resultado b { color: #fff; }
.tp-resultado-recusa { padding: 8px 12px; border-radius: 8px; background: rgba(225, 29, 47, .1); }

.tp-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.tp-acoes .rg-botao { padding: 8px 14px; font-size: 13px; }
.tp-acoes .rg-botao.confirmar { background: #fff; color: #121214; border-color: #fff; }

.tp-recusa {
  margin-top: 10px;
}

.tp-recusa textarea,
#tp-form textarea {
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  outline: none;
  resize: vertical;
  background: #19191c;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.tp-recusa textarea { min-height: 70px; }
.tp-recusa textarea:focus, #tp-form textarea:focus { border-color: rgba(225, 29, 47, .7); }
#tp-form input { text-transform: none; letter-spacing: normal; font-weight: 400; }
#tp-form .tp-largo { grid-column: 1 / -1; }

.tp-abas {
  display: flex;
  gap: 4px;
  margin: 26px 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.tp-aba {
  margin-bottom: -1px;
  padding: 9px 14px;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, .5);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.tp-aba:hover { color: #fff; }
.tp-aba.active { border-bottom-color: #e11d2f; color: #fff; }

.tp-aba span {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  font-size: 11px;
}

/* atalho "Regras da Cidade" na pagina inicial: mesma largura do card
   "Loja de Artigos" logo acima (fatia 310 de 917), com o selo das votacoes no canto */
/* min-width 0: em telas menores encolhem junto com os cards em vez de empurrar */
.hub-rodape .hub-atalho { min-width: 0; }

.hub-atalho-regras {
  flex-basis: calc(14px + (100% - 383px - 3 * var(--hub-gap) - 28px) * 310 / 917);
}

.hub-votacoes {
  position: absolute;
  top: -21px;
  right: 14px;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 4px;
  background: #e11d2f;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(225, 29, 47, .6), 0 6px 18px rgba(0, 0, 0, .4);
}

.hub-votacoes.on { display: inline-flex; }

.hub-votacoes i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: tp-pulso 1.2s ease-in-out infinite;
}

/*----------------------------------------------------------------------------
  REGRAS > ATUALIZACOES — historico do que mudou nas regras
----------------------------------------------------------------------------*/
.atu-sub {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, .5);
  font-size: 13.5px;
}

.atu-card { padding: 16px 20px 14px; }

.atu-selo.atu-editou  { background: rgba(255, 255, 255, .12); color: #fff; }
.atu-selo.atu-criou   { background: rgba(62, 207, 142, .16); color: #6ee7b0; }
.atu-selo.atu-excluiu { background: rgba(225, 29, 47, .18); color: #ff8a95; }

.atu-hora {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: rgba(255, 255, 255, .45);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.atu-pagina {
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
}

.atu-pagina i { margin-right: 4px; color: #e11d2f; }
.atu-pagina b { color: #fff; font-weight: 700; }

.atu-renome {
  margin-top: 4px;
  color: rgba(255, 255, 255, .45);
  font-size: 12.5px;
}

.atu-renome s { color: rgba(255, 138, 149, .8); }

.atu-nota {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-left: 3px solid #e11d2f;
  border-radius: 0 8px 8px 0;
  background: rgba(225, 29, 47, .07);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.atu-info {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
  font-style: italic;
}

.atu-diff {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}

.atu-linha {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 12px 7px 8px;
  border-radius: 7px;
  color: rgba(255, 255, 255, .85);
  word-break: break-word;
}

.atu-sinal {
  flex: 0 0 18px;
  font-weight: 800;
  text-align: center;
}

.atu-add { background: rgba(62, 207, 142, .08); }
.atu-add .atu-sinal { color: #3ecf8e; }

.atu-rem { background: rgba(225, 29, 47, .08); color: rgba(255, 255, 255, .55); }
.atu-rem .atu-sinal { color: #ff6b77; }
.atu-rem > span:last-child { text-decoration: line-through; text-decoration-color: rgba(255, 107, 119, .5); }

.atu-mod { background: rgba(255, 255, 255, .04); }
.atu-mod .atu-sinal { color: rgba(255, 255, 255, .5); font-size: 11px; padding-top: 3px; }
.atu-mod-corpo { display: flex; flex: 1; flex-direction: column; gap: 4px; }

.atu-antes, .atu-depois { display: block; }
.atu-antes { color: rgba(255, 255, 255, .55); }

.atu-antes small, .atu-depois small {
  display: inline-block;
  min-width: 46px;
  margin-right: 6px;
  color: rgba(255, 255, 255, .4);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.atu-depois small { color: #3ecf8e; }

.atu-diff del {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(225, 29, 47, .28);
  color: #ffb3ba;
  text-decoration: line-through;
}

.atu-diff ins {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(62, 207, 142, .22);
  color: #b4f5d5;
  text-decoration: none;
}

.atu-mais {
  margin-top: 6px;
  color: rgba(255, 255, 255, .4);
  font-size: 12.5px;
}

.atu-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.atu-contagem { color: rgba(255, 255, 255, .45); font-size: 12.5px; }
.atu-c-add { color: #3ecf8e; }
.atu-c-rem { color: #ff6b77; }
.atu-off { color: rgba(255, 255, 255, .35); font-size: 12.5px; }

/* menu lateral: pagina alterada recentemente */
.rg-item-novo .rg-item-nome::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-radius: 50%;
  background: #e11d2f;
  box-shadow: 0 0 8px rgba(225, 29, 47, .8);
  vertical-align: middle;
}

/* editor: resumo da alteracao */
.rg-editor-nota {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  font-weight: 600;
}

.rg-editor-nota i { color: #e11d2f; margin-right: 4px; }
.rg-editor-nota small { color: rgba(255, 255, 255, .4); font-weight: 400; }

.rg-editor-nota input {
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  outline: none;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
}

.rg-editor-nota input:focus { border-color: rgba(225, 29, 47, .7); }