body { font-family: system-ui, sans-serif; line-height: 1.7; margin: 1rem; color: #142535; background: #f6f8fa; }
main { max-width: 32rem; margin: 2rem auto; padding: 1.25rem; background: white; border-radius: .75rem; }
form { display: grid; gap: .5rem; }
input, button { box-sizing: border-box; width: 100%; min-height: 44px; padding: .5rem; font: inherit; }
button { margin-top: .5rem; background: #155586; color: white; border: 0; border-radius: .25rem; }
input[dir=ltr] { text-align: left; }
[hidden] { display: none; }
#enroll, #admin { margin-top: 1.5rem; }
#issued-code { display: block; overflow-wrap: anywhere; user-select: all; }
#photo { display: block; margin: .75rem 0; max-width: 100%; }
#photo[hidden], #issued[hidden] { display: none; }

#patients { margin-block: 1rem 2rem; }
#patients textarea, #patients select { box-sizing: border-box; width: 100%; font: inherit; padding: .5rem; }
#patient-assignees label, #edit-patient-assignees label { display: block; }
#patient-assignees input, #edit-patient-assignees input { width: auto; min-height: 0; }

.treatment-photo { display: block; max-width: 100%; height: auto; margin-block: .5rem; }

#staff-access { margin-block: 1rem; }
#staff-access select { width: 100%; font: inherit; padding: .5rem; }
#staff-access label { display: block; }
#staff-access input[type=checkbox] { width: auto; min-height: 0; }

#clinic-calendar summary { cursor: pointer; font-weight: 600; }
#clinic-calendar [role=group] { display: flex; gap: .5rem; }