/* =============================================================
   VIKI COMMAND CENTER
   Sala de comando interna. Os tokens vêm do design system do
   vikiia.com.br (Site_VIKI/assets/css/viki.css) — mesma família
   de superfícies, mesma luz, mesma tipografia. O site é a vitrine;
   isto aqui é o que existe atrás dela.
   ============================================================= */

:root{
  /* superfícies — do site */
  --bg-0:#020611; --bg-1:#030914; --bg-2:#04101c;
  --glass:rgba(7,20,34,.62); --glass-strong:rgba(8,24,42,.82);
  /* luz — do site */
  --cyan:#00D9FF; --blue:#008DFF; --ice:#DDF9FF;
  --violet:#634BFF; --violet-l:#A377FF;
  --tx:#F2F8FC; --tx2:#A8BCCD; --tx3:#6C8395;
  --line:rgba(63,177,255,.18); --line-on:rgba(0,200,255,.55);
  --ok:#38E8C6; --warn:#FFB75E; --bad:#FF5570;
  --glow-c:0 0 40px rgba(0,200,255,.25);

  --f-disp:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --nucleo:112px;
  --ease:cubic-bezier(.2,.7,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --rail:92px;
  --bar:64px;

  /* Escala tipográfica. A regra da casa: MONO só carrega DADO TÉCNICO —
     id, versão, hash, timestamp, heartbeat, latência, contagem de tools.
     Rótulo é Inter com tracking curto; título é Sora. Mono em tudo fazia a
     tela parecer console de engenharia, não produto. */
  --lbl:500 11.5px/1.3 var(--f-body);     /* rótulo de campo */
  --lbl-ls:.04em;
  --eyebrow:500 10.5px/1 var(--f-body);   /* sobretítulo de seção */
  --eyebrow-ls:.16em;
  --dado:500 12.5px/1.4 var(--f-mono);    /* valor técnico */
  --dado-ls:.01em;

  --glass-blur:blur(16px) saturate(1.05);
  --lift:0 1px 0 rgba(255,255,255,.035) inset;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg-0); color:var(--tx);
  font:400 15px/1.55 var(--f-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:rgba(0,217,255,.24)}

/* ---------------------------------------------------- profundidade
   Três camadas, como no site: malha técnica quase invisível, dois
   halos de luz e uma vinheta. Nada de wallpaper. */
.field{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.field__grid{
  position:absolute;inset:-10%;
  background-image:
    linear-gradient(rgba(0,141,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,141,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 90% at 58% 34%,#000 0%,transparent 76%);
  mask-image:radial-gradient(120% 90% at 58% 34%,#000 0%,transparent 76%);
}
.field__glow{position:absolute;border-radius:50%;filter:blur(8px)}
.field__glow--c{width:58vw;height:58vw;right:-10vw;top:-22vw;
  background:radial-gradient(circle,rgba(0,141,255,.20),rgba(0,217,255,.05) 42%,transparent 68%)}
.field__glow--v{width:44vw;height:44vw;left:-14vw;bottom:-24vw;
  background:radial-gradient(circle,rgba(99,75,255,.15),rgba(99,75,255,.04) 42%,transparent 68%)}
.field__vig{position:absolute;inset:0;
  background:radial-gradient(140% 105% at 58% 40%,transparent 56%,rgba(1,3,8,.62) 100%)}

/* ---------------------------------------------------------- marca */
.sigil{display:block;color:var(--cyan);filter:drop-shadow(0 0 7px rgba(0,217,255,.45))}
.sigil--sm{width:26px;height:26px}
.sigil--lg{width:44px;height:44px}
@keyframes girar{to{transform:rotate(360deg)}}
.sigil__spin{transform-origin:12px 12px;animation:girar 34s linear infinite}

/* ============================================================ LOGIN */
body.auth{display:grid;place-items:center;position:relative}
.auth__box{
  position:relative;z-index:1;width:min(93vw,420px);padding:40px 36px 30px;
  background:linear-gradient(180deg,rgba(8,24,42,.86),rgba(4,16,28,.78));
  border:1px solid var(--line);border-radius:4px;
  box-shadow:0 40px 120px rgba(0,0,0,.66),var(--glow-c);
  backdrop-filter:blur(14px);
}
.auth__brand{display:flex;align-items:center;gap:13px;margin-bottom:30px}
.auth__wm{font:200 30px/1 var(--f-disp);letter-spacing:.3em;
  background:linear-gradient(100deg,var(--ice),var(--cyan) 55%,var(--violet-l));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.auth__unit{font:500 10px/1.5 var(--f-body);letter-spacing:.2em;color:var(--tx3);
  border-left:1px solid var(--line);padding-left:13px}
.auth__form{display:grid;gap:18px}
.field-in{display:grid;gap:8px}
.field-in__k{font:var(--lbl);letter-spacing:.12em;color:var(--tx3);text-transform:uppercase}
.field-in input{
  background:rgba(2,8,18,.7);border:1px solid var(--line);border-radius:3px;
  color:var(--tx);padding:13px 14px;font:400 15px var(--f-body);outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field-in input:focus{border-color:var(--line-on);box-shadow:0 0 0 3px rgba(0,217,255,.10)}
.auth__msg{min-height:20px;margin:0;font:400 12.5px var(--f-body);color:var(--tx3)}
.auth__msg[data-state="bad"]{color:var(--bad)}
.auth__foot{margin:26px 0 0;font:400 11.5px/1 var(--f-body);letter-spacing:.02em;
  color:var(--tx3);text-align:center}

/* ---------------------------------------------------------- botões */
.btn{
  border:1px solid var(--line);background:rgba(7,20,34,.5);color:var(--tx2);
  padding:11px 17px;border-radius:4px;cursor:pointer;
  font:500 11.5px/1 var(--f-body);letter-spacing:.09em;
  transition:all .22s var(--ease);box-shadow:var(--lift);
}
.btn:hover{border-color:var(--line-on);color:var(--tx);
  box-shadow:0 0 0 1px rgba(0,217,255,.12),0 0 24px rgba(0,217,255,.10)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn--primary{
  background:linear-gradient(100deg,rgba(0,141,255,.22),rgba(0,217,255,.12));
  border-color:rgba(0,217,255,.42);color:var(--ice);
}
.btn--primary:hover{background:linear-gradient(100deg,rgba(0,141,255,.34),rgba(0,217,255,.2))}
.btn--danger:hover{border-color:rgba(255,85,112,.5);color:var(--bad);
  box-shadow:0 0 24px rgba(255,85,112,.12)}
.btn--sm{padding:7px 13px;font-size:10.5px;letter-spacing:.08em}
.btn--ghost{background:transparent}

/* ============================================ SHELL DO COMMAND CENTER */
body.cc{
  display:grid;
  grid-template-columns:var(--rail) 1fr;
  grid-template-rows:var(--bar) 1fr;
  grid-template-areas:"rail bar" "rail stage";
  height:100vh;overflow:hidden;position:relative;
}
/* Só as regiões do shell sobem de camada. Aplicar isto a TODO filho do
   body dava position:relative no modal e matava o position:fixed dele —
   a caixa aparecia ancorada no canto, não centralizada. */
body.cc > .rail,body.cc > .bar,body.cc > .stage{position:relative;z-index:1}

/* --------------------------------------------------- navigation rail */
.rail{
  grid-area:rail;display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:14px 0;
  background:linear-gradient(180deg,rgba(4,16,28,.9),rgba(2,6,17,.86));
  border-right:1px solid var(--line);
}
.rail__mark{display:grid;place-items:center;height:46px;margin-bottom:14px}
.rail__nav{display:flex;flex-direction:column;gap:5px;width:100%;padding:0 11px;flex:1}
.rnav{
  display:grid;place-items:center;gap:7px;padding:12px 4px 10px;border-radius:5px;
  color:var(--tx3);border:1px solid transparent;position:relative;
  transition:color .22s var(--ease),background .22s var(--ease);
}
.rnav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.1}
.rnav span{font:500 9.5px/1 var(--f-body);letter-spacing:.07em}
.rnav:hover{color:var(--tx);background:rgba(0,141,255,.07)}
.rnav:hover svg{transform:translateY(-1px)}
.rnav svg{transition:transform .25s var(--ease-out)}
.rnav.is-on{
  color:var(--cyan);background:linear-gradient(180deg,rgba(0,141,255,.14),rgba(0,217,255,.05));
  border-color:rgba(0,217,255,.24);
}
.rnav.is-on::before{
  content:"";position:absolute;left:-10px;top:12px;bottom:12px;width:2px;
  background:var(--cyan);box-shadow:0 0 10px var(--cyan);
}
.rail__foot{display:grid;gap:8px;justify-items:center;padding:0 10px}

/* ------------------------------------------------- top command bar */
.bar{
  grid-area:bar;display:flex;align-items:center;gap:20px;padding:0 22px;
  border-bottom:1px solid rgba(63,177,255,.13);
  background:linear-gradient(180deg,rgba(7,21,37,.8),rgba(3,9,20,.56));
  backdrop-filter:var(--glass-blur);
}
.bar__id{display:flex;align-items:baseline;gap:11px;flex:0 0 auto}
.bar__wm{font:200 19px/1 var(--f-disp);letter-spacing:.24em;color:var(--ice)}
.bar__unit{font:500 10px/1 var(--f-body);letter-spacing:.19em;color:var(--tx3)}
.bar__status{display:flex;gap:1px;margin:0 auto;padding:4px;border-radius:6px;
  border:1px solid rgba(63,177,255,.12);background:rgba(2,8,18,.42);
  box-shadow:var(--lift)}
.gstat{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:4px;
  transition:background .2s var(--ease)}
.gstat:hover{background:rgba(0,141,255,.06)}
.gstat + .gstat{box-shadow:-1px 0 0 rgba(63,177,255,.1)}
.gstat b{font:500 10px/1 var(--f-body);letter-spacing:.07em;color:var(--tx3);
  font-weight:500;white-space:nowrap}
.gstat i{font:var(--dado);letter-spacing:var(--dado-ls);font-style:normal;color:var(--tx)}
.bar__right{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.bar__clock{font:500 13px/1 var(--f-mono);letter-spacing:.02em;color:var(--tx)}
.bar__clock small{display:block;font:500 9.5px/1 var(--f-mono);letter-spacing:.04em;
  color:var(--tx3);margin-top:4px}
.bar__who{display:flex;align-items:center;gap:9px;padding-left:18px;
  border-left:1px solid var(--line)}
.bar__who span{font:500 12px/1 var(--f-body);letter-spacing:.04em;color:var(--tx2)}

/* --------------------------------------------------------- estágio */
.stage{grid-area:stage;overflow-y:auto;overflow-x:hidden;padding:26px 28px 70px;outline:none}
.stage::-webkit-scrollbar{width:9px}
.stage::-webkit-scrollbar-thumb{background:rgba(63,177,255,.16);border-radius:9px}


/* ====================================================== MATERIALIDADE
   Obsidiana, grafite, vidro fumê. Superfície não é "card com borda": é
   camada de luz. A borda entra só onde separa coisas que se confundiriam. */
.surface{
  position:relative;
  background:linear-gradient(168deg,rgba(9,24,42,.52),rgba(3,10,20,.26));
  border-radius:6px;box-shadow:var(--lift);
}
.surface::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(125,227,255,.055),transparent 34%);
}
/* grão: um ruído muito leve tira o aspecto de vetor chapado */
.grain::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line) 12%,
  var(--line) 88%,transparent);margin:0}

/* ========================================== NÚCLEO DE INTELIGÊNCIA VIKI
   Os anéis são os MESMOS do vikiia.com.br (l-rings): raios 470/392/318/238,
   dois deles girando em 210s e 130s reverso. Aqui eles cercam um núcleo que
   respira com o estado real — não é enfeite, é leitura de estado. */
.core{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center}
.core svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
@keyframes girarAnel{to{transform:rotate(360deg)}}
.core__r{transform-origin:500px 500px;transform-box:fill-box}
.core__r--b{animation:girarAnel 210s linear infinite}
.core__r--c{animation:girarAnel 130s linear infinite reverse}
@keyframes respirar{
  0%,100%{transform:scale(1);opacity:.92}
  50%{transform:scale(1.06);opacity:1}
}
.core__heart{
  position:relative;width:30%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#BFF6FF,var(--cyan) 42%,#0B5C77 78%);
  box-shadow:0 0 34px rgba(0,217,255,.5),0 0 90px rgba(0,141,255,.28),
             inset 0 0 18px rgba(255,255,255,.28);
  animation:respirar 4.2s var(--ease) infinite;
}
.core[data-s="DEGRADED"] .core__heart{
  background:radial-gradient(circle at 38% 34%,#FFE6BC,var(--warn) 42%,#6B4A11 78%);
  box-shadow:0 0 30px rgba(255,183,94,.45),0 0 80px rgba(255,183,94,.2),
             inset 0 0 18px rgba(255,255,255,.24);
  animation-duration:2.4s;
}
.core[data-s="OFFLINE"] .core__heart{
  background:radial-gradient(circle at 38% 34%,#FFD3DA,var(--bad) 42%,#6B1622 78%);
  box-shadow:0 0 26px rgba(255,85,112,.4),inset 0 0 18px rgba(255,255,255,.2);
  animation:none;opacity:.8;
}
.core__halo{position:absolute;inset:-14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,217,255,.14),transparent 62%)}
.core[data-s="OFFLINE"] .core__halo{background:radial-gradient(circle,rgba(255,85,112,.1),transparent 62%)}
/* faísca percorrendo o anel quando há batimento */
@keyframes faisca{0%{opacity:0}8%{opacity:1}40%{opacity:0}100%{opacity:0}}
.core__spark{fill:var(--ice);animation:faisca 6s var(--ease) infinite}

/* ---------------------------------------------------- pulso de sinal */
.pulse{width:7px;height:7px;border-radius:50%;background:var(--tx3);flex:0 0 auto;position:relative}
.pulse[data-s="ONLINE"],.pulse[data-s="HEALTHY"],.pulse[data-s="ACTIVE"],.pulse[data-s="LIVE"],
.pulse[data-s="OPERATIONAL"]{
  background:var(--ok);box-shadow:0 0 9px rgba(56,232,198,.8)}
.pulse[data-s="DEGRADED"],.pulse[data-s="WARN"],.pulse[data-s="TRIAL"]{
  background:var(--warn);box-shadow:0 0 9px rgba(255,183,94,.7)}
.pulse[data-s="OFFLINE"],.pulse[data-s="BLOCKED"],.pulse[data-s="ERROR"],
.pulse[data-s="REVOKED"],.pulse[data-s="EXPIRED"],.pulse[data-s="SUSPENDED"],
.pulse[data-s="NEVER_SEEN"]{
  background:var(--bad);box-shadow:0 0 9px rgba(255,85,112,.7)}
@keyframes bater{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
.pulse[data-s="ONLINE"]::after,.pulse[data-s="HEALTHY"]::after,.pulse[data-s="LIVE"]::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);
  animation:bater 2.6s var(--ease-out) infinite;
}

/* -------------------------------------------------------- hero */
.hero{
  display:grid;grid-template-columns:minmax(340px,.82fr) 1.18fr;gap:22px;
  margin-bottom:24px;align-items:stretch;min-height:338px;
}
.hero__main{
  position:relative;padding:26px 30px 0;border-radius:6px;overflow:visible;
  background:linear-gradient(150deg,rgba(10,28,48,.62),rgba(3,10,20,.3));
  box-shadow:var(--lift);display:grid;
  grid-template-rows:auto 1fr auto;gap:0;
}
.hero__core{width:var(--nucleo);flex:0 0 auto;pointer-events:none}
.hero__main::after{
  content:"";position:absolute;left:-40px;top:22%;width:260px;height:260px;
  background:radial-gradient(circle,rgba(0,141,255,.13),transparent 66%);pointer-events:none;
}
.hero__read{position:relative;z-index:1;display:flex;align-items:center;gap:24px;
  padding:4px 0 8px}
.hero__read .hero__title{flex:1;min-width:0}
.hero__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.hero__eyebrow i{width:42px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);
  box-shadow:0 0 8px rgba(0,217,255,.5)}
.hero__eyebrow span{font:var(--eyebrow);letter-spacing:var(--eyebrow-ls);color:var(--tx3);
  text-transform:uppercase}
.hero__title{margin:0;font:200 34px/1.08 var(--f-disp);letter-spacing:-.01em;
  white-space:nowrap}
.hero__title b{
  display:block;font-weight:300;font-size:19px;letter-spacing:.005em;margin-top:10px;
  white-space:normal;
  background:linear-gradient(100deg,var(--ice),var(--cyan) 60%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__title[data-s="DEGRADED"] b{background:linear-gradient(100deg,#FFE0B8,var(--warn) 60%);
  -webkit-background-clip:text;background-clip:text}
.hero__title[data-s="OFFLINE"] b{background:linear-gradient(100deg,#FFC8D2,var(--bad) 60%);
  -webkit-background-clip:text;background-clip:text}
.hero__sig{display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(63,177,255,.12);
  margin:24px -30px 0;border-radius:0 0 6px 6px;overflow:hidden}
.hero__sig .hsig:nth-child(odd){border-right:1px solid rgba(63,177,255,.09)}
.hero__sig .hsig:nth-child(n+3){border-top:1px solid rgba(63,177,255,.09)}
.hsig{display:flex;align-items:center;gap:11px;padding:14px 20px}
.hsig__k{font:var(--lbl);letter-spacing:.07em;color:var(--tx3);flex:1;text-transform:uppercase}
.hsig__v{font:500 10px/1.3 var(--f-mono);letter-spacing:.04em;color:var(--tx);
  text-align:right;white-space:nowrap}

/* ------------------------------------------------------- topologia */
.topo{
  position:relative;border-radius:6px;overflow:hidden;box-shadow:var(--lift);
  background:linear-gradient(160deg,rgba(6,18,32,.6),rgba(2,7,16,.4));
  display:flex;align-items:center;padding-top:26px;
}
.topo__head{position:absolute;top:16px;left:20px;z-index:2;display:flex;
  align-items:center;gap:10px}
.topo__head span{font:var(--eyebrow);letter-spacing:var(--eyebrow-ls);color:var(--tx3);
  text-transform:uppercase}
.topo > svg{display:block;width:100%;height:100%}
/* o sigilo do cabeçalho é um svg irmão: sem o `>` ele virava 100% de
   largura com 330px de altura e estourava o grid do hero. */
.sigil--sm{width:26px!important;height:26px!important;min-height:0!important}
.sigil--lg{width:44px!important;height:44px!important;min-height:0!important}
.topo__boundary{stroke:rgba(99,75,255,.4);stroke-width:1;stroke-dasharray:6 6}
.topo__blabel{font:500 9.5px Inter,sans-serif;letter-spacing:.14em;fill:var(--violet-l);
  opacity:.86;text-transform:uppercase}
.topo__link{stroke:rgba(63,177,255,.2);stroke-width:1.1;fill:none;
  transition:stroke .25s var(--ease)}
.topo__link.is-off{stroke:rgba(255,85,112,.32);stroke-dasharray:3 4}
@keyframes correr{to{stroke-dashoffset:-68}}
/* o sinal percorre a conexão: dois pontos curtos numa trilha longa */
.topo__flow{stroke:var(--cyan);stroke-width:1.5;fill:none;stroke-dasharray:2.5 65.5;
  stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(0,217,255,.9));
  animation:correr 3.1s linear infinite}
.topo__flow--slow{animation-duration:5s;stroke:var(--warn);
  filter:drop-shadow(0 0 5px rgba(255,183,94,.8))}
.topo__node{cursor:pointer}
.topo__node rect{fill:rgba(7,22,39,.88);stroke:rgba(63,177,255,.24);stroke-width:1;rx:5;
  transition:stroke .22s var(--ease),fill .22s var(--ease)}
.topo__node:hover rect{stroke:var(--line-on);fill:rgba(10,30,52,.96)}
.topo__node:hover .topo__glow{opacity:.5}
.topo__glow{opacity:0;transition:opacity .28s var(--ease)}
.topo__node text{transition:fill .22s var(--ease)}
.topo__node:hover text{fill:var(--ice)}
.topo__node text{font:500 11px Inter,sans-serif;letter-spacing:.05em;fill:var(--tx2)}
.topo__sub{font:500 9px 'JetBrains Mono',monospace;letter-spacing:.01em;fill:var(--tx3)}
.topo__empty{font:500 12px Inter,sans-serif;letter-spacing:.1em;fill:var(--tx2)}
.topo__hint{font:400 9.5px var(--f-body);letter-spacing:.02em;fill:var(--tx3);opacity:.72}
.topo__node.is-core rect{stroke:rgba(0,217,255,.42);fill:rgba(8,28,48,.94);
  filter:drop-shadow(0 0 16px rgba(0,141,255,.22))}
.topo__node.is-core text{fill:var(--ice)}
.topo__dot{filter:drop-shadow(0 0 5px currentColor)}

/* -------------------------------------------------- faixa de pulso */
.pulsebar{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  margin-bottom:24px;border-radius:6px;overflow:hidden;box-shadow:var(--lift);
  background:linear-gradient(170deg,rgba(9,24,42,.4),rgba(3,10,20,.18))}
.pmetric{padding:17px 20px 15px;position:relative}
.pmetric + .pmetric::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--line);
}
.pmetric__k{font:var(--lbl);letter-spacing:.06em;color:var(--tx3);text-transform:uppercase}
.pmetric__v{margin-top:10px;font:300 27px/1 var(--f-disp);letter-spacing:-.015em;color:var(--tx)}
.pmetric__v small{font:400 14px var(--f-disp);color:var(--tx3);margin-left:2px}
.pmetric__v.is-none{font:300 27px/1 var(--f-disp);color:var(--tx3);opacity:.45}
.pmetric__none{margin-top:9px;font:400 11.5px/1 var(--f-body);letter-spacing:.02em;
  color:var(--tx3);opacity:.85}
/* micro-barra: proporção medida, não decoração */
.mbar{margin-top:11px;height:2px;border-radius:2px;background:rgba(63,177,255,.12);
  overflow:hidden}
.mbar i{display:block;height:100%;border-radius:2px;background:var(--tx3);
  transition:width .6s var(--ease-out)}
.mbar i[data-s="ONLINE"]{background:linear-gradient(90deg,rgba(56,232,198,.5),var(--ok));
  box-shadow:0 0 8px rgba(56,232,198,.5)}
.mbar i[data-s="DEGRADED"]{background:var(--warn);box-shadow:0 0 8px rgba(255,183,94,.45)}
.mbar i[data-s="OFFLINE"]{background:var(--bad);box-shadow:0 0 8px rgba(255,85,112,.45)}

/* ------------------------------------------------------ dois painéis */
.duo{display:grid;grid-template-columns:1.45fr .85fr;gap:22px;align-items:start}

.slab{
  position:relative;border-radius:6px;overflow:hidden;margin-bottom:24px;
  background:linear-gradient(170deg,rgba(9,24,42,.46),rgba(3,10,20,.2));
  box-shadow:var(--lift);
}
/* Sem borda fechada: a seção se separa por LUZ e por um filete no topo.
   Quatro retângulos com contorno viravam "caixa, caixa, caixa". */
.slab::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--line) 10%,var(--line) 90%,transparent);
}
.slab__head{display:flex;align-items:center;gap:14px;padding:16px 22px 14px}
.slab__t{margin:0;font:var(--eyebrow);letter-spacing:var(--eyebrow-ls);color:var(--tx2);
  text-transform:uppercase}
