.container {
      height: 100vh;
      width: 100% !important;
      display: flex;
      flex-direction: column;
      position: relative;
      background: #F5F7FA;
      overflow: hidden;
      touch-action: none;
      padding: 0;
      box-sizing: border-box;
}

/* 材料区域样式 */
.material-section {
      position: relative;
      width: auto;
      margin: 10px;
      background: #fff;
      border-radius: 6px;
      border: 1px solid #eee;
      will-change: height;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
}

/* 拖动时禁用过渡效果 */
.material-section.resizing {
      transition: none !important;
}

.material-title {
      padding: 20rpx 30rpx;
      font-size: 28rpx;
      color: #666;
      border-bottom: 1rpx solid #eee;
}

/* 拖动手柄样式 */
.resize-handle {
      position: absolute;
      bottom: -12rpx;
      /* 调整手柄位置，让它位于材料区域下方 */
      left: 0;
      right: 0;
      height: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      z-index: 10;
      touch-action: none;
      cursor: ns-resize;
}

.resize-line {
      width: 60rpx;
      height: 4rpx;
      background: #D8D8D8;
      border-radius: 2rpx;
      position: relative;
}

.resize-dots {
      position: absolute;
      top: -8rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 24rpx;
      height: 24rpx;
      background: radial-gradient(circle, #999 2rpx, transparent 2rpx) 0 0 / 8rpx 8rpx;
}

.resizing {
      background: #f5f5f5;
}

/* 调整材料内容区域 */
.material-swiper {
      height: calc(100% - 40rpx);
      z-index: 1;
}

/* 内容区域优化 */
.material-content {
      height: 100%;
      padding: 20rpx 30rpx;
      width: 92%;
      transform: translateZ(0);
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: none;
      touch-action: pan-y;
}

.material-text {
      font-size: 28rpx;
      line-height: 1.6;
      color: #333;
      word-wrap: break-word;
}

/* 富文本中的段落样式 */
.material-text p {
      display: inline;
      margin: 0;
      padding: 0;
}

/* 富文本中的图片样式 */
.material-text img {
      display: inline-block !important;
      vertical-align: middle !important;
      max-height: 40rpx !important;
      width: auto !important;
      margin: 0 4rpx !important;
}

/* 如果需要某些图片单独成行显示 */
.material-text img.block {
      display: block !important;
      max-height: none !important;
      max-width: 100% !important;
      margin: 20rpx 0 !important;
}

/* 修改富文本中图片的样式 */
.material-text rich-text {
      width: 100%;
      display: inline;
}

/* 富文本图片样式 */
.rich-text-img {
      max-width: 100%;
      height: auto;
      vertical-align: middle;
      display: inline-block;
      margin: 0 4rpx;
}

/* 当图片需要单独占一行时的样式 */
.rich-text-img.block {
      display: block;
      margin: 20rpx 0;
}

.material-index {
      position: absolute;
      bottom: 10rpx;
      right: 40rpx;
      font-size: 24rpx;
      color: #999;
}

/* 材料指示点 */
.material-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40rpx;
      margin-top: 10rpx;
}

.dot {
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      background: #ddd;
      margin: 0 8rpx;
}

.dot.active {
      background: #007aff;
      transform: scale(1.2);
}

/* 题目内容样式 */
.question-container {
      background: #fff;
      border-radius: 12rpx;
      margin: 0 20rpx;
      padding: 30rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
      width: calc(100% - 40rpx);
      box-sizing: border-box;
}

.question-header {
      margin-bottom: 20rpx;
      /* 减小底部间距 */
}

.question-type {
      color: #666;
      font-size: 30rpx;
}

.question-content {
      box-sizing: border-box;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 20rpx;
      width: 100% !important;
      height: 100%;
      display: flex;
      flex-direction: column;
      min-width: 0; /* 防止 flex 子元素溢出 */
}

/* 当没有材料时的样式 */
.question-content.no-material {
      height: calc(100vh - 67px);
      /* 只减去底部工具栏高度 */
}

/* 修改选项列表样式 */
.options-list {
      margin-top: 30rpx;
      width: 100%;
}

/* 富文本通用样式 */
rich-text {
      width: 100%;
      display: inline;
}

/* 富文本内容样式覆盖 */
rich-text .p {
      display: inline;
      margin: 0;
      padding: 0;
}

rich-text .img {
      display: inline-block;
      vertical-align: middle;
      max-height: 32rpx;
      width: auto;
      margin: 0 4rpx;
}

