/* Barzel: identidade visual v3 (manual de marca v1.0, setembro de 2026)
   Preto puro, hairline no lugar de sombra, cantos secos. Títulos e números em
   Optician Sans (sempre caixa alta, nunca texto corrido); todo o resto em
   Google Sans Flex. Ação primária em azul, estado e seleção em azul neon,
   mérito e número em branco. O dourado e o creme não existem mais. */

:root {
  --safe-top: env(safe-area-inset-top, 0px);

  /* paleta oficial */
  --preto: #000000;
  --branco: #FFFFFF;
  --azul: #0047BB;        /* ação primária, marca */
  --neon: #009ACE;        /* estado, seleção, link, realce digital */
  --cinza-900: #53565A;   /* cinza escuro */
  --cinza-600: #888B8D;   /* cinza médio */
  --cinza-400: #B1B3B3;   /* cinza claro */
  --cinza-200: #D9D9D6;   /* superfície clara */

  /* superfícies */
  --bg: var(--preto);
  --card-hi: #141414;
  --card-lo: #0A0A0A;
  --card: linear-gradient(180deg, var(--card-hi), var(--card-lo));
  --campo: rgba(255, 255, 255, 0.06);       /* fundo de input, chip, botão secundário */
  --campo-forte: rgba(255, 255, 255, 0.10); /* pressed de linhas, thumb de segmentado */
  --superficie-clara: var(--cinza-200);     /* card do versículo, tour tip, avatar de iniciais */

  /* hairlines (substituem toda sombra) */
  --hairline: rgba(255, 255, 255, 0.10);
  --hairline-forte: rgba(255, 255, 255, 0.18);
  --hairline-clara: rgba(0, 0, 0, 0.14);   /* sobre superfície clara */

  /* texto sobre preto */
  --text: var(--branco);
  --muted: var(--cinza-400);
  --faint: var(--cinza-600);
  --apagado: var(--cinza-900);

  /* texto sobre superfície clara */
  --tinta: var(--preto);
  --tinta-2: var(--cinza-900);

  /* ação e estado */
  --acao: var(--azul);
  --acao-dim: rgba(0, 71, 187, 0.18);
  --neon-dim: rgba(0, 154, 206, 0.12);
  --neon-borda: rgba(0, 154, 206, 0.55);

  /* funcionais (placar e feedback) */
  --ok: #35C77B;
  --atencao: #F5B324;
  --erro: #E5484D;
  --frio: var(--cinza-900);
  --erro-dim: rgba(229, 72, 77, 0.14);

  /* tipografia */
  --font-titulo: "Optician Sans", "Google Sans Flex", -apple-system, sans-serif;
  --font-ui: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* nome antigo que o JS ainda lê em estilos inline: aponta para o título */
  --font-display: var(--font-titulo);
  --track-titulo: 0.05em;
  --track-rotulo: 0.12em;

  /* raios e chanfro: aresta quadrada em tudo (adendo da identidade). Os
     tokens ficam para o dia em que alguém precisar medir onde um raio entraria. */
  --r-controle: 0px;   /* botão, chip, input, toast, miniatura, tile */
  --r-card: 0px;       /* card, modal, folha, grupo de lista, balão */
  --chanfro: 8px;      /* corte a 45 graus do botão primário e do tile */
  --clip-chanfro: polygon(var(--chanfro) 0, 100% 0, 100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%, 0 100%, 0 var(--chanfro));
  /* tile de grupo e de hábitos: o encaixe do losango só no canto superior esquerdo */
  --clip-tile: polygon(var(--chanfro) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chanfro));
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* concha de aplicativo: o documento é fixo e só o miolo rola */
html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

input, textarea { user-select: text; -webkit-user-select: text; }
/* o Safari desenha canto próprio em campo e botão mesmo com raio zero; sem
   isto a aresta quadrada não chega ao iPhone. Range, caixa e rádio ficam de
   fora: com appearance none eles somem. */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea, select, button {
  appearance: none;
  -webkit-appearance: none;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* "contain" segura a rolagem dentro do app (o documento nunca rola junto),
     mas DEIXA o efeito elástico do topo e do fim acontecer. Com "none" a tela
     travava seco nas duas pontas, sem o balanço de aplicativo nativo. */
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column;
}

button { font-family: var(--font-ui); }

/* ---------- primitivas tipográficas ---------- */
/* rótulo: Optician em caixa alta, nunca abaixo de 10px */
.kicker, .micro {
  font-family: var(--font-titulo);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--track-rotulo);
  color: var(--faint);
}
/* cabeçalho de tela: uma hairline neon entre cabeçalho e conteúdo, como a
   linha azul sob o cabeçalho de cada página do manual. Uma por tela. */
.screen-head {
  margin: 8px 4px 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--neon);
}
/* traço curto neon sob o rótulo de tela e sob o título de seção solto
   (o "GRUPOS" de Hábitos). Nunca dentro de card, folha, modal ou toast. */
.screen-head .kicker { display: block; }
.screen-head .kicker::after, .sec-solta::after {
  content: "";
  display: block;
  width: 28px; height: 2px;
  background: var(--neon);
  margin-top: 6px;
}
.screen-head h1 {
  font-family: var(--font-titulo);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--track-titulo);
  text-transform: uppercase;
  margin-top: 6px;
  word-break: normal;
}
.screen-head .sub { color: var(--muted); font-size: 14px; margin-top: 7px; }
/* ---------- grafismo de canto (manual p. 18 a 20) ---------- */
/* O grafismo entra sempre como um recorte de canto: um quadrado de lado S
   ancorado num canto da superfície, sangrando para fora, mostrando só o
   vértice do conjunto (três chevrons aninhados, cortados pela borda). Um por
   superfície, nunca o conjunto inteiro, nunca em cover. Traço de 1px CSS em
   qualquer tamanho (non-scaling-stroke). O pai recebe position: relative,
   overflow: hidden e isolation: isolate; o span é o último filho do pai.
   html.sem-fx não mexe nele: é estático. */
/* A sangria é feita por recorte da imagem, não por caixa saindo do pai: a
   caixa do span é só a parte visível (S menos a sangria em cada eixo) e a
   imagem, do tamanho S, é ancorada pelo canto de dentro (esquerda-baixo).
   Antes o span saía 60px pela direita e virava largura rolável dentro do
   modal de login: a tela andava para o lado. Espelhos por transform mantêm
   a mesma leitura em cada canto. */
.grafismo-canto {
  position: absolute;
  width: calc(var(--gc, 120px) - var(--gc-sangra, 0px));
  height: calc(var(--gc, 120px) - var(--gc-sangra-y, var(--gc-sangra, 0px)));
  background: url("assets/grafismo/grafismo-canto-branco.svg") 0 100% / var(--gc, 120px) var(--gc, 120px) no-repeat;
  opacity: var(--gc-alfa, 0.14);
  pointer-events: none;
  z-index: -1;
  user-select: none;
  -webkit-user-select: none;
}
.grafismo-canto.ne { top: 0; right: 0; }
.grafismo-canto.so { bottom: 0; left: 0; transform: scale(-1); }
.grafismo-canto.no { top: 0; left: 0; transform: scaleX(-1); }
.grafismo-canto.escuro { background-image: url("assets/grafismo/grafismo-canto-preto.svg"); }
/* medidas de cada superfície (canto, S, sangra, opacidade) */
.gc-trancado { --gc: 120px; --gc-sangra: 24px; --gc-alfa: 0.12; }
.gc-login { --gc: 180px; --gc-sangra: 60px; --gc-alfa: 0.14; }
.gc-capa { --gc: 180px; --gc-sangra: 60px; --gc-alfa: 0.14; }
.gc-brief { --gc: 100px; --gc-sangra: 40px; --gc-alfa: 0.10; }
/* em tela estreita o recorte encolhe; o texto nunca se move */
@media (max-width: 359px) {
  .gc-trancado { --gc: 96px; }
  .gc-login { --gc: 140px; --gc-sangra: 50px; }
}
/* cabeçalho da Hoje: recorte no canto superior direito, visível 80x88,
   atrás do título e nunca atrás de texto corrido */
.tela-hoje .screen-head { position: relative; overflow: hidden; isolation: isolate; }
/* zona proibida: o título para 96px antes da borda direita da tela e quebra
   em duas linhas se precisar; o recorte nunca encosta nele */

.sec { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.sec h3 { font-family: var(--font-ui); font-weight: 600; font-size: 17px; letter-spacing: -0.005em; line-height: 1.3; }
.sec .count { font-family: var(--font-titulo); font-weight: 400; font-size: 16px; line-height: 1; color: var(--text); }
/* tudo feito no dia: o contador vira estado (neon). Sem faixa, sem selo. */
.count.completo { color: var(--neon); }
.sec.sec-tap { cursor: pointer; }
.sec .sec-arrow { color: var(--faint); font-size: 19px; margin-left: 10px; line-height: 1; align-self: center; }

/* ---------- topo ---------- */
/* fundo sólido, sem desfoque: a marca branca não pode flutuar sobre conteúdo
   em movimento. O hairline só entra quando o conteúdo passa por baixo. */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 14px) 20px 12px;
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease;
  z-index: 10;
}
#topbar.rolado { border-bottom-color: var(--hairline-forte); }
/* o logotipo (nunca o símbolo) mora aqui: 18px de altura, 18px de folga à direita */
#topbar .brand { height: 18px; width: auto; display: block; opacity: 1; margin-right: 18px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.help-btn {
  position: relative;
  width: 34px; height: 34px;
  border-radius: var(--r-controle);
  background: var(--campo);
  border: 1px solid var(--hairline);
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* alvo de toque de 44px sem inchar o desenho do botão */
.help-btn::after, .streak-pill::after {
  content: "";
  position: absolute;
  inset: -5px;
}
/* A pílula de sequência é a recompensa mais visível do app: degradê azul
   (um dos dois lugares do app com degradê; o outro é o card trancado), fogo
   e número em Optician. Sem pulso, sem brilho: ela chama pela cor. */
.streak-pill {
  position: relative;
  display: flex; align-items: center;
  height: 32px;
  background: linear-gradient(90deg, #0047BB, #009ACE);
  border: none;
  border-radius: 0;
  padding: 0 12px 0 10px;
  color: var(--branco);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
/* o único emoji da interface: fonte de emoji do sistema, 14px */
.streak-pill .sp-fogo {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 14px; line-height: 1;
  margin-right: 6px;
}
.streak-pill .sp-col { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 2px; }
.streak-pill .sp-col b { font-family: var(--font-titulo); font-size: 15px; font-weight: 400; line-height: 1; }
.streak-pill .sp-col small { font-size: 8px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
/* o momento em que a sequência sobe: um anel de estado em neon por 600ms
   (é o único brilho permitido, e é contorno, não sombra) */
.streak-pill.brilho { outline: 2px solid var(--neon); outline-offset: 0; animation: none; background: linear-gradient(90deg, var(--azul), var(--neon)); }
/* zero dias: sem degradê, sem fogo, sem número. O degradê é a recompensa de
   quem tem sequência; a pílula cinza com hairline é convite, não troféu. */
.streak-pill.zero {
  background: var(--card-hi);
  border: 1px solid var(--hairline-forte);
  padding: 0 12px;
  color: var(--text);
  transition: opacity 0.12s;
}
.streak-pill.zero:active { opacity: 0.7; }
.sp-zero {
  display: block;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: left;
  color: var(--text);
}
.sp-zero .sp-curto { display: none; }

/* em tela estreita o rótulo sai para não cobrir o logo; fogo e número ficam */
@media (max-width: 359px) {
  .streak-pill .sp-col small { display: none; }
  .streak-pill { padding: 0 11px 0 9px; }
  .streak-pill.zero { padding: 0 10px; }
  .sp-zero .sp-longo { display: none; }
  .sp-zero .sp-curto { display: inline; }
}

/* ---------- conteúdo ---------- */
#view {
  /* "1 0 auto" e não "1": com flex-basis 0 e um min-height explícito, o
     min-height AUTOMÁTICO (que impede um item de encolher abaixo do próprio
     conteúdo) era substituído, a caixa ficava menor que o texto e o
     padding de baixo deixava de existir na prática. Resultado: a barra
     cobria as últimas linhas de todas as abas. Com basis "auto" e
     shrink 0, a caixa nunca fica menor que o conteúdo. */
  flex: 1 0 auto;
  /* 1px de folga além da altura útil da tela. O iOS só balança um rolador que
     tem para onde rolar: sem esta sobra, a aba curta (grupos vazios, poucos
     hábitos) ficava dura enquanto a aba longa balançava. A altura do topo vem
     do JS porque ela muda com a área segura de cada aparelho. */
  min-height: calc(100% - var(--topbar-h, 62px) + 1px);
  /* a barra de abas encostada no rodapé mede 50px mais a área segura */
  padding: 14px 16px calc(env(safe-area-inset-bottom) + 74px);
  animation: viewIn 0.3s ease;
}
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- transição de aba (uma página sai, outra entra) ---------- */
/* A janela é fixa, da base da barra do topo ao fim da tela, com a largura da
   coluna de conteúdo, e recorta o que passa dela. A prévia da aba vizinha
   (#view-proxima) vive dentro e recebe o mesmo recuo do #view; o transform
   fica nela e no #view, nunca na janela nem no #app (os filhos fixos, barra e
   toast, continuam presos à tela). Abaixo do topo (10) e da barra (20). */
.troca-janela {
  position: fixed;
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
  contain: paint;
}
/* a tela que está saindo não aceita toque enquanto a troca assenta */
#view.trocando { pointer-events: none; }
#view-proxima {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  min-height: 100%;
  padding: 14px 16px calc(env(safe-area-inset-bottom) + 74px);
  animation: none;
  background: var(--bg);
}

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 20px 18px;
  margin-bottom: 12px;
}
.card > .kicker, .card > .micro { display: block; margin-bottom: 14px; }
.card .sec { margin-bottom: 10px; }

/* ---------- versículo (herói claro) ---------- */
/* o card aberto é superfície de leitura: cinza claro liso, sem grafismo */
.verse-hero {
  background: var(--superficie-clara);
  color: var(--tinta);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-card);
  padding: 30px 22px 22px;
  margin-bottom: 12px;
  text-align: center;
  position: relative;
}
.som-toggle {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: var(--r-controle);
  border: 1px solid var(--hairline-clara);
  background: rgba(255, 255, 255, 0.6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
}
.som-toggle svg { width: 17px; height: 17px; fill: var(--tinta-2); }
.verse-hero .kicker { color: var(--tinta-2); }
.verse-date { font-family: var(--font-ui); font-weight: 500; font-size: 13px; letter-spacing: 0.01em; line-height: 1.3; color: var(--tinta-2); margin-top: 8px; }
.verse-hero .rule { width: 32px; height: 1px; background: rgba(0, 0, 0, 0.28); margin: 15px auto; }
.verse-quote {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--tinta);
}
.verse-ref {
  font-family: var(--font-titulo);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--tinta-2);
  margin-top: 16px;
}
.verse-streak {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--acao);
  background: rgba(0, 71, 187, 0.10);
  border-radius: var(--r-controle);
  padding: 4px 12px;
  margin-top: 10px;
}

/* ---------- versículo trancado: segurar para servir o café ---------- */
/* O card trancado é azul em degradê (um dos dois degradês do app; o outro é
   a pílula). O grafismo é um recorte só, no canto superior direito (visível
   96x96), atrás da cena e nunca atrás da frase de dica. */
.verse-hero.trancado {
  background: linear-gradient(180deg, #0047BB 0%, #009ACE 100%);
  color: var(--branco);
  border: none;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
}
.verse-hero.trancado > :not(.grafismo-canto) { position: relative; z-index: 1; }
.verse-hero.trancado .kicker { color: rgba(255, 255, 255, 0.70); }
.verse-hero.trancado .verse-date { color: var(--branco); }
.verse-hero.trancado .rule { background: rgba(255, 255, 255, 0.40); }

.lock-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px 0 10px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}
/* A cena parada respira (6%) para chamar o toque (só por CSS, com o
   café parado no quadro 0); a frase de dica e o retorno tátil
   completam a affordance. Segurando ou servido, a pulsação para. Só o
   "Reduzir efeitos" do app (html.sem-fx) desliga: a preferência de movimento
   do sistema não manda na cena do café, que é o coração do ritual. */
