body { font-family: system-ui, sans-serif; margin: 0; padding: 0 1rem 2rem; max-width: 46rem; line-height: 1.4; color: #111; background: #fff; }
.area-admin { max-width: 70rem; }
header { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; padding: .75rem 0; border-bottom: 1px solid #ccc; }
nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.15rem; margin-top: 1.75rem; }
a { color: #0645ad; }
input[type=text], input[type=number], textarea, select { font: inherit; padding: .35rem; box-sizing: border-box; max-width: 100%; }
input[type=text] { width: 20rem; }
textarea { width: 100%; }
button { font: inherit; padding: .3rem .8rem; cursor: pointer; }
button.link { border: 0; background: none; color: #0645ad; text-decoration: underline; padding: 0; }
form.inline { display: inline; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.flash { padding: .5rem .75rem; border-left: 4px solid #2a7; background: #eef8f1; }
.flash.error { border-color: #c33; background: #fbeeee; }
.flash.warn { border-color: #d90; background: #fdf6e6; }
.muted { color: #666; }
.big { font-size: 2.5rem; font-family: ui-monospace, monospace; letter-spacing: .2em; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; margin: .5rem 0; }
th, td { text-align: left; padding: .3rem .6rem; border-bottom: 1px solid #ddd; vertical-align: top; }
ul.plain { list-style: none; padding: 0; }
ul.plain li { margin: .3rem 0; }
.qr svg { width: 16rem; height: 16rem; max-width: 100%; }
.ac { position: relative; }
.ac-list { list-style: none; margin: .25rem 0; padding: 0; max-width: 20rem; border: 1px solid #ccc; }
.ac-list:empty { display: none; }
.ac-list button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #eee; background: #fff; padding: .45rem .6rem; }
.ac-list button.active, .ac-list button:hover { background: #e8eefc; }
.ac-hint { margin: .25rem 0; }
.ac-hint:empty { display: none; }
tr.me td { background: #fff3c4; font-weight: bold; }
.status-correct strong, td.status-correct { color: #186b35; }
.status-wrong strong, td.status-wrong { color: #b02020; }
.status-neutral, td.status-neutral { color: #666; }
.switch-on { color: #186b35; font-weight: bold; }
.switch-off { color: #b02020; font-weight: bold; }
td.num, th.num { text-align: right; }