/* 如果图片需要单独成行显示时的样式 */
rich-text .img.block {
      display: block;
      max-height: none;
      max-width: 100%;
      margin: 20rpx 0;
}

rich-text .strong,
rich-text .b {
      font-weight: bold;
}

rich-text .em,
rich-text .i {
      font-style: italic;
}

rich-text .u {
      text-decoration: underline;
}

/* 选项基础样式 */
.option-item {
      margin: 20rpx 0;
      display: flex;
      align-items: center;
      padding: 24rpx 30rpx;
      background: #fff;
      border-radius: 8rpx;
      border: 2rpx solid #E5E5E5;
      position: relative;
      box-sizing: border-box;
      width: 100%;
      transition: all 0.2s ease;
      /* 添加过渡效果 */
}

/* 正确答案样式 */
.option-correct {
      background: #F6FFF1 !important;
      border: 2rpx solid #52C41A !important;
}

/* 错误答案样式 */
.option-wrong {
      background: #FFF1F0 !important;
      border: 2rpx solid #FF4D4F !important;
}

/* 选项内容样式 */
.option-content {
      flex: 1;
      display: flex;
      align-items: center;
}

.option-letter {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
      min-width: 40rpx;
}

/* 答案图标样式 */
.answer-icon {
      width: 32rpx;
      height: 32rpx;
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
}

/* 选项文字样式 */
.option-text {
      flex: 1;
      font-size: 32rpx;
      color: #333;
      margin-left: 20rpx;
}

/* 正确答案文字颜色 */
.option-correct .option-letter,
.option-correct .option-text {
      color: #52C41A;
}

/* 错误答案文字颜色 */
.option-wrong .option-letter,
.option-wrong .option-text {
      color: #FF4D4F;
}

/* 统一的选中样式 */
.option-selected {
      background: #E3F0FF !important;
      border: 2rpx solid #1A7CFF !important;
}

.option-selected .option-label,
.option-selected .option-content,
.option-selected .separator {
      color: #1A7CFF !important;
}

/* 选项标签样式 */
.option-label {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
      margin-right: 20rpx;
      min-width: 40rpx;
      text-align: center;
      line-height: 1;
      /* 设置为1，确保文字垂直居中 */
      height: 32rpx;
      /* 设置与字体大小相同的高度 */
      display: flex;
      align-items: center;
      /* 垂直居中对齐 */
      justify-content: center;
      /* 水平居中对齐 */
}

/* 分隔符样式 */
.separator {
      color: #E5E5E5;
      margin: 0 20rpx;
      font-weight: normal;
}

/* 添加底部按钮固定样式 */
.footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      z-index: 100;
}

.footer-content {
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      /* 左右两侧分布 */
      align-items: center;
      padding: 0 30rpx;
      width: 100%;
      box-sizing: border-box;
}

.timer {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
}

.question-card-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 120rpx;
      /* 确保有足够的宽度 */
}

.card-icon {
      width: 48rpx;
      /* 增大图标尺寸 */
      height: 48rpx;
      margin-bottom: 8rpx;
}

.card-text {
      font-size: 24rpx;
      color: #333;
      white-space: nowrap;
      /* 防止文字换行 */
}

/* 试卷信息 */
.paper-info {
      background: #fff;
      padding: 30rpx;
      border-bottom: 1rpx solid #eee;
}

.paper-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
}

.paper-meta {
      display: flex;
      font-size: 24rpx;
      color: #999;
}

.question-count {
      margin-right: 20rpx;
}

/* 材料区域样式 */
.material-section {
      background: #fff;
      height: 400rpx;
      position: relative;
      padding: 20rpx 0;
}

.material-subtitle {
      font-size: 26rpx;
      font-weight: bold;
      color: #666;
      margin-bottom: 10rpx;
}

.material-text {
      font-size: 26rpx;
      color: #333;
      line-height: 1.6;
      padding-bottom: 40rpx;
}

.material-image-wrapper {
      width: 100%;
      margin: 20rpx 0;
}

.material-image {
      width: 100%;
      border-radius: 8rpx;
}

/* 题目区域样式 */
.question-scroll {
      flex: 1;
      overflow: hidden;
      overflow-y: auto;
      background: #ececec;
      height: calc(100vh - 120rpx);
      /* 调整高度 */
      padding-bottom: 160rpx;
}

