*{box-sizing:border-box}
:root{
  /* ==========================================================
     DS1 — VISUAL FOUNDATION (Semantic Brain Design System)
     Fonte única de verdade para cor, tipografia, espaçamento,
     radius, sombra, glow, motion, z-index e estados. Consulte
     VISUAL_SYSTEM.md para a definição oficial de cada token.
     Nenhum valor abaixo deve ser duplicado noutro selector —
     qualquer selector que precise de uma destas propriedades
     deve referenciar o token, nunca repetir o valor literal.
     ========================================================== */

  /* Backgrounds / superfícies */
  --sb-bg:#05070d;
  --sb-bg-canvas:#07111c;
  --sb-surface-1:#0b1420;
  --sb-surface-2:#101b28;
  --sb-surface-3:rgba(22,35,51,.3125);
  --sb-border:rgba(148,163,184,.14);
  --sb-border-strong:rgba(148,163,184,.28);

  /* Marca */
  --sb-primary:#7C5CFF;
  --sb-primary-strong:#8F72FF;
  --sb-secondary:#4D9CFF;
  --sb-accent:#FF4D8D;
  --sb-accent-cool:#34D9C4;

  /* Sistema */
  --sb-success:#34D399;
  --sb-warning:#F5B94D;
  --sb-error:#FB7185;

  /* Texto */
  --sb-text:#F2F5FA;
  --sb-text-secondary:#AEBACA;
  --sb-text-muted:#8F9DB1;
  --sb-text-disabled:#5B6576;

  /* Semântica de arestas (edges) */
  --sb-edge-equivalence:#4D9CFF;
  --sb-edge-association:#FF4D8D;
  --sb-edge-context:#34D399;
  --sb-edge-contrast:#F5B94D;
  --sb-edge-membership:rgba(148,163,184,.5);

  /* Tipografia */
  --sb-font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sb-text-2xs:10px;
  --sb-text-xs:11px;
  --sb-text-sm:12px;
  --sb-text-base:14px;
  --sb-text-md:16px;
  --sb-text-lg:20px;
  --sb-text-xl:24px;
  --sb-text-2xl:28px;
  --sb-weight-regular:400;
  --sb-weight-semibold:600;
  --sb-weight-bold:700;

  /* Espaçamento (base 4px) */
  --sb-space-1:4px;
  --sb-space-2:8px;
  --sb-space-3:12px;
  --sb-space-4:16px;
  --sb-space-5:24px;
  --sb-space-6:32px;
  --sb-space-7:48px;
  --sb-space-8:64px;

  /* Radius */
  --sb-radius-xs:6px;
  --sb-radius-sm:8px;
  --sb-radius-md:12px;
  --sb-radius-lg:16px;
  --sb-radius-pill:999px;
  --sb-radius-circle:50%;

  /* Sombras */
  --sb-shadow-0:none;
  --sb-shadow-1:0 10px 30px rgba(0,0,0,.2);
  --sb-shadow-2:0 18px 48px rgba(0,0,0,.38);
  --sb-shadow-3:0 22px 65px rgba(0,0,0,.45);

  /* Glow (receita: núcleo sólido + halo color-mix, nunca mais de 2 camadas) */
  --sb-glow-primary:0 0 18px color-mix(in srgb, var(--sb-primary) 45%, transparent);
  --sb-glow-success:0 0 18px color-mix(in srgb, var(--sb-success) 45%, transparent);
  --sb-glow-warning:0 0 18px color-mix(in srgb, var(--sb-warning) 45%, transparent);
  --sb-glow-secondary:0 0 18px color-mix(in srgb, var(--sb-secondary) 45%, transparent);
  --sb-glow-error:0 0 18px color-mix(in srgb, var(--sb-error) 45%, transparent);
  --sb-glow-accent-cool:0 0 18px color-mix(in srgb, var(--sb-accent-cool) 45%, transparent);

  /* Motion */
  --sb-ease-standard:ease;
  --sb-ease-emphasis:cubic-bezier(.16,1,.3,1);
  --sb-ease-cinematic:cubic-bezier(.2,.8,.2,1);
  --sb-duration-fast:150ms;
  --sb-duration-base:220ms;
  --sb-duration-slow:320ms;
  --sb-duration-cinematic:340ms;
  --sb-duration-loop:1200ms;
  --sb-duration-cosmic:6400ms;

  /* Z-index (para novos componentes; overlays legados mantêm a sua
     própria escala — ver ARCHITECTURE_DECISION.md) */
  --sb-z-base:0;
  --sb-z-raised:10;
  --sb-z-sticky:20;
  --sb-z-dropdown:30;
  --sb-z-overlay:40;
  --sb-z-modal:50;
  --sb-z-tooltip:60;

  /* Opacidade */
  --sb-opacity-disabled:.4;
  --sb-opacity-loading:.6;

  /* Overlay / backdrop */
  --sb-overlay-bg:rgba(5,7,13,.72);

  /* Focus ring */
  --sb-focus-ring:0 0 0 3px color-mix(in srgb, var(--sb-primary) 20%, transparent);

  /* ==========================================================
     Variáveis legadas — mantidas por compatibilidade (nomes
     públicos inalterados; ver COMPONENT_LIBRARY.md/ARCHITECTURE
     _DECISION.md). Os seus VALORES passam a apontar para os
     tokens --sb-* acima, para que todo o CSS que já as usa
     herde automaticamente a nova linguagem visual sem precisar
     de ser reescrito selector a selector.
     ========================================================== */
  --sidebar-width:280px;
  --background:var(--sb-bg);
  --sidebar:var(--sb-surface-1);
  --text:var(--sb-text);
  --muted:var(--sb-text-muted);
  --border:var(--sb-border);
  --hover:color-mix(in srgb, var(--sb-primary) 10%, transparent);
  --selected:color-mix(in srgb, var(--sb-primary) 18%, transparent);
  --purple:var(--sb-primary);
  --blue:var(--sb-secondary);
  --danger:var(--sb-error);
}
html,body{width:100%;height:100%}
body{
  margin:0;
  overflow:hidden;
  font-family:var(--sb-font-family);
  color:var(--text);
  background:var(--background);
}
button,input,textarea{font:inherit}

/* ==========================================================
   DS4/DS5/DS6 — Loading States (COMPONENT_LIBRARY.md §29)
   Receita técnica de VISUAL_SYSTEM.md §13.5, formalizada aqui como
   classes utilitárias reutilizáveis por qualquer componente (Skeleton
   para conteúdo de forma previsível — linha/cartão/parágrafo — Spinner
   para uma ação assíncrona sem forma final). Nenhum componente real
   despoleta atualmente estas classes: não existe hoje nenhum fluxo
   assíncrono de carregamento de dados na aplicação (os dados vêm do
   armazenamento local, praticamente instantâneos) nem um estado
   "loading" gerido por JS para Sidebar/Cartões/Canvas. Adicionar esse
   despoletar (decidir quando cada componente entra/sai de loading)
   seria uma alteração de comportamento, fora do âmbito desta fase —
   estas classes ficam disponíveis, prontas a usar, para quando essa
   necessidade real existir. Ver ARCHITECTURE_DECISION.md. */
.sb-skeleton{
  position:relative;
  overflow:hidden;
  background:var(--sb-surface-1);
  background-image:linear-gradient(90deg,var(--sb-surface-1) 0%,var(--sb-surface-2) 50%,var(--sb-surface-1) 100%);
  background-size:200% 100%;
  animation:sbSkeletonShimmer var(--sb-duration-loop) linear infinite;
  border-radius:inherit;
}
.sb-skeleton-line{
  height:12px;
  margin:6px 0;
  border-radius:var(--sb-radius-xs);
}
.sb-skeleton-line + .sb-skeleton-line{ width:78%; }
.sb-spinner{
  display:inline-block;
  width:18px;
  height:18px;
  border:2px solid color-mix(in srgb, var(--sb-primary) 22%, transparent);
  border-top-color:var(--sb-primary);
  border-radius:var(--sb-radius-circle);
  animation:sbSpinnerRotate var(--sb-duration-loop) linear infinite;
}
@keyframes sbSkeletonShimmer{
  from{ background-position:200% 0; }
  to{ background-position:-200% 0; }
}
@keyframes sbSpinnerRotate{
  to{ transform:rotate(360deg); }
}
@keyframes sbSkeletonPulse{
  0%,100%{ opacity:var(--sb-opacity-loading); }
  50%{ opacity:.85; }
}

.app{display:flex;width:100vw;height:100vh}
.workspace{
  position:relative;
  display:flex;
  flex:1;
  min-width:0;
  height:100vh;
  overflow:hidden;
  background:var(--sb-bg-canvas);
}

.editor-workspace{
  position:relative;
  flex:1;
  min-width:0;
  height:100%;
  overflow:hidden;
  background:var(--sb-bg-canvas);
}

.editor-placeholder{
  position:absolute;
  top:50%;
  left:50%;
  width:min(460px,80%);
  color:var(--muted);
  text-align:center;
  transform:translate(-50%,-50%);
}

.editor-placeholder-icon{
  margin-bottom:18px;
  color:var(--sb-primary);
  font-size:42px;
  text-shadow:
    0 0 18px color-mix(in srgb, var(--sb-primary) 80%, transparent),
    0 0 40px color-mix(in srgb, var(--sb-secondary) 45%, transparent);
}

.editor-placeholder h2{
  margin:0 0 8px;
  color:var(--text);
  font-size:24px;
}

.editor-placeholder p{
  margin:0;
  font-size:14px;
}




.sidebar{
  position:relative;
  z-index:10;
  width:var(--sidebar-width);
  min-width:var(--sidebar-width);
  padding:22px 16px;
  background:var(--sidebar);
  border-right:1px solid var(--border);
  overflow-y:auto;
}
.sidebar-header{padding:0 8px 20px}
.sidebar-header h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.3px}
.sidebar-header p{margin:5px 0 0;color:var(--muted);font-size:12px}
.section-title{
  margin:10px 8px 8px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:1.1px;
  text-transform:uppercase;
}
.galaxy-list{
  min-height:calc(100vh - 120px);
  padding:2px 0 24px;
  overflow-x:auto;
}

.galaxy-item,
.note-item{
  position:relative;

  display:flex;
  align-items:center;

  min-width:max-content;
  min-height:34px;

  margin:0;
  padding:0 8px 0 0;

  border:1px solid transparent;
  border-radius:var(--sb-radius-xs);

  color:var(--sb-text);
  background:transparent;

  cursor:pointer;
  user-select:none;

  transition:
    background var(--sb-duration-fast) var(--sb-ease-standard),
    border-color var(--sb-duration-fast) var(--sb-ease-standard),
    opacity var(--sb-duration-fast) var(--sb-ease-standard),
    transform var(--sb-duration-fast) var(--sb-ease-standard);
}


.galaxy-item:hover,
.note-item:hover{
  background:var(--hover);
}

.galaxy-item.selected,
.note-item.selected{
  background:var(--selected);
  border-color:color-mix(in srgb, var(--sb-primary) 32%, transparent);
}


.folder-arrow,
.file-arrow-spacer{
  position:relative;
  z-index:5;

  width:20px;
  min-width:20px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 20px;

  color:var(--sb-text);

  font-size:11px;
  line-height:1;
}


.folder-icon,
.note-icon{
  position:relative;
  z-index:5;

  width:20px;
  min-width:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 20px;

  font-size:15px;
  line-height:1;
}


.folder-name,
.note-name{
  position:relative;
  z-index:5;

  flex:1;
  min-width:0;

  margin-left:5px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--sb-text);

  font-size:var(--sb-text-sm);
  font-weight:var(--sb-weight-semibold);
}



.inline-name-input,.folder-input{
  width:100%;
  padding:3px 5px;
  color:var(--sb-text);
  background:rgba(0,0,0,.22);
  border:1px solid var(--sb-primary);
  border-radius:var(--sb-radius-xs);
  outline:none;
  font-size:var(--sb-text-base);
}
.brain-window{
  width:100vw;
  height:100vh;
  margin:0;
  overflow:hidden;
  background:#010208;
}

