:root {
  --fundo: #070C17; --superficie: #111927; --superficie-2: #162235; --azul: #00AFF5; --amarelo: #FFD600;
  --verde: #71E6A1; --laranja: #FFBE73; --vermelho: #FF7A7A; --texto: #F7FAFF; --texto-2: #C8D5E5; --mutado: #9BAFC5;
  --linha: rgba(255, 255, 255, 0.10); color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 14px/1.5 Inter, system-ui, 'Segoe UI', sans-serif; }
main { max-width: 1200px; margin: 0 auto; padding: 28px 20px 60px; }
h1, h2 { font-family: Poppins, Inter, system-ui, sans-serif; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
h1 { font-size: 26px; margin-top: 4px; }
h2 { font-size: 17px; margin-bottom: 8px; }
.sobretitulo { color: var(--azul); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.mutado { color: var(--mutado); }
.erro { color: var(--vermelho); }
.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
section { margin-top: 18px; }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 18px; padding: 18px 20px; }
button { border: 1px solid rgba(0, 175, 245, 0.4); background: rgba(0, 175, 245, 0.12); color: var(--azul); border-radius: 12px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; }
button.secundario { border-color: var(--linha); background: transparent; color: var(--texto-2); }
button:hover { filter: brightness(1.15); }
input, select { background: #0B1320; border: 1px solid var(--linha); color: var(--texto); border-radius: 12px; padding: 8px 12px; font: inherit; }
.linha { display: flex; gap: 10px; flex-wrap: wrap; }
.linha input { flex: 1; min-width: 200px; }
.totais { display: flex; gap: 12px; flex-wrap: wrap; }
.total { background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 10px 16px; }
.total strong { display: block; font-size: 22px; }
.olts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.olt { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; padding: 14px 16px; }
.olt h3 { margin: 0 0 6px; font-size: 15px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.olt .numeros { display: flex; gap: 14px; margin: 6px 0; }
.olt .numeros span strong { display: block; font-size: 18px; color: var(--texto); }
.selo { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; }
.selo.ok { color: var(--verde); background: rgba(113, 230, 161, 0.12); }
.selo.erro { color: var(--vermelho); background: rgba(255, 122, 122, 0.12); }
.selo.aguardando { color: var(--amarelo); background: rgba(255, 214, 0, 0.12); }
.incidente { border-left: 3px solid var(--vermelho); background: rgba(255, 122, 122, 0.07); border-radius: 0 12px 12px 0; padding: 10px 14px; margin: 8px 0; }
.incidente p { margin: 4px 0 0; color: var(--texto-2); }
.cabecalho-lista { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.abas { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.abas button { border-color: var(--linha); background: transparent; color: var(--texto-2); font-weight: 600; }
.abas button.ativa { border-color: var(--amarelo); color: var(--amarelo); background: rgba(255, 214, 0, 0.08); }
.tabela { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
th { color: var(--mutado); font-weight: 600; font-size: 12px; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--superficie-2); }
.online { color: var(--verde); }
.offline { color: var(--vermelho); }
.sinal-crítico, .sinal-ruim { color: var(--vermelho); }
.sinal-atenção { color: var(--laranja); }
.sinal-forte { color: var(--amarelo); }
.dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; margin: 8px 0 14px; }
.dados div span { display: block; color: var(--mutado); font-size: 12px; }
.vazio { color: var(--mutado); padding: 10px 0; }
@media (max-width: 600px) { main { padding: 20px 16px 50px; } .cartao { padding: 14px; } h1 { font-size: 22px; } }