/*
 * TickerSpring — tema claro e contínuo.
 *
 * Aditivo: nada no bundle compilado foi tocado. O site é todo movido por
 * variáveis CSS, por isso a paleta troca-se na raiz e desce por todas as páginas.
 *
 * A ideia é uma página só, sem cortes: o céu do herói dissolve-se no papel em vez
 * de terminar a direito, e as faixas escuras que antes partiam a página ao meio
 * (cabeçalho, mastheads, rodapé) passam a papel.
 *
 * A inversão é feita na superfície (--dark) e não nos tokens de texto: o bundle
 * usa --dark-text e --forest-text as duas coisas, cor de letra E fundo de
 * pastilha, por isso invertê-los apagava o texto das pastilhas. Ficam claros e a
 * cor do texto das superfícies que mudaram de lado é corrigida numa lista fechada
 * mais abaixo, tirada do próprio CSS compilado.
 *
 * As cores de estado (seguro, atenção, perigo) ficam como estavam. Numa página de
 * finanças o verde e o vermelho querem dizer alguma coisa e não são decoração.
 */

:root {
  /* Céu e crómio, tirados da fotografia. */
  --ts-sky: #9ed5fa;
  --ts-sky-mid: #5f8ee8;
  --ts-sky-deep: #2d5bd6;
  --ts-sky-wash: #eaf4ff;
  --ts-lilac: #cbb9fa;
  --ts-blush: #f5bddd;
  --ts-mint: #d5edbc;

  --ts-paper: #f7f8f2;
  --ts-ground: #edeee9;
  --ts-ink: #24282b;

  /* Botões com face: degradê vertical, brilho em cima e sombra em baixo. */
  --ts-face-silver: linear-gradient(180deg, #fff 0%, #f4f5f5 18%, #e0e3e8 48%, #cdd3dc 52%, #edf0f4 100%);
  --ts-face-shadow: 0 3px 2px rgba(255, 255, 255, .53), 0 8px 18px rgba(41, 60, 89, .14),
    inset 0 1px 1px #fff, inset 0 -2px 2px rgba(255, 255, 255, .6), inset 0 -5px 5px rgba(36, 60, 94, .15);

  /* Marca. */
  --accent: #2d5bd6;
  --accent-on-dark: #2d5bd6;
  --accent-tint: rgba(45, 91, 214, .10);
  --accent-tint-soft: rgba(45, 91, 214, .055);
  --ember: #c2691f;
  --ember-tint: rgba(194, 105, 31, .12);

  /* Superfícies. */
  --paper: var(--ts-paper);
  --cream: #e9ebe4;
  --cream-2: #fbfcf8;
  --card: #fffffd;
  --sage: var(--ts-sky-wash);

  /* Texto e linhas. */
  --ink: var(--ts-ink);
  --ink-soft: #3d444a;
  --muted: #6b7278;
  --muted-2: #8b9298;
  --line: rgba(36, 40, 43, .13);
  --line-soft: rgba(36, 40, 43, .07);
  --line-strong: rgba(36, 40, 43, .24);

  /*
   * A inversão, feita à justa.
   *
   * Trocar a superfície (--dark) chega para as faixas escuras passarem a papel.
   * O que NÃO se troca é --dark-text nem --forest-text: apesar do nome, o bundle
   * também os usa como FUNDO, nas pastilhas de tinta com etiqueta clara
   * (.btn-light, .chip.active, .token-logo-fallback). Invertê-los punha tinta
   * sobre tinta e o texto desaparecia. Ficam claros, e a cor do texto das
   * superfícies que mudaram de lado é corrigida uma a uma mais abaixo.
   */
  --dark: var(--ts-paper);
  --dark-muted: #6b7278;
  --line-dark: rgba(36, 40, 43, .13);
  --forest-deep: var(--ts-sky-wash);
  --forest-light: var(--ts-sky-deep);
  --forest-muted: #6b7278;
  --forest-line: rgba(36, 40, 43, .13);
  --forest: var(--accent);
  --lime: var(--accent);

  --shadow: 0 18px 50px rgba(41, 54, 61, .07);
  --radius: 14px;
  --radius-sm: 11px;

  /* Estado: deixado legível de propósito. */
  --risk-safe: #1f8f63;
  --risk-safe-tint: rgba(31, 143, 99, .12);
  --info: #2d5bd6;
  --info-tint: rgba(45, 91, 214, .12);
}

html {
  background: var(--ts-ground);
}

body {
  background: var(--ts-ground);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- tipografia */

h1, h2, h3, .hero-text h1 {
  letter-spacing: -.035em;
  font-weight: 400;
}

h1, .hero-text h1 {
  letter-spacing: -.045em;
}

/* --------------------------------------------------------------- cabeçalho */

/*
 * O cabeçalho deixa de ser uma barra colada ao topo e passa a flutuar: cantos
 * redondos, fundo translúcido e desfoque por trás. Sem a barra escura, a página
 * começa no céu.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 0;
  padding: 12px 0 0;
}

.site-header .site-header-inner {
  background: rgba(247, 248, 242, .55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 18px;
  box-shadow: 0 5px 28px rgba(41, 54, 61, .09);
  padding-left: 18px;
  padding-right: 14px;
}

.site-header a,
.site-header .site-nav a {
  color: var(--ink);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--accent);
}

/* ------------------------------------------------------- botões com face */

.btn,
.wallet-button,
.header-token-copy {
  border-radius: 999px;
}

.btn-light,
.btn-secondary,
.header-token-copy {
  background: var(--ts-face-silver);
  color: var(--ink);
  border: 1px solid rgba(36, 40, 43, .10);
  box-shadow: var(--ts-face-shadow);
  font-weight: 500;
}

.btn-primary {
  background: linear-gradient(180deg, #7ba4ee 0%, #5f8ee8 18%, #3a68dc 48%, #2d5bd6 52%, #4f80e4 100%);
  color: #fff;
  border: 1px solid rgba(24, 56, 140, .35);
  box-shadow: 0 3px 2px rgba(255, 255, 255, .28), 0 10px 22px rgba(45, 91, 214, .28),
    inset 0 1px 1px rgba(255, 255, 255, .5), inset 0 -4px 6px rgba(18, 44, 110, .3);
  font-weight: 500;
}

.btn-primary:hover:not(:disabled),
.btn-light:hover,
.wallet-button:hover {
  filter: brightness(1.04);
  color: #fff;
}

.btn-light:hover {
  color: var(--ink);
}

.btn-primary:active:not(:disabled),
.btn-light:active,
.wallet-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(41, 60, 89, .2), inset 0 2px 4px rgba(18, 44, 110, .25);
}

.btn-primary:disabled {
  background: var(--ts-face-silver);
  color: var(--muted-2);
  box-shadow: none;
  border-color: var(--line);
}

.wallet-button {
  background: linear-gradient(180deg, #7ba4ee 0%, #5f8ee8 20%, #3a68dc 50%, #2d5bd6 54%, #4f80e4 100%);
  color: #fff;
  border: 1px solid rgba(24, 56, 140, .35);
  box-shadow: 0 3px 2px rgba(255, 255, 255, .25), 0 8px 18px rgba(45, 91, 214, .26),
    inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -4px 6px rgba(18, 44, 110, .28);
  font-weight: 500;
}

.wallet-button-connected {
  background: var(--ts-face-silver);
  color: var(--ink);
  box-shadow: var(--ts-face-shadow);
}

/* -------------------------------------------------------------------- herói */

/*
 * O céu entra por baixo do cabeçalho e sai por baixo em fumo, sem aresta. A
 * máscara é o que faz a fotografia acabar sem corte; o véu claro por cima da
 * esquerda é o que deixa o texto escuro legível contra as nuvens.
 */
.masthead.home-hero {
  position: relative;
  isolation: isolate;
  margin-top: -180px;
  padding-top: 228px;
  background-color: transparent;
  background-image: none;
  color: var(--ink);
  overflow: hidden;
}

.masthead.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    image-set(url("/brand/hero-2400.webp?v=sky") type("image/webp"), url("/brand/hero-2400.jpg?v=sky") type("image/jpeg"));
  background-size: cover;
  background-position: 62% 32%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0, 0, 0, .55) 86%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0, 0, 0, .55) 86%, rgba(0, 0, 0, 0) 100%);
}

