/* ============================================================================
 * practice-v4.css —— 重写练习模块的样式
 *   复用既有设计令牌（--sp-* / --rd-* / --fs-* / --grad-full / --tx-*）
 *   重点：题干与选项不重叠；播放按钮不缩放（不会压住文字）
 * ==========================================================================*/

:root:root body #p4-root {
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom));
}

/* ---------- 顶部 ---------- */
:root:root body .p4-head { display: flex; align-items: baseline; justify-content: space-between; margin: var(--sp-2) 0 var(--sp-3); }
:root:root body .p4-title { font-size: var(--fs-h1); color: var(--tx-1); }
:root:root body .p4-sub { font-size: var(--fs-sm); color: var(--tx-2); }

/* ---------- 题型选择 ---------- */
:root:root body .p4-modes { display: flex; flex-direction: column; gap: var(--sp-2); }
:root:root body .p4-mode {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%; padding: var(--sp-4) !important; text-align: left;
  border-radius: var(--rd-lg) !important; border: 1px solid rgba(107,87,64,.12) !important;
  background: linear-gradient(180deg, #ffffff, #fdf9fc) !important;
  box-shadow: var(--sh-1) !important; min-height: 64px;
}
:root:root body .p4-mode b { font-size: var(--fs-title); color: var(--tx-1); }
:root:root body .p4-mode span { font-size: var(--fs-sm); color: var(--tx-2); }
:root:root body .p4-tip { margin-top: var(--sp-4); font-size: var(--fs-sm); color: #b3a89b; line-height: 1.6; }

/* ---------- 答题顶栏与进度 ---------- */
:root:root body .p4-bar { display: flex; align-items: center; justify-content: space-between; margin: var(--sp-2) 0 var(--sp-2); }
:root:root body .p4-back {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: #a9739a !important; font-size: var(--fs-btn) !important; min-height: 32px !important; padding: 0 6px !important;
}
:root:root body .p4-count { font-size: var(--fs-body); color: var(--tx-1); }
:root:root body .p4-score { font-size: var(--fs-sm); color: var(--tx-2); }
:root:root body .p4-prog { height: 5px; border-radius: 999px; background: rgba(107,87,64,.12); overflow: hidden; margin-bottom: var(--sp-4); }
:root:root body .p4-prog i { display: block; height: 100%; border-radius: 999px; background-image: var(--grad-full); transition: width var(--t-slow) ease; }

/* ---------- 题干 ---------- */
:root:root body .p4-q {
  padding: var(--sp-4) 0 var(--sp-3); text-align: center;
  font-size: 19px; color: var(--tx-1); line-height: 1.7; word-break: break-word;
}
:root:root body .p4-q .p4-ico { font-size: 34px; }
:root:root body .p4-sub2 { font-size: var(--fs-sm); color: var(--tx-2); margin-top: 6px; }

/* ---------- 播放按钮：只做光晕，不缩放（不会压住下方文字） ---------- */
:root:root body .p4-play {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  margin: var(--sp-1) auto var(--sp-4) !important; padding: 0 22px !important;
  min-height: 48px !important; border-radius: 999px !important; border: 0 !important;
  color: #fff !important; font-size: var(--fs-btn) !important;
  background-image: var(--grad-full) !important;
  box-shadow: 0 3px 0 rgba(126,92,140,.32), 0 8px 20px rgba(150,130,190,.26) !important;
}
:root:root body .p4-play.p4-glow { animation: p4Glow 1s ease-in-out infinite !important; }
@keyframes p4Glow {
  0%,100% { box-shadow: 0 3px 0 rgba(126,92,140,.32), 0 8px 20px rgba(150,130,190,.26); }
  50%     { box-shadow: 0 3px 0 rgba(126,92,140,.32), 0 12px 30px rgba(160,130,210,.46); }
}
:root:root body .p4-q-audio { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }

/* ---------- 选项 ---------- */
:root:root body .p4-opts { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
:root:root body .p4-opts-2 { flex-direction: row; }
:root:root body .p4-opts-2 .p4-opt { flex: 1; }
:root:root body .p4-opt {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important;
  width: 100%; min-height: 58px; padding: var(--sp-3) var(--sp-4) !important;
  text-align: left; border-radius: var(--rd-md) !important;
  border: 1px solid rgba(107,87,64,.13) !important;
  background: linear-gradient(180deg, #ffffff, #fdfaf8) !important;
  box-shadow: 0 2px 0 rgba(107,87,64,.10) !important;
  font-size: var(--fs-btn) !important; color: var(--tx-1) !important;
}
:root:root body .p4-opt .p4-opt-sub { font-size: var(--fs-sm); color: var(--tx-2); margin-top: 2px; }
:root:root body .p4-opt.ok { background-image: linear-gradient(100deg, #bfe8c8, #d6f0dd) !important; border-color: rgba(90,160,110,.30) !important; }
:root:root body .p4-opt.bad { background-image: linear-gradient(100deg, #f6d6dc, #fbe4e8) !important; border-color: rgba(190,110,120,.30) !important; }
:root:root body .p4-opt[disabled] { opacity: .96; }

/* ---------- 输入型 ---------- */
:root:root body .p4-input {
  width: 100%; min-height: 54px; padding: 0 var(--sp-4);
  font-size: 17px; color: var(--tx-1);
  border-radius: var(--rd-md); border: 1px solid rgba(107,87,64,.18);
  background: #fffdfa;
}
:root:root body .p4-input:focus { outline: 2px solid #8f8ce0; outline-offset: 1px; }
:root:root body .p4-submit {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100%; min-height: 50px; margin-top: var(--sp-3);
  border: 0 !important; border-radius: 999px !important; color: #fff !important;
  background-image: var(--grad-full) !important; font-size: var(--fs-btn) !important;
  box-shadow: 0 3px 0 rgba(126,92,140,.32) !important;
}
:root:root body .p4-submit.ok { background-image: linear-gradient(100deg, #9ed7ae, #c8ebd4) !important; }
:root:root body .p4-submit.bad { background-image: linear-gradient(100deg, #e8aeb8, #f3c9d1) !important; }

/* ---------- 结算 ---------- */
:root:root body .p4-result { text-align: center; padding: var(--sp-6) var(--sp-4); }
:root:root body .p4-rscore { font-size: 46px; color: var(--tx-1); line-height: 1.2; }
:root:root body .p4-rpct { font-size: var(--fs-body); color: var(--tx-2); margin: var(--sp-2) 0 var(--sp-5); }
:root:root body .p4-again, :root:root body .p4-menu {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100%; min-height: 50px; margin-bottom: var(--sp-2);
  border-radius: 999px !important; font-size: var(--fs-btn) !important;
}
:root:root body .p4-again { border: 0 !important; color: #fff !important; background-image: var(--grad-full) !important; box-shadow: 0 3px 0 rgba(126,92,140,.32) !important; }
:root:root body .p4-menu { border: 1px solid rgba(107,87,64,.15) !important; background: #fffdfa !important; color: var(--tx-1) !important; }

/* 暗色 */
html[data-theme="dark"] #p4-root .p4-mode,
html[data-theme="dark"] #p4-root .p4-opt { background-image: none !important; background-color: rgba(255,255,255,.06) !important; color: #ece7e2 !important; }
html[data-theme="dark"] #p4-root .p4-q,
html[data-theme="dark"] #p4-root .p4-title,
html[data-theme="dark"] #p4-root .p4-count { color: #ece7e2 !important; }
html[data-theme="dark"] #p4-root .p4-input { background: rgba(255,255,255,.06); color: #ece7e2; }

/* 按级别组卷 */
:root:root body .p4-levels { margin: 12px 0 10px; }
:root:root body .p4-lk { font-size: 11.5px; letter-spacing: .04em; color: #a9739a; margin-bottom: 8px; }
:root:root body .p4-lrow { display: flex !important; gap: 8px; }
:root:root body .p4-lv {
  flex: 1; display: flex !important; flex-direction: column; align-items: center; justify-content: center !important;
  gap: 2px; min-height: 58px; border-radius: 14px; font-size: 15px; color: #5b5048;
  border: 1px solid rgba(107,87,64,.14); background: #fffdfa;
}
:root:root body .p4-lv span { font-size: 10.5px; color: #a49a8c; }

/* --- v4.1 排版调优：向主流学习 app 靠齐（一次一题 / 大字 / 等距选项 / 清晰层级） --- */
:root:root body .p4-bar {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 8px; margin-bottom: 6px;
}
:root:root body .p4-count { font-size: 12px; color: var(--tx-2); letter-spacing: .02em; }
:root:root body .p4-score { font-size: 12px; color: #8f8ce0; }
:root:root body .p4-back {
  font-size: 12.5px; color: #8a8073 !important; background: transparent !important; border: 0 !important;
  min-height: 30px !important; padding: 0 2px !important;
}
:root:root body .p4-prog { height: 4px; border-radius: 999px; background: rgba(107,87,64,.08); overflow: hidden; margin-bottom: 16px; }
:root:root body .p4-prog i { display: block; height: 100%; border-radius: 999px;
  background-image: linear-gradient(90deg, #d98ab8, #8f8ce0); transition: width .3s ease; }

:root:root body .p4-q {
  font-size: 20px !important; line-height: 1.5 !important; color: var(--tx-1) !important;
  text-align: center !important; margin: 10px 0 6px !important;
}
:root:root body .p4-q .p4-ico { font-size: 40px; }
:root:root body .p4-sub2 { font-size: 12px !important; color: var(--tx-2) !important; text-align: center; margin-top: 6px; }
:root:root body .p4-passage {
  font-size: 15px; line-height: 1.85; color: var(--tx-1);
  padding: 14px 16px; border-radius: 14px; background: #fffdfa;
  border: 1px solid rgba(107,87,64,.10); margin: 8px 0 10px;
}
:root:root body .p4-opts { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-top: 16px; }
:root:root body .p4-opt {
  min-height: 54px !important; padding: 14px 16px !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  text-align: left !important; font-size: 15px !important; line-height: 1.45;
  border-radius: 14px !important; border: 1px solid rgba(107,87,64,.14) !important;
  background: #fffdfa !important; color: var(--tx-1) !important;
  box-shadow: 0 1px 2px rgba(78,60,48,.04);
}
:root:root body .p4-opt-sub { font-size: 11.5px; color: var(--tx-2); margin-left: 6px; }
:root:root body .p4-opt.ok { border-color: rgba(90,180,140,.55) !important; background: rgba(226,247,238,.75) !important; }
:root:root body .p4-opt.bad { border-color: rgba(226,120,120,.55) !important; background: rgba(253,236,236,.75) !important; }
:root:root body .p4-opts-2 { flex-direction: row !important; }
:root:root body .p4-opts-2 .p4-opt { flex: 1; justify-content: center !important; text-align: center !important; min-height: 58px !important; }
:root:root body .p4-play {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 6px; width: fit-content; margin: 4px auto 0; min-height: 40px; padding: 0 18px !important;
  border-radius: 999px !important; border: 1px solid rgba(143,140,224,.30) !important;
  background: rgba(143,140,224,.08) !important; color: #6f6cc0 !important; font-size: 13px;
}
:root:root body .p4-shown {
  font-size: 19px !important; text-align: center; color: var(--tx-1);
  margin: 14px 0 4px; padding: 16px; border-radius: 14px; background: #fffdfa;
  border: 1px dashed rgba(107,87,64,.16);
}
:root:root body .p4-built {
  min-height: 56px; display: flex !important; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 10px; border-radius: 14px; background: #fffdfa; border: 1px dashed rgba(107,87,64,.16);
}
:root:root body .p4-pool { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
:root:root body .p4-chunk {
  min-height: 42px; padding: 0 14px !important; border-radius: 999px !important;
  border: 1px solid rgba(107,87,64,.16) !important; background: #fffdfa !important;
  color: var(--tx-1) !important; font-size: 14px;
}
:root:root body .p4-submit {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100%; min-height: 52px; margin-top: 8px; border: 0 !important; border-radius: 999px !important;
  color: #fff !important; font-size: 15px;
  background-image: linear-gradient(100deg, #d98ab8 0%, #8f8ce0 52%, #62c0dd 100%);
  box-shadow: 0 3px 0 rgba(126,92,140,.30) !important;
}
:root:root body .p4-result { text-align: center; padding: 18px 8px; }

/* --- v4.2 多邻国风：级别按钮配色 + 分组卡片（与课程页 study-v2 统一） --- */
:root:root body .p4-levels { margin: 14px 0 12px; }
:root:root body .p4-lk { font-size: 13px; color: #3f3730; margin-bottom: 10px; }
:root:root body .p4-lrow { gap: 10px !important; }
:root:root body .p4-lv {
  min-height: 74px !important; border-radius: 18px !important; border: 0 !important;
  color: #fff !important; font-size: 17px !important;
  box-shadow: 0 5px 0 rgba(0,0,0,.16), 0 8px 18px rgba(0,0,0,.08);
}
:root:root body .p4-lv[data-lv="N5"] { background-image: linear-gradient(135deg, #58cc8f, #3fa96f) !important; box-shadow: 0 5px 0 #2c8a56, 0 8px 18px rgba(58,160,110,.22); }
:root:root body .p4-lv[data-lv="N4"] { background-image: linear-gradient(135deg, #ffc53d, #f0a428) !important; box-shadow: 0 5px 0 #cf8815, 0 8px 18px rgba(240,164,40,.22); }
:root:root body .p4-lv[data-lv="N3"] { background-image: linear-gradient(135deg, #a78bfa, #7c6ce0) !important; box-shadow: 0 5px 0 #5d4ec4, 0 8px 18px rgba(124,108,224,.22); }
:root:root body .p4-lv span { color: rgba(255,255,255,.9) !important; }

/* 分组卡片 */
:root:root body .p4-groups { display: flex !important; flex-direction: column !important; gap: 14px !important; margin-top: 6px; }
:root:root body .p4-group {
  background: #fffdfa; border: 1px solid rgba(107,87,64,.10); border-radius: 20px; padding: 16px 14px;
  box-shadow: 0 2px 0 rgba(107,87,64,.07);
}
:root:root body .p4-gtitle { font-size: 16px !important; color: #3f3730; display: flex; align-items: baseline; gap: 8px; }
:root:root body .p4-gen { font-size: 11px; color: #a49a8c; letter-spacing: .03em; text-transform: uppercase; }
:root:root body .p4-gdesc { font-size: 12px; color: #a49a8c; margin: 4px 0 12px; }
:root:root body .p4-gitems { display: flex !important; flex-direction: column !important; gap: 8px !important; }
:root:root body .p4-mode {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  width: 100%; min-height: 58px !important; padding: 10px 14px !important;
  border-radius: 14px !important; border: 1px solid rgba(107,87,64,.12) !important;
  background: #fff !important; text-align: left !important;
}
:root:root body .p4-mode b { font-size: 15px !important; color: #3f3730 !important; }
:root:root body .p4-mode span { display: block; font-size: 11.5px; color: #a49a8c; margin-top: 2px; max-width: 260px; }
:root:root body .p4-tip { font-size: 12px !important; color: #a49a8c !important; text-align: center; margin-top: 14px; line-height: 1.6; }
:root:root body .p4-head { margin-bottom: 4px; }
:root:root body .p4-title { font-size: 22px !important; color: #3f3730 !important; }
:root:root body .p4-sub { font-size: 12.5px; color: #a49a8c; margin-left: 8px; }