/* ── 练习弹窗完成庆祝动画 ── */
@keyframes practice-celebration-glow {
  0%, 100% { text-shadow: 0 0 12px rgba(251,191,36,0.3); }
  50% { text-shadow: 0 0 28px rgba(251,191,36,0.6), 0 0 56px rgba(251,191,36,0.15); }
}
.practice-celebration-title {
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #fcd34d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: practice-celebration-glow 2.5s ease-in-out infinite;
}
.practice-celebration-subtitle {
  color: #fde68a;
}
#practice-confetti-container .confetti-piece {
  position: absolute;
  width: 8px;
  height: 12px;
  top: -20px;
  opacity: 0;
  animation: practice-confetti-fall linear forwards;
}
@keyframes practice-confetti-fall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  25%  { opacity: 1; }
  100% { transform: translateY(var(--fall-distance, 600px)) rotate(var(--rotation, 720deg)) scale(0.4); opacity: 0; }
}

/* ── 完成整本书庆祝彩纸动画 ── */
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  25%  { opacity: 1; }
  100% { transform: translateY(var(--fall-distance, 600px)) rotate(var(--rotation, 720deg)) scale(0.4); opacity: 0; }
}

/* ── 进度条（使用 CSS 自定义属性替代内联 width） ── */
.progress-bar-fill {
  width: var(--progress, 0%);
}

/* ── 练习模式弹窗：与沉浸式练习页一致的清爽深色主题 ── */
#practice-mode-modal {
  --pm-bg: #0c1117;
  --pm-surface: rgba(255, 255, 255, 0.035);
  --pm-surface-2: rgba(255, 255, 255, 0.055);
  --pm-border: rgba(255, 255, 255, 0.08);
  --pm-border-hover: rgba(56, 189, 248, 0.38);
  --pm-text: #eef2f6;
  --pm-text-muted: #94a3b8;
  --pm-text-dim: #64748b;
  --pm-accent: #38bdf8;
  --pm-accent-soft: rgba(56, 189, 248, 0.12);
  --pm-accent-border: rgba(56, 189, 248, 0.32);
  --pm-teal: #2dd4bf;
}
.practice-mode-modal-panel {
  border: 1px solid var(--pm-border);
  background: var(--pm-bg);
  color: var(--pm-text);
  box-shadow: 0 28px 80px -40px rgba(0, 0, 0, 0.65);
}
.practice-mode-modal-sidebar {
  border-color: var(--pm-border);
  background: rgba(255, 255, 255, 0.02);
}
.practice-mode-modal-kicker {
  color: #7dd3fc;
}
.practice-mode-modal-close {
  border: 1px solid var(--pm-border);
  color: var(--pm-text-muted);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.practice-mode-modal-close:hover {
  border-color: var(--pm-border-hover);
  color: var(--pm-text);
}
.practice-mode-option {
  border: 1px solid var(--pm-border);
  background: var(--pm-surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.practice-mode-option:hover {
  border-color: rgba(56, 189, 248, 0.22);
  background: rgba(56, 189, 248, 0.06);
}
.practice-mode-option.is-active {
  border-color: var(--pm-accent-border);
  background: var(--pm-accent-soft);
}
.practice-mode-option-icon {
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.45);
}
.practice-mode-option-desc {
  color: var(--pm-text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}
#practice-mode-modal .practice-mode-preview-card {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(56, 189, 248, 0.08), transparent 55%),
    radial-gradient(ellipse 55% 40% at 0% 100%, rgba(45, 212, 191, 0.06), transparent 52%),
    rgba(0, 0, 0, 0.22);
}
#practice-mode-modal .practice-mode-scope-chip {
  display: inline-flex;
  border-radius: 999px;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}
#practice-mode-modal .practice-mode-scope-chip.is-scope-system {
  border: 1px solid var(--pm-accent-border);
  background: var(--pm-accent-soft);
  color: #7dd3fc;
}
#practice-mode-modal .practice-mode-scope-chip.is-scope-free {
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.1);
  color: #fcd34d;
}
#practice-mode-modal .practice-mode-preview-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
@media (min-width: 640px) {
  #practice-mode-modal .practice-mode-preview-title {
    font-size: 2.25rem;
  }
}
#practice-mode-modal .practice-mode-preview-subtitle {
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
  color: #cbd5e1;
}
#practice-mode-modal .practice-scope-option {
  border: 1px solid var(--pm-border);
  background: var(--pm-surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
#practice-mode-modal .practice-scope-option:hover {
  border-color: rgba(255, 255, 255, 0.14);
}
#practice-mode-modal .practice-scope-option.is-active {
  border-width: 2px;
}
#practice-mode-modal .practice-scope-option.is-active[data-scope="system"] {
  border-color: var(--pm-accent-border);
  background: var(--pm-accent-soft);
}
#practice-mode-modal .practice-scope-option.is-active[data-scope="system"] .practice-scope-option-title {
  color: #e0f2fe;
}
#practice-mode-modal .practice-scope-option.is-active[data-scope="system"] .practice-scope-option-desc {
  color: rgba(125, 211, 252, 0.82);
}
#practice-mode-modal .practice-scope-option.is-active[data-scope="free"] {
  border-color: rgba(251, 191, 36, 0.42);
  background: rgba(251, 191, 36, 0.1);
}
#practice-mode-modal .practice-scope-option.is-active[data-scope="free"] .practice-scope-option-title {
  color: #fef3c7;
}
#practice-mode-modal .practice-scope-option.is-active[data-scope="free"] .practice-scope-option-desc {
  color: rgba(253, 224, 71, 0.78);
}
#practice-mode-modal .practice-scope-option-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #cbd5e1;
}
#practice-mode-modal .practice-scope-option-desc {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--pm-text-dim);
}
#practice-mode-modal .practice-modal-start-btn {
  display: inline-flex;
  min-width: 15rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.875rem 1.75rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 55%, #2dd4bf 100%);
  box-shadow: 0 12px 32px -16px rgba(56, 189, 248, 0.55);
  transition: filter 0.15s ease, transform 0.15s ease;
}
#practice-mode-modal .practice-modal-start-btn:hover {
  filter: brightness(1.06);
}
.practice-mode-brand-gradient {
  background: linear-gradient(90deg, #7dd3fc, #67e8f9, #5eead4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dictionary / textbook kind tabs in chooser modal */
.dict-kind-tab.is-active,
.dict-kind-tab[aria-selected="true"] {
  background: #fff;
  color: #6d28d9;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}