* { box-sizing: border-box; }
body { margin: 0; font: 16px system-ui, sans-serif; color: #20332c; background: #f3f6f3; }
header { display: flex; align-items: center; gap: .8rem; background: white; border-bottom: 1px solid #ced8cf; padding: 1rem max(1rem, calc((100vw - 72rem) / 2)); }
header button { margin-left: auto; }
main { max-width: 74rem; margin: auto; padding: 1rem; }
section { background: white; border: 1px solid #ced8cf; border-radius: .5rem; padding: 1.4rem; margin-bottom: 1rem; }
.auth { max-width: 29rem; margin: 3rem auto; }
label { display: block; margin: .7rem 0; }
input, select, textarea, button { font: inherit; }
input, select, textarea { display: block; width: 100%; margin-top: .3rem; padding: .45rem; border: 1px solid #aebfb3; border-radius: .25rem; }
button { cursor: pointer; color: white; background: #18553e; border: 1px solid #18553e; padding: .45rem .8rem; border-radius: .3rem; margin: .25rem .3rem .25rem 0; }
button:disabled { opacity: .55; cursor: wait; }
a { color: #18553e; }
#notice:empty { display: none; }
#notice { padding: .75rem; background: #e5efe7; border-radius: .3rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1rem; }
table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: .5rem; border-bottom: 1px solid #dce4de; }
.scroll { overflow: auto; }
code { overflow-wrap: anywhere; }
.check input { display: inline; width: auto; margin: 0; }
nav { display: flex; gap: .35rem; flex-wrap: wrap; margin: 0 0 1rem; border-bottom: 1px solid #ced8cf; }
nav a { padding: .65rem .75rem; text-decoration: none; border-bottom: 3px solid transparent; }
nav a:hover { background: #e5efe7; }
nav a[aria-current="page"] { border-bottom-color: #18553e; font-weight: 650; }
body { background: #b1b3b7; color: #3b4f60; font: 13px Verdana, sans-serif; }
header, main { width: min(960px, calc(100% - 24px)); margin: 20px auto 0; }
header { background: #47668e; border: 1px solid #3c5369; color: white; padding: 10px 18px; }
header strong { font-size: 24px; font-variant: small-caps; }
main { margin-top: 0; padding: 0; background: white; border: 1px solid #3c5369; border-top: 0; min-height: 478px; }
nav { margin: 0; padding: 3px 8px; background: #374b5d; }
nav a { color: white; background: #42586a; padding: 5px 19px; border: 1px solid #506679; }
nav a:hover, nav a[aria-current="page"] { background: #556d82; border-color: #788ea0; }
section { padding: 16px 20px; margin: 0; border: 0; border-radius: 0; }
h1, h2 { font-size: 17px; font-variant: small-caps; margin: 3px 0 9px; }
input, select, textarea { width: min(100%, 260px); padding: 2px 4px; border-radius: 0; }
label { margin: .4rem 0; }
button, .button { display: inline-block; color: #172532; background: #eee; border: 1px solid #777; border-radius: 2px; padding: 2px 8px; text-decoration: none; }
header button { margin: 0 0 0 auto; }
#notice { margin: 8px 20px; }
.user-layout { display: grid; grid-template-columns: minmax(12rem, 1fr) 2fr; gap: 1rem; margin-top: .75rem; }
#users { list-style: none; padding: 0; margin: 0; }
#users button { text-align: left; width: 100%; }
#users small { display: block; }
dt { font-weight: bold; }
dd { margin: 0 0 .5rem; }
@media (max-width: 560px) { .user-layout { grid-template-columns: 1fr; } }