/* ==========================================================================
   深度理解卡 · 共用样式（三端同一份，改一处同步三处）
   前缀 dd- 避免与 app 自身样式冲突
   ========================================================================== */

/* 入口按钮：错题卡片下 / 解析区下 */
.dd-entry {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 10px; padding: 11px 13px; border: 1.5px solid #f0c9a8;
  background: #fff8f1; border-radius: 12px; cursor: pointer;
  text-align: left; font-family: inherit;
}
.dd-entry:active { transform: scale(.99); }
.dd-entry .dd-e-ico { font-size: 20px; line-height: 1; flex: none; }
.dd-entry .dd-e-txt { flex: 1; min-width: 0; }
.dd-entry .dd-e-t { display: block; font-size: 14px; font-weight: 600; color: #854F0B; }
.dd-entry .dd-e-s { display: block; font-size: 11px; color: #a07a4e; margin-top: 1px; }
.dd-entry .dd-e-arrow { font-size: 15px; color: #c99659; flex: none; }

/* 错题本顶部汇总条 */
.dd-summary {
  background: linear-gradient(180deg, #fff8f1 0%, #fff 100%);
  border: 1px solid #f0d9c0; border-radius: 14px; padding: 14px 15px; margin-bottom: 12px;
}
.dd-summary h4 { font-size: 14px; color: #854F0B; margin-bottom: 4px; }
.dd-summary p { font-size: 12px; color: #8a8f9c; margin-bottom: 10px; }
.dd-summary .dd-s-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 7px;
  background: #fff; border: 1px solid #f1e3d4; border-radius: 10px; cursor: pointer;
}
.dd-summary .dd-s-item:last-child { margin-bottom: 0; }
.dd-summary .dd-s-name { flex: 1; font-size: 13px; font-weight: 500; color: #22242a; }
.dd-summary .dd-s-badge { font-size: 11px; color: #A32D2D; background: #fdeeee; border: 1px solid #f3caca; border-radius: 999px; padding: 1px 8px; }

/* 弹层 */
.dd-sheet {
  background: #fff; width: 100%; max-width: 560px; border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: ddUp .26s ease;
}
@keyframes ddUp { from { transform: translateY(46px); opacity: .3; } to { transform: none; opacity: 1; } }
.dd-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.dd-head .dd-h-txt { flex: 1; }
.dd-head h3 { font-size: 16px; line-height: 1.4; margin-bottom: 2px; }
.dd-head .dd-sub { font-size: 11px; color: #8a8f9c; }
.dd-x {
  border: none; background: #eef0f6; width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; font-size: 14px; color: #5a6070; flex: none;
}
.dd-x:active { background: #e2e5ee; }

/* 进度点 */
.dd-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.dd-dots i {
  height: 4px; flex: 1; border-radius: 2px; background: #e6e8ee; transition: background .25s;
}
.dd-dots i.on { background: #185fa5; }
.dd-dots i.done { background: #9fc0e8; }

/* 语音条 */
.dd-audio {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 14px;
  background: #eef4fc; border: 1px solid #d6e4f6; border-radius: 11px;
}
.dd-audio button {
  border: none; width: 34px; height: 34px; border-radius: 50%; background: #185fa5; color: #fff;
  font-size: 14px; cursor: pointer; flex: none; font-family: inherit;
}
.dd-audio button.playing { background: #0F6E56; }
.dd-audio .dd-a-t { font-size: 12px; color: #3b5a80; line-height: 1.4; }
.dd-audio .dd-a-t b { display: block; font-size: 13px; color: #185fa5; font-weight: 600; }

/* 步骤 */
.dd-step { min-height: 120px; }
.dd-step-t { font-size: 14px; font-weight: 600; color: #185fa5; margin-bottom: 4px; }
.dd-step-t .dd-k {
  display: inline-block; width: 19px; height: 19px; line-height: 19px; text-align: center;
  background: #185fa5; color: #fff; border-radius: 50%; font-size: 11px; margin-right: 6px;
}
.dd-step-d { font-size: 13px; color: #4a5164; margin-bottom: 12px; line-height: 1.7; }
.dd-step-d em { font-style: normal; color: #A32D2D; font-weight: 600; }

/* 图形区 */
.dd-fig {
  background: #fafbfe; border: 1px solid #e8eaf0; border-radius: 12px;
  padding: 10px 6px; margin-bottom: 12px; overflow: hidden;
}
.dd-fig svg { display: block; width: 100%; height: auto; }
.dd-fig-cap { font-size: 11px; color: #8a8f9c; text-align: center; margin-top: 4px; }

/* 滑块 */
.dd-slider { margin: 4px 0 12px; }
.dd-slider .dd-sl-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dd-slider .dd-sl-label { font-size: 13px; color: #4a5164; white-space: nowrap; }
.dd-slider .dd-sl-val {
  font-size: 15px; font-weight: 600; color: #185fa5; min-width: 44px; text-align: right;
}
.dd-slider input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent;
  margin: 0; cursor: pointer;
}
.dd-slider input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: #dbe3f0;
}
.dd-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px;
  border-radius: 50%; background: #185fa5; border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(24,95,165,.35);
}
.dd-play {
  border: 1px solid #d6e4f6; background: #eef4fc; color: #185fa5;
  border-radius: 999px; padding: 6px 14px; font-size: 12px; cursor: pointer;
  font-family: inherit; font-weight: 500;
}
.dd-play:active { background: #dfeaf9; }

/* 拖拽填空 */
.dd-drag-q {
  font-size: 15px; line-height: 2.1; margin-bottom: 14px; color: #22242a;
}
.dd-blank {
  display: inline-block; min-width: 92px; padding: 2px 10px; margin: 0 3px;
  border-bottom: 2px solid #185fa5; background: #f2f6fc; border-radius: 5px 5px 0 0;
  text-align: center; font-size: 14px; color: #185fa5; cursor: pointer;
  vertical-align: baseline; transition: background .15s;
}
.dd-blank.empty { color: #b6bccb; border-bottom-style: dashed; }
.dd-blank.over { background: #e2edfb; }
.dd-blank.ok { border-bottom-color: #0F6E56; background: #e9f7ef; color: #0F6E56; }
.dd-blank.bad { border-bottom-color: #A32D2D; background: #fdeeee; color: #A32D2D; }
.dd-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dd-token {
  padding: 8px 13px; border: 1.5px solid #d5dbe8; background: #fff; border-radius: 9px;
  font-size: 14px; color: #22242a; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform .12s, border-color .12s;
}
.dd-token:active { transform: scale(.96); }
.dd-token.sel { border-color: #185fa5; background: #eaf2fd; color: #185fa5; font-weight: 600; }
.dd-token.used { opacity: .3; pointer-events: none; }

/* 分步推导 */
.dd-line {
  border-left: 3px solid #cfdcf0; padding: 2px 0 2px 12px; margin-bottom: 12px;
  animation: ddIn .26s ease;
}
.dd-line:last-child { margin-bottom: 0; }
.dd-line b { display: block; font-size: 13px; color: #185fa5; margin-bottom: 2px; }
.dd-line span { font-size: 13px; color: #4a5164; line-height: 1.7; }
.dd-line.hl { border-left-color: #185fa5; background: #f6f9fe; border-radius: 0 8px 8px 0; padding: 8px 10px 8px 12px; }
@keyframes ddIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.dd-more {
  border: 1px dashed #c3d3e9; background: #fff; color: #185fa5; width: 100%;
  padding: 9px; border-radius: 10px; font-size: 13px; cursor: pointer; font-family: inherit; margin-top: 4px;
}

/* 验证题 */
.dd-check-t { font-size: 14px; font-weight: 600; color: #854F0B; margin-bottom: 6px; }
.dd-check-q { font-size: 15px; line-height: 1.7; margin-bottom: 12px; color: #22242a; }
.dd-opt {
  display: block; width: 100%; text-align: left; border: 1.5px solid #dfe3ec; background: #fafbfe;
  border-radius: 11px; padding: 11px 13px; font-size: 14px; color: #22242a; cursor: pointer;
  margin-bottom: 8px; font-family: inherit; line-height: 1.5;
}
.dd-opt:active { background: #f2f5fb; }
.dd-opt.ok { border-color: #0F6E56; background: #e9f7ef; color: #0F6E56; font-weight: 600; }
.dd-opt.bad { border-color: #A32D2D; background: #fdeeee; color: #A32D2D; }
.dd-opt[disabled] { cursor: default; }

/* 底部按钮区 */
.dd-foot { display: flex; gap: 8px; margin-top: 16px; }
.dd-btn {
  flex: 1; border: none; border-radius: 11px; padding: 12px; font-size: 14px;
  font-family: inherit; cursor: pointer; font-weight: 500;
}
.dd-btn-main { background: #185fa5; color: #fff; }
.dd-btn-main:disabled { background: #c6d2e2; }
.dd-btn-ghost { background: #eef0f6; color: #5a6070; flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }

/* 结果提示 */
.dd-result { border-radius: 12px; padding: 13px 14px; margin-top: 12px; font-size: 13px; line-height: 1.7; }
.dd-result.good { background: #e9f7ef; border: 1px solid #c8ead9; color: #0F6E56; }
.dd-result.warn { background: #fdf3e8; border: 1px solid #f2ddc2; color: #854F0B; }
.dd-result b { font-weight: 600; }
.dd-hint { font-size: 12px; color: #8a8f9c; margin-top: 8px; line-height: 1.6; }

/* ===== 反馈区（👍/👎 + 原因 + 语音，2026-10-20 张先生要求） ===== */
.dd-fb-jump {
  border: 1px solid #d6e4f6; background: #eef4fc; color: #185fa5;
  border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer;
  font-family: inherit; flex: none; margin-right: 6px;
}
.dd-fb { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #e2e7f0; transition: background .3s; }
.dd-fb.flash { background: #fff8f1; border-radius: 10px; }
.dd-fb-q { font-size: 13.5px; font-weight: 600; color: #3a4050; margin-bottom: 9px; }
.dd-fb-q .dd-fb-sub { display: block; font-size: 11px; font-weight: 400; color: #8a8f9c; margin-top: 2px; }
.dd-fb-row, .dd-fb-row2 { display: flex; gap: 9px; }
.dd-fb-btn {
  flex: 1; border: 1.5px solid #dfe3ec; background: #fafbfe; border-radius: 11px;
  padding: 11px 8px; font-size: 14px; cursor: pointer; font-family: inherit; color: #22242a;
}
.dd-fb-btn.good { border-color: #c8ead9; background: #f1faf5; color: #0F6E56; }
.dd-fb-btn.bad { border-color: #f3caca; background: #fdf3f3; color: #A32D2D; }
.dd-fb-btn:active { transform: scale(.985); }
.dd-fb-done { font-size: 13px; color: #0F6E56; font-weight: 600; margin-bottom: 8px; }
.dd-fb-tag { font-size: 10.5px; font-weight: 400; color: #8a8f9c; margin-left: 8px; }
.dd-fb-more-btn {
  border: 1px dashed #c3d3e9; background: #fff; color: #185fa5; width: 100%;
  padding: 9px; border-radius: 10px; font-size: 12.5px; cursor: pointer;
  font-family: inherit; margin-bottom: 8px;
}
.dd-fb-more-btn.ghost { border-color: #e6e8ee; color: #8a8f9c; }
.dd-fb-panel { animation: ddIn .22s ease; }
.dd-fb-lbl { font-size: 12px; color: #5a6070; margin: 10px 0 7px; }
.dd-fb-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.dd-chip {
  border: 1.5px solid #dfe3ec; background: #fff; border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; color: #4a5164; cursor: pointer; font-family: inherit;
}
.dd-chip.on { border-color: #A32D2D; background: #fdeeee; color: #A32D2D; font-weight: 600; }
.dd-fb-text {
  width: 100%; border: 1px solid #dfe3ec; border-radius: 10px; padding: 9px 11px;
  font-size: 13px; font-family: inherit; color: #22242a; background: #fafbfe; resize: vertical;
  line-height: 1.6;
}
.dd-fb-text:focus { outline: none; border-color: #9fc0e8; background: #fff; }
.dd-fb-rec { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.dd-rec-btn {
  border: 1.5px solid #d6e4f6; background: #eef4fc; color: #185fa5;
  border-radius: 999px; padding: 9px 16px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.dd-rec-btn:active { background: #dfeaf9; }
.dd-rec-ok { font-size: 11.5px; color: #0F6E56; }
.dd-rec-err { font-size: 11.5px; color: #A32D2D; }
.dd-rec-audio { width: 100%; height: 34px; margin-bottom: 8px; }