:root{
  --bg:#04070A; --sup:#0A0F14; --sup2:#0E141B; --linha:#1A242E;
  --txt:#E8F4F8; --fraco:#7E93A3; --ciano:#00E5FF;
  --bom:#31D67A; --alerta:#FFB020; --ruim:#FF4D5E;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt);min-height:100vh;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;
}
a{color:var(--ciano)}
.marca{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.02em}
.marca em{color:var(--fraco);font-style:normal;font-weight:400}
.pt{width:9px;height:9px;border-radius:50%;background:var(--ciano);box-shadow:0 0 12px var(--ciano);flex:none}

/* entrada */
.entrada{min-height:100vh;display:grid;place-items:center;padding:20px}
.cartao{
  background:var(--sup);border:1px solid var(--linha);border-radius:14px;
  padding:32px;width:100%;max-width:380px;
}
.cartao h1{font-size:19px;margin:18px 0 20px;font-weight:600}
label{display:block;font-size:12px;color:var(--fraco);margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase}
input{
  width:100%;background:var(--sup2);border:1px solid var(--linha);border-radius:8px;
  padding:11px 13px;color:var(--txt);font-size:15px;font-family:inherit;
}
input:focus{outline:none;border-color:var(--ciano);box-shadow:0 0 0 3px rgba(0,229,255,.1)}
small{display:block;color:var(--fraco);font-size:11.5px;margin-top:5px;line-height:1.4}
button,.botao{
  background:var(--ciano);color:#00161B;border:0;border-radius:8px;padding:11px 18px;
  font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;
  display:inline-block;text-decoration:none;text-align:center;
}
button:hover{filter:brightness(1.1)}
.cartao button{width:100%;margin-top:20px}
button.fantasma,.fantasma.botao{
  background:transparent;border:1px solid var(--linha);color:var(--txt);font-weight:500;padding:8px 13px;
}
button.fantasma:hover{border-color:var(--ciano);color:var(--ciano);filter:none}
button.perigo{background:transparent;border:1px solid rgba(255,77,94,.35);color:var(--ruim);font-weight:500;padding:8px 13px}
button.perigo:hover{background:rgba(255,77,94,.1);filter:none}

/* avisos */
.aviso{border-radius:8px;padding:11px 14px;font-size:13.5px;margin-bottom:16px;line-height:1.45}
.aviso.erro{background:rgba(255,77,94,.1);border:1px solid rgba(255,77,94,.3);color:#FFA8B0}
.aviso.bom{background:rgba(49,214,122,.1);border:1px solid rgba(49,214,122,.3);color:#8DE9B4}

/* topo */
.topo{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 24px;border-bottom:1px solid var(--linha);background:var(--sup);
  position:sticky;top:0;z-index:5;
}
.corpo{max-width:1240px;margin:0 auto;padding:24px 20px 60px}

/* cartões de resumo */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:22px}
.kpi{background:var(--sup);border:1px solid var(--linha);border-radius:11px;padding:16px}
.kpi b{display:block;font-size:26px;font-family:var(--mono);line-height:1.1}
.kpi span{font-size:11.5px;color:var(--fraco);text-transform:uppercase;letter-spacing:.06em}
.kpi.bom b{color:var(--bom)} .kpi.alerta b{color:var(--alerta)} .kpi.ruim b{color:var(--ruim)}

/* painéis */
.painel{background:var(--sup);border:1px solid var(--linha);border-radius:13px;padding:22px;margin-bottom:20px}
.painel h2{font-size:15px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.cont{
  font-family:var(--mono);font-size:11px;color:var(--fraco);
  background:var(--sup2);border:1px solid var(--linha);border-radius:20px;padding:2px 9px;
}
.cabeca{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.cabeca h2{margin:0}
.linha{display:flex;gap:8px;align-items:center}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;align-items:start}
.grade .curto{max-width:110px}
.grade .fim{display:flex;align-items:flex-end;height:100%;padding-top:19px}

/* tabela */
.rolagem{overflow-x:auto;margin:0 -22px;padding:0 22px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;padding:9px 11px;color:var(--fraco);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--linha);white-space:nowrap;
}
td{padding:11px;border-bottom:1px solid rgba(26,36,46,.5);vertical-align:middle}
tr:hover td{background:rgba(255,255,255,.015)}
.mono{font-family:var(--mono);font-size:12.5px}
.fraco{color:var(--fraco)}
.tag{
  display:inline-block;font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:5px;white-space:nowrap;
}
.tag.bom{background:rgba(49,214,122,.13);color:var(--bom)}
.tag.alerta{background:rgba(255,176,32,.13);color:var(--alerta)}
.tag.ruim{background:rgba(255,77,94,.13);color:var(--ruim)}
.tag.neutro{background:var(--sup2);color:var(--fraco)}
.acoes{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.acoes input.mini{width:58px;padding:7px 8px;font-size:13px}
.vazio{color:var(--fraco);text-align:center;padding:30px 10px;font-size:14px}

/* nota */
.nota code{
  display:block;background:var(--sup2);border:1px solid var(--linha);border-radius:8px;
  padding:12px 14px;font-family:var(--mono);font-size:12.5px;color:var(--ciano);
  margin-top:9px;overflow-x:auto;word-break:break-all;
}
.nota p{font-size:13.5px;line-height:1.55}

@media (max-width:760px){
  .corpo{padding:16px 14px 40px}
  .painel{padding:16px}
  .rolagem{margin:0 -16px;padding:0 16px}
  .acoes{justify-content:flex-start}
  .grade .curto{max-width:none}
  .grade .fim{padding-top:0}
}