:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; }
main { max-width: 900px; margin: 3rem auto; padding: 0 1rem; }
section { padding: 1rem 0; }
input, button, textarea, select { font: inherit; padding: .6rem; }
input { display: block; margin: .5rem 0 1rem; max-width: 100%; box-sizing: border-box; }
button { cursor: pointer; margin: .25rem .5rem .25rem 0; }
button:disabled { cursor: default; opacity: .5; }
textarea { width: 100%; min-height: 5rem; box-sizing: border-box; font: .9rem monospace; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; border: 1px solid #888; }
code { overflow-wrap: anywhere; }
.bar { display: flex; align-items: center; justify-content: space-between; }
.card { border: 1px solid #888; border-radius: .5rem; margin: 1rem 0; padding: 1rem; }
#error { color: #db4242; white-space: pre-wrap; }
#device-code { font: bold 2rem monospace; }
#secrets { border: 2px solid #c88715; padding: 1rem; margin-top: 1rem; }
.controls { gap: 1rem; flex-wrap: wrap; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { text-align: left; vertical-align: top; padding: .6rem; border-bottom: 1px solid #888; }
td { overflow-wrap: anywhere; white-space: pre-wrap; max-width: 20rem; }
#job-events { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
