.fl-classroom {
  --cl-bg: #11181e;
  --cl-panel: #19232b;
  --cl-panel-2: #202c35;
  --cl-line: #354550;
  --cl-text: #eef5f7;
  --cl-muted: #9eafb8;
  --cl-green: #35c6a5;
  --cl-yellow: #efb85c;
  --cl-red: #e57575;
  min-height: 100%;
  background: var(--cl-bg);
  color: var(--cl-text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
.fl-classroom * { box-sizing: border-box; }
.fl-classroom button,
.fl-classroom input,
.fl-classroom select,
.fl-classroom textarea { font: inherit; letter-spacing: 0; }
.cl-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--cl-line); background: #141d23; }
.cl-toolbar h3 { margin: 0; font-size: 18px; }
.cl-toolbar__actions,
.cl-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cl-btn { min-height: 38px; padding: 8px 13px; border: 1px solid var(--cl-line); border-radius: 6px; background: var(--cl-panel-2); color: var(--cl-text); cursor: pointer; }
.cl-btn:hover { border-color: #6b818e; background: #293943; }
.cl-btn:focus-visible,
.cl-field:focus-visible { outline: 2px solid var(--cl-green); outline-offset: 2px; }
.cl-btn--primary { border-color: #2d947c; background: #217561; }
.cl-btn--warn { border-color: #976f33; color: #ffdc9c; }
.cl-btn--danger { border-color: #975555; color: #ffc0c0; }
.cl-btn[disabled] { opacity: .5; cursor: not-allowed; }
.cl-layout { display: grid; grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); min-height: min(720px, calc(100vh - 230px)); }
.cl-sidebar { overflow: auto; border-right: 1px solid var(--cl-line); background: #141d23; }
.cl-session { width: 100%; min-height: 82px; padding: 12px 14px; border: 0; border-bottom: 1px solid #2b3942; background: transparent; color: var(--cl-text); text-align: left; cursor: pointer; }
.cl-session:hover,
.cl-session.is-active { background: #20303a; }
.cl-session.is-active { box-shadow: inset 3px 0 0 var(--cl-green); }
.cl-session strong { display: block; line-height: 1.35; }
.cl-session small { display: flex; gap: 8px; margin-top: 7px; color: var(--cl-muted); }
.cl-main { min-width: 0; padding: 15px; overflow: auto; }
.cl-empty { min-height: 360px; display: grid; place-items: center; color: var(--cl-muted); text-align: center; }
.cl-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.cl-head h4 { margin: 0 0 5px; font-size: 20px; }
.cl-head p { margin: 0; color: var(--cl-muted); }
.cl-code { display: inline-flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid #59707d; border-radius: 5px; background: #0f171c; font: 700 18px ui-monospace, monospace; letter-spacing: 2px; }
.cl-summary { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 9px; margin: 14px 0; }
.cl-metric { min-height: 70px; padding: 11px 12px; border: 1px solid var(--cl-line); border-radius: 6px; background: var(--cl-panel); }
.cl-metric strong { display: block; font-size: 23px; color: #fff; }
.cl-metric span { color: var(--cl-muted); font-size: 12px; }
.cl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; align-items: start; }
.cl-section { margin-top: 15px; }
.cl-section h5 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font-size: 15px; }
.cl-qr { display: grid; place-items: center; min-height: 220px; padding: 12px; border: 1px solid var(--cl-line); border-radius: 6px; background: #fff; color: #203039; }
.cl-qr canvas,
.cl-qr img { max-width: 190px; max-height: 190px; }
.cl-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; border: 1px solid var(--cl-line); border-radius: 6px; background: var(--cl-panel); }
.cl-field-wrap { display: grid; gap: 5px; color: var(--cl-muted); font-size: 12px; }
.cl-field-wrap.is-wide { grid-column: 1 / -1; }
.cl-field { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid #41535f; border-radius: 5px; background: #10171c; color: var(--cl-text); }
textarea.cl-field { min-height: 74px; resize: vertical; }
.cl-table-wrap { overflow: auto; border: 1px solid var(--cl-line); border-radius: 6px; }
.cl-table { width: 100%; min-width: 700px; border-collapse: collapse; }
.cl-table th,
.cl-table td { padding: 9px 10px; border-bottom: 1px solid #2c3942; text-align: left; font-size: 13px; }
.cl-table th { background: #1b252d; color: var(--cl-muted); }
.cl-table tr:last-child td { border-bottom: 0; }
.cl-presence { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 7px; border: 1px solid #667984; border-radius: 4px; color: #ccd8dd; font-size: 12px; }
.cl-presence--online { border-color: #328c76; color: #8ce2ca; }
.cl-presence--idle { border-color: #a17438; color: #ffd28c; }
.cl-presence--offline { color: #96a3a9; }
.cl-progress { width: 100px; height: 7px; overflow: hidden; border-radius: 4px; background: #0d1418; }
.cl-progress span { display: block; height: 100%; background: var(--cl-green); }
.cl-message { min-height: 22px; color: var(--cl-muted); font-size: 13px; }
.cl-row-actions { display: flex; gap: 6px; flex-wrap: wrap; min-width: 180px; }
.cl-row-actions .cl-btn { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.cl-question-summary { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 8px; margin-bottom: 12px; }
.cl-question-summary > div { min-height: 66px; padding: 10px 11px; border: 1px solid var(--cl-line); background: var(--cl-panel); }
.cl-question-summary strong { display: block; color: #fff; font-size: 21px; }
.cl-question-summary span { color: var(--cl-muted); font-size: 12px; }
.cl-question-status { color: var(--cl-yellow); font-size: 12px; }
.cl-question-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr); gap: 14px; align-items: start; }
.cl-question-grid h6 { margin: 0 0 10px; color: var(--cl-text); font-size: 14px; }
.cl-answer-distribution { padding: 13px; border: 1px solid var(--cl-line); background: var(--cl-panel); }
.cl-answer-bar { min-height: 34px; display: grid; grid-template-columns: 22px minmax(80px, 1fr) 105px; align-items: center; gap: 8px; font-size: 12px; }
.cl-answer-bar span { height: 9px; overflow: hidden; border-radius: 4px; background: #0d1418; }
.cl-answer-bar span i { display: block; height: 100%; background: var(--cl-green); }
.cl-answer-bar em { color: var(--cl-muted); font-style: normal; text-align: right; }
.cl-answer-filters { display: flex; gap: 6px; margin-bottom: 8px; }
.cl-answer-filters .cl-btn { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.cl-answer-table { min-width: 600px; }
.cl-question-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cl-modal { position: fixed; inset: 0; z-index: 5400; display: grid; place-items: center; padding: 18px; background: rgba(4, 8, 11, .82); }
.cl-dialog { width: min(680px, 100%); max-height: calc(100vh - 36px); overflow: auto; border: 1px solid #526771; border-radius: 7px; background: #18232a; color: var(--cl-text); }
.cl-dialog__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cl-line); }
.cl-dialog__head h4 { margin: 0; }
.cl-dialog__body { padding: 16px; }
.cl-dialog__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--cl-line); }

.classroom-join { position: fixed; inset: 0; z-index: 7000; display: grid; place-items: center; padding: 16px; background: #eef3f4; color: #152329; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.classroom-join * { box-sizing: border-box; }
.classroom-join__panel { width: min(540px, 100%); max-height: calc(100vh - 32px); overflow: auto; border: 1px solid #cbd6da; border-radius: 7px; background: #fff; box-shadow: 0 22px 65px rgba(31, 52, 61, .18); }
.classroom-join__head { padding: 18px 20px; border-bottom: 1px solid #dfe6e9; }
.classroom-join__head strong { display: block; color: #14735f; font-size: 13px; }
.classroom-join__head h2 { margin: 4px 0 0; font-size: 22px; letter-spacing: 0; }
.classroom-join__body { display: grid; gap: 13px; padding: 20px; }
.classroom-join .cl-field-wrap { color: #5b6c74; }
.classroom-join .cl-field { border-color: #b9c7cd; background: #fff; color: #152329; }
.classroom-join .cl-btn { border-color: #aebec5; background: #f7f9fa; color: #1c2e35; }
.classroom-join .cl-btn--primary { border-color: #14735f; background: #14735f; color: #fff; }
.classroom-join__identity { padding: 10px 12px; border-left: 3px solid #2c9b82; background: #edf8f5; }
.classroom-task__type { color: #8a621f; font-size: 12px; }
.classroom-task__title { margin: 4px 0 6px; font-size: 21px; }
.classroom-task__text { margin: 0; color: #566a72; line-height: 1.65; }

@media (max-width: 900px) {
  .cl-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .cl-summary { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
  .cl-grid { grid-template-columns: 1fr; }
  .cl-qr { min-height: 170px; }
  .cl-question-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cl-layout { display: block; min-height: 0; }
  .cl-sidebar { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--cl-line); }
  .cl-session { min-width: 210px; border-right: 1px solid #2b3942; }
  .cl-main { padding: 11px; }
  .cl-head { flex-direction: column; }
  .cl-form { grid-template-columns: 1fr; }
  .cl-field-wrap.is-wide { grid-column: 1; }
  .cl-question-summary { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
  .cl-question-form { grid-template-columns: 1fr; }
}