:root { --bg:#f5f6f8; --fg:#1d2330; --muted:#5d6676; --card:#fff; --line:#dfe3ea; --accent:#1f5fbf; --err:#b3261e; --warn:#8a5a00;
        --crit:#8b1a1a; --high:#c2410c; --med:#a16207; --low:#3f6212; --none:#6b7280; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); }
header.top { display:flex; gap:1.2rem; align-items:center; padding:.7rem 1.2rem; background:#14213d; color:#fff; flex-wrap:wrap; }
header.top a, header.top .link { color:#dbe6ff; text-decoration:none; }
header.top nav { display:flex; gap:1rem; flex:1; }
.brand { font-weight:700; }
.who { color:#b8c4dc; font-size:.9em; }
main { max-width:1200px; margin:1.5rem auto; padding:0 1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1.2rem 1.5rem; margin-bottom:1.2rem; overflow-x:auto; }
.narrow { max-width:440px; margin:3rem auto; }
h1 { font-size:1.35rem; margin:.2rem 0 1rem; } h2 { font-size:1.1rem; margin:.2rem 0 .8rem; }
label { display:block; margin:.7rem 0; font-weight:600; }
input, select { display:block; width:100%; padding:.5rem .6rem; margin-top:.25rem; border:1px solid var(--line); border-radius:5px; font:inherit; }
button, .button { display:inline-block; background:var(--accent); color:#fff; border:0; border-radius:5px; padding:.55rem 1rem; font:inherit; cursor:pointer; text-decoration:none; margin-top:.6rem; }
button.link { background:none; padding:0; margin:0; }
form.inline { display:inline; }
.error { color:var(--err); font-weight:600; } .warn { color:var(--warn); } .muted { color:var(--muted); }
.qr { display:block; margin:1rem auto; border:1px solid var(--line); }
code.secret { word-break:break-all; }
ul.codes { columns:2; list-style:none; padding:0; font-size:1.1em; }
table { width:100%; border-collapse:collapse; font-size:.93em; }
th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; }
.sev { display:inline-block; padding:.05rem .45rem; border-radius:4px; color:#fff; font-size:.85em; font-weight:600; white-space:nowrap; }
.sev-Critical { background:var(--crit); } .sev-High { background:var(--high); } .sev-Medium { background:var(--med); }
.sev-Low { background:var(--low); } .sev-none { background:var(--none); }
.st-active { color:var(--low); font-weight:600; } .st-disconnected, .st-never_connected { color:var(--err); font-weight:600; }
.small { font-size:.85em; }
.kpis { display:flex; gap:1rem; flex-wrap:wrap; }
.kpis div { border:1px solid var(--line); border-radius:6px; padding:.6rem 1rem; min-width:110px; }
.kpis strong { display:block; font-size:1.4em; } .kpis span { color:var(--muted); font-size:.9em; }
form.filters { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:.2rem 1rem; align-items:end; }
form.filters fieldset { grid-column:1 / -1; border:0; padding:0; margin:0; display:flex; gap:1rem; flex-wrap:wrap; }
form.filters legend { font-weight:600; margin-bottom:.3rem; }
label.check { display:inline-flex; gap:.35rem; align-items:center; font-weight:normal; margin:0; }
label.check input { width:auto; display:inline; margin:0; }
form.filters .actions { grid-column:1 / -1; display:flex; gap:1rem; align-items:center; }
.button.secondary { background:#e8eef9; color:var(--accent); }
nav.pager { display:flex; gap:1rem; justify-content:center; margin-top:1rem; }
pre.cmd { background:#0f172a; color:#e2e8f0; padding:1rem; border-radius:6px; overflow-x:auto; font-size:.85em; white-space:pre; user-select:all; }
fieldset.platforms { border:0; padding:0; margin:.5rem 0; display:flex; flex-direction:column; gap:.4rem; }
fieldset.platforms legend { font-weight:600; margin-bottom:.4rem; }