/* ============================================================
 * study-v2-override.css —— 高优先级覆写（app 全局样式会吃掉普通选择器）
 * 所有关键视觉属性都用 :root:root body + !important，与 practice-v4 同级
 * ============================================================ */

/* ---------- 级别卡：渐变色块（修复被覆盖成白块） ---------- */
:root:root body #study-root .sv-level {
  background: transparent !important; border: 0 !important; padding: 0 !important;
  box-shadow: none !important; display: block !important; width: 100% !important;
  min-height: 0 !important; margin: 0 0 14px !important; text-align: left !important;
}
:root:root body #study-root .sv-level-card {
  display: block !important; border-radius: 22px !important; padding: 18px 20px 20px !important;
  color: #fff !important; position: relative !important; overflow: hidden !important;
  background-image: none !important;
}
:root:root body #study-root .sv-level-card.sv-lv-N5 {
  background-image: linear-gradient(135deg, #58cc8f 0%, #3fa96f 100%) !important;
  background-color: #3fa96f !important;
  box-shadow: 0 5px 0 #2c8a56, 0 10px 24px rgba(58,160,110,.22) !important;
}
:root:root body #study-root .sv-level-card.sv-lv-N4 {
  background-image: linear-gradient(135deg, #ffc53d 0%, #f0a428 100%) !important;
  background-color: #f0a428 !important;
  box-shadow: 0 5px 0 #cf8815, 0 10px 24px rgba(240,164,40,.22) !important;
}
:root:root body #study-root .sv-level-card.sv-lv-N3 {
  background-image: linear-gradient(135deg, #a78bfa 0%, #7c6ce0 100%) !important;
  background-color: #7c6ce0 !important;
  box-shadow: 0 5px 0 #5d4ec4, 0 10px 24px rgba(124,108,224,.24) !important;
}
:root:root body #study-root .sv-lv-badge {
  display: inline-block !important; background: rgba(255,255,255,.30) !important;
  color: #fff !important; border-radius: 999px !important; padding: 3px 12px !important;
  font-size: 12.5px !important; ; letter-spacing: .04em !important;
  width: auto !important; height: auto !important; margin: 0 !important;
}
:root:root body #study-root .sv-lv-name {
  display: block !important; font-size: 21px !important; ;
  color: #fff !important; margin: 10px 0 0 !important; line-height: 1.3 !important;
}
:root:root body #study-root .sv-lv-sub {
  display: block !important; font-size: 12.5px !important; color: rgba(255,255,255,.94) !important;
  margin: 4px 0 0 !important; line-height: 1.5 !important;
}
:root:root body #study-root .sv-lv-meta {
  display: block !important; font-size: 11.5px !important; color: rgba(255,255,255,.88) !important;
  margin: 12px 0 0 !important;
}
:root:root body #study-root .sv-lv-bar {
  display: block !important; height: 9px !important; border-radius: 999px !important;
  background: rgba(0,0,0,.18) !important; margin: 8px 0 0 !important; overflow: hidden !important;
  width: 100% !important;
}
:root:root body #study-root .sv-lv-bar i {
  display: block !important; height: 100% !important; border-radius: 999px !important;
  background: #fff !important; min-width: 6px !important;
}

/* ---------- 顶部三统计 ---------- */
:root:root body #study-root .sv-stats { display: flex !important; gap: 8px !important; margin: 0 0 16px !important; }
:root:root body #study-root .sv-stat {
  flex: 1 !important; display: block !important; background: #fff !important;
  border-radius: 16px !important; padding: 12px 8px !important; text-align: center !important;
  border: 1px solid rgba(107,87,64,.08) !important; box-shadow: 0 2px 8px rgba(78,60,48,.05) !important;
  min-height: 0 !important;
}
:root:root body #study-root .sv-stat b { display: block !important; font-size: 18px !important; ; color: #6f6cc0 !important; }
:root:root body #study-root .sv-stat span { display: block !important; font-size: 11px !important; color: #a49a8c !important; margin-top: 2px !important; }