.masthead.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(96deg, rgba(247, 248, 242, .78) 0%, rgba(247, 248, 242, .56) 26%, rgba(247, 248, 242, .2) 48%, rgba(247, 248, 242, .02) 66%, rgba(247, 248, 242, 0) 100%),
    linear-gradient(180deg, rgba(247, 248, 242, 0) 66%, rgba(237, 238, 233, .72) 90%, var(--ts-ground) 100%);
}

.masthead.home-hero .hero-text h1,
.masthead.home-hero .hero-text .hero-lede,
.masthead.home-hero .hero-facts,
.masthead.home-hero .eyebrow {
  color: var(--ink);
}

.masthead.home-hero .hero-lede,
.masthead.home-hero .hero-facts {
  color: var(--ink-soft);
}

.masthead.home-hero .eyebrow {
  color: var(--muted);
  letter-spacing: .16em;
}

/*
 * Mastheads das páginas internas: o mesmo céu, em água, e a acabar em papel
 * pelo mesmo motivo.
 */
.masthead:not(.home-hero) {
  position: relative;
  isolation: isolate;
  color: var(--ink);
  background:
    linear-gradient(180deg, var(--ts-sky-wash) 0%, rgba(234, 244, 255, .5) 62%, var(--ts-ground) 100%);
  border-bottom: 0;
}

