/* Componentes reutilizáveis (docs/04-DESIGN.md §4). Só tokens. */

/* ---------- botões ---------- */
.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--botao-altura);
  padding: 0 var(--e-5);
  border-radius: var(--r);
  font: var(--t-botao);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  transition: transform var(--m-rapido) var(--easing), background-color var(--m-rapido) var(--easing);
  touch-action: manipulation;
  user-select: none;
}
.botao:active {
  transform: scale(0.98);
}
.botao--primario {
  background: var(--lime);
  color: var(--on-lime);
}
.botao--primario:active {
  background: var(--lime-2);
}
.botao--secundario {
  border: var(--borda);
  color: var(--ink);
}
.botao--secundario:active {
  background: var(--s3);
}

.botao-icone {
  display: grid;
  place-items: center;
  width: var(--alvo);
  height: var(--alvo);
  border-radius: var(--r-pilula);
  color: var(--muted);
  transition: background-color var(--m-rapido) var(--easing), color var(--m-rapido) var(--easing);
}
.botao-icone:active {
  background: var(--s3);
  color: var(--ink);
}

/* ---------- cabeçalho de tela ---------- */
.cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-6);
  min-height: var(--alvo);
}
.cabecalho__voltar {
  margin: calc(var(--e-2) * -1) 0 var(--e-1) calc(var(--e-3) * -1);
}
.cabecalho__sub {
  font: var(--t-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--e-1);
}
.cabecalho__titulo {
  font: var(--t-h1);
  letter-spacing: -0.01em;
}

/* ---------- estado vazio / erro ---------- */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-8) var(--e-5) var(--e-6);
  background: var(--s1);
  border: var(--borda);
  border-radius: var(--r-lg);
  text-align: center;
}
.vazio__icone {
  display: grid;
  place-items: center;
  width: var(--icone-vazio);
  height: var(--icone-vazio);
  border-radius: var(--r-pilula);
  background: var(--s2);
  color: var(--lime);
  margin-bottom: var(--e-1);
}
.vazio--erro .vazio__icone {
  color: var(--warn);
}
.vazio__titulo {
  font: var(--t-h2);
}
.vazio__texto {
  font: var(--t-body);
  color: var(--muted);
  max-width: 32ch;
  margin-bottom: var(--e-3);
}
.vazio .botao + .botao {
  margin-top: calc(var(--e-1) * -1);
}

/* ---------- esqueleto ---------- */
.esqueleto {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.esqueleto__linha,
.esqueleto__cartao {
  background: var(--s1);
  border-radius: var(--r);
  animation: pulsar 1.4s var(--easing) infinite;
}
.esqueleto__linha--titulo {
  width: 55%;
  height: 34px;
  margin: var(--e-5) 0 var(--e-2);
  border-radius: var(--r-sm);
}
.esqueleto__cartao {
  height: 180px;
  border-radius: var(--r-lg);
}
.esqueleto__cartao--baixo {
  height: 96px;
}
@keyframes pulsar {
  50% {
    opacity: 0.55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .esqueleto__linha,
  .esqueleto__cartao {
    animation: none;
  }
}

/* ---------- aviso global ---------- */
.aviso {
  margin: calc(var(--seguro-topo) + var(--e-3)) 0 0;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r);
  background: var(--warn-12);
  border: 1px solid var(--warn);
  color: var(--ink);
  font: var(--t-small);
}
.aviso--erro {
  background: var(--danger-12);
  border-color: var(--danger);
}

/* ---------- grupos de ajustes ---------- */
.grupo {
  margin-bottom: var(--e-6);
}
.grupo__titulo {
  font: var(--t-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--e-2) var(--e-1);
}
.grupo__nota {
  font: var(--t-small);
  color: var(--muted);
  margin: var(--e-2) var(--e-1) 0;
}
.grupo__nota--alerta {
  color: var(--warn);
}
.linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--botao-altura);
  padding: var(--e-3) var(--e-4);
  background: var(--s1);
  border: var(--borda);
  border-radius: var(--r);
}
.linha + .linha {
  margin-top: var(--e-2);
}
.linha__rotulo {
  font: var(--t-body-forte);
}
.linha__valor {
  font: var(--t-small);
  color: var(--muted);
  text-align: right;
}
.linha__valor--num {
  font-variant-numeric: tabular-nums;
}
.linha__valor--alerta {
  color: var(--warn);
}

