:root { --fg: #1d2330; --muted: #5b6475; --line: #d7dce5; --bg: #f6f7fa; --card: #fff; --accent: #1f5fbf; --warn: #a33b00; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, "Malgun Gothic", sans-serif; color: var(--fg); background: var(--bg); }
.date-tone { color:#000; }
.date-tone.date-saturday { color:#245bb2; }
.date-tone.date-holiday { color:#bc3030; }
header { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
h1 { font-size: 1.2rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 0 0 8px; }
h3 { font-size: 1rem; margin: 16px 0 8px; }
nav { display: flex; flex-wrap: wrap; gap: 6px; }
nav[hidden] { display: none; }
main { max-width: 1100px; margin: 0 auto; padding: 0 16px 48px; }
section { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 14px 0; }
button { font: inherit; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--fg); cursor: pointer; min-height: 36px; }
a.button { display: inline-block; padding: 6px 12px; border-radius: 6px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button[aria-current="page"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #7aa7ef; outline-offset: 1px; }
input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid #aab2c0; border-radius: 6px; max-width: 100%; }
textarea { width: 100%; min-height: 90px; }
label { display: block; margin: 8px 0 4px; font-weight: 600; }
label.inline { display: inline-flex; gap: 6px; align-items: center; font-weight: normal; margin-right: 14px; }
fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.muted { color: var(--muted); font-size: .92rem; }
.warn { color: var(--warn); }
#msg { max-width: 1100px; margin: 8px auto 0; padding: 0 16px; min-height: 1.5em; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .9rem; color: var(--muted); font-weight: 600; }
.code { font: 700 2.4rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .12em; margin: 8px 0; }
.items { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
ul.plain { list-style: none; padding: 0; margin: 4px 0; }
ul.plain li { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.asg { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
@media (max-width: 640px) { .code { font-size: 1.8rem; } th, td { padding: 4px; } }

.test-only-banner{margin:10px auto;max-width:1100px;padding:10px 16px;border-left:4px solid #92651d;background:#fff5df;color:#563b16;font-weight:600}
.parent-invite{border-color:#cbd9d1;background:#fbfcfa}.parent-invite-card{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#f8faf8}.invite-url{display:block;max-width:100%;overflow-wrap:anywhere;color:var(--accent)}.invite-actions{margin-top:10px}.invite-actions .button{min-height:36px}.parent-revoke{margin-left:10px}.parent-invite .warn{margin:10px 0}
.student-name, .student-ref, .student-actions { white-space: nowrap; }
.student-ref, .student-ref-detail { font: 600 .86rem ui-monospace, Consolas, monospace; letter-spacing: .06em; }
.student-detail-button { white-space: nowrap; min-width: 5.5rem; }
.student-actions { min-width: 7rem; }
.due-item { display: block; white-space: nowrap; }
.student-ref-detail { color: var(--muted); }