:root {
  font: 16px/1.5 system-ui, sans-serif;
  color: #172c25;
  background: #f2f6f3;
}
body { margin: 0; }
[hidden] { display: none !important; }
main { width: min(52rem, calc(100% - 2rem)); margin: 3rem auto; }
header, .actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
h1, h2, h3 { line-height: 1.2; }
article, #account { background: white; border: 1px solid #d7e2db; border-radius: 1rem; padding: 1.5rem; margin-block: 1rem; }
#account { max-width: 28rem; }
label { display: grid; gap: .35rem; margin: .8rem 0; }
input, button { font: inherit; box-sizing: border-box; border-radius: .5rem; padding: .6rem .75rem; }
input { border: 1px solid #91a69a; width: 100%; }
button { background: #146546; color: white; border: 1px solid transparent; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible, input:focus-visible { outline: 3px solid #3267b8; outline-offset: 2px; }
.remove, #logout, #switch { background: white; color: #214939; border-color: #91a69a; }
.connection-id { color: #4d655b; font-size: .85rem; overflow-wrap: anywhere; }
.state { background: #e4f4eb; padding: .2rem .6rem; border-radius: .5rem; }
.qr { width: min(15rem, 100%); }
.issued { padding-block: .5rem; }
#notice:empty { display: none; }