/* BackIQ: página inicial
   Sem fontes ou imagens externas. Tudo vem desta pasta.
   As cores abaixo também são lidas pelo gráfico (app.js), então use sempre #rrggbb. */

:root {
  --fundo: #090b0d;
  --painel: #0f1215;
  --realce: #171b20;
  --linha: #1f252b;
  --linha-forte: #2c343c;
  --texto: #e9edf0;
  --suave: #8a949e;
  --destaque: #5b9bff;
  --destaque-escuro: #06101f;
  /* Paleta padrão dos gráficos e dos resultados (lucro e perda). Mude só aqui. */
  --alta: #2fd6a5;
  --baixa: #ff6a86;
  --g-grade: rgb(var(--ov) / 0.07);
  --g-eixo: #7f8b97;
  --ov: 255 255 255;   /* cor das camadas translúcidas sobre o fundo (branco no escuro) */
  --sess-asia: #b9a2ff;     /* cores das sessões no gráfico */
  --sess-londres: #4ea8ff;
  --sess-ny: #5eead4;
  --g-etiqueta: #2b3547;   /* fundo das etiquetas de preço e de data no gráfico */
  --g-marca: #0b1220;      /* miolo dos marcadores no gráfico */
  --g-halo: rgb(4 8 16 / 0.8);   /* contorno sob linhas e marcas do gráfico */
  --raio: 10px;
  --sans: "Inter", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Fonte do sistema: Inter (arquivo local, sem depender de internet) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fontes/inter-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fontes/inter.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

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

/* Reserva o espaço da barra de rolagem sempre, mesmo em paginas que nao
   precisam rolar -- sem isso, o cabecalho "anda" uns pixels ao trocar de
   pagina (a largura disponivel muda conforme a barra aparece ou some). */
html { color-scheme: dark; scrollbar-gutter: stable; overflow-y: scroll; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "cv11", "ss03";
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

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

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.suave { color: var(--suave); font-size: 14px; }
.sobe { color: var(--alta); }
.desce { color: var(--baixa); }

.pular {
  position: absolute;
  left: 12px;
  top: -56px;
  z-index: 20;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--destaque);
  color: var(--destaque-escuro);
  text-decoration: none;
  font-weight: 600;
}
.pular:focus { top: 12px; }

/* Topo ------------------------------------------------------------ */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--linha);
  background: var(--fundo);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--destaque);
  text-decoration: none;
}
.marca-icone { width: 24px; height: 24px; }
.marca-nome {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--texto);
}

.menu { display: flex; gap: 2px; }

.menu-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--suave);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.menu-item:hover { color: var(--texto); background: var(--painel); }
.menu-item[aria-current="page"] { color: var(--texto); background: var(--realce); }

.topo-direita {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.selo-exemplo {
  padding: 2px 10px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  color: var(--suave);
  font-size: 12.5px;
  white-space: nowrap;
}

.conta {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  background: var(--painel);
  cursor: pointer;
}
.conta:hover { border-color: var(--suave); }
.conta-avatar { font-size: 14px; font-weight: 600; }

.tag {
  padding: 0 8px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  color: var(--suave);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  white-space: nowrap;
}

/* Conteúdo -------------------------------------------------------- */

main {
  max-width: 1840px;
  margin: 0 auto;
  padding: 36px 32px 40px;
}

main > section + section,
main > section + .duplo { margin-top: 44px; }

.abertura {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: 40px;
}

.abertura h1 {
  margin-top: 2px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--alta);
}

.cartao {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
}

/* Botões ---------------------------------------------------------- */

.botao-principal {
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--destaque);
  color: var(--destaque-escuro);
  font-weight: 600;
  cursor: pointer;
}
.botao-principal:hover { filter: brightness(1.1); }
.botao-principal:focus-visible { outline-color: var(--texto); }

.segmento {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--fundo);
}
.segmento button {
  padding: 3px 11px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--suave);
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
}
.segmento button:hover { color: var(--texto); }
.segmento button[aria-pressed="true"] { background: var(--realce); color: var(--texto); }

.chip {
  padding: 0 8px;
  border-radius: 6px;
  background: var(--realce);
  color: var(--suave);
  font-size: 12.5px;
  line-height: 1.7;
}

/* Mercado: gráfico e melhores backtests --------------------------- */

.mercado {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}

.gc-topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
}
.gc-linha { display: flex; align-items: center; gap: 10px; }
.gc-titulo h3 { font-size: 16px; font-weight: 600; }
.gc-preco-linha { align-items: baseline; margin-top: 2px; gap: 12px; }
.gc-preco { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.gc-var { font-size: 15px; font-weight: 500; }

[hidden] { display: none !important; }

.seletor select {
  max-width: 300px;
  padding: 5px 28px 5px 10px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--texto);
  font-size: 13.5px;
  cursor: pointer;
}
.seletor select:hover { border-color: var(--linha-forte); }

.legenda {
  margin-top: 6px;
  color: var(--suave);
  font-size: 13px;
  min-height: 20px;
}

.pos { color: var(--suave); font-size: 13px; }

.ordena {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.ordena:hover { color: var(--texto); }
th[aria-sort="ascending"] .ordena, th[aria-sort="descending"] .ordena { color: var(--texto); }
th[aria-sort="ascending"] .ordena::after { content: " \25B2"; font-size: 9px; }
th[aria-sort="descending"] .ordena::after { content: " \25BC"; font-size: 9px; }

/* Ativos ---------------------------------------------------------- */

.ativos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ativo-cartao {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 14px 16px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
  text-align: left;
  cursor: pointer;
}
.ativo-cartao:hover { border-color: var(--linha-forte); background: var(--realce); }
.ativo-cartao[aria-pressed="true"] { border-color: var(--destaque); }
.ativo-topo { display: flex; justify-content: space-between; gap: 8px; }
.ativo-simbolo { font-weight: 600; }
.ativo-nome { color: var(--suave); font-size: 13px; }
.ativo-preco { margin-top: 6px; font-size: 17px; font-weight: 600; }
.ativo-var { font-size: 13.5px; font-weight: 500; }
.ativo-spark { margin-top: 6px; }
.ativo-spark svg { display: block; width: 100%; height: 30px; }

/* Recentes e marketplace ------------------------------------------ */

.duplo {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px 16px;
  align-items: start;
}

table { width: 100%; border-collapse: collapse; }
th {
  padding: 12px 18px;
  border-bottom: 1px solid var(--linha);
  color: var(--suave);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
td { padding: 13px 18px; border-top: 1px solid var(--linha); white-space: nowrap; }

tbody tr:first-child td { border-top: 0; }
tbody tr:hover td { background: var(--realce); }
.num { text-align: right; }
.sub { color: var(--suave); font-size: 13px; }

.sem-js { color: var(--suave); }

.rodape {
  max-width: 1840px;
  margin: 0 auto;
  padding: 8px 32px 32px;
  color: var(--suave);
  font-size: 13.5px;
}

/* Aviso ----------------------------------------------------------- */

.aviso {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 30;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  background: var(--realce);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.4);
  transform: translateX(-50%);
  transition: opacity 0.15s;
}
.aviso:empty { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .aviso { transition: none; }
}

/* Telas menores --------------------------------------------------- */
@media (min-width: 1500px) {
  .ativos { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .mercado, .duplo { grid-template-columns: minmax(0, 1fr); }

  .abertura h1 { font-size: 28px; }
  main { padding: 28px 20px 32px; }
}

@media (max-width: 560px) {
  .ativos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selo-exemplo { display: none; }
  
  .gc-preco { font-size: 26px; }
  
}

.gc-titulo { min-width: 0; }

.medias { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha); }

.media dt { color: var(--suave); font-size: 12.5px; }
.media dd { font-size: 18px; font-weight: 600; }

.eventos { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); }

.evento {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 112px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--fundo);
}

.mercado { align-items: stretch; }

.marcadores { position: absolute; inset: 0; pointer-events: none; }
.marcador {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  padding: 0;
  border: 2px solid var(--fundo);
  border-radius: 50%;
  background: var(--destaque);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.12s;
}
.marcador::after { content: ""; position: absolute; inset: -7px; }
.marcador.alta { background: var(--alta); }
.marcador.baixa { background: var(--baixa); }
.marcador:hover { transform: scale(1.2); }
.marcador[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--texto); }

@media (prefers-reduced-motion: reduce) {
  .marcador { transition: none; }
}

/* Design da página inicial: gráfico que termina na tela ----------------- */

body {
  background:
    radial-gradient(1100px 420px at 50% -140px, rgb(91 155 255 / 0.12), transparent 70%),
    var(--fundo);
  background-repeat: no-repeat;
}

main { padding-top: 24px; }
.abertura { margin-bottom: 16px; }
.abertura h1 { font-size: 24px; }

main > section + section { margin-top: 32px; }

.cartao {
  border-color: #1c2229;
  border-radius: 14px;
  background: linear-gradient(180deg, #12161b 0%, #0c0f12 100%);
  box-shadow: inset 0 1px 0 rgb(var(--ov) / 0.04), 0 14px 34px rgb(0 0 0 / 0.3);
}

/* O gráfico cabe na tela; a seção de baixo aparece no pé dela. */
.mercado {
  height: clamp(340px, calc(100vh - 372px), 520px);
  grid-template-rows: minmax(0, 1fr);
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #0b0d10;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgb(var(--ov) / 0.28), 0 4px 12px rgb(0 0 0 / 0.35);
}

.gc-titulo h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }

.gc-preco-linha { align-items: baseline; gap: 8px; margin-top: 6px; }
.gc-preco { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }

.gc-var { margin-left: 6px; padding: 1px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 600; }
.gc-var.sobe { background: rgb(47 214 165 / 0.14); }
.gc-var.desce { background: rgb(255 106 134 / 0.14); }

.segmento { border-color: #1c2229; border-radius: 10px; background: #0a0d10; }
.segmento button { border-radius: 8px; }
.segmento button[aria-pressed="true"] { background: #1b2128; box-shadow: inset 0 0 0 1px #2a323b; }

.marcador { width: 18px; height: 18px; margin: -9px 0 0 -9px; box-shadow: 0 0 0 4px rgb(var(--ov) / 0.06), 0 2px 8px rgb(0 0 0 / 0.5); }
.marcador[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--texto), 0 0 0 7px rgb(var(--ov) / 0.1); }

.ativo-cartao {
  gap: 4px;
  padding: 14px 16px 10px;
  border-color: #1c2229;
  border-radius: 14px;
  background: linear-gradient(180deg, #12161b 0%, #0c0f12 100%);
}
.ativo-topo { display: flex; align-items: center; gap: 10px; }
.ativo-quem { min-width: 0; flex: 1; }
.ativo-simbolo { font-size: 15px; font-weight: 700; line-height: 1.2; }
.ativo-nome { color: var(--suave); font-size: 12px; letter-spacing: 0.04em; }
.ativo-preco { margin-top: 8px; font-size: 18px; }

@media (max-width: 960px) {
  .mercado { height: auto; grid-template-rows: none; }

}

.ativo-simbolo, .ativo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Marcadores de estratégia: bandeira com ícone, haste e ponto no candle -- */

.marcador {
  --c: var(--destaque);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: -38px 0 0 -13px;
  border: 0;
  border-radius: 9px;
  color: #07110d;
  transform: none;
  transition: scale 0.12s, box-shadow 0.12s;
}
.marcador.alta { --c: var(--alta); }
.marcador.baixa { --c: var(--baixa); }
.marcador, .marcador.alta, .marcador.baixa {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, white), var(--c));
  box-shadow:
    inset 0 0 0 1px rgb(var(--ov) / 0.28),
    0 6px 16px rgb(0 0 0 / 0.5),
    0 0 18px color-mix(in srgb, var(--c) 40%, transparent);
}
.marcador::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 11px;
  margin-left: -1px;
  background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 25%, transparent));
}
.marcador::after {
  content: "";
  position: absolute;
  inset: auto;
  left: 50%;
  top: calc(100% + 9px);
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent);
}
.marcador:hover { scale: 1.1; transform: none; }
.marcador[aria-pressed="true"], .marcador.alta[aria-pressed="true"], .marcador.baixa[aria-pressed="true"] {
  scale: 1.15;
  box-shadow:
    inset 0 0 0 1px rgb(var(--ov) / 0.4),
    0 0 0 2px var(--texto),
    0 10px 24px rgb(0 0 0 / 0.6),
    0 0 28px color-mix(in srgb, var(--c) 55%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .marcador::after { animation: anel 2.4s ease-out infinite; }
  @keyframes anel {
    from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 55%, transparent); }
    to { box-shadow: 0 0 0 11px color-mix(in srgb, var(--c) 0%, transparent); }
  }
}

.ativo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ativo-linha .ativo-preco { margin-top: 0; }

/* Acabamento: bordas em degradê no lugar das linhas simples ------------- */

:root {
  --borda-suave: rgb(var(--ov) / 0.06);
  --borda-brilho: linear-gradient(155deg, rgb(var(--ov) / 0.2), rgb(var(--ov) / 0.04) 38%, rgb(91 155 255 / 0.16) 100%);
}

main { padding-top: 30px; }

