* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f9fafb; color: #111; }
header { padding: 16px 24px; background: #fff; border-bottom: 1px solid #e5e7eb; }
header h1 { font-size: 1.2rem; font-weight: 600; }
main { padding: 24px; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
th { text-align: left; padding: 10px 14px; font-size: .75rem; text-transform: uppercase; color: #6b7280; border-bottom: 2px solid #e5e7eb; }
td { padding: 10px 14px; font-size: .875rem; border-bottom: 1px solid #f3f4f6; }
tr:last-child td { border-bottom: none; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot.online { background: #22c55e; }
.dot.offline { background: #ef4444; }
tr.offline td { color: #9ca3af; }