:root {
  font-family: system-ui, sans-serif;
  color: #182638;
  background: #f2f5f8;
  line-height: 1.5;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header, .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
header { padding: 1rem max(1rem, calc((100vw - 70rem) / 2)); color: white; background: #10263c; }
main { max-width: 72rem; margin: auto; padding: 1rem; }
h1, h2, h3 { margin-top: 0; }
h2 { font-size: 1.15rem; }
.panel { padding: 1.25rem; border: 1px solid #d9e3ec; border-radius: .75rem; background: white; }
.overview, .fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}
.overview { margin-bottom: 1rem; }
#login { max-width: 28rem; margin: 2rem auto; }
label { display: block; margin-bottom: .85rem; }
input:not([type=checkbox]), select { display: block; width: 100%; padding: .55rem; border: 1px solid #9baebe; border-radius: .35rem; font: inherit; }
button { border: 0; border-radius: .4rem; padding: .55rem .85rem; color: white; background: #1b587c; font: inherit; cursor: pointer; }
button:disabled { opacity: .65; }
a { color: #135478; }
dt { font-weight: 650; }
dd { margin: 0 0 .5rem; }
#message { padding: .75rem; border-radius: .5rem; background: #e2eff8; }
#message.error { color: #802828; background: #ffeded; }
#users { padding: 0; list-style: none; }
#users li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid #d9e3ec; }
.permissions { display: flex; flex-wrap: wrap; gap: 0 1rem; }
#user-editor, #set-password { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #d9e3ec; }
.module { margin-top: 1rem; }
.module form { margin: 1rem 0; max-width: 36rem; }
.module ul { padding-left: 1.2rem; }
.module li { margin-bottom: .6rem; }
.module li button { margin-left: .5rem; }
#signage-admin { width: 100%; min-height: 48rem; border: 1px solid #d9e3ec; }