/* =====================================================================
   OrionOS — o painel

   NÃO É UM DASHBOARD, É UMA MESA.

   A diferença decide o layout inteiro. Um dashboard existe para
   contemplar números; uma mesa existe para agir enquanto outra coisa
   acontece — quase sempre num segundo monitor, com o jogo aberto do
   lado. Por isso: densidade alta, nada de cartão arredondado com
   sombra, nada de espaço em branco decorativo, e tudo visível de uma
   vez sem rolar.

   A linguagem é a do servidor (Oswald condensado, laranja único), mas o
   chão é mais frio e mais plano que o da interface do jogo: aquela é
   uma camada sobre a rua, esta é uma ferramenta de trabalho.
   ===================================================================== */

@font-face {
  font-family: 'Oswald';
  src: url('fonts/oswald.woff2') format('woff2');
  font-weight: 200 700; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}

:root {
  --fundo:   #0e1116;
  --chao:    #141920;
  --alto:    #1b212a;
  --linha:   #232a35;

  --texto:   #e8ecf2;
  --texto-2: #97a1b0;
  --texto-3: #5f6b7a;

  --laranja: #ff8a1e;
  --verde:   #46d17b;
  --ambar:   #ffc043;
  --vermelho:#ff5a52;

  --grade: 'Inter', system-ui, sans-serif;
  --titulo: 'Oswald', 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;

  /* NUNCA ROLA A PAGINA INTEIRA — nem a mesa nem a portaria. Quem rola
     e uma lista ou o console, por dentro; a pagina em volta e fixa. Sem
     isto, um pixel de sobra em qualquer canto (a legenda da mira, um
     ponto de estrela) cria uma barra de rolagem vertical que reduz a
     largura visivel e empurra os elementos fixos do rodape para fora
     da tela — foi o que cortava "acesso registrado" na borda direita.
  */
  overflow: hidden;

  background: var(--fundo);
  color: var(--texto);
  font-family: var(--grade);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button, input { font: inherit; color: inherit; }

/* =====================================================================
   A MARCA

   OrionOS. O desenho e a propria constelacao: os dois ombros, os dois
   pes e o cinturao de tres estrelas. Sao pontos e linhas de 1px, entao
   ele sobrevive a 18px na barra de cima e nao precisa de versao
   alternativa em lugar nenhum.

   O cinturao vai em laranja e o resto em cinza-claro. E o unico lugar
   da marca com cor, e e por isso que ele e a parte que se reconhece.
   ===================================================================== */

.marca-orion { width: 26px; height: 26px; flex: none; }
.marca-orion circle { fill: #cbd4e2; }
.marca-orion .cinturao circle { fill: var(--laranja); }
.marca-orion .tracos path {
  fill: none;
  stroke: rgba(203, 212, 226, .34);
  stroke-width: 1;
  stroke-linecap: round;
}

.marca-nome {
  font-size: 14.5px; font-weight: 600;
  letter-spacing: .005em;
  color: var(--texto);
}
.marca-nome b { font-weight: 400; color: var(--texto-3); }

/* =====================================================================
   ENTRAR — a tela de bloqueio

   A PORTA DE UM SISTEMA, PORQUE ISTO E UM SISTEMA.

   O painel se chama OrionOS, e a tela de bloqueio de um sistema
   operacional ja resolve exatamente o problema desta pagina: dizer de
   que maquina voce esta perto, se ela esta viva, que horas sao, e
   pedir uma credencial — sem mais nada em volta.

   A gramatica e a do macOS e do GNOME, e nao a de um formulario de
   site. As diferencas nao sao cosmeticas, sao regras:

   - CANTO ARREDONDADO EM TUDO. O resto do painel (a mesa) e quadrado
     de proposito, porque e ferramenta densa. Aqui e o contrario: a
     pilula e a forma que um sistema usa para dizer "escreva aqui".
   - VIDRO, NAO CAIXA. Os campos sao translucidos sobre o papel de
     parede, com desfoque atras. E o que separa "tela do sistema" de
     "pagina web com fundo bonito".
   - FONTE DE INTERFACE, sem a condensada de titulo que a mesa usa. Um
     sistema operacional nao tem fonte de display na tela de login.
   ===================================================================== */

.entrada {
  position: relative;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: #070a11;
}

/* ---------------------------------------------------------------------
   O PAPEL DE PAREDE
   ------------------------------------------------------------------- */

.papel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* As duas luzes fazem o "clima" do papel de parede. Ficam desfocadas
   de verdade (blur pesado), como numa tela de bloqueio que borra o
   fundo para o texto da frente sobreviver. */
.papel-luz {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);

  /* Deriva de meio minuto por volta, com deslocamento grande o
     suficiente para o olho pegar o movimento em poucos segundos. O
     blur pesado e o que permite ser rapido sem virar animacao chamativa:
     o que se move e uma mancha de luz, nao um objeto com contorno. */
  will-change: transform;
}
.papel-luz--ambar {
  right: -8%;
  bottom: -22%;
  width: 62%;
  height: 62%;
  background: radial-gradient(circle, rgba(255, 138, 30, .30), rgba(255, 106, 20, .07) 55%, transparent 72%);
  animation: derivar-ambar 26s ease-in-out infinite;
}
.papel-luz--frio {
  left: -14%;
  top: -18%;
  width: 66%;
  height: 66%;
  background: radial-gradient(circle, rgba(58, 104, 190, .26), rgba(38, 66, 130, .07) 55%, transparent 72%);
  animation: derivar-frio 34s ease-in-out infinite;
}

/* A terceira luz nao fica parada em canto nenhum: ela orbita o centro
   da tela, passando por tras do campo de senha. E ela que garante que
   qualquer pedaco do fundo mude de cor com o tempo — sem ela, o meio
   da tela seria a unica regiao sempre igual. */
.papel-luz--roxa {
  left: 22%;
  top: 18%;
  width: 54%;
  height: 54%;
  background: radial-gradient(circle, rgba(122, 92, 210, .22), rgba(70, 60, 150, .06) 55%, transparent 72%);
  animation: orbitar-roxa 45s linear infinite;
}

/* As tres nunca andam juntas: periodos diferentes (26s, 34s e 45s) e
   sentidos opostos fazem o encontro delas cair sempre num lugar novo,
   e e isso que impede o fundo de parecer um loop curto. */
@keyframes derivar-ambar {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(-18%, -12%, 0) scale(1.22); }
  66%  { transform: translate3d(-7%, -22%, 0) scale(.9); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes derivar-frio {
  0%   { transform: translate3d(0, 0, 0) scale(1.06); }
  33%  { transform: translate3d(22%, 14%, 0) scale(.88); }
  66%  { transform: translate3d(9%, 26%, 0) scale(1.18); }
  100% { transform: translate3d(0, 0, 0) scale(1.06); }
}
/* A orbita e um circulo de verdade: rotaciona, anda para fora e
   desrotaciona: a mancha percorre o circulo sem girar em si mesma. */
@keyframes orbitar-roxa {
  from { transform: rotate(0deg) translateX(16%) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(16%) rotate(-360deg); }
}

.papel-ceu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  /* Desfoque de verdade: as estrelas param de ser pontos duros e viram
     luz, e a constelacao recua para o lugar de papel de parede. Nitida
     ela competia com o campo de senha — numa tela de bloqueio, o fundo
     tem de perder essa disputa por definicao. */
  filter: blur(1.6px);

  /* O ceu inteiro balanca em torno de um ponto fora do centro, como o
     ceu real gira em torno do polo — mas em vai-e-vem de poucos graus,
     nao em volta completa: Orion e a marca da casa, e uma marca de
     cabeca para baixo em dois minutos nao e mais a marca. A escala de
     1.3 existe por necessidade: inclinado, os cantos do SVG entrariam
     na tela se ele nao fosse maior que ela. */
  transform-origin: 62% 40%;
  animation: balancar-ceu 88s ease-in-out infinite alternate;
}

@keyframes balancar-ceu {
  from { transform: scale(1.3) rotate(-7deg) translate3d(-1.5%, 1%, 0); }
  to   { transform: scale(1.3) rotate(7deg) translate3d(1.5%, -1%, 0); }
}

/* O CINTILAR.

   A opacidade de cada estrela ja vem no atributo do SVG, e e ela que
   faz a profundidade do campo — se a animacao mexesse em opacity, o
   CSS venceria o atributo e todas ficariam com o mesmo brilho. Por
   isso o cintilar e feito no tamanho: preserva a opacidade sorteada e
   ainda le melhor sob o desfoque. */
.papel-ceu .poeira circle {
  fill: #dce6f6;
  transform-box: fill-box;
  transform-origin: center;

  /* Duas animacoes ao mesmo tempo, e por isso elas usam propriedades
     SEPARADAS: `scale` para o cintilar e `translate` para a deriva. Se
     as duas escrevessem em `transform`, a segunda apagaria a primeira —
     a estrela ou piscaria ou andaria, nunca as duas coisas. */
  animation:
    cintilar 5.5s ease-in-out infinite alternate,
    vaguear 40s ease-in-out infinite alternate;
}

/* Sem os defasamentos o campo todo pulsaria junto, que e exatamente o
   que um ceu nao faz. O passo 7 espalha as estrelas vizinhas em faixas
   diferentes, entao o cintilar nunca corre em onda pela tela. */
.papel-ceu .poeira circle:nth-child(7n)   { animation-duration: 4.2s, 34s; animation-delay: -1.2s, -8s; }
.papel-ceu .poeira circle:nth-child(7n+1) { animation-duration: 2.6s, 52s; animation-delay: -3.4s, -19s; }
.papel-ceu .poeira circle:nth-child(7n+2) { animation-duration: 6.1s, 27s; animation-delay: -6.1s, -3s; }
.papel-ceu .poeira circle:nth-child(7n+3) { animation-duration: 3.4s, 46s; animation-delay: -2.3s, -25s; }
.papel-ceu .poeira circle:nth-child(7n+4) { animation-duration: 5.2s, 31s; animation-delay: -7.7s, -12s; }
.papel-ceu .poeira circle:nth-child(7n+5) { animation-duration: 2.1s, 58s; animation-delay: -.8s, -33s; }
.papel-ceu .poeira circle:nth-child(7n+6) { animation-duration: 7.3s, 23s; animation-delay: -4.9s, -6s; }

@keyframes cintilar {
  from { scale: .35; }
  to   { scale: 1.35; }
}

/* A DERIVA DAS CAMADAS.

   Cada faixa de estrelas anda para um lado, num tempo proprio. E o
   parallax que faz o campo ter profundidade: as que andam mais parecem
   estar na frente, as lentas parecem estar no fundo. Os valores sao
   unidades do viewBox (1200x800), nao pixels da tela. */
@keyframes vaguear {
  from { translate: 0 0; }
  to   { translate: 26px -18px; }
}
@keyframes vaguear-esquerda {
  from { translate: 0 0; }
  to   { translate: -30px 20px; }
}
/* As faixas impares vao para o lado contrario — sem isso o ceu inteiro
   escorreria na mesma direcao, que le como a pagina inteira arrastando. */
.papel-ceu .poeira circle:nth-child(2n) {
  animation-name: cintilar, vaguear-esquerda;
}

/* As linhas da constelacao respiram de brilho em vez de se mexer: elas
   ligam estrelas que estao paradas no desenho, entao mover a linha
   quebraria o desenho. O que muda e quanto ela aparece. */
.papel-ceu .constelacao path {
  fill: none;
  stroke: rgba(214, 226, 245, .11);
  stroke-width: 1.2;
  stroke-linecap: round;
  animation: respirar-linhas 14s ease-in-out infinite alternate;
}

@keyframes respirar-linhas {
  from { stroke: rgba(214, 226, 245, .05); }
  to   { stroke: rgba(214, 226, 245, .2); }
}

.papel-ceu .astros circle {
  fill: #eef3fb;
  opacity: .7;
  filter: drop-shadow(0 0 7px rgba(238, 243, 251, .55));
  transform-box: fill-box;
  transform-origin: center;
  animation: pulsar-astro 4s ease-in-out infinite alternate;
}
.papel-ceu .astros circle:nth-child(2) { animation-duration: 5.5s; animation-delay: -2.5s; }
.papel-ceu .astros circle:nth-child(3) { animation-duration: 3.2s; animation-delay: -4s; }
.papel-ceu .astros circle:nth-child(4) { animation-duration: 6.5s; animation-delay: -1.5s; }

@keyframes pulsar-astro {
  from { opacity: .35; scale: .8; filter: drop-shadow(0 0 5px rgba(238, 243, 251, .3)); }
  to   { opacity: .95; scale: 1.25; filter: drop-shadow(0 0 16px rgba(238, 243, 251, .9)); }
}

/* O cinturao e a marca da casa dentro do papel de parede — as tres
   estrelas laranja acendem em sequencia, da esquerda para a direita,
   como o olho leria o desenho. */
.papel-ceu .cinturao circle {
  fill: #ffa34d;
  filter: drop-shadow(0 0 10px rgba(255, 138, 30, .75));
  transform-box: fill-box;
  transform-origin: center;
  animation: pulsar-cinturao 3s ease-in-out infinite alternate;
}
.papel-ceu .cinturao circle:nth-child(2) { animation-delay: -1s; }
.papel-ceu .cinturao circle:nth-child(3) { animation-delay: -2s; }

@keyframes pulsar-cinturao {
  from { scale: .85; filter: drop-shadow(0 0 6px rgba(255, 138, 30, .4)); }
  to   { scale: 1.2;  filter: drop-shadow(0 0 20px rgba(255, 138, 30, 1)); }
}

/* O escurecimento por cima do papel de parede.
   Todo sistema faz isso na tela de bloqueio, e por um motivo pratico:
   o texto branco do centro precisa de contraste garantido em qualquer
   ponto do fundo, inclusive por cima da luz mais clara dele. */
.papel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 62% 58% at 50% 46%,
    rgba(4, 6, 11, .55) 0%, rgba(4, 6, 11, .3) 55%, rgba(4, 6, 11, .12) 100%);
}

