:root { color-scheme: light dark; --muted: #888; --ok: #1a7f37; --off: #b42318; font-family: -apple-system, "PingFang SC", system-ui, sans-serif; }
[hidden] { display: none !important; }
body { margin: 0; }
header { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid #8884; }
header h1 { font-size: 1.2rem; margin: 0; }
#summary { color: var(--muted); flex: 1; }
main { padding: 1rem 1.5rem; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid #8883; vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: .85rem; }
.name { font-weight: 600; }
.id { color: var(--muted); font-size: .75rem; font-family: ui-monospace, monospace; }
.online { color: var(--ok); }
.offline { color: var(--off); }
.qr img { width: 240px; height: 240px; image-rendering: pixelated; background: #fff; padding: 8px; margin-top: .5rem; }
button { font: inherit; padding: .25rem .7rem; margin-right: .3rem; cursor: pointer; }
.hint { color: var(--muted); font-size: .85rem; }
#error { color: var(--off); }
form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
form .hint { flex-basis: 100%; }