/* ---------- hero ---------- */
:root:root body #study-root .sv-hero { margin: 4px 2px 14px !important; }
:root:root body #study-root .sv-hero h2 { font-size: 21px !important; ; color: #3f3730 !important; margin: 0 !important; line-height: 1.3 !important; }
:root:root body #study-root .sv-hero p { font-size: 12.5px !important; color: #8a8073 !important; margin: 5px 0 0 !important; line-height: 1.5 !important; }

/* ---------- 级别内单元 ---------- */
:root:root body #study-root .sv-section-title { font-size: 15.5px !important; ; color: #3f3730 !important; margin: 16px 2px 9px !important; }
:root:root body #study-root .sv-unit {
  display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important;
  text-align: left !important; min-height: 72px !important; border-radius: 18px !important;
  border: 1px solid rgba(107,87,64,.10) !important; background: #fff !important;
  padding: 12px 14px !important; margin: 0 0 10px !important;
  box-shadow: 0 2px 0 rgba(107,87,64,.08) !important; color: #3f3730 !important;
}
:root:root body #study-root .sv-unit-ico {
  width: 44px !important; height: 44px !important; border-radius: 13px !important; flex: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 19px !important; color: #fff !important; ;
}
:root:root body #study-root .sv-ico-word { background-image: linear-gradient(135deg, #58cc8f, #3fa96f) !important; background-color: #3fa96f !important; }
:root:root body #study-root .sv-ico-gram { background-image: linear-gradient(135deg, #a78bfa, #7c6ce0) !important; background-color: #7c6ce0 !important; }
:root:root body #study-root .sv-unit-main { flex: 1 !important; min-width: 0 !important; }
:root:root body #study-root .sv-unit-name { display: block !important; font-size: 15px !important; ; color: #3f3730 !important; }
:root:root body #study-root .sv-unit-desc { display: block !important; font-size: 11.5px !important; color: #a49a8c !important; margin-top: 3px !important; line-height: 1.45 !important; }
:root:root body #study-root .sv-unit-arrow { color: #c9c0b4 !important; font-size: 18px !important; flex: none !important; }

/* ---------- 学习卡片 ---------- */
:root:root body #study-root .sv-prog { height: 11px !important; border-radius: 999px !important; background: #e8e3da !important; overflow: hidden !important; margin-bottom: 14px !important; }
:root:root body #study-root .sv-prog i { display: block !important; height: 100% !important; border-radius: 999px !important; background-image: linear-gradient(90deg, #58cc8f, #3fa96f) !important; background-color: #3fa96f !important; }
:root:root body #study-root .sv-card {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  background: #fff !important; border-radius: 24px !important; padding: 26px 20px !important; text-align: center !important;
  border: 1px solid rgba(107,87,64,.08) !important;
  box-shadow: 0 2px 0 rgba(107,87,64,.10), 0 8px 20px rgba(78,60,48,.06) !important;
  min-height: 280px !important; height: auto !important;
}
:root:root body #study-root .sv-card .sv-word { font-size: 30px !important; ; color: #3f3730 !important; line-height: 1.3 !important; }
:root:root body #study-root .sv-card .sv-kana { font-size: 16px !important; color: #8a8073 !important; margin-top: 7px !important; }
:root:root body #study-root .sv-card .sv-zh { font-size: 17px !important; color: #5b5048 !important; margin-top: 14px !important; ; }
:root:root body #study-root .sv-card .sv-en { font-size: 12.5px !important; color: #a49a8c !important; margin-top: 5px !important; }
:root:root body #study-root .sv-card .sv-pos {
  display: inline-block !important; font-size: 11px !important; color: #3fa96f !important;
  background: rgba(88,204,143,.16) !important; border-radius: 999px !important; padding: 3px 12px !important; margin-bottom: 12px !important;
}
:root:root body #study-root .sv-card .sv-ex {
  margin-top: 18px !important; padding: 12px 14px !important; border-radius: 14px !important;
  background: #faf7f2 !important; font-size: 14px !important; color: #5b5048 !important;
  line-height: 1.7 !important; text-align: center !important; width: 100% !important;
}
:root:root body #study-root .sv-audio {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  min-height: 46px !important; padding: 0 20px !important; margin: 16px auto 0 !important;
  border-radius: 999px !important; border: 2px solid #58cc8f !important; background: #fff !important;
  color: #3fa96f !important; font-size: 14.5px !important; ; width: fit-content !important;
}

