:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202124;
  background: #fff;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; }
button, input, select { font: inherit; }
button, input, select, a { touch-action: manipulation; }
button, select { cursor: pointer; }
button:disabled { cursor: default; }
button { color: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid #2563eb; outline-offset: 2px;
}
[hidden] { display: none !important; }
.app-shell { max-width: 1200px; margin: 0 auto; padding: 24px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
h1 { font-size: 20px; line-height: 1.3; font-weight: 600; }
.subtitle, .mode, .remaining { color: #6b7280; font-size: 12px; }
.subtitle { margin-top: 3px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.text-button, .icon-button {
  border: 0; background: transparent; min-height: 44px; min-width: 44px; padding: 8px;
}
.text-button { color: #6b7280; }
#refresh { font-size: 22px; }
.icon-button { font-size: 24px; }
.icon-button:disabled { opacity: .25; }
.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.week-navigation { display: flex; align-items: center; gap: 2px; }
#week { border: 0; color: inherit; background: #fff; font-size: 16px; min-height: 44px; max-width: 220px; padding: 4px; }
.week-summary { display: flex; flex-wrap: wrap; gap: 16px; color: #6b7280; font-size: 12px; }
.week-summary strong { font-weight: 500; color: #202124; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid #e5e7eb; }
.calendar-day { min-width: 0; border-right: 1px solid #e5e7eb; }
.calendar-day:first-child { border-left: 1px solid #e5e7eb; }
.day-heading { padding: 12px 8px; text-align: center; font-size: 13px; font-weight: 400; border-bottom: 1px solid #e5e7eb; color: #6b7280; }
.day-heading span { color: #202124; font-weight: 500; margin-left: 4px; }
.day-heading.today, .day-heading.today span { color: #2563eb; }
.day-lessons { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.no-classes { color: #c1c5cd; text-align: center; padding: 8px; }
.lesson {
  width: 100%; min-height: 86px; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  text-align: left; padding: 8px; border: 1px solid #e0e3e8; border-radius: 4px; background: #fff;
}
.lesson.selected { border-color: #8daeea; background: #eff5ff; }
.lesson.predicted { border-style: dashed; }
.lesson.past { background: #f9fafb; }
.lesson.changed { border-color: #c28742; background: #fff8ed; }
.lesson-top { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.lesson-time { font-size: 12px; font-weight: 500; white-space: nowrap; }
.selection-mark { font-size: 15px; color: #9ca3af; }
.selected .selection-mark { color: #2563eb; }
.lesson-room, .lesson-availability { font-size: 11px; color: #6b7280; }
.lesson-room { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lesson-people { display: flex; flex-direction: column; gap: 2px; padding-top: 5px; }
.person-badge { display: flex; flex-wrap: wrap; gap: 3px; font-size: 11px; color: #6b7280; }
.person-badge.registered { color: #2563eb; }
.person-badge.blocked, .person-badge.review, .person-badge.expired, .person-badge.cancel_pending { color: #955f20; }
.status-dot { display: none; }
.review-label { font-size: 11px; color: #955f20; }
.remaining { margin-top: 14px; }
.error-banner { color: #a33224; background: #fff3f0; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }
.empty-week { padding: 24px 0; color: #6b7280; text-align: center; }
.login-shell { max-width: 340px; margin: 15vh auto; padding: 24px; }
.login-shell h1 { margin-bottom: 24px; }
.login-shell form { display: flex; flex-direction: column; gap: 8px; }
.login-shell input { border: 1px solid #d1d5db; border-radius: 4px; min-height: 44px; padding: 8px; font-size: 16px; }
.primary-button { min-height: 44px; padding: 8px 14px; border: 1px solid #2563eb; border-radius: 4px; background: #2563eb; color: white; }
.primary-button:disabled { opacity: .5; }
.form-error { font-size: 13px; color: #a33224; }
.form-error:empty { display: none; }
.initial-loading { padding: 40px; color: #6b7280; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); width: max-content; padding: 10px 16px; background: #202124; color: white; border-radius: 4px; z-index: 2; font-size: 13px; }
.toast.error { background: #973527; }
.review-dialog { border: 1px solid #d1d5db; border-radius: 6px; width: calc(100vw - 32px); max-width: 400px; padding: 24px; color: #202124; background: #fff; }
.review-dialog::backdrop { background: #0004; }
.review-dialog h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.review-dialog p { margin-bottom: 16px; }
.quiet { font-size: 13px; color: #6b7280; }
.dialog-actions { display: flex; flex-direction: column; gap: 8px; }
.outline-button { min-height: 44px; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; }
.skip-link { position: fixed; top: -60px; left: 8px; background: #202124; color: white; padding: 8px 16px; z-index: 3; }
.skip-link:focus { top: 8px; }
@media (hover: hover) and (pointer: fine) {
  .lesson:not(:disabled):hover { border-color: #9ca3af; }
  .lesson.selected:not(:disabled):hover { border-color: #2563eb; }
  .text-button:hover, .icon-button:not(:disabled):hover { background: #f5f6f8; }
}
@media (max-width: 900px) {
  .app-shell { padding: 16px; }
  .calendar-toolbar { flex-wrap: wrap; }
  .day-lessons { padding: 5px; gap: 6px; }
  .lesson { padding: 6px; }
  .lesson-time { font-size: 11px; }
  .selection-mark { font-size: 13px; }
}
@media (max-width: 700px) {
  .topbar { align-items: flex-start; margin-bottom: 16px; }
  .header-actions { gap: 0; flex-wrap: wrap; justify-content: flex-end; }
  .mode { width: 100%; text-align: right; font-size: 11px; }
  .subtitle { max-width: 190px; }
  .calendar-toolbar { gap: 6px; }
  .week-navigation { width: 100%; justify-content: space-between; }
  #week { min-width: 0; font-size: 16px; padding: 2px; }
  .week-summary { padding: 4px 0 12px; gap: 14px; }
  .calendar-grid { display: block; }
  .calendar-day, .calendar-day:first-child { border: 0; }
  .empty-day { display: none; }
  .day-heading { text-align: left; padding: 12px 0 4px; border: 0; }
  .day-heading span { margin-left: 2px; }
  .day-lessons { padding: 4px 0 12px; gap: 6px; }
  .lesson { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; min-height: 58px; padding: 8px 10px; }
  .lesson-top { grid-column: 1; grid-row: 1; }
  .lesson-time { font-size: 13px; }
  .lesson-availability { grid-column: 2; grid-row: 1; text-align: right; font-size: 12px; }
  .lesson-room { grid-column: 1; grid-row: 2; font-size: 12px; }
  .lesson-people { grid-column: 2; grid-row: 2 / span 2; align-items: flex-end; padding: 0; }
  .person-badge { font-size: 12px; }
  .review-label { grid-column: 1; grid-row: 3; }
  .remaining { margin-top: 4px; }
}