:root { color-scheme: light dark; }
body { font-family: system-ui, sans-serif; max-width: 850px; margin: 0 auto; padding: 24px 16px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h1 { font-size: 1.7rem; margin: 0; }
h2 { font-size: 1.15rem; }
button { font: inherit; padding: 8px 12px; border: 1px solid #87919d; border-radius: 6px; cursor: pointer; }
button:disabled { cursor: wait; }
.hint, .updated { color: #626b76; }
ul { list-style: none; padding: 0; margin: 0; }
li { display: grid; grid-template-columns: minmax(0, 1fr) 65px 115px 160px;
     align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid #b7bec7; }
.device { overflow-wrap: anywhere; }
.battery { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.stale { margin-top: 32px; padding: 12px 16px; border: 1px dashed #87919d; border-radius: 8px; }
.stale li:last-child { border-bottom: 0; }
#error { padding: 12px; border: 1px solid #b35c3c; border-radius: 6px; }
#empty { padding: 24px 0; }
@media (max-width: 600px) {
  li { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .battery, .updated { text-align: right; }
}
@media (prefers-color-scheme: dark) {
  .hint, .updated { color: #b6bfcb; }
  li { border-color: #505b68; }
}