* { box-sizing: border-box; }
body { margin: 18px auto; padding: 0 16px; max-width: 900px; background: white; color: #111; font: 15px/1.4 Arial, Helvetica, sans-serif; }
button, input, select, textarea { font: inherit; }
a { color: #0645ad; }
button { padding: 3px 9px; cursor: pointer; }
button:disabled { cursor: default; }
input[type=search], select { padding: 4px 6px; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #aaa; padding-bottom: 10px; }
.brand { font-weight: bold; font-size: 18px; color: #111; text-decoration: none; }
nav { white-space: nowrap; }
nav a + a { margin-left: 10px; }
h1 { font-size: 24px; margin: 22px 0 14px; }
h2 { font-size: 18px; margin: 20px 0 10px; }
p { margin: 10px 0; }
.filters { display: flex; gap: 8px; margin-bottom: 16px; }
#search { width: 260px; min-width: 0; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 7px 9px; border: 1px solid #ccc; }
th { background: #eee; font-weight: bold; }
#teachers td:last-child { width: 155px; }
#teachers td:nth-child(2) { color: #444; }
.subject, .small { font-size: 13px; color: #555; }
.subject { margin-top: -8px; }
fieldset { border: 0; padding: 0; margin: 16px 0 10px; }
.rating-choice { display: block; margin: 5px 0; }
.attended { display: block; margin: 12px 0; }
input[type=radio], input[type=checkbox] { margin: 0 4px 0 0; }
#rating-image { max-width: 100%; height: auto; display: block; }
#public-rating { max-width: 600px; }
#public-rating > a { font-size: 12px; }
.comments { border-top: 1px solid #bbb; margin-top: 24px; padding-top: 1px; max-width: 650px; }
.comment { border-bottom: 1px solid #ddd; padding: 10px 0; overflow-wrap: anywhere; }
.comment p { white-space: pre-wrap; margin: 0 0 5px; }
.comment button { font-size: 12px; margin-right: 5px; }
textarea { width: 100%; display: block; resize: vertical; padding: 6px; margin: 14px 0 7px; }
.report { margin-top: 20px; font-size: 13px; }
summary { cursor: pointer; }
.profile-qr { margin: 12px 0; }
.profile-qr img { display: block; max-width: 100%; height: auto; margin-top: 8px; image-rendering: pixelated; }
details p { max-width: 680px; }
#status { white-space: pre-wrap; }
#status.error, #rating-feedback.error, #comment-feedback.error, #auth-error { color: #a00000; }
dialog { padding: 16px; width: min(380px, calc(100% - 32px)); border: 1px solid #777; }
dialog::backdrop { background: #0005; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.dialog-heading h2 { margin: 0; }
#bot-check { margin-bottom: 12px; }
.passkey-options { margin: 12px 0; }
.passkey-options label { display: block; margin-bottom: 4px; }
.passkey-options select { max-width: 100%; margin: 0 0 6px; }
.admin-item { border-bottom: 1px solid #ccc; padding: 12px 0; overflow-wrap: anywhere; }
.admin-item p { white-space: pre-wrap; }
.admin-item button { margin-right: 5px; }
.account-id { overflow-wrap: anywhere; }
.account-name { font-size: 18px; font-weight: bold; overflow-wrap: anywhere; }
.username-form input, #signup-username { max-width: 100%; padding: 4px 6px; }
#signup-username { display: block; width: 100%; margin-top: 4px; }
.verified { vertical-align: -2px; }
.table-scroll { overflow-x: auto; margin: 12px 0; }
.teacher-link { display: flex; align-items: center; gap: 9px; }
.teacher-avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: #eee; }
.initials { display: inline-flex; align-items: center; justify-content: center; color: #555; text-decoration: none; }
.teacher-heading { display: flex; gap: 15px; align-items: center; margin-top: 20px; }
.teacher-heading .teacher-avatar { width: 74px; height: 74px; }
.teacher-heading h1 { margin-top: 0; }
.rating-readout { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; white-space: nowrap; }
.rating-readout svg { flex-shrink: 0; }
.rating-readout small { flex-basis: 100%; color: #555; }
.rating-number, #score { font-weight: bold; }
#score { font-size: 22px; margin-bottom: 0; }
.leaderboard-section { margin: 25px 0; }
#admin-settings label { display: block; margin: 10px 0; }
#admin-tools details { margin: 14px 0; }
.admin-item label { white-space: nowrap; }
.site-nav { display: flex; gap: 12px; }
.own-item { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #ddd; padding: 8px 0; }
.skip { position: absolute; top: -100px; }
.skip:focus { top: 0; background: white; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid #075daf; outline-offset: 2px; }
[hidden] { display: none !important; }
@media (max-width: 520px) {
 body { padding: 0 10px; margin-top: 12px; font-size: 14px; }
 .brand { font-size: 16px; }
 h1 { font-size: 22px; }
 .filters { flex-wrap: wrap; }
 #search { flex: 1 1 180px; }
 .filters select { flex: 1 1 150px; }
 th, td { padding: 6px; }
 #teachers td:nth-child(2) { font-size: 12px; }
 #teachers td:last-child { min-width: 110px; }
 .teacher-avatar { width: 32px; height: 32px; }
 .filters { align-items: start; }
 #admin-filter { flex-wrap: wrap; }
}