/* q-cx-design-classroom · 课堂互动浅色 UI（投影可读：字号 ≥ 普通面板 1.25×） */
:root {
  --cx-bg: #FFFFFF;
  --cx-card: #FFFFFF;
  --cx-ink: #1F1E1D;
  --cx-muted: #6B6B70;
  --cx-faint: #9C9CA3;
  --cx-line: #E5E5E7;
  --cx-soft: #ECECEE;
  --cx-solid: #1F1E1D;
  --cx-danger: #C2410C;
  --cx-ok: #1E7D45;
  --cx-blue: #4285F4;
  --cx-red: #EA4335;
  --cx-yellow: #FBBC04;
  --cx-green: #34A853;
  --cx-shadow: 0 1px 2px rgb(0 0 0 / .06);
  --cx-radius-lg: 24px;
  --cx-radius: 16px;
  --cx-font: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Noto Sans SC", sans-serif;
  --cx-serif: "Songti SC", "Noto Serif SC", Georgia, serif;
}

/* —— 课堂工具菜单：4 大卡 —— */
#classroomToolsMenu.cx-tools-menu {
  position: absolute;
  left: 3.5rem;
  top: 7rem;
  z-index: 40;
  width: min(22rem, calc(100vw - 4rem));
  padding: 1rem;
  background: var(--cx-card);
  color: var(--cx-ink);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius-lg);
  box-shadow: var(--cx-shadow);
  font-family: var(--cx-font);
  font-size: calc(15px * 1.25);
  line-height: 1.4;
  backdrop-filter: none;
}
#classroomToolsMenu.cx-tools-menu.hidden { display: none !important; }
.cx-tools-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .75rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--cx-line);
}
.cx-tools-head h3 {
  margin: 0;
  font-family: var(--cx-serif);
  font-weight: 400;
  font-size: calc(16px * 1.25);
  color: var(--cx-ink);
}
.cx-tools-close {
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--cx-line); background: var(--cx-soft);
  color: var(--cx-muted); cursor: pointer; font-size: 18px; line-height: 1;
}
.cx-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.cx-tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  min-height: 5.5rem;
  padding: .9rem 1rem .9rem 1.1rem;
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  background: var(--cx-card);
  box-shadow: var(--cx-shadow);
  cursor: pointer;
  text-align: left;
  color: var(--cx-ink);
  font-family: var(--cx-font);
  transition: background .15s ease;
}
.cx-tool-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}
.cx-tool-card[data-cx-tool="rollcall"]::before { background: var(--cx-blue); }
.cx-tool-card[data-cx-tool="timer"]::before { background: var(--cx-red); }
.cx-tool-card[data-cx-tool="poll"]::before { background: var(--cx-yellow); }
.cx-tool-card[data-cx-tool="group"]::before { background: var(--cx-green); }
.cx-tool-card:hover { background: var(--cx-soft); }
.cx-tool-card .cx-tool-title {
  font-size: calc(15px * 1.25);
  font-weight: 600;
}
.cx-tool-card .cx-tool-desc {
  font-size: calc(13px * 1.25);
  color: var(--cx-muted);
}

/* —— 可拖计时器浮窗 —— */
#cxTimerFloat {
  position: fixed;
  z-index: 80;
  min-width: 220px;
  padding: .85rem 1rem;
  background: var(--cx-card);
  color: var(--cx-ink);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow);
  font-family: var(--cx-font);
  user-select: none;
  touch-action: none;
}
#cxTimerFloat.hidden { display: none !important; }
#cxTimerFloat.is-expired #cxTimerDisplay { color: var(--cx-danger); }
.cx-timer-row {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
#cxTimerDisplay {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 300;
  font-size: 40px;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--cx-ink);
}
.cx-timer-actions { display: flex; gap: .35rem; }
.cx-timer-actions button {
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--cx-line); background: var(--cx-soft);
  color: var(--cx-ink); cursor: pointer; font-size: 14px;
}
.cx-timer-presets {
  display: flex; gap: .35rem; margin-top: .65rem; flex-wrap: wrap;
}
.cx-timer-presets button {
  flex: 1;
  min-width: 4rem;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--cx-line);
  background: var(--cx-card);
  color: var(--cx-muted);
  font-size: 12px;
  cursor: pointer;
}
.cx-timer-presets button.is-on {
  background: var(--cx-solid); color: #fff; border-color: var(--cx-solid);
}

