:root {
  --bg: #ffffff; --fg: #1d1d1f; --muted: #6e6e73; --line: #d2d2d7; --banner: #fff4d6;
  --installing: #2f6fde; --awaiting: #b26b00; --installed: #2e7d32; --unknown: #8e8e93; --unreachable: #c62828;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161618; --fg: #f2f2f7; --muted: #a1a1a6; --line: #3a3a3c; --banner: #3d3214;
    --installing: #6ea0ff; --awaiting: #f0a640; --installed: #66bb6a; --unknown: #a1a1a6; --unreachable: #ef5350;
  }
}
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.4 system-ui, sans-serif; }
header { display: flex; gap: 16px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
header .brand { font-weight: 600; color: inherit; text-decoration: none; }
header .who { color: var(--muted); margin-left: auto; }
main { padding: 16px; max-width: 1100px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; }
td[data-status="installing"], tr[data-status="installing"] td:nth-child(2) { color: var(--installing); }
td[data-status="awaiting post-setup"], tr[data-status="awaiting post-setup"] td:nth-child(2) { color: var(--awaiting); }
td[data-status="installed"], tr[data-status="installed"] td:nth-child(2) { color: var(--installed); }
td[data-status="unknown"], tr[data-status="unknown"] td:nth-child(2) { color: var(--unknown); }
td[data-status="unreachable"], tr.unreachable td:nth-child(2) { color: var(--unreachable); }
.banner { background: var(--banner); padding: 8px 12px; border-radius: 6px; }
.login main { max-width: 320px; margin: 10vh auto; }
.login form { display: grid; gap: 12px; }
.login input { display: block; width: 100%; box-sizing: border-box; padding: 6px; }
.error { color: var(--unreachable); }
@media (max-width: 640px) { th:nth-child(n+5), td:nth-child(n+5) { display: none; } }

:root { --ready: #2e7d32; --notlogged: #b26b00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ready: #66bb6a; --notlogged: #f0a640; } }
header a { color: inherit; }
td[data-status="ready"], tr[data-status="ready"] td:nth-child(2) { color: var(--ready); font-weight: 600; }
td[data-status="not logged in"], tr[data-status="not logged in"] td:nth-child(2) { color: var(--notlogged); }
tr[data-state="failed"] td:nth-child(2), tr[data-state="interrupted"] td:nth-child(2) { color: var(--unreachable); }
tr[data-state="ok"] td:nth-child(2) { color: var(--installed); }
tr[data-state="running"] td:nth-child(2) { color: var(--installing); }
#run { margin-top: 24px; border-top: 1px solid var(--line); }
#run label { margin-right: 12px; }
.muted { color: var(--muted); }
pre { white-space: pre-wrap; max-width: 60ch; max-height: 30em; overflow: auto; }

td[data-status="post-setup"] { color: var(--awaiting); }
td[data-status="post-setup failed"], tr[data-status="post-setup failed"] td:nth-child(2) { color: var(--unreachable); }
tr[data-status="waiting for reboot"] td:nth-child(2), tr[data-status="settling"] td:nth-child(2),
tr[data-status="post-setup running"] td:nth-child(2), tr[data-status="post-setup done"] td:nth-child(2) { color: var(--awaiting); }
button.small { font-size: 12px; padding: 1px 6px; }