:root{
  --bg:#0d1117; --bg2:#161b22; --card:#1b222c; --linha:#2a3340;
  --txt:#e6edf3; --txt2:#9aa7b4; --azul:#2f81f7; --ok:#2ea043; --off:#8b949e;
  --perigo:#da3633; --amar:#d29922; --marca:#ff6a2b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px}
a{color:inherit;text-decoration:none}
code{background:#0b0f14;padding:2px 6px;border-radius:5px;color:var(--marca);font-size:.9em}

/* ---------- login ---------- */
.tela-login{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:radial-gradient(1200px 600px at 50% -10%, #1b2430, var(--bg))}
.caixa-login{background:var(--card);border:1px solid var(--linha);border-radius:16px;
  padding:34px 30px;width:340px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.caixa-login label{display:block;margin:14px 0 6px;color:var(--txt2);font-size:13px}
.caixa-login input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--linha);
  background:#0b0f14;color:var(--txt);font-size:15px}
.caixa-login button{width:100%;margin-top:22px;padding:13px;border:0;border-radius:10px;
  background:var(--marca);color:#fff;font-weight:700;font-size:15px;cursor:pointer;letter-spacing:.5px}
.erro{color:#ff7b72;margin-top:14px;text-align:center;font-size:13px}

/* ---------- marca ---------- */
.logo{font-weight:800;letter-spacing:1px;font-size:20px}
.logo span{color:var(--marca)}
.logo.grande{font-size:30px;text-align:center;margin-bottom:6px}

/* ---------- topo / nav ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 26px;background:var(--bg2);border-bottom:1px solid var(--linha);
  position:sticky;top:0;z-index:5}
.top nav{display:flex;gap:6px;align-items:center}
.top nav a{padding:9px 14px;border-radius:9px;color:var(--txt2);font-weight:600;font-size:14px}
.top nav a:hover{background:var(--card);color:var(--txt)}
.top nav a.on{background:var(--marca);color:#fff}
.top nav a.sair{color:#ff7b72}

.wrap{max-width:1040px;margin:0 auto;padding:26px}
h1{font-size:22px;margin:4px 0 20px;display:flex;align-items:center;gap:12px}
.badge{background:var(--amar);color:#1b1500;font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px}

/* ---------- cards resumo ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:22px}
.card{background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:20px}
.card .num{font-size:30px;font-weight:800}
.card .lab{color:var(--txt2);margin-top:4px;font-size:13px}
.card.alerta .num{color:var(--amar)}

/* ---------- avisos ---------- */
.aviso{background:#132a1c;border:1px solid #1f5130;color:#7ee2a0;
  padding:11px 16px;border-radius:10px;margin-bottom:18px}
.dica{color:var(--txt2);font-size:13px;margin-top:18px;line-height:1.5}

/* ---------- formulários em linha ---------- */
.form-linha{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
  background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:18px;margin-bottom:22px}
.campo{display:flex;flex-direction:column;flex:1;min-width:150px}
.campo.peq{flex:0 0 90px;min-width:90px}
.campo.larg{flex:2;min-width:240px}
.campo.chk,.campo.btn{flex:0 0 auto}
.campo label{color:var(--txt2);font-size:12px;margin-bottom:6px}
.campo input{padding:11px 12px;border-radius:9px;border:1px solid var(--linha);
  background:#0b0f14;color:var(--txt);font-size:14px}
.switch{display:flex;align-items:center;gap:8px;color:var(--txt);font-size:14px;padding:11px 0}

/* ---------- botões ---------- */
button{font-family:inherit}
.form-linha button{padding:11px 20px;border:0;border-radius:9px;background:var(--marca);
  color:#fff;font-weight:700;cursor:pointer;white-space:nowrap}
.bt-sec{padding:7px 12px;border:1px solid var(--linha);border-radius:8px;background:transparent;
  color:var(--txt);cursor:pointer;font-size:13px;font-weight:600;display:inline-block}
.bt-sec:hover{background:var(--bg2)}
.bt-ok{padding:7px 12px;border:0;border-radius:8px;background:var(--ok);color:#fff;cursor:pointer;font-size:13px;font-weight:700}
.bt-perigo{padding:7px 12px;border:0;border-radius:8px;background:var(--perigo);color:#fff;cursor:pointer;font-size:13px;font-weight:700}

/* ---------- tabelas ---------- */
.tbl{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--linha);border-radius:14px;overflow:hidden}
.tbl th{text-align:left;padding:13px 14px;background:var(--bg2);color:var(--txt2);
  font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.tbl td{padding:12px 14px;border-top:1px solid var(--linha);vertical-align:middle}
.tbl tr.pend{background:#1e1a12}
.tbl .vazio{text-align:center;color:var(--txt2);padding:26px}
.mono{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:13px}
.mono.peq{font-size:12px;color:var(--txt2)}
.cod{display:inline-block;background:var(--marca);color:#fff;font-weight:800;
  padding:2px 10px;border-radius:7px;font-family:ui-monospace,monospace}
.tag{font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px}
.tag.ok{background:#102d1a;color:#3fb950;border:1px solid #1f5130}
.tag.off{background:#2a2017;color:#d29922;border:1px solid #5a3f16}
.acoes{display:flex;gap:7px;flex-wrap:wrap}
.inline-edit input{background:transparent;border:1px solid transparent;color:var(--txt);
  padding:6px 8px;border-radius:7px;font-size:14px;width:100%}
.inline-edit input:focus{background:#0b0f14;border-color:var(--linha);outline:none}

/* ---------- abas filtro ---------- */
.abas{display:flex;gap:8px;margin-bottom:14px}
.abas a{padding:7px 14px;border-radius:8px;background:var(--card);border:1px solid var(--linha);
  color:var(--txt2);font-size:13px;font-weight:600}
.abas a.on{background:var(--marca);color:#fff;border-color:var(--marca)}