:root {
  --fundo: #070b14; --cartao: #0f1726; --borda: #1f2a3d; --texto: #eef3fb; --suave: #8ea0ba;
  --ok: #22c55e; --atencao: #f59e0b; --critico: #ef4444; --neutro: #64748b;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--fundo); color: var(--texto); font-family: system-ui, "Segoe UI", Roboto, sans-serif; }
body { height: 100vh; overflow: hidden; padding: 1.4vmin 1.6vmin; display: flex; flex-direction: column; gap: 1.2vmin; font-size: min(1.05vw, 1.85vh); }
.sub { color: var(--suave); font-size: .8em; font-weight: 400; }
.topo { flex: none; display: flex; justify-content: space-between; align-items: center; }
.marca { font-size: 2em; font-weight: 800; letter-spacing: .02em; }
.marca span { color: var(--suave); font-weight: 400; }
.hora { text-align: right; }
#relogio { font-size: 2.4em; font-weight: 700; font-variant-numeric: tabular-nums; }
.faixa { border-radius: 14px; padding: .5em 1em; flex: none; display: flex; align-items: baseline; gap: 1.2vw; }
#faixa-titulo { font-size: 2.1em; font-weight: 800; }
.faixa .sub { color: inherit; opacity: .85; font-size: 1.1em; }
.faixa.ok { background: rgba(34,197,94,.15); color: var(--ok); }
.faixa.atencao { background: rgba(245,158,11,.18); color: var(--atencao); }
.faixa.critico { background: var(--critico); color: #fff; animation: pulsar 1.6s ease-in-out infinite; }
.faixa.neutro { background: var(--cartao); color: var(--suave); }
@keyframes pulsar { 50% { filter: brightness(1.25); } }
.grade { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr; gap: 1.2vw; flex: 1; min-height: 0; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: .9em 1.1em; min-height: 0; overflow: hidden; }
h2 { font-size: 1.3em; margin-bottom: .8em; }
h3 { font-size: 1em; color: var(--suave); margin: 1.2em 0 .5em; font-weight: 600; }
.metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1em 1.4em; }
.rotulo { color: var(--suave); font-size: .85em; }
.valor { font-size: 2.2em; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.barra { height: .45em; background: var(--borda); border-radius: 99px; overflow: hidden; margin-top: .3em; }
.barra i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .6s; }
.lista { list-style: none; display: flex; flex-direction: column; gap: .45em; }
.lista li { display: flex; align-items: center; gap: .6em; }
.lista li .nome { flex: 1; }
.lista li .info { color: var(--suave); font-variant-numeric: tabular-nums; }
.lista.grande { font-size: 1.35em; gap: .7em; }
.ponto { width: .8em; height: .8em; border-radius: 50%; flex: none; background: var(--neutro); }
.ok .ponto, .ponto.ok { background: var(--ok); box-shadow: 0 0 .6em var(--ok); }
.atencao .ponto, .ponto.atencao { background: var(--atencao); }
.critico .ponto, .ponto.critico { background: var(--critico); box-shadow: 0 0 .8em var(--critico); }
.critico .nome, .critico .info { color: var(--critico); font-weight: 700; }
.sistema { border-top: 1px solid var(--borda); padding-top: .9em; margin-top: .9em; }
.sistema:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.sistema-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5em; }
.sistema-nome { font-size: 1.3em; font-weight: 700; }
.selo { border-radius: 99px; padding: .15em .8em; font-weight: 700; font-size: .85em; }
.selo.ok { background: rgba(34,197,94,.15); color: var(--ok); }
.selo.atencao { background: rgba(245,158,11,.18); color: var(--atencao); }
.selo.critico { background: var(--critico); color: #fff; }
.selo.neutro { background: var(--borda); color: var(--suave); }
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em; }
.numeros .valor { font-size: 1.8em; }
.numeros .falha { color: var(--atencao); }
.numeros .bloq { color: var(--critico); }
.corpo { flex: 1; display: grid; grid-template-columns: 1fr minmax(260px, 25vw); gap: 1.2vmin; min-height: 0; }
.corpo .grade { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 1.2vmin; }
.sites { grid-column: 1 / -1; }
.lista.em-linha { flex-direction: row; flex-wrap: wrap; gap: .6em 2.4em; font-size: 1.3em; }
.lista.em-linha li .info { margin-left: .2em; }
.chat { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mensagens { list-style: none; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .6em; overflow: hidden; min-height: 0; }
.msg { background: #16213a; border-radius: 4px 14px 14px 14px; padding: .55em .8em; border-left: 4px solid var(--atencao); flex: none; }
.msg.grave { border-left-color: var(--critico); }
.msg-topo { display: flex; justify-content: space-between; gap: .6em; font-size: .78em; color: var(--suave); margin-bottom: .15em; }
.msg-topo .onde { font-weight: 700; color: var(--texto); }
.msg-topo .quando { font-variant-numeric: tabular-nums; }
.msg-texto { font-size: 1.05em; }
.msg.grave .msg-texto { color: #fca5a5; font-weight: 600; }
.vazio { color: var(--suave); }
@media (max-width: 900px) {
  body { height: auto; overflow: auto; font-size: 15px; padding: 16px; }
  .grade, .corpo, .corpo .grade { grid-template-columns: 1fr; }
  .lista.em-linha { flex-direction: column; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
}
.msg.nova { animation: chegar .7s ease-out; }
@keyframes chegar { from { opacity: 0; transform: translateY(1.2em); } to { opacity: 1; transform: none; } }