duidui_mini_program/pages/camp_task_objective_questions/index.wxss

.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);
}

/* 拖动手柄样式优化 */
.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;
}

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

.resize-area {
      width: 200rpx;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
}

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

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

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

/* 调整材料内容区域 */
.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.no-material {
      height: calc(100vh - 120rpx);
      /* 只减去底部工具栏高度 */
}

/* 当有答案解析时的样式 */
.question-content.has-explanation {
      padding-bottom: 15rpx;
      padding-top: 15rpx;
}

/* 修改选项列表样式 */
.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-selected {
      background-color: #E3F0FF !important;
      border-color: #1A7CFF !important;
}

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

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

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

.option-text {
      flex: 1;
      font-size: 32rpx;
      color: #333;
      margin-left: 20rpx;
}

.separator {
      color: #E5E5E5;
      margin: 0 20rpx;
}

/* 添加底部按钮固定样式 */
.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: 140rpx;
      /* 与按钮区域高度相近 */
      width: 100%;
}

/* 试题详情：背景层资料 + 前置问题面板（可上下滑动） */
.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;
}

/* 多条资料时展示所有 tab（资料一、资料二…） */
.material-tabs {
      width: 100%;
      padding: 8rpx 0 12rpx;
}

.material-tabs-scroll {
      width: 100%;
      white-space: nowrap;
}

.material-tabs-inner {
      display: inline-flex;
      flex-wrap: nowrap;
      gap: 16rpx;
      padding: 0 28rpx;
}

.material-tab {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      padding: 12rpx 24rpx 8rpx;
      font-size: 28rpx;
      color: #666;
      flex-shrink: 0;
}

.material-tab.active {
      color: #333;
      font-weight: 500;
}

.material-tab.active .material-tab-underline {
      display: block;
}

.material-tab-underline {
      display: none;
      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%;
}

/* 前置层：问题面板，可上下滑动；area 不拦截触摸，仅面板拦截，这样露出的资料区可上下滑动 */
.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;
}

/* 通用滚动区（背景层内） */
.detail-scroll {
      width: 100%;
      height: 100%;
      background: #fff;
}

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

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

.material-label-bar {
      margin-bottom: 16rpx;
}

.material-label-text {
      font-size: 26rpx;
      color: #666;
      font-weight: 500;
}

/* 区块标题：资料 / 问题，加红色下划线 */
.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;
}

/* 资料内容：左右滑动切换材料一/二/三；给足高度以便资料展示全，超出部分由外层 scroll-view 滚动 */
.material-content-swiper {
      min-height: 800rpx;
      width: 100%;
}

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

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

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

/* 问题区块：占满面板剩余空间，题目内容可滚动展示全 */
.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;
}

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

.detail-bottom-space {
      height: 120rpx;
      width: 100%;
}

/* 题目滑动容器（保留兼容） */
.question-swiper {
      flex: 1;
      height: calc(100vh - 120rpx);
      /* 减去底部工具栏高度 */
      z-index: 1;
      padding-top: 10rpx;
      width: 100%;
}

/* 确保题目页垂直布局占满剩余空间，避免被遮挡 */
.question-page {
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 120rpx);
}

/* 题目滚动容器占满剩余空间 */
.question-content {
      flex: 1;
}

/* 底部工具栏：固定盖在问题面板上的另一层，不占布局空间，无明显分割线 */
.toolbar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 120rpx;
      background: rgba(255, 255, 255, 0.98);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40rpx;
      z-index: 100;
}

.timer-container {
      display: flex;
      align-items: center;
      gap: 16rpx;
      /* 增加间距 */
}

.pause-icon {
      width: 40rpx;
      /* 增加图标大小 */
      height: 40rpx;
}

.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;
      /* 防止文字换行 */
}

/* 答题卡弹窗样式优化 */
.question-card-popup {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      z-index: 1000;
      visibility: hidden;
}

.question-card-popup.show {
      visibility: visible;
}

.popup-mask {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
}

.popup-content {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      border-radius: 24rpx 24rpx 0 0;
      transform: translateY(100%);
      transition: transform 0.3s ease-out;
}

.question-card-popup.show .popup-content {
      transform: translateY(0);
}

.popup-header {
      padding: 32rpx;
      border-bottom: 1rpx solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.popup-header text {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
}

.close-btn {
      padding: 8rpx;
      font-size: 40rpx;
      color: #999;
      line-height: 1;
}

.question-status {
      padding: 24rpx 32rpx;
      border-bottom: 1rpx solid #eee;
      display: flex;
      flex-direction: row;
      align-items: center;
}

.status-item {
      display: flex;
      align-items: center;
      margin-right: 40rpx;
}

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

.status-dot {
      width: 24rpx;
      height: 24rpx;
      border-radius: 50%;
      background: #eee;
      margin-right: 12rpx;
}

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

.numbers-grid {
      flex: 1;
      overflow-y: auto;
      padding: 20rpx 32rpx;
      -webkit-overflow-scrolling: touch;
      width: 100%;
      box-sizing: border-box;
      /* 确保padding计入宽度 */
}

.grid-container {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12rpx;
      padding: 24rpx;
      justify-items: center;
}

.number-item {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      /* 圆形 */
      background: #F5F5F5;
      /* 未答题背景色 */
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 12rpx;
      transition: all 0.3s ease;
}

.number-item text {
      font-size: 28rpx;
      color: #666;
      /* 未答题文字颜色 */
}

/* 已答题状态 */
.number-item.answered {
      background: #E3F0FF;
      border: 2rpx solid #1A7CFF;
}

.number-item.answered text {
      color: #1A7CFF;
      font-weight: 500;
}

/* 当前题目状态 */
.number-item.current {
      background: #1A7CFF;
      border: 2rpx solid #1A7CFF;
}

.number-item.current text {
      color: #FFFFFF;
      font-weight: 500;
}

.submit-btn {
      margin: 32rpx;
      margin-top: 16rpx;
      height: 88rpx;
      background: #1A7CFF;
      color: #fff;
      border-radius: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      font-weight: 500;
}

.submit-btn:active {
      opacity: 0.8;
}

/* 自定义加载动画样式 */
.loading-container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
}

