:root { --ok:#0b8043; --pending:#f1c40f; --alerted:#b00020; --firmware:#e67e22; --bg:#0e1116; --card:#1b1f27; --fg:#e8eaed; --muted:#9aa0a6; }
* { box-sizing: border-box; }
body { margin:0; font-family:system-ui,Arial,sans-serif; background:var(--bg); color:var(--fg); }
header { padding:16px 24px; border-bottom:1px solid #2a2f3a; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
h1 { margin:0; font-size:20px; }
.meta { display:flex; gap:16px; color:var(--muted); font-size:13px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; padding:16px; }
.card { background:var(--card); border-radius:8px; padding:12px; border-left:4px solid var(--ok); }
.card.status-DOWN_PENDING { border-left-color:var(--pending); }
.card.status-DOWN_ALERTED { border-left-color:var(--alerted); }
.card.firmware-stale { box-shadow: inset 0 -3px 0 var(--firmware); }
.card header { padding:0; border:none; margin-bottom:8px; gap:8px; }
.card h2 { font-size:15px; margin:0; flex:1; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--ok); display:inline-block; }
.card.status-DOWN_PENDING .dot { background:var(--pending); }
.card.status-DOWN_ALERTED .dot { background:var(--alerted); }
dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13px; }
dt { color:var(--muted); }
details { margin-top:8px; font-size:13px; }
table.devices { width:100%; border-collapse:collapse; margin-top:6px; }
table.devices th, table.devices td { text-align:left; padding:4px 6px; border-bottom:1px solid #2a2f3a; font-size:12px; }