/* ── TOKENS ─────────────────────────────────────────────────────── */
:root{
  --bg:#08080f; --surf:#0f0f1c; --surf1:#171728; --surf2:#16162a; --surf3:#1e1e33;
  --text:#dddaf5; --dim:#5a5878; --faint:#1e1e33; --fg:var(--text);
  --accent:#9966ee; --acglow:#9966ee28; --accent-btn:#f0eeff;
  --border:rgba(160,155,220,.07);
  --lpzt-bg:rgba(4,2,14,.52); --radar-grid:rgba(255,255,255,.09); --radar-txt:rgba(255,255,255,.45);
  --r:8px; --nh:62px; --hh:52px;
  --vox:#c85858; --lab:#3d6fa8; --arts:#9060c8;
  --yuan:#6aaa72; --lounge:#c840a0; --trade:#d46a18; --pub:#c4a020;
  --terra:#7a5535; --aura:#40b4c8;
  --tile-h:240px; --tile-ls:160px;
  --glass-bright:.86;
  /* 2026-07-31 (Pilar, referência visual: card de clima/dashboard nativo do
     Android -- gradiente roxo/azul suave com brilho de vidro, mas 100%
     opaco o bastante pra nunca deixar nada vazar atrás). Pivô deliberado de
     filosofia: até aqui o glass era "acrílico forte" de propósito (comentário
     antigo abaixo, mantido como histórico) -- alpha BAIXO, pra realmente
     enxergar o que tem atrás borrado. Pilar corrigiu o conceito: "glass"
     devia ser só ESTÉTICA (brilho, gradiente suave, sensação de profundidade),
     nunca transparência funcional de verdade -- e como isso cobre o painel de
     perfil (visitado e próprio), vazamento de conteúdo de trás (post, foto,
     qualquer coisa empilhada) é ruído visual feio numa tela sobre privacidade/
     individualidade de uma pessoa. --glass-tint (ver blocos de tema abaixo)
     sobe a opacidade de base de ~46-60% pra ~94% em todo tema -- ainda com
     leve sutileza de vidro (backdrop-filter blur/saturate continuam, dão o
     brilho/profundidade), mas sem deixar nada de baixo "sujar" o painel.
     --glass-blur/--glass-sat NÃO mudam -- ainda contribuem pro efeito de
     profundidade/brilho, só que agora sobre uma base opaca o bastante pra
     nunca revelar detalhe nítido do que está atrás. */
  --glass-blur:30px; --glass-sat:180%;
  /* --glass-tint nasce de --accent (color-mix) em vez de cor fixa: assim o
     vidro do app inteiro (busca, header, chat, nav) ganha um tom da cor da
     skin/praça equipada -- ver static/js/skins.js:_skinsAplicarGlobal(), que
     sobrescreve --accent no :root quando o usuário troca de skin. Fração
     mantida baixa de propósito: é um TOM, não uma repintura -- mantém o
     contraste de --text (que não muda) legível em qualquer cor de skin.
     Ajustado de 16%->26% em 2026-07-22 (Pilar: no tema escuro as cores de
     skin perdiam o tom, misturando com o preto quase-total da base e
     ficando amarronzadas/violeta-lavadas -- ex: rosa quase virava marrom.
     Misturar % baixa com uma base BRANCA (tema claro) sempre resulta em
     pastel claro, mas misturar a mesma % com uma base quase-PRETA escurece
     e desatura muito mais o mesmo tom -- por isso só o escuro precisava de
     mais fração de --accent pra "clarear" sem virar repintura sólida. */
  --glass-tint:color-mix(in srgb, var(--accent) 26%, rgba(14,10,24,.94));
  --glass-edge:rgba(200,180,255,.16);
}
[data-tema="claro"]{
  --bg:#f2f0f8; --surf:#eae7f5; --surf1:#e7e3f4; --surf2:#dedad0; --surf3:#d2cec8;
  --text:#16142a; --dim:#5a5870; --faint:#ccc8e0; --border:rgba(0,0,0,.07);
  --lpzt-bg:rgba(242,240,248,.52); --radar-grid:rgba(0,0,0,.09); --radar-txt:rgba(0,0,0,.45);
  --glass-bright:1.08;
  --glass-tint:color-mix(in srgb, var(--accent) 14%, rgba(255,255,255,.94));
  --glass-edge:rgba(255,255,255,.6);
}
[data-tema="descanso"]{
  --bg:#faf8ff; --surf:#f0ecff; --surf1:#e9e3fb; --surf2:#e5e0ff; --surf3:#d8d2f8;
  --text:#1e1a38; --dim:#6a6490; --faint:#cdc8ee; --border:rgba(80,60,160,.09);
  --accent:#8855dd;
  --lpzt-bg:rgba(250,248,255,.52); --radar-grid:rgba(80,60,160,.1); --radar-txt:rgba(80,60,160,.5);
  --glass-bright:1.06;
  --glass-tint:color-mix(in srgb, var(--accent) 14%, rgba(250,248,255,.94));
  --glass-edge:rgba(255,255,255,.55);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* Pedido da Pilar 2026-07-24: long-press numa foto (avatar de Círculos, de
   post, etc) abria o menu NATIVO do navegador/Android ("Copiar imagem",
   "Baixar imagem", "Compartilhar", "Abrir no Chrome") por cima do menu
   flutuante custom da Linka (_cxAbrirMenuNode e afins) -- o navegador
   sequestrava o gesto de segurar antes do JS conseguir reagir. Isso
   desliga o callout/seleção/arrastar nativo de TODA imagem do app, pro
   long-press ser sempre tratado pelo nosso JS, nunca pelo sistema. */
img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}
html,body{margin:0;padding:0;height:100%;background:#020208;overflow:clip;touch-action:pan-x pan-y}
body{display:flex;justify-content:center;align-items:flex-start}
/* CORREÇÃO: "manipulation" = "pan-x pan-y pinch-zoom" (confirmado na spec) —
   ou seja, a regra antiga NA VERDADE deixava o pinça-zoom nativo do sistema
   agir em qualquer lugar do app (só desligava o duplo-toque). Por isso dava
   pra beliscar/zoom no chat, no feed, em qualquer tela. "pan-x pan-y" (sem
   pinch-zoom) bloqueia o gesto de pinça em toda a UI, mantendo o scroll de
   1 dedo normal. O zoom controlado por JS dentro do post expandido (#lp-bg,
   que usa touch-action:none) continua funcionando igual, pois é feito na
   mão via transform, não depende desse touch-action global. */
/* Navegadores não fazem inputs/textareas herdarem a fonte da página por
   padrão (usam a fonte de sistema do controle nativo, tipo monoespaçada em
   vários navegadores/webviews) — sem isso, campos de texto (bio, nome,
   pesquisa, etc) destoam do resto do app e parecem "modo terminal". */
input,textarea,select,button{font-family:inherit}

#phone{
  width:100%;max-width:430px;height:100svh;
  background:var(--bg);color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px;line-height:1.5;letter-spacing:.01em;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);

  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
/* Fundo do app: efeito "vidro" — não é só gradiente chapado, tem um sheen
   diagonal (like luz batendo num vidro fosco) por cima dos brilhos de
   accent, tudo bem discreto pra não competir com o contraste dos tiles,
   que continuam se destacando por cima. Isso importa pro backdrop-filter
   dos painéis (header/nav/settings) ter ALGUMA variação de cor pra borrar
   — um fundo 100% chapado de uma cor só (var(--bg) sólido puro, como
   claro/descanso tinham antes) faz o blur não ter nada visível pra
   revelar, e o vidro nunca parece vidro por mais forte que o blur seja.
   Por isso os três temas agora têm gradiente, cada um com o tom certo.

   BUG CRÍTICO 2026-07-30 (Pilar, prioridade máxima -- "vá no feed, vista
   qualquer skin, visite o perfil de alguém: o fundo fica preto, não dá a
   cor da skin que cobre toda a Linka"): esta regra SEMPRE foi só #phone.
   #po-bg (o overlay de perfil visitado/próprio, position:absolute;inset:0
   por cima de TUDO, inclusive #phone) tinha só background:var(--bg) chapado
   inline no HTML -- nenhum dos 3 temas nunca alcançava essa tela, porque
   #po-bg cobre e SUBSTITUI visualmente o #phone atrás dele. É por isso que
   fora do perfil (feed/praças, onde só o #phone aparece por trás dos
   painéis translúcidos) a skin "cobre a Linka inteira", e dentro do perfil
   (onde #po-bg é opaco e SÓLIDO por cima do #phone) ela nunca aparecia --
   dois bugs de aparência idêntica (cor errada vs. cor nenhuma), mas causas
   diferentes: aquele era sobre synchronizar QUAL skin aplicar
   (_skinsAplicarNoPerfil, já corrigido); este é sobre o #po-bg nunca ter
   ganhado o MESMO gradiente ambiente accent-tingido que o #phone tem --
   nunca chegou a aplicar skin nenhuma aqui, nem a certa nem a errada.
   Fix: #po-bg entra nesta mesma regra (mesmo gradiente, mesmo formato) --
   como usa var(--accent) resolvido no PRÓPRIO elemento, e #po-bg já recebe
   --accent local (skin de quem visita, via _skinsAplicarNoPerfil em
   skins.js), o resultado é o fundo do perfil ganhar a cor certa da skin
   de quem está olhando, não só a do :root. As duas outras camadas que
   ocultavam isso (background:var(--bg) inline no #po-bg e no corpo rolável
   por dentro dele) foram removidas/trocadas por transparent no HTML --
   ver linka_mobile.html, div #po-bg e o corpo rolável logo abaixo dela. */
html[data-tema="escuro"] #phone{
  background:
    linear-gradient(125deg, rgba(255,255,255,.05) 0%, transparent 22%, transparent 78%, rgba(200,176,255,.04) 100%),
    radial-gradient(ellipse 140% 55% at 50% 0%, color-mix(in srgb,var(--accent) 14%,transparent) 0%, transparent 60%),
    radial-gradient(ellipse 130% 50% at 50% 100%, color-mix(in srgb,var(--accent) 9%,transparent) 0%, transparent 55%),
    linear-gradient(180deg, #100d20 0%, #08080f 45%, #050509 100%);
}
/* BUG 2026-08-01 (Pilar): #po-bg tinha o MESMO gradiente acima combinado com
   #phone numa unica regra -- mas a regra decorativa de padrao (borboletas/
   constelacao, ver mais abaixo neste arquivo) forca background-image via
   !important, o que sobrescreve TODO o valor de background-image desta
   regra (os 4 gradientes sao todos camadas de background-image), mesmo essa
   regra tendo especificidade maior. #phone raramente mostra esse gradiente
   cru (as telas cobrem ele quase todo, o tingimento visivel vem de
   --glass-tint nos paineis), entao ninguem reparou -- mas #po-bg (perfil
   visitado) depende 100% deste gradiente pra mostrar a cor da skin, porque
   os containers internos dele (.po-header, #po-posts-grid, corpo rolavel)
   sao todos transparentes. Fix: regra dedicada pra #po-bg, com o SVG
   decorativo como PRIMEIRA camada de background-image (visualmente
   identico ao antes) e os 4 gradientes de accent embaixo dele, sem
   !important -- e #po-bg foi removido do seletor da regra !important
   abaixo pra essa regra poder vencer. */
html[data-tema="escuro"] #po-bg{
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPgo8ZGVmcz4KPGcgaWQ9ImJmbHkiPgogIDxwYXRoIGQ9Ik0wLDAgQy01LC0xMCAtMTgsLTE1IC0yMiwtNiBDLTE4LDIgLTYsMyAwLDJaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8cGF0aCBkPSJNMCwwIEM1LC0xMCAxOCwtMTUgMjIsLTYgQzE4LDIgNiwzIDAsMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxwYXRoIGQ9Ik0wLDIgQy00LDggLTEzLDkgLTEzLDUgQy05LDEgLTQsMSAwLDJaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8cGF0aCBkPSJNMCwyIEM0LDggMTMsOSAxMyw1IEM5LDEgNCwxIDAsMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxsaW5lIHgxPSIwIiB5MT0iLTIiIHgyPSIwIiB5Mj0iOCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41IiBmaWxsPSJub25lIi8+CjwvZz4KPGcgaWQ9ImxmIj4KICA8cGF0aCBkPSJNMCwwIEM2LC03IDcsLTE2IDAsLTIwIEMtNywtMTYgLTYsLTcgMCwwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjgiLz4KICA8bGluZSB4MT0iMCIgeTE9Ii0xIiB4Mj0iMCIgeTI9Ii0xOSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC40IiBvcGFjaXR5PSIwLjYiLz4KPC9nPgo8ZyBpZD0icmFtbyI+CiAgPHBhdGggZD0iTTAsMCBRNSwtMTIgMywtMjYiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTIsLTExIFExMCwtMTUgMTIsLTIxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0yLC0xMSBRLTYsLTE1IC03LC0yMSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8ZWxsaXBzZSBjeD0iMTIiIGN5PSItMjEiIHJ4PSI0IiByeT0iMi4yIiB0cmFuc2Zvcm09InJvdGF0ZSgtMjAsMTIsLTIxKSIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPGVsbGlwc2UgY3g9Ii03IiBjeT0iLTIxIiByeD0iNCIgcnk9IjIuMiIgdHJhbnNmb3JtPSJyb3RhdGUoMjAsLTcsLTIxKSIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPGVsbGlwc2UgY3g9IjMiIGN5PSItMjYiIHJ4PSIzIiByeT0iMS42IiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNjUiLz4KPC9nPgo8ZyBpZD0iaGV4Ij4KICA8cGF0aCBkPSJNMCwtMTQgTDEyLDcgTC0xMiw3IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOCIvPgogIDxwYXRoIGQ9Ik0wLDE0IEwtMTIsLTcgTDEyLC03IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOCIvPgo8L2c+CjxnIGlkPSJ0cmkiPgogIDxwYXRoIGQ9Ik0wLC0xNCBMMTIsNyBMLTEyLDcgWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC44Ii8+CiAgPGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNiIvPgo8L2c+CjxnIGlkPSJmbHYiPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI3IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjU1Ii8+CiAgPGNpcmNsZSBjeD0iNyIgY3k9IjAiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSItNyIgY3k9IjAiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSIzLjUiIGN5PSI2IiByPSI3IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjU1Ii8+CiAgPGNpcmNsZSBjeD0iLTMuNSIgY3k9IjYiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSIzLjUiIGN5PSItNiIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41NSIvPgogIDxjaXJjbGUgY3g9Ii0zLjUiIGN5PSItNiIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41NSIvPgo8L2c+CjxnIGlkPSJ0dWxwIj4KICA8bGluZSB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iLTE4IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjgiLz4KICA8cGF0aCBkPSJNMCwtMTAgQy01LC0xNCAtNiwtMjIgMCwtMjAgQzYsLTIyIDUsLTE0IDAsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjgiLz4KICA8cGF0aCBkPSJNLTMsLTEwIEMtOCwtMTMgLTgsLTggLTMsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPHBhdGggZD0iTTMsLTEwIEM4LC0xMyA4LC04IDMsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CjwvZz4KPGcgaWQ9Im1hY2EiPgogIDxwYXRoIGQ9Ik0xLC0xNiBDMywtMjAgNywtMTggNSwtMTUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTS0xLC05IEMtNywtMTIgLTksLTQgLTgsNCBDLTcsMTIgLTMsMTYgMCwxNiBDMywxNiA3LDEyIDgsNCBDOSwtNCA3LC0xMiAxLC05IEMwLC02IDAsLTYgLTEsLTlaIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNzUiLz4KICA8cGF0aCBkPSJNMSwtOSBDNCwtMTMgOCwtMTAgNywtNyBDNSwtNCAyLC03IDEsLTlaIiBmaWxsPSIjMDIwMjA4Ii8+CjwvZz4KPGcgaWQ9ImZpbG0iPgogIDxyZWN0IHg9Ii0xMSIgeT0iLTE0IiB3aWR0aD0iMjIiIGhlaWdodD0iMjgiIHJ4PSIxIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjgiLz4KICA8cmVjdCB4PSItNyIgeT0iLTEwIiB3aWR0aD0iMTQiIGhlaWdodD0iMjAiIHJ4PSIwLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNSIvPgogIDxyZWN0IHg9Ii0xMyIgeT0iLTExIiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSItMTMiIHk9Ii0zLjUiIHdpZHRoPSIyLjUiIGhlaWdodD0iMy41IiByeD0iMC4zIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNyIvPgogIDxyZWN0IHg9Ii0xMyIgeT0iNCIgd2lkdGg9IjIuNSIgaGVpZ2h0PSIzLjUiIHJ4PSIwLjMiIGZpbGw9ImN1cnJlbnRDb2xvciIgb3BhY2l0eT0iMC43Ii8+CiAgPHJlY3QgeD0iMTAuNSIgeT0iLTExIiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSIxMC41IiB5PSItMy41IiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSIxMC41IiB5PSI0IiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KPC9nPgo8ZyBpZD0iZXQiPgogIDxjaXJjbGUgY3g9Ii0xMCIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIvPgogIDxjaXJjbGUgY3g9IjEwIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC43Ii8+CiAgPHBhdGggZD0iTS0xMCw4IEwwLC0xIEwxMCw4IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMCwtMSBMLTIsLTciIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIgZmlsbD0ibm9uZSIvPgogIDxsaW5lIHgxPSItNCIgeTE9Ii03IiB4Mj0iMiIgeTI9Ii03IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciLz4KICA8Y2lyY2xlIGN4PSItMiIgY3k9Ii0xMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjc1Ii8+CiAgPHBhdGggZD0iTS0yLC05IEwtNSwtNyBMMCwtNyBaIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNjUiLz4KICA8ZWxsaXBzZSBjeD0iNiIgY3k9Ii0yIiByeD0iMyIgcnk9IjQiIGZpbGw9ImN1cnJlbnRDb2xvciIgb3BhY2l0eT0iMC43Ii8+CjwvZz4KPGcgaWQ9ImNvbnN0Ij4KICA8Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iMS40IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9Ii05IiByPSIxLjAiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxjaXJjbGUgY3g9IjI0IiBjeT0iNSIgcj0iMS40IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8Y2lyY2xlIGN4PSIxMSIgY3k9IjE1IiByPSIxLjAiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxjaXJjbGUgY3g9Ii01IiBjeT0iMTgiIHI9IjEuMCIgZmlsbD0iY3VycmVudENvbG9yIi8+CiAgPGxpbmUgeDE9IjAiIHkxPSIwIiB4Mj0iMTYiIHkyPSItOSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC40Ii8+CiAgPGxpbmUgeDE9IjE2IiB5MT0iLTkiIHgyPSIyNCIgeTI9IjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNCIvPgogIDxsaW5lIHgxPSIyNCIgeTE9IjUiIHgyPSIxMSIgeTI9IjE1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjQiLz4KICA8bGluZSB4MT0iMTEiIHkxPSIxNSIgeDI9Ii01IiB5Mj0iMTgiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNCIvPgo8L2c+CjxnIGlkPSJpbmYiPgogIDxwYXRoIGQ9Ik0wLDAgQzQsLTggMTQsLTggMTQsMCBDMTQsOCA0LDggMCwwIEMtNCwtOCAtMTQsLTggLTE0LDAgQy0xNCw4IC00LDggMCwwWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC44Ii8+CjwvZz4KPGcgaWQ9Imx1YSI+CiAgPHBhdGggZD0iTTYsLTExIEExMywxMyAwIDEgMCA2LDExIEE5LDkgMCAxIDEgNiwtMTFaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9nPgo8ZyBpZD0iZXN0cmVsYSI+CiAgPHBhdGggZD0iTTAsLTkgTDEuMiwtMS4yIEw5LDAgTDEuMiwxLjIgTDAsOSBMLTEuMiwxLjIgTC05LDAgTC0xLjIsLTEuMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L2c+CjwvZGVmcz4KCjwhLS0gQk9SQk9MRVRBIChsb2dvIOKAlCBtYWlzIGluc3TDom5jaWFzKSAtLT4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAwLDE4MCkgc2NhbGUoMS42KSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTciLz4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjIwLDUyMCkgcm90YXRlKDgpIHNjYWxlKDEuNCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg1MCwxMzApIHJvdGF0ZSgtNikgc2NhbGUoMS4yKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLDcyMCkgcm90YXRlKDEwKSBzY2FsZSgxLjUpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNiIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3ODAsODQwKSByb3RhdGUoLTQpIHNjYWxlKDEuMykiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0MCw5MDApIHJvdGF0ZSg1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5NTAsNTYwKSByb3RhdGUoLTEwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzODAsMzgwKSByb3RhdGUoMTIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY4MCw3MCkgcm90YXRlKC04KSBzY2FsZSgxLjMpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgoKPCEtLSBGT0xIQVMgLS0+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNTAsODApIHJvdGF0ZSgzNSkgc2NhbGUoMS4yKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTYiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkwLDMxMCkgcm90YXRlKC0yNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDczMCwyODApIHJvdGF0ZSg1MCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTYiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwMCw2NjApIHJvdGF0ZSgtNDApIHNjYWxlKDEuMykiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4NzAsNDMwKSByb3RhdGUoMjApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNjAsNTYwKSByb3RhdGUoLTYwKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjYwLDc2MCkgcm90YXRlKDMwKSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAsODkwKSByb3RhdGUoLTE1KSBzY2FsZSgxLjIpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQwLDgyMCkgcm90YXRlKDQ1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUwLDE1MCkgcm90YXRlKC0zNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkxMCw2OTApIHJvdGF0ZSgxOCkgc2NhbGUoMS4xKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTQiLz4KCjwhLS0gUkFNT1MgLS0+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ4MCwyMjApIHJvdGF0ZSgtMTIpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2MCw0NjApIHJvdGF0ZSgxOCkgc2NhbGUoMS4xKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjcmFtbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODIwLDY1MCkgcm90YXRlKC0zMCkgc2NhbGUoMS4zKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjcmFtbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTgwLDM3MCkgcm90YXRlKDQwKSBzY2FsZSgxLjApIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMTAsODEwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcwLDU5MCkgcm90YXRlKDIyKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3NTAsOTUwKSByb3RhdGUoLTE4KSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xMyIvPgoKPCEtLSBHRU9Nw4lUUklDTyBFU09Uw4lSSUNPIC0tPgo8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcyMCw5MCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjaGV4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAsNTgwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg5MCw4OTApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI2hleCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDQwLDUwMCkgcm90YXRlKDE1KSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xMiIvPgo8dXNlIGhyZWY9IiN0cmkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQwMCw0NDApIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI3RyaSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzgwLDUwMCkgcm90YXRlKDEwKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMiIvPgo8dXNlIGhyZWY9IiN0cmkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzMCw3NTApIHJvdGF0ZSgtMjApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2ZsdiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTUwLDEzMCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTIiLz4KPHVzZSBocmVmPSIjZmx2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDAsOTEwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMSIvPgo8dXNlIGhyZWY9IiNmbHYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg1MCwzNTApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjExIi8+Cjx1c2UgaHJlZj0iI2luZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTQwLDMwMCkgcm90YXRlKC0xNSkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MCwxNTApIHJvdGF0ZSgyMCkgc2NhbGUoMS4yKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTIiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0ODAsOTYwKSByb3RhdGUoOCkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTIiLz4KCjwhLS0gTFVBIC0tPgo8dXNlIGhyZWY9IiNsdWEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxMCwxNDApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI2x1YSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTAwLDIwMCkgcm90YXRlKDMwKSBzY2FsZSgxLjApIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNsdWEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLDQ1MCkgcm90YXRlKC0yMCkgc2NhbGUoMS4yKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjwhLS0gRVNUUkVMQVMgLS0+Cjx1c2UgaHJlZj0iI2VzdHJlbGEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwMCw1MCkgc2NhbGUoMC43KSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTciLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTkwLDQ0MCkgc2NhbGUoMC42KSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzAsNjgwKSBzY2FsZSgwLjgpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNiIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MDAsNjAwKSBzY2FsZSgwLjUpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MjAsNTIwKSBzY2FsZSgwLjQpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MjAsMjkwKSBzY2FsZSgwLjYpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNSIvPgoKPCEtLSBBTEVBVMOTUklPIC0tPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NjAsMjAwKSBzY2FsZSgxLjIpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMDAsNjUwKSByb3RhdGUoOCkgc2NhbGUoMS4xKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjdHVscCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTAwLDc0MCkgcm90YXRlKC01KSBzY2FsZSgxLjMpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzAsODUwKSByb3RhdGUoMTIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEzIi8+Cgo8dXNlIGhyZWY9IiNtYWNhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0ODAsNzUwKSBzY2FsZSgxLjIpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNtYWNhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDAsMjMwKSByb3RhdGUoMTIpIHNjYWxlKDEuMSkiIGNvbG9yPSIjOWI2ZGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI21hY2EiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc1MCw0NDApIHJvdGF0ZSgtNSkgc2NhbGUoMS4wKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjx1c2UgaHJlZj0iI2ZpbG0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc1MCwzOTApIHJvdGF0ZSg1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNmaWxtIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNzAsOTcwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2ZpbG0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMCwzOTApIHJvdGF0ZSgxNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjx1c2UgaHJlZj0iI2V0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5MjAsNjApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2V0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NSw5OTApIHJvdGF0ZSg1KSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgoKPHVzZSBocmVmPSIjY29uc3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI4MCwxMDApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2NvbnN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2ODAsOTcwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNjb25zdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTUwLDc2MCkgcm90YXRlKDMwKSBzY2FsZSgxLjEpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNjb25zdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTgwLDI4MCkgcm90YXRlKC0xNSkgc2NhbGUoMS4wKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTQiLz4KCjwhLS0gRUFTVEVSIEVHR1Mg4oCUIG5vbWVzIHNhaW5kbyBkZSBkZW50cm8vYW8gbGFkbyBkZSBmaWd1cmFzIC0tPgoKPHRleHQgeD0iMTU1IiB5PSI0MzUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNkYmJmZmYiIG9wYWNpdHk9IjAuMzQiIHRyYW5zZm9ybT0icm90YXRlKC0xOCwxNTUsNDM1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPklzaXM8L3RleHQ+Cjx0ZXh0IHg9IjQ5MCIgeT0iMjQwIiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZDRiMGZmIiBvcGFjaXR5PSIwLjMzIiB0cmFuc2Zvcm09InJvdGF0ZSg3LDQ5MCwyNDApIiBsZXR0ZXItc3BhY2luZz0iMyI+UGlsYXI8L3RleHQ+Cjx0ZXh0IHg9IjQ1OCIgeT0iNjcwIiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZGJiZmZmIiBvcGFjaXR5PSIwLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgtNyw0NTgsNjcwKSIgbGV0dGVyLXNwYWNpbmc9IjMiPk1hcmlhPC90ZXh0Pgo8dGV4dCB4PSIyNjIiIHk9IjUwOCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2NjYThmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoMjAsMjYyLDUwOCkiIGxldHRlci1zcGFjaW5nPSIzIj5NYWlyaW08L3RleHQ+Cjx0ZXh0IHg9IjY4NSIgeT0iODM1IiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZGJiZmZmIiBvcGFjaXR5PSIwLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgtNCw2ODUsODM1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkJhYmk8L3RleHQ+Cjx0ZXh0IHg9Ijc4IiB5PSI3NDUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNkNGIwZmYiIG9wYWNpdHk9IjAuMzMiIHRyYW5zZm9ybT0icm90YXRlKC0yMiw3OCw3NDUpIiBsZXR0ZXItc3BhY2luZz0iMyI+Sm9hbzwvdGV4dD4KPHRleHQgeD0iNTQ4IiB5PSI4OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTMsNTQ4LDg4KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkZyYW5jbzwvdGV4dD4KPHRleHQgeD0iMTE4IiB5PSI0NzUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNjY2E4ZmYiIG9wYWNpdHk9IjAuMzMiIHRyYW5zZm9ybT0icm90YXRlKC0xMCwxMTgsNDc1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkp1bGlhPC90ZXh0Pgo8dGV4dCB4PSIzNDUiIHk9Ijg3OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTgsMzQ1LDg3OCkiIGxldHRlci1zcGFjaW5nPSIzIj5UYXRhPC90ZXh0Pgo8dGV4dCB4PSI3MDUiIHk9IjU4OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2Q0YjBmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoLTYsNzA1LDU4OCkiIGxldHRlci1zcGFjaW5nPSIzIj5EdWRhPC90ZXh0Pgo8dGV4dCB4PSI0MTUiIHk9IjMxNSIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyLDQxNSwzMTUpIiBsZXR0ZXItc3BhY2luZz0iMyI+TWF5Y29uPC90ZXh0Pgo8dGV4dCB4PSI0NjgiIHk9Ijg5NSIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2NjYThmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoOSw0NjgsODk1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkNocmlzPC90ZXh0Pgo8dGV4dCB4PSI2MjIiIHk9IjU0MCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE2LDYyMiw1NDApIiBsZXR0ZXItc3BhY2luZz0iMyI+TGlhPC90ZXh0PgoKPCEtLSBFbGVtZW50b3MgZXh0cmFzIG5hIHpvbmEgdmlzw612ZWwgZXNxdWVyZGEvY2VudHJvIC0tPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjAsNjAwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4MCw2MjApIHJvdGF0ZSg2KSBzY2FsZSgxLjApIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwLDIwMCkgcm90YXRlKDQyKSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDIwLDc1MCkgcm90YXRlKC0zMCkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU1LDQ3MCkgcm90YXRlKDE4KSBzY2FsZSgxLjIpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODAsNjgwKSByb3RhdGUoMTQpIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY0MCw0ODApIHJvdGF0ZSgtMjIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjOWI2ZGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI2hleCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAwLDU1MCkgc2NhbGUoMS4wKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTYwLDcwMCkgc2NhbGUoMC43KSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbHVhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MDAsOTIwKSByb3RhdGUoMTUpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI3R1bHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU4MCw4MzApIHJvdGF0ZSgtNikgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNDAsMjAwKSByb3RhdGUoMTApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2NvbnN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NTAsMzgwKSBzY2FsZSgxLjApIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8L3N2Zz4="),
    linear-gradient(125deg, rgba(255,255,255,.05) 0%, transparent 22%, transparent 78%, rgba(200,176,255,.04) 100%),
    radial-gradient(ellipse 140% 55% at 50% 0%, color-mix(in srgb,var(--accent) 14%,transparent) 0%, transparent 60%),
    radial-gradient(ellipse 130% 50% at 50% 100%, color-mix(in srgb,var(--accent) 9%,transparent) 0%, transparent 55%),
    linear-gradient(180deg, #100d20 0%, #08080f 45%, #050509 100%);
  background-size:500px 500px, auto, auto, auto, auto;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
html[data-tema="claro"] #phone{
  background:
    linear-gradient(125deg, rgba(255,255,255,.5) 0%, transparent 22%, transparent 78%, rgba(150,110,220,.07) 100%),
    radial-gradient(ellipse 140% 55% at 50% 0%, color-mix(in srgb,var(--accent) 16%,transparent) 0%, transparent 60%),
    radial-gradient(ellipse 130% 50% at 50% 100%, color-mix(in srgb,var(--accent) 11%,transparent) 0%, transparent 55%),
    linear-gradient(180deg, #fdfcff 0%, #f2f0f8 45%, #e9e4f6 100%);
}
/* BUG 2026-08-01 (Pilar): #po-bg tinha o MESMO gradiente acima combinado com
   #phone numa unica regra -- mas a regra decorativa de padrao (borboletas/
   constelacao, ver mais abaixo neste arquivo) forca background-image via
   !important, o que sobrescreve TODO o valor de background-image desta
   regra (os 4 gradientes sao todos camadas de background-image), mesmo essa
   regra tendo especificidade maior. #phone raramente mostra esse gradiente
   cru (as telas cobrem ele quase todo, o tingimento visivel vem de
   --glass-tint nos paineis), entao ninguem reparou -- mas #po-bg (perfil
   visitado) depende 100% deste gradiente pra mostrar a cor da skin, porque
   os containers internos dele (.po-header, #po-posts-grid, corpo rolavel)
   sao todos transparentes. Fix: regra dedicada pra #po-bg, com o SVG
   decorativo como PRIMEIRA camada de background-image (visualmente
   identico ao antes) e os 4 gradientes de accent embaixo dele, sem
   !important -- e #po-bg foi removido do seletor da regra !important
   abaixo pra essa regra poder vencer. */
html[data-tema="claro"] #po-bg{
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPgo8ZGVmcz4KPGcgaWQ9ImJmbHkiPgogIDxwYXRoIGQ9Ik0wLDAgQy01LC0xMCAtMTgsLTE1IC0yMiwtNiBDLTE4LDIgLTYsMyAwLDJaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8cGF0aCBkPSJNMCwwIEM1LC0xMCAxOCwtMTUgMjIsLTYgQzE4LDIgNiwzIDAsMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxwYXRoIGQ9Ik0wLDIgQy00LDggLTEzLDkgLTEzLDUgQy05LDEgLTQsMSAwLDJaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8cGF0aCBkPSJNMCwyIEM0LDggMTMsOSAxMyw1IEM5LDEgNCwxIDAsMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxsaW5lIHgxPSIwIiB5MT0iLTIiIHgyPSIwIiB5Mj0iOCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41IiBmaWxsPSJub25lIi8+CjwvZz4KPGcgaWQ9ImxmIj4KICA8cGF0aCBkPSJNMCwwIEM2LC03IDcsLTE2IDAsLTIwIEMtNywtMTYgLTYsLTcgMCwwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjgiLz4KICA8bGluZSB4MT0iMCIgeTE9Ii0xIiB4Mj0iMCIgeTI9Ii0xOSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC40IiBvcGFjaXR5PSIwLjYiLz4KPC9nPgo8ZyBpZD0icmFtbyI+CiAgPHBhdGggZD0iTTAsMCBRNSwtMTIgMywtMjYiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTIsLTExIFExMCwtMTUgMTIsLTIxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0yLC0xMSBRLTYsLTE1IC03LC0yMSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8ZWxsaXBzZSBjeD0iMTIiIGN5PSItMjEiIHJ4PSI0IiByeT0iMi4yIiB0cmFuc2Zvcm09InJvdGF0ZSgtMjAsMTIsLTIxKSIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPGVsbGlwc2UgY3g9Ii03IiBjeT0iLTIxIiByeD0iNCIgcnk9IjIuMiIgdHJhbnNmb3JtPSJyb3RhdGUoMjAsLTcsLTIxKSIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPGVsbGlwc2UgY3g9IjMiIGN5PSItMjYiIHJ4PSIzIiByeT0iMS42IiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNjUiLz4KPC9nPgo8ZyBpZD0iaGV4Ij4KICA8cGF0aCBkPSJNMCwtMTQgTDEyLDcgTC0xMiw3IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOCIvPgogIDxwYXRoIGQ9Ik0wLDE0IEwtMTIsLTcgTDEyLC03IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOCIvPgo8L2c+CjxnIGlkPSJ0cmkiPgogIDxwYXRoIGQ9Ik0wLC0xNCBMMTIsNyBMLTEyLDcgWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC44Ii8+CiAgPGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNiIvPgo8L2c+CjxnIGlkPSJmbHYiPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI3IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjU1Ii8+CiAgPGNpcmNsZSBjeD0iNyIgY3k9IjAiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSItNyIgY3k9IjAiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSIzLjUiIGN5PSI2IiByPSI3IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjU1Ii8+CiAgPGNpcmNsZSBjeD0iLTMuNSIgY3k9IjYiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSIzLjUiIGN5PSItNiIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41NSIvPgogIDxjaXJjbGUgY3g9Ii0zLjUiIGN5PSItNiIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41NSIvPgo8L2c+CjxnIGlkPSJ0dWxwIj4KICA8bGluZSB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iLTE4IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjgiLz4KICA8cGF0aCBkPSJNMCwtMTAgQy01LC0xNCAtNiwtMjIgMCwtMjAgQzYsLTIyIDUsLTE0IDAsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjgiLz4KICA8cGF0aCBkPSJNLTMsLTEwIEMtOCwtMTMgLTgsLTggLTMsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPHBhdGggZD0iTTMsLTEwIEM4LC0xMyA4LC04IDMsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CjwvZz4KPGcgaWQ9Im1hY2EiPgogIDxwYXRoIGQ9Ik0xLC0xNiBDMywtMjAgNywtMTggNSwtMTUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTS0xLC05IEMtNywtMTIgLTksLTQgLTgsNCBDLTcsMTIgLTMsMTYgMCwxNiBDMywxNiA3LDEyIDgsNCBDOSwtNCA3LC0xMiAxLC05IEMwLC02IDAsLTYgLTEsLTlaIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNzUiLz4KICA8cGF0aCBkPSJNMSwtOSBDNCwtMTMgOCwtMTAgNywtNyBDNSwtNCAyLC03IDEsLTlaIiBmaWxsPSIjMDIwMjA4Ii8+CjwvZz4KPGcgaWQ9ImZpbG0iPgogIDxyZWN0IHg9Ii0xMSIgeT0iLTE0IiB3aWR0aD0iMjIiIGhlaWdodD0iMjgiIHJ4PSIxIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjgiLz4KICA8cmVjdCB4PSItNyIgeT0iLTEwIiB3aWR0aD0iMTQiIGhlaWdodD0iMjAiIHJ4PSIwLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNSIvPgogIDxyZWN0IHg9Ii0xMyIgeT0iLTExIiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSItMTMiIHk9Ii0zLjUiIHdpZHRoPSIyLjUiIGhlaWdodD0iMy41IiByeD0iMC4zIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNyIvPgogIDxyZWN0IHg9Ii0xMyIgeT0iNCIgd2lkdGg9IjIuNSIgaGVpZ2h0PSIzLjUiIHJ4PSIwLjMiIGZpbGw9ImN1cnJlbnRDb2xvciIgb3BhY2l0eT0iMC43Ii8+CiAgPHJlY3QgeD0iMTAuNSIgeT0iLTExIiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSIxMC41IiB5PSItMy41IiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSIxMC41IiB5PSI0IiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KPC9nPgo8ZyBpZD0iZXQiPgogIDxjaXJjbGUgY3g9Ii0xMCIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIvPgogIDxjaXJjbGUgY3g9IjEwIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC43Ii8+CiAgPHBhdGggZD0iTS0xMCw4IEwwLC0xIEwxMCw4IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMCwtMSBMLTIsLTciIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIgZmlsbD0ibm9uZSIvPgogIDxsaW5lIHgxPSItNCIgeTE9Ii03IiB4Mj0iMiIgeTI9Ii03IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciLz4KICA8Y2lyY2xlIGN4PSItMiIgY3k9Ii0xMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjc1Ii8+CiAgPHBhdGggZD0iTS0yLC05IEwtNSwtNyBMMCwtNyBaIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNjUiLz4KICA8ZWxsaXBzZSBjeD0iNiIgY3k9Ii0yIiByeD0iMyIgcnk9IjQiIGZpbGw9ImN1cnJlbnRDb2xvciIgb3BhY2l0eT0iMC43Ii8+CjwvZz4KPGcgaWQ9ImNvbnN0Ij4KICA8Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iMS40IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9Ii05IiByPSIxLjAiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxjaXJjbGUgY3g9IjI0IiBjeT0iNSIgcj0iMS40IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8Y2lyY2xlIGN4PSIxMSIgY3k9IjE1IiByPSIxLjAiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxjaXJjbGUgY3g9Ii01IiBjeT0iMTgiIHI9IjEuMCIgZmlsbD0iY3VycmVudENvbG9yIi8+CiAgPGxpbmUgeDE9IjAiIHkxPSIwIiB4Mj0iMTYiIHkyPSItOSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC40Ii8+CiAgPGxpbmUgeDE9IjE2IiB5MT0iLTkiIHgyPSIyNCIgeTI9IjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNCIvPgogIDxsaW5lIHgxPSIyNCIgeTE9IjUiIHgyPSIxMSIgeTI9IjE1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjQiLz4KICA8bGluZSB4MT0iMTEiIHkxPSIxNSIgeDI9Ii01IiB5Mj0iMTgiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNCIvPgo8L2c+CjxnIGlkPSJpbmYiPgogIDxwYXRoIGQ9Ik0wLDAgQzQsLTggMTQsLTggMTQsMCBDMTQsOCA0LDggMCwwIEMtNCwtOCAtMTQsLTggLTE0LDAgQy0xNCw4IC00LDggMCwwWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC44Ii8+CjwvZz4KPGcgaWQ9Imx1YSI+CiAgPHBhdGggZD0iTTYsLTExIEExMywxMyAwIDEgMCA2LDExIEE5LDkgMCAxIDEgNiwtMTFaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9nPgo8ZyBpZD0iZXN0cmVsYSI+CiAgPHBhdGggZD0iTTAsLTkgTDEuMiwtMS4yIEw5LDAgTDEuMiwxLjIgTDAsOSBMLTEuMiwxLjIgTC05LDAgTC0xLjIsLTEuMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L2c+CjwvZGVmcz4KCjwhLS0gQk9SQk9MRVRBIChsb2dvIOKAlCBtYWlzIGluc3TDom5jaWFzKSAtLT4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAwLDE4MCkgc2NhbGUoMS42KSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTciLz4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjIwLDUyMCkgcm90YXRlKDgpIHNjYWxlKDEuNCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg1MCwxMzApIHJvdGF0ZSgtNikgc2NhbGUoMS4yKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLDcyMCkgcm90YXRlKDEwKSBzY2FsZSgxLjUpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNiIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3ODAsODQwKSByb3RhdGUoLTQpIHNjYWxlKDEuMykiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0MCw5MDApIHJvdGF0ZSg1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5NTAsNTYwKSByb3RhdGUoLTEwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzODAsMzgwKSByb3RhdGUoMTIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY4MCw3MCkgcm90YXRlKC04KSBzY2FsZSgxLjMpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgoKPCEtLSBGT0xIQVMgLS0+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNTAsODApIHJvdGF0ZSgzNSkgc2NhbGUoMS4yKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTYiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkwLDMxMCkgcm90YXRlKC0yNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDczMCwyODApIHJvdGF0ZSg1MCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTYiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwMCw2NjApIHJvdGF0ZSgtNDApIHNjYWxlKDEuMykiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4NzAsNDMwKSByb3RhdGUoMjApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNjAsNTYwKSByb3RhdGUoLTYwKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjYwLDc2MCkgcm90YXRlKDMwKSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAsODkwKSByb3RhdGUoLTE1KSBzY2FsZSgxLjIpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQwLDgyMCkgcm90YXRlKDQ1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUwLDE1MCkgcm90YXRlKC0zNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkxMCw2OTApIHJvdGF0ZSgxOCkgc2NhbGUoMS4xKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTQiLz4KCjwhLS0gUkFNT1MgLS0+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ4MCwyMjApIHJvdGF0ZSgtMTIpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2MCw0NjApIHJvdGF0ZSgxOCkgc2NhbGUoMS4xKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjcmFtbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODIwLDY1MCkgcm90YXRlKC0zMCkgc2NhbGUoMS4zKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjcmFtbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTgwLDM3MCkgcm90YXRlKDQwKSBzY2FsZSgxLjApIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMTAsODEwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcwLDU5MCkgcm90YXRlKDIyKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3NTAsOTUwKSByb3RhdGUoLTE4KSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xMyIvPgoKPCEtLSBHRU9Nw4lUUklDTyBFU09Uw4lSSUNPIC0tPgo8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcyMCw5MCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjaGV4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAsNTgwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg5MCw4OTApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI2hleCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDQwLDUwMCkgcm90YXRlKDE1KSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xMiIvPgo8dXNlIGhyZWY9IiN0cmkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQwMCw0NDApIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI3RyaSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzgwLDUwMCkgcm90YXRlKDEwKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMiIvPgo8dXNlIGhyZWY9IiN0cmkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzMCw3NTApIHJvdGF0ZSgtMjApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2ZsdiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTUwLDEzMCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTIiLz4KPHVzZSBocmVmPSIjZmx2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDAsOTEwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMSIvPgo8dXNlIGhyZWY9IiNmbHYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg1MCwzNTApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjExIi8+Cjx1c2UgaHJlZj0iI2luZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTQwLDMwMCkgcm90YXRlKC0xNSkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MCwxNTApIHJvdGF0ZSgyMCkgc2NhbGUoMS4yKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTIiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0ODAsOTYwKSByb3RhdGUoOCkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTIiLz4KCjwhLS0gTFVBIC0tPgo8dXNlIGhyZWY9IiNsdWEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxMCwxNDApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI2x1YSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTAwLDIwMCkgcm90YXRlKDMwKSBzY2FsZSgxLjApIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNsdWEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLDQ1MCkgcm90YXRlKC0yMCkgc2NhbGUoMS4yKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjwhLS0gRVNUUkVMQVMgLS0+Cjx1c2UgaHJlZj0iI2VzdHJlbGEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwMCw1MCkgc2NhbGUoMC43KSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTciLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTkwLDQ0MCkgc2NhbGUoMC42KSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzAsNjgwKSBzY2FsZSgwLjgpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNiIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MDAsNjAwKSBzY2FsZSgwLjUpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MjAsNTIwKSBzY2FsZSgwLjQpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MjAsMjkwKSBzY2FsZSgwLjYpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNSIvPgoKPCEtLSBBTEVBVMOTUklPIC0tPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NjAsMjAwKSBzY2FsZSgxLjIpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMDAsNjUwKSByb3RhdGUoOCkgc2NhbGUoMS4xKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjdHVscCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTAwLDc0MCkgcm90YXRlKC01KSBzY2FsZSgxLjMpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzAsODUwKSByb3RhdGUoMTIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEzIi8+Cgo8dXNlIGhyZWY9IiNtYWNhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0ODAsNzUwKSBzY2FsZSgxLjIpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNtYWNhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDAsMjMwKSByb3RhdGUoMTIpIHNjYWxlKDEuMSkiIGNvbG9yPSIjOWI2ZGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI21hY2EiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc1MCw0NDApIHJvdGF0ZSgtNSkgc2NhbGUoMS4wKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjx1c2UgaHJlZj0iI2ZpbG0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc1MCwzOTApIHJvdGF0ZSg1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNmaWxtIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNzAsOTcwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2ZpbG0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMCwzOTApIHJvdGF0ZSgxNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjx1c2UgaHJlZj0iI2V0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5MjAsNjApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2V0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NSw5OTApIHJvdGF0ZSg1KSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgoKPHVzZSBocmVmPSIjY29uc3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI4MCwxMDApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2NvbnN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2ODAsOTcwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNjb25zdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTUwLDc2MCkgcm90YXRlKDMwKSBzY2FsZSgxLjEpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNjb25zdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTgwLDI4MCkgcm90YXRlKC0xNSkgc2NhbGUoMS4wKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTQiLz4KCjwhLS0gRUFTVEVSIEVHR1Mg4oCUIG5vbWVzIHNhaW5kbyBkZSBkZW50cm8vYW8gbGFkbyBkZSBmaWd1cmFzIC0tPgoKPHRleHQgeD0iMTU1IiB5PSI0MzUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNkYmJmZmYiIG9wYWNpdHk9IjAuMzQiIHRyYW5zZm9ybT0icm90YXRlKC0xOCwxNTUsNDM1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPklzaXM8L3RleHQ+Cjx0ZXh0IHg9IjQ5MCIgeT0iMjQwIiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZDRiMGZmIiBvcGFjaXR5PSIwLjMzIiB0cmFuc2Zvcm09InJvdGF0ZSg3LDQ5MCwyNDApIiBsZXR0ZXItc3BhY2luZz0iMyI+UGlsYXI8L3RleHQ+Cjx0ZXh0IHg9IjQ1OCIgeT0iNjcwIiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZGJiZmZmIiBvcGFjaXR5PSIwLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgtNyw0NTgsNjcwKSIgbGV0dGVyLXNwYWNpbmc9IjMiPk1hcmlhPC90ZXh0Pgo8dGV4dCB4PSIyNjIiIHk9IjUwOCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2NjYThmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoMjAsMjYyLDUwOCkiIGxldHRlci1zcGFjaW5nPSIzIj5NYWlyaW08L3RleHQ+Cjx0ZXh0IHg9IjY4NSIgeT0iODM1IiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZGJiZmZmIiBvcGFjaXR5PSIwLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgtNCw2ODUsODM1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkJhYmk8L3RleHQ+Cjx0ZXh0IHg9Ijc4IiB5PSI3NDUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNkNGIwZmYiIG9wYWNpdHk9IjAuMzMiIHRyYW5zZm9ybT0icm90YXRlKC0yMiw3OCw3NDUpIiBsZXR0ZXItc3BhY2luZz0iMyI+Sm9hbzwvdGV4dD4KPHRleHQgeD0iNTQ4IiB5PSI4OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTMsNTQ4LDg4KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkZyYW5jbzwvdGV4dD4KPHRleHQgeD0iMTE4IiB5PSI0NzUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNjY2E4ZmYiIG9wYWNpdHk9IjAuMzMiIHRyYW5zZm9ybT0icm90YXRlKC0xMCwxMTgsNDc1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkp1bGlhPC90ZXh0Pgo8dGV4dCB4PSIzNDUiIHk9Ijg3OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTgsMzQ1LDg3OCkiIGxldHRlci1zcGFjaW5nPSIzIj5UYXRhPC90ZXh0Pgo8dGV4dCB4PSI3MDUiIHk9IjU4OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2Q0YjBmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoLTYsNzA1LDU4OCkiIGxldHRlci1zcGFjaW5nPSIzIj5EdWRhPC90ZXh0Pgo8dGV4dCB4PSI0MTUiIHk9IjMxNSIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyLDQxNSwzMTUpIiBsZXR0ZXItc3BhY2luZz0iMyI+TWF5Y29uPC90ZXh0Pgo8dGV4dCB4PSI0NjgiIHk9Ijg5NSIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2NjYThmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoOSw0NjgsODk1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkNocmlzPC90ZXh0Pgo8dGV4dCB4PSI2MjIiIHk9IjU0MCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE2LDYyMiw1NDApIiBsZXR0ZXItc3BhY2luZz0iMyI+TGlhPC90ZXh0PgoKPCEtLSBFbGVtZW50b3MgZXh0cmFzIG5hIHpvbmEgdmlzw612ZWwgZXNxdWVyZGEvY2VudHJvIC0tPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjAsNjAwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4MCw2MjApIHJvdGF0ZSg2KSBzY2FsZSgxLjApIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwLDIwMCkgcm90YXRlKDQyKSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDIwLDc1MCkgcm90YXRlKC0zMCkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU1LDQ3MCkgcm90YXRlKDE4KSBzY2FsZSgxLjIpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODAsNjgwKSByb3RhdGUoMTQpIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY0MCw0ODApIHJvdGF0ZSgtMjIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjOWI2ZGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI2hleCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAwLDU1MCkgc2NhbGUoMS4wKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTYwLDcwMCkgc2NhbGUoMC43KSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbHVhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MDAsOTIwKSByb3RhdGUoMTUpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI3R1bHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU4MCw4MzApIHJvdGF0ZSgtNikgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNDAsMjAwKSByb3RhdGUoMTApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2NvbnN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NTAsMzgwKSBzY2FsZSgxLjApIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8L3N2Zz4="),
    linear-gradient(125deg, rgba(255,255,255,.5) 0%, transparent 22%, transparent 78%, rgba(150,110,220,.07) 100%),
    radial-gradient(ellipse 140% 55% at 50% 0%, color-mix(in srgb,var(--accent) 16%,transparent) 0%, transparent 60%),
    radial-gradient(ellipse 130% 50% at 50% 100%, color-mix(in srgb,var(--accent) 11%,transparent) 0%, transparent 55%),
    linear-gradient(180deg, #fdfcff 0%, #f2f0f8 45%, #e9e4f6 100%);
  background-size:500px 500px, auto, auto, auto, auto;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
html[data-tema="descanso"] #phone{
  background:
    linear-gradient(125deg, rgba(255,255,255,.5) 0%, transparent 22%, transparent 78%, rgba(130,90,220,.07) 100%),
    radial-gradient(ellipse 140% 55% at 50% 0%, color-mix(in srgb,var(--accent) 14%,transparent) 0%, transparent 60%),
    radial-gradient(ellipse 130% 50% at 50% 100%, color-mix(in srgb,var(--accent) 10%,transparent) 0%, transparent 55%),
    linear-gradient(180deg, #fefdff 0%, #faf8ff 45%, #f0ebff 100%);
}
/* BUG 2026-08-01 (Pilar): #po-bg tinha o MESMO gradiente acima combinado com
   #phone numa unica regra -- mas a regra decorativa de padrao (borboletas/
   constelacao, ver mais abaixo neste arquivo) forca background-image via
   !important, o que sobrescreve TODO o valor de background-image desta
   regra (os 4 gradientes sao todos camadas de background-image), mesmo essa
   regra tendo especificidade maior. #phone raramente mostra esse gradiente
   cru (as telas cobrem ele quase todo, o tingimento visivel vem de
   --glass-tint nos paineis), entao ninguem reparou -- mas #po-bg (perfil
   visitado) depende 100% deste gradiente pra mostrar a cor da skin, porque
   os containers internos dele (.po-header, #po-posts-grid, corpo rolavel)
   sao todos transparentes. Fix: regra dedicada pra #po-bg, com o SVG
   decorativo como PRIMEIRA camada de background-image (visualmente
   identico ao antes) e os 4 gradientes de accent embaixo dele, sem
   !important -- e #po-bg foi removido do seletor da regra !important
   abaixo pra essa regra poder vencer. */
html[data-tema="descanso"] #po-bg{
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPgo8ZGVmcz4KPGcgaWQ9ImJmbHkiPgogIDxwYXRoIGQ9Ik0wLDAgQy01LC0xMCAtMTgsLTE1IC0yMiwtNiBDLTE4LDIgLTYsMyAwLDJaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8cGF0aCBkPSJNMCwwIEM1LC0xMCAxOCwtMTUgMjIsLTYgQzE4LDIgNiwzIDAsMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxwYXRoIGQ9Ik0wLDIgQy00LDggLTEzLDkgLTEzLDUgQy05LDEgLTQsMSAwLDJaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8cGF0aCBkPSJNMCwyIEM0LDggMTMsOSAxMyw1IEM5LDEgNCwxIDAsMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxsaW5lIHgxPSIwIiB5MT0iLTIiIHgyPSIwIiB5Mj0iOCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41IiBmaWxsPSJub25lIi8+CjwvZz4KPGcgaWQ9ImxmIj4KICA8cGF0aCBkPSJNMCwwIEM2LC03IDcsLTE2IDAsLTIwIEMtNywtMTYgLTYsLTcgMCwwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjgiLz4KICA8bGluZSB4MT0iMCIgeTE9Ii0xIiB4Mj0iMCIgeTI9Ii0xOSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC40IiBvcGFjaXR5PSIwLjYiLz4KPC9nPgo8ZyBpZD0icmFtbyI+CiAgPHBhdGggZD0iTTAsMCBRNSwtMTIgMywtMjYiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTIsLTExIFExMCwtMTUgMTIsLTIxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0yLC0xMSBRLTYsLTE1IC03LC0yMSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8ZWxsaXBzZSBjeD0iMTIiIGN5PSItMjEiIHJ4PSI0IiByeT0iMi4yIiB0cmFuc2Zvcm09InJvdGF0ZSgtMjAsMTIsLTIxKSIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPGVsbGlwc2UgY3g9Ii03IiBjeT0iLTIxIiByeD0iNCIgcnk9IjIuMiIgdHJhbnNmb3JtPSJyb3RhdGUoMjAsLTcsLTIxKSIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPGVsbGlwc2UgY3g9IjMiIGN5PSItMjYiIHJ4PSIzIiByeT0iMS42IiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNjUiLz4KPC9nPgo8ZyBpZD0iaGV4Ij4KICA8cGF0aCBkPSJNMCwtMTQgTDEyLDcgTC0xMiw3IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOCIvPgogIDxwYXRoIGQ9Ik0wLDE0IEwtMTIsLTcgTDEyLC03IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOCIvPgo8L2c+CjxnIGlkPSJ0cmkiPgogIDxwYXRoIGQ9Ik0wLC0xNCBMMTIsNyBMLTEyLDcgWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC44Ii8+CiAgPGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNiIvPgo8L2c+CjxnIGlkPSJmbHYiPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI3IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjU1Ii8+CiAgPGNpcmNsZSBjeD0iNyIgY3k9IjAiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSItNyIgY3k9IjAiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSIzLjUiIGN5PSI2IiByPSI3IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjU1Ii8+CiAgPGNpcmNsZSBjeD0iLTMuNSIgY3k9IjYiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSIzLjUiIGN5PSItNiIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41NSIvPgogIDxjaXJjbGUgY3g9Ii0zLjUiIGN5PSItNiIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41NSIvPgo8L2c+CjxnIGlkPSJ0dWxwIj4KICA8bGluZSB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iLTE4IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjgiLz4KICA8cGF0aCBkPSJNMCwtMTAgQy01LC0xNCAtNiwtMjIgMCwtMjAgQzYsLTIyIDUsLTE0IDAsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjgiLz4KICA8cGF0aCBkPSJNLTMsLTEwIEMtOCwtMTMgLTgsLTggLTMsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPHBhdGggZD0iTTMsLTEwIEM4LC0xMyA4LC04IDMsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CjwvZz4KPGcgaWQ9Im1hY2EiPgogIDxwYXRoIGQ9Ik0xLC0xNiBDMywtMjAgNywtMTggNSwtMTUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTS0xLC05IEMtNywtMTIgLTksLTQgLTgsNCBDLTcsMTIgLTMsMTYgMCwxNiBDMywxNiA3LDEyIDgsNCBDOSwtNCA3LC0xMiAxLC05IEMwLC02IDAsLTYgLTEsLTlaIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNzUiLz4KICA8cGF0aCBkPSJNMSwtOSBDNCwtMTMgOCwtMTAgNywtNyBDNSwtNCAyLC03IDEsLTlaIiBmaWxsPSIjMDIwMjA4Ii8+CjwvZz4KPGcgaWQ9ImZpbG0iPgogIDxyZWN0IHg9Ii0xMSIgeT0iLTE0IiB3aWR0aD0iMjIiIGhlaWdodD0iMjgiIHJ4PSIxIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjgiLz4KICA8cmVjdCB4PSItNyIgeT0iLTEwIiB3aWR0aD0iMTQiIGhlaWdodD0iMjAiIHJ4PSIwLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNSIvPgogIDxyZWN0IHg9Ii0xMyIgeT0iLTExIiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSItMTMiIHk9Ii0zLjUiIHdpZHRoPSIyLjUiIGhlaWdodD0iMy41IiByeD0iMC4zIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNyIvPgogIDxyZWN0IHg9Ii0xMyIgeT0iNCIgd2lkdGg9IjIuNSIgaGVpZ2h0PSIzLjUiIHJ4PSIwLjMiIGZpbGw9ImN1cnJlbnRDb2xvciIgb3BhY2l0eT0iMC43Ii8+CiAgPHJlY3QgeD0iMTAuNSIgeT0iLTExIiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSIxMC41IiB5PSItMy41IiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSIxMC41IiB5PSI0IiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KPC9nPgo8ZyBpZD0iZXQiPgogIDxjaXJjbGUgY3g9Ii0xMCIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIvPgogIDxjaXJjbGUgY3g9IjEwIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC43Ii8+CiAgPHBhdGggZD0iTS0xMCw4IEwwLC0xIEwxMCw4IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMCwtMSBMLTIsLTciIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIgZmlsbD0ibm9uZSIvPgogIDxsaW5lIHgxPSItNCIgeTE9Ii03IiB4Mj0iMiIgeTI9Ii03IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciLz4KICA8Y2lyY2xlIGN4PSItMiIgY3k9Ii0xMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjc1Ii8+CiAgPHBhdGggZD0iTS0yLC05IEwtNSwtNyBMMCwtNyBaIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNjUiLz4KICA8ZWxsaXBzZSBjeD0iNiIgY3k9Ii0yIiByeD0iMyIgcnk9IjQiIGZpbGw9ImN1cnJlbnRDb2xvciIgb3BhY2l0eT0iMC43Ii8+CjwvZz4KPGcgaWQ9ImNvbnN0Ij4KICA8Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iMS40IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9Ii05IiByPSIxLjAiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxjaXJjbGUgY3g9IjI0IiBjeT0iNSIgcj0iMS40IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8Y2lyY2xlIGN4PSIxMSIgY3k9IjE1IiByPSIxLjAiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxjaXJjbGUgY3g9Ii01IiBjeT0iMTgiIHI9IjEuMCIgZmlsbD0iY3VycmVudENvbG9yIi8+CiAgPGxpbmUgeDE9IjAiIHkxPSIwIiB4Mj0iMTYiIHkyPSItOSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC40Ii8+CiAgPGxpbmUgeDE9IjE2IiB5MT0iLTkiIHgyPSIyNCIgeTI9IjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNCIvPgogIDxsaW5lIHgxPSIyNCIgeTE9IjUiIHgyPSIxMSIgeTI9IjE1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjQiLz4KICA8bGluZSB4MT0iMTEiIHkxPSIxNSIgeDI9Ii01IiB5Mj0iMTgiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNCIvPgo8L2c+CjxnIGlkPSJpbmYiPgogIDxwYXRoIGQ9Ik0wLDAgQzQsLTggMTQsLTggMTQsMCBDMTQsOCA0LDggMCwwIEMtNCwtOCAtMTQsLTggLTE0LDAgQy0xNCw4IC00LDggMCwwWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC44Ii8+CjwvZz4KPGcgaWQ9Imx1YSI+CiAgPHBhdGggZD0iTTYsLTExIEExMywxMyAwIDEgMCA2LDExIEE5LDkgMCAxIDEgNiwtMTFaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9nPgo8ZyBpZD0iZXN0cmVsYSI+CiAgPHBhdGggZD0iTTAsLTkgTDEuMiwtMS4yIEw5LDAgTDEuMiwxLjIgTDAsOSBMLTEuMiwxLjIgTC05LDAgTC0xLjIsLTEuMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L2c+CjwvZGVmcz4KCjwhLS0gQk9SQk9MRVRBIChsb2dvIOKAlCBtYWlzIGluc3TDom5jaWFzKSAtLT4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAwLDE4MCkgc2NhbGUoMS42KSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTciLz4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjIwLDUyMCkgcm90YXRlKDgpIHNjYWxlKDEuNCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg1MCwxMzApIHJvdGF0ZSgtNikgc2NhbGUoMS4yKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLDcyMCkgcm90YXRlKDEwKSBzY2FsZSgxLjUpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNiIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3ODAsODQwKSByb3RhdGUoLTQpIHNjYWxlKDEuMykiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0MCw5MDApIHJvdGF0ZSg1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5NTAsNTYwKSByb3RhdGUoLTEwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzODAsMzgwKSByb3RhdGUoMTIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY4MCw3MCkgcm90YXRlKC04KSBzY2FsZSgxLjMpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgoKPCEtLSBGT0xIQVMgLS0+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNTAsODApIHJvdGF0ZSgzNSkgc2NhbGUoMS4yKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTYiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkwLDMxMCkgcm90YXRlKC0yNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDczMCwyODApIHJvdGF0ZSg1MCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTYiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwMCw2NjApIHJvdGF0ZSgtNDApIHNjYWxlKDEuMykiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4NzAsNDMwKSByb3RhdGUoMjApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNjAsNTYwKSByb3RhdGUoLTYwKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjYwLDc2MCkgcm90YXRlKDMwKSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAsODkwKSByb3RhdGUoLTE1KSBzY2FsZSgxLjIpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQwLDgyMCkgcm90YXRlKDQ1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUwLDE1MCkgcm90YXRlKC0zNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkxMCw2OTApIHJvdGF0ZSgxOCkgc2NhbGUoMS4xKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTQiLz4KCjwhLS0gUkFNT1MgLS0+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ4MCwyMjApIHJvdGF0ZSgtMTIpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2MCw0NjApIHJvdGF0ZSgxOCkgc2NhbGUoMS4xKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjcmFtbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODIwLDY1MCkgcm90YXRlKC0zMCkgc2NhbGUoMS4zKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjcmFtbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTgwLDM3MCkgcm90YXRlKDQwKSBzY2FsZSgxLjApIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMTAsODEwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcwLDU5MCkgcm90YXRlKDIyKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3NTAsOTUwKSByb3RhdGUoLTE4KSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xMyIvPgoKPCEtLSBHRU9Nw4lUUklDTyBFU09Uw4lSSUNPIC0tPgo8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcyMCw5MCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjaGV4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAsNTgwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg5MCw4OTApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI2hleCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDQwLDUwMCkgcm90YXRlKDE1KSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xMiIvPgo8dXNlIGhyZWY9IiN0cmkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQwMCw0NDApIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI3RyaSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzgwLDUwMCkgcm90YXRlKDEwKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMiIvPgo8dXNlIGhyZWY9IiN0cmkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzMCw3NTApIHJvdGF0ZSgtMjApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2ZsdiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTUwLDEzMCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTIiLz4KPHVzZSBocmVmPSIjZmx2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDAsOTEwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMSIvPgo8dXNlIGhyZWY9IiNmbHYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg1MCwzNTApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjExIi8+Cjx1c2UgaHJlZj0iI2luZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTQwLDMwMCkgcm90YXRlKC0xNSkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MCwxNTApIHJvdGF0ZSgyMCkgc2NhbGUoMS4yKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTIiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0ODAsOTYwKSByb3RhdGUoOCkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTIiLz4KCjwhLS0gTFVBIC0tPgo8dXNlIGhyZWY9IiNsdWEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxMCwxNDApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI2x1YSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTAwLDIwMCkgcm90YXRlKDMwKSBzY2FsZSgxLjApIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNsdWEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLDQ1MCkgcm90YXRlKC0yMCkgc2NhbGUoMS4yKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjwhLS0gRVNUUkVMQVMgLS0+Cjx1c2UgaHJlZj0iI2VzdHJlbGEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwMCw1MCkgc2NhbGUoMC43KSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTciLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTkwLDQ0MCkgc2NhbGUoMC42KSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzAsNjgwKSBzY2FsZSgwLjgpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNiIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MDAsNjAwKSBzY2FsZSgwLjUpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MjAsNTIwKSBzY2FsZSgwLjQpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MjAsMjkwKSBzY2FsZSgwLjYpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNSIvPgoKPCEtLSBBTEVBVMOTUklPIC0tPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NjAsMjAwKSBzY2FsZSgxLjIpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMDAsNjUwKSByb3RhdGUoOCkgc2NhbGUoMS4xKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjdHVscCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTAwLDc0MCkgcm90YXRlKC01KSBzY2FsZSgxLjMpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzAsODUwKSByb3RhdGUoMTIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEzIi8+Cgo8dXNlIGhyZWY9IiNtYWNhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0ODAsNzUwKSBzY2FsZSgxLjIpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNtYWNhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDAsMjMwKSByb3RhdGUoMTIpIHNjYWxlKDEuMSkiIGNvbG9yPSIjOWI2ZGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI21hY2EiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc1MCw0NDApIHJvdGF0ZSgtNSkgc2NhbGUoMS4wKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjx1c2UgaHJlZj0iI2ZpbG0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc1MCwzOTApIHJvdGF0ZSg1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNmaWxtIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNzAsOTcwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2ZpbG0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMCwzOTApIHJvdGF0ZSgxNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjx1c2UgaHJlZj0iI2V0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5MjAsNjApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2V0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NSw5OTApIHJvdGF0ZSg1KSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgoKPHVzZSBocmVmPSIjY29uc3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI4MCwxMDApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2NvbnN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2ODAsOTcwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNjb25zdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTUwLDc2MCkgcm90YXRlKDMwKSBzY2FsZSgxLjEpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNjb25zdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTgwLDI4MCkgcm90YXRlKC0xNSkgc2NhbGUoMS4wKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTQiLz4KCjwhLS0gRUFTVEVSIEVHR1Mg4oCUIG5vbWVzIHNhaW5kbyBkZSBkZW50cm8vYW8gbGFkbyBkZSBmaWd1cmFzIC0tPgoKPHRleHQgeD0iMTU1IiB5PSI0MzUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNkYmJmZmYiIG9wYWNpdHk9IjAuMzQiIHRyYW5zZm9ybT0icm90YXRlKC0xOCwxNTUsNDM1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPklzaXM8L3RleHQ+Cjx0ZXh0IHg9IjQ5MCIgeT0iMjQwIiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZDRiMGZmIiBvcGFjaXR5PSIwLjMzIiB0cmFuc2Zvcm09InJvdGF0ZSg3LDQ5MCwyNDApIiBsZXR0ZXItc3BhY2luZz0iMyI+UGlsYXI8L3RleHQ+Cjx0ZXh0IHg9IjQ1OCIgeT0iNjcwIiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZGJiZmZmIiBvcGFjaXR5PSIwLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgtNyw0NTgsNjcwKSIgbGV0dGVyLXNwYWNpbmc9IjMiPk1hcmlhPC90ZXh0Pgo8dGV4dCB4PSIyNjIiIHk9IjUwOCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2NjYThmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoMjAsMjYyLDUwOCkiIGxldHRlci1zcGFjaW5nPSIzIj5NYWlyaW08L3RleHQ+Cjx0ZXh0IHg9IjY4NSIgeT0iODM1IiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZGJiZmZmIiBvcGFjaXR5PSIwLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgtNCw2ODUsODM1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkJhYmk8L3RleHQ+Cjx0ZXh0IHg9Ijc4IiB5PSI3NDUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNkNGIwZmYiIG9wYWNpdHk9IjAuMzMiIHRyYW5zZm9ybT0icm90YXRlKC0yMiw3OCw3NDUpIiBsZXR0ZXItc3BhY2luZz0iMyI+Sm9hbzwvdGV4dD4KPHRleHQgeD0iNTQ4IiB5PSI4OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTMsNTQ4LDg4KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkZyYW5jbzwvdGV4dD4KPHRleHQgeD0iMTE4IiB5PSI0NzUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNjY2E4ZmYiIG9wYWNpdHk9IjAuMzMiIHRyYW5zZm9ybT0icm90YXRlKC0xMCwxMTgsNDc1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkp1bGlhPC90ZXh0Pgo8dGV4dCB4PSIzNDUiIHk9Ijg3OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTgsMzQ1LDg3OCkiIGxldHRlci1zcGFjaW5nPSIzIj5UYXRhPC90ZXh0Pgo8dGV4dCB4PSI3MDUiIHk9IjU4OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2Q0YjBmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoLTYsNzA1LDU4OCkiIGxldHRlci1zcGFjaW5nPSIzIj5EdWRhPC90ZXh0Pgo8dGV4dCB4PSI0MTUiIHk9IjMxNSIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyLDQxNSwzMTUpIiBsZXR0ZXItc3BhY2luZz0iMyI+TWF5Y29uPC90ZXh0Pgo8dGV4dCB4PSI0NjgiIHk9Ijg5NSIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2NjYThmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoOSw0NjgsODk1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkNocmlzPC90ZXh0Pgo8dGV4dCB4PSI2MjIiIHk9IjU0MCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE2LDYyMiw1NDApIiBsZXR0ZXItc3BhY2luZz0iMyI+TGlhPC90ZXh0PgoKPCEtLSBFbGVtZW50b3MgZXh0cmFzIG5hIHpvbmEgdmlzw612ZWwgZXNxdWVyZGEvY2VudHJvIC0tPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjAsNjAwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4MCw2MjApIHJvdGF0ZSg2KSBzY2FsZSgxLjApIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwLDIwMCkgcm90YXRlKDQyKSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDIwLDc1MCkgcm90YXRlKC0zMCkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU1LDQ3MCkgcm90YXRlKDE4KSBzY2FsZSgxLjIpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODAsNjgwKSByb3RhdGUoMTQpIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY0MCw0ODApIHJvdGF0ZSgtMjIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjOWI2ZGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI2hleCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAwLDU1MCkgc2NhbGUoMS4wKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTYwLDcwMCkgc2NhbGUoMC43KSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbHVhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MDAsOTIwKSByb3RhdGUoMTUpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI3R1bHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU4MCw4MzApIHJvdGF0ZSgtNikgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNDAsMjAwKSByb3RhdGUoMTApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2NvbnN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NTAsMzgwKSBzY2FsZSgxLjApIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8L3N2Zz4="),
    linear-gradient(125deg, rgba(255,255,255,.5) 0%, transparent 22%, transparent 78%, rgba(130,90,220,.07) 100%),
    radial-gradient(ellipse 140% 55% at 50% 0%, color-mix(in srgb,var(--accent) 14%,transparent) 0%, transparent 60%),
    radial-gradient(ellipse 130% 50% at 50% 100%, color-mix(in srgb,var(--accent) 10%,transparent) 0%, transparent 55%),
    linear-gradient(180deg, #fefdff 0%, #faf8ff 45%, #f0ebff 100%);
  background-size:500px 500px, auto, auto, auto, auto;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
@media(min-width:480px){
  #phone{
    box-shadow:0 0 0 1px rgba(120,110,200,.12),0 40px 100px rgba(0,0,0,.9);
    border-radius:16px;margin:auto;height:min(100svh,900px);
  }
  body{padding:20px;align-items:center}
}
header{
  /* 2026-08-10 (Pilar, ao vivo: "o head do celular tá cortando a Linka") --
     header não considerava env(safe-area-inset-top) (notch/status bar),
     diferente de #criar-bg/#chat-conv-bg/.csp-s60 e outros que já usam
     esse padrão. Numa tela com notch, o conteúdo do header (logo, ícones)
     nascia colado no topo físico do aparelho, atrás/embaixo do recorte do
     SO. height/min-height crescem pela mesma margem que o padding-top
     ganha (box-sizing:border-box global, linha 65) -- a área de conteúdo
     visível continua exatamente --hh, só desce pra começar depois do
     notch; o FUNDO do header (--glass-tint, ver fix de tema em skins.js)
     agora pinta até o topo de verdade, sem faixa sem cor entre o notch e
     o início do header. */
  height:calc(var(--hh) + env(safe-area-inset-top));
  min-height:calc(var(--hh) + env(safe-area-inset-top));
  display:flex;align-items:center;justify-content:space-between;
  padding:env(safe-area-inset-top) 20px 0;
  border-bottom:1px solid rgba(153,102,238,.25);
  box-shadow:0 1px 12px rgba(100,60,180,.10);
  flex-shrink:0;z-index:50;position:relative;
}
header{
  background:var(--glass-tint);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom-color:var(--glass-edge);
}
/* Cabeçalho responsivo ao sentido do scroll. O espaço vertical muda junto
   com o estado para que o feed realmente ganhe área útil; a faixa compacta
   continua usando os tokens da skin, sem introduzir uma cor fixa. */
#phone>.app-header{
  display:block;overflow:hidden;
  transition:height .28s cubic-bezier(.22,.75,.2,1),
             min-height .28s cubic-bezier(.22,.75,.2,1),
             border-color .2s ease,box-shadow .2s ease;
}
.app-header-main,.app-header-ambient{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:env(safe-area-inset-top) 20px 0;
  transition:opacity .18s ease,transform .28s cubic-bezier(.22,.75,.2,1);
}
.app-header-ambient{
  justify-content:center;pointer-events:none;
  color:color-mix(in srgb,var(--text) 76%,var(--accent));
  font-family:'Playfair Display',serif;font-size:12px;font-style:italic;
  letter-spacing:.08em;text-transform:lowercase;
  opacity:0;transform:translateY(7px);
}
.app-header--full .app-header-main{opacity:1;transform:translateY(0);pointer-events:auto}
.app-header--full .app-header-ambient{opacity:0;transform:translateY(7px)}
#phone>.app-header--compact{
  height:calc(34px + env(safe-area-inset-top));
  min-height:calc(34px + env(safe-area-inset-top));
  box-shadow:0 5px 22px color-mix(in srgb,var(--accent) 12%,transparent);
}
.app-header--compact .app-header-main{opacity:0;transform:translateY(-14px);pointer-events:none}
.app-header--compact .app-header-ambient{opacity:1;transform:translateY(0)}
#phone>.app-header--hidden{height:0;min-height:0;border-bottom-color:transparent;box-shadow:none}
.app-header--hidden .app-header-main,
.app-header--hidden .app-header-ambient{opacity:0;transform:translateY(-18px);pointer-events:none}
@media (prefers-reduced-motion:reduce){
  #phone>.app-header,.app-header-main,.app-header-ambient{transition-duration:.01ms}
}
.logo{
  font-size:17px;font-weight:700;letter-spacing:.03em;
  font-family:'Playfair Display',serif;
  position:relative;display:inline-flex;align-items:center;
  background:linear-gradient(120deg,#c8b0ee 0%,#9966ee 45%,#c8b0ee 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:logoShimmer 5s ease-in-out infinite;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
@keyframes logoShimmer{0%,100%{background-position:0% 0%}50%{background-position:100% 0%}}
.linka-pseudo{
  font-family:'Playfair Display',serif;font-weight:700;
  letter-spacing:.03em;
  /* --lp-bg setado via JS/CSSOM por instância (_htmlHandle, utils.js) com
     o gradiente na cor da praça -- fallback aqui é o roxo padrão da Linka
     pra qualquer .linka-pseudo que não passe por _htmlHandle. Migração
     CSP style-src 2026-08-02: era um style="" com "background-image"
     (nunca o atalho "background", ver comentário grande em utils.js sobre
     por que isso quebraria o background-clip:text). */
  background-image:var(--lp-bg, linear-gradient(120deg,#c8b0ee 0%,#9966ee 45%,#c8b0ee 100%));
  background-size:200% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:logoShimmer 5s ease-in-out infinite;
  /* 2026-07-30 (Pilar, enfática: "MUITO mais translúcidos do que estão
     hoje"): handle era opacity:1 (texto cheio, só a cor do próprio
     gradiente dava a sensação de "leveza"). Reduzido bem mais do que um
     ajuste cosmético normal -- opacity direto no span, funciona limpo
     junto de background-clip:text (a animação de shimmer continua
     rodando por cima, só a camada inteira fica mais discreta). Se em
     algum contexto específico isso ficar ilegível demais (ex: sobre
     fundo muito claro), ajustar ali, não aqui -- este é o padrão base
     de TODA a Linka (todo handle vem de _htmlHandle, utils.js). */
  opacity:.42;
}
/* Handle clicável (praças lab/vox/terra, abre wiki card) -- cursor:pointer
   era inline condicional; migração CSP style-src 2026-08-02 -- classe em
   vez de style="". */
.linka-pseudo.wiki-ok{cursor:pointer}
/* Utilitário genérico "começa escondido" (equivalente ao .cv-hidden do
   visualizador de Contos, ver notificacoes-borboleta.js -- mesmo padrão,
   nome neutro pra reuso em qualquer tela). Migração CSP style-src
   2026-08-02: substitui style="display:none" inline; toggles depois
   continuam via .style.display=... direto (CSSOM, já CSP-safe). */
.d-none{display:none}
.logo b{font-style:normal}

@keyframes bfloat{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(-2px) scaleX(.92)}}
.hdr-center{
  position:absolute;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--dim);pointer-events:none;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.hdr-right{display:flex;align-items:center;gap:12px}
.icon-btn{
  background:color-mix(in srgb,var(--dim) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--dim) 15%,transparent);
  cursor:pointer;color:var(--dim);
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  transition:color .15s,background .15s,border-color .15s;
}
.icon-btn:active{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 32%,transparent);color:var(--accent)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.notif-bell{transition:filter .3s}
.notif-bell.active{
  animation:bellNeon 2.4s ease-in-out infinite, bellSwing .5s ease-in-out 2;
}
.notif-bell.active path{
  stroke:url(#bell-neon-grad);
}
@keyframes bellNeon{
  0%,100%{filter:drop-shadow(0 0 2px rgba(153,102,238,.5))}
  50%{filter:drop-shadow(0 0 7px rgba(200,160,255,.85)) drop-shadow(0 0 14px rgba(153,102,238,.4))}
}
@keyframes bellSwing{0%,100%{transform:rotate(0)}30%{transform:rotate(-10deg)}70%{transform:rotate(10deg)}}
/* Pedido da Pilar 2026-07-23: ícone de olho ("quem te viu") -- mesmo
   tratamento visual do sino quando há novidade, sem o gradiente próprio
   do sino (que depende de #bell-neon-grad, só definido no SVG do sino). */
.notif-eye{transition:filter .3s}
.notif-eye.active{
  color:var(--accent);
  animation:eyeNeon 2.4s ease-in-out infinite;
}
@keyframes eyeNeon{
  0%,100%{filter:drop-shadow(0 0 2px var(--accent-glow,rgba(153,102,238,.5)))}
  50%{filter:drop-shadow(0 0 7px var(--accent-glow,rgba(200,160,255,.85))) drop-shadow(0 0 14px var(--accent-glow,rgba(153,102,238,.4)))}
}
#hexBtn{position:relative;width:34px;height:34px;cursor:pointer}
#hexBtn svg{width:34px;height:34px}
#main{flex:1;overflow:hidden;position:relative}
.pane{
  position:absolute;inset:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--nh)+20px);
  display:none;
}
.pane.on{display:block}

/* PERFIL VISITADO + SKIN
   _skinsAplicarNoPerfil escopa a skin em #po-bg. Antes só --accent e o
   gradiente chegavam visualmente à tela; cards, avatar e pills continuavam
   usando --surf/--surf2 globais (quase brancos no tema claro), quebrando o
   ambiente no meio. Mapeamos somente tokens de superfície dentro do perfil.
   Texto/ícones permanecem nos tokens do tema para preservar contraste. */
html[data-tema="escuro"] #po-bg.po-skin-ativa{
  --surf:var(--surface,color-mix(in srgb,var(--accent) 16%,#0f0f1c));
  --surf1:var(--surface,color-mix(in srgb,var(--accent) 20%,#131322));
  --surf2:var(--surface-2,color-mix(in srgb,var(--accent) 24%,#16162a));
  --surf3:var(--surface-2,color-mix(in srgb,var(--accent) 28%,#1e1e33));
  --faint:color-mix(in srgb,var(--accent) 24%,#1e1e33);
  --border:color-mix(in srgb,var(--accent) 24%,rgba(210,205,245,.12));
  --glass-tint:color-mix(in srgb,var(--accent) 34%,rgba(14,10,24,.88));
  --glass-edge:color-mix(in srgb,var(--accent) 30%,rgba(220,210,255,.18));
}
html[data-tema="claro"] #po-bg.po-skin-ativa{
  --surf:color-mix(in srgb,var(--accent) 14%,#f7f5fb);
  --surf1:color-mix(in srgb,var(--accent) 18%,#f4f1f9);
  --surf2:color-mix(in srgb,var(--accent) 22%,#efebf7);
  --surf3:color-mix(in srgb,var(--accent) 26%,#e9e4f2);
  --faint:color-mix(in srgb,var(--accent) 22%,#d8d3e5);
  --border:color-mix(in srgb,var(--accent) 22%,rgba(20,16,40,.11));
  --glass-tint:color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.86));
  --glass-edge:color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.65));
}
html[data-tema="descanso"] #po-bg.po-skin-ativa{
  --surf:color-mix(in srgb,var(--accent) 14%,#faf8ff);
  --surf1:color-mix(in srgb,var(--accent) 18%,#f3effd);
  --surf2:color-mix(in srgb,var(--accent) 22%,#eee9fb);
  --surf3:color-mix(in srgb,var(--accent) 26%,#e6e0f7);
  --faint:color-mix(in srgb,var(--accent) 22%,#d9d2ef);
  --border:color-mix(in srgb,var(--accent) 22%,rgba(60,40,120,.11));
  --glass-tint:color-mix(in srgb,var(--accent) 22%,rgba(250,248,255,.86));
  --glass-edge:color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.6));
}
nav{
  height:var(--nh);min-height:var(--nh);
  display:flex;align-items:stretch;
  background:var(--glass-tint);
  border-top:1px solid var(--glass-edge);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  padding-bottom:env(safe-area-inset-bottom);
  flex-shrink:0;z-index:50;
}
.nb{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
  cursor:pointer;border:none;background:none;
  color:var(--dim);font-size:9.5px;font-weight:500;
  /* AJUSTE 2026-08-02 (decisão delegada pela Pilar à noite): family já era
     Inter nos dois níveis de navegação (body herda pra .nb, .p-pill ganhou
     Inter explícito no commit b0a1f75) -- não havia divergência real de
     família, só a sensação de "não bater". Único delta real encontrado:
     letter-spacing .5px aqui vs .3px em .p-pill. Alinhado pro valor que a
     Pilar já aprovou ao vivo nas abas de praça (.3px), pra bottom-nav e
     abas de praça terem exatamente o mesmo tratamento tipográfico de
     espaçamento. text-transform:uppercase mantido só aqui -- rótulos do
     nav são palavra única fixa (HOME/CHAT/PRAÇAS/CÍRCULOS/LINKAR), já as
     pills de praça carregam nomes variáveis de praça em Title Case; forçar
     uppercase lá arriscaria estourar a largura fixa de 5 itens por fileira
     com nomes acentuados/longos -- não mexido sem ela ver o resultado. */
  letter-spacing:.3px;padding:0;transition:color .12s;
  text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
/* Chip circular translúcido atrás do ícone — mesma receita do anexo/mic do
   chat (que o Pilar curtiu), pra parar de parecer 4 símbolos soltos e sem
   peso boiando na barra. */
.nb-ico{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--dim) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--dim) 15%,transparent);
  transition:background .15s,border-color .15s;
}
.nb.on .nb-ico{
  background:linear-gradient(135deg,color-mix(in srgb,#c8b0ee 20%,transparent) 0%,color-mix(in srgb,var(--accent) 24%,transparent) 100%);
  border-color:color-mix(in srgb,var(--accent) 38%,transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 48%,transparent);
}
.nb svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.82;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.nb.on svg{opacity:1;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 75%,transparent))}
.nb.on{color:var(--accent)}
.nb-criar svg circle{fill:var(--accent);stroke:var(--accent)}
.nb-criar{color:var(--accent)}
.nb-yuan{color:var(--dim)}
.nb-yuan.on{color:var(--yuan)}
.s-title{
  font-size:10px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--dim);padding:16px 14px 7px;
  font-family:'SF Mono','Fira Code',monospace;
}
.empty{text-align:center;color:var(--dim);font-size:13px;padding:44px 28px;line-height:1.8}
/* Estado vazio da lista de sessões (Configurações > Segurança) -- valores
   diferentes do .empty genérico acima, por isso classe própria em vez de
   reaproveitar (evita mudar o visual). Migração CSP style-src 2026-08-02. */
.s-sessoes-empty{color:var(--dim);font-size:14px;text-align:center;padding:24px 0}
.inp{
  width:100%;padding:11px 13px;border-radius:var(--r);
  border:1px solid var(--border);background:var(--surf2);
  color:var(--text);font-size:14px;margin-bottom:10px;font-family:inherit;
  transition:border-color .15s;
}
.inp:focus{outline:none;border-color:rgba(160,155,220,.35)}
/* Redesign 2026-08-01 (mockup enviado pela Pilar, "referência definitiva,
   não mais interpretação livre"): pills de largura automática (por
   conteúdo, não mais coluna fixa de grid), ícone de linha + rótulo.
   Troca o grid de colunas iguais (auto-fill/minmax, usado até a rodada
   anterior) por flex -- cada pill agora tem só a largura que o próprio
   ícone+texto pedem ("Vox" volta a ser mais estreita que "Circles", só
   que de propósito dessa vez, é assim que ela desenhou). #feed-lex-toggle
   (busca) virou o último pill desta mesma fileira -- ver montarPills() em
   feed-nucleo.js, que monta esse botão junto com as pills agora, não mais
   como elemento estático flutuante.

   CORREÇÃO 2026-08-01 (Pilar, reenvio do mockup): a 1ª leitura desta tela
   (flex-wrap:wrap, ~2 linhas fixas) estava ERRADA -- ela confirmou que o
   ">" na ponta direita do mockup era indicador de scroll horizontal, não
   quebra de linha. Virou UMA faixa só (nowrap + overflow-x) -- ver
   .pill-scroll acima.

   REVERSÃO FINAL 2026-08-01 (Pilar, mesmo dia): voltou atrás de novo --
   NÃO quer mais faixa única rolável pras praças. Quer 2 fileiras-cápsula:
   cada FILEIRA INTEIRA arredondada como uma barra contínua (não cada pill
   individualmente, como no desenho de cima), cabendo TODAS as praças + a
   lupa de busca sem nenhum scroll, tudo visível de uma vez, distribuído
   nas 2 linhas. Vale em TODOS os lugares que mostram essa lista de
   praças -- #praca-pills (seletor de Spaces da Home, montarPills() em
   feed-nucleo.js), #po-filter-bar (abas do perfil visitado,
   montarFilterBar() em long-press-perfil.js), #yuan-proprio-pills
   (cabeçalho do próprio perfil dentro do Home, _montarYuanProprioPills()
   em studio-home-yuan.js) e #arv-pills (seletor de praça de "Minha
   Árvore" -- feature inteira removida em 2026-08-03, task #302/#351,
   este comentário fica só como histórico do fix original) -- os 2
   últimos ainda estavam em .pill-scroll até serem migrados em 2026-08-01
   (achado real da Pilar: "não é só Home, minha própria página de
   perfil também tá errada" + "existe mais algum lugar?"). .pill-scroll
   continua existindo só pra outros usos que realmente querem faixa
   única rolável, não essa lista de praças. .pill-scroll-wrap/
   .pill-scroll-more (arrow-indicator do desenho anterior) removidos --
   ficaram órfãos, ninguém mais referencia. Primeira versão do visual --
   Pilar avisou que ajusta proporção/estilo depois de ver ao vivo. */
.pill-rows{display:flex;flex-direction:column;gap:6px;padding:9px 12px}
.pill-row{
  display:flex;align-items:stretch;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--glass-tint);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.pill-scroll{
  display:flex;flex-wrap:nowrap;align-items:center;
  gap:6px 6px;padding:9px 12px;flex-shrink:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.pill-scroll::-webkit-scrollbar{display:none}
/* Botão de arquétipos (borboleta) antigo -- órfão desde o redesign acima
   (ver comentário em arquetipos-overlay.js): a função virou long-press em
   qualquer pill de conteúdo (_pillLongPressInit, feed-nucleo.js). Regra
   deixada aqui sem uso, baixo risco, remove numa limpeza futura. */
.arq-icon-btn{
  justify-self:center;align-self:center;
  width:32px;height:32px;border-radius:50%;
  background:transparent;border:1.5px solid color-mix(in srgb, var(--arq-cor,var(--accent)) 45%, transparent);
  font-size:15px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
  animation:arqPulse 2.4s ease-in-out infinite;
}
@keyframes arqPulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--arq-cor,var(--accent)) 50%, transparent);transform:scale(1);}
  50%{box-shadow:0 0 9px 3px color-mix(in srgb, var(--arq-cor,var(--accent)) 50%, transparent);transform:scale(1.06);}
}
/* Overlay dos 18 arquétipos (arquetipos-overlay.js) -- migração CSP
   script-src/style-src 2026-08-02: overlay.style.cssText e onclick=""
   inline trocados por classes reais + data-svars (--arq-tc) pra cor
   dinâmica por praça/arquétipo. */
.arq-overlay{
  position:fixed;inset:0;z-index:8000;overflow-y:auto;
  background:rgba(4,4,10,0.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:0 0 60px 0;opacity:0;transition:opacity .3s ease;
}
.arq-hdr{
  position:sticky;top:0;z-index:2;background:rgba(4,4,10,0.9);backdrop-filter:blur(10px);
  padding:16px 20px 12px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.arq-hdr-title{font-size:18px;font-weight:700;color:var(--arq-tc,#9966ee)}
.arq-hdr-sub{font-size:12px;color:rgba(255,255,255,0.45);margin-top:2px}
.arq-close-btn{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:8px;color:#fff;padding:8px 14px;font-size:13px;cursor:pointer}
.arq-card{
  margin:16px 16px 0;border-radius:16px;padding:22px;
  background:rgba(255,255,255,0.04);backdrop-filter:blur(6px);
  border:1px solid var(--arq-border,rgba(255,255,255,.15));
}
.arq-card-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.arq-card-emoji{font-size:26px}
.arq-card-label{font-size:17px;font-weight:700;color:var(--arq-tc,#9966ee)}
.arq-card-pracas{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px}
.arq-card-desc{font-size:13.5px;line-height:1.75;color:rgba(255,255,255,0.82);white-space:pre-line}
.p-pill{
  /* REDESIGN 2026-08-01 (Pilar, reversão pra 2 fileiras-cápsula): o pill
     deixou de ser uma cápsula individual flutuando com gap -- agora é um
     SEGMENTO dentro da barra contínua (.pill-row já é a cápsula, ver
     acima). Largura igual entre os segmentos de uma fileira (flex:1),
     não mais largura automática por conteúdo -- é o que permite os 5
     itens de cada linha caberem sem scroll em qualquer praça com nome
     mais longo. Divisor fino entre segmentos (border-right) no lugar da
     borda própria de cada pill antiga. */
  display:flex;flex:1 1 0;min-width:0;align-items:center;justify-content:center;gap:4px;
  padding:8px 4px;
  /* Reset explícito de UA-stylesheet de <button> (o botão de busca,
     #feed-lex-toggle, é um <button> real -- os outros pills são <div>,
     que já nascem sem border/background próprios, mas o botão precisa
     desse reset ou herda moldura/fundo cinza nativo por cima do que a
     .pill-row já desenha). */
  background:transparent;border:none;
  border-right:1px solid var(--border);
  /* CORREÇÃO 2026-08-02 (decisão de tipografia adiada anteriormente):
     peso 700 sem letter-spacing real virou peso 500 (600 no .on) +
     letter-spacing .3px -- essa parte ficou boa e não mudou.
     AJUSTE 2026-08-02 #2 (Pilar, direto: "não gosto da fonte do jeito
     que tá", "fica feia" -- não era peso/espaçamento, era a família mono
     em si): SF Mono/Fira Code tem cara de "código", errado pro tom das
     abas de praça (são navegação/UI, não metadado técnico tipo handle/
     timestamp). Trocado pro sans-serif principal do app (mesma pilha do
     body, Inter) -- peso e letter-spacing continuam intactos, só a
     família mudou. Mono continua correto onde JÁ era usado antes dessa
     rodada (handle real, .tile-dizer-pseudo/.yuan-meta-name/.ypc-lbl) --
     essa correção é só das pills de praça. */
  font-size:9.5px;font-weight:500;letter-spacing:.3px;
  color:var(--dim);cursor:pointer;transition:background .2s ease,color .2s ease,font-weight .2s ease;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  white-space:nowrap;
  /* Long-press (_pillLongPressInit, feed-nucleo.js) segura o pill sem
     disparar o menu de seleção/copiar nativo do Android -- segunda
     camada de defesa, mesma técnica de .msg-bubble no chat. */
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.p-pill:last-child{border-right:none}
/* FIX 2026-08-02 (Pilar, item 2 batch nova): overflow:hidden do .pill-row
   (acima) foi removido -- ele cortava o glow do nudge (_guiaNudgePulse)
   de qualquer pill que não estivesse bem no centro da fileira, deixando
   o "shimmer" mal enquadrado (metade visível, metade sumindo na borda
   arredondada) e mais fraco do que devia. Sem overflow:hidden no
   container, os cantos quadrados de um pill.on nas pontas (1º/último)
   ficariam vazando por fora do capsule arredondado da fileira -- por
   isso o próprio pill nas pontas ganha o raio que a fileira tinha antes,
   preservando o visual de cápsula contínua sem precisar clipar os filhos. */
.p-pill:first-child{border-top-left-radius:999px;border-bottom-left-radius:999px}
.p-pill:last-child{border-top-right-radius:999px;border-bottom-right-radius:999px}
/* FIX 2026-08-02 (Pilar, pedido dentro da auditoria de tipografia): ícone
   sempre var(--dim) (cinza neutro), mesmo cada pill já tendo --pc:<cor da
   praça> inline (montarPills()/mkPill, feed-nucleo.js -- só o preenchimento
   do estado .on usava essa cor, o ícone nunca). Ícone agora nasce tintado
   na cor da própria praça (fallback --dim só pro botão de busca, que não
   tem --pc); estado ativo continua virando branco sólido, igual antes. */
.p-pill-ico{width:12px;height:12px;flex-shrink:0;opacity:.85;color:var(--pc,var(--dim));transition:opacity .2s ease,color .2s ease}
.p-pill.on .p-pill-ico{color:#fff}
.p-pill-label{overflow:hidden;text-overflow:ellipsis}
.p-pill.on{
  /* Sem glow/halo individual agora (a barra inteira já é o "vidro" --
     um pill brilhando sozinho destoaria do desenho de barra contínua).
     Destaque vira preenchimento de cor sólida no segmento ativo. */
  background:color-mix(in srgb, var(--pc,var(--accent)) 42%, transparent);
  color:#fff;
  font-weight:600; /* sinaliza seleção pelo peso (ver comentário acima em .p-pill) */
}
.p-pill.on .p-pill-ico{opacity:1}
.p-pill.on[data-praca='circles']{background:rgba(255,255,255,.22);color:#fff}
/* Correção da Pilar 2026-07-25: "navega na linka e vc vai ver nenhuma
   aba" -- essa é a barra que ela via de fato (topo do feed, a primeira
   coisa que aparece ao abrir o app), não só as guias de Círculos ou o
   head do perfil. --pc já vem setada inline por pill (montarPills, ver
   feed-nucleo.js), mesmo esquema de .praca-card. */
.p-pill.guia-nudge{animation:_guiaNudgePulse 1.5s ease-out 1}
.portais-row{
  display:flex;gap:8px;overflow-x:auto;
  padding:8px 12px 12px;scrollbar-width:none;
}
.portais-row::-webkit-scrollbar{display:none}
.portal{
  flex-shrink:0;width:106px;border-radius:10px;
  padding:11px 10px 10px;border:1.5px solid var(--faint);
  background:var(--surf);cursor:pointer;
  transition:transform .12s,border-color .12s;
  position:relative;overflow:hidden;
}
.portal::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--pc) 0%,transparent 65%);
  opacity:.09;pointer-events:none;
}
.portal:active{transform:scale(.96)}
.portal-ativo{transform:scale(1.02)}
.portal-ativo .portal-nome{font-weight:900}
.portal-dot{width:7px;height:7px;border-radius:50%;background:var(--pc);margin-bottom:5px}
.portal-nome{font-size:12px;font-weight:800;letter-spacing:.2px;color:var(--pc);margin-bottom:3px}
.portal-desc{font-size:10px;color:var(--dim);line-height:1.35}
.grid{display:flex;flex-direction:column;padding:0 8px 4px;gap:0}
/* Pedido da Pilar 2026-08-02 (item 3, batch nova): cantos quadrados nos
   tiles, de vez -- não é mais só teste visual. Escopado só nos containers
   de grade de tiles (não no --r global) pra não afetar outros elementos
   que também leem var(--r) (notif-card, arvore-post, res-card, menu-card,
   mp-card etc.), que continuam com o raio padrão de --r:8px. A moldura
   (.tile/.tile-dizer/.tile-img-only border) e o clip da imagem acompanham
   automaticamente porque ambos são movidos pela mesma var(--r) +
   overflow:hidden -- confirmado, não precisa de regra extra. #po-posts-grid
   (perfil visitado) não tem a classe .grid como os outros, por isso entra
   na lista por ID explicitamente. */
#grid,#yuan-grid,#yuan-proprio-grid,#po-posts-grid,#meusposts-list,#salvos-list{--r:0px}
.grid-featured-wrap{padding:0 0 6px}
.grid-masonry{column-count:2;column-gap:6px}
.tile{
  break-inside:avoid;
  background:var(--surf);
  border-radius:var(--r);
  border:1px solid var(--border);
  padding:0;
  position:relative;cursor:pointer;overflow:hidden;
  transition:transform .12s,box-shadow .12s;
  user-select:none;
  display:flex;flex-direction:column;
  margin-bottom:6px;
}
.tile:active{transform:scale(.97);transition:transform .12s .09s}
.tile.featured{
  display:flex;flex-direction:column;
  border-radius:var(--r);border:1px solid var(--border);
  overflow:hidden;cursor:pointer;user-select:none;
  transition:transform .12s;position:relative;
}
.tile.featured:active{transform:scale(.99);transition:transform .12s .09s}
.tile-img{
  width:100%;position:relative;overflow:hidden;flex-shrink:0;
  background:var(--surf2);
}
.tile:not(.featured) .tile-img{height:160px}
.tile.tall .tile-img{height:220px}
.tile.featured .tile-img{height:200px}
.tile-img-bg{
  position:absolute;inset:0;
  background:linear-gradient(
    160deg,
    color-mix(in srgb,var(--tc) 45%,#02020a) 0%,
    color-mix(in srgb,var(--tc) 8%,#02020a) 55%,
    #02020a 100%
  );
}
.tile-img img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  -webkit-touch-callout:none;pointer-events:none;
}
.tile-img-label{
  position:absolute;top:8px;left:9px;
  font-size:8px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  padding:3px 7px;border-radius:4px;
  background:rgba(0,0,0,.42);backdrop-filter:blur(6px);
  font-family:'SF Mono','Fira Code',monospace;
}
.tile-img-deco{
  position:absolute;bottom:-8px;right:-8px;
  opacity:.06;pointer-events:none;
}
.tile-img-time{
  position:absolute;bottom:7px;right:8px;
  font-size:7.5px;color:rgba(255,255,255,.5);
  font-family:'SF Mono','Fira Code',monospace;letter-spacing:.4px;
}
.tile-caption{display:none}
.tile-dizer{
  break-inside:avoid;
  /* BUG CORRIGIDO (Pilar, print: fundo dos posts de texto "quase
     ilegível, branco demais"): var(--surf) sozinho é só uns poucos % mais
     claro/escuro que var(--bg) nos 2 temas claros (--surf/--bg ficam ambos
     em ~92-98% de luminosidade em "claro"/"descanso", ver tokens no topo
     do arquivo) -- o card mal se separava da página, virando um retângulo
     quase branco sem textura nenhuma. Mistura a cor da própria praça
     (--tc, já usada na borda logo abaixo) a 12% sobre --surf via
     color-mix() -- dá identidade visual por praça (a mesma cor da borda)
     e aumenta o contraste contra --bg nos 3 temas, sem tocar em --surf (é
     token compartilhado por botões/bolhas de chat/menus, mudar ali
     afetaria o app inteiro). Fallback plano em var(--surf) primeiro --
     navegador sem suporte a color-mix() ignora a declaração seguinte e
     fica com este valor. */
  background:var(--surf);
  background:color-mix(in srgb, var(--tc) 12%, var(--surf));
  border-radius:var(--r);
  border:1.5px solid var(--tc);
  padding:18px 16px 14px;
  position:relative;cursor:pointer;overflow:hidden;
  /* BUG 2026-07-27 (Pilar, audit de long-press): faltava o prefixo
     -webkit-user-select e -webkit-touch-callout aqui -- só o user-select
     sem prefixo não é suficiente em vários WebViews Android pra impedir a
     Smart Text Selection (sublinhado + card "G [nome]") de disparar junto
     com o menu customizado no long-press do tile. Ver mesmo fix em
     .cx-node (que já tinha os três) e nos lpStart*() (preventDefault). */
  transition:transform .12s;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:6px;
  min-height:120px;
}
.tile-dizer:active{transform:scale(.97);transition:transform .12s .09s}
.tile-dizer-label{
  font-size:8px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  font-family:'SF Mono','Fira Code',monospace;
}
.tile-dizer-txt{
  font-size:14px;line-height:1.6;color:var(--text);
  /* Regra mudada a pedido: itálico + fonte decorativa (Playfair Display
     itálico) ficava ilegível pra leitura corrida. Mantém a elegância (ainda
     é serifada) mas em pé -- itálico só combina com trecho curto/destacado,
     não com o corpo inteiro de um post de texto. */
  font-family:'Playfair Display',Georgia,serif;font-style:normal;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  flex:1;
}
.tile-dizer-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;
}
.tile-dizer-pseudo{font-size:9px;color:var(--dim);font-family:'SF Mono','Fira Code',monospace;opacity:.68}
.tile-dizer-more{
  font-size:11px;color:var(--dim);opacity:.68;letter-spacing:2px;
  background:none;border:none;cursor:pointer;padding:0;
}
.tile-img-only{
  break-inside:avoid;
  border-radius:var(--r);
  border:1.5px solid var(--tc);
  overflow:hidden;position:relative;cursor:pointer;
  /* Mesmo fix de .tile-dizer (ver comentário lá) -- audit 2026-07-27. */
  transition:transform .12s;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  margin-bottom:6px;
  display:block;
  /* FIX 2026-08-03 (Pilar, 4 prints -- fundo branco sólido nas laterais de
     fotos retrato no perfil visitado): causa raiz não era skin/glass-tint
     desconectado (like os outros bugs dessa classe hoje) -- é geométrico.
     O tile em destaque (i===0, variante "heroPo" de _wireTileMedia,
     feed-nucleo.js) estreita e centraliza o `.tile-img` interno via JS
     (max-width calculado pela proporção real + margin:0 auto) quando a
     foto é vertical, pra revelar ela inteira sem cortar -- mas só o
     `.tile-img` interno encolhe, este container (`.tile-img-only`, dono
     da borda colorida var(--tc)) continua na largura cheia da coluna do
     grid. Sobra uma faixa dos dois lados entre a borda (larga) e a foto
     centralizada (estreita) -- essa faixa nunca teve `background`
     declarado aqui, então mostrava a cor de fundo crua da página por
     trás (pálida/quase branca nessa parte da tela, contra o resto bem
     mais tintado de lilás) em vez de uma superfície combinando. Só
     acontece no perfil visitado (renderTilePo/#po-posts-grid) porque só
     a variante "heroPo" estreita+centraliza -- a "hero" do feed próprio
     (renderTile) só cresce a ALTURA, nunca mexe na largura, por isso
     nunca teve esse gap. Fix: mesma superfície neutra já usada como base
     de QUALQUER `.tile-img` antes da imagem carregar (var(--surf2), ver
     regra base de .tile-img acima) -- a faixa agora lê como um cartão de
     verdade, não como buraco mostrando a página por trás. Tiles normais
     (não-featured) nunca tinham esse gap (variante "auto" só ajusta
     altura, .tile-img sempre igual à largura de .tile-img-only) --
     mudança é cosmética neles, invisível na prática. */
  background:var(--surf2);
}
.tile-img-only:active{transform:scale(.97);transition:transform .12s .09s}
.tile-img-only .tile-img{width:100%;position:relative}
.tile-img-only .tile-img-bg{position:absolute;inset:0}
.tile-img-only .tile-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-img-only.tall .tile-img{height:240px}
.tile-img-only.short .tile-img{height:150px}
.tile-img-only.featured-img{border-radius:var(--r);margin-bottom:6px}
.tile-img-only.featured-img .tile-img{height:210px}
.tile-img-corner{
  position:absolute;top:8px;left:9px;
  font-size:8px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  font-family:'SF Mono','Fira Code',monospace;
}
.tile-img-time-corner{
  position:absolute;bottom:7px;right:8px;
  font-size:7.5px;color:rgba(255,255,255,.45);
  font-family:'SF Mono','Fira Code',monospace;
}
.tile-img-deco{position:absolute;bottom:-10px;right:-10px;opacity:.06;pointer-events:none}
.tile-praca,.tile-time,.tile-hdr,.tile-body,.tile-txt,.tile-foot,.tile-pseudo,.tile-eco{display:none}
#splash-bg{
  position:absolute;inset:0;z-index:700;
  background:radial-gradient(ellipse at 50% 45%, #1a0a33 0%, #08080f 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;padding:40px 32px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transition:opacity .5s ease;
}
#splash-bg.off{opacity:0;pointer-events:none;transition:opacity .5s ease}
#splash-bg.transitando{transition:background 1.8s ease}
#splash-bg.transitando .spl-fade{opacity:0;transition:opacity .6s ease;pointer-events:none}
@keyframes splLoginGlow{
  0%,100%{ opacity:.65; }
  50%    { opacity:1;   }
}
.spl-logo.login-glow{
  animation:splLoginGlow 1.0s ease-in-out infinite !important;
}
/* Entrada pós-login: substitui o vazio preto por uma atmosfera viva, sem
   participar do contrato de autenticação. O poster garante primeiro paint
   imediato; o MP4 é apenas um aprimoramento visual por cima. */
.login-transition-visual{
  overflow:hidden;
  background:#18102b url('/static/media/entrada-borboletas.webp') center/cover no-repeat;
  isolation:isolate;
}
.login-transition-media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:saturate(.94) contrast(1.03) brightness(.78);
  transform:scale(1.018);animation:loginEntryDrift 5.4s ease-out both;
}
.login-transition-veil{
  position:absolute;z-index:1;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 92% 50% at 50% 22%,rgba(226,210,255,.11),transparent 70%),
    linear-gradient(180deg,rgba(7,5,15,.07),rgba(12,7,25,.22) 48%,rgba(5,3,10,.5));
  box-shadow:inset 0 0 86px rgba(5,2,13,.42);
}
.login-transition-veil::after{
  content:'';position:absolute;inset:-30% -80%;mix-blend-mode:screen;
  background:linear-gradient(107deg,transparent 44%,rgba(224,205,255,.02) 47%,rgba(255,255,255,.3) 50%,rgba(177,137,244,.1) 54%,transparent 58%);
  animation:loginEntryShimmer 2.9s ease-in-out infinite;
}
@keyframes loginEntryDrift{from{transform:scale(1.035) translateY(.5%)}to{transform:scale(1.075) translateY(-.7%)}}
@keyframes loginEntryShimmer{0%,15%{opacity:0;transform:translateX(-38%)}30%{opacity:.8}72%{opacity:.45}88%,100%{opacity:0;transform:translateX(38%)}}
@media (prefers-reduced-motion:reduce){.login-transition-media{animation:none}.login-transition-veil::after{animation:none;opacity:.18}}
@keyframes linkaEnchant{
  0%  {opacity:1;filter:drop-shadow(0 0 6px #9966ee44);background-position:0% center}
  12% {opacity:1;filter:drop-shadow(0 0 44px #c8a0ffff) drop-shadow(0 0 14px #fff9);background-position:35% center}
  30% {opacity:1;filter:drop-shadow(0 0 22px #aa66ffcc);background-position:60% center}
  55% {opacity:1;filter:drop-shadow(0 0 34px #c8a0ffdd) drop-shadow(0 0 8px #fff6);background-position:80% center}
  80% {opacity:1;filter:drop-shadow(0 0 18px #9966eecc);background-position:92% center}
  100%{opacity:1;filter:drop-shadow(0 0 8px #9966ee44);background-position:100% center}
}
.spl-logo.encantado{opacity:1;animation:linkaEnchant 4s ease-in-out forwards !important}
@keyframes btnIncorpora{
  0%  {box-shadow:none;transform:scale(1);border-color:rgba(153,102,238,.3)}
  18% {box-shadow:0 0 28px #c8a0ffff,0 0 56px #9966ee99,inset 0 0 14px #9966ee44;transform:scale(1.06);border-color:#e0c8ff}
  38% {box-shadow:0 0 16px #aa66ffcc,0 0 32px #9966ee55;transform:scale(0.98);border-color:#bb88ff}
  60% {box-shadow:0 0 22px #c8a0ffdd,0 0 44px #9966ee77,inset 0 0 10px #9966ee33;transform:scale(1.03);border-color:#c8a0ff}
  80% {box-shadow:0 0 14px #9966eecc,0 0 28px #9966ee44;transform:scale(1.01);border-color:var(--accent)}
  100%{box-shadow:0 0 8px #9966ee88,0 0 16px #9966ee22;transform:scale(1);border-color:var(--accent)}
}
.btn-incorporando{animation:btnIncorpora .85s cubic-bezier(.4,0,.2,1) forwards!important}
.spl-logo{
  font-size:48px;font-family:'Playfair Display',serif;font-weight:700;
  letter-spacing:.03em;margin-bottom:8px;
  opacity:0;
  background:linear-gradient(135deg,#c4a0ff 0%,#9966ee 40%,#fff 55%,#9966ee 70%,#c4a0ff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:
    logoChega .6s cubic-bezier(.22,1,.36,1) .85s forwards,
    logoPulsa 3s ease-in-out 1.5s infinite;
}
.spl-logo b{font-weight:900;-webkit-text-fill-color:transparent}
@keyframes logoChega{
  0%  {opacity:0;transform:scale(.88) translateY(8px)}
  100%{opacity:1;transform:scale(1)   translateY(0)}
}
@keyframes logoPulsa{
  0%,100%{filter:drop-shadow(0 0 6px #9966ee44);background-position:0% center}
  50%    {filter:drop-shadow(0 0 18px #9966eeaa);background-position:100% center}
}
.spl-tag{
  font-size:13px;letter-spacing:.1em;margin-bottom:44px;
  opacity:0;
  background:linear-gradient(90deg,var(--dim) 0%,var(--dim) 25%,#c4a0ff 45%,#fff 50%,#c4a0ff 55%,var(--dim) 75%,var(--dim) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:
    tagChega .5s ease 1.4s forwards,
    shimmer 2.8s linear 2s infinite;
}
@keyframes tagChega{
  0%  {opacity:0;letter-spacing:.2em}
  100%{opacity:1;letter-spacing:.1em}
}
@keyframes shimmer{
  0%  {background-position:100% center}
  100%{background-position:-100% center}
}
.spl-btn-main{
  width:100%;padding:12px;border-radius:12px;border:none;
  background:#f0eeff;
  color:#2a1550;font-size:15px;font-weight:700;
  cursor:pointer;margin-bottom:12px;
  opacity:0;transform:translateY(12px);
  animation:btnChega .4s ease 1.85s forwards;
  box-shadow:0 4px 24px #9966ee33;
  letter-spacing:.02em;
}
.spl-btn-ghost{
  width:100%;padding:10px;border-radius:12px;
  background:transparent;border:1.5px solid #f0eeff55;
  color:#f0eeff;font-size:14px;cursor:pointer;
  opacity:0;transform:translateY(12px);
  animation:btnChega .4s ease 2.05s forwards;
  letter-spacing:.02em;
}
/* 2026-08-10 (Pilar: "feio esse borrão" -- os 2 skeletons antigos, muito
   pálidos/sutis contra o fundo escuro do splash, liam como uma mancha
   borrada em vez de um indicador de carregamento nítido, exatamente
   enquanto o app reabre e o auto-login checa /auth/me). Troca pro anel
   .spl-auth-ring: contorno definido, sempre "tentando fechar" (o traço
   cresce quase até completar o círculo e recua, nunca fecha de vez) com
   shimmer prata→lilás→roxo na própria linha do traço. Mesma posição/altura
   de bloco de antes (ainda ocupa o lugar de Entrar/Criar conta). Reaproveita
   _saidaSpin (já existe, ver migração CSP 2026-08-03 abaixo) pro giro do
   contêiner -- só o traço (dasharray/cor) é novo. */
.spl-auth-ring{width:46px;height:46px;margin:2px auto 14px;animation:_saidaSpin 1.7s linear infinite}
.spl-auth-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible;display:block}
.spl-auth-ring-trilha{fill:none;stroke:#f0eeff1f;stroke-width:3}
.spl-auth-ring-arco{
  fill:none;stroke-width:3;stroke-linecap:round;
  stroke-dasharray:119.4;stroke-dashoffset:107;
  filter:drop-shadow(0 0 3px #c8a0ffaa);
  animation:splAuthFecha 1.7s cubic-bezier(.65,0,.35,1) infinite,
            splAuthCor 1.7s linear infinite;
}
@keyframes splAuthFecha{
  0%,100%{stroke-dashoffset:107}
  50%    {stroke-dashoffset:16}
}
@keyframes splAuthCor{
  0%,100%{stroke:#e8e6f0}
  35%    {stroke:#c8a0ff}
  70%    {stroke:#9966ee}
}
@keyframes btnChega{
  0%  {opacity:0;transform:translateY(12px)}
  100%{opacity:1;transform:translateY(0)}
}
.spl-inp{
  width:100%;padding:13px 14px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1.5px solid #f0eeff33;
  color:#f0eeff;font-size:14px;outline:none;margin-bottom:10px;
  font-family:inherit;
}
.spl-inp::placeholder{color:#f0eeff55}
.spl-pw-wrap{position:relative;width:100%;margin-bottom:10px}
.spl-pw-wrap .spl-inp{margin-bottom:0;padding-right:42px}
.spl-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#f0eeff66;padding:4px;line-height:0;font-size:0}
.spl-inp:focus{border-color:#9966ee88;background:rgba(153,102,238,.1)}
.cad-nasc-row{display:flex;gap:8px;margin-bottom:10px}
.cad-nasc-sel{
  flex:1;min-width:0;padding:13px 10px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1.5px solid #f0eeff33;
  color:#f0eeff;font-size:14px;outline:none;font-family:inherit;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  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" stroke="%23f0eeff88" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:26px;
}
.cad-nasc-sel:focus{border-color:#9966ee88;background-color:rgba(153,102,238,.1)}
.cad-nasc-sel option{background:#1a0533;color:#f0eeff}
#spl-cadastro-form{animation:fadeIn .3s ease}
@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}100%{opacity:1;transform:translateY(0)}}
.yuan-compose{
  padding:12px 14px;border-bottom:1px solid var(--border);
  display:flex;gap:10px;align-items:flex-start;
}
.yuan-compose textarea{
  flex:1;background:var(--surf2);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font:14px/1.5 'Inter',sans-serif;padding:10px 12px;
  resize:none;min-height:60px;outline:none;
}
.yuan-compose textarea:focus{border-color:var(--yuan)}
.yuan-compose-btn{
  background:var(--yuan);border:none;border-radius:8px;
  color:#fff;font-size:12px;font-weight:600;padding:8px 12px;cursor:pointer;
  flex-shrink:0;margin-top:2px;
}
/* Yuan Profile Header */
#yuan-profile-header{padding:16px 16px 12px;border-bottom:1px solid var(--border);position:relative}
.yph-top{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.yph-hex-wrap{position:relative;flex-shrink:0;cursor:pointer}
.yph-avatar{width:64px;height:64px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:22px;font-weight:700;color:#fff;font-family:'Playfair Display',serif}
.yph-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.yph-cam-badge{position:absolute;bottom:1px;right:1px;width:18px;height:18px;background:var(--bg);border:1.5px solid var(--border);border-radius:50%;display:none;align-items:center;justify-content:center;pointer-events:none}
.yph-hex-wrap.edit-mode .yph-cam-badge{display:flex}
.yph-hex-wrap.edit-mode{cursor:pointer}
.yph-radar-badge{position:absolute;bottom:-6px;right:-6px;filter:drop-shadow(0 1px 3px var(--bg))}
.yph-info{flex:1;min-width:0}
/* AUDITORIA DE TIPOGRAFIA 2026-08-02 (Pilar): o Handle (.linka-pseudo,
   utils.js::_htmlHandle -- usado no feed/threads/busca) foi apontado
   como referência de acabamento pro resto da tipografia da Linka. Nome
   do PRÓPRIO perfil ganha o mesmo tratamento (Playfair 700 + tracking +
   gradiente com shimmer via background-clip:text) em vez de texto sólido
   var(--text) -- também resolve o contraste na raiz pra este elemento
   específico: a cor nunca depende de tema/skin, então nenhuma combinação
   consegue deixá-lo ilegível. opacity fica em 1 (cheia) aqui, diferente
   do Handle sobre mídia (opacity:.42, calibrado pra não brigar com foto
   de fundo) -- aqui o fundo é o painel de perfil, sólido, então a versão
   plena do gradiente é a mais legível. Tamanho subiu de 15px pra 18px:
   é o texto de maior hierarquia da tela (nome de quem é o perfil) e
   estava menor que títulos secundários de outras telas do app. */
.yph-pseudo{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:18px;line-height:1.3;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(120deg,#c8b0ee 0%,#9966ee 45%,#c8b0ee 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:logoShimmer 5s ease-in-out infinite;
}
.yph-arq{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.07em;margin-top:3px}
.yph-member{font-size:11px;color:var(--faint);margin-top:1px}
.yph-rubrica{display:inline-block;vertical-align:middle;margin-left:5px;opacity:0.85}
.yph-bio-wrap{font-size:13px;line-height:1.5;padding:2px 0 6px}
.yph-bio{color:var(--text)}
.yph-bio-empty{color:var(--dim);font-style:italic}
.yph-edit-btn{position:absolute;top:14px;right:56px;background:transparent;border:1px solid var(--border);border-radius:20px;padding:4px 11px;font-size:11px;color:var(--dim);cursor:pointer;display:flex;align-items:center;gap:4px;font-family:'Inter',sans-serif;letter-spacing:.01em}
.yph-edit-btn:active{opacity:.6}
.yph-bio-edit{width:100%;box-sizing:border-box;resize:none;height:68px;font:14px/1.5 'Inter',sans-serif;background:var(--surf2);border:1px solid var(--border);border-radius:8px;padding:9px 11px;color:var(--text);outline:none;margin-top:4px}
.yph-bio-edit:focus{border-color:var(--accent)}
.yph-bio-counter{font-size:10px;color:var(--dim);text-align:right;margin-top:2px}
.yph-bio-btns{display:flex;gap:6px;margin-top:6px}
.yph-save-btn{flex:1;background:var(--accent);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;padding:7px 10px;cursor:pointer}
.yph-cancel-btn{flex:1;background:transparent;border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--dim);font-size:12px}
.yph-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.yph-chip{font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:20px;border:1px solid var(--border);color:var(--dim);background:transparent}
/* Filtros de avatar (studio-home-yuan.js) -- migração CSP script-src/style-src
   2026-08-02, mesmo padrão de .criar-filtro-item/.criar-filtro-swatch. */
.av-filter-item{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;cursor:pointer}
.av-filter-thumb{width:58px;height:58px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,0.15);box-sizing:border-box}
.av-filter-thumb img{width:100%;height:100%;object-fit:cover;filter:var(--av-filtro,none)}
.av-filter-label{font-size:10px;color:rgba(255,255,255,0.6)}

.yuan-list{display:flex;flex-direction:column;gap:0;padding:0 0 80px}
.yt-card{border-bottom:1px solid var(--border);padding:14px}
.yt-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.yt-avatar{
  width:32px;height:32px;border-radius:6px;background:var(--surf2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:12px;color:var(--yuan);border:1px solid color-mix(in srgb,var(--yuan) 30%,transparent)
}
.yt-name{font-size:12px}
.yt-time{font-size:11px;color:var(--dim);margin-left:auto}
.yt-txt{font-size:14px;line-height:1.6;color:var(--text);margin-bottom:10px;white-space:pre-wrap}
.yt-foot{display:flex;gap:16px;align-items:center}
.yt-rep-btn{font-size:12px;color:var(--dim);background:none;border:none;cursor:pointer;padding:0}
.yt-rep-btn:hover{color:var(--yuan)}
.yt-rep-count{font-size:12px;color:var(--dim)}
.yt-replies{
  margin-top:10px;padding:10px 0 0 16px;
  border-left:2px solid color-mix(in srgb,var(--yuan) 25%,transparent);
  display:none;flex-direction:column;gap:8px;
}
.yt-replies.open{display:flex}
.yt-rep-card{background:var(--surf2);border-radius:6px;padding:10px 12px}
.yt-rep-name{font-size:11px;color:var(--yuan);font-weight:500;margin-bottom:3px}
.yt-rep-txt{font-size:13px;color:var(--text);line-height:1.5}
.yt-rep-empty{font-size:12px;color:var(--dim);font-style:italic}
.yt-reply-form{margin-top:8px;display:none;gap:6px;flex-direction:column}
.yt-reply-form.open{display:flex}
.yt-reply-inp{
  background:var(--surf3);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font:13px/1.4 'Inter',sans-serif;padding:8px 10px;
  resize:none;min-height:44px;outline:none;
}
.yt-reply-inp:focus{border-color:var(--yuan)}
.yt-reply-send{align-self:flex-end;background:var(--yuan);border:none;border-radius:6px;
  color:#fff;font-size:12px;font-weight:600;padding:6px 14px;cursor:pointer}
.yuan-card{
  display:flex;gap:12px;
  padding:14px 14px;
  border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .1s;
  position:relative;
}
.yuan-card:active{background:var(--surf2)}
.yuan-avatar{
  flex-shrink:0;width:46px;height:46px;border-radius:6px;
  background:var(--surf2);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-family:'Playfair Display',serif;
  color:var(--yuan);border:1px solid color-mix(in srgb,var(--yuan) 28%,transparent);
  font-style:italic;
}
.yuan-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.yuan-meta{font-size:9.5px;color:var(--dim);display:flex;gap:6px;align-items:center}
.yuan-meta-name{font-family:'SF Mono','Fira Code',monospace;font-weight:600;color:var(--yuan);font-size:9px;letter-spacing:.4px}
.yuan-txt{
  font-size:13px;line-height:1.55;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  font-family:'Inter',sans-serif;
}
.yuan-eco{font-size:9px;color:var(--dim);opacity:.5;margin-top:2px}
/* Borda esfumacada estatica - sem animacao */
.tile-dizer,.tile-img-only{
  border:1.2px solid color-mix(in srgb,var(--tc) 65%,#0a0a0a);
  box-shadow:0 0 0 0.7px rgba(0,0,0,0.5),
             inset 0 0 6px rgba(0,0,0,0.15);
}
.tile-dizer[data-nb="3"],.tile-img-only[data-nb="3"]{
  box-shadow:0 0 0 0.7px rgba(0,0,0,0.5),
             0 0 7px color-mix(in srgb,var(--tc) 14%,transparent),
             inset 0 0 6px rgba(0,0,0,0.15);
}
.tile-dizer[data-nb="4"],.tile-img-only[data-nb="4"]{
  box-shadow:0 0 0 0.7px rgba(0,0,0,0.5),
             0 0 12px color-mix(in srgb,var(--tc) 22%,transparent),
             inset 0 0 8px rgba(0,0,0,0.18);
}
.tile-dizer[data-nb="5"],.tile-img-only[data-nb="5"]{
  box-shadow:0 0 0 0.7px rgba(0,0,0,0.5),
             0 0 16px color-mix(in srgb,var(--tc) 30%,transparent),
             inset 0 0 10px rgba(0,0,0,0.2);
}
/* Tile transbordado para praca publica: outline amarelo externo */
[data-pub="1"].tile-dizer,[data-pub="1"].tile-img-only{
  outline:1px solid color-mix(in srgb,#c4a020 50%,#0a0a0a);
  outline-offset:2px;
}
#tov{
  position:absolute;bottom:calc(var(--nh)+8px);left:8px;right:8px;
  background:rgba(4,4,14,.55);border:1px solid rgba(120,110,200,.12);
  border-left:2px solid var(--tov-cor,var(--accent));
  border-radius:var(--r);padding:15px;
  backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);z-index:850;
  pointer-events:none;opacity:0;transform:translateY(10px);
  transition:opacity .13s,transform .13s;
  max-height:55%;overflow-y:auto;
}

/* ── Controles de vídeo customizados ─────────────────── */
.vid-ctrls{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(8,6,18,.88) 0%,transparent 100%);
  padding:6px 10px 9px;
  display:flex;align-items:center;gap:8px;
  opacity:0;transition:opacity .22s;pointer-events:none;
}
.vid-ctrls.on{opacity:1;pointer-events:auto;}
.vid-pp{
  width:30px;height:30px;border-radius:50%;
  background:rgba(153,102,238,.88);border:none;color:#fff;
  cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);transition:transform .1s,background .15s;
}
.vid-pp:active{transform:scale(.88);background:rgba(153,102,238,1)}
.vid-bar{
  flex:1;height:3px;background:rgba(255,255,255,.18);
  border-radius:2px;cursor:pointer;position:relative;overflow:hidden;
}
.vid-bar::before{
  content:'';position:absolute;inset:0;
}
.vid-fill{height:100%;background:#9966ee;border-radius:2px;pointer-events:none;width:0%}
.vid-dur{font-size:9px;color:rgba(255,255,255,.55);font-family:monospace;flex-shrink:0;letter-spacing:.3px}
.vid-aud-ctrl{
  width:30px;height:30px;border-radius:50%;
  background:rgba(153,102,238,.35);border:none;color:#fff;
  cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);transition:transform .1s,background .15s;
}
.vid-aud-ctrl:active{transform:scale(.88);background:rgba(153,102,238,.7)}

#tov.on{opacity:1;pointer-events:auto;transform:translateY(0)}
#tov-praca{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px}
#tov-txt{font-size:14px;line-height:1.6;color:#e8e4ff}
#tov-acts{display:flex;gap:8px;margin-top:14px}
#tov-acts button{flex:1;padding:9px;border-radius:8px;border:1px solid var(--border);background:var(--surf2);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}#tov-acts button:active,#tov-acts button.tov-ativo{background:var(--accent);color:#fff;border-color:var(--accent)}
#tov-acts .btn-s{background:var(--accent);color:var(--accent-btn,#f0eeff)}
#tov-autor{display:flex;align-items:center;gap:7px;margin-bottom:10px}
#tov-autor-pseudo{font-size:12px;font-weight:700;color:#e8e4ff;letter-spacing:.2px}
#tov-autor-arq{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px}
#lp-bg{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  z-index:350;display:none;
  /* touch-action:none de propósito: o zoom nativo do navegador (pinch-zoom)
     amplia a PÁGINA inteira, não só a imagem — por isso o feed atrás também
     ampliava. O zoom na foto agora é feito manualmente em JS (transform:scale
     só na <img> dentro de #lp-zoom), então aqui continua tudo bloqueado. */
  touch-action:none;
}
#lp-bg.on{background:rgba(2,2,8,.55)}
#lp-phex{
  position:absolute;top:calc(var(--hh) + 14px);left:14px;
  z-index:3;cursor:pointer;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
#lp-phex.vis{opacity:1;pointer-events:auto;}
#lp-phex-wrap{position:relative;width:52px;height:52px}
#lp-phex-img{
  position:absolute;top:8px;left:8px;
  width:36px;height:36px;border-radius:50%;overflow:hidden;
  border:2px solid var(--lp-cor,#9966ee);
  background:var(--surf2);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;color:var(--dim);
}
#lp-phex-svg{position:absolute;inset:0;width:52px;height:52px}
#lp-pborb{
  position:absolute;bottom:calc(var(--nh) + 20px);left:50%;
  transform:translateX(-50%);
  z-index:3;opacity:0;transition:opacity .3s;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
#lp-pborb.vis{opacity:1;}
#lp-pborb.vis{pointer-events:auto;}
#lp-zoom{
  position:absolute;top:var(--hh);left:0;right:0;bottom:var(--nh);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;pointer-events:none;
  /* Pedido da Pilar 2026-07-23 (revisado): a borda saiu daqui -- ficava em
     volta do container CHEIO, sobrando preto de letterbox entre a mídia de
     verdade e a linha sempre que o vídeo/foto não preenche a tela toda.
     Agora é .lp-media-frame (abaixo) que contorna a mídia real. O que sobra
     fora dela (esse fundo) fica translúcido em vez de preto chapado, pra
     não virar uma mancha escura sólida quando algo sobra dos lados. */
  background:rgba(4,4,12,.5);
}
#lp-zoom img,#lp-zoom video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* Moldura fina em volta da mídia REAL (foto/vídeo) -- este div (_zfr/_zifr
   em long-press-perfil.js) é MEDIDO via getBoundingClientRect depois que a
   mídia carrega, então seu left/top/width/height batem exatamente com o
   retângulo renderizado do vídeo/foto (que fica letterboxed dentro de um
   container maior via object-fit:contain -- tentar adivinhar isso só com
   CSS percentual não fecha certo, sempre sobrava uma margem preta). Sem
   border-radius/overflow:hidden de propósito: como esse frame é um overlay
   SEPARADO por cima da mídia (não um container que a envolve), arredondar
   só a borda deixaria os cantos quadrados da mídia aparecendo por baixo. */
.lp-media-frame{
  border:1px solid color-mix(in srgb, var(--lp-cor,var(--accent)) 60%, transparent);
  box-shadow:0 0 8px color-mix(in srgb, var(--lp-cor,var(--accent)) 22%, transparent);
}
/* .lp-assinatura removida 2026-07-25 (Pilar: "tira as assinaturas dos
   posts, tá parecendo que os posts são autorais") -- era um selo
   caligráfico carimbado sobre a mídia do post expandido. Ver comentário
   completo em static/js/modules/long-press-perfil.js, topo do arquivo. */
#lp-zoom .ww{pointer-events:auto;cursor:pointer}
#lp-zoom .lpzt{
  padding:28px 24px;font-family:'Playfair Display',serif;
  font-size:16px;line-height:1.75;color:var(--text);
  text-align:left;max-height:100%;overflow:hidden;
  background:var(--lpzt-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:14px;border:1.5px solid var(--lpzt-cor,#9966ee);
  width:calc(100% - 48px);box-sizing:border-box;
}
#lp-card{
  position:absolute;right:0;top:0;bottom:0;
  width:20px;max-width:20px;
  /* O vidro pertence somente ao plano do painel. Os filhos continuam com
     opacidade total; o post mantém cor, movimento e contexto por trás. */
  background:rgba(15,15,18,.18);
  background:color-mix(in srgb,var(--lp-cor,var(--accent)) 7%,rgba(15,15,18,.14));
  backdrop-filter:blur(10px) saturate(115%);-webkit-backdrop-filter:blur(10px) saturate(115%);
  border-left:1px solid rgba(255,255,255,.07);border-radius:0;
  overflow-y:auto;overflow-x:hidden;
  box-shadow:-6px 0 24px rgba(0,0,0,.08);
  z-index:1;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.32,0,.67,1),width .28s cubic-bezier(.32,0,.67,1),max-width .28s cubic-bezier(.32,0,.67,1),background .25s ease;
  display:flex;flex-direction:column;
}
#lp-card.aberto{
  width:72vw;
  max-width:310px;
}
#lp-card:not(.aberto) #lp-body{visibility:hidden;}
#lp-stripe{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:3px;height:36px;border-radius:2px;background:rgba(255,255,255,.22);transition:background .2s}
#lp-body{padding:14px 4px 28px 11px;display:flex;flex-direction:column;flex:1;opacity:1}
#lp-top{display:flex;align-items:center;gap:8px;margin-bottom:14px}
#lp-hex{width:36px;height:36px;flex-shrink:0;border-radius:50%;overflow:hidden;background:var(--surf2);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--dim)}
#lp-info{min-width:0;flex:1}
.lp-editar-icone{
  width:34px;height:34px;flex:0 0 34px;padding:7px;
  display:none;align-items:center;justify-content:center;
  color:rgba(255,255,255,.78);background:transparent;
  border:1px solid transparent;border-radius:50%;cursor:pointer;
  transition:color .16s ease,background .16s ease,border-color .16s ease,transform .12s ease;
}
.lp-editar-icone svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.lp-editar-icone:active{transform:scale(.9);color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1)}
#lp-pseudo{
  font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#lp-arq-row{display:flex;align-items:center;gap:6px;margin-top:4px}
#lp-praca{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
#lp-eco{font-size:11px;color:var(--dim)}
#lp-excerpt,#lp-data,#lp-praca,#lp-eco{text-shadow:0 1px 4px rgba(0,0,0,.6)}
#lp-excerpt{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  flex:1;
  font-size:12.5px;
  line-height:1.65;
  color:rgba(255,255,255,.78);
  padding:6px 0 10px;
  min-height:0;
  word-break:break-word;
}
/* Data/hora de publicação — sempre visível como texto, mesmo tamanho da
   legenda (#lp-excerpt), sem precisar tocar em nada pra revelar. */
#lp-data{
  font-size:12.5px;
  line-height:1.65;
  color:rgba(255,255,255,.48);
  padding:0 0 8px;
}
#lp-secundarias{display:flex;flex-direction:column;align-items:flex-end;padding:0 2px 8px}
#lp-btn-mais{
  width:38px;height:30px;padding:0;border:0;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:rgba(255,255,255,.56);
  font-family:inherit;font-size:19px;font-weight:700;letter-spacing:2px;line-height:1;
  cursor:pointer;transition:color .16s ease,background .16s ease,transform .12s ease;
}
#lp-btn-mais:active,#lp-btn-mais[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.07);transform:scale(.94)}
#lp-menu-secundario{
  width:100%;max-height:0;opacity:0;overflow:hidden;pointer-events:none;
  display:flex;flex-direction:column;gap:5px;
  transition:max-height .2s ease,opacity .16s ease,padding .2s ease;
}
#lp-menu-secundario.aberto{max-height:96px;opacity:1;pointer-events:auto;padding-top:5px}
.lp-acao-secundaria{
  width:100%;padding:9px 11px;border-radius:9px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.055);
  color:rgba(255,255,255,.65);font:600 11.5px/1.2 inherit;text-align:left;cursor:pointer;
}
#lp-menu-secundario #lp-btn-esquecer,#lp-menu-secundario #lp-btn-reportar{
  background:rgba(100,18,26,.09);border-color:rgba(224,82,82,.2);color:#e68b8b;
}
.lp-acao-secundaria:active{background:rgba(224,82,82,.18)!important;color:#fff!important}
#lp-btns{display:flex;flex-direction:column;gap:6px;margin-top:auto}
#lp-btns button{width:100%;padding:10px 12px;border-radius:10px;border:none;font-size:12px;font-weight:700;cursor:pointer;text-align:left}
#lp-btn-fechar{background:var(--surf2);color:var(--dim);border:1px solid var(--border)}
#lp-btn-ver{color:var(--accent-btn,#f0eeff)}
.notif-card{margin:4px 12px;padding:10px 12px;background:var(--surf);border-radius:var(--r);border:1px solid var(--border);position:relative;transition:opacity .15s}
.notif-card.nova{border-color:rgba(200,169,110,.25);background:rgba(200,169,110,.04)}
/* Migração CSP style-src 2026-08-02: cursor:pointer era inline (style="cursor:pointer")
   nos cards clicáveis -- valor sempre igual, não depende de dado nenhum, então vira
   classe simples em vez de custom property via JS (ver notificacoes-borboleta.js). */
.notif-card.clicavel{cursor:pointer}
/* Idem: bloco "✓ Aceito — expira em Xh" (conexao_pedido já lida) tinha um
   style="..." fixo, sem nenhum valor calculado por linha -- vira classe. */
.notif-aceito-exp{margin-top:8px;font-size:11px;color:var(--yuan);font-weight:600}
/* CORREÇÃO 2026-08-02 (achado real, Pilar: "clico no canto sem saber que
   vai apagar, a notificação some sem explicação -- só descobri que existe
   long-press revelando algo"): opacity:0 aqui deixava o botão de apagar
   TOTALMENTE invisível por padrão -- mas continuava clicável (opacity não
   desativa pointer-events), então um toque comum no canto superior direito
   do card apagava a notificação sem nenhum aviso visual. Só ficava visível
   depois de um long-press (.lp-on, ver _initNotifTouch em
   notificacoes-borboleta.js -- removido, não servia mais nenhum outro
   propósito). Fix: ícone sempre visível (opacity .5 em repouso, igual
   .notif-group-item-trash logo abaixo, mesma família), destaque vermelho
   suave só no hover/toque -- ação de apagar fica simétrica e sinalizada
   por ícone de verdade, nunca por zona de clique escondida. Glifo trocado
   de 🗑 (emoji, renderiza diferente em cada plataforma) pra ✕ (símbolo
   tipográfico, mesma linguagem visual dos outros ícones de notificação --
   ⊕ ◐ ◆ ✦ etc., ver _notifIcone()). */
.notif-trash{position:absolute;top:7px;right:7px;background:none;border:none;
  color:var(--dim);font-size:13px;cursor:pointer;opacity:.5;
  transition:opacity .15s ease,background .15s ease,color .15s ease;
  padding:4px 6px;border-radius:6px;line-height:1}
.notif-trash:hover,.notif-trash:active{opacity:1;background:rgba(200,88,88,.14);color:#e08a8a}
#notif-footer{display:flex;justify-content:space-between;align-items:center;padding:12px 12px 20px;margin-top:2px}
#notif-apagar-tudo{background:none;border:none;color:var(--dim);font-size:11px;cursor:pointer;padding:4px 8px;border-radius:6px;letter-spacing:.3px}
#notif-apagar-tudo:active{color:var(--accent)}
#notif-undo-toast{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);background:var(--surf2);border:1px solid var(--border);border-radius:20px;padding:8px 14px;font-size:12px;color:var(--text);display:flex;align-items:center;gap:10px;z-index:990;box-shadow:0 4px 16px rgba(0,0,0,.35);white-space:nowrap;pointer-events:auto;transition:opacity .2s}
#notif-undo-toast.hidden{opacity:0;pointer-events:none}
#notif-undo-toast button{background:var(--accent);border:none;color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:10px;cursor:pointer}
/* CORREÇÃO 2026-08-02 (print real da Pilar: "X" de apagar caindo em cima do
   timestamp, "8h"/"1d" ilegíveis por baixo do ícone): .notif-trash é
   position:absolute (top:7,right:7, ~25px de largura com padding) sobre o
   CARD inteiro, mas .notif-header{margin-left:auto} no timestamp o empurra
   flush contra a borda direita do conteúdo -- exatamente onde o botão de
   apagar mora. padding-right aqui reserva o espaço do botão, então o
   timestamp para de invadir aquela faixa. */
.notif-header{display:flex;align-items:center;gap:7px;margin-bottom:5px;padding-right:24px}
.notif-header .notif-meta{margin:0;margin-left:auto}
.notif-avatar{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--accent);background:rgba(153,102,238,.18);color:var(--accent);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0}
/* Fallback sem id_origem (não clicável) -- style="opacity:.5" inline virou classe (CSP style-src). */
.notif-avatar.sem-origem{opacity:.5}
/* CORREÇÃO 2026-08-02 (item 4, "o olhinho", Pilar: "fotos de perfil não
   carregam"): quando a notificação privada (foco/visita) tem avatar real
   disponível (ver url_avatar_origem, JOIN ao vivo em listar_notifs_privadas),
   mostra a foto de verdade em vez de iniciais -- object-fit cover preenche
   o círculo de 24px já existente sem precisar de layout novo. */
.notif-avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.notif-avatar.tem-foto{padding:0;background:none}
.notif-tag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:4px}
.notif-icone{font-size:14px;line-height:1;flex-shrink:0;opacity:.75;color:var(--dim)}
.tag-cx{background:rgba(88,152,200,.15);color:var(--lab)}
.tag-mk{background:rgba(200,169,110,.15);color:var(--accent)}
.tag-tb{background:rgba(200,88,88,.15);color:var(--vox)}
.tag-cv{background:rgba(106,170,114,.15);color:var(--yuan)}
.tag-ec{background:rgba(144,96,200,.15);color:var(--arts)}
.tag-sys{background:rgba(255,255,255,.06);color:var(--dim)}
.tag-msg{background:rgba(153,102,238,.15);color:var(--accent)}
.notif-body{font-size:13px;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-meta{font-size:11px;color:var(--dim)}
.act-row{display:flex;gap:7px;margin-top:9px}

/* ── Card de notificação de mensagem -- redesenho definitivo (2026-08-02,
   3ª rodada). As duas tentativas anteriores empilhavam um cabeçalho (tag/
   ícone + hora) ACIMA da fileira de avatar+nome -- 2 linhas de altura pra
   um conteúdo que cabe numa só, sobrando espaço vazio no card (bronca
   justa da Pilar: "mal diagramado", pediu pra olhar como WhatsApp/
   Instagram/Telegram organizam isso).
   Padrão de referência desses apps pra uma linha de notificação/conversa
   compacta: avatar à esquerda (âncora vertical de toda a fileira) + coluna
   de texto à direita dividida em 2 sub-linhas curtas -- [nome  ...hora] em
   cima, [ícone/status + prévia] embaixo -- tudo dentro de UMA fileira só,
   sem cabeçalho separado. Altura final = altura do avatar (40px) + padding
   vertical do card, nada além disso. Ícone de chat volta a ser inline (ao
   lado do subtítulo, não mais position:absolute solto num canto) -- mais
   robusto ainda: sendo conteúdo de fluxo normal com tamanho fixo em px,
   não tem como ele "vazar" pra fora da fileira nem inflar nada. */
.notif-card.notif-msg{
  padding:10px 34px 10px 12px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surf)) 0%, var(--surf) 100%);
  border-color:color-mix(in srgb, var(--accent) 28%, var(--border));
}
.notif-card.notif-msg.nova{
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surf)) 0%, var(--surf) 100%);
  border-color:var(--accent);
}
.notif-msg-row{display:flex;align-items:center;gap:11px}
.notif-msg-avatar-wrap{flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;line-height:0}
.notif-msg-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid var(--accent);display:block;background:rgba(153,102,238,.18)}
.notif-msg-avatar-fallback{color:var(--accent);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
.notif-msg-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.notif-msg-toprow{display:flex;align-items:baseline;gap:8px}
.notif-msg-nome{font-size:13.5px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.notif-msg-toprow .notif-meta{flex-shrink:0;margin-left:auto}
.notif-msg-subrow{display:flex;align-items:center;gap:5px;min-width:0}
.notif-icone-msg{width:13px;height:13px;flex-shrink:0;color:var(--accent);display:inline-flex}
.notif-icone-msg svg{width:100%;height:100%;fill:currentColor;fill-opacity:.2;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notif-msg-sub{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ── Notificação agrupada (feature 2026-07-30, Pilar): mesma pessoa + mesmo
   post + múltiplas ações (eco/visto/thread) = 1 card expansível. ────── */
.notif-group-toggle{background:none;border:none;padding:0;margin-left:4px;color:var(--dim);
  font-size:11px;cursor:pointer;display:flex;align-items:center;flex-shrink:0;
  transition:transform .18s}
.notif-card.grp-aberto .notif-group-toggle{transform:rotate(180deg)}
.notif-group-items{max-height:0;overflow:hidden;transition:max-height .22s ease;margin-top:0}
.notif-card.grp-aberto .notif-group-items{max-height:400px;margin-top:8px}
.notif-group-item{display:flex;align-items:center;gap:8px;padding:7px 0;
  border-top:1px solid var(--border);cursor:pointer;position:relative}
.notif-group-item:first-child{border-top:1px solid var(--border)}
.notif-group-item .notif-icone{opacity:.6;font-size:12px}
.notif-group-item-body{flex:1;min-width:0;font-size:12px;color:var(--text);line-height:1.3}
.notif-group-item-meta{font-size:10px;color:var(--dim);margin-top:1px}
.notif-group-item-trash{background:none;border:none;color:var(--dim);font-size:12px;
  cursor:pointer;padding:4px 5px;border-radius:5px;flex-shrink:0;opacity:.5}
.notif-group-item-trash:active{opacity:1}
.notif-group-apagar-tudo{display:block;width:100%;margin-top:4px;padding:7px;
  background:none;border:1px dashed var(--border);border-radius:8px;color:var(--dim);
  font-size:11px;cursor:pointer;letter-spacing:.2px}
.notif-group-apagar-tudo:active{color:var(--accent);border-color:var(--accent)}
.btn-yes{flex:1;padding:9px;border-radius:8px;border:none;background:var(--yuan);color:#0a180a;font-size:12px;font-weight:700;cursor:pointer}
.btn-no{flex:1;padding:9px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--dim);font-size:12px;font-weight:600;cursor:pointer}
#dunbar-wrap{display:flex;justify-content:center;padding:20px 16px 8px}
#dunbar-svg{width:100%;max-width:300px;height:auto}
/* Pedido da Pilar 2026-07-24: card ocupa a TELA TODA (menos header/bottom
   nav, já de fora por #cx-stack viver dentro de .pane). Agora é uma LINHA
   (main content + faixa de guias lateral), não mais uma coluna única --
   ver .cx-front-main / .cx-front-tabs-lat logo abaixo. As guias
   íntima/pessoal/social (sem "pública", removida -- ver _CX_ORDEM em
   notificacoes-borboleta.js) ficam empilhadas na borda direita, estilo
   abas do Chrome, deixando quase a tela inteira pro conteúdo. */
#cx-stack{position:absolute;inset:0}
.cx-front-card{
  position:absolute;inset:0;z-index:20;box-sizing:border-box;
  /* Correção 2026-07-27 (Pilar: "Circles não tem glass no corpo, assim
     como no bottom e no head tem" -- print comparando os três). Header/
     bottom nav usam var(--glass-tint) + blur; este card usava um
     var(--surface, var(--surf)) SÓLIDO, sem blur nenhum -- por isso o
     contraste. Troca pro mesmo par glass-tint/blur do resto do app, pra
     ficar visualmente da mesma família.
     BUG 2026-07-30 (Pilar, PRIORIDADE MÁXIMA, print real: "Circles com
     skin equipada fica com fundo preto liso, sem cor nem glass" --
     mesma queixa do perfil visitado, mas causa DIFERENTE): a intenção
     escrita aqui em 2026-07-27 era usar --surface só pra "colorir o tom
     via color-mix", mas o código nunca fez color-mix nenhum -- era um
     var(--surface, ...) de FALLBACK puro. --surface É setado inline em
     #cx-front por _skinsAplicarNoPerfil-equivalente em carregarCx()
     sempre que existe skin ativa em tema escuro (ver skins.js) -- e todo
     valor de --surface de toda skin (migrations 005/048/049/051) é uma
     cor SÓLIDA quase preta (ex: #0f0f18, #141414, #0c1610), pensada como
     tom de card interno, não fundo de painel inteiro. Fallback puro
     significa que, com skin ativa, --surface substitui --glass-tint
     inteiro -- painel vira um retângulo preto sólido sem transparência
     nenhuma, exatamente o "preto liso, sem skin nem glass" relatado.
     skins.js (_SKIN_VAR_KEYS_SURFACE, comentário 2026-07-23/27) já
     documentava a intenção correta: --surface/--surface-2/--text
     "usados hoje só em componentes escopados como .cx-node, não no
     fundo geral do painel" -- este .cx-front-card quebrava exatamente
     essa regra ao usar --surface no PRÓPRIO fundo. Fix: fundo do painel
     volta a ser só --glass-tint (glass real, accent-tingido via :root,
     igual header/bottom-nav) -- --surface continua vivo e correto nos
     componentes internos (.cx-node-avatar, .cx-node:active, linha
     ~1254/1259 abaixo), só sai do fundo do painel inteiro. */
  background:var(--glass-tint);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  display:flex;flex-direction:row;
}
.cx-front-card.cx-anim{animation:cxFrontIn .22s ease}
@keyframes cxFrontIn{from{transform:translateX(26px);opacity:.35}to{transform:translateX(0);opacity:1}}
.cx-front-main{flex:1;min-width:0;box-sizing:border-box;padding:16px 10px 14px 16px;display:flex;flex-direction:column}
.cx-front-hdr{margin-bottom:12px;flex-shrink:0}
/* Pedido da Pilar 2026-07-24 (v2): avatar próprio + bolhas de prévia numa
   ÚNICA faixa scrollável -- antes eram dois containers de scroll
   separados (avatar fixo + carrossel de prévia ao lado), o que fazia rolar
   "bater" de volta no avatar. Agora é uma coisa só, avatar é só o
   primeiro item, rola livre nos dois sentidos (igual Instagram). */
.cx-front-strip{
  display:flex;align-items:center;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  /* Pedido da Pilar 2026-07-24: a última bolha ficava cortada seca na borda
     (parecia bug, não "role pra ver mais"). Fade suave no fim -- some aos
     poucos em vez de cortar. */
  mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
}
.cx-front-strip::-webkit-scrollbar{display:none}
/* Pedido da Pilar 2026-07-24: "ainda continuo com aumentar a proporção dos
   círculos" -- mais um aumento (66px -> 76px), meu avatar e as bolhas de
   prévia/story sempre no mesmo tamanho um do outro (Instagram/TikTok). */
.cx-front-avatar,.cx-front-preview-av{
  width:76px;height:76px;flex-shrink:0;border-radius:50%;overflow:hidden;
  background:var(--surface-2, var(--surf2));
  display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:700;color:var(--dim);
}
.cx-front-avatar{border:2.5px solid color-mix(in srgb, var(--c-cor,var(--accent)) 60%, transparent)}
.cx-front-preview-av{border:2px solid color-mix(in srgb, var(--c-cor,var(--accent)) 55%, transparent)}
.cx-front-avatar img,.cx-front-preview-av img{width:100%;height:100%;object-fit:cover}
/* Pedido da Pilar 2026-07-24: aura sutil só no círculo Íntima -- halo
   pulsando bem devagar atrás do avatar, quase imperceptível. */
.cx-avatar-aura-wrap{position:relative;display:inline-flex;flex-shrink:0}
.cx-avatar-aura-wrap .cx-front-avatar{position:relative;z-index:1}
.cx-avatar-aura-wrap.aura-on::before{
  content:'';position:absolute;inset:-7px;border-radius:50%;z-index:0;
  background:radial-gradient(circle, color-mix(in srgb, var(--c-cor,var(--accent)) 38%, transparent) 0%, transparent 72%);
  animation:cxAuraBreathe 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes cxAuraBreathe{
  0%,100%{opacity:.35;transform:scale(1)}
  50%{opacity:.65;transform:scale(1.08)}
}
/* Pedido da Pilar 2026-07-24: tocar no próprio avatar agora abre o conto
   JÁ POSTADO (se houver) em vez de sempre abrir a câmera -- "quando vou
   clicar nos meus próprios contos, não consigo ver a foto que postei".
   Esse "+" fica sempre disponível pra gravar um novo, igual o badge de
   selfie do Instagram, independente de já ter conto ativo ou não. */
.cx-avatar-add-badge{
  position:absolute;right:-2px;bottom:-2px;z-index:3;
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff 15%));
  border:2px solid var(--surface,var(--surf));color:#fff;
  font-size:14px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 9px color-mix(in srgb,var(--accent) 55%,transparent),0 2px 6px rgba(0,0,0,.4);
}
.cx-front-titulo{font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--c-cor,var(--accent));margin-bottom:2px;flex-shrink:0}
.cx-front-desc{font-size:11px;color:var(--dim);margin-bottom:10px;flex-shrink:0}
/* Pedido da Pilar 2026-07-24 (v6): "as guias ficaram muito pro alto --
   tinham que estar centralizadas em relação à lista de amigos embaixo dos
   stories, não fixa na tela (íntima cola em 'contos', social fica longe do
   bottom)". Wrap novo só pra lista + guias -- top:50% das guias agora
   centraliza na altura da LISTA (este wrap), não do card inteiro (que
   inclui stories+título+descrição lá em cima, empurrando tudo pra cima). */
.cx-front-list-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.cx-front-list{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:2px;margin:0 -4px;
  /* rolagem elegante e minimalista, nao a barra cinza padrao do sistema */
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--c-cor,var(--accent)) 45%, transparent) transparent;
}
.cx-front-list::-webkit-scrollbar{width:4px}
.cx-front-list::-webkit-scrollbar-track{background:transparent}
.cx-front-list::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--c-cor,var(--accent)) 45%, transparent);border-radius:4px}
/* Pedido da Pilar 2026-07-24 (v7): "não queria que a aba aumentasse, só
   queria que ela ganhasse cor -- nem pedi pra apagar, pedi pra ACENDER".
   Tirado o slide/translateX que fazia a aba parecer "crescer" ao ativar --
   agora o tamanho/posição é o MESMO sempre, só a cor muda. Ativa = "acende"
   de verdade: preenchimento gradiente translúcido na cor do círculo +
   fonte clara e forte por cima (não mais só borda/fundo mesclado com o
   conteúdo). Também subiu um pouquinho (~1/4cm) -- estava perto demais do
   bottom nav. */
.cx-front-tabs-lat{
  position:absolute;top:50%;right:0;transform:translateY(calc(-50% - 10px));
  z-index:5;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;
}
.cx-front-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  box-sizing:border-box;
  width:36px;min-height:118px;padding:12px 0;
  border-radius:18px 0 0 18px;cursor:pointer;
  background:var(--surface-2, var(--surf2));
  border:1px solid var(--border);
  border-right:none;
  transition:background .2s ease,border-color .2s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.cx-front-tab .cx-tab-dot{width:6px;height:6px;border-radius:50%;background:var(--t-cor);flex-shrink:0;transition:background .2s ease}
.cx-front-tab .cx-tab-label{
  writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  font-size:11px;font-weight:800;letter-spacing:.03em;white-space:nowrap;
  color:var(--t-cor,var(--dim));
  transition:color .2s ease;
}
.cx-front-tab.on{
  /* "acende": preenchimento gradiente translúcido na cor do círculo */
  background:linear-gradient(160deg, color-mix(in srgb, var(--t-cor) 65%, transparent), color-mix(in srgb, var(--t-cor) 35%, transparent));
  border-color:var(--t-cor);
  box-shadow:0 2px 10px color-mix(in srgb, var(--t-cor) 45%, transparent);
}
.cx-front-tab.on .cx-tab-dot{background:#fff}
.cx-front-tab.on .cx-tab-label{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.cx-front-tab.on .cx-tab-dot{opacity:1}
.cx-front-tab.on .cx-tab-label{color:var(--t-cor)}
.cx-front-tab:active{transform:translateX(0) scale(.97)}
/* Migração CSP style-src 2026-08-02 (abrirEscolhaCirculo, notificacoes-borboleta.js):
   botões da lista "escolher círculo" (resposta a pedido de conexão) tinham cor
   dinâmica (por círculo) toda inline. Só a cor muda por item -- resto é sempre
   igual -- então vira classe + 3 custom properties setadas via JS/CSSOM
   (--cc-border/--cc-dot/--cc-text, herdadas pelos filhos do botão). */
.cx-choice-btn{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;
  border:1.5px solid var(--cc-border,var(--border));background:var(--surf2);
  cursor:pointer;text-align:left;width:100%;
}
.cx-choice-dot{width:10px;height:10px;border-radius:50%;background:var(--cc-dot,var(--accent));flex-shrink:0}
.cx-choice-nome{display:block;font-size:14px;font-weight:700;color:var(--cc-text,var(--text))}
.cx-choice-desc{font-size:11px;color:var(--dim)}
/* Pedido da Pilar 2026-07-23 (v2): "o menu que sobe no long press eh um
   menu colado na borda pra cima ou pra baixo do PERFIL, solto, nao colado
   nos cantos da tela -- oq vc fez foi so mudar skin de cards". Trocado de
   bottom-sheet full-width por um popup flutuante pequeno, ancorado perto
   da linha pressionada (posição calculada em JS -- ver _cxAbrirMenuNode),
   não mais preso a nenhuma borda da tela. */
.cx-menu-bg{
  position:fixed;inset:0;z-index:900;
  background:rgba(4,4,12,.25);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.cx-menu-card{
  position:fixed;z-index:901;box-sizing:border-box;padding:8px;
  border-radius:16px;border:1px solid var(--glass-edge);
  background:var(--glass-tint);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:0 8px 26px rgba(0,0,0,.35);
}
.cx-menu-nome{font-size:11px;font-weight:700;color:var(--dim);padding:4px 8px 8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-menu-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:8px;margin-bottom:1px;border:none;background:none;border-radius:11px;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s;font-family:inherit}
.cx-menu-item:active{background:rgba(255,255,255,.08)}
.cx-menu-icon{width:28px;height:28px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;background:color-mix(in srgb, var(--m-cor,var(--accent)) 22%, transparent)}
/* "Apagar conto" no menu do visualizador: cor sempre a mesma (vermelho de
   destruição), nunca varia por dado -- vira classe fixa em vez de
   data-svars (migração CSP style-src 2026-08-02). */
.cx-menu-icon.perigo{--m-cor:#e0453f}
/* Modal de denúncia (post ou pessoa) -- pedido da Pilar 2026-07-27: o card
   usava var(--surf) sólido (sem blur nenhum), destoando do vidro fosco que
   o resto do app já usa (header, bottom nav, .cx-menu-card, threads, chat).
   Reaproveita o MESMO sistema --glass-tint/--glass-blur/--glass-sat/
   --glass-edge (ver :root e os blocos de tema claro/descanso no topo do
   arquivo) -- funciona nos 3 temas automaticamente, sem cor fixa. Título
   em vermelho + peso maior reforça que é uma ação séria (denúncia), sem
   deixar a lista de motivos inteira vermelha (isso prejudicaria a leitura
   e pareceria alarmante em vez de sério). */
.rprt-sheet{
  background:var(--glass-tint);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge);border-bottom:none;
  border-radius:22px 22px 0 0;
  width:100%;padding:20px 16px 40px;box-sizing:border-box;
  box-shadow:0 -10px 32px rgba(0,0,0,.4);
}
.rprt-title{
  display:flex;align-items:center;gap:7px;
  font-weight:800;font-size:15px;letter-spacing:.01em;
  color:#e05252;margin-bottom:16px;
}
.rprt-item{
  display:block;width:100%;text-align:left;padding:12px 4px;
  border:none;border-bottom:1px solid var(--glass-edge);
  background:none;color:var(--text);font-size:14px;font-family:inherit;
  cursor:pointer;transition:background .15s;
}
.rprt-item:active{background:rgba(255,255,255,.06)}
.rprt-cancel{
  margin-top:16px;width:100%;padding:12px;border-radius:10px;
  border:1px solid var(--glass-edge);background:none;color:var(--dim);
  font-family:inherit;font-size:13.5px;cursor:pointer;
}
/* Migração CSP script-src/style-src 2026-08-03 (task #352, modal de
   Privacidade & Dados -- abrirDadosPessoais(), privacidade-conta.js): eram
   9 style="" + 2 onclick="" inline. Valores idênticos aos originais, só
   virou classe. */
.privacy-modal-hdr{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.privacy-modal-back{background:none;border:none;font-size:22px;cursor:pointer;color:var(--text)}
.privacy-modal-title{font-size:17px;font-weight:700;margin:0}
.privacy-modal-desc{font-size:13px;color:var(--dim);line-height:1.6;margin-bottom:20px}
.privacy-modal-actions{display:flex;flex-direction:column;gap:12px}
.privacy-modal-btn{display:block;padding:14px;border-radius:12px;border:1px solid var(--border);background:var(--surf2);color:var(--text);font-size:14px;text-align:left;cursor:pointer;text-decoration:none}
.privacy-modal-btn.danger{border:1px solid #e05252;background:transparent;color:#e05252}
/* Migração CSP style-src 2026-08-02 (menu "⋯" da conversa, chat-avancado-
   composer.js) -- eram modal.style.cssText + strings itemStyle inline. */
.chat-menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:900;display:flex;align-items:flex-end}
.chat-menu-item{display:block;width:100%;text-align:left;padding:13px 0;border:none;border-bottom:1px solid var(--glass-edge);background:none;color:var(--text);font-size:14px;cursor:pointer}
.chat-menu-item-danger{color:#c85858}
.chat-menu-confirm-msg{font-size:14px;color:var(--text);margin-bottom:18px;line-height:1.5}
.chat-menu-confirm-actions{display:flex;gap:8px}
.chat-menu-confirm-cancel{flex:1;padding:12px;border-radius:10px;border:1px solid var(--border);background:none;color:var(--dim);cursor:pointer}
.chat-menu-confirm-danger{flex:1;padding:12px;border-radius:10px;border:none;background:#c85858;color:#fff;font-weight:700;cursor:pointer}
.cx-section{margin:0 12px 18px}
.cx-section-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cx-orbit-line{flex:1;height:1px;background:var(--border)}
.cx-orbit-label{font-size:10px;letter-spacing:.9px;text-transform:uppercase;font-weight:800;white-space:nowrap}
.cx-empty{font-size:12px;color:var(--dim);font-style:italic;padding:8px 0 4px}
.cx-nodes{display:flex;flex-direction:column;gap:2px}
/* Pedido da Pilar 2026-07-23: pessoas não são botões -- sem fundo/borda de
   "pill" em volta da linha inteira, só a foto circular + texto ao lado,
   igual um contato de verdade. Lista em coluna única (não grid 2 colunas). */
/* Correção 2026-07-27 (Pilar: "na lista de amigos, se eu segurar em
   alguem pra subir o card, sublinha e chama o Google" -- comportamento
   NATIVO do navegador tomando conta do long-press). Causa: .tile (feed/
   Home, onde isso nunca acontece) sempre teve user-select:none + a <img>
   com -webkit-touch-callout:none/pointer-events:none -- .cx-node nunca
   ganhou a mesma proteção quando essa lista foi desenhada. Não é bug de
   JS (o timer/long-press em si funciona igual); é falta de CSS que
   suprime seleção de texto e o menu nativo de imagem/"Pesquisar no
   Google" que o Android/Chrome abrem por padrão em qualquer toque
   longo sem essa proteção. */
.cx-node{display:flex;align-items:center;gap:9px;padding:6px 4px;border-radius:10px;cursor:pointer;transition:background .15s;width:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.cx-node:active{background:var(--surface-2, var(--surf2))}
.cx-node-avatar{
  /* Pedido da Pilar 2026-07-24: "ícones levemente maiores do que estão na
     lista" -- mais um passo (41->47). */
  width:47px;height:47px;flex-shrink:0;border-radius:50%;overflow:hidden;
  background:var(--surface-2, var(--surf2));border:1.5px solid color-mix(in srgb,var(--cx-cor,var(--border)) 55%,transparent);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;color:var(--dim);
}
.cx-node-avatar img{width:100%;height:100%;object-fit:cover;-webkit-touch-callout:none;pointer-events:none}
/* Item 10 do plano 2026-07-25: aura de "conto ativo" em quem, entre as
   conexões, tem story no ar agora. Pedido explícito da Pilar: "efeito
   mais elegante que o do admin, tipo chama" -- ou seja NÃO o
   _admAuraFlame que cicla por uma paleta fixa de cores (roxo/celeste/
   verde/laranja, pensado pra sinalizar nível de admin). Aqui é
   MONOCROMÁTICO: usa a cor do PRÓPRIO círculo da pessoa (--cx-cor, já
   setado inline em cada .cx-node-avatar) com três camadas de box-shadow
   que respiram em durações levemente diferentes -- a assimetria entre
   elas é o que lembra o tremular de uma chama, sem trocar de matiz.
   box-shadow (não ::before/conic-gradient) de propósito, mesmo truque
   usado no .po-avatar-adm logo abaixo: nunca é cortado pelo
   overflow:hidden do avatar circular. */
.cx-node-avatar.cx-conto-aura{
  position:relative;
  animation:_ctAuraFlame 2.4s ease-in-out infinite;
}
@keyframes _ctAuraFlame{
  0%,100%{
    box-shadow:0 0 0 2px color-mix(in srgb, var(--cx-cor,var(--accent)) 85%, transparent),
               0 0 10px 2px color-mix(in srgb, var(--cx-cor,var(--accent)) 50%, transparent),
               0 0 18px 5px color-mix(in srgb, var(--cx-cor,var(--accent)) 20%, transparent);
  }
  45%{
    box-shadow:0 0 0 2px color-mix(in srgb, var(--cx-cor,var(--accent)) 95%, transparent),
               0 0 15px 4px color-mix(in srgb, var(--cx-cor,var(--accent)) 68%, transparent),
               0 0 27px 8px color-mix(in srgb, var(--cx-cor,var(--accent)) 34%, transparent);
  }
  70%{
    box-shadow:0 0 0 2px color-mix(in srgb, var(--cx-cor,var(--accent)) 90%, transparent),
               0 0 11px 2px color-mix(in srgb, var(--cx-cor,var(--accent)) 55%, transparent),
               0 0 21px 6px color-mix(in srgb, var(--cx-cor,var(--accent)) 24%, transparent);
  }
}
.cx-node-info{min-width:0}
.cx-node-pseudo{font-size:12px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-node-arq{font-size:9px;letter-spacing:.5px;text-transform:uppercase;margin-top:1px;color:var(--cx-cor,var(--dim))}
.btn-invite{display:block;margin:8px 0 0;width:100%;padding:11px;border-radius:10px;border:1.5px dashed var(--border);background:transparent;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;text-align:center}
#po-posts-bg{position:absolute;inset:0;background:rgba(0,0,0,.82);z-index:700;display:none;align-items:flex-end}
#po-posts-sheet{background:var(--bg);border-radius:22px 22px 0 0;width:100%;max-height:85%;display:flex;flex-direction:column}
.po-post-card{padding:14px 16px;border-bottom:1px solid var(--border)}
.po-post-card:last-child{border-bottom:none}
.po-post-txt{font-size:13px;line-height:1.55;color:var(--text);margin-bottom:8px}
.po-post-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--dim)}
/* .arvore-post/.ap-txt/.ap-meta/.ap-stats/.tag-exp removidas 2026-08-03
   (Pilar, task #302/#351) -- eram exclusivas da tela "Minha Árvore",
   descontinuada. */
.srch-bar{padding:10px 12px 6px;position:sticky;top:0;background:var(--glass-tint);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border-bottom:1px solid var(--glass-edge);z-index:10}
/* Pedido da Pilar 2026-08-01: busca do Chat "não tem o glass do resto do
   app -- contrasta feio". A regra .srch-bar acima já tem background+blur
   (não é o mesmo bug do .po-header de hoje, que não tinha NENHUMA
   declaração). A diferença real: em #pane-busca o .srch-bar é usado sem
   margem (edge-to-edge), então o mesmo tom de --glass-tint do .pane por
   baixo (ver .pane,#chat-msgs{background-color:var(--glass-tint)} acima)
   faz costura invisível. Em #pane-chat o HTML usa
   style="margin:10px 12px 0" -- vira um retângulo flutuando com cantos
   retos e sem borda própria, então ele lê como uma caixa solta e feia em
   vez do "cartão de vidro" (radius+border+glass) usado em todo outro
   painel flutuante do app (ver #lp-card, .wcard etc.). Fix: dar a ele o
   mesmo tratamento de cartão de vidro, só nesta instância (a de
   #pane-busca continua sem radius/border de propósito, pois já é
   edge-to-edge e não deve ter cantos soltos). */
#pane-chat .srch-bar{border-radius:14px;border:1px solid var(--glass-edge);overflow:hidden}
/* Pedido da Pilar 2026-08-01 (item 7): botão que liga/desliga a busca
   lexical local do feed (#feed-lex-bar/#feed-lex-inp, ver linka_mobile.html
   e _feedLexToggle/_feedLexFiltrar em feed-nucleo.js). Redesign
   2026-08-01 (mockup dela, mesma rodada): deixou de flutuar solto no
   canto (position:absolute) e virou o último pill da própria fileira de
   praças, montado por montarPills() -- reusa a base visual de .p-pill
   (cápsula/vidro), só sem --pc (não tem cor de praça própria). */
#feed-lex-toggle{
  color:var(--dim);
  border-color:var(--glass-edge);
  background:var(--glass-tint);
}
#feed-lex-bar{margin:10px 12px 6px;border-radius:14px;border:1px solid var(--glass-edge);overflow:hidden}
.srch-inp{width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid var(--border);background:var(--glass-tint);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));color:var(--text);font-size:14px;font-family:inherit}
.srch-inp:focus{outline:none;border-color:var(--accent)}
/* Alguns navegadores Android ignoram autocomplete="off" em campos que
   "parecem" busca e forçam um fundo branco nativo de sugestão por cima do
   nosso CSS. Truque padrão pra vencer isso: um box-shadow inset gigante
   pinta por cima do fundo nativo antes que ele apareça (funciona em
   WebKit/Blink -- é a técnica usada contra o autofill amarelo também). */
.srch-inp,.srch-inp:-webkit-autofill,.srch-inp:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--glass-tint) inset;
  box-shadow:0 0 0 1000px var(--glass-tint) inset;
  -webkit-text-fill-color:var(--text);
}
.srch-tabs{display:flex;gap:6px;padding:6px 12px 4px}
.srch-tab{flex:1;padding:7px;border-radius:8px;border:none;background:var(--surf);color:var(--dim);font-size:12px;font-weight:600;cursor:pointer}
.srch-tab.on{background:var(--accent);color:var(--accent-btn,#f0eeff)}
.srch-result{padding:6px 12px 0}
.res-card{padding:13px;background:var(--surf);border-radius:var(--r);border:1px solid var(--border);margin-bottom:6px;cursor:pointer}
.res-card:active{opacity:.7}
.res-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.res-pseudo{font-size:13px}
.res-praca{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--res-cor,inherit)}
.res-txt{font-size:12px;color:var(--dim);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Resultado de busca tipo "pessoa" reaproveita .res-txt como linha de meta
   (arquétipo + contagem de pulsos) em vez de trecho de texto -- tinha um
   style="" inteiro sobrescrevendo o layout. Migração CSP style-src
   2026-08-02: vira modificador de classe. */
.res-txt.res-txt-meta{display:flex;justify-content:space-between;align-items:center}
.res-meta-item{color:var(--dim);font-size:11px}
.res-meta-item.upper{text-transform:uppercase;letter-spacing:.4px}
#p-hex-wrap{display:flex;justify-content:center;padding:12px 0 4px}
#p-hex{width:240px;height:240px}
#p-info{text-align:center;padding:0 20px 16px}
#p-pseudo{font-size:17px;margin-bottom:3px}
#p-email{font-size:12px;color:var(--dim);margin-bottom:8px}
#p-desc{font-size:13px;color:var(--dim);line-height:1.6;padding:0 8px}
.po-header{
  display:flex;align-items:flex-start;gap:14px;
  padding:20px 18px 16px;
  border-bottom:1px solid var(--glass-edge);
  flex-shrink:0;
  /* BUG 2026-07-31 (Pilar, prints de "Babiel"/"Maycon melo"): mesmo com
     --glass-tint em .94 (commit 36047cc), o vazamento de foto atrás do
     header continuava. Causa raiz REAL, achada só agora inspecionando o
     elemento ao vivo (getComputedStyle + varredura de stylesheets):
     .po-header NUNCA teve `background` nem `backdrop-filter` declarados
     -- nem antes nem depois do 36047cc, que só mudou o VALOR da variável
     --glass-tint, mas essa variável nunca foi consumida aqui. Todo outro
     painel translúcido do app (header /pane/#chat-conv-hdr/srch-bar/
     #lp-card/wcard) usa var(--glass-tint)+blur; só este ficava 100%
     transparente, deixando o que estivesse atrás (grade de posts/imagem
     de capa em #po-bg) aparecer sem nenhum vidro por cima. Fix: aplica o
     MESMO par glass-tint/blur do resto do app, igual aos outros painéis. */
  position:relative;z-index:1;
  background:var(--glass-tint);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.po-avatar{
  width:72px;height:72px;border-radius:50%;
  background:var(--surf2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;font-size:26px;
  font-family:'Playfair Display',serif;font-style:italic;
  color:var(--accent);letter-spacing:-.5px;
}
.po-avatar img{width:100%;height:100%;object-fit:cover}
/* Aura do admin — glow de energia pulsando e ciclando de cor (roxo → ciano
   → rosa), pedido explícito: "algo mais gaming", prenúncio do sistema
   futuro de níveis/skins (roxo agora, celeste neon no próximo nível,
   depois verde, laranja etc. — literalmente as cores que já ciclam aqui).
   Usa só box-shadow (nunca clipado pelo overflow:hidden do próprio avatar,
   ao contrário de um ::before/conic-gradient, que ficaria cortado). */
.po-avatar-adm{
  position:relative;
  animation:_admAuraFlame 2.6s ease-in-out infinite;
}
@keyframes _admAuraFlame{
  0%,100%{
    box-shadow:0 0 0 2px rgba(153,102,238,.8),
               0 0 12px 2px rgba(153,102,238,.55),
               0 0 24px 6px rgba(255,110,199,.3);
  }
  33%{
    box-shadow:0 0 0 2px rgba(110,231,255,.85),
               0 0 14px 3px rgba(110,231,255,.6),
               0 0 26px 7px rgba(153,102,238,.35);
  }
  66%{
    box-shadow:0 0 0 2px rgba(255,110,199,.85),
               0 0 14px 3px rgba(255,110,199,.6),
               0 0 26px 7px rgba(110,231,255,.35);
  }
}
.po-adm-tag{
  font-size:8.5px;font-weight:800;letter-spacing:1.2px;color:var(--accent);
  text-transform:uppercase;opacity:.85;display:block;margin-top:1px;
}
/* Pedido da Pilar 2026-07-25: "chama neon na aura do meu perfil visto em
   qualquer lugar que meu perfil aparecer... sempre com o ADM bordado no
   rodapé". Extensão do MESMO conceito de .po-avatar-adm/_admAuraFlame
   (roxo→ciano→rosa) só que pro HANDLE de texto (linka-pseudo) em vez do
   avatar redondo -- box-shadow não funciona em texto, então aqui é
   filter:drop-shadow animado (equivalente visual, funciona em qualquer
   glyph). O "ADM" no rodapé é um ::after posicionado embaixo do próprio
   span -- 100% CSS, não muda a estrutura do <span> que _htmlHandle()
   devolve, então não quebra nenhum layout que já dependia dele ser um
   elemento inline único.
*/
.linka-pseudo-adm{
  position:relative;
  animation:_handleAdmAura 2.6s ease-in-out infinite;
}
@keyframes _handleAdmAura{
  0%,100%{filter:drop-shadow(0 0 3px rgba(110,231,255,.85)) drop-shadow(0 0 7px rgba(110,231,255,.4))}
  33%{filter:drop-shadow(0 0 3px rgba(153,102,238,.85)) drop-shadow(0 0 7px rgba(153,102,238,.4))}
  66%{filter:drop-shadow(0 0 3px rgba(255,110,199,.85)) drop-shadow(0 0 7px rgba(255,110,199,.4))}
}
.linka-pseudo-adm::after{
  content:'ADM';
  position:absolute;left:0;bottom:-9px;
  font-size:7px;font-weight:800;letter-spacing:1.1px;
  color:#9bdcff;opacity:.9;white-space:nowrap;pointer-events:none;
}

/* ── Aura especial da Pilar — REESCRITA 2026-07-28 (v2) ──────────────────
   A v1 (box-shadow em camadas, mesma técnica do .po-avatar-adm antigo só
   trocando de cor) foi criticada pela própria Pilar com razão: "tudo que vi
   você fazer hoje foi uma linha em volta brilhosa, shimmering, e trocar de
   cor... sempre o mesmo estilo, só troca a cor". Isso é uma limitação
   TÉCNICA real da v1, não só de gosto: box-shadow só consegue desenhar
   camadas concêntricas da MESMA silhueta do elemento (um círculo, sempre um
   círculo) -- nunca uma forma orgânica de chama, não importa quanto se
   ajuste blur/spread/cor. Pra ter uma chama de verdade (lambidas
   assimétricas, irregulares, que lembrem fogo de verdade), o efeito precisa
   de FORMA variável, não só brilho -- daqui pra baixo é ::before/::after
   com border-radius animando entre valores bem diferentes (a técnica
   conhecida como "blob orgânico": um elemento com raios de canto
   independentes em cada lado, interpolando suavemente, nunca formando um
   círculo perfeito) + rotate/scale leves, em vez de box-shadow parado.
   RESTRIÇÃO TÉCNICA que isso trouxe: ::before/::after teriam que "vazar"
   pra fora da caixa do avatar, mas o avatar tem overflow:hidden (é o que
   corta a foto redonda). Pseudo-elemento não escapa de overflow:hidden do
   próprio pai (diferente de box-shadow, que escapa sempre). Solução: a
   classe de aura NÃO vai mais no <div class="po-avatar">/<div
   class="yph-avatar"> em si -- vai num <span class="po-avatar-aura-wrap">
   que ENVOLVE o avatar (mesmo padrão já usado em .cx-avatar-aura-wrap pro
   halo de Íntima, ver acima). O wrap não tem overflow:hidden, então a chama
   pinta livre por fora do círculo; o avatar continua cortando a foto
   normalmente, sem mudança nenhuma nele.
   Duas camadas por variante (::before = corpo da chama, mais lenta e maior;
   ::after = ponta, mais rápida, menor, blend "plus-lighter" pra parecer
   incandescência somando luz em vez de só sobrepor cor):
     - .po-avatar-aura-azul: núcleo quase preto rente ao avatar, corpo azul
       elétrico, ponta azul-clara quase branca -- "chamas azuis com preto".
     - .po-avatar-aura-amaterasu: núcleo 100% preto (referência de direção
       de arte ao Amaterasu do Sasuke em Naruto -- chama negra -- nunca
       reproduz nenhum asset/imagem da obra, só a ideia de "fogo negro
       queimando na borda"), corpo violeta, ponta prateada -- é o prata na
       ponta que lê como "brilhando" que ela pediu.
   Selecionável entre as duas quando a aba "Aura" (task #157) existir; até
   lá, azul é o default (pedido principal; Amaterasu é "variante").
   Handle de texto (.linka-pseudo-aura-*) não pode usar blob (glifo de texto
   não tem "forma de fundo" pra animar) -- mantém drop-shadow, mas agora com
   MAIS camadas e timing assimétrico/não-uniforme (menos "respiração suave",
   mais "tremular") pra ficar mais perto do efeito da chama do avatar. */
.po-avatar-aura-wrap{position:relative;display:inline-flex;flex-shrink:0}
.po-avatar-aura-wrap.po-avatar-aura-azul::before,
.po-avatar-aura-wrap.po-avatar-aura-azul::after,
.po-avatar-aura-wrap.po-avatar-aura-amaterasu::before,
.po-avatar-aura-wrap.po-avatar-aura-amaterasu::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
}
.po-avatar-aura-wrap.po-avatar-aura-azul > *,
.po-avatar-aura-wrap.po-avatar-aura-amaterasu > *{position:relative;z-index:1}
/* v4 (2026-07-28, feedback direto da Pilar com prints reais do Damadori):
   "gostei da aura, mas ela ta muito espalhada e muito grande, e
   sinceramente, nao parece fogo... eh bonito, mas eh grande e nao parece
   chamas." O v3 acima (inset -30%/-16%) tinha espaço de sobra generoso pra
   as "línguas" de gradiente se moverem, mas isso fazia a mancha ficar
   grande e difusa a ponto de virar "nebulosa" em vez de "chama colada no
   avatar". Fix: encolhe drasticamente o inset (-30%→-9%, -16%→-4%) pra
   prender o efeito bem rente à borda do círculo, e encolhe os raios de
   transparent-stop dos radial-gradients na mesma proporção (senão o
   degradê continuaria "vazando" pra fora da caixa menor e a mancha
   simplesmente ficaria cortada, não menor). Blur também reduzido (3px→2px,
   2px→1.5px) pra bordas mais definidas -- menos "nuvem", mais "labareda
   com contorno visível", que é o que ela pediu ("não é pra ser sutil, é
   pra ser claramente reconhecível"). */
.po-avatar-aura-wrap.po-avatar-aura-azul::before{
  inset:-9%;
  background:
    radial-gradient(circle at 30% 78%, rgba(20,80,255,.65) 0%, transparent 32%),
    radial-gradient(circle at 70% 76%, rgba(20,80,255,.6) 0%, transparent 30%),
    radial-gradient(circle at 50% 24%, rgba(6,10,26,.9) 0%, transparent 36%),
    radial-gradient(circle at 50% 58%, rgba(4,8,20,.85) 0%, transparent 42%);
  filter:blur(2px);
  animation:_chamaBodyA 2.1s ease-in-out infinite;
}
.po-avatar-aura-wrap.po-avatar-aura-azul::after{
  inset:-4%;
  background:
    radial-gradient(circle at 35% 73%, rgba(160,210,255,.9) 0%, transparent 22%),
    radial-gradient(circle at 65% 70%, rgba(140,195,255,.85) 0%, transparent 20%),
    radial-gradient(circle at 50% 79%, rgba(200,230,255,.75) 0%, transparent 17%);
  filter:blur(1.5px);
  mix-blend-mode:plus-lighter;
  animation:_chamaTipA 1.3s ease-in-out infinite;
}
.po-avatar-aura-wrap.po-avatar-aura-amaterasu::before{
  inset:-9%;
  background:
    radial-gradient(circle at 30% 78%, rgba(120,50,200,.6) 0%, transparent 32%),
    radial-gradient(circle at 70% 76%, rgba(120,50,200,.55) 0%, transparent 30%),
    radial-gradient(circle at 50% 20%, rgba(2,0,6,.95) 0%, transparent 36%),
    radial-gradient(circle at 50% 58%, rgba(2,0,6,.92) 0%, transparent 44%);
  filter:blur(2px);
  animation:_chamaBodyB 2.5s ease-in-out infinite;
}
.po-avatar-aura-wrap.po-avatar-aura-amaterasu::after{
  inset:-4%;
  background:
    radial-gradient(circle at 35% 73%, rgba(220,210,235,.85) 0%, transparent 20%),
    radial-gradient(circle at 65% 70%, rgba(200,180,225,.8) 0%, transparent 19%),
    radial-gradient(circle at 50% 79%, rgba(230,222,240,.7) 0%, transparent 16%);
  filter:blur(1.5px);
  mix-blend-mode:plus-lighter;
  animation:_chamaTipB 1.6s ease-in-out infinite;
}
/* Corpo da chama: border-radius com 8 valores independentes (4 cantos x
   2 eixos) interpolando entre formas bem diferentes -- nunca fecha num
   círculo, é o que dá a leitura de "lambida de fogo" em vez de "anel".
   Amplitude bem maior que uma v1 hipotética (20-80 em vez de 40-60) --
   é o que faz a distorção ficar óbvia a distância, não só de perto. */
@keyframes _chamaBodyA{
  0%,100%{border-radius:30% 70% 65% 35% / 75% 30% 70% 25%;transform:rotate(-6deg) scale(1)}
  25%    {border-radius:65% 35% 30% 70% / 30% 75% 25% 70%;transform:rotate(5deg) scale(1.08)}
  50%    {border-radius:35% 65% 70% 30% / 70% 25% 75% 30%;transform:rotate(-3deg) scale(0.94)}
  75%    {border-radius:70% 30% 35% 65% / 25% 70% 30% 75%;transform:rotate(7deg) scale(1.05)}
}
@keyframes _chamaTipA{
  0%,100%{border-radius:40% 60% 70% 30% / 80% 30% 70% 20%;transform:scale(0.8) translateY(4%)}
  33%    {border-radius:70% 30% 40% 60% / 30% 80% 25% 75%;transform:scale(1.15) translateY(-6%)}
  66%    {border-radius:30% 70% 55% 45% / 65% 35% 70% 30%;transform:scale(0.9) translateY(2%)}
}
@keyframes _chamaBodyB{
  0%,100%{border-radius:32% 68% 62% 38% / 72% 32% 68% 28%;transform:rotate(4deg) scale(1)}
  30%    {border-radius:66% 34% 32% 68% / 32% 70% 28% 72%;transform:rotate(-6deg) scale(1.06)}
  62%    {border-radius:38% 62% 68% 32% / 68% 28% 72% 32%;transform:rotate(5deg) scale(0.95)}
}
@keyframes _chamaTipB{
  0%,100%{border-radius:44% 56% 68% 32% / 78% 32% 68% 22%;transform:scale(0.82) translateY(3%)}
  40%    {border-radius:68% 32% 44% 56% / 32% 78% 26% 74%;transform:scale(1.12) translateY(-5%)}
  75%    {border-radius:34% 66% 58% 42% / 62% 34% 70% 30%;transform:scale(0.92) translateY(1%)}
}
.linka-pseudo-aura-azul{
  position:relative;
  animation:_handleAuraAzul 1.9s ease-in-out infinite;
}
@keyframes _handleAuraAzul{
  0%,100%{filter:drop-shadow(0 0 1.5px rgba(4,8,20,.9)) drop-shadow(0 0 5px rgba(40,110,255,.5)) drop-shadow(0 0 9px rgba(120,180,255,.25))}
  22%    {filter:drop-shadow(0 0 2px rgba(2,4,12,.95)) drop-shadow(0 0 7px rgba(90,170,255,.75)) drop-shadow(0 0 13px rgba(150,200,255,.4))}
  48%    {filter:drop-shadow(0 0 1.5px rgba(4,8,20,.88)) drop-shadow(0 0 5px rgba(30,90,255,.5)) drop-shadow(0 0 8px rgba(110,170,255,.22))}
  71%    {filter:drop-shadow(0 0 2.2px rgba(2,4,12,.96)) drop-shadow(0 0 8px rgba(100,180,255,.8)) drop-shadow(0 0 14px rgba(160,205,255,.42))}
}
.linka-pseudo-aura-azul::after{
  content:'ADM';
  position:absolute;left:0;bottom:-9px;
  font-size:7px;font-weight:800;letter-spacing:1.1px;
  color:#7fb4ff;opacity:.9;white-space:nowrap;pointer-events:none;
}
.linka-pseudo-aura-amaterasu{
  position:relative;
  animation:_handleAuraAmaterasu 2.3s ease-in-out infinite;
}
@keyframes _handleAuraAmaterasu{
  0%,100%{filter:drop-shadow(0 0 1.5px rgba(2,0,6,.95)) drop-shadow(0 0 5px rgba(120,60,200,.5)) drop-shadow(0 0 9px rgba(210,204,226,.18))}
  28%    {filter:drop-shadow(0 0 2.2px rgba(1,0,4,.98)) drop-shadow(0 0 8px rgba(160,90,235,.78)) drop-shadow(0 0 14px rgba(226,220,238,.36))}
  55%    {filter:drop-shadow(0 0 1.5px rgba(2,0,6,.92)) drop-shadow(0 0 5px rgba(130,65,205,.5)) drop-shadow(0 0 8px rgba(205,198,222,.16))}
  80%    {filter:drop-shadow(0 0 2px rgba(1,0,4,.97)) drop-shadow(0 0 7px rgba(150,85,225,.72)) drop-shadow(0 0 13px rgba(222,216,236,.32))}
}
.linka-pseudo-aura-amaterasu::after{
  content:'ADM';
  position:absolute;left:0;bottom:-9px;
  font-size:7px;font-weight:800;letter-spacing:1.1px;
  color:#c8a8f0;opacity:.9;white-space:nowrap;pointer-events:none;
}
/* ── Primitiva "neon" (2026-07-28) ─────────────────────────────────────
   Prova de que o sistema suporta estilos REALMENTE diferentes, não só cor
   trocada: em vez de blob orgânico (chama), aqui é um anel fino e
   geométrico (nunca muda de forma, sempre um círculo perfeito -- é
   propositalmente "rígido" pra ler como tubo de neon, o oposto de fogo) com
   dois comportamentos que não existem na chama: (1) flicker -- opacidade
   pisca em degraus irregulares (steps, não ease), imitando a cintilação
   real de um tubo de gás, nunca uma respiração suave; (2) um brilho
   girando ao redor do anel via conic-gradient rotacionado, simulando o gás
   circulando dentro do tubo. Ainda não tem nenhuma skin usando isso ao
   vivo -- é a base pronta pra quando o catálogo de aura tiver uma opção
   "neon" de verdade (não é o que a Pilar pediu pra ela mesma hoje, que é
   chama). */
.aura-neon-demo{position:relative;display:inline-flex;flex-shrink:0}
.aura-neon-demo::before{
  content:'';position:absolute;inset:-10%;border-radius:50%;z-index:0;pointer-events:none;
  background:conic-gradient(from 0deg, var(--neon-c1,#3ef0ff), var(--neon-c2,#ff3ef0), var(--neon-c1,#3ef0ff));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation:_neonSpin 3.5s linear infinite, _neonFlicker 2.6s steps(1) infinite;
  filter:drop-shadow(0 0 4px var(--neon-c1,#3ef0ff)) drop-shadow(0 0 9px var(--neon-c2,#ff3ef0));
}
.aura-neon-demo > *{position:relative;z-index:1}
@keyframes _neonSpin{to{transform:rotate(360deg)}}
@keyframes _neonFlicker{
  0%,100%{opacity:1}
  4%{opacity:.4} 6%{opacity:1} 7%{opacity:.7} 9%{opacity:1}
  52%{opacity:1} 53%{opacity:.5} 55%{opacity:1}
  78%{opacity:.85} 80%{opacity:1}
}
.po-header-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.po-header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.po-header-hex{width:56px;height:56px;flex-shrink:0}
.po-header-icons{display:flex;gap:8px;align-items:center}
.po-icon-btn{
  width:34px;height:34px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--dim) 15%,transparent);
  background:color-mix(in srgb,var(--dim) 9%,transparent);
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--dim);
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.po-icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.po-icon-btn.po-icon-accent{
  color:var(--accent);
  background:linear-gradient(135deg,color-mix(in srgb,#c8b0ee 20%,transparent) 0%,color-mix(in srgb,var(--accent) 24%,transparent) 100%);
  border-color:color-mix(in srgb,var(--accent) 38%,transparent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 35%,transparent);
}
.po-icon-btn.po-icon-playing{animation:_poPulse 1.6s ease-in-out infinite}
.po-icon-btn.po-icon-dashed{border-style:dashed;opacity:.6}
.po-icon-btn.po-icon-dashed:active{opacity:.9}
@keyframes _poPulse{0%,100%{box-shadow:0 0 10px color-mix(in srgb,var(--accent) 35%,transparent)}50%{box-shadow:0 0 18px color-mix(in srgb,var(--accent) 65%,transparent)}}
.po-bio{font-size:12.5px;color:var(--dim);line-height:1.5;margin-top:5px;white-space:pre-wrap;word-break:break-word}
.po-name{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.po-arq-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* 2026-07-30 (Pilar: "cabeçalho do perfil visitado não é bonito quanto o
   Home"): um ponto concreto e de baixo risco pra corrigir sem acesso visual
   ao vivo -- a tag de arquétipo aqui usava fonte monoespaçada em caixa alta
   negrito (estilo "chip técnico"), bem diferente de .yph-arq no Home (fonte
   padrão, peso normal, uppercase mais discreto). Alinhando os dois pra
   consistência tipográfica entre as duas telas de perfil. */
.po-arq-tag{font-size:11px;font-weight:400;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.po-age-tag{font-size:11px;color:var(--faint-text,var(--dim));opacity:.7}
.po-cx-pill{font-size:9px;padding:2px 8px;border-radius:6px;font-weight:700;letter-spacing:.3px}
.stat-row{display:flex;justify-content:center;gap:28px;padding:14px 0 20px}
.stat{text-align:center}
.stat-v{font-size:22px;font-weight:700;color:var(--text);line-height:1}
.stat-l{font-size:10px;color:var(--dim);margin-top:3px;letter-spacing:.3px}
.menu-card{margin:0 12px;border-radius:var(--r);background:var(--surf);border:1px solid var(--border);overflow:hidden}
.menu-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);
  cursor:pointer;font-size:14px;color:var(--text);
}
.menu-row:last-child{border-bottom:none}
.menu-row.danger{color:var(--vox)}
.menu-arrow{color:var(--dim);font-size:16px}
.menu-lbl{display:flex;align-items:center;gap:10px}
.menu-icon{font-size:14px;width:18px;text-align:center;opacity:.7}
.mp-card{margin:4px 12px;padding:13px;background:var(--surf);border-radius:var(--r);border:1px solid var(--border);border-left:2.5px solid var(--tc,var(--border));cursor:pointer}
.mp-txt{font-size:13px;line-height:1.52;color:var(--text);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.mp-meta{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:10px;color:var(--dim)}
/* color:var(--tc) herda do --tc já setado no .mp-card ancestral (via
   data-svars/CSSOM) -- não precisa de custom property própria aqui.
   Migração CSP style-src 2026-08-02. */
.mp-praca{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--tc,var(--dim))}
.mp-img{width:100%;border-radius:8px;margin-top:6px;max-height:240px;object-fit:cover}
.mp-video-wrap{position:relative;margin-top:6px}
.mp-video{width:100%;border-radius:8px;max-height:240px;object-fit:contain;display:block;filter:var(--mp-video-filtro,none)}
.mp-thread-btn{display:flex;align-items:center;gap:4px;background:none;border:1px solid var(--accent);border-radius:20px;padding:3px 10px;cursor:pointer;color:var(--accent);font-size:11px;font-weight:700}
.mp-thread-badge{background:var(--accent);color:#fff;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:9px}
#login-bg{position:absolute;inset:0;background:rgba(0,0,0,.72);z-index:800;display:none;align-items:flex-end}
#login-bg.on{display:flex}
#login-box{
  width:100%;background:var(--surf);
  border-radius:20px 20px 0 0;
  padding:28px 20px calc(20px + env(safe-area-inset-bottom));
}
#login-box h2{font-size:21px;font-weight:800;margin-bottom:5px}
#login-box p{font-size:13px;color:var(--dim);margin-bottom:22px;line-height:1.5}
.btn-main{width:100%;padding:14px;border-radius:12px;border:none;background:var(--accent);color:var(--accent-btn,#f0eeff);font-size:15px;font-weight:800;cursor:pointer;margin-top:4px}
.btn-sec{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--dim);font-size:13px;cursor:pointer;margin-top:8px}
.login-links{display:flex;justify-content:space-between;margin-top:14px}
#login-forgot{
  display:none;
  opacity:0;
  width:100%;
  text-align:center;
  margin-top:16px;
  cursor:pointer;
  font-size:13px;
  letter-spacing:.08em;
  font-family:inherit;
  padding:6px 0;
  border:none;
  -webkit-appearance:none;
  appearance:none;
  background:linear-gradient(90deg,var(--dim) 0%,var(--dim) 20%,#c4a0ff 40%,#fff 50%,#c4a0ff 60%,var(--dim) 80%,var(--dim) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 2.8s linear infinite;
  transition:opacity .4s ease;
}
.txt-link{font-size:12px;color:var(--accent);cursor:pointer;background:none;border:none;padding:0}
#senha-bg{position:absolute;inset:0;background:rgba(0,0,0,.65);z-index:720;display:none;align-items:flex-end}
#senha-bg.on{display:flex}
#senha-box{
  width:100%;background:var(--surf);
  border-radius:20px 20px 0 0;
  padding:26px 20px calc(22px + env(safe-area-inset-bottom));
}
#senha-box h3{font-size:19px;font-weight:800;margin-bottom:5px}
#senha-box .sub{font-size:12px;color:var(--dim);margin-bottom:20px;line-height:1.5}
.code-box{
  padding:12px 14px;background:var(--surf2);border-radius:9px;
  font-size:12px;color:var(--yuan);border:1px solid rgba(106,170,114,.2);
  margin-bottom:14px;line-height:1.5;
}
.code-box strong{font-family:'Courier New',monospace;font-size:18px;letter-spacing:4px}
#cfg-bg{position:fixed;inset:0;z-index:249;display:none;pointer-events:none}
#cfg-bg.on{display:block}
#cfg-sheet{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--surf);border-radius:18px 18px 0 0;
  padding:0 0 calc(20px + env(safe-area-inset-bottom));
  max-height:80%;overflow-y:auto;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);z-index:301;
}
#cfg-bg.on #cfg-sheet{transform:translateY(0)}
.cfg-handle{width:36px;height:4px;border-radius:2px;background:var(--faint);margin:14px auto 20px}
.cfg-group{padding:0 16px;margin-bottom:20px}
.cfg-group-title{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.cfg-btns{display:flex;gap:8px}
.cfg-btn{flex:1;padding:10px;border-radius:10px;border:1.5px solid var(--border);background:var(--surf2);color:var(--dim);font-size:12px;font-weight:600;cursor:pointer}
.cfg-btn.on{background:var(--accent);color:var(--accent-btn,#f0eeff);border-color:var(--accent)}
#criar-bg{position:absolute;inset:0;background:var(--bg);z-index:400;display:none;flex-direction:column;padding-top:env(safe-area-inset-top)}
#criar-bg.on{display:flex}
#criar-top{display:flex;align-items:center;justify-content:flex-end;padding:16px;border-bottom:1px solid var(--border);flex-shrink:0}
#criar-top h2{font-size:16px;font-weight:700}
.btn-x{background:none;border:none;font-size:26px;color:var(--dim);cursor:pointer;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;line-height:1}
#criar-ta{flex:1;margin:0 14px;padding:14px;background:var(--surf);border-radius:12px;border:1.5px solid var(--border);color:var(--text);font-size:15px;line-height:1.55;resize:none;font-family:inherit;margin-top:4px}
#criar-ta:focus{outline:none;border-color:var(--accent)}
#criar-foot{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-top:1px solid var(--border)}
#criar-count{font-size:11px;color:var(--dim)}
.btn-pub{padding:10px 22px;border-radius:10px;border:none;background:var(--accent);color:var(--accent-btn,#f0eeff);font-size:13px;font-weight:700;cursor:pointer}
.btn-pub:disabled{opacity:.35;cursor:default}
/* Item 2026-07-26 (Pilar, item 4: "fundo circular translúcido tipo os
   botões do modal de vídeo, pra parecer um conjunto único"): mesma
   receita visual do #criar-vid-mute-btn (glass escuro + blur + borda
   fininha branca), agora aplicada aos 3 ícones de ação do rodapé do
   composer -- antes eram só ícones soltos sem fundo nenhum. */
.criar-foot-icons{display:flex;align-items:center;gap:6px;}
.criar-icon-btn{
  background:rgba(255,255,255,.05);border:0.5px solid rgba(255,255,255,.1);
  cursor:pointer;width:34px;height:34px;color:var(--dim);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:color .15s,background .15s,border-color .15s;
}
.criar-icon-btn:active,.criar-icon-btn:hover{
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:color-mix(in srgb,var(--accent) 35%,transparent);
}
#criar-loc-btn.pendente{color:var(--accent);animation:loc-pulse 1s ease-in-out infinite;}
#criar-loc-btn.ativo{
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:color-mix(in srgb,var(--accent) 35%,transparent);
}
@keyframes loc-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
/* Item 2026-07-26 (Pilar, item 3 da lista de estética do estúdio: "cards
   menores, mais discretos, tipografia mais fina, tipo Showit") -- badge de
   localização no card de prévia, mesmo espírito das outras mudanças desta
   rodada: menor, com mais letter-spacing (leitura mais editorial, menos
   "chip de app genérico"). */
.post-loc-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;letter-spacing:.01em;color:var(--dim);margin-top:2px;max-width:100%;}
.post-loc-badge svg{flex-shrink:0;}
.post-loc-badge span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}

/* ── Prévia de post: mesma linguagem visual do handle (lp-card) — vidro
   translúcido, tarja colorida da praça, avatar hex, pseudo em Playfair ── */
/* Não volta a ser um "card": é uma legenda editorial, sem caixa, sombra ou
   vidro. O bloco não pode ficar display:none porque contém pseudo, praça,
   texto e localização — esconder tudo deixava a prévia reduzida ao vídeo e
   aos dois botões, exatamente o fluxo confuso visto na gravação. */
#criar-preview-card{
  width:100%;max-width:460px;display:flex;flex-shrink:0;margin-top:14px;
  color:var(--text);
}
#criar-preview-stripe{display:none;}
#criar-preview-card-body{padding:0 2px;flex:1;min-width:0;}
/* Item 2026-07-26 (Pilar: "parece que uma criança fez tentando imitar o
   tiktok usando windows 98"): achado -- o <video> desta tela específica
   (a prévia final, "Assim vai ficar o post") era o ÚNICO ponto de todo o
   estúdio de criação com o atributo `controls` nativo do navegador --
   barra cinza padrão do sistema, com menu de contexto (Download/
   Playback speed/Picture-in-picture) sobre um app que em todo resto usa
   vidro translúcido roxo com blur. O modal de corte (#criar-vid-modal)
   já tinha um player 100% customizado (ver #criar-vid-mute-btn acima) --
   aqui reaproveita exatamente a mesma linguagem, só que na tela de
   prévia. Sem `controls`: tap no vídeo alterna play/pause (mesmo padrão
   de _toggleVidModalPlay), botão de som no canto no mesmo estilo do
   resto do estúdio.
   */
.criar-preview-vid-wrap{position:relative;display:inline-block;max-width:100%;}
.criar-preview-vid-wrap video{cursor:pointer;}
.criar-preview-vid-mute{
  position:absolute;top:10px;right:10px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(10,7,20,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:0.5px solid rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.criar-preview-vid-mute:active{background:rgba(153,102,238,.35);}
.criar-preview-vid-playicon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;
  background:rgba(10,7,20,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:0.5px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
  color:#fff;pointer-events:none;
  opacity:0;transition:opacity .15s ease;
}
.criar-preview-vid-wrap.pausado .criar-preview-vid-playicon{opacity:1;}
#criar-preview-author{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.criar-preview-hex{
  width:34px;height:34px;flex-shrink:0;border-radius:50%;overflow:hidden;
  background:var(--surf2);display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:var(--text);
}
.criar-preview-info{min-width:0;}
.criar-preview-pseudo{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.criar-preview-praca{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-top:2px;color:var(--cpp-cor,inherit)}
#criar-preview-textwrap p{margin:0;color:var(--text);font-size:14px;line-height:1.6;white-space:pre-wrap;}
/* Migração CSP style-src 2026-08-02 (composer-musica-local-publicar.js):
   classes que substituem style="" inline usado na montagem da prévia final
   do post (_abrirPreviewPost). */
.criar-preview-avatar-img{width:100%;height:100%;object-fit:cover}
.criar-preview-media-img,.criar-preview-media-vid{max-width:100%;max-height:52vh;border-radius:16px;object-fit:contain;box-shadow:0 24px 60px rgba(0,0,0,.55);border:1px solid rgba(206,210,222,.32);display:block}
.criar-preview-notext{color:var(--faint);font-style:italic}
.criar-preview-music-wrap{display:flex;justify-content:center;padding:4px 16px 10px;flex-shrink:0}
.criar-preview-music-btn{display:flex;align-items:center;gap:7px;background:rgba(153,102,238,.12);border:0.5px solid rgba(153,102,238,.3);border-radius:999px;padding:6px 13px;cursor:pointer;color:#e4d9ff;max-width:100%;-webkit-tap-highlight-color:transparent}
.criar-preview-music-icon{flex-shrink:0}
.criar-preview-music-label{font-size:11.5px;font-weight:500;letter-spacing:.01em;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#conv-bg{position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:500;display:none;align-items:center;justify-content:center;padding:20px}
#email-conv-bg{position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:500;display:none;align-items:center;justify-content:center;padding:20px}
#conv-bg.on{display:flex}
#conv-box{width:100%;max-width:380px;background:var(--surf);border-radius:18px;padding:24px;border:1px solid var(--border)}
.circ-btn{background:var(--surf2);color:var(--dim);border:1px solid var(--border);padding:6px 14px;border-radius:20px;font-size:13px;cursor:pointer;transition:all .15s}
.circ-btn.circ-sel{background:var(--acc);color:#fff;border-color:var(--acc)}
#conv-box h3{font-size:17px;font-weight:700;margin-bottom:4px}
#conv-box p{font-size:13px;color:var(--dim);margin-bottom:18px;line-height:1.5}
#conv-res{display:none;margin-top:14px;padding:14px;background:var(--surf2);border-radius:10px;border:1px solid var(--border)}
#conv-res small{font-size:11px;color:var(--dim);display:block;margin-top:6px}
#conv-link-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
#conv-cod{flex:1;font-size:12px;color:var(--fg);font-family:monospace;word-break:break-all;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:8px 10px;line-height:1.4}
#conv-copy-btn,.conv-copy-btn-like{flex-shrink:0;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer}
#codigo-cx-bg{position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:500;display:none;align-items:center;justify-content:center;padding:20px}
#codigo-cx-box{width:100%;max-width:380px;background:var(--surf);border-radius:18px;padding:24px;border:1px solid var(--border)}
#codigo-cx-box h3{font-size:17px;font-weight:700;margin-bottom:4px}
#codigo-cx-box p{font-size:13px;color:var(--dim);margin-bottom:18px;line-height:1.5}
.codigo-cx-divisor{text-align:center;font-size:11px;color:var(--dim);margin:16px 0;position:relative}
.codigo-cx-divisor::before,.codigo-cx-divisor::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--border)}
.codigo-cx-divisor::before{left:0}.codigo-cx-divisor::after{right:0}
#codigo-cx-resultado{display:none;margin-top:12px;padding:14px;background:var(--surf2);border-radius:10px;border:1px solid var(--border)}
#codigo-cx-valor{font-size:20px;font-weight:800;letter-spacing:1px;color:var(--accent);font-family:monospace;text-align:center;margin-bottom:8px}
#codigo-cx-resultado small{font-size:11px;color:var(--dim);display:block;text-align:center}
/* QR do código + scanner (item 12 do plano 2026-07-25) */
#codigo-cx-qr{display:flex;justify-content:center;margin:4px 0 10px}
#codigo-cx-qr svg{width:150px;height:150px;background:#fff;border-radius:10px;padding:8px;box-sizing:border-box}
#qr-scan-bg{position:absolute;inset:0;background:rgba(0,0,0,.88);z-index:960;display:none;align-items:center;justify-content:center;padding:20px}
#qr-scan-box{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:14px}
#qr-scan-video-wrap{position:relative;width:100%}
#qr-scan-video{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;background:#000;display:block}
#qr-scan-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(62vw,240px);aspect-ratio:1/1;border:2.5px solid rgba(255,255,255,.85);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.35);pointer-events:none}
#qr-scan-status{color:#fff;font-size:13px;font-weight:600;text-align:center}
/* Pedido da Pilar 2026-07-24: notificação/toast de erro (e de qualquer
   aviso) chegando com mais elegância -- "opaca e translúcida" ao mesmo
   tempo, ou seja, vidro fosco (fundo semi-transparente + blur), não uma
   barra sólida lisa como antes. Mesmo componente serve pra toast normal
   e de erro (mesma função toast() em utils.js). */
#toast{
  position:absolute;bottom:calc(var(--nh)+16px);left:14px;right:14px;
  background:color-mix(in srgb, var(--surf3) 72%, transparent);
  color:var(--text);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;
  padding:12px 18px;font-size:13px;font-weight:500;
  z-index:1000;pointer-events:none;
  opacity:0;transform:translateY(10px) scale(.97);
  transition:opacity .22s ease,transform .22s ease;text-align:center;
  backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 10px 28px rgba(0,0,0,.32);
}
#toast.on{opacity:1;transform:translateY(0) scale(1)}

/* ── CHAT ── */
.chat-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.chat-item:active{background:var(--surf1)}
.chat-hex{flex-shrink:0;width:44px;height:44px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}
.chat-avatar-img{flex-shrink:0;width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.chat-avatar-ini{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#6633cc,#3388dd);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
/* Migração CSP style-src/script-src 2026-08-02 (chat-lista-conversas.js):
   style=""/onclick=""/onerror="" inline trocados por classes + data-act/
   data-idx (delegação) + data-fallback (mesmo padrão de outros módulos). */
.chat-empty-pad20{padding:20px}
.chat-empty-pad20-dim{padding:20px;color:var(--dim)}
.chat-empty-pad20-14{padding:20px 14px}
.chat-empty-margin-dim{margin:16px 14px 0;font-size:13px;color:var(--dim)}
.chat-dim-small{color:var(--dim)}
/* Avatar grande do header da conversa (#chat-conv-avatar) -- diferente do
   .chat-avatar-img da lista (44px fixo), esse preenche o container pai. */
.chat-conv-avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;-webkit-touch-callout:none;pointer-events:none}
.chat-bot-avatar-grad{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#6633cc,#3388dd);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}
.chat-po-trigger{cursor:pointer;flex-shrink:0}
.chat-meta{flex:1;min-width:0}
.chat-pseudo{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.chat-preview{font-size:11px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.2)}
/* Migração CSP style-src 2026-08-02 (_chatBuscarCirculo, chat-avancado-
   composer.js) -- placeholders de busca + variantes de linha de resultado. */
.chat-search-status{padding:10px 16px;font-size:12px}
.chat-preview-tag{font-size:10px;letter-spacing:.4px;text-transform:uppercase}
.chat-circulo-envelope{font-size:11px;color:var(--accent);font-weight:700}
/* Pedido da Pilar 2026-08-01: timestamp da lista de conversas ilegível.
   Causa raiz: usava color:var(--faint,var(--dim)) -- mas --faint É
   definida em todo tema (dark: #1e1e33 quase preto; claro/descanso:
   #ccc8e0 quase branco), então o fallback pro --dim nunca era usado.
   --faint foi feita pra PREENCHIMENTO sutil (background de tag/pill,
   ver .tag-exp/.cfg-handle acima), não pra cor de TEXTO -- por isso
   ficava baixo-contraste em qualquer tema (escuro sobre escuro, claro
   sobre claro). O par certo pra texto secundário pequeno já existe e
   já é usado no timestamp de cada mensagem dentro da conversa
   (.msg-time, var(--dim), nunca reportado como ilegível) -- troca pra
   var(--dim) direto, mesma variável de tema, sem valor fixo. */
.chat-time{font-size:10px;color:var(--dim);flex-shrink:0;align-self:flex-start;padding-top:2px;text-shadow:0 1px 2px rgba(0,0,0,.2)}

/* conversa individual */
#chat-conv-bg{position:absolute;inset:0;background:var(--bg);z-index:700;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);pointer-events:none;padding-top:env(safe-area-inset-top)}
#chat-conv-hdr{display:flex;align-items:center;gap:10px;padding:12px 16px 10px;flex-shrink:0;border-bottom:1px solid var(--glass-edge);position:relative;z-index:1;background:var(--glass-tint);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat))}
#chat-conv-pseudo{font-size:14px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chat-conv-arq{font-size:9px;font-weight:700;letter-spacing:.8px;color:var(--dim);text-transform:uppercase}
#chat-msgs{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px 8px;display:flex;flex-direction:column;gap:8px;position:relative;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPgo8ZGVmcz4KPGcgaWQ9ImJmbHkiPgogIDxwYXRoIGQ9Ik0wLDAgQy01LC0xMCAtMTgsLTE1IC0yMiwtNiBDLTE4LDIgLTYsMyAwLDJaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8cGF0aCBkPSJNMCwwIEM1LC0xMCAxOCwtMTUgMjIsLTYgQzE4LDIgNiwzIDAsMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxwYXRoIGQ9Ik0wLDIgQy00LDggLTEzLDkgLTEzLDUgQy05LDEgLTQsMSAwLDJaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8cGF0aCBkPSJNMCwyIEM0LDggMTMsOSAxMyw1IEM5LDEgNCwxIDAsMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxsaW5lIHgxPSIwIiB5MT0iLTIiIHgyPSIwIiB5Mj0iOCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41IiBmaWxsPSJub25lIi8+CjwvZz4KPGcgaWQ9ImxmIj4KICA8cGF0aCBkPSJNMCwwIEM2LC03IDcsLTE2IDAsLTIwIEMtNywtMTYgLTYsLTcgMCwwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjgiLz4KICA8bGluZSB4MT0iMCIgeTE9Ii0xIiB4Mj0iMCIgeTI9Ii0xOSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC40IiBvcGFjaXR5PSIwLjYiLz4KPC9nPgo8ZyBpZD0icmFtbyI+CiAgPHBhdGggZD0iTTAsMCBRNSwtMTIgMywtMjYiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTIsLTExIFExMCwtMTUgMTIsLTIxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0yLC0xMSBRLTYsLTE1IC03LC0yMSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8ZWxsaXBzZSBjeD0iMTIiIGN5PSItMjEiIHJ4PSI0IiByeT0iMi4yIiB0cmFuc2Zvcm09InJvdGF0ZSgtMjAsMTIsLTIxKSIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPGVsbGlwc2UgY3g9Ii03IiBjeT0iLTIxIiByeD0iNCIgcnk9IjIuMiIgdHJhbnNmb3JtPSJyb3RhdGUoMjAsLTcsLTIxKSIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPGVsbGlwc2UgY3g9IjMiIGN5PSItMjYiIHJ4PSIzIiByeT0iMS42IiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNjUiLz4KPC9nPgo8ZyBpZD0iaGV4Ij4KICA8cGF0aCBkPSJNMCwtMTQgTDEyLDcgTC0xMiw3IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOCIvPgogIDxwYXRoIGQ9Ik0wLDE0IEwtMTIsLTcgTDEyLC03IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOCIvPgo8L2c+CjxnIGlkPSJ0cmkiPgogIDxwYXRoIGQ9Ik0wLC0xNCBMMTIsNyBMLTEyLDcgWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC44Ii8+CiAgPGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNiIvPgo8L2c+CjxnIGlkPSJmbHYiPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI3IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjU1Ii8+CiAgPGNpcmNsZSBjeD0iNyIgY3k9IjAiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSItNyIgY3k9IjAiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSIzLjUiIGN5PSI2IiByPSI3IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjU1Ii8+CiAgPGNpcmNsZSBjeD0iLTMuNSIgY3k9IjYiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSIzLjUiIGN5PSItNiIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41NSIvPgogIDxjaXJjbGUgY3g9Ii0zLjUiIGN5PSItNiIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41NSIvPgo8L2c+CjxnIGlkPSJ0dWxwIj4KICA8bGluZSB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iLTE4IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjgiLz4KICA8cGF0aCBkPSJNMCwtMTAgQy01LC0xNCAtNiwtMjIgMCwtMjAgQzYsLTIyIDUsLTE0IDAsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjgiLz4KICA8cGF0aCBkPSJNLTMsLTEwIEMtOCwtMTMgLTgsLTggLTMsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPHBhdGggZD0iTTMsLTEwIEM4LC0xMyA4LC04IDMsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CjwvZz4KPGcgaWQ9Im1hY2EiPgogIDxwYXRoIGQ9Ik0xLC0xNiBDMywtMjAgNywtMTggNSwtMTUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTS0xLC05IEMtNywtMTIgLTksLTQgLTgsNCBDLTcsMTIgLTMsMTYgMCwxNiBDMywxNiA3LDEyIDgsNCBDOSwtNCA3LC0xMiAxLC05IEMwLC02IDAsLTYgLTEsLTlaIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNzUiLz4KICA8cGF0aCBkPSJNMSwtOSBDNCwtMTMgOCwtMTAgNywtNyBDNSwtNCAyLC03IDEsLTlaIiBmaWxsPSIjMDIwMjA4Ii8+CjwvZz4KPGcgaWQ9ImZpbG0iPgogIDxyZWN0IHg9Ii0xMSIgeT0iLTE0IiB3aWR0aD0iMjIiIGhlaWdodD0iMjgiIHJ4PSIxIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjgiLz4KICA8cmVjdCB4PSItNyIgeT0iLTEwIiB3aWR0aD0iMTQiIGhlaWdodD0iMjAiIHJ4PSIwLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNSIvPgogIDxyZWN0IHg9Ii0xMyIgeT0iLTExIiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSItMTMiIHk9Ii0zLjUiIHdpZHRoPSIyLjUiIGhlaWdodD0iMy41IiByeD0iMC4zIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNyIvPgogIDxyZWN0IHg9Ii0xMyIgeT0iNCIgd2lkdGg9IjIuNSIgaGVpZ2h0PSIzLjUiIHJ4PSIwLjMiIGZpbGw9ImN1cnJlbnRDb2xvciIgb3BhY2l0eT0iMC43Ii8+CiAgPHJlY3QgeD0iMTAuNSIgeT0iLTExIiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSIxMC41IiB5PSItMy41IiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSIxMC41IiB5PSI0IiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KPC9nPgo8ZyBpZD0iZXQiPgogIDxjaXJjbGUgY3g9Ii0xMCIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIvPgogIDxjaXJjbGUgY3g9IjEwIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC43Ii8+CiAgPHBhdGggZD0iTS0xMCw4IEwwLC0xIEwxMCw4IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMCwtMSBMLTIsLTciIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIgZmlsbD0ibm9uZSIvPgogIDxsaW5lIHgxPSItNCIgeTE9Ii03IiB4Mj0iMiIgeTI9Ii03IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciLz4KICA8Y2lyY2xlIGN4PSItMiIgY3k9Ii0xMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjc1Ii8+CiAgPHBhdGggZD0iTS0yLC05IEwtNSwtNyBMMCwtNyBaIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNjUiLz4KICA8ZWxsaXBzZSBjeD0iNiIgY3k9Ii0yIiByeD0iMyIgcnk9IjQiIGZpbGw9ImN1cnJlbnRDb2xvciIgb3BhY2l0eT0iMC43Ii8+CjwvZz4KPGcgaWQ9ImNvbnN0Ij4KICA8Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iMS40IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9Ii05IiByPSIxLjAiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxjaXJjbGUgY3g9IjI0IiBjeT0iNSIgcj0iMS40IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8Y2lyY2xlIGN4PSIxMSIgY3k9IjE1IiByPSIxLjAiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxjaXJjbGUgY3g9Ii01IiBjeT0iMTgiIHI9IjEuMCIgZmlsbD0iY3VycmVudENvbG9yIi8+CiAgPGxpbmUgeDE9IjAiIHkxPSIwIiB4Mj0iMTYiIHkyPSItOSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC40Ii8+CiAgPGxpbmUgeDE9IjE2IiB5MT0iLTkiIHgyPSIyNCIgeTI9IjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNCIvPgogIDxsaW5lIHgxPSIyNCIgeTE9IjUiIHgyPSIxMSIgeTI9IjE1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjQiLz4KICA8bGluZSB4MT0iMTEiIHkxPSIxNSIgeDI9Ii01IiB5Mj0iMTgiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNCIvPgo8L2c+CjxnIGlkPSJpbmYiPgogIDxwYXRoIGQ9Ik0wLDAgQzQsLTggMTQsLTggMTQsMCBDMTQsOCA0LDggMCwwIEMtNCwtOCAtMTQsLTggLTE0LDAgQy0xNCw4IC00LDggMCwwWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC44Ii8+CjwvZz4KPGcgaWQ9Imx1YSI+CiAgPHBhdGggZD0iTTYsLTExIEExMywxMyAwIDEgMCA2LDExIEE5LDkgMCAxIDEgNiwtMTFaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9nPgo8ZyBpZD0iZXN0cmVsYSI+CiAgPHBhdGggZD0iTTAsLTkgTDEuMiwtMS4yIEw5LDAgTDEuMiwxLjIgTDAsOSBMLTEuMiwxLjIgTC05LDAgTC0xLjIsLTEuMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L2c+CjwvZGVmcz4KCjwhLS0gQk9SQk9MRVRBIChsb2dvIOKAlCBtYWlzIGluc3TDom5jaWFzKSAtLT4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAwLDE4MCkgc2NhbGUoMS42KSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTciLz4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjIwLDUyMCkgcm90YXRlKDgpIHNjYWxlKDEuNCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg1MCwxMzApIHJvdGF0ZSgtNikgc2NhbGUoMS4yKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLDcyMCkgcm90YXRlKDEwKSBzY2FsZSgxLjUpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNiIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3ODAsODQwKSByb3RhdGUoLTQpIHNjYWxlKDEuMykiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0MCw5MDApIHJvdGF0ZSg1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5NTAsNTYwKSByb3RhdGUoLTEwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzODAsMzgwKSByb3RhdGUoMTIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY4MCw3MCkgcm90YXRlKC04KSBzY2FsZSgxLjMpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgoKPCEtLSBGT0xIQVMgLS0+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNTAsODApIHJvdGF0ZSgzNSkgc2NhbGUoMS4yKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTYiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkwLDMxMCkgcm90YXRlKC0yNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDczMCwyODApIHJvdGF0ZSg1MCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTYiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwMCw2NjApIHJvdGF0ZSgtNDApIHNjYWxlKDEuMykiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4NzAsNDMwKSByb3RhdGUoMjApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNjAsNTYwKSByb3RhdGUoLTYwKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjYwLDc2MCkgcm90YXRlKDMwKSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAsODkwKSByb3RhdGUoLTE1KSBzY2FsZSgxLjIpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQwLDgyMCkgcm90YXRlKDQ1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUwLDE1MCkgcm90YXRlKC0zNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkxMCw2OTApIHJvdGF0ZSgxOCkgc2NhbGUoMS4xKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTQiLz4KCjwhLS0gUkFNT1MgLS0+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ4MCwyMjApIHJvdGF0ZSgtMTIpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2MCw0NjApIHJvdGF0ZSgxOCkgc2NhbGUoMS4xKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjcmFtbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODIwLDY1MCkgcm90YXRlKC0zMCkgc2NhbGUoMS4zKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjcmFtbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTgwLDM3MCkgcm90YXRlKDQwKSBzY2FsZSgxLjApIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMTAsODEwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcwLDU5MCkgcm90YXRlKDIyKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3NTAsOTUwKSByb3RhdGUoLTE4KSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xMyIvPgoKPCEtLSBHRU9Nw4lUUklDTyBFU09Uw4lSSUNPIC0tPgo8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcyMCw5MCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjaGV4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAsNTgwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg5MCw4OTApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI2hleCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDQwLDUwMCkgcm90YXRlKDE1KSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xMiIvPgo8dXNlIGhyZWY9IiN0cmkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQwMCw0NDApIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI3RyaSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzgwLDUwMCkgcm90YXRlKDEwKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMiIvPgo8dXNlIGhyZWY9IiN0cmkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzMCw3NTApIHJvdGF0ZSgtMjApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2ZsdiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTUwLDEzMCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTIiLz4KPHVzZSBocmVmPSIjZmx2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDAsOTEwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMSIvPgo8dXNlIGhyZWY9IiNmbHYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg1MCwzNTApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjExIi8+Cjx1c2UgaHJlZj0iI2luZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTQwLDMwMCkgcm90YXRlKC0xNSkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MCwxNTApIHJvdGF0ZSgyMCkgc2NhbGUoMS4yKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTIiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0ODAsOTYwKSByb3RhdGUoOCkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTIiLz4KCjwhLS0gTFVBIC0tPgo8dXNlIGhyZWY9IiNsdWEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxMCwxNDApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI2x1YSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTAwLDIwMCkgcm90YXRlKDMwKSBzY2FsZSgxLjApIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNsdWEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLDQ1MCkgcm90YXRlKC0yMCkgc2NhbGUoMS4yKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjwhLS0gRVNUUkVMQVMgLS0+Cjx1c2UgaHJlZj0iI2VzdHJlbGEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwMCw1MCkgc2NhbGUoMC43KSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTciLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTkwLDQ0MCkgc2NhbGUoMC42KSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzAsNjgwKSBzY2FsZSgwLjgpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNiIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MDAsNjAwKSBzY2FsZSgwLjUpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MjAsNTIwKSBzY2FsZSgwLjQpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MjAsMjkwKSBzY2FsZSgwLjYpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNSIvPgoKPCEtLSBBTEVBVMOTUklPIC0tPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NjAsMjAwKSBzY2FsZSgxLjIpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMDAsNjUwKSByb3RhdGUoOCkgc2NhbGUoMS4xKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjdHVscCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTAwLDc0MCkgcm90YXRlKC01KSBzY2FsZSgxLjMpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzAsODUwKSByb3RhdGUoMTIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEzIi8+Cgo8dXNlIGhyZWY9IiNtYWNhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0ODAsNzUwKSBzY2FsZSgxLjIpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNtYWNhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDAsMjMwKSByb3RhdGUoMTIpIHNjYWxlKDEuMSkiIGNvbG9yPSIjOWI2ZGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI21hY2EiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc1MCw0NDApIHJvdGF0ZSgtNSkgc2NhbGUoMS4wKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjx1c2UgaHJlZj0iI2ZpbG0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc1MCwzOTApIHJvdGF0ZSg1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNmaWxtIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNzAsOTcwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2ZpbG0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMCwzOTApIHJvdGF0ZSgxNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjx1c2UgaHJlZj0iI2V0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5MjAsNjApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2V0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NSw5OTApIHJvdGF0ZSg1KSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgoKPHVzZSBocmVmPSIjY29uc3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI4MCwxMDApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2NvbnN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2ODAsOTcwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNjb25zdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTUwLDc2MCkgcm90YXRlKDMwKSBzY2FsZSgxLjEpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNjb25zdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTgwLDI4MCkgcm90YXRlKC0xNSkgc2NhbGUoMS4wKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTQiLz4KCjwhLS0gRUFTVEVSIEVHR1Mg4oCUIG5vbWVzIHNhaW5kbyBkZSBkZW50cm8vYW8gbGFkbyBkZSBmaWd1cmFzIC0tPgoKPHRleHQgeD0iMTU1IiB5PSI0MzUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNkYmJmZmYiIG9wYWNpdHk9IjAuMzQiIHRyYW5zZm9ybT0icm90YXRlKC0xOCwxNTUsNDM1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPklzaXM8L3RleHQ+Cjx0ZXh0IHg9IjQ5MCIgeT0iMjQwIiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZDRiMGZmIiBvcGFjaXR5PSIwLjMzIiB0cmFuc2Zvcm09InJvdGF0ZSg3LDQ5MCwyNDApIiBsZXR0ZXItc3BhY2luZz0iMyI+UGlsYXI8L3RleHQ+Cjx0ZXh0IHg9IjQ1OCIgeT0iNjcwIiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZGJiZmZmIiBvcGFjaXR5PSIwLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgtNyw0NTgsNjcwKSIgbGV0dGVyLXNwYWNpbmc9IjMiPk1hcmlhPC90ZXh0Pgo8dGV4dCB4PSIyNjIiIHk9IjUwOCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2NjYThmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoMjAsMjYyLDUwOCkiIGxldHRlci1zcGFjaW5nPSIzIj5NYWlyaW08L3RleHQ+Cjx0ZXh0IHg9IjY4NSIgeT0iODM1IiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZGJiZmZmIiBvcGFjaXR5PSIwLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgtNCw2ODUsODM1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkJhYmk8L3RleHQ+Cjx0ZXh0IHg9Ijc4IiB5PSI3NDUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNkNGIwZmYiIG9wYWNpdHk9IjAuMzMiIHRyYW5zZm9ybT0icm90YXRlKC0yMiw3OCw3NDUpIiBsZXR0ZXItc3BhY2luZz0iMyI+Sm9hbzwvdGV4dD4KPHRleHQgeD0iNTQ4IiB5PSI4OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTMsNTQ4LDg4KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkZyYW5jbzwvdGV4dD4KPHRleHQgeD0iMTE4IiB5PSI0NzUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNjY2E4ZmYiIG9wYWNpdHk9IjAuMzMiIHRyYW5zZm9ybT0icm90YXRlKC0xMCwxMTgsNDc1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkp1bGlhPC90ZXh0Pgo8dGV4dCB4PSIzNDUiIHk9Ijg3OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTgsMzQ1LDg3OCkiIGxldHRlci1zcGFjaW5nPSIzIj5UYXRhPC90ZXh0Pgo8dGV4dCB4PSI3MDUiIHk9IjU4OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2Q0YjBmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoLTYsNzA1LDU4OCkiIGxldHRlci1zcGFjaW5nPSIzIj5EdWRhPC90ZXh0Pgo8dGV4dCB4PSI0MTUiIHk9IjMxNSIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyLDQxNSwzMTUpIiBsZXR0ZXItc3BhY2luZz0iMyI+TWF5Y29uPC90ZXh0Pgo8dGV4dCB4PSI0NjgiIHk9Ijg5NSIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2NjYThmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoOSw0NjgsODk1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkNocmlzPC90ZXh0Pgo8dGV4dCB4PSI2MjIiIHk9IjU0MCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE2LDYyMiw1NDApIiBsZXR0ZXItc3BhY2luZz0iMyI+TGlhPC90ZXh0PgoKPCEtLSBFbGVtZW50b3MgZXh0cmFzIG5hIHpvbmEgdmlzw612ZWwgZXNxdWVyZGEvY2VudHJvIC0tPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjAsNjAwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4MCw2MjApIHJvdGF0ZSg2KSBzY2FsZSgxLjApIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwLDIwMCkgcm90YXRlKDQyKSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDIwLDc1MCkgcm90YXRlKC0zMCkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU1LDQ3MCkgcm90YXRlKDE4KSBzY2FsZSgxLjIpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODAsNjgwKSByb3RhdGUoMTQpIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY0MCw0ODApIHJvdGF0ZSgtMjIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjOWI2ZGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI2hleCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAwLDU1MCkgc2NhbGUoMS4wKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTYwLDcwMCkgc2NhbGUoMC43KSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbHVhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MDAsOTIwKSByb3RhdGUoMTUpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI3R1bHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU4MCw4MzApIHJvdGF0ZSgtNikgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNDAsMjAwKSByb3RhdGUoMTApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2NvbnN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NTAsMzgwKSBzY2FsZSgxLjApIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8L3N2Zz4=");background-size:500px 500px;background-repeat:repeat}
/* Pedido da Pilar 2026-08-03 (task #349/#324): separador de data entre
   mensagens de dias diferentes -- pill centralizada, discreta, no mesmo
   tom neutro do resto do chat (var(--surf1)/var(--dim)), sem chamar mais
   atenção que a própria conversa. Padrão visual comum (WhatsApp/Telegram/
   IG), mas com o glass da Linka em vez de sólido opaco. */
.chat-date-sep{display:flex;justify-content:center;align-items:center;margin:10px 0 4px;position:relative;z-index:1}
.chat-date-sep span{font-size:10.5px;font-weight:700;letter-spacing:.3px;color:var(--dim);background:var(--surf1);border:1px solid var(--border);border-radius:20px;padding:4px 12px;backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat))}
.msg-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.msg-row.eu{align-items:flex-end}
.msg-inner{display:flex;align-items:flex-end;gap:6px}
.msg-row.eu .msg-inner{flex-direction:row-reverse}
.msg-bubble{max-width:72%;padding:10px 13px;border-radius:18px;font-size:13px;line-height:1.5;word-break:break-word}
/* Bolha de mídia (imagem/vídeo) usa padding bem menor -- migração CSP
   style-src 2026-08-02, era style="padding:2px" inline. */
.msg-bubble-media{padding:2px}
.msg-row:not(.eu) .msg-bubble{background:var(--surf1);color:var(--text);border-bottom-left-radius:4px;border:1px solid var(--border)}
.msg-row.eu .msg-bubble{background:var(--accent);color:#f0eeff;border-bottom-right-radius:4px}
.msg-meta{display:flex;align-items:center;gap:4px;flex-shrink:0;padding-bottom:2px}
.msg-fav-ind{font-size:10px;color:#f5c518}
.msg-time{font-size:9px;color:var(--dim);flex-shrink:0}
/* Pedido da Pilar 2026-08-01: optimistic UI no envio de mensagem -- estado
   visual "enviando"/"falhou" da própria bolha (ver _msgStatusHTML/
   _atualizarStatusMsg em chat-lista-conversas.js, _enviarTextoOtimista em
   chat-avancado-composer.js). "enviada" não tem CSS próprio de propósito
   -- nesse estado o .msg-status é removido do DOM e a bolha fica visual e
   estruturalmente idêntica a uma mensagem normal já confirmada.

   REFINAMENTO 2026-08-01 (Pilar, depois de ver a v1): pediu explicitamente
   pra NÃO usar rótulo de texto tipo "enviando…"/"enviada" como indicador
   principal -- queria uma transição cinética (referência dela: Instagram),
   a bolha "assentando" no lugar quando a confirmação chega, não um texto
   trocando de estado. Por isso o "●" pulsante (.msg-status.sending) foi
   REMOVIDO -- o estado pendente agora é só visual, na própria bolha
   (opacity+transform reduzidos + shimmer discreto via ::after).
   .msg-status.failed continua existindo de propósito: falha precisa ser
   uma afordância clara e acionável (tocar pra tentar de novo), a
   elegância do movimento nunca pode mascarar que a mensagem NÃO chegou --
   pedido explícito dela nesse mesmo refinamento.

   A transição em .msg-bubble (opacity/transform com easing "overshoot",
   cubic-bezier(.34,1.56,.64,1)) é o que cria o "encaixe": quando
   .msg-enviando é removido -- o que só acontece no instante real em que o
   POST /chat/enviar responde, ver _atualizarStatusMsg/_enviarTextoOtimista,
   sem nenhum timer artificial no meio -- a bolha sai de opacity:.62 +
   translateY(3px) scale(.985) pra opacity:1 + transform:none com um
   pequeno "spring" de ~300ms. A duração da animação em si é fixa (é uma
   micro-interação normal), mas o MOMENTO em que ela começa a tocar é
   sempre o instante exato da confirmação real -- nunca antes, nunca um
   tempo decorativo desconectado do backend. */
.msg-status{font-size:9px;flex-shrink:0}
.msg-status.failed{color:#ff6b6b;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.msg-bubble,.msg-audio{transition:opacity .32s cubic-bezier(.34,1.56,.64,1),transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}
.msg-row.msg-enviando .msg-bubble,.msg-row.msg-enviando .msg-audio{opacity:.62;transform:translateY(3px) scale(.985);position:relative;overflow:hidden}
/* 2026-08-10 (Pilar: "a mudança de estado linda aplicada às mensagens no
   chat não é aplicada ao áudio e à imagem"): o "encaixe" otimista acima
   (opacity/transform + shimmer) só tinha seletor pra .msg-bubble -- bolha
   de mídia (imagem/vídeo) já usava a classe .msg-bubble (então já batia
   aqui), mas nunca era inserida otimisticamente (só aparecia depois do
   upload+envio inteiros terminarem, via _carregarMensagens, ver
   _enviarMidiaOtimista novo em chat-avancado-composer.js). Bolha de áudio
   usa .msg-audio, uma classe própria sem fundo/raio -- por isso o
   border-radius extra só aqui, só durante o estado pendente (não muda o
   visual normal/assentado, que continua sem moldura de propósito). */
.msg-row.msg-enviando .msg-audio{border-radius:14px}
.msg-row.msg-enviando .msg-bubble::after,.msg-row.msg-enviando .msg-audio::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);background-size:220% 100%;animation:msgShimmer 1.6s ease-in-out infinite;pointer-events:none}
@keyframes msgShimmer{0%{background-position:120% 0}100%{background-position:-20% 0}}
.msg-row.msg-falhou .msg-bubble,.msg-row.msg-falhou .msg-audio{opacity:.85;box-shadow:0 0 0 1px #ff6b6b55 inset;transform:none;border-radius:14px}
.msg-reac{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px;padding:0 2px}
.msg-reac-pill{display:inline-flex;align-items:center;gap:2px;background:var(--surf1);border:1px solid var(--border);border-radius:12px;padding:2px 6px;font-size:13px;cursor:pointer;user-select:none;transition:background .15s}
.msg-reac-pill.minha{background:#7c6ff722;border-color:#7c6ff7}
.msg-reac-c{font-size:10px;color:var(--dim)}
#chat-ctx-backdrop{display:none;position:absolute;inset:0;z-index:800}
#chat-ctx-menu{display:none;position:absolute;right:16px;z-index:801;background:var(--surf1);border:1px solid var(--border);border-radius:14px;overflow:hidden;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ctx-item{padding:13px 16px;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background .1s}
.ctx-item:active{background:var(--surf2)}
.ctx-item.danger{color:#cc3344}
/* Posição FIXA e confiável (não depende mais de coordenadas calculadas em
   cima da mensagem — isso é o que vivia quebrando: isolava num canto,
   travava, ou simplesmente não aparecia). Flutua acima do campo de digitar,
   sempre no mesmo lugar, sempre visível. */
#chat-emoji-pick{
  display:none;position:fixed;left:50%;bottom:calc(var(--nh) + 92px);
  transform:translateX(-50%);
  background:rgba(20,16,36,.94);border:1px solid rgba(140,120,220,.28);
  border-radius:26px;padding:10px 9px;z-index:810;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  flex-direction:column;align-items:center;gap:3px;
  backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);
}
@keyframes _epop{from{opacity:0;transform:translateX(-50%) scale(.7) translateY(8px)}to{opacity:1;transform:translateX(-50%) scale(1) translateY(0)}}
#chat-emoji-pick.show{animation:_epop .16s cubic-bezier(.22,1,.36,1)}
.ep-grid{display:flex;flex-direction:column;gap:3px}
.ep-grid span{font-size:19px;cursor:pointer;text-align:center;padding:5px;border-radius:10px;transition:background .12s,transform .1s;-webkit-touch-callout:none;user-select:none}
.ep-grid span:active{background:rgba(255,255,255,.12);transform:scale(1.22)}
.ep-grid .ep-extra{font-size:15px;color:var(--dim);border-left:none;border-top:1px solid rgba(140,120,220,.2);margin-left:0;margin-top:4px;padding-left:0;padding-top:6px;display:flex;align-items:center;justify-content:center}
/* Já que o menu não fica mais grudado na bolha, destacamos a mensagem alvo
   pra ficar claro qual delas você está reagindo. */
.msg-row-alvo .msg-bubble,.msg-row-alvo .msg-img,.msg-row-alvo .msg-vid{
  outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
  outline-offset:2px;border-radius:14px;
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 35%,transparent);
}
.ep-grid .ep-del{color:#cc6a78}
.ep-grid .ep-del:active{background:rgba(204,51,68,.18)}
/* Confirmação de apagar mensagem — mesmo vidro translúcido do resto do app,
   texto direto e neutro (evita frase "poética" que possa confundir). */
#chat-del-bg{display:none;position:absolute;inset:0;z-index:850;align-items:center;justify-content:center;background:rgba(2,2,8,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#chat-del-bg.show{display:flex}
#chat-del-card{
  width:calc(100% - 56px);max-width:300px;padding:22px 20px 18px;border-radius:20px;text-align:center;
  background:
    radial-gradient(ellipse 140% 70% at 50% 0%, color-mix(in srgb,var(--accent) 16%,transparent) 0%, transparent 65%),
    linear-gradient(180deg, #140f26 0%, #0d0a1c 60%, #0a0716 100%);
  border:1px solid rgba(160,140,220,.16);
  box-shadow:0 24px 64px rgba(0,0,0,.55);
}
#chat-del-title{font-size:15.5px;font-weight:700;color:var(--text);margin-bottom:6px}
#chat-del-sub{font-size:12.5px;color:var(--dim);line-height:1.5;margin-bottom:20px}
#chat-del-confirm-btn{width:100%;padding:13px;border-radius:13px;border:none;background:#9a3030;color:#fff;font-size:14.5px;font-weight:700;cursor:pointer;margin-bottom:9px;letter-spacing:.02em}
#chat-del-confirm-btn:active{background:#83292a}
#chat-del-cancel-btn{width:100%;padding:11px;border-radius:13px;border:1px solid var(--border);background:transparent;color:var(--dim);font-size:13.5px;cursor:pointer}
#chat-safety-bar{display:none;background:#cc334418;border-bottom:1px solid #cc334444;padding:7px 14px;flex-shrink:0;align-items:center;gap:8px}
#chat-safety-bar.show{display:flex}
@keyframes _tri-pulse{0%,100%{opacity:1}50%{opacity:.3}}
#chat-safety-bar svg{width:16px;height:16px;flex-shrink:0;animation:_tri-pulse 1.3s ease-in-out infinite}
#chat-safety-bar span{font-size:11px;color:#cc3344;font-weight:600;flex:1}
.msg-img{max-width:100%;width:100%;max-height:280px;border-radius:12px;object-fit:cover;display:block;cursor:zoom-in;-webkit-touch-callout:none;user-select:none}
.msg-vid{max-width:220px;max-height:280px;border-radius:12px;display:block;-webkit-touch-callout:none;user-select:none}
/* Mesma família visual do estúdio de post — vidro + gradiente sutil de accent —
   só que num fluxo bem mais simples (sem filtro, sem corte): é só chat. */
#chat-media-prev{
  display:none;position:absolute;inset:0;z-index:802;flex-direction:column;gap:14px;padding:20px;box-sizing:border-box;
  background:
    radial-gradient(ellipse 130% 55% at 50% 0%, color-mix(in srgb,var(--accent) 18%,transparent) 0%, transparent 62%),
    radial-gradient(ellipse 120% 50% at 50% 100%, color-mix(in srgb,var(--accent) 10%,transparent) 0%, transparent 55%),
    linear-gradient(180deg, #140f26 0%, #0d0a1c 50%, #0a0716 100%);
}
.cmp-top{width:100%;display:flex;align-items:center;gap:12px;flex-shrink:0}
.cmp-close{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cmp-close:active{background:rgba(255,255,255,.14)}
.cmp-top span{font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:.01em}
/* flex:1 + min-height:0 garante que o video/imagem SEMPRE encolhe pra caber
   no espaco sobrando, nunca empurra o botao de Enviar pra fora da tela —
   independente do tamanho/orientacao do arquivo, sem depender de scroll. */
.cmp-media-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cmp-media{max-width:100%;max-height:100%;border-radius:14px;object-fit:contain}
.cmp-vid-wrap{position:relative;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.cmp-mute-btn{
  position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(10,7,20,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:.5px solid rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.cmp-mute-btn:active{background:rgba(153,102,238,.35)}
.cmp-caption{
  flex-shrink:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:10px 14px;font-size:13px;color:var(--text);resize:none;
  max-height:80px;line-height:1.4;font-family:inherit;
}
.cmp-caption::placeholder{color:rgba(255,255,255,.35)}
.cmp-send{width:100%;padding:14px;border-radius:14px;background:linear-gradient(135deg,#c8b0ee 0%,var(--accent) 100%);box-shadow:0 3px 16px color-mix(in srgb,var(--accent) 35%,transparent);color:#fff;border:none;font-size:15px;font-weight:700;cursor:pointer;flex-shrink:0}
.cmp-send:active{opacity:.85}
/* Migração CSP style-src 2026-08-02: era style="-webkit-touch-callout:none"
   inline no <img> do viewer de foto do chat (_abrirImgViewer). */
.cmp-media-noselect{-webkit-touch-callout:none}
.msg-media-cap{padding:7px 10px 5px;font-size:12.5px;color:var(--text);line-height:1.4}
/* Bolhas de mensagem própria (.eu) têm fundo --accent (roxo saturado) com
   texto claro fixo (#f0eeff) -- ver .msg-row.eu .msg-bubble acima. A legenda
   de mídia herdava color:var(--text) sem essa exceção, então no tema claro
   (--text quase preto) e mesmo no escuro (--text lavanda claro, baixo
   contraste contra o roxo) a legenda ficava difícil/impossível de ler nas
   mensagens que você mesma envia. Fix: mesma cor clara da bolha nesse caso. */
.msg-row.eu .msg-media-cap{color:#f0eeff}
/* Ícones do chat: vidro translúcido + accent, em vez de contornos genéricos
   chapados — mesma família visual dos modais/estúdio. */
#chat-attach{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,border-color .15s}
#chat-attach:active{background:color-mix(in srgb,var(--accent) 18%,transparent)}
#chat-attach svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
#chat-input-wrap{padding:10px 12px 24px;background:var(--glass-tint);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border-top:1px solid var(--glass-edge);display:flex;gap:8px;align-items:flex-end;flex-shrink:0}
#chat-ta{flex:1;background:var(--surf1);border:1px solid var(--border);border-radius:20px;padding:9px 14px;font-size:13px;color:var(--text);resize:none;max-height:100px;line-height:1.4;font-family:inherit}
#chat-send{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#c8b0ee 0%,var(--accent) 100%);box-shadow:0 3px 14px color-mix(in srgb,var(--accent) 40%,transparent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .12s}
#chat-send:active{transform:scale(.92)}
#chat-send svg{width:17px;height:17px;fill:none;stroke:#f8f6ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* ── Chat áudio ─────────────────────────────────────────────────────── */
#chat-mic{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,border-color .2s}
#chat-mic:active{background:color-mix(in srgb,var(--accent) 22%,transparent);border-color:var(--accent)}
#chat-mic svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
#chat-rec-ui,#chat-prev-ui{display:none;align-items:center;gap:10px;padding:10px 14px 24px;background:var(--glass-tint);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border-top:1px solid var(--glass-edge);flex-shrink:0}
.cau-btn{width:34px;height:34px;border-radius:50%;border:1px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s,transform .12s}
.cau-btn:active{opacity:.75;transform:scale(.93)}
#chat-rec-cancel{background:color-mix(in srgb,var(--dim) 16%,transparent);color:var(--dim);border-color:var(--border)}
#chat-rec-stop{background:#cc3344;color:#fff;box-shadow:0 2px 10px rgba(204,51,68,.35)}
#chat-prev-play{background:linear-gradient(135deg,#c8b0ee 0%,var(--accent) 100%);color:#fff}
#chat-prev-del{background:color-mix(in srgb,var(--dim) 16%,transparent);color:var(--dim);border-color:var(--border)}
#chat-prev-send{background:linear-gradient(135deg,#c8b0ee 0%,var(--accent) 100%);color:#fff}
.cau-btn svg{width:14px;height:14px}
#chat-wv,#chat-prev-wv{flex:1;display:flex;align-items:center;justify-content:center;gap:1.5px;height:32px;overflow:hidden}
.cau-bar{width:2.5px;border-radius:2px;flex-shrink:0;transition:height .05s ease;height:var(--cau-h,3px);background:#7c6ff7;opacity:.5}
#chat-rec-t,#chat-prev-dur{font-size:11px;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.4px;color:var(--dim);flex-shrink:0;min-width:28px;text-align:center}
#chat-rec-dot-ind{width:6px;height:6px;border-radius:50%;background:#cc3344;flex-shrink:0;animation:_dot-blink .85s step-start infinite}
@keyframes _dot-blink{0%,100%{opacity:1}50%{opacity:0}}
/* mensagem de áudio recebida/enviada */
.msg-audio{display:flex;align-items:center;gap:9px;min-width:160px;max-width:220px}
.msg-audio-btn{width:30px;height:30px;border-radius:50%;background:#7c6ff7;border:none;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.msg-audio-btn svg{width:11px;height:11px;fill:#fff;margin-left:1px}
.msg-audio-wv{flex:1;display:flex;align-items:center;gap:1px;height:20px;overflow:hidden;cursor:pointer}
.msg-audio-wv .cau-bar{transition:none}
.msg-audio-dur{font-size:10px;color:var(--dim);flex-shrink:0;min-width:28px;text-align:right;font-variant-numeric:tabular-nums}

/* Link dentro do texto de consentimento (Termos/Privacidade), i18n.js --
   migração CSP style-src 2026-08-02: style="color:#c4a0ff" repetido em
   14 lugares (7 idiomas x 2 links), sempre com o mesmo valor estático. */
.i18n-link{color:#c4a0ff}
.i18n-ok{color:#6aaa72}

/* ── Onboarding inline ── */
.onb-praca{
  border:1.5px solid var(--pc,#9966ee44);
  border-radius:10px;padding:12px 10px 8px;cursor:pointer;text-align:center;
  font-size:14px;font-weight:600;color:var(--pc,#c4a0ff);
  background:color-mix(in srgb,var(--pc,#9966ee) 8%,transparent);
  transition:background .18s,border-color .18s,transform .12s;
  display:flex;flex-direction:column;gap:3px;
  -webkit-tap-highlight-color:transparent;
}
.onb-praca span{font-size:10px;font-weight:400;color:#c4a0ff99;font-family:sans-serif}
.onb-praca:active,.onb-praca.sel{
  background:color-mix(in srgb,var(--pc,#9966ee) 22%,transparent);
  border-color:var(--pc,#9966ee);transform:scale(.97);
}
.onb-opcao{
  border:1.5px solid #9966ee33;border-radius:10px;padding:14px 16px;
  cursor:pointer;font-size:13px;color:#e0d8ff;background:#9966ee0a;
  transition:background .15s,border-color .15s,transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.onb-opcao:active,.onb-opcao.sel{
  background:#9966ee22;border-color:#9966ee88;transform:scale(.98);
}

/* Pedido da Pilar 2026-07-25: "o estilo dos tiles das praças que escolhe
   quando posta não combina com a Linka mais... faz uns bubbles
   embaçados sabe de vidro translúcido... vai dar uma elegância a mais".
   Trocado o preenchimento chapado (color-mix simples) pelo MESMO sistema
   de vidro fosco já usado no resto do app (--glass-tint/--glass-blur/
   --glass-sat/--glass-edge, ver :root -- srch-bar, bottom nav etc. já
   usam) -- consistência visual, não um efeito novo isolado. A cor da
   própria praça (--pc) entra misturada no --glass-tint (gradiente sutil,
   mais forte em cima) pra manter identidade contextual sem virar vídeo
   (isso ficou de fora dessa rodada -- produção de vídeo por praça é
   trabalho de conteúdo, não de código, sinalizado à parte).
*/
.praca-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:22px 10px;border-radius:20px;
  border:1px solid color-mix(in srgb, var(--pc) 38%, var(--glass-edge));
  background:linear-gradient(165deg, color-mix(in srgb, var(--pc) 18%, var(--glass-tint)) 0%, color-mix(in srgb, var(--pc) 6%, var(--glass-tint)) 100%);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:0 4px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.07);
  cursor:pointer;transition:background .2s ease,transform .12s ease,box-shadow .2s ease;
}
.praca-card:active{
  background:linear-gradient(165deg, color-mix(in srgb, var(--pc) 34%, var(--glass-tint)) 0%, color-mix(in srgb, var(--pc) 14%, var(--glass-tint)) 100%);
  transform:scale(.97);
}
/* Pedido da Pilar 2026-07-25: "pra que fique claro que existem guias
   navegáveis, elas precisam dar um shimmering/pulso aleatoriamente, pra
   que o usuário intuitivamente perceba o clique" -- pulso único, suave,
   na própria cor do elemento (--t-cor nas guias de Círculos, --pc nos
   cards de praça), disparado ao acaso pelo _guiaNudgeLoop em utils.js.
   Convite orgânico, não instrução didática -- por isso não tem texto,
   só luz. */
/* FIX 2026-08-02 (Pilar, item 2 batch nova, "fraco demais"): a curva
   antiga ia de opacidade alta pra 0% exatamente no mesmo intervalo em
   que o spread crescia de 0 pra 9px -- ou seja, no instante em que o
   anel finalmente tinha tamanho suficiente pra ser notado, já estava
   com alpha zerado. Ficava, na prática, quase invisível. Curva nova:
   começa como um anel sólido (blur 0, alpha alto), cresce COM blur
   (vira glow de verdade, não anel duro) ainda com alpha significativo
   no meio do movimento, só desvanece de fato perto do fim. Also soma um
   filter:brightness() breve -- reforça a leitura de "acender" mesmo em
   telas mais escuras, sem depender só do box-shadow. */
@keyframes _guiaNudgePulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--nudge-cor,#9966ee) 85%, transparent);transform:scale(1);filter:brightness(1)}
  40%{box-shadow:0 0 10px 7px color-mix(in srgb, var(--nudge-cor,#9966ee) 60%, transparent);transform:scale(1.07);filter:brightness(1.22)}
  100%{box-shadow:0 0 20px 15px color-mix(in srgb, var(--nudge-cor,#9966ee) 0%, transparent);transform:scale(1);filter:brightness(1)}
}
.cx-front-tab.guia-nudge{--nudge-cor:var(--t-cor);animation:_guiaNudgePulse 1.5s ease-out 1}
.praca-card.guia-nudge{--nudge-cor:var(--pc);animation:_guiaNudgePulse 1.5s ease-out 1}
/* Correção da Pilar 2026-07-25: "são tuplas ali, e não guias" -- as abas
   de praça no HEAD do perfil (#po-filter-bar, montadas em
   long-press-perfil.js) também entram no pulso. --nudge-cor já vem
   setada inline por elemento (mkBtn -> c(praçaId)). */
.po-filtro-praca.guia-nudge{animation:_guiaNudgePulse 1.5s ease-out 1}
.pv{width:52px;height:52px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
/* YUAN - aneis que respiram */
.pv-yuan::before,.pv-yuan::after{content:'';position:absolute;border-radius:50%}
.pv-yuan::before{width:14px;height:14px;background:#6aaa72;animation:pvYuan1 3.2s ease-in-out infinite}
.pv-yuan::after{width:36px;height:36px;border:1.5px solid #6aaa72;opacity:.3;animation:pvYuan2 3.2s ease-in-out infinite}
@keyframes pvYuan1{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.2);opacity:.6}}
@keyframes pvYuan2{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.12);opacity:.08}}
/* VOX - equalizador */
.pv-vox{align-items:flex-end!important;gap:3px;height:34px}
.pv-vox i{width:4px;border-radius:2px;background:#c85858;display:block;transform-origin:bottom;animation:pvVox 1.1s ease-in-out infinite}
.pv-vox i:nth-child(1){height:40%;animation-delay:0s}.pv-vox i:nth-child(2){height:85%;animation-delay:.18s}.pv-vox i:nth-child(3){height:60%;animation-delay:.34s}.pv-vox i:nth-child(4){height:90%;animation-delay:.08s}.pv-vox i:nth-child(5){height:45%;animation-delay:.26s}
@keyframes pvVox{0%,100%{transform:scaleY(.25);opacity:.45}50%{transform:scaleY(1);opacity:1}}
/* ARTS - forma que respira e gira */
.pv-arts{width:28px;height:28px;border:1.5px solid #9060c8;background:rgba(144,96,200,.08);animation:pvArts 5s ease-in-out infinite}
@keyframes pvArts{0%{border-radius:4px;transform:rotate(0deg)}25%{border-radius:50%}50%{border-radius:8px 2px;transform:rotate(180deg)}75%{border-radius:50%}100%{border-radius:4px;transform:rotate(360deg)}}
/* LAB - orbita */
.pv-lab{width:32px;height:32px;border:1.5px dashed rgba(88,152,200,.4);border-radius:50%;animation:pvLab 2.8s linear infinite}
.pv-lab::before{content:'';position:absolute;width:9px;height:9px;background:#3d6fa8;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.pv-lab::after{content:'';position:absolute;width:5px;height:5px;background:#3d6fa8;border-radius:50%;top:-2.5px;left:calc(50% - 2.5px)}
@keyframes pvLab{to{transform:rotate(360deg)}}
/* LOUNGE - bolinhas em cascata */
.pv-lounge{gap:5px}
.pv-lounge i{width:8px;height:8px;border-radius:50%;background:#c840a0;display:block;animation:pvLounge 1.7s ease-in-out infinite}
.pv-lounge i:nth-child(1){animation-delay:0s}.pv-lounge i:nth-child(2){animation-delay:.28s}.pv-lounge i:nth-child(3){animation-delay:.56s}
@keyframes pvLounge{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-9px);opacity:1}}
/* TRADE - setas fluindo */
.pv-trade svg{width:38px;height:22px}
.pv-trade path{stroke:#d46a18;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:35}
.pv-trade path:nth-child(1){animation:pvTradeA 2s linear infinite}
.pv-trade path:nth-child(2){animation:pvTradeB 2s linear infinite}
@keyframes pvTradeA{0%{stroke-dashoffset:35}100%{stroke-dashoffset:-35}}
@keyframes pvTradeB{0%{stroke-dashoffset:-35}100%{stroke-dashoffset:35}}
/* Terra */
.pv-terra{width:34px;height:34px;position:relative;display:flex;align-items:center;justify-content:center}
.pv-terra::before,.pv-terra::after{content:'';position:absolute;border-radius:50%}
.pv-terra::before{width:12px;height:12px;background:#7a5535;animation:pvTerra1 2.4s ease-in-out infinite}
.pv-terra::after{width:30px;height:30px;border:1.5px solid #7a5535;opacity:.35;animation:pvTerra2 2.4s ease-in-out infinite}
@keyframes pvTerra1{0%,100%{transform:scale(1)}50%{transform:scale(1.3);opacity:.7}}
@keyframes pvTerra2{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.1);opacity:.1}}
/* Aura */
.pv-aura{width:34px;height:34px;position:relative;display:flex;align-items:center;justify-content:center}
.pv-aura::before{content:'';position:absolute;width:28px;height:28px;border-radius:50%;border:1.5px dashed rgba(64,180,200,.6);animation:pvAura 3s linear infinite}
.pv-aura::after{content:'';position:absolute;width:10px;height:10px;background:#40b4c8;border-radius:50%;opacity:.85}
@keyframes pvAura{to{transform:rotate(360deg)}}
.praca-nome{font-size:14px;font-weight:700;color:var(--pc)}
.praca-desc{font-size:11px;color:var(--dim);text-align:center}


/* Popup de links (abrirLinksPopup, post-overlays.js) -- migração CSP
   style-src/script-src 2026-08-02: style=""/onclick="" inline trocados
   por classes + data-svars (--lk-cor) + data-act (delegação). */
.lk-loading{color:var(--dim);font-size:13px;padding:16px 0}
.lk-item{margin-bottom:14px;padding:12px;background:var(--surf2);border-radius:12px;border-left:3px solid var(--lk-cor,transparent)}
.lk-item-meta{font-size:11px;color:var(--lk-cor,inherit);font-weight:700;margin-bottom:4px}
.lk-item-texto{font-size:13px;line-height:1.5;color:var(--txt)}
.lk-item-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.lk-item-data{font-size:10px;color:var(--dim)}

/* ── Linka thread indicator ─────────────────────────────────── */
#po-filter-bar::-webkit-scrollbar{display:none}
.lk-thread-pill{
  background:transparent;border:none;cursor:pointer;
  padding:3px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;
  flex-shrink:0;opacity:.72;
  transition:opacity .15s,transform .2s;
  user-select:none;
}
@keyframes bf-shim{0%,100%{opacity:1}40%{opacity:.18}80%{opacity:.85}}
.lk-thread-pill:active{opacity:1;transform:scale(1.22);}
.lk-thread-pill-img{
  position:absolute;bottom:7px;right:7px;z-index:10;
  background:rgba(0,0,0,.38);border:none;cursor:pointer;
  padding:4px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;
  backdrop-filter:blur(4px);user-select:none;
  opacity:.88;transition:opacity .15s,transform .2s;
}
.lk-thread-pill-img:active{opacity:1;transform:scale(1.15);}
/* ── Image caption drawer ────────────────────────────────── */
.tile-cap{
  position:absolute;bottom:0;left:0;right:0;
  max-height:72%;
  background:rgba(7,7,18,.72);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-radius:12px 12px 0 0;
  display:flex;flex-direction:column;
  z-index:2;
  touch-action:none;
}
.tile-cap-bar{
  width:32px;height:4px;
  background:rgba(255,255,255,.28);
  border-radius:2px;
  margin:8px auto 4px;
  flex-shrink:0;
  cursor:grab;
}
.tile-cap-txt{
  padding:2px 12px 10px;
  font-size:11.5px;
  line-height:1.55;
  color:rgba(255,255,255,.88);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  max-height:180px;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
@keyframes tc-flip{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
/* ── Yuan own-post stats card ────────────────────────────── */
.ypc-card{
  position:fixed;z-index:800;
  background:rgba(8,6,22,.88);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.07);
  display:none;flex-direction:column;
  align-items:center;justify-content:center;
  padding:14px;gap:0;
  box-shadow:0 8px 32px rgba(0,0,0,.55);
  pointer-events:all;
}
.ypc-card.on{display:flex;animation:tc-flip .22s ease;}
.ypc-inner{width:100%;display:flex;flex-direction:column;gap:10px;}
.ypc-row{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.ypc-row:last-child{border-bottom:none;}
.ypc-lbl{font-size:8.5px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.35);font-family:'SF Mono','Fira Code',monospace;}
.ypc-val{font-size:13px;font-weight:600;color:rgba(255,255,255,.9);}
/* ── Wikipedia shimmer words ─────────────────────────────── */
/* Correção 2026-07-26 (Pilar): o pulso `infinite` rodava em TODO post
   visível -- inclusive no feed rolando e na lista Meus Posts, ou seja,
   repaint constante multiplicado por cada card na tela ao mesmo tempo.
   Exatamente o tipo de custo que a sessão inteira de hoje tá cortando.
   A palavra continua destacada e clicável em qualquer lugar (visual
   estático abaixo, sem custo de animação) -- só ANIMA de verdade dentro
   do zoom expandido (#lp-zoom, ver long-press-perfil.js), onde só um post
   por vez existe na tela. */
.ww{cursor:pointer;display:inline;touch-action:manipulation;color:#cdb8ff}
@keyframes ww-pulse{0%,100%{color:var(--text);opacity:.78}50%{color:#cdb8ff;opacity:1}}
.ww:active{opacity:1;animation:none;color:#e0ccff}
#lp-zoom .ww{animation:ww-pulse 3.4s ease-in-out infinite}
/* ── Wiki card (bottom-sheet) ────────────────────────────── */
#wiki-backdrop{display:none;position:fixed;inset:0;z-index:9000;background:transparent}
#wiki-backdrop.on{display:block}
#wiki-card{
  position:fixed;top:0;left:0;
  width:min(292px,calc(100vw - 20px));z-index:9001;
  /* Vidro do mesmo sistema do resto do app (--glass-tint), não mais um card
     roxo opaco à parte -- fica translúcido, e a cor da praça do post onde a
     entidade foi clicada é misturada em cima via JS (abrirWikiCard em
     main.js seta --wcard-tc inline), pra combinar com o design atual.
     Correção 2026-07-26 (Pilar): o card em si já usava --glass-tint, mas
     ficava opaco na prática -- .wcard-photo (abaixo) tinha fundo sólido
     (baseado em --surf2, sem transparência nenhuma) cobrindo boa parte do
     card, quebrando a ilusão de vidro assim que não tinha foto real
     carregada. Mistura extra de "transparent" aqui deixa o fundo do card
     em si mais translúcido também, não só nas bordas. */
  background:color-mix(in srgb, transparent 25%, color-mix(in srgb, var(--wcard-tc,var(--accent)) 20%, var(--glass-tint)));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid color-mix(in srgb, var(--wcard-tc,var(--accent)) 45%, var(--glass-edge));
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.1);
  transition:opacity .16s ease,transform .16s ease;
  overflow:hidden;
  opacity:0;transform:scale(0.88) translateY(6px);
  pointer-events:none;
user-select:none;-webkit-user-select:none;touch-action:none}
#wiki-card.open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
.wcard-stripe{height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--wcard-tc,var(--accent)) 70%,transparent),transparent)}
.wcard-body{padding:0 0 12px}
.wcard-photo{
  /* Frame vertical (pedido da Pilar 2026-07-26): 130px de altura numa faixa
     de largura total do card deixava o quadro da foto claramente mais
     largo que alto (paisagem) -- 200px vira retrato, card lê como vertical
     em vez de horizontal. Fundo trocado de --surf2 (sólido, sem alpha)
     pra transparent -- o mesmo motivo do #wiki-card acima: sem isso, essa
     faixa inteira (foto real ou só a inicial de fallback) ficava opaca
     mesmo com o card ao redor sendo vidro. */
  width:100%;height:200px;overflow:hidden;position:relative;
  background:color-mix(in srgb,var(--wcard-tc,var(--accent)) 16%,transparent);display:flex;align-items:center;justify-content:center;
}
.wcard-photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
.wcard-photo-ini{font-size:44px;font-weight:700;color:color-mix(in srgb,var(--wcard-tc,var(--accent)) 55%,var(--dim));letter-spacing:-2px}
.wcard-info{padding:10px 13px 0}
.wcard-title{font-size:16px;font-weight:700;color:var(--text);line-height:1.2;margin-bottom:3px}
.wcard-meta{font-size:11px;color:var(--dim);margin-bottom:7px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.wcard-meta-sep{opacity:.5}
.wcard-desc{font-size:12px;color:var(--text);opacity:.82;line-height:1.6;margin-bottom:8px;padding:0 13px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.wcard-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:9px;padding:0 13px}
.wcard-tag{
  font-size:10px;color:var(--dim);
  background:var(--faint);border:0.5px solid var(--border);
  border-radius:20px;padding:2px 8px;letter-spacing:.2px
}
.wcard-foot{padding:0 13px;display:flex;justify-content:flex-end}
.wcard-link-btn{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--wcard-tc,var(--accent));font-size:12px;font-weight:500;
  text-decoration:none;background:none;border:none;padding:0;cursor:pointer;
  opacity:.85;transition:opacity .15s
}
.wcard-link-btn:hover,.wcard-link-btn:active{opacity:1}
@keyframes novo-destaque{
  0%{box-shadow:0 0 0 0 transparent}
  18%{box-shadow:0 0 0 4px var(--accent),0 0 28px color-mix(in srgb,var(--accent) 45%,transparent)}
  65%{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent),0 0 10px color-mix(in srgb,var(--accent) 15%,transparent)}
  100%{box-shadow:0 0 0 0 transparent}
}
.novo-pulse{animation:novo-destaque 1.4s ease-out 2;border-radius:inherit;position:relative;z-index:2}

/* ── Own new post — hero shimmer ────────────────────────────────────────────── */
@keyframes own-hero-pulse{
  0%,100%{box-shadow:0 0 0 0.7px rgba(0,0,0,0.5),
           0 0 14px color-mix(in srgb,var(--tc) 55%,transparent),
           0 0 42px color-mix(in srgb,var(--tc) 28%,transparent),
           inset 0 0 8px rgba(0,0,0,0.18)}
  50%{box-shadow:0 0 0 0.7px rgba(0,0,0,0.5),
      0 0 24px color-mix(in srgb,var(--tc) 75%,transparent),
      0 0 64px color-mix(in srgb,var(--tc) 38%,transparent),
      inset 0 0 10px rgba(0,0,0,0.22)}
}
.tile-own-hero{
  animation:own-hero-pulse 2.4s ease-in-out infinite;
  border-width:2px!important;
}
/* Hero image: mais alta que featured normal */
.tile-img-only.hero-img{border-radius:var(--r);margin-bottom:6px}
.tile-img-only.hero-img .tile-img{height:300px}
/* Hero texto: mais alta */
.tile-dizer.tile-own-hero{min-height:160px}


/* ── Pull-to-refresh ─────────────────────────────────────── */
/* Pedido da Pilar 2026-08-01: PTR "rápido demais, sem indicador visível".
   Causa raiz real: top:-52px posicionava o spinner ACIMA da borda de
   cima de #main, que tem overflow:hidden auto (ver #main logo abaixo) --
   um filho absoluto com y negativo fica fora da caixa de recorte do pai
   e nunca é pintado, em NENHUM momento do gesto. O JS soma no máximo
   translateY(26px) durante o pull (ver touchmove), então o resultado
   final ainda era -52+26=-26px -- continuava 100% fora da área visível,
   com ou sem o piso de MIN_VISIVEL adicionado no JS. Não era timing, era
   posição: o elemento nunca chegou a entrar na tela pra ser visto.
   Fix: nasce dentro da área visível (top:0) e some via opacity (já era o
   mecanismo pretendido) -- o pequeno translateY do JS agora só empurra
   ele mais fundo dentro do conteúdo em vez de tentar trazer ele de fora
   pra dentro. */
#ptr-indicator{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:center;
  height:52px;pointer-events:none;opacity:0;
  transition:opacity .2s ease;z-index:10;
}
#ptr-indicator svg{
  width:22px;height:22px;
  animation:ptr-spin 0.8s linear infinite;
  color:var(--yuan,#9966ee);
}
@keyframes ptr-spin{to{transform:rotate(360deg)}}
/* ── Botão de áudio em vídeos ── */
.vid-aud-btn{position:absolute;top:8px;right:8px;background:rgba(0,0,0,0.5);border:none;color:#fff;width:28px;height:28px;border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;z-index:5}

#ptr-indicator.visible{opacity:1}
#main{position:relative;overflow:hidden auto}

/* ── Cluster orbital "círculo em thread" (feature 2026-07-30, Pilar --
   REDESIGN a pedido dela: v1 era uma fileira horizontal estilo Reels
   dentro do card long-press; ela pediu pra virar um pequeno cluster
   ORBITAL no CANTO DO TILE do post, ancorado junto da borboletinha que
   já existe ali (.lk-thread-pill/.lk-thread-pill-img), contido dentro
   dos bounds do tile -- nunca escapa/sobrepõe outro post. Montado em JS
   (feed-nucleo.js::_montarTileOrbit), não HTML estático -- só aparece
   quando o endpoint POST /posts/circulo-threads devolve gente pro post.
   Clicar abre A THREAD DO PRÓPRIO USUÁRIO, nunca a conversa privada
   alheia (mesma regra de sempre, ver modulos/links_db.py). */
/* BUG 2026-07-30 (Pilar, print real): "as bolhas ficaram muito pequenas --
   precisam ser proporcionais ao tamanho da própria borboletinha (escalar
   junto, não tamanho fixo pequeno)". A borboletinha (.lk-thread-pill/
   -img) é um SVG de 18x13 dentro de padding 3-4px -- pegada visual real
   de ~24-26px de altura (18+2*3 / 18+2*4). As bolhas antes eram 15-17px,
   visivelmente menores que o ícone ao lado delas. Sobe pra 21px (~mesma
   ordem de grandeza da pegada da borboletinha) e escala junto o overlap
   (margin-left) e o badge de contagem, senão ficam desproporcionais entre
   si na nova escala. */
.tile-orbit{
  display:inline-flex;align-items:center;position:relative;
  flex-shrink:0;cursor:pointer;height:21px;
}
/* Tile de imagem: .lk-thread-pill-img já é absolute bottom:7px;right:7px
   dentro de .tile-img (que tem overflow:hidden) -- o cluster fica logo
   à esquerda dela, no MESMO canto, contido pelo mesmo overflow:hidden. */
.tile-orbit-imgcorner{
  position:absolute;bottom:5px;right:32px;z-index:10;
}
/* Tile de texto: sem posicionamento absoluto -- entra no fluxo normal
   dentro de .tile-dizer-foot-right, logo depois da borboletinha
   (.lk-thread-pill), então "anexado" a ela sem risco de vazar do card
   (.tile-dizer também tem overflow:hidden como cinto de segurança). */
.tile-dizer-foot-right{display:flex;align-items:center;gap:5px;flex-shrink:0}
/* Modo "poucas pessoas" (≤3): bolhas sobrepostas, com um balanço orbital
   bem sutil (não é giro de verdade -- CSS puro, leve). */
.tile-orbit-av{
  width:21px;height:21px;border-radius:50%;
  border:1.4px solid rgba(0,0,0,.5);
  background:var(--surf2);overflow:hidden;flex-shrink:0;
  margin-left:-8px;
  animation:tileOrbitBob 4.5s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * -0.55s);
}
.tile-orbit-av:first-child{margin-left:0}
.tile-orbit-av img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes tileOrbitBob{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-1.5px) scale(1.08)}
}
/* Modo "muita gente" (>3, teto do backend é 6): NÃO tenta espremer todo
   mundo -- fecha numa forma genérica translúcida (shade) do tamanho de
   uma bolha só, e revela um avatar por vez em carrossel (JS alterna a
   classe .on entre os filhos, crossfade via opacity -- ver
   _iniciarOrbitCycle em feed-nucleo.js). Número total sempre visível no
   badge de contagem no canto. */
.tile-orbit-shade{width:21px;height:21px;position:relative}
.tile-orbit-shade-ring{
  position:absolute;inset:0;border-radius:50%;
  background:rgba(20,20,28,.6);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  border:1.4px solid rgba(255,255,255,.24);
}
.tile-orbit-shade-av{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  opacity:0;transition:opacity .5s ease;
}
.tile-orbit-shade-av.on{opacity:1}
.tile-orbit-shade-av img{width:100%;height:100%;object-fit:cover;display:block}
.tile-orbit-count{
  position:absolute;bottom:-4px;right:-5px;
  background:rgba(0,0,0,.7);color:#fff;
  font-size:8px;font-weight:800;line-height:1;
  padding:2px 4px;border-radius:7px;
  font-family:'SF Mono','Fira Code',monospace;
  pointer-events:none;z-index:1;
}

/* ── Acoes do long-press ────────────────────────────── */
#lp-acoes{
  display:flex;flex-direction:column;gap:6px;padding:0 0 12px;
}
.lp-acao{
  width:100%;padding:10px 12px;border-radius:10px;
  background:var(--surf2);border:1px solid var(--faint);
  color:var(--dim);font-size:12px;cursor:pointer;text-align:left;
  transition:background .15s,color .15s,border-color .15s;
}
.lp-acao:active{background:var(--accent);color:#fff;border-color:var(--accent)}
.lp-acao.ativo{background:var(--accent);color:#fff;border-color:var(--accent)}
/* ── Menu de compartilhar (fallback desktop, quando nao ha Web Share API) ── */
#share-menu-bg{position:fixed;inset:0;z-index:9500;background:rgba(2,2,8,.6);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;animation:share-fade .2s ease}
@keyframes share-fade{from{opacity:0}to{opacity:1}}
#share-menu-card{width:100%;max-width:420px;background:var(--surf1);border:1px solid var(--border);border-radius:18px 18px 0 0;padding:10px 8px 24px;display:flex;flex-direction:column;gap:2px;box-sizing:border-box}
.share-menu-title{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--dim);padding:10px 14px 6px}
.share-menu-item{display:block;width:100%;box-sizing:border-box;text-align:left;background:none;border:none;color:var(--text);font-size:15px;padding:13px 14px;border-radius:10px;cursor:pointer;text-decoration:none;font-family:inherit;transition:background .15s}
.share-menu-item:active{background:var(--surf2)}
@keyframes lp-eq1{from{height:3px}to{height:13px}}
@keyframes lp-eq2{from{height:6px}to{height:10px}}
@keyframes lp-eq3{from{height:2px}to{height:14px}}
/* ── Cards de post translúcidos ─────────────────── */
#linkar-card{background:rgba(8,6,18,.55)!important}
[data-tema="claro"] #linkar-card,[data-tema="descanso"] #linkar-card{background:rgba(242,240,248,.55)!important}
/* BUG 2026-07-27 (Pilar): thread devia deixar o post de origem visível por
   trás (regra de design), e devia ser "glass" nos dois temas -- nenhuma das
   duas coisas acontecia. Causa: #linkar-thread-bg (o fundo por trás do card
   da thread) virou um var(--bg) SÓLIDO (sem alpha) em algum ponto, opaco em
   qualquer tema -- daí a thread tapar o post totalmente. O efeito "glassy"
   que ainda aparecia no escuro era só coincidência de cor (o tom sólido do
   fundo ficava perto o bastante do tom do #linkar-card pra description
   parecer profundidade), e sumia no claro porque lá as duas cores eram
   praticamente idênticas (nada pra "ver através"). Troca pra translúcido +
   blur de verdade (mesmo --glass-blur/--glass-sat usados em #phone::before),
   revelando o post por trás em qualquer tema, sem precisar de regra
   separada por tema (color-mix já pega --bg do tema ativo). */
#linkar-thread-bg{
  background:color-mix(in srgb, var(--bg) 62%, transparent)!important;
  -webkit-backdrop-filter:blur(var(--glass-blur,30px)) saturate(var(--glass-sat,180%));
  backdrop-filter:blur(var(--glass-blur,30px)) saturate(var(--glass-sat,180%));
}
#phone,#chat-conv-bg,#gate-bg,#settings-screen{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPgo8ZGVmcz4KPGcgaWQ9ImJmbHkiPgogIDxwYXRoIGQ9Ik0wLDAgQy01LC0xMCAtMTgsLTE1IC0yMiwtNiBDLTE4LDIgLTYsMyAwLDJaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8cGF0aCBkPSJNMCwwIEM1LC0xMCAxOCwtMTUgMjIsLTYgQzE4LDIgNiwzIDAsMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxwYXRoIGQ9Ik0wLDIgQy00LDggLTEzLDkgLTEzLDUgQy05LDEgLTQsMSAwLDJaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8cGF0aCBkPSJNMCwyIEM0LDggMTMsOSAxMyw1IEM5LDEgNCwxIDAsMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxsaW5lIHgxPSIwIiB5MT0iLTIiIHgyPSIwIiB5Mj0iOCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41IiBmaWxsPSJub25lIi8+CjwvZz4KPGcgaWQ9ImxmIj4KICA8cGF0aCBkPSJNMCwwIEM2LC03IDcsLTE2IDAsLTIwIEMtNywtMTYgLTYsLTcgMCwwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjgiLz4KICA8bGluZSB4MT0iMCIgeTE9Ii0xIiB4Mj0iMCIgeTI9Ii0xOSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC40IiBvcGFjaXR5PSIwLjYiLz4KPC9nPgo8ZyBpZD0icmFtbyI+CiAgPHBhdGggZD0iTTAsMCBRNSwtMTIgMywtMjYiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTIsLTExIFExMCwtMTUgMTIsLTIxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0yLC0xMSBRLTYsLTE1IC03LC0yMSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8ZWxsaXBzZSBjeD0iMTIiIGN5PSItMjEiIHJ4PSI0IiByeT0iMi4yIiB0cmFuc2Zvcm09InJvdGF0ZSgtMjAsMTIsLTIxKSIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPGVsbGlwc2UgY3g9Ii03IiBjeT0iLTIxIiByeD0iNCIgcnk9IjIuMiIgdHJhbnNmb3JtPSJyb3RhdGUoMjAsLTcsLTIxKSIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPGVsbGlwc2UgY3g9IjMiIGN5PSItMjYiIHJ4PSIzIiByeT0iMS42IiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNjUiLz4KPC9nPgo8ZyBpZD0iaGV4Ij4KICA8cGF0aCBkPSJNMCwtMTQgTDEyLDcgTC0xMiw3IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOCIvPgogIDxwYXRoIGQ9Ik0wLDE0IEwtMTIsLTcgTDEyLC03IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuOCIvPgo8L2c+CjxnIGlkPSJ0cmkiPgogIDxwYXRoIGQ9Ik0wLC0xNCBMMTIsNyBMLTEyLDcgWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC44Ii8+CiAgPGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNiIvPgo8L2c+CjxnIGlkPSJmbHYiPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI3IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjU1Ii8+CiAgPGNpcmNsZSBjeD0iNyIgY3k9IjAiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSItNyIgY3k9IjAiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSIzLjUiIGN5PSI2IiByPSI3IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjU1Ii8+CiAgPGNpcmNsZSBjeD0iLTMuNSIgY3k9IjYiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNTUiLz4KICA8Y2lyY2xlIGN4PSIzLjUiIGN5PSItNiIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41NSIvPgogIDxjaXJjbGUgY3g9Ii0zLjUiIGN5PSItNiIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC41NSIvPgo8L2c+CjxnIGlkPSJ0dWxwIj4KICA8bGluZSB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iLTE4IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjgiLz4KICA8cGF0aCBkPSJNMCwtMTAgQy01LC0xNCAtNiwtMjIgMCwtMjAgQzYsLTIyIDUsLTE0IDAsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjgiLz4KICA8cGF0aCBkPSJNLTMsLTEwIEMtOCwtMTMgLTgsLTggLTMsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CiAgPHBhdGggZD0iTTMsLTEwIEM4LC0xMyA4LC04IDMsLTEwWiIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjY1Ii8+CjwvZz4KPGcgaWQ9Im1hY2EiPgogIDxwYXRoIGQ9Ik0xLC0xNiBDMywtMjAgNywtMTggNSwtMTUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTS0xLC05IEMtNywtMTIgLTksLTQgLTgsNCBDLTcsMTIgLTMsMTYgMCwxNiBDMywxNiA3LDEyIDgsNCBDOSwtNCA3LC0xMiAxLC05IEMwLC02IDAsLTYgLTEsLTlaIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNzUiLz4KICA8cGF0aCBkPSJNMSwtOSBDNCwtMTMgOCwtMTAgNywtNyBDNSwtNCAyLC03IDEsLTlaIiBmaWxsPSIjMDIwMjA4Ii8+CjwvZz4KPGcgaWQ9ImZpbG0iPgogIDxyZWN0IHg9Ii0xMSIgeT0iLTE0IiB3aWR0aD0iMjIiIGhlaWdodD0iMjgiIHJ4PSIxIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjgiLz4KICA8cmVjdCB4PSItNyIgeT0iLTEwIiB3aWR0aD0iMTQiIGhlaWdodD0iMjAiIHJ4PSIwLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNSIvPgogIDxyZWN0IHg9Ii0xMyIgeT0iLTExIiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSItMTMiIHk9Ii0zLjUiIHdpZHRoPSIyLjUiIGhlaWdodD0iMy41IiByeD0iMC4zIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNyIvPgogIDxyZWN0IHg9Ii0xMyIgeT0iNCIgd2lkdGg9IjIuNSIgaGVpZ2h0PSIzLjUiIHJ4PSIwLjMiIGZpbGw9ImN1cnJlbnRDb2xvciIgb3BhY2l0eT0iMC43Ii8+CiAgPHJlY3QgeD0iMTAuNSIgeT0iLTExIiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSIxMC41IiB5PSItMy41IiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KICA8cmVjdCB4PSIxMC41IiB5PSI0IiB3aWR0aD0iMi41IiBoZWlnaHQ9IjMuNSIgcng9IjAuMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjciLz4KPC9nPgo8ZyBpZD0iZXQiPgogIDxjaXJjbGUgY3g9Ii0xMCIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIvPgogIDxjaXJjbGUgY3g9IjEwIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC43Ii8+CiAgPHBhdGggZD0iTS0xMCw4IEwwLC0xIEwxMCw4IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMCwtMSBMLTIsLTciIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNyIgZmlsbD0ibm9uZSIvPgogIDxsaW5lIHgxPSItNCIgeTE9Ii03IiB4Mj0iMiIgeTI9Ii03IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjciLz4KICA8Y2lyY2xlIGN4PSItMiIgY3k9Ii0xMiIgcj0iMyIgZmlsbD0iY3VycmVudENvbG9yIiBvcGFjaXR5PSIwLjc1Ii8+CiAgPHBhdGggZD0iTS0yLC05IEwtNSwtNyBMMCwtNyBaIiBmaWxsPSJjdXJyZW50Q29sb3IiIG9wYWNpdHk9IjAuNjUiLz4KICA8ZWxsaXBzZSBjeD0iNiIgY3k9Ii0yIiByeD0iMyIgcnk9IjQiIGZpbGw9ImN1cnJlbnRDb2xvciIgb3BhY2l0eT0iMC43Ii8+CjwvZz4KPGcgaWQ9ImNvbnN0Ij4KICA8Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iMS40IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9Ii05IiByPSIxLjAiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxjaXJjbGUgY3g9IjI0IiBjeT0iNSIgcj0iMS40IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KICA8Y2lyY2xlIGN4PSIxMSIgY3k9IjE1IiByPSIxLjAiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgogIDxjaXJjbGUgY3g9Ii01IiBjeT0iMTgiIHI9IjEuMCIgZmlsbD0iY3VycmVudENvbG9yIi8+CiAgPGxpbmUgeDE9IjAiIHkxPSIwIiB4Mj0iMTYiIHkyPSItOSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC40Ii8+CiAgPGxpbmUgeDE9IjE2IiB5MT0iLTkiIHgyPSIyNCIgeTI9IjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNCIvPgogIDxsaW5lIHgxPSIyNCIgeTE9IjUiIHgyPSIxMSIgeTI9IjE1IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwLjQiLz4KICA8bGluZSB4MT0iMTEiIHkxPSIxNSIgeDI9Ii01IiB5Mj0iMTgiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAuNCIvPgo8L2c+CjxnIGlkPSJpbmYiPgogIDxwYXRoIGQ9Ik0wLDAgQzQsLTggMTQsLTggMTQsMCBDMTQsOCA0LDggMCwwIEMtNCwtOCAtMTQsLTggLTE0LDAgQy0xNCw4IC00LDggMCwwWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC44Ii8+CjwvZz4KPGcgaWQ9Imx1YSI+CiAgPHBhdGggZD0iTTYsLTExIEExMywxMyAwIDEgMCA2LDExIEE5LDkgMCAxIDEgNiwtMTFaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9nPgo8ZyBpZD0iZXN0cmVsYSI+CiAgPHBhdGggZD0iTTAsLTkgTDEuMiwtMS4yIEw5LDAgTDEuMiwxLjIgTDAsOSBMLTEuMiwxLjIgTC05LDAgTC0xLjIsLTEuMloiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L2c+CjwvZGVmcz4KCjwhLS0gQk9SQk9MRVRBIChsb2dvIOKAlCBtYWlzIGluc3TDom5jaWFzKSAtLT4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAwLDE4MCkgc2NhbGUoMS42KSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTciLz4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjIwLDUyMCkgcm90YXRlKDgpIHNjYWxlKDEuNCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg1MCwxMzApIHJvdGF0ZSgtNikgc2NhbGUoMS4yKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjYmZseSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLDcyMCkgcm90YXRlKDEwKSBzY2FsZSgxLjUpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNiIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3ODAsODQwKSByb3RhdGUoLTQpIHNjYWxlKDEuMykiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0MCw5MDApIHJvdGF0ZSg1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5NTAsNTYwKSByb3RhdGUoLTEwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzODAsMzgwKSByb3RhdGUoMTIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY4MCw3MCkgcm90YXRlKC04KSBzY2FsZSgxLjMpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgoKPCEtLSBGT0xIQVMgLS0+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNTAsODApIHJvdGF0ZSgzNSkgc2NhbGUoMS4yKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTYiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkwLDMxMCkgcm90YXRlKC0yNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDczMCwyODApIHJvdGF0ZSg1MCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTYiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwMCw2NjApIHJvdGF0ZSgtNDApIHNjYWxlKDEuMykiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4NzAsNDMwKSByb3RhdGUoMjApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2xmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNjAsNTYwKSByb3RhdGUoLTYwKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjYwLDc2MCkgcm90YXRlKDMwKSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAsODkwKSByb3RhdGUoLTE1KSBzY2FsZSgxLjIpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQwLDgyMCkgcm90YXRlKDQ1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUwLDE1MCkgcm90YXRlKC0zNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkxMCw2OTApIHJvdGF0ZSgxOCkgc2NhbGUoMS4xKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTQiLz4KCjwhLS0gUkFNT1MgLS0+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ4MCwyMjApIHJvdGF0ZSgtMTIpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2MCw0NjApIHJvdGF0ZSgxOCkgc2NhbGUoMS4xKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjcmFtbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODIwLDY1MCkgcm90YXRlKC0zMCkgc2NhbGUoMS4zKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjcmFtbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTgwLDM3MCkgcm90YXRlKDQwKSBzY2FsZSgxLjApIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMTAsODEwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcwLDU5MCkgcm90YXRlKDIyKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3NTAsOTUwKSByb3RhdGUoLTE4KSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xMyIvPgoKPCEtLSBHRU9Nw4lUUklDTyBFU09Uw4lSSUNPIC0tPgo8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcyMCw5MCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjaGV4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAsNTgwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNoZXgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg5MCw4OTApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI2hleCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDQwLDUwMCkgcm90YXRlKDE1KSBzY2FsZSgxLjApIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xMiIvPgo8dXNlIGhyZWY9IiN0cmkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQwMCw0NDApIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI3RyaSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzgwLDUwMCkgcm90YXRlKDEwKSBzY2FsZSgxLjEpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMiIvPgo8dXNlIGhyZWY9IiN0cmkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzMCw3NTApIHJvdGF0ZSgtMjApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2ZsdiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTUwLDEzMCkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTIiLz4KPHVzZSBocmVmPSIjZmx2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDAsOTEwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMSIvPgo8dXNlIGhyZWY9IiNmbHYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg1MCwzNTApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjExIi8+Cjx1c2UgaHJlZj0iI2luZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTQwLDMwMCkgcm90YXRlKC0xNSkgc2NhbGUoMS4xKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MCwxNTApIHJvdGF0ZSgyMCkgc2NhbGUoMS4yKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTIiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0ODAsOTYwKSByb3RhdGUoOCkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTIiLz4KCjwhLS0gTFVBIC0tPgo8dXNlIGhyZWY9IiNsdWEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxMCwxNDApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE1Ii8+Cjx1c2UgaHJlZj0iI2x1YSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTAwLDIwMCkgcm90YXRlKDMwKSBzY2FsZSgxLjApIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8dXNlIGhyZWY9IiNsdWEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLDQ1MCkgcm90YXRlKC0yMCkgc2NhbGUoMS4yKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjwhLS0gRVNUUkVMQVMgLS0+Cjx1c2UgaHJlZj0iI2VzdHJlbGEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwMCw1MCkgc2NhbGUoMC43KSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTciLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTkwLDQ0MCkgc2NhbGUoMC42KSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzAsNjgwKSBzY2FsZSgwLjgpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNiIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MDAsNjAwKSBzY2FsZSgwLjUpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MjAsNTIwKSBzY2FsZSgwLjQpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNlc3RyZWxhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MjAsMjkwKSBzY2FsZSgwLjYpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNSIvPgoKPCEtLSBBTEVBVMOTUklPIC0tPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NjAsMjAwKSBzY2FsZSgxLjIpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMDAsNjUwKSByb3RhdGUoOCkgc2NhbGUoMS4xKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjdHVscCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTAwLDc0MCkgcm90YXRlKC01KSBzY2FsZSgxLjMpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiN0dWxwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzAsODUwKSByb3RhdGUoMTIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEzIi8+Cgo8dXNlIGhyZWY9IiNtYWNhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0ODAsNzUwKSBzY2FsZSgxLjIpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNtYWNhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDAsMjMwKSByb3RhdGUoMTIpIHNjYWxlKDEuMSkiIGNvbG9yPSIjOWI2ZGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI21hY2EiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc1MCw0NDApIHJvdGF0ZSgtNSkgc2NhbGUoMS4wKSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjx1c2UgaHJlZj0iI2ZpbG0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc1MCwzOTApIHJvdGF0ZSg1KSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNmaWxtIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNzAsOTcwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYzRhMGZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2ZpbG0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMCwzOTApIHJvdGF0ZSgxNSkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTMiLz4KCjx1c2UgaHJlZj0iI2V0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5MjAsNjApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI2V0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NSw5OTApIHJvdGF0ZSg1KSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgoKPHVzZSBocmVmPSIjY29uc3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI4MCwxMDApIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2NvbnN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2ODAsOTcwKSBzY2FsZSgxLjIpIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNjb25zdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTUwLDc2MCkgcm90YXRlKDMwKSBzY2FsZSgxLjEpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNjb25zdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTgwLDI4MCkgcm90YXRlKC0xNSkgc2NhbGUoMS4wKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTQiLz4KCjwhLS0gRUFTVEVSIEVHR1Mg4oCUIG5vbWVzIHNhaW5kbyBkZSBkZW50cm8vYW8gbGFkbyBkZSBmaWd1cmFzIC0tPgoKPHRleHQgeD0iMTU1IiB5PSI0MzUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNkYmJmZmYiIG9wYWNpdHk9IjAuMzQiIHRyYW5zZm9ybT0icm90YXRlKC0xOCwxNTUsNDM1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPklzaXM8L3RleHQ+Cjx0ZXh0IHg9IjQ5MCIgeT0iMjQwIiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZDRiMGZmIiBvcGFjaXR5PSIwLjMzIiB0cmFuc2Zvcm09InJvdGF0ZSg3LDQ5MCwyNDApIiBsZXR0ZXItc3BhY2luZz0iMyI+UGlsYXI8L3RleHQ+Cjx0ZXh0IHg9IjQ1OCIgeT0iNjcwIiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZGJiZmZmIiBvcGFjaXR5PSIwLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgtNyw0NTgsNjcwKSIgbGV0dGVyLXNwYWNpbmc9IjMiPk1hcmlhPC90ZXh0Pgo8dGV4dCB4PSIyNjIiIHk9IjUwOCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2NjYThmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoMjAsMjYyLDUwOCkiIGxldHRlci1zcGFjaW5nPSIzIj5NYWlyaW08L3RleHQ+Cjx0ZXh0IHg9IjY4NSIgeT0iODM1IiBmb250LWZhbWlseT0iJ0JydXNoIFNjcmlwdCBNVCcsJ1NlZ29lIFNjcmlwdCcsJ0JyYWRsZXkgSGFuZCcsY3Vyc2l2ZSIgZm9udC1zaXplPSIyMiIgZm9udC1zdHlsZT0iaXRhbGljIiBmaWxsPSIjZGJiZmZmIiBvcGFjaXR5PSIwLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgtNCw2ODUsODM1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkJhYmk8L3RleHQ+Cjx0ZXh0IHg9Ijc4IiB5PSI3NDUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNkNGIwZmYiIG9wYWNpdHk9IjAuMzMiIHRyYW5zZm9ybT0icm90YXRlKC0yMiw3OCw3NDUpIiBsZXR0ZXItc3BhY2luZz0iMyI+Sm9hbzwvdGV4dD4KPHRleHQgeD0iNTQ4IiB5PSI4OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTMsNTQ4LDg4KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkZyYW5jbzwvdGV4dD4KPHRleHQgeD0iMTE4IiB5PSI0NzUiIGZvbnQtZmFtaWx5PSInQnJ1c2ggU2NyaXB0IE1UJywnU2Vnb2UgU2NyaXB0JywnQnJhZGxleSBIYW5kJyxjdXJzaXZlIiBmb250LXNpemU9IjIyIiBmb250LXN0eWxlPSJpdGFsaWMiIGZpbGw9IiNjY2E4ZmYiIG9wYWNpdHk9IjAuMzMiIHRyYW5zZm9ybT0icm90YXRlKC0xMCwxMTgsNDc1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkp1bGlhPC90ZXh0Pgo8dGV4dCB4PSIzNDUiIHk9Ijg3OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTgsMzQ1LDg3OCkiIGxldHRlci1zcGFjaW5nPSIzIj5UYXRhPC90ZXh0Pgo8dGV4dCB4PSI3MDUiIHk9IjU4OCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2Q0YjBmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoLTYsNzA1LDU4OCkiIGxldHRlci1zcGFjaW5nPSIzIj5EdWRhPC90ZXh0Pgo8dGV4dCB4PSI0MTUiIHk9IjMxNSIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNCIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyLDQxNSwzMTUpIiBsZXR0ZXItc3BhY2luZz0iMyI+TWF5Y29uPC90ZXh0Pgo8dGV4dCB4PSI0NjgiIHk9Ijg5NSIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2NjYThmZiIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJyb3RhdGUoOSw0NjgsODk1KSIgbGV0dGVyLXNwYWNpbmc9IjMiPkNocmlzPC90ZXh0Pgo8dGV4dCB4PSI2MjIiIHk9IjU0MCIgZm9udC1mYW1pbHk9IidCcnVzaCBTY3JpcHQgTVQnLCdTZWdvZSBTY3JpcHQnLCdCcmFkbGV5IEhhbmQnLGN1cnNpdmUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtc3R5bGU9Iml0YWxpYyIgZmlsbD0iI2RiYmZmZiIgb3BhY2l0eT0iMC4zNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE2LDYyMiw1NDApIiBsZXR0ZXItc3BhY2luZz0iMyI+TGlhPC90ZXh0PgoKPCEtLSBFbGVtZW50b3MgZXh0cmFzIG5hIHpvbmEgdmlzw612ZWwgZXNxdWVyZGEvY2VudHJvIC0tPgo8dXNlIGhyZWY9IiNiZmx5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjAsNjAwKSByb3RhdGUoLTgpIHNjYWxlKDEuMikiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE2Ii8+Cjx1c2UgaHJlZj0iI2JmbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4MCw2MjApIHJvdGF0ZSg2KSBzY2FsZSgxLjApIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNCIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwLDIwMCkgcm90YXRlKDQyKSBzY2FsZSgxLjEpIiBjb2xvcj0iI2IwOGZmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNsZiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDIwLDc1MCkgcm90YXRlKC0zMCkgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTQiLz4KPHVzZSBocmVmPSIjbGYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU1LDQ3MCkgcm90YXRlKDE4KSBzY2FsZSgxLjIpIiBjb2xvcj0iI2M0YTBmZiIgb3BhY2l0eT0iMC4xNSIvPgo8dXNlIGhyZWY9IiNyYW1vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODAsNjgwKSByb3RhdGUoMTQpIHNjYWxlKDEuMSkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI3JhbW8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY0MCw0ODApIHJvdGF0ZSgtMjIpIHNjYWxlKDEuMCkiIGNvbG9yPSIjOWI2ZGZmIiBvcGFjaXR5PSIwLjEzIi8+Cjx1c2UgaHJlZj0iI2hleCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAwLDU1MCkgc2NhbGUoMS4wKSIgY29sb3I9IiNiMDhmZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjZXN0cmVsYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTYwLDcwMCkgc2NhbGUoMC43KSIgY29sb3I9IiNjNGEwZmYiIG9wYWNpdHk9IjAuMTUiLz4KPHVzZSBocmVmPSIjbHVhIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MDAsOTIwKSByb3RhdGUoMTUpIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjE0Ii8+Cjx1c2UgaHJlZj0iI3R1bHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU4MCw4MzApIHJvdGF0ZSgtNikgc2NhbGUoMS4wKSIgY29sb3I9IiM5YjZkZmYiIG9wYWNpdHk9IjAuMTMiLz4KPHVzZSBocmVmPSIjaW5mIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNDAsMjAwKSByb3RhdGUoMTApIHNjYWxlKDEuMCkiIGNvbG9yPSIjYjA4ZmZmIiBvcGFjaXR5PSIwLjEyIi8+Cjx1c2UgaHJlZj0iI2NvbnN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NTAsMzgwKSBzY2FsZSgxLjApIiBjb2xvcj0iIzliNmRmZiIgb3BhY2l0eT0iMC4xMyIvPgo8L3N2Zz4=") !important;background-size:500px 500px !important;background-repeat:repeat !important}
/* A regra acima pinta o padrão de borboletas/luas/nomes CRU, sem nenhuma
   translucidez — é essa camada que lia "preto com nomes e desenhos escritos".
   Em vez de mexer na regra gigante (risco de erro ao reescrever uma string
   dessas), sobrepomos um pseudo-elemento com backdrop-filter nos containers
   que NÃO rolam por dentro (ele nasce DEPOIS do background do próprio
   elemento, então enxerga e borra o padrão, e ANTES do conteúdo real).
   Blur real (backdrop-filter) só é seguro em containers que NÃO rolam por
   dentro. Um ::before absoluto dentro de um container com overflow-y:auto
   (.pane, #chat-msgs) faz parte do conteúdo que rola — ele fica "grudado"
   no topo do conteúdo total, não no topo da tela — então ao rolar, metade
   virava vidro borrado e metade ficava nítida (a linha de corte que
   aparecia nos prints). Por isso esses dois ficam de fora daqui e usam uma
   cor sólida (regra logo abaixo) que nunca se move com o scroll interno. */
/* Blur reduzido de 24px pra 6px: com 24px, o padrão decorativo (borboletas,
   luas, e os NOMES escondidos no fundo) virava uma mancha ilegível — o
   nome só existia tecnicamente no código, mas na prática sumia debaixo do
   desfoque. Gradiente também mais leve (18%/9%, era 32%/18%), pra ser
   translúcido/uniforme sem apagar o desenho de baixo — era pra ser um véu
   de vidro sobre o fundo, não uma substituição opaca dele. */
#phone::before,#chat-conv-bg::before,#po-bg::before,#gate-bg::before,#settings-screen::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  backdrop-filter:blur(6px) saturate(150%) brightness(var(--glass-bright,.86));-webkit-backdrop-filter:blur(6px) saturate(150%) brightness(var(--glass-bright,.86));
  background:linear-gradient(165deg, color-mix(in srgb,var(--bg) 18%,transparent) 0%, color-mix(in srgb,var(--bg) 9%,transparent) 55%, transparent 100%);
}
/* .pane e #chat-msgs usam o MESMO tom de vidro do header/nav/barra de busca
   (--glass-tint), pra não ter costura visível entre eles — é um vidro só,
   não painéis pintados cada um com sua própria cor. Sem backdrop-filter
   aqui de propósito (blur com scroll interno corta a linha vidro/nítido,
   ver nota acima) — só a cor, mesmo alpha do resto do chrome.
   Antes essa área tinha SUA PRÓPRIA cópia do padrão decorativo (borboletas)
   por cima da que já vem do #phone atrás — duas camadas do mesmo desenho
   competindo com o texto. Removida (ver seletor do background-image logo
   acima, .pane não está mais nele), então baixar a opacidade aqui não
   duplica mais ruído visual. Legibilidade de nome/ícone/texto por cima
   agora é responsabilidade de cada elemento (sombra/contraste próprios),
   não do container ficar opaco — mesmo princípio do header/nav. */
.pane,#chat-msgs{background-color:var(--glass-tint)}

/* ── Tile Card — vira o tile (flip) ─────────────────────────────────── */
#tile-card{
  position:fixed;z-index:860;
  /* Mesma normalização do #lp-card -- alinhado ao tom do --glass-tint
     escuro em vez de um tom próprio mais opaco/escuro. */
  background:rgba(14,10,24,.55);
  backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);
  border:1px solid rgba(140,120,220,.18);
  border-radius:14px;
  padding:12px;
  pointer-events:none;opacity:0;
  transform:scaleX(.04) scaleY(.92);
  transform-origin:center center;
  transition:opacity .18s cubic-bezier(.22,1,.36,1),transform .19s cubic-bezier(.22,1,.36,1);
  display:none;flex-direction:column;justify-content:space-between;
  box-sizing:border-box;overflow:hidden;
}
#tile-card.on{opacity:1;transform:scaleX(1) scaleY(1);pointer-events:auto;}
#tc-header{display:flex;align-items:center;gap:9px;margin-bottom:8px;flex-shrink:0}
#tc-avatar{width:32px;height:32px;min-width:32px;border-radius:50%;background:var(--surf2);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--accent);overflow:hidden}
#tc-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
#tc-meta{flex:1;min-width:0}
#tc-pseudo{font-size:12px;font-weight:700;color:#e8e4ff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tc-arq{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
#tc-hex-wrap{display:none}
#tc-actions{display:flex;gap:6px;flex-shrink:0;margin-top:5px}
#tc-actions button{flex:1;padding:6px 4px;border-radius:8px;border:1px solid var(--border);
  background:var(--surf2);color:var(--text);font-size:10px;font-weight:700;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
#tc-actions button:active,#tc-actions button.ativo{background:var(--accent);color:#fff;border-color:var(--accent)}
#tc-pracas{flex:1;min-height:0;margin-top:5px;overflow-y:auto;display:flex;flex-direction:column}
#tc-pracas-label{font-size:7.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);margin-bottom:4px;flex-shrink:0}
#tc-pracas-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 4px}
.tc-praca-btn{display:flex;align-items:center;gap:5px;width:100%;padding:3px 3px;
  border-radius:5px;border:none;background:transparent;cursor:pointer;
  font-size:10px;font-weight:600;text-align:left;opacity:.85;box-sizing:border-box;
  transition:opacity .12s;-webkit-touch-callout:none;
  /* --tpb-cor setado via data-svars (migração CSP style-src 2026-08-02,
     ver post-overlays.js). */
  color:var(--tpb-cor,inherit);
}
/* Avatar do tile-card virado (post-overlays.js) */
.tc-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* Bloco "Status" (ecos) do verso do tile-card, quando o post é próprio */
.tc-status-wrap{padding:6px 0 2px;display:flex;flex-direction:column;gap:4px}
.tc-status-label{font-size:10px;opacity:.45;text-transform:uppercase;letter-spacing:.5px}
.tc-status-val{font-size:22px;font-weight:700;color:rgba(255,255,255,.9)}
.tc-status-praca{font-size:11px;font-weight:600;color:var(--tsp-cor,inherit)}
/* Mídia do TOV (tile-overlay-verso, post-overlays.js) */
.tov-media-el{width:100%;max-height:220px;object-fit:contain;display:block;filter:var(--tov-filtro,none)}
/* Chip de música no TOV -- migração CSP style-src 2026-08-02: era
   .style.cssText='...' (potencialmente sujeito à mesma restrição do
   atributo style="", ver comentário em arquetipos-overlay.js). */
.tov-music-chip{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:8px 14px 0;background:var(--surf2);border:1px solid rgba(153,102,238,0.35);border-radius:10px;cursor:pointer;font-size:12px}
.tov-mus-btn{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text);padding:0;line-height:1}
.tov-mus-info{flex:1;min-width:0;overflow:hidden}
.tov-mus-nome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:11px}
.tov-mus-artista{font-size:10px;opacity:.5}
.tc-dot{width:9px;height:9px;min-width:9px;border-radius:50%;flex-shrink:0;
  border:1.5px solid currentColor;background:transparent;
  transition:background .18s,transform .15s}
.tc-praca-btn.tc-praca-ativa .tc-dot,.tc-praca-btn:active .tc-dot{background:currentColor;transform:scale(1.2)}
.tc-praca-btn.tc-praca-ativa{opacity:1}


/* ── LP Discovery Hint — primeira sessão, sem texto, só gestual ─────────── */
@keyframes _lp_ring_out {
  0%   { transform:scale(.25); opacity:.7; }
  60%  { transform:scale(1.05); opacity:.2; }
  100% { transform:scale(1.4);  opacity:0; }
}
.lp-hint-pulse::before,
.lp-hint-pulse::after {
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:60px; height:60px;
  margin:-30px 0 0 -30px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.55);
  background:rgba(255,255,255,0.06);
  pointer-events:none;
  z-index:9;
}
.lp-hint-pulse::before {
  animation:_lp_ring_out 1.1s ease-out 0.2s 2 forwards;
}
.lp-hint-pulse::after {
  border-color:rgba(255,255,255,0.28);
  background:transparent;
  animation:_lp_ring_out 1.1s ease-out 0.65s 2 forwards;
}
/* Legenda da dica (2026-07-25) -- ancorada no pé do tile (não flutua pra
   fora) pra nunca ser cortada pelo overflow:hidden de .tile-img-only. */
@keyframes _lp_hint_fade {
  0%   { opacity:0; transform:translate(-50%, 6px); }
  15%  { opacity:1; transform:translate(-50%, 0); }
  85%  { opacity:1; transform:translate(-50%, 0); }
  100% { opacity:0; transform:translate(-50%, 0); }
}
.lp-hint-bubble{
  position:absolute;
  left:50%; bottom:10px;
  padding:6px 12px;
  background:rgba(10,8,20,.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  color:#fff;
  font-size:11.5px;font-weight:600;
  white-space:nowrap;
  pointer-events:none;
  z-index:10;
  animation:_lp_hint_fade 3.2s ease-in-out forwards;
}


/* ── Bot Linka — item especial no topo do chat ─────────────────────────── */
.chat-bot-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;cursor:pointer;
  background:linear-gradient(135deg,rgba(102,51,153,.12),rgba(80,160,220,.08));
  border-bottom:1px solid var(--border);
  position:relative;
}
.chat-bot-item:active{background:rgba(102,51,153,.18);}
.chat-bot-avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#6633cc,#3388dd);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;box-shadow:0 0 10px rgba(102,51,204,.35);
}
.chat-bot-meta{flex:1;min-width:0;}
.chat-bot-name{font-weight:700;font-size:14px;color:var(--text);display:flex;align-items:center;gap:6px;}
.chat-bot-badge{
  font-size:9px;font-weight:700;letter-spacing:.04em;
  background:var(--accent);color:#fff;
  padding:2px 6px;border-radius:20px;
}
.chat-bot-preview{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}

/* ── Bot — typing indicator ──────────────────────────────────────────────── */
/* Migração CSP style-src 2026-08-02 (_mostrarBotTyping em chat-avancado-
   composer.js) -- eram div.style.cssText + style inline no avatar. */
.bot-typing-wrap{display:flex;align-items:center;gap:8px;padding:8px 14px}
.bot-typing-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#6633cc,#3388dd);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex-shrink:0}
.bot-typing{display:flex;align-items:center;gap:4px;padding:10px 14px;}
.bot-typing span{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);opacity:.4;
  animation:botDot .9s ease-in-out infinite;
}
.bot-typing span:nth-child(2){animation-delay:.15s;}
.bot-typing span:nth-child(3){animation-delay:.30s;}
@keyframes botDot{0%,100%{opacity:.25;transform:translateY(0);}50%{opacity:1;transform:translateY(-3px);}}

/* ── Composer redesign — image-first ──────────────────────────────────────── */
/* Image preview modal (fullscreen) */
#criar-img-modal{
  position:absolute;inset:0;z-index:500;
  background:
    radial-gradient(ellipse 130% 70% at 50% 0%, color-mix(in srgb,var(--accent) 30%,transparent) 0%, transparent 65%),
    radial-gradient(ellipse 120% 60% at 50% 100%, color-mix(in srgb,var(--accent) 16%,transparent) 0%, transparent 60%),
    linear-gradient(180deg,var(--surf1) 0%,var(--bg) 50%,var(--surf) 100%);
  display:none;flex-direction:column;
}
#criar-img-modal.on{display:flex;}
#criar-img-modal-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 16px 14px;flex-shrink:0;
  background:var(--glass-tint);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:0.5px solid var(--border);
}
#criar-img-modal-top button{
  background:transparent;border:none;color:var(--text);font-size:14px;
  font-weight:600;cursor:pointer;padding:6px 12px;border-radius:8px;
}
#criar-img-modal-top button:active{background:color-mix(in srgb,var(--text) 15%,transparent);}
.criar-modal-music-btn{
  display:flex!important;align-items:center;gap:5px;
  font-size:12px!important;color:color-mix(in srgb,var(--text) 76%,transparent)!important;
  border:0.5px solid color-mix(in srgb,var(--text) 18%,transparent)!important;
  border-radius:8px!important;padding:5px 12px!important;
}
.criar-modal-music-btn:active{background:color-mix(in srgb,var(--accent) 25%,transparent)!important;}
/* aspect pills removed — crop always free */

/* ── Filtros Linka ────────────────────────────────────────────────────────── */
#criar-filtros-strip{
  display:flex;gap:14px;overflow-x:auto;flex-shrink:0;
  padding:14px 18px calc(16px + env(safe-area-inset-bottom));
  background:var(--glass-tint);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:0.5px solid var(--border);
  -webkit-overflow-scrolling:touch;
}
#criar-filtros-strip::-webkit-scrollbar{display:none}
.criar-filtro-item{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.criar-filtro-swatch{
  width:50px;height:50px;border-radius:13px;background-size:cover;background-position:center;
  border:2px solid transparent;transition:border-color .15s ease,transform .15s ease;
  /* --fs-bg/--fs-filtro setados via JS/CSSOM (migração CSP style-src
     2026-08-02) -- cada swatch mostra uma prévia do vídeo/foto com o
     filtro daquela opção aplicado. */
  background-color:#1a1a1a;background-image:var(--fs-bg,none);filter:var(--fs-filtro,none);
}
.criar-filtro-item.on .criar-filtro-swatch{border-color:var(--accent);transform:scale(1.06)}
.criar-filtro-label{font-size:10px;color:var(--dim);letter-spacing:.015em;font-weight:500}
.criar-filtro-item.on .criar-filtro-label{color:var(--text);font-weight:700}
/* Filtros para vídeo — mesma UI dos filtros de imagem, mas ao vivo via CSS
   (não dá pra "assar" o filtro no arquivo de vídeo no cliente) */
#criar-filtros-strip-video{
  display:none;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:10px 2px 2px;flex-shrink:0;
}
#criar-filtros-strip-video.on{display:flex}
#criar-filtros-strip-video::-webkit-scrollbar{display:none}
#criar-img-modal-canvas-wrap{
  flex:1;overflow:hidden;position:relative;touch-action:none;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--accent) 10%,var(--surf1)),var(--bg) 72%);
}
#criar-img-modal-canvas{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;}
#criar-img-modal-canvas:active{cursor:grabbing;}
#criar-crop-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:2;pointer-events:none;background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.crop-spin{
  width:34px;height:34px;border-radius:50%;
  border:2.5px solid rgba(153,102,238,.25);
  border-top-color:var(--accent);
  animation:cropSpin .7s linear infinite;
}
@keyframes cropSpin{to{transform:rotate(360deg)}}

.pub-load-abortar{
  position:relative;z-index:1;margin-top:4px;padding:8px 15px;border-radius:999px;
  background:transparent;border:1px solid color-mix(in srgb,var(--text) 13%,transparent);
  color:color-mix(in srgb,var(--text) 58%,transparent);font-size:11px;cursor:pointer;letter-spacing:.02em;
}
.pub-load-abortar:active{background:color-mix(in srgb,var(--text) 8%,transparent);}

/* LOADING DAS PRACAS 2026-08-13 — calm technology: a mudança de estado da
   geometria comunica o envio sem depender de frases ou barra de progresso. */
#publicando-overlay{
  overflow:hidden;padding:0;background:var(--bg);isolation:isolate;
}
.pub-load-scene{
  position:absolute;inset:0;overflow:hidden;isolation:isolate;color:var(--text);
  background:
    radial-gradient(ellipse 118% 72% at 50% 42%,color-mix(in srgb,var(--pl-cor) 16%,transparent),transparent 67%),
    linear-gradient(180deg,var(--surf1),var(--bg) 52%,var(--surf));
}
.pub-load-art{
  position:absolute;z-index:-4;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;
  opacity:.76;mix-blend-mode:normal;
  transform:scale(.94);animation:pubLoadArt 7s ease-in-out infinite alternate;will-change:transform,filter;
}
.pub-load-wash{
  position:absolute;z-index:-3;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 64%,transparent),transparent 26%,transparent 64%,color-mix(in srgb,var(--bg) 78%,transparent));
}
[data-tema="escuro"] .pub-load-wash{
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 82%,transparent),color-mix(in srgb,var(--bg) 38%,transparent) 34%,color-mix(in srgb,var(--bg) 48%,transparent) 68%,var(--bg));
  box-shadow:inset 0 0 130px color-mix(in srgb,var(--bg) 66%,transparent);
}
[data-tema="escuro"] .pub-load-art{opacity:.88;mix-blend-mode:normal;filter:saturate(.84)}
.pub-load-particles{
  position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.42;
  background:radial-gradient(circle at 18% 34%,currentColor 0 1px,transparent 2px),radial-gradient(circle at 78% 24%,currentColor 0 1px,transparent 2px),radial-gradient(circle at 82% 69%,currentColor 0 1.5px,transparent 2.5px),radial-gradient(circle at 24% 74%,currentColor 0 1px,transparent 2px);
  color:color-mix(in srgb,var(--pl-cor) 54%,var(--text));
  animation:pubLoadParticles 2.4s ease-in-out infinite;
}
.pub-load-shimmer{
  position:absolute;z-index:1;inset:-22% -58%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(108deg,transparent 39%,color-mix(in srgb,var(--pl-cor) 10%,transparent) 45%,rgba(255,255,255,.46) 49.5%,color-mix(in srgb,var(--pl-cor) 24%,transparent) 52%,transparent 59%);
  transform:translateX(-38%);animation:pubLoadShimmer 3.15s cubic-bezier(.45,0,.2,1) infinite;
}
.pub-load-shimmer::before,.pub-load-shimmer::after{
  content:'';position:absolute;pointer-events:none;border-radius:50%;filter:blur(1px);
}
.pub-load-shimmer::before{
  width:34%;height:22%;left:31%;top:24%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--text) 38%,transparent),color-mix(in srgb,var(--pl-cor) 14%,transparent) 38%,transparent 72%);
  animation:pubLoadGlint 2.25s ease-in-out infinite;
}
.pub-load-shimmer::after{
  width:28%;height:19%;left:38%;top:57%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--pl-cor) 25%,transparent),color-mix(in srgb,var(--text) 16%,transparent) 44%,transparent 74%);
  animation:pubLoadGlint 2.85s ease-in-out -1.15s infinite;
}
[data-tema="claro"] .pub-load-shimmer,[data-tema="descanso"] .pub-load-shimmer{
  mix-blend-mode:soft-light;filter:contrast(1.18) saturate(1.08);
}
.pub-load-head{
  position:absolute;z-index:2;top:calc(28px + env(safe-area-inset-top));left:0;right:0;
  width:auto;height:auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;padding:0 28px;border:0;box-shadow:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  flex-shrink:1;text-shadow:0 2px 18px color-mix(in srgb,var(--bg) 38%,transparent);
}
.pub-load-head svg{width:23px;height:23px;margin-bottom:6px;fill:none;stroke:var(--pl-cor);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--pl-cor) 44%,transparent));}
.pub-load-head strong{font-size:18px;font-weight:650;line-height:1.1;letter-spacing:-.015em;}
.pub-load-essencia{margin-top:5px;color:var(--dim);font-size:10px;letter-spacing:.015em;text-shadow:none}
.pub-load-geometry{
  position:absolute;z-index:2;left:50%;top:50%;width:min(27vw,104px);aspect-ratio:1;transform:translate(-50%,-50%);
  color:color-mix(in srgb,var(--pl-cor) 82%,var(--text));filter:drop-shadow(0 0 13px color-mix(in srgb,var(--pl-cor) 48%,transparent));
}
.pub-load-geometry::before{
  content:'';position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--pl-cor) 16%,transparent),color-mix(in srgb,var(--text) 4%,transparent) 46%,transparent 70%);
  filter:blur(8px);animation:pubLoadAura 3.2s ease-in-out infinite;
}
.pub-load-geometry>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;}
.pub-load-geometry circle,.pub-load-geometry path,.pub-load-geometry ellipse{transform-box:fill-box;transform-origin:center;}
.plg-orbit{transform-origin:60px 60px;}
.plg-orbit-a{animation:plgOrbit 4.8s linear infinite;}.plg-orbit-b{animation:plgOrbitBack 6.2s linear infinite;}
.plg-orbit-b ellipse{transform:rotate(64deg);transform-origin:60px 60px}.plg-heart{fill:currentColor;animation:plgHeart 2.4s ease-in-out infinite;}
.plg-shards path{fill:color-mix(in srgb,var(--pl-cor) 18%,transparent);animation:plgShard 3.6s ease-in-out infinite;}.plg-shards path:nth-child(2){animation-delay:-.7s}.plg-shards path:nth-child(3){animation-delay:-1.4s}.plg-shards path:nth-child(4){animation-delay:-2.1s}.plg-shards path:nth-child(5){animation-delay:-2.8s}
.plg-network path{stroke-dasharray:7 5;animation:plgSignal 2.8s linear infinite}.plg-network circle{fill:currentColor;animation:plgNode 2s ease-in-out infinite}.plg-network circle:nth-of-type(even){animation-delay:-1s}.plg-network .plg-node-core{animation:plgCore 2.8s ease-in-out infinite;}
.plg-waves path{stroke-width:1.55;stroke-dasharray:18 7;animation:plgWave 2.6s linear infinite}.plg-waves path:nth-child(2){animation-direction:reverse;animation-duration:3.4s;opacity:.58}.plg-waves path:nth-child(3){stroke-dasharray:2 9;animation-duration:1.8s;opacity:.7}
.plg-exchange{transform-origin:60px 60px}.plg-exchange-a{animation:plgOrbit 4s linear infinite}.plg-exchange-b{animation:plgOrbitBack 4s linear infinite}.plg-exchange circle,.plg-trade-core{fill:rgba(255,255,255,.15)}.plg-trade-core{animation:plgCore 2.4s ease-in-out infinite}.plg-trade-link{stroke-width:2.2;stroke-dasharray:24;animation:plgDraw 2.4s ease-in-out infinite;}
.plg-matter path:not(:last-child){fill:rgba(255,255,255,.1);animation:plgMatter 3.4s ease-in-out infinite}.plg-matter path:nth-child(2){animation-delay:-1.1s}.plg-matter path:nth-child(3){animation-delay:-2.2s}.plg-matter path:last-child{opacity:.55;stroke-dasharray:4 6;animation:plgSignal 3s linear infinite;}
.plg-flow{transform-origin:60px 60px}.plg-flow-a{animation:plgFlow 6.4s linear infinite}.plg-flow-b{animation:plgFlowBack 8s linear infinite;opacity:.55}.plg-flow path{stroke-dasharray:26 8}.plg-aura-core{fill:currentColor;animation:plgHeart 2.8s ease-in-out infinite;}
.plg-rings circle{animation:plgRing 3.6s ease-in-out infinite;transform-origin:center}.plg-rings circle:nth-child(2){animation-delay:-1.2s}.plg-rings circle:nth-child(3){animation-delay:-2.4s}.plg-yuan-core{fill:currentColor;animation:plgCore 3.6s ease-in-out infinite;}
.pub-load-foot{
  position:absolute;z-index:3;left:24px;right:24px;bottom:calc(58px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:8px;color:color-mix(in srgb,var(--pl-cor) 78%,var(--text));
  font-size:10px;letter-spacing:.02em;text-align:center;
}
.pub-load-foot i{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:pubFootPulse 1.9s ease-out infinite}
#publicando-overlay[data-estado="registrando"] .pub-load-foot i{animation-duration:1s}
#publicando-overlay[data-estado="completo"] .pub-load-foot i{animation:none;box-shadow:0 0 0 8px transparent}
#publicando-overlay .pub-load-abortar{
  position:absolute;z-index:5;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);
  margin:0;padding:8px 15px;white-space:nowrap;color:color-mix(in srgb,var(--text) 78%,transparent);font-size:11px;
  border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:color-mix(in srgb,var(--glass-tint) 74%,transparent);box-shadow:none;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);text-shadow:none;
}
#publicando-overlay .pub-load-abortar:active{background:color-mix(in srgb,var(--text) 9%,transparent);}
#publicando-overlay[data-estado="registrando"] .pub-load-geometry{animation:plgRegister .9s ease-in-out infinite alternate}
#publicando-overlay[data-estado="registrando"] .pub-load-shimmer{animation-duration:2.4s}
#publicando-overlay[data-estado="completo"] .pub-load-art,
#publicando-overlay[data-estado="completo"] .pub-load-particles,
#publicando-overlay[data-estado="completo"] .pub-load-shimmer,
#publicando-overlay[data-estado="completo"] .pub-load-geometry *{animation-play-state:paused}
#publicando-overlay[data-estado="completo"] .pub-load-geometry{animation:plgComplete .26s cubic-bezier(.2,.8,.25,1) both}
#publicando-overlay[data-estado="completo"] .pub-load-geometry::after{
  content:'';position:absolute;inset:28%;border:1px solid currentColor;border-radius:50%;
  animation:plgCompleteRing .26s ease-out both;
}
@keyframes pubLoadArt{0%{transform:scale(.94) translate3d(0,.25%,0);filter:saturate(.72) brightness(.99)}100%{transform:scale(.985) translate3d(0,-.35%,0);filter:saturate(.8) brightness(1.035)}}
@keyframes pubLoadShimmer{0%,14%{transform:translateX(-38%);opacity:0}24%{opacity:.78}66%{opacity:.58}82%,100%{transform:translateX(38%);opacity:0}}
@keyframes pubLoadGlint{0%,100%{opacity:.08;transform:scale(.72) translateY(6px)}45%{opacity:.82;transform:scale(1.08) translateY(-3px)}68%{opacity:.28;transform:scale(.94)}}
@keyframes pubLoadParticles{0%,100%{opacity:.32;filter:brightness(.8)}50%{opacity:.85;filter:brightness(1.25)}}
@keyframes pubLoadAura{0%,100%{opacity:.35;transform:scale(.82)}50%{opacity:.9;transform:scale(1.16)}}
@keyframes plgOrbit{to{transform:rotate(360deg)}}@keyframes plgOrbitBack{to{transform:rotate(-360deg)}}
@keyframes plgHeart{0%,100%{opacity:.5;transform:scale(.7)}45%{opacity:1;transform:scale(1.2)}}
@keyframes plgShard{0%,100%{opacity:.42;transform:translateY(5px) scale(.94)}50%{opacity:1;transform:translateY(-5px) scale(1.04)}}
@keyframes plgSignal{to{stroke-dashoffset:-24}}
@keyframes plgNode{0%,100%{opacity:.35;transform:scale(.65)}50%{opacity:1;transform:scale(1.3)}}
@keyframes plgCore{0%,100%{opacity:.45;transform:scale(.72)}50%{opacity:1;transform:scale(1.12)}}
@keyframes plgWave{to{stroke-dashoffset:-50}}
@keyframes plgDraw{0%,100%{stroke-dashoffset:24;opacity:.3}45%,65%{stroke-dashoffset:0;opacity:1}}
@keyframes plgMatter{0%,100%{opacity:.32;transform:translateY(9px) rotate(-3deg)}45%{opacity:1;transform:translateY(-7px) rotate(3deg)}72%{opacity:.72;transform:translateY(2px)}}
@keyframes plgFlow{to{transform:rotate(360deg)}}@keyframes plgFlowBack{to{transform:rotate(-360deg)}}
@keyframes plgRing{0%{opacity:.15;transform:scale(.74)}42%{opacity:1}100%{opacity:0;transform:scale(1.22)}}
@keyframes plgRegister{from{filter:drop-shadow(0 0 13px color-mix(in srgb,var(--pl-cor) 34%,transparent));transform:translate(-50%,-50%) scale(.97)}to{filter:drop-shadow(0 0 24px color-mix(in srgb,var(--pl-cor) 58%,transparent));transform:translate(-50%,-50%) scale(1.025)}}
@keyframes plgComplete{0%{transform:translate(-50%,-50%) scale(.93);opacity:.68}70%{transform:translate(-50%,-50%) scale(1.1);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes plgCompleteRing{from{opacity:.8;transform:scale(.6)}to{opacity:0;transform:scale(2.15)}}
@keyframes pubFootPulse{0%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,currentColor 48%,transparent)}75%,100%{opacity:.45;box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.pub-load-art,.pub-load-particles,.pub-load-shimmer,.pub-load-shimmer::before,.pub-load-shimmer::after,.pub-load-geometry::before,.pub-load-geometry *{animation-duration:10s!important;}}

/* Modal de video: mesmo estudio do de imagem, quadro cheio + corte de duracao.
   Tokens de tema (2026-08-10/11): ver historico do commit pra contexto. */
#criar-vid-modal{
  position:absolute;inset:0;z-index:500;
  background:
    radial-gradient(ellipse 130% 70% at 50% 0%, color-mix(in srgb,var(--accent) 30%,transparent) 0%, transparent 65%),
    radial-gradient(ellipse 120% 60% at 50% 100%, color-mix(in srgb,var(--accent) 16%,transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--surf1) 0%, var(--bg) 50%, var(--surf) 100%);
  display:none;flex-direction:column;
}
#criar-vid-modal.on{display:flex;}
#criar-vid-modal-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 16px 14px;flex-shrink:0;
  background:var(--glass-tint);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:0.5px solid var(--border);
}
#criar-vid-modal-top button{
  background:transparent;border:none;color:var(--text);font-size:14px;
  font-weight:600;cursor:pointer;padding:6px 12px;border-radius:8px;
}
#criar-vid-modal-top button:active{background:color-mix(in srgb, var(--text) 15%, transparent);}
/* Item 2026-07-26 (Pilar, screenshot do estúdio de vídeo: "quando ele
   carrega, toma a tela inteira de um jeito quadrado, sem frame, sem
   distância pra borda... quero de tamanho elegante, proporcional" --
   explícito que NÃO é pra minimizar, só emoldurar): o vídeo tocava as
   bordas do wrap direto, sem respiro nenhum -- diferente da tela de
   prévia final (item 1 desta rodada), que já tinha cantos arredondados +
   sombra + distância da borda. Adicionado padding no wrap (o vídeo
   continua do mesmo TAMANHO relativo, min(56vh,420px) não mudou -- só
   ganhou respiro) e cantos arredondados + sombra no próprio vídeo, mesma
   receita visual da prévia. O botão de mute foi reposicionado (12px ->
   30px) pra continuar colado no canto do vídeo, não no canto do wrap. */
#criar-vid-modal-wrap{
  flex:1;min-height:0;overflow:hidden;position:relative;touch-action:none;
  display:flex;align-items:center;justify-content:center;
  padding:18px;box-sizing:border-box;
}
#criar-vid-modal-video{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;cursor:pointer;
  opacity:0;transition:opacity .15s ease;
  border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.5);
}
/* Antes do primeiro frame decodificado (oncanplay), o <video> ainda não
   conhece a proporção real do arquivo -- o navegador renderiza um retângulo
   padrão (~300x150) enquanto isso, que ficava visível atrás do spinner
   pequeno (#criar-vid-loading), parecendo um "quadrado feio" no meio da
   tela assim que a pessoa escolhia um vídeo pra postar. Escondido via
   opacity até _abrirVidModal (composer-midia-studio.js) marcar .pronto no
   oncanplay -- mesmo momento em que o spinner já some. */
#criar-vid-modal-video.pronto{opacity:1;}
#criar-vid-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:2;pointer-events:none;
}
#criar-vid-loading.hide{display:none;}
#criar-vid-mute-btn{
  position:absolute;top:30px;right:30px;z-index:3;
  width:36px;height:36px;border-radius:50%;
  background:rgba(10,7,20,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:0.5px solid rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
#criar-vid-mute-btn:active{background:rgba(153,102,238,.35);}
#criar-vid-trim{
  flex-shrink:0;padding:10px 20px calc(6px + env(safe-area-inset-bottom));
  background:var(--glass-tint);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
#criar-vid-trim-label{
  font-size:11px;color:var(--dim);font-weight:600;margin-bottom:8px;
  letter-spacing:.02em;
}
#criar-vid-trim-track{
  position:relative;height:36px;border-radius:10px;
  background:var(--surf2);overflow:visible;
}
#criar-vid-trim-fill{
  position:absolute;top:0;bottom:0;left:0;width:100%;
  background:rgba(153,102,238,.32);border-radius:10px;
  border-top:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  pointer-events:none;
}
.criar-vid-trim-handle{
  position:absolute;top:50%;width:18px;height:44px;
  transform:translate(-50%,-50%);
  background:var(--accent);border-radius:6px;
  box-shadow:0 0 0 3px rgba(0,0,0,.6);
  cursor:ew-resize;touch-action:none;
}
.criar-vid-trim-handle::after{
  content:'';position:absolute;top:50%;left:50%;
  width:2px;height:16px;background:rgba(255,255,255,.8);
  transform:translate(-50%,-50%);border-radius:2px;
}
#criar-filtros-strip-video-modal{
  display:flex;gap:14px;overflow-x:auto;flex-shrink:0;
  padding:2px 18px 10px;
  background:var(--glass-tint);
  -webkit-overflow-scrolling:touch;
}
/* Estúdio único: vídeo + corte + filtros + legenda + música + localização,
   tudo rolável numa coluna só — sem precisar de uma segunda tela cortada. */
#criar-vid-modal-scroll{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;
  background:var(--glass-tint);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
#criar-vid-modal-scroll #criar-vid-modal-wrap{flex:0 0 auto;height:min(56vh,420px);}
#criar-vid-extra{
  flex-shrink:0;padding:12px 18px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:10px;
}
#criar-vid-ta{
  width:100%;min-height:70px;padding:12px 14px;background:var(--surf1);
  border-radius:12px;border:1.5px solid var(--border);color:var(--text);
  font-size:15px;line-height:1.55;resize:none;font-family:inherit;
}
#criar-vid-ta:focus{outline:none;border-color:var(--accent);background:var(--surf2)}
/* Item 2026-07-26 (Pilar, item 3: "cards menores, mais discretos,
   tipografia mais fina, tipo Showit") -- mesmo pill, proporções reduzidas
   e peso de fonte mais leve (600→500, com letter-spacing pra compensar a
   leiturabilidade) -- menos "botão de app", mais rótulo discreto. Borda
   mais fina (1.5px→1px) segue o mesmo espírito. */
.criar-vid-loc-pill{
  display:flex;align-items:center;gap:6px;align-self:flex-start;
  background:var(--surf1);border:1px solid var(--border);
  border-radius:999px;padding:6px 13px;color:var(--dim);
  font-size:11.5px;font-weight:500;letter-spacing:.01em;cursor:pointer;
}
.criar-vid-loc-pill.pendente{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);animation:loc-pulse 1s ease-in-out infinite;}
.criar-vid-loc-pill.ativo{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent);}
.criar-vid-loc-pill span{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#criar-vid-loc-x{margin-left:2px;opacity:.6;font-size:11px;}
#criar-vid-extra #criar-music-chip{margin:0!important;}
#criar-loc-search{
  display:none;position:fixed;inset:0;z-index:980;
  align-items:flex-end;justify-content:center;padding:16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,#05030b 62%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
#criar-loc-search.on{display:flex;}
#criar-loc-search-panel{
  width:100%;max-width:460px;max-height:min(72vh,560px);overflow:hidden;
  background:color-mix(in srgb,var(--surf1) 94%,var(--accent) 6%);
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));
  border-radius:22px;box-shadow:0 24px 80px rgba(0,0,0,.42);
  animation:locSheetIn .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes locSheetIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.criar-loc-search-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 13px;}
.criar-loc-search-head strong{display:block;color:var(--text);font-size:15px;letter-spacing:.01em;}
.criar-loc-search-head span{display:block;color:var(--dim);font-size:11px;margin-top:3px;}
#criar-loc-search-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text);font-size:19px;cursor:pointer;}
#criar-loc-q{
  width:calc(100% - 28px);margin:0 14px 8px;padding:12px 14px;
  background:color-mix(in srgb,var(--text) 5%,transparent);
  border:1px solid var(--border);border-radius:12px;color:var(--text);
  font-size:14px;font-family:inherit;box-sizing:border-box;
}
#criar-loc-q:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 55%,transparent);}
#criar-loc-resultados{max-height:310px;overflow-y:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;}
.criar-loc-row{
  display:flex;align-items:center;gap:9px;padding:10px 14px;
  color:var(--dim);font-size:13px;cursor:pointer;
  border-bottom:0.5px solid var(--border);
}
.criar-loc-row:last-child{border-bottom:none;}
.criar-loc-row:active{background:color-mix(in srgb, var(--accent) 10%, transparent);}
.criar-loc-row svg{flex-shrink:0;color:var(--accent);}
.criar-loc-row-remover{color:#c85858;justify-content:center;font-size:12px;}
/* Migração CSP style-src 2026-08-02: era style="opacity:.5" inline nos
   placeholders de Buscando/Erro/Nenhum lugar (_buscarLocalizacao etc). */
.criar-loc-row-dim{opacity:.5}
/* Migração CSP style-src 2026-08-02 (busca de música -- _buscarMusica em
   composer-musica-local-publicar.js): placeholders + linha de resultado. */
.music-status-msg{padding:12px 16px;color:#666;font-size:13px}
.music-result-row{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:0.5px solid #1a1a1a;cursor:pointer}
.music-result-thumb{width:36px;height:36px;border-radius:6px;object-fit:cover;flex-shrink:0}
.music-result-noimg{width:36px;height:36px;border-radius:6px;background:#2a1a4a;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#9966ee;font-size:16px}
.music-result-info{flex:1;min-width:0}
.music-result-title{font-size:13px;color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-result-artist{font-size:11px;color:#777;margin-top:1px}
.music-result-preview-btn{background:none;border:none;color:#555;font-size:16px;padding:4px 6px;cursor:pointer;flex-shrink:0}
#criar-filtros-strip-video-modal::-webkit-scrollbar{display:none}

#criar-img-overlay{
  position:absolute;inset:0;pointer-events:none;
}
/* Crop frame guides */
.criar-crop-guide{
  position:absolute;border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 9999px rgba(0,0,0,.45);
  pointer-events:none;
}

/* Composer scroll area (image + music chip + textarea) */
#criar-scroll-area{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;
  -webkit-overflow-scrolling:touch;
}
/* Composer with image at top */
/* Item 2026-07-26 (Pilar, screenshots do composer com mídia já
   selecionada): "essa imagem se estender assim por toda metade da tela
   do celular sem noção de limite algum, e nem estética... devia vir num
   frame, talvez com uma borda prata já que ainda não passou pelo
   mosaico/filtro final de praças". Terceiro lugar do estúdio (depois da
   prévia final e do modal de corte de vídeo) que precisava da mesma
   moldura -- aqui com um toque a mais sugerido por ela: borda PRATA (cinza
   fria, não o roxo de --accent) de propósito -- sinaliza visualmente que
   essa é a mídia crua, antes de qualquer praça/filtro ser aplicado; o
   roxo fica reservado pra quando algo já é "da Linka" de verdade.
   Padding no container cria o respiro das bordas da tela; a mídia em si
   ganha cantos arredondados + a borda prata. */
#criar-img-area{
  flex-shrink:0;width:100%;position:relative;
  background:#111;overflow:hidden;max-height:56vh;
  display:flex;flex-direction:column;
  padding:14px;box-sizing:border-box;
}
#criar-img-area img{
  width:100%;display:block;object-fit:contain;flex:1;min-height:0;
  border-radius:14px;border:1px solid rgba(206,210,222,.32);
}
#criar-img-area video{
  /* flex:1+min-height:0 (não max-height:44vh fixo) — assim o vídeo divide o
     espaço com #criar-filtros-strip-video em vez de tomar os 44vh sozinho e
     empurrar o strip de filtro pra fora da área visível (cortado pelo overflow:hidden
     do pai). Era por isso que o strip "sumia assim que o vídeo carregava". */
  width:100%;display:block;object-fit:contain;flex:1;min-height:0;
  border-radius:14px;border:1px solid rgba(206,210,222,.32);
}
#criar-img-area-btns{
  position:absolute;top:22px;right:22px;
  display:flex;gap:6px;
}
#criar-img-area-btns button{
  background:rgba(0,0,0,.55);color:#fff;border:none;
  border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;
  backdrop-filter:blur(4px);
}
/* When image present: textarea shrinks */
#criar-bg.has-img #criar-ta{
  flex:unset;height:80px;min-height:60px;
}
/* Footer always visible at bottom of composer */
#criar-bg #criar-foot{
  position:sticky;bottom:0;
  background:var(--bg);
  z-index:1;
}

/* ── Header user count — Linka accent ───────────────────────────────────── */
#hdr-count{
  font-family:'Courier New',Courier,monospace;
  font-size:11px;font-weight:700;
  letter-spacing:.12em;
  margin-left:8px;
  color:#b899ff;
  white-space:nowrap;
  align-self:center;
  filter:drop-shadow(0 0 6px rgba(153,102,238,.35));
}
#hdr-count .hc-zero{opacity:.22;}
#hdr-count .hc-sig{color:#d4b3ff;filter:drop-shadow(0 0 5px rgba(153,102,238,.7));}


/* ── Settings full-screen ─────────────────────────────────────────────────── */
.s-section{margin-top:20px}
.s-label{color:#6655aa;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:0 16px 6px}
.s-card{background:var(--surf1);border:1px solid rgba(153,102,238,.12);border-radius:14px;margin:0 12px;overflow:hidden}
.s-row{display:flex;align-items:center;padding:13px 14px;gap:10px;cursor:pointer;position:relative}
.s-row:active{background:rgba(153,102,238,.07)}
.s-row+.s-row{border-top:1px solid rgba(153,102,238,.08)}
.s-danger .s-text p{color:#c85858}
.s-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.s-i-purple{background:rgba(153,102,238,.14)}
.s-i-blue{background:rgba(60,120,220,.12)}
.s-i-green{background:rgba(50,180,100,.12)}
.s-i-gray{background:rgba(120,110,150,.12)}
.s-i-orange{background:rgba(200,130,40,.12)}
.s-i-red{background:rgba(200,60,60,.12)}
.s-text{flex:1}
.s-text p{color:var(--fg);font-size:14px;font-weight:400;margin:0}
.s-text span{color:var(--dim);font-size:11px;margin-top:1px;display:block}
.s-arrow{color:rgba(153,102,238,.4);font-size:18px;line-height:1}
.s-toggle{width:40px;height:24px;border-radius:12px;background:rgba(153,102,238,.2);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
.s-toggle.on{background:#7744cc}
.s-toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.s-toggle.on::after{left:19px}
/* Sub-panels */
.s-sub{position:absolute;inset:0;background:var(--bg);z-index:10;flex-direction:column;display:none;overflow:hidden}
.s-sub.open{display:flex}
.s-sub-hdr{display:flex;align-items:center;padding:14px 16px 12px;border-bottom:1px solid rgba(153,102,238,.2);background:var(--bg);flex-shrink:0}
.s-sub-hdr span{font-size:16px;font-weight:600;color:var(--fg)}
.s-back{background:none;border:none;color:var(--accent);font-size:22px;padding:4px 10px 4px 0;cursor:pointer;line-height:1}
.s-sub-body{flex:1;overflow-y:auto;padding:20px 16px 40px}
.s-field-group{margin-bottom:18px}
.s-field-label{font-size:12px;color:var(--dim);font-weight:500;letter-spacing:.04em;display:block;margin-bottom:6px}
.s-save-btn{width:100%;padding:14px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer;margin-top:8px}
.s-opt-btn{width:100%;padding:13px 16px;border-radius:10px;border:1px solid rgba(153,102,238,.2);background:var(--surf1);color:var(--fg);font-size:14px;font-weight:400;cursor:pointer;text-align:left;transition:border-color .15s}
.s-opt-btn.on{border-color:var(--accent);color:var(--accent);background:rgba(153,102,238,.08)}
/* 2026-08-11: usado só pelo picker de Rastro de toque, agora que a linha é
   visível pra todo mundo -- os 6 estilos ainda não liberados (tudo exceto
   Fumaça) ficam esmaecidos com um cadeado em vez de simplesmente sumir ou
   parecer clicável sem fazer nada (ver _sAtualizarRastroOpts). */
.s-opt-btn.bloqueado{opacity:.42;cursor:not-allowed;}
.s-opt-btn.bloqueado::after{content:' 🔒';opacity:.7;}
.s-sessao-card{background:var(--surf1);border:1px solid rgba(153,102,238,.12);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px}
.s-sessao-card .s-sessao-info{flex:1}
.s-sessao-card .s-sessao-info p{font-size:13px;color:var(--fg);margin:0 0 3px}
.s-sessao-card .s-sessao-info span{font-size:11px;color:var(--dim)}
.s-sessao-card .s-sessao-revogar{font-size:12px;color:#c85858;background:none;border:1px solid rgba(200,88,88,.3);border-radius:6px;padding:5px 10px;cursor:pointer}

/* ── Ícone de música nos tiles ──────────────────────────────── */
.tile-music-icon{
  font-size:11px;
  color:rgba(153,102,238,0.75);
  line-height:1;
  margin-left:4px;
  vertical-align:middle;
  letter-spacing:0;
  animation:music-pulse 2s ease-in-out infinite;
}
.tile-music-icon-img{
  position:absolute;
  bottom:8px;
  left:8px;
  font-size:14px;
  color:rgba(255,255,255,0.85);
  text-shadow:0 0 6px rgba(0,0,0,0.8);
  animation:music-pulse 2s ease-in-out infinite;
}
/* ── Onboarding: selects de localização (dark glass) ───────────────────────── */
#esp-pais, #esp-estado, #esp-cidade-sel {
  /* appearance:none é injetado via JS inline style IS_SEL */
  /* CSS aqui garante que o select nativo no iOS ainda seja elegante */
  color-scheme: dark;
}
/* Senha: barra de força */
#cad-pw-bar { height: 100%; border-radius: 1px; transition: width .25s, background .25s; }

/* ── Skins de praça — modal "Vestir a Linka" ────────────────────────── */
.skins-modal-ov{
  position:fixed;inset:0;z-index:99000;background:rgba(6,4,10,.6);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity .2s ease;
}
.skins-modal-ov.on{opacity:1}
.skins-modal-card{
  position:relative;
  width:100%;max-width:480px;max-height:78vh;display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  border:1px solid var(--border);border-bottom:none;
  border-radius:18px 18px 0 0;
  transform:translateY(12px);transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.skins-modal-ov.on .skins-modal-card{transform:translateY(0)}
.skins-modal-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 12px;font-size:15px;font-weight:700;color:var(--text);
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.skins-modal-x{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--border);
  background:transparent;color:var(--text);cursor:pointer;font-size:12px;
}
.skins-modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 14px 22px;display:flex;flex-direction:column;gap:8px}
.skins-card{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  background:var(--surf1);border:1px solid rgba(153,102,238,.12);
}
.skins-card.active{border-color:var(--sc,var(--accent));box-shadow:0 0 0 1px var(--sc,var(--accent)) inset}
.skins-card.locked{opacity:.55}
.skins-card-swatch{width:34px;height:34px;border-radius:50%;flex-shrink:0;box-shadow:0 0 10px 1px var(--sc,transparent);background:var(--sc,transparent)}
/* Migração CSP style-src 2026-08-02: padding:20px 0 estático repetido em
   3 placeholders (carregando/erro/vazio) do modal de skins. */
.skins-empty-pad{padding:20px 0}
.skins-card-info{flex:1;min-width:0}
.skins-card-nome{font-size:13.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.skins-card-rar{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);opacity:.75}
.skins-card-desc{font-size:11.5px;color:var(--dim);margin-top:1px;line-height:1.4}
.skins-card-req{font-size:11px;color:var(--dim);margin-top:4px}
.skins-card-tag{font-size:11px;font-weight:700;color:var(--sc,var(--accent));margin-top:4px}
.skins-card-btn{
  margin-top:6px;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:8px;
  border:1px solid var(--sc,var(--accent));color:var(--sc,var(--accent));background:transparent;cursor:pointer;
}
.skins-card-status{font-size:14px;flex-shrink:0}

/* Preview flutuante de skin (abre ao tocar em qualquer card da lista) */
.skins-preview-ov{
  position:absolute;inset:0;z-index:10;background:rgba(6,4,10,.55);
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;transition:opacity .18s ease;border-radius:18px 18px 0 0;
}
.skins-preview-ov.on{opacity:1}
.skins-preview-card{
  position:relative;width:100%;max-width:340px;background:var(--bg);
  border:1px solid var(--border);border-radius:16px;padding:16px;
  display:flex;flex-direction:column;gap:8px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.skins-preview-x{position:absolute;top:10px;right:10px}
.skins-preview-mock{
  height:86px;border-radius:12px;border:1px solid;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;padding:10px;
  overflow:hidden;
  /* --sp-grad/--sc setados via data-svars (migração CSP style-src
     2026-08-02, ver skins.js::_skinsPreview). */
  background:var(--sp-grad,none);border-color:var(--sc,var(--accent));
}
.skins-preview-mock-avatar{width:34px;height:34px;border-radius:50%;border:2px solid var(--sc,var(--accent));background:rgba(255,255,255,.14);margin-bottom:6px;object-fit:cover;display:block}
.skins-preview-mock-avatar-ini{display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.skins-preview-mock-name{font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.skins-preview-nome{font-size:14.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.skins-preview-desc{font-size:12px;color:var(--dim);line-height:1.4}
.skins-preview-scope{font-size:10.5px;color:var(--dim);opacity:.7;font-style:italic;line-height:1.4}
.skins-preview-req{font-size:11.5px;color:var(--dim);margin-top:2px}
.skins-preview-tag{font-size:11.5px;font-weight:700;color:var(--sc,var(--accent));margin-top:2px}
.skins-preview-btn{
  margin-top:4px;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:9px;
  border:1px solid var(--sc,var(--accent));color:#fff;background:var(--sc,var(--accent));cursor:pointer;
}

/* ── Prévia de skin em TELA CHEIA (2026-07-28) ───────────────────────────
   Pedido da Pilar: em vez do card pequeno acima (.skins-preview-*, mantido
   intacto pra não quebrar nada, só não é mais o caminho padrão), a Linka
   inteira veste a cor por alguns segundos. z-index acima até do próprio
   modal de skins (.skins-modal-ov é 99000) -- a prévia sempre fica por
   cima de tudo, mesmo que o catálogo ainda esteja fechando. */
.skin-fs-preview{
  position:fixed;inset:0;z-index:99100;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:0 0 48px;opacity:0;transition:opacity .3s ease;
  /* SEM background cobrindo a tela de propósito -- quem "veste" é o app de
     verdade por baixo (via _skinsAplicarGlobal: --accent, glass-tint,
     botões, tudo que já reage a --accent hoje), não um card colorido por
     cima escondendo ele. Esse overlay é só o rótulo/barra/botão flutuando
     no rodapé -- scrim leve só atrás deles pra legibilidade, não a tela
     toda. pointer-events:none no container, :auto só no botão -- clique
     "vaza" pro app de verdade atrás em qualquer outro ponto da tela. */
  background:linear-gradient(to top, rgba(4,2,8,.55) 0%, transparent 35%);
}
.skin-fs-preview.on{opacity:1}
.skin-fs-vestir,.skin-fs-locked{pointer-events:auto}
.skin-fs-label{
  color:#fff;font-size:15px;font-weight:700;letter-spacing:.3px;
  text-shadow:0 2px 8px rgba(0,0,0,.6);margin-bottom:14px;
}
.skin-fs-bar{width:min(220px,70vw);height:3px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden;margin-bottom:18px}
.skin-fs-bar-fill{
  height:100%;width:100%;background:#fff;border-radius:2px;transform-origin:left;
  animation-name:_skinFsBarShrink;animation-timing-function:linear;animation-fill-mode:forwards;
  animation-duration:var(--fs-dur,4s);
}
@keyframes _skinFsBarShrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.skin-fs-vestir{
  font-size:13.5px;font-weight:700;padding:10px 22px;border-radius:20px;
  border:1.5px solid rgba(255,255,255,.7);background:rgba(255,255,255,.16);
  color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;
}
.skin-fs-locked{
  font-size:12.5px;color:#fff;opacity:.85;text-shadow:0 1px 4px rgba(0,0,0,.5);
  padding:0 24px;text-align:center;
}

/* ── CÂMERA + LENTES (Contos) ────────────────────────────────────────────
   Pedido da Pilar 2026-07-24: primeira vez que a câmera do dispositivo é
   chamada na Linka. Overlay em tela cheia, sem cromo do app por trás. */
.cam-wrap{
  position:fixed;inset:0;z-index:950;background:#000;
  display:flex;flex-direction:column;overflow:hidden;
}
.cam-wrap video,.cam-wrap canvas.cam-canvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Item 2026-07-26 (Pilar, item 2 dos Contos: "moldura/estética dos
   controles" -- ela comparou a câmera ao vivo a "Windows 98 imitando
   TikTok"). A tela de confirmação (depois de capturar) já tinha ganho o
   verniz "vidro fosco + neon" da Linka em 2026-07-24; a câmera ao vivo
   (topbar/lentes/obturador) tinha ficado pra trás, com chrome cinza/preto
   genérico de câmera de fábrica. Aqui: (1) véu gradiente no topo e na base
   -- além de estético, resolve legibilidade real dos ícones brancos sobre
   vídeo claro; (2) glow de cor de marca no obturador e nas lentes ativas,
   pra ecoar o mesmo vocabulário visual do resto do app. */
.cam-wrap::before,.cam-wrap::after{
  content:'';position:absolute;left:0;right:0;z-index:1;pointer-events:none;
}
/* Correção 2026-07-27 (task #85, Pilar: "essa tela de gravação é horrível
   paleolítica esteticamente" -- mesmo depois do polish de 2026-07-26 logo
   abaixo). Diagnóstico: os elementos JÁ tinham vidro fosco/blur, mas o
   conjunto ainda parecia "câmera de fábrica genérica" -- faltava um toque
   de cor/identidade Linka além do cinza translúcido. Adicionado um tingimento
   sutil roxo (var(--accent)) nos véus de topo/base, no lugar de puro preto. */
.cam-wrap::before{top:0;height:100px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,rgba(0,0,0,.4)),transparent)}
.cam-wrap::after{bottom:0;height:190px;background:linear-gradient(0deg,color-mix(in srgb,var(--accent) 12%,rgba(0,0,0,.48)),transparent)}
.cam-topbar{
  position:relative;z-index:2;display:flex;justify-content:space-between;
  padding:14px 14px 0;
}
/* 2026-07-28 (Pilar, item 7/9): "a falta de cor nos ícones glasses" -- em
   repouso o botão era preto+branco puro, só ganhava a cor de marca no
   instante do :active (um flash rápido que some assim que solta o dedo).
   Border e ícone agora carregam um tingimento permanente de --accent
   (sutil o bastante pra não competir com o :active, que continua bem
   mais forte) -- lê como "vidro da Linka" em repouso, não um botão de
   câmera genérico qualquer. */
.cam-icon-btn{
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.35);border:1px solid color-mix(in srgb,var(--accent) 35%,rgba(255,255,255,.3));
  color:color-mix(in srgb,var(--accent) 25%,#fff);font-size:16px;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.cam-icon-btn:active{
  background:color-mix(in srgb,var(--accent) 28%,rgba(0,0,0,.35));
  border-color:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent);
}
/* Item 2026-07-26 (Pilar, item 4 dos Contos: "guias laterais em vez de só
   rodapé" -- virar câmera, conto de texto e galeria estavam espremidos na
   topbar horizontal, ao lado do "fechar". Vira uma guia vertical na
   lateral direita (mesmo padrão de referências como TikTok/Instagram
   Stories) -- o topbar fica só com o "fechar", sempre no mesmo canto em
   qualquer tela da câmera. position:absolute direto no .cam-wrap (que já
   é o contexto de posicionamento, por ser position:fixed) -- não entra no
   fluxo flex do topbar/lentes/bottombar, então o lugar dela na innerHTML
   não importa. */
.cam-rail{
  position:absolute;z-index:2;top:50%;right:14px;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:12px;
}
.cam-lentes{
  position:relative;z-index:2;margin-top:auto;display:flex;gap:8px;
  padding:0 14px 14px;overflow-x:auto;scrollbar-width:none;
}
.cam-lentes::-webkit-scrollbar{display:none}
.cam-lente-btn{
  flex-shrink:0;padding:7px 14px;border-radius:20px;cursor:pointer;
  /* Correção 2026-07-27 (task #85): fundo flat rgba(0,0,0,.4) trocado por
     gradiente sutil -- mesmo vidro fosco, mas com um pouco mais de
     profundidade/identidade em vez de retângulo cinza chapado.
     2026-07-28 (item 7/9): "essas tuplas horríveis pra escolher filtro"
     -- borda ganha o mesmo tingimento de --accent do .cam-icon-btn acima,
     mesmo vocabulário de "vidro colorido em repouso" nos dois. */
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(0,0,0,.38));
  border:1.5px solid color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.28));
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.cam-lente-btn.on{
  background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#000 10%));
  border-color:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent);
}
.cam-bottombar{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  padding:0 0 30px;
}
/* Item 2026-07-26 (Pilar, item 3 dos Contos: "um botão só -- toque tira
   foto, segurar grava vídeo, com uma contagem de 3s antes de começar".
   Antes eram DOIS botões lado a lado (foto + vídeo), redundante e sem
   equivalente em nenhum outro app de câmera que ela usa. A lógica de
   toque-curto x segurar-e-soltar x segurar-até-o-fim está em
   _camBtnDown/_camBtnUp/_camIniciarContagem, em camera-lentes.js;
   aqui só os 3 estados visuais do botão único. */
.cam-contagem-num{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:16px;pointer-events:none;
  font-size:38px;font-weight:800;color:#fff;
  text-shadow:0 2px 14px color-mix(in srgb,var(--accent) 70%,transparent),0 2px 8px rgba(0,0,0,.5);
  animation:camContagemPop .5s ease;
}
.cam-contagem-num:empty{display:none}
@keyframes camContagemPop{0%{transform:translateX(-50%) scale(.5);opacity:0}60%{transform:translateX(-50%) scale(1.15);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:1}}
/* Correção 2026-07-27 (task #85, Pilar: "horrível paleolítica"): botão
   era um círculo branco CHAPADO -- lê como botão de formulário genérico,
   não como obturador de câmera. Vira anel de vidro (fundo translúcido,
   borda branca fina) com respiração/glow pulsante contínuo em repouso
   (camShutterPulseIdle) -- mesma ideia visual do sino/olho com novidade
   (eyeNeon, mais acima neste arquivo), aplicada aqui. Some assim que
   entra em contagem ou gravação (cada estado já tem o próprio feedback). */
/* 2026-07-28 (item 7/9): "o botão de gravar e o círculo branco em volta
   dele" -- a borda era branco chapado (rgba(255,255,255,.9)), a única
   peça sem nenhuma cor de marca na tela inteira de gravação. Mistura
   --accent na borda (glass tingido, não mais um anel branco genérico de
   câmera de sistema) -- o glow ao redor (já existia) continua fazendo o
   trabalho pesado de contraste contra qualquer cena atrás. */
.cam-shutter{
  width:68px;height:68px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.16);border:3px solid color-mix(in srgb,var(--accent) 45%,rgba(255,255,255,.75));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent),
    0 4px 18px color-mix(in srgb,var(--accent) 30%,transparent);
  animation:camShutterPulseIdle 2.6s ease-in-out infinite;
  transition:transform .1s ease,box-shadow .15s ease,background .15s ease,
    border-radius .15s ease,width .15s ease,height .15s ease,margin .15s ease;
}
.cam-shutter:active{transform:scale(.94)}
.cam-shutter.contando{animation:camPulseContagem .6s ease-in-out infinite}
@keyframes camShutterPulseIdle{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent),0 4px 18px color-mix(in srgb,var(--accent) 30%,transparent)}
  50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 50%,transparent),0 4px 26px color-mix(in srgb,var(--accent) 45%,transparent)}
}
/* Item 2026-07-27 (Pilar, item 4: "o botão de gravação vira um quadrado
   feio" -- mesmo com o glow do item 2, ainda achou genérico). Trocado o
   morph de forma (círculo->quadrado arredondado, opacidade pulsando) por
   um anel de progresso circular de verdade (SVG, #cam-shutter-anel) --
   o botão agora só troca de cor, continua círculo. Ver _camIniciarGravacao/
   _camPararGravacao (camera-lentes.js) pra a lógica do anel. */
.cam-shutter.gravando{
  background:#e0453f;border-color:rgba(255,255,255,.5);
  box-shadow:0 0 0 3px rgba(224,69,63,.35),0 4px 18px rgba(224,69,63,.4);
  animation:none; /* pausa o pulso idle -- o anel de progresso já é o feedback aqui */
}
.cam-shutter-anel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none;display:none;
}
.cam-shutter-anel.ativo{display:block}
.cam-shutter-anel-trilha{stroke:rgba(255,255,255,.22)}
.cam-shutter-anel-fill{stroke:#e0453f;transition:stroke-dashoffset .1s linear}
@keyframes camPulseContagem{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent),0 4px 18px color-mix(in srgb,var(--accent) 40%,transparent)}
  50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 22%,transparent),0 4px 24px color-mix(in srgb,var(--accent) 55%,transparent)}
}

.cam-confirm{
  position:absolute;inset:0;z-index:10;background:#000;
  display:flex;flex-direction:column;
}
.cam-confirm-topbar{
  position:relative;z-index:2;display:flex;justify-content:flex-end;gap:10px;
  padding:14px 14px 0;
}
.cam-confirm-media{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
/* Pedido da Pilar 2026-07-24: pausar o vídeo da prévia (toque nele) deixava
   só o "✕" como opção -- o próprio <video> nativo (sem "controls", mas o
   Android ainda intercepta o toque) estava roubando o toque de Refazer/
   Postar. A prévia é só pra visualizar (autoplay+loop+muted já bastam) --
   pointer-events:none tira o vídeo do caminho, os botões da Linka embaixo
   continuam sempre clicáveis, sem depender de nenhum comportamento nativo. */
.cam-confirm-media img,.cam-confirm-media video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.conto-media-estado{
  position:absolute;left:50%;top:50%;z-index:6;width:54px;height:54px;
  transform:translate(-50%,-50%) scale(.82);opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .24s cubic-bezier(.2,.8,.2,1);
}
.carregando>.conto-media-estado,.enviando>.conto-media-estado{opacity:1;transform:translate(-50%,-50%) scale(1)}
.conto-media-estado::before,.conto-media-estado::after,.conto-media-estado span{
  content:'';position:absolute;border-radius:50%;inset:0;
}
.conto-media-estado::before{
  border:1px solid color-mix(in srgb,var(--accent) 50%,rgba(255,255,255,.32));
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 0 12px rgba(255,255,255,.05);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.conto-media-estado::after{
  inset:5px;border:1.5px solid transparent;border-top-color:#fff;
  border-right-color:color-mix(in srgb,var(--accent) 72%,#fff);
  animation:contoEstadoOrbita 1.05s linear infinite;
}
.conto-media-estado span{
  inset:20px;background:#fff;
  box-shadow:0 0 10px #fff,0 0 22px color-mix(in srgb,var(--accent) 80%,transparent);
  animation:contoEstadoPulso .85s ease-in-out infinite alternate;
}
@keyframes contoEstadoOrbita{to{transform:rotate(360deg)}}
@keyframes contoEstadoPulso{to{transform:scale(.55);opacity:.42}}
/* Pedido da Pilar 2026-07-24 (2ª rodada): depois de gravar, poder trocar a
   lente (só foto -- ver comentário em _camCapturarFrameRaw) e adicionar
   música antes de postar, com a mesma linguagem visual "vidro fosco +
   neon" do resto da Linka -- "mais elegante que no Insta até". */
.cam-confirm-lentes{padding:0 14px 10px;margin-top:0}

/* ── LEQUE DE FILTROS (item 8/9, 2026-07-28) ──────────────────────────────
   Pedido da Pilar: "essa fileira de pills de filtro é muito feia... um
   ícone só na lateral que, ao tocar, abre as opções em leque ao redor do
   ícone". Substitui a fileira horizontal de .cam-lente-btn (ainda usada
   noutro lugar -- os fundos do conto de texto, .cam-texto-fundos -- por
   isso não foi apagada, só parou de ser usada AQUI) nas 3 telas de filtro/
   lente (câmera ao vivo, confirmação de foto, confirmação de vídeo -- ver
   _montarLeque, camera-lentes.js). Um botão (ícone + nome do filtro atual)
   que abre um arco de opções por cima dele -- x/y calculados em JS
   (trigonometria não dá pra fazer só com calc() do CSS). */
.cam-leque-host{position:relative;z-index:2;margin-top:auto;display:flex;padding:0 14px 14px}
.cam-leque-wrap{position:relative;display:inline-flex}
.cam-leque-toggle{
  display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:20px;cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(0,0,0,.38));
  border:1.5px solid color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.28));
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.cam-leque-toggle-icone{display:flex;color:color-mix(in srgb,var(--accent) 55%,#fff)}
.cam-leque-wrap.aberto .cam-leque-toggle{
  background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#000 10%));
  border-color:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent);
}
.cam-leque-wrap.aberto .cam-leque-toggle-icone{color:#fff}
/* Item 2026-07-27 (task #87): filtro já escolhido/queimado antes de
   gravar -- meio apagado + cursor "não", em vez do leque abrir (toca só
   mostra o toast explicando, ver aoTocarTravado em _montarLeque). */
.cam-leque-travada{opacity:.45;cursor:not-allowed}
.cam-leque-opcoes{
  position:absolute;left:14px;bottom:calc(100% + 6px);
  width:0;height:0;pointer-events:none;
}
/* 2026-07-30 (Pilar, madrugada: "pills cinza chapado, sem cor, sem
   hierarquia visual"): bolinha com o gradiente de cor de cada lente
   (_LENTES[].swatch, camera-lentes.js) -- dá identidade visual própria pra
   cada opção mesmo antes de ler o nome, tanto no botão fechado quanto em
   cada item do leque aberto. Borda clara sutil pra não se perder contra
   fundos escuros de câmera (foto/vídeo por trás variam muito de luminância). */
.cam-leque-swatch{
  width:15px;height:15px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
  background:var(--sw-bg,transparent);
}
.cam-leque-item{
  position:absolute;left:0;bottom:0;white-space:nowrap;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(10,8,14,.72));
  border:1.5px solid color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.28));
  color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transform:translate(var(--x,0),var(--y,0)) scale(.35);
  transition:transform .24s cubic-bezier(.34,1.56,.64,1),opacity .18s ease;
  transition-delay:var(--td,0ms);
}
.cam-leque-wrap.aberto .cam-leque-item{
  opacity:1;pointer-events:auto;
  transform:translate(var(--x,0),var(--y,0)) scale(1);
}
.cam-leque-item.on{
  background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#000 10%));
  border-color:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent);
}
.cam-confirm-musica{
  flex:0 0 auto;width:52px;padding:13px 0;text-align:center;
  background:rgba(255,255,255,.06);color:#fff;
}
.cam-confirm-musica.on{
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 55%,transparent),color-mix(in srgb,var(--accent) 25%,transparent));
  border-color:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent);
}
.cam-confirm-acoes{display:flex;gap:10px;padding:16px}
/* 2026-07-28 (Pilar, item 3/9): "O botão 'postar conto' chega a ser uma
   ofensa esteticamente" -- era um retângulo (border-radius:12px) com
   borda branca genérica de formulário web, sem nenhum feedback de toque.
   Vira pílula (999px, o mesmo vocabulário de botão redondo já usado no
   resto do app -- ver .p-pill, .skin-fs-vestir etc.), sem borda branca
   plana (o gradiente+glow já define a forma sozinho), com :active de
   verdade (encolhe no toque, como um botão nativo responde) em vez de só
   existir parado na tela. .cam-confirm-btn (o par secundário, ex:
   "Desfazer") ganha a mesma pílula pra não ficar com vocabulário
   diferente do primário ao lado. */
.cam-confirm-btn{
  flex:1;padding:13px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;
  border:none;letter-spacing:.2px;
  background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;transition:transform .12s ease,box-shadow .12s ease;
}
.cam-confirm-btn:active{transform:scale(.96)}
.cam-confirm-postar{
  background:
    linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0) 45%),
    linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000 10%));
  color:#fff;
  box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 45%,transparent);
}
.cam-confirm-postar:active{transform:scale(.96);box-shadow:0 3px 12px color-mix(in srgb,var(--accent) 45%,transparent)}
.cam-confirm-postar:disabled{opacity:.6;cursor:default;box-shadow:none;transform:none}
/* Item 2026-07-27 (Pilar, itens 1+2): tela de confirmação de foto/vídeo
   -- "Refazer"/"Música" saíram daqui (viraram ícone na .cam-rail, mesmo
   padrão da câmera ao vivo); sobra só "Postar conto", sozinho e em
   destaque -- container próprio (não reaproveita .cam-confirm-acoes, que
   ainda serve o composer de texto puro e a legenda, ambos com layout
   diferente). .cam-confirm-btn/.cam-confirm-postar continuam os mesmos,
   só sem o "flex:1" competindo com irmãos que não existem mais aqui. */
.cam-confirm-acoes-principal{padding:16px}
.cam-confirm-acoes-principal .cam-confirm-btn{width:100%;box-sizing:border-box;padding:15px;font-size:15px}
/* Estado "com faixa escolhida" do botão de música na guia lateral --
   mesmo vocabulário (gradiente + glow na cor de marca) já usado em
   .cam-lente-btn.on/.cam-legenda-pos-btn.on, generalizado pra qualquer
   .cam-icon-btn que precise de um estado "ligado" persistente (não só o
   :active passageiro do toque). */
.cam-icon-btn.on{
  background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#000 10%));
  border-color:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent);
}
/* Pedido da Pilar 2026-07-24 (3ª rodada): confirmação clara e inequívoca
   de que o conto foi publicado -- antes só tinha o toast, fácil de perder
   na hora que a tela fecha, principalmente com vídeo (demora mais). */
.cam-confirm-sucesso{
  position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  background:rgba(10,8,14,.75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  animation:camSucessoFade .25s ease;
}
.cam-confirm-sucesso-check{
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#3ecf8e,#2a9d68);color:#fff;font-size:32px;font-weight:800;
  box-shadow:0 0 22px rgba(62,207,142,.5);margin-bottom:8px;
  animation:camSucessoPop .4s cubic-bezier(.34,1.56,.64,1);
}
.cam-confirm-sucesso-txt{color:#fff;font-size:16px;font-weight:800}
.cam-confirm-sucesso-sub{color:var(--dim);font-size:12.5px}
@keyframes camSucessoFade{from{opacity:0}to{opacity:1}}
@keyframes camSucessoPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

/* ── CONTO DE TEXTO ───────────────────────────────────────────────────────
   Pedido da Pilar 2026-07-24 (sinal verde): digitar sobre um fundo, tipo
   "Aa" do Insta -- só que com o vocabulário visual da própria Linka
   (gradientes em _FUNDOS_TEXTO). Reaproveita .cam-topbar/.cam-lentes/
   .cam-confirm-acoes/.cam-confirm-btn/.conto-view-musica já existentes,
   pra não duplicar estilo -- só o que é exclusivo daqui vai abaixo. */
.cam-btn-texto{width:auto;padding:0 12px;border-radius:19px;font-size:15px;font-weight:800;font-style:italic}
.cam-texto-wrap{
  position:fixed;inset:0;z-index:950;
  display:flex;flex-direction:column;overflow:hidden;
  transition:background .25s ease;
}
.cam-texto-meio{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.cam-texto-input{
  width:100%;max-height:70%;background:transparent;border:none;outline:none;resize:none;
  text-align:center;font-size:26px;font-weight:800;line-height:1.35;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  font-family:inherit;
}
.cam-texto-input::placeholder{color:rgba(255,255,255,.55)}
.cam-texto-cores{display:flex;justify-content:center;gap:10px;padding:0 16px 12px}
.cam-texto-cor-dot{
  width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.35);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.cam-texto-cor-dot.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.4)}
/* Item 2026-07-27 (Pilar, item 3: fonte alternável no texto do conto) --
   mesmo espírito de .cam-texto-cores (linha centralizada de swatches),
   só que cada botão já É a própria fonte que representa -- "Aa" escrito
   em Inter/Playfair Display/Dancing Script, sem legenda separada. */
.cam-texto-fontes{display:flex;justify-content:center;gap:10px;padding:0 16px 14px}
.cam-texto-fonte-btn{
  min-width:44px;padding:6px 10px;border-radius:10px;cursor:pointer;font-size:16px;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.22);color:#fff;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.cam-texto-fonte-btn.on{
  background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#000 10%));
  border-color:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent);
}
.cam-texto-fundos{margin-top:0}

/* ── LEGENDA sobre foto/vídeo (dentro da tela de confirmação) ────────────
   Pedido da Pilar 2026-07-24 (sinal verde): "Aa" que abre POR CIMA da
   prévia já capturada -- sub-tela translúcida (não some o que já foi
   tirado, só escurece por baixo), mesmo vocabulário de cor/fundo do conto
   de texto puro (_CORES_TEXTO), + escolha de posição (cima/centro/baixo). */
.cam-legenda-wrap{
  position:absolute;inset:0;z-index:15;
  background:rgba(8,6,12,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;flex-direction:column;overflow:hidden;
  animation:camSucessoFade .18s ease;
}
.cam-legenda-input{font-size:22px}
#cam-btn-legenda.on{background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#000 10%));border-color:var(--accent)}
/* Item 2026-07-27 (Pilar, fundação do sistema de "camadas"): Cima/Centro/
   Baixo (3 botões às cegas) virou arrastar de verdade na prévia --
   .cam-legenda-pos/.cam-legenda-pos-btn saíram (sem uso). A legenda sobre
   foto/vídeo agora é um elemento ARRASTÁVEL (_tornarArrastavel, utils.js)
   -- left/top são o CENTRO do texto (não canto), por isso o
   translate(-50%,-50%): é a mesma matemática que _tornarArrastavel usa
   pra calcular o offset do arrasto a partir do centro do elemento, os
   dois lados (JS calculando fração, CSS desenhando) têm que concordar.
   cursor:grab/.arrastando (grabbing) são só affordance visual -- deixa
   claro que dá pra pegar e mover, sem precisar de instrução escrita. */
.cam-confirm-legenda-overlay{
  position:absolute;transform:translate(-50%,-50%);
  z-index:3;text-align:center;max-width:80%;
  font-size:21px;font-weight:800;line-height:1.35;text-shadow:0 2px 10px rgba(0,0,0,.55);
  word-wrap:break-word;cursor:grab;user-select:none;-webkit-user-select:none;
  padding:4px 10px;border-radius:8px;transition:box-shadow .12s ease;
}
.cam-confirm-legenda-overlay.arrastando{
  cursor:grabbing;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent);
}
.cam-legenda-dica{
  text-align:center;font-size:12px;color:var(--dim);padding:0 24px 10px;line-height:1.4;
}

/* ── DOODLE sobre foto/vídeo (task #75, 2º consumidor do sistema de
   "camadas" -- 1º foi a legenda acima). O SVG usa viewBox "0 0 1 1": os
   traços já nascem em fração 0.0-1.0, mesma unidade validada em migration
   064/routers/contos.py, sem conversão pixel<->fração no meio. Barras de
   ferramentas ficam DENTRO de .cam-confirm-media (topo/base), pra nunca
   deslocar/redimensionar a área de desenho enquanto a ferramenta tá aberta. */
.cam-doodle-svg{
  position:absolute;inset:0;z-index:4;touch-action:none;cursor:crosshair;
}
.cam-doodle-toolbar-topo{
  position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;gap:10px;padding:14px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);
}
.cam-doodle-cores{flex:1;display:flex;justify-content:center;gap:8px;overflow-x:auto;scrollbar-width:none}
.cam-doodle-cores::-webkit-scrollbar{display:none}
.cam-doodle-cor-dot{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.35);box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .12s ease,border-color .12s ease;
}
.cam-doodle-cor-dot.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.4);transform:scale(1.15)}
#cam-doodle-borracha.on{
  background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#000 10%));
  border-color:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent);
}
.cam-doodle-toolbar-baixo{
  position:absolute;bottom:0;left:0;right:0;z-index:6;
  display:flex;gap:10px;padding:14px;
  background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);
}
.cam-doodle-toolbar-baixo .cam-confirm-btn{padding:11px}

/* Renderização do doodle no VISUALIZADOR (vídeo só -- foto já vem queimada
   nos pixels, ver comentário em _cvDoodleHtml, notificacoes-borboleta.js).
   Mesmo viewBox "0 0 1 1" do editor -- os pontos salvos já são a posição
   final, sem conversão. */
.conto-view-doodle{position:absolute;inset:0;z-index:2;pointer-events:none}

/* ── GIF/STICKER sobre foto/vídeo (task #77, 3º consumidor do sistema de
   "camadas"). Busca reaproveita o mesmo container visual da legenda
   (.cam-legenda-wrap), só troca o conteúdo do meio por um campo de busca
   + grade de resultados. */
.cam-gif-busca{padding:0 16px 12px}
.cam-gif-input{
  width:100%;box-sizing:border-box;padding:11px 14px;border-radius:12px;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.22);
  color:#fff;font-size:14px;outline:none;
}
.cam-gif-input::placeholder{color:rgba(255,255,255,.45)}
.cam-gif-grid{
  flex:1;min-height:0;overflow-y:auto;padding:0 16px 16px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.cam-gif-item{
  aspect-ratio:1;border-radius:10px;overflow:hidden;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:0;
}
.cam-gif-item img{width:100%;height:100%;object-fit:contain}
.cam-gif-msg{grid-column:1/-1;text-align:center;color:var(--dim);font-size:13px;padding:24px 0}
/* Sticker já colado na prévia -- arrastável (_tornarArrastavel, mesmo
   primitivo da legenda de texto), com "✕" próprio no canto pra remover
   (a legenda de texto some pelo painel "Aa"; sticker não tem painel, então
   precisa do botão aqui). */
.cam-confirm-gif-item{
  position:absolute;transform:translate(-50%,-50%);z-index:3;
  width:88px;cursor:grab;touch-action:none;
}
.cam-confirm-gif-item.arrastando{cursor:grabbing}
.cam-confirm-gif-item img{width:100%;height:auto;display:block;pointer-events:none}
.cam-confirm-gif-remover{
  position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;
  background:rgba(10,8,14,.75);border:1px solid rgba(255,255,255,.35);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
/* Renderização do sticker no VISUALIZADOR -- foto E vídeo (único tipo de
   camada que aparece nos dois, ver comentário em _cvGifHtml). left/top/escala
   em custom properties (--gif-x/--gif-y/--gif-escala, migração CSP
   style-src 2026-08-02) -- mesma unidade fração de sempre, translate(-50%,-50%)
   centraliza no ponto. */
.conto-view-gif-item{
  position:absolute;left:var(--gif-x);top:var(--gif-y);
  transform:translate(-50%,-50%) scale(var(--gif-escala,1));z-index:2;
  width:26vw;max-width:120px;pointer-events:none;
}
/* Pill de "marcar pessoa" no VISUALIZADOR (task #78) -- essa classe nunca
   tinha CSS próprio (só o left/top chegavam inline, sem position:absolute,
   então na prática nunca posicionava certo -- achado incidental durante a
   migração CSP style-src 2026-08-02, corrigido de graça já que a classe
   estava sendo tocada mesmo assim). */
.conto-view-marcacao-pill{
  position:absolute;left:var(--mk-x);top:var(--mk-y);transform:translate(-50%,-50%);
  z-index:2;pointer-events:none;
  display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;
  background:rgba(10,8,14,.65);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;font-size:12px;font-weight:700;white-space:nowrap;
}

/* ── MARCAR PESSOA (task #78, 4º e último consumidor planejado do sistema
   de camadas). Lista de conexões reaproveita o mesmo container visual da
   busca de GIF (.cam-gif-wrap/.cam-gif-busca/.cam-gif-input/.cam-gif-msg
   já cobrem topo/busca/mensagens vazias) -- só a grade 3x3 vira uma lista
   vertical de linhas (pedido explícito da Pilar: "menu estreito na
   vertical"). */
.cam-marcar-lista{flex:1;min-height:0;overflow-y:auto;padding:0 8px 16px;display:flex;flex-direction:column;gap:2px}
.cam-marcar-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  background:none;border:none;color:#fff;cursor:pointer;text-align:left;
}
.cam-marcar-item:active{background:rgba(255,255,255,.08)}
.cam-marcar-item img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}
.cam-marcar-ini{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--accent);color:#fff;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.cam-marcar-nome{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Pill de marcação já colada na prévia -- mesmo mecanismo de arrasto +
   remover do sticker (.cam-confirm-gif-item), só troca a imagem por um
   pill de texto com o emoji-borboleta (vocabulário nativo da Linka, ver
   chat-avancado-composer.js -- reação de toque duplo e picker de emoji já
   usam 🦋 literal, não é ícone novo inventado aqui). */
.cam-confirm-marcacao-item{
  position:absolute;transform:translate(-50%,-50%);z-index:3;cursor:grab;touch-action:none;
}
.cam-confirm-marcacao-item.arrastando{cursor:grabbing}
.cam-confirm-marcacao-pill{
  display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;
  background:rgba(10,8,14,.65);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;font-size:13px;font-weight:700;white-space:nowrap;pointer-events:none;
}

/* ── VISUALIZADOR DE CONTOS ───────────────────────────────────────────────
   Pedido da Pilar 2026-07-24: simples de propósito -- mídia em tela cheia,
   barrinhas de progresso (uma por conto, sem animação de tempo ainda --
   isso é a régua estilo Instagram, fica pra depois), toque nos terços
   esquerdo/direito pra navegar. */
.conto-view-wrap{
  position:fixed;inset:0;z-index:960;background:#000;
  display:flex;flex-direction:column;overflow:hidden;
}
.conto-view-topbar{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 14px 0}
.conto-view-barras{flex:1;display:flex;gap:4px}
.conto-view-barra{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
/* Item 2026-07-27 (Pilar: "a barra de progresso deveria ter a cor do
   círculo do conto" -- assinatura visual de quem é, não branco genérico
   sempre). --cv-cor é setada uma vez em JS (_cxVerConto), calculada a
   partir de qual círculo (íntima/pessoal/social) a pessoa está -- cai em
   #fff pros próprios contos (não tem "círculo" de si mesma) ou se por
   algum motivo o grupo ainda não carregou. */
.conto-view-barra.feito{background:color-mix(in srgb,var(--cv-cor,#fff) 85%,white 15%)}
.conto-view-barra-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--cv-cor,#fff);border-radius:2px;box-shadow:0 0 6px color-mix(in srgb,var(--cv-cor,#fff) 60%,transparent)}
.conto-view-acoes-topo{display:flex;gap:8px;flex-shrink:0}
/* Item 2026-07-27 (Pilar: "a lixeira é muito feia, sem nada a ver com a
   estética da Linka" -- trocada por "..." + menu, reaproveitando o MESMO
   card de menu já usado no long-press de pessoas em Círculos
   (.cx-menu-card/.cx-menu-item, ver notificacoes-borboleta.js) -- só a
   posição é diferente (ancorado sob o botão "...", não flutuando perto de
   uma linha de lista). menu-bg é um capturador de toque tela-cheia
   transparente (fecha ao tocar em qualquer lugar fora do card). */
.conto-view-menu-bg{position:absolute;inset:0;z-index:4}
.conto-view-menu-card.cx-menu-card{position:absolute;top:52px;right:14px;z-index:5;min-width:168px}
/* Migração CSP style-src 2026-08-02: background (fundo do conto 100% texto)
   e filter (lente escolhida) dependem do conto sendo exibido -- viram custom
   property setada via JS/CSSOM (_aplicarStyleVars) em vez de style="" cru. */
.conto-view-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--cv-media-bg,#000)}
.conto-view-media img,.conto-view-media video{width:100%;height:100%;object-fit:contain}
.conto-view-media video{filter:var(--cv-video-filtro,none)}
@media (prefers-reduced-motion:reduce){
  .conto-media-estado::after,.conto-media-estado span{animation-duration:2.4s}
}
.conto-view-texto{color:var(--cv-txt-cor,#fff);font-family:var(--cv-txt-fonte,inherit);font-size:20px;font-weight:600;text-align:center;padding:32px;line-height:1.5}
/* Utilitário genérico "começa escondido" -- substitui style="display:none"
   inline (migração CSP style-src). Elementos que alternam visibilidade depois
   continuam usando .style.display=... via JS normal (CSSOM direta, não passa
   pelo parser de atributo -- não é bloqueada pelo CSP mesmo sem unsafe-inline). */
.cv-hidden{display:none}
/* Pedido da Pilar 2026-07-24: música anexada ao conto aparece como uma
   pilulazinha de vidro fosco flutuando sobre a mídia, discreta -- igual a
   linguagem visual (glass/translúcido) já usada no resto da Linka. */
/* Pedido da Pilar 2026-07-24 (sinal verde): só posiciona -- todo o visual
   (vidro fosco, capa, equalizador) agora vem do .musica-card compartilhado
   (utils.js::_montarCardMusica), pra não duplicar estilo em dois lugares. */
.conto-view-musica{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;
  max-width:68%;
}
/* Chip de música "inline" (dentro do fluxo normal, não flutuando sobre a
   mídia) -- usado nas telas de composição de conto (câmera.js), onde o
   layout já reserva espaço fixo pra ele em vez de sobrepor. Migração CSP
   style-src 2026-08-02: era style="" estático repetido em 3 lugares. */
.conto-view-musica-inline{
  display:none;position:relative;left:auto;bottom:auto;transform:none;margin:0 16px 8px;
}
/* Thread (thread-linkar.js) -- migração CSP script-src/style-src
   2026-08-02: onclick/onerror/style="" inline trocados por classes +
   data-act (delegação) + listener de erro em vez de onerror="" inline. */
.lt-msgs-status{color:var(--dim);font-size:13px;text-align:center;padding:20px}
.lt-msgs-status.italico{font-style:italic}
.lt-msgs-status.erro{color:#c85858}
.lt-msgs-empty{color:var(--dim);font-size:12px;text-align:center;padding:16px}
.th-avatar{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:8px;font-weight:700;
  background:var(--surf2);color:var(--dim);overflow:hidden;
}
.th-avatar-img{width:100%;height:100%;object-fit:cover}
.th-label-nome{display:inline-flex;align-items:center;gap:4px;cursor:default;min-width:0;max-width:100%}
.th-label-nome.linkavel{cursor:pointer}
/* FIX 2026-08-03 (achado auditando escala da thread a pedido da Pilar --
   "cuidado de teste de estresse" tipo .notif-msg-nome, nunca replicado
   aqui): pseudônimo de autor sem tratamento nenhum de overflow -- um nome
   longo estourava a linha sem truncar, sem quebrar de forma legível.
   overflow/text-overflow só funcionam com uma largura de fato limitando
   o box, então .th-msg-label (pai) ganhou display:flex+max-width:78%
   (mesmo teto de .th-msg-bubble, pra rótulo e balão nunca ficarem mais
   largos um que o outro) e min-width:0 desce por .th-label-nome até aqui
   pra permitir encolher abaixo do conteúdo intrínseco -- padrão idêntico
   ao já usado em .notif-msg-nome/.tov-mus-nome. */
.th-label-nome-txt{text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.th-label-nome.linkavel .th-label-nome-txt{text-decoration:underline}
.th-msg-row{display:flex;flex-direction:column;align-items:flex-start}
.th-msg-row.meu{align-items:flex-end}
.th-msg-bubble{
  max-width:78%;background:var(--surf2);color:var(--fg);
  border-radius:14px 14px 14px 4px;padding:9px 13px;font-size:14px;
  line-height:1.45;word-break:break-word;
}
.th-msg-bubble.meu{background:var(--accent);color:#fff;border-radius:14px 14px 4px 14px}
.th-msg-label{font-size:10px;color:rgba(255,255,255,.4);margin-top:3px;display:flex;align-items:center;max-width:78%}
.conto-view-zona{position:absolute;top:0;bottom:0;width:33%;z-index:1;cursor:pointer}
/* Barra de resposta (item 11 do plano 2026-07-25) -- só aparece pra quem
   NÃO é dono do conto (souDono=false no JS). z-index acima das zonas de
   toque (1) pra digitar/tocar no input funcionar sem avançar o conto. */
.conto-view-reply-bar{
  position:absolute;left:12px;right:12px;bottom:14px;z-index:3;
  display:flex;align-items:center;gap:8px;
}
.conto-view-reply-inp{
  flex:1;background:rgba(20,16,28,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.3);border-radius:22px;
  padding:10px 16px;color:#fff;font-size:13px;
}
.conto-view-reply-inp::placeholder{color:rgba(255,255,255,.55)}
.conto-view-reply-btn{
  width:38px;height:38px;flex-shrink:0;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000 15%));
  color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;
}
/* Legenda sobre vídeo no visualizador (metadado, não queimada -- ver
   migration 060/comentário em camera-lentes.js::_camMostrarConfirmacao).
   2026-07-28 (Pilar, item 6/9): "o texto digitado no preview quase some
   da tela e ainda fica atrás dessa tupla gigante bizarra com a música" --
   causa raiz: .conto-view-musica e .conto-view-legenda tinham o MESMO
   z-index (2), um empate que deixava a ordem de quem pinta por cima
   dependendo só da ordem no DOM (o card de música vinha depois, então
   sempre "ganhava" e cobria o texto quando as duas caixas se sobrepunham
   perto do rodapé). Texto é conteúdo primário (o que a pessoa escreveu de
   próprio punho); o card de música é metadado secundário -- z-index mais
   alto aqui garante que o texto NUNCA fica escondido atrás dele, não
   importa a posição escolhida no arrasto. */
.conto-view-legenda{
  position:absolute;left:6%;right:6%;z-index:3;text-align:center;
  color:var(--cv-leg-cor,#fff);font-family:var(--cv-leg-fonte,inherit);
  font-size:22px;font-weight:800;line-height:1.35;text-shadow:0 2px 10px rgba(0,0,0,.55);
  pointer-events:none;word-wrap:break-word;
}
.conto-view-legenda.pos-cima{top:14%}
.conto-view-legenda.pos-centro{top:50%;transform:translateY(-50%)}
.conto-view-legenda.pos-baixo{bottom:18%}
/* Item 2026-07-27 (Pilar, fundação do sistema de "camadas"): contos NOVOS
   trazem x/y livre em "camadas" -- left/top/escala exatos vêm de custom
   properties setadas via JS (--leg-x/--leg-y/--leg-escala, migração CSP
   style-src 2026-08-02), só precisa soltar o "right:6%" fixo da classe
   base (senão o texto fica esticado entre os dois lados em vez de uma
   caixa natural centrada no ponto escolhido no arrasto). */
.conto-view-legenda.conto-view-legenda-livre{
  right:auto;max-width:80%;
  left:var(--leg-x);top:var(--leg-y);
  transform:translate(-50%,-50%) scale(var(--leg-escala,1));
}

/* ── CARTÃO DE MÚSICA (compartilhado) ─────────────────────────────────────
   Pedido da Pilar 2026-07-24 (sinal verde): "a gente já tem api da música,
   é só colar de maneira elegante" -- capa do álbum + equalizador animado
   (CSS puro, sem gif/vídeo) + letra sob demanda (lyrics.ovh). Usado tanto
   na tela de confirmação da câmera quanto no visualizador de contos --
   ver _montarCardMusica em utils.js. */
/* 2026-07-28 (Pilar, item 4/9): "esse toggle gigante de música, que coisa
   desnecessária e feia" -- a intenção original (comentário acima, 2026-07-
   24) era "pilulazinha discreta", mas cresceu com equalizador/capa maior/
   botão de letra até virar uma barra quase do tamanho da tela. Encolhe de
   volta: capa, padding, fonte e o max-width do container (86%→68%, ver
   .conto-view-musica abaixo) -- ainda com toda a informação (capa,
   equalizador, título/artista, botão de letra), só num pacote menor. */
.musica-card{
  position:relative;display:flex;align-items:center;gap:8px;
  background:rgba(20,16,28,.6);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14);border-radius:13px;
  padding:6px 10px;box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.musica-card-capa{
  width:30px;height:30px;border-radius:7px;flex-shrink:0;background-size:cover;background-position:center;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  /* --mc-capa setada via JS/CSSOM (_montarCardMusica, utils.js). Migração
     CSP style-src 2026-08-02. */
  background-image:var(--mc-capa,none);
}
.musica-card-capa-vazia{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000 15%));
  color:#fff;font-size:13px;
}
/* Equalizador -- 3 barrinhas pulsando fora de sincronia (durações/atrasos
   diferentes), dá a sensação de "tocando agora" sem gif nem vídeo. */
.musica-card-eq{display:flex;align-items:flex-end;gap:2px;height:12px;flex-shrink:0}
.musica-card-eq span{
  width:2.5px;border-radius:2px;background:var(--accent);
  animation:musicaEqBar 1s ease-in-out infinite;
}
.musica-card-eq span:nth-child(1){height:40%;animation-duration:.8s}
.musica-card-eq span:nth-child(2){height:100%;animation-duration:1.15s;animation-delay:.15s}
.musica-card-eq span:nth-child(3){height:60%;animation-duration:.95s;animation-delay:.3s}
@keyframes musicaEqBar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.musica-card-info{flex:1;min-width:0}
.musica-card-titulo{font-size:11.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 2026-07-28 (Pilar, item 1/N da rodada de Contos): "a letra lyrics nao
   entra em contraste". Causa: .musica-card tem fundo fixo escuro
   (rgba(20,16,28,.6)) sempre, em qualquer tema -- mas o texto de dentro
   usava var(--text)/var(--dim), que no tema claro viram cores ESCURAS
   (pensadas pra fundo claro). Resultado: texto quase preto sobre vidro
   quase preto. Fix: cor fixa clara aqui, já que o fundo do card nunca
   muda com o tema (ele fica sobre foto/vídeo, não sobre a superfície do
   app). */
.musica-card-artista{font-size:10px;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.musica-card-letra-btn{
  flex-shrink:0;width:23px;height:23px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;
  font-size:10.5px;font-weight:800;font-style:italic;
}
.musica-card-remover{
  position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:11px;
  display:flex;align-items:center;justify-content:center;
}
/* 2026-07-28 (Pilar, refinamento do item 1/9 -- ela viu a versão com card
   e pediu pra tirar): "se a letra ficasse solta na tela sem fundo,
   usando o vídeo de fundo, seria melhor". Era uma caixa de vidro opaca
   (background+blur+border) pintando um retângulo escuro por cima da
   mídia. Troca pro mesmo princípio já usado em .cam-confirm-legenda-overlay
   (a legenda arrastável): SEM fundo nenhum, só o vídeo/foto atrás e
   text-shadow em camadas pra garantir contraste em qualquer cena --
   clara, escura, colorida. Fonte maior/bold e centralizada porque agora
   é texto "flutuando" sobre a mídia, não conteúdo dentro de um card. */
.musica-card-letra{
  margin-top:6px;max-height:140px;overflow-y:auto;
  padding:4px 10px;font-size:15px;font-weight:700;line-height:1.5;text-align:center;
  color:#fff;white-space:pre-line;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.7),0 0 24px rgba(0,0,0,.5);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
/* 2026-07-28 (Pilar, item 9/9 -- parte 3/3): quando aberta, a letra sai do
   fluxo normal do card e vira overlay solto sobre a mídia (ver
   _toggleLetraMusica, utils.js) -- autônoma, arrastável e com pinça livre,
   independente da largura do vídeo/foto ou do card de música. */
.musica-card-letra-livre{
  position:absolute;left:0;top:0;z-index:3;margin-top:0;
  max-width:78%;cursor:grab;
}
.musica-card-letra-livre.arrastando{cursor:grabbing}
.conto-view-zona-esq{left:0}
.conto-view-zona-dir{right:0}

/* ── CARD DE EMBED DO YOUTUBE (item 19 do plano 2026-07-25) ──────────────
   Mesma família visual do .musica-card (vidro fosco compartilhado), mas
   horizontal: thumbnail 16:9 à esquerda, título/autor à direita -- link
   de verdade (<a target=_blank>), não JS de abrir modal, então funciona
   até com JS mais lento pra carregar o título ainda buscando. */
.yt-embed-card{
  display:flex;align-items:stretch;gap:10px;margin-top:8px;
  background:rgba(20,16,28,.6);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14);border-radius:12px;
  padding:6px;text-decoration:none;color:inherit;
  transition:transform .12s;
}
.yt-embed-card:active{transform:scale(.98)}
.yt-embed-thumb{
  position:relative;width:96px;aspect-ratio:16/9;flex-shrink:0;
  border-radius:8px;overflow:hidden;background:#000;
}
.yt-embed-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.yt-embed-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;text-shadow:0 1px 4px rgba(0,0,0,.7);
  background:radial-gradient(circle,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 100%);
}
.yt-embed-info{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:2px 6px 2px 0}
.yt-embed-titulo{font-size:12.5px;font-weight:700;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.yt-embed-autor{font-size:11px;color:var(--dim)}

/* ── Migração CSP style-src/script-src 2026-08-02 (auth-splash-onboarding.js)
   "espelho" pós-cadastro + form de perfil do onboarding + modais de convite
   (classificação de convidante / convite recebido por conta já existente) +
   overlay de logout. Eram style="" / .style.cssText= / onclick="" inline em
   praticamente cada elemento -- convertidos pra classes reutilizáveis.
   Migração CSP style-src 2026-08-03 (achado no scan final antes de tirar
   unsafe-inline do header): os 3 @keyframes abaixo (esp-pulse,
   footer-shimmer, _saidaSpin) eram injetados em runtime via
   document.createElement('style') dentro de auth-splash-onboarding.js --
   um <style> sem nonce/hash também é bloqueado por style-src sem
   unsafe-inline, não é só atributo. As classes abaixo (.onb-espelho-hint,
   .csp-s45, .onb-logout-spin) já referenciavam essas animações mas
   dependiam inteiramente da injeção JS pra elas existirem -- movidas pra
   cá, injeção removida do JS. */
@keyframes esp-pulse{0%,100%{opacity:0.35}50%{opacity:0.85}}
@keyframes footer-shimmer{0%,100%{opacity:1}50%{opacity:1.9}}
@keyframes _saidaSpin{to{transform:rotate(360deg)}}
.onb-espelho{position:fixed;inset:0;z-index:9999;background:rgba(4,4,10,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .9s ease;overflow:auto}
.onb-espelho-canvas{position:absolute;left:0;top:0;width:100%;pointer-events:none}
.onb-espelho-centro{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:28px;padding:0 36px;text-align:center}
.onb-espelho-phrase{color:rgba(200,175,255,.78);font-size:17px;font-style:italic;line-height:1.7;max-width:255px;font-weight:300;letter-spacing:.35px;text-shadow:0 0 28px rgba(140,90,255,.45)}
.onb-espelho-hint{color:rgba(120,90,175,.55);font-size:11.5px;letter-spacing:1.8px;text-transform:uppercase;animation:esp-pulse 2.8s ease-in-out infinite}
.onb-form-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:20px 24px;opacity:0;transition:opacity .4s ease}
.onb-form-wrap{width:100%;max-width:308px;display:flex;flex-direction:column;gap:11px}
.onb-title-wrap{text-align:center;margin-bottom:4px}
.onb-title{color:rgba(210,190,255,.88);font-size:17px;font-weight:500}
.onb-title-sub{color:rgba(130,105,185,.5);font-size:12px;margin-top:4px}
.onb-avatar-row{display:flex;align-items:center;gap:14px}
.onb-avatar-wrap{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.04);border:1.5px dashed rgba(150,115,255,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;flex-shrink:0}
.onb-avatar-preview{display:none;width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.onb-avatar-add{color:rgba(190,165,240,.7);font-size:13px;cursor:pointer}
.onb-avatar-hint{color:rgba(120,95,165,.45);font-size:11.5px;margin-top:2px}
.onb-label{color:rgba(160,135,210,.55);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;margin-bottom:3px;display:block}
.onb-label-note{font-size:9px;opacity:.5;letter-spacing:.5px}
.onb-input{width:100%;box-sizing:border-box;padding:11px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(155,120,255,.18);border-radius:10px;color:#ddd6f7;font-size:14.5px;outline:none;-webkit-tap-highlight-color:transparent;font-family:inherit}
.onb-select{appearance:none;-webkit-appearance:none;cursor:pointer}
.onb-select-wrap{position:relative}
.onb-select-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.35}
.onb-privacy-note{color:rgba(110,88,155,.4);font-size:10.5px;text-align:center;line-height:1.5;padding:0 4px}
.onb-submit-btn{width:100%;padding:13px;background:rgba(110,72,195,.24);border:1px solid rgba(148,108,255,.3);border-radius:11px;color:rgba(222,202,255,.95);font-size:15.5px;font-weight:600;cursor:pointer;letter-spacing:.2px;-webkit-tap-highlight-color:transparent;margin-top:4px}
.onb-convite-modal{position:fixed;inset:0;z-index:10000;background:rgba(4,4,10,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;opacity:0;transition:opacity .5s ease}
.onb-convite-card{max-width:320px;width:100%;text-align:center}
.onb-convite-emoji{font-size:28px;margin-bottom:16px}
.onb-convite-title{font-size:20px;font-weight:700;color:#fff;line-height:1.4;margin-bottom:12px}
.onb-convite-desc{font-size:14px;color:#9090b8;line-height:1.7;margin-bottom:32px}
.onb-convite-opts{display:flex;flex-direction:column;gap:12px}
.onb-convite-btn{padding:14px 24px;border-radius:50px;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .2s}
.onb-convite-btn-intima{background:linear-gradient(135deg,#3d1a6e,#5b2fa0);border:1px solid #7c4fd8;color:#e8d8ff}
.onb-convite-btn-pessoal{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#c8c0e8}
.onb-convite-btn-social{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#9090a8}
.onb-convite-skip{margin-top:20px;background:none;border:none;font-size:12px;cursor:pointer;text-decoration:underline}
.onb-convite-skip-neutro{color:#4a4a6a}
.onb-convite-skip-recusar{color:#e05252}
.onb-logout-ov{position:fixed;inset:0;z-index:99999;background:rgba(8,6,14,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .18s ease;pointer-events:auto;display:flex;align-items:center;justify-content:center}
.onb-logout-spin{width:34px;height:34px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:_saidaSpin .7s linear infinite}

/* ── Migração CSP style-src/script-src 2026-08-02 (long-press-perfil.js)
   CUIDADO EXTRA -- subsistema com regressão documentada (task #82). Só
   classes CSS + reaproveitamento das .chat-menu-* já existentes; nenhuma
   mudança de comportamento/gestos, só o mecanismo de aplicar estilo. */
.lp-avatar-fill{width:100%;height:100%;object-fit:cover}
.lp-avatar-fill-rounded{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.lp-zoom-wrap{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.lp-zoom-wrap-vid{pointer-events:auto}
.lp-zoom-media{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lp-zoom-frame{position:absolute;pointer-events:none;visibility:hidden}
.lp-soundtrack-bar-inline{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--surf2);border:1px solid rgba(153,102,238,.35);border-radius:10px;margin-bottom:6px;height:38px;box-sizing:border-box}
.lp-music-toggle-btn{background:none;border:none;color:rgba(153,102,238,.9);font-size:13px;padding:0;cursor:pointer;line-height:1;flex-shrink:0}
.lp-eq-wrap{display:none;align-items:flex-end;gap:2px;height:14px;flex-shrink:0}
.lp-eq-bar-inline{width:3px;border-radius:2px;background:rgba(153,102,238,.85)}
.lp-eq-bar-inline.lp-eq-a{animation:lp-eq1 .7s ease-in-out infinite alternate}
.lp-eq-bar-inline.lp-eq-b{animation:lp-eq2 .5s ease-in-out infinite alternate}
.lp-eq-bar-inline.lp-eq-c{animation:lp-eq3 .9s ease-in-out infinite alternate}
.lp-eq-bar-inline.lp-eq-d{animation:lp-eq1 .6s ease-in-out infinite alternate}
.lp-soundtrack-info{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;color:#ccc}
.lp-soundtrack-artista{color:rgba(153,102,238,.7)}
.lp-conv-empty{color:var(--dim);font-size:12px;padding:6px 0}
.lp-conv-result-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;background:var(--surf2);margin-bottom:6px}
.lp-conv-result-row-sel{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:var(--surf2);border:1px solid var(--accent)}
.lp-conv-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.lp-conv-pseudo{font-size:13px;color:var(--fg)}
.lp-conv-pseudo-sel{font-size:13px;color:var(--accent);font-weight:600}
.lp-conv-praca{font-size:11px;color:var(--dim);margin-left:auto}
.lp-foto-expand-bg{position:absolute;inset:0;z-index:900;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;cursor:pointer}
.lp-foto-expand-img{max-width:90%;max-height:80%;border-radius:18px;object-fit:contain;box-shadow:0 0 60px rgba(160,140,255,.25)}
.po-posts-grid-pad{padding:0 8px 4px}
.po-empty-pad{padding:20px 14px}
.po-empty-msg{padding:28px 14px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.po-empty-msg-nome{font-size:12px;font-weight:700;color:var(--pem-cor,inherit)}
.po-empty-msg-desc{font-size:11px;opacity:.5}
.po-empty-msg-sub{font-size:12px;opacity:.7;margin-top:4px}
.po-empty-msg-hint{font-size:11px;opacity:.55}
.po-conv-row{display:flex;gap:6px;margin-bottom:6px}
.po-conv-pill{flex:1;text-align:center;padding:5px 4px;border-radius:8px;border:1px solid var(--border);font-size:11px;color:var(--dim);background:var(--surf2)}
.po-conv-pill-livre{flex:1;text-align:center;padding:5px 4px;border-radius:8px;border:1px dashed var(--accent);font-size:11px;color:var(--accent)}
.po-conv-pill-sub{font-size:10px;color:var(--pcp-cor,inherit)}
.po-conv-msg-cheio{font-size:11px;color:#e05252}
.po-conv-msg-disp{font-size:11px;color:var(--dim)}

/* Migração CSP style-src/script-src 2026-08-02 (feed-nucleo.js) CUIDADO
   EXTRA -- subsistema com regressão documentada (task #82/#304). Ver
   renderTile/renderTilePo/renderYuanCard/_montarTileOrbit/carregarFeed/
   _montarYuanProfileHeader em feed-nucleo.js. */
.tile-vid-wrap{position:relative;width:100%;height:100%;pointer-events:none}
.tile-vid-el{width:100%;height:100%;object-fit:cover;pointer-events:none}
.yt-img{width:100%;border-radius:8px;margin-top:6px;max-height:320px;object-fit:cover}
.yt-vid-wrap{position:relative;margin-top:6px}
.yt-vid-el{width:100%;border-radius:8px;max-height:320px;display:block}
.bf-shim-on{animation:bf-shim 1.4s ease-in-out infinite}
.feed-msg-pad{grid-column:span 2;padding:36px;text-align:center;color:var(--dim);font-size:13px}
.feed-msg-span2{grid-column:span 2}
.feed-msg-faint{color:var(--faint)}
.feed-msg-faint-sm{color:var(--faint);font-size:11px}
.feed-loading-empty{padding:20px 14px}
.feed-sentinel-el{height:1px;grid-column:span 2}
.yph-file-hidden{display:none}
.yph-ini-hidden{display:none}
.yph-topright{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:120px}
.yph-studio-panel{display:none;margin-top:10px;padding-top:12px;border-top:1px solid var(--border)}
.yph-field-note{font-size:10.5px;color:var(--dim);margin:-3px 0 6px}
.yph-input{width:100%;background:var(--surf1);border:1px solid rgba(153,102,238,.3);border-radius:10px;color:var(--fg);padding:10px 12px;font-size:14px;box-sizing:border-box}
.yph-textarea{resize:none}
.yph-music-chip{display:none;align-items:center;gap:10px;padding:8px 12px;background:rgba(153,102,238,0.08);border-radius:10px;border:0.5px solid rgba(153,102,238,0.3);margin-bottom:8px}
.yph-music-thumb{width:30px;height:30px;border-radius:6px;background:linear-gradient(135deg,#4b1d8f,#9966ee);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.yph-music-info{flex:1;min-width:0}
.yph-music-nome-txt{font-size:13px;font-weight:500;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yph-music-artista-txt{font-size:11px;color:rgba(153,102,238,0.8);margin-top:1px}
.yph-music-play-btn{background:none;border:none;color:rgba(153,102,238,0.9);font-size:18px;padding:0 4px;cursor:pointer}
.yph-music-remove-btn{background:none;border:none;color:#555;font-size:14px;padding:0 4px;cursor:pointer}
.yph-music-escolher-btn{width:100%;background:var(--surf1);border:1px solid rgba(153,102,238,.3);border-radius:10px;color:var(--dim);padding:10px 12px;font-size:14px;cursor:pointer;text-align:left}
.yph-actions-row{display:flex;gap:8px;margin-top:4px}
.yph-save-btn-flex{flex:1;margin-top:0}
/* Nome distinto de .yph-cancel-btn (já existia, usado no cancelar do
   edit-bio inline em studio-home-yuan.js -- visual menor/diferente,
   flex:1). Este é o cancelar do painel studio completo aqui embaixo. */
.yph-studio-cancel-btn{flex:0 0 auto;padding:0 18px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--dim);font-size:14px;cursor:pointer}
.yph-verperfil-btn{width:100%;margin-top:10px;padding:10px;border-radius:10px;border:none;background:transparent;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer}

/* ============================================================
   CSP style-src: migração linka_mobile.html 2026-08-02
   Cada style="" inline do template estático virou uma classe
   aqui (mesmas declaracoes, extraidas 1:1, sem reinterpretacao --
   deduplicadas por valor exato). Nomes csp-sN sao gerados, sem
   significado semantico -- o HTML documenta o contexto.
   ============================================================ */
.csp-s1{margin-bottom:16px;animation:logoChega .5s ease 1.1s forwards,bfloat 4s ease-in-out 1.6s infinite;opacity:0;}
.csp-s2{display:none;width:100%;}
.csp-s4{text-align:center;font-size:11.5px;color:#f0eeff77;margin-top:12px;letter-spacing:.02em;}
.csp-s5{display:none;width:100%;margin-top:20px;}
.csp-s6{width:100%;height:1px;background:#f0eeff22;margin-bottom:20px;}
.csp-s7{opacity:.45;}
.csp-s8{display:none;margin:-10px 0 4px;padding:0 2px;}
.csp-s9{height:2px;border-radius:1px;background:rgba(255,255,255,.06);overflow:hidden;}
.csp-s10{height:100%;width:0%;border-radius:1px;transition:width .25s,background .25s;}
.csp-s11{font-size:10.5px;color:rgba(180,150,255,.5);margin-top:3px;}
.csp-s12{display:flex;align-items:flex-start;gap:8px;margin:10px 0 2px;cursor:pointer;font-size:11px;color:#f0eeff88;line-height:1.5;}
.csp-s13{margin-top:2px;flex-shrink:0;}
.csp-s14{color:#c4a0ff;}
.csp-s15{margin-top:8px;animation:none;opacity:1;transform:none;}
.csp-s16{background:none;border:none;color:#f0eeff77;font-size:12px;cursor:pointer;margin-top:10px;width:100%;}
.csp-s17{display:none;width:100%;margin-top:20px;animation:fadeIn .35s ease;}
.csp-s18{width:100%;height:1px;background:#f0eeff22;margin-bottom:18px;}
.csp-s19{color:#c4a0ff;font-size:13px;text-align:center;margin-bottom:14px;font-family:'Playfair Display',serif;}
.csp-s20{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.csp-s21{--pc:#c85858;}
.csp-s22{--pc:#3d6fa8;}
.csp-s23{--pc:#9060c8;}
.csp-s24{--pc:#c840a0;}
.csp-s25{--pc:#d46a18;}
.csp-s26{--pc:#6aaa72;}
.csp-s27{--pc:#7a5535;}
.csp-s28{--pc:#40b4c8;}
.csp-s29{display:none;}
/* BUG CORRIGIDO (Pilar, print: imagem quebrada no topo do estúdio ao
   publicar, só some clicando no "X"): #criar-img-area e #notif-footer têm
   regra própria por ID com display:flex (ver definições de cada um) --
   especificidade de ID sempre vence a de classe, então .csp-s29 acima
   nunca conseguia esconder os dois de verdade no estado inicial (antes de
   qualquer JS rodar). Resultado: #criar-img-area ficava visível desde a
   abertura do composer, com <img id="criar-img-preview"> sem src nenhum
   -- o ícone de imagem quebrada do relato. #notif-footer tinha o mesmo
   problema (aparecia vazio até _atualizarFooterNotif() rodar). As duas
   visibilidades já são 100% controladas via JS setando .style.display
   inline (composer-midia-studio.js, notificacoes-borboleta.js) -- nunca
   por remoção de classe -- então esta regra composta (ID+classe, maior
   especificidade que o ID sozinho) só corrige o estado inicial, sem
   mexer em nenhum dos toggles JS existentes (inline style sempre vence
   qualquer seletor CSS de qualquer forma). */
#criar-img-area.csp-s29,
#notif-footer.csp-s29{display:none;}
.csp-s30{display:flex;flex-direction:column;gap:8px;}
.csp-s31{background:none;border:none;color:#9966ee88;font-size:11px;cursor:pointer;margin-top:12px;width:100%;}
.csp-s32{display:none;text-align:center;}
.csp-s33{color:#c4a0ff;font-size:15px;font-family:'Playfair Display',serif;margin-bottom:18px;}
.csp-s34{animation:none;opacity:1;transform:none;}
.csp-s35{background:none;border:none;color:#9966ee88;font-size:11px;cursor:pointer;margin-top:10px;width:100%;}
.csp-s36{color:#c4a0ff;font-size:15px;text-align:center;margin-bottom:6px;font-family:'Playfair Display',serif;}
.csp-s37{color:#f0eeff88;font-size:12px;text-align:center;margin-bottom:16px;}
.csp-s38{background:none;border:none;color:#c4a0ff;font-size:12px;cursor:pointer;margin-top:8px;width:100%;text-decoration:underline;}
.csp-s39{display:none;background:none;border:none;color:#c4a0ff;font-size:12px;cursor:pointer;margin-top:8px;width:100%;text-decoration:underline;}
.csp-s40{background:none;border:none;color:#f0eeff77;font-size:12px;cursor:pointer;margin-top:6px;width:100%;}
.csp-s41{color:#c4a0ff;font-size:14px;text-align:center;margin-bottom:14px;font-family:'Playfair Display',serif;}
.csp-s42{letter-spacing:3px;text-align:center;font-size:18px;}
.csp-s43{font-size:11px;color:#f0eeff55;text-align:center;margin-top:10px;}
.csp-s44{width:100%;flex-shrink:0;margin-top:22px;text-align:center;padding:16px 20px 20px;pointer-events:none;}
.csp-s45{color:#f0eeff55;font-size:11px;line-height:1.8;letter-spacing:.03em;animation:footer-shimmer 9s ease-in-out infinite;}
.csp-s46{margin-top:8px;}
.csp-s47{color:#9966ee88;}
.csp-s48{margin-top:10px;color:#f0eeff44;}
.csp-s49{color:inherit;}
.csp-s50{margin-top:4px;color:#f0eeff33;}
.csp-s51{display:flex;align-items:center;}
.csp-s52{cursor:pointer;}
.csp-s53{position:relative;}
.csp-s54{display:none;padding:24px 16px;font-size:12px;}
.csp-s55{margin:10px 12px 0;}
.csp-s56{display:none;padding:0 0 8px;}
.csp-s57{margin-top:14px;}
.csp-s58{font-size:10px;color:var(--dim);}
.csp-s59{padding-bottom:20px;background:var(--glass-tint);}
.csp-s60{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 16px 8px;border-bottom:1px solid var(--glass-edge);background:var(--glass-tint);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));}
.csp-s61{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.csp-s62{font-size:14px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.csp-s63{display:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;color:var(--text);line-height:1;}
.csp-s64{height:4px;background:var(--profile-gradient,transparent);flex-shrink:0;}
.csp-s65{position:absolute;bottom:-3px;right:-3px;background:var(--bg);border-radius:8px;padding:2px 6px;font-size:9px;font-weight:800;color:var(--accent);border:1px solid var(--border);}
.csp-s66{display:contents;}
.csp-s67{display:none;
              padding:2px 8px;border-radius:6px;border:1px solid transparent;
              font-size:9px;font-weight:700;letter-spacing:.3px;cursor:pointer;
              background:transparent;line-height:1.4;white-space:nowrap;}
.csp-s68{margin-top:4px;display:none;}
.csp-s69{display:none;flex-direction:row;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap;}
.csp-s70{font-size:9px;font-weight:700;letter-spacing:.4px;color:var(--dim);text-transform:uppercase;}
.csp-s71{font-size:9px;font-weight:700;padding:3px 9px;border-radius:6px;border:1.5px solid var(--border);background:transparent;color:var(--dim);cursor:pointer;}
.csp-s72{padding:10px 0 0;}
.csp-s73{display:none;padding:0 8px 8px;}
.csp-s74{padding:0 8px 4px;}
.csp-s75{cursor:pointer;display:flex;align-items:center;gap:10px;flex:1;overflow:hidden;user-select:none;-webkit-user-select:none;}
.csp-s76{width:36px;height:36px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;}
.csp-s77{overflow:hidden;}
.csp-s78{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text);font-size:18px;line-height:1;}
.csp-s79{position:absolute;inset:0;z-index:530;display:none;align-items:flex-end;background:rgba(0,0,0,.6);}
.csp-s80{width:100%;background:var(--surf);border-radius:20px 20px 0 0;max-height:75%;display:flex;flex-direction:column;}
.csp-s81{display:flex;align-items:center;padding:16px 16px 10px;border-bottom:1px solid var(--border);}
.csp-s82{flex:1;}
.csp-s83{font-size:14px;font-weight:800;}
.csp-s84{font-size:11px;color:var(--dim);margin-top:2px;}
.csp-s85{background:none;border:none;font-size:22px;color:var(--dim);cursor:pointer;}
.csp-s86{overflow-y:auto;flex:1;padding:12px 14px 28px;}
.csp-s87{position:absolute;inset:0;z-index:920;display:none;align-items:flex-end;background:rgba(0,0,0,.55);}
.csp-s88{width:100%;background:var(--surf);border-radius:18px 18px 0 0;padding:18px 16px 28px;}
.csp-s89{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.csp-s90{font-size:12px;font-weight:700;letter-spacing:.04em;}
.csp-s91{flex:1;font-size:12px;color:var(--dim);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.csp-s92{background:none;border:none;font-size:20px;color:var(--dim);cursor:pointer;padding:0 4px;}
.csp-s93{width:100%;min-height:90px;background:var(--surf2);border:1px solid var(--border);border-radius:10px;padding:10px;font-size:14px;color:var(--txt);resize:none;box-sizing:border-box;font-family:inherit;}
.csp-s94{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.csp-s95{font-size:11px;color:var(--dim);}
.csp-s96{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:10px 22px;font-size:14px;font-weight:700;cursor:pointer;}
.csp-s97{flex:1;font-size:13px;font-weight:700;}
.csp-s98{position:absolute;inset:0;z-index:920;display:none;flex-direction:column;background:rgba(0,0,0,.72);}
.csp-s99{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;flex-shrink:0;}
.csp-s100{background:none;border:none;color:var(--fg);font-size:22px;line-height:1;cursor:pointer;padding:0;}
.csp-s101{flex:1;min-width:0;}
.csp-s102{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;}
.csp-s103{font-size:12px;color:rgba(255,255,255,.6);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.csp-s104{margin:0 14px 8px;background:var(--surf2);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:10px 12px;font-size:13px;color:var(--fg);flex-shrink:0;}
.csp-s105{flex:1;overflow-y:auto;padding:6px 14px 8px;display:flex;flex-direction:column;gap:8px;}
.csp-s106{padding:10px 14px 28px;background:var(--surf);border-top:1px solid var(--border);flex-shrink:0;}
.csp-s107{display:flex;gap:8px;align-items:flex-end;}
.csp-s108{flex:1;resize:none;background:var(--surf2);border:1px solid var(--border);border-radius:12px;padding:9px 12px;color:var(--fg);font-size:14px;font-family:inherit;}
.csp-s109{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:10px 16px;font-size:16px;font-weight:700;cursor:pointer;flex-shrink:0;}
.csp-s110{position:absolute;inset:0;z-index:600;display:none;align-items:center;justify-content:center;background:rgba(2,2,8,.88);backdrop-filter:blur(12px);}
.csp-s111{width:calc(100% - 48px);max-width:340px;background:var(--surf);border-radius:24px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.6);}
.csp-s112{width:100%;aspect-ratio:1;background:var(--surf2);display:none;overflow:hidden;}
.csp-s113{width:100%;height:100%;object-fit:cover;opacity:.55;filter:blur(2px);}
.csp-s114{display:none;padding:20px 20px 0;font-size:13px;color:var(--dim);line-height:1.5;font-style:italic;opacity:.7;}
.csp-s115{padding:24px 24px 12px;text-align:center;}
.csp-s116{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;}
.csp-s117{font-size:17px;font-weight:700;color:var(--fg);line-height:1.4;margin-bottom:8px;}
.csp-s118{font-size:12px;color:var(--dim);line-height:1.5;margin-bottom:24px;}
.csp-s119{width:100%;padding:14px;border-radius:14px;border:none;background:#9a3030;color:#fff;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:10px;letter-spacing:.03em;}
.csp-s120{width:100%;padding:12px;border-radius:14px;border:1px solid var(--border);background:transparent;color:var(--dim);font-size:14px;cursor:pointer;}
.csp-s121{position:absolute;inset:0;z-index:900;display:none;}
.csp-s122{pointer-events:none;}
.csp-s123{cursor:pointer;filter:drop-shadow(0 0 6px currentColor);}
.csp-s124{display:none;color:#c06060;border-color:#c06060aa;}
.csp-s125{background:var(--surf2);color:var(--accent);border:1px solid var(--accent);}
.csp-s126{background:transparent;color:#e05252;border:1px solid #e05252;}
.csp-s127{position:absolute;inset:0;background:rgba(2,2,8,.72);z-index:450;display:none;align-items:flex-end;}
.csp-s128{background:var(--surf);border-radius:22px 22px 0 0;width:100%;padding:20px 16px 36px;box-sizing:border-box;}
.csp-s129{width:36px;height:4px;background:var(--faint);border-radius:2px;margin:0 auto 16px;}
.csp-s130{font-size:15px;font-weight:700;color:var(--fg);margin-bottom:14px;}
.csp-s131{font-size:12px;color:var(--dim);margin-bottom:12px;}
.csp-s132{width:100%;box-sizing:border-box;background:var(--surf2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--fg);font-size:14px;margin-bottom:10px;}
.csp-s133{max-height:130px;overflow-y:auto;margin-bottom:12px;}
.csp-s134{width:100%;box-sizing:border-box;background:var(--surf2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--fg);font-size:14px;resize:none;height:80px;font-family:inherit;}
.csp-s135{font-size:11px;color:var(--dim);text-align:right;margin-bottom:12px;}
.csp-s136{width:100%;padding:13px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-size:15px;font-weight:700;cursor:pointer;opacity:.5;}
.csp-s137{position:absolute;inset:0;background:rgba(0,0,0,.72);z-index:600;display:none;align-items:flex-end;}
.csp-s138{background:var(--surf);border-radius:22px 22px 0 0;width:100%;padding:24px 16px 36px;}
.csp-s139{width:36px;height:4px;background:var(--faint);border-radius:2px;margin:0 auto 18px;}
.csp-s140{font-size:15px;font-weight:700;color:var(--fg);text-align:center;margin-bottom:6px;}
.csp-s141{font-size:11px;color:var(--dim);text-align:center;margin-bottom:22px;}
.csp-s142{display:flex;flex-direction:column;gap:10px;}
.csp-s143{position:absolute;inset:0;z-index:1100;background:rgba(0,0,0,0.95);display:none;flex-direction:column;align-items:center;justify-content:space-between;padding:16px 0 28px;}
.csp-s144{width:100%;display:flex;flex-direction:column;align-items:center;gap:0;flex:1;justify-content:space-between;}
.csp-s145{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px;box-sizing:border-box;}
.csp-s146{background:rgba(255,255,255,0.1);border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:16px;cursor:pointer;}
.csp-s147{color:rgba(255,255,255,0.8);font-size:14px;}
.csp-s148{width:36px;}
.csp-s149{width:280px;height:280px;border-radius:50%;overflow:hidden;position:relative;border:2px solid rgba(255,255,255,0.25);flex-shrink:0;touch-action:none;}
.csp-s150{position:absolute;top:50%;left:50%;transform-origin:center center;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.csp-s151{color:rgba(255,255,255,0.4);font-size:12px;margin:0;text-align:center;}
.csp-s152{background:var(--accent,#9966ee);color:#fff;border:none;padding:12px 32px;border-radius:24px;font-size:14px;cursor:pointer;font-family:inherit;}
.csp-s153{display:none;width:100%;flex-direction:column;align-items:center;gap:0;flex:1;justify-content:space-between;}
.csp-s154{background:rgba(255,255,255,0.1);border:none;color:#fff;padding:8px 14px;border-radius:20px;font-size:13px;cursor:pointer;}
.csp-s155{width:60px;}
.csp-s156{width:210px;height:210px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(255,255,255,0.15);transition:filter .2s;flex-shrink:0;}
.csp-s157{display:flex;gap:14px;overflow-x:auto;padding:16px 20px;width:100%;box-sizing:border-box;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.csp-s158{display:flex;gap:12px;}
.csp-s159{background:var(--accent,#9966ee);color:#fff;border:none;padding:12px 28px;border-radius:24px;font-size:14px;cursor:pointer;font-family:inherit;}
.csp-s160{background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);padding:12px 28px;border-radius:24px;font-size:14px;cursor:pointer;font-family:inherit;}
.csp-s161{padding:14px 0 0;flex-shrink:0;}
.csp-s162{width:36px;height:4px;background:var(--faint);border-radius:2px;margin:0 auto;}
.csp-s163{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;flex-shrink:0;}
.csp-s164{font-size:15px;font-weight:800;}
.csp-s165{padding:7px 14px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--dim);font-size:12px;font-weight:600;cursor:pointer;}
.csp-s166{overflow-y:auto;flex:1;padding-bottom:32px;}
.csp-s167{color:var(--dim);}
.csp-s168{display:flex;gap:8px;}
.csp-s169{letter-spacing:5px;font-size:20px;font-family:monospace;text-align:center;}
.csp-s170{display:none;position:relative;margin-bottom:10px;border-radius:12px;overflow:hidden;max-height:220px;background:#000;}
.csp-s171{position:fixed;inset:0;z-index:250;background:transparent;display:none;}
.csp-s172{position:fixed;inset:0;z-index:251;background:var(--bg);display:none;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);}
.csp-s173{position:relative;z-index:1;display:flex;align-items:center;padding:14px 16px 12px;border-bottom:1px solid rgba(153,102,238,.2);background:color-mix(in srgb,var(--bg) 60%,transparent);flex-shrink:0;}
.csp-s174{background:none;border:none;color:var(--accent);font-size:22px;padding:4px 8px 4px 0;cursor:pointer;line-height:1;}
.csp-s175{font-size:17px;font-weight:600;color:var(--fg);flex:1;}
.csp-s176{position:relative;z-index:1;flex:1;overflow-y:auto;padding:12px 0 40px;background:color-mix(in srgb,var(--bg) 76%,transparent);}
.csp-s177{display:flex;align-items:center;gap:14px;padding:16px 16px 20px;border-bottom:1px solid rgba(153,102,238,.1);cursor:pointer;}
.csp-s178{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#5533aa,#9966ee);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;}
.csp-s179{width:100%;height:100%;object-fit:cover;display:none;}
.csp-s180{font-size:15px;font-weight:600;color:var(--fg);}
.csp-s181{font-size:12px;color:var(--dim);margin-top:2px;}
.csp-s182{color:rgba(153,102,238,.5);font-size:18px;}
.csp-s183{color:#883333;}
.csp-s184{font-size:12px;color:var(--dim);margin-right:4px;}
.csp-s185{text-align:center;padding:24px 0 8px;}
.csp-s186{background:none;border:none;color:#7755aa;font-size:14px;cursor:pointer;padding:8px 20px;border-radius:8px;}
.csp-s187{width:100%;background:var(--surf1);border:1px solid rgba(153,102,238,.3);border-radius:10px;color:var(--fg);padding:10px 12px;font-size:14px;resize:none;box-sizing:border-box;}
.csp-s188{text-align:right;font-size:11px;color:var(--dim);margin-top:3px;}
.csp-s189{width:100%;background:var(--surf1);border:1px solid rgba(153,102,238,.3);border-radius:10px;color:var(--fg);padding:10px 12px;font-size:14px;box-sizing:border-box;}
.csp-s190{display:none;align-items:center;gap:10px;padding:8px 12px;background:rgba(153,102,238,0.08);border-radius:10px;border:0.5px solid rgba(153,102,238,0.3);margin-bottom:8px;}
.csp-s191{width:30px;height:30px;border-radius:6px;background:linear-gradient(135deg,#4b1d8f,#9966ee);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;}
.csp-s192{font-size:13px;font-weight:500;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.csp-s193{font-size:11px;color:rgba(153,102,238,0.8);margin-top:1px;}
.csp-s194{background:none;border:none;color:rgba(153,102,238,0.9);font-size:18px;padding:0 4px;cursor:pointer;}
.csp-s195{background:none;border:none;color:#555;font-size:14px;padding:0 4px;cursor:pointer;}
.csp-s196{width:100%;background:var(--surf1);border:1px solid rgba(153,102,238,.3);border-radius:10px;color:var(--dim);padding:10px 12px;font-size:14px;cursor:pointer;text-align:left;}
.csp-s197{font-size:11px;color:var(--dim);margin-top:4px;}
.csp-s198{font-size:13px;color:var(--dim);line-height:1.6;margin-bottom:16px;}
.csp-s199{font-size:13px;color:var(--dim);margin-bottom:12px;}
.csp-s200{width:180px;height:180px;border-radius:12px;background:#fff;padding:8px;box-sizing:border-box;}
.csp-s201{font-size:11px;color:var(--dim);margin:10px 0 4px;}
.csp-s202{font-size:12px;color:#c4a0ff;word-break:break-all;font-family:monospace;margin-bottom:16px;}
.csp-s203{text-align:left;}
.csp-s204{width:100%;background:var(--surf1);border:1px solid rgba(153,102,238,.3);border-radius:10px;color:var(--fg);padding:10px 12px;font-size:16px;letter-spacing:3px;text-align:center;box-sizing:border-box;}
.csp-s205{font-size:13px;color:#e0a030;line-height:1.6;margin-bottom:12px;}
.csp-s206{background:var(--surf1);border-radius:10px;padding:14px;font-family:monospace;font-size:13px;line-height:2;color:var(--fg);margin-bottom:16px;}
.csp-s207{color:#6aaa72;}
.csp-s208{background:rgba(224,80,80,.15);color:#e05050;}
.csp-s209{background:rgba(153,102,238,.08);border-radius:12px;padding:14px 16px;margin-bottom:20px;}
.csp-s210{font-size:12px;color:var(--dim);margin-bottom:4px;}
.csp-s211{font-size:15px;color:var(--fg);}
.csp-s212{font-size:13px;color:var(--dim);line-height:1.5;}
.csp-s213{color:var(--dim);font-size:14px;text-align:center;padding:24px 0;}
.csp-s214{height:12px;}
.csp-s215{background:rgba(153,102,238,.12);color:var(--accent);}
.csp-s216{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:2000;display:none;align-items:center;justify-content:center;padding:24px;}
.csp-s217{background:var(--surf1);border-radius:18px;padding:28px 24px;max-width:340px;width:100%;}
.csp-s218{font-size:22px;margin-bottom:8px;}
.csp-s219{font-size:17px;font-weight:700;margin-bottom:10px;}
.csp-s220{font-size:13px;color:var(--dim);line-height:1.5;margin-bottom:20px;}
.csp-s221{width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid var(--border);background:var(--surf2);color:var(--fg);font-size:14px;margin-bottom:14px;box-sizing:border-box;}
.csp-s222{display:flex;gap:10px;}
.csp-s223{flex:1;padding:12px;border-radius:10px;border:1.5px solid var(--border);background:var(--surf2);color:var(--dim);font-size:14px;font-weight:600;cursor:pointer;}
.csp-s224{flex:1;padding:12px;border-radius:10px;border:none;background:#c85858;color:#fff;font-size:14px;font-weight:700;cursor:pointer;}
.csp-s225{position:absolute;inset:0;background:var(--bg);z-index:500;display:none;flex-direction:column;}
.csp-s226{display:flex;align-items:center;padding:16px;border-bottom:1px solid var(--border);}
.csp-s227{flex:1;font-size:16px;font-weight:700;}
.csp-s228{flex:1;overflow-y:auto;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.csp-s229{color:var(--accent)!important;}
.csp-s230{display:none;align-items:center;gap:9px;margin:8px 14px 0;padding:6px 10px;background:rgba(153,102,238,0.06);border-radius:12px;border:0.5px solid rgba(153,102,238,0.22);}
.csp-s231{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#4b1d8f,#9966ee);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;}
.csp-s232{font-size:11px;font-weight:500;letter-spacing:.01em;color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.csp-s233{font-size:9.5px;color:rgba(153,102,238,0.75);margin-top:1px;letter-spacing:.01em;}
.csp-s234{background:none;border:none;color:rgba(153,102,238,0.85);font-size:15px;padding:0 4px;cursor:pointer;}
.csp-s235{background:none;border:none;color:#555;font-size:12px;padding:0 4px;cursor:pointer;}
.csp-s236{
  display:none;position:fixed;inset:0;z-index:850;flex-direction:column;
  background:var(--bg);
}
.csp-s237{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) 16px 10px;flex-shrink:0;}
/* 2026-08-11 (Pilar: "não consigo voltar pra editar ou desistir se eu
   quiser" -- causa real: botões brancos fixos, herdados de quando o fundo
   #criar-preview-bg (.csp-s236) era preto fixo sempre. Meu fix de tema do
   fundo (mesma rodada) corrigiu o fundo mas não estes 3 elementos, que
   ficaram brancos-sobre-branco no tema claro -- invisíveis, não removidos
   de propósito, só ilegíveis/impossíveis de mirar com confiança). Tokens
   adaptativos abaixo, mesmo padrão já usado no resto do studio. */
.csp-s238{background:color-mix(in srgb, var(--text) 8%, transparent);border:none;color:color-mix(in srgb, var(--text) 85%, transparent);width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
.csp-s239{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--text);text-transform:uppercase;}
.csp-s240{width:32px;}
.csp-s241{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-y:auto;position:relative;padding:16px 20px;gap:0;}
.csp-s242{width:100%;display:flex;justify-content:center;}
.csp-s243{display:flex;gap:10px;padding:14px 16px calc(20px + env(safe-area-inset-bottom));flex-shrink:0;}
.csp-s244{flex:1;padding:12px;border-radius:12px;background:color-mix(in srgb, var(--text) 6%, transparent);border:1px solid color-mix(in srgb, var(--text) 14%, transparent);color:color-mix(in srgb, var(--text) 80%, transparent);font-size:13px;cursor:pointer;}
.csp-s245{flex:2;padding:12px;border-radius:12px;background:var(--accent);border:none;color:#f0eeff;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:.02em;}
.csp-s246{display:none;position:fixed;bottom:0;left:0;right:0;z-index:820;background:#111;border-top:0.5px solid #2a2a2a;border-radius:16px 16px 0 0;max-height:72vh;overflow-y:auto;}
.csp-s247{text-align:center;padding:10px 0 4px;}
.csp-s248{width:32px;height:3px;border-radius:2px;background:#333;margin:0 auto;}
.csp-s249{font-size:11px;color:#666;letter-spacing:.08em;padding:6px 16px 8px;text-transform:uppercase;}
.csp-s250{padding:0 14px 10px;display:flex;gap:8px;align-items:center;}
.csp-s251{flex:1;background:#1a1a1a;border:0.5px solid #333;border-radius:8px;color:#ccc;font-size:14px;padding:8px 12px;outline:none;}
.csp-s252{padding:0 0 4px;}
.csp-s253{padding:10px 14px 24px;display:flex;gap:8px;}
.csp-s254{flex:1;padding:10px;border-radius:10px;background:#1a1a1a;border:0.5px solid #333;color:#888;font-size:14px;cursor:pointer;}
.csp-s255{flex:1;padding:10px;border-radius:10px;background:#9966ee;border:none;color:#fff;font-size:14px;font-weight:500;cursor:pointer;}
.csp-s256{display:none;position:fixed;inset:0;z-index:819;background:rgba(0,0,0,0.5);}
.csp-s257{resize:none;}
.csp-s258{margin:8px 0 4px;font-size:12px;color:var(--dim);}
.csp-s259{font-size:13px;color:var(--fg2);margin-top:4px;display:block;}
.csp-s260{display:flex;gap:8px;margin:6px 0 12px;}
.csp-s261{width:100%;}
.csp-s262{display:flex;gap:8px;justify-content:center;margin-top:4px;}
.csp-s263{width:100%;margin-bottom:10px;}
.csp-s264{text-transform:uppercase;margin-bottom:10px;}
.csp-s265{display:none;position:fixed;inset:0;z-index:2000;background:#0d001a;flex-direction:column;align-items:center;justify-content:center;padding:40px 32px;text-align:center;}
.csp-s266{margin-bottom:24px;opacity:.7;}
.csp-s267{font-size:22px;font-weight:700;color:#f0eeff;margin-bottom:16px;letter-spacing:-.5px;}
.csp-s268{font-size:14px;color:#c4a0ff99;line-height:1.7;max-width:280px;margin-bottom:12px;}
.csp-s269{font-size:14px;color:#c4a0ff;line-height:1.7;max-width:280px;margin-bottom:32px;}
.csp-s270{font-size:12px;color:#f0eeff33;line-height:1.6;max-width:260px;}
.csp-s271{margin-top:36px;background:none;border:1px solid #9966ee44;color:#9966ee;padding:10px 28px;border-radius:20px;font-size:13px;cursor:pointer;}

/* ================================================================
   BORBOLETA VIVA -- redesign visual (2026-08-06, Pilar, 5a rodada):
   troca a silhueta SVG antiga (clipart roxo/rosa opaco -- "a coisa
   mais feia que já vi") por um sprite sheet pré-renderizado a partir
   do vídeo de referência dela (asas semi-transparentes escuras, veias
   violeta brilhantes, pintinhas douradas luminescentes -- ver
   Borboleta-v1/LEIA-ME.txt pra técnica de extração). A camada de
   ORQUESTRAÇÃO (quando/onde pousa, sistema de coordenadas via
   --bv-x0/y0/x1/y1/x2/y2/--bv-dur/--bv-arc, máquina de estados da
   trajetória em bv-voo/bv-voo-b) é a MESMA de antes, herdada quase
   verbatim -- só o que se desenha dentro dela mudou. Ver
   static/js/modules/borboleta-viva.js pro histórico completo e pro
   orquestrador (setTimeout auto-reagendado + 1 setInterval barrado à
   duração de 1 voo pro stepping do sprite, nunca um loop contínuo).

   bv-flap/bv-respirar/.bv-echo (o sistema antigo de bater-asa via CSS
   hinge + ecos clonados) saem de cena: a animação de bater asa já vem
   pronta dentro do sprite (71 frames), e o rastro agora é um sistema de
   partículas separado (.bv-particula), não mais clones da silhueta. */
:root{
  --bv-tam:44px; /* 2026-08-10 (Pilar, ao vivo, 4a rodada: "não pequenina
                     como da 1a vez, mas precisa ser menor"): caiu de 54px --
                     acima do ícone normal (.icon-btn, 34px), bem abaixo do
                     avatar de perfil (.po-avatar, 72px). TAM_META em
                     borboleta-viva.js é sempre metade deste valor -- os
                     dois têm que mudar juntos (ver comentário lá: "metade
                     de --bv-tam"). */
}

/* Mesmo raciocínio de posicionamento do .bv-svg antigo (não repetir aqui
   -- ver comentário grande preservado em borboleta-viva.js): sempre
   dentro de #phone, position:absolute, nunca fixed/contra a janela. */
.bv-sprite{
  position:absolute; left:0; top:0;
  width:var(--bv-tam); height:var(--bv-tam);
  pointer-events:none;
  z-index:4200;
  will-change:transform,opacity,offset-distance,background-position;
  /* BUG CORRIGIDO (Pilar, diagnóstico preciso: "ao girar as asas, quebra
     as asas pelo limite de área que ela ocupa limitado pelo quadrado e
     não pelas suas próprias limitações geométricas"): `contain:paint`
     define exatamente isso -- "nada fora da própria caixa do elemento é
     pintado" (spec: paint containment). `layout style` (sem `paint`)
     mantém os ganhos de isolamento que não afetam pintura visual --
     overflow:visible explícito documenta a intenção (já era o default,
     mas deixa claro que é proposital, não esquecimento). */
  contain:layout style;
  overflow:visible;
  opacity:0;
  background-repeat:no-repeat;
  /* PIVOT 2026-08-10 (v5): sprite fonte agora é 960x960 (grade 6x6 = 36
     frames), extraído de um clipe gerado por IA (câmera 3/4 pedida por
     Pilar depois de mandar 9 vídeos de referência -- nenhum deles é
     top-down) e recolorido com o mesmo processo do v4 (preto>=90%, 2 tons
     de lilás). borboleta-viva.js::_framePos() calcula os offsets de
     background-position NESTA MESMA escala (múltiplos de --bv-tam), não
     nos 160px de origem -- os dois lados têm que concordar. */
  background-size:calc(6 * var(--bv-tam)) calc(6 * var(--bv-tam));
  /* offset-path (curva SVG única por voo, borboleta-viva.js::_construirPath)
     continua cuidando 100% da POSIÇÃO -- isso não muda no v5.
     offset-rotate MUDOU: nos sprites v1-v4 (1 pose fixa) `auto 90deg`
     girava a arte plana pra alinhar com a tangente do voo -- era a ÚNICA
     fonte de variação de ângulo que existia (por isso "parecia sempre a
     mesma vista", ver comentário grande no topo do arquivo sobre os 9
     vídeos de referência). No v5 a PRÓPRIA sequência de frames já contém
     giro/inclinação real (câmera 3/4 + corpo bancando, gerado assim de
     propósito) -- se `offset-rotate:auto` continuasse girando por cima
     disso, ia somar uma rotação de tela em cima de um ângulo que a fonte
     já tem embutido, ficando torto/dobrado (não dá pra "desgirar" uma
     perspectiva já gravada). offset-rotate:0 = sem rotação extra, o
     sprite mostra exatamente o frame como foi gerado; a variedade de
     ângulo vem 100% da troca de frame, igual a batida de asa sempre veio. */
  offset-rotate:0deg;
  transform-origin:center;
  transform:scale(.5);
  animation:bv-voo-motion var(--bv-dur,15s) cubic-bezier(.4,0,.2,1) forwards;
}
/* 2026-08-10 (Pilar, ao vivo: "SEM DISPARO" -- eliminado o voo borda-a-
   borda, ver _manifestar()/_rajadaMagica() em borboleta-viva.js): pousa
   (fade-in) em cima de um ícone real, fica ali batendo asa, some (fade-
   out). scale(1) cheio (não .5 como o voo antigo) -- ela não está "longe,
   se aproximando" nesse modelo, está bem ali, no ícone. bv-aparecer tem um
   leve overshoot (60% em scale 1.08) só pra dar uma "assentada" com
   micro-mola ao pousar, igual o resto do app já faz em outras transições
   (ver .msg-bubble/cubic-bezier(.34,1.56,.64,1) em outro lugar deste
   arquivo) -- consistente com a linguagem visual já estabelecida. */
@keyframes bv-aparecer{
  0%   { opacity:0; transform:scale(.55); }
  60%  { opacity:1; transform:scale(1.08); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes bv-sumir{
  0%   { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(.6); }
}
/* Fallback pra navegadores sem suporte a CSS Motion Path (checado via
   CSS.supports('offset-path',...) em borboleta-viva.js -- essencialmente
   nenhum navegador mobile real em 2026, mas mantido por segurança):
   reaproveita o sistema antigo intacto (translate3d + rotate() fixo por
   keyframe, bv-voo/bv-voo-b logo abaixo). Sem a correção de heading do
   sistema novo, mas 100% funcional. */
.bv-sprite.bv-legado{
  offset-path:none;
  animation-name:bv-voo;
  transform:translate3d(var(--bv-x0,0px),var(--bv-y0,0px),0) scale(.55) rotate(-8deg);
}
.bv-sprite.bv-legado.bv-r2{ animation-name:bv-voo-b; }

/* @keyframes bv-voo-motion -- sistema novo (offset-path). offset-distance
   não precisa bater percentual com os breakpoints de fase do JS
   (_faseVoo) -- controla só QUANTO da curva já foi percorrida em cada %
   de tempo, moldando o ritmo (rápido na aproximação/decolagem, quase
   parado perto do pouso) igual o sistema antigo fazia via posição bruta.
   BUG 2026-08-09 CORRIGIDO (Pilar, ao vivo: clipping ainda visível):
   opacity NÃO entra mais aqui -- a margem de segurança por % de TEMPO
   (herdada do sistema antigo, onde posição era um blend linear simples)
   não generaliza pra uma curva única por voo (comprimento/forma variam a
   cada sorteio) -- "15% do tempo" não bate de forma confiável com "longe
   da borda" pra toda curva possível. opacity agora é medida e aplicada
   ao vivo em borboleta-viva.js (distância real, em px, até a borda de
   #phone a cada tick), não por tempo -- ver MARGEM_OPACIDADE lá. */
@keyframes bv-voo-motion{
  0%   { offset-distance:0%;   transform:scale(.5); }
  22%  { offset-distance:32%;  transform:scale(.6); }
  40%  { offset-distance:45%;  transform:scale(.6); }
  70%  { offset-distance:55%;  transform:scale(.6); }
  76%  { offset-distance:60%;  transform:scale(.55); }
  90%  { offset-distance:84%;  transform:scale(.5); }
  100% { offset-distance:100%; transform:scale(.46); }
}

/* @keyframes bv-voo/bv-voo-b -- 2026-08-09: viraram o FALLBACK (.bv-legado
   acima) do sistema novo baseado em offset-path -- mantidas intactas
   (rotate() fixo por keyframe e tudo mais, "efeito caranguejo" incluso)
   porque só entram em cena nos poucos navegadores sem suporte a CSS
   Motion Path. Comentário original abaixo preservado como está. Máquina
   de estados da trajetória (não geometria A->B
   direto): explora/plana (0-22%) -> curiosa/aproximação, desacelera e
   orbita de leve (22-38%) -> pouso (40%) -> repouso quase parado, só
   micro-ajuste (40-70%) -> decolagem, impulso pra cima/trás (70-76%)
   -> planeio de saída em arco (76-100%). --bv-arc (1 ou -1, sorteado
   por voo) inverte o lado da curva pra metade dos voos não entortar
   sempre pro mesmo lado. bv-voo-b é a 2a variante (JS escolhe uma das
   duas aleatoriamente), mesmo espírito, fases levemente diferentes. */
/* BUG 2026-08-09 (Pilar, ao vivo pos-deploy): clipping ainda visivel numa
   posicao de asa mesmo apos o fix de contain:paint em .bv-sprite. Causa
   real: #phone tem overflow:hidden de proposito (fim de tela), e os
   pontos de entrada/saida (--bv-x0/y0, --bv-x2/y2) ficam DE PROPOSITO
   46px fora dele (ver _pontoNaBorda em borboleta-viva.js) -- mas o
   opacity chegava a 1 já aos 7% (entrada) e só caía aos 90-100% (saida),
   enquanto a POSICAO em si só tinha avançado 22% do caminho aos 7% (ainda
   perto da borda) e já estava misturada 60% rumo ao ponto de saida aos
   90% (já perto/além da borda de novo). Ou seja: ficava totalmente opaca
   perto demais da borda dos dois lados -- o corte de overflow:hidden do
   #phone pegava a asa em plena opacidade em vez de sumir suavemente.
   Fix: opacity ganha keyframes PROPRIOS (não precisam bater com os do
   transform -- CSS interpola cada propriedade pelos seus proprios pontos
   declarados), atrasando a entrada em opacidade plena e adiantando a
   saida, sem alterar a trajetoria/rotacao em si. */
@keyframes bv-voo{
  0%   { opacity:0; transform:translate3d(var(--bv-x0,0px),var(--bv-y0,0px),0) scale(.5) rotate(-10deg); }
  4%   { opacity:0; }
  7%   { opacity:.5; transform:translate3d(calc(var(--bv-x0,0px)*.78 + var(--bv-x1,0px)*.22 + var(--bv-arc,1)*14px),calc(var(--bv-y0,0px)*.78 + var(--bv-y1,0px)*.22 - 10px),0) scale(.56) rotate(-6deg); }
  15%  { opacity:1; }
  22%  { opacity:1; transform:translate3d(calc(var(--bv-x0,0px)*.35 + var(--bv-x1,0px)*.65 - var(--bv-arc,1)*10px),calc(var(--bv-y0,0px)*.35 + var(--bv-y1,0px)*.65 + 8px),0) scale(.6) rotate(4deg); }
  30%  { transform:translate3d(calc(var(--bv-x1,0px) + var(--bv-arc,1)*16px),calc(var(--bv-y1,0px) - 14px),0) scale(.63) rotate(-5deg); }
  36%  { transform:translate3d(calc(var(--bv-x1,0px) - var(--bv-arc,1)*6px),calc(var(--bv-y1,0px) - 3px),0) scale(.62) rotate(3deg); }
  40%  { opacity:1; transform:translate3d(var(--bv-x1,0px),var(--bv-y1,0px),0) scale(.6) rotate(calc(var(--bv-arc,1) * 8deg)); }
  47%  { transform:translate3d(calc(var(--bv-x1,0px) + 3px),calc(var(--bv-y1,0px) - 2px),0) scale(.56) rotate(calc(var(--bv-arc,1) * 34deg)); }
  58%  { transform:translate3d(calc(var(--bv-x1,0px) - 2px),calc(var(--bv-y1,0px) + 2px),0) scale(.56) rotate(calc(var(--bv-arc,1) * 30deg)); }
  68%  { opacity:1; transform:translate3d(calc(var(--bv-x1,0px) + 1px),var(--bv-y1,0px),0) scale(.58) rotate(calc(var(--bv-arc,1) * 10deg)); }
  76%  { opacity:1; transform:translate3d(calc(var(--bv-x1,0px) - var(--bv-arc,1)*10px),calc(var(--bv-y1,0px) - 16px),0) scale(.55) rotate(-8deg); }
  86%  { opacity:1; }
  90%  { opacity:.45; transform:translate3d(calc(var(--bv-x1,0px)*.4 + var(--bv-x2,0px)*.6 + var(--bv-arc,1)*20px),calc(var(--bv-y1,0px)*.4 + var(--bv-y2,0px)*.6),0) scale(.5) rotate(6deg); }
  96%  { opacity:0; }
  100% { opacity:0; transform:translate3d(var(--bv-x2,0px),var(--bv-y2,0px),0) scale(.46) rotate(10deg); }
}
@keyframes bv-voo-b{
  0%   { opacity:0; transform:translate3d(var(--bv-x0,0px),var(--bv-y0,0px),0) scale(.5) rotate(9deg); }
  4%   { opacity:0; }
  8%   { opacity:.5; transform:translate3d(calc(var(--bv-x0,0px)*.75 + var(--bv-x1,0px)*.25 - var(--bv-arc,1)*12px),calc(var(--bv-y0,0px)*.75 + var(--bv-y1,0px)*.25 + 10px),0) scale(.57) rotate(7deg); }
  16%  { opacity:1; }
  24%  { opacity:1; transform:translate3d(calc(var(--bv-x0,0px)*.3 + var(--bv-x1,0px)*.7 + var(--bv-arc,1)*12px),calc(var(--bv-y0,0px)*.3 + var(--bv-y1,0px)*.7 - 6px),0) scale(.61) rotate(-4deg); }
  32%  { transform:translate3d(calc(var(--bv-x1,0px) - var(--bv-arc,1)*18px),calc(var(--bv-y1,0px) - 12px),0) scale(.63) rotate(5deg); }
  37%  { transform:translate3d(calc(var(--bv-x1,0px) + var(--bv-arc,1)*5px),calc(var(--bv-y1,0px) + 3px),0) scale(.61) rotate(-3deg); }
  41%  { opacity:1; transform:translate3d(var(--bv-x1,0px),var(--bv-y1,0px),0) scale(.6) rotate(calc(var(--bv-arc,1) * -8deg)); }
  50%  { transform:translate3d(calc(var(--bv-x1,0px) - 3px),calc(var(--bv-y1,0px) - 2px),0) scale(.56) rotate(calc(var(--bv-arc,1) * -33deg)); }
  62%  { transform:translate3d(calc(var(--bv-x1,0px) + 2px),calc(var(--bv-y1,0px) + 2px),0) scale(.56) rotate(calc(var(--bv-arc,1) * -29deg)); }
  70%  { opacity:1; transform:translate3d(var(--bv-x1,0px),calc(var(--bv-y1,0px) - 1px),0) scale(.58) rotate(calc(var(--bv-arc,1) * -9deg)); }
  78%  { opacity:1; transform:translate3d(calc(var(--bv-x1,0px) + var(--bv-arc,1)*11px),calc(var(--bv-y1,0px) - 15px),0) scale(.55) rotate(8deg); }
  87%  { opacity:1; }
  91%  { opacity:.45; transform:translate3d(calc(var(--bv-x1,0px)*.4 + var(--bv-x2,0px)*.6 - var(--bv-arc,1)*18px),calc(var(--bv-y1,0px)*.4 + var(--bv-y2,0px)*.6),0) scale(.5) rotate(-6deg); }
  97%  { opacity:0; }
  100% { opacity:0; transform:translate3d(var(--bv-x2,0px),var(--bv-y2,0px),0) scale(.46) rotate(-10deg); }
}

/* Rastro -- pedido novo da Pilar: "partículas douradas se dissipando",
   não mais os 2 clones-sombra da versão anterior (removidos junto com
   .bv-echo). Cada partícula nasce via borboleta-viva.js::_criarParticula
   na posição atual de verdade da borboleta (lida do layout, não
   recalculada à mão) e se anima sozinha até sumir -- sem loop, sem
   JS tocando nela de novo depois de criada. */
.bv-particula{
  position:absolute; left:0; top:0;
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%;
  pointer-events:none;
  z-index:4199; /* logo atrás do corpo (4200) */
  /* 2026-08-10 (Pilar, ao vivo, 2a rodada: "não quero que eles sejam
     dourados, quero que sejam diamantes"): trocado de dourado/âmbar pra
     branco->azul-gelo, glint frio de cristal em vez de poeira quente. */
  background:radial-gradient(circle, #ffffff 0%, #d6ecff 40%, #9fc6ff 68%, transparent 82%);
  box-shadow:0 0 6px 1px rgba(190,220,255,.75);
  opacity:.85;
  will-change:transform,opacity;
  contain:layout style paint;
  animation:bv-particula .75s ease-out forwards;
}
@keyframes bv-particula{
  0%   { opacity:.85; transform:translate3d(0,0,0) scale(1); }
  100% { opacity:0; transform:translate3d(var(--bv-p-dx,0px),var(--bv-p-dy,0px),0) scale(.25); }
}

/* Fumaça 2026-08-10 -- pedido da Pilar: "a cauda tem um pouco de fumaça,
   como no vídeo que mostrei" (referência: vídeo gerado por IA de borboleta
   preta fantasmagórica com rastro de fumaça + poeira dourada). "Um pouco"
   = minoria das partículas, intercalada com o rastro dourado, não o
   substitui (ver FUMACA_A_CADA_N_PARTICULAS em borboleta-viva.js). Puff
   maior/mais escuro/mais lento que a partícula dourada, e se EXPANDE
   enquanto dissipa (fumaça de verdade cresce, não encolhe). */
.bv-fumaca{
  position:absolute; left:0; top:0;
  width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%;
  pointer-events:none;
  z-index:4198; /* atrás da partícula dourada (4199) e do corpo (4200) */
  /* 2 gradientes com centro deslocado em vez de 1 círculo perfeito --
     "corpórea" (Pilar, 2026-08-10): baforada com volume/grumo, não um
     disco liso escalando uniforme.
     CLAREADO (2026-08-10, 2a rodada -- Pilar, ao vivo: "vejo rastros de
     luz, mas a fumaça preta fantasmagórica eu não vejo"): os tons
     escuros originais (rgba 52/47/64 e 40/36/50) ficavam quase invisíveis
     contra o fundo do app, que já é bem escuro (#08080f-#1a0a33, ver
     #splash-bg/--surf) -- fumaça "preta" sobre fundo preto não aparece,
     mesmo problema de contraste que o próprio sprite já teve. "Fantasmagórica"
     na prática pede cinza pálido/violeta claro (fumaça real dispersa luz,
     lê como clara mesmo quando o conceito é "escura") -- não dourado nem
     saturada, só visível. */
  background:
    radial-gradient(circle at 38% 42%, rgba(182,174,198,.42) 0%, transparent 58%),
    radial-gradient(circle at 62% 58%, rgba(150,140,172,.48) 0%, rgba(105,96,128,.3) 45%, transparent 72%);
  opacity:.65;
  will-change:transform,opacity;
  contain:layout style paint;
  animation:bv-fumaca 1.2s ease-out forwards;
}
@keyframes bv-fumaca{
  0%   { opacity:.5; transform:translate3d(0,0,0) scale(.5,.5) rotate(0deg); }
  100% { opacity:0; transform:translate3d(var(--bv-f-dx,0px),var(--bv-f-dy,-10px),0) scale(var(--bv-f-sx,2.2),var(--bv-f-sy,2.2)) rotate(var(--bv-f-rot,0deg)); }
}

/* Cintilares 2026-08-10 -- pedido da Pilar: "rastro de fumaça corpórea
   com cintilares pequeninos que meio que porpurinam essa fumaça". 2-3
   pontinhos de brilho lilás nascendo DENTRO de cada baforada (ver
   _criarCintilar em borboleta-viva.js), cada um com atraso/duração
   próprios -- pisca fora de sincronia, não em bloco (não fica mecânico). */
.bv-sparkle{
  position:absolute; left:0; top:0;
  width:4px; height:4px; margin:-2px 0 0 -2px;
  border-radius:50%;
  pointer-events:none;
  z-index:4199; /* acima da fumaça, junto da partícula dourada */
  background:radial-gradient(circle, #f3edff 0%, #c3a6e8 45%, transparent 75%);
  box-shadow:0 0 5px 1px rgba(196,160,232,.75);
  opacity:0;
  will-change:transform,opacity;
  contain:layout style paint;
  animation:bv-sparkle-twinkle var(--bv-sk-dur,600ms) ease-in-out var(--bv-sk-delay,0ms) forwards;
}
@keyframes bv-sparkle-twinkle{
  0%   { opacity:0; transform:translate3d(0,0,0) scale(.3); }
  35%  { opacity:1; transform:translate3d(calc(var(--bv-sk-x,0px)*.35),calc(var(--bv-sk-y,0px)*.35),0) scale(1.15); }
  100% { opacity:0; transform:translate3d(var(--bv-sk-x,0px),var(--bv-sk-y,0px),0) scale(.2); }
}

@media (prefers-reduced-motion:reduce){
  .bv-sprite,.bv-particula,.bv-fumaca,.bv-sparkle{ display:none; }
}

/* ── Rastro de toque (protótipo experimental) ──────────────────────────────
   Pilar, 2026-08-10: "aplica aquele rastro do press pra ver como fica...
   se a ideia é válida mesma ou só vai poluir o ambiente" -- ver
   static/js/modules/rastro-toque.js pro racional completo.

   RODADA 2 (mesmo dia): "o efeito ficou legal, mas a cor do tema claro não
   fica muito legível... pelo menos 7 traços elegantes e supra skins."
   7 estilos abaixo (fumaça/brilho/faíscas/constelação/aquarela/fita/
   bolhas), cada um com uma variante "-claro" aplicada via JS quando
   data-tema é "claro" ou "descanso" -- resolve a ilegibilidade original
   trocando a cor de verdade por tema, não só reaproveitando a cor da skin.
   window.rastroDefinirEstilo('nome') troca em runtime (ver o JS).

   pointer-events:none em tudo abaixo garante que nunca compete com
   clique/toque/long-press de mais nada. z-index 4138-4141: abaixo da
   borboleta e suas partículas (4198-4200) de propósito, pra nunca competir
   visualmente se os dois aparecerem juntos na tela. */

/* 1. Fumaça fantasmagórica -- pedido explícito da Pilar, estilo default.
   RODADA 4: trocou de círculo+blur pra um <svg> com elipse distorcida por
   ruído fractal (feTurbulence/feDisplacementMap, ver rt-fumaca-defs em
   rastro-toque.js) -- silhueta orgânica/desfiada em vez de um blob
   perfeito, pedido dela ao mandar fotos de fumaça de referência. Só o
   transform/opacity animam aqui (barato, GPU) -- o ruído em si é estático
   por elemento, calculado 1x no spawn, nunca por frame. */
.rt-fumaca-svg{
  position:absolute;
  width:100px;height:130px;
  margin-left:-50px;margin-top:-65px;
  overflow:visible;
  pointer-events:none;
  z-index:4139;
  animation:rt-fumaca-anim2 1s ease-out forwards;
  will-change:transform,opacity;
}
@keyframes rt-fumaca-anim2{
  0%  { opacity:.7; transform:rotate(var(--rt-rot2,0deg)) translate(0,0) scale(.5); }
  100%{ opacity:0;  transform:rotate(var(--rt-rot2,0deg)) translate(var(--rt-drift-x,0px),-34px) scale(1.5); }
}
/* Halo por trás da fumaça, cor --accent (já calibrada legível em qualquer
   tema/skin, é a mesma variável usada na UI toda) -- devolve o "brilho"
   que a fumaça escura sozinha não tem no tema claro (tinta escura não
   emite luz; só uma cor clara/saturada "brilha" de verdade). z-index
   menor que a fumaça de propósito -- fica atrás, como se a fumaça fosse
   iluminada por dentro em vez de competir com ela. */
.rt-fumaca-halo{
  position:absolute;
  width:70px;height:70px;
  margin-left:-35px;margin-top:-35px;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, color-mix(in srgb, var(--accent) 22%, transparent) 45%, transparent 75%);
  filter:blur(4px);
  pointer-events:none;
  z-index:4137;
  animation:rt-fumaca-halo-anim 1s ease-out forwards;
  will-change:transform,opacity;
}
@keyframes rt-fumaca-halo-anim{
  0%  { opacity:.55; transform:scale(.6); }
  100%{ opacity:0;   transform:scale(1.6); }
}

/* 2. Brilho -- shimmer original recalibrado: accent sobre base ESCURA nos
   dois temas (não transparente), fica saturado em vez de lavar no claro. */
.rt-brilho{
  position:absolute;
  width:16px;height:16px;
  margin-left:-8px;margin-top:-8px;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 75%, rgba(20,14,34,.9)) 0%, transparent 72%);
  pointer-events:none;
  z-index:4140;
  animation:rt-brilho-anim .55s ease-out forwards;
  will-change:transform,opacity;
  contain:layout style paint;
}
.rt-brilho.rt-brilho-claro{
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 84%, rgba(15,10,25,.92)) 0%, transparent 72%);
}
@keyframes rt-brilho-anim{
  0%  { opacity:.7;  transform:scale(.5); }
  40% { opacity:.55; transform:scale(1.15); }
  100%{ opacity:0;   transform:scale(1.7); }
}

/* 3. Faíscas -- ouro/laranja quente, contrasta nos dois temas por natureza. */
.rt-faisca{
  position:absolute;
  width:6px;height:6px;
  margin-left:-3px;margin-top:-3px;
  border-radius:50%;
  background:radial-gradient(circle, #fff2c4 0%, #ffb347 45%, #ff7b3d 75%, transparent 100%);
  box-shadow:0 0 6px 1px rgba(255,140,60,.55);
  pointer-events:none;
  z-index:4141;
  animation:rt-faisca-anim .7s ease-out forwards;
  will-change:transform,opacity;
  contain:layout style paint;
}
.rt-faisca.rt-faisca-claro{
  background:radial-gradient(circle, #ffdb8a 0%, #f2932e 45%, #d85f22 75%, transparent 100%);
  box-shadow:0 0 5px 1px rgba(200,90,30,.45);
}
@keyframes rt-faisca-anim{
  0%  { opacity:.9; transform:translate(0,0) scale(1); }
  100%{ opacity:0; transform:translate(var(--rt-jx,0px),-26px) scale(.3); }
}

/* 4. Constelação -- ponto + linha fina até o ponto anterior do gesto. */
.rt-constelacao{
  position:absolute;
  width:5px;height:5px;
  margin-left:-2.5px;margin-top:-2.5px;
  border-radius:50%;
  background:#f4f0ff;
  box-shadow:0 0 6px 1.5px rgba(230,220,255,.8);
  pointer-events:none;
  z-index:4141;
  animation:rt-constelacao-anim .75s ease-out forwards;
  will-change:transform,opacity;
  contain:layout style paint;
}
.rt-constelacao.rt-constelacao-claro{
  background:#221c38;
  box-shadow:0 0 5px 1.5px rgba(30,20,50,.5);
}
@keyframes rt-constelacao-anim{
  0%  { opacity:1;  transform:scale(1.3); }
  60% { opacity:.8; transform:scale(.9); }
  100%{ opacity:0;  transform:scale(.6); }
}
.rt-constelacao-linha{
  position:absolute;
  height:1.2px;
  background:linear-gradient(90deg, transparent, rgba(230,220,255,.55) 30%, rgba(230,220,255,.55) 70%, transparent);
  pointer-events:none;
  z-index:4138;
  transform-origin:center;
  animation:rt-constelacao-linha-anim .75s ease-out forwards;
  will-change:opacity;
  contain:layout style paint;
}
.rt-constelacao-linha.rt-constelacao-claro{
  background:linear-gradient(90deg, transparent, rgba(30,20,50,.35) 30%, rgba(30,20,50,.35) 70%, transparent);
}
@keyframes rt-constelacao-linha-anim{
  0%  { opacity:.8; }
  100%{ opacity:0; }
}

/* 5. Aquarela -- borrão orgânico, tinta dissolvendo. */
.rt-aquarela{
  position:absolute;
  width:26px;height:26px;
  margin-left:-13px;margin-top:-13px;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, color-mix(in srgb, var(--accent) 30%, transparent) 55%, transparent 78%);
  filter:blur(2px);
  pointer-events:none;
  z-index:4138;
  animation:rt-aquarela-anim .9s ease-out forwards;
  will-change:transform,opacity;
  contain:layout style paint;
}
.rt-aquarela.rt-aquarela-claro{
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, rgba(20,15,30,.5)) 0%, color-mix(in srgb, var(--accent) 40%, rgba(20,15,30,.3)) 55%, transparent 78%);
}
@keyframes rt-aquarela-anim{
  0%  { opacity:.55; transform:scale(.6); }
  100%{ opacity:0;   transform:scale(1.6); }
}

/* 6. Fita -- traço alongado na direção do movimento, tipo pincelada.
   Ângulo chega via --rt-rot (custom property setada no JS) pro keyframe
   poder animar scaleX por cima sem pisar na rotação. */
.rt-fita{
  position:absolute;
  width:26px;height:5px;
  margin-left:-13px;margin-top:-2.5px;
  border-radius:3px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 70%, rgba(240,235,255,.9)) 45%, color-mix(in srgb, var(--accent) 70%, rgba(240,235,255,.9)) 55%, transparent);
  pointer-events:none;
  z-index:4140;
  animation:rt-fita-anim .42s ease-out forwards;
  will-change:transform,opacity;
  contain:layout style paint;
}
.rt-fita.rt-fita-claro{
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 80%, rgba(20,15,30,.9)) 45%, color-mix(in srgb, var(--accent) 80%, rgba(20,15,30,.9)) 55%, transparent);
}
@keyframes rt-fita-anim{
  0%  { opacity:.75; transform:translate(-50%,-50%) rotate(var(--rt-rot,0deg)) scaleX(.4); }
  30% { opacity:.65; transform:translate(-50%,-50%) rotate(var(--rt-rot,0deg)) scaleX(1); }
  100%{ opacity:0;   transform:translate(-50%,-50%) rotate(var(--rt-rot,0deg)) scaleX(1.3); }
}

/* 7. Bolhas -- círculo translúcido com reflexo, sobe e "estoura" no fim. */
.rt-bolha{
  position:absolute;
  width:16px;height:16px;
  margin-left:-8px;margin-top:-8px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.5) 0%, color-mix(in srgb, var(--accent) 35%, transparent) 45%, transparent 78%);
  border:1px solid rgba(255,255,255,.35);
  pointer-events:none;
  z-index:4141;
  animation:rt-bolha-anim .8s cubic-bezier(.25,.6,.4,1) forwards;
  will-change:transform,opacity;
  contain:layout style paint;
}
.rt-bolha.rt-bolha-claro{
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.7) 0%, color-mix(in srgb, var(--accent) 45%, rgba(20,15,30,.25)) 45%, transparent 78%);
  border:1px solid rgba(20,15,30,.28);
}
@keyframes rt-bolha-anim{
  0%  { opacity:.75; transform:translate(0,0) scale(.5); }
  70% { opacity:.6;  transform:translate(var(--rt-drift-x,0px),-20px) scale(1.05); }
  100%{ opacity:0;   transform:translate(var(--rt-drift-x,0px),-28px) scale(1.4); }
}

@media (prefers-reduced-motion:reduce){
  .rt-fumaca-svg, .rt-fumaca-halo, .rt-brilho, .rt-faisca, .rt-constelacao, .rt-constelacao-linha,
  .rt-aquarela, .rt-fita, .rt-bolha{ display:none; }
}