.loading-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20rpx;
}

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

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

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

@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;
}

/* 暂停遮罩层样式已移至组件 /components/pause-mask/index.wxss */

.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-letter,
.option-item.user-selected .option-text,
.option-item.user-selected .separator {
      color: #FF4D4F;
}

/* 答案解析样式优化 */
/* .answer-analysis {
    margin-top: 30rpx;
    margin-bottom: 20rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.analysis-header {
    padding: 24rpx;
    border-bottom: 1rpx solid #F0F0F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

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

.analysis-content {
    padding: 24rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 1.6;
} */

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

/* 移除蒙板相关样式 */
.mask {
      display: none;
}

/* 移除选项点击相关样式 */
.option-item {
      pointer-events: auto;
      /* 恢复点击事件 */
}

/* 移除选中状态相关样式 */
.option-item.selected {
      background: none;
}

/* 滚动优化 */
::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
}

/* 修改为具体的选择器 */
.material-section,
.material-content,
.material-title,
.material-text,
.resize-handle,
.resize-line,
.resize-dots {
      user-select: none;
      -webkit-user-select: none;
}

.material-section-wrapper {
      margin: 24rpx 20rpx 0 20rpx;
      border-radius: 12rpx 12rpx 0 0;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
      overflow: hidden;
      background: #fff;
      position: relative;
      will-change: height;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
}

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

/* 非拖动状态添加平滑过渡 */
.material-section-wrapper:not(.resizing) {
      transition: height 0.3s ease-out;
}

.resize-handle-out {
      height: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      margin: 0 20rpx;
      border-radius: 0 0 12rpx 12rpx;
      position: relative;
      z-index: 100;
      touch-action: none;
      will-change: transform;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
}

.resize-line {
      width: 60rpx;
      height: 6rpx;
      background: #1A7CFF;
      border-radius: 3rpx;
      position: relative;
}

/* 拖动时的视觉反馈 */
.resize-handle-out.resizing .resize-line {
      background: #0052cc;
      transform: scaleY(1.5);
}

.material-section-margin {
      margin: 24rpx 20rpx 24rpx 20rpx;
}

/* 新增：材料内容底部内边距 */
.material-content-bottom-padding {
      padding-bottom: 32rpx;
}

/* 新增：外部拖动手柄样式 */
.camp-resize-handle-out {
      width: 100%;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      z-index: 100;
      cursor: ns-resize;
      position: relative;
      touch-action: none;
}

.camp-resize-handle {
      width: 120rpx;
      height: 16rpx;
      background: #e0e0e0;
      border-radius: 8rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
      margin: 0 auto;
}

.resize-line {
      width: 60rpx;
      height: 6rpx;
      background: #bbb;
      border-radius: 3rpx;
}

.custom-modal-mask {
      position: fixed;
      left: 0; right: 0; top: 0; bottom: 0;
      background: rgba(0,0,0,0.4);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
}
.custom-modal {
      background: #fff;
      border-radius: 16rpx;
      width: 540rpx;
      padding: 40rpx 32rpx 32rpx 32rpx;
      box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.12);
      display: flex;
      flex-direction: column;
      align-items: center;
}
.custom-modal-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 24rpx;
      color: #333;
}
.custom-modal-content {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 32rpx;
      text-align: center;
}
.custom-modal-actions {
      display: flex;
      width: 100%;
      justify-content: space-between;
      gap: 32rpx;
}
.custom-modal-btn {
      flex: 1;
      /* height: 80rpx; */
      border-radius: 8rpx;
      font-size: 28rpx;
      border: none;
}
.custom-modal-btn.cancel {
      background: #f5f5f5;
      color: #666;
}
.custom-modal-btn.confirm {
      background: #1A7CFF;
      color: #fff;
}

/* ========== 结果模式样式 ========== */
.result-overview {
      min-height: 100vh;
      background: #F5F7FA;
      position: relative;
}

/* 确保加载状态在预览页面中正确显示 */
.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: 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;
}

.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;
}

/* 修改图例样式 */
.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: 2rpx solid #52C41A;
      background: #fff;
}

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

/* 未答图例 */
.legend-circle.unanswered {
      border: 2rpx 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;
      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%;
}