.question-scroll.no-material {
      /* height: calc(100vh - 200rpx - 120rpx);  */
}

/* 底部按钮区域 */
.footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      padding: 20rpx 30rpx;
      box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.button-container {
      display: flex;
      justify-content: space-between;
      padding: 0;
}

.prev-button,
.next-button,
.submit-button {
      width: 45%;
      border-radius: 44rpx;
      font-size: 32rpx;
}

.prev-button {
      background: #f5f5f5;
      color: #666;
}

.next-button {
      background: #007aff;
      color: #fff;
}

.submit-button {
      background: #ff6b6b;
      color: #fff;
}

.prev-button[disabled],
.next-button[disabled],
.submit-button[disabled] {
      opacity: 0.5;
}

/* 适配 iPhone X 等机型 */
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
      .footer {
            padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
      }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
      .footer {
            padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
      }
}

/* 底部留白区域，确保可以滚动到底部 */
.bottom-space {
      height: 136rpx;
      /* 与底部按钮组高度一致 */
      width: 100%;
}

/* 题目滑动容器 */
.question-swiper {
      flex: 1;
      height: calc(100vh - 120rpx - 136rpx);
      /* 减去顶部和底部按钮的高度 */
      width: 100% !important;
      box-sizing: border-box;
      z-index: 1;
      padding-top: 10rpx;
}

/* swiper-item 样式 */
.question-swiper swiper-item {
      width: 100% !important;
      height: 100% !important;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
}

/* 确保题目页垂直布局占满剩余空间，避免被遮挡 */
.question-page {
      display: flex;
      flex-direction: column;
      width: 100% !important;
      height: 100%;
      min-height: calc(100vh - 120rpx - 136rpx);
      padding-bottom: calc(128rpx + env(safe-area-inset-bottom));
      box-sizing: border-box;
      min-width: 0; /* 防止 flex 子元素溢出 */
}

/* 题目内容包裹器（用于组件） */
.question-content-wrapper {
      width: 100% !important;
      box-sizing: border-box;
      flex: 1;
      min-width: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
}

.question-content-wrapper.has-material {
      /* 有材料时的高度由内联样式控制 */
}

.question-content-wrapper.no-material {
      height: calc(100vh - 120rpx - 136rpx);
}

/* 确保组件内部元素有宽度 */
.question-content-wrapper question-display {
      width: 100% !important;
      height: 100% !important;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
}

/* scroll-view 样式 */
.question-page scroll-view {
      width: 100% !important;
      height: 100% !important;
      box-sizing: border-box;
      flex: 1;
      min-width: 0;
}

/* 加载状态样式 */
.loading-container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.9);
      z-index: 999;
}

.loading-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #FFFFFF;
      padding: 40rpx;
      border-radius: 16rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.loading-spinner {
      width: 80rpx;
      height: 80rpx;
      position: relative;
      margin-bottom: 20rpx;
}

.spinner-circle {
      width: 100%;
      height: 100%;
      border: 6rpx solid #f0f0f0;
      border-top: 6rpx solid #1890ff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
}

.loading-text {
      font-size: 28rpx;
      color: #666;
      margin-top: 20rpx;
}

@keyframes spin {
      0% {
            transform: rotate(0deg);
      }

      100% {
            transform: rotate(360deg);
      }
}

/* 拖动时的状态 */
.resizing .material-section {
      transition: none !important;
}

/* 添加 mp-html 相关样式 */
.mp-html {
      font-size: 28rpx;
      line-height: 1.6;
      color: #333;
      width: 100%;
      box-sizing: border-box;
      overflow-x: hidden;
}

/* 暂停遮罩层样式 */
.pause-mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1500;
      /* 确保高于其他内容 */
}

.pause-mask.show {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      /* 显示时恢复点击事件 */
}

.pause-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transform: translateY(20rpx);
      opacity: 0;
      transition: all 0.3s ease;
}

.pause-mask.show .pause-content {
      transform: translateY(0);
      opacity: 1;
}

.pause-image {
      width: 120rpx;
      height: 120rpx;
      margin-bottom: 40rpx;
}

.pause-title {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
}

.pause-time {
      font-size: 60rpx;
      color: #1A7CFF;
      margin-bottom: 40rpx;
      font-family: monospace;
}

.pause-tip {
      font-size: 28rpx;
      color: #666;
}

/* 状态指示点样式 */
.question-status {
      padding: 24rpx 32rpx;
      display: flex;
      gap: 40rpx;
}

