/* ═══════════════════════════════════ TIPOGRAFIA ═══
       Fonte própria da app, autoalojada (ver pasta /fonts) — deixa de
       depender do Google Fonts. Plus Jakarta Sans: geométrica mas com
       calor humano, excelente para PT (acentos completos), pesos 400–800
       cobrem texto de corpo, títulos e ênfases sem precisar de outra
       família. ═══ */
    @font-face {
      font-family: 'Plus Jakarta Sans';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('fonts/plus-jakarta-sans-400.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Plus Jakarta Sans';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('fonts/plus-jakarta-sans-500.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Plus Jakarta Sans';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('fonts/plus-jakarta-sans-600.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Plus Jakarta Sans';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('fonts/plus-jakarta-sans-700.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Plus Jakarta Sans';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url('fonts/plus-jakarta-sans-800.woff2') format('woff2');
    }

    /* ═══════════════════════════════════ TOKENS ═══ */
    :root {
      --cyan: #29c5ea;
      --lime: #7ed321;
      --mara: #FF4081;
      --mara-soft: rgba(255, 64, 129, 0.12);
      --mara-glow: rgba(255, 64, 129, 0.22);
      /* Canais RGB soltos (sem alpha) das cores de acento, para poderem
         ser usados dentro de rgba(var(--cyan-rgb), X) em qualquer alpha —
         é isto que permite ao tema escuro global (html.tema-escuro, mais
         abaixo) reskinar TODOS os tons de acento da app para a paleta da
         Mara com 2 linhas, em vez de reescrever ~290 declarações rgba(). */
      --cyan-rgb: 41, 197, 234;
      --lime-rgb: 126, 211, 33;
      --cyan-soft: rgba(var(--cyan-rgb), 0.12);
      --lime-soft: rgba(var(--lime-rgb), 0.12);
      --cyan-glow: rgba(var(--cyan-rgb), 0.22);
      --lime-glow: rgba(var(--lime-rgb), 0.22);
      --bg-deep: #000000;
      --bg-mid: #000000;
      --bg-green: #000000;

      /* ── CARTÕES 2026 — vidro sólido, alternância Luzayadio ───────────
         Já não são brancos translúcidos sobre gradiente: agora são
         opacos a 100%, cada um "tingido" numa das duas cores da
         personagem Luzayadio (ciano/lima), para o fundo preto sólido
         nunca aparecer por trás. --card = tom ciano, --card2 = tom
         lima — os ~30 pontos do ficheiro que já liam --card/--card2
         (incl. #partilha-comercio-view) herdam isto automaticamente. */
      --card-a: color-mix(in srgb, var(--cyan) 26%, #050a0c 74%);
      --card-b: color-mix(in srgb, var(--lime) 24%, #070a05 76%);
      --card-a-border: color-mix(in srgb, var(--cyan) 50%, transparent);
      --card-b-border: color-mix(in srgb, var(--lime) 50%, transparent);
      --card-a-hi: color-mix(in srgb, var(--cyan) 14%, transparent);
      --card-b-hi: color-mix(in srgb, var(--lime) 14%, transparent);
      /* Sombra/relevo padrão de "vidro grosso": brilho fino no topo,
         sombra interior suave em baixo, sombra externa funda — dá
         espessura e um leve efeito espelhado sem deixar de ser sólido. */
      --card-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 -14px 22px -14px rgba(0, 0, 0, .55) inset, 0 18px 40px rgba(0, 0, 0, .5);
      --card: var(--card-a);
      --card2: var(--card-b);
      --border: rgba(255, 255, 255, 0.24);
      --border-c: rgba(var(--cyan-rgb), 0.32);
      --border-l: rgba(var(--lime-rgb), 0.32);
      --t1: #eef2f7;
      --t2: #7a8fa6;
      --t3: #3d4f63;

      /* ── FUNDOS DA APP (tokenizados) ──────────────────────────────────
         Antes cada ecrã (splash, folhas, confirmação, upload, leitor…)
         repetia o mesmo gradiente em hex, literal, ~20 vezes espalhado
         pelo ficheiro. Passados a variáveis para que o tema escuro global
         (html.tema-escuro, ver fundo do ficheiro) consiga escurecer TODA
         a app com 3 linhas, em vez de duplicar dezenas de blocos. */
      --app-bg-1: #000000;
      --app-bg-2: #000000;
      --app-bg-3: #000000;
      --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bot: env(safe-area-inset-bottom, 0px);
      --radius: 20px;
      --trans-main: cubic-bezier(0.32, 0.72, 0, 1);

      /* ── DURAÇÃO/CURVA ÚNICA PARA TODOS OS ECRÃS DE TELA CHEIA ──────────
         Antes cada ecrã (leitor, detalhe de curso, upload, confirmação,
         pagamento de tradução, folhas de biblioteca…) tinha a sua própria
         duração (.25s/.3s/.35s) e easing (misturado entre "ease" genérico
         e --trans-main), sem nenhum movimento — só opacidade. Usa-se agora
         SEMPRE --trans-main (a curva já usada no resto da app) com a
         mesma duração e um leve movimento vertical, para toda a família
         de "ecrãs" e "folhas" abrir/fechar de forma consistente. */
      --trans-screen-dur: .3s;
      --trans-screen: opacity var(--trans-screen-dur) var(--trans-main),
                       transform var(--trans-screen-dur) var(--trans-main);

      /* ── ESCALA DE Z-INDEX (documentada, para nunca mais um ecrã abrir
         "escondido" atrás de outra camada — foi exactamente isto que
         escondia o leitor de livro atrás da biblioteca) ────────────────
           400            app-shell (conteúdo base, sempre visível)
           500–620        fluxo de autenticação (login/registo/splash) —
                           nunca coexiste com o app-shell, por isso não
                           precisa de estar acima da camada seguinte
           700–759        FOLHAS/MODAIS (compose, foto, upload de livro,
                           painel de partilha fixada, "caos" do mascote,
                           biblioteca Luza-Neno) — sobrepõem-se ao
                           app-shell, mas nunca a um ecrã de destino
           1000           ECRÃS DE DESTINO (detalhe de curso, notificações
                           do curso, leitor de livro, responder idioma,
                           upload de PDF, confirmação) — SEMPRE acima de
                           qualquer folha/modal que os possa ter aberto
           1100–1110      Sobreposições que têm de cobrir um ecrã de
                           destino (pedido de pagamento/upload de
                           tradução, sobre o leitor)
           1200–1201      Mascote flutuante (decorativo, não bloqueia)
           1500           Toast — sempre visível, acima de tudo o resto
           2000           Aviso de nova versão (mais alto de todos)      */
      --z-app-shell: 400;
      --z-sheet: 700;
      --z-screen: 1000;
      --z-screen-overlay: 1100;
      --z-toast: 1500;
    }

    /* ═══════════════════════════════════════════════════════════════════
       BOTÕES — base global 2026
       ───────────────────────────────────────────────────────────────────
       Antes cada um dos ~90 botões da app definia o seu próprio flex/
       alinhamento (ou nem isso, ficando no "inline-block" por omissão do
       browser) — resultado: ícone e texto nem sempre alinhados no centro,
       feedback ao toque inconsistente, alguns sem transição nenhuma.

       Esta base aplica-se a QUALQUER <button> da app (e às classes
       *-btn, *-fab, *-toggle usadas em contentores que não são <button>
       mas se comportam como um), garantindo por omissão:
       - ícone SEMPRE centrado com o texto, numa linha, com respiro (gap);
       - feedback de toque igual em todo o lado (encolhe ligeiramente);
       - um leve "levantar" ao pairar o rato (só em ecrãs com rato real);
       - o ícone nunca esmaga nem estica (flex-shrink: 0).

       Por ser feita com o seletor de elemento `button` (especificidade
       baixa), qualquer regra existente com uma classe continua a ganhar
       nas propriedades que já define — isto só preenche o que faltava,
       nunca quebra um layout já pensado (ex.: separadores em grelha como
       .commerce-tab, que definem o seu próprio `display`). ═══ */
    /* Cobertura extra: várias "botões" da app são <div>/<span> com
       onclick em vez de <button> semântico (ex.: .compose-type-btn,
       .diag-opt-btn, .comercio-area-chip-btn) — o seletor de elemento
       `button` não os alcança, por isso o mesmo tratamento base aplica-se
       a qualquer classe que contenha "btn". */
    button,
    [class*="btn" i] {
      font-family: var(--font);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      -webkit-tap-highlight-color: transparent;
      transition: transform .15s var(--trans-main, ease),
                  filter .15s ease,
                  box-shadow .18s ease,
                  background .18s ease,
                  border-color .18s ease,
                  opacity .18s ease;
    }

    button svg,
    button img,
    button .icon,
    button .lz-icon,
    [class*="btn" i] svg,
    [class*="btn" i] img,
    [class*="btn" i] .icon,
    [class*="btn" i] .lz-icon {
      flex-shrink: 0;
    }

    button:active,
    [class*="btn" i]:active {
      transform: scale(.94);
    }

    button:disabled,
    [class*="btn" i][disabled],
    [class*="btn" i].disabled,
    [class*="btn" i].btn-bloqueado {
      cursor: default;
    }

    @media (hover: hover) {
      button:not(:disabled):hover,
      [class*="btn" i]:not(:disabled):not(.disabled):hover {
        filter: brightness(1.08);
      }
    }

    /* Botões "cheios" (fundo sólido ciano, lima ou o gradiente da marca)
       ganham um leve halo da própria cor — é o que torna um botão
       primário mais expressivo sem precisar de o marcar caso a caso. */
    button[class*="primary" i]:not(:disabled),
    button[class*="confirm" i]:not(:disabled),
    .btn-book-primary:not(:disabled),
    .diag-btn-next:not(:disabled),
    .diag-btn-finish:not(:disabled) {
      box-shadow: 0 8px 20px -4px rgba(var(--cyan-rgb), .35);
    }

    /* Botões circulares só-com-ícone (fechar, gravar, enviar, anexar…):
       força um círculo perfeito com o ícone morto-no-centro, mesmo que a
       classe específica só tenha definido width/height. */
    button[class*="icon-btn" i],
    .btn-icon,
    .close-button,
    .favorite-button,
    .reply-send-btn,
    .compose-attach-btn,
    .pin-btn,
    .pin-panel-icon-btn,
    .cart-close-fixed {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    /* ═══════════════════════════════════════════════════════════════════
       IDENTIDADE ABBA — camada global de padronização
       ───────────────────────────────────────────────────────────────────
       A ABBA Comércio (COMERCIO_CSS em js.js) já usa os MESMOS tokens de
       cor da app (--cyan, --lime, --mara, --bg-deep/mid/green, --t1/2/3) —
       por isso "usar as cores da ABBA em toda a app" já está feito na
       base. O que faz a ABBA "sentir-se" diferente é a CAMADA DE ESTILO
       por cima dessas cores: cartões em vidro (fundo branco translúcido
       + borda branca translúcida, em vez de opaco), pastilhas 100%
       arredondadas para filtros/categorias, cabeçalhos de secção com um
       "kicker" maiúsculo antes do título, cartões que sobem ligeiramente
       ao passar o rato, e uma barra de separadores em formato de pílula
       segmentada (em vez de ícone+label solto).

       Estas classes utilitárias tornam esse vocabulário reutilizável em
       QUALQUER ecrã da app (feed, chat, notificações, cursos…) sem
       duplicar CSS — cada ecrã adota o que fizer sentido, mantendo as
       suas próprias particularidades (ex.: o "caderno" do perfil). ═══ */

    .abba-kicker {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--cyan);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .abba-glass-card {
      border: 1.5px solid var(--card-a-border, rgba(255, 255, 255, .1));
      border-radius: var(--radius, 16px);
      background: var(--card, rgba(255, 255, 255, .045));
      box-shadow: var(--card-shadow, none);
      transition: transform .22s var(--trans-main), border-color .22s var(--trans-main), box-shadow .22s var(--trans-main);
    }

    .abba-glass-card.abba-hover:hover {
      transform: translateY(-3px);
      border-color: rgba(var(--cyan-rgb), .4);
      box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
    }

    .abba-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-height: 31px;
      padding: 0 12px;
      border: 1px solid var(--border, rgba(255, 255, 255, .12));
      border-radius: 999px;
      background: rgba(255, 255, 255, .04);
      color: var(--t2);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
      user-select: none;
    }

    .abba-pill:hover { border-color: rgba(var(--cyan-rgb), .5); }
    .abba-pill:active { transform: scale(.97); }

    .abba-pill.sel {
      border-color: var(--cyan);
      background: var(--cyan);
      color: var(--bg-deep);
      box-shadow: 0 4px 10px rgba(var(--cyan-rgb), .25);
    }

    /* Barra de separadores segmentada (2 a 4 opções), estilo commerce-tabbar */
    .abba-segmented {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: 6px;
      padding: 5px;
      border: 1px solid var(--border, rgba(255, 255, 255, .1));
      border-radius: 15px;
      background: rgba(0, 0, 0, .16);
    }

    .abba-segmented-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 12px;
      border: 1px solid transparent;
      border-radius: 10px;
      color: var(--t2);
      font-size: 12px;
      font-weight: 700;
      background: transparent;
      cursor: pointer;
      transition: color .2s ease, background .2s ease, border-color .2s ease;
    }

    .abba-segmented-item.is-active {
      color: var(--t1);
      border-color: rgba(var(--cyan-rgb), .34);
      background: rgba(var(--cyan-rgb), .1);
      box-shadow: 0 5px 20px rgba(0, 0, 0, .14);
    }

    .abba-segmented-item.is-active svg { color: var(--cyan); }

    /* Fundo ambiente com auréolas desfocadas — usar em ecrãs de destaque
       (hero de secção, ecrãs de boas-vindas), não no fundo geral da app. */
    .abba-ambient { position: relative; overflow: hidden; }
    .abba-ambient::before,
    .abba-ambient::after {
      content: '';
      position: absolute;
      z-index: 0;
      pointer-events: none;
      border-radius: 999px;
      filter: blur(2px);
      opacity: .5;
    }
    .abba-ambient::before {
      width: 42vw; height: 42vw; top: -24vw; left: -16vw;
      background: radial-gradient(circle, rgba(var(--cyan-rgb), .16), transparent 68%);
    }
    .abba-ambient::after {
      width: 44vw; height: 44vw; right: -20vw; bottom: 5vh;
      background: radial-gradient(circle, rgba(var(--lime-rgb), .12), transparent 68%);
    }
    .abba-ambient > * { position: relative; z-index: 1; }

    /* ═══════════════════════════════════════════════════════════════════
       TEMA ESCURO GLOBAL (html.tema-escuro) — identidade visual da MARA
       ───────────────────────────────────────────────────────────────────
       Aplica-se à app inteira (não só ao leitor de livro), ativado a
       partir do menu do avatar → "Tema escuro" (ver #avatar-dropdown e
       aplicarTemaEscuroGlobal() em js.js). Preferência guardada em
       localStorage ('luz_tema_escuro') e aplicada assim que a página
       carrega, antes de qualquer conteúdo pintar, para nunca haver
       "flash" do tema normal.

       Reaproveita deliberadamente a MESMA linguagem visual do "modo de
       leitura escuro (tema Mara)" já existente no leitor (ver
       #screen-book-reader.br-modo-escuro, mais abaixo): fundo quase
       preto com um tom quente/rosado subtil, em vez de preto neutro ou
       do azul/verde do tema normal — e o rosa de assinatura da Mara
       (#FF4081) substitui o ciano/lima como cor de acento em TODA a app,
       não só no leitor.

       Como funciona: quase toda a superfície da app (fundos, cartões,
       texto E os ~290 tons de acento ciano/lima) já passa pelas
       variáveis --app-bg-*, --card, --border, --t1/2/3, --cyan-rgb e
       --lime-rgb, por isso basta redefinir estas variáveis à raiz — a
       cascata trata do resto sem duplicar regras por todo o ficheiro.

       Tons reforçados a pedido: preto quase puro (com o mesmo tom quente
       do leitor) nos fundos, para o texto claro sobressair; --t1 fica
       branco quente, a condizer com a paleta da Mara em vez de um branco
       frio genérico. ═══════════════════════════════════════════════ */
    html.tema-escuro {
      --bg-deep: #000000;
      --bg-mid: #000000;
      --bg-green: #000000;

      /* Fundos: preto sólido, sem gradiente, igual ao resto da app. */
      --app-bg-1: #000000;
      --app-bg-2: #000000;
      --app-bg-3: #000000;

      /* Acentos: ciano e lima cedem lugar ao rosa da Mara — um tom
         principal e uma variante mais clara, para manter a profundidade
         de dois tons que a app já usa (gradientes, ícones a par), mas
         inteiramente dentro da paleta dela. */
      --cyan: var(--mara);
      --lime: #ff8fb3;
      --cyan-rgb: 255, 64, 129;
      --lime-rgb: 255, 143, 179;
      --cyan-soft: rgba(255, 64, 129, 0.12);
      --lime-soft: rgba(255, 143, 179, 0.12);
      --cyan-glow: rgba(255, 64, 129, 0.22);
      --lime-glow: rgba(255, 143, 179, 0.22);
      --border-c: rgba(255, 64, 129, 0.28);
      --border-l: rgba(255, 143, 179, 0.28);

      /* Cartões sólidos também no tema escuro: as duas variantes passam
         a ser rosa (Mara) e rosa-claro, mantendo a mesma alternância de
         duas cores, agora dentro da paleta dela. */
      --card-a: color-mix(in srgb, var(--mara) 24%, #08050a 76%);
      --card-b: color-mix(in srgb, #ff8fb3 22%, #08050a 78%);
      --card-a-border: color-mix(in srgb, var(--mara) 50%, transparent);
      --card-b-border: color-mix(in srgb, #ff8fb3 50%, transparent);
      --card: var(--card-a);
      --card2: var(--card-b);
      --border: rgba(255, 64, 129, 0.22);

      /* Texto: prioridade máxima de legibilidade no tema escuro — branco
         quente puro no principal, e os tons secundário/apagado bem mais
         claros do que no leitor (que é pensado para leitura longa e pode
         ser mais suave); aqui o objetivo é o texto saltar à vista em
         toda a app, não ficar cinza-sobre-preto. */
      --t1: #ffffff;
      --t2: #ecd9e1;
      --t3: #c299ac;
    }

    /* Sombra do "quadro" desktop e fundo fora da app — mesmo preto quente
       da Mara, para não sobrar nenhum resquício azul/verde à volta. */
    @media (min-width:700px) {
      html.tema-escuro body {
        background: #0a0608 !important;
      }
    }

    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none;
      user-select: none;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--app-bg-1);
      font-family: var(--font);
      color: var(--t1);
      -webkit-font-smoothing: antialiased;
    }

    /* Decorative layers — real divs to avoid stacking context bugs with html:: pseudo-elements */
    #deco-pattern {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg transform='translate(12,14)' opacity='0.09'%3E%3Cpath d='M2 18 Q8 8 18 10 Q24 12 20 20 Q14 28 2 18z' stroke='%2329c5ea' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10 18 L10 28' stroke='%2329c5ea' stroke-width='1.2' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(100,10)' opacity='0.07'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%237ed321' stroke-width='1.5' fill='none'/%3E%3Cpath d='M8 12 L11 15 L16 9' stroke='%237ed321' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 160px 160px;
      animation: pat-breathe 12s ease-in-out infinite alternate;
    }

    #deco-orbs {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 60% 50% at 10% 10%, rgba(var(--cyan-rgb), 0.18) 0%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 88% 85%, rgba(var(--lime-rgb), 0.14) 0%, transparent 65%),
        radial-gradient(ellipse 40% 35% at 20% 80%, rgba(var(--cyan-rgb), 0.10) 0%, transparent 60%);
      animation: orb-drift 16s ease-in-out infinite alternate;
    }

    #deco-noise {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    }

    @keyframes pat-breathe {
      0% {
        opacity: .8
      }

      100% {
        opacity: 1
      }
    }

    @keyframes orb-drift {
      0% {
        opacity: .7;
        transform: scale(1) translateY(0);
      }

      100% {
        opacity: .9;
        transform: scale(1.04) translateY(-10px);
      }
    }

    /* ═══════════════════════════════════ SISTEMA DE ÍCONES LUZAYADIO (.lz-icon) ═══
       Os SVGs <use href="#icon-...">  substituíram os emojis, mas sem width/height
       o navegador aplica o tamanho padrão de um SVG (300×150px). Ao dimensionar em
       "em", o ícone volta a respeitar o font-size já definido no contentor (o mesmo
       valor que antes controlava o tamanho do emoji) — não é preciso tocar em cada
       contentor individualmente. */
    .lz-icon {
      width: 1em;
      height: 1em;
      display: inline-block;
      vertical-align: -0.14em;
      flex-shrink: 0;
      fill: none;
      color: currentColor;
    }

    /* ═══════════════════════════════════ LOGO SVG ═══ */
    .logo-svg {
      display: block;
      object-fit: contain;
    }

    /* ═══════════════════════════════════ KEYFRAMES ═══ */
    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes spin-rev {
      to {
        transform: rotate(-360deg);
      }
    }

    /* Rotação do anel de progresso enquanto a app carrega de verdade */
    @keyframes spin-ease {

      0%,
      100% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(180deg);
      }
    }

    @keyframes glow-pulse {

      0%,
      100% {
        opacity: .5;
        transform: translate(-50%, -50%) scale(1);
      }

      50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.18);
      }
    }

    @keyframes heartbeat {

      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 16px rgba(var(--cyan-rgb), .4)) drop-shadow(0 0 32px rgba(var(--lime-rgb), .25));
      }

      14% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 28px rgba(var(--cyan-rgb), .7)) drop-shadow(0 0 56px rgba(var(--lime-rgb), .4));
      }

      28% {
        transform: scale(1);
        filter: drop-shadow(0 0 16px rgba(var(--cyan-rgb), .4));
      }

      42% {
        transform: scale(1.06);
        filter: drop-shadow(0 0 22px rgba(var(--cyan-rgb), .6)) drop-shadow(0 0 44px rgba(var(--lime-rgb), .35));
      }

      56% {
        transform: scale(1);
      }
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(28px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes fade-in {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @keyframes dot-idle {

      0%,
      100% {
        opacity: .45
      }

      50% {
        opacity: 1
      }
    }

    @keyframes load-bar {
      to {
        width: 100%
      }
    }

    @keyframes shake {

      0%,
      100% {
        transform: translateX(0)
      }

      25% {
        transform: translateX(-5px)
      }

      75% {
        transform: translateX(5px)
      }
    }

    @keyframes pop-in {
      from {
        opacity: 0;
        transform: scale(.5)
      }

      to {
        opacity: 1;
        transform: scale(1)
      }
    }

    @keyframes slide-up {
      from {
        transform: translateY(100%);
        opacity: 0
      }

      to {
        transform: translateY(0);
        opacity: 1
      }
    }

    @keyframes bounce-h {

      0%,
      100% {
        transform: translateX(0)
      }

      50% {
        transform: translateX(5px)
      }
    }

    @keyframes notif-enter {
      from {
        opacity: 0;
        transform: translateY(16px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes card-shimmer {
      0% {
        background-position: 200% center
      }

      100% {
        background-position: -200% center
      }
    }

    /* ═══════════════════════════════════ DESKTOP FRAME ═══ */
    @media (min-width:700px) {

      html,
      body {
        background: #010509 !important;
      }

      #desktop-frame {
        display: block;
        position: fixed;
        left: 50%;
        top: 0;
        bottom: 0;
        transform: translateX(-50%);
        width: 840px;
        background: var(--app-bg-1);
        z-index: 1;
        box-shadow: 0 0 100px rgba(0, 0, 0, .95), 0 0 0 1px rgba(var(--cyan-rgb), .08);
        pointer-events: none;
      }

      #splash,
      #auth-screen,
      #app-shell,
      #login-screen,
      #register-step1,
      #register-step2,
      #register-step3,
      #diag-screen,
      /* Telas modais em tela cheia (detalhe do curso, upload de PDF,
         confirmação, notificações do curso, leitor de livro, resposta de
         idioma) — sem isto ficavam à largura total do ecrã do desktop em
         vez de dentro da moldura de telemóvel, fazendo a imagem do herói
         (aspect-ratio 16/9 a 100% da largura) ficar enorme e o layout
         desproporcionado em ecrãs largos. */
      #screen-course-detail,
      #screen-pdf-upload,
      #screen-confirm,
      #screen-course-notifs,
      #screen-jrn-subnos,
      #screen-jrn-subno-detalhe,
      #screen-book-reader,
      #screen-idioma-responder,
      #screen-traducao-pagamento,
      #screen-traducao-upload,
      #screen-profile {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 840px !important;
        max-width: 840px !important;
      }

      /* #chat-overlay (conversa privada em ecrã cheio) tem de ficar preso
         à moldura de telemóvel tal como os ecrãs acima — caso contrário
         abriria à largura total da janela do browser. Como este overlay
         entra a deslizar da direita (translateX), o "left/width" simples
         não chega: o translateX de abertura/fecho também precisa de ser
         recalculado à volta do centro da moldura (50%). */
      #chat-overlay {
        left: 50% !important;
        width: 840px !important;
        max-width: 840px !important;
        transform: translateX(-50%) translateX(100%) !important;
      }

      #chat-overlay.open {
        transform: translateX(-50%) translateX(0) !important;
      }
    }

    @media (max-width:699px) {
      #desktop-frame {
        display: none;
      }
    }

    /* ═══════════════════════════════════ SPLASH ═══ */
    #splash {
      position: fixed;
      inset: 0;
      z-index: 600;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--app-bg-1);
      transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform .9s cubic-bezier(.4, 0, .2, 1);
    }

    #splash.exit {
      opacity: 0;
      transform: scale(1.06);
      pointer-events: none;
    }

    .splash-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 360px;
      height: 360px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--cyan-glow) 0%, var(--lime-glow) 50%, transparent 70%);
      filter: blur(70px);
      animation: glow-pulse 3s ease-in-out infinite;
    }

    .splash-logo-wrap {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 0;
      transform: translateY(18px);
      animation: rise .6s cubic-bezier(.22, 1, .36, 1) .1s forwards;
    }

    .orbit-ring {
      position: absolute;
      border-radius: 50%;
      border: 1.5px solid transparent;
      pointer-events: none;
    }

    /* orbit-ring-1 deixou de ser decorativo: é o anel de progresso real do boot */
    .orbit-ring-1 {
      inset: -24px;
      opacity: .9;
      animation: spin-ease 1.4s ease-in-out infinite;
    }

    .progress-ring-svg {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
      overflow: visible;
    }

    .progress-ring-track {
      fill: none;
      stroke: rgba(255, 255, 255, .08);
      stroke-width: 1.5;
    }

    .progress-ring-fill {
      fill: none;
      stroke: url(#lg-progress);
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-dasharray: 251.2;
      /* 2 * PI * 40 */
      stroke-dashoffset: 251.2;
      transition: stroke-dashoffset .35s cubic-bezier(.4, 0, .2, 1);
    }

    .orbit-ring-2 {
      inset: -42px;
      border-bottom-color: var(--lime);
      border-left-color: rgba(var(--lime-rgb), .12);
      animation: spin-rev 16s linear infinite;
      opacity: .32;
    }

    .orbit-ring-3 {
      inset: -60px;
      border-left-color: rgba(var(--cyan-rgb), .08);
      border-top-color: rgba(var(--lime-rgb), .08);
      animation: spin 26s linear infinite;
      opacity: .2;
    }

    .splash-icon {
      width: 84px;
      height: 84px;
      filter: drop-shadow(0 0 14px rgba(var(--cyan-rgb), .3)) drop-shadow(0 0 28px rgba(var(--lime-rgb), .16));
      animation: heartbeat 3.2s ease-in-out .9s infinite;
    }

    .splash-wordmark {
      margin-top: 22px;
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1;
      background: linear-gradient(90deg, var(--cyan), var(--lime));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .splash-tagline {
      margin-top: 9px;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: .22em;
      color: var(--t3);
      text-transform: uppercase;
    }

    .splash-bar-wrap {
      margin-top: 48px;
      width: 110px;
      height: 2px;
      background: rgba(255, 255, 255, .06);
      border-radius: 100px;
      overflow: hidden;
      opacity: 0;
      animation: rise .35s ease .35s forwards;
    }

    .splash-bar {
      height: 100%;
      width: 0;
      border-radius: 100px;
      background: linear-gradient(90deg, var(--cyan), var(--lime));
      transition: width .35s cubic-bezier(.4, 0, .2, 1);
    }

    /* ═══════════════════════════════════ AUTH SCREEN ═══ */
    #auth-screen {
      position: fixed;
      inset: 0;
      z-index: 500;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: calc(var(--safe-top) + 60px) 28px calc(var(--safe-bot) + 48px);
      background: var(--app-bg-1);
      opacity: 0;
      transition: opacity .6s ease;
    }

    #auth-screen.visible {
      opacity: 1;
    }

    #auth-screen.slide-left {
      animation: .5s slide-out-left var(--trans-main) forwards;
    }

    @keyframes slide-out-left {
      from {
        opacity: 1;
        transform: translateX(0)
      }

      to {
        opacity: 0;
        transform: translateX(-32px)
      }
    }

    .auth-gate {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      justify-content: center;
    }

    .auth-gate-icon {
      width: 96px;
      height: 96px;
      margin-bottom: 28px;
      filter: drop-shadow(0 0 24px rgba(var(--cyan-rgb), .3)) drop-shadow(0 0 48px rgba(var(--lime-rgb), .15));
      animation: heartbeat 3.5s ease-in-out infinite;
    }

    .auth-gate-brand {
      font-size: 36px;
      font-weight: 800;
      letter-spacing: -.04em;
      margin-bottom: 8px;
      background: linear-gradient(90deg, var(--cyan), var(--lime));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .auth-gate-tag {
      font-size: 13px;
      font-weight: 400;
      letter-spacing: .18em;
      color: var(--t3);
      text-transform: uppercase;
      margin-bottom: 0;
    }

    .auth-actions {
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .auth-btn-primary {
      width: 100%;
      padding: 17px;
      border-radius: 18px;
      border: none;
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .28), rgba(var(--lime-rgb), .26));
      border: 1px solid rgba(var(--cyan-rgb), .38);
      box-shadow: 0 4px 24px rgba(var(--cyan-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .16);
      color: var(--t1);
      font-size: 17px;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: all .2s;
    }

    .auth-btn-primary:active {
      transform: scale(.97);
      opacity: .88;
    }

    .auth-btn-ghost {
      width: 100%;
      padding: 15px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .04);
      color: var(--t2);
      font-size: 16px;
      font-weight: 600;
      font-family: var(--font);
      cursor: pointer;
      transition: all .2s;
    }

    .auth-btn-ghost:active {
      background: rgba(255, 255, 255, .09);
      transform: scale(.97);
    }

    /* Login form */
    #login-screen {
      position: fixed;
      inset: 0;
      z-index: 510;
      display: none;
      flex-direction: column;
      align-items: center;
      padding: calc(var(--safe-top) + 20px) 28px calc(var(--safe-bot) + 40px);
      background: var(--app-bg-1);
      opacity: 0;
      transition: opacity .5s ease;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      overscroll-behavior-y: contain;
      perspective: 1000px;
    }

    #login-screen::-webkit-scrollbar {
      display: none;
    }

    #login-screen.visible {
      opacity: 1;
    }

    .login-back {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      flex-shrink: 0;
      background: rgba(var(--cyan-rgb), .08);
      border: 1px solid rgba(var(--cyan-rgb), .22);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      align-self: flex-start;
      margin-bottom: 36px;
      transition: background .15s, transform .15s;
    }

    .login-back:active {
      background: rgba(var(--cyan-rgb), .18);
      transform: scale(.9);
    }

    .login-back svg {
      width: 16px;
      height: 16px;
      stroke: var(--t2);
      fill: none;
    }

    .login-form {
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .login-icon {
      width: 72px;
      height: 72px;
      margin-bottom: 20px;
      filter: drop-shadow(0 0 16px rgba(var(--cyan-rgb), .3));
    }

    .login-title {
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--t1);
      margin-bottom: 6px;
    }

    .login-sub {
      font-size: 14px;
      color: var(--t3);
      margin-bottom: 36px;
      text-align: center;
      line-height: 1.55;
    }

    .field-wrap {
      width: 100%;
      margin-bottom: 16px;
    }

    .field-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 8px;
      display: block;
    }

    .field-input {
      width: 100%;
      background: rgba(255, 255, 255, .05);
      border: 1.5px solid rgba(var(--cyan-rgb), .16);
      border-radius: 16px;
      padding: 15px 18px;
      font-size: 16px;
      color: var(--t1);
      font-family: var(--font);
      outline: none;
      caret-color: var(--cyan);
      transition: border-color .2s, box-shadow .2s;
      -webkit-user-select: text;
      user-select: text;
    }

    .field-input::placeholder {
      color: var(--t3);
    }

    .field-input:focus {
      border-color: rgba(var(--cyan-rgb), .5);
      box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .10);
    }

    .field-input.err {
      border-color: rgba(248, 113, 113, .5);
      animation: shake .4s ease;
    }

    .login-submit {
      width: 100%;
      margin-top: 8px;
      padding: 16px;
      border-radius: 16px;
      border: none;
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .30), rgba(var(--lime-rgb), .28));
      border: 1px solid rgba(var(--cyan-rgb), .40);
      box-shadow: 0 4px 20px rgba(var(--cyan-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .14);
      color: var(--t1);
      font-size: 16px;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: all .2s;
    }

    .login-submit:active {
      transform: scale(.97);
      opacity: .88;
    }

    /* ═══════════════════════════════════ APP SHELL ═══ */
    #app-shell {
      position: fixed;
      inset: 0;
      z-index: 400;
      display: none;
      flex-direction: column;
      opacity: 0;
      transition: opacity .7s ease;
      overflow: hidden;
    }

    #app-shell.visible {
      opacity: 1;
    }

    /* ─── TOP BAR ─── */
    #topbar {
      position: relative;
      z-index: 100;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: calc(var(--safe-top) + 14px) 20px 14px;
      background: rgba(var(--cyan-rgb), .06);
      border-bottom: 1px solid rgba(var(--cyan-rgb), .18);
      box-shadow: 0 4px 24px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(var(--cyan-rgb), .15);
      min-height: 60px;
    }

    .tb-logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .tb-logo-icon {
      width: 32px;
      height: 32px;
    }

    .tb-logo-text {
      font-size: 17.5px;
      font-weight: 800;
      letter-spacing: -.02em;
      background: linear-gradient(90deg, var(--cyan), var(--lime));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .tb-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .tb-notif-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 8px rgba(var(--cyan-rgb), .7);
      animation: dot-idle 2s ease-in-out infinite;
    }

    .tb-avatar {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 800;
      color: #0b0f14;
      box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 0 16px rgba(var(--cyan-rgb), .3);
      cursor: pointer;
      position: relative;
      /* overflow removido — o dropdown precisa de sair para fora */
    }

    .tb-avatar img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
      /* o arredondamento fica na img, não no pai */
      overflow: hidden;
      /* a img em si já recorta a foto */
    }

    /* Avatar dropdown */
    #avatar-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      width: 232px;
      background: var(--card-a);
      border: 1.5px solid var(--card-a-border);
      border-radius: 18px;
      box-shadow: var(--card-shadow), 0 20px 50px rgba(0, 0, 0, .55);
      overflow: hidden;
      z-index: 200;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px) scale(.97);
      transform-origin: top right;
      transition: opacity .25s var(--trans-main), transform .25s var(--trans-main);
    }

    #avatar-dropdown.open {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0) scale(1);
    }

    /* Toque artístico: o mesmo brilho ambiente de canto dos outros
       cartões da app, mais o véu de vidro no topo. */
    #avatar-dropdown::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, rgba(255, 255, 255, .07) 0%, transparent 40%);
      pointer-events: none;
      z-index: 0;
    }

    #avatar-dropdown::after {
      content: '';
      position: absolute;
      top: -40%;
      left: -20%;
      width: 75%;
      height: 75%;
      background: radial-gradient(circle, rgba(var(--cyan-rgb), .20), transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    #avatar-dropdown > * {
      position: relative;
      z-index: 1;
    }

    .dd-header {
      padding: 17px 18px 15px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .dd-username {
      font-size: 16px;
      font-weight: 700;
      color: var(--t1);
      letter-spacing: -.03em;
    }

    .dd-usertag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--cyan);
      margin-top: 6px;
    }

    .dd-usertag::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 5px rgba(var(--cyan-rgb), .7);
      flex-shrink: 0;
    }

    .dd-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 18px;
      cursor: pointer;
      transition: background .15s;
      font-size: 14.5px;
      font-weight: 600;
      letter-spacing: -.01em;
      color: var(--t2);
    }

    .dd-item:last-child {
      border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .dd-item.dd-logout {
      color: rgba(248, 113, 113, .9);
      border-top: 1px solid rgba(248, 113, 113, .16) !important;
    }

    .dd-item.dd-logout .dd-item-icon {
      background: rgba(248, 113, 113, .1);
      border-color: rgba(248, 113, 113, .22);
    }

    .dd-item.dd-logout:active {
      background: rgba(248, 113, 113, .12);
    }

    .dd-item:active {
      background: rgba(var(--cyan-rgb), .12);
    }

    @media (hover: hover) {
      .dd-item:hover {
        background: rgba(var(--cyan-rgb), .08);
        color: var(--t1);
      }
      .dd-item.dd-logout:hover {
        background: rgba(248, 113, 113, .1);
        color: #f87171;
      }
    }

    .dd-item-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      flex-shrink: 0;
      background: rgba(var(--cyan-rgb), .1);
      border: 1px solid rgba(var(--cyan-rgb), .22);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: transform .18s var(--trans-main, ease);
    }

    .dd-item:active .dd-item-icon {
      transform: scale(.9);
    }

    /* ─── item "Tema escuro" no menu do avatar: label + interruptor ─── */
    .dd-item.dd-item-tema {
      justify-content: space-between;
    }

    .dd-item-tema-label {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .dd-toggle-switch {
      width: 38px;
      height: 22px;
      border-radius: 100px;
      background: rgba(0, 0, 0, .3);
      border: 1px solid rgba(255, 255, 255, .16);
      position: relative;
      flex-shrink: 0;
      transition: background .2s, border-color .2s, box-shadow .2s;
    }

    .dd-toggle-switch::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #cfd8e3;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
      transition: transform .22s var(--trans-main), background .2s;
    }

    .dd-toggle-switch.on {
      background: rgba(var(--lime-rgb), .28);
      border-color: rgba(var(--lime-rgb), .6);
      box-shadow: 0 0 12px -2px rgba(var(--lime-rgb), .5);
    }

    .dd-toggle-switch.on::after {
      transform: translateX(16px);
      background: var(--lime);
    }

    /* ─── PAGES VIEWPORT ─── */
    #pages-viewport {
      flex: 1;
      overflow: hidden;
      position: relative;
      perspective: 1700px;
    }

    /* ─── PAGE WRAPPER (horizontal scroll container) ─── */
    #pages-track {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      display: flex;
      transition: transform .55s var(--trans-main);
      will-change: transform;
      transform-style: preserve-3d;
    }

    .page {
      flex-shrink: 0;
      width: 100vw;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      overscroll-behavior-y: contain;
      perspective: 1200px;
      padding: 0 0 calc(var(--safe-bot) + 90px);
      position: relative;
      transform-origin: center bottom;
      backface-visibility: hidden;
    }

    /* Transição artística entre telas: a tela que entra parece estar
       "virada" e levanta suavemente até encaixar; a que sai inclina-se
       para o lado oposto e desce/escurece ligeiramente. */
    @keyframes page-lift-in-next {
      0% {
        transform: translateY(30px) rotateX(-9deg) scale(.96);
        filter: brightness(.76);
        box-shadow: 0 45px 80px rgba(0, 0, 0, .55);
      }

      55% {
        transform: translateY(-6px) rotateX(2deg) scale(1.012);
        filter: brightness(1.03);
      }

      100% {
        transform: translateY(0) rotateX(0) scale(1);
        filter: brightness(1);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      }
    }

    @keyframes page-lift-out-next {
      0% {
        transform: translateY(0) rotateX(0) scale(1);
        filter: brightness(1);
      }

      100% {
        transform: translateY(-20px) rotateX(7deg) scale(.965);
        filter: brightness(.74);
      }
    }

    @keyframes page-lift-in-prev {
      0% {
        transform: translateY(30px) rotateX(9deg) scale(.96);
        filter: brightness(.76);
        box-shadow: 0 45px 80px rgba(0, 0, 0, .55);
      }

      55% {
        transform: translateY(-6px) rotateX(-2deg) scale(1.012);
        filter: brightness(1.03);
      }

      100% {
        transform: translateY(0) rotateX(0) scale(1);
        filter: brightness(1);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      }
    }

    @keyframes page-lift-out-prev {
      0% {
        transform: translateY(0) rotateX(0) scale(1);
        filter: brightness(1);
      }

      100% {
        transform: translateY(-20px) rotateX(-7deg) scale(.965);
        filter: brightness(.74);
      }
    }

    .page-lift-in-next {
      animation: page-lift-in-next .10s cubic-bezier(.22, 1, .36, 1) both;
      z-index: 3;
    }

    .page-lift-out-next {
      animation: page-lift-out-next .10s cubic-bezier(.22, 1, .36, 1) both;
      z-index: 2;
    }

    .page-lift-in-prev {
      animation: page-lift-in-prev .6s cubic-bezier(.22, 1, .36, 1) both;
      z-index: 3;
    }

    .page-lift-out-prev {
      animation: page-lift-out-prev .6s cubic-bezier(.22, 1, .36, 1) both;
      z-index: 2;
    }

    .page::-webkit-scrollbar {
      display: none;
    }

    /* Desktop page width */
    @media (min-width:700px) {
      .page {
        width: 840px;
      }
    }

    /* ─── BOTTOM NAV ───────────────────────────────────────────────────
       Reskinada para a identidade ABBA: barra segmentada em vidro,
       igual em espírito ao .commerce-tabbar/.commerce-tab da ABBA
       Comércio — item ativo vira uma pastilha cheia (borda + fundo
       ciano translúcido) em vez do sublinhado antigo. Estrutura HTML
       (.nav-item > .nav-num/.nav-label/.nav-indicator) não muda. ─── */
    #bottom-nav {
      position: relative;
      z-index: 100;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 14px calc(var(--safe-bot) + 14px);
      background: linear-gradient(to top, rgba(5, 8, 16, .92) 0%, rgba(5, 8, 16, .60) 60%, transparent 100%);
      gap: 6px;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 9px 18px;
      margin: 0 3px;
      border: 1px solid transparent;
      border-radius: 14px;
      cursor: pointer;
      transition: background .25s var(--trans-main), border-color .25s var(--trans-main), transform .2s var(--trans-main);
      position: relative;
      min-width: 60px;
    }

    .nav-item.active {
      border-color: rgba(var(--cyan-rgb), .34);
      background: rgba(var(--cyan-rgb), .1);
      box-shadow: 0 5px 20px rgba(0, 0, 0, .14);
    }

    .nav-item:active {
      transform: scale(.93);
    }

    .nav-num {
      font-size: 18.5px;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--t3);
      transition: color .3s, text-shadow .3s;
      line-height: 1;
    }

    .nav-item.active .nav-num {
      color: var(--cyan);
      text-shadow: 0 0 16px rgba(var(--cyan-rgb), .5);
    }

    .nav-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--t3);
      transition: color .3s;
    }

    .nav-item.active .nav-label {
      color: var(--t1);
    }

    /* Sublinhado antigo — substituído pela pastilha (border+background
       acima). Mantido no DOM só por compatibilidade, sem exibir. */
    .nav-indicator {
      display: none;
    }

    /* Desktop arrow hint */
    #desktop-arrow-hint {
      display: none;
    }

    @media (min-width:700px) {
      #desktop-arrow-hint {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        right: calc(50% - 215px - 60px);
        top: 50%;
        transform: translateY(-50%);
        z-index: 300;
        opacity: .5;
        cursor: pointer;
        transition: opacity .2s;
      }

      #desktop-arrow-hint:hover {
        opacity: .85;
      }

      #desktop-arrow-hint svg {
        animation: bounce-h 1.8s ease-in-out infinite;
      }

      #desktop-arrow-hint-label {
        font-size: 11px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--t3);
        writing-mode: vertical-rl;
      }

      #desktop-arrow-hint-left {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        left: calc(50% - 215px - 60px);
        top: 50%;
        transform: translateY(-50%) rotate(180deg);
        z-index: 300;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s;
      }

      #desktop-arrow-hint-left.show {
        opacity: .5;
        pointer-events: all;
      }
    }

    /* ═══════════════════════════════════ PAGE 1 — HOME ═══ */
    #page-home {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .home-glow {
      position: absolute;
      top: 42%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--cyan-glow) 0%, var(--lime-glow) 50%, transparent 70%);
      filter: blur(60px);
      animation: glow-pulse 4s ease-in-out infinite;
      pointer-events: none;
    }

    .home-logo-icon {
      width: 108px;
      height: 108px;
      position: relative;
      z-index: 2;
      animation: heartbeat 3.2s ease-in-out infinite;
    }

    .home-logo-name {
      margin-top: 20px;
      position: relative;
      z-index: 2;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--t3);
    }

    .home-swipe-hint {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 5;
      opacity: .55;
    }

    .home-swipe-dots {
      display: none;
    }

    .home-swipe-dot {
      display: none;
    }

    .home-swipe-text {
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--t3);
      white-space: nowrap;
    }

    /* Mobile swipe arrows */
    @media (max-width:699px) {
      .home-mobile-arrow {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        opacity: .5;
        z-index: 5;
      }

      .mobile-arrow-icon {
        animation: bounce-h 1.8s ease-in-out infinite;
      }

      .mobile-arrow-text {
        font-size: 10px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--t3);
        writing-mode: vertical-rl;
      }
    }

    @media (min-width:700px) {
      .home-mobile-arrow {
        display: none;
      }
    }

    /* ═══════════════════════════════════ PAGE 2 — NOTIFICAÇÕES ═══ */
    .page-header {
      padding: 24px 20px 16px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }

    .page-title {
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--t1);
    }

    .page-sub {
      font-size: 13px;
      color: var(--t3);
      margin-top: 2px;
    }

    .page-header-action {
      font-size: 12px;
      font-weight: 600;
      color: var(--cyan);
      cursor: pointer;
      letter-spacing: .04em;
    }

    .notif-list {
      padding: 0 clamp(14px, 5vw, 24px);
      display: flex;
      flex-direction: column;
      gap: clamp(10px, 3vw, 16px);
    }

    /* ── Notif cards do curso ── */
    .notif-card {
      border-radius: 18px;
      padding: 18px 18px 16px;
      cursor: pointer;
      position: relative;
      border: 1.5px solid var(--card-a-border);
      background: var(--card-a);
      box-shadow: var(--card-shadow);
      margin-bottom: clamp(10px, 3vw, 16px); /* reforço: espaçamento garantido mesmo sem suporte a gap */
      transition: background .18s, transform .15s, box-shadow .15s;
      animation: notif-enter .4s cubic-bezier(.22, 1, .36, 1) both;
    }

    .notif-card:active {
      transform: scale(.99);
    }

    /* variantes de cor — alternância sólida entre ciano e lima, a
       identidade da Luzayadio, em vez do antigo brilho translúcido */
    .notif-card.nc-a {
      border-color: var(--card-a-border);
      background: var(--card-a);
    }

    .notif-card.nc-b {
      border-color: var(--card-b-border);
      background: var(--card-b);
    }

    .notif-card.nc-hero {
      border-color: var(--card-a-border);
      background: var(--card-a);
      box-shadow: var(--card-shadow), 0 8px 22px rgba(var(--cyan-rgb), .18);
    }

    .notif-card.nc-wide {
      border-color: var(--card-b-border);
      background: var(--card-b);
    }

    .notif-card.nc-c {
      border-color: var(--card-a-border);
      background: var(--card-a);
    }

    /* ponto de não lida */
    .notif-unread-dot {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 8px rgba(var(--cyan-rgb), .7);
      animation: dot-idle 1.8s ease-in-out infinite;
    }

    /* tag de categoria */
    .notif-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: var(--t3);
      background: rgba(255, 255, 255, .06);
      padding: 4px 10px 4px 8px;
      border-radius: 100px;
      margin-bottom: 10px;
    }

    .nc-a .notif-tag,
    .nc-hero .notif-tag {
      color: var(--cyan);
      background: rgba(var(--cyan-rgb), .12);
    }

    .nc-b .notif-tag,
    .nc-wide .notif-tag {
      color: var(--lime);
      background: rgba(var(--lime-rgb), .12);
    }

    .notif-tag-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
    }

    /* linha de topo do cartão principal: etiqueta + hora lado a lado, para
       a hora deixar de ficar escondida lá em baixo no rodapé */
    .notif-meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }

    .notif-meta-row .notif-tag {
      margin-bottom: 0;
    }

    .notif-meta-row .notif-time {
      flex-shrink: 0;
      white-space: nowrap;
    }

    /* título */
    .notif-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--t1);
      line-height: 1.3;
      margin-bottom: 6px;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    /* corpo */
    .notif-body,
    .notif-body-short,
    .notif-body-full {
      font-size: 14px;
      font-weight: 400;
      color: var(--t2);
      line-height: 1.6;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    /* resumo curto — encolhe/desaparece com transição em vez de um corte
       seco (display:none), quando o card expande (ver expandirNotif em js.js) */
    .notif-body-short {
      max-height: 60px;
      opacity: 1;
      overflow: hidden;
      transition: max-height .28s var(--trans-main), opacity .18s ease, margin .18s ease;
    }

    .notif-body-short.nb-colapsado {
      max-height: 0;
      opacity: 0;
      margin: 0;
    }

    /* corpo completo — entra com "crescimento" suave em vez de aparecer de
       repente. max-height alto e fixo é o truque clássico para animar algo
       de altura variável sem JS a medir pixels. */
    .notif-body-full {
      display: block;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height .5s var(--trans-main), opacity .35s ease .05s, margin-top .3s ease;
    }

    .notif-body-full.nb-expandido {
      max-height: 3000px;
      opacity: 1;
      margin-top: 2px;
    }

    /* ── Parágrafos "vivos" — cada bloco pedagógico que o CCPE já classifica
       internamente (curiosidade, exemplo, pergunta, erro comum, prática —
       ver motors/07-humanizacao.js → categoriaDoBloco) ganha aqui um ícone
       e um leve destaque próprio, para a leitura deixar de parecer um muro
       de texto uniforme. Só as cores já existentes na app (--cyan/--lime). */
    .notif-body-full p {
      margin-bottom: 10px;
    }

    .notif-body-full p:last-child {
      margin-bottom: 0;
    }

    .notif-body-full p[data-kind] {
      border-radius: 12px;
      padding: 10px 13px;
    }

    .notif-body-full p[data-kind]::before {
      font-weight: 700;
      margin-right: 2px;
    }

    /* núcleo — a explicação "normal", sem caixa, só boa tipografia */
    .notif-body-full p[data-kind="nucleo"] {
      color: var(--t1);
      padding: 0;
    }

    /* gancho — curiosidade/analogia/caso real: convida a ler */
    .notif-body-full p[data-kind="gancho"] {
      background: var(--cyan-soft);
      border-left: 3px solid var(--cyan);
      font-style: italic;
      color: var(--t1);
    }

    .notif-body-full p[data-kind="gancho"]::before {
      content: "💡";
      font-style: normal;
    }

    /* exemplo/analogia concreta */
    .notif-body-full p[data-kind="exemplo"] {
      background: rgba(255, 255, 255, .045);
      border-left: 3px solid var(--t3);
      color: var(--t1);
    }

    .notif-body-full p[data-kind="exemplo"]::before {
      content: "🔎";
    }

    /* pergunta / momento de reflexão — convida o aluno a responder mentalmente */
    .notif-body-full p[data-kind="pergunta"] {
      background: var(--lime-soft);
      border-left: 3px solid var(--lime);
      font-weight: 600;
      color: var(--t1);
    }

    .notif-body-full p[data-kind="pergunta"]::before {
      content: "🤔";
    }

    /* erro comum a evitar — destaque neutro, não usa vermelho/laranja de fora
       da paleta, distingue-se pelo ícone + moldura tracejada */
    .notif-body-full p[data-kind="aviso"] {
      background: rgba(255, 255, 255, .05);
      border: 1px dashed rgba(255, 255, 255, .24);
      color: var(--t1);
    }

    .notif-body-full p[data-kind="aviso"]::before {
      content: "⚠️ Erro comum:";
    }

    /* prática/exercício — o momento de ação, destacado como um pequeno CTA */
    .notif-body-full p[data-kind="pratica"] {
      background: linear-gradient(135deg, var(--lime-soft), rgba(var(--lime-rgb), .04));
      border: 1px solid rgba(var(--lime-rgb), .32);
      font-weight: 600;
      color: var(--t1);
    }

    .notif-body-full p[data-kind="pratica"]::before {
      content: "✏️";
    }

    /* rodapé */
    .notif-footer {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, .08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }

    .notif-footer-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    .notif-time {
      font-size: 12px;
      color: var(--t3);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .notif-time-leitura {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      color: var(--t3);
    }

    .notif-time-leitura::before {
      content: "·";
      margin-right: 3px;
    }

    /* botão "Ler mais" */
    .notif-read-more {
      font-size: 12px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 100px;
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .06);
      color: var(--t2);
      cursor: pointer;
      font-family: var(--font);
      transition: background .15s;
    }

    .nc-a .notif-read-more,
    .nc-hero .notif-read-more {
      color: var(--cyan);
      border-color: rgba(var(--cyan-rgb), .28);
      background: rgba(var(--cyan-rgb), .08);
    }

    .nc-b .notif-read-more,
    .nc-wide .notif-read-more {
      color: var(--lime);
      border-color: rgba(var(--lime-rgb), .28);
      background: rgba(var(--lime-rgb), .08);
    }

    .notif-read-more:active {
      opacity: .7;
      transform: scale(.94);
    }

    /* botão de ação */
    .notif-action {
      font-size: 12px;
      font-weight: 600;
      padding: 5px 14px;
      border-radius: 100px;
      border: none;
      cursor: pointer;
      font-family: var(--font);
      transition: opacity .15s;
    }

    .nc-a .notif-action,
    .nc-hero .notif-action {
      color: var(--cyan);
      border: 1px solid rgba(var(--cyan-rgb), .28);
      background: rgba(var(--cyan-rgb), .10);
    }

    .nc-b .notif-action,
    .nc-wide .notif-action {
      color: var(--lime);
      border: 1px solid rgba(var(--lime-rgb), .28);
      background: rgba(var(--lime-rgb), .10);
    }

    .nc-c .notif-action {
      color: var(--t2);
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .07);
    }

    /* ação principal do cartão (ex: "Explorar", "Ver curso") — destaca-se
       das ações secundárias ("Próxima", "Ler mais") independentemente da
       variante de cor do cartão (nc-a/nc-b/nc-c…), por isso repete a
       especificidade ".notif-card .notif-action" para vencer essas regras. */
    .notif-card .notif-action-principal {
      color: var(--cyan);
      border-color: rgba(var(--cyan-rgb), .5);
      background: rgba(var(--cyan-rgb), .18);
    }

    .notif-action:active {
      opacity: .7;
      transform: scale(.93);
    }

    /* botão circular "Ouvir" — ícone de áudio, presente em todos os cards */
    .notif-audio-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      flex: none;
      padding: 0;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      transition: opacity .15s, transform .15s, background .2s;
    }

    .notif-audio-btn .lz-icon {
      width: 14px;
      height: 14px;
    }

    .nc-a .notif-audio-btn,
    .nc-hero .notif-audio-btn {
      color: var(--cyan);
      border: 1px solid rgba(var(--cyan-rgb), .28);
      background: rgba(var(--cyan-rgb), .10);
    }

    .nc-b .notif-audio-btn,
    .nc-wide .notif-audio-btn {
      color: var(--lime);
      border: 1px solid rgba(var(--lime-rgb), .28);
      background: rgba(var(--lime-rgb), .10);
    }

    .nc-c .notif-audio-btn {
      color: var(--t2);
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .07);
    }

    .notif-audio-btn:active {
      opacity: .7;
      transform: scale(.9);
    }

    /* estado "a falar" — anel a pulsar em torno do ícone enquanto lê o
       texto. Genérico (não depende de .notif-audio-btn) para poder ser
       reutilizado noutros botões de áudio, como o do leitor de livros. */
    .na-falando {
      animation: na-pulso 1.1s ease-in-out infinite;
    }

    @keyframes na-pulso {
      0%, 100% { box-shadow: 0 0 0 0 rgba(var(--cyan-rgb), .35); }
      50%      { box-shadow: 0 0 0 5px rgba(var(--cyan-rgb), 0); }
    }

    .nc-b .notif-audio-btn.na-falando,
    .nc-wide .notif-audio-btn.na-falando {
      animation-name: na-pulso-lime;
    }

    @keyframes na-pulso-lime {
      0%, 100% { box-shadow: 0 0 0 0 rgba(var(--lime-rgb), .35); }
      50%      { box-shadow: 0 0 0 5px rgba(var(--lime-rgb), 0); }
    }

    /* ══════════════════════════════════════════════════════════════════
       NOTIFICAÇÕES — pilhas por categoria
       A partir de 10+ notificações (ver NOTIF_STACK_LIMIAR em js.js), a
       lista agrupa-se em pilhas (Cursos/Livros/Alertas/Outros); categorias
       com mais do que um curso/livro diferente ganham um nível extra de
       sub-pilhas. Tudo aqui é conteúdo novo, sem equivalente antigo, por
       isso não há nada para conflituar com o resto da folha de estilos.
       ══════════════════════════════════════════════════════════════════ */

    /* troca suave entre vistas (pilhas ⇄ categoria ⇄ detalhe) */
    .notif-list > * {
      transition: opacity .18s ease, transform .18s ease;
    }

    .notif-list.notif-view-saindo > * {
      opacity: 0;
      transform: scale(.97) translateY(6px);
    }

    /* invisível para o layout — os cartões lá dentro comportam-se como
       filhos directos de .notif-list, herdando o gap/flex já definido */
    .notif-detail-list {
      display: contents;
    }

    /* barra "← Pilhas" ao entrar numa categoria ou num item específico */
    .notif-nav-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 2px 2px 14px;
    }

    .notif-nav-back {
      display: flex;
      align-items: center;
      gap: 4px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .1);
      color: var(--t2);
      font-size: 12.5px;
      font-weight: 600;
      padding: 6px 12px 6px 8px;
      border-radius: 100px;
      cursor: pointer;
      font-family: var(--font);
    }

    .notif-nav-back svg {
      width: 14px;
      height: 14px;
    }

    .notif-nav-back:active {
      background: rgba(255, 255, 255, .08);
      transform: scale(.97);
    }

    .notif-nav-titulo {
      font-size: 13px;
      font-weight: 700;
      color: var(--t2);
      overflow-wrap: break-word;
      word-break: break-word;
    }

    /* grelha de pilhas */
    .notif-stack-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      padding: 4px 2px 12px;
    }

    .notif-stack-grid--sub {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    @keyframes notif-stack-pop {
      from { opacity: 0; transform: translateY(12px) scale(.93); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    .notif-stack {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding: 16px 14px 14px;
      border-radius: 16px;
      text-align: left;
      background: rgba(255, 255, 255, .035);
      border: 1px solid rgba(255, 255, 255, .09);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      animation: notif-stack-pop .5s cubic-bezier(.22, 1, .36, 1) both;
      transition: transform .2s ease, background .2s ease;
      font-family: var(--font);
    }

    .notif-stack:active {
      transform: scale(.97);
    }

    /* efeito de "baralho" — 2 cartas fantasma atrás do cartão principal,
       dão a sensação de pilha física sem precisar de imagens */
    .notif-stack-deck {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .notif-stack-deck span {
      position: absolute;
      inset: 0;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, .07);
      background: rgba(255, 255, 255, .02);
    }

    .notif-stack-deck span:nth-child(1) { transform: translate(4px, 5px) rotate(1.4deg); z-index: -1; }
    .notif-stack-deck span:nth-child(2) { transform: translate(8px, 9px) rotate(2.6deg); z-index: -2; opacity: .7; }
    .notif-stack-deck span:nth-child(3) { transform: translate(11px, 13px) rotate(3.6deg); z-index: -3; opacity: .45; }

    .notif-stack-top,
    .notif-stack-icon,
    .notif-stack-label,
    .notif-stack-count,
    .notif-stack-badge {
      position: relative;
      z-index: 1;
    }

    .notif-stack-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .notif-stack-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(var(--cyan-rgb), .16);
      color: var(--cyan);
    }

    .notif-stack-icon svg {
      width: 18px;
      height: 18px;
    }

    .notif-stack--sub .notif-stack-icon {
      background: rgba(var(--lime-rgb), .16);
      color: var(--lime);
    }

    .notif-stack-badge {
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 100px;
      background: var(--cyan);
      color: #05161c;
      font-size: 10.5px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .notif-stack-label {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--t1);
      margin-top: 4px;
      overflow-wrap: break-word;
      word-break: break-word;
      line-height: 1.3;
    }

    .notif-stack-count {
      font-size: 11.5px;
      color: var(--t3);
    }

    /* Two-column mini notification row */
    .notif-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .notif-mini {
      border-radius: 16px;
      padding: 16px 16px;
      cursor: pointer;
      border: 1px solid rgba(var(--cyan-rgb), .18);
      background: rgba(var(--cyan-rgb), .06);
      position: relative;
      overflow: hidden;
      transition: transform .2s;
    }

    .notif-mini:nth-child(2) {
      border-color: rgba(var(--lime-rgb), .18);
      background: rgba(var(--lime-rgb), .06);
    }

    .notif-mini:active {
      transform: scale(.96);
    }

    .notif-mini-icon {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .notif-mini-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--t1);
      line-height: 1.25;
      margin-bottom: 4px;
    }

    .notif-mini-sub {
      font-size: 12px;
      color: var(--t3);
      line-height: 1.4;
    }

    .notif-mini-dot {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 6px rgba(var(--lime-rgb), .6);
    }

    /* ═══════════════════════════════════ PAGE 3 — CURSOS ═══ */



    /* ═══════════════════════════════════ PAGE 4 — PARTILHA / REPORTE ═══ */
    .report-header {
      padding: 24px 20px 16px;
    }

    /* Rótulo pequeno, maiúsculas, tom ciano — a "assinatura" tipográfica
       profissional da ABBA Comércio, agora também na Partilha/Mensagens. */
    .report-kicker {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--cyan);
      text-transform: uppercase;
      letter-spacing: .14em;
      font-size: 10px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .report-title {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -.045em;
      color: var(--t1);
    }

    .report-sub {
      font-size: 13px;
      color: var(--t2);
      margin-top: 4px;
      line-height: 1.55;
      max-width: 280px;
    }

    /* Mood selector — mini-cards estilo Instagram Reels */
    .mood-row {
      display: flex;
      gap: 8px;
      padding: 0 20px;
      overflow-x: auto;
      padding-bottom: 4px;
    }

    .mood-row::-webkit-scrollbar {
      display: none;
    }

    .mood-btn {
      flex-shrink: 0;
      width: 72px;
      /* tamanho fixo — nunca excede */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 0;
      border-radius: 16px;
      overflow: hidden;
      border: 1.5px solid rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .04);
      cursor: pointer;
      transition: transform .2s, border-color .2s, box-shadow .2s;
      position: relative;
    }

    .mood-btn.sel {
      border-color: rgba(var(--cyan-rgb), .7);
      box-shadow: 0 0 0 2px rgba(var(--cyan-rgb), .35);
    }

    .mood-btn:active {
      transform: scale(.92);
    }

    /* Área da imagem/emoji — altura fixa como os Stories */
    .mood-img-wrap {
      width: 100%;
      height: 80px;
      /* altura fixa — jamais excede */
      overflow: hidden;
      position: relative;
      background: rgba(255, 255, 255, .06);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mood-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
    }

    .mood-emoji {
      font-size: 26px;
      line-height: 1;
      position: absolute;
      /* fallback se não houver imagem */
    }

    /* Quando há imagem, esconde o emoji */
    .mood-img-wrap.has-img .mood-emoji {
      display: none;
    }

    /* Label em baixo */
    .mood-label-bar {
      width: 100%;
      padding: 5px 4px 6px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .06em;
      color: var(--t3);
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      background: rgba(0, 0, 0, .18);
    }

    .mood-btn.sel .mood-label-bar {
      color: var(--cyan);
    }

    /* ══ ESTADOS (HISTÓRICO/STORIES) — reaproveita o layout dos mini-cards,
       mas agora um card por pessoa adicionada, com anel de "por ver" ══ */
    .estado-card {
      border-radius: 18px;
    }

    .estado-avatar-wrap {
      border-radius: 14px;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 700;
      color: var(--t1);
    }

    /* Anel: por ver = destaque em gradiente cyan/mara; visto = cinzento */
    .estado-card.tem-novo {
      border-color: transparent;
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .9), rgba(var(--mara-rgb, 233, 30, 99), .8)) padding-box,
        linear-gradient(135deg, var(--cyan), var(--mara)) border-box;
      border: 2px solid transparent;
    }

    .estado-card.tudo-visto {
      border-color: rgba(255, 255, 255, .14);
    }

    .estado-card.estado-vazio {
      opacity: .55;
    }

    .estado-card-plus {
      position: absolute;
      right: 4px;
      bottom: 22px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--cyan);
      color: #04262b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      border: 2px solid #0b1c1f;
      line-height: 1;
    }

    /* Card "Adicionar amigo" — primeiro item da fila, distinto dos estados */
    .estado-card-add .mood-img-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .05);
      border: 1.5px dashed rgba(255, 255, 255, .28);
      border-radius: 14px;
    }

    /* Cards dinâmicos de histories */
    .estado-card .estado-avatar-wrap img,
    .estado-card .estado-avatar-wrap > span {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .estado-card-identificador {
      width: 100%;
      padding: 0 4px 6px;
      color: var(--t3);
      font-size: 8px;
      line-height: 1.15;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .estado-empty-hint {
      flex: 1;
      min-width: 210px;
      padding: 22px 12px;
      color: var(--t3);
      font-size: 12px;
      text-align: center;
      border: 1px dashed rgba(255,255,255,.16);
      border-radius: 16px;
    }

    /* Modal de amigos e compositor de histories */
    #add-amigo-modal,
    #estado-compose-modal {
      position: fixed;
      inset: 0;
      z-index: var(--z-sheet);
      background: rgba(5, 10, 20, .85);
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s var(--trans-main);
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    #add-amigo-modal.open,
    #estado-compose-modal.open {
      opacity: 1;
      pointer-events: all;
    }

    #add-amigo-modal.open .compose-sheet,
    #estado-compose-modal.open .compose-sheet {
      transform: translateY(0);
    }

    body.modal-aberto {
      overflow: hidden;
    }

    .estado-viewer-slide {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .estado-viewer-loading {
      position: relative;
      z-index: 1;
      color: rgba(255,255,255,.72);
      font-size: 13px;
    }

    /* ══ VISUALIZADOR DE ESTADOS — ecrã cheio, tipo stories ══ */
    #estado-viewer {
      position: fixed;
      inset: 0;
      z-index: var(--z-screen-overlay);
      background: #000;
      display: flex;
      flex-direction: column;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
    }

    #estado-viewer.open {
      opacity: 1;
      pointer-events: all;
    }

    .estado-viewer-barras {
      display: flex;
      gap: 4px;
      padding: 10px 10px 0;
      position: relative;
      z-index: 3;
    }

    .estado-viewer-barra {
      flex: 1;
      height: 3px;
      border-radius: 3px;
      background: rgba(255, 255, 255, .28);
      overflow: hidden;
    }

    .estado-viewer-barra-fill {
      height: 100%;
      width: 0%;
      background: #fff;
      border-radius: 3px;
    }

    .estado-viewer-barra.concluida .estado-viewer-barra-fill {
      width: 100%;
    }

    .estado-viewer-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      position: relative;
      z-index: 3;
    }

    .estado-viewer-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      font-weight: 700;
      font-size: 13px;
      flex-shrink: 0;
    }

    .estado-viewer-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .estado-viewer-nome {
      color: #fff;
      font-size: 13.5px;
      font-weight: 600;
    }

    .estado-viewer-tempo {
      color: rgba(255, 255, 255, .6);
      font-size: 11px;
    }

    .estado-viewer-close {
      margin-left: auto;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
      border: none;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .estado-viewer-delete {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
      border: none;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .estado-viewer-corpo {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .estado-viewer-corpo img,
    .estado-viewer-corpo video {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .estado-viewer-texto-slide {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 28px;
      text-align: center;
      color: #fff;
      font-size: 22px;
      font-weight: 600;
      line-height: 1.4;
    }

    .estado-viewer-legenda {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px 18px 22px;
      background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
      color: #fff;
      font-size: 13.5px;
      z-index: 2;
    }

    .estado-viewer-tap-zone {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 34%;
      z-index: 2;
      cursor: pointer;
    }

    .estado-viewer-tap-prev {
      left: 0;
    }

    .estado-viewer-tap-next {
      right: 0;
    }

    /* Premir e segurar para pausar (texto, imagem ou vídeo) — evita
       seleção de texto e o menu de contexto do "toque longo" ao segurar. */
    .estado-viewer-corpo,
    .estado-viewer-corpo * {
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }

    #estado-viewer.estado-pausado .estado-viewer-corpo img,
    #estado-viewer.estado-pausado .estado-viewer-corpo video,
    #estado-viewer.estado-pausado .estado-viewer-texto-slide {
      filter: brightness(.82);
      transition: filter .15s ease;
    }

    #estado-viewer.estado-pausado .estado-viewer-header,
    #estado-viewer.estado-pausado .estado-viewer-legenda {
      opacity: .55;
      transition: opacity .15s ease;
    }

    /* ══ SHEET: publicar novo estado ══ */
    .estado-compose-tipos {
      display: flex;
      gap: 8px;
      margin: 4px 0 14px;
    }

    .estado-compose-preview {
      width: 100%;
      max-height: 260px;
      border-radius: 14px;
      overflow: hidden;
      display: none;
      background: rgba(255, 255, 255, .04);
      margin-bottom: 12px;
      align-items: center;
      justify-content: center;
    }

    .estado-compose-preview img,
    .estado-compose-preview video {
      width: 100%;
      max-height: 260px;
      object-fit: contain;
    }

    .estado-compose-cores {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .estado-compose-cor {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid transparent;
    }

    .estado-compose-cor.sel {
      border-color: #fff;
    }

    /* Pré-visualização ao vivo da cor de fundo escolhida para um estado de
       texto — usa as mesmas classes (.estado-preview/.estado-preview-texto/
       .estado-preview-shade) do cartão real do estado no feed, para que o
       que se vê aqui seja exactamente como o estado publicado vai ficar. */
    .estado-compose-color-preview {
      position: relative;
      width: 100%;
      height: 180px;
      border-radius: 14px;
      overflow: hidden;
      display: none;
      margin-bottom: 12px;
    }

    /* ══ MODAL: adicionar amigo ══ */
    .amigo-lista {
      max-height: 46vh;
      overflow-y: auto;
      margin-top: 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .amigo-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 6px;
      border-radius: 12px;
    }

    .amigo-item-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      background: rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 13px;
      color: var(--t1);
    }

    .amigo-item-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .amigo-item-info {
      flex: 1;
      min-width: 0;
    }

    .amigo-item-nome {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--t1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .amigo-item-id {
      font-size: 11px;
      color: var(--t3);
    }

    .amigo-item-btn {
      font-size: 11.5px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid rgba(var(--cyan-rgb), .6);
      background: rgba(var(--cyan-rgb), .12);
      color: var(--cyan);
      cursor: pointer;
      flex-shrink: 0;
    }

    .amigo-item-btn.ja-adicionado {
      border-color: rgba(255, 255, 255, .18);
      background: transparent;
      color: var(--t3);
      cursor: default;
    }

    .amigo-item-msg-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgba(var(--cyan-rgb), .35);
      background: rgba(var(--cyan-rgb), .1);
      color: var(--cyan);
      cursor: pointer;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .amigo-item-msg-btn svg {
      width: 15px;
      height: 15px;
    }

    .amigo-item-msg-btn:disabled {
      opacity: .5;
      cursor: default;
    }

    /* Post cards */
    .posts-list {
      padding: 0 clamp(14px, 5vw, 24px);
      display: flex;
      flex-direction: column;
      gap: clamp(12px, 3.5vw, 18px);
      margin-top: 20px;
    }

    .post-card {
      border-radius: 18px;
      padding: 18px 20px;
      background: var(--card-a);
      border: 1.5px solid var(--card-a-border);
      box-shadow: var(--card-shadow);
      margin-bottom: clamp(12px, 3.5vw, 18px); /* reforço: espaçamento garantido mesmo sem suporte a gap */
      cursor: pointer;
      transition: transform .2s, box-shadow .2s;
      position: relative;
      overflow: hidden;
    }

    /* Alternância Luzayadio: publicação ciano, publicação lima... */
    .post-card:nth-child(even) {
      background: var(--card-b);
      border-color: var(--card-b-border);
    }

    .post-card:active {
      transform: scale(.985);
    }

    .post-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(120deg, rgba(255, 255, 255, .07) 0%, transparent 50%);
      pointer-events: none;
    }

    /* Toque artístico: brilho ambiente da cor do cartão a espreitar de um
       canto — a mesma linguagem já usada nos cartões de conversa. */
    .post-card::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -25%;
      width: 70%;
      height: 200%;
      background: radial-gradient(circle, rgba(var(--cyan-rgb), .14), transparent 70%);
      pointer-events: none;
    }

    .post-card:nth-child(even)::after {
      background: radial-gradient(circle, rgba(var(--lime-rgb), .14), transparent 70%);
    }

    .post-card-top,
    .post-body,
    .post-media,
    .post-reactions,
    .post-actions,
    .post-replies-wrap {
      position: relative;
      z-index: 1;
    }

    .post-card-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .post-avatar {
      width: 40px;
      height: 40px;
      border-radius: 13px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 800;
      color: #0b0f14;
      box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 16px -4px rgba(0, 0, 0, .4);
    }

    .av-a {
      background: linear-gradient(135deg, var(--cyan), var(--lime));
    }

    .av-b {
      background: linear-gradient(135deg, var(--lime), #29c5ea);
    }

    .av-c {
      background: linear-gradient(135deg, #faa032, #7ed321);
    }

    .av-d {
      background: linear-gradient(135deg, #29c5ea, #faa032);
    }

    .post-user-name {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -.025em;
      color: var(--t1);
    }

    .post-user-meta {
      font-size: 12px;
      color: var(--t3);
      margin-top: 1px;
    }

    .post-body {
      font-size: 15px;
      font-weight: 300;
      color: var(--t2);
      line-height: 1.65;
      margin-bottom: 14px;
      position: relative;
      z-index: 1;
    }

    .post-body strong {
      color: var(--t1);
      font-weight: 500;
    }

    .post-reactions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .reaction-pill {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 11px;
      border-radius: 100px;
      background: rgba(0, 0, 0, .18);
      border: 1px solid rgba(255, 255, 255, .12);
      font-size: 12px;
      font-weight: 600;
      color: var(--t2);
      cursor: pointer;
      transition: all .18s;
      position: relative;
      z-index: 1;
    }

    .reaction-pill:active {
      transform: scale(.9);
      background: rgba(var(--cyan-rgb), .18);
      border-color: rgba(var(--cyan-rgb), .4);
      color: var(--t1);
    }

    .reaction-emoji {
      font-size: 13px;
    }

    /* Compose button */
    .compose-fab {
      position: sticky;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 24px;
      border-radius: 100px;
      background: var(--lime);
      color: #06120c;
      border: none;
      box-shadow: 0 10px 28px rgba(126, 211, 33, .32);
      cursor: pointer;
      transition: all .22s;
      z-index: 10;
      width: fit-content;
    }

    .compose-fab:active {
      transform: translateX(-50%) scale(.96);
    }

    .compose-fab-text {
      font-size: 13.5px;
      font-weight: 700;
      letter-spacing: -.01em;
      color: inherit;
    }

    .compose-fab-icon {
      font-size: 16px;
    }

    /* Botões flutuantes do separador Mensagens: "Nova conversa" (acção
       principal) e "Chat Aleatório" (secundária), ambos circulares, só com
       ícone, ancorados ao canto inferior direito — empilhados na vertical
       em vez de uma pílula centrada com texto. */
    .compose-fab-row {
      position: sticky;
      bottom: 20px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 12px;
      padding-right: 16px;
      z-index: 10;
      pointer-events: none;
    }

    .compose-fab-row > * {
      pointer-events: all;
    }

    /* Vidro fosco / "espelho": sem fundo sólido — o ícone flutua dentro de
       um círculo translúcido com desfoque, brilho interior e um reflexo
       a percorrer o vidro, em vez de uma pílula preenchida a cor lisa. */
    .compose-fab-row .compose-fab {
      position: static;
      width: 58px;
      height: 58px;
      padding: 0;
      border-radius: 50%;
      transform: none;
      flex-shrink: 0;
      overflow: hidden;
      /* Sem isto o único filho (o ícone) fica encostado ao início do eixo
         principal do flex em vez de centrado no círculo — era o motivo do
         ícone "Nova conversa" aparecer desalinhado para a esquerda. */
      justify-content: center;
      background: linear-gradient(155deg, rgba(var(--lime-rgb), .24), rgba(var(--lime-rgb), .05) 55%, rgba(255, 255, 255, .03));
      border: 1.5px solid rgba(var(--lime-rgb), .4);
      box-shadow:
        0 10px 26px rgba(0, 0, 0, .4),
        inset 0 1px 1px rgba(255, 255, 255, .22),
        inset 0 -8px 16px rgba(var(--lime-rgb), .12);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      color: var(--lime);
    }

    .compose-fab-row .compose-fab::before {
      content: '';
      position: absolute;
      inset: -45%;
      background: conic-gradient(from 210deg, transparent 0deg, rgba(255, 255, 255, .18) 34deg, transparent 80deg);
      animation: lzEspelhoReflexo 5.5s linear infinite;
      pointer-events: none;
    }

    .compose-fab-row .compose-fab-text {
      display: none;
    }

    .compose-fab-row .compose-fab-icon {
      font-size: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 0 6px rgba(var(--lime-rgb), .55));
    }


    .compose-fab-row .compose-fab:active {
      transform: scale(.9);
      background: linear-gradient(155deg, rgba(var(--lime-rgb), .34), rgba(var(--lime-rgb), .08) 55%, rgba(255, 255, 255, .04));
    }

    @media (hover: hover) {
      .compose-fab-row .compose-fab:hover {
        box-shadow:
          0 14px 32px rgba(0, 0, 0, .45),
          inset 0 1px 1px rgba(255, 255, 255, .28),
          inset 0 -8px 18px rgba(var(--lime-rgb), .18),
          0 0 0 5px rgba(var(--lime-rgb), .08);
      }
    }

    .chat-aleatorio-fab {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      flex-shrink: 0;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      background: linear-gradient(155deg, rgba(var(--cyan-rgb), .24), rgba(var(--cyan-rgb), .05) 55%, rgba(255, 255, 255, .03));
      border: 1.5px solid rgba(var(--cyan-rgb), .4);
      box-shadow:
        0 10px 24px rgba(0, 0, 0, .4),
        inset 0 1px 1px rgba(255, 255, 255, .2),
        inset 0 -8px 16px rgba(var(--cyan-rgb), .12);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      color: var(--cyan);
      cursor: pointer;
      transition: all .22s;
      padding: 0;
    }

    .chat-aleatorio-fab::before {
      content: '';
      position: absolute;
      inset: -45%;
      background: conic-gradient(from 30deg, transparent 0deg, rgba(255, 255, 255, .16) 34deg, transparent 80deg);
      animation: lzEspelhoReflexo 5.5s linear infinite reverse;
      pointer-events: none;
    }

    .chat-aleatorio-fab .lz-icon {
      width: 24px;
      height: 24px;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 0 6px rgba(var(--cyan-rgb), .6));
    }

    .chat-aleatorio-fab:active {
      transform: scale(.9);
      background: linear-gradient(155deg, rgba(var(--cyan-rgb), .34), rgba(var(--cyan-rgb), .08) 55%, rgba(255, 255, 255, .04));
    }

    @media (hover: hover) {
      .chat-aleatorio-fab:hover {
        box-shadow:
          0 14px 30px rgba(0, 0, 0, .45),
          inset 0 1px 1px rgba(255, 255, 255, .26),
          inset 0 -8px 18px rgba(var(--cyan-rgb), .2),
          0 0 0 5px rgba(var(--cyan-rgb), .08);
      }
    }

    @keyframes lzEspelhoReflexo {
      to { transform: rotate(360deg); }
    }

    /* ═══════════════════════════════════ MENSAGENS PRIVADAS ═══ */

    /* Separador Partilha / Mensagens */
    .share-tabs {
      display: flex;
      gap: 6px;
      padding: 5px;
      margin: 4px 16px 14px;
      background: rgba(0, 0, 0, .28);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 15px;
    }

    .share-tab {
      flex: 1;
      text-align: center;
      padding: 10px 10px;
      border-radius: 10px;
      border: 1px solid transparent;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: -.01em;
      color: var(--t2);
      cursor: pointer;
      transition: all .2s;
    }

    .share-tab.sel {
      background: rgba(var(--cyan-rgb), .1);
      border-color: rgba(var(--cyan-rgb), .34);
      color: var(--t1);
      box-shadow: 0 5px 20px rgba(0, 0, 0, .14);
    }

    .share-tab:active {
      transform: scale(.96);
    }

    /* Barra do identificador pessoal */
    .identificador-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 16px 14px;
      padding: 13px 15px;
      border: 1.5px solid var(--card-a-border);
      border-radius: 14px;
      background: var(--card-a);
      box-shadow: var(--card-shadow);
    }

    .identificador-bar-label {
      font-size: 9px;
      color: var(--cyan);
      text-transform: uppercase;
      letter-spacing: .12em;
      font-weight: 700;
    }

    .identificador-bar-btn {
      font-size: 10px;
      font-weight: 700;
      font-family: var(--font);
      padding: 8px 12px;
      border-radius: 9px;
      border: 1px solid rgba(var(--cyan-rgb), .25);
      background: rgba(var(--cyan-rgb), .07);
      color: var(--cyan);
      cursor: pointer;
      transition: all .2s;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .identificador-bar-btn:active {
      transform: scale(.94);
    }

    /* Lista de conversas */
    .chat-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0 16px 16px;
    }

    .chat-item {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 13px 15px;
      border-radius: 17px;
      background: var(--card-a);
      border: 1.5px solid var(--card-a-border);
      box-shadow: var(--card-shadow);
      margin-bottom: 9px; /* reforço: espaçamento garantido mesmo sem suporte a gap */
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform .18s, box-shadow .18s;
    }

    /* Toque artístico: um brilho ambiente subtil, da mesma família de cor
       do cartão, a espreitar de um canto — dá profundidade sem tirar
       legibilidade ao texto. */
    .chat-item::before {
      content: '';
      position: absolute;
      top: -40%;
      right: -20%;
      width: 65%;
      height: 180%;
      background: radial-gradient(circle, rgba(var(--cyan-rgb), .16), transparent 70%);
      pointer-events: none;
    }

    .chat-item:nth-child(even)::before {
      background: radial-gradient(circle, rgba(var(--lime-rgb), .16), transparent 70%);
    }

    .chat-item > * {
      position: relative;
      z-index: 1;
    }

    /* Alternância Luzayadio: conversa ciano, conversa lima... */
    .chat-item:nth-child(even) {
      background: var(--card-b);
      border-color: var(--card-b-border);
    }

    .chat-item:active {
      transform: scale(.985);
    }

    .chat-item-avatar {
      width: 46px;
      height: 46px;
      border-radius: 15px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 800;
      color: #0b0f14;
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 16px -4px rgba(var(--cyan-rgb), .45);
      overflow: hidden;
      position: relative;
    }

    .chat-item-avatar img {
      border-radius: inherit;
    }

    .chat-item-body {
      flex: 1;
      min-width: 0;
    }

    .chat-item-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }

    .chat-item-nome {
      font-size: 14.5px;
      font-weight: 700;
      letter-spacing: -.025em;
      color: var(--t1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-item-hora {
      font-size: 11px;
      color: var(--t3);
      flex-shrink: 0;
    }

    .chat-item-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 2px;
    }

    .chat-item-preview {
      font-size: 12.5px;
      color: var(--t3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-unread-badge {
      flex-shrink: 0;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 100px;
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      color: #0b0f14;
      font-size: 10.5px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Bolinha de não lidas no ícone "Partilha" da barra inferior */
    .nav-num {
      position: relative;
    }

    .nav-dot {
      position: absolute;
      top: -3px;
      right: -7px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--mara);
      box-shadow: 0 0 8px rgba(255, 64, 129, .7);
    }

    /* Modais de mensagens: identificador, nova conversa, adicionar membro
       — reaproveitam .compose-sheet, só precisam do wrapper fixo/backdrop. */
    #identificador-modal,
    #novo-chat-modal,
    #add-membro-modal {
      position: fixed;
      inset: 0;
      z-index: var(--z-sheet);
      background: rgba(5, 10, 20, .85);
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s var(--trans-main);
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    #identificador-modal.open,
    #novo-chat-modal.open,
    #add-membro-modal.open {
      opacity: 1;
      pointer-events: all;
    }

    #identificador-modal.open .compose-sheet,
    #novo-chat-modal.open .compose-sheet,
    #add-membro-modal.open .compose-sheet {
      transform: translateY(0);
    }

    .identificador-input {
      width: 100%;
      background: rgba(255, 255, 255, .05);
      border: 1.5px solid rgba(var(--cyan-rgb), .16);
      border-radius: 14px;
      padding: 13px 16px;
      font-size: 15px;
      color: var(--t1);
      font-family: var(--font);
      outline: none;
      caret-color: var(--cyan);
      transition: border-color .2s, box-shadow .2s;
    }

    .identificador-input::placeholder {
      color: var(--t3);
    }

    .identificador-input:focus {
      border-color: rgba(var(--cyan-rgb), .45);
      box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .09);
    }

    .identificador-status {
      font-size: 12px;
      color: var(--t3);
      margin-top: 8px;
      min-height: 15px;
    }

    .identificador-status.ok {
      color: var(--lime);
    }

    .identificador-status.aviso {
      color: var(--mara);
    }

    /* Painel "O teu identificador" — ligeiramente mais compacto que os
       outros sheets porque não tem o compose-type-row nem textarea. */
    .identificador-sheet .sheet-sub {
      margin-bottom: 18px;
    }

    /* Overlay de conversa (ecrã cheio) */
    #chat-overlay {
      position: fixed;
      inset: 0;
      z-index: var(--z-screen-overlay);
      background: var(--app-bg-2);
      display: flex;
      flex-direction: column;
      opacity: 0;
      pointer-events: none;
      transform: translateX(100%);
      transition: opacity .3s var(--trans-main), transform .3s var(--trans-main);
    }

    #chat-overlay.open {
      opacity: 1;
      pointer-events: all;
      transform: translateX(0);
    }

    /* Ficha do estabelecimento — mesmo padrão de ecrã cheio do #chat-overlay */
    #estabelecimento-overlay {
      position: fixed;
      inset: 0;
      z-index: var(--z-screen-overlay);
      background: var(--app-bg-2);
      display: flex;
      flex-direction: column;
      opacity: 0;
      pointer-events: none;
      transform: translateX(100%);
      transition: opacity .3s var(--trans-main), transform .3s var(--trans-main);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    #estabelecimento-overlay.open {
      opacity: 1;
      pointer-events: all;
      transform: translateX(0);
    }

    .chat-overlay-header {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: calc(var(--safe-top) + 14px) 16px 14px;
      border-bottom: 1px solid var(--border);
      background: rgba(5, 10, 20, .35);
    }

    .chat-overlay-back,
    .chat-overlay-menu-grupo,
    .chat-overlay-sair {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      border-radius: 11px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, .05);
      color: var(--t2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 17px;
      font-weight: 700;
      transition: all .18s;
    }

    .chat-overlay-back:active,
    .chat-overlay-menu-grupo:active,
    .chat-overlay-sair:active {
      transform: scale(.9);
    }

    .chat-overlay-titulo {
      flex: 1;
      min-width: 0;
      font-size: 15.5px;
      font-weight: 700;
      color: var(--t1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-overlay-mensagens {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      -webkit-overflow-scrolling: touch;
    }

    .chat-msg {
      max-width: 78%;
      display: flex;
      flex-direction: column;
    }

    .chat-msg-outro {
      align-self: flex-start;
      align-items: flex-start;
    }

    .chat-msg-minha {
      align-self: flex-end;
      align-items: flex-end;
    }

    .chat-msg-autor {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      color: var(--cyan);
      margin-bottom: 3px;
      padding: 0 4px;
    }

    .chat-msg-autor-avatar {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      flex-shrink: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8.5px;
      font-weight: 800;
      color: #0b0f14;
      background: linear-gradient(135deg, var(--cyan), var(--lime));
    }

    .chat-msg-autor-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .chat-msg-bolha {
      padding: 11px 15px;
      border-radius: 18px;
      font-size: 14px;
      line-height: 1.55;
      word-break: break-word;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
      position: relative;
      overflow: hidden;
    }

    .chat-msg-outro .chat-msg-bolha {
      background: var(--card-a);
      border: 1.5px solid var(--card-a-border);
      box-shadow: var(--card-shadow);
      color: var(--t1);
      border-bottom-left-radius: 5px;
    }

    /* Toque artístico: um véu de luz subtil no canto superior — mesma
       linguagem de "vidro" dos cartões, agora também nas bolhas. */
    .chat-msg-outro .chat-msg-bolha::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 120% 60% at 0% 0%, rgba(var(--cyan-rgb), .10), transparent 65%);
      pointer-events: none;
    }

    .chat-msg-minha .chat-msg-bolha {
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      color: #06170f;
      font-weight: 500;
      box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 8px 22px -6px rgba(var(--cyan-rgb), .55);
      border-bottom-right-radius: 5px;
    }

    /* Mesmo véu de luz, mais forte, para dar brilho de "vidro polido"
       sobre o gradiente cheio das mensagens enviadas. */
    .chat-msg-minha .chat-msg-bolha::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 45%);
      pointer-events: none;
    }

    .chat-msg-hora {
      font-size: 10px;
      color: var(--t3);
      margin-top: 3px;
      padding: 0 4px;
    }

    .chat-overlay-input-bar {
      flex-shrink: 0;
      display: flex;
      align-items: flex-end;
      gap: 10px;
      padding: 12px 16px calc(var(--safe-bot) + 12px);
      border-top: 1px solid var(--border);
      background: rgba(5, 10, 20, .35);
    }

    .chat-overlay-textarea {
      flex: 1;
      resize: none;
      max-height: 110px;
      background: rgba(255, 255, 255, .05);
      border: 1.5px solid rgba(var(--cyan-rgb), .16);
      border-radius: 16px;
      padding: 11px 15px;
      font-size: 14.5px;
      color: var(--t1);
      font-family: var(--font);
      outline: none;
      caret-color: var(--cyan);
      transition: border-color .2s, box-shadow .2s;
      line-height: 1.5;
    }

    .chat-overlay-textarea::placeholder {
      color: var(--t3);
    }

    .chat-overlay-textarea:focus {
      border-color: rgba(var(--cyan-rgb), .45);
      box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .09);
    }

    .chat-overlay-send {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border-radius: 14px;
      border: none;
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      box-shadow: 0 6px 18px -4px rgba(var(--cyan-rgb), .55);
      color: #06121a;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .2s;
    }

    .chat-overlay-send svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .chat-overlay-send:active {
      transform: scale(.92);
      box-shadow: 0 3px 10px -3px rgba(var(--cyan-rgb), .5);
    }

    /* Alterna entre o ícone de "enviar" (há texto) e o de "microfone"
       (campo vazio) no mesmo botão — evita ter dois botões separados. */
    .chat-mic-icon { display: none; width: 19px; height: 19px; }
    .chat-overlay-send.modo-mic .chat-send-icon { display: none; }
    .chat-overlay-send.modo-mic .chat-mic-icon { display: block; }
    .chat-overlay-send.modo-mic.a-gravar {
      background: linear-gradient(135deg, #ff5a5a, #ff8c5a);
      box-shadow: 0 6px 18px -4px rgba(255, 90, 90, .55);
      color: #fff;
      animation: chat-mic-pulso 1.1s ease-in-out infinite;
    }
    @keyframes chat-mic-pulso {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }

    /* Botão de anexar ficheiro — mesmo padrão visual do botão de enviar */
    .chat-overlay-attach {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border-radius: 14px;
      border: 1.5px solid var(--border);
      background: var(--card-a);
      color: var(--t2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .2s;
    }
    .chat-overlay-attach svg { width: 19px; height: 19px; }
    .chat-overlay-attach:active { transform: scale(.9); }
    .chat-overlay-attach:hover { color: var(--cyan); border-color: rgba(var(--cyan-rgb), .3); }

    /* ── Barra de gravação de mensagem de voz ─────────────────────── */
    .chat-overlay-gravando-bar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px calc(var(--safe-bot) + 12px);
      border-top: 1px solid var(--border);
      background: rgba(5, 10, 20, .35);
    }
    .chat-gravando-cancelar {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border-radius: 14px;
      border: 1.5px solid rgba(255, 90, 90, .4);
      background: color-mix(in srgb, #ff5a5a 20%, #0a0505 80%);
      color: #ff8080;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .2s;
    }
    .chat-gravando-cancelar svg { width: 17px; height: 17px; }
    .chat-gravando-cancelar:active { transform: scale(.9); }
    .chat-gravando-indicador {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 13.5px;
      color: var(--t1);
      font-variant-numeric: tabular-nums;
      font-weight: 700;
    }
    .chat-gravando-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ff5a5a;
      box-shadow: 0 0 0 0 rgba(255, 90, 90, .5);
      animation: chat-gravando-dot-pulso 1.3s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes chat-gravando-dot-pulso {
      0% { box-shadow: 0 0 0 0 rgba(255, 90, 90, .45); }
      70% { box-shadow: 0 0 0 8px rgba(255, 90, 90, 0); }
      100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0); }
    }
    .chat-gravando-legenda {
      font-size: 12.5px;
      font-weight: 500;
      color: var(--t3);
    }
    .chat-gravando-enviar {
      width: 42px;
      height: 42px;
      flex-shrink: 0;
      border-radius: 14px;
      border: 1px solid rgba(var(--cyan-rgb), .38);
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .32), rgba(var(--lime-rgb), .28));
      color: var(--t1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .2s;
    }
    .chat-gravando-enviar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .chat-gravando-enviar:active { transform: scale(.92); }

    /* ── Preview de ficheiro/imagem antes de enviar ───────────────── */
    .chat-overlay-preview-bar {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px 16px;
      border-top: 1px solid var(--border);
      background: rgba(5, 10, 20, .45);
    }
    .chat-preview-topo {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .chat-preview-conteudo {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .chat-preview-conteudo img {
      width: 54px;
      height: 54px;
      border-radius: 12px;
      object-fit: cover;
      border: 1px solid var(--border);
      flex-shrink: 0;
    }
    .chat-preview-ficheiro-info {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .chat-preview-ficheiro-icon {
      width: 40px;
      height: 40px;
      border-radius: 11px;
      flex-shrink: 0;
      background: rgba(var(--cyan-rgb), .14);
      border: 1px solid rgba(var(--cyan-rgb), .25);
      color: var(--cyan);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .chat-preview-ficheiro-icon svg { width: 19px; height: 19px; }
    .chat-preview-ficheiro-texto { min-width: 0; }
    .chat-preview-ficheiro-nome {
      font-size: 13px;
      font-weight: 700;
      color: var(--t1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 200px;
    }
    .chat-preview-ficheiro-tamanho {
      font-size: 11px;
      color: var(--t3);
      margin-top: 1px;
    }
    .chat-preview-cancelar {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, .05);
      color: var(--t2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .chat-preview-cancelar svg { width: 15px; height: 15px; }
    .chat-preview-cancelar:active { transform: scale(.9); }
    .chat-preview-linha-envio {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .chat-preview-legenda-input {
      flex: 1;
      background: rgba(255, 255, 255, .05);
      border: 1.5px solid rgba(var(--cyan-rgb), .16);
      border-radius: 14px;
      padding: 10px 14px;
      font-size: 14px;
      color: var(--t1);
      font-family: var(--font);
      outline: none;
      caret-color: var(--cyan);
      transition: border-color .2s, box-shadow .2s;
    }
    .chat-preview-legenda-input::placeholder { color: var(--t3); }
    .chat-preview-legenda-input:focus {
      border-color: rgba(var(--cyan-rgb), .45);
      box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .09);
    }

    /* ── Mensagem de voz — pílula compacta, tipo "nota de voz": o
       tamanho do balão é definido pelo conteúdo real (botão + onda +
       tempo), nunca sobra fundo vazio à volta. Onda desenhada como
       barras de amplitude (estático, mas com leitura de scrubber via
       progresso a preencher as barras já "tocadas"). ─────────────── */
    .chat-msg-audio {
      display: flex;
      align-items: center;
      gap: 9px;
      width: fit-content;
      max-width: 208px;
      padding: 6px 12px 6px 6px;
      border-radius: 999px;
    }

    .chat-msg-outro .chat-msg-bolha.chat-msg-audio {
      background: var(--card-a);
      border: 1.5px solid var(--card-a-border);
    }

    .chat-msg-minha .chat-msg-bolha.chat-msg-audio {
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      border: none;
    }

    .chat-audio-play {
      width: 30px;
      height: 30px;
      flex-shrink: 0;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform .15s, box-shadow .15s;
    }

    .chat-msg-outro .chat-audio-play {
      background: linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .09));
      color: var(--t1);
      box-shadow: 0 3px 9px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    .chat-msg-minha .chat-audio-play {
      background: linear-gradient(150deg, var(--cyan), var(--lime));
      color: #04262b;
      box-shadow: 0 4px 11px rgba(var(--cyan-rgb), .38);
    }

    .chat-audio-play svg { width: 12px; height: 12px; }
    .chat-audio-play:active { transform: scale(.9); }

    /* O "corpo" nunca é mais largo do que a onda precisa — sem
       min-width artificial, o balão encolhe até ao conteúdo real. */
    .chat-audio-corpo {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    /* Onda em barras de amplitude — visual de nota de voz reconhecível
       à primeira vista, em vez de uma barra de progresso genérica. As
       barras têm alturas fixas (padrão decorativo) e o progresso é
       lido pela cor: barras já "ouvidas" ganham o tom de destaque. */
    .chat-audio-onda {
      position: relative;
      display: flex;
      align-items: center;
      gap: 2.5px;
      height: 22px;
      cursor: pointer;
    }

    .chat-audio-onda-track {
      display: flex;
      align-items: center;
      gap: 2.5px;
      height: 100%;
      background: none;
      overflow: visible;
    }

    .chat-audio-onda-track::before {
      content: '';
      display: block;
      width: 62px;
      height: 100%;
      -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 2.5px, transparent 2.5px 5.5px);
      mask-image: repeating-linear-gradient(90deg, #000 0 2.5px, transparent 2.5px 5.5px);
      background: currentColor;
    }

    .chat-msg-outro .chat-audio-onda-track { color: rgba(255, 255, 255, .28); }
    .chat-msg-minha .chat-audio-onda-track { color: rgba(6, 23, 15, .32); }

    .chat-audio-onda-progresso {
      position: absolute;
      inset: 0;
      width: 0%;
      overflow: hidden;
      transition: width .1s linear;
    }

    .chat-audio-onda-progresso::before {
      content: '';
      position: absolute;
      inset: 0;
      width: 62px;
      -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 2.5px, transparent 2.5px 5.5px);
      mask-image: repeating-linear-gradient(90deg, #000 0 2.5px, transparent 2.5px 5.5px);
    }

    .chat-msg-outro .chat-audio-onda-progresso::before { background: #fff; }
    .chat-msg-minha .chat-audio-onda-progresso::before { background: #06170f; }

    .chat-audio-tempo {
      font-size: 10px;
      font-weight: 700;
      color: var(--t2);
      letter-spacing: .02em;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .chat-msg-minha .chat-audio-tempo {
      color: rgba(6, 23, 15, .65);
    }

    /* ── Bolha de ficheiro / documento — mesmo princípio de tom por
       remetente, ícone com destaque próprio. ──────────────────────── */
    .chat-msg-ficheiro {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 196px;
      max-width: 258px;
      padding: 10px 12px;
    }

    .chat-msg-outro .chat-msg-bolha.chat-msg-ficheiro {
      background: var(--card-a);
      border: 1.5px solid var(--card-a-border);
    }

    .chat-msg-minha .chat-msg-bolha.chat-msg-ficheiro {
      background: var(--card-b);
      border: 1.5px solid var(--card-b-border);
    }

    .chat-ficheiro-linha {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }

    .chat-ficheiro-legenda {
      font-size: 13px;
      line-height: 1.4;
      color: var(--t1);
      padding: 0 2px;
    }

    .chat-ficheiro-icon {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    }

    .chat-msg-outro .chat-ficheiro-icon {
      background: rgba(255, 255, 255, .1);
      color: var(--t1);
    }

    .chat-msg-minha .chat-ficheiro-icon {
      background: linear-gradient(150deg, rgba(var(--cyan-rgb), .32), rgba(var(--lime-rgb), .22));
      color: var(--cyan);
    }

    .chat-ficheiro-icon svg { width: 18px; height: 18px; }
    .chat-ficheiro-info { min-width: 0; flex: 1; }
    .chat-ficheiro-nome {
      font-size: 13px;
      font-weight: 700;
      color: var(--t1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .chat-ficheiro-tamanho {
      font-size: 11px;
      color: var(--t3);
      margin-top: 2px;
    }
    .chat-ficheiro-download {
      width: 26px;
      height: 26px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--t2);
      transition: color .15s;
    }
    .chat-ficheiro-download svg { width: 15px; height: 15px; }
    .chat-ficheiro-linha:hover .chat-ficheiro-download { color: var(--cyan); }

    /* ── Bolha de imagem — a moldura envolve exactamente a foto, sem
       corte: sem object-fit e sem altura máxima, a imagem impõe a sua
       proporção real e é sempre exibida por inteiro. Ícone de "abrir"
       aparece só ao tocar/passar o rato, como pista discreta. ─────── */
    .chat-msg-bolha.chat-msg-imagem {
      position: relative;
      padding: 4px;
      overflow: hidden;
      max-width: 240px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    }

    .chat-msg-outro .chat-msg-bolha.chat-msg-imagem {
      border: 1px solid rgba(255, 255, 255, .10);
    }

    .chat-msg-minha .chat-msg-bolha.chat-msg-imagem {
      border: 1px solid rgba(var(--cyan-rgb), .26);
    }

    .chat-msg-imagem img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 12px;
      cursor: pointer;
    }

    .chat-msg-imagem::after {
      content: '';
      position: absolute;
      top: 10px;
      right: 10px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(4, 14, 26, .55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, .25);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 12px 12px;
      opacity: 0;
      transform: scale(.8);
      transition: opacity .18s ease, transform .18s ease;
      pointer-events: none;
    }

    .chat-msg-imagem:hover::after,
    .chat-msg-imagem:active::after {
      opacity: 1;
      transform: scale(1);
    }

    .chat-msg-imagem-legenda {
      padding: 7px 10px 3px;
      font-size: 13px;
      line-height: 1.4;
      color: var(--t1);
    }

    .chat-msg-minha .chat-msg-imagem-legenda {
      color: #06170f;
      font-weight: 500;
    }

    @keyframes chat-msg-in {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .chat-msg {
      animation: chat-msg-in .28s var(--trans-main) both;
    }

    /* Entrada suave da lista de conversas ao abrir a aba "Mensagens" */
    .chat-item {
      animation: fade-in .25s var(--trans-main) both;
    }

    /* Estados de hover — só em dispositivos com rato/trackpad, para não
       deixar os itens "presos" num estado tocado em ecrãs táteis. */
    @media (hover:hover) {

      .share-tab:hover {
        color: var(--t1);
      }

      .identificador-bar-btn:hover {
        border-color: rgba(var(--cyan-rgb), .35);
        color: var(--t1);
      }

      .chat-item:hover {
        transform: translateY(-1px);
        border-color: var(--card-a-border);
        box-shadow: var(--card-shadow), 0 10px 24px -8px rgba(var(--cyan-rgb), .35);
      }

      .chat-overlay-back:hover,
      .chat-overlay-menu-grupo:hover,
      .chat-overlay-sair:hover {
        border-color: rgba(var(--cyan-rgb), .35);
        color: var(--t1);
        background: rgba(var(--cyan-rgb), .08);
      }

      .chat-overlay-send:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(var(--cyan-rgb), .28);
      }
    }

    /* ═══════════════════════════ MENSAGENS PRIVADAS · extras ═══
       Valor real do identificador na barra, botão "···" do cabeçalho da
       conversa, contador de caracteres, e os 4 modais novos: menu da
       conversa, membros do grupo, ações de mensagem, bloqueados. */

    .identificador-bar-info {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }

    .identificador-bar-valor {
      font-size: 16px;
      font-weight: 700;
      color: var(--t1);
      font-family: var(--font);
      letter-spacing: -.03em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .identificador-bar-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    /* Link "Bloqueados" no painel "O teu identificador" */
    .identificador-bloqueados-link {
      font-size: 11.5px;
      font-weight: 600;
      color: var(--t3);
      background: none;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font);
      padding: 6px 0;
      transition: color .18s;
    }

    /* Botão "···" (mais opções) no cabeçalho da conversa */
    .chat-overlay-menu {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      border-radius: 11px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, .05);
      color: var(--t2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .18s;
    }

    .chat-overlay-menu:active {
      transform: scale(.9);
    }

    /* Wrap da textarea + contador de caracteres sobreposto no canto */
    .chat-overlay-input-wrap {
      position: relative;
      flex: 1;
      display: flex;
    }

    .chat-overlay-input-wrap .chat-overlay-textarea {
      width: 100%;
      padding-bottom: 20px;
    }

    .chat-overlay-char-count {
      position: absolute;
      right: 13px;
      bottom: 6px;
      font-size: 10px;
      color: var(--t3);
      pointer-events: none;
      transition: color .18s;
    }

    .chat-overlay-char-count.limite {
      color: var(--mara);
      font-weight: 700;
    }

    /* Mensagens ficam tocáveis (abrem o modal de ações) */
    .chat-msg-bolha {
      cursor: pointer;
    }

    /* Modais adicionais — todos por cima do #chat-overlay (ecrã cheio,
       z-screen-overlay), por isso ficam ainda mais acima. */
    #chat-menu-modal,
    #membros-modal,
    #msg-acoes-modal,
    #partilha-acoes-modal,
    #bloqueados-modal,
    #estabelecimento-menu-modal,
    #sugerir-preco-modal,
    #denuncia-modal,
    #area-offline-modal,
    #produto-acoes-modal,
    #comprar-agora-modal,
    #comercio-comprovativo-modal,
    #encomendar-modal {
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-screen-overlay) + 10);
      background: rgba(5, 10, 20, .85);
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s var(--trans-main);
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    #chat-menu-modal.open,
    #membros-modal.open,
    #msg-acoes-modal.open,
    #partilha-acoes-modal.open,
    #bloqueados-modal.open,
    #estabelecimento-menu-modal.open,
    #sugerir-preco-modal.open,
    #denuncia-modal.open,
    #area-offline-modal.open,
    #produto-acoes-modal.open,
    #comprar-agora-modal.open,
    #comercio-comprovativo-modal.open,
    #encomendar-modal.open {
      opacity: 1;
      pointer-events: all;
    }

    #chat-menu-modal.open .compose-sheet,
    #membros-modal.open .compose-sheet,
    #msg-acoes-modal.open .compose-sheet,
    #partilha-acoes-modal.open .compose-sheet,
    #bloqueados-modal.open .compose-sheet,
    #estabelecimento-menu-modal.open .compose-sheet,
    #sugerir-preco-modal.open .compose-sheet,
    #denuncia-modal.open .compose-sheet,
    #area-offline-modal.open .compose-sheet,
    #produto-acoes-modal.open .compose-sheet,
    #comprar-agora-modal.open .compose-sheet,
    #comercio-comprovativo-modal.open .compose-sheet,
    #encomendar-modal.open .compose-sheet {
      transform: translateY(0);
    }

    .chat-menu-sheet,
    .msg-acoes-sheet {
      padding-top: 14px;
    }

    /* Linhas de opção — menu da conversa e ações de mensagem */
    .chat-menu-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 6px;
      font-size: 14.5px;
      font-weight: 600;
      color: var(--t1);
      cursor: pointer;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      transition: opacity .15s;
    }

    .chat-menu-item:last-child {
      border-bottom: none;
    }

    .chat-menu-item svg {
      width: 18px;
      height: 18px;
      color: var(--t2);
      flex-shrink: 0;
    }

    .chat-menu-item.danger {
      color: var(--mara);
    }

    .chat-menu-item.danger svg {
      color: var(--mara);
    }

    .chat-menu-item:active {
      opacity: .6;
    }

    /* Confirmação inline (sair, bloquear, apagar, denunciar) — substitui
       as opções do mesmo sheet, sem abrir um segundo modal por cima. */
    .chat-menu-confirm {
      padding: 8px 4px 4px;
    }

    .chat-menu-confirm-msg {
      font-size: 13.5px;
      color: var(--t2);
      line-height: 1.55;
      margin-bottom: 16px;
    }

    .chat-menu-confirm-actions {
      display: flex;
      gap: 10px;
    }

    .chat-menu-confirm-btn {
      flex: 1;
      padding: 12px 10px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, .05);
      color: var(--t2);
      font-size: 13.5px;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: all .18s;
    }

    .chat-menu-confirm-btn.danger {
      border-color: rgba(255, 64, 129, .4);
      background: rgba(255, 64, 129, .12);
      color: var(--mara);
    }

    .chat-menu-confirm-btn:active {
      transform: scale(.96);
    }

    /* Membros do grupo / bloqueados — reaproveitam .chat-item, mas sem
       o cursor de "tocável" nem o hover de navegação. */
    .membros-sheet .chat-item,
    .bloqueados-sheet .chat-item {
      cursor: default;
    }

    .membro-row,
    .bloqueado-row {
      gap: 10px;
    }

    .membro-item-actions {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex-shrink: 0;
    }

    .membro-action-btn {
      font-size: 10.5px;
      font-weight: 700;
      font-family: var(--font);
      padding: 6px 12px;
      border-radius: 100px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, .05);
      color: var(--t2);
      cursor: pointer;
      white-space: nowrap;
      transition: all .18s;
    }

    .membro-action-btn.danger {
      border-color: rgba(255, 64, 129, .35);
      color: var(--mara);
      background: rgba(255, 64, 129, .08);
    }

    .membro-action-btn:active {
      transform: scale(.94);
    }

    .membro-action-btn:disabled {
      opacity: .5;
      pointer-events: none;
    }

    @media (hover:hover) {
      .identificador-bloqueados-link:hover {
        color: var(--t1);
      }

      .chat-overlay-menu:hover {
        border-color: rgba(var(--cyan-rgb), .35);
        color: var(--t1);
        background: rgba(var(--cyan-rgb), .08);
      }

      .chat-menu-item:hover {
        color: var(--cyan);
      }

      .chat-menu-item.danger:hover {
        color: var(--mara);
        opacity: .85;
      }

      .membro-action-btn:hover {
        border-color: rgba(var(--cyan-rgb), .35);
        color: var(--t1);
      }

      .membro-action-btn.danger:hover {
        border-color: rgba(255, 64, 129, .5);
      }
    }

    /* ═══════════════════════════════════ MODAL FOTO DE PERFIL ═══ */
    /* z-index acima de --z-screen-overlay: o modal de foto pode ser aberto
       a partir do ecrã de Perfil (#screen-profile, que usa --z-screen), e
       antes usava calc(--z-sheet + 10) — abaixo de --z-screen — por isso
       abria escondido atrás do ecrã de Perfil e só ficava visível depois
       de sair dele. */
    #photo-modal {
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-screen-overlay) + 10);
      background: rgba(5, 10, 20, .88);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s var(--trans-main);
    }

    #photo-modal.open {
      opacity: 1;
      pointer-events: all;
    }

    #photo-modal.open .photo-sheet {
      transform: translateY(0);
    }

    .photo-sheet {
      width: 100%;
      max-width: 430px;
      background: var(--app-bg-2);
      border: 1px solid rgba(var(--cyan-rgb), .18);
      border-bottom: none;
      border-radius: 28px 28px 0 0;
      padding: 20px 24px calc(var(--safe-bot) + 32px);
      transform: translateY(100%);
      transition: transform .32s var(--trans-main);
    }

    .photo-preview-wrap {
      width: 88px;
      height: 88px;
      border-radius: 22px;
      overflow: hidden;
      margin: 16px auto;
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 800;
      color: #0b0f14;
      border: 2px solid rgba(var(--cyan-rgb), .35);
      box-shadow: 0 0 24px rgba(var(--cyan-rgb), .22);
      position: relative;
    }

    .photo-preview-wrap img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .photo-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px;
    }

    .photo-btn {
      width: 100%;
      padding: 14px;
      border-radius: 16px;
      border: none;
      font-size: 15px;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: all .2s;
      text-align: center;
    }

    .photo-btn-primary {
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .30), rgba(var(--lime-rgb), .26));
      border: 1px solid rgba(var(--cyan-rgb), .38);
      color: var(--t1);
      box-shadow: 0 4px 20px rgba(var(--cyan-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .14);
    }

    .photo-btn-primary:active {
      transform: scale(.97);
      opacity: .88;
    }

    .photo-btn-danger {
      background: rgba(248, 113, 113, .08);
      border: 1px solid rgba(248, 113, 113, .22);
      color: rgba(248, 113, 113, .85);
    }

    .photo-btn-danger:active {
      background: rgba(248, 113, 113, .15);
    }

    .photo-btn-ghost {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, .10);
      color: var(--t3);
    }

    /* Input de ficheiro invisível */
    #photo-file-input {
      display: none;
    }

    /* ═══════════════════════════════════ COMPOSE MODAL ═══ */
    #compose-modal {
      position: fixed;
      inset: 0;
      z-index: var(--z-sheet);
      background: rgba(5, 10, 20, .85);
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s var(--trans-main);
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    #compose-modal.open {
      opacity: 1;
      pointer-events: all;
    }

    #compose-modal.open .compose-sheet {
      transform: translateY(0);
    }

    .compose-sheet {
      width: 100%;
      max-width: 430px;
      background: var(--app-bg-2);
      border: 1px solid rgba(var(--cyan-rgb), .18);
      border-bottom: none;
      border-radius: 28px 28px 0 0;
      padding: 20px 24px calc(var(--safe-bot) + 28px);
      transform: translateY(100%);
      transition: transform .32s var(--trans-main);
    }

    .sheet-handle {
      width: 40px;
      height: 3px;
      border-radius: 100px;
      background: rgba(255, 255, 255, .15);
      margin: 0 auto 20px;
    }

    .sheet-title {
      font-size: 18.5px;
      font-weight: 800;
      color: var(--t1);
      margin-bottom: 6px;
    }

    .sheet-sub {
      font-size: 13px;
      color: var(--t3);
      margin-bottom: 20px;
      line-height: 1.55;
    }

    .compose-type-row {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }

    .compose-type-btn {
      flex: 1;
      padding: 10px 8px;
      border-radius: 12px;
      text-align: center;
      border: 1.5px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .04);
      font-size: 12px;
      font-weight: 600;
      color: var(--t3);
      cursor: pointer;
      transition: all .18s;
    }

    .compose-type-btn.sel {
      border-color: rgba(var(--cyan-rgb), .4);
      background: rgba(var(--cyan-rgb), .10);
      color: var(--cyan);
    }

    .compose-type-btn:active {
      transform: scale(.95);
    }

    .compose-textarea {
      width: 100%;
      min-height: 110px;
      resize: none;
      background: rgba(255, 255, 255, .05);
      border: 1.5px solid rgba(var(--cyan-rgb), .16);
      border-radius: 16px;
      padding: 14px 16px;
      font-size: 15px;
      color: var(--t1);
      font-family: var(--font);
      outline: none;
      caret-color: var(--cyan);
      transition: border-color .2s, box-shadow .2s;
      -webkit-user-select: text;
      user-select: text;
      line-height: 1.6;
    }

    .compose-textarea::placeholder {
      color: var(--t3);
    }

    .compose-textarea:focus {
      border-color: rgba(var(--cyan-rgb), .45);
      box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .09);
    }

    .compose-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 14px;
    }

    .compose-char {
      font-size: 12px;
      color: var(--t3);
    }

    .compose-send {
      padding: 12px 24px;
      border-radius: 14px;
      border: none;
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .30), rgba(var(--lime-rgb), .26));
      border: 1px solid rgba(var(--cyan-rgb), .38);
      color: var(--t1);
      font-size: 15px;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: all .2s;
    }

    .compose-send:active {
      transform: scale(.95);
      opacity: .88;
    }

    .notif-card:last-child,
    .post-card:last-child,
    .book-card:last-child,
    .chat-item:last-child {
      margin-bottom: 0;
    }
    #toast {
      position: fixed;
      bottom: calc(var(--safe-bot) + 90px);
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      z-index: var(--z-toast);
      max-width: min(92vw, 420px);
      width: max-content;
      background: rgba(var(--cyan-rgb), .15);
      border: 1px solid rgba(var(--cyan-rgb), .30);
      border-radius: 16px;
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 600;
      color: var(--t1);
      box-shadow: 0 8px 32px rgba(0, 0, 0, .45);
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease, transform .3s ease;
      white-space: normal;
      text-align: center;
      line-height: 1.35;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    #toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    @media (max-width: 480px) {
      #toast {
        max-width: calc(100vw - 32px);
        border-radius: 14px;
        padding: 12px 16px;
        font-size: 13px;
      }
    }

    /* ═══════════════════════════════════ AVISO DE ATUALIZAÇÃO (nova versão) ═══ */
    #app-update-banner {
      position: fixed;
      left: 16px;
      right: 16px;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
      z-index: 2000;
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--app-bg-3);
      border: 1px solid rgba(var(--cyan-rgb), .28);
      border-radius: 18px;
      padding: 14px 14px 14px 16px;
      box-shadow: 0 12px 38px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      opacity: 0;
      transform: translateY(28px);
      animation: rise .5s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    #app-update-banner.exit {
      animation: none;
      transition: opacity .25s ease, transform .25s ease;
      opacity: 0;
      transform: translateY(12px) scale(.97);
    }

    .app-update-icon {
      flex-shrink: 0;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .18), rgba(var(--lime-rgb), .16));
      border: 1px solid rgba(var(--cyan-rgb), .30);
      color: var(--cyan);
    }

    .app-update-icon svg {
      width: 19px;
      height: 19px;
      animation: spin-ease 1.6s ease-in-out infinite;
    }

    .app-update-text {
      flex: 1;
      min-width: 0;
    }

    .app-update-title {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--t1);
      line-height: 1.3;
    }

    .app-update-sub {
      font-size: 11.5px;
      color: var(--t3);
      margin-top: 2px;
      line-height: 1.3;
    }

    .app-update-btn {
      flex-shrink: 0;
      border: none;
      border-radius: 100px;
      padding: 10px 18px;
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      color: #051a2e;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(var(--cyan-rgb), .3);
      transition: transform .15s, opacity .15s;
    }

    .app-update-btn:active {
      transform: scale(.95);
      opacity: .88;
    }

    /* ═══════════════════════════════════ REGISTER SCREENS ═══ */
    #register-step1,
    #register-step2,
    #register-step3 {
      position: fixed;
      inset: 0;
      z-index: 515;
      display: none;
      flex-direction: column;
      align-items: center;
      padding: calc(var(--safe-top) + 20px) 28px calc(var(--safe-bot) + 40px);
      background: var(--app-bg-1);
      opacity: 0;
      transition: opacity .5s ease;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      overscroll-behavior-y: contain;
      perspective: 1000px;
    }

    #register-step1::-webkit-scrollbar,
    #register-step2::-webkit-scrollbar,
    #register-step3::-webkit-scrollbar {
      display: none;
    }

    #register-step1.visible,
    #register-step2.visible,
    #register-step3.visible {
      opacity: 1;
    }

    /* Progress stepper */
    .reg-stepper {
      display: flex;
      align-items: center;
      gap: 0;
      align-self: stretch;
      margin-bottom: 36px;
      position: relative;
    }

    .reg-step-dot {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      border: 1.5px solid rgba(255, 255, 255, .15);
      background: rgba(255, 255, 255, .04);
      color: var(--t3);
      transition: all .35s;
    }

    .reg-step-dot.active {
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .30), rgba(var(--lime-rgb), .24));
      border-color: rgba(var(--cyan-rgb), .5);
      color: var(--t1);
      box-shadow: 0 0 16px rgba(var(--cyan-rgb), .22);
    }

    .reg-step-dot.done {
      background: rgba(var(--lime-rgb), .18);
      border-color: rgba(var(--lime-rgb), .45);
      color: var(--lime);
    }

    .reg-step-line {
      flex: 1;
      height: 1.5px;
      background: rgba(255, 255, 255, .08);
      position: relative;
      overflow: hidden;
    }

    .reg-step-line-fill {
      position: absolute;
      inset: 0;
      left: -100%;
      background: linear-gradient(90deg, var(--cyan), var(--lime));
      transition: left .5s cubic-bezier(.22, 1, .36, 1);
    }

    .reg-step-line-fill.done {
      left: 0;
    }

    /* Register form shared */
    .reg-form {
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .reg-title {
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--t1);
      margin-bottom: 6px;
      align-self: flex-start;
    }

    .reg-sub {
      font-size: 14px;
      color: var(--t3);
      margin-bottom: 32px;
      line-height: 1.55;
      align-self: flex-start;
    }

    /* Optional badge */
    .field-optional {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--lime);
      background: rgba(var(--lime-rgb), .10);
      border: 1px solid rgba(var(--lime-rgb), .22);
      border-radius: 100px;
      padding: 2px 7px;
      margin-left: 8px;
      vertical-align: middle;
    }

    /* Social input with icon prefix */
    .field-social {
      position: relative;
    }

    .field-social-prefix {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      color: var(--t3);
      pointer-events: none;
    }

    .field-social .field-input {
      padding-left: 40px;
    }

    /* Profile placeholder card */
    .reg-profile-placeholder {
      width: 100%;
      border-radius: 20px;
      padding: 28px 22px;
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .08), rgba(var(--lime-rgb), .06));
      border: 1.5px dashed rgba(var(--cyan-rgb), .25);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      margin-bottom: 32px;
    }

    .reg-profile-icon {
      font-size: 40px;
    }

    .reg-profile-label {
      font-size: 16px;
      font-weight: 700;
      color: var(--t1);
      text-align: center;
      line-height: 1.35;
    }

    .reg-profile-desc {
      font-size: 13px;
      color: var(--t3);
      text-align: center;
      line-height: 1.6;
    }

    .reg-profile-badge {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--cyan);
      background: rgba(var(--cyan-rgb), .10);
      border: 1px solid rgba(var(--cyan-rgb), .22);
      border-radius: 100px;
      padding: 4px 12px;
    }


    /* ═══════════════════════════════════ PASSWORD FIELD ═══ */
    .field-pw-wrap {
      position: relative;
      width: 100%;
    }

    .field-pw-wrap .field-input {
      padding-right: 52px;
    }

    .field-pw-toggle {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      color: var(--t3);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color .2s;
    }

    .field-pw-toggle:hover {
      color: var(--cyan);
    }

    .field-pw-toggle svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Password strength bar */
    .pw-strength-wrap {
      margin-top: 8px;
      height: 3px;
      border-radius: 100px;
      background: rgba(255, 255, 255, .07);
      overflow: hidden;
    }

    .pw-strength-bar {
      height: 100%;
      border-radius: 100px;
      width: 0%;
      transition: width .35s ease, background .35s ease;
    }

    .pw-strength-hint {
      margin-top: 6px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .06em;
      color: var(--t3);
      min-height: 14px;
      transition: color .3s;
    }

    /* ═══════════════════════════════════ CURSOS ═══ */
    /* ═══════════════════════════════════ CURSOS ═══ */
    #page-courses {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    /* Etiqueta de secção */
    .section-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--t3);
      padding: 0 20px;
      margin-bottom: 12px;
    }

    /* Carrossel "Continuar a aprender" */
    .courses-continue {
      padding-bottom: 6px;
    }

    .continue-track {
      display: flex;
      gap: 10px;
      padding: 0 20px 4px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .continue-track::-webkit-scrollbar {
      display: none;
    }

    .continue-card {
      flex-shrink: 0;
      width: 142px;
      border-radius: 15px;
      overflow: hidden;
      background: var(--card-a);
      border: 1.5px solid var(--card-a-border);
      box-shadow: var(--card-shadow);
      cursor: pointer;
      position: relative;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    /* Alternância Luzayadio: cartão ciano, cartão lima... */
    .continue-card:nth-child(even) {
      background: var(--card-b);
      border-color: var(--card-b-border);
    }

    .continue-card::after {
      content: '';
      position: absolute;
      top: -35%;
      right: -25%;
      width: 70%;
      height: 70%;
      background: radial-gradient(circle, rgba(var(--cyan-rgb), .16), transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    .continue-card:nth-child(even)::after {
      background: radial-gradient(circle, rgba(var(--lime-rgb), .16), transparent 70%);
    }

    .continue-card > * {
      position: relative;
      z-index: 1;
    }

    .continue-card:active {
      transform: scale(.97);
    }

    .continue-card-img {
      width: 100%;
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      background: rgba(0, 0, 0, .18);
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .continue-card-img img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .continue-card-img-placeholder {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      opacity: .32;
    }

    .continue-card-body {
      padding: 9px 10px 10px;
    }

    .continue-card-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--t1);
      line-height: 1.3;
      margin-bottom: 6px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      letter-spacing: -.005em;
    }

    .continue-card-cta {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .01em;
      color: var(--cyan);
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .continue-card:nth-child(even) .continue-card-cta {
      color: var(--lime);
    }

    /* Barra de arrasto do carrossel "Continuar a aprender" */
    .continue-scrollbar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 20px 2px;
    }

    .continue-scrollbar-arrow {
      width: 26px;
      height: 26px;
      flex-shrink: 0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .12);
      color: var(--t2);
      cursor: pointer;
      transition: background .2s, color .2s, transform .15s;
    }

    .continue-scrollbar-arrow:active {
      background: rgba(var(--cyan-rgb), .16);
      border-color: rgba(var(--cyan-rgb), .35);
      color: var(--cyan);
      transform: scale(.92);
    }

    .continue-scrollbar-track {
      flex: 1;
      height: 5px;
      border-radius: 3px;
      background: rgba(255, 255, 255, .08);
      position: relative;
      cursor: pointer;
    }

    .continue-scrollbar-thumb {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      min-width: 28px;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--cyan), var(--lime));
      box-shadow: 0 0 8px rgba(var(--cyan-rgb), .35);
      cursor: grab;
    }

    .continue-scrollbar-thumb:active {
      cursor: grabbing;
    }

    /* Filtro bar */
    .courses-filter-bar {
      display: flex;
      justify-content: center;
      gap: 8px;
      padding: 6px 20px 16px;
      overflow-x: auto;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      flex-shrink: 0;
      /* Garante que o scroll horizontal funciona mesmo dentro de um pai com overflow-x:hidden */
      width: 100%;
      box-sizing: border-box;
    }

    .courses-filter-bar::-webkit-scrollbar {
      display: none;
    }

    .cf-btn {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border-radius: 100px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .04);
      color: var(--t2);
      font-size: 13px;
      font-weight: 600;
      font-family: var(--font);
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
    }

    .cf-icon {
      font-size: 13px;
      line-height: 1;
    }

    .cf-btn.act {
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .18), rgba(var(--lime-rgb), .10));
      border-color: rgba(var(--cyan-rgb), .40);
      color: var(--t1);
    }

    /* ═══════════════════════════════════ NOVA VISUALIZAÇÃO DE CURSOS ═══
       Os cursos são apresentados numa grelha responsiva. O flyer fica num
       fluxo normal, com a sua altura natural, e nunca é recortado por
       object-fit, aspect-ratio ou overlays posicionados por cima. */
    .courses-grid-wrap {
      position: relative;
      flex: 0 0 auto;
      min-height: 0;
      padding: 0 18px calc(28px + var(--safe-bot, 0px));
    }

    .courses-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
      align-items: start;
      gap: 18px;
      width: 100%;
      max-width: 1160px;
      margin: 0 auto;
      padding: 4px 0 12px;
      overflow: visible;
    }

    .courses-grid.cg-1,
    .courses-grid.cg-2 {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    }

    .courses-grid::-webkit-scrollbar {
      display: none;
    }

    .courses-state {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 220px;
      padding: 42px 30px;
      text-align: center;
    }

    .courses-state-icon {
      display: flex;
      color: var(--cyan);
      opacity: .65;
      animation: pat-breathe 3s ease-in-out infinite alternate;
    }

    .courses-state-icon .lz-icon {
      width: 34px;
      height: 34px;
    }

    .courses-state-text {
      font-size: 14px;
      color: var(--t3);
      line-height: 1.6;
      max-width: 280px;
    }

    .course-card {
      --pin: var(--cyan);
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      width: 100%;
      cursor: pointer;
      border: 1.5px solid var(--card-a-border);
      border-radius: 18px;
      background: var(--card-a);
      box-shadow: var(--card-shadow);
      overflow: hidden;
      opacity: 0;
      transform: translateY(14px);
      animation: courseCardRise .5s cubic-bezier(.22, 1, .36, 1) forwards;
      animation-delay: calc(var(--course-i, 0) * 55ms);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    @keyframes courseCardRise {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Alternância de cor Luzayadio: cartão ciano, cartão lima, ciano... */
    .course-card:nth-child(even) {
      background: var(--card-b);
      border-color: var(--card-b-border);
    }

    .course-card:nth-child(1) { --course-i: 0; }
    .course-card:nth-child(2) { --course-i: 1; }
    .course-card:nth-child(3) { --course-i: 2; }
    .course-card:nth-child(4) { --course-i: 3; }
    .course-card:nth-child(5) { --course-i: 4; }
    .course-card:nth-child(6) { --course-i: 5; }
    .course-card:nth-child(n+7) { --course-i: 6; }

    .course-card:hover,
    .course-card:focus-within {
      transform: translateY(-3px);
      border-color: rgba(var(--cyan-rgb), .42);
      box-shadow: var(--card-shadow), 0 18px 38px rgba(0, 0, 0, .38), 0 0 0 1px rgba(var(--cyan-rgb), .10);
    }

    /* Toque artístico: o mesmo brilho ambiente de canto usado nas
       conversas e nas publicações — agora também nos cursos. */
    .course-card::after {
      content: '';
      position: absolute;
      top: -30%;
      right: -20%;
      width: 60%;
      height: 60%;
      z-index: 1;
      background: radial-gradient(circle, rgba(var(--cyan-rgb), .16), transparent 70%);
      pointer-events: none;
    }

    .course-card:nth-child(even)::after {
      background: radial-gradient(circle, rgba(var(--lime-rgb), .16), transparent 70%);
    }

    .course-card::before {
      content: '';
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 2;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--pin);
      box-shadow: 0 0 0 4px rgba(4, 20, 31, .35), 0 0 10px var(--pin);
    }

    .course-card.status-hot { --pin: #ff8a3d; }
    .course-card.status-novo { --pin: var(--cyan); }
    .course-card.status-brevemente { --pin: var(--lime); }
    .course-card.status-auxiliar { --pin: #dfe4ea; }
    .course-card.status-ativo { --pin: var(--cyan); }

    /* A imagem determina a altura do media. Não existe altura fixa nem
       object-fit: cover: flyers verticais, horizontais e quadrados aparecem
       completos, incluindo sempre as extremidades superior e inferior. */
    .course-card-thumb {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 150px;
      line-height: 0;
      background: linear-gradient(145deg, rgba(var(--cyan-rgb), .12), rgba(var(--lime-rgb), .07));
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .course-card-thumb img {
      display: block;
      width: 100%;
      height: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: center;
      flex: 0 0 auto;
      transition: filter .2s ease;
    }

    .course-card:hover .course-card-thumb img {
      filter: brightness(1.04);
    }

    .course-card-thumb-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      min-height: 180px;
      padding: 28px 18px;
      background:
        radial-gradient(ellipse 90% 70% at 30% 20%, rgba(var(--cyan-rgb), .20) 0%, transparent 60%),
        radial-gradient(ellipse 80% 70% at 80% 90%, rgba(var(--lime-rgb), .16) 0%, transparent 60%),
        rgba(255, 255, 255, .03);
    }

    .course-card-thumb-placeholder .ph-icon {
      display: flex;
      opacity: .6;
    }

    .course-card-thumb-placeholder .ph-icon .lz-icon {
      width: 30px;
      height: 30px;
      color: var(--cyan);
    }

    .course-card-thumb-placeholder .ph-cat {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--t3);
      text-align: center;
    }

    .course-card-check {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      color: #04141f;
      box-shadow: 0 3px 10px rgba(0, 0, 0, .32);
    }

    .course-card-check .lz-icon {
      width: 13px;
      height: 13px;
      stroke-width: 3;
    }

    .course-card-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
      padding: 16px 16px 15px;
    }

    .course-card-heading {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .course-card-labels {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px;
      min-height: 18px;
    }

    .course-card-badge-inline {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      width: fit-content;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 4px 8px;
      border-radius: 100px;
    }

    .course-card-badge-inline .lz-icon {
      width: 10px;
      height: 10px;
    }

    .badge-novo { background: rgba(var(--cyan-rgb), .18); color: #bcefff; border: 1px solid rgba(var(--cyan-rgb), .34); }
    .badge-hot { background: rgba(255, 138, 61, .18); color: #ffd3b1; border: 1px solid rgba(255, 138, 61, .36); }
    .badge-auxiliar { background: rgba(255, 255, 255, .10); color: var(--t1); border: 1px solid rgba(255, 255, 255, .18); }
    .badge-brevemente { background: rgba(var(--lime-rgb), .15); color: #d9f7ad; border: 1px solid rgba(var(--lime-rgb), .32); }

    .course-card-cat {
      color: var(--cyan);
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: .10em;
      text-transform: uppercase;
    }

    .course-card-title {
      margin: 0;
      color: var(--t1);
      font-size: 16px;
      font-weight: 800;
      line-height: 1.28;
      letter-spacing: -.02em;
      overflow-wrap: anywhere;
    }

    .course-card-desc {
      margin: 0;
      color: var(--t2);
      font-size: 12px;
      line-height: 1.55;
      overflow-wrap: anywhere;
      white-space: pre-line;
    }

    .course-card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .course-meta-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 100px;
      background: rgba(255, 255, 255, .07);
      color: var(--t2);
      border: 1px solid rgba(255, 255, 255, .11);
      white-space: nowrap;
    }

    .course-meta-pill .lz-icon {
      width: 11px;
      height: 11px;
    }

    .course-meta-pill.vagas-low {
      color: #ffb37a;
      background: rgba(255, 138, 61, .14);
      border-color: rgba(255, 138, 61, .30);
    }

    .course-meta-pill.enrolled-pill {
      color: #b8f5c6;
      background: rgba(var(--lime-rgb), .16);
      border-color: rgba(var(--lime-rgb), .30);
    }

    .course-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
      margin-top: 2px;
      padding-top: 12px;
      border-top: 1px solid transparent;
      border-image: linear-gradient(90deg, rgba(var(--cyan-rgb), .3), rgba(var(--lime-rgb), .2), transparent 85%) 1;
    }

    .course-card-date {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      color: var(--t3);
      font-size: 10px;
      font-weight: 600;
      white-space: nowrap;
    }

    .course-card-date .lz-icon {
      width: 11px;
      height: 11px;
      flex-shrink: 0;
    }

    .course-card-date-empty {
      flex: 1;
      min-width: 0;
    }

    .course-card-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      flex-shrink: 0;
      padding: 8px 11px;
      border: 0;
      border-radius: 9px;
      background: linear-gradient(120deg, var(--cyan), var(--lime));
      color: #04141f;
      font: inherit;
      font-size: 10.5px;
      font-weight: 800;
      white-space: nowrap;
      cursor: pointer;
      transition: transform .18s ease, filter .18s ease;
    }

    .course-card-cta:hover {
      filter: brightness(1.06);
    }

    .course-card-cta:active {
      transform: scale(.95);
    }

    .course-card-cta .lz-icon {
      width: 12px;
      height: 12px;
    }

    .course-card-cta.cta-reserved {
      background: rgba(var(--lime-rgb), .18);
      color: #d4f7a8;
      border: 1px solid rgba(var(--lime-rgb), .38);
    }

    .course-card-cta.cta-soon {
      background: rgba(255, 255, 255, .10);
      color: var(--t2);
    }

    @media (max-width: 640px) {
      .courses-grid-wrap {
        padding-right: 14px;
        padding-left: 14px;
      }

      .courses-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .course-card-content {
        padding: 15px 14px 14px;
      }
    }

    /* ─── TELA NOTIFICAÇÕES DO CURSO ─── */
    #screen-course-notifs {
      position: fixed;
      inset: 0;
      z-index: var(--z-screen);
      display: none;
      flex-direction: column;
      background: var(--app-bg-1);
      opacity: 0;
      transform: translateY(14px);
      transition: var(--trans-screen);
    }

    #screen-course-notifs.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .scn-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: calc(var(--safe-top) + 16px) 16px 12px;
      border-bottom: 1px solid rgba(var(--cyan-rgb), .14);
      flex-shrink: 0;
    }

    .scn-back {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      flex-shrink: 0;
      background: rgba(var(--cyan-rgb), .08);
      border: 1px solid rgba(var(--cyan-rgb), .18);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .15s;
    }

    .scn-back:active {
      background: rgba(var(--cyan-rgb), .20);
    }

    .scn-back svg {
      width: 15px;
      height: 15px;
      stroke: var(--t2);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .scn-title {
      flex: 1;
      font-size: 16px;
      font-weight: 700;
      color: var(--t1);
    }

    .scn-sort {
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .12);
      color: var(--t2);
      border-radius: 8px;
      padding: 5px 10px;
      font-size: 12px;
      font-family: var(--font);
      outline: none;
    }

    .scn-list {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      overscroll-behavior-y: contain;
      padding: 14px clamp(14px, 5vw, 20px) 100px;
      display: flex;
      flex-direction: column;
      gap: clamp(10px, 3vw, 16px);
    }

    /* ── Desafios da aula ── */
    .challenge-card {
      margin-top: 12px;
      border-radius: 14px;
      background: rgba(var(--lime-rgb), .06);
      border: 1px solid rgba(var(--lime-rgb), .24);
      padding: 14px 16px;
      animation: notif-enter .4s cubic-bezier(.22, 1, .36, 1) both;
    }

    .challenge-card.completado {
      opacity: .75;
      border-color: rgba(var(--lime-rgb), .15);
    }

    .challenge-tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: var(--lime);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .challenge-tag::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--lime);
      flex-shrink: 0;
    }

    .challenge-enunciado {
      font-size: 15px;
      font-weight: 600;
      color: var(--t1);
      line-height: 1.55;
      margin-bottom: 14px;
      overflow-wrap: break-word;
    }

    .challenge-opcoes {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .challenge-opcao {
      width: 100%;
      padding: 11px 14px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .04);
      color: var(--t2);
      font-size: 14px;
      font-weight: 500;
      font-family: var(--font);
      cursor: pointer;
      text-align: left;
      transition: background .15s, border-color .15s, color .15s;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .challenge-opcao:active {
      transform: scale(.98);
    }

    .challenge-opcao:hover {
      background: rgba(var(--lime-rgb), .10);
      border-color: rgba(var(--lime-rgb), .32);
      color: var(--t1);
    }

    .challenge-opcao.correta {
      background: rgba(var(--lime-rgb), .16);
      border-color: rgba(var(--lime-rgb), .50);
      color: var(--lime);
    }

    .challenge-opcao.errada {
      background: rgba(231, 76, 76, .12);
      border-color: rgba(231, 76, 76, .35);
      color: #e74c4c;
    }

    .challenge-opcao.disabled {
      pointer-events: none;
      opacity: .65;
    }

    .challenge-aberto-wrap {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .challenge-aberto-input {
      width: 100%;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 10px;
      padding: 10px 14px;
      color: var(--t1);
      font-size: 14px;
      font-family: var(--font);
      outline: none;
      resize: none;
      line-height: 1.55;
      -webkit-user-select: text;
      user-select: text;
    }

    .challenge-aberto-input:focus {
      border-color: rgba(var(--lime-rgb), .40);
    }

    .challenge-submit {
      align-self: flex-end;
      padding: 9px 18px;
      border-radius: 10px;
      border: 1px solid rgba(var(--lime-rgb), .38);
      background: rgba(var(--lime-rgb), .12);
      color: var(--lime);
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: background .15s;
    }

    .challenge-submit:active {
      transform: scale(.96);
    }

    .challenge-resultado {
      margin-top: 10px;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      overflow-wrap: break-word;
    }

    .challenge-resultado.acertou {
      background: rgba(var(--lime-rgb), .12);
      color: var(--lime);
      border: 1px solid rgba(var(--lime-rgb), .28);
    }

    .challenge-resultado.errou {
      background: rgba(231, 76, 76, .10);
      color: #e74c4c;
      border: 1px solid rgba(231, 76, 76, .25);
    }

    .challenge-resultado.aberto {
      background: rgba(var(--cyan-rgb), .10);
      color: var(--cyan);
      border: 1px solid rgba(var(--cyan-rgb), .25);
    }

    /* ─── TELA MINIMALISTA — MICROLIÇÃO DE IDIOMAS ─── */
    #screen-idioma-responder {
      position: fixed;
      inset: 0;
      z-index: var(--z-screen);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: var(--app-bg-1);
      opacity: 0;
      transform: translateY(14px);
      transition: var(--trans-screen);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
    }

    #screen-idioma-responder.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .idm-close {
      position: absolute;
      top: calc(var(--safe-top) + 16px);
      right: 20px;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .12);
      color: var(--t2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 16px;
    }

    .idm-tag {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .idm-tag::before {
      content: '🗣️';
    }

    .idm-card {
      width: 100%;
      max-width: 420px;
    }

    .idm-enunciado {
      font-size: 19.5px;
      font-weight: 700;
      color: var(--t1);
      line-height: 1.45;
      margin-bottom: 22px;
      overflow-wrap: break-word;
      text-align: center;
    }

    .idm-input {
      width: 100%;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 14px;
      padding: 14px 16px;
      color: var(--t1);
      font-size: 17px;
      font-family: var(--font);
      outline: none;
      text-align: center;
    }

    .idm-input:focus {
      border-color: rgba(var(--lime-rgb), .45);
    }

    .idm-submit {
      width: 100%;
      margin-top: 14px;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid rgba(var(--lime-rgb), .38);
      background: rgba(var(--lime-rgb), .14);
      color: var(--lime);
      font-size: 16px;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
    }

    .idm-submit:active {
      transform: scale(.97);
    }

    .idm-resultado {
      margin-top: 20px;
      padding: 16px;
      border-radius: 14px;
      font-size: 15px;
      line-height: 1.6;
      text-align: center;
      animation: notif-enter .35s cubic-bezier(.22, 1, .36, 1) both;
    }

    .idm-resultado.acertou {
      background: rgba(var(--lime-rgb), .12);
      color: var(--lime);
      border: 1px solid rgba(var(--lime-rgb), .28);
    }

    .idm-resultado.errou {
      background: rgba(231, 76, 76, .10);
      color: #e74c4c;
      border: 1px solid rgba(231, 76, 76, .25);
    }

    .idm-contexto {
      display: inline-block;
      margin-top: 6px;
      font-size: 13px;
      font-style: italic;
      opacity: .75;
    }

    .idm-progresso {
      margin-top: 10px;
      font-size: 13px;
      color: var(--t2);
      text-align: center;
    }

    .scn-list::-webkit-scrollbar {
      display: none;
    }

    /* ─── TELA DETALHE DO CURSO ─── */
    #screen-course-detail {
      position: fixed;
      inset: 0;
      z-index: var(--z-screen);
      display: none;
      flex-direction: column;
      background: var(--app-bg-1);
      opacity: 0;
      transform: translateY(14px);
      transition: var(--trans-screen);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      overscroll-behavior-y: contain;
      perspective: 1000px;
    }

    #screen-course-detail::-webkit-scrollbar {
      display: none;
    }

    #screen-course-detail.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .scd-back {
      position: sticky;
      top: 0;
      z-index: 10;
      padding: calc(var(--safe-top)+14px) 16px 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(to bottom, rgba(5, 26, 46, .95) 80%, transparent);
    }

    .scd-back-btn {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      flex-shrink: 0;
      background: rgba(var(--cyan-rgb), .10);
      border: 1px solid rgba(var(--cyan-rgb), .22);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .scd-back-btn svg {
      width: 15px;
      height: 15px;
      stroke: var(--t2);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Atalho de tradução rápida no cabeçalho do leitor de livro (secção 4.1
       do prompt de monetização) — fica em destaque "lima" quando ligado,
       para o utilizador ver de imediato que o texto/leitura estão a ser
       traduzidos, sem precisar de abrir as preferências de voz. */
    .br-translate-toggle-ativo {
      background: rgba(var(--lime-rgb), .16) !important;
      border-color: rgba(var(--lime-rgb), .5) !important;
      transition: background .2s, border-color .2s;
    }
    .br-translate-toggle-ativo svg {
      stroke: var(--lime) !important;
    }

    .scd-back-label {
      font-size: 14px;
      color: var(--t2);
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .scd-hero {
      width: 100%;
      aspect-ratio: 16/9;
      background: rgba(255, 255, 255, .04);
      overflow: hidden;
      flex-shrink: 0;
    }

    .scd-hero img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .scd-hero-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      opacity: .25;
    }

    .scd-body {
      padding: 20px 20px 40px;
    }

    .scd-tags {
      display: flex;
      gap: 7px;
      align-items: center;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    .scd-cat {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--cyan);
      background: rgba(var(--cyan-rgb), .10);
      border: 1px solid rgba(var(--cyan-rgb), .22);
      padding: 3px 9px;
      border-radius: 100px;
    }

    .scd-enrolled {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: var(--lime);
      background: rgba(var(--lime-rgb), .10);
      border: 1px solid rgba(var(--lime-rgb), .25);
      padding: 3px 9px;
      border-radius: 100px;
    }

    .scd-title {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--t1);
      margin-bottom: 10px;
    }

    .scd-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 18px;
    }

    .scd-meta-chip {
      display: flex;
      align-items: center;
      gap: 5px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .10);
      padding: 5px 12px;
      border-radius: 100px;
      font-size: 12px;
      color: var(--t2);
    }

    .scd-section-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 10px;
    }

    .scd-learn-text {
      font-size: 15px;
      color: var(--t2);
      line-height: 1.75;
      margin-bottom: 28px;
    }

    .scd-cta {
      width: 100%;
      padding: 17px;
      border-radius: 18px;
      border: none;
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .28), rgba(var(--lime-rgb), .26));
      border: 1px solid rgba(var(--cyan-rgb), .40);
      box-shadow: 0 4px 24px rgba(var(--cyan-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .14);
      color: var(--t1);
      font-size: 17px;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: all .2s;
    }

    .scd-cta:active {
      transform: scale(.97);
      opacity: .88;
    }

    .scd-cta-soon {
      background: linear-gradient(135deg, rgba(var(--lime-rgb), .18), rgba(var(--cyan-rgb), .14));
      border-color: rgba(var(--lime-rgb), .35);
    }

    /* ═══════════════════════════════════════════════════════════════════
       JORNADA DO CURSO — linha do tempo diagonal, nós por tema/aula,
       personagem Mara desloca-se ao longo do percurso conforme o
       progresso. Vive dentro de screen-course-detail.
       ═══════════════════════════════════════════════════════════════════ */

    .jrn-wrap {
      margin: 4px 0 30px;
      padding: 18px 16px 22px;
      border-radius: var(--radius);
      background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
      animation: jrn-card-in .5s var(--trans-main) both;
    }

    .jrn-wrap::before {
      content: '';
      position: absolute;
      top: -60px;
      right: -60px;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, var(--cyan-glow), transparent 70%);
      pointer-events: none;
      opacity: .5;
    }

    @keyframes jrn-card-in {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .jrn-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
    }

    .jrn-subtitle {
      font-size: 12.5px;
      color: var(--t2);
      line-height: 1.4;
    }

    .jrn-progress-badge {
      position: relative;
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .jrn-ring {
      position: absolute;
      inset: 0;
      width: 44px;
      height: 44px;
      transform: rotate(-90deg);
    }

    .jrn-ring-track {
      fill: none;
      stroke: rgba(255, 255, 255, .10);
      stroke-width: 2.6;
    }

    .jrn-ring-fill {
      fill: none;
      stroke: url(#jrn-ring-gradient);
      stroke: var(--lime);
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-dasharray: 97.39;
      stroke-dashoffset: 97.39;
      transition: stroke-dashoffset 1s cubic-bezier(0.65, 0, 0.35, 1);
    }

    #jrn-progress-pct {
      font-size: 10.5px;
      font-weight: 800;
      color: var(--t1);
      position: relative;
      z-index: 1;
    }

    /* Banner de curso concluído — só aparece quando o admin encerrou as
       aulas do curso e o aluno já viu mesmo a última que foi enviada. */
    .jrn-concluido-banner {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      padding: 14px 16px;
      border-radius: calc(var(--radius) - 4px);
      background: linear-gradient(120deg, rgba(var(--lime-rgb), .16), rgba(var(--lime-rgb), .05));
      border: 1px solid rgba(var(--lime-rgb), .35);
      position: relative;
      z-index: 1;
      animation: jrn-card-in .5s var(--trans-main) both;
    }

    .jrn-concluido-icon {
      font-size: 22px;
      flex-shrink: 0;
      line-height: 1;
    }

    .jrn-concluido-titulo {
      font-size: 13.5px;
      font-weight: 800;
      color: var(--t1);
    }

    .jrn-concluido-texto {
      font-size: 12px;
      color: var(--t2);
      margin-top: 2px;
      line-height: 1.4;
    }

    .jrn-track-scroll {
      position: relative;
      overflow-y: auto;
      overflow-x: hidden;
      max-height: 420px;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
      padding: 10px 0;
    }

    .jrn-track-scroll::-webkit-scrollbar { width: 4px; }
    .jrn-track-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 4px; }

    .jrn-path-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 0;
      overflow: visible;
    }

    .jrn-path-seg-done {
      fill: none;
      stroke: var(--lime);
      stroke-width: 3.5;
      stroke-linecap: round;
      filter: drop-shadow(0 0 6px var(--lime-glow));
    }

    .jrn-path-seg-pending {
      fill: none;
      stroke: rgba(255, 255, 255, .14);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 1 10;
    }

    .jrn-nodes {
      position: relative;
      z-index: 1;
    }

    .jrn-node {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 108px;
      margin-left: -54px;
      cursor: pointer;
      animation: jrn-node-pop .5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      -webkit-tap-highlight-color: transparent;
    }

    @keyframes jrn-node-pop {
      from { opacity: 0; transform: scale(.4) translateY(10px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    .jrn-node-dot {
      position: relative;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      color: var(--t1);
      transition: transform .2s var(--trans-main);
      z-index: 1;
    }

    .jrn-node:active .jrn-node-dot { transform: scale(.9); }

    .jrn-node.is-concluido .jrn-node-dot {
      background: linear-gradient(145deg, var(--lime), #5aa817);
      box-shadow: 0 0 0 4px rgba(var(--lime-rgb), .16), 0 4px 14px rgba(var(--lime-rgb), .30);
    }

    .jrn-node.is-atual .jrn-node-dot {
      background: linear-gradient(145deg, var(--cyan), #1a8fb0);
      box-shadow: 0 0 0 4px rgba(var(--cyan-rgb), .18), 0 4px 18px rgba(var(--cyan-rgb), .40);
    }

    .jrn-node.is-atual .jrn-node-dot::after {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 1.5px solid var(--cyan);
      opacity: .6;
      animation: jrn-pulse-ring 1.8s ease-out infinite;
    }

    @keyframes jrn-pulse-ring {
      0%   { transform: scale(.85); opacity: .7; }
      100% { transform: scale(1.5); opacity: 0; }
    }

    .jrn-node.is-bloqueado .jrn-node-dot {
      background: rgba(255, 255, 255, .05);
      border: 1.5px dashed rgba(255, 255, 255, .18);
      opacity: .55;
    }

    .jrn-node-icon { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .jrn-node.is-bloqueado .jrn-node-icon { stroke: var(--t3); }

    .jrn-node-label {
      margin-top: 8px;
      font-size: 11px;
      font-weight: 700;
      text-align: center;
      color: var(--t2);
      line-height: 1.35;
      max-width: 104px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .jrn-node.is-atual .jrn-node-label { color: var(--t1); }
    .jrn-node.is-bloqueado .jrn-node-label { color: var(--t3); }

    .jrn-node-order {
      margin-top: 2px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--t3);
    }

    /* ── Personagem Mara no percurso ── */
    .jrn-mara {
      position: absolute;
      top: 0;
      left: 0;
      width: 54px;
      height: 54px;
      margin-left: -27px;
      margin-top: -40px;
      z-index: 3;
      pointer-events: none;
      transition: transform .85s cubic-bezier(0.22, 1.4, 0.36, 1);
      will-change: transform;
    }

    .jrn-mara-avatar {
      width: 100%;
      height: 100%;
      animation: jrn-mara-bob 1.6s ease-in-out infinite;
      filter: drop-shadow(0 3px 10px rgba(255, 64, 129, .35));
    }

    @keyframes jrn-mara-bob {
      0%, 100% { transform: translateY(0) rotate(-1.5deg); }
      50%      { transform: translateY(-5px) rotate(1.5deg); }
    }

    .jrn-mara-glow {
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 64, 129, .35), transparent 70%);
      animation: jrn-glow-pulse 1.6s ease-in-out infinite;
      z-index: -1;
    }

    @keyframes jrn-glow-pulse {
      0%, 100% { opacity: .5; transform: scale(.9); }
      50%      { opacity: .9; transform: scale(1.25); }
    }

    .jrn-mara-shadow {
      position: absolute;
      bottom: -6px;
      left: 50%;
      width: 26px;
      height: 7px;
      background: rgba(0, 0, 0, .35);
      border-radius: 50%;
      transform: translateX(-50%);
      filter: blur(2px);
      animation: jrn-shadow-pulse 1.6s ease-in-out infinite;
    }

    @keyframes jrn-shadow-pulse {
      0%, 100% { transform: translateX(-50%) scale(1); opacity: .35; }
      50%      { transform: translateX(-50%) scale(.7); opacity: .18; }
    }

    .jrn-mara.is-walking .jrn-mara-avatar { animation: jrn-mara-walk .5s ease-in-out infinite; }
    @keyframes jrn-mara-walk {
      0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); }
      50%      { transform: translateY(-9px) rotate(4deg) scale(1.04); }
    }

    /* ── Tooltip do nó ── */
    .jrn-tooltip {
      position: fixed;
      left: 20px;
      right: 20px;
      bottom: 20px;
      max-width: 420px;
      margin: 0 auto;
      background: linear-gradient(165deg, rgba(15, 32, 50, .97), rgba(9, 22, 38, .98));
      border: 1px solid var(--border-c);
      border-radius: 20px;
      padding: 20px 20px 18px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04) inset;
      z-index: var(--z-toast, 1500);
      opacity: 0;
      pointer-events: none;
      transform: translateY(16px) scale(.97);
      transition: opacity .28s var(--trans-main), transform .28s var(--trans-main);
    }

    .jrn-tooltip.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .jrn-tooltip-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .06);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--t2);
      cursor: pointer;
    }

    .jrn-tooltip-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .10em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 100px;
      margin-bottom: 10px;
    }

    .jrn-tooltip-badge.b-concluido { color: var(--lime); background: rgba(var(--lime-rgb), .12); border: 1px solid rgba(var(--lime-rgb), .28); }
    .jrn-tooltip-badge.b-atual     { color: var(--cyan); background: rgba(var(--cyan-rgb), .12); border: 1px solid rgba(var(--cyan-rgb), .28); }
    .jrn-tooltip-badge.b-bloqueado { color: var(--t3); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .10); }

    .jrn-tooltip-title {
      font-size: 17px;
      font-weight: 800;
      color: var(--t1);
      margin-bottom: 6px;
    }

    .jrn-tooltip-desc {
      font-size: 13px;
      color: var(--t2);
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .jrn-tooltip-btn {
      width: 100%;
      padding: 13px;
      border-radius: 14px;
      border: none;
      font-family: var(--font);
      font-size: 14.5px;
      font-weight: 700;
      cursor: pointer;
      transition: transform .15s;
    }

    .jrn-tooltip-btn:active { transform: scale(.97); }

    .jrn-tooltip-btn.btn-concluir {
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      color: #06131f;
    }

    .jrn-tooltip-btn.btn-revisitar {
      background: rgba(var(--lime-rgb), .12);
      border: 1px solid rgba(var(--lime-rgb), .28);
      color: var(--lime);
    }

    .jrn-tooltip-btn.btn-bloqueado {
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .10);
      color: var(--t3);
      cursor: default;
    }

    /* ── Barra de progresso do nó actual, dentro do tooltip ── */
    .jrn-tooltip-progress {
      margin-bottom: 14px;
    }

    .jrn-tooltip-progress-track {
      width: 100%;
      height: 6px;
      border-radius: 100px;
      background: rgba(255, 255, 255, .08);
      overflow: hidden;
      margin-bottom: 6px;
    }

    .jrn-tooltip-progress-fill {
      height: 100%;
      border-radius: 100px;
      background: linear-gradient(90deg, var(--cyan), var(--lime));
      width: 0%;
      transition: width .4s var(--trans-main);
    }

    .jrn-tooltip-progress-label {
      font-size: 11.5px;
      color: var(--t3);
    }

    .jrn-tooltip-note {
      font-size: 12.5px;
      color: var(--t3);
      line-height: 1.6;
      margin-bottom: 14px;
    }

    .jrn-tooltip-note:empty { display: none; margin: 0; }

    /* ─── TELAS: SUBNÓS DA JORNADA + DETALHE DO SUBNÓ ───
       Reutilizam a base visual de #screen-course-notifs (.scn-header,
       .scn-back, .scn-title, .scn-list) — só o essencial (posição/fade)
       precisa de ser redeclarado por selector. */
    #screen-jrn-subnos,
    #screen-jrn-subno-detalhe {
      position: fixed;
      inset: 0;
      /* Antes usava calc(var(--z-screen) + 1) = 1001 — mais baixo que o
         fundo escuro/desfocado da jornada (.jrn-tooltip-overlay, 1499, e
         .jrn-tooltip, 1500). Ao clicar em "Ver lições deste tema", esse
         fundo só desaparece com uma transição de ~280ms; como este ecrã
         tinha um z-index muito mais baixo, abria por BAIXO do fundo ainda
         a desvanecer — dando o efeito de "tudo fusco/contraste errado" e
         tornando as notificações do subnó difíceis de ler. Agora fica
         sempre acima de todo o sistema de tooltip da jornada.
      */
      z-index: calc(var(--z-toast, 1500) + 10);
      display: none;
      flex-direction: column;
      background: var(--app-bg-1);
      opacity: 0;
      transform: translateY(14px);
      transition: var(--trans-screen);
    }

    #screen-jrn-subnos.visible,
    #screen-jrn-subno-detalhe.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── Lista de subnós (lições) de um nó/tema ── */
    .jrn-subno-item {
      border-radius: 16px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      border: 1.5px solid var(--card-a-border);
      background: var(--card-a);
      box-shadow: var(--card-shadow);
      transition: transform .15s, background .15s;
      animation: notif-enter .4s cubic-bezier(.22, 1, .36, 1) both;
    }

    .jrn-subno-item:active { transform: scale(.99); }

    .jrn-subno-item.is-bloqueado { opacity: .55; cursor: default; }

    .jrn-subno-dot {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
    }

    .jrn-subno-item.is-concluido .jrn-subno-dot {
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      color: #06131f;
    }

    .jrn-subno-item.is-atual .jrn-subno-dot {
      background: rgba(var(--cyan-rgb), .14);
      border: 1.5px solid rgba(var(--cyan-rgb), .35);
      color: var(--cyan);
    }

    .jrn-subno-item.is-bloqueado .jrn-subno-dot {
      background: rgba(255, 255, 255, .05);
      border: 1.5px solid rgba(255, 255, 255, .10);
      color: var(--t3);
    }

    .jrn-subno-info { flex: 1; min-width: 0; }

    .jrn-subno-titulo {
      font-size: 14.5px;
      font-weight: 700;
      color: var(--t1);
      margin-bottom: 3px;
    }

    .jrn-subno-item.is-bloqueado .jrn-subno-titulo { color: var(--t2); }

    .jrn-subno-meta {
      font-size: 12px;
      color: var(--t3);
    }

    .jrn-subno-chevron {
      width: 16px;
      height: 16px;
      stroke: var(--t3);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    /* ── Detalhe do subnó (descrição + notificações recebidas) ── */
    .jrn-subno-det-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 18px clamp(14px, 5vw, 20px) 100px;
    }

    .jrn-subno-det-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .10em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 100px;
      margin-bottom: 12px;
    }

    .jrn-subno-det-badge.b-concluido { color: var(--lime); background: rgba(var(--lime-rgb), .12); border: 1px solid rgba(var(--lime-rgb), .28); }
    .jrn-subno-det-badge.b-atual     { color: var(--cyan); background: rgba(var(--cyan-rgb), .12); border: 1px solid rgba(var(--cyan-rgb), .28); }
    .jrn-subno-det-badge.b-bloqueado { color: var(--t3); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .10); }

    .jrn-subno-det-desc {
      font-size: 14px;
      color: var(--t2);
      line-height: 1.7;
      margin-bottom: 22px;
    }

    .jrn-subno-det-section-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 12px;
    }

    /* ── Cada notificação já recebida deste subnó ── */
    .jrn-subno-notif-card {
      border-radius: 16px;
      padding: 14px 16px;
      border: 1.5px solid var(--card-a-border);
      background: var(--card-a);
      box-shadow: var(--card-shadow);
      margin-bottom: 12px;
      animation: notif-enter .4s cubic-bezier(.22, 1, .36, 1) both;
    }

    .jrn-subno-notif-tag {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 6px;
    }

    .jrn-subno-notif-card.tipo-revisao .jrn-subno-notif-tag { color: var(--lime); }

    .jrn-subno-notif-titulo {
      font-size: 14px;
      font-weight: 700;
      color: var(--t1);
      margin-bottom: 5px;
    }

    .jrn-subno-notif-corpo {
      font-size: 13px;
      color: var(--t2);
      line-height: 1.6;
      margin-bottom: 8px;
    }

    .jrn-subno-notif-time {
      font-size: 11.5px;
      color: var(--t3);
    }

    .jrn-tooltip-overlay {
      position: fixed;
      inset: 0;
      background: rgba(3, 10, 18, .55);
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
      z-index: calc(var(--z-toast, 1500) - 1);
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s var(--trans-main);
    }

    .jrn-tooltip-overlay.visible { opacity: 1; pointer-events: auto; }

    .jrn-node.is-bloqueado.jrn-shake { animation: jrn-shake .4s; }
    @keyframes jrn-shake {
      0%, 100% { transform: translateX(0); }
      20%      { transform: translateX(-5px); }
      40%      { transform: translateX(5px); }
      60%      { transform: translateX(-4px); }
      80%      { transform: translateX(4px); }
    }

    /* ── Confetti ao concluir um nó ── */
    .jrn-confetti-piece {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 1px;
      z-index: 4;
      pointer-events: none;
      animation: jrn-confetti-fall 900ms cubic-bezier(0.15, 0.7, 0.35, 1) forwards;
    }

    @keyframes jrn-confetti-fall {
      0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
      100% { transform: var(--jrn-confetti-end) rotate(var(--jrn-confetti-rot)) scale(.4); opacity: 0; }
    }

    @media (max-width: 380px) {
      .jrn-track-scroll { max-height: 380px; }
    }

    /* ─── TELA LEITOR DE LIVRO (texto completo do bloco, não só preview) ─── */
    #screen-book-reader {
      position: fixed;
      inset: 0;
      z-index: var(--z-screen);
      display: none;
      flex-direction: column;
      background: var(--app-bg-1);
      opacity: 0;
      transform: translateY(14px);
      transition: var(--trans-screen);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
    }

    #screen-book-reader::-webkit-scrollbar {
      display: none;
    }

    #screen-book-reader.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .br-body {
      padding: 8px 20px calc(var(--safe-bot, 0px) + 40px);
    }

    .br-part-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 16px;
    }

    .br-text {
      font-size: 16px;
      color: var(--t2);
      line-height: 1.85;
      white-space: pre-wrap;
      margin-bottom: 28px;
      -webkit-user-select: text;
      user-select: text;
    }

    /* Marca o ponto exacto de continuação quando o leitor abre a partir de
       uma notificação de trecho ("Ler um pouco mais") — ver abrirLeitorLivro
       / _carregarChunkLeitor em js.js. */
    .br-marcador-trecho {
      border-radius: 4px;
      transition: background-color 0.6s ease, box-shadow 0.6s ease;
    }
    .br-marcador-trecho-ativo {
      background-color: rgba(var(--cyan-rgb), 0.18);
      box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), 0.18);
    }

    /* Seletor "De → Para" do par de idiomas usado na tradução (leitura em
       trechos e livro completo — ver _leitorRenderSeletorIdiomas em js.js). */
    .br-idiomas-par {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 4px 0 18px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .br-idioma-select {
      appearance: none;
      -webkit-appearance: none;
      font-family: var(--font);
      font-size: 12.5px;
      font-weight: 600;
      color: var(--t1);
      background: rgba(255,255,255,.05);
      border: 1px solid var(--border, rgba(255,255,255,.14));
      border-radius: 100px;
      padding: 8px 30px 8px 14px;
      cursor: pointer;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
      background-repeat: no-repeat;
      background-position: right 12px center;
      max-width: 132px;
    }

    .br-idioma-select:focus {
      outline: none;
      border-color: var(--cyan);
    }

    .br-idiomas-swap-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid rgba(41,197,234,.30);
      background: rgba(41,197,234,.10);
      color: var(--cyan);
      cursor: pointer;
      flex-shrink: 0;
      transition: transform .18s;
    }

    .br-idiomas-swap-btn:active {
      transform: rotate(180deg);
    }

    .br-nav {
      display: flex;
      gap: 10px;
      position: sticky;
      bottom: 12px;
    }

    .br-nav-btn {
      flex: 1;
      padding: 14px;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: opacity .18s, transform .15s;
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .28), rgba(var(--lime-rgb), .26));
      border: 1px solid rgba(var(--cyan-rgb), .40);
      color: var(--t1);
    }

    .br-nav-btn:active {
      transform: scale(.97);
    }

    .br-nav-btn:disabled {
      opacity: .35;
      cursor: default;
    }

    .br-locked-msg {
      text-align: center;
      font-size: 14px;
      color: var(--t3);
      padding: 20px 10px;
    }

    /* ══════════════════════════════════════════════════════════════════
       MODO DE LEITURA ESCURO (tema Mara) — só se aplica dentro do leitor
       de livro (#screen-book-reader.br-modo-escuro), pensado para leitura
       prolongada: fundo quase preto com um tom quente/rosado subtil em vez
       do gradiente azul/verde vivo do resto da app (que compete com o
       texto e cansa mais a vista ao ler), texto mais claro e mais espaçado
       para melhor contraste e legibilidade, e os destaques a usar o rosa
       de assinatura da Mara (#FF4081, ver .jrn-mara em cima) em vez do
       ciano/lima do tema geral. Preferência guardada em localStorage
       ('luz_leitor_modo_escuro') e aplicada por _leitorAlternarModoEscuro
       / _leitorAplicarModoEscuro (js.js). ══════════════════════════════ */
    #screen-book-reader.br-modo-escuro {
      background: #000000;
    }

    #screen-book-reader.br-modo-escuro .scd-back {
      background: linear-gradient(to bottom, rgba(12, 7, 10, .95) 80%, transparent);
    }

    #screen-book-reader.br-modo-escuro .scd-back-btn {
      background: var(--mara-soft);
      border-color: rgba(255, 64, 129, .22);
    }

    #screen-book-reader.br-modo-escuro .scd-back-btn svg {
      stroke: #d99bb0;
    }

    #screen-book-reader.br-modo-escuro .scd-back-label {
      color: #d9c3cd;
    }

    #screen-book-reader.br-modo-escuro .br-part-label {
      color: var(--mara);
      opacity: .8;
    }

    /* Texto do livro: mais claro (contraste bem acima do tema normal),
       levemente quente para não ser um branco puro que ofusca, e com
       mais respiração entre linhas/parágrafos — o essencial pedido para
       "melhor para a leitura". */
    #screen-book-reader.br-modo-escuro .br-text {
      color: #f1e6ec;
      font-size: 16.5px;
      line-height: 1.95;
      letter-spacing: .1px;
      margin-bottom: 32px;
    }

    #screen-book-reader.br-modo-escuro .br-locked-msg {
      color: #a98d97;
    }

    #screen-book-reader.br-modo-escuro .br-marcador-trecho-ativo {
      background-color: rgba(255, 64, 129, 0.16);
      box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.16);
    }

    #screen-book-reader.br-modo-escuro .br-idioma-select {
      color: #f1e6ec;
      background: rgba(255, 64, 129, .06);
      border-color: rgba(255, 64, 129, .22);
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23D99BB0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    }

    #screen-book-reader.br-modo-escuro .br-idioma-select:focus {
      border-color: var(--mara);
    }

    #screen-book-reader.br-modo-escuro .br-idiomas-swap-btn {
      border-color: rgba(255, 64, 129, .30);
      background: rgba(255, 64, 129, .10);
      color: var(--mara);
    }

    #screen-book-reader.br-modo-escuro .br-nav-btn {
      background: linear-gradient(135deg, rgba(255, 64, 129, .30), rgba(255, 64, 129, .14));
      border-color: rgba(255, 64, 129, .42);
      color: #f1e6ec;
    }

    /* Botão de alternância (lua/sol) — brilho rosa quando o modo escuro
       de leitura está ligado, mesmo padrão visual do botão de tradução
       rápida (.br-translate-toggle-ativo), só que a rosa em vez de lima. */
    .br-darkmode-btn-ativo {
      background: rgba(255, 64, 129, .16) !important;
      border-color: rgba(255, 64, 129, .5) !important;
      transition: background .2s, border-color .2s;
    }
    .br-darkmode-btn-ativo svg {
      stroke: var(--mara) !important;
    }

    /* ─── TELA UPLOAD PDF ─── */
    #screen-pdf-upload {
      position: fixed;
      inset: 0;
      z-index: var(--z-screen);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--app-bg-1);
      padding: 32px 28px;
      opacity: 0;
      transform: translateY(14px);
      transition: var(--trans-screen);
    }

    #screen-pdf-upload.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .pdf-upload-icon {
      font-size: 52px;
      margin-bottom: 20px;
    }

    .pdf-upload-title {
      font-size: 22px;
      font-weight: 800;
      color: var(--t1);
      margin-bottom: 8px;
      text-align: center;
    }

    .pdf-upload-sub {
      font-size: 14px;
      color: var(--t3);
      margin-bottom: 32px;
      text-align: center;
      line-height: 1.6;
    }

    .pdf-drop-zone {
      width: 100%;
      max-width: 340px;
      padding: 28px 20px;
      border: 1.5px dashed rgba(var(--cyan-rgb), .35);
      border-radius: 18px;
      background: rgba(var(--cyan-rgb), .04);
      text-align: center;
      cursor: pointer;
      transition: border-color .2s, background .2s;
      margin-bottom: 20px;
    }

    .pdf-drop-zone:hover {
      border-color: rgba(var(--cyan-rgb), .65);
      background: rgba(var(--cyan-rgb), .08);
    }

    .pdf-drop-zone input[type=file] {
      display: none;
    }

    .pdf-drop-label {
      font-size: 14px;
      color: var(--t2);
      margin-top: 10px;
    }

    .pdf-file-name {
      font-size: 13px;
      color: var(--cyan);
      margin-top: 8px;
      font-weight: 600;
    }

    .pdf-err {
      font-size: 13px;
      color: #f87171;
      margin-top: 8px;
      min-height: 16px;
    }

    .pdf-submit {
      width: 100%;
      max-width: 340px;
      padding: 16px;
      border-radius: 16px;
      border: none;
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .30), rgba(var(--lime-rgb), .28));
      border: 1px solid rgba(var(--cyan-rgb), .40);
      color: var(--t1);
      font-size: 16px;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: all .2s;
      opacity: .45;
    }

    .pdf-submit.ready {
      opacity: 1;
    }

    .pdf-submit:active {
      transform: scale(.97);
    }

    /* ─── TELA CONFIRMAÇÃO ─── */
    #screen-confirm {
      position: fixed;
      inset: 0;
      z-index: var(--z-screen);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: var(--app-bg-1);
      padding: 32px 28px;
      opacity: 0;
      transform: translateY(14px);
      transition: var(--trans-screen);
    }

    #screen-confirm.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .confirm-icon {
      font-size: 56px;
      margin-bottom: 20px;
    }

    .confirm-title {
      font-size: 22px;
      font-weight: 800;
      color: var(--t1);
      margin-bottom: 10px;
    }

    .confirm-sub {
      font-size: 15px;
      color: var(--t3);
      line-height: 1.7;
      margin-bottom: 36px;
      max-width: 300px;
    }

    .confirm-back-btn {
      padding: 16px 40px;
      border-radius: 16px;
      border: none;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .14);
      color: var(--t2);
      font-size: 16px;
      font-weight: 600;
      font-family: var(--font);
      cursor: pointer;
      transition: all .2s;
    }

    .confirm-back-btn:active {
      transform: scale(.97);
    }

    /* ─── TELAS DE TRADUÇÃO (pedido de pagamento + upload do comprovativo) ───
       Usam --z-screen-overlay (acima de --z-screen) de propósito: têm de
       cobrir o leitor de livro quando o utilizador pede explicitamente a
       tradução do livro completo. Nunca abrem sozinhas a partir da
       tradução silenciosa em segundo plano (ver _leitorAplicarTraducaoVisual
       em js.js) — só a partir de uma ação explícita do utilizador. */
    #screen-traducao-pagamento {
      position: fixed;
      inset: 0;
      z-index: var(--z-screen-overlay);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: var(--app-bg-1);
      padding: 32px 28px;
      opacity: 0;
      transform: translateY(14px);
      transition: var(--trans-screen);
    }

    #screen-traducao-pagamento.visible {
      opacity: 1;
      transform: translateY(0);
    }

    #screen-traducao-upload {
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-screen-overlay) + 10);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--app-bg-1);
      padding: 32px 28px;
      opacity: 0;
      transform: translateY(14px);
      transition: var(--trans-screen);
    }

    #screen-traducao-upload.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ═══════════════════════════════════ ACCESSIBILITY ═══ */
    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
      }
    }

    /* ═══════════════════════════════════ DIAGNÓSTICO DE PERFIL ═══ */
    #diag-screen {
      position: fixed;
      inset: 0;
      z-index: 520;
      display: none;
      flex-direction: column;
      align-items: center;
      background: var(--app-bg-1);
      opacity: 0;
      transition: opacity .5s ease;
      overflow: hidden;
    }

    #diag-screen.visible {
      opacity: 1;
    }

    #diag-screen::-webkit-scrollbar {
      display: none;
    }

    /* Progress bar topo */
    #diag-prog-track {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: rgba(255, 255, 255, .06);
      z-index: 10;
      flex-shrink: 0;
    }

    #diag-prog-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--cyan), var(--lime));
      transition: width .6s cubic-bezier(.4, 0, .2, 1);
      box-shadow: 0 0 10px rgba(var(--cyan-rgb), .5);
    }

    /* Header diagnóstico */
    #diag-header {
      position: relative;
      z-index: 5;
      flex-shrink: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: calc(var(--safe-top) + 18px) 20px 14px;
      border-bottom: 1px solid rgba(var(--cyan-rgb), .10);
    }

    .diag-back {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      flex-shrink: 0;
      background: rgba(var(--cyan-rgb), .08);
      border: 1px solid rgba(var(--cyan-rgb), .18);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .15s, transform .15s;
    }

    .diag-back:active {
      background: rgba(var(--cyan-rgb), .20);
      transform: scale(.9);
    }

    .diag-back svg {
      width: 15px;
      height: 15px;
      stroke: var(--t2);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .diag-header-center {
      text-align: center;
    }

    .diag-header-title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--t2);
    }

    .diag-header-counter {
      font-size: 12px;
      color: var(--t3);
      margin-top: 2px;
    }

    .diag-header-counter strong {
      color: var(--cyan);
      font-weight: 600;
    }

    .diag-header-right {
      width: 36px;
    }

    /* Slides container */
    #diag-slides-wrap {
      flex: 1;
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    #diag-slides-track {
      display: flex;
      height: 100%;
      transition: transform .4s cubic-bezier(.32, .72, 0, 1);
      will-change: transform;
    }

    .diag-slide {
      flex-shrink: 0;
      width: 100vw;
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      overscroll-behavior-y: contain;
      perspective: 1000px;
      /* Espaço lateral para o texto não ficar colado às bordas do ecrã,
         e espaço inferior generoso para o conteúdo poder fazer scroll
         por completo acima da barra flutuante #diag-bottom (que é
         position:absolute e não reserva espaço no fluxo normal). */
      padding: 24px 22px calc(var(--safe-bot) + 110px);
      box-sizing: border-box;
    }

    .diag-slide::-webkit-scrollbar {
      display: none;
    }

    @media (min-width:700px) {
      .diag-slide {
        width: 840px;
      }
    }

    /* Intro slide */
    .diag-intro-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(var(--cyan-rgb), .08);
      border: 1px solid rgba(var(--cyan-rgb), .20);
      padding: 5px 14px;
      border-radius: 100px;
      margin-bottom: 20px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--cyan);
    }

    .diag-intro-title {
      font-size: clamp(26px, 6vw, 34px);
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1.15;
      color: var(--t1);
      margin-bottom: 14px;
      text-align: center;
    }

    .diag-intro-title span {
      background: linear-gradient(90deg, var(--cyan), var(--lime));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .diag-intro-sub {
      font-size: 15px;
      color: var(--t3);
      line-height: 1.7;
      text-align: center;
      max-width: 300px;
      margin: 0 auto 28px;
    }

    .diag-meta-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      margin-bottom: 24px;
    }

    .diag-meta-item {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 16px;
      padding: 16px 10px;
      text-align: center;
    }

    .diag-meta-num {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -.02em;
      background: linear-gradient(90deg, var(--cyan), var(--lime));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: block;
    }

    .diag-meta-label {
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--t3);
      margin-top: 4px;
      display: block;
    }

    .diag-note {
      background: rgba(var(--cyan-rgb), .05);
      border: 1px solid rgba(var(--cyan-rgb), .14);
      border-left: 2px solid var(--cyan);
      border-radius: 12px;
      padding: 14px 16px;
      font-size: 13px;
      color: var(--t3);
      line-height: 1.7;
      width: 100%;
      margin-bottom: 0;
    }

    /* Pergunta slide */
    .diag-model-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      background: rgba(var(--cyan-rgb), .07);
      border: 1px solid rgba(var(--cyan-rgb), .16);
      padding: 5px 13px;
      border-radius: 100px;
      flex-shrink: 0;
      align-self: flex-start;
    }

    .diag-model-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--cyan);
      flex-shrink: 0;
    }

    .diag-model-name {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--cyan);
    }

    .diag-model-sep {
      color: rgba(var(--cyan-rgb), .3);
      font-size: 12px;
    }

    .diag-model-desc {
      font-size: 11px;
      color: var(--t3);
      letter-spacing: .08em;
    }

    .diag-question-text {
      font-size: clamp(16px, 3.8vw, 20px);
      font-weight: 600;
      letter-spacing: -.015em;
      color: var(--t1);
      line-height: 1.45;
      margin-bottom: 28px;
      width: 100%;
      overflow-wrap: break-word;
      word-break: break-word;
      hyphens: auto;
      padding-right: 8px;
    }

    /* Melhoria extra para opções longas */
    .diag-opt-text {
      font-size: clamp(13px, 3.2vw, 14.5px);
      font-weight: 400;
      line-height: 1.65;
      color: var(--t2);
      flex: 1;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .diag-options {
      display: flex;
      flex-direction: column;
      gap: 9px;
      width: 100%;
    }

    .diag-opt-btn {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 18px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .04);
      border: 1.5px solid rgba(255, 255, 255, .09);
      cursor: pointer;
      text-align: left;
      transition: all .22s;
      position: relative;
      overflow: hidden;
      width: 100%;
    }

    .diag-opt-btn::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0;
      background: linear-gradient(90deg, rgba(var(--cyan-rgb), .09), transparent);
      transition: width .3s ease;
    }

    .diag-opt-btn:hover {
      border-color: rgba(var(--cyan-rgb), .30);
    }

    .diag-opt-btn:hover::before {
      width: 100%;
    }

    .diag-opt-btn.sel {
      border-color: rgba(var(--cyan-rgb), .50);
      background: rgba(var(--cyan-rgb), .10);
    }

    .diag-opt-btn.sel .diag-opt-key {
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      border-color: transparent;
      color: #0b0f14;
    }

    .diag-opt-key {
      flex-shrink: 0;
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .05em;
      color: var(--t3);
      border: 1.5px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .04);
      transition: all .22s;
      margin-top: 1px;
    }

    .diag-opt-text {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.6;
      color: var(--t2);
      transition: color .22s;
      position: relative;
      z-index: 1;
    }

    .diag-opt-btn.sel .diag-opt-text,
    .diag-opt-btn:hover .diag-opt-text {
      color: var(--t1);
    }

    /* Resultado slide */
    .diag-result-header {
      text-align: center;
      margin-bottom: 28px;
      width: 100%;
    }

    .diag-result-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(var(--lime-rgb), .08);
      border: 1px solid rgba(var(--lime-rgb), .22);
      padding: 5px 14px;
      border-radius: 100px;
      margin-bottom: 16px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--lime);
    }

    .diag-result-title {
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--t1);
      margin-bottom: 8px;
    }

    .diag-result-sub {
      font-size: 14px;
      color: var(--t3);
      line-height: 1.6;
    }

    /* Radar */
    #diag-radar-wrap {
      width: 100%;
      max-width: 300px;
      margin: 0 auto 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #diag-radar-wrap svg {
      overflow: visible;
    }

    /* Insight block */
    .diag-insight-block {
      width: 100%;
      background: rgba(var(--cyan-rgb), .05);
      border: 1px solid rgba(var(--cyan-rgb), .14);
      border-left: 2px solid var(--cyan);
      border-radius: 16px;
      padding: 20px 20px;
      margin-bottom: 20px;
    }

    .diag-insight-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--t1);
      margin-bottom: 10px;
    }

    .diag-insight-body {
      font-size: 14px;
      color: var(--t2);
      line-height: 1.75;
    }

    .diag-insight-body strong {
      color: var(--t1);
      font-weight: 600;
    }

    .diag-insight-body p+p {
      margin-top: 10px;
    }

    /* Profile cards grid */
    .diag-cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      margin-bottom: 20px;
    }

    .diag-profile-card {
      background: var(--card-a);
      border: 1.5px solid var(--card-a-border);
      box-shadow: var(--card-shadow);
      border-radius: 16px;
      padding: 16px;
      transition: background .2s, border-color .2s;
    }

    /* Alternância Luzayadio nos cartões de diagnóstico do perfil de aprendizagem */
    .diag-profile-card:nth-child(even) {
      background: var(--card-b);
      border-color: var(--card-b-border);
    }

    .diag-profile-card:hover {
      border-color: var(--card-a-border);
      transform: translateY(-1px);
    }

    .diag-card-model {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 6px;
    }

    .diag-card-label {
      font-size: 14px;
      font-weight: 700;
      color: var(--t1);
      line-height: 1.25;
      margin-bottom: 6px;
    }

    .diag-card-desc {
      font-size: 12px;
      color: var(--t3);
      line-height: 1.6;
    }

    .diag-card-bar-wrap {
      height: 2px;
      background: rgba(255, 255, 255, .06);
      border-radius: 1px;
      margin-top: 12px;
      overflow: hidden;
    }

    .diag-card-bar-fill {
      height: 100%;
      border-radius: 1px;
      transition: width 1s cubic-bezier(.4, 0, .2, 1) .2s;
    }

    .diag-bar-high .diag-card-bar-fill {
      background: var(--lime);
    }

    .diag-bar-mid .diag-card-bar-fill {
      background: var(--cyan);
    }

    .diag-bar-low .diag-card-bar-fill {
      background: rgba(248, 113, 113, .8);
    }

    .diag-bar-neu .diag-card-bar-fill {
      background: linear-gradient(90deg, var(--cyan), var(--lime));
    }

    .diag-badge-correct {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(var(--lime-rgb), .10);
      border: 1px solid rgba(var(--lime-rgb), .25);
      color: var(--lime);
      font-size: 10px;
      letter-spacing: .08em;
      padding: 2px 8px;
      border-radius: 100px;
      margin-bottom: 8px;
    }

    .diag-badge-wrong {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(248, 113, 113, .08);
      border: 1px solid rgba(248, 113, 113, .22);
      color: rgba(248, 113, 113, .85);
      font-size: 10px;
      letter-spacing: .08em;
      padding: 2px 8px;
      border-radius: 100px;
      margin-bottom: 8px;
    }

    /* Bottom bar (nav) do diagnóstico */
    #diag-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 14px 24px calc(var(--safe-bot) + 16px);
      background: linear-gradient(to top, rgba(5, 26, 46, .96) 0%, rgba(5, 26, 46, .7) 60%, transparent 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 10;
    }

    .diag-counter-text {
      font-size: 12px;
      color: var(--t3);
      letter-spacing: .08em;
    }

    .diag-counter-text strong {
      color: var(--cyan);
      font-weight: 600;
    }

    .diag-btn-next {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 26px;
      border-radius: 14px;
      border: none;
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .30), rgba(var(--lime-rgb), .26));
      border: 1px solid rgba(var(--cyan-rgb), .40);
      box-shadow: 0 4px 20px rgba(var(--cyan-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .14);
      color: var(--t1);
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: all .22s;
      opacity: .35;
      pointer-events: none;
    }

    .diag-btn-next.ready {
      opacity: 1;
      pointer-events: all;
    }

    .diag-btn-next:active {
      transform: scale(.96);
      opacity: .85;
    }

    .diag-btn-start {
      width: 100%;
      padding: 15px;
      border-radius: 16px;
      border: none;
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .30), rgba(var(--lime-rgb), .26));
      border: 1px solid rgba(var(--cyan-rgb), .40);
      box-shadow: 0 4px 20px rgba(var(--cyan-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .14);
      color: var(--t1);
      font-size: 16px;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: all .22s;
    }

    .diag-btn-start:active {
      transform: scale(.97);
      opacity: .88;
    }

    .diag-btn-finish {
      width: 100%;
      padding: 15px;
      border-radius: 16px;
      border: none;
      background: linear-gradient(135deg, rgba(var(--lime-rgb), .30), rgba(var(--cyan-rgb), .24));
      border: 1px solid rgba(var(--lime-rgb), .40);
      box-shadow: 0 4px 20px rgba(var(--lime-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .14);
      color: var(--t1);
      font-size: 16px;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: all .22s;
    }

    .diag-btn-finish:active {
      transform: scale(.97);
      opacity: .88;
    }

    @keyframes diag-fade-up {
      from {
        opacity: 0;
        transform: translateY(14px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .diag-anim-card {
      animation: diag-fade-up .45s ease both;
    }

    /* ── RESPOSTAS & LIKES ── */
    .post-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .post-action-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      background: none;
      border: none;
      color: var(--t2);
      font-family: var(--font);
      font-size: 13px;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 20px;
      transition: background .15s, color .15s;
    }

    .post-action-btn:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    .post-action-btn.liked {
      color: #ff4d6d;
      animation: post-like-pop .35s var(--trans-main, ease);
    }

    .post-action-btn.liked svg {
      fill: #ff4d6d;
      stroke: #ff4d6d;
    }

    @keyframes post-like-pop {
      0% { transform: scale(1); }
      45% { transform: scale(1.28); }
      100% { transform: scale(1); }
    }

    .post-action-btn svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    .post-replies-wrap {
      margin-top: 10px;
      display: none;
    }

    .post-replies-wrap.open {
      display: block;
    }

    .reply-card {
      display: flex;
      gap: 8px;
      padding: 8px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .reply-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #051a2e;
      flex-shrink: 0;
      overflow: hidden;
    }

    .reply-body {
      flex: 1;
      min-width: 0;
    }

    .reply-username {
      font-size: 12px;
      font-weight: 600;
      color: var(--t1);
      margin-bottom: 2px;
    }

    .reply-text {
      font-size: 13px;
      color: var(--t2);
      line-height: 1.45;
    }

    .reply-time {
      font-size: 11px;
      color: var(--t3);
      margin-top: 3px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .reply-input-wrap {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      align-items: flex-end;
    }

    .reply-input {
      flex: 1;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: 14px;
      padding: 8px 12px;
      font-family: var(--font);
      font-size: 13px;
      color: var(--t1);
      resize: none;
      min-height: 36px;
      max-height: 80px;
      outline: none;
      transition: border-color .2s;
    }

    .reply-input:focus {
      border-color: rgba(var(--cyan-rgb), 0.35);
    }

    .reply-input::placeholder {
      color: var(--t3);
    }

    .reply-send-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: opacity .15s;
    }

    .reply-send-btn:disabled {
      opacity: .4;
      cursor: default;
    }

    .reply-send-btn svg {
      width: 14px;
      height: 14px;
      stroke: #051a2e;
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Botão "Fixar partilha" — mesmo estilo dos outros post-action-btn,
       fica activo (cyan) quando a partilha está fixada no canto */
    .pin-btn {
      margin-left: auto;
    }

    .pin-btn.pinned {
      color: var(--cyan);
    }

    .pin-btn.pinned svg {
      fill: var(--cyan);
      stroke: var(--cyan);
    }

    /* Botão "Apagar publicação" — só desenhado dentro do Perfil (ver
       _renderPosts/opts.podeApagar em js.js), nunca no feed da Partilha. */
    .post-delete-btn:hover,
    .post-delete-btn:focus-visible {
      color: var(--danger, #e5484d);
    }

    /* ── "Responder à resposta" — thread aninhado ── */
    .reply-children {
      margin-left: 20px;
      padding-left: 12px;
      border-left: 1px solid rgba(255, 255, 255, 0.08);
    }

    .reply-reply-btn {
      background: none;
      border: none;
      color: var(--t3);
      font-family: var(--font);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
      margin-top: 4px;
      transition: color .15s;
    }

    .reply-reply-btn:hover {
      color: var(--cyan);
    }

    .reply-replying-chip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 12px;
      color: var(--cyan);
      background: var(--cyan-soft);
      border: 1px solid var(--border-c);
      border-radius: 10px;
      padding: 6px 10px;
      margin-bottom: 6px;
    }

    .reply-replying-chip span.rc-close {
      cursor: pointer;
      color: var(--t2);
      font-weight: 700;
    }

    /* ═══════════════════════════════════ PARTILHAS FIXADAS (bolhas) ═══ */
    /* Pilha de bolhas circulares fixa no canto — mantém à vista as
       partilhas que o utilizador escolheu acompanhar em tempo real,
       mesmo com o feed cheio de posts novos. Elegante, discreta. */
    #pin-stack {
      position: fixed;
      top: calc(var(--safe-top) + 78px);
      right: 14px;
      z-index: 950;
      display: none;
      flex-direction: column;
      gap: 10px;
      pointer-events: none;
    }

    .pin-bubble {
      position: relative;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      cursor: pointer;
      pointer-events: auto;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 2px rgba(5, 10, 20, .9), 0 0 0 3px var(--border-c);
      animation: pin-bubble-in .35s var(--trans-main) both;
      transition: transform .18s;
    }

    .pin-bubble:active {
      transform: scale(.92);
    }

    .pin-bubble-out {
      animation: pin-bubble-out .22s ease both;
    }

    @keyframes pin-bubble-in {
      from {
        opacity: 0;
        transform: scale(.4);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes pin-bubble-out {
      to {
        opacity: 0;
        transform: scale(.4);
      }
    }

    .pin-bubble-avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      font-size: 14px;
      font-weight: 800;
      color: #0b0f14;
    }

    .pin-bubble-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .pin-bubble-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 17px;
      height: 17px;
      padding: 0 4px;
      border-radius: 20px;
      background: #e05555;
      color: #fff;
      font-size: 10.5px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 2px rgba(5, 10, 20, .9);
    }

    .pin-fly-clone {
      pointer-events: none;
    }

    /* Painel flutuante da partilha fixada — expande ao clicar na bolha.
       Não ocupa o ecrã todo: fica ancorado ao canto, flutuante, discreto. */
    #pin-panel-backdrop {
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-sheet) + 20);
      background: transparent;
      display: none;
    }

    #pin-panel-backdrop.open {
      display: block;
    }

    #pin-panel {
      position: fixed;
      top: calc(var(--safe-top) + 76px);
      right: 14px;
      z-index: calc(var(--z-sheet) + 21);
      width: min(340px, calc(100vw - 28px));
      max-height: min(72vh, 560px);
      display: flex;
      flex-direction: column;
      background: var(--card-a);
      border: 1.5px solid var(--card-a-border);
      border-radius: 22px;
      box-shadow: var(--card-shadow), 0 20px 60px rgba(0, 0, 0, .55);
      opacity: 0;
      transform: translateY(-10px) scale(.96);
      transform-origin: top right;
      pointer-events: none;
      transition: opacity .22s var(--trans-main), transform .22s var(--trans-main);
      overflow: hidden;
    }

    #pin-panel.open {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .pin-panel-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 16px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      flex-shrink: 0;
    }

    .pin-panel-head-info {
      flex: 1;
      min-width: 0;
    }

    .pin-panel-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .pin-panel-icon-btn {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, .06);
      color: var(--t2);
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .15s, color .15s;
    }

    .pin-panel-icon-btn:hover {
      background: rgba(255, 255, 255, .12);
      color: var(--t1);
    }

    .pin-panel-body {
      overflow-y: auto;
      padding: 14px 16px 16px;
      flex: 1;
    }

    .pin-panel-post-text {
      font-size: 14px;
      font-weight: 300;
      color: var(--t2);
      line-height: 1.55;
      margin-bottom: 10px;
    }

    .pin-panel-stats {
      display: flex;
      gap: 14px;
      font-size: 12px;
      color: var(--t3);
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .pin-panel-foot {
      flex-shrink: 0;
      padding: 12px 16px calc(var(--safe-bot) + 12px);
      border-top: 1px solid rgba(255, 255, 255, .08);
    }


    /* Responsividade extra para telas pequenas no diagnóstico */
    @media (max-width: 380px) {
      .diag-question-text {
        font-size: 16.5px;
        line-height: 1.5;
      }

      .diag-opt-btn {
        padding: 13px 16px;
      }
    }

    /* Evita overflow horizontal em qualquer texto longo */
    .notif-body,
    .notif-body-short,
    .diag-intro-sub,
    .reg-profile-desc,
    .diag-opt-text {
      overflow-wrap: break-word;
      word-break: break-word;
      hyphens: auto;
    }



    /* ===== MASCOTE ===== */
    @keyframes idle-bounce {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-5px);
      }
    }

    @keyframes celebrate-jump {

      0%,
      100% {
        transform: translateY(0) scale(1);
      }

      40% {
        transform: translateY(-14px) scale(1.06);
      }
    }

    @keyframes sad-droop {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(4px);
      }
    }

    @keyframes wave-anim {

      0%,
      100% {
        transform: rotate(0deg);
      }

      25% {
        transform: rotate(-22deg);
      }

      75% {
        transform: rotate(22deg);
      }
    }

    @keyframes bubble-in {
      0% {
        opacity: 0;
        transform: scale(0.7) translateY(8px);
      }

      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes sparkle {

      0%,
      100% {
        opacity: 0;
        transform: scale(0);
      }

      50% {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes luz-pulse-ring {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(0, 200, 224, .55);
      }

      50% {
        box-shadow: 0 0 0 7px rgba(0, 200, 224, 0);
      }
    }

    .anim-idle {
      animation: idle-bounce 1.8s ease-in-out infinite;
    }

    .anim-celebrate {
      animation: celebrate-jump 0.7s ease-in-out infinite;
    }

    .anim-sad {
      animation: sad-droop 2s ease-in-out infinite;
    }

    .sparkle1 {
      animation: sparkle 1s ease-in-out infinite 0s;
    }

    .sparkle2 {
      animation: sparkle 1s ease-in-out infinite 0.3s;
    }

    .sparkle3 {
      animation: sparkle 1s ease-in-out infinite 0.6s;
    }


    .mascot-main:hover {
      filter: drop-shadow(0 0 28px rgba(0, 200, 224, 0.6));
    }

    /* Bolha de fala — sempre centrada e legível, independente de onde o mascote está */
    .mascot-bubble {
      position: absolute;
      top: 6%;
      left: 50%;
      transform: translateX(-50%);
      background: #1A2F42;
      border: 1.5px solid #00C8E0;
      border-radius: 16px;
      padding: 12px 16px;
      width: max-content;
      max-width: min(82vw, 280px);
      min-width: 180px;
      font-size: 14px;
      color: #F0F8FF;
      line-height: 1.5;
      text-align: center;
      z-index: 210;
      animation: bubble-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 4px 20px rgba(0, 200, 224, 0.2);
      pointer-events: none;
    }

    /* Leque de ajuda — posicionado via JS ao lado do mascote */
    .mascot-menu {
      position: absolute;
      width: 230px;
      max-height: calc(100% - 16px);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 6px;
      z-index: 211;
      animation: bubble-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .mascot-menu-btn {
      background: #1A2F42;
      border: 1.5px solid #00C8E0;
      border-radius: 12px;
      color: #F0F8FF;
      font-size: 13px;
      padding: 9px 14px;
      cursor: pointer;
      text-align: left;
      transition: background 0.15s, border-color 0.15s;
      flex-shrink: 0;
    }

    .mascot-menu-btn:hover,
    .mascot-menu-btn:active {
      background: #0f2233;
      border-color: #7FD400;
    }

    .mascot-menu-btn .btn-icon {
      margin-right: 6px;
    }

    /* Destaque temporário no botão que o mascote está a ensinar */
    .luz-highlight-pulse {
      animation: luz-pulse-ring 1s ease-in-out 3;
    }

    /* ═══════════════════════════════════════════════════
       SISTEMA DE PERSONAGENS GLOBAL — Luza-neno
       O mascote flutua em todas as telas via position:fixed
    ═══════════════════════════════════════════════════ */

    /* ── Animações de poses ── */
    @keyframes luza-idle-bounce {

      0%,
      100% {
        transform: translateY(0px) scale(1);
      }

      50% {
        transform: translateY(-5px) scale(1.02);
      }
    }

    @keyframes luza-wave-arm {

      0%,
      100% {
        transform: rotate(0deg);
      }

      25% {
        transform: rotate(-22deg);
      }

      75% {
        transform: rotate(22deg);
      }
    }

    @keyframes luza-celebrate-jump {

      0%,
      100% {
        transform: translateY(0) scale(1);
      }

      40% {
        transform: translateY(-14px) scale(1.06);
      }

      60% {
        transform: translateY(-12px) scale(1.06);
      }
    }

    @keyframes luza-sad-droop {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      50% {
        transform: translateY(4px) rotate(-3deg);
      }
    }

    @keyframes luza-think-tilt {

      0%,
      100% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(-9deg);
      }
    }

    @keyframes luza-dance {
      0% {
        transform: rotate(-8deg) scale(1);
      }

      50% {
        transform: rotate(8deg) scale(1.05);
      }

      100% {
        transform: rotate(-8deg) scale(1);
      }
    }

    @keyframes luza-victory {

      0%,
      100% {
        transform: translateY(0) scale(1);
      }

      30% {
        transform: translateY(-16px) scale(1.08) rotate(-3deg);
      }

      60% {
        transform: translateY(-14px) scale(1.08) rotate(3deg);
      }
    }

    @keyframes luza-sparkle {

      0%,
      100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
      }

      50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
      }
    }

    @keyframes luza-pop-in {
      0% {
        transform: scale(0.4);
        opacity: 0;
      }

      70% {
        transform: scale(1.12);
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes luza-alert-pulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.06);
      }
    }

    @keyframes luza-ghost-enter {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.6);
        filter: blur(8px);
      }

      60% {
        opacity: 0.7;
        filter: blur(2px);
      }

      100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
      }
    }

    @keyframes luza-ghost-exit {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
      }

      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
        filter: blur(10px);
      }
    }

    @keyframes luza-sparkle1 {

      0%,
      100% {
        opacity: 0;
        transform: scale(0)
      }

      50% {
        opacity: 1;
        transform: scale(1)
      }
    }

    @keyframes luza-sparkle2 {

      0%,
      100% {
        opacity: 0;
        transform: scale(0)
      }

      50% {
        opacity: 1;
        transform: scale(1)
      }
    }

    @keyframes luza-sparkle3 {

      0%,
      100% {
        opacity: 0;
        transform: scale(0)
      }

      50% {
        opacity: 1;
        transform: scale(1)
      }
    }

    /* ── Contentor global do mascote (z-index alto, sem bloquear cliques no conteúdo) ── */
    #global-mascot {
      position: fixed;
      pointer-events: none;
      /* por defeito não intercepta cliques */
      z-index: 1200;
      will-change: transform;
    }

    #global-mascot.interactive {
      pointer-events: auto;
    }

    #gm-svg-wrap {
      position: absolute;
      transform: translate(-50%, -50%);
      cursor: pointer;
      pointer-events: auto;
      /* CORREÇÃO (arrasto a saltar no Android): touch-action:none tira do
         browser a decisão "isto é scroll ou um gesto meu?" — sem isto, no
         Android o motor de gestos do sistema fica ~100-300ms a decidir,
         e nesse intervalo perde/atrasa eventos de touchmove, dando a
         sensação de saltos. will-change promove a camada de composição
         ANTES do primeiro touchmove, para o 1º frame do arrasto já ser
         suave em vez de pagar o custo de promoção a meio do gesto. */
      touch-action: none;
      will-change: transform;
      transition:
        left 0s,
        /* controlada via JS + Web Animations */
        top 0s;
    }

    #gm-svg-wrap svg {
      width: 72px;
      height: 72px;
      display: block;
      filter: drop-shadow(0 0 14px rgba(0, 200, 224, 0.4));
      transition: filter 0.2s;
    }

    #gm-svg-wrap svg.mara-active {
      filter: drop-shadow(0 0 14px rgba(255, 64, 129, 0.45));
    }

    #gm-svg-wrap:hover svg {
      filter: drop-shadow(0 0 26px rgba(0, 200, 224, 0.7));
    }

    #gm-svg-wrap:hover svg.mara-active {
      filter: drop-shadow(0 0 26px rgba(255, 64, 129, 0.7));
    }

    /* Personagem a falar — único sinal visual da fala, sem qualquer texto.
       Aplicada/removida via JS (window._personagemMarcarAFalar) em
       sincronia exacta com o início/fim do áudio (utter.onstart/onend). */
    #gm-svg-wrap.lz-personagem-falando svg {
      animation: luza-falando-pulso 0.85s ease-in-out infinite;
    }

    #gm-svg-wrap.lz-personagem-falando svg:not(.mara-active) {
      filter: drop-shadow(0 0 22px rgba(0, 200, 224, 0.75));
    }

    #gm-svg-wrap.lz-personagem-falando svg.mara-active {
      filter: drop-shadow(0 0 22px rgba(255, 64, 129, 0.75));
    }

    @keyframes luza-falando-pulso {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.045); }
    }

    /* ═══════════════════════════════════════════════════════════════════
       EFEITO "CAOS" — segurar o personagem sem arrastar durante 4s.
       Tudo é controlado pela variável --luza-caos-t (0 → 1), escrita
       frame a frame via JS enquanto o dedo/rato está pousado no
       personagem. --luza-caos-c1/--luza-caos-c2 são as cores extraídas
       do personagem activo. As variáveis --cyan/--lime também são
       reescritas directamente pelo JS durante o gesto, por isso todos os
       elementos que já usam var(--cyan)/var(--lime) — bordas, glows,
       ícones — acompanham a mudança de cor automaticamente.
       ═══════════════════════════════════════════════════════════════════ */
    #luza-caos-overlay {
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-sheet) + 40);
      /* abaixo do mascote (1200) e da bolha (1201), acima de tudo o resto */
      pointer-events: none;
      opacity: 0;
      mix-blend-mode: soft-light;
      background:
        radial-gradient(circle at 28% 22%, var(--luza-caos-c1, var(--cyan)) 0%, transparent 62%),
        radial-gradient(circle at 76% 82%, var(--luza-caos-c2, var(--lime)) 0%, transparent 62%);
    }

    body.luza-caos-ativo #luza-caos-overlay {
      opacity: calc(var(--luza-caos-t, 0) * 0.68);
    }

    @keyframes luza-caos-tremor {

      0%,
      100% {
        transform: translate(0, 0) scale(calc(1 - var(--luza-caos-t, 0) * 0.035)) skewX(calc(var(--luza-caos-t, 0) * -2.2deg)) rotate(calc(var(--luza-caos-t, 0) * -0.6deg));
      }

      25% {
        transform: translate(calc(var(--luza-caos-t, 0) * 2px), calc(var(--luza-caos-t, 0) * -1.5px)) scale(calc(1 - var(--luza-caos-t, 0) * 0.035)) skewX(calc(var(--luza-caos-t, 0) * -2.6deg)) rotate(calc(var(--luza-caos-t, 0) * -0.9deg));
      }

      50% {
        transform: translate(calc(var(--luza-caos-t, 0) * -2.5px), calc(var(--luza-caos-t, 0) * 1.5px)) scale(calc(1 - var(--luza-caos-t, 0) * 0.04)) skewX(calc(var(--luza-caos-t, 0) * -1.6deg)) rotate(calc(var(--luza-caos-t, 0) * -0.3deg));
      }

      75% {
        transform: translate(calc(var(--luza-caos-t, 0) * 1.5px), calc(var(--luza-caos-t, 0) * 2px)) scale(calc(1 - var(--luza-caos-t, 0) * 0.03)) skewX(calc(var(--luza-caos-t, 0) * -2deg)) rotate(calc(var(--luza-caos-t, 0) * -0.7deg));
      }
    }

    body.luza-caos-ativo {
      animation: luza-caos-tremor 0.5s ease-in-out infinite;
      filter:
        blur(calc(var(--luza-caos-t, 0) * 1.4px)) hue-rotate(calc(var(--luza-caos-t, 0) * 24deg)) saturate(calc(1 + var(--luza-caos-t, 0) * 0.7)) drop-shadow(calc(var(--luza-caos-t, 0) * 3px) 0 0 rgba(255, 45, 130, .35)) drop-shadow(calc(var(--luza-caos-t, 0) * -3px) 0 0 rgba(0, 210, 255, .35));
    }

    /* Sheet modal Luza-neno */
    #luza-neno-sheet {
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-sheet) + 50);
      background: rgba(0, 0, 0, 0.55);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s var(--trans-main);
    }

    #luza-neno-sheet.open {
      opacity: 1;
      pointer-events: auto;
    }

    #luza-neno-inner {
      background: #0D1B2A;
      border-radius: 20px 20px 0 0;
      padding: 24px 20px 36px;
      width: 100%;
      max-width: 480px;
      max-height: 88vh;
      overflow-y: auto;
      transform: translateY(100%);
      transition: transform .32s var(--trans-main);
    }

    #luza-neno-sheet.open #luza-neno-inner {
      transform: translateY(0);
    }

    .ln-handle {
      width: 36px;
      height: 4px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 2px;
      margin: 0 auto 20px;
    }

    .ln-title {
      font-size: 19px;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: #F0F8FF;
      margin-bottom: 4px;
    }

    .ln-sub {
      font-size: 13px;
      line-height: 1.45;
      color: rgba(240, 248, 255, 0.45);
      margin-bottom: 22px;
    }

    /* ═══════════════════════════ BIBLIOTECA — zona de envio ═══════════════════════════
       Cartão elevado com "cover" circular, CTA bem visível (não depende só
       de o utilizador perceber que a área toda é clicável) e um toggle de
       visibilidade em formato pílula — mesma linguagem visual dos chips de
       "Voz de leitura", para a folha inteira parecer um único sistema. */
    .ln-upload-zone {
      position: relative;
      border: 1.5px dashed rgba(var(--cyan-rgb), 0.38);
      border-radius: var(--radius);
      padding: 22px 20px;
      margin-bottom: 18px;
      text-align: center;
      cursor: pointer;
      background: linear-gradient(180deg, rgba(var(--cyan-rgb), 0.07), rgba(var(--cyan-rgb), 0.02));
      transition: border-color .18s, background .18s, transform .12s;
    }

    .ln-upload-zone:active {
      transform: scale(.99);
      border-color: rgba(var(--cyan-rgb), 0.6);
      background: linear-gradient(180deg, rgba(var(--cyan-rgb), 0.11), rgba(var(--cyan-rgb), 0.03));
    }

    .ln-upload-icon-badge {
      width: 52px;
      height: 52px;
      margin: 0 auto 12px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), 0.22), rgba(var(--cyan-rgb), 0.08));
      border: 1px solid rgba(var(--cyan-rgb), 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--cyan);
      font-size: 24px;
    }

    .ln-upload-title {
      font-size: 14.5px;
      font-weight: 700;
      color: var(--t1);
      margin-bottom: 4px;
    }

    .ln-upload-hint {
      font-size: 12px;
      color: var(--t2);
      margin-bottom: 14px;
    }

    .ln-upload-cta {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 20px;
      border-radius: 100px;
      background: linear-gradient(135deg, var(--cyan), #1BA6C4);
      color: #05243A;
      font-size: 13px;
      font-weight: 700;
      pointer-events: auto;
      cursor: pointer;
      /* O CTA é realmente clicável; o input PDF fica oculto e é aberto pelo botão. */
    }

    .ln-visibility-row {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .ln-visibility-label {
      font-size: 11.5px;
      font-weight: 600;
      color: var(--t2);
    }

    .ln-visibility-toggle {
      display: inline-flex;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 100px;
      padding: 3px;
      gap: 2px;
    }

    .ln-visibility-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 13px;
      border-radius: 100px;
      border: none;
      background: transparent;
      color: rgba(240, 248, 255, 0.5);
      font-family: var(--font);
      font-size: 11.5px;
      font-weight: 700;
      cursor: pointer;
      transition: background .15s, color .15s;
    }

    .ln-visibility-btn.active {
      background: rgba(var(--cyan-rgb), 0.22);
      color: #aef0ff;
    }

    #ln-upload-status {
      border-radius: 12px;
      padding: 10px 14px;
      background: rgba(255, 255, 255, 0.04);
    }

    /* ═══════════════════════════ BIBLIOTECA — cartões de livro ═══════════════════════════
       "Lombada" colorida (barra à esquerda do cover) que lembra um livro real
       — o elemento distintivo do cartão. Cyan enquanto disponível, lime assim
       que o utilizador está inscrito, ecoando o resto da app. */
    .ln-book-card {
      position: relative;
      background: var(--card-a);
      border-radius: 18px;
      padding: 16px 18px;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 12px;
      border: 1.5px solid var(--card-a-border);
      box-shadow: var(--card-shadow);
      transition: border-color 0.18s, background 0.18s, transform .12s;
    }

    /* Livro disponível = ciano, livro já inscrito = lima — a mesma
       alternância de duas cores da Luzayadio, agora com significado
       funcional (estado do livro), ambos sólidos. */
    .ln-book-card.enrolled {
      border-color: var(--card-b-border);
      background: var(--card-b);
    }

    .ln-book-cover {
      width: 54px;
      height: 68px;
      border-radius: 7px 11px 11px 7px;
      background: linear-gradient(150deg, #1BA6C4, #0d4b63);
      box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.28), 0 6px 14px rgba(0, 0, 0, 0.28);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #eafcff;
      font-size: 22px;
      flex-shrink: 0;
    }

    .ln-book-card.enrolled .ln-book-cover {
      background: linear-gradient(150deg, #9be049, #3e7d16);
      box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.3), 0 6px 14px rgba(0, 0, 0, 0.28);
      color: #f3ffe4;
    }

    .ln-book-body {
      flex: 1;
      min-width: 0;
    }

    .ln-book-title {
      font-size: 15.5px;
      font-weight: 700;
      color: var(--t1);
      line-height: 1.3;
      margin-bottom: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ln-book-meta {
      font-size: 12px;
      color: var(--t2);
      margin-bottom: 9px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ln-book-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 11px;
      border-radius: 100px;
      margin-bottom: 12px;
    }

    .ln-book-status-badge.is-free {
      background: rgba(var(--cyan-rgb), 0.14);
      color: #7fe3ff;
    }

    .ln-book-status-badge.is-enrolled {
      background: rgba(var(--lime-rgb), 0.16);
      color: #b9f27a;
    }

    .ln-book-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    /* Botões maiores e com toque generoso (~36px), mas sem exagerar a
       altura do cartão — três variantes cobrem tudo o que a biblioteca
       precisa: acção principal, acção secundária, acção discreta. */
    .ln-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 16px;
      border-radius: 100px;
      font-family: var(--font);
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      border: none;
      transition: transform .1s, opacity .15s, background .15s;
      white-space: nowrap;
    }

    .ln-btn:active {
      transform: scale(.96);
    }

    .ln-btn-primary {
      background: linear-gradient(135deg, var(--cyan), #1BA6C4);
      color: #05243A;
    }

    .ln-btn-outline-lime {
      background: rgba(var(--lime-rgb), 0.1);
      border: 1.5px solid rgba(var(--lime-rgb), 0.4);
      color: var(--lime);
    }

    .ln-btn-ghost-danger {
      background: transparent;
      border: 1.5px solid rgba(255, 100, 100, 0.3);
      color: #ff9a9a;
      padding: 8px 14px;
    }

    .ln-btn-static {
      background: rgba(var(--lime-rgb), 0.14);
      color: #b9f27a;
      cursor: default;
    }

    .ln-btn-static:active {
      transform: none;
    }

    /* Definições de entrega — recolhidas por defeito para o cartão não ficar
       carregado; "prioridade" e "modo de entrega" só interessam a quem quer
       ajustar o ritmo, por isso ficam a um toque de distância em vez de
       ocuparem sempre espaço. */
    .ln-book-settings-toggle {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: transparent;
      border: none;
      font-family: var(--font);
      color: var(--t2);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      padding: 9px 4px;
    }

    .ln-book-settings-toggle .lz-icon {
      width: 11px;
      height: 11px;
      transition: transform .2s;
    }

    .ln-book-settings-toggle.open .lz-icon {
      transform: rotate(90deg);
    }

    .ln-book-settings {
      margin-top: 4px;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      display: none;
      flex-direction: column;
      gap: 10px;
    }

    .ln-book-settings.open {
      display: flex;
    }

    .ln-chip.ln-chip-sm {
      padding: 6px 13px;
      font-size: 12px;
    }

    .ln-book-delivery-row {
      display: none;
      gap: 8px;
      align-items: center;
    }

    .ln-book-delivery-row.visible {
      display: flex;
    }

    .ln-delivery-mode {
      flex: 1;
      background: rgba(255, 140, 0, 0.08);
      border: 1.5px solid rgba(255, 140, 0, 0.3);
      border-radius: 10px;
      color: var(--t1);
      font-family: var(--font);
      font-size: 12px;
      padding: 8px 10px;
    }

    .ln-pages-input {
      width: 78px;
      display: none;
      background: rgba(255, 140, 0, 0.08);
      border: 1.5px solid rgba(255, 140, 0, 0.3);
      border-radius: 10px;
      color: var(--t1);
      font-family: var(--font);
      font-size: 12px;
      padding: 8px 8px;
      text-align: center;
    }

    .ln-back-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--t3);
      margin-bottom: 18px;
      cursor: pointer;
      width: fit-content;
    }

    .ln-back-btn:active {
      opacity: 0.6;
    }

    /* ── Voz de leitura (idioma/velocidade da fala) no sheet Luza-neno ── */

    .ln-voz-group {
      margin-bottom: 22px;
    }

    .ln-voz-label {
      font-size: 12px;
      font-weight: 700;
      color: rgba(240, 248, 255, 0.55);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 10px;
    }

    .ln-voz-hint {
      font-size: 11.5px;
      color: rgba(240, 248, 255, 0.4);
      margin-top: 8px;
      line-height: 1.4;
    }

    .ln-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .ln-chip {
      padding: 8px 16px;
      border-radius: 100px;
      border: 1.5px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.04);
      color: rgba(240, 248, 255, 0.65);
      font-size: 13px;
      font-weight: 600;
      font-family: var(--font);
      cursor: pointer;
      transition: border-color .15s, background .15s, color .15s, transform .1s;
    }

    .ln-chip.active {
      border-color: rgba(var(--cyan-rgb), .55);
      background: rgba(var(--cyan-rgb), .16);
      color: #F0F8FF;
    }

    .ln-chip:active {
      transform: scale(.94);
    }

    .ln-voz-test-btn {
      margin-top: 4px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 20px;
      border-radius: 100px;
      border: none;
      background: linear-gradient(135deg, var(--cyan), #1BA6C4);
      color: #05243A;
      font-weight: 700;
      font-size: 13px;
      font-family: var(--font);
      cursor: pointer;
      transition: opacity .15s, transform .1s;
    }

    .ln-voz-test-btn:active {
      opacity: .85;
      transform: scale(.97);
    }

    /* ── Interruptor "Traduzir automaticamente" (tradução opcional da
       leitura em voz alta dos livros — ver falarComPersonagem/ouvirTrechoLivro
       em js.js) ── */
    .ln-voz-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .ln-voz-toggle {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 26px;
      flex: none;
      cursor: pointer;
    }

    .ln-voz-toggle input {
      position: absolute;
      opacity: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      cursor: pointer;
    }

    .ln-voz-toggle-track {
      position: absolute;
      inset: 0;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.14);
      border: 1.5px solid rgba(255, 255, 255, 0.14);
      transition: background .18s, border-color .18s;
    }

    .ln-voz-toggle-track::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      background: #F0F8FF;
      transition: transform .18s;
    }

    .ln-voz-toggle input:checked+.ln-voz-toggle-track {
      background: rgba(var(--cyan-rgb), .55);
      border-color: rgba(var(--cyan-rgb), .7);
    }

    .ln-voz-toggle input:checked+.ln-voz-toggle-track::after {
      transform: translateX(18px);
    }

    /* ── Indicador "A traduzir…" no leitor de livro — tradução feita pelo
       servidor (pool de emails MyMemory), aplicada tanto ao texto visível
       do bloco como à leitura em voz alta (secção 4.1 do prompt) ── */
    .br-translating-badge {
      display: none;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      color: rgba(240, 248, 255, 0.7);
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 100px;
      padding: 5px 12px;
      margin-left: 8px;
      white-space: nowrap;
    }

    .br-translating-badge-spinner {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      border: 1.5px solid rgba(var(--cyan-rgb), .35);
      border-top-color: var(--cyan);
      animation: br-spin .7s linear infinite;
      flex: none;
    }

    @keyframes br-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .br-translating-badge-aviso {
      color: #FFD27A;
      background: rgba(255, 180, 60, 0.12);
      border-color: rgba(255, 180, 60, 0.35);
    }

    .br-translating-badge-aviso .br-translating-badge-spinner {
      display: none;
    }

    .ln-char-card {
      background: #1A2F42;
      border-radius: 14px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 10px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: border-color 0.18s, background 0.18s;
    }

    .ln-char-card.active {
      border-color: #00C8E0;
      background: #152535;
    }

    .ln-char-card.active.mara-card {
      border-color: #FF4081;
      background: #1A0D22;
    }

    .ln-char-card.locked {
      opacity: 0.55;
      cursor: not-allowed;
    }

    .ln-char-card:not(.locked):hover {
      border-color: rgba(255, 255, 255, 0.25);
    }

    .ln-char-icon {
      width: 56px;
      height: 56px;
      flex-shrink: 0;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .ln-char-name {
      font-size: 15px;
      font-weight: 700;
      color: #F0F8FF;
      margin-bottom: 3px;
    }

    .ln-char-desc {
      font-size: 12px;
      color: rgba(240, 248, 255, 0.5);
      margin-bottom: 6px;
    }

    .ln-char-req {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 20px;
      display: inline-block;
    }

    .req-ok {
      background: rgba(0, 200, 224, 0.12);
      color: #00C8E0;
    }

    .req-lock {
      background: rgba(255, 100, 0, 0.12);
      color: #FF8C42;
    }

    .req-mara {
      background: rgba(255, 64, 129, 0.12);
      color: #FF4081;
    }

    /* ── AssistiveTouch: pose ao encostar ── */
    @keyframes luza-snap-edge {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }

      40% {
        transform: translate(-50%, -50%) scale(0.88);
      }

      70% {
        transform: translate(-50%, -50%) scale(1.08);
      }

      100% {
        transform: translate(-50%, -50%) scale(1);
      }
    }

    #gm-svg-wrap.snapping {
      animation: luza-snap-edge 0.35s cubic-bezier(.34, 1.56, .64, 1) !important;
    }

    #gm-svg-wrap.edge-docked {
      opacity: 0.72;
      transition: opacity 0.3s;
    }

    #gm-svg-wrap.edge-docked:hover {
      opacity: 1;
    }

    /* ── LIVROS ───────────────────────────────────────────────── */
    .books-grid {
      display: flex;
      flex-direction: column;
      gap: clamp(10px, 3vw, 16px);
      padding: 0 clamp(12px, 4vw, 20px) calc(var(--safe-bot) + 90px);
      overflow-y: auto;
      flex: 1;
    }

    .book-card {
      position: relative; /* âncora para o selo "Novo" (publicação automática) */
      background: var(--card-a);
      border: 1.5px solid var(--card-a-border);
      box-shadow: var(--card-shadow);
      border-radius: 18px;
      padding: 18px 18px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: clamp(10px, 3vw, 16px); /* reforço: espaçamento garantido mesmo sem suporte a gap */
      transition: border-color .2s;
    }

    .book-card.enrolled {
      border-color: var(--card-b-border);
      background: var(--card-b);
    }

    /* Selo "Novo" — livros publicados automaticamente (sem aprovação do
       admin) nos últimos 7 dias. Mesma linguagem visual do badge-novo dos
       cursos, para o utilizador reconhecer o padrão. */
    .book-card-badge-novo {
      position: absolute;
      top: 12px;
      right: 14px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 100px;
      background: rgba(var(--cyan-rgb), .28);
      color: #aef0ff;
      border: 1px solid rgba(var(--cyan-rgb), .45);
      white-space: nowrap;
    }

    .book-card-badge-novo .lz-icon {
      width: 9px;
      height: 9px;
    }

    .book-card-header {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .book-icon {
      font-size: 32px;
      flex-shrink: 0;
      line-height: 1;
    }

    .book-info {
      flex: 1;
      min-width: 0;
    }

    .book-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--t1);
      margin-bottom: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .book-author {
      font-size: 13px;
      color: var(--t2);
      margin-bottom: 6px;
    }

    .book-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .book-tag {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 20px;
      background: rgba(var(--cyan-rgb), .1);
      color: var(--cyan);
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .book-tag.livro-tag {
      background: rgba(var(--lime-rgb), .1);
      color: var(--lime);
    }

    .book-pages {
      font-size: 12px;
      color: var(--t3);
    }

    .book-actions {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }

    .btn-book {
      flex: 1;
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      font-family: var(--font);
      border: none;
      cursor: pointer;
      transition: opacity .18s;
    }

    .btn-book-primary {
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      color: #0b1320;
    }

    .btn-book-enrolled {
      background: rgba(var(--lime-rgb), .15);
      color: var(--lime);
      border: 1px solid rgba(var(--lime-rgb), .25);
    }

    .btn-book-upload {
      background: rgba(255, 255, 255, .07);
      color: var(--t1);
      border: 1px solid var(--border);
    }

    /* Sheet de upload de livro */
    #book-upload-sheet {
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-sheet) + 30);
      background: rgba(0, 0, 0, .55);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s var(--trans-main);
    }

    #book-upload-sheet.open {
      opacity: 1;
      pointer-events: auto;
    }

    #book-upload-inner {
      background: #0D1B2A;
      border-radius: 20px 20px 0 0;
      padding: 24px 20px 36px;
      width: 100%;
      max-width: 480px;
      transform: translateY(100%);
      transition: transform .32s var(--trans-main);
    }

    #book-upload-sheet.open #book-upload-inner {
      transform: translateY(0);
    }

    .bu-handle {
      width: 36px;
      height: 4px;
      background: rgba(255, 255, 255, .2);
      border-radius: 2px;
      margin: 0 auto 20px;
    }

    .bu-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--t1);
      margin-bottom: 4px;
    }

    .bu-sub {
      font-size: 12px;
      color: rgba(240, 248, 255, .4);
      margin-bottom: 20px;
    }

    .bu-field {
      margin-bottom: 14px;
    }

    .bu-label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--t2);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .bu-input {
      width: 100%;
      padding: 11px 14px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 12px;
      font-size: 15px;
      font-family: var(--font);
      color: var(--t1);
      outline: none;
    }

    .bu-input:focus {
      border-color: rgba(var(--cyan-rgb), .4);
    }

    .bu-file-zone {
      width: 100%;
      padding: 20px;
      border: 1.5px dashed rgba(var(--cyan-rgb), .3);
      border-radius: 14px;
      background: rgba(var(--cyan-rgb), .04);
      text-align: center;
      cursor: pointer;
      transition: border-color .2s;
    }

    .bu-file-zone:hover {
      border-color: rgba(var(--cyan-rgb), .6);
    }

    .bu-file-name {
      font-size: 13px;
      color: var(--lime);
      margin-top: 6px;
      display: none;
    }

    .bu-btn {
      width: 100%;
      padding: 14px;
      border-radius: 14px;
      font-size: 16px;
      font-weight: 700;
      font-family: var(--font);
      border: none;
      cursor: pointer;
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      color: #0b1320;
      margin-top: 8px;
      transition: opacity .18s;
    }

    .bu-btn:disabled {
      opacity: .45;
      cursor: not-allowed;
    }

    .bu-status {
      font-size: 13px;
      text-align: center;
      margin-top: 10px;
      min-height: 18px;
      color: var(--t3);
    }
  
    /* ══════════════════════════════════════════════════════════════════
       COMÉRCIO PERTO DE MIM — pesquisa de produtos/estabelecimentos perto
       do utilizador. Reaproveita as variáveis de cor e o vocabulário
       visual já usado em .chat-item / .compose-sheet / .share-tabs.
    ══════════════════════════════════════════════════════════════════ */

    /* Chip da área detetada ("📍 Estás em Kilamba") */
    .comercio-area-chip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
      margin: 4px 16px 12px;
      padding: 10px 14px;
      border-radius: 14px;
      background: rgba(var(--cyan-rgb), .08);
      border: 1px solid rgba(var(--cyan-rgb), .18);
    }

    .comercio-area-chip-texto {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--t1);
    }

    .comercio-area-chip-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }

    .comercio-area-chip-btn {
      font-size: 10px;
      font-family: var(--font);
      font-weight: 700;
      padding: 5px 11px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, .05);
      color: var(--t2);
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
    }

    .comercio-area-chip-btn:active {
      transform: scale(.94);
    }

    /* Barra de pesquisa */
    .comercio-search-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 16px 12px;
      padding: 11px 16px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .05);
      border: 1.5px solid rgba(var(--cyan-rgb), .16);
      transition: border-color .2s, box-shadow .2s;
    }

    .comercio-search-bar:focus-within {
      border-color: rgba(var(--cyan-rgb), .45);
      box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .09);
    }

    .comercio-search-input {
      flex: 1;
      min-width: 0;
      background: none;
      border: none;
      outline: none;
      font-size: 14.5px;
      font-family: var(--font);
      color: var(--t1);
      caret-color: var(--cyan);
    }

    .comercio-search-input::placeholder {
      color: var(--t3);
    }

    /* Chips de filtro/ordenação + favoritos */
    .comercio-filtros-row {
      display: flex;
      gap: 8px;
      padding: 0 16px 14px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .comercio-filtros-row::-webkit-scrollbar {
      display: none;
    }

    .comercio-filtro-chip {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 8px 15px;
      border-radius: 100px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .04);
      color: var(--t2);
      font-size: 12.5px;
      font-weight: 600;
      font-family: var(--font);
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
    }

    .comercio-filtro-chip.sel {
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .28), rgba(var(--lime-rgb), .24));
      border-color: rgba(var(--cyan-rgb), .40);
      color: var(--t1);
    }

    .comercio-filtro-chip:active {
      transform: scale(.95);
    }

    .comercio-filtro-fav {
      margin-left: auto;
    }

    .comercio-filtro-fav.sel {
      background: linear-gradient(135deg, rgba(255, 64, 129, .30), rgba(255, 64, 129, .14));
      border-color: rgba(255, 64, 129, .45);
      color: var(--t1);
    }

    /* Lista de resultados */
    .comercio-resultados-lista {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0 16px calc(var(--safe-bot, 0px) + 24px);
    }

    .comercio-resultado-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      background: var(--card-a);
      border: 1.5px solid var(--card-a-border);
      box-shadow: var(--card-shadow);
      cursor: pointer;
      transition: transform .18s, background .18s;
    }

    /* Alternância Luzayadio: resultado ciano, resultado lima... */
    .comercio-resultado-item:nth-child(even) {
      background: var(--card-b);
      border-color: var(--card-b-border);
    }

    .comercio-resultado-item:active {
      transform: scale(.985);
    }

    .comercio-resultado-body {
      flex: 1;
      min-width: 0;
    }

    .comercio-resultado-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }

    .comercio-resultado-nome {
      font-size: 14.5px;
      font-weight: 700;
      color: var(--t1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .comercio-resultado-preco {
      font-size: 15px;
      font-weight: 800;
      color: var(--lime);
      flex-shrink: 0;
      white-space: nowrap;
    }

    .comercio-resultado-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 3px;
    }

    .comercio-resultado-info {
      font-size: 12.5px;
      color: var(--t3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Badge de frescura do preço */
    .comercio-badge-frescura {
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 100px;
      white-space: nowrap;
    }

    .comercio-badge-frescura.fresca {
      background: rgba(var(--lime-rgb), .16);
      color: var(--lime);
      border: 1px solid rgba(var(--lime-rgb), .30);
    }

    .comercio-badge-frescura.media {
      background: rgba(255, 193, 7, .14);
      color: #ffc107;
      border: 1px solid rgba(255, 193, 7, .28);
    }

    .comercio-badge-frescura.velha {
      background: rgba(255, 82, 82, .14);
      color: #ff5252;
      border: 1px solid rgba(255, 82, 82, .28);
    }

    .comercio-badge-frescura.neutra {
      background: rgba(255, 255, 255, .06);
      color: var(--t3);
      border: 1px solid var(--border);
    }

    /* Ficha do estabelecimento (dentro de #estabelecimento-overlay) */
    .estabelecimento-header {
      position: relative;
      padding: 20px 20px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      border-bottom: 1px solid var(--border);
    }

    .estabelecimento-cover {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--cyan), var(--lime));
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 800;
      color: #0b0f14;
    }

    .estabelecimento-nome-linha {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .estabelecimento-nome {
      font-size: 18px;
      font-weight: 800;
      color: var(--t1);
    }

    .estabelecimento-badge-verificado {
      font-size: 13px;
      line-height: 1;
    }

    .estabelecimento-tipo {
      font-size: 12.5px;
      color: var(--t3);
      text-transform: capitalize;
      margin-top: 2px;
    }

    .estabelecimento-status {
      font-size: 12px;
      font-weight: 700;
      margin-top: 6px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .estabelecimento-status.aberto { color: var(--lime); }
    .estabelecimento-status.fechado { color: #ff5252; }
    .estabelecimento-status.desconhecido { color: var(--t3); }

    .estabelecimento-secao {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
    }

    .estabelecimento-secao:last-child {
      border-bottom: none;
      padding-bottom: calc(var(--safe-bot, 0px) + 24px);
    }

    .estabelecimento-secao-titulo {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 10px;
    }

    .estabelecimento-referencia,
    .estabelecimento-horario-linha {
      font-size: 13.5px;
      color: var(--t2);
      line-height: 1.6;
    }

    .estabelecimento-actions {
      display: flex;
      gap: 10px;
    }

    /* Mapa "Como chegar" (Leaflet + OpenStreetMap) */
    .estabelecimento-mapa {
      width: 100%;
      height: 180px;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--border);
      margin-top: 10px;
      background: var(--card2);
    }

    .estabelecimento-mapa .leaflet-control-attribution {
      font-size: 9px;
      background: rgba(10, 14, 20, .55);
      color: var(--t3);
    }

    .estabelecimento-mapa .leaflet-control-attribution a {
      color: var(--t2);
    }

    .lz-mapa-pino {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45));
      line-height: 1;
    }

    .estabelecimento-btn-rota {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin-top: 10px;
      padding: 11px 10px;
      border-radius: 14px;
      font-size: 13.5px;
      font-weight: 700;
      font-family: var(--font);
      color: var(--t1);
      background: rgba(var(--cyan-rgb), .14);
      border: 1px solid rgba(var(--cyan-rgb), .32);
      cursor: pointer;
      transition: all .2s;
    }

    .estabelecimento-btn-rota:active {
      transform: scale(.97);
    }

    .estabelecimento-btn-call,
    .estabelecimento-btn-whatsapp {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 10px;
      border-radius: 14px;
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font);
      text-decoration: none;
      cursor: pointer;
      transition: all .2s;
      border: 1px solid transparent;
    }

    .estabelecimento-btn-call {
      background: linear-gradient(135deg, rgba(var(--cyan-rgb), .30), rgba(var(--lime-rgb), .22));
      border-color: rgba(var(--cyan-rgb), .38);
      color: var(--t1);
    }

    .estabelecimento-btn-whatsapp {
      background: rgba(126, 211, 33, .14);
      border-color: rgba(126, 211, 33, .35);
      color: var(--t1);
    }

    .estabelecimento-btn-call:active,
    .estabelecimento-btn-whatsapp:active {
      transform: scale(.96);
    }

    /* Lista de produtos do estabelecimento */
    .estabelecimento-produtos-lista {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .estabelecimento-produto-linha {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .estabelecimento-produto-linha:last-child {
      border-bottom: none;
    }

    .estabelecimento-disponibilidade-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .estabelecimento-disponibilidade-dot.disponivel { background: var(--lime); }
    .estabelecimento-disponibilidade-dot.poucas_unidades { background: #ffc107; }
    .estabelecimento-disponibilidade-dot.esgotado { background: #ff5252; }
    .estabelecimento-disponibilidade-dot.desconhecido { background: var(--t3); }

    .estabelecimento-produto-info {
      flex: 1;
      min-width: 0;
    }

    .estabelecimento-produto-nome {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--t1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .estabelecimento-produto-sub {
      font-size: 11.5px;
      color: var(--t3);
    }

    .estabelecimento-produto-preco {
      font-size: 14px;
      font-weight: 800;
      color: var(--lime);
      flex-shrink: 0;
    }

    .estabelecimento-produto-sugerir {
      flex-shrink: 0;
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .05);
      border: 1px solid var(--border);
      color: var(--t3);
      cursor: pointer;
      transition: all .18s;
    }

    .estabelecimento-produto-sugerir:active {
      transform: scale(.9);
    }

    /* Barra de progresso do download de área offline */
    .comercio-download-progress {
      width: 100%;
      height: 8px;
      border-radius: 100px;
      background: rgba(255, 255, 255, .08);
      overflow: hidden;
      margin-bottom: 16px;
    }

    .comercio-download-progress-bar {
      height: 100%;
      width: 0%;
      border-radius: 100px;
      background: linear-gradient(90deg, var(--cyan), var(--lime));
      transition: width .25s ease;
    }

    @media (hover: hover) {
      .comercio-resultado-item:hover {
        border-color: var(--card-a-border);
      }
      .comercio-filtro-chip:hover,
      .comercio-area-chip-btn:hover {
        border-color: rgba(var(--cyan-rgb), .35);
      }
      .estabelecimento-btn-call:hover,
      .estabelecimento-btn-whatsapp:hover {
        opacity: .9;
      }
    }


/* ═════════════════ COMÉRCIO PERTO DE MIM — SECÇÃO 7 ═════════════════ */
/* ==========================================================================
   LUZAYADIO — COMÉRCIO PERTO DE MIM
   Secção 7 do comercio-local-spec.md
   Folha aditiva para o cliente Luzayadio. Usa apenas os tokens já existentes
   (--cyan, --lime, --mara, --border, --t1, --t2, --t3), com fallbacks para
   preservar a leitura caso o tema seja carregado de forma progressiva.
   ========================================================================== */

#partilha-comercio-view {
  padding: 12px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  min-height: 100%;
  color: var(--t1, #163043);
}

#partilha-comercio-view *,
#estabelecimento-overlay * { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Área e pesquisa
   -------------------------------------------------------------------------- */
.comercio-area-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 8px 10px 8px 12px;
  margin: 0 0 12px;
  border: 1px solid var(--border, #dce6ec);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cyan, #11b5d9) 8%, var(--card, #ffffff));
  box-shadow: 0 5px 16px rgba(13, 53, 76, .05);
}

.comercio-area-chip-texto {
  min-width: 0;
  overflow: hidden;
  color: var(--t2, #547080);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comercio-area-chip-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
}

.comercio-area-chip-btn {
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(17, 181, 217, .12);
  color: var(--cyan, #0787aa);
  font: inherit;
  font-size: 10.5px;
  font-weight: 750;
  cursor: pointer;
}

.comercio-area-chip-btn:active { transform: translateY(1px); }
.comercio-area-chip-btn:focus-visible,
.comercio-filtro-chip:focus-visible,
.comercio-resultado-item:focus-visible,
.comercio-destaque-item:focus-visible {
  outline: 3px solid rgba(17, 181, 217, .38);
  outline-offset: 2px;
}

.comercio-search-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--border, #dce6ec);
  border-radius: 14px;
  background: var(--card, #ffffff);
  box-shadow: 0 8px 18px rgba(13, 53, 76, .06);
}

.comercio-search-bar:focus-within {
  border-color: var(--cyan, #11b5d9);
  box-shadow: 0 0 0 3px rgba(17, 181, 217, .13), 0 8px 18px rgba(13, 53, 76, .06);
}

.comercio-search-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--t1, #163043);
  font: inherit;
  font-size: 13px;
}

.comercio-search-input::placeholder { color: var(--t3, #8296a1); }

/* --------------------------------------------------------------------------
   Filtros
   -------------------------------------------------------------------------- */
.comercio-filtros-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 12px 0 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.comercio-filtros-row::-webkit-scrollbar { display: none; }

.comercio-filtro-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid var(--border, #dce6ec);
  border-radius: 999px;
  background: var(--card, #ffffff);
  color: var(--t2, #547080);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
  user-select: none;
}

.comercio-filtro-chip:hover { border-color: rgba(17, 181, 217, .55); }
.comercio-filtro-chip:active { transform: scale(.97); }
.comercio-filtro-chip.sel {
  border-color: var(--cyan, #11b5d9);
  background: var(--cyan, #11b5d9);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(17, 181, 217, .2);
}
.comercio-filtro-chip.sel .lz-icon { color: currentColor; }
.comercio-filtro-fav.sel { border-color: var(--mara, #d45b8a); background: var(--mara, #d45b8a); }

/* --------------------------------------------------------------------------
   Resultados orgânicos
   -------------------------------------------------------------------------- */
.comercio-resultados-lista,
.comercio-patrocinados-lista {
  display: grid;
  gap: 8px;
}

.comercio-resultado-item {
  display: block;
  width: 100%;
  min-height: 70px;
  padding: 12px;
  border: 1.5px solid var(--card-a-border, #dce6ec);
  border-radius: 14px;
  background: var(--card, #ffffff);
  box-shadow: var(--card-shadow, 0 6px 16px rgba(13, 53, 76, .045));
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.comercio-resultados-lista .comercio-resultado-item:nth-child(even),
.comercio-patrocinados-lista .comercio-resultado-item:nth-child(even) {
  background: var(--card2, #ffffff);
  border-color: var(--card-b-border, #dce6ec);
}
.comercio-resultado-item:hover {
  border-color: var(--card-a-border, rgba(17, 181, 217, .54));
  transform: translateY(-1px);
}
.comercio-resultado-item:active { transform: translateY(0); }

.comercio-resultado-body,
.comercio-destaque-body { min-width: 0; display: grid; gap: 6px; }
.comercio-resultado-top,
.comercio-resultado-bottom,
.comercio-destaque-top,
.comercio-destaque-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.comercio-resultado-nome,
.comercio-destaque-nome {
  min-width: 0;
  overflow: hidden;
  color: var(--t1, #163043);
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comercio-resultado-preco {
  flex: 0 0 auto;
  color: var(--lime, #638f19);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.comercio-resultado-bottom,
.comercio-destaque-bottom { min-width: 0; }
.comercio-resultado-info {
  min-width: 0;
  overflow: hidden;
  color: var(--t3, #8296a1);
  font-size: 10.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comercio-badge-frescura {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  background: #edf1f3;
  color: var(--t3, #8296a1);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.1;
  white-space: nowrap;
}
.comercio-badge-frescura.fresca { background: rgba(117, 166, 36, .14); color: #547d0f; }
.comercio-badge-frescura.media { background: rgba(232, 166, 28, .17); color: #9b6900; }
.comercio-badge-frescura.velha { background: rgba(211, 74, 74, .14); color: #b53535; }
.comercio-badge-frescura.neutra { background: rgba(117, 134, 146, .12); color: #60717b; }

/* --------------------------------------------------------------------------
   Patrocinados: secção visual separada do ranking orgânico
   -------------------------------------------------------------------------- */
.comercio-patrocinados {
  margin: 2px 0 12px;
  overflow: hidden;
  border: 1px solid rgba(117, 166, 36, .38);
  border-radius: 14px;
  background: rgba(117, 166, 36, .055);
}
.comercio-patrocinados[hidden] { display: none !important; }
.comercio-patrocinados-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(117, 166, 36, .2);
  color: var(--t2, #547080);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.comercio-patrocinados-nota {
  color: var(--t3, #8296a1);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: normal;
  text-transform: none;
}
.comercio-patrocinados-lista { gap: 0; }
.comercio-destaque-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  width: 100%;
  padding: 11px;
  border: 0;
  border-bottom: 1px solid rgba(117, 166, 36, .16);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.comercio-destaque-item:last-child { border-bottom: 0; }
.comercio-destaque-item:hover { background: rgba(117, 166, 36, .07); }
.comercio-destaque-label {
  align-self: start;
  padding: 4px 6px;
  border-radius: 999px;
  background: var(--lime, #75a624);
  color: #173400;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: .035em;
  line-height: 1;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Ficha do estabelecimento
   -------------------------------------------------------------------------- */
#estabelecimento-overlay {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg, #f5f8fa);
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  transition: opacity .24s ease, transform .24s ease;
}
#estabelecimento-overlay.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
#estabelecimento-overlay .chat-overlay-header {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border, #dce6ec);
  background: var(--card, #ffffff);
}
.estabelecimento-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}
.estabelecimento-header {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 12px;
  border: 1px solid var(--border, #dce6ec);
  border-radius: 16px;
  background: var(--card, #ffffff);
  box-shadow: 0 8px 18px rgba(13, 53, 76, .06);
}
.estabelecimento-cover {
  display: flex;
  width: 76px;
  height: 76px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cyan, #11b5d9), #167aa2);
  background-position: center;
  background-size: cover;
  color: #ffffff;
  font-size: 20px;
  font-weight: 850;
}
.estabelecimento-nome-linha { display: flex; align-items: center; gap: 6px; min-width: 0; }
.estabelecimento-nome {
  min-width: 0;
  overflow: hidden;
  color: var(--t1, #163043);
  font-size: 16px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.estabelecimento-badge-verificado { flex: 0 0 auto; font-size: 14px; }
.estabelecimento-tipo { margin-top: 4px; color: var(--t2, #547080); font-size: 11px; font-weight: 650; text-transform: capitalize; }
.estabelecimento-status {
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(117, 134, 146, .11);
  color: #5f6f78;
  font-size: 10px;
  font-weight: 750;
}
.estabelecimento-status.aberto { background: rgba(117, 166, 36, .14); color: #547d0f; }
.estabelecimento-status.fechado { background: rgba(211, 74, 74, .13); color: #b53535; }

.estabelecimento-secao { margin-top: 15px; }
.estabelecimento-secao-titulo {
  margin: 0 0 7px 2px;
  color: var(--t2, #547080);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.estabelecimento-actions { display: flex; gap: 8px; }
.estabelecimento-btn-call,
.estabelecimento-btn-whatsapp {
  display: inline-flex;
  flex: 1 1 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 11px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.estabelecimento-btn-call { background: var(--cyan, #11b5d9); }
.estabelecimento-btn-whatsapp { background: #25a968; }
.estabelecimento-referencia {
  padding: 11px 12px;
  border: 1px solid var(--border, #dce6ec);
  border-radius: 11px;
  background: var(--card, #ffffff);
  color: var(--t2, #547080);
  font-size: 12px;
  line-height: 1.45;
}
.estabelecimento-produtos-lista {
  overflow: hidden;
  border: 1px solid var(--border, #dce6ec);
  border-radius: 14px;
  background: var(--card, #ffffff);
}
.estabelecimento-produto-linha {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 9px;
  min-height: 57px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border, #dce6ec);
}
.estabelecimento-produto-linha:last-child { border-bottom: 0; }
.estabelecimento-disponibilidade-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9aa9b0;
}
.estabelecimento-disponibilidade-dot.disponivel { background: #72a624; box-shadow: 0 0 0 3px rgba(114, 166, 36, .13); }
.estabelecimento-disponibilidade-dot.poucas_unidades { background: #e0a526; box-shadow: 0 0 0 3px rgba(224, 165, 38, .14); }
.estabelecimento-disponibilidade-dot.esgotado { background: #d34a4a; box-shadow: 0 0 0 3px rgba(211, 74, 74, .13); }
.estabelecimento-produto-info { min-width: 0; }
.estabelecimento-produto-nome {
  overflow: hidden;
  color: var(--t1, #163043);
  font-size: 12.5px;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.estabelecimento-produto-sub { margin-top: 2px; color: var(--t3, #8296a1); font-size: 10px; text-transform: capitalize; }
.estabelecimento-produto-preco { color: var(--lime, #638f19); font-size: 12px; font-weight: 850; white-space: nowrap; }
.estabelecimento-produto-sugerir {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: var(--t3, #8296a1);
  cursor: pointer;
}
.estabelecimento-produto-sugerir:hover { background: rgba(17, 181, 217, .1); color: var(--cyan, #0787aa); }

/* --------------------------------------------------------------------------
   Download offline
   -------------------------------------------------------------------------- */
.comercio-download-progress {
  width: 100%;
  height: 8px;
  margin: 14px 0 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 181, 217, .14);
}
.comercio-download-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan, #11b5d9), var(--lime, #75a624));
  box-shadow: 0 1px 6px rgba(17, 181, 217, .36);
  transition: width .24s ease;
}

/* --------------------------------------------------------------------------
   Tema, acessibilidade e ecrãs pequenos
   -------------------------------------------------------------------------- */
.tema-escuro #partilha-comercio-view,
.tema-escuro #estabelecimento-overlay { background: var(--bg, #071d2b); }
.tema-escuro .comercio-area-chip,
.tema-escuro .comercio-search-bar,
.tema-escuro .comercio-filtro-chip,
.tema-escuro .comercio-resultado-item,
.tema-escuro .estabelecimento-header,
.tema-escuro .estabelecimento-referencia,
.tema-escuro .estabelecimento-produtos-lista,
.tema-escuro #estabelecimento-overlay .chat-overlay-header { background: var(--card, #102c3b); }

@media (max-width: 380px) {
  #partilha-comercio-view { padding-right: 12px; padding-left: 12px; }
  .comercio-area-chip { align-items: flex-start; flex-direction: column; }
  .comercio-area-chip-actions { width: 100%; }
  .comercio-area-chip-btn { flex: 1; }
  .comercio-resultado-bottom { align-items: flex-start; flex-direction: column; gap: 5px; }
  .estabelecimento-body { padding-right: 12px; padding-left: 12px; }
  .estabelecimento-produto-linha { grid-template-columns: 8px minmax(0, 1fr) auto; }
  .estabelecimento-produto-sugerir { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .comercio-filtro-chip,
  .comercio-resultado-item,
  #estabelecimento-overlay,
  .comercio-download-progress-bar { transition: none; }
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  .comercio-area-chip { background: #f0fbfd; }
}

/* ========================================================================= */

/* ══════════════════════════════════════════════════════════════════════════
   LUZAYADIO — COMÉRCIO · FEED, SEGUIR EMPRESAS, COMPRAR/ENCOMENDAR
   Camada aditiva sobre a Secção 7. Reutiliza os mesmos tokens (--cyan,
   --lime, --mara, --border, --card, --t1/2/3) e os componentes já existentes
   (.compose-sheet, .chat-menu-item, .pdf-submit) para que o novo ecrã "Para
   ti" pareça sempre parte da mesma app, nunca um módulo colado por cima.
   ═══════════════════════════════════════════════════════════════════════ */

/* --------------------------------------------------------------------------
   Sub-separador Feed / Pesquisar
   -------------------------------------------------------------------------- */
.comercio-subtabs {
  display: flex;
  gap: 6px;
  padding: 3px;
  margin: 0 0 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--cyan, #11b5d9) 6%, var(--card, #fff));
  border: 1px solid var(--border, #dce6ec);
}
.comercio-subtab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--t2, #547080);
  cursor: pointer;
  transition: background .18s var(--trans-main, ease), color .18s ease, box-shadow .18s ease;
  user-select: none;
}
.comercio-subtab .lz-icon { color: currentColor; }
.comercio-subtab:hover { color: var(--t1, #163043); }
.comercio-subtab.sel {
  background: var(--card, #ffffff);
  color: var(--cyan-deep, #0a7e99);
  box-shadow: 0 3px 10px rgba(13, 53, 76, .10);
}
.tema-escuro .comercio-subtab.sel { color: var(--cyan, #29c5ea); }

/* --------------------------------------------------------------------------
   Linha "A seguir" — acesso rápido estilo stories
   -------------------------------------------------------------------------- */
.comercio-seguidos-row {
  display: flex;
  gap: 14px;
  padding: 2px 2px 16px;
  margin-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border, #dce6ec);
}
.comercio-seguidos-row::-webkit-scrollbar { display: none; }
.comercio-seguido-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 62px;
  cursor: pointer;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
}
.comercio-seguido-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--cyan, #11b5d9), var(--lime, #75a624));
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 2.5px var(--bg, #fff), 0 0 0 4px color-mix(in srgb, var(--lime, #7ed321) 55%, transparent);
}
.comercio-seguido-nome {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 650;
  color: var(--t2, #547080);
  text-align: center;
}
.comercio-seguir-mais {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 62px;
  cursor: pointer;
  background: none;
  border: 0;
  font: inherit;
}
.comercio-seguir-mais-icone {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.6px dashed color-mix(in srgb, var(--cyan, #11b5d9) 45%, var(--border, #dce6ec));
  color: var(--cyan, #11b5d9);
}
.comercio-seguidos-vazio {
  padding: 10px 2px 16px;
  border-bottom: 1px solid var(--border, #dce6ec);
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--t3, #788792);
  line-height: 1.5;
}
.comercio-seguidos-vazio strong { color: var(--t1, #163043); }

/* --------------------------------------------------------------------------
   Cartão de empresa (feed / sugestões / patrocinado)
   -------------------------------------------------------------------------- */
.comercio-feed-lista,
.comercio-sugestoes-lista,
.comercio-feed-patrocinados-lista {
  display: grid;
  gap: 12px;
}
.comercio-sugestoes-lista { grid-template-columns: 1fr; }
.comercio-secao-titulo {
  margin: 18px 2px 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--t1, #163043);
}

.comercio-empresa-card {
  border: 1px solid var(--border, #dce6ec);
  border-radius: 16px;
  background: var(--card, #ffffff);
  overflow: hidden;
  box-shadow: 0 5px 16px rgba(13, 53, 76, .05);
}
.comercio-empresa-card.patrocinado {
  border-color: color-mix(in srgb, var(--lime, #7ed321) 42%, var(--border, #dce6ec));
  background: color-mix(in srgb, var(--lime, #7ed321) 6%, var(--card, #fff));
}
.comercio-empresa-topo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px 10px;
  cursor: pointer;
}
.comercio-empresa-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--cyan, #11b5d9), var(--lime, #75a624));
  background-size: cover;
  background-position: center;
}
.comercio-empresa-info { min-width: 0; flex: 1; }
.comercio-empresa-nome-linha { display: flex; align-items: center; gap: 6px; min-width: 0; }
.comercio-empresa-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 750;
  color: var(--t1, #163043);
}
.comercio-empresa-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--t3, #788792);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.comercio-empresa-patrocinado-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--lime, #7ed321);
  color: #102000;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.comercio-empresa-status {
  font-weight: 700;
}
.comercio-empresa-status.aberto { color: #547d0f; }
.comercio-empresa-status.fechado { color: #b53535; }

.comercio-seguir-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1.4px solid var(--cyan, #11b5d9);
  background: transparent;
  color: var(--cyan-deep, #0a7e99);
  font-size: 11.5px;
  font-weight: 750;
  cursor: pointer;
  transition: all .16s var(--trans-main, ease);
  white-space: nowrap;
}
.comercio-seguir-btn:active { transform: scale(.96); }
.comercio-seguir-btn.sel {
  border-color: transparent;
  background: color-mix(in srgb, var(--cyan, #11b5d9) 14%, transparent);
  color: var(--cyan-deep, #0a7e99);
}
.tema-escuro .comercio-seguir-btn { color: var(--cyan, #29c5ea); }

/* Produtos em destaque dentro do cartão de empresa */
.comercio-empresa-produtos {
  display: flex;
  gap: 10px;
  padding: 0 14px 13px;
  overflow-x: auto;
  scrollbar-width: none;
}
.comercio-empresa-produtos::-webkit-scrollbar { display: none; }
.comercio-empresa-produto-chip {
  flex: 0 0 auto;
  min-width: 118px;
  max-width: 150px;
  padding: 9px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cyan, #11b5d9) 6%, var(--card2, #fafdfe));
  border: 1px solid var(--border, #dce6ec);
  cursor: pointer;
}
.comercio-empresa-produto-nome {
  font-size: 11.5px;
  font-weight: 650;
  color: var(--t1, #163043);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comercio-empresa-produto-preco {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 800;
  color: var(--cyan-deep, #0a7e99);
}

/* --------------------------------------------------------------------------
   Ações rápidas sobre resultados de pesquisa (favoritar / seguir / comprar)
   -------------------------------------------------------------------------- */
.comercio-resultado-clicavel { cursor: pointer; }
.comercio-resultado-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 0;
  margin-top: 10px;
  border-top: 1px solid var(--border, #dce6ec);
  flex-wrap: wrap;
}
.comercio-resultado-acao-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--border, #dce6ec);
  background: var(--card2, #fafdfe);
  color: var(--t2, #547080);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s var(--trans-main, ease);
}
.comercio-resultado-acao-btn:active { transform: scale(.95); }
.comercio-resultado-acao-btn.principal {
  border-color: transparent;
  background: linear-gradient(135deg, var(--cyan, #11b5d9), var(--lime, #75a624));
  color: #06222c;
}
.comercio-resultado-acao-btn.fav.sel { border-color: var(--mara, #FF4081); color: var(--mara, #FF4081); }
.comercio-resultado-acao-btn.seguir.sel { border-color: var(--cyan, #11b5d9); color: var(--cyan-deep, #0a7e99); }

/* --------------------------------------------------------------------------
   Ficha do estabelecimento — botão seguir no cabeçalho
   -------------------------------------------------------------------------- */
.estabelecimento-header-acoes { display: flex; gap: 8px; margin-top: 10px; }

/* --------------------------------------------------------------------------
   Folhas: ações do produto, comprar agora, encomendar
   -------------------------------------------------------------------------- */
.produto-acoes-sheet .sheet-title,
.comprar-agora-sheet .sheet-title,
.encomendar-sheet .sheet-title { margin-bottom: 2px; }
.produto-acoes-lista { margin-top: 6px; }
.produto-acao-destaque { color: var(--cyan-deep, #0a7e99); }
.produto-acao-destaque .lz-icon { color: var(--lime, #7ed321); }

.comercio-campo-label {
  margin: 16px 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t2, #547080);
  letter-spacing: .01em;
}
.comercio-qtd-row {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  padding: 4px 0 2px;
}
.comercio-qtd-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.4px solid var(--border, #dce6ec);
  background: var(--card2, #fafdfe);
  color: var(--t1, #163043);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comercio-qtd-btn:active { transform: scale(.92); }
.comercio-qtd-valor {
  min-width: 32px;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  color: var(--t1, #163043);
}
.comercio-entrega-row { display: flex; gap: 8px; flex-wrap: wrap; }
.comercio-entrega-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1.4px solid var(--border, #dce6ec);
  background: var(--card2, #fafdfe);
  color: var(--t2, #547080);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.comercio-entrega-chip.sel {
  border-color: transparent;
  background: linear-gradient(135deg, var(--cyan, #11b5d9), var(--lime, #75a624));
  color: #06222c;
}
.comercio-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 2px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #dce6ec);
  font-size: 13px;
  color: var(--t2, #547080);
}
.comercio-total-row strong { font-size: 17px; color: var(--t1, #163043); }

.tema-escuro .comercio-qtd-btn,
.tema-escuro .comercio-entrega-chip,
.tema-escuro .comercio-empresa-produto-chip,
.tema-escuro .comercio-resultado-acao-btn { background: var(--card, #102c3b); }

@media (max-width: 380px) {
  .comercio-subtab { font-size: 11.5px; padding: 8px 6px; }
  .comercio-resultado-acoes { gap: 5px; }
  .comercio-resultado-acao-btn { font-size: 10px; padding: 5px 9px; }
}

/* ========================================================================= */


/* Quinta aba: o conteúdo real é isolado no Shadow DOM e não herda o tema. */
#page-commerce { padding: 0 !important; overflow: hidden !important; background: #000; }
#commerce-shadow-host { display: block; width: 100%; height: 100%; min-height: 100%; overflow: auto; }
@media (max-width: 680px) { #page-commerce { min-width: 0; } }


/* Personalização: notificações no topo e quatro abas inferiores. */
.tb-notif-button{width:34px;height:34px;position:relative;display:grid;place-items:center;color:var(--t2);border:1px solid rgba(var(--cyan-rgb),.18);border-radius:10px;background:rgba(var(--cyan-rgb),.07);cursor:pointer;transition:color .2s,background .2s,transform .2s}
.tb-notif-button:hover{color:var(--t1);background:rgba(var(--cyan-rgb),.16);transform:translateY(-1px)}
.tb-notif-button .lz-icon{width:17px;height:17px}
.tb-notif-badge{width:7px;height:7px;position:absolute;top:5px;right:5px;border-radius:50%;background:var(--mara);box-shadow:0 0 8px var(--mara)}
.notifications-panel{position:fixed;inset:0;z-index:var(--z-screen);overflow-y:auto;padding:24px max(18px,5vw) calc(var(--safe-bot) + 90px);background:var(--app-bg-1);background-color:#000;-webkit-overflow-scrolling:touch}
.notifications-panel::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 20% 0%,rgba(var(--cyan-rgb),.10),transparent 55%),radial-gradient(circle at 90% 100%,rgba(var(--lime-rgb),.08),transparent 55%)}
.notifications-panel-header{max-width:780px;margin:0 auto 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.notifications-close{width:34px;height:34px;display:grid;place-items:center;color:var(--t2);border:1px solid rgba(var(--cyan-rgb),.18);border-radius:10px;background:rgba(var(--cyan-rgb),.07);font-size:23px;line-height:1;cursor:pointer}
.notifications-panel .notif-list{max-width:780px;margin:0 auto}
.notif-toolbar{max-width:780px;margin:0 auto 14px;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.notif-toolbar-label{font-size:12px;font-weight:700;color:var(--t3);letter-spacing:.04em}
@media (max-width:480px){.notifications-panel{padding:16px 14px calc(var(--safe-bot) + 80px)}.notifications-panel-header{margin-bottom:12px}.notif-toolbar{justify-content:stretch}.notif-toolbar select{flex:1}}

/* Notificações do backend externo do Comércio. */
.notif-commerce-section{max-width:780px;margin:18px auto 0;padding-top:16px;border-top:1px solid rgba(var(--cyan-rgb),.14)}
.notif-commerce-title{margin-bottom:10px;color:var(--cyan);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.notif-commerce-card{padding:13px 14px;margin-bottom:9px;border:1px solid rgba(var(--cyan-rgb),.12);border-radius:12px;background:rgba(var(--cyan-rgb),.045);cursor:pointer}
.notif-commerce-card.unread{border-color:rgba(var(--cyan-rgb),.34);box-shadow:inset 3px 0 var(--cyan)}
.notif-commerce-card-title{color:var(--t1);font-size:12px;font-weight:700}
.notif-commerce-card-body{margin-top:5px;color:var(--t2);font-size:11px;line-height:1.45}
.notif-commerce-card time{display:block;margin-top:7px;color:var(--t3);font-size:9px}
.notif-commerce-empty{padding:14px;color:var(--t3);font-size:11px}


/* ═══════════════════════════════════════════════════════════════════════
   REFINO PROFISSIONAL — PARTILHA / HISTORIES RESPONSIVOS
   ═══════════════════════════════════════════════════════════════════════ */
.mood-row {
  gap: clamp(10px, 2vw, 14px);
  padding: 4px clamp(14px, 4vw, 28px) 10px;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.mood-btn.estado-card {
  width: clamp(94px, 18vw, 120px);
  min-height: 164px;
  border: 1.5px solid var(--card-a-border);
  background: var(--card-a);
  box-shadow: var(--card-shadow), 0 10px 26px rgba(0,0,0,.24);
  scroll-snap-align: start;
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

/* Alternância Luzayadio também nos mini-cards de estado (Reels) */
.mood-row .mood-btn.estado-card:nth-child(even) {
  background: var(--card-b);
  border-color: var(--card-b-border);
}

.mood-btn.estado-card::after {
  content: '';
  position: absolute;
  top: -35%;
  left: -20%;
  width: 80%;
  height: 90%;
  background: radial-gradient(circle, rgba(var(--cyan-rgb), .18), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.estado-card .mood-img-wrap,
.estado-card .mood-label-bar,
.estado-card .estado-card-identificador,
.estado-card .estado-avatar-wrap {
  position: relative;
  z-index: 1;
}

.mood-row .mood-btn.estado-card:nth-child(even)::after {
  background: radial-gradient(circle, rgba(var(--lime-rgb), .18), transparent 70%);
}

.mood-btn.estado-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--cyan-rgb), .45);
  box-shadow: var(--card-shadow), 0 14px 30px rgba(0,0,0,.3), 0 0 0 3px rgba(var(--cyan-rgb), .08);
}

.mood-btn.estado-card:focus-visible {
  outline: 3px solid rgba(var(--cyan-rgb), .68);
  outline-offset: 3px;
}

.mood-btn.estado-card:active {
  transform: scale(.97);
}

.estado-card .mood-img-wrap {
  height: clamp(112px, 18vw, 142px);
  border-radius: 16px 16px 12px 12px;
  background: color-mix(in srgb, var(--cyan) 16%, #0b1c24 84%);
}

.estado-card.tem-novo {
  padding: 2px;
  border: 0;
  background: linear-gradient(135deg, var(--cyan), var(--mara, #ff4081));
  box-shadow: 0 12px 28px rgba(var(--cyan-rgb), .2), 0 0 0 3px rgba(var(--cyan-rgb), .08);
}

.estado-card.tem-novo .mood-img-wrap {
  border-radius: 14px 14px 10px 10px;
}

.estado-card .mood-label-bar {
  position: relative;
  z-index: 2;
  padding: 8px 5px 2px;
  color: var(--t1);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: none;
}

.estado-card .estado-card-identificador {
  position: relative;
  z-index: 2;
  padding: 0 6px 9px;
  color: var(--t3);
  font-size: 8.5px;
  letter-spacing: .01em;
}

.estado-preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cyan) 46%, #0b2530 54%), color-mix(in srgb, var(--cyan) 18%, #071822 82%));
}

.estado-preview > img,
.estado-preview > video,
.estado-preview-avatar > img,
.estado-preview-fallback > img,
.estado-preview-fallback > span:first-child {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.estado-preview-avatar > span,
.estado-preview-fallback > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  background: radial-gradient(circle at 30% 15%, rgba(var(--cyan-rgb),.55), transparent 55%), linear-gradient(145deg, color-mix(in srgb, var(--cyan) 40%, #0d2b34 60%), color-mix(in srgb, var(--lime) 22%, #10222a 78%));
}

.estado-preview-fallback {
  position: absolute;
  inset: 0;
}

.estado-preview-texto {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 11px;
  color: #fff;
  text-align: center;
  font-size: clamp(12px, 2vw, 15px);
  font-weight: 700;
  line-height: 1.25;
}

.estado-preview-texto > span {
  display: -webkit-box;
  max-height: 4.9em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  position: relative;
  z-index: 1;
}

.estado-preview-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%);
}

.estado-preview-media > video {
  position: absolute;
  inset: 0;
}

.estado-preview-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
  background: rgba(4,14,22,.52);
  color: #fff;
  font-size: 13px;
  backdrop-filter: blur(8px);
}

.estado-preview-kind {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 3;
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(3,12,19,.52);
  color: rgba(255,255,255,.9);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.estado-card-plus {
  right: 5px;
  bottom: 7px;
  z-index: 4;
  width: 23px;
  height: 23px;
  border: 2px solid #12232b;
  box-shadow: 0 4px 12px rgba(0,0,0,.28);
}

.estado-empty-hint {
  width: min(100%, 420px);
  min-width: 0;
  margin: 6px clamp(14px, 4vw, 28px);
  background: linear-gradient(135deg, rgba(var(--cyan-rgb),.1), rgba(255,255,255,.035));
}

#estado-viewer {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  background: radial-gradient(circle at 50% 20%, #162f3b 0, #03080d 48%, #000 100%);
}

.estado-viewer-barras {
  padding: 10px max(10px, env(safe-area-inset-left)) 0;
}

.estado-viewer-header {
  min-height: 58px;
  padding: 10px max(14px, env(safe-area-inset-left)) 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.45), transparent);
}

.estado-viewer-corpo {
  min-height: 0;
  touch-action: manipulation;
  user-select: none;
}

.estado-viewer-slide {
  border-radius: clamp(0px, 2vw, 18px);
}

.estado-viewer-corpo img,
.estado-viewer-corpo video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.estado-viewer-video {
  cursor: pointer;
}

.estado-video-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) scale(.78);
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
  background: rgba(0,0,0,.48);
  color: #fff;
  font-size: 25px;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.estado-video-toggle.visivel {
  animation: estado-video-toggle-in .52s ease-out both;
}

@keyframes estado-video-toggle-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.78); }
  24% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.06); }
}

.estado-viewer-texto-slide {
  max-width: 760px;
  margin: auto;
  padding: clamp(32px, 8vw, 90px) clamp(24px, 8vw, 100px);
  font-size: clamp(21px, 4vw, 36px);
}

.estado-viewer-legenda {
  padding: 22px max(18px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-bottom));
  font-size: clamp(13px, 2vw, 16px);
  line-height: 1.45;
}

.estado-compose-preview {
  position: relative;
  min-height: 100px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.estado-compose-preview video,
.estado-compose-preview img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.estado-compose-video-badge {
  position: absolute;
  right: 9px;
  top: 9px;
  z-index: 2;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

@media (min-width: 700px) {
  .mood-row {
    overflow-x: visible;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .mood-btn.estado-card {
    width: 112px;
  }
}

@media (min-width: 1100px) {
  .mood-row {
    gap: 16px;
    padding-left: 32px;
    padding-right: 32px;
  }

  .mood-btn.estado-card {
    width: 126px;
    min-height: 180px;
  }

  .estado-card .mood-img-wrap {
    height: 146px;
  }
}

@media (max-width: 380px) {
  .mood-row {
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .mood-btn.estado-card {
    width: 88px;
    min-height: 151px;
  }

  .estado-card .mood-img-wrap {
    height: 104px;
  }

  .estado-card .mood-label-bar {
    font-size: 9px;
  }

  .estado-card-identificador {
    font-size: 7.5px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .estado-viewer-header {
    min-height: 44px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .estado-viewer-avatar {
    width: 28px;
    height: 28px;
  }

  .estado-viewer-corpo img,
  .estado-viewer-corpo video {
    max-height: 78vh;
  }

  .estado-viewer-legenda {
    padding-top: 8px;
    padding-bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .estado-video-toggle.visivel { animation: none; opacity: 1; }
  .mood-btn.estado-card { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HISTORIES — botão de adicionar flutuante (fora da fila, não sobreposto)
   ═══════════════════════════════════════════════════════════════════════ */
.mood-row-wrap {
  position: relative;
}

.mood-row-wrap .mood-row {
  padding-right: clamp(52px, 12vw, 70px);
}

/* Esbatimento suave à direita para o último card não cortar abruptamente
   por baixo do botão flutuante. */
.mood-row-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 10px;
  right: 0;
  width: clamp(46px, 11vw, 64px);
  background: linear-gradient(90deg, transparent, rgba(6, 14, 24, .88) 78%);
  pointer-events: none;
  z-index: 4;
}

.mood-add-fab {
  position: absolute;
  right: clamp(6px, 2vw, 14px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(6, 14, 20, .55);
  background: linear-gradient(135deg, var(--cyan), var(--lime));
  color: #04262b;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(var(--cyan-rgb), .38), 0 0 0 4px rgba(6, 14, 20, .35);
  transition: transform .18s var(--trans-main, ease), box-shadow .18s;
}

.mood-add-fab svg {
  width: 20px;
  height: 20px;
}

.mood-add-fab:active {
  transform: translateY(-50%) scale(.9);
}

@media (hover: hover) {
  .mood-add-fab:hover {
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 14px 30px rgba(var(--cyan-rgb), .46), 0 0 0 4px rgba(6, 14, 20, .35);
  }
}

@media (max-width: 380px) {
  .mood-add-fab {
    width: 40px;
    height: 40px;
  }

  .mood-add-fab svg {
    width: 17px;
    height: 17px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MENSAGENS — cada bolha ganha um formato diferente conforme o tamanho
   ═══════════════════════════════════════════════════════════════════════ */

/* Mensagens curtas (até ~14 caracteres): bolha compacta e bem arredondada,
   tipo "pílula" — não desperdiça espaço com um "Ok" ou "Sim". */
.chat-msg-bolha.msg-curta {
  padding: 8px 15px;
  border-radius: 22px;
  font-size: 14.5px;
}

.chat-msg-outro.msg-curta,
.chat-msg-minha.msg-curta {
  max-width: max-content;
}

/* Mensagens normais (conversa do dia a dia): mantém o desenho padrão,
   só com o polimento geral já aplicado na base. */
.chat-msg-bolha.msg-normal {
  padding: 10px 14px;
  border-radius: 16px;
}

/* Mensagens longas (parágrafos): mais respiro, cantos mais suaves e um
   pouco mais de largura para não ficar num corredor estreito de texto. */
.chat-msg.msg-longa {
  max-width: 88%;
}

.chat-msg-bolha.msg-longa {
  padding: 14px 17px;
  border-radius: 15px;
  font-size: 13.6px;
  line-height: 1.58;
}

/* Mensagens muito longas: quase um "cartão", com leve textura interior e
   texto justificado para parecer um pequeno post em vez de uma bolha. */
.chat-msg.msg-extensa {
  max-width: 94%;
}

.chat-msg-bolha.msg-extensa {
  padding: 16px 19px;
  border-radius: 13px;
  font-size: 13.4px;
  line-height: 1.62;
  letter-spacing: .01em;
  text-align: justify;
  text-align-last: left;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* Mensagens que são só emoji: sem fundo/bolha, emoji grande com sombra
   suave — como no WhatsApp/Telegram/iMessage. */
.chat-msg-bolha.msg-emoji {
  padding: 2px 4px;
  background: transparent;
  border: none;
  box-shadow: none;
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .32));
}

.chat-msg-bolha.msg-emoji-grande { font-size: 54px; }
.chat-msg-bolha.msg-emoji-medio { font-size: 36px; }
.chat-msg-bolha.msg-emoji-pequeno { font-size: 25px; }

.chat-msg.msg-emoji {
  max-width: max-content;
}

@media (max-width: 380px) {
  .chat-msg-bolha.msg-emoji-grande { font-size: 44px; }
  .chat-msg-bolha.msg-emoji-medio { font-size: 30px; }
  .chat-msg-bolha.msg-emoji-pequeno { font-size: 22px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA PROFISSIONAL DE PUBLICAÇÕES MULTIMÉDIA
   O bloco é específico da aba Partilha e mantém a paleta Luzayadio.
═══════════════════════════════════════════════════════════════════════════ */
#compose-modal .compose-sheet {
  max-height: min(92vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

#compose-modal .compose-send:disabled {
  opacity: .55;
  cursor: wait;
  transform: none;
}

.compose-attachment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.compose-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid rgba(var(--cyan-rgb), .28);
  border-radius: 12px;
  background: rgba(var(--cyan-rgb), .08);
  color: var(--cyan);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}

.compose-attach-btn:hover {
  background: rgba(var(--cyan-rgb), .15);
  border-color: rgba(var(--cyan-rgb), .48);
}

.compose-attach-btn:active {
  transform: scale(.97);
}

.compose-attach-btn .lz-icon {
  width: 16px;
  height: 16px;
}

.compose-attachment-hint {
  color: var(--t3);
  font-size: 10px;
  line-height: 1.4;
}

.compose-media-preview {
  margin-top: 13px;
  padding: 8px;
  border: 1px solid rgba(var(--cyan-rgb), .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
}

.compose-preview-media {
  display: grid;
  place-items: center;
  min-height: 100px;
  overflow: hidden;
  border-radius: 11px;
  background: #06121d;
}

.compose-preview-media img,
.compose-preview-media video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 270px;
  object-fit: contain;
  background: #06121d;
}

.compose-preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 3px 1px;
  color: var(--t3);
  font-size: 10px;
}

.compose-preview-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compose-preview-meta button {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #ff9bbd;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.post-media {
  position: relative;
  margin: 14px 0 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  background: #06121d;
  z-index: 1;
}

.post-media img,
.post-media video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(68vh, 620px);
  object-fit: contain;
  object-position: center;
  background: #06121d;
}

.post-media figcaption {
  padding: 7px 10px 8px;
  color: var(--t3);
  font-size: 10px;
  letter-spacing: .02em;
  background: rgba(5, 26, 46, .75);
}

.post-media-video video {
  min-height: 150px;
}

@media (min-width: 760px) {
  #compose-modal {
    align-items: center;
    padding: 24px;
  }

  #compose-modal .compose-sheet {
    border-bottom: 1px solid rgba(var(--cyan-rgb), .18);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   AÇÕES CONTEXTUAIS E RECORTE DE VÍDEO DOS ESTADOS
═══════════════════════════════════════════════════════════════════════════ */
/* CORREÇÃO (menu de Responder/Apagar/Encaminhar não aparecia): esta regra
   redefinia o z-index de #msg-acoes-modal (e #partilha-acoes-modal) para
   calc(--z-sheet + 2) = 702, sobrepondo-se ao valor correto (1110) já
   definido lá em cima, na lista partilhada de modais sobre o ecrã cheio.
   Como #chat-overlay (o ecrã da conversa) tem z-index 1100, o menu ficava
   fisicamente ABAIXO do ecrã da conversa: a lógica JS corria (a classe
   "open" era aplicada, pointer-events:all, opacity:1), mas o modal ficava
   escondido atrás do fundo opaco da conversa — por isso parecia que nada
   acontecia ao tocar ou deslizar. Removida a redeclaração de z-index; o
   valor correto volta a vir só da lista partilhada acima. */

#partilha-acoes-modal .compose-sheet,
#msg-acoes-modal .compose-sheet {
  padding-bottom: calc(var(--safe-bot) + 22px);
}

.chat-menu-item.selected {
  color: var(--cyan);
  background: rgba(var(--cyan-rgb), .10);
}

.post-card {
  -webkit-touch-callout: none;
  user-select: none;
}

.post-card .post-body,
.post-card .post-media,
.post-card .post-actions,
.post-card .post-replies-wrap {
  user-select: text;
}

.estado-video-trim-editor {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(var(--cyan-rgb), .22);
  border-radius: 16px;
  background: rgba(var(--cyan-rgb), .06);
}

.estado-video-trim-title {
  color: var(--t1);
  font-size: 13px;
  font-weight: 800;
}

.estado-video-trim-sub {
  margin-top: 4px;
  color: var(--t3);
  font-size: 11px;
  line-height: 1.45;
}

.estado-video-trim-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.estado-video-trim-fields label {
  display: grid;
  gap: 5px;
  color: var(--t2);
  font-size: 11px;
  font-weight: 700;
}

.estado-video-trim-fields input {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  color: var(--t1);
  font: inherit;
}

.estado-video-trim-range {
  position: relative;
  height: 7px;
  margin: 14px 0 10px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
}

#estado-video-trim-range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--lime));
  transition: left .18s ease, width .18s ease;
}

.estado-video-trim-btn {
  width: 100%;
  margin-top: 3px;
  padding: 10px 14px;
  font-size: 12px;
}

.estado-video-trim-btn:disabled {
  opacity: .55;
  cursor: wait;
}

.estado-video-trim-status {
  min-height: 16px;
  margin-top: 8px;
  color: var(--t3);
  font-size: 10px;
  text-align: center;
}

@media (max-width: 420px) {
  .estado-video-trim-fields {
    gap: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .estado-video-trim-range-fill {
    transition: none;
  }
}

.post-dislike-hint {
  color: var(--t3);
  font-size: 10px;
}

.post-card[data-disliked="true"] {
  border-color: rgba(var(--cyan-rgb), .18);
}

.post-card[data-disliked="true"] .reaction-pill {
  color: var(--cyan);
}

/* Pressão prolongada: indicação subtil, sem botão permanente no card. */
.post-card:active {
  transform: scale(.992);
}

#partilha-acoes-modal .chat-menu-item,
#msg-acoes-modal .chat-menu-item {
  min-height: 44px;
}

#partilha-acoes-modal .chat-menu-item.danger,
#msg-acoes-modal .chat-menu-item.danger {
  color: #ff9dbd;
}

#partilha-acoes-modal .chat-menu-item svg,
#msg-acoes-modal .chat-menu-item svg {
  flex-shrink: 0;
}

@media (min-width: 760px) {
  #partilha-acoes-modal,
  #msg-acoes-modal {
    align-items: center;
    padding: 24px;
  }

  #partilha-acoes-modal .compose-sheet,
  #msg-acoes-modal .compose-sheet {
    border-bottom: 1px solid rgba(var(--cyan-rgb), .18);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   POLIMENTO UX 2026 — transições, estabilidade visual e carregamentos
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --ease-smooth: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --motion-fast: 180ms;
  --motion-base: 360ms;
  --motion-slow: 560ms;
}

html { background: var(--bg-deep, #000); }
body { background-color: var(--bg-deep, #000); }
button, a, input, textarea, select { transition: transform var(--motion-fast) var(--ease-smooth), opacity var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
button:not(:disabled):active { transform: translateY(1px) scale(.985); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* A entrada deixa de parecer uma construção abrupta do DOM. */
#auth-screen, #login-screen, #app-shell { will-change: opacity, transform; }
#auth-screen.visible, #login-screen.visible, #app-shell.visible { animation: shell-enter var(--motion-slow) var(--ease-spring) both; }
@keyframes shell-enter { from { opacity:0; transform:translateY(12px) scale(.992); } to { opacity:1; transform:none; } }

/* Splash sólido desde o primeiro frame e saída sem revelar a página por baixo. */
#splash { background:var(--app-bg-1, #000); isolation:isolate; }
#splash.exit { opacity:0; transform:scale(1.025); pointer-events:none; transition:opacity 480ms ease, transform 620ms var(--ease-smooth); }
#splash .splash-logo-wrap { animation:splash-logo-in 720ms var(--ease-spring) both; }
@keyframes splash-logo-in { from { opacity:0; transform:translateY(10px) scale(.94); } to { opacity:1; transform:none; } }

/* A troca horizontal usa composição GPU, evitando flashes e saltos de layout. */
#pages-viewport { isolation:isolate; contain:layout paint; }
#pages-track { backface-visibility:hidden; transform-style:preserve-3d; }
#pages-track > .page { backface-visibility:hidden; }
.page-lift-in-next, .page-lift-in-prev { animation-duration:430ms !important; animation-timing-function:var(--ease-spring) !important; }
.page-lift-out-next, .page-lift-out-prev { animation-duration:360ms !important; animation-timing-function:var(--ease-smooth) !important; }

/* Comércio: a tela aparece imediatamente com estrutura estável; a rede atualiza depois. */
#page-commerce { position:relative; min-height:0; }
#page-commerce::before { content:""; position:absolute; inset:18px; border-radius:24px; pointer-events:none; opacity:0; background:linear-gradient(110deg, rgba(255,255,255,.055), rgba(255,255,255,.015), rgba(255,255,255,.055)); background-size:220% 100%; }
#page-commerce.commerce-is-loading::before { opacity:1; animation:commerce-shimmer 1.35s linear infinite; }
@keyframes commerce-shimmer { to { background-position:-220% 0; } }
#commerce-shadow-host { min-height:100%; position:relative; z-index:1; }
#commerce-shadow-host > * { animation:commerce-content-in 460ms var(--ease-spring) both; }
@keyframes commerce-content-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Movimento reduzido continua totalmente funcional e acessível. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CHAT ALEATÓRIO (conversa efémera por proximidade) — Fase 3
   Reaproveita .compose-sheet/.sheet-handle/.sheet-title/.sheet-sub/
   .photo-btn como base (mesma linguagem visual dos outros sheets), só
   acrescenta o que é específico desta funcionalidade: os 4 estados do
   modal, o interruptor liga/desliga, as bolhas da conversa e o banner
   de convite flutuante.
   ═══════════════════════════════════════════════════════════════════════ */

#chataleatorio-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  background: rgba(5, 10, 20, .85);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--trans-main);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#chataleatorio-modal.open {
  opacity: 1;
  pointer-events: all;
}

#chataleatorio-modal.open .compose-sheet {
  transform: translateY(0);
}

.chataleatorio-sheet {
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.chataleatorio-estado {
  display: flex;
  flex-direction: column;
}

/* ── Interruptor liga/desliga ─────────────────────────────────────── */
.chataleatorio-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  margin-bottom: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
}

.chataleatorio-toggle-texto {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.chataleatorio-toggle-titulo {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--t1);
}

.chataleatorio-toggle-sub {
  font-size: 11px;
  color: var(--t3);
  line-height: 1.4;
}

.chataleatorio-toggle-btn {
  flex: none;
  width: 46px;
  height: 27px;
  padding: 3px;
  border: none;
  border-radius: 100px;
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
  transition: background .2s var(--trans-main);
  position: relative;
}

.chataleatorio-toggle-btn.on {
  background: linear-gradient(135deg, var(--cyan), var(--lime));
}

.chataleatorio-toggle-knob {
  display: block;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  transition: transform .22s var(--trans-main);
}

.chataleatorio-toggle-btn.on .chataleatorio-toggle-knob {
  transform: translateX(19px);
}

/* Botões de direção/procurar ficam esbatidos e inertes quando o
   interruptor está desligado — o JS também bloqueia no clique, isto é
   só o reflexo visual dessa regra. */
#chataleatorio-intro-acoes.chataleatorio-desativado {
  opacity: .42;
  filter: grayscale(.4);
  pointer-events: none;
}

/* ── Escolha de direção (mais perto / mais longe) ─────────────────── */
.chataleatorio-direcao {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.chataleatorio-direcao-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 10px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: var(--t2);
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: all .18s;
}

.chataleatorio-direcao-btn .lz-icon {
  width: 15px;
  height: 15px;
}

.chataleatorio-direcao-btn.sel {
  border-color: rgba(var(--cyan-rgb), .45);
  background: linear-gradient(135deg, rgba(var(--cyan-rgb), .18), rgba(var(--lime-rgb), .14));
  color: var(--t1);
}

.chataleatorio-aviso {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  padding: 12px 13px;
  border-radius: 13px;
  background: rgba(var(--lime-rgb), .07);
  border: 1px solid rgba(var(--lime-rgb), .18);
  color: var(--t2);
  font-size: 11px;
  line-height: 1.5;
}

.chataleatorio-aviso .lz-icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--lime);
}

/* ── Estado: a procurar ───────────────────────────────────────────── */
.chataleatorio-spinner {
  width: 46px;
  height: 46px;
  margin: 6px auto 18px;
  border-radius: 50%;
  border: 3px solid rgba(var(--cyan-rgb), .18);
  border-top-color: var(--cyan);
  animation: chataleatorio-spin 0.85s linear infinite;
}

@keyframes chataleatorio-spin {
  to { transform: rotate(360deg); }
}

#chataleatorio-estado-buscando,
#chataleatorio-estado-sem-resultado {
  text-align: center;
  align-items: center;
}

#chataleatorio-estado-buscando .sheet-title,
#chataleatorio-estado-sem-resultado .sheet-title {
  margin-top: 2px;
}

#chataleatorio-estado-buscando .photo-btn,
#chataleatorio-estado-sem-resultado .photo-btn {
  margin-top: 6px;
}

#chataleatorio-estado-sem-resultado .photo-btn + .photo-btn {
  margin-top: 8px;
}

/* ── Estado: conversa ativa ───────────────────────────────────────── */
.chataleatorio-estado-chat {
  height: min(72vh, 620px);
}

.chataleatorio-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.chataleatorio-chat-sub {
  font-size: 11px;
  color: var(--t3);
  margin-top: 3px;
}

.chataleatorio-chat-head-acoes {
  display: flex;
  gap: 6px;
  flex: none;
}

.chataleatorio-icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: var(--t2);
  cursor: pointer;
  transition: all .18s;
}

.chataleatorio-icon-btn:active {
  transform: scale(.93);
  background: rgba(255, 255, 255, .09);
}

.chataleatorio-icon-btn .lz-icon {
  width: 16px;
  height: 16px;
}

.chataleatorio-mensagens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 2px;
}

/* Bolhas da conversa — reaproveita a paleta de .chat-msg-bolha mas com
   classe própria, porque este chat nunca guarda mensagens e não tem
   autor/avatar por perto do balão. */
.chataleatorio-bolha {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .16);
  animation: chataleatorio-bolha-in .22s var(--trans-main) both;
}

@keyframes chataleatorio-bolha-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.chataleatorio-bolha-outro {
  align-self: flex-start;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .10);
  color: var(--t1);
  border-bottom-left-radius: 4px;
}

.chataleatorio-bolha-propria {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(var(--cyan-rgb), .30), rgba(var(--lime-rgb), .26));
  border: 1px solid rgba(var(--cyan-rgb), .38);
  color: var(--t1);
  border-bottom-right-radius: 4px;
}

.chataleatorio-compositor {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.chataleatorio-compositor input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 100px;
  border: 1.5px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: var(--t1);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.chataleatorio-compositor input::placeholder {
  color: var(--t3);
}

.chataleatorio-compositor input:focus {
  border-color: rgba(var(--cyan-rgb), .45);
  box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .09);
}

.chataleatorio-compositor button {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--lime));
  color: #0b0f14;
  cursor: pointer;
  transition: transform .15s;
}

.chataleatorio-compositor button:active {
  transform: scale(.92);
}

.chataleatorio-compositor button .lz-icon {
  width: 18px;
  height: 18px;
}

/* ── Estado: denunciar ────────────────────────────────────────────── */
#chataleatorio-estado-denuncia #chataleatorio-denuncia-motivo {
  margin-bottom: 16px;
}

/* ── Banner de convite recebido — flutua por cima de qualquer ecrã ──
   Fica escondido (translateY + opacity) até o JS adicionar '.show'. */
#chataleatorio-convite-banner {
  position: fixed;
  left: 14px;
  right: 14px;
  top: calc(var(--safe-top) + 14px);
  z-index: calc(var(--z-toast) + 20);
  opacity: 0;
  transform: translateY(-16px) scale(.97);
  pointer-events: none;
  transition: opacity .3s var(--trans-main), transform .3s var(--trans-main);
}

#chataleatorio-convite-banner.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.chataleatorio-convite-card {
  max-width: 430px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--app-bg-2);
  border: 1px solid rgba(var(--cyan-rgb), .30);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.chataleatorio-convite-card > .lz-icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--cyan);
}

.chataleatorio-convite-texto {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.chataleatorio-convite-texto strong {
  font-size: 13px;
  color: var(--t1);
  line-height: 1.3;
}

.chataleatorio-convite-texto span {
  font-size: 10.5px;
  color: var(--t3);
}

.chataleatorio-convite-acoes {
  flex: none;
  display: flex;
  gap: 6px;
}

.chataleatorio-convite-recusar,
.chataleatorio-convite-aceitar {
  padding: 9px 13px;
  border-radius: 11px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  transition: transform .15s;
}

.chataleatorio-convite-recusar:active,
.chataleatorio-convite-aceitar:active {
  transform: scale(.94);
}

.chataleatorio-convite-recusar {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--t2);
}

.chataleatorio-convite-aceitar {
  background: linear-gradient(135deg, var(--cyan), var(--lime));
  color: #0b0f14;
}

@media (max-width: 380px) {
  .chataleatorio-convite-card {
    flex-wrap: wrap;
  }
  .chataleatorio-convite-acoes {
    width: 100%;
    justify-content: flex-end;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   ESTADOS — COMPOSITOR LIMPO E LISTA PROFISSIONAL
   ═══════════════════════════════════════════════════════════════════════ */
#estado-compose-modal .compose-sheet {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--app-bg-2, #0d2230);
  border: 1px solid rgba(var(--cyan-rgb), .16);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
}
#estado-compose-modal .estado-compose-tipos { order: 1; }
#estado-compose-modal #estado-compose-file-zone {
  display: contents !important;
  order: 2;
}
#estado-compose-modal #estado-compose-preview {
  order: 1;
  margin: 0 0 14px;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #071722;
  box-shadow: none;
}
#estado-compose-modal #estado-compose-preview:empty { display: none; }
#estado-compose-modal #estado-compose-preview video,
#estado-compose-modal #estado-compose-preview img {
  display: block;
  width: 100%;
  max-height: min(48vh, 320px);
  object-fit: cover;
}
#estado-compose-modal #estado-compose-file-zone > .bu-file-zone {
  order: 3;
  margin-top: 10px;
  border: 1px dashed rgba(var(--cyan-rgb), .32);
  background: rgba(var(--cyan-rgb), .045);
  box-shadow: none;
}
#estado-compose-modal #estado-video-trim-editor { order: 4; }
#estado-compose-modal #estado-compose-texto {
  order: 3;
  width: 100%;
  min-height: 78px;
  margin-top: 14px;
  padding: 8px 0;
  border: 0 !important;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--t1);
  font-size: 16px;
  line-height: 1.5;
  resize: none;
}
#estado-compose-modal #estado-compose-texto:focus {
  border: 0 !important;
  box-shadow: none;
}
#estado-compose-modal #estado-compose-char { order: 4; align-self: flex-end; margin: 0 0 8px !important; }
#estado-compose-modal #estado-compose-text-preview { order: 5; }
#estado-compose-modal #estado-compose-cores { order: 6; }
#estado-compose-modal .compose-footer { order: 7; }
#estado-compose-modal .sheet-sub { margin-bottom: 14px; }

/* Cards de estados: superfície simples, hierarquia clara e menos ruído visual. */
.mood-row-wrap { padding-bottom: 4px; }
.mood-row-wrap::after {
  width: 42px;
  background: linear-gradient(90deg, transparent, var(--app-bg-1, #081b29) 92%);
  opacity: .72;
}
.mood-row {
  gap: 12px;
  padding-top: 8px;
  padding-bottom: 14px;
}
.mood-btn.estado-card,
.mood-btn.estado-card:hover {
  min-height: 158px;
  border: 1.5px solid var(--card-a-border);
  border-radius: 18px;
  background: var(--card-a);
  box-shadow: var(--card-shadow);
  transform: none;
  transition: border-color .18s ease, background .18s ease;
}
.mood-btn.estado-card:hover { border-color: rgba(var(--cyan-rgb), .52); box-shadow: var(--card-shadow), 0 7px 18px rgba(0, 0, 0, .3); }
.mood-btn.estado-card:active { transform: scale(.985); }
.estado-card .mood-img-wrap {
  height: 112px;
  border-radius: 17px 17px 12px 12px;
  background: color-mix(in srgb, var(--cyan) 18%, #0d2733 82%);
}
.estado-card .mood-label-bar { padding: 7px 7px 1px; font-size: 10px; color: var(--t1); }
.estado-card .estado-card-identificador { padding: 0 7px 8px; color: var(--t3); }
.estado-card.tem-novo {
  padding: 2px;
  border: 0;
  background: linear-gradient(135deg, var(--cyan), var(--lime));
  box-shadow: 0 6px 18px rgba(var(--cyan-rgb), .14);
}
.estado-card.tem-novo .mood-img-wrap { border-radius: 16px 16px 11px 11px; }
.estado-card-plus { border-color: #102a39; box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.estado-empty-hint { box-shadow: none; border: 1px solid rgba(var(--cyan-rgb), .14); }

@media (max-width: 560px) {
  #estado-compose-modal .compose-sheet { border-radius: 24px 24px 0 0; }
  #estado-compose-modal #estado-compose-preview video,
  #estado-compose-modal #estado-compose-preview img { max-height: 38vh; }
}

@media (prefers-reduced-motion: reduce) {
  .mood-btn.estado-card,
  .mood-btn.estado-card:hover { transition: none; }
}


/* Melhorias solicitadas: chat aleatório efémero, menus sem cobrir a personagem e favoritos visíveis. */
.chataleatorio-compositor { display:flex; align-items:flex-end; gap:8px; }
.chataleatorio-compositor-centro { flex:1; min-width:0; }
.chataleatorio-compositor input[type="text"] { width:100%; min-width:0; }
.chataleatorio-anexar { flex:0 0 38px; }
.chataleatorio-imagem-preview { position:relative; display:inline-flex; margin:0 0 6px; }
.chataleatorio-imagem-preview img { width:58px; height:58px; object-fit:cover; border-radius:10px; border:1px solid var(--border, rgba(255,255,255,.18)); }
.chataleatorio-imagem-preview button { position:absolute; top:-7px; right:-7px; width:22px; height:22px; border:0; border-radius:50%; background:var(--danger,#e5484d); color:#fff; cursor:pointer; }
.chataleatorio-bolha img { display:block; max-width:min(240px, 70vw); max-height:240px; object-fit:cover; border-radius:10px; margin-bottom:6px; }
#luza-neno-sheet { z-index:1200; }
#luza-neno-sheet .compose-sheet { position:relative; margin-top:clamp(120px, 28vh, 260px); max-height:58vh; overflow-y:auto; }
#luza-neno-sheet.open { align-items:flex-start; padding-top:clamp(10px, 8vh, 72px); }
.comercio-favoritos-secao, .comercio-favoritos-visivel { margin:14px 0; padding:16px; border:1px solid color-mix(in srgb, var(--cyan,#29c5ea) 28%, var(--border,#dce4eb)); border-radius:18px; background:color-mix(in srgb, var(--cyan,#29c5ea) 5%, var(--card,#fff)); }
.comercio-favoritos-cabecalho, .comercio-favoritos-visivel .section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.comercio-favoritos-lista, .comercio-favoritos-visivel-lista { display:grid; gap:8px; margin-top:10px; }
.comercio-search-top { position:sticky; top:0; z-index:30; padding:14px 16px 10px; background:var(--bg-deep,#000); }
.comercio-search-top label { display:block; margin-bottom:6px; font-size:12px; font-weight:700; color:var(--t2,#8ca0b5); }
.comercio-search-top-control { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border,rgba(255,255,255,.18)); border-radius:14px; background:var(--card,#102c3b); }
.comercio-search-top-control input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--t1,#eef2f7); font:inherit; }
.comercio-search-top-sugestoes { margin-top:5px; padding:5px; border:1px solid var(--border,rgba(255,255,255,.18)); border-radius:12px; background:var(--card,#102c3b); box-shadow:0 12px 28px rgba(0,0,0,.25); }
.comercio-search-suggestion { display:block; width:100%; padding:9px 10px; border:0; border-radius:8px; background:transparent; color:var(--t1,#eef2f7); text-align:left; cursor:pointer; }
.comercio-search-suggestion:hover, .comercio-search-suggestion:focus-visible { background:rgba(41,197,234,.12); outline:0; }
.comercio-favorito-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:var(--card,#102c3b); border:1px solid var(--border,rgba(255,255,255,.12)); }
.comercio-favorito-icone { flex:0 0 34px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(var(--cyan-rgb,41,197,234),.12); color:var(--cyan,#29c5ea); }
.comercio-favorito-icone svg { width:18px; height:18px; }
.comercio-favorito-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.comercio-favorito-info b { font-size:13px; color:var(--t1,#eef2f7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.comercio-favorito-info span { font-size:12px; color:var(--t2,#8ca0b5); }
.comercio-favorito-remover { flex:0 0 auto; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:transparent; color:var(--t2,#8ca0b5); cursor:pointer; }
.comercio-favorito-remover svg { width:14px; height:14px; }
.comercio-favorito-remover:hover, .comercio-favorito-remover:focus-visible { background:rgba(229,72,77,.12); color:var(--danger,#e5484d); outline:0; }


/* ═══════════════════════════════════════════════════════════════════════
   PERFIL — camada autocontida e responsiva
   O markup do perfil é partilhado com a app, por isso todas as regras ficam
   sob #screen-profile para não interferirem com outras telas.
═══════════════════════════════════════════════════════════════════════ */
#screen-profile {
  position: fixed;
  inset: 0;
  z-index: var(--z-screen, 1000);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--app-bg-1, #000);
  color: var(--t1, #eef2f7);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .24s var(--trans-main, ease), transform .24s var(--trans-main, ease);
}
#screen-profile.visible { opacity: 1; transform: none; pointer-events: auto; }
#screen-profile *, #screen-profile *::before, #screen-profile *::after { box-sizing: border-box; }
#screen-profile .pf-topbar {
  position: sticky; top: 0; z-index: 20; flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px; min-height: 58px;
  padding: 8px max(16px, env(safe-area-inset-left)) 8px max(16px, env(safe-area-inset-right));
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: color-mix(in srgb, var(--app-bg-1, #000) 88%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
#screen-profile .pf-topbar-back { width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: rgba(255,255,255,.05); color: var(--t1); cursor: pointer; }
#screen-profile .pf-topbar-back svg { width: 18px; height: 18px; }
#screen-profile .pf-topbar-title { font-size: 14px; font-weight: 800; letter-spacing: .02em; }
#screen-profile .main-content { width: 100%; padding: 22px clamp(14px, 4vw, 44px) 48px; }
#screen-profile .profile-page { width: min(100%, 1180px); margin: 0 auto; display: grid; gap: 18px; }
#screen-profile .notebook-surface, #screen-profile .profile-card, #screen-profile .side-card, #screen-profile .about-card {
  border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: var(--card-a, #0b1d2b); box-shadow: var(--card-shadow, 0 14px 35px rgba(0,0,0,.22));
}
#screen-profile .profile-card { overflow: hidden; }
#screen-profile .profile-cover { min-height: 156px; position: relative; display: flex; align-items: flex-end; padding: 24px clamp(20px, 4vw, 42px); overflow: hidden; background: radial-gradient(circle at 85% 25%, rgba(var(--cyan-rgb),.30), transparent 42%), linear-gradient(135deg, rgba(var(--cyan-rgb),.20), rgba(var(--lime-rgb),.12)); }
#screen-profile .profile-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 15%, rgba(255,255,255,.06), transparent 72%); }
#screen-profile .cover-copy { position: relative; z-index: 1; max-width: 720px; }
#screen-profile .cover-copy h1 { margin: 7px 0 0; font-size: clamp(21px, 3vw, 34px); line-height: 1.12; color: var(--t1); }
#screen-profile .profile-summary { position: relative; display: grid; gap: 18px; padding: 0 clamp(18px, 4vw, 42px) 24px; }
#screen-profile .identity-row { display: flex; align-items: center; gap: 16px; margin-top: -38px; position: relative; z-index: 3; }
#screen-profile .avatar-wrap { width: 92px; height: 92px; padding: 4px; border-radius: 24px; background: var(--app-bg-1); box-shadow: 0 8px 26px rgba(0,0,0,.36); }
#screen-profile .avatar { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-radius: 19px; background: linear-gradient(135deg, var(--cyan), var(--lime)); color: #071018; font-weight: 800; }
#screen-profile .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#screen-profile .avatar.is-readonly { cursor: default; }
#screen-profile .online-dot { position: absolute; right: 5px; bottom: 5px; width: 11px; height: 11px; border: 2px solid var(--app-bg-1); border-radius: 50%; background: var(--lime); }
#screen-profile .identity-copy { min-width: 0; }
#screen-profile .name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#screen-profile .name-line h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: clamp(20px, 3vw, 28px); }
#screen-profile .self-badge { padding: 4px 8px; border-radius: 999px; background: rgba(var(--cyan-rgb),.15); color: var(--cyan); font-size: 10px; font-weight: 800; }
#screen-profile #pf-subtitle { margin: 5px 0 0; color: var(--t2); font-size: 12px; }
#screen-profile .profile-actions { display: flex; flex-wrap: wrap; gap: 9px; }
#screen-profile .profile-actions [hidden] { display: none !important; }
#screen-profile .profile-actions .button { min-height: 36px; padding: 0 13px; border-radius: 11px; font-size: 11px; }
#screen-profile .profile-stats { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
#screen-profile .profile-stats > div, #screen-profile .profile-stats > button { min-width: 92px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(255,255,255,.035); color: var(--t2); text-align: left; }
#screen-profile .profile-stats > button { cursor: pointer; font: inherit; }
#screen-profile .profile-stats strong, #screen-profile .profile-stats span { display: block; }
#screen-profile .profile-stats strong { color: var(--t1); font-size: 17px; }
#screen-profile .profile-stats span { margin-top: 2px; font-size: 10px; }
#screen-profile .profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
#screen-profile .profile-feed { min-width: 0; }
#screen-profile .tabs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 5px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(255,255,255,.035); }
#screen-profile .tabs-list { display: flex; gap: 4px; min-width: 0; }
#screen-profile .tabs-bar .tab, #screen-profile .share-link { min-height: 32px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; color: var(--t2); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
#screen-profile .tabs-bar .tab.is-active { background: rgba(var(--cyan-rgb),.16); color: var(--t1); }
#screen-profile .share-link { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#screen-profile .share-link svg { width: 14px; height: 14px; }
#screen-profile .tab-panel[hidden] { display: none !important; }
#screen-profile .about-card { padding: 22px; }
#screen-profile .about-copy { margin: 8px 0 18px; color: var(--t2); line-height: 1.65; }
#screen-profile .about-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 8px 0 0; color: var(--t3); font-size: 11px; }
#screen-profile .about-meta svg { width: 14px; height: 14px; color: var(--cyan); }
#screen-profile .profile-sidebar { display: grid; gap: 14px; }
#screen-profile .side-card { padding: 18px; }
#screen-profile .side-card .eyebrow { margin-top: 0; }
#screen-profile .pf-empty-state { min-height: 130px; display: grid; place-items: center; gap: 8px; padding: 28px 16px; color: var(--t3); text-align: center; }
#screen-profile .pf-empty-state p { margin: 0; }
#screen-profile .pf-empty-state .button { min-height: 34px; padding: 0 12px; }
/* O cabeçalho não pode competir com o conteúdo do post. */
#screen-profile .post-card { padding: 14px 16px; }
#screen-profile .post-card-top { gap: 9px; margin-bottom: 10px; }
#screen-profile .post-avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
#screen-profile .post-user-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
#screen-profile .post-user-meta { font-size: 10px; }
#screen-profile .post-card-top a, #screen-profile .post-card-top .post-avatar { flex: 0 0 auto; }
#screen-profile .post-card-top > div:last-child { min-width: 0; }
@media (max-width: 820px) { #screen-profile .profile-layout { grid-template-columns: 1fr; } #screen-profile .profile-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #screen-profile .main-content { padding: 14px 12px 34px; } #screen-profile .profile-cover { min-height: 136px; padding: 18px; } #screen-profile .identity-row { margin-top: -30px; } #screen-profile .avatar-wrap { width: 72px; height: 72px; border-radius: 19px; } #screen-profile .avatar { border-radius: 14px; } #screen-profile .profile-summary { padding: 0 16px 18px; } #screen-profile .profile-layout { gap: 12px; } #screen-profile .profile-sidebar { grid-template-columns: 1fr; } #screen-profile .tabs-bar { align-items: stretch; flex-direction: column; } #screen-profile .tabs-list { width: 100%; } #screen-profile .tabs-list .tab { flex: 1; } #screen-profile .share-link { justify-content: center; } }

/* Emojis personalizados da comunidade */
.custom-emoji-tools { position:relative; display:flex; align-items:center; margin:8px 0; }
.custom-emoji-picker { position:absolute; left:0; bottom:calc(100% + 8px); z-index:20; display:grid; grid-template-columns:repeat(6, 42px); gap:6px; max-width:min(300px, calc(100vw - 48px)); max-height:220px; overflow:auto; padding:10px; border:1px solid var(--border); border-radius:14px; background:var(--card); box-shadow:0 14px 32px rgba(0,0,0,.28); }
.custom-emoji-picker[hidden] { display:none; }
.custom-emoji-btn { width:42px; height:42px; display:grid; place-items:center; border:1px solid transparent; border-radius:10px; background:rgba(255,255,255,.05); cursor:pointer; }
.custom-emoji-btn:hover, .custom-emoji-btn:focus-visible { transform:scale(1.08); border-color:var(--cyan); }
.custom-emoji-btn img, .custom-emoji-inline { width:28px; height:28px; object-fit:contain; vertical-align:middle; }
.custom-emoji-empty { grid-column:1/-1; color:var(--t3); font-size:12px; padding:8px; text-align:center; }
.post-body .custom-emoji-inline { margin:0 2px; transform:translateY(5px); }
@media (max-width:520px) { .custom-emoji-picker { grid-template-columns:repeat(5, 42px); } }


/* ══ EXPLICADOR — chat de aprendizagem ══ */
.explicador-launch { margin: 12px 0 14px; padding: 14px; border: 1px solid rgba(var(--cyan-rgb),.36); border-radius: 16px; background: linear-gradient(135deg,rgba(var(--cyan-rgb),.16),rgba(var(--lime-rgb),.10)); cursor:pointer; text-align:left; color:var(--t1); box-shadow:0 10px 25px rgba(0,0,0,.2); }
.explicador-launch strong { display:block; font-size:14px; } .explicador-launch span { display:block; margin-top:4px; color:var(--t2); font-size:11px; line-height:1.45; }
.explicador-launch small { display:block; margin-top:9px; color:var(--cyan); font-weight:700; font-size:10px; letter-spacing:.05em; text-transform:uppercase; }
#explicador-modal { position:fixed; inset:0; z-index:var(--z-screen-overlay,1100); display:none; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.58); backdrop-filter:blur(5px); }
#explicador-modal.open { display:flex; animation:exp-fade .22s ease both; } .explicador-panel { width:min(100%,720px); max-height:min(88vh,760px); display:flex; flex-direction:column; background:var(--card-a); border:1px solid var(--card-a-border); border-radius:24px 24px 0 0; box-shadow:0 -20px 60px rgba(0,0,0,.45); animation:exp-up .28s var(--trans-main) both; overflow:hidden; }
.explicador-head { display:flex; align-items:center; gap:12px; padding:18px 20px 14px; border-bottom:1px solid var(--border); } .explicador-head h2 { margin:0; font-size:18px; } .explicador-head p { margin:3px 0 0; color:var(--t2); font-size:11px; } .explicador-close { margin-left:auto; background:transparent; border:0; color:var(--t2); font-size:22px; cursor:pointer; }
.explicador-quota { margin-left:auto; padding:6px 9px; border-radius:99px; background:rgba(var(--lime-rgb),.14); color:var(--lime); font-size:10px; font-weight:800; white-space:nowrap; }
.explicador-body { overflow:auto; padding:15px 18px 20px; } .explicador-intro { padding:12px 14px; border:1px solid rgba(var(--cyan-rgb),.2); border-radius:14px; color:var(--t2); font-size:12px; line-height:1.5; margin-bottom:14px; }
.explicador-compose { display:flex; gap:9px; align-items:flex-end; padding-top:10px; } .explicador-compose textarea { flex:1; min-height:58px; max-height:140px; resize:vertical; border:1px solid var(--border); border-radius:14px; padding:12px; color:var(--t1); background:rgba(0,0,0,.24); font:inherit; font-size:13px; outline:none; } .explicador-compose textarea:focus { border-color:var(--cyan); } .explicador-send { min-height:42px; padding:0 15px; border:0; border-radius:13px; background:linear-gradient(135deg,var(--cyan),var(--lime)); color:#07131b; font-weight:800; cursor:pointer; }
.explicador-chat { display:grid; gap:12px; } .explicador-thread { padding:12px 13px; border:1px solid var(--border); border-radius:15px; background:rgba(0,0,0,.12); } .explicador-thread h3 { margin:0 0 7px; font-size:13px; } .explicador-thread-meta { color:var(--t3); font-size:10px; } .explicador-msg { margin-top:8px; padding:9px 11px; border-radius:12px; background:rgba(255,255,255,.05); color:var(--t1); font-size:12px; line-height:1.5; white-space:pre-wrap; } .explicador-msg.user { border-left:3px solid var(--cyan); } .explicador-msg.admin { border-left:3px solid var(--lime); } .explicador-msg.system { color:var(--t2); font-style:italic; }
@keyframes exp-up { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } } @keyframes exp-fade { from { opacity:0; } to { opacity:1; } } @media (min-width:720px){#explicador-modal{align-items:center;padding:24px}.explicador-panel{border-radius:24px;max-height:800px}} @media (prefers-reduced-motion:reduce){.explicador-panel,#explicador-modal.open{animation:none}}


.exp-thread-reply{display:flex;gap:7px;margin-top:10px}.exp-thread-reply textarea{flex:1;min-height:38px;resize:vertical;border:1px solid var(--border);border-radius:10px;padding:9px;background:rgba(0,0,0,.18);color:var(--t1);font:inherit;font-size:11px}.exp-thread-reply button{border:1px solid rgba(var(--cyan-rgb),.45);border-radius:10px;background:rgba(var(--cyan-rgb),.14);color:var(--cyan);font-size:10px;font-weight:800;padding:0 10px;cursor:pointer}

/* ══════════════════════════════════════════════
   PWA — banner e modal de instalação da app
   ══════════════════════════════════════════════ */
.pwa-install-banner{position:fixed;left:14px;right:14px;bottom:calc(var(--safe-bot) + 14px);z-index:var(--z-toast);max-width:420px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--card-a-border);border-radius:18px;background:var(--card-a);box-shadow:var(--card-shadow),0 18px 45px rgba(0,0,0,.4);backdrop-filter:blur(14px);transform:translateY(0);opacity:1;transition:transform .3s var(--ease,cubic-bezier(.23,1,.32,1)),opacity .3s var(--ease,cubic-bezier(.23,1,.32,1))}
.pwa-install-banner[hidden]{display:flex!important;pointer-events:none;transform:translateY(120%);opacity:0}
.pwa-install-icon{width:40px;height:40px;flex:none;display:grid;place-items:center;color:var(--cyan);border-radius:12px;background:rgba(var(--cyan-rgb),.12)}
.pwa-install-icon .lz-icon{width:20px;height:20px}
.pwa-install-copy{min-width:0;flex:1;display:grid;gap:2px}
.pwa-install-copy strong{font-size:12.5px;color:var(--t1)}
.pwa-install-copy span{color:var(--t2);font-size:10.5px;line-height:1.4}
.pwa-install-actions{display:flex;flex:none;align-items:center;gap:6px}
.pwa-install-btn{padding:9px 13px;display:flex;align-items:center;gap:6px;color:var(--bg-deep,#031019);border-radius:10px;background:var(--lime);font-size:11px;font-weight:800;white-space:nowrap;border:0;cursor:pointer;transition:transform .15s var(--ease,ease),filter .15s var(--ease,ease)}
.pwa-install-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.pwa-install-btn .lz-icon{width:13px;height:13px}
.pwa-install-dismiss{width:30px;height:30px;flex:none;display:grid;place-items:center;color:var(--t2);border-radius:50%;background:transparent;border:0;cursor:pointer;font-size:16px;line-height:1}
.pwa-install-dismiss:hover{color:var(--t1);background:rgba(255,255,255,.08)}

.pwa-install-modal{position:fixed;inset:0;z-index:var(--z-screen-overlay);display:none;align-items:flex-end;justify-content:center;background:rgba(0,8,16,.66);backdrop-filter:blur(8px)}
.pwa-install-modal.open{display:flex;animation:pwa-fade .2s ease both}
.pwa-install-sheet{width:min(460px,100%);max-height:88vh;overflow:auto;position:relative;padding:26px 24px calc(var(--safe-bot) + 24px);border:1px solid var(--card-a-border);border-radius:24px 24px 0 0;background:var(--card-a);box-shadow:var(--card-shadow),0 -20px 60px rgba(0,0,0,.45);animation:pwa-up .3s var(--ease,cubic-bezier(.23,1,.32,1)) both}
.pwa-install-sheet-close{width:34px;height:34px;position:absolute;top:14px;right:14px;display:grid;place-items:center;color:var(--t1);border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(0,0,0,.2);border:0;cursor:pointer;font-size:18px}
.pwa-install-sheet-head{display:flex;align-items:center;gap:12px;padding-right:34px}
.pwa-install-sheet-icon{width:44px;height:44px;flex:none;display:grid;place-items:center;color:var(--cyan);border-radius:13px;background:rgba(var(--cyan-rgb),.12)}
.pwa-install-sheet-icon .lz-icon{width:22px;height:22px}
.pwa-install-sheet-head h3{margin:0;font-size:17px;letter-spacing:-.03em;color:var(--t1)}
.pwa-install-sheet-head p{margin:3px 0 0;color:var(--t2);font-size:11px}
.pwa-install-status{margin-top:18px;padding:12px 13px;display:flex;align-items:center;gap:10px;border-radius:12px;background:rgba(var(--lime-rgb),.1);border:1px solid rgba(var(--lime-rgb),.25);color:var(--lime);font-size:12px;font-weight:700}
.pwa-install-status .lz-icon{width:16px;height:16px;flex:none}
.pwa-install-steps{margin-top:18px;display:grid;gap:10px}
.pwa-install-step{display:flex;gap:11px;padding:12px;border:1px solid var(--card-a-border);border-radius:14px;background:rgba(255,255,255,.03)}
.pwa-install-step-num{width:24px;height:24px;flex:none;display:grid;place-items:center;color:var(--bg-deep,#031019);border-radius:50%;background:var(--cyan);font-size:11px;font-weight:800}
.pwa-install-step p{margin:0;color:var(--t1);font-size:12.5px;line-height:1.5}
.pwa-install-step p b{color:var(--cyan)}
@keyframes pwa-fade{from{opacity:0}to{opacity:1}}
@keyframes pwa-up{from{transform:translateY(28px);opacity:.4}to{transform:translateY(0);opacity:1}}
@media (max-width:520px){.pwa-install-banner{left:10px;right:10px}}
.dd-item.is-installed{opacity:.7}
.dd-item.is-installed .dd-item-icon{color:var(--lime)}


/* ═══════════════════════════════════════════════════════════════════════
   CURSOS — galeria 16-1
   Tudo neste bloco está deliberadamente limitado a #page-courses para que
   nenhuma outra tela da app seja alterada.
   ═══════════════════════════════════════════════════════════════════════ */
#page-courses {
  background: #000;
  color: var(--t1);
  padding: 0 0 calc(18px + var(--safe-bot, 0px)) !important;
  overscroll-behavior: contain;
}

#page-courses .page-header {
  padding: calc(18px + var(--safe-top, 0px)) 20px 12px;
}

#page-courses .page-title {
  font-size: 25px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.045em;
  color: var(--t1);
}

#page-courses .page-sub {
  margin-top: 5px;
  color: var(--t2);
  font-size: 10.5px;
  letter-spacing: .01em;
}

/* Barra de pesquisa igual à proporção da referência: campo largo + botão
   de filtro quadrado, ambos com borda fina e fundo escuro sólido. */
#page-courses .courses-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 7px;
  align-items: center;
  padding: 4px 19px 9px;
  flex-shrink: 0;
}

#page-courses .courses-search-box {
  min-width: 0;
  height: 39px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(238, 242, 247, .55);
  border-radius: 9px;
  background: #08090b;
  color: var(--t2);
  cursor: text;
  transition: border-color .18s var(--trans-main), box-shadow .18s var(--trans-main);
}

#page-courses .courses-search-box:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .10);
}

#page-courses .courses-search-box .lz-icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--t2);
}

#page-courses .courses-search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--t1);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  -webkit-appearance: none;
}

#page-courses .courses-search-box input::placeholder { color: #7d8795; opacity: 1; }
#page-courses .courses-search-box input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }

#page-courses .courses-filter-toggle {
  width: 42px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(238, 242, 247, .55);
  border-radius: 9px;
  background: #08090b;
  color: var(--t1);
  box-shadow: none;
}

#page-courses .courses-filter-toggle .lz-icon { width: 17px; height: 17px; }
#page-courses .courses-filter-toggle:active { transform: scale(.95); }

/* Chips da referência 16-1: compactos, escuros e com o primeiro ativo. */
#page-courses .courses-filter-bar {
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 0 19px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  transition: max-height .24s var(--trans-main), opacity .18s ease, padding .24s var(--trans-main);
  max-height: 60px;
}

#page-courses .courses-filter-bar::-webkit-scrollbar { display: none; }
#page-courses .courses-filter-bar.is-collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* Filtros de estado: continuam funcionais, mas ficam fora da composição
   principal da referência e só aparecem quando o ícone de filtro é aberto. */
#page-courses .courses-status-filter {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 19px 9px;
  padding: 7px;
  border: 1px solid rgba(238,242,247,.16);
  border-radius: 11px;
  background: #08090b;
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
}

#page-courses .courses-status-filter.is-open { display: flex; }

#page-courses .csf-btn {
  min-height: 25px;
  padding: 5px 9px;
  border: 1px solid rgba(238,242,247,.28);
  border-radius: 999px;
  background: #0c0d10;
  color: #9fa8b6;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

#page-courses .csf-btn.act {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #07131a;
}

@media (max-width: 360px) {
  #page-courses .courses-status-filter { margin-left: 14px; margin-right: 14px; }
}

#page-courses .cf-btn {
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid rgba(238, 242, 247, .48);
  border-radius: 999px;
  background: #090a0d;
  color: #aab2bf;
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
}

#page-courses .cf-btn .cf-icon { display: none; }

#page-courses .cf-btn.act {
  background: #e7b6ff;
  border-color: #e7b6ff;
  color: #201128;
  box-shadow: none;
}

/* Galeria 3 colunas. O segundo curso é deliberadamente o destaque 2×2,
   reproduzindo a composição da referência: miniaturas pequenas à esquerda
   e em baixo, com um grande cartão de imagem ao lado. */
#page-courses .courses-grid-wrap {
  padding: 0 19px calc(24px + var(--safe-bot, 0px));
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

#page-courses .courses-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  grid-auto-flow: row;
  gap: 7px;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  align-items: stretch;
}

#page-courses .course-card.gallery-course {
  min-width: 0;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 13px;
  border: 1px solid var(--card-a-border);
  background: var(--card-a);
  box-shadow: none;
  opacity: 0;
  transform: translateY(8px);
  animation: courseGalleryIn .34s var(--trans-main) forwards;
  animation-delay: calc(var(--course-i, 0) * 35ms);
}

#page-courses .course-card.gallery-course:nth-child(even) {
  background: var(--card-b);
  border-color: var(--card-b-border);
}

#page-courses .course-card.gallery-course:nth-child(2) {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

#page-courses .course-card.gallery-course:nth-child(7) { grid-column: span 1; }

#page-courses .course-card.gallery-course::before,
#page-courses .course-card.gallery-course::after { display: none; }

#page-courses .gallery-course .course-card-thumb {
  position: absolute;
  inset: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #0b0d10;
  overflow: hidden;
}

#page-courses .gallery-course .course-card-thumb img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transition: transform .35s var(--trans-main), filter .25s ease;
}

#page-courses .gallery-course:hover .course-card-thumb img,
#page-courses .gallery-course:focus-visible .course-card-thumb img {
  transform: scale(1.035);
  filter: brightness(1.04);
}

#page-courses .gallery-course .course-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--card-a);
}

#page-courses .gallery-course:nth-child(even) .course-card-thumb-placeholder { background: var(--card-b); }
#page-courses .gallery-course .course-card-thumb-placeholder .ph-icon .lz-icon { width: 30px; height: 30px; color: var(--t1); opacity: .7; }
#page-courses .gallery-course .course-card-content { display: none; }

#page-courses .course-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,.14), transparent 35%, rgba(0,0,0,.84) 100%);
  pointer-events: none;
}

#page-courses .course-card-overlay-top,
#page-courses .course-card-overlay-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 5px;
}

#page-courses .course-card-overlay-bottom {
  display: grid;
  justify-content: stretch;
  gap: 3px;
  align-items: end;
}

#page-courses .course-gallery-badge {
  max-width: 70%;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.58);
  border: 1px solid rgba(255,255,255,.32);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-courses .course-gallery-check {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--lime));
  color: #061018;
  box-shadow: 0 3px 10px rgba(0,0,0,.32);
}

#page-courses .course-gallery-check .lz-icon { width: 11px; height: 11px; stroke-width: 3; }
#page-courses .course-gallery-cat {
  color: rgba(255,255,255,.76);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .10em;
}

#page-courses .course-gallery-title {
  margin: 0;
  color: #fff;
  font-size: 11px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.015em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}

#page-courses .course-gallery-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  color: rgba(255,255,255,.78);
  font-size: 7px;
  font-weight: 600;
}

#page-courses .course-gallery-meta span { display: inline-flex; align-items: center; gap: 2px; }
#page-courses .course-gallery-meta .lz-icon { width: 8px; height: 8px; }

#page-courses .course-gallery-access {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s var(--trans-main);
  pointer-events: none;
}

#page-courses .course-gallery-access .lz-icon { width: 9px; height: 9px; }
#page-courses .gallery-course:hover .course-gallery-access,
#page-courses .gallery-course:focus-visible .course-gallery-access { opacity: 1; transform: translateY(0); }

@keyframes courseGalleryIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Em ecrãs grandes preservamos a mesma linguagem de galeria, apenas com
   largura controlada para não distorcer a composição de referência. */
@media (min-width: 700px) {
  #page-courses .courses-grid-wrap { max-width: 560px; }
}

@media (max-width: 360px) {
  #page-courses .courses-search-row { padding-left: 14px; padding-right: 14px; }
  #page-courses .courses-filter-bar { padding-left: 14px; padding-right: 14px; }
  #page-courses .courses-grid-wrap { padding-left: 14px; padding-right: 14px; }
  #page-courses .courses-grid { gap: 6px; }
}

/* V3 — "Continuar a aprender" compacto: referência visual, não uma segunda galeria. */
#page-courses .courses-continue .continue-track { gap: 8px; padding-left: 14px; padding-right: 14px; }
#page-courses .courses-continue .continue-card { width: 104px; border-radius: 12px; }
#page-courses .courses-continue .continue-card-img,
#page-courses .courses-continue .continue-card-img-placeholder { height: 58px; }
#page-courses .courses-continue .continue-card-body { padding: 6px 7px 7px; }
#page-courses .courses-continue .continue-card-title { font-size: 9.5px; line-height: 1.25; margin-bottom: 3px; }
#page-courses .courses-continue .continue-card-cta { font-size: 8.5px; }


/* ═══════════════════════════════════════════════════════════════════════════
   LIVROS 2026 — capa automática + marketplace entre utilizadores
   ═══════════════════════════════════════════════════════════════════════════ */
.ln-book-publish-form{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.ln-book-field{width:100%;border:1px solid var(--border,rgba(255,255,255,.18));background:rgba(255,255,255,.055);color:var(--t1,#eef2f7);border-radius:12px;padding:11px 12px;font:inherit;font-size:12px;outline:none}
.ln-book-field:focus{border-color:var(--cyan)}
.ln-book-field::placeholder{color:var(--t3,#718095)}
.ln-book-type-row{display:flex;gap:8px;margin:2px 0}
.ln-book-type{flex:1;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--t2);border-radius:11px;padding:10px 8px;font-size:11px;font-weight:800;cursor:pointer}
.ln-book-type.active{background:rgba(var(--cyan-rgb),.13);border-color:var(--cyan);color:var(--t1)}
.ln-book-paid-fields{display:flex;flex-direction:column;gap:9px}
.ln-book-paid-fields[hidden],.bu-paid-fields[hidden]{display:none!important}
.ln-book-paid-warning{font-size:10px;line-height:1.45;color:var(--t2);padding:10px;border:1px solid rgba(var(--lime-rgb),.22);border-radius:10px;background:rgba(var(--lime-rgb),.06)}
.ln-upload-selected-file{font-size:11px;color:var(--lime);word-break:break-word;margin-top:7px}
.ln-book-card{display:grid;grid-template-columns:82px minmax(0,1fr);gap:12px;padding:12px;margin:10px 0;border:1px solid var(--border);border-radius:16px;background:var(--card);overflow:hidden}
.ln-book-card.is-paid{border-color:rgba(var(--lime-rgb),.38)}
.ln-book-cover{width:82px;height:112px;border-radius:10px;overflow:hidden;background:#0b1620;display:flex;align-items:center;justify-content:center}
.ln-book-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ln-book-cover-fallback{color:var(--cyan);opacity:.6}
.ln-book-body{min-width:0}
.ln-book-title{font-size:14px;font-weight:800;color:var(--t1);line-height:1.25}
.ln-book-meta{font-size:10px;color:var(--t3);margin-top:4px}
.ln-book-seller,.book-sender{font-size:10px;color:var(--t2);margin-top:6px}
.ln-book-seller strong,.book-sender strong{color:var(--cyan)}
.ln-book-price-badge{display:inline-flex;margin-top:8px;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.05em}
.ln-book-price-badge.free{background:rgba(var(--cyan-rgb),.1);color:var(--cyan)}
.ln-book-price-badge.paid{background:rgba(var(--lime-rgb),.12);color:var(--lime)}
.ln-book-sale-preview{font-size:10px;color:var(--t2);line-height:1.4;margin-top:7px}
.ln-book-status-badge{display:inline-block;margin-top:7px;font-size:9px;color:var(--t3)}
.ln-book-status-badge.is-enrolled{color:var(--lime)}
.ln-book-primary-row{display:flex;gap:7px;margin-top:9px}
.ln-book-primary-row .ln-btn{flex:1}
.ln-book-more-toggle{width:38px!important;flex:0 0 38px!important}
.ln-book-card .ln-book-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .22s ease,opacity .18s ease}
.ln-book-card .ln-book-more.open{grid-template-rows:1fr;opacity:1}
.ln-book-card .ln-book-more-inner{overflow:hidden;display:flex;flex-direction:column;gap:7px;padding-top:8px}
.ln-book-card .ln-btn{min-height:36px}
.ln-book-card .book-card-badge-novo{position:absolute}

.book-card{position:relative;display:grid;grid-template-columns:82px minmax(0,1fr);gap:12px}
.book-card-cover{width:82px;height:112px;border-radius:10px;overflow:hidden;background:#08131e}
.book-card-cover img{width:100%;height:100%;object-fit:cover}
.book-cover-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--cyan)}
.book-sender{font-size:10px;color:var(--t2);margin-top:5px}
.book-tag-paid{color:var(--lime)!important;background:rgba(var(--lime-rgb),.1)!important}
.book-tag-free{color:var(--cyan)!important;background:rgba(var(--cyan-rgb),.1)!important}
.book-sale-mini{font-size:10px;color:var(--t3);line-height:1.35;margin-top:5px}

.book-sale-screen{display:none;position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.78);align-items:flex-end;justify-content:center;padding:14px}
.book-sale-screen.visible{display:flex}
.book-sale-card{position:relative;width:min(620px,100%);max-height:92vh;overflow:auto;background:var(--card,#07131d);border:1px solid var(--border);border-radius:22px;padding:20px;box-shadow:0 25px 70px rgba(0,0,0,.55)}
.book-sale-close{position:absolute;right:13px;top:11px;width:34px;height:34px;border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.06);color:var(--t1);font-size:22px;cursor:pointer}
.book-sale-cover-wrap{width:125px;height:170px;border-radius:12px;overflow:hidden;margin:2px auto 13px;background:#09151f;display:flex;align-items:center;justify-content:center}
.book-sale-cover-wrap img{width:100%;height:100%;object-fit:cover}
.book-sale-cover-fallback{color:var(--cyan)}
.book-sale-type{display:inline-flex;padding:5px 8px;border-radius:999px;background:rgba(var(--lime-rgb),.12);color:var(--lime);font-size:9px;font-weight:900;letter-spacing:.08em}
.book-sale-card h2{font-size:22px;margin:9px 0 3px;color:var(--t1)}
.book-sale-author{font-size:11px;color:var(--t2)}
.book-sale-seller{font-size:11px;color:var(--t2);margin:9px 0 14px}
.book-sale-seller strong{color:var(--cyan)}
.book-sale-description,.book-sale-payment{font-size:12px;line-height:1.55;color:var(--t2);white-space:pre-wrap}
.book-sale-payment{margin-top:12px;padding:12px;border:1px solid rgba(var(--cyan-rgb),.18);border-radius:12px;background:rgba(var(--cyan-rgb),.05)}
.book-sale-price{font-size:24px;font-weight:900;color:var(--lime);margin:15px 0}
.book-sale-buy{width:100%;border:0;border-radius:13px;background:var(--lime);color:#071306;padding:13px;font:inherit;font-size:13px;font-weight:900;cursor:pointer}
.book-sale-buy:disabled{opacity:.45;cursor:not-allowed}
.book-sale-status{font-size:11px;color:var(--t2);line-height:1.45;margin-top:10px}
.book-proof-card input[type=file]{width:100%;padding:14px;border:1px dashed var(--border);border-radius:12px;color:var(--t2);margin:12px 0}
.book-sales-list-card{align-self:center}
.book-sale-request{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px 0;border-bottom:1px solid var(--border)}
.book-sale-request strong{display:block;color:var(--t1);font-size:12px}
.book-sale-request small{display:block;color:var(--t2);font-size:10px;margin-top:3px}
.book-request-state{font-size:9px;font-weight:900;padding:4px 7px;border-radius:999px;height:max-content}
.book-request-state.state-pendente{color:#f5a623;background:rgba(245,166,35,.1)}
.book-request-state.state-aprovado{color:var(--lime);background:rgba(var(--lime-rgb),.1)}
.book-request-state.state-rejeitado{color:#e5484d;background:rgba(229,72,77,.1)}
.book-sale-request>button{grid-column:1/-1;border:1px solid var(--border);background:transparent;color:var(--cyan);border-radius:9px;padding:8px;font-size:10px;font-weight:800;cursor:pointer}
.book-request-actions{grid-column:1/-1;display:flex;gap:7px}
.book-request-actions button{flex:1;border:0;border-radius:9px;padding:9px;font-size:10px;font-weight:900;cursor:pointer;background:var(--lime);color:#071306}
.book-request-actions button+button{background:rgba(229,72,77,.12);color:#e5484d}
.book-request-reason{grid-column:1/-1;color:#e5484d!important}
@media(max-width:480px){
  .ln-book-card,.book-card{grid-template-columns:68px minmax(0,1fr)}
  .ln-book-cover,.book-card-cover{width:68px;height:96px}
  .book-sale-card{padding:16px}
}


/* LIVROS PAGOS — estados e contador de validação */
.book-sales-manage-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px}
.book-sales-pending-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#e5484d;color:#fff;font-size:10px;font-weight:900;line-height:1}
.ln-book-status-badge.is-pending{color:#f5a623;background:rgba(245,166,35,.10);border:1px solid rgba(245,166,35,.18);padding:5px 8px;border-radius:999px;font-weight:800}
.ln-book-status-badge.is-rejected{color:#e5484d;background:rgba(229,72,77,.09);border:1px solid rgba(229,72,77,.16);padding:5px 8px;border-radius:999px;font-weight:800}
.book-sale-request.state-pendente{border:1px solid rgba(245,166,35,.28);background:rgba(245,166,35,.06);border-radius:14px;padding:14px;margin:10px 0}
.book-request-actions button:first-child{box-shadow:0 0 0 2px rgba(126,211,33,.12)}


/* Leitor 2026 — conforto, tipografia e ferramentas */
.br-body{width:min(100%,900px);margin:0 auto;padding:18px 22px calc(var(--safe-bot,0px) + 54px)}
.br-text{max-width:720px;margin:0 auto 34px;padding:34px clamp(20px,5vw,58px);font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.95;letter-spacing:.01em;color:var(--t1);background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:0 18px 50px rgba(0,0,0,.16);white-space:pre-wrap;text-align:left}
.br-reading-tools{max-width:720px;margin:0 auto 14px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.br-reading-tools button{border:1px solid var(--border,rgba(255,255,255,.13));background:rgba(255,255,255,.05);color:var(--t2);border-radius:999px;padding:9px 13px;font:600 11px var(--font);cursor:pointer}.br-reading-tools button[hidden]{display:none!important}
.br-notes-panel{max-width:720px;margin:0 auto 18px;padding:12px;border:1px solid var(--border);border-radius:18px;background:rgba(0,0,0,.12)}.br-empty-notes{padding:18px;text-align:center;color:var(--t3);font-size:12px}.br-note-item{position:relative;padding:12px 12px 36px;margin:7px 0;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}.br-note-kind{font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--cyan);margin-bottom:6px}.br-note-text{font-family:Georgia,serif;font-size:13px;line-height:1.55;color:var(--t1)}.br-note-content{margin-top:7px;font-size:12px;color:var(--t2);line-height:1.5}.br-note-item button{position:absolute;right:10px;bottom:8px;border:0;background:transparent;color:#ff7d8a;font-size:10px;cursor:pointer}
.ln-download-permission{padding:10px 12px;border:1px solid rgba(var(--cyan-rgb),.18);background:rgba(var(--cyan-rgb),.05);border-radius:13px}.ln-download-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;color:var(--t1);font-size:11px}.ln-download-check input{position:absolute;opacity:0}.ln-download-check-ui{width:18px;height:18px;border:1px solid var(--border);border-radius:6px;flex:0 0 18px;background:rgba(255,255,255,.04)}.ln-download-check input:checked + .ln-download-check-ui{background:var(--cyan);border-color:var(--cyan);box-shadow:inset 0 0 0 4px #0b1620}.ln-download-check strong{display:block}.ln-download-check small{display:block;color:var(--t3);font-size:9px;line-height:1.4;margin-top:3px}
@media(max-width:600px){.br-body{padding-left:12px;padding-right:12px}.br-text{padding:28px 20px;border-radius:20px;font-size:17px;line-height:1.9}.br-reading-tools{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.br-reading-tools button{white-space:nowrap}}

.br-user-mark{background:rgba(255,214,64,.38);color:inherit;border-radius:3px;padding:0 1px;box-shadow:0 0 0 1px rgba(255,214,64,.12)}
.br-mini-control{font-size:12px!important;font-weight:800!important;min-width:32px;justify-content:center}

/* Back navigation: notifications panel participates in the same app stack. */
.notifications-panel-header { display:flex; align-items:center; gap:10px; }
.notifications-back { width:40px; height:40px; flex:0 0 40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:12px; background:var(--card-a, #0a2540); color:var(--t1); cursor:pointer; }
.notifications-back:hover { transform:translateX(-1px); }
.notifications-back .lz-icon { width:20px; height:20px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LUZAYADIO · MENSAGENS V2 — superfícies sólidas com reflexo de espelho
   ═══════════════════════════════════════════════════════════════════════════ */
/* CORREÇÃO (swipe para responder não funcionava em ecrãs táteis): sem
   touch-action, o motor de gestos do telemóvel (sobretudo Android/Cordova)
   fica a decidir "isto é scroll da lista ou o gesto da app?" e, nesse
   meio-tempo, atrasa ou cancela o pointermove — exatamente o mesmo problema
   já corrigido no #gm-svg-wrap (mascote). pan-y entrega o eixo vertical
   ao scroll nativo da lista e liberta o eixo horizontal para o JS. */
.chat-msg { max-width: min(82%, 680px); gap: 2px; position: relative; transition: transform .18s var(--trans-main), filter .18s ease; touch-action: pan-y; }
.chat-msg-bolha { border-radius: 19px; border: 1.5px solid transparent; position: relative; overflow: hidden; box-shadow: var(--card-shadow); isolation: isolate; }
/* Feedback visual do arrasto para responder — a classe já era adicionada
   pelo JS mas não tinha nenhuma regra CSS correspondente, por isso o gesto
   não mostrava nada mesmo quando era reconhecido. */
.chat-msg.is-swiping-reply { transition: none; }
.chat-msg.is-swiping-reply .chat-msg-bolha { box-shadow: var(--card-shadow), 0 0 0 1.5px rgba(var(--cyan-rgb), .35); }
.chat-msg.is-swiping-reply::before {
  content: '↩';
  position: absolute;
  top: 50%; left: -34px;
  width: 26px; height: 26px;
  transform: translateY(-50%) scale(.7);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--card-a);
  border: 1px solid var(--card-a-border);
  color: var(--t2);
  font-size: 13px;
  opacity: .55;
  transition: transform .12s ease, opacity .12s ease, color .12s ease, background .12s ease;
  pointer-events: none;
}
.chat-msg.is-swiping-reply-armed::before {
  transform: translateY(-50%) scale(1);
  opacity: 1;
  color: #04262b;
  background: linear-gradient(135deg, var(--cyan), var(--lime));
}
.chat-msg-bolha::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:linear-gradient(118deg,rgba(255,255,255,.24),rgba(255,255,255,.06) 18%,transparent 42%),linear-gradient(180deg,transparent 55%,rgba(0,0,0,.12)); opacity:.75; }
.chat-msg-bolha > * { position:relative; z-index:1; }
.chat-msg-outro .chat-msg-bolha { background:var(--card-a); border-color:var(--card-a-border); color:var(--t1); box-shadow:var(--card-shadow),0 10px 28px rgba(var(--cyan-rgb),.08); border-bottom-left-radius:6px; }
.chat-msg-minha .chat-msg-bolha { background:var(--card-b); border-color:var(--card-b-border); color:var(--t1); font-weight:550; box-shadow:var(--card-shadow),0 10px 28px rgba(var(--lime-rgb),.08); border-bottom-right-radius:6px; }
.chat-msg-minha .chat-msg-bolha::before { background:linear-gradient(118deg,rgba(255,255,255,.34),rgba(255,255,255,.08) 19%,transparent 44%),linear-gradient(180deg,transparent 55%,rgba(0,0,0,.16)); }
.chat-msg-hora { font-size:10px; color:var(--t3); margin-top:4px; padding:0 5px; font-variant-numeric:tabular-nums; }
.chat-msg-encaminhada { display:inline-flex; align-items:center; gap:5px; margin:0 5px 4px; color:var(--t2); font-size:10px; font-weight:800; letter-spacing:.03em; }
.chat-msg-encaminhada span { font-size:13px; color:var(--cyan); }
.chat-msg-apagada { display:inline-flex; align-items:center; gap:8px; padding:11px 15px; color:var(--t2)!important; font-style:italic; font-weight:600!important; background:color-mix(in srgb,var(--card-a) 78%,#000 22%)!important; border-color:rgba(255,255,255,.14)!important; }
.chat-msg-minha .chat-msg-apagada { background:color-mix(in srgb,var(--card-b) 78%,#000 22%)!important; }
.chat-msg-apagada::before { opacity:.35; }
.chat-msg-apagada-icon { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); font-style:normal; }
.chat-msg-citacao { width:calc(100% - 10px); margin:5px 5px 0; padding:8px 10px; display:flex; gap:8px; align-items:stretch; text-align:left; color:var(--t1); background:rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.16); border-radius:12px; cursor:pointer; }
.chat-msg-citacao-linha { width:3px; flex:0 0 3px; border-radius:999px; background:var(--cyan); }
.chat-msg-minha .chat-msg-citacao-linha { background:var(--lime); }
.chat-msg-citacao-corpo { min-width:0; display:grid; gap:2px; }
.chat-msg-citacao-corpo b { font-size:10px; font-weight:800; color:var(--cyan); }
.chat-msg-minha .chat-msg-citacao-corpo b { color:var(--lime); }
.chat-msg-citacao-corpo span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--t2); }

.chat-msg-bolha.chat-msg-imagem { width:min(330px,100%); max-width:330px; padding:5px; border-radius:20px; background:var(--card-a); border:1.5px solid var(--card-a-border); box-shadow:var(--card-shadow),0 14px 34px rgba(0,0,0,.32); }
.chat-msg-minha .chat-msg-bolha.chat-msg-imagem { background:var(--card-b); border-color:var(--card-b-border); }
.chat-msg-imagem-moldura { position:relative; overflow:hidden; border-radius:15px; background:#020506; }
.chat-msg-imagem img { display:block; width:100%; max-height:min(440px,62vh); height:auto; object-fit:contain; border-radius:15px; cursor:zoom-in; background:#020506; }
.chat-msg-imagem-moldura::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(118deg,rgba(255,255,255,.20),transparent 35%); opacity:.6; }
.chat-msg-imagem-expandir { position:absolute; top:10px; right:10px; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:rgba(0,0,0,.52); border:1px solid rgba(255,255,255,.24); color:#fff; font-size:15px; box-shadow:0 6px 18px rgba(0,0,0,.24); }
.chat-msg-imagem-legenda { padding:9px 8px 5px; font-size:13px; line-height:1.45; color:var(--t1); white-space:pre-wrap; word-break:break-word; }
.chat-msg-minha .chat-msg-imagem-legenda { color:var(--t1); font-weight:550; }

.chat-msg-bolha.chat-msg-audio { width:min(320px,100%); max-width:320px; min-height:58px; padding:9px 13px 9px 9px; gap:11px; border-radius:19px; }
.chat-msg-outro .chat-msg-bolha.chat-msg-audio { background:var(--card-a); border-color:var(--card-a-border); }
.chat-msg-minha .chat-msg-bolha.chat-msg-audio { background:var(--card-b); border-color:var(--card-b-border); }
.chat-audio-play { width:40px; height:40px; border-radius:13px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.18); color:var(--t1); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 7px 18px rgba(0,0,0,.18); }
.chat-msg-minha .chat-audio-play { background:rgba(255,255,255,.16); color:var(--t1); box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 7px 18px rgba(0,0,0,.18); }
.chat-audio-play svg { width:15px; height:15px; }
.chat-audio-corpo { min-width:0; flex:1; display:grid; gap:5px; }
.chat-audio-onda { width:100%; min-width:110px; height:30px; display:flex; align-items:center; }
.chat-audio-onda-track { position:relative; width:100%; height:26px; display:block; background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 3px,transparent 3px 7px); border-radius:8px; overflow:hidden; }
.chat-audio-onda-track::after { content:""; position:absolute; left:0; top:50%; width:100%; height:18px; transform:translateY(-50%); background:repeating-linear-gradient(90deg,transparent 0 4px,rgba(255,255,255,.65) 4px 6px,transparent 6px 10px); opacity:.28; }
.chat-audio-onda-progresso { z-index:2; height:100%; border-radius:8px; background:linear-gradient(90deg,var(--cyan),var(--lime)); mix-blend-mode:screen; }
.chat-audio-tempo { justify-self:end; font-size:10px; font-weight:800; color:var(--t2); font-variant-numeric:tabular-nums; }
.chat-msg-minha .chat-audio-tempo { color:var(--t1); opacity:.82; }

/* CORREÇÃO (Encaminhar não aparecia pelo mesmo motivo): z-index 704 ficava
   abaixo do #chat-overlay (1100). Sobe para acima do ecrã de conversa e do
   #msg-acoes-modal (1110), já que se abre depois dele. */
/* CORREÇÃO (reações e emojis sem estilo): estas três classes são geradas
   pelo JS (pílulas de reação sob a mensagem e a grelha de escolha de
   emoji no menu de ações) mas não tinham nenhuma regra CSS — apareciam
   como texto/botões crus do navegador. */
.chat-msg-reacoes { display:flex; flex-wrap:wrap; gap:5px; margin:2px 6px 0; }
.chat-msg-minha .chat-msg-reacoes { justify-content:flex-end; }
.chat-msg-reacao {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 7px; border-radius: 999px;
  background: var(--card-a); border: 1px solid var(--card-a-border);
  color: var(--t1); font-size: 12px; line-height: 1;
  cursor: pointer; transition: transform .12s ease, filter .12s ease;
}
.chat-msg-reacao:hover { filter: brightness(1.1); transform: translateY(-1px); }
.chat-msg-reacao:active { transform: scale(.94); }
.chat-msg-reacao span { font-size: 13px; }
.chat-msg-reacao small { font-size: 10px; font-weight: 800; color: var(--t2); }
.chat-msg-reacao.is-mine {
  background: linear-gradient(135deg, rgba(var(--cyan-rgb), .28), rgba(var(--lime-rgb), .24));
  border-color: rgba(var(--cyan-rgb), .45);
}
.chat-msg-reacao.is-mine small { color: var(--t1); }

.chat-reacao-escolha {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; padding: 6px 2px 14px;
}
.chat-reacao-escolha button {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--card-a-border);
  background: var(--card-a); font-size: 21px; cursor: pointer;
  transition: transform .14s ease, background .14s ease;
}
.chat-reacao-escolha button:hover { transform: translateY(-2px) scale(1.06); }
.chat-reacao-escolha button:active { transform: scale(.92); }
.chat-menu-voltar {
  width: 100%; padding: 12px; text-align: center;
  border-radius: 14px; background: var(--card-a); border: 1px solid var(--card-a-border);
  color: var(--t2); font-size: 13px; font-weight: 700; cursor: pointer;
}
.chat-menu-voltar:hover { color: var(--t1); }

#msg-encaminhar-modal { position:fixed; inset:0; z-index:calc(var(--z-screen-overlay, 1100) + 20); display:none; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.68); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
/* CORREÇÃO (clicar em Encaminhar só escurecia o ecrã, nada mais aparecia):
   .compose-sheet começa em transform:translateY(100%) (fora do ecrã, por
   baixo) por padrão, e só volta a translateY(0) para a lista específica de
   modais onde essa regra existe lá em cima. #msg-encaminhar-modal nunca
   tinha sido incluído nessa lista, por isso a gaveta com as conversas
   nunca aparecia — só o fundo escuro do modal ficava visível. */
#msg-encaminhar-modal.open .compose-sheet { transform: translateY(0); }
#msg-encaminhar-modal.open { display:flex; }
.msg-encaminhar-sheet { width:min(100%,560px); max-height:min(76vh,680px); overflow:hidden; padding:14px 14px calc(var(--safe-bot) + 18px); background:var(--card-a)!important; border:1.5px solid var(--card-a-border)!important; border-radius:26px 26px 0 0!important; box-shadow:0 -24px 70px rgba(0,0,0,.55),var(--card-shadow); }
.msg-encaminhar-lista { margin-top:14px; display:grid; gap:8px; max-height:54vh; overflow-y:auto; padding:2px; }
.msg-encaminhar-item { width:100%; min-height:64px; display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:16px; background:var(--card-b); border:1px solid var(--card-b-border); color:var(--t1); text-align:left; cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.16); transition:transform .16s ease,filter .16s ease; }
.msg-encaminhar-item:hover { transform:translateY(-1px); filter:brightness(1.08); }
.msg-encaminhar-item:active { transform:scale(.985); }
.msg-encaminhar-avatar { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; overflow:hidden; border-radius:14px; background:var(--card-a); border:1px solid var(--card-a-border); font-weight:800; }
.msg-encaminhar-avatar img { width:100%; height:100%; object-fit:cover; }
.msg-encaminhar-copy { min-width:0; flex:1; display:grid; gap:3px; }
.msg-encaminhar-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.msg-encaminhar-copy small { color:var(--t2); font-size:10px; }
.msg-encaminhar-arrow { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.15); font-size:16px; }
.msg-encaminhar-loading,.msg-encaminhar-vazio { padding:28px 14px; text-align:center; color:var(--t2); font-size:12px; }
@media (min-width:760px) { #msg-encaminhar-modal { align-items:center; padding:24px; } .msg-encaminhar-sheet { border-radius:26px!important; } }


/* ══ GRUPOS SOCIAIS — perfil, regras e permissões ══ */
#grupo-perfil-modal{position:fixed;inset:0;z-index:780;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.62);padding:14px;}
#grupo-perfil-modal.open{display:flex;}
.grupo-perfil-sheet{width:min(100%,620px);max-height:90vh;overflow:auto;padding:18px 18px calc(18px + var(--safe-bot));}
.grupo-perfil-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.grupo-perfil-avatar-btn{position:relative;width:76px;height:76px;border-radius:24px;border:1px solid var(--border);background:var(--card-b);color:var(--t1);display:grid;place-items:center;overflow:hidden;cursor:pointer;flex:0 0 auto;}
.grupo-perfil-avatar-btn img{width:100%;height:100%;object-fit:cover;}
.grupo-perfil-avatar-btn span{font-size:25px;font-weight:800;}
.grupo-perfil-avatar-btn i{position:absolute;right:5px;bottom:5px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.7);font-style:normal;font-size:12px;}
.grupo-perfil-meta{font-size:11px;color:var(--t3);margin-top:4px;}
.grupo-perfil-form{display:flex;flex-direction:column;gap:12px;}
.grupo-perfil-form>label,.grupo-perfil-grid>label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;}
.grupo-perfil-form input,.grupo-perfil-form textarea,.grupo-perfil-form select{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.045);color:var(--t1);padding:11px 12px;font:inherit;font-size:13px;outline:none;text-transform:none;letter-spacing:0;}
.grupo-perfil-form textarea{resize:vertical;min-height:72px;line-height:1.45;}
.grupo-perfil-form input:focus,.grupo-perfil-form textarea:focus,.grupo-perfil-form select:focus{border-color:var(--cyan);}
.grupo-perfil-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.grupo-perfil-section{border:1px solid var(--border);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;color:var(--t2);font-size:12px;}
.grupo-switch{display:flex;align-items:center;gap:10px;color:var(--t1);font-size:12px;}
.grupo-switch input{width:18px;height:18px;accent-color:var(--cyan);}
.social-reaction-picker{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0 12px;}
.social-reaction-picker button{width:42px;height:42px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.05);font-size:21px;cursor:pointer;}
.social-reaction-picker button:active{transform:scale(.9);}
@media(max-width:560px){.grupo-perfil-grid{grid-template-columns:1fr}.grupo-perfil-sheet{max-height:94vh}}

/* FIX FINAL — modal de Informações e regras do grupo */
#grupo-perfil-modal{
  z-index:1125 !important;
  isolation:isolate;
}
#grupo-perfil-modal.open{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
#grupo-perfil-modal .grupo-perfil-sheet{
  position:relative;
  z-index:1;
  transform:translateY(100%);
  opacity:1;
  visibility:visible;
  transition:transform .32s var(--trans-main);
  will-change:transform;
  max-height:min(90vh,760px);
  overflow-y:auto;
  box-shadow:0 -20px 70px rgba(0,0,0,.55);
}
#grupo-perfil-modal.open .grupo-perfil-sheet{
  transform:translateY(0) !important;
}

/* FIX FINAL — a camada do Comércio não pode ficar atrás da página/track */
#page-commerce{isolation:isolate;}
#commerce-shadow-host{position:relative;z-index:2;width:100%;height:100%;min-height:100%;}


/* ═══════════════════════════════════════════════════════════════════════════
   GOOGLE · PERSONALIZAÇÃO DO PRIMEIRO ACESSO
   Modal sólido, acessível e consistente com o tema preto/Luzayadio.
═══════════════════════════════════════════════════════════════════════════ */
#lz-google-profile-setup{
  position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:20px;
  font-family:var(--font);
}
#lz-google-profile-setup .lz-gps-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
#lz-google-profile-setup .lz-gps-card{
  position:relative;width:min(100%,460px);padding:28px;border-radius:26px;
  background:var(--card-a,#071014);border:1.5px solid var(--card-a-border,rgba(41,197,234,.45));
  box-shadow:var(--card-shadow),0 30px 90px rgba(0,0,0,.65);color:var(--t1);
  animation:google-profile-card-in .32s var(--trans-main,cubic-bezier(.32,.72,0,1)) both;
}
#lz-google-profile-setup .lz-gps-brand{display:flex;align-items:center;gap:10px;color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
#lz-google-profile-setup .lz-gps-brand img,#lz-google-profile-setup .lz-gps-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--card-a-border);display:grid;place-items:center;background:var(--card-b);color:var(--lime);font-weight:900}
#lz-google-profile-setup h2{margin:0 0 8px;font-size:25px;letter-spacing:-.04em}
#lz-google-profile-setup p{margin:0 0 20px;color:var(--t2);font-size:13px;line-height:1.65}
#lz-google-profile-setup .lz-gps-label{display:block;margin-bottom:7px;color:var(--t1);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
#lz-google-profile-setup .lz-gps-input{
  width:100%;box-sizing:border-box;padding:13px 14px;border-radius:13px;outline:none;
  background:rgba(255,255,255,.055);border:1.5px solid var(--border);color:var(--t1);
  font:500 15px var(--font);caret-color:var(--cyan);
}
#lz-google-profile-setup .lz-gps-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(var(--cyan-rgb),.12)}
#lz-google-profile-setup .lz-gps-hint{margin:8px 0 18px;color:var(--t3);font-size:10px;line-height:1.5}
#lz-google-profile-setup .lz-gps-save{
  width:100%;padding:13px 16px;border:1px solid var(--cyan);border-radius:13px;
  background:var(--cyan);color:#001015;font:800 13px var(--font);cursor:pointer;
  box-shadow:0 12px 28px rgba(var(--cyan-rgb),.18);
}
#lz-google-profile-setup .lz-gps-save:disabled{opacity:.6;cursor:wait}
@keyframes google-profile-card-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* CONTROLO DE VOZ — mãos-livres */
#lz-voice-control{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:1500;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;font-family:var(--font,'Plus Jakarta Sans',sans-serif)}
#lz-voice-toggle{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--border,rgba(255,255,255,.24));border-radius:999px;background:var(--card,#071316);color:var(--t1,#eef2f7);box-shadow:0 14px 34px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.1) inset;cursor:pointer;font:700 11px/1 var(--font,sans-serif);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
#lz-voice-toggle:hover{transform:translateY(-2px)}#lz-voice-toggle:focus-visible{outline:2px solid var(--cyan,#29c5ea);outline-offset:3px}
.lz-voice-mic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(var(--cyan-rgb,41,197,234),.35);color:var(--cyan,#29c5ea);font-size:18px;line-height:1}
.lz-voice-dot{width:7px;height:7px;border-radius:50%;background:var(--t3,#3d4f63);transition:background .2s,box-shadow .2s}
#lz-voice-status{display:none;max-width:min(320px,calc(100vw - 28px));padding:10px 12px;border:1px solid var(--border,rgba(255,255,255,.18));border-radius:14px;background:#05090c;color:var(--t1,#eef2f7);box-shadow:0 14px 34px rgba(0,0,0,.42);font-size:10px;line-height:1.4;text-align:right}
#lz-voice-status strong{display:block;font-size:11px}#lz-voice-transcript,#lz-voice-progress{display:block;color:var(--t2,#7a8fa6);margin-top:3px}
#lz-voice-control[data-mode="listening"] #lz-voice-status,#lz-voice-control[data-mode="processing"] #lz-voice-status,#lz-voice-control[data-mode="planning"] #lz-voice-status,#lz-voice-control[data-mode="validating"] #lz-voice-status,#lz-voice-control[data-mode="executing"] #lz-voice-status,#lz-voice-control[data-mode="responding"] #lz-voice-status,#lz-voice-control[data-mode="error"] #lz-voice-status{display:block}
#lz-voice-control[data-mode="listening"] .lz-voice-dot{background:var(--cyan,#29c5ea);box-shadow:0 0 0 6px rgba(var(--cyan-rgb,41,197,234),.12),0 0 14px rgba(var(--cyan-rgb,41,197,234),.5);animation:lzVoicePulse 1.15s ease-in-out infinite}
#lz-voice-control[data-mode="executing"] .lz-voice-dot,#lz-voice-control[data-mode="planning"] .lz-voice-dot,#lz-voice-control[data-mode="validating"] .lz-voice-dot{background:var(--lime,#7ed321);box-shadow:0 0 0 5px rgba(var(--lime-rgb,126,211,33),.1)}
#lz-voice-control[data-mode="responding"] .lz-voice-dot{background:var(--cyan,#29c5ea)}#lz-voice-control[data-mode="error"] .lz-voice-dot{background:#e5484d}
#lz-voice-control[data-mode="disabled"] #lz-voice-toggle{opacity:.82}#lz-voice-control[data-mode="disabled"] .lz-voice-mic{color:var(--t2,#7a8fa6);border-color:var(--border,rgba(255,255,255,.18))}
.post-card[data-voice-focused="true"]{outline:2px solid var(--cyan,#29c5ea);outline-offset:3px;box-shadow:0 0 0 4px rgba(var(--cyan-rgb,41,197,234),.08),0 18px 40px rgba(0,0,0,.5)}
@keyframes lzVoicePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.65}}
@media(max-width:700px){#lz-voice-control{right:10px;bottom:calc(72px + env(safe-area-inset-bottom,0px))}#lz-voice-toggle{min-height:42px;padding:0 12px}#lz-voice-toggle .lz-voice-text{display:none}#lz-voice-status{max-width:260px}}