/* O GRAO NAO E ESTETICA, E CORRECAO.
   Luz difusa sobre fundo escuro vira faixa de banding em monitor de 8
   bits. O ruido quebra a faixa — e o mesmo motivo pelo qual todo
   degrade de papel de parede de sistema tem textura. */
.papel-grao {
  position: absolute;
  inset: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- os meteoros ----------

   Riscos finos que atravessam a tela e somem. O tempo de voo e curto
   (pouco mais de um segundo) e o intervalo, curto o bastante para que
   quase sempre haja um no ar: sao quatro, em tempos primos entre si,
   entao nunca passam em fila. */
.papel-meteoro {
  position: absolute;
  top: -12%;
  width: 190px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(220, 232, 250, .9));
  filter: blur(.4px) drop-shadow(0 0 6px rgba(200, 220, 255, .55));
  opacity: 0;
  animation: riscar 11s linear infinite;
}
.papel-meteoro--um   { left: 8%; }
.papel-meteoro--dois {
  left: 58%;
  width: 130px;
  animation-duration: 17s;
  animation-delay: -6s;
  background: linear-gradient(90deg, transparent, rgba(255, 196, 140, .8));
}
.papel-meteoro--tres {
  left: 33%;
  width: 230px;
  animation-duration: 13s;
  animation-delay: -9s;
}
.papel-meteoro--quatro {
  left: 76%;
  width: 160px;
  animation-duration: 23s;
  animation-delay: -3s;
  background: linear-gradient(90deg, transparent, rgba(180, 205, 255, .75));
}

/* O risco existe so nos primeiros 12% do ciclo; o resto do tempo ele
   esta parado, invisivel e fora da tela — que e como se faz um evento
   intermitente sem um temporizador em JavaScript. */
@keyframes riscar {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(28deg); }
  2%   { opacity: 0; }
  4%   { opacity: .95; }
  12%  { opacity: 0; transform: translate3d(620px, 950px, 0) rotate(28deg); }
  100% { opacity: 0; transform: translate3d(620px, 950px, 0) rotate(28deg); }
}

/* ---------------------------------------------------------------------
   A BARRA DE MENU
   ------------------------------------------------------------------- */

.barra-sistema {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 14px;

  /* Translucida com desfoque atras: e a assinatura da barra de menu de
     um sistema, e a razao de ela nunca parecer "colada por cima". */
  background: rgba(10, 13, 20, .42);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.barra-sistema-lado { display: flex; align-items: center; gap: 14px; }

.barra-marca { display: flex; }
.barra-marca svg { width: 15px; height: 15px; }
.barra-marca circle { fill: rgba(255, 255, 255, .82); }
.barra-marca .cinturao circle { fill: var(--laranja); }
.barra-marca .tracos path { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1; }

.barra-nome {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: rgba(255, 255, 255, .9);
}

.barra-relogio {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  font-variant-numeric: tabular-nums;
}

/* O estado do servidor mora aqui, junto do relogio: e onde um sistema
   poe wi-fi e bateria — indicadores que se le de canto de olho. */
.estado-publico { display: flex; align-items: center; gap: 6px; }
.estado-publico i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
}
.estado-publico span { font-size: 11.5px; color: rgba(255, 255, 255, .55); }