.slab__n{font:var(--dado);letter-spacing:var(--dado-ls);color:var(--tx3);
  padding:3px 9px;border:1px solid var(--line);border-radius:3px}
.slab__acts{margin-left:auto;display:flex;gap:9px}
.slab__body{padding:6px 22px 22px}

/* --------------------------------------------------------- frota */
.fleet{display:flex;flex-direction:column}
.fl{
  display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:26px;
  align-items:center;padding:18px 22px;border-bottom:1px solid rgba(63,177,255,.08);
  cursor:pointer;
}
.fl:focus-visible{outline:1px solid var(--line-on);outline-offset:-1px}
.fl:last-child{border-bottom:0}
.fl:hover{background:rgba(0,141,255,.05)}
.fl__id{min-width:0}
.fl__name{display:flex;align-items:center;gap:9px}
.fl__name b{font:500 15px/1.2 var(--f-body);letter-spacing:.01em;color:var(--tx)}
.fl__env{margin-top:6px;font:500 10.5px/1 var(--f-body);letter-spacing:.09em;color:var(--tx3);
  text-transform:uppercase}
/* Cada capability é uma CÉLULA com duas linhas: rótulo em cima, valor embaixo.
   A versão anterior punha rótulo e valor lado a lado com largura fixa de 60px,
   e "CONNECTOR" transbordava por cima de "HEALTHY" em toda linha da frota. */
