/* ================= 讲解模式样式 ================= */
.lm-root { position: fixed; inset: 0; z-index: 9000; }

.lm-mask {
  position: absolute; inset: 0;
  background: rgba(12, 30, 52, .45);
  backdrop-filter: blur(2px);
  animation: lmFade .25s ease;
}

.lm-panel {
  position: absolute; inset: 18px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 20, 45, .3);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: lmRise .3s cubic-bezier(.2,.8,.3,1);
}

@keyframes lmFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes lmRise { from { opacity: 0; transform: translateY(14px) scale(.99) } to { opacity: 1; transform: none } }

/* ---- 头部 ---- */
.lm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #e6ecf4;
  background: linear-gradient(180deg, #f7fafe, #fff);
  flex-shrink: 0;
}
.lm-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lm-title h3 { font-size: 1.15rem; color: #0b2b4a; font-weight: 600; }
.lm-badge {
  background: #1f4e8c; color: #fff;
  font-size: .78rem; padding: 4px 12px; border-radius: 30px;
  font-weight: 500; white-space: nowrap;
}
.lm-meta { font-size: .82rem; color: #6b7d92; }
.lm-close {
  border: none; background: #eef2f8; color: #46618a;
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 15px; line-height: 1;
  transition: background .2s;
}
.lm-close:hover { background: #dfe8f5; }

/* ---- 三栏主体 ---- */
.lm-body {
  flex: 1; display: grid;
  grid-template-columns: 1.15fr 1fr 250px;
  min-height: 0;
}
.lm-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.lm-col-left  { border-right: 1px solid #e6ecf4; }
.lm-col-mid   { border-right: 1px solid #e6ecf4; }
.lm-col-right { background: #fbfcfe; }

.lm-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-size: .84rem; font-weight: 600; color: #3d5573;
  background: #f5f8fc;
  border-bottom: 1px solid #e6ecf4;
  flex-shrink: 0;
}
.lm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-a { background: #4b93e0; }
.dot-b { background: #34a06a; }
.dot-c { background: #e08a3c; }

.lm-scroll { flex: 1; overflow-y: auto; padding: 16px; min-height: 0; }

/* ---- 左栏：材料原文 ---- */
.lm-para {
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
  line-height: 1.95; font-size: .95rem; color: #1e2a3a;
}
.lm-para.para-1 { background: #fef9e7; }
.lm-para.para-2 { background: #e8f6ef; }
.lm-para.para-3 { background: #f3e8fd; }
.lm-para.para-4 { background: #fde9e9; }
.lm-para.para-5 { background: #e6f2fc; }

/* 句子：默认底层铺一条隐藏的红线（background-size 高度 = 线粗，宽度 0 即不可见）
   用 background 而非绝对定位子元素 —— inline 元素换行时背景会自动跟着每一行画，天然支持多行 */
.lm-sent {
  position: relative;
  border-radius: 4px;
  /* 上下留出 3px 空间给红线，避免线压到下一行文字 */
  padding: 1px 2px 4px;
  background-image: linear-gradient(90deg, #e0483a, #ff7b6b);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 3px;
  transition: background-size .85s cubic-bezier(.4, 0, .2, 1);
}
/* 已划线的句子：不加背景色高亮、不加边框，只把红线从左向右"画"出来 */
.lm-sent.lm-underlined {
  background-size: 100% 3px;
}

/* 当前正在讲解的句子：轻微加粗做视觉锚点（不换底色、不标亮） */
.lm-sent.lm-sent-active {
  font-weight: 600;
}

/* 鼠标笔：临时出现，随红线从左滑到右后淡出 */
.lm-pen {
  position: fixed; z-index: 9999; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(200, 50, 40, .35));
}

/* ---- 中栏：答案详解 ---- */
.lm-qcard {
  border: 1px solid #e4ecf5; border-radius: 14px;
  padding: 12px 14px; margin-bottom: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .25s, box-shadow .25s, background .25s, transform .2s;
}
.lm-qcard:hover { border-color: #b8d4ee; }
.lm-qcard.active {
  background: #eef5ff;
  border-color: #1f4e8c;
  box-shadow: 0 4px 16px rgba(31, 78, 140, .16);
  transform: translateX(2px);
}
.lm-qhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lm-qno {
  font-weight: 700; font-size: .82rem; color: #0e2f50;
  background: #e6eefb; padding: 2px 10px; border-radius: 30px;
}
.lm-qans {
  font-size: .78rem; font-weight: 600;
  padding: 2px 10px; border-radius: 30px;
}
.lm-qans.ans-A { background: #e3f6ea; color: #1a6f3c; }
.lm-qans.ans-B { background: #fdeaea; color: #b13e3e; }
.lm-qans.ans-C { background: #f0eefb; color: #5b4aad; }

.lm-qtext { font-size: .9rem; font-weight: 500; color: #1a2a3a; line-height: 1.6; margin-bottom: 6px; }
.lm-qexplain { font-size: .85rem; color: #43596f; line-height: 1.75; }

.lm-evidence {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed #d8e3f0;
}
.lm-ev-title { font-size: .78rem; font-weight: 600; color: #136b9c; margin-bottom: 6px; }
.lm-ev-item {
  background: #f7fbff; border-left: 3px solid #b8cde0;
  border-radius: 0 8px 8px 0;
  padding: 7px 10px; margin-bottom: 6px;
  transition: background .3s, border-color .3s;
}
.lm-ev-item.active { background: #fff6d9; border-left-color: #e0a83a; }
.lm-ev-en { font-size: .84rem; color: #1d3a5c; line-height: 1.6; }
.lm-ev-zh { font-size: .8rem; color: #6b7d92; margin-top: 3px; }

/* ---- 右栏：控制 + 题号 ---- */
.lm-controls { padding: 12px; border-bottom: 1px solid #e6ecf4; flex-shrink: 0; }
.lm-btn {
  width: 100%; border: 1px solid #cfd9e6; background: #fff;
  color: #1e3e6e; font-size: .86rem; font-weight: 500;
  padding: 9px 12px; border-radius: 30px; cursor: pointer;
  margin-bottom: 7px; transition: all .18s;
}
.lm-btn:hover:not(:disabled) { background: #eef5ff; border-color: #8fb8e0; }
.lm-btn:disabled { opacity: .45; cursor: not-allowed; }
.lm-btn-primary { background: #1f4e8c; border-color: #1f4e8c; color: #fff; }
.lm-btn-primary:hover:not(:disabled) { background: #163c6e; border-color: #163c6e; }

.lm-progress {
  height: 6px; background: #e8eef6; border-radius: 6px;
  overflow: hidden; margin: 10px 0 6px;
}
.lm-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #4b93e0, #1f4e8c);
  border-radius: 6px; transition: width .35s ease;
}
.lm-status { font-size: .76rem; color: #6b7d92; text-align: center; line-height: 1.5; }

.lm-qlist { padding: 10px; }
.lm-qitem {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: #fff; border: 1px solid #e4ecf5;
  border-radius: 10px; padding: 7px 9px; margin-bottom: 6px;
  cursor: pointer; font-size: .8rem; color: #2c4a6e;
  transition: all .2s;
}
.lm-qitem:hover { border-color: #b8d4ee; background: #f6faff; }
.lm-qitem.active {
  background: #1f4e8c; border-color: #1f4e8c; color: #fff;
  box-shadow: 0 4px 12px rgba(31, 78, 140, .25);
}
.lm-qitem-no {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: #eaf1fa; color: #2c5489;
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.lm-qitem.active .lm-qitem-no { background: rgba(255,255,255,.25); color: #fff; }
.lm-qitem-txt {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.lm-qitem-ans { flex-shrink: 0; font-weight: 700; font-size: .74rem; opacity: .75; }

/* ---- 底部提示 ---- */
.lm-foot {
  flex-shrink: 0; padding: 9px 20px;
  border-top: 1px solid #e6ecf4;
  font-size: .76rem; color: #7a8b9f;
  background: #fafcfe;
}

/* ---- 窄屏 ---- */
@media (max-width: 1000px) {
  .lm-panel { inset: 8px; }
  .lm-body { grid-template-columns: 1fr; grid-template-rows: auto auto auto; overflow-y: auto; }
  .lm-col { min-height: 260px; border-right: none; border-bottom: 1px solid #e6ecf4; }
  .lm-col-right { min-height: auto; }
  .lm-scroll { max-height: 40vh; }
}