.estado-publico.no-ar i { background: #45d67f; box-shadow: 0 0 8px rgba(69, 214, 127, .8); }
.estado-publico.no-ar span { color: rgba(255, 255, 255, .72); }
.estado-publico.fora i { background: #ff655c; box-shadow: 0 0 8px rgba(255, 101, 92, .8); }
.estado-publico.fora span { color: #ff9a94; }

/* ---------------------------------------------------------------------
   A SESSAO
   ------------------------------------------------------------------- */

.sessao {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(38px, 9vh, 88px);
  padding: 28px 20px;
  min-height: 0;
}

/* ---------- a conta ---------- */

.conta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* A MARCA.

   Onde uma tela de bloqueio poe o retrato do usuario, esta poe o
   logotipo — e como ele e horizontal e ja traz o nome, entra sem
   moldura redonda: um wordmark dentro de um circulo teria de encolher
   ate o texto ficar ilegivel.

   A sombra difusa faz o papel que o anel de vidro fazia antes: separa a
   marca branca do papel de parede quando ela cai por cima de uma das
   luzes claras do fundo. */
.conta-logo {
  /* Um pouco mais estreita que a coluna dos campos, de proposito: a
     marca anuncia, os campos e que sao o assunto. Marca mais larga que
     o formulario inverte essa ordem. */
  width: min(62vw, 212px);
  height: auto;
  margin-bottom: 34px;
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .75));
  user-select: none;
  -webkit-user-drag: none;
}

.conta-campos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(84vw, 288px);
}

/* ---------- os campos ---------- */

/* A PILULA E O PONTO.
   Um retangulo de canto vivo aqui pareceria formulario de site; a
   pilula translucida e o que um sistema usa desde sempre para dizer
   "a credencial vai aqui". */
.campo {
  position: relative;
  display: block;
}

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.campo input {
  width: 100%;

  /* 44px e a altura minima de um alvo de toque, e e tambem o que faz o
     campo parecer uma pilula de sistema em vez de um input de site — a
     forma so aparece quando a altura sustenta o raio total. */
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #fff;
  font-size: 14.5px;
  outline: none;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.campo input::placeholder { color: rgba(255, 255, 255, .5); }

/* O AUTOPREENCHIMENTO.

   Quando o navegador preenche usuario e senha, ele pinta o campo de
   azul-claro com texto escuro — e nao ha `background` que vença isso,
   porque o Chromium desenha essa cor numa camada propria, acima da
   folha de estilo. Os dois truques abaixo sao a unica forma de reaver
   o campo:

   - a sombra interna de 1000px cobre a camada do navegador por dentro,
     do lado de ca;
   - `-webkit-text-fill-color` e o unico jeito de mudar a cor do texto
     preenchido, porque `color` tambem e ignorado;
   - a transicao absurdamente longa segura o flash da cor original no
     instante do preenchimento. */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px rgba(58, 62, 74, .92);
  box-shadow: inset 0 0 0 1000px rgba(58, 62, 74, .92);
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 9999s ease-out, box-shadow .16s;
}
.campo input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px rgba(70, 74, 88, .95), 0 0 0 4px rgba(255, 138, 30, .22);
  box-shadow: inset 0 0 0 1000px rgba(70, 74, 88, .95), 0 0 0 4px rgba(255, 138, 30, .22);
}

.campo input:focus {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .4);
  box-shadow: 0 0 0 4px rgba(255, 138, 30, .22);
}

.campo--senha input { padding-right: 50px; }

/* A seta dentro do campo, como no macOS. Ela e o botao de submit de
   verdade — o Enter continua funcionando, e quem usa o rato tem onde
   clicar sem procurar um botao em outro lugar da tela. */