.fl__caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:14px 20px}
.cap{display:flex;flex-direction:column;gap:5px;min-width:0}
.cap__k{font:500 10.5px/1 var(--f-body);letter-spacing:.03em;color:var(--tx3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap__v{font:var(--dado);letter-spacing:var(--dado-ls);color:var(--tx);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cap__v.is-none{color:var(--tx3);opacity:.72;font-family:var(--f-body);
  font-size:11.5px;font-weight:400}
.fl__go{opacity:.55;transition:opacity .2s var(--ease)}
.fl:hover .fl__go{opacity:1}

/* ------------------------------------------------------ atividade */
.stream{display:flex;flex-direction:column;max-height:430px;overflow-y:auto}
.ev{display:grid;grid-template-columns:50px 14px 1fr;gap:12px;align-items:start;
  padding:12px 22px;border-bottom:1px solid rgba(63,177,255,.06);
  transition:background .18s var(--ease)}
.ev:hover{background:rgba(0,141,255,.05)}
.ev:last-child{border-bottom:0}
.ev__t{font:var(--dado);letter-spacing:var(--dado-ls);color:var(--tx3)}
.ev__i{display:grid;place-items:center;padding-top:2px}
.ev__i i{width:5px;height:5px;border-radius:50%;background:var(--tx3);display:block}
.ev[data-s="bad"] .ev__i i{background:var(--bad);box-shadow:0 0 7px rgba(255,85,112,.7)}
.ev[data-s="ok"] .ev__i i{background:var(--ok);box-shadow:0 0 7px rgba(56,232,198,.7)}
.ev__b{min-width:0}
.ev__k{display:block;font:500 11px/1.35 var(--f-body);letter-spacing:.05em;color:var(--tx2)}
.ev__w{display:block;font:var(--dado);letter-spacing:var(--dado-ls);color:var(--tx2);
  margin-top:4px}
.ev__d{display:block;font:400 12px/1.45 var(--f-body);color:var(--tx2);margin-top:4px;
  overflow-wrap:anywhere;opacity:.86}

/* ------------------------------------------------------- atenção */
.attn{display:flex;align-items:center;gap:13px;padding:15px 20px;
  border:1px solid var(--line);border-radius:4px;margin-bottom:22px;
  background:linear-gradient(100deg,rgba(6,18,32,.6),rgba(2,7,16,.3))}
.attn--calm{border-color:rgba(56,232,198,.2)}
.attn--alert{border-color:rgba(255,183,94,.28);
  background:linear-gradient(100deg,rgba(38,26,8,.5),rgba(2,7,16,.3))}
.attn__k{font:var(--eyebrow);letter-spacing:var(--eyebrow-ls);color:var(--tx3);
  text-transform:uppercase}
.attn__v{font:500 13px/1.4 var(--f-body);letter-spacing:.02em;color:var(--tx)}
.attn__list{display:flex;gap:9px;flex-wrap:wrap;margin-left:auto}

/* --------------------------------------------------------- detalhe */
.dhead{display:flex;align-items:flex-start;gap:26px;margin-bottom:24px;flex-wrap:wrap}
.dhead__t{margin:0;font:200 34px/1 var(--f-disp);letter-spacing:.01em;color:var(--tx)}
.dhead__sub{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.dhead__ids{display:flex;gap:20px;margin-top:12px;flex-wrap:wrap}
.dhead__idi{font:var(--dado);letter-spacing:var(--dado-ls);color:var(--tx2)}
.dhead__idi b{font-family:var(--f-body);font-size:11px;font-weight:500;
  color:var(--tx3);letter-spacing:.02em}
.dhead__env{font:500 11px/1 var(--f-body);letter-spacing:.14em;color:var(--tx3);
  text-transform:uppercase}
.dhead__live{display:flex;align-items:center;gap:8px;font:500 11.5px/1 var(--f-body);
  letter-spacing:.11em;color:var(--tx2);text-transform:uppercase}
.dhead__back{margin-left:auto}

.subnav{display:flex;gap:2px;margin-bottom:24px;border-bottom:1px solid var(--line);
  overflow-x:auto}
.snav{padding:12px 17px;border:0;background:transparent;color:var(--tx3);cursor:pointer;
  font:500 11.5px/1 var(--f-body);letter-spacing:.1em;border-bottom:1px solid transparent;
  white-space:nowrap;transition:all .2s var(--ease);text-transform:uppercase}
.snav:hover{color:var(--tx2)}
.snav.is-on{color:var(--cyan);border-bottom-color:var(--cyan);
  text-shadow:0 0 14px rgba(0,217,255,.4)}

.pairs{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pair{display:flex;flex-direction:column;gap:7px;padding:15px 20px;min-width:0;
  border-top:1px solid rgba(63,177,255,.08)}
.pair__k{font:var(--lbl);letter-spacing:.06em;color:var(--tx3);text-transform:uppercase}
.pair__v{font:400 13.5px/1.4 var(--f-body);color:var(--tx);overflow-wrap:anywhere}
.pair__v.mono{font:500 12px/1.4 var(--f-mono);letter-spacing:.02em;color:var(--tx2)}

/* --------------------------------------------- matriz de capability */
.matrix{display:grid;gap:0}
.mrow{display:grid;grid-template-columns:210px 130px 1fr 120px;gap:20px;
  align-items:center;padding:15px 22px;border-top:1px solid rgba(63,177,255,.08);
  transition:background .18s var(--ease)}
.mrow:hover{background:rgba(0,141,255,.045)}
.mrow__k{display:flex;align-items:center;gap:12px;font:500 12.5px/1 var(--f-body);
  letter-spacing:.05em;color:var(--tx);text-transform:uppercase}
.mrow__s{font:500 11px/1 var(--f-body);letter-spacing:.05em;color:var(--tx2)}
.mrow__src{font:400 12.5px/1.45 var(--f-body);color:var(--tx2)}
.mrow__last{font:var(--dado);letter-spacing:var(--dado-ls);color:var(--tx3);text-align:right}

/* ------------------------------------------------------ vazio/gap */
/* Vazio é compacto e elegante: uma linha com sigilo, título e uma frase.
   Caixa tracejada enorme para dizer "nada aqui" é o pior uso da tela. */
.void{
  display:flex;align-items:center;gap:15px;padding:16px 20px;border-radius:5px;
  background:linear-gradient(100deg,rgba(9,24,42,.4),rgba(3,10,20,.14));
  box-shadow:var(--lift);
}
.void::before{content:"";position:absolute}
.void__sig{flex:0 0 auto;opacity:.45}
.void__b{min-width:0}
.void__t{margin:0;font:var(--eyebrow);letter-spacing:var(--eyebrow-ls);color:var(--tx2);
  text-transform:uppercase}
.void__d{margin:6px 0 0;font:400 13px/1.55 var(--f-body);color:var(--tx2);max-width:76ch}

/* ---------------------------------------------------------- modal */
.modal{position:fixed;inset:0;background:rgba(1,3,8,.86);display:grid;place-items:center;
  padding:24px;z-index:80;backdrop-filter:blur(7px)}
.modal[hidden]{display:none!important}
@keyframes subir{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modal__box{
  width:min(95vw,620px);padding:34px;border:1px solid rgba(0,217,255,.24);border-radius:4px;
  background:linear-gradient(160deg,rgba(9,27,46,.96),rgba(3,10,20,.96));
  box-shadow:0 50px 140px rgba(0,0,0,.8),0 0 70px rgba(0,141,255,.14);
  animation:subir .32s var(--ease-out) both;
}
.modal__eyebrow{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.modal__eyebrow i{width:30px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}
.modal__t{margin:0;font:500 12px/1 var(--f-body);letter-spacing:.18em;color:var(--cyan);
  text-transform:uppercase}
.modal__body{font:400 13.5px/1.65 var(--f-body);color:var(--tx2);position:relative}
.modal__core{position:absolute;right:-6px;top:-46px;width:78px;opacity:.62;pointer-events:none}
.modal__core .core__heart{width:26%}
.modal__body p{margin:0 0 12px}
.modal__acts{display:flex;gap:11px;justify-content:flex-end;margin-top:26px}
@keyframes varrer{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.secret{
  position:relative;display:block;margin:20px 0;padding:22px;border-radius:4px;overflow:hidden;
  background:rgba(1,4,10,.9);border:1px solid rgba(0,217,255,.3);
  font:500 15px/1.5 var(--f-mono);letter-spacing:.04em;color:var(--cyan);
  word-break:break-all;user-select:all;text-align:center;
  box-shadow:inset 0 0 44px rgba(0,141,255,.12),0 0 30px rgba(0,141,255,.1);
}
.secret::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(125,227,255,.14) 50%,transparent 66%);
  animation:varrer 3.4s var(--ease) infinite;
}
.alerta{margin:0;padding:13px 15px;border-radius:3px;font:400 12.5px/1.5 var(--f-body);
  background:rgba(38,26,8,.55);border:1px solid rgba(255,183,94,.3);color:var(--warn)}

/* ---------------------------------------------------------- estados */
.tagx{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:3px;
  font:500 10.5px/1.4 var(--f-body);letter-spacing:.05em;
  border:1px solid var(--line);color:var(--tx2);background:rgba(2,8,18,.6)}
.tagx[data-s="ONLINE"],.tagx[data-s="HEALTHY"],.tagx[data-s="ACTIVE"],
.tagx[data-s="OPERATIONAL"]{
  color:var(--ok);border-color:rgba(56,232,198,.3)}
.tagx[data-s="DEGRADED"],.tagx[data-s="WARN"],.tagx[data-s="TRIAL"]{
  color:var(--warn);border-color:rgba(255,183,94,.32)}
.tagx[data-s="OFFLINE"],.tagx[data-s="BLOCKED"],.tagx[data-s="REVOKED"],
.tagx[data-s="EXPIRED"],.tagx[data-s="SUSPENDED"]{
  color:var(--bad);border-color:rgba(255,85,112,.32)}
.tagx[data-s="NOT_REPORTED"],.tagx[data-s="UNAVAILABLE"]{border-style:dashed;color:var(--tx3)}

table{width:100%;border-collapse:collapse;font:400 13px var(--f-body)}
th{text-align:left;padding:13px 20px;font:var(--lbl);letter-spacing:.06em;
  color:var(--tx3);border-bottom:1px solid var(--line);white-space:nowrap;
  text-transform:uppercase}
td{padding:14px 20px;border-bottom:1px solid rgba(63,177,255,.07)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(0,141,255,.04)}
.mono{font:var(--dado);letter-spacing:var(--dado-ls);color:var(--tx2)}
.dim{color:var(--tx3)}



/* ============================================ LEITURA ADMINISTRATIVA
   Terceira coluna do hero: o que o administrador precisa saber antes de
   abrir qualquer cliente. Não é grid de cards — é um extrato, linha a linha. */
.ledger{
  display:flex;flex-direction:column;border-radius:6px;overflow:hidden;
  background:linear-gradient(170deg,rgba(9,24,42,.42),rgba(3,10,20,.18));
  box-shadow:var(--lift);
}
/* Rótulo em cima, valor embaixo — mesma anatomia do resumo do cliente. Lado a
   lado, valores longos como "3 versões · v0.5.0" quebravam no meio da palavra. */
.lrow{
  display:flex;flex-direction:column;gap:7px;min-width:0;
  padding:14px 14px;border-left:1px solid rgba(63,177,255,.08);
}
.lrow:first-child{border-left:0}
/* Rótulo administrativo NUNCA trunca: "Licenças em alerta" cortado em
   "Licenças em aten..." não é informação, é ruído. Quebra em duas linhas
   com altura reservada, para as células continuarem alinhadas. */
.lrow__k{font:500 11px/1.25 var(--f-body);letter-spacing:.01em;color:var(--tx3);
  white-space:normal;overflow-wrap:normal;min-height:2.5em;
  display:flex;align-items:flex-start}
.lrow__v{font:var(--dado);letter-spacing:var(--dado-ls);color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow__v.is-none{font:400 12px/1.4 var(--f-body);color:var(--tx3);opacity:.82}

/* ================================================ RESUMO DO CLIENTE */
.dhead{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
  margin-bottom:24px}
.dhead__id{min-width:0}
.dsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:12px 18px;padding:14px 20px;border-radius:6px;box-shadow:var(--lift);
  background:linear-gradient(170deg,rgba(9,24,42,.4),rgba(3,10,20,.16))}
.dsum__i{display:flex;flex-direction:column;gap:5px;min-width:0}
.dsum__k{font:500 10.5px/1 var(--f-body);letter-spacing:.03em;color:var(--tx3);
  white-space:nowrap}
.dsum__v{font:var(--dado);letter-spacing:var(--dado-ls);color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsum__v.is-none{color:var(--tx3);opacity:.72}

/* =========================================== CONTEXTO DA CHAVE */
.kctx{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px 20px;padding:16px 18px;margin-bottom:18px;border-radius:5px;
  background:rgba(2,8,18,.5);box-shadow:var(--lift)}
.kctx__i{display:flex;flex-direction:column;gap:4px;min-width:0}
.kctx__k{font:500 10.5px/1 var(--f-body);color:var(--tx3)}
.kctx__v{font:var(--dado);letter-spacing:var(--dado-ls);color:var(--tx);
  overflow:hidden;text-overflow:ellipsis}
.kmsg{margin:0 0 4px;font:400 13px/1.5 var(--f-body);color:var(--tx2)}

/* ============================================ SELO DE AMBIENTE */
.envtag{
  display:inline-flex;align-items:center;padding:5px 11px;border-radius:4px;
  font:500 10px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--tx3);background:rgba(2,8,18,.5);
}
.envtag[hidden]{display:none!important}
.envtag[data-env="prod"]{color:var(--ok);border-color:rgba(56,232,198,.3);
  background:rgba(12,26,21,.6)}
.envtag[data-env="dev"]{color:var(--warn);border-color:rgba(255,183,94,.3);
  background:rgba(26,21,9,.6)}
.envtag[data-env="preview"]{color:var(--violet-l);border-color:rgba(163,119,255,.4);
  background:rgba(20,14,38,.6)}

/* ==================================================== MICROINTERAÇÕES
   Regra: sutil e curto. Nada entra chamando atenção; tudo assenta. */
@keyframes assentar{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.stage > *{animation:assentar .38s var(--ease-out) both}
.stage > *:nth-child(2){animation-delay:.05s}
.stage > *:nth-child(3){animation-delay:.1s}
.stage > *:nth-child(4){animation-delay:.15s}

@keyframes surgirLinha{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}
.fleet .fl{animation:surgirLinha .34s var(--ease-out) both}
.fleet .fl:nth-child(2){animation-delay:.05s}
.fleet .fl:nth-child(3){animation-delay:.09s}
.fleet .fl:nth-child(n+4){animation-delay:.13s}

.fl{position:relative}
.fl::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--cyan);opacity:0;transition:opacity .22s var(--ease);
  box-shadow:0 0 12px var(--cyan)}
.fl:hover::after{opacity:.8}
.fl:hover{transform:translateX(2px)}
.fl{transition:background .18s var(--ease),transform .22s var(--ease)}

/* profundidade no hover: a superfície sobe um fio */
.slab,.pulsebar,.topo,.hero__main{transition:box-shadow .3s var(--ease)}
.slab:hover,.topo:hover{box-shadow:var(--lift),0 14px 40px rgba(0,0,0,.28)}

/* transição de número: o valor troca sem piscar */
.pmetric__v{transition:color .3s var(--ease)}

.snav{position:relative}
.snav::after{content:"";position:absolute;left:17px;right:17px;bottom:-1px;height:1px;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease-out);box-shadow:0 0 10px var(--cyan)}
.snav.is-on::after{transform:scaleX(1)}

/* --------------------------------------------------- responsividade */
/* Três colunas a partir de 1600: hero, topologia e o extrato administrativo.
   Abaixo disso o extrato desce para a linha de baixo, ocupando a largura. */
.hero--3{grid-template-columns:minmax(330px,.86fr) 1.14fr}
.hero--3 .ledger{grid-column:1 / -1;display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr))}

@media (max-width:1500px){
  .hero{grid-template-columns:minmax(300px,.8fr) 1.2fr}
  .duo{grid-template-columns:1.35fr .9fr}
}
@media (max-width:1240px){
  .hero,.hero--3{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .stream{max-height:330px}
}
@media (max-width:900px){
  body.cc{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;
    grid-template-areas:"bar" "rail" "stage"}
  .rail{flex-direction:row;border-right:0;border-bottom:1px solid var(--line);
    overflow-x:auto;padding:10px}
  .rail__mark,.rail__foot{display:none}
  .rail__nav{flex-direction:row;flex:0 0 auto}
  .rnav{padding:9px 14px}
  .rnav.is-on::before{left:12px;right:12px;top:auto;bottom:-10px;width:auto;height:2px}
  .bar__status{display:none}
  .stage{padding:18px 15px 60px}
  .hero__title{font-size:30px}
  .fl{grid-template-columns:1fr;gap:16px}
  .dhead{grid-template-columns:1fr;gap:18px}
  .hero--3 .ledger{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .lrow{border-left:0;border-top:1px solid rgba(63,177,255,.08)}
  .mrow{grid-template-columns:1fr;gap:8px}
  .mrow__last{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
  /* o núcleo continua legível parado: o estado vem da cor, não do movimento */
  .core__heart{opacity:1}
  .stage > *,.fleet .fl{opacity:1;transform:none}
}

/* ================================================== RAG & MEMÓRIA — TELA
   Composição da referência. Nenhum token novo: cyan, blue, glass, line e a
   escala tipográfica são os mesmos do resto do Control Center. */
.rag{display:flex; flex-direction:column; gap:12px; min-height:0;
  height:calc(100dvh - 64px - 96px); min-height:660px;}
/* O Global encosta nas bordas: os clientes são as extremidades da malha e
   precisam ocupar o canto, não flutuar a 28px dele. Puxa contra o padding
   do palco em vez de mudar o palco, que é compartilhado com as outras
   oito telas. */
.gcore{margin:0 -18px;}
.gcore .rag__head{padding-left:18px; padding-right:18px;}
.gcore .rag__flux{margin:0 18px;}
@media (max-height:720px){ .rag{height:auto; min-height:0;} }
.rag__boot{display:grid; place-items:center; min-height:360px;
  font:var(--eyebrow); letter-spacing:var(--eyebrow-ls); color:var(--tx3);}

/* ---------------------------------------------------------- cabeçalho */
.rag__head{display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap;
  padding-bottom:12px; border-bottom:1px solid var(--line);}
.rag__back{font:var(--eyebrow); letter-spacing:var(--eyebrow-ls); color:var(--tx3);
  text-decoration:none; display:block; margin-bottom:8px;}
.rag__back:hover{color:var(--cyan);}
.rag__eye{font:var(--eyebrow); letter-spacing:var(--eyebrow-ls); color:var(--tx3);
  display:block;}
.rag__t{font:200 42px/1 var(--f-disp); letter-spacing:.08em; color:var(--tx);
  margin:6px 0 0; display:flex; align-items:center; gap:18px;
  text-shadow:0 0 34px rgba(0,180,255,.28);}
.rag__st{font:var(--dado); font-size:11.5px; letter-spacing:.12em; color:var(--ok);
  display:inline-flex; align-items:center; gap:7px;}
.rag__st[data-s="DEGRADED"]{color:var(--warn);}
.rag__st[data-s=""]{color:var(--bad);}
.rag__sub{font:var(--eyebrow); letter-spacing:var(--eyebrow-ls); color:var(--tx3);
  margin:9px 0 0;}
.rag__tabs{margin-left:auto; display:flex; gap:2px; border:1px solid var(--line);
  border-radius:3px; padding:3px; background:rgba(4,16,28,.5);}
.rag__tab{font:var(--eyebrow); letter-spacing:var(--eyebrow-ls); color:var(--tx3);
  padding:9px 16px; border-radius:2px;}
.rag__tab.is-on{color:var(--cyan); background:rgba(0,180,255,.10);
  box-shadow:inset 0 0 0 1px var(--line-on), 0 0 18px rgba(0,200,255,.14);}

/* ------------------------------------------------------------- corpo */
.rag__body{flex:1 1 auto; min-height:0; display:grid; gap:14px;
  grid-template-columns:288px minmax(0,1fr) 322px; position:relative;}
/* O traçado cobre a ÁREA INTEIRA e fica POR BAIXO dos painéis: é o que
   permite a linha nascer na borda do card e terminar dentro da massa sem
   passar por cima de texto. */
.rag__wire{position:absolute; inset:0; z-index:0; pointer-events:none;}
.rag__src,.rag__core,.rag__side{position:relative; z-index:1;}
.rag__src{min-width:0; overflow:auto;}
.rag__side{min-width:0; overflow:auto; display:flex; flex-direction:column; gap:11px;}

/* --------------------------------------------------------- fontes */
.fontes{border:1px solid var(--line); border-radius:3px; padding:12px;
  background:var(--glass-strong); backdrop-filter:var(--glass-blur);
  box-shadow:var(--lift);}
.fontes__h{font:var(--eyebrow); letter-spacing:var(--eyebrow-ls); color:var(--tx2);
  margin-bottom:11px;}
.fcard{display:flex; gap:10px; align-items:flex-start; padding:9px 10px;
  border:1px solid var(--line); border-radius:3px; margin-bottom:7px;
  background:linear-gradient(100deg, rgba(0,140,255,.07), rgba(4,16,28,.35));
  position:relative;}
.fcard:last-child{margin-bottom:0;}
/* a linha que sai do card em direção ao cérebro: começa aqui e o canvas
   continua. O ponto de junção é o mesmo, então lê como uma linha só. */
.fcard::after{content:""; position:absolute; right:-13px; top:50%; width:13px;
  height:1px; background:linear-gradient(90deg, var(--cyan), transparent);
  opacity:.75;}
.fcard.is-con{background:linear-gradient(100deg, rgba(255,183,94,.05),
  rgba(4,16,28,.5)); border-style:dashed; border-color:rgba(255,183,94,.22);}
.fcard.is-con::after{background:linear-gradient(90deg, var(--warn), transparent);
  opacity:.55;}
.fcard__i{width:26px; height:26px; flex:0 0 26px; color:var(--cyan); opacity:.9;}
.fcard.is-con .fcard__i{color:var(--warn); opacity:.85;}
.fcard__i svg{width:100%; height:100%; fill:none; stroke:currentColor;
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;}
.fcard__b{flex:1 1 auto; min-width:0;}
.fcard__b b{display:block; font:500 12.5px/1.3 var(--f-body); color:var(--tx);
  letter-spacing:.01em;}
.fcard__b i{display:block; font:var(--dado); font-size:10px; color:var(--tx3);
  font-style:normal; margin-top:2px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;}
.fcard__bar{display:block; height:2px; margin-top:7px; border-radius:2px;
  background:rgba(63,177,255,.14);}
.fcard__bar em{display:block; height:100%; border-radius:2px;
  background:linear-gradient(90deg, var(--blue), var(--cyan));}
.fcard.is-con .fcard__bar em{background:linear-gradient(90deg,
  rgba(255,183,94,.5), rgba(255,183,94,.22));}
.fcard__tag{position:absolute; right:8px; top:8px; font:var(--dado); font-size:8.5px;
  letter-spacing:.1em; color:var(--warn); border:1px solid rgba(255,183,94,.3);
  border-radius:2px; padding:1px 5px;}

/* ----------------------------------------------------------- o core */
.rag__core{position:relative; min-width:0; min-height:0; display:flex;
  border:1px solid var(--line); border-radius:3px;
  /* sem fundo opaco: quem desenha aqui é o canvas que está ATRÁS */
  background:transparent; pointer-events:none;}
.rag__core > *{pointer-events:auto;}

.core__tag{position:absolute; left:50%; top:14px; transform:translateX(-46%);
  z-index:3; border:1px solid var(--line-on); border-radius:3px; padding:9px 14px;
  background:rgba(3,12,24,.72); backdrop-filter:blur(8px);
  box-shadow:0 0 26px rgba(0,180,255,.12);}
.core__tagk{display:block; font:var(--eyebrow); letter-spacing:var(--eyebrow-ls);
  color:var(--tx3);}
.core__tagt{display:block; font:300 19px/1.1 var(--f-disp); letter-spacing:.06em;
  color:var(--tx); margin-top:3px;}
.core__taglist{list-style:none; margin:9px 0 0; padding:0;}
.core__taglist li{font:var(--dado); font-size:9.5px; letter-spacing:.07em;
  color:var(--cyan); opacity:.88; padding-left:11px; position:relative; line-height:1.75;}
.core__taglist li::before{content:""; position:absolute; left:0; top:7px; width:3px;
  height:3px; border-radius:50%; background:var(--cyan);}
.core__off{margin:auto; display:grid; place-items:center; gap:14px; opacity:.55;}
.core__off p{font:var(--eyebrow); letter-spacing:var(--eyebrow-ls); color:var(--tx3);
  text-align:center; margin:0;}
.core__off small{display:block; margin-top:7px; font:var(--dado); color:var(--bad);}

/* --------------------------------------------------------- direita */
.slab__on{display:inline-flex; align-items:center; gap:6px; font:var(--dado);
  font-size:10px; letter-spacing:.1em; color:var(--ok);}
.slab__on[data-s="DEGRADED"]{color:var(--warn);}
.srow{display:flex; justify-content:flex-start; padding:2px 0 14px;}
.donut{display:flex; align-items:center; gap:16px; width:100%;}
.donut svg{width:96px; height:96px; flex:0 0 96px; transform:rotate(-90deg);}
/* Anel grosso com miolo escuro, como na referência — o traço fino antigo
   sumia no fundo e o painel parecia vazio mesmo tendo dado. */
.donut__d{fill:rgba(3,10,20,.85);}
.donut__t{fill:none; stroke:rgba(63,177,255,.16); stroke-width:13;}
.donut__v{fill:none; stroke:var(--cyan); stroke-width:13; stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(0,217,255,.6));
  transition:stroke-dashoffset .9s var(--ease-out);}
.donut__x{min-width:0;}
.donut__x i{display:block; font:var(--eyebrow); letter-spacing:var(--eyebrow-ls);
  color:var(--tx3); font-style:normal; line-height:1.45;}
.donut__x b{display:block; font:200 32px/1.05 var(--f-disp); color:var(--tx);
  margin-top:7px; letter-spacing:.01em;}
.donut__x u{display:block; font:var(--dado); font-size:10px; color:var(--tx3);
  text-decoration:none; margin-top:4px;}
/* `.krow`, não `.lrow`: a segunda é a célula do ledger do painel COMANDO,
   com `flex-direction:column` e rótulo de duas linhas. Reusar o nome fazia
   o valor cair para baixo do rótulo nestas telas. Classe própria. */
.krow{display:flex; flex-direction:row; align-items:baseline;
  justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px solid rgba(63,177,255,.07);}
.krow:last-child{border-bottom:0;}
.krow__k{font:400 12.5px/1.3 var(--f-body); letter-spacing:.005em;
  color:var(--tx2); min-height:0; display:inline;}
.krow__v{font:var(--dado); letter-spacing:var(--dado-ls); color:var(--tx);
  text-align:right; white-space:nowrap;}
.krow__v.sm{font-size:10.5px;}
.krow__v small{color:var(--tx3); margin-left:5px; font-size:10px;}
.mem__nd{font:var(--dado); font-size:9.5px; letter-spacing:.06em; color:var(--tx3);
  opacity:.72;}
.mtrio,.dtrio{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.mtrio i,.dtrio i{display:block; font:var(--eyebrow); letter-spacing:var(--eyebrow-ls);
  color:var(--tx3); font-style:normal;}
.mtrio b,.dtrio b{display:block; font:200 21px/1.1 var(--f-disp); color:var(--tx);
  margin-top:5px;}
.dtrio b{font-size:18px; color:var(--cyan);}
.await__t{display:block; font:var(--dado); font-size:10.5px; letter-spacing:.08em;
  color:var(--warn);}
.await__t.sm{margin-top:9px; font-size:9.5px;}
.await__d{display:block; font:var(--lbl); letter-spacing:var(--lbl-ls);
  color:var(--tx3); margin-top:6px; line-height:1.5;}
.await__rows{margin-top:11px; height:74px;
  background:repeating-linear-gradient(to bottom,
    rgba(63,177,255,.055) 0 1px, transparent 1px 15px); opacity:.6;}
.await__g{margin-top:11px; height:52px; border:1px solid var(--line); border-radius:2px;
  background:
    repeating-linear-gradient(to right, rgba(63,177,255,.06) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(to bottom, rgba(63,177,255,.06) 0 1px, transparent 1px 17px);
  opacity:.5;}

/* ----------------------------------------------------------- fluxo */
.rag__flux{border:1px solid var(--line); border-radius:3px; padding:12px 14px;
  background:var(--glass); backdrop-filter:var(--glass-blur); box-shadow:var(--lift);}
.flux__h{font:var(--eyebrow); letter-spacing:var(--eyebrow-ls); color:var(--tx2);
  margin-bottom:11px;}
.flux{display:flex; align-items:stretch; gap:8px; overflow-x:auto;}
.fx{flex:1 1 0; min-width:132px; border:1px solid var(--line); border-radius:3px;
  padding:11px 12px; background:rgba(4,16,28,.42); display:flex;
  flex-direction:column; gap:3px;}
.fx.is-ok{border-color:rgba(0,200,255,.26);
  background:linear-gradient(160deg, rgba(0,140,255,.09), rgba(4,16,28,.42));}
.fx__i{width:22px; height:22px; color:var(--cyan); opacity:.85; margin-bottom:4px;}
.fx__i svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;}
.fx__k{font:var(--eyebrow); letter-spacing:var(--eyebrow-ls); color:var(--tx3);}
.fx__v{font:200 25px/1.05 var(--f-disp); color:var(--tx); min-height:26px;}
.fx__u{font:var(--dado); font-size:9.5px; color:var(--tx3);}
.fx__s{font:var(--dado); font-size:9px; letter-spacing:.09em; color:var(--tx3);
  margin-top:5px;}
.fx.is-ok .fx__s{color:var(--ok);}
.fx[data-s="NÃO INSTRUMENTADO"] .fx__s{opacity:.7;}
.fx__a{align-self:center; color:var(--line-on); font-size:15px; opacity:.6;}

/* ------------------------------------------------------- responsivo */
@media (max-width:1400px){
  .rag__body{grid-template-columns:262px minmax(0,1fr) 296px;}
}
@media (max-width:1180px){
  .rag__body{grid-template-columns:250px minmax(0,1fr);}
  .rag__side{grid-column:1 / -1; flex-direction:row; flex-wrap:wrap;}
  .rag__side > *{flex:1 1 270px;}
}
@media (max-width:900px){
  /* O cérebro continua protagonista: ele vem primeiro e mantém a altura. */
  .rag__body{grid-template-columns:minmax(0,1fr);}
  .rag__core{order:-1; min-height:52vh;}
  .rag__src{order:0;}
  .rag__t{font-size:32px;}
  .rag__tabs{margin-left:0;}
}

/* ============================================== VIKI CORE GLOBAL — TELA
   Mesma linguagem da tela do cliente. O que muda é a semântica: clientes
   dos DOIS lados alimentando um núcleo central, e os portões de promoção
   entre cada RAG privado e o Core. */
/* Quando não há cliente do lado direito, a coluna dele colapsa: deixá-la
   reservada jogava o cérebro para fora do centro. */
.gcore__body{grid-template-columns:268px minmax(0,1fr) 268px 356px; gap:10px;}
.gcore__body.sem-direita{grid-template-columns:268px minmax(0,1fr) 356px;}
.gcore__body.sem-direita .ccol--r{display:none;}
.gcore__body.sem-direita .gcore__side{grid-column:3;}
.gtag{font:var(--dado); font-size:10px; letter-spacing:.16em; color:var(--cyan);
  border:1px solid var(--line-on); border-radius:3px; padding:5px 11px;
  background:rgba(0,180,255,.08); align-self:center;}
.gsub{font:var(--lbl); letter-spacing:var(--lbl-ls); color:var(--tx3);
  margin:8px 0 0; max-width:560px; line-height:1.55;}

/* ------------------------------------------------ colunas de cliente */
.ccol{min-width:0; overflow:auto; display:flex; flex-direction:column; gap:9px;
  position:relative; z-index:1;}
.ccol__vazio{font:var(--dado); color:var(--tx3); text-align:center; padding:20px 0;}
/* CARD CONTIDO. Sem moldura o texto ficava solto no cenário, sem nada que
   dissesse onde um cliente termina e o outro começa — com sessenta deles
   isso vira uma lista ilegível. A caixa volta, e o cubo fica DENTRO dela,
   encostado no lado que olha para o núcleo. */
.ccard{position:relative; text-decoration:none; display:flex;
  align-items:center; gap:12px; padding:11px 12px;
  border:1px solid var(--line); border-radius:4px;
  background:linear-gradient(140deg, rgba(0,130,255,.045), rgba(4,16,28,.55));
  box-shadow:var(--lift);
  transition:border-color .22s var(--ease), transform .22s var(--ease);}
.ccard:hover{border-color:var(--line-on); transform:translateY(-1px);
  box-shadow:var(--lift), 0 0 22px rgba(0,180,255,.14);}
/* filete na borda que aponta para o núcleo: marca de onde a linha sai */
.ccard::after{content:""; position:absolute; top:14%; bottom:14%; width:2px;
  background:linear-gradient(180deg, transparent,
    rgba(var(--dc, 0,217,255), .55), transparent);}
.ccol--l .ccard::after{right:-1px;}
.ccol--r .ccard::after{left:-1px;}
/* O cubo fica no lado que OLHA para o núcleo — assim a linha sai dele
   direto para o centro, sem atravessar o texto do próprio card. */
.ccol--l .ccard{flex-direction:row-reverse;}
/* Texto encostado na BORDA do card, não no cubo. Com `text-align:right` o
   bloco se colava no cubo e deixava um vazio de ~150px na esquerda — o
   nome ficava boiando no meio da caixa em vez de ancorar nela. */
.ccol--l .ccard__t{text-align:left;}
.ccard__t{min-width:0; flex:1 1 auto; display:flex; flex-direction:column;
  gap:1px;}
.ccard__n{display:flex; align-items:center; gap:7px;}
.ccard__t b{font:500 14px/1.15 var(--f-body); letter-spacing:.06em; color:var(--tx);}
/* O ponto de estado: pulsa quando está vivo, fica parado quando não está.
   Num painel de operação é o primeiro sinal que alguém procura. */
.ccard[data-s="OPERATIONAL"]{--dc:56,232,198;}
.ccard[data-s="DEGRADED"]{--dc:255,183,94;}
.ccard[data-s="UNAVAILABLE"]{--dc:255,85,112;}
.ccard[data-s="SEM"]{--dc:108,131,149;}
.ccard__dot{width:8px; height:8px; border-radius:50%; flex:0 0 8px;
  background:rgb(var(--dc, 108,131,149));
  box-shadow:0 0 8px rgba(var(--dc, 108,131,149), .8);}
.ccard__dot[data-s="OPERATIONAL"]{--dc:56,232,198; animation:cdot 2.4s var(--ease) infinite;}
.ccard__dot[data-s="DEGRADED"]{--dc:255,183,94; animation:cdot 2.4s var(--ease) infinite;}
.ccard__dot[data-s="UNAVAILABLE"]{--dc:255,85,112;}
.ccard__dot[data-s="SEM"]{--dc:108,131,149; opacity:.6;}
@keyframes cdot{0%,100%{box-shadow:0 0 0 0 rgba(var(--dc),.5), 0 0 8px rgba(var(--dc),.8)}
  60%{box-shadow:0 0 0 7px rgba(var(--dc),0), 0 0 8px rgba(var(--dc),.8)}}
.ccard__sub{display:block; font:400 11.5px/1.4 var(--f-body); color:var(--tx3);
  font-style:normal; margin-top:3px;}
.ccard__t u{display:block; font:var(--dado); font-size:12px; color:var(--tx2);
  text-decoration:none; margin-top:3px;}
.ccard__t em{display:block; font:var(--dado); font-size:8.5px; letter-spacing:.11em;
  font-style:normal; margin-top:5px; text-transform:uppercase;}
.ccard__t em[data-s="OPERATIONAL"]{color:var(--ok);}
.ccard__t em[data-s="DEGRADED"]{color:var(--warn);}
.ccard__t em[data-s="UNAVAILABLE"]{color:var(--bad);}
.ccard__t em[data-s="SEM"]{color:var(--tx3);}
.ccard__live{width:7px; height:7px; border-radius:50%; margin-left:auto;
  background:var(--tx3); box-shadow:0 0 0 0 rgba(56,232,198,.5);}
.ccard__live[data-on="1"]{background:var(--ok);
  animation:cpulse 2.6s var(--ease) infinite;}
@keyframes cpulse{0%,100%{box-shadow:0 0 0 0 rgba(56,232,198,.45)}
  60%{box-shadow:0 0 0 6px rgba(56,232,198,0)}}
.ccard__tag{display:inline-block; margin-top:6px; font:var(--dado); font-size:8.5px;
  letter-spacing:.11em; color:var(--cyan); border:1px solid var(--line-on);
  border-radius:2px; padding:2px 6px; background:rgba(0,180,255,.06);}
.ccard__m{display:block; margin-top:7px; font:var(--dado); font-size:10.5px;
  color:var(--tx3);}
.ccard__m b{color:var(--tx); font-size:13px;}
/* Retrato do cérebro do cliente: o MESMO desenho que abre no clique. */
/* Maior: com 72px o clone não se lia. Aqui ele tem espaço para ser
   reconhecível como o mesmo cérebro que abre no clique. */
/* ------------------------------------------------- cubo do cliente
   Contêiner isolado: volume fechado, com dentro e fora — que é o que um
   RAG privado é. O cérebro de verdade abre no clique.
   A COR é o estado do node, não enfeite: um cubo âmbar numa fileira de
   teal é informação que se lê de longe. */
.cbx{display:block; width:72px; height:74px; flex:0 0 72px;
  filter:drop-shadow(0 0 10px rgba(0,0,0,.6));
  transition:transform .3s var(--ease);}
.ccard:hover .cbx{transform:scale(1.07);}
.cbx polygon{shape-rendering:geometricPrecision;}
.cbx__nu{filter:drop-shadow(0 0 7px rgba(255,255,255,.55));}

/* -------------------------------------------------------- o núcleo */
/* Sem caixa. Uma moldura retangular no meio de um organismo lê como
   etiqueta colada por cima; o rótulo passa a flutuar sobre a massa, com
   filete e brilho, e o CENTRO fica livre para o núcleo pulsar. */
.gcore__label{position:absolute; left:50%; top:26px; transform:translateX(-50%);
  z-index:3; text-align:center; pointer-events:none;}
.gcore__label span{display:block; font:200 26px/1 var(--f-disp);
  letter-spacing:.34em; text-indent:.34em; color:var(--tx);
  text-shadow:0 0 30px rgba(150,190,255,.55), 0 0 70px rgba(120,90,255,.3);}
.gcore__label i{display:block; margin-top:9px; font:var(--eyebrow);
  letter-spacing:.42em; text-indent:.42em; font-style:normal; color:var(--tx3);
  position:relative; padding-top:9px;}
.gcore__label i::before{content:""; position:absolute; left:50%; top:0;
  transform:translateX(-50%); width:120px; height:1px;
  background:linear-gradient(90deg, transparent,
    rgba(168,118,255,.65), rgba(120,190,255,.65), transparent);}
.gcore__count{position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:3; font:var(--dado); font-size:10px; letter-spacing:.12em; color:var(--tx2);
  border:1px solid var(--line); border-radius:3px; padding:7px 16px;
  background:rgba(3,10,22,.72); backdrop-filter:blur(8px); white-space:nowrap;}
.gcore__count b{color:var(--tx); font-size:14px; margin-right:5px;}
.gcore__side{grid-column:4;}

@media (max-width:1560px){
  .gcore__body{grid-template-columns:246px minmax(0,1fr) 246px 320px;}
  .gcore__body.sem-direita{grid-template-columns:246px minmax(0,1fr) 320px;}
}
@media (max-width:1280px){
  .gcore__body{grid-template-columns:210px minmax(0,1fr) 210px;}
  .gcore__side{grid-column:1 / -1; flex-direction:row; flex-wrap:wrap;}
  .gcore__side > *{flex:1 1 280px;}
}
@media (max-width:900px){
  .gcore__body{grid-template-columns:minmax(0,1fr);}
  .rag__core{order:-1;}
  .ccol{flex-direction:row; flex-wrap:wrap;}
  .ccol > *{flex:1 1 210px;}
}

/* trilha de eventos: são registros REAIS da auditoria do control plane */
.evlist{list-style:none; margin:0; padding:0;}
.evlist li{display:flex; align-items:baseline; gap:9px; padding:6px 0;
  border-bottom:1px solid rgba(63,177,255,.06);}
.evlist li:last-child{border-bottom:0;}
.evlist i{width:6px; height:6px; border-radius:50%; flex:0 0 6px;
  background:var(--cyan); box-shadow:0 0 7px rgba(0,217,255,.7);
  transform:translateY(-1px);}
.evlist i[data-o="DENIED"],.evlist i[data-o="FAILURE"]{background:var(--bad);
  box-shadow:0 0 7px rgba(255,85,112,.7);}
.evlist span{flex:1 1 auto; font:400 12px/1.4 var(--f-body); color:var(--tx2);
  min-width:0;}
.evlist span b{color:var(--tx); font-weight:500;}
.evlist u{font:var(--dado); font-size:10px; color:var(--tx3);
  text-decoration:none; white-space:nowrap;}

/* ===========================================================================
   GOVERNANÇA DO CONHECIMENTO GLOBAL — TELA
   Sem cor nova: tudo sai dos tokens que já existem. Uma paleta paralela aqui
   criaria uma segunda identidade dentro do mesmo painel.
   =========================================================================== */
.gov{display:flex;flex-direction:column;gap:22px}
.gov__t i{font:var(--eyebrow);letter-spacing:var(--eyebrow-ls);color:var(--cyan);
  text-transform:uppercase}
.gov__t h1{font:var(--f-disp);font-size:clamp(28px,4vw,44px);margin:6px 0 8px;
  letter-spacing:-.02em}
.gov__t p{color:var(--tx3);max-width:62ch;line-height:1.55}
.gov__t p b{color:var(--tx);font-weight:600}

.gov__sum{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.gsum{background:var(--glass);border:1px solid var(--line);border-radius:4px;
  padding:14px 12px;display:flex;flex-direction:column;gap:7px}
.gsum i{font:var(--lbl);letter-spacing:var(--lbl-ls);color:var(--tx3);
  text-transform:uppercase;font-style:normal}
.gsum b{font:var(--dado);letter-spacing:var(--dado-ls);font-size:26px;color:var(--tx)}

.gov__tab{overflow-x:auto}
.gtab{width:100%;border-collapse:collapse;min-width:720px}
.gtab th{font:var(--lbl);letter-spacing:var(--lbl-ls);color:var(--tx3);
  text-transform:uppercase;text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.gtab td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.grow{cursor:pointer;transition:background .16s var(--ease)}
.grow:hover{background:var(--lift)}
.grow__id{font:var(--f-mono);font-size:12px;color:var(--cyan)}
.grow__g{white-space:nowrap}

.gg{display:inline-block;font:var(--lbl);letter-spacing:var(--lbl-ls);
  padding:3px 7px;border-radius:2px;border:1px solid var(--line);
  margin-right:5px;text-transform:uppercase}
.gg--ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.gg--off{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.gg--wait{color:var(--tx3);border-style:dashed}

.gdet{background:var(--glass);border:1px solid var(--line);border-radius:5px;
  padding:20px;display:flex;flex-direction:column;gap:18px}
.gdet__h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gdet__h b{font:var(--f-mono);font-size:13px;color:var(--cyan)}
.gdet__x{margin-left:auto;background:none;border:1px solid var(--line);
  color:var(--tx3);font:var(--lbl);letter-spacing:var(--lbl-ls);
  padding:6px 12px;border-radius:3px;cursor:pointer}
.gdet__x:hover{color:var(--tx);border-color:var(--cyan)}

.gtl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gtl li{display:flex;flex-direction:column;gap:3px;padding:8px 12px;
  border:1px solid var(--line);border-radius:3px;background:var(--bg-0)}
.gtl i{font:var(--lbl);letter-spacing:var(--lbl-ls);color:var(--cyan);
  font-style:normal;text-transform:uppercase}
.gtl b{font:var(--f-mono);font-size:11px;color:var(--tx3);font-weight:400}

.gmut{color:var(--tx3);line-height:1.55;margin:0}
.gmut b{color:var(--tx);font:var(--f-mono);font-size:12px}
.gcats{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.gcat{font:var(--lbl);letter-spacing:var(--lbl-ls);padding:4px 9px;
  border-radius:2px;border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);
  color:var(--warn);text-transform:uppercase}

.gsafe{background:var(--bg-0);border:1px solid var(--line);
  border-left:2px solid var(--cyan);border-radius:3px;padding:16px 18px;
  line-height:1.65;color:var(--tx)}
.gheld{background:var(--bg-0);border:1px dashed var(--line);border-radius:3px;
  padding:16px 18px;display:flex;flex-direction:column;gap:7px}
.gheld b{font:var(--lbl);letter-spacing:var(--lbl-ls);color:var(--warn)}
.gheld span{color:var(--tx3);line-height:1.55}

.gchk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gchk li{display:flex;align-items:baseline;gap:12px;padding-left:16px;
  position:relative}
.gchk li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%}
.gchk--ok::before{background:var(--ok)}
.gchk--no::before{background:var(--bad)}
.gchk i{font:var(--lbl);letter-spacing:var(--lbl-ls);color:var(--tx3);
  font-style:normal;text-transform:uppercase;min-width:190px}
.gchk b{color:var(--tx);font-weight:500}

.gact{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--line)}
.gact__w{color:var(--tx3);font-size:12px;line-height:1.5;flex:1;min-width:200px}
.gact--off .btn{opacity:.4;cursor:not-allowed}

.gov__off{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:56px 24px;text-align:center;border:1px dashed var(--line);
  border-radius:5px;background:var(--glass)}
.gov__off svg{width:32px;height:32px;color:var(--warn)}
.gov__off b{font:var(--f-disp);font-size:20px;letter-spacing:-.01em}
.gov__off span{font:var(--lbl);letter-spacing:var(--lbl-ls);color:var(--warn)}
.gov__off p{color:var(--tx3);max-width:46ch;line-height:1.55;margin:6px 0 0}

@media (max-width:700px){
  .gchk i{min-width:0}
  .gchk li{flex-direction:column;gap:2px}
}

/* ===========================================================================
   ENTRADA OFICIAL — SALA DE CONTROLE (25/09/2026)
   Composição do baseline v2. Sem cor nova: tudo sai dos tokens do topo.
   O MOVIMENTO é luz sobre a foto — nada opaco, nada que represente dado.
   =========================================================================== */
body.sala{min-height:100vh;margin:0;position:relative;overflow-x:hidden;
  background:var(--bg-0);color:var(--tx);font-family:var(--f-body)}

.sala__bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center top;z-index:0}
/* A cena é clara no meio; sem isto o card perde contraste e o texto some. */
.sala__escuro{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 42%,rgba(0,6,16,.55),transparent 70%),
    linear-gradient(180deg,rgba(0,4,10,.5) 0%,transparent 18%,
                    transparent 62%,rgba(0,4,10,.72) 100%)}

/* ------------------------------------------------------------- movimento */
/* As peças são RECORTES da cena, ancorados na posição original em
   porcentagem — assim acompanham o `object-fit:cover` do fundo. O que muda
   é `transform`. Opacidade pisca; transformação MOVE. */
.mv{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.mv img{position:absolute;will-change:transform}

/* A VIKI respira: escala mínima com deriva lateral. O ciclo é longo de
   propósito — figura humana que pulsa rápido lê como falha de vídeo. */
/* `top:14.4%` = y=118 da cena: a peça começa ABAIXO da faixa da marca,
   então não há como ela arrastar aquele texto ao se mover. */
.mv__viki{left:-1%;top:14.4%;width:45%;height:85.6%;object-fit:cover;
  object-position:center top;
  animation:pcViki 19s ease-in-out infinite}
@keyframes pcViki{
  0%,100%{transform:scale(1.005) translate(0,0)}
  50%{transform:scale(1.028) translate(.5%,-.9%)}
}

/* O globo gira: rotação lenta no próprio eixo. Um globo fotográfico rodado
   em 2D roda como roda de carroça, então o giro é sutil e acompanhado de
   uma leve compressão horizontal, que é o que o olho lê como esfera. */
.mv__globo{left:66%;top:17%;width:21%;
  animation:pcGlobo 26s linear infinite;transform-origin:50% 50%}
@keyframes pcGlobo{
  0%{transform:rotate(0deg) scaleX(1)}
  25%{transform:rotate(1.4deg) scaleX(.985)}
  50%{transform:rotate(0deg) scaleX(1)}
  75%{transform:rotate(-1.4deg) scaleX(.985)}
  100%{transform:rotate(0deg) scaleX(1)}
}

/* As telas: deslize vertical curto e contínuo — é o que dá a impressão de
   dado rolando nos monitores, que é o movimento que a sala teria. */
.mv__telas{left:60%;top:40%;width:40%;
  animation:pcTelas 9s ease-in-out infinite}
@keyframes pcTelas{
  0%,100%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-.9%) scale(1.006)}
  70%{transform:translateY(.6%) scale(1.003)}
}

/* A sala inteira deriva: sem isto a foto denuncia que é foto. */
.sala__bg{animation:pcSala 54s ease-in-out infinite}
@keyframes pcSala{
  0%,100%{transform:scale(1.05) translate(0,0)}
  50%{transform:scale(1.085) translate(-1.1%,-.8%)}
}

@media (prefers-reduced-motion:reduce){
  .mv img,.sala__bg{animation:none !important}
}

/* ----------------------------------------------------------------- topo */
.sala__top{position:relative;z-index:4;display:flex;align-items:flex-start;
  justify-content:space-between;gap:24px;padding:26px 40px}
.sala__marca{display:flex;align-items:center;gap:18px}
.sala__wm{font:300 30px/1 var(--f-disp);letter-spacing:.38em;color:var(--tx)}
.sala__marca i{width:1px;height:26px;background:var(--line-on);opacity:.7}
.sala__sub{font:var(--eyebrow);letter-spacing:var(--eyebrow-ls);
  color:var(--tx2);text-transform:uppercase}
.sala__estado{text-align:right;display:flex;flex-direction:column;gap:6px;
  align-items:flex-end}
.sala__sinal{display:flex;align-items:center;gap:9px;font:var(--eyebrow);
  letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--tx3)}
.sala__sinal i{width:8px;height:8px;border-radius:50%;background:var(--tx3);
  opacity:.5}
.sala__sinal[data-on="1"]{color:var(--tx2)}
.sala__sinal[data-on="1"] i{background:var(--ok);opacity:1;
  box-shadow:0 0 10px rgba(56,232,198,.8);animation:mvResp 2.6s ease-in-out infinite}
@keyframes mvResp{50%{opacity:.45}}
.sala__hora{font:var(--dado);letter-spacing:var(--dado-ls);color:var(--tx3)}

/* --------------------------------------------------------------- frases */
.sala__frase{margin:0;font:300 13px/1.75 var(--f-body);color:var(--tx2);
  letter-spacing:.1em;text-transform:uppercase}
.sala__frase--e{position:absolute;left:40px;top:33%;z-index:4;
  padding-bottom:16px}
.sala__frase--e::after{content:"";position:absolute;left:0;bottom:0;
  width:42px;height:1px;background:var(--line-on)}

/* ---------------------------------------------------------------- card */
.sala__meio{position:fixed;inset:0;z-index:5;display:grid;place-items:center;
  pointer-events:none;padding:96px 20px 110px}
.sala__card{pointer-events:auto;width:clamp(300px,34vw,432px);
  max-height:100%;
  padding:38px 40px 30px;border-radius:4px;
  border:1px solid rgba(63,177,255,.34);
  background:linear-gradient(180deg,rgba(8,26,48,.74),rgba(3,12,26,.82));
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 70px rgba(0,150,255,.14);
  backdrop-filter:blur(18px)}
.cardv__wm{margin:0;text-align:center;font:200 46px/1 var(--f-disp);
  letter-spacing:.3em;text-indent:.3em;
  background:linear-gradient(180deg,var(--ice),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cardv__k{margin:12px 0 0;text-align:center;font:var(--eyebrow);
  letter-spacing:.34em;color:var(--tx2);text-transform:uppercase}
.cardv__hr{width:54px;height:1px;border:0;margin:18px auto;
  background:var(--line-on)}
.cardv__k2{margin:0 0 26px;text-align:center;font:var(--eyebrow);
  letter-spacing:var(--eyebrow-ls);color:var(--tx3);text-transform:uppercase}

.cardv__form{display:flex;flex-direction:column;gap:14px}
.cardv__in{display:flex;align-items:center;gap:13px;height:50px;padding:0 15px;
  border:1px solid var(--line);border-radius:3px;background:rgba(2,10,22,.6);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.cardv__in:focus-within{border-color:var(--line-on);
  box-shadow:0 0 0 1px rgba(0,217,255,.2),0 0 28px rgba(0,180,255,.14)}
.cardv__in>svg{width:19px;height:19px;color:var(--tx3);flex:none}
.cardv__in input{flex:1;min-width:0;background:none;border:0;outline:none;
  color:var(--tx);font:400 14px/1 var(--f-body)}
.cardv__in input::placeholder{color:var(--tx3)}
.cardv__eye{background:none;border:0;padding:3px;cursor:pointer;display:flex;
  color:var(--tx3)}
.cardv__eye:hover{color:var(--cyan)}
.cardv__eye svg{width:19px;height:19px}
.cardv__eye[aria-pressed="true"] .cardv__cut{display:none}

.cardv__seg{display:flex;align-items:center;gap:10px;margin:2px 0 0;
  color:var(--tx3);font:300 12.5px/1 var(--f-body)}
.cardv__mk{width:16px;height:16px;border-radius:3px;flex:none;
  border:1px solid var(--line);position:relative}
.cardv__seg[data-on="1"]{color:var(--tx2)}
.cardv__seg[data-on="1"] .cardv__mk{border-color:var(--cyan);
  background:var(--cyan)}
.cardv__seg[data-on="1"] .cardv__mk::after{content:"";position:absolute;
  left:5px;top:1px;width:4px;height:9px;border:solid var(--bg-0);
  border-width:0 1.8px 1.8px 0;transform:rotate(42deg)}
.cardv__seg b{font-weight:400}
.cardv__info{width:17px;height:17px;border-radius:50%;flex:none;cursor:pointer;
  border:1px solid var(--line);background:none;color:var(--tx3);
  font:500 10px/1 var(--f-body)}
.cardv__info:hover{color:var(--cyan);border-color:var(--line-on)}

.cardv__go{margin-top:8px;height:52px;display:flex;align-items:center;
  justify-content:center;gap:14px;cursor:pointer;border:0;border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));color:var(--bg-0);
  font:500 14px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;
  box-shadow:0 0 34px rgba(0,170,255,.34);transition:.2s var(--ease)}
.cardv__go:hover{box-shadow:0 0 52px rgba(0,190,255,.5);filter:brightness(1.08)}
.cardv__go[disabled]{opacity:.6;cursor:progress}
.cardv__go svg{width:20px;height:20px}

.cardv__msg{margin:0;min-height:1.05em;font:300 12px/1.5 var(--f-body);
  color:var(--bad);text-align:center}
.cardv__msg[data-tom="info"]{color:var(--tx3)}
.cardv__nota{margin:-4px 0 0;font:300 11px/1.5 var(--f-body);color:var(--tx3);
  opacity:.75}

.cardv__ou{display:flex;align-items:center;gap:14px;margin:2px 0;
  color:var(--tx3);font:var(--eyebrow);letter-spacing:var(--eyebrow-ls);
  text-transform:uppercase}
.cardv__ou::before,.cardv__ou::after{content:"";flex:1;height:1px;
  background:var(--line)}
.cardv__disp{display:flex;align-items:center;justify-content:center;gap:12px;
  height:50px;border:1px solid var(--line-on);border-radius:3px;
  background:none;color:var(--tx2);font:400 12px/1 var(--f-body);
  letter-spacing:.14em;text-transform:uppercase}
.cardv__disp svg{width:19px;height:19px;flex:none}
.cardv__disp span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cardv__disp[disabled]{opacity:.42;cursor:not-allowed}
.cardv__link{background:none;border:0;padding:0;margin-top:2px;cursor:pointer;
  color:var(--tx3);font:300 12px/1 var(--f-body);text-align:center}
.cardv__link:hover{color:var(--cyan)}

/* --------------------------------------------------------------- direita */
.sala__dir{position:absolute;z-index:4;right:40px;top:26%;
  display:flex;gap:34px;align-items:flex-start}
.sala__acoes{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:20px}
.sala__acoes li{display:flex;align-items:center;gap:13px;color:var(--tx2);
  font:var(--eyebrow);letter-spacing:var(--eyebrow-ls);text-transform:uppercase}
.hex{width:30px;height:30px;flex:none;display:grid;place-items:center;
  color:var(--cyan);border:1px solid var(--line);
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
  background:rgba(0,217,255,.07)}
.hex svg{width:15px;height:15px}

/* --------------------------------------------------------------- rodapé */
.sala__bar{position:absolute;z-index:4;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,6,14,.8),rgba(0,4,10,.94));
  backdrop-filter:blur(12px)}
.mtr{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto auto;
  column-gap:14px;align-items:center;padding:16px 22px}
.mtr+.mtr{border-left:1px solid var(--line)}
.mtr__i{grid-row:1/4;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:4px;color:var(--cyan);
  background:rgba(0,217,255,.06)}
.mtr__i svg{width:21px;height:21px}
.mtr i{font:var(--eyebrow);letter-spacing:var(--eyebrow-ls);color:var(--tx3);
  text-transform:uppercase;font-style:normal;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtr em{white-space:nowrap}
.mtr b{font:200 27px/1.1 var(--f-disp);color:var(--tx2)}
.mtr em{font:var(--lbl);letter-spacing:var(--lbl-ls);color:var(--tx3);
  font-style:normal;text-transform:uppercase;opacity:.7}

/* ---------------------------------------------------------- telas menores */
@media (max-width:1180px){
  .sala__dir,.sala__frase--e{display:none}
  .mv__globo,.mv__scan{opacity:.3}
  .sala__bar{grid-template-columns:repeat(3,1fr)}
  .mtr:nth-child(n+4){display:none}
}
@media (max-width:820px){
  .sala__bar{grid-template-columns:repeat(2,1fr)}
  .mtr:nth-child(n+5){display:none}
  .sala__card{width:min(94vw,420px);padding:30px 26px 24px}
  .mv__aneis{opacity:.28}
}
@media (max-height:760px){
  .sala__card{padding:26px 32px 20px}
  .cardv__wm{font-size:34px}
  .cardv__hr{margin:12px auto}
  .cardv__k2{margin-bottom:16px}
  .cardv__form{gap:11px}
  .cardv__in,.cardv__go,.cardv__disp{height:44px}
  .mtr{padding:11px 16px}
  .mtr b{font-size:22px}
}
@media (max-height:600px){
  /* Reserva a faixa da barra: o card rola por dentro se precisar, mas
     não passa por cima do rodapé. */
  .sala__meio{padding:60px 16px 96px}
  .sala__card{overflow-y:auto;padding:18px 24px 14px}
  .cardv__disp{font-size:10.5px;letter-spacing:.1em}
  .cardv__wm{font-size:28px}
  .cardv__k,.cardv__k2{letter-spacing:.2em}
  .cardv__hr{margin:9px auto}
  .cardv__nota,.cardv__ou,.cardv__link{display:none}
  .sala__top{padding:14px 20px}
}

/* VIKI CSP INLINE FIX V1 */
.svg-defs{position:absolute}
.topo__link.is-live{stroke:rgba(63,177,255,.32)}
.mrow__tree{color:#52697A;font-family:var(--f-mono)}
.attn--boundary{margin:0;border-style:dashed;border-color:rgba(99,75,255,.34)}
.attn__k--boundary{color:#A377FF}
.tenant-boundary-wrap{margin:-14px 0 22px}

/* largura das microbarras sem style inline */
.mbar__p-2{width:2%}
.mbar__p-3{width:3%}
.mbar__p-4{width:4%}
.mbar__p-5{width:5%}
.mbar__p-6{width:6%}
.mbar__p-7{width:7%}
.mbar__p-8{width:8%}
.mbar__p-9{width:9%}
.mbar__p-10{width:10%}
.mbar__p-11{width:11%}
.mbar__p-12{width:12%}
.mbar__p-13{width:13%}
.mbar__p-14{width:14%}
.mbar__p-15{width:15%}
.mbar__p-16{width:16%}
.mbar__p-17{width:17%}
.mbar__p-18{width:18%}
.mbar__p-19{width:19%}
.mbar__p-20{width:20%}
.mbar__p-21{width:21%}
.mbar__p-22{width:22%}
.mbar__p-23{width:23%}
.mbar__p-24{width:24%}
.mbar__p-25{width:25%}
.mbar__p-26{width:26%}
.mbar__p-27{width:27%}
.mbar__p-28{width:28%}
.mbar__p-29{width:29%}
.mbar__p-30{width:30%}
.mbar__p-31{width:31%}
.mbar__p-32{width:32%}
.mbar__p-33{width:33%}
.mbar__p-34{width:34%}
.mbar__p-35{width:35%}
.mbar__p-36{width:36%}
.mbar__p-37{width:37%}
.mbar__p-38{width:38%}
.mbar__p-39{width:39%}
.mbar__p-40{width:40%}
.mbar__p-41{width:41%}
.mbar__p-42{width:42%}
.mbar__p-43{width:43%}
.mbar__p-44{width:44%}
.mbar__p-45{width:45%}
.mbar__p-46{width:46%}
.mbar__p-47{width:47%}
.mbar__p-48{width:48%}
.mbar__p-49{width:49%}
.mbar__p-50{width:50%}
.mbar__p-51{width:51%}
.mbar__p-52{width:52%}
.mbar__p-53{width:53%}
.mbar__p-54{width:54%}
.mbar__p-55{width:55%}
.mbar__p-56{width:56%}
.mbar__p-57{width:57%}
.mbar__p-58{width:58%}
.mbar__p-59{width:59%}
.mbar__p-60{width:60%}
.mbar__p-61{width:61%}
.mbar__p-62{width:62%}
.mbar__p-63{width:63%}
.mbar__p-64{width:64%}
.mbar__p-65{width:65%}
.mbar__p-66{width:66%}
.mbar__p-67{width:67%}
.mbar__p-68{width:68%}
.mbar__p-69{width:69%}
.mbar__p-70{width:70%}
.mbar__p-71{width:71%}
.mbar__p-72{width:72%}
.mbar__p-73{width:73%}
.mbar__p-74{width:74%}
.mbar__p-75{width:75%}
.mbar__p-76{width:76%}
.mbar__p-77{width:77%}
.mbar__p-78{width:78%}
.mbar__p-79{width:79%}
.mbar__p-80{width:80%}
.mbar__p-81{width:81%}
.mbar__p-82{width:82%}
.mbar__p-83{width:83%}
.mbar__p-84{width:84%}
.mbar__p-85{width:85%}
.mbar__p-86{width:86%}
.mbar__p-87{width:87%}
.mbar__p-88{width:88%}
.mbar__p-89{width:89%}
.mbar__p-90{width:90%}
.mbar__p-91{width:91%}
.mbar__p-92{width:92%}
.mbar__p-93{width:93%}
.mbar__p-94{width:94%}
.mbar__p-95{width:95%}
.mbar__p-96{width:96%}
.mbar__p-97{width:97%}
.mbar__p-98{width:98%}
.mbar__p-99{width:99%}
.mbar__p-100{width:100%}