/* ---------- toast ---------- */
.toasts {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--barra-altura) + var(--seguro-base) + var(--e-3));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding: 0 var(--margem);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  max-width: calc(var(--largura-max) - 2 * var(--margem));
  min-height: var(--alvo-ok);
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
  border-radius: var(--r);
  background: var(--s3);
  border: var(--borda);
  font: var(--t-small);
  animation: subir var(--m-base) var(--easing);
}
.toast--erro {
  border-color: var(--danger);
}
.toast__texto {
  flex: 1;
}
.toast__acao {
  min-height: var(--alvo);
  padding: 0 var(--e-3);
  border-radius: var(--r-sm);
  color: var(--lime);
  font: var(--t-body-forte);
}
@keyframes subir {
  from {
    transform: translateY(var(--e-3));
    opacity: 0;
  }
}

/* ---------- barra inferior ---------- */
.barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-barra);
  background: var(--vidro);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: var(--borda);
  padding: 0 var(--seguro-dir) var(--seguro-base) var(--seguro-esq);
}
.barra__lista {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--e-1);
  max-width: var(--largura-max);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: var(--barra-altura);
}
.barra__item {
  display: flex;
}
.barra__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: var(--alvo);
  color: var(--muted);
  font: var(--t-micro);
  transition: color var(--m-rapido) var(--easing);
  touch-action: manipulation;
}
.barra__link[aria-current='page'] {
  color: var(--lime);
}
.barra__link:active .barra__icone {
  transform: scale(0.92);
}
.barra__icone {
  transition: transform var(--m-rapido) var(--easing);
}
.barra__link--destaque .barra__icone {
  display: grid;
  place-items: center;
  width: var(--barra-destaque);
  height: var(--barra-destaque);
  margin-top: calc(var(--e-5) * -1);
  border-radius: var(--r-pilula);
  background: var(--lime);
  color: var(--on-lime);
  box-shadow: 0 0 0 4px var(--bg);
}
.barra__link--destaque[aria-current='page'] .barra__icone {
  background: var(--lime-2);
}

