/* 企业在线课堂学习系统 - 企业商务风响应式样式 */
:root {
  --primary: #123a6b;
  --primary-2: #1d54a0;
  --primary-soft: #e8effa;
  --accent: #c9902f;
  --accent-soft: #fdf3e2;
  --bg: #f2f5fa;
  --card: #ffffff;
  --text: #1c2733;
  --muted: #6b7a90;
  --line: #e2e8f1;
  --success: #17915a;
  --danger: #d64545;
  --warning: #d9821f;
  --radius: 12px;
  --shadow: 0 6px 20px rgba(18, 58, 107, .08);
  --shadow-lg: 0 14px 40px rgba(18, 58, 107, .14);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-2); text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; }
input, select, textarea, button { font-family: inherit; font-size: 14px; }
h1, h2, h3, h4 { margin: 0 0 12px; font-weight: 600; color: var(--text); }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ---------- 顶部导航 ---------- */
.topbar {
  background: linear-gradient(120deg, #0f2f57, #123a6b 40%, #1d54a0);
  color: #fff;
  position: sticky; top: 0; z-index: 60;
  box-shadow: 0 2px 12px rgba(18, 58, 107, .2);
}
.topbar-inner { display: flex; align-items: center; height: 62px; gap: 10px; }
.brand { display: flex; align-items: center; gap: 8px; color: #fff; flex: none; }
.brand-mark {
  font-weight: 700; font-size: 18px; letter-spacing: 1px;
  background: var(--accent); color: #fff; padding: 3px 8px; border-radius: 6px;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand-text { font-size: 15px; opacity: .92; }

/* 系统设置页：企业名称改动的即时预览（模拟前台深色品牌条） */
.brand-preview {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px; padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(135deg, #123a6b, #1d54a0);
}
.brand-preview .bp-label { font-size: 12px; color: rgba(255, 255, 255, .7); margin-right: 6px; }
.brand-preview .brand-mark { font-size: 16px; }
.brand-preview .brand-text { color: #fff; }
.topnav { display: flex; gap: 4px; margin-left: 18px; flex: 1; }
.topnav a {
  color: rgba(255, 255, 255, .85); padding: 8px 14px; border-radius: 8px; font-size: 14px;
}
.topnav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.topnav a.on { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600; }
.topnav a.btn-admin { background: var(--accent); color: #fff; font-weight: 600; }
.topbar-user { display: flex; align-items: center; gap: 10px; flex: none; }
.topbar-user .uname { color: #fff; font-size: 13px; }
.topbar-user .link-logout { color: rgba(255, 255, 255, .8); font-size: 13px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #dfe6f2; }
.avatar-link { display: flex; align-items: center; gap: 6px; }
.nav-toggle, .sb-toggle {
  display: none; width: 40px; height: 36px; border: 0; background: transparent; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px; padding: 0 8px;
}
.nav-toggle span, .sb-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; }
.sb-toggle span { background: var(--primary); }

/* ---------- 按钮 ---------- */
.btn, button.btn {
  display: inline-block; border: 0; cursor: pointer; border-radius: 8px;
  padding: 9px 18px; font-size: 14px; transition: .18s; text-align: center; line-height: 1.4;
}
.btn-primary { background: var(--primary-2); color: #fff; }
.btn-primary:hover { background: var(--primary); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #b57d24; color: #fff; }
.btn-outline { background: #fff; border: 1px solid var(--line); color: var(--primary); }
.btn-outline:hover { border-color: var(--primary-2); color: var(--primary-2); }
.btn-solid { background: var(--accent); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b93a3a; color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 6px; }
.btn-lg { padding: 12px 26px; font-size: 15px; }
.btn-block { display: block; width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- 触摸与点击优化 ----------
   touch-action: manipulation 取消移动端「双击缩放」判定，避免首次点击被
   当作探测性点击吞掉；这也是「要点好几次才生效」类问题的通用解法。 */
a, button, .btn, .chip, .pg-item, .sheet a, .q-opt, .attach-item, label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(18, 58, 107, .08);
}
/* 触屏设备上禁用会造成位置变化的 hover 效果（首次 tap 触发 hover，
   元素位移后第二次 tap 才命中按钮） */
@media (hover: none) {
  .course-card:hover { transform: none; box-shadow: var(--shadow); }
  .lesson-item:hover { border-color: var(--line); background: #fff; }
  .gs-link:hover { box-shadow: none; background: #fafbfe; }
  .q-opt:hover { background: #fff; }
}

/* ---------- 卡片与栅格 ---------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h3 { margin: 0; font-size: 16px; }
.grid { display: grid; gap: 16px; }
.grid-course { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-stat { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid-2 { grid-template-columns: 1fr 1fr; }

/* ---------- 首页横幅 ---------- */
.hero {
  background: linear-gradient(120deg, #0f2f57, #1d54a0 60%, #2a6bc4);
  color: #fff; border-radius: 16px; padding: 28px 26px; margin: 18px 0;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.hero:after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px;
  border-radius: 50%; background: rgba(255, 255, 255, .07);
}
.hero h1 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.hero p { color: rgba(255, 255, 255, .85); margin-bottom: 16px; }
.hero .btn-accent { background: var(--accent); }

/* ---------- 统计卡 ---------- */
.stat-box { background: #fff; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 14px; }
.stat-ico { width: 46px; height: 46px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.stat-num { font-size: 22px; font-weight: 700; color: var(--primary); line-height: 1.2; }
.stat-label { color: var(--muted); font-size: 13px; }
.stat-box.gold .stat-ico { background: var(--accent-soft); color: var(--accent); }
.stat-box.green .stat-ico { background: #e6f6ee; color: var(--success); }

/* ---------- 课程卡片 ---------- */
.course-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: .2s; display: flex; flex-direction: column; }
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.course-cover { position: relative; padding-top: 56%; background: linear-gradient(135deg, #d9e4f5, #b9cbe6); }
.course-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.course-cover .cover-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #5c7ba8; font-size: 20px; font-weight: 700; }
.course-cover .tag { position: absolute; left: 10px; top: 10px; background: rgba(18, 58, 107, .85); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 6px; }
.course-body { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.course-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 8px; line-height: 1.45; height: 44px; overflow: hidden; }
.course-meta { color: var(--muted); font-size: 12px; display: flex; gap: 12px; margin-bottom: 10px; }
.course-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.progress { height: 6px; background: #e9eef6; border-radius: 4px; overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary-2), var(--accent)); border-radius: 4px; }

/* ---------- 章节/课时列表 ---------- */
.lesson-list { list-style: none; margin: 0; padding: 0; }
.lesson-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: #fff; transition: .18s; }
.lesson-item:hover { border-color: var(--primary-2); background: var(--primary-soft); }
.lesson-item.playing { border-color: var(--accent); background: var(--accent-soft); }
.lesson-no { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.lesson-item.done .lesson-no { background: #e6f6ee; color: var(--success); }
.lesson-name { flex: 1; min-width: 0; }
.lesson-name b { display: block; font-weight: 500; font-size: 14px; }
.lesson-name small { color: var(--muted); }
.lesson-item .btn { flex: none; }

/* ---------- 播放器 ---------- */
.learn-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.player-box { background: #000; border-radius: var(--radius); overflow: hidden; position: relative; }
.player-box video { width: 100%; display: block; background: #000; max-height: 62vh; }
.player-nomedia { padding: 60px 20px; text-align: center; color: #fff; }
.speed-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #0d1b30; flex-wrap: wrap; }
.speed-bar .lbl { color: rgba(255, 255, 255, .7); font-size: 13px; margin-right: 4px; }
.speed-btn { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.speed-btn.on { background: var(--accent); border-color: var(--accent); font-weight: 600; }
.timer-tip { color: #ffd479; font-size: 13px; margin-left: auto; }
.timer-tip.warn { color: #ff8b6b; }

/* 播放页细节：视频区不塌陷、侧栏课时列表紧凑、评论表单自适应 */
.lesson-video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.learn-side > .card:last-child { margin-bottom: 0; }
.lesson-list-side { margin: 0; }
.lesson-list-side .lesson-item { padding: 10px; margin-bottom: 8px; }
.lesson-list-side .lesson-item:last-child { margin-bottom: 0; }
.lesson-list-side .lesson-name { color: inherit; }
.lesson-list-side .lesson-name b { display: block; font-size: 13px; line-height: 1.45; }
.lesson-list-side .lesson-name:hover { color: var(--primary-2); }
.rule-list { padding-left: 18px; margin: 0; font-size: 13px; line-height: 1.9; }
.lesson-count, .comment-hint { font-size: 12px; }
.comment-file { flex: 1 1 200px; min-width: 0; max-width: 280px; }

.verify-mask {
  position: fixed; inset: 0; background: rgba(8, 18, 34, .72); display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px;
}
.verify-box { background: #fff; border-radius: 14px; width: 340px; max-width: 100%; padding: 22px; text-align: center; box-shadow: var(--shadow-lg); }
.verify-box h4 { margin-bottom: 6px; }
.verify-box img { margin: 12px auto 6px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; }
.verify-box input { width: 100%; text-align: center; letter-spacing: 4px; font-size: 20px; }
.verify-count { color: var(--danger); font-weight: 700; }

/* ---------- 评论答疑 ---------- */
.comment-item { display: flex; gap: 10px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.comment-item:last-child { border-bottom: 0; }
.comment-item .avatar { width: 40px; height: 40px; }
.comment-main { flex: 1; min-width: 0; }
.comment-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comment-name { font-weight: 600; }
.comment-time { color: var(--muted); font-size: 12px; }
.comment-text { margin: 6px 0 8px; word-break: break-word; }
.comment-replies { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--primary-soft); }
.attach-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.attach-item { position: relative; width: 110px; height: 78px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; background: #f7f9fc; }
.attach-item img, .attach-item video { width: 100%; height: 100%; object-fit: cover; }
.attach-item .vtag { position: absolute; right: 4px; bottom: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.reply-form { margin-top: 8px; }

/* ---------- 灯箱 ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(6, 14, 26, .86); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lightbox .lb-body { max-width: 92vw; max-height: 88vh; }
.lightbox img, .lightbox video { max-width: 100%; max-height: 84vh; border-radius: 8px; }
.lightbox .lb-close { position: absolute; right: 20px; top: 16px; color: #fff; font-size: 30px; cursor: pointer; line-height: 1; }

/* ---------- 弹窗（后台表单，如「新增单题」） ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(8, 18, 34, .55); z-index: 12000;
  display: none; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.modal-mask.open { display: flex; }
.modal-box { background: #fff; border-radius: 14px; width: 100%; max-width: 920px; box-shadow: var(--shadow-lg); margin: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-close { border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.modal-close:hover { color: var(--danger); }
.modal-body { padding: 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
.modal-grid { grid-template-columns: 2fr 1fr; gap: 14px; }
.modal-grid-2 { grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 768px) {
  .modal-mask { padding: 14px 10px; }
  .modal-head { padding: 12px 14px; }
  .modal-body { padding: 14px; }
  .modal-foot { padding: 12px 14px; }
  .modal-grid, .modal-grid-2 { grid-template-columns: 1fr; }
  .modal-foot .btn { flex: 1; }
}

/* ---------- 题库「新增单题」弹窗 ---------- */
.modal-q { max-width: 1040px; display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.modal-q > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.modal-q .modal-body { overflow-y: auto; }
.modal-q .modal-foot { flex: none; }
.modal-q .modal-head { align-items: flex-start; }
.modal-q .mh-text h3 { margin: 0; font-size: 17px; }
.modal-q .mh-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
/* 编辑弹窗标题后的题号徽标 */
.ed-badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 20px;
  background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 600;
  vertical-align: 2px;
}
/* 编辑弹窗：当前配图缩略图 + 删除勾选 */
.qimg-box {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 10px; border: 1px solid var(--line);
  border-radius: 10px; background: #f9fbfe;
}
.qimg-box img { max-width: 160px; max-height: 110px; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; }

/* 两栏分区：左=题目内容，右=答题设置 */
.q-form-grid { display: grid; grid-template-columns: 1fr 1fr; }
.q-pane { padding: 0 22px; min-width: 0; }
.q-pane:first-child { padding-left: 0; }
.q-pane:last-child { padding-right: 0; }
.q-pane + .q-pane { border-left: 1px dashed var(--line); }
.pane-title { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; font-weight: 600; color: #123a6b; }
.pane-title i {
  display: inline-flex; width: 20px; height: 20px; border-radius: 6px; font-style: normal;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 700;
  align-items: center; justify-content: center; flex: none;
}
.pane-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.field-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tip-inline { color: var(--muted); font-weight: 400; font-size: 12px; }

/* 选项行：字母 + 输入 + 删除 */
.opt-list { display: flex; flex-direction: column; gap: 8px; }
.opt-row { display: grid; grid-template-columns: 30px 1fr 32px; gap: 8px; align-items: center; }
.opt-key {
  display: inline-flex; height: 30px; border-radius: 8px; background: #eef4fd; color: var(--primary);
  align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.opt-row input[type=text] { padding: 7px 10px; }
.opt-del {
  width: 30px; height: 30px; border: 1px solid var(--line); background: #fff; border-radius: 8px;
  color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; transition: .15s; padding: 0;
}
.opt-del:hover { border-color: var(--danger); color: var(--danger); background: #fdecec; }
.opt-add { margin-top: 10px; }

/* 配图上传区 */
.upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.upload-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 18px 12px; border: 1.5px dashed var(--line); border-radius: 10px;
  background: #f9fbfe; cursor: pointer; text-align: center; transition: .15s;
}
.upload-box:hover { border-color: var(--primary-2); background: #f2f8ff; }
.ub-plus { font-size: 20px; font-weight: 700; color: var(--primary); line-height: 1; }
.ub-main { font-size: 13px; color: #37475b; }
.ub-hint { font-size: 11.5px; color: var(--muted); }
.upload-picked { margin-top: 6px; font-size: 12px; color: var(--success); word-break: break-all; }
.need-image .upload-box { border-color: var(--accent); background: #fff8f1; }

.modal-foot { align-items: center; }
.modal-foot .foot-tip { margin-right: auto; font-size: 12px; color: var(--muted); }

@media (max-width: 768px) {
  .modal-q { max-height: none; }
  .q-form-grid { grid-template-columns: 1fr; }
  .q-pane { padding: 0; }
  .q-pane + .q-pane { border-left: 0; border-top: 1px dashed var(--line); margin-top: 18px; padding-top: 18px; }
  .modal-foot .foot-tip { display: none; }
}

/* ---------- 题库 Excel 批量导入 ---------- */
.import-entry { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.import-entry .ie-text { flex: 1; min-width: 260px; }
.import-entry .ie-text b { display: block; margin-bottom: 4px; color: #123a6b; font-size: 14px; }
.import-entry .ie-text p { margin: 0; font-size: 13px; line-height: 1.7; }
.import-entry .ie-act { display: flex; gap: 10px; flex-wrap: wrap; }

.import-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.import-stats .is-box {
  background: #f7fafd; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 12px; text-align: center;
}
.import-stats .is-box b { display: block; font-size: 22px; color: #123a6b; line-height: 1.3; }
.import-stats .is-box span { font-size: 12px; color: var(--muted); }
.import-stats .is-ok { background: #e8f7ef; border-color: #bfe6cf; }
.import-stats .is-ok b { color: var(--success); }
.import-stats .is-bad { background: #fdecec; border-color: #f3c2c2; }
.import-stats .is-bad b { color: var(--danger); }
.import-file-line { font-size: 13px; color: #37475b; margin-bottom: 12px; word-break: break-all; }
.import-err-msg { color: #b03a3a; font-size: 13px; line-height: 1.7; }

.import-step { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.import-step .import-step-text { flex: 1; min-width: 280px; }
.import-step .import-step-text p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.75; }
.import-step .import-step-act { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 200px; }
.import-cols { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.import-cols li {
  font-size: 12px; color: var(--primary); background: #eef4fd;
  border: 1px solid #d8e6f8; border-radius: 6px; padding: 3px 9px;
}

@media (max-width: 768px) {
  .import-stats { grid-template-columns: 1fr 1fr; }
  .import-entry .ie-act, .import-step .import-step-act { width: 100%; }
  .import-entry .ie-act .btn, .import-step .import-step-act .btn { flex: 1; }
}

/* ---------- 表单 ---------- */
.form-item { margin-bottom: 14px; }
.form-item label { display: block; margin-bottom: 6px; font-size: 13px; color: #37475b; font-weight: 500; }
.form-item .tip { color: var(--muted); font-size: 12px; margin-top: 4px; }
input[type=text], input[type=password], input[type=number], input[type=email], input[type=datetime-local], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; transition: .15s; color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--primary-2); box-shadow: 0 0 0 3px rgba(29, 84, 160, .12); }
textarea { min-height: 90px; resize: vertical; }
.form-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.form-inline .form-item { margin-bottom: 0; min-width: 160px; flex: 1; }
.check-line { display: flex; align-items: center; gap: 6px; }
.check-line input[type=checkbox], input[type=checkbox] { width: 16px; height: 16px; }
.switch-list { display: flex; gap: 16px; flex-wrap: wrap; }
.req { color: var(--danger); }

/* 后台内联表单：多控件一行，按钮与输入框底边严格对齐。
   .form-item 自带 margin-bottom，底部对齐时会把它顶高 14px（按钮看起来矮一截），
   这里必须清零；按钮高度按输入框实测高度（padding 10 + 边框 + 行高 ≈ 44px）对齐。 */
.form-grid-inline { display: grid; gap: 12px; align-items: end; }
.form-grid-inline .form-item { margin-bottom: 0; }
.form-grid-inline .btn { height: 44px; line-height: 44px; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.cat-form-grid { grid-template-columns: 1fr 1fr 110px 110px auto; }
@media (max-width: 992px) {
  .cat-form-grid { grid-template-columns: 1fr 1fr 110px; }
}
@media (max-width: 640px) {
  .cat-form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid-inline .btn { width: 100%; }
}

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; min-width: 640px; }
table.table th { background: #f6f8fc; color: #47576c; font-weight: 600; text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.table tr:hover td { background: #fafbfe; }
table.table td .btn { white-space: nowrap; }
.table-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* 移动端表格转卡片：横向滚动容器会把「点按钮」误判成「滑动」，
   导致要点好几次才生效。转成卡片后按钮独占一行，点击稳定。 */
@media (max-width: 768px) {
  table.table.table-cards { min-width: 0; }
  table.table.table-cards thead { display: none; }
  table.table.table-cards tbody tr {
    display: block; border: 1px solid var(--line); border-radius: 10px;
    background: #fff; margin-bottom: 10px; padding: 4px 0; overflow: hidden;
  }
  table.table.table-cards tbody tr:hover td { background: transparent; }
  table.table.table-cards td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 12px; border-bottom: 1px dashed var(--line); text-align: right;
  }
  table.table.table-cards td:last-child { border-bottom: 0; }
  table.table.table-cards td:before {
    content: attr(data-label); flex: none; color: var(--muted); font-weight: 500; text-align: left;
  }
  table.table.table-cards td .btn { width: 100%; }
  table.table.table-cards td .table-actions { width: 100%; flex-wrap: wrap; }
  table.table.table-cards td .table-actions > * { flex: 1 1 auto; min-width: 76px; }
  .table-wrap.table-wrap-cards { margin: 0; padding: 0; overflow: visible; }

  /* 跨列单元格（空数据提示 / 行内展开的编辑表单）整块显示，不套 label */
  table.table.table-cards td.td-full {
    display: block; text-align: left; padding: 12px; border-bottom: 0;
  }
  table.table.table-cards td.td-full:before { content: none; }
  table.table.table-cards tbody tr.tr-single {
    border: 0; background: transparent; margin: 0; padding: 0; box-shadow: none;
  }
  table.table.table-cards tbody tr.tr-single td.td-full { padding: 12px; }
  table.table.table-cards tbody tr.tr-empty td.td-full {
    padding: 10px 4px; text-align: center; font-size: 13px;
  }
  /* 无表头文字的列（如勾选框）不显示空标签 */
  table.table.table-cards td:not([data-label]) { justify-content: flex-start; }
  table.table.table-cards td:not([data-label]):before { content: none; }
  /* 操作列：卡片底部一条浅底工具条 */
  table.table.table-cards td.td-actions {
    background: #fafbfe; border-top: 1px solid var(--line); border-bottom: 0;
    padding-top: 10px; padding-bottom: 10px;
  }
}

/* ---------- 标签 ---------- */
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; background: #eef2f8; color: #5a6b83; }
.badge-role { background: var(--primary-soft); color: var(--primary); }
.badge-ok { background: #e6f6ee; color: var(--success); }
.badge-no { background: #fdecec; color: var(--danger); }
.badge-wait { background: var(--accent-soft); color: var(--accent); }

/* ---------- 提示 ---------- */
.alert { padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; }
.alert-success { background: #e8f7ef; color: var(--success); border: 1px solid #c8ecda; }
.alert-error, .alert-danger { background: #fdecec; color: var(--danger); border: 1px solid #f6cfcf; }
.alert-info { background: var(--primary-soft); color: var(--primary); border: 1px solid #d3e2f7; }
.alert-warning { background: var(--accent-soft); color: #9a6c17; border: 1px solid #f2dcb4; }
.empty { text-align: center; padding: 40px 16px; color: var(--muted); }

/* ---------- 分页 ---------- */
.pager { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.pg-item { padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--primary); font-size: 13px; }
.pg-item:hover { border-color: var(--primary-2); }
.pg-item.active { background: var(--primary-2); color: #fff; border-color: var(--primary-2); }
.pg-item.disabled { color: #b6c0cf; pointer-events: none; }
.pg-total { color: var(--muted); font-size: 13px; margin-left: 6px; }
.pg-ell { color: var(--muted); }

/* ---------- 登录注册 ---------- */
.auth-body { background: linear-gradient(140deg, #0f2f57, #1d54a0 55%, #2f74cc); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-wrap { width: 100%; max-width: 420px; }
.auth-card { background: #fff; border-radius: 16px; padding: 30px 26px; box-shadow: var(--shadow-lg); }
.auth-head { text-align: center; margin-bottom: 20px; }
.auth-logo { display: inline-flex; width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 12px; font-size: 15px; }
.auth-head h1 { font-size: 19px; }
.auth-foot { text-align: center; color: rgba(255, 255, 255, .8); margin-top: 16px; font-size: 13px; }
.auth-foot a { color: #fff; }
.captcha-row { display: flex; gap: 8px; }
.captcha-row input { flex: 1; }
.captcha-row img { height: 42px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; }
.auth-alt { text-align: center; margin-top: 14px; color: var(--muted); font-size: 13px; }
.auth-alt + .auth-alt { margin-top: 6px; }

/* 登录 / 注册页移动端适配
   要点：① 竖屏时卡片顶到上方而不是垂直居中，键盘弹出不会把按钮顶出屏幕；
        ② 输入控件字号提到 16px，iOS Safari 聚焦时不会自动放大整页；
        ③ 验证码行固定图片宽度，避免窄屏被挤成一条。 */
@media (max-width: 768px) {
  .auth-body {
    align-items: flex-start; padding: 20px 12px 32px;
    min-height: 100vh; min-height: 100dvh;
  }
  .auth-wrap { max-width: 100%; }
  .auth-card { padding: 22px 16px 20px; border-radius: 14px; }
  .auth-head { margin-bottom: 16px; }
  .auth-logo { width: 48px; height: 48px; font-size: 14px; margin-bottom: 10px; }
  .auth-head h1 { font-size: 17px; margin-bottom: 6px; }
  .auth-head p { font-size: 12.5px; }
  .auth-card .form-item { margin-bottom: 12px; }
  .auth-card .form-item label { font-size: 13.5px; margin-bottom: 5px; }
  .auth-card input[type=text],
  .auth-card input[type=password],
  .auth-card input[type=number],
  .auth-card input[type=email],
  .auth-card select,
  .auth-card textarea { font-size: 16px; padding: 11px 12px; }
  .captcha-row { gap: 10px; align-items: stretch; }
  .captcha-row input { flex: 1 1 auto; min-width: 0; font-size: 16px; }
  .captcha-row img { flex: 0 0 108px; width: 108px; height: 44px; object-fit: cover; }
  .auth-card .btn-lg { width: 100%; padding: 13px 18px; font-size: 15px; }
  .auth-alt { font-size: 12.5px; margin-top: 12px; }
  .auth-foot { margin-top: 14px; font-size: 12px; }
}
@media (max-width: 400px) {
  .auth-body { padding: 14px 10px 26px; }
  .auth-card { padding: 18px 14px; }
  .auth-logo { width: 44px; height: 44px; font-size: 13px; }
  .captcha-row img { flex: 0 0 92px; width: 92px; height: 42px; }
}

/* ---------- 后台布局 ---------- */
.admin-body { display: flex; min-height: 100vh; background: #eef2f8; }
.sidebar { width: 224px; flex: none; background: linear-gradient(180deg, #0f2f57, #163b6c); color: #cddcf0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sb-brand { padding: 18px 18px 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; gap: 8px; }
.sb-brand .brand-mark { font-size: 14px; }
.sb-sub { font-size: 13px; opacity: .85; }
.sb-nav { padding: 10px 10px 20px; display: flex; flex-direction: column; gap: 2px; }
.sb-nav a { color: #cddcf0; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; }
.sb-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sb-nav a.on { background: var(--accent); color: #fff; font-weight: 600; }
.sb-group { color: rgba(255, 255, 255, .45); font-size: 11.5px; padding: 12px 12px 4px; letter-spacing: .5px; }
.sb-foot { border-top: 1px solid rgba(255, 255, 255, .1); padding: 14px; display: flex; align-items: center; gap: 10px; }
.sb-foot-info b { display: block; color: #fff; font-size: 13px; }
.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar { background: #fff; height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 18px; box-shadow: 0 1px 6px rgba(18, 58, 107, .07); position: sticky; top: 0; z-index: 30; }
.admin-topbar .crumb { font-weight: 600; font-size: 15px; flex: 1; }
.admin-top-actions { display: flex; gap: 8px; }
.admin-content { padding: 18px; }

/* ---------- 考试答题 ---------- */
.exam-layout { display: grid; grid-template-columns: 1fr 250px; gap: 16px; align-items: start; }
.exam-bar {
  position: sticky; top: 74px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; z-index: 20;
}
.exam-clock { font-size: 26px; font-weight: 700; color: var(--primary); text-align: center; letter-spacing: 1px; }
.exam-clock.urgent { color: var(--danger); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .45; } }
.sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 6px; margin: 12px 0; }
.sheet a {
  display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 6px; border: 1px solid var(--line);
  background: #fff; color: #52637a; font-size: 13px;
}
.sheet a.answered { background: var(--primary-soft); border-color: #bfd4f0; color: var(--primary); font-weight: 600; }
.sheet a.active { background: var(--primary-2); color: #fff; }
.q-block { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px; }
.q-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.q-no { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.q-stem { font-size: 15px; line-height: 1.65; }
.q-type { font-size: 12px; color: var(--muted); margin-left: 6px; }
.q-opts { display: flex; flex-direction: column; gap: 10px; }
.q-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; transition: .15s; background: #fff;
}
.q-opt:hover { border-color: #b8cbe6; background: #f7fafd; }
.q-opt.checked { border-color: var(--primary-2); background: var(--primary-soft); }
.q-opt input { margin-top: 3px; }
.q-opt .opt-key { font-weight: 600; width: 20px; flex: none; }
.q-answer textarea { min-height: 110px; }

/* ---------- 题目配图（看图选答案） ---------- */
.q-image { margin: 0 0 14px; }
.q-image img {
  max-width: 100%; max-height: 340px; width: auto; border-radius: 10px;
  border: 1px solid var(--line); background: #f7f9fc; cursor: zoom-in;
}
.q-image-tip { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.q-cell { display: flex; align-items: center; }
.q-thumb {
  width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex: none;
  border: 1px solid var(--line); cursor: zoom-in; margin-right: 10px; background: #f7f9fc;
  transition: border-color .15s, box-shadow .15s;
}
.q-thumb:hover { border-color: var(--primary-2); box-shadow: 0 2px 10px rgba(18, 58, 107, .18); }
.q-thumb-none {
  display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 48px;
  font-size: 11px; color: var(--danger); background: #fdecec; border: 1px dashed #f3c2c2;
  border-radius: 6px; flex: none; margin-right: 10px; line-height: 1.25; text-align: center;
}
.q-img-preview { margin-bottom: 8px; }
.q-img-preview img { max-width: 220px; max-height: 150px; border-radius: 8px; border: 1px solid var(--line); }
.tip-inline { color: var(--muted); font-size: 12px; font-weight: 400; }
.exam-result-top { text-align: center; padding: 26px 16px; background: linear-gradient(135deg, #0f2f57, #1d54a0); color: #fff; border-radius: var(--radius); margin-bottom: 16px; }
.exam-result-top .score { font-size: 44px; font-weight: 700; color: #ffd479; line-height: 1.1; }
.answer-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; font-size: 13px; }
.answer-compare div { padding: 8px 10px; border-radius: 8px; background: #f6f8fc; }
.answer-compare .right { background: #e8f7ef; color: var(--success); }
.answer-compare .wrong { background: #fdecec; color: var(--danger); }

/* ---------- 课程详情页 ---------- */
.course-detail-grid { grid-template-columns: 1fr 320px; align-items: start; }
.course-detail-head { display: flex; gap: 16px; flex-wrap: wrap; }
.course-detail-cover { width: 220px; flex: none; }
.course-detail-cover .course-cover { border-radius: 10px; overflow: hidden; }
.course-detail-info { flex: 1; min-width: 220px; }
.course-detail-title { margin-bottom: 10px; }

/* 关键：这里必须是 class 而不是内联样式，否则移动端媒体查询无法覆盖，
   整页会一直保持「1fr 320px」两列，把左栏压得只剩几十像素。
   单列后 DOM 顺序即为视觉顺序：课程介绍 → 课程目录 → 课程考试 → 学习须知，
   正好把原本在右侧的两个模块排到课程目录下方。 */
@media (max-width: 992px) {
  .course-detail-grid { grid-template-columns: 1fr; }
  .course-detail-side > .card:last-child { margin-bottom: 0; }
}
@media (max-width: 560px) {
  .course-detail-cover { width: 100%; }
  .course-detail-info { min-width: 0; }
  .course-detail-title { font-size: 18px; }
  .course-detail-head { gap: 12px; }
}

/* ---------- 在线考试列表（移动端卡片式） ---------- */
@media (max-width: 768px) {
  table.table-exams { min-width: 0; display: block; }
  table.table-exams thead { display: none; }
  table.table-exams tbody { display: block; }
  table.table-exams tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
    width: 100%;
    padding: 14px; margin-bottom: 12px; background: #fff;
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 2px 10px rgba(18, 58, 107, .05);
  }
  table.table-exams tr:hover td { background: transparent; }
  table.table-exams td { display: block; padding: 0; border: 0; text-align: left; font-size: 13px; word-break: break-word; }
  table.table-exams td[data-label]:before {
    content: attr(data-label); display: block;
    color: var(--muted); font-size: 11.5px; letter-spacing: .3px; margin-bottom: 3px;
  }
  table.table-exams .cell-title { grid-column: 1 / -1; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
  table.table-exams .cell-title b { display: block; font-size: 15.5px; line-height: 1.5; }
  table.table-exams .cell-period { grid-column: 1 / -1; font-size: 12px; }
  table.table-exams .cell-action { grid-column: 1 / -1; }
  table.table-exams .cell-action .btn { width: 100%; padding: 11px 14px; font-size: 14px; border-radius: 9px; }
  table.table-exams .cell-action .badge { display: block; text-align: center; padding: 9px 10px; border-radius: 9px; line-height: 1.5; }
}

/* ---------- 练习模块 ---------- */
.practice-entries { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.form-grid-auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.practice-actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.practice-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.practice-nav .btn { min-width: 110px; }
/* 判定后选项着色：正确标绿、选错标红 */
.q-opt.right { border-color: #17915a; background: #e8f7ef; }
.q-opt.right .opt-key { color: #17915a; }
.q-opt.wrong { border-color: #d64545; background: #fdecec; }
.q-opt.wrong .opt-key { color: #d64545; }
/* 练习/考试题号导航状态（active 必须放在最后，否则会被覆盖） */
.sheet a.done-ok { background: #e6f6ee; border-color: #bfe3cf; color: var(--success); }
.sheet a.done-no { background: #fdecec; border-color: #f6cfcf; color: var(--danger); }
.sheet a.active { background: var(--primary-2); color: #fff; border-color: var(--primary-2); }
@media (max-width: 640px) {
  .practice-entries { grid-template-columns: 1fr; }
  .form-grid-auto { grid-template-columns: 1fr; }
  .practice-nav { flex-direction: column; align-items: stretch; }
  .practice-nav .btn { width: 100%; }
  .practice-nav #posTip { order: -1; text-align: center; }
}

/* ---------- 杂项 ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h2 { margin: 0; font-size: 20px; }
.filter-bar { background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); margin-bottom: 16px; }
.breadcrumb { font-size: 13px; color: var(--muted); margin: 14px 0; }
.breadcrumb a { color: var(--muted); }
.chip-list { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 6px 14px; border-radius: 20px; background: #fff; border: 1px solid var(--line); color: #52637a; font-size: 13px; }
.chip.on { background: var(--primary-2); color: #fff; border-color: var(--primary-2); }
.file-list { list-style: none; margin: 0; padding: 0; }
.file-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.file-list li:last-child { border-bottom: 0; }
.file-list .fname { flex: 1; min-width: 0; word-break: break-all; }
.timeline-muted { color: var(--muted); font-size: 12px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.kv:last-child { border-bottom: 0; }
.kv b { font-weight: 500; color: var(--muted); }
.text-right { text-align: right; }
.mb0 { margin-bottom: 0; }
.mt10 { margin-top: 10px; }
.mt16 { margin-top: 16px; }
.row-flex { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- 移动端底部导航（学员前台） ---------- */
.mtabbar { display: none; }
@media (max-width: 768px) {
  body.front-body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .mtabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -2px 14px rgba(15, 34, 67, .09);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mtabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 7px 2px 6px; color: #7c8a9c; font-size: 11px; text-decoration: none;
  }
  .mtabbar a .mt-ico { display: block; width: 22px; height: 22px; color: #9aa7b8; }
  .mtabbar a .mt-ico svg { display: block; width: 22px; height: 22px; }
  .mtabbar a.on { color: var(--primary-2); font-weight: 600; }
  .mtabbar a.on .mt-ico { color: var(--primary-2); }
  .mtabbar a:active { background: #f4f7fc; }
  .site-footer { padding-bottom: 18px; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .learn-layout { grid-template-columns: 1fr; }
  .exam-layout { grid-template-columns: 1fr; }
  .exam-bar { position: static; }
}
@media (max-width: 992px) {
  .sidebar { position: fixed; left: -240px; top: 0; transition: .25s; z-index: 100; box-shadow: var(--shadow-lg); }
  .sidebar.open { left: 0; }
  .sb-toggle { display: flex; }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .topbar-inner { height: 56px; }
  .nav-toggle { display: flex; }
  .topnav {
    position: absolute; left: 0; right: 0; top: 56px; background: #123a6b; flex-direction: column; gap: 0;
    padding: 8px 12px 14px; margin: 0; box-shadow: var(--shadow); display: none;
  }
  .topnav.open { display: flex; }
  .topnav a { padding: 11px 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .topbar-user .uname { display: none; }
  .hero { padding: 20px 18px; }
  .hero h1 { font-size: 20px; }
  .container { padding: 0 12px; }
  .card { padding: 14px; border-radius: 10px; }
  .grid-course { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .course-title { font-size: 14px; height: 40px; }
  .course-cover { padding-top: 62%; }
  .admin-content { padding: 12px; }
  .admin-topbar { padding: 0 12px; }
  .admin-top-actions .btn-outline { padding: 6px 10px; font-size: 12px; }
  .q-opt { padding: 14px 12px; }
  .exam-clock { font-size: 22px; }
  .table-wrap { margin: 0 -14px; padding: 0 14px; }
  .answer-compare { grid-template-columns: 1fr; }

  /* 播放页（移动端） */
  .breadcrumb { margin: 10px 0; font-size: 12px; line-height: 1.6; }
  .learn-layout { gap: 12px; }
  .player-box { border-radius: 10px; }
  .lesson-video { aspect-ratio: 16 / 9; max-height: 52vh; }
  .player-nomedia { padding: 40px 16px; }
  .speed-bar { gap: 8px; padding: 10px 12px; }
  .speed-bar .lbl { flex: 0 0 100%; margin-right: 0; }
  .speed-btn { padding: 9px 14px; font-size: 14px; min-width: 54px; }
  .timer-tip { margin-left: 0; flex: 0 0 100%; font-size: 12px; }
  .hero .row-flex { flex-direction: column; align-items: stretch; }
  .hero .row-flex .btn { width: 100%; }
  .comment-form-foot { flex-direction: column; align-items: stretch; }
  .comment-file { flex: none; max-width: none; width: 100%; }
  .comment-submit { width: 100%; }
  .comment-hint { text-align: center; }
  .comment-item .avatar { width: 34px; height: 34px; }
  .attach-item { width: 31%; height: auto; aspect-ratio: 4 / 3; }
  .lesson-list-side .lesson-item { padding: 12px 10px; }
  .file-list li { align-items: flex-start; }
  .q-image img { max-height: 46vh; }
  .q-img-preview img { max-width: 100%; }
}
@media (max-width: 420px) {
  .grid-course { grid-template-columns: 1fr 1fr; gap: 10px; }
  .course-cover .tag { font-size: 11px; }
  .auth-card { padding: 22px 18px; }
  .stat-box { padding: 12px; gap: 10px; }
  .stat-num { font-size: 19px; }
  .hero { padding: 18px 14px; }
  .hero h1 { font-size: 18px; }
  .speed-btn { min-width: 46px; padding: 8px 11px; }
  .attach-item { width: 47%; }
  .lesson-video { max-height: 44vh; }
  .q-stem { font-size: 14px; }
}
@media print {
  .topbar, .sidebar, .admin-topbar, .pager, .table-actions { display: none !important; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}

/* ---------- 个人中心 ---------- */
.profile-card { padding: 20px; }
.profile-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avatar-lg { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; background: #eef2f8; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(15, 34, 67, .12); flex: none; }
.profile-meta { flex: 1 1 220px; min-width: 0; }
.profile-name { font-size: 19px; font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.grid-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 18px; }
.gs-box { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; text-align: center; }
.gs-num { font-size: 24px; font-weight: 700; color: var(--primary); line-height: 1.2; }
.gs-label { font-size: 12px; color: var(--muted); margin-top: 6px; }
.gs-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.gs-link { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfe; transition: .15s; }
.gs-link:hover { border-color: var(--primary-2); background: #fff; box-shadow: var(--shadow); text-decoration: none; }
.gs-link-title { display: block; font-weight: 600; color: var(--primary); margin-bottom: 4px; }
.gs-link .muted { font-size: 12px; display: block; }
.link-more { font-size: 13px; color: var(--primary-2); }
.link { color: var(--primary-2); }
@media (max-width: 640px) {
  .profile-head { gap: 12px; }
  .avatar-lg { width: 58px; height: 58px; }
  .profile-name { font-size: 17px; }
  .grid-stat { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gs-num { font-size: 20px; }
  .gs-links { grid-template-columns: 1fr; }
}