:root{--bg:#07142b;--card:#0f2243cc;--card2:#14305c;--tx:#e8f0ff;--mudo:#8da6cc;--borda:#ffffff1a;--verde:#22c55e;--verm:#ef4444;--amar:#f59e0b;--azul:#38bdf8;--azul2:#2563eb;--cod:#06101f}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}
.fundo{position:fixed;inset:0;z-index:-1;background:radial-gradient(900px 500px at 15% -10%,#1d4ed855,transparent),radial-gradient(700px 500px at 100% 0,#0ea5e933,transparent),var(--bg)}
h1{font-size:1.05rem;margin:0;letter-spacing:.2px}
header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 20px;background:#0a1a36d9;backdrop-filter:blur(10px);border-bottom:1px solid var(--borda);position:sticky;top:0;z-index:5}
.marca{display:flex;align-items:center;gap:12px}
.marca img{width:42px;height:42px;border-radius:12px;background:#fff;padding:3px;object-fit:contain;box-shadow:0 0 0 1px var(--borda),0 4px 16px #38bdf833}
.marca .mudo{display:block;line-height:1.1}
.topo-dir{display:flex;gap:8px;align-items:center}
main{max-width:1240px;margin:0 auto;padding:20px 16px 40px}
.mudo{color:var(--mudo);font-size:.82rem}

.resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--card);border:1px solid var(--borda);border-radius:14px;padding:12px 16px}
.kpi b{display:block;font-size:1.7rem;line-height:1.1}
.kpi span{color:var(--mudo);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.kpi.ok b{color:var(--verde)}.kpi.parado b{color:var(--verm)}.kpi.falha b{color:var(--amar)}
.busca{width:100%;margin-bottom:14px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:16px}
.card{position:relative;background:var(--card);border:1px solid var(--borda);border-radius:16px;padding:18px 18px 16px;overflow:hidden;box-shadow:0 8px 30px #0006;backdrop-filter:blur(6px);transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-2px);border-color:#38bdf855}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cor,var(--mudo))}
.card.c-ok{--cor:var(--verde)}.card.c-parado{--cor:var(--verm)}.card.c-falha{--cor:var(--amar)}
.linha{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.nome{font-weight:700;font-size:1.08rem;word-break:break-all}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:99px;font-size:.78rem;font-weight:700;white-space:nowrap;color:var(--cor);background:color-mix(in srgb,var(--cor) 16%,transparent);border:1px solid color-mix(in srgb,var(--cor) 45%,transparent)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cor);box-shadow:0 0 8px var(--cor)}
.badge.b-ok{--cor:var(--verde)}.badge.b-parado{--cor:var(--verm)}.badge.b-falha{--cor:var(--amar)}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0;background:#ffffff08;border-radius:12px;padding:10px 12px}
.meta div{font-weight:600;font-size:.92rem}
.meta div span{display:block;color:var(--mudo);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.rot{color:var(--mudo);font-size:.75rem;margin-top:8px}
code{background:var(--cod);padding:5px 8px;border-radius:8px;font-size:.78rem;word-break:break-all;display:block;margin-top:3px;color:#b6ccf0;border:1px solid var(--borda)}
.portas{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.porta{border:1px solid #38bdf855;background:#38bdf814;border-radius:10px;padding:5px 11px;font-size:.84rem;color:var(--azul);text-decoration:none;transition:background .15s}
a.porta:hover{background:#38bdf833}
.porta small{color:var(--mudo);margin-left:6px;font-weight:600}
.acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--borda)}
.btn{border:1px solid var(--borda);background:#ffffff0d;color:var(--tx);border-radius:10px;padding:8px 13px;font:inherit;font-size:.88rem;font-weight:500;cursor:pointer;min-height:38px;transition:background .15s}
.btn:hover:not(:disabled){background:#ffffff1c}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.primario{background:linear-gradient(135deg,var(--azul2),#0ea5e9);border:0;color:#fff;font-weight:600}
.btn.ok{border-color:#22c55e66;color:var(--verde)}.btn.perigo{border-color:#ef444466;color:#fca5a5}

.login{max-width:400px;margin:0 auto;background:var(--card);border:1px solid var(--borda);border-radius:22px;overflow:hidden;box-shadow:0 24px 70px #000b,0 0 0 1px #38bdf81a;animation:sobe .45s ease both}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#login{padding-top:3vh}
.login-logo{display:block;width:min(86%,290px);height:auto;margin:0 auto 6px;animation:sobe .45s ease both;filter:invert(1) hue-rotate(180deg) saturate(1.3) brightness(1.1);mix-blend-mode:screen}
.login-corpo{display:grid;gap:14px;padding:22px 26px 14px}
.login-tit h2{margin:0;font-size:1.25rem}
.login-tit p{margin:3px 0 0;color:var(--mudo);font-size:.88rem}
.campo{position:relative;display:flex;align-items:center}
.campo svg{position:absolute;left:12px;width:18px;height:18px;fill:var(--mudo);pointer-events:none}
.campo input{width:100%;padding-left:40px}
.campo input[type=password],.campo input#in-senha{padding-right:44px}
.olho{position:absolute;right:6px;background:none;border:0;cursor:pointer;font-size:1.05rem;padding:8px;opacity:.7;color:var(--tx)}
.olho:hover{opacity:1}
.caps{color:var(--amar);font-size:.82rem}
.lembrar{display:flex;align-items:center;gap:8px;font-size:.82rem;cursor:pointer}
.lembrar input{width:16px;height:16px;padding:0;accent-color:var(--azul2)}
.btn.grande{min-height:46px;font-size:1rem;display:flex;justify-content:center;align-items:center;gap:10px}
.btn.primario:disabled{opacity:.7}
.spin{width:16px;height:16px;border:2px solid #fff6;border-top-color:#fff;border-radius:50%;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.login-rodape{text-align:center;color:var(--mudo);font-size:.75rem;padding:12px;border-top:1px solid var(--borda);background:#ffffff06}
.login.erro-anim{animation:treme .35s}
@keyframes treme{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
label{display:grid;gap:5px;font-size:.8rem;color:var(--mudo)}
input{padding:11px 13px;border:1px solid var(--borda);border-radius:10px;background:#06101f;color:var(--tx);font:inherit;outline:0}
input:focus{border-color:var(--azul);box-shadow:0 0 0 3px #38bdf826}
.erro{color:#fca5a5;min-height:1.2em;font-size:.88rem}
.aviso{background:#b4530922;color:#fcd34d;border-bottom:1px solid #f59e0b55;padding:8px 16px;text-align:center;font-size:.85rem}
dialog{width:min(920px,96vw);max-height:90vh;border:1px solid var(--borda);border-radius:16px;background:#0b1b38;color:var(--tx);padding:16px}
dialog::backdrop{background:#000a;backdrop-filter:blur(3px)}
.dlg-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.dlg-topo span{display:flex;gap:8px}
pre{margin:0;background:var(--cod);padding:12px;border-radius:10px;overflow:auto;max-height:68vh;font-size:.74rem;white-space:pre-wrap;word-break:break-word;color:#b6ccf0}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#0b1b38;border:1px solid #38bdf866;color:#fff;padding:10px 18px;border-radius:12px;z-index:20;max-width:92vw;box-shadow:0 10px 30px #000a}
@media(max-width:560px){.meta{grid-template-columns:repeat(2,1fr)}header{padding:8px 12px}#atualizado{display:none}.btn{flex:1 1 auto}}