.classroom-session-active { overflow: hidden !important; }
body.classroom-session-active > :not(#classroom-join-root):not(script):not(style):not(link) {
  display: none !important;
}
.classroom-student {
  position: fixed;
  inset: 0;
  z-index: 7100;
  overflow: auto;
  background: #eef2f3;
  color: #17262c;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
.classroom-student * { box-sizing: border-box; letter-spacing: 0; }
.cs-shell { width: min(620px, 100%); min-height: 100%; margin: 0 auto; background: #fff; }
.cs-head { position: sticky; top: 0; z-index: 2; min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 18px; border-bottom: 1px solid #dce5e8; background: rgba(255,255,255,.97); }
.cs-head span { display: block; color: #167660; font-size: 12px; }
.cs-head strong { display: block; margin-top: 2px; font-size: 15px; }
.cs-presence { width: 10px; height: 10px; border-radius: 50%; background: #2ba484; box-shadow: 0 0 0 4px #e4f5f0; }
.cs-content { min-height: calc(100vh - 62px); padding: 24px 20px max(24px, env(safe-area-inset-bottom)); }
.cs-content h1 { margin: 8px 0 20px; font-size: 25px; line-height: 1.42; }
.cs-step, .cs-question-meta { color: #64767d; font-size: 13px; }
.cs-student-id { margin: -13px 0 22px; color: #64767d; }
.cs-field { display: grid; gap: 7px; margin: 0 0 15px; color: #53666e; font-size: 13px; }
.cs-field input { width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid #b9c8cd; border-radius: 5px; background: #fff; color: #17262c; font: inherit; font-size: 16px; }
.cs-field input:focus-visible, .cs-primary:focus-visible, .cs-back:focus-visible, .cs-option:focus-visible { outline: 3px solid rgba(27,137,111,.28); outline-offset: 2px; }
.cs-primary { width: 100%; min-height: 48px; padding: 11px 16px; border: 1px solid #14735f; border-radius: 5px; background: #14735f; color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.cs-primary:disabled { opacity: .48; cursor: not-allowed; }
.cs-back { min-height: 44px; margin: -10px 0 4px; padding: 8px 0; border: 0; background: transparent; color: #14735f; font: inherit; cursor: pointer; }
.cs-privacy, .cs-save-state { color: #718289; font-size: 12px; line-height: 1.6; text-align: center; }
.cs-message { min-height: 24px; margin: 14px 0 0; color: #64767d; text-align: center; }
.cs-message.is-error { color: #a63f3f; }
.cs-message.is-success { color: #14735f; }
.cs-loading, .cs-wait { min-height: 58vh; display: grid; place-items: center; align-content: center; text-align: center; }
.cs-loading span, .cs-wait > span { width: 34px; height: 34px; margin-bottom: 16px; border: 3px solid #d4e3df; border-top-color: #16826a; border-radius: 50%; animation: cs-spin .9s linear infinite; }
.cs-loading h1, .cs-wait h1 { margin-bottom: 6px; }
.cs-loading p, .cs-wait p { margin: 0; color: #6a7b82; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
.cs-question-meta { display: flex; justify-content: space-between; gap: 14px; }
.cs-question-meta b { color: #b26926; }
.cs-question-title { font-size: 22px !important; }
.cs-options { display: grid; gap: 10px; }
.cs-option { width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #c6d2d6; border-radius: 6px; background: #fff; color: #1b2b31; text-align: left; font: inherit; cursor: pointer; }
.cs-option b { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #aebec4; border-radius: 50%; }
.cs-option span { line-height: 1.5; }
.cs-option i { width: 16px; height: 16px; border: 1px solid #9dafb6; border-radius: 50%; }
.cs-option.is-selected { border-color: #24866f; background: #eaf6f2; }
.cs-option.is-selected b { border-color: #24866f; background: #24866f; color: #fff; }
.cs-option.is-selected i { border: 5px solid #24866f; }
.cs-option.is-correct { border-color: #218466; box-shadow: inset 3px 0 0 #218466; }
.cs-option:disabled { color: #53666d; cursor: default; }
.cs-submit { margin-top: 16px; }
.cs-locked, .cs-result { margin-top: 18px; padding: 15px 0; border-top: 1px solid #dce5e8; }
.cs-locked strong, .cs-result strong { font-size: 18px; }
.cs-locked p, .cs-result p, .cs-instructions { color: #586b73; line-height: 1.7; }
.cs-result.is-correct strong { color: #16775f; }
.cs-result.is-wrong strong { color: #a74b43; }
.cs-distribution { margin-top: 20px; padding-top: 18px; border-top: 1px solid #dce5e8; }
.cs-distribution h2 { margin: 0 0 14px; font-size: 17px; }
.cs-distribution > div { display: grid; grid-template-columns: 24px minmax(70px,1fr) auto; align-items: center; gap: 8px; min-height: 32px; font-size: 12px; }
.cs-distribution span { height: 8px; overflow: hidden; border-radius: 4px; background: #e7edef; }
.cs-distribution span i { display: block; height: 100%; background: #2c9c80; }
.cs-distribution em { color: #65777e; font-style: normal; }
@media (min-width: 621px) {
  .classroom-student { padding: 20px; }
  .cs-shell { min-height: calc(100vh - 40px); border: 1px solid #cad6da; }
  .cs-content { min-height: calc(100vh - 103px); padding: 30px 36px; }
}
@media (max-width: 360px) {
  .cs-content { padding-right: 14px; padding-left: 14px; }
  .cs-content h1 { font-size: 22px; }
  .cs-option { grid-template-columns: 32px minmax(0,1fr) 16px; padding-right: 9px; padding-left: 9px; }
}
@media (prefers-reduced-motion: reduce) { .cs-loading span, .cs-wait > span { animation: none; } }