:root { color-scheme: light dark; --bg: #ffffff; --text: #111; --border: #ddd; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }
.container { max-width: 900px; margin: 40px auto; padding: 0 16px; }
h1 { margin: 0 0 16px; font-size: 24px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border: 1px solid var(--border); text-align: center; }
thead th { background: #f6f8fa; text-align: center; }
tbody tr:nth-child(even) { background: #fafbfc; }
.grade { font-weight: 600; }
.grade.A { color: #2e7d32; }
.grade.B { color: #558b2f; }
.grade.C { color: #2d25a1; }
.grade.D { color: #ef6c00; }
.grade.F { color: #c62828; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1115; --text: #e6e6e6; --border: #2a2f3a; }
  thead th { background: #1b1f2a; }
  tbody tr:nth-child(even) { background: #181c24; }
}