:root {
  --el-color-primary: #1f7a8c;
  --el-color-primary-light-3: #5aa3b0;
  --el-color-primary-light-5: #8fc1ca;
  --el-color-primary-light-7: #c3dde2;
  --el-color-primary-light-8: #d8eaed;
  --el-color-primary-light-9: #ecf5f6;
  --el-color-primary-dark-2: #176271;
  --brand: #1f7a8c;
}

* { box-sizing: border-box; }
[v-cloak] { display: none; }
html, body, #app { height: 100%; margin: 0; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: #f2f5f7;
  color: #2c3e50;
}

/* ============ 登录页 ============ */
.login-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1f7a8c 0%, #2c3e50 100%);
  padding: 20px;
}
.login-card {
  width: 420px;
  max-width: 100%;
  background: #fff;
  border-radius: 14px;
  padding: 34px 34px 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.brand-logo {
  width: 52px; height: 52px; border-radius: 12px;
  background: linear-gradient(135deg, #1f7a8c, #2c3e50);
  color: #fff; font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-logo.small { width: 34px; height: 34px; font-size: 17px; border-radius: 8px; }
.brand-text h1 { margin: 0; font-size: 21px; color: #2c3e50; }
.brand-text p { margin: 3px 0 0; font-size: 12px; color: #90a0b0; }
.w100 { width: 100%; }
.form-tip { margin-top: 12px; font-size: 12px; color: #909399; text-align: center; }

/* ============ 布局 ============ */
.layout { height: 100%; display: flex; flex-direction: column; }
.topbar {
  height: 56px; background: #fff; border-bottom: 1px solid #e6eaee;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; flex-shrink: 0;
}
.topbar-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: #2c3e50; }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.user-name { font-size: 14px; color: #2c3e50; }

.body { flex: 1; display: flex; min-height: 0; }
.sidebar {
  width: 280px; background: #fff; border-right: 1px solid #e6eaee;
  display: flex; flex-direction: column; flex-shrink: 0;
}
.sidebar-title {
  padding: 16px 18px 10px; font-size: 13px; color: #909399;
  letter-spacing: 1px; font-weight: 600;
}
.chapter-list { flex: 1; overflow-y: auto; padding: 0 8px 20px; }
.chapter-list .el-collapse { border: none; }
.chapter-list .el-collapse-item__header { border-bottom: none; height: auto; line-height: 1.4; padding: 6px 8px; }
.part-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: #2c3e50; }
.part-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--brand); }
.part-count { margin-left: auto; font-size: 12px; color: #b0b8c0; font-weight: 400; }
.chapter-item {
  padding: 9px 14px 9px 30px; font-size: 13.5px; color: #55606c;
  cursor: pointer; border-radius: 6px; transition: all .15s;
}
.chapter-item:hover { background: #f0f5f6; color: var(--brand); }
.chapter-item.active { background: #e3f0f2; color: var(--brand); font-weight: 600; }

.content { flex: 1; overflow-y: auto; padding: 26px 30px; }
.content-head { margin-bottom: 18px; }
.content-head h2 { margin: 0; font-size: 20px; color: #2c3e50; }
.content-head .sub { margin: 6px 0 0; font-size: 13px; color: #909399; }

/* ============ 题目列表 ============ */
.q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.q-card {
  background: #fff; border-radius: 10px; padding: 18px;
  border: 1px solid #e6eaee; cursor: pointer; transition: all .18s;
  display: flex; flex-direction: column; gap: 12px; min-height: 120px;
}
.q-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(31,122,140,.12); border-color: var(--brand); }
.q-index {
  width: 30px; height: 30px; border-radius: 8px; background: #e3f0f2;
  color: var(--brand); font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.q-title { font-size: 15px; font-weight: 600; color: #2c3e50; line-height: 1.5; flex: 1; }
.q-meta { display: flex; gap: 6px; }
.q-skeleton { height: 120px; border-radius: 10px; }

/* ============ 答题播放器 ============ */
.player { max-width: 860px; margin: 0 auto; }
.player-card { background: #fff; border-radius: 12px; border: 1px solid #e6eaee; overflow: hidden; }
.player-head {
  padding: 16px 20px; border-bottom: 1px solid #eef1f3;
  display: flex; align-items: center; justify-content: space-between;
}
.player-head .ph-title { font-size: 15px; font-weight: 600; color: #2c3e50; }
.player-head .ph-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
body.kiosk .player-head .ph-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 10px; }
.player-body { padding: 22px 20px; }
.video-box { background: #000; border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.video-box video { width: 100%; display: block; max-height: 480px; }
.node-desc {
  background: #f7f9fa; border-left: 3px solid var(--brand);
  padding: 12px 14px; border-radius: 6px; font-size: 14px; color: #47525e; line-height: 1.7;
  margin-bottom: 16px; white-space: pre-wrap;
}
.choice-question { font-size: 16px; font-weight: 600; color: #2c3e50; margin-bottom: 16px; line-height: 1.6; }
.choice-list { display: flex; flex-direction: column; gap: 12px; }
/* Element Plus 默认给相邻按钮加 margin-left:12px，竖排时会让第 2 个起整体右移、看着没对齐 */
.choice-list .el-button + .el-button,
.choice-list .choice-btn { margin-left: 0; }
.choice-btn {
  width: 100%; justify-content: flex-start; height: auto; padding: 14px 16px;
  font-size: 14px; white-space: normal; text-align: left;
}

/* ===== 投放/Web Viewer 铺满模式（kiosk，2026-10-24 回退版）=====
   侯老师反馈影院模式在「检查结果报告单」页会卡死（报告纸撑满 + overflow:hidden 把选项裁掉）。
   回退为 2026-10-23 的形态：白底卡片铺满窗口、保留标题行、内容可纵向滚动。 */
body.kiosk { height: 100vh; }
body.kiosk .layout { height: 100vh; }
body.kiosk .content { padding: 6px; display: flex; flex-direction: column; }
body.kiosk .player { width: 100%; max-width: none; flex: 1; display: flex; flex-direction: column; }
body.kiosk .player-card { flex: 1; display: flex; flex-direction: column; }
/* 关键①：内容区可滚动（报告纸 + 选项比一屏高时能滚到按钮） */
body.kiosk .player-body { flex: 1; overflow-y: auto; }
/* 关键②：报告纸自身限高内部滚动 —— 长报告（带图+大段文字）不会把下方「继续/选项」顶出屏幕，
   按钮始终留在可见区，学生不会以为卡死 */
body.kiosk .report-paper { max-height: calc(100vh - 190px); overflow-y: auto; }
body.kiosk .video-box { flex: 1; display: flex; align-items: center; justify-content: center; }
body.kiosk .video-box video { max-height: 76vh; }
body.kiosk .play-mask {
  position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 24px; font-weight: 700;
  cursor: pointer; user-select: none;
}
body.kiosk .play-mask:hover { background: rgba(0, 0, 0, .45); }

/* ===== 投射板出题浮层（kiosk，2026-10-22 侯老师：不占空间）=====
   视频播完出「继续」/ 出题时：画面模糊压暗，字和选项浮在画面正中央 */
body.kiosk .video-box { position: relative; }
body.kiosk video.vqblur { filter: blur(8px) brightness(.72); transform: scale(1.015); }
.vq-cover {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15, 23, 42, .25);
}
.vq-inner { width: min(660px, 94%); text-align: center; }
.vq-q {
  color: #fff; font-size: 20px; font-weight: 700; line-height: 1.55;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
  margin-bottom: 16px;
}
.vq-cover .choice-btn {
  width: 100%; justify-content: flex-start; margin: 0 0 10px;
  font-size: 17px; background: rgba(255, 255, 255, .95);
}
.vq-cover .choice-btn:last-child { margin-bottom: 0; }
.vq-cover .vq-btn.el-button--primary { background: #2b7a78; }

/* ===== 纯播放模式（body.kiosk，2026-10-22）=====
   PPT 投放链接（?q= 直达）打开时启用：隐藏顶部导航 / 课程目录，
   只留题目播放画面 —— 像截图2 那样的独立网页，没有其他东西 */
body.kiosk .topbar, body.kiosk .sidebar { display: none !important; }

/* ===== 投影大字模式（body.bigmode，2026-10-21）=====
   PPT 课堂投放用：直达链接带 &big=1 时启用，教室后排也看得清 */
body.bigmode { font-size: 17px; }
body.bigmode .ph-title { font-size: 22px; font-weight: 700; }
body.bigmode .video-box video { max-height: 62vh; }
body.bigmode .choice-btn { font-size: 18px; padding: 16px 20px; }
body.bigmode .ending-icon { font-size: 56px; }
body.bigmode .ending-text { font-size: 22px; line-height: 1.7; }
body.bigmode .relay-head { font-size: 19px; }
body.bigmode .relay-text { font-size: 18px; }
body.bigmode .relay-hint { font-size: 15px; }
.ending-box { text-align: center; padding: 30px 10px; }

/* 检查结果配图（2026-10-23） */
.rp-img { max-width: 100%; max-height: 46vh; display: block; margin: 10px auto 4px; border-radius: 8px; border: 1px solid #e6eaee; }

/* ===== 中继点（2026-10-18）：不算结局，看完原因回上一题重选，本题不得分 ===== */
.relay-box {
  max-width: 560px; margin: 6px auto 0; padding: 14px 18px;
  background: #fffbeb; border: 1px solid #f59e0b; border-radius: 10px;
  text-align: left;
}
.relay-box .relay-head { font-weight: 700; color: #b45309; font-size: 15px; margin-bottom: 6px; }
.relay-box .relay-text { color: #78350f; font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.relay-box .relay-hint { margin-top: 8px; font-size: 12px; color: #92400e; }

/* ===== 结果回报：静态报告单（做成纸质报告的样子，不违和） ===== */
.report-paper {
  max-width: 620px; margin: 4px auto 0; padding: 16px 22px 12px;
  background: #fbfaf6; border: 1px solid #ddd8cc; border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10), inset 0 0 0 7px #fff;
  color: #2b2b2b; font-family: "Songti SC", "SimSun", "Noto Serif SC", serif;
}
.report-paper .rp-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: #7a7a7a; letter-spacing: .5px;
}
.report-paper .rp-title {
  text-align: center; font-size: 19px; font-weight: 700; letter-spacing: 4px;
  margin: 8px 0 2px; padding-bottom: 9px; border-bottom: 2px solid #2b2b2b;
}
.report-paper .rp-body { padding: 8px 2px 4px; }
.report-paper .rp-gap { height: 9px; }
.report-paper .rp-note { font-size: 13px; line-height: 1.95; color: #333; }
.report-paper .rp-row {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13.5px; line-height: 2.15; border-bottom: 1px dotted #e6e1d5;
}
.report-paper .rp-name { flex: 1; min-width: 0; }
.report-paper .rp-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.report-paper .rp-val.hi { color: #c0392b; }
.report-paper .rp-val.lo { color: #1f6feb; }
.report-paper .rp-ref { flex: 0 0 104px; text-align: right; color: #8c8c8c; font-size: 12px; }
.report-paper .rp-foot {
  margin-top: 12px; padding-top: 9px; border-top: 1px solid #e6e1d5;
  font-size: 12px; color: #7a7a7a; text-align: right;
}
.ending-icon {
  width: 60px; height: 60px; border-radius: 50%; background: #e3f0f2; color: var(--brand);
  font-size: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.ending-icon.bad { background: #fdeaea; color: #c0392b; }
.score-line { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.score-line.ok { color: #1e9e6a; }
.score-line.bad { color: #c0392b; }
.score-line b { font-size: 22px; margin: 0 2px; }
.ending-text { font-size: 16px; color: #2c3e50; line-height: 1.8; white-space: pre-wrap; }
.player-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.step-hint { text-align: center; font-size: 12px; color: #b0b8c0; margin-top: 12px; }

@media (max-width: 720px) {
  .body { flex-direction: column; }
  .sidebar { width: 100%; height: 220px; border-right: none; border-bottom: 1px solid #e6eaee; }
  .content { padding: 18px; }
}

/* ===== 手机端自动优化（ygs-mobile-v1）===== */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  .body { flex-direction: column; }
  .sidebar { width: 100%; height: 34vh; min-height: 180px; border-right: none;
             border-bottom: 1px solid #e6eaee; }
  .content { padding: 14px; }
  .topbar { padding: 0 12px; gap: 8px; flex-wrap: wrap; height: auto; min-height: 56px; }
  .topbar-brand { font-size: 15px; }
  .user-name { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .el-dialog { width: 94% !important; margin: 6vh auto !important; }
  .el-form-item__label { float: none !important; display: block !important;
                         text-align: left !important; padding: 0 0 4px !important; }
  .el-form-item__content { margin-left: 0 !important; }
  img, svg, video, table, pre { max-width: 100%; }
  .content { overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  .content { padding: 10px; }
  .sidebar { height: 30vh; }
}