/* —— 点名 / 投票 / 分组 轻面板 —— */
.cx-pop {
  position: fixed; z-index: 85; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(22rem, calc(100vw - 2rem));
  padding: 1.25rem;
  background: var(--cx-card); color: var(--cx-ink);
  border: 1px solid var(--cx-line); border-radius: var(--cx-radius-lg);
  box-shadow: var(--cx-shadow); font-family: var(--cx-font);
}
.cx-pop.hidden { display: none !important; }
.cx-pop h3 { margin: 0 0 .5rem; font-family: var(--cx-serif); font-weight: 400; font-size: calc(18px * 1.1); }
.cx-pop p { margin: 0 0 1rem; color: var(--cx-muted); font-size: 13px; }
.cx-pop-result {
  font-size: calc(28px * 1.1); font-weight: 600; text-align: center;
  padding: 1rem; border-radius: var(--cx-radius); background: var(--cx-soft); margin-bottom: 1rem;
}
.cx-pop-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.cx-btn {
  height: 48px; padding: 0 1.25rem; border-radius: 999px;
  border: 1px solid var(--cx-line); background: var(--cx-soft);
  color: var(--cx-ink); font-size: 15px; cursor: pointer; font-family: var(--cx-font);
}
.cx-btn-solid { background: var(--cx-solid); color: #fff; border-color: var(--cx-solid); }

/* —— 练习编辑器 —— */
#exerciseEditorModal.cx-modal {
  position: fixed; inset: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center;
  background: rgb(0 0 0 / .45); backdrop-filter: blur(6px); padding: 1rem;
}
#exerciseEditorModal.cx-modal.hidden { display: none !important; }
#exerciseEditorModal .exercise-editor-panel,
#exerciseEditorModal .cx-dialog {
  width: min(28rem, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
  padding: 1.35rem 1.5rem;
  background: var(--cx-card); color: var(--cx-ink);
  border: 1px solid var(--cx-line); border-radius: var(--cx-radius-lg);
  box-shadow: var(--cx-shadow); font-family: var(--cx-font);
}
#exerciseEditorModal .cx-dialog-title {
  font-family: var(--cx-serif); font-weight: 400; font-size: 20px; margin: 0;
}
#exerciseEditorModal .cx-dialog-sub { margin: .25rem 0 0; color: var(--cx-muted); font-size: 13px; }
.cx-seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--cx-soft); border-radius: 999px; margin: 1rem 0 .75rem;
  width: 100%; box-sizing: border-box;
}
.cx-seg button {
  flex: 1; height: 40px; border: 0; border-radius: 999px;
  background: transparent; color: var(--cx-muted); cursor: pointer; font-size: 14px;
}
.cx-seg button.is-on { background: var(--cx-card); color: var(--cx-ink); box-shadow: var(--cx-shadow); font-weight: 600; }
.cx-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .85rem; font-size: 13px; color: var(--cx-muted); }
.cx-field input, .cx-field textarea, .cx-field select {
  height: 52px; padding: 0 1rem; border-radius: 999px;
  border: 1px solid var(--cx-line); background: var(--cx-card); color: var(--cx-ink);
  font-size: 15px; font-family: var(--cx-font); outline: none;
}
.cx-field textarea { height: auto; min-height: 88px; border-radius: 16px; padding: .85rem 1rem; resize: vertical; }
.cx-options { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.cx-option-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .35rem .25rem;
}
.cx-option-dot {
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  border: 2px solid var(--cx-line); background: var(--cx-card); cursor: pointer;
}
.cx-option-row.is-correct .cx-option-dot {
  background: var(--cx-ok); border-color: var(--cx-ok);
  box-shadow: inset 0 0 0 3px #fff;
}
.cx-option-row input {
  flex: 1; height: 48px; border-radius: 999px; border: 1px solid var(--cx-line);
  padding: 0 1rem; font-size: 15px; background: var(--cx-card); color: var(--cx-ink);
}
.cx-add-option {
  height: 40px; border-radius: 999px; border: 1px dashed var(--cx-line);
  background: transparent; color: var(--cx-muted); cursor: pointer; width: 100%;
}
.cx-editor-actions {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem;
}
.cx-compat-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; margin: -1px !important; }

