* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
       background: #f6f7f9; color: #222; font-size: 15px; }
a { color: #2c5aa0; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 12px; }

/* 顶部导航 */
.topbar { background: #2c5aa0; color: #fff; }
.topbar .nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 12px; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a.brand { font-weight: bold; font-size: 17px; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-left: auto; font-size: 14px; }
.topbar .who { color: #cfe0f5; }

/* 卡片与排版 */
.card { background: #fff; border: 1px solid #e3e5e8; border-radius: 8px; padding: 16px; margin: 14px 0; }
h1 { font-size: 20px; margin: 18px 0 10px; }
h2 { font-size: 17px; margin: 16px 0 8px; }
.muted { color: #8a8f99; font-size: 13px; }

/* 表单 */
label { display: block; margin: 12px 0 4px; font-size: 14px; }
input[type=text], input[type=password], input[type=number], input[type=file], select, textarea {
  width: 100%; padding: 8px; border: 1px solid #ccd0d5; border-radius: 6px; font-size: 14px; background: #fff; }
textarea { min-height: 70px; }
.btn, button { display: inline-block; background: #fff; color: #374151;
  border: 1px solid #d9dee5; border-radius: 6px; padding: 7px 14px; font-size: 14px;
  line-height: 1.2; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s; }
.btn:hover, button:hover { background: #f5f7fa; border-color: #c9d0da; }
.btn.gray { background: #fff; color: #374151; }
.btn.red { background: #fff; color: #b4453e; border-color: #e3cbc8; }
.btn.red:hover { background: #fdf5f4; }
.btn.sm { padding: 4px 10px; font-size: 13px; }
.inline { display: inline; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

/* 提示 */
.flash { background: #e8f5e9; border: 1px solid #a5d6a7; padding: 10px 12px; border-radius: 6px; margin: 12px 0; }
.error { background: #fdecea; border: 1px solid #f5c6c0; padding: 10px 12px; border-radius: 6px; margin: 12px 0; }
.warn { background: #fff8e1; border: 1px solid #ffe082; padding: 10px 12px; border-radius: 6px; margin: 12px 0; }

/* 表格 */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { border-bottom: 1px solid #eee; padding: 8px 10px; text-align: left; font-size: 14px; vertical-align: top; }
th { background: #f0f2f5; white-space: nowrap; }

/* 徽章 */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.badge.done { background: #e8f5e9; color: #2e7d32; }
.badge.learning { background: #fff8e1; color: #f57f17; }
.badge.todo { background: #eceff1; color: #607d8b; }
.badge.pass { background: #e8f5e9; color: #2e7d32; }
.badge.fail { background: #fdecea; color: #c0392b; }

/* 登录/注册 */
.auth-box { max-width: 380px; margin: 60px auto; }

/* 统计卡片 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 14px 0; }
.stat { background: #fff; border: 1px solid #e3e5e8; border-radius: 8px; padding: 14px; }
.stat .num { font-size: 24px; font-weight: bold; color: #2c5aa0; }
.stat .label { color: #8a8f99; font-size: 13px; margin-top: 4px; }

/* 视频 */
video { width: 100%; max-height: 70vh; background: #000; border-radius: 8px; }

/* 横屏全屏播放 */
.video-box { position: relative; background: #000; border-radius: 8px; overflow: hidden; }
.video-box video { display: block; border-radius: 8px; }
.video-box .fs-exit { display: none; }

/* 全屏态（Android Chrome / 桌面）：视频按原比例铺满屏幕 */
.video-box:fullscreen { display: flex; align-items: center; justify-content: center; background: #000; border-radius: 0; }
.video-box:fullscreen video { width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 0; }
.video-box:-webkit-full-screen { display: flex; align-items: center; justify-content: center; background: #000; border-radius: 0; }
.video-box:-webkit-full-screen video { width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 0; }

/* 全屏或页内最大化时显示「退出」按钮 */
.video-box.is-full .fs-exit,
.video-box.expanded .fs-exit {
  display: inline-block; position: absolute; top: 12px; right: 12px; z-index: 10000;
  background: rgba(0,0,0,.65); color: #fff; padding: 6px 12px; font-size: 13px;
  border-radius: 6px; opacity: .9; }

/* 兜底：全屏 API 不可用（部分内置浏览器）时页内最大化 */
.video-box.expanded { position: fixed; inset: 0; z-index: 9999; display: flex;
  align-items: center; justify-content: center; background: #000; border-radius: 0; }
.video-box.expanded video { width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 0; }
/* 全屏/最大化时锁定页面滚动 */
body.no-scroll { overflow: hidden; }

/* 考试 */
.q-item { border-bottom: 1px solid #eee; padding: 14px 0; }
.q-item .stem { font-weight: 600; margin-bottom: 8px; }
.opt { display: block; padding: 7px 10px; margin: 6px 0; border: 1px solid #e3e5e8; border-radius: 6px; cursor: pointer; }
.opt input { margin-right: 6px; }
.opt.right { background: #e8f5e9; border-color: #a5d6a7; }
.opt.wrong-chosen { background: #fdecea; border-color: #f5c6c0; }
.timer { position: sticky; top: 0; background: #2c5aa0; color: #fff; padding: 10px 14px;
  border-radius: 8px; font-size: 16px; text-align: center; z-index: 10; }
.analysis { background: #f6f7f9; border-left: 3px solid #2c5aa0; padding: 8px 12px; margin-top: 8px; font-size: 14px; }

/* 进度条 */
.pbar { background: #eceff1; border-radius: 6px; height: 10px; overflow: hidden; min-width: 80px; }
.pbar i { display: block; height: 100%; background: #2c5aa0; }

@media (max-width: 640px) {
  th, td { font-size: 13px; padding: 6px; }
  .topbar nav { gap: 4px 10px; font-size: 13px; }
  .stat .num { font-size: 20px; }
}

/* ========== 课程分类布局（方案 1：左侧分类导航 + 右侧课程区） ========== */
.course-layout { display: flex; gap: 18px; align-items: flex-start; }
.cat-side { flex: 0 0 178px; background: #fff; border: 1px solid #e3e5e8; border-radius: 10px;
  padding: 8px 0; position: sticky; top: 10px; }
.cat-side a { display: flex; justify-content: space-between; align-items: center;
  padding: 11px 16px; font-size: 14px; color: #4a5563; text-decoration: none;
  border-left: 3px solid transparent; }
.cat-side a:hover { background: #f7f9fc; color: #2c5aa0; }
.cat-side a.on { background: #eef3fa; border-left-color: #2c5aa0; color: #2c5aa0; font-weight: 600; }
.cat-side a em { font-style: normal; font-size: 12px; color: #a9b1bd; }
.cat-side a.on em { color: #7f9dc7; }

.course-main { flex: 1; min-width: 0; }
.course-head { font-size: 17px; margin: 0 0 12px; }
.course-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.course-tile { background: #fff; border: 1px solid #e3e5e8; border-radius: 10px;
  padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.course-tile:hover { border-color: #dbe7f7; box-shadow: 0 3px 12px rgba(44, 90, 160, .08); }

/* 课程封面：固定 16:9，无封面时用课程首字占位 */
.tile-cover { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #f1f3f7; }
.tile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-cover-ph { width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; background: linear-gradient(135deg, #eef3fa, #dbe7f7); }
.tile-cover-ph span { font-size: 30px; font-weight: 600; color: #2c5aa0; }
.tile-body { padding: 14px 16px 16px; display: flex; flex-direction: column;
  gap: 9px; flex: 1; }
.course-tile .ti { font-size: 15px; font-weight: 600; }
.course-tile .ti a { color: #1f2937; text-decoration: none; }
.course-tile .ti a:hover { color: #2c5aa0; }
.tile-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cat-badge { display: inline-block; background: #eef2f8; color: #2c5aa0; font-size: 12px;
  padding: 2px 8px; border-radius: 10px; }
.tile-intro { font-size: 13px; color: #8a8f99; line-height: 1.6; }
.progress-line { display: flex; align-items: center; gap: 8px; }
.progress-line .pbar { height: 6px; }

/* 手机端：左侧分类栏变成一行横向滑动标签；课程卡片改为横版（封面在左、信息在右） */
@media (max-width: 760px) {
  /* 纵向排列时必须拉伸子元素：否则 flex-start 会让课程区按内容宽度收缩成窄条 */
  .course-layout { flex-direction: column; align-items: stretch; gap: 12px; }
  .course-main { width: 100%; }
  .cat-side { flex: none; width: 100%; position: static; display: flex; gap: 6px;
    overflow-x: auto; padding: 8px; -webkit-overflow-scrolling: touch; }
  .cat-side a { border-left: 0; border-radius: 18px; padding: 7px 14px; white-space: nowrap;
    background: #f5f7fa; font-size: 13px; }
  .cat-side a.on { background: #2c5aa0; color: #fff; }
  .cat-side a em { display: none; }

  .course-grid { grid-template-columns: 1fr; gap: 10px; }
  .course-tile { flex-direction: row; }             /* 横版卡片 */
  .tile-cover { flex: 0 0 124px; aspect-ratio: auto; }  /* 固定宽度、高度随卡片拉伸 */
  .tile-cover-ph span { font-size: 26px; }
  .tile-body { padding: 10px 12px 12px; gap: 6px; min-width: 0; }
  .course-tile .ti { font-size: 14.5px; line-height: 1.35; }
  .tile-intro { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 12.5px; line-height: 1.5; }
  .progress-line .muted { font-size: 12px; }
  .course-tile .actions { margin-top: 2px; }
  .course-tile .actions .btn { padding: 5px 12px; font-size: 13px; }
}

/* ========== 后台课程管理：分类筛选 + 分类分组 ========== */
.cat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.cat-filter a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px;
  font-size: 13px; border-radius: 18px; border: 1px solid #dbe0e6; background: #fff;
  color: #4a5563; text-decoration: none; }
.cat-filter a:hover { border-color: #c7d6ea; color: #2c5aa0; }
.cat-filter a span { font-size: 11px; color: #8a8f99; background: #f1f3f7;
  padding: 1px 6px; border-radius: 9px; }
.cat-filter a:not(.gray) { background: #2c5aa0; border-color: #2c5aa0; color: #fff; }
.cat-filter a:not(.gray) span { background: rgba(255, 255, 255, .22); color: #fff; }

.cat-group { margin-bottom: 22px; }
.cat-group-h { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.cat-group-h .dot { width: 3px; height: 15px; background: #2c5aa0; border-radius: 2px; }
.cat-group-h b { font-size: 15px; }
.cat-group .card { margin-top: 0; }

/* 后台列表：封面缩略图 + 标题 + 简介 */
.cell-course { display: flex; gap: 10px; align-items: center; min-width: 260px; }
.cell-course .thumb { width: 76px; height: 46px; border-radius: 5px; object-fit: cover;
  flex: none; background: #eef1f6; display: block; }
.cell-course .thumb.ph { display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #a9b1bd; }
.cell-title { font-weight: 600; font-size: 13.5px; color: #1f2937; }
.cell-intro { font-size: 12px; color: #8a8f99; margin-top: 4px; line-height: 1.5; }

/* 课程表单：封面预览与错误提示 */
.cover-current { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px;
  padding: 10px; background: #f8fafc; border: 1px solid #eef1f6; border-radius: 8px; }
.cover-current img { width: 140px; height: 79px; object-fit: cover; border-radius: 6px; display: block; }
.inline-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
  color: #b4453e; margin-left: auto; cursor: pointer; }
.inline-chk input { width: auto; margin: 0; }
.cover-preview { max-width: 240px; border-radius: 8px; border: 1px solid #e3e5e8;
  margin-top: 10px; display: block; }
.form-error { background: #fdecea; color: #b4453e; border: 1px solid #f6d5d1;
  border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; }

/* 分片上传进度条（灰绿配色，与全站简洁风格一致） */
.up-box { margin: 10px 0 4px; }
.up-bar { height: 10px; background: #eef1f5; border: 1px solid #d9dee5;
  border-radius: 6px; overflow: hidden; }
.up-fill { height: 100%; width: 0; background: #6a9a6d; transition: width .2s ease; }
.up-text { font-size: 13px; color: #6b7280; margin-top: 6px; }

/* 状态小标签（转码中等） */
.tag { display: inline-block; padding: 1px 8px; font-size: 12px; line-height: 1.6;
  border-radius: 10px; border: 1px solid; margin-left: 6px; vertical-align: middle; }
.tag-warn { color: #8a6d1a; border-color: #e3d194; background: #fdf6e0; }