.masthead:not(.home-hero) .eyebrow {
  color: var(--muted);
}

/* ------------------------------------------------------------------ secções */

/*
 * Sem faixas: as secções partilham o fundo e separam-se por espaço e por um fio,
 * não por mudança de cor.
 */
.wrap,
.wrap-app,
section.wrap {
  background: transparent;
}

.home-built {
  border-bottom: 1px solid var(--line-soft);
}

/* ------------------------------------------------------------------ cartões */

.home-board,
.stat-card,
.metric-cell,
.vault-table,
.panel,
.card {
  border-radius: var(--radius);
}

/*
 * Vidro, não papel branco: os cartões deixam passar o céu e o fundo por trás. O
 * desfoque é o que mantém os números legíveis apesar da transparência.
 */
.home-board {
  background: rgba(255, 255, 255, .46);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 20px 60px rgba(41, 54, 61, .14);
}

.stat-card,
.metric-cell {
  background: rgba(255, 255, 255, .42);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 1px 2px rgba(41, 54, 61, .03);
}

/* ------------------------------------------------------------------- rodapé */

/*
 * O rodapé segue o resto: papel, não uma faixa escura a fechar a página a
 * martelo.
 */
.site-footer {
  background: linear-gradient(180deg, var(--ts-ground) 0%, var(--ts-sky-wash) 100%);
  color: var(--ink);
  border-top: 1px solid var(--line);
}

.site-footer a,
.site-footer h2 {
  color: var(--ink);
}

.site-footer .footer-description,
.site-footer .footer-legal,
.site-footer .footer-network {
  color: var(--muted);
}

.footer-cta:hover {
  color: var(--accent);
}

/* -------------------------------------------------------------------- estado */

/*
 * O verde sobrevive onde quer dizer "isto está bem". Estes selos herdavam a cor
 * da marca; com a marca em azul, "Aberto" e "Dentro do intervalo" passavam a
 * ler-se como informação e não como bom sinal.
 */
.status-good,
.vault-table-tag-open,
.vault-table-tag-in-range,
.masthead .status-good,
.masthead .vault-table-tag-open,
.masthead .vault-table-tag-in-range {
  color: var(--risk-safe);
  background: var(--risk-safe-tint);
}

/*
 * O APR do cartão do herói seguia a cor da marca e a tabela tem o verde escrito à
 * mão. Ficavam dois números iguais com cores diferentes na mesma visita.
 */
.home-board-apr {
  color: #21865c;
}

/* ------------------------------------------------------------ campos e foco */

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ts-sky-deep);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ ecrãs pequenos */

@media (max-width: 860px) {
  .masthead.home-hero {
    margin-top: -300px;
    padding-top: 340px;
  }

  .masthead.home-hero::after {
    background-position: 68% 34%;
  }

  .masthead.home-hero::before {
    background:
      linear-gradient(180deg, rgba(247, 248, 242, .86) 0%, rgba(247, 248, 242, .6) 40%, rgba(237, 238, 233, .9) 86%, var(--ts-ground) 100%);
  }

  .site-header .site-header-inner {
    border-radius: 14px;
  }
}

/* ------------------------------------------------- acertos do tema claro */

/*
 * Estes três eram brancos sobre escuro. Com a página clara ficavam brancos sobre
 * claro, ou seja, invisíveis.
 */

/* O logótipo do X é um ficheiro branco; num cabeçalho claro tem de virar tinta. */
.header-social img {
  filter: brightness(0);
  opacity: .72;
}

.header-social:hover img {
  opacity: 1;
}

.header-social:hover {
  background: rgba(36, 40, 43, .06);
}

