:root{
  --primary:#2f6bff;
  --primary-dark:#1d4ed8;
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#1a2233;
  --muted:#7b869c;
  --border:#e4e9f2;
  --up:#e5484d;    /* 涨/优 红 */
  --down:#16a34a;  /* 跌/差 绿 */
  --warn:#f59e0b;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;
}
.page{display:none;min-height:100vh}
.page.active{display:block}

/* ---------- 登录 ---------- */
.login-wrap{max-width:400px;margin:0 auto;padding:56px 24px 32px}
.brand{text-align:center;margin-bottom:32px}
.logo{
  width:64px;height:64px;margin:0 auto 16px;border-radius:18px;
  background:linear-gradient(135deg,var(--primary),#5b8cff);
  color:#fff;font-size:32px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(47,107,255,.3);
}
.brand h1{font-size:22px;font-weight:600;letter-spacing:.5px}
.brand .sub{color:var(--muted);font-size:13px;margin-top:6px}
.page-title{text-align:center;margin-bottom:24px;font-size:20px}

.role-tabs{display:flex;background:#e9edf7;border-radius:12px;padding:4px;margin-bottom:20px}
.role-tab{
  flex:1;padding:10px;border:0;background:transparent;border-radius:9px;
  font-size:15px;color:var(--muted);cursor:pointer;transition:.2s;font-weight:500;
}
.role-tab.active{background:#fff;color:var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.06)}

.form{display:flex;flex-direction:column;gap:12px}
.form input,.form textarea{
  width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:12px;
  font-size:15px;background:#fff;outline:none;transition:.2s;font-family:inherit;
}
.form input:focus,.form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(47,107,255,.1)}
.fld-label{font-size:13px;color:var(--muted);margin-top:4px}
.btn-primary{
  padding:14px;border:0;border-radius:12px;background:var(--primary);color:#fff;
  font-size:16px;font-weight:600;cursor:pointer;transition:.2s;font-family:inherit;
}
.btn-primary:hover{background:var(--primary-dark)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{
  padding:12px;border:0;border-radius:12px;background:transparent;color:var(--muted);
  font-size:14px;cursor:pointer;font-family:inherit;
}
.btn-ghost:hover{color:var(--primary)}
.role-pick{display:flex;gap:20px;padding:6px 4px;font-size:14px;color:var(--muted)}
.role-pick label{display:flex;align-items:center;gap:6px;cursor:pointer}
.extra{display:block}
.msg{min-height:20px;text-align:center;font-size:13px;color:var(--down);margin-top:8px}
.msg.err{color:var(--up)}

/* ---------- 顶栏 ---------- */
.topbar{
  height:56px;background:#fff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;
  position:sticky;top:0;z-index:50;
}
.tb-left{font-weight:600;display:flex;align-items:center;gap:8px}
.tb-logo{color:var(--primary);font-size:20px}
.tb-right{display:flex;align-items:center;gap:12px}
.uname{font-size:14px;color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-logout,.btn-back{
  padding:6px 12px;border:1px solid var(--border);background:#fff;border-radius:8px;
  font-size:13px;color:var(--muted);cursor:pointer;font-family:inherit;
}
.btn-logout:hover,.btn-back:hover{color:var(--primary);border-color:var(--primary)}

/* ---------- 容器 ---------- */
.container{max-width:1080px;margin:0 auto;padding:16px}
/* 投屏模式：作业墙/数据大屏标签页下放宽主容器，画面占满大屏 */
.container.projection{max-width:1720px}

/* ---------- 标签页 ---------- */
.tabs{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:2px}
/* 「实时」指示：说明教师端已开启自动同步，学生提交后会自己更新 */
.live-dot{
  display:inline-flex;align-items:center;gap:5px;margin-left:auto;align-self:center;
  font-size:12px;color:#12a150;white-space:nowrap;padding-right:2px;
}
.live-dot i{
  width:7px;height:7px;border-radius:50%;background:#12a150;display:block;
  box-shadow:0 0 0 0 rgba(18,161,80,.6);animation:livePulse 2s infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(18,161,80,.55)}
  70%{box-shadow:0 0 0 7px rgba(18,161,80,0)}
  100%{box-shadow:0 0 0 0 rgba(18,161,80,0)}
}
.tab{
  padding:9px 18px;border:0;border-radius:10px;background:#fff;color:var(--muted);
  font-size:14px;cursor:pointer;white-space:nowrap;transition:.2s;font-family:inherit;font-weight:500;
}
.tab.active{background:var(--primary);color:#fff}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* 窄屏：页签换行显示，避免「作业墙」被裁掉（手机端教师常用） */
@media (max-width:640px){
  .tabs{flex-wrap:wrap;gap:6px;overflow-x:visible}
  .tab{padding:8px 12px;font-size:13px}
  #teacherPage .tabs .live-dot{margin-left:0;order:99}
}

/* ---------- 统计卡片 ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat-card{
  background:var(--card);border-radius:14px;padding:18px;
  box-shadow:0 2px 10px rgba(20,40,80,.05);
}
.stat-card .label{font-size:13px;color:var(--muted)}
.stat-card .value{font-size:28px;font-weight:700;margin-top:6px;color:var(--primary)}
.stat-card .value.small{font-size:22px}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border-radius:14px;padding:18px;margin-bottom:16px;box-shadow:0 2px 10px rgba(20,40,80,.05)}
.card h3{font-size:15px;font-weight:600;margin-bottom:14px}

/* ---------- 柱状图 ---------- */
.bar-chart{display:flex;flex-direction:column;gap:10px}
.bar-row{display:flex;align-items:center;gap:10px;font-size:13px}
.bar-row .bl{width:64px;color:var(--muted);flex-shrink:0}
.bar-track{flex:1;height:26px;background:#f0f3f9;border-radius:7px;overflow:hidden}
.bar-fill{height:100%;border-radius:7px;transition:width .6s ease;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-size:12px;font-weight:600}
.bar-row .bv{width:48px;text-align:right;font-weight:600;flex-shrink:0}

/* ---------- 迷你表格 ---------- */
/* 数据大屏表格放大：投屏全班可读 */
#taskStat.mini-table,#taskStat table.mini-table{font-size:19px}
#taskStat .mini-table th{font-size:16px;padding:12px 14px}
#taskStat .mini-table td{padding:14px}
.mini-table{width:100%;font-size:13px;border-collapse:collapse}
.mini-table th{text-align:left;color:var(--muted);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--border);font-size:12px}
.mini-table td{padding:10px;border-bottom:1px solid #f4f6fb}
.mini-table tr:last-child td{border-bottom:0}
.badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:600}
.badge.good{background:rgba(229,72,77,.1);color:var(--up)}
.badge.mid{background:rgba(245,158,11,.12);color:var(--warn)}
.badge.bad{background:rgba(22,163,74,.1);color:var(--down)}

/* ---------- 任务列表 ---------- */
.task-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.task-item{
  background:var(--card);border-radius:14px;padding:16px;
  box-shadow:0 2px 10px rgba(20,40,80,.05);transition:.2s;
}
.task-item:hover{box-shadow:0 4px 18px rgba(20,40,80,.1)}
.task-item .ti-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.task-item h4{font-size:16px;font-weight:600;margin-bottom:4px}
.task-item .ti-sub{font-size:13px;color:var(--muted)}
.task-item .ti-desc{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5}
.task-item .ti-foot{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tag{font-size:12px;padding:3px 10px;border-radius:20px;background:#eef2fb;color:var(--primary)}
.tag.done{background:rgba(22,163,74,.1);color:var(--down)}
.btn-sm{
  padding:7px 16px;border:0;border-radius:9px;background:var(--primary);color:#fff;
  font-size:13px;cursor:pointer;font-family:inherit;font-weight:500;
}
.btn-sm:hover{background:var(--primary-dark)}
.btn-sm.gray{background:#eef2fb;color:var(--muted)}
.btn-sm.gray:hover{background:#e2e8f5;color:var(--primary)}
.btn-sm.danger{background:#fef2f2;color:#dc2626}
.btn-sm.danger:hover{background:#fee2e2;color:#b91c1c}
.btn-sm:disabled{opacity:.5;cursor:not-allowed}
.task-item .ti-foot .spacer{flex:1}

/* ---------- 危险确认弹窗 ---------- */
.confirm-box{max-width:400px}
.confirm-icon{
  width:48px;height:48px;border-radius:50%;background:#fef2f2;color:#dc2626;
  display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px;
}
.confirm-title{font-size:17px;font-weight:600;color:var(--text);margin-bottom:8px}
.confirm-text{font-size:13px;color:var(--muted);line-height:1.65;margin-bottom:6px}
.confirm-text b{color:var(--text)}
.confirm-warn{
  font-size:12.5px;color:#b45309;background:#fffbeb;border-radius:8px;
  padding:9px 12px;margin-top:12px;line-height:1.55;
}
.confirm-actions{display:flex;gap:10px;margin-top:20px}
.confirm-actions button{flex:1;padding:11px 0;border:0;border-radius:10px;font-size:14px;font-family:inherit;cursor:pointer;font-weight:500}
.btn-danger{background:#dc2626;color:#fff}
.btn-danger:hover{background:#b91c1c}
.btn-cancel{background:#eef2fb;color:var(--muted)}
.btn-cancel:hover{background:#e2e8f5;color:var(--primary)}
.empty{text-align:center;color:var(--muted);padding:48px 20px;font-size:14px}
.empty-icon{font-size:40px;opacity:.3;margin-bottom:12px}

/* ---------- 作业墙 ---------- */
/* 作业墙放大：投屏全班可见（卡片更大、封面更高、文字加粗加大） */
.wall-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(660px,1fr));gap:22px}
.wall-card{
  background:var(--card);border-radius:14px;padding:16px;
  box-shadow:0 2px 10px rgba(20,40,80,.05);position:relative;overflow:hidden;
}
.wall-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary)}
.wall-card .wc-name{font-size:20px;font-weight:700;margin-bottom:8px}
.wall-card .wc-task{font-size:16px;color:var(--muted);margin-bottom:10px;line-height:1.4}
.wall-card .wc-score{font-size:30px;font-weight:700;color:var(--up)}
.wall-card .wc-time{font-size:14px;color:var(--muted);margin-top:8px}
.wall-card .wc-live-tip{font-size:16px;color:var(--primary);margin-top:10px;font-weight:600}

/* ---------- 作答页 ---------- */
.quest{background:var(--card);border-radius:14px;padding:18px;margin-bottom:14px;box-shadow:0 2px 10px rgba(20,40,80,.05)}
.quest .q-title{font-size:16px;font-weight:600;margin-bottom:14px}
.opt{
  display:flex;align-items:center;gap:12px;padding:13px 16px;border:1.5px solid var(--border);
  border-radius:11px;margin-bottom:9px;cursor:pointer;transition:.15s;font-size:15px;
}
.opt:hover{border-color:var(--primary);background:#f8faff}
.opt.sel{border-color:var(--primary);background:rgba(47,107,255,.06)}
.opt .opt-idx{
  width:26px;height:26px;border-radius:50%;background:#eef2fb;color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;
}
.opt.sel .opt-idx{background:var(--primary);color:#fff}
.html-frame{width:100%;border:0;border-radius:12px;background:#fff;height:min(72vh,760px)}
.html-frame:fullscreen{height:100vh;border-radius:0}
.stage-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.stage-bar .spacer{flex:1}
.stage-hint{font-size:12.5px;color:var(--muted)}
.btn-fullscreen{
  padding:7px 14px;border:1px solid #dfe6f3;border-radius:9px;background:#fff;
  color:var(--muted);font-size:13px;cursor:pointer;font-family:inherit;
}
.btn-fullscreen:hover{color:var(--primary);border-color:var(--primary)}

/* ---------- 作业墙筛选栏 ---------- */
.wall-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.wall-toolbar select{
  padding:9px 12px;border:1px solid #dfe6f3;border-radius:10px;font-size:14px;
  font-family:inherit;color:var(--text);background:#fff;min-width:220px;outline:none;
}
.wall-toolbar select:focus{border-color:var(--primary)}

/* ---------- 大屏：任务反馈列表 ---------- */
.task-feedback{margin-top:18px}
.task-feedback h3{font-size:15px;margin-bottom:10px;color:var(--text)}
.tf-list{display:flex;flex-direction:column;gap:8px}
.tf-row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  background:#f7f9fd;cursor:pointer;border:1px solid transparent;transition:.15s;
}
.tf-row:hover{background:#eef4ff;border-color:#c7d7ff}
.tf-title{font-weight:500;font-size:14px;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-meta{font-size:12.5px;color:var(--muted);white-space:nowrap}
.tf-go{font-size:12.5px;color:var(--primary);white-space:nowrap}

/* ---------- 提交详情：学生作品行 ---------- */
.dt-row{border:1px solid #eef1f8;border-radius:12px;padding:12px 14px;margin-bottom:10px}
.dt-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dt-works{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.dt-works img{
  width:120px;height:90px;object-fit:cover;border-radius:8px;cursor:pointer;
  border:1px solid #e4e9f2;background:#f7f9fd;
}
.dt-works img:hover{border-color:var(--primary)}

/* ---------- 任务专属数据大屏 ---------- */
.taskboard-box{max-width:880px;width:94vw}

/* ---------- 数据大屏标题栏 + 最大化 ---------- */
.tb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.tb-head h3{margin:0}
.tb-head-actions{display:flex;gap:8px;flex:none}
.tb-max{
  border:1px solid #d9e2f2;background:#f6f9ff;color:#2f6bff;border-radius:9px;
  padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;transition:.16s;
}
.tb-max:hover{background:#e8f0ff;border-color:#b9d0ff}
.tb-max:active{transform:scale(.97)}

/* 最大化：弹窗铺满整个窗口（保留关闭按钮，随时可退） */
.modal.maxed{padding:0}
.modal.maxed .modal-box{
  width:100vw;height:100vh;max-width:none;max-height:100vh;
  border-radius:0;overflow:hidden;
  display:flex;flex-direction:column;
  padding:16px 18px;
}
.modal.maxed .tb-head{flex:none}
.modal.maxed #tbBody{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.modal.maxed .exp-mirror-wrap{flex:1;min-height:0}
.modal.maxed .em-top{flex:none}
.modal.maxed .em-frame{flex:1;height:auto;min-height:0}
/* 非实验类数据大屏：正文仍可滚动 */
/* 任务数据大屏（弹窗内）表格投屏放大 */
.modal.maxed .mini-table{font-size:18px}
.modal.maxed .mini-table th{font-size:15px;padding:11px 12px}
.modal.maxed .mini-table td{padding:13px 12px}
.modal.maxed h3{font-size:22px}
.modal.maxed #tbBody>.tb-cards{flex:none}
.modal.maxed .tb-scroll{flex:1;min-height:0;overflow-y:auto}
/* 真全屏态：同样铺满 */
.modal:fullscreen{padding:0;background:#fff}
.modal:fullscreen .modal-box{width:100vw;height:100vh;max-width:none;max-height:100vh;border-radius:0;display:flex;flex-direction:column;overflow:hidden;padding:16px 18px}
.tb-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
/* 数据质量徽标（2026-10-22）：提交了但数据不全 → 提示教师别盲信统计 */
.tb-quality{font-size:13px;padding:10px 14px;border-radius:10px;margin-bottom:14px;line-height:1.5}
.tb-quality.ok{background:#f0fdf4;color:#16a34a}
.tb-quality.warn{background:#fff7ed;color:#c2410c}
.tb-quality .hint{color:#9a3412;opacity:.8;font-size:12px}
.tb-card{background:#f7f9fd;border-radius:12px;padding:12px 14px;text-align:center}
.tb-card .l{font-size:12.5px;color:var(--muted)}
.tb-card .v{font-size:22px;font-weight:700;color:var(--primary);margin-top:2px}
.tb-card .v.small{font-size:16px}
.tb-sec{margin-top:16px}
.tb-sec h4{font-size:14px;color:var(--text);margin-bottom:10px}
.tb-stu{border:1px solid #eef1f8;border-radius:12px;padding:12px 14px;margin-bottom:10px}
.tb-stu-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tb-none{color:#b45309;background:#fffbeb;border-radius:8px;padding:8px 12px;font-size:13px;line-height:1.6}

/* ---------- 弹窗 ---------- */
.modal{
  display:none;position:fixed;inset:0;background:rgba(16,24,40,.5);
  z-index:100;align-items:center;justify-content:center;padding:20px;
}
.modal.show{display:flex}
.modal-box{
  background:#fff;border-radius:18px;padding:24px;width:100%;max-width:460px;
  max-height:88vh;overflow-y:auto;
}
.modal-box.wide{max-width:1120px}
.modal-box h3{font-size:18px;margin-bottom:18px}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:rgba(26,34,51,.94);color:#fff;padding:12px 22px;border-radius:11px;
  font-size:14px;opacity:0;transition:.3s;z-index:200;pointer-events:none;max-width:90vw;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:600px){
  .container{padding:12px}
  .stat-card .value{font-size:24px}
  .wall-grid{grid-template-columns:repeat(auto-fill,minmax(480px,1fr))}
}

/* ---------- 上传区 ---------- */
.upload-zone{
  border:2px dashed var(--border);border-radius:14px;padding:24px 16px;text-align:center;
  cursor:pointer;transition:.2s;background:#fafbff;
}
.upload-zone:hover,.upload-zone.drag{border-color:var(--primary);background:rgba(47,107,255,.05)}
.uz-icon{font-size:30px;margin-bottom:6px}
.uz-text{font-size:14px;color:var(--text);font-weight:500}
.uz-sub{font-size:12px;color:var(--muted);margin-top:4px}

/* ---------- 预览网格 ---------- */
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;margin-top:12px}
.preview-item{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.preview-item img{width:100%;height:100%;object-fit:cover;display:block}
.pv-del{
  position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.pv-del:hover{background:var(--up)}

/* ---------- 作品墙缩略图 ---------- */
.wall-cover{position:relative;margin:-16px -16px 14px;height:520px;overflow:hidden;border-radius:14px 14px 0 0;background:#f0f3f9}
.wall-thumb{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block;transition:.25s}
.wall-thumb:hover{transform:scale(1.05)}
.wall-more{
  position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.6);color:#fff;
  font-size:11px;padding:2px 7px;border-radius:10px;
}
.wc-score.none{color:var(--muted);font-size:16px}
/* 提交卡片里的说明文字（替代原来的手动得分输入框） */
.submit-hint{
  font-size:13px;color:var(--muted);line-height:1.6;
  margin-bottom:10px;padding:8px 12px;border-radius:8px;background:#f5f7fb;
}
.wc-ans{font-size:12px;color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 图片查看器 ---------- */
.img-viewer{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:300;
  align-items:center;justify-content:center;padding:24px;cursor:zoom-out;
}
.img-viewer.show{display:flex}
.img-viewer img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.5)}

/* ---------- 作品快照查看器 ---------- */
.snap-viewer {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, .72);
  flex-direction: column; padding: 8px;   /* 投屏场景：留白最小化，画面最大化 */
}
.snap-viewer.show { display: flex; }
.snap-bar {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 12px 12px 0 0;
  padding: 10px 16px; font-weight: 600; font-size: 14px;
}
.snap-bar .spacer { flex: 1; }
.snap-frame {
  flex: 1; border: none; background: #fff;
  border-radius: 0 0 12px 12px; width: 100%;
}
.dt-snaps { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.wc-open { margin-top: 8px; width: 100%; }

/* ---------- 表单勾选项 ---------- */
.check-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid #e4e9f2; border-radius: 12px;
  background: #f8faff; cursor: pointer;
}
.check-row input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--primary); }
.check-row span { display: flex; flex-direction: column; gap: 4px; }
.check-row b { font-size: 14px; color: #1f2937; }
.check-row em { font-style: normal; font-size: 12.5px; color: #7b869c; line-height: 1.5; }

/* ---------- 任务类型选择 ---------- */
.type-group { display: flex; flex-direction: column; gap: 8px; }
.type-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; border: 1.5px solid #e4e9f2; border-radius: 12px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.type-item:hover { border-color: #b9c8ff; }
.type-item:has(input:checked) { border-color: var(--primary); background: #f0f5ff; }
.type-item input[type="radio"] { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--primary); }
.type-item span { display: flex; flex-direction: column; gap: 3px; }
.type-item b { font-size: 14px; color: #1f2937; }
.type-item em { font-style: normal; font-size: 12.5px; color: #7b869c; line-height: 1.5; }

/* ============ 错题明细（数据大屏 · 个性化指导） ============ */
.dt-quiz { margin: 10px 0 4px; padding: 10px 14px; background: #fafbfd; border: 1px solid #e7edf5; border-radius: 10px; }
.dtq-title { font-size: 13px; font-weight: 600; color: #b45309; margin-bottom: 8px; }
.dtq { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 5px 0; font-size: 13.5px; border-bottom: 1px dashed #eef2f8; }
.dtq:last-child { border-bottom: none; }
.dtq .dtq-q { font-variant-numeric: tabular-nums; color: #20324a; font-weight: 500; }
.dtq .dtq-a { color: #7b869c; font-size: 12.5px; white-space: nowrap; }
.dtq .dtq-a b { color: #e5484d; font-weight: 600; }
.dtq.ok .dtq-a { color: #16a34a; }

/* ============ 任务数据大屏 · 图表化 ============ */
.bd-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
@media (max-width: 900px) { .bd-grid { grid-template-columns: 1fr; } }

/* 竖向柱状图 */
.bd-chart { display: flex; align-items: flex-end; gap: 14px; height: 190px; padding: 10px 8px 0; }
.bd-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.bd-num { font-size: 13px; font-weight: 700; color: #33415c; min-height: 18px; }
.bd-bar-wrap { flex: 1; width: 100%; max-width: 56px; display: flex; align-items: flex-end; }
.bd-bar { width: 100%; border-radius: 8px 8px 3px 3px; transition: height .6s cubic-bezier(.2,.8,.3,1); min-height: 2px; }
.bd-label { font-size: 12px; color: #7b869c; margin-top: 6px; white-space: nowrap; }

/* 圆环 */
.bd-ring-sec { display: flex; flex-direction: column; }
.bd-ring { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.ring-svg { width: 168px; height: 168px; }
.ring-empty { color: #aab6c8; font-size: 14px; text-align: center; line-height: 1.7; }

/* 学生实时成绩榜 */
.live-mini { font-size: 11px; color: #22a06b; font-weight: 600; margin-left: 6px; animation: livePulse 2s infinite; }
.lb-head { display: grid; grid-template-columns: 40px 1.1fr 2.2fr 64px 70px 92px;
  gap: 10px; padding: 4px 8px 8px; font-size: 12px; color: #8b97ab; border-bottom: 1px solid #eef2f8; }
.lb-row { display: grid; grid-template-columns: 40px 1.1fr 2.2fr 64px 70px 92px;
  gap: 10px; align-items: center; padding: 9px 8px; border-bottom: 1px dashed #f0f4fa; }
.lb-row:hover { background: #f8faff; }
.lb-rank { text-align: center; font-size: 17px; }
.lb-rank .rk { display: inline-block; min-width: 24px; height: 24px; line-height: 24px; border-radius: 50%;
  background: #f1f5fb; color: #64748b; font-size: 12.5px; font-weight: 600; }
.lb-name { font-weight: 600; color: #1f2937; display: flex; align-items: center; gap: 6px; }
.lb-pend { font-size: 11px; color: #b45309; background: #fef3c7; padding: 1px 7px; border-radius: 99px; font-weight: 500; }
.lb-bar-wrap { position: relative; height: 20px; background: #f1f5fb; border-radius: 99px; overflow: hidden; }
.lb-bar { height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.3,1); }
.lb-pct { position: absolute; right: 8px; top: 0; line-height: 20px; font-size: 11.5px; font-weight: 600; }
.lb-score b { color: #2f6bff; font-size: 15px; }
.lb-time, .lb-at { color: #7b869c; font-size: 12px; white-space: nowrap; }

/* 全班错题榜 */
.wq-row { display: grid; grid-template-columns: 1.2fr 1fr 52px 1.6fr; gap: 12px; align-items: center;
  padding: 8px 6px; border-bottom: 1px dashed #f0f4fa; }
.wq-row:hover { background: #fff8f7; }
.wq-q { font-variant-numeric: tabular-nums; font-weight: 600; color: #33415c; font-size: 14px; }
.wq-bar-wrap { height: 16px; background: #f1f5fb; border-radius: 99px; overflow: hidden; }
.wq-bar { height: 100%; background: linear-gradient(90deg, #f97316, #ef4444); border-radius: 99px; transition: width .6s; }
.wq-n { color: #ef4444; font-weight: 700; font-size: 13px; text-align: center; }
.wq-exp { color: #7b869c; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wq-exp b { color: #16a34a; }
.wq-all-ok { color: #16a34a; font-size: 14px; padding: 10px 4px; font-weight: 500; }

/* ============================================================
   实验探究类 · 实时数据大屏
   ============================================================ */

/* 任务类型小标签 */
.tt-tag { display:inline-block; font-size:11px; font-weight:700; padding:2px 7px;
  border-radius:6px; margin-right:7px; vertical-align:middle; letter-spacing:.3px; }
.tt-tag.ob { background:#eef4ff; color:#2f6bff; }
.tt-tag.op { background:#ecfdf5; color:#059669; }
.tt-tag.ex { background:#fef3c7; color:#b45309; }
.tt-tag.exp { background:#f5f3ff; color:#7c3aed; }
.btn-sm.primary-sm { background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }
.btn-sm.primary-sm:hover { background:var(--primary-dark); }

/* 学生端：实时同步状态条 */
.exp-live-bar { display:flex; align-items:center; gap:8px; margin-bottom:10px;
  padding:9px 14px; border-radius:11px; font-size:13px;
  background:linear-gradient(90deg,#f0fdf4,#f0f9ff); border:1px solid #d1fae5; }
.elb-dot { width:8px; height:8px; border-radius:50%; background:#22a06b;
  box-shadow:0 0 0 0 rgba(34,160,107,.6); animation:elbPulse 1.6s infinite; }
@keyframes elbPulse { 0%{box-shadow:0 0 0 0 rgba(34,160,107,.55)} 70%{box-shadow:0 0 0 9px rgba(34,160,107,0)} 100%{box-shadow:0 0 0 0 rgba(34,160,107,0)} }
.elb-txt { font-weight:700; color:#059669; }
.elb-sep { color:#cbd5e1; }
.elb-cnt { color:#33415c; }
.elb-cnt b { color:var(--primary); font-size:16px; font-variant-numeric:tabular-nums; }
.elb-hint { color:#8b97ab; font-size:12px; margin-left:auto; }

/* 大屏核心数字卡 */
.exp-cards .tb-card.big { position:relative; }
.exp-cards .tb-card.big .v { font-size:38px; }
.exp-delta { position:absolute; top:12px; right:14px; font-size:13px; font-weight:800;
  color:#16a34a; background:#dcfce7; padding:2px 9px; border-radius:99px;
  animation:expPop .5s ease-out; }
@keyframes expPop { from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }

/* 空态：等待学生开始实验 */
.exp-empty { text-align:center; padding:52px 20px; }
.ee-icon { font-size:52px; margin-bottom:14px; animation:eeFloat 3s ease-in-out infinite; }
@keyframes eeFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.ee-title { font-size:19px; font-weight:700; color:#33415c; margin-bottom:7px; }
.ee-sub { color:#8b97ab; font-size:13.5px; margin-bottom:18px; }
.exp-live-line { display:inline-flex; align-items:center; gap:9px; font-size:13px; color:#7b869c; }
.exp-live-line .live-dot { position:static; display:inline-flex; align-items:center; gap:6px; }
.exp-tick { font-variant-numeric:tabular-nums; }

/* 分布柱状图：柱下方补一个百分比 */
.exp-pct { font-size:11.5px; font-weight:700; margin-top:3px; }

/* 环形图（含环心总数） */
.exp-ring { width:186px; height:186px; }

/* 分布明细行 */
.exp-dist-row { display:grid; grid-template-columns:14px 90px 1fr 88px 64px;
  gap:11px; align-items:center; padding:9px 6px; border-bottom:1px dashed #f0f4fa; }
.exp-dist-row:hover { background:#f8faff; }
.edr-dot { width:12px; height:12px; border-radius:4px; }
.edr-name { font-weight:600; color:#33415c; font-size:13.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.edr-bar-wrap { height:18px; background:#f1f5fb; border-radius:99px; overflow:hidden; }
.edr-bar { display:block; height:100%; border-radius:99px; transition:width .6s cubic-bezier(.2,.8,.3,1); }
.edr-n { font-size:13px; color:#64748b; text-align:right; font-variant-numeric:tabular-nums; }
.edr-n b { color:#33415c; font-size:15px; }
.edr-pct { font-size:13px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }

/* 学生实时榜（实验版：三列 + 个人分布色条） */
.exp-lb-head, .exp-stu-row { grid-template-columns:40px 1.2fr 1.9fr 78px; }
.exp-stu-row .lb-score b { color:#7c3aed; }
.exp-stu-bar { display:flex; height:16px; border-radius:99px; overflow:hidden; background:#f1f5fb; }
.stk-seg { display:block; height:100%; transition:width .5s; }
.stk-none { line-height:16px; font-size:11px; color:#cbd5e1; padding-left:8px; }
.stk-fresh { font-size:11px; font-weight:500; color:#94a3b8; }
.stk-fresh.hot { color:#16a34a; font-weight:700; animation:livePulse 1.8s infinite; }
.stk-fresh.idle { color:#cbd5e1; }

/* 大屏底部操作条 */
.exp-foot { display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid #eef2f8; }
.exp-foot .spacer { flex:1; }

/* ============================================================
   实验画像确认卡（教师建任务时）
   ============================================================ */
.exp-profile { margin-top: 12px; padding: 14px; border-radius: 13px;
  background: linear-gradient(160deg,#f7f4ff,#f2f7ff); border: 1px solid #e5e0ff; }
.ep-loading { font-size: 13.5px; color: #7c3aed; padding: 6px 2px; }
.ep-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.ep-title { font-size: 14px; font-weight: 700; color: #4c1d95; }
.ep-conf { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.ep-conf.high { background: #dcfce7; color: #15803d; }
.ep-conf.mid { background: #fef3c7; color: #b45309; }
.ep-conf.low { background: #e5e7eb; color: #6b7280; }
.ep-expname { font-size: 13.5px; color: #33415c; margin-bottom: 8px; }
.ep-expname b { color: #4c1d95; }
.ep-sub { font-size: 12.5px; color: #7b869c; margin: 8px 0 6px; }
.ep-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.ep-color { width: 34px; height: 32px; padding: 0; border: 1px solid #e0e5f0;
  border-radius: 8px; background: #fff; cursor: pointer; }
.ep-name { flex: 1; padding: 7px 10px; border: 1px solid #e0e5f0; border-radius: 9px;
  font-size: 13.5px; font-family: inherit; outline: none; background: #fff; }
.ep-name:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.12); }
.ep-th { font-size: 12px; color: #7c3aed; font-weight: 600; min-width: 66px; text-align: right; }
.ep-th.muted { color: #cbd5e1; font-weight: 400; }
.ep-del { width: 26px; height: 26px; border-radius: 7px; border: none; cursor: pointer;
  background: #fee2e2; color: #dc2626; font-size: 13px; line-height: 1; }
.ep-del:hover { background: #fecaca; }
.ep-add { margin-top: 4px; padding: 7px 14px; border-radius: 9px; cursor: pointer;
  border: 1px dashed #c4b5fd; background: #fff; color: #7c3aed;
  font-size: 13px; font-family: inherit; font-weight: 600; }
.ep-add:hover { background: #faf5ff; }
.ep-evi { margin-top: 10px; padding-top: 9px; border-top: 1px dashed #e0def7; }
.ep-evi ul { margin: 0; padding-left: 18px; }
.ep-evi li { font-size: 12.5px; color: #64748b; line-height: 1.9; }
.ep-note { margin-top: 9px; padding: 9px 11px; border-radius: 9px; font-size: 12.5px;
  background: #fff; color: #475569; line-height: 1.7; }
.ep-note.warn { background: #fffbeb; color: #92400e; }
.ep-note b { color: #4c1d95; }

/* 能力提示条：建任务前就把"大屏能显示到什么程度"讲清楚 */
.ep-cap { margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.7; display: flex; flex-direction: column; gap: 3px; }
.ep-cap b { font-size: 13px; }
.ep-cap span { color: #5b6b85; }
.ep-cap.cap-std { background: #ecfdf3; border: 1px solid #bbf7d0; }
.ep-cap.cap-std b { color: #15803d; }
.ep-cap.cap-adopt { background: #fffbeb; border: 1px solid #fde68a; }
.ep-cap.cap-adopt b { color: #b45309; }
.ep-cap.cap-auto { background: #eff6ff; border: 1px solid #bfdbfe; }
.ep-cap.cap-auto b { color: #1d4ed8; }
.ep-cap.cap-fb { background: #f8fafc; border: 1px solid #e2e8f0; }
.ep-cap.cap-fb b { color: #475569; }

/* ============================================================
   课件兼容性检测卡（A/B/C 三档）
   ------------------------------------------------------------
   这是老师上传后第一眼看到的东西，必须一眼能读懂结论，
   所以用整块底色 + 大徽章，而不是一行小字。
   ============================================================ */
.cap-card { margin: 0 0 12px; padding: 13px 15px; border-radius: 12px;
  border: 1px solid #e2e8f0; background: #f8fafc; }
.cap-top { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.cap-badge { font-size: 13px; font-weight: 700; padding: 3px 11px; border-radius: 99px;
  background: #fff; border: 1px solid rgba(0,0,0,.06); }
.cap-title { font-size: 12px; font-weight: 600; color: #64748b; letter-spacing: .3px; }
.cap-summary { font-size: 13.5px; line-height: 1.75; color: #1f2937; font-weight: 500; }
.cap-detail { margin-top: 6px; font-size: 12px; line-height: 1.7; color: #64748b; }
.cap-foot { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cap-foot:empty { display: none; }
.cap-hint { font-size: 12px; color: #8b97ab; }
.cap-fix-btn { padding: 8px 16px; border: 0; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg,#8b5cf6,#6366f1);
  box-shadow: 0 2px 8px rgba(99,102,241,.28); }
.cap-fix-btn:hover { filter: brightness(1.06); }

/* 绿：完全支持 */
.cap-card.cap-green { background: #f0fdf4; border-color: #bbf7d0; }
.cap-card.cap-green .cap-badge { color: #15803d; border-color: #86efac; }
/* 橙：部分支持 */
.cap-card.cap-orange { background: #fff7ed; border-color: #fed7aa; }
.cap-card.cap-orange .cap-badge { color: #c2410c; border-color: #fdba74; }
/* 红：不支持 */
.cap-card.cap-red { background: #fef2f2; border-color: #fecaca; }
.cap-card.cap-red .cap-badge { color: #b91c1c; border-color: #fca5a5; }
/* 灰：未能检测 / 检测中 */
.cap-card.cap-gray { background: #f8fafc; border-color: #e2e8f0; }
.cap-card.cap-gray .cap-badge { color: #475569; }

/* 上传区下方的全局检测槽：空的时候不占位，避免表单出现空洞 */
.cap-probe-global { margin-top: 12px; }
.cap-probe-global:empty { display: none; }

/* ============================================================
   实验大屏：实验名条
   ============================================================ */
.exp-name-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  padding: 10px 15px; border-radius: 12px;
  background: linear-gradient(90deg,#f5f3ff,#eef4ff); border: 1px solid #e0e7ff; }
.enb-icon { font-size: 17px; }
.enb-txt { font-size: 15.5px; font-weight: 700; color: #4c1d95; }
.enb-tag { margin-left: auto; font-size: 11.5px; font-weight: 600; padding: 3px 10px;
  border-radius: 99px; background: #dcfce7; color: #15803d; }
.enb-tag.auto { background: #e5e7eb; color: #6b7280; }

/* 柱状图上的理论概率标注 */
.exp-th { font-size: 10.5px; color: #a78bfa; margin-top: 2px; }

/* ============================================================
   实测频率 vs 理论概率 对照表
   ============================================================ */
.th-tip { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.th-row { display: grid; grid-template-columns: 14px 84px 1fr 74px;
  gap: 11px; align-items: center; padding: 11px 8px; border-bottom: 1px dashed #f0f4fa; }
.th-row:hover { background: #fafaff; }
.th-dot { width: 12px; height: 12px; border-radius: 4px; }
.th-name { font-weight: 600; color: #33415c; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-mid { display: flex; flex-direction: column; gap: 5px; }
.th-cells { display: flex; gap: 18px; }
.th-cell { font-size: 12px; color: #8b97ab; }
.th-cell em { font-style: normal; }
.th-cell b { font-size: 14px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.th-track { position: relative; height: 16px; background: #f1f5fb; border-radius: 99px; }
.th-fill { display: block; height: 100%; border-radius: 99px;
  transition: width .6s cubic-bezier(.2,.8,.3,1); }
.th-mark { position: absolute; top: -3px; width: 2px; height: 22px;
  background: #4c1d95; border-radius: 2px; }
.th-flag { font-size: 11.5px; font-weight: 700; text-align: center;
  padding: 3px 0; border-radius: 7px; }
.th-flag.good { background: #dcfce7; color: #15803d; }
.th-flag.mid { background: #fef3c7; color: #b45309; }
.th-flag.far { background: #fee2e2; color: #dc2626; }

/* ============ 实验大屏（学生端程序镜像模式） ============ */
.exp-mirror-wrap { display: flex; flex-direction: column; gap: 10px; }
.em-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, #f5f9ff, #eef4ff);
  border: 1px solid #dbe8ff; border-radius: 12px; padding: 10px 14px; }
.em-live { display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 13.5px; color: #1d3563; }
.em-dot { width: 8px; height: 8px; border-radius: 50%; background: #22a06b;
  box-shadow: 0 0 0 3px rgba(34,160,107,.22); animation: emPulse 1.6s infinite; }
@keyframes emPulse { 0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); } }
.em-meta { font-size: 13px; color: #4a5878; font-variant-numeric: tabular-nums; }
.em-meta b { color: #2f6bff; font-size: 15px; }
.em-spacer { flex: 1; }
.em-note { font-size: 12px; color: #8b97ab; }
.em-frame { height: min(74vh, 820px); }

/* 小屏下：大屏横幅里的项换行更友好 */
@media (max-width: 720px) {
  .em-note { display: none; }
  .em-frame { height: 68vh; }
}

/* ============================================================
   v4：账号体系 / 班级分组 / 接入码
   ============================================================ */

/* ---------- 登录页补充 ---------- */
.brand.small{margin-bottom:24px}
.brand.small .logo{width:52px;height:52px;font-size:26px;border-radius:15px}
.brand.small h1{font-size:19px}
.login-note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:14px}
.login-note a{color:var(--primary);text-decoration:none}
.modal-box.narrow{max-width:380px}
.fld-hint{font-size:12px;color:var(--muted);line-height:1.55;margin-top:-4px}
.warn-text{color:#d97706;font-weight:500}
.dim{color:#b3bccd;font-style:normal}

/* 接入码输入：大字、等宽、居中 */
.code-input{
  text-align:center;font-size:26px !important;font-weight:700;letter-spacing:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;
  padding:16px 12px !important;
}

/* ---------- 学生接入页 ---------- */
.join-task-card{
  background:linear-gradient(135deg,#f0f5ff,#f7f9ff);border:1px solid #dbe6ff;
  border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;
}
.jt-name{font-size:16px;font-weight:600;color:#1f2937}
.jt-meta{font-size:13px;color:var(--muted)}
.jt-fb{font-size:12.5px;color:#475569;line-height:1.6}
.fb-group{color:#b45309}
.fb-personal{color:var(--primary)}

/* ---------- 班级管理 ---------- */
.cls-layout{display:grid;grid-template-columns:224px 1fr;gap:16px;align-items:start}
@media(max-width:820px){.cls-layout{grid-template-columns:1fr}}
.cls-side{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.cls-side-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--border);font-size:13.5px;font-weight:600;
}
.cls-list{max-height:62vh;overflow-y:auto;padding:6px}
.cls-item{padding:10px 12px;border-radius:10px;cursor:pointer;transition:.15s;margin-bottom:2px}
.cls-item:hover{background:#f5f8ff}
.cls-item.on{background:rgba(47,107,255,.09);box-shadow:inset 3px 0 0 var(--primary)}
.ci-name{font-size:14px;font-weight:500}
.ci-meta{font-size:12px;color:var(--muted);margin-top:2px}
.cls-main{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;min-height:320px}
.empty-hint{color:var(--muted);font-size:13.5px;text-align:center;padding:48px 16px;line-height:1.8}
.empty-hint.small{padding:22px 10px;font-size:12.5px;line-height:1.7}

.cd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.cd-title{font-size:17px;font-weight:600}
.cd-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.cd-actions{display:flex;gap:8px;flex-wrap:wrap}
.cd-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.cd-cols{grid-template-columns:1fr}}
.cd-col h4{font-size:13.5px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.cd-col h4 .cnt{font-size:11.5px;font-weight:500;color:var(--primary);background:rgba(47,107,255,.1);
  padding:1px 7px;border-radius:9px}

.mem-list{display:flex;flex-direction:column;gap:4px;max-height:52vh;overflow-y:auto}
.mem-item{display:grid;grid-template-columns:88px 1fr auto 22px;gap:8px;align-items:center;
  padding:7px 10px;border-radius:9px;background:#fafbfe;font-size:13px}
.mem-item:hover{background:#f4f7ff}
.mem-no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#64748b}
.mem-name{font-weight:500}
.mem-g{font-size:11.5px;color:var(--muted)}
.mem-del{border:0;background:transparent;color:#cbd5e1;font-size:16px;cursor:pointer;line-height:1;padding:0 2px}
.mem-del:hover{color:var(--up)}

.grp-list{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto}
.grp-card{border:1px solid var(--border);border-radius:12px;padding:11px 13px;background:#fcfdff}
.grp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.grp-name{font-size:13.5px;font-weight:600;color:var(--primary-dark)}
.grp-cnt{font-size:11.5px;color:var(--muted)}
.grp-leader{font-size:12px;color:#64748b;margin-bottom:8px}
.grp-members{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.chip{font-size:12px;padding:2px 9px;border-radius:20px;background:#eef2fa;color:#475569}
.chip.leader{background:rgba(47,107,255,.13);color:var(--primary-dark);font-weight:600}
.grp-ops{display:flex;gap:6px}

.btn-mini{
  padding:5px 11px;border:1px solid var(--border);background:#fff;border-radius:8px;
  font-size:12px;color:#475569;cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap;
}
.btn-mini:hover{border-color:var(--primary);color:var(--primary);background:#f5f8ff}
.btn-mini.danger:hover{border-color:var(--up);color:var(--up);background:#fff5f5}

/* ---------- 表单下拉 ---------- */
.form select,.sel{
  width:100%;padding:13px 16px;border:1px solid var(--border);border-radius:12px;
  font-size:15px;background:#fff;outline:none;font-family:inherit;color:var(--text);cursor:pointer;
}
.form select:focus,.sel:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(47,107,255,.1)}
.or-line{text-align:center;font-size:12px;color:#c3cbd9;margin:2px 0}

/* ---------- 账号管理表 ---------- */
.acc-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.mini-table .mt-row{
  display:grid;grid-template-columns:100px 1fr 76px 76px 68px 88px;
  gap:8px;align-items:center;padding:9px 10px;border-bottom:1px solid #f4f6fb;font-size:13px;
}
.mini-table .mt-row.mt-head{
  color:var(--muted);font-size:12px;font-weight:500;border-bottom:1px solid var(--border);
}
.mini-table .mt-row:last-child{border-bottom:0}
.mini-table .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}

/* ---------- 学生接入卡（发布成功） ---------- */
.access-card{
  background:linear-gradient(150deg,#f7f9ff,#eef4ff);
  border:1.5px dashed #c7d7ff;border-radius:16px;
  padding:20px 18px;margin-bottom:14px;text-align:center;
}
.ac-task{font-size:15px;font-weight:600;color:#1f2937;margin-bottom:12px}
.ac-code-label{font-size:12px;color:var(--muted);letter-spacing:2px}
.ac-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:44px;font-weight:800;letter-spacing:11px;color:var(--primary-dark);
  margin:4px 0 16px;text-indent:11px;
}
.ac-link-row{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.ac-link-row input{
  flex:1;padding:9px 12px;border:1px solid #dbe6ff;border-radius:9px;background:#fff;
  font-size:12px;color:#64748b;outline:none;font-family:inherit;
}
.ac-fb{font-size:12.5px;color:#475569;line-height:1.6;margin-bottom:12px}
.ac-qr{display:flex;justify-content:center}
.ac-qr img{width:240px;height:240px;border-radius:12px;background:#fff;padding:8px;box-shadow:0 3px 14px rgba(47,107,255,.12)}

/* ---------- 任务列表：接入码标签加大（方便远距离投影/抄写） ---------- */
.tt-tag.code-tag{
  background:#eef4ff;color:#2f6bff;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;font-weight:800;letter-spacing:1.5px;
  padding:3px 10px;border-radius:8px;
}

/* ---------- 手工分组 ---------- */
.chip.click{cursor:pointer;transition:.15s}
.chip.click:hover{background:#fee2e2;color:#b91c1c}
.chip.click.leader:hover{background:#fee2e2;color:#b91c1c}
.mem-g-btn{
  border:0;background:transparent;font-family:inherit;cursor:pointer;
  font-size:11.5px;color:var(--primary);padding:2px 6px;border-radius:6px;
}
.mem-g-btn:hover{background:rgba(47,107,255,.09)}

/* ============================================================
   移动端 · 数据大屏适配
   目标：老师在手机上也能看清大屏（课堂临时查看/走动查看）
   策略：宽表在窄屏改为"卡片式两行"布局，不横向滚动、不挤压
   ============================================================ */
@media (max-width:640px){
  /* 概览卡片：4 列 → 2 列 */
  .tb-cards{grid-template-columns:repeat(2,1fr);gap:8px}
  .tb-cards .tb-card{padding:12px 10px}
  .tb-cards .tb-card .v{font-size:20px}
  .tb-cards .tb-card .v.small{font-size:15px}

  /* 竖柱状图：高度略降，标签缩小防重叠 */
  .bd-chart{height:150px;gap:8px}
  .bd-label{font-size:10.5px;white-space:nowrap;transform:scale(.92);transform-origin:center top}

  /* 成绩排行榜：6 列网格 → 卡片式（第一行：名次+姓名+分数 / 第二行：进度条+时间） */
  .lb-head{display:none}
  .lb-row{
    display:grid;
    grid-template-columns:30px 1fr auto;
    grid-template-areas:
      "rank name  score"
      "bar  bar   meta";
    gap:4px 8px;padding:10px 6px;border-bottom:1px solid #eef2f8;
  }
  .lb-rank{grid-area:rank;text-align:left;font-size:15px}
  .lb-rank .rk{min-width:22px;height:22px;line-height:22px;font-size:11.5px}
  .lb-name{grid-area:name;font-size:13.5px;overflow-wrap:anywhere}
  .lb-bar-wrap{grid-area:bar;height:16px}
  .lb-pct{line-height:16px;font-size:11px;right:6px}
  .lb-score{grid-area:score;text-align:right;font-size:13px}
  .lb-score b{font-size:14px}
  .lb-time{display:none}          /* 用时在手机上意义不大，隐藏以省空间 */
  .lb-at{grid-area:meta;text-align:right;font-size:11px;align-self:center}

  /* 全班错题榜：4 列 → 卡片式两行 */
  .wq-row{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "q     n"
      "bar   bar"
      "exp   exp";
    gap:4px 8px;padding:10px 6px;border-bottom:1px solid #eef2f8;
  }
  .wq-q{grid-area:q;font-size:13px;overflow-wrap:anywhere}
  .wq-n{grid-area:n;text-align:right}
  .wq-bar-wrap{grid-area:bar;height:13px}
  .wq-exp{grid-area:exp;font-size:11.5px;line-height:1.5}

  /* 提交详情表格：允许横向滑动，避免文字挤成一列 */
  .mini-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mini-table th,.mini-table td{white-space:nowrap}

  /* 实验实时大屏：图表区与列表堆叠 */
  .em-frame{height:60vh}
}

/* ============ 学生端：同学作品墙 ============ */
.stu-wall-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;
  max-height:72vh;
  overflow:auto;
  padding:4px;
}
.stu-wall-card{
  border:1px solid #e4e9f2;
  border-radius:14px;
  padding:10px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:box-shadow .2s, transform .2s;
}
.stu-wall-card:hover{ box-shadow:0 6px 20px rgba(20,40,90,.10); transform:translateY(-2px); }
.stu-wall-card.mine{ border-color:#bbf7d0; background:#f6fffa; }
.swc-head{ display:flex; align-items:center; gap:6px; font-size:13px; color:#1d2b45; }
.swc-me{ font-size:11px; padding:1px 7px; border-radius:999px; background:#dcfce7; color:#15803d; font-weight:700; }
.swc-score{ font-size:11.5px; color:#2f6bff; font-weight:700; }
.swc-body{ aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:#f5f7fb; display:flex; align-items:center; justify-content:center; }
.swc-body img{ width:100%; height:100%; object-fit:cover; display:block; }
.swc-noimg{ font-size:12px; color:#a8b3c5; }
.swc-more{ font-size:11.5px; color:#8b97ab; text-align:right; }

/* ============================================================
   AI 改造 · 并排预览
   ------------------------------------------------------------
   全屏铺开：老师要能真的点两边的按钮试玩，
   所以两个 iframe 必须给足高度，不能挤在小弹窗里。
   ============================================================ */
.rt-modal { padding: 14px; }
.rt-box {
  max-width: 1400px; width: 100%; max-height: 94vh; height: 94vh;
  display: flex; flex-direction: column; padding: 16px 18px; overflow: hidden;
}
.rt-head { display: flex; align-items: baseline; gap: 12px; flex: none; padding-right: 40px; position: relative; }
.rt-head h3 { font-size: 17px; margin: 0; }
.rt-head-sub { font-size: 12.5px; color: #7b869c; flex: 1; }
.rt-close {
  position: absolute; right: 0; top: -2px; width: 30px; height: 30px;
  border: 0; border-radius: 8px; background: #f1f4fa; color: #5b6b85;
  font-size: 15px; cursor: pointer; line-height: 1;
}
.rt-close:hover { background: #e3e9f4; }

/* 进度 */
.rt-progress {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 30px;
}
.rt-spin {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid #e2e8f4; border-top-color: #6366f1;
  animation: rtspin .9s linear infinite;
}
@keyframes rtspin { to { transform: rotate(360deg); } }
.rt-progress-text { font-size: 15px; font-weight: 600; color: #33415c; }
.rt-progress-hint { font-size: 12.5px; color: #8b97ab; }

/* 并排 */
.rt-body { flex: 1; min-height: 0; display: flex; gap: 12px; }
.rt-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rt-pane-head { display: flex; align-items: center; gap: 8px; padding: 0 0 7px; flex: none; }
.rt-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.rt-tag-old { background: #f1f5f9; color: #64748b; }
.rt-tag-new { background: #dcfce7; color: #15803d; }
.rt-pane-note { font-size: 12px; color: #8b97ab; }
.rt-frame {
  flex: 1; width: 100%; min-height: 0; border: 1px solid #e2e8f0;
  border-radius: 11px; background: #fff;
}
.rt-pane:last-child .rt-frame { border-color: #bbf7d0; box-shadow: 0 0 0 3px rgba(34,197,94,.08); }

/* 问题提示 */
.rt-issues {
  flex: none; margin-top: 10px; padding: 10px 13px; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fde68a; font-size: 12.5px; line-height: 1.75;
  color: #92400e; max-height: 84px; overflow-y: auto;
}
.rt-issues b { color: #b45309; }

/* 底部操作 */
.rt-foot {
  flex: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef1f8;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.rt-stat { font-size: 12.5px; color: #7b869c; }
.rt-stat b { color: #33415c; }
.rt-actions { display: flex; gap: 10px; align-items: center; }

/* 手动粘贴模式：自动改造失败时，给老师明确的「贴哪里、贴什么」 */
.rt-manual { flex: 1; overflow: auto; padding: 18px 24px 20px; }
.rt-manual-warn {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
  padding: 10px 14px; font-size: 12.5px; line-height: 1.8; color: #92400e; margin-bottom: 12px;
}
.rt-manual-tip {
  font-size: 13px; color: #475569; line-height: 1.8; margin-bottom: 14px;
  background: #f8fafc; border-left: 3px solid #6366f1; border-radius: 0 8px 8px 0; padding: 10px 14px;
}
.rt-manual-list { display: flex; flex-direction: column; gap: 14px; }
.rt-mp { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; }
.rt-mp-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 12.5px;
}
.rt-mp-no {
  background: #6366f1; color: #fff; font-weight: 700; font-size: 11.5px;
  border-radius: 6px; padding: 2px 8px;
}
.rt-mp-at { color: #334155; font-weight: 600; }
.rt-mp-at b { color: #4338ca; font-size: 14px; }
.rt-mp-why { color: #64748b; flex: 1; min-width: 140px; }
.rt-mp-code {
  margin: 0; padding: 12px 14px; background: #0f172a; color: #a5f3fc;
  font: 12.5px/1.7 ui-monospace, Consolas, "Courier New", monospace;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
.rt-mp-copy {
  width: 100%; border: 0; border-top: 1px solid #e2e8f0; background: #f1f5f9;
  color: #4338ca; font-size: 12.5px; font-weight: 700; padding: 9px; cursor: pointer; transition: .15s;
}
.rt-mp-copy:hover { background: #e0e7ff; }
.rt-manual-actions { justify-content: flex-end; margin-top: 16px; }

/* 失败 */
.rt-fail { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 30px; }
.rt-fail-msg {
  max-width: 520px; text-align: center; font-size: 13.5px; line-height: 1.8; color: #92400e;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 14px 18px;
}

/* 手机上并排太挤，改上下排列 */
@media (max-width: 760px) {
  .rt-body { flex-direction: column; }
  .rt-box { height: 96vh; max-height: 96vh; }
}

/* ---------- 弱网草稿保护：提交失败重试横幅（2026-10-23） ---------- */
.net-retry-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 22px; z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 640px);
  background: #dc2626; color: #fff;
  padding: 10px 14px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(220, 38, 38, .35);
  font-size: 13.5px; line-height: 1.4;
}
.net-retry-bar .spacer { flex: 1; }
.net-retry-bar .btn-sm { white-space: nowrap; flex-shrink: 0; }

/* ---------- 快照查看器：恢复失败警告横幅（2026-10-23） ---------- */
.snap-warn {
  display: flex; align-items: flex-start; gap: 6px;
  background: #fff7ed; color: #c2410c;
  border-bottom: 1px solid #fed7aa;
  padding: 9px 16px; font-size: 12.5px; line-height: 1.55;
}

/* ---------- 课堂工具条（浮动，2026-10-23） ---------- */
.cls-toolbar {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  display: none; flex-direction: column; gap: 8px;
}
#teacherPage .cls-toolbar { display: flex; }
.cls-toolbar button {
  width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid #e2e8f0; background: #fff; cursor: pointer;
  font-size: 12px; font-weight: 700; color: #334155;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: .15s;
}
.cls-toolbar button:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, .18); color: var(--primary); }

/* 全屏遮罩（点名/计时/表扬共用） */
.ct-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(15, 23, 42, .88); backdrop-filter: blur(4px);
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  color: #fff;
}
.ct-overlay.show { display: flex; }
.ct-close {
  position: absolute; top: 20px; right: 24px;
  background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 10px;
  font-size: 20px; width: 44px; height: 44px; cursor: pointer;
}
.ct-big { font-size: 92px; font-weight: 800; letter-spacing: 2px; text-align: center; padding: 0 20px; }
.ct-big.warn { color: #fbbf24; }
.ct-big.land { color: #4ade80; animation: ct-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ct-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.ct-sub { font-size: 16px; color: rgba(255,255,255,.65); }
.ct-timer-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* 表扬按钮 */
.ct-praise-btn {
  width: 132px; height: 132px; border-radius: 24px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.1); color: #fff; font-size: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: .15s;
}
.ct-praise-btn:hover { background: rgba(255,255,255,.22); transform: translateY(-3px); }
.ct-praise-btn span { font-size: 15px; font-weight: 700; }
.ct-praise-show { text-align: center; animation: ct-pop .5s cubic-bezier(.2, 1.6, .4, 1); }