:root { font-family: system-ui, sans-serif; color: #182635; background: #eef2f6; }
body { margin: 0; }
main { max-width: 64rem; margin: 0 auto; padding: 1.25rem; }
.login { max-width: 24rem; margin-top: 12vh; }
h1, h2 { margin: 0 0 1rem; }
header, section { background: white; padding: 1.25rem; border-radius: .8rem; margin-bottom: 1rem; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
header h1 { margin: 0; }
form { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; }
label { display: grid; gap: .35rem; max-width: 100%; }
input, button { box-sizing: border-box; max-width: 100%; font: inherit; padding: .55rem .75rem; border-radius: .4rem; border: 1px solid #8c9aab; }
button { background: #164677; color: white; cursor: pointer; border-color: transparent; }
button.secondary { background: #e7edf4; color: #182635; }
a { color: #174f85; }
ol { padding-left: 1.5rem; }
li { padding: .55rem 0; overflow-wrap: anywhere; }
li form { display: inline-flex; margin: .3rem .25rem; }
input[type=number] { width: 5rem; }
[role=alert] { color: #962b20; }
.kiosk { background: #000; color: white; }
.kiosk main { display: grid; place-items: center; padding: 0; max-width: none; height: 100vh; overflow: hidden; }
.kiosk img, .kiosk video { width: 100%; height: 100%; object-fit: contain; }