/* O contorno era branco a 28%: sobre papel não se via. */
.btn-outline-dark {
  background: var(--ts-face-silver);
  border-color: rgba(36, 40, 43, .12);
  color: var(--ink);
  box-shadow: var(--ts-face-shadow);
}

.btn-outline-dark:hover {
  border-color: rgba(36, 40, 43, .24);
  color: var(--ink);
  filter: brightness(1.03);
}

/*
 * No herói o botão de acção fica azul e o secundário prateado, para haver uma
 * ordem clara entre os dois em vez de dois botões com o mesmo peso.
 */
.masthead.home-hero .btn-light {
  background: linear-gradient(180deg, #7ba4ee 0%, #5f8ee8 18%, #3a68dc 48%, #2d5bd6 52%, #4f80e4 100%);
  color: #fff;
  border: 1px solid rgba(24, 56, 140, .35);
  box-shadow: 0 3px 2px rgba(255, 255, 255, .28), 0 10px 22px rgba(45, 91, 214, .3),
    inset 0 1px 1px rgba(255, 255, 255, .5), inset 0 -4px 6px rgba(18, 44, 110, .3);
}

.masthead.home-hero .btn-light:hover {
  color: #fff;
  filter: brightness(1.05);
}

/* ------------------------------------- texto das superfícies que mudaram de lado */

/*
 * Estas regras existem porque --dark-text ficou claro de propósito (ver acima).
 * Onde o bundle o usava como COR DE TEXTO, era sempre sobre uma faixa escura que
 * agora é papel, por isso o texto passa a tinta aqui. A lista é fechada: é
 * exactamente o que o bundle escreve com var(--dark-text).
 */
.site-header,
.site-header .brand,
.site-header .site-nav a[aria-current="page"],
.masthead,
.masthead .ln-stats strong,
.masthead .single-vault-metrics strong,
.masthead .sv-breadcrumb span:last-child,
.masthead .sv-stats strong,
.masthead-crumb span:last-child,
.masthead-tabs a[aria-current="page"],
.masthead-tabs button[aria-pressed="true"],
.mast-stats strong,
.mast-stats .stat-value,
.home-hero .hero h1,
.btn-outline-dark,
.btn-outline-dark:hover,
.home-hero .btn-outline-dark:hover,
[class*="tradeMast"] h1,
[class*="tradeIntro"] h1 {
  color: var(--ink);
}

.site-header .site-nav a[aria-current="page"] {
  color: var(--accent);
}

/* O botão claro dentro do painel de garantias tinha fundo próprio e escapava. */
.home-guard .btn-light {
  background: var(--ts-face-silver);
  color: var(--ink);
  border: 1px solid rgba(36, 40, 43, .10);
  box-shadow: var(--ts-face-shadow);
}

/* O passar do rato punha o botão da carteira branco; mantém a face azul. */
.site-header .wallet-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #7ba4ee 0%, #5f8ee8 20%, #3a68dc 50%, #2d5bd6 54%, #4f80e4 100%);
  border-color: rgba(24, 56, 140, .35);
  color: #fff;
}

/*
 * O cartão escuro era a única superfície com a cor escrita à mão, fora das
 * variáveis. Passa a papel como o resto, senão voltava a partir a página.
 */
.card-dark {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}

.card-dark .chip.active,
.card-dark .token-logo-fallback {
  background: var(--ts-ink);
  color: var(--ts-paper);
}

/* ------------------------------------------------------- faixa de parceiros */

/* Retirada a pedido. */
.home-built {
  display: none;
}

/* --------------------------------------- o resto do texto que era claro */

/*
 * Mesma história que acima, agora para --forest-text: era texto claro sobre
 * painéis escuros que passaram a claros. A lista é a que o bundle escreve.
 */
.card-dark,
.card-dark .chip,
.card-dark .chip:hover,
.card-dark .empty strong,
.card-dark .pool-oracle small:first-child,
.card-dark .pool-row,
.card-dark a.pool-row:hover,
.diagram-stage .empty strong,
.fee-allocation-empty strong,
.home-guard > div,
.home-guard h2,
[class*="docs_feeSplit"] [class*="docs_buybackShare"],
[class*="docs_oraclePanel"],
[class*="docs_tokenGraphic"],
[class*="trade_principle"],
[class*="trade_providers"],
[class*="trade_quoteFreshness"] button {
  color: var(--ink);
}

/*
 * O contorno no herói tinha a sua própria regra, mais específica do que a geral,
 * e ficava branco sobre o céu claro.
 */