/* —— 布置作业 —— */
#hwAssignModal.cx-modal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgb(0 0 0 / .45); backdrop-filter: blur(6px);
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
           max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  box-sizing: border-box;
}
#hwAssignModal.cx-modal.hidden { display: none !important; }
#hwAssignModal .cx-dialog {
  width: min(26rem, 100%);
  max-height: min(90dvh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  box-sizing: border-box;
  padding: 1.35rem 1.5rem;
  background: var(--cx-card); color: var(--cx-ink);
  border: 1px solid var(--cx-line); border-radius: var(--cx-radius-lg);
  box-shadow: var(--cx-shadow); font-family: var(--cx-font);
}
#hwAssignModal .cx-dialog-title {
  font-family: var(--cx-serif); font-weight: 400; font-size: 20px; margin: 0;
}
#hwAssignModal .cx-share-block {
  display: flex; flex-direction: column; align-items: center; gap: .85rem; padding: .5rem 0 1rem;
}
#hwAssignQr {
  width: 84px; height: 84px; border-radius: 12px; overflow: hidden;
  background: var(--cx-soft); display: flex; align-items: center; justify-content: center;
}
#hwAssignQr svg { width: 84px; height: 84px; display: block; }

/* 批改码仅作兼容钩子，视觉上只展示一处分享码（避免 A7K2 叠两行） */
#hwAssignGradeCode {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  border: 0 !important; white-space: nowrap !important;
}
#hwAssignShareCode {
  font-size: 20px; letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700; color: var(--cx-ink); text-align: center;
}
#hwAssignGradeCode, #hwAssignShareCode {
  font-size: 20px; letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700; color: var(--cx-ink); text-align: center;
}
#hwAssignModal input, #hwAssignModal select {
  height: 52px; width: 100%; box-sizing: border-box;
  padding: 0 1rem; border-radius: 999px;
  border: 1px solid var(--cx-line); background: var(--cx-card); color: var(--cx-ink);
  font-size: 15px; outline: none;
}
#hwAssignModal .cx-btn-solid { width: 100%; margin-top: .35rem; }

@media (max-width: 480px) {
  #classroomToolsMenu.cx-tools-menu {
    left: 0; right: 0; top: auto; bottom: 0; width: auto;
    max-width: none; border-radius: 16px 16px 0 0;
  }
  .cx-tools-grid { grid-template-columns: 1fr; }
  #cxTimerDisplay { font-size: 36px; }
  #hwAssignModal.cx-modal {
    align-items: flex-end;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  #hwAssignModal .cx-dialog {
    width: 100%;
    max-height: min(85dvh, 720px);
    border-radius: 16px 16px 0 0;
  }
}

#hwAssignFallback.cx-fallback:not(.hidden) {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
#hwAssignShareCode {
  font-size: 20px !important;
  letter-spacing: 0.22em !important;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  color: var(--cx-ink);
  text-align: center;
}
#hwAssignShareCode:empty { display: none; }
#exerciseEditorModal .exercise-editor-panel { max-width: 28rem; }