.learn-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.learn-mode {
  border: 1px solid var(--line);
  background: var(--elev);
  border-radius: var(--radius);
  padding: 0.9rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.learn-mode.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.learn-mode strong { display: block; margin-bottom: 0.25rem; }
.ask-box { display: grid; gap: 0.75rem; margin: 1rem 0; }
.ask-answer {
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  white-space: pre-wrap;
}
.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  margin: 0.4rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--elev);
  font: inherit;
  cursor: pointer;
}
.quiz-option.is-selected { border-color: var(--accent); }
.quiz-option.is-correct { border-color: var(--ok); background: var(--ok-bg); }
.quiz-option.is-wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--elev)); }
.privacy-banner {
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line));
  background: var(--ok-bg);
  color: var(--ok);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
}