/* a cena ocupa a largura inteira do miolo do card (299px em tela de 375) por 340px */
.lock-scene {
  position: relative;
  width: 100%;
  height: 340px;
  transform-origin: 50% 58%;
  animation: cenaPulsa 2.2s ease-in-out infinite;
}
@keyframes cenaPulsa {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.lock-wrap.holding .lock-scene, .lock-wrap.servido .lock-scene, html.sem-fx .lock-scene { animation: none; }
/* cena 2D de reserva: desenhada em 224x236 e ampliada para o tamanho da cena */
.lock-scene .cena2d {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 224px;
  height: 236px;
  transform: translateX(-50%) scale(1.22);
  transform-origin: 50% 100%;
  pointer-events: none;
}
@media (max-width: 359px) {
  .lock-scene { height: 300px; }
  .lock-scene .cena2d { transform: translateX(-50%) scale(1.12); }
}
/* as imagens da cena são parte do botão de desbloqueio: sem menu de
   copiar/salvar do iOS, sem arrastar e sem receber toques diretamente */
.lock-scene img, .lock-scene svg {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.lock-scene svg { left: 0; top: 0; width: 224px; height: 236px; overflow: visible; }
/* caneca: 152 de largura no canto inferior esquerdo (altura 128, topo em
   y=108), espelhada para a asa ficar à esquerda como na cena 3D; a abertura
   passa a ocupar x de 31 a 149 (os SVGs do líquido são espelhados junto) */
.lock-scene .cup { left: 0; bottom: 0; width: 152px; z-index: 2; transform: scaleX(-1); }
/* cafeteira: em repouso à direita, atrás da caneca. O bico é a borda esquerda
   a 20,6% da altura, em (120, 60). Ao segurar ela vai para cima da caneca e
   tomba 32 graus sobre o bico, que termina em (106, 56), de onde o jato sai
   (jato, gotas e vapor deslocados 34px para a direita no SVG). */
.lock-scene .pot {
  left: 120px; top: 36px; width: 92px; z-index: 1;
  transform-origin: 0% 20.6%;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.lock-wrap.holding .pot {
  transform: translate(-14px, -4px) rotate(-32deg);
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}
.lock-wrap.servido .pot { transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); }
/* café em quadros (render do Blender com fundo transparente): a arte ocupa
   a largura inteira do card, de borda a borda (a cena tem 22px de respiro de
   cada lado), na proporção do quadro (1080x1320). Não há caixa nem máscara:
   o quadro já traz as bordas transparentes, então o alto (a jarra servindo)
   e o pé (a sombra) podem passar da cena sobre o azul. O pôster é o quadro 0
   até o canvas pintar; pintado, o pôster sai de baixo, senão a jarra parada
   apareceria por trás da que se move. Sem tem-cafe (falha ou efeitos
   reduzidos) nada disso existe e a cena 2D fica à vista. */
.lock-scene .cena-cafe { display: none; }
.lock-scene.tem-cafe .cena2d { visibility: hidden; }
.lock-scene.tem-cafe .cena-cafe {
  display: block;
  position: absolute;
  left: 50%;
  top: -40px;
  width: calc(100% + 44px);
  aspect-ratio: 1080 / 1320;
  transform: translateX(-50%);
  pointer-events: none;
}
.lock-scene .cena-cafe .cafe-poster, .lock-scene .cena-cafe .cafe-quadros {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.lock-scene .cena-cafe .cafe-quadros { visibility: hidden; }
.lock-scene.cafe-pronto .cena-cafe .cafe-quadros { visibility: visible; }
.lock-scene.cafe-pronto .cena-cafe .cafe-poster { visibility: hidden; }
.lock-scene .cafe { z-index: 3; }
.lock-scene .jato { z-index: 4; }
.lock-scene .gotas { z-index: 5; }
.lock-scene .vapor { z-index: 6; }

/* a celebração do café servido (o efeito do dia em quadros, ver tocarWow no
   app.js) entra por cima de tudo na cena, no mesmo recorte do café: a mesma
   largura, e o alto do quadro do efeito 70 px (do quadro de 810 da câmera)
   acima do alto do café. Essa fração é o WOW_TOPO do app.js, que montarWow
   escreve em linha como margin-top (a porcentagem de top é da altura do
   contêiner; a da margem é da largura dele, o miolo do card). A altura vem
   da proporção do efeito, também em linha (a forja é mais alta). A caixa
   nasce invisível e só aparece com a cena pronta para andar; no fim some em
   300 ms */
.lock-scene .cena-wow {
  position: absolute;
  left: 50%;
  top: -40px;
  width: calc(100% + 44px);
  aspect-ratio: 900 / 1178;
  transform: translateX(-50%);
  pointer-events: none;
  visibility: hidden;
  z-index: 7;
  transition: opacity 0.3s ease-out;
}
.lock-scene .cena-wow.tocando { visibility: visible; }
.lock-scene .cena-wow.sumindo { opacity: 0; }
.lock-scene .cena-wow canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* enquanto o efeito toca, o cabeçalho do card (Versículo do dia, a data e a
   linha) sai em 300 ms e volta no fim; a dica de segurar some ao servir */
.verse-hero.trancado .verse-cabecalho { transition: opacity 0.3s ease-out; }
.verse-hero.trancado.wow-tocando .verse-cabecalho { opacity: 0; }
.lock-wrap .lock-hint { transition: opacity 0.3s ease-out; }
.lock-wrap.servido .lock-hint { opacity: 0; }
html.sem-fx .lock-scene .cena-wow, html.sem-fx .verse-hero.trancado .verse-cabecalho, html.sem-fx .lock-wrap .lock-hint { transition: none; }

/* jato: nasce no bico, 6px em cima e 4px embaixo, com ondulação leve;
   por cima uma faixa mais clara a um terço da largura, que oscila */
.jato-g {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transform: scaleY(0);
  transition: transform 0.15s ease-in;
}
.lock-wrap.holding .jato-g {
  transform: scaleY(1);
  transition: transform 0.2s ease-out 0.95s;
}
.lock-wrap.servido .jato-g { transform: scaleY(0); transition: transform 0.15s ease-in; }
.jato-corpo { fill: #3B2314; }
.jato-faixa { fill: none; stroke: #6B4423; stroke-width: 1.5; stroke-linecap: butt; }
.lock-wrap.holding .jato-faixa { animation: ondula 0.6s ease-in-out infinite; }
@keyframes ondula {
  0%, 100% { transform: translateX(-0.5px); }
  50% { transform: translateX(0.5px); }
}

/* líquido: dentro do clipPath da abertura, um retângulo sobe de 100% a 0 em
   2,5s; a superfície (a abertura achatada) vai presa ao topo, com o reflexo */
.liquido {
  transform-box: fill-box;
  transform: translateY(100%);
  transition: transform 0.4s ease-in;
}
.lock-wrap.holding .liquido { transform: translateY(0); transition: transform 1.95s linear 1.05s; }
.lock-wrap.servido .liquido { transform: translateY(0); transition: none; }
.liquido-corpo { fill: #3B2314; }
.liquido-superficie { fill: #5A3620; }
.liquido-reflexo { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; stroke-linecap: butt; }

/* gotas: três losangos de 3px nascendo no ponto de impacto, subindo 8px em
   diagonal (esquerda, cima, direita) e sumindo */
.gota {
  fill: #3B2314;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(45deg);
}
.lock-wrap.holding .gota.g1 { animation: gotaEsq 0.5s ease-out 1.1s infinite; }
.lock-wrap.holding .gota.g2 { animation: gotaCima 0.5s ease-out 1.27s infinite; }
.lock-wrap.holding .gota.g3 { animation: gotaDir 0.5s ease-out 1.44s infinite; }
@keyframes gotaEsq {
  from { opacity: 1; transform: translate(0, 0) rotate(45deg); }
  to { opacity: 0; transform: translate(-5.7px, -5.7px) rotate(45deg); }
}
@keyframes gotaCima {
  from { opacity: 1; transform: translate(0, 0) rotate(45deg); }
  to { opacity: 0; transform: translate(0, -8px) rotate(45deg); }
}
@keyframes gotaDir {
  from { opacity: 1; transform: translate(0, 0) rotate(45deg); }
  to { opacity: 0; transform: translate(5.7px, -5.7px) rotate(45deg); }
}

/* vapor: só depois de servido, duas linhas subindo da abertura */
.vapor-l {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2;
  stroke-linecap: square;
  opacity: 0;
  transform-box: fill-box;
}
.lock-wrap.servido .vapor-l.v1 { animation: vapor 1.2s ease-out forwards; }
.lock-wrap.servido .vapor-l.v2 { animation: vapor 1.2s ease-out 0.2s forwards; }
@keyframes vapor {
  0% { opacity: 0; transform: translateY(0); }
  40% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-14px); }
}
.lock-hint { color: rgba(255, 255, 255, 0.85); font-size: 13.5px; font-weight: 500; max-width: 250px; line-height: 1.6; }

/* efeitos reduzidos (só html.sem-fx, o botão do app): sem inclinação, sem
   gotas, sem ondulação, sem vapor; o líquido sobe linear e o jato aparece seco */
html.sem-fx .lock-wrap.holding .pot { transform: none; }
html.sem-fx .lock-scene .pot, html.sem-fx .jato-g { transition: none; }
html.sem-fx .gota, html.sem-fx .vapor-l, html.sem-fx .jato-faixa { animation: none !important; display: none; }

/* servindo: o azul neon da base do card fica mais intenso enquanto o café
   cai (camada por cima do degradê, em fade de 0,6 s); ao concluir, um flash
   branco suave de 300 ms antecede a revelação */
.verse-hero.trancado::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 71, 187, 0) 0%, rgba(0, 154, 206, 0) 35%, #00B8F5 100%);
  opacity: 0;
  transition: opacity 0.6s ease-out;
  pointer-events: none;
  z-index: 0;
}
.verse-hero.trancado.servindo::after { opacity: 1; }
.verse-hero.trancado .lock-flash {
  position: absolute; inset: 0;
  background: var(--branco);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.verse-hero.trancado.flash .lock-flash { animation: lockFlash 0.3s ease-out forwards; }
@keyframes lockFlash {
  0% { opacity: 0; }
  30% { opacity: 0.25; }
  100% { opacity: 0; }
}
html.sem-fx .verse-hero.trancado::after { transition: none; }
html.sem-fx .verse-hero.trancado.flash .lock-flash { animation: none; }

/* card aberto entrando: o azul do card trancado cobre o card e some em
   450ms, revelando a Palavra; o conteúdo claro entra em 300ms com 120ms de atraso */
.verse-hero.abrindo { overflow: hidden; }
.verse-hero.abrindo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0047BB 0%, #009ACE 100%);
  z-index: 5;
  pointer-events: none;
  animation: revelaAzul 0.45s ease-out forwards;
}
.verse-hero.abrindo > * { animation: revelaConteudo 0.3s ease-out 0.12s both; }
@keyframes revelaAzul { to { opacity: 0; } }
@keyframes revelaConteudo { from { opacity: 0; } }
html.sem-fx .verse-hero.abrindo::before { display: none; }
html.sem-fx .verse-hero.abrindo > * { animation: none; }

.share-row { display: flex; justify-content: center; gap: 26px; margin-top: 22px; }
.share-c {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.share-c .cir {
  width: 46px; height: 46px; border-radius: 0;
  background: var(--tinta); color: var(--branco);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.share-c:active .cir { transform: scale(0.92); }
.share-c.ghost .cir { background: none; border: 1px solid rgba(0, 0, 0, 0.35); color: var(--tinta); }
.share-c .cir svg { width: 19px; height: 19px; fill: currentColor; }
.share-c span { font-size: 10px; color: var(--tinta-2); font-weight: 600; letter-spacing: 0.02em; }
.verse-reflect {
  text-align: left;
  border-top: 1px solid var(--hairline-clara);
  margin-top: 22px;
  padding-top: 17px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta);
}
.verse-reflect .kicker { display: block; margin-bottom: 8px; color: var(--tinta-2); }

/* ---------- anotação do dia, dentro do papel do versículo (v125) ---------- */
/* sem anotação: o link no molde do .acao-caderno; com ela, a prévia em três
   linhas com o Editar à direita. Os dois abrem a folha da anotação */
.anotar-link {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 48px;
  margin: 16px 0 4px; padding: 4px 0 0;
  background: none; border: none; border-top: 1px solid var(--hairline-clara);
  cursor: pointer;
  text-align: left; color: var(--tinta-2);
  font-size: 14px; font-weight: 500; line-height: 1.4;
}
.anotar-link svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.anotar-link:active { opacity: 0.7; }
.anotacao-previa { margin: 16px 0 4px; padding-top: 14px; border-top: 1px solid var(--hairline-clara); text-align: left; cursor: pointer; }
.anotacao-previa:active { opacity: 0.7; }
.ap-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ap-cab .kicker { color: var(--tinta-2); }
/* alvo de 44x44 sem mexer na altura da linha */
.ap-editar { position: relative; color: var(--tinta-2); font-size: 14px; font-weight: 600; min-width: 44px; text-align: right; }
.ap-editar::before { content: ""; position: absolute; left: -6px; right: -6px; top: -14px; bottom: -14px; }
.ap-texto {
  margin: 6px 0 0; color: var(--tinta); font-size: 14px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-line;
}

/* ---------- botões ---------- */
/* primário: azul de ação, chanfro de 45 graus no canto superior esquerdo e no
   inferior direito, ecoando o corte do B */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  min-height: 52px;
  background: var(--acao);
  color: var(--branco);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1.2;
  border: none;
  border-radius: var(--r-controle);
  clip-path: var(--clip-chanfro);
  padding: 8px 18px;
  cursor: pointer;
  margin-top: 16px;
  text-align: center;
  transition: transform 0.12s, filter 0.12s;
}
.btn:active { transform: scale(0.985); filter: brightness(0.85); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn:disabled:active { transform: none; filter: none; }
/* .gold era o primário dourado: hoje é o mesmo desenho do .btn */
.btn.gold { background: var(--acao); color: var(--branco); }
.btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.22);
  clip-path: none;
  min-height: 48px;
}
.btn.secondary:active { background: var(--campo); filter: none; }
.btn.danger {
  background: transparent;
  color: var(--erro);
  border: 1px solid rgba(229, 72, 77, 0.5);
  clip-path: none;
  min-height: 48px;
}
.btn.danger:active { filter: brightness(0.85); }
/* terciário: só texto, em neon */
.btn-text {
  background: none; border: none;
  color: var(--neon);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14.5px;
  cursor: pointer;
  padding: 12px 4px 2px;
}
.btn-text:active { opacity: 0.6; }
/* "Carregando" do mural: sem toque e apagado, como o .btn */
.btn-text:disabled { opacity: 0.4; cursor: default; }
.btn-text.block { display: block; margin: 6px auto 0; min-height: 44px; width: 100%; }
/* ação secundária ao lado de uma primária: não pode ter o mesmo peso dela */
.btn-text.neutro { color: var(--muted); }
/* botão compacto de 32px para decisões em linha (aprovar uma solicitação) */
.btn-mini {
  height: 32px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-controle);
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.btn-mini.gold { background: var(--acao); color: var(--branco); border-color: var(--acao); clip-path: var(--clip-chanfro); }
.btn-mini:active { transform: scale(0.96); opacity: 0.9; }

/* ---------- hábitos ---------- */
.habit-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s;
}
.habit-row:active { transform: scale(0.985); }
.habit-row:last-of-type { border-bottom: none; }
/* selecionado para envio (etapa antes do check-in de grupo): estado em neon */
.habit-row.sel .habit-check { border-color: var(--neon); background: var(--neon-dim); }
.habit-row.sel .habit-check svg { opacity: 1; fill: var(--neon); }
.habit-row.sel .habit-name { color: var(--neon); }
.habit-row.sel .habit-ic { background: var(--neon-dim); }
/* atualizar: botão no topo e indicador do gesto de puxar */
.refresh-btn { background: none; border: 1px solid var(--hairline); border-radius: var(--r-controle); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.refresh-btn svg { width: 16px; height: 16px; fill: var(--muted); }
.refresh-btn.girando svg { animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
#ptr-indicator {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 78px); left: 50%;
  width: 38px; height: 38px;
  transform: translateX(-50%) translateY(-140px);
  background: var(--card-hi);
  border: 1px solid var(--hairline-forte);
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 999; transition: transform 0.2s ease, opacity 0.2s; opacity: 0;
  pointer-events: none;
}
#ptr-indicator svg { width: 19px; height: 19px; fill: var(--text); }
#ptr-indicator.puxando { transform: translateX(-50%) translateY(0); opacity: 1; }
/* enquanto o dedo está na tela a bolinha segue a mão, sem amortecimento: a
   transição só volta quando o dedo sai, para a volta ao lugar ser suave */
#ptr-indicator.arrastando { transition: none; }
#ptr-indicator.rodando svg { animation: gira 0.9s linear infinite; }
/* check quadrado, como caixa de seleção nativa */
.habit-check {
  width: 26px; height: 26px; min-width: 26px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-controle);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
}
/* feito = bloco azul (#0047BB é bloco, #009ACE é estado): check azul com
   glifo branco. Selecionado para envio continua em contorno neon, acima. */
.habit-row.done .habit-check {
  background: var(--acao);
  border-color: var(--acao);
  animation: pop 0.28s ease;
}
@keyframes pop { 50% { transform: scale(1.18); } }
.habit-check svg { width: 14px; height: 14px; fill: var(--tinta); opacity: 0; transition: opacity 0.15s; }
.habit-row.done .habit-check svg { opacity: 1; fill: var(--branco); }
.habit-ic {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: var(--r-controle);
  background: var(--campo);
  display: flex; align-items: center; justify-content: center;
}
.habit-ic svg { width: 17px; height: 17px; fill: var(--muted); stroke-width: 2; }
.habit-row.done .habit-ic { background: var(--acao-dim); }
.habit-row.done .habit-ic svg { fill: var(--text); }
.habit-name { flex: 1; font-weight: 500; font-size: 15px; }
/* o nome não apaga quando está feito: a diferença é o check e o tile */
.habit-row.done .habit-name { color: var(--text); }
.streak-badge { font-size: 12px; color: var(--faint); font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }
/* mérito é branco: o número da sequência em Optician */
.streak-badge b { color: var(--text); font-family: var(--font-titulo); font-weight: 400; font-size: 16px; line-height: 1; }
.streak-badge.zerada b { color: var(--faint); }

.photo-btn {
  background: var(--campo);
  border: none;
  border-radius: var(--r-controle);
  width: 36px; height: 36px; min-width: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.photo-btn svg { width: 16px; height: 16px; fill: var(--muted); }
.photo-btn.need { background: var(--neon-dim); }
.photo-btn.need svg { fill: var(--neon); }
.photo-thumb { width: 36px; height: 36px; min-width: 36px; border-radius: var(--r-controle); object-fit: cover; }

.hint { color: var(--muted); font-size: 13px; margin-top: 13px; line-height: 1.55; }

/* título de seção solto, fora de card (o "Grupos" da aba Hábitos) */
.sec-solta {
  font-family: var(--font-titulo);
  font-size: 18px; font-weight: 400;
  letter-spacing: 0.06em; line-height: 1.2;
  text-transform: uppercase;
  margin: 28px 4px 14px;
}

.evo-row { display: flex; align-items: center; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--hairline); }
.evo-row:last-child { border-bottom: none; }
.evo-info { flex: 1; }
.evo-info b { font-size: 15px; font-weight: 500; display: block; }
.evo-info small { color: var(--faint); font-size: 12px; }
.evo-streak { text-align: right; }
.evo-streak b {
  font-family: var(--font-titulo); font-size: 22px; font-weight: 400; color: var(--text);
  display: block; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.evo-streak small { font-family: var(--font-titulo); color: var(--faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; }
/* branco é cor de mérito: sequência zerada fica apagada */
.evo-streak.zerada b, .evo-streak.zerada small { color: var(--faint); }
/* telas estreitas (iPhone SE): o rótulo da direita quebra em duas linhas para
   o subtítulo "25 de 30 dias · melhor: 9" caber numa linha só até 320px */
@media (max-width: 355px) {
  .evo-row { gap: 8px; }
  .evo-streak small { max-width: 52px; display: inline-block; letter-spacing: 0.08em; }
  .evo-info small { font-size: 10.5px; }
}

/* ---------- aba Hábitos: cartão fixo dos pessoais e portas de grupo ---------- */
/* tile: quadrado com o encaixe do losango no canto superior esquerdo */
.hp-tile {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: var(--r-controle);
  clip-path: var(--clip-tile);
  background: var(--superficie-clara);
  display: flex; align-items: center; justify-content: center;
}
/* o check do tile segue a gramática dos ícones da tab bar: traço 1.5, ponta quadrada */
.hp-tile .glifo {
  width: 22px; height: 22px; color: var(--tinta); opacity: 1;
  stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter;
}
.hp-tile.completo { background: var(--acao); border-color: var(--acao); }
.hp-tile.completo .glifo { color: var(--branco); }
.hp-card .count { font-family: var(--font-titulo); font-weight: 400; font-size: 16px; line-height: 1; color: var(--text); }
.hp-card .count.completo { color: var(--neon); }
/* diferente do card de grupo, o subtítulo aqui carrega a melhor sequência:
   pode quebrar em duas linhas em vez de sumir na reticência */
.hp-card .comm-info small > span { white-space: normal; }
/* as duas portas eram dois links de 31px colados: viraram uma ação de verdade
   e um caminho secundário embaixo, os dois com alvo de 44px */
.linha-portas { margin: 6px 0 0; }
.linha-portas .btn { min-height: 44px; margin: 0; }
.linha-portas .btn-text.block { margin-top: 4px; }

/* ---------- Evolução ---------- */
/* apoio em três degraus: o número da Constância é o herói, os números de
   destaque ficam em Optician de 22px e todo o texto de apoio desce para 10.5px
   com o mesmo respiro de letra */
.tela-evolucao .micro, .tela-evolucao .kicker { font-size: 10.5px; letter-spacing: 0.12em; color: var(--faint); }
.tela-evolucao .evo-info small { color: var(--faint); }
.tela-evolucao .card { padding: 20px 18px; margin-bottom: 12px; }

/* ---------- Evolução: placar da Constância ---------- */
/* Todo DADO dentro deste card lê var(--cc), a cor da faixa injetada pelo JS:
   arco, estado, barras dos pilares, linha e área do gráfico. Anel chato: sem
   gradiente, sem halo, sem ponta. */
.tela-evolucao .const-card {
  padding: 24px 18px 18px;
  margin-bottom: 22px;
}
.const-card {
  text-align: center;
  position: relative;
  overflow: hidden;
  /* contexto próprio: o grafismo do briefing fica atrás do conteúdo e à frente do fundo */
  isolation: isolate;
}
.const-info {
  position: absolute;
  top: 24px; right: 16px;
  width: 28px; height: 28px;
  border-radius: var(--r-controle);
  background: var(--campo);
  border: 1px solid var(--hairline);
  color: var(--faint);
  font: 600 13px var(--font-ui);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
}
/* alvo de toque de 44px sem inchar o botão */
.const-info::after { content: ""; position: absolute; inset: -8px; }
.const-info:active { opacity: 0.6; }

.kicker .k-curto { display: none; }
.anel-wrap { position: relative; width: 188px; height: 188px; margin: 6px auto 0; }
.anel { display: block; width: 188px; height: 188px; overflow: visible; }
.anel-trilho { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 14; }
.anel-arco {
  fill: none;
  stroke: var(--cc);
  stroke-width: 14;
  stroke-linecap: butt;
}
.anel-centro {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
/* o número é o herói da tela e fica em branco: cor de faixa aqui roubaria
   a leitura do próprio placar */
.anel-num {
  font-family: var(--font-titulo);
  font-size: 62px; font-weight: 400;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.anel-de { font-family: var(--font-titulo); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.anel-vazio { color: var(--muted); font-size: 13.5px; line-height: 1.4; padding: 0 26px; }
.const-estado {
  font-family: var(--font-titulo);
  font-size: 18px; font-weight: 400;
  letter-spacing: 0.06em; line-height: 1.2;
  text-transform: uppercase;
  color: var(--cc, var(--text));
  margin-top: 16px;
}
/* a variação vira etiqueta: só a subida ganha o realce de estado */
.const-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px;
  border-radius: var(--r-controle);
  background: var(--campo);
  border: 1px solid transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 500;
  margin-top: 10px;
}
.const-chip .chev { width: 11px; height: 11px; fill: currentColor; flex: 0 0 auto; }
.const-chip.melhor { border-color: var(--neon-borda); }
.const-chip.melhor .chev { fill: var(--neon); }
/* a janela dita por extenso, logo abaixo do estado: o placar é da semana e
   ninguém deveria precisar abrir o "i" para descobrir isso */
.const-sub { color: var(--faint); font-size: 12.5px; margin-top: 6px; }

/* briefing de segunda: sem nenhum registro na semana, a marca da semana
   passada ocupa o lugar do anel de zeros e traz um alvo no lugar da cobrança */
.brief { padding: 20px 6px 4px; }
.brief-num {
  font-family: var(--font-titulo);
  font-size: 62px; font-weight: 400;
  color: var(--cc);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.brief .const-estado { margin-top: 12px; }
.brief-l1 { color: var(--muted); font-size: 13.5px; line-height: 1.4; margin-top: 14px; }
.brief-l2, .brief-l3 { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin-top: 8px; padding: 0 6px; }
.brief-l2 b, .brief-l3 b { color: var(--cc); font-weight: 600; }
.brief-l3 { margin-top: 6px; }
/* o grafismo do briefing é o recorte de canto (.grafismo-canto.gc-brief),
   injetado no markup como último filho do card */

/* pilares viram medida: rótulo, barra e fração */
.const-pilares {
  display: grid;
  border-top: 1px solid var(--hairline);
  margin-top: 18px;
  padding-top: 16px;
}
.const-pilar { position: relative; padding: 0 10px; }
.const-pilar + .const-pilar::before {
  content: "";
  position: absolute; left: 0; top: 20%; height: 60%;
  border-left: 1px solid var(--hairline);
}
.const-pilar .micro { display: block; font-size: 10.5px; letter-spacing: 0.12em; color: var(--faint); }
.pilar-barra {
  display: block;
  height: 3px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
  margin: 8px 0 7px;
  overflow: hidden;
}
.pilar-barra i {
  display: block; height: 100%;
  border-radius: 0;
  background: var(--cc-a70);
}
.const-pilar b { font-family: var(--font-titulo); font-size: 16px; font-weight: 400; line-height: 1; display: block; font-variant-numeric: tabular-nums; color: var(--text); }

/* rodapé: uma ação só, secundária */
.const-rodape { margin-top: 18px; }
.btn-partilha {
  width: 100%; height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-controle);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--text);
  font: 600 14.5px var(--font-ui);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.btn-partilha .glifo { width: 15px; height: 15px; }
.btn-partilha:active { transform: scale(0.985); background: var(--campo); }

.como-calc p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin-bottom: 10px; text-align: left; }
.como-calc p:last-child { margin-bottom: 0; }
.como-calc b { color: var(--text); font-weight: 600; }
/* único lugar onde a pessoa aprende o que a cor do anel quer dizer */
.como-calc .cc-estados { color: var(--faint); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.como-calc .cc-estados span { display: inline-flex; align-items: center; gap: 6px; }
.como-calc .cc-estados i { width: 8px; height: 8px; border-radius: 0; transform: rotate(45deg); display: block; flex: 0 0 auto; }

/* ---------- Evolução: a curva da constância ---------- */
/* o rótulo ensina que o seletor abaixo troca a granularidade do ponto */
.evo-titulo { display: block; margin-bottom: 8px; }
.graf-nota { color: var(--faint); font-size: 12px; line-height: 1.4; margin: 0 0 12px; }
.evo-graf {
  border-top: 1px solid var(--hairline);
  margin-top: 18px;
  padding-top: 18px;
}
.evo-seg {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: 36px; padding: 3px;
  border-radius: var(--r-controle);
  background: var(--campo);
  border: 1px solid var(--hairline);
}
.evo-seg-thumb {
  position: absolute;
  top: 3px; left: 3px; bottom: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: var(--r-controle);
  background: var(--campo-forte);
  transform: translateX(calc(100% * var(--i, 0)));
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.evo-seg-b {
  position: relative;
  background: none; border: none;
  color: var(--muted);
  font: 500 12.5px var(--font-ui);
  letter-spacing: 0.01em;
  cursor: pointer;
  padding: 0;
}
/* alvo de toque de 44px sem alterar a altura desenhada */
.evo-seg-b::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.evo-seg-b.ativo { color: var(--text); }
.evo-seg-b:active { opacity: 0.7; }

.evo-plot {
  position: relative;
  height: 116px;
  margin-top: 16px;
  touch-action: pan-y;
}
.evo-plot .graf { display: block; width: 100%; height: 116px; }
.graf-ponta { fill: var(--text); }
.graf-eixo-y { position: absolute; left: 0; font-size: 10px; color: rgba(255, 255, 255, 0.35); }
.graf-eixo-y.topo { top: 2px; }
.graf-eixo-y.base { bottom: 2px; }
.graf-vazio {
  position: absolute; left: 8%; right: 8%; top: calc(50% - 12px);
  transform: translateY(-50%);
  font-size: 13px; color: var(--muted); line-height: 1.45;
}
.graf-cursor { transition: opacity 0.18s ease; }
.evo-balao {
  position: absolute;
  display: none;
  transform: translateX(-50%);
  min-height: 26px;
  padding: 4px 10px;
  border-radius: var(--r-controle);
  background: var(--card-hi);
  border: 1px solid var(--hairline-forte);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.evo-balao .balao-l1 { display: block; font-size: 11px; color: var(--muted); line-height: 1.5; }
.evo-balao .balao-l1 b { font-family: var(--font-titulo); font-size: 15px; font-weight: 400; color: var(--text); }
.evo-balao .balao-l2 { display: block; font-size: 10px; color: var(--faint); line-height: 1.4; }

.evo-eixo { position: relative; height: 16px; margin-top: 6px; }
.graf-rot {
  position: absolute; top: 0;
  transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--faint);
  white-space: nowrap;
}
.graf-rot.forte { color: var(--text); }
.graf-rot.fora { opacity: 0.35; }

/* ---------- Evolução: sinais ---------- */
.sinal-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 2px; }
.sinal-row + .sinal-row { border-top: 1px solid var(--hairline); margin-top: 4px; padding-top: 14px; }
.sinal-ic {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: var(--r-controle);
  background: var(--campo);
  border: 1px solid var(--hairline);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.sinal-ic .glifo { width: 17px; height: 17px; }
.sinal-row p { font-size: 14px; line-height: 1.5; text-align: left; }
.sinal-row b { color: var(--text); font-weight: 600; }

/* ---------- Evolução: bloco por grupo ---------- */
.evo-txt { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin-bottom: 6px; }
.grupo-faixa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; padding: 10px 0 2px; }
.grupo-faixa b {
  font-family: var(--font-titulo); font-size: 22px; font-weight: 400; display: block; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.grupo-faixa small { font-family: var(--font-titulo); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); line-height: 1.4; display: block; margin-top: 4px; }

/* ---------- Evolução: marcos ---------- */
.tela-evolucao .marcos-card { padding: 22px 16px 18px; margin-bottom: 20px; }
/* `.card > .micro` (0-2-0) dava 14px ao primeiro rótulo e 18px ao segundo:
   os dois territórios precisam do mesmo respiro */
.marco-terr, .card > .marco-terr { font-size: 10.5px; letter-spacing: 0.12em; color: var(--faint); margin-bottom: 18px; }
.sec + .marco-terr { margin-top: 18px; }
.marco-corte { margin-top: 24px; border-top: 1px solid var(--hairline); padding-top: 20px; }
.marco-corte.primeiro { margin-top: 8px; border-top: none; padding-top: 0; }
.marco-foco { font-size: 13px; color: var(--muted); text-align: left; margin: -8px 0 16px; line-height: 1.45; }
.marco-foco b { color: var(--text); font-weight: 600; }
.marco-completo { font-size: 13px; color: var(--text); text-align: center; margin-top: 18px; }
.marcos-grid { display: grid; }
.marcos-grid.grandes { grid-template-columns: repeat(3, 1fr); gap: 16px 14px; }
.marcos-grid.pequenas { grid-template-columns: repeat(4, 1fr); gap: 14px 10px; }
.marco-selo {
  background: none; border: none; padding: 0;
  display: flex; flex-direction: column; align-items: center;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s;
}
.marco-selo:active { transform: scale(0.94); }
/* as 13 medalhas ficam como estão: ouro, verde, azul e bronze são materiais
   de conquista, não paleta de interface. Só a sombra saiu. */
.medalha {
  position: relative;
  display: block;
  line-height: 0;
}
.medalha svg { display: block; }
.marco-selo.grande .medalha { width: 88px; height: 88px; }
.marco-selo.pequeno .medalha { width: 54px; height: 54px; }
/* bloqueada continua sendo a medalha, não o cadeado: no apagamento anterior a
   peça sumia e sobrava um cadeado claro, que é o oposto do convite */
.medalha.bloqueada > svg { filter: grayscale(0.85) brightness(0.78) contrast(0.95); opacity: 0.8; }
.medalha.bloqueada::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 999px;
  outline: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.marco-selo.alvo .medalha > svg { filter: none; opacity: 0.85; }
.medalha-lock {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--card-lo);
  border: 1px solid var(--hairline-forte);
  display: flex; align-items: center; justify-content: center;
}
.medalha-lock svg { width: 9px; height: 9px; fill: var(--faint); }
.medalha-lock.grande { width: 34px; height: 34px; }
.medalha-lock.grande svg { width: 16px; height: 16px; }
.marco-rot { line-height: 1.3; margin-top: 10px; }
.marco-selo.grande .marco-rot { min-height: 32px; }
.marco-rot b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); }
.marco-rot small { display: block; font-size: 11.5px; color: var(--faint); }
.marco-selo.pequeno .marco-rot {
  margin-top: 8px;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.marco-selo.pequeno .marco-rot b { font-size: 11px; font-weight: 500; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.marco-selo.pequeno .marco-rot small { font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* nome da trilha em cima da própria linha de medalhas */
.marco-trilha-tit { margin-top: 4px; margin-bottom: 12px; }
.marcos-grid + .marco-trilha-tit { margin-top: 20px; }

/* conquista: a medalha entra crescendo e um brilho a atravessa. Uma vez só. */
@keyframes seloEntra {
  from { transform: scale(0.86); }
  to { transform: scale(1); }
}
@keyframes seloBrilho {
  from { transform: translateX(-160%) rotate(20deg); }
  to { transform: translateX(160%) rotate(20deg); }
}
.marco-selo.selo-novo .medalha {
  animation: seloEntra 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.medalha-brilho {
  position: absolute; inset: -10%;
  overflow: hidden;
  pointer-events: none;
  border-radius: 999px;
}
.medalha-brilho::before {
  content: "";
  position: absolute; top: -30%; bottom: -30%; left: 0;
  width: 34%;
  background: rgba(255, 255, 255, 0.22);
  filter: blur(6px);
  animation: seloBrilho 0.6s ease-out both;
  animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}

/* detalhe do marco (modal) */
.marco-det { text-align: center; }
.marco-det .medalha { width: 132px; height: 132px; margin: 4px auto 14px; }
.marco-det-tit { font-family: var(--font-ui); font-size: 20px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 6px; }
.marco-det-regra { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin-bottom: 12px; }
.marco-det-data { color: var(--text); font-size: 13.5px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.marco-check { width: 12px; height: 12px; fill: var(--text); flex: 0 0 auto; }
.marco-falta { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.marco-falta b { color: var(--text); }
.marco-barra {
  display: block;
  width: 200px; height: 4px;
  margin: 0 auto 16px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.marco-barra i { display: block; height: 100%; border-radius: 0; }
.marco-det .hint { margin-top: 12px; }

/* ---------- celebração de marco ---------- */
/* Tela cheia acima de tudo: a medalha sobe do centro-base girando duas
   voltas (0 a 1,2 s), explode em losangos aos 0,9 s e o texto entra aos
   1,2 s. Só html.sem-fx desliga o giro e a explosão; a medalha e o texto
   ficam. */
.celebra {
  position: fixed; inset: 0;
  z-index: 95;
  background: rgba(0, 0, 0, 0.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 24px);
  overflow: hidden;
  isolation: isolate;
  animation: celebraFundo 0.25s ease-out;
  --gc: 220px; --gc-sangra: 60px; --gc-alfa: 0.10;
}
.celebra.saindo { opacity: 0; transition: opacity 0.2s ease-in; }
@keyframes celebraFundo { from { opacity: 0; } }
.celebra-palco { position: relative; width: 160px; height: 160px; perspective: 900px; }
.celebra-sobe { animation: celebraSobe 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.celebra-gira { transform-style: preserve-3d; animation: celebraGira 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.celebra-balanca { animation: celebraBalanca 0.7s ease-in-out 1.2s both; }
.celebra-palco .medalha { width: 160px; height: 160px; }
@keyframes celebraSobe {
  from { transform: translateY(120px) scale(0.6); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes celebraGira { from { transform: rotateY(0); } to { transform: rotateY(720deg); } }
@keyframes celebraBalanca {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(5deg); }
  70% { transform: rotate(-3deg); }
}
.celebra-explosao { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.celebra-losango {
  position: absolute; left: 0; top: 0;
  width: var(--s, 7px); height: var(--s, 7px);
  margin: calc(var(--s, 7px) / -2) 0 0 calc(var(--s, 7px) / -2);
  background: var(--c, var(--branco));
  opacity: 0;
  animation: celebraExplode 1.4s cubic-bezier(0.15, 0.75, 0.3, 1) both;
  animation-delay: calc(0.9s + var(--d, 0s));
}
@keyframes celebraExplode {
  0% { transform: translate(0, 0) rotate(45deg) scale(0.4); opacity: 1; }
  50% { transform: translate(var(--dx), var(--dy)) rotate(45deg) scale(1); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.1), calc(var(--dy) + 120px)) rotate(45deg) scale(0.6); opacity: 0; }
}
.celebra-texto {
  text-align: center;
  margin-top: 28px;
  width: 100%;
  max-width: 340px;
  animation: celebraTexto 0.4s ease-out 1.2s both;
}
@keyframes celebraTexto { from { opacity: 0; transform: translateY(10px); } }
.celebra-kicker {
  display: block;
  font-family: var(--font-titulo);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neon);
}
.celebra-nome {
  font-family: var(--font-titulo);
  font-size: 26px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--branco);
  margin: 10px 0 8px;
}
.celebra-desc {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 22px;
}
.celebra .grafismo-canto { z-index: -1; }
html.sem-fx .celebra, html.sem-fx .celebra-sobe, html.sem-fx .celebra-gira,
html.sem-fx .celebra-balanca, html.sem-fx .celebra-texto { animation: none; }
html.sem-fx .celebra.saindo { transition: none; }
html.sem-fx .celebra-losango { display: none; }

/* telas de 320px: as faixas de 3 colunas apertam sem perder célula */
@media (max-width: 359px) {
  /* "CONSTÂNCIA · 7 DIAS": o texto longo encostava no botão de info */
  .kicker .k-longo { display: none; }
  .kicker .k-curto { display: inline; }
  .grupo-faixa small, .const-pilar .micro { letter-spacing: 0.08em; }
  .const-pilar { padding: 0 5px; }
  .marcos-grid.grandes { gap: 14px 8px; }
  .marco-selo.grande .medalha { width: 76px; height: 76px; }
  .marcos-grid.pequenas { gap: 12px 8px; }
  .marco-selo.pequeno .medalha { width: 50px; height: 50px; }
  .anel-wrap, .anel { width: 172px; height: 172px; }
  .anel-num, .brief-num { font-size: 56px; }
  .verse-quote { font-size: 20px; }
}

/* ---------- comunidades ---------- */
.swipe-wrap {
  position: relative;
  margin-bottom: 12px;
}
.swipe-wrap .comm-card { margin-bottom: 0; touch-action: pan-y; }
.swipe-actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 88px;
  display: flex;
  border-radius: 0 var(--r-card) var(--r-card) 0;
  overflow: hidden;
}
.swipe-btn {
  flex: 1;
  border: none;
  background: var(--erro);
  color: var(--branco);
  font: 700 13px var(--font-ui);
  cursor: pointer;
}
.comm-card { position: relative; z-index: 1; transition: transform 0.22s ease; }

/* três colunas fixas: avatar, centro que encolhe, ações. Em flex o ⋯ e a seta
   escapavam da tela em aparelhos de 375px quando o nome do grupo era longo. */
.comm-card {
  display: grid;
  /* a coluna da direita mede o que realmente ocupa (⋯, seta, bolinha): fixá-la
     em 68px roubava largura do nome e truncava até "Hábitos pessoais" em 320px */
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 18px 14px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: transform 0.15s;
}
.comm-card:active { transform: scale(0.985); }
/* tile do grupo: inicial em Optician sobre a superfície clara */
.comm-avatar {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: var(--r-controle);
  clip-path: var(--clip-tile);
  background: var(--superficie-clara);
  color: var(--tinta);
  font-family: var(--font-titulo);
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
}
.comm-info { min-width: 0; }
.comm-info b {
  font-family: var(--font-ui); font-size: 16px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.25;
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* o texto encolhe com reticências; o glifo da direita nunca é cortado */
.comm-info small {
  color: var(--faint); font-size: 12.5px;
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.comm-info small > span {
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* a exigência de foto virou glifo no fim da linha de metadados */
.comm-info .comm-cam {
  width: 13px; height: 13px; min-width: 13px;
  color: var(--faint);
  stroke-width: 2.2;
  flex-shrink: 0;
}
.comm-right {
  display: flex; align-items: center; justify-content: flex-end; gap: 3px;
}
.comm-arrow { color: var(--faint); font-size: 18px; line-height: 1; }

/* voltar do detalhe do grupo: mesmo desenho do .nav-back das telas empilhadas */
.back-btn {
  background: none; border: none;
  color: var(--neon);
  font-size: 14.5px; font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  padding: 0 8px 0 0;
  display: flex; align-items: center; gap: 4px;
}

.rank-row { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: var(--r-controle); margin-bottom: 2px; }
.rank-row.me { background: var(--acao-dim); }
.rank-pos { width: 22px; text-align: center; font-family: var(--font-titulo); font-weight: 400; color: var(--faint); font-size: 15px; }
.rank-row.top .rank-pos { color: var(--text); }
/* pessoa é círculo, no app inteiro (R1); o que não é pessoa segue chanfrado */
.rank-avatar {
  width: 33px; height: 33px; min-width: 33px;
  border-radius: 50%;
  background: var(--superficie-clara);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px; color: var(--tinta);
  overflow: hidden;
}
.rank-name { flex: 1; font-weight: 600; font-size: 14.5px; line-height: 1.25; letter-spacing: -0.005em; }
.rank-name small { color: var(--faint); font-weight: 400; font-size: 11.5px; display: block; }
.rank-pts { font-family: var(--font-titulo); font-weight: 400; font-size: 17px; color: var(--text); }
.rank-pts small { color: var(--faint); font-size: 10px; font-family: var(--font-ui); }
.pending { opacity: 0.45; }
.pending-tag { font-size: 9.5px; color: var(--muted); background: var(--campo); border-radius: var(--r-controle); padding: 3px 7px; text-transform: uppercase; letter-spacing: 0.08em; }

/* rótulo do hábito no visor de mídia: informação, não estado, então sem neon */
.fi-check {
  font-size: 10.5px;
  color: var(--text);
  background: var(--campo);
  border-radius: var(--r-controle);
  padding: 4px 9px;
  font-weight: 600;
  white-space: nowrap;
}

/* progresso do desafio */
.chal { margin-bottom: 16px; }
.chal .row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 7px; }
.chal .row b { color: var(--text); font-weight: 600; }

/* seletor de duração */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.chip-opt {
  height: 30px;
  background: var(--campo);
  border: 1px solid transparent;
  border-radius: var(--r-controle);
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0 12px;
  cursor: pointer;
}
.chip-opt.sel { background: var(--neon-dim); border-color: var(--neon-borda); color: var(--neon); }

.mural-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mural-item { position: relative; border-radius: var(--r-controle); overflow: hidden; aspect-ratio: 1; }
.mural-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mural-item span {
  position: absolute; bottom: 0; left: 0; right: 0;
  font-size: 9px; padding: 4px 7px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.empty-note { color: var(--faint); font-size: 13px; text-align: center; padding: 16px 6px; line-height: 1.55; }

/* ---------- perfil ---------- */
.profile-head { display: flex; align-items: center; gap: 16px; }
.profile-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--superficie-clara); color: var(--tinta);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.profile-avatar img, .rank-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* avatar de pessoa em qualquer tamanho (avatarHTML): círculo, sem foto a
   inicial em tinta sobre a superfície clara */
.ava {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--superficie-clara); color: var(--tinta);
  font-weight: 600; line-height: 1;
  overflow: hidden; flex: none;
}
.ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.profile-head .p-name { font-family: var(--font-ui); font-size: 20px; font-weight: 600; letter-spacing: -0.005em; display: block; line-height: 1.25; }
.profile-head .p-handle { color: var(--muted); font-size: 13.5px; font-weight: 500; }
.profile-head .p-since { color: var(--faint); font-size: 12px; display: block; margin-top: 2px; }

.patente-bar { margin-top: 20px; }
.patente-bar .row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.patente-bar .row b { color: var(--text); font-weight: 600; }
.progress-bar { height: 3px; background: rgba(255, 255, 255, 0.08); border-radius: 0; overflow: hidden; }
.progress-bar > div { height: 100%; background: var(--acao); border-radius: 0; transition: width 0.3s; }

.journal-entry { border-bottom: 1px solid var(--hairline); padding: 14px 0; }
.journal-entry:last-child { border-bottom: none; }
/* a data é rótulo: Optician apagado, não realce */
.journal-entry small { font-family: var(--font-titulo); color: var(--faint); font-weight: 400; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.journal-entry .je-verse { color: var(--faint); font-size: 11px; }
.journal-entry p { font-size: 14px; color: var(--muted); margin-top: 5px; line-height: 1.55; }

.about-verse { font-family: var(--font-ui); font-size: 17px; font-weight: 400; color: var(--muted); line-height: 1.5; }
.about-ref { font-family: var(--font-titulo); color: var(--faint); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin: 10px 0 14px; }
.about-logo { height: 56px; display: block; margin-bottom: 28px; }

.manage-row { display: flex; align-items: center; gap: 13px; padding: 12px 2px; border-bottom: 1px solid var(--hairline); }
.manage-row:last-of-type { border-bottom: none; }
.pts-badge { color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.sub-form { border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 14px 14px 16px; margin-top: 10px; }
.btn.small { min-height: 40px; padding: 6px 14px; font-size: 13.5px; margin-top: 0; }
.icon-btn { background: none; border: none; cursor: pointer; padding: 6px; opacity: 0.6; }
.icon-btn svg { width: 16px; height: 16px; fill: var(--muted); }
.icon-btn:hover { opacity: 1; }
.icon-btn:hover svg { fill: var(--erro); }

/* ---------- switch ---------- */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; }
/* fora de uma .switch-row o rótulo também precisa quebrar linha: sem isto o
   título colava no subtítulo ("Convites e entradaQuem pode trazer...") */
.sw-label b { font-size: 14.5px; font-weight: 500; display: block; margin-bottom: 4px; }
.sw-label small { color: var(--faint); font-size: 12px; display: block; line-height: 1.45; }
.switch { position: relative; width: 46px; height: 27px; min-width: 46px; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  transition: 0.2s;
}
.switch .track::after {
  content: "";
  position: absolute;
  width: 21px; height: 21px;
  border-radius: 999px;
  top: 3px; left: 3px;
  background: var(--branco);
  transition: 0.2s;
}
.switch input:checked + .track { background: var(--acao); }
.switch input:checked + .track::after { transform: translateX(19px); background: var(--branco); }

/* ---------- barra de abas ---------- */
/* encostada no rodapé, preta, com hairline no topo: o padrão do iOS */
#tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  height: calc(50px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-around;
  background: var(--bg);
  border-top: 1px solid var(--hairline-forte);
  border-radius: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  z-index: 20;
}
#tabbar .tab {
  flex: 1;
  max-width: none;
  height: 50px;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.15s, opacity 0.12s;
}
/* ícones em traço 1.5, pontas quadradas, juntas retas, diagonais a 45 graus.
   O ativo muda só de cor, como no iOS: o traço não engrossa. */
#tabbar .tab svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
#tabbar .tab.active { color: var(--text); }
/* a aba Perfil com a foto da pessoa (P1). Com foto: fio de 1 px inativa;
   ativa, anel branco de 1,5 com 1,5 de folga preta. Sem foto: a silhueta do
   ícone de perfil dentro do círculo e um "+" neon de 11 no canto de baixo */
#tabbar .tab .tab-ava {
  position: relative;
  width: 24px; height: 24px;
  flex: none;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  display: block;
}
#tabbar .tab .tab-ava-silhueta { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
#tabbar .tab .tab-ava-silhueta svg { width: 100%; height: 100%; display: block; }
#tabbar .tab .tab-ava-mais {
  position: absolute; right: -4px; bottom: -3px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 0 1.5px var(--bg);
  display: flex; align-items: center; justify-content: center;
}
#tabbar .tab .tab-ava-mais svg { width: 7px; height: 7px; stroke: #000; stroke-width: 1.6; }
#tabbar .tab .tab-ava.com-foto {
  border: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
#tabbar .tab.active .tab-ava.com-foto { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--branco); }
#tabbar .tab .tab-ava img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  /* o teclado cobre o rodapé no iPhone: o modal sobe junto, como a folha
     (ver --teclado). Só o modal ancorado embaixo; a tela cheia (.full)
     tem altura própria e não entra */
  bottom: var(--teclado, 0px);
  background: rgba(0, 0, 0, 0.70);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 50;
}
.modal-backdrop.full { bottom: 0; }
.modal {
  background: var(--card-lo);
  border-top: 1px solid var(--hairline-forte);
  border-radius: 0;
  padding: 24px 20px calc(env(safe-area-inset-bottom) + 24px);
  width: 100%;
  max-width: 480px;
  /* nunca mais alto que o espaço que sobrou acima do teclado */
  max-height: min(88dvh, 100%);
  overflow-y: auto;
  /* o recorte de canto sangra 60px para fora da borda direita; sem isto o
     contêiner de rolagem ganha rolagem lateral e a tela "anda" para a direita */
  overflow-x: hidden;
  overscroll-behavior-x: none;
  animation: slideUp 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes slideUp { from { transform: translateY(48px); opacity: 0; } }
.modal h3 { font-family: var(--font-ui); font-size: 20px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; margin-bottom: 6px; }
.modal p { color: var(--muted); font-size: 14px; margin-bottom: 18px; line-height: 1.5; }
.modal label.field { display: block; margin-bottom: 14px; }
.modal label.field .micro { display: block; margin-bottom: 8px; }
.modal input[type="text"], .modal input[type="tel"], .modal input[type="email"], .modal input[type="password"], .modal input[type="number"] {
  width: 100%;
  height: 48px;
  background: var(--campo);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-controle);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 0 14px;
}
.modal input[type="text"]::placeholder, .modal input[type="tel"]::placeholder, .modal input[type="email"]::placeholder, .modal input[type="password"]::placeholder { color: var(--faint); }
.modal input[type="text"]:focus, .modal input[type="tel"]:focus, .modal input[type="email"]:focus, .modal input[type="password"]:focus, .modal input[type="number"]:focus { outline: none; border-color: var(--neon); }
.field-error { color: var(--erro); font-size: 12.5px; margin-top: 7px; display: none; }

/* ---------- folha de decisão ----------
   Substitui confirm, prompt e alert do navegador. Vive em #confirm-root, acima
   do #modal-root, porque há perguntas feitas de dentro de um modal aberto. */
.sheet-backdrop {
  position: fixed; inset: 0;
  /* o teclado cobre o rodapé no iPhone: a folha sobe junto (ver --teclado) */
  bottom: var(--teclado, 0px);
  background: rgba(0, 0, 0, 0.70);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 6px calc(env(safe-area-inset-bottom) + 6px);
  z-index: 80;
  animation: sheetFade 0.18s ease-out;
  transition: opacity 0.18s ease;
}
.sheet-backdrop.saindo { opacity: 0; }
@keyframes sheetFade { from { opacity: 0; } }
.sheet {
  width: 100%;
  max-width: 468px;
  background: var(--card-hi);
  border: 1px solid var(--hairline-forte);
  border-radius: var(--r-card);
  padding: 10px 18px 18px;
  animation: sheetUp 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
  touch-action: none;
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } }
.sheet-grab {
  width: 36px; height: 4px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 auto 15px;
}
.sheet-title {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0;
}
.sheet-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 7px;
}
.sheet-input {
  width: 100%;
  height: 48px;
  margin-top: 15px;
  background: var(--campo);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-controle);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 0 14px;
  touch-action: auto;
}
.sheet-input::placeholder { color: var(--faint); }
.sheet-input:focus { outline: none; border-color: var(--neon); }
.sheet-btn {
  display: block;
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: var(--r-controle);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 14px;
  margin-top: 16px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s ease, filter 0.12s ease;
  touch-action: auto;
}
.sheet-btn:active { transform: scale(0.985); filter: brightness(0.85); }
.sheet-btn.principal { background: var(--acao); color: var(--branco); clip-path: var(--clip-chanfro); }
.sheet-btn.destrutiva { background: var(--erro); color: var(--branco); }
/* a opção destrutiva de um menu (Bloquear, Remover, Apagar): texto vermelho
   sobre o fundo neutro. O vermelho cheio fica para confirmar a ação */
.sheet-btn.opcao-destrutiva { background: var(--campo); border: 1px solid var(--hairline); color: var(--erro); }
.sheet-btn.cancelar {
  margin-top: 8px;
  min-height: 48px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--text);
}
.sheet-btn.cancelar:active { background: var(--campo); filter: none; }

/* o retorno do afiar (F1.11): o losango do logotipo em neon no ponto do
   toque, de 0,6 a 1 de escala, sumindo em 400 ms */
.losango-toque {
  position: fixed; z-index: 3000; pointer-events: none;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  background: var(--neon); box-shadow: 0 0 18px rgba(0, 154, 206, 0.6);
  transform: rotate(45deg) scale(0.6); opacity: 1;
  animation: losangoToque 0.4s ease-out forwards;
}
@keyframes losangoToque { to { transform: rotate(45deg) scale(1); opacity: 0; } }

/* sequência do grupo inteiro */
.team-streak {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--r-controle);
  background: var(--acao-dim);
  border: 1px solid rgba(0, 71, 187, 0.4);
  color: var(--text);
  font-size: 13px;
}
.team-streak b { font-weight: 700; }

