:root { color-scheme: dark; font-family: system-ui, sans-serif; }
body { margin: 0; background: #0f1216; color: #e6e6e6; }
header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid #222; }
nav a { color: #7fb0ff; margin-left: 14px; text-decoration: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 20px; }
.card { background: #171b21; border: 1px solid #232a33; border-radius: 10px; padding: 14px; max-width: 420px; margin: 20px auto; display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; }
.row .edit { margin-left: auto; color: #7fb0ff; font-size: 13px; }
.muted { color: #8a93a0; font-size: 13px; }
.err { color: #ff6b6b; }
.actions { display: flex; gap: 8px; margin-top: 6px; }
button { background: #2a3340; color: #e6e6e6; border: 1px solid #3a4756; border-radius: 6px; padding: 6px 10px; cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
input { background: #0f1216; color: #e6e6e6; border: 1px solid #2a3340; border-radius: 6px; padding: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.ok { background: #35c26b; } .dot.warn { background: #e0b53f; } .dot.bad { background: #ff5a5a; } .dot.idle { background: #5a636e; }