/* ---------- 导航按钮 ---------- */
:root:root body #study-root .sv-nav { display: flex !important; gap: 10px !important; margin-top: 14px !important; }
:root:root body #study-root .sv-nav button {
  flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 54px !important; border-radius: 16px !important; font-size: 15px !important; ;
}
:root:root body #study-root .sv-btn-ghost { border: 2px solid rgba(107,87,64,.16) !important; background: #fff !important; color: #8a8073 !important; }
:root:root body #study-root .sv-btn-main {
  border: 0 !important; color: #fff !important; background-color: #58cc8f !important;
  background-image: linear-gradient(135deg, #58cc8f, #3fa96f) !important;
  box-shadow: 0 4px 0 #3fa96f !important;
}

/* ---------- 语法卡 ---------- */
:root:root body #study-root .sv-gram-title { font-size: 20px !important; ; color: #6f6cc0 !important; line-height: 1.4 !important; }
:root:root body #study-root .sv-gram-usage { font-size: 13px !important; color: #5b5048 !important; margin-top: 6px !important; line-height: 1.6 !important; }
:root:root body #study-root .sv-gram-form {
  display: inline-block !important; margin-top: 12px !important; font-size: 12.5px !important; color: #fff !important;
  background-color: #a78bfa !important; background-image: linear-gradient(135deg, #a78bfa, #7c6ce0) !important;
  border-radius: 999px !important; padding: 5px 16px !important;
}
:root:root body #study-root .sv-gram-explain { margin-top: 16px !important; font-size: 13.5px !important; color: #5b5048 !important; line-height: 1.75 !important; text-align: left !important; width: 100% !important; }
:root:root body #study-root .sv-gram-explain-en {
  font-size: 12.5px !important; color: #8a8073 !important; line-height: 1.65 !important;
  margin-top: 10px !important; text-align: left !important; width: 100% !important;
  padding-left: 10px !important; border-left: 3px solid #e4dcf8 !important;
}
:root:root body #study-root .sv-gram-examples { width: 100% !important; margin-top: 12px !important; text-align: left !important; }
:root:root body #study-root .sv-tag {
  display: inline-block !important; font-size: 11px !important; color: #7c6ce0 !important;
  background: rgba(167,139,250,.16) !important; border-radius: 999px !important; padding: 2px 10px !important;
}

/* ---------- 返回 / 完成页 ---------- */
:root:root body #study-root .sv-back {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  min-height: 38px !important; background: transparent !important; border: 0 !important;
  color: #6f6cc0 !important; font-size: 14px !important; ;
  padding: 0 4px !important; margin-bottom: 8px !important; box-shadow: none !important; width: fit-content !important;
}
:root:root body #study-root .sv-done { text-align: center !important; padding: 26px 10px !important; }
:root:root body #study-root .sv-trophy { font-size: 58px !important; }
:root:root body #study-root .sv-done h3 { font-size: 20px !important; ; color: #3f3730 !important; margin: 10px 0 6px !important; }
:root:root body #study-root .sv-done p { font-size: 13px !important; color: #8a8073 !important; margin-bottom: 16px !important; }
:root:root body #study-root .sv-empty { text-align: center !important; padding: 36px 16px !important; color: #a49a8c !important; font-size: 14px !important; }


/* 强制白字：所有级别卡的标题/副标题/进度文字 */
:root:root body #study-root .sv-level-card,
:root:root body #study-root .sv-level-card .sv-lv-name,
:root:root body #study-root .sv-level-card .sv-lv-sub,
:root:root body #study-root .sv-level-card .sv-lv-meta,
:root:root body #study-root .sv-level-card .sv-lv-badge,
:root:root body #study-root .sv-level-card span {
  color: #fff !important;
}


/* 位置计数（重度用户：随时知道学到哪） */
:root:root body #study-root .sv-count {
  font-size: 12px !important; color: #a49a8c !important; ;
  margin: -4px 0 10px !important; letter-spacing: .02em !important;
}