:root {
  --bg: #f4f6fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #eff6ff;
  --green: #16a34a;
  --green-soft: #f0fdf4;
  --red: #dc2626;
  --red-soft: #fef2f2;
  --amber: #d97706;
  --amber-soft: #fffbeb;
  --border: #e5e7eb;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 16px rgba(15, 23, 42, .05);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.6;
}
.hidden { display: none !important; }
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; border: 1px solid var(--border);
}
h1 { font-size: 22px; } h2 { font-size: 18px; margin-bottom: 12px; } h3 { font-size: 15px; }
.msg { color: var(--red); font-size: 13px; min-height: 20px; margin-top: 8px; text-align: center; }
.msg.ok { color: var(--green); }
.hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 8px; }

/* ---- 登录 ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 400px; padding: 32px 28px; }
.login-brand { text-align: center; margin-bottom: 20px; }
.login-brand .logo {
  width: 56px; height: 56px; border-radius: 16px; background: var(--primary);
  color: #fff; font-size: 30px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; margin-bottom: 10px;
}
.login-brand .sub { color: var(--muted); font-size: 13px; }
label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
/* 弹窗里不带输入框的小标题（如「这节课的封面」），样式与 label 文字一致 */
.label-like { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
label input, label textarea, label select,
select.cat-select {
  display: block; width: 100%; margin-top: 4px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
  font-family: inherit; color: var(--text); background: #fff;
}
label input:focus, label textarea:focus, label select:focus, select.cat-select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
/* 下拉框美化：去掉系统默认外观，自绘箭头 + 悬停 / 聚焦反馈 */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding: 8px 30px 8px 12px;
  padding-right: 30px !important;
  font-size: 14px; font-family: inherit; color: var(--text);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  border: 1px solid var(--border); border-radius: 8px;
  background-color: #fff;
}
select:hover:not(:disabled) { border-color: #c7d0dc; background-color: #fafbfd; }
select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }
select:disabled { opacity: .55; cursor: not-allowed; background-color: #f3f4f6; }
.row { display: flex; gap: 8px; align-items: flex-end; }

/* ---- 列表页大号搜索框（试卷库等）：带放大镜图标、加高、聚焦高亮 ---- */
.search-wrap { position: relative; margin: 0; }
.search-wrap .search-ico {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: #9ca3af; pointer-events: none;
}
.search-wrap .search-input {
  display: block; width: 100%; margin: 0; padding: 13px 16px 13px 44px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 15px; font-family: inherit; color: var(--text); background: #f8fafc;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.search-wrap .search-input::placeholder { color: #9ca3af; }
.search-wrap .search-input:hover { border-color: #c7d0dc; background: #fff; }
.search-wrap .search-input:focus {
  outline: none; border-color: var(--primary); background: #fff;
  box-shadow: 0 0 0 4px var(--primary-soft);
}

/* ---- PDF 智能导入：页面实时预览缩略图 ---- */
.pi-pages { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; }
.pi-page { width: 116px; cursor: pointer; text-align: center; }
.pi-page img {
  width: 100%; height: 150px; object-fit: cover; display: block;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.pi-page span { font-size: 12px; color: var(--muted); }
.pi-page:hover img { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* ---- 按钮 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 8px; border: 1px solid transparent;
  font-size: 14px; cursor: pointer; font-family: inherit; transition: all .15s;
  background: #eef2f7; color: var(--text);
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn.ghost { background: #fff; border-color: var(--border); color: var(--text); }
.btn.ghost:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.btn.danger { background: var(--red-soft); color: var(--red); }
.btn.danger:hover:not(:disabled) { background: #fee2e2; }
.btn.link { background: none; color: var(--primary); }
.btn.block { width: 100%; margin-top: 4px; }
.btn.sm { padding: 4px 10px; font-size: 12.5px; border-radius: 6px; }

/* ---- tabs ---- */
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tab {
  flex: 1; background: none; border: none; padding: 10px 4px; font-size: 14px;
  cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; font-family: inherit;
}
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
/* 老师登录方式（密码 / 验证码 / 注册）的次级标签 */
.tabs.sub { margin-bottom: 14px; border-bottom: none; }
.tabs.sub .tab { font-size: 13px; padding: 7px 4px; }
.tabs.sub .tab.active { border-bottom-color: var(--primary); }

/* ---- 顶栏 ---- */
.topbar {
  background: #fff; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.topbar-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 16px; height: 56px;
  display: flex; align-items: center; gap: 18px;
}
/* 学生页顶栏放宽到和内容区（page-wide 96vw）一致：头像与「我的作业」标题左对齐 */
.topbar-inner.topbar-wide { max-width: min(96vw, 1760px); }
/* 学生「我的作业」页：内容收窄到 1280 居中——整块布局右移；顶栏同步同宽，头像仍与标题对齐 */
.topbar-inner.topbar-fit { max-width: min(96vw, 1240px); }
.brand { font-weight: 700; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.logo.small { width: 28px; height: 28px; border-radius: 8px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
/* 管理员上传自定义图标后，logo 位置换成图片（圆角跟随容器） */
.logo img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
/* 导航条可横向滚动但不出滚动条（窄屏标签多时靠滑动手势兜底，视觉保持干净） */
.nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
/* 标签字号与横向内边距由 --nav-fs 驱动：fitNav() 实测放不下时逐级调小，
   保证所有标签始终挤在同一行里全部显示（≤640px 才换到第二行，见下方旧断点） */
.nav button {
  background: none; border: none; padding: 8px calc(var(--nav-fs, 14px) * 0.72);
  border-radius: 8px; font-size: var(--nav-fs, 14px); cursor: pointer;
  color: var(--muted); white-space: nowrap; font-family: inherit;
}
/* 顶栏自适应：不够宽时先收品牌文字与用户区，给标签让位（标签字号由 fitNav 兜底） */
/* fitNav() 实测放不下时挂在 .topbar 上的让位档位（JS 实测驱动，替代固定断点）：
   compact-user：角色后缀让位、超长名字省略号截断（名字本体不消失）、小按钮收紧；
   compact-brand：品牌文字让位（logo 仍在） */
.topbar.compact-user #user-name .role-tag { display: none; }
.topbar.compact-user #user-name { max-width: 14em; overflow: hidden; text-overflow: ellipsis; }
.topbar.compact-user .user-box .btn.sm { padding: 4px 6px; font-size: 12px; }
.topbar.compact-brand #brand-name { display: none; }
.nav button.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
/* 「试卷库」上的待审角标：管理员一眼看到有卷子等审核 */
.nav button .nav-dot {
  display: inline-block; margin-left: 6px; min-width: 17px; padding: 0 5px;
  border-radius: 999px; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}
.user-box { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.points-chip {
  background: var(--amber-soft); color: var(--amber); font-weight: 700;
  padding: 3px 10px; border-radius: 999px; font-size: 13px;
}

/* ---- 页面 ---- */
.page { max-width: 1080px; margin: 0 auto; padding: 20px 16px 60px; }
/* 学生端宽屏放宽：内容稀疏的页面（作业三列 / 卡片网格）填满窗口不留白；
   96vw 兜底防横向滚动，1760 上限防超宽屏（2K/4K）拉伸过分 */
.page.page-wide { max-width: min(96vw, 1760px); }
/* 学生「我的作业」页：内容收窄到 1240 居中（整块右移、右侧不留大片空白）；
   顶栏 topbar-fit 同为 1240——标签页/头像与卡片左缘严格对齐（宽度必须一致） */
.page.page-fit { max-width: min(96vw, 1240px); }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.page-head h2 { margin: 0; }
.grid { display: grid; gap: 14px; }
.grid.cols2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.stat-row { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.stat {
  flex: 1; min-width: 140px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow);
}
.stat .num { font-size: 24px; font-weight: 700; }
.stat .lab { font-size: 12.5px; color: var(--muted); }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.blue { background: var(--primary-soft); color: var(--primary); }
.badge.green { background: var(--green-soft); color: var(--green); }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge.amber { background: var(--amber-soft); color: var(--amber); }
.badge.gray { background: #f3f4f6; color: var(--muted); }

.item-title { font-weight: 600; font-size: 15px; }
.item-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.item-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.q-content { background: #f8fafc; border-radius: 8px; padding: 10px 12px; margin-top: 10px; font-size: 14px; white-space: pre-wrap; }
.q-answer { background: var(--green-soft); border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 13.5px; color: #166534; white-space: pre-wrap; }
.q-analysis { background: var(--amber-soft); border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 13.5px; color: #92400e; white-space: pre-wrap; }
/* AI 点评按小问分行：一行一个小问，行间留呼吸感，小问标记加粗 */
.cmt-line { padding: 3px 0; }
.cmt-line + .cmt-line { border-top: 1px dashed rgba(146, 64, 14, .18); }
.cmt-line b, .cmt-line strong { color: #7c2d12; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.form-card { max-width: 720px; }
/* ---- 题库题卡：预览模式 ⇄ 表单形式 ---- */
.qcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.qcard-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.seg-btn {
  border: 0; background: transparent; color: var(--muted);
  padding: 4px 11px; font: inherit; font-size: 12.5px; line-height: 1.5; cursor: pointer;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn:hover { color: var(--primary); }
.seg-btn.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
/* 编辑态：表单在窄格里没法用，让这张卡横跨整行 */
.qcard-editing { grid-column: 1 / -1; }
.qcard-form { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 12px; }
.qcard-form-title { font-weight: 700; font-size: 14px; color: var(--primary-dark); margin-bottom: 8px; }
.qcard-form .row { margin-top: 8px; }
textarea { resize: vertical; }

.feedback-box {
  background: var(--primary-soft); border-radius: 10px; padding: 12px 14px;
  margin-top: 10px; font-size: 14px; white-space: pre-wrap;
}
.score-big { font-size: 28px; font-weight: 800; color: var(--primary); }
.img-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.img-grid img { max-width: 180px; max-height: 140px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; }
/* 选题列表里的题图缩略图：够看清是哪张图就行，别把列表撑得太长 */
.picker-item .img-grid { margin-top: 6px; gap: 6px; }
.picker-item .img-grid img { max-width: 108px; max-height: 84px; }
/* 卷面预览里的题图：和打印版一致——自动适应 A4 纸（不变形放满卷宽、限高 215mm），居中放 */
#sheet-body .img-grid { flex-direction: column; gap: 10px; align-items: center; }
#sheet-body .img-grid img { width: auto; max-width: 100%; height: auto; max-height: 215mm; }
/* 单题卷（错题重做）：与通用规则一致，照片题图适应 A4 纸、一页放得下 */
#sheet-body .q-one .img-grid img { width: auto; max-width: 100%; height: auto; max-height: 215mm; }
/* 参考答案照片：题库 / 批改页中等大小；卷面（含答案版）里限高，不独占大半页 */
.ans-grid img { max-width: 260px; max-height: 200px; }
#sheet-body .q-ans-imgs { flex-direction: row; justify-content: center; }
#sheet-body .q-ans-imgs img { max-width: 460px; max-height: 100mm; width: auto; height: auto; }
/* KaTeX 公式：过长时横向滚动，不撑破卡片 */
.katex-display { overflow-x: auto; overflow-y: hidden; margin: 6px 0; }
.thumb-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.thumb { position: relative; display: inline-block; }
.thumb img {
  width: 88px; height: 88px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); display: block;
}
.thumb i {
  position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; font-style: normal;
  color: #fff; background: rgba(15, 23, 42, .55); border-radius: 0 0 8px 8px;
  text-align: center; padding: 1px 0;
}
/* 改题时删掉某张题图 */
.thumb-x {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0;
  border: none; border-radius: 50%; background: rgba(220, 38, 38, .92); color: #fff;
  font-size: 13px; line-height: 18px; text-align: center; cursor: pointer;
}
.thumb-x:hover { background: #b91c1c; }
.picker-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
.picker-item input { margin-top: 5px; }
.sub-q { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.file-hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.per-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.per-item:last-child { border-bottom: none; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-weight: 500; font-size: 12.5px; }

/* ---- 筛选按钮 ---- */
.filter-row { display: flex; gap: 6px; }
.filter-row .btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---- 班级分组 ---- */
.group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.group-head h3 { font-size: 15.5px; font-weight: 700; }

/* ---- 错题本 ---- */
.q-mine { background: var(--red-soft); border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 13.5px; color: #991b1b; white-space: pre-wrap; }
.wb-done .q-content { opacity: .78; }
.redo-box { background: #f8fafc; border-radius: 10px; padding: 12px; margin-top: 10px; }
.redo-box label { margin-bottom: 8px; }

/* ---- 宠物 ---- */
.pet-card { max-width: 620px; }

/* ============================================================
   3D 宠物舞台（Pet3D）
   ------------------------------------------------------------
   宠物不在卡片里：这一块占满整宽、无卡片边框，直接是 3D 场景的画布。
   宠物自己的数据（名字 / 等级 / 心情）浮在场景左下角（HUD），
   属性条与粮仓放在舞台下方的 .pet-panel 里。
   ============================================================ */
.pet-stage-wrap {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #eef4ff 0%, #ffffff 88%);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
  margin-bottom: 16px;
}
/* 3D 画布容器：高度给足，让宠物有真正站立与活动的空间（不再挤在卡片里） */
.pet3d-host {
  width: 100%;
  height: 380px;
  display: block;
}
.pet3d-host canvas { display: block; width: 100% !important; height: 100% !important; }

/* 场景左下角的信息条：名字 / 等级 / 阶段 / 心情 / 投喂次数 */
.pet-stage-hud {
  position: absolute;
  left: 14px;
  bottom: 12px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  pointer-events: none;
}
.pet-stage-name {
  font-size: 17px; font-weight: 700; color: #1f2937;
  background: rgba(255, 255, 255, .82);
  padding: 3px 12px; border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pet-stage-hud .pet-lv {
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  padding: 2px 9px; border-radius: 999px;
}
.pet-stage-hud .pet-tag {
  font-size: 12px; padding: 3px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .82); border: 1px solid var(--border); color: var(--muted);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pet-stage-hud .pet-tag.stage { color: var(--primary-dark); background: rgba(219, 234, 254, .9); border-color: #dbeafe; font-weight: 600; }
.pet-stage-hud .pet-tag.mood { color: var(--amber); background: rgba(254, 243, 199, .9); border-color: #fde68a; font-weight: 600; }

/* 场景右下角的小字提示 */
.pet-stage-tip {
  position: absolute; right: 14px; bottom: 40px;
  font-size: 11.5px; color: var(--muted);
  background: rgba(255, 255, 255, .78);
  padding: 3px 10px; border-radius: 999px;
  pointer-events: none;
  max-width: 62%;
  text-align: right;
}

/* 舞台下方的属性面板 */
.pet-panel { max-width: 100%; }

/* 3D 加载失败时的 2D 兜底：沿用原场景样式，高度与 3D 舞台对齐 */
.pet-fallback { height: 380px; display: flex; flex-direction: column; justify-content: center; }

/* 2D 兜底里的场景（原 pet-scene 保留，仅供 3D 不可用时使用） */
.pet-scene {
  position: relative; overflow: hidden;
  border-radius: 16px;
  padding: 18px 14px 12px;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--pet-glow) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, var(--pet-glow) 0%, #ffffff 78%);
  border: 1px solid var(--border);
  text-align: center;
}
/* 地面：一条椭圆色带，把宠物「托」起来 */
.pet-scene::after {
  content: ''; position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%);
  width: 210px; height: 26px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--pet-ground) 0%, rgba(255,255,255,0) 100%);
}

.pet-sky { position: absolute; inset: 0; pointer-events: none; }
.pet-cloud { position: absolute; font-size: 22px; opacity: .5; animation: petDrift 9s ease-in-out infinite; }
.pet-cloud.c1 { left: 8%; top: 12px; }
.pet-cloud.c2 { right: 9%; top: 26px; font-size: 17px; animation-delay: -4s; }
@keyframes petDrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(12px); } }

/* 心情飘浮物：从宠物身边缓缓升起 */
.pet-float { position: absolute; font-size: 15px; opacity: 0; animation: petRise 3.4s ease-in-out infinite; }
.pet-float.f1 { left: 24%; top: 52%; animation-delay: 0s; }
.pet-float.f2 { right: 23%; top: 48%; font-size: 13px; animation-delay: -1.1s; }
.pet-float.f3 { left: 31%; top: 40%; font-size: 12px; animation-delay: -2.2s; }
@keyframes petRise {
  0% { opacity: 0; transform: translateY(6px) scale(.7); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-34px) scale(1.15); }
}

/* 宠物背后的光晕，随呼吸一起放大缩小 */
.pet-glow {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 168px; height: 168px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--pet-aura) 0%, rgba(255,255,255,0) 72%);
  opacity: .42; animation: petBreath 3.2s ease-in-out infinite;
}
@keyframes petBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .38; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: .55; }
}

.pet-body { position: relative; display: inline-block; z-index: 2; }
.pet-halo { position: absolute; inset: -18px; font-size: 0; pointer-events: none; }
.pet-halo::before {
  content: '✨'; position: absolute; left: -6px; top: 6px; font-size: 15px; opacity: .85;
  animation: petSparkle 2.4s ease-in-out infinite;
}
.pet-halo::after {
  content: '✨'; position: absolute; right: -4px; top: 22px; font-size: 12px; opacity: .7;
  animation: petSparkle 2.4s ease-in-out infinite; animation-delay: -1.2s;
}
@keyframes petSparkle { 0%,100% { opacity: .25; transform: scale(.85); } 50% { opacity: .95; transform: scale(1.1); } }

/* 形象主体：上下轻浮 + 轻微摇摆，看起来在呼吸 */
.pet-avatar-wrap { position: relative; display: inline-block; }
.pet-avatar {
  line-height: 1.1; display: inline-block;
  filter: drop-shadow(0 8px 12px rgba(15, 23, 42, .18));
  animation: petBob 2.8s ease-in-out infinite;
}
@keyframes petBob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-9px) rotate(1.2deg); }
}
/* 饿了：动作变慢、气色发暗；饱了：弹得更欢 */
.pet-scene.mood-hungry .pet-avatar { animation-duration: 3.6s; filter: drop-shadow(0 8px 12px rgba(15,23,42,.18)) saturate(.8); }
.pet-scene.mood-starving .pet-avatar { animation-duration: 4.6s; filter: drop-shadow(0 8px 12px rgba(15,23,42,.18)) saturate(.55) brightness(.96); }
.pet-scene.mood-happy .pet-avatar { animation: petHop 1.7s ease-in-out infinite; }
@keyframes petHop {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-12px) scale(1.04); }
  60% { transform: translateY(-4px) scale(.99); }
}

/* 头顶心情气泡 */
.pet-bubble {
  position: absolute; right: -18px; top: -6px;
  background: #fff; border: 1.5px solid var(--border); border-radius: 999px;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; box-shadow: 0 3px 10px rgba(15, 23, 42, .1);
  animation: petBubble 2.2s ease-in-out infinite;
}
@keyframes petBubble {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.08); }
}

.pet-crown {
  position: absolute; left: 50%; top: -20px; transform: translateX(-50%);
  font-size: 26px; animation: petCrown 2.6s ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(217, 119, 6, .35));
}
@keyframes petCrown {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-6deg); }
  50% { transform: translateX(-50%) translateY(-4px) rotate(6deg); }
}

/* 影子：随身体起伏同步缩放，坐实「离地」感 */
.pet-shadow {
  position: relative; z-index: 1;
  width: 96px; height: 14px; margin: -10px auto 0;
  border-radius: 50%; background: rgba(15, 23, 42, .13);
  filter: blur(3px);
  animation: petShadow 2.8s ease-in-out infinite;
}
@keyframes petShadow {
  0%, 100% { transform: scaleX(1); opacity: .8; }
  50% { transform: scaleX(.82); opacity: .5; }
}

/* 脚下的小圆台 + 物种配饰 */
.pet-podium {
  position: relative; z-index: 2;
  width: 128px; height: 34px; margin: 2px auto 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, var(--pet-ground) 100%);
  border: 1px solid rgba(15, 23, 42, .06);
  box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
  display: flex; align-items: center; justify-content: center;
}
.pet-prop { font-size: 15px; opacity: .85; animation: petBob 3.4s ease-in-out infinite; }

