:root { --bg:#fff; --fg:#111; --mut:#666; --bd:#ddd; --ok:#0a7d32; --err:#b00020; --card:#f7f7f7; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14161a; --fg:#eaeaea; --mut:#9aa0a6; --bd:#2c3038; --ok:#41c86a; --err:#ff6b6b; --card:#1b1f25; }
}
* { box-sizing: border-box; }
body { margin:0; padding:0 16px 32px; background:var(--bg); color:var(--fg);
       font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
nav { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--bd); }
nav a { color:var(--fg); text-decoration:none; padding:4px 0; }
nav a:hover { text-decoration:underline; }
.inline { display:inline; margin-left:auto; }
h1 { font-size:1.4rem; } h2 { font-size:1.1rem; margin-top:24px; }
main { max-width:900px; margin:0 auto; }
form label { display:block; margin:12px 0; }
input, select, button { font:inherit; padding:10px; width:100%; max-width:420px;
                        background:var(--bg); color:var(--fg); border:1px solid var(--bd); border-radius:6px; }
button { cursor:pointer; }
table { width:100%; border-collapse:collapse; margin:12px 0; font-size:0.95rem; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--bd); }
.card { background:var(--card); border:1px solid var(--bd); border-radius:8px; padding:12px; margin:12px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.mut { color:var(--mut); } .ok { color:var(--ok); } .erro { color:var(--err); }
.rel-offline { color:var(--ok); } .rel-phantom { color:var(--err); } .rel-own { font-weight:700; }
.barra { background:var(--bd); height:10px; border-radius:5px; }
.barra > span { display:block; height:10px; border-radius:5px; background:var(--ok); }