.home-hero .btn-outline-dark,
.home-hero .btn-outline-dark:hover {
  background: var(--ts-face-silver);
  border-color: rgba(36, 40, 43, .12);
  color: var(--ink);
  box-shadow: var(--ts-face-shadow);
}

/*
 * O separador activo do Trade é uma pastilha de tinta e o bundle pintava-lhe a
 * legenda com --dark-muted, que aqui é escuro. Leva !important porque a regra do
 * bundle é de um CSS module com hash e não há como ser mais específico sem fixar
 * esse hash, que muda a cada build.
 */
[class*="trade_nav"] a[aria-current="page"],
[class*="trade_nav"] a[aria-current="page"] * {
  color: var(--ts-paper) !important;
}

/* ------------------------------------------------------------- menu móvel */

/*
 * O botão do menu e o painel que ele abre eram claros porque viviam sobre a barra
 * escura. Num cabeçalho de vidro claro desapareciam por completo: era isto que
 * fazia o cabeçalho parecer vazio em ecrãs estreitos.
 */
.mobile-nav-toggle,
.mobile-nav-toggle svg {
  color: var(--ink);
  stroke: currentColor;
}

.mobile-nav {
  color: var(--ink);
}

.mobile-nav-panel,
.mobile-nav [role="dialog"],
.mobile-nav > div {
  background: rgba(247, 248, 242, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.mobile-nav a,
.mobile-nav button {
  color: var(--ink);
}

/* -------------------------------------------------- página Intelligence */

/*
 * Esta página tinha desenho próprio, com as cores escritas à mão em vez de
 * variáveis, por isso não seguiu o resto do site. Aqui é traduzida para o mesmo
 * papel: verde-escuro passa a papel, os verdes-lima passam ao azul da marca e os
 * cinzentos esverdeados ao cinzento do texto secundário.
 */
[class*="intelligence_page"] {
  background: linear-gradient(180deg, var(--ts-sky-wash) 0%, var(--ts-ground) 55%, var(--ts-ground) 100%) !important;
  color: var(--ink) !important;
}

[class*="intelligence_page"] > .site-header,
[class*="intelligence_chamber"],
[class*="intelligence_hero"] {
  background: transparent !important;
}

[class*="intelligence_copy"] h1,
[class*="intelligence_intro"],
[class*="intelligence_digit"],
[class*="intelligence_revealDate"],
[class*="intelligence_revealDate"] time,
[class*="intelligence_secret"],
[class*="intelligence_bottomline"],
[class*="intelligence_reveal"] {
  color: var(--ink) !important;
}

[class*="intelligence_copy"] h1 em,
[class*="intelligence_signalIndex"],
[class*="intelligence_signalLabel"] {
  color: var(--accent) !important;
}

[class*="intelligence_eyebrow"],
[class*="intelligence_eyebrow"] > span,
[class*="intelligence_edition"],
[class*="intelligence_footer"],
[class*="intelligence_estimate"],
[class*="intelligence_pending"],
[class*="intelligence_pending"] span,
[class*="intelligence_axisHorizontal"],
[class*="intelligence_axisVertical"] {
  color: var(--muted) !important;
}

[class*="intelligence_footer"] a:hover {
  color: var(--accent) !important;
}

/* O botão de seguir era claro sobre escuro; passa a pastilha de metal. */
[class*="intelligence_follow"] {
  background: var(--ts-face-silver) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(36, 40, 43, .12) !important;
  border-radius: 999px;
  box-shadow: var(--ts-face-shadow);
}

[class*="intelligence_follow"]:hover {
  color: var(--ink) !important;
  filter: brightness(1.03);
}

/* A grelha de fundo e o toro eram traçados a verde sobre preto. */
[class*="intelligence_chamber"]:before,
[class*="intelligence_signalHalo"],
[class*="intelligence_drift"] {
  opacity: .5;
}

[class*="intelligence_orbit"] svg [stroke],
[class*="intelligence_chamber"] svg [stroke] {
  stroke: var(--ts-sky-mid) !important;
}

/* ---------------------------------------------------- acertos da página Trade */

/*
 * O título da página tinha a cor escrita por uma regra de CSS module mais
 * específica do que qualquer selector que se possa escrever sem fixar o hash do
 * nome, e esse hash muda a cada build. Daí o !important.
 */
[class*="tradeMast"] [class*="tradeIntro"] h1,
[class*="tradeIntro"] h1 {
  color: var(--ink) !important;
}

/*
 * O balão de ajuda do $SPRING usava --dark para o fundo e --dark-text para a
 * letra: com a página clara ficavam os dois claros e o balão aparecia vazio.
 * Um balão sobre um cabeçalho claro lê-se melhor escuro.
 */
.header-token-help {
  background: var(--ts-ink);
  color: var(--ts-paper);
  border-color: rgba(255, 255, 255, .18);
}

/* ------------------------------------------------------------ links retirados */

/*
 * Retirados a pedido: apontavam para o contrato do token antigo, para a página de
 * estado e para o centro de ajuda. display:none também os tira da navegação por
 * teclado, que é o que se quer. O do X esteve aqui enquanto não havia conta nova;
 * agora aponta para @FlouraVault e voltou ao cabeçalho e ao rodapé.
 */
.site-footer a[href*="blockscout.com"],
.site-footer a[href="/status"],
.site-footer a[href="/help"] {
  display: none;
}

@media (min-width: 1100px) {
  .masthead.home-hero {
    margin-top: -132px;
    padding-top: 180px;
  }
}

/* ---------------------------------------------------------------- logótipo */

/*
 * A marca passa a ser só o logótipo, sem o nome escrito ao lado. O SVG da roda e
 * o texto saem; o link fica com o logótipo como fundo. O `aria-label` do link já
 * diz o nome, por isso quem usa leitor de ecrã não perde nada.
 */
/* O cabeçalho tem a sua própria regra para este span, mais específica. */
.brand svg,
.brand span,
.site-header .brand span,
.site-footer .brand span {
  display: none;
}

/* Retirado do cabeçalho a pedido; continua no rodapé. */
.site-header .brand {
  display: none;
}

.brand {
  display: inline-block;
  width: 46px;
  height: 35px;
  background-image:
    image-set(url("/brand/mark-192.webp?v=fv") type("image/webp"), url("/brand/mark-192.png?v=fv") type("image/png"));
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}

.site-footer .brand.footer-brand {
  width: 72px;
  height: 55px;
}

/* ------------------------------------------------------- pastilha do token */

/*
 * Sem moeda lançada não há endereço para copiar. A pastilha passa a ser uma
 * etiqueta: sem ícone de copiar, sem cursor de clique e fora da navegação por
 * teclado, para não prometer uma acção que não faz nada.
 */
.header-token-copy {
  pointer-events: none;
  cursor: default;
}

.header-token-copy svg {
  display: none;
}

.header-token-help {
  display: none;
}

/* --------------------------------------------------- rodapé do modal da carteira */

/*
 * A assinatura "Protected by privy" no fundo do modal. É um SVG dentro de um link
 * para privy.io, com classes geradas que mudam a cada build do SDK; o endereço é
 * a única coisa estável para lhe pegar.
 */
#privy-modal-content a[href*="privy.io"] {
  display: none;
}

/* ------------------------------------------------- barra sem logótipo */

/*
 * Com o logótipo fora do cabeçalho, a navegação ficava encostada à esquerda e a
 * barra desequilibrada. Passa a ocupar o espaço livre e a centrar-se nele, o que
 * a aproxima do meio sem risco de encavalitar nos botões da direita seja qual for
 * a largura. Uma posição absoluta centrava melhor, mas colidia em ecrãs médios.
 */
.site-header .site-nav {
  flex: 1;
  justify-content: center;
  gap: 30px;
}

/* Sem nada à esquerda, a barra pede um pouco mais de ar de cada lado. */
.site-header .site-header-inner {
  padding-left: 26px;
  padding-right: 18px;
}

/* ------------------------------------------------- seta de voltar atrás */

/*
 * Entra no espaço que o logótipo deixou, à esquerda da barra. O botão é criado
 * por site/public/chrome.js depois de o React hidratar; aqui só se veste.
 *
 * `flex: none` é preciso porque a navegação ao lado leva `flex: 1` e sem isto a
 * seta era esmagada.
 */
.site-header .nav-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 4px;
  padding: 0;
  border: 1px solid rgba(36, 40, 43, .1);
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  color: var(--ink);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.site-header .nav-back:hover {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(36, 40, 43, .18);
  transform: translateX(-2px);
}

.site-header .nav-back:active {
  transform: translateX(-1px) scale(.96);
}

.site-header .nav-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Em ecrãs estreitos a barra já vai cheia: a seta encolhe em vez de sair. */
@media (max-width: 640px) {
  .site-header .nav-back {
    width: 30px;
    height: 30px;
    margin-right: 0;
  }

  .site-header .nav-back svg {
    width: 15px;
    height: 15px;
  }
}