/* 名字牌 */
.pet-plate {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 5px 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .07);
}
.pet-name { font-size: 17px; font-weight: 700; }
.pet-lv {
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  padding: 1px 8px; border-radius: 999px;
}

.pet-tags { position: relative; z-index: 2; display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.pet-tag {
  font-size: 12px; padding: 3px 11px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border); color: var(--muted);
}
.pet-tag.stage { color: var(--primary-dark); background: var(--primary-soft); border-color: #dbeafe; font-weight: 600; }
.pet-tag.mood { color: var(--amber); background: var(--amber-soft); border-color: #fde68a; font-weight: 600; }
.pet-tag.fed { color: var(--muted); }

/* 状态区：两条带光效的进度条 */
.pet-stat-grid { display: grid; gap: 12px; margin-top: 18px; }
.pet-stat { background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; }
.pet-stat-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.pet-stat-head b { margin-left: auto; font-size: 14px; color: var(--text); font-weight: 700; }
.pet-stat-head b em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.pet-stat-ico { font-size: 14px; }
.pet-track {
  position: relative; height: 12px; margin-top: 9px; border-radius: 999px;
  background: #e9eef6; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .07);
}
.pet-track i {
  display: block; height: 100%; border-radius: 999px; position: relative;
  transition: width .55s cubic-bezier(.34, 1.4, .64, 1);
  overflow: hidden;
}
/* 流动高光：让进度条看起来是「活」的 */
.pet-track i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 75%);
  animation: petShine 2.1s linear infinite;
}
@keyframes petShine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.fill-exp { background: linear-gradient(90deg, #60a5fa 0%, var(--primary) 55%, #7c3aed 100%); }
.fill-full { background: linear-gradient(90deg, #fcd34d 0%, var(--amber) 100%); }
.fill-full.low { background: linear-gradient(90deg, #f87171 0%, var(--red) 100%); }
.pet-stat-foot { margin-top: 7px; font-size: 11.5px; color: var(--muted); }
.pet-stat-foot b { color: var(--text); }

.pet-tip { margin-top: 14px; }

/* 粮仓 */
.pet-larder { margin-top: 16px; }
.pet-larder-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted); margin-bottom: 10px;
}
.pet-larder-ico { font-size: 15px; }
.pet-larder-head b { margin-left: auto; color: var(--text); font-size: 13px; }
.pet-larder-empty {
  padding: 18px 0; text-align: center; font-size: 13px; color: var(--muted);
  background: #f8fafc; border: 1px dashed var(--border); border-radius: 12px;
}
.food-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.food-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 10px 11px; border-radius: 13px;
  border: 1.5px solid var(--border); background: #fff;
  font-family: inherit; cursor: pointer; transition: transform .16s, box-shadow .16s, border-color .16s;
}
.food-card.has:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 8px 20px rgba(37, 99, 235, .16); }
.food-card.has:active { transform: translateY(-1px) scale(.98); }
.food-card.none { opacity: .5; cursor: not-allowed; background: #f8fafc; }
.food-emoji { font-size: 28px; line-height: 1.2; }
.food-card.has:hover .food-emoji { animation: petHop 1s ease-in-out infinite; }
.food-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.food-gain { font-size: 11.5px; color: var(--green); font-weight: 600; }
.food-stock { font-size: 11px; color: var(--muted); }
.food-card.has .food-stock { color: var(--primary-dark); font-weight: 600; }

/* 领养页：更大的形象卡 */
.pet-choose { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.pet-opt {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 13px 6px 11px;
  border: 1.5px solid var(--border); border-radius: 13px; background: #fff;
  cursor: pointer; font-family: inherit; transition: all .18s;
}
.pet-opt .emo { font-size: 34px; line-height: 1.15; transition: transform .18s; }
.pet-opt .nm { font-size: 12.5px; color: var(--muted); }
.pet-opt:hover { transform: translateY(-2px); border-color: #c7d2fe; }
.pet-opt:hover .emo { transform: scale(1.12) rotate(-4deg); }
.pet-opt.active { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 6px 16px rgba(37, 99, 235, .14); }
.pet-opt.active .nm { color: var(--primary-dark); font-weight: 600; }
.pet-opt.active .emo { animation: petBob 2s ease-in-out infinite; }

/* 投喂动效：食物飞入 + 宠物进食弹跳 + 冒爱心 */
.feed-fly {
  position: absolute; left: 50%; bottom: 42px; z-index: 5;
  font-size: 26px; transform: translateX(-50%); pointer-events: none;
  animation: feedFly .72s cubic-bezier(.4, 1.3, .6, 1) forwards;
}
@keyframes feedFly {
  0% { opacity: 0; transform: translate(-50%, 34px) scale(.5) rotate(-25deg); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1.05) rotate(12deg); }
}
.pet-body.eating .pet-avatar { animation: petEat .62s ease-out 2; }
@keyframes petEat {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-6px) scale(1.12, .9); }
  65% { transform: translateY(0) scale(.94, 1.08); }
}
.feed-heart {
  position: absolute; left: 50%; top: 44%; z-index: 5;
  font-size: 17px; pointer-events: none;
  animation: feedHeart 1s ease-out forwards;
}
@keyframes feedHeart {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -58px) scale(1.25); }
}