.seta {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  cursor: pointer;
  transition: background .16s, transform .1s;
}
.seta svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.seta:hover { background: var(--laranja); }
.seta:hover svg { stroke: #17110a; }
.seta:active { transform: translateY(-50%) scale(.94); }
.seta:disabled { opacity: .4; cursor: default; }
.seta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.conta-dica {
  margin-top: 20px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .5);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

/* O erro aparece embaixo, na largura do campo, e nao numa faixa larga:
   ele pertence ao campo que falhou. */
.entrada-erro {
  width: min(84vw, 288px);
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 12.5px;
  text-align: center;
  color: #ffd9d6;
  background: rgba(255, 90, 82, .2);
  border: 1px solid rgba(255, 120, 112, .35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------------------------------------------------------------------
   O RODAPE
   ------------------------------------------------------------------- */

.rodape-sistema {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px 18px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .42);
}

/* O aviso e a pilha de marcas dividem a largura igualmente para que os
   direitos fiquem no centro OTICO da tela, e nao no centro do que sobra
   entre os dois. */
.rodape-aviso,
.rodape-pilha { flex: 1 1 0; }
.rodape-pilha { justify-content: flex-end; }

.rodape-direitos {
  flex: 0 1 auto;
  text-align: center;
  color: rgba(255, 255, 255, .34);
  white-space: nowrap;
}

.rodape-pilha { display: flex; align-items: center; gap: 10px; }
.rodape-pilha img:first-child { opacity: .55; }
.rodape-pilha img:last-child {
  border-radius: 3px;
  filter: grayscale(1) brightness(1.7) opacity(.4);
  transition: filter .18s;
}
.rodape-pilha:hover img:last-child { filter: none; }

.entrada :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------------
   TELA ESTREITA

   Num celular a tela de bloqueio nao muda de natureza — ela so encolhe
   o relogio e aproxima os elementos. Nada some, porque nao ha nada
   sobrando aqui.
   ------------------------------------------------------------------- */

@media (max-width: 620px) {
  .sessao { gap: 34px; }
  .conta-logo { width: min(68vw, 210px); margin-bottom: 20px; }

  /* Tres colunas nao cabem num celular. O rodape vira uma pilha
     centrada, e o aviso — que e o que importa juridicamente — continua
     sendo a primeira linha. */
  .rodape-sistema {
    flex-direction: column;
    gap: 8px;
    font-size: 10.5px;
    padding: 12px 14px 16px;
    text-align: center;
  }
  .rodape-aviso,
  .rodape-pilha { flex: 0 0 auto; }
  .rodape-direitos { white-space: normal; }
}

@media (max-height: 560px) {
  .sessao { gap: 24px; }
}

/* ---------------------------------------------------------------------
   QUEM PEDIU MENOS MOVIMENTO

   O fundo animado e enfeite, e enfeite e a primeira coisa que sai
   quando o sistema avisa que movimento incomoda quem esta na frente.
   A tela continua identica — so para de se mexer.
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .papel-luz,
  .papel-ceu,
  .papel-ceu .poeira circle,
  .papel-ceu .constelacao path,
  .papel-ceu .astros circle,
  .papel-ceu .cinturao circle { animation: none; }

  .papel-meteoro { display: none; }
}



/* =====================================================================
   O PAINEL — A ARMAÇÃO

   A LINGUAGEM AQUI É A DE UM APP DE SISTEMA, E NÃO A DE UM TERMINAL.

   A versão anterior era um instrumento industrial: tudo quadrado, tudo
   em caixa alta com espaçamento de letra largo, divisórias de 1px
   encostando umas nas outras. Aquilo lê como painel de máquina — e
   este programa não é operado no meio de um turno de fábrica, é
   operado numa janela ao lado do jogo, no mesmo desktop onde estão o
   Finder, o Nautilus e o navegador.

   Então ele adota as regras dessas janelas, que são poucas e firmes:

   - BARRA LATERAL COM PÍLULAS. A seção aberta é uma pílula preenchida,
     não uma borda colorida na margem. É o padrão do Ajustes do macOS e
     do GNOME, e resolve sozinho o "onde eu estou".
   - CARTÕES COM RAIO, SOBRE UM CHÃO. O conteúdo não encosta na moldura
     da janela: fica em superfícies arredondadas separadas por espaço.
     Divisória de 1px é o recurso de quem não tem espaço; aqui há.
   - TIPOGRAFIA DE INTERFACE, e não de display. Títulos de bloco em
     texto normal, tamanho de leitura. A caixa alta com tracking largo
     fica só onde ela é etiqueta de dado (o rótulo do instrumento).
   - O ACENTO É UM SÓ, e ele significa "aqui". Laranja no item aberto,
     no botão principal e no foco — em mais nada.
   ===================================================================== */

.app {
  height: 100%;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);

  /* O chão do app é mais escuro que os cartões, e não o contrário: é o
     que faz cada superfície parecer estar ACIMA da janela, do mesmo
     jeito que uma folha sobre uma mesa. */
  background: #0b0e13;

  --raio: 12px;
  --raio-p: 8px;
  --sup: #151a22;
  --sup-alta: #1c222c;
  --hairline: rgba(255, 255, 255, .07);
}

/* ---------------------------------------------------------------------
   A barra lateral
   ------------------------------------------------------------------- */

.lateral {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 10px 10px;

  /* Translúcida com desfoque, como a sidebar de uma janela de sistema:
     ela pertence à moldura, não ao conteúdo. */
  background: rgba(12, 15, 21, .72);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-right: 1px solid var(--hairline);
}

.lateral-marca {
  flex: none;
  padding: 18px 8px 16px;
}
.lateral-marca img {
  width: 128px;
  height: auto;
  display: block;
  opacity: .95;
}

/* O ESTADO MORA NO MENU e não só na visão geral: quem está no console
   às duas da manhã não deveria ter de navegar para saber se o serviço
   caiu — é a pergunta que trouxe a pessoa até aqui. */
.lateral-estado {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--sup);
  border: 1px solid var(--hairline);
  border-radius: var(--raio-p);
}
.lateral-estado i {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--texto-3);
  transition: background .2s, box-shadow .2s;
}
.lateral-estado b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--texto-2);
}
.lateral-estado span {
  display: block;
  font-size: 11px;
  color: var(--texto-3);
}
.lateral-estado.no-ar i { background: var(--verde); box-shadow: 0 0 0 3px rgba(70, 209, 123, .16), 0 0 10px rgba(70, 209, 123, .6); }
.lateral-estado.no-ar b { color: #6fe0a0; }
.lateral-estado.fora i { background: var(--vermelho); box-shadow: 0 0 0 3px rgba(255, 90, 82, .16), 0 0 10px rgba(255, 90, 82, .6); }
.lateral-estado.fora b { color: #ff8e87; }

.menu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: var(--raio-p);
  color: var(--texto-2);
  font-size: 13px;
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
  transition: color .14s, background .14s;
}
.menu-item svg {
  width: 16px; height: 16px;
  flex: none;
  fill: currentColor;
  opacity: .75;
}

/* O rótulo tem classe própria porque ele NÃO é o único <span> do item:
   o pulso do console é outro. Um `.menu-item span { flex: 1 }` esticava
   o pulso numa barra cinza de dez centímetros. */
.menu-item .rotulo { flex: 1; min-width: 0; }
.menu-item:hover { color: var(--texto); background: rgba(255, 255, 255, .05); }

/* A SEÇÃO ABERTA É UMA PÍLULA PREENCHIDA — o padrão de toda barra
   lateral de sistema. A borda colorida na margem, que a versão anterior
   usava, é gramática de tabela, não de navegação. */
.menu-item.ativa {
  color: #fff;
  background: linear-gradient(180deg, #ff9333, var(--laranja));
  box-shadow: 0 4px 12px -4px rgba(255, 138, 30, .6);
}
.menu-item.ativa svg { opacity: 1; }

/* A contagem no menu é o mesmo número do instrumento lá em cima, e não
   é repetição inútil: ela responde "vale a pena abrir esta seção?" sem
   abrir. */
.menu-conta {
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-3);
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.menu-item.ativa .menu-conta {
  color: #fff;
  background: rgba(0, 0, 0, .22);
}

/* O ITEM QUE SAI DO PAINEL.

   Ele mora no mesmo menu, mas não é uma seção: leva para outro
   endereço. A setinha no fim é o que conta isso antes do clique — sem
   ela, a pessoa clica esperando trocar de aba e perde o lugar onde
   estava. Fica separado por uma linha e sem estado "ativo", porque ele
   nunca é "onde você está". */
.menu-item--fora {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  text-decoration: none;
}
.menu-item--fora:hover { background: rgba(255, 255, 255, .05); border-radius: var(--raio-p); }
.menu-fora {
  width: 12px !important;
  height: 12px !important;
  opacity: .45 !important;
}

.lateral-fim {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--hairline);
}

/* ---------------------------------------------------------------------
   O conteúdo
   ------------------------------------------------------------------- */

.conteudo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* A BARRA DE FERRAMENTAS.

   Título à esquerda, leituras à direita, uma hairline embaixo e nada
   mais — é a toolbar de qualquer janela de sistema. As divisórias
   verticais entre os instrumentos sumiram: espaço já separa. */
.topo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  min-height: 60px;
  background: rgba(12, 15, 21, .72);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}

.topo-titulo {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--texto);
  white-space: nowrap;
}

/* =====================================================================
   OS INSTRUMENTOS

   Quatro leituras que respondem "está tudo bem?" antes de qualquer
   leitura de texto — e que seguem o usuário por todas as seções,
   porque mudar de assunto não pode custar a resposta.
   ===================================================================== */

.instrumentos {
  margin-left: auto;
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex: none;
}

.inst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 92px;
  padding: 7px 12px;
  background: var(--sup);
  border: 1px solid var(--hairline);
  border-radius: var(--raio-p);
}

/* A caixa alta com tracking sobrevive AQUI e em nenhum outro lugar: é
   etiqueta de mostrador, o único caso em que ela é o idioma certo. */
