:root { color-scheme: dark; font: 18px/1.5 system-ui, sans-serif; background: #13161f; color: #eee; }
body { max-width: 680px; padding: 1rem; margin: auto; }
a { color: #8bcaff; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
nav form { margin: 0; }
label, input { display: block; }
input { box-sizing: border-box; width: 100%; padding: .7rem; margin: .3rem 0 1rem; font: inherit; border: 1px solid #777; border-radius: .4rem; }
button { padding: .65rem 1rem; font: inherit; cursor: pointer; border: 1px solid #777; border-radius: .4rem; }
button:disabled { opacity: .6; cursor: wait; }
form { margin-bottom: 1.5rem; }
[hidden] { display: none !important; }
#enrollment-qr { background: white; padding: 1rem; width: fit-content; max-width: 100%; box-sizing: border-box; }
#enrollment-qr svg { display: block; max-width: 100%; height: auto; }
.grant { padding: .8rem 0; border-bottom: 1px solid #444; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.grant form { margin: 0; }
[role=alert] { color: #ffb7b7; }
details { margin-top: 1.5rem; }