/* pódio do desafio encerrado */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 14px;
}
.pod {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 88px;
  cursor: pointer;
}
.pod b { font-size: 13px; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod small { color: var(--faint); font-size: 11px; }
.pod .rank-avatar { width: 44px; height: 44px; }
.pod-bar {
  width: 100%;
  border-radius: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
  font: 700 13px var(--font-ui);
}
.pod-0 .pod-bar { height: 74px; background: var(--azul); color: var(--branco); }
.pod-1 .pod-bar { height: 52px; background: var(--cinza-400); color: var(--preto); }
.pod-2 .pod-bar { height: 40px; background: var(--cinza-900); color: var(--branco); }

/* mini perfil do membro */
.member-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 6px;
}
.member-stats > div {
  background: var(--campo);
  border-radius: var(--r-card);
  padding: 12px 18px;
  min-width: 96px;
}
.member-stats b { display: block; font-family: var(--font-titulo); font-size: 24px; font-weight: 400; line-height: 1.05; color: var(--text); }
.member-stats small { color: var(--faint); font-size: 11px; }

/* seletor de política de convites do grupo */
.policy-select {
  width: 100%;
  height: 48px;
  margin: 8px 0 14px;
  background: var(--campo);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-controle);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 0 14px;
  appearance: none;
  -webkit-appearance: none;
}
.policy-select:focus { outline: none; border-color: var(--neon); }

.mini-ava {
  width: 20px; height: 20px; min-width: 20px;
  border-radius: 50%;
  background: var(--superficie-clara);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--tinta);
  overflow: hidden; vertical-align: -5px; margin-right: 6px;
}
.mini-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* senha com olhinho de mostrar/ocultar */
.pass-wrap { position: relative; }
.modal .pass-wrap input { width: 100%; padding-right: 52px; }
.pass-eye {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--faint);
  padding: 10px;
  cursor: pointer;
  display: flex;
}
.pass-eye.on { color: var(--neon); }
.pass-eye svg { width: 20px; height: 20px; fill: currentColor; display: block; }

/* tela cheia (login, criar conta, Crie seu perfil, Instalar): preto liso.
   A coluna começa no topo, abaixo da área segura: com justify-content center
   um formulário mais alto que a tela era empurrado para fora da área rolável
   e o símbolo sumia sem ter como rolar até ele. Conteúdo curto centra pelos
   pseudo-elementos com margem automática; conteúdo alto rola a partir do topo. */
.modal-backdrop.full { align-items: stretch; background: var(--bg); overflow-x: hidden; }
.modal-backdrop.full .modal {
  height: 100dvh;
  max-height: none;
  margin: 0 auto;
  border: none;
  border-radius: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--safe-top) + 32px) 24px calc(env(safe-area-inset-bottom) + 44px);
  animation: obIn 0.35s ease;
  position: relative;
  isolation: isolate;
}
/* o ::before é também o respiro extra de 24px do símbolo */
.modal-backdrop.full .modal::before { content: ""; display: block; flex: none; height: 24px; margin-top: auto; }
.modal-backdrop.full .modal::after { content: ""; display: block; flex: none; height: 0; margin-bottom: auto; }
.modal-backdrop.full h3 { font-size: 24px; text-align: center; }
.modal-backdrop.full > .modal > p { text-align: center; }

/* convite para o tutorial */
.tour-intro {
  position: fixed; inset: 0;
  z-index: 48;
  background: rgba(0, 0, 0, 0.85);
  transform: translateZ(0);
  display: flex; align-items: center; justify-content: center;
  animation: obIn 0.3s ease;
}
.ti-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 30px 26px 24px;
  width: min(340px, calc(100vw - 40px));
  text-align: center;
}
.ti-card .ob-icon { width: 74px; height: 74px; margin: 0 auto 20px; }
.ti-card .ob-icon svg { width: 30px; height: 30px; }
.ti-card h3 { font-family: var(--font-ui); font-size: 17px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 8px; }
.ti-card p { color: var(--muted); font-size: 14px; line-height: 1.65; }

.icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 6px; }
.icon-grid button {
  background: var(--campo);
  border: 1px solid transparent;
  border-radius: var(--r-controle);
  padding: 12px 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.icon-grid button svg { width: 19px; height: 19px; fill: var(--muted); }
.icon-grid button.sel { border-color: var(--neon-borda); background: var(--neon-dim); }
.icon-grid button.sel svg { fill: var(--neon); }

/* editor de enquadramento da foto: quadrado e sem chanfro, para o homem ver
   a foto inteira ao enquadrar. O encaixe do losango entra só na exibição. */
.crop-view {
  width: 240px; height: 240px;
  margin: 0 auto 16px;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  background: #000;
  touch-action: none;
  cursor: grab;
  border: 2px solid var(--neon-borda);
}
.crop-view:active { cursor: grabbing; }
.crop-view img {
  position: absolute;
  left: 0; top: 0;
  max-width: none;
  transform-origin: 0 0;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* o véu fora do círculo (P6): o homem vê o que vai aparecer nos anéis e no
   mural. O recorte continua quadrado; o círculo é só a moldura */
.crop-veu {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 240px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.crop-zoom { width: 100%; margin: 2px 0 10px; accent-color: var(--neon); }

.avatar-edit { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.avatar-edit .profile-avatar { width: 64px; height: 64px; min-width: 64px; }
.avatar-edit .avatar-actions { display: flex; flex-direction: column; align-items: flex-start; }
.avatar-edit .btn-text { padding: 4px 0; }
/* ação destrutiva em texto: vermelha em qualquer lugar, não só no avatar */
.btn-text.remove { color: var(--erro); }

.install-block {
  background: var(--campo);
  border: 1px solid transparent;
  border-radius: var(--r-card);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.install-block.hl { border-color: var(--neon-borda); }

/* Ação de hoje: o terceiro movimento do card claro, depois de Versículo e Para
   meditar, no mesmo papel e com a mesma linha fina de .verse-reflect. Fora do
   papel ela virava um card escuro e disputava com o caderno. É de fazer, não
   de escrever: quem quiser contar como foi vai pelo atalho até o caderno. */
.acao-hoje {
  margin-top: 22px;
  border-top: 1px solid var(--hairline-clara);
  padding-top: 17px;
  text-align: left;
}
.acao-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acao-hoje .kicker { color: var(--tinta-2); }
.acao-hoje.cumprida .kicker { color: var(--acao); }
/* o ritmo da semana em três marcas: cumprida, a de hoje, e a que ainda vem */
.acao-marcas { display: inline-flex; gap: 6px; }
.acao-marca {
  width: 22px; height: 16px; border-radius: var(--r-controle);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 9px var(--font-ui); letter-spacing: 0.06em;
  border: 1px solid rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.45);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.acao-marca.hoje { border: 1.5px solid var(--tinta); color: var(--tinta); }
.acao-marca.ok { background: var(--acao); border-color: var(--acao); color: var(--branco); }
.acao-marca.pop { animation: pop 0.3s ease-out; }
.acao-txt {
  font-family: var(--font-ui); font-size: 18px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.35;
  color: var(--tinta); margin: 8px 0 16px;
}
.acao-ensino { color: var(--tinta-2); font-size: 13px; line-height: 1.5; margin: -6px 0 14px; }
/* o único botão sólido do card: preto com o chanfro do primário */
.acao-btn {
  position: relative; overflow: hidden;
  width: 100%; min-height: 52px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 16px;
  border: none; border-radius: var(--r-controle);
  clip-path: var(--clip-chanfro);
  background: var(--tinta); color: var(--branco);
  font: 600 15px var(--font-ui);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.12s;
}
.acao-btn:active { transform: scale(0.985); }
.acao-btn > * { position: relative; }
/* o azul nasce atrás do ícone e cobre o botão */
.acao-fill {
  position: absolute; left: 22px; top: 50%;
  width: 22px; height: 22px; margin-top: -11px;
  border-radius: 0; background: var(--acao);
  transform: scale(0); transform-origin: center;
  transition: transform 0.38s ease-out;
  z-index: 0;
}
.acao-check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  z-index: 1;
}
.acao-check svg { width: 14px; height: 14px; }
.acao-check-p { stroke: var(--acao); stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.22s ease-out 0.16s; }
.acao-rot { z-index: 1; transition: color 0.2s 0.2s; }
/* cumprindo (durante a sequência) e cumprida (estado final) são a mesma cara:
   fundo azul, check branco */
.acao-hoje.cumprindo .acao-fill, .acao-hoje.cumprida .acao-fill { transform: scale(40); }
.acao-hoje.cumprindo .acao-check, .acao-hoje.cumprida .acao-check { background: var(--branco); border-color: var(--branco); }
.acao-hoje.cumprindo .acao-check-p, .acao-hoje.cumprida .acao-check-p { stroke-dashoffset: 0; }
.acao-hoje.cumprindo .acao-rot, .acao-hoje.cumprida .acao-rot { color: var(--branco); }
.acao-hoje.cumprida .acao-fill { transition: none; }
.acao-hoje.cumprida .acao-check-p { transition: none; }
.acao-pos { color: var(--tinta); font-size: 14px; line-height: 1.5; margin: 12px 0 0; }
.acao-pos b { color: var(--acao); font-weight: 700; font-variant-numeric: tabular-nums; }
.acao-caderno { display: block; width: 100%; text-align: left; min-height: 44px; margin-top: 4px; padding: 0; color: var(--tinta-2); font-size: 13px; line-height: 1.5; }
.acao-caderno:active { opacity: 0.7; }
html.sem-fx .acao-fill, html.sem-fx .acao-check-p, html.sem-fx .acao-marca { transition: none; }

/* convite do time fundador do Android, na porta do site */
.tf-kicker { display: block; text-align: center; color: var(--text); margin-bottom: 6px; }
.tf-texto { color: var(--muted); font-size: 14px; line-height: 1.6; text-align: center; margin: 10px 0 16px; }
.tf-aviso { color: var(--faint); font-size: 12.5px; line-height: 1.6; margin: 10px 0 16px; }
.tf-aviso b { color: var(--text); }
/* navegador embutido (Instagram, TikTok): a saída para o navegador de verdade,
   no login e no convite do time fundador */
.nav-interno { text-align: center; }
.nav-interno p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0; }
.nav-interno .btn { margin-top: 12px; text-decoration: none; }
.nav-interno .btn-text.block { margin-top: 2px; }
.install-block > b { font-size: 14px; display: block; margin-bottom: 6px; }
.install-block ol { padding-left: 18px; color: var(--muted); font-size: 13.5px; line-height: 1.8; margin: 0; }
.install-block ol b { color: var(--text); }

.auth-tabs {
  display: flex;
  height: 40px;
  background: var(--campo);
  border-radius: var(--r-controle);
  padding: 3px;
  margin-bottom: 20px;
}
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  border-radius: var(--r-controle);
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}
.auth-tab.sel { background: var(--branco); color: var(--tinta); }
/* entrar com a Apple e com o Google: botões brancos sobre o preto, como as
   diretrizes dos dois pedem; o "G" colorido é SVG inline, sem imagem externa */
.login-social { display: flex; flex-direction: column; gap: 10px; }
.btn-social {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  min-height: 48px;
  background: var(--branco);
  color: var(--tinta);
  border: 1px solid var(--branco);
  border-radius: var(--r-controle);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 0 16px;
  cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
}
.btn-social:active { transform: scale(0.985); filter: brightness(0.9); }
.btn-social:disabled { opacity: 0.5; cursor: default; }
.btn-social:disabled:active { transform: none; filter: none; }
.btn-social svg { width: 18px; height: 18px; flex: none; }
.btn-social.apple svg { fill: var(--tinta); }
.btn-social.google { color: #1F1F1F; }
/* o "ou" entre os provedores e o formulário de e-mail e senha */
.login-ou {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 16px;
  color: var(--faint);
  font-size: 13px;
}
.login-ou::before, .login-ou::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
/* aceite dos Termos e da Política (login nas duas abas e "Crie seu perfil")
   e o contato de quem não consegue entrar */
.termos-aceite, .login-suporte { text-align: center; font-size: 12px; color: var(--faint); margin-top: 12px; }
.termos-aceite a, .login-suporte a { color: var(--neon); }
.modal .termos-aceite + .btn { margin-top: 12px; }
.handle-status { font-size: 12px; margin-top: 6px; color: var(--faint); min-height: 15px; }
.handle-status.ok { color: var(--ok); }
.handle-status.bad { color: var(--erro); }

/* o símbolo (nunca o logotipo) abre o login, o cadastro e as portas do app */
.onboard-logo { display: block; margin: 0 auto 28px; height: 56px; }
.onboard-verse { text-align: center; font-family: var(--font-ui); color: var(--muted); font-size: 16.5px; line-height: 1.5; margin-bottom: 8px; }
.onboard-ref { text-align: center; font-family: var(--font-titulo); color: var(--faint); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 22px; }

/* celebração de dia completo: losangos brancos e neon sobem do centro-base */
.celebrate { position: fixed; inset: 0; z-index: 49; pointer-events: none; overflow: hidden; }
.celebrate .fagulha {
  position: absolute;
  left: 50%;
  bottom: 8vh;
  width: 6px; height: 6px;
  background: var(--c, var(--branco));
  opacity: 0;
  animation: sparkFly 1.5s ease-out forwards;
  animation-delay: var(--d);
}
@keyframes sparkFly {
  0% { transform: translate(-50%, 0) rotate(45deg) scale(0.5); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), var(--dy)) rotate(45deg) scale(1.05); opacity: 0; }
}

/* aviso passageiro, não botão: fundo sólido, hairline, sem desfoque */
/* a raiz sobe junto: sem contexto de empilhamento próprio, um card posicionado
   da tela podia ser pintado por cima do aviso */
#toast-root { position: relative; z-index: 90; }
.toast {
  position: fixed;
  /* na Evolução o toast sobe: no lugar de sempre ele cobria o card de Sinais */
  bottom: var(--toast-bottom, calc(env(safe-area-inset-bottom) + 66px));
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-hi);
  border: 1px solid var(--hairline-forte);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-controle);
  padding: 12px 18px;
  z-index: 60;
  max-width: 86%;
  text-align: center;
  animation: slideUp 0.22s ease-out;
}