/* ---------- utilitários ---------- */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.cor-eletrico { --cor: var(--p-eletrico); }
.cor-ciano { --cor: var(--p-ciano); }
.cor-ambar { --cor: var(--p-ambar); }
.cor-rosa { --cor: var(--p-rosa); }
.cor-lilas { --cor: var(--p-lilas); }
.cor-laranja { --cor: var(--p-laranja); }
.fio-cor {
  display: inline-block;
  width: 4px;
  height: 1em;
  margin-right: var(--e-2);
  border-radius: var(--r-pilula);
  background: var(--cor);
  vertical-align: -0.1em;
}
.numero {
  font-variant-numeric: tabular-nums;
}
.nota {
  font: var(--t-small);
  color: var(--muted);
}
.texto-livre {
  font: var(--t-body);
  color: var(--muted);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.link-discreto {
  min-height: var(--alvo);
  padding: 0 var(--e-4);
  color: var(--muted);
  font: var(--t-body-forte);
}
.link-discreto:active {
  color: var(--ink);
}
.botao--perigo {
  background: var(--danger);
  color: var(--on-lime);
}
.botao--perigo:active {
  transform: scale(0.98);
}
.botao .icone {
  margin-right: var(--e-2);
}
.topo-acoes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(var(--e-2) * -1) calc(var(--e-3) * -1) var(--e-2);
}
.topo-acoes .cabecalho__voltar {
  margin: 0;
}
.selo {
  position: absolute;
  top: var(--e-2);
  right: var(--e-2);
  padding: var(--e-1) var(--e-2);
  border-radius: var(--r-pilula);
  background: var(--lime);
  color: var(--on-lime);
  font: var(--t-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

/* ---------- seções e listas ---------- */
.secao {
  margin-top: var(--e-8);
}
.secao__titulo {
  font: var(--t-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--e-3) var(--e-1);
}
.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.lista__vazia {
  font: var(--t-body);
  color: var(--muted);
  text-align: center;
  padding: var(--e-8) var(--e-4);
}
.linha--acao {
  width: 100%;
  text-align: left;
  transition: background-color var(--m-rapido) var(--easing);
}
.linha--acao:active {
  background: var(--s2);
}
.linha__textos {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  min-width: 0;
}
.linha__detalhe {
  font: var(--t-small);
  color: var(--muted);
}
.linha--acao .linha__valor {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  color: var(--lime);
  flex-shrink: 0;
}

/* ---------- chips ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}
.chips--rolagem {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--margem) * -1);
  padding: var(--e-1) var(--margem);
  scroll-padding: 0 var(--margem);
}
.chips--rolagem::-webkit-scrollbar {
  display: none;
}
.chips--grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  flex-shrink: 0;
  min-height: var(--chip-altura);
  min-width: var(--alvo);
  padding: 0 var(--e-3);
  border: var(--borda);
  border-radius: var(--r-pilula);
  color: var(--ink);
  font: var(--t-small);
  font-weight: 600;
  transition: background-color var(--m-rapido) var(--easing), border-color var(--m-rapido) var(--easing);
  touch-action: manipulation;
}
button.chip,
label.chip {
  min-height: var(--alvo);
  cursor: pointer;
}
.chip--estatico {
  min-height: auto;
  min-width: 0;
  padding: var(--e-1) var(--e-2);
  border-color: transparent;
  background: var(--s2);
  color: var(--muted);
  font: var(--t-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}
.chip--grande {
  min-height: var(--botao-altura);
  font: var(--t-num);
  font-size: 20px;
}
.chip--acao {
  color: var(--lime);
}
.chip:active,
.chip--radio:active {
  background: var(--s3);
}
.chip[aria-pressed='true'],
.chip--radio:has(input:checked) {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--on-lime);
}
.chip--radio:has(input:focus-visible) {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
.segmentado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
}
.segmentado .chip {
  flex-direction: column;
  gap: 2px;
  min-height: var(--botao-altura);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r);
}
.segmentado .chip > span:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.segmentado small {
  font: var(--t-micro);
  font-weight: 400;
  opacity: 0.8;
}

/* ---------- formulários ---------- */
.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}
.grupo-campo {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.grupo-campo__rotulo,
.campo__rotulo {
  font: var(--t-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.campo__entrada {
  width: 100%;
  min-height: var(--alvo-ok);
  padding: 0 var(--e-4);
  border: var(--borda);
  border-radius: var(--r-sm);
  background: var(--s2);
  color: var(--ink);
  font: var(--t-body);
  font-size: 16px;
}
.campo__entrada::placeholder {
  color: var(--faint);
}
.campo__entrada:focus {
  outline: 2px solid var(--lime);
  outline-offset: 0;
  border-color: transparent;
}
.campo__entrada[aria-invalid='true'] {
  border-color: var(--danger);
}
.campo__entrada--data {
  color-scheme: dark;
}
.campo__erro,
.formulario__erro {
  font: var(--t-small);
  color: var(--danger);
  min-height: 0;
}
.formulario__erro:empty,
.campo__erro:empty {
  display: none;
}
.busca {
  display: block;
  margin-bottom: var(--e-3);
}
.filtros {
  margin-bottom: var(--e-2);
}
.escolha {
  border: 0;
  margin: 0 0 var(--e-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.escolha__item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--botao-altura);
  padding: var(--e-3) var(--e-4);
  border: var(--borda);
  border-radius: var(--r);
  cursor: pointer;
}
.escolha__item:has(input:checked) {
  border-color: var(--lime);
  background: var(--lime-10);
}
.escolha__item input {
  width: 20px;
  height: 20px;
  accent-color: var(--lime);
  flex-shrink: 0;
}
.escolha__textos {
  display: flex;
  flex-direction: column;
}
.escolha__rotulo {
  font: var(--t-body-forte);
}
.escolha__detalhe {
  font: var(--t-small);
  color: var(--muted);
}

/* ---------- bottom sheet ---------- */
.com-sheet,
.com-sheet body {
  overflow: hidden;
}
.sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet::backdrop {
  background: var(--veu);
  animation: aparecer var(--m-base) var(--easing);
}
.sheet__painel {
  width: 100%;
  max-width: var(--largura-max);
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--s1);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-top: var(--borda);
  padding: 0 calc(var(--margem) + var(--seguro-dir)) calc(var(--e-5) + var(--seguro-base)) calc(var(--margem) + var(--seguro-esq));
  animation: entrar-sheet var(--m-base) var(--easing);
  transition: transform var(--m-base) var(--easing);
}
.sheet--saindo .sheet__painel {
  transform: translateY(100%);
}
.sheet--saindo::backdrop {
  opacity: 0;
  transition: opacity var(--m-base) var(--easing);
}
.sheet__alca {
  width: 40px;
  height: 5px;
  margin: var(--e-2) auto 0;
  border-radius: var(--r-pilula);
  background: var(--s3);
}
.sheet__topo {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) 0 var(--e-3);
  background: var(--s1);
}
.sheet__titulo {
  font: var(--t-h2);
}
.sheet__fechar {
  margin-right: calc(var(--e-3) * -1);
}
.sheet__subtitulo {
  font: var(--t-small);
  color: var(--muted);
}
.sheet__texto {
  font: var(--t-body);
  color: var(--muted);
  margin-bottom: var(--e-5);
}
.sheet__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.sheet .botao--secundario + .botao,
.sheet .menu + .botao {
  margin-top: var(--e-3);
}
@keyframes entrar-sheet {
  from {
    transform: translateY(100%);
  }
}
@keyframes aparecer {
  from {
    opacity: 0;
  }
}

/* ---------- menu de ações ---------- */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.menu__item {
  width: 100%;
  min-height: var(--botao-altura);
  padding: var(--e-3) var(--e-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  text-align: left;
  border-radius: var(--r);
  background: var(--s2);
  transition: background-color var(--m-rapido) var(--easing);
}
.menu__item:active {
  background: var(--s3);
}
.menu__rotulo {
  font: var(--t-body-forte);
}
.menu__detalhe {
  font: var(--t-small);
  color: var(--muted);
}
.menu__item--perigo .menu__rotulo {
  color: var(--danger);
}

/* ---------- cartão de treino (lista) ---------- */
.cartao-treino {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 72px;
  padding: var(--e-3) var(--e-4) var(--e-3) var(--e-3);
  background: var(--s1);
  border: var(--borda);
  border-left: 3px solid var(--cor);
  border-radius: var(--r);
  transition: background-color var(--m-rapido) var(--easing);
}
.cartao-treino:active {
  background: var(--s2);
}
.cartao-treino__sigla {
  display: grid;
  place-items: center;
  width: var(--sigla-cartao);
  height: var(--sigla-cartao);
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--s2);
  font: var(--t-num);
  font-weight: 700;
}
.cartao-treino__textos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cartao-treino__nome {
  font: var(--t-body-forte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cartao-treino__grupos {
  font: var(--t-small);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cartao-treino__fim {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  font: var(--t-small);
  color: var(--muted);
}
.cartao-treino__vezes {
  font: var(--t-body-forte);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- cartão de programa ---------- */
.cartao-programa {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--s1);
  border: var(--borda);
  border-left: 3px solid var(--cor);
  border-radius: var(--r);
}
.cartao-programa--destaque {
  background: var(--s2);
}
.cartao-programa__link {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-4) 0 var(--e-4) var(--e-4);
  border-radius: var(--r) 0 0 var(--r);
}
a.cartao-programa__link:active {
  background: var(--s3);
}
.cartao-programa__nome {
  font: var(--t-h2);
  overflow-wrap: anywhere;
}
.cartao-programa--destaque .cartao-programa__nome {
  font-size: 26px;
}
.cartao-programa__sub {
  font: var(--t-small);
  color: var(--muted);
}
.cartao-programa__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  font: var(--t-small);
  color: var(--muted);
  margin-top: var(--e-1);
}
.cartao-programa__siglas {
  color: var(--ink);
  font-weight: 600;
}
.cartao-programa__menu {
  align-self: flex-start;
  margin: var(--e-2) var(--e-1) 0 0;
}

/* ---------- números ---------- */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: var(--e-2);
  margin: var(--e-5) 0 0;
}
.numeros__item {
  padding: var(--e-3);
  background: var(--s1);
  border: var(--borda);
  border-radius: var(--r);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--e-1);
}
.numeros__rotulo {
  font: var(--t-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--muted);
}
.numeros__valor {
  margin: 0;
  font: var(--t-num);
  font-variant-numeric: tabular-nums;
}

/* ---------- nova versão ---------- */
#atualizacao:empty {
  display: none;
}
.atualizacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: calc(var(--seguro-topo) + var(--e-3));
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
  border-radius: var(--r);
  background: var(--s2);
  border: 1px solid var(--lime-dim);
  font: var(--t-body-forte);
}
#atualizacao:not(:empty) ~ .tela {
  padding-top: var(--e-4);
}
.botao--compacto.botao--lime,
.botao--lime {
  background: var(--lime);
  color: var(--on-lime);
}

/* link curto de vídeo/link na observação (alvo de toque ≥ 44 px) */
.link-video { display: inline-flex; align-items: center; gap: var(--e-1); min-height: 44px; padding: 0 var(--e-2); margin-right: var(--e-2);
  color: var(--lime); font-style: normal; font-weight: 600; text-decoration: none; }
.link-video:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: var(--r-sm); }
.exercicio__obs a.link-video { margin-left: calc(-1 * var(--e-2)); }
.exercicio__obs span + a.link-video { margin-left: 0; }
.link-video--etiqueta { min-height: 0; padding: 0; margin: 0 var(--e-2) 0 0; }
.editor-ex__obs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); }

/* alteração NÃO salva (aparelho sem espaço): o aviso fica preso no topo, também no treino rolado,
   até a gravação dar certo — some só quando os dados estão de fato no aparelho */
#aviso:has(.aviso--fixo) {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg, #0b0d10);
  padding-bottom: var(--e-2);
}