/* production-sync: 20260911-practice-panel-readability2
   Shared fail-safe readability treatment for English conversation and repeating practice.
   Canonical component styles carry the same values; these rules keep late theme styles from
   restoring the older highly transparent panels. */
:root {
  --oa20-practice-topbar-bg: rgba(9, 25, 58, .68);
  --oa20-practice-panel-bg: rgba(9, 25, 58, .76);
  --oa20-practice-card-bg: rgba(4, 15, 38, .90);
  --oa20-practice-user-card-bg: rgba(50, 38, 34, .90);
  --oa20-practice-panel-shadow: 0 18px 50px rgba(3, 8, 22, .32), inset 0 1px rgba(245, 240, 229, .08);
}
#oa20Stage[data-oa20-conversation] .oa20-ce-world-topbar,
.oa20-conversation-replay-topbar,
.rp-topbar {
  background: var(--oa20-practice-topbar-bg) !important;
  -webkit-backdrop-filter: blur(6px) saturate(105%) !important;
  backdrop-filter: blur(6px) saturate(105%) !important;
}
#oa20CharacterEnglishApp .oa20-ce-chat-history,
#oa20CharacterEnglishApp .oa20-ce-side,
.oa20-conversation-replay-setup,
.oa20-conversation-replay-player,
.oa20-conversation-replay-finished,
.rp-setup,
.rp-player,
.rp-finished {
  background: var(--oa20-practice-panel-bg) !important;
  box-shadow: var(--oa20-practice-panel-shadow) !important;
  -webkit-backdrop-filter: blur(6px) saturate(105%) !important;
  backdrop-filter: blur(6px) saturate(105%) !important;
}
#oa20CharacterEnglishApp .oa20-ce-bubble,
#oa20CharacterEnglishApp .oa20-ce-opt,
.oa20-conversation-replay-practice-card,
.rp-practice-card {
  background: var(--oa20-practice-card-bg) !important;
  -webkit-backdrop-filter: blur(4px) saturate(103%) !important;
  backdrop-filter: blur(4px) saturate(103%) !important;
}
#oa20CharacterEnglishApp .oa20-ce-user {
  background: var(--oa20-practice-user-card-bg) !important;
}
@media (max-width: 680px) {
  :root {
    --oa20-practice-topbar-bg: rgba(9, 25, 58, .72);
    --oa20-practice-panel-bg: rgba(9, 25, 58, .80);
    --oa20-practice-card-bg: rgba(4, 15, 38, .92);
    --oa20-practice-user-card-bg: rgba(50, 38, 34, .92);
  }
}