/* ---------- onboarding (slides) ---------- */
#onboarding {
  position: fixed; inset: 0;
  z-index: 40;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: obIn 0.4s ease;
}
@keyframes obIn { from { opacity: 0; } }
.ob-skip {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 14px);
  right: 12px;
  z-index: 42;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  min-height: 44px;
  padding: 0 12px;
  cursor: pointer;
}
.ob-skip:active { opacity: 0.6; }
.ob-slides {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x;
}
.ob-slides::-webkit-scrollbar { display: none; }
.ob-slide {
  min-width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: calc(var(--safe-top) + 32px) 36px 40px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* centraliza sem cortar: conteúdo curto centra, conteúdo alto começa no topo */
.ob-slide::before { content: ""; display: block; flex: none; height: 0; margin-top: auto; }
.ob-slide::after { content: ""; display: block; flex: none; height: 0; margin-bottom: auto; }
.ob-slide h2 {
  font-family: var(--font-titulo);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ob-slide p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 310px;
}
/* só a capa leva o recorte de grafismo; os outros slides ficam em preto liso */
.ob-cover { background: var(--bg); }
.ob-cover h2 { font-size: 34px; }
.ob-cover p { color: var(--muted); }
/* área de proteção do símbolo: metade da altura (44px) em cada lado */
.ob-logo { height: 88px; margin-top: 24px; margin-bottom: 44px; }
.ob-icon {
  width: 84px; height: 84px;
  border-radius: var(--r-controle);
  clip-path: var(--clip-tile);
  background: var(--superficie-clara);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 30px;
}
.ob-icon svg { width: 36px; height: 36px; fill: var(--tinta); }
.ob-icon.ob-emoji { font-size: 42px; }
.ob-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px calc(env(safe-area-inset-bottom) + 30px);
}
/* os pontos viram losangos; o ativo acende em branco sem esticar */
.ob-dots { display: flex; gap: 10px; }
.ob-dots span {
  width: 7px; height: 7px;
  border-radius: 0;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.25s;
}
.ob-dots span.on { background: var(--branco); width: 7px; }
.ob-next {
  background: var(--acao);
  color: var(--branco);
  border: none;
  border-radius: var(--r-controle);
  clip-path: var(--clip-chanfro);
  height: 48px;
  padding: 0 26px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}
.ob-next:active { transform: scale(0.985); filter: brightness(0.85); }

/* ---------- tour guiado (primeiro uso) ---------- */
/* o escurecimento em volta do recorte é uma máscara, não uma sombra: é a
   única forma de furar a tela em volta do elemento destacado */
.tour-hole {
  position: fixed;
  z-index: 46;
  border-radius: var(--r-card);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.78);
  border: 1.5px solid var(--neon);
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.tour-tip {
  position: fixed;
  z-index: 47;
  background: var(--superficie-clara);
  color: var(--tinta);
  border-radius: var(--r-card);
  padding: 18px;
  width: min(300px, calc(100vw - 32px));
  animation: viewIn 0.3s ease;
}
.tour-tip h4 { font-family: var(--font-ui); font-size: 17px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 5px; }
.tour-tip p { font-size: 13.5px; color: var(--tinta-2); line-height: 1.55; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.tour-count { font-size: 11px; color: var(--tinta-2); font-weight: 500; }
.tour-actions { display: flex; gap: 6px; }
.tour-actions .t-skip {
  background: none; border: none;
  color: var(--tinta-2);
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 9px 12px;
  cursor: pointer;
}
.tour-actions .t-next {
  background: var(--acao);
  color: var(--branco);
  border: none;
  border-radius: var(--r-controle);
  clip-path: var(--clip-chanfro);
  height: 36px;
  padding: 0 18px;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}

/* com "reduzir movimento" ativo, só as transições decorativas saem;
   os efeitos funcionais (café enchendo, celebrações) continuam */
/* "reduzir efeitos" no Perfil vale o mesmo que a preferência do sistema */
html.sem-fx #view { animation: none; }
html.sem-fx .habit-row, html.sem-fx .comm-card, html.sem-fx .btn, html.sem-fx .share-c .cir { transition: none; }
html.sem-fx .brilho { animation: none; }
html.sem-fx .streak-pill.brilho { outline: none; }
html.sem-fx .habit-row.done .habit-check { animation: none; }
html.sem-fx #view.screen-enter { animation: screenFade 0.2s ease-out; }
html.sem-fx .streak-plus { top: -18px; animation: plusUmParado 1.4s ease forwards; }
html.sem-fx .anel-arco { transition: none !important; animation: none !important; }
html.sem-fx .pilar-barra i, html.sem-fx .evo-seg-thumb,
html.sem-fx .graf-cursor, html.sem-fx .evo-balao, html.sem-fx .btn-partilha,
html.sem-fx .marco-selo, html.sem-fx .const-info { transition: none !important; }
html.sem-fx .marco-selo.selo-novo .medalha, html.sem-fx .medalha-brilho::before { animation: none !important; }
html.sem-fx .medalha-brilho { display: none; }
html.sem-fx .celebrate .fagulha { animation: none; }

@media (prefers-reduced-motion: reduce) {
  #view { animation: none; }
  .habit-row, .comm-card, .btn, .share-c .cir { transition: none; }
  .brilho { animation: none; }
  .streak-pill.brilho { outline: none; }
  .habit-row.done .habit-check { animation: none; }
  /* a resposta continua, sem deslocamento: opacidade em 200ms */
  #view.screen-enter { animation: screenFade 0.2s ease-out; }
  .streak-plus { top: -18px; animation: plusUmParado 1.4s ease forwards; }
  .anel-arco { transition: none !important; animation: none !important; }
  .pilar-barra i, .evo-seg-thumb, .graf-cursor, .evo-balao,
  .btn-partilha, .marco-selo, .const-info { transition: none !important; }
  .marco-selo.selo-novo .medalha, .medalha-brilho::before { animation: none !important; }
  .medalha-brilho { display: none; }
  .celebrate .fagulha { animation: none; }
}

/* glifos de interface: traço fino em caixa de 20px, herdando a cor do contexto.
   Substituem emoji dentro da interface. */
.glifo {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
/* regra: glifo que representa conquista, identidade ou dado é sólido;
   traço fica só em ícone de interface */
.glifo.solido { fill: currentColor; stroke: none; }
/* dentro do avatar claro do cadastro o traço precisa ser escuro para ler */
.glifo-avatar { width: 26px; height: 26px; color: var(--tinta); opacity: 0.55; }

/* suporte: relatar problema ou sugerir melhoria */
.sup-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sup-type {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: var(--r-controle); border: 1px solid var(--hairline);
  background: var(--campo); color: var(--text); font: inherit; cursor: pointer;
}
.sup-type span { display: flex; color: var(--muted); }
.sup-type.on span { color: var(--neon); }
.sup-type b { font-size: 12.5px; font-weight: 600; text-align: center; }
.sup-type.on { border-color: var(--neon-borda); background: var(--neon-dim); }
.sup-item { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-card); background: var(--campo); }
.sup-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sup-item-top > span:first-child { display: flex; color: var(--muted); }
.sup-item p { font-size: 13px; color: var(--muted); margin: 0; white-space: pre-wrap; }
.sup-item .pill {
  font-size: 11px; padding: 2px 8px; border-radius: var(--r-controle);
  background: var(--campo-forte); color: var(--muted);
}
.sup-item .pill.on { background: rgba(53, 199, 123, 0.16); color: var(--ok); }
#sup-text {
  background: var(--campo); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-controle); color: var(--text); font: inherit; font-size: 15px;
  padding: 12px 14px; resize: vertical; outline: none;
}
#sup-text:focus { border-color: var(--neon); }
#sup-text::placeholder { color: var(--faint); }

/* vídeo no check-in de grupo */
.video-thumb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-controle);
  background: var(--neon-dim); color: var(--neon); font-size: 14px;
  cursor: pointer;
}
/* botão ⋯ do card de grupo (alternativa ao arrastar) */
/* o desenho continua com 28px; o alvo de toque cresce para 44x44 pelo padding
   negativo, sem empurrar a seta nem mudar a altura do card */
.comm-more {
  border: none; background: var(--campo); color: var(--muted);
  width: 28px; height: 28px; min-width: 28px; border-radius: var(--r-controle);
  font-size: 16px; line-height: 1;
  padding: 8px; margin: -8px;
  background-clip: content-box;
  cursor: pointer; flex-shrink: 0;
  box-sizing: content-box;
}

/* novidades não vistas (estilo Instagram): ponto e contagem em neon */
#tabbar .tab { position: relative; }
/* losango de 6px no canto superior direito do ícone, 2px para fora */
#tabbar .tab.has-dot::after {
  content: "";
  position: absolute; top: 3px; right: calc(50% - 14px);
  width: 6px; height: 6px; border-radius: 0;
  transform: rotate(45deg);
  background: var(--neon);
  outline: 2px solid var(--bg);
}
.g-dot {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-controle);
  background: var(--neon); color: var(--preto);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.news-banner {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  background: var(--neon-dim);
  border: 1px solid var(--neon-borda);
  border-radius: var(--r-card);
  padding: 13px 16px;
  margin-bottom: 12px;
  color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.news-banner .nb-dot {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-controle);
  background: var(--neon); color: var(--preto);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.news-banner .nb-txt { flex: 1; min-width: 0; }
.news-banner .nb-txt b { display: block; font-size: 14px; }
.news-banner .nb-txt small { color: var(--muted); font-size: 12px; }
.news-banner .nb-arrow { color: var(--neon); font-size: 20px; }

/* folha de compartilhamento estilo Strava */
.share-carousel {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 10px;
  -webkit-overflow-scrolling: touch;
}
.share-card {
  background: none; border: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer; scroll-snap-align: center; flex-shrink: 0;
}
.share-card small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.share-card.sel small { color: var(--neon); font-weight: 700; }
.share-prev {
  width: 118px; height: 200px;
  border-radius: var(--r-controle);
  border: 2px solid transparent;
  background: var(--campo);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.share-prev.sq { height: 152px; align-self: center; }
.share-prev.sq img { object-fit: contain; }
.share-card.sel .share-prev { border-color: var(--neon); }
.share-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-prev.chess {
  background:
    repeating-conic-gradient(rgba(255,255,255,0.10) 0% 25%, rgba(255,255,255,0.02) 0% 50%) 0 0 / 22px 22px;
}
.share-prev.chess img { object-fit: contain; }
.share-toggle {
  display: flex; align-items: center; gap: 9px;
  color: var(--text); font-size: 13.5px;
  padding: 8px 2px 4px; cursor: pointer;
}
.share-toggle input { width: 17px; height: 17px; accent-color: var(--acao); }
.share-dest {
  display: flex; justify-content: space-around;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.share-c.dark .cir { background: var(--campo-forte); color: var(--text); }
.share-c.dark span { color: var(--muted); }

/* anexo de mídia sob a atividade selecionada (check-in de grupo) */
.attach-row {
  width: calc(100% - 12px);
  margin: 2px 6px 8px;
  display: flex; align-items: center; gap: 10px;
  background: var(--neon-dim);
  border: 1px dashed var(--neon-borda);
  border-radius: var(--r-controle);
  padding: 11px 14px;
  color: var(--neon);
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left;
}
.attach-row svg { width: 17px; height: 17px; fill: var(--neon); flex-shrink: 0; }
.attach-row.filled {
  border-style: solid;
  cursor: default;
}
.attach-thumb {
  width: 34px; height: 34px; border-radius: var(--r-controle);
  object-fit: cover; display: block; flex-shrink: 0;
}
.attach-thumb.video {
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  color: var(--branco); font-size: 13px;
}
.attach-row .attach-txt { flex: 1; color: var(--text); }
.attach-rm {
  border: none; background: none; color: var(--erro);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  pointer-events: auto;
}

/* Seus números: linha com número grande e explicação do que ele significa */
.stat-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.stat-row {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--hairline);
}
.stat-row:last-child { border-bottom: none; }
.stat-row b {
  font-family: var(--font-titulo);
  font-size: 28px; font-weight: 400; line-height: 1.05;
  color: var(--text);
  min-width: 56px; text-align: center;
}
.stat-row span { display: block; font-size: 14px; font-weight: 600; }
.stat-row small { color: var(--faint); font-size: 12px; line-height: 1.35; display: block; }

/* botão de compartilhar do versículo: secundário sobre a superfície clara */
.hero-share {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  min-height: 48px;
  margin-top: 22px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.35); border-radius: var(--r-controle);
  background: transparent;
  color: var(--tinta);
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  cursor: pointer;
}
.hero-share svg { width: 17px; height: 17px; fill: var(--tinta); }
.hero-share:active { transform: scale(0.985); background: rgba(0, 0, 0, 0.06); }

/* Enviar check-in fica visível enquanto a lista rola */
.enviar-fixo {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + 62px);
  z-index: 6;
  margin-top: 12px;
}
.enviar-fixo.enviando { opacity: 0.7; pointer-events: none; }

/* escolha das métricas do cartão da semana */
.share-escolha {
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
  margin-top: 2px;
}
.share-escolha .micro { display: block; margin-bottom: 4px; }
.share-escolha .share-toggle { padding: 5px 2px; }

/* gamificação: +1 na sequência, versículo em destaque, movimento no ranking */
.streak-plus {
  position: absolute;
  right: 10px; top: -6px;
  font-weight: 700; font-size: 15px;
  color: var(--neon);
  animation: plusUm 1.4s ease forwards;
  pointer-events: none;
}
@keyframes plusUm {
  0% { opacity: 0; transform: translateY(6px) scale(0.7); }
  25% { opacity: 1; transform: translateY(-4px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}
/* efeitos reduzidos: o +1 aparece e some, sem deslocamento nenhum */
.streak-plus.sem-mov { top: -18px; animation: plusUmParado 1.4s ease forwards; }
@keyframes plusUmParado {
  0% { opacity: 0; }
  15%, 60% { opacity: 1; }
  100% { opacity: 0; }
}
/* versículo em destaque: borda azul de ação, sem brilho */
.verse-hero.dourado { border: 2px solid var(--acao); }
.verse-hero.dourado .kicker { color: var(--acao); }
.rank-mv { font-size: 9px; margin-left: 3px; vertical-align: 2px; }
.rank-mv.up { color: var(--ok); }
.rank-mv.down { color: var(--erro); }
.afiada-banner { border-color: var(--neon-borda); }

/* ---------- polimento de toque (v39): tudo responde ao dedo ---------- */
/* nenhuma imagem do app abre o menu nativo de copiar/salvar nem arrasta */
img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
/* sem o flash cinza do WebKit no toque; o feedback é nosso, via escala */
* { -webkit-tap-highlight-color: transparent; }
.btn, .btn-text, .icon-btn, .chip-opt, .comm-card, .news-banner, .back-btn, .refresh-btn, .som-toggle, .comm-more, #tabbar .tab, .swipe-btn, .rank-row, .manage-row .btn-text {
  touch-action: manipulation;
}
.btn-text, .icon-btn, .chip-opt, .back-btn, .refresh-btn, .som-toggle,
.comm-more, #tabbar .tab, .swipe-btn {
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.icon-btn:active, .chip-opt:active, .refresh-btn:active, .som-toggle:active, .comm-more:active {
  transform: scale(0.94);
  opacity: 0.8;
}
.btn-text:active, .back-btn:active { opacity: 0.6; }
.swipe-btn:active { filter: brightness(0.85); }
/* a aba responde em opacidade, sem escala */
#tabbar .tab:active { opacity: 0.6; }
.comm-card { transition: transform 0.13s ease; }
.comm-card:active { transform: scale(0.985); }
.news-banner { transition: transform 0.13s ease; }
.news-banner:active { transform: scale(0.985); }

/* entrada de tela ao trocar de aba ou abrir um grupo (estilo Instagram:
   curto, sobe 8px e assenta; re-renders de dados não passam por aqui) */
/* precisa vencer o #view { animation: viewIn } lá de cima: como classe solta a
   regra perdia por especificidade e a transição de tela nunca chegava a rodar */
#view.screen-enter { animation: screenIn 0.22s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* reduzir efeito não é remover resposta: a troca de tela continua existindo,
   só que em opacidade e sem deslocamento */
#view.screen-enter-fade { animation: screenFade 0.2s ease-out; }
@keyframes screenFade { from { opacity: 0; } to { opacity: 1; } }

/* modal: o fundo escurece suave e o fechamento desliza de volta */
.modal-backdrop { animation: backdropIn 0.2s ease-out; }
@keyframes backdropIn { from { background: rgba(0, 0, 0, 0); } }
.modal-backdrop.closing {
  background: rgba(0, 0, 0, 0);
  transition: background 0.18s ease-in;
  pointer-events: none;
}
.modal-backdrop.closing .modal {
  transform: translateY(48px);
  opacity: 0;
  transition: transform 0.18s ease-in, opacity 0.18s ease-in;
}

/* toast desliza para fora em vez de sumir de estalo */
.toast.saindo {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.28s ease-in, transform 0.28s ease-in;
}

/* avatar do Perfil é clicável: badge indicando adicionar/trocar a foto */
/* o badge mora FORA do círculo: o overflow do avatar cortaria o canto dele */
.avatar-clicavel { position: relative; cursor: pointer; overflow: visible; width: 60px; height: 60px; flex: 0 0 auto; }
.avatar-clicavel .avatar-add {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--acao);
  color: var(--branco);
  font-size: 14px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card-hi);
  pointer-events: none;
}

/* ---------- barra de ação da aba e barra das telas empilhadas ---------- */
/* O #topbar (marca, sequência, ajuda) é global e já cuida do safe-area do
   topo. Estas barras são de TELA: rolam com o conteúdo e trazem a ação da
   aba (engrenagem no Perfil, "+" em Grupos) ou o voltar das telas de dentro.
   O #view tem 16px de recuo lateral, então o botão encostado na direita da
   barra fica exatamente a 16px da margem do aparelho. */
.screen-head.screen-head-acao {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-right: 0;
}
.screen-head-acao .sh-txt { flex: 1; min-width: 0; }
.screen-head-acao .sh-acoes { display: flex; align-items: center; gap: 6px; margin-top: -4px; }

/* alvo de 44x44 com o desenho menor no meio, como o resto do app */
.barra-acao {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: none;
  border-radius: var(--r-controle);
  color: var(--text);
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.barra-acao .glifo { width: 22px; height: 22px; }
.barra-acao.texto { width: auto; min-width: 44px; padding: 0 4px; font-size: 14.5px; font-weight: 600; }
.barra-acao.ouro { color: var(--neon); }

.nav-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0 0 20px;
}
.nav-back {
  justify-self: start;
  display: flex; align-items: center; gap: 2px;
  height: 44px;
  padding: 0 8px 0 0;
  background: none; border: none;
  color: var(--neon);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nav-back:active { opacity: 0.6; }
.nav-back .nb-chev { font-size: 21px; line-height: 1; margin-top: -2px; }
.nav-tit {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  white-space: nowrap;
}
.nav-dir { justify-self: end; display: flex; align-items: center; gap: 4px; }

/* ---------- lista agrupada (Ajustes) ---------- */
/* Nada do cinza de sistema do iPhone aqui: o grupo é o mesmo card escuro do
   app, o separador é o hairline e o neon só aparece no item de destaque. */
.lista-cab {
  font-family: var(--font-titulo);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-rotulo);
  color: var(--faint);
  margin: 0 6px 8px;
}
.lista-grupo {
  background: var(--card-hi);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 24px;
}
.lista-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.lista-item:last-child { border-bottom: none; }
.lista-item.info { cursor: default; }
.lista-item .li-rot { flex: 1; min-width: 0; font-weight: 500; }
.lista-item .li-rot small { display: block; color: var(--faint); font-size: 12px; font-weight: 400; margin-top: 2px; }
.lista-item .li-val {
  color: var(--faint);
  font-size: 14px;
  max-width: 58%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
}
.lista-item .li-chev { color: var(--faint); font-size: 18px; line-height: 1; }
.lista-item.ouro .li-rot, .lista-item.destaque .li-rot { color: var(--neon); }
.lista-item.perigo .li-rot { color: var(--erro); }
.lista-item:not(.info):active { background: var(--campo); }
/* o campo de hora cobre a linha inteira e some: o toque abre o seletor do
   sistema e o valor visível continua sendo o nosso */
.lista-item .li-hora-input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
}
.lista-rodape {
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.5;
  margin: -16px 6px 24px;
}
/* a exclusão fica sozinha, longe do resto, com respiro antes */
.lista-grupo.rodape-perigo { margin-top: 32px; }
.lista-perdas { list-style: none; margin: 0; padding: 0; }
.lista-perdas li {
  position: relative;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 5px 0 5px 18px;
}
.lista-perdas li::before {
  content: "";
  position: absolute;
  left: 2px; top: 13px;
  width: 5px; height: 5px;
  border-radius: 0;
  transform: rotate(45deg);
  background: var(--faint);
}
/* ação destrutiva solta no rodapé de uma tela empilhada */
.rodape-solto { margin-top: 24px; }

/* ---------- estados vazios e de erro ---------- */
.estado-vazio { text-align: center; padding: 30px 24px 26px; }
.ev-glifo {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: var(--r-controle);
  background: var(--campo);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.ev-glifo .glifo { width: 30px; height: 30px; }
.ev-tit {
  font-family: var(--font-titulo);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: var(--track-titulo);
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 10px;
}
.ev-txt { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin-bottom: 20px; }
.estado-vazio .btn-text.block { margin-top: 10px; }

/* ---------- esqueleto da lista de grupos ---------- */
.esqueleto-lista { margin-bottom: 14px; }
.esq-card {
  /* mesmo recuo e mesma folga do .comm-card, para o tile do esqueleto cair
     exatamente onde o tile real vai aparecer */
  display: flex; align-items: center; gap: 12px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 18px 14px;
  margin-bottom: 10px;
}
/* mesma geometria do tile novo (48px, quadrado), só com o brilho de carregamento */
.esq-avatar { width: 48px; height: 48px; min-width: 48px; border-radius: 0; }
.esq-linhas { flex: 1; min-width: 0; }
.esq-linha { height: 11px; border-radius: var(--r-controle); }
.esq-linha.curta { height: 9px; margin-top: 9px; }
/* esqueleto do placar da Constância: mesmo brilho, no formato do anel */
.esq-anel { width: 188px; height: 188px; border-radius: 999px; margin: 18px auto 0; }
/* o brilho atravessando é o que separa "carregando" de "vazio" */
.brilho {
  background: rgba(255, 255, 255, 0.05);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: brilhoPassa 1.4s ease-in-out infinite;
}
@keyframes brilhoPassa {
  from { background-position: -120% 0; }
  to { background-position: 220% 0; }
}

/* ---------- folha de decisão com várias ações ---------- */
/* segunda ação de uma folha de escolha: tem o mesmo peso de decisão da
   primeira, então não pode se confundir com o Cancelar */
.sheet-btn.neutra {
  background: var(--campo);
  border: 1px solid var(--neon-borda);
  color: var(--neon);
}
.sheet-corpo { margin: 4px 0 14px; }
.passos p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin-bottom: 11px; text-align: left; }
.passos p:last-child { margin-bottom: 0; }
.passos b { color: var(--text); font-weight: 600; }

/* editar hábito: o lápis não pode acender em vermelho como a lixeira */
.icon-btn.editar:hover svg { fill: var(--neon); }

/* ---------- formulário dentro de uma tela empilhada ---------- */
/* As regras de campo nasceram presas ao .modal. Editar perfil e Excluir conta
   agora são telas do #view e precisam do mesmo desenho, sem mexer no modal. */
#view label.field, #view-proxima label.field { display: block; margin-bottom: 14px; }
#view label.field .micro, #view-proxima label.field .micro { display: block; margin-bottom: 8px; }
#view label.field input[type="text"], #view-proxima label.field input[type="text"],
#view label.field input[type="tel"], #view-proxima label.field input[type="tel"],
#view label.field input[type="email"], #view-proxima label.field input[type="email"],
#view label.field input[type="password"], #view-proxima label.field input[type="password"] {
  width: 100%;
  height: 48px;
  background: var(--campo);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-controle);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 0 14px;
}
#view label.field input::placeholder, #view-proxima label.field input::placeholder { color: var(--faint); }
#view label.field input:focus, #view-proxima label.field input:focus { outline: none; border-color: var(--neon); }
/* botão desabilitado: existe na tela, mas não convida ao toque */
#view .btn:disabled, #view-proxima .btn:disabled { opacity: 0.4; cursor: default; }
#view .btn:disabled:active, #view-proxima .btn:disabled:active { transform: none; }

/* ---------- visualizador de mídia ----------
   Tela cheia preta, sem cartão e sem canto arredondado: a prova do mural
   ocupa o aparelho inteiro. Fica ACIMA do modal (50) e ABAIXO da folha de
   decisão (80), porque o menu "..." precisa abrir por cima dele; o toast
   (60) também passa por cima, senão o "Imagem salva" ficaria escondido. */