/* 减动效偏好：全部静止，只保留信息 */
@media (prefers-reduced-motion: reduce) {
  .pet-avatar, .pet-crown, .pet-bubble, .pet-float, .pet-cloud, .pet-glow,
  .pet-shadow, .pet-prop, .pet-halo::before, .pet-halo::after, .pet-track i::after,
  .pet-opt.active .emo, .food-card.has:hover .food-emoji,
  .feed-fly, .feed-heart, .pet-body.eating .pet-avatar { animation: none !important; }
  .feed-fly, .feed-heart { display: none; }
}

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%);
  background: #111827; color: #fff; padding: 10px 20px; border-radius: 999px;
  font-size: 14px; z-index: 99; box-shadow: 0 6px 24px rgba(0,0,0,.25); max-width: 86vw;
}
.toast.ok { background: var(--green); }
.toast.err { background: var(--red); }

/* ---- 应用内弹窗 ----
   不能依赖原生 prompt / confirm / alert：页面被嵌进 iframe 预览时，
   浏览器沙箱会拦掉它们并让 prompt 直接返回 null，表现就是「点了没反应」。 */
.overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.modal { width: 100%; max-width: 400px; max-height: 86vh; overflow-y: auto; padding: 20px; }
.modal h3 { margin: 0 0 10px; font-size: 16.5px; }
.modal-msg {
  margin: 0 0 14px; font-size: 13.5px; line-height: 1.7;
  color: var(--muted); white-space: pre-line;
}
.modal-copy {
  margin: 0 0 14px; padding: 10px 12px; font-size: 12.5px; line-height: 1.7;
  color: var(--text); background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; white-space: pre-line; word-break: break-word;
}
.modal .row { margin-top: 2px; }
.modal .row .btn { flex: 1; }
/* 弹窗字段下的预设话术 chips（发积分说明等）：点一下填进输入框，可换行排布 */
.dlg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 12px; }
.dlg-chip {
  padding: 4px 10px; font-size: 12px; line-height: 1.4;
  color: var(--muted); background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.dlg-chip:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }

@media (max-width: 640px) {
  .topbar-inner { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .nav { order: 3; width: 100%; }
  .user-box { margin-left: auto; }
}

/* ---------- 测验卷 / 试卷（组卷、卷面预览、打印） ---------- */
.badge.purple { background: #ede9fe; color: #6d28d9; }
.card-paper { border-left: 3px solid #8b5cf6; }

/* ---------- 题库共享：公有 / 私有 ---------- */
/* 「公有」徽章：同事分享的题，能看、能选进自己的卷子，但不能改。
   卡片左侧一条细色带做整体提示，一眼就能从列表里认出「这不是我的题」。 */
.badge.cyan { background: #e0f2fe; color: #0369a1; }
.qcard-readonly { box-shadow: inset 3px 0 0 0 #7dd3fc; }
.qcard-readonly .qcard-tools { opacity: .92; }

/* ---------- 批量多选：一次设好几条公有 / 私有 ---------- */
/* 卡片上的勾选框：跟在徽章行/标题里，字号跟正文一致但不抢眼。
   不在自己名下的条目置灰，明确告诉用户「这条改不了」。 */
.batch-pick {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 400; font-size: 12.5px; color: var(--muted);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.batch-pick input { width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: var(--primary); }
.batch-pick.off { opacity: .45; cursor: not-allowed; }
.batch-pick.off input { cursor: not-allowed; }
/* 勾中的卡片整体描一圈，滚动列表时也能一眼看清选中了哪些 */
.qcard-picked { outline: 2px solid var(--primary); outline-offset: 1px; }
.batch-toggle-row { margin-top: 12px; align-items: center; gap: 8px; }
/* 「批量选择」按钮按下去时的选中态（写在 .btn.ghost 之后，同优先级后者胜） */
.btn.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.batch-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.batch-count { font-size: 13px; color: var(--muted); }
.batch-count b { color: var(--primary); font-size: 15px; }
/* 课程卡标题是加粗大字号，勾选框跟在前面时要跟正文一样轻，并留一点间距 */
.crs-title .batch-pick { margin-right: 6px; }

.sheet-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
/* 卷面：屏幕上是一张「纸」，打印时就是真正的纸 */
.sheet {
  background: #fff; color: #111; border: 1px solid var(--border);
  border-radius: 12px; padding: 26px 28px; max-width: 820px;
}
.sheet-head h1 { font-size: 20px; text-align: center; margin: 0 0 6px; font-weight: 800; }
.sheet-sub { text-align: center; color: #666; font-size: 13px; margin-bottom: 8px; white-space: pre-wrap; }
.sheet-line {
  display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #333;
  border-bottom: 1px dashed var(--border); padding-bottom: 8px; margin-bottom: 16px;
}
.sheet .q { margin: 0 0 16px; }
.sheet .q-head { font-weight: 700; font-size: 14.5px; }
.sheet .q-tag { font-weight: 400; color: #6b7280; font-size: 12px; margin-left: 6px; }
.sheet .q-body { white-space: pre-wrap; margin: 2px 0 0; }
.sheet .q-ans { color: #0a7a52; font-size: 13px; margin-top: 4px; }
.sheet .q-space { height: 52px; border-bottom: 1px dotted #cbd5e1; }
.sheet-foot { margin-top: 20px; text-align: center; color: #9ca3af; font-size: 12px; }

/* 答题卡（错题重做打印时附带的一页）：单独起一页，解答区给浅色横线辅助书写 */
.ac-page { break-before: page; page-break-before: always; }
/* 铺满整张 A4：整页按 A4 可写区高度（297mm − 上下页边距 20mm，留 2mm 余量）做纵向 flex，
   最后一个解答区自动撑满剩余高度、页脚贴到页底——屏幕预览所见即所得，打印正好铺满一张 A4 */
.ac-page { display: flex; flex-direction: column; min-height: 275mm; }
.ac-page > .sheet-foot { margin-top: auto; }
.ac-grow { flex: 1; display: flex; flex-direction: column; }
.ac-grow .ac-box { flex: 1; height: auto !important; min-height: 40mm; }
.ac-zone { margin: 0 0 6px; }
.ac-lab { font-weight: 700; font-size: 14px; margin: 4px 0 10px; }
.ac-box {
  height: 170mm; border: 1.5px dashed #cbd5e1; border-radius: 8px;
  background: repeating-linear-gradient(transparent, transparent 39px, #eef2f7 39px, #eef2f7 40px);
}
.ac-page .sheet-foot { margin-top: 12px; }
/* 答题卡按题型分块（页内预览也走这套，之前只写在新窗口/下载用的卷面 CSS 里）：
   后续页窄页眉 / 客观题括号行 / 填空题横线 */
.ac-mini {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: #666;
  border-bottom: 1px dashed var(--border); padding-bottom: 4px; margin-bottom: 10px;
}
.ac-sec { margin: 0 0 10px; break-inside: avoid; page-break-inside: avoid; }
.ac-sec .ac-lab { margin-bottom: 6px; }
.ac-optrow {
  display: flex; align-items: center; gap: 10px; font-size: 14px;
  padding: 4px 2px; border-bottom: 1px dotted #e2e8f0;
}
.ac-optrow b { min-width: 30px; font-weight: 600; }
.ac-brk { letter-spacing: 2px; font-weight: 600; }
.ac-fillrow { display: flex; align-items: flex-end; gap: 8px; font-size: 14px; padding: 6px 2px; }
.ac-fillrow b { min-width: 30px; font-weight: 600; }
.ac-blank { flex: 1; border-bottom: 1.5px solid #333; min-width: 110mm; height: 16px; }

/* 打印纸张留白：和浏览器默认差不多，明写出来是为了让「一张照片一页」的高度有个准数 */
@page { margin: 10mm; }

@media print {
  .topbar, #toast, .toast, #dialog, #nav, .no-print, .sheet-toolbar { display: none !important; }
  body { background: #fff; }
  .page { padding: 0 !important; max-width: none !important; }
  .sheet { border: none; border-radius: 0; padding: 0; max-width: none; box-shadow: none; }
  .sheet .q { page-break-inside: avoid; }
  /* 题图必须整张留在同一页，而且自动适应 A4 纸：宽度放满卷面、限高 215mm
     （一页可打印区放得下），object-fit 保证只缩不拉伸变形，居中显示。 */
  #sheet-body .img-grid img, #sheet-body .q-ans-imgs img {
    max-height: 215mm; object-fit: contain;
    break-inside: avoid; page-break-inside: avoid;
  }
  #sheet-body .img-grid img { width: auto; height: auto; max-width: 100%; }
  /* 单题卷（错题重做）：与通用规则一致 */
  .sheet .q-one .img-grid img { width: auto; max-width: 100%; height: auto; max-height: 215mm; }
  /* 错题重做是「单题卷」：整题比一页还高时，page-break-inside:avoid 顶着不让断，
     浏览器会先把整题甩到下一页，前面就空出一整页——单题卷允许按页断开。 */
  .sheet .q.q-one { page-break-inside: auto; break-inside: auto; }
  .sheet .q-space { break-inside: avoid; page-break-inside: avoid; }
  .sheet-foot { break-before: avoid; page-break-before: avoid; }
  /* 答题卡整页固定：从新的一页开始，解答区整块不跨页 */
  #sheet-body .ac-page { break-before: page; page-break-before: always; }
  #sheet-body .ac-box { break-inside: avoid; page-break-inside: avoid; }
}

/* ============================================================
   数学主题层（习题册 / 演算纸风格）
   末尾统一覆盖，原规则保持不动：改配色、加坐标纸底纹、标题与数字走衬线体、
   题面用浅网格框、运势与名言卡片加公式化的装饰。功能类名（badge / card /
   btn / grid 等）一律不改，避免影响内联事件与既有测试断言。
   ============================================================ */
:root {
  /* 主色：稍微压深的学术蓝，像钢笔写在坐标纸上的颜色 */
  --primary: #2f5bd7;
  --primary-dark: #1e40af;
  --primary-soft: #eef3ff;
  --ink: #16233a;
  --line: #dfe6f3;
  --accent: #0f9d8f;          /* 公式强调色（青） */
  --accent-soft: #e6f7f5;
  --font-math: "Cambria Math", "Cambria", "Georgia", "Times New Roman", "Songti SC", "STSong", serif;
  --radius: 13px;
  --shadow: 0 1px 2px rgba(22, 35, 58, .06), 0 6px 20px rgba(22, 35, 58, .06);
}

/* ---- 页面背景：按用户要求用纯白，不再铺坐标纸网格 ----
   （数学风格保留在字体、配色、题面框等元素上，背景保持干净） */
body {
  background: #fff;
  color: var(--ink);
}

/* ---- 标题与数字走衬线体，像教材排版 ---- */
h1, h2, h3, .page-head h2, .stat .num, .score-big, .item-title,
.pet-name, .sheet-head h1, .brand, .login-brand h1 {
  font-family: var(--font-math);
  letter-spacing: .2px;
}
.stat .num, .score-big, .points-chip { font-variant-numeric: tabular-nums; }
.page-head h2 {
  position: relative; padding-left: 14px; font-size: 20px; font-weight: 700;
}
/* 标题左侧的演算竖线：青→蓝双色，替代原来的纯文字标题 */
.page-head h2::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 1.05em; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--primary));
}

/* ---- 卡片：更轻的描边 + 大圆角，顶部一条极淡的参考线 ---- */
.card, .stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card { position: relative; }
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, rgba(47, 91, 215, .18), rgba(15, 157, 143, .18));
  pointer-events: none;
}
/* 卷面卡片例外：它就是一张纸，不要装饰条 */
.card.sheet::before, .card.form-card::before { display: none; }
.card-paper::before { background: linear-gradient(90deg, rgba(109, 40, 217, .3), rgba(47, 91, 215, .2)); }

/* ---- 顶栏：白底 + 底部细线，图标块带渐变 ---- */
.topbar { background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.logo.small, .login-brand .logo {
  background: linear-gradient(160deg, var(--primary), var(--accent));
  box-shadow: 0 4px 12px rgba(47, 91, 215, .28);
  font-family: var(--font-math);
}
.logo.small { border-radius: 9px; }
.nav button { border-radius: 9px; transition: background .15s, color .15s; }
.nav button:hover:not(.active) { background: #f2f5fc; color: var(--ink); }
.nav button.active {
  background: var(--primary-soft); color: var(--primary-dark); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---- 按钮：主按钮轻微渐变，悬浮上浮 1px ---- */
.btn { border-radius: 9px; transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s; }
.btn.primary {
  background: linear-gradient(180deg, #3b6ae0, var(--primary));
  box-shadow: 0 1px 2px rgba(30, 64, 175, .25);
}
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #3563d6, var(--primary-dark)); transform: translateY(-1px); }
.btn.ghost:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-dark); background: #fbfcff; }
.btn:active:not(:disabled) { transform: translateY(0); }

/* ---- 题面 / 答案解析：像草稿纸上的分区 ---- */
.q-content {
  background-color: #fafcff;
  background-image:
    linear-gradient(rgba(47, 91, 215, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 91, 215, .1) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 4px 10px 10px 4px;
  padding: 11px 13px;
}
.q-answer { border-left: 3px solid var(--green); border-radius: 4px 10px 10px 4px; background: var(--green-soft); }
.q-analysis { border-left: 3px solid var(--amber); border-radius: 4px 10px 10px 4px; }
.q-mine { border-left: 3px solid var(--red); border-radius: 4px 10px 10px 4px; }
.feedback-box, .redo-box, .modal-copy, .sub-q, .picker-item { border: 1px solid var(--line); }

/* ---- 徽章：小一号、加一点内描边，更像标签贴 ---- */
.badge { border: 1px solid rgba(22, 35, 58, .06); letter-spacing: .2px; }
.badge.blue { border-color: rgba(47, 91, 215, .18); }

/* ---- 空状态：一枚淡数学符号，别让大片留白太素 ---- */
.empty { color: var(--muted); }
.empty::before {
  content: "∑"; display: block; margin-bottom: 6px;
  font-family: var(--font-math); font-size: 30px; line-height: 1;
  color: rgba(47, 91, 215, .22);
}

/* ---- 登录页：坐标纸 + 漂浮的数学符号 + 公式条 ---- */
.login-wrap { position: relative; overflow: hidden; }
.login-deco { position: absolute; inset: 0; pointer-events: none; }
.login-deco span {
  position: absolute; font-family: var(--font-math); font-weight: 700;
  color: rgba(47, 91, 215, .12); user-select: none;
}
.login-deco span:nth-child(1) { font-size: 96px; top: 8%; left: 6%; transform: rotate(-12deg); }
.login-deco span:nth-child(2) { font-size: 72px; top: 62%; left: 12%; transform: rotate(9deg); }
.login-deco span:nth-child(3) { font-size: 84px; bottom: 10%; right: 8%; transform: rotate(-6deg); }
.login-deco span:nth-child(4) { font-size: 64px; top: 16%; right: 12%; transform: rotate(14deg); }
.login-deco span:nth-child(5) { font-size: 56px; bottom: 22%; right: 22%; transform: rotate(-18deg); }
.login-deco span:nth-child(6) { font-size: 52px; top: 42%; left: 30%; transform: rotate(20deg); color: rgba(15, 157, 143, .12); }
.login-card {
  position: relative; z-index: 1; padding: 34px 28px 26px;
  border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 2px 4px rgba(22, 35, 58, .05), 0 22px 50px rgba(22, 35, 58, .12);
}
.login-brand h1 { font-size: 25px; letter-spacing: 1px; }
.login-brand .sub { letter-spacing: 2px; }
.login-brand .logo { width: 60px; height: 60px; border-radius: 18px; font-size: 32px; margin-bottom: 12px; }
/* 公式条：一条细线分隔的数学小抄 */
.formula-strip {
  font-family: var(--font-math); font-size: 11.5px; letter-spacing: .3px;
  color: rgba(47, 91, 215, .62); text-align: center;
  padding: 8px 0 10px; margin: 0 0 14px;
  border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
  word-spacing: 2px; white-space: nowrap;
}

/* ---- 学生首页右侧：今日运势 / 励志名言 ---- */
.side-card { padding: 18px; }
.side-card::before { background: linear-gradient(90deg, rgba(15, 157, 143, .35), rgba(47, 91, 215, .18)); }
.side-lab {
  font-family: var(--font-math); font-size: 13px; font-weight: 700; letter-spacing: 1px;
  color: var(--accent); display: flex; align-items: center; gap: 6px;
}
/* 装饰线用 order 排到「标题 → 下拉」中间，让排行榜的下拉靠右站 */
.side-lab::after { content: ""; flex: 1; order: 1; height: 1px; background: linear-gradient(90deg, rgba(15, 157, 143, .35), transparent); }
.side-fortune-lv { margin: 10px 0 2px; display: flex; align-items: baseline; gap: 8px; }
.side-fortune-lv .lv {
  font-family: var(--font-math); font-size: 34px; font-weight: 800; line-height: 1;
  background: linear-gradient(160deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.side-card .q-content { margin-top: 10px; border-left-color: var(--accent); }
.side-quote {
  font-family: var(--font-math); font-size: 15px; line-height: 1.75;
  color: #1f3557; position: relative; padding-left: 22px; margin-top: 8px;
}
.side-quote::before {
  content: "\201C"; position: absolute; left: -2px; top: -6px;
  font-size: 40px; line-height: 1; color: rgba(47, 91, 215, .22); font-family: var(--font-math);
}
.side-by { text-align: right; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* ---- 排行榜（学生首页侧栏 / 老师·管理员独立页共用） ---- */
.side-lab .rank-sel { order: 2; margin-left: 2px; }   /* 视角下拉常显（用户点名「这个不隐藏」） */
/* 老师 / 管理员端：标题旁标出「看的是哪一片」（本班 / 本校 / 全部） */
.rank-scope {
  order: 0; font-family: var(--font-math); font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  color: var(--muted); background: rgba(47, 91, 215, .08);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 42%;
}
.rank-list { list-style: none; margin: 10px 0 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
/* 滚动条平时隐藏（悬停排行榜卡时才出现）——列表照常滚轮/触摸滚动 */
.rank-list { scrollbar-width: none; }
.rank-list::-webkit-scrollbar { width: 6px; }
.rank-list::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .45); border-radius: 6px; }
.rank-list::-webkit-scrollbar-track { background: transparent; }
#stu-rank:hover .rank-list { scrollbar-width: thin; }
#stu-rank:hover .rank-list::-webkit-scrollbar { width: 6px; }
.rank-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 5.5px 0; border-bottom: 1px dashed rgba(47, 91, 215, .14);
  font-size: 13.5px;
}
.rank-list li:last-child { border-bottom: none; }
.rank-list .rk { width: 26px; text-align: center; font-weight: 800; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.rank-list .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list .vl { font-weight: 800; color: var(--primary); flex: none; font-variant-numeric: tabular-nums; }
.rank-list .vl i { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--muted); margin-left: 1px; }
.rank-list li.me .nm { color: var(--primary); font-weight: 800; }
.rank-list li.me::after { content: "我"; flex: none; font-size: 10.5px; color: #fff; background: var(--primary); border-radius: 6px; padding: 1px 5px; }
.rank-mine {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(47, 91, 215, .16);
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* ---- 卷面：像一张真的卷子（衬线标题 + 装订线） ---- */
.sheet { border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(22, 35, 58, .06); }
.sheet-head h1 { letter-spacing: 3px; }
.sheet .q-head { font-family: var(--font-math); }
.sheet-line { border-bottom-style: dashed; }

/* ---- 其他小组件 ---- */
.points-chip { font-family: var(--font-math); box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .18); }
.table th { background: #f8faff; }
.per-item { border-bottom-style: dashed; }
.stat { background: linear-gradient(180deg, #ffffff, #fafcff); }
.thumb img { border-radius: 9px; }
.modal { border-radius: 16px; }
.modal h3 { font-family: var(--font-math); }
.footer-note, .file-hint { line-height: 1.6; }

@media (max-width: 640px) {
  .login-deco span:nth-child(3), .login-deco span:nth-child(5) { display: none; }
  .page-head h2 { font-size: 18px; }
}

/* 打印：去掉坐标纸与装饰条，只留内容 */
@media print {
  body { background: #fff !important; background-image: none !important; }
  .card::before, .page-head h2::before, .empty::before, .login-deco { display: none !important; }
  .card, .stat, .q-content { box-shadow: none !important; background-image: none !important; border-color: #ddd; }
}

/* ============================================================
   课程资料（老师建课传资料 · 学生「我的课程」）
   封面、课程卡、资料卡、首页板块、资料查看器；沿用数学主题层的变量。
   ============================================================ */

/* ---- 封面：老师传的图铺满；没传就用数学符号占位，不留白块 ---- */
.crs-cover, .crs-mini-cover {
  display: block; background-size: cover; background-position: center;
  border-radius: 10px; border: 1px solid var(--line);
  background-color: #f7faff; flex: none;
}
.crs-cover { width: 100%; height: 128px; margin-bottom: 12px; }
.crs-mini-cover { width: 100%; height: 74px; margin-bottom: 8px; }
.crs-cover.cover-empty, .crs-mini-cover.cover-empty {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-math); font-weight: 800;
  color: rgba(47, 91, 215, .26);
  background-image:
    linear-gradient(rgba(47, 91, 215, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 91, 215, .07) 1px, transparent 1px);
  background-size: 18px 18px, 18px 18px;
}
.crs-cover.cover-empty { font-size: 42px; }
.crs-mini-cover.cover-empty { font-size: 26px; }
/* 资料卡上的封面：小图（约半张卡宽），不再整卡铺满；手机上最多占满卡宽 */
.crs-cover.ci-cover { width: 200px; max-width: 100%; height: 130px; margin-bottom: 10px; }
.crs-cover.ci-cover.cover-empty { font-size: 34px; }

/* ---- 封面裁剪弹窗（独立遮罩，叠在上传表单之上；#crop-overlay 复用 .overlay） ---- */
#crop-overlay { z-index: 85; }
.crop-stage {
  position: relative; margin: 0 auto 10px; border-radius: 8px; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; background: #0f172a;
}
.crop-stage img { display: block; width: 100%; height: 100%; pointer-events: none; }
.crop-box {
  position: absolute; border: 2px solid #fff; cursor: move;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, .45);
}
.crop-handle {
  position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px;
  background: #fff; border: 2px solid var(--primary, #2f5bd7); border-radius: 4px;
  cursor: nwse-resize;
}

/* ---- 课程卡（老师端列表 / 学生端「我的课程」共用） ---- */
.crs-card { display: flex; flex-direction: column; }
.crs-title {
  font-family: var(--font-math); font-weight: 700; font-size: 16px;
  margin-bottom: 6px; word-break: break-word;
}
/* 按钮贴卡片底部，一排卡片高度参差时也整齐 */
.crs-card .item-actions { margin-top: auto; padding-top: 4px; }
/* 详情页头部：封面在左、信息在右 */
.crs-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.crs-head .crs-cover { width: 200px; height: 130px; margin-bottom: 0; }
.crs-head .q-content { margin-top: 8px; }

/* ---- 资料卡 ---- */
.ci-card { display: flex; flex-direction: column; }
.ci-head { display: flex; align-items: flex-start; gap: 8px; }
.ci-title {
  display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0;
  font-weight: 600; font-size: 15px; word-break: break-word;
}
.ci-ico { font-size: 17px; line-height: 1; flex: none; }
.ci-tools { display: flex; gap: 6px; white-space: nowrap; flex: none; }
.ci-card .item-actions { margin-top: auto; padding-top: 10px; }
/* 封面 + 知识点标签并排：封面小图在左，标签填在右边的空档里 */
.ci-body { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ci-side { flex: 1; min-width: 0; padding-top: 2px; }
.ci-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kp-tag {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(47, 91, 215, .35); background: rgba(47, 91, 215, .08);
  color: var(--primary-dark, #2f5bd7); font-size: 12.5px; line-height: 1.5;
  cursor: pointer; user-select: none; transition: background .15s, border-color .15s;
}
.kp-tag:hover { background: rgba(47, 91, 215, .16); border-color: var(--primary, #2f5bd7); }
.kp-tag.on { background: var(--primary, #2f5bd7); border-color: var(--primary, #2f5bd7); color: #fff; cursor: default; }
/* 课程列表页顶部的知识点词云（炫酷版）：渐变卡片 + 漂浮数学符号 + 胶囊标签 */
.crs-cloud-card {
  position: relative; overflow: hidden;
  padding: 16px 20px 18px; margin-bottom: 14px;
  border: 1px solid rgba(47, 91, 215, .16);
  background: linear-gradient(135deg, #f4f7ff 0%, #eef1ff 55%, #fdf3f8 100%);
  border-radius: 16px;
  box-shadow: 0 8px 24px -12px rgba(47, 91, 215, .35);
}
.cloud-deco {
  position: absolute; font-weight: 900; line-height: 1;
  color: rgba(47, 91, 215, .06); pointer-events: none; user-select: none;
}
.cloud-head { position: relative; display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cloud-title {
  font-weight: 900; font-size: 15px; letter-spacing: .5px;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #be185d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cloud-sub { font-size: 12px; color: var(--muted, #64748b); }
.crs-cloud {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0;
}
.cloud-tag {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .32em .85em; border-radius: 999px;
  font-weight: 700; line-height: 1.5; cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, .8);
  border: 1.5px solid rgba(47, 91, 215, .25);
  border-color: color-mix(in srgb, currentColor 32%, transparent);
  box-shadow: 0 2px 8px -3px rgba(47, 91, 215, .25);
  box-shadow: 0 2px 8px -3px color-mix(in srgb, currentColor 45%, transparent);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  animation: cloud-pop .45s ease backwards;
}
.cloud-tag:nth-child(1) { animation-delay: .02s; }
.cloud-tag:nth-child(2) { animation-delay: .07s; }
.cloud-tag:nth-child(3) { animation-delay: .12s; }
.cloud-tag:nth-child(4) { animation-delay: .17s; }
.cloud-tag:nth-child(5) { animation-delay: .22s; }
.cloud-tag:nth-child(6) { animation-delay: .27s; }
.cloud-tag:nth-child(n+7) { animation-delay: .32s; }
.cloud-tag:hover {
  transform: translateY(-3px) scale(1.07);
  background: #fff;
  box-shadow: 0 8px 18px -6px color-mix(in srgb, currentColor 60%, transparent);
}
.cloud-tag.on {
  background: color-mix(in srgb, currentColor 13%, #fff);
  border-color: currentColor;
  text-decoration: underline;
}
.cloud-n {
  font-style: normal; font-size: .58em; font-weight: 800; line-height: 1;
  padding: .3em .6em; border-radius: 999px;
  background: color-mix(in srgb, currentColor 15%, transparent);
}
@keyframes cloud-pop { from { opacity: 0; transform: translateY(10px) scale(.85); } }
/* 课程列表顶部的知识点筛选条 */
.crs-tagbar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px;
}

/* ---- 学生端「最新资料」胶囊 ---- */
.crs-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer; font-family: inherit; font-size: 12.5px;
  color: var(--ink); transition: border-color .15s, background .15s, color .15s;
}
.crs-chip:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
.crs-chip .ci-ico { font-size: 14px; }
.crs-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.crs-chip-c { color: var(--muted); font-size: 11.5px; flex: none; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 学生首页「我的课程」板块 ---- */
.home-crs {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px;
}
.home-crs::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, rgba(15, 157, 143, .35), rgba(47, 91, 215, .18));
  pointer-events: none;
}
.home-crs-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.home-crs-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
.home-crs-new {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.home-crs-empty { padding: 16px 18px; }

/* 首页 / 「我的课程」里的课程小卡 */
.crs-mini {
  display: flex; flex-direction: column; padding: 8px; width: 100%;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.crs-mini:hover {
  border-color: var(--primary); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(47, 91, 215, .12);
}
.crs-mini-t {
  font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crs-mini-m { font-size: 11.5px; color: var(--muted); }

/* ---- 资料查看器（图片直显 / 视频播放 / PDF 内嵌 / 其他下载） ---- */
.cm-view { max-width: 860px; }
.cm-media {
  display: block; width: 100%; max-height: 62vh;
  border-radius: 10px; background: #000;
}
.cm-img {
  display: block; margin: 0 auto; max-width: 100%; max-height: 68vh;
  border-radius: 10px; border: 1px solid var(--line);
}
.cm-pdf {
  display: block; width: 100%; height: 68vh; background: #f8faff;
  border: 1px solid var(--line); border-radius: 10px;
}
.cm-file {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  background: #fafcff; border: 1px solid var(--line); border-radius: 12px;
}
.cm-file-ico { font-size: 34px; line-height: 1; flex: none; }
.cm-file-txt { flex: 1; min-width: 0; }
.cm-view .item-actions { margin-top: 14px; }

/* 在线预览：PDF（上传的原件，或 Word 转出来的那份）直接塞 iframe 渲染 */
.pdf-view { max-width: 900px; }
.pdf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.pdf-head h3 { margin: 0; flex: 1; min-width: 0; word-break: break-word; }
.pdf-stage { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #f8faff; }
.pdf-frame { display: block; width: 100%; height: min(70vh, 820px); border: 0; background: #fff; }
/* Word（.docx）离屏渲染容器：只给 html2canvas 截图用，不进页面布局 */
.docx-host { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: #111; }
@media (max-width: 640px) { .pdf-frame { height: 62vh; } }
/* PDF 智能导入：识别结果里的单题图预览 */
.pi-img { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.pi-img img { max-width: 200px; max-height: 220px; border-radius: 6px; border: 1px solid var(--border); }
@media (max-width: 640px) { .pi-img img { max-width: 140px; } }

/* 审核驳回理由：给老师看的一行醒目提示（管理员驳回时必须写） */
.review-note {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 10px;
  background: var(--red-soft); color: var(--red);
  font-size: 13px; line-height: 1.6; word-break: break-word;
}

/* 打印：课程板块与资料卡不进纸质作业 */
@media print {
  .home-crs, .home-crs-empty, .crs-card, .ci-card, .crs-head { display: none !important; }
}

/* ============================================================
   兑换商城：奖品封面（老师上架时选填，学生商城 / 老师奖品卡展示）
   ============================================================ */
.rw-cover { display:block; width:100%; max-height:150px; object-fit:cover; border-radius:10px; border:1px solid var(--line); margin-bottom:8px; }
.rw-cover-box { margin-bottom:10px; }
.rw-cover-prev { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.rw-cover-prev img { width:110px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }

/* ---- 学生账号额度（老师端进度条 + 建号表单说明） ---- */
.quota-bar {
  margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px;
  background: var(--primary-soft); border: 1px solid var(--border);
}
.quota-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.quota-track { margin-top: 8px; height: 6px; border-radius: 999px; background: rgba(37, 99, 235, .14); overflow: hidden; }
.quota-track > i { display: block; height: 100%; border-radius: 999px; transition: width .25s ease; }
.quota-inline {
  margin: -2px 0 12px; padding: 8px 12px; border-radius: 10px;
  background: var(--primary-soft); border: 1px solid var(--border); font-size: 13px;
}

/* ---- 账号有效期（个人中心弹窗 + 列表单元格 + 建号表单说明） ---- */
.pc-exp {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 10px; background: #f9fafb;
  border: 1px solid var(--border); margin: 2px 0 10px;
}
.dlg-sec { font-weight: 700; font-size: 13.5px; color: var(--ink); margin: 2px 0 6px; }
.ttl { font-weight: 700; font-variant-numeric: tabular-nums; }
.ttl.ok { color: var(--green); }
.ttl.warn { color: var(--amber); }
.ttl.danger, .ttl.expired { color: var(--red); }
.ttl.none { color: var(--muted); font-weight: 600; }

/* ---- 题库：分组小标题 / 标签 ---- */
.filter-title { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.tag-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px; font-family: inherit;
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  cursor: pointer; transition: all .15s;
}
.tag-chip:hover { border-color: var(--primary); color: var(--primary); }
.tag-chip.on { background: #ede9fe; border-color: #ddd6fe; color: #6d28d9; }
.tag-chip.static { cursor: default; background: #f8fafc; color: var(--muted); }
.tag-chip.static:hover { border-color: var(--border); color: var(--muted); }
.tag-x {
  border: none; background: none; cursor: pointer; font-size: 13px; line-height: 1;
  color: inherit; padding: 0 0 0 2px; opacity: .7; font-family: inherit;
}
.tag-x:hover { opacity: 1; }
.tag-badge { font-weight: 600; }

/* ---- 题库数据统计 ---- */
.qs-card { padding: 16px 20px; }
.qs-trend { margin: 2px 0 12px; }
.qs-trend-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 8px; }
.qs-trend-head b { color: var(--primary); font-size: 15px; }
.spark { display: flex; gap: 4px; align-items: flex-end; height: 56px; padding: 0 2px; }
.spark-bar {
  flex: 1; min-width: 6px; min-height: 4px; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #93c5fd, var(--primary));
  transition: opacity .15s;
}
.spark-bar:hover { opacity: .75; }
.spark-x { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.qs-dist { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.qs-dist-t {
  font-size: 12px; color: var(--muted); font-weight: 600; min-width: 34px;
}
/* ---- 错题分析 · 出错频率条 ---- */
.freq-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.freq-name { min-width: 74px; font-size: 13px; font-weight: 600; flex: none; }
.freq-track {
  flex: 1; height: 14px; border-radius: 999px; background: #eef2f7; overflow: hidden; display: block;
}
.freq-fill { display: block; height: 100%; border-radius: 999px; transition: width .25s; }
.freq-n { min-width: 58px; text-align: right; font-size: 12.5px; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
/* 按题目错误柱状图：题干摘要列更宽（超长省略），最高那根的「错误率最高」徽章不挤压条形 */
.qbar-name { min-width: 150px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.qbar-badge { flex: none; }
.freq-top .freq-n { color: var(--red); font-weight: 600; }

/* ---- 智能录题中心：四个入口卡片 ---- */
.tool-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tool-card {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-align: left;
  font-family: inherit; cursor: pointer; padding: 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: transform .15s, border-color .15s, box-shadow .15s;
}
.tool-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 6px 20px rgba(37, 99, 235, .14); }
.tool-ico { font-size: 26px; line-height: 1; }
.tool-t { font-size: 15.5px; font-weight: 700; color: var(--text); }
.tool-d { font-size: 13px; color: var(--muted); line-height: 1.6; }
.tool-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* ---- 录题取图区（粘贴 / 拍照 / 拖拽） ---- */
.shot-drop {
  margin-top: 12px; padding: 26px 16px; text-align: center; cursor: pointer;
  border: 2px dashed #c7d2fe; border-radius: 12px; background: #f8faff;
  transition: border-color .15s, background .15s;
}
.shot-drop:hover, .shot-drop.over { border-color: var(--primary); background: var(--primary-soft); }
.shot-ico { font-size: 26px; }
.shot-t { font-size: 14.5px; font-weight: 600; margin-top: 4px; }
.shot-s { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.shot-cam {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; cursor: pointer;
  font-size: 13px; color: var(--primary); font-weight: 600;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff;
}
.shot-cam:hover { border-color: var(--primary); }
.pi-tags-label { font-size: 13px; color: var(--muted); }
label.pi-tags-label { display: block; margin-top: 6px; }

/* ---- PDF 切题工具 ---- */
.ct-topbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
#ct-stage {
  max-height: 58vh; overflow: auto; border: 1px solid var(--border);
  border-radius: 10px; background: #f3f4f6; text-align: center; padding: 6px;
}
#ct-wrap { position: relative; display: inline-block; line-height: 0; }
#ct-wrap img { max-width: 100%; display: block; user-select: none; }
#ct-layer { position: absolute; inset: 0; pointer-events: none; }
.ct-box {
  position: absolute; border: 2px solid var(--primary); background: rgba(37, 99, 235, .14);
  border-radius: 3px;
}
.ct-box-tag {
  position: absolute; top: -19px; left: -2px; font-size: 11px; font-weight: 700;
  background: var(--primary); color: #fff; padding: 1px 6px; border-radius: 4px; line-height: 1.5;
  white-space: nowrap;
}
.ct-ghost {
  position: absolute; display: none; border: 2px dashed var(--primary);
  background: rgba(37, 99, 235, .12); border-radius: 3px; pointer-events: none;
}
.ct-boxlist { display: flex; flex-direction: column; gap: 8px; }
.ct-row { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.ct-row-n {
  width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--primary-soft);
  color: var(--primary); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.ct-row-p { font-size: 12.5px; color: var(--muted); }
.ct-role { flex: none; width: auto; padding: 5px 8px; font-size: 13px; }

/* 「全部作业」页：左边课程表、右边作业列表（窄屏上下堆叠） */
.hw-layout { display: grid; grid-template-columns: minmax(340px, 460px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px) { .hw-layout { grid-template-columns: 1fr; } }
.tt-card { padding: 14px; }
.tt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.tt-upd { font-size: 12px; color: var(--muted); }
.tt-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.tt-table th, .tt-table td { border: 1px solid var(--border); padding: 5px 4px; text-align: center; }
.tt-table thead th { background: var(--primary-soft); color: var(--primary); font-size: 12px; }
.tt-table tbody th { background: #f8fafc; font-weight: 600; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-table td.tt-empty { color: #cbd5e1; }
.tt-table.tt-editing td, .tt-table.tt-editing th { padding: 3px 2px; }
.tt-table input {
  width: 100%; box-sizing: border-box; padding: 4px 3px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 5px; text-align: center;
}
.tt-table input:focus { border-color: var(--primary); outline: none; }
.tt-table td.tt-lab input { font-weight: 600; background: #f8fafc; }
.tt-table td.tt-lab input.tt-time-in { font-size: 10.5px; font-weight: 500; }
.tt-table td.tt-lab input + input { margin-top: 3px; }
/* 浏览态节次格里的时间小字（覆盖 tbody th 的 nowrap 截断） */
.tt-table .tt-time { display: block; font-size: 10px; font-weight: 400; color: var(--muted); line-height: 1.3; white-space: normal; overflow: visible; text-overflow: clip; }

/* 宽屏（≥1500px）：窗口两侧留白够宽时，课程表贴到左侧空白处（顶栏正下方、内容区外），
   宽度自适应整块留白（蓝框区域），留白越宽表越大；作业列表占满整个内容区；
   再窄就回退成两栏里的左卡。 */
@media (min-width: 1500px) {
  .hw-layout { grid-template-columns: 1fr; }
  .tt-card {
    position: fixed; left: 16px; top: 72px; z-index: 15;
    width: clamp(240px, calc((100vw - 1080px) / 2 - 32px), 520px);
    max-height: calc(100vh - 88px); overflow: auto;
  }
  .tt-table { font-size: 13px; }
  .tt-table th, .tt-table td { padding: 8px 4px; }
  .tt-table thead th { font-size: 12.5px; }
  .tt-table tbody th { font-size: 12px; }
}

/* 手动批改弹窗带答题卡时会很长：限高滚动 */
#dialog .modal { max-height: 88vh; overflow-y: auto; }
/* 弹窗里的答题卡网格 */
.mk-block { margin: 0 0 12px; }
.mk-head { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.mk-item { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.mk-item img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: top; }
.mk-item img.mk-click { cursor: pointer; }
.mk-item img.mk-click:hover { outline: 2px solid var(--primary); }
.mk-item-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; }

/* 批注编辑器：覆盖全屏的一层 */
.annot-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, .82);
  display: flex; flex-direction: column;
}
.annot-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; background: #fff; box-shadow: var(--shadow);
}
.annot-colors { display: inline-flex; gap: 6px; align-items: center; }
.annot-color {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff;
  outline: 2px solid var(--border); cursor: pointer; padding: 0;
}
.annot-color.on { outline: 2px solid var(--primary); }
.annot-zoom { display: inline-flex; gap: 6px; align-items: center; }
.annot-zoom .btn.on { outline: 2px solid var(--primary); }
/* 橡皮擦 / 文字工具：选中高亮，卷面光标随工具切换 */
#annot-eraser.on, #annot-text.on { outline: 2px solid var(--primary); }
.annot-wrap.erasing canvas { cursor: cell; }
.annot-wrap.texting canvas { cursor: text; }
/* 文字工具的落点输入框（贴在卷面点击处） */
.annot-textbox {
  position: absolute; z-index: 3; display: flex; gap: 6px; align-items: center;
  padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .18); line-height: 1.2;
}
.annot-textbox input {
  width: 190px; padding: 6px 8px; font-size: 13px; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; color: #111;
}
.annot-tip { font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .annot-tip { display: none; } }
/* 左边卷面大图（可滚动），右边题目与学生作答对照栏 */
.annot-body {
  flex: 1; overflow: hidden;
  display: flex; align-items: stretch;
}
.annot-main {
  flex: 1; overflow: auto; padding: 14px;
  display: flex; justify-content: center; align-items: flex-start;
}
.annot-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; background: #fff; }
.annot-wrap img {
  display: block; max-width: 100%; max-height: calc(100vh - 96px);
  width: auto; height: auto; user-select: none;
}
.annot-wrap canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: crosshair; touch-action: none;
}
/* 重新批注：旧批注作为独立图层夹在底图和画布之间，可被「清空」整层去掉 */
.annot-wrap .annot-prev { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* 全屏大图查看（学生端看老师批注卷）：复用 .annot-overlay 的全屏深色层 */
.imgview-main { flex: 1; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 14px; }
.imgview-main img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.mkd-click { cursor: zoom-in; }
.annot-side {
  width: 320px; flex: 0 0 320px; background: #fff;
  border-left: 1px solid var(--border); overflow-y: auto; padding: 12px 14px;
}
.annot-side-h { font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.annot-q {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px; font-size: 13px; line-height: 1.55;
}
.annot-q-t { font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.annot-q-body { white-space: pre-wrap; word-break: break-word; margin-bottom: 6px; }
.annot-q-a {
  color: #334155; background: #f1f5f9; border-radius: 6px; padding: 6px 8px;
  white-space: pre-wrap; word-break: break-word;
}
@media (max-width: 900px) {
  .annot-body { flex-direction: column; overflow: auto; }
  .annot-main { flex: none; overflow: visible; }
  .annot-side { width: auto; flex: none; max-height: 40vh; border-left: 0; border-top: 1px solid var(--border); }
}

/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- PDF 在线预览：默认全屏铺满视口（试卷 / 课件都看得更大更清楚，点「关闭」退出） ---- */
#dialog .modal.pdf-view {
  width: 100vw; height: 100vh;
  max-width: 100vw; max-height: 100vh;
  border-radius: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
}
#dialog .modal.pdf-view .pdf-head { flex: none; margin: 0; }
#dialog .modal.pdf-view .pdf-head h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dialog .modal.pdf-view .pdf-stage { flex: 1; min-height: 0; display: flex; }
#dialog .modal.pdf-view .pdf-frame { flex: 1; height: auto; }

/* ---- 试卷 + 答题卡一起打印：原卷 PDF 整页在前（iframe 内嵌），答题卡紧随其后 ---- */
.pdf-print{display:block;width:100%;min-height:1123px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;margin:0 0 16px;}
@media print{.pdf-print{border:0;border-radius:0;margin:0;}}

/* ---- PDF 转图打印：屏幕上每页带纸感边框；打印时一页一断、铺满纸宽 ---- */
.pdf-page-img{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;margin-bottom:14px;}
.pdf-page-img img{display:block;width:100%;height:auto;}
@media print{
  .pdf-page-img{border:0;border-radius:0;margin:0;break-after:page;page-break-after:always;}
  .pdf-page-img:last-child{break-after:auto;page-break-after:auto;}
}

/* ---- 学生「我的作业」三列：作业列收缩到最宽卡片的实际宽度（fit-content），
   所有卡片左对齐成一条竖线——和「我的作业」标题、顶栏头像同一条线；排行榜列紧贴卡片右侧。
   AI 错题列吃剩余宽度、卡片撑满整列（不留右侧空白）。
   窄屏降级：≤1280 作业+侧栏两列、AI错题整行；≤760 全部单列堆叠 */
.hw-row { display: grid; grid-template-columns: fit-content(620px) minmax(230px, 310px) minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1560px; }
@media (max-width: 1280px) {
  .hw-row { grid-template-columns: minmax(0, 1fr) minmax(230px, 310px); }
  .hw-row > #wt-col { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .hw-row { grid-template-columns: minmax(0, 1fr); } }

/* ---- AI 错题特训卡：撑满整列宽度（题图随卡片宽度自适应，文字/分析区不限宽） ---- */
#wt-card { width: 100%; }
#wt-card .img-grid img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; }
#wt-card .q-content, #wt-card .q-analysis { max-width: none; }
.q-analysis:empty { display: none; }
#wt-col .side-card { padding: 10px; }
#wt-col .side-lab { font-size: 12px; }
#wt-col .item-actions { margin-top: 8px; }

/* ---- 作业卡：整列随内容收缩，所有卡片统一拉伸到与最宽卡片同宽（左右缘全部对齐） ---- */
#hw-list { width: fit-content; max-width: min(100%, 620px); }
#hw-list > .card { max-width: 100%; min-width: min(100%, 420px); }

/* ---- 侧栏三卡（排行榜/今日运势/励志名言）紧凑化：缩内边距、缩字号、缩行距；宽度上限 310（约为原先一半） ---- */
#hw-side .side-card { padding: 12px; max-width: 310px; }
#hw-side .side-lab { font-size: 12px; }
#hw-side .side-fortune-lv { margin: 6px 0 2px; }
#hw-side .side-fortune-lv .lv { font-size: 24px; }
#hw-side .side-card .q-content { margin-top: 6px; }
#hw-side .side-quote { font-size: 13.5px; margin-top: 6px; padding-left: 18px; }
#hw-side .side-quote::before { font-size: 30px; top: -4px; }
#hw-side .side-by { font-size: 12px; margin-top: 2px; }
#hw-side .rank-list { margin-top: 6px; }
#hw-side .rank-list li { padding: 3.5px 0; font-size: 12.5px; }
#hw-side .rank-mine { margin-top: 6px; padding-top: 6px; }

/* ---- 3D 宠物舞台：小屏调矮，避免占满一屏把属性条挤到屏幕外 ---- */
@media (max-width: 900px) {
  .pet3d-host { height: 320px; }
  .pet-fallback { height: 320px; }
  .pet-stage-tip { display: none; }
}
@media (max-width: 640px) {
  .pet3d-host { height: 270px; }
  .pet-fallback { height: 270px; }
  .pet-stage-hud { left: 10px; right: 10px; bottom: 9px; gap: 5px; }
  .pet-stage-name { font-size: 15px; padding: 2px 10px; }
  .pet-stage-hud .pet-tag { font-size: 11px; padding: 2px 8px; }
}