/* The Language Page — class platform (My class, live quiz, class teacher view). Uses the lab's design tokens only. */
.cls-page { display: grid; gap: var(--s-4); max-width: 52rem; }
.cls-head h1 { margin: 0 0 var(--s-2); }
.cls-card { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
.cls-card h2, .cls-card h3, .cls-card h4 { margin: 0; }
.cls-card label { font-weight: 700; }
.cls-card input, .cls-card select { min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; background: var(--bg); color: var(--ink); }
.cls-card .btn { min-height: 44px; }
.cls-error { margin: 0; color: var(--brand-ink); font-weight: 700; min-height: 1.2em; }
.cls-key { border-color: var(--brand); background: var(--brand-soft); }
.cls-keybig { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.12em; }
.cls-list { display: grid; gap: var(--s-2); margin: 0; padding-left: 1.2rem; }
.cls-done { color: var(--brand-ink); font-weight: 700; }
.cls-new { color: var(--brand-ink); font-weight: 700; }
.cls-note audio, .cls-list audio { width: 100%; max-width: 24rem; vertical-align: middle; }
.cls-options { display: grid; gap: var(--s-2); }
.cls-option { min-height: 48px; padding: var(--s-3) var(--s-4); border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.cls-option:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.cls-option.is-chosen { border-color: var(--brand); background: var(--brand-soft); }
.cls-option:disabled { cursor: default; }
.cls-right, .cls-try { margin: 0; font-weight: 800; }
.cls-table { width: 100%; border-collapse: collapse; }
.cls-table th, .cls-table td { padding: var(--s-2); border-bottom: 1px solid var(--line); text-align: start; }
.cls-qr svg { width: 160px; height: 160px; }
@media (max-width: 40rem) { .cls-table { display: block; overflow-x: auto; } }