#visor-root { position: relative; z-index: 55; }
.visor { position: fixed; inset: 0; z-index: 55; overscroll-behavior: none; }
.visor.saindo { opacity: 0; transition: opacity 0.2s ease-in; pointer-events: none; }
.visor-fundo { position: absolute; inset: 0; background: #000; animation: visorFundo 0.2s ease-out; }
@keyframes visorFundo { from { opacity: 0; } }
.visor-palco {
  position: absolute; inset: 0;
  overflow: hidden;
  touch-action: none;
  will-change: transform;
}
.visor-trilho { display: flex; height: 100%; will-change: transform; }
.visor-slide {
  min-width: 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.visor-midia {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  will-change: transform;
  -webkit-user-drag: none;
}
.visor video.visor-midia { width: 100%; }

/* barras de cima e de baixo: sempre visíveis por padrão, some no toque */
.visor-topo, .visor-rodape {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.visor-topo > *, .visor-rodape > * { pointer-events: auto; }
.visor-topo {
  top: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
}
.visor-rodape {
  bottom: 0;
  padding: 22px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}
.visor.sem-controles .visor-topo,
.visor.sem-controles .visor-rodape { opacity: 0; pointer-events: none; }

.visor-ic {
  width: 44px; height: 44px; min-width: 44px;
  border: none; background: none;
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
.visor-ic svg { width: 22px; height: 22px; fill: var(--text); }
.visor-ic:active { opacity: 0.6; }
.visor-conta { flex: 1; text-align: center; font-size: 15px; color: var(--muted); }

.visor-quem { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.visor-avatar {
  width: 28px; height: 28px; min-width: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--superficie-clara);
  color: var(--tinta);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.visor-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor-meta { min-width: 0; }
.visor-meta b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.visor-meta small { color: var(--muted); font-size: 11.5px; }
.visor-afiar {
  width: 40px; height: 40px; min-width: 40px;
  border: 1px solid var(--hairline-forte);
  background: rgba(0, 0, 0, 0.55);
  border-radius: var(--r-controle);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.visor-afiar svg { width: 18px; height: 18px; fill: var(--text); }
.visor-afiar.on { background: var(--acao); border-color: var(--acao); }
.visor-afiar.on svg { fill: var(--branco); }

/* opção da folha que abre um grupo novo (as ações vermelhas do menu "...") */
.sheet-btn.com-divisoria { position: relative; margin-top: 26px; }
.sheet-btn.com-divisoria::before {
  content: "";
  position: absolute;
  left: 12px; right: 12px; top: -13px;
  height: 1px;
  background: var(--hairline);
}

/* ================= tela larga: duas colunas (a partir de 900px) ==========   Tudo aqui vive dentro da media query: no celular nada muda.

   O ROLADOR CONTINUA SENDO O #app. O #view nunca ganha overflow próprio, porque
   três coisas leem ou escrevem a rolagem do #app: o gesto de puxar para
   atualizar, o appScrollTop() da troca de tela e o topo grudento. Em duas
   colunas a página rola inteira, e é isso que mantém a mudança barata. */
@media (min-width: 900px) {
  /* o app passa a ocupar a janela toda e reserva a faixa da navegação */
  #app {
    max-width: none;
    padding-left: 260px;
  }

  /* topo e conteúdo dividem a mesma coluna de leitura, centrada no espaço que
     sobra à direita da navegação */
  #topbar {
    align-self: center;
    width: 100%;
    max-width: 672px;
    padding: 26px 16px 14px;
    justify-content: flex-end;
  }
  /* a marca já está no alto da coluna esquerda: repetir no topo seria ruído */
  #topbar .brand { display: none; }

  #view {
    align-self: center;
    width: 100%;
    max-width: 672px;
    /* sem barra no rodapé não há o que reservar embaixo */
    padding: 18px 16px 72px;
  }

  /* ---------- a tab bar vira a coluna de navegação ---------- */
  #tabbar {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    margin: 0;
    width: 260px;
    height: auto;
    max-width: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: calc(env(safe-area-inset-top, 0px) + 26px) 16px 22px;
    background: var(--bg);
    border: none;
    border-right: 1px solid var(--hairline);
    border-radius: 0;
  }
  /* o logotipo no alto da coluna, do mesmo arquivo que o topo usa */
  #tabbar::before {
    content: "";
    display: block;
    height: 18px;
    margin: 0 10px 30px;
    background: url("assets/marca/logotipo-para-fundo-escuro-branco.svg") left center / auto 18px no-repeat;
    flex: none;
  }
  #tabbar .tab {
    flex: none;
    width: 100%;
    max-width: none;
    height: 44px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 14px;
    border-radius: var(--r-controle);
    font-size: 14px;
    letter-spacing: 0;
  }
  #tabbar .tab svg { width: 19px; height: 19px; }
  #tabbar .tab .tab-ava { width: 19px; height: 19px; }
  #tabbar .tab .tab-ava-mais { width: 9px; height: 9px; right: -3px; bottom: -2px; }
  #tabbar .tab .tab-ava-mais svg { width: 6px; height: 6px; }
  #tabbar .tab.active {
    background: var(--acao-dim);
    color: var(--text);
  }
  /* encolher uma linha larga no clique fica estranho; no mouse o retorno é o hover */
  #tabbar .tab:active { opacity: 1; }
  /* o ponto de novidade acompanha o fim da linha, não o canto do ícone */
  #tabbar .tab.has-dot::after {
    top: 50%;
    right: 14px;
    margin-top: -4px;
  }
  /* Perfil desce para o rodapé da coluna, separado da navegação por um fio */
  #tabbar .tab[data-tab="perfil"] { margin-top: auto; }
  #tabbar .tab[data-tab="perfil"]::before {
    content: "";
    position: absolute;
    left: 14px; right: 14px; top: -10px;
    height: 1px;
    background: var(--hairline);
  }

  /* o aviso passageiro e o botão de enviar acompanham a coluna de conteúdo */
  .toast {
    bottom: 28px;
    left: calc(50% + 130px);
  }
  .enviar-fixo { bottom: 26px; }

  /* folha de confirmação: no celular ela sobe da base, aqui vira diálogo
     centrado. O visualizador de mídia continua em tela cheia, como deve ser. */
  .sheet-backdrop {
    align-items: center;
    padding: 24px;
  }
  .sheet {
    max-width: 420px;
    padding: 20px 20px 20px;
    border-radius: var(--r-card);
    animation: folhaDialogo 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  /* a alça é gramática de folha que sobe; num diálogo centrado ela mente */
  .sheet-grab { display: none; }

  /* ---------- ponteiro: as linhas respondem ao mouse ---------- */
  @media (hover: hover) {
    #tabbar .tab:hover { background: rgba(255, 255, 255, 0.04); color: var(--muted); }
    #tabbar .tab.active:hover {
      background: var(--acao-dim);
      color: var(--text);
    }
    .lista-item:not(.info):hover,
    .rank-row:not(.me):hover,
    .manage-row:hover,
    .habit-row:hover { background: rgba(255, 255, 255, 0.03); }
  }
}

@keyframes folhaDialogo {
  from { transform: translateY(10px) scale(0.98); opacity: 0; }
}

/* nota aberta do Caderno: mesma caixa de texto do app (spec 3.6 e 4.7) */
.je-text { width: 100%; min-height: 160px; background: var(--campo); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-controle); color: var(--text); font: 15px/1.5 var(--font-ui); padding: 12px 14px; resize: vertical; }
.je-text:focus { border-color: var(--neon); outline: none; }

/* ---------- tiles de grupo e de Hábitos pessoais (redesenho a pedido do Fernando) ----------
   Sai a "cartinha" clara com chanfro. Entra um tile escuro, quadrado, com a inicial em
   Optician branca e o losango da marca em azul neon no canto: mesma gramática do símbolo. */
.comm-avatar, .hp-tile {
  position: relative;
  width: 48px; height: 48px; min-width: 48px;
  clip-path: none;
  border-radius: 0;
  background: linear-gradient(160deg, #1C1C1C 0%, #0A0A0A 100%);
  border: 1px solid var(--hairline-forte);
  color: var(--text);
  font-family: var(--font-titulo);
  font-size: 21px;
  font-weight: 400;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.comm-avatar::after, .hp-tile::after {
  content: "";
  position: absolute;
  top: 5px; right: 5px;
  width: 6px; height: 6px;
  background: var(--neon);
  transform: rotate(45deg);
}
.comm-avatar::before, .hp-tile::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--azul), var(--neon));
}
.hp-tile .glifo { width: 22px; height: 22px; color: var(--text); opacity: 1; stroke: currentColor; }
.comm-card:active .comm-avatar, .hp-card:active .hp-tile { border-color: var(--neon-borda); }

/* ---------- Bíblia e planos de leitura: leitura, livros, capítulos e grifos ---------- */
/* Identidade: cantos retos em tudo, Optician em caixa alta nos títulos e
   rótulos, Google Sans Flex no texto, hairlines, preto e branco com o azul
   de ação e o neon de estado. A folha de leitura é a única superfície clara. */
body.lendo #topbar { display: none; }
body.lendo #tabbar { display: none; }
/* o fundo do #view é a própria superfície clara: na leitura imersiva a barra
   some e o lugar dela não pode virar uma faixa preta */
body.lendo #view { padding: 0; animation: none; min-height: 100dvh; background: var(--superficie-clara); }
body.lendo #app { overscroll-behavior-y: contain; }

/* barra de navegação da leitura: pegajosa, com a área segura do topo */
.leitura-nav {
  position: sticky; top: 0; z-index: 5;
  padding: calc(env(safe-area-inset-top) + 6px) 16px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline-forte);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.leitura-nav .nav-bar { margin: 0; }
.leitura-seta {
  width: 44px; height: 44px;
  background: none; border: none; color: var(--text);
  font-family: var(--font-ui); font-size: 26px; line-height: 1; cursor: pointer;
}
.leitura-seta:disabled { color: var(--apagado); cursor: default; }
.leitura-seta:active:not(:disabled) { opacity: 0.6; }
.aa-btn {
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: none; color: var(--text);
  font-family: var(--font-ui); font-weight: 600; font-size: 15px; cursor: pointer;
}
.aa-btn:active { opacity: 0.6; }
/* faixa pegajosa com a referência do capítulo cujo título saiu da tela */
.leitura-faixa {
  /* fora do fluxo: aparecer ou sumir não muda a altura da barra, senão o
     texto pulava 36 px no iPhone (o WebKit não compensa com scroll anchoring) */
  position: absolute; left: 0; right: 0; top: 100%;
  height: 36px; margin: 0;
  background: var(--superficie-clara);
  border-bottom: 1px solid var(--hairline-clara);
  display: flex; align-items: center; padding: 0 22px;
  font-family: var(--font-titulo); font-size: 12px; letter-spacing: var(--track-rotulo);
  text-transform: uppercase; color: var(--tinta-2);
}
/* o toast passa por cima do rodapé da leitura (altura medida pelo JS) */
body.lendo .toast { bottom: var(--toast-leitura, calc(env(safe-area-inset-bottom) + 150px)); }
/* display: flex venceria o atributo hidden: escondido é escondido */
.leitura-faixa[hidden], .faixa-acoes[hidden], .audio-bar[hidden] { display: none; }

/* ---------- a narração ao fundo: barrinha acima das abas ---------- */
#mini-audio {
  position: fixed; left: 0; right: 0;
  bottom: calc(50px + env(safe-area-inset-bottom));
  margin: 0 auto; width: 100%; max-width: 480px; height: 52px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 0 10px;
  background: var(--bg);
  border-top: 1px solid var(--hairline-forte);
  z-index: 19;
}
#mini-audio[hidden] { display: none; }
#mini-audio .ma-play {
  width: 40px; height: 40px; flex: 0 0 auto;
  background: var(--campo); border: none; border-radius: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
#mini-audio .ma-play svg { width: 16px; height: 16px; fill: var(--branco); }
#mini-audio .ma-col {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: none; border: none; border-radius: 0; padding: 0; text-align: left; cursor: pointer;
  color: var(--text); font: inherit;
}
#mini-audio .ma-col span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mini-audio .ma-col #ma-estado { font-size: 14px; }
#mini-audio .ma-x {
  width: 40px; height: 40px; flex: 0 0 auto;
  background: none; border: none; border-radius: 0;
  color: var(--faint); font-size: 24px; line-height: 1; cursor: pointer;
}
body.com-mini #view::after { content: ""; display: block; height: 52px; }
body.com-mini.lendo #view::after { display: none; }
/* os botões fixos do rodapé (Começar do plano, Enviar check-in) sobem com ela */
body.com-mini .plano-fixo, body.com-mini .enviar-fixo { bottom: calc(env(safe-area-inset-bottom) + 114px); }
body.com-mini #view.com-fixo { padding-bottom: calc(env(safe-area-inset-bottom) + 192px); }
/* na tela larga a navegação é a coluna da esquerda: a barrinha encosta no
   rodapé da coluna de conteúdo, à direita dela */
@media (min-width: 900px) {
  #mini-audio { left: 260px; right: 0; bottom: 0; margin: 0 auto; max-width: 672px; border: 1px solid var(--hairline); }
}

/* folha clara de borda a borda; o rodapé fixo ganha espaço no padding de baixo */
.leitura-folha {
  --leitura-fonte: 17px;
  background: var(--superficie-clara);
  color: var(--tinta);
  padding: 28px 22px calc(env(safe-area-inset-bottom) + 180px);
  min-height: calc(100dvh - 60px);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
html.sem-fx .leitura-folha { transition: none; }
.leitura-cap + .leitura-cap { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--hairline-clara); }
/* o kicker pode ter duas linhas ("GRUPO FERRO · LEITURA LIVRE" acima de "CAPÍTULO 3 DE 150") */
.leitura-kicker { color: var(--tinta-2); white-space: pre-line; }
.leitura-ref {
  font-family: var(--font-titulo); font-weight: 400;
  font-size: 24px; letter-spacing: var(--track-titulo); line-height: 1.2;
  text-transform: uppercase; color: var(--tinta);
  margin-top: 6px;
}
.leitura-obj { font-size: 13.5px; line-height: 1.5; color: var(--tinta-2); margin-top: 8px; max-width: 340px; }
.leitura-folha .rule { width: 32px; height: 1px; background: rgba(0, 0, 0, 0.28); margin: 14px 0 18px; }
.leitura-texto { font-size: var(--leitura-fonte); line-height: 1.65; color: var(--tinta); }
/* "Comece por aqui": o estudo antes do texto bíblico. Mesmo tom da folha
   (tokens da superfície clara, redefinidos em .escura), o objetivo do dia
   como título e parágrafos no tamanho do "Aa" */
.leitura-estudo { max-width: 620px; }
.leitura-estudo .le-tit {
  font-size: calc(var(--leitura-fonte) + 2px); font-weight: 600;
  line-height: 1.35; color: var(--tinta);
  margin: 8px 0 16px; max-width: 460px;
}
.leitura-estudo .le-texto { font-size: var(--leitura-fonte); line-height: 1.65; color: var(--tinta); }
.leitura-estudo .le-texto p { margin: 0 0 0.9em; }
.leitura-estudo .le-texto p:last-child { margin-bottom: 0; }
.leitura-estudo + .leitura-cap { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--hairline-clara); }
/* um versículo por linha: número Optician numa coluna de 22px, texto ao lado */
.v {
  display: grid; grid-template-columns: 22px 1fr;
  align-items: baseline;
  margin: 0 -6px 6px; padding: 1px 6px;
  border-radius: 0;
}
.v .vn {
  font-family: var(--font-titulo); font-size: 10px; letter-spacing: 0.04em;
  color: var(--tinta-2); line-height: 1; padding-top: 2px;
}
.v .vt { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.v.sel { background: var(--neon-dim); }
.v.grifo .vt { background: rgba(0, 71, 187, 0.16); box-shadow: 0 0 0 2px rgba(0, 71, 187, 0.16); }
.v.lendo { background: rgba(0, 154, 206, 0.14); transition: background 0.2s; }
.v.sel.grifo .vt { background: none; box-shadow: none; }
html.sem-fx .v.lendo { transition: none; }
/* "Próximo: João 13" no fim do conteúdo */
.leitura-proximo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 52px; margin-top: 28px; padding: 8px 0;
  background: none; border: none; border-top: 1px solid var(--hairline-clara); border-bottom: 1px solid var(--hairline-clara);
  color: var(--tinta); font-family: var(--font-ui); font-weight: 500; font-size: 15px; text-align: left; cursor: pointer;
}
.leitura-proximo .li-chev { color: var(--tinta-2); font-size: 20px; }
.leitura-proximo:active { opacity: 0.6; }
/* navegação entre os dias do plano no fim da folha: "‹ Reler o dia 4" à
   esquerda e "Ler o dia 6 ›" à direita, cada um com a referência embaixo.
   O próximo fica sempre na coluna da direita, mesmo sozinho */
.leitura-dias {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: 28px;
  border-top: 1px solid var(--hairline-clara); border-bottom: 1px solid var(--hairline-clara);
}
.leitura-dias[hidden] { display: none; }
.ld-btn {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  min-height: 64px; padding: 10px 0;
  background: none; border: none;
  color: var(--tinta); font-family: var(--font-ui); text-align: left; cursor: pointer;
}
.ld-btn.ant { grid-column: 1; padding-right: 12px; }
.ld-btn.prox { grid-column: 2; justify-content: flex-end; text-align: right; padding-left: 12px; }
.ld-btn.ant + .ld-btn.prox { border-left: 1px solid var(--hairline-clara); }
.ld-seta { flex: 0 0 auto; color: var(--tinta-2); font-size: 22px; line-height: 1; }
.ld-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ld-rot { font-weight: 600; font-size: 15px; line-height: 1.25; }
.ld-ref { font-size: 12.5px; line-height: 1.3; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-btn:active { opacity: 0.6; }
.leitura-aviso-plano {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  margin-top: 22px; color: var(--tinta-2); font-size: 12.5px;
}
.leitura-aviso-plano .btn-text { padding: 8px 0 2px; color: var(--azul); }
.leitura-credito { color: var(--tinta-2); font-size: 12px; line-height: 1.5; margin-top: 34px; opacity: 0.85; }
.leitura-credito.escuro { color: var(--faint); margin: -10px 6px 0; opacity: 1; }
/* esqueleto enquanto o texto chega e a tela de erro */
.leitura-esq .esq-ref { width: 42%; height: 22px; margin-bottom: 26px; }
.leitura-esq .esq-linha { height: 12px; margin-bottom: 14px; }
.leitura-esq .esq-linha.curta { width: 60%; }
.leitura-esq .brilho { background-color: rgba(0, 0, 0, 0.06); background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0) 100%); }
.leitura-erro { text-align: center; padding: 40px 0 20px; }
.leitura-erro .ev-glifo { background: rgba(0, 0, 0, 0.06); color: var(--tinta-2); }
.leitura-erro .ev-tit { color: var(--tinta); }
.leitura-erro .ev-txt { color: var(--tinta-2); }
.leitura-erro .btn.secondary { color: var(--tinta); border-color: rgba(0, 0, 0, 0.3); }

/* rodapé preto fixo: faixa de ações, "Segure para concluir" e a barra de áudio.
   Mora em #rodape-root, fora do #app que rola (ver raizDosRodapes no app.js) */
.leitura-pe {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  margin: 0 auto; max-width: 480px;
  background: var(--bg);
  border-top: 1px solid var(--hairline-forte);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.faixa-acoes {
  display: flex; align-items: stretch;
  height: 48px;
  background: var(--preto);
  border-bottom: 1px solid var(--hairline);
}
.fa-btn {
  flex: 1; min-width: 0;
  background: none; border: none; border-right: 1px solid var(--hairline);
  color: var(--text); font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px;
}
/* volta para a folha anterior (escolha de aparelho, time fundador) dentro do
   portão de entrar/criar conta, que não fecha de outro jeito */
.modal-voltar { display: block; text-align: left; padding: 0 0 6px; margin: -4px 0 0 -4px; color: var(--azul); }
.fa-btn:last-child { border-right: none; }
.fa-btn:active { background: var(--campo); }
/* o botão de concluir nasce escondido atrás da barra e sobe aos 80 % da rolagem */
.concluir-wrap {
  max-height: 80px; overflow: hidden;
  transition: transform 0.25s ease, max-height 0.25s ease;
}
.concluir-wrap.oculto { max-height: 0; transform: translateY(120%); }
#concluir-hold {
  position: relative; overflow: hidden;
  margin: 12px 18px; width: calc(100% - 36px);
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
#concluir-hold .hold-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: rgba(255, 255, 255, 0.22);
  transition: width 0.15s ease-out;
}
#concluir-hold.holding .hold-fill { width: 100%; transition: width 2s linear; }
#concluir-hold.holding { transform: scale(0.985); }
#concluir-hold.feito { background: var(--neon); }
#concluir-hold.feito .hold-fill { width: 0; transition: none; }
#concluir-hold .hold-rotulo { position: relative; }
/* depois do "Segure" num dia que não fecha o plano: "Concluir" e "Próximo
   capítulo" lado a lado, no mesmo lugar do botão de segurar */
.fim-do-dia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 18px; }
.fim-do-dia .btn { margin: 0; padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Próximo capítulo" inteiro até 320 px: cada botão fica com uns 137 px */
@media (max-width: 359px) { .fim-do-dia .btn { font-size: 13.5px; letter-spacing: 0; padding: 8px 6px; } }
html.sem-fx #concluir-hold.holding .hold-fill { transition: width 2s linear; }
/* barra de áudio: 56px, progresso neon de 2px no topo */
.audio-bar {
  position: relative; height: 56px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px;
  border-top: 1px solid var(--hairline);
}
.audio-bar .ab-prog { position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--neon); transition: width 0.3s; }
.ab-play {
  width: 44px; height: 44px; flex: 0 0 auto;
  background: var(--campo); border: none; border-radius: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ab-play svg { width: 18px; height: 18px; fill: var(--branco); }
.ab-play:active { background: var(--campo-forte); }
.ab-play:disabled { opacity: 0.4; cursor: default; }
.ab-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ab-col .kicker { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-col span:not(.kicker) { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-vel {
  width: 44px; height: 32px; flex: 0 0 auto; position: relative;
  background: none; border: 1px solid var(--hairline-forte); border-radius: 0;
  color: var(--text); font-family: var(--font-ui); font-weight: 600; font-size: 13px; cursor: pointer;
}
.ab-vel::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.ab-vel:active { background: var(--campo); }
/* buscando o capítulo gravado: a linha respira até o som começar */
.audio-bar.carregando .ab-col span:not(.kicker) { animation: ab-respira 1.2s ease-in-out infinite; }
@keyframes ab-respira { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
html.sem-fx .audio-bar.carregando .ab-col span:not(.kicker) { animation: none; }
@media (max-width: 359px) { .ab-col span:not(.kicker) { font-size: 12px; } }
/* leitura imersiva: toque simples no texto esconde barra e rodapé em 200ms */
body.lendo #view.imersiva .leitura-nav { transform: translateY(-100%); opacity: 0; pointer-events: none; }
/* o rodapé vive fora do #view (em #rodape-root): a classe que o esconde é do body */
body.lendo.leitura-imersiva .leitura-pe { transform: translateY(100%); opacity: 0; pointer-events: none; }
html.sem-fx .leitura-nav, html.sem-fx .leitura-pe, html.sem-fx .concluir-wrap, html.sem-fx .audio-bar .ab-prog { transition: none; }

/* folha "O que ficou de hoje?" e folha "Texto e fundo" */
.ficou-ref { display: block; margin-top: 14px; }
.ficou-texto { font-size: 15px; line-height: 1.5; color: var(--text); margin-top: 6px; }
.evo-seg.seg-2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
.evo-seg.seg-2 .evo-seg-thumb { width: calc((100% - 6px) / 2); }
.evo-seg.seg-3 { margin-top: 14px; }
.sheet-corpo .evo-seg { margin-bottom: 4px; }

/* livros (linhas de 52px), grade de capítulos (44px) e grifos */
.lista-livros .livro-item .li-rot { font-weight: 500; font-size: 15px; }
.cap-grade {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  margin-bottom: 24px;
}
@media (max-width: 359px) { .cap-grade { grid-template-columns: repeat(5, 1fr); } }
.cap-btn {
  aspect-ratio: 1; min-height: 44px;
  background: var(--campo); border: none; border-radius: 0;
  color: var(--text); font-family: var(--font-titulo); font-size: 16px; cursor: pointer;
}
.cap-btn:active { background: var(--campo-forte); }
.grifo-wrap { margin-bottom: 8px; }
.grifo-card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
  width: 100%; min-height: 60px; padding: 10px 16px;
  background: var(--card-hi); border: 1px solid var(--hairline); border-radius: 0;
  color: var(--text); font-family: var(--font-ui); text-align: left; cursor: pointer;
  transition: transform 0.22s ease; touch-action: pan-y;
}
.grifo-card:active { background: var(--campo-forte); }
.grifo-ref { font-family: var(--font-titulo); font-size: 12px; letter-spacing: var(--track-rotulo); color: var(--neon); }
.grifo-txt { font-size: 14px; color: var(--text); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grifo-wrap .swipe-actions { border-radius: 0; }
.grifo-wrap .swipe-btn { background: var(--erro); font-weight: 600; }

/* ---------- Bíblia e planos de leitura: plano do grupo (frente 3) ----------
   A linha do hábito de plano nas listas de check-in e o card "PLANO DO GRUPO"
   na tela do grupo. Cantos retos, hairlines, azul para feito, neon para a
   ação "Ler". A grade de dias (.plano-grade) é da seção do catálogo. */

/* linha do hábito de plano: toque abre a leitura, não seleciona */
.habit-row.plano { align-items: center; }
.habit-row.plano:active { transform: none; background: var(--campo-forte); }
.habit-row.plano .habit-name { line-height: 1.25; min-width: 0; }
.habit-row.plano .habit-name small {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.habit-row.plano .hr-ler {
  font-weight: 600;
  font-size: 15px;
  color: var(--neon);
  padding: 0 6px;
  white-space: nowrap;
}

/* card "PLANO DO GRUPO" (entre o check-in de hoje e o ranking) */
.plano-grupo .pg-nome { margin-top: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.005em; line-height: 1.25; }
.plano-grupo .pg-sub { margin-top: 3px; color: var(--muted); font-size: 13.5px; }
.plano-grupo .plano-grade { margin-top: 14px; }
.plano-grupo .plano-grade i.pendente, .plano-grupo .plano-grade button.pendente { background: rgba(255, 255, 255, 0.10); box-shadow: inset 0 0 0 1px var(--hairline-forte); }
.plano-grupo .plano-grade [data-diagrupo] { cursor: pointer; }
.plano-grupo .pg-aviso {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--neon);
  border-radius: 0;
  background: var(--campo);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.plano-grupo .pg-leram { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--text); }
.plano-grupo .pg-avatares { display: flex; padding-left: 6px; }
.plano-grupo .pg-avatares .rank-avatar {
  width: 24px; height: 24px; min-width: 24px;
  margin-left: -6px;
  font-size: 10.5px;
  clip-path: none;
  border: 1.5px solid var(--card-lo);
  border-radius: 50%;
}
.plano-grupo .btn-text.block { text-align: left; margin-top: 4px; padding-left: 0; }

/* gerenciamento pelo dono: adicionar o plano e a linha do plano ativo */
.linha-plano-add {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 52px;
  margin-top: 6px;
  padding: 8px 2px;
  background: none;
  border: none;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  color: var(--text);
  font-family: var(--font-ui); font-weight: 500; font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.linha-plano-add:active { background: var(--campo-forte); }
.linha-plano-add .habit-ic { flex: none; }
.linha-plano-add .lpa-txt { flex: 1; }
.linha-plano-add .lpa-chev { color: var(--faint); font-size: 22px; line-height: 1; padding-right: 6px; }
.manage-row.plano .habit-name[data-planodet] {
  background: none; border: none; padding: 0;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}

/* ---------- Bíblia e planos de leitura (aba, catálogo, plano, Hoje, conclusão) ---------- */
/* Cantos retos em tudo. O tile da sigla é o mesmo tile escuro dos Hábitos
   (losango neon no canto, linha azul na base), em três tamanhos: 44 no card,
   36 na linha, 64 no detalhe. */
/* Bíblia fechada da primeira entrada do dia. Sangra até as bordas da coluna,
   cola na barra do topo e enche a tela até 24px acima da barra de abas sem
   criar rolagem (o #view reserva 74px mais a área segura embaixo). A arte
   (render do Blender com fundo transparente, 1170x1090, sem chão: só a
   sombra e o halo) vai na largura da coluna, sem moldura sobre o preto do
   app, com o rótulo e o botão logo abaixo; o miolo (arte e rodapé) fica
   centrado na altura, um pouco acima do meio. As camadas da arte (quadro
   fechado, canvas dos quadros, quadro aberto) têm o mesmo enquadramento,
   então trocar de uma para outra não mexe um pixel. */
.bib-cena {
  position: relative;
  margin: -14px -16px 0;
  height: max(420px, calc(100dvh - var(--topbar-h, 62px) - 74px - env(safe-area-inset-bottom)));
  overflow: hidden;
  background: var(--preto);
}
.bib-cena-miolo {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 6vh;
}
.bib-cena-arte {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1170 / 1090;
  flex: none;
}
.bib-cena-camada {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* o canvas entra quando pinta o primeiro quadro (o mesmo do quadro fechado)
   e o quadro fechado sai de baixo, senão a Bíblia fechada apareceria por
   trás da que abre */
.bib-cena-quadros { visibility: hidden; }
.bib-cena.quadros-prontos .bib-cena-quadros { visibility: visible; }
.bib-cena.quadros-prontos .bib-cena-fechada { visibility: hidden; }
.bib-cena-aberta { opacity: 0; z-index: 2; }
.bib-cena.pulou .bib-cena-aberta { opacity: 1; }
.bib-cena-rodape {
  position: relative;
  z-index: 1;
  padding: 4px 16px 0;
  text-align: center;
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}
.bib-cena-rodape .kicker { display: block; color: var(--muted); }
.bib-cena-rodape .btn { margin-top: 12px; }
.bib-cena.abrindo .bib-cena-rodape { opacity: 0; transform: translateY(8px); pointer-events: none; }
/* ao abrir: a área encolhe por baixo do miolo (preso na altura de antes) e
   some junto; o conteúdo sobe na mesma curva */
.bib-cena.recolhendo {
  margin-top: 0;
  opacity: 0;
  transition: height 0.56s cubic-bezier(0.2, 0.8, 0.2, 1), margin-top 0.56s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.42s ease-out;
}
.bib-cena.recolhendo .bib-cena-miolo { bottom: auto; height: var(--cena-h); }
.bib-conteudo.velado { display: none; }
/* sem toque enquanto sobe: o dedo que pulou a animação ainda está na tela e
   o clique dele cairia no conteúdo (o encerramento da cena tira a classe) */
.bib-conteudo.subindo { animation: bibSobe 0.56s cubic-bezier(0.2, 0.8, 0.2, 1) both; pointer-events: none; }
@keyframes bibSobe {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 900px) {
  .bib-cena {
    margin: -18px auto 0;
    height: max(420px, calc(100dvh - var(--topbar-h, 62px) - 72px));
  }
}

#tabbar .tab.tab-nova { animation: tabNova 0.6s ease both; }
@keyframes tabNova { from { opacity: 0; transform: translateY(4px); } }
html.sem-fx #tabbar .tab.tab-nova { animation: none; }

.pl-tile {
  position: relative;
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 0;
  background: linear-gradient(160deg, #1C1C1C 0%, #0A0A0A 100%);
  border: 1px solid var(--hairline-forte);
  color: var(--text);
  font-family: var(--font-titulo);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
}
.pl-tile::after {
  content: "";
  position: absolute;
  top: 4px; right: 4px;
  width: 5px; height: 5px;
  background: var(--neon);
  transform: rotate(45deg);
}
.pl-tile::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--azul), var(--neon));
}
.pl-tile.peq { width: 36px; height: 36px; min-width: 36px; font-size: 14px; }
.pl-tile.peq::after { top: 3px; right: 3px; width: 4px; height: 4px; }
.pl-tile.grande { width: 64px; height: 64px; min-width: 64px; font-size: 24px; }
.pl-tile.grande::after { top: 6px; right: 6px; width: 6px; height: 6px; }

/* catálogo: grupos com título Optician e a linha de ritmo ao lado */
.pc-grupo { margin-top: 26px; }
.sec-solta + .pc-grupo, .catalogo-sub + .pc-grupo { margin-top: 6px; }
.pc-grupo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 4px 10px; }
.pc-grupo-cab .kicker { color: var(--text); flex: 0 0 auto; }
.pc-grupo-cab small { font-size: 12px; color: var(--faint); text-align: right; line-height: 1.35; }
.catalogo-sub { color: var(--muted); font-size: 13px; line-height: 1.5; margin: -6px 4px 18px; }
/* os planos do catálogo em linhas de 60px dentro de um .lista-grupo */
.lista-item.pl-linha { min-height: 60px; padding: 10px 16px; gap: 14px; }
.lista-item.pl-linha .li-rot small { margin-top: 3px; font-size: 12.5px; }
.pl-check {
  width: 20px; height: 20px; flex: 0 0 auto;
  background: var(--acao);
  display: flex; align-items: center; justify-content: center;
}
.pl-check .glifo { width: 12px; height: 12px; stroke: var(--branco); stroke-width: 2.4; stroke-linecap: square; fill: none; opacity: 1; }
.plano-credito { color: var(--faint); font-size: 12px; line-height: 1.5; margin: -10px 6px 24px; }

/* bloco BÍBLIA: abrir, continuar, grifos e a busca por referência */
.biblia-busca { position: relative; padding: 10px 12px 12px; border-top: 1px solid var(--hairline); }
.biblia-busca .sheet-input { margin-top: 0; padding-left: 40px; }
.biblia-busca .sheet-input.erro { border-color: var(--erro); }
.biblia-busca .lupa {
  position: absolute; left: 25px; top: 26px;
  width: 16px; height: 16px;
  fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-linecap: square;
  pointer-events: none;
}
.bib-busca-erro { color: var(--erro); font-size: 12.5px; line-height: 1.5; margin: 8px 2px 0; }
.bib-busca-erro[hidden] { display: none; }

/* detalhe do plano */
.plano-det { padding-bottom: 8px; }
.plano-det .pl-tile { margin: 4px 4px 14px; }
.plano-det h1 {
  font-family: var(--font-titulo);
  font-size: 24px; font-weight: 400;
  line-height: 1.2; letter-spacing: var(--track-titulo);
  text-transform: uppercase;
  margin: 0 4px;
}
.plano-para { color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 320px; margin: 12px 4px 0; }
.plano-dados {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  margin: 22px 0 24px; padding: 16px 0;
}
.plano-dados > div { position: relative; text-align: center; padding: 0 4px; }
.plano-dados > div + div::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--hairline); }
.plano-dados b { display: block; font-family: var(--font-titulo); font-weight: 400; font-size: 28px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plano-dados small { display: block; margin-top: 8px; font-family: var(--font-titulo); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); line-height: 1.3; }
.lista-item.pd-dia { flex-direction: column; align-items: stretch; gap: 4px; min-height: 44px; padding: 10px 16px; }
.pd-dia-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pd-dia .li-dia { flex: 0 0 auto; font-weight: 500; }
.pd-dia .li-ref { flex: 1; text-align: right; color: var(--muted); font-weight: 400; font-size: 14.5px; }
.pd-dia .pd-obj { display: block; color: var(--faint); font-size: 12.5px; line-height: 1.45; }
.lista-item.ver-mais { justify-content: center; color: var(--neon); font-weight: 500; font-size: 14.5px; }
.plano-ajuda { color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; margin: 0 12px 8px; }
/* botão fixo no rodapé, acima da tab bar; a tela ganha folga para o conteúdo
   nunca ficar por baixo dele */
.plano-fixo {
  position: fixed; z-index: 6;
  left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 62px);
  padding: 24px 16px 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--bg) 24px);
}
.plano-fixo .btn { margin: 0 auto; max-width: 448px; display: block; }
.plano-fixo .btn:disabled { opacity: 1; background: none; color: var(--muted); border: 1px solid var(--hairline); }
#view.com-fixo { padding-bottom: calc(env(safe-area-inset-bottom) + 140px); }

