/* ══════════════════════════════════════════════════════════════════════════
   PAINEL DE PROJETOS — a folha do canvas
   ══════════════════════════════════════════════════════════════════════════
   A TELA INTEIRA É O CANVAS. Não existe coluna lateral, não existe cartão
   envolvendo o quadro: os controles flutuam por cima, como na referência. Um
   container em volta do canvas mataria a sensação de espaço infinito, que é o
   ponto do painel.

   O fundo é quase preto com um azul-marinho por baixo, e a textura de
   partículas é DISCRETA de propósito — profundidade, não papel de parede de
   galáxia. Se ela chamar atenção, está errada.
   ══════════════════════════════════════════════════════════════════════════ */

#prj-view{display:none;}
#crm-view.prj-modelo #prj-view{display:block;}

/* O painel antigo sai inteiro de cena — os QUATRO blocos irmãos, a lição que
   o painel de Contratos aprendeu aparecendo embaixo do financeiro. */
#crm-view.prj-modelo #crm-dashboard,
#crm-view.prj-modelo #crm-charts-row,
#crm-view.prj-modelo #crm-board,
#crm-view.prj-modelo #cli-view,
#crm-view.prj-modelo #est-view,
#crm-view.prj-modelo #ctr-view{display:none !important;}

/* A tela toda, descontada a barra do app. `dvh` e não `vh`: no celular o
   `100vh` é a janela com a barra recolhida, e o rodapé fica atrás dela. */
#crm-view.prj-modelo{padding:0 !important;}
#prj-view{position:relative;width:100%;height:calc(100dvh - 56px);
  min-height:520px;overflow:hidden;
  background:#05060f;color:#e8e8f0;
  font-family:'Inter',sans-serif;}

/* ── O FUNDO ───────────────────────────────────────────────────────────────
   Três camadas: o azul-marinho de base, dois halos violeta/azul muito difusos
   e um campo de estrelas feito com `radial-gradient` repetido. Sem imagem: a
   CSP não carrega nada de fora, e um PNG estelar pesaria mais que a folha
   inteira. */
/* ── A GALÁXIA ─────────────────────────────────────────────────────────────
   Quarta tentativa, e a primeira sem geometria. As três anteriores foram
   feitas com `conic-gradient` recortado por máscara em anel, e o defeito era
   estrutural, não de ajuste:

     • CÔNICO NÃO CURVA. O gradiente cônico tem o mesmo ângulo em todo raio,
       então cada faixa clara sai como uma CUNHA reta partindo do centro.
       Braço de espiral é o contrário: o ângulo avança conforme o raio cresce.
       Por isso lia como fatia de pizza, nunca como braço.
     • MÁSCARA EM ANEL TEM BORDA. Por mais suave que seja a parada, o anel
       fecha num contorno elíptico contínuo, e o olho acha contorno fechado na
       hora. Virou um aro.
     • As duas coisas juntas deram o laço escuro em X no meio.

   Aqui não há setor nem máscara. São 104 manchas macias distribuídas
   ao longo de DUAS ESPIRAIS LOGARÍTMICAS (r = a·e^(b·θ), que é a curva que as
   galáxias fazem de verdade), cada uma achatada e espalhada em torno da curva.
   O braço existe porque as manchas estão onde ele passa, e some porque elas
   rareiam — nunca porque uma borda o corta.

   As posições foram calculadas uma vez, com semente fixa, e escritas aqui como
   CSS literal: o céu é irregular, mas é o MESMO céu a cada publicação. No
   navegador isto é degradê estático, desenhado uma vez pelo compositor.

   Perto do centro as manchas são mais quentes e mais fortes; na ponta, mais
   azuis e mais fracas — é como a luz das estrelas velhas e novas se
   distribui num disco. */
.prj-fundo{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(1300px 950px at 63% 40%,rgba(88,28,167,.30),transparent 66%),
    radial-gradient(1000px 780px at 18% 76%,rgba(29,58,163,.22),transparent 64%),
    radial-gradient(760px 600px at 90% 84%,rgba(14,116,144,.15),transparent 62%),
    radial-gradient(600px 500px at 8% 12%,rgba(190,24,93,.10),transparent 66%),
    linear-gradient(180deg,#07071a 0%,#050512 52%,#020207 100%);}

/* A vinheta fecha as bordas e empurra o olho para o centro. Sem ela o céu
   vaza para fora da tela e o núcleo deixa de ser o assunto. */
.prj-fundo::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 100% at 62% 42%,transparent 38%,rgba(2,2,9,.62) 100%);}