.status-item {
      display: flex;
      align-items: center;
      gap: 12rpx;
}

.status-dot {
      width: 24rpx;
      height: 24rpx;
      border-radius: 50%;
      background: #F5F5F5;
      /* 未答题 */
}

.status-dot.answered {
      background: #E3F0FF;
      border: 2rpx solid #1A7CFF;
}

.status-dot.current {
      background: #1A7CFF;
}

.status-item text {
      font-size: 28rpx;
      color: #666;
}

/* 答案解析样式 */
.explanation-section {
      margin: 30rpx 20rpx;
      padding: 20rpx;
      background: #f8f8f8;
      border-radius: 8rpx;
      border-left: 6rpx solid #3f7ee8;
}

.explanation-title {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 16rpx;
}

.explanation-content {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
}

/* 用户选择的选项样式 */
.option-item.user-selected {
      background: #FFF3F3;
      border: 2rpx solid #FF4D4F;
}

.option-item.user-selected .option-label,
.option-item.user-selected .option-content,
.option-item.user-selected .separator {
      color: #FF4D4F;
}

/* 答案解析样式优化 */
.answer-analysis {
      margin: 30rpx 20rpx;
      padding: 20rpx;
      background: #f8f8f8;
      border-radius: 8rpx;
      border-left: 6rpx solid #3f7ee8;
      margin-bottom: 160rpx;
      /* 为底部按钮留出空间 */
}

.analysis-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
}

.analysis-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
}

.correct-answer {
      font-size: 28rpx;
      color: #52C41A;
      font-weight: 500;
}

.analysis-content {
      padding: 20rpx;
      font-size: 28rpx;
      color: #666666;
      line-height: 1.6;
      width: 100%;
      box-sizing: border-box;
      overflow-x: hidden;
}

.analysis-content image {
      max-width: 100% !important;
      height: auto !important;
      display: block;
      margin: 20rpx auto;
}

/* 底部留白区域 */
.bottom-spacing {
      display: none;
}

/* 整体预览页面样式 */
.result-overview {
      min-height: 100vh;
      background: #F5F7FA;
      /* padding: 30rpx; */
      position: relative;
      /* padding-bottom: calc(128rpx + env(safe-area-inset-bottom)); */
}

/* 确保加载状态在预览页面中正确显示 */
.result-overview .loading-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(245, 247, 250, 0.9);
}

/* 成绩展示区域 */
.score-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40rpx 0;
      background: #fff;
      border-radius: 12rpx;
      margin: 20rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.score-main {
      font-size: 48rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
}

.score-desc {
      font-size: 28rpx;
      color: #666;
}

.qualified  {
      color: #4CAF50;
}

.unqualified  {
      color: #FF5722;
}

/* 统计区域 */
.stats-section {
      background: #FFFFFF;
      border-radius: 16rpx;
      padding: 30rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      /* margin-bottom: 30rpx; */
      margin: 20rpx;
}

.stats-item {
      display: flex;
      flex-direction: column;
      align-items: center;
}

.stats-value {
      font-size: 36rpx;
      color: #333333;
      font-weight: 500;
      margin-bottom: 8rpx;
}

.stats-label {
      font-size: 24rpx;
      color: #999999;
}

.stats-divider {
      width: 2rpx;
      height: 60rpx;
      background: #EEEEEE;
}

/* 题目列表区域 */
.questions-list {
      background: #FFFFFF;
      border-radius: 16rpx;
      padding: 30rpx;
      margin: 20rpx;
}

.list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
}

.header-title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 500;
}

.correct-count {
      font-size: 28rpx;
      color: #52C41A;
}

.question-items {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20rpx;
}

.question-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
}

.question-index {
      font-size: 28rpx;
      color: #666666;
      margin-bottom: 8rpx;
      transition: transform 0.2s ease;
}

.question-index:active {
      transform: scale(0.95);
      opacity: 0.8;
}

/* 可以添加一个指示当前题目的样式 */
.question-index.current {
      box-shadow: 0 0 0 4rpx rgba(26, 124, 255, 0.2);
}

.question-result {
      display: flex;
      flex-direction: column;
      align-items: center;
}

.question-result.correct {
      color: #52C41A;
}

.question-result.wrong {
      color: #FF4D4F;
}

.result-icon {
      width: 32rpx;
      height: 32rpx;
      margin-bottom: 4rpx;
}