/* aba Bíblia com plano ativo */
.mais-btn { font-size: 22px; letter-spacing: 0.04em; }
.plano-ativo .pa-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plano-ativo .pa-dia { font-weight: 600; font-size: 17px; letter-spacing: -0.005em; }
.plano-ativo .pa-falta { font-family: var(--font-titulo); font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.plano-ativo .pa-falta.apagada { color: var(--faint); }
.plano-ativo .progress-bar { margin-top: 10px; }
/* grade de dias: células de 20px, gap 6, quantas couberem na linha (11 em
   375, 9 em 320). Feito azul, hoje com borda neon, futuro apagado. */
.plano-grade { display: grid; grid-template-columns: repeat(auto-fill, 20px); gap: 6px; margin-top: 16px; }
.plano-grade i, .plano-grade button {
  display: block; width: 20px; height: 20px;
  padding: 0; border: none; border-radius: 0;
  background: rgba(255, 255, 255, 0.10);
  font: inherit; color: var(--faint); cursor: default;
}
.plano-grade button { cursor: pointer; }
.plano-grade .feito { background: var(--acao); }
.plano-grade .hoje { background: transparent; box-shadow: inset 0 0 0 1.5px var(--neon); }
.plano-grade .pendente { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline-forte); }
.plano-grade .mais { background: none; font-family: var(--font-titulo); font-size: 14px; line-height: 20px; text-align: center; }
.plano-grade button:active { opacity: 0.6; }
.pa-aviso { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 14px; }
.plano-ativo .lista-cab { margin: 18px 2px 8px; }
.plano-ativo .lista-grupo.pa-capitulos { margin-bottom: 0; background: var(--campo); }
.plano-ativo .btn { margin-top: 16px; }
.plano-ativo .btn.secondary { margin-top: 14px; }
.plano-ativo .btn-text.block { margin-top: 4px; }
.pa-feita {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; margin-top: 16px; padding: 0 16px;
  background: var(--acao-dim);
  font-weight: 600; font-size: 15px;
}
.ph-check {
  width: 22px; height: 22px; flex: 0 0 auto;
  background: var(--acao); border-radius: 0;
  display: flex; align-items: center; justify-content: center;
}
.ph-check svg { width: 13px; height: 13px; fill: none; stroke: var(--branco); stroke-width: 2.4; stroke-linecap: square; }
.ver-planos { display: block; width: 100%; text-align: center; min-height: 44px; margin: -2px 0 8px; }

/* linhas de leitura de hoje (no "Seu dia" da Hoje): uma por leitura */
.lh-linha {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 60px;
  padding: 8px 2px;
  background: none; border: none; border-radius: 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--text); font-family: var(--font-ui); text-align: left;
  cursor: pointer;
}
.lh-linha:active { background: var(--campo-forte); }
.lh-linha:last-of-type { border-bottom: none; }
/* linha e seus extras (Pôr em dia, aviso, Pausar) num item só, com a hairline
   depois do conjunto: senão o extra parece da linha de baixo */
.lh-item { border-bottom: 1px solid var(--hairline); }
.lh-item:last-of-type { border-bottom: none; }
.lh-item .lh-linha { border-bottom: none; }
.lh-item .lh-terc, .lh-item .lh-aviso { margin-top: 0; padding-bottom: 10px; }
/* linhas de leitura do grupo abrem a leitura: o quadrado vazio só aparece feito */
.habit-row.plano:not(.done) .habit-check, .habit-row.livre:not(.done) .habit-check { visibility: hidden; }
.lh-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lh-txt .kicker { display: block; }
.lh-txt b { font-weight: 600; font-size: 16px; line-height: 1.3; }
.lh-txt b small { font-weight: 400; font-size: 13.5px; color: var(--muted); }
.lh-acao { flex: 0 0 auto; color: var(--neon); font-weight: 600; font-size: 15px; }
.lh-terc { display: block; width: 100%; text-align: left; min-height: 44px; padding: 8px 2px; }
.lh-aviso { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 8px 2px 4px; }
.lh-inline { display: inline; padding: 0 2px; min-height: 0; font-size: 13px; }

/* plano concluído: tela cheia sobre preto, sem topo nem barra de abas */
body.fim #topbar, body.fim #tabbar { display: none; }
body.fim #view { padding: 0; animation: none; }
.plano-fim {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 24px);
  text-align: center;
  --gc: 220px; --gc-sangra: 60px; --gc-alfa: 0.10;
}
.fim-grade { display: grid; grid-template-columns: repeat(7, 16px); gap: 6px; margin-bottom: 30px; }
.fim-grade i { display: block; width: 16px; height: 16px; background: var(--acao); }
.plano-fim .celebra-texto { animation: none; margin-top: 0; }
.plano-fim .celebra-nome { font-size: 30px; }
.plano-fim .btn.secondary { margin-top: 10px; }

/* Evolução com cinco pilares: rótulos menores para caber */
.const-pilares.cinco .const-pilar { padding: 0 6px; }
.const-pilares.cinco .micro { font-size: 10.5px; letter-spacing: 0.08em; }
.const-pilares.cinco b { font-size: 14px; }

@media (max-width: 359px) {
  .pl-tile { width: 40px; height: 40px; min-width: 40px; font-size: 15px; }
  .plano-dados b { font-size: 24px; }
  .const-pilares.cinco .micro { font-size: 9.5px; letter-spacing: 0.06em; }
  .const-pilares.cinco .const-pilar { padding: 0 4px; }
}

@media (max-width: 359px) {
  .habit-row.plano .habit-name { font-size: 14px; }
  .fa-btn { font-size: 13px; }
}

/* ===== Planos v2 (A): aba, tela do plano, histórico ===== */
/* card de plano na aba: título tocável, "⋯" (pessoal) ou chevron (grupo),
   linha de progresso com barra, aviso e uma ação só */
.plano-item { padding: 18px; }
.pi-topo { display: flex; align-items: flex-start; gap: 8px; }
.pi-tit {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
  background: none; border: none; padding: 0;
  color: var(--text); font-family: var(--font-ui); text-align: left;
  cursor: pointer;
}
.pi-tit:active { background: var(--campo-forte); }
.pi-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pi-txt .kicker { display: block; }
.pi-txt b { font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -0.005em; color: var(--text); }
.pi-mais { flex: 0 0 auto; margin: -8px -10px 0 0; color: var(--muted); font-size: 20px; }
.pi-chev {
  flex: 0 0 auto; width: 44px; height: 44px; margin: -8px -10px 0 0;
  background: none; border: none; padding: 0;
  color: var(--faint); font-size: 22px; line-height: 1; cursor: pointer;
}
.pi-prog {
  display: block; width: 100%; margin-top: 12px; padding: 0;
  background: none; border: none; text-align: left;
  color: var(--muted); font-family: var(--font-ui); font-size: 13.5px; line-height: 1.4;
  cursor: pointer;
}
.pi-prog .progress-bar { display: block; margin-top: 8px; }
.pi-prog .progress-bar > span { display: block; height: 100%; background: var(--acao); transition: width 0.4s ease-out; }
html.sem-fx .pi-prog .progress-bar > span { transition: none; }
.plano-item .pa-aviso { margin-top: 12px; }
.plano-item .btn { margin-top: 14px; }
.plano-item .btn.secondary { margin-top: 14px; }
.plano-item .pa-feita { margin-top: 14px; }
.plano-item .btn-text.block { margin-top: 4px; }
.plano-item.pausado .pl-tile { opacity: 0.7; }
.btn-text.neon { color: var(--neon); }
.ver-planos.neon { color: var(--neon); }

/* tela do plano (empilhada): dados, grade completa, ação, avatares do grupo */
.tela-plano { padding-bottom: 8px; }
.tela-plano .tp-sub { color: var(--muted); font-size: 13px; margin: -6px 4px 14px; }
.tela-plano .plano-dados { margin: 8px 0 20px; }
.tela-plano .tp-grade { padding: 16px 18px 14px; }
.tela-plano .tp-grade .plano-grade { margin-top: 0; }
.tela-plano .tp-grade .plano-grade .pendente { background: rgba(255, 255, 255, 0.10); box-shadow: inset 0 0 0 1px var(--hairline-forte); }
.tela-plano .tp-grade .plano-grade [data-dia-plano] { cursor: pointer; }
.tela-plano .tp-grade .hint { margin-top: 12px; font-size: 12.5px; color: var(--faint); }
.tela-plano .tp-aviso { margin: 0 4px 14px; }
.tela-plano .tp-acao .btn { margin-top: 0; }
.tela-plano .tp-acao .lista-cab { margin: 0 2px 8px; }
.tela-plano .tp-acao .lista-grupo.pa-capitulos { margin-bottom: 12px; background: var(--campo); }
.tela-plano .tp-acao .pa-feita { margin-top: 0; }
.tela-plano .tp-acao .btn-text.block { margin-top: 4px; }
.tela-plano .tp-leram { margin-top: 12px; padding: 14px 18px; }
.tela-plano .pg-leram { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
.tela-plano .pg-avatares { display: flex; padding-left: 6px; }
.tela-plano .pg-avatares .rank-avatar {
  width: 24px; height: 24px; min-width: 24px;
  margin-left: -6px;
  font-size: 10.5px;
  clip-path: none;
  border: 1.5px solid var(--card-lo);
  border-radius: 50%;
}
.tela-plano .btn-text.block.neon { margin-top: 10px; }
.tela-plano .tp-rodape { color: var(--faint); font-size: 12.5px; text-align: center; margin: 18px 12px 8px; }

/* catálogo: marcas do que já está em andamento ou concluído */
.pl-marca { font-family: var(--font-titulo); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--neon); }
.pl-marca.apagada { color: var(--faint); }
.pl-tile.andamento::after { width: 7px; height: 7px; box-shadow: 0 0 0 2px rgba(0, 154, 206, 0.3); }
.pl-tile.peq.andamento::after { width: 6px; height: 6px; }

/* HISTÓRICO: linhas com deslizar para excluir, como os grifos */
.hist-lista .hist-wrap { margin-bottom: 0; }
.hist-wrap .swipe-actions { border-radius: 0; }
.hist-wrap .swipe-btn { background: var(--erro); font-weight: 600; }
.hist-wrap .hist-linha { position: relative; background: var(--card-hi); touch-action: pan-y; border-bottom: 1px solid var(--hairline); }
.hist-wrap:last-child .hist-linha { border-bottom: none; }
.hist-linha.parado .pl-tile { opacity: 0.6; }
.hist-linha.parado .li-rot { color: var(--muted); }

/* leituras do "Seu dia": kicker do plano pessoal é um alvo próprio; linha
   feita encolhe para 44px */
.lh-linha { user-select: none; -webkit-user-select: none; }
.lh-linha.feita { min-height: 44px; padding: 4px 2px; }
.lh-linha.feita .lh-txt b { font-weight: 500; font-size: 15px; color: var(--muted); }
.lh-kicker-btn {
  position: relative;
  display: inline-block; align-self: flex-start;
  margin: 0; padding: 0;
  background: none; border: none; text-align: left; cursor: pointer;
}
/* alvo de 44px sem mudar a altura da linha */
.lh-kicker-btn::before { content: ""; position: absolute; left: 0; right: -8px; top: -14px; bottom: -14px; }
.lh-kicker-btn:active { opacity: 0.6; }

/* folha "Leia com seus amigos": resumo do plano */
.folha-plano-resumo { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 0 2px; }
.folha-plano-resumo .li-rot { flex: 1; min-width: 0; font-weight: 500; font-size: 15px; color: var(--text); }
.folha-plano-resumo .li-rot small { display: block; color: var(--faint); font-size: 12.5px; font-weight: 400; margin-top: 3px; }

@media (max-width: 359px) {
  .plano-item .pl-tile.peq { width: 32px; height: 32px; min-width: 32px; font-size: 13px; }
  .pi-txt b { font-size: 16px; }
}

/* ---------- Planos v2 (B): grupo e comentário ----------
   Passo "Leitura bíblica" na criação e gestão do grupo, folha de escolha com
   descrição e seções, folha alta do catálogo, "Encerrar" no lugar da lixeira,
   comentário junto do check-in (campo na lista, legenda no mural, primeira
   linha entre aspas no hábito feito) e a linha para quem entrou depois. */

/* folha de escolha: descrição sob o rótulo, seção antes do botão, folha alta */
.sheet-btn.com-descricao {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left;
  padding: 12px 14px;
}
.sheet-btn.com-descricao .sb-rotulo { display: block; }
.sheet-btn.com-descricao small {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--muted);
}
.sheet-btn.principal.com-descricao small { color: rgba(255, 255, 255, 0.78); }
.sheet-btn.neutra.com-descricao { color: var(--text); }
.sheet-btn.neutra.com-descricao .sb-rotulo { color: var(--neon); }
.sheet-secao {
  display: block;
  margin: 22px 2px 0;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--faint);
}
.sheet-secao + .sheet-btn { margin-top: 8px; }
.sheet.alta {
  /* com o teclado aberto a folha cabe no que sobrou, não em 88% da tela
     inteira: o 100% é do backdrop, que já desconta o teclado */
  max-height: min(88dvh, 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
/* o campo de filtrar fica no topo enquanto a lista rola por baixo */
.sheet.alta .biblia-busca.el-busca {
  position: sticky; top: -10px; z-index: 2;
  margin: 0 -18px 10px; padding: 10px 18px 8px;
  background: var(--card-hi);
}
.sheet.alta .sheet-btn.neutra { min-height: 56px; margin-top: 8px; }
.sheet.alta .sheet-pe { position: sticky; bottom: -18px; margin: 16px -18px -18px; padding: 12px 18px 18px; background: var(--card-hi); border-top: 1px solid var(--hairline); }
.sheet.alta .sheet-pe .sheet-btn.cancelar { margin-top: 0; }
/* a folha alta rola por dentro (pan-y): no iPhone o arrasto para fechar que
   nasce na alça, no título ou no texto virava rolagem, chegava pointercancel e
   a folha não fechava. Ali o dedo é só do arrasto */
.sheet.alta .sheet-grab, .sheet.alta .sheet-title, .sheet.alta .sheet-text { touch-action: none; }

/* gestão do dono: "Encerrar" com alvo de 44px, cor apagada */
.manage-row.plano .hencerrar { min-height: 44px; padding: 10px 6px 10px 10px; white-space: nowrap; }
.manage-row.plano .habit-name { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.manage-row.plano.pop { animation: pop 0.28s ease; }

/* card PLANO DO GRUPO: quem entrou depois do dia 1 */
.plano-grupo .pg-entrada { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* comentário sob o hábito selecionado (entre o anexo e a próxima linha) */
.nota-row {
  display: flex; align-items: center; gap: 0;
  width: calc(100% - 12px);
  min-height: 44px;
  margin: 0 6px 8px;
  padding: 0 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.nota-row:focus-within { border-bottom-color: var(--neon-borda); }
.nota-row svg { width: 18px; height: 18px; min-width: 24px; fill: var(--faint); flex: none; }
.nota-row input {
  flex: 1; min-width: 0;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 0 6px;
}
.nota-row input::placeholder { color: var(--faint); }
.nota-row input:focus { outline: none; }
.nota-row .nota-cont { font-size: 12px; color: var(--faint); white-space: nowrap; padding-left: 6px; }
.nota-row .nota-cont.cheio { color: var(--atencao); }

/* hábito feito com comentário: primeira linha entre aspas, truncada */
/* check-in unificado: a linha secundária vale igual na lista de hábitos e em
   Gerenciar hábitos, mais o "Desligar" com alvo de 44px, no molde do
   "Encerrar" do plano do grupo */
.habit-row .habit-name small.hr-nota,
.manage-row .habit-name small.hr-nota {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.habit-row .habit-name:has(small.hr-nota),
.manage-row .habit-name:has(small.hr-nota) { min-width: 0; line-height: 1.25; }
/* o "Desligar" cai numa segunda linha da própria manage-row: espremido ao lado
   do lápis e da lixeira ele engolia o nome do grupo na marca */
.manage-row:has(.hdesligar) { flex-wrap: wrap; }
.manage-row .hdesligar {
  flex: 0 0 100%;
  order: 9;
  text-align: left;
  min-height: 44px;
  padding: 6px 0 0;
  font-size: 14px;
}

/* ---------- Planos v2 (C): leitura escura e comentário na folha ----------
   O modo noturno é só da folha de leitura: os tokens da superfície clara são
   redefinidos em .leitura-folha.escura (fundo preto puro, tinta #D9D9D6) e a
   classe leitura-escura no body cobre o #view da leitura imersiva e a faixa
   pegajosa. O cartão de compartilhar e o caderno continuam claros. */
/* a troca de fundo anima em 200 ms também nos textos que têm cor própria */
.leitura-folha .leitura-ref, .leitura-folha .leitura-kicker, .leitura-folha .leitura-texto, .leitura-folha .v .vn, .leitura-folha .le-tit, .leitura-folha .le-texto { transition: color 0.2s ease; }
html.sem-fx .leitura-folha .leitura-ref, html.sem-fx .leitura-folha .leitura-kicker, html.sem-fx .leitura-folha .leitura-texto, html.sem-fx .leitura-folha .v .vn, html.sem-fx .leitura-folha .le-tit, html.sem-fx .leitura-folha .le-texto { transition: none; }
.leitura-folha.escura {
  --superficie-clara: #000000;
  --tinta: #D9D9D6;
  --tinta-2: #888B8D;
  --hairline-clara: rgba(255, 255, 255, 0.14);
}
body.lendo.leitura-escura #view { background: #000000; }
body.lendo.leitura-escura .leitura-faixa { background: #000000; color: var(--muted); border-bottom-color: var(--hairline); }
.leitura-folha.escura .rule { background: rgba(255, 255, 255, 0.28); }
/* seleção neutra (o neon a 12 % some sobre preto); grifo azul mais forte, o
   texto #D9D9D6 sobre esse azul misturado passa de 9:1; áudio neon a 18 % */
.leitura-folha.escura .v.sel { background: rgba(255, 255, 255, 0.10); }
.leitura-folha.escura .v.grifo .vt { background: rgba(0, 71, 187, 0.42); box-shadow: 0 0 0 2px rgba(0, 71, 187, 0.42); }
.leitura-folha.escura .v.lendo { background: rgba(0, 154, 206, 0.18); }
.leitura-folha.escura .v.sel.grifo .vt { background: none; box-shadow: none; }
.leitura-folha.escura .leitura-esq .brilho { background-color: rgba(255, 255, 255, 0.06); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0) 100%); }
.leitura-folha.escura .leitura-erro .ev-glifo { background: rgba(255, 255, 255, 0.06); }
.leitura-folha.escura .leitura-erro .btn.secondary { border-color: rgba(255, 255, 255, 0.3); }

/* campo de comentário no fim do texto (só quando a leitura conta para um grupo):
   48px de altura mínima, cresce até três linhas, contador a partir de 100 */
.leitura-nota { margin-top: 28px; }
.leitura-nota .kicker { display: block; color: var(--tinta-2); margin-bottom: 8px; }
.leitura-nota textarea {
  display: block; width: 100%; min-height: 48px; box-sizing: border-box;
  margin: 0; padding: 13px 14px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--hairline-clara); border-radius: 2px;
  color: var(--tinta); font-family: var(--font-ui); font-size: 15px; line-height: 1.45;
  resize: none; overflow-y: auto; outline: none;
  -webkit-appearance: none; appearance: none;
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
.leitura-nota textarea::placeholder { color: var(--tinta-2); }
.leitura-nota textarea:focus { border-color: var(--neon-borda); }
.leitura-nota .ln-cont { display: block; text-align: right; margin-top: 6px; font-size: 12px; color: var(--tinta-2); }
.leitura-nota .ln-cont[hidden] { display: none; }
.leitura-nota .ln-cont.cheio { color: var(--atencao); }
.leitura-folha.escura .leitura-nota textarea { background: rgba(255, 255, 255, 0.06); border-color: var(--hairline); }
.leitura-folha.escura .leitura-nota textarea:focus { border-color: var(--neon-borda); }

/* folha "Texto e fundo": dois blocos, rótulo micro e segmentado (3 e 2) */
.tf-bloco + .tf-bloco { margin-top: 16px; }
.tf-bloco .micro { display: block; margin-bottom: 8px; }
.tf-bloco .evo-seg { margin: 0; }

/* código do convite na porta da plataforma: quem vai para a App Store leva o
   código nos olhos e na área de transferência, porque o navegador e o app têm
   memórias separadas */
.convite-caixa {
  border: 1px solid var(--neon);
  padding: 14px 16px;
  margin: 0 0 16px;
  text-align: center;
}
.convite-caixa .convite-codigo {
  display: block;
  margin: 6px 0 8px;
  font-family: var(--font-titulo);
  font-size: 26px;
  letter-spacing: 0.08em;
  color: var(--neon);
}
.convite-caixa p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 6px; }

/* a engrenagem do dono leva ao gerenciamento e o bloco pisca uma vez, para o
   olho achar onde a rolagem parou */
@keyframes cardPisca {
  0%, 100% { box-shadow: inset 0 0 0 1px transparent; }
  50% { box-shadow: inset 0 0 0 1px var(--neon); }
}
.card.pisca { animation: cardPisca 700ms ease 2; }

/* ponteiro de velocidade da narração (folha aberta pelo botão da barra de áudio) */
.vel-wrap { padding: 6px 4px 2px; }
.vel-valor {
  font-family: var(--font-titulo); font-size: 34px; letter-spacing: var(--track-titulo);
  text-align: center; color: var(--text); margin-bottom: 14px;
}
.vel-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
}
.vel-range::-webkit-slider-runnable-track { height: 3px; background: var(--hairline-forte); border-radius: 0; }
.vel-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -12.5px;
  background: var(--branco); border: 2px solid var(--azul); border-radius: 0;
}
.vel-range::-moz-range-track { height: 3px; background: var(--hairline-forte); }
.vel-range::-moz-range-thumb { width: 26px; height: 26px; background: var(--branco); border: 2px solid var(--azul); border-radius: 0; }
.vel-escala { display: flex; justify-content: space-between; margin-top: 2px; font-size: 11px; color: var(--muted); }

/* porta para os 66 livros no fim de LIVROS INTEIROS, e a folha de escolha */
.pl-tile-escolha {
  display: flex; align-items: center; justify-content: center;
  background: var(--campo); color: var(--muted);
  font-family: var(--font-titulo); font-size: 13px; letter-spacing: 0.02em;
}
.el-sec { margin: 14px 0 6px; }
/* .lista-item e display: flex, e isso vence o hidden do navegador: sem esta
   regra o filtro marcava 65 livros como escondidos e todos continuavam na tela */
.el-livro[hidden], .lista-grupo[hidden], .el-sec[hidden] { display: none; }
.el-sec:first-child { margin-top: 4px; }

/* anotação feita lendo a Bíblia: o trecho aparece acima do campo */
.sheet-area { min-height: 96px; resize: none; line-height: 1.5; }
.nota-trecho { background: var(--campo); padding: 10px 12px; margin-bottom: 12px; }
.nota-trecho .micro { display: block; color: var(--muted); margin-bottom: 4px; }
.nota-trecho p { font-size: 13.5px; line-height: 1.5; color: var(--text); }
/* caderno em duas partes */
.cad-sec { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px; }
.cad-sec:first-of-type { margin-top: 4px; }
.cad-sec small { color: var(--muted); font-size: 12px; }

/* ir para uma passagem: grade de capítulos e versículos, alvos de 44 px */
.ip-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.ip-num {
  min-height: 44px; background: var(--campo); border: none; color: var(--text);
  font-family: var(--font-titulo); font-size: 13px; letter-spacing: 0.02em; cursor: pointer;
}
.ip-num:active { background: var(--campo-forte); }
.ip-dica { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.ip-dica b { color: var(--text); }
.ip-vazio { color: var(--muted); font-size: 13.5px; padding: 10px 2px; }

/* faixa de novidade: só o gesto, sem gaveta */
.nb-wrap { position: relative; margin-bottom: 12px; }
.nb-wrap .news-banner { margin-bottom: 0; touch-action: pan-y; -webkit-touch-callout: none; }
/* Escutar o versículo do dia, ao lado de Salvar ou compartilhar */
.hero-ouvir { display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  min-height: 48px;
  margin-top: 22px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.35); border-radius: var(--r-controle);
  background: transparent;
  color: var(--tinta);
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  cursor: pointer; }
.hero-ouvir svg { width: 17px; height: 17px; fill: var(--tinta); }
.hero-ouvir:active { transform: scale(0.985); background: rgba(0, 0, 0, 0.06); }
.hero-ouvir svg .ho-pause { display: none; }
.hero-ouvir.tocando svg .ho-play { display: none; }
.hero-ouvir.tocando svg .ho-pause { display: block; }
/* "Escutar" na linha da leitura de hoje */
.lh-ouvir { margin-right: 14px; padding: 8px 2px; }

/* ---------- véu de entrada: entre o login fechar e a nuvem chegar ---------- */
#veu-entrada {
  position: fixed; inset: 0; z-index: 45;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  color: var(--muted); font-size: 15px;
}
#veu-entrada[hidden] { display: none; }
#veu-entrada img { width: 56px; height: 56px; }
#veu-entrada span { max-width: 300px; padding: 0 16px; text-align: center; line-height: 1.5; }

/* folha de compartilhar em "Só o texto": some o que só serve com imagem */

/* ---------- idioma: bandeiras na capa, no login e em Ajustes ---------- */
/* a bandeira é SVG inline, sem emoji; o contorno fino a separa do fundo preto */
.bandeira {
  width: 24px;
  height: 17px;
  flex: none;
  display: block;
  outline: 1px solid var(--hairline-forte);
}
.idioma-seletor {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.idioma-opcao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--campo);
  border: 1px solid var(--hairline);
  border-radius: var(--r-controle);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.idioma-opcao.sel {
  background: var(--neon-dim);
  border-color: var(--neon-borda);
  color: var(--text);
}
.idioma-opcao:active { opacity: 0.7; }
/* capa da instalação nova: nada segue antes da escolha do idioma */
.ob-escolher-idioma .ob-slides { overflow-x: hidden; touch-action: none; }
.ob-escolher-idioma .ob-skip { visibility: hidden; }
.ob-escolher-idioma .ob-next { opacity: 0.4; }
.idioma-seletor.pedir { animation: idioma-pedir 0.5s ease; }
@keyframes idioma-pedir {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .idioma-seletor.pedir { animation: none; } }
.login-idioma .idioma-seletor { margin-top: 14px; }
.idioma-item .bandeira { width: 26px; height: 18px; }
.idioma-item .idioma-check { color: var(--neon); }

/* ---------- preparo do vídeo do check-in ----------
   Camada própria no body (fora do render): a folha de sempre, com a barra
   de progresso neon no lugar das opções. Fica acima das folhas (80) e abaixo
   do toast (90), que precisa aparecer por cima dela. */
.video-preparo { z-index: 85; }
.video-preparo .sheet { touch-action: auto; }
.video-preparo .sheet-title { font-variant-numeric: tabular-nums; }
.vp-barra {
  height: 4px;
  margin-top: 16px;
  background: var(--campo-forte);
  overflow: hidden;
}
.vp-barra span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--neon);
  transition: width 0.2s linear;
}
/* o vídeo que toca durante o preparo: presente na página (fora dela o
   navegador pode deixar de entregar quadros), mas invisível e sem toque */