.prj-galaxia{position:absolute;left:62%;top:44%;
  width:min(1500px,135vw);height:min(1500px,135vw);
  transform:translate(-50%,-50%) rotate(-22deg);
  background-image:
    radial-gradient(4.03% 1.27% at 54.91% 50%,rgba(255,236,205,0.15),rgba(255,236,205,0) 72%),
    radial-gradient(5.56% 2.59% at 53.7% 50.1%,rgba(255,236,205,0.12),rgba(255,236,205,0) 72%),
    radial-gradient(5.81% 2.42% at 54.94% 50.27%,rgba(255,236,205,0.12),rgba(255,236,205,0) 72%),
    radial-gradient(5.67% 2.12% at 53.76% 50.31%,rgba(255,236,205,0.11),rgba(255,236,205,0) 72%),
    radial-gradient(4.62% 2.17% at 58.16% 50.92%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(6.16% 2.63% at 52.22% 50.32%,rgba(255,236,205,0.11),rgba(255,236,205,0) 72%),
    radial-gradient(4.23% 1.86% at 53.94% 50.69%,rgba(255,236,205,0.1),rgba(255,236,205,0) 72%),
    radial-gradient(8.04% 3.87% at 56.59% 51.37%,rgba(255,236,205,0.08),rgba(255,236,205,0) 72%),
    radial-gradient(7.25% 2.65% at 52.79% 50.68%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(5.21% 2.42% at 56.7% 51.9%,rgba(255,236,205,0.15),rgba(255,236,205,0) 72%),
    radial-gradient(6% 1.91% at 54.6% 51.51%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(8.5% 2.99% at 55.59% 52.1%,rgba(255,236,205,0.14),rgba(255,236,205,0) 72%),
    radial-gradient(6.67% 2.22% at 54.9% 52.12%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(6.15% 1.98% at 52.77% 51.37%,rgba(255,236,205,0.12),rgba(255,236,205,0) 72%),
    radial-gradient(5.58% 2% at 54.66% 52.67%,rgba(255,236,205,0.1),rgba(255,236,205,0) 72%),
    radial-gradient(8.27% 2.76% at 55.38% 53.58%,rgba(255,236,205,0.12),rgba(255,236,205,0) 72%),
    radial-gradient(8.15% 3.56% at 52.44% 51.91%,rgba(255,236,205,0.08),rgba(255,236,205,0) 72%),
    radial-gradient(10.57% 3.96% at 53.64% 53.4%,rgba(255,236,205,0.14),rgba(255,236,205,0) 72%),
    radial-gradient(8.21% 2.72% at 52.94% 53.37%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(9.8% 4.04% at 52.21% 53.24%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(8.48% 4.15% at 51.31% 52.6%,rgba(255,236,205,0.12),rgba(255,236,205,0) 72%),
    radial-gradient(8.13% 2.54% at 50.8% 52.45%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(5.65% 1.99% at 50.56% 53.67%,rgba(255,236,205,0.07),rgba(255,236,205,0) 72%),
    radial-gradient(5.7% 1.79% at 49.92% 54.24%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(8.47% 2.78% at 49.03% 55.09%,rgba(255,236,205,0.1),rgba(255,236,205,0) 72%),
    radial-gradient(12.42% 5.35% at 48.37% 54.47%,rgba(255,236,205,0.08),rgba(255,236,205,0) 72%),
    radial-gradient(6.09% 2.33% at 46.98% 55.57%,rgba(255,236,205,0.1),rgba(255,236,205,0) 72%),
    radial-gradient(7.65% 3.26% at 46.7% 54.56%,rgba(255,236,205,0.12),rgba(255,236,205,0) 72%),
    radial-gradient(11.65% 4.2% at 44.37% 56.16%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(11.24% 3.99% at 43.24% 56.06%,rgba(255,236,205,0.07),rgba(255,236,205,0) 72%),
    radial-gradient(7.35% 2.7% at 44.89% 53.85%,rgba(255,236,205,0.1),rgba(255,236,205,0) 72%),
    radial-gradient(9.85% 3.41% at 44.79% 53.35%,rgba(255,236,205,0.11),rgba(255,236,205,0) 72%),
    radial-gradient(8.23% 4.01% at 39.81% 55.65%,rgba(255,236,205,0.1),rgba(255,236,205,0) 72%),
    radial-gradient(7.36% 2.38% at 38.01% 55.77%,rgba(255,236,205,0.07),rgba(255,236,205,0) 72%),
    radial-gradient(8.75% 3.35% at 38.23% 54.93%,rgba(255,236,205,0.09),rgba(255,236,205,0) 72%),
    radial-gradient(8.5% 3.53% at 35.07% 55.45%,rgba(255,236,205,0.07),rgba(255,236,205,0) 72%),
    radial-gradient(9.75% 3.81% at 39.36% 53.38%,rgba(255,236,205,0.07),rgba(255,236,205,0) 72%),
    radial-gradient(14.87% 6.58% at 35.18% 54.08%,rgba(255,236,205,0.08),rgba(255,236,205,0) 72%),
    radial-gradient(11.76% 4.57% at 35.11% 53.52%,rgba(219,200,255,0.09),rgba(219,200,255,0) 72%),
    radial-gradient(7.43% 2.69% at 35.71% 52.87%,rgba(219,200,255,0.1),rgba(219,200,255,0) 72%),
    radial-gradient(9.74% 3.39% at 30.5% 53.27%,rgba(219,200,255,0.07),rgba(219,200,255,0) 72%),
    radial-gradient(10.82% 5.1% at 30.58% 52.64%,rgba(219,200,255,0.12),rgba(219,200,255,0) 72%),
    radial-gradient(16.04% 5.66% at 28.37% 52.29%,rgba(219,200,255,0.06),rgba(219,200,255,0) 72%),
    radial-gradient(13.63% 5.73% at 28.45% 51.66%,rgba(219,200,255,0.09),rgba(219,200,255,0) 72%),
    radial-gradient(13.6% 6.42% at 29.67% 51%,rgba(219,200,255,0.1),rgba(219,200,255,0) 72%),
    radial-gradient(15.1% 6.05% at 30.98% 50.41%,rgba(219,200,255,0.11),rgba(219,200,255,0) 72%),
    radial-gradient(15.25% 5.95% at 28.47% 49.87%,rgba(219,200,255,0.11),rgba(219,200,255,0) 72%),
    radial-gradient(11% 3.64% at 20.81% 49.02%,rgba(219,200,255,0.06),rgba(219,200,255,0) 72%),
    radial-gradient(12.56% 5.49% at 22.04% 48.28%,rgba(219,200,255,0.1),rgba(219,200,255,0) 72%),
    radial-gradient(15.75% 7.68% at 27.14% 47.94%,rgba(219,200,255,0.06),rgba(219,200,255,0) 72%),
    radial-gradient(9.76% 4.39% at 26.67% 47.22%,rgba(219,200,255,0.1),rgba(219,200,255,0) 72%),
    radial-gradient(9.23% 3.66% at 17.9% 45.19%,rgba(176,190,255,0.06),rgba(176,190,255,0) 72%),
    radial-gradient(6.02% 1.97% at 43.08% 50%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(4.64% 1.85% at 46.01% 49.89%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(4.06% 1.24% at 44.35% 49.69%,rgba(255,236,205,0.11),rgba(255,236,205,0) 72%),
    radial-gradient(6.46% 2.98% at 46.41% 49.7%,rgba(255,236,205,0.14),rgba(255,236,205,0) 72%),
    radial-gradient(5.7% 2.2% at 43.19% 49.23%,rgba(255,236,205,0.12),rgba(255,236,205,0) 72%),
    radial-gradient(6% 2.62% at 45.83% 49.4%,rgba(255,236,205,0.14),rgba(255,236,205,0) 72%),
    radial-gradient(4.94% 2.15% at 44.6% 49.06%,rgba(255,236,205,0.12),rgba(255,236,205,0) 72%),
    radial-gradient(7.49% 3.19% at 42.11% 48.36%,rgba(255,236,205,0.09),rgba(255,236,205,0) 72%),
    radial-gradient(4.42% 2.1% at 45.32% 48.86%,rgba(255,236,205,0.14),rgba(255,236,205,0) 72%),
    radial-gradient(7.41% 2.83% at 43.16% 48.06%,rgba(255,236,205,0.14),rgba(255,236,205,0) 72%),
    radial-gradient(5.6% 2.02% at 43.88% 48%,rgba(255,236,205,0.15),rgba(255,236,205,0) 72%),
    radial-gradient(5.61% 2.54% at 47.53% 49.07%,rgba(255,236,205,0.14),rgba(255,236,205,0) 72%),
    radial-gradient(6.31% 2.52% at 45.57% 48.09%,rgba(255,236,205,0.09),rgba(255,236,205,0) 72%),
    radial-gradient(5.32% 2.56% at 46.88% 48.45%,rgba(255,236,205,0.1),rgba(255,236,205,0) 72%),
    radial-gradient(4.83% 1.94% at 46.37% 47.92%,rgba(255,236,205,0.1),rgba(255,236,205,0) 72%),
    radial-gradient(6.84% 3.15% at 47.81% 48.54%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(8.17% 3.05% at 47.48% 48.03%,rgba(255,236,205,0.07),rgba(255,236,205,0) 72%),
    radial-gradient(8.95% 4.43% at 46.74% 46.95%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(6.02% 2.78% at 46.92% 46.47%,rgba(255,236,205,0.11),rgba(255,236,205,0) 72%),
    radial-gradient(8.39% 3.17% at 48.49% 47.8%,rgba(255,236,205,0.14),rgba(255,236,205,0) 72%),
    radial-gradient(9.06% 2.79% at 47.92% 45.86%,rgba(255,236,205,0.09),rgba(255,236,205,0) 72%),
    radial-gradient(7.17% 3.01% at 48.3% 44.79%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(11.57% 5.22% at 49.51% 46.78%,rgba(255,236,205,0.09),rgba(255,236,205,0) 72%),
    radial-gradient(11.84% 4.76% at 50.09% 45.35%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(7.14% 3.23% at 50.57% 47.03%,rgba(255,236,205,0.08),rgba(255,236,205,0) 72%),
    radial-gradient(11.43% 4.28% at 51.18% 46.77%,rgba(255,236,205,0.12),rgba(255,236,205,0) 72%),
    radial-gradient(7.91% 3.95% at 51.93% 46.44%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(10.17% 3.98% at 53.48% 45.2%,rgba(255,236,205,0.1),rgba(255,236,205,0) 72%),
    radial-gradient(10.78% 3.36% at 55.21% 44.31%,rgba(255,236,205,0.1),rgba(255,236,205,0) 72%),
    radial-gradient(9.66% 3.73% at 54.04% 46.37%,rgba(255,236,205,0.08),rgba(255,236,205,0) 72%),
    radial-gradient(6.82% 3.06% at 56.79% 44.88%,rgba(255,236,205,0.1),rgba(255,236,205,0) 72%),
    radial-gradient(12.93% 6.26% at 57.28% 45.32%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(10.98% 4.29% at 56.79% 46.24%,rgba(255,236,205,0.11),rgba(255,236,205,0) 72%),
    radial-gradient(11.64% 5.01% at 58.69% 45.82%,rgba(255,236,205,0.11),rgba(255,236,205,0) 72%),
    radial-gradient(14.09% 4.54% at 60.44% 45.63%,rgba(255,236,205,0.13),rgba(255,236,205,0) 72%),
    radial-gradient(8.22% 4% at 64.09% 44.86%,rgba(255,236,205,0.1),rgba(255,236,205,0) 72%),
    radial-gradient(10.85% 3.61% at 65.78% 44.99%,rgba(255,236,205,0.1),rgba(255,236,205,0) 72%),
    radial-gradient(8.21% 3.55% at 63.56% 46.27%,rgba(255,236,205,0.12),rgba(255,236,205,0) 72%),
    radial-gradient(15.43% 7.54% at 66.37% 46.13%,rgba(219,200,255,0.12),rgba(219,200,255,0) 72%),
    radial-gradient(15.15% 4.68% at 62.18% 47.55%,rgba(219,200,255,0.12),rgba(219,200,255,0) 72%),
    radial-gradient(7.74% 3.18% at 68.8% 46.85%,rgba(219,200,255,0.11),rgba(219,200,255,0) 72%),
    radial-gradient(8.87% 2.71% at 72.04% 47%,rgba(219,200,255,0.1),rgba(219,200,255,0) 72%),
    radial-gradient(13.7% 6.73% at 64.9% 48.42%,rgba(219,200,255,0.1),rgba(219,200,255,0) 72%),
    radial-gradient(11.66% 4.82% at 68.18% 48.6%,rgba(219,200,255,0.1),rgba(219,200,255,0) 72%),
    radial-gradient(15.51% 7.57% at 76.46% 48.7%,rgba(219,200,255,0.07),rgba(219,200,255,0) 72%),
    radial-gradient(14.07% 6.43% at 71.31% 49.54%,rgba(219,200,255,0.09),rgba(219,200,255,0) 72%),
    radial-gradient(17.48% 8.36% at 75.85% 50.16%,rgba(219,200,255,0.06),rgba(219,200,255,0) 72%),
    radial-gradient(15.04% 7.44% at 69.43% 50.65%,rgba(219,200,255,0.1),rgba(219,200,255,0) 72%),
    radial-gradient(16.63% 7.8% at 71.92% 51.35%,rgba(219,200,255,0.06),rgba(219,200,255,0) 72%),
    radial-gradient(13.89% 5.45% at 71.03% 51.89%,rgba(219,200,255,0.1),rgba(219,200,255,0) 72%),
    radial-gradient(12.63% 5.37% at 72.65% 52.7%,rgba(219,200,255,0.06),rgba(219,200,255,0) 72%),
    radial-gradient(12.8% 4.49% at 78.58% 54.28%,rgba(206,178,255,0.07),rgba(206,178,255,0) 72%);
  filter:blur(7px);}

/* O NÚCLEO. Pequeno e muito brilhante: é o contraste com o disco escuro que dá
   a sensação de massa, não o tamanho da mancha clara. Fica levemente fora do
   centro geométrico, como o bojo de uma galáxia vista de lado. */
.prj-galaxia::before{content:'';position:absolute;
  left:50%;top:50%;width:26%;height:11%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
    rgba(255,253,247,.95) 0%,
    rgba(255,234,188,.7) 14%,
    rgba(255,196,160,.34) 30%,
    rgba(196,150,255,.18) 52%,
    rgba(124,58,237,.07) 74%,
    transparent 92%);
  filter:blur(5px);}

/* O BOJO: o halo largo em volta do núcleo, que liga o miolo aos braços. */
.prj-galaxia::after{content:'';position:absolute;
  left:50%;top:50%;width:78%;height:34%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
    rgba(226,206,255,.16) 0%,
    rgba(167,139,250,.10) 38%,
    rgba(99,102,241,.05) 66%,
    transparent 88%);
  filter:blur(16px);}

/* ── A POEIRA ────────────────────────────────────────────────────────────────
   68 faixas escuras acompanhando os braços, um pouco por dentro —
   é onde elas ficam de verdade. É o escuro que desenha o braço: sem ele, tudo
   o que se acumula vira um clarão leitoso, que foi o que aconteceu nas duas
   primeiras tentativas. */
.prj-poeira{position:absolute;left:62%;top:44%;
  width:min(1500px,135vw);height:min(1500px,135vw);
  transform:translate(-50%,-50%) rotate(-22deg);
  background-image:
    radial-gradient(2.91% 0.44% at 55.2% 50.76%,rgba(2,2,9,0.14),rgba(2,2,9,0) 72%),
    radial-gradient(4.05% 0.74% at 56.4% 51.25%,rgba(2,2,9,0.19),rgba(2,2,9,0) 72%),
    radial-gradient(4.79% 0.84% at 53.31% 50.82%,rgba(2,2,9,0.19),rgba(2,2,9,0) 72%),
    radial-gradient(4.87% 0.72% at 53.76% 51.16%,rgba(2,2,9,0.13),rgba(2,2,9,0) 72%),
    radial-gradient(2.94% 0.42% at 53.78% 51.44%,rgba(2,2,9,0.18),rgba(2,2,9,0) 72%),
    radial-gradient(6.3% 1.57% at 55.03% 52.36%,rgba(2,2,9,0.16),rgba(2,2,9,0) 72%),
    radial-gradient(3.94% 0.64% at 53.43% 52%,rgba(2,2,9,0.19),rgba(2,2,9,0) 72%),
    radial-gradient(6.07% 1.51% at 53.27% 52.4%,rgba(2,2,9,0.14),rgba(2,2,9,0) 72%),
    radial-gradient(4.84% 0.72% at 52.44% 52.33%,rgba(2,2,9,0.14),rgba(2,2,9,0) 72%),
    radial-gradient(4.09% 0.65% at 52.59% 53.42%,rgba(2,2,9,0.14),rgba(2,2,9,0) 72%),
    radial-gradient(6.99% 1.18% at 51.42% 52.96%,rgba(2,2,9,0.14),rgba(2,2,9,0) 72%),
    radial-gradient(4.97% 1.23% at 50.98% 54.46%,rgba(2,2,9,0.2),rgba(2,2,9,0) 72%),
    radial-gradient(7.19% 1.57% at 49.89% 52.75%,rgba(2,2,9,0.14),rgba(2,2,9,0) 72%),
    radial-gradient(5.98% 0.86% at 49.09% 53.04%,rgba(2,2,9,0.21),rgba(2,2,9,0) 72%),
    radial-gradient(5.18% 1.25% at 47.83% 53.86%,rgba(2,2,9,0.12),rgba(2,2,9,0) 72%),
    radial-gradient(8.08% 1.75% at 46.35% 54.34%,rgba(2,2,9,0.15),rgba(2,2,9,0) 72%),
    radial-gradient(5.72% 1.45% at 44.55% 54.78%,rgba(2,2,9,0.17),rgba(2,2,9,0) 72%),
    radial-gradient(5.5% 1.11% at 44.7% 53.61%,rgba(2,2,9,0.16),rgba(2,2,9,0) 72%),
    radial-gradient(9.5% 2.15% at 43.86% 53.34%,rgba(2,2,9,0.17),rgba(2,2,9,0) 72%),
    radial-gradient(7.56% 1.53% at 39.72% 54.53%,rgba(2,2,9,0.19),rgba(2,2,9,0) 72%),
    radial-gradient(5.66% 1.34% at 41.62% 53%,rgba(2,2,9,0.15),rgba(2,2,9,0) 72%),
    radial-gradient(10.06% 1.5% at 38.89% 53.23%,rgba(2,2,9,0.19),rgba(2,2,9,0) 72%),
    radial-gradient(5.26% 1.09% at 35.42% 53.38%,rgba(2,2,9,0.16),rgba(2,2,9,0) 72%),
    radial-gradient(7.85% 1.69% at 37.36% 52.27%,rgba(2,2,9,0.12),rgba(2,2,9,0) 72%),
    radial-gradient(6.76% 1.52% at 30.99% 52.51%,rgba(2,2,9,0.18),rgba(2,2,9,0) 72%),
    radial-gradient(7.88% 1.27% at 33.95% 51.41%,rgba(2,2,9,0.11),rgba(2,2,9,0) 72%),
    radial-gradient(12.4% 3.08% at 31.69% 50.83%,rgba(2,2,9,0.14),rgba(2,2,9,0) 72%),
    radial-gradient(8.52% 1.4% at 26.56% 50.09%,rgba(2,2,9,0.14),rgba(2,2,9,0) 72%),
    radial-gradient(7.86% 1.67% at 27.12% 49.14%,rgba(2,2,9,0.12),rgba(2,2,9,0) 72%),
    radial-gradient(11.38% 1.6% at 29.86% 48.4%,rgba(2,2,9,0.15),rgba(2,2,9,0) 72%),
    radial-gradient(7.49% 1.63% at 24.71% 46.88%,rgba(2,2,9,0.14),rgba(2,2,9,0) 72%),
    radial-gradient(10.76% 1.88% at 26.05% 45.92%,rgba(2,2,9,0.15),rgba(2,2,9,0) 72%),
    radial-gradient(12.24% 1.9% at 28.17% 45.17%,rgba(2,2,9,0.12),rgba(2,2,9,0) 72%),
    radial-gradient(9.97% 2.52% at 30.48% 44.56%,rgba(2,2,9,0.12),rgba(2,2,9,0) 72%),
    radial-gradient(4.53% 1.18% at 45.8% 49.48%,rgba(2,2,9,0.18),rgba(2,2,9,0) 72%),
    radial-gradient(4.73% 1.02% at 44.69% 49.09%,rgba(2,2,9,0.19),rgba(2,2,9,0) 72%),
    radial-gradient(2.53% 0.52% at 46.78% 49.29%,rgba(2,2,9,0.15),rgba(2,2,9,0) 72%),
    radial-gradient(4.21% 0.61% at 45.47% 48.74%,rgba(2,2,9,0.15),rgba(2,2,9,0) 72%),
    radial-gradient(5.22% 0.82% at 45.2% 48.34%,rgba(2,2,9,0.22),rgba(2,2,9,0) 72%),
    radial-gradient(3.58% 0.8% at 46.75% 48.62%,rgba(2,2,9,0.19),rgba(2,2,9,0) 72%),
    radial-gradient(5.99% 0.88% at 45.24% 47.51%,rgba(2,2,9,0.2),rgba(2,2,9,0) 72%),
    radial-gradient(5.25% 0.98% at 46.04% 47.41%,rgba(2,2,9,0.2),rgba(2,2,9,0) 72%),
    radial-gradient(4.67% 1.11% at 46.08% 46.72%,rgba(2,2,9,0.16),rgba(2,2,9,0) 72%),
    radial-gradient(3.96% 0.81% at 47.49% 47.19%,rgba(2,2,9,0.15),rgba(2,2,9,0) 72%),
    radial-gradient(7.84% 1.11% at 47.99% 46.71%,rgba(2,2,9,0.12),rgba(2,2,9,0) 72%),
    radial-gradient(7.14% 1.66% at 48.61% 45.98%,rgba(2,2,9,0.16),rgba(2,2,9,0) 72%),
    radial-gradient(8.31% 1.89% at 49.6% 45.4%,rgba(2,2,9,0.2),rgba(2,2,9,0) 72%),
    radial-gradient(8.11% 1.32% at 50.6% 46.48%,rgba(2,2,9,0.15),rgba(2,2,9,0) 72%),
    radial-gradient(5.96% 1.22% at 52.04% 45.28%,rgba(2,2,9,0.15),rgba(2,2,9,0) 72%),
    radial-gradient(4.42% 0.77% at 52.89% 45.9%,rgba(2,2,9,0.15),rgba(2,2,9,0) 72%),
    radial-gradient(5.11% 1.16% at 55.03% 44.93%,rgba(2,2,9,0.16),rgba(2,2,9,0) 72%),
    radial-gradient(8.4% 2.1% at 56.65% 44.9%,rgba(2,2,9,0.2),rgba(2,2,9,0) 72%),
    radial-gradient(7.75% 1.82% at 57.86% 45.24%,rgba(2,2,9,0.18),rgba(2,2,9,0) 72%),
    radial-gradient(10.03% 2.27% at 59.05% 45.59%,rgba(2,2,9,0.13),rgba(2,2,9,0) 72%),
    radial-gradient(10.12% 1.7% at 59.98% 46.04%,rgba(2,2,9,0.14),rgba(2,2,9,0) 72%),
    radial-gradient(5.83% 1.19% at 62.45% 45.99%,rgba(2,2,9,0.17),rgba(2,2,9,0) 72%),
    radial-gradient(11.36% 1.84% at 61.73% 46.96%,rgba(2,2,9,0.16),rgba(2,2,9,0) 72%),
    radial-gradient(11.55% 1.69% at 65.18% 46.9%,rgba(2,2,9,0.17),rgba(2,2,9,0) 72%),
    radial-gradient(6.21% 1.53% at 65.33% 47.63%,rgba(2,2,9,0.17),rgba(2,2,9,0) 72%),
    radial-gradient(7.13% 1% at 66.3% 48.23%,rgba(2,2,9,0.18),rgba(2,2,9,0) 72%),
    radial-gradient(10.5% 1.93% at 70.98% 48.62%,rgba(2,2,9,0.17),rgba(2,2,9,0) 72%),
    radial-gradient(9.98% 2.05% at 71.29% 49.49%,rgba(2,2,9,0.14),rgba(2,2,9,0) 72%),
    radial-gradient(12.79% 3.32% at 71.32% 50.37%,rgba(2,2,9,0.15),rgba(2,2,9,0) 72%),
    radial-gradient(7.36% 1.07% at 69.11% 51.13%,rgba(2,2,9,0.13),rgba(2,2,9,0) 72%),
    radial-gradient(7.49% 1.84% at 75.54% 52.6%,rgba(2,2,9,0.12),rgba(2,2,9,0) 72%),
    radial-gradient(13.87% 2.91% at 76.92% 53.96%,rgba(2,2,9,0.12),rgba(2,2,9,0) 72%),
    radial-gradient(10.85% 2.39% at 71.31% 54.17%,rgba(2,2,9,0.09),rgba(2,2,9,0) 72%),
    radial-gradient(7.19% 1.42% at 74.45% 56.11%,rgba(2,2,9,0.1),rgba(2,2,9,0) 72%);
  filter:blur(13px);}

/* ── AS ESTRELAS ─────────────────────────────────────────────────────────── */
/* Três ladrilhos de tamanhos primos entre si — 740, 430 e 290 — para o padrão
   não fechar dentro de uma tela. Com um só, o olho acha a repetição em cinco
   segundos e o céu vira papel de parede. */
.prj-estrelas,.prj-estrelas2{position:absolute;inset:0;}

/* CAMADA 1 — as estrelas grandes, de frente. Piscam devagar e forte. */
.prj-estrelas{opacity:.92;
  background-image:
    radial-gradient(1.7px 1.7px at 12% 22%,rgba(255,255,255,.95),transparent),
    radial-gradient(1.5px 1.5px at 68% 14%,rgba(224,231,255,.9),transparent),
    radial-gradient(1.9px 1.9px at 34% 71%,rgba(255,255,255,.92),transparent),
    radial-gradient(1.4px 1.4px at 88% 62%,rgba(196,181,253,.85),transparent),
    radial-gradient(2.1px 2.1px at 52% 38%,rgba(255,246,224,.82),transparent),
    radial-gradient(1.6px 1.6px at 8% 82%,rgba(255,255,255,.85),transparent),
    radial-gradient(1.5px 1.5px at 76% 88%,rgba(147,197,253,.85),transparent),
    radial-gradient(1.3px 1.3px at 44% 8%,rgba(255,214,170,.78),transparent);
  background-size:740px 640px;
  animation:prj-cintila 6.1s ease-in-out infinite;}

/* CAMADA 2 — as médias, atrás. Outro ritmo e outra fase. */
.prj-estrelas::before{content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 22% 46%,rgba(255,255,255,.62),transparent),
    radial-gradient(1px 1px at 58% 66%,rgba(199,210,254,.58),transparent),
    radial-gradient(1.2px 1.2px at 84% 34%,rgba(255,255,255,.62),transparent),
    radial-gradient(1px 1px at 40% 90%,rgba(255,255,255,.52),transparent),
    radial-gradient(1px 1px at 92% 76%,rgba(165,243,252,.6),transparent),
    radial-gradient(1px 1px at 6% 58%,rgba(255,255,255,.52),transparent),
    radial-gradient(1.1px 1.1px at 66% 30%,rgba(255,236,200,.55),transparent);
  background-size:430px 380px;
  animation:prj-cintila 9.7s ease-in-out infinite reverse;}

/* CAMADA 3 — o pó de estrela, no fundo. Quase não pisca; ela dá densidade. */
.prj-estrelas::after{content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(.8px .8px at 30% 30%,rgba(255,255,255,.46),transparent),
    radial-gradient(.8px .8px at 72% 52%,rgba(255,255,255,.42),transparent),
    radial-gradient(.7px .7px at 16% 74%,rgba(224,231,255,.44),transparent),
    radial-gradient(.8px .8px at 62% 24%,rgba(255,255,255,.4),transparent),
    radial-gradient(.7px .7px at 48% 80%,rgba(255,255,255,.38),transparent),
    radial-gradient(.8px .8px at 96% 18%,rgba(255,255,255,.42),transparent),
    radial-gradient(.7px .7px at 8% 12%,rgba(199,210,254,.4),transparent),
    radial-gradient(.8px .8px at 38% 58%,rgba(255,255,255,.36),transparent);
  background-size:290px 250px;
  animation:prj-cintila 13.3s ease-in-out infinite;}

/* CAMADA 4 — o adensamento sobre o disco. Estrela se acumula onde a galáxia
   está; espalhá-las por igual é o que dava aspecto de chuvisco de televisão.
   A deriva lentíssima (três minutos por volta) tira a sensação de adesivo
   colado na tela sem que ninguém veja nada se mexer. */
.prj-estrelas2{opacity:.85;
  background-image:
    radial-gradient(1.2px 1.2px at 18% 34%,rgba(255,255,255,.9),transparent),
    radial-gradient(1px 1px at 54% 62%,rgba(224,231,255,.8),transparent),
    radial-gradient(1.4px 1.4px at 78% 26%,rgba(255,255,255,.85),transparent),
    radial-gradient(1px 1px at 36% 82%,rgba(255,236,200,.78),transparent),
    radial-gradient(.9px .9px at 66% 46%,rgba(255,255,255,.72),transparent),
    radial-gradient(1.1px 1.1px at 26% 58%,rgba(196,181,253,.78),transparent);
  background-size:196px 168px,196px 168px,196px 168px,
    154px 132px,154px 132px,154px 132px;
  -webkit-mask-image:radial-gradient(56% 22% at 64% 42%,#000 6%,rgba(0,0,0,.6) 40%,transparent 74%);
  mask-image:radial-gradient(56% 22% at 64% 42%,#000 6%,rgba(0,0,0,.6) 40%,transparent 74%);
  animation:prj-cintila 7.3s ease-in-out infinite,prj-deriva 180s linear infinite;}

/* ── AS ESTRELAS BRILHANTES ──────────────────────────────────────────────── */
/* Três, com as PONTAS de difração que uma estrela forte faz numa lente. É o
   detalhe que separa "pontinho branco" de "estrela": o cruzamento fino e
   comprido por cima do halo redondo. Cada uma respira no seu tempo. */
.prj-brilho{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;
  background:
    radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.25) 12%,transparent 34%),
    linear-gradient(90deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%),
    linear-gradient(0deg,transparent 42%,rgba(255,255,255,.42) 50%,transparent 58%);
  background-size:100% 100%,100% 1.6px,1.6px 100%;
  background-position:center,center,center;
  background-repeat:no-repeat;
  animation:prj-respira 5.4s ease-in-out infinite;}
.prj-brilho.b{left:22%;top:26%;transform:scale(.72);animation-duration:7.9s;
  animation-delay:-2.4s;}
.prj-brilho.c{left:83%;top:69%;transform:scale(.58);animation-duration:6.6s;
  animation-delay:-4.1s;}
.prj-brilho.a{left:47%;top:16%;transform:scale(.9);}

/* ── O METEORO ───────────────────────────────────────────────────────────── */
/* Um risco a cada dezoito segundos, e o segundo desencontrado do primeiro. É
   o detalhe que faz o céu parecer vivo em vez de impresso — e some depressa
   demais para roubar a atenção de quem está trabalhando. */
.prj-meteoro{position:absolute;top:-6%;left:-12%;width:240px;height:1.4px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  filter:blur(.4px);opacity:0;
  animation:prj-meteoro 18s linear infinite;}
.prj-meteoro.b{top:22%;width:170px;animation-duration:26s;animation-delay:-11s;
  opacity:0;}

@keyframes prj-cintila{0%,100%{opacity:.62;}50%{opacity:1;}}
@keyframes prj-respira{0%,100%{opacity:.35;}50%{opacity:.9;}}
@keyframes prj-deriva{
  0%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(-26px,14px,0);}
  100%{transform:translate3d(0,0,0);}}
/* O risco existe em 4% do ciclo: o resto do tempo o céu está parado. */
@keyframes prj-meteoro{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(14deg);}
  1%{opacity:0;}
  1.6%{opacity:.9;}
  4.6%{opacity:0;transform:translate3d(78vw,30vh,0) rotate(14deg);}
  100%{opacity:0;transform:translate3d(78vw,30vh,0) rotate(14deg);}}

/* ── O PALCO E O MUNDO ─────────────────────────────────────────────────────
   `.prj-palco` é a janela; `.prj-mundo` é o espaço infinito, que recebe UM
   transform. `transform-origin:0 0` é obrigatório: sem ele o `scale` gira em
   torno do centro e a conta da câmera deixa de bater com o que se vê. */
/* GRAB por padrão: arrastar o fundo move o canvas, e o cursor precisa
   prometer isso antes de a pessoa tentar. */
.prj-palco{position:absolute;inset:0;overflow:hidden;cursor:grab;
  touch-action:none;
  /* Arrastar o fundo move a câmera — e, sem isto, o navegador entende o mesmo
     gesto como "selecionar texto" e pinta de azul o vazio, a dica do rodapé e
     o texto dos nós no caminho. Relatado com print: "quando tento arrastar,
     também marca o texto". Vale para tudo dentro do palco; o campo de busca
     e o de renomear ficam de fora, logo abaixo. */
  user-select:none;-webkit-user-select:none;}
.prj-palco:active{cursor:grabbing;}
.prj-palco.mao{cursor:grab;}
.prj-palco.mao:active{cursor:grabbing;}
.prj-mundo{position:absolute;left:0;top:0;width:0;height:0;
  transform-origin:0 0;will-change:transform;}
.prj-linhas{position:absolute;left:-50000px;top:-50000px;
  width:100000px;height:100000px;overflow:visible;pointer-events:none;}
.prj-linhas path{pointer-events:stroke;}
.prj-nos{position:absolute;left:0;top:0;}

/* ── O NÓ ──────────────────────────────────────────────────────────────────
   Pequeno, horizontal, arredondado, pouco alto. Fundo escuro com um sopro da
   cor — nunca a cor sólida —, borda fina luminosa e um brilho externo muito
   contido. É o que a referência mostra e o que mantém o conjunto sofisticado
   com oito cores na tela ao mesmo tempo. */
/* Centralizar o conjunto ícone+texto: como o nó agora
   tem a largura do conteúdo, a sobra é pequena — mas quando o texto quebra em
   duas linhas, a segunda encostada à esquerda fica torta. */
.prj-no{position:absolute;left:0;top:0;display:flex;align-items:center;
  justify-content:center;gap:9px;
  padding:9px 15px;min-height:52px;border-radius:14px;cursor:grab;user-select:none;
  color:#fff;font-family:'Inter',sans-serif;font-size:.92rem;font-weight:500;
  letter-spacing:-.1px;line-height:1.35;
  /* QUASE PRETO POR DENTRO. A cor mora na borda e no brilho — diluí-la no
     fundo suja o preto e apaga o contorno, que é justamente o que acende o
     nó. O leve véu da cor (6%) existe só para o preto não ficar morto. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--luz) 6%,rgba(6,6,12,.86)),
      color-mix(in srgb,var(--luz) 3%,rgba(4,4,9,.9)));
  /* A galáxia atravessa o vidro: o nó fica POUSADO sobre o céu, e não colado
     por cima dele. */
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1.5px solid color-mix(in srgb,var(--luz) 88%,transparent);
  /* Dois halos: um curto e forte junto da borda, outro largo e fraco bem
     longe. É a DISTÂNCIA do segundo que faz o olho ler luz em vez de sombra
     colorida — um halo curto sozinho parece borrão. */
  box-shadow:0 0 0 1px rgba(0,0,0,.5),
             0 0 14px color-mix(in srgb,var(--luz) 34%,transparent),
             0 0 42px color-mix(in srgb,var(--luz) 16%,transparent),
             inset 0 0 22px color-mix(in srgb,var(--luz) 7%,transparent);
  transition:box-shadow .16s,border-color .16s,transform .05s linear;}
.prj-no:active{cursor:grabbing;}
.prj-no .prj-ico{color:var(--luz);flex-shrink:0;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--luz) 55%,transparent));}
/* Sem reticências: o nó cresce até 380px e, depois disso, quebra em mais
   linhas. Rótulo cortado não é rótulo — o canvas inteiro existe para se ler o
   que está escrito nos nós. A largura vem medida do JS, com esta mesma fonte. */
/* A letra acompanha a altura do nó (--esc), e não a largura: alargar para
   caber uma frase comprida não pode aumentar a fonte junto. */
.prj-no-txt{overflow-wrap:break-word;white-space:pre-wrap;text-align:center;
  font-size:calc(1em * var(--esc,1));}
/* O ESPIÃO DE MEDIDA. Ele existe para responder "quantos pixels este texto
   ocupa" antes de o nó ser desenhado, e por isso precisa repetir TODA
   propriedade que mexe na largura da linha — família, tamanho, PESO,
   espaçamento e entrelinha. Faltou o peso na primeira versão (500 no nó, 400
   aqui) e o nó saiu estreito: "Mais funcionalidades" quebrou em duas linhas
   dentro de um nó dimensionado para uma. */
.prj-medida{position:absolute;left:-9999px;top:-9999px;visibility:hidden;
  pointer-events:none;display:block;
  font-family:'Inter',sans-serif;font-size:.92rem;font-weight:500;
  letter-spacing:-.1px;line-height:1.35;
  white-space:pre-wrap;overflow-wrap:break-word;}

.prj-no:hover{border-color:color-mix(in srgb,var(--luz) 100%,transparent);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),
             0 0 18px color-mix(in srgb,var(--luz) 46%,transparent),
             0 0 54px color-mix(in srgb,var(--luz) 22%,transparent),
             inset 0 0 22px color-mix(in srgb,var(--luz) 9%,transparent);}
.prj-no.sel{border-color:var(--luz);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),
             0 0 22px color-mix(in srgb,var(--luz) 58%,transparent),
             0 0 66px color-mix(in srgb,var(--luz) 26%,transparent),
             0 0 0 3px color-mix(in srgb,var(--luz) 22%,transparent),
             inset 0 0 24px color-mix(in srgb,var(--luz) 11%,transparent);}
/* Encontrado pela busca: pulsa uma vez e para. Piscar sem fim vira ruído. */
.prj-no.achado{animation:prj-achado 1.4s ease-out;}
@keyframes prj-achado{0%,100%{box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 18px color-mix(in srgb,var(--luz) 22%,transparent);}
  30%{box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 44px var(--luz),0 0 0 6px color-mix(in srgb,var(--luz) 28%,transparent);}}

.prj-no-inp{background:rgba(0,0,0,.4);border:1px solid var(--luz);border-radius:7px;
  color:#fff;font-family:'Inter',sans-serif;font-size:.92rem;padding:3px 7px;
  outline:none;min-width:90px;max-width:260px;}

/* ── HANDLES ───────────────────────────────────────────────────────────────
   Discretos quando o nó está em repouso, visíveis ao passar o mouse ou com o
   nó selecionado — exatamente o comportamento pedido. A área de toque é maior
   que o desenho: um alvo de 8px é impossível de acertar com o dedo. */
.prj-h{position:absolute;width:9px;height:9px;border-radius:50%;
  background:#05050c;border:1.6px solid var(--luz);opacity:.34;
  box-shadow:0 0 7px color-mix(in srgb,var(--luz) 50%,transparent);
  transition:opacity .15s,transform .15s;cursor:crosshair;}
.prj-h::after{content:'';position:absolute;inset:-8px;}
.prj-no:hover .prj-h,.prj-no.sel .prj-h{opacity:1;}
.prj-h:hover{transform:scale(1.45);box-shadow:0 0 12px var(--luz);}
.prj-h-left{left:-5px;top:50%;margin-top:-4.5px;}
.prj-h-right{right:-5px;top:50%;margin-top:-4.5px;}
.prj-h-top{top:-5px;left:50%;margin-left:-4.5px;}
.prj-h-bottom{bottom:-5px;left:50%;margin-left:-4.5px;}

/* ── AS LINHAS ─────────────────────────────────────────────────────────────
   Finas, luminosas, anti-aliased. A animação é um tracejado que corre — luz
   percorrendo a linha, e NUNCA indicação de que algo está sendo processado:
   este painel não executa nada. */
.prj-liga{fill:none;stroke-width:1.9;opacity:.92;
  stroke-linecap:round;transition:opacity .16s,stroke-width .16s;
  /* O fio acende como o nó: o brilho é o que o liga visualmente às duas
     pontas. Sem ele, uma linha fina e opaca atravessa o desenho como risco
     de caneta. */
  filter:drop-shadow(0 0 4px currentColor);}
.prj-liga.viva{opacity:1;stroke-width:2.3;
  filter:drop-shadow(0 0 7px currentColor);}
.prj-fio-g:hover .prj-liga{opacity:1;stroke-width:2.6;}
.prj-liga.trac{stroke-dasharray:7 6;}
.prj-liga.anim{stroke-dasharray:5 9;animation:prj-fluxo 1.1s linear infinite;}
.prj-liga.trac.anim{stroke-dasharray:7 6;animation:prj-fluxo 1.6s linear infinite;}
.prj-liga.previa{opacity:.9;stroke-dasharray:4 5;}
@keyframes prj-fluxo{to{stroke-dashoffset:-28;}}

/* ── LAÇO DE SELEÇÃO ─────────────────────────────────────────────────────── */
.prj-laco{position:absolute;border:1px solid rgba(167,139,250,.7);
  background:rgba(124,58,237,.11);border-radius:5px;pointer-events:none;z-index:3;}

/* ══════════════════════════════════════════════════════════════════════════
   CONTROLES FLUTUANTES
   ══════════════════════════════════════════════════════════════════════════
   Elementos soltos por cima do canvas, sem barra sólida atravessando a tela.
   ══════════════════════════════════════════════════════════════════════════ */
.prj-topo{position:absolute;top:14px;left:18px;right:18px;z-index:6;
  display:flex;align-items:center;gap:12px;flex-wrap:nowrap;pointer-events:none;}
.prj-topo > *{pointer-events:auto;}

.prj-marca{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.prj-marca .prj-ico{color:#c4b5fd;}
.prj-marca h1{margin:0;font-size:1.5rem;font-weight:700;color:#fff;
  letter-spacing:-.6px;line-height:1.1;}
.prj-marca p{margin:1px 0 0;font-size:.74rem;color:#8b7fd4;letter-spacing:.1px;}

.prj-busca{display:flex;align-items:center;gap:10px;flex:1;max-width:420px;
  height:44px;padding:0 14px;border-radius:12px;
  background:rgba(14,16,30,.72);border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .16s;}
.prj-busca:focus-within{border-color:rgba(139,124,246,.5);}
.prj-busca .prj-ico{color:rgba(232,232,240,.35);flex-shrink:0;}
.prj-busca input{flex:1;min-width:0;background:none;border:none;outline:none;
  color:#e8e8f0;font-family:'Inter',sans-serif;font-size:.85rem;}
.prj-busca input::placeholder{color:rgba(232,232,240,.3);}
.prj-busca kbd{font-family:'Inter',sans-serif;font-size:.66rem;padding:3px 7px;
  border-radius:6px;background:rgba(255,255,255,.06);color:rgba(232,232,240,.42);
  border:1px solid rgba(255,255,255,.06);}

.prj-busca-pop{position:absolute;top:66px;left:calc(18px + 260px);z-index:8;
  min-width:280px;max-width:420px;max-height:340px;overflow-y:auto;
  padding:6px;border-radius:12px;background:rgba(12,14,26,.96);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.prj-busca-pop button{display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 11px;border:none;border-radius:8px;background:none;cursor:pointer;
  color:rgba(232,232,240,.82);font-family:'Inter',sans-serif;font-size:.83rem;
  text-align:left;}
.prj-busca-pop button:hover{background:rgba(124,58,237,.18);color:#fff;}
.prj-busca-pop i{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

.prj-ws{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;
  border-radius:12px;cursor:pointer;flex-shrink:0;
  background:rgba(14,16,30,.72);border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#e8e8f0;font-family:'Inter',sans-serif;transition:border-color .16s;}
.prj-ws:hover{border-color:rgba(139,124,246,.42);}
.prj-ws .prj-ico:first-child{color:#a78bfa;}
.prj-ws span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;}
.prj-ws em{font-style:normal;font-size:.63rem;color:rgba(232,232,240,.38);}
.prj-ws b{font-size:.82rem;font-weight:500;}

.prj-quad{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;cursor:pointer;flex-shrink:0;
  background:rgba(14,16,30,.72);border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:rgba(232,232,240,.6);transition:color .16s,border-color .16s,background .16s;}
.prj-quad:hover{color:#fff;border-color:rgba(139,124,246,.42);
  background:rgba(124,58,237,.16);}
.prj-quad.on{color:#fff;background:rgba(124,58,237,.24);
  border-color:rgba(139,124,246,.5);}

/* O botão principal: violeta cheio, o único elemento saturado da tela. */
.prj-novo{display:flex;flex-shrink:0;}
.prj-novo-b,.prj-novo-s{border:none;cursor:pointer;height:44px;
  background:linear-gradient(180deg,#7c5cf5,#6d3ff0);color:#fff;
  font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;
  box-shadow:0 6px 22px rgba(109,63,240,.42);transition:filter .16s;}
.prj-novo-b{display:inline-flex;align-items:center;gap:8px;padding:0 18px;
  border-radius:12px 0 0 12px;}
.prj-novo-s{display:inline-flex;align-items:center;padding:0 10px;
  border-radius:0 12px 12px 0;border-left:1px solid rgba(255,255,255,.16);}
.prj-novo-b:hover,.prj-novo-s:hover{filter:brightness(1.1);}

.prj-ferr{display:flex;gap:6px;flex-shrink:0;padding:4px;border-radius:14px;
  background:rgba(14,16,30,.6);border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.prj-ferr .prj-quad{width:38px;height:38px;border-radius:10px;
  background:none;border-color:transparent;backdrop-filter:none;}

/* ── Barra vertical direita ────────────────────────────────────────────── */
.prj-vert{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:6;
  display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:14px;
  background:rgba(12,14,26,.66);border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.prj-vert-b{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;border:none;background:none;
  cursor:pointer;color:rgba(232,232,240,.42);transition:color .15s,background .15s;}
.prj-vert-b:hover{color:#c4b5fd;background:rgba(124,58,237,.16);}

/* ── Minimapa ──────────────────────────────────────────────────────────── */
.prj-mini{position:absolute;left:18px;bottom:18px;z-index:6;
  width:230px;height:150px;border-radius:14px;overflow:hidden;
  background:rgba(10,11,22,.78);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 40px rgba(0,0,0,.5);}
.prj-mini canvas{width:100%;height:100%;display:block;cursor:pointer;}
.prj-mini-cfg{position:absolute;left:8px;bottom:8px;width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:8px;
  background:rgba(20,22,38,.9);border:1px solid rgba(255,255,255,.08);
  color:rgba(232,232,240,.5);cursor:pointer;}
.prj-mini-cfg:hover{color:#c4b5fd;}

/* ── Controles inferiores ──────────────────────────────────────────────── */
.prj-ctrl{position:absolute;right:18px;bottom:18px;z-index:6;display:flex;gap:10px;}
.prj-ctrl-g{display:flex;align-items:center;gap:2px;padding:5px;border-radius:13px;
  background:rgba(12,14,26,.74);border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.prj-ctrl-g button{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;border-radius:9px;border:none;background:none;
  cursor:pointer;color:rgba(232,232,240,.55);font-size:1rem;
  font-family:'Inter',sans-serif;transition:color .15s,background .15s;}
.prj-ctrl-g button:hover{color:#fff;background:rgba(124,58,237,.2);}
.prj-zoom{min-width:52px;text-align:center;font-size:.78rem;
  color:rgba(232,232,240,.66);font-variant-numeric:tabular-nums;}

/* ── Lema e vazio ──────────────────────────────────────────────────────────
   O lema perde destaque quando o canvas enche: é boas-vindas, não marca
   d'água. */
.prj-lema{position:absolute;left:0;right:0;bottom:52px;text-align:center;
  pointer-events:none;z-index:2;transition:opacity .5s;}
.prj-lema.apaga{opacity:.16;}
.prj-lema p{margin:0;font-size:1.32rem;color:rgba(240,240,248,.92);
  letter-spacing:-.3px;}
.prj-lema span{display:block;margin-top:5px;font-size:.86rem;
  color:rgba(232,232,240,.42);}
.prj-lema i{display:block;margin-top:10px;font-style:normal;font-size:1.5rem;
  color:rgba(139,124,246,.5);}

.prj-vazio{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  z-index:4;display:flex;flex-direction:column;align-items:center;gap:14px;}
.prj-vazio b{font-size:1.05rem;color:rgba(240,240,248,.8);font-weight:500;}
.prj-vazio .prj-novo-b{border-radius:12px;}

/* ── Menu de contexto ──────────────────────────────────────────────────── */
.prj-menu{position:fixed;z-index:60;min-width:186px;padding:5px;
  border-radius:12px;background:rgba(12,14,26,.97);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 60px rgba(0,0,0,.65);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.prj-menu button{display:block;width:100%;padding:8px 11px;border:none;
  border-radius:8px;background:none;cursor:pointer;text-align:left;
  color:rgba(232,232,240,.82);font-family:'Inter',sans-serif;font-size:.82rem;}
.prj-menu button:hover{background:rgba(124,58,237,.2);color:#fff;}
.prj-menu button.perigo{color:#fca5a5;}
.prj-menu button.perigo:hover{background:rgba(239,68,68,.16);color:#fecaca;}
.prj-menu-sep{display:block;height:1px;margin:4px 8px;
  background:rgba(255,255,255,.08);}

/* ══════════════════════════════════════════════════════════════════════════
   AS QUATRO FAIXAS (CHECKLIST 4.1)
   ══════════════════════════════════════════════════════════════════════════
   O canvas não tem `max-width` em faixa nenhuma: ele É a tela. O que muda é
   quantos controles cabem em volta dele.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .prj-busca{max-width:260px;}
  .prj-ws span em{display:none;}
}
@media (max-width:900px){
  .prj-topo{flex-wrap:wrap;gap:9px;}
  .prj-busca{order:5;max-width:none;flex:1 1 100%;}
  .prj-busca-pop{left:18px;right:18px;top:118px;max-width:none;}
  .prj-marca h1{font-size:1.25rem;}
}
@media (max-width:768px){
  #prj-view{height:calc(100dvh - 52px);}
  /* Alvo de toque nunca abaixo de 40px. */
  .prj-quad,.prj-novo-b,.prj-novo-s,.prj-ws,.prj-busca{height:42px;}
  .prj-vert{right:10px;padding:4px;}
  .prj-vert-b{width:40px;height:40px;}
  .prj-mini{width:150px;height:104px;left:10px;bottom:10px;}
  .prj-ctrl{right:10px;bottom:10px;gap:6px;}
  .prj-ctrl-g button{min-width:40px;height:40px;}
  .prj-lema p{font-size:1.05rem;}
  .prj-marca p{display:none;}
  /* No dedo, o handle precisa ser alcançável. */
  .prj-h{width:12px;height:12px;opacity:.55;}
}

/* Regra 13: sem movimento, e nada preso num estado intermediário. O tracejado
   para de correr, as estrelas param de cintilar, e tudo continua legível. */
@media (prefers-reduced-motion:reduce){
  /* Regra 13: sem piscar, mas as estrelas continuam la — a opacidade parada
     e a do estado normal, e nao a de um quadro qualquer da animacao. */
  .prj-estrelas,.prj-estrelas::before,.prj-estrelas::after,
  .prj-estrelas2,.prj-brilho{animation:none;}
  /* O meteoro não tem estado parado que faça sentido: um risco imóvel no meio
     do céu é um artefato. Ele simplesmente não existe aqui. */
  .prj-meteoro{display:none;}
  .prj-liga.anim,.prj-liga.trac.anim{animation:none;}
  .prj-no.achado{animation:none;outline:2px solid var(--luz);outline-offset:3px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   `[hidden]` PRECISA VENCER O `display` DA REGRA
   ══════════════════════════════════════════════════════════════════════════
   O atributo `hidden` vira `display:none` pela folha do navegador — que perde
   para QUALQUER regra de autor com `display`. `.prj-vazio` tem `display:flex`,
   então esconder por `hidden` não escondia nada: "Crie seu primeiro nó"
   continuava no meio da tela com um nó já criado.

   É invisível no código (`el.hidden = true` parece bastar) e só aparece na
   tela. Vale para todo elemento desta folha que alterne por `hidden`.
   ══════════════════════════════════════════════════════════════════════════ */
.prj-vazio[hidden],
.prj-busca-pop[hidden],
.prj-laco[hidden]{display:none !important;}

/* ── A porta de troca de painel ────────────────────────────────────────────
   Com NOME, e não um ícone de 38px no meio das ferramentas. Trocar de painel
   é raro e precisa ser achado; ícone sozinho serve para o que se usa todo
   minuto. Indigo apagado, para ler como navegação e não competir com o
   "Novo nó", que é a ação da tela. */
.prj-modelo{display:inline-flex;align-items:center;gap:8px;height:44px;
  padding:0 14px;border-radius:12px;cursor:pointer;flex-shrink:0;
  background:rgba(124,58,237,.14);border:1px solid rgba(139,124,246,.34);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#c4b5fd;font-family:'Inter',sans-serif;font-size:.84rem;font-weight:500;
  white-space:nowrap;transition:background .16s,border-color .16s,color .16s;}
.prj-modelo:hover{background:rgba(124,58,237,.24);border-color:rgba(139,124,246,.6);
  color:#e9d5ff;}
@media (max-width:900px){.prj-modelo span{display:none;}.prj-modelo{padding:0 12px;}}

/* O texto que a pessoa ESTÁ editando volta a ser selecionável: sem isto não
   se consegue nem marcar uma palavra dentro do campo. */
.prj-no-inp,.prj-nome-inp{user-select:text;-webkit-user-select:text;}

/* ── O nome do projeto ─────────────────────────────────────────────────────
   Era um enfeite: mostrava "Meu Espaço" fixo e o clique caía numa função que
   não existe. Agora é o nome do projeto, gravado no quadro e renomeável no
   próprio lugar — clique, digite, Enter. */
.prj-nome-inp{height:22px;padding:0 2px;margin:1px 0 0;width:11ch;
  background:rgba(255,255,255,.06);border:1px solid rgba(139,124,246,.55);
  border-radius:6px;outline:none;
  color:#fff;font-family:'Inter',sans-serif;font-size:.86rem;font-weight:600;}
.prj-ws b{max-width:15ch;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}

/* ── APAGAR UM FIO ─────────────────────────────────────────────────────────
   O traço tem 1,7px, e num canvas a 40% de zoom é menos que isso na tela:
   acertá-lo com o ponteiro para chegar ao menu do botão direito é pontaria
   que ninguém deve ter de ter. O alvo é um segundo caminho, invisível e
   gordo, por cima do mesmo desenho — e o gesto principal é o X no meio do
   fio, no lugar onde todo editor de nós o põe. */
.prj-linhas path.prj-fio-alvo{fill:none;stroke:transparent;stroke-width:22;
  pointer-events:stroke;cursor:pointer;}
/* `.prj-linhas path` também pede o ponteiro, e vale (0,1,1) contra (0,1,0)
   de `.prj-liga` — vinha ganhando por especificidade, estivesse onde
   estivesse no arquivo. Medido no navegador: `pointerEvents` computado dava
   "stroke" com esta regra já escrita. O seletor precisa empatar o peso e
   ganhar na ordem. */
.prj-linhas path.prj-liga{pointer-events:none;}

.prj-fio-x{opacity:0;pointer-events:none;transition:opacity .13s ease;}
/* `.viva` = uma das pontas está selecionada. É o caminho de quem usa toque,
   onde "passar por cima" não existe: toca o nó, toca o X. */
.prj-fio-g:hover .prj-fio-x,
.prj-fio-g.viva .prj-fio-x{opacity:1;}
.prj-fio-g:hover .prj-fio-x circle,
.prj-fio-g.viva .prj-fio-x circle{pointer-events:all;}
.prj-fio-x circle{fill:#141021;stroke:rgba(255,255,255,.3);stroke-width:1.2;
  cursor:pointer;transition:fill .13s,stroke .13s;}
/* O X em si nunca recebe ponteiro: quem recebe é o círculo atrás dele, senão
   o buraco entre os dois traços vira um furo no meio do botão. */
.prj-linhas .prj-fio-x path{fill:none;stroke:#ff8fa3;stroke-width:1.9;
  stroke-linecap:round;pointer-events:none;}
.prj-fio-x:hover circle{fill:#3d1526;stroke:#ff6b81;}

@media (prefers-reduced-motion:reduce){
  /* Regra 13: sem transição, mas o estado final é o mesmo — o botão aparece. */
  .prj-fio-x{transition:none;}
}

/* ── A PALETA DE ÍCONES E CORES ────────────────────────────────────────────
   O menu listava os apelidos internos, um por linha: "faisca", "elo", "ws".
   Isso é o nome da variável, não o desenho — ninguém escolhe um ícone lendo o
   apelido dele. Agora é grade, com o desenho no tamanho em que ele vai
   aparecer e o nome no title. */
.prj-paleta{width:296px;padding:11px 12px 12px;}
.prj-paleta-t{display:block;margin:0 2px 9px;color:#8b8ba7;font-size:.7rem;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;font-style:normal;}
.prj-paleta-g{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.prj-paleta-g button{display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1;padding:0;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.035);border:1px solid transparent;
  color:#c9c9de;transition:background .13s,color .13s,border-color .13s;}
.prj-paleta-g button:hover{background:rgba(124,58,237,.26);color:#fff;
  border-color:rgba(139,124,246,.5);}
/* O atual fica MARCADO: a paleta também responde "qual está valendo agora", e
   sem isso trocar de ícone vira tentativa e erro. */
.prj-paleta-g button.on{background:rgba(124,58,237,.34);color:#fff;
  border-color:#8b7cf6;box-shadow:0 0 0 1px rgba(139,124,246,.45);}
.prj-paleta-g .prj-nada{color:#7a7a92;}
.prj-amostra{display:block;width:17px;height:17px;border-radius:50%;
  background:var(--luz);
  box-shadow:0 0 9px color-mix(in srgb,var(--luz) 55%,transparent);}
@media (max-width:560px){
  .prj-paleta{width:min(296px,92vw);}
  .prj-paleta-g{grid-template-columns:repeat(6,1fr);}
}

/* ── LIMPAR O CANVAS ───────────────────────────────────────────────────────
   O botão fica na barra de ferramentas, em vermelho apagado: destrutivo tem
   de se anunciar antes do clique, e não só na confirmação. */
.prj-quad-perigo{color:#f0a0ae;}
.prj-quad-perigo:hover{background:rgba(239,68,68,.18);border-color:rgba(248,113,113,.5);
  color:#fecaca;}

.prj-modal-bg{position:fixed;inset:0;z-index:90;display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(4,4,12,.72);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);}
.prj-modal{width:min(430px,100%);padding:22px;border-radius:18px;
  background:linear-gradient(180deg,#15142a,#0e0d1c);
  border:1px solid rgba(139,124,246,.26);
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  font-family:'Inter',sans-serif;color:#e9e9f4;}
.prj-modal h2{margin:0 0 7px;font-size:1.06rem;font-weight:600;letter-spacing:-.2px;}
.prj-modal p{margin:0 0 14px;color:#9d9db8;font-size:.86rem;line-height:1.5;}
.prj-modal-ok{display:flex;gap:9px;padding:11px 12px;margin-bottom:15px;
  border-radius:11px;background:rgba(52,211,153,.09);
  border:1px solid rgba(52,211,153,.22);
  color:#a7f3d0;font-size:.8rem;line-height:1.45;}
.prj-modal-ok .prj-ico{flex-shrink:0;margin-top:1px;}
.prj-modal-lab{display:block;margin-bottom:16px;color:#8b8ba7;font-size:.74rem;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
.prj-modal-lab input{display:block;width:100%;margin-top:7px;height:40px;
  padding:0 12px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:500;
  letter-spacing:.04em;text-transform:none;outline:none;}
.prj-modal-lab input:focus{border-color:#8b7cf6;background:rgba(255,255,255,.08);}
.prj-modal-btns{display:flex;gap:9px;justify-content:flex-end;}
.prj-modal-btns button{height:40px;padding:0 16px;border-radius:10px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.85rem;font-weight:500;
  border:1px solid transparent;transition:background .14s,border-color .14s,color .14s;}
.prj-modal-cancel{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);
  color:#c9c9de;}
.prj-modal-cancel:hover{background:rgba(255,255,255,.11);color:#fff;}
.prj-modal-go{background:#b91c3c;color:#fff;}
.prj-modal-go:hover:not(:disabled){background:#dc2648;}
/* Desligado de verdade: sem cursor de clique e sem realce no hover, senão o
   botão continua convidando o dedo que a trava existe para segurar. */
.prj-modal-go:disabled{background:rgba(185,28,60,.3);color:rgba(255,255,255,.45);
  cursor:not-allowed;}

/* ── A ALÇA DE TAMANHO ─────────────────────────────────────────────────────
   No canto de baixo à direita, onde todo editor a põe. Só aparece com o
   ponteiro em cima ou com o nó selecionado — num canvas com cinquenta nós,
   cinquenta alças visíveis são cinquenta ruídos. */
.prj-tam{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;
  opacity:0;cursor:nwse-resize;transition:opacity .15s;
  background:linear-gradient(135deg,transparent 46%,var(--luz) 46%,var(--luz) 60%,
    transparent 60%,transparent 72%,var(--luz) 72%,var(--luz) 86%,transparent 86%);}
.prj-no:hover .prj-tam,.prj-no.sel .prj-tam{opacity:.85;}
.prj-tam:hover{opacity:1;filter:drop-shadow(0 0 5px var(--luz));}
/* Enquanto o tamanho é manual, o nó não encolhe de volta ao texto — e o
   alinhamento vertical passa a importar, porque agora existe sobra. */
.prj-no.manual{align-items:center;}