.cartao, .ativo-cartao {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #13171d 0%, #0b0e11 100%) padding-box,
    var(--borda-brilho) border-box;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.35);
}
.ativo-cartao:hover {
  background:
    linear-gradient(180deg, #171c23 0%, #0d1014 100%) padding-box,
    var(--borda-brilho) border-box;
}
.ativo-cartao[aria-pressed="true"] {
  background:
    linear-gradient(180deg, #131a26 0%, #0b0f16 100%) padding-box,
    linear-gradient(155deg, #7fb2ff, rgb(91 155 255 / 0.25) 55%, rgb(var(--ov) / 0.12)) border-box;
  box-shadow: 0 0 0 1px rgb(91 155 255 / 0.15), 0 18px 40px rgb(0 0 0 / 0.4), 0 0 32px rgb(91 155 255 / 0.12);
}

/* Divisórias internas mais discretas */
.cartao th, .cartao td { border-color: var(--borda-suave); }

.cartao tbody tr + tr td { border-top: 1px solid var(--borda-suave); }
.cartao tbody tr:first-child td { border-top: 0; }

/* Controles sem contorno duro */
.segmento {
  border: 1px solid transparent;
  background:
    linear-gradient(#0a0d10, #0a0d10) padding-box,
    linear-gradient(155deg, rgb(var(--ov) / 0.14), rgb(var(--ov) / 0.03)) border-box;
}
.chip, .tag, .selo-exemplo {
  border-color: transparent;
  background: rgb(var(--ov) / 0.06);
}
.conta {
  border: 1px solid transparent;
  background:
    linear-gradient(#0f1215, #0f1215) padding-box,
    var(--borda-brilho) border-box;
}

.topo { border-bottom-color: var(--borda-suave); }

/* Gráfico em azul: paleta das velas e visual mais imponente -------------- */

:root {
  --g-vela-alta: #4d9dff;
  --g-vela-baixa: #0f2552;
  --g-vela-baixa-borda: #7da4ee;
}

/* Etiqueta de resultado de cada estratégia, em cima da zona */
.marcador, .marcador.alta, .marcador.baixa {
  width: auto;
  height: auto;
  margin: 0;
  padding: 3px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #04120d;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  background: var(--c);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.5), 0 0 16px color-mix(in srgb, var(--c) 40%, transparent);
}
.marcador.baixa { color: #1c0610; }
.marcador::before, .marcador::after { display: none; }
.marcador:hover { scale: 1.06; }
.marcador[aria-pressed="true"], .marcador.alta[aria-pressed="true"], .marcador.baixa[aria-pressed="true"] {
  scale: 1.1;
  box-shadow: 0 0 0 2px var(--texto), 0 10px 24px rgb(0 0 0 / 0.6), 0 0 26px color-mix(in srgb, var(--c) 55%, transparent);
}

/* Azul com roxo: paleta final das velas e do cartão do gráfico ----------- */

:root {
  --g-vela-alta: #7088ff;
  --g-vela-baixa: #1a1650;
  --g-vela-baixa-borda: #a58df5;
  --destaque: #7b8cff;
}

/* Velas: rosa na alta, roxo na baixa */

:root {
  --g-vela-alta: #ff5cc0;
  --g-vela-baixa: #6a3fd8;
  --g-vela-baixa-borda: #a68aff;
}

/* =====================================================================
   IDENTIDADE VISUAL: Safira (azul profundo).
   Para mudar a identidade inteira, edite só estes tokens.
   ===================================================================== */

:root {
  --destaque: #4ea8ff;
  --destaque-escuro: #04111f;
  --alta: #5eead4;
  --baixa: #ff7b8f;
  --g-vela-alta: #a9deff;
  --g-vela-baixa: #3a78dc;
  --g-vela-baixa-borda: #3a78dc;
  --venda: #b9a2ff;
  --card-a: #0c1730;
  --card-b: #060a16;
  --brilho: 78 168 255;
}

:root {
  --borda-brilho: linear-gradient(155deg, rgb(var(--ov) / 0.2), rgb(var(--ov) / 0.04) 38%, rgb(var(--brilho) / 0.2) 100%);
}

body {
  background:
    radial-gradient(1100px 420px at 50% -140px, rgb(var(--brilho) / 0.1), transparent 70%),
    var(--fundo);
  background-repeat: no-repeat;
}

.ativo-cartao[aria-pressed="true"] {
  background:
    linear-gradient(180deg, var(--card-a), var(--card-b)) padding-box,
    linear-gradient(155deg, var(--destaque), rgb(var(--brilho) / 0.25) 55%, rgb(var(--ov) / 0.12)) border-box;
  box-shadow: 0 0 0 1px rgb(var(--brilho) / 0.15), 0 18px 40px rgb(0 0 0 / 0.4), 0 0 32px rgb(var(--brilho) / 0.12);
}

/* Lucro e perda seguem a paleta ativa */
.gc-var.sobe { background: color-mix(in srgb, var(--alta) 16%, transparent); }
.gc-var.desce { background: color-mix(in srgb, var(--baixa) 16%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  
  @keyframes vivo {
    from { box-shadow: 0 0 0 2px color-mix(in srgb, var(--alta) 55%, transparent); }
    to { box-shadow: 0 0 0 9px color-mix(in srgb, var(--alta) 0%, transparent); }
  }
}

.alta { color: var(--alta); }
.baixa { color: var(--baixa); }
.gc-preco.alta { color: var(--alta); }
.gc-preco.baixa { color: var(--baixa); }

/* Números principais */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpi {
  padding: 14px 16px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(180deg, var(--card-a) 0%, var(--card-b) 100%) padding-box,
    var(--borda-brilho) border-box;
}
.kpi dt { color: var(--suave); font-size: 13px; }
.kpi dd { margin-top: 2px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.kpi dd.alta { color: var(--alta); }
.kpi dd.baixa { color: var(--baixa); }

.perf-area { height: 300px; margin-top: 8px; }
.perf-dd { height: 84px; }
.perf-area canvas, .perf-dd canvas { display: block; width: 100%; height: 100%; }
.perf-dd-titulo {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--suave);
  font-size: 12.5px;
}

.chave { display: inline-flex; align-items: center; gap: 8px; color: var(--suave); font-size: 13.5px; cursor: pointer; }
.chave input { width: 16px; height: 16px; margin: 0; accent-color: var(--destaque); cursor: pointer; }
.chave:hover { color: var(--texto); }

.painel { padding: 6px 0 8px; }

.op {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
}
.op + .op { border-top: 1px solid var(--borda-suave); }

.vazio { padding: 14px 18px; color: var(--suave); font-size: 14px; }

.alerta { display: flex; align-items: flex-start; gap: 12px; padding: 10px 18px; }
.alerta + .alerta { border-top: 1px solid var(--borda-suave); }

.situacao { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }

.contra {
  display: inline-block;
  min-width: 52px;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.contra.boa { color: var(--alta); background: color-mix(in srgb, var(--alta) 16%, transparent); }
.contra.media { color: var(--texto); background: rgb(var(--ov) / 0.08); }
.contra.ruim { color: var(--baixa); background: color-mix(in srgb, var(--baixa) 16%, transparent); }

.kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi { min-height: 98px; }
.kpi dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.perf-area { flex: 1; min-height: 0; height: auto; }
.perf-dd { flex: none; height: 84px; }

.op { min-height: 58px; }

.suave-td { color: var(--suave); font-size: 13.5px; }

.dia-sub { margin-top: 2px; font-size: 13.5px; }

.dia-lista { border-top: 1px solid var(--borda-suave); }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Performance: seletor de período e calendário do mês ------------------- */

.icone-linha { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pop-nav {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--suave);
  cursor: pointer;
  pointer-events: auto;
}
.pop-nav:hover:not(:disabled) { background: rgb(var(--ov) / 0.08); color: var(--texto); }
.pop-nav:disabled { opacity: 0.25; cursor: default; }

.mes-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mes-titulo { display: flex; align-items: baseline; gap: 10px; }
.mes-titulo strong { font-size: 18px; }
.mes-total { font-size: 17px; font-weight: 700; }
.mes-grade {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.mes-semana { color: var(--suave); font-size: 12.5px; padding-left: 4px; }
.mes-dia {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 11px;
  background: rgb(var(--ov) / 0.04);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}
.mes-dia:hover:not(:disabled) { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--texto) 55%, transparent); }
.mes-dia:disabled { opacity: 0.3; cursor: default; }

.mes-dia[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--texto); opacity: 1; }
.mes-num { color: var(--suave); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mes-res { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }

/* Legenda do gráfico de lucro acumulado */
.perf-area { margin-top: 10px; }
.perf-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 8px;
  min-height: 22px;
  color: var(--suave);
  font-size: 12.5px;
}
.leg { display: inline-flex; align-items: center; gap: 8px; }
.leg-ponto { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--g-vela-alta); background: var(--fundo); }

.leg-vermelho { width: 18px; height: 3px; border-radius: 2px; background: var(--baixa); }

/* Drawdown em gráfico próprio */
.perf-dd { flex: none; height: 132px; }
.perf-dd canvas { display: block; width: 100%; height: 100%; }
.perf-dd-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--borda-suave);
  font-size: 13px;
  white-space: nowrap;
}
.perf-dd-titulo strong { color: var(--texto); font-size: 14px; }
.perf-legenda { margin-top: 6px; }

/* Passar o mouse no gráfico de lucro mostra as informações do dia */
.perf-area { position: relative; }
.perf-area canvas, .perf-dd canvas { cursor: crosshair; touch-action: pan-y; }
.perf-area canvas:focus-visible, .perf-dd canvas:focus-visible { outline-offset: -2px; border-radius: 6px; }
.perf-dica {
  position: absolute;
  z-index: 6;
  width: 232px;
  padding: 11px 14px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #1a2234, #0e131e) padding-box,
    linear-gradient(155deg, rgb(var(--brilho) / 0.55), rgb(var(--ov) / 0.06) 55%, rgb(var(--brilho) / 0.25)) border-box;
  box-shadow: 0 16px 38px rgb(0 0 0 / 0.55);
  pointer-events: none;
}
.dica-data { margin-bottom: 7px; font-size: 13.5px; font-weight: 700; letter-spacing: -0.005em; }
.dica-linha { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; }
.dica-linha strong { font-variant-numeric: tabular-nums; text-align: right; }
.dica-linha strong.alta { color: var(--alta); }
.dica-linha strong.baixa { color: var(--baixa); }
.dica-linha strong.suave { color: var(--suave); font-weight: 500; }

/* Calendário do mês: todos os quadrados com a mesma intensidade (sem apagar nenhum) */
.mes-dia, .mes-dia:disabled { opacity: 1; }
.mes-dia:disabled { cursor: default; }
.mes-dia:disabled:hover { box-shadow: none; }

.mes-grade {
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 92px);
  grid-template-rows: auto repeat(5, 92px);
  gap: 8px;
}
.mes-vazio { display: block; }
.mes-dia {
  width: 92px;
  height: 92px;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgb(var(--ov) / 0.05);
}
.mes-dia.lucro { background: color-mix(in srgb, var(--alta) 21%, transparent); }
.mes-dia.perda { background: color-mix(in srgb, var(--baixa) 21%, transparent); }
.mes-num { font-size: 17px; font-weight: 700; line-height: 1; color: var(--texto); }
.mes-dia:not(.lucro):not(.perda) .mes-num { color: var(--suave); font-weight: 600; }
.mes-res { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; }
.mes-dia:disabled .mes-num { color: var(--suave); font-weight: 600; }

@media (max-width: 960px) {

  .mes-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: auto; }
  .mes-dia { width: auto; height: auto; aspect-ratio: 1; }
  
}

.mes-grade { grid-template-columns: repeat(5, 118px); grid-template-rows: auto repeat(5, 118px); gap: 9px; }
.mes-dia { width: 118px; height: 118px; padding: 12px 13px; border-radius: 14px; }
.mes-num { font-size: 20px; }
.mes-res { font-size: 14px; }
.mes-semana { font-size: 13px; }
.mes-titulo strong { font-size: 19px; }

.op-corpo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 7px; }

.op-lado {
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}
.op-lado.compra { background: color-mix(in srgb, var(--destaque) 20%, transparent); color: var(--destaque); }
.op-lado.venda { background: rgb(var(--ov) / 0.09); color: var(--texto); }

@media (max-width: 960px) {
  .mes-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto; }
  .mes-dia { width: auto; height: auto; }
  
}

.op-corpo { gap: 5px; }

.mes-grade {
  flex: 1;
  min-height: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto repeat(5, minmax(0, 1fr));
  gap: 9px;
}
.mes-dia { width: auto; height: auto; aspect-ratio: auto; }

/* Compra em azul, venda em lilás (cores do lado da operação, sem confundir com lucro e perda) */
.op-lado.compra { background: color-mix(in srgb, var(--destaque) 20%, transparent); color: var(--destaque); }
.op-lado.venda { background: color-mix(in srgb, var(--venda) 20%, transparent); color: var(--venda); }