/* 底部按钮 */
.bottom-button {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100rpx;
      background: #1A7CFF;
      color: #FFFFFF;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
}

/* 修改图例样式 */
.status-legend {
      display: flex;
      align-items: center;
      gap: 20rpx;
}

.legend-item {
      display: flex;
      align-items: center;
      gap: 8rpx;
}

.legend-circle {
      width: 32rpx;
      height: 32rpx;
      border-radius: 50%;
      border: 2rpx solid transparent;
      position: relative;
}

/* 正确图例 */
.legend-circle.correct {
      border: 2px solid #52C41A;
      background: #fff;
}

/* 错误图例 */
.legend-circle.wrong {
      border: 2px solid #FF4D4F;
      background: #fff;
}

/* 未答图例 */
.legend-circle.unanswered {
      border: 2px solid #D9D9D9;
      background: #fff;
}

.legend-item text {
      font-size: 24rpx;
      color: #666666;
}

/* 题号空心圆+圆弧 */
.circle-index {
      position: relative;
      width: 72rpx;
      height: 72rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
}

.circle-bg {
      position: absolute;
      width: 72rpx;
      height: 72rpx;
      border-radius: 50%;
      border: 2rpx solid #D9D9D9;
      background: #fff;
      z-index: 1;
}

.circle-arc {
      position: absolute;
      width: 72rpx;
      height: 72rpx;
      border-radius: 50%;
      border: 4rpx solid #D9D9D9;
      /* 默认灰色边框 */
      z-index: 2;
}

/* 正确答案的边框样式 - 完整的绿色圆 */
.arc-correct {
      border-color: #52C41A !important;
}

/* 错误答案的边框样式 - 完整的红色圆 */
.arc-wrong {
      border-color: #FF4D4F !important;
}

/* 未答题的边框样式 - 完整的灰色圆 */
.arc-unanswered {
      border-color: #D9D9D9 !important;
}

.circle-text {
      position: relative;
      z-index: 3;
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
      text-align: center;
      width: 100%;
      line-height: 72rpx;
}

/* 底部按钮组 */
.bottom-btns {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20rpx 30rpx;
      padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
      background: #fff;
      box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
      display: flex;
      justify-content: space-between;
      gap: 20rpx;
      z-index: 100;
}

.btn-outline, .btn-blue {
      flex: 1;
      /* height: 88rpx;
      line-height: 88rpx; */
      text-align: center;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
}

.btn-outline {
      background: #fff;
      color: #333;
      border: 2rpx solid #ddd;
}

.btn-blue {
      background: #007AFF;
      color: #fff;
}

/* Add padding to the bottom of the content to prevent overlap with fixed buttons */
.result-overview {
      padding-bottom: calc(128rpx + env(safe-area-inset-bottom));
      width: 100%;
}


/* 确保表格不会溢出 */
.material-content table,
.question-container table,
.analysis-content table {
      max-width: 100% !important;
      width: auto !important;
      margin: 20rpx auto;
      border-collapse: collapse;
      table-layout: fixed;
}

/* 确保所有富文本内容中的图片都正确缩放 */
mp-html {
      width: 100%;
      box-sizing: border-box;
      overflow-x: hidden;
}

/* mp-html 中的图片样式 */
mp-html img {
      max-width: 100% !important;
      width: auto !important;
      height: auto !important;
      display: block !important;
      margin: 20rpx auto !important;
      box-sizing: border-box !important;
}

/* 行内图片样式 */
mp-html img.inline {
      display: inline-block !important;
      vertical-align: middle !important;
      max-height: 1.5em !important;
      width: auto !important;
      margin: 0 4rpx !important;
}

/* 图片容器样式 */
mp-html .img-container {
      width: 100% !important;
      margin: 20rpx auto !important;
      text-align: center !important;
      overflow: hidden !important;
}

/* 图片加载占位样式 */
mp-html .img-loading {
      width: 100% !important;
      height: 200rpx !important;
      background: #f5f5f5 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 20rpx auto !important;
}

/* 图片加载失败样式 */
mp-html .img-error {
      width: 100% !important;
      height: 200rpx !important;
      background: #f5f5f5 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 20rpx auto !important;
      color: #999 !important;
      font-size: 28rpx !important;
}

/* mp-html 中的表格样式 */
mp-html table {
      max-width: 100% !important;
      width: auto !important;
      margin: 20rpx auto !important;
      border-collapse: collapse !important;
      box-sizing: border-box !important;
}