.inst-rotulo {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.inst-valor { display: flex; align-items: baseline; gap: 3px; }
.inst-valor b {
  font-size: 18px;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.inst-valor span {
  font-size: 12px;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

/* O reinício marcado é a única coisa nesta barra com hora para
   acontecer — então é a única em âmbar. */
.aviso-reinicio {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  background: rgba(255, 192, 67, .1);
  border: 1px solid rgba(255, 192, 67, .3);
  border-radius: var(--raio-p);
}
.aviso-reinicio b {
  font-size: 17px;
  font-weight: 620;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
.aviso-reinicio span {
  font-size: 11px;
  color: var(--ambar);
}

/* =====================================================================
   O PALCO E AS SEÇÕES
   ===================================================================== */

.palco {
  flex: 1;
  min-height: 0;
  position: relative;
}

.secao {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  overflow-y: auto;
}
.secao.ativa { display: flex; }

/* A seção do console não rola por fora: quem rola é o console. */
.secao--console { overflow: hidden; }

/* A VISÃO GERAL PREENCHE A ALTURA. Com blocos de altura natural, ela
   terminava no meio da tela e deixava um vazio que não era respiro —
   era desperdício. O gráfico manda na primeira faixa; a segunda ocupa
   o que sobrar. */
#secVisao { display: none; }
#secVisao.ativa {
  display: grid;
  grid-template-rows: auto minmax(240px, 1fr);
}

.colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.bloco {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px 0 0;
  background: var(--sup);
  border: 1px solid var(--hairline);
  border-radius: var(--raio);

  /* A sombra é curta e baixa: uma folha pousada, e não um cartão
     flutuando a dez centímetros da mesa. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -18px rgba(0, 0, 0, .8);
  overflow: hidden;
}
.bloco--cheio { flex: 1; min-height: 0; }

/* O título do bloco é TEXTO, e não etiqueta: 13px, peso médio, caixa
   normal. A versão anterior usava 9,5px em caixa alta com tracking de
   .18em — que é como se escreve a legenda de um mostrador, não o nome
   de uma seção. */
.bloco h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 14px;
  font-size: 13px;
  font-weight: 620;
  letter-spacing: -.01em;
  color: var(--texto);
}
.h2-nota {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--texto-3);
}

.bloco > .botoes,
.bloco > .ficha,
.bloco > .dica,
.bloco > .linha-form,
.bloco > .editor,
.bloco > .barra-busca,
.bloco > .mini { margin: 0 16px 16px; }

.vazio { padding: 22px 16px; color: var(--texto-3); font-size: 12.5px; }
.dica { font-size: 11.5px; color: var(--texto-3); }

/* =====================================================================
   O GRÁFICO DE DESEMPENHO

   Quatro linhas, sem biblioteca. Uma biblioteca de gráficos são
   trezentos kilobytes para traçar quatro `path` — e traria um segundo
   idioma visual (tooltips, grades, fontes) para dentro de um painel
   que tem o seu.

   O EIXO É SEMPRE 0–100. CPU e RAM já são porcentagem; os jogadores
   são escalados pelo máximo do servidor. Um segundo eixo à direita
   seria mais preciso e menos legível — e a pergunta que este gráfico
   responde é "quando começou a piorar?", não "quanto exatamente".
   ===================================================================== */

.grafico {
  position: relative;
  margin: 0 16px;
  height: 200px;
  padding-left: 38px;
  background: #0e131a;
  border: 1px solid var(--hairline);
  border-radius: var(--raio-p);
  overflow: hidden;
}
.grafico svg { display: block; width: 100%; height: 100%; }

/* Os rótulos do eixo. Sem eles, uma linha de CPU a 2% parece uma linha
   morta encostada no chão — e não uma máquina folgada, que é o que ela
   está dizendo. */
.grafico-eixo {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 8px 2px 0;
  text-align: right;
  font-size: 9.5px;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.grafico .grade line {
  stroke: rgba(255, 255, 255, .06);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* As linhas não engordam quando o SVG estica: `preserveAspectRatio` de
   `none` esticaria a espessura junto com o desenho, e a linha da CPU
   ficaria três vezes mais grossa que a vertical de uma travada. */
.grafico path,
.grafico line { vector-effect: non-scaling-stroke; }

.linha-cpu { fill: none; stroke: var(--laranja); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.area-cpu { fill: rgba(255, 138, 30, .12); stroke: none; }
.linha-ram { fill: none; stroke: #7d9bde; stroke-width: 1.4; stroke-dasharray: 4 3; }
.linha-online { fill: none; stroke: var(--verde); stroke-width: 1.6; }
.linha-queda { fill: rgba(255, 90, 82, .13); stroke: none; }
.hitches line { stroke: var(--ambar); stroke-width: 1.5; opacity: .85; }

.grafico-vazio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--texto-3);
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 16px 16px;
  font-size: 11.5px;
  color: var(--texto-3);
}
.leg { display: inline-flex; align-items: center; gap: 6px; }
.leg::before {
  content: '';
  width: 12px; height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.leg--cpu { color: var(--laranja); }
.leg--ram { color: #7d9bde; }
.leg--online { color: var(--verde); }
.leg--hitch { color: var(--ambar); }
.leg--queda { color: #c9615b; }

/* =====================================================================
   FICHAS, LISTAS E ITENS
   ===================================================================== */

/* A ficha de pares rótulo/valor: a forma mais curta de responder cinco
   perguntas sem inventar cinco caixas. */
.ficha { display: flex; flex-direction: column; }
.ficha > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
}
.ficha > div:last-child { border-bottom: none; }
.ficha dt {
  font-size: 12.5px;
  color: var(--texto-3);
}
.ficha dd {
  font-size: 12.5px;
  font-weight: 550;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.lista {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
  padding: 0 8px 8px;
}
.lista--curta { max-height: 240px; margin-bottom: 12px; }

/* A LINHA É UMA PÍLULA, E NÃO UMA CÉLULA DE TABELA.
   Hover e seleção acontecem numa superfície arredondada, do jeito que
   uma lista de sistema responde ao rato — sem divisória de 1px entre
   todas as linhas, porque o espaço já separa. */
.item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--raio-p);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background .12s;
}
.item:hover { background: rgba(255, 255, 255, .045); }
.item.aberto { background: rgba(255, 138, 30, .1); }

/* A cor à esquerda continua codificando estado — verde vivo, laranja de
   serviço, vermelho caído — porque é ela que faz varrer trinta linhas
   com o olho funcionar. */
.item.vivo { border-left-color: rgba(70, 209, 123, .6); }
.item.servico { border-left-color: var(--laranja); }
.item.morto { border-left-color: var(--vermelho); }

.item.base,
.item.admin,
.item.agenda { grid-template-columns: minmax(0, 1fr) auto; }
.item.desligado { opacity: .5; }

/* O id é o que se digita no console, então é dado, não enfeite: largura
   fixa, alinhado à direita, algarismo de largura fixa para as unidades
   caírem sempre no mesmo lugar. */
.item-id {
  font-size: 15px;
  font-weight: 620;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.item.morto .item-id { color: var(--vermelho); }

.item-nome { min-width: 0; }
.item-nome b {
  display: block;
  font-size: 13px; font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-nome span {
  display: block;
  font-size: 11.5px; color: var(--texto-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.item-fim { display: flex; align-items: center; gap: 8px; }

.marca {
  padding: 2px 8px;
  font-size: 10.5px; font-weight: 600;
  color: var(--texto-2);
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
}
.marca.servico {
  color: #ffb066;
  background: rgba(255, 138, 30, .16);
}

.etiqueta {
  padding: 2px 8px;
  font-size: 10.5px; font-weight: 600;
  color: var(--ambar);
  background: rgba(255, 192, 67, .14);
  border-radius: 999px;
}

.tempo {
  font-size: 12px;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
  min-width: 58px;
  text-align: right;
}

/* O ping muda de cor porque 40 e 400 querem dizer coisas diferentes, e
   quem varre a lista não vai comparar número por número. */
.ping {
  font-size: 11.5px; color: var(--texto-3);
  font-variant-numeric: tabular-nums;
  min-width: 48px; text-align: right;
}
.ping.ruim { color: var(--ambar); }
.ping.pessimo { color: var(--vermelho); }

/* =====================================================================
   BOTÕES

   O botão de sistema é uma pílula clara sobre o fundo escuro, com uma
   borda quase invisível e um degradê de um passo. Ele não pisca, não
   tem sombra colorida e não vira laranja no hover — só clareia.
   ===================================================================== */

.acao {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: -.01em;
  color: var(--texto);
  background: linear-gradient(180deg, #2a323f, #232a35);
  border: 1px solid var(--hairline);
  border-radius: var(--raio-p);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, transform .06s;
}
.acao:hover { background: linear-gradient(180deg, #333c4b, #2a323f); border-color: rgba(255, 255, 255, .14); }
.acao:active { transform: translateY(1px); }

/* O perigoso não é vermelho o tempo todo — vira vermelho quando a mão
   chega perto. Botão vermelho parado vira paisagem; vermelho no hover é
   um aviso no momento exato em que ele importa. */
.acao.perigo:hover,
.mini.perigo:hover {
  color: #fff;
  background: linear-gradient(180deg, #e0554e, #c9433c);
  border-color: rgba(255, 120, 112, .5);
}

.mini {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--texto-2);
  background: rgba(255, 255, 255, .05);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color .14s, background .14s;
}
.mini:hover { color: var(--texto); background: rgba(255, 255, 255, .1); }

.quem { font-size: 12px; color: var(--texto-2); }

/* A PLATAFORMA.

   O painel controla um servidor FiveM, e metade dos botões desta tela
   só existe por causa disso: "reiniciar com aviso no chat" não é um
   conceito de sistema operacional, é de servidor de jogo.

   O nome vai tipografado, e não como o logotipo oficial: desenhar de
   memória a marca registrada de outra pessoa produz uma imitação
   errada, que é pior do que o nome escrito com cuidado. */
.plataforma {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 8px;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--texto-2);
  background: rgba(255, 255, 255, .05);
  border-radius: 999px;
}
.plataforma img { display: block; }

/* O crédito da Rockstar entra sem texto e sem moldura própria — só o
   selo, baixo em opacidade e sem cor até o rato chegar perto. Ele NÃO
   tem o mesmo peso do chip do FiveM porque não é o mesmo tipo de
   informação: um diz o que este painel opera, o outro só credita quem
   fez o jogo por baixo. */
.plataforma--credito { padding: 4px 8px; gap: 0; }
.plataforma--credito img {
  filter: grayscale(1) brightness(1.6) opacity(.6);
  transition: filter .16s;
}
.plataforma--credito:hover img,
.plataforma--credito:focus-within img { filter: none; }

/* ---------- banidos e registro ---------- */

.ban { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.ban-quem b { font-size: 13px; font-weight: 600; }
.ban-quem span { display: block; font-size: 11.5px; color: var(--texto-3); }
.ban-prazo {
  padding: 2px 8px;
  font-size: 10.5px; font-weight: 600;
  color: var(--ambar);
  background: rgba(255, 192, 67, .14);
  border-radius: 999px;
}
.ban-prazo.eterno { color: #ff8e87; background: rgba(255, 90, 82, .14); }

.linha-log {
  display: grid;
  grid-template-columns: 96px 96px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--raio-p);
  font-size: 12px;
}
.linha-log:hover { background: rgba(255, 255, 255, .035); }
.linha-log time { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.linha-log b { color: #ffa64d; font-weight: 600; }
.linha-log span { color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================
   BASE DE JOGADORES E A FICHA

   A ficha entra por cima da lista, encostada à direita, e não no lugar
   dela: quem está conferindo cinco pessoas seguidas perderia o ponto da
   lista a cada uma que abrisse.
   ===================================================================== */

.barra-busca { display: flex; }
.barra-busca input,
.linha-form input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--hairline);
  border-radius: var(--raio-p);
  color: var(--texto);
  font-size: 13px;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.barra-busca input:focus,
.linha-form input:focus,
.editor:focus {
  border-color: rgba(255, 138, 30, .55);
  box-shadow: 0 0 0 3px rgba(255, 138, 30, .16);
}
.barra-busca input::placeholder,
.linha-form input::placeholder { color: var(--texto-3); }

.ficha-lateral {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  z-index: 5;
  width: min(92vw, 400px);
  display: flex;
  flex-direction: column;
  background: rgba(21, 26, 34, .96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid var(--hairline);
  box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .9);
}

.ficha-topo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hairline);
}
.ficha-topo b { display: block; font-size: 15px; font-weight: 620; letter-spacing: -.01em; }
.ficha-topo span {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--texto-3);
  word-break: break-all;
}

.ficha-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ficha-corpo h3 {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 620;
  letter-spacing: -.01em;
  color: var(--texto);
}
.ficha-corpo .linha-log {
  grid-template-columns: 84px 78px minmax(0, 1fr);
  padding: 6px 0;
}
.ficha-corpo .linha-log:hover { background: none; }
.ficha-corpo .vazio { padding: 2px 0; }
.ficha-corpo .acao { align-self: flex-start; }

/* =====================================================================
   RESOURCES

   Os chips eram etiquetas. Um resource caído às duas da manhã não
   precisa de uma etiqueta vermelha: precisa de um botão que o levante
   sem abrir o console e sem lembrar a sintaxe do `ensure`.
   ===================================================================== */

.grade-resources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 10px;
  padding: 0 16px 16px;
  overflow-y: auto;
  min-height: 0;
  align-content: start;
}

.res-cartao {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 13px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--hairline);
  border-radius: var(--raio-p);
}
.res-cartao.caido {
  background: rgba(255, 90, 82, .07);
  border-color: rgba(255, 90, 82, .3);
}

.res-nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.res-nome i {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--texto-3);
}
.res-cartao.de-pe .res-nome i { background: var(--verde); box-shadow: 0 0 0 3px rgba(70, 209, 123, .14); }
.res-cartao.caido .res-nome i { background: var(--vermelho); box-shadow: 0 0 0 3px rgba(255, 90, 82, .16); }
.res-nome b {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.res-estado { font-size: 11.5px; color: var(--texto-3); }
.res-cartao.caido .res-estado { color: #ff8e87; }

.res-botoes { display: flex; flex-wrap: wrap; gap: 5px; }

/* =====================================================================
   AJUSTES: FORMULÁRIOS E O EDITOR
   ===================================================================== */

.linha-form { display: flex; gap: 6px; }
.linha-form input[type="number"] { flex: 0 0 68px; }
.linha-form input[type="time"] { flex: 0 0 116px; }

/* O EDITOR É MONOESPAÇADO PORQUE O ARQUIVO É.
   Um `server.cfg` alinhado por coluna lido em fonte proporcional perde
   exatamente a informação que o alinhamento carregava. */
.editor {
  min-height: 320px;
  resize: vertical;
  padding: 13px 15px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--hairline);
  border-radius: var(--raio-p);
  color: var(--texto-2);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.65;
  outline: none;
  tab-size: 4;
}
.editor--nota { min-height: 92px; margin: 0; }

.senha-nova {
  padding: 13px;
  background: rgba(0, 0, 0, .3);
  border-radius: var(--raio-p);
  font-family: ui-monospace, monospace;
  font-size: 15px;
  color: #ffa64d;
  word-break: break-all;
  user-select: all;
}

/* =====================================================================
   CONSOLE
   ===================================================================== */

/* O pulso do console: verde enquanto o fluxo está vivo. Pisca de leve
   porque um ponto parado não distingue "ligado" de "congelado". */
.pulso {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--texto-3);
}
.pulso.vivo {
  background: var(--verde);
  box-shadow: 0 0 0 3px rgba(70, 209, 123, .14);
  animation: bater 2.4s ease-in-out infinite;
}

@keyframes bater {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

.botoes { display: flex; flex-wrap: wrap; gap: 8px; }

.console {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 16px 16px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--hairline);
  border-radius: var(--raio-p);

  /* Monoespaçada aqui e em nenhum outro lugar do painel. Console é o
     único conteúdo em que o alinhamento por coluna significa alguma
     coisa — e usar mono como enfeite em legendas é justamente o tique
     que se vê em todo painel gerado. */
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--texto-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* O resumo na visão geral é o mesmo console com altura de vitrine: ele
   existe para dizer "está acontecendo alguma coisa", e o lugar de ler é
   a seção do console. */
.console--resumo { flex: 1; min-height: 120px; }

/* CONSOLE VAZIO NÃO É CONSOLE QUEBRADO. O painel guarda o que passou
   desde que ELE subiu — num servidor parado, a caixa fica vazia, e uma
   caixa preta sem nada parece defeito. */
.console:empty::before {
  content: 'Nada novo desde que o painel subiu.';
  color: var(--texto-3);
  font-family: var(--grade);
}

/* A linha ganha uma marca na margem em vez de fundo colorido: erro com
   fundo vermelho em vinte linhas seguidas apaga o texto que interessa. */
.console .l.erro { color: #ff8e87; border-left-color: rgba(255, 90, 82, .6); }
.console .l.aviso { color: var(--ambar); border-left-color: rgba(255, 192, 67, .5); }
/* A linha nossa é a MAIORIA das linhas do log. Pintar todas de laranja
   faz o console inteiro gritar e apaga justamente o erro que se estava
   procurando: a marca na margem basta para distingui-la. */
.console .l.nosso { color: var(--texto-2); border-left-color: rgba(255, 138, 30, .5); }

.linhaComando {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 16px;
  padding: 9px 14px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: border-color .14s, box-shadow .14s;
}
.linhaComando:focus-within {
  border-color: rgba(255, 138, 30, .55);
  box-shadow: 0 0 0 3px rgba(255, 138, 30, .16);
}
.prompt { color: var(--laranja); font-family: ui-monospace, monospace; }
.linhaComando input {
  flex: 1;
  padding: 2px 0;
  background: none;
  border: none;
  outline: none;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
}
.linhaComando input::placeholder { color: var(--texto-3); }

/* =====================================================================
   PERGUNTA E RECADO

   A caixa de diálogo do sistema: estreita, centrada, cantos arredondados
   e o botão de confirmar à direita. Ela não tem barra colorida no topo —
   quem dá o tom é o botão perigoso, quando existe.
   ===================================================================== */

.cortina {
  position: fixed; inset: 0;
  z-index: 50;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(4, 6, 9, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pergunta {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px;
  background: var(--sup-alta);
  border: 1px solid var(--hairline);
  border-radius: var(--raio);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .95);
}

.pergunta h3 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.02em;
}
.pergunta p { font-size: 12.5px; color: var(--texto-2); }
.pergunta label { display: flex; flex-direction: column; gap: 6px; }
.pergunta label span { font-size: 11.5px; color: var(--texto-3); }
.pergunta input {
  padding: 9px 12px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--hairline);
  border-radius: var(--raio-p);
  color: var(--texto);
  outline: none;
}
.pergunta input:focus {
  border-color: rgba(255, 138, 30, .55);
  box-shadow: 0 0 0 3px rgba(255, 138, 30, .16);
}
.pergunta-fim { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.recado {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 60;
  max-width: 340px;
  padding: 12px 15px;
  font-size: 12.5px;
  background: rgba(28, 34, 44, .95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--laranja);
  border-radius: var(--raio-p);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9);
}
.recado.erro { border-left-color: var(--vermelho); }
.recado.ok { border-left-color: var(--verde); }

.app :focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; border-radius: 4px; }

/* =====================================================================
   O REGISTRO

   ELE É A ÚNICA PROVA DO QUE ACONTECEU — e é lido no pior dia, quando
   alguém precisa reconstruir depressa uma noite inteira. Então ele não
   pode ser uma tabela de três campos iguais: precisa de um filtro que
   se alcance sem pensar, de dias separados, e de uma frase que se leia
   de uma vez.
   ===================================================================== */

.filtros {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 16px 12px;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* O chip segmentado do sistema: pílula discreta, e a escolhida ganha
   fundo claro em vez de cor de marca — o laranja aqui competiria com o
   item aberto na barra lateral, e os dois querem dizer "você está". */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 550;
  color: var(--texto-2);
  background: rgba(255, 255, 255, .05);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.chip:hover { background: rgba(255, 255, 255, .1); color: var(--texto); }
.chip.ativa {
  color: #0d1117;
  background: #d6dbe4;
  font-weight: 600;
}
.chip b {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}
.chip.ativa b { color: rgba(13, 17, 23, .55); }

.filtros input[type="search"] {
  flex: 1;
  min-width: 180px;
  padding: 7px 12px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--texto);
  font-size: 12.5px;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.filtros input[type="search"]:focus {
  border-color: rgba(255, 138, 30, .55);
  box-shadow: 0 0 0 3px rgba(255, 138, 30, .16);
}
.filtros input::placeholder { color: var(--texto-3); }

/* O DIA É UM MARCO, NÃO UMA COLUNA.
   Repetir "09-10" em quarenta linhas gasta espaço para dizer quarenta
   vezes a mesma coisa; a data vira um cabeçalho e cada linha guarda só
   a hora. */
.log-dia {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 12px 0 4px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-3);
  background: linear-gradient(180deg, var(--sup) 70%, transparent);
}
.log-dia:first-child { margin-top: 0; }

.log {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--raio-p);
  transition: background .12s;
}
.log:hover { background: rgba(255, 255, 255, .04); }

/* O ÍCONE CARREGA A CATEGORIA, e é por isso que ele tem cor e a linha
   não. Colorir a frase inteira faria quarenta linhas gritarem juntas; um
   quadradinho de 28px na margem deixa varrer a coluna e achar "as três
   vezes em que alguém mexeu no servidor" sem ler nada. */
.log-icone {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: var(--texto-3);
}
.log-icone svg { width: 15px; height: 15px; fill: currentColor; }

.log--acesso .log-icone { color: #8fa6d8; background: rgba(143, 166, 216, .14); }
.log--moderacao .log-icone { color: #ff9a5c; background: rgba(255, 138, 30, .14); }
.log--servidor .log-icone { color: #6fe0a0; background: rgba(70, 209, 123, .13); }
.log--comando .log-icone { color: #d6dbe4; background: rgba(214, 219, 228, .1); }
.log--contas .log-icone { color: #d59ce8; background: rgba(213, 156, 232, .13); }

.log-texto { min-width: 0; }
.log-texto p {
  font-size: 12.5px;
  color: var(--texto-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.log-texto b { color: var(--texto); font-weight: 620; }

/* O detalhe (o motivo do ban, o comando digitado) é a segunda linha, e
   em mono quando é comando: ele é citação do que alguém escreveu. */
.log-detalhe {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--texto-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.log--comando .log-detalhe {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  color: #b9c2d0;
}

.log time {
  font-size: 11.5px;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lista--registro { padding-bottom: 16px; }

/* =====================================================================
   VISÃO GERAL: TRÊS COLUNAS E A SAÚDE DOS RESOURCES
   ===================================================================== */

.colunas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* As leituras do instante ao lado do título do gráfico. */
.agora-vals {
  margin-left: auto;
  display: flex;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.val--cpu { color: #ffa64d; }
.val--ram { color: #7d9bde; }
.val--online { color: #6fe0a0; }

.saude-res {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 14px 16px 16px;
  padding: 10px 12px;
  font-size: 12px;
  border-radius: var(--raio-p);
  background: rgba(255, 255, 255, .035);
  color: var(--texto-3);
}
.saude-res.com-queda {
  background: rgba(255, 90, 82, .1);
  color: #ff8e87;
}
.saude-res.com-queda b { font-weight: 620; margin-right: 4px; }
.saude-res.sem-contato { color: var(--ambar); background: rgba(255, 192, 67, .08); }

/* Em três colunas, a lista de atividade não pode empurrar o cartão: ela
   rola por dentro, como o console ao lado. */
.colunas--tres .lista--curta { max-height: none; flex: 1; min-height: 120px; }
.colunas--tres .log { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 9px; padding: 6px 8px; }
.colunas--tres .log-icone { width: 24px; height: 24px; border-radius: 7px; }
.colunas--tres .log-icone svg { width: 13px; height: 13px; }
.colunas--tres .log-texto p { font-size: 12px; }

@media (max-width: 1360px) {
  .colunas--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colunas--tres > .bloco:first-child { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
  .colunas--tres { grid-template-columns: minmax(0, 1fr); }
  .colunas--tres > .bloco:first-child { grid-column: auto; }
  .filtros input[type="search"] { min-width: 140px; }
}


/* =====================================================================
   JOGADORES ONLINE

   CARTÃO, E NÃO LINHA DE TABELA.

   A linha fina nasceu de uma tela dividida ao meio, onde não cabia
   mais nada. Agora a seção é inteira dela — e o que um admin olha
   antes de agir não é um nome: é quem a pessoa é no jogo, há quanto
   tempo está, se está de serviço, se está viva e como está a conexão.
   Isso não cabe em 32px de altura.

   A grade também resolve o caso de trinta pessoas: quatro colunas
   mostram trinta em oito filas, enquanto trinta linhas finas ocupam a
   tela inteira do mesmo jeito — só que dizendo menos.
   ===================================================================== */

.grade-jogadores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
  overflow-y: auto;
  min-height: 0;
  align-content: start;
}

.jog {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 13px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--hairline);

  /* A barra colorida à esquerda continua codificando estado — é ela que
     faz varrer trinta cartões com o olho e achar o que interessa sem
     ler etiqueta nenhuma. */
  border-left: 3px solid var(--texto-3);
  border-radius: var(--raio-p);
  transition: background .14s, border-color .14s;
}
.jog:hover { background: rgba(255, 255, 255, .06); }
.jog.vivo { border-left-color: rgba(70, 209, 123, .7); }
.jog.servico { border-left-color: var(--laranja); }
.jog.morto {
  border-left-color: var(--vermelho);
  background: rgba(255, 90, 82, .06);
}
.jog.aberto { background: rgba(255, 138, 30, .08); }

.jog-topo { display: flex; align-items: center; gap: 10px; }

/* O id é o que se digita no console: número tabular, largura fixa, e
   destaque suficiente para ser copiado de relance. */
.jog-id {
  flex: none;
  min-width: 26px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 650;
  text-align: center;
  color: var(--texto-2);
  background: rgba(0, 0, 0, .3);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.jog.morto .jog-id { color: #ff8e87; }

.jog-quem { flex: 1; min-width: 0; }
.jog-quem b {
  display: block;
  font-size: 13.5px;
  font-weight: 620;
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* O nick do FiveM fica embaixo do nome do personagem, e menor: os dois
   importam, mas quem age no RP é o personagem — o nick serve para achar
   a pessoa no Discord depois. */
.jog-nick {
  display: block;
  font-size: 11.5px;
  color: var(--texto-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.jog-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.jog-tag {
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--texto-2);
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
  white-space: nowrap;
}
.jog-tag.servico { color: #ffb066; background: rgba(255, 138, 30, .16); }
.jog-tag.perigo { color: #ff8e87; background: rgba(255, 90, 82, .16); }
.jog-tag.quieta { color: var(--texto-3); background: rgba(255, 255, 255, .04); }

/* A VIDA É BARRA, E NÃO NÚMERO SOLTO.
   "142" não diz nada a quem não sabe que a escala vai de 100 a 200; uma
   barra pela metade diz na hora. */
.jog-vida { display: flex; align-items: center; gap: 8px; }
.jog-vida-barra {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.jog-vida-barra i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--verde);
  transition: width .3s;
}
.jog.morto .jog-vida-barra i { background: var(--vermelho); }
.jog-vida span {
  font-size: 11px;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}

.jog-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 9px;
  border-top: 1px solid var(--hairline);
}
.jog-mais { margin-left: auto; }

.jog-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 9px;
  border-top: 1px dashed var(--hairline);
}
.jog-extras code {
  flex: 1 1 100%;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--texto-3);
  word-break: break-all;
}


/* =====================================================================
   AS BARRAS DE ROLAGEM

   A barra do Windows é uma calha cinza de 17px com dois botões nas
   pontas: ela é parte do sistema, não da página, e num app escuro ela
   aparece como uma faixa clara que nenhum design encomendou — foi o que
   apareceu colada no console.

   A do macOS é outra ideia: um bastão arredondado, fino, sobre o
   próprio conteúdo, que escurece quando a mão chega perto e some
   quando ninguém está rolando. Dá para reproduzi-la com precisão, e é o
   que estas regras fazem.

   O truque do `background-clip: padding-box` com borda transparente é o
   que dá o respiro em volta do bastão: sem ele, o bastão encosta nas
   paredes da calha e volta a parecer barra de sistema.
   ===================================================================== */

.app * {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.app *::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

.app *::-webkit-scrollbar-track {
  background: transparent;
}

.app *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.app *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); background-clip: padding-box; }
.app *::-webkit-scrollbar-thumb:active { background: rgba(255, 255, 255, .42); background-clip: padding-box; }

/* O canto onde as duas barras se encontram: sem isto ele fica cinza
   claro, e é o único pedaço que denuncia a barra do sistema. */
.app *::-webkit-scrollbar-corner { background: transparent; }

/* =====================================================================
   O CONSOLE

   TRÊS COLUNAS: hora, origem, texto.

   O FXServer escreve "[     script:rp_admin] SCRIPT ERROR: ..." — e
   aquele prefixo é coluna, não frase. Separado, o texto passa a começar
   sempre no mesmo lugar, e dá para achar a origem sem lê-la.
   ===================================================================== */

.filtros--console { align-items: center; }
.filtros--console input[type="search"] { min-width: 140px; max-width: 260px; }

.console .l {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 10px;
  padding: 1px 0 1px 9px;
  border-left: 2px solid transparent;
}

.console .l > time {
  color: var(--texto-3);
  opacity: .65;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

/* A ETIQUETA DE ORIGEM É CINZA, SEMPRE.
   Colorir também a origem faria cada linha ter duas cores brigando, e a
   cor que interessa é a do nível — erro, aviso, nosso. */
.con-tag {
  color: #7c8ba0;
  font-size: 10.5px;
  white-space: nowrap;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.con-txt { min-width: 0; word-break: break-word; }

/* O CONTADOR DE REPETIÇÃO.
   Cinquenta linhas iguais empurram para fora da tela justamente o que
   explica o erro. Uma linha com "×50" ocupa o lugar de uma e diz mais:
   que aquilo está acontecendo sem parar. */
.con-n {
  justify-self: end;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  color: #0d1117;
  background: #d6dbe4;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.console .l.erro .con-n { background: #ff8e87; }
.console .l.aviso .con-n { background: var(--ambar); }

/* Sem etiqueta de origem (linha solta do cfx>), o texto ocupa o vão em
   vez de deixar uma coluna vazia no meio. */
.console .l:not(:has(.con-tag)) { display: block; }

.console--resumo .l > time,
.console--resumo .con-tag { display: none; }
.console--resumo .l { grid-template-columns: minmax(0, 1fr) auto; }


/* =====================================================================
   A WIKI DA EQUIPE (o editor)

   Lista à esquerda, editor à direita — e o editor ganha a maior parte
   da largura porque quem abre esta seção vem escrever, não navegar.
   ===================================================================== */

.wiki-tela {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.wiki-lista, .wiki-editor { min-height: 0; }

.wiki-item .etiqueta { color: var(--texto-3); background: rgba(255, 255, 255, .06); }
.wiki-item .etiqueta.viva { color: #6fe0a0; background: rgba(70, 209, 123, .14); }

.wiki-campos {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px 12px;
}
.wiki-campos input {
  flex: 1;
  min-width: 0;
  padding: 9px 13px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--hairline);
  border-radius: var(--raio-p);
  color: var(--texto);
  outline: none;
}
.wiki-campos input:focus {
  border-color: rgba(255, 138, 30, .55);
  box-shadow: 0 0 0 3px rgba(255, 138, 30, .16);
}

/* O endereço fica à vista o tempo todo porque ele NÃO muda depois: é o
   link que vai para o Discord, e renomear a página não o acompanha. */
.wiki-slug {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--texto-3);
  white-space: nowrap;
}

.filtros--wiki { align-items: center; }
.wiki-dica { font-size: 11px; color: var(--texto-3); }
.wiki-dica code {
  padding: 1px 5px;
  font-size: 10.5px;
  background: rgba(255, 255, 255, .06);
  border-radius: 4px;
}

.wiki-corpo {
  flex: 1;
  min-height: 240px;
  margin: 0 16px;
  resize: none;
}

.wiki-previa,
.wiki-historico {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 16px;
  padding: 16px 18px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid var(--hairline);
  border-radius: var(--raio-p);
}
.wiki-historico { padding: 8px; }
.wiki-historico .log { cursor: pointer; }

.wiki-botoes { margin: 14px 16px 16px; }

/* A PRÉVIA USA A TIPOGRAFIA DA WIKI, e não a do painel: ela existe para
   responder "como isto vai ficar publicado", e responder isso com outra
   fonte é responder outra pergunta. */
.wiki-previa h1, .wiki-previa h2, .wiki-previa h3 {
  margin: 22px 0 10px;
  font-weight: 620;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.wiki-previa h1 { font-size: 24px; margin-top: 0; }
.wiki-previa h2 { font-size: 19px; }
.wiki-previa h3 { font-size: 16px; }
.wiki-previa p { margin: 0 0 12px; font-size: 14px; line-height: 1.7; color: var(--texto-2); }
.wiki-previa ul, .wiki-previa ol { margin: 0 0 14px; padding-left: 22px; color: var(--texto-2); font-size: 14px; line-height: 1.7; }
.wiki-previa li { margin-bottom: 5px; }
.wiki-previa a { color: #ffa64d; }
.wiki-previa strong { color: var(--texto); }
.wiki-previa code {
  padding: 1px 5px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: rgba(255, 255, 255, .07);
  border-radius: 4px;
}
.wiki-previa pre.codigo {
  margin: 0 0 14px;
  padding: 13px 15px;
  overflow-x: auto;
  background: rgba(0, 0, 0, .4);
  border: 1px solid var(--hairline);
  border-radius: var(--raio-p);
}
.wiki-previa pre.codigo code { padding: 0; background: none; font-size: 12px; line-height: 1.6; }
.wiki-previa blockquote {
  margin: 0 0 14px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--laranja);
  color: var(--texto-2);
  font-size: 14px;
}
.wiki-previa table { width: 100%; margin: 0 0 14px; border-collapse: collapse; font-size: 13px; }
.wiki-previa th, .wiki-previa td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--hairline); }
.wiki-previa th { color: var(--texto-3); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.wiki-previa hr { margin: 18px 0; border: none; border-top: 1px solid var(--hairline); }
.wiki-previa img { max-width: 100%; border-radius: var(--raio-p); }

@media (max-width: 1100px) {
  .wiki-tela { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .wiki-lista .lista { max-height: 200px; }
}

/* =====================================================================
   TELA ESTREITA

   O painel é de mesa, mas a hora em que ele mais é usado é quando
   alguém avisa no celular que tem gente quebrando o servidor. A barra
   lateral vira uma faixa de ícones no topo — o que não pode sumir nunca
   é o caminho entre as seções.
   ===================================================================== */

@media (max-width: 1100px) {
  .colunas { grid-template-columns: minmax(0, 1fr); }
  #secVisao.ativa { grid-template-rows: auto auto; }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }

  .lateral {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    overflow-x: auto;
  }
  .lateral-marca { padding: 0 6px 0 2px; }
  .lateral-marca img { width: 96px; }
  .lateral-estado { margin: 0; padding: 6px 10px; }
  .lateral-estado span { display: none; }

  .menu { flex-direction: row; }
  .menu-item { white-space: nowrap; }
  .menu-item .rotulo { display: none; }
  .menu-item.ativa .rotulo { display: inline; }

  .lateral-fim { border-top: none; margin: 0; padding: 0; }
  .plataforma { display: none; }

  .topo { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .instrumentos { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .inst { flex: 1 1 40%; }

  .secao { padding: 14px; }
  .ficha-lateral { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pulso.vivo { animation: none; }
}