/* Calendário com todos os dias do mês: sete colunas (segunda a domingo) e seis linhas */
.mes-grade {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.mes-dia { padding: 9px 11px; border-radius: 12px; }
.mes-num { font-size: 18px; }
.mes-res { font-size: 12.5px; }
.mes-semana { padding-left: 3px; }

@media (max-width: 960px) {
  .mes-grade { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto; }
  .mes-dia { padding: 6px 7px; }
  .mes-num { font-size: 15px; }
  .mes-res { font-size: 10.5px; }
}

/* Dias sem entrada: dizem o motivo */
.mes-nada { color: var(--suave); font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; }
.mes-dia.fim-semana {
  background:
    repeating-linear-gradient(135deg, rgb(var(--ov) / 0.045) 0 5px, transparent 5px 11px),
    rgb(var(--ov) / 0.025);
}
.mes-dia.fim-semana .mes-num { color: var(--suave); font-weight: 600; }

/* =====================================================================
   Cartões com fundo liso (sem degradê), mantendo a borda fina
   ===================================================================== */

:root { --card-fundo: #0e1420; }

.cartao, .kpi, .ativo-cartao, .perf-dica {
  background:
    linear-gradient(var(--card-fundo), var(--card-fundo)) padding-box,
    var(--borda-brilho) border-box;
}
.ativo-cartao:hover {
  background:
    linear-gradient(#121a28, #121a28) padding-box,
    var(--borda-brilho) border-box;
}
.ativo-cartao[aria-pressed="true"] {
  background:
    linear-gradient(var(--card-fundo), var(--card-fundo)) padding-box,
    linear-gradient(155deg, var(--destaque), rgb(var(--brilho) / 0.25) 55%, rgb(var(--ov) / 0.12)) border-box;
}

.cartao, .kpi { box-shadow: none; }

/* =====================================================================
   Entradas: mini cartões discretos (painel do dia) e lista lateral
   ===================================================================== */

.op-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.op-lado.mini { padding: 0 7px; font-size: 11px; line-height: 1.6; }

/* =====================================================================
   Performance: filtros em painel lateral (acompanha a rolagem) e topo que não acompanha
   ===================================================================== */

.topo { position: static; }

@media (max-width: 1500px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ajustes finos do painel lateral e do calendário mais estreito */
.mes-nada { white-space: nowrap; font-size: 10.5px; letter-spacing: 0; }
.mes-dia { padding: 9px 9px; }

.trilho {
  position: sticky;
  top: 16px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border: 1px solid var(--borda-suave);
  border-radius: 14px;
  background: var(--card-fundo);
}
.trilho-item { position: relative; }

.trilho-botao {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--suave);
  cursor: pointer;
}
.trilho-botao .icone-linha { width: 20px; height: 20px; }
.trilho-botao:hover:not(:disabled), .trilho-botao.aberto { background: rgb(var(--ov) / 0.08); color: var(--texto); }
.trilho-botao:disabled { opacity: 0.3; cursor: default; }
.trilho-botao:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

.flutuante {
  position: absolute;
  left: calc(100% + 12px);
  top: 0;
  z-index: 40;
  width: 264px;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(var(--card-fundo), var(--card-fundo)) padding-box,
    var(--borda-brilho) border-box;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.6);
}
.flutuante .segmento { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
.flutuante .segmento button { padding: 4px 0; text-align: center; font-size: 12.5px; }

@media (max-width: 1100px) {
  
  .trilho { position: static; flex-direction: row; justify-content: flex-start; padding: 6px 8px; }
  
  .flutuante { left: 0; top: calc(100% + 8px); }
}

/* Barra do topo fixa (é uma ferramenta); a barra de ícones fica logo abaixo dela */
.topo { position: sticky; top: 0; z-index: 50; }
.trilho { top: 76px; }

/* =====================================================================
   Barra lateral direita fixa, só ícones, contextual (na Performance: filtros)
   ===================================================================== */

:root { --altura-topo: 61px; --largura-trilho: 62px; }

.trilho {
  position: fixed;
  top: var(--altura-topo);
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 45;
  width: var(--largura-trilho);
  padding: 12px 0;
  border: 0;
  border-left: 1px solid var(--borda-suave);
  border-radius: 0;
  background: var(--fundo);
}

/* Os painéis abrem para a esquerda, em direção ao conteúdo */
.flutuante { left: auto; right: calc(100% + 10px); }

@media (max-width: 1100px) {
  .trilho { position: fixed; flex-direction: column; padding: 12px 0; }
  
  .flutuante { right: calc(100% + 10px); top: 0; left: auto; }
}

/* Barra lateral direita: mais clara e com divisão visível */
.trilho {
  background: #131b2b;
  border-left: 1px solid #2e3b55;
  box-shadow: -10px 0 28px rgb(0 0 0 / 0.35);
}
.trilho-botao { color: #b4c0d4; }
.trilho-botao .icone-linha { width: 22px; height: 22px; stroke-width: 1.9; }
.trilho-botao:hover:not(:disabled), .trilho-botao.aberto { background: rgb(var(--ov) / 0.12); color: #fff; }
.trilho-botao.aberto { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destaque) 55%, transparent); }

/* Moldura da ferramenta: topo e barra lateral com a MESMA cor e a MESMA linha de divisão */
:root { --moldura: #0f1522; --moldura-linha: #263249; }

.topo {
  background: var(--moldura);
  border-bottom: 1px solid var(--moldura-linha);
}
.trilho {
  background: var(--moldura);
  border-left: 1px solid var(--moldura-linha);
  box-shadow: none;
}

.dia-lista { position: relative; }
.dia-lista:has(.dia-rolagem.rola:not(.fim))::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--destaque) 22%, transparent), transparent);
  border-radius: 0 0 16px 16px;
}

/* Brilho do pé das listas: tom claro neutro, da mesma família do fundo do card (sem azul vivo) */
:root { --brilho-lista: rgb(190 205 232 / 0.13); }
.dia-lista:has(.dia-rolagem.rola:not(.fim))::after {
  background: linear-gradient(to top, var(--brilho-lista), transparent);
}

/* =====================================================================
   Moldura: barra do topo que some ao rolar + sub-barra fixa com as opções
   ===================================================================== */

:root { --altura-sub: 46px; --altura-topo: 107px; }

.topo { position: static; }

.subbarra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--moldura);
  border-bottom: 1px solid var(--moldura-linha);
}
.subbarra-linha { display: flex; align-items: stretch; max-width: 1840px; height: var(--altura-sub); margin: 0 auto; padding: 0 28px; }
.subbarra .menu { display: flex; align-items: stretch; gap: 2px; }
.subbarra .menu > li { display: flex; }
.subbarra .menu-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 100%;
  padding: 0 16px;
  border-radius: 0;
  color: var(--suave);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.subbarra .menu-item:hover { color: var(--texto); background: rgb(var(--ov) / 0.04); }
.subbarra .menu-item:focus-visible { outline: 2px solid var(--destaque); outline-offset: -3px; }
.menu-icone { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }

/* A opção escolhida: texto claro, fundo suave que sobe da linha azul de baixo */
.subbarra .menu-item[aria-current="page"] {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(to top, color-mix(in srgb, var(--destaque) 16%, transparent), transparent 82%);
}
.subbarra .menu-item[aria-current="page"] .menu-icone { color: var(--destaque); opacity: 1; }
.subbarra .menu-item[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--destaque);
  box-shadow: 0 0 10px color-mix(in srgb, var(--destaque) 70%, transparent);
}

/* A barra lateral direita acompanha o que está à vista no topo */
.trilho { top: var(--rail-top, var(--altura-topo)); }

@media (prefers-reduced-motion: reduce) { .subbarra .menu-item { transition: none; } }
@media (max-width: 560px) { .subbarra-linha { padding: 0 8px; overflow-x: auto; } .subbarra .menu-item { padding: 0 12px; } }

a.botao-principal { display: inline-flex; align-items: center; text-decoration: none; }
a.botao-principal:hover { text-decoration: none; }

/* A logo mora na sub-barra fixa (e leva para o início); a barra de cima fica só com o estado dos dados e a conta */
:root { --altura-topo: 93px; }

.subbarra .marca { margin-right: 14px; padding-right: 20px; border-right: 1px solid var(--moldura-linha); }
.subbarra .marca-icone { width: 22px; height: 22px; }
.subbarra .marca-nome { font-size: 17px; }

/* Opções centralizadas na sub-barra; a logo fica à esquerda */
.subbarra-linha { position: relative; }
.subbarra .menu { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); }
.subbarra .marca { margin-right: 0; padding-right: 0; border-right: 0; }
@media (max-width: 760px) {
  .subbarra .menu { position: static; transform: none; margin-left: auto; }
}

/* Sem barra de cima: só a sub-barra, com selo e conta à direita */
:root { --altura-topo: var(--altura-sub); }
.subbarra .topo-direita { margin-left: auto; align-items: center; }
@media (max-width: 760px) { .subbarra .topo-direita { display: none; } .subbarra .menu { margin-left: 12px; } }

/* Duas faixas, como referência: em cima logo e conta; embaixo as opções à esquerda, a ativa em bloco cheio */
:root { --altura-topo: 97px; }

.subbarra .menu { position: static; transform: none; margin: 0; }
.subbarra .menu-item { padding: 0 20px; }
.subbarra .menu-item[aria-current="page"] { background: var(--destaque); color: #06121f; font-weight: 600; }
.subbarra .menu-item[aria-current="page"] .menu-icone { color: #06121f; }
.subbarra .menu-item[aria-current="page"]::after { display: none; }
@media (max-width: 760px) { .topo-direita { display: flex; } }

/* Opções centralizadas; a escolhida ganha fundo suave e uma barra azul embaixo */
.subbarra-linha { justify-content: center; }
.subbarra .menu { gap: 6px; }
.subbarra .menu-item { padding: 0 22px; border-radius: 0; color: var(--suave); }
.subbarra .menu-item[aria-current="page"] {
  background: linear-gradient(to top, color-mix(in srgb, var(--destaque) 20%, transparent), color-mix(in srgb, var(--destaque) 4%, transparent));
  color: #fff;
  font-weight: 600;
}
.subbarra .menu-item[aria-current="page"] .menu-icone { color: var(--destaque); opacity: 1; }
.subbarra .menu-item[aria-current="page"]::after { display: block; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 0; box-shadow: none; }

/* =====================================================================
   Selecao da aba (Inicio/Performance/Simulador): versao final, unica.
   OBS: as secoes acima desta (Moldura/duas faixas/opcoes centralizadas)
   sao iteracoes de design que ficaram no arquivo -- nao removi pra nao
   arriscar quebrar o que depende delas (altura do topo, etc.), mas essa
   aqui, por vir por ultimo, e' a que vale de verdade pra pagina ativa.
   ===================================================================== */
.subbarra .menu-item[aria-current="page"] {
  position: relative;
  color: var(--texto);
  font-weight: 600;
  background: linear-gradient(to top, color-mix(in srgb, var(--destaque) 13%, transparent), transparent 78%);
}
.subbarra .menu-item[aria-current="page"] .menu-icone { color: var(--destaque); opacity: 1; }
.subbarra .menu-item[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--destaque);
  box-shadow: 0 0 8px color-mix(in srgb, var(--destaque) 65%, transparent);
}

/* =====================================================================
   Barra única: logo, opções e conta na mesma barra (sem barra de cima).
   A página atual fica em branco, com um traço azul fino colado na borda de baixo.
   Vale por último; as camadas acima são iterações antigas.
   ===================================================================== */
:root { --altura-sub: 54px; --altura-topo: 54px; }
.subbarra-linha { position: relative; justify-content: space-between; align-items: stretch; height: var(--altura-sub); }
.subbarra .marca { align-self: center; margin: 0; padding: 0; border: 0; }
.subbarra .marca-icone { width: 26px; height: 26px; }
.subbarra .marca-nome { font-size: 20px; }
.subbarra .topo-direita { align-self: center; margin-left: 0; }
.subbarra .menu { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); gap: 0; margin: 0; }
.subbarra .menu-icone { display: none; }
.subbarra .menu-item { padding: 0 22px; font-size: 15px; background: none; }
.subbarra .menu-item[aria-current="page"] { background: none; color: #fff; font-weight: 600; }
.subbarra .menu-item[aria-current="page"]::after { content: ""; display: block; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 0; background: var(--destaque); box-shadow: none; }
@media (max-width: 760px) {
  .subbarra .menu { position: static; transform: none; margin-left: auto; }
  .subbarra .menu-item { padding: 0 12px; }
  .subbarra .topo-direita { display: none; }
}

/* Opções ao lado da logo (à esquerda), com um respiro entre elas; conta e selo à direita */
.subbarra-linha { justify-content: flex-start; }
.subbarra .menu { position: static; transform: none; margin: 0 0 0 40px; }
.subbarra .topo-direita { margin-left: auto; }
.subbarra .menu-item { padding: 0 18px; }
@media (max-width: 760px) { .subbarra .menu { margin-left: 16px; } .subbarra .menu-item { padding: 0 12px; } }

/* Carregando: um ícone no meio da tela, sem texto. Aparece quando o body tem data-carga (ao trocar de página
   e enquanto a página nova monta os dados). O quadro.js tira o atributo quando termina. */
body[data-carga]::before { content: ""; position: fixed; inset: 0; z-index: 2000; background: color-mix(in srgb, var(--fundo) 74%, transparent); }
body[data-carga]::after {
  content: ""; position: fixed; left: 50%; top: 50%; z-index: 2001; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; border: 4px solid color-mix(in srgb, var(--destaque) 22%, transparent); border-top-color: var(--destaque);
  animation: carga-giro 0.85s linear infinite;
}
@keyframes carga-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body[data-carga]::after { animation-duration: 2.6s; } }

