main.narrow { max-width: 720px; margin: 0 auto; }
body.student .card { padding: 16px 20px; }
.day-label { color: #1a56db; font-weight: 600; margin-bottom: 8px; }
.question { font-size: 17px; line-height: 1.7; white-space: pre-wrap; }
body.student textarea { min-height: 140px; font-size: 15px; margin: 8px 0; }
body.student label { font-weight: 600; }
.row { display: flex; align-items: center; gap: 8px; }
button.big { padding: 10px 22px; font-size: 15px; }
.records { list-style: none; padding: 0; }
.records li { background: #fff; border: 1px solid #e4e7eb; border-radius: 8px; padding: 10px 14px; margin: 8px 0; }
.records .meta { color: #616e7c; font-size: 12px; margin-bottom: 4px; }
.records .ans { white-space: pre-wrap; word-break: break-word; }
#result.ok { border-color: #31c48d; background: #f3faf7; }
#result.err { border-color: #f98080; background: #fdf2f2; }
@media (max-width: 600px) {
  header { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  main { padding: 12px 14px 40px; }
}

.calendar { list-style: none; padding: 0; margin: 0; }
.calendar li { background: #fff; border: 1px solid #e4e7eb; border-left: 4px solid #cbd2d9; border-radius: 6px; padding: 8px 12px; margin: 6px 0; }
.calendar li.checked { border-left-color: #0e9f6e; }
.calendar li.missed { border-left-color: #f05252; }
.calendar li.pending { border-left-color: #f0b429; background: #fffbea; }
.calendar li.upcoming { color: #7b8794; }
.calendar li.today { box-shadow: 0 0 0 2px #1a56db33; }
.cal-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.cal-date { font-weight: 600; min-width: 92px; }
.cal-day { color: #616e7c; min-width: 70px; }
.cal-course { flex: 1; min-width: 140px; }
.st { font-size: 12px; padding: 1px 8px; border-radius: 10px; white-space: nowrap; }
.st.checked { background: #def7ec; color: #03543f; }
.st.missed { background: #fde8e8; color: #9b1c1c; }
.st.pending { background: #fdf6b2; color: #723b13; }
.st.upcoming { background: #f1f3f5; color: #616e7c; }
.calendar details { margin-top: 6px; }
.calendar summary { cursor: pointer; color: #1a56db; font-size: 13px; }
.week { margin: 10px 0 16px; }
.week h3 { font-size: 14px; margin: 0 0 6px; }
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.course { background: #fff; border: 1px solid #e4e7eb; border-top: 3px solid #1a56db; border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.course.lab { background: #eef4fd; }
.course.final { border-top-color: #ff8a4c; background: #fff8f1; }
.course.today { box-shadow: 0 0 0 2px #1a56db55; }
.course .cdate { color: #1a56db; font-weight: 600; }
.course .ctitle { font-weight: 600; margin: 2px 0; }
.course .cdetail, .course .ctime { color: #616e7c; font-size: 12px; }
.legend { font-size: 12px; color: #616e7c; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.sw { display: inline-block; width: 14px; height: 10px; border: 1px solid #1a56db; margin-right: 4px; vertical-align: middle; }
.sw.lab { background: #eef4fd; }
.sw.final { border-color: #ff8a4c; background: #fff8f1; }