.video-preparo-fonte {
  position: fixed;
  left: 0; top: 0;
  width: 2px; height: 2px;
  opacity: 0.01;
  pointer-events: none;
  z-index: -1;
}

/* ---------- pacote Constância, fase 1: Hoje depois da leitura ---------- */
/* cartão de hábitos pessoais vazio: uma frase e o botão de adicionar */
.hab-vazio-txt { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--text); margin: 0 0 14px; }
.hab-vazio .btn { margin-top: 0; }
/* "Seu dia" (v125): uma lista só. Leituras em cima, uma linha fina, depois os
   hábitos pessoais e os de grupo. Completo, o miolo esmaece em 220 ms e o
   cartão vira uma linha só que reabre ao toque */
.seu-dia .sd-miolo { transition: opacity 0.22s ease-out; }
.seu-dia.recolhendo .sd-miolo { opacity: 0; }
.seu-dia .sd-sep { height: 1px; background: var(--hairline); margin: 4px 0; }
.seu-dia .habit-row:last-child { border-bottom: none; }
.sd-vazio { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.seu-dia.recolhido { padding-top: 4px; padding-bottom: 4px; }
.sd-tudo {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 0;
  background: none; border: none; cursor: pointer;
  text-align: left; color: var(--text);
}
.sd-tudo .sd-ok { width: 14px; height: 14px; fill: var(--neon); flex: none; }
.sd-tudo-txt { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; }
.sd-tudo .sd-seta { color: var(--faint); font-size: 18px; line-height: 1; transform: rotate(90deg); margin-left: 4px; }
.sd-tudo:active { opacity: 0.7; }
/* grupos ainda chegando: uma linha de brilho no lugar, sem a lista crescer aos saltos */
.sd-esqueleto { pointer-events: none; }
.sd-esqueleto .esq-linhas { flex: 1; min-width: 0; }
/* check-in de grupo de um toque esperando os 2 s ou saindo: marcada e esmaecida */
.habit-row.em-voo { opacity: 0.6; }
html.sem-fx .seu-dia .sd-miolo { transition: none; }

/* ---------- pacote Constância, fase 2: "Ontem ficou em aberto" ---------- */
/* pendência, não alerta: fundo de card, borda um grau acima, sem grafismo */
.ontem-faixa {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  background: var(--card);
  border: 1px solid var(--hairline-forte);
  border-radius: var(--r-card);
  color: var(--text);
  font-family: var(--font-ui);
  text-align: left;
  overflow: hidden;
}
/* linha de resposta: sem tile de ícone (em 320 px o nome não caberia) */
.fz-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
}
.fz-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fz-nome { font-size: 15px; font-weight: 500; line-height: 1.25; }
.fz-txt small.hr-nota { display: block; margin-top: 3px; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-erro { display: block; margin-top: 3px; font-size: 12px; color: var(--erro); }
.fz-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.fz-acoes .btn-mini { position: relative; }
.fz-acoes .btn-mini::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.fz-acoes .btn-mini:disabled { opacity: 0.5; cursor: default; }
.fz-resp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--faint); white-space: nowrap; }
.fz-resp.ok { color: var(--neon); }
.fz-resp svg { width: 14px; height: 14px; fill: var(--neon); }
.fz-resp svg.pop { animation: pop 0.28s ease; }
.fz-desfazer { font-size: 13px; padding: 12px 4px; margin: -12px 0; }
.ontem-faixa .ver-mais { justify-content: center; min-height: 44px; color: var(--neon); border-top: 1px solid var(--hairline); border-bottom: none; padding: 0; }
@media (max-width: 359px) { .fz-acoes .btn-mini { padding: 0 12px; } }
/* ---------- pacote Constância, fase 3: "Quando você vai cumprir?" ---------- */
/* dentro do papel claro do cartão da Ação; o botão preto segue o único sólido */
.acao-quando-tit { font-size: 13px; font-weight: 500; color: var(--tinta-2); margin: 0 0 8px; }
.acao-quando { display: grid; gap: 6px; margin-bottom: 12px; }
.acao-quando button {
  position: relative;
  height: 40px;
  padding: 0 4px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 0;
  color: var(--tinta);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.acao-quando button::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
.acao-quando button.sel { border: 1.5px solid var(--acao); color: var(--acao); background: rgba(0, 71, 187, 0.08); }
.acao-quando button:active { background: rgba(0, 0, 0, 0.05); }
.acao-quando-ok { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; font-size: 13px; color: var(--tinta-2); line-height: 1.4; }
.acao-quando-ok b { font-weight: 600; color: var(--tinta); }
.acao-mudar { color: var(--acao); font-size: 13px; padding: 12px 4px; margin: -12px 0; flex: none; }
@media (max-width: 359px) { .acao-quando button { font-size: 13px; } }

/* ---------- pacote Constância, fase 4: frequência do hábito pessoal ---------- */
.freq-picker { margin-top: 14px; }
.freq-picker .chip-opt { position: relative; }
.freq-picker .chip-opt::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.freq-grade { display: grid; gap: 6px; margin-top: 10px; }
.freq-grade.sete { grid-template-columns: repeat(7, 1fr); }
.freq-grade.seis { grid-template-columns: repeat(6, 1fr); }
.freq-grade button {
  height: 44px;
  padding: 0;
  background: var(--campo);
  border: 1px solid var(--hairline);
  border-radius: var(--r-controle);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.freq-grade.seis button { font-family: var(--font-titulo); font-size: 16px; font-weight: 400; }
.freq-grade button.sel { background: var(--neon-dim); border-color: var(--neon-borda); color: var(--neon); }
.freq-picker .hint { font-size: 13px; margin-top: 8px; }
#hm-save:disabled { opacity: 0.45; cursor: default; }
/* fora do previsto de hoje (dia de folga ou meta batida): no fim, apagado, tocável */
.habit-row.fora .habit-ic, .habit-row.fora .habit-name { opacity: 0.55; }
.habit-row .habit-name small.hr-nota.hr-meta, .hr-nota .hr-meta { color: var(--neon); }

/* ---------- pacote Constância, fase 6: folha "Feche o dia" ---------- */
.fd-itens .fz-row:first-child { border-top: none; }
.fd-sep { height: 1px; background: var(--hairline); margin: 16px 0; }
.fd-pergunta { font-size: 15px; font-weight: 500; color: var(--text); margin: 0 0 6px; line-height: 1.4; }
.fd-ref { display: block; margin-bottom: 4px; }

/* ---------- pacote Constância, fase 6: "Marcar pelo app Saúde" no modal ---------- */
.saude-linha { margin-top: 14px; padding: 10px 0; border-top: 1px solid var(--hairline); border-bottom: none; }
/* texto de status da frequência ("Meta da semana cumprida", "a meta depende
   de hoje") quebra linha em vez de cortar com reticências ao lado do selo */
.habit-row .habit-name small.hr-nota.hr-freq { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---------- faixa de ontem (v124): compacta com dois botões grandes, aberta
   com caixas de marcar como as linhas de hábito da Hoje ---------- */
.ontem-faixa.compacta, .ontem-faixa.aberta { padding: 16px; }
.ontem-faixa .of-toque { cursor: pointer; margin-bottom: 14px; -webkit-tap-highlight-color: transparent; }
.ontem-faixa .of-titulo { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text); margin: 0 0 4px; }
.ontem-faixa .of-sub { font-size: 13.5px; line-height: 1.4; color: var(--muted); margin: 0 0 4px; }
.ontem-faixa .btn { margin-top: 10px; }
.ontem-faixa.compacta .btn.secondary { margin-top: 8px; }
.ontem-faixa .fz-marcar:last-of-type { border-bottom: 1px solid var(--hairline); }
.ontem-faixa .fz-marcar.em-voo { opacity: 0.6; pointer-events: none; }
.ontem-faixa .fz-marcar.fechado { opacity: 0.55; cursor: default; }
.ontem-faixa.saindo { pointer-events: none; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; opacity: 0; border-color: transparent; transition: max-height 0.22s ease-out, padding 0.22s ease-out, opacity 0.22s ease-out, margin 0.22s ease-out; }
html.sem-fx .ontem-faixa.saindo { transition: none; }

/* ---------- cartões de começar removíveis (v124) ---------- */
.cartao-segure { margin: 10px 0 0; font-size: 12px; color: var(--faint); text-align: center; }
[data-cartao-removivel] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ---------- o selo do dia (v2): martelo, selo octogonal, brasas e o resumo ---------- */
/* camada por cima da tela: véu escuro com desfoque, o selo (quadros), as
   brasas por cima dele e os textos por cima de tudo. Posições e tamanhos vêm
   do layout.json, calculados em mostrarSelo. Acima do modal e abaixo das
   folhas e dos avisos (o selo só aparece com a tela livre) */
.selo-camada {
  position: fixed; inset: 0; z-index: 75;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* a saída é nos filhos, juntos: no pai, o desfoque do véu sumia de uma vez */
.selo-camada.saindo > * { opacity: 0 !important; transition: opacity var(--selo-sair, 250ms) ease-in-out; }
.selo-veu {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, var(--selo-veu, 0.88));
  -webkit-backdrop-filter: blur(var(--selo-desfoque, 9px));
  backdrop-filter: blur(var(--selo-desfoque, 9px));
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
.selo-camada.veu-aberto .selo-veu, .selo-camada.aberta .selo-veu { opacity: 1; }
.selo-caixa { position: absolute; transform-origin: 50% 50%; will-change: transform; }
.selo-caixa canvas, .selo-caixa .selo-imagem { display: block; width: 100%; height: 100%; }
.selo-brasas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.selo-titulo {
  position: absolute; left: 0; right: 0; margin: 0;
  text-align: center; line-height: 1; white-space: nowrap;
  font-family: var(--font-titulo); text-transform: uppercase; color: #FFFFFF;
  opacity: 0;
}
.selo-linha {
  position: absolute; margin: 0;
  text-align: center; font-family: var(--font-ui); font-weight: 400; color: rgba(255, 255, 255, 0.80);
  opacity: 0;
}
.selo-frase { display: block; }
/* a coluna da lista: centrada pela largura do item mais largo, itens à
   esquerda, nunca além da tela (max-width vem do layout) */
.selo-lista { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; }
.selo-item {
  display: flex; align-items: center; white-space: nowrap; min-width: 0;
  font-family: var(--font-ui); font-weight: 500; color: rgba(255, 255, 255, 0.90);
}
.selo-tique { flex: none; transform-origin: 50% 50%; opacity: 0; }
.selo-item-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
/* Reduzir efeitos (ou quadros que não chegaram): tudo à vista, sem animação */
.selo-camada.parada .selo-titulo, .selo-camada.parada .selo-linha,
.selo-camada.parada .selo-tique, .selo-camada.parada .selo-item-nome { opacity: 1; }
html.sem-fx .selo-camada, html.sem-fx .selo-veu { transition: none; }
/* o selo pequeno no "Seu dia" recolhido, no lugar do tique */
.sd-tudo .sd-selo { flex: none; display: inline-block; }
/* o selo pequeno é uma janela sobre o último quadro, em <img> (nítido no 3x) */
.sd-selo { position: relative; overflow: hidden; display: inline-block; }
.sd-selo img { position: absolute; max-width: none; display: block; }

/* ---------- mural do grupo: cartão-dia (docs/mural-e-foto.md, M1 a M6, F2, C1 a C3) ---------- */
.seg-mural { margin: 20px 0 14px; }
.seg-mural .evo-seg-thumb { transition-duration: 0.18s; }
.mural { margin-bottom: 14px; }
/* separador de dia: kicker e uma linha que preenche o resto */
.mural-sep { display: flex; align-items: center; gap: 10px; margin: 24px 0 10px; }
.mural-sep.primeiro { margin-top: 8px; }
/* contraste mínimo no mural: nada abaixo de 13 px, secundário em #a0a0a0 */
.mural-sep span { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #a0a0a0; white-space: nowrap; }
.mural-sep::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.mural-ninguem { margin: -2px 0 10px; font-size: 13px; color: #a0a0a0; }
/* o cartão: um por pessoa por dia, sem moldura (F1.4): fundo #111, sem
   borda, 8 de espaço entre cartões */
.cd-card {
  background: #111; border: none; border-radius: var(--r-card);
  padding: 14px 14px 10px; margin-bottom: 8px;
}
.cd-card.de-outro { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cd-cab { display: flex; align-items: center; gap: 10px; }
.cd-quem { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cd-quem[data-membro] { cursor: pointer; }
.cd-quem[data-membro]:active { opacity: 0.7; }
.cd-ava { position: relative; display: inline-flex; flex: none; }
/* cabeçalho (F1.2): nome 16/600 e a hora em 13 #a0a0a0, sem @ */
.cd-meta { display: flex; flex-direction: column; min-width: 0; }
.cd-meta b { font-size: 16px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-meta small { font-size: 13px; color: #a0a0a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-menu {
  position: relative; width: 32px; height: 32px; margin-right: -8px; flex: none;
  background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.cd-menu::before { content: ""; position: absolute; inset: -6px; }
.cd-menu:active { opacity: 0.7; }
/* "DIA COMPLETO" com o selo (só no dia completo) e os hábitos feitos em
   texto corrido com o tique neon (F1.1): o parcial não ganha frase */
.cd-completo { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-family: var(--font-titulo); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--branco); line-height: 1.2; }
.cd-completo .sd-selo { flex: none; }
.cd-feitos { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.4; }
.cd-feito { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cd-tique { width: 12px; height: 12px; flex: none; color: var(--neon); }
/* as provas grandes, na largura do cartão (sem a margem de dentro): uma
   sozinha ou o carrossel com encaixe. A moldura vai de 4:5 a 1,91:1 (--prop) */
.cd-provas { position: relative; margin: 12px -14px 0; background: var(--card-lo); }
.cd-trilho {
  display: flex; aspect-ratio: var(--prop, 0.8);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.cd-trilho::-webkit-scrollbar { display: none; }
.cd-prova {
  position: relative; flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  padding: 0; border: none; border-radius: 0; background: var(--card-lo); overflow: hidden; cursor: pointer;
  transition: opacity 0.1s;
}
.cd-prova.apertada { opacity: 0.85; }
.cd-prova img, .cd-prova video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cd-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.cd-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.cd-cont {
  position: absolute; top: 10px; right: 10px; pointer-events: none;
  padding: 3px 8px; background: rgba(0, 0, 0, 0.6); color: #fff; font: 600 13px/1.3 var(--font-ui);
}
/* o hábito de cada foto (F1.5): pílula preta a 60%, 12 px, canto de baixo */
.cd-pilula {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); pointer-events: none;
  padding: 4px 8px; background: rgba(0, 0, 0, 0.6); color: #fff; font: 600 12px/1.25 var(--font-ui);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-pontos { display: flex; justify-content: center; gap: 5px; padding: 10px 0 0; background: var(--card); pointer-events: none; }
.cd-pontos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); transition: background 0.15s; }
.cd-pontos i.on { background: var(--neon); }
/* a nota: até 4 linhas, e o "mais" abre no lugar */
.cd-nota-bloco { margin-top: 10px; }
.cd-nota { font-size: 14px; line-height: 1.5; color: var(--text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* a nota é selecionável só no próprio cartão: no de outra pessoa o toque duplo vence */
.cd-card:not(.de-outro) .cd-nota { -webkit-user-select: text; user-select: text; }
.cd-nota-bloco.aberta .cd-nota { display: block; -webkit-line-clamp: unset; }
.cd-nota-linha { display: block; }
.cd-nota-linha b { font-weight: 600; }
.cd-nota-mais { background: none; border: none; padding: 4px 0; color: var(--neon); font: 500 13px var(--font-ui); cursor: pointer; }
/* a linha de ações (C1) */
.cd-acoes { display: flex; gap: 8px; margin-top: 6px; }
.cd-acao {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 12px 0 6px; margin-left: -6px;
  background: none; border: none; color: var(--text); font: 600 14px var(--font-ui); cursor: pointer;
  transition: transform 0.1s, background 0.1s;
}
.cd-acao + .cd-acao { margin-left: 0; }
.cd-acao::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
.cd-acao svg { width: 20px; height: 20px; fill: currentColor; }
.cd-acao:active { transform: scale(0.96); background: var(--campo); }
.cd-acao.on { color: var(--neon); }
.cd-coments { margin-top: 2px; }
.cd-coment-prev { display: flex; align-items: flex-start; gap: 6px; padding: 4px 0; cursor: pointer; }
.cd-coment-prev .ava { margin-top: 1px; }
.cd-coment-prev p { margin: 0; font-size: 13.5px; line-height: 1.4; color: #a0a0a0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cd-coment-prev b { color: var(--text); font-weight: 600; }
/* momentos (M5): curtos, centralizados, sem fundo */
.momento { border: 1px solid var(--hairline); padding: 12px 16px; margin-bottom: 10px; text-align: center; }
.momento-ava { display: inline-flex; margin-bottom: 6px; }
.momento p { margin: 0; font-size: 13.5px; color: #a0a0a0; line-height: 1.4; }
.momento b { color: var(--text); font-weight: 600; }
.momento [data-membro] { cursor: pointer; }
/* vazio, rodapé e esqueletos (M6) */
.mural-vazio { text-align: center; padding: 26px 8px 10px; color: var(--faint); font-size: 13.5px; line-height: 1.5; }
.mural-vazio p { margin: 0 0 6px; }
.mural-vazio b { color: var(--muted); font-weight: 600; }
.mural-vazio .btn { margin-top: 12px; }
.esq-cartao .esq-cab { display: flex; align-items: center; gap: 10px; }
.esq-circ { width: 36px; height: 36px; border-radius: 50%; background: #141414; flex: none; }
.esq-barras { display: flex; flex-direction: column; gap: 6px; }
.esq-barras i { display: block; width: 120px; height: 10px; background: #141414; }
.esq-barras i + i { width: 80px; height: 8px; }
.esq-bloco { height: 160px; margin-top: 12px; background: #141414; }
.esq-cartao { animation: esqPulso 1.2s ease-in-out infinite alternate; }
@keyframes esqPulso { from { opacity: 1; } to { opacity: 0.6; } }
html.sem-fx .esq-cartao { animation: none; }
/* folha de comentários (C2) e "Quem afiou" */
.sheet.folha-coment { height: 75dvh; display: flex; flex-direction: column; }
.folha-coment .sheet-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 -18px; }
.folha-coment .sheet-title { text-align: center; font-size: 15px; font-weight: 600; }
/* a linha de contexto: de quem é o dia (F1.3) */
.fc-contexto { margin: -4px 16px 10px; text-align: center; font-size: 13px; color: #a0a0a0; }
.fc-lista { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fc-vazio { text-align: center; color: var(--faint); font-size: 13.5px; padding: 28px 16px; }
.fc-linha { display: flex; gap: 10px; padding: 10px 16px; -webkit-user-select: none; user-select: none; }
.fc-linha.enviando { opacity: 0.6; }
.fc-linha.erro { cursor: pointer; }
.fc-corpo { flex: 1; min-width: 0; }
.fc-topo { display: flex; align-items: baseline; gap: 8px; }
.fc-topo b { font-size: 13px; font-weight: 600; }
.fc-tempo { font-size: 12px; color: var(--faint); }
.fc-corpo p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.fc-estado { display: block; margin-top: 2px; font-size: 12px; color: var(--faint); }
.fc-estado.erro { color: var(--erro); }
.fc-compor { display: flex; align-items: flex-end; gap: 10px; padding: 10px 16px 4px; border-top: 1px solid var(--hairline); }
.fc-compor textarea {
  flex: 1; min-height: 38px; max-height: 104px; resize: none;
  background: var(--campo); border: 1px solid var(--hairline); color: var(--text);
  font: 400 15px/22px var(--font-ui); padding: 7px 10px; border-radius: 0;
}
.fc-cont { font-size: 11.5px; color: var(--faint); align-self: center; }
.fc-enviar { height: 38px; padding: 0 4px; background: none; border: none; color: var(--neon); font: 600 14px var(--font-ui); cursor: pointer; }
.fc-enviar:disabled { opacity: 0.35; cursor: default; }
.qa-lista { display: flex; flex-direction: column; }
.qa-linha { display: flex; align-items: center; gap: 12px; padding: 8px 0; background: none; border: none; color: var(--text); text-align: left; cursor: pointer; }
.qa-linha span { display: flex; flex-direction: column; }
.qa-linha b { font-size: 14.5px; font-weight: 600; }
.qa-linha small { font-size: 12px; color: var(--faint); }
.qa-linha:active { opacity: 0.7; }

/* ---------- anéis do dia (A1) ---------- */
.aneis {
  display: flex; gap: var(--folga-aneis, 12px); height: 96px; margin: 4px -16px 6px; padding: 0 16px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.aneis::-webkit-scrollbar { display: none; }
.anel-item { position: relative; flex: 0 0 68px; width: 68px; display: flex; flex-direction: column; align-items: center; }
/* .anel-btn, não .anel: .anel é o anel da Constância na Evolução */
.anel-btn { position: relative; width: 68px; height: 68px; padding: 0; background: none; border: none; cursor: pointer; flex: none; }
.anel-btn:active { opacity: 0.7; }
.anel-svg { position: absolute; inset: 0; width: 68px; height: 68px; }
.anel-svg.fechou { animation: anelFecha 0.26s ease-out; }
@keyframes anelFecha { 50% { transform: scale(1.06); } }
.anel-entra { stroke-dasharray: 1; stroke-dashoffset: 1; animation: anelEntra 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
@keyframes anelEntra { to { stroke-dashoffset: 0; } }
html.sem-fx .anel-svg.fechou, html.sem-fx .anel-entra { animation: none; stroke-dashoffset: 0; }
/* 3 px de preto entre a foto (54) e o traço de 4 do anel */
.anel-ava { position: absolute; left: 7px; top: 7px; }
.anel-mais {
  position: absolute; left: 48px; top: 42px;
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  background: var(--neon); border: 2px solid #000; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.anel-mais::before { content: ""; position: absolute; inset: -3px; }
.anel-mais svg { width: 18px; height: 18px; }
.anel-rot { margin-top: 6px; max-width: 68px; font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anel-rot.eu { color: var(--text); }
.anel-convidar { border: 1.5px dashed rgba(255, 255, 255, 0.3); border-radius: 50%; color: var(--text); }
.anel-convidar span { font-size: 22px; font-weight: 300; line-height: 1; }

/* ---------- Stories do dia (S1) ---------- */
#stories-root { position: relative; z-index: 56; }
#stories-root:empty { display: none; }
#stories-root:not(:empty) { position: fixed; inset: 0; background: #000; }
.stories {
  position: fixed; inset: 0; background: #000; color: var(--text);
  display: flex; flex-direction: column;
  padding-top: calc(env(safe-area-inset-top) + 8px);
  opacity: 0; transition: opacity 0.18s ease-out, transform 0.28s ease-out;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.stories.aberto { opacity: 1; }
.stories.saindo { opacity: 0; transform: scale(0.96); }
.stories.sai-esq { transform: translateX(-24%); opacity: 0; transition-duration: 0.14s; }
.stories.sai-dir { transform: translateX(24%); opacity: 0; transition-duration: 0.14s; }
.stories.entra-dir { transform: translateX(24%); opacity: 0; transition: none; }
.stories.entra-esq { transform: translateX(-24%); opacity: 0; transition: none; }
.stories.troca { opacity: 0; transition: opacity 0.15s; }
.st-barras { display: flex; gap: 4px; padding: 0 12px; }
.st-barra { flex: 1; height: 2px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.st-barra i { display: block; height: 100%; width: 0; background: #fff; }
.st-cab { display: flex; align-items: center; gap: 10px; padding: 12px 8px 0 12px; transition: opacity 0.15s; }
.st-quem { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.st-quem b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-quem small { font-size: 13px; color: var(--muted); }
.st-ic { width: 44px; height: 44px; padding: 0; background: none; border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.st-ic svg { width: 22px; height: 22px; }
.st-palco { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.st-midia { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.st-painel {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 16px calc(env(safe-area-inset-bottom) + 16px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7) 45%);
  transition: opacity 0.15s;
}
.stories.segurando .st-cab, .stories.segurando .st-painel { opacity: 0; }
.st-painel .cd-completo { margin-top: 0; }
.st-painel .cd-feitos { margin-top: 8px; }
.st-nota { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-acoes { display: flex; gap: 4px; margin-top: 8px; }
.st-acoes .cd-acao { color: #fff; }
.st-acoes .cd-acao.on { color: var(--neon); }
.st-ler { cursor: default; }
/* o slide sem prova (resumo e "ainda não registrou"): fundo da foto da
   pessoa desfocada e escurecida a 85%, ou o aço escuro; avatar de 88 no
   terço de cima; texto em branco; as ações fixas embaixo, como nas fotos */
.st-fundo { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 80% at 50% 20%, #2a3038 0%, #15181c 55%, #0a0b0d 100%); }
.st-fundo.com-foto img { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(28px) saturate(0.8); transform: scale(1.1); }
.st-fundo.com-foto::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); }
.st-palco.sem-prova { align-items: flex-start; }
.st-resumo { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 440px; padding: 12vh 24px 120px; gap: 10px; }
.st-resumo .ava { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); }
.st-resumo .st-nome { font-family: var(--font-titulo); font-size: 20px; font-weight: 400; color: #fff; margin-top: 6px; }
.st-resumo .st-ainda { margin: 0; color: #fff; font-size: 16px; font-weight: 500; }
.st-resumo .cd-completo { justify-content: center; color: #fff; font-size: 16px; margin-top: 4px; }
.st-resumo .cd-feitos { justify-content: center; gap: 6px 18px; font-size: 16px; color: #fff; }
.st-resumo .st-nota { color: rgba(255, 255, 255, 0.85); font-size: 15px; -webkit-line-clamp: 5; }
.st-painel.so-acoes { padding-top: 24px; background: none; }
.st-painel .btn { margin-top: 0; }
.st-falha { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }
html.sem-fx .stories { transition: none; }

/* ---------- avisos de foto (P2, P5) ---------- */
/* P2: balão branco sobre a aba Perfil, cantos retos, ponta de 8 para baixo
   na bolinha. No computador, à direita da linha Perfil, ponta à esquerda */
.balao-foto {
  position: fixed;
  /* acima da barra de abas (20) e ABAIXO de toda camada que cobre a tela
     (véu 45, tour 46, modal 50, visor 55, Stories 56): a vigia de 500 ms
     esconde o balão, mas até ela passar ele não pode ficar por cima */
  z-index: 30;
  /* escuro (F1.15): o branco puro era o objeto mais claro da tela */
  background: #1a1a1a;
  color: var(--branco);
  font: 600 13px/1.2 var(--font-ui);
  padding: 8px 12px;
  border: 1px solid var(--neon);
  border-radius: 0;
  white-space: nowrap;
  cursor: pointer;
  animation: balaoFotoEntra 0.2s ease both;
}
/* a ponta: o neon por fora (::before) e o fundo por dentro (::after) */
.balao-foto::before, .balao-foto::after {
  content: "";
  position: absolute;
  left: var(--ponta, 50%);
  border: 8px solid transparent;
  border-bottom: 0;
}
.balao-foto::before { top: 100%; margin-left: -8px; border-top-color: var(--neon); }
.balao-foto::after { top: calc(100% - 1.5px); margin-left: -8px; border-top-color: #1a1a1a; }
.balao-foto.lado::before, .balao-foto.lado::after {
  top: 50%; left: auto; margin: -8px 0 0;
  border: 8px solid transparent; border-left: 0;
}
.balao-foto.lado::before { right: 100%; border-right-color: var(--neon); }
.balao-foto.lado::after { right: calc(100% - 1.5px); border-right-color: #1a1a1a; }
/* o balão visível ganha espaço embaixo da área rolável: nada fica atrás dele */
html.com-balao-foto #view { padding-bottom: calc(env(safe-area-inset-bottom) + 74px + 44px); }
@keyframes balaoFotoEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes balaoFotoSoFade { from { opacity: 0; } to { opacity: 1; } }
html.sem-fx .balao-foto { animation-name: balaoFotoSoFade; }

/* P5: passo de foto ao criar a conta, modal cheio */
.passo-foto {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pf-pular {
  position: absolute;
  top: calc(var(--safe-top) + 8px);
  right: 12px;
  min-width: 44px; min-height: 44px;
  padding: 0 8px;
  background: none;
  border: none;
  color: var(--muted);
  font: 500 15px/1 var(--font-ui);
  cursor: pointer;
}
.pf-centro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 0;
}
.pf-circulo {
  width: 132px; height: 132px;
  border-radius: 50%;
  border: 1.5px dashed var(--faint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  overflow: hidden;
  margin-bottom: 24px;
}
.pf-circulo.com-foto { border: none; }
.pf-circulo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-circulo .pf-glifo { width: 32px; height: 32px; }
.passo-foto .pf-titulo {
  font-family: var(--font-titulo);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.pf-texto { color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 320px; }
.pf-pe { display: flex; flex-direction: column; gap: 10px; }
.pf-pe .btn { margin-top: 0; }

/* ---------- pessoa sem foto: disco de aço escuro e inicial branca ---------- */
/* em todo lugar (anéis, cartões, comentários, ranking, mini perfil, visor):
   nada de disco claro com letra preta */
.ava, .rank-avatar, .profile-avatar, .mini-ava, .visor-avatar {
  background: linear-gradient(160deg, #343a42 0%, #2a2f36 55%, #22262c 100%);
  color: var(--branco);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-weight: 600;
}

/* o código do grupo no Gerenciar e na Participação (F1.7) */
.cod-convite {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  margin: 14px 0 12px; padding: 12px 0; background: none; border: none; border-top: 1px solid var(--border);
  color: var(--text); text-align: left; cursor: pointer;
}
.cod-convite:active { opacity: 0.7; }
.cod-valor { font-family: var(--font-titulo); font-size: 17px; letter-spacing: 0.08em; color: var(--neon); }

/* ---------- o "Check-in de hoje" que encolhe (F1.8) ---------- */
/* completo: uma linha de 56 com o selo de 24 e "Dia completo" */
.ck-completo {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0;
  background: none; border: none; color: var(--branco); cursor: pointer; text-align: left;
  font-family: var(--font-titulo); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
}
.ck-completo .sd-selo { flex: none; }
.ck-completo:active, .ck-resumo:active { opacity: 0.7; }
/* parcial: os feitos numa linha com tiques, acima dos pendentes */
.ck-resumo {
  display: flex; flex-wrap: wrap; gap: 4px 16px; width: 100%; padding: 10px 0 12px; margin-bottom: 2px;
  background: none; border: none; border-bottom: 1px solid var(--hairline); color: var(--text); cursor: pointer; text-align: left;
  font: 600 14.5px/1.4 var(--font-ui);
}
.ck-compartilhar { display: block; margin: 6px 0 0; padding: 8px 0; }
.ck-recolher { display: block; margin: 8px 0 0; padding: 6px 0; color: var(--muted); }

/* a dica única do Afiar (F1.10): escura, ancorada no botão Afiar do cartão */
.dica-afiar {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  margin: 10px 0 2px; padding: 12px 8px 12px 14px;
  background: #1a1a1a; border: 1px solid var(--neon-borda, rgba(0, 154, 206, 0.5)); color: var(--text);
}
.dica-afiar::before {
  content: ""; position: absolute; left: 18px; top: -7px; width: 12px; height: 12px;
  background: #1a1a1a; border-left: 1px solid var(--neon-borda, rgba(0, 154, 206, 0.5)); border-top: 1px solid var(--neon-borda, rgba(0, 154, 206, 0.5));
  transform: rotate(45deg);
}
.dica-afiar p { flex: 1; margin: 0; font-size: 14px; line-height: 1.45; }
.dica-afiar-x { flex: none; width: 32px; height: 32px; margin: -6px 0; padding: 0; background: none; border: none; color: #a0a0a0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dica-afiar-x svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

/* a barra "Compartilhe com os irmãos" entre o Check-in de hoje e Mural | Ranking */
.compartilhe {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: 12px; margin-bottom: 12px;
}
.cp-linha {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 0;
  background: none; border: none; color: var(--faint); font: 400 14.5px/1.3 var(--font-ui); text-align: left; cursor: pointer;
  transition: transform 0.12s ease;
}
.cp-linha .ava { flex: none; }
.cp-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-botoes.um { grid-template-columns: 1fr; }
.cp-botao {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 44px; padding: 0 10px;
  background: transparent; border: 1px solid var(--hairline-forte); border-radius: var(--r-controle);
  color: var(--text); font: 600 14.5px var(--font-ui); cursor: pointer;
  transition: transform 0.12s ease;
}
.cp-botao span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-botao .glifo { flex: none; width: 18px; height: 18px; stroke-width: 1.6; color: var(--neon); }
.cp-linha:active, .cp-botao:active { transform: scale(0.98); }
/* tela estreita (o 359 do resto do app; 320 é o alvo): o glifo sobe para
   cima do texto e o rótulo cabe inteiro, em português e em inglês */
@media (max-width: 359px) {
  .cp-botao { flex-direction: column; gap: 4px; height: auto; min-height: 56px; padding: 7px 4px; }
}
/* a dica única da barra: a setinha aponta para ela; o fundo da setinha é o
   neon-dim já composto sobre o fundo, para cobrir a borda da caixa */
.dica-compartilhe {
  position: relative; display: flex; align-items: flex-start; gap: 6px;
  margin: 0 0 12px; padding: 12px 0 12px 14px;
  background: var(--neon-dim); border: 1px solid var(--neon-borda); color: var(--text);
}
.dica-compartilhe::before {
  content: ""; position: absolute; left: 22%; top: -7px; width: 12px; height: 12px;
  background: linear-gradient(var(--neon-dim), var(--neon-dim)), var(--bg);
  border-left: 1px solid var(--neon-borda); border-top: 1px solid var(--neon-borda);
  transform: rotate(45deg);
}
.dc-txt { flex: 1; min-width: 0; }
.dc-txt p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.dc-txt small { display: block; margin-top: 4px; font-size: 13px; color: #a0a0a0; }
.dica-compartilhe-x {
  flex: none; width: 44px; height: 44px; margin: -10px 0 -10px; padding: 0;
  background: none; border: none; color: #a0a0a0; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dica-compartilhe-x svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

/* "Prefiro não usar foto" no Editar perfil (F2.5, trazido para a Fase 1) */
.sem-foto-row { margin: 4px 0 14px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ---------- pedido de oração nos grupos (docs/oracao-e-indicacoes.md, O1 a O7) ---------- */
/* o "+" do topo das telas Pedidos de oração e Indicações */
.publicar-btn svg { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: square; }
/* O1: o bloco ORAÇÃO entre Mural | Ranking e HOJE */
.or-bloco { margin: 4px 0 6px; }
.or-sep { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
.or-sep span { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #a0a0a0; white-space: nowrap; }
.or-sep::after { content: ""; flex: 1; height: 1px; background: var(--hairline); order: 1; }
.or-vazio { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; color: #a0a0a0; }
.or-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: #111; border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: 14px; margin-bottom: 8px; cursor: pointer;
  transition: transform 0.12s ease;
}
/* pressionado: o cartão encolhe um pouco (menos quando o dedo está no Orar) */
.or-card:active:not(:has(.or-orar:active)) { transform: scale(0.98); }
.or-card.enviando { opacity: 0.6; }
/* nome e texto: um botão só, que abre o pedido */
.or-abrir {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px;
  margin: 0; padding: 0; background: none; border: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.or-ava { display: inline-flex; flex: none; margin-top: 2px; }
.or-corpo { display: block; flex: 1; min-width: 0; }
.or-topo { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.or-topo b { font-size: 16px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-topo small { font-size: 13px; color: #a0a0a0; white-space: nowrap; }
.or-texto {
  margin: 2px 0 0; font-size: 15px; line-height: 1.45; color: var(--text); word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.or-n { display: block; margin-top: 6px; font-size: 13px; color: #a0a0a0; }
.or-lado { flex: none; align-self: center; display: flex; align-items: center; }
.or-orar {
  position: relative; height: 36px; padding: 0 16px;
  background: transparent; border: 1px solid var(--neon); border-radius: var(--r-controle);
  color: var(--neon); font: 600 15px var(--font-ui); cursor: pointer;
}
.or-orar::before { content: ""; position: absolute; inset: -6px; }
.or-orar { transition: transform 0.12s ease, background 0.12s; }
.or-orar:active { background: var(--neon-dim); transform: scale(0.98); }
.or-orou { display: inline-flex; align-items: center; gap: 4px; color: var(--neon); font: 600 15px var(--font-ui); white-space: nowrap; }
.or-orou .cd-tique { width: 13px; height: 13px; }
/* o "Orar" vira "✓ Orou" no mesmo lugar, com fade */
.or-orou.entrando { animation: orOrouEntra 0.2s ease-out; }
@keyframes orOrouEntra { from { opacity: 0; } to { opacity: 1; } }
.sem-fx .or-orou.entrando { animation: none; }
.or-situacao { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #a0a0a0; white-space: nowrap; }
.or-situacao.respondido { color: var(--neon); font-weight: 600; }
.or-pilha { display: inline-flex; align-items: center; }
.or-pilha .ava { box-shadow: 0 0 0 2px #111; }
.or-pilha .ava + .ava, .or-pilha .or-pilha-mais { margin-left: -6px; }
.or-pilha-mais {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px;
  background: var(--campo); box-shadow: 0 0 0 2px #111;
  color: var(--text); font: 600 11px var(--font-ui);
}
.or-todos { margin-top: 0; }
/* O2 e O6: o campo, o contador e o prazo */
.folha-oracao .or-campo { margin-top: 4px; padding: 14px 16px; }
.or-cont { display: block; text-align: right; margin-top: 4px; font-size: 11.5px; color: var(--faint); }
.or-cont[hidden] { display: none; }
.or-rotulo { margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.or-chips { margin-top: 8px; }
.or-chips .chip-opt { height: 40px; padding: 0 18px; font-size: 14px; }
.or-chips .chip-opt:not(.sel) { border-color: var(--hairline); }
.folha-oracao .sheet-btn.principal:disabled { opacity: 0.45; cursor: default; }
/* O3: o texto do pedido com o filete neon */
.or-citacao {
  margin: 14px 0 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--neon);
  font-size: 16px; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-break: break-word;
  max-height: 40dvh; overflow-y: auto; touch-action: auto;
}
.or-instrucao { margin-top: 14px; }
/* O4: a tela do pedido */
.or-nav { display: flex; align-items: center; gap: 10px; }
.or-nav .back-btn { flex: 1; text-align: left; }
.or-menu { font-size: 18px; line-height: 1; color: var(--muted); }
.or-cabeca { display: flex; align-items: center; gap: 14px; margin: 18px 0 16px; }
.or-cab-ava { display: inline-flex; flex: none; }
.or-cab-ava[data-or-membro] { cursor: pointer; }
.or-cab-txt { min-width: 0; }
.or-cab-txt h2 { font-family: var(--font-ui); font-size: 20px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }
.or-cab-txt small { display: block; margin-top: 2px; font-size: 13px; color: #a0a0a0; }
/* o sinal de privacidade: cadeado de 12 e "Só o Ferro vê" */
.or-privado { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 13px; color: #a0a0a0; }
.or-cadeado { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }
.or-lista-cab .or-privado { margin-top: 8px; }
/* o "+" de 44 da lista de pedidos */
.or-mais { width: 44px; height: 44px; }
.or-mais svg { width: 18px; height: 18px; }
.or-texto-todo { font-size: 17px; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-break: break-word; -webkit-user-select: text; user-select: text; }
.or-kicker { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.or-secao { margin: 24px 0 4px; }
.or-resposta { margin: 20px 0 0; padding: 14px 16px; background: #111; border-left: 2px solid var(--neon); }
.or-resposta .or-kicker { color: var(--neon); }
.or-resposta p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.or-quem { display: flex; flex-direction: column; }
.or-quem-linha {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  background: none; border: none; border-bottom: 1px solid var(--hairline); padding: 10px 0;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.or-quem-linha:active { opacity: 0.7; }
.or-quem-linha b { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-quem-linha small { flex: none; font-size: 13px; color: #a0a0a0; }
.or-n-grande { margin-top: 20px; font-size: 15px; color: var(--muted); }
.or-eu-orei { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--neon); }
/* O4: o rodapé fixo, com linha em cima e fundo preto; 16 de respiro acima
   da barra de abas. A tela ganha folga do tamanho dele (--or-fixo, medido) */
.plano-fixo.or-fixo { padding: 12px 16px 16px; background: #000; border-top: 1px solid var(--hairline); }
.or-fixo .btn-text.block { margin-top: 4px; max-width: 448px; min-height: 44px; }
#view.com-fixo.or-com-fixo { padding-bottom: calc(env(safe-area-inset-bottom) + 62px + var(--or-fixo, 130px) + 16px); }
body.com-mini #view.com-fixo.or-com-fixo { padding-bottom: calc(env(safe-area-inset-bottom) + 114px + var(--or-fixo, 130px) + 16px); }
/* O5: Ativos | Encerrados */
.or-seg { margin: 4px 0 16px; }
/* O6: o momento da resposta no mural, cartão próprio com filete neon */
.or-resposta-mural {
  background: #111; border: 1px solid var(--hairline); border-left: 2px solid var(--neon);
  border-radius: var(--r-card); padding: 14px 14px 4px 16px; margin-bottom: 8px; text-align: left;
}
.orr-kicker { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neon); }
.orr-linha { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; }
.orr-ava { display: inline-flex; flex: none; }
.orr-corpo { flex: 1; min-width: 0; }
.orr-corpo p { margin: 0; }
.orr-quem { font-size: 13.5px; line-height: 1.4; color: #a0a0a0; }
.orr-quem b { color: var(--text); font-weight: 600; }
.orr-corpo .orr-test {
  margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--text); word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.orr-ver { position: relative; display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0; background: none; border: none; color: var(--neon); font: 600 14px var(--font-ui); cursor: pointer; }
.orr-ver::before { content: ""; position: absolute; inset: 0 -10px; }
.orr-ver:active { opacity: 0.6; }

/* ---------- indicações (docs/oracao-e-indicacoes.md, seção Indicações) ---------- */
/* o cartão no mural: a mesma pele do cartão-dia, sem afiar nem comentar */
.ind-card { background: #111; border-radius: var(--r-card); padding: 14px 14px 4px; margin-bottom: 8px; }
.ind-card.enviando { opacity: 0.6; }
.ind-link {
  display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 10px;
  border: 1px solid var(--hairline); color: var(--text); text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: opacity 0.12s;
}
a.ind-link:active { opacity: 0.75; }
.ind-quadro {
  position: relative; flex: none; width: 56px; height: 56px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--campo); color: var(--muted);
}
.ind-quadro .glifo { width: 24px; height: 24px; }
.ind-quadro.pequeno { width: 40px; height: 40px; }
.ind-quadro.pequeno .glifo { width: 20px; height: 20px; }
.ind-mini { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a prévia do link na folha "Nova indicação": o bloco do cartão; enquanto a
   função busca a imagem, o quadrado pulsa devagar */
.folha-indicacao .ind-previa { margin-top: 10px; }
.ind-previa[hidden] { display: none; }
.ind-quadro.carregando { animation: indCarrega 1.1s ease-in-out infinite alternate; }
@keyframes indCarrega { from { opacity: 1; } to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .ind-quadro.carregando { animation: none; } }
.ind-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1; }
.ind-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.ind-tit {
  margin-top: 2px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text); word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ind-dom { margin-top: 2px; font-size: 13px; color: #a0a0a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-pq-bloco { margin-top: 10px; }
.ind-pq {
  margin: 0; font-size: 15px; line-height: 1.45; color: var(--text); word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ind-pq-bloco.aberta .ind-pq { display: block; -webkit-line-clamp: unset; }
/* Salvar / Salvo: a mesma ação do Afiar e do Comentar, com o marcador de 18 */
.ind-card .cd-acoes { margin-top: 4px; }
.ind-acao .ind-marcador { width: 18px; height: 18px; }
.ind-acao:disabled { opacity: 0.5; cursor: default; }
/* a própria indicação: já está nas suas, sem toque */
.ind-propria { display: inline-flex; align-items: center; min-height: 44px; font: 600 14px var(--font-ui); color: #a0a0a0; }
/* a folha "Nova indicação": cabe acima do teclado e rola por dentro */
.folha-indicacao {
  max-height: calc(100dvh - var(--teclado, 0px) - env(safe-area-inset-top) - 24px);
  overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain;
}
.folha-indicacao .ind-tipos { margin-top: 14px; }
.folha-indicacao .or-rotulo { margin-top: 16px; }
.folha-indicacao .sheet-input { margin-top: 8px; }
.folha-indicacao .or-campo { padding: 12px 14px; }
.ind-opc { letter-spacing: 0.06em; }
.ind-opc[hidden] { display: none; }
.ind-link-linha { display: flex; align-items: center; gap: 8px; }
.ind-link-linha .sheet-input { flex: 1; min-width: 0; }
.ind-colar {
  flex: none; height: 48px; margin-top: 8px; padding: 0 14px;
  background: none; border: 1px solid var(--hairline-forte); border-radius: var(--r-controle);
  color: var(--neon); font: 600 14px var(--font-ui); cursor: pointer;
}
.ind-colar:active { background: var(--campo); }
.sheet-input.com-erro, .sheet-input.com-erro:focus { border-color: var(--erro); }
.ind-erro { margin: 6px 0 0; font-size: 12.5px; color: var(--erro); }
.ind-erro[hidden] { display: none; }
/* o que falta ao tocar em "Indicar ao grupo" */
.ind-falta { margin: 6px 0 0; font-size: 13px; color: var(--neon); }
.ind-falta[hidden] { display: none; }
/* as linhas (card do Perfil e tela Indicações): segurar abre o menu */
.ind-lista { margin-bottom: 12px; }
.ind-linha {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 0;
  border-bottom: 1px solid var(--hairline); cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; transition: opacity 0.12s;
}
.ind-linha:last-child { border-bottom: none; }
.ind-lista.grande .ind-linha:last-child { border-bottom: 1px solid var(--hairline); }
.ind-linha:active { opacity: 0.7; }
.ind-linha.enviando { opacity: 0.6; }
.ind-linha-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ind-linha-txt b { font-size: 16px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-linha-txt small { margin-top: 2px; font-size: 13.5px; color: #a0a0a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a linha com o "⋯" (tela Indicações): o miolo abre, o "⋯" tem 44 de alvo */
.ind-linha.ind-linha-dupla { gap: 4px; padding: 0; }
.ind-linha.ind-linha-dupla:active { opacity: 1; }
.ind-linha-abrir {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 0;
  background: none; border: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ind-linha-abrir:active { opacity: 0.7; }
.ind-linha-mais {
  flex: none; width: 44px; height: 44px; margin-right: -10px; padding: 0;
  background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.ind-linha-mais:active { opacity: 0.6; }
/* os filtros: uma fileira que rola de lado, sem barra */
/* um degradê de 24 na borda direita mostra que a fileira continua */
/* Todas | Salvas | Indicadas por mim, acima dos chips de tipo */
.ind-seg { margin: 4px 0 12px; }
/* "Indicadas por mim" cabe na terça parte sem quebrar nem cortar até 320 px */
.ind-seg .evo-seg-b { white-space: nowrap; }
@media (max-width: 374px) { .ind-seg .evo-seg-b { font-size: 11px; letter-spacing: 0; } }
@media (max-width: 339px) { .ind-seg .evo-seg-b { font-size: 10px; } }
.ind-filtros-borda { position: relative; margin: 4px -16px 10px; }
.ind-filtros-borda::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--bg));
}
.ind-filtros {
  display: flex; gap: 8px; padding: 0 16px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ind-filtros::-webkit-scrollbar { display: none; }
.ind-filtros .chip-opt { flex: none; height: 38px; padding: 0 16px; font-size: 14.5px; border-color: var(--hairline-forte); background: none; color: var(--text); }
.ind-filtros .chip-opt.sel { background: var(--neon-dim); border-color: var(--neon-borda); color: var(--text); }
/* o aviso com ação ("Removida." e Desfazer) */
.toast.com-acao { display: flex; align-items: center; gap: 18px; text-align: left; padding: 8px 10px 8px 18px; }
/* com left: 50%, a largura encolhia para a metade da tela e o aviso longo
   ("Gostou? Salve nas suas indicações, no Perfil.") virava quatro linhas:
   a largura é a do texto, até 86% da tela, e o translateX centraliza */
.toast.com-acao { width: max-content; max-width: min(86vw, 420px); }
.toast-acao { flex: none; min-height: 36px; padding: 0 8px; background: none; border: none; color: var(--neon); font: 600 13px var(--font-ui); cursor: pointer; }
/* os quatro tipos numa fileira só, mesmo no celular estreito */
.ind-tipos { flex-wrap: nowrap; }
.ind-tipos .chip-opt { flex: 1 1 auto; min-width: 0; padding: 0 8px; }

/* novidade dos grupos: folha única na abertura do app (pedido de oração e
   indicações), com o glifo de cada uma como na barra Compartilhe */
.folha-novidade .sheet-corpo { margin: 14px 0 18px; }
.nov-lista { display: flex; flex-direction: column; gap: 16px; }
.nov-item { display: flex; align-items: flex-start; gap: 14px; }
.nov-glifo {
  flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--hairline-forte); border-radius: var(--r-controle);
}
.nov-glifo .glifo { width: 20px; height: 20px; stroke-width: 1.6; color: var(--neon); }
.nov-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 1px; }
.nov-txt b { font: 600 15px var(--font-ui); color: var(--text); }
.nov-txt small { font-size: 13.5px; line-height: 1.45; color: var(--muted); }