.brain-window #universe{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
}
.semantic-brain{
  position:relative;
  flex:1;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 40%,rgba(38,55,110,.32) 0%,rgba(8,12,30,.85) 38%,#010208 78%);
}
.universe::before,.universe::after{
  position:absolute;
  inset:0;
  content:"";
  pointer-events:none;
}
.universe::before{
  opacity:.65;
  background-image:
    radial-gradient(circle,white 0 1px,transparent 1.4px),
    radial-gradient(circle,#8bb8ff 0 1px,transparent 1.5px);
  background-position:0 0,55px 70px;
  background-size:95px 95px,135px 135px;
}
.universe::after{
  opacity:.25;
  background:radial-gradient(ellipse at 65% 45%,rgba(124,58,237,.22),transparent 40%);
}
.empty-state{
  position:absolute;
  z-index:2;
  top:50%;
  left:50%;
  width:min(520px,80%);
  text-align:center;
  transform:translate(-50%,-50%);
}
.empty-state h2{margin:0 0 10px;font-size:clamp(28px,4vw,44px);letter-spacing:-1.5px}
.empty-state p{margin:0;color:var(--muted);font-size:15px}
.empty-star{
  width:9px;height:9px;margin:0 auto 25px;background:white;border-radius:50%;
  box-shadow:0 0 12px white,0 0 32px #60a5fa,0 0 65px #8b5cf6;
  animation:emptyPulse 2.4s ease-in-out infinite;
}

.galaxy-visual,.mini-galaxy{
  position:absolute;
  z-index:3;
  border:0;
  color:white;
  background:transparent;
  cursor:pointer;
  animation:galaxyBirth 700ms cubic-bezier(.2,.9,.25,1);
}


.galaxy-root{

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    transition:
        transform .35s,
        left .35s,
        top .35s;

}

.galaxy-child{

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    transition:
        transform .35s,
        left .35s,
        top .35s;

        filter:
    drop-shadow(
        0 0 25px
        rgba(124,58,237,.45)
    );
}

.mini-galaxy{

    position:absolute;

    width:120px;

    height:120px;

    transition:
        transform .35s,
        left .35s,
        top .35s;

      filter:
    drop-shadow(
        0 0 12px
        rgba(96,165,250,.35)
    );

}

.mini-galaxy{

    width:170px;
    height:170px;

    transition:
        transform .35s,
        left .35s,
        top .35s;

}

.galaxy-core,.mini-core{
  position:absolute;
  top:50%;
  left:50%;
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-18deg);
  background:radial-gradient(ellipse at center,#fff 0%,#bfdbfe 7%,rgba(139,92,246,.8) 25%,rgba(59,130,246,.25) 48%,transparent 72%);
  box-shadow:0 0 25px rgba(167,139,250,.75),0 0 70px rgba(59,130,246,.3);
  transition:transform 300ms ease,filter 300ms ease;
}
.galaxy-core{width:145px;height:70px}
.mini-core{width:105px;height:52px}
.galaxy-visual:hover .galaxy-core,.mini-galaxy:hover .mini-core{
  filter:brightness(1.25);
  transform:translate(-50%,-50%) rotate(-14deg) scale(1.08);
}
.galaxy-label,.mini-name{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
  text-shadow:0 2px 10px black;
}
.galaxy-label{top:calc(50% + 69px);max-width:190px;font-size:14px}
.mini-name{top:calc(50% + 56px);max-width:170px;font-size:16px}
.preview{pointer-events:none;opacity:.58;animation:galaxyForming 1.3s ease-in-out infinite}

.back-button{
  position:absolute;
  top:18px;
  right:20px;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:rgba(20,30,50,.95);
  color:white;
  font-size:22px;
  cursor:pointer;
  z-index:9999;
  transition:.25s;
  backdrop-filter:blur(12px);
  box-shadow:0 0 20px rgba(0,0,0,.35);
}
.back-button:hover{transform:scale(1.08);background:#2563eb}

.context-menu{
  position:fixed;
  z-index:9999;
  width:240px;
  padding:7px;
  background:rgba(28,36,53,.98);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  box-shadow:0 18px 55px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(18px);
}


.menu-item{

    width:100%;

    height:42px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 12px;

    border:none;

    border-radius:8px;

    background:transparent;

    color:#f3f4f6;

    cursor:pointer;

    transition:background .15s;

}


.menu-item:hover{background:rgba(255,255,255,.1)}


.menu-icon{

    width:18px;

    height:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:17px;

}



.menu-item span:last-child{

    flex:1;

    text-align:left;

    font-size:16px;

}

.editor-page{
  position:absolute;
  z-index:20;
  inset:0;
  padding:70px 90px;
  overflow:hidden;
  background:var(--sb-bg-canvas);
}
.editor-title{
  width:100%;
  font-size:44px;
  font-weight:var(--sb-weight-bold);
  background:none;
  border:none;
  outline:none;
  color:var(--sb-text);
  margin-bottom:30px;
}
.editor-text{
  width:100%;
  height:calc(100% - 100px);
  background:none;
  border:none;
  outline:none;
  resize:none;
  font-size:20px;
  line-height:1.6;
  color:var(--sb-text);
}
.editor-text img[data-image-id]{
  display:block;
  max-width:min(100%,1200px);
  height:auto;
  margin:18px 0;
  border-radius:10px;
}
.editor-text img[data-note-image="loading"],
.editor-text img[data-note-image="missing"]{
  width:min(420px,100%);
  min-height:120px;
  border:1px dashed rgba(148,163,184,.42);
  background:rgba(15,23,42,.55);
}
.editor-text img[data-note-image="missing"]{
  position:relative;
  color:var(--sb-text-muted);
}

.dialog-overlay{
  position:fixed;
  inset:0;
  z-index:20000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(7px);
}
.dialog{
  width:min(430px,calc(100vw - 32px));
  padding:24px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  background:#151d30;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.dialog h2{margin:0 0 10px}
.dialog p{margin:0;color:var(--muted);line-height:1.5}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.dialog-button{padding:10px 16px;border:0;border-radius:8px;cursor:pointer;color:white}
.dialog-button.secondary{background:#2b354b}
.dialog-button.danger{background:#dc2626}

/* DS6 — Notifications (COMPONENT_LIBRARY.md §30). A implementação real
   (showToast, em app.js) é uma única mensagem genérica — sem tipos
   success/warning/error, sem pilha de várias notificações simultâneas,
   sem botão de fechar. Introduzir esses comportamentos exigiria alterar
   app.js (novo parâmetro de tipo, fila de elementos, temporizador por
   item) — fora do âmbito de uma fase exclusivamente visual. Aplica-se
   aqui só a camada visual que não depende de nenhuma dessas alterações:
   os tokens de superfície/radius/sombra, e uma borda esquerda semântica
   fixa em --sb-secondary (a variante "informativo neutro" da secção 30,
   já que a mensagem genérica atual não distingue sucesso/erro). Ver
   ARCHITECTURE_DECISION.md. */
.toast{
  position:fixed;
  z-index:21000;
  right:24px;
  bottom:24px;
  max-width:360px;
  padding:12px 16px 12px 13px;
  color:var(--sb-text);
  background:var(--sb-surface-2);
  border:1px solid var(--sb-border-strong);
  border-left:3px solid var(--sb-secondary);
  border-radius:var(--sb-radius-md);
  box-shadow:var(--sb-shadow-3);
  font-size:13px;
  animation:toastIn 180ms var(--sb-ease-emphasis);
}
.hidden{display:none!important}
.universe.sucking{animation:universeZoom .45s ease}

.galaxy-view-title{
  position:absolute;
  z-index:5;
  top:24px;
  left:50%;
  max-width:60vw;
  overflow:hidden;
  color:white;
  font-size:20px;
  font-weight:700;
  text-overflow:ellipsis;
  text-shadow:0 2px 16px #000;
  white-space:nowrap;
  transform:translateX(-50%);
  pointer-events:none;
}

.galaxy-breadcrumb{

    position:absolute;

    top:22px;

    left:90px;

    display:flex;

    align-items:center;

    gap:10px;

    color:#ffffff;

    font-size:18px;

    font-weight:600;

    z-index:100;

}

.breadcrumb-item{

    color:#8ab4ff;

}

.breadcrumb-separator{

    opacity:.45;

}
@keyframes galaxyBirth{
  from{opacity:0;transform:scale(.15) rotate(-35deg);filter:blur(10px)}
  to{opacity:1;transform:scale(1) rotate(0);filter:blur(0)}
}
@keyframes galaxyForming{
  0%,100%{opacity:.38;transform:scale(.88)}
  50%{opacity:.72;transform:scale(1)}
}
@keyframes emptyPulse{
  0%,100%{opacity:.5;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.25)}
}
@keyframes toastIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes universeZoom{
  0%{transform:scale(1);filter:blur(0);opacity:1}
  40%{transform:scale(1.25);filter:blur(2px);opacity:.85}
  100%{transform:scale(1);filter:blur(0);opacity:1}
}

.document-area{

    display:flex;

    flex-direction:column;

    width:100%;

    height:100%;

}

.tab-bar{

    display:flex;

    align-items:center;

    gap:2px;
padding:8px 10px 0;

   background:var(--sb-surface-1);

border-bottom:1px solid var(--sb-border);

    overflow-x:auto;
    overflow-y:hidden;

white-space:nowrap;

scrollbar-width:thin;

    flex-shrink:0;

}

.tab-bar:empty{

    display:none;

}

.editor-workspace{

    position:relative;

    flex:1;

    overflow:hidden;

}




.editor-tab{
  min-width:170px;
  max-width:240px;
  height:42px;

  display:flex;
  flex-shrink:0;
  align-items:center;
  gap:9px;

  padding:0 12px;

  color:var(--sb-text-secondary);
  background:var(--sb-surface-2);

  border:1px solid transparent;
  border-radius:var(--sb-radius-xs) var(--sb-radius-xs) 0 0;

  cursor:pointer;
  user-select:none;

  transition:
    background var(--sb-duration-fast) var(--sb-ease-standard),
    border-color var(--sb-duration-fast) var(--sb-ease-standard);
}

.editor-tab:hover{
  background:color-mix(in srgb, var(--sb-surface-2) 100%, white 6%);
}

.editor-tab.active{
  color:var(--sb-text);
  background:color-mix(in srgb, var(--sb-surface-2) 100%, white 10%);
  border-color:var(--sb-border-strong);
}

.tab-icon{
  flex:0 0 auto;
  font-size:14px;
}

.tab-title{
  flex:1;
  min-width:0;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  text-align:left;
  font-size:var(--sb-text-base);
}

.tab-rename-input{
  flex:1;
  min-width:70px;
  height:28px;

  padding:3px 7px;

  color:var(--sb-text);
  background:var(--sb-surface-1);

  border:1px solid var(--sb-primary);
  border-radius:var(--sb-radius-xs);
  outline:none;

  font-size:var(--sb-text-base);

  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--sb-primary) 16%, transparent);
}

.tab-rename-input::selection{
  background:color-mix(in srgb, var(--sb-primary) 50%, transparent);
}

.tab-close{
  width:24px;
  height:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  border-radius:5px;

  font-size:18px;
  line-height:1;

  opacity:.65;
}

.tab-close:hover{
  background:rgba(255,255,255,.1);
  opacity:1;
}

.tab-universe{

    min-width:58px;

    height:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 10px;

    border-radius:999px;

    background:var(--sb-primary-strong);

    color:var(--sb-text);

    font-size:var(--sb-text-xs);

    font-weight:var(--sb-weight-semibold);

    white-space:nowrap;

    flex-shrink:0;

}

.tab-divider{

    color:var(--sb-text-muted);

    flex-shrink:0;

}

.color-palette{

    position:fixed;

    display:grid;

    grid-template-columns:repeat(4,34px);

    gap:10px;

    padding:12px;

    background:#1f2937;

    border:1px solid rgba(255,255,255,.08);

    border-radius:10px;

    box-shadow:0 20px 40px rgba(0,0,0,.35);

    z-index:20000;

}

.color-choice{

    width:30px;

    height:30px;

    border:none;

    border-radius:50%;

    cursor:pointer;

}

.color-choice[data-color="#7c3aed"]{background:#7c3aed;}

.color-choice[data-color="#2563eb"]{background:#2563eb;}

.color-choice[data-color="#16a34a"]{background:#16a34a;}

.color-choice[data-color="#eab308"]{background:#eab308;}

.color-choice[data-color="#ea580c"]{background:#ea580c;}

.color-choice[data-color="#dc2626"]{background:#dc2626;}

.color-choice[data-color="#6b7280"]{background:#6b7280;}

.color-choice[data-color="#111827"]{background:#111827;}

.ribbon{
  position:relative;

  width:58px;
  min-width:58px;
  height:100vh;

  display:flex;
  flex-direction:column;
  align-items:center;

  padding:10px 8px;

  background:var(--sb-surface-1);
  border-right:1px solid var(--sb-border);

  user-select:none;
}

.ribbon-group{
  width:100%;

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:6px;
}

.ribbon-group-bottom{
  padding-bottom:2px;
}

.ribbon-button{
  position:relative;

  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  padding:0;

  color:var(--sb-text-secondary);
  background:transparent;

  border:1px solid transparent;
  border-radius:var(--sb-radius-sm);

  cursor:pointer;

  transition:
    color var(--sb-duration-fast) var(--sb-ease-standard),
    background var(--sb-duration-fast) var(--sb-ease-standard),
    border-color var(--sb-duration-fast) var(--sb-ease-standard),
    transform var(--sb-duration-fast) var(--sb-ease-standard);
}

.ribbon-button:hover{
  color:var(--sb-text);
  background:var(--sb-surface-2);
  border-color:var(--sb-border-strong);
}

.ribbon-button:active{
  transform:scale(.94);
}

/* Nota DS3: o anel de foco visível é aplicado globalmente via
   `:focus-visible{box-shadow:var(--sb-focus-ring)}` (secção V0.9 —
   Polimento Final, mais abaixo), pelo que este selector não precisa
   de repetir a própria declaração — eliminação de duplicação
   documentada em ARCHITECTURE_DECISION.md. */

.ribbon-button-brain{
  color:var(--sb-primary-strong);
}

.ribbon-button-brain:hover{
  color:var(--sb-text);
  background:color-mix(in srgb, var(--sb-primary) 22%, transparent);
  border-color:color-mix(in srgb, var(--sb-primary-strong) 35%, transparent);
  box-shadow:var(--sb-glow-primary);
}

.ribbon-button-future{
  opacity:.72;
}

.ribbon-button-future:hover{
  opacity:1;
}

.ribbon-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:22px;
  height:22px;

  font-size:20px;
  line-height:1;

  pointer-events:none;
}

.ribbon-separator{
  width:30px;
  height:1px;

  margin:10px 0;

  background:var(--sb-border);
}

.ribbon-spacer{
  flex:1;
  min-height:18px;
}

.sidebar{

    transition:.25s;

}

.sidebar.collapsed{

    width:0;

    min-width:0;

    padding:0;

    overflow:hidden;

    border-right:none;

}

.galaxy-link-svg{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.galaxy-link-path{

    fill:none;

    stroke:#9f6dff;

    stroke-width:3;

    opacity:.55;

    filter:drop-shadow(
        0 0 8px
        rgba(159,109,255,.65)
    );

}

.note-link{

    stroke:#7dd3fc;

    stroke-width:2;

    opacity:.45;

}



.tree-indent{

    position:relative;

    width:22px;

    flex-shrink:0;

}

.tree-indent::before{

    content:"";

    position:absolute;

    left:10px;

    top:-18px;

    bottom:-18px;

    width:1px;

    background:var(--sb-border);

}

/* ======================================================
   SIDEBAR — ÁRVORE VISUAL
   Cada pasta raiz é uma árvore independente.
====================================================== */

.tree-guides{
  position:relative;

  display:flex;
  align-self:stretch;

  flex:0 0 auto;

  height:34px;

  pointer-events:none;
}

.tree-guides-root{
  width:0;
  min-width:0;
}

.tree-guide{
  position:relative;

  width:28px;
  min-width:28px;
  height:34px;

  flex:0 0 28px;

  --guide-color:rgba(255,255,255,.32);
}

/* Linha vertical dos níveis anteriores. */
.tree-guide-continuing::before{
  content:"";

  position:absolute;

  z-index:2;

  left:13px;
  top:-1px;
  bottom:-1px;

  width:1px;

  background:var(--guide-color);

  box-shadow:
    0 0 4px
    color-mix(
      in srgb,
      var(--guide-color) 45%,
      transparent
    );
}

/* Espaço onde um ramo anterior já terminou. */
.tree-guide-empty::before{
  content:none;
}

/* Parte vertical do ramo atual. */
.tree-guide-branch::before{
  content:"";

  position:absolute;

  z-index:2;

  left:13px;
  top:-1px;
  bottom:-1px;

  width:1px;

  background:var(--guide-color);

  box-shadow:
    0 0 4px
    color-mix(
      in srgb,
      var(--guide-color) 45%,
      transparent
    );
}

/* Parte horizontal: ├── ou └── */
.tree-guide-branch::after{
  content:"";

  position:absolute;

  z-index:2;

  left:13px;
  right:0;
  top:50%;

  height:1px;

  background:var(--guide-color);

  box-shadow:
    0 0 4px
    color-mix(
      in srgb,
      var(--guide-color) 45%,
      transparent
    );
}

/* No último filho, a linha vertical termina no centro: └── */
.tree-guide-branch.tree-guide-last::before{
  bottom:50%;
}

/* As raízes começam novas árvores; nenhuma linha passa entre elas. */
.tree-root-row{
  margin-top:8px;
}

.tree-root-row:first-child{
  margin-top:0;
}

/* Mantém a seta, a pasta e o texto acima dos ramos. */
.tree-folder-row > .folder-arrow,
.tree-folder-row > .folder-icon,
.tree-folder-row > .folder-name,
.tree-file-row > .file-arrow-spacer,
.tree-file-row > .note-icon,
.tree-file-row > .note-name{
  position:relative;
  z-index:4;
}

/* Um ligeiro destaque no ramo enquanto passas o rato. */
.tree-row:hover .tree-guide-branch::before,
.tree-row:hover .tree-guide-branch::after{
  filter:brightness(1.35);
}

/* Drag and drop permanece visível sem destruir os ramos. */
.tree-row.dragging{
  opacity:.42;
  transform:translateX(3px);
}

.tree-row.drag-over{
  background:color-mix(in srgb, var(--sb-primary) 18%, transparent);
  border-color:color-mix(in srgb, var(--sb-primary-strong) 55%, transparent);
  outline:1px dashed color-mix(in srgb, var(--sb-primary-strong) 90%, transparent);
  outline-offset:-2px;
}
/* ======================================================
   IDENTIDADE VISUAL DOS RAMOS — V3
====================================================== */

.tab-dot{
  width:9px;
  min-width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:50%;
  box-shadow:0 0 8px currentColor;
}

.tab-divider{
  height:24px;
  display:flex;
  align-items:center;
  color:var(--sb-text-muted);
  font-size:18px;
  line-height:1;
}

.editor-tab{
  min-width:220px;
  max-width:310px;
  gap:10px;
}

.editor-tab.active{
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.08);
}

.tab-universe{
  max-width:112px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.note-icon{
  font-size:12px;
  text-shadow:0 0 7px currentColor;
}

.tree-guide-continuing::before,
.tree-guide-branch::before,
.tree-guide-branch::after{
  opacity:.88;
  box-shadow:
    0 0 5px color-mix(in srgb,var(--guide-color) 60%,transparent),
    0 0 10px color-mix(in srgb,var(--guide-color) 25%,transparent);
}

.tree-folder-row .folder-icon{
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--branch-color) 45%,transparent));
}

.tree-folder-row.selected,
.tree-file-row.selected{
  border-color:color-mix(in srgb,var(--branch-color) 46%,transparent);
  background:color-mix(in srgb,var(--branch-color) 15%,transparent);
}

/* Universo visual herda a identidade cromática do ramo. */
.galaxy-visual .galaxy-core,
.galaxy-root .galaxy-core,
.galaxy-child .galaxy-core,
.mini-galaxy .mini-core{
  background:
    radial-gradient(
      ellipse at center,
      #ffffff 0%,
      color-mix(in srgb,var(--galaxy-color,#7c3aed) 18%,#ffffff) 8%,
      color-mix(in srgb,var(--galaxy-color,#7c3aed) 82%,transparent) 27%,
      color-mix(in srgb,var(--galaxy-color,#7c3aed) 35%,transparent) 49%,
      transparent 73%
    );
  box-shadow:
    0 0 25px color-mix(in srgb,var(--galaxy-color,#7c3aed) 72%,transparent),
    0 0 70px color-mix(in srgb,var(--galaxy-color,#7c3aed) 34%,transparent);
}

/* =====================================================
   SEMANTIC BRAIN — ÁRVORE VISUAL RECURSIVA
===================================================== */
.brain-window #universe{
  overflow:auto;
}

.galaxy-tree-scene{
  position:relative;
  min-width:100%;
  min-height:100%;
  padding:0 80px 120px;
}

.galaxy-tree-links,
.galaxy-tree-nodes{
  position:absolute;
  inset:0;
}

.galaxy-tree-links{
  z-index:1;
  pointer-events:none;
  overflow:visible;
}

.galaxy-tree-nodes{
  z-index:2;
}

.galaxy-tree-node{
  position:absolute;
  display:block;
  border:0;
  padding:0;
  color:#fff;
  background:transparent;
  cursor:pointer;
  transform:translate(-50%,-50%);
  animation:galaxyBirth 520ms cubic-bezier(.2,.9,.25,1);
}

.galaxy-tree-folder{
  width:168px;
  height:168px;
}

.galaxy-tree-root{
  width:220px;
  height:220px;
  z-index:4;
}

.galaxy-tree-file{
  width:112px;
  height:112px;
}

.galaxy-tree-node .galaxy-core,
.galaxy-tree-node .mini-core,
.galaxy-visual .galaxy-core{
  position:absolute;
  top:50%;
  left:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 50% 50%, #fff 0 5%, color-mix(in srgb,var(--galaxy-color) 92%,white) 9%, var(--galaxy-color) 28%, color-mix(in srgb,var(--galaxy-color) 45%,transparent) 48%, transparent 72%);
  box-shadow:
    0 0 24px color-mix(in srgb,var(--galaxy-color) 85%,transparent),
    0 0 68px color-mix(in srgb,var(--galaxy-color) 52%,transparent),
    inset 0 0 24px rgba(255,255,255,.25);
  filter:saturate(1.2);
  transition:transform .22s ease,filter .22s ease;
}

.galaxy-tree-folder .galaxy-core{
  width:116px;
  height:116px;
}

.galaxy-tree-root .galaxy-core{
  width:158px;
  height:158px;
}

.galaxy-tree-file .mini-core{
  width:62px;
  height:62px;
}

.galaxy-tree-node:hover .galaxy-core,
.galaxy-tree-node:hover .mini-core{
  transform:translate(-50%,-50%) scale(1.1);
  filter:brightness(1.28) saturate(1.35);
}

.galaxy-tree-node .galaxy-label,
.galaxy-tree-node .mini-name{
  position:absolute;
  left:50%;
  top:calc(50% + 74px);
  width:max-content;
  max-width:190px;
  transform:translateX(-50%);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-size:18px;
  font-weight:800;
  letter-spacing:.1px;
  text-shadow:0 2px 12px #000,0 0 14px color-mix(in srgb,var(--galaxy-color) 55%,transparent);
}

.galaxy-tree-root .galaxy-label{
  top:calc(50% + 96px);
  font-size:23px;
}

.galaxy-tree-file .mini-name{
  top:calc(50% + 49px);
  max-width:140px;
  font-size:14px;
  font-weight:700;
}

.galaxy-link-path{
  fill:none;
  stroke-width:3.5;
  stroke-linecap:round;
  opacity:.82;
  filter:drop-shadow(0 0 7px currentColor);
}

.galaxy-link-path.note-link{
  stroke-width:2.5;
  opacity:.72;
}

.galaxy-breadcrumb{
  position:fixed;
  z-index:1000;
  top:22px;
  left:28px;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:calc(100vw - 120px);
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(6,10,24,.72);
  box-shadow:0 10px 34px rgba(0,0,0,.35);
  backdrop-filter:blur(12px);
  overflow-x:auto;
}

.breadcrumb-item{
  border:0;
  padding:0;
  color:var(--breadcrumb-color,#8ab4ff);
  background:transparent;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}

.breadcrumb-item:hover{
  filter:brightness(1.35);
}

.breadcrumb-separator{
  color:var(--sb-text-muted);
}

.back-button{
  position:fixed;
  top:18px;
  right:20px;
}

.tree-empty-hint{
  position:absolute;
  top:360px;
  left:50%;
  transform:translateX(-50%);
  color:rgba(255,255,255,.56);
  font-size:14px;
}

.galaxy-root-card{
  width:230px;
  height:230px;
}

.galaxy-root-card .galaxy-core{
  /* Redimensionado em "Universe Rebuild" para 460×380 (igual a
     `.galaxy-tree-root`) — ver o bloco de comentário junto a essa regra
     para o raciocínio completo. Este valor é o único que ainda vence a
     cascata para `.galaxy-root-card .galaxy-core` (nenhuma outra regra
     mais tardia no ficheiro o disputa), por isso é seguro alterá-lo
     diretamente aqui. */
  width:460px;
  height:380px;
}

.galaxy-root-card .galaxy-label{
  top:calc(50% + 108px);
  font-size:21px;
}

@media (max-width:900px){
  .galaxy-tree-scene{padding-left:30px;padding-right:30px}
  .galaxy-tree-folder{width:150px;height:150px}
  .galaxy-tree-root{width:195px;height:195px}
}

/* =====================================================
   V0.2 — UNIVERSO VISUAL: ENQUADRAMENTO AUTOMÁTICO
===================================================== */
.galaxy-tree-viewport{
  position:absolute;
  inset:74px 0 0;
  overflow:auto;
  overscroll-behavior:contain;
}

.galaxy-tree-viewport .galaxy-tree-scene{
  position:absolute;
  top:0;
  transform-origin:top center;
  will-change:transform;
}

.galaxy-tree-node:focus-visible,
.galaxy-visual:focus-visible,
.breadcrumb-item:focus-visible,
.back-button:focus-visible{
  outline:2px solid color-mix(in srgb,var(--galaxy-color,#7c3aed) 75%,white);
  outline-offset:5px;
}

.galaxy-tree-node::after{
  content:"";
  position:absolute;
  inset:14%;
  border-radius:50%;
  opacity:.2;
  background:radial-gradient(circle,var(--galaxy-color) 0%,transparent 68%);
  filter:blur(18px);
  pointer-events:none;
}

.galaxy-tree-file::after{
  inset:18%;
  filter:blur(12px);
}

/* =====================================================
   V0.3 — IDENTIDADE VISUAL CINEMATOGRÁFICA
   Apenas apresentação: nenhuma lógica alterada.
===================================================== */

:root{
  --cosmos-bg:#01030a;
  --cosmos-panel:rgba(4,8,20,.72);
  --cosmos-line:rgba(255,255,255,.10);
}

/* "Rebuild the Universe Scene" — o fundo profundo do espaço deixa de
   ser uma pilha de `radial-gradient`/`linear-gradient` e passa a usar o
   asset `assets/universe/background.webp` (vinheta radial suave gerada
   com um campo de distância vetorizado, sem as faixas/artefactos
   triangulares de uma primeira tentativa por elipses sobrepostas — ver
   CHANGELOG). `background-color` funciona como fallback instantâneo
   enquanto o asset carrega, evitando qualquer flash de fundo errado. */
.brain-window,
.brain-window #universe,
.semantic-brain{
  background-color:#01030a;
  background-image:url("assets/universe/background.webp");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* "Universe Rebuild" — mais uma camada de estrelas (a maior/mais
   brilhante, `216px`) para reforçar sensação de profundidade/escala por
   variação de tamanho (Objective 1: "diferentes tamanhos... diferentes
   brilhos"), sempre discreto — nenhuma anima. */
/* "Rebuild the Universe Scene" — o campo de estrelas deixa de ser
   pontos desenhados por `radial-gradient` e passa a usar o asset
   `assets/universe/stars_layer.webp` (512×512, tileable — gerado com
   estrelas repetidas em offsets envolventes para não haver costura
   visível ao repetir). O mesmo `mask-image` de profundidade
   (esbatimento para baixo) mantém-se, agora aplicado sobre o asset. */
.universe::before{
  opacity:.85;
  background-image:url("assets/universe/stars_layer.webp");
  background-repeat:repeat;
  background-size:512px 512px;
  background-position:0 0;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.93),rgba(0,0,0,.62));
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.93),rgba(0,0,0,.62));
}

/* Nébula atmosférica — antes 3 elipses `radial-gradient` sobrepostas,
   agora o asset `assets/universe/nebula_overlay.webp` (nuvens coloridas
   com alfa real, desfocadas na origem). `mix-blend-mode:screen` deixa a
   nébula "brilhar" sobre o fundo escuro em vez de se ler como uma
   camada plana — mais próximo da atmosfera pedida pelo Fluxograma
   Oficial, mantendo-se contido/calmo (opacidade reduzida). */
.universe::after{
  opacity:.5;
  background-image:url("assets/universe/nebula_overlay.webp");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  mix-blend-mode:screen;
}

.galaxy-tree-viewport{
  inset:66px 0 0;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--sb-primary) 36%, transparent) transparent;
  perspective:1200px;
}

.galaxy-tree-scene{
  padding:34px 76px 110px;
  filter:saturate(1.12) contrast(1.06);
}

.galaxy-tree-links{
  z-index:1;
  overflow:visible;
}

.galaxy-tree-nodes{
  z-index:2;
}

.galaxy-link-path{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2.1;
  opacity:.55;
  filter:
    drop-shadow(0 0 3px currentColor)
    drop-shadow(0 0 10px color-mix(in srgb,currentColor 40%,transparent));
  transition:
    opacity var(--sb-duration-fast) var(--sb-ease-standard),
    stroke-width var(--sb-duration-fast) var(--sb-ease-standard),
    filter var(--sb-duration-fast) var(--sb-ease-standard);
}

.galaxy-link-path.note-link{
  stroke-width:1.55;
  opacity:.43;
  stroke-dasharray:2 7;
}

.galaxy-tree-node,
.galaxy-visual{
  isolation:isolate;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  transform:translateZ(0);
  transition:
    transform var(--sb-duration-cinematic) var(--sb-ease-cinematic),
    filter var(--sb-duration-cinematic) var(--sb-ease-standard),
    opacity var(--sb-duration-cinematic) var(--sb-ease-standard);
}

/* "Universe Rebuild" — corrigida uma regressão de cascade encontrada
   durante esta entrega: uma pasta-raiz recebe SEMPRE as classes
   `galaxy-tree-node galaxy-tree-root galaxy-tree-folder` em simultâneo
   (ver `createTreeNode` em brain.js — `galaxy-tree-folder` é atribuída a
   qualquer nó do tipo pasta, incluindo a raiz). Com especificidade igual
   entre `.galaxy-tree-root{}` e `.galaxy-tree-folder{}`, quem vem depois
   no ficheiro vence — `.galaxy-tree-folder` tinha de vir ANTES para que
   `.galaxy-tree-root` (mais específico em intenção, ainda que não em
   especificidade CSS) vença por último e a pasta-raiz use sempre o
   tamanho de raiz, nunca o de subpasta. Mesma correção aplicada ao
   núcleo (`.galaxy-core`), ao label e aos breakpoints responsivos
   abaixo. Ver ARCHITECTURE_DECISION.md. */
.galaxy-tree-folder{
  width:146px;
  height:112px;
}

.galaxy-tree-root{
  width:190px;
  height:148px;
}

.galaxy-tree-file{
  width:104px;
  height:78px;
}

/* "Universe Experience Redesign" — substituição completa do núcleo da
   galáxia. O antigo núcleo era uma esfera (gradiente radial concêntrico
   perfeitamente circular + halo em anel) — lia-se como um planeta, não
   como uma galáxia, apesar de todo o trabalho de poeira estelar/braços
   espirais em camadas de `background` da entrega anterior (essas camadas
   não mudavam a FORMA, só a textura de uma forma que continuava a ser um
   círculo). A forma em si tinha de deixar de ser um círculo.
   Como não é permitido alterar `brain.js` (nenhum elemento novo no DOM),
   a forma de espiral não pode vir de mais elementos — vem de um
   `mask-image`: um SVG gerado programaticamente (dois braços em espiral
   logarítmica com afunilamento + um terceiro fragmento mais curto, todos
   silhuetas sólidas, sem cor própria) que recorta a `background` do
   elemento na silhueta de uma galáxia espiral real, em vez de um círculo.
   A cor continua 100% dinâmica (`--galaxy-color`, por instância, via JS
   já existente) — o SVG só define a FORMA (máscara de luminância), nunca
   a cor. Ver ARCHITECTURE_DECISION.md para a justificação completa. */
.galaxy-tree-node .galaxy-core,
.galaxy-visual .galaxy-core{
  position:absolute;
  top:46%;
  left:50%;
  border-radius:0;
  transform:translate(-50%,-50%) rotate(-6deg);
  border:0;
  isolation:isolate;
  /* "Rebuild the Universe Scene" — a forma da galáxia deixa de ser
     desenhada em CSS (já não há SVG de máscara gerado programaticamente).
     A aplicação já não tenta desenhar galáxias — a galáxia É um asset
     visual (`assets/galaxies/galaxy_0N.webp`), tal como pedido pela
     missão. `--galaxy-asset` é definido por instância (ver bloco
     "variação orgânica por instância" abaixo, que faz o ciclo entre as 5
     variantes) com um valor por omissão aqui para qualquer instância que,
     por algum motivo, caia fora do ciclo `nth-child`. Trocar os ficheiros
     placeholder por assets finais no mesmo caminho não exige nenhuma
     alteração de código — esta é a "camada de integração" pedida pela
     missão. */
  --galaxy-asset:url("assets/galaxies/galaxy_01.webp");
  background-image:var(--galaxy-asset);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  box-shadow:none;
  /* `filter:drop-shadow` segue os pixels realmente visíveis do asset
     (alfa do PNG/WebP), por isso continua a ser a única forma de um glow
     fiel à silhueta real da galáxia — mesmo agora que a silhueta vem de
     uma imagem, não de uma máscara SVG. Intensidade reduzida face à
     entrega anterior ("Universe Rebuild"): o próprio asset já contém
     forma, sombreado e brilho de núcleo pintados — o CSS só precisa de
     reforçar a identidade cromática por pasta, não "vender" a forma
     inteira à custa de glow. Consistente com o requisito desta missão de
     uma atmosfera "calma, premium, cinematográfica, elegante", evitando
     glow excessivo. */
  filter:
    brightness(1.05) saturate(1.08)
    drop-shadow(0 0 5px rgba(255,255,255,.5))
    drop-shadow(0 0 20px color-mix(in srgb,var(--galaxy-color,#7c3aed) 58%,transparent))
    drop-shadow(0 0 44px color-mix(in srgb,var(--galaxy-color,#7c3aed) 28%,transparent));
  transition:
    transform var(--sb-duration-cinematic) var(--sb-ease-cinematic),
    filter var(--sb-duration-cinematic) var(--sb-ease-standard);
  animation:galaxyPulse var(--sb-duration-cosmic) var(--sb-ease-standard) infinite;
}

/* Camada de cor dinâmica por pasta — como a galáxia agora é um asset
   estático (não pode ser "pintada" por gradientes CSS como a antiga
   máscara), a identidade cromática por ramo (`--galaxy-color`, definida
   por instância em `brain.js` via `getBranchColor()`/`tabColor`, NUNCA
   tocado nesta missão) é aplicada como uma camada de tinta separada:
   `mix-blend-mode:color` combina o matiz/saturação de `--galaxy-color`
   com a luminância já pintada no asset (que é gerado num tom neutro
   branco→cinza-lilás→roxo-escuro, precisamente para servir de base a
   esta tinta). O `mask-image` desta camada usa o MESMO ficheiro do
   asset (o seu próprio canal alfa/luminância) — não é uma forma
   sintetizada por CSS, é a forma do próprio asset, por isso mantém-se
   fiel a "a aplicação já não desenha galáxias proceduralmente".
   `isolation:isolate` na regra `.galaxy-core` acima garante que este
   blend mode só se combina com o que está pintado dentro do próprio
   núcleo (o asset), nunca com o halo/anéis ou o fundo do Universo por
   trás. */
.galaxy-tree-node .galaxy-core::after,
.galaxy-visual .galaxy-core::after{
  content:"";
  position:absolute;
  inset:0;
  background-color:var(--galaxy-color,#7c3aed);
  -webkit-mask-image:var(--galaxy-asset);
  mask-image:var(--galaxy-asset);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  mix-blend-mode:color;
  opacity:.92;
  pointer-events:none;
}

/* Estrelas (notas) dentro de uma galáxia aberta — deliberadamente NÃO
   usam a máscara em espiral: uma nota não é uma galáxia em miniatura, é
   uma estrela dentro de uma galáxia, e uma estrela lê-se corretamente
   como um ponto de luz brilhante, não como uma forma espiral. Mantém-se
   um núcleo concêntrico simples (o mesmo princípio "núcleo brilhante",
   sem braços) — clareza acima de detalhe a esta escala. */
.galaxy-tree-node .mini-core{
  position:absolute;
  top:46%;
  left:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:0;
  background:radial-gradient(circle at center,
    rgba(255,255,255,.98) 0 12%,
    color-mix(in srgb,var(--galaxy-color,#7c3aed) 45%,white) 26%,
    var(--galaxy-color,#7c3aed) 48%,
    color-mix(in srgb,var(--galaxy-color,#7c3aed) 35%,transparent) 78%,
    transparent 100%);
  box-shadow:none;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.85))
    drop-shadow(0 0 9px color-mix(in srgb,var(--galaxy-color,#7c3aed) 70%,transparent));
  transition:transform var(--sb-duration-cinematic) var(--sb-ease-cinematic),filter var(--sb-duration-cinematic) var(--sb-ease-standard);
  animation:galaxyPulse var(--sb-duration-cosmic) var(--sb-ease-standard) infinite;
  opacity:.96;
}

/* "Universe Experience Redesign" (mask) tornava a galáxia uma silhueta
   real em espiral; "Universe Rebuild" (esta entrega) muda a ESCALA e a
   COMPOSIÇÃO: uma galáxia deixa de ser um ícone maior — passa a ocupar
   uma região do ecrã, com braços que se estendem muito além do núcleo
   (novo SVG da máscara, ver bloco acima), sem tocar `brain.js`. A caixa
   do nó interativo (`.galaxy-tree-root`/`-folder`/`-file`, hitbox e
   posição calculadas por `brain.js`) mantém-se exatamente como estava —
   só o núcleo visual, absolutamente posicionado e centrado dentro dela,
   cresce para além dela. Ver ARCHITECTURE_DECISION.md. */
/* Tamanhos reduzidos face a uma primeira tentativa (320×265/460×380):
   com o espaçamento vertical fixo entre níveis da árvore (`levelGap`,
   210px lógicos, definido em `buildRecursiveLayout` de `brain.js` — não
   alterado nesta entrega), núcleos tão grandes faziam a galáxia-pai e
   uma subpasta filha sobreporem-se de forma confusa, dificultando saber
   a que nó pertence cada nome. Estes valores continuam bastante maiores
   do que a entrega anterior (164×140/216×184), mas deixam espaço para
   uma subpasta não colidir gravemente com a pasta-mãe. */
.galaxy-tree-folder .galaxy-core{
  width:200px;
  height:165px;
}

.galaxy-tree-root .galaxy-core{
  width:340px;
  height:280px;
}

.galaxy-tree-file .mini-core{
  width:40px;
  height:40px;
}

/* Variação orgânica por instância — só deriva/escala subtis do núcleo
   (nunca da caixa do nó, que fica sempre no lugar exato que `brain.js`
   calculou), para que galáxias vizinhas não pareçam cópias idênticas
   alinhadas a uma grelha (Objective 5). A rotação mantém-se sempre
   -6deg, igual em todas as instâncias — o Fluxograma Oficial mostra
   sempre a mesma inclinação/perspetiva (nunca ângulos aleatórios por
   galáxia), e uma rotação maior por instância também alargaria a caixa
   delimitadora do núcleo de forma imprevisível, desalinhando o nome por
   baixo dele — por isso a variação fica só em posição/escala. */
.galaxy-tree-nodes .galaxy-tree-node:nth-child(5n+1) .galaxy-core,
#universe > .galaxy-root-card:nth-child(5n+1) .galaxy-core{
  top:44%;left:47%;
  transform:translate(-50%,-50%) rotate(-6deg) scale(.95);
  --galaxy-asset:url("assets/galaxies/galaxy_01.webp");
}
.galaxy-tree-nodes .galaxy-tree-node:nth-child(5n+2) .galaxy-core,
#universe > .galaxy-root-card:nth-child(5n+2) .galaxy-core{
  top:48%;left:53%;
  transform:translate(-50%,-50%) rotate(-6deg) scale(1.05);
  --galaxy-asset:url("assets/galaxies/galaxy_02.webp");
}
.galaxy-tree-nodes .galaxy-tree-node:nth-child(5n+3) .galaxy-core,
#universe > .galaxy-root-card:nth-child(5n+3) .galaxy-core{
  top:45%;left:51%;
  transform:translate(-50%,-50%) rotate(-6deg) scale(.99);
  --galaxy-asset:url("assets/galaxies/galaxy_03.webp");
}
.galaxy-tree-nodes .galaxy-tree-node:nth-child(5n+4) .galaxy-core,
#universe > .galaxy-root-card:nth-child(5n+4) .galaxy-core{
  top:47%;left:46%;
  transform:translate(-50%,-50%) rotate(-6deg) scale(1.02);
  --galaxy-asset:url("assets/galaxies/galaxy_04.webp");
}
/* Quinta variante (múltiplos de 5) — antes usava só a posição/escala por
   omissão da regra base; esta missão acrescenta-lhe também a 5ª variante
   de asset (`galaxy_05.webp`), completando o ciclo de 5, sem alterar a
   posição/escala já estabelecidas (mantém-se a omissão original). */
.galaxy-tree-nodes .galaxy-tree-node:nth-child(5n) .galaxy-core,
#universe > .galaxy-root-card:nth-child(5n) .galaxy-core{
  --galaxy-asset:url("assets/galaxies/galaxy_05.webp");
}

.galaxy-tree-node::before,
.galaxy-visual::before{
  content:"";
  position:absolute;
  left:50%;
  top:46%;
  width:210%;
  height:210%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--galaxy-color,#7c3aed) 20%,transparent),transparent 68%);
  filter:blur(16px);
  /* Opacidade reduzida (era .7) — "Rebuild the Universe Scene" pede uma
     atmosfera calma/premium, evitando glow excessivo agora que o núcleo
     é um asset com a sua própria luz/sombreado pintados. */
  opacity:.5;
  pointer-events:none;
}

/* Anéis orbitais concêntricos — elemento novo desta entrega ("Universe
   Rebuild"), pedido explicitamente pelo Fluxograma Oficial (cada galáxia
   aí é rodeada por elipses finas e ténues, sugerindo órbitas/campo
   gravitacional — nunca decoração aleatória). Reaproveita o `::after`
   já existente (nenhum elemento novo no DOM): deixa de ser um segundo
   brilho desfocado e passa a ser este anel nítido (sem blur), que se
   estende para além da silhueta em espiral para o espaço vazio à volta.
   `filter:none` cancela explicitamente o `blur(18px)` herdado de uma
   regra "v0.2" mais antiga no cascade (mesmo padrão já documentado
   noutros pontos deste ficheiro para `box-shadow:none`). */
.galaxy-tree-node::after,
.galaxy-visual::after{
  content:"";
  position:absolute;
  left:50%;
  top:46%;
  width:230%;
  height:230%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:repeating-radial-gradient(ellipse at center,
    transparent 0,
    transparent 12.5%,
    color-mix(in srgb,var(--galaxy-color,#7c3aed) 30%,rgba(255,255,255,.6)) 13%,
    transparent 13.7%,
    transparent 100%);
  filter:none;
  /* Opacidade reduzida (era .24) pelo mesmo motivo do halo ambiente
     acima — os anéis orbitais devem ler-se como um detalhe subtil de
     campo gravitacional, nunca como decoração ruidosa. */
  opacity:.18;
  pointer-events:none;
}

/* A pasta-raiz (`.galaxy-tree-root`) e o cartão de topo do Universo
   (`.galaxy-root-card`) têm o núcleo maior (460×380px) — o halo/anéis
   genéricos (210%/230% da caixa pequena do nó) ficavam mais pequenos do
   que o próprio núcleo para estes dois tipos, fazendo os anéis
   "orbitais" sobreporem-se aos braços em vez de os rodearem. Reforço
   dedicado só para estes dois tipos. */
.galaxy-tree-root::before,
.galaxy-root-card::before{
  width:275%;
  height:275%;
}

.galaxy-tree-root::after,
.galaxy-root-card::after{
  width:300%;
  height:300%;
}

.galaxy-tree-node:hover,
.galaxy-tree-node:focus-visible,
.galaxy-visual:hover,
.galaxy-visual:focus-visible{
  z-index:10;
  transform:translateY(-5px) scale(1.08);
  filter:brightness(1.15) saturate(1.12);
}

.galaxy-tree-node:hover .galaxy-core,
.galaxy-tree-node:focus-visible .galaxy-core,
.galaxy-visual:hover .galaxy-core,
.galaxy-visual:focus-visible .galaxy-core{
  transform:translate(-50%,-50%) rotate(-2deg) scale(1.08);
  filter:
    brightness(1.24) saturate(1.28)
    drop-shadow(0 0 4px rgba(255,255,255,.9))
    drop-shadow(0 0 22px color-mix(in srgb,var(--galaxy-color,#7c3aed) 90%,transparent))
    drop-shadow(0 0 52px color-mix(in srgb,var(--galaxy-color,#7c3aed) 55%,transparent));
  /* Pausa o "respirar" de galaxyPulse durante o hover/foco, para que o
     reforço de brilho do hover não seja disputado pela animação em loop
     (as animações CSS têm sempre prioridade sobre uma regra estática do
     mesmo cascade para a mesma propriedade) — sem isto, o hover pareceria
     inconsistente/a tremeluzir. */
  animation-play-state:paused;
}

.galaxy-tree-node:hover .mini-core,
.galaxy-tree-node:focus-visible .mini-core{
  transform:translate(-50%,-50%) scale(1.15);
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.95))
    drop-shadow(0 0 14px color-mix(in srgb,var(--galaxy-color,#7c3aed) 85%,transparent));
  animation-play-state:paused;
}

/* Combinações hover × variação orgânica: sem estas, a maior especificidade
   das regras `:nth-child` acima (secção "variação orgânica por instância")
   venceria a regra de hover genérica acima e o núcleo deixaria de reagir
   ao hover/foco em 4 de cada 5 galáxias — cada variante repete aqui a
   rotação de repouso própria + o mesmo reforço de escala do hover. */
.galaxy-tree-nodes .galaxy-tree-node:nth-child(5n+1):hover .galaxy-core,
.galaxy-tree-nodes .galaxy-tree-node:nth-child(5n+1):focus-visible .galaxy-core,
#universe > .galaxy-root-card:nth-child(5n+1):hover .galaxy-core,
#universe > .galaxy-root-card:nth-child(5n+1):focus-visible .galaxy-core{
  transform:translate(-50%,-50%) rotate(-2deg) scale(1.09);
}
.galaxy-tree-nodes .galaxy-tree-node:nth-child(5n+2):hover .galaxy-core,
.galaxy-tree-nodes .galaxy-tree-node:nth-child(5n+2):focus-visible .galaxy-core,
#universe > .galaxy-root-card:nth-child(5n+2):hover .galaxy-core,
#universe > .galaxy-root-card:nth-child(5n+2):focus-visible .galaxy-core{
  transform:translate(-50%,-50%) rotate(-2deg) scale(1.13);
}
.galaxy-tree-nodes .galaxy-tree-node:nth-child(5n+3):hover .galaxy-core,
.galaxy-tree-nodes .galaxy-tree-node:nth-child(5n+3):focus-visible .galaxy-core,
#universe > .galaxy-root-card:nth-child(5n+3):hover .galaxy-core,
#universe > .galaxy-root-card:nth-child(5n+3):focus-visible .galaxy-core{
  transform:translate(-50%,-50%) rotate(-2deg) scale(1.07);
}
.galaxy-tree-nodes .galaxy-tree-node:nth-child(5n+4):hover .galaxy-core,
.galaxy-tree-nodes .galaxy-tree-node:nth-child(5n+4):focus-visible .galaxy-core,
#universe > .galaxy-root-card:nth-child(5n+4):hover .galaxy-core,
#universe > .galaxy-root-card:nth-child(5n+4):focus-visible .galaxy-core{
  transform:translate(-50%,-50%) rotate(-2deg) scale(1.11);
}

.galaxy-tree-node .galaxy-label,
.galaxy-tree-node .mini-name,
.galaxy-visual .galaxy-label{
  position:absolute;
  left:50%;
  top:auto;
  bottom:0;
  max-width:94%;
  transform:translateX(-50%);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f8fbff;
  font-weight:780;
  letter-spacing:.01em;
  text-shadow:
    0 2px 8px rgba(0,0,0,.98),
    0 0 12px color-mix(in srgb,var(--galaxy-color,#7c3aed) 46%,transparent);
  pointer-events:none;
}

/* Posições recalculadas para "Universe Rebuild" — o núcleo cresceu
   muito além da caixa pequena do nó (ver bloco de tamanhos acima); um
   `bottom` pequeno/perto de 0 deixaria o nome escondido por baixo do
   próprio núcleo. Cada valor coloca o nome mesmo junto à margem do halo
   do núcleo (não muito abaixo dele), para o texto parecer "parte da
   galáxia" em vez de uma legenda distante (Objective 4 — integração). */
.galaxy-tree-folder .galaxy-label{
  bottom:-25px;
  font-size:16px;
}

.galaxy-tree-root .galaxy-label{
  bottom:-70px;
  font-size:20px;
}

.galaxy-tree-file .mini-name{
  bottom:-2px;
  font-size:13px;
  font-weight:680;
  color:rgba(241,246,255,.94);
}

/* `.galaxy-root-card .galaxy-label{top:calc(50% + 108px);...}` (mais
   acima no ficheiro, secção do cartão do Universo) perde a cascata para
   `bottom`/`top` contra a regra genérica `.galaxy-visual .galaxy-label`
   — esta regra, mais tardia no ficheiro, é quem define de facto a
   posição hoje. Reposicionada para acompanhar o novo núcleo (460×380px,
   igual ao de `.galaxy-tree-root`), com o mesmo raciocínio de
   integração aplicado acima. */
.galaxy-root-card .galaxy-label{
  bottom:-90px;
  font-size:22px;
}

/* "Rebuild the Universe Scene", requisito 5 (integração do label) — um
   halo suave, cor-a-cor com a galáxia, diretamente atrás do nome (não é
   um novo nó no DOM: é um `::before` do próprio elemento de label já
   existente). Pinta-se ANTES do texto por ordem normal de conteúdo
   gerado (sem `z-index`, por isso não interfere com nenhuma outra
   camada), fazendo o nome parecer parte da galáxia — emanar dela — em
   vez de uma legenda solta por baixo. */
.galaxy-tree-node .galaxy-label::before,
.galaxy-tree-node .mini-name::before,
.galaxy-visual .galaxy-label::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:calc(100% + 44px);
  height:calc(100% + 24px);
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,
    color-mix(in srgb,var(--galaxy-color,#7c3aed) 24%,transparent) 0%,
    transparent 74%);
  filter:blur(8px);
  pointer-events:none;
}

.galaxy-breadcrumb{
  top:18px;
  left:22px;
  gap:7px;
  padding:8px 13px;
  border:1px solid color-mix(in srgb, var(--sb-primary) 20%, transparent);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--sb-surface-2) 84%, transparent),
    color-mix(in srgb, var(--sb-bg) 88%, transparent));
  box-shadow:
    var(--sb-shadow-2),
    inset 0 1px rgba(255,255,255,.06);
  backdrop-filter:blur(16px) saturate(1.2);
}

.breadcrumb-item{
  font-size:13px;
  letter-spacing:.015em;
  transition:filter var(--sb-duration-base) var(--sb-ease-standard),transform var(--sb-duration-base) var(--sb-ease-standard);
}

.breadcrumb-item:hover{
  transform:translateY(-1px);
}

.back-button{
  width:42px;
  height:42px;
  top:16px;
  right:18px;
  border:1px solid color-mix(in srgb, var(--sb-primary) 22%, transparent);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--sb-surface-2) 92%, transparent),
    color-mix(in srgb, var(--sb-bg) 90%, transparent));
  box-shadow:var(--sb-shadow-2), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  transition:background var(--sb-duration-base) var(--sb-ease-standard), box-shadow var(--sb-duration-base) var(--sb-ease-standard);
}

.back-button:hover{
  background:color-mix(in srgb,var(--galaxy-color,#2563eb) 31%,rgba(10,18,38,.9));
  box-shadow:0 0 24px color-mix(in srgb,var(--galaxy-color,#2563eb) 34%,transparent),0 12px 34px rgba(0,0,0,.42);
}

.universe.sucking{
  animation:cinematicUniverseEntry .48s cubic-bezier(.22,.74,.26,1);
}

@keyframes cinematicUniverseEntry{
  0%{transform:scale(1);filter:blur(0) brightness(1);opacity:1}
  42%{transform:scale(1.055);filter:blur(1.8px) brightness(1.12);opacity:.78}
  100%{transform:scale(1);filter:blur(0) brightness(1);opacity:1}
}

@keyframes galaxyBirth{
  0%{opacity:0;transform:scale(.55) translateY(16px);filter:blur(9px) brightness(1.5)}
  65%{opacity:1;transform:scale(1.035) translateY(-2px);filter:blur(0) brightness(1.12)}
  100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0) brightness(1)}
}

/* "Sensação de energia" pedida para a Camada 1 (Universo) — um respirar
   muito lento e subtil do núcleo, nunca mais que um brilho ligeiramente
   mais intenso a meio do ciclo. Duração de 6.4s (--sb-duration-cosmic)
   torna-o quase impercetível a olhar direto, mas dá vida ao ecrã num
   relance — consistente com "nunca excesso de brilho", "nunca excesso
   de animações". */
@keyframes galaxyPulse{
  0%,100%{filter:brightness(1.06) saturate(1.18)}
  50%{filter:brightness(1.13) saturate(1.24)}
}

@media (max-width:1100px){
  .galaxy-tree-scene{padding-left:42px;padding-right:42px}
  .galaxy-tree-folder{width:132px;height:101px}
  .galaxy-tree-folder .galaxy-core{width:182px;height:150px}
  .galaxy-tree-folder .galaxy-label{bottom:-23px}
  .galaxy-tree-root{width:172px;height:134px}
  .galaxy-tree-root .galaxy-core{width:308px;height:254px}
  .galaxy-tree-root .galaxy-label{bottom:-63px}
  .galaxy-tree-file{width:96px;height:72px}
  .galaxy-tree-file .mini-core{width:36px;height:36px}
}

@media (max-width:720px){
  .galaxy-tree-viewport{inset:62px 0 0}
  .galaxy-tree-scene{padding:26px 24px 82px}
  .galaxy-breadcrumb{left:12px;top:12px;max-width:calc(100vw - 74px)}
  .back-button{right:12px;top:11px;width:39px;height:39px}
  .galaxy-tree-folder{width:120px;height:92px}
  .galaxy-tree-folder .galaxy-core{width:164px;height:135px}
  .galaxy-tree-folder .galaxy-label{bottom:-20px}
  .galaxy-tree-root{width:154px;height:120px}
  .galaxy-tree-root .galaxy-core{width:276px;height:227px}
  .galaxy-tree-root .galaxy-label{bottom:-57px}
  .galaxy-tree-file{width:88px;height:66px}
  .galaxy-tree-file .mini-core{width:33px;height:33px}
}

@media (prefers-reduced-motion:reduce){
  .galaxy-tree-node,
  .galaxy-tree-node .galaxy-core,
  .galaxy-tree-node .mini-core,
  .galaxy-visual,
  .galaxy-visual .galaxy-core,
  .universe.sucking{
    animation:none!important;
    transition:none!important;
  }
}


/* ======================================================
   SISTEMA CONSTELAÇÕES — v0.4
====================================================== */
.ribbon-button-constellations{
  color:var(--sb-warning);
}
.ribbon-button-constellations:hover{
  color:var(--sb-text);
  background:color-mix(in srgb, var(--sb-warning) 18%, transparent);
  border-color:color-mix(in srgb, var(--sb-warning) 42%, transparent);
  box-shadow:var(--sb-glow-warning);
}
.constellation-workspace{
  position:fixed;
  inset:0;
  z-index:15000;
  display:flex;
  flex-direction:column;
  color:#fff;
  background:
    radial-gradient(circle at 52% 45%,rgba(126,34,206,.22),transparent 30%),
    radial-gradient(circle at 18% 18%,rgba(14,165,233,.12),transparent 30%),
    linear-gradient(145deg,#03040b 0%,#090719 52%,#02030a 100%);
}
.constellation-workspace::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.46;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.3px),
    radial-gradient(circle,rgba(196,181,253,.8) 0 1px,transparent 1.4px);
  background-size:92px 92px,137px 137px;
  background-position:0 0,41px 63px;
}
.constellation-toolbar{
  position:relative;
  z-index:5;
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 24px;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(5,6,18,.76);
  backdrop-filter:blur(18px);
}
.constellation-toolbar h2{
  margin:2px 0 0;
  font-size:25px;
  letter-spacing:-.6px;
}
.constellation-kicker{
  color:#c4b5fd;
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
}
.constellation-actions{
  display:flex;
  align-items:center;
  gap:9px;
}
.constellation-actions button,
.constellation-dialog button{
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:9px;
  color:#fff;
  background:rgba(255,255,255,.07);
  cursor:pointer;
  transition:transform .15s,background .15s,border-color .15s,box-shadow .15s;
}
.constellation-actions button:hover,
.constellation-dialog button:hover{
  background:rgba(139,92,246,.22);
  border-color:rgba(196,181,253,.45);
}
.constellation-actions button.active{
  background:#7c3aed;
  border-color:#a78bfa;
  box-shadow:0 0 22px rgba(124,58,237,.45);
}
#closeConstellationsButton{
  width:40px;
  padding:0;
  font-size:25px;
}
.constellation-hint{
  position:absolute;
  z-index:6;
  top:98px;
  left:50%;
  max-width:min(720px,80vw);
  padding:8px 14px;
  border:1px solid rgba(196,181,253,.16);
  border-radius:999px;
  color:#d8d5e8;
  background:rgba(10,8,26,.72);
  font-size:12px;
  transform:translateX(-50%);
  backdrop-filter:blur(12px);
}
.constellation-map{
  position:relative;
  z-index:2;
  flex:1;
  min-width:100%;
  min-height:0;
  overflow:auto;
}
.constellation-map::after{
  content:"";
  position:absolute;
  inset:0;
  min-width:1600px;
  min-height:1000px;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
}
.constellation-links,
.constellation-nodes{
  position:absolute;
  inset:0;
  min-width:1600px;
  min-height:1000px;
}
.constellation-links{
  z-index:1;
  overflow:visible;
  pointer-events:none;
}
.constellation-nodes{
  z-index:2;
}
.constellation-link-path{
  fill:none;
  stroke:#a78bfa;
  stroke-width:2.3;
  opacity:.58;
  filter:drop-shadow(0 0 6px rgba(167,139,250,.68));
  pointer-events:stroke;
  cursor:pointer;
  transition:opacity .15s,stroke-width .15s;
}
.constellation-link-path:hover{
  opacity:1;
  stroke-width:4;
}
.constellation-node{
  position:absolute;
  width:210px;
  min-height:132px;
  padding:18px 18px 15px;
  border:1px solid rgba(196,181,253,.28);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% -10%,rgba(167,139,250,.26),transparent 45%),
    linear-gradient(155deg,rgba(25,20,54,.94),rgba(8,9,24,.96));
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    0 0 35px rgba(124,58,237,.12),
    inset 0 1px rgba(255,255,255,.06);
  cursor:grab;
  user-select:none;
  touch-action:none;
  transition:transform .16s,border-color .16s,box-shadow .16s;
}
.constellation-node:hover{
  z-index:4;
  transform:translateY(-4px) scale(1.025);
  border-color:rgba(216,180,254,.7);
  box-shadow:
    0 24px 70px rgba(0,0,0,.52),
    0 0 42px rgba(139,92,246,.32),
    inset 0 1px rgba(255,255,255,.1);
}
.constellation-node.dragging{
  z-index:10;
  cursor:grabbing;
  transform:scale(1.035);
  opacity:.92;
}
.constellation-node-star{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  margin:-34px auto 8px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:50%;
  color:#fff7cc;
  background:#7c3aed;
  box-shadow:0 0 18px rgba(167,139,250,.9),0 0 45px rgba(124,58,237,.55);
}
.constellation-node h3{
  margin:4px 0 10px;
  overflow:hidden;
  color:#fff;
  font-size:16px;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.constellation-node blockquote{
  margin:0 0 9px;
  padding:8px 10px;
  border-left:2px solid #a78bfa;
  border-radius:0 7px 7px 0;
  color:#ede9fe;
  background:rgba(139,92,246,.1);
  font-size:12px;
  line-height:1.45;
}
.constellation-node p{
  display:-webkit-box;
  margin:0 0 10px;
  overflow:hidden;
  color:#aeb4cc;
  font-size:12px;
  line-height:1.45;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
}
.constellation-node small{
  display:block;
  overflow:hidden;
  color:#7dd3fc;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.constellation-empty{
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  width:min(460px,82vw);
  padding:34px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  color:#d8d5e8;
  background:rgba(7,8,22,.72);
  text-align:center;
  transform:translate(-50%,-50%);
  backdrop-filter:blur(14px);
}
.constellation-empty-star{
  margin-bottom:14px;
  color:#c4b5fd;
  font-size:38px;
  text-shadow:0 0 22px #8b5cf6;
}
.constellation-empty h3{margin:0 0 7px;color:#fff}
.constellation-empty p{margin:0;font-size:13px}
.constellation-dialog-overlay{
  position:fixed;
  inset:0;
  z-index:22000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(10px);
}
.constellation-dialog{
  width:min(520px,100%);
  padding:24px;
  border:1px solid rgba(196,181,253,.24);
  border-radius:18px;
  color:#fff;
  background:linear-gradient(155deg,#17122f,#080b18);
  box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 50px rgba(124,58,237,.16);
}
.constellation-dialog h2{margin:0 0 20px}
.constellation-dialog label{
  display:block;
  margin:0 0 15px;
  color:#c9c7d7;
  font-size:12px;
  font-weight:700;
}
.constellation-dialog input,
.constellation-dialog textarea{
  width:100%;
  margin-top:7px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:9px;
  outline:none;
  color:#fff;
  background:rgba(0,0,0,.28);
  resize:vertical;
}
.constellation-dialog input:focus,
.constellation-dialog textarea:focus{
  border-color:#a78bfa;
  box-shadow:0 0 0 3px rgba(139,92,246,.17);
}
.constellation-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:20px;
}
.constellation-dialog-actions button[type="submit"]{
  background:#7c3aed;
  border-color:#a78bfa;
}
.constellation-context-menu{
  position:fixed;
  z-index:23000;
  width:205px;
  padding:7px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  background:rgba(18,20,38,.98);
  box-shadow:0 22px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(16px);
}
.constellation-context-menu button{
  width:100%;
  min-height:38px;
  padding:0 11px;
  border:0;
  border-radius:7px;
  color:#f4f4f8;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.constellation-context-menu button:hover{background:rgba(255,255,255,.1)}
.constellation-context-menu button.danger{color:#fda4af}
@media (max-width:700px){
  .constellation-toolbar{align-items:flex-start;padding:13px;}
  .constellation-actions{flex-wrap:wrap;justify-content:flex-end;}
  .constellation-actions button{min-height:34px;padding:0 9px;font-size:12px;}
  .constellation-hint{top:112px;}
}

/* ======================================================
   SISTEMA INVESTIGAÇÃO
====================================================== */
.ribbon-button-investigation{color:var(--sb-success)}.ribbon-button-investigation:hover{background:color-mix(in srgb, var(--sb-success) 18%, transparent);border-color:color-mix(in srgb, var(--sb-success) 35%, transparent);box-shadow:var(--sb-glow-success)}
.investigation-workspace{position:fixed;inset:0;z-index:15000;display:flex;flex-direction:column;background:radial-gradient(circle at 50% 0%,rgba(16,185,129,.14),transparent 36%),#06110d;color:#ecfdf5}
.investigation-toolbar{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;gap:18px;align-items:center;padding:18px 22px;border-bottom:1px solid rgba(110,231,183,.18);background:rgba(4,18,13,.92);backdrop-filter:blur(18px)}
.investigation-kicker{font-size:10px;letter-spacing:2px;color:#6ee7b7}.investigation-toolbar h2{margin:3px 0 0;font-size:24px}.investigation-case-controls,.investigation-actions{display:flex;gap:8px;align-items:center}.investigation-toolbar button,.investigation-toolbar select{height:38px;padding:0 12px;border:1px solid rgba(110,231,183,.22);border-radius:9px;background:#0b2118;color:#ecfdf5;cursor:pointer}.investigation-toolbar button:hover{background:#123524}.investigation-toolbar button:disabled{opacity:.45;cursor:not-allowed}.investigation-actions button.active{background:#16a34a}.investigation-actions #closeInvestigationButton{width:40px;padding:0;font-size:24px}
.investigation-hint{padding:10px 22px;border-bottom:1px solid rgba(110,231,183,.12);color:#a7f3d0;font-size:13px;background:rgba(6,25,18,.86)}
.investigation-board{position:relative;flex:1;overflow:auto;padding:22px}.investigation-links{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}.investigation-link-path{fill:none;stroke:#34d399;stroke-width:2.5;opacity:.62;filter:drop-shadow(0 0 6px rgba(52,211,153,.65));pointer-events:stroke;cursor:pointer}.investigation-columns{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,minmax(230px,1fr));gap:16px;min-width:1500px;align-items:start}
.investigation-column{min-height:calc(100vh - 180px);padding:12px;border:1px solid rgba(110,231,183,.15);border-radius:14px;background:linear-gradient(180deg,rgba(9,38,27,.9),rgba(5,24,17,.76));box-shadow:0 18px 50px rgba(0,0,0,.25)}.investigation-column>header{display:flex;align-items:center;gap:9px;margin-bottom:12px;padding:5px 4px 11px;border-bottom:1px solid rgba(110,231,183,.13)}.investigation-column>header h3{flex:1;margin:0;font-size:15px}.investigation-column>header button{width:30px;height:30px;border:1px solid rgba(110,231,183,.25);border-radius:8px;background:#123524;color:white;cursor:pointer}.investigation-card-list{display:flex;flex-direction:column;gap:10px;min-height:80px}
.investigation-card{display:flex;gap:10px;align-items:flex-start;padding:11px;border:1px solid rgba(110,231,183,.16);border-radius:11px;background:rgba(14,48,34,.88);box-shadow:0 8px 22px rgba(0,0,0,.22);cursor:pointer;transition:transform .15s,background .15s,border-color .15s}.investigation-card:hover{transform:translateY(-2px);background:#164e36;border-color:rgba(110,231,183,.4)}.investigation-card.dragging{opacity:.45}.investigation-card img,.investigation-card-icon{width:44px;height:44px;border-radius:9px;object-fit:cover;display:flex;align-items:center;justify-content:center;flex:0 0 44px;background:rgba(52,211,153,.13);font-size:22px}.investigation-card-copy{min-width:0}.investigation-card h4{margin:0 0 5px;font-size:14px}.investigation-card p{margin:0;color:#a7f3d0;font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3; line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.investigation-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#a7f3d0}.investigation-empty-icon{font-size:48px;color:#34d399}.investigation-empty h3{margin:12px 0 6px;color:#ecfdf5}.investigation-empty p{margin:0}
.investigation-dialog-overlay{position:fixed;inset:0;z-index:22000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.66);backdrop-filter:blur(8px)}.investigation-dialog{width:min(480px,calc(100vw - 32px));padding:22px;border:1px solid rgba(110,231,183,.25);border-radius:16px;background:#092318;box-shadow:0 30px 90px rgba(0,0,0,.55);color:#ecfdf5}.investigation-dialog h2{margin:0 0 18px}.investigation-dialog label{display:grid;gap:7px;margin:0 0 14px;font-size:13px;color:#a7f3d0}.investigation-dialog input,.investigation-dialog textarea,.investigation-dialog select{width:100%;padding:10px 11px;border:1px solid rgba(110,231,183,.22);border-radius:9px;background:#061811;color:white;outline:none}.investigation-dialog input:focus,.investigation-dialog textarea:focus,.investigation-dialog select:focus{border-color:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.12)}.investigation-dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.investigation-dialog-actions button{padding:9px 14px;border:0;border-radius:8px;background:#16a34a;color:white;cursor:pointer}.investigation-dialog-actions button:first-child{background:#174333}
.investigation-context-menu{position:fixed;z-index:23000;width:190px;padding:7px;border:1px solid rgba(110,231,183,.2);border-radius:10px;background:#092318;box-shadow:0 18px 55px rgba(0,0,0,.5)}.investigation-context-menu button{width:100%;padding:10px;border:0;border-radius:7px;background:transparent;color:#ecfdf5;text-align:left;cursor:pointer}.investigation-context-menu button:hover{background:#164e36}.investigation-context-menu .danger{color:#fda4af}
@media(max-width:1100px){.investigation-toolbar{grid-template-columns:1fr}.investigation-case-controls,.investigation-actions{flex-wrap:wrap}.investigation-columns{grid-template-columns:repeat(6,240px)}}


/* ======================================================
   V0.6 — INTEGRAÇÃO ENTRE SISTEMAS
====================================================== */
.investigation-source{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  margin-top:7px;
  padding:3px 7px;
  overflow:hidden;
  color:#93c5fd;
  background:rgba(37,99,235,.12);
  border:1px solid rgba(96,165,250,.22);
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;
}
.constellation-context-menu,
.investigation-context-menu{
  min-width:220px;
}

/* ======================================================
   PESQUISA GLOBAL — v0.7
====================================================== */
.ribbon-button-search{color:var(--sb-secondary)}
.ribbon-button-search:hover{color:var(--sb-text);background:color-mix(in srgb, var(--sb-secondary) 20%, transparent);border-color:color-mix(in srgb, var(--sb-secondary) 38%, transparent);box-shadow:var(--sb-glow-secondary)}
.global-search-workspace{position:fixed;inset:0;z-index:24000;display:flex;flex-direction:column;color:var(--sb-text);background:radial-gradient(circle at 50% -10%,color-mix(in srgb, var(--sb-secondary) 22%, transparent),transparent 38%),linear-gradient(180deg,var(--sb-bg-canvas),var(--sb-bg) 72%)}
.global-search-toolbar{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid color-mix(in srgb, var(--sb-secondary) 16%, transparent);background:rgba(5,13,28,.9);backdrop-filter:blur(20px)}
.global-search-kicker{font-size:10px;letter-spacing:2.2px;color:var(--sb-secondary)}.global-search-toolbar h2{margin:3px 0 0;font-size:25px}.global-search-toolbar button{width:42px;height:42px;border:1px solid color-mix(in srgb, var(--sb-secondary) 22%, transparent);border-radius:var(--sb-radius-md);background:var(--sb-surface-1);color:var(--sb-text);font-size:25px;cursor:pointer}.global-search-toolbar button:hover{background:var(--sb-surface-2)}
.global-search-box{display:flex;align-items:center;gap:12px;margin:22px auto 14px;width:min(920px,calc(100vw - 40px));padding:12px 15px;border:1px solid color-mix(in srgb, var(--sb-secondary) 24%, transparent);border-radius:var(--sb-radius-lg);background:var(--sb-surface-1);box-shadow:var(--sb-shadow-1)}
.global-search-icon{font-size:25px;color:var(--sb-secondary)}.global-search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--sb-text);font-size:17px}.global-search-box input::placeholder{color:var(--sb-text-muted)}.global-search-count{color:var(--sb-text-secondary);font-size:12px;white-space:nowrap}
.global-search-filters{display:flex;gap:7px;flex-wrap:wrap;width:min(920px,calc(100vw - 40px));margin:0 auto 18px}.global-search-filters button{padding:7px 11px;border:1px solid color-mix(in srgb, var(--sb-secondary) 16%, transparent);border-radius:var(--sb-radius-pill);background:var(--sb-surface-1);color:var(--sb-text-secondary);font-size:12px;cursor:pointer}.global-search-filters button:hover,.global-search-filters button.active{color:var(--sb-text);background:var(--sb-secondary);border-color:color-mix(in srgb, var(--sb-secondary) 70%, white 20%)}
.global-search-results{flex:1;overflow:auto;width:min(980px,100%);margin:0 auto;padding:4px 20px 34px}.global-search-group{margin-bottom:22px}.global-search-group-title{margin:0 0 9px;padding:0 4px;color:var(--sb-secondary);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.global-search-result{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;margin-bottom:8px;padding:12px 14px;border:1px solid var(--sb-border);border-radius:var(--sb-radius-md);background:var(--sb-surface-1);color:var(--sb-text);text-align:left;cursor:pointer;transition:transform var(--sb-duration-fast) var(--sb-ease-standard),background var(--sb-duration-fast) var(--sb-ease-standard),border-color var(--sb-duration-fast) var(--sb-ease-standard)}.global-search-result:hover{transform:translateY(-1px);background:var(--sb-surface-2);border-color:color-mix(in srgb, var(--sb-secondary) 48%, transparent)}.global-search-result-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--sb-radius-sm);background:color-mix(in srgb, var(--sb-secondary) 14%, transparent);font-size:20px}.global-search-result-copy{min-width:0}.global-search-result h3{margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.global-search-result p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sb-text-secondary);font-size:12px}.global-search-result-type{padding:5px 8px;border-radius:var(--sb-radius-pill);background:color-mix(in srgb, var(--sb-secondary) 13%, transparent);color:var(--sb-secondary);font-size:10px;font-weight:700;text-transform:uppercase}.global-search-empty{padding:90px 20px;text-align:center;color:var(--sb-text-secondary)}.global-search-empty>div{font-size:52px;color:var(--sb-secondary)}.global-search-empty h3{margin:12px 0 6px;color:var(--sb-text)}.global-search-empty p{margin:0}.global-search-result mark{padding:0 2px;border-radius:3px;background:#facc15;color:#111827}
@media(max-width:700px){.global-search-box{margin-top:14px}.global-search-count{display:none}.global-search-result{grid-template-columns:38px minmax(0,1fr)}.global-search-result-type{display:none}.global-search-toolbar{padding:14px 16px}.global-search-filters{padding:0 4px}}
.constellation-node.search-highlight{outline:3px solid #facc15;outline-offset:5px;filter:brightness(1.35);animation:searchPulse .7s ease-in-out 2}@keyframes searchPulse{50%{transform:scale(1.05)}}

/* ======================================================
   BACKUP E RECUPERAÇÃO — v0.8
====================================================== */
.ribbon-button-backup{color:var(--sb-secondary)}
.ribbon-button-backup:hover{color:var(--sb-text);background:color-mix(in srgb, var(--sb-secondary) 22%, transparent);border-color:color-mix(in srgb, var(--sb-secondary) 38%, transparent);box-shadow:var(--sb-glow-secondary)}
.backup-workspace{position:fixed;z-index:15000;inset:0;overflow:auto;padding:26px;background:radial-gradient(circle at 50% 0,rgba(37,99,235,.16),transparent 36%),#080d18;color:#f8fafc}
.backup-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:-26px -26px 26px;padding:22px 28px;background:rgba(8,13,24,.9);border-bottom:1px solid rgba(148,163,184,.16);backdrop-filter:blur(18px)}
.backup-toolbar h2,.backup-history-header h3{margin:4px 0 0;font-size:25px}.backup-kicker{color:#60a5fa;font-size:11px;font-weight:800;letter-spacing:1.6px}
#closeBackupButton{width:42px;height:42px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#111827;color:#fff;font-size:26px;cursor:pointer}
.backup-grid{display:grid;grid-template-columns:repeat(3,minmax(230px,1fr));gap:18px;max-width:1180px;margin:0 auto 24px}
.backup-card{padding:24px;border:1px solid rgba(96,165,250,.2);border-radius:18px;background:linear-gradient(160deg,rgba(30,41,59,.92),rgba(15,23,42,.9));box-shadow:0 18px 55px rgba(0,0,0,.3)}
.backup-card-icon{width:48px;height:48px;display:grid;place-items:center;margin-bottom:18px;border-radius:14px;background:rgba(37,99,235,.18);color:#93c5fd;font-size:26px}.backup-card h3{margin:0 0 9px;font-size:19px}.backup-card p{min-height:64px;margin:0 0 20px;color:#94a3b8;line-height:1.5;font-size:13px}
.backup-card button,.backup-history-panel button{min-height:38px;padding:0 15px;border:1px solid rgba(96,165,250,.3);border-radius:9px;background:#2563eb;color:#fff;font-weight:700;cursor:pointer}.backup-card button:hover,.backup-history-panel button:hover{filter:brightness(1.12)}
.backup-toggle{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:#cbd5e1;font-size:13px}.backup-toggle input{width:18px;height:18px;accent-color:#2563eb}
.backup-history-panel{max-width:1180px;margin:0 auto;padding:22px;border:1px solid rgba(148,163,184,.16);border-radius:18px;background:rgba(15,23,42,.78)}
.backup-history-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}.backup-history-panel .backup-danger{background:rgba(190,24,93,.18);border-color:rgba(251,113,133,.35);color:#fecdd3}
.backup-history-list{display:flex;flex-direction:column;gap:10px}.backup-history-empty{padding:42px 20px;text-align:center;color:#64748b;border:1px dashed rgba(148,163,184,.2);border-radius:12px}
.backup-history-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:15px 16px;border:1px solid rgba(148,163,184,.13);border-radius:12px;background:rgba(2,6,23,.5)}
.backup-history-title{font-weight:750}.backup-history-meta{margin-top:4px;color:#64748b;font-size:12px}.backup-history-actions{display:flex;gap:8px}.backup-history-actions button{min-height:34px;background:#1e3a8a}.backup-history-actions .backup-delete-one{background:transparent;border-color:rgba(251,113,133,.3);color:#fda4af}
@media (max-width:900px){.backup-grid{grid-template-columns:1fr}.backup-card p{min-height:0}.backup-workspace{padding:16px}.backup-toolbar{margin:-16px -16px 18px;padding:18px}.backup-history-item{grid-template-columns:1fr}.backup-history-actions{flex-wrap:wrap}}

/* ======================================================
   V0.9 — POLIMENTO FINAL
   Performance, animações, UX, acessibilidade e responsividade.
====================================================== */
:root{
  color-scheme:dark;
  /* Alinhado ao token oficial de marca (DS1) — deixa de ser um azul
     dissociado da paleta para usar --sb-primary, tal como o resto do
     Focus Ring e dos indicadores "active" que dependem desta variável.
     --surface-glass* e --ease-smooth ficam fora do âmbito da Phase A
     (usados por Toast/investigation/constellation/backup, não listados
     em DS1-DS3) e mantêm o seu valor literal original — ver
     ARCHITECTURE_DECISION.md. */
  --focus-ring:var(--sb-primary);
  --surface-glass:rgba(13,19,34,.84);
  --surface-glass-strong:rgba(17,24,39,.94);
  --ease-smooth:cubic-bezier(.2,.8,.2,1);
}

html{scroll-behavior:smooth}
body{opacity:1;transition:opacity .18s ease}
.js-enabled body:not(.sb-ready){opacity:.01}

button,
[role="button"],
input,
textarea,
select{
  -webkit-tap-highlight-color:transparent;
}

button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible{
  outline:2px solid var(--focus-ring)!important;
  outline-offset:3px!important;
  /* DS1 — Focus Ring: mesma receita de --sb-focus-ring (halo em
     color-mix sobre --sb-primary), mantendo o raio de 5px já usado
     em produção para não alterar o comportamento existente. */
  box-shadow:0 0 0 5px color-mix(in srgb, var(--sb-primary) 14%, transparent)!important;
}

button:disabled,
[aria-disabled="true"]{
  cursor:not-allowed!important;
  filter:saturate(.55);
}

.ribbon,
.sidebar,
.tab-bar,
.context-menu,
.dialog,
.constellation-toolbar,
.investigation-toolbar,
.global-search-toolbar,
.backup-toolbar{
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}

.ribbon-button,
.editor-tab,
.galaxy-item,
.note-item,
.menu-item,
.global-search-result,
.investigation-card,
.constellation-node,
.backup-card,
.backup-history-item{
  transition-duration:160ms!important;
  transition-timing-function:var(--ease-smooth)!important;
}

.ribbon-button:hover,
.menu-item:hover,
.global-search-result:hover,
.backup-card:hover{
  transform:translateY(-1px);
}

.editor-tab.active{
  box-shadow:inset 0 -2px 0 var(--focus-ring),0 8px 24px rgba(0,0,0,.18);
}

.galaxy-list,
.tab-bar,
.global-search-results,
.backup-workspace,
.investigation-board,
.constellation-canvas{
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.38) transparent;
}

.galaxy-list::-webkit-scrollbar,
.tab-bar::-webkit-scrollbar,
.global-search-results::-webkit-scrollbar,
.backup-workspace::-webkit-scrollbar,
.investigation-board::-webkit-scrollbar,
.constellation-canvas::-webkit-scrollbar{
  width:9px;
  height:9px;
}

.galaxy-list::-webkit-scrollbar-thumb,
.tab-bar::-webkit-scrollbar-thumb,
.global-search-results::-webkit-scrollbar-thumb,
.backup-workspace::-webkit-scrollbar-thumb,
.investigation-board::-webkit-scrollbar-thumb,
.constellation-canvas::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:999px;
  background:rgba(148,163,184,.34);
  background-clip:padding-box;
}

.toast{
  max-width:min(420px,calc(100vw - 32px));
  border-color:rgba(147,197,253,.18);
  background:var(--surface-glass-strong);
  animation:toastIn .2s var(--ease-smooth);
}

.dialog-overlay,
.constellation-dialog-overlay,
.investigation-dialog-overlay{
  animation:polishFadeIn .16s ease-out;
}

.dialog,
.constellation-dialog,
.investigation-dialog{
  animation:polishDialogIn .22s var(--ease-smooth);
}

.global-search-workspace,
.backup-workspace,
.constellation-workspace,
.investigation-workspace{
  animation:polishWorkspaceIn .22s var(--ease-smooth);
}

.sb-runtime-error::after{
  content:"Ocorreu um erro inesperado. Consulta a consola para diagnóstico.";
  position:fixed;
  z-index:30000;
  right:18px;
  bottom:18px;
  max-width:420px;
  padding:12px 16px;
  border:1px solid rgba(251,113,133,.42);
  border-radius:12px;
  color:#ffe4e6;
  background:rgba(76,5,25,.95);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
  font-size:13px;
}

@keyframes polishFadeIn{from{opacity:0}to{opacity:1}}
@keyframes polishDialogIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes polishWorkspaceIn{from{opacity:0;transform:scale(.995)}to{opacity:1;transform:none}}

@media (max-width:900px){
  :root{--sidebar-width:250px}
  .editor-page{padding:48px 36px}
  .editor-title{font-size:clamp(30px,7vw,42px)}
  .editor-text{font-size:18px}
  .backup-toolbar,.global-search-toolbar{position:sticky;top:0}
}

@media (max-width:640px){
  :root{--sidebar-width:min(82vw,280px)}
  .ribbon{width:50px;min-width:50px;padding-inline:5px}
  .ribbon-button{width:38px;height:38px}
  .sidebar{padding:16px 10px}
  .editor-page{padding:34px 20px}
  .editor-tab{min-width:150px;max-width:210px}
  .tab-universe{max-width:82px;overflow:hidden;text-overflow:ellipsis}
  .toast{right:12px;bottom:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

@media (prefers-contrast:more){
  :root{--border:rgba(255,255,255,.24);--muted:#c4cadb}
  .galaxy-item,.note-item,.editor-tab,.menu-item{border-color:rgba(255,255,255,.16)}
}

/* Semantic Brain v1.1 — ligação e constelações */
.sb-link-overlay{position:fixed;inset:0;z-index:50000;display:grid;place-items:center;background:rgba(1,4,15,.72);backdrop-filter:blur(12px)}
.sb-link-modal{width:min(440px,calc(100vw - 32px));display:grid;gap:12px;padding:22px;border:1px solid rgba(190,120,255,.55);border-radius:15px;background:linear-gradient(180deg,rgba(15,22,38,.98),rgba(5,10,23,.98));box-shadow:0 24px 90px #000,0 0 45px rgba(139,92,246,.2)}
.sb-link-modal h2{margin:0;color:#f1c5ff;font-size:18px}.sb-link-modal blockquote{margin:0;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:9px;color:white;background:rgba(255,255,255,.04)}
.sb-link-modal>button,.sb-link-modal .actions button{min-height:42px;border:1px solid rgba(255,255,255,.12);border-radius:9px;color:white;background:rgba(255,255,255,.045);cursor:pointer;text-align:left;padding:0 13px}.sb-link-modal>button:hover,.sb-link-modal .actions button:hover{border-color:#a855f7;background:rgba(168,85,247,.13)}
.sb-link-modal label{display:grid;gap:6px;color:#cbd5e1;font-size:12px}.sb-link-modal input,.sb-link-modal textarea,.sb-link-modal select{width:100%;padding:10px;border:1px solid rgba(255,255,255,.13);border-radius:7px;color:white;background:#0b1220;outline:none}.sb-link-modal .actions{display:flex;gap:9px;justify-content:flex-end}.sb-link-modal .actions button{text-align:center}.sb-link-modal .secondary{opacity:.75}
.sb-linked-strip{position:absolute;right:24px;top:18px;z-index:30;display:flex;gap:7px;max-width:55%;overflow:auto;padding:6px}.sb-linked-strip button{padding:6px 10px;border:1px solid rgba(168,85,247,.45);border-radius:999px;color:#e9d5ff;background:rgba(88,28,135,.22);cursor:pointer;white-space:nowrap}.sb-linked-strip button:hover{background:rgba(168,85,247,.34);box-shadow:0 0 18px rgba(168,85,247,.25)}
.brain-mode-switch{position:fixed;z-index:10000;top:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:6px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(5,10,24,.82);backdrop-filter:blur(14px)}.brain-mode-switch button{padding:8px 14px;border:1px solid transparent;border-radius:8px;color:#cbd5e1;background:transparent;cursor:pointer}.brain-mode-switch button.active{color:white;border-color:var(--mode-color,#8b5cf6);box-shadow:0 0 18px color-mix(in srgb,var(--mode-color,#8b5cf6) 38%,transparent)}
.constellation-scene{position:absolute;inset:72px 24px 24px;overflow:auto}.constellation-overview{position:relative;min-width:900px;min-height:650px}.constellation-star-node{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;border:0;color:white;background:transparent;cursor:pointer}.constellation-star-node::before{content:"";width:150px;height:70px;border-radius:50%;background:radial-gradient(ellipse,#fff 0 3%,var(--node-color,#9b5cf6) 12%,color-mix(in srgb,var(--node-color,#9b5cf6) 55%,transparent) 35%,transparent 72%);filter:drop-shadow(0 0 18px var(--node-color,#9b5cf6));transform:rotate(-12deg)}.constellation-star-node.context::before{width:115px;height:54px}.constellation-star-node.expression::before{width:82px;height:38px}.constellation-star-node span{position:absolute;top:calc(50% + 42px);white-space:nowrap;font-weight:700;text-shadow:0 2px 8px #000}.constellation-star-node.expression span{top:calc(50% + 28px);font-size:12px}.constellation-links-layer{position:absolute;inset:0;pointer-events:none}.constellation-links-layer path{fill:none;stroke:#a855f7;stroke-width:1.5;filter:drop-shadow(0 0 5px #a855f7)}


/* Semantic Brain v1.2 — mapa final de constelações */
.knowledge-scene{position:absolute;inset:72px 20px 20px;overflow:auto;background:radial-gradient(circle at 50% 32%,rgba(79,70,229,.13),transparent 42%)}
.knowledge-board{position:relative;min-width:1800px;min-height:950px;padding:40px}
.knowledge-links{position:absolute;inset:0;pointer-events:none;overflow:visible}
.knowledge-link{fill:none;stroke-width:2;opacity:.86;filter:drop-shadow(0 0 6px currentColor)}
.knowledge-card{position:absolute;transform:translate(-50%,-50%);width:230px;min-height:92px;padding:16px 18px;border:1px solid rgba(129,140,248,.72);border-radius:9px;color:#f8fafc;background:linear-gradient(180deg,rgba(10,22,42,.97),rgba(4,12,27,.97));box-shadow:0 0 0 1px rgba(59,130,246,.08),0 18px 45px rgba(0,0,0,.42),0 0 28px rgba(99,102,241,.12);display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;z-index:5}
.knowledge-card:hover{transform:translate(-50%,-50%) scale(1.045);border-color:#c084fc;box-shadow:0 18px 50px rgba(0,0,0,.48),0 0 34px rgba(168,85,247,.3)}
.knowledge-card.root{width:270px;min-height:104px;border-color:#a855f7}.knowledge-card.context{width:240px;border-color:#60a5fa}.knowledge-card.expression{width:210px;min-height:132px;border-color:#3b82f6}
.knowledge-symbol{font-size:22px;color:#fbbf24;text-shadow:0 0 14px #f59e0b}.knowledge-card strong{font-size:15px}.knowledge-card small{color:#a5b4fc;line-height:1.35}
.source-link{margin-top:auto;border:0;background:transparent;color:#93c5fd;text-decoration:underline;cursor:pointer;font-size:12px}
.brain-constellation-menu{position:fixed;z-index:30000;width:220px;padding:7px;border:1px solid rgba(168,85,247,.5);border-radius:10px;background:rgba(7,12,25,.98);box-shadow:0 20px 60px rgba(0,0,0,.65)}
.brain-constellation-menu button{width:100%;padding:10px 12px;border:0;border-radius:7px;background:transparent;color:#eef2ff;text-align:left;cursor:pointer}.brain-constellation-menu button:hover{background:rgba(168,85,247,.16)}.brain-constellation-menu .danger{color:#fda4af}
.investigation-summary{padding:70px 35px;color:white}.investigation-summary h1{color:#86efac}


/* =====================================================
   v1.3 — Pesquisa e universo visual das constelações
===================================================== */
.sb-constellation-search-results{display:grid;gap:8px;max-height:280px;overflow:auto;margin:8px 0 14px;padding:4px}
.sb-constellation-search-item{display:flex!important;flex-direction:column;align-items:flex-start!important;gap:4px!important;padding:12px 14px!important;border:1px solid rgba(139,92,246,.25)!important;border-radius:10px!important;background:rgba(15,23,42,.82)!important;color:#fff!important;text-align:left!important}
.sb-constellation-search-item:hover,.sb-constellation-search-item.selected{border-color:#a78bfa!important;background:rgba(91,33,182,.28)!important;box-shadow:0 0 22px rgba(139,92,246,.18)}
.sb-constellation-search-item small,.sb-link-modal label small{color:#94a3b8;font-size:12px}.sb-search-empty{color:#94a3b8;text-align:center;padding:18px}
.constellation-galaxy-scene{position:absolute;inset:72px 20px 20px;overflow:auto;background:radial-gradient(circle at 50% 35%,rgba(79,70,229,.15),transparent 42%)}
.constellation-galaxy{position:absolute;width:220px;height:190px;transform:translate(-50%,-50%);border:0;background:transparent;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;animation:galaxyBirth .55s ease both}
.constellation-galaxy-core{width:150px;height:82px;border-radius:50%;background:radial-gradient(ellipse at center,#fff 0 4%,#c4b5fd 8%,rgba(139,92,246,.85) 24%,rgba(59,130,246,.35) 48%,transparent 72%);box-shadow:0 0 30px rgba(167,139,250,.8),0 0 90px rgba(59,130,246,.32);transform:rotate(-16deg);transition:.25s}
.constellation-galaxy:hover .constellation-galaxy-core{transform:rotate(-12deg) scale(1.1);filter:brightness(1.2)}
.constellation-galaxy strong{font-size:16px;text-shadow:0 2px 14px #000}.constellation-galaxy small{color:#a5b4fc}
.knowledge-card.focused{border-color:#fbbf24!important;box-shadow:0 0 0 2px rgba(251,191,36,.3),0 0 42px rgba(251,191,36,.35)!important}
.knowledge-card .source-link{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:7px;background:rgba(59,130,246,.13);color:#93c5fd;font-size:12px;cursor:pointer}

/* =====================================================
   brain02 — Pesquisa progressiva de constelações
===================================================== */
.sb-progressive-search{display:grid;gap:14px}
.sb-progressive-breadcrumbs{display:flex;align-items:center;gap:7px;min-height:28px;overflow-x:auto;color:#94a3b8;font-size:12px}
.sb-progressive-breadcrumbs button{border:0;background:transparent;color:#c4b5fd;cursor:pointer;padding:4px 6px;border-radius:6px}
.sb-progressive-breadcrumbs button:hover{background:rgba(139,92,246,.15);color:#fff}
.sb-progressive-root{color:#a78bfa;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.sb-progressive-selected{display:grid;gap:6px;padding:10px 12px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.035)}
.sb-progressive-selected>span{color:#94a3b8;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.sb-progressive-selected blockquote{padding:0!important;border:0!important;background:transparent!important;font-size:14px}
.sb-progressive-input-wrap{position:relative;display:flex!important;align-items:center!important;gap:9px!important;padding:0 13px;border:1px solid rgba(167,139,250,.46);border-radius:11px;background:rgba(7,12,25,.92);box-shadow:0 0 24px rgba(139,92,246,.12)}
.sb-progressive-search-icon{font-size:21px;color:#a78bfa}
.sb-progressive-input-wrap input{height:48px!important;padding:0!important;border:0!important;background:transparent!important;font-size:16px!important;box-shadow:none!important}
.sb-progressive-results{display:grid;gap:7px;max-height:310px;overflow:auto;padding:2px}
.sb-progressive-result{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;width:100%;min-height:50px;padding:10px 12px!important;border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;color:#f8fafc!important;text-align:left!important;cursor:pointer}
.sb-progressive-result strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-progressive-result small{flex:none;color:#94a3b8;font-size:11px}
.sb-progressive-result:hover,.sb-progressive-result.active{border-color:rgba(167,139,250,.5)!important;background:rgba(91,33,182,.24)!important;box-shadow:0 0 20px rgba(139,92,246,.12)}
.sb-progressive-help{display:flex;justify-content:space-between;color:#64748b;font-size:11px}

/* brain03 — Ligação instantânea sem fechar a pesquisa */
.sb-progressive-status{min-height:0;max-height:0;overflow:hidden;opacity:0;padding:0 12px;border:1px solid transparent;border-radius:9px;color:#bbf7d0;background:rgba(22,101,52,.16);font-size:12px;line-height:1.45;transition:max-height .2s ease,opacity .2s ease,padding .2s ease,border-color .2s ease}
.sb-progressive-status.visible{max-height:80px;opacity:1;padding:9px 12px;border-color:rgba(74,222,128,.28)}

/* brain05 — constelações totalmente editáveis */
.constellation-galaxy { user-select:none; }
.constellation-galaxy:focus-visible,
.knowledge-card.root:focus-visible { outline:2px solid rgba(196,181,253,.95); outline-offset:5px; }
.brain-constellation-menu.constellation-actions-menu { min-width:210px; }
.brain-constellation-menu.constellation-actions-menu button { text-align:left; }


/* brain09 — Auto Complete em tempo real */
.sb-progressive-input-wrap{overflow:hidden}
.sb-progressive-autocomplete{position:absolute;left:43px;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(196,181,253,.32);font-size:16px;opacity:0;transition:opacity .12s ease}
.sb-progressive-autocomplete.visible{opacity:1}
.sb-progressive-input-wrap input{position:relative;z-index:1;color:#fff!important}
.sb-progressive-result.active strong::after{content:"  ↵";color:#a78bfa;font-size:11px;font-weight:700}

/* brain10 — Histórico Inteligente da Pesquisa Progressiva */
.sb-history-dashboard {
  display: grid;
  gap: 14px;
  padding: 4px 0 2px;
}
.sb-history-section {
  display: grid;
  gap: 7px;
}
.sb-history-section h3 {
  margin: 0;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .58;
}
.sb-history-list {
  display: grid;
  gap: 5px;
}
.sb-history-item,
.sb-history-query {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  border-radius: 10px;
  padding: 9px 11px;
  text-align: left;
  background: rgba(255,255,255,.045);
  color: inherit;
  cursor: pointer;
}
.sb-history-item:hover,
.sb-history-query:hover,
.sb-history-item:focus-visible,
.sb-history-query:focus-visible {
  background: rgba(255,255,255,.09);
  outline: none;
}
.sb-history-item strong,
.sb-history-query strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.sb-history-item small,
.sb-history-query small {
  flex: 0 0 auto;
  font-size: 11px;
  opacity: .52;
}
.sb-history-empty {
  margin: 0;
  padding: 7px 11px;
  font-size: 12px;
  opacity: .42;
}


.inline-node-editor{

    width:100%;

    padding:4px 8px;

    background:transparent;

    color:white;

    border:none;

    outline:none;

    text-align:center;

    font-size:18px;

    font-weight:700;

}


/* Semantic Brain brain12 — editor completo de constelações */
.constellation-galaxy-core{background:radial-gradient(ellipse at center,#fff 0 4%,color-mix(in srgb,var(--constellation-color,#8b5cf6) 35%,#fff) 8%,var(--constellation-color,#8b5cf6) 26%,color-mix(in srgb,var(--constellation-color,#8b5cf6) 42%,transparent) 50%,transparent 72%);box-shadow:0 0 30px color-mix(in srgb,var(--constellation-color,#8b5cf6) 78%,transparent),0 0 90px color-mix(in srgb,var(--constellation-color,#8b5cf6) 35%,transparent)}
.knowledge-card.root{border-color:var(--constellation-color,#a855f7);box-shadow:0 0 0 1px color-mix(in srgb,var(--constellation-color,#8b5cf6) 20%,transparent),0 18px 45px rgba(0,0,0,.42),0 0 30px color-mix(in srgb,var(--constellation-color,#8b5cf6) 20%,transparent)}
.brain-color-popover{position:fixed;z-index:30010;width:176px;padding:12px;border:1px solid rgba(168,85,247,.5);border-radius:11px;background:rgba(7,12,25,.99);box-shadow:0 20px 60px rgba(0,0,0,.65);color:#eef2ff}.brain-color-popover>strong{display:block;margin-bottom:10px;font-size:12px}.brain-color-popover>div{display:grid;grid-template-columns:repeat(4,30px);gap:8px}.brain-color-popover button{width:30px;height:30px;border:2px solid transparent;border-radius:50%;background:var(--choice);cursor:pointer;box-shadow:0 0 14px color-mix(in srgb,var(--choice) 45%,transparent)}.brain-color-popover button.active{border-color:#fff;transform:scale(1.08)}
.brain-properties-overlay{position:fixed;inset:0;z-index:40000;display:grid;place-items:center;padding:22px;background:rgba(2,6,18,.72);backdrop-filter:blur(10px)}.brain-properties-dialog{width:min(580px,100%);max-height:90vh;overflow:auto;padding:22px;border:1px solid rgba(139,92,246,.55);border-radius:16px;background:linear-gradient(180deg,rgba(11,18,36,.99),rgba(4,9,22,.99));box-shadow:0 28px 90px rgba(0,0,0,.72);color:#f8fafc}.brain-properties-dialog header,.brain-properties-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.brain-properties-dialog header{margin-bottom:18px}.brain-properties-dialog header h2{margin:2px 0 0}.brain-properties-dialog header small{color:#a5b4fc}.brain-properties-dialog header button{width:34px;height:34px;border:0;border-radius:8px;background:rgba(255,255,255,.07);color:#fff;font-size:22px;cursor:pointer}.brain-properties-dialog label{display:grid;gap:7px;margin:13px 0;color:#cbd5e1;font-size:13px}.brain-properties-dialog input,.brain-properties-dialog textarea,.brain-properties-dialog select{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid rgba(148,163,184,.25);border-radius:9px;background:rgba(15,23,42,.9);color:#f8fafc;font:inherit}.brain-properties-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.brain-properties-dialog dl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.brain-properties-dialog dl div{padding:11px;border-radius:9px;background:rgba(99,102,241,.09)}.brain-properties-dialog dt{font-size:11px;color:#94a3b8}.brain-properties-dialog dd{margin:4px 0 0;font-weight:700}.brain-properties-dialog footer{justify-content:flex-end;margin-top:18px}.brain-properties-dialog footer button{padding:10px 17px;border:0;border-radius:9px;background:#7c3aed;color:#fff;cursor:pointer}.brain-properties-dialog footer .secondary{background:rgba(148,163,184,.12)}
@media(max-width:620px){.brain-properties-grid,.brain-properties-dialog dl{grid-template-columns:1fr}}

/* brain14 — polimento final: acessibilidade, foco e movimento reduzido */
:where(button, [role="button"], input, textarea, select, a, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

:where(button, [role="button"], .tree-row, .constellation-node, .investigation-card) {
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :where(button, input, textarea, select, .context-menu, .modal, .dialog) {
    border-width: 2px;
  }
}

/* Ctrl+E — criação e pesquisa na mesma janela */
.sb-progressive-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sb-progressive-actions button{min-height:40px;padding:9px 12px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.035);color:#cbd5e1;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.sb-progressive-actions button:hover{border-color:rgba(167,139,250,.42);background:rgba(139,92,246,.12);color:#fff}
.sb-progressive-actions button.active{border-color:rgba(167,139,250,.62);background:rgba(91,33,182,.28);color:#fff;box-shadow:0 0 18px rgba(139,92,246,.12)}
.sb-progressive-actions button:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
.sb-create-constellation-hint{display:grid;gap:6px;padding:16px;border:1px dashed rgba(167,139,250,.35);border-radius:10px;background:rgba(91,33,182,.08);color:#f8fafc}
.sb-create-constellation-hint small{color:#94a3b8;line-height:1.45}
@media (max-width:560px){.sb-progressive-actions{grid-template-columns:1fr}}

/* ======================================================
   PORTAIS SEMANTIC BRAIN — NOTA ⇄ CONSTELAÇÃO
====================================================== */

.semantic-rich-editor{
  width:100%;
  height:calc(100% - 100px);
  padding:0;
  overflow:auto;

  border:0;
  outline:0;

  color:#ffffff;
  background:transparent;

  font-size:20px;
  line-height:1.6;

  white-space:pre-wrap;
  overflow-wrap:anywhere;

  caret-color:#ffffff;
}

.semantic-rich-editor:empty::before{
  content:attr(data-placeholder);
  color:rgba(255,255,255,.35);
  pointer-events:none;
}

.semantic-note-link{
  position:relative;

  color:#f8fbff;

  text-decoration-line:underline;
  text-decoration-color:#facc15;
  text-decoration-thickness:2px;
  text-underline-offset:4px;

  border-radius:4px;

  cursor:pointer;

  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.semantic-note-link:hover{
  color:#fff7b3;
  background:rgba(250,204,21,.12);

  box-shadow:
    0 0 0 3px rgba(250,204,21,.08),
    0 0 18px rgba(250,204,21,.15);
}

.semantic-note-link::after{
  content:"⭐ Ligação Semantic Brain · clique para abrir";

  position:absolute;
  z-index:30000;
  left:50%;
  bottom:calc(100% + 11px);

  width:max-content;
  max-width:310px;

  padding:8px 11px;

  border:1px solid rgba(250,204,21,.35);
  border-radius:8px;

  color:#fff8c5;
  background:rgba(15,18,30,.97);

  font-size:12px;
  font-weight:700;
  line-height:1.35;

  box-shadow:
    0 12px 35px rgba(0,0,0,.48),
    0 0 20px rgba(250,204,21,.12);

  opacity:0;
  pointer-events:none;

  transform:
    translate(-50%,6px);

  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.semantic-note-link:hover::after{
  opacity:1;

  transform:
    translate(-50%,0);
}

.semantic-note-link-highlight{
  animation:
    semanticNoteReveal 2.2s ease;
}

@keyframes semanticNoteReveal{
  0%{
    color:#ffffff;
    background:transparent;
    box-shadow:none;
  }

  18%,
  65%{
    color:#211800;
    background:#fde047;

    box-shadow:
      0 0 0 6px rgba(253,224,71,.18),
      0 0 38px rgba(250,204,21,.9),
      0 0 75px rgba(250,204,21,.45);
  }

  100%{
    color:#f8fbff;
    background:transparent;
    box-shadow:none;
  }
}

.source-link{
  position:relative;
  z-index:4;

  display:inline-flex;
  align-items:center;

  width:max-content;
  max-width:100%;

  margin-top:7px;
  padding:4px 8px;

  border:1px solid rgba(96,165,250,.24);
  border-radius:7px;

  color:#93c5fd;
  background:rgba(37,99,235,.12);

  text-decoration:underline;
  text-underline-offset:3px;

  cursor:pointer;
  pointer-events:auto;

  transition:
    color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.source-link:hover{
  color:#ffffff;
  background:rgba(37,99,235,.28);

  box-shadow:
    0 0 18px rgba(96,165,250,.3);
}

.knowledge-card.expression.focused,
.knowledge-card.expression.semantic-expression-reveal{
  z-index:100;

  animation:
    semanticExpressionReveal 2.4s ease;
}

@keyframes semanticExpressionReveal{
  0%{
    transform:translate(-50%,-50%) scale(1);
    filter:brightness(1);
  }

  18%,
  68%{
    transform:translate(-50%,-50%) scale(1.1);

    border-color:#fde047;

    filter:
      brightness(1.35)
      saturate(1.2);

    box-shadow:
      0 0 0 5px rgba(253,224,71,.16),
      0 0 38px rgba(250,204,21,.95),
      0 0 90px rgba(250,204,21,.48);
  }

  100%{
    transform:translate(-50%,-50%) scale(1);
    filter:brightness(1);
  }
}

/* ======================================================
   PERSONAGENS + DIÁRIO — extensão mínima da investigação
====================================================== */
.investigation-columns{grid-template-columns:repeat(7,minmax(230px,1fr));min-width:1750px}
.investigation-character-fields{padding:12px;margin:4px 0 14px;border:1px solid rgba(110,231,183,.16);border-radius:10px;background:rgba(6,24,17,.55)}
.investigation-character-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.investigation-character-meta span{padding:3px 6px;border-radius:999px;background:rgba(52,211,153,.1);color:#a7f3d0;font-size:9px;font-weight:700}
.investigation-contradiction{display:block;margin-top:8px;color:#fbbf24;font-size:10px;font-weight:800}
.character-diary-dialog{width:min(760px,calc(100vw - 32px));max-height:90vh;overflow:auto}
.character-diary-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px}.character-diary-header h2{margin:3px 0 0}.character-diary-header>button{width:38px;height:38px;border:1px solid rgba(110,231,183,.25);border-radius:9px;background:#123524;color:white;font-size:24px;cursor:pointer}
.character-diary-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:18px}.character-diary-info>div{display:grid;gap:4px;padding:10px;border:1px solid rgba(110,231,183,.14);border-radius:9px;background:rgba(6,24,17,.6)}.character-diary-info strong{color:#6ee7b7;font-size:10px;text-transform:uppercase;letter-spacing:1px}.character-diary-info span{font-size:13px}
.character-diary-section-title{margin:12px 0 9px;color:#6ee7b7;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.character-diary-entries{display:flex;flex-direction:column;gap:10px;max-height:350px;overflow:auto;padding-right:4px}.character-diary-entry{padding:12px;border:1px solid rgba(110,231,183,.16);border-radius:11px;background:rgba(14,48,34,.75);transition:box-shadow .2s,border-color .2s}.character-diary-entry header{display:flex;align-items:center;gap:9px;margin-bottom:8px}.character-diary-entry header strong{color:#86efac}.character-diary-entry header span{flex:1;color:#94a3b8;font-size:11px}.character-diary-entry header button{border:0;background:transparent;color:#fda4af;font-size:18px;cursor:pointer}.character-diary-text{user-select:text;white-space:normal;line-height:1.65;cursor:text}.character-diary-empty{padding:30px;text-align:center;color:#94a3b8}.character-diary-entry.diary-highlight{border-color:#facc15;box-shadow:0 0 0 3px rgba(250,204,21,.17),0 0 30px rgba(250,204,21,.12)}
.character-diary-form{margin-top:18px;padding-top:16px;border-top:1px solid rgba(110,231,183,.13)}.character-diary-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.diary-selection-menu{width:230px}
.investigation-timeline-dialog{width:min(780px,calc(100vw - 32px));max-height:88vh;overflow:auto}.investigation-timeline-entries{display:flex;flex-direction:column;gap:9px}.investigation-timeline-entry{display:grid;grid-template-columns:70px 60px 140px 1fr;gap:10px;align-items:center;width:100%;padding:12px;border:1px solid rgba(110,231,183,.15);border-radius:10px;background:rgba(14,48,34,.76);color:#ecfdf5;text-align:left;cursor:pointer}.investigation-timeline-entry:hover{background:#164e36}.investigation-timeline-entry p{margin:0;color:#a7f3d0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timeline-day{color:#86efac;font-weight:800}.timeline-time{color:#94a3b8;font-size:11px}
@media(max-width:800px){.character-diary-info{grid-template-columns:1fr}.investigation-timeline-entry{grid-template-columns:60px 50px 1fr}.investigation-timeline-entry p{grid-column:1/-1}.character-diary-row{grid-template-columns:1fr}}