mp-html td,
mp-html th {
      padding: 10rpx !important;
      border: 1px solid #ddd !important;
      word-break: break-all !important;
      box-sizing: border-box !important;
}

/* mp-html 中的段落样式 */
mp-html p {
      margin: 20rpx 0 !important;
      line-height: 1.6 !important;
      box-sizing: border-box !important;
      width: 100% !important;
}

/* mp-html 中的列表样式 */
mp-html ul,
mp-html ol {
      padding-left: 40rpx !important;
      margin: 20rpx 0 !important;
      box-sizing: border-box !important;
      width: 100% !important;
}

mp-html li {
      margin: 10rpx 0 !important;
      line-height: 1.6 !important;
      box-sizing: border-box !important;
}

/* mp-html 中的代码块样式 */
mp-html pre {
      max-width: 100% !important;
      overflow-x: auto !important;
      background: #f5f5f5 !important;
      padding: 20rpx !important;
      border-radius: 8rpx !important;
      margin: 20rpx 0 !important;
      box-sizing: border-box !important;
}

/* mp-html 中的行内元素样式 */
mp-html span,
mp-html a,
mp-html strong,
mp-html em {
      word-wrap: break-word !important;
      word-break: break-word !important;
      box-sizing: border-box !important;
}

/* 确保所有 mp-html 中的元素都不会溢出 */
mp-html view,
mp-html text,
mp-html div {
      max-width: 100% !important;
      box-sizing: border-box !important;
      word-wrap: break-word !important;
}

/* 确保所有容器都不会被内容撑开 */
.material-section,
.question-container,
.answer-analysis {
      width: 100% !important;
      box-sizing: border-box !important;
      overflow-x: hidden !important;
}

/* ========== 双层布局样式（与答题页一致） ========== */

/* 试题详情：背景层资料 + 前置问题面板 */
.detail-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
}

/* 背景层：资料标题固定 + 下方内容可滚动 */
.layer-back {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
      background: #fff;
      display: flex;
      flex-direction: column;
}

/* 资料标题固定 */
.material-title-fixed {
      flex-shrink: 0;
      padding: 24rpx 28rpx 16rpx;
      background: #fff;
      border-bottom: 1rpx solid #f0f0f0;
}

.material-title-fixed .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      display: block;
}

.material-title-fixed .section-title-underline {
      width: 48rpx;
      height: 6rpx;
      background: #e74c3c;
      margin-top: 8rpx;
      border-radius: 2rpx;
}

.material-scroll-below-title {
      flex: 1;
      min-height: 0;
      width: 100%;
      background: #fff;
}

.material-placeholder {
      height: 600rpx;
      width: 100%;
}

/* 前置层：问题面板 */
.movable-area {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      z-index: 1;
      width: 100%;
      pointer-events: none;
}

.movable-panel.question-panel-wrap {
      width: 100%;
      background: #fff;
      border-radius: 24rpx 24rpx 0 0;
      box-shadow: 0 -4rpx 24rpx rgba(0,0,0,0.08);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      pointer-events: auto;
}

/* 拖拽条 */
.panel-drag-handle {
      width: 100%;
      height: 56rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: #fff;
      padding: 12rpx 0;
}

.panel-drag-bar {
      width: 80rpx;
      height: 8rpx;
      background: #d0d0d0;
      border-radius: 4rpx;
}

/* 区块通用 */
.section {
      background: #fff;
      padding: 0 28rpx 32rpx;
      margin-bottom: 8rpx;
}

/* 资料区块 */
.section-material {
      padding-top: 24rpx;
}

.material-body {
      padding: 8rpx 0 40rpx;
      min-height: 760rpx;
}

.material-rich {
      font-size: 28rpx;
      color: #333;
      line-height: 1.7;
}

/* 区块标题 */
.section-head {
      margin-bottom: 20rpx;
}

.section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      display: block;
}

.section-title-underline {
      width: 48rpx;
      height: 6rpx;
      background: #e74c3c;
      margin-top: 8rpx;
      border-radius: 2rpx;
}

/* 问题区块 */
.section-question {
      padding-top: 16rpx;
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
}

.question-content-swiper {
      flex: 1;
      min-height: 60vh;
      width: 100%;
      height: 0;
}

.content-swiper-item {
      width: 100%;
      min-height: 800rpx;
}

.question-body {
      padding: 8rpx 0 24rpx;
      height: 100%;
      min-height: 280rpx;
      box-sizing: border-box;
}