/* Barras de rolagem: um só padrão em todo o sistema (fina, discreta, sem setas) */
* { scrollbar-width: thin; scrollbar-color: #3b4a68 transparent; }

/* "Ao vivo" é diferente das outras abas (opera conta real): ponto pulsando e cor própria */
.subbarra .menu-item[href*="aovivo"] { color: color-mix(in srgb, var(--alta) 55%, var(--texto)); font-weight: 600; }
.subbarra .menu-item[href*="aovivo"] .menu-icone { color: var(--alta); opacity: 1; }
.subbarra .menu-item[href*="aovivo"] span { display: inline-flex; align-items: center; gap: 7px; }
.subbarra .menu-item[href*="aovivo"] span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--alta); box-shadow: 0 0 0 0 color-mix(in srgb, var(--alta) 60%, transparent); animation: aovivo-pulsa 1.6s ease-out infinite; }
.subbarra .menu-item[href*="aovivo"]:hover { color: var(--texto); background: color-mix(in srgb, var(--alta) 10%, transparent); }
.subbarra .menu-item[href*="aovivo"][aria-current="page"] { color: var(--texto); background: linear-gradient(to top, color-mix(in srgb, var(--alta) 18%, transparent), transparent 78%); }
.subbarra .menu-item[href*="aovivo"][aria-current="page"]::after { background: var(--alta); }
@keyframes aovivo-pulsa { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--alta) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .subbarra .menu-item[href*="aovivo"] span::before { animation: none; } }

/* Banner de topo das páginas (mesmo padrão do Laboratório): Meus backtests e Performance */
.sim-lista-cab, .est-banner { position: relative; overflow: hidden; padding: 22px 26px; margin-bottom: 18px; border: 1px solid color-mix(in srgb, var(--destaque) 28%, var(--moldura-linha)); border-radius: 18px;
  background: radial-gradient(110% 160% at 0% 0%, color-mix(in srgb, var(--destaque) 18%, transparent), transparent 58%), radial-gradient(70% 140% at 100% 100%, color-mix(in srgb, var(--alta) 12%, transparent), transparent 60%), var(--card-fundo, #0e1420); }
.sim-lista-cab::after, .est-banner::after { content: ""; position: absolute; right: -10px; top: 0; bottom: 0; width: 44%; opacity: 0.5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M0 78 L30 64 L55 70 L85 46 L110 52 L140 30 L170 38 L200 18 L235 26 L265 8 L300 14' fill='none' stroke='%235eead4' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 90 L40 82 L70 86 L100 70 L135 74 L165 58 L200 62 L235 48 L270 52 L300 40' fill='none' stroke='%235b9bff' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round' opacity='.4'/%3E%3C/svg%3E") right center / 100% 70% no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 55%); mask-image: linear-gradient(to right, transparent, #000 55%); }
.sim-lista-cab > *, .est-banner > * { position: relative; z-index: 1; }
.sim-lista-cab h2, .est-banner h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.sim-lista-cab h2::before, .est-banner h2::before { content: ""; flex: none; width: 52px; height: 52px; border-radius: 15px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destaque) 45%, transparent), 0 8px 24px color-mix(in srgb, var(--destaque) 22%, transparent); background-color: color-mix(in srgb, var(--destaque) 20%, transparent); background-position: center; background-size: 28px; background-repeat: no-repeat; }
.sim-lista-cab h2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b9bff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v3M6 15v4M18 7v3M18 17v3'/%3E%3Crect x='3.5' y='7' width='5' height='8' rx='1'/%3E%3Crect x='15.5' y='10' width='5' height='7' rx='1'/%3E%3C/svg%3E"); }

.sim-lista-cab .suave, .est-banner .suave { margin: 8px 0 0 68px; max-width: 64ch; font-size: 14.5px; line-height: 1.5; white-space: normal; }
@media (max-width: 760px) { .sim-lista-cab::after, .est-banner::after { display: none; } .sim-lista-cab .suave, .est-banner .suave { margin-left: 0; } }
.est-banner h2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b9bff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 12.5l9 5 9-5'/%3E%3Cpath d='M3 17l9 5 9-5'/%3E%3C/svg%3E"); }

/* ====== Banner de topo (versão final): sem caixa quadrada, borda direita inclinada, uma arte e um movimento para cada página ====== */
.sim-lista-cab, .est-banner {
  position: relative; overflow: hidden; margin-bottom: 20px; padding: 20px 76px 20px 28px; border: 0; border-radius: 26px 0 0 26px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 46px) 100%, 0 100%);
  background:
    radial-gradient(60% 140% at 0% 50%, color-mix(in srgb, var(--destaque) 24%, transparent), transparent 70%),
    linear-gradient(100deg, color-mix(in srgb, var(--destaque) 14%, var(--card-fundo, #0e1420)) 0%, var(--card-fundo, #0e1420) 58%, color-mix(in srgb, var(--alta) 7%, var(--card-fundo, #0e1420)) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--destaque) 30%, transparent), inset 4px 0 0 var(--destaque);
}
.sim-lista-cab::after, .est-banner::after {
  content: ""; position: absolute; right: 40px; top: 6px; bottom: 6px; width: 40%; max-width: 560px; pointer-events: none; opacity: 0.6;
  background-repeat: no-repeat; background-position: right center; background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 45%, #000 85%, transparent); mask-image: linear-gradient(to right, transparent, #000 45%, #000 85%, transparent);
}
.sim-lista-cab::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cline x1='14' y1='54' x2='14' y2='86' stroke='%235b9bff' stroke-width='1.4'/%3E%3Crect x='10' y='62' width='9' height='16' rx='1.5' fill='%235b9bff' opacity='.55'/%3E%3Cline x1='38' y1='42' x2='38' y2='80' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='34' y='50' width='9' height='22' rx='1.5' fill='%235eead4' opacity='.55'/%3E%3Cline x1='62' y1='48' x2='62' y2='78' stroke='%235b9bff' stroke-width='1.4'/%3E%3Crect x='58' y='56' width='9' height='14' rx='1.5' fill='%235b9bff' opacity='.55'/%3E%3Cline x1='86' y1='28' x2='86' y2='70' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='82' y='36' width='9' height='26' rx='1.5' fill='%235eead4' opacity='.55'/%3E%3Cline x1='110' y1='34' x2='110' y2='68' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='106' y='42' width='9' height='18' rx='1.5' fill='%235eead4' opacity='.55'/%3E%3Cline x1='134' y1='20' x2='134' y2='60' stroke='%235b9bff' stroke-width='1.4'/%3E%3Crect x='130' y='28' width='9' height='24' rx='1.5' fill='%235b9bff' opacity='.55'/%3E%3Cline x1='158' y1='26' x2='158' y2='62' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='154' y='34' width='9' height='20' rx='1.5' fill='%235eead4' opacity='.55'/%3E%3Cline x1='182' y1='10' x2='182' y2='52' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='178' y='18' width='9' height='26' rx='1.5' fill='%235eead4' opacity='.55'/%3E%3Cline x1='206' y1='18' x2='206' y2='48' stroke='%235b9bff' stroke-width='1.4'/%3E%3Crect x='202' y='26' width='9' height='14' rx='1.5' fill='%235b9bff' opacity='.55'/%3E%3Cline x1='230' y1='4' x2='230' y2='42' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='226' y='12' width='9' height='22' rx='1.5' fill='%235eead4' opacity='.55'/%3E%3Cline x1='254' y1='12' x2='254' y2='44' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='250' y='20' width='9' height='16' rx='1.5' fill='%235eead4' opacity='.55'/%3E%3Cline x1='278' y1='0' x2='278' y2='36' stroke='%235eead4' stroke-width='1.4'/%3E%3Crect x='274' y='8' width='9' height='20' rx='1.5' fill='%235eead4' opacity='.55'/%3E%3C/svg%3E"); animation: banner-desliza 9s ease-in-out infinite alternate; }

.est-banner::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cline x1='30' y1='70' x2='75' y2='36' stroke='%235b9bff' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='75' y1='36' x2='120' y2='62' stroke='%235b9bff' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='120' y1='62' x2='165' y2='28' stroke='%235b9bff' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='165' y1='28' x2='210' y2='58' stroke='%235b9bff' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='210' y1='58' x2='255' y2='22' stroke='%235b9bff' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='75' y1='36' x2='165' y2='28' stroke='%235b9bff' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='120' y1='62' x2='210' y2='58' stroke='%235b9bff' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='210' y1='58' x2='285' y2='66' stroke='%235b9bff' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='255' y1='22' x2='285' y2='66' stroke='%235b9bff' stroke-width='1.2' opacity='.35'/%3E%3Ccircle cx='30' cy='70' r='3' fill='%23b9a2ff' opacity='.75'/%3E%3Ccircle cx='30' cy='70' r='9' fill='none' stroke='%23b9a2ff' stroke-width='1' opacity='.4'/%3E%3Ccircle cx='75' cy='36' r='4' fill='%235eead4' opacity='.75'/%3E%3Ccircle cx='75' cy='36' r='9' fill='none' stroke='%235eead4' stroke-width='1' opacity='.4'/%3E%3Ccircle cx='120' cy='62' r='3' fill='%235eead4' opacity='.75'/%3E%3Ccircle cx='120' cy='62' r='9' fill='none' stroke='%235eead4' stroke-width='1' opacity='.4'/%3E%3Ccircle cx='165' cy='28' r='4' fill='%23b9a2ff' opacity='.75'/%3E%3Ccircle cx='165' cy='28' r='9' fill='none' stroke='%23b9a2ff' stroke-width='1' opacity='.4'/%3E%3Ccircle cx='210' cy='58' r='3' fill='%235eead4' opacity='.75'/%3E%3Ccircle cx='210' cy='58' r='9' fill='none' stroke='%235eead4' stroke-width='1' opacity='.4'/%3E%3Ccircle cx='255' cy='22' r='4' fill='%235eead4' opacity='.75'/%3E%3Ccircle cx='255' cy='22' r='9' fill='none' stroke='%235eead4' stroke-width='1' opacity='.4'/%3E%3Ccircle cx='285' cy='66' r='3' fill='%23b9a2ff' opacity='.75'/%3E%3Ccircle cx='285' cy='66' r='9' fill='none' stroke='%23b9a2ff' stroke-width='1' opacity='.4'/%3E%3C/svg%3E"); animation: banner-orbita 12s ease-in-out infinite alternate; }

@keyframes banner-desliza { from { transform: translateX(0); } to { transform: translateX(-26px); } }
@keyframes banner-respira { from { transform: scaleY(0.82); opacity: 0.45; } to { transform: scaleY(1); opacity: 0.7; } }
@keyframes banner-orbita { from { transform: translateY(-4px) scale(0.98); } to { transform: translateY(5px) scale(1.03); } }
@keyframes banner-flutua { from { transform: translateY(5px); } to { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .sim-lista-cab::after, .est-banner::after { animation: none; } }
.sim-lista-cab > *, .est-banner > * { position: relative; z-index: 1; }
.sim-lista-cab h2, .est-banner h2 { display: flex; align-items: center; gap: 16px; margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.025em; }
.sim-lista-cab h2::before, .est-banner h2::before {
  content: ""; flex: none; width: 50px; height: 50px; border-radius: 16px 6px 16px 6px; transform: rotate(-4deg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destaque) 50%, transparent), 0 8px 24px color-mix(in srgb, var(--destaque) 25%, transparent);
  background-color: color-mix(in srgb, var(--destaque) 22%, transparent); background-position: center; background-size: 27px; background-repeat: no-repeat;
}

.sim-lista-cab .suave, .est-banner .suave { margin: 6px 0 0 66px; max-width: 62ch; font-size: 14px; line-height: 1.5; white-space: normal; overflow: visible; text-overflow: clip; }

@media (max-width: 760px) {
  .sim-lista-cab, .est-banner { padding: 18px 40px 18px 18px; clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%); }
  .sim-lista-cab::after, .est-banner::after { display: none; }
  .sim-lista-cab .suave, .est-banner .suave { margin-left: 0; }
  .sim-lista-cab h2, .est-banner h2 { font-size: 24px; }
}

/* ====== Banner de topo (terceira versão): aberto, sem caixa; brilho suave atrás do título, filete em degradê embaixo e a arte solta à direita ====== */
.sim-lista-cab, .est-banner {
  clip-path: none; border-radius: 0; box-shadow: none; overflow: visible; margin-bottom: 24px; padding: 10px 0 26px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--destaque) 70%, transparent) 0%, color-mix(in srgb, var(--destaque) 18%, transparent) 38%, transparent 78%) left bottom / 100% 1.5px no-repeat;
}
.sim-lista-cab::before, .est-banner::before {
  content: ""; position: absolute; left: -60px; top: -50px; width: 520px; height: 230px; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--destaque) 26%, transparent), transparent);
  filter: blur(18px); opacity: 0.55;
}
.sim-lista-cab::after, .est-banner::after {
  right: 0; top: -6px; bottom: 18px; width: 34%; max-width: 480px; opacity: 0.5;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 40%, #000 92%, transparent);
}
.sim-lista-cab h2::before, .est-banner h2::before { width: 46px; height: 46px; border-radius: 14px; transform: none; background-size: 25px; }
.sim-lista-cab h2, .est-banner h2 { font-size: 22px; }
.sim-lista-cab .suave, .est-banner .suave { margin-left: 62px; }
@media (max-width: 760px) {
  .sim-lista-cab, .est-banner { padding: 6px 0 20px; clip-path: none; }
  .sim-lista-cab::before, .est-banner::before { width: 300px; height: 160px; }
}

/* banner sem a arte decorativa à direita (por enquanto) */
.sim-lista-cab::after, .est-banner::after { display: none; }

/* Avisos (aviso.js): um desenho só para o site inteiro ------------------ */
.aviso { display: none !important; }
.avisos { position: fixed; left: 50%; bottom: 26px; z-index: 80; display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100% - 32px)); transform: translateX(-50%); pointer-events: none; }
.aviso-card { --c: var(--destaque, #4ea8ff); position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 13px 12px 15px 13px; border-radius: 14px; overflow: hidden; pointer-events: auto;
  border: 1px solid color-mix(in srgb, var(--c) 42%, var(--linha-forte, rgb(255 255 255 / 0.14)));
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 15%, transparent), transparent 62%), var(--card-fundo, #121a28);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(0 0 0 / 0.2);
  animation: aviso-entra 0.24s cubic-bezier(.2,.8,.3,1); }
.aviso-card.ok { --c: var(--alta, #5eead4); }
.aviso-card.erro { --c: var(--baixa, #ff7a90); }
.aviso-card.alerta { --c: #f5b942; }
.aviso-card.saindo { opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 0.2s, transform 0.2s; }
.aviso-card.pulso { animation: aviso-pulso 0.3s ease-out; }
.aviso-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.aviso-ic svg { width: 16px; height: 16px; fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.aviso-txt { flex: 1; min-width: 0; padding-top: 4px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--texto, #e8edf5); overflow-wrap: anywhere; }
.aviso-x { flex: none; width: 26px; height: 26px; margin: 1px 0 0; border: 0; border-radius: 8px; background: transparent; color: var(--suave, #8a97ad); display: grid; place-items: center; cursor: pointer; }
.aviso-x:hover { background: rgb(255 255 255 / 0.1); color: var(--texto, #fff); }
.aviso-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.aviso-barra { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c); opacity: 0.75; transform-origin: left; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes aviso-pulso { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes aviso-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .aviso-card, .aviso-card.pulso { animation: none; } .aviso-card.saindo { transition: none; } .aviso-barra { animation: none !important; } }

/* Seletor de idioma (i18n.js), no alto de todas as páginas ---------------- */
.idioma { display: inline-flex; padding: 3px; border: 1px solid var(--linha-forte, rgb(255 255 255 / 0.14)); border-radius: 999px; background: rgb(255 255 255 / 0.04); margin-right: 10px; }
.idioma button { height: 26px; min-width: 38px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--suave, #8a97ad); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; }
.idioma button:hover { color: var(--texto, #fff); }
.idioma button[aria-pressed="true"] { background: color-mix(in srgb, var(--destaque, #4ea8ff) 28%, transparent); color: var(--texto, #fff); }

/* =====================================================================
   Barra lateral de navegação (substitui o menu do topo). Montada por lateral.js.
   Larga (232 px) ou recolhida (64 px, só ícones); celular: barra de abas embaixo.
   Nas telas de gráfico (body.sim-aberta) ela some, como o menu do topo.
   ===================================================================== */
:root { --lateral-larga: 232px; --lateral-estreita: 64px; --faixa-h: 70px; }
body.com-lateral { --lateral-w: var(--lateral-larga); --altura-topo: var(--faixa-h); padding-left: var(--lateral-w); padding-top: var(--altura-topo); transition: padding-left 0.18s ease; }
body.com-lateral.lateral-recolhida { --lateral-w: var(--lateral-estreita); }
body.com-lateral.sim-aberta { padding-left: 0; padding-top: 0; }

/* faixa de cima (de ponta a ponta, com a logo): só a lateral vive abaixo dela agora */
.topo-faixa {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: var(--faixa-h);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: linear-gradient(180deg, #0e1319 0%, #0b0f14 100%);
  border-bottom: 1px solid var(--moldura-linha, var(--linha));
}
.faixa-expandir { order: -1; display: none; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--suave); cursor: pointer; }
.faixa-expandir:hover { color: var(--texto); background: rgb(var(--ov) / 0.08); }
.faixa-expandir svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.topo-faixa .marca { display: flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; }
.topo-faixa .marca-icone { flex: none; width: 30px; height: 30px; color: var(--destaque); }
.topo-faixa .marca-nome { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.topo-faixa .faixa-ajuda, .topo-faixa .faixa-idioma { display: grid; place-items: center; grid-auto-flow: column; gap: 6px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--suave); font: inherit; cursor: pointer; }
.topo-faixa .faixa-ajuda:hover, .topo-faixa .faixa-idioma:hover { color: var(--texto); background: rgb(var(--ov) / 0.08); }
.topo-faixa .faixa-ajuda[aria-expanded="true"], .topo-faixa .faixa-idioma[aria-expanded="true"] { color: var(--texto); background: rgb(var(--ov) / 0.1); }
.topo-faixa .faixa-ajuda .menu-icone, .topo-faixa .faixa-idioma .menu-icone { width: 19px; height: 19px; }
.topo-faixa .faixa-ajuda .lateral-rot { display: none; }
.topo-faixa .faixa-idioma { margin-left: auto; width: auto; padding: 0 8px; gap: 3px; }
.topo-faixa .faixa-idioma .cod { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.topo-faixa .faixa-idioma .menu-icone { width: 13px; height: 13px; }
.conta-avatar .menu-icone { width: 16px; height: 16px; }
body.quadro-cheio .topo-faixa { display: none; }

.lateral {
  position: fixed; top: var(--faixa-h); left: 0; bottom: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 6px;
  width: var(--lateral-w); padding: 14px 12px 12px;
  border-right: 1px solid var(--moldura-linha, var(--linha));
  background: linear-gradient(180deg, #0e1319 0%, #0b0f14 100%);
  overflow: hidden auto; scrollbar-width: none;
  transition: width 0.18s ease;
}
.lateral::-webkit-scrollbar { display: none; }
body.sim-aberta .lateral { display: none; }

.lateral-recolher { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--moldura-linha, var(--linha)); border-radius: 8px; background: rgb(var(--ov) / 0.03); color: var(--suave); cursor: pointer; }
.lateral-recolher:hover { color: var(--texto); background: rgb(var(--ov) / 0.08); }
.lateral-recolher svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.18s; }
body.lateral-recolhida .lateral-recolher svg { transform: rotate(180deg); }

.lateral-nav { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.lateral-grupo { display: flex; flex-direction: column; gap: 3px; }
.lateral-titulo { padding: 0 10px 4px; color: var(--suave); font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.75; white-space: nowrap; }
.lateral .lateral-item {
  position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px;
  border-radius: 10px; color: var(--suave); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.lateral .lateral-item:hover { color: var(--texto); background: rgb(var(--ov) / 0.05); }
.lateral .lateral-item:focus-visible { outline: 2px solid var(--destaque); outline-offset: -2px; }
.lateral .lateral-item .menu-icone { flex: none; width: 19px; height: 19px; opacity: 0.9; }
.lateral .lateral-item[aria-current="page"] { color: var(--texto); background: color-mix(in srgb, var(--destaque) 15%, transparent); }
.lateral .lateral-item[aria-current="page"] .menu-icone { color: var(--destaque); opacity: 1; }
.lateral .lateral-item[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--destaque); box-shadow: 0 0 10px color-mix(in srgb, var(--destaque) 60%, transparent); }

.lateral-rodape { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--moldura-linha, var(--linha)); }
.lateral .lateral-direita { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; }
.lateral .selo-exemplo { display: block; margin: 0; padding: 4px 10px; text-align: center; font-size: 11px; }

.lateral .idioma { align-self: center; margin: 0; }
.lateral .conta { align-self: flex-start; display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 8px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--texto); font: inherit; cursor: pointer; }
.lateral .conta:hover { background: rgb(var(--ov) / 0.05); }
.lateral .conta::after { content: attr(data-rotulo); font-size: 13px; font-weight: 600; color: var(--suave); }
.lateral .conta-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--destaque) 22%, transparent); color: var(--destaque); font-size: 13px; font-weight: 700; }

/* recolhida: só ícones */
body.lateral-recolhida .lateral { padding-left: 10px; padding-right: 10px; }

body.lateral-recolhida .lateral .marca-nome, body.lateral-recolhida .lateral-titulo, body.lateral-recolhida .lateral .lateral-item span,
body.lateral-recolhida .lateral .conta::after, body.lateral-recolhida .lateral .selo-exemplo { display: none; }
body.lateral-recolhida .lateral-grupo { gap: 3px; padding-bottom: 8px; border-bottom: 1px solid var(--moldura-linha, var(--linha)); }
body.lateral-recolhida .lateral-grupo:last-child { border-bottom: 0; }
body.lateral-recolhida .lateral .lateral-item { justify-content: center; padding: 0; }
body.lateral-recolhida .lateral .lateral-item[aria-current="page"]::before { left: -10px; }
body.lateral-recolhida .lateral .conta { justify-content: center; padding: 0; }

body.lateral-recolhida .lateral .idioma { flex-direction: column; border-radius: 12px; }
body.lateral-recolhida .lateral .idioma button { min-width: 0; width: 34px; padding: 0; }

/* tela estreita (qualquer uma, não só celular — o Pip não conta mais nisso, ele não empurra o site): a barra some
   inteira e vira uma gaveta por cima do conteúdo, aberta pelo botão de expandir na faixa, do lado do nome.
   Prioridade: a lateral recolhe PRIMEIRO (solta ~232px pro conteúdo) — só depois disso é que a lista por
   dentro da tela deveria precisar cortar coluna; por isso essa largura é maior que a dos breakpoints dela. */
@media (max-width: 1100px) {
  body.com-lateral, body.com-lateral.lateral-recolhida { padding-left: 0; }
  .lateral { transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 24px 0 60px -20px rgb(0 0 0 / 0.6); }
  body.lateral-aberta .lateral { transform: none; }
  .lateral-recolher { display: none; }                 /* a setinha de recolher não faz sentido numa gaveta */
  .faixa-expandir { display: grid; }
  .faixa-fundo { display: block; }
  body.lateral-aberta .faixa-fundo { pointer-events: auto; }
}
@media (min-width: 1101px) { .faixa-expandir, .faixa-fundo { display: none; } }
/* sem escurecer o resto: só clicável pra fechar a gaveta ao clicar fora dela */
.faixa-fundo { position: fixed; inset: 0; z-index: 55; background: transparent; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body.com-lateral, .lateral, .faixa-fundo { transition: none; } }

/* =====================================================================
   Quadro (app.html): barra lateral fixa + tela num iframe. Só o meio carrega.
   ===================================================================== */
body[data-quadro] { height: 100vh; height: 100dvh; overflow: hidden; }
body.com-lateral.em-quadro, body.com-lateral.lateral-recolhida.em-quadro { padding-left: 0; padding-top: 0; padding-bottom: 0; --altura-topo: 0px; }
.quadro-caixa { position: relative; height: calc(100vh - var(--altura-topo, 0px)); height: calc(100dvh - var(--altura-topo, 0px)); margin: 0; padding: 0; overflow: hidden; }
.quadro-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--fundo); transition: opacity 0.12s; }
body.quadro-carregando .quadro-frame { opacity: 0.35; }
body.quadro-cheio { padding-left: 0; padding-top: 0; }
body.quadro-cheio .lateral { display: none; }
body.quadro-cheio .quadro-caixa { height: 100vh; height: 100dvh; }
.quadro-barra { position: absolute; top: 0; left: 0; right: 0; z-index: 3; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
body.quadro-carregando .quadro-barra { opacity: 1; }
.quadro-barra::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--destaque); box-shadow: 0 0 10px color-mix(in srgb, var(--destaque) 70%, transparent); animation: quadro-corre 1s ease-in-out infinite; }
@keyframes quadro-corre { from { left: -40%; } to { left: 100%; } }
.quadro-caixa.entrando .quadro-frame { animation: quadro-entra 0.34s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes quadro-entra { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  body.com-lateral:not(.em-quadro), body.com-lateral.lateral-recolhida:not(.em-quadro) { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .quadro-caixa.entrando .quadro-frame { animation: none; } .quadro-barra::before { animation: none; left: 0; width: 100%; } }
html:has(body[data-quadro]) { overflow: hidden; scrollbar-gutter: auto; }

/* Barra lateral: perfil, selos, "uso pessoal" e item atual com brilho */
.lateral-perfil { display: flex; align-items: center; gap: 12px; margin: 2px 0 6px; padding: 12px 10px; border: 1px solid var(--moldura-linha, var(--linha)); border-radius: 14px; background: linear-gradient(160deg, rgb(var(--ov) / 0.06), rgb(var(--ov) / 0.015)); }
.lateral-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, color-mix(in srgb, var(--alta) 55%, #06231c), color-mix(in srgb, var(--alta) 25%, #06231c)); color: #eafff7; font-size: 17px; font-weight: 700; box-shadow: 0 0 0 2px color-mix(in srgb, var(--alta) 30%, transparent); }
.lateral-perfil-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lateral-perfil-txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.lateral-plano { align-self: flex-start; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--destaque) 20%, transparent); color: var(--destaque); font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.lateral .lateral-item .lateral-rot { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lateral-selo { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--destaque); color: var(--destaque-escuro, #06101f); font-size: 10.5px; font-weight: 800; font-style: normal; letter-spacing: 0.02em; }

.lateral .lateral-item { transition: background 0.12s, color 0.12s, transform 0.12s; }
.lateral .lateral-item:hover { transform: translateX(2px); }
.lateral .lateral-item[aria-current="page"] { background: linear-gradient(90deg, color-mix(in srgb, var(--destaque) 24%, transparent), color-mix(in srgb, var(--destaque) 6%, transparent)); }
.lateral .lateral-item[aria-current="page"]::after {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, color-mix(in srgb, var(--destaque) 35%, transparent) 0%, var(--destaque) 45%, color-mix(in srgb, var(--destaque) 35%, transparent) 100%) 0 0 / 220% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: lat-brilho 3.6s ease-in-out infinite alternate;
}
@keyframes lat-brilho { from { background-position: 0 0; } to { background-position: 100% 0; } }
body.lateral-recolhida .lateral-perfil { justify-content: center; padding: 8px 0; border-radius: 12px; }
body.lateral-recolhida .lateral-perfil-txt, body.lateral-recolhida .lateral-selo { display: none; }
@media (prefers-reduced-motion: reduce) { .lateral .lateral-item[aria-current="page"]::after { animation: none; } .lateral .lateral-item:hover { transform: none; } }

.selo-proxy { display: none !important; }
.lateral .selo-exemplo[hidden] { display: none; }

/* Barra lateral maior (mesmo porte da referência): mais larga, itens mais altos, perfil centralizado */
:root { --lateral-larga: 292px; --lateral-estreita: 76px; }
.lateral { padding: 20px 16px 16px; gap: 8px; }

.lateral .marca-icone { width: 30px; height: 30px; }
.lateral .marca-nome { font-size: 22px; }
.lateral-recolher { width: 32px; height: 32px; border-radius: 9px; }
.lateral-recolher svg { width: 18px; height: 18px; }
.lateral-perfil { flex-direction: column; justify-content: center; gap: 10px; margin: 4px 0 8px; padding: 6px 0 18px; border: 0; border-bottom: 1px solid var(--moldura-linha, var(--linha)); border-radius: 0; background: none; text-align: center; }
.lateral-avatar { width: 76px; height: 76px; font-size: 32px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--alta) 28%, transparent); }
.lateral-perfil-txt { align-items: center; gap: 6px; }
.lateral-perfil-txt strong { font-size: 17px; max-width: 240px; }
.lateral-plano { align-self: center; padding: 2px 10px; font-size: 11px; }
.lateral-nav { gap: 6px; padding-top: 6px; }
.lateral-grupo { gap: 5px; }
.lateral-titulo { padding: 0 14px 6px; font-size: 11.5px; }
.lateral .lateral-item { height: 50px; padding: 0 16px; gap: 14px; border-radius: 12px; font-size: 16px; }
.lateral .lateral-item .menu-icone { width: 22px; height: 22px; }
.lateral-selo { padding: 2px 9px; font-size: 11px; }
.lateral .lateral-item[aria-current="page"]::before { left: -16px; top: 11px; bottom: 11px; width: 4px; }
.lateral-rodape { padding-top: 14px; }
.lateral .conta { height: 50px; gap: 12px; padding: 0 10px; border-radius: 12px; }
.lateral .conta::after { font-size: 15px; }
.lateral .conta-avatar { width: 34px; height: 34px; font-size: 15px; }
.lateral .idioma button { height: 30px; min-width: 44px; font-size: 13px; }

body.lateral-recolhida .lateral { padding: 20px 12px 16px; }
body.lateral-recolhida .lateral-perfil { padding: 6px 0 12px; margin: 4px 0; }
body.lateral-recolhida .lateral-avatar { width: 44px; height: 44px; font-size: 19px; }
body.lateral-recolhida .lateral .lateral-item { height: 48px; }
body.lateral-recolhida .lateral .lateral-item[aria-current="page"]::before { left: -12px; }
body.lateral-recolhida .lateral .idioma button { width: 40px; }
@media (max-width: 760px) { .lateral .lateral-item, body.lateral-recolhida .lateral .lateral-item { height: 60px; font-size: 10px; padding: 0 2px; } .lateral .lateral-item .menu-icone { width: 22px; height: 22px; } }

/* Dentro do quadro (com barra lateral): o TÍTULO da página fica colado na barra (com um respiro) e o CONTEÚDO segue na margem de antes */
:root { --respiro-titulo: 16px; --margem-conteudo: 56px; }
body.em-quadro main, body.em-quadro .sim-lista, body.em-quadro .sim-an-pagina, body.em-quadro #vista-auto { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

body.em-quadro main > *:not(.sim-lista-cab):not(.cabeca-filtros):not(.est-banner):not(.sim-an-topo):not(.so-leitor):not(noscript):not([hidden]) { width: min(var(--largura-conteudo, 1600px), calc(100% - 2 * var(--margem-conteudo))); margin-left: auto; margin-right: auto; }
body.em-quadro .sim-lista, body.em-quadro .sim-an-pagina, body.em-quadro #vista-auto { --largura-conteudo: 1600px; }
body.em-quadro .sim-lista-cab, body.em-quadro .est-banner, body.em-quadro .sim-an-topo { margin-left: var(--respiro-titulo); margin-right: var(--respiro-titulo); width: auto; }
body.em-quadro main { padding-top: 16px; padding-bottom: 40px; }
body.em-quadro .rodape { padding-left: var(--margem-conteudo); }

/* Perfil menor, em linha: avatar, nome e plano (Free ou Pro) */
.lateral-perfil { flex-direction: row; justify-content: flex-start; gap: 12px; margin: 2px 0 10px; padding: 10px 12px; border: 1px solid var(--moldura-linha, var(--linha)); border-radius: 14px; background: linear-gradient(160deg, rgb(var(--ov) / 0.06), rgb(var(--ov) / 0.015)); text-align: left; }
.lateral-avatar { width: 38px; height: 38px; font-size: 16px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--alta) 28%, transparent); }
.lateral-perfil-txt { align-items: flex-start; gap: 3px; min-width: 0; }
.lateral-perfil-txt strong { font-size: 14.5px; max-width: 170px; }
.lateral-plano { align-self: flex-start; padding: 1px 8px; font-size: 10.5px; letter-spacing: 0.06em; }
.lateral-plano.free { background: rgb(var(--ov) / 0.12); color: var(--suave); }
.lateral-plano.pro { background: linear-gradient(90deg, #f5b942, #ffd978); color: #3a2600; }
body.lateral-recolhida .lateral-perfil { justify-content: center; padding: 8px 0; border-radius: 12px; }
body.lateral-recolhida .lateral-avatar { width: 38px; height: 38px; font-size: 16px; }

/* PRO na cor do site, fundo da barra com um toque bem leve de azul, e a página de Estratégias com a margem de título (colada na barra) */
.lateral-plano.pro { background: color-mix(in srgb, var(--destaque) 24%, transparent); color: #9cc4ff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destaque) 55%, transparent); }
.lateral { background: radial-gradient(120% 40% at 0% 0%, rgb(60 110 190 / 0.10), transparent 70%), linear-gradient(180deg, #0d141d 0%, #0a1018 100%); }
body.em-quadro #vista-est, body.em-quadro .est-pagina { --margem-conteudo: var(--respiro-titulo); --largura-conteudo: 100000px; }

/* Avatar no mesmo estilo dos ícones da ferramenta: quadrado arredondado, azul do site, sem anel */
.lateral-avatar, .lateral .conta-avatar { border-radius: 11px; background: color-mix(in srgb, var(--destaque) 16%, transparent); color: var(--destaque); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destaque) 42%, transparent); font-weight: 800; }
.lateral-avatar { width: 38px; height: 38px; font-size: 17px; }
.lateral .conta-avatar { width: 34px; height: 34px; font-size: 15px; }

/* =====================================================================
   Barra lateral: acabamento (nítida em telas de alta resolução, sem brilhos, sem pulos, tudo alinhado)
   ===================================================================== */
.lateral { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: linear-gradient(180deg, #0d141d 0%, #0a1018 100%); border-right: 1px solid rgb(var(--ov) / 0.08); padding: 18px 14px 14px; gap: 6px; }
.lateral svg { shape-rendering: geometricPrecision; }

.lateral .marca-nome { font-size: 21px; font-weight: 800; letter-spacing: -0.015em; }
.lateral .marca-icone { width: 28px; height: 28px; }
.lateral-recolher { width: 30px; height: 30px; border-radius: 8px; border-color: rgb(var(--ov) / 0.1); background: transparent; }
.lateral-recolher:hover { background: rgb(var(--ov) / 0.07); }

.lateral-perfil { gap: 12px; margin: 2px 0 8px; padding: 11px 12px; border: 1px solid rgb(var(--ov) / 0.09); border-radius: 14px; background: rgb(var(--ov) / 0.035); }
.lateral-perfil-txt strong { font-size: 14.5px; font-weight: 700; letter-spacing: -0.005em; }
.lateral-plano { padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; }

.lateral-nav { gap: 4px; padding-top: 4px; }
.lateral-grupo { gap: 3px; }
.lateral .lateral-item { height: 46px; padding: 0 14px; gap: 13px; border-radius: 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.003em; color: rgb(var(--ov) / 0.62); transform: none; transition: background 0.14s, color 0.14s; }
.lateral .lateral-item:hover { transform: none; color: var(--texto); background: rgb(var(--ov) / 0.06); }
.lateral .lateral-item .menu-icone { width: 21px; height: 21px; stroke-width: 1.7; opacity: 1; }
.lateral .lateral-item[aria-current="page"] { color: #fff; background: color-mix(in srgb, var(--destaque) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destaque) 38%, transparent); }
.lateral .lateral-item[aria-current="page"]::after { content: none; animation: none; }
.lateral .lateral-item[aria-current="page"]::before { left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--destaque); box-shadow: none; }
.lateral .lateral-item[aria-current="page"] .menu-icone { color: #7fb2ff; }
.lateral-selo { padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--destaque) 20%, transparent); color: #9cc4ff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destaque) 40%, transparent); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

.lateral-titulo { display: flex; align-items: center; gap: 8px; padding: 0 14px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; opacity: 0.6; }

.lateral-rodape { padding-top: 12px; border-top: 1px solid rgb(var(--ov) / 0.08); }
.lateral .lateral-direita { gap: 8px; }
.lateral .idioma { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: 3px; border-radius: 10px; border: 1px solid rgb(var(--ov) / 0.1); background: rgb(var(--ov) / 0.03); }
.lateral .idioma button { min-width: 0; height: 30px; border-radius: 7px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; }
.lateral .conta { height: 46px; gap: 12px; padding: 0 8px; border-radius: 12px; }
.lateral .conta:hover { background: rgb(var(--ov) / 0.06); }
.lateral .conta::after { font-size: 14.5px; font-weight: 600; color: rgb(var(--ov) / 0.62); }

body.lateral-recolhida .lateral { padding: 18px 11px 14px; }
body.lateral-recolhida .lateral .idioma { grid-template-columns: 1fr; }
body.lateral-recolhida .lateral .lateral-item[aria-current="page"]::before { left: -11px; }
/* botão de recolher/expandir a barra lateral: maior e com ícone de menu */
.lateral-recolher { width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgb(var(--ov) / 0.2); background: rgb(var(--ov) / 0.08); color: var(--texto); }
.lateral-recolher:hover { background: rgb(var(--ov) / 0.16); border-color: rgb(var(--ov) / 0.3); }
.lateral-recolher svg { width: 22px; height: 22px; stroke-width: 1.9; transform: none; }
body.lateral-recolhida .lateral-recolher svg { transform: scaleX(-1); }

/* Análise aberta a partir do gráfico: sem a barra lateral (fora do quadro) */
body.sim-sem-barra .lateral { display: none; }
body.com-lateral.sim-sem-barra { padding-left: 0; }

/* Menu da conta (idioma e configurações) */
.lateral .lateral-direita .idioma { display: none; }

.lateral-menu { position: fixed; z-index: 120; width: 248px; padding: 8px; border: 1px solid rgb(var(--ov) / 0.14); border-radius: 10px; background: #0f1722; box-shadow: 0 18px 44px rgb(0 0 0 / 0.55); animation: aviso-entra 0.18s cubic-bezier(0.2, 0.8, 0.3, 1); }
.lateral-menu[hidden] { display: none; }

.idioma-op { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--texto); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.idioma-op:hover { background: rgb(var(--ov) / 0.07); }
.idioma-op[aria-checked="true"] { background: color-mix(in srgb, var(--destaque) 14%, transparent); color: #fff; }
.idioma-op[aria-checked="true"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--destaque); }
.lateral-menu-item { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--texto); font: inherit; font-size: 14px; font-weight: 600; text-align: left; }
.lateral-menu-item:disabled { color: var(--suave); cursor: default; }
.lateral-menu-item em { padding: 1px 7px; border-radius: 6px; background: rgb(var(--ov) / 0.1); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.lateral .conta[aria-expanded="true"] { background: rgb(var(--ov) / 0.08); }

/* =====================================================================
   Botões principais: sóbrios (sem fundo azul chapado). Escuro com contorno fino; o azul só aparece no foco e ao passar o mouse.
   ===================================================================== */
.botao-principal, .botao-pequeno, .lst-prim, .cc-rodape .botao-principal, .ee .ind-cfg-rodape .botao-principal,
#s-novo.lst-prim, .lab-hero .lst-prim, .vv-nova, .ind-cab-aba .botao-pequeno {
  background: rgb(var(--ov) / 0.09) !important; color: var(--texto) !important; border: 1px solid rgb(var(--ov) / 0.24) !important; border-radius: 8px !important;
  box-shadow: none !important; filter: none !important; font-weight: 700; transition: background 0.14s, border-color 0.14s;
}
.botao-principal:hover:not(:disabled), .botao-pequeno:hover:not(:disabled), .lst-prim:hover:not(:disabled), .vv-nova:hover {
  background: color-mix(in srgb, var(--destaque) 16%, transparent) !important; border-color: var(--destaque) !important; filter: none !important; transform: none !important;
}
.botao-principal:focus-visible, .botao-pequeno:focus-visible, .lst-prim:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.lst-prim .lst-ic svg { stroke: currentColor; }
.ind-vazio, .lm-vazio { text-align: center; align-items: center; }
.ind-vazio { display: flex; flex-direction: column; gap: 8px; padding: 36px 20px; }
.ind-vazio .botao-pequeno { margin-top: 6px; }

.botao-principal.botao-apagar { background: var(--baixa) !important; border-color: var(--baixa) !important; color: #1a0509 !important; }

.sim-cartao-abrir, .cp-slot-add { background: rgb(var(--ov) / 0.09) !important; color: var(--texto) !important; border: 1px solid rgb(var(--ov) / 0.24) !important; border-radius: 8px !important; box-shadow: none !important; }
.sim-cartao-abrir:hover { background: color-mix(in srgb, var(--destaque) 16%, transparent) !important; border-color: var(--destaque) !important; filter: none !important; }
.sim-cartao-analise { border-radius: 8px; }

@media (max-height: 860px) {
  .lateral { padding-top: 12px; gap: 4px; }
  
  .lateral-perfil { padding: 8px 10px; margin-bottom: 4px; }
  .lateral .lateral-item, body.lateral-recolhida .lateral .lateral-item { height: 40px; }
  .lateral-nav { gap: 2px; }
  .lateral .conta { height: 40px; }
  .lateral-rodape { padding-top: 8px; }
}
@media (max-height: 680px) {
  .lateral-perfil { display: none; }
  .lateral .lateral-item, body.lateral-recolhida .lateral .lateral-item { height: 36px; }
  .lateral .conta { height: 36px; }
}

/* Botões principais: contorno suave e um leve brilho ao passar o mouse */
.botao-principal, .botao-pequeno, .lst-prim, .cc-rodape .botao-principal, .ee .ind-cfg-rodape .botao-principal,
#s-novo.lst-prim, .lab-hero .lst-prim, .vv-nova, .ind-cab-aba .botao-pequeno, .sim-cartao-abrir {
  background: rgb(var(--ov) / 0.07) !important; border: 1px solid rgb(var(--ov) / 0.1) !important; transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.botao-principal:hover:not(:disabled), .botao-pequeno:hover:not(:disabled), .lst-prim:hover:not(:disabled), .vv-nova:hover, .sim-cartao-abrir:hover {
  background: rgb(var(--ov) / 0.12) !important; border-color: rgb(var(--ov) / 0.18) !important;
}
button .ic-mais, .lst-ic svg { width: 15px; height: 15px; margin-right: 7px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; vertical-align: -2px; }
.botao-pequeno { display: inline-flex; align-items: center; justify-content: center; }

/* botão de recolher a barra: de volta ao estilo discreto (seta simples) */
.lateral-recolher { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgb(var(--ov) / 0.1); background: transparent; color: var(--suave); }
.lateral-recolher:hover { background: rgb(var(--ov) / 0.07); color: var(--texto); border-color: rgb(var(--ov) / 0.1); }
.lateral-recolher svg { width: 16px; height: 16px; stroke-width: 2.2; }

body.lateral-recolhida .lateral .marca { margin-top: 2px; }

/* perfil clicável, idioma + tema acima da conta, menu da conta com ícones */
button.lateral-perfil { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.lateral-perfil:hover { border-color: rgb(var(--ov) / 0.28); }

.lateral-idiomas-menu { position: fixed; z-index: 130; min-width: 190px; max-height: 320px; overflow-y: auto; padding: 6px; border: 1px solid rgb(var(--ov) / 0.16); border-radius: 12px; background: #0f1722; box-shadow: 0 18px 44px rgb(0 0 0 / 0.5); }
.lateral-idiomas-menu[hidden] { display: none; }
.lateral-idiomas-menu .idioma-op { display: block; width: 100%; padding: 11px 14px; border: 0; border-radius: 8px; background: none; color: var(--texto); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.lateral-idiomas-menu .idioma-op:hover { background: rgb(var(--ov) / 0.08); }
.lateral-idiomas-menu .idioma-op[aria-checked="true"] { background: rgb(var(--ov) / 0.12); font-weight: 700; }
.lateral-menu-item { gap: 10px; justify-content: flex-start; }
.lateral-menu-item svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; color: var(--suave); }
.lateral-menu-item:hover { background: rgb(var(--ov) / 0.08); }
.lateral-menu-item.sair { color: var(--baixa); }
.lateral-menu-item.sair svg { color: var(--baixa); }

/* tema claro: botãozinho liga/desliga no menu da conta, igual ao da página inicial */
.lateral-menu-item.tema .chave { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: rgb(var(--ov) / 0.28); transition: background 0.18s; }
.lateral-menu-item.tema .chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform 0.18s; }
.lateral-menu-item.tema[aria-checked="true"] .chave { background: #0a62ff; }
.lateral-menu-item.tema[aria-checked="true"] .chave::after { transform: translateX(16px); }
.lateral-menu-item.tema .chave { margin-left: auto; }

/* marca: o nome com mais personalidade (peso alto, letras justas e degradê) e o ícone de replay */
.marca-nome, .s-marca span { font-weight: 800; letter-spacing: -0.045em; background: linear-gradient(100deg, #ffffff 15%, #8fb8ff 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca-icone, .s-marca svg { color: #5b9bff; filter: drop-shadow(0 0 8px rgb(91 155 255 / 0.55)); }
html[data-aparencia="claro"] .marca-nome, html[data-aparencia="claro"] .s-marca span { background: linear-gradient(100deg, #0f1b2d 20%, #2563eb 95%); -webkit-background-clip: text; background-clip: text; }
html[data-aparencia="claro"] .marca-icone, html[data-aparencia="claro"] .s-marca svg { color: #2563eb; filter: none; }

/* TESTE de modelos para o item selecionado do menu lateral */
html[data-sel="a"] .lateral .lateral-item[aria-current="page"] { background: color-mix(in srgb, var(--destaque) 14%, transparent); box-shadow: none; color: #fff; }
html[data-sel="a"] .lateral .lateral-item[aria-current="page"]::before { content: none; }
html[data-sel="b"] .lateral .lateral-item[aria-current="page"] { background: none; box-shadow: none; color: #fff; }
html[data-sel="b"] .lateral .lateral-item[aria-current="page"]::before { left: -14px; top: 8px; bottom: 8px; width: 4px; box-shadow: 0 0 12px color-mix(in srgb, var(--destaque) 70%, transparent); }
html[data-sel="c"] .lateral .lateral-item[aria-current="page"] { background: rgb(var(--ov) / 0.1); box-shadow: none; color: #fff; }
html[data-sel="c"] .lateral .lateral-item[aria-current="page"]::before { content: none; }
html[data-sel="a"] .lateral .lateral-item[aria-current="page"] .menu-icone, html[data-sel="c"] .lateral .lateral-item[aria-current="page"] .menu-icone { color: #8fbcff; }
/* etiquetas do plano: FREE cinza, INTER azul, PRO dourada */
.lateral-plano.free { background: rgb(var(--ov) / 0.1); color: var(--suave); box-shadow: inset 0 0 0 1px rgb(var(--ov) / 0.18); }
.lateral-plano.inter { background: color-mix(in srgb, var(--destaque) 22%, transparent); color: #9cc4ff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destaque) 55%, transparent); }
.lateral-plano.pro { background: linear-gradient(100deg, #f7c04e, #ffe08a 55%, #f1a93c); color: #3a2600; box-shadow: 0 0 14px rgb(247 192 78 / 0.35); }
.lateral-plano.pro::before { content: "★ "; font-size: 0.95em; }

/* separação clara entre o menu lateral e o conteúdo: divisória mais firme, sombra do menu sobre a tela e um degradê suave na borda da tela */
.lateral { border-right: 1px solid rgb(var(--ov) / 0.17); box-shadow: 14px 0 34px -10px rgb(0 0 0 / 0.65); z-index: 30; }
@media (max-width: 1100px) { .lateral { z-index: 65; } }          /* gaveta: tem que ficar acima do fundo que fecha ao clicar fora (z-index 55), senão o clique num item só fecha a gaveta */
.quadro-caixa::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 22px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / 0.34), transparent); }
html[data-aparencia="claro"] .quadro-caixa::before { background: linear-gradient(90deg, rgb(15 23 42 / 0.1), transparent); }
@media (max-width: 760px) { .lateral { box-shadow: 0 -10px 30px -10px rgb(0 0 0 / 0.6); } .quadro-caixa::before { display: none; } }

/* ícone do título das páginas: sem contorno azul nem brilho; um quadrado suave, reto, como o modelo de seleção do menu */
.sim-lista-cab h2::before, .est-banner h2::before { width: 48px; height: 48px; border-radius: 14px; transform: none; box-shadow: none; background-color: color-mix(in srgb, var(--destaque) 15%, transparent); background-size: 26px; }
/* modelo de seleção d: pílula clara */
html[data-sel="d"] .lateral .lateral-item[aria-current="page"] { background: #e8effc; color: #0b1220; box-shadow: none; }
html[data-sel="d"] .lateral .lateral-item[aria-current="page"]::before { content: none; }
html[data-sel="d"] .lateral .lateral-item[aria-current="page"] .menu-icone { color: #2563eb; }
/* plano PRO: roxo para azul (sem o amarelo) */
.lateral-plano.pro { background: linear-gradient(100deg, #7a5cff, #3d7bff); color: #fff; box-shadow: 0 0 16px rgb(110 120 255 / 0.4); }
.lateral-plano.pro::before { content: "◆ "; font-size: 0.8em; letter-spacing: 0; }

/* cabeçalho das páginas: o ícone sem quadrado, solto ao lado do título, e o subtítulo alinhado ao título */
.sim-lista-cab h2::before, .est-banner h2::before { width: 26px; height: 26px; border-radius: 0; background-color: transparent; background-size: 24px; }
.sim-lista-cab h2, .est-banner h2 { gap: 10px; }
.sim-lista-cab .suave, .est-banner .suave { margin-left: 36px; }

/* menu da conta: item de idioma com a lista ao lado */
.lateral-menu-item.idioma .rot { flex: 1; text-align: left; }
.lateral-menu-item.idioma .cod { margin-left: auto; padding-right: 4px; color: var(--suave); font-size: 12.5px; font-weight: 800; }
.lateral-menu-item.idioma svg { flex: none; width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lateral-menu-item.idioma svg:last-child { width: 14px; height: 14px; color: var(--suave); }
.lateral-menu-item.idioma[aria-expanded="true"] { background: rgb(var(--ov) / 0.1); }
.lateral-menu-item { justify-content: flex-start; gap: 10px; }
.lateral-menu-item.tema { justify-content: space-between; }
.lateral-menu-sep { margin: 6px 4px; border: 0; border-top: 1px solid rgb(var(--ov) / 0.1); }
.lateral .conta::after { font-size: 13.5px; }
/* a largura da barra lateral é fixa agora (não muda com a tela nem quando ela abre como gaveta) — pedido do usuário, 29/10/2026 */

/* item selecionado do menu lateral: cinza firme puxado para o azul (cor sólida, texto e ícone brancos) */
html[data-sel="a"] .lateral .lateral-item[aria-current="page"] { background: #364257; color: #fff; font-weight: 600; box-shadow: none; }
html[data-sel="a"] .lateral .lateral-item[aria-current="page"] .menu-icone { color: #fff; opacity: 1; }

/* "Configurações da conta" nunca quebra em duas linhas: em telas menores usa o nome curto */
.lateral .conta::after { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lateral .conta { min-width: 0; }
@media (max-width: 1360px) { .lateral .conta::after { content: attr(data-curto); } }

/* TESTE DE FUNDO (tema escuro menos fechado): cinza-azulado mais alto no lugar do quase preto. Para voltar, apague este bloco. */
:root {
  --fundo: #12171f;
  --painel: #171d27;
  --realce: #1f2632;
  --linha: #283140;
  --linha-forte: #36425a;
  --card-fundo: #181f2b;
  --moldura: #151b26;
  --moldura-linha: #2a3547;
}

/* sem sombra entre o menu lateral e o conteúdo: só o traço fino da divisão */
.lateral { box-shadow: none !important; }
@media (max-width: 760px) { .lateral { box-shadow: none !important; } }
.quadro-caixa::before, html[data-aparencia="claro"] .quadro-caixa::before { display: none !important; }

/* listas de escolha (select) legíveis em qualquer página: fundo escuro com texto claro, e o contrário no tema claro */
select { color-scheme: dark; }
select option, select optgroup { background: #131b2b; color: #e8eefb; }
select option:checked, select option:hover { background: #24406b; color: #fff; }
html[data-aparencia="claro"] select { color-scheme: light; }
html[data-aparencia="claro"] select option, html[data-aparencia="claro"] select optgroup { background: var(--card-fundo); color: #1b2433; }
html[data-aparencia="claro"] select option:checked, html[data-aparencia="claro"] select option:hover { background: #dbe7fd; color: #1b2433; }

/* tag "IA" do menu: pastilha só de cor (degradê azul-violeta), sem contorno */
.lateral-selo.ia { padding: 2px 9px; border-radius: 999px; background: linear-gradient(135deg, #5b8cff, #a06bff); color: #fff; box-shadow: none; font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; }

/* Simulador no menu: fundo de cor própria (azul-violeta suave), só cor, sem contorno */
.lateral .lateral-item[data-arquivo="simulador.html"] { background: linear-gradient(135deg, color-mix(in srgb, #5b8cff 20%, transparent), color-mix(in srgb, #a06bff 20%, transparent)); }
.lateral .lateral-item[data-arquivo="simulador.html"] .menu-icone { color: #b7a6ff; opacity: 1; }
.lateral .lateral-item[data-arquivo="simulador.html"]:hover { background: linear-gradient(135deg, color-mix(in srgb, #5b8cff 30%, transparent), color-mix(in srgb, #a06bff 30%, transparent)); }
html .lateral .lateral-item[data-arquivo="simulador.html"][aria-current="page"] { background: linear-gradient(135deg, color-mix(in srgb, #5b8cff 42%, transparent), color-mix(in srgb, #a06bff 42%, transparent)); color: #fff; box-shadow: none; }
html .lateral .lateral-item[data-arquivo="simulador.html"][aria-current="page"] .menu-icone { color: #fff; }

/* Central de ajuda: link pequeno e discreto logo acima da conta */
.lateral .lateral-ajuda { height: 32px; margin: 0 0 4px; padding: 0 10px; font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--suave) 85%, transparent); }
.lateral .lateral-ajuda .menu-icone { width: 17px; height: 17px; }
.lateral .lateral-ajuda:hover { transform: none; }

.lateral button.lateral-ajuda { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.lateral button.lateral-ajuda:hover { color: var(--texto); background: rgb(var(--ov) / 0.05); }
.lateral button.lateral-ajuda:focus-visible { outline: 2px solid var(--destaque); outline-offset: -2px; }
.lateral button.lateral-ajuda .menu-icone { flex: none; width: 17px; height: 17px; }
body.lateral-recolhida .lateral button.lateral-ajuda { justify-content: center; padding: 0; }
body.lateral-recolhida .lateral button.lateral-ajuda span { display: none; }
.lateral button.lateral-ajuda[aria-expanded="true"] { color: var(--texto); background: rgb(var(--ov) / 0.07); }

/* tema claro: texto escuro onde o escuro usa branco sobre um tom translúcido do destaque (no claro o fundo fica quase transparente) */
html[data-aparencia="claro"] .trilho-botao:hover:not(:disabled) { color: var(--texto); }
html[data-aparencia="claro"] .trilho-botao.aberto { color: var(--texto); }
html[data-aparencia="claro"] .idioma-op[aria-checked="true"] { color: var(--texto); }

/* tema claro: textos que no escuro usam um tom claro fixo ficam num tom escuro da mesma cor */
html[data-aparencia="claro"] .trilho-botao { color: #1f4fc7; }

/* "Fazer upgrade" logo abaixo do cartão da conta (lateral.js, 02/11/2026): mesmo degradê dos botões do Pip, sem contorno */
.lateral-upgrade { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 38px; margin: 0 0 10px; padding: 0 12px; border: 0; border-radius: 11px; background: linear-gradient(140deg, #4f9dff, #7b6cff 60%, #a35cff); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px -10px rgb(104 108 255 / 0.7); transition: transform 0.12s, box-shadow 0.12s; }
.lateral-upgrade:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgb(104 108 255 / 0.9); }
.lateral-upgrade:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lateral-upgrade .menu-icone { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.lateral-upgrade[hidden] { display: none; }
body.lateral-recolhida .lateral-upgrade { padding: 0; }
body.lateral-recolhida .lateral-upgrade .lateral-rot { display: none; }
@media (max-width: 760px) { .lateral-upgrade { display: none; } }
@media (prefers-reduced-motion: reduce) { .lateral-upgrade, .lateral-upgrade:hover { transition: none; transform: none; } }

/* etiquetas do plano na barra lateral (02/11/2026): o usuário gostou só da do Pro; Free e Plus na mesma família */
.lateral-plano.free { background: linear-gradient(100deg, #3a4558, #2b3445); color: #d3dcea; box-shadow: none; }
.lateral-plano.inter { background: linear-gradient(100deg, #2f7bff, #35b6ff); color: #fff; box-shadow: 0 0 12px rgb(53 150 255 / 0.32); }
.lateral-plano.inter::before { content: "✦ "; font-size: 0.85em; letter-spacing: 0; }
html[data-aparencia="claro"] .lateral-plano.free { background: linear-gradient(100deg, #e3e8f0, #d5dce7); color: #334155; }

/* ícone das Configurações da conta (02/11/2026): sem azul nem anel, só a engrenagem na cor do texto suave */
.lateral .conta-avatar { background: none; box-shadow: none; color: var(--suave); }
.lateral .conta:hover .conta-avatar { color: var(--texto); }

/* =====================================================================
   CELULAR (02/11/2026): barra de cima fixa com os 3 tracinhos à ESQUERDA da logo (igual ao site público, 03/11/2026); o menu cai por baixo dela (largura inteira).
   Os menus de cada página (abas) viram uma sub-barra que rola de lado.
   ===================================================================== */
@media (max-width: 760px) {
  :root { --faixa-h: 56px; }
  .topo-faixa { gap: 6px; padding: 0 8px 0 4px; }
  .topo-faixa .marca { margin-right: auto; }
  .faixa-expandir { width: 42px; height: 42px; }
  .faixa-expandir svg { width: 24px; height: 24px; }
  .lateral { z-index: 65; top: var(--faixa-h); left: 0; right: 0; bottom: auto; width: auto; max-height: calc(100dvh - var(--faixa-h)); overflow-y: auto; border-right: 0; border-radius: 0 0 18px 18px; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform 0.18s ease, opacity 0.18s ease, visibility 0.18s; box-shadow: 0 28px 50px -10px rgb(0 0 0 / 0.6); }
  body.lateral-aberta .lateral { transform: none; opacity: 1; visibility: visible; }
  body.lateral-aberta .faixa-fundo { background: rgb(0 0 0 / 0.5); }
  [role="tablist"] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  [role="tablist"]::-webkit-scrollbar { display: none; }
  [role="tablist"] > * { flex: none; white-space: nowrap; }
}

/* Cabeçalho das páginas (escolhido pelo usuário em 02/11/2026, "título em degradê", dividido): nome em degradê com um traço curto embaixo | descrição.
   Clean: sem ícone, sem faixa e sem a linha comprida embaixo; o brilho de trás fica bem fraco. */
:is(.sim-lista-cab, .cabeca-filtros, .est-banner) { padding-top: 4px; padding-bottom: 4px; margin-bottom: 10px; background: none; }
:is(.sim-lista-cab, .cabeca-filtros, .est-banner)::before { opacity: 0.3; }
:is(.sim-lista-cab, .cabeca-filtros, .est-banner) > div:has(> h2):not(.ct-tit) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 32px; }
:is(.sim-lista-cab, .cabeca-filtros, .est-banner) h2 { display: block !important; font-size: 36px !important; letter-spacing: -0.03em; background: linear-gradient(100deg, var(--texto) 30%, color-mix(in srgb, var(--destaque) 70%, var(--texto)) 70%, var(--alta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
:is(.sim-lista-cab, .cabeca-filtros, .est-banner) h2 > * { -webkit-text-fill-color: initial; }
:is(.sim-lista-cab, .cabeca-filtros, .est-banner) h2::before { display: none; }
:is(.sim-lista-cab, .cabeca-filtros, .est-banner) h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--destaque), var(--alta)); }
:is(.sim-lista-cab .suave, .cabeca-filtros .perf-sub, .est-banner .suave) { margin: 0 !important; padding-left: 32px; border-left: 1px solid rgb(var(--ov) / 0.14); }
@media (max-width: 760px) {
  :is(.sim-lista-cab, .cabeca-filtros, .est-banner) > div:has(> h2):not(.ct-tit) { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  :is(.sim-lista-cab, .cabeca-filtros, .est-banner) h2 { font-size: 28px; }
  :is(.sim-lista-cab .suave, .cabeca-filtros .perf-sub, .est-banner .suave) { padding-left: 0; border-left: 0; }
}
.lateral-grupo[hidden] { display: none; }

/* Densidade compacta (notebook, ver densidade.js): o quadro inteiro (barra lateral, faixa de cima e a tela do meio) é desenhado em escala menor, igual ao zoom do
   navegador, para ficar proporcional ao que se vê numa tela grande. O `zoom` fica só no quadro (body[data-quadro]); a tela do meio recebe o zoom como zoom real
   de página (devicePixelRatio e janela maiores), então o gráfico e o mouse funcionam como sempre. O nível normal não tem nenhuma regra aqui. */
html[data-densidade="compacta"] body[data-quadro] { zoom: var(--escala, 0.85); height: calc(100vh / var(--escala, 0.85)); height: calc(100dvh / var(--escala, 0.85)); }
html[data-densidade="compacta"] .quadro-caixa { height: calc(100vh / var(--escala, 0.85) - var(--altura-topo, 0px)); height: calc(100dvh / var(--escala, 0.85) - var(--altura-topo, 0px)); }
html[data-densidade="compacta"] body.quadro-cheio .quadro-caixa { height: calc(100vh / var(--escala, 0.85)); height: calc(100dvh / var(--escala, 0.85)); }
/* Barra lateral que estica com a altura (--altura-efetiva, ver densidade.js): sobrou espaço embaixo, itens e espaços crescem um pouco, dentro de limites.
   Vale para todas as janelas largas (≥ 761 px); a compacta tem a própria curva (um pouco maior) e desfaz as regras de janela baixa (≤ 860 e ≤ 680 px),
   que medem a janela sem o zoom e apertariam a barra à toa. */
@media (min-width: 761px) {
  html body .lateral .lateral-item, html body.lateral-recolhida .lateral .lateral-item, html body .lateral .conta { height: clamp(44px, calc(var(--altura-efetiva, 800px) * 0.058), 54px); }
  html body .lateral-nav { gap: clamp(4px, calc(var(--altura-efetiva, 800px) * 0.008), 10px); }
}
html[data-densidade="compacta"] .lateral { padding-top: 18px; gap: 8px; }
html[data-densidade="compacta"] .lateral-perfil { display: flex; padding: 12px 12px; margin: 2px 0 12px; }
html[data-densidade="compacta"] .lateral .lateral-item, html[data-densidade="compacta"] body.lateral-recolhida .lateral .lateral-item, html[data-densidade="compacta"] .lateral .conta { height: clamp(48px, calc(var(--altura-efetiva, 760px) * 0.08), 64px); }
html[data-densidade="compacta"] .lateral-nav { gap: clamp(8px, calc(var(--altura-efetiva, 760px) * 0.016), 16px); }
html[data-densidade="compacta"] .lateral-rodape { padding-top: 14px; }
html[data-densidade="compacta"] .lateral-selo { padding: 2px 10px; font-size: 12px; }

/* Laboratório (beta): selo discreto e um arco azul que dá a volta pela borda do item, sempre sobre o mesmo contorno */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.lateral-selo.beta { padding: 2px 9px; border-radius: 999px; background: rgb(var(--ov) / 0.1); color: var(--suave); box-shadow: none; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }
.lateral .lateral-item.com-giro { position: relative; }
.lateral .lateral-item.com-giro::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ang), transparent 0 62%, color-mix(in srgb, var(--destaque) 30%, transparent) 82%, color-mix(in srgb, var(--destaque) 70%, #fff) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: lateral-giro 3.2s linear infinite; pointer-events: none; }
@keyframes lateral-giro { to { --ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .lateral .lateral-item.com-giro::before { animation: none; } }

/* barra lateral: a mesma linha do topo separa o perfil da lista de itens e fecha a lista embaixo */
.lateral-perfil { margin-bottom: 0; }
.lateral-nav { margin-top: 16px; padding: 16px 0; border-top: 1px solid var(--moldura-linha, var(--linha)); border-bottom: 1px solid var(--moldura-linha, var(--linha)); }
.lateral-rodape { border-top: 0; }
@media (max-width: 760px) { .lateral-nav { margin-top: 0; padding: 0; border: 0; } }

/* e-mail por confirmar: tela por cima da ferramenta, sem fechar (lateral.js, exigirEmail) */
.ep-fundo { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; background: rgb(4 7 14 / 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ep-caixa { width: min(100%, 520px); display: grid; gap: 14px; justify-items: center; padding: clamp(26px, 5vw, 44px); border: 1px solid rgb(var(--ov) / 0.14); border-radius: 22px; background: #121316; box-shadow: 0 30px 80px rgb(0 0 0 / 0.6); text-align: center; }
.ep-caixa h2 { margin: 0; font-size: clamp(24px, 4vw, 30px); font-weight: 800; letter-spacing: -0.02em; }
.ep-texto { margin: 0; max-width: 40ch; color: var(--suave); font-size: 15.5px; line-height: 1.55; }
.ep-email { margin: 2px 0; padding: 12px 18px; max-width: 100%; border-radius: 12px; background: rgb(var(--ov) / 0.06); font-size: 17px; font-weight: 700; word-break: break-all; }
.ep-status { margin: 0; display: inline-flex; align-items: center; gap: 9px; color: var(--suave); font-size: 14px; }
.ep-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5b9bff; animation: ep-pulsa 1.4s ease-in-out infinite; }
@keyframes ep-pulsa { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.ep-reenviar { width: 100%; height: 50px; margin-top: 6px; border: 0; border-radius: 999px; background: #0a62ff; color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.ep-reenviar:hover:not(:disabled) { background: #2c78ff; }
.ep-reenviar:disabled { opacity: 0.55; cursor: default; }
.ep-sair { border: 0; background: none; color: var(--suave); font: inherit; font-size: 14px; cursor: pointer; }
.ep-sair:hover { color: var(--texto); text-decoration: underline; }
.ep-reenviar:focus-visible, .ep-sair:focus-visible { outline: 2px solid #5b9bff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ep-status::before { animation: none; } }
html[data-aparencia="claro"] .ep-fundo { background: rgb(240 243 249 / 0.82); }
html[data-aparencia="claro"] .ep-caixa { background: #fff; }